diff --git a/assets/locales/en/translation.json b/assets/locales/en/translation.json
index 66515a1e0..c84862279 100644
--- a/assets/locales/en/translation.json
+++ b/assets/locales/en/translation.json
@@ -33,7 +33,7 @@
   "unknown":"unknown",
   "nodeNotStartedYet": "The node will not be started yet.",
   "logs": "logs",
-  "dockerPurpose": "Docker helps NiceNode provide many nodes for users to choose from. Docker is supported by most node development teams and is free for users to install. Installing Docker will give you access to all of the Ethereum nodes! Docker will quietly run in the background after installation.",
+  "dockerPurpose": "Docker helps NiceNode provide more node and client options for users. Docker is free for users to install.",
   "restartDockerOnInstall": "Restart NiceNode when Docker is installed and running.",
   "ensureDockerIsRunning": "If you have Docker Desktop installed, ensure it is running.",
   "installDockerOnYourOwn": "Install Docker on your own.",
@@ -43,5 +43,8 @@
   "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.",
-  "ChooseYourNetwork" : "Choose your network"
+  "ChooseYourNetwork" : "Choose your network",
+  "DockerInstallation": "Docker installation",
+  "LearnMoreDocker": "Learn more about Docker",
+  "DownloadAndInstall": "Download and install"
 }
diff --git a/src/renderer/Generics/redesign/ProgressBar/ProgressBar.tsx b/src/renderer/Generics/redesign/ProgressBar/ProgressBar.tsx
new file mode 100644
index 000000000..bf6aa4f12
--- /dev/null
+++ b/src/renderer/Generics/redesign/ProgressBar/ProgressBar.tsx
@@ -0,0 +1,46 @@
+import {
+  outerDiv,
+  innerDiv,
+  captionText,
+  downloadingProgressContainer,
+  sectionFont,
+} from './progressBar.css';
+
+export interface ProgressBarProps {
+  /**
+   * Percent. undefined (not-started) or between 0 and 100
+   */
+  progress?: number;
+  title?: string;
+  caption?: string;
+  color?: string;
+}
+
+const ProgressBar = ({ progress, title, caption, color }: ProgressBarProps) => {
+  let progressWidth = 0;
+  if (progress) {
+    if (progress > 100) {
+      progressWidth = 100;
+    } else if (progress < 0) {
+      progressWidth = 0;
+    } else {
+      progressWidth = progress;
+    }
+  }
+  return (
+    <div className={downloadingProgressContainer}>
+      <div className={sectionFont}>
+        <>{title}</>
+      </div>
+      <div className={outerDiv}>
+        <div
+          style={{ width: `${progressWidth}%`, backgroundColor: color }}
+          className={innerDiv}
+        />
+      </div>{' '}
+      <p className={captionText}>{caption}</p>
+    </div>
+  );
+};
+
+export default ProgressBar;
diff --git a/src/renderer/Generics/redesign/ProgressBar/progressBar.css.ts b/src/renderer/Generics/redesign/ProgressBar/progressBar.css.ts
new file mode 100644
index 000000000..43d3d33dc
--- /dev/null
+++ b/src/renderer/Generics/redesign/ProgressBar/progressBar.css.ts
@@ -0,0 +1,38 @@
+import { style } from '@vanilla-extract/css';
+import { vars } from '../theme.css';
+
+export const outerDiv = style({
+  height: 16,
+  width: '100%',
+  borderWidth: 1,
+  borderStyle: 'solid',
+  borderColor: vars.color.background92,
+  borderRadius: 4,
+  boxSizing: 'border-box',
+  overflow: 'hidden',
+});
+
+export const innerDiv = style({
+  height: 16,
+  backgroundColor: vars.color.primary,
+});
+
+export const sectionFont = style({
+  fontWeight: 600,
+  marginBottom: 8,
+});
+
+export const captionText = style({
+  paddingTop: 4,
+  fontSize: 11,
+  lineHeight: '14px',
+  color: vars.color.font50,
+});
+
+export const downloadingProgressContainer = style({
+  borderColor: vars.color.border,
+  borderWidth: 1,
+  borderStyle: 'solid',
+  borderRadius: 5,
+  padding: 20,
+});
diff --git a/src/renderer/Generics/redesign/Typography b/src/renderer/Generics/redesign/Typography
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/renderer/Presentational/AddEthereumNode/AddEthereumNode.tsx b/src/renderer/Presentational/AddEthereumNode/AddEthereumNode.tsx
index 2820a6292..2fde3a4f1 100644
--- a/src/renderer/Presentational/AddEthereumNode/AddEthereumNode.tsx
+++ b/src/renderer/Presentational/AddEthereumNode/AddEthereumNode.tsx
@@ -22,9 +22,6 @@ export interface AddEthereumNodeProps {
   onChange: (newValue: string) => void;
 }
 
