diff --git a/histoire.config.ts b/histoire.config.ts
index 5ba0ebc..756d530 100644
--- a/histoire.config.ts
+++ b/histoire.config.ts
@@ -3,18 +3,16 @@ import { defineConfig } from "histoire"
 
 export default defineConfig({
   theme: {
-    title: "Hoppscotch • UI",
+    title: "Hoppscotch Design • Hoppscotch",
     logo: {
-      square: "/logo.png",
-      light: "/logo.png",
-      dark: "/logo.png",
+      square: "/logo.svg",
+      light: "/logo.svg",
+      dark: "/logo.svg",
     },
-    logoHref: "https://ui.hoppscotch.io",
-    favicon: 'favicon.ico',
+    logoHref: "/",
+    favicon: "favicon.ico",
   },
   setupFile: "histoire.setup.ts",
   plugins: [HstVue()],
-  viteIgnorePlugins: [
-    'vite:dts'
-  ]
+  viteIgnorePlugins: ["vite:dts"],
 })
diff --git a/package.json b/package.json
index d777104..d811be3 100644
--- a/package.json
+++ b/package.json
@@ -101,10 +101,6 @@
     ".": "./dist/index.js",
     "./style.css": "./dist/style.css",
     "./themes.scss": "./dist/themes.scss",
