diff --git a/src-web/hooks/useGenerateThemeCss.ts b/src-web/hooks/useGenerateThemeCss.ts
index 0c209449..5484c018 100644
--- a/src-web/hooks/useGenerateThemeCss.ts
+++ b/src-web/hooks/useGenerateThemeCss.ts
@@ -1,5 +1,6 @@
 import { catppuccinMacchiato } from '../lib/theme/themes/catppuccin';
 import { githubLight } from '../lib/theme/themes/github';
+import { gruvboxDefault } from '../lib/theme/themes/gruvbox';
 import { hotdogStandDefault } from '../lib/theme/themes/hotdog-stand';
 import { monokaiProDefault } from '../lib/theme/themes/monokai-pro';
 import { rosePineDefault } from '../lib/theme/themes/rose-pine';
@@ -17,6 +18,7 @@ export function useGenerateThemeCss() {
       rosePineDefault,
       catppuccinMacchiato,
       githubLight,
+      gruvboxDefault,
       hotdogStandDefault,
     ]
       .map(getThemeCSS)
diff --git a/src-web/lib/theme/themes.ts b/src-web/lib/theme/themes.ts
index b909d685..9cd004b3 100644
--- a/src-web/lib/theme/themes.ts
+++ b/src-web/lib/theme/themes.ts
@@ -3,6 +3,7 @@ import { resolveAppearance } from './appearance';
 import { catppuccin } from './themes/catppuccin';
 import { dracula } from './themes/dracula';
 import { github } from './themes/github';
+import { gruvbox } from './themes/gruvbox';
 import { hotdogStand } from './themes/hotdog-stand';
 import { monokaiPro } from './themes/monokai-pro';
 import { nord } from './themes/nord';
@@ -22,8 +23,9 @@ const allThemes = [
   ...relaxing,
   ...rosePine,
   ...github,
+  ...gruvbox,
   ...monokaiPro,
-	...nord,
+  ...nord,
   ...moonlight,
   ...hotdogStand,
 ];
diff --git a/src-web/lib/theme/themes/gruvbox.ts b/src-web/lib/theme/themes/gruvbox.ts
new file mode 100644
index 00000000..4bef9e4c
--- /dev/null
+++ b/src-web/lib/theme/themes/gruvbox.ts
@@ -0,0 +1,29 @@
+import type { YaakTheme } from '../window';
+import { YaakColor } from '../yaakColor';
+
+export const gruvboxDefault: YaakTheme = {
+  id: 'gruvbox',
+  name: 'gruvbox',
+  surface: new YaakColor('#282828', 'dark'),             // Gruvbox bg
+  surfaceHighlight: new YaakColor('#3c3836', 'dark'),    // Gruvbox bg1
+  text: new YaakColor('#ebdbb2', 'dark'),                // Gruvbox fg
+  textSubtle: new YaakColor('#fe8019', 'dark'),          // Gruvbox orange
+  textSubtlest: new YaakColor('#665c54', 'dark'),        // Gruvbox bg4
+  primary: new YaakColor('#d3869b', 'dark'),             // Gruvbox purple
+  secondary: new YaakColor('#83a598', 'dark'),           // Gruvbox blue
+  info: new YaakColor('#8ec07c', 'dark'),                // Gruvbox aqua
+  success: new YaakColor('#b8bb26', 'dark'),             // Gruvbox green
+  notice: new YaakColor('#fabd2f', 'dark'),              // Gruvbox yellow
+  warning: new YaakColor('#fe8019', 'dark'),             // Gruvbox orange
+  danger: new YaakColor('#fb4934', 'dark'),              // Gruvbox red
+  components: {
+    sidebar: {
+      backdrop: new YaakColor('#282828', 'dark'),        // Gruvbox bg
+    },
+    appHeader: {
+      backdrop: new YaakColor('#3c3836', 'dark'),        // Gruvbox bg1
+    },
+  },
+};
+
+export const gruvbox = [gruvboxDefault];