diff --git a/src/components/Dropdown/styles.module.scss b/src/components/Dropdown/styles.module.scss
index 3ffb5b508e..7c7d10c2d0 100644
--- a/src/components/Dropdown/styles.module.scss
+++ b/src/components/Dropdown/styles.module.scss
@@ -20,6 +20,10 @@
   width: 100%;
   height: 100%;
   cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  padding: 0 var(--spacing-xs);
   @media (hover: hover) and (pointer: fine) {
     &:hover {
       border: 1px solid var(--accent-color);
@@ -27,6 +31,15 @@
       color: var(--accent-color);
     }
   }
+
+  .iconTop,
+  .chevron {
+    position: static;
+  }
+
+  .chevron {
+    margin-left: auto;
+  }
 }
 
 .options {
@@ -37,17 +50,23 @@
 }
 
 .option {
-  padding-left: 0;
-  padding: 7px 0;
   cursor: pointer;
-  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  padding: var(--spacing-xs);
+
+  .icon {
+    position: static;
+  }
 
   button {
-    width: 100%;
-    height: 100%;
+    flex: 1;
+    text-align: left;
     background: none;
     border: none;
     cursor: pointer;
+    padding: 0;
   }
 }
 
@@ -117,9 +136,6 @@ button.chevron {
 .selected > span,
 .option > button > span {
   text-align: left;
-  padding-left: 44px;
-  // 38px padding-right holds the chevron icon on mobile for better touch targets
-  padding-right: 38px;
   display: inline-block;
   width: 100%;
   // 0.75rem font-size for mobile to fit content in smaller screens
@@ -127,6 +143,13 @@ button.chevron {
 
   @media (min-width: variables.$breakpoint-tablet) {
     font-size: 1rem;
-    padding-right: 10px;
   }
 }
+
+.selected > span {
+  flex: 1;
+}
+
+.option > button > span {
+  padding-right: var(--spacing-sm);
+}