-/**
- * Primary UI component for user interaction
- */
 const AddEthereumNode = ({ onChange }: AddEthereumNodeProps) => {
   const { t } = useTranslation();
   const [sIsOptionsOpen, setIsOptionsOpen] = useState<boolean>();
diff --git a/src/renderer/Presentational/DockerInstallation/DockerInstallation.tsx b/src/renderer/Presentational/DockerInstallation/DockerInstallation.tsx
new file mode 100644
index 000000000..a9d56a1b3
--- /dev/null
+++ b/src/renderer/Presentational/DockerInstallation/DockerInstallation.tsx
@@ -0,0 +1,60 @@
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import {
+  captionText,
+  container,
+  descriptionFont,
+  titleFont,
+} from './dockerInstallation.css';
+import ExternalLink from '../../Generics/redesign/Link/ExternalLink';
+import electron from '../../electronGlobal';
+import { Button } from '../../Generics/redesign/Button/Button';
+import ProgressBar from '../../Generics/redesign/ProgressBar/ProgressBar';
+
+export interface DockerInstallationProps {
+  /**
+   * Listen to node config changes
+   */
+  onChange: (newValue: string) => void;
+}
+
+const DockerInstallation = ({ onChange }: DockerInstallationProps) => {
+  const { t } = useTranslation();
+  const [sIsOptionsOpen, setIsOptionsOpen] = useState<boolean>();
+
+  // listen to docker install messages
+  // total filesize, current downloaded amount, time left or front-end calcs
+  return (
+    <div className={container}>
+      <div className={titleFont}>{t('DockerInstallation')}</div>
+      <div className={descriptionFont}>
+        <>{t('dockerPurpose')}</>
+      </div>
+      <ExternalLink
+        text={t('LearnMoreDocker')}
+        url="https://www.docker.com/products/docker-desktop/"
+      />
+      <div>
+        <Button
+          primary
+          label={t('DownloadAndInstall')}
+          onClick={() => console.log('downloading docker')}
+        />
+        <div className={captionText}>500MB download</div>
+      </div>
+      <ProgressBar
+        progress={25}
+        title="Downloading Docker..."
+        caption="60MB of 500MB downloaded — About 55 seconds remaining"
+      />
+      <ProgressBar
+        progress={25}
+        title="Installing..."
+        caption="About 55 seconds remaining"
+      />
+    </div>
+  );
+};
+
+export default DockerInstallation;
diff --git a/src/renderer/Presentational/DockerInstallation/dockerInstallation.css.ts b/src/renderer/Presentational/DockerInstallation/dockerInstallation.css.ts
new file mode 100644
index 000000000..14e6e043e
--- /dev/null
+++ b/src/renderer/Presentational/DockerInstallation/dockerInstallation.css.ts
@@ -0,0 +1,30 @@
+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 captionText = style({
+  paddingTop: 4,
+  fontSize: 11,
+  lineHeight: '14px',
+  color: vars.color.font50,
+});
diff --git a/src/renderer/Presentational/NodeRequirements/NodeRequirements.tsx b/src/renderer/Presentational/NodeRequirements/NodeRequirements.tsx
index aed0ec519..7bc9c2c5d 100644
--- a/src/renderer/Presentational/NodeRequirements/NodeRequirements.tsx
+++ b/src/renderer/Presentational/NodeRequirements/NodeRequirements.tsx
@@ -21,9 +21,6 @@ export interface NodeRequirementsProps {
   systemData: SystemData;
 }
 
-/**
- * Primary UI component for user interaction
- */
 const NodeRequirements = ({
   nodeRequirements,
   systemData,
diff --git a/src/stories/Presentational/DockerInstallation.stories.tsx b/src/stories/Presentational/DockerInstallation.stories.tsx
new file mode 100644
index 000000000..4d10f6a7e
--- /dev/null
+++ b/src/stories/Presentational/DockerInstallation.stories.tsx
@@ -0,0 +1,21 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import DockerInstallation from '../../renderer/Presentational/DockerInstallation/DockerInstallation';
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Presentational/DockerInstallation',
+  component: DockerInstallation,
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {
+  },
+} as ComponentMeta<typeof DockerInstallation>;
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template: ComponentStory<typeof DockerInstallation> = (args) => <DockerInstallation {...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)
+};
diff --git a/src/stories/ProgressBar.stories.tsx b/src/stories/ProgressBar.stories.tsx
new file mode 100644
index 000000000..32991647e
--- /dev/null
+++ b/src/stories/ProgressBar.stories.tsx
@@ -0,0 +1,21 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import ProgressBar from '../renderer/Generics/redesign/ProgressBar/ProgressBar';
+
+export default {
+  title: 'Generic/ProgressBar',
+  component: ProgressBar,
+  argTypes: {
+    progress: { control: 'number' },
+    color: { control: 'color' }
+  },
+} as ComponentMeta<typeof ProgressBar>;
+
+const Template: ComponentStory<typeof ProgressBar> = (args) => <ProgressBar {...args} />;
+
+export const Primary = Template.bind({});
+Primary.args = {
+  progress: 23
+};
+
+