diff --git a/app/lish/[did]/[publication]/dashboard/PublicationAnalytics.tsx b/app/lish/[did]/[publication]/dashboard/PublicationAnalytics.tsx
index 807c7836..d76e7940 100644
--- a/app/lish/[did]/[publication]/dashboard/PublicationAnalytics.tsx
+++ b/app/lish/[did]/[publication]/dashboard/PublicationAnalytics.tsx
@@ -1,9 +1,135 @@
+import { ArrowRightTiny } from "components/Icons/ArrowRightTiny";
 import { UpgradeContent } from "../UpgradeModal";
+import { Popover } from "components/Popover";
+import { DatePicker } from "components/DatePicker";
+import { useState } from "react";
+import { useLocalizedDate } from "src/hooks/useLocalizedDate";
+import type { DateRange } from "react-day-picker";
+import { usePublicationData } from "./PublicationSWRProvider";
 
 export const PublicationAnalytics = () => {
+  let isPro = true;
+
+  let { data: publication } = usePublicationData();
+  let [dateRange, setDateRange] = useState<DateRange>({ from: undefined });
+
+  if (!isPro)
+    return (
+      <div className="sm:mx-auto pt-4 s">
+        <UpgradeContent />
+      </div>
+    );
+
   return (
-    <div className="sm:mx-auto pt-4 s">
-      <UpgradeContent />
+    <div className="analytics">
+      <div className="analyticsViewCount">
+        <div className="flex justify-between items-center gap-2 pb-2 w-full">
+          <div className="flex gap-2 items-center">
+            <h3>Traffic</h3>
+            <ArrowRightTiny /> <PostSelector />
+          </div>
+          <DateRangeSelector
+            dateRange={dateRange}
+            setDateRange={setDateRange}
+            pubStartDate={publication?.publication?.indexed_at}
+          />
+        </div>
+        <div className="aspect-video w-full border border-border" />
+      </div>
+
+      {/*<div>subscriber count over time</div>
+        <div>Top Referrers</div>*/}
     </div>
   );
 };
