diff --git a/app/(app)/lish/[did]/[publication]/PublicationPostItem.tsx b/app/(app)/lish/[did]/[publication]/PublicationPostItem.tsx
index 856adc73..3da3aaff 100644
--- a/app/(app)/lish/[did]/[publication]/PublicationPostItem.tsx
+++ b/app/(app)/lish/[did]/[publication]/PublicationPostItem.tsx
@@ -66,14 +66,16 @@ function PostLink({
     return (
       <SpeedyLink
         href={href}
-        className="publishedPost no-underline! flex flex-col"
+        className="publishedPost no-underline! flex flex-col grow"
       >
         {children}
       </SpeedyLink>
     );
   }
   return (
-    <div className="publishedPost no-underline! flex flex-col">{children}</div>
+    <div className="publishedPost no-underline! flex flex-col grow">
+      {children}
+    </div>
   );
 }
 
@@ -98,38 +100,38 @@ export function PublicationPostItemSmall(props: CommonProps) {
 export function PublicationPostItemMedium(props: MediumProps) {
   const hasCoverImage = !!props.coverImageSrc;
   return (
-    <div className="flex w-full flex-col">
-      <div className="flex w-full gap-3 items-stretch sm:min-h-36">
-        <div className="flex w-full gap-2 grow flex-col justify-between min-w-0  pl-3 pr-3 py-2">
-          <PostLink href={props.href}>
-            {props.title && (
-              <h3 className="text-primary line-clamp-2">{props.title}</h3>
-            )}
-            <p className="text-secondary line-clamp-3">{props.description}</p>
-          </PostLink>
-          <MetaRow
-            author={props.author}
-            date={props.date}
-            interactions={props.interactions}
-            textClassName="text-sm place-self-end"
-          />
+    <div className="flex w-full items-stretch sm:min-h-36">
+      <div className="flex w-full grow flex-col justify-between min-w-0  pl-3 pr-3 py-2">
+        <PostLink href={props.href}>
+          {props.title && (
+            <h3 className="text-primary line-clamp-2">{props.title}</h3>
+          )}
+          <p className="text-secondary line-clamp-3 grow mb-2">
+            {props.description}
+          </p>
+        </PostLink>
+        <MetaRow
+          author={props.author}
+          date={props.date}
+          interactions={props.interactions}
+          textClassName="text-sm place-self-end"
+        />
+        <div className="shrink-0">
+          <hr className=" border-border-light mt-2 mb-1" />
+          {props.footer}
         </div>
-        {hasCoverImage && (
-          <div
-            className={`self-start shrink-0 w-16  border-l border-border-light ${props.footer ? "w-[182px]" : "sm:w-36"}`}
-          >
-            <img
-              src={props.coverImageSrc}
-              alt={props.coverImageAlt || props.title || ""}
-              className="w-full aspect-square object-cover rounded"
-            />
-          </div>
-        )}
-      </div>
-      <div className="shrink-0 px-3 pb-2">
-        <hr className=" border-border-light mt-2 mb-1" />
-        {props.footer}
       </div>
+      {hasCoverImage && (
+        <div
+          className={`self-start shrink-0 w-16  border-l border-border-light ${props.footer ? "w-[182px]" : "sm:w-36"}`}
+        >
+          <img
+            src={props.coverImageSrc}
+            alt={props.coverImageAlt || props.title || ""}
+            className="w-full aspect-square object-cover rounded"
+          />
+        </div>
+      )}
     </div>
   );
 }
@@ -163,7 +165,7 @@ export function PublicationPostItemLarge(props: LargeProps) {
           textClassName={`${widePage ? "text-sm sm:text-base " : "text-sm "} `}
         />
       </div>
-      <div className="shrink-0 flex flex-col shrink-0">
+      <div className="shrink-0 flex flex-col ">
         <hr className=" border-border-light mt-2 mb-1" />
         {props.footer}
       </div>
@@ -176,13 +178,11 @@ export function PublicationPostItemLarge(props: LargeProps) {
         className={`flex flex-col items-stretch ${widePage ? "sm:flex-row sm:gap-2 gap-0" : ""} w-full  items-start`}
       >
         {hasCoverImage && (
-          <div className="w-fit">
-            <img
-              src={props.coverImageSrc}
-              alt={props.coverImageAlt || props.title || ""}
-              className={`${widePage ? "h-[244px]" : "h-full"} aspect-[1.91/1] object-cover rounded`}
-            />
-          </div>
+          <img
+            src={props.coverImageSrc}
+            alt={props.coverImageAlt || props.title || ""}
+            className={`${widePage ? "sm:h-[244px] aspect-[3/2]" : "h-full aspect-[1.91/1]"}  object-cover rounded`}
+          />
         )}
         {body}
       </div>
diff --git a/app/(app)/lish/[did]/[publication]/[rkey]/PostContent.tsx b/app/(app)/lish/[did]/[publication]/[rkey]/PostContent.tsx
index 3c056487..2c775a17 100644
--- a/app/(app)/lish/[did]/[publication]/[rkey]/PostContent.tsx
+++ b/app/(app)/lish/[did]/[publication]/[rkey]/PostContent.tsx
@@ -35,7 +35,10 @@ import { StaticMathBlock } from "./Blocks/StaticMathBlock";
 import { PubCodeBlock } from "./Blocks/PubCodeBlock";
 import { AppBskyFeedDefs } from "@atproto/api";
 import { PubBlueskyPostBlock } from "./Blocks/PublishBskyPostBlock";
-import { StandardSitePostItemView } from "components/Blocks/StandardSitePostBlock/StandardSitePostItem";
+import {
+  StandardSitePostItemView,
+  WithStandardSitePostPublicationTheme,
+} from "components/Blocks/StandardSitePostBlock/StandardSitePostItem";
 import type { StandardSitePostData } from "app/api/rpc/[command]/get_standard_site_posts";
 import { PublishedPageLinkBlock } from "./Blocks/PublishedPageBlock";
 import { PublishedPollBlock } from "./Blocks/PublishedPollBlock";
@@ -251,12 +254,16 @@ export let Block = ({
             : "small";
       return (
         <div className={className} {...blockProps}>
-          <StandardSitePostItemView
+          <WithStandardSitePostPublicationTheme
             post={post}
-            size={size}
-            showPubTheme={b.block.showPublicationTheme !== false}
-            currentPublicationUri={currentPublicationUri}
-          />
+            enabled={b.block.showPublicationTheme !== false}
+          >
+            <StandardSitePostItemView
+              post={post}
+              size={size}
+              currentPublicationUri={currentPublicationUri}
+            />
+          </WithStandardSitePostPublicationTheme>
         </div>
       );
     }
diff --git a/components/ActionBar/DesktopNavigation.tsx b/components/ActionBar/DesktopNavigation.tsx
index c0a0a437..d64484e3 100644
--- a/components/ActionBar/DesktopNavigation.tsx
+++ b/components/ActionBar/DesktopNavigation.tsx
@@ -122,6 +122,9 @@ export const NavigationContent = (props: NavigationProps) => {
               asChild
               trigger={
                 <ActionButton
+                  onClick={() => {
+                    console.log("hello");
+                  }}
                   className="w-full! grow"
                   secondary
                   icon={<AccountSmall />}
diff --git a/components/Blocks/Block.tsx b/components/Blocks/Block.tsx
index 093603e3..4244ec7b 100644
--- a/components/Blocks/Block.tsx
+++ b/components/Blocks/Block.tsx
@@ -423,15 +423,15 @@ export const BlockLayout = (props: {
         className={`nonTextBlock ${props.className} p-2 sm:p-3 overflow-hidden
         ${props.hasAlignment ? "w-fit" : "w-full"}
          ${props.isSelected ? "block-border-selected " : "block-border"}
-         ${props.borderOnHover && "hover:border-accent-contrast! hover:outline-accent-contrast! focus-within:border-accent-contrast! focus-within:outline-accent-contrast!"}`}
-        style={{
-          backgroundColor:
-            props.hasBackground === "accent"
-              ? "var(--accent-light)"
-              : props.hasBackground === "page"
-                ? "rgb(var(--bg-page))"
-                : "transparent",
-        }}
+         ${props.borderOnHover && "hover:border-accent-contrast! hover:outline-accent-contrast! focus-within:border-accent-contrast! focus-within:outline-accent-contrast!"}
+        ${
+          props.hasBackground === "accent"
+            ? "bg-[var(--accent-light)]"
+            : props.hasBackground === "page"
+              ? "bg-page"
+              : "transparent"
+        }
+        `}
       >
         {props.children}
       </div>
diff --git a/components/Blocks/StandardSitePostBlock/StandardSitePostItem.tsx b/components/Blocks/StandardSitePostBlock/StandardSitePostItem.tsx
index ce7225b3..a692a088 100644
--- a/components/Blocks/StandardSitePostBlock/StandardSitePostItem.tsx
+++ b/components/Blocks/StandardSitePostBlock/StandardSitePostItem.tsx
@@ -25,12 +25,10 @@ export type StandardSitePostSize = "large" | "medium" | "small";
 export function StandardSitePostItem({
   uri,
   size = "medium",
-  showPubTheme = true,
   currentPublicationUri,
 }: {
   uri: string;
   size?: StandardSitePostSize;
-  showPubTheme?: boolean;
   currentPublicationUri?: string | null;
 }) {
   const { data, isLoading } = useStandardSitePost(uri);
@@ -51,7 +49,6 @@ export function StandardSitePostItem({
     <StandardSitePostItemView
       post={data}
       size={size}
-      showPubTheme={showPubTheme}
       currentPublicationUri={currentPublicationUri}
     />
   );
@@ -94,7 +91,7 @@ function StandardSitePostItemPlaceholder({
   if (size === "small") {
     return (
       <>
-        <div className="flex w-full grow flex-col gap-1 px-3 py-2">
+        <div className="transparent-container flex w-full grow flex-col gap-1 p-3 ">
           <div className="h-7 w-2/3 bg-border-light rounded animate-pulse" />
           <div className="h-4 w-32 bg-border-light rounded animate-pulse" />
         </div>
@@ -106,8 +103,8 @@ function StandardSitePostItemPlaceholder({
   if (size === "medium") {
     return (
       <>
-        <div className="flex w-full gap-3 items-stretch sm:min-h-36">
-          <div className="flex w-full gap-2 grow flex-col justify-between min-w-0 pl-3 pr-3 py-2">
+        <div className="transparent-container flex w-full gap-3 items-stretch sm:min-h-36">
+          <div className="flex w-full gap-2 grow flex-col justify-between min-w-0 pl-3 p-3">
             <div className="flex flex-col gap-2">
               <div className="h-7 w-2/3 bg-border-light rounded animate-pulse" />
               <div className="h-4 w-full bg-border-light rounded animate-pulse" />
@@ -126,17 +123,17 @@ function StandardSitePostItemPlaceholder({
   return (
     <>
       <div
-        className={`flex flex-col items-stretch ${widePage ? "sm:flex-row sm:gap-2 gap-0" : ""} w-full items-start`}
+        className={`transparent-container flex flex-col items-stretch ${widePage ? "sm:flex-row sm:gap-2 gap-0" : ""} w-full items-start`}
       >
         <div
           className={`bg-border-light rounded animate-pulse shrink-0 ${widePage ? "w-full sm:w-auto sm:h-[244px] aspect-[1.91/1]" : "w-full aspect-[1.91/1]"}`}
         />
         <div
-          className={`flex w-full grow flex-col gap-2 justify-between px-3 py-2 ${widePage ? "sm:pb-3" : ""}`}
+          className={`flex w-full grow flex-col gap-2 justify-between p-3 pb-2 ${widePage ? "sm:pb-3" : ""}`}
         >
           <div className="flex flex-col gap-2">
             <div
-              className={`h-7 w-2/3 bg-border-light rounded animate-pulse ${widePage ? "sm:h-8" : ""}`}
+              className={`h-7 w-1/3 bg-border-light rounded animate-pulse ${widePage ? "sm:h-8" : ""}`}
             />
             <div
               className={`h-5 w-full bg-border-light rounded animate-pulse ${widePage ? "sm:h-6" : ""}`}
@@ -158,12 +155,10 @@ function StandardSitePostItemPlaceholder({
 export function StandardSitePostItemView({
   post,
   size = "medium",
-  showPubTheme = true,
   currentPublicationUri,
 }: {
   post: StandardSitePostData;
   size?: StandardSitePostSize;
-  showPubTheme?: boolean;
   currentPublicationUri?: string | null;
 }) {
   const docUrl = getDocumentURL(
@@ -234,9 +229,8 @@ export function StandardSitePostItemView({
     footer: pubFooter,
   };
 
-  let item: React.ReactNode;
   if (size === "large") {
-    item = (
+    return (
       <PublicationPostItemLarge
         {...commonProps}
         description={description}
@@ -245,8 +239,9 @@ export function StandardSitePostItemView({
         pageWidth={pageWidth}
       />
     );
-  } else if (size === "medium") {
-    item = (
+  }
+  if (size === "medium") {
+    return (
       <PublicationPostItemMedium
         {...commonProps}
         description={description}
@@ -254,15 +249,8 @@ export function StandardSitePostItemView({
         coverImageAlt={post.record.title}
       />
     );
-  } else {
-    item = <PublicationPostItemSmall {...commonProps} />;
   }
-
-  return (
-    <WithStandardSitePostPublicationTheme post={post} enabled={showPubTheme}>
-      {item}
-    </WithStandardSitePostPublicationTheme>
-  );
+  return <PublicationPostItemSmall {...commonProps} />;
 }
 
 function PubFooter({
diff --git a/components/Blocks/StandardSitePostBlock/index.tsx b/components/Blocks/StandardSitePostBlock/index.tsx
index 46b784e8..3acfbc8c 100644
--- a/components/Blocks/StandardSitePostBlock/index.tsx
+++ b/components/Blocks/StandardSitePostBlock/index.tsx
@@ -32,32 +32,35 @@ export const StandardSitePostBlock = (
 
   if (!uri) return null;
 
-  let block = (
+  if (!post)
+    return (
+      <StandardSitePostItem
+        uri={uri}
+        size={size}
+        currentPublicationUri={currentPublicationUri}
+      />
+    );
+
+  return (
     <BlockLayout
       isSelected={!!isSelected}
-      hasBackground="page"
       borderOnHover
       className="standardSitePostBlock p-0!"
       extraOptions={
         <StandardSitePostSettingsButton entityID={props.entityID} />
       }
     >
-      <StandardSitePostItem
-        uri={uri}
-        size={size}
-        showPubTheme={showPubTheme}
-        currentPublicationUri={currentPublicationUri}
-      />
+      <WithStandardSitePostPublicationTheme post={post} enabled={showPubTheme}>
+        <div className="bg-bg-page">
+          <StandardSitePostItem
+            uri={uri}
+            size={size}
+            currentPublicationUri={currentPublicationUri}
+          />
+        </div>
+      </WithStandardSitePostPublicationTheme>
     </BlockLayout>
   );
-
-  if (!post) return block;
-
-  return (
-    <WithStandardSitePostPublicationTheme post={post} enabled={showPubTheme}>
-      {block}
-    </WithStandardSitePostPublicationTheme>
-  );
 };
 
 function StandardSitePostSettingsButton(props: { entityID: string }) {
@@ -69,70 +72,84 @@ function StandardSitePostSettingsButton(props: { entityID: string }) {
     "standard-site-post/show-publication-theme",
   );
   let showPubTheme = showPubThemeFact?.data.value !== false;
+  let popoverKey = `${props.entityID}-settings`;
+  let setOpenPopover = useUIState((s) => s.setOpenPopover);
+  let isOpen = useUIState((s) => s.openPopover === popoverKey);
 
   return (
     <Popover
       asChild
       side="top"
       align="end"
-      className="flex flex-col gap-2 w-xs pb-3! overflow-y-auto"
+      className="p-0!"
+      open={isOpen}
+      onOpenChange={(o) => setOpenPopover(o ? popoverKey : null)}
       onOpenAutoFocus={(e) => e.preventDefault()}
       trigger={
         <SettingsTriggerButton aria-label="Standard Site Post Settings" />
       }
     >
-      <h4>Post Size</h4>
-      <div className="flex flex-col gap-3 w-full">
-        {(
-          [
-            { value: "small", Icon: SmallIcon },
-            { value: "medium", Icon: MedIcon },
-            { value: "large", Icon: LargeIcon },
-          ] as {
-            value: StandardSitePostSize;
-            Icon: (props: { selected: boolean }) => React.ReactNode;
-          }[]
-        ).map((option) => {
-          let selected =
-            size === option.value ||
-            (option.value === "medium" && size !== "small" && size !== "large");
-          return (
-            <button
-              className="text-left"
-              key={option.value}
-              type="button"
-              aria-pressed={selected}
-              onClick={() => {
-                if (!rep) return;
-                rep.mutate.assertFact({
-                  entity: props.entityID,
-                  attribute: "standard-site-post/size",
-                  data: {
-                    type: "standard-site-post-size-union",
-                    value: option.value,
-                  },
-                });
-              }}
-            >
-              <option.Icon selected={selected} />
-            </button>
-          );
-        })}
+      <div className="flex flex-col gap-2 w-xs pt-1 p-3! overflow-y-auto">
+        <div>
+          <h4>Post Size</h4>
+          <div className="text-sm text-tertiary italic">
+            This block links to a Standard Site article.
+          </div>
+        </div>
+        <div className="flex flex-col gap-3 w-full">
+          {(
+            [
+              { value: "small", Icon: SmallIcon },
+              { value: "medium", Icon: MedIcon },
+              { value: "large", Icon: LargeIcon },
+            ] as {
+              value: StandardSitePostSize;
+              Icon: (props: { selected: boolean }) => React.ReactNode;
+            }[]
+          ).map((option) => {
+            let selected =
+              size === option.value ||
+              (option.value === "medium" &&
+                size !== "small" &&
+                size !== "large");
+            return (
+              <button
+                className="text-left"
+                key={option.value}
+                type="button"
+                aria-pressed={selected}
+                onClick={() => {
+                  if (!rep) return;
+                  rep.mutate.assertFact({
+                    entity: props.entityID,
+                    attribute: "standard-site-post/size",
+                    data: {
+                      type: "standard-site-post-size-union",
+                      value: option.value,
+                    },
+                  });
+                }}
+              >
+                <option.Icon selected={selected} />
+              </button>
+            );
+          })}
+        </div>
+        <hr className="border-border-light my-1" />
+        <Toggle
+          toggle={showPubTheme}
+          onToggle={() => {
+            if (!rep) return;
+            rep.mutate.assertFact({
+              entity: props.entityID,
+              attribute: "standard-site-post/show-publication-theme",
+              data: { type: "boolean", value: !showPubTheme },
+            });
+          }}
+        >
+          <div className="font-bold">Use Publication Theme</div>
+        </Toggle>
       </div>
-      <hr className="border-border-light my-1" />
-      <Toggle
-        toggle={showPubTheme}
-        onToggle={() => {
-          if (!rep) return;
-          rep.mutate.assertFact({
-            entity: props.entityID,
-            attribute: "standard-site-post/show-publication-theme",
-            data: { type: "boolean", value: !showPubTheme },
-          });
-        }}
-      >
-        <div className="font-bold">Use Publication Theme</div>
-      </Toggle>
     </Popover>
   );
 }
@@ -140,14 +157,19 @@ function StandardSitePostSettingsButton(props: { entityID: string }) {
 const SmallIcon = ({ selected }: { selected: boolean }) => {
   return (
     <div
-      className={`flex gap-2 p-2 w-full opaque-container outline-2 outline-offset-1 border-border! ${selected ? "outline-accent-contrast border-accent-contrast!" : "outline-transparent"}`}
+      className={`flex flex-col pt-1 p-2 outline-2 outline-offset-1 border ${selected ? "accent-container outline-accent-contrast border-accent-contrast " : "opaque-container outline-transparent"}`}
     >
-      <div className="flex flex-col gap-1 grow min-w-0">
-        <div className="w-full h-4 bg-tertiary rounded-[2px]" />
+      <div className="text-xs font-bold text-secondary">SMALL</div>
+      <div
+        className={`flex gap-2 p-2 w-full overflow-hidden opaque-container border-tertiary! ${selected && "border-accent-contrast!"}`}
+      >
+        <div className="flex flex-col gap-1 grow min-w-0">
+          <div className="w-full h-4 bg-border rounded-[2px]" />
 
-        <div className="flex justify-between mt-1 w-full">
-          <div className="w-[60%]  h-2 bg-border rounded-[2px]" />
-          <div className="w-6 h-2 bg-border rounded-[2px]" />
+          <div className="flex justify-between mt-1 w-full">
+            <div className="w-[60%]  h-2 bg-border-light rounded-[2px]" />
+            <div className="w-6 h-2 bg-border-light rounded-[2px]" />
+          </div>
         </div>
       </div>
     </div>
@@ -157,24 +179,29 @@ const SmallIcon = ({ selected }: { selected: boolean }) => {
 const MedIcon = ({ selected }: { selected: boolean }) => {
   return (
     <div
-      className={`flex gap-2  w-full opaque-container outline-2 outline-offset-1 bg-bg-page overflow-hidden border-border! ${selected ? "outline-accent-contrast border-accent-contrast!" : "outline-transparent "}`}
+      className={`flex flex-col pt-1 p-2 outline-2 outline-offset-1 border ${selected ? "accent-container outline-accent-contrast border-accent-contrast " : "opaque-container outline-transparent"}`}
     >
-      <div className="flex flex-col gap-1 p-2 grow min-w-0">
-        <div className="w-full h-4 bg-tertiary rounded-[2px]" />
-        <div className="w-full h-2 bg-tertiary mt-1 rounded-[2px]" />
-        <div className="w-full h-2 bg-tertiary rounded-[2px]" />
-        <div className="flex justify-between mt-2 w-full">
-          <div className="w-[60%]  h-2 bg-border rounded-[2px]" />
-          <div className="w-6 h-2 bg-border rounded-[2px]" />
+      <div className="text-xs font-bold text-secondary">MEDIUM</div>
+      <div
+        className={`flex opaque-container border-tertiary! overflow-hidden ${selected && "border-accent-contrast!"}`}
+      >
+        <div className="flex flex-col gap-1 p-2 grow min-w-0">
+          <div className="w-full h-4 bg-border rounded-[2px]" />
+          <div className="w-full h-2 bg-border mt-1 rounded-[2px]" />
+          <div className="w-full h-2 bg-border rounded-[2px]" />
+          <div className="flex justify-between mt-2 w-full">
+            <div className="w-[60%]  h-2 bg-border-light rounded-[2px]" />
+            <div className="w-6 h-2 bg-border-light rounded-[2px]" />
+          </div>
         </div>
+        <div
+          className="aspect-square h-[82px] bg-border border-l border-border shrink-0 bg-cover bg-center"
+          style={{
+            backgroundImage: "url(/imagePlaceholder.png)",
+            backgroundBlendMode: "hard-light",
+          }}
+        />
       </div>
-      <div
-        className="aspect-square h-[82px] bg-border border-l border-border shrink-0 bg-cover bg-center"
-        style={{
-          backgroundImage: "url(/imagePlaceholder.png)",
-          backgroundBlendMode: "hard-light",
-        }}
-      />
     </div>
   );
 };
@@ -182,22 +209,27 @@ const MedIcon = ({ selected }: { selected: boolean }) => {
 const LargeIcon = ({ selected }: { selected: boolean }) => {
   return (
     <div
-      className={`flex flex-col gap-2 w-full outline-2 outline-offset-1 opaque-container overflow-hidden border-border! ${selected ? "outline-accent-contrast border-accent-contrast!" : "outline-transparent"}`}
+      className={`flex flex-col pt-1 p-2 outline-2 outline-offset-1 border ${selected ? "accent-container outline-accent-contrast border-accent-contrast " : "opaque-container outline-transparent"}`}
     >
+      <div className="text-xs font-bold text-secondary">LARGE</div>
       <div
-        className="w-full aspect-video bg-border bg-cover bg-center border-b border-border"
-        style={{
-          backgroundImage: "url(/imagePlaceholder.png)",
-          backgroundBlendMode: "hard-light",
-        }}
-      />
+        className={`flex flex-col gap-1 opaque-container border-tertiary! overflow-hidden ${selected && "border-accent-contrast!"}`}
+      >
+        <div
+          className="w-full aspect-video bg-border bg-cover bg-center border-b border-border"
+          style={{
+            backgroundImage: "url(/imagePlaceholder.png)",
+            backgroundBlendMode: "hard-light",
+          }}
+        />
 
-      <div className="flex flex-col gap-1 p-2 pt-0.5!">
-        <div className="w-full h-4 bg-tertiary rounded-[2px]" />
-        <div className="w-full h-2 bg-tertiary mt-1 rounded-[2px]" />
-        <div className="flex justify-between mt-2 w-full">
-          <div className="w-[60%]  h-2 bg-border rounded-[2px]" />
-          <div className="w-6 h-2 bg-border rounded-[2px]" />
+        <div className="flex flex-col gap-1 p-2 pt-0.5!">
+          <div className="w-full h-4 bg-border rounded-[2px]" />
+          <div className="w-full h-2 bg-border mt-1 rounded-[2px]" />
+          <div className="flex justify-between mt-2 w-full">
+            <div className="w-[60%]  h-2 bg-border-light rounded-[2px]" />
+            <div className="w-6 h-2 bg-border-light rounded-[2px]" />
+          </div>
         </div>
       </div>
     </div>
diff --git a/components/Popover/index.tsx b/components/Popover/index.tsx
index 7b8feb68..3466b826 100644
--- a/components/Popover/index.tsx
+++ b/components/Popover/index.tsx
@@ -65,6 +65,7 @@ export const Popover = (props: {
               sideOffset={props.sideOffset ? props.sideOffset : 4}
               collisionPadding={16}
               onOpenAutoFocus={props.onOpenAutoFocus}
+              arrowPadding={12}
             >
               {props.children}
               {!props.noArrow && (
diff --git a/package.json b/package.json
index c10059d6..e4b28d34 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
   "main": "index.js",
   "scripts": {
     "lint": "next lint",
-    "dev": "TZ=UTC next dev --turbo",
+    "dev": "TZ=UTC next dev --turbo -H 127.0.0.1",
     "publish-lexicons": "tsx lexicons/publish.ts",
     "generate-db-types": "supabase gen types --local > supabase/database.types.ts && drizzle-kit introspect && rm -rf ./drizzle/*.sql ./drizzle/meta",
     "lexgen": "tsx ./lexicons/build.ts && lex gen-api ./lexicons/api ./lexicons/pub/leaflet/document.json ./lexicons/pub/leaflet/comment.json ./lexicons/pub/leaflet/publication.json ./lexicons/pub/leaflet/publicationPage.json ./lexicons/pub/leaflet/content.json ./lexicons/pub/leaflet/*/* ./lexicons/com/atproto/*/* ./lexicons/app/bsky/*/* ./lexicons/site/*/* ./lexicons/site/*/*/* ./lexicons/parts/*/* ./lexicons/parts/*/*/* --yes && tsx ./lexicons/fix-extensions.ts ./lexicons/api",