diff --git a/assets/scss/themes.scss b/assets/scss/themes.scss
index 5d9dd381..d4962f9d 100644
--- a/assets/scss/themes.scss
+++ b/assets/scss/themes.scss
@@ -10,7 +10,7 @@
   // Light Background color
   --primary-light-color: theme("colors.dark.600");
   // Dark Background color
-  --primary-dark-color: theme("colors.dark.900");
+  --primary-dark-color: theme("colors.true-gray.800");
   // Text color
   --secondary-color: theme("colors.true-gray.400");
   // Light Text color
diff --git a/components/app/Header.vue b/components/app/Header.vue
index 1293be9d..d78b2783 100644
--- a/components/app/Header.vue
+++ b/components/app/Header.vue
@@ -26,14 +26,13 @@
           v-if="currentUser === null"
           icon="filter_drama"
           :label="$t('header.save_workspace')"
-          outline
-          class="hidden !text-secondaryDark md:flex"
+          filled
+          class="hidden !font-semibold md:flex"
           @click.native="showLogin = true"
         />
         <ButtonPrimary
           v-if="currentUser === null"
           :label="$t('header.login')"
-          outline
           @click.native="showLogin = true"
         />
         <span v-else class="pr-2">
diff --git a/components/button/Secondary.vue b/components/button/Secondary.vue
index b61129d0..235527d8 100644
--- a/components/button/Secondary.vue
+++ b/components/button/Secondary.vue
@@ -27,6 +27,7 @@
         'border border-divider hover:border-dividerDark focus-visible:border-dividerDark':
           outline,
       },
+      { 'bg-primaryDark': filled },
     ]"
     :disabled="disabled"
     tabindex="0"
@@ -127,6 +128,10 @@ export default defineComponent({
       type: Array,
       default: () => [],
     },
+    filled: {
+      type: Boolean,
+      default: false,
+    },
   },
 })
 </script>
diff --git a/components/collections/ChooseType.vue b/components/collections/ChooseType.vue
index c20260a4..4b81d385 100644
--- a/components/collections/ChooseType.vue
+++ b/components/collections/ChooseType.vue
@@ -19,12 +19,15 @@
               autofocus
               class="
                 bg-primary
+                border-b border-transparent
                 cursor-pointer
                 flex
+                font-medium
                 w-full
                 py-2
                 px-4
                 appearance-none
+                hover:bg-primaryDark
               "
               @change="updateSelectedTeam(myTeams[$event.target.value])"
             >
diff --git a/components/collections/graphql/index.vue b/components/collections/graphql/index.vue
index 04838b07..a810fe93 100644
--- a/components/collections/graphql/index.vue
+++ b/components/collections/graphql/index.vue
@@ -75,7 +75,7 @@
       </span>
       <ButtonSecondary
         :label="$t('add.new')"
-        outline
+        filled
         @click.native="displayModalAdd(true)"
       />
     </div>
diff --git a/components/collections/index.vue b/components/collections/index.vue
index ae164803..1e868591 100644
--- a/components/collections/index.vue
+++ b/components/collections/index.vue
@@ -118,15 +118,14 @@
             collectionsType.selectedTeam.myRole == 'VIEWER')
         "
         v-tippy="{ theme: 'tooltip' }"
-        disabled
         :title="$t('team.no_access')"
         :label="$t('add.new')"
-        outline
+        filled
       />
       <ButtonSecondary
         v-else
-        outline
         :label="$t('add.new')"
+        filled
         @click.native="displayModalAdd(true)"
       />
     </div>
diff --git a/components/environments/Edit.vue b/components/environments/Edit.vue
index 8cc11c09..9b9622a1 100644
--- a/components/environments/Edit.vue
+++ b/components/environments/Edit.vue
@@ -46,13 +46,13 @@
           >
             <input
               v-model="variable.key"
-              class="bg-primaryLight flex flex-1 py-2 px-4"
+              class="bg-primary flex flex-1 py-2 px-4"
               :placeholder="$t('count.variable', { count: index + 1 })"
               :name="'param' + index"
             />
             <input
               v-model="variable.value"
-              class="bg-primaryLight flex flex-1 py-2 px-4"
+              class="bg-primary flex flex-1 py-2 px-4"
               :placeholder="$t('count.value', { count: index + 1 })"
               :name="'value' + index"
             />
@@ -83,7 +83,7 @@
             </span>
             <ButtonSecondary
               :label="$t('add.new')"
-              outline
+              filled
               @click.native="addEnvironmentVariable"
             />
           </div>
diff --git a/components/environments/index.vue b/components/environments/index.vue
index 6608a298..45ecf8e5 100644
--- a/components/environments/index.vue
+++ b/components/environments/index.vue
@@ -116,7 +116,7 @@
       </span>
       <ButtonSecondary
         :label="$t('add.new')"
-        outline
+        filled
         @click.native="displayModalAdd(true)"
       />
     </div>
