diff --git a/src/renderer/Generics/redesign/ClientCard/ClientCard.tsx b/src/renderer/Generics/redesign/ClientCard/ClientCard.tsx
index 6ad0085e9..917a2e078 100644
--- a/src/renderer/Generics/redesign/ClientCard/ClientCard.tsx
+++ b/src/renderer/Generics/redesign/ClientCard/ClientCard.tsx
@@ -17,7 +17,8 @@ import {
 import { NodeIcon } from '../NodeIcon/NodeIcon';
 import { Label } from '../Label/Label';
 import ProgressBar from '../ProgressBar/ProgressBar';
-import { ClientStatusProps } from '../consts';
+import { ClientProps } from '../consts';
+import { common } from '../theme.css';
 
 const getLabelDetails = (label: string) => {
   const labelDetails = { color: '', string: '' };
@@ -26,59 +27,54 @@ const getLabelDetails = (label: string) => {
       labelDetails.color = 'green';
       labelDetails.string = 'Synchronized';
       break;
+    case 'blocksBehind':
+      labelDetails.color = 'orange';
+      labelDetails.string = 'Blocks Behind';
+      break;
     case 'lowPeerCount':
       labelDetails.color = 'orange';
       labelDetails.string = 'Low peer count';
       break;
+    case 'noConnection':
+      labelDetails.color = 'red';
+      labelDetails.string = 'No connection';
+      break;
     case 'updateAvailable':
       labelDetails.color = 'purple';
       labelDetails.string = 'Update Available';
       break;
-    case 'stopped':
-      labelDetails.color = 'purple';
-      labelDetails.string = 'Update';
-      break;
     default:
       break;
   }
   return labelDetails;
 };
 
-export interface ClientCardProps {
-  /**
-   * Node client object
-   */
-  client: {
-    name: NodeBackgroundId;
-    version: string;
-    nodeType: string;
-    status: ClientStatusProps;
-    stats: {
-      peers: number;
-      slot: string;
-      cpuLoad: number;
-      diskUsage: number;
-    };
-  };
-}
-
 /**
  * Primary UI component for user interaction
  */
-export const ClientCard = ({ client }: ClientCardProps) => {
-  const { status, name, nodeType } = client;
-  const isNotSynchronizedAndStopped = !status.synchronized && !status.stopped;
+export const ClientCard = (props: ClientProps) => {
+  const { status, name, nodeType, stats } = props;
+  const isNotCloseToSynchronized =
+    stats.highestSlot - stats.currentSlot > 10 ||
+    stats.highestBlock - stats.currentBlock > 10;
+  const isNotSynchronizedAndNotStopped =
+    isNotCloseToSynchronized && !status.stopped;
   const renderContents = () => {
-    if (isNotSynchronizedAndStopped) {
+    if (isNotSynchronizedAndNotStopped) {
+      const caption = !status.initialized
+        ? 'Initial sync in progress.'
+        : 'Catching up';
+      const progress =
+        (stats.currentBlock / stats.highestBlock) * 100 ||
+        (stats.currentSlot / stats.highestSlot) * 100;
       return (
         <>
-          {/* TODO: tie clients with progress bar colors */}
           {/* TODO: modify height of the bar for card */}
           <ProgressBar
             card
-            color="#F96767"
-            progress={23}
-            caption="Initial sync in progress."
+            color={common.color[name]}
+            progress={progress}
+            caption={caption}
           />
         </>
       );
@@ -86,7 +82,8 @@ export const ClientCard = ({ client }: ClientCardProps) => {
     if (status.stopped) {
       return <Label type="gray" label="Stopped" />;
     }
-    const statusKeys = Object.keys(status).filter(
+    const { updating, initialized, ...statusLabels } = status;
+    const statusKeys = Object.keys(statusLabels).filter(
       (k: string) => status[k] === true
     );
     return (
@@ -111,7 +108,7 @@ export const ClientCard = ({ client }: ClientCardProps) => {
       <div
         style={{
           backgroundImage: `url(${NODE_BACKGROUNDS[name]})`,
-          height: isNotSynchronizedAndStopped ? 166 : 186,
+          height: isNotSynchronizedAndNotStopped ? 166 : 186,
         }}
         className={[cardTop, `${stoppedStyle}`].join(' ')}
       >
diff --git a/src/renderer/Generics/redesign/ClientCard/clientCard.css.ts b/src/renderer/Generics/redesign/ClientCard/clientCard.css.ts
index aad47cce0..143fb99a5 100644
--- a/src/renderer/Generics/redesign/ClientCard/clientCard.css.ts
+++ b/src/renderer/Generics/redesign/ClientCard/clientCard.css.ts
@@ -3,6 +3,7 @@ import { vars, common } from '../theme.css';
 
 export const container = style({
   boxSizing: 'border-box',
+  cursor: 'pointer',
   width: '50%',
   height: 280,
   background: vars.components.clientCardBackground,
diff --git a/src/renderer/Generics/redesign/Header/Header.tsx b/src/renderer/Generics/redesign/Header/Header.tsx
index 471c9a734..228aa0c46 100644
--- a/src/renderer/Generics/redesign/Header/Header.tsx
+++ b/src/renderer/Generics/redesign/Header/Header.tsx
@@ -1,7 +1,6 @@
 import { useState } from 'react';
-import { NodeIconId } from 'renderer/assets/images/nodeIcons';
 import Button from '../Button/Button';
-import { ClientStatusProps } from '../consts';
+import { NodeOverviewProps } from '../consts';
 import { NodeIcon } from '../NodeIcon/NodeIcon';
 import { UpdateCallout } from '../UpdateCallout/UpdateCallout';
 import {
@@ -16,36 +15,11 @@ import {
   updateCallout,
 } from './header.css';
 
-export interface HeaderProps {
-  nodeOverview: {
-    name: string;
-    title?: string;
-    info: string;
-    type: string;
-    version?: string;
-    update?: string;
-    status: ClientStatusProps;
-    stats: {
-      peers: number;
-      block: string;
-      cpuLoad: number;
-      diskUsage: number;
-    };
-  };
-}
-
 /**
  * Primary UI component for user interaction
  */
-export const Header = ({ nodeOverview }: HeaderProps) => {
-  const {
-    name,
-    title,
-    info,
-    type,
-    status: { updateAvailable },
-    version,
-  } = nodeOverview;
+export const Header = (props: NodeOverviewProps) => {
+  const { name, title, info, type, status, version } = props;
 
   const [isCalloutDisplayed, setIsCalloutDisplayed] = useState<boolean>(false);
 
@@ -55,14 +29,15 @@ export const Header = ({ nodeOverview }: HeaderProps) => {
     onClick: () => {},
   };
   if (type === 'altruistic') {
-    if (true) {
+    if (!status.stopped) {
       buttonProps.label = 'Stop';
       buttonProps.iconId = 'stop';
       buttonProps.onClick = () => {
         console.log('stop node');
       };
     } else {
-      buttonProps.label = 'Start';
+      const text = status.initialized ? 'Resume' : 'Start';
+      buttonProps.label = 'Resume';
       buttonProps.iconId = 'play';
       buttonProps.onClick = () => {
         console.log('start node');
@@ -89,7 +64,7 @@ export const Header = ({ nodeOverview }: HeaderProps) => {
         <div className={infoStyle}>{info}</div>
       </div>
       <div className={buttonContainer}>
-        {updateAvailable && (
+        {status.updateAvailable && (
           <div
             onBlur={(event) => {
               if (!event.currentTarget.contains(event.relatedTarget)) {
@@ -113,6 +88,7 @@ export const Header = ({ nodeOverview }: HeaderProps) => {
               <div className={updateCallout} tabIndex={0}>
                 <UpdateCallout
                   onClick={() => {
+                    setIsCalloutDisplayed(false);
                     console.log('clicked!');
                   }}
                 />
diff --git a/src/renderer/Generics/redesign/HeaderButton/headerButton.css.ts b/src/renderer/Generics/redesign/HeaderButton/headerButton.css.ts
index 3dfb4328a..22a67c8a7 100644
--- a/src/renderer/Generics/redesign/HeaderButton/headerButton.css.ts
+++ b/src/renderer/Generics/redesign/HeaderButton/headerButton.css.ts
@@ -1,5 +1,5 @@
 import { style } from '@vanilla-extract/css';
-import { common, vars } from '../theme.css';
+import { vars } from '../theme.css';
 
 export const container = style({
   flex: 'none',
diff --git a/src/renderer/Generics/redesign/HeaderMetrics/HeaderMetrics.tsx b/src/renderer/Generics/redesign/HeaderMetrics/HeaderMetrics.tsx
index 7c5d6587d..466c5119f 100644
--- a/src/renderer/Generics/redesign/HeaderMetrics/HeaderMetrics.tsx
+++ b/src/renderer/Generics/redesign/HeaderMetrics/HeaderMetrics.tsx
@@ -1,39 +1,22 @@
-import { NodeIconId } from 'renderer/assets/images/nodeIcons';
 import { MetricTypes } from '../MetricTypes/MetricTypes';
 import { container } from './headerMetrics.css';
 import VerticalLine from '../VerticalLine/VerticalLine';
 import { getSyncStatus } from '../utils';
-import { ClientStatusProps } from '../consts';
-
-export interface HeaderMetricsProps {
-  nodeOverview: {
-    name: string;
-    title: string;
-    info: string;
-    type: string;
-    version?: string;
-    update?: string;
-    status: ClientStatusProps;
-    stats: {
-      peers?: number;
-      block?: string;
-      cpuLoad?: number;
-      diskUsage?: number;
-    };
-  };
-}
-
-const metricTypeArray = {
-  altruistic: ['status', 'slots', 'cpuLoad', 'diskUsage'],
-  client: ['status', 'slots', 'peers', 'diskUsage'],
-  validator: ['status', 'stake', 'rewards', 'balance'],
-};
+import { NodeOverviewProps } from '../consts';
 
 /**
  * Primary UI component for user interaction
  */
-export const HeaderMetrics = ({ nodeOverview }: HeaderMetricsProps) => {
-  const { type, status, stats } = nodeOverview;
+export const HeaderMetrics = (props: NodeOverviewProps) => {
+  const { type, status, stats } = props;
+  const getSlotOrBlockMetricType = stats.currentSlot
+    ? 'currentSlot'
+    : 'currentBlock';
+  const metricTypeArray = {
+    altruistic: ['status', 'currentSlot', 'cpuLoad', 'diskUsage'],
+    client: ['status', getSlotOrBlockMetricType, 'peers', 'diskUsage'],
+    validator: ['status', 'stake', 'rewards', 'balance'],
+  };
   const assignedMetric = metricTypeArray[type];
   return (
     <div className={container}>
diff --git a/src/renderer/Generics/redesign/HeaderMetrics/headerMetrics.css.ts b/src/renderer/Generics/redesign/HeaderMetrics/headerMetrics.css.ts
index 7dae31c44..fd6da351f 100644
--- a/src/renderer/Generics/redesign/HeaderMetrics/headerMetrics.css.ts
+++ b/src/renderer/Generics/redesign/HeaderMetrics/headerMetrics.css.ts
@@ -1,5 +1,4 @@
 import { style } from '@vanilla-extract/css';
-import { vars } from '../theme.css';
 
 export const activeContainer = style({});
 
diff --git a/src/renderer/Generics/redesign/Message/message.css.ts b/src/renderer/Generics/redesign/Message/message.css.ts
index 46fc2bd2e..d75d27c77 100644
--- a/src/renderer/Generics/redesign/Message/message.css.ts
+++ b/src/renderer/Generics/redesign/Message/message.css.ts
@@ -9,9 +9,9 @@ export const container = style({
   gap: 16,
   boxSizing: 'border-box',
   borderRadius: '10px',
-  width: 730,
   padding: 24,
   position: 'relative',
+  marginBottom: 32,
   selectors: {
     [`&.info`]: {
       backgroundColor: vars.components.messageInfoBackground,
diff --git a/src/renderer/Generics/redesign/MetricTypes/MetricTypes.tsx b/src/renderer/Generics/redesign/MetricTypes/MetricTypes.tsx
index 3efeb50b7..594de73b8 100644
--- a/src/renderer/Generics/redesign/MetricTypes/MetricTypes.tsx
+++ b/src/renderer/Generics/redesign/MetricTypes/MetricTypes.tsx
@@ -1,8 +1,5 @@
-import { NodeIconId } from 'renderer/assets/images/nodeIcons';
-import Button from '../Button/Button';
 import { SYNC_STATUS } from '../consts';
 import { Icon } from '../Icon/Icon';
-import { NodeIcon } from '../NodeIcon/NodeIcon';
 import {
   statusStyle,
   container,
@@ -16,6 +13,7 @@ import {
   yellow,
   red,
   sync,
+  updating,
   stopped,
 } from './metricTypes.css';
 
@@ -23,7 +21,13 @@ export interface MetricTypesProps {
   /**
    * Stats types
    */
-  statsType?: 'status' | 'slots' | 'blocks' | 'peers' | 'cpuLoad' | 'diskUsage';
+  statsType?:
+    | 'status'
+    | 'currentSlot'
+    | 'currentBlock'
+    | 'peers'
+    | 'cpuLoad'
+    | 'diskUsage';
   /**
    * Status //TODO: match this with current status enum implementation
    */
@@ -50,27 +54,39 @@ export const MetricTypes = ({
     let statusColorStyle;
     let icon = null;
     switch (statsValue) {
+      case SYNC_STATUS.UPDATING:
+        statusColorStyle = updating;
+        titleText = 'Waiting';
+        labelText = 'Installing update...';
+        icon = <Icon iconId="updating" />;
+        break;
       case SYNC_STATUS.SYNCHRONIZED:
         statusColorStyle = green;
         titleText = 'Online';
         labelText = 'Synchronized';
         break;
+      case SYNC_STATUS.BLOCKS_BEHIND:
       case SYNC_STATUS.LOW_PEER_COUNT:
         statusColorStyle = yellow;
         titleText = 'Online';
-        labelText = 'Low Peer Count';
+        labelText =
+          statsValue === SYNC_STATUS.BLOCKS_BEHIND
+            ? 'Blocks behind'
+            : 'Low Peer Count';
         break;
       case SYNC_STATUS.NO_NETWORK:
         statusColorStyle = red;
         titleText = 'Offline';
         labelText = 'No Network';
         break;
-      case SYNC_STATUS.CATCHING_UP || SYNC_STATUS.INITIALIZING:
+      case SYNC_STATUS.CATCHING_UP:
+      case SYNC_STATUS.INITIALIZING:
         statusColorStyle = sync;
         titleText = 'Syncing';
-        labelText = SYNC_STATUS.CATCHING_UP
-          ? 'Catching up...'
-          : 'In progress...';
+        labelText =
+          statsValue === SYNC_STATUS.CATCHING_UP
+            ? 'Catching up...'
+            : 'In progress...';
         icon = <Icon iconId="syncing" />;
         break;
       case SYNC_STATUS.STOPPED:
@@ -89,13 +105,14 @@ export const MetricTypes = ({
   const processStatsType = () => {
     let iconId = statsType;
     switch (statsType) {
-      case 'blocks':
+      case 'currentBlock':
         iconId = 'slots';
-        titleText = '15828039';
+        titleText = `${statsValue}`;
         labelText = 'Last synced block';
         break;
-      case 'slots':
-        titleText = '4,456,158';
+      case 'currentSlot':
+        iconId = 'slots';
+        titleText = Number(statsValue).toLocaleString();
         labelText = 'Current slot';
         break;
       case 'peers':
diff --git a/src/renderer/Generics/redesign/MetricTypes/metricTypes.css.ts b/src/renderer/Generics/redesign/MetricTypes/metricTypes.css.ts
index e91a912d7..03267863f 100644
--- a/src/renderer/Generics/redesign/MetricTypes/metricTypes.css.ts
+++ b/src/renderer/Generics/redesign/MetricTypes/metricTypes.css.ts
@@ -7,6 +7,7 @@ export const green = style({ background: common.color.green });
 export const yellow = style({ background: common.color.yellow });
 export const red = style({ background: common.color.red });
 export const sync = style({});
+export const updating = style({});
 export const stopped = style({});
 
 const rotate = keyframes({
@@ -85,6 +86,13 @@ export const statusStyle = style({
       animationName: rotate,
       color: vars.color.font50,
     },
+    [`&.${updating}`]: {
+      borderRadius: 0,
+      width: 20,
+      height: 20,
+      animationName: rotate,
+      color: vars.color.font50,
+    },
     [`&.${stopped}`]: {
       transform: 'none',
       width: 20,
diff --git a/src/renderer/Generics/redesign/UpdateCallout/UpdateCallout.tsx b/src/renderer/Generics/redesign/UpdateCallout/UpdateCallout.tsx
index cb0353030..e0a4b92e8 100644
--- a/src/renderer/Generics/redesign/UpdateCallout/UpdateCallout.tsx
+++ b/src/renderer/Generics/redesign/UpdateCallout/UpdateCallout.tsx
@@ -14,6 +14,10 @@ export interface UpdateCalloutProps {
 }
 
 export const UpdateCallout = ({ onClick }: UpdateCalloutProps) => {
+  const onInstallClick = () => {
+    onClick();
+    console.log('install action!');
+  };
   return (
     <div className={container}>
       <div className={title}>Update your client</div>
@@ -32,8 +36,9 @@ export const UpdateCallout = ({ onClick }: UpdateCalloutProps) => {
           wide
           label="Install Update"
           size="small"
-          onClick={onClick}
+          onClick={onInstallClick}
         />
+        <Button wide label="Skip" size="small" onClick={onClick} />
       </div>
     </div>
   );
diff --git a/src/renderer/Generics/redesign/consts.ts b/src/renderer/Generics/redesign/consts.ts
index d713f24b7..e14f19d5e 100644
--- a/src/renderer/Generics/redesign/consts.ts
+++ b/src/renderer/Generics/redesign/consts.ts
@@ -1,5 +1,37 @@
+import { NodeBackgroundId } from 'renderer/assets/images/nodeBackgrounds';
+
+export interface ClientProps {
+  name: NodeBackgroundId;
+  version: string;
+  nodeType: string;
+  status: ClientStatusProps;
+  stats: ClientStatsProps;
+}
+
+export interface NodeOverviewProps {
+  name: NodeBackgroundId;
+  title: string;
+  info: string;
+  type: string;
+  version?: string;
+  status: ClientStatusProps;
+  stats: ClientStatsProps;
+}
+
+export interface ClientStatsProps {
+  currentBlock?: number;
+  highestBlock?: number;
+  currentSlot?: number;
+  highestSlot?: number;
+  peers?: number;
+  cpuLoad?: number;
+  diskUsage?: number;
+}
+
 export interface ClientStatusProps {
-  synchronized: boolean;
+  updating: boolean;
+  initialized: boolean; // initial initialization is done
+  synchronized: boolean; // constantly updated from checking current / height slot or block
   lowPeerCount: boolean;
   updateAvailable: boolean;
   blocksBehind: boolean;
@@ -13,15 +45,18 @@ export interface SyncStatusProps {
   CATCHING_UP: string;
   SYNCHRONIZED: string;
   LOW_PEER_COUNT: string;
+  BLOCKS_BEHIND: string;
   NO_NETWORK: string;
   STOPPED: string;
 }
 
 export const SYNC_STATUS = Object.freeze({
+  UPDATING: 'updating',
   INITIALIZING: 'initializing',
   CATCHING_UP: 'catchingUp',
   SYNCHRONIZED: 'synchronized',
   LOW_PEER_COUNT: 'lowPeerCount',
+  BLOCKS_BEHIND: 'blocksBehind',
   NO_NETWORK: 'noNetwork',
   STOPPED: 'stopped',
 });
diff --git a/src/renderer/Generics/redesign/utils.ts b/src/renderer/Generics/redesign/utils.ts
index 11446813c..05bc6d5d0 100644
--- a/src/renderer/Generics/redesign/utils.ts
+++ b/src/renderer/Generics/redesign/utils.ts
@@ -3,8 +3,11 @@ import { ClientStatusProps, SYNC_STATUS } from './consts';
 export const getSyncStatus = (status: ClientStatusProps) => {
   let syncStatus = null;
   switch (true) {
-    // map this in an object?
+    // TODO: revisit this.. feels off or unnecessary
     // find worst cases first
+    case status.updating:
+      syncStatus = SYNC_STATUS.UPDATING;
+      break;
     case status.stopped:
       syncStatus = SYNC_STATUS.STOPPED;
       break;
@@ -12,8 +15,14 @@ export const getSyncStatus = (status: ClientStatusProps) => {
       syncStatus = SYNC_STATUS.NO_NETWORK;
       break;
     case status.blocksBehind:
+      syncStatus = SYNC_STATUS.BLOCKS_BEHIND;
+      break;
+    case status.initialized && !status.synchronized && !status.blocksBehind:
       syncStatus = SYNC_STATUS.CATCHING_UP;
       break;
+    case !status.initialized && !status.synchronized && !status.blocksBehind:
+      syncStatus = SYNC_STATUS.INITIALIZING;
+      break;
     case status.lowPeerCount:
       syncStatus = SYNC_STATUS.LOW_PEER_COUNT;
       break;
diff --git a/src/renderer/Presentational/ContentMultipleClients/ContentMultipleClients.tsx b/src/renderer/Presentational/ContentMultipleClients/ContentMultipleClients.tsx
index e8656b5b5..283d829ac 100644
--- a/src/renderer/Presentational/ContentMultipleClients/ContentMultipleClients.tsx
+++ b/src/renderer/Presentational/ContentMultipleClients/ContentMultipleClients.tsx
@@ -1,4 +1,6 @@
 import { useState, useCallback } from 'react';
+import { ClientProps } from 'renderer/Generics/redesign/consts';
+import { Message } from '../../Generics/redesign/Message/Message';
 import { ClientCard } from '../../Generics/redesign/ClientCard/ClientCard';
 import { WalletPrompt } from '../../Generics/redesign/WalletPrompt/WalletPrompt';
 import { HorizontalLine } from '../../Generics/redesign/HorizontalLine/HorizontalLine';
@@ -13,61 +15,22 @@ import {
   resourcesContainer,
 } from './contentMultipleClients.css';
 
-// TODO: process retrieved client data into this format?
-const clients = [
-  {
-    name: 'nimbus',
-    version: 'v10',
-    type: 'single',
-    nodeType: 'consensus',
-    status: {
-      synchronized: true,
-      lowPeerCount: false,
-      updateAvailable: false,
-      blocksBehind: false,
-      noConnection: false,
-      stopped: false,
-      error: false,
-    },
-    stats: {
-      peers: 20,
-      slot: '4,456,158',
-      cpuLoad: 20,
-      diskUsage: 600, // in MB?
-    },
-  },
-  {
-    name: 'erigon',
-    version: 'v10',
-    type: 'single',
-    nodeType: 'execution',
-    status: {
-      synchronized: true,
-      lowPeerCount: false,
-      updateAvailable: true,
-      blocksBehind: false,
-      noConnection: false,
-      stopped: false,
-      error: false,
-    },
-    stats: {
-      peers: 16,
-      block: '15791798',
-      cpuLoad: 82,
-      diskUsage: 5000,
-    },
-  },
-];
-
-const ContentMultipleClients = () => {
+const ContentMultipleClients = (props: {
+  clients: [ClientProps, ClientProps];
+}) => {
+  const { clients } = props;
   // TODO: Come up with a better name for this component..
   /* TODO: maybe a "provider" wrapper/manager to fetch data and handle states */
 
   const initialWalletDismissedState =
     localStorage.getItem('walletDismissed') === 'true';
+  const initialSyncMessageDismissedState =
+    localStorage.getItem('initialSyncMessageDismissed') === 'true';
   const [walletDismissed, setWalletDismissed] = useState<boolean>(
     initialWalletDismissedState
   );
+  const [initialSyncMessageDismissed, setinitialSyncMessageDismissed] =
+    useState<boolean>(initialSyncMessageDismissedState);
 
   const onDismissClick = useCallback(() => {
     setWalletDismissed(true);
@@ -82,6 +45,46 @@ const ContentMultipleClients = () => {
   const clClient = clients.find((client) => client.nodeType === 'consensus');
   const elClient = clients.find((client) => client.nodeType === 'execution');
 
+  const renderPrompt = () => {
+    const synchronized =
+      clClient?.status.synchronized && elClient?.status.synchronized;
+    if (
+      synchronized &&
+      !clClient?.status.updating &&
+      !elClient?.status.updating &&
+      !walletDismissed
+    ) {
+      return (
+        <WalletPrompt
+          onSetupClick={onSetupClick}
+          onDismissClick={onDismissClick}
+        />
+      );
+    }
+    if (
+      !clClient?.status.initialized &&
+      !elClient?.status.initialized &&
+      !synchronized &&
+      !initialSyncMessageDismissed
+    ) {
+      const title = 'Initial sync process started';
+      const description =
+        'When adding a node it first needs to catch up on the history of the network. This process downloads all the necessary data and might take a couple of days. After synchronization is complete your node will be online and part of the network.';
+      return (
+        <Message
+          type="info"
+          title={title}
+          description={description}
+          onClick={() => {
+            localStorage.setItem('initialSyncMessageDismissed', 'true');
+            setinitialSyncMessageDismissed(true);
+          }}
+        />
+      );
+    }
+    return null;
+  };
+
   // TODO: refactor this out so that it can be shared with multiple and single
   const getNodeOverview = () => {
     // useEffect, used only in Header and Metrics
@@ -95,21 +98,28 @@ const ContentMultipleClients = () => {
         info: 'Non-Validating Node — Ethereum mainnet',
         type: 'altruistic',
         status: {
+          updating: clClient?.status.updating || elClient?.status.updating,
           synchronized:
-            clClient.status.synchronized || elClient.status.synchronized,
+            clClient?.status.synchronized && elClient?.status.synchronized,
+          initialized:
+            clClient?.status.initialized || elClient?.status.initialized,
+          blocksBehind:
+            clClient?.status.blocksBehind || elClient?.status.blocksBehind,
           lowPeerCount:
-            clClient.status.lowPeerCount || elClient.status.lowPeerCount,
+            clClient?.status.lowPeerCount || elClient?.status.lowPeerCount,
           updateAvailable:
-            clClient.status.updateAvailable || elClient.status.updateAvailable,
-          blocksBehind:
-            clClient.status.blocksBehind || elClient.status.blocksBehind,
+            clClient?.status.updateAvailable ||
+            elClient?.status.updateAvailable,
           noConnection:
-            clClient.status.noConnection || elClient.status.noConnection,
-          stopped: clClient.status.stopped || elClient.status.stopped, // both should be stopped
-          error: clClient.status.error || elClient.status.error,
+            clClient?.status.noConnection || elClient?.status.noConnection,
+          stopped: clClient?.status.stopped || elClient?.status.stopped, // both should be stopped
+          error: clClient?.status.error || elClient?.status.error,
         },
         stats: {
-          block: clClient?.stats.slot,
+          currentBlock: elClient?.stats.currentBlock,
+          highestBlock: elClient?.stats.highestBlock,
+          currentSlot: clClient?.stats.currentSlot,
+          highestSlot: clClient?.stats.highestSlot,
           cpuLoad:
             (clClient?.stats.cpuLoad || 0) + (elClient?.stats.cpuLoad || 0),
           diskUsage:
@@ -152,23 +162,15 @@ const ContentMultipleClients = () => {
 
   return (
     <div className={container}>
-      <Header nodeOverview={nodeOverview} />
+      <Header {...nodeOverview} />
       <HorizontalLine type="content" />
-      <HeaderMetrics nodeOverview={nodeOverview} />
+      <HeaderMetrics {...nodeOverview} />
       <HorizontalLine type="content" />
-      {clClient.status.synchronized &&
-        elClient.status.synchronized &&
-        !walletDismissed && (
-          // TODO: Prompt handler for wallet & node status messages
-          <WalletPrompt
-            onSetupClick={onSetupClick}
-            onDismissClick={onDismissClick}
-          />
-        )}
+      {renderPrompt()}
       <div className={sectionTitle}>Ethereum Clients</div>
       <div className={clientCardsContainer}>
         {clients.map((client) => {
-          return <ClientCard client={client} />;
+          return <ClientCard {...client} />;
         })}
       </div>
       <HorizontalLine type="content" />
diff --git a/src/renderer/Presentational/ContentSingleClient/ContentSingleClient.tsx b/src/renderer/Presentational/ContentSingleClient/ContentSingleClient.tsx
index 0fe3d1741..cafe21b61 100644
--- a/src/renderer/Presentational/ContentSingleClient/ContentSingleClient.tsx
+++ b/src/renderer/Presentational/ContentSingleClient/ContentSingleClient.tsx
@@ -15,22 +15,25 @@ import {
 
 // TODO: process retrieved client data into this format?
 const client = {
-  name: 'nimbus',
+  name: 'geth',
   version: 'v10',
   type: 'client',
-  nodeType: 'consensus',
+  nodeType: 'execution',
   status: {
-    synchronized: false,
+    updating: false,
+    sychronized: true,
+    initialized: false,
     lowPeerCount: false,
     updateAvailable: false,
-    blocksBehind: false,
+    blocksBehind: true,
     noConnection: false,
     stopped: false,
     error: false,
   },
   stats: {
     peers: 15,
-    slot: '4,456,158',
+    currentBlock: 1000,
+    highestBlock: 2000,
     cpuLoad: 20,
     diskUsage: 600, // in MB?
   },
@@ -49,7 +52,6 @@ const ContentSingleClient = () => {
     return {
       ...client,
       info: `${clientTypeLabel} -- Ethereum mainnet`, // should be more flexible for other networks
-      status: 'healthy', // change this to enum to compare weights?
     };
   };
 
@@ -59,9 +61,9 @@ const ContentSingleClient = () => {
 
   return (
     <div className={container}>
-      <Header nodeOverview={nodeOverview} />
+      <Header {...nodeOverview} />
       <HorizontalLine type="content" />
-      <HeaderMetrics nodeOverview={nodeOverview} />
+      <HeaderMetrics {...nodeOverview} />
       <HorizontalLine type="content" />
     </div>
   );
diff --git a/src/renderer/assets/images/icons/Updating.svg b/src/renderer/assets/images/icons/Updating.svg
new file mode 100644
index 000000000..a11af96ac
--- /dev/null
+++ b/src/renderer/assets/images/icons/Updating.svg
@@ -0,0 +1,9 @@
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M1.05493 11C1.55238 15.5 5.36745 19 10 19C14.9706 19 19 14.9706 19 10C19 5.02944 14.9706 1 10 1V3C13.866 3 17 6.13401 17 10C17 13.866 13.866 17 10 17C6.47353 17 3.55612 14.3923 3.07089 11H1.05493Z" fill="currentColor" fill-opacity="0.5"/>
+<defs>
+<radialGradient id="paint0_angular_2289_67498" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(10.0275 10) rotate(-180) scale(9.02747 8.99992)">
+<stop stop-color="white" stop-opacity="0"/>
+<stop offset="1" stop-color="white"/>
+</radialGradient>
+</defs>
+</svg>
diff --git a/src/renderer/assets/images/icons/index.tsx b/src/renderer/assets/images/icons/index.tsx
index b89fa2b16..7c4d17cd2 100644
--- a/src/renderer/assets/images/icons/index.tsx
+++ b/src/renderer/assets/images/icons/index.tsx
@@ -59,6 +59,7 @@ import { ReactComponent as Stop } from './Stop.svg';
 import { ReactComponent as SyncSmall } from './Sync-small.svg';
 import { ReactComponent as Sync } from './Sync.svg';
 import { ReactComponent as Syncing } from './Syncing.svg';
+import { ReactComponent as Updating } from './Updating.svg';
 import { ReactComponent as UpLarge } from './Up-large.svg';
 import { ReactComponent as Up } from './Up.svg';
 import { ReactComponent as WarningCircleFilled } from './Warning-circle-filled.svg';
@@ -125,6 +126,7 @@ export interface Icons {
   syncsmall?: React.ReactNode;
   sync?: React.ReactNode;
   syncing?: React.ReactNode;
+  updating?: React.ReactNode;
   uplarge?: React.ReactNode;
   up?: React.ReactNode;
   warningcirclefilled?: React.ReactNode;
@@ -193,9 +195,10 @@ export const ICONS: Icons = {
   syncsmall: <SyncSmall />,
   sync: <Sync />,
   syncing: <Syncing />,
+  updating: <Updating />,
   uplarge: <UpLarge />,
   up: <Up />,
   warningcirclefilled: <WarningCircleFilled />,
-};
+} as const;
 
 export type IconId = keyof Icons;
diff --git a/src/stories/Generic/ClientCard.stories.tsx b/src/stories/Generic/ClientCard.stories.tsx
new file mode 100644
index 000000000..c55d0136c
--- /dev/null
+++ b/src/stories/Generic/ClientCard.stories.tsx
@@ -0,0 +1,37 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { ClientCard } from '../../renderer/Generics/redesign/ClientCard/ClientCard';
+
+export default {
+  title: 'Generic/ClientCard',
+  component: ClientCard,
+} as ComponentMeta<typeof ClientCard>;
+
+const Template: ComponentStory<typeof ClientCard> = (args) => (
+  <ClientCard {...args} />
+);
+
+export const Nethermind = Template.bind({});
+Nethermind.args = {
+  name: 'erigon',
+  version: 'v10',
+  type: 'single',
+  nodeType: 'execution',
+  status: {
+    updating: false,
+    initialized: true,
+    lowPeerCount: false,
+    updateAvailable: true,
+    blocksBehind: false,
+    noConnection: false,
+    stopped: false,
+    error: false,
+  },
+  stats: {
+    peers: 16,
+    currentSlot: 90,
+    highestSlot: 190,
+    cpuLoad: 82,
+    diskUsage: 5000,
+  },
+};
diff --git a/src/stories/Generic/Header.stories.tsx b/src/stories/Generic/Header.stories.tsx
index 0bd5ffce7..f475c2827 100644
--- a/src/stories/Generic/Header.stories.tsx
+++ b/src/stories/Generic/Header.stories.tsx
@@ -12,25 +12,25 @@ const Template: ComponentStory<typeof Header> = (args) => <Header {...args} />;
 export const Primary = Template.bind({});
 
 Primary.args = {
-  //TODO: fix this so we only pass in params?
-  nodeOverview: {
-    name: 'ethereum',
-    title: 'Ethereum node',
-    info: 'Non-Validating Node — Ethereum mainnet',
-    type: 'altruistic',
-    status: {
-      synchronized: true,
-      lowPeerCount: true,
-      updateAvailable: true,
-      blocksBehind: false,
-      noConnection: false,
-      stopped: false,
-      error: false,
-    },
-    stats: {
-      block: '32,000,200',
-      cpuLoad: 90,
-      diskUsage: 10000,
-    },
+  name: 'ethereum',
+  title: 'Ethereum node',
+  info: 'Non-Validating Node — Ethereum mainnet',
+  type: 'altruistic',
+  status: {
+    updating: false,
+    initialized: true,
+    synchronizing: 100,
+    lowPeerCount: true,
+    updateAvailable: true,
+    blocksBehind: false,
+    noConnection: false,
+    stopped: false,
+    error: false,
+  },
+  stats: {
+    currentSlot: 90,
+    highestSlot: 190,
+    cpuLoad: 90,
+    diskUsage: 10000,
   },
 };
diff --git a/src/stories/Generic/HeaderMetrics.stories.tsx b/src/stories/Generic/HeaderMetrics.stories.tsx
index c30e818a1..53e51802e 100644
--- a/src/stories/Generic/HeaderMetrics.stories.tsx
+++ b/src/stories/Generic/HeaderMetrics.stories.tsx
@@ -14,24 +14,25 @@ const Template: ComponentStory<typeof HeaderMetrics> = (args) => (
 export const Primary = Template.bind({});
 
 Primary.args = {
-  nodeOverview: {
-    name: 'ethereum',
-    title: 'Ethereum node',
-    info: 'Non-Validating Node — Ethereum mainnet',
-    type: 'altruistic',
-    status: {
-      synchronized: true,
-      lowPeerCount: true,
-      updateAvailable: true,
-      blocksBehind: false,
-      noConnection: false,
-      stopped: false,
-      error: false,
-    },
-    stats: {
-      block: '32,000,200',
-      cpuLoad: 90,
-      diskUsage: 10000,
-    },
+  name: 'ethereum',
+  title: 'Ethereum node',
+  info: 'Non-Validating Node — Ethereum mainnet',
+  type: 'altruistic',
+  status: {
+    updating: false,
+    initialized: true,
+    synchronizing: 100,
+    lowPeerCount: true,
+    updateAvailable: true,
+    blocksBehind: false,
+    noConnection: false,
+    stopped: false,
+    error: false,
+  },
+  stats: {
+    currentSlot: 90,
+    highestSlot: 190,
+    cpuLoad: 90,
+    diskUsage: 10000,
   },
 };
diff --git a/src/stories/Presentational/ContentMultipleClients.stories.tsx b/src/stories/Presentational/ContentMultipleClients.stories.tsx
index aa3ecd8cf..ee76bd3d6 100644
--- a/src/stories/Presentational/ContentMultipleClients.stories.tsx
+++ b/src/stories/Presentational/ContentMultipleClients.stories.tsx
@@ -13,4 +13,61 @@ const Template: ComponentStory<typeof ContentMultipleClients> = (args) => (
 );
 
 export const Primary = Template.bind({});
-Primary.args = {};
+const currentSlot = 4671269;
+const highestSlot = 4671270;
+const currentBlock = 3000;
+const highestBlock = 3000;
+Primary.args = {
+  clients: [
+    {
+      name: 'nimbus',
+      version: 'v10',
+      type: 'single',
+      nodeType: 'consensus',
+      status: {
+        updating: false,
+        initialized: true,
+        synchronized: highestSlot - currentSlot <= 3,
+        blocksBehind:
+          highestSlot - currentSlot > 3 && highestSlot - currentSlot <= 10,
+        lowPeerCount: false,
+        updateAvailable: false,
+        noConnection: false,
+        stopped: false,
+        error: false,
+      },
+      stats: {
+        currentSlot: currentSlot,
+        highestSlot: highestSlot,
+        peers: 20,
+        cpuLoad: 20,
+        diskUsage: 600, // in MB?
+      },
+    },
+    {
+      name: 'besu',
+      version: 'v10',
+      type: 'single',
+      nodeType: 'execution',
+      status: {
+        updating: false,
+        initialized: true,
+        synchronized: highestBlock - currentBlock <= 3,
+        blocksBehind:
+          highestBlock - currentBlock > 3 && highestBlock - currentBlock <= 10,
+        lowPeerCount: false,
+        updateAvailable: true,
+        noConnection: false,
+        stopped: false,
+        error: false,
+      },
+      stats: {
+        currentBlock: currentBlock,
+        highestBlock: highestBlock,
+        peers: 16,
+        cpuLoad: 82,
+        diskUsage: 5000,
+      },
+    },
+  ],
+};