diff --git a/docs/components/text-inputs.md b/docs/components/text-inputs.md
index 3ad64071f..7253fe344 100644
--- a/docs/components/text-inputs.md
+++ b/docs/components/text-inputs.md
@@ -50,3 +50,52 @@ const inputText = ref(null)
   </Button>
 </div>
 ```
+
+<DemoContainer>
+<div class="dropdown-input">
+  <DropdownSelect
+    v-model="value"
+    :options="['Daily', 'Weekly', 'Monthly', 'Tomorrow', 'Yesterday', 'Today', 'Biweekly', 'Tuesday', 'January']"
+    placeholder="Choose Frequency"
+  />
+  <div class="iconified-input">
+    <SearchIcon/>
+    <input
+        v-model="inputText"
+        type="text"
+        placeholder="Text input"
+    />
+    <Button @click="() => inputText = ''">
+      <XIcon/>
+    </Button>
+  </div>
+</div>
+</DemoContainer>
+
+```vue
+<script setup>
+import { ref } from "vue";
+const inputText = ref(null)
+const value = ref(null)
+</script>
+
+<div class="dropdown-input">
+  <DropdownSelect
+    v-model="value"
+    :options="['Daily', 'Weekly', 'Monthly', 'Tomorrow', 'Yesterday', 'Today', 'Biweekly', 'Tuesday', 'January']"
+    placeholder="Choose Frequency"
+  />
+  <div class="iconified-input">
+    <SearchIcon/>
+    <input
+      v-model="inputText"
+      type="text"
+      placeholder="Text input"
+    />
+    <Button @click="() => inputText = ''">
+      <XIcon/>
+    </Button>
+  </div>
+</div>
+```
+
diff --git a/lib/assets/styles/defaults.scss b/lib/assets/styles/defaults.scss
index 036cef20d..39864069f 100644
--- a/lib/assets/styles/defaults.scss
+++ b/lib/assets/styles/defaults.scss
@@ -93,6 +93,31 @@ input[type='number'] {
   }
 }
 
+.dropdown-input {
+  display: flex;
+  flex-direction: row;
+  gap: 1px;
+  .animated-dropdown {
+    width: unset;
+
+    .selected {
+      border-radius: var(--radius-md) 0 0 var(--radius-md);
+
+      &.render-down {
+        border-radius: var(--radius-md) 0 0 0;
+      }
+
+      &.render-up {
+        border-radius: 0 0 0 var(--radius-md);
+      }
+    }
+  }
+
+  input {
+    border-radius: 0 var(--radius-md) var(--radius-md) 0;
+  }
+}
+
 .iconified-input {
   align-items: center;
   display: inline-flex;
diff --git a/lib/components/base/DropdownSelect.vue b/lib/components/base/DropdownSelect.vue
index e3c203323..138a82b78 100644
--- a/lib/components/base/DropdownSelect.vue
+++ b/lib/components/base/DropdownSelect.vue
@@ -23,7 +23,7 @@
       @click="toggleDropdown"
     >
       <span>{{ selectedOption }}</span>
-      <i class="arrow" :class="{ rotate: dropdownVisible }"></i>
+      <DropdownIcon class="arrow" :class="{ rotate: dropdownVisible }" />
     </div>
     <div class="options-wrapper" :class="{ down: !renderUp, up: renderUp }">
       <transition name="options">
@@ -61,6 +61,7 @@
 </template>
 
 <script setup>
+import { DropdownIcon } from '@/components'
 import { computed, ref, watch } from 'vue'
 
 const props = defineProps({
@@ -203,6 +204,7 @@ const isChildOfDropdown = (element) => {
     justify-content: space-between;
     padding: var(--gap-sm) var(--gap-lg);
     background-color: var(--color-button-bg);
+    gap: var(--gap-md);
     cursor: pointer;
     user-select: none;
     border-radius: var(--radius-md);
@@ -229,13 +231,6 @@ const isChildOfDropdown = (element) => {
     }
 
     .arrow {
-      display: inline-block;
-      width: 0;
-      height: 0;
-      margin-left: 0.4rem;
-      border-left: 0.4rem solid transparent;
-      border-right: 0.4rem solid transparent;
-      border-top: 0.4rem solid var(--color-base);
       transition: transform 0.2s ease;
       &.rotate {
         transform: rotate(180deg);
diff --git a/package.json b/package.json
index f415da073..734150446 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "omorphia",
   "type": "module",
-  "version": "0.4.32",
+  "version": "0.4.33",
   "files": [
     "dist",
     "lib"