diff --git a/studio/components/grid/SupabaseGrid.tsx b/studio/components/grid/SupabaseGrid.tsx
index 6a09b66a572..fbc0bd4ad56 100644
--- a/studio/components/grid/SupabaseGrid.tsx
+++ b/studio/components/grid/SupabaseGrid.tsx
@@ -28,21 +28,20 @@ export const SupabaseGrid = forwardRef<SupabaseGridRef, SupabaseGridProps>((prop
   useEffect(() => {
     if (monaco) {
       const darkTheme = theme && theme === 'dark' ? true : false
-
       monaco.editor.defineTheme('supabase', {
-        base: 'vs-dark', // can also be vs-dark or hc-black
+        base: darkTheme ? 'vs-dark' : 'vs',
         inherit: true, // can also be false to completely replace the builtin rules
         rules: [
           { token: 'string.sql', foreground: '24b47e' },
           { token: 'comment', foreground: '666666' },
-          { token: 'predefined.sql', foreground: 'D4D4D4' },
+          { token: 'predefined.sql', foreground: '999999' },
         ],
         colors: {
-          'editor.background': darkTheme ? '#1f1f1f' : '#30313f',
+          'editor.background': darkTheme ? '#222222' : '#fbfcfd',
         },
       })
     }
-  }, [monaco])
+  }, [monaco, theme])
 
   return (
     <StoreProvider>
diff --git a/studio/pages/project/[ref]/editor/[id].tsx b/studio/pages/project/[ref]/editor/[id].tsx
index 38dced079e9..d897c547f1e 100644
--- a/studio/pages/project/[ref]/editor/[id].tsx
+++ b/studio/pages/project/[ref]/editor/[id].tsx
@@ -167,6 +167,7 @@ const TableEditorPage: NextPage = () => {
         onEditColumn={onEditColumn}
         onDeleteColumn={onDeleteColumn}
         onClosePanel={onClosePanel}
+        theme={ui.themeOption == 'dark' ? 'dark' : 'light'}
       />
       <ConfirmationModal
         danger