diff --git a/app/routes/circulars._archive._index/DateSelectorButton.tsx b/app/routes/circulars._archive._index/DateSelectorButton.tsx
index 6d736070c..1335f1848 100644
--- a/app/routes/circulars._archive._index/DateSelectorButton.tsx
+++ b/app/routes/circulars._archive._index/DateSelectorButton.tsx
@@ -8,14 +8,13 @@
 import { Button, ButtonGroup, Icon } from '@trussworks/react-uswds'
 
 const dateSelectorLabels: Record<string, string> = {
-  hour: 'Last hour',
-  day: 'Last day',
-  week: 'Last week',
-  month: 'Last month',
-  year: 'Last year',
+  hour: 'Last Hour',
   today: 'Today',
-  mtd: 'Month to date',
-  ytd: 'Year to date',
+  day: 'Last Day',
+  week: 'Last Week',
+  month: 'Last Month',
+  year: 'Last Year',
+  ytd: 'Year to Date',
 }
 
 export default function ({
@@ -39,6 +38,8 @@ export default function ({
               {startDate}—{endDate}
             </>
           )) ||
+          (startDate && <>After {startDate}</>) ||
+          (endDate && <>Before {endDate}</>) ||
           'Filter by date'}
       </Button>
       <Button type="button" className={`${slimClasses} padding-x-1`}>
diff --git a/app/routes/circulars._archive._index/route.tsx b/app/routes/circulars._archive._index/route.tsx
index 145800f92..58e7d8fff 100644
--- a/app/routes/circulars._archive._index/route.tsx
+++ b/app/routes/circulars._archive._index/route.tsx
@@ -17,8 +17,13 @@ import {
 import {
   Button,
   ButtonGroup,
+  CardBody,
+  CardFooter,
+  DateRangePicker,
+  Grid,
   Icon,
   Label,
+  Radio,
   Select,
   TextInput,
 } from '@trussworks/react-uswds'
@@ -31,6 +36,7 @@ import CircularPagination from './CircularPagination'
 import CircularsHeader from './CircularsHeader'
 import CircularsIndex from './CircularsIndex'
 import DateSelectorButton from './DateSelectorButton'
+import DetailsDropdownContent from '~/components/DetailsDropdownContent'
 import Hint from '~/components/Hint'
 import { useFeature } from '~/root'
 
@@ -75,14 +81,46 @@ export default function () {
   if (searchString) searchString = `?${searchString}`
 
   const [inputQuery, setInputQuery] = useState(query)
+  const [inputDateGte, setInputDateGte] = useState(startDate)
+  const [inputDateLte, setInputDateLte] = useState(endDate)
+  const [showContent, setShowContent] = useState(false)
+  const [showDateRange, setShowDateRange] = useState(false)
   const clean = inputQuery === query
 
   const submit = useSubmit()
 
+  function setFuzzyTime(startDate?: string) {
+    setShowDateRange(false)
+    setInputDateGte(startDate)
+    setInputDateLte('')
+  }
+
+  function setDateRange() {
+    setShowContent(false)
+    if (inputDateGte) searchParams.set('startDate', inputDateGte)
+    else searchParams.delete('startDate')
+    if (inputDateLte) searchParams.set('endDate', inputDateLte)
+    else searchParams.delete('endDate')
+    submit(searchParams, {
+      method: 'get',
+      action: '/circulars',
+    })
+  }
+
+  const dateSelectorLabels: Record<string, string> = {
+    hour: 'Last Hour',
+    today: 'Today',
+    day: 'Last Day',
+    week: 'Last Week',
+    month: 'Last Month',
+    year: 'Last Year',
+    ytd: 'Year to Date',
+  }
+
   return (
     <>
       <CircularsHeader />
-      <ButtonGroup className="position-sticky top-0 bg-white margin-bottom-1 padding-top-1">
+      <ButtonGroup className="position-sticky top-0 bg-white margin-bottom-1 padding-top-1 z-top">
         <Form
           className="display-inline-block usa-search usa-search--small"
           role="search"
@@ -113,7 +151,102 @@ export default function () {
           </Button>
         </Form>
         {featureCircularsFilterByDate && (
-          <DateSelectorButton startDate={startDate} endDate={endDate} />
+          <>
+            <DateSelectorButton
+              startDate={startDate}
+              endDate={endDate}
+              onClick={() => {
+                setShowContent((shown) => !shown)
+                setShowDateRange(false)
+              }}
+              expanded={showContent}
+            />
+            {showContent && (
+              <DetailsDropdownContent className="maxw-card-xlg">
+                <CardBody>
+                  <Grid row>
+                    <Grid col={4} key={`radio-alltime`}>
+                      <Radio
+                        id={`radio-alltime`}
+                        name="radio-date"
+                        value=""
+                        label="All Time"
+                        defaultChecked={true}
+                        onChange={(e) => {
+                          setInputDateGte(e.target.value)
+                        }}
+                      />
+                    </Grid>
+                    {Object.entries(dateSelectorLabels).map(
+                      ([value, label]) => (
+                        <Grid col={4} key={`radio-${value}`}>
+                          <Radio
+                            id={`radio-${value}`}
+                            name="radio-date"
+                            value={value}
+                            label={label}
+                            checked={value === inputDateGte}
+                            onChange={() => {
+                              setFuzzyTime(value)
+                            }}
+                          />
+                        </Grid>
+                      )
+                    )}
+                    <Grid col={4}>
+                      <Radio
+                        id="radio-custom"
+                        name="radio-date"
+                        value="custom"
+                        label="Custom Range..."
+                        checked={showDateRange}
+                        onChange={(e) => {
+                          setShowDateRange(e.target.checked)
+                        }}
+                      />
+                    </Grid>
+                  </Grid>
+                  {showDateRange && (
+                    <DateRangePicker
+                      startDateHint="dd/mm/yyyy"
+                      startDateLabel="Start Date"
+                      className="margin-bottom-2"
+                      startDatePickerProps={{
+                        id: 'event-date-start',
+                        name: 'event-date-start',
+                        defaultValue: 'startDate',
+                        onChange: (value) => {
+                          setInputDateGte(value)
+                        },
+                      }}
+                      endDateHint="dd/mm/yyyy"
+                      endDateLabel="End Date"
+                      endDatePickerProps={{
+                        id: 'event-date-end',
+                        name: 'event-date-end',
+                        defaultValue: 'endDate',
+                        onChange: (value) => {
+                          setInputDateLte(value)
+                        },
+                      }}
+                    />
+                  )}
+
+                  <CardFooter>
+                    <Button
+                      type="button"
+                      form="searchForm"
+                      onClick={() => {
+                        setDateRange()
+                      }}
+                    >
+                      <Icon.CalendarToday /> Submit
+                    </Button>
+                  </CardFooter>
+                </CardBody>
+              </DetailsDropdownContent>
+            )}
+          </>
         )}
         <Link to={`/circulars/new${searchString}`}>
           <Button