diff --git a/src/components/SearchRevamp.js b/src/components/SearchRevamp.js
index 929f293..960e488 100644
--- a/src/components/SearchRevamp.js
+++ b/src/components/SearchRevamp.js
@@ -3,7 +3,6 @@
 import React, { useState } from 'react';
 import type { Node } from 'react';
 import styled from 'styled-components';
-import closeIcon from '../assets/close-icon-revamp.svg';
 import searchIcon from '../assets/search-icon.svg';
 
 const Form = styled.form`
@@ -11,31 +10,30 @@ const Form = styled.form`
   position: relative;
   margin-right: 1px;
 `;
-const SearchInput = styled.input`
-  height: 40px;
-  background-color: #fff;
-  display: block;
-  font-size: 14px;
-  line-height: 22px;
-  color: #2b2c32;
-  line-height: 1.3;
-  padding: 9px 16px 9px 38px;
-  width: 322px;
-  margin: 0;
-  border: 1px solid #a7afc0;
-  border-radius: 8px;
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  appearance: none;
-  outline: none;
-  ::placeholder {
-    color: #6b7384;
-  }
+const SearchInput = styled('input')(({ isDark }) => ({
+  height: '40px',
+  backgroundColor:isDark ? 'transparent': '#fff',
+  display: 'block',
+  fontSize: '14px',
+  lineHeight: '1.3',  // Adjusted to match the duplicate property
+  color:isDark ? '#E1E6F5' :  '#2b2c32',
+  padding: '9px 16px 9px 38px',
+  width: '322px',
+  margin: 0,
+  border: '1px solid #a7afc0',
+  borderRadius: '8px',
+  MozAppearance: 'none',
+  WebkitAppearance: 'none',
+  appearance: 'none',
+  outline: 'none',
+  '::placeholder': {
+    color: '#6b7384',
+  },
+  ':focus': {
+    outline: '1px solid #242838',
+  },
+}));
 
-  :focus {
-    outline: 1px solid #242838;
-  }
-`;
 const SearchBtn = styled.button`
   position: absolute;
   top: 50%;
@@ -51,26 +49,32 @@ const SearchBtn = styled.button`
   cursor: pointer;
 `;
 
-const ClearBtn = styled.button`
-  position: absolute;
-  top: 50%;
-  right: 0px;
-  transform: translateY(-50%);
-  padding: 0px 8px;
-  background: transparent;
-  outline: none;
-  border: none;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-`;
+const ClearBtn = styled('div')(() => ({
+  position: 'absolute',
+  top: '50%',
+  right: '0px',
+  transform: 'translateY(-50%)',
+  padding: '0px 8px',
+  background: 'transparent',
+  outline: 'none',
+  border: 'none',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  cursor: 'pointer',
+  '& svg': {
+    '& path': {
+      fill: '#7C85A3',
+    },
+  },
+}));
 
 type Props = {|
   filter: Function,
+  isDark?: boolean,
 |};
 
