diff --git a/packages/client/index.html b/packages/client/index.html
index ea1d5906..b42a750d 100644
--- a/packages/client/index.html
+++ b/packages/client/index.html
@@ -14,7 +14,7 @@
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
+    <div id="zebar"></div>
 
     <script src="/src/index.tsx" type="module"></script>
   </body>
diff --git a/packages/client/src/app/group-element.component.tsx b/packages/client/src/app/group-element.component.tsx
index 5aef0704..514f7103 100644
--- a/packages/client/src/app/group-element.component.tsx
+++ b/packages/client/src/app/group-element.component.tsx
@@ -13,8 +13,8 @@ export function GroupElement(props: GroupElementProps) {
 
   return (
     <div
-      id={toCssSelector(config.id)}
       class={config.class_names.join(' ')}
+      id={toCssSelector(config.id)}
     >
       <Index each={getChildIds(rawConfig)}>
         {childId => (
diff --git a/packages/client/src/app/template-element.component.ts b/packages/client/src/app/template-element.component.ts
index 8d546452..0ed130a7 100644
--- a/packages/client/src/app/template-element.component.ts
+++ b/packages/client/src/app/template-element.component.ts
@@ -21,8 +21,8 @@ export function TemplateElement(props: TemplateElementProps) {
 
   function createRootElement() {
     const element = document.createElement('div');
-    element.id = toCssSelector(config.id);
     element.className = config.class_names.join(' ');
+    element.id = toCssSelector(config.id);
     return element;
   }
 
diff --git a/packages/client/src/app/window-element.component.tsx b/packages/client/src/app/window-element.component.tsx
index 6298364b..9789f3da 100644
--- a/packages/client/src/app/window-element.component.tsx
+++ b/packages/client/src/app/window-element.component.tsx
@@ -17,8 +17,8 @@ export function WindowElement() {
     <Show when={context()}>
       {context => (
         <div
-          id={toCssSelector(context().parsedConfig.id)}
           class={context().parsedConfig.class_names.join(' ')}
+          id={toCssSelector(context().parsedConfig.id)}
         >
           <Index each={getChildIds(context().rawConfig)}>
             {childId => (
diff --git a/packages/client/src/index.scss b/packages/client/src/index.scss
index 847e31a3..7fad71f3 100644
--- a/packages/client/src/index.scss
+++ b/packages/client/src/index.scss
@@ -2,7 +2,7 @@ html {
   box-sizing: border-box;
 }
 
-#root {
+#zebar {
   height: 100vh;
   width: 100vw;
 }
diff --git a/packages/client/src/index.tsx b/packages/client/src/index.tsx
index 1526bf1b..6565156f 100644
--- a/packages/client/src/index.tsx
+++ b/packages/client/src/index.tsx
@@ -5,7 +5,7 @@ import './normalize.scss';
 import './index.scss';
 import { WindowElement } from './app/window-element.component';
 
-const root = document.getElementById('root');
+const root = document.getElementById('zebar');
 
 if (import.meta.env.DEV && !(root instanceof HTMLElement)) {
   throw new Error('Root element not found.');
