diff --git a/app/(home-pages)/home/Actions/AccountSettings.tsx b/app/(home-pages)/home/Actions/AccountSettings.tsx
index 67df4f37..b1ef31bc 100644
--- a/app/(home-pages)/home/Actions/AccountSettings.tsx
+++ b/app/(home-pages)/home/Actions/AccountSettings.tsx
@@ -11,9 +11,14 @@ import { GoBackSmall } from "components/Icons/GoBackSmall";
 import { useState } from "react";
 import { ThemeSetterContent } from "components/ThemeManager/ThemeSetter";
 import { useIsMobile } from "src/hooks/isMobile";
+import { ManageProSubscription } from "app/lish/[did]/[publication]/dashboard/settings/ManageProSubscription";
+import { Modal } from "components/Modal";
+import { UpgradeContent } from "app/lish/[did]/[publication]/UpgradeModal";
 
 export const AccountSettings = (props: { entityID: string }) => {
-  let [state, setState] = useState<"menu" | "general" | "theme">("menu");
+  let [state, setState] = useState<
+    "menu" | "general" | "theme" | "manage-subscription"
+  >("menu");
   let isMobile = useIsMobile();
 
   return (
@@ -32,6 +37,8 @@ export const AccountSettings = (props: { entityID: string }) => {
           entityID={props.entityID}
           backToMenu={() => setState("menu")}
         />
+      ) : state === "manage-subscription" ? (
+        <ManageProSubscription backToMenu={() => setState("menu")} />
       ) : (
         <SettingsMenu state={state} setState={setState} />
       )}
@@ -40,12 +47,14 @@ export const AccountSettings = (props: { entityID: string }) => {
 };
 
 const SettingsMenu = (props: {
-  state: "menu" | "general" | "theme";
+  state: "menu" | "general" | "theme" | "manage-subscription";
   setState: (s: typeof props.state) => void;
 }) => {
   let menuItemClassName =
     "menuItem -mx-[8px] text-left flex items-center justify-between hover:no-underline!";
 
+  let isPro = true;
+
   return (
     <div className="flex flex-col gap-0.5">
       <AccountSettingsHeader state={"menu"} />
@@ -67,6 +76,28 @@ const SettingsMenu = (props: {
         Account Theme
         <ArrowRightTiny />
       </button>
+      {!isPro ? (
+        <Modal
+          trigger={
+            <div
+              className={`${menuItemClassName} bg-[var(--accent-light)]! border border-transparent hover:border-accent-contrast`}
+            >
+              Get Leaflet Pro
+              <ArrowRightTiny />{" "}
+            </div>
+          }
+        >
+          <UpgradeContent />
+        </Modal>
+      ) : (
+        <button
+          className={`${menuItemClassName} bg-[var(--accent-light)]! border border-transparent hover:border-accent-contrast`}
+          type="button"
+          onClick={() => props.setState("manage-subscription")}
+        >
+          Manage Pro Subscription <ArrowRightTiny />{" "}
+        </button>
+      )}
     </div>
   );
 };
diff --git a/app/lish/[did]/[publication]/dashboard/Actions.tsx b/app/lish/[did]/[publication]/dashboard/Actions.tsx
index 6c257252..40787905 100644
--- a/app/lish/[did]/[publication]/dashboard/Actions.tsx
+++ b/app/lish/[did]/[publication]/dashboard/Actions.tsx
@@ -22,7 +22,6 @@ export const Actions = (props: { publication: string }) => {
 
       <PublicationShareButton />
       <PublicationSettingsButton publication={props.publication} />
-      <DesktopUpgrade />
     </>
   );
 };
@@ -98,26 +97,3 @@ const MobileUpgrade = () => {
     />
   );
 };
-
-const DesktopUpgrade = () => {
-  return (
-    <div
-      style={{ backgroundColor: "var(--accent-light)" }}
-      className=" rounded-md mt-2 pt-2 pb-3 px-3 sm:block hidden"
-    >
-      <h4 className="text-accent-contrast text-sm">Get Leaflet Pro</h4>
-      <div className="text-xs text-secondary mb-2">
-        <strong>Analytics!</strong> Emails and membership soon.
-      </div>
-      <UpgradeModal
-        asChild
-        trigger={
-          <ButtonSecondary fullWidth compact className="text-sm!">
-            Learn more
-          </ButtonSecondary>
-        }
-      />
-      <ButtonTertiary className="mx-auto text-sm">Dismiss</ButtonTertiary>
-    </div>
-  );
-};
diff --git a/app/lish/[did]/[publication]/dashboard/PublicationAnalytics.tsx b/app/lish/[did]/[publication]/dashboard/PublicationAnalytics.tsx
index f856fd09..cd8ab76b 100644
--- a/app/lish/[did]/[publication]/dashboard/PublicationAnalytics.tsx
+++ b/app/lish/[did]/[publication]/dashboard/PublicationAnalytics.tsx
@@ -11,7 +11,6 @@ import {
   ComboboxResult,
   useComboboxState,
 } from "components/Combobox";
-import { Input } from "components/Input";
 
 type referrorType = { iconSrc: string; name: string; viewCount: string };
 let refferors = [
@@ -104,7 +103,7 @@ const PostSelector = (props: {
       posts.filter((post) =>
         post.toLowerCase().includes(searchValue.toLowerCase()),
       ),
-    [searchValue],
+    [searchValue, posts],
   );
 
   let filteredPostsWithClear = ["All Posts", ...(filteredPosts || [])];
@@ -132,6 +131,7 @@ const PostSelector = (props: {
           return (
             <>
               <ComboboxResult
+                key="all posts"
                 result={post}
                 onSelect={() => {
                   props.setSelectedPost(undefined);
@@ -147,18 +147,17 @@ const PostSelector = (props: {
             </>
           );
         return (
-          <>
-            <ComboboxResult
-              result={post}
-              onSelect={() => {
-                props.setSelectedPost(post);
-              }}
-              highlighted={highlighted}
-              setHighlighted={setHighlighted}
-            >
-              {post}
-            </ComboboxResult>
-          </>
+          <ComboboxResult
+            key={post}
+            result={post}
+            onSelect={() => {
+              props.setSelectedPost(post);
+            }}
+            highlighted={highlighted}
+            setHighlighted={setHighlighted}
+          >
+            {post}
+          </ComboboxResult>
         );
       })}
     </Combobox>
@@ -261,6 +260,7 @@ const TopReferrors = (props: {
         return (
           <>
             <button
+              key={ref.name}
               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);
diff --git a/app/lish/[did]/[publication]/dashboard/settings/ManageProSubscription.tsx b/app/lish/[did]/[publication]/dashboard/settings/ManageProSubscription.tsx
new file mode 100644
index 00000000..4163b409
--- /dev/null
+++ b/app/lish/[did]/[publication]/dashboard/settings/ManageProSubscription.tsx
@@ -0,0 +1,51 @@
+import { useState } from "react";
+import { ButtonPrimary } from "components/Buttons";
+import { PubSettingsHeader } from "./PublicationSettings";
+
+export const ManageProSubscription = (props: { backToMenu: () => void }) => {
+  const [state, setState] = useState<"manage" | "confirm" | "success">(
+    "manage",
+  );
+
+  return (
+    <div>
+      <PubSettingsHeader backToMenuAction={props.backToMenu}>
+        Manage Subscription
+      </PubSettingsHeader>
+      <div className="text-secondary text-center flex flex-col justify-center gap-2 py-2">
+        {state === "manage" && (
+          <>
+            <div>
+              You have a <br />
+              Pro monthly subscription
+              <div className="text-lg font-bold text-primary">$12/mo </div>
+              Renews on the 12th
+            </div>
+            <ButtonPrimary
+              className="mx-auto"
+              compact
+              onClick={() => setState("confirm")}
+            >
+              Cancel Subscription
+            </ButtonPrimary>
+          </>
+        )}
+        {state === "confirm" && (
+          <>
+            <div>Are you sure you'd like to cancel your subscription?</div>
+            <ButtonPrimary
+              className="mx-auto"
+              compact
+              onClick={() => setState("success")}
+            >
+              Yes, Cancel it
+            </ButtonPrimary>
+          </>
+        )}
+        {state === "success" && (
+          <div>Your subscription has been successfully cancelled!</div>
+        )}
+      </div>
+    </div>
+  );
+};
diff --git a/app/lish/[did]/[publication]/dashboard/settings/PostOptions.tsx b/app/lish/[did]/[publication]/dashboard/settings/PostOptions.tsx
index 076568ef..d8568397 100644
--- a/app/lish/[did]/[publication]/dashboard/settings/PostOptions.tsx
+++ b/app/lish/[did]/[publication]/dashboard/settings/PostOptions.tsx
@@ -65,7 +65,6 @@ export const PostOptions = (props: {
         loading={props.loading}
         setLoadingAction={props.setLoading}
         backToMenuAction={props.backToMenu}
-        state={"post-options"}
       >
         Post Options
       </PubSettingsHeader>
diff --git a/app/lish/[did]/[publication]/dashboard/settings/PublicationSettings.tsx b/app/lish/[did]/[publication]/dashboard/settings/PublicationSettings.tsx
index 0b85e548..a5ae0b81 100644
--- a/app/lish/[did]/[publication]/dashboard/settings/PublicationSettings.tsx
+++ b/app/lish/[did]/[publication]/dashboard/settings/PublicationSettings.tsx
@@ -13,8 +13,16 @@ import { ButtonPrimary } from "components/Buttons";
 import { DotLoader } from "components/utils/DotLoader";
 import { ArrowRightTiny } from "components/Icons/ArrowRightTiny";
 import { PostOptions } from "./PostOptions";
+import { UpgradeContent } from "../../UpgradeModal";
+import { Modal } from "components/Modal";
+import { ManageProSubscription } from "./ManageProSubscription";
 
-type menuState = "menu" | "general" | "theme" | "post-options";
+type menuState =
+  | "menu"
+  | "pub-settings"
+  | "theme"
+  | "post-settings"
+  | "manage-subscription";
 
 export function PublicationSettingsButton(props: { publication: string }) {
   let isMobile = useIsMobile();
@@ -37,7 +45,7 @@ export function PublicationSettingsButton(props: { publication: string }) {
         />
       }
     >
-      {state === "general" ? (
+      {state === "pub-settings" ? (
         <EditPubForm
           backToMenuAction={() => setState("menu")}
           loading={loading}
@@ -49,12 +57,14 @@ export function PublicationSettingsButton(props: { publication: string }) {
           loading={loading}
           setLoading={setLoading}
         />
-      ) : state === "post-options" ? (
+      ) : state === "post-settings" ? (
         <PostOptions
           backToMenu={() => setState("menu")}
           loading={loading}
           setLoading={setLoading}
         />
+      ) : state === "manage-subscription" ? (
+        <ManageProSubscription backToMenu={() => setState("menu")} />
       ) : (
         <PubSettingsMenu
           state={state}
@@ -75,57 +85,73 @@ const PubSettingsMenu = (props: {
 }) => {
   let menuItemClassName =
     "menuItem -mx-[8px] text-left flex items-center justify-between hover:no-underline!";
+  let isPro = true;
 
   return (
     <div className="flex flex-col gap-0.5">
-      <PubSettingsHeader
-        loading={props.loading}
-        setLoadingAction={props.setLoading}
-        state={"menu"}
-      >
-        Settings
-      </PubSettingsHeader>
+      <PubSettingsHeader>Settings</PubSettingsHeader>
       <button
         className={menuItemClassName}
         type="button"
         onClick={() => {
-          props.setState("general");
+          props.setState("pub-settings");
         }}
       >
-        General Settings
+        Publiction Settings
         <ArrowRightTiny />
       </button>
       <button
         className={menuItemClassName}
         type="button"
-        onClick={() => props.setState("theme")}
+        onClick={() => props.setState("post-settings")}
       >
-        Theme and Layout
+        Post Settings
         <ArrowRightTiny />
       </button>
       <button
         className={menuItemClassName}
         type="button"
-        onClick={() => props.setState("post-options")}
+        onClick={() => props.setState("theme")}
       >
-        Post Options
+        Theme and Layout
         <ArrowRightTiny />
       </button>
+      {!isPro ? (
+        <Modal
+          trigger={
+            <div
+              className={`${menuItemClassName} bg-[var(--accent-light)]! border border-transparent hover:border-accent-contrast`}
+            >
+              Get Leaflet Pro
+              <ArrowRightTiny />{" "}
+            </div>
+          }
+        >
+          <UpgradeContent />
+        </Modal>
+      ) : (
+        <button
+          className={`${menuItemClassName} bg-[var(--accent-light)]! border border-transparent hover:border-accent-contrast`}
+          type="button"
+          onClick={() => props.setState("manage-subscription")}
+        >
+          Manage Pro Subscription <ArrowRightTiny />{" "}
+        </button>
+      )}
     </div>
   );
 };
 
 export const PubSettingsHeader = (props: {
-  state: menuState;
   backToMenuAction?: () => void;
-  loading: boolean;
-  setLoadingAction: (l: boolean) => void;
+  loading?: boolean;
+  setLoadingAction?: (l: boolean) => void;
   children: React.ReactNode;
 }) => {
   return (
     <div className="flex justify-between font-bold text-secondary bg-border-light -mx-3 -mt-2 px-3 py-2 mb-1">
       {props.children}
-      {props.state !== "menu" && (
+      {props.backToMenuAction && (
         <div className="flex gap-2">
           <button
             type="button"
@@ -135,10 +161,11 @@ export const PubSettingsHeader = (props: {
           >
             <GoBackSmall className="text-accent-contrast" />
           </button>
-
-          <ButtonPrimary compact type="submit">
-            {props.loading ? <DotLoader /> : "Update"}
-          </ButtonPrimary>
+          {props.setLoadingAction && (
+            <ButtonPrimary compact type="submit">
+              {props.loading ? <DotLoader /> : "Update"}
+            </ButtonPrimary>
+          )}
         </div>
       )}
     </div>