diff --git a/app/src/modules/server/AdminController.tsx b/app/src/modules/server/AdminController.tsx
index be75698..9323761 100644
--- a/app/src/modules/server/AdminController.tsx
+++ b/app/src/modules/server/AdminController.tsx
@@ -174,23 +174,14 @@ export class AdminController extends Controller {
                         <script type="module" src={"/@vite/client"} />
                      </Fragment>
                   )}
+                  <style dangerouslySetInnerHTML={{ __html: "body { margin: 0; padding: 0; }" }} />
                </head>
-               <body style={{ backgroundColor: theme === "light" ? "#fff" : "#000" }}>
-                  <div id="root" />
-                  <div id="app">
-                     <div
-                        id="loading"
-                        style={{
-                           height: "100vh",
-                           width: "100vw",
-                           display: "flex",
-                           justifyContent: "center",
-                           alignItems: "center",
-                           fontFamily: "monospace",
-                           opacity: 0.3
-                        }}
-                     >
-                        Initializing...
+               <body>
+                  <div id="root">
+                     <div id="loading" style={style(theme)}>
+                        <span style={{ opacity: 0.3, fontSize: 14, fontFamily: "monospace" }}>
+                           Initializing...
+                        </span>
                      </div>
                   </div>
                   <script
@@ -205,3 +196,32 @@ export class AdminController extends Controller {
       );
    }
 }
+
+const style = (theme: "light" | "dark" = "light") => {
+   const base = {
+      margin: 0,
+      padding: 0,
+      height: "100vh",
+      width: "100vw",
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      "-webkit-font-smoothing": "antialiased",
+      "-moz-osx-font-smoothing": "grayscale"
+   };
+   const styles = {
+      light: {
+         color: "rgb(9,9,11)",
+         backgroundColor: "rgb(250,250,250)"
+      },
+      dark: {
+         color: "rgb(250,250,250)",
+         backgroundColor: "rgb(30,31,34)"
+      }
+   };
+
+   return {
+      ...base,
+      ...styles[theme]
+   };
+};
diff --git a/app/src/ui/Admin.tsx b/app/src/ui/Admin.tsx
index b00802e..b721bab 100644
--- a/app/src/ui/Admin.tsx
+++ b/app/src/ui/Admin.tsx
@@ -54,16 +54,19 @@ function AdminInternal() {
    );
 }
 
