diff --git a/app/[doc_id]/page.tsx b/app/[doc_id]/page.tsx
index 01c1a409..d3fb5b7b 100644
--- a/app/[doc_id]/page.tsx
+++ b/app/[doc_id]/page.tsx
@@ -1,10 +1,10 @@
 import { Fact, ReplicacheProvider } from "src/replicache";
 import { Database } from "../../supabase/database.types";
-import { Blocks } from "components/Blocks";
 import { Attributes } from "src/replicache/attributes";
 import { createServerClient } from "@supabase/ssr";
 import { SelectionManager } from "components/SelectionManager";
 import { Cards } from "components/Cards";
+import { ThemeProvider } from "components/ThemeManager/ThemeProvider";
 
 export const preferredRegion = ["sfo1"];
 export const dynamic = "force-dynamic";
@@ -22,8 +22,15 @@ export default async function DocumentPage(props: {
   let initialFacts = (data as unknown as Fact<keyof typeof Attributes>[]) || [];
   return (
     <ReplicacheProvider name={props.params.doc_id} initialFacts={initialFacts}>
-      <SelectionManager />
-      <Cards rootCard={props.params.doc_id} />
+      <ThemeProvider entityID={props.params.doc_id}>
+        <SelectionManager />
+        <div
+          className="pageContentWrapper w-full relative overflow-x-scroll snap-x snap-mandatory no-scrollbar grow items-stretch flex h-full"
+          id="card-carousel"
+        >
+          <Cards rootCard={props.params.doc_id} />
+        </div>
+      </ThemeProvider>
     </ReplicacheProvider>
   );
 }
diff --git a/components/Cards.tsx b/components/Cards.tsx
index e2eeebfa..fb4bd5c2 100644
--- a/components/Cards.tsx
+++ b/components/Cards.tsx
@@ -3,47 +3,61 @@ import { useUIState } from "src/useUIState";
 import { Blocks } from "./Blocks";
 import useMeasure from "react-use-measure";
 import { elementId } from "src/utils/elementId";
+import { ThemePopover } from "./ThemeManager/ThemeSetter";
 
 export function Cards(props: { rootCard: string }) {
   let cards = useUIState((s) => s.openCards);
   let [cardRef, { width: cardWidth }] = useMeasure();
 
   return (
-    <div
-      className="pageContentWrapper w-full relative overflow-x-scroll snap-x snap-mandatory no-scrollbar grow items-stretch flex h-full"
-      id="card-carousel"
-    >
-      <div className="pageContent flex py-4">
-        <div style={{ width: `calc((100vw - ${cardWidth}px)/2)` }} />
-        <Card entityID={props.rootCard} first />
-        {cards.map((card, index) => (
-          <div
-            className="flex items-stretch"
-            key={card}
-            ref={index === 0 ? cardRef : null}
-          >
-            <Card entityID={card} />
-          </div>
-        ))}
-        <div style={{ width: `calc((100vw - ${cardWidth}px)/2)` }} />
+    <div className="pageContent flex py-4">
+      <div
+        className="flex justify-end items-start"
+        style={{ width: `calc((100vw - ${cardWidth}px)/2)` }}
+      >
+        <div className="flex flex-col gap-2 mr-4 mt-2">
+          <PageOptions entityID={props.rootCard} />
+        </div>
       </div>
+      <Card entityID={props.rootCard} first />
+      {cards.map((card, index) => (
+        <div
+          className="flex items-stretch"
+          key={card}
+          ref={index === 0 ? cardRef : null}
+        >
+          <Card entityID={card} />
+        </div>
+      ))}
+      <div style={{ width: `calc((100vw - ${cardWidth}px)/2)` }} />
     </div>
   );
 }
 
+export const PageOptions = (props: { entityID: string }) => {
+  return (
+    <>
+      <ThemePopover entityID={props.entityID} />
+    </>
+  );
+};
+
 function Card(props: { entityID: string; first?: boolean }) {
   return (
     <>
       {!props.first && <div className="w-6 md:snap-center" />}
       <div
         id={elementId.card(props.entityID).container}
+        style={{
+          backgroundColor: "rgba(var(--bg-card), var(--bg-card-alpha))",
+        }}
         className={`
       cardWrapper w-[calc(100vw-12px)] md:w-[calc(50vw-32px)] max-w-prose
       relative
       grow flex flex-col
       overflow-y-scroll no-scrollbar
       snap-center
-      bg-bg-card rounded-lg border
+      rounded-lg border
       ${false ? "shadow-md border-border" : "border-border-light"}
 
     `}
diff --git a/components/TextBlock/index.tsx b/components/TextBlock/index.tsx
index b5e2dbe1..719eb795 100644
--- a/components/TextBlock/index.tsx
+++ b/components/TextBlock/index.tsx
@@ -184,6 +184,7 @@ export function BaseTextBlock(props: BlockProps) {
                 });
               }
               addImage(file, rep.rep, {
+                attribute: "block/image",
                 entityID: entity,
               });
             }