-    "./postcss.config": {
-      "import": "./postcss.config.cjs",
-      "require": "./postcss.config.cjs"
-    },
     "./ui-preset": {
       "import": "./dist/ui-preset.js",
       "require": "./dist/ui-preset.js"
diff --git a/public/favicon.ico b/public/favicon.ico
index f8cd232..7411836 100644
Binary files a/public/favicon.ico and b/public/favicon.ico differ
diff --git a/public/logo.png b/public/logo.png
deleted file mode 100644
index 5919c51..0000000
Binary files a/public/logo.png and /dev/null differ
diff --git a/public/logo.svg b/public/logo.svg
new file mode 100644
index 0000000..d78a86b
--- /dev/null
+++ b/public/logo.svg
@@ -0,0 +1,50 @@
+<svg width="824" height="824" viewBox="0 0 824 824" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="824" height="824" rx="184" fill="#08110F"/>
+<rect width="824" height="824" rx="184" fill="url(#paint0_radial_0_21)" fill-opacity="0.5"/>
+<path d="M435.425 463.217C429.441 476.657 411.033 481.515 394.309 474.07C377.585 466.624 368.879 449.693 374.863 436.253C380.846 422.813 399.254 417.954 415.978 425.4C432.702 432.846 441.409 449.777 435.425 463.217Z" fill="url(#paint1_linear_0_21)"/>
+<path d="M435.425 463.217C429.441 476.657 411.033 481.515 394.309 474.07C377.585 466.624 368.879 449.693 374.863 436.253C380.846 422.813 399.254 417.954 415.978 425.4C432.702 432.846 441.409 449.777 435.425 463.217Z" fill="url(#paint2_radial_0_21)" style="mix-blend-mode:soft-light"/>
+<path d="M535.563 521.172C553.071 526.191 570.536 518.856 574.571 504.789C578.606 490.722 567.684 475.251 550.175 470.232C532.666 465.213 515.201 472.548 511.166 486.615C507.131 500.682 518.054 516.153 535.563 521.172Z" fill="url(#paint3_linear_0_21)"/>
+<path d="M535.563 521.172C553.071 526.191 570.536 518.856 574.571 504.789C578.606 490.722 567.684 475.251 550.175 470.232C532.666 465.213 515.201 472.548 511.166 486.615C507.131 500.682 518.054 516.153 535.563 521.172Z" fill="url(#paint4_radial_0_21)" style="mix-blend-mode:soft-light"/>
+<path d="M292.782 355.633C308.227 365.286 314.462 383.173 306.709 395.584C298.955 407.995 280.149 410.231 264.704 400.578C249.258 390.924 243.023 373.037 250.777 360.626C258.53 348.215 277.337 345.98 292.782 355.633Z" fill="url(#paint5_linear_0_21)"/>
+<path d="M292.782 355.633C308.227 365.286 314.462 383.173 306.709 395.584C298.955 407.995 280.149 410.231 264.704 400.578C249.258 390.924 243.023 373.037 250.777 360.626C258.53 348.215 277.337 345.98 292.782 355.633Z" fill="url(#paint6_radial_0_21)" style="mix-blend-mode:soft-light"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M502.355 231.325C581.373 266.506 632.095 343.263 634.119 429.03C680.633 465.639 726.858 516.883 705.36 565.168C681.25 619.319 595.382 617.091 497.781 589.689C450.767 615.718 392.444 620.168 339.689 596.68C286.934 573.192 251.229 526.908 239.1 474.517C153.428 420.321 94.3151 357.999 118.425 303.847C139.923 255.562 208.935 255.626 267.265 265.697C332.356 209.81 423.338 196.144 502.355 231.325ZM159.38 322.082C147.667 348.389 210.578 423.052 382.845 499.751C555.111 576.449 652.693 573.241 664.405 546.934C674.099 525.16 634.213 483.308 588.537 450.878C553.009 425.484 504.344 397.494 440.864 369.231C423.586 361.538 416.839 341.008 424.104 324.691C431.369 308.374 447.329 297.463 480.93 295.91C496.747 295.862 498.823 291.476 499.546 287.716C500.442 281.915 492.401 276.002 484.108 272.31C418.17 242.953 337.453 255.265 281.503 314.178C226.84 301.933 169.074 300.309 159.38 322.082Z" fill="url(#paint7_linear_0_21)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M502.355 231.325C581.373 266.506 632.095 343.263 634.119 429.03C680.633 465.639 726.858 516.883 705.36 565.168C681.25 619.319 595.382 617.091 497.781 589.689C450.767 615.718 392.444 620.168 339.689 596.68C286.934 573.192 251.229 526.908 239.1 474.517C153.428 420.321 94.3151 357.999 118.425 303.847C139.923 255.562 208.935 255.626 267.265 265.697C332.356 209.81 423.338 196.144 502.355 231.325ZM159.38 322.082C147.667 348.389 210.578 423.052 382.845 499.751C555.111 576.449 652.693 573.241 664.405 546.934C674.099 525.16 634.213 483.308 588.537 450.878C553.009 425.484 504.344 397.494 440.864 369.231C423.586 361.538 416.839 341.008 424.104 324.691C431.369 308.374 447.329 297.463 480.93 295.91C496.747 295.862 498.823 291.476 499.546 287.716C500.442 281.915 492.401 276.002 484.108 272.31C418.17 242.953 337.453 255.265 281.503 314.178C226.84 301.933 169.074 300.309 159.38 322.082Z" fill="url(#paint8_radial_0_21)" style="mix-blend-mode:soft-light"/>
+<defs>
+<radialGradient id="paint0_radial_0_21" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(814.524 12.36) rotate(125.613) scale(1089.59 1210.34)">
+<stop stop-color="#00D196" stop-opacity="0.5"/>
+<stop offset="0.996771" stop-color="#00D196" stop-opacity="0"/>
+</radialGradient>
+<linearGradient id="paint1_linear_0_21" x1="411.893" y1="212" x2="411.893" y2="612" gradientUnits="userSpaceOnUse">
+<stop stop-color="#00D196"/>
+<stop offset="1" stop-color="#00B381"/>
+</linearGradient>
+<radialGradient id="paint2_radial_0_21" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(644.721 344.481) rotate(159.984) scale(631.37 385.135)">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</radialGradient>
+<linearGradient id="paint3_linear_0_21" x1="411.893" y1="212" x2="411.893" y2="612" gradientUnits="userSpaceOnUse">
+<stop stop-color="#00D196"/>
+<stop offset="1" stop-color="#00B381"/>
+</linearGradient>
+<radialGradient id="paint4_radial_0_21" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(644.721 344.481) rotate(159.984) scale(631.37 385.135)">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</radialGradient>
+<linearGradient id="paint5_linear_0_21" x1="411.893" y1="212" x2="411.893" y2="612" gradientUnits="userSpaceOnUse">
+<stop stop-color="#00D196"/>
+<stop offset="1" stop-color="#00B381"/>
+</linearGradient>
+<radialGradient id="paint6_radial_0_21" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(644.721 344.481) rotate(159.984) scale(631.37 385.135)">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</radialGradient>
+<linearGradient id="paint7_linear_0_21" x1="411.893" y1="212" x2="411.893" y2="612" gradientUnits="userSpaceOnUse">
+<stop stop-color="#00D196"/>
+<stop offset="1" stop-color="#00B381"/>
+</linearGradient>
+<radialGradient id="paint8_radial_0_21" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(644.721 344.481) rotate(159.984) scale(631.37 385.135)">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</radialGradient>
+</defs>
+</svg>
diff --git a/src/components/smart/AutoComplete.vue b/src/components/smart/AutoComplete.vue
index 9316c3c..de02f38 100644
--- a/src/components/smart/AutoComplete.vue
+++ b/src/components/smart/AutoComplete.vue
@@ -3,7 +3,7 @@
     <input
       ref="acInput"
       v-model="text"
-      type="text"
+      :type="type"
       autocomplete="off"
       :placeholder="placeholder"
       :spellcheck="spellcheck"
@@ -29,7 +29,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref, computed } from "vue"
+import { onMounted, ref, computed, watch } from "vue"
 
 const acInput = ref<HTMLInputElement>()
 
@@ -67,6 +67,11 @@ const props = defineProps({
     type: String,
     default: "",
   },
+
+  type: {
+    type: String,
+    default: "text",
+  },
 })
 
 const emit = defineEmits<{
@@ -85,6 +90,13 @@ onMounted(() => {
   })
 })
 
