diff --git a/apps/web/src/pods/toolbar/toolbar.pod.module.css b/apps/web/src/pods/toolbar/toolbar.pod.module.css
index 6cda259e..e3969bcf 100644
--- a/apps/web/src/pods/toolbar/toolbar.pod.module.css
+++ b/apps/web/src/pods/toolbar/toolbar.pod.module.css
@@ -56,6 +56,11 @@
   color: var(--pure-white);
 }
 
+.vscode .button:hover {
+  background-color: var(--primary-700);
+  color: var(--primary-200);
+}
+
 .button:disabled {
   color: var(--primary-300);
   cursor: not-allowed;
@@ -64,3 +69,7 @@
 .button:disabled:hover {
   background-color: inherit;
 }
+
+.vscode .button:disabled:hover {
+  color: var(--text-color);
+}
diff --git a/apps/web/src/pods/toolbar/toolbar.pod.tsx b/apps/web/src/pods/toolbar/toolbar.pod.tsx
index d42df49c..c92bf61f 100644
--- a/apps/web/src/pods/toolbar/toolbar.pod.tsx
+++ b/apps/web/src/pods/toolbar/toolbar.pod.tsx
@@ -21,7 +21,9 @@ export const ToolbarPod: React.FC = () => {
   const isEditMode = interactionMode === 'edit';
   const isVSCode = isVSCodeEnv();
   return (
-    <header className={classes.container}>
+    <header
+      className={`${classes.container} ${isVSCode ? classes.vscode : ''}`}
+    >
       {(isEditMode || !isVSCode) && (
         <ul className={classes.buttonGroup}>
           {isEditMode && (