diff --git a/client/web/src/components/app.tsx b/client/web/src/components/app.tsx
index cf4a3b622..6d2d438cd 100644
--- a/client/web/src/components/app.tsx
+++ b/client/web/src/components/app.tsx
@@ -140,7 +140,7 @@ function Header({
 
   return (
     <>
-      <div className="flex justify-between mb-12">
+      <div className="flex justify-between items-center mb-12">
         <div className="flex gap-3">
           <TailscaleIcon
             className="cursor-pointer"
diff --git a/client/web/src/components/login-toggle.tsx b/client/web/src/components/login-toggle.tsx
index b6a32ac52..f3ed08be2 100644
--- a/client/web/src/components/login-toggle.tsx
+++ b/client/web/src/components/login-toggle.tsx
@@ -37,7 +37,7 @@ export default function LoginToggle({
       {!auth.canManageNode ? (
         <button
           className={cx(
-            "pl-3 py-1 bg-zinc-800 rounded-full flex justify-start items-center",
+            "pl-3 py-1 bg-gray-700 rounded-full flex justify-start items-center h-[34px]",
             { "pr-1": auth.viewerIdentity, "pr-3": !auth.viewerIdentity }
           )}
           onClick={() => setOpen(!open)}
@@ -56,10 +56,10 @@ export default function LoginToggle({
       ) : (
         <div
           className={cx(
-            "w-[34px] h-[34px] p-1 rounded-full items-center inline-flex",
+            "w-[34px] h-[34px] p-1 rounded-full justify-center items-center inline-flex",
             {
               "bg-transparent": !open,
-              "bg-neutral-300": open,
+              "bg-gray-300": open,
             }
           )}
         >