diff --git a/components/graphql/RequestOptions.vue b/components/graphql/RequestOptions.vue
index 6928b313..f33d63cb 100644
--- a/components/graphql/RequestOptions.vue
+++ b/components/graphql/RequestOptions.vue
@@ -241,7 +241,7 @@
             </span>
             <ButtonSecondary
               :label="$t('add.new')"
-              outline
+              filled
               icon="add"
               @click.native="addRequestHeader"
             />
diff --git a/components/http/BodyParameters.vue b/components/http/BodyParameters.vue
index b9d3b5f7..9e0ebb09 100644
--- a/components/http/BodyParameters.vue
+++ b/components/http/BodyParameters.vue
@@ -191,7 +191,7 @@
       </span>
       <ButtonSecondary
         :label="$t('add.new')"
-        outline
+        filled
         icon="add"
         @click.native="addBodyParam"
       />
diff --git a/components/http/Headers.vue b/components/http/Headers.vue
index e70aa3f4..98475e32 100644
--- a/components/http/Headers.vue
+++ b/components/http/Headers.vue
@@ -144,7 +144,7 @@
         {{ $t("empty.headers") }}
       </span>
       <ButtonSecondary
-        outline
+        filled
         :label="$t('add.new')"
         icon="add"
         @click.native="addHeader"
diff --git a/components/http/Parameters.vue b/components/http/Parameters.vue
index 71da7ab8..9b12d415 100644
--- a/components/http/Parameters.vue
+++ b/components/http/Parameters.vue
@@ -157,7 +157,7 @@
       <ButtonSecondary
         :label="$t('add.new')"
         icon="add"
-        outline
+        filled
         @click.native="addParam"
       />
     </div>
diff --git a/components/http/Request.vue b/components/http/Request.vue
index 3906252e..51789182 100644
--- a/components/http/Request.vue
+++ b/components/http/Request.vue
@@ -108,7 +108,7 @@
           <template #trigger>
             <ButtonPrimary
               class="rounded-l-none"
-              outline
+              filled
               icon="keyboard_arrow_down"
             />
           </template>
@@ -142,7 +142,7 @@
       <ButtonSecondary
         class="rounded-r-none ml-2"
         :label="$t('request.save')"
-        outline
+        filled
         icon="save"
         @click.native="saveRequest()"
       />
@@ -157,7 +157,7 @@
           <template #trigger>
             <ButtonSecondary
               icon="keyboard_arrow_down"
-              outline
+              filled
               class="rounded-r"
             />
           </template>
diff --git a/components/realtime/Mqtt.vue b/components/realtime/Mqtt.vue
index 78b891b8..76669204 100644
--- a/components/realtime/Mqtt.vue
+++ b/components/realtime/Mqtt.vue
@@ -72,15 +72,15 @@
           />
         </div>
         <div class="flex flex-1 p-4 items-center justify-between">
-          <label for="mqtt-message" class="font-semibold text-secondaryLight">{{
-            $t("mqtt.communication")
-          }}</label>
+          <label for="mqtt-message" class="font-semibold text-secondaryLight">
+            {{ $t("mqtt.communication") }}
+          </label>
         </div>
-        <div class="flex px-4">
+        <div class="flex space-x-2 px-4">
           <input
             id="mqtt-message"
             v-model="msg"
-            class="input !rounded-r-none"
+            class="input"
             type="text"
             :placeholder="$t('mqtt.message')"
             spellcheck="false"
@@ -88,7 +88,6 @@
           <ButtonPrimary
             id="publish"
             name="get"
-            class="rounded-l-none"
             :disabled="!canpublish"
             :label="$t('mqtt.publish')"
             @click.native="publish"
@@ -103,24 +102,23 @@
             inline-flex
           "
         >
-          <label for="sub_topic" class="font-semibold text-secondaryLight">{{
-            $t("mqtt.topic")
-          }}</label>
+          <label for="sub_topic" class="font-semibold text-secondaryLight">
+            {{ $t("mqtt.topic") }}
+          </label>
         </div>
-        <div class="flex px-4">
+        <div class="flex space-x-2 px-4">
           <input
             id="sub_topic"
             v-model="sub_topic"
             type="text"
             :placeholder="$t('mqtt.topic_name')"
             spellcheck="false"
-            class="input !rounded-r-none"
+            class="input"
           />
           <ButtonPrimary
             id="subscribe"
             name="get"
             :disabled="!cansubscribe"
-            class="rounded-l-none"
             :label="
               subscriptionState ? $t('mqtt.unsubscribe') : $t('mqtt.subscribe')
             "
diff --git a/components/realtime/Socketio.vue b/components/realtime/Socketio.vue
index 961cd909..fc789442 100644
--- a/components/realtime/Socketio.vue
+++ b/components/realtime/Socketio.vue
@@ -96,9 +96,9 @@
           />
         </div>
         <div class="flex flex-1 p-4 items-center justify-between">
-          <label class="font-semibold text-secondaryLight">{{
-            $t("socketio.communication")
-          }}</label>
+          <label class="font-semibold text-secondaryLight">
+            {{ $t("socketio.communication") }}
+          </label>
           <div class="flex">
             <ButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
