diff --git a/src/assets/market/arrow-down.png b/src/assets/market/arrow-down.png
new file mode 100644
index 0000000..5b2b5dd
Binary files /dev/null and b/src/assets/market/arrow-down.png differ
diff --git a/src/components/market/Pagination.vue b/src/components/market/Pagination.vue
index 46f4d79..2eb7173 100644
--- a/src/components/market/Pagination.vue
+++ b/src/components/market/Pagination.vue
@@ -3,7 +3,7 @@
     <div class="paginationWrapper">
       <button type="button" class="pageItem">
         <img
-          src="data:image/svg+xml,%3csvg width='8' height='14' viewBox='0 0 8 14' fill='white' xmlns='http://www.w3.org/2000/svg'%3e %3cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.33337 13.4001L0.933375 7.0001L7.33337 0.600098' /%3e %3c/svg%3e"
+          src="data:image/svg+xml,%3csvg width='36' height='36' viewBox='0 0 8 14' fill='%2346E0F4' xmlns='http://www.w3.org/2000/svg'%3e %3cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.33337 13.4001L0.933375 7.0001L7.33337 0.600098' /%3e %3c/svg%3e"
         />
       </button>
       <div class="center">
@@ -16,7 +16,7 @@
       </div>
       <button type="button" class="pageItem">
         <img
-          src="data:image/svg+xml,%3csvg width='8' height='14' viewBox='0 0 8 14' fill='white' xmlns='http://www.w3.org/2000/svg'%3e %3cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.33337 13.4001L0.933375 7.0001L7.33337 0.600098' /%3e %3c/svg%3e"
+          src="data:image/svg+xml,%3csvg width='36' height='36' viewBox='0 0 8 14' fill='%2346E0F4' xmlns='http://www.w3.org/2000/svg'%3e %3cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.33337 13.4001L0.933375 7.0001L7.33337 0.600098' /%3e %3c/svg%3e"
           class="icNext"
         />
       </button>
@@ -71,7 +71,7 @@ export default class extends Vue {}
   /* Chrome, Safari, Edge, Opera */
   /* Firefox */
   color: #ffffff;
-  border: 1px solid #44197a;
+  border: 1px solid #46E0F4;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   display: -webkit-box;
@@ -134,7 +134,7 @@ export default class extends Vue {}
   height: 32px;
   min-width: 32px;
   border-radius: 5px;
-  background-color: #3b2885;
+  background-color: unset;
   font-weight: bolder;
   font-size: 14px;
   line-height: 22px;
