diff --git a/app/lish/[did]/[publication]/dashboard/settings/PostOptions.tsx b/app/lish/[did]/[publication]/dashboard/settings/PostOptions.tsx
index ad10c9bf..56f6106c 100644
--- a/app/lish/[did]/[publication]/dashboard/settings/PostOptions.tsx
+++ b/app/lish/[did]/[publication]/dashboard/settings/PostOptions.tsx
@@ -1,12 +1,53 @@
+import { PubLeafletPublication } from "lexicons/api";
+import { usePublicationData } from "../PublicationSWRProvider";
 import { PubSettingsHeader } from "./PublicationSettings";
+import { useState } from "react";
+import { Toggle } from "components/Toggle";
+import { updatePublication } from "app/lish/createPub/updatePublication";
+import { useToaster } from "components/Toast";
+import { mutate } from "swr";
 
 export const PostOptions = (props: {
   backToMenu: () => void;
   loading: boolean;
   setLoading: (l: boolean) => void;
 }) => {
+  let { data } = usePublicationData();
+
+  let { publication: pubData } = data || {};
+  let record = pubData?.record as PubLeafletPublication.Record;
+
+  let [showComments, setShowComments] = useState(
+    record?.preferences?.showComments === undefined
+      ? true
+      : record.preferences.showComments,
+  );
+  let [showMentions, setShowMentions] = useState(true);
+  let [showPrevNext, setShowPrevNext] = useState(true);
+
+  let toast = useToaster();
   return (
-    <div className="text-primary flex flex-col">
+    <form
+      onSubmit={async (e) => {
+        if (!pubData) return;
+        e.preventDefault();
+        props.setLoading(true);
+        let data = await updatePublication({
+          uri: pubData.uri,
+          name: nameValue,
+          description: descriptionValue,
+          iconFile: iconFile,
+          preferences: {
+            showInDiscover: showInDiscover,
+            showComments: showComments,
+          },
+        });
+        toast({ type: "success", content: "Posts Updated!" });
+        props.setLoading(false);
+        mutate("publication-data");
+      }}
+      className="text-primary flex flex-col"
+    >
       <PubSettingsHeader
         loading={props.loading}
         setLoadingAction={props.setLoading}
@@ -15,13 +56,47 @@ export const PostOptions = (props: {
       >
         Post Options
       </PubSettingsHeader>
-      <h4>Layout</h4>
-      <div>Post Width</div>
-      <div>Show Prev Next Buttons</div>
-      <hr />
-      <h4>Interactions</h4>
-      <div>Show Comments</div>
-      <div>Show Mentions</div>
-    </div>
+      <h4 className="mb-1">Layout</h4>
+      <div>Max Post Width</div>
+      <Toggle
+        toggle={showPrevNext}
+        onToggle={() => {
+          setShowPrevNext(!showPrevNext);
+        }}
+      >
+        <div className="flex flex-col justify-start">
+          <div className="font-bold">Show Prev/Next Buttons</div>
+          <div className="text-tertiary text-sm leading-tight">
+            Show buttons that navigate to the previous and next posts
+          </div>
+        </div>
+      </Toggle>
+      <hr className="my-2 border-border-light" />
+      <h4 className="mb-1">Interactions</h4>
+      <div className="flex flex-col gap-2">
+        <Toggle
+          toggle={showComments}
+          onToggle={() => {
+            setShowComments(!showComments);
+          }}
+        >
+          <div className="font-bold">Show Comments</div>
+        </Toggle>
+
+        <Toggle
+          toggle={showMentions}
+          onToggle={() => {
+            setShowMentions(!showMentions);
+          }}
+        >
+          <div className="flex flex-col justify-start">
+            <div className="font-bold">Show Mentions</div>
+            <div className="text-tertiary text-sm leading-tight">
+              Display a list of posts on Bluesky that mention your post
+            </div>
+          </div>
+        </Toggle>
+      </div>
+    </form>
   );
 };
diff --git a/components/ThemeManager/Pickers/PageThemePickers.tsx b/components/ThemeManager/Pickers/PageThemePickers.tsx
index 5238caa8..7c730731 100644
--- a/components/ThemeManager/Pickers/PageThemePickers.tsx
+++ b/components/ThemeManager/Pickers/PageThemePickers.tsx
@@ -394,27 +394,21 @@ export const PageBorderHider = (props: {
 
   return (
     <>
-      <div className="flex gap-2 items-center">
-        <Toggle
-          toggleOn={!pageBorderHidden}
-          setToggleOn={() => {
-            handleToggle();
-          }}
-          disabledColor1="#8C8C8C"
-          disabledColor2="#DBDBDB"
-        />
-        <button
-          className="flex gap-2 items-center"
-          onClick={() => {
-            handleToggle();
-          }}
-        >
+      <Toggle
+        toggle={!pageBorderHidden}
+        onToggle={() => {
+          handleToggle();
+        }}
+        disabledColor1="#8C8C8C"
+        disabledColor2="#DBDBDB"
+      >
+        <div className="flex gap-2">
           <div className="font-bold">Page Background</div>
           <div className="italic text-[#8C8C8C]">
-            {pageBorderHidden ? "hidden" : ""}
+            {pageBorderHidden ? "none" : ""}
           </div>
-        </button>
-      </div>
+        </div>
+      </Toggle>
     </>
   );
 };
diff --git a/components/ThemeManager/PubPickers/PubBackgroundPickers.tsx b/components/ThemeManager/PubPickers/PubBackgroundPickers.tsx
index d3272d66..cfdb932f 100644
--- a/components/ThemeManager/PubPickers/PubBackgroundPickers.tsx
+++ b/components/ThemeManager/PubPickers/PubBackgroundPickers.tsx
@@ -95,8 +95,8 @@ export const BackgroundPicker = (props: {
       <hr className="border-border-light" />
       <div className="flex gap-2 items-center">
         <Toggle
-          toggleOn={props.hasPageBackground}
-          setToggleOn={() => {
+          toggle={props.hasPageBackground}
+          onToggle={() => {
             props.setHasPageBackground(!props.hasPageBackground);
             props.hasPageBackground &&
               props.openPicker === "page" &&
@@ -104,19 +104,14 @@ export const BackgroundPicker = (props: {
           }}
           disabledColor1="#8C8C8C"
           disabledColor2="#DBDBDB"
-        />
-        <button
-          className="flex gap-2 items-center"
-          onClick={() => {
-            props.setHasPageBackground(!props.hasPageBackground);
-            props.hasPageBackground && props.setOpenPicker("null");
-          }}
         >
-          <div className="font-bold">Page Background</div>
-          <div className="italic text-[#8C8C8C]">
-            {props.hasPageBackground ? "" : "hidden"}
+          <div className="flex gap-2">
+            <div className="font-bold">Page Background</div>
+            <div className="italic text-[#8C8C8C]">
+              {props.hasPageBackground ? "" : "none"}
+            </div>
           </div>
-        </button>
+        </Toggle>
       </div>
     </>
   );
diff --git a/components/ThemeManager/ThemeSetter.tsx b/components/ThemeManager/ThemeSetter.tsx
index 3de590a3..8039301b 100644
--- a/components/ThemeManager/ThemeSetter.tsx
+++ b/components/ThemeManager/ThemeSetter.tsx
@@ -220,24 +220,18 @@ function WatermarkSetter(props: { entityID: string }) {
   return (
     <div className="flex gap-2 items-start mt-0.5">
       <Toggle
-        toggleOn={!!checked?.data.value}
-        setToggleOn={() => {
+        toggle={!!checked?.data.value}
+        onToggle={() => {
           handleToggle();
         }}
         disabledColor1="#8C8C8C"
         disabledColor2="#DBDBDB"
-      />
-      <button
-        className="flex gap-2 items-center -mt-0.5"
-        onClick={() => {
-          handleToggle();
-        }}
       >
-        <div className="flex flex-col gap-0 items-start">
+        <div className="flex flex-col gap-0 items-start ">
           <div className="font-bold">Show Leaflet Watermark</div>
           <div className="text-sm text-[#969696]">Help us spread the word!</div>
         </div>
-      </button>
+      </Toggle>
     </div>
   );
 }
diff --git a/components/Toggle.tsx b/components/Toggle.tsx
index 36056507..831adf08 100644
--- a/components/Toggle.tsx
+++ b/components/Toggle.tsx
@@ -1,33 +1,45 @@
 import { theme } from "tailwind.config";
 
 export const Toggle = (props: {
-  toggleOn: boolean;
-  setToggleOn: (s: boolean) => void;
+  toggle: boolean;
+  onToggle: () => void;
   disabledColor1?: string;
   disabledColor2?: string;
+  children: React.ReactNode;
 }) => {
   return (
     <button
-      className="toggle selected-outline transparent-outline flex items-center h-[20px] w-6 rounded-md border-border"
-      style={{
-        border: props.toggleOn
-          ? "1px solid " + theme.colors["accent-2"]
-          : "1px solid " + props.disabledColor2 || theme.colors["border-light"],
-        justifyContent: props.toggleOn ? "flex-end" : "flex-start",
-        background: props.toggleOn
-          ? theme.colors["accent-1"]
-          : props.disabledColor1 || theme.colors["tertiary"],
+      type="button"
+      className="toggle flex gap-2 items-start justify-start text-left"
+      onClick={() => {
+        props.onToggle();
       }}
-      onClick={() => props.setToggleOn(!props.toggleOn)}
     >
-      <div
-        className="h-[14px] w-[10px] m-0.5 rounded-[2px]"
-        style={{
-          background: props.toggleOn
-            ? theme.colors["accent-2"]
-            : props.disabledColor2 || theme.colors["border-light"],
-        }}
-      />
+      <div className="h-6 flex place-items-center">
+        <div
+          className="selected-outline transparent-outline flex items-center h-[20px] w-6 rounded-md border-border"
+          style={{
+            border: props.toggle
+              ? "1px solid " + theme.colors["accent-2"]
+              : "1px solid " + props.disabledColor2 ||
+                theme.colors["border-light"],
+            justifyContent: props.toggle ? "flex-end" : "flex-start",
+            background: props.toggle
+              ? theme.colors["accent-1"]
+              : props.disabledColor1 || theme.colors["tertiary"],
+          }}
+        >
+          <div
+            className="h-[14px] w-[10px] m-0.5 rounded-[2px]"
+            style={{
+              background: props.toggle
+                ? theme.colors["accent-2"]
+                : props.disabledColor2 || theme.colors["border-light"],
+            }}
+          />
+        </div>
+      </div>
+      {props.children}
     </button>
   );
 };
diff --git a/lexicons/fix-extensions.ts b/lexicons/fix-extensions.ts
new file mode 100644
index 00000000..32148a9a
--- /dev/null
+++ b/lexicons/fix-extensions.ts
@@ -0,0 +1,44 @@
+import * as fs from "fs";
+import * as path from "path";
+
+/**
+ * Recursively processes all files in a directory and removes .js extensions from imports
+ */
+function fixExtensionsInDirectory(dir: string): void {
+  const entries = fs.readdirSync(dir, { withFileTypes: true });
+
+  for (const entry of entries) {
+    const fullPath = path.join(dir, entry.name);
+
+    if (entry.isDirectory()) {
+      fixExtensionsInDirectory(fullPath);
+    } else if (entry.isFile() && (entry.name.endsWith(".ts") || entry.name.endsWith(".js"))) {
+      fixExtensionsInFile(fullPath);
+    }
+  }
+}
+
+/**
+ * Removes .js extensions from import/export statements in a file
+ */
+function fixExtensionsInFile(filePath: string): void {
+  const content = fs.readFileSync(filePath, "utf-8");
+  const fixedContent = content.replace(/\.js'/g, "'");
+
+  if (content !== fixedContent) {
+    fs.writeFileSync(filePath, fixedContent, "utf-8");
+    console.log(`Fixed: ${filePath}`);
+  }
+}
+
+// Get the directory to process from command line arguments
+const targetDir = process.argv[2] || "./lexicons/api";
+
+if (!fs.existsSync(targetDir)) {
+  console.error(`Directory not found: ${targetDir}`);
+  process.exit(1);
+}
+
+console.log(`Fixing extensions in: ${targetDir}`);
+fixExtensionsInDirectory(targetDir);
+console.log("Done!");
diff --git a/package.json b/package.json
index 7cafd51c..01dba955 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,7 @@
     "dev": "TZ=UTC next dev --turbo",
     "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/*/* ./lexicons/com/atproto/*/* ./lexicons/app/bsky/*/* --yes && find './lexicons/api' -type f -exec sed -i 's/\\.js'/'/g' {} \\;",
+    "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/*/* ./lexicons/com/atproto/*/* ./lexicons/app/bsky/*/* --yes && tsx ./lexicons/fix-extensions.ts ./lexicons/api",
     "wrangler-dev": "wrangler dev",
     "build-appview": "esbuild appview/index.ts --outfile=appview/dist/index.js --bundle --platform=node",
     "build-feed-service": "esbuild feeds/index.ts --outfile=feeds/dist/index.js --bundle --platform=node",