diff --git a/app/(home-pages)/p/[didOrHandle]/ProfileHeader.tsx b/app/(home-pages)/p/[didOrHandle]/ProfileHeader.tsx
index 3fb2b0fd..2cf55f2e 100644
--- a/app/(home-pages)/p/[didOrHandle]/ProfileHeader.tsx
+++ b/app/(home-pages)/p/[didOrHandle]/ProfileHeader.tsx
@@ -42,7 +42,6 @@ export const ProfileHeader = (props: {
       @{props.profile.handle}
     </div>
   );
-  console.log(props.profile);
 
   return (
     <div
diff --git a/app/[leaflet_id]/publish/BskyPostEditorProsemirror.tsx b/app/[leaflet_id]/publish/BskyPostEditorProsemirror.tsx
index 02985291..8e029198 100644
--- a/app/[leaflet_id]/publish/BskyPostEditorProsemirror.tsx
+++ b/app/[leaflet_id]/publish/BskyPostEditorProsemirror.tsx
@@ -410,7 +410,6 @@ export const addMentionToEditor = (
   range: { from: number; to: number },
   view: EditorView,
 ) => {
-  console.log("view", view);
   if (!view) return;
   const { from, to } = range;
   const tr = view.state.tr;
@@ -437,7 +436,6 @@ export const addMentionToEditor = (
     });
     tr.insert(from, atMentionNode);
   }
-  console.log("yo", mention);
 
   // Add a space after the mention
   tr.insertText(" ", from + 1);
diff --git a/app/lish/[did]/[publication]/[rkey]/ThreadPage.tsx b/app/lish/[did]/[publication]/[rkey]/ThreadPage.tsx
index e8951d4f..180987bb 100644
--- a/app/lish/[did]/[publication]/[rkey]/ThreadPage.tsx
+++ b/app/lish/[did]/[publication]/[rkey]/ThreadPage.tsx
@@ -298,7 +298,6 @@ const ReplyPost = (props: {
               e.stopPropagation();
 
               props.toggleCollapsed(parentPostUri);
-              console.log("reply clicked");
             }}
           />
         </>
diff --git a/app/lish/[did]/[publication]/dashboard/PublicationAnalytics.tsx b/app/lish/[did]/[publication]/dashboard/PublicationAnalytics.tsx
index d76e7940..fb2b6cb7 100644
--- a/app/lish/[did]/[publication]/dashboard/PublicationAnalytics.tsx
+++ b/app/lish/[did]/[publication]/dashboard/PublicationAnalytics.tsx
@@ -2,16 +2,34 @@ 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 { useMemo, useState } from "react";
 import { useLocalizedDate } from "src/hooks/useLocalizedDate";
 import type { DateRange } from "react-day-picker";
 import { usePublicationData } from "./PublicationSWRProvider";
+import {
+  Combobox,
+  ComboboxResult,
+  useComboboxState,
+} from "components/Combobox";
+import { Input } from "components/Input";
+
+type referrorType = { iconSrc: string; name: string; viewCount: string };
+let refferors = [
+  { iconSrc: "", name: "Bluesky", viewCount: "12k" },
+  { iconSrc: "", name: "Reddit", viewCount: "1.2k" },
+  { iconSrc: "", name: "X", viewCount: "583" },
+  { iconSrc: "", name: "Google", viewCount: "12" },
+];
 
 export const PublicationAnalytics = () => {
   let isPro = true;
 
   let { data: publication } = usePublicationData();
   let [dateRange, setDateRange] = useState<DateRange>({ from: undefined });
+  let [selectedPost, setSelectedPost] = useState<string | undefined>(undefined);
+  let [selectedReferror, setSelectedReferror] = useState<
+    referrorType | undefined
+  >(undefined);
 
   if (!isPro)
     return (
@@ -21,12 +39,33 @@ export const PublicationAnalytics = () => {
     );
 
   return (
-    <div className="analytics">
+    <div className="analytics flex flex-col gap-6">
+      <div className="analyticsSubCount">
+        <div className="flex gap-2 justify-between items-center">
+          <h3>Subscribers</h3>
+          <DateRangeSelector
+            dateRange={dateRange}
+            setDateRange={setDateRange}
+            pubStartDate={publication?.publication?.indexed_at}
+          />
+        </div>
+        <div className="aspect-video w-full border border-border grow" />
+      </div>
       <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 />
+            <ArrowRightTiny />
+            <PostSelector
+              selectedPost={selectedPost}
+              setSelectedPost={setSelectedPost}
+            />
+            {selectedReferror && (
+              <>
+                <ArrowRightTiny />
+                {selectedReferror.name}
+              </>
+            )}
           </div>
           <DateRangeSelector
             dateRange={dateRange}
@@ -34,17 +73,103 @@ export const PublicationAnalytics = () => {
             pubStartDate={publication?.publication?.indexed_at}
           />
         </div>
-        <div className="aspect-video w-full border border-border" />
+        <div className="flex gap-2">
+          <div className="aspect-video w-full border border-border grow" />
+          <TopReferrors
+            refferors={refferors}
+            setSelectedReferror={setSelectedReferror}
+            selectedReferror={selectedReferror}
+          />{" "}
+        </div>
       </div>
-
-      {/*<div>subscriber count over time</div>
-        <div>Top Referrers</div>*/}
     </div>
   );
 };
 
-const PostSelector = () => {
-  return <div>Total</div>;
+const PostSelector = (props: {
+  selectedPost: string | undefined;
+  setSelectedPost: (s: string | undefined) => void;
+}) => {
+  let { data } = usePublicationData();
+  let { documents } = data || {};
+
+  let [highlighted, setHighlighted] = useState<string | undefined>(undefined);
+  let [searchValue, setSearchValue] = useState<string>("");
+
+  let open = useComboboxState((s) => s.open);
+  let posts = documents?.map((doc) => doc.record.title);
+  let filteredPosts = useMemo(
+    () =>
+      posts &&
+      posts.filter((post) =>
+        post.toLowerCase().includes(searchValue.toLowerCase()),
+      ),
+    [searchValue],
+  );
+
+  let filteredPostsWithClear = ["All Posts", ...(filteredPosts || [])];
+
+  return (
+    <Combobox
+      trigger={
+        open ? (
+          <Input
+            autoFocus
+            placeholder="search posts…"
+            className="input-with-border py-0! text-primary"
+            value={searchValue}
+            onChange={(e) => setSearchValue(e.target.value)}
+            onClick={(e) => e.stopPropagation()}
+            onPointerDown={(e) => e.stopPropagation()}
+          />
+        ) : (
+          <button className="text-tertiary">
+            {props.selectedPost ?? "All Posts"}
+          </button>
+        )
+      }
+      results={filteredPostsWithClear || []}
+      highlighted={highlighted}
+      setHighlighted={setHighlighted}
+      onSelect={() => {
+        props.setSelectedPost(highlighted);
+      }}
+      sideOffset={2}
+    >
+      {filteredPostsWithClear.map((post) => {
+        if (post === "All Posts")
+          return (
+            <>
+              <ComboboxResult
+                result={post}
+                onSelect={() => {
+                  props.setSelectedPost(undefined);
+                }}
+                highlighted={highlighted}
+                setHighlighted={setHighlighted}
+              >
+                All Posts
+              </ComboboxResult>
+              {filteredPosts && filteredPosts.length !== 0 && (
+                <hr className="mx-1 text-tertiary" />
+              )}
+            </>
+          );
+        return (
+          <ComboboxResult
+            result={post}
+            onSelect={() => {
+              props.setSelectedPost(post);
+            }}
+            highlighted={highlighted}
+            setHighlighted={setHighlighted}
+          >
+            {post}
+          </ComboboxResult>
+        );
+      })}
+    </Combobox>
+  );
 };
 
 const DateRangeSelector = (props: {
@@ -57,9 +182,6 @@ const DateRangeSelector = (props: {
 
   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 ||
@@ -133,3 +255,34 @@ const DateRangeSelector = (props: {
     </Popover>
   );
 };
+
+const TopReferrors = (props: {
+  refferors: referrorType[];
+  setSelectedReferror: (ref: referrorType) => void;
+  selectedReferror: referrorType | undefined;
+}) => {
+  return (
+    <div className="topReferrors flex flex-col gap-0.5 w-full sm:w-xs">
+      {props.refferors.map((ref) => {
+        let selected = ref === props.selectedReferror;
+        return (
+          <>
+            <button
+              className={`w-full flex justify-between gap-4 px-1 items-center text-right rounded-md ${selected ? "text-accent-contrast bg-[var(--accent-light)]" : ""}`}
+              onClick={() => {
+                props.setSelectedReferror(ref);
+              }}
+            >
+              <div className="flex gap-2 items-center grow">
+                <img src={ref.iconSrc} className="h-4 w-4" aria-hidden />
+                {ref.name}
+              </div>
+              {ref.viewCount}
+            </button>
+            <hr className="border-border-light last:hidden" />
+          </>
+        );
+      })}
+    </div>
+  );
+};
diff --git a/app/lish/[did]/[publication]/dashboard/PublicationSWRProvider.tsx b/app/lish/[did]/[publication]/dashboard/PublicationSWRProvider.tsx
index 4ba0fd87..65217a34 100644
--- a/app/lish/[did]/[publication]/dashboard/PublicationSWRProvider.tsx
+++ b/app/lish/[did]/[publication]/dashboard/PublicationSWRProvider.tsx
@@ -12,7 +12,8 @@ import {
 
 // Derive all types from the RPC return type
 export type PublicationData = GetPublicationDataReturnType["result"];
-export type PublishedDocument = NonNullable<PublicationData>["documents"][number];
+export type PublishedDocument =
+  NonNullable<PublicationData>["documents"][number];
 export type PublicationDraft = NonNullable<PublicationData>["drafts"][number];
 
 const PublicationContext = createContext({ name: "", did: "" });
@@ -24,7 +25,6 @@ export function PublicationSWRDataProvider(props: {
 }) {
   let key = `publication-data-${props.publication_did}-${props.publication_rkey}`;
   useEffect(() => {
-    console.log("UPDATING");
     mutate(key, props.publication_data);
   }, [props.publication_data]);
   return (
@@ -64,7 +64,7 @@ export function useNormalizedPublicationRecord(): NormalizedPublication | null {
   const { data } = usePublicationData();
   return useMemo(
     () => normalizePublicationRecord(data?.publication?.record),
-    [data?.publication?.record]
+    [data?.publication?.record],
   );
 }
 
diff --git a/app/lish/[did]/[publication]/dashboard/PublicationSubscribers.tsx b/app/lish/[did]/[publication]/dashboard/PublicationSubscribers.tsx
index ac1b27b2..aede5c80 100644
--- a/app/lish/[did]/[publication]/dashboard/PublicationSubscribers.tsx
+++ b/app/lish/[did]/[publication]/dashboard/PublicationSubscribers.tsx
@@ -175,7 +175,6 @@ const SubscriberListItem = (props: {
     //       );
     //       props.setCheckedSubscribers(newCheckedSubscribers);
     //     }
-    //     console.log(props.checkedSubscribers);
     //   }}
     // >
     <>
diff --git a/appview/index.ts b/appview/index.ts
index 3588b659..8c1b4ef0 100644
--- a/appview/index.ts
+++ b/appview/index.ts
@@ -374,7 +374,6 @@ async function handleEvent(evt: Event) {
       embedRecord.embed?.media?.external?.uri?.includes(QUOTE_PARAM);
 
     if (!hasQuoteParam) return;
-    console.log("FOUND EMBED!!!");
 
     // Now validate the record since we know it contains our quote param
     let record = AppBskyFeedPost.validateRecord(evt.record);
diff --git a/components/Blocks/BlockCommandBar.tsx b/components/Blocks/BlockCommandBar.tsx
index 3381de97..b9c4b0b6 100644
--- a/components/Blocks/BlockCommandBar.tsx
+++ b/components/Blocks/BlockCommandBar.tsx
@@ -1,12 +1,10 @@
-import { useEffect, useRef, useState } from "react";
-import * as Popover from "@radix-ui/react-popover";
+import { useState } from "react";
 import { blockCommands } from "./BlockCommands";
 import { useReplicache } from "src/replicache";
 import { useEntitySetContext } from "components/EntitySetProvider";
-import { NestedCardThemeProvider } from "components/ThemeManager/ThemeProvider";
-import { UndoManager } from "src/undoManager";
 import { useLeafletPublicationData } from "components/PageSWRDataProvider";
 import { setEditorState, useEditorStates } from "src/state/useEditorState";
+import { Combobox, ComboboxResult } from "components/Combobox";
 
 type Props = {
   parent: string;
@@ -25,8 +23,6 @@ export const BlockCommandBar = ({
   props: Props;
   searchValue: string;
 }) => {
-  let ref = useRef<HTMLDivElement>(null);
-
   let [highlighted, setHighlighted] = useState<string | undefined>(undefined);
 
   let { rep, undoManager } = useReplicache();
@@ -51,173 +47,67 @@ export const BlockCommandBar = ({
     const matchesName = command.name
       .toLocaleLowerCase()
       .includes(lowerSearchValue);
-    const matchesAlternate = command.alternateNames?.some((altName) =>
-      altName.toLocaleLowerCase().includes(lowerSearchValue)
-    ) ?? false;
+    const matchesAlternate =
+      command.alternateNames?.some((altName) =>
+        altName.toLocaleLowerCase().includes(lowerSearchValue),
+      ) ?? false;
     const matchesSearch = matchesName || matchesAlternate;
     const isVisible = !pub || !command.hiddenInPublication;
     return matchesSearch && isVisible;
   });
 
-  useEffect(() => {
-    if (
-      !highlighted ||
-      !commandResults.find((result) => result.name === highlighted)
-    )
-      setHighlighted(commandResults[0]?.name);
-    if (commandResults.length === 1) {
-      setHighlighted(commandResults[0].name);
-    }
-  }, [commandResults, setHighlighted, highlighted]);
-
-  useEffect(() => {
-    let listener = async (e: KeyboardEvent) => {
-      let reverseDir = ref.current?.dataset.side === "top";
-      let currentHighlightIndex = commandResults.findIndex(
-        (command: { name: string }) =>
-          highlighted && command.name === highlighted,
-      );
-
-      if (reverseDir ? e.key === "ArrowUp" : e.key === "ArrowDown") {
-        setHighlighted(
-          commandResults[
-            currentHighlightIndex === commandResults.length - 1 ||
-            currentHighlightIndex === undefined
-              ? 0
-              : currentHighlightIndex + 1
-          ].name,
-        );
-        return;
-      }
-      if (reverseDir ? e.key === "ArrowDown" : e.key === "ArrowUp") {
-        setHighlighted(
-          commandResults[
-            currentHighlightIndex === 0 ||
-            currentHighlightIndex === undefined ||
-            currentHighlightIndex === -1
-              ? commandResults.length - 1
-              : currentHighlightIndex - 1
-          ].name,
-        );
-        return;
-      }
-
-      // on enter, select the highlighted item
-      if (e.key === "Enter") {
+  return (
+    <Combobox
+      triggerClassName="absolute left-0"
+      results={commandResults.map((r) => r.name)}
+      highlighted={highlighted}
+      setHighlighted={setHighlighted}
+      onSelect={async () => {
+        let command = commandResults.find((c) => c.name === highlighted);
+        if (!command || !rep) return;
         undoManager.startGroup();
-        e.preventDefault();
-        rep &&
-          (await commandResults[currentHighlightIndex]?.onSelect(
-            rep,
-            {
-              ...props,
-              entity_set: entity_set.set,
-            },
-            undoManager,
-          ));
+        await command.onSelect(
+          rep,
+          { ...props, entity_set: entity_set.set },
+          undoManager,
+        );
         undoManager.endGroup();
-        return;
-      }
-    };
-
-    window.addEventListener("keydown", listener);
-
-    return () => window.removeEventListener("keydown", listener);
-  }, [highlighted, setHighlighted, commandResults, rep, entity_set.set, props]);
-
-  return (
-    <Popover.Root
-      open
-      onOpenChange={(open) => {
-        if (!open) {
-          clearCommandSearchText();
-        }
       }}
+      onOpenChange={() => clearCommandSearchText()}
     >
-      <Popover.Trigger className="absolute left-0"></Popover.Trigger>
-      <Popover.Portal>
-        <Popover.Content
-          align="start"
-          sideOffset={16}
-          collisionPadding={16}
-          ref={ref}
-          onOpenAutoFocus={(e) => e.preventDefault()}
-          className={`
-            commandMenuContent group/cmd-menu
-            z-20 w-[264px]
-            flex data-[side=top]:items-end items-start
-            `}
-        >
-          <NestedCardThemeProvider>
-            <div className="commandMenuResults w-full max-h-(--radix-popover-content-available-height) overflow-auto flex flex-col group-data-[side=top]/cmd-menu:flex-col-reverse bg-bg-page py-1 gap-0.5 border border-border rounded-md shadow-md">
-              {commandResults.length === 0 ? (
-                <div className="w-full text-tertiary text-center italic py-2 px-2 ">
-                  No blocks found
-                </div>
-              ) : (
-                commandResults.map((result, index) => (
-                  <div key={index} className="contents">
-                    <CommandResult
-                      name={result.name}
-                      icon={result.icon}
-                      onSelect={() => {
-                        rep &&
-                          result.onSelect(
-                            rep,
-                            {
-                              ...props,
-                              entity_set: entity_set.set,
-                            },
-                            undoManager,
-                          );
-                      }}
-                      highlighted={highlighted}
-                      setHighlighted={(highlighted) =>
-                        setHighlighted(highlighted)
-                      }
-                    />
-                    {commandResults[index + 1] &&
-                      result.type !== commandResults[index + 1].type && (
-                        <hr className="mx-2 my-0.5 border-border" />
-                      )}
-                  </div>
-                ))
+      {commandResults.length === 0 ? (
+        <div className="w-full text-tertiary text-center italic py-2 px-2 ">
+          No blocks found
+        </div>
+      ) : (
+        commandResults.map((result, index) => (
+          <div key={index} className="contents">
+            <ComboboxResult
+              className="pl-1!"
+              result={result.name}
+              onSelect={() => {
+                rep &&
+                  result.onSelect(
+                    rep,
+                    { ...props, entity_set: entity_set.set },
+                    undoManager,
+                  );
+              }}
+              highlighted={highlighted}
+              setHighlighted={setHighlighted}
+            >
+              <div className="text-tertiary w-8 shrink-0 flex justify-center">
+                {result.icon}
+              </div>
+              {result.name}
+            </ComboboxResult>
+            {commandResults[index + 1] &&
+              result.type !== commandResults[index + 1].type && (
+                <hr className="mx-2 my-0.5 border-border" />
               )}
-            </div>
-          </NestedCardThemeProvider>
-        </Popover.Content>
-      </Popover.Portal>
-    </Popover.Root>
-  );
-};
-
-const CommandResult = (props: {
-  name: string;
-  icon: React.ReactNode;
-  onSelect: () => void;
-  highlighted: string | undefined;
-  setHighlighted: (state: string | undefined) => void;
-}) => {
-  let isHighlighted = props.highlighted === props.name;
-
-  return (
-    <button
-      className={`commandResult menuItem text-secondary font-normal! py-0.5! mx-1 pl-0! ${isHighlighted && "bg-[var(--accent-light)]!"}`}
-      onMouseOver={() => {
-        props.setHighlighted(props.name);
-      }}
-      onMouseDown={(e) => {
-        e.preventDefault();
-        props.onSelect();
-      }}
-    >
-      <div className="text-tertiary w-8 shrink-0 flex justify-center">
-        {props.icon}
-      </div>
-      {props.name}
-    </button>
+          </div>
+        ))
+      )}
+    </Combobox>
   );
 };
-function usePublicationContext() {
-  throw new Error("Function not implemented.");
-}
diff --git a/components/Tags.tsx b/components/Tags.tsx
index d2266e9a..a5af994b 100644
--- a/components/Tags.tsx
+++ b/components/Tags.tsx
@@ -109,7 +109,6 @@ export const TagSearchInput = (props: {
   }
 
   function selectTag(tag: string) {
-    console.log("selected " + tag);
     props.setSelectedTags([...props.selectedTags, tag]);
     clearTagInput();
   }