diff --git a/assets/scss/styles.scss b/assets/scss/styles.scss
index 5f7962be..ceceea2a 100644
--- a/assets/scss/styles.scss
+++ b/assets/scss/styles.scss
@@ -197,7 +197,7 @@ hr {
   @apply flex flex-1;
   @apply w-full;
   @apply px-4 py-2;
-  @apply bg-primary;
+  @apply bg-transparent;
   @apply rounded;
   @apply text-secondaryDark;
   @apply border border-divider;
@@ -236,7 +236,7 @@ button {
 
 .floating-input:focus-within ~ label,
 .floating-input:not(:placeholder-shown) ~ label {
-  @apply bg-primary;
+  @apply bg-transparent;
   @apply transform;
   @apply origin-top-left;
   @apply scale-75;
diff --git a/components/app/Search.vue b/components/app/Search.vue
index 60dafe5e..9f7d5a51 100644
--- a/components/app/Search.vue
+++ b/components/app/Search.vue
@@ -9,7 +9,7 @@
         name="command"
         :placeholder="$t('app.type_a_command_search')"
         class="
-          bg-primary
+          bg-transparent
           border-b border-dividerLight
           text-secondaryDark text-base
           leading-normal
diff --git a/components/app/Shortcuts.vue b/components/app/Shortcuts.vue
index f3649d0d..2247eb9e 100644
--- a/components/app/Shortcuts.vue
+++ b/components/app/Shortcuts.vue
@@ -3,6 +3,7 @@
     <template #content>
       <div
         class="
+          bg-primary
           border-b border-dividerLight
           flex
           p-2
@@ -22,7 +23,7 @@
           />
         </div>
       </div>
-      <div class="border-b border-dividerLight">
+      <div class="bg-primary border-b border-dividerLight">
         <div class="flex flex-col my-4 mx-6 search-wrapper">
           <input
             v-model="filterText"
diff --git a/components/collections/ChooseType.vue b/components/collections/ChooseType.vue
index 4b81d385..37ad0cfc 100644
--- a/components/collections/ChooseType.vue
+++ b/components/collections/ChooseType.vue
@@ -18,7 +18,7 @@
               type="text"
               autofocus
               class="
-                bg-primary
+                bg-transparent
                 border-b border-transparent
                 cursor-pointer
                 flex
diff --git a/components/collections/graphql/index.vue b/components/collections/graphql/index.vue
index a810fe93..e32165ef 100644
--- a/components/collections/graphql/index.vue
+++ b/components/collections/graphql/index.vue
@@ -19,7 +19,7 @@
           v-model="filterText"
           type="search"
           :placeholder="$t('action.search')"
-          class="bg-primary flex w-full py-2 pr-2 pl-10"
+          class="bg-transparent flex w-full py-2 pr-2 pl-10"
         />
       </div>
       <div class="flex flex-1 justify-between">
diff --git a/components/collections/index.vue b/components/collections/index.vue
index 5b64fb2a..ba2370c0 100644
--- a/components/collections/index.vue
+++ b/components/collections/index.vue
@@ -21,7 +21,7 @@
           v-model="filterText"
           type="search"
           :placeholder="$t('action.search')"
-          class="bg-primary flex w-full py-2 pr-2 pl-10"
+          class="bg-transparent flex w-full py-2 pr-2 pl-10"
         />
       </div>
       <CollectionsChooseType
diff --git a/components/environments/Edit.vue b/components/environments/Edit.vue
index 9b9622a1..34fe0900 100644
--- a/components/environments/Edit.vue
+++ b/components/environments/Edit.vue
@@ -46,13 +46,13 @@
           >
             <input
               v-model="variable.key"
-              class="bg-primary flex flex-1 py-2 px-4"
+              class="bg-transparent flex flex-1 py-2 px-4"
               :placeholder="$t('count.variable', { count: index + 1 })"
               :name="'param' + index"
             />
             <input
               v-model="variable.value"
-              class="bg-primary flex flex-1 py-2 px-4"
+              class="bg-transparent flex flex-1 py-2 px-4"
               :placeholder="$t('count.value', { count: index + 1 })"
               :name="'value' + index"
             />
diff --git a/components/environments/index.vue b/components/environments/index.vue
index 45ecf8e5..e24baeee 100644
--- a/components/environments/index.vue
+++ b/components/environments/index.vue
@@ -16,7 +16,7 @@
             v-tippy="{ theme: 'tooltip' }"
             :title="$t('environment.select')"
             class="
-              bg-primary
+              bg-transparent
               border-b border-dividerLight
               flex-1
               select-wrapper
diff --git a/components/graphql/Request.vue b/components/graphql/Request.vue
index 43e1ac12..235fe1cb 100644
--- a/components/graphql/Request.vue
+++ b/components/graphql/Request.vue
@@ -16,7 +16,7 @@
           py-2
           px-4
           hover:border-dividerDark
-          focus-visible:bg-primary focus-visible:border-dividerDark
+          focus-visible:bg-transparent focus-visible:border-dividerDark
         "
         :placeholder="$t('request.url')"
         @keyup.enter="onConnectClick"
diff --git a/components/graphql/RequestOptions.vue b/components/graphql/RequestOptions.vue
index 868553d7..d5038115 100644
--- a/components/graphql/RequestOptions.vue
+++ b/components/graphql/RequestOptions.vue
@@ -159,7 +159,7 @@
               :value="header.key"
               autofocus
               styles="
-                bg-primary
+                bg-transparent
                 flex
                 flex-1
                 py-1
@@ -176,7 +176,7 @@
               "
             />
             <input
-              class="bg-primary flex flex-1 py-2 px-4"
+              class="bg-transparent flex flex-1 py-2 px-4"
               :placeholder="$t('count.value', { count: index + 1 })"
               :name="`value ${index}`"
               :value="header.value"
@@ -329,7 +329,6 @@ export default defineComponent({
     watch(
       headers,
       () => {
-        console.log("changed")
         if (
           (headers.value[headers.value.length - 1]?.key !== "" ||
             headers.value[headers.value.length - 1]?.value !== "") &&
diff --git a/components/graphql/Sidebar.vue b/components/graphql/Sidebar.vue
index 446874f7..0599af06 100644
--- a/components/graphql/Sidebar.vue
+++ b/components/graphql/Sidebar.vue
@@ -9,7 +9,7 @@
                 v-model="graphqlFieldsFilterText"
                 type="search"
                 :placeholder="$t('action.search')"
-                class="bg-primary flex w-full py-2 pr-2 pl-10"
+                class="bg-transparent flex w-full py-2 pr-2 pl-10"
               />
             </div>
             <div class="flex">
diff --git a/components/history/index.vue b/components/history/index.vue
index 98c99873..b174e80b 100644
--- a/components/history/index.vue
+++ b/components/history/index.vue
@@ -14,7 +14,7 @@
         <input
           v-model="filterText"
           type="search"
-          class="bg-primary flex w-full py-2 pr-2 pl-10"
+          class="bg-transparent flex w-full py-2 pr-2 pl-10"
           :placeholder="$t('action.search')"
         />
       </div>
diff --git a/components/http/Authorization.vue b/components/http/Authorization.vue
index b230e89b..10e0389c 100644
--- a/components/http/Authorization.vue
+++ b/components/http/Authorization.vue
@@ -115,14 +115,14 @@
           <SmartEnvInput
             v-if="EXPERIMENTAL_URL_BAR_ENABLED"
             v-model="basicUsername"
-            class="bg-primary flex flex-1 py-1 px-4"
+            class="bg-transparent flex flex-1 py-1 px-4"
             :placeholder="$t('authorization.username')"
           />
           <input
             v-else
             id="http_basic_user"
             v-model="basicUsername"
-            class="bg-primary flex flex-1 py-2 px-4"
+            class="bg-transparent flex flex-1 py-2 px-4"
             :placeholder="$t('authorization.username')"
             name="http_basic_user"
           />
@@ -133,14 +133,14 @@
           <SmartEnvInput
             v-if="EXPERIMENTAL_URL_BAR_ENABLED"
             v-model="basicPassword"
-            class="bg-primary flex flex-1 py-1 px-4"
+            class="bg-transparent flex flex-1 py-1 px-4"
             :placeholder="$t('authorization.password')"
           />
           <input
             v-else
             id="http_basic_passwd"
             v-model="basicPassword"
-            class="bg-primary flex flex-1 py-2 px-4"
+            class="bg-transparent flex flex-1 py-2 px-4"
             :placeholder="$t('authorization.password')"
             name="http_basic_passwd"
             :type="passwordFieldType"
@@ -157,6 +157,7 @@
       </div>
       <div
         class="
+          bg-primary
           h-full
           top-upperTertiaryStickyFold
           min-w-46
@@ -188,14 +189,14 @@
           <SmartEnvInput
             v-if="EXPERIMENTAL_URL_BAR_ENABLED"
             v-model="bearerToken"
-            class="bg-primary flex flex-1 py-1 px-4"
+            class="bg-transparent flex flex-1 py-1 px-4"
             placeholder="Token"
           />
           <input
             v-else
             id="bearer_token"
             v-model="bearerToken"
-            class="bg-primary flex flex-1 py-2 px-4"
+            class="bg-transparent flex flex-1 py-2 px-4"
             placeholder="Token"
             name="bearer_token"
           />
@@ -203,6 +204,7 @@
       </div>
       <div
         class="
+          bg-primary
           h-full
           top-upperTertiaryStickyFold
           min-w-46
@@ -237,14 +239,14 @@
           <SmartEnvInput
             v-if="EXPERIMENTAL_URL_BAR_ENABLED"
             v-model="oauth2Token"
-            class="bg-primary flex flex-1 py-1 px-4"
+            class="bg-transparent flex flex-1 py-1 px-4"
             placeholder="Token"
           />
           <input
             v-else
             id="oauth2_token"
             v-model="oauth2Token"
-            class="bg-primary flex flex-1 py-2 px-4"
+            class="bg-transparent flex flex-1 py-2 px-4"
             placeholder="Token"
             name="oauth2_token"
           />
@@ -253,6 +255,7 @@
       </div>
       <div
         class="
+          bg-primary
           h-full
           top-upperTertiaryStickyFold
           min-w-46
diff --git a/components/http/Body.vue b/components/http/Body.vue
index 3f67cfa7..f86fde87 100644
--- a/components/http/Body.vue
+++ b/components/http/Body.vue
@@ -5,7 +5,10 @@
         bg-primary
         border-b border-dividerLight
         flex flex-1
+        top-upperSecondaryStickyFold
         pl-4
+        z-10
+        sticky
         items-center
         justify-between
       "
diff --git a/components/http/BodyParameters.vue b/components/http/BodyParameters.vue
index 9e0ebb09..21bb8c02 100644
--- a/components/http/BodyParameters.vue
+++ b/components/http/BodyParameters.vue
@@ -5,7 +5,7 @@
         bg-primary
         border-b border-dividerLight
         flex flex-1
-        top-upperSecondaryStickyFold
+        top-upperTertiaryStickyFold
         pl-4
         z-10
         sticky
@@ -48,7 +48,7 @@
         v-model="param.key"
         :placeholder="$t('count.parameter', { count: index + 1 })"
         styles="
-          bg-primaryLight
+          bg-transparent
           flex
           flex-1
           py-1
@@ -65,7 +65,7 @@
       />
       <input
         v-else
-        class="bg-primaryLight flex flex-1 py-2 px-4"
+        class="bg-transparent flex flex-1 py-2 px-4"
         :placeholder="$t('count.parameter', { count: index + 1 })"
         :name="'param' + index"
         :value="param.key"
@@ -96,12 +96,12 @@
           v-model="param.value"
           :placeholder="$t('count.value', { count: index + 1 })"
           styles="
-          bg-primaryLight
-          flex
-          flex-1
-          py-1
-          px-4
-        "
+            bg-transparent
+            flex
+            flex-1
+            py-1
+            px-4
+          "
           @change="
             updateBodyParam(index, {
               key: param.key,
@@ -113,7 +113,7 @@
         />
         <input
           v-else
-          class="bg-primaryLight flex flex-1 py-2 px-4"
+          class="bg-transparent flex flex-1 py-2 px-4"
           :placeholder="$t('count.value', { count: index + 1 })"
           :name="'value' + index"
           :value="param.value"
@@ -256,8 +256,6 @@ export default defineComponent({
       entry: FormDataKeyValue,
       event: InputEvent
     ) => {
-      console.log(index, event)
-
       const fileEntry: FormDataKeyValue = {
         ...entry,
         isFile: true,
@@ -304,7 +302,7 @@ export default defineComponent({
   @apply flex flex-1;
   @apply whitespace-nowrap;
   @apply overflow-auto;
-  @apply bg-primaryLight;
+  @apply bg-transparent;
 
   .file-chips-wrapper {
     @apply flex;
diff --git a/components/http/Headers.vue b/components/http/Headers.vue
index 71319769..d5a1df2c 100644
--- a/components/http/Headers.vue
+++ b/components/http/Headers.vue
@@ -50,7 +50,7 @@
         :value="header.key"
         autofocus
         styles="
-          bg-primary
+          bg-transparent
           flex
           flex-1
           py-1
@@ -71,7 +71,7 @@
         v-model="header.value"
         :placeholder="$t('count.value', { count: index + 1 })"
         styles="
-          bg-primary
+          bg-transparent
           flex
           flex-1
           py-1
@@ -87,7 +87,7 @@
       />
       <input
         v-else
-        class="bg-primary flex flex-1 py-2 px-4"
+        class="bg-transparent flex flex-1 py-2 px-4"
         :placeholder="$t('count.value', { count: index + 1 })"
         :name="'value' + index"
         :value="header.value"
@@ -182,7 +182,6 @@ export default defineComponent({
   watch: {
     headers$: {
       handler(newValue) {
-        console.log("changed")
         if (
           (newValue[newValue.length - 1]?.key !== "" ||
             newValue[newValue.length - 1]?.value !== "") &&
@@ -203,7 +202,6 @@ export default defineComponent({
       addRESTHeader({ key: "", value: "", active: true })
     },
     updateHeader(index: number, item: HoppRESTHeader) {
-      console.log(index, item)
       updateRESTHeader(index, item)
     },
     deleteHeader(index: number) {
diff --git a/components/http/OAuth2Authorization.vue b/components/http/OAuth2Authorization.vue
index 53e8f8d6..97f5cce4 100644
--- a/components/http/OAuth2Authorization.vue
+++ b/components/http/OAuth2Authorization.vue
@@ -4,7 +4,7 @@
       <input
         id="oidcDiscoveryURL"
         v-model="oidcDiscoveryURL"
-        class="bg-primary flex flex-1 py-2 px-4"
+        class="bg-transparent flex flex-1 py-2 px-4"
         placeholder="OpenID Connect Discovery URL"
         name="oidcDiscoveryURL"
       />
@@ -13,7 +13,7 @@
       <input
         id="authURL"
         v-model="authURL"
-        class="bg-primary flex flex-1 py-2 px-4"
+        class="bg-transparent flex flex-1 py-2 px-4"
         placeholder="Authentication URL"
         name="authURL"
       />
@@ -22,7 +22,7 @@
       <input
         id="accessTokenURL"
         v-model="accessTokenURL"
-        class="bg-primary flex flex-1 py-2 px-4"
+        class="bg-transparent flex flex-1 py-2 px-4"
         placeholder="Access Token URL"
         name="accessTokenURL"
       />
@@ -31,7 +31,7 @@
       <input
         id="clientID"
         v-model="clientID"
-        class="bg-primary flex flex-1 py-2 px-4"
+        class="bg-transparent flex flex-1 py-2 px-4"
         placeholder="Client ID"
         name="clientID"
       />
@@ -40,7 +40,7 @@
       <input
         id="scope"
         v-model="scope"
-        class="bg-primary flex flex-1 py-2 px-4"
+        class="bg-transparent flex flex-1 py-2 px-4"
         placeholder="Scope"
         name="scope"
       />
diff --git a/components/http/Parameters.vue b/components/http/Parameters.vue
index 5f6c4c0b..ef4e700a 100644
--- a/components/http/Parameters.vue
+++ b/components/http/Parameters.vue
@@ -48,7 +48,7 @@
         v-model="param.key"
         :placeholder="$t('count.parameter', { count: index + 1 })"
         styles="
-          bg-primary
+          bg-transparent
           flex
           flex-1
           py-1
@@ -64,7 +64,7 @@
       />
       <input
         v-else
-        class="bg-primary flex flex-1 py-2 px-4"
+        class="bg-transparent flex flex-1 py-2 px-4"
         :placeholder="$t('count.parameter', { count: index + 1 })"
         :name="'param' + index"
         :value="param.key"
@@ -82,7 +82,7 @@
         v-model="param.value"
         :placeholder="$t('count.value', { count: index + 1 })"
         styles="
-          bg-primary
+          bg-transparent
           flex
           flex-1
           py-1
@@ -98,7 +98,7 @@
       />
       <input
         v-else
-        class="bg-primary flex flex-1 py-2 px-4"
+        class="bg-transparent flex flex-1 py-2 px-4"
         :placeholder="$t('count.value', { count: index + 1 })"
         :name="'value' + index"
         :value="param.value"
diff --git a/components/http/PreRequestScript.vue b/components/http/PreRequestScript.vue
index eba289f0..cb26c32f 100644
--- a/components/http/PreRequestScript.vue
+++ b/components/http/PreRequestScript.vue
@@ -48,6 +48,7 @@
       </div>
       <div
         class="
+          bg-primary
           h-full
           top-upperTertiaryStickyFold
           min-w-46
diff --git a/components/http/RawBody.vue b/components/http/RawBody.vue
index 2640af83..a4228d7c 100644
--- a/components/http/RawBody.vue
+++ b/components/http/RawBody.vue
@@ -5,7 +5,7 @@
         bg-primary
         border-b border-dividerLight
         flex flex-1
-        top-upperSecondaryStickyFold
+        top-upperTertiaryStickyFold
         pl-4
         z-10
         sticky
diff --git a/components/http/Request.vue b/components/http/Request.vue
index 07c0b5c1..b8c67200 100644
--- a/components/http/Request.vue
+++ b/components/http/Request.vue
@@ -26,7 +26,8 @@
                     px-4
                     w-28
                     hover:border-dividerDark
-                    focus-visible:bg-primary focus-visible:border-dividerDark
+                    focus-visible:bg-transparent
+                    focus-visible:border-dividerDark
                   "
                   :value="newMethod"
                   :readonly="!isCustomMethod"
@@ -50,18 +51,18 @@
           v-model="newEndpoint"
           :placeholder="$t('request.url')"
           styles="
-          bg-primaryLight
-          border border-divider
-          flex
-          flex-1
-          rounded-r
-          text-secondaryDark
-          py-1
-          px-4
-          hover:border-dividerDark
-          focus-visible:border-dividerDark
-                    focus-visible:bg-primary
-        "
+            bg-primaryLight
+            border border-divider
+            flex
+            flex-1
+            rounded-r
+            text-secondaryDark
+            py-1
+            px-4
+            hover:border-dividerDark
+            focus-visible:border-dividerDark
+            focus-visible:bg-transparent
+          "
           @enter="newSendRequest()"
         />
         <input
@@ -79,7 +80,7 @@
             py-2
             px-4
             hover:border-dividerDark
-            focus-visible:bg-primary focus-visible:border-dividerDark
+            focus-visible:bg-transparent focus-visible:border-dividerDark
           "
           name="url"
           type="text"
@@ -295,7 +296,6 @@ const newSendRequest = () => {
   subscribeToStream(
     runRESTRequest$(),
     (responseState) => {
-      console.log(responseState)
       if (loading.value) {
         // Check exists because, loading can be set to false
         // when cancelled
diff --git a/components/http/Tests.vue b/components/http/Tests.vue
index 898255a5..85b16295 100644
--- a/components/http/Tests.vue
+++ b/components/http/Tests.vue
@@ -48,6 +48,7 @@
       </div>
       <div
         class="
+          bg-primary
           h-full
           top-upperTertiaryStickyFold
           min-w-46
diff --git a/components/lenses/renderers/RawLensRenderer.vue b/components/lenses/renderers/RawLensRenderer.vue
index a8e0c73e..7fee1051 100644
--- a/components/lenses/renderers/RawLensRenderer.vue
+++ b/components/lenses/renderers/RawLensRenderer.vue
@@ -82,7 +82,6 @@ export default defineComponent({
   },
   methods: {
     downloadResponse() {
-      console.log(this.responseType)
       const dataToWrite = this.responseBodyText
       const file = new Blob([dataToWrite], { type: this.responseType })
       const a = document.createElement("a")
diff --git a/components/realtime/Log.vue b/components/realtime/Log.vue
index c4e899d5..a09fdf7c 100644
--- a/components/realtime/Log.vue
+++ b/components/realtime/Log.vue
@@ -60,7 +60,7 @@ export default defineComponent({
 <style scoped lang="scss">
 .realtime-log {
   @apply p-4;
-  @apply bg-primary;
+  @apply bg-transparent;
   @apply text-secondary;
   @apply overflow-auto;
 
diff --git a/components/realtime/Mqtt.vue b/components/realtime/Mqtt.vue
index 76669204..f3e09ba8 100644
--- a/components/realtime/Mqtt.vue
+++ b/components/realtime/Mqtt.vue
@@ -21,7 +21,8 @@
                     py-2
                     px-4
                     hover:border-dividerDark
-                    focus-visible:bg-primary focus-visible:border-dividerDark
+                    focus-visible:bg-transparent
+                    focus-visible:border-dividerDark
                   "
                   :placeholder="$t('mqtt.url')"
                 />
diff --git a/components/realtime/Socketio.vue b/components/realtime/Socketio.vue
index fc789442..e99b1b7a 100644
--- a/components/realtime/Socketio.vue
+++ b/components/realtime/Socketio.vue
@@ -24,7 +24,8 @@
                       py-2
                       px-4
                       hover:border-dividerDark
-                      focus-visible:bg-primary focus-visible:border-dividerDark
+                      focus-visible:bg-transparent
+                      focus-visible:border-dividerDark
                     "
                     :placeholder="$t('socketio.url')"
                     @keyup.enter="urlValid ? toggleConnection() : null"
@@ -42,7 +43,8 @@
                       py-2
                       px-4
                       hover:border-dividerDark
-                      focus-visible:bg-primary focus-visible:border-dividerDark
+                      focus-visible:bg-transparent
+                      focus-visible:border-dividerDark
                     "
                     spellcheck="false"
                   />
diff --git a/components/realtime/Sse.vue b/components/realtime/Sse.vue
index d99f0e61..8cb61471 100644
--- a/components/realtime/Sse.vue
+++ b/components/realtime/Sse.vue
@@ -20,7 +20,7 @@
                 py-2
                 px-4
                 hover:border-dividerDark
-                focus-visible:bg-primary focus-visible:border-dividerDark
+                focus-visible:bg-transparent focus-visible:border-dividerDark
               "
               :placeholder="$t('sse.url')"
               @keyup.enter="serverValid ? toggleSSEConnection() : null"
@@ -52,7 +52,7 @@
                 py-2
                 px-4
                 hover:border-dividerDark
-                focus-visible:bg-primary focus-visible:border-dividerDark
+                focus-visible:bg-transparent focus-visible:border-dividerDark
               "
               spellcheck="false"
             />
diff --git a/components/realtime/Websocket.vue b/components/realtime/Websocket.vue
index 3feea767..4fdcade4 100644
--- a/components/realtime/Websocket.vue
+++ b/components/realtime/Websocket.vue
@@ -19,7 +19,8 @@
                     py-2
                     px-4
                     hover:border-dividerDark
-                    focus-visible:bg-primary focus-visible:border-dividerDark
+                    focus-visible:bg-transparent
+                    focus-visible:border-dividerDark
                   "
                   type="url"
                   spellcheck="false"
@@ -84,7 +85,7 @@
             >
               <input
                 v-model="protocol.value"
-                class="bg-primary flex flex-1 py-2 px-4"
+                class="bg-transparent flex flex-1 py-2 px-4"
                 :placeholder="$t('count.protocol', { count: index + 1 })"
                 name="message"
                 type="text"
diff --git a/components/smart/AutoComplete.vue b/components/smart/AutoComplete.vue
index f3dea540..df33f8aa 100644
--- a/components/smart/AutoComplete.vue
+++ b/components/smart/AutoComplete.vue
@@ -198,7 +198,7 @@ export default defineComponent({
 
   ul.suggestions {
     @apply hidden;
-    @apply bg-primary;
+    @apply bg-popover;
     @apply absolute;
     @apply mx-2;
     @apply left-0;
diff --git a/components/smart/DeletableChip.vue b/components/smart/DeletableChip.vue
index 453ba712..6985c239 100644
--- a/components/smart/DeletableChip.vue
+++ b/components/smart/DeletableChip.vue
@@ -18,7 +18,7 @@
   @apply rounded;
   @apply pl-2;
   @apply pr-0.5;
-  @apply bg-primary;
+  @apply bg-transparent;
   @apply border border-divider;
 }
 
diff --git a/components/smart/Tabs.vue b/components/smart/Tabs.vue
index 25d1b4ca..7ed17f84 100644
--- a/components/smart/Tabs.vue
+++ b/components/smart/Tabs.vue
@@ -114,7 +114,7 @@ export default defineComponent({
       @apply left-4;
       @apply right-4;
       @apply bottom-0;
-      @apply bg-primary;
+      @apply bg-transparent;
       @apply z-2;
       @apply h-0.5;
 
diff --git a/components/teams/Edit.vue b/components/teams/Edit.vue
index 608021ac..a1e51f89 100644
--- a/components/teams/Edit.vue
+++ b/components/teams/Edit.vue
@@ -35,7 +35,7 @@
             class="divide-x divide-dividerLight flex"
           >
             <input
-              class="bg-primary flex flex-1 py-2 px-4"
+              class="bg-transparent flex flex-1 py-2 px-4"
               :placeholder="$t('team.email')"
               :name="'param' + index"
               :value="member.user.email"
@@ -52,7 +52,13 @@
                 <template #trigger>
                   <span class="select-wrapper">
                     <input
-                      class="bg-primary cursor-pointer flex flex-1 py-2 px-4"
+                      class="
+                        bg-transparent
+                        cursor-pointer
+                        flex flex-1
+                        py-2
+                        px-4
+                      "
                       :placeholder="$t('team.permissions')"
                       :name="'value' + index"
                       :value="
@@ -96,7 +102,7 @@
           >
             <input
               v-model="member.key"
-              class="bg-primary flex flex-1 py-2 px-4"
+              class="bg-transparent flex flex-1 py-2 px-4"
               :placeholder="$t('team.email')"
               :name="'member' + index"
               autofocus
@@ -112,7 +118,13 @@
                 <template #trigger>
                   <span class="select-wrapper">
                     <input
-                      class="bg-primary cursor-pointer flex flex-1 py-2 px-4"
+                      class="
+                        bg-transparent
+                        cursor-pointer
+                        flex flex-1
+                        py-2
+                        px-4
+                      "
                       :placeholder="$t('team.permissions')"
                       :name="'value' + index"
                       :value="
diff --git a/helpers/actions.ts b/helpers/actions.ts
index 0548f202..beee78e1 100644
--- a/helpers/actions.ts
+++ b/helpers/actions.ts
@@ -66,11 +66,9 @@ export function unbindAction(action: HoppAction, handler: () => void) {
 export function defineActionHandler(action: HoppAction, handler: () => void) {
   onMounted(() => {
     bindAction(action, handler)
-    console.log(`Action bound: ${action}`)
   })
 
   onBeforeUnmount(() => {
     unbindAction(action, handler)
-    console.log(`Action unbound: ${action}`)
   })
 }
diff --git a/helpers/fb/history.ts b/helpers/fb/history.ts
index 955a4258..af5a526c 100644
--- a/helpers/fb/history.ts
+++ b/helpers/fb/history.ts
@@ -94,8 +94,6 @@ async function toggleStar(entry: any, col: HistoryFBCollections) {
   if (currentUser$.value == null)
     throw new Error("User not logged in to toggle star")
 
-  console.log(entry)
-
   try {
     await firebase
       .firestore()
@@ -207,7 +205,3 @@ export function initHistory() {
     }
   })
 }
-
-restHistoryStore.dispatches$.subscribe((state) => {
-  console.log(state)
-})
diff --git a/helpers/fb/request.ts b/helpers/fb/request.ts
index f56996e8..82165347 100644
--- a/helpers/fb/request.ts
+++ b/helpers/fb/request.ts
@@ -76,7 +76,6 @@ export function startRequestSync(): Subscription {
     )
     .subscribe(() => {
       // NOTE: This subscription should be kept
-      console.log("synced request")
     })
 
   return sub
diff --git a/helpers/keybindings.ts b/helpers/keybindings.ts
index 7c7aea6d..7fd06bee 100644
--- a/helpers/keybindings.ts
+++ b/helpers/keybindings.ts
@@ -158,12 +158,10 @@ export function useKeybindingDisabler() {
   // TODO: Move to a lock based system that keeps the bindings disabled until all locks are lifted
   const disableKeybindings = () => {
     keybindingsEnabled = false
-    console.log("Keybinds disabled by a component")
   }
 
   const enableKeybindings = () => {
     keybindingsEnabled = true
-    console.log("Keybinds enabled by a component")
   }
 
   return {
diff --git a/helpers/lenses/lenses.js b/helpers/lenses/lenses.js
index f213ea9f..674797fc 100644
--- a/helpers/lenses/lenses.js
+++ b/helpers/lenses/lenses.js
@@ -8,7 +8,6 @@ export const lenses = [jsonLens, imageLens, htmlLens, xmlLens, rawLens]
 
 export function getSuitableLenses(response) {
   const contentType = response.headers.find((h) => h.key === "content-type")
-  console.log(contentType)
 
   if (!contentType) return [rawLens]
 
diff --git a/newstore/RESTSession.ts b/newstore/RESTSession.ts
index 4de60ab0..dc71f989 100644
--- a/newstore/RESTSession.ts
+++ b/newstore/RESTSession.ts
@@ -27,8 +27,8 @@ export const defaultRESTRequest: HoppRESTRequest = {
   v: RESTReqSchemaVersion,
   endpoint: "https://echo.hoppscotch.io",
   name: "Untitled request",
-  params: [],
-  headers: [],
+  params: [{ key: "", value: "", active: true }],
+  headers: [{ key: "", value: "", active: true }],
   method: "GET",
   auth: {
     authType: "none",
diff --git a/pages/index.vue b/pages/index.vue
index 74693467..03ff139e 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -83,7 +83,6 @@
 import {
   computed,
   defineComponent,
-  getCurrentInstance,
   onBeforeMount,
   onBeforeUnmount,
   onMounted,
@@ -112,7 +111,6 @@ import {
   pluckRef,
   useReadonlyStream,
   useStream,
-  useStreamSubscriber,
 } from "~/helpers/utils/composables"
 import { loadRequestFromSync, startRequestSync } from "~/helpers/fb/request"
 import { onLoggedIn } from "~/helpers/fb/auth"
@@ -210,7 +208,6 @@ function setupRequestSync(
     ) {
       const request = await loadRequestFromSync()
       if (request) {
-        console.log("sync le request nnd")
         // setRESTRequest(request)
         if (!isEqual(request, getRESTRequest())) {
           requestForSync.value = request
@@ -235,23 +232,13 @@ export default defineComponent({
 
     const confirmSync = ref(false)
 
-    const internalInstance = getCurrentInstance()
-    console.log("yoo", internalInstance)
-
     const syncRequest = () => {
-      console.log("syncinggg")
       setRESTRequest(requestForSync.value!)
     }
 
-    const { subscribeToStream } = useStreamSubscriber()
-
     setupRequestSync(confirmSync, requestForSync)
     bindRequestToURLParams()
 
-    subscribeToStream(restRequest$, (x) => {
-      console.log(x)
-    })
-
     return {
       newActiveParamsCount$: useReadonlyStream(
         restActiveParamsCount$.pipe(