diff --git a/README.md b/README.md
index 8375153ce..44cb7f561 100644
--- a/README.md
+++ b/README.md
@@ -36,7 +36,7 @@
   <p>
     <a href="https://hoppscotch.io">
       <img
-        src="https://tiny.cc/hoppscotch_screenshot_1"
+        src="https://raw.githubusercontent.com/hoppscotch/hoppscotch/main/packages/hoppscotch-app/static/banner.png"
         alt="Screenshot"
         width="100%"
       />
diff --git a/packages/hoppscotch-app/assets/scss/styles.scss b/packages/hoppscotch-app/assets/scss/styles.scss
index a576933f6..299520daf 100644
--- a/packages/hoppscotch-app/assets/scss/styles.scss
+++ b/packages/hoppscotch-app/assets/scss/styles.scss
@@ -420,7 +420,7 @@ input[type="checkbox"] {
   @apply inset-0;
   @apply bg-dividerLight;
   @apply opacity-0;
-  @apply z-30;
+  @apply z-20;
   @apply transition;
 
   content: "";
@@ -429,7 +429,7 @@ input[type="checkbox"] {
 .smart-splitter .splitpanes__splitter::after {
   @apply absolute;
   @apply inset-0;
-  @apply z-30;
+  @apply z-20;
   @apply transition;
   @apply flex;
   @apply items-center;
diff --git a/packages/hoppscotch-app/components/teams/Invite.vue b/packages/hoppscotch-app/components/teams/Invite.vue
index b8fd778d1..ba36e4a4d 100644
--- a/packages/hoppscotch-app/components/teams/Invite.vue
+++ b/packages/hoppscotch-app/components/teams/Invite.vue
@@ -280,10 +280,24 @@
             py-4
             rounded
             border border-dividerLight
-            bg-primaryLight
+            flex flex-col
+            items-start
           "
         >
-          <span class="pb-2 flex items-center font-semibold">
+          <span
+            class="
+              mb-4
+              px-2
+              py-1
+              flex
+              justify-center
+              items-center
+              font-semibold
+              rounded-full
+              bg-primaryDark
+              border border-divider
+            "
+          >
             <i class="text-secondaryLight mr-2 material-icons">help_outline</i>
             {{ $t("profile.roles") }}
           </span>
diff --git a/packages/hoppscotch-app/locales/en.json b/packages/hoppscotch-app/locales/en.json
index 0357a2c5d..54b897b64 100644
--- a/packages/hoppscotch-app/locales/en.json
+++ b/packages/hoppscotch-app/locales/en.json
@@ -263,6 +263,7 @@
     "snippets": "Snippets"
   },
   "profile": {
+    "app_settings": "App Settings",
     "editor": "Editor",
     "editor_description": "Editors can add, edit, and delete requests.",
     "no_permission": "You do not have permission to perform this action.",
@@ -330,10 +331,10 @@
     "account_name_description": "This is your display name.",
     "background": "Background",
     "black_mode": "Black",
-    "sidebar_on_left": "Sidebar on left",
     "change_font_size": "Change font size",
     "choose_language": "Choose language",
     "dark_mode": "Dark",
+    "expand_navigation": "Expand navigation",
     "experiments": "Experiments",
     "experiments_notice": "This is a collection of experiments we're working on that might turn out to be useful, fun, both, or neither. They're not final and may not be stable, so if something overly weird happens, don't panic. Just turn the dang thing off. Jokes aside, ",
     "extension_ver_not_reported": "Not Reported",
@@ -348,7 +349,6 @@
     "interceptor_description": "Middleware between application and APIs.",
     "language": "Language",
     "light_mode": "Light",
-    "expand_navigation": "Expand navigation",
     "official_proxy_hosting": "Official Proxy is hosted by Hoppscotch.",
     "profile": "Profile",
     "profile_description": "Update you profile details",
@@ -358,6 +358,7 @@
     "proxy_use_toggle": "Use the proxy middleware to send requests",
     "read_the": "Read the",
     "reset_default": "Reset to default",
+    "sidebar_on_left": "Sidebar on left",
     "sync": "Synchronise",
     "sync_collections": "Collections",
     "sync_description": "These settings are synced to cloud.",
diff --git a/packages/hoppscotch-app/pages/profile.vue b/packages/hoppscotch-app/pages/profile.vue
index 665c71cf2..566628438 100644
--- a/packages/hoppscotch-app/pages/profile.vue
+++ b/packages/hoppscotch-app/pages/profile.vue
@@ -13,29 +13,42 @@
             class="bg-primaryLight h-24 md:h-32 -mb-11 rounded"
             style="background-image: url('/images/cover.svg')"
           ></div>
-          <div class="flex px-4 items-end">
-            <img
-              v-if="currentUser.photoURL"
-              :src="currentUser.photoURL"
-              class="rounded-lg ring-4 ring-primary h-16 w-16"
-              :alt="currentUser.displayName"
-            />
-            <SmartIcon v-else name="user" class="svg-icons" />
-            <div class="ml-4">
-              <label class="heading">
-                {{ currentUser.displayName || $t("state.nothing_found") }}
-              </label>
-              <p class="flex text-secondaryLight items-center">
-                {{ currentUser.email }}
-                <SmartIcon
-                  v-if="currentUser.emailVerified"
-                  name="verified"
-                  class="ml-2 text-green-500 svg-icons"
+          <div class="flex px-4 flex-col md:flex-row space-y-8 justify-between">
+            <div class="flex items-end">
+              <img
+                v-if="currentUser.photoURL"
+                :src="currentUser.photoURL"
+                class="rounded-lg ring-4 ring-primary h-16 w-16"
+                :alt="currentUser.displayName"
+              />
+              <SmartIcon v-else name="user" class="svg-icons" />
+              <div class="ml-4">
+                <label class="heading">
+                  {{ currentUser.displayName || $t("state.nothing_found") }}
+                </label>
+                <p class="flex text-secondaryLight items-center">
+                  {{ currentUser.email }}
+                  <SmartIcon
+                    v-if="currentUser.emailVerified"
+                    name="verified"
+                    class="ml-2 text-green-500 svg-icons"
+                  />
+                </p>
+              </div>
+            </div>
+            <div class="flex space-x-2 items-end">
+              <div>
+                <SmartItem
+                  to="/settings"
+                  svg="settings"
+                  :label="$t('profile.app_settings')"
+                  outline
                 />
-              </p>
+              </div>
+              <FirebaseLogout outline />
             </div>
           </div>
-          <SmartTabs styles="sticky bg-primary z-10 top-0">
+          <SmartTabs>
             <SmartTab
               :id="'sync'"
               :label="$t('settings.account')"
diff --git a/packages/hoppscotch-app/static/banner.png b/packages/hoppscotch-app/static/banner.png
index bd43db95e..7eb5dc8f1 100644
Binary files a/packages/hoppscotch-app/static/banner.png and b/packages/hoppscotch-app/static/banner.png differ