-const Skeleton = ({ theme = "light" }: { theme?: string }) => {
+const Skeleton = ({ theme }: { theme?: string }) => {
+   const actualTheme =
+      (theme ?? document.querySelector("html")?.classList.contains("light")) ? "light" : "dark";
+
    return (
-      <div id="bknd-admin" className={(theme ?? "light") + " antialiased"}>
+      <div id="bknd-admin" className={actualTheme + " antialiased"}>
          <AppShell.Root>
             <header
                data-shell="header"
                className="flex flex-row w-full h-16 gap-2.5 border-muted border-b justify-start bg-muted/10"
             >
                <div className="max-h-full flex hover:bg-primary/5 link p-2.5 w-[134px] outline-none">
-                  <Logo theme={theme} />
+                  <Logo theme={actualTheme} />
                </div>
                <nav className="hidden md:flex flex-row gap-2.5 pl-0 p-2.5 items-center">
                   {[...new Array(5)].map((item, key) => (
diff --git a/app/src/ui/main.css b/app/src/ui/main.css
index a0502cd..6541e5a 100644
--- a/app/src/ui/main.css
+++ b/app/src/ui/main.css
@@ -1,210 +1,211 @@
 @import "./components/form/json-schema/styles.css";
-@import '@xyflow/react/dist/style.css';
+@import "@xyflow/react/dist/style.css";
 @import "@mantine/core/styles.css";
-@import '@mantine/notifications/styles.css';
+@import "@mantine/notifications/styles.css";
 
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-html.fixed, html.fixed body {
-    top: 0;
-    left: 0;
-    height: 100%;
-    width: 100%;
-    position: fixed;
-    overflow: hidden;
-    overscroll-behavior-x: contain;
-    touch-action: none;
+html.fixed,
+html.fixed body {
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  position: fixed;
+  overflow: hidden;
+  overscroll-behavior-x: contain;
+  touch-action: none;
 }
 
-#bknd-admin, .bknd-admin {
-    --color-primary: 9 9 11; /* zinc-950 */
-    --color-background: 250 250 250; /* zinc-50 */
-    --color-muted: 228 228 231; /* ? */
-    --color-darkest: 0 0 0; /* black */
-    --color-lightest: 255 255 255; /* white */
+#bknd-admin,
+.bknd-admin {
+  --color-primary: 9 9 11; /* zinc-950 */
+  --color-background: 250 250 250; /* zinc-50 */
+  --color-muted: 228 228 231; /* ? */
+  --color-darkest: 0 0 0; /* black */
+  --color-lightest: 255 255 255; /* white */
 
-    &.dark {
-        --color-primary: 250 250 250; /* zinc-50 */
-        --color-background: 9 9 11; /* zinc-950 */
-        --color-muted: 39 39 42; /* zinc-800 */
-        --color-darkest: 255 255 255; /* white */
-        --color-lightest: 0 0 0; /* black */
-    }
-    &.dark {
-        --color-primary: 250 250 250; /* zinc-50 */
-        --color-background: 30 31 34;
-        --color-muted: 47 47 52;
-        --color-darkest: 255 255 255; /* white */
-        --color-lightest: 24 24 27; /* black */
-    }
+  &.dark {
+    --color-primary: 250 250 250; /* zinc-50 */
+    --color-background: 30 31 34;
+    --color-muted: 47 47 52;
+    --color-darkest: 255 255 255; /* white */
+    --color-lightest: 24 24 27; /* black */
+  }
 
-    @mixin light {
-        --mantine-color-body: rgb(250 250 250);
-    }
-    @mixin dark {
-        --mantine-color-body: rgb(9 9 11);
-    }
+  @mixin light {
+    --mantine-color-body: rgb(250 250 250);
+  }
+  @mixin dark {
+    --mantine-color-body: rgb(9 9 11);
+  }
 
-    table {
-        font-size: inherit;
-    }
+  table {
+    font-size: inherit;
+  }
 }
 
-html, body {
-    font-size: 14px;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    overscroll-behavior-y: none;
+html,
+body {
+  font-size: 14px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  overscroll-behavior-y: none;
 }
 
 #bknd-admin {
-    @apply bg-background text-primary overflow-hidden h-dvh w-dvw;
+  @apply bg-background text-primary overflow-hidden h-dvh w-dvw;
 
-    ::selection {
-        @apply bg-muted;
-    }
+  ::selection {
+    @apply bg-muted;
+  }
 
-    input {
-        &::selection {
-            @apply bg-primary/15;
-        }
+  input {
+    &::selection {
+      @apply bg-primary/15;
     }
+  }
 }
 
 body,
 #bknd-admin {
-    @apply flex flex-1 flex-col h-dvh w-dvw;
+  @apply flex flex-1 flex-col h-dvh w-dvw;
 }
 
 @layer components {
-    .link {
-        @apply transition-colors active:translate-y-px;
-    }
+  .link {
+    @apply transition-colors active:translate-y-px;
+  }
 
-    .img-responsive {
-        @apply max-h-full w-auto;
-    }
+  .img-responsive {
+    @apply max-h-full w-auto;
+  }
 
-    /**
-      * debug classes
-      */
-    .bordered-red {
-        @apply border-2 border-red-500;
-    }
+  /**
+   * debug classes
+   */
+  .bordered-red {
+    @apply border-2 border-red-500;
+  }
 
-    .bordered-green {
-        @apply border-2 border-green-500;
-    }
+  .bordered-green {
+    @apply border-2 border-green-500;
+  }
 
-    .bordered-blue {
-        @apply border-2 border-blue-500;
-    }
+  .bordered-blue {
+    @apply border-2 border-blue-500;
+  }
 
-    .bordered-violet {
-        @apply border-2 border-violet-500;
-    }
+  .bordered-violet {
+    @apply border-2 border-violet-500;
+  }
 
-    .bordered-yellow {
-        @apply border-2 border-yellow-500;
-    }
+  .bordered-yellow {
+    @apply border-2 border-yellow-500;
+  }
 }
 
-@layer utilities {}
+@layer utilities {
+}
 
 /* Hide scrollbar for Chrome, Safari and Opera */
 .app-scrollbar::-webkit-scrollbar {
-    display: none;
+  display: none;
 }
 /* Hide scrollbar for IE, Edge and Firefox */
 .app-scrollbar {
-    -ms-overflow-style: none; /* IE and Edge */
-    scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
 }
 
 div[data-radix-scroll-area-viewport] > div:first-child {
-    display: block !important;
-    min-width: 100% !important;
-    max-width: 100%;
+  display: block !important;
+  min-width: 100% !important;
+  max-width: 100%;
 }
 
 /* hide calendar icon on inputs */
 input[type="datetime-local"]::-webkit-calendar-picker-indicator,
 input[type="date"]::-webkit-calendar-picker-indicator {
-    display: none;
+  display: none;
 }
 
 /* cm */
 .cm-editor {
-    display: flex;
-    flex: 1;
+  display: flex;
+  flex: 1;
 }
 
 .animate-fade-in {
-    animation: fadeInAnimation 200ms ease;
+  animation: fadeInAnimation 200ms ease;
 }
 @keyframes fadeInAnimation {
-    0% {
-        opacity: 0;
-    }
-    100% {
-        opacity: 1;
-    }
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
 }
 
-input[readonly]::placeholder, input[disabled]::placeholder {
-    opacity: 0.1;
+input[readonly]::placeholder,
+input[disabled]::placeholder {
+  opacity: 0.1;
 }
 
-.react-flow__pane, .react-flow__renderer, .react-flow__node, .react-flow__edge {
-    cursor: inherit !important;
-    .drag-handle {
-        cursor: grab;
-    }
+.react-flow__pane,
+.react-flow__renderer,
+.react-flow__node,
+.react-flow__edge {
+  cursor: inherit !important;
+  .drag-handle {
+    cursor: grab;
+  }
 }
 .react-flow .react-flow__edge path,
 .react-flow__connectionline path {
-    stroke-width: 2;
+  stroke-width: 2;
 }
 
-
 .mantine-TextInput-wrapper input {
-    font-family: inherit;
-    line-height: 1;
+  font-family: inherit;
+  line-height: 1;
 }
 
 .cm-editor {
-    background: transparent;
+  background: transparent;
 }
 .cm-editor.cm-focused {
-    outline: none;
+  outline: none;
 }
 
 .flex-animate {
-    transition: flex-grow 0.2s ease, background-color 0.2s ease;
+  transition: flex-grow 0.2s ease, background-color 0.2s ease;
 }
 .flex-initial {
-    flex: 0 1 auto;
+  flex: 0 1 auto;
 }
 .flex-open {
-    flex: 1 1 0;
+  flex: 1 1 0;
 }
 
-#bknd-admin, .bknd-admin {
-    /* Chrome, Edge, and Safari */
-    & *::-webkit-scrollbar {
-        @apply w-1;
-        &:horizontal {
-            @apply h-px;
-        }
+#bknd-admin,
+.bknd-admin {
+  /* Chrome, Edge, and Safari */
+  & *::-webkit-scrollbar {
+    @apply w-1;
+    &:horizontal {
+      @apply h-px;
     }
+  }
 
-    & *::-webkit-scrollbar-track {
-        @apply bg-transparent w-1;
-    }
+  & *::-webkit-scrollbar-track {
+    @apply bg-transparent w-1;
+  }
 
-    & *::-webkit-scrollbar-thumb {
-        @apply bg-primary/25;
-    }
-}
\ No newline at end of file
+  & *::-webkit-scrollbar-thumb {
+    @apply bg-primary/25;
+  }
+}
diff --git a/app/src/ui/main.tsx b/app/src/ui/main.tsx
index 37d32de..623e6af 100644
--- a/app/src/ui/main.tsx
+++ b/app/src/ui/main.tsx
@@ -1,26 +1,13 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom/client";
+import Admin from "./Admin";
 import "./main.css";
 
-import Admin from "./Admin";
-
-function ClientApp() {
-   return <Admin withProvider />;
-}
-
-// Render the app
-const rootElement = document.getElementById("app")!;
-const shouldRender =
-   !rootElement.innerHTML ||
-   (rootElement.childElementCount === 1 && rootElement.firstElementChild?.id === "loading");
-if (shouldRender) {
-   const root = ReactDOM.createRoot(rootElement);
-   root.render(
-      <React.StrictMode>
-         <ClientApp />
-      </React.StrictMode>
-   );
-}
+ReactDOM.createRoot(document.getElementById("root")!).render(
+   <React.StrictMode>
+      <Admin withProvider />
+   </React.StrictMode>
+);
 
 // REGISTER ERROR OVERLAY
 if (process.env.NODE_ENV !== "production") {
