diff --git a/apps/theme-builder/src/components/theme-builder/index.tsx b/apps/theme-builder/src/components/theme-builder/index.tsx
index 087fa285b..bff2e1869 100644
--- a/apps/theme-builder/src/components/theme-builder/index.tsx
+++ b/apps/theme-builder/src/components/theme-builder/index.tsx
@@ -123,14 +123,17 @@ export default function ThemeBuilder() {
   return loading ? null : (
     <Flex
       sx={{
-        width: 300,
+        width: 260,
+        flexShrink: 0,
         bg: "background",
         display: "flex",
         overflow: "hidden",
         flexDirection: "column",
         overflowY: "scroll",
-        padding: "10px 0px",
-        rowGap: "10px"
+        pt: 2,
+        rowGap: 2,
+        borderLeft: "1px solid var(--border)",
+        zIndex: 999
       }}
     >
       <Flex
diff --git a/apps/theme-builder/src/index.tsx b/apps/theme-builder/src/index.tsx
index 3204e630a..eda576604 100644
--- a/apps/theme-builder/src/index.tsx
+++ b/apps/theme-builder/src/index.tsx
@@ -34,7 +34,8 @@ async function renderApp() {
       sx={{
         display: "flex",
         "#app": { flex: 1, height: "unset" },
-        height: path === "default" ? "100%" : "unset"
+        "& > :first-child": { flex: 1 },
+        height: "100%"
       }}
     >
       <Component route={props?.route || "login:email"} />
diff --git a/apps/web/src/index.tsx b/apps/web/src/index.tsx
index cf8b2f3e1..aaffb1bd4 100644
--- a/apps/web/src/index.tsx
+++ b/apps/web/src/index.tsx
@@ -35,10 +35,7 @@ async function renderApp() {
   const { default: Component } = await component();
   logger.measure("app render");
   render(
-    <BaseThemeProvider
-      addGlobalStyles
-      sx={{ height: path === "default" ? "100%" : "unset" }}
-    >
+    <BaseThemeProvider addGlobalStyles sx={{ height: "100%" }}>
       <Component route={props?.route || "login:email"} />
     </BaseThemeProvider>,
     document.getElementById("root"),