diff --git a/src/renderer/AddNode/AddNodeRedesign.tsx b/src/renderer/AddNode/AddNodeRedesign.tsx
index 5cdbb8aa6..7ef62d9a6 100644
--- a/src/renderer/AddNode/AddNodeRedesign.tsx
+++ b/src/renderer/AddNode/AddNodeRedesign.tsx
@@ -22,7 +22,7 @@ const AddNode = () => {
       <IconButton type="button" onClick={onClickAddNodeButton}>
         <BsPlusSquareDotted />
       </IconButton>
-      <div id="onBoarding" className={darkTheme}>
+      <div className={darkTheme}>
         <Modal
           title=""
           isOpen={sIsModalOpenAddNode}
diff --git a/src/renderer/App.tsx b/src/renderer/App.tsx
index ee0a4a106..7fad6cb80 100644
--- a/src/renderer/App.tsx
+++ b/src/renderer/App.tsx
@@ -1,18 +1,20 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { MemoryRouter as Router, Routes, Route } from 'react-router-dom';
 import * as Sentry from '@sentry/electron/renderer';
 
 import './Generics/redesign/globalStyle.css';
-import './App.css';
+// import './App.css';
 import { useAppDispatch } from './state/hooks';
 import Header from './Header';
 import Footer from './Footer/Footer';
 import Warnings from './Warnings';
 import { initialize as initializeIpcListeners } from './ipc';
-import LeftSideBar from './LeftSideBar';
+// import LeftSideBar from './LeftSideBar';
 import NodeScreen from './NodeScreen';
 import DataRefresher from './DataRefresher';
 import electron from './electronGlobal';
+import Sidebar from './Presentational/Sidebar/Sidebar';
+import { darkTheme, lightTheme } from './Generics/redesign/theme.css';
 
 Sentry.init({
   dsn: electron.SENTRY_DSN,
@@ -21,6 +23,7 @@ Sentry.init({
 
 const MainScreen = () => {
   const dispatch = useAppDispatch();
+  const [isDarkTheme, setIsDarkTheme] = useState(false);
 
   // const isStartOnLogin = await electron.getStoreValue('isStartOnLogin');
   // console.log('isStartOnLogin: ', isStartOnLogin);
@@ -38,6 +41,8 @@ const MainScreen = () => {
 
   return (
     <div
+      id="onBoarding"
+      className={isDarkTheme ? darkTheme : lightTheme}
       style={{
         display: 'flex',
         flexDirection: 'column',
@@ -53,7 +58,8 @@ const MainScreen = () => {
           flex: 1,
         }}
       >
-        <LeftSideBar />
+        {/* <LeftSideBar /> */}
+        <Sidebar offline={false} />
 
         <div
           style={{
diff --git a/src/renderer/Footer/Monitoring.tsx b/src/renderer/Footer/Monitoring.tsx
index fc066ca82..41d8b456b 100644
--- a/src/renderer/Footer/Monitoring.tsx
+++ b/src/renderer/Footer/Monitoring.tsx
@@ -153,7 +153,7 @@ const Monitoring = ({ isOpen, onClickCloseButton }: Props) => {
         />
       </div>
       <hr />
-      <div id="onBoarding" className={darkTheme}>
+      <div>
         <SystemMonitor />
         {/* <Checklist
           items={[
diff --git a/src/renderer/Generics/redesign/NodeIcon/NodeIcon.tsx b/src/renderer/Generics/redesign/NodeIcon/NodeIcon.tsx
index 6b1b2a5c7..e0e538ff0 100644
--- a/src/renderer/Generics/redesign/NodeIcon/NodeIcon.tsx
+++ b/src/renderer/Generics/redesign/NodeIcon/NodeIcon.tsx
@@ -24,7 +24,7 @@ export interface NodeIconProps {
   /**
    * Which icon?
    */
-  iconId: NodeIconId;
+  iconId: NodeIconId | string;
   /**
    * What's the status?
    */
@@ -98,9 +98,13 @@ export const NodeIcon = ({ iconId, status, size, animate }: NodeIconProps) => {
       {statusComponent}
       <div
         className={[iconBackground, sizeStyle, isStatusStyle].join(' ')}
-        style={{ backgroundColor: NODE_COLORS[iconId] }}
+        style={{ backgroundColor: NODE_COLORS[iconId as NodeIconId] }}
       >
-        <img src={NODE_ICONS[iconId]} alt="Node icon" className={imageStyle} />
+        <img
+          src={NODE_ICONS[iconId as NodeIconId] || undefined}
+          alt="Node icon"
+          className={imageStyle}
+        />
       </div>
     </div>
   );
diff --git a/src/renderer/Generics/redesign/SidebarNodeItem/SidebarNodeItem.tsx b/src/renderer/Generics/redesign/SidebarNodeItem/SidebarNodeItem.tsx
index 52773c5f3..e2f30947b 100644
--- a/src/renderer/Generics/redesign/SidebarNodeItem/SidebarNodeItem.tsx
+++ b/src/renderer/Generics/redesign/SidebarNodeItem/SidebarNodeItem.tsx
@@ -28,7 +28,7 @@ export interface SidebarNodeItemProps {
   /**
    * Which icon?
    */
-  iconId: NodeIconId;
+  iconId: NodeIconId | string;
   /**
    * What's the status?
    */
diff --git a/src/renderer/Generics/redesign/SidebarNodeItem/sideBarNodeItem.css.ts b/src/renderer/Generics/redesign/SidebarNodeItem/sideBarNodeItem.css.ts
index 93d5e2bcc..575717477 100644
--- a/src/renderer/Generics/redesign/SidebarNodeItem/sideBarNodeItem.css.ts
+++ b/src/renderer/Generics/redesign/SidebarNodeItem/sideBarNodeItem.css.ts
@@ -29,7 +29,7 @@ export const textContainer = style({
   alignItems: 'flex-start',
   padding: '0px',
   gap: '2px',
-  width: '172px',
+  // width: '172px',
   height: '32px',
   flex: 'none',
   order: '1',
diff --git a/src/renderer/Generics/redesign/utils.ts b/src/renderer/Generics/redesign/utils.ts
index 7fa75e5e1..b8f901900 100644
--- a/src/renderer/Generics/redesign/utils.ts
+++ b/src/renderer/Generics/redesign/utils.ts
@@ -3,7 +3,6 @@ import { ClientStatusProps, SYNC_STATUS } from './consts';
 export const getSyncStatus = (status: ClientStatusProps) => {
   let syncStatus;
   switch (true) {
-    // TODO: revisit this.. feels off or unnecessary
     // find worst cases first
     case status.updating:
       syncStatus = SYNC_STATUS.UPDATING;
diff --git a/src/renderer/Presentational/Sidebar/Sidebar.tsx b/src/renderer/Presentational/Sidebar/Sidebar.tsx
index 1eedda492..977b50caa 100644
--- a/src/renderer/Presentational/Sidebar/Sidebar.tsx
+++ b/src/renderer/Presentational/Sidebar/Sidebar.tsx
@@ -1,3 +1,11 @@
+import { NodeId, NodeStatus } from 'common/node';
+import { useCallback, useEffect } from 'react';
+import {
+  selectSelectedNodeId,
+  selectUserNodes,
+  updateSelectedNodeId,
+} from 'renderer/state/node';
+import { useAppDispatch, useAppSelector } from 'renderer/state/hooks';
 import { Banner } from '../../Generics/redesign/Banner/Banner';
 import {
   SidebarNodeItem,
@@ -75,7 +83,63 @@ const itemListData: { iconId: IconId; label: string; count?: number }[] = [
   },
 ];
 
+const NODE_SIDEBAR_STATUS_MAP: Record<NodeStatus, SidebarNodeStatus> = {
+  created: 'stopped',
+  initializing: 'sync',
+  [NodeStatus.checkingForUpdates]: 'sync',
+  downloading: 'sync',
+  downloaded: 'sync',
+  [NodeStatus.errorDownloading]: 'error',
+  extracting: 'sync',
+  [NodeStatus.readyToStart]: 'stopped',
+  starting: 'sync',
+  running: 'healthy',
+  stopping: 'healthy',
+  stopped: 'stopped',
+  [NodeStatus.errorRunning]: 'error',
+  [NodeStatus.errorStarting]: 'error',
+  [NodeStatus.errorStopping]: 'error',
+  unknown: 'error',
+};
+
 const Sidebar = ({ offline }: SidebarProps) => {
+  const sSelectedNodeId = useAppSelector(selectSelectedNodeId);
+  const sUserNodes = useAppSelector(selectUserNodes);
+  const dispatch = useAppDispatch();
+
+  // Default selected node to be the first node
+  useEffect(() => {
+    if (
+      !sSelectedNodeId &&
+      sUserNodes &&
+      Array.isArray(sUserNodes?.nodeIds) &&
+      sUserNodes.nodeIds.length > 0
+    ) {
+      dispatch(updateSelectedNodeId(sUserNodes.nodeIds[0]));
+    }
+  }, [sSelectedNodeId, sUserNodes, dispatch]);
+
+  // const nodeListObject = { nodeService: [], validator: [], singleClients: [] };
+  // sUserNodes?.nodeIds.forEach((nodeId: NodeId) => {
+  //   const node = sUserNodes.nodes[nodeId];
+  //   // TODO: add validator logic here eventually
+  //   if (
+  //     node.spec.category === 'L1/ExecutionClient' ||
+  //     node.spec.category === 'L1/ConsensusClient/BeaconNode'
+  //   ) {
+  //     nodeListObject.nodeService.push(node);
+  //   } else {
+  //     nodeListObject.singleClients.push(node);
+  //   }
+  // });
+
+  const onClickLinkItem = useCallback((linkItemId) => {
+    console.log('sidebar link item clicked: ', linkItemId);
+    if (linkItemId === 'add') {
+      // open add node dialog
+    }
+  }, []);
+
   return (
     <div className={container}>
       {offline && (
@@ -87,14 +151,31 @@ const Sidebar = ({ offline }: SidebarProps) => {
         <div className={titleItem}>
           <SidebarTitleItem title="Nodes" />
         </div>
-        {nodeListData.map((item) => {
+        {/* {nodeListObject.nodeService.length === 2 && (
+          <SidebarNodeItem
+            iconId="ethereum"
+            title="Ethereum node"
+            info="Mainnet"
+            status={nodeListObject.nodeService[0].status} // TODO: get the worst status of both nodes
+            key="ethereum"
+            onClick={() => {
+              dispatch(updateSelectedNodeId(nodeListObject.nodeService[1].id));
+            }}
+          />
+        )} */}
+        {sUserNodes?.nodeIds.map((nodeId: NodeId) => {
+          const node = sUserNodes.nodes[nodeId];
+          const { spec, status } = node;
+          const sidebarStatus = NODE_SIDEBAR_STATUS_MAP[status];
           return (
             <SidebarNodeItem
-              iconId={item.iconId}
-              title={item.title}
-              info={item.info}
-              status={item.status}
-              key={item.title}
+              // temp fix
+              key={node.id}
+              iconId={spec.specId.replace('-beacon', '')}
+              title={spec.displayName}
+              info={spec.displayName}
+              status={sidebarStatus}
+              onClick={() => dispatch(updateSelectedNodeId(node.id))}
             />
           );
         })}
@@ -103,9 +184,11 @@ const Sidebar = ({ offline }: SidebarProps) => {
         {itemListData.map((item) => {
           return (
             <SidebarLinkItem
+              key={item.label}
               iconId={item.iconId}
               label={item.label}
               count={item.count}
+              onClick={() => onClickLinkItem(item.iconId)}
             />
           );
         })}
diff --git a/src/renderer/Presentational/Sidebar/sidebar.css.ts b/src/renderer/Presentational/Sidebar/sidebar.css.ts
index 58487d609..3807245b8 100644
--- a/src/renderer/Presentational/Sidebar/sidebar.css.ts
+++ b/src/renderer/Presentational/Sidebar/sidebar.css.ts
@@ -30,7 +30,7 @@ export const titleItem = style({
 });
 
 export const nodeList = style({
-  overflowY: 'scroll',
+  overflowY: 'auto',
   order: '2',
   alignSelf: 'stretch',
   flexGrow: '1',