diff --git a/packages/ui/src/components/date-input/date-input.test.tsx b/packages/ui/src/components/date-input/date-input.test.tsx
index 7604d29e..9a660be8 100644
--- a/packages/ui/src/components/date-input/date-input.test.tsx
+++ b/packages/ui/src/components/date-input/date-input.test.tsx
@@ -6,9 +6,12 @@ import DateInput from "./date-input";
 describe("Date Input", () => {
   const user = userEvent.setup();
   beforeEach(async () => {
+    const onSelectMock = jest.fn();
     render(
       <div>
-        <DateInput id="From">From</DateInput>
+        <DateInput id="From" onSelect={onSelectMock}>
+          From
+        </DateInput>
         <button data-testid="outside-event-listener">Exit calendar</button>
       </div>,
     );
diff --git a/packages/ui/src/components/date-input/date-input.tsx b/packages/ui/src/components/date-input/date-input.tsx
index 53c2af08..7ccf712f 100644
--- a/packages/ui/src/components/date-input/date-input.tsx
+++ b/packages/ui/src/components/date-input/date-input.tsx
@@ -1,3 +1,4 @@
+import type { onEvent, Nil } from "@lucky-parking/typings";
 import { formatToMiddleEndian } from "@lucky-parking/utilities/dist/date";
 import clsx from "clsx";
 import { PropsWithChildren, useEffect, useRef, useState } from "react";
@@ -6,14 +7,20 @@ import Calendar from "../calendar";
 interface DateInputProps {
   id: string;
   children: PropsWithChildren;
+  date?: Date | Nil;
+  onSelect: onEvent;
 }
 
 export default function DateInput({ children, ...props }: PropsWithChildren<DateInputProps>) {
-  const { id } = props;
+  const { id, date, onSelect } = props;
   const calendarRef = useRef<HTMLDivElement>(null);
-  const [value, setValue] = useState<string | null>();
+  const [value, setValue] = useState<string | Nil>(date ? formatToMiddleEndian(date) : null);
   const [isCalendarVisible, setCalendarVisible] = useState(false);
 
+  useEffect(() => {
+    setValue(date ? formatToMiddleEndian(date) : null);
+  }, [date]);
+
   useEffect(() => {
     function handleClickOutside(event: MouseEvent) {
       if (!calendarRef || calendarRef.current === null) return;
@@ -27,6 +34,11 @@ export default function DateInput({ children, ...props }: PropsWithChildren<Date
     };
   }, [calendarRef, setValue]);
 
+  const handleSelectValueChange = (newValue: Date) => {
+    setValue(formatToMiddleEndian(newValue));
+    onSelect({ id: id, date: newValue });
+  };
+
   return (
     <div className="relative flex-auto">
       <div
@@ -51,7 +63,7 @@ export default function DateInput({ children, ...props }: PropsWithChildren<Date
       </div>
       {isCalendarVisible && (
         <div className="absolute z-50 mt-2 drop-shadow" ref={calendarRef}>
-          <Calendar onSelectValueChange={(newValue: Date) => setValue(formatToMiddleEndian(newValue))} />
+          <Calendar onSelectValueChange={handleSelectValueChange} />
         </div>
       )}
     </div>
diff --git a/packages/website/src/entities/branding/ui/logo.tsx b/packages/website/src/entities/branding/ui/logo.tsx
index 25f642e7..689cf7f0 100644
--- a/packages/website/src/entities/branding/ui/logo.tsx
+++ b/packages/website/src/entities/branding/ui/logo.tsx
@@ -1,19 +1,24 @@
 import BrandMark from "./brandmark.svg";
 import { Link } from "react-router-dom";
+import type { onEvent } from "@lucky-parking/typings";
+
+type LogoProps = {
+  onClick?: onEvent;
+};
+
+export default function Logo(props: LogoProps) {
+  const { onClick } = props;
 
-export default function Logo() {
   return (
-    /**
-     * reloadDocument - A property used in the Link component from React Router to skip client side routing and let the browser handle the transition normally (as if it were an <a href>).
-     * @typedef {boolean} reloadDocument
-     */
-    <Link to="/" reloadDocument={true} className="flex items-center space-x-2">
-      <img src={BrandMark} alt="Parking Insights brand mark" />
+    <div className="flex items-center space-x-2" onClick={onClick}>
+      <Link to="/" reloadDocument={true} className="flex items-center space-x-2">
+        <img src={BrandMark} alt="Parking Insights brand mark" />
 
-      <div className="select-none -space-y-1 font-semibold uppercase text-blue-600">
-        <p>Parking</p>
-        <p>Insights</p>
-      </div>
-    </Link>
+        <div className="select-none -space-y-1 font-semibold uppercase text-blue-600">
+          <p>Parking</p>
+          <p>Insights</p>
+        </div>
+      </Link>
+    </div>
   );
 }
diff --git a/packages/website/src/features/citation/ui/citation-data-category-selection.tsx b/packages/website/src/features/citation/ui/citation-data-category-selection.tsx
index 6da8a74b..b9e5000b 100644
--- a/packages/website/src/features/citation/ui/citation-data-category-selection.tsx
+++ b/packages/website/src/features/citation/ui/citation-data-category-selection.tsx
@@ -5,12 +5,13 @@ import { CitationDataCategories } from "../lib";
 
 interface CitationDataCategorySelectionProps {
   onSelect: onEvent;
+  category?: string;
 }
 
 const CITATION_DATA_CATEGORIES = _.map(CitationDataCategories, (value) => ({ value, text: value }));
 
 export default function CitationDataCategorySelection(props: CitationDataCategorySelectionProps) {
-  const { onSelect } = props;
+  const { onSelect, category } = props;
 
   return (
     <PickList
@@ -19,6 +20,7 @@ export default function CitationDataCategorySelection(props: CitationDataCategor
       onChange={onSelect}
       options={CITATION_DATA_CATEGORIES}
       placeholder={CITATION_DATA_CATEGORIES[0].text}
+      value={category}
     />
   );
 }
diff --git a/packages/website/src/features/citation/ui/citation-data-filter.test.tsx b/packages/website/src/features/citation/ui/citation-data-filter.test.tsx
index 1de3bd1f..1a8c572c 100644
--- a/packages/website/src/features/citation/ui/citation-data-filter.test.tsx
+++ b/packages/website/src/features/citation/ui/citation-data-filter.test.tsx
@@ -7,7 +7,9 @@ import CitationDataFilter from "./citation-data-filter";
 describe("Citation-data-filter", () => {
   describe("rendering", () => {
     beforeEach(() => {
-      render(<CitationDataFilter onCategorySelect={() => {}} onDatePresetSelect={() => {}} />);
+      render(
+        <CitationDataFilter onCategorySelect={() => {}} onDatePresetSelect={() => {}} onCustomDateSelect={() => {}} />,
+      );
     });
 
     it("renders citation data categories with initial placeholder", async () => {
@@ -27,11 +29,16 @@ describe("Citation-data-filter", () => {
   describe("interactions", () => {
     const onCategorySelectMock = jest.fn();
     const onDatePresetSelectMock = jest.fn();
+    const onCustomDateSelectMock = jest.fn();
 
     beforeEach(async () => {
       const user = userEvent.setup();
       render(
-        <CitationDataFilter onCategorySelect={onCategorySelectMock} onDatePresetSelect={onDatePresetSelectMock} />,
+        <CitationDataFilter
+          onCategorySelect={onCategorySelectMock}
+          onDatePresetSelect={onDatePresetSelectMock}
+          onCustomDateSelect={onCustomDateSelectMock}
+        />,
       );
 
       await user.click(screen.getByRole("combobox", { name: "citation-data-categories" }));
diff --git a/packages/website/src/features/citation/ui/citation-data-filter.tsx b/packages/website/src/features/citation/ui/citation-data-filter.tsx
index 921c6d3c..39c26d5a 100644
--- a/packages/website/src/features/citation/ui/citation-data-filter.tsx
+++ b/packages/website/src/features/citation/ui/citation-data-filter.tsx
@@ -1,4 +1,4 @@
-import type { onEvent } from "@lucky-parking/typings";
+import type { onEvent, Nil } from "@lucky-parking/typings";
 import DateInput from "@lucky-parking/ui/src/components/date-input";
 import CitationDataCategorySelection from "./citation-data-category-selection";
 import CitationDatePresetsSelection from "./citation-date-presets-selection";
@@ -6,23 +6,37 @@ import CitationDatePresetsSelection from "./citation-date-presets-selection";
 interface CitationDataFilterProps {
   onCategorySelect: onEvent;
   onDatePresetSelect: onEvent;
+  onCustomDateSelect: onEvent;
+  category?: string;
+  datePreset?: string;
+  customDateFromInput?: Date | Nil;
+  customDateToInput?: Date | Nil;
 }
 
 export default function CitationDataFilter(props: CitationDataFilterProps) {
-  const { onCategorySelect, onDatePresetSelect } = props;
+  const {
+    onCategorySelect,
+    onDatePresetSelect,
+    onCustomDateSelect,
+    category,
+    datePreset,
+    customDateFromInput,
+    customDateToInput,
+  } = props;
 
   return (
     <>
-      <CitationDataCategorySelection onSelect={onCategorySelect} />
-
+      <CitationDataCategorySelection category={category} onSelect={onCategorySelect} />
       <div className="flex w-full items-center space-x-2">
-        <CitationDatePresetsSelection onSelect={onDatePresetSelect} />
-
+        <CitationDatePresetsSelection datePreset={datePreset} onSelect={onDatePresetSelect} />
         <p className="paragraph-2 text-black-400 font-medium">or</p>
-
         <div className="flex flex-auto items-center space-x-1">
-          <DateInput id="From">From</DateInput>
-          <DateInput id="To">To</DateInput>
+          <DateInput id="From" date={customDateFromInput} onSelect={onCustomDateSelect}>
+            From
+          </DateInput>
+          <DateInput id="To" date={customDateToInput} onSelect={onCustomDateSelect}>
+            To
+          </DateInput>
         </div>
       </div>
     </>
diff --git a/packages/website/src/features/citation/ui/citation-date-presets-selection.tsx b/packages/website/src/features/citation/ui/citation-date-presets-selection.tsx
index d0c8fb29..2dc61ff7 100644
--- a/packages/website/src/features/citation/ui/citation-date-presets-selection.tsx
+++ b/packages/website/src/features/citation/ui/citation-date-presets-selection.tsx
@@ -5,12 +5,13 @@ import { RelativeDatePresets } from "@/shared/lib/constants/date";
 
 interface CitationDataPresetsSelection {
   onSelect: onEvent;
+  datePreset?: string;
 }
 
 const CITATION_DATE_PRESETS = _.map(RelativeDatePresets, (value) => ({ value, text: value }));
 
 export default function CitationDatePresetsSelection(props: CitationDataPresetsSelection) {
-  const { onSelect } = props;
+  const { onSelect, datePreset } = props;
 
   return (
     <PickList
@@ -19,6 +20,7 @@ export default function CitationDatePresetsSelection(props: CitationDataPresetsS
       onChange={onSelect}
       options={CITATION_DATE_PRESETS}
       placeholder={CITATION_DATE_PRESETS[0].text}
+      value={datePreset}
     />
   );
 }
diff --git a/packages/website/src/features/citation/ui/use-citation-search-params.ts b/packages/website/src/features/citation/ui/use-citation-search-params.ts
new file mode 100644
index 00000000..a92bcd5c
--- /dev/null
+++ b/packages/website/src/features/citation/ui/use-citation-search-params.ts
@@ -0,0 +1,150 @@
+import { useSearchParams } from "react-router-dom";
+import { RelativeDatePresets } from "@/shared/lib/constants/date";
+import { formatToMiddleEndian } from "@lucky-parking/utilities/dist/date";
+import { calculateDateRange } from "@/shared/lib/utilities/date";
+
+export default function useCitationSearchParams() {
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const getCategory = () => searchParams.get("category");
+  const setCategory = (value: string) =>
+    setSearchParams((prevParams) => {
+      prevParams.set("category", value);
+      return prevParams;
+    });
+
+  const getDatePreset = () => searchParams.get("date_preset");
+  const setDatePreset = (value: RelativeDatePresets) =>
+    setSearchParams((prevParams) => {
+      prevParams.set("date_preset", value);
+      return prevParams;
+    });
+
+  const getDateRange = () => {
+    const dateFromSearchQuery = searchParams.get("date_from");
+    const dateToSearchQuery = searchParams.get("date_to");
+
+    if (dateFromSearchQuery && dateToSearchQuery) {
+      const dateFrom = new Date(dateFromSearchQuery);
+      const dateTo = new Date(dateToSearchQuery);
+      return [dateFrom, dateTo];
+    } else {
+      return null;
+    }
+  };
+  const setDateRange = (value: RelativeDatePresets | Date[]) =>
+    setSearchParams((prevParams) => {
+      let dateRange: Date[] = [];
+      if (Array.isArray(value)) {
+        dateRange = value;
+      } else {
+        dateRange = calculateDateRange(value);
+      }
+      prevParams.set("date_from", formatToMiddleEndian(dateRange[0]));
+      prevParams.set("date_to", formatToMiddleEndian(dateRange[1]));
+      return prevParams;
+    });
+
+  const getPlaceName = () => searchParams.get("place_name");
+  const setPlaceName = (value: string) =>
+    setSearchParams((prevParams) => {
+      prevParams.set("place_name", value);
+      return prevParams;
+    });
+
+  const getPlaceType = () => searchParams.get("place_type");
+  const setPlaceType = (value: string) =>
+    setSearchParams((prevParams) => {
+      prevParams.set("place_type", value);
+      return prevParams;
+    });
+
+  const getRegion1 = () => searchParams.get("region1");
+  const setRegion1 = (value: string) =>
+    setSearchParams((prevParams) => {
+      prevParams.set("region1", value);
+      return prevParams;
+    });
+  const deleteRegion1 = () =>
+    setSearchParams((prevParams) => {
+      prevParams.delete("region1");
+      return prevParams;
+    });
+
+  const getRegion2 = () => searchParams.get("region2");
+  const setRegion2 = (value: string) =>
+    setSearchParams((prevParams) => {
+      prevParams.set("region2", value);
+      return prevParams;
+    });
+  const deleteRegion2 = () =>
+    setSearchParams((prevParams) => {
+      prevParams.delete("region2");
+      return prevParams;
+    });
+
+  const getCompareMode = () => searchParams.get("compare_mode");
+  const setCompareMode = () =>
+    setSearchParams((prevParams) => {
+      prevParams.set("compare_mode", "true");
+      return prevParams;
+    });
+
+  const getVisualizationMode = () => searchParams.get("visualization_mode");
+  const setVisualizationMode = () =>
+    setSearchParams((prevParams) => {
+      prevParams.set("visualization_mode", "true");
+      return prevParams;
+    });
+  const deleteVisualizationMode = () =>
+    setSearchParams((prevParams) => {
+      prevParams.delete("visualization_mode");
+      return prevParams;
+    });
+
+  const clearSearchParams = () => setSearchParams({});
+
+  return {
+    category: {
+      get: getCategory,
+      set: setCategory,
+    },
+    datePreset: {
+      get: getDatePreset,
+      set: setDatePreset,
+    },
+    dateRange: {
+      get: getDateRange,
+      set: setDateRange,
+    },
+    placeName: {
+      get: getPlaceName,
+      set: setPlaceName,
+    },
+    placeType: {
+      get: getPlaceType,
+      set: setPlaceType,
+    },
+    region1: {
+      get: getRegion1,
+      set: setRegion1,
+      delete: deleteRegion1,
+    },
+    region2: {
+      get: getRegion2,
+      set: setRegion2,
+      delete: deleteRegion2,
+    },
+    compareMode: {
+      get: getCompareMode,
+      set: setCompareMode,
+    },
+    visualizationMode: {
+      get: getVisualizationMode,
+      set: setVisualizationMode,
+      delete: deleteVisualizationMode,
+    },
+    clearSearchParams: clearSearchParams,
+    searchParams: searchParams,
+  };
+}
diff --git a/packages/website/src/features/geocoder/ui/geocoder.tsx b/packages/website/src/features/geocoder/ui/geocoder.tsx
index fe16d0b2..50157279 100644
--- a/packages/website/src/features/geocoder/ui/geocoder.tsx
+++ b/packages/website/src/features/geocoder/ui/geocoder.tsx
@@ -14,26 +14,40 @@ import GeocoderResultHeader from "./geocoder-result-header";
 const DEFAULT_PLACEHOLDER = "Neighborhood Council, Zip Code, Address";
 
 interface GeocoderProps {
+  id?: string;
   filters?: PlaceType[] | Nil;
   isDisabled?: boolean;
   onSelect: onEvent;
   placeholder?: string;
-  savedQuery?: GeocodeResult;
+  savedQuery?: string | Nil;
+  onClearRegion?: onEvent;
 }
 
 export default function Geocoder(props: GeocoderProps) {
-  const { filters = [], isDisabled = false, onSelect, placeholder = DEFAULT_PLACEHOLDER, savedQuery } = props;
+  const {
+    id,
+    filters = [],
+    isDisabled = false,
+    onSelect,
+    placeholder = DEFAULT_PLACEHOLDER,
+    savedQuery,
+    onClearRegion,
+  } = props;
 
   const dispatch = useDispatch();
 
   const [isSuggestionsVisible, setSuggestionsVisible] = useState(false);
-  const [query, setQuery] = useState(savedQuery?.place_name || "");
+  const [query, setQuery] = useState(savedQuery || "");
   const [results, setResults] = useState<GeocodeResult[]>([]);
 
+  const hasSavedQuery = useMemo(() => savedQuery !== null, [savedQuery]);
   const hasQuery = useMemo(() => query && !_.isEmpty(query), [query]);
   const hasResults = useMemo(() => results && !_.isEmpty(results), [results]);
 
   const onInputChange = (value: string) => {
+    if (value === "" && onClearRegion) {
+      onClearRegion({ id: id, value: value });
+    }
     setQuery(value);
     setSuggestionsVisible(true);
   };
@@ -68,6 +82,10 @@ export default function Geocoder(props: GeocoderProps) {
         .slice(0, 5)
         .value();
       setResults(results);
+
+      if (hasSavedQuery) {
+        onSuggestionClick(results[0]);
+      }
     })();
   }, [query]);
 
diff --git a/packages/website/src/widgets/citation/ui/explorer/citation-explorer.tsx b/packages/website/src/widgets/citation/ui/explorer/citation-explorer.tsx
index 8ec81172..b5cce083 100644
--- a/packages/website/src/widgets/citation/ui/explorer/citation-explorer.tsx
+++ b/packages/website/src/widgets/citation/ui/explorer/citation-explorer.tsx
@@ -1,5 +1,5 @@
 import _ from "lodash";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { PlaceType, REGION_TYPE_BY_PLACE_TYPE, RegionType } from "@/features/geocoder/lib/constants";
 import { selectors } from "@/shared/data/store/ui-slice";
 import { GeocodeResult } from "@/shared/lib/types";
@@ -9,12 +9,14 @@ import DrawSearch from "../search/draw-search";
 import SingleSearch from "../search/single-seach";
 import ComparativeSearchVisualization from "../visualization/comparative-search-visualization";
 import SingleSearchVisualization from "../visualization/single-search-visualization";
+import useCitationSearchParams from "@/features/citation/ui/use-citation-search-params";
 
 export default function CitationExplorer() {
   const ui = useSelector(selectors.selectUi);
-  const [isSingleSearchMode, setSingleSearchMode] = useState(true);
+  const citationSearchParams = useCitationSearchParams();
+  const [isSingleSearchMode, setSingleSearchMode] = useState(citationSearchParams.compareMode.get() === null);
   const [isVisualizationMode, setVisualizationMode] = useState(false);
-  const [regionType, setRegionType] = useState<RegionType | null>(null);
+  const [regionType, setRegionType] = useState<RegionType | null>(citationSearchParams.placeType.get() as RegionType);
   const [region1, setRegion1] = useState<GeocodeResult | null>(null);
   const [region2, setRegion2] = useState<GeocodeResult | null>(null);
 
@@ -23,18 +25,81 @@ export default function CitationExplorer() {
     setRegionType(null);
     setRegion1(null);
     setRegion2(null);
+    citationSearchParams.clearSearchParams();
   };
 
-  const onVisualizationModeToggle = () => setVisualizationMode((prevState) => !prevState);
+  const onVisualizationModeToggle = () => {
+    setVisualizationMode((prevState) => !prevState);
 
+    if (isSingleSearchMode) {
+      citationSearchParams.clearSearchParams();
+    } else {
+      if (citationSearchParams.visualizationMode.get()) {
+        citationSearchParams.visualizationMode.delete();
+      } else {
+        citationSearchParams.visualizationMode.set();
+      }
+    }
+  };
+
+  // For single search mode
   const onRegionSelect = (feature: GeocodeResult) => {
     if (_.isNil(feature)) return;
 
     setRegion1(feature);
     setRegionType(REGION_TYPE_BY_PLACE_TYPE[_.first(feature.place_type) as PlaceType]);
     setVisualizationMode(true);
+
+    if (citationSearchParams.searchParams.size == 0) {
+      citationSearchParams.placeName.set(feature.place_name);
+      citationSearchParams.placeType.set(feature.place_type[0]);
+    }
+  };
+
+  // For comparative search mode
+  const onRegionTypeSelect = (regionType: RegionType) => {
+    setRegionType(regionType);
+    citationSearchParams.placeType.set(regionType);
+  };
+
+  const onComparativeRegionSelect = (value: { id: string; feature: GeocodeResult }) => {
+    if (value.id === "region1") {
+      if (_.isNil(value.feature)) return;
+
+      setRegion1(value.feature);
+      citationSearchParams.region1.set(value.feature.place_name);
+    }
+    if (value.id === "region2") {
+      if (_.isNil(value.feature)) return;
+
+      setRegion2(value.feature);
+      citationSearchParams.region2.set(value.feature.place_name);
+    }
+  };
+
+  const onClearRegion = (value: { id: string; value: string }) => {
+    if (value.id === "region1") {
+      setRegion1(null);
+      citationSearchParams.region1.delete();
+    }
+    if (value.id === "region2") {
+      setRegion2(null);
+      citationSearchParams.region2.delete();
+    }
   };
 
+  useEffect(() => {
+    if (citationSearchParams.visualizationMode.get() && region1 && region2) {
+      setVisualizationMode(true);
+    }
+  }, [region1, region2]);
+
+  useEffect(() => {
+    if (!isSingleSearchMode) {
+      citationSearchParams.compareMode.set();
+    }
+  }, [isSingleSearchMode]);
+
   if (ui.isMapInstructionsVisible) {
     return <DrawSearch />;
   }
@@ -61,17 +126,23 @@ export default function CitationExplorer() {
   }
 
   return isSingleSearchMode ? (
-    <SingleSearch onToggle={onSearchModeToggle} onSelect={onRegionSelect} />
+    <SingleSearch
+      onToggle={onSearchModeToggle}
+      onSelect={onRegionSelect}
+      savedQuery={citationSearchParams.placeName.get()}
+    />
   ) : (
     <ComparativeSearch
       onClose={onSearchModeToggle}
-      onRegion1Select={setRegion1}
-      onRegion2Select={setRegion2}
-      onRegionTypeSelect={setRegionType}
+      onComparativeRegionSelect={onComparativeRegionSelect}
+      onRegionTypeSelect={onRegionTypeSelect}
+      onClearRegion={onClearRegion}
       onSubmit={onVisualizationModeToggle}
       region1={region1 as GeocodeResult}
       region2={region2 as GeocodeResult}
       regionType={regionType as RegionType}
+      region1SavedQuery={citationSearchParams.region1.get()}
+      region2SavedQuery={citationSearchParams.region2.get()}
     />
   );
 }
diff --git a/packages/website/src/widgets/citation/ui/search/comparative-search.tsx b/packages/website/src/widgets/citation/ui/search/comparative-search.tsx
index fb00dc38..8fe02cd7 100644
--- a/packages/website/src/widgets/citation/ui/search/comparative-search.tsx
+++ b/packages/website/src/widgets/citation/ui/search/comparative-search.tsx
@@ -21,18 +21,30 @@ const GEOCODER_PLACEHOLDERS = {
 
 interface ComparativeSearchProps {
   onClose: onEvent;
-  onRegion1Select: onEvent;
-  onRegion2Select: onEvent;
+  onComparativeRegionSelect: onEvent;
   onRegionTypeSelect: onEvent;
+  onClearRegion: onEvent;
   onSubmit: onEvent;
   region1: GeocodeResult;
   region2: GeocodeResult;
   regionType: RegionType;
+  region1SavedQuery: string | null;
+  region2SavedQuery: string | null;
 }
 
 export default function ComparativeSearch(props: ComparativeSearchProps) {
-  const { onClose, onRegion1Select, onRegion2Select, onRegionTypeSelect, onSubmit, region1, region2, regionType } =
-    props;
+  const {
+    onClose,
+    onComparativeRegionSelect,
+    onRegionTypeSelect,
+    onClearRegion,
+    onSubmit,
+    region1,
+    region2,
+    regionType,
+    region1SavedQuery,
+    region2SavedQuery,
+  } = props;
 
   const [dataFocus, setDataFocus] = useState<number | null>(null);
 
@@ -98,11 +110,13 @@ export default function ComparativeSearch(props: ComparativeSearchProps) {
           <StepperItem title={firstRegionTitleContainer} isFinished={!_.isNil(region1)}>
             <div className="mb-5 mt-2 w-[420px]">
               <Geocoder
-                onSelect={onRegion1Select}
+                id="region1"
+                onSelect={(value) => onComparativeRegionSelect({ id: "region1", feature: value })}
                 placeholder={GEOCODER_PLACEHOLDERS[regionType] || ""}
                 filters={PLACE_TYPE_BY_REGION_TYPE[regionType]}
                 isDisabled={_.isNil(regionType)}
-                savedQuery={region1}
+                savedQuery={region1SavedQuery}
+                onClearRegion={onClearRegion}
               />
             </div>
           </StepperItem>
@@ -110,17 +124,19 @@ export default function ComparativeSearch(props: ComparativeSearchProps) {
           <StepperItem title={secondRegionTitleContainer} isFinished={!_.isNil(region2)}>
             <div className="my-2 w-[420px]">
               <Geocoder
-                onSelect={onRegion2Select}
+                id="region2"
+                onSelect={(value) => onComparativeRegionSelect({ id: "region2", feature: value })}
                 placeholder={GEOCODER_PLACEHOLDERS[regionType] || ""}
                 filters={regionType && PLACE_TYPE_BY_REGION_TYPE[regionType]}
                 isDisabled={_.isNil(regionType)}
-                savedQuery={region2}
+                savedQuery={region2SavedQuery}
+                onClearRegion={onClearRegion}
               />
             </div>
           </StepperItem>
         </StepperContainer>
 
-        <Button size={ButtonSize.large} onClick={onSubmit} isDisabled={!(region1 || region2)} className="ml-8">
+        <Button size={ButtonSize.large} onClick={onSubmit} isDisabled={!(region1 && region2)} className="ml-8">
           <p>Comparison Chart</p>
         </Button>
       </CitationExplorerSection>
diff --git a/packages/website/src/widgets/citation/ui/search/single-seach.tsx b/packages/website/src/widgets/citation/ui/search/single-seach.tsx
index c36de838..b9b6dec1 100644
--- a/packages/website/src/widgets/citation/ui/search/single-seach.tsx
+++ b/packages/website/src/widgets/citation/ui/search/single-seach.tsx
@@ -1,4 +1,4 @@
-import type { onEvent } from "@lucky-parking/typings";
+import type { onEvent, Nil } from "@lucky-parking/typings";
 import Geocoder, { SearchModeToggleButton } from "@/features/geocoder";
 import { MapDrawButton } from "@/features/map";
 import CitationExplorerDivider from "../explorer/citation-explorer-divider";
@@ -8,17 +8,18 @@ import CitationExplorerSectionTitle from "../explorer/citation-explorer-section-
 interface SingleSearchProps {
   onSelect: onEvent;
   onToggle: onEvent;
+  savedQuery: string | Nil;
 }
 
 export default function SingleSearch(props: SingleSearchProps) {
-  const { onSelect, onToggle } = props;
+  const { onSelect, onToggle, savedQuery } = props;
 
   return (
     <>
       <CitationExplorerSection>
         <CitationExplorerSectionTitle>Get Citation Data for One Area</CitationExplorerSectionTitle>
 
-        <Geocoder onSelect={onSelect} />
+        <Geocoder onSelect={onSelect} savedQuery={savedQuery} />
 
         <div className="w-1/2">
           <MapDrawButton />
diff --git a/packages/website/src/widgets/citation/ui/visualization/comparative-search-visualization-focused.tsx b/packages/website/src/widgets/citation/ui/visualization/comparative-search-visualization-focused.tsx
index 0a910531..d05ed2b9 100644
--- a/packages/website/src/widgets/citation/ui/visualization/comparative-search-visualization-focused.tsx
+++ b/packages/website/src/widgets/citation/ui/visualization/comparative-search-visualization-focused.tsx
@@ -35,7 +35,12 @@ export default function ComparativeSearchVisualizationFocused(props: Comparative
       <CitationExplorerDivider />
 
       <CitationExplorerSection>
-        <CitationDataFilter onCategorySelect={setCategory} onDatePresetSelect={onDatePresetSelect} />
+        {/* TODO: implement onCustomDateSelect based on date selection approach chosen */}
+        <CitationDataFilter
+          onCategorySelect={setCategory}
+          onDatePresetSelect={onDatePresetSelect}
+          onCustomDateSelect={() => {}}
+        />
       </CitationExplorerSection>
 
       <CitationExplorerDivider />
diff --git a/packages/website/src/widgets/citation/ui/visualization/comparative-search-visualization.tsx b/packages/website/src/widgets/citation/ui/visualization/comparative-search-visualization.tsx
index 40d84ce1..2057bc49 100644
--- a/packages/website/src/widgets/citation/ui/visualization/comparative-search-visualization.tsx
+++ b/packages/website/src/widgets/citation/ui/visualization/comparative-search-visualization.tsx
@@ -9,6 +9,7 @@ import { calculateDateRange } from "@/shared/lib/utilities/date";
 import CitationExplorerDivider from "../explorer/citation-explorer-divider";
 import CitationExplorerSection from "../explorer/citation-explorer-section";
 import CitationExplorerTitle from "../explorer/citation-explorer-title";
+import useCitationSearchParams from "@/features/citation/ui/use-citation-search-params";
 
 interface ComparativeSearchVisualizationProps {
   onClose: onEvent;
@@ -20,7 +21,8 @@ interface ComparativeSearchVisualizationProps {
 export default function ComparativeSearchVisualization(props: ComparativeSearchVisualizationProps) {
   const { onClose, region1, region2, regionType } = props;
 
-  const [category, setCategory] = useState(getFirst(CitationDataCategories));
+  const citationSearchParams = useCitationSearchParams();
+  const [category, setCategory] = useState(citationSearchParams.category.get() || getFirst(CitationDataCategories));
   const [dates, setDates] = useState(calculateDateRange(getFirst(RelativeDatePresets)));
 
   const mockDatasets = [
@@ -38,6 +40,11 @@ export default function ComparativeSearchVisualization(props: ComparativeSearchV
     setDates(calculateDateRange(preset));
   };
 
+  const onCategorySelect = (value: string) => {
+    setCategory(value);
+    citationSearchParams.category.set(value);
+  };
+
   return (
     <>
       <CitationExplorerTitle onClose={onClose}>Comparison Data</CitationExplorerTitle>
@@ -45,7 +52,13 @@ export default function ComparativeSearchVisualization(props: ComparativeSearchV
       <CitationExplorerDivider />
 
       <CitationExplorerSection>
-        <CitationDataFilter onCategorySelect={setCategory} onDatePresetSelect={onDatePresetSelect} />
+        <CitationDataFilter
+          onCategorySelect={onCategorySelect}
+          onDatePresetSelect={onDatePresetSelect}
+          // TODO: implement onCustomDateSelect based on date selection approach chosen
+          onCustomDateSelect={() => {}}
+          category={category}
+        />
       </CitationExplorerSection>
 
       <CitationExplorerSection>
diff --git a/packages/website/src/widgets/citation/ui/visualization/single-search-visualization.tsx b/packages/website/src/widgets/citation/ui/visualization/single-search-visualization.tsx
index be418b16..5f6c721b 100644
--- a/packages/website/src/widgets/citation/ui/visualization/single-search-visualization.tsx
+++ b/packages/website/src/widgets/citation/ui/visualization/single-search-visualization.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import type { onEvent } from "@lucky-parking/typings";
 import { formatToRangeString } from "@lucky-parking/utilities/dist/date";
 import { getFirst } from "@lucky-parking/utilities/dist/enum";
@@ -12,6 +12,7 @@ import type { RegionType } from "@/features/geocoder";
 import CitationExplorerDivider from "../explorer/citation-explorer-divider";
 import CitationExplorerSection from "../explorer/citation-explorer-section";
 import CitationExplorerSectionTitle from "../explorer/citation-explorer-section-title";
+import useCitationSearchParams from "@/features/citation/ui/use-citation-search-params";
 
 interface SingleSearchVisualizationProps {
   onClose: onEvent;
@@ -22,13 +23,56 @@ interface SingleSearchVisualizationProps {
 export default function SingleSearchVisualization(props: SingleSearchVisualizationProps) {
   const { onClose, region, regionType } = props;
 
-  const [category, setCategory] = useState(getFirst(CitationDataCategories));
-  const [dates, setDates] = useState(calculateDateRange(getFirst(RelativeDatePresets)));
+  const citationSearchParams = useCitationSearchParams();
+  const hasSavedDateRange = citationSearchParams.dateRange.get() !== null;
+  const [category, setCategory] = useState(citationSearchParams.category.get() || getFirst(CitationDataCategories));
+  const [datePreset, setDatePreset] = useState(citationSearchParams.datePreset.get() || getFirst(RelativeDatePresets));
+  const [dateRange, setDateRange] = useState<Date[]>(
+    citationSearchParams.dateRange.get() || calculateDateRange(datePreset),
+  );
+  const [customDateFromInput, setCustomDateFromInput] = useState<Date | null>(hasSavedDateRange ? dateRange[0] : null);
+  const [customDateToInput, setCustomDateToInput] = useState<Date | null>(hasSavedDateRange ? dateRange[1] : null);
+  const [customDateToggle, setCustomDateToggle] = useState(false);
 
   const onDatePresetSelect = (preset: RelativeDatePresets) => {
-    setDates(calculateDateRange(preset));
+    setCustomDateToggle(false);
+    setCustomDateFromInput(null);
+    setCustomDateToInput(null);
+
+    setDateRange(calculateDateRange(preset));
+    setDatePreset(preset);
+    citationSearchParams.dateRange.set(preset);
+  };
+
+  const onCategorySelect = (value: string) => {
+    setCategory(value);
+    citationSearchParams.category.set(value);
+  };
+
+  const onCustomDateSelect = (value: { id: string; date: Date }) => {
+    if (value.id === "From") {
+      setCustomDateFromInput(value.date);
+    }
+    if (value.id === "To") {
+      setCustomDateToInput(value.date);
+    }
   };
 
+  useEffect(() => {
+    if (customDateFromInput && customDateToInput) {
+      setCustomDateToggle(true);
+    }
+  }, [customDateFromInput, customDateToInput]);
+
+  useEffect(() => {
+    if (customDateToggle && customDateFromInput && customDateToInput) {
+      const a = new Date(customDateFromInput);
+      const b = new Date(customDateToInput);
+      setDateRange([a, b]);
+      citationSearchParams.dateRange.set([a, b]);
+    }
+  }, [customDateToggle, customDateFromInput, customDateToInput]);
+
   const mockDataset = [{ data: [] }];
 
   return (
@@ -47,7 +91,15 @@ export default function SingleSearchVisualization(props: SingleSearchVisualizati
       <CitationExplorerDivider />
 
       <CitationExplorerSection>
-        <CitationDataFilter onCategorySelect={setCategory} onDatePresetSelect={onDatePresetSelect} />
+        <CitationDataFilter
+          onCategorySelect={onCategorySelect}
+          onDatePresetSelect={onDatePresetSelect}
+          onCustomDateSelect={onCustomDateSelect}
+          category={category}
+          datePreset={datePreset}
+          customDateFromInput={customDateFromInput}
+          customDateToInput={customDateToInput}
+        />
       </CitationExplorerSection>
 
       <CitationExplorerDivider />
@@ -56,7 +108,7 @@ export default function SingleSearchVisualization(props: SingleSearchVisualizati
         <CitationDataInsights
           category={category}
           datasets={mockDataset}
-          dates={formatToRangeString(dates as Date[])}
+          dates={formatToRangeString(dateRange as Date[])}
           onClick={() => {}}
           stat="112,338"
           title={region.place_name}
diff --git a/packages/website/src/widgets/header/header.tsx b/packages/website/src/widgets/header/header.tsx
index 280521fd..729ac03c 100644
--- a/packages/website/src/widgets/header/header.tsx
+++ b/packages/website/src/widgets/header/header.tsx
@@ -2,14 +2,22 @@ import { Link } from "react-router-dom";
 import { Logo } from "@/entities/branding";
 import { PATHS } from "@/entities/navigation";
 import HowItWorksButton from "@/features/instructions/how-it-works-button";
+import useCitationSearchParams from "@/features/citation/ui/use-citation-search-params";
 
 export default function Header() {
+  const citationSearchParams = useCitationSearchParams();
+
+  const handleLogoClick = () => {
+    citationSearchParams.clearSearchParams();
+    window.location.reload();
+  };
+
   return (
     <div className="flex h-[60px] flex-1 items-center justify-between px-5 py-2">
       {/* Branding */}
       <div className="flex flex-1 items-center space-x-6">
         <Link to={PATHS.HOME}>
-          <Logo />
+          <Logo onClick={handleLogoClick} />
         </Link>
 
         {/* Description */}