diff --git a/src/components/buttons/Button.tsx b/src/components/buttons/Button.tsx
index 94c08ddc1..fa3c6bd98 100644
--- a/src/components/buttons/Button.tsx
+++ b/src/components/buttons/Button.tsx
@@ -10,17 +10,17 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        default: 'bg-gray-300 text-white dark:text-black hover:opacity-90',
+        default: 'bg-gray-300 dark:text-black hover:opacity-90',
         destructive: 'bg-red-600 text-white hover:opacity-90',
         outline:
-          'border-zinc-300 hover:text-white border bg-transparent hover:bg-zinc-100 dark:hover:bg-zinc-600',
-        ghost: 'hover:bg-zinc-100 dark:hover:bg-zinc-600 hover:text-white',
+          'border-zinc-300 hover:text-inherit dark:hover:text-white border bg-transparent hover:bg-zinc-100 dark:hover:bg-zinc-600',
+        ghost: 'hover:bg-zinc-100 dark:hover:bg-zinc-600 dark:hover:text-white',
         link: 'underline-offset-2 hover:underline',
       },
       size: {
-        default: 'min-w-20 h-10 px-2 py-1',
+        default: 'min-w-20 h-10 px-4 py-1',
         xs: 'h-6 rounded-md px-2',
-        sm: 'h-9 rounded-md px-2',
+        sm: 'h-9 rounded-md px-2 py-1',
         lg: 'h-11 rounded-md px-8',
         icon: 'h-10 w-10',
       },
diff --git a/src/components/buttons/__snapshots__/Button.test.tsx.snap b/src/components/buttons/__snapshots__/Button.test.tsx.snap
index c2929be61..e1fb0dfd3 100644
--- a/src/components/buttons/__snapshots__/Button.test.tsx.snap
+++ b/src/components/buttons/__snapshots__/Button.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`components/buttons/Button.tsx should render with icon 1`] = `
     <div>
       <button
         aria-label="button"
-        class="ring-offset-background focus-visible:ring-ring inline-flex w-fit items-center justify-center whitespace-nowrap rounded text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-gray-300 text-white dark:text-black hover:opacity-90 min-w-20 h-10 px-2 py-1"
+        class="ring-offset-background focus-visible:ring-ring inline-flex w-fit items-center justify-center whitespace-nowrap rounded text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-gray-300 dark:text-black hover:opacity-90 min-w-20 h-10 px-4 py-1"
         icon="[object Object]"
       >
         <svg
@@ -31,7 +31,7 @@ exports[`components/buttons/Button.tsx should render with icon 1`] = `
   "container": <div>
     <button
       aria-label="button"
-      class="ring-offset-background focus-visible:ring-ring inline-flex w-fit items-center justify-center whitespace-nowrap rounded text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-gray-300 text-white dark:text-black hover:opacity-90 min-w-20 h-10 px-2 py-1"
+      class="ring-offset-background focus-visible:ring-ring inline-flex w-fit items-center justify-center whitespace-nowrap rounded text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-gray-300 dark:text-black hover:opacity-90 min-w-20 h-10 px-4 py-1"
       icon="[object Object]"
     >
       <svg
@@ -112,7 +112,7 @@ exports[`components/buttons/Button.tsx should render without icon 1`] = `
     <div>
       <button
         aria-label="button"
-        class="ring-offset-background focus-visible:ring-ring inline-flex w-fit items-center justify-center whitespace-nowrap rounded text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-gray-300 text-white dark:text-black hover:opacity-90 min-w-20 h-10 px-2 py-1"
+        class="ring-offset-background focus-visible:ring-ring inline-flex w-fit items-center justify-center whitespace-nowrap rounded text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-gray-300 dark:text-black hover:opacity-90 min-w-20 h-10 px-4 py-1"
       >
         Button
       </button>
@@ -121,7 +121,7 @@ exports[`components/buttons/Button.tsx should render without icon 1`] = `
   "container": <div>
     <button
       aria-label="button"
-      class="ring-offset-background focus-visible:ring-ring inline-flex w-fit items-center justify-center whitespace-nowrap rounded text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-gray-300 text-white dark:text-black hover:opacity-90 min-w-20 h-10 px-2 py-1"
+      class="ring-offset-background focus-visible:ring-ring inline-flex w-fit items-center justify-center whitespace-nowrap rounded text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-gray-300 dark:text-black hover:opacity-90 min-w-20 h-10 px-4 py-1"
     >
       Button
     </button>
