diff --git a/src/interface/components/CodeEditor.css b/src/interface/components/CodeEditor.css
new file mode 100644
index 00000000..321236b7
--- /dev/null
+++ b/src/interface/components/CodeEditor.css
@@ -0,0 +1,11 @@
+.cm-editor {
+  border-radius: 8px;
+}
+
+body:not(.dark) .cm-editor {
+  @apply bg-zinc-200;
+}
+
+.cm-editor.cm-focused {
+  outline: none;
+}
\ No newline at end of file
diff --git a/src/interface/components/CodeEditor.tsx b/src/interface/components/CodeEditor.tsx
index f9b682ba..2e8759be 100644
--- a/src/interface/components/CodeEditor.tsx
+++ b/src/interface/components/CodeEditor.tsx
@@ -1,10 +1,11 @@
 import CodeMirror, { ViewUpdate } from '@uiw/react-codemirror'
 import { githubDark, githubLight } from '@uiw/codemirror-theme-github'
-import { color, colorView, colorTheme } from '@uiw/codemirror-extensions-color';
+import { color } from '@uiw/codemirror-extensions-color';
 import { less } from '@codemirror/lang-less'
 import { useCallback, useEffect, useState } from 'react';
+import './CodeEditor.css'
 
-export default function CodeEditor({ callback, initialState }: { callback: (value: string) => void, initialState: string }) {
+export default function CodeEditor({ callback, initialState, height }: { callback: (value: string) => void, initialState: string, height: string }) {
   const [value, setValue] = useState(initialState)
   const [darkMode, setDarkMode] = useState(false)
 
@@ -20,12 +21,21 @@ export default function CodeEditor({ callback, initialState }: { callback: (valu
   }, [])
 
   return(
-    <CodeMirror basicSetup={{
-      allowMultipleSelections: true,
-      lineNumbers: false,
-      foldGutter: false,
-      dropCursor: true,
-      tabSize: 2
-    }} theme={ darkMode ? githubDark : githubLight } placeholder={"It's time to dream up some code!"} value={value} height="200px" extensions={[less(), color]} onChange={onChange} />
+    <CodeMirror
+      basicSetup={{
+        allowMultipleSelections: true,
+        lineNumbers: false,
+        foldGutter: false,
+        dropCursor: true,
+        tabSize: 2,
+        
+      }}
+      theme={ darkMode ? githubDark : githubLight }
+      placeholder={"It's time to dream up some code!"}
+      className='rounded-lg'
+      value={value}
+      height={height}
+      extensions={[less(), color]}
+      onChange={onChange} />
   )
 }
\ No newline at end of file
diff --git a/src/interface/index.html b/src/interface/index.html
index 6aa88c5f..ba020507 100644
--- a/src/interface/index.html
+++ b/src/interface/index.html
@@ -4,17 +4,6 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>BetterSEQTA+ Settings</title>
-    <style>
-      body {
-        padding: 0;
-        width: 384px;
-        height: 600px;
-      }
-
-      body.dark {
-        background-color: rgb(39 39 42);
-      }
-    </style>
   </head>
   <body>
     <div id="ExtensionPopup"></div>
diff --git a/src/interface/pages/ThemeCreator.tsx b/src/interface/pages/ThemeCreator.tsx
index cc255e84..8056c5ac 100644
--- a/src/interface/pages/ThemeCreator.tsx
+++ b/src/interface/pages/ThemeCreator.tsx
@@ -7,8 +7,11 @@ export default function ThemeCreator() {
   }
 
   return (
-    <div className='w-full h-full'>
-      <CodeEditor initialState={'.hi {}'} callback={handleSave} />
+    <div className='w-full h-[100vh] bg-zinc-100 dark:bg-zinc-800'>
+
+      <div className='p-2'>
+        <CodeEditor height='100px' initialState={'.exampleCode {}'} callback={handleSave} />
+      </div>
     </div>
   );
 }
\ No newline at end of file
