diff --git a/RELEASE-NOTES.txt b/RELEASE-NOTES.txt
index b472a80aeee..db265a4607d 100644
--- a/RELEASE-NOTES.txt
+++ b/RELEASE-NOTES.txt
@@ -2,6 +2,7 @@
 
 11.7
 -----
+- [**] Analytics Hub: Now you can select custom date ranges. [https://github.com/woocommerce/woocommerce-ios/pull/8414]
 
 
 11.6
diff --git a/WooCommerce/Classes/ViewRelated/Dashboard/Analytics Hub/AnalyticsTimeRangeCard.swift b/WooCommerce/Classes/ViewRelated/Dashboard/Analytics Hub/AnalyticsTimeRangeCard.swift
index 7803a061ef8..b32c1bf9bb9 100644
--- a/WooCommerce/Classes/ViewRelated/Dashboard/Analytics Hub/AnalyticsTimeRangeCard.swift	
+++ b/WooCommerce/Classes/ViewRelated/Dashboard/Analytics Hub/AnalyticsTimeRangeCard.swift	
@@ -162,24 +162,5 @@ extension AnalyticsTimeRangeCard {
         case monthToDate
         case quarterToDate
         case yearToDate
-
-        /// Wee need to provide a custom `allCases` in order to evict `.custom` while the feature flag is active.
-        /// We should delete this once the feature flag has been removed.
-        ///
-        static var allCases: [Range] {
-            [
-                ServiceLocator.featureFlagService.isFeatureFlagEnabled(.analyticsHub) ? .custom : nil,
-                .today,
-                .yesterday,
-                .lastWeek,
-                .lastMonth,
-                .lastQuarter,
-                .lastYear,
-                .weekToDate,
-                .monthToDate,
-                .quarterToDate,
-                yearToDate
-            ].compactMap { $0 }
-        }
     }
 }
diff --git a/WooCommerce/Classes/ViewRelated/ReusableViews/SwiftUI Components/RangedDatePicker.swift b/WooCommerce/Classes/ViewRelated/ReusableViews/SwiftUI Components/RangedDatePicker.swift
index ef273dd54a5..f9ac3a27f0c 100644
--- a/WooCommerce/Classes/ViewRelated/ReusableViews/SwiftUI Components/RangedDatePicker.swift	
+++ b/WooCommerce/Classes/ViewRelated/ReusableViews/SwiftUI Components/RangedDatePicker.swift	
@@ -43,6 +43,7 @@ struct RangedDatePicker: View {
                     DatePicker("", selection: $startDate, in: ...Date(), displayedComponents: [.date])
                         .datePickerStyle(.graphical)
                         .accentColor(Color(.brand))
+                        .padding(.horizontal, Layout.calendarPadding)
 
                     // End Picker
                     Text(Localization.endDate)
@@ -54,6 +55,7 @@ struct RangedDatePicker: View {
                     DatePicker("", selection: $endDate, in: ...Date(), displayedComponents: [.date])
                         .datePickerStyle(.graphical)
                         .accentColor(Color(.brand))
+                        .padding(.horizontal, Layout.calendarPadding)
                 }
                 .padding()
             }
@@ -103,6 +105,7 @@ private extension RangedDatePicker {
     }
     enum Layout {
         static let titleSpacing: CGFloat = 4.0
+        static let calendarPadding: CGFloat = -8.0
     }
 }