@@ -114,10 +114,10 @@
             v-for="(input, index) of communication.inputs"
             :key="`input-${index}`"
           >
-            <div class="flex">
+            <div class="flex space-x-2">
               <input
                 v-model="communication.inputs[index]"
-                class="input !rounded-r-none"
+                class="input"
                 name="message"
                 :placeholder="$t('count.message', { count: index + 1 })"
                 type="text"
@@ -129,7 +129,7 @@
                 v-tippy="{ theme: 'tooltip' }"
                 :title="$t('action.remove')"
                 icon="remove_circle_outline"
-                class="rounded-r"
+                class="rounded"
                 color="red"
                 outline
                 @click.native="removeCommunicationInput({ index })"
@@ -139,7 +139,6 @@
                 id="send"
                 name="send"
                 :disabled="!connectionState"
-                class="rounded-l-none"
                 :label="$t('action.send')"
                 @click.native="sendMessage"
               />
diff --git a/components/realtime/Websocket.vue b/components/realtime/Websocket.vue
index 2500110b..3feea767 100644
--- a/components/realtime/Websocket.vue
+++ b/components/realtime/Websocket.vue
@@ -167,7 +167,7 @@
             {{ $t("websocket.communication") }}
           </label>
         </div>
-        <div class="flex px-4">
+        <div class="flex space-x-2 px-4">
           <input
             id="websocket-message"
             v-model="communication.input"
@@ -175,7 +175,7 @@
             type="text"
             :disabled="!connectionState"
             :placeholder="$t('websocket.message')"
-            class="input !rounded-r-none"
+            class="input"
             @keyup.enter="connectionState ? sendMessage() : null"
             @keyup.up="connectionState ? walkHistory('up') : null"
             @keyup.down="connectionState ? walkHistory('down') : null"
@@ -184,7 +184,6 @@
             id="send"
             name="send"
             :disabled="!connectionState"
-            class="rounded-l-none"
             :label="$t('action.send')"
             @click.native="sendMessage"
           />
diff --git a/components/teams/Edit.vue b/components/teams/Edit.vue
index 545c0fd4..608021ac 100644
--- a/components/teams/Edit.vue
+++ b/components/teams/Edit.vue
@@ -35,7 +35,7 @@
             class="divide-x divide-dividerLight flex"
           >
             <input
-              class="bg-primaryLight flex flex-1 py-2 px-4"
+              class="bg-primary flex flex-1 py-2 px-4"
               :placeholder="$t('team.email')"
               :name="'param' + index"
               :value="member.user.email"
@@ -52,13 +52,7 @@
                 <template #trigger>
                   <span class="select-wrapper">
                     <input
-                      class="
-                        bg-primaryLight
-                        cursor-pointer
-                        flex flex-1
-                        py-2
-                        px-4
-                      "
+                      class="bg-primary cursor-pointer flex flex-1 py-2 px-4"
                       :placeholder="$t('team.permissions')"
                       :name="'value' + index"
                       :value="
@@ -102,7 +96,7 @@
           >
             <input
               v-model="member.key"
-              class="bg-primaryLight flex flex-1 py-2 px-4"
+              class="bg-primary flex flex-1 py-2 px-4"
               :placeholder="$t('team.email')"
               :name="'member' + index"
               autofocus
@@ -118,13 +112,7 @@
                 <template #trigger>
                   <span class="select-wrapper">
                     <input
-                      class="
-                        bg-primaryLight
-                        cursor-pointer
-                        flex flex-1
-                        py-2
-                        px-4
-                      "
+                      class="bg-primary cursor-pointer flex flex-1 py-2 px-4"
                       :placeholder="$t('team.permissions')"
                       :name="'value' + index"
                       :value="
@@ -177,7 +165,7 @@
             </span>
             <ButtonSecondary
               :label="$t('add.new')"
-              outline
+              filled
               @click.native="addTeamMember"
             />
           </div>
diff --git a/components/teams/Team.vue b/components/teams/Team.vue
index 952c73d2..353f55f7 100644
--- a/components/teams/Team.vue
+++ b/components/teams/Team.vue
@@ -49,24 +49,15 @@
             $refs.options.tippy().hide()
           "
         />
-        <span
-          v-tippy="{ theme: 'tooltip' }"
-          :title="
-            team.myRole === 'OWNER' && team.ownersCount == 1
-              ? $t('team.exit_disabled')
-              : ''
+        <SmartItem
+          v-if="!(team.myRole === 'OWNER' && team.ownersCount == 1)"
+          icon="remove"
+          :label="$t('team.exit')"
+          @click.native="
+            exitTeam()
+            $refs.options.tippy().hide()
           "
-        >
-          <SmartItem
-            :disabled="team.myRole === 'OWNER' && team.ownersCount == 1"
-            icon="remove"
-            :label="$t('team.exit')"
-            @click.native="
-              exitTeam()
-              $refs.options.tippy().hide()
-            "
-          />
-        </span>
+        />
       </tippy>
     </span>
   </div>