diff --git a/packages/react/src/components/layout/InlayContainer.tsx b/packages/react/src/components/layout/InlayContainer.tsx
index 221905d5b..1b24c3144 100644
--- a/packages/react/src/components/layout/InlayContainer.tsx
+++ b/packages/react/src/components/layout/InlayContainer.tsx
@@ -54,7 +54,7 @@ export function InlayContainer({ routes }: InlayContainerProps) {
             {t("component.mainNav.back")}
           </Button>
         </div>
-        <div className="w-full rounded-lg bg-base-2 p-2 md:p-4 xl:p-8">
+        <div className="w-full rounded-lg bg-baseA-2 p-2 md:p-4 xl:p-8">
           <Suspense fallback={<Loading size="xl" />}>
             <Outlet />
           </Suspense>
diff --git a/packages/react/src/hooks/useTheme.ts b/packages/react/src/hooks/useTheme.ts
index fa2631c7a..5d11e852c 100644
--- a/packages/react/src/hooks/useTheme.ts
+++ b/packages/react/src/hooks/useTheme.ts
@@ -137,6 +137,7 @@ export function useThemeInit() {
 
   useEffect(() => {
     setCssVariable("base", BASE_MAPPING[primary] || primary);
+    setCssVariable("base", BASE_MAPPING[primary] || primary, true);
     setCssVariable("primary", primary);
     setCssVariable("primary", primary, true);
   }, [primary]);
diff --git a/packages/react/src/index.css b/packages/react/src/index.css
index fe2276018..d9421f6c4 100644
--- a/packages/react/src/index.css
+++ b/packages/react/src/index.css
@@ -40,9 +40,40 @@ High Constrast Color Theme management:
 */
 
 body {
-  --primary-fg: var(--primary-12);
-  --secondary-fg: var(--secondary-12);
+  --primary-fg: var(--primary-1);
+  --secondary-fg: var(--secondary-1);
 }
+
+body.dark {
+  background: 
+  radial-gradient(
+    circle at 20% 20%,
+    var(--primary-1) 0%,
+    transparent 50%
+  ),
+  radial-gradient(
+    circle at 80% 80%,
+    var(--secondary-1) 0%,
+    transparent 50%
+  ),
+  var(--base-1);
+}
+
+body {
+  background: 
+  radial-gradient(
+    circle at 20% 20%,
+    var(--primary-1) 0%,
+    transparent 50%
+  ),
+  radial-gradient(
+    circle at 80% 80%,
+    var(--secondary-1) 0%,
+    transparent 50%
+  ),
+  var(--base-1);
+}
+
 body.hc-secondary {
   --secondary-fg: var(--base-1)
 }
diff --git a/packages/react/src/routes/settings/appearance.tsx b/packages/react/src/routes/settings/appearance.tsx
index 857ba1db6..0ffff29f2 100644
--- a/packages/react/src/routes/settings/appearance.tsx
+++ b/packages/react/src/routes/settings/appearance.tsx
@@ -29,7 +29,7 @@ export const SettingsTheme = () => {
   const [dark, setDark] = useAtom(darkAtom);
   const [primary, setPrimary] = useAtom(primaryAtom);
   const [secondary, setSecondary] = useAtom(secondaryAtom);
-  const { size, setSize } = useVideoCardSizes(["lg", "md", "sm"]);
+  const { size, setSize } = useVideoCardSizes(["lg", "md", "list"]);
   const [hideThumbnail, setHideThumbnail] = useAtom(hideThumbnailAtom);
   const [useENName, setUseENName] = useAtom(englishNameAtom);
 
@@ -45,7 +45,7 @@ export const SettingsTheme = () => {
       icon: "i-lucide:grid-3x3",
     },
     {
-      value: "sm",
+      value: "list",
       label: t("views.settings.gridSize.2"),
       icon: "i-lucide:list",
     },
diff --git a/packages/react/tailwind.config.js b/packages/react/tailwind.config.js
index 18f1540d0..2351ac257 100644
--- a/packages/react/tailwind.config.js
+++ b/packages/react/tailwind.config.js
@@ -33,6 +33,7 @@ function configureDefaultColorSpaceForTextOnSolid(level) {
     },
     secondaryA: { DEFAULT: `var(--secondary-a${level})` },
     base: { DEFAULT: `var(--base-${level})` },
+    baseA: { DEFAULT: `var(--baseA-${level})` },
   };
 }
 
@@ -63,6 +64,7 @@ const config = {
       colors: {
         muted: "var(--base-8)", // muted is the same as base-8
         base: getColorSpace("base"),
+        baseA: getColorSpace("baseA"),
         primary: getColorSpace("primary"),
         primaryA: getColorSpace("primaryA"),
         secondary: getColorSpace("secondary"),