diff --git a/package-lock.json b/package-lock.json
index 9fe6baf83..f7601ebbf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -39,7 +39,7 @@
         "react-json-view": "^1.21.3",
         "react-redux": "^7.2.8",
         "react-router-dom": "^6.2.2",
-        "react-select": "^5.3.2",
+        "react-select": "^5.4.0",
         "react-tooltip": "^4.2.21",
         "styled-components": "^5.3.5",
         "systeminformation": "^5.12.6",
@@ -28751,9 +28751,9 @@
       }
     },
     "node_modules/react-select": {
-      "version": "5.3.2",
-      "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.3.2.tgz",
-      "integrity": "sha512-W6Irh7U6Ha7p5uQQ2ZnemoCQ8mcfgOtHfw3wuMzG6FAu0P+CYicgofSLOq97BhjMx8jS+h+wwWdCBeVVZ9VqlQ==",
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.4.0.tgz",
+      "integrity": "sha512-CjE9RFLUvChd5SdlfG4vqxZd55AZJRrLrHzkQyTYeHlpOztqcgnyftYAolJ0SGsBev6zAs6qFrjm6KU3eo2hzg==",
       "dependencies": {
         "@babel/runtime": "^7.12.0",
         "@emotion/cache": "^11.4.0",
@@ -56776,9 +56776,9 @@
       }
     },
     "react-select": {
-      "version": "5.3.2",
-      "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.3.2.tgz",
-      "integrity": "sha512-W6Irh7U6Ha7p5uQQ2ZnemoCQ8mcfgOtHfw3wuMzG6FAu0P+CYicgofSLOq97BhjMx8jS+h+wwWdCBeVVZ9VqlQ==",
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.4.0.tgz",
+      "integrity": "sha512-CjE9RFLUvChd5SdlfG4vqxZd55AZJRrLrHzkQyTYeHlpOztqcgnyftYAolJ0SGsBev6zAs6qFrjm6KU3eo2hzg==",
       "requires": {
         "@babel/runtime": "^7.12.0",
         "@emotion/cache": "^11.4.0",
diff --git a/package.json b/package.json
index 6eade2f44..fb40d7b0e 100644
--- a/package.json
+++ b/package.json
@@ -303,7 +303,7 @@
     "react-json-view": "^1.21.3",
     "react-redux": "^7.2.8",
     "react-router-dom": "^6.2.2",
-    "react-select": "^5.3.2",
+    "react-select": "^5.4.0",
     "react-tooltip": "^4.2.21",
     "styled-components": "^5.3.5",
     "systeminformation": "^5.12.6",
diff --git a/src/renderer/Generics/redesign/RedesignContainer.tsx b/src/renderer/Generics/redesign/RedesignContainer.tsx
index 8b95fbbea..8eda344b3 100644
--- a/src/renderer/Generics/redesign/RedesignContainer.tsx
+++ b/src/renderer/Generics/redesign/RedesignContainer.tsx
@@ -16,7 +16,7 @@ const RedesignContainerStoryBook: React.FC = ({ children }) => {
       <div
         id="onBoarding"
         className={isDarkTheme ? darkTheme : lightTheme}
-        style={{ padding: '2em', border: '1px solid black' }}
+        style={{ padding: '2em', border: '1px solid black', minHeight: '80vh' }}
       >
         {children}
       </div>
diff --git a/src/renderer/Generics/redesign/SelectCard/selectCard.css.ts b/src/renderer/Generics/redesign/SelectCard/selectCard.css.ts
index 9d3942ef1..ada0cc91d 100644
--- a/src/renderer/Generics/redesign/SelectCard/selectCard.css.ts
+++ b/src/renderer/Generics/redesign/SelectCard/selectCard.css.ts
@@ -4,22 +4,22 @@ import { vars } from '../theme.css';
 export const container = style({
   margin: 5,
   cursor: 'pointer',
-  width: 400,
+  minWidth: 200,
   display: 'flex',
   flexDirection: 'row',
   alignItems: 'center',
   padding: '10px 12px',
   gap: '12px',
   borderRadius: '5px',
-  boxShadow: "inset 0px 0px 0px 4px rgba(255, 255, 255, 0.08)",
+  boxShadow: vars.components.selectCardBoxShadow,
   background: vars.color.background96,
-  ":hover": { background: vars.color.background92 }
+  ':hover': { background: vars.color.background92 },
 });
 
 export const selectedContainer = style({
-  border: "2px solid #7a64ee",
+  border: '2px solid #7a64ee',
   background: vars.components.selectCardBackground,
-  ":hover": { background: vars.components.selectCardBackground }
+  ':hover': { background: vars.components.selectCardBackground },
 });
 
 export const textContainer = style({
@@ -54,5 +54,5 @@ export const descriptionStyle = style({
 });
 
 export const tagStyle = style({
-  marginLeft: 'auto'
+  marginLeft: 'auto',
 });
diff --git a/src/renderer/Generics/redesign/SpecialSelect/SpecialSelect.tsx b/src/renderer/Generics/redesign/SpecialSelect/SpecialSelect.tsx
new file mode 100644
index 000000000..b7fe7b3e0
--- /dev/null
+++ b/src/renderer/Generics/redesign/SpecialSelect/SpecialSelect.tsx
@@ -0,0 +1,127 @@
+/* eslint-disable react/destructuring-assignment */
+// Options replaceable component docs:
+// https://react-select.com/components#Option
+import Select, { OptionProps, ValueContainerProps } from 'react-select';
+import { NodeIconId } from '../../../assets/images/nodeIcons';
+import SelectCard from '../SelectCard/SelectCard';
+
+const Option = (props: OptionProps) => {
+  return (
+    <div ref={props.innerRef} {...props.innerProps}>
+      <SelectCard {...props.data} />
+    </div>
+  );
+};
+
+const SingleValue = ({ children, ...props }: ValueContainerProps) => {
+  const nething = props.getValue();
+
+  return (
+    <div {...props.innerProps}>
+      <SelectCard {...nething[0]} />
+
+      {/* {`${nething[0]?.label} ${nething[0]?.value}`} */}
+    </div>
+  );
+};
+
+const ecOptions = [
+  {
+    iconId: 'geth',
+    value: 'geth',
+    label: 'Geth',
+    title: 'Geth',
+    info: 'Execution Client',
+    onClick() {
+      console.log('hello');
+    },
+  },
+  {
+    iconId: 'erigon',
+    value: 'erigon',
+    label: 'Erigon',
+    title: 'Erigon',
+    info: 'Execution Client',
+  },
+  {
+    iconId: 'nethermind',
+    value: 'nethermind',
+    label: 'Nethermind',
+    title: 'Nethermind',
+    info: 'Execution Client',
+  },
+  {
+    iconId: 'besu',
+    value: 'besu',
+    label: 'Besu',
+    title: 'Besu',
+    info: 'Execution Client',
+    minority: true,
+    onClick() {
+      console.log('hello');
+    },
+  },
+];
+const options = [
+  { value: 'lodestar', label: 'lodestar', storage: 100, minory: true },
+  { value: 'prysm', label: 'prysm', storage: 1000 },
+  { value: 'teku', label: 'teku', minory: true, storage: 9009 },
+  { value: 'lighthouse', label: 'lighthouse', storage: 1 },
+  { value: 'nimbus', label: 'nimbus', storage: 69 },
+];
+export interface SpecialSelectProps {
+  onChange: (newValue: string) => void;
+}
+
+/**
+ * Use for selecting Ethereum node client
+ */
+const SpecialSelect = ({ onChange, ...props }: SpecialSelectProps) => {
+  return (
+    <>
+      <Select
+        hideSelectedOptions
+        defaultValue={ecOptions[0]}
+        options={ecOptions}
+        isSearchable={false}
+        components={{
+          Option,
+          SingleValue,
+          IndicatorsContainer: () => <></>,
+        }}
+        styles={{
+          control: (base) => ({
+            ...base,
+            backgroundColor: 'inherit',
+            border: 'none',
+            boxShadow: 'none',
+            ':hover': {
+              border: 'none',
+              boxShadow: 'none',
+            },
+          }),
+          menu: (base) => ({
+            ...base,
+            backgroundColor: 'inherit',
+            marginTop: 0,
+            borderTop: 0,
+            boxShadow: '0px 14px 16px rgba(0, 0, 0, 0.14)',
+          }),
+          dropdownIndicator: () => ({
+            display: 'none',
+          }),
+          valueContainer: (base) => ({
+            ...base,
+            padding: 0,
+            // https://github.com/JedWatson/react-select/issues/3995#issuecomment-738470183
+            input: {
+              gridArea: 'auto',
+              height: 0,
+            },
+          }),
+        }}
+      />
+    </>
+  );
+};
+export default SpecialSelect;
diff --git a/src/renderer/Generics/redesign/SpecialSelect/specialSelect.css.ts b/src/renderer/Generics/redesign/SpecialSelect/specialSelect.css.ts
new file mode 100644
index 000000000..8c94116ae
--- /dev/null
+++ b/src/renderer/Generics/redesign/SpecialSelect/specialSelect.css.ts
@@ -0,0 +1,3 @@
+import { style } from '@vanilla-extract/css';
+
+export const base = style({});
diff --git a/src/renderer/Generics/redesign/theme.css.ts b/src/renderer/Generics/redesign/theme.css.ts
index 10bf419f9..2f917eb47 100644
--- a/src/renderer/Generics/redesign/theme.css.ts
+++ b/src/renderer/Generics/redesign/theme.css.ts
@@ -33,6 +33,7 @@ export const [lightTheme, vars] = createTheme({
   components: {
     buttonBoxShadow: '0px 1px 2px rgba(0, 0, 0, 0.08)',
     selectCardBackground: 'rgba(115, 81, 235, 0.08)',
+    selectCardBoxShadow: 'inset 0px 0px 0px 4px rgba(255, 255, 255, 0.08)',
   },
 });
 
@@ -58,5 +59,6 @@ export const darkTheme = createTheme(vars, {
   components: {
     buttonBoxShadow: '0px 1px 2px rgba(0, 0, 0, 0.24)',
     selectCardBackground: 'rgba(130, 103, 239, 0.08)',
+    selectCardBoxShadow: 'none',
   },
 });
diff --git a/src/stories/SpecialSelect.stories.tsx b/src/stories/SpecialSelect.stories.tsx
new file mode 100644
index 000000000..72300a7e2
--- /dev/null
+++ b/src/stories/SpecialSelect.stories.tsx
@@ -0,0 +1,14 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import SpecialSelect from '../renderer/Generics/redesign/SpecialSelect/SpecialSelect';
+
+export default {
+  title: 'Example/SpecialSelect',
+  component: SpecialSelect,
+} as ComponentMeta<typeof SpecialSelect>;
+
+const Template: ComponentStory<typeof SpecialSelect> = (args) => <SpecialSelect {...args} />;
+
+export const Primary = Template.bind({});
+Primary.args = {
+};