diff --git a/components/app/Footer.vue b/components/app/Footer.vue
index 016b8e63..09db24e3 100644
--- a/components/app/Footer.vue
+++ b/components/app/Footer.vue
@@ -1,19 +1,16 @@
 <template>
   <footer class="footer">
-    <div class="row-wrapper">
-      <span
-        class="flex flex-col font-mono md:flex-row"
-        style="align-items: start"
-      >
+    <div class="flex justify-between items-center flex-1">
+      <span class="flex font-mono" style="align-items: start">
         <a
-          class="footer-link"
+          class="footer-link hidden md:inline-flex"
           href="https://www.netlify.com"
           target="_blank"
           rel="noopener"
         >
           Powered by Netlify
         </a>
-        <span>
+        <span class="hidden md:inline-flex">
           <a
             class="footer-link"
             href="https://oss.capital/?ref=hoppscotch"
@@ -50,10 +47,7 @@
           loading="lazy"
         ></iframe>
       </span>
-      <span
-        class="flex flex-col font-mono md:flex-row"
-        style="align-items: start"
-      >
+      <span class="flex font-mono" style="align-items: start">
         <a href="mailto:support@hoppscotch.io" target="_blank" rel="noopener">
           <button v-tooltip="$t('contact_us')" class="icon">
             <i class="material-icons">email</i>
@@ -90,7 +84,6 @@ export default {
 
 <style scoped lang="scss">
 .footer-link {
-  @apply inline-flex;
   @apply flex-shrink-0;
   @apply my-2;
   @apply mx-4;
diff --git a/components/app/Header.vue b/components/app/Header.vue
index c9299280..e0fb80be 100644
--- a/components/app/Header.vue
+++ b/components/app/Header.vue
@@ -328,5 +328,4 @@ $responsiveWidth: 768px;
 
   animation: slideIn 0.2s forwards ease-in-out;
 }
-
 </style>
diff --git a/components/smart/AccentModePicker.vue b/components/smart/AccentModePicker.vue
index be27754a..494204cd 100644
--- a/components/smart/AccentModePicker.vue
+++ b/components/smart/AccentModePicker.vue
@@ -1,9 +1,6 @@
 <template>
   <div class="flex flex-col">
-    <label
-      >{{ $t("color") }}:
-      {{ capitalized(active) }}</label
-    >
+    <label>{{ $t("color") }}: {{ capitalized(active) }}</label>
     <div>
       <!-- text-blue-400 -->
       <!-- text-green-400 -->
@@ -61,7 +58,6 @@ export default {
   },
   watch: {
     active(color) {
-      
       localStorage.setItem("THEME_COLOR", color)
     },
   },
@@ -72,7 +68,7 @@ export default {
       this.active = color
     },
     capitalized(color) {
-      return `${color.charAt(0).toUpperCase()}${color.slice(1)}`  
+      return `${color.charAt(0).toUpperCase()}${color.slice(1)}`
     },
   },
 }
diff --git a/components/smart/AutoComplete.vue b/components/smart/AutoComplete.vue
index e89976c0..def6526a 100644
--- a/components/smart/AutoComplete.vue
+++ b/components/smart/AutoComplete.vue
@@ -109,7 +109,7 @@ export default {
     },
     value(newValue) {
       this.text = newValue
-    }
+    },
   },
 
   mounted() {
diff --git a/components/smart/ColorModePicker.vue b/components/smart/ColorModePicker.vue
index 8e98b34b..78ea6e45 100644
--- a/components/smart/ColorModePicker.vue
+++ b/components/smart/ColorModePicker.vue
@@ -32,7 +32,6 @@
           border-collapseer-2
           text-fgLightColor
           hover:text-fgColor
-          hover:shadow-none
         "
         :class="[
           { 'bg-actColor': color === $colorMode.preference },