diff --git a/.vscode/settings.json b/.vscode/settings.json
index abb40e74b7..e55e3c19b7 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -83,5 +83,11 @@
   },
   "[jsonc]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[css]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[scss]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
   }
 }
diff --git a/package-lock.json b/package-lock.json
index d12f6651fe..adee8be208 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7399,32 +7399,27 @@
         }
       }
     },
-    "node_modules/@radix-ui/react-popover": {
-      "version": "1.0.7",
-      "license": "MIT",
+    "node_modules/@radix-ui/react-menubar": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-menubar/-/react-menubar-1.1.1.tgz",
+      "integrity": "sha512-V05Hryq/BE2m+rs8d5eLfrS0jmSWSDHEbG7jEyLA5D5J9jTvWj/o3v3xDN9YsOlH6QIkJgiaNDaP+S4T1rdykw==",
       "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/primitive": "1.0.1",
-        "@radix-ui/react-compose-refs": "1.0.1",
-        "@radix-ui/react-context": "1.0.1",
-        "@radix-ui/react-dismissable-layer": "1.0.5",
-        "@radix-ui/react-focus-guards": "1.0.1",
-        "@radix-ui/react-focus-scope": "1.0.4",
-        "@radix-ui/react-id": "1.0.1",
-        "@radix-ui/react-popper": "1.1.3",
-        "@radix-ui/react-portal": "1.0.4",
-        "@radix-ui/react-presence": "1.0.1",
-        "@radix-ui/react-primitive": "1.0.3",
-        "@radix-ui/react-slot": "1.0.2",
-        "@radix-ui/react-use-controllable-state": "1.0.1",
-        "aria-hidden": "^1.1.1",
-        "react-remove-scroll": "2.5.5"
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-collection": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-menu": "2.1.1",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-roving-focus": "1.1.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0"
       },
       "peerDependencies": {
         "@types/react": "*",
         "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
       },
       "peerDependenciesMeta": {
         "@types/react": {
@@ -7435,27 +7430,23 @@
         }
       }
     },
-    "node_modules/@radix-ui/react-popper": {
-      "version": "1.1.3",
-      "license": "MIT",
+    "node_modules/@radix-ui/react-menubar/node_modules/@radix-ui/primitive": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.0.tgz",
+      "integrity": "sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA=="
+    },
+    "node_modules/@radix-ui/react-menubar/node_modules/@radix-ui/react-arrow": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.0.tgz",
+      "integrity": "sha512-FmlW1rCg7hBpEBwFbjHwCW6AmWLQM6g/v0Sn8XbP9NvmSZ2San1FpQeyPtufzOMSIx7Y4dzjlHoifhp+7NkZhw==",
       "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@floating-ui/react-dom": "^2.0.0",
-        "@radix-ui/react-arrow": "1.0.3",
-        "@radix-ui/react-compose-refs": "1.0.1",
-        "@radix-ui/react-context": "1.0.1",
-        "@radix-ui/react-primitive": "1.0.3",
-        "@radix-ui/react-use-callback-ref": "1.0.1",
-        "@radix-ui/react-use-layout-effect": "1.0.1",
-        "@radix-ui/react-use-rect": "1.0.1",
-        "@radix-ui/react-use-size": "1.0.1",
-        "@radix-ui/rect": "1.0.1"
+        "@radix-ui/react-primitive": "2.0.0"
       },
       "peerDependencies": {
         "@types/react": "*",
         "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
       },
       "peerDependenciesMeta": {
         "@types/react": {
@@ -7466,18 +7457,21 @@
         }
       }
     },
-    "node_modules/@radix-ui/react-portal": {
-      "version": "1.0.4",
-      "license": "MIT",
+    "node_modules/@radix-ui/react-menubar/node_modules/@radix-ui/react-collection": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.0.tgz",
+      "integrity": "sha512-GZsZslMJEyo1VKm5L1ZJY8tGDxZNPAoUeQUIbKeJfoi7Q4kmig5AsgLMYYuyYbfjd8fBmFORAIwYAkXMnXZgZw==",
       "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-primitive": "1.0.3"
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-slot": "1.1.0"
       },
       "peerDependencies": {
         "@types/react": "*",
         "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
       },
       "peerDependenciesMeta": {
         "@types/react": {
@@ -7488,41 +7482,64 @@
         }
       }
     },
-    "node_modules/@radix-ui/react-presence": {
-      "version": "1.0.1",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-compose-refs": "1.0.1",
-        "@radix-ui/react-use-layout-effect": "1.0.1"
+    "node_modules/@radix-ui/react-menubar/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz",
+      "integrity": "sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
       },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menubar/node_modules/@radix-ui/react-context": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.0.tgz",
+      "integrity": "sha512-OKrckBy+sMEgYM/sMmqmErVn0kZqrHPJze+Ql3DzYsDDp0hl0L62nx/2122/Bvps1qz645jlcu2tD9lrRSdf8A==",
       "peerDependencies": {
         "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
       },
       "peerDependenciesMeta": {
         "@types/react": {
           "optional": true
-        },
-        "@types/react-dom": {
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menubar/node_modules/@radix-ui/react-direction": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.0.tgz",
+      "integrity": "sha512-BUuBvgThEiAXh2DWu93XsT+a3aWrGqolGlqqw5VU1kG7p/ZH2cuDlM1sRLNnY3QcBS69UIz2mcKhMxDsdewhjg==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
           "optional": true
         }
       }
     },
-    "node_modules/@radix-ui/react-primitive": {
-      "version": "1.0.3",
-      "license": "MIT",
+    "node_modules/@radix-ui/react-menubar/node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.0.tgz",
+      "integrity": "sha512-/UovfmmXGptwGcBQawLzvn2jOfM0t4z3/uKffoBlj724+n3FvBbZ7M0aaBOmkp6pqFYpO4yx8tSVJjx3Fl2jig==",
       "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-slot": "1.0.2"
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-escape-keydown": "1.1.0"
       },
       "peerDependencies": {
         "@types/react": "*",
         "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
       },
       "peerDependenciesMeta": {
         "@types/react": {
@@ -7533,50 +7550,34 @@
         }
       }
     },
-    "node_modules/@radix-ui/react-progress": {
-      "version": "1.0.3",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-context": "1.0.1",
-        "@radix-ui/react-primitive": "1.0.3"
-      },
+    "node_modules/@radix-ui/react-menubar/node_modules/@radix-ui/react-focus-guards": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.0.tgz",
+      "integrity": "sha512-w6XZNUPVv6xCpZUqb/yN9DL6auvpGX3C/ee6Hdi16v2UUy25HV2Q5bcflsiDyT/g5RwbPQ/GIT1vLkeRb+ITBw==",
       "peerDependencies": {
         "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
       },
       "peerDependenciesMeta": {
         "@types/react": {
           "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
         }
       }
     },
-    "node_modules/@radix-ui/react-radio-group": {
-      "version": "1.1.3",
-      "license": "MIT",
+    "node_modules/@radix-ui/react-menubar/node_modules/@radix-ui/react-focus-scope": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.0.tgz",
+      "integrity": "sha512-200UD8zylvEyL8Bx+z76RJnASR2gRMuxlgFCPAe/Q/679a/r0eK3MBVYMb7vZODZcffZBdob1EGnky78xmVvcA==",
       "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/primitive": "1.0.1",
-        "@radix-ui/react-compose-refs": "1.0.1",
-        "@radix-ui/react-context": "1.0.1",
-        "@radix-ui/react-direction": "1.0.1",
-        "@radix-ui/react-presence": "1.0.1",
-        "@radix-ui/react-primitive": "1.0.3",
-        "@radix-ui/react-roving-focus": "1.0.4",
-        "@radix-ui/react-use-controllable-state": "1.0.1",
-        "@radix-ui/react-use-previous": "1.0.1",
-        "@radix-ui/react-use-size": "1.0.1"
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0"
       },
       "peerDependencies": {
         "@types/react": "*",
         "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
       },
       "peerDependenciesMeta": {
         "@types/react": {
@@ -7587,68 +7588,52 @@
         }
       }
     },
-    "node_modules/@radix-ui/react-roving-focus": {
-      "version": "1.0.4",
-      "license": "MIT",
+    "node_modules/@radix-ui/react-menubar/node_modules/@radix-ui/react-id": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.0.tgz",
+      "integrity": "sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==",
       "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/primitive": "1.0.1",
-        "@radix-ui/react-collection": "1.0.3",
-        "@radix-ui/react-compose-refs": "1.0.1",
-        "@radix-ui/react-context": "1.0.1",
-        "@radix-ui/react-direction": "1.0.1",
-        "@radix-ui/react-id": "1.0.1",
-        "@radix-ui/react-primitive": "1.0.3",
-        "@radix-ui/react-use-callback-ref": "1.0.1",
-        "@radix-ui/react-use-controllable-state": "1.0.1"
+        "@radix-ui/react-use-layout-effect": "1.1.0"
       },
       "peerDependencies": {
         "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
       },
       "peerDependenciesMeta": {
         "@types/react": {
           "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
         }
       }
     },
-    "node_modules/@radix-ui/react-select": {
-      "version": "2.0.0",
-      "license": "MIT",
+    "node_modules/@radix-ui/react-menubar/node_modules/@radix-ui/react-menu": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.1.1.tgz",
+      "integrity": "sha512-oa3mXRRVjHi6DZu/ghuzdylyjaMXLymx83irM7hTxutQbD+7IhPKdMdRHD26Rm+kHRrWcrUkkRPv5pd47a2xFQ==",
       "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/number": "1.0.1",
-        "@radix-ui/primitive": "1.0.1",
-        "@radix-ui/react-collection": "1.0.3",
-        "@radix-ui/react-compose-refs": "1.0.1",
-        "@radix-ui/react-context": "1.0.1",
-        "@radix-ui/react-direction": "1.0.1",
-        "@radix-ui/react-dismissable-layer": "1.0.5",
-        "@radix-ui/react-focus-guards": "1.0.1",
-        "@radix-ui/react-focus-scope": "1.0.4",
-        "@radix-ui/react-id": "1.0.1",
-        "@radix-ui/react-popper": "1.1.3",
-        "@radix-ui/react-portal": "1.0.4",
-        "@radix-ui/react-primitive": "1.0.3",
-        "@radix-ui/react-slot": "1.0.2",
-        "@radix-ui/react-use-callback-ref": "1.0.1",
-        "@radix-ui/react-use-controllable-state": "1.0.1",
-        "@radix-ui/react-use-layout-effect": "1.0.1",
-        "@radix-ui/react-use-previous": "1.0.1",
-        "@radix-ui/react-visually-hidden": "1.0.3",
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-collection": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-dismissable-layer": "1.1.0",
+        "@radix-ui/react-focus-guards": "1.1.0",
+        "@radix-ui/react-focus-scope": "1.1.0",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-popper": "1.2.0",
+        "@radix-ui/react-portal": "1.1.1",
+        "@radix-ui/react-presence": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-roving-focus": "1.1.0",
+        "@radix-ui/react-slot": "1.1.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
         "aria-hidden": "^1.1.1",
-        "react-remove-scroll": "2.5.5"
+        "react-remove-scroll": "2.5.7"
       },
       "peerDependencies": {
         "@types/react": "*",
         "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
       },
       "peerDependenciesMeta": {
         "@types/react": {
@@ -7659,18 +7644,27 @@
         }
       }
     },
-    "node_modules/@radix-ui/react-separator": {
-      "version": "1.0.3",
-      "license": "MIT",
+    "node_modules/@radix-ui/react-menubar/node_modules/@radix-ui/react-popper": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.0.tgz",
+      "integrity": "sha512-ZnRMshKF43aBxVWPWvbj21+7TQCvhuULWJ4gNIKYpRlQt5xGRhLx66tMp8pya2UkGHTSlhpXwmjqltDYHhw7Vg==",
       "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-primitive": "1.0.3"
+        "@floating-ui/react-dom": "^2.0.0",
+        "@radix-ui/react-arrow": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0",
+        "@radix-ui/react-use-rect": "1.1.0",
+        "@radix-ui/react-use-size": "1.1.0",
+        "@radix-ui/rect": "1.1.0"
       },
       "peerDependencies": {
         "@types/react": "*",
         "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
       },
       "peerDependenciesMeta": {
         "@types/react": {
@@ -7681,28 +7675,19 @@
         }
       }
     },
-    "node_modules/@radix-ui/react-slider": {
-      "version": "1.1.2",
-      "license": "MIT",
+    "node_modules/@radix-ui/react-menubar/node_modules/@radix-ui/react-portal": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.1.tgz",
+      "integrity": "sha512-A3UtLk85UtqhzFqtoC8Q0KvR2GbXF3mtPgACSazajqq6A41mEQgo53iPzY4i6BwDxlIFqWIhiQ2G729n+2aw/g==",
       "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/number": "1.0.1",
-        "@radix-ui/primitive": "1.0.1",
-        "@radix-ui/react-collection": "1.0.3",
-        "@radix-ui/react-compose-refs": "1.0.1",
-        "@radix-ui/react-context": "1.0.1",
-        "@radix-ui/react-direction": "1.0.1",
-        "@radix-ui/react-primitive": "1.0.3",
-        "@radix-ui/react-use-controllable-state": "1.0.1",
-        "@radix-ui/react-use-layout-effect": "1.0.1",
-        "@radix-ui/react-use-previous": "1.0.1",
-        "@radix-ui/react-use-size": "1.0.1"
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
       },
       "peerDependencies": {
         "@types/react": "*",
         "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
       },
       "peerDependenciesMeta": {
         "@types/react": {
@@ -7713,35 +7698,243 @@
         }
       }
     },
-    "node_modules/@radix-ui/react-slot": {
-      "version": "1.0.2",
-      "license": "MIT",
+    "node_modules/@radix-ui/react-menubar/node_modules/@radix-ui/react-presence": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.0.tgz",
+      "integrity": "sha512-Gq6wuRN/asf9H/E/VzdKoUtT8GC9PQc9z40/vEr0VCJ4u5XvvhWIrSsCB6vD2/cH7ugTdSfYq9fLJCcM00acrQ==",
       "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-compose-refs": "1.0.1"
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
       },
       "peerDependencies": {
         "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0"
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
       },
       "peerDependenciesMeta": {
         "@types/react": {
           "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
         }
       }
     },
-    "node_modules/@radix-ui/react-switch": {
-      "version": "1.0.3",
+    "node_modules/@radix-ui/react-menubar/node_modules/@radix-ui/react-primitive": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz",
+      "integrity": "sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menubar/node_modules/@radix-ui/react-roving-focus": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.0.tgz",
+      "integrity": "sha512-EA6AMGeq9AEeQDeSH0aZgG198qkfHSbvWTf1HvoDmOB5bBG/qTxjYMWUKMnYiV6J/iP/J8MEFSuB2zRU2n7ODA==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-collection": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menubar/node_modules/@radix-ui/react-slot": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz",
+      "integrity": "sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menubar/node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz",
+      "integrity": "sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menubar/node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.1.0.tgz",
+      "integrity": "sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==",
+      "dependencies": {
+        "@radix-ui/react-use-callback-ref": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menubar/node_modules/@radix-ui/react-use-escape-keydown": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.0.tgz",
+      "integrity": "sha512-L7vwWlR1kTTQ3oh7g1O0CBF3YCyyTj8NmhLR+phShpyA50HCfBFKVJTpshm9PzLiKmehsrQzTYTpX9HvmC9rhw==",
+      "dependencies": {
+        "@radix-ui/react-use-callback-ref": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menubar/node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.0.tgz",
+      "integrity": "sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menubar/node_modules/@radix-ui/react-use-rect": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.0.tgz",
+      "integrity": "sha512-0Fmkebhr6PiseyZlYAOtLS+nb7jLmpqTrJyv61Pe68MKYW6OWdRE2kI70TaYY27u7H0lajqM3hSMMLFq18Z7nQ==",
+      "dependencies": {
+        "@radix-ui/rect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menubar/node_modules/@radix-ui/react-use-size": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.0.tgz",
+      "integrity": "sha512-XW3/vWuIXHa+2Uwcc2ABSfcCledmXhhQPlGbfcRXbiUQI5Icjcg19BGCZVKKInYbvUCut/ufbbLLPFC5cbb1hw==",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menubar/node_modules/@radix-ui/rect": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.1.0.tgz",
+      "integrity": "sha512-A9+lCBZoaMJlVKcRBz2YByCG+Cp2t6nAnMnNba+XiWxnj6r4JUFqfsgwocMBZU9LPtdxC6wB56ySYpc7LQIoJg=="
+    },
+    "node_modules/@radix-ui/react-menubar/node_modules/react-remove-scroll": {
+      "version": "2.5.7",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.7.tgz",
+      "integrity": "sha512-FnrTWO4L7/Bhhf3CYBNArEG/yROV0tKmTv7/3h9QCFvH6sndeFf1wPqOcbFVu5VAulS5dV1wGT3GZZ/1GawqiA==",
+      "dependencies": {
+        "react-remove-scroll-bar": "^2.3.4",
+        "react-style-singleton": "^2.2.1",
+        "tslib": "^2.1.0",
+        "use-callback-ref": "^1.3.0",
+        "use-sidecar": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popover": {
+      "version": "1.0.7",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.13.10",
         "@radix-ui/primitive": "1.0.1",
         "@radix-ui/react-compose-refs": "1.0.1",
         "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-dismissable-layer": "1.0.5",
+        "@radix-ui/react-focus-guards": "1.0.1",
+        "@radix-ui/react-focus-scope": "1.0.4",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-popper": "1.1.3",
+        "@radix-ui/react-portal": "1.0.4",
+        "@radix-ui/react-presence": "1.0.1",
         "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-slot": "1.0.2",
         "@radix-ui/react-use-controllable-state": "1.0.1",
-        "@radix-ui/react-use-previous": "1.0.1",
-        "@radix-ui/react-use-size": "1.0.1"
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "2.5.5"
       },
       "peerDependencies": {
         "@types/react": "*",
@@ -7758,19 +7951,66 @@
         }
       }
     },
-    "node_modules/@radix-ui/react-tabs": {
-      "version": "1.0.4",
+    "node_modules/@radix-ui/react-popper": {
+      "version": "1.1.3",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.13.10",
-        "@radix-ui/primitive": "1.0.1",
+        "@floating-ui/react-dom": "^2.0.0",
+        "@radix-ui/react-arrow": "1.0.3",
+        "@radix-ui/react-compose-refs": "1.0.1",
         "@radix-ui/react-context": "1.0.1",
-        "@radix-ui/react-direction": "1.0.1",
-        "@radix-ui/react-id": "1.0.1",
-        "@radix-ui/react-presence": "1.0.1",
         "@radix-ui/react-primitive": "1.0.3",
-        "@radix-ui/react-roving-focus": "1.0.4",
-        "@radix-ui/react-use-controllable-state": "1.0.1"
+        "@radix-ui/react-use-callback-ref": "1.0.1",
+        "@radix-ui/react-use-layout-effect": "1.0.1",
+        "@radix-ui/react-use-rect": "1.0.1",
+        "@radix-ui/react-use-size": "1.0.1",
+        "@radix-ui/rect": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-portal": {
+      "version": "1.0.4",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-primitive": "1.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-presence": {
+      "version": "1.0.1",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-use-layout-effect": "1.0.1"
       },
       "peerDependencies": {
         "@types/react": "*",
@@ -7787,6 +8027,626 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-primitive": {
+      "version": "1.0.3",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-slot": "1.0.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-progress": {
+      "version": "1.0.3",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-radio-group": {
+      "version": "1.1.3",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-direction": "1.0.1",
+        "@radix-ui/react-presence": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-roving-focus": "1.0.4",
+        "@radix-ui/react-use-controllable-state": "1.0.1",
+        "@radix-ui/react-use-previous": "1.0.1",
+        "@radix-ui/react-use-size": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-roving-focus": {
+      "version": "1.0.4",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-collection": "1.0.3",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-direction": "1.0.1",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-callback-ref": "1.0.1",
+        "@radix-ui/react-use-controllable-state": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-select": {
+      "version": "2.0.0",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/number": "1.0.1",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-collection": "1.0.3",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-direction": "1.0.1",
+        "@radix-ui/react-dismissable-layer": "1.0.5",
+        "@radix-ui/react-focus-guards": "1.0.1",
+        "@radix-ui/react-focus-scope": "1.0.4",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-popper": "1.1.3",
+        "@radix-ui/react-portal": "1.0.4",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-slot": "1.0.2",
+        "@radix-ui/react-use-callback-ref": "1.0.1",
+        "@radix-ui/react-use-controllable-state": "1.0.1",
+        "@radix-ui/react-use-layout-effect": "1.0.1",
+        "@radix-ui/react-use-previous": "1.0.1",
+        "@radix-ui/react-visually-hidden": "1.0.3",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "2.5.5"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-separator": {
+      "version": "1.0.3",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-primitive": "1.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slider": {
+      "version": "1.1.2",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/number": "1.0.1",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-collection": "1.0.3",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-direction": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-controllable-state": "1.0.1",
+        "@radix-ui/react-use-layout-effect": "1.0.1",
+        "@radix-ui/react-use-previous": "1.0.1",
+        "@radix-ui/react-use-size": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slot": {
+      "version": "1.0.2",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-switch": {
+      "version": "1.0.3",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-controllable-state": "1.0.1",
+        "@radix-ui/react-use-previous": "1.0.1",
+        "@radix-ui/react-use-size": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tabs": {
+      "version": "1.0.4",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-direction": "1.0.1",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-presence": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-roving-focus": "1.0.4",
+        "@radix-ui/react-use-controllable-state": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toggle": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle/-/react-toggle-1.1.0.tgz",
+      "integrity": "sha512-gwoxaKZ0oJ4vIgzsfESBuSgJNdc0rv12VhHgcqN0TEJmmZixXG/2XpsLK8kzNWYcnaoRIEEQc0bEi3dIvdUpjw==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toggle-group": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle-group/-/react-toggle-group-1.1.0.tgz",
+      "integrity": "sha512-PpTJV68dZU2oqqgq75Uzto5o/XfOVgkrJ9rulVmfTKxWp3HfUjHE6CP/WLRR4AzPX9HWxw7vFow2me85Yu+Naw==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-roving-focus": "1.1.0",
+        "@radix-ui/react-toggle": "1.1.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toggle-group/node_modules/@radix-ui/primitive": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.0.tgz",
+      "integrity": "sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA=="
+    },
+    "node_modules/@radix-ui/react-toggle-group/node_modules/@radix-ui/react-collection": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.0.tgz",
+      "integrity": "sha512-GZsZslMJEyo1VKm5L1ZJY8tGDxZNPAoUeQUIbKeJfoi7Q4kmig5AsgLMYYuyYbfjd8fBmFORAIwYAkXMnXZgZw==",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-slot": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toggle-group/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz",
+      "integrity": "sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toggle-group/node_modules/@radix-ui/react-context": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.0.tgz",
+      "integrity": "sha512-OKrckBy+sMEgYM/sMmqmErVn0kZqrHPJze+Ql3DzYsDDp0hl0L62nx/2122/Bvps1qz645jlcu2tD9lrRSdf8A==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toggle-group/node_modules/@radix-ui/react-direction": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.0.tgz",
+      "integrity": "sha512-BUuBvgThEiAXh2DWu93XsT+a3aWrGqolGlqqw5VU1kG7p/ZH2cuDlM1sRLNnY3QcBS69UIz2mcKhMxDsdewhjg==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toggle-group/node_modules/@radix-ui/react-id": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.0.tgz",
+      "integrity": "sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toggle-group/node_modules/@radix-ui/react-primitive": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz",
+      "integrity": "sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toggle-group/node_modules/@radix-ui/react-roving-focus": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.0.tgz",
+      "integrity": "sha512-EA6AMGeq9AEeQDeSH0aZgG198qkfHSbvWTf1HvoDmOB5bBG/qTxjYMWUKMnYiV6J/iP/J8MEFSuB2zRU2n7ODA==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-collection": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toggle-group/node_modules/@radix-ui/react-slot": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz",
+      "integrity": "sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toggle-group/node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz",
+      "integrity": "sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toggle-group/node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.1.0.tgz",
+      "integrity": "sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==",
+      "dependencies": {
+        "@radix-ui/react-use-callback-ref": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toggle-group/node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.0.tgz",
+      "integrity": "sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toggle/node_modules/@radix-ui/primitive": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.0.tgz",
+      "integrity": "sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA=="
+    },
+    "node_modules/@radix-ui/react-toggle/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz",
+      "integrity": "sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toggle/node_modules/@radix-ui/react-primitive": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz",
+      "integrity": "sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toggle/node_modules/@radix-ui/react-slot": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz",
+      "integrity": "sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toggle/node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz",
+      "integrity": "sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toggle/node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.1.0.tgz",
+      "integrity": "sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==",
+      "dependencies": {
+        "@radix-ui/react-use-callback-ref": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-tooltip": {
       "version": "1.0.7",
       "license": "MIT",
@@ -26887,6 +27747,7 @@
         "@radix-ui/react-dropdown-menu": "^2.0.6",
         "@radix-ui/react-icons": "^1.3.0",
         "@radix-ui/react-label": "^2.0.2",
+        "@radix-ui/react-menubar": "^1.1.1",
         "@radix-ui/react-popover": "^1.0.7",
         "@radix-ui/react-progress": "^1.0.3",
         "@radix-ui/react-radio-group": "^1.1.3",
@@ -26896,6 +27757,8 @@
         "@radix-ui/react-slot": "^1.0.2",
         "@radix-ui/react-switch": "^1.0.3",
         "@radix-ui/react-tabs": "^1.0.4",
+        "@radix-ui/react-toggle": "^1.1.0",
+        "@radix-ui/react-toggle-group": "^1.1.0",
         "@radix-ui/react-tooltip": "^1.0.7",
         "@sentry/react": "^7.108.0",
         "@sentry/vite-plugin": "^2.15.0",
diff --git a/quadratic-client/index.html b/quadratic-client/index.html
index df7252c357..d1ca8862aa 100644
--- a/quadratic-client/index.html
+++ b/quadratic-client/index.html
@@ -27,6 +27,12 @@
     <meta name="twitter:description" content="Modern spreadsheet software." />
     <meta name="twitter:image" content="https://app.quadratichq.com/images/social.png" />
 
+    <!-- Material symbols font -->
+    <link
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..24,400,0,0&display=block"
+      rel="stylesheet"
+    />
+
     <!-- Google Tag Manager -->
     <script>
       (function (w, d, s, l, i) {
@@ -44,6 +50,7 @@
   </head>
   <body>
     <!-- Google Tag Manager (noscript) -->
+    <!-- prettier-ignore -->
     <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WVC2XPB3" crossorigin="anonymous"
     height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
     <!-- End Google Tag Manager (noscript) -->
diff --git a/quadratic-client/package.json b/quadratic-client/package.json
index 39de355e7f..d1ddff2d37 100644
--- a/quadratic-client/package.json
+++ b/quadratic-client/package.json
@@ -29,6 +29,7 @@
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-menubar": "^1.1.1",
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-progress": "^1.0.3",
     "@radix-ui/react-radio-group": "^1.1.3",
@@ -38,6 +39,8 @@
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tabs": "^1.0.4",
+    "@radix-ui/react-toggle": "^1.1.0",
+    "@radix-ui/react-toggle-group": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.0.7",
     "@sentry/react": "^7.108.0",
     "@sentry/vite-plugin": "^2.15.0",
diff --git a/quadratic-client/src/app/actions.ts b/quadratic-client/src/app/actions.ts
index 5f6ea9aa97..90cd486f7e 100644
--- a/quadratic-client/src/app/actions.ts
+++ b/quadratic-client/src/app/actions.ts
@@ -1,13 +1,8 @@
 import { EditorInteractionState } from '@/app/atoms/editorInteractionStateAtom';
-import { sheets } from '@/app/grid/controller/Sheets';
-import { downloadFile, downloadQuadraticFile } from '@/app/helpers/downloadFileInBrowser';
-import { FileContextType } from '@/app/ui/components/FileProvider';
-import { quadraticCore } from '@/app/web-workers/quadraticCore/quadraticCore';
 import { getActionFileDuplicate } from '@/routes/api.files.$uuid';
 import { apiClient } from '@/shared/api/apiClient';
 import { GlobalSnackbar } from '@/shared/components/GlobalSnackbarProvider';
 import { ROUTES } from '@/shared/constants/routes';
-import { DOCUMENTATION_URL } from '@/shared/constants/urls';
 import { ApiTypes, FilePermission, FilePermissionSchema, TeamPermission } from 'quadratic-shared/typesAndSchemas';
 import { SubmitFunction } from 'react-router-dom';
 import { SetterOrUpdater } from 'recoil';
@@ -63,7 +58,7 @@ export const hasPermissionToEditFile = (filePermissions: FilePermission[]) => fi
 // They are shared between actions here and command palette actions
 export const isAvailableBecauseCanEditFile = ({ filePermissions }: IsAvailableArgs) =>
   hasPermissionToEditFile(filePermissions);
-const isAvailableBecauseLoggedIn = ({ isAuthenticated }: IsAvailableArgs) => isAuthenticated;
+export const isAvailableBecauseLoggedIn = ({ isAuthenticated }: IsAvailableArgs) => isAuthenticated;
 export const isAvailableBecauseFileLocationIsAccessibleAndWriteable = ({
   fileTeamPrivacy,
   teamPermissions,
@@ -77,11 +72,6 @@ export const createNewFileAction = {
   },
 };
 
-export const renameFileAction = {
-  label: 'Rename',
-  isAvailable: isAvailableBecauseCanEditFile,
-};
-
 export const duplicateFileAction = {
   label: 'Duplicate',
   isAvailable: isAvailableBecauseFileLocationIsAccessibleAndWriteable,
@@ -91,14 +81,6 @@ export const duplicateFileAction = {
   },
 };
 
-export const downloadFileAction = {
-  label: 'Download',
-  isAvailable: isAvailableBecauseLoggedIn,
-  async run({ name }: { name: FileContextType['name'] }) {
-    downloadQuadraticFile(name, await quadraticCore.export());
-  },
-};
-
 export const deleteFile = {
   label: 'Delete',
   isAvailable: ({ filePermissions }: IsAvailableArgs) => filePermissions.includes(FILE_DELETE),
@@ -123,47 +105,6 @@ export const provideFeedbackAction = {
   },
 };
 
-export const viewDocsAction = {
-  label: 'Docs',
-  run() {
-    window.open(DOCUMENTATION_URL, '_blank')?.focus();
-  },
-};
-
-export const cutAction = {
-  label: 'Cut',
-  isAvailable: isAvailableBecauseCanEditFile,
-};
-
-export const pasteAction = {
-  label: 'Paste',
-  isAvailable: isAvailableBecauseCanEditFile,
-};
-
-export const pasteActionValues = {
-  label: 'Paste values only',
-  isAvailable: isAvailableBecauseCanEditFile,
-};
-
-export const pasteActionFormats = {
-  label: 'Paste formats only',
-  isAvailable: isAvailableBecauseCanEditFile,
-};
-
-export const undoAction = {
-  label: 'Undo',
-  isAvailable: isAvailableBecauseCanEditFile,
-};
-
-export const redoAction = {
-  label: 'Redo',
-  isAvailable: isAvailableBecauseCanEditFile,
-};
-
-export const copyAction = {
-  label: 'Copy',
-};
-
 export const rerunCellAction = {
   label: 'Run this code cell',
   isAvailable: isAvailableBecauseCanEditFile,
@@ -179,25 +120,11 @@ export const rerunSheetAction = {
   isAvailable: isAvailableBecauseCanEditFile,
 };
 
-export const downloadSelectionAsCsvAction = {
-  label: 'Download selection as CSV',
-  async run({ fileName }: { fileName: string }) {
-    downloadFile(fileName, await quadraticCore.exportCsvSelection(sheets.getRustSelection()), 'text/plain', 'csv');
-  },
-};
-
 export const dataValidations = {
   label: 'Data Validations',
   isAvailable: isAvailableBecauseCanEditFile,
 };
 
-export const findInSheet = {
-  label: 'Find in current sheet',
-};
-export const findInSheets = {
-  label: 'Find in all sheets',
-};
-
 export const resizeColumnAction = {
   label: 'Resize column to fit data',
   isAvailable: isAvailableBecauseCanEditFile,
diff --git a/quadratic-client/src/app/actions/actions.ts b/quadratic-client/src/app/actions/actions.ts
new file mode 100644
index 0000000000..b53db3a84e
--- /dev/null
+++ b/quadratic-client/src/app/actions/actions.ts
@@ -0,0 +1,128 @@
+export enum Action {
+  FileDownload = 'file_download',
+  FileShare = 'file_share',
+  FileRename = 'file_rename',
+  InsertCodePython = 'insert_code_python',
+  InsertCodeJavascript = 'insert_code_javascript',
+  InsertCodeFormula = 'insert_code_formula',
+  InsertSheet = 'insert_sheet',
+  InsertChartPython = 'insert_chart_python',
+  InsertChartJavascript = 'insert_chart_javascript',
+  InsertApiRequestJavascript = 'insert_api_request_javascript',
+  InsertApiRequestPython = 'insert_api_request_python',
+  InsertCheckbox = 'insert_checkbox',
+  InsertDropdown = 'insert_dropdown',
+  ToggleDataValidation = 'toggle_data_validation',
+  Copy = 'copy',
+  Cut = 'cut',
+  Paste = 'paste',
+  PasteValuesOnly = 'paste_values_only',
+  PasteFormattingOnly = 'paste_formatting_only',
+  FindInCurrentSheet = 'find_in_current_sheet',
+  FindInAllSheets = 'find_in_all_sheets',
+  HelpContactUs = 'help_contact_us',
+  HelpDocs = 'help_docs',
+  HelpFeedback = 'help_feedback',
+  FormatAlignHorizontalCenter = 'format_align_horizontal_center',
+  FormatAlignHorizontalLeft = 'format_align_horizontal_left',
+  FormatAlignHorizontalRight = 'format_align_horizontal_right',
+  FormatAlignVerticalBottom = 'format_align_vertical_bottom',
+  FormatAlignVerticalMiddle = 'format_align_vertical_middle',
+  FormatAlignVerticalTop = 'format_align_vertical_top',
+  FormatNumberAutomatic = 'format_number_automatic',
+  FormatNumberCurrency = 'format_number_currency',
+  FormatNumberDecimalDecrease = 'format_number_decimal_decrease',
+  FormatNumberDecimalIncrease = 'format_number_decimal_increase',
+  FormatNumberPercent = 'format_number_percent',
+  FormatNumberScientific = 'format_number_scientific',
+  FormatNumberToggleCommas = 'format_number_toggle_commas',
+  FormatDateTime = 'format_date_time',
+  FormatTextWrapClip = 'format_text_wrap_clip',
+  FormatTextWrapOverflow = 'format_text_wrap_overflow',
+  FormatTextWrapWrap = 'format_text_wrap_wrap',
+  FormatTextColor = 'format_text_color',
+  FormatFillColor = 'format_fill_color',
+  FormatBorderAll = 'format_border_all',
+  FormatBorderOuter = 'format_border_outer',
+  FormatBorderInner = 'format_border_inner',
+  FormatBorderVertical = 'format_border_vertical',
+  FormatBorderHorizontal = 'format_border_horizontal',
+  FormatBorderLeft = 'format_border_left',
+  FormatBorderRight = 'format_border_right',
+  FormatBorderTop = 'format_border_top',
+  FormatBorderBottom = 'format_border_bottom',
+  FormatBorderClear = 'format_border_clear',
+  FormatBorderLine1 = 'format_border_line1',
+  FormatBorderLine2 = 'format_border_line2',
+  FormatBorderLine3 = 'format_border_line3',
+  FormatBorderDashed = 'format_border_dashed',
+  FormatBorderDotted = 'format_border_dotted',
+  FormatBorderDouble = 'format_border_double',
+  FormatBorderColor = 'format_border_color',
+  GridPanMode = 'grid_pan_mode',
+  ShowCommandPalette = 'show_command_palette',
+  TogglePresentationMode = 'toggle_presentation_mode',
+  CloseOverlay = 'close_overlay',
+  ShowGoToMenu = 'show_go_to_menu',
+  ZoomIn = 'zoom_in',
+  ZoomOut = 'zoom_out',
+  ZoomToSelection = 'zoom_to_selection',
+  ZoomToFit = 'zoom_to_fit',
+  ZoomTo50 = 'zoom_to_50',
+  ZoomTo100 = 'zoom_to_100',
+  ZoomTo200 = 'zoom_to_200',
+  Save = 'save',
+  SwitchSheetNext = 'switch_sheet_next',
+  SwitchSheetPrevious = 'switch_sheet_previous',
+  ClearFormattingBorders = 'clear_formatting_borders',
+  ToggleBold = 'toggle_bold',
+  ToggleItalic = 'toggle_italic',
+  FillRight = 'fill_right',
+  FillDown = 'fill_down',
+  CancelExecution = 'cancel_execution',
+  CopyAsPng = 'copy_as_png',
+  DownloadAsCsv = 'download_as_csv',
+  Undo = 'undo',
+  Redo = 'redo',
+  SelectAll = 'select_all',
+  SelectColumn = 'select_column',
+  SelectRow = 'select_row',
+  ExecuteCode = 'execute_code',
+  RerunSheetCode = 'rerun_sheet_code',
+  RerunAllCode = 'rerun_all_code',
+  InsertCellReference = 'insert_cell_reference',
+  MoveCursorUp = 'move_cursor_up',
+  JumpCursorContentTop = 'jump_cursor_content_top',
+  ExpandSelectionUp = 'expand_selection_up',
+  ExpandSelectionContentTop = 'expand_selection_content_top',
+  MoveCursorDown = 'move_cursor_down',
+  JumpCursorContentBottom = 'jump_cursor_content_bottom',
+  ExpandSelectionDown = 'expand_selection_down',
+  ExpandSelectionContentBottom = 'expand_selection_content_bottom',
+  MoveCursorLeft = 'move_cursor_left',
+  JumpCursorContentLeft = 'jump_cursor_content_left',
+  ExpandSelectionLeft = 'expand_selection_left',
+  ExpandSelectionContentLeft = 'expand_selection_content_left',
+  MoveCursorRight = 'move_cursor_right',
+  JumpCursorContentRight = 'jump_cursor_content_right',
+  ExpandSelectionRight = 'expand_selection_right',
+  ExpandSelectionContentRight = 'expand_selection_content_right',
+  GotoA0 = 'goto_A0',
+  GotoBottomRight = 'goto_bottom_right',
+  GotoRowStart = 'goto_row_start',
+  GotoRowEnd = 'goto_row_end',
+  PageUp = 'page_up',
+  PageDown = 'page_down',
+  MoveCursorRightWithSelection = 'move_cursor_right_with_selection',
+  MoveCursorLeftWithSelection = 'move_cursor_left_with_selection',
+  EditCell = 'edit_cell',
+  DeleteCell = 'delete_cell',
+  ShowCellTypeMenu = 'show_cell_type_menu',
+  CloseInlineEditor = 'close_inline_editor',
+  SaveInlineEditor = 'save_inline_editor',
+  SaveInlineEditorMoveUp = 'save_inline_editor_move_up',
+  SaveInlineEditorMoveRight = 'save_inline_editor_move_right',
+  SaveInlineEditorMoveLeft = 'save_inline_editor_move_left',
+  RemoveInsertedCells = 'remove_inserted_cells',
+  TriggerCell = 'trigger_cell',
+}
diff --git a/quadratic-client/src/app/actions/actionsSpec.ts b/quadratic-client/src/app/actions/actionsSpec.ts
new file mode 100644
index 0000000000..53ebe887ab
--- /dev/null
+++ b/quadratic-client/src/app/actions/actionsSpec.ts
@@ -0,0 +1,53 @@
+// Note: this is a new pattern that should replace the old `actions.ts` file
+import { Action } from '@/app/actions/actions';
+import { FileActionArgs } from '@/app/actions/fileActionsSpec';
+import { FormatActionArgs } from '@/app/actions/formatActionsSpec';
+import { IconComponent } from '@/shared/components/Icons';
+import { ApiTypes, FilePermission, TeamPermission } from 'quadratic-shared/typesAndSchemas';
+
+/**
+ * Every action _may_ have an `isAvailable` key.
+ *
+ * If it doesn’t have that key, that means the action is available to any user.
+ *
+ * If it does have that key, that means that function _must_ be run to determine
+ * whether that action (and its associated shortcuts) should be available to the
+ * current user.
+ */
+export type ActionAvailabilityArgs = {
+  filePermissions: FilePermission[];
+  isAuthenticated: boolean;
+  teamPermissions: TeamPermission[] | undefined;
+  fileTeamPrivacy: ApiTypes['/v0/files/:uuid.GET.response']['userMakingRequest']['fileTeamPrivacy'];
+};
+
+/**
+ * Shared types for actions in the app that can be used across multiple locations,
+ * e.g. the sidebar, command palette, file menu, and formatting bar.
+ */
+export type ActionSpec<ActionArgsType> = {
+  label: string;
+  run: (args: ActionArgsType) => void;
+
+  // Used for contexts where we want to show a longer label
+  labelVerbose?: string;
+
+  // We make this a reference to a component, so it must be called where it's used
+  // allow us to pass additional props depending on context, e.g.
+  //
+  // ```
+  // const { Icon } = action;
+  // return `<Icon className="custom-style-class" />`
+  // ```
+  Icon?: IconComponent;
+  isAvailable?: (args: ActionAvailabilityArgs) => boolean;
+  // Used for command palette search
+  keywords?: string[];
+};
+
+export type ActionSpecRecord = {
+  [K in Action]: ActionSpec<K extends keyof ActionArgs ? ActionArgs[K] : void>;
+};
+
+// Define the possible argument types for each action
+export type ActionArgs = FileActionArgs & FormatActionArgs;
diff --git a/quadratic-client/src/app/actions/codeActionsSpec.ts b/quadratic-client/src/app/actions/codeActionsSpec.ts
new file mode 100644
index 0000000000..47acba6e5b
--- /dev/null
+++ b/quadratic-client/src/app/actions/codeActionsSpec.ts
@@ -0,0 +1,45 @@
+import { Action } from '@/app/actions/actions';
+import { ActionSpecRecord } from '@/app/actions/actionsSpec';
+import { sheets } from '@/app/grid/controller/Sheets';
+import { pixiAppSettings } from '@/app/gridGL/pixiApp/PixiAppSettings';
+import { javascriptWebWorker } from '@/app/web-workers/javascriptWebWorker/javascriptWebWorker';
+import { pythonWebWorker } from '@/app/web-workers/pythonWebWorker/pythonWebWorker';
+import { quadraticCore } from '@/app/web-workers/quadraticCore/quadraticCore';
+
+type CodeActionSpec = Pick<
+  ActionSpecRecord,
+  Action.CancelExecution | Action.ExecuteCode | Action.RerunSheetCode | Action.RerunAllCode
+>;
+
+export const codeActionsSpec: CodeActionSpec = {
+  [Action.CancelExecution]: {
+    label: 'Cancel execution',
+    run: () => {
+      pythonWebWorker.cancelExecution();
+      javascriptWebWorker.cancelExecution();
+    },
+  },
+  [Action.ExecuteCode]: {
+    label: 'Execute code',
+    run: () => {
+      quadraticCore.rerunCodeCells(
+        sheets.sheet.id,
+        pixiAppSettings.editorInteractionState.selectedCell.x,
+        pixiAppSettings.editorInteractionState.selectedCell.y,
+        sheets.getCursorPosition()
+      );
+    },
+  },
+  [Action.RerunSheetCode]: {
+    label: 'Rerun sheet code',
+    run: () => {
+      quadraticCore.rerunCodeCells(sheets.sheet.id, undefined, undefined, sheets.getCursorPosition());
+    },
+  },
+  [Action.RerunAllCode]: {
+    label: 'Rerun all code',
+    run: () => {
+      quadraticCore.rerunCodeCells(undefined, undefined, undefined, sheets.getCursorPosition());
+    },
+  },
+};
diff --git a/quadratic-client/src/app/actions/defaultActionsSpec.ts b/quadratic-client/src/app/actions/defaultActionsSpec.ts
new file mode 100644
index 0000000000..762b9b143d
--- /dev/null
+++ b/quadratic-client/src/app/actions/defaultActionsSpec.ts
@@ -0,0 +1,20 @@
+import { ActionSpecRecord } from '@/app/actions/actionsSpec';
+import { codeActionsSpec } from '@/app/actions/codeActionsSpec';
+import { editActionsSpec } from '@/app/actions/editActionsSpec';
+import { fileActionsSpec } from '@/app/actions/fileActionsSpec';
+import { formatActionsSpec } from '@/app/actions/formatActionsSpec';
+import { helpActionsSpec } from '@/app/actions/helpActionsSpec';
+import { insertActionsSpec } from '@/app/actions/insertActionsSpec';
+import { selectionActionsSpec } from '@/app/actions/selectionActionsSpec';
+import { viewActionsSpec } from '@/app/actions/viewActionsSpec';
+
+export const defaultActionSpec: ActionSpecRecord = {
+  ...fileActionsSpec,
+  ...editActionsSpec,
+  ...viewActionsSpec,
+  ...insertActionsSpec,
+  ...formatActionsSpec,
+  ...helpActionsSpec,
+  ...selectionActionsSpec,
+  ...codeActionsSpec,
+};
diff --git a/quadratic-client/src/app/actions/editActionsSpec.ts b/quadratic-client/src/app/actions/editActionsSpec.ts
new file mode 100644
index 0000000000..4a9dd3ea21
--- /dev/null
+++ b/quadratic-client/src/app/actions/editActionsSpec.ts
@@ -0,0 +1,210 @@
+import { isAvailableBecauseCanEditFile } from '@/app/actions';
+import { Action } from '@/app/actions/actions';
+import { ActionSpecRecord } from '@/app/actions/actionsSpec';
+import { events } from '@/app/events/events';
+import {
+  copySelectionToPNG,
+  copyToClipboard,
+  cutToClipboard,
+  pasteFromClipboard,
+} from '@/app/grid/actions/clipboard/clipboard';
+import { sheets } from '@/app/grid/controller/Sheets';
+import { inlineEditorHandler } from '@/app/gridGL/HTMLGrid/inlineEditor/inlineEditorHandler';
+import { doubleClickCell } from '@/app/gridGL/interaction/pointer/doubleClickCell';
+import { pixiAppSettings } from '@/app/gridGL/pixiApp/PixiAppSettings';
+import { downloadFile } from '@/app/helpers/downloadFileInBrowser';
+import { quadraticCore } from '@/app/web-workers/quadraticCore/quadraticCore';
+import {
+  CopyAsPng,
+  CopyIcon,
+  CsvIcon,
+  CutIcon,
+  FindInFileIcon,
+  PasteIcon,
+  RedoIcon,
+  UndoIcon,
+} from '@/shared/components/Icons';
+
+type EditActionSpec = Pick<
+  ActionSpecRecord,
+  | Action.Undo
+  | Action.Redo
+  | Action.Cut
+  | Action.Copy
+  | Action.Paste
+  | Action.PasteValuesOnly
+  | Action.PasteFormattingOnly
+  | Action.FindInCurrentSheet
+  | Action.FindInAllSheets
+  | Action.CopyAsPng
+  | Action.DownloadAsCsv
+  | Action.Save
+  | Action.FillRight
+  | Action.FillDown
+  | Action.EditCell
+  | Action.DeleteCell
+  | Action.CloseInlineEditor
+  | Action.SaveInlineEditor
+  | Action.SaveInlineEditorMoveUp
+  | Action.SaveInlineEditorMoveRight
+  | Action.SaveInlineEditorMoveLeft
+  | Action.TriggerCell
+>;
+
+export const editActionsSpec: EditActionSpec = {
+  [Action.Undo]: {
+    label: 'Undo',
+    Icon: UndoIcon,
+    isAvailable: isAvailableBecauseCanEditFile,
+    run: () => {
+      quadraticCore.undo();
+    },
+  },
+  [Action.Redo]: {
+    label: 'Redo',
+    Icon: RedoIcon,
+    isAvailable: isAvailableBecauseCanEditFile,
+    run: () => {
+      quadraticCore.redo();
+    },
+  },
+  [Action.Cut]: {
+    label: 'Cut',
+    Icon: CutIcon,
+    isAvailable: isAvailableBecauseCanEditFile,
+    run: () => {
+      cutToClipboard();
+    },
+  },
+  [Action.Copy]: {
+    label: 'Copy',
+    Icon: CopyIcon,
+    run: () => {
+      copyToClipboard();
+    },
+  },
+  [Action.Paste]: {
+    label: 'Paste',
+    Icon: PasteIcon,
+    isAvailable: isAvailableBecauseCanEditFile,
+    run: () => {
+      pasteFromClipboard();
+    },
+  },
+  [Action.PasteValuesOnly]: {
+    label: 'Paste values only',
+    Icon: PasteIcon,
+    isAvailable: isAvailableBecauseCanEditFile,
+    run: () => {
+      pasteFromClipboard('Values');
+    },
+  },
+  [Action.PasteFormattingOnly]: {
+    label: 'Paste formatting only',
+    Icon: PasteIcon,
+    isAvailable: isAvailableBecauseCanEditFile,
+    run: () => {
+      pasteFromClipboard('Formats');
+    },
+  },
+  [Action.FindInCurrentSheet]: {
+    label: 'Find in current sheet',
+    Icon: FindInFileIcon,
+    run: () => {
+      if (!pixiAppSettings.setEditorInteractionState) return;
+      pixiAppSettings.setEditorInteractionState((prev) => ({ ...prev, showSearch: true }));
+    },
+    keywords: ['search'],
+  },
+  [Action.FindInAllSheets]: {
+    label: 'Find in all sheets',
+    Icon: FindInFileIcon,
+    run: () => {
+      if (!pixiAppSettings.setEditorInteractionState) return;
+      pixiAppSettings.setEditorInteractionState((prev) => ({ ...prev, showSearch: { sheet_id: undefined } }));
+    },
+    keywords: ['search'],
+  },
+  [Action.CopyAsPng]: {
+    label: 'Copy as PNG',
+    Icon: CopyAsPng,
+    run: () => {
+      if (!pixiAppSettings.addGlobalSnackbar) return;
+      copySelectionToPNG(pixiAppSettings.addGlobalSnackbar);
+    },
+  },
+  [Action.DownloadAsCsv]: {
+    label: 'Download as CSV',
+    Icon: CsvIcon,
+    run: async () => {
+      // Convert ISO timestamp to a string without colons or dots
+      // (since those aren't valid in filenames on some OSes)
+      const timestamp = new Date().toISOString().replace(/:|\./g, '-');
+      const fileName = `quadratic-csv-export-${timestamp}`;
+      downloadFile(fileName, await quadraticCore.exportCsvSelection(sheets.getRustSelection()), 'text/plain', 'csv');
+    },
+  },
+  [Action.Save]: {
+    label: 'Save',
+    run: () => {}, // TODO(ayush): add this when refactoring shortcuts to use action specs
+  },
+  [Action.FillRight]: {
+    label: 'Fill right',
+    run: () => {}, // TODO(ayush): add this when refactoring shortcuts to use action specs
+  },
+  [Action.FillDown]: {
+    label: 'Fill down',
+    run: () => {}, // TODO(ayush): add this when refactoring shortcuts to use action specs
+  },
+  [Action.EditCell]: {
+    label: 'Edit cell',
+    run: () => {
+      if (!inlineEditorHandler.isEditingFormula()) {
+        const cursor = sheets.sheet.cursor;
+        const cursorPosition = cursor.cursorPosition;
+        const column = cursorPosition.x;
+        const row = cursorPosition.y;
+        quadraticCore.getCodeCell(sheets.sheet.id, column, row).then((code) => {
+          if (code) {
+            doubleClickCell({ column: Number(code.x), row: Number(code.y), language: code.language, cell: '' });
+          } else {
+            quadraticCore.getEditCell(sheets.sheet.id, column, row).then((cell) => {
+              doubleClickCell({ column, row, cell });
+            });
+          }
+        });
+      }
+    },
+  },
+  [Action.DeleteCell]: {
+    label: 'Delete cell',
+    run: () => {}, // TODO(ayush): add this when refactoring shortcuts to use action specs
+  },
+  [Action.CloseInlineEditor]: {
+    label: 'Close inline editor',
+    run: () => {}, // TODO(ayush): add this when refactoring shortcuts to use action specs
+  },
+  [Action.SaveInlineEditor]: {
+    label: 'Save inline editor',
+    run: () => {}, // TODO(ayush): add this when refactoring shortcuts to use action specs
+  },
+  [Action.SaveInlineEditorMoveUp]: {
+    label: 'Save inline editor and move up',
+    run: () => {}, // TODO(ayush): add this when refactoring shortcuts to use action specs
+  },
+  [Action.SaveInlineEditorMoveRight]: {
+    label: 'Save inline editor and move right',
+    run: () => {}, // TODO(ayush): add this when refactoring shortcuts to use action specs
+  },
+  [Action.SaveInlineEditorMoveLeft]: {
+    label: 'Save inline editor and move left',
+    run: () => {}, // TODO(ayush): add this when refactoring shortcuts to use action specs
+  },
+  [Action.TriggerCell]: {
+    label: 'Trigger cell',
+    run: () => {
+      const p = sheets.sheet.cursor.cursorPosition;
+      events.emit('triggerCell', p.x, p.y, true);
+    },
+  },
+};
diff --git a/quadratic-client/src/app/actions/fileActionsSpec.ts b/quadratic-client/src/app/actions/fileActionsSpec.ts
new file mode 100644
index 0000000000..5ce2c7500c
--- /dev/null
+++ b/quadratic-client/src/app/actions/fileActionsSpec.ts
@@ -0,0 +1,47 @@
+import { isAvailableBecauseCanEditFile, isAvailableBecauseLoggedIn } from '@/app/actions';
+import { Action } from '@/app/actions/actions';
+import { ActionAvailabilityArgs, ActionSpecRecord } from '@/app/actions/actionsSpec';
+import { pixiAppSettings } from '@/app/gridGL/pixiApp/PixiAppSettings';
+import { downloadQuadraticFile } from '@/app/helpers/downloadFileInBrowser';
+import { isEmbed } from '@/app/helpers/isEmbed';
+import { quadraticCore } from '@/app/web-workers/quadraticCore/quadraticCore';
+import { DownloadIcon, FileRenameIcon, PersonAddIcon } from '@/shared/components/Icons';
+
+type FileActionSpec = Pick<ActionSpecRecord, Action.FileShare | Action.FileRename | Action.FileDownload>;
+
+export type FileActionArgs = {
+  [Action.FileDownload]: { name: string };
+};
+
+export const fileActionsSpec: FileActionSpec = {
+  [Action.FileShare]: {
+    label: 'Share',
+    Icon: PersonAddIcon,
+    isAvailable: ({ isAuthenticated }: ActionAvailabilityArgs) => !isEmbed && isAuthenticated,
+    run: () => {
+      if (!pixiAppSettings.setEditorInteractionState) return;
+      pixiAppSettings.setEditorInteractionState((prev) => ({ ...prev, showShareFileMenu: true }));
+    },
+  },
+  [Action.FileRename]: {
+    label: 'Rename',
+    Icon: FileRenameIcon,
+    isAvailable: isAvailableBecauseCanEditFile,
+    run: () => {
+      if (!pixiAppSettings.setEditorInteractionState) return;
+      pixiAppSettings.setEditorInteractionState((prev) => ({ ...prev, showRenameFileMenu: true }));
+    },
+  },
+  [Action.FileDownload]: {
+    label: 'Download',
+    Icon: DownloadIcon,
+    isAvailable: isAvailableBecauseLoggedIn,
+    run: async ({ name }: FileActionArgs[Action.FileDownload]) => {
+      if (!pixiAppSettings.setEditorInteractionState) return;
+      pixiAppSettings.setEditorInteractionState((prev) => ({ ...prev, isRunningAsyncAction: true }));
+      const data = await quadraticCore.export();
+      downloadQuadraticFile(name, data);
+      pixiAppSettings.setEditorInteractionState((prev) => ({ ...prev, isRunningAsyncAction: false }));
+    },
+  },
+};
diff --git a/quadratic-client/src/app/actions/formatActionsSpec.ts b/quadratic-client/src/app/actions/formatActionsSpec.ts
new file mode 100644
index 0000000000..3ec0bd7cad
--- /dev/null
+++ b/quadratic-client/src/app/actions/formatActionsSpec.ts
@@ -0,0 +1,402 @@
+import { Action } from '@/app/actions/actions';
+import { ActionSpecRecord } from '@/app/actions/actionsSpec';
+import { pixiAppSettings } from '@/app/gridGL/pixiApp/PixiAppSettings';
+import { convertReactColorToString } from '@/app/helpers/convertColor';
+import {
+  clearFormattingAndBorders,
+  removeCellNumericFormat,
+  setAlign,
+  setBold,
+  setCellCommas,
+  setFillColor,
+  setItalic,
+  setTextColor,
+  setVerticalAlign,
+  setWrap,
+  textFormatDecreaseDecimalPlaces,
+  textFormatIncreaseDecimalPlaces,
+  textFormatSetCurrency,
+  textFormatSetExponential,
+  textFormatSetPercentage,
+} from '@/app/ui/helpers/formatCells';
+import { UseBordersResults } from '@/app/ui/hooks/useBorders';
+import {
+  BorderAllIcon,
+  BorderBottomIcon,
+  BorderClearIcon,
+  BorderColorIcon,
+  BorderHorizontalIcon,
+  BorderInnerIcon,
+  BorderLeftIcon,
+  BorderOuterIcon,
+  BorderRightIcon,
+  BorderTopIcon,
+  BorderVerticalIcon,
+  CurrencyIcon,
+  DecimalDecreaseIcon,
+  DecimalIncreaseIcon,
+  FormatAlignCenterIcon,
+  FormatAlignLeftIcon,
+  FormatAlignRightIcon,
+  FormatBoldIcon,
+  FormatClearIcon,
+  FormatColorFillIcon,
+  FormatColorTextIcon,
+  FormatDateTimeIcon,
+  FormatItalicIcon,
+  FormatNumberAutomaticIcon,
+  FormatTextClipIcon,
+  FormatTextOverflowIcon,
+  FormatTextWrapIcon,
+  FormatToggleCommasIcon,
+  PercentIcon,
+  ScientificIcon,
+  VerticalAlignBottomIcon,
+  VerticalAlignMiddleIcon,
+  VerticalAlignTopIcon,
+} from '@/shared/components/Icons';
+import { ColorResult } from 'react-color';
+
+type FormatActionSpec = Pick<
+  ActionSpecRecord,
+  | Action.FormatAlignHorizontalCenter
+  | Action.FormatAlignHorizontalLeft
+  | Action.FormatAlignHorizontalRight
+  | Action.FormatAlignVerticalBottom
+  | Action.FormatAlignVerticalMiddle
+  | Action.FormatAlignVerticalTop
+  | Action.ToggleBold
+  | Action.ToggleItalic
+  | Action.ClearFormattingBorders
+  | Action.FormatNumberAutomatic
+  | Action.FormatNumberCurrency
+  | Action.FormatNumberDecimalDecrease
+  | Action.FormatNumberDecimalIncrease
+  | Action.FormatNumberPercent
+  | Action.FormatNumberScientific
+  | Action.FormatNumberToggleCommas
+  | Action.FormatDateTime
+  | Action.FormatTextWrapClip
+  | Action.FormatTextWrapOverflow
+  | Action.FormatTextWrapWrap
+  | Action.FormatTextColor
+  | Action.FormatFillColor
+  | Action.FormatBorderAll
+  | Action.FormatBorderOuter
+  | Action.FormatBorderInner
+  | Action.FormatBorderVertical
+  | Action.FormatBorderHorizontal
+  | Action.FormatBorderLeft
+  | Action.FormatBorderRight
+  | Action.FormatBorderTop
+  | Action.FormatBorderBottom
+  | Action.FormatBorderClear
+  | Action.FormatBorderLine1
+  | Action.FormatBorderLine2
+  | Action.FormatBorderLine3
+  | Action.FormatBorderDashed
+  | Action.FormatBorderDotted
+  | Action.FormatBorderDouble
+  | Action.FormatBorderColor
+>;
+
+export type FormatActionArgs = {
+  [Action.FormatTextColor]?: ColorResult;
+  [Action.FormatFillColor]?: ColorResult;
+  [Action.FormatBorderAll]: UseBordersResults;
+  [Action.FormatBorderOuter]: UseBordersResults;
+  [Action.FormatBorderInner]: UseBordersResults;
+  [Action.FormatBorderVertical]: UseBordersResults;
+  [Action.FormatBorderHorizontal]: UseBordersResults;
+  [Action.FormatBorderLeft]: UseBordersResults;
+  [Action.FormatBorderRight]: UseBordersResults;
+  [Action.FormatBorderTop]: UseBordersResults;
+  [Action.FormatBorderBottom]: UseBordersResults;
+  [Action.FormatBorderClear]: UseBordersResults;
+  [Action.FormatBorderLine1]: UseBordersResults;
+  [Action.FormatBorderLine2]: UseBordersResults;
+  [Action.FormatBorderLine3]: UseBordersResults;
+  [Action.FormatBorderDashed]: UseBordersResults;
+  [Action.FormatBorderDotted]: UseBordersResults;
+  [Action.FormatBorderDouble]: UseBordersResults;
+  [Action.FormatBorderColor]: { borders: UseBordersResults; color: ColorResult };
+};
+
+// TODO: add `isAvailable` check for these (when you add them to the command palette)
+
+export const formatActionsSpec: FormatActionSpec = {
+  [Action.FormatAlignHorizontalCenter]: {
+    label: 'Center',
+    Icon: FormatAlignCenterIcon,
+    run: () => {
+      setAlign('center');
+    },
+  },
+  [Action.FormatAlignHorizontalLeft]: {
+    label: 'Left',
+    Icon: FormatAlignLeftIcon,
+    run: () => {
+      setAlign('left');
+    },
+  },
+  [Action.FormatAlignHorizontalRight]: {
+    label: 'Right',
+    Icon: FormatAlignRightIcon,
+    run: () => {
+      setAlign('right');
+    },
+  },
+  [Action.FormatAlignVerticalBottom]: {
+    label: 'Bottom',
+    Icon: VerticalAlignBottomIcon,
+    run: () => {
+      setVerticalAlign('bottom');
+    },
+  },
+  [Action.FormatAlignVerticalMiddle]: {
+    label: 'Middle',
+    Icon: VerticalAlignMiddleIcon,
+    run: () => {
+      setVerticalAlign('middle');
+    },
+  },
+  [Action.FormatAlignVerticalTop]: {
+    label: 'Top',
+    Icon: VerticalAlignTopIcon,
+    run: () => {
+      setVerticalAlign('top');
+    },
+  },
+  [Action.ToggleBold]: {
+    label: 'Bold',
+    Icon: FormatBoldIcon,
+    run: () => {
+      setBold();
+    },
+  },
+  [Action.ToggleItalic]: {
+    label: 'Italic',
+    Icon: FormatItalicIcon,
+    run: () => {
+      setItalic();
+    },
+  },
+  [Action.ClearFormattingBorders]: {
+    label: 'Clear formatting',
+    Icon: FormatClearIcon,
+    run: () => {
+      clearFormattingAndBorders();
+    },
+  },
+  [Action.FormatNumberAutomatic]: {
+    label: 'Automatic',
+    Icon: FormatNumberAutomaticIcon,
+    run: () => {
+      removeCellNumericFormat();
+    },
+  },
+  [Action.FormatNumberCurrency]: {
+    label: 'Currency',
+    Icon: CurrencyIcon,
+    run: () => {
+      textFormatSetCurrency();
+    },
+  },
+  [Action.FormatNumberDecimalDecrease]: {
+    label: 'Decrease decimals',
+    Icon: DecimalDecreaseIcon,
+    run: () => {
+      textFormatDecreaseDecimalPlaces();
+    },
+  },
+  [Action.FormatNumberDecimalIncrease]: {
+    label: 'Increase decimals',
+    Icon: DecimalIncreaseIcon,
+    run: () => {
+      textFormatIncreaseDecimalPlaces();
+    },
+  },
+  [Action.FormatNumberPercent]: {
+    label: 'Percent',
+    Icon: PercentIcon,
+    run: () => {
+      textFormatSetPercentage();
+    },
+  },
+  [Action.FormatNumberScientific]: {
+    label: 'Scientific',
+    Icon: ScientificIcon,
+    run: () => {
+      textFormatSetExponential();
+    },
+  },
+  [Action.FormatNumberToggleCommas]: {
+    label: 'Toggle commas',
+    Icon: FormatToggleCommasIcon,
+    run: () => {
+      setCellCommas();
+    },
+  },
+  [Action.FormatDateTime]: {
+    label: 'Date and time',
+    Icon: FormatDateTimeIcon,
+    run: () => {
+      if (!pixiAppSettings.setEditorInteractionState) return;
+      pixiAppSettings.setEditorInteractionState((state) => ({ ...state, annotationState: 'date-format' }));
+    },
+  },
+  [Action.FormatTextWrapClip]: {
+    label: 'Clip',
+    Icon: FormatTextClipIcon,
+    run: () => {
+      setWrap('clip');
+    },
+  },
+  [Action.FormatTextWrapOverflow]: {
+    label: 'Overflow',
+    Icon: FormatTextOverflowIcon,
+    run: () => {
+      setWrap('overflow');
+    },
+  },
+  [Action.FormatTextWrapWrap]: {
+    label: 'Wrap',
+    Icon: FormatTextWrapIcon,
+    run: () => {
+      setWrap('wrap');
+    },
+  },
+  [Action.FormatTextColor]: {
+    label: 'Text color',
+    Icon: FormatColorTextIcon,
+    run: (color: FormatActionArgs[Action.FormatTextColor]) => {
+      setTextColor(color);
+    },
+  },
+  [Action.FormatFillColor]: {
+    label: 'Fill color',
+    Icon: FormatColorFillIcon,
+    run: (color: FormatActionArgs[Action.FormatFillColor]) => {
+      setFillColor(color);
+    },
+  },
+  [Action.FormatBorderAll]: {
+    label: 'Border all',
+    Icon: BorderAllIcon,
+    run: (borders: FormatActionArgs[Action.FormatBorderAll]) => {
+      borders.changeBorders({ selection: 'all' });
+    },
+  },
+  [Action.FormatBorderOuter]: {
+    label: 'Border outer',
+    Icon: BorderOuterIcon,
+    run: (borders: FormatActionArgs[Action.FormatBorderOuter]) => {
+      borders.changeBorders({ selection: 'outer' });
+    },
+  },
+  [Action.FormatBorderInner]: {
+    label: 'Border inner',
+    Icon: BorderInnerIcon,
+    run: (borders: FormatActionArgs[Action.FormatBorderInner]) => {
+      borders.changeBorders({ selection: 'inner' });
+    },
+  },
+  [Action.FormatBorderVertical]: {
+    label: 'Border vertical',
+    Icon: BorderVerticalIcon,
+    run: (borders: FormatActionArgs[Action.FormatBorderVertical]) => {
+      borders.changeBorders({ selection: 'vertical' });
+    },
+  },
+  [Action.FormatBorderHorizontal]: {
+    label: 'Border horizontal',
+    Icon: BorderHorizontalIcon,
+    run: (borders: FormatActionArgs[Action.FormatBorderHorizontal]) => {
+      borders.changeBorders({ selection: 'horizontal' });
+    },
+  },
+  [Action.FormatBorderLeft]: {
+    label: 'Border left',
+    Icon: BorderLeftIcon,
+    run: (borders: FormatActionArgs[Action.FormatBorderLeft]) => {
+      borders.changeBorders({ selection: 'left' });
+    },
+  },
+  [Action.FormatBorderRight]: {
+    label: 'Border right',
+    Icon: BorderRightIcon,
+    run: (borders: FormatActionArgs[Action.FormatBorderRight]) => {
+      borders.changeBorders({ selection: 'right' });
+    },
+  },
+  [Action.FormatBorderTop]: {
+    label: 'Border top',
+    Icon: BorderTopIcon,
+    run: (borders: FormatActionArgs[Action.FormatBorderTop]) => {
+      borders.changeBorders({ selection: 'top' });
+    },
+  },
+  [Action.FormatBorderBottom]: {
+    label: 'Border bottom',
+    Icon: BorderBottomIcon,
+    run: (borders: FormatActionArgs[Action.FormatBorderBottom]) => {
+      borders.changeBorders({ selection: 'bottom' });
+    },
+  },
+  [Action.FormatBorderClear]: {
+    label: 'Border clear',
+    Icon: BorderClearIcon,
+    run: (borders: FormatActionArgs[Action.FormatBorderClear]) => {
+      borders.clearBorders();
+    },
+  },
+  [Action.FormatBorderLine1]: {
+    label: 'Border line 1',
+    Icon: BorderClearIcon,
+    run: (borders: FormatActionArgs[Action.FormatBorderLine1]) => {
+      borders.changeBorders({ line: 'line1' });
+    },
+  },
+  [Action.FormatBorderLine2]: {
+    label: 'Border line 2',
+    Icon: BorderClearIcon,
+    run: (borders: FormatActionArgs[Action.FormatBorderLine2]) => {
+      borders.changeBorders({ line: 'line2' });
+    },
+  },
+  [Action.FormatBorderLine3]: {
+    label: 'Border line 3',
+    Icon: BorderClearIcon,
+    run: (borders: FormatActionArgs[Action.FormatBorderLine3]) => {
+      borders.changeBorders({ line: 'line3' });
+    },
+  },
+  [Action.FormatBorderDashed]: {
+    label: 'Border dashed',
+    Icon: BorderClearIcon,
+    run: (borders: FormatActionArgs[Action.FormatBorderDashed]) => {
+      borders.changeBorders({ line: 'dashed' });
+    },
+  },
+  [Action.FormatBorderDotted]: {
+    label: 'Border dotted',
+    Icon: BorderClearIcon,
+    run: (borders: FormatActionArgs[Action.FormatBorderDotted]) => {
+      borders.changeBorders({ line: 'dotted' });
+    },
+  },
+  [Action.FormatBorderDouble]: {
+    label: 'Border double',
+    Icon: BorderClearIcon,
+    run: (borders: FormatActionArgs[Action.FormatBorderDouble]) => {
+      borders.changeBorders({ line: 'double' });
+    },
+  },
+  [Action.FormatBorderColor]: {
+    label: 'Border color',
+    Icon: BorderColorIcon,
+    run: ({ borders, color }: FormatActionArgs[Action.FormatBorderColor]) => {
+      borders.changeBorders({ color: convertReactColorToString(color) });
+    },
+  },
+};
diff --git a/quadratic-client/src/app/actions/helpActionsSpec.ts b/quadratic-client/src/app/actions/helpActionsSpec.ts
new file mode 100644
index 0000000000..af217dd6a8
--- /dev/null
+++ b/quadratic-client/src/app/actions/helpActionsSpec.ts
@@ -0,0 +1,34 @@
+import { isAvailableBecauseLoggedIn } from '@/app/actions';
+import { Action } from '@/app/actions/actions';
+import { ActionSpecRecord } from '@/app/actions/actionsSpec';
+import { pixiAppSettings } from '@/app/gridGL/pixiApp/PixiAppSettings';
+import { DocumentationIcon, FeedbackIcon, MailIcon } from '@/shared/components/Icons';
+import { CONTACT_URL, DOCUMENTATION_URL } from '@/shared/constants/urls';
+
+type HelpActionSpec = Pick<ActionSpecRecord, Action.HelpContactUs | Action.HelpDocs | Action.HelpFeedback>;
+
+export const helpActionsSpec: HelpActionSpec = {
+  [Action.HelpContactUs]: {
+    label: 'Contact us',
+    Icon: MailIcon,
+    run: () => {
+      window.open(CONTACT_URL, '_blank', 'noreferrer,noopener');
+    },
+  },
+  [Action.HelpDocs]: {
+    label: 'Docs',
+    Icon: DocumentationIcon,
+    run: () => {
+      window.open(DOCUMENTATION_URL, '_blank', 'noreferrer,noopener');
+    },
+  },
+  [Action.HelpFeedback]: {
+    label: 'Feedback',
+    Icon: FeedbackIcon,
+    isAvailable: isAvailableBecauseLoggedIn,
+    run: () => {
+      if (!pixiAppSettings.setEditorInteractionState) return;
+      pixiAppSettings.setEditorInteractionState((prev) => ({ ...prev, showFeedbackMenu: true }));
+    },
+  },
+};
diff --git a/quadratic-client/src/app/actions/insertActionsSpec.ts b/quadratic-client/src/app/actions/insertActionsSpec.ts
new file mode 100644
index 0000000000..0d0b0f15dc
--- /dev/null
+++ b/quadratic-client/src/app/actions/insertActionsSpec.ts
@@ -0,0 +1,199 @@
+import { Action } from '@/app/actions/actions';
+import { ActionSpecRecord } from '@/app/actions/actionsSpec';
+import { sheets } from '@/app/grid/controller/Sheets';
+import { pixiAppSettings } from '@/app/gridGL/pixiApp/PixiAppSettings';
+import { insertCellRef } from '@/app/ui/menus/CodeEditor/insertCellRef';
+import { SNIPPET_JS_API, SNIPPET_JS_CHART } from '@/app/ui/menus/CodeEditor/snippetsJS';
+import { SNIPPET_PY_API, SNIPPET_PY_CHART } from '@/app/ui/menus/CodeEditor/snippetsPY';
+import { ArrowDropDownCircleIcon, CheckBoxIcon, DataValidationsIcon, SheetIcon } from '@/shared/components/Icons';
+
+type InsertActionSpec = Pick<
+  ActionSpecRecord,
+  | Action.InsertCodePython
+  | Action.InsertCodeJavascript
+  | Action.InsertCodeFormula
+  | Action.InsertChartPython
+  | Action.InsertChartJavascript
+  | Action.InsertApiRequestJavascript
+  | Action.InsertApiRequestPython
+  | Action.InsertSheet
+  | Action.InsertCheckbox
+  | Action.InsertDropdown
+  | Action.ToggleDataValidation
+  | Action.InsertCellReference
+  | Action.RemoveInsertedCells
+>;
+
+export const insertActionsSpec: InsertActionSpec = {
+  [Action.InsertCodePython]: {
+    label: 'Python',
+    labelVerbose: 'Insert Python code',
+    run: () => {
+      if (!pixiAppSettings.setEditorInteractionState) return;
+      const cursor = sheets.sheet.cursor.getCursor();
+      pixiAppSettings.setEditorInteractionState((prev) => ({
+        ...prev,
+        showCodeEditor: true,
+        mode: 'Python',
+        selectedCell: { x: cursor.x, y: cursor.y },
+        selectedCellSheet: sheets.sheet.id,
+        initialCode: '',
+      }));
+    },
+  },
+  [Action.InsertCodeJavascript]: {
+    label: 'JavaScript',
+    labelVerbose: 'Insert JavaScript code',
+    run: () => {
+      if (!pixiAppSettings.setEditorInteractionState) return;
+      const cursor = sheets.sheet.cursor.getCursor();
+      pixiAppSettings.setEditorInteractionState((prev) => ({
+        ...prev,
+        showCodeEditor: true,
+        mode: 'Javascript',
+        selectedCell: { x: cursor.x, y: cursor.y },
+        selectedCellSheet: sheets.sheet.id,
+        initialCode: '',
+      }));
+    },
+  },
+  [Action.InsertCodeFormula]: {
+    label: 'Formula',
+    labelVerbose: 'Insert Formula',
+    run: () => {
+      if (!pixiAppSettings.setEditorInteractionState) return;
+      const cursor = sheets.sheet.cursor.getCursor();
+      pixiAppSettings.setEditorInteractionState((prev) => ({
+        ...prev,
+        showCodeEditor: true,
+        mode: 'Formula',
+        selectedCell: { x: cursor.x, y: cursor.y },
+        selectedCellSheet: sheets.sheet.id,
+        initialCode: '',
+      }));
+    },
+  },
+  [Action.InsertChartPython]: {
+    label: 'Python (Plotly)',
+    labelVerbose: 'Insert Python chart (Plotly)',
+    run: () => {
+      if (!pixiAppSettings.setEditorInteractionState) return;
+      const cursor = sheets.sheet.cursor.getCursor();
+      pixiAppSettings.setEditorInteractionState((prev) => ({
+        ...prev,
+        showCodeEditor: true,
+        mode: 'Python',
+        selectedCell: { x: cursor.x, y: cursor.y },
+        selectedCellSheet: sheets.sheet.id,
+        initialCode: SNIPPET_PY_CHART,
+      }));
+    },
+  },
+  [Action.InsertChartJavascript]: {
+    label: 'JavaScript (Chart.js)',
+    labelVerbose: 'Insert JavaScript chart (Chart.js)',
+    run: () => {
+      if (!pixiAppSettings.setEditorInteractionState) return;
+      const cursor = sheets.sheet.cursor.getCursor();
+      pixiAppSettings.setEditorInteractionState((prev) => ({
+        ...prev,
+        showCodeEditor: true,
+        mode: 'Javascript',
+        selectedCell: { x: cursor.x, y: cursor.y },
+        selectedCellSheet: sheets.sheet.id,
+        initialCode: SNIPPET_JS_CHART,
+      }));
+    },
+  },
+  [Action.InsertApiRequestJavascript]: {
+    label: 'From JavaScript API request',
+    labelVerbose: 'Insert JavaScript API request',
+    run: () => {
+      if (!pixiAppSettings.setEditorInteractionState) return;
+      const cursor = sheets.sheet.cursor.getCursor();
+      pixiAppSettings.setEditorInteractionState((prev) => ({
+        ...prev,
+        showCodeEditor: true,
+        mode: 'Javascript',
+        selectedCell: { x: cursor.x, y: cursor.y },
+        selectedCellSheet: sheets.sheet.id,
+        initialCode: SNIPPET_JS_API,
+      }));
+    },
+  },
+  [Action.InsertApiRequestPython]: {
+    label: 'From Python API request',
+    labelVerbose: 'Insert Python API request',
+    run: () => {
+      if (!pixiAppSettings.setEditorInteractionState) return;
+      const cursor = sheets.sheet.cursor.getCursor();
+      pixiAppSettings.setEditorInteractionState((prev) => ({
+        ...prev,
+        showCodeEditor: true,
+        mode: 'Python',
+        selectedCell: { x: cursor.x, y: cursor.y },
+        selectedCellSheet: sheets.sheet.id,
+        initialCode: SNIPPET_PY_API,
+      }));
+    },
+  },
+  [Action.InsertSheet]: {
+    label: 'Sheet',
+    labelVerbose: 'Insert Sheet',
+    Icon: SheetIcon,
+    run: () => {
+      sheets.userAddSheet();
+    },
+  },
+  [Action.InsertCheckbox]: {
+    label: 'Checkbox',
+    labelVerbose: 'Insert checkbox',
+    Icon: CheckBoxIcon,
+    run: () => {
+      if (!pixiAppSettings.setEditorInteractionState) return;
+      pixiAppSettings.setEditorInteractionState((prev) => ({
+        ...prev,
+        showValidation: 'logical',
+      }));
+    },
+  },
+  [Action.InsertDropdown]: {
+    label: 'Dropdown',
+    labelVerbose: 'Insert dropdown',
+    Icon: ArrowDropDownCircleIcon,
+    run: () => {
+      if (!pixiAppSettings.setEditorInteractionState) return;
+      pixiAppSettings.setEditorInteractionState((prev) => ({
+        ...prev,
+        showValidation: 'list',
+      }));
+    },
+  },
+  [Action.ToggleDataValidation]: {
+    label: 'Data validation rule',
+    labelVerbose: 'Manage data validation rules',
+    Icon: DataValidationsIcon,
+    run: () => {
+      if (!pixiAppSettings.setEditorInteractionState) return;
+      pixiAppSettings.setEditorInteractionState((prev) => ({
+        ...prev,
+        showValidation: true,
+      }));
+    },
+  },
+  [Action.InsertCellReference]: {
+    label: 'Cell reference',
+    labelVerbose: 'Insert cell reference',
+    run: () => {
+      if (pixiAppSettings.editorInteractionState.showCodeEditor) {
+        insertCellRef(pixiAppSettings.editorInteractionState);
+      }
+    },
+  },
+  [Action.RemoveInsertedCells]: {
+    label: 'Remove inserted cells',
+    run: () => {
+      // TODO(ayush): add this when refactoring shortcuts to use action specs
+    },
+  },
+};
diff --git a/quadratic-client/src/app/actions/selectionActionsSpec.ts b/quadratic-client/src/app/actions/selectionActionsSpec.ts
new file mode 100644
index 0000000000..b7f060b9be
--- /dev/null
+++ b/quadratic-client/src/app/actions/selectionActionsSpec.ts
@@ -0,0 +1,192 @@
+import { Action } from '@/app/actions/actions';
+import { ActionSpecRecord } from '@/app/actions/actionsSpec';
+import { sheets } from '@/app/grid/controller/Sheets';
+import { selectAllCells, selectColumns, selectRows } from '@/app/gridGL/helpers/selectCells';
+
+type SelectionActionSpec = Pick<
+  ActionSpecRecord,
+  | Action.SelectAll
+  | Action.SelectColumn
+  | Action.SelectRow
+  | Action.MoveCursorUp
+  | Action.JumpCursorContentTop
+  | Action.ExpandSelectionUp
+  | Action.ExpandSelectionContentTop
+  | Action.MoveCursorDown
+  | Action.JumpCursorContentBottom
+  | Action.ExpandSelectionDown
+  | Action.ExpandSelectionContentBottom
+  | Action.MoveCursorLeft
+  | Action.JumpCursorContentLeft
+  | Action.ExpandSelectionLeft
+  | Action.ExpandSelectionContentLeft
+  | Action.MoveCursorLeftWithSelection
+  | Action.MoveCursorRight
+  | Action.JumpCursorContentRight
+  | Action.ExpandSelectionRight
+  | Action.ExpandSelectionContentRight
+  | Action.MoveCursorRightWithSelection
+  | Action.GotoA0
+  | Action.GotoBottomRight
+  | Action.GotoRowStart
+  | Action.GotoRowEnd
+>;
+
+export const selectionActionsSpec: SelectionActionSpec = {
+  [Action.SelectAll]: {
+    label: 'Select all',
+    run: () => {
+      selectAllCells();
+    },
+  },
+  [Action.SelectColumn]: {
+    label: 'Select column',
+    run: () => {
+      const cursor = sheets.sheet.cursor;
+      if (cursor.columnRow?.all || cursor.columnRow?.rows?.length) {
+        selectAllCells();
+      } else {
+        let columns = new Set<number>(cursor.columnRow?.columns);
+        columns.add(cursor.cursorPosition.x);
+        cursor.multiCursor?.forEach((rect) => {
+          for (let x = rect.x; x < rect.x + rect.width; x++) {
+            columns.add(x);
+          }
+        });
+        selectColumns(Array.from(columns), cursor.cursorPosition.x);
+      }
+    },
+  },
+  [Action.SelectRow]: {
+    label: 'Select row',
+    run: () => {
+      const cursor = sheets.sheet.cursor;
+      if (cursor.columnRow?.all || cursor.columnRow?.columns?.length) {
+        selectAllCells();
+      } else {
+        let row = new Set<number>(cursor.columnRow?.rows);
+        row.add(cursor.cursorPosition.y);
+        cursor.multiCursor?.forEach((rect) => {
+          for (let y = rect.y; y < rect.y + rect.height; y++) {
+            row.add(y);
+          }
+        });
+        selectRows(Array.from(row), cursor.cursorPosition.y);
+      }
+    },
+  },
+  [Action.MoveCursorUp]: {
+    label: 'Move cursor up',
+    run: () => {}, // TODO(ayush): add this when refactoring shortcuts to use action specs
+  },
+  [Action.JumpCursorContentTop]: {
+    label: 'Jump cursor content top',
+    run: () => {}, // TODO(ayush): add this when refactoring shortcuts to use action specs
+  },
+  [Action.ExpandSelectionUp]: {
+    label: 'Expand selection up',
+    run: () => {}, // TODO(ayush): add this when refactoring shortcuts to use action specs
+  },
+  [Action.ExpandSelectionContentTop]: {
+    label: 'Expand selection content top',
+    run: () => {}, // TODO(ayush): add this when refactoring shortcuts to use action specs
+  },
+  [Action.MoveCursorDown]: {
+    label: 'Move cursor down',
+    run: () => {}, // TODO(ayush): add this when refactoring shortcuts to use action specs
+  },
+  [Action.JumpCursorContentBottom]: {
+    label: 'Jump cursor content bottom',
+    run: () => {}, // TODO(ayush): add this when refactoring shortcuts to use action specs
+  },
+  [Action.ExpandSelectionDown]: {
+    label: 'Expand selection down',
+    run: () => {}, // TODO(ayush): add this when refactoring shortcuts to use action specs
+  },
+  [Action.ExpandSelectionContentBottom]: {
+    label: 'Expand selection content bottom',
+    run: () => {}, // TODO(ayush): add this when refactoring shortcuts to use action specs
+  },
+  [Action.MoveCursorLeft]: {
+    label: 'Move cursor left',
+    run: () => {}, // TODO(ayush): add this when refactoring shortcuts to use action specs
+  },
+  [Action.JumpCursorContentLeft]: {
+    label: 'Jump cursor content left',
+    run: () => {}, // TODO(ayush): add this when refactoring shortcuts to use action specs
+  },
+  [Action.ExpandSelectionLeft]: {
+    label: 'Expand selection left',
+    run: () => {}, // TODO(ayush): add this when refactoring shortcuts to use action specs
+  },
+  [Action.ExpandSelectionContentLeft]: {
+    label: 'Expand selection content left',
+    run: () => {}, // TODO(ayush): add this when refactoring shortcuts to use action specs
+  },
+  [Action.MoveCursorLeftWithSelection]: {
+    label: 'Move cursor left with selection',
+    run: () => {
+      const cursor = sheets.sheet.cursor;
+      const cursorPosition = cursor.cursorPosition;
+      cursor.changePosition({
+        keyboardMovePosition: {
+          x: cursorPosition.x - 1,
+          y: cursorPosition.y,
+        },
+        cursorPosition: {
+          x: cursorPosition.x - 1,
+          y: cursorPosition.y,
+        },
+      });
+    },
+  },
+  [Action.MoveCursorRight]: {
+    label: 'Move cursor right',
+    run: () => {}, // TODO(ayush): add this when refactoring shortcuts to use action specs
+  },
+  [Action.JumpCursorContentRight]: {
+    label: 'Jump cursor content right',
+    run: () => {}, // TODO(ayush): add this when refactoring shortcuts to use action specs
+  },
+  [Action.ExpandSelectionRight]: {
+    label: 'Expand selection right',
+    run: () => {}, // TODO(ayush): add this when refactoring shortcuts to use action specs
+  },
+  [Action.ExpandSelectionContentRight]: {
+    label: 'Expand selection content right',
+    run: () => {}, // TODO(ayush): add this when refactoring shortcuts to use action specs
+  },
+  [Action.MoveCursorRightWithSelection]: {
+    label: 'Move cursor right with selection',
+    run: () => {
+      const cursor = sheets.sheet.cursor;
+      const cursorPosition = cursor.cursorPosition;
+      cursor.changePosition({
+        keyboardMovePosition: {
+          x: cursorPosition.x + 1,
+          y: cursorPosition.y,
+        },
+        cursorPosition: {
+          x: cursorPosition.x + 1,
+          y: cursorPosition.y,
+        },
+      });
+    },
+  },
+  [Action.GotoA0]: {
+    label: 'Goto A0',
+    run: () => {}, // TODO(ayush): add this when refactoring shortcuts to use action specs
+  },
+  [Action.GotoBottomRight]: {
+    label: 'Goto bottom right',
+    run: () => {}, // TODO(ayush): add this when refactoring shortcuts to use action specs
+  },
+  [Action.GotoRowStart]: {
+    label: 'Goto row start',
+    run: () => {}, // TODO(ayush): add this when refactoring shortcuts to use action specs
+  },
+  [Action.GotoRowEnd]: {
+    label: 'Goto row end',
+    run: () => {}, // TODO(ayush): add this when refactoring shortcuts to use action specs
+  },
+};
diff --git a/quadratic-client/src/app/actions/viewActionsSpec.ts b/quadratic-client/src/app/actions/viewActionsSpec.ts
new file mode 100644
index 0000000000..e26bd480ec
--- /dev/null
+++ b/quadratic-client/src/app/actions/viewActionsSpec.ts
@@ -0,0 +1,175 @@
+import { Action } from '@/app/actions/actions';
+import { ActionSpecRecord } from '@/app/actions/actionsSpec';
+import { openCodeEditor } from '@/app/grid/actions/openCodeEditor';
+import { sheets } from '@/app/grid/controller/Sheets';
+import { zoomIn, zoomInOut, zoomOut, zoomToFit, zoomToSelection } from '@/app/gridGL/helpers/zoom';
+import { moveViewport } from '@/app/gridGL/interaction/viewportHelper';
+import { pixiAppSettings } from '@/app/gridGL/pixiApp/PixiAppSettings';
+import { CodeIcon, GoToIcon } from '@/shared/components/Icons';
+
+type ViewActionSpec = Pick<
+  ActionSpecRecord,
+  | Action.ZoomIn
+  | Action.ZoomOut
+  | Action.ZoomToSelection
+  | Action.ZoomToFit
+  | Action.ZoomTo50
+  | Action.ZoomTo100
+  | Action.ZoomTo200
+  | Action.GridPanMode
+  | Action.ShowCommandPalette
+  | Action.TogglePresentationMode
+  | Action.CloseOverlay
+  | Action.SwitchSheetNext
+  | Action.SwitchSheetPrevious
+  | Action.PageUp
+  | Action.PageDown
+  | Action.ShowGoToMenu
+  | Action.ShowCellTypeMenu
+>;
+
+export const viewActionsSpec: ViewActionSpec = {
+  [Action.ZoomIn]: {
+    label: 'Zoom in',
+    run: () => {
+      zoomIn();
+    },
+  },
+  [Action.ZoomOut]: {
+    label: 'Zoom out',
+    run: () => {
+      zoomOut();
+    },
+  },
+  [Action.ZoomToSelection]: {
+    label: 'Zoom to selection',
+    run: () => {
+      zoomToSelection();
+    },
+  },
+  [Action.ZoomToFit]: {
+    label: 'Zoom to fit',
+    run: () => {
+      zoomToFit();
+    },
+  },
+  [Action.ZoomTo50]: {
+    label: 'Zoom to 50%',
+    run: () => {
+      zoomInOut(0.5);
+    },
+  },
+  [Action.ZoomTo100]: {
+    label: 'Zoom to 100%',
+    run: () => {
+      zoomInOut(1);
+    },
+  },
+  [Action.ZoomTo200]: {
+    label: 'Zoom to 200%',
+    run: () => {
+      zoomInOut(2);
+    },
+  },
+  [Action.GridPanMode]: {
+    label: 'Grid pan mode',
+    run: () => {}, // TODO(ayush): add this when refactoring shortcuts to use action specs
+  },
+  [Action.ShowCommandPalette]: {
+    label: 'Show command palette',
+    run: () => {
+      if (!pixiAppSettings.setEditorInteractionState) return;
+      pixiAppSettings.setEditorInteractionState((prev) => ({
+        ...prev,
+        showFeedbackMenu: false,
+        showCellTypeMenu: false,
+        showGoToMenu: false,
+        showShareFileMenu: false,
+        showCommandPalette: !prev.showCommandPalette,
+      }));
+    },
+  },
+  [Action.TogglePresentationMode]: {
+    label: 'Toggle presentation mode',
+    run: () => {
+      if (!pixiAppSettings.setGridSettings) return;
+      pixiAppSettings.setGridSettings((prev) => ({
+        ...prev,
+        presentationMode: !prev.presentationMode,
+      }));
+    },
+  },
+  [Action.CloseOverlay]: {
+    label: 'Close overlay',
+    run: () => {
+      if (pixiAppSettings.setGridSettings) {
+        pixiAppSettings.setGridSettings((prev) => ({
+          ...prev,
+          presentationMode: false,
+        }));
+      }
+      if (pixiAppSettings.setEditorInteractionState) {
+        pixiAppSettings.setEditorInteractionState((prev) => ({
+          ...prev,
+          showCellTypeMenu: false,
+          showCodeEditor: false,
+          showCommandPalette: false,
+          showConnectionsMenu: false,
+          showGoToMenu: false,
+          showFeedbackMenu: false,
+          showNewFileMenu: false,
+          showRenameFileMenu: false,
+          showShareFileMenu: false,
+          showSearch: false,
+          showValidation: false,
+          showAI: false,
+        }));
+      }
+    },
+  },
+  [Action.SwitchSheetNext]: {
+    label: 'Switch sheet next',
+    run: () => {
+      if (sheets.size > 1) {
+        const nextSheet = sheets.getNext(sheets.sheet.order) ?? sheets.getFirst();
+        sheets.current = nextSheet.id;
+      }
+    },
+  },
+  [Action.SwitchSheetPrevious]: {
+    label: 'Switch sheet previous',
+    run: () => {
+      if (sheets.size > 1) {
+        const previousSheet = sheets.getPrevious(sheets.sheet.order) ?? sheets.getLast();
+        sheets.current = previousSheet.id;
+      }
+    },
+  },
+  [Action.PageUp]: {
+    label: 'Page up',
+    run: () => {
+      moveViewport({ pageUp: true });
+    },
+  },
+  [Action.PageDown]: {
+    label: 'Page down',
+    run: () => {
+      moveViewport({ pageDown: true });
+    },
+  },
+  [Action.ShowGoToMenu]: {
+    label: 'Go to',
+    Icon: GoToIcon,
+    run: () => {
+      if (!pixiAppSettings.setEditorInteractionState) return;
+      pixiAppSettings.setEditorInteractionState((prev) => ({ ...prev, showGoToMenu: true }));
+    },
+  },
+  [Action.ShowCellTypeMenu]: {
+    label: 'Code editor',
+    Icon: CodeIcon,
+    run: () => {
+      openCodeEditor();
+    },
+  },
+};
diff --git a/quadratic-client/src/app/atoms/editorInteractionStateAtom.ts b/quadratic-client/src/app/atoms/editorInteractionStateAtom.ts
index 7eeb5510eb..38fe6ad3a1 100644
--- a/quadratic-client/src/app/atoms/editorInteractionStateAtom.ts
+++ b/quadratic-client/src/app/atoms/editorInteractionStateAtom.ts
@@ -5,6 +5,7 @@ import { FilePermission } from 'quadratic-shared/typesAndSchemas';
 import { atom, DefaultValue } from 'recoil';
 
 export interface EditorInteractionState {
+  isRunningAsyncAction: boolean;
   showCellTypeMenu: boolean;
   showCodeEditor: boolean;
   showCommandPalette: boolean;
@@ -12,9 +13,11 @@ export interface EditorInteractionState {
   showGoToMenu: boolean;
   showFeedbackMenu: boolean;
   showNewFileMenu: boolean;
+  showRenameFileMenu: boolean;
   showShareFileMenu: boolean;
   showSearch: boolean | SearchOptions;
   showValidation: boolean | string;
+  showAI: boolean;
   annotationState?: 'dropdown' | 'date-format' | 'calendar' | 'calendar-time';
   showContextMenu: boolean;
   permissions: FilePermission[];
@@ -38,6 +41,7 @@ export interface EditorInteractionState {
 }
 
 export const editorInteractionStateDefault: EditorInteractionState = {
+  isRunningAsyncAction: false,
   showCellTypeMenu: false,
   showCodeEditor: false,
   showCommandPalette: false,
@@ -45,10 +49,12 @@ export const editorInteractionStateDefault: EditorInteractionState = {
   showGoToMenu: false,
   showFeedbackMenu: false,
   showNewFileMenu: false,
+  showRenameFileMenu: false,
   showShareFileMenu: false,
   showSearch: false,
   showContextMenu: false,
   showValidation: false,
+  showAI: false,
   annotationState: undefined,
   permissions: ['FILE_VIEW'], // FYI: when we call <RecoilRoot> we initialize this with the value from the server
   uuid: '', // when we call <RecoilRoot> we initialize this with the value from the server
@@ -76,8 +82,10 @@ export const editorInteractionStateAtom = atom({
           oldValue.showGoToMenu ||
           oldValue.showFeedbackMenu ||
           oldValue.showNewFileMenu ||
+          oldValue.showRenameFileMenu ||
           oldValue.showShareFileMenu ||
-          oldValue.showSearch;
+          oldValue.showSearch ||
+          oldValue.showAI;
         const newModelShow =
           newValue.showCellTypeMenu ||
           newValue.showCodeEditor ||
@@ -86,8 +94,10 @@ export const editorInteractionStateAtom = atom({
           newValue.showGoToMenu ||
           newValue.showFeedbackMenu ||
           newValue.showNewFileMenu ||
+          newValue.showRenameFileMenu ||
           newValue.showShareFileMenu ||
-          newValue.showSearch;
+          newValue.showSearch ||
+          newValue.showAI;
         if (oldModalShow && !newModelShow) {
           focusGrid();
         }
diff --git a/quadratic-client/src/app/atoms/gridHeadingAtom.ts b/quadratic-client/src/app/atoms/gridHeadingAtom.ts
new file mode 100644
index 0000000000..1623975ce2
--- /dev/null
+++ b/quadratic-client/src/app/atoms/gridHeadingAtom.ts
@@ -0,0 +1,39 @@
+import { events } from '@/app/events/events';
+import { Point } from 'pixi.js';
+import { atom } from 'recoil';
+
+interface GridHeading {
+  world?: Point;
+  column?: number;
+  row?: number;
+}
+
+const defaultGridHeadingState: GridHeading = {
+  world: undefined,
+  column: undefined,
+  row: undefined,
+};
+
+export const gridHeadingAtom = atom({
+  key: 'gridHeadingState',
+  default: defaultGridHeadingState,
+  effects: [
+    ({ setSelf }) => {
+      const clear = () => {
+        setSelf(() => ({ world: undefined, column: undefined, row: undefined }));
+      };
+
+      const set = (world?: Point, column?: number, row?: number) => {
+        setSelf(() => ({ world, column, row }));
+      };
+
+      events.on('cursorPosition', clear);
+      events.on('gridContextMenu', set);
+
+      return () => {
+        events.off('cursorPosition', clear);
+        events.off('gridContextMenu', set);
+      };
+    },
+  ],
+});
diff --git a/quadratic-client/src/app/events/events.ts b/quadratic-client/src/app/events/events.ts
index 9f5459b8be..7ede9e24ca 100644
--- a/quadratic-client/src/app/events/events.ts
+++ b/quadratic-client/src/app/events/events.ts
@@ -1,3 +1,4 @@
+import { ErrorValidation } from '@/app/gridGL/cells/CellsSheet';
 import { EditingCell } from '@/app/gridGL/HTMLGrid/hoverCell/HoverCell';
 import { PanMode } from '@/app/gridGL/pixiApp/PixiAppSettings';
 import { SheetPosTS } from '@/app/gridGL/types/size';
@@ -28,7 +29,6 @@ import {
 } from '@/app/web-workers/quadraticCore/coreClientMessages';
 import EventEmitter from 'eventemitter3';
 import { Point } from 'pixi.js';
-import { ErrorValidation } from '../gridGL/cells/CellsSheet';
 
 interface EventTypes {
   needRefresh: (state: 'required' | 'recommended' | 'force') => void;
@@ -124,6 +124,8 @@ interface EventTypes {
 
   // when validation changes state
   validation: (validation: string | boolean) => void;
+  // context menu opens on a grid heading
+  gridContextMenu: (world: Point, column: number, row: number) => void;
 }
 
 export const events = new EventEmitter<EventTypes>();
diff --git a/quadratic-client/src/app/grid/sheet/SheetCursor.ts b/quadratic-client/src/app/grid/sheet/SheetCursor.ts
index 013ed03d5c..212fe67229 100644
--- a/quadratic-client/src/app/grid/sheet/SheetCursor.ts
+++ b/quadratic-client/src/app/grid/sheet/SheetCursor.ts
@@ -240,4 +240,12 @@ export class SheetCursor {
   overlapsSelection(selection: Selection): boolean {
     return selectionOverlapsSelection(this.getRustSelection(), selection);
   }
+
+  includesCell(column: number, row: number): boolean {
+    if (this.multiCursor) {
+      return this.multiCursor.some((rect) => rect.contains(column, row));
+    } else {
+      return this.cursorPosition.x === column && this.cursorPosition.y === row;
+    }
+  }
 }
diff --git a/quadratic-client/src/app/gridGL/HTMLGrid/GridContextMenu.tsx b/quadratic-client/src/app/gridGL/HTMLGrid/GridContextMenu.tsx
new file mode 100644
index 0000000000..a5a1ac4ff0
--- /dev/null
+++ b/quadratic-client/src/app/gridGL/HTMLGrid/GridContextMenu.tsx
@@ -0,0 +1,118 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+//! This shows the grid heading context menu.
+
+import { Action } from '@/app/actions/actions';
+import { defaultActionSpec } from '@/app/actions/defaultActionsSpec';
+import { gridHeadingAtom } from '@/app/atoms/gridHeadingAtom';
+import { events } from '@/app/events/events';
+import { focusGrid } from '@/app/helpers/focusGrid';
+import { keyboardShortcutEnumToDisplay } from '@/app/helpers/keyboardShortcutsDisplay';
+import { useIsAvailableArgs } from '@/app/ui/hooks/useIsAvailableArgs';
+import { IconComponent } from '@/shared/components/Icons';
+import { ControlledMenu, MenuItem } from '@szhsin/react-menu';
+import { Point } from 'pixi.js';
+import { useCallback, useEffect, useRef } from 'react';
+import { useRecoilState } from 'recoil';
+import { pixiApp } from '../pixiApp/PixiApp';
+
+export const GridContextMenu = () => {
+  const [show, setShow] = useRecoilState(gridHeadingAtom);
+
+  const onClose = useCallback(() => {
+    setShow({ world: undefined, column: undefined, row: undefined });
+    focusGrid();
+  }, [setShow]);
+
+  useEffect(() => {
+    pixiApp.viewport.on('moved', onClose);
+    pixiApp.viewport.on('zoomed', onClose);
+
+    return () => {
+      pixiApp.viewport.off('moved', onClose);
+      pixiApp.viewport.off('zoomed', onClose);
+    };
+  }, [onClose]);
+
+  useEffect(() => {
+    const updateGridMenu = (world: Point, column: number, row: number) => {
+      setShow({ world, column, row });
+    };
+    events.on('gridContextMenu', updateGridMenu);
+
+    return () => {
+      events.off('gridContextMenu', updateGridMenu);
+    };
+  }, [setShow]);
+
+  const ref = useRef<HTMLDivElement>(null);
+
+  return (
+    <div
+      className="absolute"
+      ref={ref}
+      style={{
+        left: show.world?.x ?? 0,
+        top: show.world?.y ?? 0,
+        transform: `scale(${1 / pixiApp.viewport.scale.x})`,
+        pointerEvents: 'auto',
+      }}
+    >
+      <ControlledMenu
+        state={show?.world ? 'open' : 'closed'}
+        onClose={onClose}
+        anchorRef={ref}
+        menuStyle={{ padding: '0', color: 'inherit' }}
+        menuClassName="bg-background"
+      >
+        <MenuItemAction action={Action.Cut} />
+        <MenuItemAction action={Action.Copy} />
+        <MenuItemAction action={Action.Paste} />
+        <MenuItemAction action={Action.PasteValuesOnly} />
+        <MenuItemAction action={Action.PasteFormattingOnly} />
+        <MenuItemAction action={Action.CopyAsPng} />
+        <MenuItemAction action={Action.DownloadAsCsv} />
+      </ControlledMenu>
+    </div>
+  );
+};
+
+function MenuItemAction({ action }: { action: Action }) {
+  const { label, Icon, run, isAvailable } = defaultActionSpec[action];
+  const isAvailableArgs = useIsAvailableArgs();
+  const keyboardShortcut = keyboardShortcutEnumToDisplay(action);
+
+  if (isAvailable && !isAvailable(isAvailableArgs)) {
+    return null;
+  }
+
+  return (
+    <MenuItemShadStyle Icon={Icon} onClick={run} keyboardShortcut={keyboardShortcut}>
+      {label}
+    </MenuItemShadStyle>
+  );
+}
+
+function MenuItemShadStyle({
+  children,
+  Icon,
+  onClick,
+  keyboardShortcut,
+}: {
+  children: string;
+  Icon?: IconComponent;
+  onClick: any;
+  keyboardShortcut?: string;
+}) {
+  const menuItemClassName =
+    'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50';
+  return (
+    <MenuItem className={menuItemClassName} onClick={onClick}>
+      <span className="mr-4 flex items-center">
+        {Icon && <Icon className="-ml-3 mr-4" />} {children}
+      </span>
+      {keyboardShortcut && (
+        <span className="ml-auto text-xs tracking-widest text-muted-foreground">{keyboardShortcut}</span>
+      )}
+    </MenuItem>
+  );
+}
diff --git a/quadratic-client/src/app/gridGL/HTMLGrid/HTMLGridContainer.tsx b/quadratic-client/src/app/gridGL/HTMLGrid/HTMLGridContainer.tsx
index c168b975c5..3f3b509d71 100644
--- a/quadratic-client/src/app/gridGL/HTMLGrid/HTMLGridContainer.tsx
+++ b/quadratic-client/src/app/gridGL/HTMLGrid/HTMLGridContainer.tsx
@@ -1,15 +1,17 @@
 import { events } from '@/app/events/events';
+import { Annotations } from '@/app/gridGL/HTMLGrid/annotations/Annotations';
+import { CodeHint } from '@/app/gridGL/HTMLGrid/CodeHint';
+import { CodeRunning } from '@/app/gridGL/HTMLGrid/codeRunning/CodeRunning';
+import { GridContextMenu } from '@/app/gridGL/HTMLGrid/GridContextMenu';
+import { HoverCell } from '@/app/gridGL/HTMLGrid/hoverCell/HoverCell';
+import { HtmlCells } from '@/app/gridGL/HTMLGrid/htmlCells/HtmlCells';
 import { InlineEditor } from '@/app/gridGL/HTMLGrid/inlineEditor/InlineEditor';
 import { MultiplayerCursors } from '@/app/gridGL/HTMLGrid/multiplayerCursor/MulitplayerCursors';
+import { MultiplayerCellEdits } from '@/app/gridGL/HTMLGrid/multiplayerInput/MultiplayerCellEdits';
+import { useHeadingSize } from '@/app/gridGL/HTMLGrid/useHeadingSize';
+import { HtmlValidations } from '@/app/gridGL/HTMLGrid/validations/HtmlValidations';
+import { pixiApp } from '@/app/gridGL/pixiApp/PixiApp';
 import { ReactNode, useCallback, useEffect, useState } from 'react';
-import { pixiApp } from '../pixiApp/PixiApp';
-import { CodeHint } from './CodeHint';
-import { CodeRunning } from './codeRunning/CodeRunning';
-import { HoverCell } from './hoverCell/HoverCell';
-import { HtmlCells } from './htmlCells/HtmlCells';
-import { MultiplayerCellEdits } from './multiplayerInput/MultiplayerCellEdits';
-import { HtmlValidations } from './validations/HtmlValidations';
-import { Annotations } from './annotations/Annotations';
 
 interface Props {
   parent?: HTMLDivElement;
@@ -23,11 +25,6 @@ export interface HtmlGridContainerProps {
 export const HTMLGridContainer = (props: Props): ReactNode | null => {
   const { parent } = props;
 
-  const [container, setContainer] = useState<HTMLDivElement>();
-  const containerRef = useCallback((node: HTMLDivElement) => {
-    if (node) setContainer(node);
-  }, []);
-
   const [showInput, setShowInput] = useState(false);
   useEffect(() => {
     const changeInput = (input: boolean) => setShowInput(input);
@@ -37,15 +34,28 @@ export const HTMLGridContainer = (props: Props): ReactNode | null => {
     };
   }, []);
 
+  // this one is not zoomed and positioned over the grid headings
+  const [normalContainer, setNormalContainer] = useState<HTMLDivElement>();
+  const normalRef = useCallback((node: HTMLDivElement) => {
+    if (node) setNormalContainer(node);
+  }, []);
+
+  const [zoomContainer, setZoomContainer] = useState<HTMLDivElement>();
+  const zoomRef = useCallback((node: HTMLDivElement) => {
+    if (node) setZoomContainer(node);
+  }, []);
+
   useEffect(() => {
-    if (!container || !parent) return;
+    if (!zoomContainer || !normalContainer || !parent) return;
     const viewport = pixiApp.viewport;
     const updateTransform = () => {
       viewport.updateTransform();
       let worldTransform = viewport.worldTransform;
-      container.style.transform = `matrix(${worldTransform.a}, ${worldTransform.b}, ${worldTransform.c}, ${
-        worldTransform.d
-      }, ${worldTransform.tx + parent.offsetLeft}, ${worldTransform.ty + parent.offsetTop})`;
+      const transform = `matrix(${worldTransform.a}, ${worldTransform.b}, ${worldTransform.c}, ${worldTransform.d}, ${
+        worldTransform.tx + parent.offsetLeft
+      }, ${worldTransform.ty + parent.offsetTop})`;
+      zoomContainer.style.transform = transform;
+      normalContainer.style.transform = transform;
     };
     updateTransform();
     viewport.on('moved', updateTransform);
@@ -58,58 +68,62 @@ export const HTMLGridContainer = (props: Props): ReactNode | null => {
       viewport.off('zoomed', updateTransform);
       window.removeEventListener('resize', updateTransform);
     };
-  }, [parent, container]);
+  }, [normalContainer, parent, zoomContainer]);
 
-  const [topHeading, setTopHeading] = useState(0);
-  const [leftHeading, setLeftHeading] = useState(0);
-  useEffect(() => {
-    const updateHeadingSize = (width: number, height: number) => {
-      setLeftHeading(width);
-      setTopHeading(height);
-    };
-    events.on('headingSize', updateHeadingSize);
-    return () => {
-      events.off('headingSize', updateHeadingSize);
-    };
-  }, []);
+  const { leftHeading, topHeading } = useHeadingSize();
 
   if (!parent) return null;
 
   return (
-    <div
-      style={{
-        position: 'absolute',
-        left: `${leftHeading}px`,
-        top: `${topHeading}px`,
-        overflow: 'hidden',
-        width: `calc(100% - ${leftHeading}px)`,
-        height: `calc(100% - ${topHeading}px)`,
-        pointerEvents: 'none',
-      }}
-    >
-      <div style={{ position: 'relative' }}>
-        <div
-          ref={containerRef}
-          style={{
-            position: 'absolute',
-            top: `${-topHeading}px`,
-            left: `${-leftHeading}px`,
-            pointerEvents: 'none',
-          }}
-        >
-          <div style={{ position: 'relative' }}>
-            {!showInput && <CodeHint />}
-            <MultiplayerCellEdits />
-            <InlineEditor />
-            <HtmlCells />
-            <CodeRunning />
-            <HoverCell />
-            <MultiplayerCursors topHeading={topHeading} leftHeading={leftHeading} />
-            <HtmlValidations />
-            <Annotations />
+    <>
+      {/* This is positioned on the grid inside the headings and zoomed */}
+      <div
+        style={{
+          position: 'absolute',
+          left: `${leftHeading}px`,
+          top: `${topHeading}px`,
+          overflow: 'hidden',
+          width: `calc(100% - ${leftHeading}px)`,
+          height: `calc(100% - ${topHeading}px)`,
+          pointerEvents: 'none',
+        }}
+      >
+        <div style={{ position: 'relative' }}>
+          <div
+            ref={zoomRef}
+            style={{
+              position: 'absolute',
+              top: `${-topHeading}px`,
+              left: `${-leftHeading}px`,
+              pointerEvents: 'none',
+            }}
+          >
+            <div style={{ position: 'relative' }}>
+              {!showInput && <CodeHint />}
+              <MultiplayerCellEdits />
+              <InlineEditor />
+              <HtmlCells />
+              <CodeRunning />
+              <HoverCell />
+              <MultiplayerCursors topHeading={topHeading} leftHeading={leftHeading} />
+              <HtmlValidations />
+              <Annotations />
+            </div>
           </div>
         </div>
       </div>
-    </div>
+
+      {/* This is positioned on the grid over the headings and not zoomed. It comes
+          after the above, so it's above it on the grid. */}
+      <div
+        ref={normalRef}
+        style={{
+          position: 'absolute',
+          pointerEvents: 'none',
+        }}
+      >
+        <GridContextMenu />
+      </div>
+    </>
   );
 };
diff --git a/quadratic-client/src/app/gridGL/HTMLGrid/annotations/Annotations.tsx b/quadratic-client/src/app/gridGL/HTMLGrid/annotations/Annotations.tsx
index 8df3588b3c..15fcb32b22 100644
--- a/quadratic-client/src/app/gridGL/HTMLGrid/annotations/Annotations.tsx
+++ b/quadratic-client/src/app/gridGL/HTMLGrid/annotations/Annotations.tsx
@@ -1,10 +1,10 @@
+import { events } from '@/app/events/events';
+import { sheets } from '@/app/grid/controller/Sheets';
+import { Rectangle } from 'pixi.js';
 import { useEffect, useRef, useState } from 'react';
 import { usePositionCellMessage } from '../usePositionCellMessage';
-import { DateFormatCell } from './DateFormatCell';
-import { Rectangle } from 'pixi.js';
-import { sheets } from '@/app/grid/controller/Sheets';
-import { events } from '@/app/events/events';
 import { CalendarPicker } from './CalendarPicker';
+import { pixiApp } from '../../pixiApp/PixiApp';
 
 export const Annotations = () => {
   const ref = useRef<HTMLDivElement>(null);
@@ -27,8 +27,11 @@ export const Annotations = () => {
   const { top, left } = usePositionCellMessage({ div: ref.current, offsets, direction: 'vertical' });
 
   return (
-    <div ref={ref} className="absolute" style={{ top, left }}>
-      <DateFormatCell />
+    <div
+      ref={ref}
+      className="absolute"
+      style={{ top, left, transformOrigin: `0 0`, transform: `scale(${1 / pixiApp.viewport.scale.x})` }}
+    >
       <CalendarPicker />
     </div>
   );
diff --git a/quadratic-client/src/app/gridGL/HTMLGrid/annotations/DateFormatCell.tsx b/quadratic-client/src/app/gridGL/HTMLGrid/annotations/DateFormatCell.tsx
deleted file mode 100644
index 3bc4ba5d25..0000000000
--- a/quadratic-client/src/app/gridGL/HTMLGrid/annotations/DateFormatCell.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { editorInteractionStateAtom } from '@/app/atoms/editorInteractionStateAtom';
-import { focusGrid } from '@/app/helpers/focusGrid';
-import { DateFormat } from '@/app/ui/components/DateFormat';
-import { useRecoilState } from 'recoil';
-
-export const DateFormatCell = () => {
-  const [editorInteractionState, setEditorInteractionState] = useRecoilState(editorInteractionStateAtom);
-
-  const close = () => {
-    setEditorInteractionState((state) => ({
-      ...state,
-      annotationState: undefined,
-    }));
-    focusGrid();
-  };
-
-  if (editorInteractionState.annotationState !== 'date-format') return null;
-  return (
-    <div
-      className="pointer-events-auto rounded border bg-white p-4 shadow"
-      style={{ width: 340 }}
-      onKeyDown={(e) => {
-        if (e.key === 'Enter' || e.key === 'Escape') {
-          close();
-          e.preventDefault();
-        }
-        e.stopPropagation();
-      }}
-    >
-      <DateFormat status={true} closeMenu={close} />
-    </div>
-  );
-};
diff --git a/quadratic-client/src/app/gridGL/HTMLGrid/hoverCell/HoverCell.tsx b/quadratic-client/src/app/gridGL/HTMLGrid/hoverCell/HoverCell.tsx
index 6b761503de..b2bebadb5c 100644
--- a/quadratic-client/src/app/gridGL/HTMLGrid/hoverCell/HoverCell.tsx
+++ b/quadratic-client/src/app/gridGL/HTMLGrid/hoverCell/HoverCell.tsx
@@ -4,14 +4,14 @@ import { pixiApp } from '@/app/gridGL/pixiApp/PixiApp';
 import { getLanguage } from '@/app/helpers/codeCellLanguage';
 import { pluralize } from '@/app/helpers/pluralize';
 import { JsRenderCodeCell } from '@/app/quadratic-core-types';
-import { useGridSettings } from '@/app/ui/menus/TopBar/SubMenus/useGridSettings';
+import { useGridSettings } from '@/app/ui/hooks/useGridSettings';
 import { quadraticCore } from '@/app/web-workers/quadraticCore/quadraticCore';
+import { Rectangle } from 'pixi.js';
 import { ReactNode, useEffect, useRef, useState } from 'react';
-import './HoverCell.css';
 import { ErrorValidation } from '../../cells/CellsSheet';
-import { HtmlValidationMessage } from '../validations/HtmlValidationMessage';
 import { usePositionCellMessage } from '../usePositionCellMessage';
-import { Rectangle } from 'pixi.js';
+import { HtmlValidationMessage } from '../validations/HtmlValidationMessage';
+import './HoverCell.css';
 
 export interface EditingCell {
   x: number;
@@ -168,7 +168,13 @@ export const HoverCell = () => {
     <div
       ref={ref}
       className="absolute z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground opacity-0 shadow-md outline-none"
-      style={{ left, top, visibility: !onlyCode || showCodePeek ? 'visible' : 'hidden' }}
+      style={{
+        left,
+        top,
+        visibility: !onlyCode || showCodePeek ? 'visible' : 'hidden',
+        transformOrigin: `0 0`,
+        transform: `scale(${1 / pixiApp.viewport.scale.x})`,
+      }}
     >
       {text}
     </div>
diff --git a/quadratic-client/src/app/gridGL/HTMLGrid/htmlCells/HtmlCell.ts b/quadratic-client/src/app/gridGL/HTMLGrid/htmlCells/HtmlCell.ts
index 93a85bf5b3..69f71dfc9d 100644
--- a/quadratic-client/src/app/gridGL/HTMLGrid/htmlCells/HtmlCell.ts
+++ b/quadratic-client/src/app/gridGL/HTMLGrid/htmlCells/HtmlCell.ts
@@ -232,10 +232,10 @@ export class HtmlCell {
     const side = this.hoverSide;
 
     if (side === 'right' || side === 'corner') {
-      this.right.style.backgroundColor = colors.quadraticPrimary;
+      this.right.style.backgroundColor = 'hsl(var(--primary))';
     }
     if (side === 'bottom' || side === 'corner') {
-      this.bottom.style.backgroundColor = colors.quadraticPrimary;
+      this.bottom.style.backgroundColor = 'hsl(var(--primary))';
     }
 
     if (side === 'corner') {
diff --git a/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/inlineEditorKeyboard.ts b/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/inlineEditorKeyboard.ts
index 7aa84884db..8210a18f4c 100644
--- a/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/inlineEditorKeyboard.ts
+++ b/quadratic-client/src/app/gridGL/HTMLGrid/inlineEditor/inlineEditorKeyboard.ts
@@ -1,18 +1,19 @@
 //! This handles the keyboard events for the inline editor. In particular, it
 //! handles when the cursorIsMoving outside of the inline formula edit box.
 
+import { Action } from '@/app/actions/actions';
 import { events } from '@/app/events/events';
 import { sheets } from '@/app/grid/controller/Sheets';
 import { getSingleSelection } from '@/app/grid/sheet/selection';
 import { inlineEditorFormula } from '@/app/gridGL/HTMLGrid/inlineEditor/inlineEditorFormula';
 import { inlineEditorHandler } from '@/app/gridGL/HTMLGrid/inlineEditor/inlineEditorHandler';
 import { inlineEditorMonaco } from '@/app/gridGL/HTMLGrid/inlineEditor/inlineEditorMonaco';
+import { keyboardDropdown } from '@/app/gridGL/interaction/keyboard/keyboardDropdown';
 import { keyboardPosition } from '@/app/gridGL/interaction/keyboard/keyboardPosition';
 import { pixiApp } from '@/app/gridGL/pixiApp/PixiApp';
 import { pixiAppSettings } from '@/app/gridGL/pixiApp/PixiAppSettings';
 import { matchShortcut } from '@/app/helpers/keyboardShortcuts.js';
 import { quadraticCore } from '@/app/web-workers/quadraticCore/quadraticCore';
-import { keyboardDropdown } from '../../interaction/keyboard/keyboardDropdown';
 
 class InlineEditorKeyboard {
   escapeBackspacePressed = false;
@@ -122,7 +123,7 @@ class InlineEditorKeyboard {
     }
 
     // Escape key
-    if (matchShortcut('close_inline_editor', e)) {
+    if (matchShortcut(Action.CloseInlineEditor, e)) {
       e.stopPropagation();
       if (inlineEditorHandler.cursorIsMoving) {
         inlineEditorHandler.cursorIsMoving = false;
@@ -134,7 +135,7 @@ class InlineEditorKeyboard {
     }
 
     // Enter key
-    else if (matchShortcut('save_inline_editor', e)) {
+    else if (matchShortcut(Action.SaveInlineEditor, e)) {
       e.stopPropagation();
       e.preventDefault();
       if (!(await this.handleValidationError())) {
@@ -143,7 +144,7 @@ class InlineEditorKeyboard {
     }
 
     // Shift+Enter key
-    else if (matchShortcut('save_inline_editor_move_up', e)) {
+    else if (matchShortcut(Action.SaveInlineEditorMoveUp, e)) {
       e.stopPropagation();
       if (!(await this.handleValidationError())) {
         inlineEditorHandler.close(0, -1, false);
@@ -151,7 +152,7 @@ class InlineEditorKeyboard {
     }
 
     // Tab key
-    else if (matchShortcut('save_inline_editor_move_right', e)) {
+    else if (matchShortcut(Action.SaveInlineEditorMoveRight, e)) {
       e.stopPropagation();
       e.preventDefault();
       if (!(await this.handleValidationError())) {
@@ -160,7 +161,7 @@ class InlineEditorKeyboard {
     }
 
     // Shift+Tab key
-    else if (matchShortcut('save_inline_editor_move_left', e)) {
+    else if (matchShortcut(Action.SaveInlineEditorMoveLeft, e)) {
       e.stopPropagation();
       e.preventDefault();
       if (!(await this.handleValidationError())) {
@@ -170,40 +171,40 @@ class InlineEditorKeyboard {
 
     // Arrow up
     else if (
-      matchShortcut('move_cursor_up', e) ||
-      matchShortcut('expand_selection_up', e) ||
-      matchShortcut('jump_cursor_content_top', e) ||
-      matchShortcut('expand_selection_content_top', e)
+      matchShortcut(Action.MoveCursorUp, e) ||
+      matchShortcut(Action.ExpandSelectionUp, e) ||
+      matchShortcut(Action.JumpCursorContentTop, e) ||
+      matchShortcut(Action.ExpandSelectionContentTop, e)
     ) {
       this.handleArrowVertical(false, e);
     }
 
     // Arrow down
     else if (
-      matchShortcut('move_cursor_down', e) ||
-      matchShortcut('expand_selection_down', e) ||
-      matchShortcut('jump_cursor_content_bottom', e) ||
-      matchShortcut('expand_selection_content_bottom', e)
+      matchShortcut(Action.MoveCursorDown, e) ||
+      matchShortcut(Action.ExpandSelectionDown, e) ||
+      matchShortcut(Action.JumpCursorContentBottom, e) ||
+      matchShortcut(Action.ExpandSelectionContentBottom, e)
     ) {
       this.handleArrowVertical(true, e);
     }
 
     // Arrow left
     else if (
-      matchShortcut('move_cursor_left', e) ||
-      matchShortcut('expand_selection_left', e) ||
-      matchShortcut('jump_cursor_content_left', e) ||
-      matchShortcut('expand_selection_content_left', e)
+      matchShortcut(Action.MoveCursorLeft, e) ||
+      matchShortcut(Action.ExpandSelectionLeft, e) ||
+      matchShortcut(Action.JumpCursorContentLeft, e) ||
+      matchShortcut(Action.ExpandSelectionContentLeft, e)
     ) {
       this.handleArrowHorizontal(false, e);
     }
 
     // Arrow right
     else if (
-      matchShortcut('move_cursor_right', e) ||
-      matchShortcut('expand_selection_right', e) ||
-      matchShortcut('jump_cursor_content_right', e) ||
-      matchShortcut('expand_selection_content_right', e)
+      matchShortcut(Action.MoveCursorRight, e) ||
+      matchShortcut(Action.ExpandSelectionRight, e) ||
+      matchShortcut(Action.JumpCursorContentRight, e) ||
+      matchShortcut(Action.ExpandSelectionContentRight, e)
     ) {
       this.handleArrowHorizontal(true, e);
     }
@@ -216,7 +217,7 @@ class InlineEditorKeyboard {
     }
 
     // Backspace key cancels cursorIsMoving and removes any inserted cells.
-    else if (matchShortcut('remove_inserted_cells', e)) {
+    else if (matchShortcut(Action.RemoveInsertedCells, e)) {
       if (inlineEditorHandler.cursorIsMoving) {
         e.stopPropagation();
         e.preventDefault();
@@ -227,7 +228,7 @@ class InlineEditorKeyboard {
     }
 
     // toggle italics
-    else if (matchShortcut('toggle_italic', e)) {
+    else if (matchShortcut(Action.ToggleItalic, e)) {
       e.preventDefault();
       e.stopPropagation();
       inlineEditorHandler.toggleItalics();
@@ -242,7 +243,7 @@ class InlineEditorKeyboard {
     }
 
     // toggle bold
-    else if (matchShortcut('toggle_bold', e)) {
+    else if (matchShortcut(Action.ToggleBold, e)) {
       e.preventDefault();
       e.stopPropagation();
       if (inlineEditorHandler.location) {
@@ -257,7 +258,7 @@ class InlineEditorKeyboard {
     }
 
     // trigger cell type menu
-    else if (matchShortcut('show_cell_type_menu', e) && inlineEditorMonaco.get().length === 0) {
+    else if (matchShortcut(Action.ShowCellTypeMenu, e) && inlineEditorMonaco.get().length === 0) {
       e.preventDefault();
       e.stopPropagation();
       pixiAppSettings.changeInput(false);
diff --git a/quadratic-client/src/app/gridGL/HTMLGrid/useHeadingSize.ts b/quadratic-client/src/app/gridGL/HTMLGrid/useHeadingSize.ts
new file mode 100644
index 0000000000..7b5799ba79
--- /dev/null
+++ b/quadratic-client/src/app/gridGL/HTMLGrid/useHeadingSize.ts
@@ -0,0 +1,19 @@
+import { events } from '@/app/events/events';
+import { useEffect, useState } from 'react';
+
+export const useHeadingSize = (): { topHeading: number; leftHeading: number } => {
+  const [topHeading, setTopHeading] = useState(0);
+  const [leftHeading, setLeftHeading] = useState(0);
+  useEffect(() => {
+    const updateHeadingSize = (width: number, height: number) => {
+      setLeftHeading(width);
+      setTopHeading(height);
+    };
+    events.on('headingSize', updateHeadingSize);
+    return () => {
+      events.off('headingSize', updateHeadingSize);
+    };
+  }, []);
+
+  return { topHeading, leftHeading };
+};
diff --git a/quadratic-client/src/app/gridGL/HTMLGrid/usePositionCellMessage.ts b/quadratic-client/src/app/gridGL/HTMLGrid/usePositionCellMessage.ts
index 8020dc0e8a..eb3bf9e85b 100644
--- a/quadratic-client/src/app/gridGL/HTMLGrid/usePositionCellMessage.ts
+++ b/quadratic-client/src/app/gridGL/HTMLGrid/usePositionCellMessage.ts
@@ -33,12 +33,16 @@ export const usePositionCellMessage = (props: Props): PositionCellMessage => {
       if (!div || !offsets) return;
 
       const viewport = pixiApp.viewport;
+      const scale = pixiApp.viewport.scale.x;
       const bounds = viewport.getVisibleBounds();
 
       if (side === 'vertical') {
         setLeft(offsets.left);
         setTop(offsets.bottom);
       } else {
+        const offsetWidth = div.offsetWidth * scale;
+        const offsetHeight = div.offsetHeight * scale;
+
         // checks whether the inline editor or dropdown is open; if so, always
         // show to the left to avoid overlapping the content
         let triggerLeft = false;
@@ -46,21 +50,21 @@ export const usePositionCellMessage = (props: Props): PositionCellMessage => {
           triggerLeft = inlineEditorHandler.isOpen() || editorInteractionState.annotationState === 'dropdown';
         }
         // only box to the left if it doesn't fit.
-        if (triggerLeft || offsets.right + div.offsetWidth > bounds.right) {
+        if (triggerLeft || offsets.right + offsetWidth > bounds.right) {
           // box to the left
-          setLeft(offsets.left - div.offsetWidth);
+          setLeft(offsets.left - offsetWidth);
         } else {
           // box to the right
           setLeft(offsets.right);
         }
 
         // only box going up if it doesn't fit.
-        if (offsets.top + div.offsetHeight < bounds.bottom) {
+        if (offsets.top + offsetHeight < bounds.bottom) {
           // box going down
           setTop(offsets.top);
         } else {
           // box going up
-          setTop(offsets.bottom - div.offsetHeight);
+          setTop(offsets.bottom - offsetHeight);
         }
       }
     };
diff --git a/quadratic-client/src/app/gridGL/HTMLGrid/validations/HtmlValidationList.tsx b/quadratic-client/src/app/gridGL/HTMLGrid/validations/HtmlValidationList.tsx
index 5c48353b55..fc247e41c4 100644
--- a/quadratic-client/src/app/gridGL/HTMLGrid/validations/HtmlValidationList.tsx
+++ b/quadratic-client/src/app/gridGL/HTMLGrid/validations/HtmlValidationList.tsx
@@ -156,6 +156,8 @@ export const HtmlValidationList = (props: Props) => {
       style={{
         top: offsets.bottom,
         left: offsets.left,
+        transformOrigin: `0 0`,
+        transform: `scale(${1 / pixiApp.viewport.scale.x})`,
         minWidth: offsets.width,
         maxHeight: `min(50vh, calc(${viewportBottom - offsets.bottom}px))`,
       }}
diff --git a/quadratic-client/src/app/gridGL/HTMLGrid/validations/HtmlValidationMessage.tsx b/quadratic-client/src/app/gridGL/HTMLGrid/validations/HtmlValidationMessage.tsx
index 57f155654c..f069d5074f 100644
--- a/quadratic-client/src/app/gridGL/HTMLGrid/validations/HtmlValidationMessage.tsx
+++ b/quadratic-client/src/app/gridGL/HTMLGrid/validations/HtmlValidationMessage.tsx
@@ -147,7 +147,7 @@ export const HtmlValidationMessage = (props: Props) => {
     <div
       ref={ref}
       className="pointer-events-none absolute w-64 max-w-xs rounded-md border border-gray-300 bg-popover bg-white p-4 text-popover-foreground shadow-md outline-none"
-      style={{ top, left }}
+      style={{ top, left, transformOrigin: `0 0`, transform: `scale(${1 / pixiApp.viewport.scale.x})` }}
     >
       <div className="leading-2 whitespace-normal" style={wrapStyle}>
         <div className="flex items-start justify-between gap-2">
diff --git a/quadratic-client/src/app/gridGL/QuadraticGrid.tsx b/quadratic-client/src/app/gridGL/QuadraticGrid.tsx
index 09bea58d91..7714cbc0a0 100644
--- a/quadratic-client/src/app/gridGL/QuadraticGrid.tsx
+++ b/quadratic-client/src/app/gridGL/QuadraticGrid.tsx
@@ -1,17 +1,18 @@
+import { Action } from '@/app/actions/actions';
+import { editorInteractionStateAtom } from '@/app/atoms/editorInteractionStateAtom';
 import { inlineEditorAtom } from '@/app/atoms/inlineEditorAtom';
 import { events } from '@/app/events/events';
+import { HTMLGridContainer } from '@/app/gridGL/HTMLGrid/HTMLGridContainer';
+import { useKeyboard } from '@/app/gridGL/interaction/keyboard/useKeyboard';
+import { pixiApp } from '@/app/gridGL/pixiApp/PixiApp';
+import { PanMode, pixiAppSettings } from '@/app/gridGL/pixiApp/PixiAppSettings';
 import { matchShortcut } from '@/app/helpers/keyboardShortcuts.js';
 import { ImportProgress } from '@/app/ui/components/ImportProgress';
 import { Search } from '@/app/ui/components/Search';
+import { gridSettingsAtom } from '@/app/ui/hooks/useGridSettings';
 import { useGlobalSnackbar } from '@/shared/components/GlobalSnackbarProvider';
 import { MouseEvent, useCallback, useEffect, useState } from 'react';
 import { useRecoilState } from 'recoil';
-import { editorInteractionStateAtom } from '../atoms/editorInteractionStateAtom';
-import { FloatingContextMenu } from '../ui/menus/ContextMenu/FloatingContextMenu';
-import { HTMLGridContainer } from './HTMLGrid/HTMLGridContainer';
-import { useKeyboard } from './interaction/keyboard/useKeyboard';
-import { pixiApp } from './pixiApp/PixiApp';
-import { PanMode, pixiAppSettings } from './pixiApp/PixiAppSettings';
 
 // Keep track of state of mouse/space for panning mode
 let mouseIsDown = false;
@@ -49,6 +50,11 @@ export default function QuadraticGrid() {
     pixiAppSettings.addGlobalSnackbar = addGlobalSnackbar;
   }, [addGlobalSnackbar]);
 
+  const [gridSettings, setGridSettings] = useRecoilState(gridSettingsAtom);
+  useEffect(() => {
+    pixiAppSettings.updateGridSettings(gridSettings, setGridSettings);
+  }, [gridSettings, setGridSettings]);
+
   // Pan mode
   const onMouseUp = () => {
     mouseIsDown = false;
@@ -69,20 +75,24 @@ export default function QuadraticGrid() {
     window.addEventListener('mouseup', onMouseUp);
   };
   const onKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {
-    if (matchShortcut('grid_pan_mode', e)) {
+    if (matchShortcut(Action.GridPanMode, e)) {
       spaceIsDown = true;
       if (panMode === PanMode.Disabled) {
         pixiAppSettings.changePanMode(PanMode.Enabled);
       }
+      return true;
     }
+    return false;
   };
   const onKeyUp = (e: React.KeyboardEvent<HTMLElement>) => {
-    if (matchShortcut('grid_pan_mode', e)) {
+    if (matchShortcut(Action.GridPanMode, e)) {
       spaceIsDown = false;
       if (panMode !== PanMode.Disabled && !mouseIsDown) {
         pixiAppSettings.changePanMode(PanMode.Disabled);
       }
+      return true;
     }
+    return false;
   };
 
   const { onKeyDown: onKeyDownFromUseKeyboard } = useKeyboard({
@@ -118,13 +128,11 @@ export default function QuadraticGrid() {
         }
       }}
       onKeyDown={(e) => {
-        onKeyDown(e);
-        onKeyDownFromUseKeyboard(e);
+        onKeyDown(e) || onKeyDownFromUseKeyboard(e);
       }}
       onKeyUp={onKeyUp}
     >
       <HTMLGridContainer parent={container} />
-      <FloatingContextMenu container={container} />
       <ImportProgress />
       <Search />
     </div>
diff --git a/quadratic-client/src/app/gridGL/UI/GridLines.ts b/quadratic-client/src/app/gridGL/UI/GridLines.ts
index 5d12590f7e..0b8bdd37d2 100644
--- a/quadratic-client/src/app/gridGL/UI/GridLines.ts
+++ b/quadratic-client/src/app/gridGL/UI/GridLines.ts
@@ -26,7 +26,7 @@ export class GridLines extends Graphics {
   gridLinesY: GridLine[] = [];
 
   draw(bounds: Rectangle): void {
-    this.lineStyle({ width: 1, color: colors.gridLines, alpha: 0.125, alignment: 0.5, native: false });
+    this.lineStyle({ width: 1, color: colors.gridLines, alpha: 0.2, alignment: 0.5, native: false });
     const range = this.drawHorizontalLines(bounds);
     this.drawVerticalLines(bounds, range);
     this.dirty = false;
@@ -53,7 +53,7 @@ export class GridLines extends Graphics {
       this.alpha = gridAlpha;
       this.visible = true;
 
-      this.lineStyle(1, colors.gridLines, 0.125, 0.5, true);
+      this.lineStyle(1, colors.gridLines, 0.2, 0.5, true);
       this.gridLinesX = [];
       this.gridLinesY = [];
       const range = this.drawHorizontalLines(bounds);
diff --git a/quadratic-client/src/app/gridGL/UI/UICellImages.ts b/quadratic-client/src/app/gridGL/UI/UICellImages.ts
index eb0b232980..d230eb7723 100644
--- a/quadratic-client/src/app/gridGL/UI/UICellImages.ts
+++ b/quadratic-client/src/app/gridGL/UI/UICellImages.ts
@@ -1,6 +1,5 @@
 import { events } from '@/app/events/events';
 import { convertColorStringToTint } from '@/app/helpers/convertColor';
-import { colors } from '@/app/theme/colors';
 import { Container, Graphics } from 'pixi.js';
 import { CellsImage } from '../cells/cellsImages/CellsImage';
 import { pixiApp } from '../pixiApp/PixiApp';
@@ -58,7 +57,8 @@ export class UICellImages extends Container {
       this.borders.clear();
       const images = pixiApp.cellsSheets.current?.getCellsImages();
       if (!images) return true;
-      const color = convertColorStringToTint(colors.quadraticPrimary);
+      const hslColorFromCssVar = window.getComputedStyle(document.documentElement).getPropertyValue('--primary');
+      const color = convertColorStringToTint(`hsl(${hslColorFromCssVar})`);
       this.borders.lineStyle({ color, width: 1 });
       images.forEach((image) => {
         this.borders.drawRect(image.x, image.y, image.width, image.height);
@@ -74,7 +74,8 @@ export class UICellImages extends Container {
 
       this.resizing.clear();
       if (this.active) {
-        const color = convertColorStringToTint(colors.quadraticPrimary);
+        const hslColorFromCssVar = window.getComputedStyle(document.documentElement).getPropertyValue('--primary');
+        const color = convertColorStringToTint(`hsl(${hslColorFromCssVar})`);
         this.resizing.lineStyle({ color, width: IMAGE_BORDER_WIDTH });
 
         // vertical line on the right
diff --git a/quadratic-client/src/app/gridGL/UI/gridHeadings/GridHeadings.ts b/quadratic-client/src/app/gridGL/UI/gridHeadings/GridHeadings.ts
index bc392fd952..269f6e8994 100644
--- a/quadratic-client/src/app/gridGL/UI/gridHeadings/GridHeadings.ts
+++ b/quadratic-client/src/app/gridGL/UI/gridHeadings/GridHeadings.ts
@@ -94,7 +94,10 @@ export class GridHeadings extends Container {
 
     // fill the entire viewport if all cells are selected
     if (cursor.columnRow?.all) {
-      this.headingsGraphics.beginFill(colors.headerSelectedRowColumnBackgroundColor);
+      this.headingsGraphics.beginFill(
+        colors.headerSelectedRowColumnBackgroundColor,
+        colors.headerSelectedRowColumnBackgroundColorAlpha
+      );
       this.headingsGraphics.drawRect(viewport.left, viewport.top, viewport.screenWidthInWorldPixels, cellHeight);
       this.headingsGraphics.endFill();
       return 'all';
@@ -102,7 +105,10 @@ export class GridHeadings extends Container {
 
     // dark fill headings if there is a columnRow selection
     if (cursor.columnRow?.columns) {
-      this.headingsGraphics.beginFill(colors.headerSelectedRowColumnBackgroundColor);
+      this.headingsGraphics.beginFill(
+        colors.headerSelectedRowColumnBackgroundColor,
+        colors.headerSelectedRowColumnBackgroundColorAlpha
+      );
       cursor.columnRow.columns.forEach((column) => {
         const offset = offsets.getColumnPlacement(column);
         this.headingsGraphics.drawRect(offset.position, viewport.top, offset.size, cellHeight);
@@ -113,7 +119,7 @@ export class GridHeadings extends Container {
 
     // if we're selecting rows, then show all columns as selected
     if (cursor.columnRow?.rows) {
-      this.headingsGraphics.beginFill(colors.headerSelectedBackgroundColor);
+      this.headingsGraphics.beginFill(colors.headerSelectedBackgroundColor, colors.headerSelectedBackgroundColorAlpha);
       this.headingsGraphics.drawRect(viewport.left, viewport.top, viewport.screenWidthInWorldPixels, cellHeight);
       this.headingsGraphics.endFill();
       return 'all';
@@ -122,7 +128,7 @@ export class GridHeadings extends Container {
     // selected cells based on multiCursor
     else if (cursor.multiCursor) {
       const selectedColumns = new Set<number>();
-      this.headingsGraphics.beginFill(colors.headerSelectedBackgroundColor);
+      this.headingsGraphics.beginFill(colors.headerSelectedBackgroundColor, colors.headerSelectedBackgroundColorAlpha);
       cursor.multiCursor.forEach((rectangle) => {
         const start = offsets.getColumnPlacement(rectangle.left);
         const end = offsets.getColumnPlacement(rectangle.right - 1);
@@ -143,7 +149,7 @@ export class GridHeadings extends Container {
     // otherwise selected cursor is cursorPosition
     else {
       const offset = offsets.getColumnPlacement(cursor.cursorPosition.x);
-      this.headingsGraphics.beginFill(colors.headerSelectedBackgroundColor);
+      this.headingsGraphics.beginFill(colors.headerSelectedBackgroundColor, colors.headerSelectedBackgroundColorAlpha);
       this.headingsGraphics.drawRect(offset.position, viewport.top, offset.size, cellHeight);
       this.headingsGraphics.endFill();
       this.selectedColumns = [cursor.cursorPosition.x];
@@ -187,7 +193,13 @@ export class GridHeadings extends Container {
     for (let x = leftOffset; x <= rightOffset; x += currentWidth) {
       currentWidth = offsets.getColumnWidth(column);
       if (gridAlpha !== 0) {
-        this.headingsGraphics.lineStyle(1, colors.gridLines, 0.25 * gridAlpha, 0.5, true);
+        this.headingsGraphics.lineStyle(
+          1,
+          colors.gridLines,
+          colors.headerSelectedRowColumnBackgroundColorAlpha * gridAlpha,
+          0.5,
+          true
+        );
         this.headingsGraphics.moveTo(x, bounds.top);
         this.headingsGraphics.lineTo(x, bounds.top + cellHeight);
         this.gridLinesColumns.push({ column: column - 1, x, width: offsets.getColumnWidth(column - 1) });
@@ -201,7 +213,10 @@ export class GridHeadings extends Container {
         const charactersWidth = (this.characterSize.width * column.toString().length) / scale;
 
         // only show labels that will fit (unless grid lines are hidden)
-        if (currentWidth > charactersWidth || pixiApp.gridLines.alpha < 0.25) {
+        if (
+          currentWidth > charactersWidth ||
+          pixiApp.gridLines.alpha < colors.headerSelectedRowColumnBackgroundColorAlpha
+        ) {
           // don't show numbers if it overlaps with the selected value (eg, hides 0 if selected 1 overlaps it)
           let xPosition = x + currentWidth / 2;
           const left = xPosition - charactersWidth / 2;
@@ -271,14 +286,20 @@ export class GridHeadings extends Container {
 
     // fill the entire viewport if all cells are selected
     if (cursor.columnRow?.all) {
-      this.headingsGraphics.beginFill(colors.headerSelectedRowColumnBackgroundColor);
+      this.headingsGraphics.beginFill(
+        colors.headerSelectedRowColumnBackgroundColor,
+        colors.headerSelectedRowColumnBackgroundColorAlpha
+      );
       this.headingsGraphics.drawRect(bounds.left, bounds.top, this.rowWidth, bounds.height);
       this.headingsGraphics.endFill();
     }
 
     // dark fill headings if there is a columnRow selection
     if (cursor.columnRow?.rows) {
-      this.headingsGraphics.beginFill(colors.headerSelectedRowColumnBackgroundColor);
+      this.headingsGraphics.beginFill(
+        colors.headerSelectedRowColumnBackgroundColor,
+        colors.headerSelectedRowColumnBackgroundColorAlpha
+      );
       cursor.columnRow.rows.forEach((row) => {
         const offset = offsets.getRowPlacement(row);
         this.headingsGraphics.drawRect(bounds.left, offset.position, this.rowWidth, offset.size);
@@ -288,7 +309,7 @@ export class GridHeadings extends Container {
 
     // if we're selecting columns, then show all rows as selected
     if (cursor.columnRow?.columns) {
-      this.headingsGraphics.beginFill(colors.headerSelectedBackgroundColor);
+      this.headingsGraphics.beginFill(colors.headerSelectedBackgroundColor, colors.headerSelectedBackgroundColorAlpha);
       this.headingsGraphics.drawRect(bounds.left, bounds.top, this.rowWidth, bounds.height);
       this.headingsGraphics.endFill();
     }
@@ -296,7 +317,7 @@ export class GridHeadings extends Container {
     // selected cells based on multiCursor
     if (cursor.multiCursor) {
       const selectedRows = new Set<number>();
-      this.headingsGraphics.beginFill(colors.headerSelectedBackgroundColor);
+      this.headingsGraphics.beginFill(colors.headerSelectedBackgroundColor, colors.headerSelectedBackgroundColorAlpha);
       cursor.multiCursor.forEach((rectangle) => {
         const start = offsets.getRowPlacement(rectangle.top);
         const end = offsets.getRowPlacement(rectangle.bottom - 1);
@@ -317,7 +338,7 @@ export class GridHeadings extends Container {
     // otherwise selected cursor is cursorPosition
     if (!cursor.multiCursor && !cursor.columnRow) {
       const offset = offsets.getRowPlacement(cursor.cursorPosition.y);
-      this.headingsGraphics.beginFill(colors.headerSelectedBackgroundColor);
+      this.headingsGraphics.beginFill(colors.headerSelectedBackgroundColor, colors.headerSelectedBackgroundColorAlpha);
       this.headingsGraphics.drawRect(bounds.left, offset.position, this.rowWidth, offset.size);
       this.headingsGraphics.endFill();
       this.selectedRows = [cursor.cursorPosition.y];
@@ -360,7 +381,13 @@ export class GridHeadings extends Container {
     for (let y = topOffset; y <= bottomOffset; y += currentHeight) {
       currentHeight = offsets.getRowHeight(row);
       if (gridAlpha !== 0) {
-        this.headingsGraphics.lineStyle(1, colors.gridLines, 0.25 * gridAlpha, 0.5, true);
+        this.headingsGraphics.lineStyle(
+          1,
+          colors.gridLines,
+          colors.headerSelectedRowColumnBackgroundColorAlpha * gridAlpha,
+          0.5,
+          true
+        );
         this.headingsGraphics.moveTo(bounds.left, y);
         this.headingsGraphics.lineTo(bounds.left + this.rowWidth, y);
         this.gridLinesRows.push({ row: row - 1, y, height: offsets.getRowHeight(row - 1) });
@@ -372,7 +399,7 @@ export class GridHeadings extends Container {
       // only show the label if selected or mod calculation
       if (selected || mod === 0 || row % mod === 0) {
         // only show labels that will fit (unless grid lines are hidden)
-        // if (currentHeight > halfCharacterHeight * 2 || pixiApp.gridLines.alpha < 0.25) {
+        // if (currentHeight > halfCharacterHeight * 2 || pixiApp.gridLines.alpha < colors.headerSelectedRowColumnBackgroundColorAlpha) {
         // don't show numbers if it overlaps with the selected value (eg, hides 0 if selected 1 overlaps it)
         let yPosition = y + currentHeight / 2;
         const top = yPosition - halfCharacterHeight / 2;
@@ -426,7 +453,7 @@ export class GridHeadings extends Container {
     const { viewport } = pixiApp;
     const cellHeight = CELL_HEIGHT / viewport.scale.x;
     const bounds = viewport.getVisibleBounds();
-    this.headingsGraphics.lineStyle(1, colors.gridLines, 0.25, 0.5, true);
+    this.headingsGraphics.lineStyle(1, colors.gridLines, colors.headerSelectedRowColumnBackgroundColorAlpha, 0.5, true);
     this.headingsGraphics.moveTo(bounds.left + this.rowWidth, viewport.top);
     this.headingsGraphics.lineTo(bounds.left + this.rowWidth, viewport.bottom);
     this.headingsGraphics.moveTo(bounds.left, bounds.top + cellHeight);
diff --git a/quadratic-client/src/app/gridGL/interaction/keyboard/keyboardCell.ts b/quadratic-client/src/app/gridGL/interaction/keyboard/keyboardCell.ts
index 2d3061ea63..4b62b258a1 100644
--- a/quadratic-client/src/app/gridGL/interaction/keyboard/keyboardCell.ts
+++ b/quadratic-client/src/app/gridGL/interaction/keyboard/keyboardCell.ts
@@ -1,15 +1,16 @@
+import { hasPermissionToEditFile } from '@/app/actions';
+import { Action } from '@/app/actions/actions';
+import { EditorInteractionState } from '@/app/atoms/editorInteractionStateAtom';
+import { events } from '@/app/events/events';
 import { openCodeEditor } from '@/app/grid/actions/openCodeEditor';
+import { sheets } from '@/app/grid/controller/Sheets';
 import { SheetCursor } from '@/app/grid/sheet/SheetCursor';
 import { inlineEditorHandler } from '@/app/gridGL/HTMLGrid/inlineEditor/inlineEditorHandler';
+import { isAllowedFirstChar } from '@/app/gridGL/interaction/keyboard/keyboardCellChars';
+import { doubleClickCell } from '@/app/gridGL/interaction/pointer/doubleClickCell';
+import { pixiAppSettings } from '@/app/gridGL/pixiApp/PixiAppSettings';
 import { matchShortcut } from '@/app/helpers/keyboardShortcuts.js';
 import { quadraticCore } from '@/app/web-workers/quadraticCore/quadraticCore';
-import { hasPermissionToEditFile } from '../../../actions';
-import { EditorInteractionState } from '../../../atoms/editorInteractionStateAtom';
-import { sheets } from '../../../grid/controller/Sheets';
-import { pixiAppSettings } from '../../pixiApp/PixiAppSettings';
-import { doubleClickCell } from '../pointer/doubleClickCell';
-import { isAllowedFirstChar } from './keyboardCellChars';
-import { events } from '@/app/events/events';
 
 function inCodeEditor(editorInteractionState: EditorInteractionState, cursor: SheetCursor): boolean {
   if (!editorInteractionState.showCodeEditor) return false;
@@ -41,7 +42,7 @@ export function keyboardCell(options: {
   const hasPermission = hasPermissionToEditFile(editorInteractionState.permissions);
 
   // Move cursor right, don't clear selection
-  if (matchShortcut('move_cursor_right_with_selection', event)) {
+  if (matchShortcut(Action.MoveCursorRightWithSelection, event)) {
     cursor.changePosition({
       keyboardMovePosition: {
         x: cursorPosition.x + 1,
@@ -56,7 +57,7 @@ export function keyboardCell(options: {
   }
 
   // Move cursor left, don't clear selection
-  if (matchShortcut('move_cursor_left_with_selection', event)) {
+  if (matchShortcut(Action.MoveCursorLeftWithSelection, event)) {
     cursor.changePosition({
       keyboardMovePosition: {
         x: cursorPosition.x - 1,
@@ -71,7 +72,7 @@ export function keyboardCell(options: {
   }
 
   // Edit cell
-  if (matchShortcut('edit_cell', event)) {
+  if (matchShortcut(Action.EditCell, event)) {
     if (!inlineEditorHandler.isEditingFormula()) {
       const column = cursorPosition.x;
       const row = cursorPosition.y;
@@ -94,7 +95,7 @@ export function keyboardCell(options: {
   }
 
   // Delete cell
-  if (matchShortcut('delete_cell', event)) {
+  if (matchShortcut(Action.DeleteCell, event)) {
     if (inCodeEditor(editorInteractionState, cursor)) {
       if (!pixiAppSettings.unsavedEditorChanges) {
         setEditorInteractionState((state) => ({
@@ -116,13 +117,13 @@ export function keyboardCell(options: {
   }
 
   // Show code editor
-  if (matchShortcut('show_cell_type_menu', event)) {
+  if (matchShortcut(Action.ShowCellTypeMenu, event)) {
     openCodeEditor();
     return true;
   }
 
   // Triggers Validation UI
-  if (matchShortcut('trigger_cell', event)) {
+  if (matchShortcut(Action.TriggerCell, event)) {
     const p = sheets.sheet.cursor.cursorPosition;
     events.emit('triggerCell', p.x, p.y, true);
   }
diff --git a/quadratic-client/src/app/gridGL/interaction/keyboard/keyboardClipboard.ts b/quadratic-client/src/app/gridGL/interaction/keyboard/keyboardClipboard.ts
index 8ea6eee1e6..d7234a3ae2 100644
--- a/quadratic-client/src/app/gridGL/interaction/keyboard/keyboardClipboard.ts
+++ b/quadratic-client/src/app/gridGL/interaction/keyboard/keyboardClipboard.ts
@@ -1,4 +1,5 @@
-import { downloadSelectionAsCsvAction } from '@/app/actions';
+import { Action } from '@/app/actions/actions';
+import { defaultActionSpec } from '@/app/actions/defaultActionsSpec';
 import { copySelectionToPNG, fullClipboardSupport } from '@/app/grid/actions/clipboard/clipboard';
 import { matchShortcut } from '@/app/helpers/keyboardShortcuts.js';
 import { GlobalSnackbar } from '@/shared/components/GlobalSnackbarProvider';
@@ -6,19 +7,18 @@ import { GlobalSnackbar } from '@/shared/components/GlobalSnackbarProvider';
 export function keyboardClipboard(props: {
   event: React.KeyboardEvent<HTMLElement>;
   addGlobalSnackbar: GlobalSnackbar['addGlobalSnackbar'];
-  fileName: string;
 }): boolean {
-  const { addGlobalSnackbar, event, fileName } = props;
+  const { addGlobalSnackbar, event } = props;
 
   // Copy as PNG
-  if (fullClipboardSupport() && matchShortcut('copy_as_png', event)) {
+  if (fullClipboardSupport() && matchShortcut(Action.CopyAsPng, event)) {
     copySelectionToPNG(addGlobalSnackbar);
     return true;
   }
 
   // Download as CSV
-  if (matchShortcut('download_as_csv', event)) {
-    downloadSelectionAsCsvAction.run({ fileName });
+  if (matchShortcut(Action.DownloadAsCsv, event)) {
+    defaultActionSpec[Action.DownloadAsCsv]?.run();
     return true;
   }
 
diff --git a/quadratic-client/src/app/gridGL/interaction/keyboard/keyboardCode.ts b/quadratic-client/src/app/gridGL/interaction/keyboard/keyboardCode.ts
index a5b51bbb1d..e6eefb1be4 100644
--- a/quadratic-client/src/app/gridGL/interaction/keyboard/keyboardCode.ts
+++ b/quadratic-client/src/app/gridGL/interaction/keyboard/keyboardCode.ts
@@ -1,9 +1,10 @@
+import { hasPermissionToEditFile } from '@/app/actions';
+import { Action } from '@/app/actions/actions';
+import { EditorInteractionState } from '@/app/atoms/editorInteractionStateAtom';
 import { sheets } from '@/app/grid/controller/Sheets';
 import { matchShortcut } from '@/app/helpers/keyboardShortcuts.js';
 import { insertCellRef } from '@/app/ui/menus/CodeEditor/insertCellRef';
 import { quadraticCore } from '@/app/web-workers/quadraticCore/quadraticCore';
-import { hasPermissionToEditFile } from '../../../actions';
-import { EditorInteractionState } from '../../../atoms/editorInteractionStateAtom';
 
 export function keyboardCode(
   event: React.KeyboardEvent<HTMLElement>,
@@ -13,8 +14,7 @@ export function keyboardCode(
     return false;
   }
   // Execute code cell
-  if (matchShortcut('execute_code', event)) {
-    console.log();
+  if (matchShortcut(Action.ExecuteCode, event)) {
     quadraticCore.rerunCodeCells(
       sheets.sheet.id,
       sheets.sheet.cursor.cursorPosition.x,
@@ -25,19 +25,19 @@ export function keyboardCode(
   }
 
   // Rerun sheet code
-  if (matchShortcut('rerun_sheet_code', event)) {
+  if (matchShortcut(Action.RerunSheetCode, event)) {
     quadraticCore.rerunCodeCells(sheets.sheet.id, undefined, undefined, sheets.getCursorPosition());
     return true;
   }
 
   // Rerun all code
-  if (matchShortcut('rerun_all_code', event)) {
+  if (matchShortcut(Action.RerunAllCode, event)) {
     quadraticCore.rerunCodeCells(undefined, undefined, undefined, sheets.getCursorPosition());
     return true;
   }
 
   // Insert cell reference
-  if (editorInteractionState.showCodeEditor && matchShortcut('insert_cell_reference', event)) {
+  if (editorInteractionState.showCodeEditor && matchShortcut(Action.InsertCellReference, event)) {
     insertCellRef(editorInteractionState);
     return true;
   }
diff --git a/quadratic-client/src/app/gridGL/interaction/keyboard/keyboardPosition.ts b/quadratic-client/src/app/gridGL/interaction/keyboard/keyboardPosition.ts
index a384be54a0..932740d7ec 100644
--- a/quadratic-client/src/app/gridGL/interaction/keyboard/keyboardPosition.ts
+++ b/quadratic-client/src/app/gridGL/interaction/keyboard/keyboardPosition.ts
@@ -1,13 +1,14 @@
 //! keyboardPosition() handles the movement of the cursor using the arrow keys,
 //! including shift, meta, and ctrl keys.
 
+import { Action } from '@/app/actions/actions';
+import { sheets } from '@/app/grid/controller/Sheets';
 import { inlineEditorHandler } from '@/app/gridGL/HTMLGrid/inlineEditor/inlineEditorHandler';
 import { moveViewport } from '@/app/gridGL/interaction/viewportHelper';
+import { pixiAppSettings } from '@/app/gridGL/pixiApp/PixiAppSettings';
 import { matchShortcut } from '@/app/helpers/keyboardShortcuts.js';
 import { quadraticCore } from '@/app/web-workers/quadraticCore/quadraticCore';
 import { Rectangle } from 'pixi.js';
-import { sheets } from '../../../grid/controller/Sheets';
-import { pixiAppSettings } from '../../pixiApp/PixiAppSettings';
 
 function setCursorPosition(x: number, y: number) {
   const newPos = { x, y };
@@ -323,110 +324,110 @@ function moveCursor(deltaX: number, deltaY: number) {
 
 export function keyboardPosition(event: KeyboardEvent): boolean {
   // Move cursor up
-  if (matchShortcut('move_cursor_up', event)) {
+  if (matchShortcut(Action.MoveCursorUp, event)) {
     moveCursor(0, -1);
     return true;
   }
 
   // Move cursor to the top of the content block of cursor cell
-  if (matchShortcut('jump_cursor_content_top', event)) {
+  if (matchShortcut(Action.JumpCursorContentTop, event)) {
     jumpCursor(0, -1, false);
     return true;
   }
 
   // Expand selection up
-  if (matchShortcut('expand_selection_up', event)) {
+  if (matchShortcut(Action.ExpandSelectionUp, event)) {
     expandSelection(0, -1);
     return true;
   }
 
   // Expand selection to the top of the content block of cursor cell
-  if (matchShortcut('expand_selection_content_top', event)) {
+  if (matchShortcut(Action.ExpandSelectionContentTop, event)) {
     jumpCursor(0, -1, true);
     return true;
   }
 
   // Move cursor down
-  if (matchShortcut('move_cursor_down', event)) {
+  if (matchShortcut(Action.MoveCursorDown, event)) {
     moveCursor(0, 1);
     return true;
   }
 
   // Move cursor to the bottom of the content block of cursor cell
-  if (matchShortcut('jump_cursor_content_bottom', event)) {
+  if (matchShortcut(Action.JumpCursorContentBottom, event)) {
     jumpCursor(0, 1, false);
     return true;
   }
 
   // Expand selection down
-  if (matchShortcut('expand_selection_down', event)) {
+  if (matchShortcut(Action.ExpandSelectionDown, event)) {
     expandSelection(0, 1);
     return true;
   }
 
   // Expand selection to the bottom of the content block of cursor cell
-  if (matchShortcut('expand_selection_content_bottom', event)) {
+  if (matchShortcut(Action.ExpandSelectionContentBottom, event)) {
     jumpCursor(0, 1, true);
     return true;
   }
 
   // Move cursor left
-  if (matchShortcut('move_cursor_left', event)) {
+  if (matchShortcut(Action.MoveCursorLeft, event)) {
     moveCursor(-1, 0);
     return true;
   }
 
   // Move cursor to the left of the content block of cursor cell
-  if (matchShortcut('jump_cursor_content_left', event)) {
+  if (matchShortcut(Action.JumpCursorContentLeft, event)) {
     jumpCursor(-1, 0, false);
     return true;
   }
 
   // Expand selection left
-  if (matchShortcut('expand_selection_left', event)) {
+  if (matchShortcut(Action.ExpandSelectionLeft, event)) {
     expandSelection(-1, 0);
     return true;
   }
 
   // Expand selection to the left of the content block of cursor cell
-  if (matchShortcut('expand_selection_content_left', event)) {
+  if (matchShortcut(Action.ExpandSelectionContentLeft, event)) {
     jumpCursor(-1, 0, true);
     return true;
   }
 
   // Move cursor right
-  if (matchShortcut('move_cursor_right', event)) {
+  if (matchShortcut(Action.MoveCursorRight, event)) {
     moveCursor(1, 0);
     return true;
   }
 
   // Move cursor to the right of the content block of cursor cell
-  if (matchShortcut('jump_cursor_content_right', event)) {
+  if (matchShortcut(Action.JumpCursorContentRight, event)) {
     jumpCursor(1, 0, false);
     return true;
   }
 
   // Expand selection right
-  if (matchShortcut('expand_selection_right', event)) {
+  if (matchShortcut(Action.ExpandSelectionRight, event)) {
     expandSelection(1, 0);
     return true;
   }
 
   // Expand selection to the right of the content block of cursor cell
-  if (matchShortcut('expand_selection_content_right', event)) {
+  if (matchShortcut(Action.ExpandSelectionContentRight, event)) {
     jumpCursor(1, 0, true);
     return true;
   }
 
   // Move cursor to A0, reset viewport position with A0 at top left
-  if (matchShortcut('goto_A0', event)) {
+  if (matchShortcut(Action.GotoA0, event)) {
     setCursorPosition(0, 0);
     moveViewport({ topLeft: { x: 0, y: 0 }, force: true });
     return true;
   }
 
   // Move cursor to the bottom right of the sheet content
-  if (matchShortcut('goto_bottom_right', event)) {
+  if (matchShortcut(Action.GotoBottomRight, event)) {
     const sheet = sheets.sheet;
     const bounds = sheet.getBounds(true);
     if (bounds) {
@@ -448,7 +449,7 @@ export function keyboardPosition(event: KeyboardEvent): boolean {
   }
 
   // Move cursor to the start of the row content
-  if (matchShortcut('goto_row_start', event)) {
+  if (matchShortcut(Action.GotoRowStart, event)) {
     const sheet = sheets.sheet;
     const bounds = sheet.getBounds(true);
     if (bounds) {
@@ -474,7 +475,7 @@ export function keyboardPosition(event: KeyboardEvent): boolean {
   }
 
   // Move cursor to the end of the row content
-  if (matchShortcut('goto_row_end', event)) {
+  if (matchShortcut(Action.GotoRowEnd, event)) {
     const sheet = sheets.sheet;
     const bounds = sheet.getBounds(true);
     if (bounds) {
@@ -500,13 +501,13 @@ export function keyboardPosition(event: KeyboardEvent): boolean {
   }
 
   // Move viewport up
-  if (matchShortcut('page_up', event)) {
+  if (matchShortcut(Action.PageUp, event)) {
     moveViewport({ pageUp: true });
     return true;
   }
 
   // Move viewport down
-  if (matchShortcut('page_down', event)) {
+  if (matchShortcut(Action.PageDown, event)) {
     moveViewport({ pageDown: true });
     return true;
   }
diff --git a/quadratic-client/src/app/gridGL/interaction/keyboard/keyboardSearch.ts b/quadratic-client/src/app/gridGL/interaction/keyboard/keyboardSearch.ts
index c48a97e4e9..778e70a0e0 100644
--- a/quadratic-client/src/app/gridGL/interaction/keyboard/keyboardSearch.ts
+++ b/quadratic-client/src/app/gridGL/interaction/keyboard/keyboardSearch.ts
@@ -1,3 +1,4 @@
+import { Action } from '@/app/actions/actions';
 import { EditorInteractionState } from '@/app/atoms/editorInteractionStateAtom';
 import { matchShortcut } from '@/app/helpers/keyboardShortcuts.js';
 
@@ -7,7 +8,7 @@ export function keyboardSearch(
   setEditorInteractionState: React.Dispatch<React.SetStateAction<EditorInteractionState>>
 ): boolean {
   // Show search
-  if (matchShortcut('show_search', event)) {
+  if (matchShortcut(Action.FindInCurrentSheet, event) || matchShortcut(Action.FindInAllSheets, event)) {
     event.preventDefault();
     if (editorInteractionState.showSearch) {
       const search = document.getElementById('search-input');
diff --git a/quadratic-client/src/app/gridGL/interaction/keyboard/keyboardSelect.ts b/quadratic-client/src/app/gridGL/interaction/keyboard/keyboardSelect.ts
index 33507fb4d2..0cc48822ab 100644
--- a/quadratic-client/src/app/gridGL/interaction/keyboard/keyboardSelect.ts
+++ b/quadratic-client/src/app/gridGL/interaction/keyboard/keyboardSelect.ts
@@ -1,16 +1,17 @@
+import { Action } from '@/app/actions/actions';
 import { sheets } from '@/app/grid/controller/Sheets.js';
+import { selectAllCells, selectColumns, selectRows } from '@/app/gridGL/helpers/selectCells';
 import { matchShortcut } from '@/app/helpers/keyboardShortcuts.js';
-import { selectAllCells, selectColumns, selectRows } from '../../helpers/selectCells';
 
 export function keyboardSelect(event: React.KeyboardEvent<HTMLElement>): boolean {
   // Select all
-  if (matchShortcut('select_all', event)) {
+  if (matchShortcut(Action.SelectAll, event)) {
     selectAllCells();
     return true;
   }
 
   // Select column
-  if (matchShortcut('select_column', event)) {
+  if (matchShortcut(Action.SelectColumn, event)) {
     const cursor = sheets.sheet.cursor;
     if (cursor.columnRow?.all || cursor.columnRow?.rows?.length) {
       selectAllCells();
@@ -28,7 +29,7 @@ export function keyboardSelect(event: React.KeyboardEvent<HTMLElement>): boolean
   }
 
   // Select row
-  if (matchShortcut('select_row', event)) {
+  if (matchShortcut(Action.SelectRow, event)) {
     const cursor = sheets.sheet.cursor;
     if (cursor.columnRow?.all || cursor.columnRow?.columns?.length) {
       selectAllCells();
diff --git a/quadratic-client/src/app/gridGL/interaction/keyboard/keyboardUndoRedo.ts b/quadratic-client/src/app/gridGL/interaction/keyboard/keyboardUndoRedo.ts
index df6d74ff1c..f563a8ca1f 100644
--- a/quadratic-client/src/app/gridGL/interaction/keyboard/keyboardUndoRedo.ts
+++ b/quadratic-client/src/app/gridGL/interaction/keyboard/keyboardUndoRedo.ts
@@ -1,15 +1,16 @@
+import { Action } from '@/app/actions/actions';
 import { matchShortcut } from '@/app/helpers/keyboardShortcuts.js';
 import { quadraticCore } from '@/app/web-workers/quadraticCore/quadraticCore';
 
 export function keyboardUndoRedo(event: React.KeyboardEvent<HTMLElement>): boolean {
   // Redo
-  if (matchShortcut('redo', event)) {
+  if (matchShortcut(Action.Redo, event)) {
     quadraticCore.redo();
     return true;
   }
 
   // Undo
-  if (matchShortcut('undo', event)) {
+  if (matchShortcut(Action.Undo, event)) {
     quadraticCore.undo();
     return true;
   }
diff --git a/quadratic-client/src/app/gridGL/interaction/keyboard/keyboardViewport.ts b/quadratic-client/src/app/gridGL/interaction/keyboard/keyboardViewport.ts
index 9cec344908..d78b184833 100644
--- a/quadratic-client/src/app/gridGL/interaction/keyboard/keyboardViewport.ts
+++ b/quadratic-client/src/app/gridGL/interaction/keyboard/keyboardViewport.ts
@@ -1,14 +1,15 @@
+import { hasPermissionToEditFile } from '@/app/actions';
+import { Action } from '@/app/actions/actions';
+import { EditorInteractionState } from '@/app/atoms/editorInteractionStateAtom';
 import { debug } from '@/app/debugFlags';
 import { sheets } from '@/app/grid/controller/Sheets.js';
+import { zoomIn, zoomOut, zoomTo100, zoomToFit, zoomToSelection } from '@/app/gridGL/helpers/zoom';
+import { pixiApp } from '@/app/gridGL/pixiApp/PixiApp';
 import { matchShortcut } from '@/app/helpers/keyboardShortcuts.js';
+import { clearFormattingAndBorders, setBold, setItalic } from '@/app/ui/helpers/formatCells';
 import { javascriptWebWorker } from '@/app/web-workers/javascriptWebWorker/javascriptWebWorker.js';
+import { pythonWebWorker } from '@/app/web-workers/pythonWebWorker/pythonWebWorker';
 import { quadraticCore } from '@/app/web-workers/quadraticCore/quadraticCore.js';
-import { hasPermissionToEditFile } from '../../../actions';
-import { EditorInteractionState } from '../../../atoms/editorInteractionStateAtom';
-import { clearFormattingAndBorders, setBold, setItalic } from '../../../ui/menus/TopBar/SubMenus/formatCells';
-import { pythonWebWorker } from '../../../web-workers/pythonWebWorker/pythonWebWorker';
-import { zoomIn, zoomOut, zoomTo100, zoomToFit, zoomToSelection } from '../../helpers/zoom';
-import { pixiApp } from '../../pixiApp/PixiApp';
 
 export function keyboardViewport(options: {
   event: React.KeyboardEvent<HTMLElement>;
@@ -21,7 +22,7 @@ export function keyboardViewport(options: {
   const { pointer } = pixiApp;
 
   // Show command palette
-  if (matchShortcut('show_command_palette', event)) {
+  if (matchShortcut(Action.ShowCommandPalette, event)) {
     setEditorInteractionState({
       ...editorInteractionState,
       showFeedbackMenu: false,
@@ -34,13 +35,13 @@ export function keyboardViewport(options: {
   }
 
   // Toggle presentation mode
-  if (matchShortcut('toggle_presentation_mode', event)) {
+  if (matchShortcut(Action.TogglePresentationMode, event)) {
     setPresentationMode(!presentationMode);
     return true;
   }
 
   // Close overlay
-  if (matchShortcut('close_overlay', event)) {
+  if (matchShortcut(Action.CloseOverlay, event)) {
     if (presentationMode) {
       setPresentationMode(false);
       return true;
@@ -62,7 +63,7 @@ export function keyboardViewport(options: {
   }
 
   // Show go to menu
-  if (matchShortcut('show_go_to_menu', event)) {
+  if (matchShortcut(Action.ShowGoToMenu, event)) {
     setEditorInteractionState({
       ...editorInteractionState,
       showFeedbackMenu: false,
@@ -74,43 +75,43 @@ export function keyboardViewport(options: {
   }
 
   // Zoom in
-  if (matchShortcut('zoom_in', event)) {
+  if (matchShortcut(Action.ZoomIn, event)) {
     zoomIn();
     return true;
   }
 
   // Zoom out
-  if (matchShortcut('zoom_out', event)) {
+  if (matchShortcut(Action.ZoomOut, event)) {
     zoomOut();
     return true;
   }
 
   // Zoom to selection
-  if (matchShortcut('zoom_to_selection', event)) {
+  if (matchShortcut(Action.ZoomToSelection, event)) {
     zoomToSelection();
     return true;
   }
 
   // Zoom to fit
-  if (matchShortcut('zoom_to_fit', event)) {
+  if (matchShortcut(Action.ZoomToFit, event)) {
     zoomToFit();
     return true;
   }
 
   // Zoom to 100%
-  if (matchShortcut('zoom_to_100', event)) {
+  if (matchShortcut(Action.ZoomTo100, event)) {
     zoomTo100();
     return true;
   }
 
   // Save
-  if (matchShortcut('save', event)) {
+  if (matchShortcut(Action.Save, event)) {
     // don't do anything on Command+S
     return true;
   }
 
   // Switch to next sheet
-  if (matchShortcut('switch_sheet_next', event)) {
+  if (matchShortcut(Action.SwitchSheetNext, event)) {
     if (sheets.size > 1) {
       const nextSheet = sheets.getNext(sheets.sheet.order) ?? sheets.getFirst();
       sheets.current = nextSheet.id;
@@ -119,7 +120,7 @@ export function keyboardViewport(options: {
   }
 
   // Switch to previous sheet
-  if (matchShortcut('switch_sheet_previous', event)) {
+  if (matchShortcut(Action.SwitchSheetPrevious, event)) {
     if (sheets.size > 1) {
       const previousSheet = sheets.getPrevious(sheets.sheet.order) ?? sheets.getLast();
       sheets.current = previousSheet.id;
@@ -133,26 +134,26 @@ export function keyboardViewport(options: {
   }
 
   // Clear formatting and borders
-  if (matchShortcut('clear_formatting_borders', event)) {
+  if (matchShortcut(Action.ClearFormattingBorders, event)) {
     clearFormattingAndBorders();
     return true;
   }
 
   // Toggle bold
-  if (matchShortcut('toggle_bold', event)) {
+  if (matchShortcut(Action.ToggleBold, event)) {
     setBold();
     return true;
   }
 
   // Toggle italic
-  if (matchShortcut('toggle_italic', event)) {
+  if (matchShortcut(Action.ToggleItalic, event)) {
     setItalic();
     return true;
   }
 
   // Fill right
   // Disabled in debug mode, to allow page reload
-  if (!debug && matchShortcut('fill_right', event)) {
+  if (!debug && matchShortcut(Action.FillRight, event)) {
     const cursor = sheets.sheet.cursor;
     if (cursor.columnRow?.all || cursor.columnRow?.rows) return true;
     if (cursor.columnRow?.columns && cursor.multiCursor) return true;
@@ -206,7 +207,7 @@ export function keyboardViewport(options: {
   }
 
   // Fill down
-  if (matchShortcut('fill_down', event)) {
+  if (matchShortcut(Action.FillDown, event)) {
     const cursor = sheets.sheet.cursor;
     if (cursor.columnRow?.all || cursor.columnRow?.columns) return true;
     if (cursor.columnRow?.rows && cursor.multiCursor) return true;
@@ -260,7 +261,7 @@ export function keyboardViewport(options: {
   }
 
   // Cancel execution
-  if (matchShortcut('cancel_execution', event)) {
+  if (matchShortcut(Action.CancelExecution, event)) {
     pythonWebWorker.cancelExecution();
     javascriptWebWorker.cancelExecution();
   }
diff --git a/quadratic-client/src/app/gridGL/interaction/keyboard/useKeyboard.ts b/quadratic-client/src/app/gridGL/interaction/keyboard/useKeyboard.ts
index fee5f347af..8c05a960ef 100644
--- a/quadratic-client/src/app/gridGL/interaction/keyboard/useKeyboard.ts
+++ b/quadratic-client/src/app/gridGL/interaction/keyboard/useKeyboard.ts
@@ -2,8 +2,7 @@ import { EditorInteractionState } from '@/app/atoms/editorInteractionStateAtom';
 import { inlineEditorHandler } from '@/app/gridGL/HTMLGrid/inlineEditor/inlineEditorHandler';
 import { pixiAppSettings } from '@/app/gridGL/pixiApp/PixiAppSettings';
 import { Size } from '@/app/gridGL/types/size';
-import { useFileContext } from '@/app/ui/components/FileProvider';
-import { useGridSettings } from '@/app/ui/menus/TopBar/SubMenus/useGridSettings';
+import { useGridSettings } from '@/app/ui/hooks/useGridSettings';
 import { useGlobalSnackbar } from '@/shared/components/GlobalSnackbarProvider';
 import React from 'react';
 import { keyboardCell } from './keyboardCell';
@@ -27,7 +26,6 @@ export const useKeyboard = (props: IProps): { onKeyDown: (event: React.KeyboardE
   const { editorInteractionState, setEditorInteractionState } = props;
   const { presentationMode, setPresentationMode } = useGridSettings();
   const { addGlobalSnackbar } = useGlobalSnackbar();
-  const { name: fileName } = useFileContext();
 
   const onKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {
     if (pixiAppSettings.input.show && inlineEditorHandler.isOpen()) return;
@@ -43,7 +41,6 @@ export const useKeyboard = (props: IProps): { onKeyDown: (event: React.KeyboardE
       keyboardClipboard({
         event,
         addGlobalSnackbar,
-        fileName,
       }) ||
       keyboardDropdown(event.nativeEvent, editorInteractionState) ||
       keyboardUndoRedo(event) ||
diff --git a/quadratic-client/src/app/gridGL/interaction/pointer/Pointer.ts b/quadratic-client/src/app/gridGL/interaction/pointer/Pointer.ts
index 3bd3e4f6f5..701eee0de8 100644
--- a/quadratic-client/src/app/gridGL/interaction/pointer/Pointer.ts
+++ b/quadratic-client/src/app/gridGL/interaction/pointer/Pointer.ts
@@ -102,6 +102,11 @@ export class Pointer {
   };
 
   private pointerMove = (e: InteractionEvent): void => {
+    // ignore pointerMove if the target is a child of an element with class pointer-move-stop-propagation
+    const target = e.data.originalEvent.target as HTMLElement | null;
+    const isWithinPointerMoveIgnore = !!target?.closest('.pointer-move-ignore');
+    if (isWithinPointerMoveIgnore) return;
+
     if (this.isMoreThanOneTouch(e) || this.isOverCodeEditor(e)) return;
     const world = pixiApp.viewport.toWorld(e.data.global);
     const event = e.data.originalEvent as PointerEvent;
diff --git a/quadratic-client/src/app/gridGL/interaction/pointer/PointerDown.ts b/quadratic-client/src/app/gridGL/interaction/pointer/PointerDown.ts
index ac1d68c616..90f6d06e38 100644
--- a/quadratic-client/src/app/gridGL/interaction/pointer/PointerDown.ts
+++ b/quadratic-client/src/app/gridGL/interaction/pointer/PointerDown.ts
@@ -54,16 +54,20 @@ export class PointerDown {
 
     // If right click and we have a multi cell selection.
     // If the user has clicked inside the selection.
-    if (rightClick && cursor.multiCursor) {
-      const lastMultiCursor = cursor.multiCursor[cursor.multiCursor.length - 1];
-      if (
-        column >= lastMultiCursor.left &&
-        column <= lastMultiCursor.right &&
-        row >= lastMultiCursor.top &&
-        row <= lastMultiCursor.bottom
-      )
-        // Ignore this click. User is accessing the RightClickMenu.
-        return;
+    if (rightClick) {
+      if (!cursor.includesCell(column, row)) {
+        cursor.changePosition({
+          cursorPosition: { x: column, y: row },
+          multiCursor: null,
+          ensureVisible: false,
+        });
+        // hack to ensure that the context menu opens after the cursor changes
+        // position (otherwise it may close immediately)
+        setTimeout(() => events.emit('gridContextMenu', world, column, row));
+      } else {
+        events.emit('gridContextMenu', world, column, row);
+      }
+      return;
     }
 
     if (this.doubleClickTimeout) {
diff --git a/quadratic-client/src/app/gridGL/pixiApp/PixiAppSettings.ts b/quadratic-client/src/app/gridGL/pixiApp/PixiAppSettings.ts
index 98db0cda80..c220852be3 100644
--- a/quadratic-client/src/app/gridGL/pixiApp/PixiAppSettings.ts
+++ b/quadratic-client/src/app/gridGL/pixiApp/PixiAppSettings.ts
@@ -2,10 +2,12 @@ import { defaultInlineEditor, InlineEditorState } from '@/app/atoms/inlineEditor
 import { events } from '@/app/events/events';
 import { inlineEditorHandler } from '@/app/gridGL/HTMLGrid/inlineEditor/inlineEditorHandler';
 import { multiplayer } from '@/app/web-workers/multiplayerWebWorker/multiplayer';
+import { GlobalSnackbar } from '@/shared/components/GlobalSnackbarProvider';
 import { ApiTypes } from 'quadratic-shared/typesAndSchemas';
+import { SetterOrUpdater } from 'recoil';
 import { EditorInteractionState, editorInteractionStateDefault } from '../../atoms/editorInteractionStateAtom';
 import { sheets } from '../../grid/controller/Sheets';
-import { defaultGridSettings, GridSettings } from '../../ui/menus/TopBar/SubMenus/useGridSettings';
+import { defaultGridSettings, GridSettings } from '../../ui/hooks/useGridSettings';
 import { pixiApp } from './PixiApp';
 
 export enum PanMode {
@@ -35,9 +37,11 @@ class PixiAppSettings {
   unsavedEditorChanges?: string;
 
   temporarilyHideCellTypeOutlines = false;
+  gridSettings = defaultGridSettings;
+  setGridSettings?: SetterOrUpdater<GridSettings>;
   editorInteractionState = editorInteractionStateDefault;
-  setEditorInteractionState?: (value: EditorInteractionState) => void;
-  addGlobalSnackbar?: (message: string, options?: { severity?: 'error' | 'warning' }) => void;
+  setEditorInteractionState?: SetterOrUpdater<EditorInteractionState>;
+  addGlobalSnackbar?: GlobalSnackbar['addGlobalSnackbar'];
   inlineEditorState = defaultInlineEditor;
   setInlineEditorState?: (fn: (prev: InlineEditorState) => InlineEditorState) => void;
 
@@ -83,9 +87,14 @@ class PixiAppSettings {
     return this.editorInteractionState.permissions;
   }
 
+  updateGridSettings(gridSettings: GridSettings, setGridSettings: SetterOrUpdater<GridSettings>): void {
+    this.gridSettings = gridSettings;
+    this.setGridSettings = setGridSettings;
+  }
+
   updateEditorInteractionState(
     editorInteractionState: EditorInteractionState,
-    setEditorInteractionState: (value: EditorInteractionState) => void
+    setEditorInteractionState: SetterOrUpdater<EditorInteractionState>
   ): void {
     this.editorInteractionState = editorInteractionState;
     this.setEditorInteractionState = setEditorInteractionState;
diff --git a/quadratic-client/src/app/helpers/keyboardShortcuts.test.ts b/quadratic-client/src/app/helpers/keyboardShortcuts.test.ts
index 11c8c594ee..bc8c63e350 100644
--- a/quadratic-client/src/app/helpers/keyboardShortcuts.test.ts
+++ b/quadratic-client/src/app/helpers/keyboardShortcuts.test.ts
@@ -1,49 +1,35 @@
-import { defaultShortcuts, ShortcutsSchema } from '@/app/keyboard';
+import { Action } from '@/app/actions/actions';
+import { matchShortcut, processShortcut } from '@/app/helpers/keyboardShortcuts';
+import { defaultShortcuts } from '@/app/keyboard/defaults';
+import { Keys, MacModifiers, WindowsModifiers } from '@/app/keyboard/keys';
 import * as isMacModule from '@/shared/utils/isMac';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { matchShortcut, parseCombination } from './keyboardShortcuts';
 
 describe('shortcut utility functions', () => {
-  describe('validate shortcuts', () => {
-    it('parse zod schema', () => {
-      ShortcutsSchema.parse(defaultShortcuts);
-    });
-  });
-
-  describe('parseCombination', () => {
-    beforeEach(() => {
-      vi.resetModules();
+  describe('processShortcut', () => {
+    it('should process a simple shortcut', () => {
+      const result = processShortcut([MacModifiers.Cmd, Keys.A]);
+      expect(result).toEqual({ metaKey: true, ctrlKey: false, altKey: false, shiftKey: false, key: 'A' });
     });
 
-    it('should parse a simple combination', () => {
-      const result = parseCombination('Ctrl+A');
-      expect(result).toEqual({ metaKey: false, ctrlKey: true, altKey: false, shiftKey: false, key: 'a' });
+    it('should process a shortcut with multiple modifiers', () => {
+      const result = processShortcut([MacModifiers.Cmd, MacModifiers.Shift, MacModifiers.Alt, Keys.B]);
+      expect(result).toEqual({ metaKey: true, ctrlKey: false, altKey: true, shiftKey: true, key: 'B' });
     });
 
-    it('should parse a combination with multiple modifier keys', () => {
-      const result = parseCombination('Ctrl+Shift+Alt+X');
-      expect(result).toEqual({ metaKey: false, ctrlKey: true, altKey: true, shiftKey: true, key: 'x' });
+    it('should handle Windows modifiers', () => {
+      const result = processShortcut([WindowsModifiers.Ctrl, WindowsModifiers.Alt, Keys.C]);
+      expect(result).toEqual({ metaKey: false, ctrlKey: true, altKey: true, shiftKey: false, key: 'C' });
     });
 
-    it('should handle the Cmd key on Mac', () => {
-      vi.spyOn(isMacModule, 'isMac', 'get').mockReturnValue(true);
-      const result = parseCombination('Cmd+B');
-      expect(result).toEqual({ metaKey: true, ctrlKey: false, altKey: false, shiftKey: false, key: 'b' });
+    it('should handle special keys', () => {
+      const result = processShortcut([MacModifiers.Cmd, Keys.Enter]);
+      expect(result).toEqual({ metaKey: true, ctrlKey: false, altKey: false, shiftKey: false, key: 'Enter' });
     });
 
-    it('should handle the Space key', () => {
-      const result = parseCombination('Space');
-      expect(result).toEqual({ metaKey: false, ctrlKey: false, altKey: false, shiftKey: false, key: ' ' });
-    });
-
-    it('should be case-insensitive', () => {
-      const result = parseCombination('CTRL+shift+ALT+x');
-      expect(result).toEqual({ metaKey: false, ctrlKey: true, altKey: true, shiftKey: true, key: 'x' });
-    });
-
-    it('should handle combinations with spaces', () => {
-      const result = parseCombination('Ctrl + Shift + X');
-      expect(result).toEqual({ metaKey: false, ctrlKey: true, altKey: false, shiftKey: true, key: 'x' });
+    it('should handle shortcuts with only modifiers', () => {
+      const result = processShortcut([MacModifiers.Cmd, MacModifiers.Shift]);
+      expect(result).toEqual({ metaKey: true, ctrlKey: false, altKey: false, shiftKey: true, key: undefined });
     });
   });
 
@@ -54,43 +40,48 @@ describe('shortcut utility functions', () => {
 
     it('should match a simple shortcut', () => {
       const event = new KeyboardEvent('keydown', { key: 'p', metaKey: true });
-      expect(matchShortcut('show_command_palette', event)).toBe(true);
+      expect(matchShortcut(Action.ShowCommandPalette, event)).toBe(true);
     });
 
     it('should match a shortcut with multiple keys', () => {
       const event = new KeyboardEvent('keydown', { key: 'z', metaKey: true, shiftKey: true });
-      expect(matchShortcut('redo', event)).toBe(true);
+      expect(matchShortcut(Action.Redo, event)).toBe(true);
     });
 
     it('should not match when a required key is missing', () => {
       const event = new KeyboardEvent('keydown', { key: 'p', ctrlKey: true }); // Missing meta key
-      expect(matchShortcut('show_command_palette', event)).toBe(false);
+      expect(matchShortcut(Action.ShowCommandPalette, event)).toBe(false);
     });
 
     it('should match case-insensitively', () => {
       const event = new KeyboardEvent('keydown', { key: 'P', metaKey: true });
-      expect(matchShortcut('show_command_palette', event)).toBe(true);
+      expect(matchShortcut(Action.ShowCommandPalette, event)).toBe(true);
     });
 
     it('should handle special keys like Space', () => {
       const event = new KeyboardEvent('keydown', { key: ' ' });
-      expect(matchShortcut('grid_pan_mode', event)).toBe(true);
+      expect(matchShortcut(Action.GridPanMode, event)).toBe(true);
     });
 
     it('should match when multiple shortcut combinations are defined', () => {
       const event1 = new KeyboardEvent('keydown', { key: 'z', metaKey: true, shiftKey: true });
       const event2 = new KeyboardEvent('keydown', { key: 'y', metaKey: true });
-      expect(matchShortcut('redo', event1)).toBe(true);
-      expect(matchShortcut('redo', event2)).toBe(true);
+      expect(matchShortcut(Action.Redo, event1)).toBe(true);
+      expect(matchShortcut(Action.Redo, event2)).toBe(true);
+    });
+
+    it('should not match when an extra modifier key is pressed', () => {
+      const event = new KeyboardEvent('keydown', { key: 'p', metaKey: true, altKey: true });
+      expect(matchShortcut(Action.ShowCommandPalette, event)).toBe(false);
     });
   });
 
   describe('integration tests', () => {
     it('should correctly match all default mac shortcuts', () => {
-      defaultShortcuts.forEach(({ action, shortcuts }) => {
+      Object.entries(defaultShortcuts).forEach(([action, shortcuts]) => {
         vi.spyOn(isMacModule, 'isMac', 'get').mockReturnValue(true);
-        shortcuts.mac.forEach((combination) => {
-          const { metaKey, ctrlKey, altKey, shiftKey, key } = parseCombination(combination);
+        shortcuts.mac.forEach((shortcut) => {
+          const { metaKey, ctrlKey, altKey, shiftKey, key } = processShortcut(shortcut);
           const event = new KeyboardEvent('keydown', {
             metaKey,
             ctrlKey,
@@ -98,16 +89,16 @@ describe('shortcut utility functions', () => {
             shiftKey,
             key,
           });
-          expect(matchShortcut(action, event)).toBe(true);
+          expect(matchShortcut(action as Action, event)).toBe(true);
         });
       });
     });
 
     it('should correctly match all default windows shortcuts', () => {
-      defaultShortcuts.forEach(({ action, shortcuts }) => {
+      Object.entries(defaultShortcuts).forEach(([action, shortcuts]) => {
         vi.spyOn(isMacModule, 'isMac', 'get').mockReturnValue(false);
-        shortcuts.windows.forEach((combination) => {
-          const { metaKey, ctrlKey, altKey, shiftKey, key } = parseCombination(combination);
+        shortcuts.windows.forEach((shortcut) => {
+          const { metaKey, ctrlKey, altKey, shiftKey, key } = processShortcut(shortcut);
           const event = new KeyboardEvent('keydown', {
             metaKey,
             ctrlKey,
@@ -115,24 +106,24 @@ describe('shortcut utility functions', () => {
             shiftKey,
             key,
           });
-          expect(matchShortcut(action, event)).toBe(true);
+          expect(matchShortcut(action as Action, event)).toBe(true);
         });
       });
     });
 
     it('should not match shortcuts with extra keys pressed', () => {
       const event = new KeyboardEvent('keydown', { key: 'p', metaKey: true, altKey: true }); // Extra Alt key
-      expect(matchShortcut('show_command_palette', event)).toBe(false);
+      expect(matchShortcut(Action.ShowCommandPalette, event)).toBe(false);
     });
 
     it('should handle platform-specific shortcuts correctly', () => {
       vi.spyOn(isMacModule, 'isMac', 'get').mockReturnValue(true);
       let event = new KeyboardEvent('keydown', { key: 's', metaKey: true });
-      expect(matchShortcut('save', event)).toBe(true);
+      expect(matchShortcut(Action.Save, event)).toBe(true);
 
       vi.spyOn(isMacModule, 'isMac', 'get').mockReturnValue(false);
       event = new KeyboardEvent('keydown', { key: 's', ctrlKey: true });
-      expect(matchShortcut('save', event)).toBe(true);
+      expect(matchShortcut(Action.Save, event)).toBe(true);
     });
   });
 });
diff --git a/quadratic-client/src/app/helpers/keyboardShortcuts.ts b/quadratic-client/src/app/helpers/keyboardShortcuts.ts
index ca07404d30..a9d50e310b 100644
--- a/quadratic-client/src/app/helpers/keyboardShortcuts.ts
+++ b/quadratic-client/src/app/helpers/keyboardShortcuts.ts
@@ -1,73 +1,74 @@
-import { Action, defaultShortcuts } from '@/app/keyboard';
+import { Action } from '@/app/actions/actions';
+import { defaultShortcuts } from '@/app/keyboard/defaults';
+import { MacModifiers, WindowsModifiers } from '@/app/keyboard/keys';
+import { Shortcut } from '@/app/keyboard/shortcut';
 import { isMac } from '@/shared/utils/isMac';
 
 /**
  * Checks if a keyboard event should trigger a specific action.
- * @param {keyof typeof defaultShortcuts} action - The action to check
+ * @param {Action} action - The action to check
  * @param {KeyboardEvent | React.KeyboardEvent<Element>} event - The keyboard event
- * @returns {boolean} - Whether the keyboard event should trigger the action
+ * @returns {boolean} Whether the keyboard event should trigger the action
  */
 export const matchShortcut = (action: Action, event: KeyboardEvent | React.KeyboardEvent<Element>): boolean => {
-  const shortcuts = defaultShortcuts.find((shortcut) => shortcut.action === action)?.shortcuts;
+  const shortcuts = isMac ? defaultShortcuts[action]?.mac : defaultShortcuts[action]?.windows;
   if (!shortcuts) {
     return false;
   }
-  const platformShortcuts = isMac ? shortcuts.mac : shortcuts.windows;
-  return platformShortcuts.some((shortcut) => {
-    const parsedShortcut = parseCombination(shortcut);
+  return shortcuts.some((shortcut) => {
+    const eventKeys = processShortcut(shortcut);
     return (
-      parsedShortcut.metaKey === event.metaKey &&
-      parsedShortcut.ctrlKey === event.ctrlKey &&
-      parsedShortcut.altKey === event.altKey &&
-      parsedShortcut.shiftKey === event.shiftKey &&
-      parsedShortcut.key === event.key.toLowerCase()
+      eventKeys.metaKey === event.metaKey &&
+      eventKeys.ctrlKey === event.ctrlKey &&
+      eventKeys.altKey === event.altKey &&
+      eventKeys.shiftKey === event.shiftKey &&
+      eventKeys.key?.toLowerCase() === event.key.toLowerCase()
     );
   });
 };
 
-/**
- * Object representing a keyboard shortcut.
- */
-type ParsedShortcut = { metaKey: boolean; ctrlKey: boolean; altKey: boolean; shiftKey: boolean; key?: string };
+type EventKeys = {
+  metaKey: boolean;
+  ctrlKey: boolean;
+  altKey: boolean;
+  shiftKey: boolean;
+  key?: string;
+};
 
 /**
- * Parses a key combination string into an object representation.
- * @param {string} combination - The key combination string (e.g., "Ctrl+Shift+A")
- * @returns {Object} - An object representing the key combination
+ * Processes a shortcut combination into an object representation.
+ * @param {Shortcut} shortcut - The shortcut combination
+ * @returns {EventKeys} - An object representing the keys to be matched against the event
  */
-export const parseCombination = (combination: string): ParsedShortcut => {
-  const keys = combination
-    .toLowerCase()
-    .split('+')
-    .map((key) => key.trim());
-  const result: ParsedShortcut = {
+export const processShortcut = (shortcut: Shortcut): EventKeys => {
+  const result: EventKeys = {
     metaKey: false,
     ctrlKey: false,
     altKey: false,
     shiftKey: false,
     key: undefined,
   };
-  keys.forEach((key) => {
+
+  shortcut.forEach((key) => {
     switch (key) {
-      case 'cmd':
-      case 'win':
+      case MacModifiers.Cmd:
+      case WindowsModifiers.Win:
         result.metaKey = true;
         break;
-      case 'ctrl':
+      case MacModifiers.Ctrl:
+      case WindowsModifiers.Ctrl:
         result.ctrlKey = true;
         break;
-      case 'alt':
+      case MacModifiers.Alt:
+      case WindowsModifiers.Alt:
         result.altKey = true;
         break;
-      case 'shift':
+      case MacModifiers.Shift:
+      case WindowsModifiers.Shift:
         result.shiftKey = true;
         break;
-      case 'space':
-        result.key = ' ';
-        break;
       default:
         result.key = key;
-        break;
     }
   });
 
diff --git a/quadratic-client/src/app/helpers/keyboardShortcutsDisplay.test.ts b/quadratic-client/src/app/helpers/keyboardShortcutsDisplay.test.ts
new file mode 100644
index 0000000000..19cdc8e224
--- /dev/null
+++ b/quadratic-client/src/app/helpers/keyboardShortcutsDisplay.test.ts
@@ -0,0 +1,110 @@
+import { Action } from '@/app/actions/actions';
+import { keyboardShortcutEnumToDisplay } from '@/app/helpers/keyboardShortcutsDisplay';
+import { KeyboardSymbols } from '@/app/helpers/keyboardSymbols';
+import { defaultShortcuts } from '@/app/keyboard/defaults';
+import { Keys, MacModifiers, WindowsModifiers } from '@/app/keyboard/keys';
+import * as isMacModule from '@/shared/utils/isMac';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+vi.mock('@/shared/utils/isMac');
+
+describe('keyboardShortcutEnumToDisplay', () => {
+  const mockAction = Action.ZoomIn;
+
+  beforeEach(() => {
+    vi.resetAllMocks();
+  });
+
+  it('should return correct display for Mac shortcuts', () => {
+    vi.spyOn(isMacModule, 'isMac', 'get').mockReturnValue(true);
+    defaultShortcuts[mockAction] = {
+      mac: [[MacModifiers.Cmd, Keys.Plus]],
+      windows: [[WindowsModifiers.Ctrl, Keys.Plus]],
+    };
+
+    const result = keyboardShortcutEnumToDisplay(mockAction);
+    expect(result).toBe(`${KeyboardSymbols.Command}+`);
+  });
+
+  it('should return correct display for Windows shortcuts', () => {
+    vi.spyOn(isMacModule, 'isMac', 'get').mockReturnValue(false);
+    defaultShortcuts[mockAction] = {
+      mac: [[MacModifiers.Cmd, Keys.Plus]],
+      windows: [[WindowsModifiers.Ctrl, Keys.Plus]],
+    };
+
+    const result = keyboardShortcutEnumToDisplay(mockAction);
+    expect(result).toBe(`${KeyboardSymbols.Control}+`);
+  });
+
+  it('should handle multiple keys in a shortcut', () => {
+    vi.spyOn(isMacModule, 'isMac', 'get').mockReturnValue(true);
+    defaultShortcuts[mockAction] = {
+      mac: [[MacModifiers.Cmd, MacModifiers.Shift, Keys.A]],
+      windows: [[WindowsModifiers.Ctrl, WindowsModifiers.Shift, Keys.A]],
+    };
+
+    const result = keyboardShortcutEnumToDisplay(mockAction);
+    expect(result).toBe(`${KeyboardSymbols.Shift}${KeyboardSymbols.Command}A`);
+  });
+
+  it('should handle special keys correctly', () => {
+    vi.spyOn(isMacModule, 'isMac', 'get').mockReturnValue(true);
+    defaultShortcuts[mockAction] = {
+      mac: [[MacModifiers.Cmd, Keys.Enter, Keys.ArrowUp]],
+      windows: [[WindowsModifiers.Ctrl, Keys.Enter, Keys.ArrowUp]],
+    };
+
+    const result = keyboardShortcutEnumToDisplay(mockAction);
+    expect(result).toBe(`${KeyboardSymbols.Command}${KeyboardSymbols.Enter}${KeyboardSymbols.ArrowUp}`);
+  });
+
+  it('should handle all modifier keys', () => {
+    vi.spyOn(isMacModule, 'isMac', 'get').mockReturnValue(true);
+    defaultShortcuts[mockAction] = {
+      mac: [[MacModifiers.Cmd, MacModifiers.Ctrl, MacModifiers.Alt, MacModifiers.Shift]],
+      windows: [[WindowsModifiers.Ctrl, WindowsModifiers.Alt, WindowsModifiers.Shift]],
+    };
+
+    const result = keyboardShortcutEnumToDisplay(mockAction);
+    expect(result).toBe(
+      `${KeyboardSymbols.Control}${KeyboardSymbols.Alt}${KeyboardSymbols.Shift}${KeyboardSymbols.Command}`
+    );
+  });
+
+  it('should handle regular keys correctly', () => {
+    vi.spyOn(isMacModule, 'isMac', 'get').mockReturnValue(true);
+    defaultShortcuts[mockAction] = {
+      mac: [[Keys.A, Keys.B, Keys.C]],
+      windows: [[Keys.A, Keys.B, Keys.C]],
+    };
+
+    const result = keyboardShortcutEnumToDisplay(mockAction);
+    expect(result).toBe('ABC');
+  });
+
+  it('should handle empty shortcuts', () => {
+    vi.spyOn(isMacModule, 'isMac', 'get').mockReturnValue(true);
+    defaultShortcuts[mockAction] = {
+      mac: [[]],
+      windows: [[]],
+    };
+
+    const result = keyboardShortcutEnumToDisplay(mockAction);
+    expect(result).toBe('');
+  });
+
+  it('should handle platform-specific shortcuts correctly', () => {
+    vi.spyOn(isMacModule, 'isMac', 'get').mockReturnValue(true);
+    defaultShortcuts[mockAction] = {
+      mac: [[MacModifiers.Cmd, Keys.S]],
+      windows: [[WindowsModifiers.Ctrl, Keys.S]],
+    };
+    let result = keyboardShortcutEnumToDisplay(mockAction);
+    expect(result).toBe(`${KeyboardSymbols.Command}S`);
+
+    vi.spyOn(isMacModule, 'isMac', 'get').mockReturnValue(false);
+    result = keyboardShortcutEnumToDisplay(mockAction);
+    expect(result).toBe(`${KeyboardSymbols.Control}S`);
+  });
+});
diff --git a/quadratic-client/src/app/helpers/keyboardShortcutsDisplay.ts b/quadratic-client/src/app/helpers/keyboardShortcutsDisplay.ts
new file mode 100644
index 0000000000..964a717cfb
--- /dev/null
+++ b/quadratic-client/src/app/helpers/keyboardShortcutsDisplay.ts
@@ -0,0 +1,82 @@
+import { Action } from '@/app/actions/actions';
+import { KeyboardSymbols } from '@/app/helpers/keyboardSymbols';
+import { defaultShortcuts } from '@/app/keyboard/defaults';
+import { Keys, MacModifiers, WindowsModifiers } from '@/app/keyboard/keys';
+import { isMac } from '@/shared/utils/isMac';
+
+export function keyboardShortcutEnumToDisplay(action: Action) {
+  const platformShortcuts = isMac ? defaultShortcuts[action]?.mac : defaultShortcuts[action]?.windows;
+  let display = '';
+
+  if (!platformShortcuts) {
+    return display;
+  }
+
+  // Define a uniform, consistent display order for the shortcut keys
+  // The larger or more central modifiers tend to come last, like Command or Control.
+  // So, for macOS for example, you would see:
+  //   Redo  ⌘Z
+  //   Undo ⇧⌘Z
+  // Not:
+  //   Redo  ⌘Z
+  //   Undo ⌘⇧Z
+  const orderMap = new Map(
+    (isMac
+      ? [MacModifiers.Ctrl, MacModifiers.Alt, MacModifiers.Shift, MacModifiers.Cmd]
+      : [WindowsModifiers.Ctrl, WindowsModifiers.Alt, WindowsModifiers.Shift]
+    ).map((key, index) => [key, index])
+  );
+  const orderedKeys = platformShortcuts[0]?.sort((a, b) => {
+    const orderA = orderMap.get(a as MacModifiers | WindowsModifiers) ?? Infinity;
+    const orderB = orderMap.get(b as MacModifiers | WindowsModifiers) ?? Infinity;
+    return orderA - orderB;
+  });
+
+  orderedKeys?.forEach((key) => {
+    switch (key) {
+      case MacModifiers.Cmd:
+        display += KeyboardSymbols.Command;
+        break;
+      case MacModifiers.Ctrl:
+      case WindowsModifiers.Ctrl:
+        display += KeyboardSymbols.Control;
+        break;
+      case MacModifiers.Alt:
+      case WindowsModifiers.Alt:
+        display += KeyboardSymbols.Alt;
+        break;
+      case MacModifiers.Shift:
+      case WindowsModifiers.Shift:
+        display += KeyboardSymbols.Shift;
+        break;
+      case Keys.Escape:
+        display += KeyboardSymbols.Escape;
+        break;
+      case Keys.Enter:
+        display += KeyboardSymbols.Enter;
+        break;
+      case Keys.Backspace:
+        display += KeyboardSymbols.Backspace;
+        break;
+      case Keys.Delete:
+        display += KeyboardSymbols.Delete;
+        break;
+      case Keys.ArrowUp:
+        display += KeyboardSymbols.ArrowUp;
+        break;
+      case Keys.ArrowRight:
+        display += KeyboardSymbols.ArrowRight;
+        break;
+      case Keys.ArrowDown:
+        display += KeyboardSymbols.ArrowDown;
+        break;
+      case Keys.ArrowLeft:
+        display += KeyboardSymbols.ArrowLeft;
+        break;
+      default:
+        display += key;
+        break;
+    }
+  });
+  return display;
+}
diff --git a/quadratic-client/src/app/keyboard/actions.ts b/quadratic-client/src/app/keyboard/actions.ts
deleted file mode 100644
index 165947df24..0000000000
--- a/quadratic-client/src/app/keyboard/actions.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-import { z } from 'zod';
-
-export const ActionEnum = z.enum([
-  'grid_pan_mode',
-  'show_command_palette',
-  'toggle_presentation_mode',
-  'close_overlay',
-  'show_go_to_menu',
-  'zoom_in',
-  'zoom_out',
-  'zoom_to_selection',
-  'zoom_to_fit',
-  'zoom_to_100',
-  'save',
-  'switch_sheet_next',
-  'switch_sheet_previous',
-  'clear_formatting_borders',
-  'toggle_bold',
-  'toggle_italic',
-  'fill_right',
-  'fill_down',
-  'cancel_execution',
-  'show_search',
-  'copy_as_png',
-  'download_as_csv',
-  'undo',
-  'redo',
-  'select_all',
-  'select_column',
-  'select_row',
-  'execute_code',
-  'rerun_sheet_code',
-  'rerun_all_code',
-  'insert_cell_reference',
-  'move_cursor_up',
-  'jump_cursor_content_top',
-  'expand_selection_up',
-  'expand_selection_content_top',
-  'move_cursor_down',
-  'jump_cursor_content_bottom',
-  'expand_selection_down',
-  'expand_selection_content_bottom',
-  'move_cursor_left',
-  'jump_cursor_content_left',
-  'expand_selection_left',
-  'expand_selection_content_left',
-  'move_cursor_right',
-  'jump_cursor_content_right',
-  'expand_selection_right',
-  'expand_selection_content_right',
-  'goto_A0',
-  'goto_bottom_right',
-  'goto_row_start',
-  'goto_row_end',
-  'page_up',
-  'page_down',
-  'move_cursor_right_with_selection',
-  'move_cursor_left_with_selection',
-  'edit_cell',
-  'delete_cell',
-  'show_cell_type_menu',
-  'close_inline_editor',
-  'save_inline_editor',
-  'save_inline_editor_move_up',
-  'save_inline_editor_move_right',
-  'save_inline_editor_move_left',
-  'remove_inserted_cells',
-  'trigger_cell',
-]);
-
-export type Action = z.infer<typeof ActionEnum>;
diff --git a/quadratic-client/src/app/keyboard/defaults.ts b/quadratic-client/src/app/keyboard/defaults.ts
index 31dad716f8..d8bb45fd74 100644
--- a/quadratic-client/src/app/keyboard/defaults.ts
+++ b/quadratic-client/src/app/keyboard/defaults.ts
@@ -1,478 +1,336 @@
-import { Shortcuts } from './schema';
+import { Action } from '@/app/actions/actions';
+import { Keys, MacModifiers, WindowsModifiers } from '@/app/keyboard/keys';
+import { ActionShortcut } from '@/app/keyboard/shortcut';
 
-export const defaultShortcuts: Shortcuts = [
-  // QuadraticGrid.tsx
-  {
-    action: 'grid_pan_mode',
-    shortcuts: {
-      mac: ['Space'],
-      windows: ['Space'],
-    },
+export const defaultShortcuts: ActionShortcut = {
+  [Action.Copy]: {
+    mac: [[MacModifiers.Cmd, Keys.C]],
+    windows: [[WindowsModifiers.Ctrl, Keys.C]],
+  },
+  [Action.Cut]: {
+    mac: [[MacModifiers.Cmd, Keys.X]],
+    windows: [[WindowsModifiers.Ctrl, Keys.X]],
+  },
+  [Action.Paste]: {
+    mac: [[MacModifiers.Cmd, Keys.V]],
+    windows: [[WindowsModifiers.Ctrl, Keys.V]],
+  },
+  [Action.PasteValuesOnly]: {
+    mac: [[MacModifiers.Cmd, MacModifiers.Shift, Keys.V]],
+    windows: [[WindowsModifiers.Ctrl, WindowsModifiers.Shift, Keys.V]],
+  },
+  [Action.FindInCurrentSheet]: {
+    mac: [[MacModifiers.Cmd, Keys.F]],
+    windows: [[WindowsModifiers.Ctrl, Keys.F]],
+  },
+  [Action.FindInAllSheets]: {
+    mac: [[MacModifiers.Cmd, MacModifiers.Shift, Keys.F]],
+    windows: [[WindowsModifiers.Ctrl, WindowsModifiers.Shift, Keys.F]],
+  },
+  [Action.GridPanMode]: {
+    mac: [[Keys.Space]],
+    windows: [[Keys.Space]],
+  },
+  [Action.ShowCommandPalette]: {
+    mac: [
+      [MacModifiers.Cmd, Keys.P],
+      [MacModifiers.Cmd, Keys.Slash],
+    ],
+    windows: [
+      [WindowsModifiers.Ctrl, Keys.P],
+      [WindowsModifiers.Ctrl, Keys.Slash],
+    ],
+  },
+  [Action.TogglePresentationMode]: {
+    mac: [[MacModifiers.Cmd, Keys.Period]],
+    windows: [[WindowsModifiers.Ctrl, Keys.Period]],
+  },
+  [Action.CloseOverlay]: {
+    mac: [[Keys.Escape]],
+    windows: [[Keys.Escape]],
+  },
+  [Action.ShowGoToMenu]: {
+    mac: [
+      [MacModifiers.Cmd, Keys.G],
+      [MacModifiers.Cmd, Keys.J],
+    ],
+    windows: [
+      [WindowsModifiers.Ctrl, Keys.G],
+      [WindowsModifiers.Ctrl, Keys.J],
+    ],
+  },
+  [Action.ZoomIn]: {
+    mac: [
+      [MacModifiers.Cmd, Keys.Plus],
+      [MacModifiers.Cmd, Keys.Equals],
+    ],
+    windows: [
+      [WindowsModifiers.Ctrl, Keys.Plus],
+      [WindowsModifiers.Ctrl, Keys.Equals],
+    ],
+  },
+  [Action.ZoomOut]: {
+    mac: [[MacModifiers.Cmd, Keys.Minus]],
+    windows: [[WindowsModifiers.Ctrl, Keys.Minus]],
+  },
+  [Action.ZoomToSelection]: {
+    mac: [[MacModifiers.Cmd, Keys.Eight]],
+    windows: [[WindowsModifiers.Ctrl, Keys.Eight]],
+  },
+  [Action.ZoomToFit]: {
+    mac: [[MacModifiers.Cmd, Keys.Nine]],
+    windows: [[WindowsModifiers.Ctrl, Keys.Nine]],
+  },
+  [Action.ZoomTo100]: {
+    mac: [[MacModifiers.Cmd, Keys.Zero]],
+    windows: [[WindowsModifiers.Ctrl, Keys.Zero]],
+  },
+  [Action.Save]: {
+    mac: [[MacModifiers.Cmd, Keys.S]],
+    windows: [[WindowsModifiers.Ctrl, Keys.S]],
+  },
+  [Action.SwitchSheetNext]: {
+    mac: [
+      [MacModifiers.Cmd, MacModifiers.Shift, Keys.PageUp],
+      [MacModifiers.Cmd, MacModifiers.Alt, Keys.PageUp],
+      [MacModifiers.Alt, Keys.ArrowUp],
+      [MacModifiers.Alt, Keys.ArrowRight],
+    ],
+    windows: [
+      [WindowsModifiers.Ctrl, WindowsModifiers.Shift, Keys.PageUp],
+      [WindowsModifiers.Ctrl, WindowsModifiers.Alt, Keys.PageUp],
+      [WindowsModifiers.Alt, Keys.ArrowUp],
+      [WindowsModifiers.Alt, Keys.ArrowRight],
+    ],
+  },
+  [Action.SwitchSheetPrevious]: {
+    mac: [
+      [MacModifiers.Cmd, MacModifiers.Shift, Keys.PageDown],
+      [MacModifiers.Cmd, MacModifiers.Alt, Keys.PageDown],
+      [MacModifiers.Alt, Keys.ArrowDown],
+      [MacModifiers.Alt, Keys.ArrowLeft],
+    ],
+    windows: [
+      [WindowsModifiers.Ctrl, WindowsModifiers.Shift, Keys.PageDown],
+      [WindowsModifiers.Ctrl, WindowsModifiers.Alt, Keys.PageDown],
+      [WindowsModifiers.Alt, Keys.ArrowDown],
+      [WindowsModifiers.Alt, Keys.ArrowLeft],
+    ],
+  },
+  [Action.ClearFormattingBorders]: {
+    mac: [[MacModifiers.Cmd, Keys.Backslash]],
+    windows: [[WindowsModifiers.Ctrl, Keys.Backslash]],
+  },
+  [Action.ToggleBold]: {
+    mac: [[MacModifiers.Cmd, Keys.B]],
+    windows: [[WindowsModifiers.Ctrl, Keys.B]],
+  },
+  [Action.ToggleItalic]: {
+    mac: [[MacModifiers.Cmd, Keys.I]],
+    windows: [[WindowsModifiers.Ctrl, Keys.I]],
+  },
+  [Action.FillRight]: {
+    mac: [[MacModifiers.Cmd, Keys.R]],
+    windows: [[WindowsModifiers.Ctrl, Keys.R]],
+  },
+  [Action.FillDown]: {
+    mac: [[MacModifiers.Cmd, Keys.D]],
+    windows: [[WindowsModifiers.Ctrl, Keys.D]],
+  },
+  [Action.CancelExecution]: {
+    mac: [[MacModifiers.Cmd, Keys.Escape]],
+    windows: [[WindowsModifiers.Ctrl, Keys.Escape]],
+  },
+  [Action.CopyAsPng]: {
+    mac: [[MacModifiers.Cmd, MacModifiers.Shift, Keys.C]],
+    windows: [[WindowsModifiers.Ctrl, WindowsModifiers.Shift, Keys.C]],
+  },
+  [Action.DownloadAsCsv]: {
+    mac: [[MacModifiers.Cmd, MacModifiers.Shift, Keys.E]],
+    windows: [[WindowsModifiers.Ctrl, WindowsModifiers.Shift, Keys.E]],
+  },
+  [Action.Undo]: {
+    mac: [[MacModifiers.Cmd, Keys.Z]],
+    windows: [[WindowsModifiers.Ctrl, Keys.Z]],
+  },
+  [Action.Redo]: {
+    mac: [
+      [MacModifiers.Cmd, MacModifiers.Shift, Keys.Z],
+      [MacModifiers.Cmd, Keys.Y],
+    ],
+    windows: [
+      [WindowsModifiers.Ctrl, WindowsModifiers.Shift, Keys.Z],
+      [WindowsModifiers.Ctrl, Keys.Y],
+    ],
+  },
+  [Action.SelectAll]: {
+    mac: [
+      [MacModifiers.Cmd, Keys.A],
+      [MacModifiers.Cmd, MacModifiers.Shift, Keys.Space],
+    ],
+    windows: [
+      [WindowsModifiers.Ctrl, Keys.A],
+      [WindowsModifiers.Ctrl, WindowsModifiers.Shift, Keys.Space],
+    ],
+  },
+  [Action.SelectColumn]: {
+    mac: [[MacModifiers.Cmd, Keys.Space]],
+    windows: [[WindowsModifiers.Ctrl, Keys.Space]],
+  },
+  [Action.SelectRow]: {
+    mac: [[MacModifiers.Shift, Keys.Space]],
+    windows: [[WindowsModifiers.Shift, Keys.Space]],
+  },
+  [Action.ExecuteCode]: {
+    mac: [[MacModifiers.Cmd, Keys.Enter]],
+    windows: [[WindowsModifiers.Ctrl, Keys.Enter]],
+  },
+  [Action.RerunSheetCode]: {
+    mac: [[MacModifiers.Cmd, MacModifiers.Shift, MacModifiers.Alt, Keys.Enter]],
+    windows: [[WindowsModifiers.Ctrl, WindowsModifiers.Shift, WindowsModifiers.Alt, Keys.Enter]],
+  },
+  [Action.RerunAllCode]: {
+    mac: [[MacModifiers.Cmd, MacModifiers.Shift, Keys.Enter]],
+    windows: [[WindowsModifiers.Ctrl, WindowsModifiers.Shift, Keys.Enter]],
+  },
+  [Action.InsertCellReference]: {
+    mac: [[MacModifiers.Cmd, Keys.L]],
+    windows: [[WindowsModifiers.Ctrl, Keys.L]],
+  },
+  [Action.MoveCursorUp]: {
+    mac: [[Keys.ArrowUp]],
+    windows: [[Keys.ArrowUp]],
+  },
+  [Action.JumpCursorContentTop]: {
+    mac: [[MacModifiers.Cmd, Keys.ArrowUp]],
+    windows: [[WindowsModifiers.Ctrl, Keys.ArrowUp]],
+  },
+  [Action.ExpandSelectionUp]: {
+    mac: [[MacModifiers.Shift, Keys.ArrowUp]],
+    windows: [[WindowsModifiers.Shift, Keys.ArrowUp]],
+  },
+  [Action.ExpandSelectionContentTop]: {
+    mac: [[MacModifiers.Cmd, MacModifiers.Shift, Keys.ArrowUp]],
+    windows: [[WindowsModifiers.Ctrl, WindowsModifiers.Shift, Keys.ArrowUp]],
+  },
+  [Action.MoveCursorDown]: {
+    mac: [[Keys.ArrowDown]],
+    windows: [[Keys.ArrowDown]],
+  },
+  [Action.JumpCursorContentBottom]: {
+    mac: [[MacModifiers.Cmd, Keys.ArrowDown]],
+    windows: [[WindowsModifiers.Ctrl, Keys.ArrowDown]],
+  },
+  [Action.ExpandSelectionDown]: {
+    mac: [[MacModifiers.Shift, Keys.ArrowDown]],
+    windows: [[WindowsModifiers.Shift, Keys.ArrowDown]],
+  },
+  [Action.ExpandSelectionContentBottom]: {
+    mac: [[MacModifiers.Cmd, MacModifiers.Shift, Keys.ArrowDown]],
+    windows: [[WindowsModifiers.Ctrl, WindowsModifiers.Shift, Keys.ArrowDown]],
+  },
+  [Action.MoveCursorLeft]: {
+    mac: [[Keys.ArrowLeft]],
+    windows: [[Keys.ArrowLeft]],
+  },
+  [Action.JumpCursorContentLeft]: {
+    mac: [[MacModifiers.Cmd, Keys.ArrowLeft]],
+    windows: [[WindowsModifiers.Ctrl, Keys.ArrowLeft]],
+  },
+  [Action.ExpandSelectionLeft]: {
+    mac: [[MacModifiers.Shift, Keys.ArrowLeft]],
+    windows: [[WindowsModifiers.Shift, Keys.ArrowLeft]],
+  },
+  [Action.ExpandSelectionContentLeft]: {
+    mac: [[MacModifiers.Cmd, MacModifiers.Shift, Keys.ArrowLeft]],
+    windows: [[WindowsModifiers.Ctrl, WindowsModifiers.Shift, Keys.ArrowLeft]],
+  },
+  [Action.MoveCursorRight]: {
+    mac: [[Keys.ArrowRight]],
+    windows: [[Keys.ArrowRight]],
+  },
+  [Action.JumpCursorContentRight]: {
+    mac: [[MacModifiers.Cmd, Keys.ArrowRight]],
+    windows: [[WindowsModifiers.Ctrl, Keys.ArrowRight]],
+  },
+  [Action.ExpandSelectionRight]: {
+    mac: [[MacModifiers.Shift, Keys.ArrowRight]],
+    windows: [[WindowsModifiers.Shift, Keys.ArrowRight]],
+  },
+  [Action.ExpandSelectionContentRight]: {
+    mac: [[MacModifiers.Cmd, MacModifiers.Shift, Keys.ArrowRight]],
+    windows: [[WindowsModifiers.Ctrl, WindowsModifiers.Shift, Keys.ArrowRight]],
+  },
+  [Action.GotoA0]: {
+    mac: [[MacModifiers.Cmd, Keys.Home]],
+    windows: [[WindowsModifiers.Ctrl, Keys.Home]],
+  },
+  [Action.GotoBottomRight]: {
+    mac: [[MacModifiers.Cmd, Keys.End]],
+    windows: [[WindowsModifiers.Ctrl, Keys.End]],
   },
-
-  // keyboardViewport.ts
-  {
-    action: 'show_command_palette',
-    shortcuts: {
-      mac: ['Cmd + P', 'Cmd + /'],
-      windows: ['Ctrl + P', 'Ctrl + /'],
-    },
-  },
-  {
-    action: 'toggle_presentation_mode',
-    shortcuts: {
-      mac: ['Cmd + .'],
-      windows: ['Ctrl + .'],
-    },
-  },
-  {
-    action: 'close_overlay',
-    shortcuts: {
-      mac: ['Escape'],
-      windows: ['Escape'],
-    },
-  },
-  {
-    action: 'show_go_to_menu',
-    shortcuts: {
-      mac: ['Cmd + G', 'Cmd + J'],
-      windows: ['Ctrl + G', 'Ctrl + J'],
-    },
-  },
-  {
-    action: 'zoom_in',
-    shortcuts: {
-      mac: ['Cmd + ='],
-      windows: ['Ctrl + ='],
-    },
-  },
-  {
-    action: 'zoom_out',
-    shortcuts: {
-      mac: ['Cmd + -'],
-      windows: ['Ctrl + -'],
-    },
-  },
-  {
-    action: 'zoom_to_selection',
-    shortcuts: {
-      mac: ['Cmd + 8'],
-      windows: ['Ctrl + 8'],
-    },
-  },
-  {
-    action: 'zoom_to_fit',
-    shortcuts: {
-      mac: ['Cmd + 9'],
-      windows: ['Ctrl + 9'],
-    },
-  },
-  {
-    action: 'zoom_to_100',
-    shortcuts: {
-      mac: ['Cmd + 0'],
-      windows: ['Ctrl + 0'],
-    },
-  },
-  {
-    action: 'save',
-    shortcuts: {
-      mac: ['Cmd + S'],
-      windows: ['Ctrl + S'],
-    },
-  },
-  {
-    action: 'switch_sheet_next',
-    shortcuts: {
-      mac: ['Cmd + Shift + PageUp', 'Cmd + Alt + PageUp', 'Alt + ArrowUp', 'Alt + ArrowRight'],
-      windows: ['Ctrl + Shift + PageUp', 'Ctrl + Alt + PageUp', 'Alt + ArrowUp', 'Alt + ArrowRight'],
-    },
-  },
-  {
-    action: 'switch_sheet_previous',
-    shortcuts: {
-      mac: ['Cmd + Shift + PageDown', 'Cmd + Alt + PageDown', 'Alt + ArrowDown', 'Alt + ArrowLeft'],
-      windows: ['Ctrl + Shift + PageDown', 'Ctrl + Alt + PageDown', 'Alt + ArrowDown', 'Alt + ArrowLeft'],
-    },
-  },
-  {
-    action: 'clear_formatting_borders',
-    shortcuts: {
-      mac: ['Cmd + \\'],
-      windows: ['Ctrl + \\'],
-    },
-  },
-  {
-    action: 'toggle_bold',
-    shortcuts: {
-      mac: ['Cmd + B'],
-      windows: ['Ctrl + B'],
-    },
-  },
-  {
-    action: 'toggle_italic',
-    shortcuts: {
-      mac: ['Cmd + I'],
-      windows: ['Ctrl + I'],
-    },
-  },
-  {
-    action: 'fill_right',
-    shortcuts: {
-      mac: ['Cmd + R'],
-      windows: ['Ctrl + R'],
-    },
-  },
-  {
-    action: 'fill_down',
-    shortcuts: {
-      mac: ['Cmd + D'],
-      windows: ['Ctrl + D'],
-    },
-  },
-  {
-    action: 'cancel_execution',
-    shortcuts: {
-      mac: ['Cmd + Escape'],
-      windows: ['Ctrl + Escape'],
-    },
+  [Action.GotoRowStart]: {
+    mac: [[Keys.Home]],
+    windows: [[Keys.Home]],
   },
-
-  // keyboardSearch.ts
-  {
-    action: 'show_search',
-    shortcuts: {
-      mac: ['Cmd + F'],
-      windows: ['Ctrl + F'],
-    },
+  [Action.GotoRowEnd]: {
+    mac: [[Keys.End]],
+    windows: [[Keys.End]],
   },
-
-  // keyboardClipboard.ts
-  {
-    action: 'copy_as_png',
-    shortcuts: {
-      mac: ['Cmd + Shift + C'],
-      windows: ['Ctrl + Shift + C'],
-    },
-  },
-  {
-    action: 'download_as_csv',
-    shortcuts: {
-      mac: ['Cmd + Shift + E'],
-      windows: ['Ctrl + Shift + E'],
-    },
+  [Action.PageUp]: {
+    mac: [[Keys.PageUp]],
+    windows: [[Keys.PageUp]],
   },
-
-  // keyboardUndoRedo.ts
-  {
-    action: 'undo',
-    shortcuts: {
-      mac: ['Cmd + Z'],
-      windows: ['Ctrl + Z'],
-    },
-  },
-  {
-    action: 'redo',
-    shortcuts: {
-      mac: ['Cmd + Shift + Z', 'Cmd + Y'],
-      windows: ['Ctrl + Shift + Z', 'Ctrl + Y'],
-    },
+  [Action.PageDown]: {
+    mac: [[Keys.PageDown]],
+    windows: [[Keys.PageDown]],
   },
-
-  // keyboardSelect.ts
-  {
-    action: 'select_all',
-    shortcuts: {
-      mac: ['Cmd + A', 'Cmd + Shift + Space'],
-      windows: ['Ctrl + A', 'Ctrl + Shift + Space'],
-    },
-  },
-  {
-    action: 'select_column',
-    shortcuts: {
-      mac: ['Cmd + Space'],
-      windows: ['Ctrl + Space'],
-    },
-  },
-  {
-    action: 'select_row',
-    shortcuts: {
-      mac: ['Shift + Space'],
-      windows: ['Shift + Space'],
-    },
+  [Action.MoveCursorRightWithSelection]: {
+    mac: [[Keys.Tab]],
+    windows: [[Keys.Tab]],
   },
-
-  // keyboardCode.ts
-  {
-    action: 'execute_code',
-    shortcuts: {
-      mac: ['Cmd + Enter'],
-      windows: ['Ctrl + Enter'],
-    },
-  },
-  {
-    action: 'rerun_sheet_code',
-    shortcuts: {
-      mac: ['Cmd + Shift + Alt + Enter'],
-      windows: ['Ctrl + Shift + Alt + Enter'],
-    },
-  },
-  {
-    action: 'rerun_all_code',
-    shortcuts: {
-      mac: ['Cmd + Shift + Enter'],
-      windows: ['Ctrl + Shift + Enter'],
-    },
-  },
-  {
-    action: 'insert_cell_reference',
-    shortcuts: {
-      mac: ['Cmd + L'],
-      windows: ['Ctrl + L'],
-    },
+  [Action.MoveCursorLeftWithSelection]: {
+    mac: [[MacModifiers.Shift, Keys.Tab]],
+    windows: [[WindowsModifiers.Shift, Keys.Tab]],
   },
-
-  // keyboardPosition.ts
-  {
-    action: 'move_cursor_up',
-    shortcuts: {
-      mac: ['ArrowUp'],
-      windows: ['ArrowUp'],
-    },
-  },
-  {
-    action: 'jump_cursor_content_top',
-    shortcuts: {
-      mac: ['Cmd + ArrowUp'],
-      windows: ['Ctrl + ArrowUp'],
-    },
-  },
-  {
-    action: 'expand_selection_up',
-    shortcuts: {
-      mac: ['Shift + ArrowUp'],
-      windows: ['Shift + ArrowUp'],
-    },
-  },
-  {
-    action: 'expand_selection_content_top',
-    shortcuts: {
-      mac: ['Cmd + Shift + ArrowUp'],
-      windows: ['Ctrl + Shift + ArrowUp'],
-    },
-  },
-  {
-    action: 'move_cursor_down',
-    shortcuts: {
-      mac: ['ArrowDown'],
-      windows: ['ArrowDown'],
-    },
-  },
-  {
-    action: 'jump_cursor_content_bottom',
-    shortcuts: {
-      mac: ['Cmd + ArrowDown'],
-      windows: ['Ctrl + ArrowDown'],
-    },
-  },
-  {
-    action: 'expand_selection_down',
-    shortcuts: {
-      mac: ['Shift + ArrowDown'],
-      windows: ['Shift + ArrowDown'],
-    },
-  },
-  {
-    action: 'expand_selection_content_bottom',
-    shortcuts: {
-      mac: ['Cmd + Shift + ArrowDown'],
-      windows: ['Ctrl + Shift + ArrowDown'],
-    },
-  },
-  {
-    action: 'move_cursor_left',
-    shortcuts: {
-      mac: ['ArrowLeft'],
-      windows: ['ArrowLeft'],
-    },
-  },
-  {
-    action: 'jump_cursor_content_left',
-    shortcuts: {
-      mac: ['Cmd + ArrowLeft'],
-      windows: ['Ctrl + ArrowLeft'],
-    },
-  },
-  {
-    action: 'expand_selection_left',
-    shortcuts: {
-      mac: ['Shift + ArrowLeft'],
-      windows: ['Shift + ArrowLeft'],
-    },
-  },
-  {
-    action: 'expand_selection_content_left',
-    shortcuts: {
-      mac: ['Cmd + Shift + ArrowLeft'],
-      windows: ['Ctrl + Shift + ArrowLeft'],
-    },
-  },
-  {
-    action: 'move_cursor_right',
-    shortcuts: {
-      mac: ['ArrowRight'],
-      windows: ['ArrowRight'],
-    },
-  },
-  {
-    action: 'jump_cursor_content_right',
-    shortcuts: {
-      mac: ['Cmd + ArrowRight'],
-      windows: ['Ctrl + ArrowRight'],
-    },
-  },
-  {
-    action: 'expand_selection_right',
-    shortcuts: {
-      mac: ['Shift + ArrowRight'],
-      windows: ['Shift + ArrowRight'],
-    },
-  },
-  {
-    action: 'expand_selection_content_right',
-    shortcuts: {
-      mac: ['Cmd + Shift + ArrowRight'],
-      windows: ['Ctrl + Shift + ArrowRight'],
-    },
-  },
-  {
-    action: 'goto_A0',
-    shortcuts: {
-      mac: ['Cmd + Home'],
-      windows: ['Ctrl + Home'],
-    },
-  },
-  {
-    action: 'goto_bottom_right',
-    shortcuts: {
-      mac: ['Cmd + End'],
-      windows: ['Ctrl + End'],
-    },
-  },
-  {
-    action: 'goto_row_start',
-    shortcuts: {
-      mac: ['Home'],
-      windows: ['Home'],
-    },
-  },
-  {
-    action: 'goto_row_end',
-    shortcuts: {
-      mac: ['End'],
-      windows: ['End'],
-    },
-  },
-  {
-    action: 'page_up',
-    shortcuts: {
-      mac: ['PageUp'],
-      windows: ['PageUp'],
-    },
-  },
-  {
-    action: 'page_down',
-    shortcuts: {
-      mac: ['PageDown'],
-      windows: ['PageDown'],
-    },
+  [Action.EditCell]: {
+    mac: [[Keys.Enter], [MacModifiers.Shift, Keys.Enter], [Keys.F2]],
+    windows: [[Keys.Enter], [WindowsModifiers.Shift, Keys.Enter], [Keys.F2]],
   },
-
-  // keyboardCell.ts
-  {
-    action: 'move_cursor_right_with_selection',
-    shortcuts: {
-      mac: ['Tab'],
-      windows: ['Tab'],
-    },
-  },
-  {
-    action: 'move_cursor_left_with_selection',
-    shortcuts: {
-      mac: ['Shift + Tab'],
-      windows: ['Shift + Tab'],
-    },
-  },
-  {
-    action: 'edit_cell',
-    shortcuts: {
-      mac: ['Enter', 'Shift + Enter', 'F2'],
-      windows: ['Enter', 'Shift + Enter', 'F2'],
-    },
-  },
-  {
-    action: 'delete_cell',
-    shortcuts: {
-      mac: ['Backspace', 'Delete'],
-      windows: ['Backspace', 'Delete'],
-    },
-  },
-  {
-    action: 'show_cell_type_menu',
-    shortcuts: {
-      mac: ['/', 'Shift + /'],
-      windows: ['/', 'Shift + /'],
-    },
+  [Action.DeleteCell]: {
+    mac: [[Keys.Backspace], [Keys.Delete]],
+    windows: [[Keys.Backspace], [Keys.Delete]],
   },
-
-  // InlineEditorKeyboard.ts
-  {
-    action: 'close_inline_editor',
-    shortcuts: {
-      mac: ['Escape'],
-      windows: ['Escape'],
-    },
-  },
-  {
-    action: 'save_inline_editor',
-    shortcuts: {
-      mac: ['Enter', 'Cmd + Enter'],
-      windows: ['Enter', 'Ctrl + Enter'],
-    },
-  },
-  {
-    action: 'save_inline_editor_move_up',
-    shortcuts: {
-      mac: ['Shift + Enter'],
-      windows: ['Shift + Enter'],
-    },
-  },
-  {
-    action: 'save_inline_editor_move_right',
-    shortcuts: {
-      mac: ['Tab'],
-      windows: ['Tab'],
-    },
-  },
-  {
-    action: 'save_inline_editor_move_left',
-    shortcuts: {
-      mac: ['Shift + Tab'],
-      windows: ['Shift + Tab'],
-    },
-  },
-  {
-    action: 'remove_inserted_cells',
-    shortcuts: {
-      mac: ['Backspace'],
-      windows: ['Backspace'],
-    },
-  },
-  {
-    action: 'trigger_cell',
-    shortcuts: {
-      mac: ['Space'],
-      windows: ['Space'],
-    },
-  },
-];
+  [Action.ShowCellTypeMenu]: {
+    mac: [[Keys.Slash], [MacModifiers.Shift, Keys.Slash]],
+    windows: [[Keys.Slash], [WindowsModifiers.Shift, Keys.Slash]],
+  },
+  [Action.CloseInlineEditor]: {
+    mac: [[Keys.Escape]],
+    windows: [[Keys.Escape]],
+  },
+  [Action.SaveInlineEditor]: {
+    mac: [[Keys.Enter], [MacModifiers.Cmd, Keys.Enter]],
+    windows: [[Keys.Enter], [WindowsModifiers.Ctrl, Keys.Enter]],
+  },
+  [Action.SaveInlineEditorMoveUp]: {
+    mac: [[MacModifiers.Shift, Keys.Enter]],
+    windows: [[WindowsModifiers.Shift, Keys.Enter]],
+  },
+  [Action.SaveInlineEditorMoveRight]: {
+    mac: [[Keys.Tab]],
+    windows: [[Keys.Tab]],
+  },
+  [Action.SaveInlineEditorMoveLeft]: {
+    mac: [[MacModifiers.Shift, Keys.Tab]],
+    windows: [[WindowsModifiers.Shift, Keys.Tab]],
+  },
+  [Action.RemoveInsertedCells]: {
+    mac: [[Keys.Backspace]],
+    windows: [[Keys.Backspace]],
+  },
+  [Action.TriggerCell]: {
+    mac: [[Keys.Space]],
+    windows: [[Keys.Space]],
+  },
+};
diff --git a/quadratic-client/src/app/keyboard/index.ts b/quadratic-client/src/app/keyboard/index.ts
deleted file mode 100644
index 8cd0fda4d8..0000000000
--- a/quadratic-client/src/app/keyboard/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export type { Action } from './actions';
-export { defaultShortcuts } from './defaults';
-export { ShortcutsSchema } from './schema';
diff --git a/quadratic-client/src/app/keyboard/keys.ts b/quadratic-client/src/app/keyboard/keys.ts
index 01d262c16e..08fd907661 100644
--- a/quadratic-client/src/app/keyboard/keys.ts
+++ b/quadratic-client/src/app/keyboard/keys.ts
@@ -1,79 +1,103 @@
-import { z } from 'zod';
+export enum MacModifiers {
+  Cmd = 'metaKey',
+  Ctrl = 'ctrlKey',
+  Alt = 'altKey',
+  Shift = 'shiftKey',
+}
 
-export const MacModifiersEnum = z.enum(['Cmd', 'Shift', 'Alt', 'Ctrl']);
-export const WindowsModifiersEnum = z.enum(['Ctrl', 'Shift', 'Alt', 'Win']);
-export const KeysEnum = z.enum([
-  'A',
-  'B',
-  'C',
-  'D',
-  'E',
-  'F',
-  'G',
-  'H',
-  'I',
-  'J',
-  'K',
-  'L',
-  'M',
-  'N',
-  'O',
-  'P',
-  'Q',
-  'R',
-  'S',
-  'T',
-  'U',
-  'V',
-  'W',
-  'X',
-  'Y',
-  'Z',
-  '0',
-  '1',
-  '2',
-  '3',
-  '4',
-  '5',
-  '6',
-  '7',
-  '8',
-  '9',
-  'F1',
-  'F2',
-  'F3',
-  'F4',
-  'F5',
-  'F6',
-  'F7',
-  'F8',
-  'F9',
-  'F10',
-  'F11',
-  'F12',
-  'Tab',
-  'Space',
-  'Enter',
-  'Backspace',
-  'Delete',
-  'Escape',
-  'Home',
-  'End',
-  'PageUp',
-  'PageDown',
-  'ArrowUp',
-  'ArrowDown',
-  'ArrowLeft',
-  'ArrowRight',
-  '`',
-  '-',
-  '=',
-  '[',
-  ']',
-  '\\',
-  ';',
-  "'",
-  ',',
-  '.',
-  '/',
-]);
+export enum WindowsModifiers {
+  Win = 'metaKey',
+  Ctrl = 'ctrlKey',
+  Alt = 'altKey',
+  Shift = 'shiftKey',
+}
+
+export enum Keys {
+  A = 'A',
+  B = 'B',
+  C = 'C',
+  D = 'D',
+  E = 'E',
+  F = 'F',
+  G = 'G',
+  H = 'H',
+  I = 'I',
+  J = 'J',
+  K = 'K',
+  L = 'L',
+  M = 'M',
+  N = 'N',
+  O = 'O',
+  P = 'P',
+  Q = 'Q',
+  R = 'R',
+  S = 'S',
+  T = 'T',
+  U = 'U',
+  V = 'V',
+  W = 'W',
+  X = 'X',
+  Y = 'Y',
+  Z = 'Z',
+  Zero = '0',
+  One = '1',
+  Two = '2',
+  Three = '3',
+  Four = '4',
+  Five = '5',
+  Six = '6',
+  Seven = '7',
+  Eight = '8',
+  Nine = '9',
+  F1 = 'F1',
+  F2 = 'F2',
+  F3 = 'F3',
+  F4 = 'F4',
+  F5 = 'F5',
+  F6 = 'F6',
+  F7 = 'F7',
+  F8 = 'F8',
+  F9 = 'F9',
+  F10 = 'F10',
+  F11 = 'F11',
+  F12 = 'F12',
+  Tab = 'Tab',
+  Space = ' ',
+  Enter = 'Enter',
+  Backspace = 'Backspace',
+  Delete = 'Delete',
+  Escape = 'Escape',
+  Home = 'Home',
+  End = 'End',
+  PageUp = 'PageUp',
+  PageDown = 'PageDown',
+  ArrowUp = 'ArrowUp',
+  ArrowDown = 'ArrowDown',
+  ArrowLeft = 'ArrowLeft',
+  ArrowRight = 'ArrowRight',
+  Backtick = '`',
+  Plus = '+',
+  Minus = '-',
+  Equals = '=',
+  LeftBracket = '[',
+  RightBracket = ']',
+  Backslash = '\\',
+  Semicolon = ';',
+  Quote = "'",
+  Comma = ',',
+  Period = '.',
+  Slash = '/',
+  NumpadPlus = 'NumpadAdd',
+  NumpadMinus = 'NumpadSubtract',
+  NumpadMultiply = 'NumpadMultiply',
+  NumpadDivide = 'NumpadDivide',
+  NumpadDecimal = 'NumpadDecimal',
+  NumpadEnter = 'NumpadEnter',
+  ContextMenu = 'ContextMenu',
+  PrintScreen = 'PrintScreen',
+  ScrollLock = 'ScrollLock',
+  Pause = 'Pause',
+  Insert = 'Insert',
+  CapsLock = 'CapsLock',
+  NumLock = 'NumLock',
+}
diff --git a/quadratic-client/src/app/keyboard/schema.ts b/quadratic-client/src/app/keyboard/schema.ts
deleted file mode 100644
index b0ef2d8140..0000000000
--- a/quadratic-client/src/app/keyboard/schema.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-import { z } from 'zod';
-import { ActionEnum } from './actions';
-import { KeysEnum, MacModifiersEnum, WindowsModifiersEnum } from './keys';
-
-function validateShortcut(
-  shortcut: string,
-  platformKeys: typeof KeysEnum,
-  platformModifiers: typeof MacModifiersEnum | typeof WindowsModifiersEnum
-): boolean {
-  const keys = shortcut.split('+').map((part) => part.trim());
-  const lastKey = keys[keys.length - 1];
-
-  if (!platformKeys.safeParse(lastKey).success) {
-    return false;
-  }
-
-  for (let i = 0; i < keys.length - 1; i++) {
-    if (!platformModifiers.safeParse(keys[i]).success) {
-      return false;
-    }
-  }
-
-  const modifiers = new Set(keys.slice(0, -1));
-
-  // Check double modifiers
-  if (modifiers.size !== keys.length - 1) {
-    return false;
-  }
-
-  // Check cross platform modifiers
-  if (modifiers.has('Cmd') && modifiers.has('Win')) {
-    return false;
-  }
-
-  return true;
-}
-
-const ShortcutSchema = z.object({
-  action: ActionEnum,
-  shortcuts: z.object({
-    mac: z.array(
-      z.string().refine((shortcut) => validateShortcut(shortcut, KeysEnum, MacModifiersEnum), {
-        message: 'Invalid Mac shortcut',
-      })
-    ),
-    windows: z.array(
-      z.string().refine((shortcut) => validateShortcut(shortcut, KeysEnum, WindowsModifiersEnum), {
-        message: 'Invalid Windows shortcut',
-      })
-    ),
-  }),
-});
-
-export const ShortcutsSchema = z.array(ShortcutSchema).refine(
-  (shortcuts) => {
-    const allActions = new Set(ActionEnum.options);
-    const defineActions = new Set(shortcuts.map((shortcut) => shortcut.action));
-    return allActions.size === defineActions.size;
-  },
-  { message: 'Shortcuts not defined for all actions' }
-);
-
-export type Shortcuts = z.infer<typeof ShortcutsSchema>;
diff --git a/quadratic-client/src/app/keyboard/shortcut.ts b/quadratic-client/src/app/keyboard/shortcut.ts
new file mode 100644
index 0000000000..181a932e1c
--- /dev/null
+++ b/quadratic-client/src/app/keyboard/shortcut.ts
@@ -0,0 +1,14 @@
+import { Action } from '@/app/actions/actions';
+import { Keys, MacModifiers, WindowsModifiers } from '@/app/keyboard/keys';
+
+type MacShortcut = (MacModifiers | Keys)[];
+type WindowsShortcut = (WindowsModifiers | Keys)[];
+
+export type Shortcut = MacShortcut | WindowsShortcut;
+
+export type ActionShortcut = Partial<{
+  [key in Action]: {
+    mac: MacShortcut[];
+    windows: WindowsShortcut[];
+  };
+}>;
diff --git a/quadratic-client/src/app/theme/colors.ts b/quadratic-client/src/app/theme/colors.ts
index ec35367ddf..8cbbc24a24 100644
--- a/quadratic-client/src/app/theme/colors.ts
+++ b/quadratic-client/src/app/theme/colors.ts
@@ -17,23 +17,25 @@ export const colors = {
   cellColorWarning: 0xffb74d,
   cellColorInfo: 0x4fc3f7,
 
-  cursorCell: 0x6cd4ff,
+  cursorCell: 0x2463eb,
   searchCell: 0x50c878,
 
   // todo: this is new and should be reviewed
-  movingCells: 0x6cd4ff,
+  movingCells: 0x2463eb,
 
   gridBackground: 0xffffff,
 
   independence: 0x5d576b,
   headerBackgroundColor: 0xffffff,
-  headerSelectedBackgroundColor: 0xe7f7ff,
-  headerSelectedRowColumnBackgroundColor: 0xb6e7ff,
+  headerSelectedBackgroundColor: 0x2463eb,
+  headerSelectedBackgroundColorAlpha: 0.1,
+  headerSelectedRowColumnBackgroundColor: 0x2463eb,
+  headerSelectedRowColumnBackgroundColorAlpha: 0.25,
   headerCornerBackgroundColor: 0xffffff,
   boxCellsDeleteColor: Number(`0x${muiColors.red['400'].replace('#', '')}`),
   htmlPlaceholderThumbnailColor: 0xeeeeee,
   htmlPlaceholderThumbnailBorderColor: 0,
-  boxCellsColor: 0x6cd4ff,
+  boxCellsColor: 0x2463eb,
   boxCellsAlpha: 0.333,
   gridHeadingLabel: 0x233143, // same as gridLines, no alpha
   defaultBorderColor: 0,
diff --git a/quadratic-client/src/app/ui/QuadraticSidebar.tsx b/quadratic-client/src/app/ui/QuadraticSidebar.tsx
new file mode 100644
index 0000000000..30b7c91f2c
--- /dev/null
+++ b/quadratic-client/src/app/ui/QuadraticSidebar.tsx
@@ -0,0 +1,181 @@
+import {
+  isAvailableBecauseCanEditFile,
+  isAvailableBecauseFileLocationIsAccessibleAndWriteable,
+  provideFeedbackAction,
+} from '@/app/actions';
+import { Action } from '@/app/actions/actions';
+import { defaultActionSpec } from '@/app/actions/defaultActionsSpec';
+import { editorInteractionStateAtom } from '@/app/atoms/editorInteractionStateAtom';
+import { keyboardShortcutEnumToDisplay } from '@/app/helpers/keyboardShortcutsDisplay';
+import { KeyboardSymbols } from '@/app/helpers/keyboardSymbols';
+import { useGridSettings } from '@/app/ui/hooks/useGridSettings';
+import { useIsAvailableArgs } from '@/app/ui/hooks/useIsAvailableArgs';
+import { KernelMenu } from '@/app/ui/menus/BottomBar/KernelMenu';
+import {
+  CodeCellOutlineOff,
+  CodeCellOutlineOn,
+  DatabaseIcon,
+  DocumentationIcon,
+  FeedbackIcon,
+  ManageSearch,
+  MemoryIcon,
+} from '@/shared/components/Icons';
+import { QuadraticLogo } from '@/shared/components/QuadraticLogo';
+import { ShowAfter } from '@/shared/components/ShowAfter';
+import { DOCUMENTATION_URL } from '@/shared/constants/urls';
+import { Toggle } from '@/shared/shadcn/ui/toggle';
+import { Tooltip, TooltipContent, TooltipPortal, TooltipTrigger } from '@/shared/shadcn/ui/tooltip';
+import { cn } from '@/shared/shadcn/utils';
+import { CircularProgress } from '@mui/material';
+import mixpanel from 'mixpanel-browser';
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { useRecoilState } from 'recoil';
+
+const toggleCodeEditor = defaultActionSpec[Action.ShowCellTypeMenu];
+
+export const QuadraticSidebar = () => {
+  const [editorInteractionState, setEditorInteractionState] = useRecoilState(editorInteractionStateAtom);
+  const gridSettings = useGridSettings();
+  const isAvailableArgs = useIsAvailableArgs();
+
+  const canEditFile = isAvailableBecauseCanEditFile(isAvailableArgs);
+  const canDoTeamsStuff = isAvailableBecauseFileLocationIsAccessibleAndWriteable(isAvailableArgs);
+
+  return (
+    <nav className="hidden h-full w-12 flex-shrink-0 flex-col border-r border-border bg-accent md:flex">
+      <div className="flex h-12 items-center justify-center border-b border-border">
+        <SidebarTooltip label="Back to dashboard">
+          <Link
+            to="/"
+            reloadDocument
+            className="group relative flex h-8 w-8 items-center justify-center rounded text-muted-foreground hover:bg-border"
+          >
+            <QuadraticLogo />
+            {editorInteractionState.isRunningAsyncAction && (
+              <ShowAfter delay={300}>
+                <div className="absolute left-0 top-0 flex h-full w-full items-center justify-center bg-accent group-hover:hidden">
+                  <CircularProgress style={{ width: 18, height: 18 }} />
+                </div>
+              </ShowAfter>
+            )}
+          </Link>
+        </SidebarTooltip>
+      </div>
+
+      <div className="mt-2 flex flex-col items-center gap-1">
+        {canEditFile && (
+          <SidebarTooltip
+            label={toggleCodeEditor.label}
+            shortcut={keyboardShortcutEnumToDisplay(Action.ShowCellTypeMenu)}
+          >
+            <SidebarToggle
+              pressed={editorInteractionState.showCodeEditor}
+              onPressedChange={async () => {
+                toggleCodeEditor.run();
+              }}
+            >
+              {toggleCodeEditor.Icon && <toggleCodeEditor.Icon />}
+            </SidebarToggle>
+          </SidebarTooltip>
+        )}
+
+        <SidebarTooltip label={'Code cell outlines'}>
+          <SidebarToggle
+            pressed={gridSettings.showCellTypeOutlines}
+            onPressedChange={() => gridSettings.setShowCellTypeOutlines(!gridSettings.showCellTypeOutlines)}
+          >
+            {gridSettings.showCellTypeOutlines ? <CodeCellOutlineOn /> : <CodeCellOutlineOff />}
+          </SidebarToggle>
+        </SidebarTooltip>
+
+        {canDoTeamsStuff && (
+          <SidebarTooltip label="Connections">
+            <SidebarToggle
+              pressed={editorInteractionState.showConnectionsMenu}
+              onPressedChange={() => setEditorInteractionState((prev) => ({ ...prev, showConnectionsMenu: true }))}
+            >
+              <DatabaseIcon />
+            </SidebarToggle>
+          </SidebarTooltip>
+        )}
+
+        {canEditFile && <KernelMenu triggerIcon={<MemoryIcon />} />}
+
+        <SidebarTooltip label="Command palette" shortcut={KeyboardSymbols.Command + 'P'}>
+          <SidebarToggle
+            pressed={editorInteractionState.showCommandPalette}
+            onPressedChange={() => setEditorInteractionState((prev) => ({ ...prev, showCommandPalette: true }))}
+          >
+            <ManageSearch />
+          </SidebarToggle>
+        </SidebarTooltip>
+      </div>
+      <div className="mb-2 mt-auto flex flex-col items-center gap-1">
+        {provideFeedbackAction.isAvailable(isAvailableArgs) && (
+          <SidebarTooltip label={provideFeedbackAction.label}>
+            <SidebarToggle
+              pressed={editorInteractionState.showFeedbackMenu}
+              onPressedChange={() => setEditorInteractionState((prev) => ({ ...prev, showFeedbackMenu: true }))}
+            >
+              <FeedbackIcon />
+            </SidebarToggle>
+          </SidebarTooltip>
+        )}
+        <SidebarTooltip label="Documentation">
+          <SidebarToggle asChild>
+            <Link to={DOCUMENTATION_URL} target="_blank" rel="noreferrer" className="flex">
+              <DocumentationIcon />
+            </Link>
+          </SidebarToggle>
+        </SidebarTooltip>
+      </div>
+    </nav>
+  );
+};
+
+export const SidebarToggle = React.forwardRef<HTMLButtonElement, React.ComponentPropsWithoutRef<typeof Toggle>>(
+  ({ children, ...props }, ref) => {
+    return (
+      <Toggle
+        {...props}
+        ref={ref}
+        className={cn(
+          'relative h-8 w-8 rounded text-muted-foreground hover:bg-border hover:text-foreground aria-pressed:bg-border data-[state=open]:bg-border'
+        )}
+      >
+        {children}
+      </Toggle>
+    );
+  }
+);
+SidebarToggle.displayName = 'SidebarToggle';
+
+export function SidebarTooltip({
+  children,
+  label,
+  shortcut,
+}: {
+  children: React.ReactNode;
+  label: string;
+  shortcut?: string;
+}) {
+  return (
+    <Tooltip>
+      <TooltipTrigger
+        asChild
+        onClick={() => {
+          mixpanel.track('[QuadraticSidebar].button', { label });
+        }}
+      >
+        {children}
+      </TooltipTrigger>
+      <TooltipPortal>
+        <TooltipContent side="right" className="flex gap-1">
+          <p>{label}</p>
+          {shortcut && <p className="opacity-50">({shortcut})</p>}
+        </TooltipContent>
+      </TooltipPortal>
+    </Tooltip>
+  );
+}
diff --git a/quadratic-client/src/app/ui/QuadraticUI.tsx b/quadratic-client/src/app/ui/QuadraticUI.tsx
index 9b6df7fb17..32f8aacda5 100644
--- a/quadratic-client/src/app/ui/QuadraticUI.tsx
+++ b/quadratic-client/src/app/ui/QuadraticUI.tsx
@@ -1,11 +1,15 @@
 import { useConnectionsFetcher } from '@/app/ui/hooks/useConnectionsFetcher';
+import { useGridSettings } from '@/app/ui/hooks/useGridSettings';
 import { CodeEditorProvider } from '@/app/ui/menus/CodeEditor/CodeEditorContext';
 import ConnectionsMenu from '@/app/ui/menus/ConnectionsMenu';
+import Toolbar from '@/app/ui/menus/Toolbar';
 import { NewFileDialog } from '@/dashboard/components/NewFileDialog';
+import { DialogRenameItem } from '@/shared/components/DialogRenameItem';
 import { ShareFileDialog } from '@/shared/components/ShareDialog';
 import { UserMessage } from '@/shared/components/UserMessage';
 import { useFileRouteLoaderData } from '@/shared/hooks/useFileRouteLoaderData';
 import { useEffect } from 'react';
+import { isMobile } from 'react-device-detect';
 import { useNavigation, useParams } from 'react-router';
 import { useRecoilState } from 'recoil';
 import { editorInteractionStateAtom } from '../atoms/editorInteractionStateAtom';
@@ -13,6 +17,7 @@ import QuadraticGrid from '../gridGL/QuadraticGrid';
 import { pixiApp } from '../gridGL/pixiApp/PixiApp';
 import { isEmbed } from '../helpers/isEmbed';
 import { TopBar } from '../ui/menus/TopBar/TopBar';
+import { QuadraticSidebar } from './QuadraticSidebar';
 import { UpdateAlertVersion } from './UpdateAlertVersion';
 import { FileDragDropWrapper } from './components/FileDragDropWrapper';
 import { useFileContext } from './components/FileProvider';
@@ -23,9 +28,7 @@ import { BottomBar } from './menus/BottomBar/BottomBar';
 import CellTypeMenu from './menus/CellTypeMenu';
 import CommandPalette from './menus/CommandPalette';
 import FeedbackMenu from './menus/FeedbackMenu';
-import GoTo from './menus/GoTo';
 import SheetBar from './menus/SheetBar';
-import { useGridSettings } from './menus/TopBar/SubMenus/useGridSettings';
 import { useMultiplayerUsers } from './menus/TopBar/useMultiplayerUsers';
 import { ValidationPanel } from './menus/Validations/ValidationPanel';
 
@@ -38,8 +41,9 @@ export default function QuadraticUI() {
   const { presentationMode } = useGridSettings();
   const navigation = useNavigation();
   const { uuid } = useParams() as { uuid: string };
-  const { name } = useFileContext();
+  const { name, renameFile } = useFileContext();
   const { users } = useMultiplayerUsers();
+  const gridSettings = useGridSettings();
   const follow = editorInteractionState.follow
     ? users.find((user) => user.session_id === editorInteractionState.follow)
     : undefined;
@@ -49,52 +53,64 @@ export default function QuadraticUI() {
     pixiApp.resize();
   }, [presentationMode, editorInteractionState.showCodeEditor]);
 
+  // For mobile, set Headers to not visible by default
+  useEffect(() => {
+    if (isMobile) {
+      gridSettings.setShowHeadings(false);
+      pixiApp.viewportChanged();
+    }
+    // eslint-disable-next-line
+  }, []);
+
   return (
     <div
       style={{
         width: '100%',
         height: '100%',
         display: 'flex',
-        flexDirection: 'column',
+        // flexDirection: 'column',
         transition: '.3s ease opacity',
         opacity: 1,
         ...(navigation.state !== 'idle' ? { opacity: '.5', pointerEvents: 'none' } : {}),
       }}
     >
-      {editorInteractionState.showCellTypeMenu && <CellTypeMenu />}
-      {!presentationMode && <TopBar />}
-      {editorInteractionState.showCommandPalette && <CommandPalette />}
-      {editorInteractionState.showGoToMenu && <GoTo />}
+      {!presentationMode && !isEmbed && <QuadraticSidebar />}
+      <div className="flex min-w-0 flex-grow flex-col" id="main">
+        {!presentationMode && <TopBar />}
+        {!presentationMode && !isEmbed && <Toolbar />}
 
-      <div
-        style={{
-          width: '100%',
-          height: '100%',
-          display: 'flex',
-          overflow: 'hidden',
-          position: 'relative',
-        }}
-      >
-        <FileDragDropWrapper>
-          <QuadraticGrid />
-          {!presentationMode && <SheetBar />}
-        </FileDragDropWrapper>
-        {editorInteractionState.showCodeEditor && <CodeEditorProvider />}
-        {editorInteractionState.showValidation && <ValidationPanel />}
-        <Following follow={follow} />
         <div
           style={{
             width: '100%',
             height: '100%',
+            display: 'flex',
             overflow: 'hidden',
-            position: 'absolute',
-            border: follow ? `3px solid ${follow.colorString}` : '',
-            pointerEvents: 'none',
+            position: 'relative',
           }}
-        ></div>
+        >
+          <FileDragDropWrapper>
+            <QuadraticGrid />
+            {!presentationMode && <SheetBar />}
+          </FileDragDropWrapper>
+          {editorInteractionState.showCodeEditor && <CodeEditorProvider />}
+          {editorInteractionState.showValidation && <ValidationPanel />}
+          <Following follow={follow} />
+          <div
+            style={{
+              width: '100%',
+              height: '100%',
+              overflow: 'hidden',
+              position: 'absolute',
+              border: follow ? `3px solid ${follow.colorString}` : '',
+              pointerEvents: 'none',
+            }}
+          ></div>
+        </div>
+
+        {!presentationMode && !isEmbed && <BottomBar />}
       </div>
 
-      {!presentationMode && !isEmbed && <BottomBar />}
+      {/* Global overlay menus */}
       {editorInteractionState.showFeedbackMenu && <FeedbackMenu />}
       {editorInteractionState.showShareFileMenu && (
         <ShareFileDialog
@@ -119,9 +135,17 @@ export default function QuadraticUI() {
         />
       )}
       {presentationMode && <PresentationModeHint />}
-
+      {editorInteractionState.showCellTypeMenu && <CellTypeMenu />}
+      {editorInteractionState.showCommandPalette && <CommandPalette />}
+      {editorInteractionState.showRenameFileMenu && (
+        <DialogRenameItem
+          itemLabel="file"
+          onClose={() => setEditorInteractionState((prev) => ({ ...prev, showRenameFileMenu: false }))}
+          onSave={(newValue) => renameFile(newValue)}
+          value={name}
+        />
+      )}
       <ConnectionsMenu />
-      <PermissionOverlay />
       {!isEmbed && <PermissionOverlay />}
       <UpdateAlertVersion />
       <UserMessage />
diff --git a/quadratic-client/src/app/ui/QuadraticUIContext.tsx b/quadratic-client/src/app/ui/QuadraticUIContext.tsx
index e652eac5ff..3efce17f03 100644
--- a/quadratic-client/src/app/ui/QuadraticUIContext.tsx
+++ b/quadratic-client/src/app/ui/QuadraticUIContext.tsx
@@ -1,10 +1,13 @@
+import { TooltipProvider } from '@/shared/shadcn/ui/tooltip';
 import QuadraticUI from './QuadraticUI';
 import { FileProvider } from './components/FileProvider';
 
 export default function QuadraticUIContext() {
   return (
     <FileProvider>
-      <QuadraticUI />
+      <TooltipProvider>
+        <QuadraticUI />
+      </TooltipProvider>
     </FileProvider>
   );
 }
diff --git a/quadratic-client/src/app/ui/components/BorderMenu.tsx b/quadratic-client/src/app/ui/components/BorderMenu.tsx
new file mode 100644
index 0000000000..70f4d21b1b
--- /dev/null
+++ b/quadratic-client/src/app/ui/components/BorderMenu.tsx
@@ -0,0 +1,101 @@
+import { Action } from '@/app/actions/actions';
+import { defaultActionSpec } from '@/app/actions/defaultActionsSpec';
+import { borderMenuAtom } from '@/app/atoms/borderMenuAtom';
+import { QColorPicker } from '@/app/ui/components/qColorPicker';
+import { useBorders } from '@/app/ui/hooks/useBorders';
+import { CheckSmallIcon } from '@/shared/components/Icons';
+import { Button } from '@/shared/shadcn/ui/button';
+import { cn } from '@/shared/shadcn/utils';
+import * as ToggleGroup from '@radix-ui/react-toggle-group';
+import { useRecoilValue } from 'recoil';
+import './borderMenuStyles.scss';
+
+const borderActionKeys = [
+  Action.FormatBorderAll,
+  Action.FormatBorderOuter,
+  Action.FormatBorderInner,
+  Action.FormatBorderVertical,
+  Action.FormatBorderHorizontal,
+  Action.FormatBorderLeft,
+  Action.FormatBorderRight,
+  Action.FormatBorderTop,
+  Action.FormatBorderBottom,
+  Action.FormatBorderClear,
+] as const;
+
+const borderStyles = [
+  { actionKey: Action.FormatBorderLine1, className: 'lineStyleBorder normalBorder' },
+  { actionKey: Action.FormatBorderLine2, className: 'lineStyleBorder doubleBorder' },
+  { actionKey: Action.FormatBorderLine3, className: 'lineStyleBorder tripleBorder' },
+  { actionKey: Action.FormatBorderDashed, className: 'lineStyleBorder dashedBorder' },
+  { actionKey: Action.FormatBorderDotted, className: 'lineStyleBorder dottedBorder' },
+  { actionKey: Action.FormatBorderDouble, className: 'lineStyleBorder twoLineBorder' },
+] as const;
+
+export const BorderMenu = () => {
+  const borders = useBorders();
+  const borderColorSpec = defaultActionSpec[Action.FormatBorderColor];
+  const borderMenuState = useRecoilValue(borderMenuAtom);
+
+  return (
+    <div>
+      <ToggleGroup.Root type="single" className="flex flex-row border-b border-border pb-1">
+        {borderActionKeys.map((actionKey, i) => {
+          const Icon = 'Icon' in defaultActionSpec[actionKey] ? defaultActionSpec[actionKey].Icon : undefined;
+          const run = defaultActionSpec[actionKey].run;
+          return (
+            <ToggleGroup.Item autoFocus={i === 0} asChild value={actionKey} key={actionKey}>
+              <Button
+                size="icon"
+                variant="ghost"
+                className="focus-visible:bg-accent"
+                key={actionKey}
+                onClick={() => {
+                  run(borders);
+                }}
+              >
+                {Icon && <Icon />}
+              </Button>
+            </ToggleGroup.Item>
+          );
+        })}
+      </ToggleGroup.Root>
+
+      <div className="flex flex-row">
+        <ToggleGroup.Root type="single" className="flex w-1/2 flex-col pr-2 pt-2">
+          {borderStyles.map(({ actionKey, className }) => {
+            const run = defaultActionSpec[actionKey].run;
+            const currentLineStyle = borderMenuState.line as string;
+            const isActive = actionKey.includes(currentLineStyle);
+
+            return (
+              <ToggleGroup.Item
+                key={actionKey}
+                value={actionKey}
+                className={'inset-1 flex h-6 flex-row items-center gap-4 rounded px-2 hover:bg-accent focus:bg-accent'}
+                onClick={() => {
+                  run(borders);
+                }}
+              >
+                <CheckSmallIcon className={cn(!isActive && 'invisible opacity-0')} />
+                <span className={className}></span>
+              </ToggleGroup.Item>
+            );
+          })}
+        </ToggleGroup.Root>
+
+        <div className="color-picker-dropdown-menu w-1/2 border-l border-border pl-2 pt-2">
+          <QColorPicker
+            color={borderMenuState.color}
+            onChangeComplete={(color) => {
+              borderColorSpec.run({ borders, color });
+            }}
+            onClear={() => {
+              borders.clearBorders();
+            }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/quadratic-client/src/app/ui/components/DateFormat.tsx b/quadratic-client/src/app/ui/components/DateFormat.tsx
index c8d80e5d92..a5a5ed64ae 100644
--- a/quadratic-client/src/app/ui/components/DateFormat.tsx
+++ b/quadratic-client/src/app/ui/components/DateFormat.tsx
@@ -1,14 +1,14 @@
 import { sheets } from '@/app/grid/controller/Sheets';
+import { applyFormatToDateTime } from '@/app/quadratic-rust-client/quadratic_rust_client';
+import { ValidationInput } from '@/app/ui/menus/Validations/Validation/ValidationUI/ValidationInput';
 import { quadraticCore } from '@/app/web-workers/quadraticCore/quadraticCore';
 import { DOCUMENTATION_DATE_TIME_FORMATTING } from '@/shared/constants/urls';
+import { Button } from '@/shared/shadcn/ui/button';
 import { Label } from '@/shared/shadcn/ui/label';
 import { RadioGroup, RadioGroupItem } from '@/shared/shadcn/ui/radio-group';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/shared/shadcn/ui/tabs';
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { ValidationInput } from '../menus/Validations/Validation/ValidationUI/ValidationInput';
-import { Button } from '@/shared/shadcn/ui/button';
-import { applyFormatToDateTime } from '@/app/quadratic-rust-client/quadratic_rust_client';
 import { cn } from '@/shared/shadcn/utils';
+import { useCallback, useEffect, useRef, useState } from 'react';
 
 // first format is default rendering
 const DATE_FORMATS = [
@@ -46,23 +46,72 @@ const RadioEntry = (props: RadioEntryProps) => {
 const defaultDate = `03/04/${new Date().getFullYear()} 3:14 PM`;
 
 interface DateFormatProps {
-  status: boolean;
   closeMenu: () => void;
   className?: string;
 }
 
 export const DateFormat = (props: DateFormatProps) => {
-  const { status, closeMenu, className } = props;
+  const { closeMenu, className } = props;
   const ref = useRef<HTMLInputElement>(null);
 
   const [time, setTime] = useState<string | undefined>(TIME_FORMATS[0].value);
   const [date, setDate] = useState<string | undefined>(DATE_FORMATS[0].value);
   const [custom, setCustom] = useState<string | undefined>();
-
   const [tab, setTab] = useState<'presets' | 'custom'>('presets');
 
   const [original, setOriginal] = useState<string | undefined>(defaultDate);
   const [current, setCurrent] = useState<string | undefined>();
+  const findCurrent = useCallback(async () => {
+    const cursorPosition = sheets.sheet.cursor.cursorPosition;
+    const date = await quadraticCore.getEditCell(sheets.sheet.id, cursorPosition.x, cursorPosition.y);
+    if (date) {
+      setOriginal(date);
+    } else {
+      setOriginal(defaultDate);
+    }
+    const summary = await quadraticCore.getCellFormatSummary(sheets.sheet.id, cursorPosition.x, cursorPosition.y, true);
+    let updatedDate = DATE_FORMATS[0].value;
+    let updatedTime = TIME_FORMATS[0].value;
+
+    if (summary?.dateTime) {
+      for (const format of DATE_FORMATS) {
+        if (summary.dateTime.includes(format.value)) {
+          updatedDate = format.value;
+          break;
+        }
+      }
+      for (const format of TIME_FORMATS) {
+        if (summary.dateTime.includes(format.value)) {
+          updatedTime = format.value;
+          break;
+        }
+      }
+      if (summary.dateTime.replace(updatedDate, '').replace(updatedTime, '').trim() === '') {
+        setTime(updatedTime);
+        setDate(updatedDate);
+        setCustom(`${updatedDate} ${updatedTime}`);
+        setCurrent(`${updatedDate} ${updatedTime}`);
+        setTab('presets');
+      } else {
+        setCustom(summary.dateTime);
+        setDate(undefined);
+        setTime(undefined);
+        setCurrent(summary.dateTime);
+        setTab('custom');
+      }
+    } else {
+      setDate(updatedDate);
+      setTime(updatedTime);
+      setCustom(`${updatedDate} ${updatedTime}`);
+      setCurrent(`${updatedDate} ${updatedTime}`);
+      setTab('presets');
+    }
+  }, []);
+
+  useEffect(() => {
+    findCurrent();
+  }, [findCurrent]);
+
   const [formattedDate, setFormattedDate] = useState<string | undefined>();
   useEffect(() => {
     if (original && current) {
@@ -76,79 +125,27 @@ export const DateFormat = (props: DateFormatProps) => {
     closeMenu();
   }, [closeMenu, custom, date, time]);
 
-  useEffect(() => {
-    const findCurrent = async () => {
-      const cursorPosition = sheets.sheet.cursor.cursorPosition;
-      const date = await quadraticCore.getEditCell(sheets.sheet.id, cursorPosition.x, cursorPosition.y);
-      if (date) {
-        setOriginal(date);
-      } else {
-        setOriginal(defaultDate);
-      }
-      const summary = await quadraticCore.getCellFormatSummary(
-        sheets.sheet.id,
-        cursorPosition.x,
-        cursorPosition.y,
-        true
-      );
-      let updatedDate = DATE_FORMATS[0].value;
-      let updatedTime = TIME_FORMATS[0].value;
-
-      if (summary?.dateTime) {
-        for (const format of DATE_FORMATS) {
-          if (summary.dateTime.includes(format.value)) {
-            updatedDate = format.value;
-            break;
-          }
-        }
-        for (const format of TIME_FORMATS) {
-          if (summary.dateTime.includes(format.value)) {
-            updatedTime = format.value;
-            break;
-          }
-        }
-        if (summary.dateTime.replace(updatedDate, '').replace(updatedTime, '').trim() === '') {
-          setTime(updatedTime);
-          setDate(updatedDate);
-          setCustom(`${updatedDate} ${updatedTime}`);
-          setCurrent(`${updatedDate} ${updatedTime}`);
-          setTab('presets');
-        } else {
-          setCustom(summary.dateTime);
-          setDate(undefined);
-          setTime(undefined);
-          setCurrent(summary.dateTime);
-          setTab('custom');
-        }
-      } else {
-        setDate(updatedDate);
-        setTime(updatedTime);
-        setCustom(`${updatedDate} ${updatedTime}`);
-        setCurrent(`${updatedDate} ${updatedTime}`);
-        setTab('presets');
-      }
-    };
-
-    if (status) {
-      findCurrent();
-    }
-  }, [status]);
-
-  const changeDate = (value: string) => {
-    setDate(value);
-    const currentTime = time ?? TIME_FORMATS[0].value;
-    setCurrent(`${value} ${currentTime}`);
-    setCustom(`${value} ${currentTime}`);
-  };
+  const changeDate = useCallback(
+    (value: string) => {
+      setDate(value);
+      const currentTime = time ?? TIME_FORMATS[0].value;
+      setCurrent(`${value} ${currentTime}`);
+      setCustom(`${value} ${currentTime}`);
+    },
+    [time]
+  );
 
-  const changeTime = (value: string) => {
-    setTime(value);
-    const currentDate = date ?? DATE_FORMATS[0].value;
-    setCurrent(`${currentDate} ${value}`);
-    setCustom(`${currentDate} ${value}`);
-  };
+  const changeTime = useCallback(
+    (value: string) => {
+      setTime(value);
+      const currentDate = date ?? DATE_FORMATS[0].value;
+      setCurrent(`${currentDate} ${value}`);
+      setCustom(`${currentDate} ${value}`);
+    },
+    [date]
+  );
 
-  const changeCustom = async (value: string) => {
+  const changeCustom = useCallback(async (value: string) => {
     if (value) {
       // need to check if the value is a default format
       let possibleDate: string | undefined;
@@ -180,19 +177,19 @@ export const DateFormat = (props: DateFormatProps) => {
 
       setCurrent(value);
     }
-  };
+  }, []);
 
-  const customFocus = () => {
+  const customFocus = useCallback(() => {
     ref.current?.focus();
-  };
+  }, []);
+
+  if (!current) return null;
 
   return (
-    <div className={cn('h-58 w-100', className)}>
-      {formattedDate && (
-        <div className="mt-3 flex items-center justify-center bg-accent p-2 text-sm">{formattedDate}</div>
-      )}
+    <div className={cn('h-58 w-full', className)}>
+      {formattedDate && <div className="flex items-center justify-center bg-accent p-2 text-sm">{formattedDate}</div>}
       <Tabs className="text-sm" value={tab}>
-        <TabsList className="mt-2 w-full border-b border-border">
+        <TabsList className="mt-1 w-full border-b border-border">
           <TabsTrigger value="presets" className="w-1/2" onClick={() => setTab('presets')}>
             Presets
           </TabsTrigger>
@@ -249,7 +246,7 @@ export const DateFormat = (props: DateFormatProps) => {
           </div>
         </TabsContent>
       </Tabs>
-      <div className="flex justify-end gap-2 pt-5">
+      <div className="flex justify-end gap-2 pt-4">
         <Button variant="secondary" onClick={closeMenu}>
           Cancel
         </Button>
diff --git a/quadratic-client/src/app/ui/components/PresentationModeHint.tsx b/quadratic-client/src/app/ui/components/PresentationModeHint.tsx
index b21e8e5a3c..3efbf91c38 100644
--- a/quadratic-client/src/app/ui/components/PresentationModeHint.tsx
+++ b/quadratic-client/src/app/ui/components/PresentationModeHint.tsx
@@ -1,5 +1,5 @@
-import { useState, useEffect } from 'react';
-import { useGridSettings } from '../menus/TopBar/SubMenus/useGridSettings';
+import { useEffect, useState } from 'react';
+import { useGridSettings } from '../hooks/useGridSettings';
 import { QuadraticSnackBar } from './QuadraticSnackBar';
 
 export default function PresentationModeHint() {
diff --git a/quadratic-client/src/app/ui/components/Search.tsx b/quadratic-client/src/app/ui/components/Search.tsx
index c20721f3e7..3e2eb22e5e 100644
--- a/quadratic-client/src/app/ui/components/Search.tsx
+++ b/quadratic-client/src/app/ui/components/Search.tsx
@@ -1,4 +1,5 @@
-import { findInSheet, findInSheets } from '@/app/actions';
+import { Action } from '@/app/actions/actions';
+import { defaultActionSpec } from '@/app/actions/defaultActionsSpec';
 import { editorInteractionStateAtom } from '@/app/atoms/editorInteractionStateAtom';
 import { events } from '@/app/events/events';
 import { sheets } from '@/app/grid/controller/Sheets';
@@ -17,6 +18,9 @@ import { ChevronLeftIcon, ChevronRightIcon, Cross2Icon, DotsHorizontalIcon } fro
 import { useEffect, useRef, useState } from 'react';
 import { useRecoilState } from 'recoil';
 
+const findInSheetActionSpec = defaultActionSpec[Action.FindInCurrentSheet];
+const findInSheetsActionSpec = defaultActionSpec[Action.FindInAllSheets];
+
 export function Search() {
   const [editorInteractionState, setEditorInteractionState] = useRecoilState(editorInteractionStateAtom);
 
@@ -30,7 +34,7 @@ export function Search() {
   const [current, setCurrent] = useState(0);
   const inputRef = useRef<HTMLInputElement>(null);
 
-  const placeholder = !searchOptions.sheet_id ? findInSheets.label : findInSheet.label;
+  const placeholder = !searchOptions.sheet_id ? findInSheetsActionSpec.label : findInSheetActionSpec.label;
 
   const onChange = async (search: string, updatedSearchOptions = searchOptions) => {
     if (search.length > 0) {
diff --git a/quadratic-client/src/app/ui/components/borderMenuStyles.scss b/quadratic-client/src/app/ui/components/borderMenuStyles.scss
new file mode 100644
index 0000000000..87e1522a27
--- /dev/null
+++ b/quadratic-client/src/app/ui/components/borderMenuStyles.scss
@@ -0,0 +1,32 @@
+.lineStyleBorder {
+  display: block;
+  width: 100%;
+}
+
+.normalBorder {
+  border-top: 1px solid black;
+}
+
+.doubleBorder {
+  border-top: 2px solid black;
+}
+
+.tripleBorder {
+  border-top: 3px solid black;
+}
+
+.dashedBorder {
+  border-top: 1px dashed black;
+}
+
+.dottedBorder {
+  border-top: 1px dotted black;
+}
+
+.twoLineBorder {
+  position: relative;
+  top: 2px;
+  border-top: 2px double black;
+  position: relative;
+  margin-bottom: 5px;
+}
diff --git a/quadratic-client/src/app/ui/menus/TopBar/SubMenus/FormatMenu/formatMenuStyles.scss b/quadratic-client/src/app/ui/components/qColorPicker.scss
similarity index 65%
rename from quadratic-client/src/app/ui/menus/TopBar/SubMenus/FormatMenu/formatMenuStyles.scss
rename to quadratic-client/src/app/ui/components/qColorPicker.scss
index 369a176b2f..09b2775704 100644
--- a/quadratic-client/src/app/ui/menus/TopBar/SubMenus/FormatMenu/formatMenuStyles.scss
+++ b/quadratic-client/src/app/ui/components/qColorPicker.scss
@@ -1,9 +1,32 @@
-.color-picker-submenu .szh-menu {
-  padding: 4px !important;
-}
+.compact-picker {
+  width: 160px !important;
 
-.color-picker-submenu .szh-menu > div > div {
-  box-shadow: none !important;
+  /* hides custom RBG input on color picker */
+  .flexbox-fix {
+    display: none !important;
+  }
+
+  div span > div {
+    position: relative;
+    border-radius: 2px;
+    overflow: hidden;
+
+    &:before {
+      content: '';
+      box-shadow: inset 0 0 0 1px rgba(0 0 0 / 10%);
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 0;
+      bottom: 0;
+    }
+  }
+
+  div span > div > div {
+    background: #fff !important;
+    border-radius: 1px !important;
+    inset: 4px !important;
+  }
 }
 
 .color-picker-clear {
@@ -42,67 +65,11 @@
   }
 }
 
-.lineStyleBorder {
-  width: 110px;
-  margin-top: 3px;
-  padding-bottom: 3px;
-}
-
-.normalBorder {
-  border-top: 1px solid black;
-}
-
-.doubleBorder {
-  border-top: 2px solid black;
-}
-
-.tripleBorder {
-  border-top: 3px solid black;
-}
-
-.dashedBorder {
-  border-top: 1px dashed black;
-}
-
-.dottedBorder {
-  border-top: 1px dotted black;
-}
-
-.twoLineBorder {
-  border-top: 1px solid black;
-  position: relative;
-  margin-bottom: 5px;
-}
-
-.twoLineBorder:after {
-  content: '';
-  position: absolute;
-  width: 100%;
-  border-bottom: 1px solid black;
-  bottom: 3px;
+.color-picker-submenu .szh-menu {
+  padding: 4px !important;
 }
 
-.compact-picker {
-  width: 160px !important;
-
-  /* hides custom RBG input on color picker */
-  .flexbox-fix {
-    display: none !important;
-  }
-
-  div span div {
-    position: relative;
-    border-radius: 2px;
-    overflow: hidden;
-
-    &:before {
-      content: '';
-      box-shadow: inset 0 0 0 1px rgba(0 0 0 / 10%);
-      position: absolute;
-      left: 0;
-      right: 0;
-      top: 0;
-      bottom: 0;
-    }
-  }
+.color-picker-submenu .szh-menu > div > div,
+.color-picker-dropdown-menu > div > div {
+  box-shadow: none !important;
 }
diff --git a/quadratic-client/src/app/ui/components/qColorPicker.tsx b/quadratic-client/src/app/ui/components/qColorPicker.tsx
index 5882de92aa..c1f2b7042a 100644
--- a/quadratic-client/src/app/ui/components/qColorPicker.tsx
+++ b/quadratic-client/src/app/ui/components/qColorPicker.tsx
@@ -1,14 +1,18 @@
 import { ColorChangeHandler, CompactPicker } from 'react-color';
+import './qColorPicker.scss';
 
 interface IProps {
   onChangeComplete: ColorChangeHandler | undefined;
   onClear?: () => void;
+  color?: string;
 }
 
 export const QColorPicker = (props: IProps) => {
   return (
     <>
       <CompactPicker
+        color={props.color}
+        className="color-picker-submenu"
         onChangeComplete={props.onChangeComplete}
         colors={[
           '#F9D2CE' /* first row of colors */,
diff --git a/quadratic-client/src/app/ui/menus/TopBar/SubMenus/formatCells.ts b/quadratic-client/src/app/ui/helpers/formatCells.ts
similarity index 96%
rename from quadratic-client/src/app/ui/menus/TopBar/SubMenus/formatCells.ts
rename to quadratic-client/src/app/ui/helpers/formatCells.ts
index 50acb33d0e..2a6ae5db70 100644
--- a/quadratic-client/src/app/ui/menus/TopBar/SubMenus/formatCells.ts
+++ b/quadratic-client/src/app/ui/helpers/formatCells.ts
@@ -1,8 +1,8 @@
 import { CellAlign, CellVerticalAlign, CellWrap, Format, Selection } from '@/app/quadratic-core-types';
 import { quadraticCore } from '@/app/web-workers/quadraticCore/quadraticCore';
 import { ColorResult } from 'react-color';
-import { sheets } from '../../../../grid/controller/Sheets';
-import { convertReactColorToString } from '../../../../helpers/convertColor';
+import { sheets } from '../../grid/controller/Sheets';
+import { convertReactColorToString } from '../../helpers/convertColor';
 
 export const setFillColor = (color?: ColorResult) => {
   quadraticCore.setCellFillColor(
diff --git a/quadratic-client/src/app/ui/menus/TopBar/SubMenus/useBorders.ts b/quadratic-client/src/app/ui/hooks/useBorders.tsx
similarity index 52%
rename from quadratic-client/src/app/ui/menus/TopBar/SubMenus/useBorders.ts
rename to quadratic-client/src/app/ui/hooks/useBorders.tsx
index d0379b7a5d..7a12b53ee8 100644
--- a/quadratic-client/src/app/ui/menus/TopBar/SubMenus/useBorders.ts
+++ b/quadratic-client/src/app/ui/hooks/useBorders.tsx
@@ -5,7 +5,7 @@ import { convertColorStringToTint, convertTintToArray } from '@/app/helpers/conv
 import { BorderSelection, BorderStyle, CellBorderLine } from '@/app/quadratic-core-types';
 import { quadraticCore } from '@/app/web-workers/quadraticCore/quadraticCore';
 import { Rectangle } from 'pixi.js';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useSetRecoilState } from 'recoil';
 
 export interface ChangeBorder {
@@ -23,44 +23,47 @@ export interface UseBordersResults {
 export const useBorders = (): UseBordersResults => {
   const setBorderMenuState = useSetRecoilState(borderMenuAtom);
 
-  const changeBorders = (options: ChangeBorder): void => {
-    setBorderMenuState((prev) => {
-      const selection = options.selection ?? prev.selection;
-      const color = options.color ?? prev.color;
-      const line = options.line ?? prev.line;
-      const cursor = sheets.sheet.cursor;
-      if (cursor.multiCursor && cursor.multiCursor.length > 1) {
-        console.log('TODO: implement multiCursor border support');
-      } else {
-        const rectangle = cursor.multiCursor
-          ? cursor.multiCursor[0]
-          : new Rectangle(cursor.cursorPosition.x, cursor.cursorPosition.y, 1, 1);
-        const sheet = sheets.sheet;
-        const colorTint = convertColorStringToTint(color);
-        const colorArray = convertTintToArray(colorTint);
-        const style: BorderStyle = {
-          color: {
-            red: Math.floor(colorArray[0] * 255),
-            green: Math.floor(colorArray[1] * 255),
-            blue: Math.floor(colorArray[2] * 255),
-            alpha: 1,
-          },
-          line,
-        };
-        if (options.selection) {
-          quadraticCore.setRegionBorders(sheet.id, rectangle, options.selection, style);
-        } else if (
-          prev.selection &&
-          ((!!options.color && options.color !== prev.color) || (!!options.line && options.line !== prev.line))
-        ) {
-          quadraticCore.setRegionBorders(sheet.id, rectangle, prev.selection, style);
+  const changeBorders = useCallback(
+    (options: ChangeBorder): void => {
+      setBorderMenuState((prev) => {
+        const selection = options.selection ?? prev.selection;
+        const color = options.color ?? prev.color;
+        const line = options.line ?? prev.line;
+        const cursor = sheets.sheet.cursor;
+        if (cursor.multiCursor && cursor.multiCursor.length > 1) {
+          console.log('TODO: implement multiCursor border support');
+        } else {
+          const rectangle = cursor.multiCursor
+            ? cursor.multiCursor[0]
+            : new Rectangle(cursor.cursorPosition.x, cursor.cursorPosition.y, 1, 1);
+          const sheet = sheets.sheet;
+          const colorTint = convertColorStringToTint(color);
+          const colorArray = convertTintToArray(colorTint);
+          const style: BorderStyle = {
+            color: {
+              red: Math.floor(colorArray[0] * 255),
+              green: Math.floor(colorArray[1] * 255),
+              blue: Math.floor(colorArray[2] * 255),
+              alpha: 1,
+            },
+            line,
+          };
+          if (options.selection) {
+            quadraticCore.setRegionBorders(sheet.id, rectangle, options.selection, style);
+          } else if (
+            prev.selection &&
+            ((!!options.color && options.color !== prev.color) || (!!options.line && options.line !== prev.line))
+          ) {
+            quadraticCore.setRegionBorders(sheet.id, rectangle, prev.selection, style);
+          }
         }
-      }
-      return { selection, color, line };
-    });
-  };
+        return { selection, color, line };
+      });
+    },
+    [setBorderMenuState]
+  );
 
-  const clearBorders = (): void => {
+  const clearBorders = useCallback((): void => {
     const cursor = sheets.sheet.cursor;
     if (cursor.multiCursor && cursor.multiCursor.length > 1) {
       console.log('TODO: implement multiCursor border support');
@@ -70,7 +73,7 @@ export const useBorders = (): UseBordersResults => {
       ? cursor.multiCursor[0]
       : new Rectangle(cursor.cursorPosition.x, cursor.cursorPosition.y, 1, 1);
     quadraticCore.setRegionBorders(sheets.sheet.id, rectangle, 'clear');
-  };
+  }, []);
 
   const [disabled, setDisabled] = useState(false);
   useEffect(() => {
diff --git a/quadratic-client/src/app/ui/menus/TopBar/SubMenus/useGridSettings.ts b/quadratic-client/src/app/ui/hooks/useGridSettings.ts
similarity index 98%
rename from quadratic-client/src/app/ui/menus/TopBar/SubMenus/useGridSettings.ts
rename to quadratic-client/src/app/ui/hooks/useGridSettings.ts
index a1b3eac202..f2ce1f3eb9 100644
--- a/quadratic-client/src/app/ui/menus/TopBar/SubMenus/useGridSettings.ts
+++ b/quadratic-client/src/app/ui/hooks/useGridSettings.ts
@@ -1,7 +1,7 @@
 import { events } from '@/app/events/events';
 import mixpanel from 'mixpanel-browser';
 import { AtomEffect, atom, useRecoilState } from 'recoil';
-import { debugGridSettings } from '../../../../debugFlags';
+import { debugGridSettings } from '../../debugFlags';
 
 const SETTINGS_KEY = 'viewSettings';
 export interface GridSettings {
@@ -52,7 +52,7 @@ const emitGridSettingsChange: AtomEffect<GridSettings> = ({ onSet }) => {
   });
 };
 
-const gridSettingsAtom = atom({
+export const gridSettingsAtom = atom({
   key: 'gridSettings',
   default: defaultGridSettings,
   effects: [localStorageEffect, emitGridSettingsChange],
diff --git a/quadratic-client/src/app/ui/hooks/useIsAvailableArgs.ts b/quadratic-client/src/app/ui/hooks/useIsAvailableArgs.ts
new file mode 100644
index 0000000000..94528472e7
--- /dev/null
+++ b/quadratic-client/src/app/ui/hooks/useIsAvailableArgs.ts
@@ -0,0 +1,18 @@
+import { useRootRouteLoaderData } from '@/routes/_root';
+import { useFileRouteLoaderData } from '@/shared/hooks/useFileRouteLoaderData';
+
+export const useIsAvailableArgs = () => {
+  const { isAuthenticated } = useRootRouteLoaderData();
+  const {
+    userMakingRequest: { fileTeamPrivacy, teamPermissions, filePermissions },
+  } = useFileRouteLoaderData();
+
+  const isAvailableArgs = {
+    isAuthenticated,
+    filePermissions,
+    fileTeamPrivacy,
+    teamPermissions,
+  };
+
+  return isAvailableArgs;
+};
diff --git a/quadratic-client/src/app/ui/icons/index.tsx b/quadratic-client/src/app/ui/icons/index.tsx
index 9c38b45b85..730eadccd1 100644
--- a/quadratic-client/src/app/ui/icons/index.tsx
+++ b/quadratic-client/src/app/ui/icons/index.tsx
@@ -1,101 +1,5 @@
 import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
 
-import {
-  BorderAll as BorderAllIcon,
-  BorderBottom as BorderBottomIcon,
-  BorderColor as BorderColorIcon,
-  BorderHorizontal as BorderHorizontalIcon,
-  BorderInner as BorderInnerIcon,
-  BorderLeft as BorderLeftIcon,
-  BorderClear as BorderNoneIcon,
-  BorderOuter as BorderOuterIcon,
-  BorderRight as BorderRightIcon,
-  BorderStyle as BorderStyleIcon,
-  BorderTop as BorderTopIcon,
-  BorderVertical as BorderVerticalIcon,
-  ContentPasteOutlined as ClipboardIcon,
-  ManageSearchOutlined as CommandPaletteIcon,
-  ContentCopyOutlined as CopyIcon,
-  DataObject as DataIcon,
-  AttachMoney as DollarIcon,
-  MoreHorizRounded as DotsHorizontalIcon,
-  ExpandMore as ExpandMoreIcon,
-  OpenInNew as ExternalLinkIcon,
-  ChatBubbleOutline as FeedbackIcon,
-  InsertDriveFileOutlined as FileIcon,
-  FormatBold as FontBoldIcon,
-  FormatItalic as FontItalicIcon,
-  Functions as FunctionIcon,
-  AutoFixHigh as MagicWandIcon,
-  Search as MagnifyingGlassIcon,
-  FormatColorFill as PaintBucketIcon,
-  PaletteOutlined,
-  Percent as PercentIcon,
-  FormatQuote as QuoteIcon,
-  RedoOutlined as RedoIcon,
-  ContentCutOutlined as ScissorsIcon,
-  FormatAlignCenter as TextAlignCenterIcon,
-  FormatAlignLeft as TextAlignLeftIcon,
-  FormatAlignRight as TextAlignRightIcon,
-  FormatColorText as TextColorIcon,
-  FormatClear as TextNoneIcon,
-  VerticalAlignBottom as TextVerticalAlignBottomIcon,
-  VerticalAlignCenter as TextVerticalAlignMiddleIcon,
-  VerticalAlignTop as TextVerticalAlignTopIcon,
-  UndoOutlined as UndoIcon,
-  WrapText as WrapTextIcon,
-  ZoomInOutlined as ZoomInIcon,
-  ZoomOutOutlined as ZoomOutIcon,
-} from '@mui/icons-material';
-
-export {
-  BorderAllIcon,
-  BorderBottomIcon,
-  BorderColorIcon,
-  BorderHorizontalIcon,
-  BorderInnerIcon,
-  BorderLeftIcon,
-  BorderNoneIcon,
-  BorderOuterIcon,
-  BorderRightIcon,
-  BorderStyleIcon,
-  BorderTopIcon,
-  BorderVerticalIcon,
-  ClipboardIcon,
-  CommandPaletteIcon,
-  CopyIcon,
-  DataIcon,
-  DollarIcon,
-  DotsHorizontalIcon,
-  ExpandMoreIcon,
-  ExternalLinkIcon,
-  FeedbackIcon,
-  FileIcon,
-  FontBoldIcon,
-  FontItalicIcon,
-  FunctionIcon,
-  MagicWandIcon,
-  MagnifyingGlassIcon,
-  PaintBucketIcon,
-  PaletteOutlined,
-  PercentIcon,
-  QuoteIcon,
-  RedoIcon,
-  ScissorsIcon,
-  TextAlignCenterIcon,
-  TextAlignLeftIcon,
-  TextAlignRightIcon,
-  TextColorIcon,
-  TextNoneIcon,
-  TextVerticalAlignBottomIcon,
-  TextVerticalAlignMiddleIcon,
-  TextVerticalAlignTopIcon,
-  UndoIcon,
-  WrapTextIcon,
-  ZoomInIcon,
-  ZoomOutIcon,
-};
-
 // Built on doc guidance from material UI:
 // https://mui.com/material-ui/icons/
 //
@@ -106,67 +10,6 @@ export {
 // Probably could make this better in the future by using something like:
 // https://github.com/gregberge/svgr
 
-export const BorderDashed = (props: SvgIconProps) => (
-  <SvgIcon {...props}>
-    <path d="M4 13V11H8V13H4Z" />
-    <path d="M10 13V11H14V13H10Z" />
-    <path d="M16 13V11H20V13H16Z" />
-  </SvgIcon>
-);
-
-export const BorderDotted = (props: SvgIconProps) => (
-  <SvgIcon {...props}>
-    <path d="M3 13V11H5V13H3Z" />
-    <path d="M7 13V11H9V13H7Z" />
-    <path d="M11 13V11H13V13H11Z" />
-    <path d="M15 13V11H17V13H15Z" />
-    <path d="M19 13V11H21V13H19Z" />
-  </SvgIcon>
-);
-
-export const BorderDouble = (props: SvgIconProps) => (
-  <SvgIcon {...props}>
-    <path d="M3 11V10H21V11H3Z" />
-    <path d="M3 13V12H21V13H3Z" />
-  </SvgIcon>
-);
-
-export const BorderThin = (props: SvgIconProps) => (
-  <SvgIcon {...props}>
-    <path d="M3 13V11H21V13H3Z" />
-  </SvgIcon>
-);
-
-export const BorderMedium = (props: SvgIconProps) => (
-  <SvgIcon {...props}>
-    <path d="M3 14V10H21V14H3Z" />
-  </SvgIcon>
-);
-
-export const BorderThick = (props: SvgIconProps) => (
-  <SvgIcon {...props}>
-    <path d="M3 15V9H21V15H3Z" />
-  </SvgIcon>
-);
-
-export const DecimalIncreaseIcon = (props: SvgIconProps) => (
-  <SvgIcon {...props}>
-    <path d="m18 22-1.4-1.4 1.575-1.6H12v-2h6.175L16.6 15.4 18 14l4 4ZM2 13v-3h3v3Zm7.5 0q-1.45 0-2.475-1.025Q6 10.95 6 9.5v-4q0-1.45 1.025-2.475Q8.05 2 9.5 2q1.45 0 2.475 1.025Q13 4.05 13 5.5v4q0 1.45-1.025 2.475Q10.95 13 9.5 13Zm9 0q-1.45 0-2.475-1.025Q15 10.95 15 9.5v-4q0-1.45 1.025-2.475Q17.05 2 18.5 2q1.45 0 2.475 1.025Q22 4.05 22 5.5v4q0 1.45-1.025 2.475Q19.95 13 18.5 13Zm-9-2q.625 0 1.062-.438Q11 10.125 11 9.5v-4q0-.625-.438-1.062Q10.125 4 9.5 4t-1.062.438Q8 4.875 8 5.5v4q0 .625.438 1.062Q8.875 11 9.5 11Zm9 0q.625 0 1.062-.438Q20 10.125 20 9.5v-4q0-.625-.438-1.062Q19.125 4 18.5 4t-1.062.438Q17 4.875 17 5.5v4q0 .625.438 1.062.437.438 1.062.438Z" />
-  </SvgIcon>
-);
-
-export const DecimalDecreaseIcon = (props: SvgIconProps) => (
-  <SvgIcon {...props}>
-    <path d="m16 22-4-4 4-4 1.4 1.4-1.575 1.6H22v2h-6.175l1.575 1.6ZM2 13v-3h3v3Zm7.5 0q-1.45 0-2.475-1.025Q6 10.95 6 9.5v-4q0-1.45 1.025-2.475Q8.05 2 9.5 2q1.45 0 2.475 1.025Q13 4.05 13 5.5v4q0 1.45-1.025 2.475Q10.95 13 9.5 13Zm0-2q.625 0 1.062-.438Q11 10.125 11 9.5v-4q0-.625-.438-1.062Q10.125 4 9.5 4t-1.062.438Q8 4.875 8 5.5v4q0 .625.438 1.062Q8.875 11 9.5 11Z" />
-  </SvgIcon>
-);
-
-export const Icon123 = (props: SvgIconProps) => (
-  <SvgIcon {...props}>
-    <path d="M4.64518 15V10.3002H3V9H6.07057V15H4.64518ZM8.34684 15V12.3252C8.34684 12.0752 8.4381 11.8626 8.6206 11.6874C8.80355 11.5126 9.04133 11.4252 9.33395 11.4252H11.8563V10.3002H8.34684V9H12.2953C12.5695 9 12.8024 9.0834 12.9942 9.2502C13.1863 9.4166 13.2824 9.6332 13.2824 9.9V11.6748C13.2824 11.9248 13.1863 12.1374 12.9942 12.3126C12.8024 12.4874 12.5695 12.5748 12.2953 12.5748H9.77223V13.6998H13.2824V15H8.34684ZM15.0645 15V13.6998H18.574V12.5748H16.1615V11.4252H18.574V10.3002H15.0645V9H19.0129C19.3055 9 19.5431 9.0834 19.7256 9.2502C19.9085 9.4166 20 9.6332 20 9.9V14.1C20 14.3668 19.9085 14.5834 19.7256 14.7498C19.5431 14.9166 19.3055 15 19.0129 15H15.0645Z" />
-  </SvgIcon>
-);
-
 export const Python = (props: SvgIconProps) => (
   <SvgIcon {...props}>
     <path d="M11.8069 2.00016C10.9884 2.00397 10.2068 2.07377 9.51898 2.19548C7.49287 2.55342 7.12501 3.30264 7.12501 4.68432V6.50909H11.913V7.11735H7.12501H5.32813C3.93662 7.11735 2.71817 7.95373 2.33706 9.54481C1.89745 11.3686 1.87795 12.5066 2.33706 14.4109C2.6774 15.8284 3.49019 16.8383 4.8817 16.8383H6.52791V14.6508C6.52791 13.0705 7.89525 11.6765 9.51898 11.6765H14.3013C15.6326 11.6765 16.6953 10.5804 16.6953 9.24347V4.68432C16.6953 3.38676 15.6007 2.41203 14.3013 2.19548C13.4788 2.05856 12.6254 1.99636 11.8069 2.00016ZM9.21764 3.4678C9.7122 3.4678 10.1161 3.87827 10.1161 4.38298C10.1161 4.88589 9.7122 5.29257 9.21764 5.29257C8.7213 5.29257 8.3192 4.88589 8.3192 4.38298C8.3192 3.87827 8.7213 3.4678 9.21764 3.4678Z" />
@@ -180,13 +23,6 @@ export const Formula = (props: SvgIconProps) => (
   </SvgIcon>
 );
 
-export const AI = (props: SvgIconProps) => (
-  // Used AI to generate this icon. It's weird, but it works.
-  <SvgIcon {...props} width="16" height="16" viewBox="0 0 16 16">
-    <path d="M16 6.43424V6.42318C16 6.41073 15.994 6.39898 15.994 6.38653C15.9887 6.37478 15.9887 6.36302 15.9827 6.35058C15.9827 6.34435 15.9767 6.34435 15.9767 6.33882C15.9722 6.32792 15.9664 6.31768 15.9593 6.3084V6.30218C15.9533 6.29042 15.942 6.2842 15.93 6.27245L15.9247 6.26622C15.9127 6.26 15.9013 6.24825 15.8893 6.24202L13.4093 4.76032V1.79068C13.4093 1.77823 13.4093 1.76025 13.404 1.7485V1.73536C13.4029 1.72265 13.399 1.71037 13.3927 1.69941V1.69388C13.386 1.68212 13.3807 1.66968 13.3747 1.66415C13.3747 1.65723 13.3693 1.65723 13.3693 1.65723C13.363 1.64619 13.3551 1.63618 13.346 1.6275C13.334 1.62197 13.3287 1.60953 13.3167 1.60399C13.3113 1.60399 13.3113 1.59708 13.3053 1.59708L13.2993 1.59155L10.7033 0.0317105C10.6689 0.0109415 10.6298 0 10.59 0C10.5502 0 10.5111 0.0109415 10.4767 0.0317105L7.99667 1.51342L5.52401 0.0317105C5.4896 0.0109415 5.45049 0 5.41068 0C5.37086 0 5.33176 0.0109415 5.29734 0.0317105L2.70668 1.58533C2.70001 1.58533 2.70001 1.59224 2.70001 1.59224C2.69468 1.59224 2.69468 1.59777 2.68868 1.59777C2.67735 1.60399 2.67135 1.61575 2.66001 1.62197C2.65055 1.63032 2.64265 1.6404 2.63668 1.6517L2.63068 1.65792C2.62535 1.66968 2.61935 1.6759 2.61335 1.68835V1.69388C2.60735 1.70632 2.60735 1.71808 2.60201 1.72983V1.74228C2.60201 1.75403 2.59601 1.77201 2.59601 1.78376V4.75409L0.110681 6.24133C0.0986814 6.24825 0.087348 6.25931 0.0753481 6.26553L0.0700147 6.27176L0.0406814 6.30149V6.3084C0.0346814 6.32015 0.0293481 6.32569 0.0233481 6.33813C0.0233481 6.34366 0.0173481 6.34366 0.0173481 6.34989C0.0110365 6.36085 0.00716453 6.37313 0.00601479 6.38584C1.47944e-05 6.39828 1.47944e-05 6.41004 1.47944e-05 6.42318V9.54907C-0.000438797 9.59025 0.00954509 9.63083 0.028967 9.66675C0.0483889 9.70267 0.0765673 9.73266 0.110681 9.75373L2.59068 11.2354V14.2051C2.59016 14.2462 2.60004 14.2867 2.61934 14.3226C2.63864 14.3585 2.66669 14.3886 2.70068 14.4097L5.29068 15.964C5.29668 15.9696 5.30268 15.9696 5.30801 15.9758C5.30801 15.9758 5.31401 15.9758 5.31401 15.982C5.32001 15.982 5.32534 15.9876 5.33134 15.9876C5.33734 15.9876 5.33734 15.9876 5.34334 15.9945C5.34868 15.9945 5.35468 15.9945 5.36068 16H5.40134C5.43107 15.9998 5.46049 15.9937 5.48801 15.982C5.50001 15.9758 5.50534 15.9758 5.51734 15.9696L7.99734 14.4879L10.4773 15.9696C10.4887 15.9758 10.4947 15.982 10.506 15.982C10.5335 15.9937 10.5629 15.9998 10.5927 16H10.634C10.6393 16 10.6453 16 10.6513 15.9938C10.6567 15.9938 10.6567 15.9938 10.6627 15.9876C10.6687 15.9876 10.6747 15.982 10.68 15.982C10.686 15.982 10.686 15.982 10.686 15.9758C10.692 15.9758 10.6973 15.9696 10.7033 15.964L13.2933 14.4097C13.3275 14.3887 13.3556 14.3587 13.3751 14.3228C13.3945 14.2868 13.4045 14.2463 13.404 14.2051V11.2354L15.884 9.75373C15.918 9.73258 15.946 9.70254 15.9653 9.66663C15.9846 9.63072 15.9945 9.59019 15.994 9.54907V6.44668C16 6.43977 16 6.43424 16 6.43424ZM8.11334 13.9942C8.11334 13.9942 8.10734 13.9942 8.10734 13.988C8.10134 13.9824 8.09601 13.9824 8.08401 13.9762C8.07867 13.9762 8.07267 13.97 8.06667 13.97C8.06067 13.97 8.05534 13.9638 8.04334 13.9638C8.03801 13.9638 8.02601 13.9582 8.02001 13.9582H7.97401C7.96801 13.9582 7.95667 13.9582 7.95067 13.9638C7.94467 13.9638 7.93934 13.9638 7.92734 13.9707C7.92134 13.9707 7.91601 13.9762 7.91001 13.9762C7.90401 13.9824 7.89867 13.9824 7.88667 13.988C7.88667 13.988 7.88067 13.988 7.88067 13.9942L5.63401 15.3432V12.7835L7.99734 11.3682L10.3607 12.7835V15.3432L8.11334 13.9942ZM2.93335 5.09081C2.94468 5.07906 2.95001 5.07284 2.95601 5.07284C2.96201 5.06731 2.96801 5.06731 2.97335 5.06108L2.99068 5.04311C2.99735 5.03688 3.00268 5.03066 3.00268 5.02513C3.00868 5.01821 3.00868 5.01268 3.01401 5.00715C3.02001 5.00024 3.02001 4.99471 3.02601 4.98848C3.03135 4.98295 3.03135 4.97673 3.03135 4.96498C3.03135 4.95806 3.03801 4.95253 3.03801 4.94078C3.03801 4.93455 3.03801 4.92833 3.04335 4.91658V2.19377L5.18001 3.47774V6.3084L2.81668 7.72304L0.680014 6.44046L2.93335 5.09081ZM7.99734 2.06171L10.3607 3.47704V6.03598L8.10734 4.68703C8.10734 4.68703 8.10134 4.68703 8.10134 4.6808C8.09601 4.67458 8.09001 4.67458 8.07867 4.66905C8.07201 4.66905 8.06667 4.66283 8.06067 4.66283C8.05534 4.66283 8.04934 4.6566 8.03801 4.6566C8.03134 4.6566 8.02601 4.65107 8.01467 4.65107H7.96801C7.96201 4.65107 7.95067 4.65107 7.94467 4.6566C7.93934 4.6566 7.93334 4.6566 7.92134 4.66283C7.91601 4.66283 7.91001 4.66905 7.90401 4.66905C7.89867 4.67458 7.88667 4.67458 7.88067 4.6808C7.88067 4.6808 7.87534 4.6808 7.87534 4.68703L5.63334 6.03598V3.47774L7.99734 2.06171ZM7.99734 10.8254L5.63334 9.4101V6.57874L7.99734 5.16341L10.3607 6.57874V9.4101L7.99734 10.8254ZM3.04335 8.12683L5.18068 6.84356V9.57258C5.18068 9.57811 5.18068 9.58434 5.18601 9.59678C5.18601 9.60231 5.19201 9.60854 5.19201 9.62029C5.19201 9.6272 5.19801 9.63274 5.19801 9.64449C5.20334 9.65071 5.20334 9.65694 5.20934 9.66247C5.21534 9.66938 5.21534 9.67491 5.22134 9.68114C5.22668 9.68667 5.23268 9.69289 5.23268 9.69911L5.25001 9.71709C5.25601 9.72331 5.26201 9.72884 5.26734 9.72884C5.27334 9.73507 5.27934 9.74129 5.28468 9.74129L5.29134 9.74682L7.54467 11.0965L5.40668 12.379L3.04335 10.9637V8.12683ZM10.5933 12.379L8.45601 11.0965L10.7093 9.74682L10.7153 9.74129C10.7207 9.73507 10.7267 9.72884 10.7327 9.72884C10.738 9.72331 10.744 9.72331 10.75 9.71709L10.7673 9.69911C10.7733 9.69289 10.7787 9.68667 10.7787 9.68114C10.7853 9.67422 10.7853 9.66869 10.7907 9.66247C10.7967 9.65694 10.7967 9.65071 10.802 9.64449C10.808 9.63896 10.808 9.63274 10.808 9.62029C10.808 9.61476 10.814 9.60854 10.814 9.59678C10.814 9.58987 10.814 9.58434 10.8193 9.57258V6.84356L12.9567 8.12683V10.9575L10.5933 12.379ZM13.1833 7.72304L10.8193 6.30771V3.47774L12.9567 2.19446V4.9228C12.9567 4.92833 12.9567 4.93455 12.9627 4.94631C12.9627 4.95322 12.9687 4.95875 12.9687 4.97051C12.9687 4.97673 12.974 4.98295 12.974 4.99471C12.9807 5.00093 12.9807 5.00715 12.986 5.01268C12.9913 5.01891 12.9913 5.02513 12.9973 5.03066C13.0033 5.03757 13.0093 5.04311 13.0093 5.04864C13.0147 5.05555 13.0207 5.06108 13.0267 5.0673C13.032 5.07284 13.038 5.07906 13.044 5.07906C13.05 5.08528 13.0553 5.09081 13.0613 5.09081L13.0673 5.09773L15.3207 6.44599L13.1833 7.72304ZM10.5933 0.507406L12.73 1.79068L10.5933 3.07326L8.45601 1.79068L10.5933 0.507406ZM5.40668 0.507406L7.54401 1.79068L5.40668 3.06703L3.27001 1.79068L5.40668 0.507406ZM0.453348 6.84978L2.59001 8.13305V10.6927L0.453348 9.4101V6.84978ZM5.18001 15.3425L3.04335 14.0599V11.4996L5.18068 12.7828L5.18001 15.3425ZM12.9567 14.0661L10.8193 15.3487V12.7891L12.9567 11.5058V14.0661ZM15.5473 9.4101L13.41 10.6927V8.13305L15.5473 6.84978V9.4101Z" />
-  </SvgIcon>
-);
-
 export const Anthropic = (props: SvgIconProps) => (
   <SvgIcon {...props} width="22" height="15" viewBox="0 0 22 15">
     <svg width="22" height="15" viewBox="0 0 22 15" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -222,117 +58,6 @@ export const JavaScript = (props: SvgIconProps) => (
   </SvgIcon>
 );
 
-export const Sql = (props: SvgIconProps) => (
-  <SvgIcon {...props}>
-    <path d="M12 10.5C9.5 10.5 7.375 10.1083 5.625 9.325C3.875 8.54167 3 7.6 3 6.5C3 5.4 3.875 4.45833 5.625 3.675C7.375 2.89167 9.5 2.5 12 2.5C14.5 2.5 16.625 2.89167 18.375 3.675C20.125 4.45833 21 5.4 21 6.5C21 7.6 20.125 8.54167 18.375 9.325C16.625 10.1083 14.5 10.5 12 10.5ZM12 15.5C9.5 15.5 7.375 15.1083 5.625 14.325C3.875 13.5417 3 12.6 3 11.5V9C3 9.73333 3.34167 10.3543 4.025 10.863C4.70833 11.371 5.525 11.7833 6.475 12.1C7.425 12.4167 8.41267 12.6457 9.438 12.787C10.4627 12.929 11.3167 13 12 13C12.6833 13 13.5373 12.929 14.562 12.787C15.5873 12.6457 16.575 12.4167 17.525 12.1C18.475 11.7833 19.2917 11.371 19.975 10.863C20.6583 10.3543 21 9.73333 21 9V11.5C21 12.6 20.125 13.5417 18.375 14.325C16.625 15.1083 14.5 15.5 12 15.5ZM12 20.5C9.5 20.5 7.375 20.1083 5.625 19.325C3.875 18.5417 3 17.6 3 16.5V14C3 14.7333 3.34167 15.3543 4.025 15.863C4.70833 16.371 5.525 16.7833 6.475 17.1C7.425 17.4167 8.41267 17.646 9.438 17.788C10.4627 17.9293 11.3167 18 12 18C12.6833 18 13.5373 17.9293 14.562 17.788C15.5873 17.646 16.575 17.4167 17.525 17.1C18.475 16.7833 19.2917 16.371 19.975 15.863C20.6583 15.3543 21 14.7333 21 14V16.5C21 17.6 20.125 18.5417 18.375 19.325C16.625 20.1083 14.5 20.5 12 20.5Z" />
-  </SvgIcon>
-);
-
-export const SqlAdd = (props: SvgIconProps) => (
-  <SvgIcon {...props}>
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M5.625 9.325C7.375 10.1083 9.5 10.5 12 10.5C14.5 10.5 16.625 10.1083 18.375 9.325C20.125 8.54167 21 7.6 21 6.5C21 5.4 20.125 4.45833 18.375 3.675C16.625 2.89167 14.5 2.5 12 2.5C9.5 2.5 7.375 2.89167 5.625 3.675C3.875 4.45833 3 5.4 3 6.5C3 7.6 3.875 8.54167 5.625 9.325ZM12 15.5C9.5 15.5 7.375 15.1083 5.625 14.325C3.875 13.5417 3 12.6 3 11.5V9C3 9 3.34167 10.3543 4.025 10.863C4.70833 11.371 5.525 11.7833 6.475 12.1C7.425 12.4167 8.41267 12.6457 9.438 12.787C10.4627 12.929 11.3167 13 12 13V15.5ZM12 20.5C9.5 20.5 7.375 20.1083 5.625 19.325C3.875 18.5417 3 17.6 3 16.5V14C3 14.7333 3.34167 15.3543 4.025 15.863C4.70833 16.371 5.525 16.7833 6.475 17.1C7.425 17.4167 8.41267 17.646 9.438 17.788C10.4627 17.9293 11.3167 18 12 18V20.5Z"
-    />
-    <rect x="14" y="16" width="8" height="2" />
-    <rect x="19" y="13" width="8" height="2" transform="rotate(90 19 13)" />
-  </SvgIcon>
-);
-
-export const SaveFileOutlined = (props: SvgIconProps) => (
-  <SvgIcon {...props}>
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M4.588 21.413C4.97933 21.8043 5.45 22 6 22H18C18.55 22 19.021 21.8043 19.413 21.413C19.8043 21.021 20 20.55 20 20V8L14 2H6C5.45 2 4.97933 2.19567 4.588 2.587C4.196 2.979 4 3.45 4 4V20C4 20.55 4.196 21.021 4.588 21.413ZM13 4V9H18V20H6V4H13ZM13 11H11L11 15.175L9.4 13.575L8 15L12 19L16 15L14.575 13.6L13 15.175L13 11Z"
-    />
-  </SvgIcon>
-);
-export const ShareFileOutlined = (props: SvgIconProps) => (
-  <SvgIcon {...props}>
-    <path d="M4.588 21.413C4.97933 21.8043 5.45 22 6 22H9V20H6V9V4H13V9H18V11H20V8L14 2H6C5.45 2 4.97933 2.19567 4.588 2.587C4.196 2.979 4 3.45 4 4V20C4 20.55 4.196 21.021 4.588 21.413Z" />
-    <path d="M16 12C12.688 12 10 14.688 10 18C10 21.312 12.688 24 16 24C19.312 24 22 21.312 22 18C22 14.688 19.312 12 16 12ZM11.2 18C11.2 17.634 11.248 17.274 11.326 16.932L14.194 19.8V20.4C14.194 21.06 14.734 21.6 15.394 21.6V22.758C13.036 22.458 11.2 20.442 11.2 18ZM19.534 21.24C19.378 20.754 18.934 20.4 18.394 20.4H17.794V18.6C17.794 18.27 17.524 18 17.194 18H13.594V16.8H14.794C15.124 16.8 15.394 16.53 15.394 16.2V15H16.594C17.254 15 17.794 14.46 17.794 13.8V13.554C19.552 14.262 20.8 15.99 20.8 18C20.8 19.248 20.314 20.388 19.534 21.24Z" />
-  </SvgIcon>
-);
-
-export const CopyAsPNG = (props: SvgIconProps) => (
-  <SvgIcon {...props}>
-    <path d="M16 1H4C2.9 1 2 1.9 2 3V17H4V3H16V1ZM19 5H8C6.9 5 6 5.9 6 7V21C6 22.1 6.9 23 8 23H19C20.1 23 21 22.1 21 21V7C21 5.9 20.1 5 19 5ZM19 21H8V7H19V21Z" />
-    <path d="M9 15V19H18L14.25 14L11.25 18L9 15Z" />
-    <path d="M15.425 11.575C15.7083 11.8583 16.0667 12 16.5 12C16.9333 12 17.2917 11.8583 17.575 11.575C17.8583 11.2917 18 10.9333 18 10.5C18 10.0667 17.8583 9.70833 17.575 9.425C17.2917 9.14167 16.9333 9 16.5 9C16.0667 9 15.7083 9.14167 15.425 9.425C15.1417 9.70833 15 10.0667 15 10.5C15 10.9333 15.1417 11.2917 15.425 11.575Z" />
-  </SvgIcon>
-);
-
-export const FileDeleteIcon = (props: SvgIconProps) => (
-  <SvgIcon {...props}>
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M4.588 21.413C4.97933 21.8043 5.45 22 6 22H12V20H6V4H13V9H18V12H20V8L14 2H6C5.45 2 4.97933 2.19567 4.588 2.587C4.196 2.979 4 3.45 4 4V20C4 20.55 4.196 21.021 4.588 21.413Z"
-    />
-    <rect x="15" y="18" width="8" height="2" />
-  </SvgIcon>
-);
-
-export const FileDownloadIcon = (props: SvgIconProps) => (
-  <SvgIcon {...props}>
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M4.588 21.413C4.97933 21.8043 5.45 22 6 22H12V20H6V4H13V9H18V12H20V8L14 2H6C5.45 2 4.97933 2.19567 4.588 2.587C4.196 2.979 4 3.45 4 4V20C4 20.55 4.196 21.021 4.588 21.413Z"
-    />
-    <path d="M18 15L20 15L20 19.175L21.575 17.6L23 19L19 23L15 19L16.4 17.575L18 19.175L18 15Z" />
-  </SvgIcon>
-);
-
-export const FileDuplicateIcon = (props: SvgIconProps) => (
-  <SvgIcon {...props}>
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M4.588 21.413C4.97933 21.8043 5.45 22 6 22H12V20H6V4H13V9H18V12H20V8L14 2H6C5.45 2 4.97933 2.19567 4.588 2.587C4.196 2.979 4 3.45 4 4V20C4 20.55 4.196 21.021 4.588 21.413Z"
-    />
-    <rect x="15" y="18" width="8" height="2" />
-    <rect x="20" y="15" width="8" height="2" transform="rotate(90 20 15)" />
-  </SvgIcon>
-);
-
-export const SheetIcon = (props: SvgIconProps) => (
-  <SvgIcon {...props}>
-    <path d="M2 6C2 5.45 2.19567 4.97933 2.587 4.588C2.979 4.196 3.45 4 4 4L20 4C20.55 4 21.021 4.196 21.413 4.588C21.8043 4.97933 22 5.45 22 6C22 6 22 17.5 22 18C22 18.5 21.8035 19.0297 21.4202 19.413C21.0368 19.7963 20.5 20 20 20C19.5 20 4 20 4 20C3.45 20 2.979 19.8043 2.587 19.413C2.19567 19.021 2 18.55 2 18L2 6ZM20 18L20 13L20 6L4 6L4 18L15 18L20 18Z" />
-    <path fillRule="evenodd" clipRule="evenodd" d="M7 18L7 6L9 6L9 18L7 18Z" />
-    <path fillRule="evenodd" clipRule="evenodd" d="M20 11H4V9H20V11Z" />
-  </SvgIcon>
-);
-
-export const SheetDuplicateIcon = (props: SvgIconProps) => (
-  <SvgIcon {...props}>
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M2.587 4.588C2.19567 4.97933 2 5.45 2 6V18C2 18.55 2.19567 19.021 2.587 19.413C2.979 19.8043 3.45 20 4 20H12V18L4 18L4 6L20 6V12H22V6C22 5.45 21.8043 4.97933 21.413 4.588C21.021 4.196 20.55 4 20 4H4C3.45 4 2.979 4.196 2.587 4.588Z"
-    />
-    <rect x="15" y="18" width="8" height="2" />
-    <rect x="20" y="15" width="8" height="2" transform="rotate(90 20 15)" />
-    <path fillRule="evenodd" clipRule="evenodd" d="M7 18L7 6L9 6L9 18L7 18Z" />
-    <path fillRule="evenodd" clipRule="evenodd" d="M20 11H4V9H20V11Z" />
-  </SvgIcon>
-);
-
-export const SheetDeleteIcon = (props: SvgIconProps) => (
-  <SvgIcon {...props}>
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M2.587 4.588C2.19567 4.97933 2 5.45 2 6V18C2 18.55 2.19567 19.021 2.587 19.413C2.979 19.8043 3.45 20 4 20H12V18L4 18L4 6L20 6V12H22V6C22 5.45 21.8043 4.97933 21.413 4.588C21.021 4.196 20.55 4 20 4H4C3.45 4 2.979 4.196 2.587 4.588Z"
-    />
-    <rect x="15" y="16" width="8" height="2" />
-    <path fillRule="evenodd" clipRule="evenodd" d="M7 18L7 6L9 6L9 18L7 18Z" />
-    <path fillRule="evenodd" clipRule="evenodd" d="M20 11H4V9H20V11Z" />
-  </SvgIcon>
-);
-
 export const SheetGoToIcon = (props: SvgIconProps) => (
   <SvgIcon {...props}>
     <path
@@ -427,36 +152,6 @@ export const PanelPositionLeftIcon = (props: SvgIconProps) => (
   </SvgIcon>
 );
 
-export const TextOverflowIcon = (props: SvgIconProps) => (
-  <SvgIcon {...props}>
-    <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <rect width="48" height="48" fill="white" fillOpacity="0.01" />
-      <path d="M8 10V38" stroke="currentColor" strokeWidth="4" strokeLinecap="round" />
-      <path d="M24 4V16" stroke="currentColor" strokeWidth="4" strokeLinecap="round" />
-      <path d="M16 24H42" stroke="currentColor" strokeWidth="4" strokeLinecap="round" />
-      <path
-        d="M37.0561 19.0113L42.0929 24.0255L37.0561 29.123"
-        stroke="currentColor"
-        strokeWidth="4"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path d="M24 32V44" stroke="currentColor" strokeWidth="4" strokeLinecap="round" />
-    </svg>
-  </SvgIcon>
-);
-
-export const TextClipIcon = (props: SvgIconProps) => (
-  <SvgIcon {...props}>
-    <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <rect width="48" height="48" fill="white" fillOpacity="0.01" />
-      <path d="M8 8V40" stroke="currentColor" strokeWidth="4" strokeLinecap="round" />
-      <path d="M40 8V40" stroke="currentColor" strokeWidth="4" strokeLinecap="round" />
-      <path d="M20.0522 24.0083H40.0002" stroke="currentColor" strokeWidth="4" strokeLinecap="round" />
-    </svg>
-  </SvgIcon>
-);
-
 export const BoxIcon = (props: SvgIconProps) => (
   <SvgIcon {...props}>
     <path d="M8 17.425V10.575L2 7.1V13.95L8 17.425ZM10 17.425L16 13.95V7.1L10 10.575V17.425ZM9 8.85L14.925 5.425L9 2L3.075 5.425L9 8.85ZM1 15.7C0.683333 15.5167 0.4375 15.275 0.2625 14.975C0.0875 14.675 0 14.3417 0 13.975V6.025C0 5.65833 0.0875 5.325 0.2625 5.025C0.4375 4.725 0.683333 4.48333 1 4.3L8 0.275C8.31667 0.0916667 8.65 0 9 0C9.35 0 9.68333 0.0916667 10 0.275L17 4.3C17.3167 4.48333 17.5625 4.725 17.7375 5.025C17.9125 5.325 18 5.65833 18 6.025V13.975C18 14.3417 17.9125 14.675 17.7375 14.975C17.5625 15.275 17.3167 15.5167 17 15.7L10 19.725C9.68333 19.9083 9.35 20 9 20C8.65 20 8.31667 19.9083 8 19.725L1 15.7Z" />
diff --git a/quadratic-client/src/app/ui/menus/BottomBar/BottomBar.tsx b/quadratic-client/src/app/ui/menus/BottomBar/BottomBar.tsx
index ac023eb7c4..6f15a30acf 100644
--- a/quadratic-client/src/app/ui/menus/BottomBar/BottomBar.tsx
+++ b/quadratic-client/src/app/ui/menus/BottomBar/BottomBar.tsx
@@ -1,90 +1,19 @@
-import { events } from '@/app/events/events';
-import { FeedbackIcon } from '@/app/ui/icons';
-import { useRootRouteLoaderData } from '@/routes/_root';
-import { useFileRouteLoaderData } from '@/shared/hooks/useFileRouteLoaderData';
-import { Commit } from '@mui/icons-material';
-import { Stack, useMediaQuery, useTheme } from '@mui/material';
-import { useEffect, useState } from 'react';
-import { useRecoilState } from 'recoil';
-import { provideFeedbackAction } from '../../../actions';
-import { editorInteractionStateAtom } from '../../../atoms/editorInteractionStateAtom';
+import { VERSION } from '@/shared/constants/appConstants';
 import { debugShowFPS } from '../../../debugFlags';
-import { sheets } from '../../../grid/controller/Sheets';
-import { colors } from '../../../theme/colors';
 import BottomBarItem from './BottomBarItem';
-import { KernelMenu } from './KernelMenu';
 import { SelectionSummary } from './SelectionSummary';
 import SyncState from './SyncState';
 
 export const BottomBar = () => {
-  const [editorInteractionState, setEditorInteractionState] = useRecoilState(editorInteractionStateAtom);
-  const theme = useTheme();
-  const { permissions } = editorInteractionState;
-  const { isAuthenticated } = useRootRouteLoaderData();
-  const [cursorPositionString, setCursorPositionString] = useState('');
-  const [multiCursorPositionString, setMultiCursorPositionString] = useState('');
-  const {
-    userMakingRequest: { fileTeamPrivacy, teamPermissions },
-  } = useFileRouteLoaderData();
-
-  const isAvailableArgs = { filePermissions: permissions, fileTeamPrivacy, isAuthenticated, teamPermissions };
-
-  useEffect(() => {
-    const updateCursor = () => {
-      const cursor = sheets.sheet.cursor;
-      setCursorPositionString(`(${cursor.cursorPosition.x}, ${cursor.cursorPosition.y})`);
-      if (cursor.multiCursor && cursor.multiCursor.length === 1) {
-        const multiCursor = cursor.multiCursor[0];
-        setMultiCursorPositionString(
-          `(${multiCursor.left}, ${multiCursor.top}), (${multiCursor.right - 1}, ${multiCursor.bottom - 1})`
-        );
-      } else {
-        setMultiCursorPositionString('');
-      }
-    };
-    updateCursor();
-    events.on('cursorPosition', updateCursor);
-    events.on('changeSheet', updateCursor);
-    return () => {
-      events.off('cursorPosition', updateCursor);
-      events.off('changeSheet', updateCursor);
-    };
-  }, []);
-
-  const handleShowGoToMenu = () => {
-    setEditorInteractionState({
-      ...editorInteractionState,
-      showGoToMenu: true,
-    });
-  };
-
-  const showOnDesktop = useMediaQuery(theme.breakpoints.up('md'));
-
   return (
     <div
       onContextMenu={(event) => {
         // Disable right-click
         event.preventDefault();
       }}
-      style={{
-        backgroundColor: 'rgba(255, 255, 255, 0.9)',
-        borderTop: `1px solid ${theme.palette.divider}`,
-        color: colors.darkGray,
-        bottom: 0,
-        width: '100%',
-        backdropFilter: 'blur(1px)',
-        display: 'flex',
-        justifyContent: 'space-between',
-        userSelect: 'none',
-        zIndex: 1,
-      }}
+      className="flex h-6 w-full flex-shrink-0 select-none justify-between border-t border-border bg-background text-xs text-muted-foreground"
     >
-      <Stack direction="row">
-        {showOnDesktop && <BottomBarItem onClick={handleShowGoToMenu}>Cursor: {cursorPositionString}</BottomBarItem>}
-        {showOnDesktop && sheets.sheet.cursor.multiCursor && (
-          <BottomBarItem>Selection: {multiCursorPositionString}</BottomBarItem>
-        )}
-
+      <div className="flex items-center">
         {/* {showOnDesktop && selectedCell?.last_modified && (
           <BottomBarItem>
             You, {formatDistance(Date.parse(selectedCell.last_modified), new Date(), { addSuffix: true })}
@@ -107,28 +36,15 @@ export const BottomBar = () => {
             <span className="debug-show-FPS">--</span> FPS
           </BottomBarItem>
         )}
-      </Stack>
-      <Stack direction="row">
+      </div>
+      <div className="flex items-center">
         <SelectionSummary />
         <SyncState />
-        <KernelMenu />
         {/* {showOnDesktop && <PythonStateItem />} */}
-        {provideFeedbackAction.isAvailable(isAvailableArgs) && (
-          <BottomBarItem
-            icon={<FeedbackIcon fontSize="inherit" />}
-            onClick={() => {
-              setEditorInteractionState((prevState) => ({ ...prevState, showFeedbackMenu: true }));
-            }}
-          >
-            {provideFeedbackAction.label}
-          </BottomBarItem>
-        )}
-        {showOnDesktop && (
-          <BottomBarItem icon={<Commit fontSize="inherit" />}>
-            Quadratic {import.meta.env.VITE_VERSION?.slice(0, 7)} (BETA)
-          </BottomBarItem>
-        )}
-      </Stack>
+        <div className="hidden lg:block">
+          <BottomBarItem>{VERSION}</BottomBarItem>
+        </div>
+      </div>
     </div>
   );
 };
diff --git a/quadratic-client/src/app/ui/menus/BottomBar/KernelMenu.tsx b/quadratic-client/src/app/ui/menus/BottomBar/KernelMenu.tsx
index 59f68d9a3b..44cf976462 100644
--- a/quadratic-client/src/app/ui/menus/BottomBar/KernelMenu.tsx
+++ b/quadratic-client/src/app/ui/menus/BottomBar/KernelMenu.tsx
@@ -4,28 +4,29 @@ import { sheets } from '@/app/grid/controller/Sheets';
 import { pixiApp } from '@/app/gridGL/pixiApp/PixiApp';
 import { KeyboardSymbols } from '@/app/helpers/keyboardSymbols';
 import { colors } from '@/app/theme/colors';
-import { MenuLineItem } from '@/app/ui/menus/TopBar/MenuLineItem';
+import { SidebarToggle, SidebarTooltip } from '@/app/ui/QuadraticSidebar';
 import type { CodeRun } from '@/app/web-workers/CodeRun';
 import { javascriptWebWorker } from '@/app/web-workers/javascriptWebWorker/javascriptWebWorker';
 import { LanguageState } from '@/app/web-workers/languageTypes';
 import { pythonWebWorker } from '@/app/web-workers/pythonWebWorker/pythonWebWorker';
 import { quadraticCore } from '@/app/web-workers/quadraticCore/quadraticCore';
+import { MemoryIcon } from '@/shared/components/Icons';
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuLabel,
   DropdownMenuSeparator,
+  DropdownMenuShortcut,
   DropdownMenuTrigger,
 } from '@/shared/shadcn/ui/dropdown-menu';
-import { Tooltip, TooltipContent, TooltipProvider } from '@/shared/shadcn/ui/tooltip';
-import MemoryIcon from '@mui/icons-material/Memory';
+import { Tooltip, TooltipContent } from '@/shared/shadcn/ui/tooltip';
 import StopIcon from '@mui/icons-material/Stop';
 import { TooltipTrigger } from '@radix-ui/react-tooltip';
 import { useEffect, useState } from 'react';
-import BottomBarItem from './BottomBarItem';
 
-export const KernelMenu = () => {
+// Update the KernelMenu component to accept a custom trigger
+export const KernelMenu = ({ triggerIcon }: { triggerIcon: React.ReactNode }) => {
   const [disableRunCodeCell, setDisableRunCodeCell] = useState(true);
   useEffect(() => {
     const checkRunCodeCell = () => setDisableRunCodeCell(!pixiApp.isCursorOnCodeCell());
@@ -76,32 +77,27 @@ export const KernelMenu = () => {
     setRunning((pythonCodeRunning ? 1 : 0) + (javascriptCodeRunning ? 1 : 0) + (connectionCodeRunning ? 1 : 0));
   }, [pythonCodeRunning, javascriptCodeRunning, connectionCodeRunning]);
 
-  const [open, setOpen] = useState(false);
-
   return (
-    <DropdownMenu open={open} onOpenChange={setOpen}>
-      <DropdownMenuTrigger asChild>
-        <BottomBarItem title="Kernel Menu" open={open} icon={<MemoryIcon fontSize="inherit" />} onClick={() => {}}>
-          <div className="text-xs">Kernel</div>
-          {running > 0 && (
-            <div
-              className="absolute left-0 top-0 rounded-full px-1 text-white"
-              style={{ background: colors.darkGray, fontSize: '0.5rem' }}
-            >
-              {running}
-            </div>
-          )}
-        </BottomBarItem>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent>
+    <DropdownMenu>
+      <SidebarTooltip label="Kernel">
+        <DropdownMenuTrigger asChild>
+          <SidebarToggle>
+            <MemoryIcon />
+            {running > 0 && (
+              <div className="pointer-events-none absolute right-0 top-0 flex h-4 w-4 items-center justify-center rounded-full bg-warning text-[10px] text-background">
+                {running}
+              </div>
+            )}
+          </SidebarToggle>
+        </DropdownMenuTrigger>
+      </SidebarTooltip>
+      <DropdownMenuContent side="right">
         <DropdownMenuLabel>
           Status: {pythonCodeRunning || javascriptCodeRunning || connectionCodeRunning ? 'running' : 'idle'}
         </DropdownMenuLabel>
         <DropdownMenuSeparator />
         <DropdownMenuLabel>
-          <MenuLineItem
-            primary={pythonState.pythonState === 'loading' ? 'Python loading...' : 'all code languages are ready'}
-          />
+          {pythonState.pythonState === 'loading' ? 'Python loading...' : 'All code languages are ready'}
         </DropdownMenuLabel>
         {pythonCodeRunning && (
           <>
@@ -111,21 +107,19 @@ export const KernelMenu = () => {
         )}
         {pythonCodeRunning && (
           <DropdownMenuItem onClick={pythonWebWorker.cancelExecution}>
-            <TooltipProvider>
-              <Tooltip>
-                <TooltipContent>Stop running cell</TooltipContent>
-                <TooltipTrigger>
-                  <div className="ml-5 text-sm">
-                    <StopIcon style={{ color: colors.darkGray }} />
-                    cell({pythonCodeRunning.sheetPos.x}, {pythonCodeRunning.sheetPos.y}
-                    {pythonCodeRunning.sheetPos.sheetId !== sheets.sheet.id
-                      ? `, "${sheets.getById(pythonCodeRunning.sheetPos.sheetId)?.name || ''}"`
-                      : ''}
-                    ) is running...
-                  </div>
-                </TooltipTrigger>
-              </Tooltip>
-            </TooltipProvider>
+            <Tooltip>
+              <TooltipContent>Stop running cell</TooltipContent>
+              <TooltipTrigger>
+                <div className="ml-5 text-sm">
+                  <StopIcon style={{ color: colors.darkGray }} />
+                  cell({pythonCodeRunning.sheetPos.x}, {pythonCodeRunning.sheetPos.y}
+                  {pythonCodeRunning.sheetPos.sheetId !== sheets.sheet.id
+                    ? `, "${sheets.getById(pythonCodeRunning.sheetPos.sheetId)?.name || ''}"`
+                    : ''}
+                  ) is running...
+                </div>
+              </TooltipTrigger>
+            </Tooltip>
           </DropdownMenuItem>
         )}
         {javascriptCodeRunning && (
@@ -136,21 +130,19 @@ export const KernelMenu = () => {
         )}
         {javascriptCodeRunning && (
           <DropdownMenuItem onClick={javascriptWebWorker.cancelExecution}>
-            <TooltipProvider>
-              <Tooltip>
-                <TooltipContent>Stop running cell</TooltipContent>
-                <TooltipTrigger>
-                  <div className="ml-5 text-sm">
-                    <StopIcon style={{ color: colors.darkGray }} />
-                    cell({javascriptCodeRunning.sheetPos.x}, {javascriptCodeRunning.sheetPos.y}
-                    {javascriptCodeRunning.sheetPos.sheetId !== sheets.sheet.id
-                      ? `, "${sheets.getById(javascriptCodeRunning.sheetPos.sheetId)?.name || ''}"`
-                      : ''}
-                    ) is running...
-                  </div>
-                </TooltipTrigger>
-              </Tooltip>
-            </TooltipProvider>
+            <Tooltip>
+              <TooltipContent>Stop running cell</TooltipContent>
+              <TooltipTrigger>
+                <div className="ml-5 text-sm">
+                  <StopIcon style={{ color: colors.darkGray }} />
+                  cell({javascriptCodeRunning.sheetPos.x}, {javascriptCodeRunning.sheetPos.y}
+                  {javascriptCodeRunning.sheetPos.sheetId !== sheets.sheet.id
+                    ? `, "${sheets.getById(javascriptCodeRunning.sheetPos.sheetId)?.name || ''}"`
+                    : ''}
+                  ) is running...
+                </div>
+              </TooltipTrigger>
+            </Tooltip>
           </DropdownMenuItem>
         )}
         {connectionCodeRunning && (
@@ -161,21 +153,19 @@ export const KernelMenu = () => {
         )}
         {connectionCodeRunning && (
           <DropdownMenuItem onClick={() => quadraticCore.sendCancelExecution({ Connection: {} as any })}>
-            <TooltipProvider>
-              <Tooltip>
-                <TooltipContent>Stop running cell</TooltipContent>
-                <TooltipTrigger>
-                  <div className="ml-5 text-sm">
-                    <StopIcon style={{ color: colors.darkGray }} />
-                    cell({connectionCodeRunning.sheetPos.x}, {connectionCodeRunning.sheetPos.y}
-                    {connectionCodeRunning.sheetPos.sheetId !== sheets.sheet.id
-                      ? `, "${sheets.getById(connectionCodeRunning.sheetPos.sheetId)?.name || ''}"`
-                      : ''}
-                    ) is running...
-                  </div>
-                </TooltipTrigger>
-              </Tooltip>
-            </TooltipProvider>
+            <Tooltip>
+              <TooltipContent>Stop running cell</TooltipContent>
+              <TooltipTrigger>
+                <div className="ml-5 text-sm">
+                  <StopIcon style={{ color: colors.darkGray }} />
+                  cell({connectionCodeRunning.sheetPos.x}, {connectionCodeRunning.sheetPos.y}
+                  {connectionCodeRunning.sheetPos.sheetId !== sheets.sheet.id
+                    ? `, "${sheets.getById(connectionCodeRunning.sheetPos.sheetId)?.name || ''}"`
+                    : ''}
+                  ) is running...
+                </div>
+              </TooltipTrigger>
+            </Tooltip>
           </DropdownMenuItem>
         )}
         <DropdownMenuSeparator />
@@ -190,25 +180,28 @@ export const KernelMenu = () => {
             )
           }
         >
-          <MenuLineItem primary="Run current code cell" secondary={KeyboardSymbols.Command + KeyboardSymbols.Enter} />
+          Run current code cell
+          <DropdownMenuShortcut className="pl-4">
+            {KeyboardSymbols.Command + KeyboardSymbols.Enter}
+          </DropdownMenuShortcut>
         </DropdownMenuItem>
         <DropdownMenuItem
           onClick={() =>
             quadraticCore.rerunCodeCells(sheets.sheet.id, undefined, undefined, sheets.getCursorPosition())
           }
         >
-          <MenuLineItem
-            primary="Run all code cells in sheet"
-            secondary={KeyboardSymbols.Shift + KeyboardSymbols.Command + KeyboardSymbols.Enter}
-          />
+          Run all code cells in sheet
+          <DropdownMenuShortcut className="pl-4">
+            {KeyboardSymbols.Shift + KeyboardSymbols.Command + KeyboardSymbols.Enter}
+          </DropdownMenuShortcut>
         </DropdownMenuItem>
         <DropdownMenuItem
           onClick={() => quadraticCore.rerunCodeCells(undefined, undefined, undefined, sheets.getCursorPosition())}
         >
-          <MenuLineItem
-            primary="Run all code cells in file"
-            secondary={KeyboardSymbols.Shift + KeyboardSymbols.Command + KeyboardSymbols.Alt + KeyboardSymbols.Enter}
-          />
+          Run all code cells in file
+          <DropdownMenuShortcut className="pl-4">
+            {KeyboardSymbols.Shift + KeyboardSymbols.Command + KeyboardSymbols.Alt + KeyboardSymbols.Enter}
+          </DropdownMenuShortcut>
         </DropdownMenuItem>
       </DropdownMenuContent>
     </DropdownMenu>
diff --git a/quadratic-client/src/app/ui/menus/BottomBar/SyncState.tsx b/quadratic-client/src/app/ui/menus/BottomBar/SyncState.tsx
index c88f6d815c..85bbcee0e2 100644
--- a/quadratic-client/src/app/ui/menus/BottomBar/SyncState.tsx
+++ b/quadratic-client/src/app/ui/menus/BottomBar/SyncState.tsx
@@ -2,71 +2,44 @@ import { events } from '@/app/events/events';
 import { pluralize } from '@/app/helpers/pluralize';
 import { multiplayer } from '@/app/web-workers/multiplayerWebWorker/multiplayer';
 import { MultiplayerState } from '@/app/web-workers/multiplayerWebWorker/multiplayerClientMessages';
+import { quadraticCore } from '@/app/web-workers/quadraticCore/quadraticCore';
 import { useGlobalSnackbar } from '@/shared/components/GlobalSnackbarProvider';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '@/shared/shadcn/ui/dropdown-menu';
+import { CloseIcon } from '@/shared/components/Icons';
+import { ShowAfter } from '@/shared/components/ShowAfter';
+import { DOCUMENTATION_OFFLINE } from '@/shared/constants/urls';
+import { Button } from '@/shared/shadcn/ui/button';
+import { TooltipPopover } from '@/shared/shadcn/ui/tooltip';
 import { timeAgo } from '@/shared/utils/timeAgo';
-import { Check, ErrorOutline } from '@mui/icons-material';
-import { CircularProgress, Tooltip, useTheme } from '@mui/material';
-import { useEffect, useRef, useState } from 'react';
+import { CircularProgress } from '@mui/material';
+import { useEffect, useState } from 'react';
 import BottomBarItem from './BottomBarItem';
-import { quadraticCore } from '@/app/web-workers/quadraticCore/quadraticCore';
-import { DOCUMENTATION_OFFLINE } from '@/shared/constants/urls';
 
-const TIMEOUT_TO_SHOW_DISCONNECT_MESSAGE = 1000;
+// const TIMEOUT_TO_SHOW_DISCONNECT_MESSAGE = 1000;
 
 export default function SyncState() {
-  const theme = useTheme();
-
   const [syncState, setSyncState] = useState<MultiplayerState>(multiplayer.state);
   const { addGlobalSnackbar } = useGlobalSnackbar();
+  const [showOfflineMsg, setShowOfflineMsg] = useState(false);
 
-  const [disconnectMessage, setDisconnectMessage] = useState(false);
-  const timeout = useRef<number | null>(null);
   useEffect(() => {
     const updateState = (state: MultiplayerState) => {
-      if (state === 'waiting to reconnect' || state === 'no internet') {
-        if (!timeout.current && !disconnectMessage) {
-          timeout.current = window.setTimeout(() => {
-            const message = (
-              <div>
-                Connection to the Quadratic server was lost. Your changes are only saved locally.{' '}
-                <a className="underline" href={DOCUMENTATION_OFFLINE}>
-                  Learn more
-                </a>
-                .
-              </div>
-            );
-            addGlobalSnackbar(message, {
-              severity: 'warning',
-              button: { title: 'Refresh', callback: () => window.location.reload() },
-            });
-            timeout.current = null;
-            setDisconnectMessage(true);
-          }, TIMEOUT_TO_SHOW_DISCONNECT_MESSAGE);
+      setSyncState((prevState) => {
+        // If they dismissed it, don't show it again if they've gone from offline -> online
+        if ((prevState === 'connected' || prevState === 'syncing') && !(state === 'connected' || state === 'syncing')) {
+          setShowOfflineMsg(true);
+        }
+        // If they didn't dismiss it, make sure it hides if they go from offline -> online
+        if (!(prevState === 'connected' || prevState === 'syncing') && (state === 'connected' || state === 'syncing')) {
+          setShowOfflineMsg(false);
         }
-      }
-      if (state === 'connected' && timeout.current) {
-        window.clearTimeout(timeout.current);
-        timeout.current = null;
-      }
-      if (state === 'connected' && disconnectMessage) {
-        setDisconnectMessage(false);
-        addGlobalSnackbar('Connection to the Quadratic server was reestablished.', { severity: 'success' });
-      }
-      setSyncState(state);
+        return state;
+      });
     };
     events.on('multiplayerState', updateState);
     return () => {
       events.off('multiplayerState', updateState);
     };
-  }, [addGlobalSnackbar, disconnectMessage]);
+  }, []);
 
   const [unsavedTransactions, setUnsavedTransactions] = useState(0);
   useEffect(() => {
@@ -107,56 +80,57 @@ export default function SyncState() {
     };
   }, [addGlobalSnackbar]);
 
-  const [open, setOpen] = useState(false);
-
   let tooltip: string;
-  let icon: JSX.Element;
-  let message: string | JSX.Element;
+  let message: string;
+  let icon = null;
+  let className = '';
+
+  const loadingIcon = <CircularProgress size="0.5rem" />;
 
-  if (['waiting to reconnect', 'connecting'].includes(syncState) && multiplayer.brokenConnection) {
-    icon = <CircularProgress size="0.5rem" />;
-    message = <span style={{ color: theme.palette.error.main }}>Reconnecting…</span>;
-    tooltip =
-      'Attempting to connect to the Quadratic server after losing connection. Your changes may only be saved locally…';
-  } else if (['not connected', 'connecting', 'waiting to reconnect', 'startup'].includes(syncState)) {
-    icon = <CircularProgress size="0.5rem" />;
-    message = <span>Connecting…</span>;
-    tooltip = 'Connecting to the Quadratic server…';
+  if (syncState === 'connected') {
+    message = 'Connected';
+    tooltip = 'All changes saved';
   } else if (syncState === 'syncing') {
-    icon = <CircularProgress size="0.5rem" />;
-    message = <span>Syncing...</span>;
-    tooltip = 'Syncing changes to the Quadratic server. Your recent changes are saved locally.';
-  } else if (syncState === 'connected') {
-    icon = <Check fontSize="inherit" />;
-    message = <span>Connected</span>;
-    tooltip = 'Connected to the Quadratic server. Your changes are saved.';
-  } else if (syncState === 'no internet') {
-    icon = <ErrorOutline fontSize="inherit" style={{ color: theme.palette.error.main }} />;
-    message = <span style={{ color: theme.palette.error.main }}>Offline</span>;
-    tooltip = 'Your internet connection appears not to be working. Your changes are only saved locally.';
+    message = 'Syncing…';
+    tooltip = 'Recent changes saved locally';
+    icon = loadingIcon;
   } else {
-    icon = <ErrorOutline fontSize="inherit" style={{ color: theme.palette.error.main }} />;
-    tooltip =
-      "Connection to the Quadratic server was lost. We'll continue trying to reconnect. Your changes are only saved locally.";
-    message = <span style={{ color: theme.palette.error.main }}>Offline</span>;
+    className = 'text-destructive';
+    icon = loadingIcon;
+    message = 'Offline, reconnecting…';
+    tooltip = 'Recent changes only saved locally';
+  }
+
+  if (unsavedTransactions > 0) {
+    tooltip += ` (syncing ${unsavedTransactions} ${pluralize('item', unsavedTransactions)}…)`;
   }
 
   return (
-    <DropdownMenu open={open} onOpenChange={setOpen}>
-      <DropdownMenuTrigger asChild>
-        <BottomBarItem icon={icon} onClick={() => {}}>
-          <Tooltip title={tooltip}>{message}</Tooltip>
-        </BottomBarItem>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent>
-        <DropdownMenuLabel className={`flexz zw-full zjustify-between`}>Status</DropdownMenuLabel>
-        <DropdownMenuSeparator />
-        <DropdownMenuItem className={`flexz zw-full zjustify-between`}>
-          {unsavedTransactions === 0
-            ? 'Nothing waiting to sync'
-            : `Syncing ${unsavedTransactions} ${pluralize('item', unsavedTransactions)}.`}
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
+    <>
+      <BottomBarItem className={className} icon={icon}>
+        <TooltipPopover label={tooltip}>
+          <div>{message}</div>
+        </TooltipPopover>
+      </BottomBarItem>
+      {showOfflineMsg && (
+        <ShowAfter delay={5000}>
+          <div className="fixed bottom-16 right-2 z-10 w-96 rounded bg-destructive p-4 pr-8 text-sm text-background">
+            Connection lost. Your changes are only saved locally.{' '}
+            <a className="underline" href={DOCUMENTATION_OFFLINE}>
+              Learn more
+            </a>
+            .
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              className="absolute right-1 top-1 !bg-transparent opacity-80 hover:text-background hover:opacity-100"
+              onClick={() => setShowOfflineMsg(false)}
+            >
+              <CloseIcon />
+            </Button>
+          </div>
+        </ShowAfter>
+      )}
+    </>
   );
 }
diff --git a/quadratic-client/src/app/ui/menus/CellTypeMenu/CellTypeMenu.tsx b/quadratic-client/src/app/ui/menus/CellTypeMenu/CellTypeMenu.tsx
index 80cc721d72..a13a389877 100644
--- a/quadratic-client/src/app/ui/menus/CellTypeMenu/CellTypeMenu.tsx
+++ b/quadratic-client/src/app/ui/menus/CellTypeMenu/CellTypeMenu.tsx
@@ -17,7 +17,7 @@ import '../../styles/floating-dialog.css';
 import { colors } from '@/app/theme/colors';
 import { LanguageIcon } from '@/app/ui/components/LanguageIcon';
 import { useConnectionsFetcher } from '@/app/ui/hooks/useConnectionsFetcher';
-import { ConnectionsIcon } from '@/dashboard/components/CustomRadixIcons';
+import { DatabaseIcon } from '@/shared/components/Icons';
 import { Badge } from '@/shared/shadcn/ui/badge';
 import {
   CommandDialog,
@@ -160,7 +160,7 @@ export default function CellTypeMenu() {
                   Connect to Postgres, MySQL, <LinkNewTabWrapper href={DOCUMENTATION_URL}>and more</LinkNewTabWrapper>
                 </>
               }
-              icon={<ConnectionsIcon className="text-muted-foreground opacity-80" />}
+              icon={<DatabaseIcon className="text-muted-foreground opacity-80" />}
               onSelect={() => {
                 setEditorInteractionState({
                   ...editorInteractionState,
@@ -203,7 +203,7 @@ function CommandItemWrapper({
         e.stopPropagation();
       }}
     >
-      <div className="mr-4">{icon}</div>
+      <div className="mr-4 flex h-5 w-5 items-center">{icon}</div>
       <div className="flex flex-col">
         <span className="flex items-center">
           {name}{' '}
diff --git a/quadratic-client/src/app/ui/menus/CodeEditor/CodeEditor.tsx b/quadratic-client/src/app/ui/menus/CodeEditor/CodeEditor.tsx
index 2771f60606..383002fc94 100644
--- a/quadratic-client/src/app/ui/menus/CodeEditor/CodeEditor.tsx
+++ b/quadratic-client/src/app/ui/menus/CodeEditor/CodeEditor.tsx
@@ -10,28 +10,29 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useRecoilState } from 'recoil';
 // TODO(ddimaria): leave this as we're looking to add this back in once improved
 // import { Diagnostic } from 'vscode-languageserver-types';
+import { hasPermissionToEditFile } from '@/app/actions';
+import { Action } from '@/app/actions/actions';
+import { editorInteractionStateAtom } from '@/app/atoms/editorInteractionStateAtom';
 import { useConnectionState } from '@/app/atoms/useConnectionState';
 import { useJavascriptState } from '@/app/atoms/useJavascriptState';
+import { pixiApp } from '@/app/gridGL/pixiApp/PixiApp';
 import { pixiAppSettings } from '@/app/gridGL/pixiApp/PixiAppSettings';
 import { getLanguage } from '@/app/helpers/codeCellLanguage';
 import { matchShortcut } from '@/app/helpers/keyboardShortcuts.js';
+import { CodeEditorBody } from '@/app/ui/menus/CodeEditor/CodeEditorBody';
 import { useCodeEditor } from '@/app/ui/menus/CodeEditor/CodeEditorContext';
 import { CodeEditorEmptyState } from '@/app/ui/menus/CodeEditor/CodeEditorEmptyState';
+import { CodeEditorHeader } from '@/app/ui/menus/CodeEditor/CodeEditorHeader';
 import { CodeEditorPanel } from '@/app/ui/menus/CodeEditor/panels/CodeEditorPanel';
 import { CodeEditorPanels } from '@/app/ui/menus/CodeEditor/panels/CodeEditorPanelsResize';
 import { useCodeEditorPanelData } from '@/app/ui/menus/CodeEditor/panels/useCodeEditorPanelData';
+import { ReturnTypeInspector } from '@/app/ui/menus/CodeEditor/ReturnTypeInspector';
+import { SaveChangesAlert } from '@/app/ui/menus/CodeEditor/SaveChangesAlert';
 import { javascriptWebWorker } from '@/app/web-workers/javascriptWebWorker/javascriptWebWorker';
+import { pythonWebWorker } from '@/app/web-workers/pythonWebWorker/pythonWebWorker';
 import { cn } from '@/shared/shadcn/utils';
 import { googleAnalyticsAvailable } from '@/shared/utils/analytics';
-import { hasPermissionToEditFile } from '../../../actions';
-import { editorInteractionStateAtom } from '../../../atoms/editorInteractionStateAtom';
-import { pixiApp } from '../../../gridGL/pixiApp/PixiApp';
-import { pythonWebWorker } from '../../../web-workers/pythonWebWorker/pythonWebWorker';
 import './CodeEditor.css';
-import { CodeEditorBody } from './CodeEditorBody';
-import { CodeEditorHeader } from './CodeEditorHeader';
-import { ReturnTypeInspector } from './ReturnTypeInspector';
-import { SaveChangesAlert } from './SaveChangesAlert';
 
 export const dispatchEditorAction = (name: string) => {
   window.dispatchEvent(new CustomEvent('run-editor-action', { detail: name }));
@@ -293,41 +294,41 @@ export const CodeEditor = () => {
     }
 
     // Command + S
-    if (matchShortcut('save', event)) {
+    if (matchShortcut(Action.Save, event)) {
       event.preventDefault();
       saveAndRunCell();
     }
 
     // Command + Enter
-    if (matchShortcut('execute_code', event)) {
+    if (matchShortcut(Action.ExecuteCode, event)) {
       event.preventDefault();
       event.stopPropagation();
       saveAndRunCell();
     }
 
     // Command + Escape
-    if (matchShortcut('cancel_execution', event)) {
+    if (matchShortcut(Action.CancelExecution, event)) {
       event.preventDefault();
       event.stopPropagation();
       cancelRun();
     }
 
     // Command + Plus
-    if (matchShortcut('zoom_in', event)) {
+    if (matchShortcut(Action.ZoomIn, event)) {
       event.preventDefault();
       event.stopPropagation();
       dispatchEditorAction('editor.action.fontZoomIn');
     }
 
     // Command + Minus
-    if (matchShortcut('zoom_out', event)) {
+    if (matchShortcut(Action.ZoomOut, event)) {
       event.preventDefault();
       event.stopPropagation();
       dispatchEditorAction('editor.action.fontZoomOut');
     }
 
     // Command + 0
-    if (matchShortcut('zoom_to_100', event)) {
+    if (matchShortcut(Action.ZoomTo100, event)) {
       event.preventDefault();
       event.stopPropagation();
       dispatchEditorAction('editor.action.fontZoomReset');
diff --git a/quadratic-client/src/app/ui/menus/CodeEditor/SnippetsPopover.tsx b/quadratic-client/src/app/ui/menus/CodeEditor/SnippetsPopover.tsx
index b5ac74c0dd..0a3a1d4f9f 100644
--- a/quadratic-client/src/app/ui/menus/CodeEditor/SnippetsPopover.tsx
+++ b/quadratic-client/src/app/ui/menus/CodeEditor/SnippetsPopover.tsx
@@ -1,6 +1,6 @@
 import { editorInteractionStateAtom } from '@/app/atoms/editorInteractionStateAtom';
 import { TooltipHint } from '@/app/ui/components/TooltipHint';
-import { ExternalLinkIcon } from '@/app/ui/icons';
+import { ExternalLinkIcon } from '@/shared/components/Icons';
 import {
   DOCUMENTATION_JAVASCRIPT_URL,
   DOCUMENTATION_PYTHON_URL,
@@ -147,10 +147,10 @@ export function SnippetsPopover() {
           onClick={() => {
             mixpanel.track('[Snippets].clickDocs');
           }}
-          className="flex w-full items-center gap-4 border-t border-border px-3 py-2 text-sm text-muted-foreground hover:underline"
+          className="flex w-full items-center justify-between gap-4 border-t border-border px-3 py-2 text-sm text-muted-foreground hover:underline"
         >
-          <ExternalLinkIcon style={{ fontSize: '.875rem' }} className="opacity-80" />
           Read the docs
+          <ExternalLinkIcon className="float-right opacity-50" />
         </ExternalLink>
       </PopoverContent>
     </Popover>
diff --git a/quadratic-client/src/app/ui/menus/CodeEditor/panels/ResizeControl.css b/quadratic-client/src/app/ui/menus/CodeEditor/panels/ResizeControl.css
index 0b42c97b89..186e0ef7b0 100644
--- a/quadratic-client/src/app/ui/menus/CodeEditor/panels/ResizeControl.css
+++ b/quadratic-client/src/app/ui/menus/CodeEditor/panels/ResizeControl.css
@@ -1,6 +1,6 @@
 /* Shared styles for the 1px line */
 .resize-control {
-  background-color: var(--resize-control-background);
+  background-color: hsl(var(--border));
   z-index: 1;
 }
 
@@ -45,7 +45,7 @@
 }
 .resize-control--is-dragging:before,
 .resize-control:hover:not(.resize-control--disabled):before {
-  background-color: var(--resize-control-highlight);
+  background-color: hsl(var(--primary));
   z-index: 100;
   /* Delay the transition effect so it only appears when the user shows intent */
   transition: 0.2s ease background-color 300ms;
diff --git a/quadratic-client/src/app/ui/menus/CodeEditor/panels/ResizeControl.tsx b/quadratic-client/src/app/ui/menus/CodeEditor/panels/ResizeControl.tsx
index c473c879fc..3df3770b3f 100644
--- a/quadratic-client/src/app/ui/menus/CodeEditor/panels/ResizeControl.tsx
+++ b/quadratic-client/src/app/ui/menus/CodeEditor/panels/ResizeControl.tsx
@@ -1,4 +1,3 @@
-import { colors } from '../../../../theme/colors';
 import './ResizeControl.css';
 
 interface ResizeControlProps {
@@ -17,12 +16,7 @@ export function ResizeControl({ disabled, setState, position, style }: ResizeCon
     <div
       className={`resize-control resize-control--position-${position} ${disabled ? 'resize-control--disabled' : ''}`}
       data-position={position}
-      style={{
-        ...style,
-        // @ts-expect-error typescript doesn't like us setting CSS custom properties
-        '--resize-control-highlight': colors.quadraticPrimary,
-        '--resize-control-background': colors.mediumGray,
-      }}
+      style={style}
       onMouseDown={(e) => {
         if (disabled) return;
 
diff --git a/quadratic-client/src/app/ui/menus/CommandPalette/CommandPalette.tsx b/quadratic-client/src/app/ui/menus/CommandPalette/CommandPalette.tsx
index 23119dc897..1aa1bd9961 100644
--- a/quadratic-client/src/app/ui/menus/CommandPalette/CommandPalette.tsx
+++ b/quadratic-client/src/app/ui/menus/CommandPalette/CommandPalette.tsx
@@ -1,3 +1,5 @@
+import { defaultActionSpec } from '@/app/actions/defaultActionsSpec';
+import { keyboardShortcutEnumToDisplay } from '@/app/helpers/keyboardShortcutsDisplay';
 import { useRootRouteLoaderData } from '@/routes/_root';
 import { useFileRouteLoaderData } from '@/shared/hooks/useFileRouteLoaderData';
 import { CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandList } from '@/shared/shadcn/ui/command';
@@ -6,7 +8,7 @@ import mixpanel from 'mixpanel-browser';
 import { useCallback, useEffect, useState } from 'react';
 import { useRecoilState } from 'recoil';
 import { editorInteractionStateAtom } from '../../../atoms/editorInteractionStateAtom';
-import { Command } from './CommandPaletteListItem';
+import { Command, CommandPaletteListItem, CommandPaletteListItemDynamicProps } from './CommandPaletteListItem';
 import { BordersHook } from './commands/Borders';
 import codeCommandGroup from './commands/Code';
 import { columnRowCommandGroup } from './commands/ColumnRow';
@@ -16,7 +18,6 @@ import fileCommandGroup from './commands/File';
 import formatCommandGroup from './commands/Format';
 import helpCommandGroup from './commands/Help';
 import importCommandGroup from './commands/Import';
-import searchCommandGroup from './commands/Search';
 import getSheetCommandGroup from './commands/Sheets';
 import textCommandGroup from './commands/Text';
 import { validationCommandGroup } from './commands/Validation';
@@ -65,7 +66,6 @@ export const CommandPalette = () => {
     getSheetCommandGroup(),
     helpCommandGroup,
     codeCommandGroup,
-    searchCommandGroup,
     columnRowCommandGroup,
     validationCommandGroup,
   ];
@@ -93,7 +93,37 @@ export const CommandPalette = () => {
       <CommandList>
         {commandGroups.map(({ heading, commands }) => {
           let filteredCommands: Array<Command & { fuzzysortResult: any }> = [];
-          commands.forEach((command, i) => {
+          commands.forEach((commandOrAction, i) => {
+            // Right now, we are in the process of centralizing all actions.
+            // That means for each command palette item will either be:
+            // 1) a `Command` type (the OLD way)
+            // 2) an `Action` type (the new way)
+            // Once we convert all actions to the new format, we can remove this
+            // intermediate step of converting an `Action` to a `Command` and
+            // just expect that they'll all be `Action` types.
+            let command;
+            if (typeof commandOrAction === 'string') {
+              const actionSpec = defaultActionSpec[commandOrAction];
+              command = {
+                ...actionSpec,
+                label: actionSpec.labelVerbose ? actionSpec.labelVerbose : actionSpec.label,
+                Component: (props: CommandPaletteListItemDynamicProps) => (
+                  <CommandPaletteListItem
+                    {...props}
+                    // This works fine for `run` functions that don't require anything
+                    // But how will we handle the case where we want some actions require
+                    // different args to the `run` function?
+                    // @ts-expect-error
+                    action={actionSpec.run}
+                    icon={'Icon' in actionSpec && actionSpec.Icon ? <actionSpec.Icon /> : null}
+                    shortcut={keyboardShortcutEnumToDisplay(commandOrAction)}
+                  />
+                ),
+              };
+            } else {
+              command = commandOrAction;
+            }
+
             const { label, keywords, isAvailable } = command;
 
             // Is the command even available?
diff --git a/quadratic-client/src/app/ui/menus/CommandPalette/CommandPaletteListItem.tsx b/quadratic-client/src/app/ui/menus/CommandPalette/CommandPaletteListItem.tsx
index 6c61c4c8b6..faf2f0950f 100644
--- a/quadratic-client/src/app/ui/menus/CommandPalette/CommandPaletteListItem.tsx
+++ b/quadratic-client/src/app/ui/menus/CommandPalette/CommandPaletteListItem.tsx
@@ -1,11 +1,12 @@
 import { GenericAction } from '@/app/actions';
+import { Action } from '@/app/actions/actions';
 import { CommandItem, CommandShortcut } from '@/shared/shadcn/ui/command';
 import fuzzysort from 'fuzzysort';
 import mixpanel from 'mixpanel-browser';
 
 export type CommandGroup = {
   heading: string;
-  commands: Command[];
+  commands: Array<Command | Action>;
 };
 
 export type Command = {
diff --git a/quadratic-client/src/app/ui/menus/CommandPalette/commands/Borders.tsx b/quadratic-client/src/app/ui/menus/CommandPalette/commands/Borders.tsx
index 06f16df811..d31087f976 100644
--- a/quadratic-client/src/app/ui/menus/CommandPalette/commands/Borders.tsx
+++ b/quadratic-client/src/app/ui/menus/CommandPalette/commands/Borders.tsx
@@ -1,17 +1,17 @@
+import { ChangeBorder, useBorders, UseBordersResults } from '@/app/ui/hooks/useBorders';
 import {
   BorderAllIcon,
   BorderBottomIcon,
+  BorderClearIcon,
   BorderHorizontalIcon,
   BorderInnerIcon,
   BorderLeftIcon,
-  BorderNoneIcon,
   BorderOuterIcon,
   BorderRightIcon,
   BorderTopIcon,
   BorderVerticalIcon,
-} from '@/app/ui/icons';
+} from '@/shared/components/Icons';
 import { isAvailableBecauseCanEditFile } from '../../../../actions';
-import { ChangeBorder, UseBordersResults, useBorders } from '../../TopBar/SubMenus/useBorders';
 import { CommandGroup, CommandPaletteListItem } from '../CommandPaletteListItem';
 
 export const BordersHook = (): CommandGroup => {
@@ -37,7 +37,7 @@ export const BordersHook = (): CommandGroup => {
           return (
             <CommandPaletteListItem
               {...props}
-              icon={<BorderNoneIcon />}
+              icon={<BorderClearIcon />}
               action={() => {
                 borders.clearBorders();
               }}
diff --git a/quadratic-client/src/app/ui/menus/CommandPalette/commands/Connections.tsx b/quadratic-client/src/app/ui/menus/CommandPalette/commands/Connections.tsx
index 3f476710c3..e923b5b572 100644
--- a/quadratic-client/src/app/ui/menus/CommandPalette/commands/Connections.tsx
+++ b/quadratic-client/src/app/ui/menus/CommandPalette/commands/Connections.tsx
@@ -1,5 +1,6 @@
 import { isAvailableBecauseFileLocationIsAccessibleAndWriteable } from '@/app/actions';
 import { editorInteractionStateAtom } from '@/app/atoms/editorInteractionStateAtom';
+import { DatabaseIcon } from '@/shared/components/Icons';
 import { useSetRecoilState } from 'recoil';
 import { CommandGroup, CommandPaletteListItem, CommandPaletteListItemDynamicProps } from '../CommandPaletteListItem';
 
@@ -18,6 +19,7 @@ const commands: CommandGroup = {
             action={() => {
               setEditorInteractionState((prev) => ({ ...prev, showCellTypeMenu: true }));
             }}
+            icon={<DatabaseIcon />}
           />
         );
       },
@@ -34,6 +36,7 @@ const commands: CommandGroup = {
             action={() => {
               setEditorInteractionState((prev) => ({ ...prev, showConnectionsMenu: true }));
             }}
+            icon={<DatabaseIcon />}
           />
         );
       },
diff --git a/quadratic-client/src/app/ui/menus/CommandPalette/commands/Edit.tsx b/quadratic-client/src/app/ui/menus/CommandPalette/commands/Edit.tsx
index 3da563df05..83df9c5250 100644
--- a/quadratic-client/src/app/ui/menus/CommandPalette/commands/Edit.tsx
+++ b/quadratic-client/src/app/ui/menus/CommandPalette/commands/Edit.tsx
@@ -1,129 +1,23 @@
-import {
-  copyAction,
-  cutAction,
-  downloadSelectionAsCsvAction,
-  pasteAction,
-  pasteActionFormats,
-  pasteActionValues,
-  redoAction,
-  undoAction,
-} from '@/app/actions';
-import { editorInteractionStateAtom } from '@/app/atoms/editorInteractionStateAtom';
-import {
-  copySelectionToPNG,
-  copyToClipboard,
-  cutToClipboard,
-  fullClipboardSupport,
-  pasteFromClipboard,
-} from '@/app/grid/actions/clipboard/clipboard';
-import { KeyboardSymbols } from '@/app/helpers/keyboardSymbols';
-import { useFileContext } from '@/app/ui/components/FileProvider';
-import { ClipboardIcon, CopyIcon, RedoIcon, ScissorsIcon, UndoIcon } from '@/app/ui/icons';
-import { quadraticCore } from '@/app/web-workers/quadraticCore/quadraticCore';
+import { Action } from '@/app/actions/actions';
+import { copySelectionToPNG, fullClipboardSupport } from '@/app/grid/actions/clipboard/clipboard';
 import { useGlobalSnackbar } from '@/shared/components/GlobalSnackbarProvider';
-import { isMac } from '@/shared/utils/isMac';
-import { useRecoilState } from 'recoil';
+import { CopyAsPng } from '@/shared/components/Icons';
+import { KeyboardSymbols } from '../../../../helpers/keyboardSymbols';
 import { CommandGroup, CommandPaletteListItem } from '../CommandPaletteListItem';
 
 const data: CommandGroup = {
   heading: 'Edit',
   commands: [
-    {
-      label: undoAction.label,
-      isAvailable: undoAction.isAvailable,
-      Component: (props) => {
-        return (
-          <CommandPaletteListItem
-            {...props}
-            action={quadraticCore.undo}
-            icon={<UndoIcon />}
-            shortcut={KeyboardSymbols.Command + 'Z'}
-          />
-        );
-      },
-    },
-    {
-      label: redoAction.label,
-      isAvailable: redoAction.isAvailable,
-      Component: (props) => {
-        return (
-          <CommandPaletteListItem
-            {...props}
-            action={quadraticCore.redo}
-            icon={<RedoIcon />}
-            shortcutModifiers={isMac ? [KeyboardSymbols.Command, KeyboardSymbols.Shift] : [KeyboardSymbols.Command]}
-            shortcut={isMac ? 'Z' : 'Y'}
-          />
-        );
-      },
-    },
-
-    {
-      label: cutAction.label,
-      isAvailable: cutAction.isAvailable,
-      Component: (props) => {
-        return (
-          <CommandPaletteListItem
-            {...props}
-            action={cutToClipboard}
-            icon={<ScissorsIcon />}
-            label={cutAction.label}
-            shortcut={KeyboardSymbols.Command + 'X'}
-          />
-        );
-      },
-    },
-
-    {
-      label: copyAction.label,
-      Component: (props) => {
-        return (
-          <CommandPaletteListItem
-            {...props}
-            action={copyToClipboard}
-            icon={<CopyIcon />}
-            shortcut={KeyboardSymbols.Command + 'C'}
-          />
-        );
-      },
-    },
-
-    {
-      label: pasteAction.label,
-      isAvailable: pasteAction.isAvailable,
-      Component: (props) => {
-        return (
-          <CommandPaletteListItem
-            {...props}
-            action={pasteFromClipboard}
-            icon={<ClipboardIcon />}
-            shortcut={KeyboardSymbols.Command + 'V'}
-          />
-        );
-      },
-    },
-
-    {
-      label: pasteActionValues.label,
-      isAvailable: pasteActionValues.isAvailable,
-      Component: (props) => {
-        return (
-          <CommandPaletteListItem
-            {...props}
-            action={() => pasteFromClipboard('Values')}
-            shortcut="V"
-            shortcutModifiers={[KeyboardSymbols.Command, KeyboardSymbols.Shift]}
-          />
-        );
-      },
-    },
-    {
-      label: pasteActionFormats.label,
-      isAvailable: pasteActionFormats.isAvailable,
-      Component: (props) => {
-        return <CommandPaletteListItem {...props} action={() => pasteFromClipboard('Formats')} />;
-      },
-    },
+    Action.Undo,
+    Action.Redo,
+    Action.Cut,
+    Action.Copy,
+    Action.Paste,
+    Action.PasteValuesOnly,
+    Action.PasteFormattingOnly,
+    Action.ShowGoToMenu,
+    Action.FindInCurrentSheet,
+    Action.FindInAllSheets,
     {
       label: 'Copy selection as PNG',
       isAvailable: () => fullClipboardSupport(),
@@ -133,45 +27,14 @@ const data: CommandGroup = {
           <CommandPaletteListItem
             {...props}
             action={() => copySelectionToPNG(addGlobalSnackbar)}
-            // icon={<ImageIcon />}
-            shortcutModifiers={[KeyboardSymbols.Command, KeyboardSymbols.Shift]}
+            icon={<CopyAsPng />}
+            shortcutModifiers={[KeyboardSymbols.Shift, KeyboardSymbols.Command]}
             shortcut="C"
           />
         );
       },
     },
-    {
-      label: downloadSelectionAsCsvAction.label,
-      Component: (props) => {
-        const { name: fileName } = useFileContext();
-        return (
-          <CommandPaletteListItem
-            {...props}
-            action={() => {
-              downloadSelectionAsCsvAction.run({ fileName });
-            }}
-            shortcut="E"
-            shortcutModifiers={[KeyboardSymbols.Command, KeyboardSymbols.Shift]}
-          />
-        );
-      },
-    },
-    {
-      label: 'Go to cell',
-      Component: (props) => {
-        const [editorInteractionState, setEditorInteractionState] = useRecoilState(editorInteractionStateAtom);
-        return (
-          <CommandPaletteListItem
-            {...props}
-            action={() =>
-              setEditorInteractionState({ ...editorInteractionState, showCommandPalette: false, showGoToMenu: true })
-            }
-            // icon={<ThickArrowRightIcon />}
-            shortcut={KeyboardSymbols.Command + 'G'}
-          />
-        );
-      },
-    },
+    Action.DownloadAsCsv,
   ],
 };
 
diff --git a/quadratic-client/src/app/ui/menus/CommandPalette/commands/File.tsx b/quadratic-client/src/app/ui/menus/CommandPalette/commands/File.tsx
index 25c5e3936d..4a22bd2974 100644
--- a/quadratic-client/src/app/ui/menus/CommandPalette/commands/File.tsx
+++ b/quadratic-client/src/app/ui/menus/CommandPalette/commands/File.tsx
@@ -1,18 +1,18 @@
-import { createNewFileAction, deleteFile, downloadFileAction, duplicateFileAction } from '@/app/actions';
+import { createNewFileAction, deleteFile, duplicateFileAction, isAvailableBecauseCanEditFile } from '@/app/actions';
+import { Action } from '@/app/actions/actions';
+import { defaultActionSpec } from '@/app/actions/defaultActionsSpec';
 import { editorInteractionStateAtom } from '@/app/atoms/editorInteractionStateAtom';
 import { useFileContext } from '@/app/ui/components/FileProvider';
-import {
-  FileDeleteIcon,
-  FileDownloadIcon,
-  FileDuplicateIcon,
-  // FileDeleteIcon, FileDownloadIcon, FileDuplicateIcon,
-  FileIcon,
-} from '@/app/ui/icons';
 import { useGlobalSnackbar } from '@/shared/components/GlobalSnackbarProvider';
+import { DeleteIcon, DraftIcon, FileCopyIcon } from '@/shared/components/Icons';
 import { useParams, useSubmit } from 'react-router-dom';
 import { useSetRecoilState } from 'recoil';
 import { CommandGroup, CommandPaletteListItem } from '../CommandPaletteListItem';
 
+// TODO: make the types better here so it knows whether this exists
+const renameFileActionSpec = defaultActionSpec[Action.FileRename];
+const downloadFileActionSpec = defaultActionSpec[Action.FileDownload];
+
 const commands: CommandGroup = {
   heading: 'File',
   commands: [
@@ -23,10 +23,9 @@ const commands: CommandGroup = {
       Component: (props) => {
         const setEditorInteractionState = useSetRecoilState(editorInteractionStateAtom);
         const action = () => createNewFileAction.run({ setEditorInteractionState });
-        return <CommandPaletteListItem {...props} icon={<FileIcon />} action={action} />;
+        return <CommandPaletteListItem {...props} icon={<DraftIcon />} action={action} />;
       },
     },
-
     {
       label: duplicateFileAction.label,
       isAvailable: duplicateFileAction.isAvailable,
@@ -36,19 +35,32 @@ const commands: CommandGroup = {
         const action = () => {
           duplicateFileAction.run({ uuid, submit });
         };
-        return <CommandPaletteListItem {...props} action={action} icon={<FileDuplicateIcon />} />;
+        return <CommandPaletteListItem {...props} action={action} icon={<FileCopyIcon />} />;
       },
     },
     {
-      label: downloadFileAction.label,
-      isAvailable: downloadFileAction.isAvailable,
+      label: downloadFileActionSpec.label,
+      isAvailable: downloadFileActionSpec.isAvailable,
       Component: (props) => {
         const { name } = useFileContext();
         return (
           <CommandPaletteListItem
             {...props}
-            action={() => downloadFileAction.run({ name })}
-            icon={<FileDownloadIcon />}
+            action={() => downloadFileActionSpec.run({ name })}
+            icon={downloadFileActionSpec?.Icon && <downloadFileActionSpec.Icon />}
+          />
+        );
+      },
+    },
+    {
+      label: renameFileActionSpec?.label ?? '',
+      isAvailable: isAvailableBecauseCanEditFile,
+      Component: (props) => {
+        return (
+          <CommandPaletteListItem
+            {...props}
+            action={() => renameFileActionSpec?.run()}
+            icon={renameFileActionSpec?.Icon && <renameFileActionSpec.Icon />}
           />
         );
       },
@@ -60,7 +72,7 @@ const commands: CommandGroup = {
         const { uuid } = useParams() as { uuid: string };
         const { addGlobalSnackbar } = useGlobalSnackbar();
         const action = () => deleteFile.run({ uuid, addGlobalSnackbar });
-        return <CommandPaletteListItem {...props} action={action} icon={<FileDeleteIcon />} />;
+        return <CommandPaletteListItem {...props} action={action} icon={<DeleteIcon />} />;
       },
     },
   ],
diff --git a/quadratic-client/src/app/ui/menus/CommandPalette/commands/Format.tsx b/quadratic-client/src/app/ui/menus/CommandPalette/commands/Format.tsx
index e22c55395d..03ffe513c0 100644
--- a/quadratic-client/src/app/ui/menus/CommandPalette/commands/Format.tsx
+++ b/quadratic-client/src/app/ui/menus/CommandPalette/commands/Format.tsx
@@ -1,13 +1,13 @@
 import {
+  CurrencyIcon,
   DecimalDecreaseIcon,
   DecimalIncreaseIcon,
-  DollarIcon,
-  FunctionIcon,
-  MagicWandIcon,
+  FormatClearIcon,
+  FormatNumberAutomaticIcon,
+  FormatToggleCommasIcon,
   PercentIcon,
-  QuoteIcon,
-  TextNoneIcon,
-} from '@/app/ui/icons';
+  ScientificIcon,
+} from '@/shared/components/Icons';
 import { isAvailableBecauseCanEditFile } from '../../../../actions';
 import { KeyboardSymbols } from '../../../../helpers/keyboardSymbols';
 import {
@@ -19,7 +19,7 @@ import {
   textFormatSetCurrency,
   textFormatSetExponential,
   textFormatSetPercentage,
-} from '../../TopBar/SubMenus/formatCells';
+} from '../../../helpers/formatCells';
 import { CommandGroup, CommandPaletteListItem } from '../CommandPaletteListItem';
 import DateRangeIcon from '@mui/icons-material/DateRange';
 
@@ -33,7 +33,7 @@ const commands: CommandGroup = {
         return (
           <CommandPaletteListItem
             {...props}
-            icon={<TextNoneIcon />}
+            icon={<FormatClearIcon />}
             action={clearFormattingAndBorders}
             shortcut="\"
             shortcutModifiers={KeyboardSymbols.Command}
@@ -45,14 +45,16 @@ const commands: CommandGroup = {
       label: 'Automatic',
       isAvailable: isAvailableBecauseCanEditFile,
       Component: (props) => {
-        return <CommandPaletteListItem {...props} action={removeCellNumericFormat} icon={<MagicWandIcon />} />;
+        return (
+          <CommandPaletteListItem {...props} action={removeCellNumericFormat} icon={<FormatNumberAutomaticIcon />} />
+        );
       },
     },
     {
       label: 'Currency',
       isAvailable: isAvailableBecauseCanEditFile,
       Component: (props) => {
-        return <CommandPaletteListItem {...props} action={textFormatSetCurrency} icon={<DollarIcon />} />;
+        return <CommandPaletteListItem {...props} action={textFormatSetCurrency} icon={<CurrencyIcon />} />;
       },
     },
     {
@@ -66,14 +68,14 @@ const commands: CommandGroup = {
       label: 'Scientific',
       isAvailable: isAvailableBecauseCanEditFile,
       Component: (props) => {
-        return <CommandPaletteListItem {...props} action={textFormatSetExponential} icon={<FunctionIcon />} />;
+        return <CommandPaletteListItem {...props} action={textFormatSetExponential} icon={<ScientificIcon />} />;
       },
     },
     {
       label: 'Toggle commas',
       isAvailable: isAvailableBecauseCanEditFile,
       Component: (props) => {
-        return <CommandPaletteListItem {...props} action={setCellCommas} icon={<QuoteIcon />} />;
+        return <CommandPaletteListItem {...props} action={setCellCommas} icon={<FormatToggleCommasIcon />} />;
       },
     },
     {
diff --git a/quadratic-client/src/app/ui/menus/CommandPalette/commands/Help.tsx b/quadratic-client/src/app/ui/menus/CommandPalette/commands/Help.tsx
index d357754fa9..964f6090a4 100644
--- a/quadratic-client/src/app/ui/menus/CommandPalette/commands/Help.tsx
+++ b/quadratic-client/src/app/ui/menus/CommandPalette/commands/Help.tsx
@@ -1,40 +1,53 @@
-import { ExternalLinkIcon, FeedbackIcon } from '@/app/ui/icons';
-import { useSetRecoilState } from 'recoil';
-import { provideFeedbackAction, viewDocsAction } from '../../../../actions';
-import { editorInteractionStateAtom } from '../../../../atoms/editorInteractionStateAtom';
+import { Action } from '@/app/actions/actions';
+import { defaultActionSpec } from '@/app/actions/defaultActionsSpec';
 import { CommandGroup, CommandPaletteListItem } from '../CommandPaletteListItem';
 
+const docsAction = defaultActionSpec[Action.HelpDocs];
+const feedbackAction = defaultActionSpec[Action.HelpFeedback];
+const contactAction = defaultActionSpec[Action.HelpContactUs];
+
 const commands: CommandGroup = {
   heading: 'Help',
   commands: [
     {
-      label: viewDocsAction.label,
+      label: docsAction.label,
       Component: (props) => (
         <CommandPaletteListItem
           {...props}
-          icon={<ExternalLinkIcon />}
+          icon={docsAction.Icon ? <docsAction.Icon /> : undefined}
           action={() => {
-            viewDocsAction.run();
+            docsAction.run();
           }}
         />
       ),
     },
     {
-      label: provideFeedbackAction.label,
-      isAvailable: provideFeedbackAction.isAvailable,
+      label: feedbackAction.label,
+      isAvailable: feedbackAction.isAvailable,
       Component: (props) => {
-        const setEditorInteractionState = useSetRecoilState(editorInteractionStateAtom);
         return (
           <CommandPaletteListItem
             {...props}
-            icon={<FeedbackIcon />}
+            icon={feedbackAction.Icon ? <feedbackAction.Icon /> : undefined}
             action={() => {
-              provideFeedbackAction.run({ setEditorInteractionState });
+              feedbackAction.run();
             }}
           />
         );
       },
     },
+    {
+      label: contactAction.label,
+      Component: (props) => (
+        <CommandPaletteListItem
+          {...props}
+          icon={contactAction.Icon ? <contactAction.Icon /> : undefined}
+          action={() => {
+            contactAction.run();
+          }}
+        />
+      ),
+    },
   ],
 };
 
diff --git a/quadratic-client/src/app/ui/menus/CommandPalette/commands/Search.tsx b/quadratic-client/src/app/ui/menus/CommandPalette/commands/Search.tsx
deleted file mode 100644
index dcfe5b589d..0000000000
--- a/quadratic-client/src/app/ui/menus/CommandPalette/commands/Search.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { findInSheet, findInSheets } from '@/app/actions';
-import { editorInteractionStateAtom } from '@/app/atoms/editorInteractionStateAtom';
-import { useSetRecoilState } from 'recoil';
-import { KeyboardSymbols } from '../../../../helpers/keyboardSymbols';
-import { CommandGroup, CommandPaletteListItem } from '../CommandPaletteListItem';
-
-const commands: CommandGroup = {
-  heading: 'Search',
-  commands: [
-    {
-      label: findInSheet.label,
-      keywords: ['search'],
-      Component: (props) => {
-        const setEditorInteractionState = useSetRecoilState(editorInteractionStateAtom);
-        return (
-          <CommandPaletteListItem
-            {...props}
-            action={() => setEditorInteractionState((state) => ({ ...state, showSearch: true }))}
-            shortcut="F"
-            shortcutModifiers={KeyboardSymbols.Command}
-          />
-        );
-      },
-    },
-    {
-      label: findInSheets.label,
-      keywords: ['search'],
-      Component: (props) => {
-        const setEditorInteractionState = useSetRecoilState(editorInteractionStateAtom);
-        return (
-          <CommandPaletteListItem
-            {...props}
-            action={() => setEditorInteractionState((state) => ({ ...state, showSearch: { sheet_id: undefined } }))}
-            shortcut="F"
-            shortcutModifiers={[KeyboardSymbols.Shift, KeyboardSymbols.Command]}
-          />
-        );
-      },
-    },
-  ],
-};
-
-export default commands;
diff --git a/quadratic-client/src/app/ui/menus/CommandPalette/commands/Sheets.tsx b/quadratic-client/src/app/ui/menus/CommandPalette/commands/Sheets.tsx
index ae93cc0af9..9615632e95 100644
--- a/quadratic-client/src/app/ui/menus/CommandPalette/commands/Sheets.tsx
+++ b/quadratic-client/src/app/ui/menus/CommandPalette/commands/Sheets.tsx
@@ -1,6 +1,6 @@
 import { events } from '@/app/events/events';
-import { SheetDeleteIcon, SheetDuplicateIcon, SheetGoToIcon, SheetIcon } from '@/app/ui/icons';
 import { quadraticCore } from '@/app/web-workers/quadraticCore/quadraticCore';
+import { SheetIcon } from '@/shared/components/Icons';
 import { useEffect, useMemo, useState } from 'react';
 import { isAvailableBecauseCanEditFile } from '../../../../actions';
 import { sheets } from '../../../../grid/controller/Sheets';
@@ -37,7 +37,7 @@ const ListItems = () => {
               <CommandPaletteListItem
                 {...props}
                 action={() => quadraticCore.duplicateSheet(sheets.sheet.id, sheets.getCursorPosition())}
-                icon={<SheetDuplicateIcon />}
+                icon={<SheetIcon />}
               />
             );
           },
@@ -55,7 +55,7 @@ const ListItems = () => {
                   }
                   setTimeout(focusGrid);
                 }}
-                icon={<SheetDeleteIcon />}
+                icon={<SheetIcon />}
               />
             );
           },
@@ -70,7 +70,7 @@ const ListItems = () => {
                 return (
                   <CommandPaletteListItem
                     {...props}
-                    icon={<SheetGoToIcon style={{ color: sheet.color ? sheet.color : 'currentColor' }} />}
+                    icon={<SheetIcon style={{ color: sheet.color ? sheet.color : 'currentColor' }} />}
                     action={() => (sheets.current = sheet.id)}
                   />
                 );
diff --git a/quadratic-client/src/app/ui/menus/CommandPalette/commands/Text.tsx b/quadratic-client/src/app/ui/menus/CommandPalette/commands/Text.tsx
index adb653b1dc..d262772f12 100644
--- a/quadratic-client/src/app/ui/menus/CommandPalette/commands/Text.tsx
+++ b/quadratic-client/src/app/ui/menus/CommandPalette/commands/Text.tsx
@@ -1,19 +1,19 @@
+import { setAlign, setBold, setItalic, setVerticalAlign, setWrap } from '@/app/ui/helpers/formatCells';
 import {
-  FontBoldIcon,
-  FontItalicIcon,
-  TextAlignCenterIcon,
-  TextAlignLeftIcon,
-  TextAlignRightIcon,
-  TextClipIcon,
-  TextOverflowIcon,
-  TextVerticalAlignBottomIcon,
-  TextVerticalAlignMiddleIcon,
-  TextVerticalAlignTopIcon,
-  WrapTextIcon,
-} from '@/app/ui/icons';
+  FormatAlignCenterIcon,
+  FormatAlignLeftIcon,
+  FormatAlignRightIcon,
+  FormatBoldIcon,
+  FormatItalicIcon,
+  FormatTextClipIcon,
+  FormatTextOverflowIcon,
+  FormatTextWrapIcon,
+  VerticalAlignBottomIcon,
+  VerticalAlignMiddleIcon,
+  VerticalAlignTopIcon,
+} from '@/shared/components/Icons';
 import { isAvailableBecauseCanEditFile } from '../../../../actions';
 import { KeyboardSymbols } from '../../../../helpers/keyboardSymbols';
-import { setAlign, setBold, setItalic, setVerticalAlign, setWrap } from '../../TopBar/SubMenus/formatCells';
 import { CommandGroup, CommandPaletteListItem } from '../CommandPaletteListItem';
 
 const commands: CommandGroup = {
@@ -26,7 +26,7 @@ const commands: CommandGroup = {
         return (
           <CommandPaletteListItem
             {...props}
-            icon={<FontBoldIcon />}
+            icon={<FormatBoldIcon />}
             action={async () => {
               setBold();
             }}
@@ -43,7 +43,7 @@ const commands: CommandGroup = {
         return (
           <CommandPaletteListItem
             {...props}
-            icon={<FontItalicIcon />}
+            icon={<FormatItalicIcon />}
             action={async () => setItalic()}
             shortcut="I"
             shortcutModifiers={KeyboardSymbols.Command}
@@ -55,21 +55,21 @@ const commands: CommandGroup = {
       label: 'Left align',
       isAvailable: isAvailableBecauseCanEditFile,
       Component: (props) => {
-        return <CommandPaletteListItem {...props} icon={<TextAlignLeftIcon />} action={() => setAlign('left')} />;
+        return <CommandPaletteListItem {...props} icon={<FormatAlignLeftIcon />} action={() => setAlign('left')} />;
       },
     },
     {
       label: 'Center align',
       isAvailable: isAvailableBecauseCanEditFile,
       Component: (props) => {
-        return <CommandPaletteListItem {...props} icon={<TextAlignCenterIcon />} action={() => setAlign('center')} />;
+        return <CommandPaletteListItem {...props} icon={<FormatAlignCenterIcon />} action={() => setAlign('center')} />;
       },
     },
     {
       label: 'Right align',
       isAvailable: isAvailableBecauseCanEditFile,
       Component: (props) => {
-        return <CommandPaletteListItem {...props} icon={<TextAlignRightIcon />} action={() => setAlign('right')} />;
+        return <CommandPaletteListItem {...props} icon={<FormatAlignRightIcon />} action={() => setAlign('right')} />;
       },
     },
     {
@@ -77,11 +77,7 @@ const commands: CommandGroup = {
       isAvailable: isAvailableBecauseCanEditFile,
       Component: (props) => {
         return (
-          <CommandPaletteListItem
-            {...props}
-            icon={<TextVerticalAlignTopIcon />}
-            action={() => setVerticalAlign('top')}
-          />
+          <CommandPaletteListItem {...props} icon={<VerticalAlignTopIcon />} action={() => setVerticalAlign('top')} />
         );
       },
     },
@@ -92,7 +88,7 @@ const commands: CommandGroup = {
         return (
           <CommandPaletteListItem
             {...props}
-            icon={<TextVerticalAlignMiddleIcon />}
+            icon={<VerticalAlignMiddleIcon />}
             action={() => setVerticalAlign('middle')}
           />
         );
@@ -105,7 +101,7 @@ const commands: CommandGroup = {
         return (
           <CommandPaletteListItem
             {...props}
-            icon={<TextVerticalAlignBottomIcon />}
+            icon={<VerticalAlignBottomIcon />}
             action={() => setVerticalAlign('bottom')}
           />
         );
@@ -115,21 +111,23 @@ const commands: CommandGroup = {
       label: 'Text overflow',
       isAvailable: isAvailableBecauseCanEditFile,
       Component: (props) => {
-        return <CommandPaletteListItem {...props} icon={<TextOverflowIcon />} action={() => setWrap('overflow')} />;
+        return (
+          <CommandPaletteListItem {...props} icon={<FormatTextOverflowIcon />} action={() => setWrap('overflow')} />
+        );
       },
     },
     {
       label: 'Text wrap',
       isAvailable: isAvailableBecauseCanEditFile,
       Component: (props) => {
-        return <CommandPaletteListItem {...props} icon={<WrapTextIcon />} action={() => setWrap('wrap')} />;
+        return <CommandPaletteListItem {...props} icon={<FormatTextWrapIcon />} action={() => setWrap('wrap')} />;
       },
     },
     {
       label: 'Text clip',
       isAvailable: isAvailableBecauseCanEditFile,
       Component: (props) => {
-        return <CommandPaletteListItem {...props} icon={<TextClipIcon />} action={() => setWrap('clip')} />;
+        return <CommandPaletteListItem {...props} icon={<FormatTextClipIcon />} action={() => setWrap('clip')} />;
       },
     },
   ],
diff --git a/quadratic-client/src/app/ui/menus/CommandPalette/commands/Validation.tsx b/quadratic-client/src/app/ui/menus/CommandPalette/commands/Validation.tsx
index 2479810a7c..a479841390 100644
--- a/quadratic-client/src/app/ui/menus/CommandPalette/commands/Validation.tsx
+++ b/quadratic-client/src/app/ui/menus/CommandPalette/commands/Validation.tsx
@@ -1,24 +1,7 @@
-import { validationAction } from '../../../../actions';
-import { editorInteractionStateAtom } from '../../../../atoms/editorInteractionStateAtom';
-import { CommandGroup, CommandPaletteListItem } from '../CommandPaletteListItem';
-import { useSetRecoilState } from 'recoil';
+import { Action } from '@/app/actions/actions';
+import { CommandGroup } from '../CommandPaletteListItem';
 
 export const validationCommandGroup: CommandGroup = {
-  heading: 'Data Validations',
-  commands: [
-    {
-      label: validationAction.label,
-      Component: (props) => {
-        const setEditorInteractionState = useSetRecoilState(editorInteractionStateAtom);
-        return (
-          <CommandPaletteListItem
-            {...props}
-            action={() => {
-              setEditorInteractionState((old) => ({ ...old, showValidation: true }));
-            }}
-          />
-        );
-      },
-    },
-  ],
+  heading: 'Data validation',
+  commands: [Action.InsertCheckbox, Action.InsertDropdown, Action.ToggleDataValidation],
 };
diff --git a/quadratic-client/src/app/ui/menus/CommandPalette/commands/View.tsx b/quadratic-client/src/app/ui/menus/CommandPalette/commands/View.tsx
index c4be170534..85bfbbc58f 100644
--- a/quadratic-client/src/app/ui/menus/CommandPalette/commands/View.tsx
+++ b/quadratic-client/src/app/ui/menus/CommandPalette/commands/View.tsx
@@ -1,8 +1,8 @@
 import { zoomIn, zoomOut, zoomTo100, zoomToFit, zoomToSelection } from '@/app/gridGL/helpers/zoom';
 import { KeyboardSymbols } from '@/app/helpers/keyboardSymbols';
-import { ZoomInIcon, ZoomOutIcon } from '@/app/ui/icons';
+import { ZoomInIcon, ZoomOutIcon } from '@/shared/components/Icons';
 import { Checkbox } from '@/shared/shadcn/ui/checkbox';
-import { useGridSettings } from '../../TopBar/SubMenus/useGridSettings';
+import { useGridSettings } from '../../../hooks/useGridSettings';
 import { CommandGroup, CommandPaletteListItem } from '../CommandPaletteListItem';
 
 const commands: CommandGroup = {
diff --git a/quadratic-client/src/app/ui/menus/ContextMenu/FloatingContextMenu.tsx b/quadratic-client/src/app/ui/menus/ContextMenu/FloatingContextMenu.tsx
deleted file mode 100644
index 37a5f48afb..0000000000
--- a/quadratic-client/src/app/ui/menus/ContextMenu/FloatingContextMenu.tsx
+++ /dev/null
@@ -1,788 +0,0 @@
-import { downloadSelectionAsCsvAction, hasPermissionToEditFile } from '@/app/actions';
-import { editorInteractionStateAtom } from '@/app/atoms/editorInteractionStateAtom';
-import { events } from '@/app/events/events';
-import { copySelectionToPNG, fullClipboardSupport, pasteFromClipboard } from '@/app/grid/actions/clipboard/clipboard';
-import { sheets } from '@/app/grid/controller/Sheets';
-import { inlineEditorHandler } from '@/app/gridGL/HTMLGrid/inlineEditor/inlineEditorHandler';
-import { intersects } from '@/app/gridGL/helpers/intersects';
-import { pixiApp } from '@/app/gridGL/pixiApp/PixiApp';
-import { pixiAppSettings } from '@/app/gridGL/pixiApp/PixiAppSettings';
-import { focusGrid } from '@/app/helpers/focusGrid';
-import { KeyboardSymbols } from '@/app/helpers/keyboardSymbols';
-import { CellAlign, CellVerticalAlign, CellWrap } from '@/app/quadratic-core-types';
-import { colors } from '@/app/theme/colors';
-import { useFileContext } from '@/app/ui/components/FileProvider';
-import { TooltipHint } from '@/app/ui/components/TooltipHint';
-import { QColorPicker } from '@/app/ui/components/qColorPicker';
-import {
-  BorderAllIcon,
-  DecimalDecreaseIcon,
-  DecimalIncreaseIcon,
-  DollarIcon,
-  DotsHorizontalIcon,
-  ExpandMoreIcon,
-  FontBoldIcon,
-  FontItalicIcon,
-  FunctionIcon,
-  MagicWandIcon,
-  PaintBucketIcon,
-  PercentIcon,
-  TextAlignCenterIcon,
-  TextAlignLeftIcon,
-  TextAlignRightIcon,
-  TextClipIcon,
-  TextColorIcon,
-  TextNoneIcon,
-  TextOverflowIcon,
-  TextVerticalAlignBottomIcon,
-  TextVerticalAlignMiddleIcon,
-  TextVerticalAlignTopIcon,
-  WrapTextIcon,
-} from '@/app/ui/icons';
-import { MenuLineItem } from '@/app/ui/menus/TopBar/MenuLineItem';
-import { useGetBorderMenu } from '@/app/ui/menus/TopBar/SubMenus/FormatMenu/useGetBorderMenu';
-import {
-  clearFillColor,
-  clearFormattingAndBorders,
-  removeCellNumericFormat,
-  setAlign,
-  setBold,
-  setFillColor,
-  setItalic,
-  setTextColor,
-  setVerticalAlign,
-  setWrap,
-  textFormatDecreaseDecimalPlaces,
-  textFormatIncreaseDecimalPlaces,
-  textFormatSetCurrency,
-  textFormatSetExponential,
-  textFormatSetPercentage,
-} from '@/app/ui/menus/TopBar/SubMenus/formatCells';
-import { quadraticCore } from '@/app/web-workers/quadraticCore/quadraticCore';
-import { useGlobalSnackbar } from '@/shared/components/GlobalSnackbarProvider';
-import { Divider, IconButton, Toolbar } from '@mui/material';
-import { ControlledMenu, Menu, MenuDivider, MenuInstance, MenuItem, useMenuState } from '@szhsin/react-menu';
-import mixpanel from 'mixpanel-browser';
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { useRecoilState } from 'recoil';
-import './floatingMenuStyles.scss';
-
-// todo: this file needs to be broken up and rewritten
-
-interface Props {
-  container?: HTMLDivElement;
-}
-
-const HORIZONTAL_PADDING = 15;
-const VERTICAL_PADDING = 20;
-
-export const FloatingContextMenu = (props: Props) => {
-  const { container } = props;
-  const { addGlobalSnackbar } = useGlobalSnackbar();
-  const [editorInteractionState, setEditorInteractionState] = useRecoilState(editorInteractionStateAtom);
-  const showContextMenu = editorInteractionState.showContextMenu;
-  const [moreMenuProps, moreMenuToggle] = useMenuState();
-  const menuDiv = useRef<HTMLDivElement>(null);
-  const moreMenuButtonRef = useRef(null);
-  const borders = useGetBorderMenu();
-  const { name: fileName } = useFileContext();
-
-  const textColorRef = useRef<MenuInstance>(null);
-  const fillColorRef = useRef<MenuInstance>(null);
-
-  // close the more menu on escape key
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (moreMenuProps.state === 'open' && e.key === 'Escape') {
-        e.stopPropagation();
-        e.preventDefault();
-        moreMenuToggle();
-      }
-    };
-    window.addEventListener('keydown', handleKeyDown);
-    return () => {
-      window.removeEventListener('keydown', handleKeyDown);
-    };
-  }, [moreMenuProps.state, moreMenuToggle]);
-
-  // Function used to move and scale the Input with the Grid
-  const updateContextMenuCSSTransform = useCallback(() => {
-    if (!container || !menuDiv.current) return '';
-
-    const { viewport } = pixiApp;
-
-    const sheet = sheets.sheet;
-    const cursor = sheet.cursor;
-
-    // Calculate position of input based on cell
-    const cursorRectangle = pixiApp.cursor.cursorRectangle;
-    if (!cursorRectangle) return;
-    const cursorTopLeft = viewport.toScreen(cursorRectangle.x, cursorRectangle.y);
-    const cursorBottomRight = viewport.toScreen(
-      cursorRectangle.x + cursorRectangle.width,
-      cursorRectangle.y + cursorRectangle.height
-    );
-
-    const menuHeight = menuDiv.current?.clientHeight || 0;
-
-    let x = cursorTopLeft.x + container.offsetLeft - HORIZONTAL_PADDING;
-    let y = cursorTopLeft.y + container.offsetTop - menuHeight - VERTICAL_PADDING;
-
-    /**
-     * Control menu visibility
-     */
-    let visibility: boolean | 'vanish' = true;
-
-    // Hide if zoomed out too much
-    if (viewport.scale.x < 0.1) {
-      visibility = false;
-    }
-    // hide if boxCells is active
-    if (cursor.boxCells) {
-      visibility = false;
-    }
-
-    // hide if inline Formula editor is keyboard selecting cells
-    if (inlineEditorHandler.cursorIsMoving) visibility = 'vanish';
-
-    // Hide if it's not 1) a multicursor or, 2) an active right click
-    if (!(cursor.multiCursor || cursor.columnRow || showContextMenu)) visibility = 'vanish';
-
-    // Hide if currently selecting
-    if (pixiApp.pointer?.pointerDown?.active) visibility = 'vanish';
-
-    if (pixiApp.pointer.pointerCellMoving.state === 'move') visibility = 'vanish';
-
-    // Hide if in presentation mode
-    if (pixiAppSettings.presentationMode) visibility = 'vanish';
-
-    // Hide if you don't have edit access
-    if (!hasPermissionToEditFile(editorInteractionState.permissions)) visibility = 'vanish';
-
-    // Hide FloatingFormatMenu if multi cursor is off screen
-
-    const selection = pixiApp.cursor.cursorRectangle;
-    if (!selection) return;
-    const viewportBounds = pixiApp.viewport.getVisibleBounds();
-    if (!intersects.rectangleRectangle(selection, viewportBounds)) {
-      visibility = false;
-    }
-
-    // Hide More menu if changing from visible to hidden
-    if (
-      (moreMenuProps.state === 'open' || moreMenuProps.state === 'opening') &&
-      (visibility === false || visibility === 'vanish')
-    ) {
-      moreMenuToggle(false);
-    }
-
-    if (cursor.columnRow?.all) {
-      visibility = true;
-    }
-
-    // Apply visibility
-    // menuDiv.current.style.visibility = visibility;
-    if (visibility === true) {
-      menuDiv.current.style.opacity = '1';
-      menuDiv.current.style.pointerEvents = 'auto';
-      menuDiv.current.style.visibility = 'visible';
-    } else if (visibility === false) {
-      menuDiv.current.style.opacity = '0';
-      menuDiv.current.style.pointerEvents = 'none';
-      menuDiv.current.style.visibility = 'visible';
-    } else if (visibility === 'vanish') {
-      menuDiv.current.style.opacity = '0';
-      menuDiv.current.style.pointerEvents = 'none';
-      menuDiv.current.style.visibility = 'hidden';
-    }
-
-    /**
-     * Menu positioning
-     */
-
-    const columnHeader = pixiApp.headings.headingSize.width;
-    const rowHeader = pixiApp.headings.headingSize.height;
-
-    // if outside of viewport keep it inside
-
-    // left
-    if (x < container.offsetLeft + HORIZONTAL_PADDING + columnHeader) {
-      x = container.offsetLeft + HORIZONTAL_PADDING + columnHeader;
-    }
-
-    // right
-    else if (x + menuDiv.current.offsetWidth + HORIZONTAL_PADDING > container.offsetLeft + container.offsetWidth) {
-      x = Math.max(
-        container.offsetLeft + container.offsetWidth - menuDiv.current.offsetWidth - HORIZONTAL_PADDING,
-        container.offsetLeft + HORIZONTAL_PADDING
-      );
-    }
-
-    // top
-    if (y < container.offsetTop + HORIZONTAL_PADDING + rowHeader) {
-      y = container.offsetTop + HORIZONTAL_PADDING + rowHeader;
-    }
-
-    // move cursor to bottom of selection if necessary
-    if (y + menuDiv.current.offsetHeight >= cursorTopLeft.y && y <= cursorBottomRight.y) {
-      y = cursorBottomRight.y + VERTICAL_PADDING;
-
-      // if selection is too big, then default to the top calculation for y
-      if (y + menuDiv.current.offsetHeight >= container.offsetTop + container.offsetHeight) {
-        y = container.offsetTop + HORIZONTAL_PADDING + rowHeader;
-      }
-    }
-
-    if (cursor.columnRow?.all || cursor.multiCursor) {
-      const screen = viewport.toScreen(viewportBounds.x + viewportBounds.width / 2, viewportBounds.y);
-      x = screen.x - menuDiv.current.offsetWidth / 2;
-      y = screen.y + VERTICAL_PADDING + rowHeader;
-    }
-
-    // Generate transform CSS
-    const transform = 'translate(' + [x, y].join('px,') + 'px) ';
-    // Update input css matrix
-    menuDiv.current.style.transform = transform;
-
-    // Disable pointer events while the viewport is moving
-    if (viewport.moving) {
-      menuDiv.current.style.pointerEvents = 'none';
-      // make sure when we are setting pointer event to none
-      // that we check again soon to see if the viewport is done moving
-      setTimeout(updateContextMenuCSSTransform, 100);
-    } else menuDiv.current.style.pointerEvents = 'auto';
-    return transform;
-  }, [container, showContextMenu, editorInteractionState.permissions, moreMenuProps.state, moreMenuToggle]);
-
-  // formatting state at cursor position
-  const [cursorBold, setCursorBold] = useState(false);
-  const [cursorItalic, setCursorItalic] = useState(false);
-  const [cursorTextColor, setCursorTextColor] = useState('');
-  const [cursorAlign, setCursorAlign] = useState<CellAlign>('left');
-  const [cursorVerticalAlign, setCursorVerticalAlign] = useState<CellVerticalAlign>('top');
-  const [cursorWrap, setCursorWrap] = useState<CellWrap>('overflow');
-  const [cursorFillColor, setCursorFillColor] = useState('');
-
-  // fetch render cell from core and update formatting state at cursor position
-  const updateContextMenuState = useCallback(async () => {
-    if (!showContextMenu) return;
-    const sheetId = sheets.current;
-    const location = sheets.sheet.cursor.cursorPosition;
-    const formatSummary = await quadraticCore.getCellFormatSummary(sheetId, location.x, location.y, true);
-    setCursorBold(!!formatSummary.bold);
-    setCursorItalic(!!formatSummary.italic);
-    setCursorTextColor(formatSummary.textColor ?? '');
-    setCursorAlign(formatSummary.align ?? 'left');
-    setCursorVerticalAlign(formatSummary.verticalAlign ?? 'top');
-    setCursorWrap(formatSummary.wrap ?? 'overflow');
-    const fillColor = formatSummary.fillColor ?? '';
-    setCursorFillColor(fillColor === 'blank' ? '' : fillColor);
-  }, [showContextMenu]);
-
-  // trigger is used to hide the menu when cellMoving
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [_, setTrigger] = useState(0);
-  useEffect(() => {
-    const { viewport } = pixiApp;
-    const trigger = () => setTrigger((prev) => prev + 1);
-
-    if (!viewport) return;
-    viewport.on('moved', updateContextMenuCSSTransform);
-    viewport.on('moved-end', updateContextMenuCSSTransform);
-    document.addEventListener('pointerup', updateContextMenuCSSTransform);
-    window.addEventListener('resize', updateContextMenuCSSTransform);
-    window.addEventListener('keyup', updateContextMenuCSSTransform);
-    events.on('cellMoving', trigger);
-    events.on('cursorPosition', updateContextMenuState);
-    events.on('sheetFills', updateContextMenuState);
-
-    return () => {
-      viewport.removeListener('moved', updateContextMenuCSSTransform);
-      viewport.removeListener('moved-end', updateContextMenuCSSTransform);
-      document.removeEventListener('pointerup', updateContextMenuCSSTransform);
-      window.removeEventListener('resize', updateContextMenuCSSTransform);
-      window.removeEventListener('keyup', updateContextMenuCSSTransform);
-      events.off('cellMoving', trigger);
-      events.off('cursorPosition', updateContextMenuState);
-      events.off('sheetFills', updateContextMenuState);
-    };
-  }, [updateContextMenuCSSTransform, updateContextMenuState]);
-
-  // set input's initial position correctly
-  const transform = updateContextMenuCSSTransform();
-
-  const iconSize = 'small';
-  const iconBtnSx = { borderRadius: '2px' };
-
-  return (
-    <div
-      ref={menuDiv}
-      className={` bg-background`}
-      style={{
-        display: 'block',
-        position: 'absolute',
-        top: '0',
-        left: '0',
-        transformOrigin: '0 0',
-        transform,
-        pointerEvents: 'auto',
-        opacity: 0,
-        transition: 'opacity 0.2s ease-in-out',
-        borderRadius: '2px',
-        boxShadow:
-          'rgba(0, 0, 0, 0.2) 0px 3px 3px -2px, rgba(0, 0, 0, 0.14) 0px 3px 4px 0px, rgba(0, 0, 0, 0.12) 0px 1px 8px 0px',
-      }}
-      onClick={(e) => {
-        e.stopPropagation();
-        mixpanel.track('[FloatingContextMenu].click');
-      }}
-    >
-      <Toolbar
-        style={{
-          padding: '4px',
-          minHeight: '0px',
-          color: colors.darkGray,
-        }}
-      >
-        <TooltipHint title="Bold" shortcut={KeyboardSymbols.Command + 'B'}>
-          <IconButton
-            size="small"
-            onClick={async () => {
-              await setBold();
-              updateContextMenuState();
-            }}
-            sx={iconBtnSx}
-          >
-            <FontBoldIcon fontSize={iconSize} style={{ color: cursorBold ? 'black' : 'inherit' }} />
-          </IconButton>
-        </TooltipHint>
-
-        <TooltipHint title="Italic" shortcut={KeyboardSymbols.Command + 'I'}>
-          <IconButton
-            size="small"
-            onClick={async () => {
-              await setItalic();
-              updateContextMenuState();
-            }}
-            sx={iconBtnSx}
-          >
-            <FontItalicIcon fontSize={iconSize} style={{ color: cursorItalic ? 'black' : 'inherit' }} />
-          </IconButton>
-        </TooltipHint>
-        <Menu
-          className="color-picker-submenu"
-          instanceRef={textColorRef}
-          menuButton={
-            <div>
-              <TooltipHint title="Text color">
-                <IconButton size="small" sx={iconBtnSx}>
-                  <TextColorIcon fontSize={iconSize} style={{ color: cursorTextColor ? cursorTextColor : 'inherit' }} />
-                </IconButton>
-              </TooltipHint>
-            </div>
-          }
-        >
-          <QColorPicker
-            onChangeComplete={(color) => {
-              textColorRef.current?.closeMenu();
-              setTextColor(color);
-              focusGrid();
-              updateContextMenuState();
-            }}
-            onClear={() => {
-              textColorRef.current?.closeMenu();
-              setTextColor(undefined);
-              focusGrid();
-              updateContextMenuState();
-            }}
-          />
-        </Menu>
-
-        <MenuDividerVertical />
-
-        <Menu
-          className="text-submenu"
-          menuButton={
-            <div>
-              <TooltipHint title="Horizontal align">
-                <IconButton size="small" sx={iconBtnSx}>
-                  {AlignIcon(cursorAlign)}
-                  <ExpandMoreIcon fontSize={'inherit'} style={{ fontSize: '12px' }} />
-                </IconButton>
-              </TooltipHint>
-            </div>
-          }
-        >
-          <div style={{ padding: '0px 4px' }}>
-            <TooltipHint title="Align left">
-              <IconButton
-                size="small"
-                onClick={() => {
-                  setAlign('left');
-                  updateContextMenuState();
-                }}
-                sx={iconBtnSx}
-              >
-                <TextAlignLeftIcon fontSize={iconSize} />
-              </IconButton>
-            </TooltipHint>
-            <TooltipHint title="Align center">
-              <IconButton
-                size="small"
-                onClick={() => {
-                  setAlign('center');
-                  updateContextMenuState();
-                }}
-                sx={iconBtnSx}
-              >
-                <TextAlignCenterIcon fontSize={iconSize} />
-              </IconButton>
-            </TooltipHint>
-            <TooltipHint title="Align right">
-              <IconButton
-                size="small"
-                onClick={() => {
-                  setAlign('right');
-                  updateContextMenuState();
-                }}
-                sx={iconBtnSx}
-              >
-                <TextAlignRightIcon fontSize={iconSize} />
-              </IconButton>
-            </TooltipHint>
-          </div>
-        </Menu>
-
-        <Menu
-          className="text-submenu"
-          menuButton={
-            <div>
-              <TooltipHint title="Vertical align">
-                <IconButton size="small" sx={iconBtnSx}>
-                  {VerticalAlignIcon(cursorVerticalAlign)}
-                  <ExpandMoreIcon fontSize={'inherit'} style={{ fontSize: '12px' }} />
-                </IconButton>
-              </TooltipHint>
-            </div>
-          }
-        >
-          <div style={{ padding: '0px 4px' }}>
-            <TooltipHint title="Top align">
-              <IconButton
-                size="small"
-                onClick={() => {
-                  setVerticalAlign('top');
-                  updateContextMenuState();
-                }}
-                sx={iconBtnSx}
-              >
-                <TextVerticalAlignTopIcon fontSize={iconSize} />
-              </IconButton>
-            </TooltipHint>
-            <TooltipHint title="Middle align">
-              <IconButton
-                size="small"
-                onClick={() => {
-                  setVerticalAlign('middle');
-                  updateContextMenuState();
-                }}
-                sx={iconBtnSx}
-              >
-                <TextVerticalAlignMiddleIcon fontSize={iconSize} />
-              </IconButton>
-            </TooltipHint>
-            <TooltipHint title="Bottom align">
-              <IconButton
-                size="small"
-                onClick={() => {
-                  setVerticalAlign('bottom');
-                  updateContextMenuState();
-                }}
-                sx={iconBtnSx}
-              >
-                <TextVerticalAlignBottomIcon fontSize={iconSize} />
-              </IconButton>
-            </TooltipHint>
-          </div>
-        </Menu>
-
-        <Menu
-          className="text-submenu"
-          menuButton={
-            <div>
-              <TooltipHint title="Text wrap">
-                <IconButton size="small" sx={iconBtnSx}>
-                  {WrapIcon(cursorWrap)}
-                  <ExpandMoreIcon fontSize={'inherit'} style={{ fontSize: '12px' }} />
-                </IconButton>
-              </TooltipHint>
-            </div>
-          }
-        >
-          <div style={{ padding: '0px 4px' }}>
-            <TooltipHint title="Overflow">
-              <IconButton
-                size="small"
-                onClick={() => {
-                  setWrap('overflow');
-                  updateContextMenuState();
-                }}
-                sx={iconBtnSx}
-              >
-                <TextOverflowIcon style={{ width: '20px', height: '20px' }} />
-              </IconButton>
-            </TooltipHint>
-            <TooltipHint title="Wrap">
-              <IconButton
-                size="small"
-                onClick={() => {
-                  setWrap('wrap');
-                  updateContextMenuState();
-                }}
-                sx={iconBtnSx}
-              >
-                <WrapTextIcon fontSize={iconSize} />
-              </IconButton>
-            </TooltipHint>
-            <TooltipHint title="Clip">
-              <IconButton
-                size="small"
-                onClick={() => {
-                  setWrap('clip');
-                  updateContextMenuState();
-                }}
-                sx={iconBtnSx}
-              >
-                <TextClipIcon style={{ width: '20px', height: '20px' }} />
-              </IconButton>
-            </TooltipHint>
-          </div>
-        </Menu>
-
-        <MenuDividerVertical />
-
-        <Menu
-          className="color-picker-submenu"
-          instanceRef={fillColorRef}
-          menuButton={
-            <div>
-              <TooltipHint title="Fill color">
-                <IconButton size="small" sx={iconBtnSx}>
-                  <PaintBucketIcon
-                    fontSize={iconSize}
-                    style={{ color: cursorFillColor ? cursorFillColor : 'inherit' }}
-                  />
-                </IconButton>
-              </TooltipHint>
-            </div>
-          }
-        >
-          <QColorPicker
-            onChangeComplete={(color) => {
-              fillColorRef.current?.closeMenu();
-              setFillColor(color);
-              focusGrid();
-            }}
-            onClear={() => {
-              fillColorRef.current?.closeMenu();
-              clearFillColor();
-              focusGrid();
-            }}
-          />
-        </Menu>
-        {!borders ? (
-          <TooltipHint title="Borders">
-            <span>
-              <IconButton size="small" disabled={true} sx={iconBtnSx}>
-                <BorderAllIcon fontSize={iconSize} />
-              </IconButton>
-            </span>
-          </TooltipHint>
-        ) : (
-          <Menu
-            menuButton={
-              <div>
-                <TooltipHint title="Borders">
-                  <span>
-                    <IconButton size="small" sx={iconBtnSx}>
-                      <BorderAllIcon fontSize={iconSize} />
-                    </IconButton>
-                  </span>
-                </TooltipHint>
-              </div>
-            }
-          >
-            {borders}
-          </Menu>
-        )}
-        <MenuDividerVertical />
-
-        <TooltipHint title="Format automatically">
-          <IconButton size="small" onClick={() => removeCellNumericFormat()} sx={iconBtnSx}>
-            <MagicWandIcon fontSize={iconSize} />
-          </IconButton>
-        </TooltipHint>
-
-        <TooltipHint title="Format as currency">
-          <IconButton size="small" onClick={() => textFormatSetCurrency()} sx={iconBtnSx}>
-            <DollarIcon fontSize={iconSize} />
-          </IconButton>
-        </TooltipHint>
-
-        <TooltipHint title="Format as percentage">
-          <IconButton size="small" onClick={() => textFormatSetPercentage()} sx={iconBtnSx}>
-            <PercentIcon fontSize={iconSize} />
-          </IconButton>
-        </TooltipHint>
-
-        <TooltipHint title="Format as scientific">
-          <IconButton size="small" onClick={() => textFormatSetExponential()} sx={iconBtnSx}>
-            <FunctionIcon fontSize={iconSize} />
-          </IconButton>
-        </TooltipHint>
-
-        <TooltipHint title="Decrease decimal places">
-          <IconButton size="small" onClick={() => textFormatDecreaseDecimalPlaces()} sx={iconBtnSx}>
-            <DecimalDecreaseIcon fontSize={iconSize} />
-          </IconButton>
-        </TooltipHint>
-
-        <TooltipHint title="Increase decimal places">
-          <IconButton size="small" onClick={() => textFormatIncreaseDecimalPlaces()} sx={iconBtnSx}>
-            <DecimalIncreaseIcon fontSize={iconSize} />
-          </IconButton>
-        </TooltipHint>
-
-        <MenuDividerVertical />
-        <TooltipHint title="Clear formatting" shortcut={KeyboardSymbols.Command + '\\'}>
-          <IconButton size="small" onClick={clearFormattingAndBorders} sx={iconBtnSx}>
-            <TextNoneIcon fontSize={iconSize} />
-          </IconButton>
-        </TooltipHint>
-        {fullClipboardSupport() && <MenuDividerVertical />}
-        {fullClipboardSupport() && (
-          <TooltipHint title="More commands…">
-            <IconButton size="small" onClick={() => moreMenuToggle()} ref={moreMenuButtonRef} sx={iconBtnSx}>
-              <DotsHorizontalIcon fontSize={iconSize} />
-            </IconButton>
-          </TooltipHint>
-        )}
-        <ControlledMenu
-          state={moreMenuProps.state}
-          menuStyle={{ padding: '2px 0', color: 'inherit' }}
-          anchorRef={moreMenuButtonRef}
-        >
-          <MenuItem
-            onClick={() => {
-              setEditorInteractionState((editorInteractionState) => ({
-                ...editorInteractionState,
-                showValidation: true,
-                showContextMenu: false,
-              }));
-              moreMenuToggle();
-            }}
-          >
-            <MenuLineItem primary="Data validation" />
-          </MenuItem>
-          <MenuDivider />
-          <MenuItem
-            onClick={() => {
-              pasteFromClipboard('Values');
-              moreMenuToggle();
-            }}
-          >
-            <MenuLineItem
-              primary="Paste values only"
-              secondary={KeyboardSymbols.Command + KeyboardSymbols.Shift + 'V'}
-            />
-          </MenuItem>
-          <MenuItem
-            onClick={() => {
-              pasteFromClipboard('Formats');
-              moreMenuToggle();
-            }}
-          >
-            <MenuLineItem primary="Paste formatting only" />
-          </MenuItem>
-          <MenuDivider />
-          <MenuItem
-            onClick={async () => {
-              await copySelectionToPNG(addGlobalSnackbar);
-              moreMenuToggle();
-            }}
-          >
-            <MenuLineItem
-              primary="Copy selection as PNG"
-              secondary={KeyboardSymbols.Command + KeyboardSymbols.Shift + 'C'}
-            ></MenuLineItem>
-          </MenuItem>
-          <MenuItem
-            onClick={() => {
-              downloadSelectionAsCsvAction.run({ fileName });
-              moreMenuToggle();
-            }}
-          >
-            <MenuLineItem
-              primary={downloadSelectionAsCsvAction.label}
-              secondary={KeyboardSymbols.Command + KeyboardSymbols.Shift + 'E'}
-            />
-          </MenuItem>
-          <MenuDivider />
-          <MenuItem
-            onClick={() => {
-              setEditorInteractionState((state) => ({ ...state, annotationState: 'date-format' }));
-              moreMenuToggle();
-            }}
-          >
-            <MenuLineItem primary="Date and time format" />
-          </MenuItem>
-        </ControlledMenu>
-      </Toolbar>
-    </div>
-  );
-};
-
-function MenuDividerVertical() {
-  return (
-    <Divider
-      orientation="vertical"
-      flexItem
-      style={{
-        margin: '4px',
-      }}
-    />
-  );
-}
-
-const AlignIcon = (align: CellAlign) => {
-  switch (align) {
-    case 'center':
-      return <TextAlignCenterIcon fontSize={'inherit'} />;
-    case 'right':
-      return <TextAlignRightIcon fontSize={'inherit'} />;
-    default:
-      return <TextAlignLeftIcon fontSize={'inherit'} />;
-  }
-};
-
-const VerticalAlignIcon = (verticalAlign: CellVerticalAlign) => {
-  switch (verticalAlign) {
-    case 'middle':
-      return <TextVerticalAlignMiddleIcon fontSize={'inherit'} />;
-    case 'bottom':
-      return <TextVerticalAlignBottomIcon fontSize={'inherit'} />;
-    default:
-      return <TextVerticalAlignTopIcon fontSize={'inherit'} />;
-  }
-};
-
-const WrapIcon = (wrap: CellWrap) => {
-  switch (wrap) {
-    case 'wrap':
-      return <WrapTextIcon fontSize={'inherit'} />;
-    case 'clip':
-      return <TextClipIcon fontSize={'inherit'} />;
-    default:
-      return <TextOverflowIcon fontSize={'inherit'} />;
-  }
-};
diff --git a/quadratic-client/src/app/ui/menus/ContextMenu/floatingMenuStyles.scss b/quadratic-client/src/app/ui/menus/ContextMenu/floatingMenuStyles.scss
deleted file mode 100644
index a79f4ed36a..0000000000
--- a/quadratic-client/src/app/ui/menus/ContextMenu/floatingMenuStyles.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.text-submenu .szh-menu {
-  min-width: unset !important;
-}
diff --git a/quadratic-client/src/app/ui/menus/GoTo/GoTo.tsx b/quadratic-client/src/app/ui/menus/GoTo/GoTo.tsx
index b267eb9493..36bf3b833d 100644
--- a/quadratic-client/src/app/ui/menus/GoTo/GoTo.tsx
+++ b/quadratic-client/src/app/ui/menus/GoTo/GoTo.tsx
@@ -3,16 +3,16 @@ import { sheets } from '@/app/grid/controller/Sheets';
 import { moveViewport } from '@/app/gridGL/interaction/viewportHelper';
 import { Coordinate } from '@/app/gridGL/types/size';
 import '@/app/ui/styles/floating-dialog.css';
-import { CommandDialog, CommandInput, CommandItem, CommandList } from '@/shared/shadcn/ui/command';
-import { ArrowForward } from '@mui/icons-material';
+import { GoToIcon } from '@/shared/components/Icons';
+import { Command, CommandInput, CommandItem, CommandList } from '@/shared/shadcn/ui/command';
 import { Rectangle } from 'pixi.js';
 import React, { useCallback } from 'react';
-import { useRecoilState } from 'recoil';
+import { useSetRecoilState } from 'recoil';
 import { getCoordinatesFromUserInput } from './getCoordinatesFromUserInput';
 
 export const GoTo = () => {
-  const [editorInteractionState, setEditorInteractionState] = useRecoilState(editorInteractionStateAtom);
-  const { showGoToMenu } = editorInteractionState;
+  const setEditorInteractionState = useSetRecoilState(editorInteractionStateAtom);
+
   const [value, setValue] = React.useState<string>('');
 
   const closeMenu = useCallback(() => {
@@ -60,17 +60,7 @@ export const GoTo = () => {
   }, [closeMenu, coordinates]);
 
   return (
-    <CommandDialog
-      dialogProps={{ open: showGoToMenu, onOpenChange: closeMenu }}
-      commandProps={{ shouldFilter: false }}
-      overlayProps={{
-        onPointerDown: (e) => {
-          e.preventDefault();
-          e.stopPropagation();
-          closeMenu();
-        },
-      }}
-    >
+    <Command shouldFilter={false}>
       <CommandInput
         value={value}
         onValueChange={(value) => {
@@ -90,9 +80,9 @@ export const GoTo = () => {
         >
           Go to {coordinates.length === 1 ? 'cell' : 'range'}:{' '}
           {coordinates.map(({ x, y }) => `(${x}, ${y})`).join(', ')}
-          <ArrowForward className="text-muted-foreground" />
+          <GoToIcon className="text-muted-foreground" />
         </CommandItem>
       </CommandList>
-    </CommandDialog>
+    </Command>
   );
 };
diff --git a/quadratic-client/src/app/ui/menus/SheetBar/SheetBar.tsx b/quadratic-client/src/app/ui/menus/SheetBar/SheetBar.tsx
index cf2d06579b..6b434b8709 100644
--- a/quadratic-client/src/app/ui/menus/SheetBar/SheetBar.tsx
+++ b/quadratic-client/src/app/ui/menus/SheetBar/SheetBar.tsx
@@ -1,6 +1,5 @@
 import { events } from '@/app/events/events';
-import { Add, ChevronLeft, ChevronRight } from '@mui/icons-material';
-import { Stack, useTheme } from '@mui/material';
+import { AddIcon, ChevronLeftIcon, ChevronRightIcon } from '@/shared/components/Icons';
 import mixpanel from 'mixpanel-browser';
 import { MouseEvent, useCallback, useEffect, useRef, useState } from 'react';
 import { isMobile } from 'react-device-detect';
@@ -24,7 +23,6 @@ export const SheetBar = (): JSX.Element => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [_, setTrigger] = useState(0);
 
-  const theme = useTheme();
   const { permissions } = useRecoilValue(editorInteractionStateAtom);
   const hasPermission = hasPermissionToEditFile(permissions) && !isMobile;
 
@@ -46,15 +44,14 @@ export const SheetBar = (): JSX.Element => {
 
   // handle disabling left arrow and right arrow
   const [sheetTabs, setSheetTabs] = useState<HTMLDivElement | undefined>();
-  const [leftArrow, setLeftArrow] = useState<HTMLElement | undefined>();
-  const [rightArrow, setRightArrow] = useState<HTMLElement | undefined>();
+  const [leftArrow, setLeftArrow] = useState<HTMLButtonElement | undefined>();
+  const [rightArrow, setRightArrow] = useState<HTMLButtonElement | undefined>();
   const leftRef = useCallback(
     (node: HTMLButtonElement) => {
       setLeftArrow(node);
       if (!sheetTabs || !node) return;
       const hide = sheetTabs.scrollLeft === 0 || sheetTabs.offsetWidth === sheetTabs.scrollWidth;
-      node.style.opacity = hide ? '0.25' : '1';
-      node.style.cursor = hide ? 'auto' : 'pointer';
+      node.disabled = hide;
     },
     [sheetTabs]
   );
@@ -66,8 +63,7 @@ export const SheetBar = (): JSX.Element => {
       const hide =
         sheetTabs.offsetWidth === sheetTabs.scrollWidth ||
         Math.round(sheetTabs.scrollLeft) === Math.round(sheetTabs.scrollWidth - sheetTabs.offsetWidth);
-      node.style.opacity = hide ? '0.25' : '1';
-      node.style.cursor = hide ? 'auto' : 'pointer';
+      node.disabled = hide;
     },
     [sheetTabs]
   );
@@ -78,15 +74,13 @@ export const SheetBar = (): JSX.Element => {
       node.addEventListener('scroll', () => {
         if (leftArrow) {
           const hide = node.scrollLeft === 0 || node.offsetWidth === node.scrollWidth;
-          leftArrow.style.opacity = hide ? '0.25' : '1';
-          leftArrow.style.cursor = hide ? 'auto' : 'pointer';
+          leftArrow.disabled = hide;
         }
         if (rightArrow) {
           const hide =
             node.offsetWidth === node.scrollWidth ||
             Math.round(node.scrollLeft) === Math.round(node.scrollWidth - node.offsetWidth);
-          rightArrow.style.opacity = hide ? '0.25' : '1';
-          rightArrow.style.cursor = hide ? 'auto' : 'pointer';
+          rightArrow.disabled = hide;
         }
       });
     },
@@ -411,19 +405,7 @@ export const SheetBar = (): JSX.Element => {
   const clearRename = useCallback(() => setForceRename(undefined), []);
 
   return (
-    <Stack
-      direction="row"
-      justifyContent="space-between"
-      alignItems="stretch"
-      sx={{
-        color: theme.palette.text.secondary,
-        height: '2rem',
-        fontSize: '0.7rem',
-        zIndex: 1,
-        backgroundColor: theme.palette.background.paper,
-      }}
-      className="sheet-bar select-none"
-    >
+    <div className="align-stretch z-[1] flex h-8 flex-shrink-0 select-none flex-row justify-between bg-background text-xs text-muted-foreground">
       {hasPermission && (
         <SheetBarButton
           onClick={() => {
@@ -431,16 +413,15 @@ export const SheetBar = (): JSX.Element => {
             sheets.userAddSheet();
             focusGrid();
           }}
-          style={{ borderTop: `1px solid ${theme.palette.divider}` }}
-          tooltip="Add Sheet"
+          className="rounded-none border-r border-t border-border"
+          tooltip="Add sheet"
         >
-          <Add fontSize="small" color="inherit" />
+          <AddIcon />
         </SheetBarButton>
       )}
 
-      <Stack
-        direction="row"
-        flexShrink="1"
+      <div
+        className="-ml-[1px] flex flex-shrink flex-grow flex-row overflow-hidden pt-[1px] shadow-[inset_0_1px_0_hsl(var(--border))]"
         ref={sheetsRef}
         onWheel={(e) => {
           if (!sheetTabs) return;
@@ -448,13 +429,6 @@ export const SheetBar = (): JSX.Element => {
             sheetTabs.scrollLeft += e.deltaX;
           }
         }}
-        sx={{
-          overflow: 'hidden',
-          boxShadow: `inset 0 1px 0 ${theme.palette.divider}`,
-          width: '100%',
-          // Hide left border when user can't see "+" button
-          marginLeft: '-1px',
-        }}
       >
         {sheets.map((sheet) => (
           <SheetBarTab
@@ -468,22 +442,32 @@ export const SheetBar = (): JSX.Element => {
             clearRename={clearRename}
           />
         ))}
-      </Stack>
+      </div>
 
-      <Stack direction="row" sx={{ borderTop: `1px solid ${theme.palette.divider}` }}>
-        <SheetBarButton buttonRef={leftRef} onPointerDown={() => handleArrowDown(-1)} onPointerUp={handleArrowUp}>
-          <ChevronLeft fontSize="small" color="inherit" />
+      <div className="flex border-t border-border">
+        <SheetBarButton
+          buttonRef={leftRef}
+          onPointerDown={() => handleArrowDown(-1)}
+          onPointerUp={handleArrowUp}
+          tooltip="Scroll left"
+        >
+          <ChevronLeftIcon />
         </SheetBarButton>
 
-        <SheetBarButton buttonRef={rightRef} onPointerDown={() => handleArrowDown(1)} onPointerUp={handleArrowUp}>
-          <ChevronRight fontSize="small" color="inherit" />
+        <SheetBarButton
+          buttonRef={rightRef}
+          onPointerDown={() => handleArrowDown(1)}
+          onPointerUp={handleArrowUp}
+          tooltip="Scroll right"
+        >
+          <ChevronRightIcon />
         </SheetBarButton>
-      </Stack>
+      </div>
       <SheetBarTabContextMenu
         contextMenu={contextMenu}
         handleClose={() => setContextMenu(undefined)}
         handleRename={handleRename}
       />
-    </Stack>
+    </div>
   );
 };
diff --git a/quadratic-client/src/app/ui/menus/SheetBar/SheetBarButton.tsx b/quadratic-client/src/app/ui/menus/SheetBar/SheetBarButton.tsx
index fd354793db..041fd0e93f 100644
--- a/quadratic-client/src/app/ui/menus/SheetBar/SheetBarButton.tsx
+++ b/quadratic-client/src/app/ui/menus/SheetBar/SheetBarButton.tsx
@@ -1,34 +1,23 @@
-import { ButtonBase, ButtonBaseProps, Tooltip, useTheme } from '@mui/material';
+import { Button, ButtonProps } from '@/shared/shadcn/ui/button';
+import { TooltipPopover } from '@/shared/shadcn/ui/tooltip';
 
-interface Props extends ButtonBaseProps {
+interface Props extends ButtonProps {
   buttonRef?: any;
-  tooltip?: string;
+  tooltip: string;
 }
 
-export const SheetBarButton = ({ children, buttonRef, tooltip, ...rest }: Props) => {
-  const theme = useTheme();
-
-  const buttonStyles = {
-    px: theme.spacing(1.5),
-    '&:hover': {
-      background: theme.palette.action.hover,
-
-      '& svg': {
-        fill: theme.palette.text.primary,
-      },
-    },
-  };
-
+export const SheetBarButton = ({ children, buttonRef, tooltip, className, ...rest }: Props) => {
   const buttonProps = {
     ...rest,
     ...(buttonRef ? { ref: buttonRef } : {}),
+    className: `h-full px-5 ${className ? className : ''}`,
   };
 
   return (
-    <Tooltip title={tooltip ?? ''}>
-      <ButtonBase sx={buttonStyles} {...buttonProps}>
+    <TooltipPopover label={tooltip ?? ''}>
+      <Button variant="ghost" size="icon-sm" {...buttonProps}>
         {children}
-      </ButtonBase>
-    </Tooltip>
+      </Button>
+    </TooltipPopover>
   );
 };
diff --git a/quadratic-client/src/app/ui/menus/SheetBar/SheetBarTab.tsx b/quadratic-client/src/app/ui/menus/SheetBar/SheetBarTab.tsx
index b01423b15c..5f68b51368 100644
--- a/quadratic-client/src/app/ui/menus/SheetBar/SheetBarTab.tsx
+++ b/quadratic-client/src/app/ui/menus/SheetBar/SheetBarTab.tsx
@@ -1,8 +1,10 @@
 import { events } from '@/app/events/events';
 import { multiplayer } from '@/app/web-workers/multiplayerWebWorker/multiplayer';
 import { quadraticCore } from '@/app/web-workers/quadraticCore/quadraticCore';
-import { ArrowDropDown } from '@mui/icons-material';
-import { Box, Fade, IconButton, Paper, Popper, Stack, Typography, useTheme } from '@mui/material';
+import { ArrowDropDownIcon } from '@/shared/components/Icons';
+import { Button } from '@/shared/shadcn/ui/button';
+import { cn } from '@/shared/shadcn/utils';
+import { Box, Fade, Paper, Popper, Stack, Typography, useTheme } from '@mui/material';
 import { MouseEvent, PointerEvent, useEffect, useRef, useState } from 'react';
 import { isMobile } from 'react-device-detect';
 import { useRecoilValue } from 'recoil';
@@ -42,24 +44,15 @@ export const SheetBarTab = (props: Props): JSX.Element => {
     containerRef.current.style.order = order;
   }
   return (
-    <Box
+    <div
+      className={cn(
+        'group relative hover:bg-accent',
+        active &&
+          'sticky left-0 right-0 z-[1] -mt-[1px] !bg-background shadow-[inset_1px_0_0_hsl(var(--border)),inset_-1px_0_0_hsl(var(--border))]'
+      )}
       ref={containerRef}
-      sx={{
+      style={{
         order,
-        position: 'relative',
-        '&:hover': {
-          backgroundColor: theme.palette.action.hover,
-        },
-        ...(active
-          ? {
-              backgroundColor: theme.palette.background.default + ' !important',
-              position: 'sticky',
-              left: '0',
-              right: '0',
-              boxShadow: `inset 1px 0 0 ${theme.palette.divider}, inset -1px 0 0 ${theme.palette.divider}`,
-              zIndex: 1,
-            }
-          : {}),
       }}
       data-id={sheet.id}
       data-order={sheet.order}
@@ -85,7 +78,9 @@ export const SheetBarTab = (props: Props): JSX.Element => {
           sheet={sheet}
         />
         {sheet.id !== sheets.sheet.id && <TabMultiplayer sheetId={sheet.id} />}
-        <TabButton active={active} hasPermission={hasPermission} onContextMenu={onContextMenu} sheet={sheet} />
+        <div className={cn('flex', !active && 'invisible opacity-0 group-hover:visible group-hover:opacity-100')}>
+          <TabButton active={active} hasPermission={hasPermission} onContextMenu={onContextMenu} sheet={sheet} />
+        </div>
         <Popper open={nameExists} anchorEl={containerRef.current} transition>
           {({ TransitionProps }) => (
             <Fade {...TransitionProps} timeout={350}>
@@ -105,7 +100,7 @@ export const SheetBarTab = (props: Props): JSX.Element => {
           )}
         </Popper>
       </TabWrapper>
-    </Box>
+    </div>
   );
 };
 
@@ -114,6 +109,7 @@ function TabWrapper({ children, sheet, active }: any) {
   const { follow } = useRecoilValue(editorInteractionStateAtom);
   return (
     <Stack
+      className={cn(active && 'text-primary')}
       direction="row"
       alignItems="center"
       gap={theme.spacing(0.25)}
@@ -136,11 +132,6 @@ function TabWrapper({ children, sheet, active }: any) {
           width: 'calc(100% - 2px)',
           backgroundColor: sheet.color ? sheet.color : 'transparent',
         },
-        ...(active
-          ? {
-              color: theme.palette.primary.main,
-            }
-          : {}),
         '&:hover .MuiIconButton-root': {
           opacity: 1,
           visibility: 'visible',
@@ -292,28 +283,18 @@ function TabButton({
   onContextMenu: Props['onContextMenu'];
   sheet: Props['sheet'];
 }) {
-  const theme = useTheme();
-
   return hasPermission ? (
-    <IconButton
-      size="small"
-      sx={{
-        mr: theme.spacing(-0.5),
-        p: '0',
-        ...(active
-          ? {
-              opacity: 1,
-              visibility: 'visible',
-            }
-          : { opacity: 0, visibility: 'none' }),
-      }}
+    <Button
+      variant="ghost"
+      className={'-mr-1 h-4 w-4'}
+      size="icon-sm"
       onClick={(e) => {
         e.stopPropagation();
         onContextMenu(e, sheet);
       }}
     >
-      <ArrowDropDown fontSize="inherit" />
-    </IconButton>
+      <ArrowDropDownIcon />
+    </Button>
   ) : null;
 }
 
diff --git a/quadratic-client/src/app/ui/menus/SheetBar/SheetBarTabContextMenu.tsx b/quadratic-client/src/app/ui/menus/SheetBar/SheetBarTabContextMenu.tsx
index 4a4e46bfe1..df0704bf0b 100644
--- a/quadratic-client/src/app/ui/menus/SheetBar/SheetBarTabContextMenu.tsx
+++ b/quadratic-client/src/app/ui/menus/SheetBar/SheetBarTabContextMenu.tsx
@@ -1,6 +1,6 @@
 import { quadraticCore } from '@/app/web-workers/quadraticCore/quadraticCore';
-import { Box } from '@mui/material';
 import { ControlledMenu, MenuDivider, MenuItem, SubMenu } from '@szhsin/react-menu';
+import '@szhsin/react-menu/dist/index.css';
 import mixpanel from 'mixpanel-browser';
 import { ColorResult } from 'react-color';
 import { sheets } from '../../../grid/controller/Sheets';
@@ -18,7 +18,7 @@ export const SheetBarTabContextMenu = (props: Props): JSX.Element => {
   const { contextMenu, handleClose, handleRename } = props;
 
   return (
-    <Box sx={{ fontSize: '.875rem' }}>
+    <div className="text-sm text-foreground">
       <ControlledMenu
         state={!!contextMenu ? 'open' : 'closed'}
         onClose={handleClose}
@@ -105,6 +105,6 @@ export const SheetBarTabContextMenu = (props: Props): JSX.Element => {
           window.setTimeout(focusGrid, 0);
         }}
       /> */}
-    </Box>
+    </div>
   );
 };
diff --git a/quadratic-client/src/app/ui/menus/Toolbar/CursorPosition.tsx b/quadratic-client/src/app/ui/menus/Toolbar/CursorPosition.tsx
new file mode 100644
index 0000000000..676c33b8bb
--- /dev/null
+++ b/quadratic-client/src/app/ui/menus/Toolbar/CursorPosition.tsx
@@ -0,0 +1,51 @@
+import { editorInteractionStateAtom } from '@/app/atoms/editorInteractionStateAtom';
+import { events } from '@/app/events/events';
+import { sheets } from '@/app/grid/controller/Sheets';
+import GoTo from '@/app/ui/menus/GoTo';
+import { ArrowDropDownIcon } from '@/shared/components/Icons';
+import { Popover, PopoverContent, PopoverTrigger } from '@/shared/shadcn/ui/popover';
+import { useEffect, useState } from 'react';
+import { useRecoilState } from 'recoil';
+
+export const CursorPosition = () => {
+  const [editorInteractionState, setEditorInteractionState] = useRecoilState(editorInteractionStateAtom);
+  const [cursorPositionString, setCursorPositionString] = useState('');
+  const [multiCursorPositionString, setMultiCursorPositionString] = useState('');
+
+  useEffect(() => {
+    const updateCursor = () => {
+      const cursor = sheets.sheet.cursor;
+      setCursorPositionString(`(${cursor.cursorPosition.x}, ${cursor.cursorPosition.y})`);
+      if (cursor.multiCursor && cursor.multiCursor.length === 1) {
+        const multiCursor = cursor.multiCursor[0];
+        setMultiCursorPositionString(
+          `(${multiCursor.left}, ${multiCursor.top}), (${multiCursor.right - 1}, ${multiCursor.bottom - 1})`
+        );
+      } else {
+        setMultiCursorPositionString('');
+      }
+    };
+    updateCursor();
+    events.on('cursorPosition', updateCursor);
+    events.on('changeSheet', updateCursor);
+    return () => {
+      events.off('cursorPosition', updateCursor);
+      events.off('changeSheet', updateCursor);
+    };
+  }, []);
+
+  return (
+    <Popover
+      open={editorInteractionState.showGoToMenu}
+      onOpenChange={(open) => setEditorInteractionState((prev) => ({ ...prev, showGoToMenu: open }))}
+    >
+      <PopoverTrigger className="group flex h-full w-full items-center justify-between pl-2 pr-1 text-sm hover:bg-accent focus:bg-accent focus:outline-none data-[state=open]:bg-accent">
+        <span className="truncate">{multiCursorPositionString ? multiCursorPositionString : cursorPositionString}</span>
+        <ArrowDropDownIcon className="text-muted-foreground group-hover:text-foreground" />
+      </PopoverTrigger>
+      <PopoverContent className="w-72 p-0" align="start">
+        <GoTo />
+      </PopoverContent>
+    </Popover>
+  );
+};
diff --git a/quadratic-client/src/app/ui/menus/Toolbar/FormattingBar.tsx b/quadratic-client/src/app/ui/menus/Toolbar/FormattingBar.tsx
new file mode 100644
index 0000000000..91a0bc994c
--- /dev/null
+++ b/quadratic-client/src/app/ui/menus/Toolbar/FormattingBar.tsx
@@ -0,0 +1,309 @@
+import { Action } from '@/app/actions/actions';
+import { ActionArgs } from '@/app/actions/actionsSpec';
+import { defaultActionSpec } from '@/app/actions/defaultActionsSpec';
+import { focusGrid } from '@/app/helpers/focusGrid';
+import { keyboardShortcutEnumToDisplay } from '@/app/helpers/keyboardShortcutsDisplay';
+import { BorderMenu } from '@/app/ui/components/BorderMenu';
+import { DateFormat } from '@/app/ui/components/DateFormat';
+import { QColorPicker } from '@/app/ui/components/qColorPicker';
+
+import {
+  ArrowDropDownIcon,
+  BorderAllIcon,
+  FormatAlignLeftIcon,
+  FormatTextWrapIcon,
+  Number123Icon,
+  VerticalAlignTopIcon,
+} from '@/shared/components/Icons';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/shared/shadcn/ui/dropdown-menu';
+import { Popover, PopoverContent, PopoverTrigger } from '@/shared/shadcn/ui/popover';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/shared/shadcn/ui/tooltip';
+import * as ToggleGroup from '@radix-ui/react-toggle-group';
+import mixpanel from 'mixpanel-browser';
+import { ReactNode } from 'react';
+
+export const FormattingBar = () => {
+  return (
+    <ToggleGroup.Root
+      type="multiple"
+      className="flex select-none text-sm"
+      onValueChange={() => {
+        focusGrid();
+      }}
+    >
+      <FormatButton action={Action.FormatNumberToggleCommas} actionArgs={undefined} />
+      <FormatButton action={Action.FormatNumberDecimalDecrease} actionArgs={undefined} />
+      <FormatButton action={Action.FormatNumberDecimalIncrease} actionArgs={undefined} />
+      <FormatButton action={Action.FormatNumberCurrency} actionArgs={undefined} />
+      <FormatButton action={Action.FormatNumberPercent} actionArgs={undefined} />
+      <FormatButtonDropdown showDropdownArrow tooltipLabel="More number formats" Icon={Number123Icon}>
+        <FormatButtonDropdownActions
+          actions={[Action.FormatNumberAutomatic, Action.FormatNumberScientific]}
+          actionArgs={undefined}
+        />
+      </FormatButtonDropdown>
+
+      <Separator />
+
+      <FormatDateAndTimePickerButton />
+
+      <Separator />
+
+      <FormatButton action={Action.ToggleBold} actionArgs={undefined} />
+      <FormatButton action={Action.ToggleItalic} actionArgs={undefined} />
+      <FormatColorPickerButton action={Action.FormatTextColor} />
+
+      <Separator />
+
+      <FormatColorPickerButton action={Action.FormatFillColor} />
+      <FormatButtonPopover
+        disableCloseAutoFocus
+        tooltipLabel="Borders"
+        Icon={BorderAllIcon}
+        className="flex flex-row flex-wrap"
+      >
+        <BorderMenu />
+      </FormatButtonPopover>
+
+      <Separator />
+
+      <FormatButtonDropdown showDropdownArrow tooltipLabel="Horizontal align" Icon={FormatAlignLeftIcon}>
+        <FormatButtonDropdownActions
+          actions={[
+            Action.FormatAlignHorizontalLeft,
+            Action.FormatAlignHorizontalCenter,
+            Action.FormatAlignHorizontalRight,
+          ]}
+          actionArgs={undefined}
+        />
+      </FormatButtonDropdown>
+      <FormatButtonDropdown showDropdownArrow tooltipLabel="Vertical align" Icon={VerticalAlignTopIcon}>
+        <FormatButtonDropdownActions
+          actions={[Action.FormatAlignVerticalTop, Action.FormatAlignVerticalMiddle, Action.FormatAlignVerticalBottom]}
+          actionArgs={undefined}
+        />
+      </FormatButtonDropdown>
+      <FormatButtonDropdown showDropdownArrow tooltipLabel="Text wrap" Icon={FormatTextWrapIcon}>
+        <FormatButtonDropdownActions
+          actions={[Action.FormatTextWrapWrap, Action.FormatTextWrapOverflow, Action.FormatTextWrapClip]}
+          actionArgs={undefined}
+        />
+      </FormatButtonDropdown>
+
+      <Separator />
+
+      <FormatButton action={Action.ClearFormattingBorders} actionArgs={undefined} />
+    </ToggleGroup.Root>
+  );
+};
+
+function Separator() {
+  return <hr className="relative mx-1.5 mt-1.5 h-2/3 w-[1px] bg-border" />;
+}
+
+function FormatButtonDropdown({
+  Icon,
+  tooltipLabel,
+  children,
+  showDropdownArrow,
+  className,
+  disableCloseAutoFocus,
+}: {
+  Icon: any;
+  children: ReactNode;
+  tooltipLabel: string;
+  showDropdownArrow?: boolean;
+  className?: string;
+  disableCloseAutoFocus?: boolean;
+}) {
+  return (
+    <DropdownMenu>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <ToggleGroup.Item value={tooltipLabel} asChild aria-label={tooltipLabel}>
+            <DropdownMenuTrigger className="flex h-full items-center px-2 text-muted-foreground hover:bg-accent hover:text-foreground focus:bg-accent focus:text-foreground focus:outline-none aria-expanded:bg-accent aria-expanded:text-foreground">
+              <Icon />
+              {showDropdownArrow && <ArrowDropDownIcon className="-ml-1 -mr-2" />}
+            </DropdownMenuTrigger>
+          </ToggleGroup.Item>
+        </TooltipTrigger>
+        <TooltipContent side="bottom">
+          <TooltipContents label={tooltipLabel} />
+        </TooltipContent>
+      </Tooltip>
+      <DropdownMenuContent
+        className={className}
+        onCloseAutoFocus={(e) => {
+          e.preventDefault();
+          focusGrid();
+        }}
+      >
+        {children}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+function FormatButtonPopover({
+  Icon,
+  tooltipLabel,
+  children,
+  showDropdownArrow,
+  className,
+  disableCloseAutoFocus,
+}: {
+  Icon: any;
+  children: ReactNode;
+  tooltipLabel: string;
+  showDropdownArrow?: boolean;
+  className?: string;
+  disableCloseAutoFocus?: boolean;
+}) {
+  return (
+    <Popover>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <ToggleGroup.Item value={tooltipLabel} asChild aria-label={tooltipLabel}>
+            <PopoverTrigger className="flex h-full items-center px-2 text-muted-foreground hover:bg-accent hover:text-foreground focus:bg-accent focus:text-foreground focus:outline-none aria-expanded:bg-accent aria-expanded:text-foreground">
+              <Icon />
+              {showDropdownArrow && <ArrowDropDownIcon className="-ml-1 -mr-2" />}
+            </PopoverTrigger>
+          </ToggleGroup.Item>
+        </TooltipTrigger>
+        <TooltipContent side="bottom">
+          <TooltipContents label={tooltipLabel} />
+        </TooltipContent>
+      </Tooltip>
+      <PopoverContent
+        className={className + ' w-fit p-1'}
+        onCloseAutoFocus={(e) => {
+          e.preventDefault();
+          focusGrid();
+        }}
+      >
+        {children}
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+function FormatButtonDropdownActions<T extends Action>({
+  actions,
+  actionArgs,
+}: {
+  actions: T[];
+  actionArgs: T extends keyof ActionArgs ? ActionArgs[T] : void;
+}) {
+  return actions.map((action, key) => {
+    const actionSpec = defaultActionSpec[action];
+    const { label, run } = actionSpec;
+    const Icon = 'Icon' in actionSpec ? actionSpec.Icon : undefined;
+    return (
+      <DropdownMenuItem
+        key={key}
+        onClick={() => {
+          mixpanel.track('[FormattingBar].button', { label });
+          run(actionArgs);
+        }}
+      >
+        {Icon && <Icon className="mr-2" />}
+        {label}
+      </DropdownMenuItem>
+    );
+  });
+}
+
+function FormatButton<T extends Action>({
+  action,
+  actionArgs,
+}: {
+  action: T;
+  actionArgs: T extends keyof ActionArgs ? ActionArgs[T] : void;
+}) {
+  const actionSpec = defaultActionSpec[action];
+  const { label, run } = actionSpec;
+  const Icon = 'Icon' in actionSpec ? actionSpec.Icon : undefined;
+  const keyboardShortcut = keyboardShortcutEnumToDisplay(action);
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <ToggleGroup.Item
+          aria-label={label}
+          value={label}
+          className="flex h-full items-center px-2 text-muted-foreground hover:bg-accent hover:text-foreground focus:bg-accent focus:text-foreground focus:outline-none"
+          onClick={() => {
+            mixpanel.track('[FormattingBar].button', { label });
+            run(actionArgs);
+          }}
+        >
+          {Icon && <Icon />}
+        </ToggleGroup.Item>
+      </TooltipTrigger>
+      <TooltipContent side="bottom">
+        <TooltipContents label={label} keyboardShortcut={keyboardShortcut} />
+      </TooltipContent>
+    </Tooltip>
+  );
+}
+
+function FormatColorPickerButton({
+  action,
+  activeColor,
+}: {
+  action: Action.FormatTextColor | Action.FormatFillColor;
+  activeColor?: string;
+}) {
+  const actionSpec = defaultActionSpec[action];
+  const { label, run } = actionSpec;
+  const Icon = 'Icon' in actionSpec ? actionSpec.Icon : undefined;
+
+  return (
+    <FormatButtonDropdown tooltipLabel={label} Icon={Icon}>
+      <DropdownMenuItem className="color-picker-dropdown-menu flex flex-col !bg-background p-0">
+        <QColorPicker
+          onChangeComplete={(color) => {
+            run(color);
+            focusGrid();
+          }}
+          onClear={() => {
+            run(undefined);
+            focusGrid();
+          }}
+        />
+      </DropdownMenuItem>
+    </FormatButtonDropdown>
+  );
+}
+
+function FormatDateAndTimePickerButton() {
+  const dateAndTimeAction = defaultActionSpec[Action.FormatDateTime];
+
+  return (
+    <FormatButtonPopover tooltipLabel={dateAndTimeAction.label} Icon={dateAndTimeAction.Icon}>
+      <div className="min-w-80 p-2">
+        <DateFormat
+          closeMenu={() => {
+            focusGrid();
+          }}
+        />
+      </div>
+    </FormatButtonPopover>
+  );
+}
+
+function TooltipContents({ label, keyboardShortcut }: { label: string; keyboardShortcut?: string }) {
+  return (
+    <p>
+      {label}{' '}
+      {keyboardShortcut && (
+        <span className="opacity-50 before:content-['('] after:content-[')']">{keyboardShortcut}</span>
+      )}
+    </p>
+  );
+}
diff --git a/quadratic-client/src/app/ui/menus/Toolbar/Toolbar.tsx b/quadratic-client/src/app/ui/menus/Toolbar/Toolbar.tsx
new file mode 100644
index 0000000000..6b5c08e777
--- /dev/null
+++ b/quadratic-client/src/app/ui/menus/Toolbar/Toolbar.tsx
@@ -0,0 +1,24 @@
+import { editorInteractionStateAtom } from '@/app/atoms/editorInteractionStateAtom';
+import { CursorPosition } from '@/app/ui/menus/Toolbar/CursorPosition';
+import { FormattingBar } from '@/app/ui/menus/Toolbar/FormattingBar';
+import { ZoomMenu } from '@/app/ui/menus/Toolbar/ZoomMenu';
+import { useRecoilValue } from 'recoil';
+
+export const Toolbar = () => {
+  const editorInteractionState = useRecoilValue(editorInteractionStateAtom);
+  const { permissions } = editorInteractionState;
+
+  return (
+    <div className="hidden h-8 flex-shrink-0 select-none justify-between border-b border-border md:flex">
+      <div className="w-24 flex-shrink-0 border-r border-border md:w-40">
+        <CursorPosition />
+      </div>
+      <div className="no-scrollbar flex flex-grow items-stretch overflow-auto lg:justify-center">
+        {permissions.includes('FILE_EDIT') && <FormattingBar />}
+      </div>
+      <div className="flex items-center justify-end lg:w-40">
+        <ZoomMenu />
+      </div>
+    </div>
+  );
+};
diff --git a/quadratic-client/src/app/ui/menus/Toolbar/ZoomMenu.tsx b/quadratic-client/src/app/ui/menus/Toolbar/ZoomMenu.tsx
new file mode 100644
index 0000000000..8e4710293b
--- /dev/null
+++ b/quadratic-client/src/app/ui/menus/Toolbar/ZoomMenu.tsx
@@ -0,0 +1,106 @@
+import { Action } from '@/app/actions/actions';
+import { ActionArgs } from '@/app/actions/actionsSpec';
+import { defaultActionSpec } from '@/app/actions/defaultActionsSpec';
+import { events } from '@/app/events/events';
+import { keyboardShortcutEnumToDisplay } from '@/app/helpers/keyboardShortcutsDisplay';
+import { ArrowDropDownIcon } from '@/shared/components/Icons';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger,
+} from '@/shared/shadcn/ui/dropdown-menu';
+import mixpanel from 'mixpanel-browser';
+import { useCallback, useEffect, useState } from 'react';
+import { focusGrid } from '../../../helpers/focusGrid';
+
+export const ZoomMenu = () => {
+  const [zoom, setZoom] = useState(1);
+  const handleZoom = useCallback((scale: number) => setZoom(scale), [setZoom]);
+
+  useEffect(() => {
+    events.on('zoom', handleZoom);
+    return () => {
+      events.off('zoom', handleZoom);
+    };
+  }, [handleZoom]);
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger className="group flex h-full w-24 items-center justify-between border-l border-border px-2 text-sm hover:bg-accent focus:bg-accent focus:outline-none data-[state=open]:bg-accent">
+        {zoom === Infinity ? 100 : Math.round(zoom * 100)}%
+        <ArrowDropDownIcon className="text-muted-foreground group-hover:text-foreground" />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        className="w-48"
+        onCloseAutoFocus={(e) => {
+          e.preventDefault();
+          focusGrid();
+        }}
+      >
+        <DropdownMenuItemFromAction
+          mixpanelEvent="[ZoomDropdown].zoomIn"
+          action={Action.ZoomIn}
+          actionArgs={undefined}
+        />
+        <DropdownMenuItemFromAction
+          mixpanelEvent="[ZoomDropdown].zoomOut"
+          action={Action.ZoomOut}
+          actionArgs={undefined}
+        />
+        <DropdownMenuSeparator />
+        <DropdownMenuItemFromAction
+          mixpanelEvent="[ZoomDropdown].zoomToSelection"
+          action={Action.ZoomToSelection}
+          actionArgs={undefined}
+        />
+        <DropdownMenuItemFromAction
+          mixpanelEvent="[ZoomDropdown].zoomToFit"
+          action={Action.ZoomToFit}
+          actionArgs={undefined}
+        />
+        <DropdownMenuSeparator />
+        <DropdownMenuItemFromAction
+          mixpanelEvent="[ZoomDropdown].zoomTo50%"
+          action={Action.ZoomTo50}
+          actionArgs={undefined}
+        />
+        <DropdownMenuItemFromAction
+          mixpanelEvent="[ZoomDropdown].zoomTo100%"
+          action={Action.ZoomTo100}
+          actionArgs={undefined}
+        />
+        <DropdownMenuItemFromAction
+          mixpanelEvent="[ZoomDropdown].zoomTo200%"
+          action={Action.ZoomTo200}
+          actionArgs={undefined}
+        />
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
+
+function DropdownMenuItemFromAction<T extends Action>({
+  action,
+  actionArgs,
+  mixpanelEvent,
+}: {
+  action: T;
+  actionArgs: T extends keyof ActionArgs ? ActionArgs[T] : void;
+  mixpanelEvent: string;
+}) {
+  const actionSpec = defaultActionSpec[action];
+  const shortcutDisplay = keyboardShortcutEnumToDisplay(action);
+  return (
+    <DropdownMenuItem
+      onClick={() => {
+        mixpanel.track(mixpanelEvent);
+        actionSpec.run(actionArgs);
+      }}
+    >
+      {actionSpec.label} {shortcutDisplay && <DropdownMenuShortcut>{shortcutDisplay}</DropdownMenuShortcut>}
+    </DropdownMenuItem>
+  );
+}
diff --git a/quadratic-client/src/app/ui/menus/Toolbar/index.tsx b/quadratic-client/src/app/ui/menus/Toolbar/index.tsx
new file mode 100644
index 0000000000..55f6f522b1
--- /dev/null
+++ b/quadratic-client/src/app/ui/menus/Toolbar/index.tsx
@@ -0,0 +1,2 @@
+import { Toolbar } from './Toolbar';
+export default Toolbar;
diff --git a/quadratic-client/src/app/ui/menus/TopBar/CodeOutlinesSwitch.tsx b/quadratic-client/src/app/ui/menus/TopBar/CodeOutlinesSwitch.tsx
deleted file mode 100644
index 61d374652b..0000000000
--- a/quadratic-client/src/app/ui/menus/TopBar/CodeOutlinesSwitch.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import { Switch } from '@mui/material';
-import { styled } from '@mui/material/styles';
-import { colors } from '../../../theme/colors';
-
-const CodeOutlinesSwitch = styled(Switch)(({ theme }) => {
-  return {
-    padding: '8px',
-    '& .MuiSwitch-track': {
-      borderRadius: 0,
-      background: '#fff',
-      border: `1px solid ${colors.darkGray}4d`, // hexadecimal opacity: 30%
-      opacity: 1,
-
-      '&:before, &:after': {
-        content: '""',
-        position: 'absolute',
-        top: '50%',
-        transform: 'translateY(-50%)',
-        width: 18,
-        height: 18,
-        backgroundSize: '18px',
-      },
-      '&:before': {
-        backgroundImage: `url('data:image/svg+xml;utf8,<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="${encodeURIComponent(
-          theme.palette.primary.main
-        )}" d="M6.2998 13.5L1.7998 9L6.2998 4.5L7.25605 5.45625L3.7123 9L7.25605 12.5438L6.2998 13.5ZM11.6998 13.5L10.7436 12.5438L14.2873 9L10.7436 5.45625L11.6998 4.5L16.1998 9L11.6998 13.5Z" /></svg>')`,
-        left: 12,
-        opacity: 0,
-      },
-      '&:after': {
-        backgroundImage: `url('data:image/svg+xml;utf8,<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="${encodeURIComponent(
-          colors.darkGray
-        )}" d="M14.4 16.3125L5.4 7.31255L3.7125 9.00005L7.25625 12.5438L6.3 13.5L1.8 9.00005L4.44375 6.3563L1.6875 3.60005L2.64375 2.6438L15.3563 15.3563L14.4 16.3125ZM13.5563 11.6438L12.6 10.6875L14.2875 9.00005L10.7438 5.4563L11.7 4.50005L16.2 9.00005L13.5563 11.6438Z" /></svg>')`,
-        right: 12,
-      },
-    },
-    '&.MuiSwitch-root .Mui-checked + .MuiSwitch-track': {
-      opacity: 1,
-      background: '#fff',
-
-      '&:after': {
-        opacity: 0,
-      },
-      '&:before': {
-        opacity: 1,
-      },
-    },
-    '& .MuiSwitch-thumb': {
-      transition: '150ms ease opacity',
-      background: colors.darkGray,
-      boxShadow: 'none',
-      width: 12,
-      height: 12,
-      margin: 4,
-      borderRadius: 0,
-    },
-    '&:hover .MuiSwitch-thumb': {
-      opacity: 1,
-    },
-    '& .Mui-checked .MuiSwitch-thumb': {
-      background: theme.palette.primary.main,
-    },
-  };
-});
-
-export default CodeOutlinesSwitch;
diff --git a/quadratic-client/src/app/ui/menus/TopBar/MenuLineItem.tsx b/quadratic-client/src/app/ui/menus/TopBar/MenuLineItem.tsx
deleted file mode 100644
index 66a0319d2c..0000000000
--- a/quadratic-client/src/app/ui/menus/TopBar/MenuLineItem.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { useTheme } from '@mui/material';
-
-interface IMenuLineItem {
-  primary: string;
-  secondary?: string | JSX.Element | React.ReactNode;
-  icon?: any;
-  iconColor?: string;
-  indent?: boolean;
-}
-
-export const MenuLineItem = (props: IMenuLineItem): JSX.Element => {
-  const { primary, secondary, icon: Icon, indent, iconColor } = props;
-  const theme = useTheme();
-  return (
-    <div
-      style={{
-        display: 'flex',
-        width: '100%',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        fontSize: '.875rem',
-      }}
-    >
-      <div
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          gap: '1rem',
-          ...(indent && !Icon ? { paddingLeft: '2.25rem' } : {}),
-        }}
-      >
-        {Icon && <Icon style={{ color: iconColor ?? 'inherit' }} fontSize="small" />}
-        {primary}
-      </div>
-      {secondary && (
-        <div style={{ marginLeft: '24px', fontSize: '14px', color: theme.palette.text.disabled }}>{secondary}</div>
-      )}
-    </div>
-  );
-};
diff --git a/quadratic-client/src/app/ui/menus/TopBar/SubMenus/DataMenu.tsx b/quadratic-client/src/app/ui/menus/TopBar/SubMenus/DataMenu.tsx
deleted file mode 100644
index e9d91fe0f7..0000000000
--- a/quadratic-client/src/app/ui/menus/TopBar/SubMenus/DataMenu.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-import { openCodeEditor } from '@/app/grid/actions/openCodeEditor';
-import {
-  dataValidations,
-  downloadSelectionAsCsvAction,
-  isAvailableBecauseFileLocationIsAccessibleAndWriteable,
-} from '@/app/actions';
-import { editorInteractionStateAtom } from '@/app/atoms/editorInteractionStateAtom';
-import { KeyboardSymbols } from '@/app/helpers/keyboardSymbols';
-import { useFileContext } from '@/app/ui/components/FileProvider';
-import { DataIcon } from '@/app/ui/icons';
-import { useRootRouteLoaderData } from '@/routes/_root';
-import { useFileRouteLoaderData } from '@/shared/hooks/useFileRouteLoaderData';
-import { useGlobalSnackbar } from '@/shared/components/GlobalSnackbarProvider';
-import { CSV_IMPORT_MESSAGE, EXCEL_IMPORT_MESSAGE, PARQUET_IMPORT_MESSAGE } from '@/shared/constants/appConstants';
-import { Menu, MenuDivider, MenuItem } from '@szhsin/react-menu';
-import '@szhsin/react-menu/dist/index.css';
-import { useSetRecoilState } from 'recoil';
-import { MenuLineItem } from '../MenuLineItem';
-import { TopBarMenuItem } from '../TopBarMenuItem';
-
-export const DataMenu = () => {
-  const setEditorInteractionState = useSetRecoilState(editorInteractionStateAtom);
-  const { addGlobalSnackbar } = useGlobalSnackbar();
-  const { name: fileName } = useFileContext();
-  const { isAuthenticated } = useRootRouteLoaderData();
-  const {
-    userMakingRequest: { filePermissions, fileTeamPrivacy, teamPermissions },
-  } = useFileRouteLoaderData();
-  const showManageConnections = isAvailableBecauseFileLocationIsAccessibleAndWriteable({
-    isAuthenticated,
-    filePermissions,
-    fileTeamPrivacy,
-    teamPermissions,
-  });
-
-  return (
-    <>
-      <Menu
-        menuButton={({ open }) => (
-          <TopBarMenuItem title="Data" open={open}>
-            <DataIcon fontSize="small" />
-          </TopBarMenuItem>
-        )}
-      >
-        <MenuItem onClick={openCodeEditor}>
-          <MenuLineItem primary="Open Code Editor" secondary={'/'} />
-        </MenuItem>
-        <MenuDivider />
-        <MenuItem
-          onClick={() => {
-            addGlobalSnackbar(CSV_IMPORT_MESSAGE);
-          }}
-        >
-          <MenuLineItem primary="Import from CSV" />
-        </MenuItem>
-        <MenuItem
-          onClick={() => {
-            addGlobalSnackbar(EXCEL_IMPORT_MESSAGE);
-          }}
-        >
-          <MenuLineItem primary="Import Excel" />
-        </MenuItem>
-        <MenuItem
-          onClick={() => {
-            addGlobalSnackbar(PARQUET_IMPORT_MESSAGE);
-          }}
-        >
-          <MenuLineItem primary="Import from Parquet" />
-        </MenuItem>
-        <MenuDivider />
-        <MenuItem
-          onClick={() => {
-            setEditorInteractionState((prev) => ({ ...prev, showCellTypeMenu: true }));
-          }}
-        >
-          <MenuLineItem primary="Use a connection" />
-        </MenuItem>
-        {showManageConnections && (
-          <>
-            <MenuItem onClick={() => setEditorInteractionState((prev) => ({ ...prev, showConnectionsMenu: true }))}>
-              <MenuLineItem primary="Manage connections" />
-            </MenuItem>
-          </>
-        )}
-
-        <MenuDivider />
-        <MenuItem onClick={() => setEditorInteractionState((prev) => ({ ...prev, showValidation: true }))}>
-          <MenuLineItem primary={dataValidations.label}></MenuLineItem>
-        </MenuItem>
-        <MenuDivider />
-        <MenuItem
-          onClick={() => {
-            downloadSelectionAsCsvAction.run({ fileName });
-          }}
-        >
-          <MenuLineItem
-            primary={downloadSelectionAsCsvAction.label}
-            secondary={KeyboardSymbols.Command + KeyboardSymbols.Shift + 'E'}
-          />
-        </MenuItem>
-      </Menu>
-    </>
-  );
-};
diff --git a/quadratic-client/src/app/ui/menus/TopBar/SubMenus/FormatMenu/FormatMenu.tsx b/quadratic-client/src/app/ui/menus/TopBar/SubMenus/FormatMenu/FormatMenu.tsx
deleted file mode 100644
index ed3f0d9f71..0000000000
--- a/quadratic-client/src/app/ui/menus/TopBar/SubMenus/FormatMenu/FormatMenu.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-import {
-  BorderNoneIcon,
-  FontBoldIcon,
-  FontItalicIcon,
-  PaintBucketIcon,
-  PaletteOutlined,
-  TextAlignCenterIcon,
-  TextAlignLeftIcon,
-  TextAlignRightIcon,
-  TextClipIcon,
-  TextColorIcon,
-  TextNoneIcon,
-  TextOverflowIcon,
-  TextVerticalAlignBottomIcon,
-  TextVerticalAlignMiddleIcon,
-  TextVerticalAlignTopIcon,
-  WrapTextIcon,
-} from '@/app/ui/icons';
-import { Menu, MenuChangeEvent, MenuDivider, MenuItem, SubMenu } from '@szhsin/react-menu';
-import { useCallback } from 'react';
-import { focusGrid } from '../../../../../helpers/focusGrid';
-import { KeyboardSymbols } from '../../../../../helpers/keyboardSymbols';
-import { QColorPicker } from '../../../../components/qColorPicker';
-import { MenuLineItem } from '../../MenuLineItem';
-import { TopBarMenuItem } from '../../TopBarMenuItem';
-import {
-  clearFillColor,
-  clearFormattingAndBorders,
-  setAlign,
-  setBold,
-  setFillColor,
-  setItalic,
-  setTextColor,
-  setVerticalAlign,
-  setWrap,
-} from '../formatCells';
-import './formatMenuStyles.scss';
-import { useGetBorderMenu } from './useGetBorderMenu';
-
-export const FormatMenu = () => {
-  // focus canvas after the format menu closes
-  const onMenuChange = useCallback((event: MenuChangeEvent) => {
-    if (!event.open) focusGrid();
-  }, []);
-
-  const borders = useGetBorderMenu();
-
-  return (
-    <Menu
-      onMenuChange={onMenuChange}
-      menuButton={({ open }) => (
-        <TopBarMenuItem title="Cell format" open={open}>
-          <PaletteOutlined fontSize="small" />
-        </TopBarMenuItem>
-      )}
-    >
-      <MenuItem onClick={() => setBold()}>
-        <MenuLineItem primary="Bold" secondary={KeyboardSymbols.Command + 'B'} icon={FontBoldIcon} />
-      </MenuItem>
-      <MenuItem onClick={() => setItalic()}>
-        <MenuLineItem primary="Italic" secondary={KeyboardSymbols.Command + 'I'} icon={FontItalicIcon} />
-      </MenuItem>
-      <SubMenu
-        className="color-picker-submenu"
-        id="TextColorMenuID"
-        label={<MenuLineItem primary="Text color" icon={TextColorIcon} />}
-      >
-        <QColorPicker onChangeComplete={setTextColor} onClear={() => setTextColor()} />
-      </SubMenu>
-
-      <MenuDivider />
-      <MenuItem onClick={() => setAlign('left')}>
-        <MenuLineItem primary="Left" icon={TextAlignLeftIcon} secondary="" />
-      </MenuItem>
-      <MenuItem onClick={() => setAlign('center')}>
-        <MenuLineItem primary="Center" icon={TextAlignCenterIcon} />
-      </MenuItem>
-      <MenuItem onClick={() => setAlign('right')}>
-        <MenuLineItem primary="Right" icon={TextAlignRightIcon} />
-      </MenuItem>
-
-      <MenuDivider />
-      <MenuItem onClick={() => setVerticalAlign('top')}>
-        <MenuLineItem primary="Top" icon={TextVerticalAlignTopIcon} secondary="" />
-      </MenuItem>
-      <MenuItem onClick={() => setVerticalAlign('middle')}>
-        <MenuLineItem primary="Middle" icon={TextVerticalAlignMiddleIcon} />
-      </MenuItem>
-      <MenuItem onClick={() => setVerticalAlign('bottom')}>
-        <MenuLineItem primary="Bottom" icon={TextVerticalAlignBottomIcon} />
-      </MenuItem>
-
-      <MenuDivider />
-      <MenuItem onClick={() => setWrap('overflow')}>
-        <MenuLineItem primary="Overflow" icon={TextOverflowIcon} secondary="" />
-      </MenuItem>
-      <MenuItem onClick={() => setWrap('wrap')}>
-        <MenuLineItem primary="Wrap" icon={WrapTextIcon} />
-      </MenuItem>
-      <MenuItem onClick={() => setWrap('clip')}>
-        <MenuLineItem primary="Clip" icon={TextClipIcon} />
-      </MenuItem>
-
-      <MenuDivider />
-      <SubMenu
-        className="color-picker-submenu"
-        id="FillColorMenuID"
-        label={<MenuLineItem primary="Fill color" icon={PaintBucketIcon} />}
-      >
-        <QColorPicker onChangeComplete={setFillColor} onClear={clearFillColor} />
-      </SubMenu>
-
-      <SubMenu label={<MenuLineItem primary="Border" icon={BorderNoneIcon} />}>{borders}</SubMenu>
-
-      <MenuDivider />
-      <MenuItem onClick={clearFormattingAndBorders}>
-        <MenuLineItem primary="Clear formatting" secondary={KeyboardSymbols.Command + '\\'} icon={TextNoneIcon} />
-      </MenuItem>
-    </Menu>
-  );
-};
diff --git a/quadratic-client/src/app/ui/menus/TopBar/SubMenus/FormatMenu/useGetBorderMenu.css b/quadratic-client/src/app/ui/menus/TopBar/SubMenus/FormatMenu/useGetBorderMenu.css
deleted file mode 100644
index 3303a422a6..0000000000
--- a/quadratic-client/src/app/ui/menus/TopBar/SubMenus/FormatMenu/useGetBorderMenu.css
+++ /dev/null
@@ -1,45 +0,0 @@
-.borderMenu {
-  padding: 5px 10px 0;
-  display: flex;
-}
-
-.borderMenuLine {
-  display: flex;
-  padding-right: 5px;
-}
-
-.borderMenuType {
-  cursor: pointer;
-  padding: 2px;
-}
-
-.borderMenuType:hover:not(.borderSelected):not(.borderDisabled) {
-  background: #f6f8fa;
-}
-
-.borderSelected {
-  background: #cfd7de;
-}
-
-.borderMenuFormatting {
-  border-left: 1px solid lightgray;
-}
-
-.borderSubmenu {
-  margin: 2px 0;
-}
-
-.borderSubmenu > .szh-menu__item--submenu {
-  padding: 0;
-  padding-right: 25px;
-  margin: 2px -5px 7px 5px;
-  background: transparent;
-}
-
-#FillColorMenuID > div > div {
-  box-shadow: none !important;
-}
-
-.borderDisabled {
-  opacity: 0.25;
-}
diff --git a/quadratic-client/src/app/ui/menus/TopBar/SubMenus/FormatMenu/useGetBorderMenu.tsx b/quadratic-client/src/app/ui/menus/TopBar/SubMenus/FormatMenu/useGetBorderMenu.tsx
deleted file mode 100644
index 5ef1a5169e..0000000000
--- a/quadratic-client/src/app/ui/menus/TopBar/SubMenus/FormatMenu/useGetBorderMenu.tsx
+++ /dev/null
@@ -1,183 +0,0 @@
-import { borderMenuAtom } from '@/app/atoms/borderMenuAtom';
-import { convertReactColorToString } from '@/app/helpers/convertColor';
-import { BorderSelection, CellBorderLine } from '@/app/quadratic-core-types';
-import { QColorPicker } from '@/app/ui/components/qColorPicker';
-import {
-  BorderAllIcon,
-  BorderBottomIcon,
-  BorderColorIcon,
-  BorderHorizontalIcon,
-  BorderInnerIcon,
-  BorderLeftIcon,
-  BorderNoneIcon,
-  BorderOuterIcon,
-  BorderRightIcon,
-  BorderStyleIcon,
-  BorderTopIcon,
-  BorderVerticalIcon,
-} from '@/app/ui/icons';
-import { useBorders } from '@/app/ui/menus/TopBar/SubMenus/useBorders';
-import { Tooltip } from '@mui/material';
-import { ClickEvent, MenuItem, SubMenu } from '@szhsin/react-menu';
-import { useCallback } from 'react';
-import { ColorResult } from 'react-color';
-import { useRecoilValue } from 'recoil';
-import './useGetBorderMenu.css';
-
-export function useGetBorderMenu(): JSX.Element | null {
-  const { color } = useRecoilValue(borderMenuAtom);
-  const { disabled, changeBorders } = useBorders();
-
-  const handleChangeBorderSelection = useCallback(
-    (selection: BorderSelection) => {
-      changeBorders({ selection });
-    },
-    [changeBorders]
-  );
-
-  const handleChangeBorderColor = useCallback(
-    (pickedColor: ColorResult) => {
-      const color = convertReactColorToString(pickedColor);
-      changeBorders({ color });
-    },
-    [changeBorders]
-  );
-
-  const handleChangeBorderLine = useCallback(
-    (e: ClickEvent, line: CellBorderLine): void => {
-      e.keepOpen = true;
-      changeBorders({ line });
-    },
-    [changeBorders]
-  );
-
-  if (disabled) {
-    return null;
-  }
-
-  return (
-    <div className="borderMenu">
-      <div className="borderMenuLines">
-        <div className="borderMenuLine">
-          <BorderSelectionButton
-            type={'all'}
-            title="All borders"
-            label={<BorderAllIcon className="h-5 w-5" />}
-            onClick={handleChangeBorderSelection}
-          />
-          <BorderSelectionButton
-            type={'inner'}
-            title="Inner borders"
-            label={<BorderInnerIcon className="h-5 w-5" />}
-            onClick={handleChangeBorderSelection}
-          />
-          <BorderSelectionButton
-            type={'outer'}
-            title="Outer borders"
-            label={<BorderOuterIcon className="h-5 w-5" />}
-            onClick={handleChangeBorderSelection}
-          />
-          <BorderSelectionButton
-            type={'horizontal'}
-            title="Horizontal borders"
-            label={<BorderHorizontalIcon className="h-5 w-5" />}
-            onClick={handleChangeBorderSelection}
-          />
-          <BorderSelectionButton
-            type={'vertical'}
-            title="Vertical borders"
-            label={<BorderVerticalIcon className="h-5 w-5" />}
-            onClick={handleChangeBorderSelection}
-          />
-        </div>
-        <div className="borderMenuLine">
-          <BorderSelectionButton
-            type={'left'}
-            title="Left border"
-            label={<BorderLeftIcon className="h-5 w-5" />}
-            onClick={handleChangeBorderSelection}
-          />
-          <BorderSelectionButton
-            type={'top'}
-            title="Top border"
-            label={<BorderTopIcon className="h-5 w-5" />}
-            onClick={handleChangeBorderSelection}
-          />
-          <BorderSelectionButton
-            type={'right'}
-            title="Right border"
-            label={<BorderRightIcon className="h-5 w-5" />}
-            onClick={handleChangeBorderSelection}
-          />
-          <BorderSelectionButton
-            type={'bottom'}
-            title="Bottom border"
-            label={<BorderBottomIcon className="h-5 w-5" />}
-            onClick={handleChangeBorderSelection}
-          />
-          <BorderSelectionButton
-            type={'clear'}
-            title="Clear borders"
-            label={<BorderNoneIcon className="h-5 w-5" />}
-            onClick={handleChangeBorderSelection}
-          />
-        </div>
-      </div>
-      <div className="borderMenuFormatting">
-        <SubMenu
-          className="borderSubmenu color-picker-submenu"
-          id="FillBorderColorMenuID"
-          label={<BorderColorIcon className="mr-1 h-5 w-5" style={{ color }}></BorderColorIcon>}
-        >
-          <QColorPicker onChangeComplete={handleChangeBorderColor} />
-        </SubMenu>
-        <SubMenu
-          id="BorderLineStyleMenuID"
-          className="borderSubmenu"
-          label={<BorderStyleIcon className="mr-1 h-5 w-5" />}
-        >
-          <MenuItem onClick={(e) => handleChangeBorderLine(e, 'line1')}>
-            <div className="lineStyleBorder normalBorder"></div>
-          </MenuItem>
-          <MenuItem onClick={(e) => handleChangeBorderLine(e, 'line2')}>
-            <div className="lineStyleBorder doubleBorder"></div>
-          </MenuItem>
-          <MenuItem onClick={(e) => handleChangeBorderLine(e, 'line3')}>
-            <div className="lineStyleBorder tripleBorder"></div>
-          </MenuItem>
-          <MenuItem onClick={(e) => handleChangeBorderLine(e, 'dashed')}>
-            <div className="lineStyleBorder dashedBorder"></div>
-          </MenuItem>
-          <MenuItem onClick={(e) => handleChangeBorderLine(e, 'dotted')}>
-            <div className="lineStyleBorder dottedBorder"></div>
-          </MenuItem>
-          <MenuItem onClick={(e) => handleChangeBorderLine(e, 'double')}>
-            <div className="lineStyleBorder twoLineBorder"></div>
-          </MenuItem>
-        </SubMenu>
-      </div>
-    </div>
-  );
-}
-
-function BorderSelectionButton(props: {
-  type: BorderSelection;
-  title: string;
-  label: JSX.Element;
-  disabled?: boolean;
-  onClick: (type: BorderSelection) => void;
-}): JSX.Element {
-  const { type, title, label, disabled, onClick } = props;
-  return (
-    <div
-      className={`borderMenuType ${disabled ? 'borderDisabled' : ''}`}
-      onClick={() => {
-        if (!disabled) onClick(type);
-      }}
-    >
-      <Tooltip title={title} arrow disableInteractive>
-        {label}
-      </Tooltip>
-    </div>
-  );
-}
diff --git a/quadratic-client/src/app/ui/menus/TopBar/SubMenus/NumberFormatMenu.tsx b/quadratic-client/src/app/ui/menus/TopBar/SubMenus/NumberFormatMenu.tsx
deleted file mode 100644
index 937b3f8a70..0000000000
--- a/quadratic-client/src/app/ui/menus/TopBar/SubMenus/NumberFormatMenu.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-import { Menu, MenuDivider, MenuInstance, MenuItem, SubMenu } from '@szhsin/react-menu';
-import '@szhsin/react-menu/dist/index.css';
-import { MenuLineItem } from '../MenuLineItem';
-import {
-  removeCellNumericFormat,
-  setCellCommas,
-  textFormatDecreaseDecimalPlaces,
-  textFormatIncreaseDecimalPlaces,
-  textFormatSetCurrency,
-  textFormatSetExponential,
-  textFormatSetPercentage,
-} from './formatCells';
-
-import { focusGrid } from '@/app/helpers/focusGrid';
-import { DateFormat } from '@/app/ui/components/DateFormat';
-import {
-  DecimalDecreaseIcon,
-  DecimalIncreaseIcon,
-  DollarIcon,
-  FunctionIcon,
-  Icon123,
-  MagicWandIcon,
-  PercentIcon,
-  QuoteIcon,
-} from '@/app/ui/icons';
-import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
-import '@szhsin/react-menu/dist/index.css';
-import { useRef, useState } from 'react';
-import { TopBarMenuItem } from '../TopBarMenuItem';
-
-export const NumberFormatMenu = () => {
-  const menuRef = useRef<MenuInstance | null>(null);
-  const [openDateFormatMenu, setOpenDateFormatMenu] = useState(false);
-
-  const closeMenu = () => {
-    menuRef.current?.closeMenu();
-    focusGrid();
-  };
-
-  return (
-    <Menu
-      instanceRef={menuRef}
-      menuButton={({ open }) => (
-        <TopBarMenuItem title="Number format" open={open}>
-          <Icon123 style={{ fontSize: '1.8125rem' }} />
-        </TopBarMenuItem>
-      )}
-    >
-      <MenuItem onClick={() => removeCellNumericFormat()}>
-        <MenuLineItem primary="Automatic" secondary={<code className="text-xs">999.99</code>} icon={MagicWandIcon} />
-      </MenuItem>
-      <MenuItem onClick={() => textFormatSetCurrency()}>
-        <MenuLineItem primary="Currency" secondary={<code className="text-xs">$9,999.99</code>} icon={DollarIcon} />
-      </MenuItem>
-      <MenuItem onClick={() => textFormatSetPercentage()}>
-        <MenuLineItem primary="Percent" secondary={<code className="text-xs">99.99%</code>} icon={PercentIcon} />
-      </MenuItem>
-      <MenuItem onClick={() => textFormatSetExponential()}>
-        <MenuLineItem primary="Scientific" secondary={<code className="text-xs">6.02E+23</code>} icon={FunctionIcon} />
-      </MenuItem>
-      <MenuItem onClick={() => setCellCommas()}>
-        <MenuLineItem primary="Toggle commas" secondary={<code className="text-xs">9,999.99</code>} icon={QuoteIcon} />
-      </MenuItem>
-
-      <MenuDivider />
-
-      <MenuItem
-        onClick={() => {
-          textFormatIncreaseDecimalPlaces();
-        }}
-      >
-        <MenuLineItem
-          primary="Increase decimals"
-          secondary={<code className="text-xs">.0000</code>}
-          icon={DecimalIncreaseIcon}
-        />
-      </MenuItem>
-      <MenuItem
-        onClick={() => {
-          textFormatDecreaseDecimalPlaces();
-        }}
-      >
-        <MenuLineItem
-          primary="Decrease decimals"
-          secondary={<code className="text-xs">.0</code>}
-          icon={DecimalDecreaseIcon}
-        />
-      </MenuItem>
-
-      <MenuDivider />
-
-      <SubMenu
-        label={
-          <MenuLineItem
-            primary="Date and time format"
-            secondary={`3/4/${new Date().getFullYear()}`}
-            icon={CalendarMonthIcon}
-          ></MenuLineItem>
-        }
-        onMenuChange={(e) => setOpenDateFormatMenu(e.open)}
-      >
-        <DateFormat status={openDateFormatMenu} closeMenu={closeMenu} className="block min-w-80 px-4 py-2" />
-      </SubMenu>
-    </Menu>
-  );
-};
diff --git a/quadratic-client/src/app/ui/menus/TopBar/SubMenus/QuadraticMenu.tsx b/quadratic-client/src/app/ui/menus/TopBar/SubMenus/QuadraticMenu.tsx
deleted file mode 100644
index ee2e1f0910..0000000000
--- a/quadratic-client/src/app/ui/menus/TopBar/SubMenus/QuadraticMenu.tsx
+++ /dev/null
@@ -1,220 +0,0 @@
-import { quadraticCore } from '@/app/web-workers/quadraticCore/quadraticCore';
-import { useRootRouteLoaderData } from '@/routes/_root';
-import { useGlobalSnackbar } from '@/shared/components/GlobalSnackbarProvider';
-import { useFileRouteLoaderData } from '@/shared/hooks/useFileRouteLoaderData';
-import { isMac } from '@/shared/utils/isMac';
-import { Check } from '@mui/icons-material';
-import { Menu, MenuDivider, MenuItem, SubMenu } from '@szhsin/react-menu';
-import '@szhsin/react-menu/dist/index.css';
-import { useEffect } from 'react';
-import { isMobile } from 'react-device-detect';
-import { useParams } from 'react-router';
-import { useSubmit } from 'react-router-dom';
-import { useRecoilState } from 'recoil';
-import { authClient } from '../../../../../auth';
-import {
-  copyAction,
-  createNewFileAction,
-  cutAction,
-  deleteFile,
-  downloadFileAction,
-  duplicateFileAction,
-  findInSheet,
-  findInSheets,
-  pasteAction,
-  provideFeedbackAction,
-  redoAction,
-  undoAction,
-  viewDocsAction,
-} from '../../../../actions';
-import { editorInteractionStateAtom } from '../../../../atoms/editorInteractionStateAtom';
-import { copyToClipboard, cutToClipboard, pasteFromClipboard } from '../../../../grid/actions/clipboard/clipboard';
-import { pixiApp } from '../../../../gridGL/pixiApp/PixiApp';
-import { KeyboardSymbols } from '../../../../helpers/keyboardSymbols';
-import { useFileContext } from '../../../components/FileProvider';
-import { MenuLineItem } from '../MenuLineItem';
-import { TopBarMenuItem } from '../TopBarMenuItem';
-import { useGridSettings } from './useGridSettings';
-
-export const QuadraticMenu = () => {
-  const [editorInteractionState, setEditorInteractionState] = useRecoilState(editorInteractionStateAtom);
-  const settings = useGridSettings();
-  const submit = useSubmit();
-  const { uuid } = useParams() as { uuid: string };
-  const { addGlobalSnackbar } = useGlobalSnackbar();
-  const { name } = useFileContext();
-  const { isAuthenticated } = useRootRouteLoaderData();
-  const {
-    userMakingRequest: { fileTeamPrivacy, teamPermissions },
-  } = useFileRouteLoaderData();
-  const { permissions } = editorInteractionState;
-
-  const isAvailableArgs = { filePermissions: permissions, fileTeamPrivacy, isAuthenticated, teamPermissions };
-
-  // For mobile, set Headers to not visible by default
-  useEffect(() => {
-    if (isMobile) {
-      settings.setShowHeadings(false);
-      pixiApp.viewportChanged();
-    }
-    // eslint-disable-next-line
-  }, []);
-
-  return (
-    <>
-      <Menu
-        menuButton={({ open }) => (
-          <TopBarMenuItem title="Main menu" open={open}>
-            <img src="/favicon.ico" width="22" height="22" alt="Quadratic Icon" />
-          </TopBarMenuItem>
-        )}
-      >
-        {isAuthenticated && (
-          <>
-            <MenuItem href="/" style={{ textDecoration: 'none' }}>
-              <MenuLineItem primary="Back to dashboard" />
-            </MenuItem>
-            <MenuDivider />
-          </>
-        )}
-        {isAuthenticated && (
-          <SubMenu label={<MenuLineItem primary="File" />}>
-            {createNewFileAction.isAvailable(isAvailableArgs) && (
-              <MenuItem
-                onClick={() => {
-                  createNewFileAction.run({ setEditorInteractionState });
-                }}
-              >
-                <MenuLineItem primary={createNewFileAction.label} />
-              </MenuItem>
-            )}
-            {duplicateFileAction.isAvailable(isAvailableArgs) && (
-              <MenuItem onClick={() => duplicateFileAction.run({ uuid, submit })}>
-                <MenuLineItem primary={duplicateFileAction.label} />
-              </MenuItem>
-            )}
-            {downloadFileAction.isAvailable(isAvailableArgs) && (
-              <MenuItem
-                onClick={() => {
-                  downloadFileAction.run({ name });
-                }}
-              >
-                <MenuLineItem primary={downloadFileAction.label} />
-              </MenuItem>
-            )}
-            {deleteFile.isAvailable(isAvailableArgs) && (
-              <>
-                <MenuDivider />
-                <MenuItem
-                  onClick={() => {
-                    deleteFile.run({ uuid, addGlobalSnackbar });
-                  }}
-                >
-                  <MenuLineItem primary={deleteFile.label} />
-                </MenuItem>
-              </>
-            )}
-          </SubMenu>
-        )}
-        <SubMenu label={<MenuLineItem primary="Edit" />}>
-          {undoAction.isAvailable(isAvailableArgs) && (
-            <MenuItem onClick={() => quadraticCore.undo()} disabled={!editorInteractionState.undo}>
-              <MenuLineItem primary={undoAction.label} secondary={KeyboardSymbols.Command + 'Z'} />
-            </MenuItem>
-          )}
-          {redoAction.isAvailable(isAvailableArgs) && (
-            <>
-              <MenuItem onClick={() => quadraticCore.redo()} disabled={!editorInteractionState.redo}>
-                <MenuLineItem
-                  primary={redoAction.label}
-                  secondary={
-                    isMac ? KeyboardSymbols.Shift + KeyboardSymbols.Command + 'Z' : KeyboardSymbols.Command + 'Y'
-                  }
-                />
-              </MenuItem>
-              <MenuDivider />
-            </>
-          )}
-
-          {cutAction.isAvailable(isAvailableArgs) && (
-            <MenuItem onClick={cutToClipboard}>
-              <MenuLineItem primary={cutAction.label} secondary={KeyboardSymbols.Command + 'X'} />
-            </MenuItem>
-          )}
-          <MenuItem onClick={copyToClipboard}>
-            <MenuLineItem primary={copyAction.label} secondary={KeyboardSymbols.Command + 'C'} />
-          </MenuItem>
-          {pasteAction.isAvailable(isAvailableArgs) && (
-            <MenuItem onClick={() => pasteFromClipboard()}>
-              <MenuLineItem primary={pasteAction.label} secondary={KeyboardSymbols.Command + 'V'} />
-            </MenuItem>
-          )}
-
-          <MenuDivider />
-          <MenuItem onClick={() => setEditorInteractionState((state) => ({ ...state, showSearch: true }))}>
-            <MenuLineItem primary={findInSheet.label} secondary={KeyboardSymbols.Command + 'F'} />
-          </MenuItem>
-          <MenuItem
-            onClick={() => setEditorInteractionState((state) => ({ ...state, showSearch: { sheet_id: undefined } }))}
-          >
-            <MenuLineItem
-              primary={findInSheets.label}
-              secondary={KeyboardSymbols.Shift + KeyboardSymbols.Command + 'F'}
-            />
-          </MenuItem>
-        </SubMenu>
-        <SubMenu label={<MenuLineItem primary="View" />}>
-          <MenuItem onClick={() => settings.setShowHeadings(!settings.showHeadings)}>
-            <MenuLineItem primary="Show row and column headings" icon={settings.showHeadings && Check} indent />
-          </MenuItem>
-          <MenuItem onClick={() => settings.setShowGridAxes(!settings.showGridAxes)}>
-            <MenuLineItem primary="Show grid axis" icon={settings.showGridAxes && Check} indent />
-          </MenuItem>
-          <MenuItem onClick={() => settings.setShowGridLines(!settings.showGridLines)}>
-            <MenuLineItem primary="Show grid lines" icon={settings.showGridLines && Check} indent />
-          </MenuItem>
-          <MenuItem onClick={() => settings.setShowCellTypeOutlines(!settings.showCellTypeOutlines)}>
-            <MenuLineItem primary="Show code cell outlines" icon={settings.showCellTypeOutlines && Check} indent />
-          </MenuItem>
-          <MenuItem onClick={() => settings.setShowCodePeek(!settings.showCodePeek)}>
-            <MenuLineItem primary="Show code peek" icon={settings.showCodePeek && Check} indent />
-          </MenuItem>
-          <MenuDivider />
-          <MenuItem onClick={() => settings.setPresentationMode(!settings.presentationMode)}>
-            <MenuLineItem primary="Presentation mode" icon={settings.presentationMode && Check} indent />
-          </MenuItem>
-          {/*
-          Commented out because the editor switches this state automatically when the user
-          is editing a formula.
-          <MenuItem
-            type="checkbox"
-            checked={settings.showA1Notation}
-            onClick={() => settings.setShowA1Notation(!settings.showA1Notation)}
-          >
-            Show A1 notation on headings
-          </MenuItem> */}
-        </SubMenu>
-
-        <SubMenu label={<MenuLineItem primary="Help" />}>
-          <MenuItem onClick={() => viewDocsAction.run()}>
-            <MenuLineItem primary={viewDocsAction.label} />
-          </MenuItem>
-          {provideFeedbackAction.isAvailable(isAvailableArgs) && (
-            <MenuItem onClick={() => provideFeedbackAction.run({ setEditorInteractionState })}>
-              <MenuLineItem primary={provideFeedbackAction.label} />
-            </MenuItem>
-          )}
-        </SubMenu>
-
-        {isAuthenticated && (
-          <>
-            <MenuDivider />
-            <MenuItem onClick={() => authClient.logout()}>
-              <MenuLineItem primary="Log out" />
-            </MenuItem>
-          </>
-        )}
-      </Menu>
-    </>
-  );
-};
diff --git a/quadratic-client/src/app/ui/menus/TopBar/TopBar.tsx b/quadratic-client/src/app/ui/menus/TopBar/TopBar.tsx
index 676cc9f8d2..c097b61e88 100644
--- a/quadratic-client/src/app/ui/menus/TopBar/TopBar.tsx
+++ b/quadratic-client/src/app/ui/menus/TopBar/TopBar.tsx
@@ -1,30 +1,22 @@
-import { KeyboardSymbols } from '@/app/helpers/keyboardSymbols';
-import { CommandPaletteIcon } from '@/app/ui/icons';
-import { SwitchApp } from '@/shared/shadcn/ui/switch';
+import { isEmbed } from '@/app/helpers/isEmbed';
+import TopBarFileMenu from '@/app/ui/menus/TopBar/TopBarFileMenu';
+import { QuadraticLogo } from '@/shared/components/QuadraticLogo';
+import { VERSION } from '@/shared/constants/appConstants';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/shared/shadcn/ui/dropdown-menu';
 import { isElectron } from '@/shared/utils/isElectron';
-import { Tooltip, useMediaQuery, useTheme } from '@mui/material';
-import { useRecoilState } from 'recoil';
-import { hasPermissionToEditFile } from '../../../actions';
-import { editorInteractionStateAtom } from '../../../atoms/editorInteractionStateAtom';
 import { electronMaximizeCurrentWindow } from '../../../helpers/electronMaximizeCurrentWindow';
-import { isEmbed } from '../../../helpers/isEmbed';
-import { DataMenu } from './SubMenus/DataMenu';
-import { FormatMenu } from './SubMenus/FormatMenu/FormatMenu';
-import { NumberFormatMenu } from './SubMenus/NumberFormatMenu';
-import { QuadraticMenu } from './SubMenus/QuadraticMenu';
-import { useGridSettings } from './SubMenus/useGridSettings';
-import { TopBarFileMenu } from './TopBarFileMenu';
-import { TopBarMenuItem } from './TopBarMenuItem';
+import { TopBarFileNameAndLocationMenu } from './TopBarFileNameAndLocationMenu';
 import { TopBarShareButton } from './TopBarShareButton';
 import { TopBarUsers } from './TopBarUsers';
-import { TopBarZoomMenu } from './TopBarZoomMenu';
 
 export const TopBar = () => {
-  const theme = useTheme();
-  const isDesktop = useMediaQuery(theme.breakpoints.up('md'));
-  const [editorInteractionState, setEditorInteractionState] = useRecoilState(editorInteractionStateAtom);
-  const { permissions } = editorInteractionState;
-  const { showCellTypeOutlines, setShowCellTypeOutlines } = useGridSettings();
+  // TODO: what about embedable view? should we show the file menu?
 
   return (
     <div
@@ -32,7 +24,7 @@ export const TopBar = () => {
         // Disable right-click
         event.preventDefault();
       }}
-      className="relative flex h-12 w-full select-none justify-between gap-2 border-b border-border bg-background"
+      className="relative flex h-12 w-full flex-shrink-0 select-none justify-between gap-2 border-b border-border bg-background pl-2 pr-4"
       style={
         isElectron()
           ? {
@@ -49,23 +41,36 @@ export const TopBar = () => {
       }}
     >
       <div
-        className="flex items-stretch lg:basis-1/3"
+        className="flex items-center lg:basis-1/3"
         style={{
           //@ts-expect-error
           WebkitAppRegion: 'no-drag',
         }}
       >
-        <QuadraticMenu />
-        {hasPermissionToEditFile(permissions) && isDesktop && (
-          <>
-            <DataMenu />
-            <FormatMenu />
-            <NumberFormatMenu />
-          </>
+        {!isEmbed && (
+          <div className="hidden lg:block">
+            <TopBarFileMenu />
+          </div>
         )}
+        <DropdownMenu>
+          <DropdownMenuTrigger className="flex items-center gap-0 self-stretch px-2 md:hidden">
+            <QuadraticLogo />
+          </DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuItem
+              onClick={() => {
+                window.location.href = '/';
+              }}
+            >
+              Back to dashboard
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem disabled>{VERSION}</DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
       </div>
 
-      <TopBarFileMenu />
+      <TopBarFileNameAndLocationMenu />
 
       <div
         className="flex items-center justify-end gap-3 lg:basis-1/3"
@@ -74,32 +79,14 @@ export const TopBar = () => {
           WebkitAppRegion: 'no-drag',
         }}
       >
-        {isDesktop && !isEmbed && (
+        {!isEmbed && (
           <>
             <TopBarUsers />
-            <TopBarShareButton />
-            <Tooltip title={`${showCellTypeOutlines ? 'Hide' : 'Show'} code cell outlines`} arrow>
-              <SwitchApp checked={showCellTypeOutlines} onCheckedChange={setShowCellTypeOutlines} />
-            </Tooltip>
+            <div className="hidden md:block">
+              <TopBarShareButton />
+            </div>
           </>
         )}
-        <div className="flex self-stretch">
-          {isDesktop && (
-            <TopBarMenuItem
-              title={`Command palette (${KeyboardSymbols.Command + 'P'})`}
-              noDropdown
-              buttonProps={{
-                style: { alignSelf: 'stretch' },
-                onClick: () => {
-                  setEditorInteractionState((prev) => ({ ...prev, showCommandPalette: true }));
-                },
-              }}
-            >
-              <CommandPaletteIcon style={{ fontSize: '22px' }} />
-            </TopBarMenuItem>
-          )}
-          <TopBarZoomMenu />
-        </div>
       </div>
     </div>
   );
diff --git a/quadratic-client/src/app/ui/menus/TopBar/TopBarFileMenu/EditMenubarMenu.tsx b/quadratic-client/src/app/ui/menus/TopBar/TopBarFileMenu/EditMenubarMenu.tsx
new file mode 100644
index 0000000000..6a8a8a9a69
--- /dev/null
+++ b/quadratic-client/src/app/ui/menus/TopBar/TopBarFileMenu/EditMenubarMenu.tsx
@@ -0,0 +1,29 @@
+import { Action } from '@/app/actions/actions';
+import { MenubarItemAction } from '@/app/ui/menus/TopBar/TopBarFileMenu/MenubarItemAction';
+import { MenubarContent, MenubarMenu, MenubarSeparator, MenubarTrigger } from '@/shared/shadcn/ui/menubar';
+
+export const EditMenubarMenu = () => {
+  return (
+    <MenubarMenu>
+      <MenubarTrigger>Edit</MenubarTrigger>
+      <MenubarContent className="pointer-move-ignore">
+        <MenubarItemAction action={Action.Undo} actionArgs={undefined} />
+        <MenubarItemAction action={Action.Redo} actionArgs={undefined} />
+
+        <MenubarSeparator />
+        <MenubarItemAction action={Action.Cut} actionArgs={undefined} />
+        <MenubarItemAction action={Action.Copy} actionArgs={undefined} />
+        <MenubarItemAction action={Action.Paste} actionArgs={undefined} />
+        <MenubarItemAction action={Action.PasteValuesOnly} actionArgs={undefined} />
+        <MenubarItemAction action={Action.PasteFormattingOnly} actionArgs={undefined} />
+        <MenubarSeparator />
+        <MenubarItemAction action={Action.ShowGoToMenu} actionArgs={undefined} />
+        <MenubarItemAction action={Action.FindInCurrentSheet} actionArgs={undefined} />
+        <MenubarItemAction action={Action.FindInAllSheets} actionArgs={undefined} />
+        <MenubarSeparator />
+        <MenubarItemAction action={Action.CopyAsPng} actionArgs={undefined} />
+        <MenubarItemAction action={Action.DownloadAsCsv} actionArgs={undefined} />
+      </MenubarContent>
+    </MenubarMenu>
+  );
+};
diff --git a/quadratic-client/src/app/ui/menus/TopBar/TopBarFileMenu/FileMenubarMenu.tsx b/quadratic-client/src/app/ui/menus/TopBar/TopBarFileMenu/FileMenubarMenu.tsx
new file mode 100644
index 0000000000..c69da9a2d6
--- /dev/null
+++ b/quadratic-client/src/app/ui/menus/TopBar/TopBarFileMenu/FileMenubarMenu.tsx
@@ -0,0 +1,64 @@
+import { createNewFileAction, deleteFile, duplicateFileAction } from '@/app/actions';
+import { Action } from '@/app/actions/actions';
+import { editorInteractionStateAtom } from '@/app/atoms/editorInteractionStateAtom';
+import { useFileContext } from '@/app/ui/components/FileProvider';
+import { useIsAvailableArgs } from '@/app/ui/hooks/useIsAvailableArgs';
+import { MenubarItemAction } from '@/app/ui/menus/TopBar/TopBarFileMenu/MenubarItemAction';
+import { useRootRouteLoaderData } from '@/routes/_root';
+import { useGlobalSnackbar } from '@/shared/components/GlobalSnackbarProvider';
+import { DeleteIcon, DraftIcon, FileCopyIcon } from '@/shared/components/Icons';
+import { useFileRouteLoaderData } from '@/shared/hooks/useFileRouteLoaderData';
+import { MenubarContent, MenubarItem, MenubarMenu, MenubarSeparator, MenubarTrigger } from '@/shared/shadcn/ui/menubar';
+import { useSubmit } from 'react-router-dom';
+import { useSetRecoilState } from 'recoil';
+
+// TODO: (enhancement) move these into `fileActionsSpec` by making the `.run()`
+// function of each accessible from outside of react
+
+export const FileMenubarMenu = () => {
+  const { name } = useFileContext();
+  const submit = useSubmit();
+  const setEditorInteractionState = useSetRecoilState(editorInteractionStateAtom);
+  const { isAuthenticated } = useRootRouteLoaderData();
+  const {
+    file: { uuid: fileUuid },
+  } = useFileRouteLoaderData();
+  const { addGlobalSnackbar } = useGlobalSnackbar();
+  const isAvailableArgs = useIsAvailableArgs();
+
+  if (!isAuthenticated) return null;
+
+  return (
+    <MenubarMenu>
+      <MenubarTrigger>File</MenubarTrigger>
+      <MenubarContent className="pointer-move-ignore">
+        {createNewFileAction.isAvailable(isAvailableArgs) && (
+          <MenubarItem onClick={() => createNewFileAction.run({ setEditorInteractionState })}>
+            <DraftIcon /> {createNewFileAction.label}
+          </MenubarItem>
+        )}
+        {duplicateFileAction.isAvailable(isAvailableArgs) && (
+          <MenubarItem onClick={() => duplicateFileAction.run({ uuid: fileUuid, submit })}>
+            <FileCopyIcon />
+            Duplicate
+          </MenubarItem>
+        )}
+
+        <MenubarSeparator />
+
+        <MenubarItemAction action={Action.FileShare} actionArgs={undefined} />
+        <MenubarItemAction action={Action.FileRename} actionArgs={undefined} />
+        <MenubarItemAction action={Action.FileDownload} actionArgs={{ name }} />
+
+        <MenubarSeparator />
+
+        {deleteFile.isAvailable(isAvailableArgs) && (
+          <MenubarItem onClick={() => deleteFile.run({ uuid: fileUuid, addGlobalSnackbar })}>
+            <DeleteIcon />
+            Delete
+          </MenubarItem>
+        )}
+      </MenubarContent>
+    </MenubarMenu>
+  );
+};
diff --git a/quadratic-client/src/app/ui/menus/TopBar/TopBarFileMenu/FormatMenubarMenu.tsx b/quadratic-client/src/app/ui/menus/TopBar/TopBarFileMenu/FormatMenubarMenu.tsx
new file mode 100644
index 0000000000..72aa0dab32
--- /dev/null
+++ b/quadratic-client/src/app/ui/menus/TopBar/TopBarFileMenu/FormatMenubarMenu.tsx
@@ -0,0 +1,179 @@
+import { Action } from '@/app/actions/actions';
+import { defaultActionSpec } from '@/app/actions/defaultActionsSpec';
+import { focusGrid } from '@/app/helpers/focusGrid';
+import { BorderMenu } from '@/app/ui/components/BorderMenu';
+import { DateFormat } from '@/app/ui/components/DateFormat';
+import { QColorPicker } from '@/app/ui/components/qColorPicker';
+import { MenubarItemAction } from '@/app/ui/menus/TopBar/TopBarFileMenu/MenubarItemAction';
+import {
+  BorderAllIcon,
+  FormatAlignLeftIcon,
+  FormatBoldIcon,
+  FormatTextWrapIcon,
+  Number123Icon,
+} from '@/shared/components/Icons';
+import {
+  MenubarContent,
+  MenubarItem,
+  MenubarMenu,
+  MenubarSeparator,
+  MenubarSub,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarTrigger,
+} from '@/shared/shadcn/ui/menubar';
+
+export const FormatMenubarMenu = () => {
+  return (
+    <MenubarMenu>
+      <MenubarTrigger>Format</MenubarTrigger>
+      <MenubarContent className="pointer-move-ignore">
+        <MenubarSub>
+          <MenubarSubTrigger>
+            <Number123Icon /> Number
+          </MenubarSubTrigger>
+          <MenubarSubContent>
+            <MenubarItemAction action={Action.FormatNumberAutomatic} actionArgs={undefined} />
+            <MenubarItemAction
+              action={Action.FormatNumberCurrency}
+              actionArgs={undefined}
+              shortcutOverride="$1,000.12"
+            />
+            <MenubarItemAction action={Action.FormatNumberPercent} actionArgs={undefined} shortcutOverride="10.12%" />
+            <MenubarItemAction
+              action={Action.FormatNumberScientific}
+              actionArgs={undefined}
+              shortcutOverride="1.01E+03"
+            />
+
+            <MenubarSeparator />
+
+            <MenubarItemAction
+              action={Action.FormatNumberToggleCommas}
+              actionArgs={undefined}
+              shortcutOverride="1,000.12"
+            />
+            <MenubarItemAction
+              action={Action.FormatNumberDecimalIncrease}
+              actionArgs={undefined}
+              shortcutOverride=".0000"
+            />
+            <MenubarItemAction
+              action={Action.FormatNumberDecimalDecrease}
+              actionArgs={undefined}
+              shortcutOverride=".0"
+            />
+          </MenubarSubContent>
+        </MenubarSub>
+
+        <DataTimeSubMenu action={Action.FormatDateTime} />
+
+        <MenubarSub>
+          <MenubarSubTrigger>
+            <FormatBoldIcon />
+            Text
+          </MenubarSubTrigger>
+          <MenubarSubContent>
+            <MenubarItemAction action={Action.ToggleBold} actionArgs={undefined} />
+            <MenubarItemAction action={Action.ToggleItalic} actionArgs={undefined} />
+          </MenubarSubContent>
+        </MenubarSub>
+
+        <MenubarSub>
+          <MenubarSubTrigger>
+            <FormatAlignLeftIcon />
+            Alignment
+          </MenubarSubTrigger>
+          <MenubarSubContent>
+            <MenubarItemAction action={Action.FormatAlignHorizontalLeft} actionArgs={undefined} />
+            <MenubarItemAction action={Action.FormatAlignHorizontalCenter} actionArgs={undefined} />
+            <MenubarItemAction action={Action.FormatAlignHorizontalRight} actionArgs={undefined} />
+
+            <MenubarSeparator />
+
+            <MenubarItemAction action={Action.FormatAlignVerticalTop} actionArgs={undefined} />
+            <MenubarItemAction action={Action.FormatAlignVerticalMiddle} actionArgs={undefined} />
+            <MenubarItemAction action={Action.FormatAlignVerticalBottom} actionArgs={undefined} />
+          </MenubarSubContent>
+        </MenubarSub>
+
+        <MenubarSub>
+          <MenubarSubTrigger>
+            <FormatTextWrapIcon /> Wrapping
+          </MenubarSubTrigger>
+          <MenubarSubContent>
+            <MenubarItemAction action={Action.FormatTextWrapWrap} actionArgs={undefined} />
+            <MenubarItemAction action={Action.FormatTextWrapOverflow} actionArgs={undefined} />
+            <MenubarItemAction action={Action.FormatTextWrapClip} actionArgs={undefined} />
+          </MenubarSubContent>
+        </MenubarSub>
+
+        <MenubarSeparator />
+
+        <MenubarColorPickerSubMenu action={Action.FormatTextColor} />
+
+        <MenubarColorPickerSubMenu action={Action.FormatFillColor} />
+
+        <MenubarSub>
+          <MenubarSubTrigger>
+            <BorderAllIcon /> Borders
+          </MenubarSubTrigger>
+          <MenubarSubContent>
+            <BorderMenu />
+          </MenubarSubContent>
+        </MenubarSub>
+
+        <MenubarSeparator />
+
+        <MenubarItemAction action={Action.ClearFormattingBorders} actionArgs={undefined} />
+      </MenubarContent>
+    </MenubarMenu>
+  );
+};
+
+function DataTimeSubMenu({ action }: { action: Action.FormatDateTime }) {
+  const actionSpec = defaultActionSpec[action];
+  const { label } = actionSpec;
+  const Icon = 'Icon' in actionSpec ? actionSpec.Icon : undefined;
+
+  return (
+    <MenubarSub>
+      <MenubarSubTrigger>
+        {Icon && <Icon />}
+        {label}
+      </MenubarSubTrigger>
+      <MenubarSubContent>
+        <DateFormat className="block min-w-80 p-2" closeMenu={() => focusGrid()} />
+      </MenubarSubContent>
+    </MenubarSub>
+  );
+}
+
+function MenubarColorPickerSubMenu({ action }: { action: Action.FormatTextColor | Action.FormatFillColor }) {
+  const actionSpec = defaultActionSpec[action];
+  const { run, label } = actionSpec;
+  const Icon = 'Icon' in actionSpec ? actionSpec.Icon : undefined;
+
+  return (
+    <MenubarSub>
+      <MenubarSubTrigger>
+        {Icon && <Icon />}
+        {label}
+      </MenubarSubTrigger>
+      <MenubarSubContent>
+        <MenubarItem className="color-picker-dropdown-menu flex-col gap-0 p-0 hover:bg-background focus:bg-background">
+          <QColorPicker
+            onChangeComplete={(color) => {
+              run(color);
+              focusGrid();
+            }}
+            onClear={() => {
+              run(undefined);
+              focusGrid();
+            }}
+          />
+        </MenubarItem>
+      </MenubarSubContent>
+    </MenubarSub>
+  );
+}
diff --git a/quadratic-client/src/app/ui/menus/TopBar/TopBarFileMenu/HelpMenubarMenu.tsx b/quadratic-client/src/app/ui/menus/TopBar/TopBarFileMenu/HelpMenubarMenu.tsx
new file mode 100644
index 0000000000..9eb1179e94
--- /dev/null
+++ b/quadratic-client/src/app/ui/menus/TopBar/TopBarFileMenu/HelpMenubarMenu.tsx
@@ -0,0 +1,16 @@
+import { Action } from '@/app/actions/actions';
+import { MenubarItemAction } from '@/app/ui/menus/TopBar/TopBarFileMenu/MenubarItemAction';
+import { MenubarContent, MenubarMenu, MenubarTrigger } from '@/shared/shadcn/ui/menubar';
+
+export const HelpMenubarMenu = () => {
+  return (
+    <MenubarMenu>
+      <MenubarTrigger>Help</MenubarTrigger>
+      <MenubarContent className="pointer-move-ignore">
+        <MenubarItemAction action={Action.HelpDocs} actionArgs={undefined} />
+        <MenubarItemAction action={Action.HelpFeedback} actionArgs={undefined} />
+        <MenubarItemAction action={Action.HelpContactUs} actionArgs={undefined} />
+      </MenubarContent>
+    </MenubarMenu>
+  );
+};
diff --git a/quadratic-client/src/app/ui/menus/TopBar/TopBarFileMenu/InsertMenubarMenu.tsx b/quadratic-client/src/app/ui/menus/TopBar/TopBarFileMenu/InsertMenubarMenu.tsx
new file mode 100644
index 0000000000..6d54569cd5
--- /dev/null
+++ b/quadratic-client/src/app/ui/menus/TopBar/TopBarFileMenu/InsertMenubarMenu.tsx
@@ -0,0 +1,77 @@
+import { Action } from '@/app/actions/actions';
+import { editorInteractionStateAtom } from '@/app/atoms/editorInteractionStateAtom';
+import { MenubarItemAction } from '@/app/ui/menus/TopBar/TopBarFileMenu/MenubarItemAction';
+import { useGlobalSnackbar } from '@/shared/components/GlobalSnackbarProvider';
+import { CodeIcon, DataObjectIcon, InsertChartIcon } from '@/shared/components/Icons';
+import { IMPORT_MESSAGE } from '@/shared/constants/appConstants';
+import {
+  MenubarContent,
+  MenubarItem,
+  MenubarMenu,
+  MenubarSeparator,
+  MenubarSub,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarTrigger,
+} from '@/shared/shadcn/ui/menubar';
+import { useSetRecoilState } from 'recoil';
+
+export const InsertMenubarMenu = () => {
+  const setEditorInteractionState = useSetRecoilState(editorInteractionStateAtom);
+  const { addGlobalSnackbar } = useGlobalSnackbar();
+  return (
+    <MenubarMenu>
+      <MenubarTrigger>Insert</MenubarTrigger>
+      <MenubarContent onCloseAutoFocus={(e) => e.preventDefault()} className="pointer-move-ignore">
+        <MenubarSub>
+          <MenubarSubTrigger>
+            <CodeIcon /> Code
+          </MenubarSubTrigger>
+          <MenubarSubContent>
+            <MenubarItemAction action={Action.InsertCodePython} actionArgs={undefined} />
+            <MenubarItemAction action={Action.InsertCodeJavascript} actionArgs={undefined} />
+            <MenubarItemAction action={Action.InsertCodeFormula} actionArgs={undefined} />
+          </MenubarSubContent>
+        </MenubarSub>
+        <MenubarSub>
+          <MenubarSubTrigger>
+            <InsertChartIcon />
+            Chart
+          </MenubarSubTrigger>
+          <MenubarSubContent>
+            <MenubarItemAction action={Action.InsertChartPython} actionArgs={undefined} />
+            <MenubarItemAction action={Action.InsertChartJavascript} actionArgs={undefined} />
+          </MenubarSubContent>
+        </MenubarSub>
+        <MenubarSub>
+          <MenubarSubTrigger>
+            <DataObjectIcon />
+            Data
+          </MenubarSubTrigger>
+          <MenubarSubContent>
+            <MenubarItem onClick={() => addGlobalSnackbar(IMPORT_MESSAGE)}>
+              From file (CSV, Excel, or Parquet)
+            </MenubarItem>
+            <MenubarSeparator />
+            <MenubarItemAction action={Action.InsertApiRequestJavascript} actionArgs={undefined} />
+            <MenubarItemAction action={Action.InsertApiRequestPython} actionArgs={undefined} />
+            <MenubarSeparator />
+            <MenubarItem onClick={() => setEditorInteractionState((prev) => ({ ...prev, showCellTypeMenu: true }))}>
+              From connection…
+            </MenubarItem>
+          </MenubarSubContent>
+        </MenubarSub>
+
+        <MenubarSeparator />
+
+        <MenubarItemAction action={Action.InsertCheckbox} actionArgs={undefined} />
+        <MenubarItemAction action={Action.InsertDropdown} actionArgs={undefined} />
+        <MenubarItemAction action={Action.ToggleDataValidation} actionArgs={undefined} />
+
+        <MenubarSeparator />
+
+        <MenubarItemAction action={Action.InsertSheet} actionArgs={undefined} />
+      </MenubarContent>
+    </MenubarMenu>
+  );
+};
diff --git a/quadratic-client/src/app/ui/menus/TopBar/TopBarFileMenu/MenubarItemAction.tsx b/quadratic-client/src/app/ui/menus/TopBar/TopBarFileMenu/MenubarItemAction.tsx
new file mode 100644
index 0000000000..8ee8e949fa
--- /dev/null
+++ b/quadratic-client/src/app/ui/menus/TopBar/TopBarFileMenu/MenubarItemAction.tsx
@@ -0,0 +1,43 @@
+import { Action } from '@/app/actions/actions';
+import { ActionArgs } from '@/app/actions/actionsSpec';
+import { defaultActionSpec } from '@/app/actions/defaultActionsSpec';
+import { focusGrid } from '@/app/helpers/focusGrid';
+import { keyboardShortcutEnumToDisplay } from '@/app/helpers/keyboardShortcutsDisplay';
+import { useIsAvailableArgs } from '@/app/ui/hooks/useIsAvailableArgs';
+import { MenubarItem, MenubarShortcut } from '@/shared/shadcn/ui/menubar';
+import mixpanel from 'mixpanel-browser';
+
+export const MenubarItemAction = <T extends Action>({
+  action,
+  actionArgs,
+  shortcutOverride,
+}: {
+  action: T;
+  actionArgs: T extends keyof ActionArgs ? ActionArgs[T] : void;
+  shortcutOverride?: string;
+}) => {
+  const isAvailableArgs = useIsAvailableArgs();
+  const actionSpec = defaultActionSpec[action];
+
+  const { label, run } = actionSpec;
+  const Icon = 'Icon' in actionSpec ? actionSpec.Icon : undefined;
+  const keyboardShortcut = shortcutOverride ? shortcutOverride : keyboardShortcutEnumToDisplay(action);
+  const isAvailable = 'isAvailable' in actionSpec ? actionSpec.isAvailable : undefined;
+
+  if (isAvailable && !isAvailable(isAvailableArgs)) {
+    return null;
+  }
+
+  return (
+    <MenubarItem
+      onClick={() => {
+        mixpanel.track('[FileMenu].selected', { label });
+        run(actionArgs);
+        focusGrid();
+      }}
+    >
+      {Icon && <Icon />} {label}
+      {keyboardShortcut && <MenubarShortcut>{keyboardShortcut}</MenubarShortcut>}
+    </MenubarItem>
+  );
+};
diff --git a/quadratic-client/src/app/ui/menus/TopBar/TopBarFileMenu/ViewMenubarMenu.tsx b/quadratic-client/src/app/ui/menus/TopBar/TopBarFileMenu/ViewMenubarMenu.tsx
new file mode 100644
index 0000000000..d58273b2d3
--- /dev/null
+++ b/quadratic-client/src/app/ui/menus/TopBar/TopBarFileMenu/ViewMenubarMenu.tsx
@@ -0,0 +1,104 @@
+import { Action } from '@/app/actions/actions';
+import { focusGrid } from '@/app/helpers/focusGrid';
+import { KeyboardSymbols } from '@/app/helpers/keyboardSymbols';
+import { useGridSettings } from '@/app/ui/hooks/useGridSettings';
+import { MenubarItemAction } from '@/app/ui/menus/TopBar/TopBarFileMenu/MenubarItemAction';
+import { CheckSmallIcon, CropFreeIcon, ZoomInIcon } from '@/shared/components/Icons';
+import {
+  MenubarContent,
+  MenubarItem,
+  MenubarMenu,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarSub,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarTrigger,
+} from '@/shared/shadcn/ui/menubar';
+
+const MenubarItemCheckbox = ({ checked }: { checked: boolean }) => {
+  return <CheckSmallIcon className={checked ? 'visible opacity-100' : 'invisible opacity-0'} />;
+};
+
+// TODO: (enhancement) move these into `viewActionsSpec` by making the `.run()`
+// function of each accessible from outside of react (e.g. without `useGridSettings`)
+export const ViewMenubarMenu = () => {
+  const settings = useGridSettings();
+  return (
+    <MenubarMenu>
+      <MenubarTrigger>View</MenubarTrigger>
+      <MenubarContent className="pointer-move-ignore">
+        <MenubarItem
+          onClick={() => {
+            settings.setShowHeadings(!settings.showHeadings);
+            focusGrid();
+          }}
+        >
+          <MenubarItemCheckbox checked={settings.showHeadings} /> Show row and column headings
+        </MenubarItem>
+        <MenubarItem
+          onClick={() => {
+            settings.setShowGridAxes(!settings.showGridAxes);
+            focusGrid();
+          }}
+        >
+          <MenubarItemCheckbox checked={settings.showGridAxes} /> Show grid axis
+        </MenubarItem>
+        <MenubarItem
+          onClick={() => {
+            settings.setShowGridLines(!settings.showGridLines);
+            focusGrid();
+          }}
+        >
+          <MenubarItemCheckbox checked={settings.showGridLines} />
+          Show grid lines
+        </MenubarItem>
+        <MenubarItem
+          onClick={() => {
+            settings.setShowCellTypeOutlines(!settings.showCellTypeOutlines);
+            focusGrid();
+          }}
+        >
+          <MenubarItemCheckbox checked={settings.showCellTypeOutlines} />
+          Show code cell outlines
+        </MenubarItem>
+        <MenubarItem
+          onClick={() => {
+            settings.setShowCodePeek(!settings.showCodePeek);
+            focusGrid();
+          }}
+        >
+          <MenubarItemCheckbox checked={settings.showCodePeek} />
+          Show code peek
+        </MenubarItem>
+        <MenubarSeparator />
+        <MenubarSub>
+          <MenubarSubTrigger>
+            <ZoomInIcon /> Zoom
+          </MenubarSubTrigger>
+          <MenubarSubContent>
+            <MenubarItemAction action={Action.ZoomIn} actionArgs={undefined} />
+            <MenubarItemAction action={Action.ZoomOut} actionArgs={undefined} />
+            <MenubarSeparator />
+            <MenubarItemAction action={Action.ZoomToSelection} actionArgs={undefined} />
+            <MenubarItemAction action={Action.ZoomToFit} actionArgs={undefined} />
+            <MenubarSeparator />
+            <MenubarItemAction action={Action.ZoomTo50} actionArgs={undefined} />
+            <MenubarItemAction action={Action.ZoomTo100} actionArgs={undefined} />
+            <MenubarItemAction action={Action.ZoomTo200} actionArgs={undefined} />
+          </MenubarSubContent>
+        </MenubarSub>
+        <MenubarItem
+          onClick={() => {
+            settings.setPresentationMode(!settings.presentationMode);
+            focusGrid();
+          }}
+        >
+          <CropFreeIcon />
+          Presentation mode
+          <MenubarShortcut>{KeyboardSymbols.Command + '.'}</MenubarShortcut>
+        </MenubarItem>
+      </MenubarContent>
+    </MenubarMenu>
+  );
+};
diff --git a/quadratic-client/src/app/ui/menus/TopBar/TopBarFileMenu/index.tsx b/quadratic-client/src/app/ui/menus/TopBar/TopBarFileMenu/index.tsx
new file mode 100644
index 0000000000..c76e32afec
--- /dev/null
+++ b/quadratic-client/src/app/ui/menus/TopBar/TopBarFileMenu/index.tsx
@@ -0,0 +1,29 @@
+import { editorInteractionStateAtom } from '@/app/atoms/editorInteractionStateAtom';
+import { EditMenubarMenu } from '@/app/ui/menus/TopBar/TopBarFileMenu/EditMenubarMenu';
+import { FileMenubarMenu } from '@/app/ui/menus/TopBar/TopBarFileMenu/FileMenubarMenu';
+import { FormatMenubarMenu } from '@/app/ui/menus/TopBar/TopBarFileMenu/FormatMenubarMenu';
+import { HelpMenubarMenu } from '@/app/ui/menus/TopBar/TopBarFileMenu/HelpMenubarMenu';
+import { InsertMenubarMenu } from '@/app/ui/menus/TopBar/TopBarFileMenu/InsertMenubarMenu';
+import { ViewMenubarMenu } from '@/app/ui/menus/TopBar/TopBarFileMenu/ViewMenubarMenu';
+import { Menubar } from '@/shared/shadcn/ui/menubar';
+import { useRecoilValue } from 'recoil';
+import './styles.css';
+
+export const TopBarMenus = () => {
+  const editorInteractionState = useRecoilValue(editorInteractionStateAtom);
+  const { permissions } = editorInteractionState;
+  const canEdit = permissions.includes('FILE_EDIT');
+
+  return (
+    <Menubar>
+      <FileMenubarMenu />
+      <EditMenubarMenu />
+      <ViewMenubarMenu />
+      {canEdit && <InsertMenubarMenu />}
+      {canEdit && <FormatMenubarMenu />}
+      <HelpMenubarMenu />
+    </Menubar>
+  );
+};
+
+export default TopBarMenus;
diff --git a/quadratic-client/src/app/ui/menus/TopBar/TopBarFileMenu/styles.css b/quadratic-client/src/app/ui/menus/TopBar/TopBarFileMenu/styles.css
new file mode 100644
index 0000000000..da9bec881c
--- /dev/null
+++ b/quadratic-client/src/app/ui/menus/TopBar/TopBarFileMenu/styles.css
@@ -0,0 +1,26 @@
+/**
+ * Because items in the menubar render conditionally, we don't always know
+ * if multiple separators will render next to each other.
+ *
+ * Example:
+ *
+ * <MenubarMenu>
+ *   <MenubarItem>File</MenubarItem>
+ *   <MenubarSeparator />
+ *   <MenubarItem>Edit</MenubarItem>
+ *   <MenubarSeparator />
+ *   <MenubarItem>Help</MenubarItem>
+ * </MenubarMenu>
+ *
+ * If the "File" one doesn't render, then we have a separator when we
+ * don't need one. Hiding this via JS is a lot more complicated than
+ * doing it in CSS. So we just make sure that the first and last elements
+ * in the list are never separators. And that two subsequent separators
+ * never show.
+ */
+
+[data-radix-menubar-content] > :first-child:is([role='separator']),
+[data-radix-menubar-content] > [role='separator'] + [role='separator'],
+[data-radix-menubar-content] > :last-child:is([role='separator']) {
+  display: none;
+}
diff --git a/quadratic-client/src/app/ui/menus/TopBar/TopBarFileMenuDropdown.tsx b/quadratic-client/src/app/ui/menus/TopBar/TopBarFileMenuDropdown.tsx
deleted file mode 100644
index 60c23364cd..0000000000
--- a/quadratic-client/src/app/ui/menus/TopBar/TopBarFileMenuDropdown.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-import { useRootRouteLoaderData } from '@/routes/_root';
-import { useFileRouteLoaderData } from '@/shared/hooks/useFileRouteLoaderData';
-import { useGlobalSnackbar } from '@/shared/components/GlobalSnackbarProvider';
-import { KeyboardArrowDown } from '@mui/icons-material';
-import { IconButton, useTheme } from '@mui/material';
-import { Menu, MenuDivider, MenuItem } from '@szhsin/react-menu';
-import { Dispatch, SetStateAction } from 'react';
-import { useParams, useSubmit } from 'react-router-dom';
-import { useRecoilValue } from 'recoil';
-import { deleteFile, downloadFileAction, duplicateFileAction, renameFileAction } from '../../../actions';
-import { editorInteractionStateAtom } from '../../../atoms/editorInteractionStateAtom';
-import { useFileContext } from '../../components/FileProvider';
-import { MenuLineItem } from './MenuLineItem';
-
-export function TopBarFileMenuDropdown({ setIsRenaming }: { setIsRenaming: Dispatch<SetStateAction<boolean>> }) {
-  const theme = useTheme();
-  const { name } = useFileContext();
-  const editorInteractionState = useRecoilValue(editorInteractionStateAtom);
-  const { uuid } = useParams() as { uuid: string };
-  const submit = useSubmit();
-  const { addGlobalSnackbar } = useGlobalSnackbar();
-  const { isAuthenticated } = useRootRouteLoaderData();
-  const {
-    userMakingRequest: { fileTeamPrivacy, teamPermissions },
-  } = useFileRouteLoaderData();
-  const { permissions } = editorInteractionState;
-
-  if (!isAuthenticated) {
-    return null;
-  }
-
-  const isAvailableArgs = { filePermissions: permissions, fileTeamPrivacy, isAuthenticated, teamPermissions };
-
-  return (
-    <Menu
-      menuButton={({ open }) => (
-        <IconButton
-          id="file-name-button"
-          aria-controls={open ? 'basic-menu' : undefined}
-          aria-haspopup="true"
-          aria-expanded={open ? 'true' : undefined}
-          size="small"
-          disableRipple
-          sx={{
-            marginLeft: theme.spacing(-0.5),
-            fontSize: '1rem',
-            ...(open
-              ? {
-                  backgroundColor: theme.palette.action.hover,
-                  '& svg': { transform: 'translateY(1px)' },
-                }
-              : {}),
-            '&:hover': {
-              backgroundColor: theme.palette.action.hover,
-            },
-            '&:hover svg': {
-              transform: 'translateY(1px)',
-            },
-          }}
-        >
-          <KeyboardArrowDown fontSize="inherit" sx={{ transition: '.2s ease transform' }} />
-        </IconButton>
-      )}
-    >
-      {renameFileAction.isAvailable(isAvailableArgs) && (
-        <MenuItem
-          onClick={() => {
-            setIsRenaming(true);
-          }}
-        >
-          <MenuLineItem primary={renameFileAction.label} />
-        </MenuItem>
-      )}
-      {duplicateFileAction.isAvailable(isAvailableArgs) && (
-        <MenuItem onClick={() => duplicateFileAction.run({ uuid, submit })}>
-          <MenuLineItem primary={duplicateFileAction.label} />
-        </MenuItem>
-      )}
-      {downloadFileAction.isAvailable(isAvailableArgs) && (
-        <MenuItem
-          onClick={() => {
-            downloadFileAction.run({ name });
-          }}
-        >
-          <MenuLineItem primary={downloadFileAction.label} />
-        </MenuItem>
-      )}
-      {deleteFile.isAvailable(isAvailableArgs) && (
-        <>
-          <MenuDivider />
-          <MenuItem
-            onClick={async () => {
-              deleteFile.run({ uuid, addGlobalSnackbar });
-            }}
-          >
-            <MenuLineItem primary={deleteFile.label} />
-          </MenuItem>
-        </>
-      )}
-    </Menu>
-  );
-}
diff --git a/quadratic-client/src/app/ui/menus/TopBar/TopBarFileMenu.tsx b/quadratic-client/src/app/ui/menus/TopBar/TopBarFileNameAndLocationMenu.tsx
similarity index 95%
rename from quadratic-client/src/app/ui/menus/TopBar/TopBarFileMenu.tsx
rename to quadratic-client/src/app/ui/menus/TopBar/TopBarFileNameAndLocationMenu.tsx
index bda5f2ca93..c2db6cc125 100644
--- a/quadratic-client/src/app/ui/menus/TopBar/TopBarFileMenu.tsx
+++ b/quadratic-client/src/app/ui/menus/TopBar/TopBarFileNameAndLocationMenu.tsx
@@ -9,9 +9,8 @@ import { hasPermissionToEditFile } from '../../../actions';
 import { editorInteractionStateAtom } from '../../../atoms/editorInteractionStateAtom';
 import { focusGrid } from '../../../helpers/focusGrid';
 import { useFileContext } from '../../components/FileProvider';
-import { TopBarFileMenuDropdown } from './TopBarFileMenuDropdown';
 
-export const TopBarFileMenu = () => {
+export const TopBarFileNameAndLocationMenu = () => {
   const [isRenaming, setIsRenaming] = useState<boolean>(false);
   const { name } = useFileContext();
   const editorInteractionState = useRecoilValue(editorInteractionStateAtom);
@@ -42,10 +41,6 @@ export const TopBarFileMenu = () => {
                 <span className={`block max-w-[25vw] truncate`}>{name}</span>
               )}
             </Type>
-
-            <div className="hidden md:block">
-              <TopBarFileMenuDropdown setIsRenaming={setIsRenaming} />
-            </div>
           </div>
         </div>
       )}
diff --git a/quadratic-client/src/app/ui/menus/TopBar/TopBarMenuItem.tsx b/quadratic-client/src/app/ui/menus/TopBar/TopBarMenuItem.tsx
deleted file mode 100644
index daa6c1ee94..0000000000
--- a/quadratic-client/src/app/ui/menus/TopBar/TopBarMenuItem.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import { KeyboardArrowDown } from '@mui/icons-material';
-import { ButtonBase, Stack, Tooltip, useTheme } from '@mui/material';
-import React, { forwardRef } from 'react';
-
-type Props = {
-  children: React.ReactNode;
-  className?: string;
-  title: string;
-  open?: boolean;
-  buttonProps?: any;
-  noDropdown?: boolean;
-};
-
-export const TopBarMenuItem = forwardRef((props: Props, ref) => {
-  const { children, title, open, noDropdown, buttonProps, className, ...rest } = props;
-  const theme = useTheme();
-  const activeStyle = {
-    color: theme.palette.text.primary,
-    backgroundColor: theme.palette.action.hover,
-  };
-  const activeIconStyle = { transform: 'translateY(1px)' };
-  return (
-    <Tooltip ref={ref} arrow disableInteractive enterDelay={500} enterNextDelay={500} title={title} {...rest}>
-      <ButtonBase
-        {...(buttonProps ? buttonProps : {})}
-        className={className}
-        disableRipple
-        sx={{
-          color: theme.palette.text.secondary,
-          p: theme.spacing(1),
-          ...(open ? { ...activeStyle, '& .top-bar-dropdown-icon': activeIconStyle } : {}),
-          '&:hover': activeStyle,
-          '&:hover .top-bar-dropdown-icon': activeIconStyle,
-        }}
-      >
-        <Stack direction="row" alignItems="center" minWidth="1.5rem" justifyContent="center">
-          {children}
-          {!noDropdown && (
-            <KeyboardArrowDown
-              className="top-bar-dropdown-icon"
-              color="inherit"
-              sx={{ fontSize: '.8125rem', transition: '.2s ease transform' }}
-            />
-          )}
-        </Stack>
-      </ButtonBase>
-    </Tooltip>
-  );
-});
diff --git a/quadratic-client/src/app/ui/menus/TopBar/TopBarShareButton.tsx b/quadratic-client/src/app/ui/menus/TopBar/TopBarShareButton.tsx
index 3354620040..30176634bd 100644
--- a/quadratic-client/src/app/ui/menus/TopBar/TopBarShareButton.tsx
+++ b/quadratic-client/src/app/ui/menus/TopBar/TopBarShareButton.tsx
@@ -14,6 +14,7 @@ export const TopBarShareButton = () => {
     <>
       {isAuthenticated ? (
         <Button
+          variant="outline"
           size="sm"
           onClick={() => {
             setEditorInteractionState((prev) => ({ ...prev, showShareFileMenu: !prev.showShareFileMenu }));
@@ -24,7 +25,7 @@ export const TopBarShareButton = () => {
           Share
         </Button>
       ) : (
-        <Button asChild variant="outline" size="sm" className=" self-center">
+        <Button asChild variant="outline" size="sm" className="self-center">
           <Link to={ROUTES.LOGIN_WITH_REDIRECT()} replace style={{ whiteSpace: 'nowrap' }}>
             Log in
           </Link>
diff --git a/quadratic-client/src/app/ui/menus/TopBar/TopBarUsers.tsx b/quadratic-client/src/app/ui/menus/TopBar/TopBarUsers.tsx
index 3847fb9bdc..c8662f3313 100644
--- a/quadratic-client/src/app/ui/menus/TopBar/TopBarUsers.tsx
+++ b/quadratic-client/src/app/ui/menus/TopBar/TopBarUsers.tsx
@@ -1,13 +1,21 @@
 import { editorInteractionStateAtom } from '@/app/atoms/editorInteractionStateAtom';
 import { MULTIPLAYER_COLORS } from '@/app/gridGL/HTMLGrid/multiplayerCursor/multiplayerColors';
 import { pixiApp } from '@/app/gridGL/pixiApp/PixiApp';
-import { TooltipHint } from '@/app/ui/components/TooltipHint';
 import { multiplayer } from '@/app/web-workers/multiplayerWebWorker/multiplayer';
 import { useRootRouteLoaderData } from '@/routes/_root';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/shared/shadcn/ui/dropdown-menu';
+import { Tooltip, TooltipContent, TooltipPortal, TooltipTrigger } from '@/shared/shadcn/ui/tooltip';
 import { getAuth0AvatarSrc } from '@/shared/utils/auth0UserImageSrc';
 import { displayInitials, displayName } from '@/shared/utils/userUtil';
-import { Avatar, AvatarGroup, IconButton } from '@mui/material';
+import { Avatar, AvatarGroup } from '@mui/material';
 import { EyeOpenIcon } from '@radix-ui/react-icons';
+import { useSubmit } from 'react-router-dom';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
 import { colors } from '../../../theme/colors';
 import { useMultiplayerUsers } from './useMultiplayerUsers';
@@ -15,6 +23,7 @@ import { useMultiplayerUsers } from './useMultiplayerUsers';
 const sharedAvatarSxProps = { width: 24, height: 24, fontSize: '.8125rem' };
 
 export const TopBarUsers = () => {
+  const submit = useSubmit();
   const { loggedInUser: user } = useRootRouteLoaderData();
   const editorInteractionState = useRecoilValue(editorInteractionStateAtom);
   const { users, followers } = useMultiplayerUsers();
@@ -30,8 +39,8 @@ export const TopBarUsers = () => {
     <>
       {/* TODO(ayush): create custom AvatarGroup component */}
       <AvatarGroup
-        spacing={16}
         componentsProps={{ additionalAvatar: { sx: sharedAvatarSxProps } }}
+        className="gap-1"
         sx={{
           alignSelf: 'center',
           alignItems: 'center',
@@ -42,15 +51,28 @@ export const TopBarUsers = () => {
         max={5}
       >
         {
-          <div className={`ml-2`}>
-            <You
-              displayName={displayName(user ?? anonymous, true)}
-              initial={displayInitials(user ?? anonymous)}
-              picture={user?.picture ?? ''}
-              border={multiplayer.colorString ?? 'black'}
-              bgColor={multiplayer.colorString}
-            />
-          </div>
+          <DropdownMenu>
+            <DropdownMenuTrigger>
+              <You
+                displayName={displayName(user ?? anonymous, true)}
+                initial={displayInitials(user ?? anonymous)}
+                picture={user?.picture ?? ''}
+                border={multiplayer.colorString ?? 'black'}
+                bgColor={multiplayer.colorString}
+              />
+            </DropdownMenuTrigger>
+            <DropdownMenuContent className="text-sm">
+              <DropdownMenuItem disabled>{user?.email}</DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem
+                onClick={() => {
+                  submit(null, { action: '/logout', method: 'POST' });
+                }}
+              >
+                Log out
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
         }
         {users.map((user) => {
           return (
@@ -87,22 +109,29 @@ function You({
   bgColor?: string;
 }) {
   return (
-    <TooltipHint title={displayName}>
-      <Avatar
-        sx={{
-          bgcolor: bgColor ?? colors.quadraticSecondary,
-          ...sharedAvatarSxProps,
-        }}
-        alt={displayName}
-        src={getAuth0AvatarSrc(picture)}
-        imgProps={{ crossOrigin: 'anonymous' }}
-        style={{
-          border: `2px solid ${border}`,
-        }}
-      >
-        {initial}
-      </Avatar>
-    </TooltipHint>
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Avatar
+          sx={{
+            bgcolor: bgColor ?? colors.quadraticSecondary,
+            ...sharedAvatarSxProps,
+          }}
+          alt={displayName}
+          src={getAuth0AvatarSrc(picture)}
+          imgProps={{ crossOrigin: 'anonymous' }}
+          style={{
+            border: `2px solid ${border}`,
+          }}
+        >
+          {initial}
+        </Avatar>
+      </TooltipTrigger>
+      <TooltipPortal>
+        <TooltipContent>
+          <p>{displayName}</p>
+        </TooltipContent>
+      </TooltipPortal>
+    </Tooltip>
   );
 }
 
@@ -142,13 +171,10 @@ function UserAvatar({
     });
   };
   return (
-    <div className="relative">
-      <TooltipHint
-        title={displayName}
-        shortcut={follower ? 'following you' : `Click to ${follow ? 'unfollow' : 'follow'}`}
-      >
-        <IconButton sx={{ borderRadius: 0, px: '.25rem' }} onClick={handleFollow}>
-          <div>
+    <div className="hidden lg:relative lg:flex lg:items-center">
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <button onClick={handleFollow}>
             <Avatar
               sx={{
                 bgcolor: bgColor ?? colors.quadraticSecondary,
@@ -166,9 +192,19 @@ function UserAvatar({
             >
               {initial}
             </Avatar>
-          </div>
-        </IconButton>
-      </TooltipHint>
+          </button>
+        </TooltipTrigger>
+        <TooltipPortal>
+          <TooltipContent>
+            <p>
+              {displayName}{' '}
+              <span className="opacity-70">
+                ({follower ? 'following you' : `Click to ${follow ? 'unfollow' : 'follow'}`})
+              </span>
+            </p>
+          </TooltipContent>
+        </TooltipPortal>
+      </Tooltip>
       {follow && (
         <div className="pointer-events-none absolute bottom-1 left-1/2 flex h-5  w-5 items-center justify-center rounded-full bg-white">
           <EyeOpenIcon />
diff --git a/quadratic-client/src/app/ui/menus/TopBar/TopBarZoomMenu.tsx b/quadratic-client/src/app/ui/menus/TopBar/TopBarZoomMenu.tsx
deleted file mode 100644
index 7f6a2bfc92..0000000000
--- a/quadratic-client/src/app/ui/menus/TopBar/TopBarZoomMenu.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-import { events } from '@/app/events/events';
-import { Typography } from '@mui/material';
-import { Menu, MenuChangeEvent, MenuDivider, MenuItem } from '@szhsin/react-menu';
-import mixpanel from 'mixpanel-browser';
-import { useCallback, useEffect, useState } from 'react';
-import { zoomInOut, zoomToFit, zoomToSelection } from '../../../gridGL/helpers/zoom';
-import { focusGrid } from '../../../helpers/focusGrid';
-import { KeyboardSymbols } from '../../../helpers/keyboardSymbols';
-import { MenuLineItem } from './MenuLineItem';
-import { TopBarMenuItem } from './TopBarMenuItem';
-
-export const TopBarZoomMenu = () => {
-  const [zoom, setZoom] = useState(1);
-  const handleZoom = useCallback((scale: number) => setZoom(scale), [setZoom]);
-
-  useEffect(() => {
-    events.on('zoom', handleZoom);
-    return () => {
-      events.off('zoom', handleZoom);
-    };
-  }, [handleZoom]);
-
-  const setZoomState = useCallback((value: number) => {
-    zoomInOut(value);
-    focusGrid();
-  }, []);
-
-  // focus canvas after the zoom menu closes
-  const onMenuChange = useCallback((event: MenuChangeEvent) => {
-    if (!event.open) focusGrid();
-  }, []);
-
-  return (
-    <Menu
-      onMenuChange={onMenuChange}
-      menuButton={({ open }) => (
-        <TopBarMenuItem title="Zoom options" open={open} className="w-[70px] self-stretch">
-          <Typography variant="subtitle2" color="inherit" fontSize=".8125rem">
-            {zoom === Infinity ? 100 : Math.round(zoom * 100)}%
-          </Typography>
-        </TopBarMenuItem>
-      )}
-    >
-      <MenuItem
-        onClick={() => {
-          mixpanel.track('[ZoomDropdown].zoomIn');
-          setZoomState(zoom * 2);
-        }}
-      >
-        <MenuLineItem primary="Zoom in" secondary={KeyboardSymbols.Command + '+'} />
-      </MenuItem>
-      <MenuItem
-        onClick={() => {
-          mixpanel.track('[ZoomDropdown].zoomOut');
-          setZoomState(zoom * 0.5);
-        }}
-      >
-        <MenuLineItem primary="Zoom out" secondary={KeyboardSymbols.Command + '−'} />
-      </MenuItem>
-      <MenuDivider></MenuDivider>
-      <MenuItem
-        onClick={() => {
-          mixpanel.track('[ZoomDropdown].zoomToSelection');
-          zoomToSelection();
-        }}
-      >
-        <MenuLineItem primary="Zoom to selection" secondary={KeyboardSymbols.Command + '8'} />
-      </MenuItem>
-      <MenuItem
-        onClick={() => {
-          mixpanel.track('[ZoomDropdown].zoomToFit');
-          zoomToFit();
-        }}
-      >
-        <MenuLineItem primary="Zoom to fit" secondary={KeyboardSymbols.Command + '9'} />
-      </MenuItem>
-      <MenuItem
-        onClick={() => {
-          mixpanel.track('[ZoomDropdown].zoom50%');
-          setZoomState(0.5);
-        }}
-      >
-        <MenuLineItem primary="Zoom to 50%" />
-      </MenuItem>
-      <MenuItem
-        onClick={() => {
-          mixpanel.track('[ZoomDropdown].zoom100%');
-          setZoomState(1);
-        }}
-      >
-        <MenuLineItem primary="Zoom to 100%" secondary={KeyboardSymbols.Command + '0'} />
-      </MenuItem>
-      <MenuItem
-        onClick={() => {
-          mixpanel.track('[ZoomDropdown].zoom200%');
-          setZoomState(2);
-        }}
-      >
-        <MenuLineItem primary="Zoom to 200%" />
-      </MenuItem>
-    </Menu>
-  );
-};
diff --git a/quadratic-client/src/app/ui/menus/Validations/Validation/useValidationData.ts b/quadratic-client/src/app/ui/menus/Validations/Validation/useValidationData.ts
index 0ebe18d60c..606408fac2 100644
--- a/quadratic-client/src/app/ui/menus/Validations/Validation/useValidationData.ts
+++ b/quadratic-client/src/app/ui/menus/Validations/Validation/useValidationData.ts
@@ -6,11 +6,16 @@ import { editorInteractionStateAtom } from '@/app/atoms/editorInteractionStateAt
 import { sheets } from '@/app/grid/controller/Sheets';
 import { getSelectionString } from '@/app/grid/sheet/selection';
 import { Selection, Validation, ValidationRule } from '@/app/quadratic-core-types';
+import {
+  validationRuleSimple,
+  ValidationRuleSimple,
+  ValidationRuleSimpleValues,
+  ValidationUndefined,
+} from '@/app/ui/menus/Validations/Validation/validationType';
 import { quadraticCore } from '@/app/web-workers/quadraticCore/quadraticCore';
 import { Dispatch, SetStateAction, useCallback, useEffect, useMemo, useState } from 'react';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
 import { v4 as uuid } from 'uuid';
-import { validationRuleSimple, ValidationRuleSimple, ValidationUndefined } from './validationType';
 
 export type SetState<T> = Dispatch<SetStateAction<T>>;
 
@@ -49,40 +54,6 @@ export const useValidationData = (): ValidationData => {
     setMoreOptions((old) => !old);
   }, []);
 
-  // gets the validation for the current selection or creates a new one
-  useEffect(() => {
-    const getValidation = async () => {
-      let v: Validation | Omit<Validation, 'rule'> | undefined;
-      if (showValidation && showValidation !== true && showValidation !== 'new') {
-        v = sheets.getById(sheetId)?.validations.find((v) => v.id === showValidation);
-      }
-      if (v) {
-        setOriginalValidation(v);
-      } else {
-        v = {
-          id: uuid(),
-          selection: sheets.getRustSelection(),
-          rule: undefined,
-          message: {
-            show: true,
-            title: '',
-            message: '',
-          },
-          error: {
-            show: true,
-            style: 'Stop',
-            title: '',
-            message: '',
-          },
-        };
-
-        setOriginalValidation(undefined);
-      }
-      setValidation(v);
-    };
-    getValidation();
-  }, [sheetId, showValidation]);
-
   // Used to coerce bigints to numbers for JSON.stringify; see
   // https://github.com/GoogleChromeLabs/jsbi/issues/30#issuecomment-2064279949.
   const bigIntReplacer = (_key: string, value: any): any => {
@@ -226,6 +197,15 @@ export const useValidationData = (): ValidationData => {
     [sheetId]
   );
 
+  useEffect(() => {
+    if (
+      typeof showValidation === 'string' &&
+      ['text', 'number', 'list', 'list-range', 'logical', 'none'].includes(showValidation)
+    ) {
+      changeRule(showValidation as ValidationRuleSimple);
+    }
+  }, [changeRule, showValidation]);
+
   // Whether the UI shows (eg, checkbox for logical validation; dropdown for
   // list validation)
   const showUI = useMemo(() => {
@@ -332,6 +312,49 @@ export const useValidationData = (): ValidationData => {
     }
   };
 
+  useEffect(() => {
+    const getValidation = async () => {
+      // showValidation can be a pre-selected rule for a new validation
+      let rule: ValidationRuleSimple | undefined = undefined;
+      if (typeof showValidation === 'string' && ValidationRuleSimpleValues.includes(showValidation)) {
+        rule = showValidation as ValidationRuleSimple;
+      }
+
+      // gets the validation for the current selection or creates a new one
+      let v: Validation | Omit<Validation, 'rule'> | undefined;
+      if (showValidation && showValidation !== true && showValidation !== 'new' && rule === undefined) {
+        v = sheets.getById(sheetId)?.validations.find((v) => v.id === showValidation);
+      }
+      if (v) {
+        setOriginalValidation(v);
+      } else {
+        v = {
+          id: uuid(),
+          selection: sheets.getRustSelection(),
+          rule: undefined,
+          message: {
+            show: true,
+            title: '',
+            message: '',
+          },
+          error: {
+            show: true,
+            style: 'Stop',
+            title: '',
+            message: '',
+          },
+        };
+
+        setOriginalValidation(undefined);
+      }
+      setValidation(v);
+      if (rule) {
+        changeRule(rule);
+      }
+    };
+    getValidation();
+  }, [changeRule, sheetId, showValidation]);
+
   return {
     validate,
     unsaved,
diff --git a/quadratic-client/src/app/ui/menus/Validations/Validation/validationType.ts b/quadratic-client/src/app/ui/menus/Validations/Validation/validationType.ts
index e2d7510bb4..88da8af9a2 100644
--- a/quadratic-client/src/app/ui/menus/Validations/Validation/validationType.ts
+++ b/quadratic-client/src/app/ui/menus/Validations/Validation/validationType.ts
@@ -1,5 +1,6 @@
 import { Validation } from '@/app/quadratic-core-types';
 
+export const ValidationRuleSimpleValues = ['text', 'number', 'list', 'list-range', 'logical', 'date', 'none'];
 export type ValidationRuleSimple = 'text' | 'number' | 'list' | 'list-range' | 'logical' | 'date' | 'none' | '';
 export type ValidationUndefined = Validation | Omit<Validation, 'rule'> | undefined;
 export type ValidationUIType = 'checkbox' | 'dropdown';
diff --git a/quadratic-client/src/app/ui/menus/Validations/Validations/Validations.tsx b/quadratic-client/src/app/ui/menus/Validations/Validations/Validations.tsx
index a64f99e7e8..e11b80f540 100644
--- a/quadratic-client/src/app/ui/menus/Validations/Validations/Validations.tsx
+++ b/quadratic-client/src/app/ui/menus/Validations/Validations/Validations.tsx
@@ -1,13 +1,13 @@
-import { Button } from '@/shared/shadcn/ui/button';
-import { useValidationsData } from './useValidationsData';
-import { ValidationsHeader } from './ValidationsHeader';
-import { ValidationEntry } from './ValidationEntry';
-import { useCallback, useEffect, useState } from 'react';
 import { editorInteractionStateAtom } from '@/app/atoms/editorInteractionStateAtom';
-import { useSetRecoilState } from 'recoil';
-import { quadraticCore } from '@/app/web-workers/quadraticCore/quadraticCore';
 import { events } from '@/app/events/events';
 import { sheets } from '@/app/grid/controller/Sheets';
+import { quadraticCore } from '@/app/web-workers/quadraticCore/quadraticCore';
+import { Button } from '@/shared/shadcn/ui/button';
+import { useCallback, useEffect, useState } from 'react';
+import { useSetRecoilState } from 'recoil';
+import { useValidationsData } from './useValidationsData';
+import { ValidationEntry } from './ValidationEntry';
+import { ValidationsHeader } from './ValidationsHeader';
 
 export const Validations = () => {
   const setEditorInteractionState = useSetRecoilState(editorInteractionStateAtom);
@@ -70,7 +70,9 @@ export const Validations = () => {
             <Button variant="secondary" onClick={removeValidations}>
               Remove All
             </Button>
-            <Button onClick={addValidation}>Add Validation</Button>
+            <Button onClick={addValidation} autoFocus>
+              Add Validation
+            </Button>
           </div>
         </div>
       )}
diff --git a/quadratic-client/src/dashboard/components/DashboardSidebar.tsx b/quadratic-client/src/dashboard/components/DashboardSidebar.tsx
index 849f438870..ed69e7c917 100644
--- a/quadratic-client/src/dashboard/components/DashboardSidebar.tsx
+++ b/quadratic-client/src/dashboard/components/DashboardSidebar.tsx
@@ -1,21 +1,30 @@
 import { colors } from '@/app/theme/colors';
 import { newFileDialogAtom } from '@/dashboard/atoms/newFileDialogAtom';
-import { ConnectionsIcon, PrivateFileIcon, SharedWithMeIcon } from '@/dashboard/components/CustomRadixIcons';
 import { TeamSwitcher } from '@/dashboard/components/TeamSwitcher';
 import { useDashboardRouteLoaderData } from '@/routes/_dashboard';
 import { useRootRouteLoaderData } from '@/routes/_root';
 import { getActionFileMove } from '@/routes/api.files.$uuid';
 import { Avatar } from '@/shared/components/Avatar';
+import {
+  AddIcon,
+  DatabaseIcon,
+  DraftIcon,
+  EducationIcon,
+  ExamplesIcon,
+  ExternalLinkIcon,
+  FilePrivateIcon,
+  FileSharedWithMeIcon,
+  GroupIcon,
+  SettingsIcon,
+} from '@/shared/components/Icons';
 import { Type } from '@/shared/components/Type';
 import { TYPE } from '@/shared/constants/appConstants';
 import { ROUTES, SEARCH_PARAMS } from '@/shared/constants/routes';
 import { CONTACT_URL, DOCUMENTATION_URL } from '@/shared/constants/urls';
 import { Badge } from '@/shared/shadcn/ui/badge';
 import { Button } from '@/shared/shadcn/ui/button';
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/shared/shadcn/ui/tooltip';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/shared/shadcn/ui/tooltip';
 import { cn } from '@/shared/shadcn/utils';
-import { SchoolOutlined } from '@mui/icons-material';
-import { ExternalLinkIcon, FileIcon, GearIcon, MixIcon, PersonIcon, PlusIcon } from '@radix-ui/react-icons';
 import { ReactNode, useState } from 'react';
 import { NavLink, useLocation, useNavigation, useSearchParams, useSubmit } from 'react-router-dom';
 import { useSetRecoilState } from 'recoil';
@@ -36,7 +45,7 @@ export function DashboardSidebar({ isLoading }: { isLoading: boolean }) {
   } = useDashboardRouteLoaderData();
 
   const canEditTeam = teamPermissions.includes('TEAM_EDIT');
-  const classNameIcons = `mx-1 text-muted-foreground`;
+  const classNameIcons = `mx-0.5 text-muted-foreground`;
 
   return (
     <nav className={`flex h-full flex-col gap-4 overflow-auto`}>
@@ -54,24 +63,24 @@ export function DashboardSidebar({ isLoading }: { isLoading: boolean }) {
         <div className="grid gap-0.5">
           <div className="relative">
             <SidebarNavLink to={ROUTES.TEAM(activeTeamUuid)} dropTarget={canEditTeam ? null : undefined}>
-              <FileIcon className={classNameIcons} />
+              <DraftIcon className={classNameIcons} />
               Files
             </SidebarNavLink>
             {canEditTeam && <SidebarNavLinkCreateButton isPrivate={false}>New file</SidebarNavLinkCreateButton>}
           </div>
           {canEditTeam && (
             <SidebarNavLink to={ROUTES.TEAM_CONNECTIONS(activeTeamUuid)}>
-              <ConnectionsIcon className={classNameIcons} />
+              <DatabaseIcon className={classNameIcons} />
               Connections
             </SidebarNavLink>
           )}
           <SidebarNavLink to={ROUTES.TEAM_MEMBERS(activeTeamUuid)}>
-            <PersonIcon className={classNameIcons} />
+            <GroupIcon className={classNameIcons} />
             Members
           </SidebarNavLink>
           {canEditTeam && (
             <SidebarNavLink to={ROUTES.TEAM_SETTINGS(activeTeamUuid)}>
-              <GearIcon className={classNameIcons} />
+              <SettingsIcon className={classNameIcons} />
               Settings
             </SidebarNavLink>
           )}
@@ -86,13 +95,13 @@ export function DashboardSidebar({ isLoading }: { isLoading: boolean }) {
         </Type>
         <div className="relative">
           <SidebarNavLink to={ROUTES.TEAM_FILES_PRIVATE(activeTeamUuid)} dropTarget={ownerUserId}>
-            <PrivateFileIcon className={classNameIcons} />
+            <FilePrivateIcon className={classNameIcons} />
             My files
           </SidebarNavLink>
           <SidebarNavLinkCreateButton isPrivate={true}>New private file</SidebarNavLinkCreateButton>
         </div>
         <SidebarNavLink to={ROUTES.FILES_SHARED_WITH_ME}>
-          <SharedWithMeIcon className={classNameIcons} />
+          <FileSharedWithMeIcon className={classNameIcons} />
           Shared with me
         </SidebarNavLink>
 
@@ -105,7 +114,7 @@ export function DashboardSidebar({ isLoading }: { isLoading: boolean }) {
         <div className="grid gap-0.5">
           {canEditTeam && (
             <SidebarNavLink to={ROUTES.EXAMPLES}>
-              <MixIcon className={classNameIcons} />
+              <ExamplesIcon className={classNameIcons} />
               Examples
             </SidebarNavLink>
           )}
@@ -134,7 +143,7 @@ export function DashboardSidebar({ isLoading }: { isLoading: boolean }) {
               );
             }}
           >
-            <SchoolOutlined sx={{ fontSize: '16px' }} className={classNameIcons} />
+            <EducationIcon className={classNameIcons} />
             Education
             <Badge variant="secondary" className="ml-auto">
               Enrolled
@@ -165,21 +174,19 @@ export function DashboardSidebar({ isLoading }: { isLoading: boolean }) {
 function SidebarNavLinkCreateButton({ children, isPrivate }: { children: ReactNode; isPrivate: boolean }) {
   const setNewFileDialogState = useSetRecoilState(newFileDialogAtom);
   return (
-    <TooltipProvider>
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <Button
-            variant="ghost"
-            size="icon-sm"
-            className="absolute right-2 top-1 ml-auto opacity-30 hover:opacity-100"
-            onClick={() => setNewFileDialogState({ show: true, isPrivate })}
-          >
-            <PlusIcon />
-          </Button>
-        </TooltipTrigger>
-        <TooltipContent>{children}</TooltipContent>
-      </Tooltip>
-    </TooltipProvider>
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button
+          variant="ghost"
+          size="icon-sm"
+          className="absolute right-2 top-1 ml-auto opacity-30 hover:opacity-100"
+          onClick={() => setNewFileDialogState({ show: true, isPrivate })}
+        >
+          <AddIcon />
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent>{children}</TooltipContent>
+    </Tooltip>
   );
 }
 
diff --git a/quadratic-client/src/dashboard/components/FilesListItem.tsx b/quadratic-client/src/dashboard/components/FilesListItem.tsx
index c00c9fe147..6e6278f753 100644
--- a/quadratic-client/src/dashboard/components/FilesListItem.tsx
+++ b/quadratic-client/src/dashboard/components/FilesListItem.tsx
@@ -1,4 +1,3 @@
-import { deleteFile, downloadFileAction, duplicateFileAction, renameFileAction } from '@/app/actions';
 import { useDashboardRouteLoaderData } from '@/routes/_dashboard';
 import {
   Action as FileAction,
@@ -6,7 +5,9 @@ import {
   getActionFileDuplicate,
   getActionFileMove,
 } from '@/routes/api.files.$uuid';
+import { DialogRenameItem } from '@/shared/components/DialogRenameItem';
 import { useGlobalSnackbar } from '@/shared/components/GlobalSnackbarProvider';
+import { DraftIcon, MoreVertIcon } from '@/shared/components/Icons';
 import { ROUTES } from '@/shared/constants/routes';
 import { Button as Btn } from '@/shared/shadcn/ui/button';
 import {
@@ -19,11 +20,9 @@ import {
 import { Separator } from '@/shared/shadcn/ui/separator';
 import { cn } from '@/shared/shadcn/utils';
 import { timeAgo } from '@/shared/utils/timeAgo';
-import { DotsVerticalIcon, FileIcon } from '@radix-ui/react-icons';
 import mixpanel from 'mixpanel-browser';
 import { useEffect, useRef, useState } from 'react';
 import { Link, SubmitOptions, useFetcher, useMatch, useSubmit } from 'react-router-dom';
-import { DialogRenameItem } from './DialogRenameItem';
 import { FilesListExampleFile, FilesListUserFile } from './FilesList';
 import { FilesListItemCore } from './FilesListItemCore';
 import { Layout, Sort, ViewPreferences } from './FilesListViewControlsDropdown';
@@ -182,7 +181,7 @@ export function FilesListItemUserFile({
         // it becomes visible.
         className="absolute -top-[1px] left-0 z-0 flex items-center gap-1 rounded-full border border-background bg-primary px-2 py-0.5 text-sm text-primary-foreground opacity-0"
       >
-        <FileIcon />
+        <DraftIcon />
         {file.name.length > 16 ? file.name.slice(0, 16) + '…' : file.name}
       </div>
       <Link
@@ -209,13 +208,12 @@ export function FilesListItemUserFile({
                     variant="ghost"
                     size="icon"
                     className={cn(
-                      viewPreferences.layout === Layout.Grid
-                        ? 'absolute right-2 top-2 text-muted-foreground'
-                        : 'flex-shrink-0',
-                      'hover:border hover:bg-background hover:text-foreground hover:shadow-sm data-[state=open]:border data-[state=open]:bg-background data-[state=open]:text-foreground data-[state=open]:shadow-sm'
+                      viewPreferences.layout === Layout.Grid ? 'absolute right-2 top-2' : 'flex-shrink-0',
+                      'hover:border hover:bg-background hover:text-foreground hover:shadow-sm data-[state=open]:border data-[state=open]:bg-background data-[state=open]:text-foreground data-[state=open]:shadow-sm',
+                      'text-muted-foreground hover:text-foreground'
                     )}
                   >
-                    <DotsVerticalIcon className="h-4 w-4" />
+                    <MoreVertIcon className="text h-4 w-4" />
                   </Btn>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent align="end" className="w-48">
@@ -223,12 +221,12 @@ export function FilesListItemUserFile({
                     <DropdownMenuItem onClick={handleShare}>Share</DropdownMenuItem>
                   )}
                   {permissions.includes('FILE_EDIT') && (
-                    <DropdownMenuItem onClick={handleDuplicate}>{duplicateFileAction.label}</DropdownMenuItem>
+                    <DropdownMenuItem onClick={handleDuplicate}>Duplicate</DropdownMenuItem>
                   )}
                   {permissions.includes('FILE_EDIT') && (
-                    <DropdownMenuItem onClick={() => setOpen(true)}>{renameFileAction.label}</DropdownMenuItem>
+                    <DropdownMenuItem onClick={() => setOpen(true)}>Rename</DropdownMenuItem>
                   )}
-                  <DropdownMenuItem onClick={handleDownload}>{downloadFileAction.label}</DropdownMenuItem>
+                  <DropdownMenuItem onClick={handleDownload}>Download</DropdownMenuItem>
                   {canMoveFiles && (
                     <>
                       <DropdownMenuSeparator />
@@ -270,7 +268,7 @@ export function FilesListItemUserFile({
                   {permissions.includes('FILE_DELETE') && (
                     <>
                       <DropdownMenuSeparator />
-                      <DropdownMenuItem onClick={handleDelete}>{deleteFile.label}</DropdownMenuItem>
+                      <DropdownMenuItem onClick={handleDelete}>Delete</DropdownMenuItem>
                     </>
                   )}
                 </DropdownMenuContent>
diff --git a/quadratic-client/src/dashboard/components/FilesListViewControls.tsx b/quadratic-client/src/dashboard/components/FilesListViewControls.tsx
index b55243b3db..f1418b8d4a 100644
--- a/quadratic-client/src/dashboard/components/FilesListViewControls.tsx
+++ b/quadratic-client/src/dashboard/components/FilesListViewControls.tsx
@@ -1,6 +1,6 @@
+import { CloseIcon } from '@/shared/components/Icons';
 import { Button } from '@/shared/shadcn/ui/button';
 import { Input } from '@/shared/shadcn/ui/input';
-import { Cross2Icon } from '@radix-ui/react-icons';
 import React from 'react';
 import { FileListViewControlsDropdown, ViewPreferences } from './FilesListViewControlsDropdown';
 
@@ -27,7 +27,7 @@ export function FilesListViewControls({
             onClick={() => setFilterValue('')}
             aria-label="Clear filter"
           >
-            <Cross2Icon className={`h-4 w-4`} />
+            <CloseIcon className={`h-4 w-4`} />
           </Button>
         )}
       </div>
diff --git a/quadratic-client/src/dashboard/components/FilesListViewControlsDropdown.tsx b/quadratic-client/src/dashboard/components/FilesListViewControlsDropdown.tsx
index 2590b80d7e..5553f05daa 100644
--- a/quadratic-client/src/dashboard/components/FilesListViewControlsDropdown.tsx
+++ b/quadratic-client/src/dashboard/components/FilesListViewControlsDropdown.tsx
@@ -1,3 +1,4 @@
+import { ArrowDropDownIcon, ViewGridIcon, ViewListIcon } from '@/shared/components/Icons';
 import { Button } from '@/shared/shadcn/ui/button';
 import {
   DropdownMenu,
@@ -9,7 +10,6 @@ import {
   DropdownMenuTrigger,
 } from '@/shared/shadcn/ui/dropdown-menu';
 import { cn } from '@/shared/shadcn/utils';
-import { ChevronDownIcon, DashboardIcon, DropdownMenuIcon, ListBulletIcon } from '@radix-ui/react-icons';
 import { Dispatch, SetStateAction } from 'react';
 
 export type ViewPreferences = {
@@ -114,7 +114,7 @@ export function FileListViewControlsDropdown({
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
               <Button variant="ghost" size="sm" className="text-muted-foreground">
-                {sortButtonLabel} <ChevronDownIcon className="ml-1" />
+                {sortButtonLabel} <ArrowDropDownIcon className="ml-0.5" />
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent className="w-52">
@@ -135,7 +135,7 @@ export function FileListViewControlsDropdown({
           </DropdownMenu>
         )}
 
-        <div>
+        <div className="text-muted-foreground">
           <Button
             className={cn(viewPreferences.layout === Layout.Grid && 'bg-accent', `!opacity-100`)}
             variant="ghost"
@@ -143,7 +143,7 @@ export function FileListViewControlsDropdown({
             disabled={viewPreferences.layout === Layout.Grid}
             onClick={() => setViewPreferences((prev: any) => ({ ...prev, layout: Layout.Grid }))}
           >
-            <DashboardIcon />
+            <ViewGridIcon />
           </Button>
           <Button
             className={cn(viewPreferences.layout === Layout.List && 'bg-accent', `!opacity-100`)}
@@ -152,7 +152,7 @@ export function FileListViewControlsDropdown({
             disabled={viewPreferences.layout === Layout.List}
             onClick={() => setViewPreferences((prev: any) => ({ ...prev, layout: Layout.List }))}
           >
-            <ListBulletIcon />
+            <ViewListIcon />
           </Button>
         </div>
       </div>
@@ -161,7 +161,7 @@ export function FileListViewControlsDropdown({
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
             <Button variant="outline" size="icon">
-              <DropdownMenuIcon />
+              <ArrowDropDownIcon />
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent className="w-56">
diff --git a/quadratic-client/src/dashboard/components/NewFileDialog.tsx b/quadratic-client/src/dashboard/components/NewFileDialog.tsx
index 9b12ff4a38..5467c7af66 100644
--- a/quadratic-client/src/dashboard/components/NewFileDialog.tsx
+++ b/quadratic-client/src/dashboard/components/NewFileDialog.tsx
@@ -1,25 +1,17 @@
 import { LanguageIcon } from '@/app/ui/components/LanguageIcon';
 import { useFileImport } from '@/app/ui/hooks/useFileImport';
 import { fileDragDropModalAtom } from '@/dashboard/atoms/fileDragDropModalAtom';
-import { ConnectionsIcon } from '@/dashboard/components/CustomRadixIcons';
 import { FileDragDrop } from '@/dashboard/components/FileDragDrop';
 import { useConnectionSchemaBrowserTableQueryActionNewFile } from '@/dashboard/hooks/useConnectionSchemaBrowserTableQueryAction';
 import { ConnectionSchemaBrowser } from '@/shared/components/connections/ConnectionSchemaBrowser';
 import { PrivateFileToggle } from '@/shared/components/connections/PrivateFileToggle';
+import { AddIcon, ApiIcon, DatabaseIcon, ExamplesIcon, FilePrivateIcon, ImportIcon } from '@/shared/components/Icons';
 import { ROUTES } from '@/shared/constants/routes';
 import { useNewFileFromStatePythonApi } from '@/shared/hooks/useNewFileFromState';
 import { Button } from '@/shared/shadcn/ui/button';
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/shared/shadcn/ui/dialog';
 import { cn } from '@/shared/shadcn/utils';
-import {
-  ArrowDownIcon,
-  ArrowLeftIcon,
-  ChevronRightIcon,
-  LockClosedIcon,
-  MixIcon,
-  PlusIcon,
-  RocketIcon,
-} from '@radix-ui/react-icons';
+import { ArrowLeftIcon, ChevronRightIcon } from '@radix-ui/react-icons';
 import { ConnectionList, ConnectionType } from 'quadratic-shared/typesAndSchemasConnections';
 import { useCallback, useState } from 'react';
 import { Link, useLocation, useNavigation } from 'react-router-dom';
@@ -65,7 +57,7 @@ export function NewFileDialog({ connections, teamUuid, onClose, isPrivate: initi
           <div className="absolute left-0 right-0 top-0 h-full w-full bg-background/60" />
         )}
         <DialogHeader className="space-y-0">
-          <DialogTitle className="flex h-7 items-center gap-1.5">
+          <DialogTitle className="flex h-7 items-center gap-1">
             {activeConnection ? (
               <>
                 <Button
@@ -81,7 +73,7 @@ export function NewFileDialog({ connections, teamUuid, onClose, isPrivate: initi
             ) : (
               'New file'
             )}
-            {isPrivate && <LockClosedIcon className="mr-0.5" />}
+            {isPrivate && <FilePrivateIcon />}
           </DialogTitle>
           <DialogDescription asChild>
             <PrivateFileToggle
@@ -110,7 +102,7 @@ export function NewFileDialog({ connections, teamUuid, onClose, isPrivate: initi
                 onClick={onClose}
               >
                 <ItemIcon>
-                  <PlusIcon />
+                  <AddIcon />
                 </ItemIcon>
                 Blank
               </Link>
@@ -128,7 +120,7 @@ export function NewFileDialog({ connections, teamUuid, onClose, isPrivate: initi
                 }}
               >
                 <ItemIcon>
-                  <ArrowDownIcon />
+                  <ImportIcon />
                 </ItemIcon>
                 Import data from a file (.csv, .pqt, .xlsx, .grid)
               </button>
@@ -140,7 +132,7 @@ export function NewFileDialog({ connections, teamUuid, onClose, isPrivate: initi
                 onClick={onClose}
               >
                 <ItemIcon>
-                  <RocketIcon />
+                  <ApiIcon />
                 </ItemIcon>
                 Fetch data from an API
               </Link>
@@ -153,7 +145,7 @@ export function NewFileDialog({ connections, teamUuid, onClose, isPrivate: initi
                 onClick={onClose}
               >
                 <ItemIcon>
-                  <MixIcon />
+                  <ExamplesIcon />
                 </ItemIcon>
                 Learn from an example file
               </Link>
@@ -161,7 +153,7 @@ export function NewFileDialog({ connections, teamUuid, onClose, isPrivate: initi
             <li className={`col-span-4 rounded border border-border`}>
               <div className={`text-muted-foreground ${gridItemClassName} border-none`}>
                 <ItemIcon disabled>
-                  <ConnectionsIcon className="text-muted-foreground" />
+                  <DatabaseIcon className="text-muted-foreground" />
                 </ItemIcon>
                 Query data from a connection
               </div>
@@ -208,7 +200,7 @@ function ItemIcon({ children, disabled }: { children: React.ReactNode; disabled?
   return (
     <div
       className={cn(
-        `flex h-6 w-6 items-center justify-center rounded bg-accent text-primary`,
+        `flex h-8 w-8 items-center justify-center rounded bg-accent text-primary`,
         disabled ? '' : `group-hover:bg-primary group-hover:text-background`
       )}
     >
diff --git a/quadratic-client/src/dashboard/components/TeamSwitcher.tsx b/quadratic-client/src/dashboard/components/TeamSwitcher.tsx
index 1c5abf6a4d..4c8e99dc71 100644
--- a/quadratic-client/src/dashboard/components/TeamSwitcher.tsx
+++ b/quadratic-client/src/dashboard/components/TeamSwitcher.tsx
@@ -1,6 +1,7 @@
 import { useDashboardRouteLoaderData } from '@/routes/_dashboard';
 import { useRootRouteLoaderData } from '@/routes/_root';
 import { TeamAction } from '@/routes/teams.$teamUuid';
+import { AddIcon, ArrowDropDownIcon, CheckIcon, LogoutIcon, RefreshIcon } from '@/shared/components/Icons';
 import { Type } from '@/shared/components/Type';
 import { ROUTES } from '@/shared/constants/routes';
 import { Button } from '@/shared/shadcn/ui/button';
@@ -13,7 +14,6 @@ import {
   DropdownMenuTrigger,
 } from '@/shared/shadcn/ui/dropdown-menu';
 import { isJsonObject } from '@/shared/utils/isJsonObject';
-import { CaretSortIcon, CheckCircledIcon, ExitIcon, PlusIcon, ReloadIcon } from '@radix-ui/react-icons';
 import { ReactNode } from 'react';
 import { Link, useFetcher, useNavigate, useSubmit } from 'react-router-dom';
 
@@ -43,10 +43,10 @@ export function TeamSwitcher({ appIsLoading }: Props) {
       <DropdownMenuTrigger asChild>
         <Button variant="outline" className="flex justify-between px-3 font-semibold">
           <div className="select-none truncate">{optimisticActiveTeamName}</div>
-          <div className="relative">
-            <CaretSortIcon />
-            <ReloadIcon
-              className={`absolute left-0 top-0 ml-auto mr-1 animate-spin bg-background text-primary transition-opacity ${
+          <div className="relative flex items-center">
+            <ArrowDropDownIcon />
+            <RefreshIcon
+              className={`absolute left-0 top-0 ml-auto animate-spin bg-background text-primary transition-opacity ${
                 appIsLoading ? '' : ' opacity-0'
               }`}
             />
@@ -76,7 +76,7 @@ export function TeamSwitcher({ appIsLoading }: Props) {
                   {isPaid ? <DotFilledIcon className="text-success" /> : <DotIcon className="text-warning" />}
                 </IconWrapper> */}
 
-                <IconWrapper>{isActive && <CheckCircledIcon />}</IconWrapper>
+                <IconWrapper>{isActive && <CheckIcon />}</IconWrapper>
                 <div className="flex flex-col">
                   <div>{name}</div>
                   <Type variant="caption">
@@ -100,7 +100,7 @@ export function TeamSwitcher({ appIsLoading }: Props) {
           }}
         >
           <IconWrapper>
-            <PlusIcon />
+            <AddIcon />
           </IconWrapper>
           Create team
         </DropdownMenuItem>
@@ -112,7 +112,7 @@ export function TeamSwitcher({ appIsLoading }: Props) {
           }}
         >
           <IconWrapper>
-            <ExitIcon />
+            <LogoutIcon />
           </IconWrapper>
           Log out
         </DropdownMenuItem>
diff --git a/quadratic-client/src/index.css b/quadratic-client/src/index.css
index b9d8282469..f661e688aa 100644
--- a/quadratic-client/src/index.css
+++ b/quadratic-client/src/index.css
@@ -58,3 +58,14 @@ a {
   content: '›' !important;
   font-size: 1.125rem !important;
 }
+
+/* Hide scrollbar for Chrome, Safari and Opera */
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+/* Hide scrollbar for IE, Edge and Firefox */
+.no-scrollbar {
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
diff --git a/quadratic-client/src/routes/_dashboard.tsx b/quadratic-client/src/routes/_dashboard.tsx
index 4c687c4217..48f2ce1072 100644
--- a/quadratic-client/src/routes/_dashboard.tsx
+++ b/quadratic-client/src/routes/_dashboard.tsx
@@ -6,13 +6,15 @@ import { Empty } from '@/dashboard/components/Empty';
 import { ImportProgressList } from '@/dashboard/components/ImportProgressList';
 import { NewFileDialog } from '@/dashboard/components/NewFileDialog';
 import { apiClient } from '@/shared/api/apiClient';
+import { MenuIcon } from '@/shared/components/Icons';
 import { ROUTES, ROUTE_LOADER_IDS, SEARCH_PARAMS } from '@/shared/constants/routes';
 import { CONTACT_URL } from '@/shared/constants/urls';
 import { useTheme } from '@/shared/hooks/useTheme';
 import { Button } from '@/shared/shadcn/ui/button';
 import { Sheet, SheetContent, SheetTrigger } from '@/shared/shadcn/ui/sheet';
+import { TooltipProvider } from '@/shared/shadcn/ui/tooltip';
 import { cn } from '@/shared/shadcn/utils';
-import { ExclamationTriangleIcon, HamburgerMenuIcon, InfoCircledIcon } from '@radix-ui/react-icons';
+import { ExclamationTriangleIcon, InfoCircledIcon } from '@radix-ui/react-icons';
 import * as Sentry from '@sentry/react';
 import { ApiTypes } from 'quadratic-shared/typesAndSchemas';
 import { useEffect, useRef, useState } from 'react';
@@ -195,39 +197,41 @@ export const Component = () => {
 
   return (
     <RecoilRoot>
-      <div className={`h-full lg:flex lg:flex-row`}>
-        <div
-          ref={contentPaneRef}
-          className={cn(
-            `relative order-2 flex h-full w-full flex-grow flex-col px-4 pb-10 transition-all sm:pt-0 lg:px-10`,
-            isLoading ? 'overflow-hidden' : 'overflow-auto',
-            isLoading && 'pointer-events-none opacity-25'
-          )}
-        >
-          <div className={`sticky top-0 z-50 -mx-4 flex items-center justify-end bg-background px-2 py-1 lg:hidden`}>
-            <Sheet open={isOpen} onOpenChange={setIsOpen}>
-              <SheetTrigger asChild>
-                <Button variant="ghost" size="icon" onClick={() => setIsOpen(true)}>
-                  <HamburgerMenuIcon />
-                </Button>
-              </SheetTrigger>
-              <SheetContent className="p-0" style={{ width: DRAWER_WIDTH }}>
-                <DashboardSidebar isLoading={isLoading} />
-              </SheetContent>
-            </Sheet>
+      <TooltipProvider>
+        <div className={`h-full lg:flex lg:flex-row`}>
+          <div
+            ref={contentPaneRef}
+            className={cn(
+              `relative order-2 flex h-full w-full flex-grow flex-col px-4 pb-10 transition-all sm:pt-0 lg:px-10`,
+              isLoading ? 'overflow-hidden' : 'overflow-auto',
+              isLoading && 'pointer-events-none opacity-25'
+            )}
+          >
+            <div className={`sticky top-0 z-50 -mx-4 flex items-center justify-end bg-background px-2 py-1 lg:hidden`}>
+              <Sheet open={isOpen} onOpenChange={setIsOpen}>
+                <SheetTrigger asChild>
+                  <Button variant="ghost" size="icon" onClick={() => setIsOpen(true)}>
+                    <MenuIcon />
+                  </Button>
+                </SheetTrigger>
+                <SheetContent className="p-0" style={{ width: DRAWER_WIDTH }}>
+                  <DashboardSidebar isLoading={isLoading} />
+                </SheetContent>
+              </Sheet>
+            </div>
+            <Outlet />
           </div>
-          <Outlet />
-        </div>
-        <div
-          className={`order-1 hidden flex-shrink-0 border-r border-r-border lg:block`}
-          style={{ width: DRAWER_WIDTH }}
-        >
-          <DashboardSidebar isLoading={isLoading} />
+          <div
+            className={`order-1 hidden flex-shrink-0 border-r border-r-border lg:block`}
+            style={{ width: DRAWER_WIDTH }}
+          >
+            <DashboardSidebar isLoading={isLoading} />
+          </div>
+          {searchParams.get(SEARCH_PARAMS.DIALOG.KEY) === SEARCH_PARAMS.DIALOG.VALUES.EDUCATION && <EducationDialog />}
         </div>
-        {searchParams.get(SEARCH_PARAMS.DIALOG.KEY) === SEARCH_PARAMS.DIALOG.VALUES.EDUCATION && <EducationDialog />}
-      </div>
-      <NewFileDialogWrapper />
-      <ImportProgressList />
+        <NewFileDialogWrapper />
+        <ImportProgressList />
+      </TooltipProvider>
     </RecoilRoot>
   );
 };
diff --git a/quadratic-client/src/routes/teams.create.tsx b/quadratic-client/src/routes/teams.create.tsx
index 4a32c94d1b..9abb69ece2 100644
--- a/quadratic-client/src/routes/teams.create.tsx
+++ b/quadratic-client/src/routes/teams.create.tsx
@@ -1,5 +1,6 @@
 import { apiClient } from '@/shared/api/apiClient';
 import { useGlobalSnackbar } from '@/shared/components/GlobalSnackbarProvider';
+import { RefreshIcon } from '@/shared/components/Icons';
 import { ROUTES } from '@/shared/constants/routes';
 import { Button } from '@/shared/shadcn/ui/button';
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/shared/shadcn/ui/dialog';
@@ -14,7 +15,6 @@ import {
 } from '@/shared/shadcn/ui/form';
 import { Input } from '@/shared/shadcn/ui/input';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { ReloadIcon } from '@radix-ui/react-icons';
 import { TeamSchema } from 'quadratic-shared/typesAndSchemas';
 import { useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
@@ -110,7 +110,7 @@ export const Component = () => {
                   Cancel
                 </Button>
                 <Button type="submit" variant="default" disabled={disabled}>
-                  {fetcher.state !== 'idle' && <ReloadIcon className="mr-2 h-4 w-4 animate-spin" />} Create team
+                  {fetcher.state !== 'idle' && <RefreshIcon className="mr-2 h-4 w-4 animate-spin" />} Create team
                 </Button>
               </div>
             </form>
diff --git a/quadratic-client/src/dashboard/components/DialogRenameItem.tsx b/quadratic-client/src/shared/components/DialogRenameItem.tsx
similarity index 89%
rename from quadratic-client/src/dashboard/components/DialogRenameItem.tsx
rename to quadratic-client/src/shared/components/DialogRenameItem.tsx
index 3c9aee03bd..0d6fc6ed5e 100644
--- a/quadratic-client/src/dashboard/components/DialogRenameItem.tsx
+++ b/quadratic-client/src/shared/components/DialogRenameItem.tsx
@@ -25,7 +25,6 @@ export function DialogRenameItem({
   const [localValue, setLocalValue] = useState<string>(value);
 
   const count = localValue.length;
-  // TODO: one day set a max length on file/team name
   const disabled = count === 0;
 
   const handleSubmit = (e: React.FormEvent) => {
@@ -67,9 +66,6 @@ export function DialogRenameItem({
         </DialogHeader>
         <form onSubmit={handleSubmit} id={formId}>
           <Input id={inputId} value={localValue} autoComplete="off" onChange={handleInputChange} />
-          {/* <p className={`text-right text-sm ${disabled ? 'text-destructive' : 'text-muted-foreground'}`}>
-            {count} / {FILE_AND_TEAM_NAME_MAX_LENGTH}
-          </p> */}
         </form>
         <DialogFooter>
           <DialogClose asChild>
diff --git a/quadratic-client/src/shared/components/Icons.tsx b/quadratic-client/src/shared/components/Icons.tsx
new file mode 100644
index 0000000000..6e1db9b9c7
--- /dev/null
+++ b/quadratic-client/src/shared/components/Icons.tsx
@@ -0,0 +1,412 @@
+/**
+ * This is where we map all the icons we use to the ones from [Google's Material Symbols](https://fonts.google.com/icons)
+ * We use Google’s recommended implementation stragegy, which is loading the font
+ * FWIW: the font is loaded via the root `index.html`
+ * We import 20 dp icons, as those are the only ones we use at the moment.
+ */
+import { cn } from '@/shared/shadcn/utils';
+import './icons.css';
+
+/**
+ * Base icon component, used to render icons from the Material Symbols font.
+ */
+interface BaseIconProps extends React.HTMLAttributes<HTMLSpanElement> {
+  children: string;
+  // TODO: if and when we need to use other sizes, we'll have this as a prop
+  // Note: we'll have to load the additional sizes via the font loader in `index.html`
+  //e.g. size: 'sm' | 'md' | 'lg' | 'xl' -> '20' '24' '40' '48';
+}
+
+const Icon = (props: BaseIconProps) => {
+  const { children, className, ...rest } = props;
+  return (
+    <span className={`material-symbols-outlined material-symbols-20 ${className ? className : ''}`} {...rest}>
+      {children}
+    </span>
+  );
+};
+
+/**
+ * Individual icons from Material Symbols font.
+ */
+type IconProps = Omit<BaseIconProps, 'children'>;
+export type IconComponent = React.FC<IconProps>;
+
+export const AddIcon: IconComponent = (props) => {
+  return <Icon {...props}>add</Icon>;
+};
+
+export const ApiIcon: IconComponent = (props) => {
+  return <Icon {...props}>api</Icon>;
+};
+
+export const ArrowDropDownIcon: IconComponent = (props) => {
+  return <Icon {...props}>arrow_drop_down</Icon>;
+};
+
+export const ArrowDropDownCircleIcon: IconComponent = (props) => {
+  return <Icon {...props}>arrow_drop_down_circle</Icon>;
+};
+
+export const BorderAllIcon: IconComponent = (props) => {
+  return <Icon {...props}>border_all</Icon>;
+};
+
+export const BorderOuterIcon: IconComponent = (props) => {
+  return <Icon {...props}>border_outer</Icon>;
+};
+
+export const BorderInnerIcon: IconComponent = (props) => {
+  return <Icon {...props}>border_inner</Icon>;
+};
+
+export const BorderVerticalIcon: IconComponent = (props) => {
+  return <Icon {...props}>border_vertical</Icon>;
+};
+
+export const BorderHorizontalIcon: IconComponent = (props) => {
+  return <Icon {...props}>border_horizontal</Icon>;
+};
+
+export const BorderLeftIcon: IconComponent = (props) => {
+  return <Icon {...props}>border_left</Icon>;
+};
+
+export const BorderRightIcon: IconComponent = (props) => {
+  return <Icon {...props}>border_right</Icon>;
+};
+
+export const BorderTopIcon: IconComponent = (props) => {
+  return <Icon {...props}>border_bottom</Icon>;
+};
+
+export const BorderBottomIcon: IconComponent = (props) => {
+  return <Icon {...props}>border_bottom</Icon>;
+};
+
+export const BorderClearIcon: IconComponent = (props) => {
+  return <Icon {...props}>border_clear</Icon>;
+};
+
+export const BorderStyleIcon: IconComponent = (props) => {
+  return <Icon {...props}>border_style</Icon>;
+};
+
+export const BorderColorIcon: IconComponent = (props) => {
+  return <Icon {...props}>border_color</Icon>;
+};
+
+export const CheckBoxIcon: IconComponent = (props) => {
+  return <Icon {...props}>check_box</Icon>;
+};
+
+export const CheckIcon: IconComponent = (props) => {
+  return <Icon {...props}>check</Icon>;
+};
+
+export const CheckSmallIcon: IconComponent = (props) => {
+  return <Icon {...props}>check_small</Icon>;
+};
+
+export const ChevronLeftIcon: IconComponent = (props) => {
+  return <Icon {...props}>chevron_left</Icon>;
+};
+
+export const ChevronRightIcon: IconComponent = (props) => {
+  return <Icon {...props}>chevron_right</Icon>;
+};
+
+export const CloseIcon: IconComponent = (props) => {
+  return <Icon {...props}>close</Icon>;
+};
+
+export const CodeCellOutlineOn: IconComponent = (props) => {
+  return <Icon {...props}>select</Icon>;
+};
+
+export const CodeCellOutlineOff: IconComponent = (props) => {
+  return <Icon {...props}>remove_selection</Icon>;
+};
+
+export const CodeIcon: IconComponent = (props) => {
+  return <Icon {...props}>code</Icon>;
+};
+
+export const CopyIcon: IconComponent = (props) => {
+  return <Icon {...props}>content_copy</Icon>;
+};
+
+export const CopyAsPng: IconComponent = (props) => {
+  return <Icon {...props}>image</Icon>;
+};
+
+export const CsvIcon: IconComponent = (props) => {
+  return <Icon {...props}>csv</Icon>;
+};
+
+export const CurrencyIcon: IconComponent = (props) => {
+  return <Icon {...props}>attach_money</Icon>;
+};
+
+export const CutIcon: IconComponent = (props) => {
+  return <Icon {...props}>content_cut</Icon>;
+};
+
+export const CropFreeIcon: IconComponent = (props) => {
+  return <Icon {...props}>crop_free</Icon>;
+};
+
+export const DatabaseIcon: IconComponent = (props) => {
+  return <Icon {...props}>database</Icon>;
+};
+
+export const DataObjectIcon: IconComponent = (props) => {
+  return <Icon {...props}>data_object</Icon>;
+};
+
+export const DataValidationsIcon: IconComponent = (props) => {
+  return <Icon {...props}>rubric</Icon>;
+};
+
+export const DocumentationIcon: IconComponent = (props) => {
+  return <Icon {...props}>menu_book</Icon>;
+};
+
+export const DecimalDecreaseIcon: IconComponent = (props) => {
+  return <Icon {...props}>decimal_decrease</Icon>;
+};
+
+export const DecimalIncreaseIcon: IconComponent = (props) => {
+  return <Icon {...props}>decimal_increase</Icon>;
+};
+
+export const DeleteIcon: IconComponent = (props) => {
+  return <Icon {...props}>delete</Icon>;
+};
+
+export const DownloadIcon: IconComponent = (props) => {
+  return <Icon {...props}>download</Icon>;
+};
+
+export const DraftIcon: IconComponent = (props) => {
+  return <Icon {...props}>draft</Icon>;
+};
+
+export const EditIcon: IconComponent = (props) => {
+  return <Icon {...props}>edit</Icon>;
+};
+
+export const EducationIcon: IconComponent = (props) => {
+  return <Icon {...props}>school</Icon>;
+};
+
+export const ExamplesIcon: IconComponent = (props) => {
+  return <Icon {...props}>view_carousel</Icon>;
+};
+
+export const ExternalLinkIcon: IconComponent = (props) => {
+  return <Icon {...props}>arrow_outward</Icon>;
+};
+
+export const FormatAlignCenterIcon: IconComponent = (props) => {
+  return <Icon {...props}>format_align_center</Icon>;
+};
+
+export const FormatAlignLeftIcon: IconComponent = (props) => {
+  return <Icon {...props}>format_align_left</Icon>;
+};
+
+export const FormatAlignRightIcon: IconComponent = (props) => {
+  return <Icon {...props}>format_align_right</Icon>;
+};
+
+export const FormatClearIcon: IconComponent = (props) => {
+  return <Icon {...props}>format_clear</Icon>;
+};
+
+export const FormatColorFillIcon: IconComponent = (props) => {
+  return <Icon {...props}>format_color_fill</Icon>;
+};
+
+export const FormatColorTextIcon: IconComponent = (props) => {
+  return <Icon {...props}>format_color_text</Icon>;
+};
+
+export const FormatBoldIcon: IconComponent = (props) => {
+  return <Icon {...props}>format_bold</Icon>;
+};
+
+export const FormatItalicIcon: IconComponent = (props) => {
+  return <Icon {...props}>format_italic</Icon>;
+};
+
+export const FormatNumberAutomaticIcon: IconComponent = (props) => {
+  return <Icon {...props}>award_star</Icon>;
+};
+
+export const FormatTextClipIcon: IconComponent = (props) => {
+  return <Icon {...props}>format_text_clip</Icon>;
+};
+
+export const FormatTextOverflowIcon: IconComponent = (props) => {
+  return <Icon {...props}>format_text_overflow</Icon>;
+};
+
+export const FormatTextWrapIcon: IconComponent = (props) => {
+  return <Icon {...props}>format_text_wrap</Icon>;
+};
+
+export const FormatToggleCommasIcon: IconComponent = (props) => {
+  return <Icon {...props}>format_quote</Icon>;
+};
+
+export const FormatDateTimeIcon: IconComponent = (props) => {
+  return <Icon {...props}>calendar_month</Icon>;
+};
+
+export const FileCopyIcon: IconComponent = (props) => {
+  return <Icon {...props}>file_copy</Icon>;
+};
+
+export const FileRenameIcon: IconComponent = (props) => {
+  return <Icon {...props}>text_select_start</Icon>;
+};
+
+export const FunctionIcon: IconComponent = (props) => {
+  return <Icon {...props}>function</Icon>;
+};
+
+export const FeedbackIcon: IconComponent = (props) => {
+  return <Icon {...props}>feedback</Icon>;
+};
+
+export const GoToIcon: IconComponent = (props) => {
+  return <Icon {...props}>arrow_top_right</Icon>;
+};
+
+export const GroupIcon: IconComponent = (props) => {
+  return <Icon {...props}>group</Icon>;
+};
+
+export const ImportIcon: IconComponent = (props) => {
+  return <Icon {...props}>login</Icon>;
+};
+
+export const InsertChartIcon: IconComponent = (props) => {
+  return <Icon {...props}>insert_chart</Icon>;
+};
+
+export const LogoutIcon: IconComponent = (props) => {
+  return <Icon {...props}>logout</Icon>;
+};
+
+export const HelpIcon: IconComponent = (props) => {
+  return <Icon {...props}>help</Icon>;
+};
+
+export const MailIcon: IconComponent = (props) => {
+  return <Icon {...props}>mail</Icon>;
+};
+
+export const ManageSearch: IconComponent = (props) => {
+  return <Icon {...props}>manage_search</Icon>;
+};
+
+export const MenuIcon: IconComponent = (props) => {
+  return <Icon {...props}>menu</Icon>;
+};
+
+export const MemoryIcon: IconComponent = (props) => {
+  return <Icon {...props}>memory</Icon>;
+};
+
+export const MoreVertIcon: IconComponent = (props) => {
+  return <Icon {...props}>more_vert</Icon>;
+};
+
+export const Number123Icon: IconComponent = (props) => {
+  // This icon is just too small, so we make it more readable within its container
+  // by increasing its size and adjusting its position
+  // TODO: if/when we support sizing, we'll have to adjust this for each size
+  return (
+    <Icon {...props} className={cn(props.className, 'relative left-[-4px] top-[-4px] !text-[28px]')}>
+      123
+    </Icon>
+  );
+};
+
+export const FindInFileIcon: IconComponent = (props) => {
+  return <Icon {...props}>pageview</Icon>;
+};
+
+export const FilePrivateIcon: IconComponent = (props) => {
+  return <Icon {...props}>lock</Icon>;
+};
+
+export const FileSharedWithMeIcon: IconComponent = (props) => {
+  return <Icon {...props}>move_to_inbox</Icon>;
+};
+
+export const PasteIcon: IconComponent = (props) => {
+  return <Icon {...props}>content_paste</Icon>;
+};
+
+export const PercentIcon: IconComponent = (props) => {
+  return <Icon {...props}>percent</Icon>;
+};
+
+export const PersonAddIcon: IconComponent = (props) => {
+  return <Icon {...props}>person_add</Icon>;
+};
+
+export const RedoIcon: IconComponent = (props) => {
+  return <Icon {...props}>redo</Icon>;
+};
+
+export const RefreshIcon: IconComponent = (props) => {
+  return <Icon {...props}>refresh</Icon>;
+};
+
+export const ScientificIcon: IconComponent = (props) => {
+  return <Icon {...props}>functions</Icon>;
+};
+
+export const SettingsIcon: IconComponent = (props) => {
+  return <Icon {...props}>settings</Icon>;
+};
+
+export const SheetIcon: IconComponent = (props) => {
+  return <Icon {...props}>tab</Icon>;
+};
+
+export const VerticalAlignBottomIcon: IconComponent = (props) => {
+  return <Icon {...props}>vertical_align_bottom</Icon>;
+};
+
+export const VerticalAlignMiddleIcon: IconComponent = (props) => {
+  return <Icon {...props}>vertical_align_center</Icon>;
+};
+
+export const VerticalAlignTopIcon: IconComponent = (props) => {
+  return <Icon {...props}>vertical_align_top</Icon>;
+};
+
+export const ViewListIcon: IconComponent = (props) => {
+  return <Icon {...props}>list</Icon>;
+};
+
+export const ViewGridIcon: IconComponent = (props) => {
+  return <Icon {...props}>grid_view</Icon>;
+};
+
+export const UndoIcon: IconComponent = (props) => {
+  return <Icon {...props}>undo</Icon>;
+};
+
+export const ZoomInIcon: IconComponent = (props) => {
+  return <Icon {...props}>zoom_in</Icon>;
+};
+
+export const ZoomOutIcon: IconComponent = (props) => {
+  return <Icon {...props}>zoom_out</Icon>;
+};
diff --git a/quadratic-client/src/shared/components/QuadraticLogo.tsx b/quadratic-client/src/shared/components/QuadraticLogo.tsx
new file mode 100644
index 0000000000..8cca194ad5
--- /dev/null
+++ b/quadratic-client/src/shared/components/QuadraticLogo.tsx
@@ -0,0 +1,19 @@
+export const QuadraticLogo = ({ singleColor }: { singleColor?: boolean }) => (
+  <svg width="13" height="20" viewBox="0 0 13 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0 0H6V6H0V0Z" fill={singleColor ? 'currentColor' : '#CB8999'} />
+    <path d="M6 7H0V13H6V7Z" fill={singleColor ? 'currentColor' : '#5D576B'} />
+    <path d="M13 0H7V6H13V0Z" fill={singleColor ? 'currentColor' : '#8ECB89'} />
+    <path d="M13 14H7V20H13V14Z" fill={singleColor ? 'currentColor' : '#FFC800'} />
+    <path d="M13 7H7V13H13V7Z" fill={singleColor ? 'currentColor' : '#6CD4FF'} />
+  </svg>
+);
+
+export const QuadraticLogo7px = () => (
+  <svg width="15" height="23" viewBox="0 0 15 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0 0H7V7H0V0Z" fill="#CB8999" />
+    <path d="M7 8H0V15H7V8Z" fill="#5D576B" />
+    <path d="M15 0H8V7H15V0Z" fill="#8ECB89" />
+    <path d="M15 16H8V23H15V16Z" fill="#FFC800" />
+    <path d="M15 8H8V15H15V8Z" fill="#6CD4FF" />
+  </svg>
+);
diff --git a/quadratic-client/src/shared/components/ShareDialog.tsx b/quadratic-client/src/shared/components/ShareDialog.tsx
index 55604b1abb..2a47e0b5f6 100644
--- a/quadratic-client/src/shared/components/ShareDialog.tsx
+++ b/quadratic-client/src/shared/components/ShareDialog.tsx
@@ -15,7 +15,7 @@ import {
   SelectValue,
 } from '@/shared/shadcn/ui/select';
 import { Skeleton } from '@/shared/shadcn/ui/skeleton';
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/shared/shadcn/ui/tooltip';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/shared/shadcn/ui/tooltip';
 import { cn } from '@/shared/shadcn/utils';
 import { isJsonObject } from '@/shared/utils/isJsonObject';
 import {
@@ -650,16 +650,14 @@ function ManageUser({
         ) : (
           <div className="flex items-center gap-4">
             {publicLinkAccess === 'EDIT' && activeRole === 'VIEWER' && (
-              <TooltipProvider>
-                <Tooltip>
-                  <TooltipTrigger>
-                    <ExclamationTriangleIcon className="text-warning" />
-                  </TooltipTrigger>
-                  <TooltipContent className="max-w-40 text-center">
-                    This person can still edit because the file is set so <em>anyone with the link can edit</em>.
-                  </TooltipContent>
-                </Tooltip>
-              </TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger>
+                  <ExclamationTriangleIcon className="text-warning" />
+                </TooltipTrigger>
+                <TooltipContent className="max-w-40 text-center">
+                  This person can still edit because the file is set so <em>anyone with the link can edit</em>.
+                </TooltipContent>
+              </Tooltip>
             )}
             <Select
               value={activeRole}
diff --git a/quadratic-client/src/shared/components/connections/ConnectionsList.tsx b/quadratic-client/src/shared/components/connections/ConnectionsList.tsx
index ecd7292974..40061b9a13 100644
--- a/quadratic-client/src/shared/components/connections/ConnectionsList.tsx
+++ b/quadratic-client/src/shared/components/connections/ConnectionsList.tsx
@@ -1,6 +1,7 @@
 import { LanguageIcon } from '@/app/ui/components/LanguageIcon';
 import { ConnectionsIcon } from '@/dashboard/components/CustomRadixIcons';
 import { Empty } from '@/dashboard/components/Empty';
+import { AddIcon } from '@/shared/components/Icons';
 import { Type } from '@/shared/components/Type';
 import {
   ConnectionsListConnection,
@@ -13,7 +14,7 @@ import { Input } from '@/shared/shadcn/ui/input';
 import { Skeleton } from '@/shared/shadcn/ui/skeleton';
 import { cn } from '@/shared/shadcn/utils';
 import { timeAgo } from '@/shared/utils/timeAgo';
-import { Cross2Icon, Pencil1Icon, PlusIcon } from '@radix-ui/react-icons';
+import { Cross2Icon, Pencil1Icon } from '@radix-ui/react-icons';
 import { ConnectionType } from 'quadratic-shared/typesAndSchemasConnections';
 import { useState } from 'react';
 
@@ -47,7 +48,7 @@ export const ConnectionsList = ({
                 handleNavigateToCreateView(type as ConnectionType);
               }}
             >
-              <PlusIcon className="absolute bottom-2 right-2 opacity-30 group-hover:opacity-100" />
+              <AddIcon className="absolute bottom-1 right-1 opacity-30 group-hover:opacity-100" />
               <Logo className="h-[40px] w-[160px]" />
             </Button>
           ))}
diff --git a/quadratic-client/src/shared/components/connections/ConnectionsSidebar.tsx b/quadratic-client/src/shared/components/connections/ConnectionsSidebar.tsx
index 3147c327a6..039f149c84 100644
--- a/quadratic-client/src/shared/components/connections/ConnectionsSidebar.tsx
+++ b/quadratic-client/src/shared/components/connections/ConnectionsSidebar.tsx
@@ -4,7 +4,7 @@ import {
   TRUST_CENTER,
 } from '@/shared/constants/urls';
 import { Button } from '@/shared/shadcn/ui/button';
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/shared/shadcn/ui/tooltip';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/shared/shadcn/ui/tooltip';
 import { CopyIcon, ExternalLinkIcon } from '@radix-ui/react-icons';
 import { useState } from 'react';
 
@@ -66,35 +66,33 @@ function SidebarCopyButton({ contentToCopy }: { contentToCopy: string }) {
   const [copyTriggered, setCopyTriggered] = useState(false);
 
   return (
-    <TooltipProvider>
-      <Tooltip>
-        <TooltipTrigger
-          onClick={(event) => {
-            event.preventDefault();
+    <Tooltip>
+      <TooltipTrigger
+        onClick={(event) => {
+          event.preventDefault();
+        }}
+        asChild
+      >
+        <Button
+          variant="ghost"
+          size="icon-sm"
+          className="absolute right-1 top-1 text-muted-foreground hover:text-foreground"
+          onClick={() => {
+            navigator.clipboard.writeText(contentToCopy);
+            setCopyTriggered(true);
+            setTimeout(() => setCopyTriggered(false), 1000);
           }}
-          asChild
         >
-          <Button
-            variant="ghost"
-            size="icon-sm"
-            className="absolute right-1 top-1 text-muted-foreground hover:text-foreground"
-            onClick={() => {
-              navigator.clipboard.writeText(contentToCopy);
-              setCopyTriggered(true);
-              setTimeout(() => setCopyTriggered(false), 1000);
-            }}
-          >
-            <CopyIcon />
-          </Button>
-        </TooltipTrigger>
-        <TooltipContent
-          onPointerDownOutside={(event) => {
-            event.preventDefault();
-          }}
-        >
-          {copyTriggered ? 'Copied!' : 'Copy'}
-        </TooltipContent>
-      </Tooltip>
-    </TooltipProvider>
+          <CopyIcon />
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent
+        onPointerDownOutside={(event) => {
+          event.preventDefault();
+        }}
+      >
+        {copyTriggered ? 'Copied!' : 'Copy'}
+      </TooltipContent>
+    </Tooltip>
   );
 }
diff --git a/quadratic-client/src/shared/components/icons.css b/quadratic-client/src/shared/components/icons.css
new file mode 100644
index 0000000000..6b8d331260
--- /dev/null
+++ b/quadratic-client/src/shared/components/icons.css
@@ -0,0 +1,30 @@
+.material-symbols-outlined {
+  font-family: 'Material Symbols Outlined';
+  font-weight: normal;
+  font-display: block;
+  font-style: normal;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  font-feature-settings: 'liga';
+  -webkit-font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+}
+
+.material-symbols-24 {
+  width: 24px;
+  height: 24px;
+  font-size: 24px;
+  font-variation-settings: 'OPSZ' 24;
+}
+
+.material-symbols-20 {
+  width: 20px;
+  height: 20px;
+  font-size: 20px;
+  font-variation-settings: 'OPSZ' 20;
+}
diff --git a/quadratic-client/src/shared/constants/appConstants.ts b/quadratic-client/src/shared/constants/appConstants.ts
index 9d3e4bee3d..854a321863 100644
--- a/quadratic-client/src/shared/constants/appConstants.ts
+++ b/quadratic-client/src/shared/constants/appConstants.ts
@@ -3,6 +3,7 @@ export const DEFAULT_FILE_NAME = 'Untitled';
 export const CSV_IMPORT_MESSAGE = 'Drag and drop a CSV file on the grid to import it.';
 export const EXCEL_IMPORT_MESSAGE = 'Drag and drop an Excel file on the grid to import it.';
 export const PARQUET_IMPORT_MESSAGE = 'Drag and drop a Parquet file on the grid to import it.';
+export const IMPORT_MESSAGE = 'Drag and drop a file (CSV, Excel, or Parquet) on the grid to import it.';
 export const TYPE = {
   // Borrowed from mui typography
   body1: 'text-md',
@@ -16,3 +17,4 @@ export const TYPE = {
   // Taken from shadcn/ui form styles
   formError: 'text-[0.8rem] font-medium text-destructive',
 };
+export const VERSION = `Quadratic ${import.meta.env.VITE_VERSION?.slice(0, 7)} (BETA)`;
diff --git a/quadratic-client/src/shared/shadcn/styles.css b/quadratic-client/src/shared/shadcn/styles.css
index e901a0d8b8..1bb296f725 100644
--- a/quadratic-client/src/shared/shadcn/styles.css
+++ b/quadratic-client/src/shared/shadcn/styles.css
@@ -4,29 +4,40 @@
 
 @layer base {
   :root {
+    /* Default background color of <body />...etc */
     --background: 0 0% 100%;
     --foreground: 222.2 84% 4.9%;
+    /* Background color for <Card /> */
     --card: 0 0% 100%;
     --card-foreground: 222.2 84% 4.9%;
+    /* Background color for popovers such as <DropdownMenu />, <HoverCard />, <Popover /> */
     --popover: 0 0% 100%;
     --popover-foreground: 222.2 84% 4.9%;
+    /* Primary colors for <Button /> */
     --primary: 221.2 83.2% 53.3%;
     --primary-foreground: 210 40% 98%;
+    /* Secondary colors for <Button /> */
     --secondary: 210 40% 96.1%;
     --secondary-foreground: 222.2 47.4% 11.2%;
+    /* Muted backgrounds such as <TabsList />, <Skeleton /> and <Switch /> */
     --muted: 210 40% 96.1%;
     --muted-foreground: 215.4 16.3% 46.9%;
+    /* Used for accents such as hover effects on <DropdownMenuItem>, <SelectItem>...etc */
     --accent: 210 40% 96.1%;
     --accent-foreground: 222.2 47.4% 11.2%;
     --warning: 21 90% 48%; /* orange-600 */
     --warning-foreground: 33 100% 96%; /* orange-50 */
     --success: 142.1 76.2% 36.3%;
     --success-foreground: 355.7 100% 97.3%;
+    /* Used for destructive actions such as <Button variant="destructive"> */
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 0 84.2% 97.3%;
+    /* Default border color */
     --border: 214.3 31.8% 91.4%;
+    /* Border color for inputs such as <Input />, <Select />, <Textarea /> */
     --input: 214.3 31.8% 91.4%;
     --ring: 221.2 83.2% 53.3%;
+    /* Border radius for card, input and buttons */
     --radius: 0.3rem;
   }
 
diff --git a/quadratic-client/src/shared/shadcn/ui/menubar.tsx b/quadratic-client/src/shared/shadcn/ui/menubar.tsx
new file mode 100644
index 0000000000..1794c6bbcd
--- /dev/null
+++ b/quadratic-client/src/shared/shadcn/ui/menubar.tsx
@@ -0,0 +1,207 @@
+import { CheckIcon, ChevronRightIcon, DotFilledIcon } from '@radix-ui/react-icons';
+import * as MenubarPrimitive from '@radix-ui/react-menubar';
+import * as React from 'react';
+
+import { cn } from '@/shared/shadcn/utils';
+
+const MenubarMenu = MenubarPrimitive.Menu;
+
+const MenubarGroup = MenubarPrimitive.Group;
+
+const MenubarPortal = MenubarPrimitive.Portal;
+
+const MenubarSub = MenubarPrimitive.Sub;
+
+const MenubarRadioGroup = MenubarPrimitive.RadioGroup;
+
+const Menubar = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Root
+    ref={ref}
+    className={cn('flex h-9 items-center gap-[1px] rounded-md bg-background p-1', className)}
+    {...props}
+  />
+));
+Menubar.displayName = MenubarPrimitive.Root.displayName;
+
+const MenubarTrigger = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      'flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm outline-none hover:bg-accent focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
+      className
+    )}
+    {...props}
+  />
+));
+MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName;
+
+const MenubarSubTrigger = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {
+    inset?: boolean;
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <MenubarPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      'flex cursor-default select-none items-center gap-4 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
+      inset && 'pl-8',
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRightIcon className="ml-auto h-4 w-4" />
+  </MenubarPrimitive.SubTrigger>
+));
+MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName;
+
+const MenubarSubContent = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+      className
+    )}
+    {...props}
+  />
+));
+MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName;
+
+const MenubarContent = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>
+>(({ className, align = 'start', alignOffset = -4, sideOffset = 8, ...props }, ref) => (
+  <MenubarPrimitive.Portal>
+    <MenubarPrimitive.Content
+      ref={ref}
+      align={align}
+      alignOffset={alignOffset}
+      sideOffset={sideOffset}
+      className={cn(
+        'z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        className
+      )}
+      {...props}
+    />
+  </MenubarPrimitive.Portal>
+));
+MenubarContent.displayName = MenubarPrimitive.Content.displayName;
+
+const MenubarItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <MenubarPrimitive.Item
+    ref={ref}
+    className={cn(
+      'relative flex cursor-default select-none items-center gap-4 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      inset && 'pl-8',
+      className
+    )}
+    {...props}
+  />
+));
+MenubarItem.displayName = MenubarPrimitive.Item.displayName;
+
+const MenubarCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <MenubarPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <MenubarPrimitive.ItemIndicator>
+        <CheckIcon className="h-4 w-4" />
+      </MenubarPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </MenubarPrimitive.CheckboxItem>
+));
+MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName;
+
+const MenubarRadioItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <MenubarPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <MenubarPrimitive.ItemIndicator>
+        <DotFilledIcon className="h-4 w-4 fill-current" />
+      </MenubarPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </MenubarPrimitive.RadioItem>
+));
+MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName;
+
+const MenubarLabel = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <MenubarPrimitive.Label
+    ref={ref}
+    className={cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', className)}
+    {...props}
+  />
+));
+MenubarLabel.displayName = MenubarPrimitive.Label.displayName;
+
+const MenubarSeparator = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Separator ref={ref} className={cn('-mx-1 my-1 h-px bg-muted', className)} {...props} />
+));
+MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName;
+
+const MenubarShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
+  return <span className={cn('ml-auto text-xs tracking-widest text-muted-foreground', className)} {...props} />;
+};
+MenubarShortcut.displayname = 'MenubarShortcut';
+
+export {
+  Menubar,
+  MenubarCheckboxItem,
+  MenubarContent,
+  MenubarGroup,
+  MenubarItem,
+  MenubarLabel,
+  MenubarMenu,
+  MenubarPortal,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarSub,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarTrigger,
+};
diff --git a/quadratic-client/src/shared/shadcn/ui/switch.tsx b/quadratic-client/src/shared/shadcn/ui/switch.tsx
index da581148f5..208e106449 100644
--- a/quadratic-client/src/shared/shadcn/ui/switch.tsx
+++ b/quadratic-client/src/shared/shadcn/ui/switch.tsx
@@ -2,7 +2,6 @@ import * as SwitchPrimitives from '@radix-ui/react-switch';
 import * as React from 'react';
 
 import { cn } from '@/shared/shadcn/utils';
-import { CaretLeftIcon, CaretRightIcon, CodeIcon } from '@radix-ui/react-icons';
 
 const Switch = React.forwardRef<
   React.ElementRef<typeof SwitchPrimitives.Root>,
@@ -25,36 +24,4 @@ const Switch = React.forwardRef<
 ));
 Switch.displayName = SwitchPrimitives.Root.displayName;
 
-const SwitchApp = React.forwardRef<
-  React.ElementRef<typeof SwitchPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
->(({ className, ...props }, ref) => (
-  <SwitchPrimitives.Root
-    className={cn(
-      'peer relative inline-flex h-8 w-14 shrink-0 cursor-pointer items-center rounded-full border border-gray-300 shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:text-primary data-[state=unchecked]:text-muted-foreground',
-      className
-    )}
-    {...props}
-    ref={ref}
-  >
-    <SwitchPrimitives.Thumb
-      className={cn(
-        'pointer-events-none block h-4 w-4 rounded-full bg-gray-300 shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-8 data-[state=unchecked]:translate-x-[.333rem] data-[state=checked]:bg-primary'
-      )}
-    />
-
-    {props.checked ? (
-      <span className={`pointer-events-none absolute left-[.35rem] top-1/2 -mt-[7.5px] flex cursor-pointer`}>
-        <CaretLeftIcon className={`-mr-1 text-primary`} />
-        <CaretRightIcon className={`-ml-1 text-primary`} />
-      </span>
-    ) : (
-      <span className={`pointer-events-none absolute right-[.666rem] top-1/2 -mt-[7.5px] flex cursor-pointer`}>
-        <CodeIcon className={`text-muted-foreground`} />
-      </span>
-    )}
-  </SwitchPrimitives.Root>
-));
-Switch.displayName = SwitchPrimitives.Root.displayName;
-
-export { Switch, SwitchApp };
+export { Switch };
diff --git a/quadratic-client/src/shared/shadcn/ui/toggle.tsx b/quadratic-client/src/shared/shadcn/ui/toggle.tsx
new file mode 100644
index 0000000000..8153722db3
--- /dev/null
+++ b/quadratic-client/src/shared/shadcn/ui/toggle.tsx
@@ -0,0 +1,36 @@
+import { cn } from '@/shared/shadcn/utils';
+import * as TogglePrimitive from '@radix-ui/react-toggle';
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+
+const toggleVariants = cva(
+  'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',
+  {
+    variants: {
+      variant: {
+        default: 'bg-transparent',
+        outline: 'border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground',
+      },
+      size: {
+        default: 'h-9 px-3',
+        sm: 'h-8 px-2',
+        lg: 'h-10 px-3',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+const Toggle = React.forwardRef<
+  React.ElementRef<typeof TogglePrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>
+>(({ className, variant, size, ...props }, ref) => (
+  <TogglePrimitive.Root ref={ref} className={cn(toggleVariants({ variant, size, className }))} {...props} />
+));
+
+Toggle.displayName = TogglePrimitive.Root.displayName;
+
+export { Toggle, toggleVariants };
diff --git a/quadratic-client/src/shared/shadcn/ui/tooltip.tsx b/quadratic-client/src/shared/shadcn/ui/tooltip.tsx
index b13284e313..779f2971bc 100644
--- a/quadratic-client/src/shared/shadcn/ui/tooltip.tsx
+++ b/quadratic-client/src/shared/shadcn/ui/tooltip.tsx
@@ -9,6 +9,8 @@ const Tooltip = TooltipPrimitive.Root;
 
 const TooltipTrigger = TooltipPrimitive.Trigger;
 
+const TooltipPortal = TooltipPrimitive.Portal;
+
 const TooltipContent = React.forwardRef<
   React.ElementRef<typeof TooltipPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
@@ -43,19 +45,17 @@ const TooltipPopover = ({
   shortcut?: string;
 }) => {
   return (
-    <TooltipProvider>
-      <Tooltip>
-        <TooltipTrigger asChild>{children}</TooltipTrigger>
-        <TooltipPrimitive.Portal>
-          <TooltipContent>
-            <p>
-              {label} {shortcut && <span className="opacity-50">({shortcut})</span>}
-            </p>
-          </TooltipContent>
-        </TooltipPrimitive.Portal>
-      </Tooltip>
-    </TooltipProvider>
+    <Tooltip>
+      <TooltipTrigger asChild>{children}</TooltipTrigger>
+      <TooltipPortal>
+        <TooltipContent>
+          <p>
+            {label} {shortcut && <span className="opacity-50">({shortcut})</span>}
+          </p>
+        </TooltipContent>
+      </TooltipPortal>
+    </Tooltip>
   );
 };
 
-export { Tooltip, TooltipContent, TooltipPopover, TooltipProvider, TooltipTrigger };
+export { Tooltip, TooltipContent, TooltipPopover, TooltipPortal, TooltipProvider, TooltipTrigger };