-const SearchRevamp = ({ filter }: Props): Node => {
+const SearchRevamp = ({ filter,isDark }: Props): Node => {
   const [prevSearch, setPrevSearch] = useState('');
   const [searchValue, setSearchValue] = useState('');
 
@@ -98,6 +102,7 @@ const SearchRevamp = ({ filter }: Props): Node => {
         onChange={handleSearchInputChanges}
         placeholder="Search stake pool"
         type="text"
+        isDark={isDark}
       />
       {searchValue.length > 0 &&   
       <ClearBtn
@@ -106,7 +111,9 @@ const SearchRevamp = ({ filter }: Props): Node => {
           callSearchFunction(e);
         }}
       >
-        <img src={closeIcon} alt="Clear Input" />
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M19.7071 5.70711C20.0976 5.31658 20.0976 4.68342 19.7071 4.29289C19.3166 3.90237 18.6834 3.90237 18.2929 4.29289L12 10.5858L5.70711 4.29289C5.31658 3.90237 4.68342 3.90237 4.29289 4.29289C3.90237 4.68342 3.90237 5.31658 4.29289 5.70711L10.5858 12L4.29289 18.2929C3.90237 18.6834 3.90237 19.3166 4.29289 19.7071C4.68342 20.0976 5.31658 20.0976 5.70711 19.7071L12 13.4142L18.2929 19.7071C18.6834 20.0976 19.3166 20.0976 19.7071 19.7071C20.0976 19.3166 20.0976 18.6834 19.7071 18.2929L13.4142 12L19.7071 5.70711Z" fill="black" />
+        </svg>
       </ClearBtn>
       }
     
diff --git a/src/components/SortSelect.js b/src/components/SortSelect.js
index 3133a1f..5251cb7 100644
--- a/src/components/SortSelect.js
+++ b/src/components/SortSelect.js
@@ -20,31 +20,31 @@ const WrapperSelectInput = styled.div`
   }
 `;
 
-const SelectInput = styled.select`
-  height: 40px;
-  display: block;
-  font-size: 14px;
-  line-height: 22px;
-  color: #2b2c32;
-  line-height: 1.3;
-  padding: 0.6em 1.4em 0.5em 0.8em;
-  width: 322px;
-  margin: 0;
-  border: none;
-  border-radius: 8px;
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  appearance: none;
-  background-color: #f0f3f5;
-  background-image: url(${arrowDownIcon});
-  background-repeat: no-repeat, repeat;
-  background-position: right 0.7em top 50%, 0 0;
-  background-size: 24px auto, 100%;
-`;
+const SelectInput = styled('select')(({ isDark }) => ({
+  height: '40px',
+  display: 'block',
+  fontSize: '14px',
+  lineHeight: '1.3', // Adjusted to match the duplicate property
+  color:isDark ? '#7C85A3' :'#2b2c32',
+  padding: '0.6em 1.4em 0.5em 0.8em',
+  width: '322px',
+  margin: 0,
+  border:isDark ? '1px solid #a7afc0' : 'none',
+  borderRadius: '8px',
+  MozAppearance: 'none',
+  WebkitAppearance: 'none',
+  appearance: 'none',
+  backgroundColor: isDark ? 'transparent' : '#f0f3f5',
+  backgroundImage: `url(${arrowDownIcon})`,
+  backgroundRepeat: 'no-repeat, repeat',
+  backgroundPosition: 'right 0.7em top 50%, 0 0',
+  backgroundSize: '24px auto, 100%',
+}));
 
 type Props = {|
   filter: Function,
   isRevamp?: boolean,
+  isDark?: boolean,
 |};
 
 export const sortingSelectData = [
@@ -63,7 +63,7 @@ export const sortingSelectDataRevamp = [
   { label: 'Blocks', value: Sorting.BLOCKS },
 ];
 
-function SortSelect({ filter, isRevamp = true }: Props): React$Node {
+function SortSelect({ filter, isRevamp = true, isDark }: Props): React$Node {
   const [selectValue, setSelectValue] = React.useState<SortingEnum>('score');
 
   const handleChange = (e) => {
@@ -74,7 +74,7 @@ function SortSelect({ filter, isRevamp = true }: Props): React$Node {
   return (
     <WrapperSelectInput>
       <label htmlFor="sort">Sort by:</label>
-      <SelectInput name="" id="sort" value={selectValue} onChange={handleChange}>
+      <SelectInput name="" id="sort" value={selectValue} onChange={handleChange} isDark={isDark}>
         {(isRevamp ? sortingSelectDataRevamp : sortingSelectData).map(({ value, label }) => (
           <option key={value} value={value}>
             {label}
diff --git a/src/containers/HomeRevamp.js b/src/containers/HomeRevamp.js
index 096d9b5..c30c2d1 100644
--- a/src/containers/HomeRevamp.js
+++ b/src/containers/HomeRevamp.js
@@ -280,9 +280,9 @@ function Home(props: HomeProps): Node {
         <Title>Stake pools ({status === 'resolved' ? filteredPools?.length : '...'})</Title>
         <Alert title={alertText} />
         <Header>
-          <SearchRevamp filter={filterSearch} />
+          <SearchRevamp filter={filterSearch} isDark={isDark} />
           <MobileOnly>
-            <SortSelect filter={filterSelect} />
+            <SortSelect filter={filterSelect} isDark={isDark} />
           </MobileOnly>
           {/* <ColorButton type="button" onClick={() => setOpenModal(true)}> */}
           {/*  Colors meaning */}