@@ -142,7 +142,6 @@ export default class extends Vue {}
 }
 
 .pageItem:hover {
-  background-color: #44197a;
 }
 
 .pageItem:focus {
@@ -150,7 +149,7 @@ export default class extends Vue {}
 }
 
 .active {
-  background-color: #a346ec;
+  background-color: #46E0F4;
 }
 
 .icNext {
diff --git a/src/components/market/SearchPanel.vue b/src/components/market/SearchPanel.vue
index 02bfe43..25c42be 100644
--- a/src/components/market/SearchPanel.vue
+++ b/src/components/market/SearchPanel.vue
@@ -29,7 +29,7 @@
 import { Component, Prop, Vue } from 'vue-property-decorator'
 import FilterItem from '@/components/market/filters/FilterItem.vue'
 import SelectSection from '@/components/market/filters/SelectSection.vue'
-import RangeSlider, { ISliderCfg } from '@/components/market/RangeSlider.vue'
+import RangeSlider, { ISliderCfg } from '@/components/market/filters/RangeSlider.vue'
 import CheckList, { ICheckData } from '@/components/market/filters/CheckList.vue'
 import SliderSection from '@/components/market/filters/SliderSection.vue'
 import RangeInput from '@/components/market/filters/RangeSection.vue'
@@ -312,7 +312,7 @@ export default class extends Vue {
       display: flex;
       flex-direction: row;
       padding: 0.75em 0;
-      border-bottom: 1px solid #5b3dcb;
+      border-bottom: 1px solid #51529D;
       width: 100%;
       .label{
         display: flex;
@@ -327,7 +327,7 @@ export default class extends Vue {
         outline: none;
         font-weight: bold;
         font-size: 0.875em;
-        color: #a346ec;
+        color: #46E0F4;
         cursor: pointer;
       }
     }
diff --git a/src/components/market/SortSelect.vue b/src/components/market/SortSelect.vue
index 74f39ad..77cd501 100644
--- a/src/components/market/SortSelect.vue
+++ b/src/components/market/SortSelect.vue
@@ -5,8 +5,9 @@
       <img
         draggable="false"
         :class="{'iconUp': dropShow}"
-        src="data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3crect width='24' height='24' rx='5' fill='%23A346EC' /%3e %3cpath fill-rule='evenodd' clip-rule='evenodd' d='M16.8001 9.59985L12.0001 14.3999L7.20013 9.59985' fill='white' /%3e %3c/svg%3e"
+        src='@/assets/market/arrow-down.png'
         @click = "dropShow=!dropShow"
+        alt="arrow down"
       />
     </div>
     <div class="dropdown" :class="{'hide': !dropShow}" >
@@ -56,8 +57,12 @@ export default class extends Vue {
   box-sizing: border-box;
   width: 14.5em;
   padding: 1em 1.5em;
-  background-color: #261858;
+  background-color: #36275B;
   border-radius: 0.375em;
+  img{
+    width: 18px;
+    height: 18px;
+  }
 }
 
 .sort-select .iconUp {
@@ -109,9 +114,8 @@ export default class extends Vue {
   opacity: 1;
   overflow: hidden;
   max-height: 37.5em;
-  background-color: #261858;
+  background-color: #36275B;
   border-radius: 0.25em;
-  padding: 0.75em 0;
   width: 14.5em;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
@@ -125,10 +129,13 @@ export default class extends Vue {
   font-weight: lighter;
   font-size: 1.125em;
   color: white;
+  &:not(:last-child) {
+    border-bottom: 1px solid #5D58B2;
+  }
 }
 
 .dropdown .item:hover {
-  color: #a346ec;
+  color: #46E0F4;
 }
 
 .dropdown.hide {
diff --git a/src/components/market/filters/CheckList.vue b/src/components/market/filters/CheckList.vue
index 4a08372..0a9fe69 100644
--- a/src/components/market/filters/CheckList.vue
+++ b/src/components/market/filters/CheckList.vue
@@ -69,7 +69,7 @@ export default class CheckList extends Vue {
   display: flex;
   flex-direction: column;
   padding: 1em 0;
-  border-bottom: 1px solid #5b3dcb;
+  border-bottom: 1px solid #51529D;
   .header{
     display: flex;
     flex-direction: row;
@@ -79,7 +79,7 @@ export default class CheckList extends Vue {
       flex: 1;
       font-weight: bold;
       font-size: 0.875em;
-      color: rgba(188, 173, 242, 1);
+      color: #928EAE;
     }
     .arrow {
       display: flex;
diff --git a/src/components/market/filters/FilterItem.vue b/src/components/market/filters/FilterItem.vue
index 37d6f1c..ffadb92 100644
--- a/src/components/market/filters/FilterItem.vue
+++ b/src/components/market/filters/FilterItem.vue
@@ -51,8 +51,8 @@ export default class FilterItem extends Vue {
     display: flex;
     width: 1.5em;
     height: 1.5em;
-    background-color: #5b39bc;
-    border: 0.0625em solid #5b39bc;
+    background-color: #46E0F4;
+    border: 0.0625em solid #46E0F4;
     border-radius: 0.25em;
     justify-content: center;
     align-items: center;
diff --git a/src/components/market/filters/RangeSection.vue b/src/components/market/filters/RangeSection.vue
index dfb8c0b..f1f18e1 100644
--- a/src/components/market/filters/RangeSection.vue
+++ b/src/components/market/filters/RangeSection.vue
@@ -39,7 +39,7 @@ export default class RangeInput extends Vue {
   display: flex;
   flex-direction: column;
   padding: 1em 0;
-  border-bottom: 1px solid #5b3dcb;
+  border-bottom: 1px solid #51529D;
   &.no-bottom-line {
     border-bottom: none!important;
   }
@@ -52,7 +52,7 @@ export default class RangeInput extends Vue {
       flex: 1;
       font-weight: bold;
       font-size: 0.875em;
-      color: rgba(188, 173, 242, 1);
+      color: #928EAE;
     }
     .arrow{
       display: flex;
@@ -88,7 +88,7 @@ export default class RangeInput extends Vue {
     }
     .input {
       padding: 0.5em;
-      border: 0.0625em solid #5b39bc;
+      border: 0.0625em solid #51529D;
       box-sizing: border-box;
       border-radius: 0.25em;
       font-size: inherit;
diff --git a/src/components/market/RangeSlider.vue b/src/components/market/filters/RangeSlider.vue
similarity index 88%
rename from src/components/market/RangeSlider.vue
rename to src/components/market/filters/RangeSlider.vue
index 2ea7fad..eda835d 100644
--- a/src/components/market/RangeSlider.vue
+++ b/src/components/market/filters/RangeSlider.vue
@@ -50,16 +50,16 @@ export default class RangeSlider extends Vue {
   height: 62px;
   margin-top: -20px;
   .el-slider__runway{
-    background-color: #382873;
+    background-color: #161C48;
     .el-slider__bar{
-      background-color: #5b39bc;
+      background-color: #46E0F4;
     }
     .el-slider__stop{
-      background-color: #5b39bc;
+      background-color: #46E0F4;
     }
     .el-slider__button-wrapper{
       .el-slider__button{
-        background-color: #5b39bc;
+        background-color: #46E0F4;
         border: none;
       }
     }
diff --git a/src/components/market/filters/SliderSection.vue b/src/components/market/filters/SliderSection.vue
index 989fc21..de0203c 100644
--- a/src/components/market/filters/SliderSection.vue
+++ b/src/components/market/filters/SliderSection.vue
@@ -23,7 +23,7 @@
 </template>
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator'
-import RangeSlider, { ISliderCfg } from '@/components/market/RangeSlider.vue'
+import RangeSlider, { ISliderCfg } from '@/components/market/filters/RangeSlider.vue'
 
 @Component({
   name: 'SliderSection',
@@ -44,7 +44,7 @@ export default class SliderSection extends Vue {
   display: flex;
   flex-direction: column;
   padding: 1em 0;
-  border-bottom: 1px solid #5b3dcb;
+  border-bottom: 1px solid #51529D;
   &.no-bottom-line {
     border-bottom: none!important;
   }
@@ -57,7 +57,7 @@ export default class SliderSection extends Vue {
       flex: 1;
       font-weight: bold;
       font-size: 0.875em;
-      color: rgba(188, 173, 242, 1);
+      color: #928EAE;
     }
     .arrow{
       display: flex;