diff --git a/app/globals.css b/app/globals.css
index 46a82ac9..9029e542 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -132,6 +132,7 @@
 
   @media (min-width: 640px) {
     :root {
+      /*picks between max width and screen width with 64px of padding*/
       --page-width-unitless: min(
         var(--page-max-width-unitless),
         calc(var(--leaflet-width-unitless) - 128)
@@ -143,19 +144,6 @@
     }
   }
 
-  @media (min-width: 1280px) {
-    :root {
-      --page-width-unitless: min(
-        var(--page-max-width-unitless),
-        calc((var(--leaflet-width-unitless) / 2) - 32)
-      );
-      --page-width-units: min(
-        calc(var(--page-max-width-unitless) * 1px),
-        calc((100vw / 2) - 32px)
-      );
-    }
-  }
-
   html,
   body {
     @apply h-full;
diff --git a/components/ThemeManager/Pickers/PageWidthSetter.tsx b/components/ThemeManager/Pickers/PageWidthSetter.tsx
index d69457dd..aad2047a 100644
--- a/components/ThemeManager/Pickers/PageWidthSetter.tsx
+++ b/components/ThemeManager/Pickers/PageWidthSetter.tsx
@@ -1,8 +1,9 @@
 import * as Slider from "@radix-ui/react-slider";
 import { Input } from "components/Input";
+import { Radio } from "components/Checkbox";
 import { useEntity, useReplicache } from "src/replicache";
 import { pickers } from "../ThemeSetter";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 
 export const PageWidthSetter = (props: {
   entityID: string;
@@ -12,14 +13,35 @@ export const PageWidthSetter = (props: {
   closePicker: () => void;
 }) => {
   let { rep } = useReplicache();
-  let pageWidth = useEntity(props.entityID, "theme/page-width");
-  let currentValue = pageWidth?.data.value || 624;
+  let pageWidth = useEntity(props.entityID, "theme/page-width")?.data.value;
+  let currentValue = pageWidth || 624;
   let [interimValue, setInterimValue] = useState<number>(currentValue);
+  let [selectedPreset, setSelectedPreset] = useState<
+    "default" | "wide" | "custom"
+  >(
+    currentValue === 624 ? "default" : currentValue === 756 ? "wide" : "custom",
+  );
   let min = 324;
   let max = 1200;
 
   let open = props.openPicker == props.thisPicker;
 
+  // Update interim value when current value changes
+  useEffect(() => {
+    setInterimValue(currentValue);
+  }, [currentValue]);
+
+  const setPageWidth = (value: number) => {
+    rep?.mutate.assertFact({
+      entity: props.entityID,
+      attribute: "theme/page-width",
+      data: {
+        type: "number",
+        value: value,
+      },
+    });
+  };
+
   return (
     <div className="pageWidthSetter flex flex-col gap-2 px-2 py-[6px] border border-[#CCCCCC] rounded-md">
       <div className="flex flex-col gap-2">
@@ -37,82 +59,148 @@ export const PageWidthSetter = (props: {
             Max Page Width
           </button>
           <div className="flex font-normal text-[#969696]">
-            <Input
-              type="number"
-              className="relative w-10 text-right appearance-none bg-transparent"
-              max={max}
-              min={min}
-              value={interimValue}
-              onFocus={(e) => {
-                e.preventDefault();
-                props.setOpenPicker(props.thisPicker);
-              }}
-              onChange={(e) => {
-                setInterimValue(parseInt(e.currentTarget.value));
-              }}
-              onKeyDown={(e) => {
-                if (e.key === "Enter" || e.key === "Escape") {
-                  e.preventDefault();
-                  let clampedValue = interimValue;
-                  if (!isNaN(interimValue)) {
-                    clampedValue = Math.max(min, Math.min(max, interimValue));
-                    setInterimValue(clampedValue);
-                  }
-                  rep?.mutate.assertFact({
-                    entity: props.entityID,
-                    attribute: "theme/page-width",
-                    data: {
-                      type: "number",
-                      value: clampedValue,
-                    },
-                  });
-                }
-              }}
-              onBlur={() => {
-                let clampedValue = interimValue;
-                if (!isNaN(interimValue)) {
-                  clampedValue = Math.max(min, Math.min(max, interimValue));
-                  setInterimValue(clampedValue);
-                }
-                rep?.mutate.assertFact({
-                  entity: props.entityID,
-                  attribute: "theme/page-width",
-                  data: {
-                    type: "number",
-                    value: clampedValue,
-                  },
-                });
-              }}
-            />
-            px
+            {currentValue}px
           </div>
         </div>
         {open && (
-          <Slider.Root
-            className="relative grow flex items-center select-none touch-none w-full h-fit px-1 mb-1"
-            value={[interimValue]}
-            max={max}
-            min={min}
-            step={16}
-            onValueChange={(value) => {
-              setInterimValue(value[0]);
-            }}
-            onPointerUp={() => {
-              rep?.mutate.assertFact({
-                entity: props.entityID,
-                attribute: "theme/page-width",
-                data: { type: "number", value: interimValue },
-              });
-            }}
-          >
-            <Slider.Track className="bg-[#595959] relative grow rounded-full h-[3px]" />
-            <Slider.Thumb
-              className="flex w-4 h-4 outline-none!  rounded-full border-2 border-white cursor-pointer bg-[#595959]
-            focus:shadow-[0_0_0_1px_#8C8C8C,inset_0_0_0_1px_#8C8C8C]
-              "
-              aria-label="Max Page Width"
-            />
-          </Slider.Root>
+          <div className="flex flex-col gap-1 px-3">
+            <label htmlFor="default" className="w-full">
+              <Radio
+                radioCheckedClassName="text-[#595959]!"
+                radioEmptyClassName="text-[#969696]!"
+                type="radio"
+                id="default"
+                name="page-width-options"
+                value="default"
+                checked={selectedPreset === "default"}
+                onChange={(e) => {
+                  if (!e.currentTarget.checked) return;
+                  setSelectedPreset("default");
+                  setPageWidth(624);
+                }}
+              >
+                <div
+                  className={`w-full cursor-pointer ${selectedPreset === "default" ? "text-[#595959]" : "text-[#969696]"}`}
+                >
+                  default (624px)
+                </div>
+              </Radio>
+            </label>
+            <label htmlFor="wide" className="w-full">
+              <Radio
+                radioCheckedClassName="text-[#595959]!"
+                radioEmptyClassName="text-[#969696]!"
+                type="radio"
+                id="wide"
+                name="page-width-options"
+                value="wide"
+                checked={selectedPreset === "wide"}
+                onChange={(e) => {
+                  if (!e.currentTarget.checked) return;
+                  setSelectedPreset("wide");
+                  setPageWidth(756);
+                }}
+              >
+                <div
+                  className={`w-full cursor-pointer ${selectedPreset === "wide" ? "text-[#595959]" : "text-[#969696]"}`}
+                >
+                  wide (756px)
+                </div>
+              </Radio>
+            </label>
+            <label htmlFor="custom" className="pb-3 w-full">
+              <Radio
+                type="radio"
+                id="custom"
+                name="page-width-options"
+                value="custom"
+                radioCheckedClassName="text-[#595959]!"
+                radioEmptyClassName="text-[#969696]!"
+                checked={selectedPreset === "custom"}
+                onChange={(e) => {
+                  if (!e.currentTarget.checked) return;
+                  setSelectedPreset("custom");
+                  if (selectedPreset !== "custom") {
+                    setPageWidth(currentValue);
+                    setInterimValue(currentValue);
+                  }
+                }}
+              >
+                <div className="flex flex-col gap-2 w-full">
+                  <div className="flex gap-2">
+                    <div
+                      className={`shrink-0 grow-0 w-fit z-10 cursor-pointer ${selectedPreset === "custom" ? "text-[#595959]" : "text-[#969696]"}`}
+                    >
+                      custom
+                    </div>
+                    <div
+                      className={`flex font-normal ${selectedPreset === "custom" ? "text-[#969696]" : "text-[#C3C3C3]"}`}
+                    >
+                      <Input
+                        type="number"
+                        className="w-10 text-right appearance-none bg-transparent"
+                        max={max}
+                        min={min}
+                        value={interimValue}
+                        onChange={(e) => {
+                          setInterimValue(parseInt(e.currentTarget.value));
+                        }}
+                        onKeyDown={(e) => {
+                          if (e.key === "Enter" || e.key === "Escape") {
+                            e.preventDefault();
+                            let clampedValue = interimValue;
+                            if (!isNaN(interimValue)) {
+                              clampedValue = Math.max(
+                                min,
+                                Math.min(max, interimValue),
+                              );
+                              setInterimValue(clampedValue);
+                            }
+                            setPageWidth(clampedValue);
+                          }
+                        }}
+                        onBlur={() => {
+                          let clampedValue = interimValue;
+                          if (!isNaN(interimValue)) {
+                            clampedValue = Math.max(
+                              min,
+                              Math.min(max, interimValue),
+                            );
+                            setInterimValue(clampedValue);
+                          }
+                          setPageWidth(clampedValue);
+                        }}
+                      />
+                      px
+                    </div>
+                  </div>
+                  <Slider.Root
+                    className={`relative grow flex items-center select-none touch-none w-full h-fit px-1`}
+                    value={[interimValue]}
+                    max={max}
+                    min={min}
+                    step={16}
+                    onValueChange={(value) => {
+                      setInterimValue(value[0]);
+                    }}
+                    onValueCommit={(value) => {
+                      setPageWidth(value[0]);
+                    }}
+                  >
+                    <Slider.Track
+                      className={`${selectedPreset === "custom" ? "bg-[#595959]" : "bg-[#C3C3C3]"} relative grow rounded-full h-[3px]`}
+                    />
+                    <Slider.Thumb
+                      className={`flex w-4 h-4 rounded-full border-2 border-white cursor-pointer
+                        ${selectedPreset === "custom" ? "bg-[#595959] shadow-[0_0_0_1px_#8C8C8C,inset_0_0_0_1px_#8C8C8C]" : "bg-[#C3C3C3]"}
+                      `}
+                      aria-label="Max Page Width"
+                    />
+                  </Slider.Root>
+                </div>
+              </Radio>
+            </label>
+          </div>
         )}
       </div>
     </div>