diff --git a/src/routes/__snapshots__/Login.test.tsx.snap b/src/routes/__snapshots__/Login.test.tsx.snap
index 6289b1536..d40784a56 100644
--- a/src/routes/__snapshots__/Login.test.tsx.snap
+++ b/src/routes/__snapshots__/Login.test.tsx.snap
@@ -66,7 +66,7 @@ exports[`routes/Login.tsx should render itself & its children 1`] = `
         </div>
         <button
           aria-label="Login with Personal Access Token"
-          class="ring-offset-background focus-visible:ring-ring inline-flex w-fit items-center justify-center whitespace-nowrap rounded text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-gray-300 text-white dark:text-black hover:opacity-90 min-w-20 h-10 px-2 mt-2 py-2"
+          class="ring-offset-background focus-visible:ring-ring inline-flex w-fit items-center justify-center whitespace-nowrap rounded text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-gray-300 dark:text-black hover:opacity-90 min-w-20 h-10 px-4 mt-2 py-2"
           icon="[object Object]"
         >
           <svg
@@ -87,7 +87,7 @@ exports[`routes/Login.tsx should render itself & its children 1`] = `
         </button>
         <button
           aria-label="Login with OAuth App"
-          class="ring-offset-background focus-visible:ring-ring inline-flex w-fit items-center justify-center whitespace-nowrap rounded text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-gray-300 text-white dark:text-black hover:opacity-90 min-w-20 h-10 px-2 mt-2 py-2"
+          class="ring-offset-background focus-visible:ring-ring inline-flex w-fit items-center justify-center whitespace-nowrap rounded text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-gray-300 dark:text-black hover:opacity-90 min-w-20 h-10 px-4 mt-2 py-2"
           icon="[object Object]"
         >
           <svg
@@ -171,7 +171,7 @@ exports[`routes/Login.tsx should render itself & its children 1`] = `
       </div>
       <button
         aria-label="Login with Personal Access Token"
-        class="ring-offset-background focus-visible:ring-ring inline-flex w-fit items-center justify-center whitespace-nowrap rounded text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-gray-300 text-white dark:text-black hover:opacity-90 min-w-20 h-10 px-2 mt-2 py-2"
+        class="ring-offset-background focus-visible:ring-ring inline-flex w-fit items-center justify-center whitespace-nowrap rounded text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-gray-300 dark:text-black hover:opacity-90 min-w-20 h-10 px-4 mt-2 py-2"
         icon="[object Object]"
       >
         <svg
@@ -192,7 +192,7 @@ exports[`routes/Login.tsx should render itself & its children 1`] = `
       </button>
       <button
         aria-label="Login with OAuth App"
-        class="ring-offset-background focus-visible:ring-ring inline-flex w-fit items-center justify-center whitespace-nowrap rounded text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-gray-300 text-white dark:text-black hover:opacity-90 min-w-20 h-10 px-2 mt-2 py-2"
+        class="ring-offset-background focus-visible:ring-ring inline-flex w-fit items-center justify-center whitespace-nowrap rounded text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-gray-300 dark:text-black hover:opacity-90 min-w-20 h-10 px-4 mt-2 py-2"
         icon="[object Object]"
       >
         <svg
diff --git a/src/routes/__snapshots__/LoginWithOAuthApp.test.tsx.snap b/src/routes/__snapshots__/LoginWithOAuthApp.test.tsx.snap
index d1d0e5e28..582a63540 100644
--- a/src/routes/__snapshots__/LoginWithOAuthApp.test.tsx.snap
+++ b/src/routes/__snapshots__/LoginWithOAuthApp.test.tsx.snap
@@ -79,7 +79,7 @@ exports[`routes/LoginWithOAuthApp.tsx renders correctly 1`] = `
                 >
                   <button
                     aria-label="Create new OAuth App"
-                    class="ring-offset-background focus-visible:ring-ring inline-flex w-fit items-center justify-center whitespace-nowrap rounded text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-gray-300 text-white dark:text-black hover:opacity-90 min-w-20 h-10 px-2 py-1"
+                    class="ring-offset-background focus-visible:ring-ring inline-flex w-fit items-center justify-center whitespace-nowrap rounded text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-gray-300 dark:text-black hover:opacity-90 min-w-20 h-10 px-4 py-1"
                     disabled=""
                     icon="[object Object]"
                   >
@@ -154,7 +154,7 @@ exports[`routes/LoginWithOAuthApp.tsx renders correctly 1`] = `
             >
               <button
                 aria-label="GitHub Docs"