+watch(
+  () => props.value,
+  (newValue) => {
+    text.value = newValue
+  },
+)
+
 const suggestions = computed(() => {
   const input = text.value.substring(0, selectionStart.value)
   return (
@@ -92,7 +104,7 @@ const suggestions = computed(() => {
       .filter(
         (entry) =>
           entry.toLowerCase().startsWith(input.toLowerCase()) &&
-          input.toLowerCase() !== entry.toLowerCase()
+          input.toLowerCase() !== entry.toLowerCase(),
       )
       // We only want the top 10 suggestions.
       .slice(0, 10)
@@ -155,8 +167,8 @@ function handleKeystroke(event: any) {
       if (currentSuggestionIndex.value > -1)
         forceSuggestion(
           suggestions.value.find(
-            (_item, index) => index === currentSuggestionIndex.value
-          )!
+            (_item, index) => index === currentSuggestionIndex.value,
+          )!,
         )
       break
 
@@ -196,7 +208,7 @@ function handleKeystroke(event: any) {
     @apply shadow-lg;
     @apply max-h-46;
     @apply overflow-y-auto;
-    @apply border-b border-x border-divider;
+    @apply border-x border-b border-divider;
 
     top: calc(100% + 1px);
     border-radius: 0 0 8px 8px;
@@ -204,7 +216,7 @@ function handleKeystroke(event: any) {
     li {
       @apply w-full;
       @apply block;
-      @apply py-2 px-4;
+      @apply px-4 py-2;
       @apply text-secondary;
       @apply font-semibold;
 
diff --git a/src/components/smart/FileChip.vue b/src/components/smart/FileChip.vue
index 484ca22..a14319b 100644
--- a/src/components/smart/FileChip.vue
+++ b/src/components/smart/FileChip.vue
@@ -1,6 +1,12 @@
 <template>
-  <span class="inline-flex items-center justify-center rounded pl-2 pr-0.5 bg-primaryDark">
-    <icon-lucide-file class="opacity-75 svg-icons" />
-    <span class="px-2 truncate max-w-54"><slot></slot></span>
+  <span
+    class="inline-flex items-center justify-center space-x-1 rounded bg-primaryDark px-2"
+  >
+    <IconLucideFile class="svg-icons opacity-75" />
+    <span class="max-w-54 truncate"><slot></slot></span>
   </span>
 </template>
+
+<script setup lang="ts">
+import IconLucideFile from "~icons/lucide/file"
+</script>