@@ -278,7 +279,10 @@ export function BlockOptions(props: {
                   attribute: "block/type",
                   data: { type: "block-type-union", value: "image" },
                 });
-                await addImage(file, rep, { entityID: entity });
+                await addImage(file, rep, {
+                  entityID: entity,
+                  attribute: "block/image",
+                });
               }}
             />
           </div>
diff --git a/components/TextBlock/schema.ts b/components/TextBlock/schema.ts
index 9143be05..ede917fa 100644
--- a/components/TextBlock/schema.ts
+++ b/components/TextBlock/schema.ts
@@ -1,4 +1,4 @@
-import { Schema } from "prosemirror-model";
+import { Schema, Node } from "prosemirror-model";
 import { marks } from "prosemirror-schema-basic";
 
 let baseSchema = {
diff --git a/components/ThemeManager/ThemeProvider.tsx b/components/ThemeManager/ThemeProvider.tsx
new file mode 100644
index 00000000..0d3cb8d4
--- /dev/null
+++ b/components/ThemeManager/ThemeProvider.tsx
@@ -0,0 +1,77 @@
+"use client";
+
+import { CSSProperties, useEffect } from "react";
+import { colorToString, useColorAttribute } from "./useColorAttribute";
+import { Color } from "react-aria-components";
+import { useEntity } from "src/replicache";
+
+type CSSVariables = {
+  "--bg-page": string;
+  "--bg-card": string;
+  "--primary": string;
+  "--accent": string;
+  "--accent-text": string;
+};
+
+export const ThemeDefaults = {
+  "theme/page-background": "#F0F7FA",
+  "theme/card-background": "#FFFFFF",
+  "theme/primary": "#272727",
+  "theme/accent-background": "#0000FF",
+  "theme/accent-text": "#FFFFFF",
+};
+
+function setCSSVariableToColor(el: HTMLElement, name: string, value: Color) {
+  el?.style.setProperty(name, colorToString(value));
+}
+export function ThemeProvider(props: {
+  entityID: string;
+  children: React.ReactNode;
+}) {
+  let bgPage = useColorAttribute(props.entityID, "theme/page-background");
+  let bgCard = useColorAttribute(props.entityID, "theme/card-background");
+  let bgCardAlpha = useEntity(props.entityID, "theme/card-background-alpha");
+  let primary = useColorAttribute(props.entityID, "theme/primary");
+  let accentBG = useColorAttribute(props.entityID, "theme/accent-background");
+  let accentText = useColorAttribute(props.entityID, "theme/accent-text");
+  let backgroundImage = useEntity(props.entityID, "theme/background-image");
+  let backgroundImageRepeat = useEntity(
+    props.entityID,
+    "theme/background-image-repeat",
+  );
+  useEffect(() => {
+    let el = document.querySelector(":root") as HTMLElement;
+    if (!el) return;
+    setCSSVariableToColor(el, "--bg-page", bgPage);
+    setCSSVariableToColor(el, "--bg-card", bgCard);
+    el?.style.setProperty(
+      "--bg-card-alpha",
+      (bgCardAlpha?.data.value || 1).toString(),
+    );
+    setCSSVariableToColor(el, "--primary", primary);
+    setCSSVariableToColor(el, "--accent", accentBG);
+    setCSSVariableToColor(el, "--accent-text", accentText);
+  }, [bgPage, bgCard, primary, accentBG, accentText, bgCardAlpha]);
+  return (
+    <div
+      className="pageWrapper w-full bg-bg-page text-primary h-screen flex flex-col bg-cover bg-center bg-no-repeat items-stretch"
+      style={
+        {
+          backgroundImage: `url(${backgroundImage?.data.src})`,
+          backgroundRepeat: backgroundImageRepeat ? "repeat" : "no-repeat",
+          backgroundSize: !backgroundImageRepeat
+            ? "cover"
+            : backgroundImageRepeat?.data.value,
+          "--bg-page": colorToString(bgPage),
+          "--bg-card": colorToString(bgCard),
+          "--bg-card-alpha": bgCardAlpha?.data.value || 1,
+          "--primary": colorToString(primary),
+          "--accent": colorToString(accentBG),
+          "--accent-text": colorToString(accentText),
+        } as CSSProperties
+      }
+    >
+      {props.children}
+    </div>
+  );
+}
diff --git a/components/ThemeManager/ThemeSetter.tsx b/components/ThemeManager/ThemeSetter.tsx
new file mode 100644
index 00000000..b8d8032f
--- /dev/null
+++ b/components/ThemeManager/ThemeSetter.tsx
@@ -0,0 +1,556 @@
+import * as Popover from "@radix-ui/react-popover";
+import * as Slider from "@radix-ui/react-slider";
+import { theme } from "../../tailwind.config";
+
+import {
+  ColorPicker as SpectrumColorPicker,
+  parseColor,
+  Color,
+  ColorArea,
+  ColorThumb,
+  ColorSlider,
+  Input,
+  ColorField,
+  SliderTrack,
+  ColorSwatch,
+} from "react-aria-components";
+
+import { useMemo, useState } from "react";
+import { BlockImageSmall, CloseConstrastSmall } from "components/Icons";
+import { ReplicacheMutators, useEntity, useReplicache } from "src/replicache";
+import { Replicache } from "replicache";
+import { FilterAttributes } from "src/replicache/attributes";
+import { useColorAttribute } from "components/ThemeManager/useColorAttribute";
+import { addImage } from "src/utils/addImage";
+
+function colorToString(value: Color) {
+  return value.toString("rgb").slice(4, -1);
+}
+
+export type pickers =
+  | "null"
+  | "page"
+  | "card"
+  | "accent"
+  | "accentText"
+  | "text";
+
+function setColorAttribute(
+  rep: Replicache<ReplicacheMutators> | null,
+  entity: string,
+) {
+  return (attribute: keyof FilterAttributes<{ type: "color" }>) =>
+    (color: Color) =>
+      rep?.mutate.assertFact({
+        entity,
+        attribute,
+        data: { type: "color", value: colorToString(color) },
+      });
+}
+export const ThemePopover = (props: { entityID: string }) => {
+  let { rep } = useReplicache();
+  // I need to get these variables from replicache and then write them to the DB. I also need to parse them into a state that can be used here.
+  let pageValue = useColorAttribute(props.entityID, "theme/page-background");
+  let cardValue = useColorAttribute(props.entityID, "theme/card-background");
+  let cardBGAlpha = useEntity(props.entityID, "theme/card-background-alpha");
+  let primaryValue = useColorAttribute(props.entityID, "theme/primary");
+  let accentBGValue = useColorAttribute(
+    props.entityID,
+    "theme/accent-background",
+  );
+  let backgroundImage = useEntity(props.entityID, "theme/background-image");
+  let backgroundRepeat = useEntity(
+    props.entityID,
+    "theme/background-image-repeat",
+  );
+  let accentTextValue = useColorAttribute(props.entityID, "theme/accent-text");
+  let [openPicker, setOpenPicker] = useState<pickers>("page");
+  let set = useMemo(() => {
+    return setColorAttribute(rep, props.entityID);
+  }, [rep, props.entityID]);
+
+  let randomPositions = useMemo(() => {
+    let values = [] as string[];
+    for (let i = 0; i < 3; i++) {
+      values.push(
+        `${Math.floor(Math.random() * 100)}% ${Math.floor(Math.random() * 100)}%`,
+      );
+    }
+    return values;
+  }, []);
+
+  let gradient = [
+    `radial-gradient(at ${randomPositions[0]}, ${accentBGValue.toString("hex")}80 2px, transparent 70%)`,
+    `radial-gradient(at ${randomPositions[1]}, ${cardValue.toString("hex")}66 2px, transparent 60%)`,
+    `radial-gradient(at ${randomPositions[2]}, ${primaryValue.toString("hex")}B3 2px, transparent 100%)`,
+  ].join(", ");
+
+  return (
+    <>
+      <Popover.Root>
+        <Popover.Trigger>
+          <div
+            className="rounded-full w-7 h-7 border border-border"
+            style={{
+              backgroundColor: pageValue.toString("hex"),
+              backgroundImage: gradient,
+            }}
+          />
+
+          <div className="relative z-10"></div>
+        </Popover.Trigger>
+        <Popover.Portal>
+          <Popover.Content
+            className="w-80 max-h-[800px] p-2 overflow-y-scroll bg-white rounded-md border border-border flex"
+            align="center"
+            sideOffset={4}
+            collisionPadding={16}
+          >
+            <div className="flex flex-col w-full overflow-hidden ">
+              <div className="themeBGPage flex pt-1 pr-2 pl-0 items-start">
+                <BGPicker
+                  entityID={props.entityID}
+                  thisPicker={"page"}
+                  openPicker={openPicker}
+                  setOpenPicker={setOpenPicker}
+                  closePicker={() => setOpenPicker("null")}
+                />
+                <div className="w-2 h-full border-t-2 border-r-2 border-border rounded-tr-md mt-[13px]" />
+              </div>
+              <div
+                style={{
+                  backgroundImage: `url(${backgroundImage?.data.src})`,
+                  backgroundRepeat: backgroundRepeat ? "repeat" : "no-repeat",
+                  backgroundSize: !backgroundRepeat
+                    ? "cover"
+                    : `calc(${backgroundRepeat.data.value}px / 2 )`,
+                }}
+                className="bg-bg-page p-3 pb-0 flex flex-col rounded-md"
+              >
+                <div className="themeAccentControls flex flex-col h-full">
+                  <div className="themeAccentColor flex w-full pr-2 items-start ">
+                    <ColorPicker
+                      label="Accent"
+                      value={accentBGValue}
+                      setValue={set("theme/accent-background")}
+                      thisPicker={"accent"}
+                      openPicker={openPicker}
+                      setOpenPicker={setOpenPicker}
+                      closePicker={() => setOpenPicker("null")}
+                    />
+                    <div className="w-4 h-full border-t-2 border-r-2 border-accent rounded-tr-md mt-[13px] pb-[52px] -mb-[52px]" />
+                  </div>
+                  <div className="themeTextAccentColor w-full flex pr-2 pb-1 items-start ">
+                    <div className="flex w-full  gap-2 items-center place-self-end">
+                      <ColorPicker
+                        label="Text on Accent"
+                        value={accentTextValue}
+                        setValue={set("theme/accent-text")}
+                        thisPicker={"accentText"}
+                        openPicker={openPicker}
+                        setOpenPicker={setOpenPicker}
+                        closePicker={() => setOpenPicker("null")}
+                      />
+                    </div>
+                    <div className="w-2 h-full  border-r-2 border-t-2 border-border rounded-tr-md mt-[13px] z-10" />
+                    <div className="w-2 h-full border-r-2 border-accent " />
+                  </div>
+                  <div className="font-bold relative text-center text-lg py-2  rounded-md bg-accent text-accentText shadow-md">
+                    Button
+                    <div className="absolute h-[26px] w-[92px] top-0 right-[15.5px] border-b-2 border-r-2 rounded-br-md border-border" />
+                  </div>
+                </div>
+                <hr className="my-3" />
+
+                <div className="themePageControls flex flex-col h-full pb-1">
+                  <div className="themePageColor flex pr-2 items-start ">
+                    <ColorPicker
+                      label="Page"
+                      value={cardValue}
+                      alpha={{
+                        value: cardBGAlpha?.data.value || 1,
+                        onChange: (a) => {
+                          if (!rep) return;
+                          rep.mutate.assertFact({
+                            entity: props.entityID,
+                            attribute: "theme/card-background-alpha",
+                            data: { type: "number", value: a },
+                          });
+                        },
+                      }}
+                      setValue={set("theme/card-background")}
+                      thisPicker={"card"}
+                      openPicker={openPicker}
+                      setOpenPicker={setOpenPicker}
+                      closePicker={() => setOpenPicker("null")}
+                    />
+                    <div className="w-4 h-full border-t border-r border-border rounded-tr-md mt-3" />
+                  </div>
+                  <div className="themePageTextColor w-full flex pr-2 items-start">
+                    <div className="flex w-full gap-2 items-center place-self-end">
+                      <ColorPicker
+                        label="Text"
+                        value={primaryValue}
+                        setValue={set("theme/primary")}
+                        thisPicker={"text"}
+                        openPicker={openPicker}
+                        setOpenPicker={setOpenPicker}
+                        closePicker={() => setOpenPicker("null")}
+                      />
+                    </div>
+                    <div className="w-2 h-full border-b border-r border-t border-border rounded-r-md mt-3 z-10 " />
+                    <div className="w-2 h-full border-r border-border " />
+                  </div>
+                </div>
+
+                <div
+                  className="rounded-t-lg p-2  border border-border border-b-transparent shadow-md text-primary"
+                  style={{
+                    backgroundColor:
+                      "rgba(var(--bg-card), var(--bg-card-alpha))",
+                  }}
+                >
+                  <p className="font-bold">Hello!</p>
+                  <small className="">
+                    Welcome to Leaflet. It&apos;s a super easy and fun way to
+                    make, share, and collab on little bits of paper
+                  </small>
+                </div>
+              </div>
+            </div>
+
+            <Popover.Arrow />
+          </Popover.Content>
+        </Popover.Portal>
+      </Popover.Root>
+    </>
+  );
+};
+
+let thumbStyle =
+  "w-4 h-4 rounded-full border-2 border-white shadow-[0_0_0_1px_black,_inset_0_0_0_1px_black]";
+const ColorPicker = (props: {
+  label?: string;
+  value: Color;
+  alpha?: { value: number; onChange: (alpha: number) => void };
+  setValue: (c: Color) => void;
+  openPicker: pickers;
+  thisPicker: pickers;
+  setOpenPicker: (thisPicker: pickers) => void;
+  closePicker: () => void;
+}) => {
+  let value = useMemo(() => {
+    if (!props.alpha) return props.value;
+    return props.value
+      .toFormat("rgba")
+      .withChannelValue("alpha", props.alpha.value);
+  }, [props.value, props.alpha]);
+  return (
+    <SpectrumColorPicker value={value} onChange={props.setValue}>
+      <div className="flex flex-col w-full">
+        <button
+          onClick={() => {
+            props.setOpenPicker(props.thisPicker);
+          }}
+          className="colorPickerLabel flex gap-1 items-center place-self-end py-[2px] pl-1 mb-1 rounded-md"
+        >
+          <strong className="text-primary">{props.label}</strong>
+          <div className="flex">
+            <ColorField className="w-fit" defaultValue={value}>
+              <Input
+                onFocus={(e) => {
+                  e.currentTarget.setSelectionRange(
+                    1,
+                    e.currentTarget.value.length,
+                  );
+                  props.setOpenPicker(props.thisPicker);
+                }}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") {
+                    e.currentTarget.blur();
+                  } else return;
+                }}
+                onBlur={(e) => {
+                  props.setValue(parseColor(e.currentTarget.value));
+                }}
+                className="w-[72px] bg-transparent outline-none text-primary"
+              />
+            </ColorField>
+          </div>
+          <div className="flex items-center">
+            <ColorSwatch
+              color={value}
+              className={`w-6 h-6 rounded-full  border-2 border-border`}
+              style={{
+                backgroundSize: "cover",
+              }}
+            />
+            <div className="border border-border w-1" />
+          </div>
+        </button>
+        {props.openPicker === props.thisPicker && (
+          <div className="w-full flex flex-col gap-2 pb-3">
+            {
+              <>
+                <ColorArea
+                  className="w-full h-[128px] rounded-md"
+                  colorSpace="hsb"
+                  xChannel="saturation"
+                  yChannel="brightness"
+                >
+                  <ColorThumb className={thumbStyle} />
+                </ColorArea>
+                <ColorSlider
+                  colorSpace="hsb"
+                  className="w-full  "
+                  channel="hue"
+                >
+                  <SliderTrack className="h-2 w-full rounded-md">
+                    <ColorThumb className={`${thumbStyle} mt-[4px]`} />
+                  </SliderTrack>
+                </ColorSlider>
+                {props.alpha && (
+                  <ColorSlider
+                    value={value}
+                    colorSpace="hsb"
+                    className="w-full pt-1"
+                    channel="alpha"
+                    onChange={(value) => {
+                      props.alpha?.onChange(value.getChannelValue("alpha"));
+                    }}
+                  >
+                    <SliderTrack className="h-2 w-full rounded-md">
+                      <ColorThumb className={`${thumbStyle} mt-[4px]`} />
+                    </SliderTrack>
+                  </ColorSlider>
+                )}
+              </>
+            }
+          </div>
+        )}
+      </div>
+    </SpectrumColorPicker>
+  );
+};
+
+const BGPicker = (props: {
+  entityID: string;
+  openPicker: pickers;
+  thisPicker: pickers;
+  setOpenPicker: (thisPicker: pickers) => void;
+  closePicker: () => void;
+}) => {
+  let bgImage = useEntity(props.entityID, "theme/background-image");
+  let bgColor = useColorAttribute(props.entityID, "theme/page-background");
+  let open = props.openPicker == props.thisPicker;
+  let { rep } = useReplicache();
+
+  return (
+    <div>
+      <button
+        onClick={() => {
+          props.setOpenPicker(props.thisPicker);
+        }}
+        className="colorPickerLabel flex gap-1 items-center place-self-end py-[2px] pl-1 mb-1 rounded-md"
+      >
+        <strong className="text-primary">Background</strong>
+        <div className="flex">
+          <ColorField className="w-fit" defaultValue={bgColor}>
+            <Input
+              onFocus={(e) => {
+                e.currentTarget.setSelectionRange(
+                  1,
+                  e.currentTarget.value.length,
+                );
+                props.setOpenPicker(props.thisPicker);
+              }}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") {
+                  e.currentTarget.blur();
+                } else return;
+              }}
+              className="w-[72px] bg-transparent outline-none text-primary"
+            />
+          </ColorField>
+
+          <label className="hover:cursor-pointer ">
+            <div className="opacity-30 hover:opacity-100 hover:text-accent">
+              <BlockImageSmall />
+            </div>
+            <div className="hidden">
+              <input
+                type="file"
+                accept="image/*"
+                onChange={async (e) => {
+                  let file = e.currentTarget.files?.[0];
+                  if (!file || !rep) return;
+                  await addImage(file, rep, {
+                    entityID: props.entityID,
+                    attribute: "theme/background-image",
+                  });
+                }}
+              />
+            </div>
+          </label>
+        </div>
+        <div className="flex items-center">
+          <ColorSwatch
+            color={bgColor}
+            className={`w-6 h-6 rounded-full  border-2 border-border`}
+            style={{
+              backgroundImage: `url(${bgImage?.data.src})`,
+              backgroundSize: "cover",
+            }}
+          />
+          <div className="border border-border w-1" />
+        </div>
+      </button>
+      {open && (
+        <div className="w-full flex flex-col gap-2 pb-3">
+          {props.thisPicker === "page" && bgImage ? (
+            <ImageSettings entityID={props.entityID} />
+          ) : (
+            <SpectrumColorPicker
+              value={bgColor}
+              onChange={setColorAttribute(
+                rep,
+                props.entityID,
+              )("theme/page-background")}
+            >
+              <ColorArea
+                className="w-full h-[128px] rounded-md"
+                colorSpace="hsb"
+                xChannel="saturation"
+                yChannel="brightness"
+              >
+                <ColorThumb className={thumbStyle} />
+              </ColorArea>
+              <ColorSlider colorSpace="hsb" className="w-full  " channel="hue">
+                <SliderTrack className="h-2 w-full rounded-md">
+                  <ColorThumb className={`${thumbStyle} mt-[4px]`} />
+                </SliderTrack>
+              </ColorSlider>
+            </SpectrumColorPicker>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+const ImageSettings = (props: { entityID: string }) => {
+  let image = useEntity(props.entityID, "theme/background-image");
+  let repeat = useEntity(props.entityID, "theme/background-image-repeat");
+  let { rep } = useReplicache();
+  return (
+    <>
+      <div
+        style={{
+          backgroundImage: `url(${image?.data.src})`,
+        }}
+        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="opacity-30 hover:opacity-100 hover:text-accent">
+            <BlockImageSmall />
+          </div>
+          <div className="hidden">
+            <input
+              type="file"
+              accept="image/*"
+              onChange={async (e) => {
+                let file = e.currentTarget.files?.[0];
+                if (!file || !rep) return;
+                await addImage(file, rep, {
+                  entityID: props.entityID,
+                  attribute: "theme/background-image",
+                });
+              }}
+            />
+          </div>
+        </label>
+        <button
+          onClick={() => {
+            if (image) rep?.mutate.retractFact({ factID: image.id });
+            if (repeat) rep?.mutate.retractFact({ factID: repeat.id });
+          }}
+        >
+          <CloseConstrastSmall
+            fill={theme.colors.primary}
+            outline={theme.colors["bg-card"]}
+          />
+        </button>
+      </div>
+      <div className="themeBGImageControls p-2 flex gap-2 items-center">
+        <label htmlFor="cover" className="flex shrink-0">
+          <input
+            className="appearance-none"
+            type="radio"
+            id="cover"
+            name="cover"
+            value="cover"
+            checked={!repeat}
+            onChange={async (e) => {
+              if (!e.currentTarget.checked) return;
+              if (!repeat) return;
+              await rep?.mutate.retractFact({ factID: repeat.id });
+            }}
+          />
+          <div
+            className={`border border-accent rounded-md px-1 py-0.5 cursor-pointer ${!repeat ? "bg-accent text-accentText" : "bg-transparent text-accent"}`}
+          >
+            cover
+          </div>
+        </label>
+        <label htmlFor="repeat" className="flex shrink-0">
+          <input
+            className={`appearance-none `}
+            type="radio"
+            id="repeat"
+            name="repeat"
+            value="repeat"
+            checked={!!repeat}
+            onChange={async (e) => {
+              if (!e.currentTarget.checked) return;
+              if (repeat) return;
+              await rep?.mutate.assertFact({
+                entity: props.entityID,
+                attribute: "theme/background-image-repeat",
+                data: { type: "number", value: 500 },
+              });
+            }}
+          />
+          <div
+            className={`border border-accent rounded-md px-1 py-0.5 cursor-pointer ${repeat ? "bg-accent text-accentText" : "bg-transparent text-accent"}`}
+          >
+            repeat
+          </div>
+        </label>
+        {repeat && (
+          <Slider.Root
+            className="relative grow flex items-center select-none touch-none w-full h-fit"
+            value={[repeat.data.value]}
+            max={3000}
+            min={10}
+            step={10}
+            onValueChange={(value) => {
+              rep?.mutate.assertFact({
+                entity: props.entityID,
+                attribute: "theme/background-image-repeat",
+                data: { type: "number", value: value[0] },
+              });
+            }}
+          >
+            <Slider.Track className="bg-accent relative grow rounded-full h-[3px]">
+              {/* <Slider.Range className="absolute bg-accentText rounded-full h-full" /> */}
+            </Slider.Track>
+            <Slider.Thumb
+              className="flex w-4 h-4 rounded-full border-2 border-white bg-accent shadow-[0_0_0_1px_black,_inset_0_0_0_1px_black] cursor-pointer"
+              aria-label="Volume"
+            />
+          </Slider.Root>
+        )}
+      </div>
+    </>
+  );
+};
diff --git a/components/ThemeManager/useColorAttribute.ts b/components/ThemeManager/useColorAttribute.ts
new file mode 100644
index 00000000..980e615a
--- /dev/null
+++ b/components/ThemeManager/useColorAttribute.ts
@@ -0,0 +1,21 @@
+import { useMemo } from "react";
+import { Color, parseColor } from "react-aria-components";
+import { useEntity } from "src/replicache";
+import { FilterAttributes } from "src/replicache/attributes";
+import { ThemeDefaults } from "./ThemeProvider";
+
+export function useColorAttribute(
+  entity: string,
+  attribute: keyof FilterAttributes<{ type: "color"; cardinality: "one" }>,
+) {
+  let color = useEntity(entity, attribute);
+  return useMemo(() => {
+    return parseColor(
+      color ? `rgb(${color.data.value})` : ThemeDefaults[attribute],
+    );
+  }, [color, attribute]);
+}
+
+export function colorToString(value: Color) {
+  return value.toString("rgb").slice(4, -1);
+}
diff --git a/src/replicache/attributes.ts b/src/replicache/attributes.ts
index 11b62421..719ce614 100644
--- a/src/replicache/attributes.ts
+++ b/src/replicache/attributes.ts
@@ -1,8 +1,11 @@
-export const Attributes = {
+const CardAttributes = {
   "card/block": {
     type: "ordered-reference",
     cardinality: "many",
   },
+} as const;
+
+const BlockAttributes = {
   "block/type": {
     type: "block-type-union",
     cardinality: "one",
@@ -25,7 +28,72 @@ export const Attributes = {
   },
 } as const;
 
+const ThemeAttributes = {
+  "theme/page-background": {
+    type: "color",
+    cardinality: "one",
+  },
+  "theme/card-background": {
+    type: "color",
+    cardinality: "one",
+  },
+  "theme/card-background-alpha": {
+    type: "number",
+    cardinality: "one",
+  },
+  "theme/primary": {
+    type: "color",
+    cardinality: "one",
+  },
+  "theme/accent-background": {
+    type: "color",
+    cardinality: "one",
+  },
+  "theme/accent-text": {
+    type: "color",
+    cardinality: "one",
+  },
+  "theme/background-image": {
+    type: "image",
+    cardinality: "one",
+  },
+  "theme/background-image-repeat": {
+    type: "number",
+    cardinality: "one",
+  },
+} as const;
+
+export const Attributes = {
+  ...CardAttributes,
+  ...BlockAttributes,
+  ...ThemeAttributes,
+};
 type Attribute = typeof Attributes;
+export type Data<A extends keyof typeof Attributes> = {
+  text: { type: "text"; value: string };
+  "ordered-reference": {
+    type: "ordered-reference";
+    position: string;
+    value: string;
+  };
+  image: {
+    type: "image";
+    src: string;
+    height: number;
+    width: number;
+    local?: string;
+  };
+  number: {
+    type: "number";
+    value: number;
+  };
+  reference: { type: "reference"; value: string };
+  "block-type-union": {
+    type: "block-type-union";
+    value: "text" | "image" | "card";
+  };
+  color: { type: "color"; value: string };
+}[(typeof Attributes)[A]["type"]];
 export type FilterAttributes<F extends Partial<Attribute[keyof Attribute]>> = {
   [A in keyof Attribute as Attribute[A] extends F ? A : never]: Attribute[A];
 };
diff --git a/src/replicache/index.tsx b/src/replicache/index.tsx
index 12673ced..f3297fb5 100644
--- a/src/replicache/index.tsx
+++ b/src/replicache/index.tsx
@@ -4,7 +4,7 @@ import { useSubscribe } from "replicache-react";
 import { DeepReadonlyObject, Replicache, WriteTransaction } from "replicache";
 import { Pull } from "./pull";
 import { mutations } from "./mutations";
-import { Attributes } from "./attributes";
+import { Attributes, Data } from "./attributes";
 import { Push } from "./push";
 import { clientMutationContext } from "./clientMutationContext";
 import { supabaseBrowserClient } from "supabase/browserClient";
@@ -16,27 +16,6 @@ export type Fact<A extends keyof typeof Attributes> = {
   data: Data<A>;
 };
 
-type Data<A extends keyof typeof Attributes> = {
-  text: { type: "text"; value: string };
-  "ordered-reference": {
-    type: "ordered-reference";
-    position: string;
-    value: string;
-  };
-  image: {
-    type: "image";
-    src: string;
-    height: number;
-    width: number;
-    local?: string;
-  };
-  reference: { type: "reference"; value: string };
-  "block-type-union": {
-    type: "block-type-union";
-    value: "text" | "image" | "card";
-  };
-}[(typeof Attributes)[A]["type"]];
-
 let ReplicacheContext = createContext({
   rep: null as null | Replicache<ReplicacheMutators>,
   initialFacts: [] as Fact<keyof typeof Attributes>[],
diff --git a/src/utils/addImage.ts b/src/utils/addImage.ts
index 2adbef98..0bb78bd7 100644
--- a/src/utils/addImage.ts
+++ b/src/utils/addImage.ts
@@ -1,11 +1,15 @@
 import { Replicache } from "replicache";
 import { ReplicacheMutators } from "../replicache";
 import { supabaseBrowserClient } from "supabase/browserClient";
+import { FilterAttributes } from "src/replicache/attributes";
 
 export async function addImage(
   file: File,
   rep: Replicache<ReplicacheMutators>,
-  args: { entityID: string },
+  args: {
+    entityID: string;
+    attribute: keyof FilterAttributes<{ type: "image" }>;
+  },
 ) {
   let client = supabaseBrowserClient();
   let cache = await caches.open("minilink-user-assets");
@@ -39,7 +43,7 @@ export async function addImage(
   await client.storage.from("minilink-user-assets").upload(fileID, file);
   await rep.mutate.assertFact({
     entity: args.entityID,
-    attribute: "block/image",
+    attribute: args.attribute,
     data: {
       type: "image",
       src: url,