diff --git a/components/Element.vue b/components/Element.vue
index f0b925b..49d6cb6 100644
--- a/components/Element.vue
+++ b/components/Element.vue
@@ -77,16 +77,16 @@ export default {
       const selectedTemperatureType = this.$store.state.selectedTemperatureType
       const temperature = this.$store.state.temperature
 
-      if (isTemperatureTriggered && this.element.number) {
-        let ref
-        if (selectedTemperatureType === 'c') {
-          ref = temperature + 273.15
-        } else if (selectedTemperatureType === 'f') {
-          ref = (temperature + 459.67) * 1.8
-        } else {
-          ref = temperature
-        }
+      let ref
+      if (selectedTemperatureType === 'c') {
+        ref = temperature + 273.15
+      } else if (selectedTemperatureType === 'f') {
+        ref = (temperature + 459.67) * 1.8
+      } else {
+        ref = temperature
+      }
 
+      if (isTemperatureTriggered && this.element.number) {
         if (this.element.boil_use === '' && this.element.melt_use === '') {
           return 'element-searched orange'
         }
@@ -104,7 +104,29 @@ export default {
           return 'element-searched purple'
         }
       }
-      if (this.isFoundOnSearch || this.element.block === this.selectedBlock || this.selectedCategory === this.element.type || this.$store.getters.probableElements.includes(this.element.symbol)) {
+
+      const selectedStateOfMatter = this.$store.state.selectedStateOfMatter
+      let isFilteredState = false
+      if (selectedStateOfMatter) {
+        let state = 'solid'
+        if (this.element.boil_use === '' && this.element.melt_use === '') {
+          state = 'unknown'
+        } else if (ref >= this.element.boil_use) {
+          state = 'gas'
+        } else if (ref >= this.element.melt_use) {
+          state = 'liquid'
+        }
+
+        isFilteredState = state === selectedStateOfMatter
+      }
+
+      if (
+        this.isFoundOnSearch ||
+        isFilteredState ||
+        this.element.block === this.selectedBlock ||
+        this.selectedCategory === this.element.type ||
+        this.$store.getters.probableElements.includes(this.element.symbol)
+      ) {
         return `element-searched ${this.element.searchClass}`
       } else if (this.isFoundOnSearch === false) {
         return 'search-not-found'
diff --git a/components/Slider.vue b/components/Slider.vue
index 335c153..c3d6b7a 100644
--- a/components/Slider.vue
+++ b/components/Slider.vue
@@ -14,26 +14,26 @@
       </div>
     </client-only>
     <div class="slider-box-wrapper">
-      <div>
-        <div class="slider-box purple">
+      <div @click="stateFilter('solid')">
+        <div class="slider-box purple" name="solid" :class="{ gray: filterState('solid') }">
           <img width="18" height="16" src="~/assets/icons/solid.svg" />
         </div>
         <div class="title">Katı</div>
       </div>
-      <div style="margin-left: 30px">
-        <div class="slider-box blue">
+      <div style="margin-left: 30px" @click="stateFilter('liquid')">
+        <div class="slider-box blue" name="liquid" :class="{ gray: filterState('liquid') }">
           <img width="20" height="19" src="~/assets/icons/liquid.svg" />
         </div>
         <div class="title">Sıvı</div>
       </div>
-      <div style="margin-left: 30px">
-        <div class="slider-box teal">
+      <div style="margin-left: 30px" @click="stateFilter('gas')">
+        <div class="slider-box teal" name="gas" :class="{ gray: filterState('gas') }">
           <img width="20" height="16" src="~/assets/icons/gas.svg" />
         </div>
         <div class="title">Gaz</div>
       </div>
-      <div style="margin-left: 30px">
-        <div class="slider-box orange">
+      <div style="margin-left: 30px" @click="stateFilter('unknown')">
+        <div class="slider-box orange" name="unkown" :class="{ gray: filterState('unknown') }">
           <img width="13" height="20" src="~/assets/icons/undefined.svg" />
         </div>
         <div class="title">Belirsiz</div>
@@ -71,6 +71,11 @@ export default {
         return -459
       }
     },
+    filterState() {
+      return (state) => {
+        return this.$store.state.selectedStateOfMatter !== state && this.$store.state.selectedStateOfMatter !== null
+      }
+    },
   },
   watch: {
     temperature() {
@@ -121,6 +126,12 @@ export default {
     triggerTimer() {
       this.$store.commit('DEACTIVATE_TEMPERATURE')
     },
+    stateFilter(type) {
+      if (type === this.$store.state.selectedStateOfMatter) {
+        type = null
+      }
+      this.$store.commit('SET_STATE_OF_MATTER', type)
+    },
   },
 }
 </script>
@@ -174,6 +185,7 @@ export default {
   margin-top: 23px;
   text-align: center;
   .slider-box {
+    cursor: pointer;
     width: 2.3vw;
     height: 2.3vw;
     border-radius: 4px;
@@ -199,6 +211,10 @@ export default {
     box-shadow: 0 2px 40px 0 rgba(255, 175, 128, 0.4);
     background-image: linear-gradient(135deg, #ffaf80, #ed954b 100%);
   }
+  .gray {
+    box-shadow: 0 2px 40px 0 rgba(55, 55, 55, 0.4) !important;
+    background-image: linear-gradient(135deg, #3a3a3a, #38322d 100%) !important;
+  }
   .title {
     font-size: 10px;
     color: $gray;
diff --git a/store/mutations.js b/store/mutations.js
index d157477..b55877a 100644
--- a/store/mutations.js
+++ b/store/mutations.js
@@ -42,4 +42,7 @@ export default {
   SET_IS_ORIENTED(state, isOriented) {
     state.isOriented = isOriented
   },
+  SET_STATE_OF_MATTER(state, stateOfMatter) {
+    state.selectedStateOfMatter = stateOfMatter
+  },
 }
diff --git a/store/state.js b/store/state.js
index 9c3251a..f2a0d94 100644
--- a/store/state.js
+++ b/store/state.js
@@ -14,4 +14,5 @@ export default () => ({
   searchText: null,
   isMobile: false,
   isOriented: false,
+  selectedStateOfMatter: null,
 })