diff --git a/assets/main.css b/assets/main.css
index f577e664..645a96cd 100644
--- a/assets/main.css
+++ b/assets/main.css
@@ -400,50 +400,48 @@ input:not([type=radio]),
 /* ----- custom dropdwown input ----- */
 /* ---------------------------------- */
 .dropdown-input {
+  position: relative;
+  border: 1px solid #E7E7E7;
+  border-radius: 4px;
+  width: 100%;
+  min-width: 335px;
+  max-width: max-content;
+  cursor: pointer;
   /* Style the dropdown content */
 }
 .dropdown-input .dropbtn {
-  position: relative;
   display: flex;
   align-items: center;
-  border-radius: 4px;
-  width: 100%;
-  max-width: 280px;
   padding: 10px 15px;
-  border: 1px solid #E7E7E7;
-  text-align: start;
   gap: 6px;
+  text-align: start;
   font-size: 14px;
   font-weight: 400;
-  cursor: pointer;
 }
-@media (min-width: 768px) {
-  .dropdown-input .dropbtn {
-    max-width: 350px;
-  }
+.dropdown-input .dropbtn :first-child {
+  margin-inline-end: 20px;
 }
 .dropdown-input .dropbtn .dropdown-icon {
   position: absolute;
-  left: 0;
-  padding-left: 10px;
+  left: 10px;
+}
+[dir=ltr] .dropdown-input .dropbtn .dropdown-icon {
+  left: unset;
+  right: 10px;
 }
 .dropdown-input .dropdown-content {
   display: none;
   margin-top: 5px;
   position: absolute;
+  top: 40px;
+  left: 0;
   z-index: 1;
   width: 100%;
-  max-width: 280px;
   background: #FFFFFF;
   border: 1px solid #ECECEC;
   box-shadow: 0px 10px 55px rgba(0, 0, 0, 0.1);
   border-radius: 4px;
 }
-@media (min-width: 768px) {
-  .dropdown-input .dropdown-content {
-    max-width: 350px;
-  }
-}
 .dropdown-input .dropdown-content li {
   color: black;
   padding: 10px;
@@ -643,6 +641,9 @@ input:not([type=radio]),
   font-size: 14px;
   text-decoration: none;
 }
+[dir=ltr] .breadcrumbs-container .breadcrumbs-listings .listings__item img {
+  rotate: 180deg;
+}
 .breadcrumbs-container .breadcrumbs-name {
   font-weight: 700;
   font-size: 26px;
diff --git a/assets/product-listing.css b/assets/product-listing.css
index d7fe7294..ea1f9e49 100644
--- a/assets/product-listing.css
+++ b/assets/product-listing.css
@@ -101,17 +101,11 @@
 }
 
 .sort-container {
-  margin: 40px auto;
+  margin: 40px 0;
+  max-width: max-content;
 }
-@media (min-width: 768px) {
-  .sort-container #productDropdownFiltring .dropbtn {
-    max-width: 280px;
-  }
-}
-@media (min-width: 768px) {
-  .sort-container #productDropdownFiltring .dropdown-content {
-    max-width: 280px;
-  }
+.sort-container #productDropdownFiltring {
+  min-width: 280px;
 }
 .sort-container #productDropdownFiltring .dropdown-content a {
   color: black;
diff --git a/assets/queries-handler.js b/assets/queries-handler.js
index 73d3b7d5..d20995d7 100644
--- a/assets/queries-handler.js
+++ b/assets/queries-handler.js
@@ -80,7 +80,7 @@ function filterProduct() {
     const selectedOption = filterDropdownContent.querySelector(`[data-value="${sortField}-${sortOrder}"]`);
 
     // Update the dropdown button text with the selected option
-    filterDropdownBtn.innerHTML = `<span class='order-by'>${order_by} : </span> ${selectedOption.textContent}`;
+    filterDropdownBtn.innerHTML = `<span class='order-by'>${order_by} : ${selectedOption.textContent} </span>`;
 
     const icon = document.createElement('ion-icon');
     icon.setAttribute('name', 'chevron-down-outline');
diff --git a/styles/main.scss b/styles/main.scss
index dfe1c9b0..d28557c6 100644
--- a/styles/main.scss
+++ b/styles/main.scss
@@ -26,9 +26,6 @@ body {
   font-family: var(--yc-font-family);
 }
 
-[style*='z-index: 500; height: 54px; width: 100vw; position: fixed; padding: 4px 16px'] {
-  display: none !important;
-}
 .container {
   max-width: 1440px !important;
   margin: 0 auto;
@@ -424,29 +421,35 @@ input:not([type='radio']),
 /* ----- custom dropdwown input ----- */
 /* ---------------------------------- */
 .dropdown-input {
+  position: relative;
+  border: 1px solid #E7E7E7;
+  border-radius: 4px;
+  width: 100%;
+  min-width: 335px;
+  max-width: max-content;
+  cursor: pointer;
+
   .dropbtn {
-    position: relative;
     display: flex;
     align-items: center;
-    border-radius: 4px;
-    width: 100%;
-    max-width: 280px;
     padding: 10px 15px;
-    border: 1px solid #E7E7E7;
-    text-align: start;
     gap: 6px;
+    text-align: start;
     font-size: 14px;
     font-weight: 400;
-    cursor: pointer;
 
-    @include breakpoint('md') {
-      max-width: 350px;
+    :first-child {
+      margin-inline-end: 20px;
     }
 
     .dropdown-icon {
       position: absolute;
-      left: 0;
-      padding-left: 10px;
+      left: 10px;
+
+      [dir='ltr'] & {
+        left: unset;
+        right: 10px;
+      }
     }
   }
 
@@ -455,17 +458,15 @@ input:not([type='radio']),
     display: none;
     margin-top: 5px;
     position: absolute;
+    top: 40px;
+    left: 0;
     z-index: 1;
     width: 100%;
-    max-width: 280px;
     background: #FFFFFF;
     border: 1px solid #ECECEC;
     box-shadow: 0px 10px 55px rgba(0, 0, 0, 0.1);
     border-radius: 4px;
 
-    @include breakpoint('md') {
-      max-width: 350px;
-    }
 
     li {
       color: black;
@@ -689,6 +690,12 @@ input:not([type='radio']),
       font-size: 14px;
       text-decoration: none;
     }
+
+    .listings__item img {
+      [dir='ltr'] & {
+        rotate: 180deg;
+      }
+    }
   }
 
   .breadcrumbs-name {
diff --git a/styles/product-listing.scss b/styles/product-listing.scss
index 7c57d9d9..d50a1a42 100644
--- a/styles/product-listing.scss
+++ b/styles/product-listing.scss
@@ -107,18 +107,13 @@
 }
 
 .sort-container {
-  margin: 40px auto;
+  margin: 40px 0;
+  max-width: max-content;
 
   #productDropdownFiltring {
-    .dropbtn {
-      @include breakpoint('md') {
-        max-width: 280px;
-      }
-    }
+    min-width: 280px;
+
     .dropdown-content {
-      @include breakpoint('md') {
-        max-width: 280px;
-      }
       a {
         color: black;
         padding: 10px;