diff --git a/app/lish/createPub/UpdatePubForm.tsx b/app/lish/createPub/UpdatePubForm.tsx
index 6f9d7b18..ec65254f 100644
--- a/app/lish/createPub/UpdatePubForm.tsx
+++ b/app/lish/createPub/UpdatePubForm.tsx
@@ -43,7 +43,7 @@ export const EditPubForm = () => {
 
   return (
     <form
-      className="flex flex-col gap-3 w-full py-1"
+      className="flex flex-col gap-3 w-[1000px] max-w-full py-1"
       onSubmit={async (e) => {
         if (!pubData) return;
         e.preventDefault();
@@ -100,7 +100,7 @@ export const EditPubForm = () => {
           Publication Name
         </p>
         <Input
-          className="input-with-border w-full "
+          className="input-with-border w-full text-primary"
           type="text"
           id="pubName"
           value={nameValue}
@@ -115,7 +115,7 @@ export const EditPubForm = () => {
         </p>
         <Input
           textarea
-          className="input-with-border w-full "
+          className="input-with-border w-full text-primary"
           rows={3}
           id="pubDescription"
           value={descriptionValue}
@@ -274,8 +274,8 @@ function Domain(props: {
   console.log(props.domain, data);
 
   return (
-    <div className="text-sm text-secondary relative">
-      {props.domain}
+    <div className="text-sm text-secondary relative w-full ">
+      <div className="pr-8 truncate">{props.domain}</div>
       <div className="absolute right-0 top-0 bottom-0 flex justify-end items-center w-4 ">
         {pending ? (
           <button
diff --git a/components/ThemeManager/PageThemeSetter.tsx b/components/ThemeManager/PageThemeSetter.tsx
index f749c502..0207e480 100644
--- a/components/ThemeManager/PageThemeSetter.tsx
+++ b/components/ThemeManager/PageThemeSetter.tsx
@@ -1,13 +1,17 @@
 import { useEntity, useReplicache } from "src/replicache";
 import { useEntitySetContext } from "components/EntitySetProvider";
-import { pickers, SectionArrow } from "./ThemeSetter";
+import { pickers, SectionArrow, setColorAttribute } from "./ThemeSetter";
 
-import { PageThemePickers } from "./Pickers/PageThemePickers";
-import { useState } from "react";
+import {
+  PageBackgroundPicker,
+  PageThemePickers,
+} from "./Pickers/PageThemePickers";
+import { useMemo, useState } from "react";
 import { theme } from "tailwind.config";
 import { ButtonPrimary } from "components/Buttons";
 import { PaintSmall } from "components/Icons/PaintSmall";
 import { AccentPickers } from "./Pickers/AccentPickers";
+import Page from "twilio/lib/base/Page";
 
 export const PageThemeSetter = (props: { entityID: string }) => {
   let { rootEntity } = useReplicache();
@@ -19,6 +23,11 @@ export const PageThemeSetter = (props: { entityID: string }) => {
 
   if (!permission) return null;
 
+  let { rep } = useReplicache();
+  let set = useMemo(() => {
+    return setColorAttribute(rep, props.entityID);
+  }, [rep, props.entityID]);
+
   return (
     <>
       <div className="pageThemeSetter flex flex-row gap-2 px-3 py-1 z-10">
@@ -27,8 +36,9 @@ export const PageThemeSetter = (props: { entityID: string }) => {
         </div>
         <ResetButton entityID={props.entityID} />
       </div>
+
       <div
-        className="pageThemeSetterContent bg-bg-leaflet w-80 p-3 pb-0 flex flex-col gap-2 rounded-md -mb-1"
+        className="pageThemeSetterContent bg-bg-leaflet w-80 p-3 pb-0 flex flex-col gap-4 rounded-md -mb-1"
         style={{
           backgroundImage: leafletBGImage
             ? `url(${leafletBGImage.data.src})`
@@ -40,23 +50,30 @@ export const PageThemeSetter = (props: { entityID: string }) => {
             : `calc(${leafletBGRepeat.data.value}px / 2 )`,
         }}
       >
-        <AccentPickers
-          entityID={props.entityID}
-          openPicker={openPicker}
-          setOpenPicker={(pickers) => setOpenPicker(pickers)}
-        />
-        <div className="flex flex-col -mb-[14px] mt-4 z-10">
-          <PageThemePickers
+        <div
+          className="pageThemeBG flex flex-col gap-2 h-full text-primary bg-bg-leaflet p-2 rounded-md border border-primary shadow-[0_0_0_1px_rgb(var(--bg-page))]"
+          style={{ backgroundColor: "rgba(var(--bg-page), 0.6)" }}
+        >
+          <PageBackgroundPicker
             entityID={props.entityID}
             openPicker={openPicker}
             setOpenPicker={(pickers) => setOpenPicker(pickers)}
+            setValue={set("theme/page-background")}
           />
-          <SectionArrow
-            fill={theme.colors["primary"]}
-            stroke={theme.colors["bg-page"]}
-            className="ml-2"
+        </div>
+
+        <div className="flex flex-col  z-10">
+          <PageThemePickers
+            entityID={props.entityID}
+            openPicker={openPicker}
+            setOpenPicker={(pickers) => setOpenPicker(pickers)}
           />
         </div>
+        <AccentPickers
+          entityID={props.entityID}
+          openPicker={openPicker}
+          setOpenPicker={(pickers) => setOpenPicker(pickers)}
+        />
         <SamplePage entityID={props.entityID} />
       </div>
     </>
diff --git a/components/ThemeManager/Pickers/ImagePicker.tsx b/components/ThemeManager/Pickers/ImagePicker.tsx
index a31fcd6a..178f129b 100644
--- a/components/ThemeManager/Pickers/ImagePicker.tsx
+++ b/components/ThemeManager/Pickers/ImagePicker.tsx
@@ -2,6 +2,8 @@ import * as Slider from "@radix-ui/react-slider";
 import { theme } from "../../../tailwind.config";
 
 import { Color } from "react-aria-components";
+import { Input } from "components/Input";
+import { Radio } from "components/Checkbox";
 
 import { useEntity, useReplicache } from "src/replicache";
 import { addImage } from "src/utils/addImage";
@@ -27,70 +29,37 @@ export const ImageSettings = (props: {
   let { rep } = useReplicache();
   return (
     <>
-      <div
-        style={{
-          backgroundImage: image?.data.src
-            ? `url(${image.data.src})`
-            : undefined,
-          backgroundPosition: "center",
-          backgroundSize: "cover",
-        }}
-        className="themeBGImagePreview flex gap-2 place-items-center justify-center w-full h-[128px]  bg-cover bg-center bg-no-repeat"
-      >
-        <label className="hover:cursor-pointer ">
-          <div
-            className="flex gap-2 rounded-md px-2 py-1 text-accent-contrast font-bold"
-            style={{ backgroundColor: "rgba(var(--bg-page), .8" }}
+      <div className="themeBGImageControls font-bold flex flex-col gap-1 items-center px-3">
+        <label htmlFor="cover" className="w-full">
+          <Radio
+            radioCheckedClassName="!text-[#595959]"
+            radioEmptyClassName="!text-[#969696]"
+            type="radio"
+            id="cover"
+            name="bg-image-options"
+            value="cover"
+            checked={!repeat}
+            onChange={async (e) => {
+              if (!e.currentTarget.checked) return;
+              if (!repeat) return;
+              if (repeat) await rep?.mutate.retractFact({ factID: repeat.id });
+            }}
           >
-            <BlockImageSmall /> Change Image
-          </div>
-          <div className="hidden">
-            <ImageInput {...props} />
-          </div>
-        </label>
-        <button
-          onClick={() => {
-            if (image) rep?.mutate.retractFact({ factID: image.id });
-            if (repeat) rep?.mutate.retractFact({ factID: repeat.id });
-          }}
-        >
-          <CloseContrastSmall
-            fill={theme.colors["accent-1"]}
-            stroke={theme.colors["accent-2"]}
-          />
-        </button>
-      </div>
-      <div className="themeBGImageControls font-bold flex gap-2 items-center">
-        {pageType !== "canvas" && (
-          <label htmlFor="cover" className="flex shrink-0">
-            <input
-              className="appearance-none"
-              type="radio"
-              id="cover"
-              name="bg-image-options"
-              value="cover"
-              checked={!repeat}
-              onChange={async (e) => {
-                if (!e.currentTarget.checked) return;
-                if (!repeat) return;
-                if (repeat)
-                  await rep?.mutate.retractFact({ factID: repeat.id });
-              }}
-            />
             <div
-              className={`shink-0 grow-0 w-fit border border-accent-1 rounded-md px-1 py-0.5 cursor-pointer ${!repeat ? "bg-accent-1 text-accent-2" : "bg-transparent text-accent-1"}`}
+              className={`w-full cursor-pointer ${!repeat ? "text-[#595959]" : " text-[#969696]"}`}
             >
               cover
             </div>
-          </label>
-        )}
-        <label htmlFor="repeat" className="flex shrink-0">
-          <input
-            className={`appearance-none `}
+          </Radio>
+        </label>
+        <label htmlFor="repeat" className="pb-3 w-full">
+          <Radio
             type="radio"
             id="repeat"
             name="bg-image-options"
             value="repeat"
+            radioCheckedClassName="!text-[#595959]"
+            radioEmptyClassName="!text-[#969696]"
             checked={!!repeat}
             onChange={async (e) => {
               if (!e.currentTarget.checked) return;
@@ -103,37 +72,69 @@ export const ImageSettings = (props: {
                 data: { type: "number", value: 500 },
               });
             }}
-          />
-          <div
-            className={`shink-0 grow-0 w-fit z-10 border border-accent-1 rounded-md px-1 py-0.5 cursor-pointer ${repeat ? "bg-accent-1 text-accent-2" : "bg-transparent text-accent-1"}`}
           >
-            repeat
-          </div>
+            <div className="flex flex-col gap-2 w-full">
+              <div className="flex gap-2">
+                <div
+                  className={`shink-0 grow-0 w-fit z-10 cursor-pointer ${repeat ? "text-[#595959]" : " text-[#969696]"}`}
+                >
+                  repeat
+                </div>
+                <div
+                  className={`flex font-normal ${repeat ? "text-[#969696]" : " text-[#C3C3C3]"}`}
+                >
+                  <Input
+                    type="number"
+                    className="w-10 text-right appearance-none bg-transparent"
+                    max={3000}
+                    min={10}
+                    value={repeat ? repeat.data.value : 500}
+                    onChange={(e) => {
+                      rep?.mutate.assertFact({
+                        entity: props.entityID,
+                        attribute: props.card
+                          ? "theme/card-background-image-repeat"
+                          : "theme/background-image-repeat",
+                        data: {
+                          type: "number",
+                          value: parseInt(e.currentTarget.value),
+                        },
+                      });
+                    }}
+                  />{" "}
+                  px
+                </div>
+              </div>
+              <Slider.Root
+                className={`relative grow flex items-center select-none touch-none w-full h-fit px-1 `}
+                value={[repeat ? repeat.data.value : 500]}
+                max={3000}
+                min={10}
+                step={10}
+                onValueChange={(value) => {
+                  rep?.mutate.assertFact({
+                    entity: props.entityID,
+                    attribute: props.card
+                      ? "theme/card-background-image-repeat"
+                      : "theme/background-image-repeat",
+                    data: { type: "number", value: value[0] },
+                  });
+                }}
+              >
+                <Slider.Track
+                  className={`${repeat ? "bg-[#595959]" : " bg-[#C3C3C3]"} relative grow rounded-full h-[3px]`}
+                ></Slider.Track>
+                <Slider.Thumb
+                  className={`
+                    flex w-4 h-4 rounded-full border-2 border-white cursor-pointer
+                    ${repeat ? "bg-[#595959]" : " bg-[#C3C3C3] "}
+                    ${repeat && "shadow-[0_0_0_1px_#8C8C8C,_inset_0_0_0_1px_#8C8C8C]"} `}
+                  aria-label="Volume"
+                />
+              </Slider.Root>
+            </div>
+          </Radio>
         </label>
-        {(repeat || pageType === "canvas") && (
-          <Slider.Root
-            className="relative grow flex items-center select-none touch-none w-full h-fit"
-            value={[repeat?.data.value || 500]}
-            max={3000}
-            min={10}
-            step={10}
-            onValueChange={(value) => {
-              rep?.mutate.assertFact({
-                entity: props.entityID,
-                attribute: props.card
-                  ? "theme/card-background-image-repeat"
-                  : "theme/background-image-repeat",
-                data: { type: "number", value: value[0] },
-              });
-            }}
-          >
-            <Slider.Track className="bg-accent-1 relative grow rounded-full h-[3px]"></Slider.Track>
-            <Slider.Thumb
-              className="flex w-4 h-4 rounded-full border-2 border-white bg-accent-1 shadow-[0_0_0_1px_#8C8C8C,_inset_0_0_0_1px_#8C8C8C] cursor-pointer"
-              aria-label="Volume"
-            />
-          </Slider.Root>
-        )}
       </div>
     </>
   );
diff --git a/components/ThemeManager/Pickers/LeafletBGPicker.tsx b/components/ThemeManager/Pickers/LeafletBGPicker.tsx
index 29609c53..163622e7 100644
--- a/components/ThemeManager/Pickers/LeafletBGPicker.tsx
+++ b/components/ThemeManager/Pickers/LeafletBGPicker.tsx
@@ -20,6 +20,7 @@ import { useColorAttribute } from "components/ThemeManager/useColorAttribute";
 import { Separator } from "components/Layout";
 import { onMouseDown } from "src/utils/iosInputMouseDown";
 import { BlockImageSmall } from "components/Icons/BlockImageSmall";
+import { DeleteSmall } from "components/Icons/DeleteSmall";
 
 export const LeafletBGPicker = (props: {
   entityID: string;
@@ -30,6 +31,7 @@ export const LeafletBGPicker = (props: {
   setValue: (c: Color) => void;
 }) => {
   let bgImage = useEntity(props.entityID, "theme/background-image");
+  let bgRepeat = useEntity(props.entityID, "theme/background-image-repeat");
   let bgColor = useColorAttribute(props.entityID, "theme/page-background");
   let open = props.openPicker == props.thisPicker;
   let { rep } = useReplicache();
@@ -93,19 +95,29 @@ export const LeafletBGPicker = (props: {
             )}
           </div>
         </div>
-        <label className="hover:cursor-pointer h-fit">
-          <div className={"text-[#8C8C8C] hover:text-[#0000FF]"}>
-            <BlockImageSmall />
-          </div>
-          <div className="hidden">
-            <ImageInput
-              {...props}
-              onChange={() => {
-                props.setOpenPicker(props.thisPicker);
+        <div className="flex gap-1 justify-end grow text-[#969696]">
+          {bgImage && (
+            <button
+              onClick={() => {
+                if (bgImage) rep?.mutate.retractFact({ factID: bgImage.id });
+                if (bgRepeat) rep?.mutate.retractFact({ factID: bgRepeat.id });
               }}
-            />
-          </div>
-        </label>
+            >
+              <DeleteSmall />
+            </button>
+          )}
+          <label>
+            <BlockImageSmall />
+            <div className="hidden">
+              <ImageInput
+                {...props}
+                onChange={() => {
+                  props.setOpenPicker(props.thisPicker);
+                }}
+              />
+            </div>
+          </label>
+        </div>
       </div>
       {open && (
         <div className="bgImageAndColorPicker w-full flex flex-col gap-2 ">
diff --git a/components/ThemeManager/Pickers/PageThemePickers.tsx b/components/ThemeManager/Pickers/PageThemePickers.tsx
index f84dbfdc..4c14205a 100644
--- a/components/ThemeManager/Pickers/PageThemePickers.tsx
+++ b/components/ThemeManager/Pickers/PageThemePickers.tsx
@@ -24,6 +24,8 @@ import { ColorPicker, thumbStyle } from "./ColorPicker";
 import { BlockImageSmall } from "components/Icons/BlockImageSmall";
 import { Replicache } from "replicache";
 import { CanvasBackgroundPattern } from "components/Canvas";
+import { Toggle } from "components/Toggle";
+import { DeleteSmall } from "components/Icons/DeleteSmall";
 
 export const PageThemePickers = (props: {
   entityID: string;
@@ -37,12 +39,6 @@ export const PageThemePickers = (props: {
 
   let pageType = useEntity(props.entityID, "page/type")?.data.value || "doc";
   let primaryValue = useColorAttribute(props.entityID, "theme/primary");
-  let pageBackgroundValue = useColorAttribute(
-    props.entityID,
-    "theme/card-background",
-  );
-  let pageBGImage = useEntity(props.entityID, "theme/card-background-image");
-  let pageBorderHidden = useEntity(props.entityID, "theme/card-border-hidden");
 
   return (
     <div
@@ -55,22 +51,12 @@ export const PageThemePickers = (props: {
           <hr className="border-border-light w-full" />
         </>
       )}
-      {pageBGImage && pageBGImage !== null && (
-        <PageBackgroundPicker
-          entityID={props.entityID}
-          setValue={set("theme/card-background")}
-          openPicker={props.openPicker}
-          setOpenPicker={props.setOpenPicker}
-        />
-      )}
       <PageTextPicker
         value={primaryValue}
         setValue={set("theme/primary")}
         openPicker={props.openPicker}
         setOpenPicker={props.setOpenPicker}
       />
-      <hr className="border-border-light" />
-      <PageBorderHider entityID={props.entityID} />
     </div>
   );
 };
@@ -100,18 +86,19 @@ export const PageBackgroundPicker = (props: {
       )}
       <div className="relative">
         <PageBackgroundColorPicker
-          disabled={pageBorderHidden?.data.value}
+          disabled={pageBorderHidden?.data.value && !pageBGImage}
           label={pageBGImage && pageBGImage !== null ? "Menus" : "Page"}
           value={pageValue}
           setValue={props.setValue}
           thisPicker={"page"}
           openPicker={props.openPicker}
           setOpenPicker={props.setOpenPicker}
+          alpha
         />
         {(pageBGImage === null || !pageBGImage) && (
           <label
             className={`
-              text-primary hover:cursor-pointer  shrink-0
+               hover:cursor-pointer  text-[#969696] shrink-0
               absolute top-0 right-0
             `}
           >
@@ -165,6 +152,10 @@ export const PageBackgroundImagePicker = (props: {
   setValue: (c: Color) => void;
 }) => {
   let bgImage = useEntity(props.entityID, "theme/card-background-image");
+  let bgRepeat = useEntity(
+    props.entityID,
+    "theme/card-background-image-repeat",
+  );
   let bgColor = useColorAttribute(props.entityID, "theme/card-background");
   let bgAlpha =
     useEntity(props.entityID, "theme/card-background-image-opacity")?.data
@@ -187,7 +178,7 @@ export const PageBackgroundImagePicker = (props: {
               props.setOpenPicker(props.thisPicker);
             }
           }}
-          className="flex gap-2 items-center disabled:text-tertiary"
+          className="flex gap-2 items-center disabled:text-[#969696]"
         >
           <ColorSwatch
             color={bgColor}
@@ -201,10 +192,11 @@ export const PageBackgroundImagePicker = (props: {
             }}
           />
           <strong
-            className={`${props.disabled ? "text-tertiary" : "text-primary "}`}
+            className={`${props.disabled ? "text-[#969696]" : " text-[#272727] "}`}
           >
-            BG Image
+            Page
           </strong>
+          <div className="">Image</div>
         </button>
 
         <SpectrumColorPicker
@@ -218,7 +210,7 @@ export const PageBackgroundImagePicker = (props: {
             });
           }}
         >
-          <Separator classname="h-5 my-1" />
+          <Separator classname="!h-4 my-1 !border-[#C3C3C3]" />
           <ColorField className="w-fit pl-[6px]" channel="alpha">
             <Input
               disabled={props.disabled}
@@ -234,10 +226,30 @@ export const PageBackgroundImagePicker = (props: {
                   e.currentTarget.blur();
                 } else return;
               }}
-              className={`w-[48px] bg-transparent outline-none disabled:text-tertiary`}
+              className={`w-[48px] bg-transparent outline-none disabled:text-[#969696]`}
             />
           </ColorField>
         </SpectrumColorPicker>
+        <div className="flex gap-1 justify-end grow  text-[#969696]">
+          <button
+            onClick={() => {
+              if (bgImage) rep?.mutate.retractFact({ factID: bgImage.id });
+              if (bgRepeat) rep?.mutate.retractFact({ factID: bgRepeat.id });
+            }}
+          >
+            <DeleteSmall />
+          </button>
+          <label>
+            <BlockImageSmall />
+            <div className="hidden">
+              <ImageInput
+                entityID={props.entityID}
+                onChange={() => props.setOpenPicker("page-background-image")}
+                card
+              />
+            </div>
+          </label>
+        </div>
       </div>
       {open && (
         <div className="pageImagePicker flex flex-col gap-2">
@@ -246,33 +258,35 @@ export const PageBackgroundImagePicker = (props: {
             card
             setValue={props.setValue}
           />
-
-          <SpectrumColorPicker
-            value={alphaColor}
-            onChange={(c) => {
-              let alpha = c.getChannelValue("alpha");
-              rep?.mutate.assertFact({
-                entity: props.entityID,
-                attribute: "theme/card-background-image-opacity",
-                data: { type: "number", value: alpha },
-              });
-            }}
-          >
-            <ColorSlider
-              colorSpace="hsb"
-              className="w-full mt-1 rounded-full"
-              style={{
-                backgroundImage: `url(/transparent-bg.png)`,
-                backgroundRepeat: "repeat",
-                backgroundSize: "8px",
+          <div className="flex flex-col gap-2 pr-2 pl-8 -mt-2 mb-2">
+            <hr className="border-[#DBDBDB]" />
+            <SpectrumColorPicker
+              value={alphaColor}
+              onChange={(c) => {
+                let alpha = c.getChannelValue("alpha");
+                rep?.mutate.assertFact({
+                  entity: props.entityID,
+                  attribute: "theme/card-background-image-opacity",
+                  data: { type: "number", value: alpha },
+                });
               }}
-              channel="alpha"
             >
-              <SliderTrack className="h-2 w-full rounded-md">
-                <ColorThumb className={`${thumbStyle} mt-[4px]`} />
-              </SliderTrack>
-            </ColorSlider>
-          </SpectrumColorPicker>
+              <ColorSlider
+                colorSpace="hsb"
+                className="w-full mt-1 rounded-full"
+                style={{
+                  backgroundImage: `url(/transparent-bg.png)`,
+                  backgroundRepeat: "repeat",
+                  backgroundSize: "8px",
+                }}
+                channel="alpha"
+              >
+                <SliderTrack className="h-2 w-full rounded-md">
+                  <ColorThumb className={`${thumbStyle} mt-[4px]`} />
+                </SliderTrack>
+              </ColorSlider>
+            </SpectrumColorPicker>
+          </div>
         </div>
       )}
     </>
@@ -349,7 +363,11 @@ export const PageTextPicker = (props: {
   );
 };
 
-export const PageBorderHider = (props: { entityID: string }) => {
+export const PageBorderHider = (props: {
+  entityID: string;
+  setOpenPicker: (p: pickers) => void;
+  openPicker: pickers;
+}) => {
   let { rep, rootEntity } = useReplicache();
   let rootPageBorderHidden = useEntity(rootEntity, "theme/card-border-hidden");
   let entityPageBorderHidden = useEntity(
@@ -359,22 +377,41 @@ export const PageBorderHider = (props: { entityID: string }) => {
   let pageBorderHidden =
     (entityPageBorderHidden || rootPageBorderHidden)?.data.value || false;
 
+  function handleToggle() {
+    rep?.mutate.assertFact({
+      entity: props.entityID,
+      attribute: "theme/card-border-hidden",
+      data: { type: "boolean", value: !pageBorderHidden },
+    });
+
+    (pageBorderHidden && props.openPicker === "page") ||
+      (props.openPicker === "page-background-image" &&
+        props.setOpenPicker("null"));
+  }
+
   return (
     <>
-      <Checkbox
-        small
-        className="pl-[6px] !gap-3"
-        checked={pageBorderHidden}
-        onChange={(e) => {
-          rep?.mutate.assertFact({
-            entity: props.entityID,
-            attribute: "theme/card-border-hidden",
-            data: { type: "boolean", value: !pageBorderHidden },
-          });
-        }}
-      >
-        No Page Borders
-      </Checkbox>
+      <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();
+          }}
+        >
+          <div className="font-bold">Page Background</div>
+          <div className="italic text-[#8C8C8C]">
+            {pageBorderHidden ? "hidden" : ""}
+          </div>
+        </button>
+      </div>
     </>
   );
 };
diff --git a/components/ThemeManager/PubPickers/PubBackgroundPickers.tsx b/components/ThemeManager/PubPickers/PubBackgroundPickers.tsx
index 9c3234d9..3e96a8fa 100644
--- a/components/ThemeManager/PubPickers/PubBackgroundPickers.tsx
+++ b/components/ThemeManager/PubPickers/PubBackgroundPickers.tsx
@@ -99,7 +99,9 @@ export const BackgroundPicker = (props: {
           toggleOn={props.hasPageBackground}
           setToggleOn={() => {
             props.setHasPageBackground(!props.hasPageBackground);
-            props.hasPageBackground && props.setOpenPicker("null");
+            props.hasPageBackground &&
+              props.openPicker === "page" &&
+              props.setOpenPicker("null");
           }}
           disabledColor1="#8C8C8C"
           disabledColor2="#DBDBDB"
@@ -162,11 +164,12 @@ const BackgroundImagePicker = (props: {
           <strong className={` text-[#595959]`}>Background</strong>
           <div className="italic text-[#8C8C8C]">image</div>
         </button>
-        <div className="flex gap-1">
+        <div className="flex gap-1 text-[#8C8C8C]">
+          <button onClick={() => props.setBgImage(null)}>
+            <DeleteSmall />
+          </button>
           <label className="hover:cursor-pointer ">
-            <div className="flex gap-2 rounded-md  text-[#8C8C8C] ">
-              <BlockImageSmall />
-            </div>
+            <BlockImageSmall />
             <div className="hidden">
               <input
                 type="file"
@@ -190,12 +193,6 @@ const BackgroundImagePicker = (props: {
               />
             </div>
           </label>
-          <button
-            className="text-[#8C8C8C]"
-            onClick={() => props.setBgImage(null)}
-          >
-            <DeleteSmall />
-          </button>
         </div>
       </div>
       {open && (
@@ -216,57 +213,6 @@ export const ImageSettings = (props: {
 }) => {
   return (
     <>
-      {/* <div
-        style={{
-          backgroundImage: props.bgImage
-            ? `url(${props.bgImage.src})`
-            : undefined,
-          backgroundPosition: "center",
-          backgroundSize: "cover",
-        }}
-        className="themeBGImagePreview flex gap-2 place-items-center justify-center w-full h-[128px]  bg-cover bg-center bg-no-repeat"
-      >
-        <label className="hover:cursor-pointer ">
-          <div
-            className="flex gap-2 rounded-md px-2 py-1 text-accent-contrast font-bold"
-            style={{ backgroundColor: "rgba(var(--bg-page), .8" }}
-          >
-            <BlockImageSmall /> Change Image
-          </div>
-          <div className="hidden">
-            <input
-              type="file"
-              accept="image/*"
-              hidden
-              onChange={async (e) => {
-                let file = e.currentTarget.files?.[0];
-                if (file) {
-                  const reader = new FileReader();
-                  reader.onload = (e) => {
-                    if (!props.bgImage) return;
-                    props.setBgImage({
-                      ...props.bgImage,
-                      src: e.target?.result as string,
-                      file,
-                    });
-                  };
-                  reader.readAsDataURL(file);
-                }
-              }}
-            />
-          </div>
-        </label>
-        <button
-          onClick={() => {
-            props.setBgImage(null);
-          }}
-        >
-          <CloseContrastSmall
-            fill={theme.colors["accent-1"]}
-            stroke={theme.colors["accent-2"]}
-          />
-        </button>
-      </div> */}
       <div className="themeBGImageControls font-bold flex flex-col gap-1 items-center px-3">
         <label htmlFor="cover" className="w-full">
           <Radio
diff --git a/components/ThemeManager/ThemeSetter.tsx b/components/ThemeManager/ThemeSetter.tsx
index 24a4e7dd..00c1ec2a 100644
--- a/components/ThemeManager/ThemeSetter.tsx
+++ b/components/ThemeManager/ThemeSetter.tsx
@@ -5,7 +5,11 @@ import { theme } from "../../tailwind.config";
 import { Color } from "react-aria-components";
 
 import { LeafletBGPicker } from "./Pickers/LeafletBGPicker";
-import { PageThemePickers } from "./Pickers/PageThemePickers";
+import {
+  PageBackgroundPicker,
+  PageBorderHider,
+  PageThemePickers,
+} from "./Pickers/PageThemePickers";
 import { useMemo, useState } from "react";
 import { ReplicacheMutators, useEntity, useReplicache } from "src/replicache";
 import { Replicache } from "replicache";
@@ -87,6 +91,18 @@ export const ThemePopover = (props: { entityID: string; home?: boolean }) => {
                   closePicker={() => setOpenPicker("null")}
                   setValue={set("theme/page-background")}
                 />
+                <PageBackgroundPicker
+                  entityID={props.entityID}
+                  setValue={set("theme/card-background")}
+                  openPicker={openPicker}
+                  setOpenPicker={setOpenPicker}
+                />
+                <hr className=" border-[#CCCCCC]" />
+                <PageBorderHider
+                  entityID={props.entityID}
+                  openPicker={openPicker}
+                  setOpenPicker={setOpenPicker}
+                />
               </div>
 
               <SectionArrow
@@ -111,36 +127,30 @@ export const ThemePopover = (props: { entityID: string; home?: boolean }) => {
                 ? "cover"
                 : `calc(${leafletBGRepeat.data.value}px / 2 )`,
             }}
-            className={`bg-bg-leaflet p-3  mb-2 flex flex-col rounded-md  border border-border pb-0`}
+            className={`bg-bg-leaflet px-3 pt-4  pb-0 mb-2 flex flex-col gap-4 rounded-md  border border-border`}
           >
-            <div className={`flex flex-col z-10 mt-4 -mb-[6px] `}>
-              <AccentPickers
-                entityID={props.entityID}
-                openPicker={openPicker}
-                setOpenPicker={(pickers) => setOpenPicker(pickers)}
-              />
-              <SectionArrow
-                fill={theme.colors["accent-2"]}
-                stroke={theme.colors["accent-1"]}
-                className="ml-2"
-              />
-            </div>
-
-            <SampleButton
+            <PageThemePickers
               entityID={props.entityID}
-              setOpenPicker={setOpenPicker}
+              openPicker={openPicker}
+              setOpenPicker={(pickers) => setOpenPicker(pickers)}
             />
+            <div className="flex flex-col -gap-[6px]">
+              <div className={`flex flex-col z-10  -mb-[6px] `}>
+                <AccentPickers
+                  entityID={props.entityID}
+                  openPicker={openPicker}
+                  setOpenPicker={(pickers) => setOpenPicker(pickers)}
+                />
+                <SectionArrow
+                  fill={theme.colors["accent-2"]}
+                  stroke={theme.colors["accent-1"]}
+                  className="ml-2"
+                />
+              </div>
 
-            <div className="flex flex-col mt-8 -mb-[6px] z-10">
-              <PageThemePickers
+              <SampleButton
                 entityID={props.entityID}
-                openPicker={openPicker}
-                setOpenPicker={(pickers) => setOpenPicker(pickers)}
-              />
-              <SectionArrow
-                fill={theme.colors["primary"]}
-                stroke={theme.colors["bg-page"]}
-                className=" ml-2"
+                setOpenPicker={setOpenPicker}
               />
             </div>