-                class="ring-offset-background focus-visible:ring-ring inline-flex w-fit items-center justify-center whitespace-nowrap rounded text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-gray-300 text-white dark:text-black hover:opacity-90 min-w-20 h-10 px-2 py-1 mt-2"
+                class="ring-offset-background focus-visible:ring-ring inline-flex w-fit items-center justify-center whitespace-nowrap rounded text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-gray-300 dark:text-black hover:opacity-90 min-w-20 h-10 px-4 py-1 mt-2"
                 icon="[object Object]"
                 name="Docs"
               >
@@ -175,7 +175,7 @@ exports[`routes/LoginWithOAuthApp.tsx renders correctly 1`] = `
               </button>
               <button
                 aria-label="Login"
-                class="ring-offset-background focus-visible:ring-ring inline-flex w-fit items-center justify-center whitespace-nowrap rounded text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-gray-300 text-white dark:text-black hover:opacity-90 min-w-20 h-10 mt-2 px-4 py-2 !text-sm"
+                class="ring-offset-background focus-visible:ring-ring inline-flex w-fit items-center justify-center whitespace-nowrap rounded text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-gray-300 dark:text-black hover:opacity-90 min-w-20 h-10 mt-2 px-4 py-2 !text-sm"
                 disabled=""
                 icon="[object Object]"
                 name="Login"
@@ -277,7 +277,7 @@ exports[`routes/LoginWithOAuthApp.tsx renders correctly 1`] = `
               >
                 <button
                   aria-label="Create new OAuth App"
-                  class="ring-offset-background focus-visible:ring-ring inline-flex w-fit items-center justify-center whitespace-nowrap rounded text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-gray-300 text-white dark:text-black hover:opacity-90 min-w-20 h-10 px-2 py-1"
+                  class="ring-offset-background focus-visible:ring-ring inline-flex w-fit items-center justify-center whitespace-nowrap rounded text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-gray-300 dark:text-black hover:opacity-90 min-w-20 h-10 px-4 py-1"
                   disabled=""
                   icon="[object Object]"
                 >
@@ -352,7 +352,7 @@ exports[`routes/LoginWithOAuthApp.tsx renders correctly 1`] = `
           >
             <button
               aria-label="GitHub Docs"
-              class="ring-offset-background focus-visible:ring-ring inline-flex w-fit items-center justify-center whitespace-nowrap rounded text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-gray-300 text-white dark:text-black hover:opacity-90 min-w-20 h-10 px-2 py-1 mt-2"
+              class="ring-offset-background focus-visible:ring-ring inline-flex w-fit items-center justify-center whitespace-nowrap rounded text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-gray-300 dark:text-black hover:opacity-90 min-w-20 h-10 px-4 py-1 mt-2"
               icon="[object Object]"
               name="Docs"
             >
@@ -373,7 +373,7 @@ exports[`routes/LoginWithOAuthApp.tsx renders correctly 1`] = `
             </button>
             <button
               aria-label="Login"
-              class="ring-offset-background focus-visible:ring-ring inline-flex w-fit items-center justify-center whitespace-nowrap rounded text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-gray-300 text-white dark:text-black hover:opacity-90 min-w-20 h-10 mt-2 px-4 py-2 !text-sm"
+              class="ring-offset-background focus-visible:ring-ring inline-flex w-fit items-center justify-center whitespace-nowrap rounded text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-gray-300 dark:text-black hover:opacity-90 min-w-20 h-10 mt-2 px-4 py-2 !text-sm"
               disabled=""
               icon="[object Object]"
               name="Login"
