diff --git a/src/styles/components/header.css b/src/styles/components/header.css
index 38e3511..9eb1523 100644
--- a/src/styles/components/header.css
+++ b/src/styles/components/header.css
@@ -59,7 +59,7 @@ header {
     .select {
       &,
       button {
-        @apply w-full text-center grid grid-cols-select xs:flex xs:w-[100px];
+        @apply w-full text-center grid grid-cols-select xs:flex xs:min-w-[90px] sm:min-w-[100px] transition-sizing;
         .mobile-text {
           @apply inline-block mr-1 text-gray-500 xs:hidden dark:text-gray-300;
         }
diff --git a/src/styles/components/select.css b/src/styles/components/select.css
index ac81f69..09eb829 100644
--- a/src/styles/components/select.css
+++ b/src/styles/components/select.css
@@ -4,7 +4,7 @@
     @apply font-normal text-gray-600 dark:text-gray-50;
   }
   & > button {
-    @apply flex w-[100px] items-center justify-between gap-3 rounded border border-gray-300  bg-gray-50 shadow-light dark:border-gray-600 dark:bg-opacity-5 dark:text-white dark:shadow-dark px-2 py-1;
+    @apply flex w-full items-center justify-between gap-3 rounded border border-gray-300  bg-gray-50 shadow-light dark:border-gray-600 dark:bg-opacity-5 dark:text-white dark:shadow-dark px-2 py-1;
     &[data-hovered],
     &[data-focused] {
       @apply border-gray-500 bg-gray-50  dark:border-gray-300 dark:bg-opacity-5 outline-0;