diff --git a/src/components/settings/SidebarSettings.tsx b/src/components/settings/SidebarSettings.tsx
index 5110000..54d8182 100644
--- a/src/components/settings/SidebarSettings.tsx
+++ b/src/components/settings/SidebarSettings.tsx
@@ -21,7 +21,7 @@ const options: Option<Config['toggleButtonContent']>[] = [
   {
     key: 'octoface',
     value: 'octoface',
-    label: `Octoface`,
+    label: `The Classic Octoface`,
   },
 ]
 
diff --git a/src/content.scss b/src/content.scss
index 69b5171..947f3ee 100644
--- a/src/content.scss
+++ b/src/content.scss
@@ -166,7 +166,7 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
 .#{$name}-toggle-show-button-wrapper {
   z-index: $minimal-z-index;
   position: fixed;
-  top: 80px;
+  top: 124px; // align with GitHub's navbar items
   left: 0px;
   display: inline-flex;
   align-items: center;
@@ -183,17 +183,16 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
       height: 32px;
       border-radius: 6px;
       border: 1px solid $border-gray-dark;
-      background: $bg-black;
+      background: $bg-gray;
+      color: $gray-900;
       &:active {
-        background: $bg-black-fade;
+        color: $gray-600;
       }
-      color: $text-white;
-      transition: all linear 0.3s;
+      transition: all ease 0.3s;
       font-size: 16px;
       transform: translateX(0px);
       &:active,
       &:hover {
-        font-size: 20px;
         transform: translateX(4px);
       }
     }
diff --git a/src/utils/configHelper.ts b/src/utils/configHelper.ts
index 138cfbe..c4bf06c 100644
--- a/src/utils/configHelper.ts
+++ b/src/utils/configHelper.ts
@@ -37,7 +37,7 @@ const defaultConfigs: Config = {
   copySnippetButton: true,
   intelligentToggle: null,
   icons: 'rich',
-  toggleButtonVerticalDistance: 80,
+  toggleButtonVerticalDistance: 124, // align with GitHub's navbar items
   toggleButtonContent: 'logo',
   shrinkGitHubHeader: false,
 }