diff --git a/src/routes/__snapshots__/LoginWithPersonalAccessToken.test.tsx.snap b/src/routes/__snapshots__/LoginWithPersonalAccessToken.test.tsx.snap
index d961b358a..b0aa2dc5e 100644
--- a/src/routes/__snapshots__/LoginWithPersonalAccessToken.test.tsx.snap
+++ b/src/routes/__snapshots__/LoginWithPersonalAccessToken.test.tsx.snap
@@ -104,7 +104,7 @@ exports[`routes/LoginWithPersonalAccessToken.tsx renders correctly 1`] = `
                 <div>
                   <button
                     aria-label="Generate a PAT"
-                    class="ring-offset-background focus-visible:ring-ring inline-flex w-fit items-center justify-center whitespace-nowrap rounded text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-gray-300 text-white dark:text-black hover:opacity-90 min-w-20 h-10 px-2 py-1"
+                    class="ring-offset-background focus-visible:ring-ring inline-flex w-fit items-center justify-center whitespace-nowrap rounded text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-gray-300 dark:text-black hover:opacity-90 min-w-20 h-10 px-4 py-1"
                     icon="[object Object]"
                   >
                     <svg
@@ -142,7 +142,7 @@ exports[`routes/LoginWithPersonalAccessToken.tsx renders correctly 1`] = `
           >
             <button
               aria-label="GitHub Docs"
-              class="ring-offset-background focus-visible:ring-ring inline-flex w-fit items-center justify-center whitespace-nowrap rounded text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-gray-300 text-white dark:text-black hover:opacity-90 min-w-20 h-10 px-2 py-1"
+              class="ring-offset-background focus-visible:ring-ring inline-flex w-fit items-center justify-center whitespace-nowrap rounded text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-gray-300 dark:text-black hover:opacity-90 min-w-20 h-10 px-4 py-1"
               icon="[object Object]"
             >
               <svg
@@ -163,7 +163,7 @@ exports[`routes/LoginWithPersonalAccessToken.tsx renders correctly 1`] = `
             </button>
             <button
               aria-label="Login"
-              class="ring-offset-background focus-visible:ring-ring inline-flex w-fit items-center justify-center whitespace-nowrap rounded text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-gray-300 text-white dark:text-black hover:opacity-90 min-w-20 h-10 px-4 py-2 !text-sm"
+              class="ring-offset-background focus-visible:ring-ring inline-flex w-fit items-center justify-center whitespace-nowrap rounded text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-gray-300 dark:text-black hover:opacity-90 min-w-20 h-10 px-4 py-2 !text-sm"
               disabled=""
               icon="[object Object]"
               type="submit"
@@ -289,7 +289,7 @@ exports[`routes/LoginWithPersonalAccessToken.tsx renders correctly 1`] = `
               <div>
                 <button
                   aria-label="Generate a PAT"
-                  class="ring-offset-background focus-visible:ring-ring inline-flex w-fit items-center justify-center whitespace-nowrap rounded text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-gray-300 text-white dark:text-black hover:opacity-90 min-w-20 h-10 px-2 py-1"
+                  class="ring-offset-background focus-visible:ring-ring inline-flex w-fit items-center justify-center whitespace-nowrap rounded text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-gray-300 dark:text-black hover:opacity-90 min-w-20 h-10 px-4 py-1"
                   icon="[object Object]"
                 >
                   <svg
@@ -327,7 +327,7 @@ exports[`routes/LoginWithPersonalAccessToken.tsx renders correctly 1`] = `
         >
           <button
             aria-label="GitHub Docs"
-            class="ring-offset-background focus-visible:ring-ring inline-flex w-fit items-center justify-center whitespace-nowrap rounded text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-gray-300 text-white dark:text-black hover:opacity-90 min-w-20 h-10 px-2 py-1"
+            class="ring-offset-background focus-visible:ring-ring inline-flex w-fit items-center justify-center whitespace-nowrap rounded text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-gray-300 dark:text-black hover:opacity-90 min-w-20 h-10 px-4 py-1"
             icon="[object Object]"
           >
             <svg
@@ -348,7 +348,7 @@ exports[`routes/LoginWithPersonalAccessToken.tsx renders correctly 1`] = `
           </button>
           <button
             aria-label="Login"
-            class="ring-offset-background focus-visible:ring-ring inline-flex w-fit items-center justify-center whitespace-nowrap rounded text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-gray-300 text-white dark:text-black hover:opacity-90 min-w-20 h-10 px-4 py-2 !text-sm"
+            class="ring-offset-background focus-visible:ring-ring inline-flex w-fit items-center justify-center whitespace-nowrap rounded text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-gray-300 dark:text-black hover:opacity-90 min-w-20 h-10 px-4 py-2 !text-sm"
             disabled=""
             icon="[object Object]"
             type="submit"