+
+const PostSelector = () => {
+  return <div>Total</div>;
+};
+
+const DateRangeSelector = (props: {
+  pubStartDate: string | undefined;
+  dateRange: DateRange;
+  setDateRange: (dateRange: DateRange) => void;
+}) => {
+  let buttonClass =
+    "rounded-md px-1 text-sm border border-accent-contrast text-accent-contrast";
+
+  let currentDate = new Date();
+
+  console.log("dateRange" + props.dateRange.from?.toISOString());
+  console.log("pubstart" + props.pubStartDate);
+
+  let startDate = useLocalizedDate(
+    props.dateRange.from?.toISOString() ||
+      props.pubStartDate ||
+      "2025-01-01T12:00:00.000Z",
+    {
+      month: "short",
+      day: "numeric",
+    },
+  );
+
+  let endDate = useLocalizedDate(
+    (props.dateRange.to ?? currentDate).toISOString(),
+    {
+      month: "short",
+      day: "numeric",
+    },
+  );
+
+  function handleDateChange(range: DateRange | undefined) {
+    if (range) props.setDateRange(range);
+  }
+
+  return (
+    <Popover
+      className={"w-fit"}
+      trigger={
+        <div className="text-tertiary ml-0">
+          {props.dateRange.from === undefined
+            ? "All Time"
+            : `${startDate} - ${endDate}`}
+        </div>
+      }
+    >
+      <div className="flex gap-2 pt-1">
+        <button
+          onClick={() => {
+            props.setDateRange({ from: undefined, to: undefined });
+          }}
+          className={`${buttonClass}`}
+        >
+          All
+        </button>
+        <button
+          onClick={() => {
+            let from = new Date();
+            from.setDate(from.getDate() - 7);
+            props.setDateRange({ from, to: new Date() });
+          }}
+          className={`${buttonClass}`}
+        >
+          Last Week
+        </button>
+        <button
+          onClick={() => {
+            let from = new Date();
+            from.setMonth(from.getMonth() - 1);
+            props.setDateRange({ from, to: new Date() });
+          }}
+          className={`${buttonClass}`}
+        >
+          Last Month
+        </button>
+      </div>
+      <hr className="my-2 border-border-light" />
+      <DatePicker
+        mode="range"
+        selected={props.dateRange}
+        onSelect={handleDateChange}
+        disabled={(date) => date > new Date()}
+      />
+    </Popover>
+  );
+};
diff --git a/components/Blocks/DateTimeBlock.tsx b/components/Blocks/DateTimeBlock.tsx
index d5b40cc1..f424736e 100644
--- a/components/Blocks/DateTimeBlock.tsx
+++ b/components/Blocks/DateTimeBlock.tsx
@@ -166,6 +166,7 @@ export function BaseDateTimeBlock(
     >
       <div className="flex flex-col gap-3 ">
         <DatePicker
+          mode="single"
           selected={dateFact ? selectedDate : undefined}
           onSelect={handleDaySelect}
         />
diff --git a/components/DatePicker.tsx b/components/DatePicker.tsx
index fa401622..e2f65b8a 100644
--- a/components/DatePicker.tsx
+++ b/components/DatePicker.tsx
@@ -1,4 +1,8 @@
-import { ChevronProps, DayPicker as ReactDayPicker } from "react-day-picker";
+import {
+  ChevronProps,
+  DayPicker as ReactDayPicker,
+  DayPickerProps,
+} from "react-day-picker";
 import { ArrowRightTiny } from "components/Icons/ArrowRightTiny";
 
 const CustomChevron = (props: ChevronProps) => {
@@ -9,46 +13,39 @@ const CustomChevron = (props: ChevronProps) => {
   );
 };
 
-interface DayPickerProps {
-  selected: Date | undefined;
-  onSelect: (date: Date | undefined) => void;
-  disabled?: (date: Date) => boolean;
-}
+export const DatePicker = (props: DayPickerProps) => {
+  const dayPickerProps = {
+    ...props,
+    required: props.required ?? false,
+    mode: props.mode ?? "single",
+    components: {
+      Chevron: (chevronProps: ChevronProps) => (
+        <CustomChevron {...chevronProps} />
+      ),
+      ...props.components,
+    },
+    classNames: {
+      months: "relative",
+      month_caption:
+        "font-bold text-center w-full bg-border-light mb-2 py-1 rounded-md",
+      button_next:
+        "absolute right-0 top-1 p-1 text-secondary hover:text-accent-contrast flex align-center",
+      button_previous:
+        "absolute left-0 top-1 p-1 text-secondary hover:text-accent-contrast rotate-180 flex align-center",
+      chevron: "text-inherit",
+      month_grid: "border-separate [border-spacing:2px]",
+      weekdays: "text-secondary text-sm",
+      selected: "bg-accent-1 text-accent-2 rounded-md font-bold",
+      range_middle: "bg-[var(--accent-light)]!",
+      day: "h-8! w-8! text-center rounded-md sm:hover:bg-border-light",
+      outside: "text-tertiary",
+      today: "font-bold",
+      disabled: "text-border cursor-not-allowed hover:bg-transparent!",
+      ...props.classNames,
+    },
+  } as DayPickerProps;
 
-export const DatePicker = ({
-  selected,
-  onSelect,
-  disabled,
-}: DayPickerProps) => {
-  return (
-    <ReactDayPicker
-      components={{
-        Chevron: (props: ChevronProps) => <CustomChevron {...props} />,
-      }}
-      classNames={{
-        months: "relative",
-        month_caption:
-          "font-bold text-center w-full bg-border-light mb-2 py-1 rounded-md",
-        button_next:
-          "absolute right-0 top-1 p-1 text-secondary hover:text-accent-contrast flex align-center",
-        button_previous:
-          "absolute left-0 top-1 p-1 text-secondary hover:text-accent-contrast rotate-180 flex align-center",
-        chevron: "text-inherit",
-        month_grid: "w-full table-fixed",
-        weekdays: "text-secondary text-sm",
-        selected: "bg-accent-1! text-accent-2 rounded-md font-bold",
-        day: "h-[34px] text-center rounded-md sm:hover:bg-border-light",
-        outside: "text-tertiary",
-        today: "font-bold",
-        disabled: "text-border cursor-not-allowed hover:bg-transparent!",
-      }}
-      mode="single"
-      selected={selected}
-      defaultMonth={selected}
-      onSelect={onSelect}
-      disabled={disabled}
-    />
-  );
+  return <ReactDayPicker {...dayPickerProps} />;
 };
 
 export const TimePicker = (props: {
diff --git a/components/Pages/Backdater.tsx b/components/Pages/Backdater.tsx
index 261f153d..3ca37bbe 100644
--- a/components/Pages/Backdater.tsx
+++ b/components/Pages/Backdater.tsx
@@ -61,7 +61,7 @@ export const Backdater = (props: { publishedAt: string; docURI: string }) => {
 
   return (
     <Popover
-      className="w-64 z-10 px-2!"
+      className="w-fit z-10 px-2!"
       trigger={
         <div className="underline">
           {timeAgo(localPublishedAt.toISOString())}