diff --git a/assets/scss/styles.scss b/assets/scss/styles.scss
index 8f620944b..31b291502 100644
--- a/assets/scss/styles.scss
+++ b/assets/scss/styles.scss
@@ -114,8 +114,9 @@ a {
 
     kbd {
       @apply font-sans;
-      @apply bg-secondaryDark;
-      @apply text-primaryDark;
+      @apply bg-gray-500;
+      @apply bg-opacity-45;
+      @apply text-primaryLight;
       @apply rounded-sm;
       @apply px-1;
       @apply ml-1;
diff --git a/components/app/Footer.vue b/components/app/Footer.vue
index 57f597229..1d373134a 100644
--- a/components/app/Footer.vue
+++ b/components/app/Footer.vue
@@ -6,7 +6,7 @@
           v-tippy="{ theme: 'tooltip' }"
           :title="LEFT_SIDEBAR ? $t('hide.sidebar') : $t('show.sidebar')"
           icon="menu_open"
-          :class="{ 'transform rotate-180': !LEFT_SIDEBAR }"
+          :class="{ 'transform -rotate-180': !LEFT_SIDEBAR }"
           @click.native="LEFT_SIDEBAR = !LEFT_SIDEBAR"
         />
         <ButtonSecondary
@@ -104,7 +104,7 @@
           :title="RIGHT_SIDEBAR ? $t('hide.sidebar') : $t('show.sidebar')"
           icon="menu_open"
           class="transform rotate-180"
-          :class="{ 'rotate-0': !RIGHT_SIDEBAR }"
+          :class="{ 'rotate-360': !RIGHT_SIDEBAR }"
           @click.native="RIGHT_SIDEBAR = !RIGHT_SIDEBAR"
         />
       </div>
diff --git a/components/graphql/URLBar.vue b/components/graphql/Request.vue
similarity index 100%
rename from components/graphql/URLBar.vue
rename to components/graphql/Request.vue
diff --git a/components/graphql/ContentArea.vue b/components/graphql/RequestOptions.vue
similarity index 99%
rename from components/graphql/ContentArea.vue
rename to components/graphql/RequestOptions.vue
index 450cb93ae..c5bf351de 100644
--- a/components/graphql/ContentArea.vue
+++ b/components/graphql/RequestOptions.vue
@@ -401,7 +401,7 @@ export default defineComponent({
 
       logHoppRequestRunToAnalytics({
         platform: "graphql-query",
-        strategy: getCurrentStrategyID()
+        strategy: getCurrentStrategyID(),
       })
     }
 
diff --git a/components/graphql/ResponseSection.vue b/components/graphql/Response.vue
similarity index 100%
rename from components/graphql/ResponseSection.vue
rename to components/graphql/Response.vue
diff --git a/components/graphql/Sidebar.vue b/components/graphql/Sidebar.vue
index 37653788d..fd394bfd5 100644
--- a/components/graphql/Sidebar.vue
+++ b/components/graphql/Sidebar.vue
@@ -214,11 +214,11 @@ import {
   ref,
   useContext,
 } from "@nuxtjs/composition-api"
-import { GraphQLField, GraphQLType } from 'graphql'
-import { map } from 'rxjs/operators'
-import { GQLConnection } from '~/helpers/GQLConnection'
+import { GraphQLField, GraphQLType } from "graphql"
+import { map } from "rxjs/operators"
+import { GQLConnection } from "~/helpers/GQLConnection"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
-import { useReadonlyStream } from '~/helpers/utils/composables'
+import { useReadonlyStream } from "~/helpers/utils/composables"
 import {
   GQLHeader,
   setGQLHeaders,
diff --git a/components/smart/Modal.vue b/components/smart/Modal.vue
index a73cc173f..22fa56917 100644
--- a/components/smart/Modal.vue
+++ b/components/smart/Modal.vue
@@ -46,7 +46,7 @@
               overflow-hidden
               sm:max-w-md sm:align-middle
             "
-            :class="{ 'mt-24': placement === 'top' }"
+            :class="{ 'mt-24 md:mb-8': placement === 'top' }"
           >
             <div
               v-if="title"
diff --git a/newstore/GQLSession.ts b/newstore/GQLSession.ts
index d5e59cb34..35248731c 100644
--- a/newstore/GQLSession.ts
+++ b/newstore/GQLSession.ts
@@ -86,7 +86,7 @@ const dispatchers = defineDispatchers({
     return {
       response: newResponse,
     }
-  }
+  },
 })
 
 export const gqlSessionStore = new DispatchingStore(
@@ -136,7 +136,7 @@ export function updateGQLHeader(headerIndex: number, updatedHeader: GQLHeader) {
     payload: {
       headerIndex,
       updatedHeader,
-    }
+    },
   })
 }
 
@@ -209,4 +209,4 @@ export const gqlHeaders$ = gqlSessionStore.subject$.pipe(
 export const gqlResponse$ = gqlSessionStore.subject$.pipe(
   pluck("response"),
   distinctUntilChanged()
-)
\ No newline at end of file
+)
diff --git a/pages/graphql.vue b/pages/graphql.vue
index 06a4c338a..31175f863 100644
--- a/pages/graphql.vue
+++ b/pages/graphql.vue
@@ -4,11 +4,11 @@
       <Pane class="hide-scrollbar !overflow-auto">
         <Splitpanes :dbl-click-splitter="false" horizontal>
           <Pane class="hide-scrollbar !overflow-auto">
-            <GraphqlURLBar :conn="gqlConn" />
-            <GraphqlContentArea :conn="gqlConn" />
+            <GraphqlRequest :conn="gqlConn" />
+            <GraphqlRequestOptions :conn="gqlConn" />
           </Pane>
           <Pane class="hide-scrollbar !overflow-auto">
-            <GraphqlResponseSection :conn="gqlConn" />
+            <GraphqlResponse :conn="gqlConn" />
           </Pane>
         </Splitpanes>
       </Pane>
@@ -65,14 +65,3 @@ export default defineComponent({
   },
 })
 </script>
-
-<style lang="scss" scoped>
-.shortcut-key {
-  @apply bg-dividerLight;
-  @apply rounded;
-  @apply ml-2;
-  @apply py-1;
-  @apply px-2;
-  @apply inline-flex;
-}
-</style>