diff --git a/assets/locales/en/translation.json b/assets/locales/en/translation.json
index b73fad642..66515a1e0 100644
--- a/assets/locales/en/translation.json
+++ b/assets/locales/en/translation.json
@@ -1,4 +1,6 @@
 {
+  "AddYourFirstNode": "Add your first node",
+  "AddYourFirstNodeDescription" : "Node requirements and settings come next. Also, you can add more nodes later!",
   "Add Node": "Add Node",
   "Remove Node": "Remove Node",
   "Install Docker": "Install Docker",
@@ -40,5 +42,6 @@
   "dockerInstallingMessage": "Installing... (this may take 5 or more minutes). There will be a password prompt on Mac and a pop-up on Windows to give permissions to install Docker.",
   "EthereumNode": "Ethereum Node",
   "LearnMoreClientDiversity": "Learn more about client diversity",
-  "AddEthereumNodeDescription" : "Running a full etherum node is a two part story. Choosing minority clients are important for the health of the network."
+  "AddEthereumNodeDescription" : "Running a full etherum node is a two part story. Choosing minority clients are important for the health of the network.",
+  "ChooseYourNetwork" : "Choose your network"
 }
diff --git a/src/renderer/Generics/redesign/SelectCard/selectCard.css.ts b/src/renderer/Generics/redesign/SelectCard/selectCard.css.ts
index ada0cc91d..34c8c14e9 100644
--- a/src/renderer/Generics/redesign/SelectCard/selectCard.css.ts
+++ b/src/renderer/Generics/redesign/SelectCard/selectCard.css.ts
@@ -28,11 +28,10 @@ export const textContainer = style({
   alignItems: 'flex-start',
   padding: '0px',
   gap: '2px',
-  height: '100%',
+  minHeight: '100%',
   justifyContent: 'center',
-  flex: 'none',
   order: 0,
-  flexGrow: 0,
+  flexGrow: 1,
 });
 
 export const titleStyle = style({
diff --git a/src/renderer/Generics/redesign/SpecialSelect/SpecialSelect.tsx b/src/renderer/Generics/redesign/SpecialSelect/SpecialSelect.tsx
index c3d6c953c..a7dede9fd 100644
--- a/src/renderer/Generics/redesign/SpecialSelect/SpecialSelect.tsx
+++ b/src/renderer/Generics/redesign/SpecialSelect/SpecialSelect.tsx
@@ -70,19 +70,20 @@ const ecOptions = [
 //   { value: 'nimbus', label: 'nimbus', storage: 69 },
 // ];
 export interface SpecialSelectProps {
+  options?: any[];
   onChange?: (newValue: string) => void;
 }
 
 /**
  * Use for selecting Ethereum node client
  */
-const SpecialSelect = ({ onChange, ...props }: SpecialSelectProps) => {
+const SpecialSelect = ({ options, onChange, ...props }: SpecialSelectProps) => {
   return (
     <>
       <Select
         hideSelectedOptions
-        defaultValue={ecOptions[0]}
-        options={ecOptions}
+        defaultValue={options ? options[0] : ecOptions[0]}
+        options={options || ecOptions}
         isSearchable={false}
         components={{
           Option,
diff --git a/src/renderer/Presentational/AddNode/AddNode.tsx b/src/renderer/Presentational/AddNode/AddNode.tsx
new file mode 100644
index 000000000..57ffb051a
--- /dev/null
+++ b/src/renderer/Presentational/AddNode/AddNode.tsx
@@ -0,0 +1,45 @@
+import { useTranslation } from 'react-i18next';
+
+import {
+  container,
+  descriptionFont,
+  sectionFont,
+  titleFont,
+} from './addNode.css';
+import SpecialSelect from '../../Generics/redesign/SpecialSelect/SpecialSelect';
+
+export interface AddNodeProps {
+  /**
+   * Listen to node config changes
+   */
+  onChange: (newValue: string) => void;
+}
+
+const networksOptions = [
+  {
+    value: 'ethereum',
+    iconId: 'ethereum',
+    title: 'Ethereum',
+    info: 'The world computer',
+  },
+];
+
+const AddNode = ({ onChange }: AddNodeProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <div className={container}>
+      <div className={titleFont}>{t('AddYourFirstNode')}</div>
+      <div className={descriptionFont}>
+        <>{t('AddYourFirstNodeDescription')}</>
+      </div>
+      <p className={sectionFont}>{t('ChooseYourNetwork')}</p>
+      <SpecialSelect
+        options={networksOptions}
+        onChange={(selectedNetwork) => onChange(selectedNetwork)}
+      />
+    </div>
+  );
+};
+
+export default AddNode;
diff --git a/src/renderer/Presentational/AddNode/addNode.css.ts b/src/renderer/Presentational/AddNode/addNode.css.ts
new file mode 100644
index 000000000..8b9c2aefc
--- /dev/null
+++ b/src/renderer/Presentational/AddNode/addNode.css.ts
@@ -0,0 +1,27 @@
+import { style } from '@vanilla-extract/css';
+import { vars } from '../../Generics/redesign/theme.css';
+
+export const container = style({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'flex-start',
+  gap: 16,
+});
+
+export const titleFont = style({
+  fontWeight: 500,
+  fontSize: 32,
+  lineHeight: '32px',
+  letterSpacing: '-0.01em',
+});
+
+export const descriptionFont = style({
+  fontWeight: 400,
+  fontSize: 13,
+  lineHeight: '18px',
+  color: vars.color.font70,
+});
+
+export const sectionFont = style({
+  fontWeight: 600,
+});
diff --git a/src/stories/Presentational/AddNode.stories.tsx b/src/stories/Presentational/AddNode.stories.tsx
new file mode 100644
index 000000000..776ecf65c
--- /dev/null
+++ b/src/stories/Presentational/AddNode.stories.tsx
@@ -0,0 +1,21 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import AddNode from '../../renderer/Presentational/AddNode/AddNode';
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Presentational/AddNode',
+  component: AddNode,
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {
+  },
+} as ComponentMeta<typeof AddNode>;
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template: ComponentStory<typeof AddNode> = (args) => <AddNode {...args} />;
+
+export const Primary = Template.bind({});
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+Primary.args = {
+  onChange: (newValue) => console.log(newValue)
+};