diff --git a/src/main/docker/docker.ts b/src/main/docker/docker.ts
index c380a25bb..1ebdc2148 100644
--- a/src/main/docker/docker.ts
+++ b/src/main/docker/docker.ts
@@ -231,8 +231,8 @@ export const sendLogsToUI = (node: Node) => {
       console.log('log metadata:', parseDockerLogMetadata(log));
       try {
         // parse log metadata before sending to the UI
-        // send('nodeLogs', parseDockerLogMetadata(log));
-        send('nodeLogs', log);
+        send('nodeLogs', parseDockerLogMetadata(log));
+        // send('nodeLogs', log);
       } catch (err) {
         logger.error(`Error parsing docker event log ${log}`, err);
       }
diff --git a/src/renderer/App.tsx b/src/renderer/App.tsx
index a1e12d086..a40a0bce8 100644
--- a/src/renderer/App.tsx
+++ b/src/renderer/App.tsx
@@ -5,7 +5,6 @@ import * as Sentry from '@sentry/electron/renderer';
 import './Generics/redesign/globalStyle.css';
 import './reset.css';
 import { useAppDispatch } from './state/hooks';
-import Footer from './Footer/Footer';
 import { initialize as initializeIpcListeners } from './ipc';
 import NodeScreen from './NodeScreen';
 import DataRefresher from './DataRefresher';
@@ -89,7 +88,6 @@ const MainScreen = () => {
             <NodeScreen />
           </div>
 
-          <Footer />
           <DataRefresher />
           {/* Todo: remove this when Modal Manager is created */}
           <Modal
diff --git a/src/renderer/Footer/Debugging.tsx b/src/renderer/Footer/Debugging.tsx
deleted file mode 100644
index f0fd9243f..000000000
--- a/src/renderer/Footer/Debugging.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import { useCallback, useEffect, useState } from 'react';
-import { useAppSelector } from '../state/hooks';
-import { selectSelectedNode, selectSelectedNodeId } from '../state/node';
-
-import electron from '../electronGlobal';
-import MenuDrawer from './MenuDrawer';
-
-type Props = {
-  isOpen: boolean | undefined;
-  onClickCloseButton: () => void;
-};
-
-const Debugging = ({ isOpen, onClickCloseButton }: Props) => {
-  const sSelectedNodeId = useAppSelector(selectSelectedNodeId);
-  const sSelectedNode = useAppSelector(selectSelectedNode);
-  const [sLogs, setLogs] = useState<string[]>([]);
-
-  const nodeLogsListener = (message: string[]) => {
-    // console.log('sLogs: ', message);
-    setLogs((prevState) => {
-      if (prevState.length < 1000) {
-        return [...prevState, message[0]];
-      }
-      return [message[0]];
-    });
-  };
-
-  const listenForNodeLogs = useCallback(async () => {
-    electron.ipcRenderer.on('nodeLogs', nodeLogsListener);
-  }, []);
-
-  useEffect(() => {
-    if (isOpen) {
-      console.log('Debugging.tsx: isOpen. Listening for logs.');
-      listenForNodeLogs();
-    } else {
-      setLogs([]);
-      console.log(
-        'Debugging.tsx: isclosed. Clear logs and removeAllListeners.'
-      );
-      electron.ipcRenderer.removeAllListeners('nodeLogs');
-    }
-    return () => electron.ipcRenderer.removeAllListeners('nodeLogs');
-  }, [isOpen, listenForNodeLogs]);
-
-  useEffect(() => {
-    // when switching selected nodes...
-    // if none selected, send stop
-    // if one is selected, ask for those logs
-    setLogs([]);
-    console.log('Debugging.tsx: isOpen, sSelectedNodeId changed. Clear logs.');
-    if (isOpen && sSelectedNodeId) {
-      electron.sendNodeLogs(sSelectedNodeId);
-      console.log(
-        'Debugging.tsx: isOpen && sSelectedNodeId truthy. Send selected node logs'
-      );
-    } else {
-      console.log(
-        'Debugging.tsx: isOpen && sSelectedNodeId falsy. stopSendingNodeLogs'
-      );
-      electron.stopSendingNodeLogs();
-    }
-    return () => {
-      electron.stopSendingNodeLogs();
-    };
-  }, [isOpen, sSelectedNodeId]);
-
-  return (
-    <MenuDrawer
-      title={`${sSelectedNode?.spec.displayName} Logs`}
-      isSelected={!!isOpen}
-      onClickCloseButton={onClickCloseButton}
-    >
-      <em>Newest logs at the top</em>
-      <div
-        style={{
-          overflow: 'auto',
-          display: 'flex',
-          flexDirection: 'column-reverse',
-        }}
-      >
-        {sLogs.map((log, index) => {
-          return (
-            // eslint-disable-next-line react/no-array-index-key
-            <p key={`${index} ${log}`} style={{ marginBlockEnd: 0 }}>
-              {log}
-            </p>
-          );
-        })}
-      </div>
-    </MenuDrawer>
-  );
-};
-export default Debugging;
diff --git a/src/renderer/Footer/Docker.tsx b/src/renderer/Footer/Docker.tsx
deleted file mode 100644
index d673e1301..000000000
--- a/src/renderer/Footer/Docker.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { useEffect } from 'react';
-
-import MenuDrawer from './MenuDrawer';
-import { useGetIsDockerInstalledQuery } from '../state/settingsService';
-import InstallDocker from '../Docker/InstallDocker';
-
-type Props = {
-  isOpen: boolean | undefined;
-  onClickCloseButton: () => void;
-};
-
-const Docker = ({ isOpen, onClickCloseButton }: Props) => {
-  const qIsDockerInstalled = useGetIsDockerInstalledQuery();
-  useEffect(() => {
-    if (isOpen) {
-      qIsDockerInstalled.refetch();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isOpen]);
-
-  return (
-    <MenuDrawer
-      title="Docker"
-      isSelected={!!isOpen}
-      onClickCloseButton={onClickCloseButton}
-    >
-      <div style={{ flex: 1, overflow: 'auto' }}>
-        <InstallDocker />
-      </div>
-    </MenuDrawer>
-  );
-};
-export default Docker;
diff --git a/src/renderer/Footer/Footer.tsx b/src/renderer/Footer/Footer.tsx
deleted file mode 100644
index 7f494f36d..000000000
--- a/src/renderer/Footer/Footer.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-import { VscDebugConsole } from 'react-icons/vsc';
-import { AiOutlineAreaChart } from 'react-icons/ai';
-import { FaDocker } from 'react-icons/fa';
-import { useEffect, useState } from 'react';
-
-import IconButton from '../IconButton';
-import Monitoring from './Monitoring';
-import Debugging from './Debugging';
-import electron from '../electronGlobal';
-import Docker from './Docker';
-import { useGetIsDockerInstalledQuery } from '../state/settingsService';
-
-export const FOOTER_HEIGHT = 64;
-
-const Footer = () => {
-  const [sSelectedMenuDrawer, setSelectedMenuDrawer] = useState<string>();
-  const [sNiceNodeVersion, setNiceNodeVersion] = useState<string>();
-  const qIsDockerInstalled = useGetIsDockerInstalledQuery();
-  const isDockerInstalled = qIsDockerInstalled?.data;
-
-  const onCloseDrawer = () => {
-    setSelectedMenuDrawer(undefined);
-  };
-
-  const getNiceNodeVersion = async () => {
-    const debugInfo = await electron.getDebugInfo();
-    if (
-      debugInfo?.niceNodeVersion &&
-      typeof debugInfo.niceNodeVersion === 'string'
-    ) {
-      setNiceNodeVersion(debugInfo.niceNodeVersion);
-    }
-  };
-
-  useEffect(() => {
-    getNiceNodeVersion();
-  }, []);
-
-  return (
-    <div
-      style={{
-        height: FOOTER_HEIGHT,
-        display: 'flex',
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'center',
-        paddingLeft: 10,
-        paddingRight: 10,
-      }}
-    >
-      <IconButton
-        type="button"
-        onClick={() => {
-          setSelectedMenuDrawer(
-            sSelectedMenuDrawer === 'monitoring' ? undefined : 'monitoring'
-          );
-        }}
-        style={{
-          borderBottom:
-            sSelectedMenuDrawer === 'monitoring' ? '2px solid' : 'none',
-          borderTop:
-            sSelectedMenuDrawer === 'monitoring' ? '2px solid' : 'none',
-        }}
-      >
-        <AiOutlineAreaChart />
-      </IconButton>
-      <IconButton
-        type="button"
-        onClick={() => {
-          setSelectedMenuDrawer(
-            sSelectedMenuDrawer === 'debugging' ? undefined : 'debugging'
-          );
-        }}
-        style={{
-          borderBottom:
-            sSelectedMenuDrawer === 'debugging' ? '2px solid' : 'none',
-          borderTop: sSelectedMenuDrawer === 'debugging' ? '2px solid' : 'none',
-        }}
-      >
-        <VscDebugConsole />
-      </IconButton>
-      {!isDockerInstalled && (
-        <IconButton
-          type="button"
-          onClick={() => {
-            setSelectedMenuDrawer(
-              sSelectedMenuDrawer === 'docker' ? undefined : 'docker'
-            );
-          }}
-          style={{
-            borderBottom:
-              sSelectedMenuDrawer === 'docker' ? '2px solid' : 'none',
-            borderTop: sSelectedMenuDrawer === 'docker' ? '2px solid' : 'none',
-          }}
-        >
-          <FaDocker />
-        </IconButton>
-      )}
-      <div style={{ position: 'fixed', right: 10, fontSize: 14 }}>
-        <span>v{sNiceNodeVersion}</span>
-      </div>
-      <Debugging
-        isOpen={sSelectedMenuDrawer === 'debugging'}
-        onClickCloseButton={onCloseDrawer}
-      />
-      <Monitoring
-        isOpen={sSelectedMenuDrawer === 'monitoring'}
-        onClickCloseButton={onCloseDrawer}
-      />
-      {!isDockerInstalled && (
-        <Docker
-          isOpen={sSelectedMenuDrawer === 'docker'}
-          onClickCloseButton={onCloseDrawer}
-        />
-      )}
-    </div>
-  );
-};
-export default Footer;
diff --git a/src/renderer/Footer/MenuDrawer.tsx b/src/renderer/Footer/MenuDrawer.tsx
deleted file mode 100644
index 9982289ff..000000000
--- a/src/renderer/Footer/MenuDrawer.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import { CgCloseO } from 'react-icons/cg';
-import React from 'react';
-import styled from 'styled-components';
-
-import IconButton from '../IconButton';
-
-import { HEADER_HEIGHT } from '../Header';
-// eslint-disable-next-line import/no-cycle
-// import { FOOTER_HEIGHT } from './Footer';
-
-const LEFT_SIDEBAR_WIDTH = 100;
-const FOOTER_HEIGHT = 64;
-
-const MenuDrawerStyled = styled.div`
-  display: box;
-  &.show {
-    bottom: ${FOOTER_HEIGHT}px;
-  }
-  &.hidde {
-    bottom: calc(-100vh - ${FOOTER_HEIGHT}px);
-  }
-  position: fixed;
-  width: calc(100vw - ${LEFT_SIDEBAR_WIDTH}px);
-  margin-left: ${LEFT_SIDEBAR_WIDTH}px;
-  // height of screen - footer height - header height
-  height: calc(100vh - ${FOOTER_HEIGHT}px - ${HEADER_HEIGHT}px);
-  transition: bottom 0.2s ease-out 0s;
-  background: linear-gradient(
-    -160.96deg,
-    #7a2c9e -29.09%,
-    #dd5789 51.77%,
-    #fedc2a 129.35%
-  );
-  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
-  padding-bottom: 20px;
-  padding-left: 10px;
-  padding-right: 10px;
-  box-sizing: border-box;
-`;
-
-type Props = {
-  title: string;
-  isSelected: boolean;
-  onClickCloseButton: () => void;
-  children: React.ReactNode;
-};
-
-const MenuDrawer: React.FC<Props> = (props) => {
-  const { title, isSelected, onClickCloseButton, children } = props;
-  return (
-    <MenuDrawerStyled className={isSelected ? 'show' : 'hidde'}>
-      <div
-        style={{
-          display: 'flex',
-          flexDirection: 'column',
-          height: '100%',
-          marginLeft: 15,
-          marginRight: 15,
-        }}
-      >
-        <div style={{ display: 'flex' }}>
-          <h1 style={{ flexGrow: 1 }}>{title}</h1>
-          <IconButton
-            type="button"
-            onClick={onClickCloseButton}
-            style={{ paddingRight: 0 }}
-          >
-            <CgCloseO />
-          </IconButton>
-        </div>
-        <div style={{ flex: 1, overflow: 'auto' }}>{children}</div>
-      </div>
-    </MenuDrawerStyled>
-  );
-};
-export default MenuDrawer;
diff --git a/src/renderer/Footer/Monitoring.tsx b/src/renderer/Footer/Monitoring.tsx
deleted file mode 100644
index 6353dca10..000000000
--- a/src/renderer/Footer/Monitoring.tsx
+++ /dev/null
@@ -1,187 +0,0 @@
-import { useEffect, useState } from 'react';
-import ReactJson from 'react-json-view';
-
-import electron from '../electronGlobal';
-import MenuDrawer from './MenuDrawer';
-import { useAppSelector } from '../state/hooks';
-import { selectNumFreeDiskGB, selectSelectedNode } from '../state/node';
-// import { Checklist } from '../Generics/redesign/Checklist/Checklist';
-
-import { SystemMonitor } from '../Generics/redesign/SystemMonitor/SystemMonitor';
-
-type Props = {
-  isOpen: boolean | undefined;
-  onClickCloseButton: () => void;
-};
-
-const Monitoring = ({ isOpen, onClickCloseButton }: Props) => {
-  const selectedNode = useAppSelector(selectSelectedNode);
-  const sFreeDisk = useAppSelector(selectNumFreeDiskGB);
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const [sMonitoringData, setMonitoringData] = useState<any>();
-  const [sNodeDiskUsed, setNodeDiskUsed] = useState<number>();
-  const [sNodeMemoryUsed, setNodeMemoryUsed] = useState<number>();
-  const [sNodeCpuUsed, setNodeCpuUsed] = useState<number>();
-
-  useEffect(() => {
-    let diskUsed;
-    let memory;
-    let cpu;
-    if (selectedNode) {
-      diskUsed = selectedNode.runtime.usage.diskGBs ?? undefined;
-      memory = selectedNode.runtime.usage.memoryBytes ?? undefined;
-      cpu = selectedNode.runtime.usage.cpuPercent ?? undefined;
-    }
-    setNodeDiskUsed(diskUsed);
-    setNodeMemoryUsed(memory);
-    setNodeCpuUsed(cpu);
-  }, [selectedNode]);
-
-  const getMonitoringData = async () => {
-    const rendererProcessUsage = await electron.getRendererProcessUsage();
-    const mainProcessUsage = await electron.getMainProcessUsage();
-
-    // --- Memory ---
-    // let totalMemoryUsed = 0;
-    // if (nodeUsage?.memory) {
-    //   nodeUsage.memory *= 1e-9;
-    //   totalMemoryUsed += nodeUsage.memory;
-    // }
-    if (rendererProcessUsage?.memory?.residentSet) {
-      rendererProcessUsage.memory.residentSet *= 1e-9;
-      // totalMemoryUsed += rendererProcessUsage.memory.residentSet;
-    }
-    if (mainProcessUsage?.memory?.residentSet) {
-      mainProcessUsage.memory.residentSet *= 1e-9;
-      // totalMemoryUsed += mainProcessUsage.memory.residentSet;
-    }
-    let uiMemoryUsage;
-    // https://thewebdev.info/2022/01/08/how-to-programmatically-get-memory-usage-in-chrome-with-javascript/
-    if (typeof window?.performance?.memory?.usedJSHeapSize === 'number') {
-      uiMemoryUsage = window.performance.memory.usedJSHeapSize * 1e-9;
-      // totalMemoryUsed += uiMemoryUsage;
-    }
-    if (uiMemoryUsage) {
-      uiMemoryUsage = `${uiMemoryUsage.toFixed(3)}GB`;
-    }
-    // let totalMemoryUsedStr;
-    // if (totalMemoryUsed) {
-    //   totalMemoryUsedStr = `Total memory used: ${totalMemoryUsed.toFixed(3)}GB`;
-    // }
-
-    // --- CPU ---
-    // let totalCpuUsed = 0;
-    // if (nodeUsage?.cpu) {
-    //   totalCpuUsed += nodeUsage.cpu;
-    // }
-    // if (rendererProcessUsage?.cpu?.percentCPUUsage) {
-    //   totalCpuUsed += rendererProcessUsage.cpu.percentCPUUsage;
-    // }
-    // if (mainProcessUsage?.cpu?.percentCPUUsage) {
-    //   totalCpuUsed += rendererProcessUsage.cpu.percentCPUUsage;
-    // }
-    // let totalCpuUsedStr;
-    // if (totalCpuUsed) {
-    //   totalCpuUsedStr = `Total cpu used: ${totalCpuUsed.toFixed(
-    //     1
-    //   )}% of virtual CPU cores`;
-    // }
-    setMonitoringData({
-      // total: {
-      //   memory: totalMemoryUsedStr,
-      //   cpu: totalCpuUsedStr,
-      // },
-      // nodeProcess: nodeUsage,
-      uiMemoryUsage,
-      rendererProcess: rendererProcessUsage,
-      mainProcess: mainProcessUsage,
-    });
-  };
-
-  useEffect(() => {
-    getMonitoringData();
-  }, []);
-
-  useEffect(() => {
-    if (isOpen) {
-      getMonitoringData();
-    }
-  }, [isOpen]);
-
-  return (
-    <MenuDrawer
-      title="Monitoring"
-      isSelected={!!isOpen}
-      onClickCloseButton={onClickCloseButton}
-    >
-      <div style={{ flex: 1, overflow: 'auto' }}>
-        <h2>Storage</h2>
-        <div>
-          {/* <p>Node: {selectedNode && JSON.stringify(selectedNode.runtime)}</p> */}
-          {sNodeDiskUsed !== undefined && (
-            <h4>Storage used by node: {sNodeDiskUsed.toFixed(1)} GB</h4>
-          )}
-          {sFreeDisk !== undefined && (
-            <h4>Storage available: {sFreeDisk.toFixed(1)} GB</h4>
-          )}
-        </div>
-        <h2>Memory</h2>
-        <p>{sMonitoringData?.total?.memory}</p>
-        <p>
-          {`Memory used by ${selectedNode?.spec.displayName}: `}
-          {sNodeMemoryUsed
-            ? `${(sNodeMemoryUsed * 1e-9).toFixed(2)} GB`
-            : 'N/A'}
-        </p>
-        <h2>CPU</h2>
-        <p>{sMonitoringData?.total?.cpu}</p>
-        <p>
-          {`CPU used by ${selectedNode?.spec.displayName}: `}
-          {sNodeCpuUsed ? `${sNodeCpuUsed}%` : 'N/A'}
-        </p>
-        <h2>All available metrics</h2>
-        <ReactJson
-          src={sMonitoringData}
-          theme="monokai"
-          displayDataTypes={false}
-          enableClipboard={false}
-          style={{ overflow: 'auto', maxHeight: '80%' }}
-        />
-      </div>
-      <hr />
-      <div>
-        <SystemMonitor />
-        {/* <Checklist
-          items={[
-            {
-              status: 'loading',
-              checkTitle: 'Processor supported by clients',
-            },
-            {
-              status: 'complete',
-              checkTitle: 'At least 4GB of system memory (RAM)',
-              valueText: 'System memory: 32GB',
-            },
-            {
-              status: 'incomplete',
-              checkTitle: 'Storage disk type is SSD',
-              valueText: 'Disk type: Hard Disk Drive (HDD).',
-              captionText:
-                'While SSD is recommended you are still able to run a node with a HDD if you have 8GB or more of system memory (RAM) available.',
-            },
-            {
-              status: 'error',
-              checkTitle: 'Available disk space for fast sync is 500GB or more',
-              valueText:
-                'Selected disk: Macintosh HD with only 126GB free disk space.',
-              captionText:
-                ' Additional storage capacity is require to run this node type! Consider adding an external SSD.',
-            },
-          ]}
-          title="Node requirements"
-        /> */}
-      </div>
-    </MenuDrawer>
-  );
-};
-export default Monitoring;
diff --git a/src/renderer/Footer/NiceNodeSettings.tsx b/src/renderer/Footer/NiceNodeSettings.tsx
deleted file mode 100644
index 5f86e244a..000000000
--- a/src/renderer/Footer/NiceNodeSettings.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import { useEffect, useState } from 'react';
-import electron from '../electronGlobal';
-
-const NiceNodeSettings = () => {
-  const [sShouldCheckForUpdates, setShouldCheckForUpdates] =
-    useState<boolean>();
-
-  const getShouldCheckForUpdates = async () => {
-    const shouldCheckForUpdates = await electron.getStoreValue(
-      'settings.shouldCheckForUpdates'
-    );
-    setShouldCheckForUpdates(shouldCheckForUpdates);
-  };
-
-  const saveShouldCheckForUpdates = async (value: boolean) => {
-    await electron.setStoreValue('settings.shouldCheckForUpdates', value);
-    // todo: if fails, show user
-    setShouldCheckForUpdates(value);
-  };
-
-  useEffect(() => {
-    getShouldCheckForUpdates();
-  }, []);
-
-  return (
-    <>
-      <h2>NiceNode</h2>
-      <h3>Updates</h3>
-      <div
-        style={{
-          display: 'flex',
-          flexDirection: 'row',
-          alignItems: 'start',
-          marginBottom: 10,
-        }}
-      >
-        <form>
-          <label htmlFor="shouldCheckForUpdates">
-            <input
-              id="shouldCheckForUpdates"
-              type="checkbox"
-              name="shouldCheckForUpdates"
-              checked={sShouldCheckForUpdates}
-              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                saveShouldCheckForUpdates(e.target.checked)
-              }
-            />
-            Check for updates
-          </label>
-          {/* <label htmlFor="shouldAutoInstallUpdates">
-            <input
-              id="shouldAutoInstallUpdates"
-              type="checkbox"
-              name="shouldAutoInstallUpdates"
-              checked={sShouldCheckForUpdates}
-              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                saveShouldCheckForUpdates(e.target.checked)
-              }
-            />
-            Automatically install updates (restarts NiceNode)
-          </label> */}
-        </form>
-      </div>
-    </>
-  );
-};
-export default NiceNodeSettings;
diff --git a/src/renderer/Generics/redesign/Button/Button.tsx b/src/renderer/Generics/redesign/Button/Button.tsx
index c6c260c27..a9fc7610b 100644
--- a/src/renderer/Generics/redesign/Button/Button.tsx
+++ b/src/renderer/Generics/redesign/Button/Button.tsx
@@ -10,6 +10,7 @@ import {
   iconStyle,
   ghostButton,
   dangerButton,
+  spaceBetweenButton,
 } from './button.css';
 
 export interface ButtonProps {
@@ -20,6 +21,7 @@ export interface ButtonProps {
   disabled?: boolean;
   backgroundColor?: string;
   ghost?: boolean;
+  spaceBetween?: boolean;
   size?: 'small' | 'medium' | 'large';
   /**
    * Text only, with icon, or just icon?
@@ -51,6 +53,7 @@ const Button = ({
   variant = 'text',
   type = 'secondary',
   iconId = 'settings',
+  spaceBetween = false,
   wide = false,
   ghost = false,
   backgroundColor,
@@ -78,6 +81,9 @@ const Button = ({
   if (wide) {
     classNames.push(wideButton);
   }
+  if (spaceBetween) {
+    classNames.push(spaceBetweenButton);
+  }
 
   return (
     <button
diff --git a/src/renderer/Generics/redesign/Button/button.css.ts b/src/renderer/Generics/redesign/Button/button.css.ts
index 90046ce77..e6ea5f8eb 100644
--- a/src/renderer/Generics/redesign/Button/button.css.ts
+++ b/src/renderer/Generics/redesign/Button/button.css.ts
@@ -3,6 +3,7 @@ import { common, vars } from '../theme.css';
 
 export const baseButton = style({
   cursor: 'pointer',
+  userSelect: 'none',
   boxSizing: 'border-box',
   display: 'flex',
   flexDirection: 'row',
@@ -48,6 +49,10 @@ export const wideButton = style({
   width: '100%',
 });
 
+export const spaceBetweenButton = style({
+  justifyContent: 'space-between',
+});
+
 export const primaryButton = style({
   color: common.color.white100,
   background: vars.color.primary,
diff --git a/src/renderer/Generics/redesign/ContentHeader/ContentHeader.tsx b/src/renderer/Generics/redesign/ContentHeader/ContentHeader.tsx
new file mode 100644
index 000000000..4479c4b23
--- /dev/null
+++ b/src/renderer/Generics/redesign/ContentHeader/ContentHeader.tsx
@@ -0,0 +1,74 @@
+import { HeaderButton } from '../HeaderButton/HeaderButton';
+import {
+  container,
+  textContainer,
+  titleStyle,
+  subtitleStyle,
+  spacer,
+} from './contentHeader.css';
+
+export interface ContentHeaderProps {
+  /**
+   * What's the text alignment?
+   */
+  textAlign?: string;
+  /**
+   * What's the title?
+   */
+  title: string;
+  /**
+   * What's the subtitle?
+   */
+  subtitle?: string;
+  /**
+   * Is there left button?
+   */
+  leftButtonIconId?: string;
+  /**
+   * Is there onClick event on the left button?
+   */
+  leftButtonOnClick?: () => void;
+  /**
+   * Is there right button?
+   */
+  rightButtonIconId?: string;
+  /**
+   * Is there onClick event on the right button?
+   */
+  rightButtonOnClick?: () => void;
+  /**
+   * Is this transparent?
+   */
+  transparent?: boolean;
+}
+
+/**
+ * Primary UI component for user interaction
+ */
+export const ContentHeader = ({
+  title,
+  subtitle,
+  leftButtonIconId,
+  leftButtonOnClick = () => {},
+  rightButtonIconId,
+  rightButtonOnClick = () => {},
+  transparent,
+  textAlign,
+}: ContentHeaderProps) => {
+  const transparentStyle = transparent ? 'transparent' : '';
+  return (
+    <div className={[container, transparentStyle].join(' ')}>
+      {leftButtonIconId && (
+        <HeaderButton type={leftButtonIconId} onClick={leftButtonOnClick} />
+      )}
+      <div className={[textContainer, textAlign].join(' ')}>
+        <div className={titleStyle}>{title}</div>
+        <div className={subtitleStyle}>{subtitle}</div>
+      </div>
+      {textAlign === 'left' && <div className={spacer} />}
+      {rightButtonIconId && (
+        <HeaderButton type={rightButtonIconId} onClick={rightButtonOnClick} />
+      )}
+    </div>
+  );
+};
diff --git a/src/renderer/Generics/redesign/ContentHeader/contentHeader.css.ts b/src/renderer/Generics/redesign/ContentHeader/contentHeader.css.ts
new file mode 100644
index 000000000..636eecf39
--- /dev/null
+++ b/src/renderer/Generics/redesign/ContentHeader/contentHeader.css.ts
@@ -0,0 +1,65 @@
+import { style } from '@vanilla-extract/css';
+import { vars } from '../theme.css';
+
+// required to export even if not using in a component
+export const container = style({
+  boxSizing: 'border-box',
+  color: vars.color.font70,
+  borderBottom: vars.components.contentHeaderBorderBottom,
+  boxShadow: vars.color.elevation2boxShadow,
+  backgroundColor: vars.components.contentHeaderBackground,
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  padding: '12px 14px',
+  position: 'relative',
+  height: 52,
+  width: '100%',
+  selectors: {
+    [`&.transparent`]: {
+      backgroundColor: 'transparent',
+      borderBottom: 'none',
+    },
+  },
+});
+
+export const textContainer = style({
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  textAlign: 'center',
+  selectors: {
+    [`&.left`]: {
+      marginLeft: 12,
+    },
+  },
+});
+
+export const titleStyle = style({
+  fontWeight: 510,
+  fontSize: '13px',
+  lineHeight: '16px',
+  letterSpacing: '-0.12px',
+  color: vars.components.contentHeaderTitle,
+  flex: 'none',
+  order: 0,
+  alignSelf: 'stretch',
+  flexGrow: 0,
+});
+
+export const spacer = style({
+  flex: 1,
+});
+
+export const subtitleStyle = style({
+  fontWeight: 400,
+  fontSize: '11px',
+  lineHeight: '14px',
+  color: vars.components.contentHeaderSubtitle,
+  flex: 'none',
+  order: 1,
+  alignSelf: 'stretch',
+  flexGrow: 0,
+});
diff --git a/src/renderer/Generics/redesign/Header/Header.tsx b/src/renderer/Generics/redesign/Header/Header.tsx
index ebb3b5951..e00124578 100644
--- a/src/renderer/Generics/redesign/Header/Header.tsx
+++ b/src/renderer/Generics/redesign/Header/Header.tsx
@@ -19,6 +19,7 @@ import {
   menuButtonContainer,
 } from './header.css';
 import NodeSettingsWrapper from '../../../Presentational/NodeSettingsModal/NodeSettingsWrapper';
+import LogsModal from '../../../Presentational/NodeLogsModal/LogsModal';
 
 /**
  * Primary UI component for user interaction
@@ -31,6 +32,7 @@ export const Header = (props: NodeOverviewProps) => {
     useState<boolean>(false);
   const [sIsSettingsModalOpen, setIsSettingsModalOpen] =
     useState<boolean>(false);
+  const [sIsLogsModalOpen, setIsLogsModalOpen] = useState<boolean>(false);
 
   const startStopButtonProps: ButtonProps = {
     label: '',
@@ -114,7 +116,12 @@ export const Header = (props: NodeOverviewProps) => {
           primary={startStopButtonProps.iconId === 'play'}
         />
         {logsButtonProps !== undefined && (
-          <Button {...logsButtonProps} variant="icon-left" size="small" />
+          <Button
+            {...logsButtonProps}
+            variant="icon-left"
+            size="small"
+            onClick={() => setIsLogsModalOpen(true)}
+          />
         )}
         <div
           className={menuButtonContainer}
@@ -180,6 +187,10 @@ export const Header = (props: NodeOverviewProps) => {
         isOpen={sIsSettingsModalOpen}
         onClickClose={() => setIsSettingsModalOpen(false)}
       />
+      <LogsModal
+        isOpen={sIsLogsModalOpen}
+        onClickClose={() => setIsLogsModalOpen(false)}
+      />
     </div>
   );
 };
diff --git a/src/renderer/Generics/redesign/HeaderButton/HeaderButton.tsx b/src/renderer/Generics/redesign/HeaderButton/HeaderButton.tsx
index 86537b2ff..caad81cb1 100644
--- a/src/renderer/Generics/redesign/HeaderButton/HeaderButton.tsx
+++ b/src/renderer/Generics/redesign/HeaderButton/HeaderButton.tsx
@@ -6,7 +6,7 @@ export interface HeaderButtonProps {
   /**
    * Type?
    */
-  type: 'left' | 'close' | 'filter' | 'down';
+  type: string;
   /**
    * onClick
    */
diff --git a/src/renderer/Generics/redesign/HeaderButton/headerButton.css.ts b/src/renderer/Generics/redesign/HeaderButton/headerButton.css.ts
index 22a67c8a7..71c9215d2 100644
--- a/src/renderer/Generics/redesign/HeaderButton/headerButton.css.ts
+++ b/src/renderer/Generics/redesign/HeaderButton/headerButton.css.ts
@@ -2,6 +2,7 @@ import { style } from '@vanilla-extract/css';
 import { vars } from '../theme.css';
 
 export const container = style({
+  boxSizing: 'border-box',
   flex: 'none',
   display: 'flex',
   flexDirection: 'row',
diff --git a/src/renderer/Generics/redesign/Input/Input.tsx b/src/renderer/Generics/redesign/Input/Input.tsx
index a3a0ff841..ff94dd991 100644
--- a/src/renderer/Generics/redesign/Input/Input.tsx
+++ b/src/renderer/Generics/redesign/Input/Input.tsx
@@ -1,8 +1,24 @@
-import { container } from './input.css';
+import { ChangeEvent } from 'react';
+import { IconId } from 'renderer/assets/images/icons';
+import { Icon } from '../Icon/Icon';
+import {
+  container,
+  inputContainer,
+  leftIconContainer,
+  rightIconContainer,
+} from './input.css';
 
 export interface InputProps {
   /**
-   *  Control the input by passing a value
+   *  Is there a left icon?
+   */
+  leftIconId?: IconId;
+  /**
+   *  Is there a right icon?
+   */
+  rightIconId?: IconId;
+  /**
+   *  Is there a left icon?
    */
   value?: string;
   /**
@@ -21,28 +37,47 @@ export interface InputProps {
 }
 
 const Input = ({
+  leftIconId,
+  rightIconId,
   value,
   placeholder,
   required,
   disabled,
-  onChange,
+  onChange = () => {},
 }: InputProps) => {
+  const onChangeAction = (evt: ChangeEvent<HTMLInputElement>) => {
+    if (onChange) {
+      onChange(evt.target.value);
+    }
+  };
+  const leftIconStyle = leftIconId ? 'leftIcon' : '';
+  const rightIconStyle = rightIconId ? 'rightIcon' : '';
   return (
-    <input
-      {...{
-        type: 'text',
-        className: [container].join(' '),
-        placeholder,
-        value,
-        onChange: (event) => {
-          if (onChange) {
-            onChange(event.target.value);
-          }
-        },
-        ...(disabled && { disabled }),
-        ...(required && { required }),
-      }}
-    />
+    <div className={container}>
+      {leftIconId && (
+        <div className={leftIconContainer}>
+          <Icon iconId={leftIconId} />
+        </div>
+      )}
+      <input
+        {...{
+          type: 'text',
+          className: [inputContainer, leftIconStyle, rightIconStyle].join(' '),
+          placeholder,
+          value,
+          ...(disabled && { disabled }),
+          ...(required && { required }),
+          onChange: (evt) => {
+            onChangeAction(evt);
+          },
+        }}
+      />
+      {rightIconId && (
+        <div className={rightIconContainer}>
+          <Icon iconId={rightIconId} />
+        </div>
+      )}
+    </div>
   );
 };
 export default Input;
diff --git a/src/renderer/Generics/redesign/Input/input.css.ts b/src/renderer/Generics/redesign/Input/input.css.ts
index ce4ba0366..7e3a43219 100644
--- a/src/renderer/Generics/redesign/Input/input.css.ts
+++ b/src/renderer/Generics/redesign/Input/input.css.ts
@@ -2,10 +2,31 @@ import { style } from '@vanilla-extract/css';
 import { common, vars } from '../theme.css';
 
 export const container = style({
+  position: 'relative',
+});
+
+export const leftIconContainer = style({
+  position: 'absolute',
+  left: 8,
+  top: 6,
+  color: vars.color.font70,
+});
+
+export const rightIconContainer = style({
+  position: 'absolute',
+  right: 8,
+  top: 6,
+  color: vars.color.font70,
+});
+
+export const inputContainer = style({
   height: '16px',
   display: 'block',
   width: '-webkit-fill-available',
-  padding: '6px 8px',
+  paddingTop: 6,
+  paddingBottom: 6,
+  paddingLeft: 8,
+  paddingRight: 8,
   backgroundColor: vars.color.background,
   backgroundClip: 'padding-box',
   color: 'inherit',
@@ -13,6 +34,14 @@ export const container = style({
   borderColor: vars.color.border,
   borderRadius: '4px',
   transition: 'border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out',
+  selectors: {
+    [`&.leftIcon`]: {
+      paddingLeft: 32,
+    },
+    [`&.rightIcon`]: {
+      paddingRight: 32,
+    },
+  },
   ':focus': {
     border: '1px solid',
     borderColor: vars.color.primary,
diff --git a/src/renderer/Generics/redesign/LogMessage/LogMessage.tsx b/src/renderer/Generics/redesign/LogMessage/LogMessage.tsx
new file mode 100644
index 000000000..8652af51b
--- /dev/null
+++ b/src/renderer/Generics/redesign/LogMessage/LogMessage.tsx
@@ -0,0 +1,34 @@
+import moment from 'moment';
+import {
+  container,
+  timestampStyle,
+  levelStyle,
+  messageStyle,
+} from './logMessage.css';
+
+export interface LogMessageProps {
+  /**
+   * Date
+   */
+  timestamp?: number;
+  /**
+   * Level
+   */
+  level?: string;
+  /**
+   * Message>
+   */
+  message: string;
+}
+
+export const LogMessage = ({ timestamp, level, message }: LogMessageProps) => {
+  return (
+    <div className={container}>
+      <div className={timestampStyle}>
+        {moment(timestamp).format('MMM DD HH:MM:ss:SSS')}
+      </div>
+      <div className={[levelStyle, `${level}`].join(' ')}>{level}</div>
+      <div className={messageStyle}>{message}</div>
+    </div>
+  );
+};
diff --git a/src/renderer/Generics/redesign/LogMessage/Logs.tsx b/src/renderer/Generics/redesign/LogMessage/Logs.tsx
new file mode 100644
index 000000000..b8573bdf9
--- /dev/null
+++ b/src/renderer/Generics/redesign/LogMessage/Logs.tsx
@@ -0,0 +1,329 @@
+import React, { SetStateAction, useState, useEffect } from 'react';
+import moment from 'moment';
+import {
+  container,
+  filterContainer,
+  textFilterContainer,
+  typeFilterContainer,
+  timeframeFilterContainer,
+  filterMenu,
+  logsContainer,
+  spacer,
+  clearFilters,
+} from './logs.css';
+import { Menu } from '../Menu/Menu';
+import { MenuItem } from '../MenuItem/MenuItem';
+import { LogMessage } from './LogMessage';
+import Input from '../Input/Input';
+import Button from '../Button/Button';
+import { ContentHeader } from '../ContentHeader/ContentHeader';
+import { LogWithMetadata } from '../../../../main/util/nodeLogUtils';
+
+export interface LogsProps {
+  /**
+   * sLogs props
+   */
+  sLogs: LogWithMetadata[];
+  onClickCloseButton: () => void;
+}
+
+const timeframes = {
+  '30MINUTES': 30,
+  '1HOUR': 60,
+  '6HOURS': 360,
+  '12HOURS': 720,
+  '1DAY': 1440,
+  '3DAYS': 4320,
+  '1WEEK': 10080,
+  '1MONTH': 43800,
+};
+
+type TimeframeLabelProps = {
+  [key: number]: string;
+};
+
+type TypeLabelProps = {
+  [key: string]: string;
+};
+
+const typeLabels: TypeLabelProps = {
+  '': 'All message types',
+  INFO: 'Info',
+  WARN: 'Warnings',
+  ERROR: 'Errors',
+};
+
+const timeframeLabels: TimeframeLabelProps = {
+  0: 'All timeframes',
+  30: 'Last 30 minutes',
+  60: 'Last hour',
+  360: 'Last 6 hours',
+  720: 'Last 12 hours',
+  1440: 'Last day',
+  4320: 'Last 3 days',
+  10080: 'Last week',
+  43800: 'Last month',
+};
+
+const isWithinTimeframe = (timestamp: number, timeframe: number) => {
+  const nowTime = moment().format();
+  const beforeTime = moment().subtract(timeframe, 'minutes').format();
+  return moment(timestamp).isBetween(beforeTime, nowTime);
+};
+
+export const Logs = ({ sLogs, onClickCloseButton }: LogsProps) => {
+  const [logs, setLogs] = useState<LogWithMetadata[]>([]);
+  const [isFilterBarDisplayed, setIsFilterBarDisplayed] =
+    useState<boolean>(false);
+  const [isTypeFilterDisplayed, setIsTypeFilterDisplayed] =
+    useState<boolean>(false);
+  const [isTimeframeFilterDisplayed, setIsTimeframeFilterDisplayed] =
+    useState<boolean>(false);
+  const [timeframeFilter, setTimeframeFilter] = useState<number>(0);
+  const [textFilter, setTextFilter] = useState<string>('');
+  const [typeFilter, setTypeFilter] = useState<string>('');
+  const onClickSetTypeFilter = (type: string) => {
+    if (typeFilter !== '') {
+      setTypeFilter('');
+    } else {
+      setTypeFilter(type);
+    }
+  };
+
+  const onClickSetTimeframeFilter = (timeframe: SetStateAction<number>) => {
+    if (timeframeFilter !== 0 && timeframeFilter === timeframe) {
+      setTimeframeFilter(0);
+    } else {
+      setTimeframeFilter(timeframe);
+    }
+  };
+
+  const filteredLogMessages = logs
+    .filter((log: LogWithMetadata) => {
+      if (
+        (typeFilter === '' || log.level === typeFilter) &&
+        (textFilter === '' || log.message.includes(textFilter)) &&
+        (timeframeFilter === 0 ||
+          (log.timestamp && isWithinTimeframe(log.timestamp, timeframeFilter)))
+      ) {
+        return true;
+      }
+      return false;
+    })
+    .map((log: LogWithMetadata) => (
+      <React.Fragment key={`${log.timestamp}${log.message}`}>
+        <LogMessage {...log} />
+      </React.Fragment>
+    ));
+
+  const filterExists =
+    timeframeFilter !== 0 || typeFilter !== '' || textFilter !== '';
+
+  const resetFilters = () => {
+    setTextFilter('');
+    setTypeFilter('');
+    setTimeframeFilter(0);
+  };
+
+  useEffect(() => {
+    setLogs(sLogs);
+  }, [sLogs]);
+
+  const typeLabel = typeLabels[typeFilter];
+  const timeframeLabel = timeframeLabels[timeframeFilter];
+
+  return (
+    <>
+      <div className={container}>
+        <div>
+          <ContentHeader
+            textAlign="left"
+            title="Logs"
+            leftButtonIconId="down"
+            rightButtonIconId="filter"
+            leftButtonOnClick={onClickCloseButton}
+            rightButtonOnClick={() => {
+              if (isFilterBarDisplayed) {
+                setIsFilterBarDisplayed(false);
+              } else {
+                setIsFilterBarDisplayed(true);
+              }
+            }}
+          />
+          {isFilterBarDisplayed && (
+            <div className={filterContainer}>
+              <div className={textFilterContainer}>
+                <Input
+                  leftIconId="search"
+                  value={textFilter}
+                  placeholder="Search..."
+                  onChange={(text: string) => {
+                    setTextFilter(text);
+                  }}
+                />
+              </div>
+              <div
+                className={typeFilterContainer}
+                onBlur={(event) => {
+                  if (!event.currentTarget.contains(event.relatedTarget)) {
+                    setIsTypeFilterDisplayed(false);
+                  }
+                }}
+              >
+                <Button
+                  spaceBetween
+                  wide
+                  iconId="down"
+                  size="small"
+                  variant="icon-right"
+                  label={typeLabel}
+                  onClick={() => {
+                    if (isTypeFilterDisplayed) {
+                      setIsTypeFilterDisplayed(false);
+                    } else {
+                      setIsTypeFilterDisplayed(true);
+                    }
+                  }}
+                />
+                {isTypeFilterDisplayed && (
+                  <div className={filterMenu}>
+                    <Menu width={158}>
+                      <MenuItem
+                        variant="checkbox"
+                        selected={typeFilter === 'INFO'}
+                        status="blue"
+                        text="Info"
+                        onClick={() => onClickSetTypeFilter('INFO')}
+                      />
+                      <MenuItem
+                        variant="checkbox"
+                        selected={typeFilter === 'WARN'}
+                        status="orange"
+                        text="Warnings"
+                        onClick={() => onClickSetTypeFilter('WARN')}
+                      />
+                      <MenuItem
+                        variant="checkbox"
+                        selected={typeFilter === 'ERROR'}
+                        status="red"
+                        text="Errors"
+                        onClick={() => onClickSetTypeFilter('ERROR')}
+                      />
+                    </Menu>
+                  </div>
+                )}
+              </div>
+              <div
+                className={timeframeFilterContainer}
+                onBlur={(event) => {
+                  if (!event.currentTarget.contains(event.relatedTarget)) {
+                    setIsTimeframeFilterDisplayed(false);
+                  }
+                }}
+              >
+                <Button
+                  iconId="down"
+                  size="small"
+                  variant="icon-right"
+                  label={timeframeLabel}
+                  onClick={() => {
+                    if (isTimeframeFilterDisplayed) {
+                      setIsTimeframeFilterDisplayed(false);
+                    } else {
+                      setIsTimeframeFilterDisplayed(true);
+                    }
+                  }}
+                />
+                {isTimeframeFilterDisplayed && (
+                  <div className={filterMenu}>
+                    <Menu width={148}>
+                      <MenuItem
+                        text="Last 30 minutes"
+                        selectable
+                        selected={timeframeFilter === timeframes['30MINUTES']}
+                        onClick={() =>
+                          onClickSetTimeframeFilter(timeframes['30MINUTES'])
+                        }
+                      />
+                      <MenuItem
+                        text="Last hour"
+                        selectable
+                        selected={timeframeFilter === timeframes['1HOUR']}
+                        onClick={() =>
+                          onClickSetTimeframeFilter(timeframes['1HOUR'])
+                        }
+                      />
+                      <MenuItem
+                        text="Last 6 hours"
+                        selectable
+                        selected={timeframeFilter === timeframes['6HOURS']}
+                        onClick={() =>
+                          onClickSetTimeframeFilter(timeframes['6HOURS'])
+                        }
+                      />
+                      <MenuItem
+                        text="Last 12 hours"
+                        selectable
+                        selected={timeframeFilter === timeframes['12HOURS']}
+                        onClick={() =>
+                          onClickSetTimeframeFilter(timeframes['12HOURS'])
+                        }
+                      />
+                      <MenuItem
+                        text="Last day"
+                        selectable
+                        selected={timeframeFilter === timeframes['1DAY']}
+                        onClick={() =>
+                          onClickSetTimeframeFilter(timeframes['1DAY'])
+                        }
+                      />
+                      <MenuItem
+                        text="Last 3 days"
+                        selectable
+                        selected={timeframeFilter === timeframes['3DAYS']}
+                        onClick={() =>
+                          onClickSetTimeframeFilter(timeframes['3DAYS'])
+                        }
+                      />
+                      <MenuItem
+                        text="Last week"
+                        selectable
+                        selected={timeframeFilter === timeframes['1WEEK']}
+                        onClick={() =>
+                          onClickSetTimeframeFilter(timeframes['1WEEK'])
+                        }
+                      />
+                      <MenuItem
+                        text="Last month"
+                        selectable
+                        selected={timeframeFilter === timeframes['1MONTH']}
+                        onClick={() =>
+                          onClickSetTimeframeFilter(timeframes['1MONTH'])
+                        }
+                      />
+                    </Menu>
+                  </div>
+                )}
+              </div>
+              {filterExists && (
+                <>
+                  <div className={spacer} />
+                  <div
+                    tabIndex={0}
+                    role="button"
+                    className={clearFilters}
+                    onClick={resetFilters}
+                    onKeyDown={resetFilters}
+                  >
+                    Clear all filters
+                  </div>
+                </>
+              )}
+            </div>
+          )}
+        </div>
+        <div className={logsContainer}>{filteredLogMessages}</div>
+      </div>
+    </>
+  );
+};
diff --git a/src/renderer/Generics/redesign/LogMessage/logMessage.css.ts b/src/renderer/Generics/redesign/LogMessage/logMessage.css.ts
new file mode 100644
index 000000000..ce6ee3e0c
--- /dev/null
+++ b/src/renderer/Generics/redesign/LogMessage/logMessage.css.ts
@@ -0,0 +1,57 @@
+import { style } from '@vanilla-extract/css';
+import { vars, common } from '../theme.css';
+
+export const container = style({
+  boxSizing: 'border-box',
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'flex-start',
+  padding: '4px 0px',
+  gap: 8,
+  borderBottom: '1px solid rgba(0, 0, 2, 0.04)',
+  flex: 'none',
+  order: 2,
+  alignSelf: 'stretch',
+  flexGrow: 0,
+
+  color: vars.color.font90,
+  fontFamily: `'SF Mono', SFMono-Regular, ui-monospace,
+  'DejaVu Sans Mono', Menlo, Consolas, monospace`,
+  fontStyle: 'normal',
+  fontWeight: 400,
+  fontSize: '11px',
+  lineHeight: '14px',
+  letterSpacing: '0.24px',
+});
+
+export const timestampStyle = style({
+  width: 133,
+  flex: 'none',
+  order: 1,
+  flexGrow: 0,
+});
+
+export const levelStyle = style({
+  textTransform: 'uppercase',
+  width: 35,
+  flex: 'none',
+  order: 2,
+  flexGrow: 0,
+  selectors: {
+    [`&.INFO`]: {
+      color: common.color.blue600,
+    },
+    [`&.WARN`]: {
+      color: common.color.orange500,
+    },
+    [`&.ERROR`]: {
+      color: common.color.red500,
+    },
+  },
+});
+
+export const messageStyle = style({
+  order: 3,
+  flexGrow: 1,
+  overflowWrap: 'anywhere',
+});
diff --git a/src/renderer/Generics/redesign/LogMessage/logs.css.ts b/src/renderer/Generics/redesign/LogMessage/logs.css.ts
new file mode 100644
index 000000000..49d5d9193
--- /dev/null
+++ b/src/renderer/Generics/redesign/LogMessage/logs.css.ts
@@ -0,0 +1,64 @@
+import { style } from '@vanilla-extract/css';
+import { vars, common } from '../theme.css';
+
+export const container = style({
+  position: 'relative',
+  maxWidth: '100%',
+  width: 'inherit',
+  height: '100%',
+  display: 'flex',
+  flexDirection: 'column',
+});
+
+export const logsContainer = style({
+  padding: '7px 17px 0px 17px',
+  position: 'relative',
+  flexGrow: 1,
+  overflow: 'auto',
+});
+
+export const filterContainer = style({
+  width: '100%',
+  position: 'absolute',
+  boxSizing: 'border-box',
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'baseline',
+  padding: '8px 16px',
+  gap: 4,
+  background: vars.components.filterBackground,
+  borderBottom: vars.components.contentHeaderBorderBottom,
+  boxShadow: vars.color.elevation2boxShadow,
+  zIndex: 1,
+});
+
+export const textFilterContainer = style({
+  width: 200,
+});
+
+export const filterMenu = style({
+  position: 'absolute',
+  top: 34,
+  zIndex: 1,
+});
+
+export const typeFilterContainer = style({
+  width: 158,
+  position: 'relative',
+  textAlign: 'left',
+});
+
+export const timeframeFilterContainer = style({
+  width: 148,
+  position: 'relative',
+});
+
+export const spacer = style({
+  alignSelf: 'stretch',
+  flexGrow: 1,
+});
+
+export const clearFilters = style({
+  cursor: 'pointer',
+  color: common.color.purple600,
+});
diff --git a/src/renderer/Generics/redesign/Menu/Menu.tsx b/src/renderer/Generics/redesign/Menu/Menu.tsx
index d1b9f137c..e639c9d76 100644
--- a/src/renderer/Generics/redesign/Menu/Menu.tsx
+++ b/src/renderer/Generics/redesign/Menu/Menu.tsx
@@ -4,7 +4,7 @@ export interface MenuProps {
   /**
    * What's the width?
    */
-  width: number;
+  width?: number;
   /**
    * Menu Items?
    */
diff --git a/src/renderer/Generics/redesign/MenuItem/MenuItem.tsx b/src/renderer/Generics/redesign/MenuItem/MenuItem.tsx
index f2ee868e3..897666051 100644
--- a/src/renderer/Generics/redesign/MenuItem/MenuItem.tsx
+++ b/src/renderer/Generics/redesign/MenuItem/MenuItem.tsx
@@ -65,8 +65,10 @@ export const MenuItem = ({
   };
 
   return (
-    <div
+    // eslint-disable-next-line jsx-a11y/label-has-associated-control
+    <label
       tabIndex={0}
+      // eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role
       role="button"
       onKeyDown={onClickAction}
       className={[container, `${disabledStyle}`].join(' ')}
@@ -90,6 +92,6 @@ export const MenuItem = ({
           <Icon iconId="check" />
         </div>
       )}
-    </div>
+    </label>
   );
 };
diff --git a/src/renderer/Generics/redesign/Modal/Modal.tsx b/src/renderer/Generics/redesign/Modal/Modal.tsx
index adf78b5ed..a588fb900 100644
--- a/src/renderer/Generics/redesign/Modal/Modal.tsx
+++ b/src/renderer/Generics/redesign/Modal/Modal.tsx
@@ -11,7 +11,7 @@ type Props = {
   children: React.ReactNode;
   isOpen: boolean | undefined;
   onClickCloseButton: () => void;
-  title: string;
+  title?: string;
   isFullScreen?: boolean;
 };
 
diff --git a/src/renderer/Generics/redesign/Tooltip/Tooltip.tsx b/src/renderer/Generics/redesign/Tooltip/Tooltip.tsx
new file mode 100644
index 000000000..157d162f2
--- /dev/null
+++ b/src/renderer/Generics/redesign/Tooltip/Tooltip.tsx
@@ -0,0 +1,24 @@
+import { container, titleStyle, contentStyle } from './tooltip.css';
+
+export interface TooltipProps {
+  /**
+   * What's the title?
+   */
+  title: string;
+  /**
+   * Is there content?
+   */
+  content?: string;
+}
+
+/**
+ * Primary UI component for user interaction
+ */
+export const Tooltip = ({ title, content }: TooltipProps) => {
+  return (
+    <div className={container}>
+      <div className={titleStyle}>{title}</div>
+      <div className={contentStyle}>{content}</div>
+    </div>
+  );
+};
diff --git a/src/renderer/Generics/redesign/Tooltip/tooltip.css.ts b/src/renderer/Generics/redesign/Tooltip/tooltip.css.ts
new file mode 100644
index 000000000..1849e1a50
--- /dev/null
+++ b/src/renderer/Generics/redesign/Tooltip/tooltip.css.ts
@@ -0,0 +1,27 @@
+import { style } from '@vanilla-extract/css';
+import { vars } from '../theme.css';
+
+// required to export even if not using in a component
+export const container = style({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'flex-start',
+  padding: 8,
+  gap: 2,
+  fontSize: '11px',
+  lineHeight: '14px',
+  width: 177,
+  color: vars.color.font70,
+  border: vars.components.menuBorder,
+  boxShadow: vars.color.elevation4boxShadow,
+  backgroundColor: vars.components.menuBackground,
+  borderRadius: 5,
+});
+
+export const titleStyle = style({
+  fontWeight: 600,
+});
+
+export const contentStyle = style({
+  fontWeight: 400,
+});
diff --git a/src/renderer/Generics/redesign/theme.css.ts b/src/renderer/Generics/redesign/theme.css.ts
index c871475bc..6c62433f5 100644
--- a/src/renderer/Generics/redesign/theme.css.ts
+++ b/src/renderer/Generics/redesign/theme.css.ts
@@ -5,6 +5,7 @@ export const common = {
     white100: '#FFFFFF',
     white90: 'rgba(255, 255, 255, 0.90)',
     white85: 'rgba(255, 255, 255, 0.85)',
+    white80: 'rgba(255, 255, 255, 0.80)',
     white70: 'rgba(255, 255, 255, 0.70)',
     white50: 'rgba(255, 255, 255, 0.50)',
     white40: 'rgba(255, 255, 255, 0.40)',
@@ -17,6 +18,7 @@ export const common = {
     black100: '#000002',
     black90: 'rgba(0, 0, 2, 0.90)',
     black85: 'rgba(0, 0, 2, 0.85)',
+    black80: 'rgba(0, 0, 2, 0.80)',
     black70: 'rgba(0, 0, 2, 0.70)',
     black50: 'rgba(0, 0, 2, 0.50)',
     black40: 'rgba(0, 0, 2, 0.40)',
@@ -128,6 +130,7 @@ export const [lightTheme, vars] = createTheme({
     font40: common.color.black40,
     font50: common.color.black50,
     font70: common.color.black70,
+    font90: common.color.black90,
     fontDisabled: common.color.black25,
     background: common.color.white100,
     background96: common.color.black4,
@@ -205,6 +208,11 @@ export const [lightTheme, vars] = createTheme({
     checkboxBackground: common.color.white100,
     checkboxBorder: common.color.black25,
     menuItemSelectIcon: common.color.purple600,
+    contentHeaderBorderBottom: `1px solid ${common.color.black8}`,
+    contentHeaderBackground: common.color.white100,
+    contentHeaderTitle: common.color.black70,
+    contentHeaderSubtitle: common.color.black50,
+    filterBackground: common.color.white100,
   },
 });
 
@@ -217,6 +225,7 @@ export const darkTheme = createTheme(vars, {
     font40: common.color.white40,
     font50: common.color.white50,
     font70: common.color.white70,
+    font90: common.color.white90,
     fontDisabled: common.color.white25,
     background: 'rgba(28, 28, 30, 1)',
     background96: common.color.white4,
@@ -294,5 +303,10 @@ export const darkTheme = createTheme(vars, {
     checkboxBackground: common.color.osMac,
     checkboxBorder: common.color.white25,
     menuItemSelectIcon: common.color.purple500,
+    contentHeaderBorderBottom: `1px solid ${common.color.black40}`,
+    contentHeaderBackground: common.color.osMac,
+    contentHeaderTitle: common.color.white85,
+    contentHeaderSubtitle: common.color.white50,
+    filterBackground: common.color.osMac,
   },
 });
diff --git a/src/renderer/Presentational/NodeLogsModal/LogsModal.tsx b/src/renderer/Presentational/NodeLogsModal/LogsModal.tsx
new file mode 100644
index 000000000..bb01be5e8
--- /dev/null
+++ b/src/renderer/Presentational/NodeLogsModal/LogsModal.tsx
@@ -0,0 +1,75 @@
+import { useCallback, useEffect, useState } from 'react';
+import electron from '../../electronGlobal';
+import { LogWithMetadata } from '../../../main/util/nodeLogUtils';
+import { useAppSelector } from '../../state/hooks';
+import { selectSelectedNodeId } from '../../state/node';
+
+import { Logs } from '../../Generics/redesign/LogMessage/Logs';
+import { Modal } from '../../Generics/redesign/Modal/Modal';
+
+export type ThemeSetting = 'light' | 'dark' | 'auto';
+export type Preference = 'theme' | 'isOpenOnStartup';
+export interface LogsModalProps {
+  isOpen: boolean;
+  onClickClose: () => void;
+}
+
+const LogsModal = ({ isOpen, onClickClose }: LogsModalProps) => {
+  const sSelectedNodeId = useAppSelector(selectSelectedNodeId);
+  const [sLogs, setLogs] = useState<LogWithMetadata[]>([]);
+
+  const nodeLogsListener = (message: LogWithMetadata[]) => {
+    setLogs((prevState) => {
+      if (prevState.length < 1000) {
+        return [...prevState, message[0]];
+      }
+      return [message[0]];
+    });
+  };
+
+  const listenForNodeLogs = useCallback(async () => {
+    electron.ipcRenderer.on('nodeLogs', nodeLogsListener);
+  }, []);
+
+  useEffect(() => {
+    if (isOpen) {
+      console.log('LogsModal: isOpen. Listening for logs.');
+      listenForNodeLogs();
+    } else {
+      setLogs([]);
+      console.log('LogsModal: isclosed. Clear logs and removeAllListeners.');
+      electron.ipcRenderer.removeAllListeners('nodeLogs');
+    }
+    return () => electron.ipcRenderer.removeAllListeners('nodeLogs');
+  }, [isOpen, listenForNodeLogs]);
+
+  useEffect(() => {
+    // when switching selected nodes...
+    // if none selected, send stop
+    // if one is selected, ask for those logs
+    setLogs([]);
+    console.log('LogsModal: isOpen, sSelectedNodeId changed. Clear logs.');
+    if (isOpen && sSelectedNodeId) {
+      electron.sendNodeLogs(sSelectedNodeId);
+      console.log(
+        'LogsModal: isOpen && sSelectedNodeId truthy. Send selected node logs'
+      );
+    } else {
+      console.log(
+        'LogsModal: isOpen && sSelectedNodeId falsy. stopSendingNodeLogs'
+      );
+      electron.stopSendingNodeLogs();
+    }
+    return () => {
+      electron.stopSendingNodeLogs();
+    };
+  }, [isOpen, sSelectedNodeId]);
+
+  return (
+    <Modal isOpen={isOpen} isFullScreen onClickCloseButton={onClickClose}>
+      <Logs sLogs={sLogs} onClickCloseButton={onClickClose} />
+    </Modal>
+  );
+};
+
+export default LogsModal;
diff --git a/src/stories/Generic/ContentHeader.stories.tsx b/src/stories/Generic/ContentHeader.stories.tsx
new file mode 100644
index 000000000..de9827551
--- /dev/null
+++ b/src/stories/Generic/ContentHeader.stories.tsx
@@ -0,0 +1,23 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { ContentHeader } from '../../renderer/Generics/redesign/ContentHeader/ContentHeader';
+
+export default {
+  title: 'Generic/ContentHeader',
+  component: ContentHeader,
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+} as ComponentMeta<typeof ContentHeader>;
+
+const Template: ComponentStory<typeof ContentHeader> = (args) => (
+  <ContentHeader {...args} />
+);
+
+export const Primary = Template.bind({});
+Primary.args = {
+  title: 'Title',
+  subtitle: 'Subtitle',
+  leftButtonIconId: 'left',
+  rightButtonIconId: 'close',
+};
diff --git a/src/stories/Generic/Input.stories.tsx b/src/stories/Generic/Input.stories.tsx
index 85af33306..ba526c5d7 100644
--- a/src/stories/Generic/Input.stories.tsx
+++ b/src/stories/Generic/Input.stories.tsx
@@ -3,7 +3,6 @@ import FolderInput from '../../renderer/Generics/redesign/Input/FolderInput';
 
 import Input from '../../renderer/Generics/redesign/Input/Input';
 
-
 export default {
   title: 'Generic/Input',
   component: Input,
@@ -23,15 +22,21 @@ Primary.args = {
   placeholder: 'Test placeholder',
 };
 
+export const Icon = Template.bind({});
+Icon.args = {
+  leftIconId: 'search',
+  placeholder: 'Test placeholder',
+};
+
 const FolderTemplate: ComponentStory<typeof FolderInput> = (args) => (
-    <FolderInput {...args} />
+  <FolderInput {...args} />
 );
 
 export let FolderInputPrimary = FolderTemplate.bind({});
 FolderInputPrimary.args = {
   placeholder: '/Users/Danneh/Library/Application Library/NiceNode/nodes',
   onClickChange: () => {
-    alert('Platform specific user prompt to select a folder location')
+    alert('Platform specific user prompt to select a folder location');
   },
-  freeStorageSpaceGBs: 250
+  freeStorageSpaceGBs: 250,
 };
diff --git a/src/stories/Generic/Logs.stories.tsx b/src/stories/Generic/Logs.stories.tsx
new file mode 100644
index 000000000..814cdb18c
--- /dev/null
+++ b/src/stories/Generic/Logs.stories.tsx
@@ -0,0 +1,374 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { Logs } from '../../renderer/Generics/redesign/LogMessage/Logs';
+
+export default {
+  title: 'Generic/Logs',
+  component: Logs,
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+} as ComponentMeta<typeof Logs>;
+
+const Template: ComponentStory<typeof Logs> = (args) => <Logs {...args} />;
+
+export const Primary = Template.bind({});
+
+Primary.args = {
+  sLogs: [
+    {
+      message:
+        '2022-11-04 21:41:44.170+00:00 | main | INFO  | Besu | Using LibEthPairings native alt bn128',
+      level: 'INFO',
+      timestamp: 1667598104174,
+    },
+    {
+      message:
+        '2022-11-04 21:41:44.173+00:00 | main | INFO  | Besu | Using the native implementation of the signature algorithm',
+      level: 'INFO',
+      timestamp: 1667598104174,
+    },
+    {
+      message:
+        '2022-11-04 21:41:44.181+00:00 | main | INFO  | Besu | Using the native implementation of the blake2bf algorithm',
+      level: 'INFO',
+      timestamp: 1667598104181,
+    },
+    {
+      message:
+        '2022-11-04 21:41:44.187+00:00 | main | INFO  | Besu | Starting Besu version: besu/v22.10.0/linux-x86_64/openjdk-java-11',
+      level: 'INFO',
+      timestamp: 1667598104187,
+    },
+    {
+      message:
+        '2022-11-04 21:41:44.637+00:00 | main | INFO  | Besu | Engine API authentication enabled without key file. Expect ephemeral jwt.hex file in datadir',
+      level: 'INFO',
+      timestamp: 1667598104638,
+    },
+    {
+      message:
+        '2022-11-04 21:41:44.638+00:00 | main | WARN  | Besu | --graphql-http-host has been ignored because --graphql-http-enabled was not defined on the command line.',
+      level: 'WARN',
+      timestamp: 1667598104639,
+    },
+    {
+      message:
+        '2022-11-04 21:41:44.640+00:00 | main | INFO  | Besu | Static Nodes file = /var/lib/besu/static-nodes.json',
+      level: 'INFO',
+      timestamp: 1667598104642,
+    },
+    {
+      message:
+        '2022-11-04 21:41:44.644+00:00 | main | INFO  | StaticNodesParser | StaticNodes file /var/lib/besu/static-nodes.json does not exist, no static connections will be created.',
+      level: 'INFO',
+      timestamp: 1667598104645,
+    },
+    {
+      message:
+        '2022-11-04 21:41:44.645+00:00 | main | INFO  | Besu | Connecting to 0 static nodes.',
+      level: 'INFO',
+      timestamp: 1667598104646,
+    },
+    {
+      message:
+        '2022-11-04 21:41:44.651+00:00 | main | INFO  | Besu | Security Module: localfile',
+      level: 'INFO',
+      timestamp: 1667598104651,
+    },
+    {
+      message:
+        '2022-11-04 21:41:44.675+00:00 | main | INFO  | RocksDBKeyValueStorageFactory | No existing database detected at /var/lib/besu. Using version 1',
+      level: 'INFO',
+      timestamp: 1667598104675,
+    },
+    {
+      message:
+        '2022-11-04 21:41:46.365+00:00 | main | WARN  | Besu | --tx-pool-future-max-by-account has been deprecated, use --tx-pool-limit-by-account-percentage instead.',
+      level: 'WARN',
+      timestamp: 1667598106366,
+    },
+    {
+      message:
+        '2022-11-04 21:41:46.433+00:00 | main | INFO  | KeyPairUtil | Generated new secp256k1 public key 0x3909aba274f2d0254e79e894ea416c62fd5c81de1b0d836fb85b696af32986d4f6af9615cbac0da5cb23fd51c101962c5a78085371d15760e32d675a763b36c9 and stored it to /var/lib/besu/key',
+      level: 'INFO',
+      timestamp: 1667598106434,
+    },
+    {
+      message:
+        '2022-11-04 21:41:46.679+00:00 | main | INFO  | ProtocolScheduleBuilder | Protocol schedule created with milestones: [Frontier: 0, Homestead: 1150000, DaoRecoveryInit: 1920000, DaoRecoveryTransition: 1920001, Homestead: 1920010, TangerineWhistle: 2463000, SpuriousDragon: 2675000, Byzantium: 4370000, Petersburg: 7280000, Istanbul: 9069000, MuirGlacier: 9200000, Berlin: 12244000, London: 12965000, ArrowGlacier: 13773000, GrayGlacier: 15050000]',
+      level: 'INFO',
+      timestamp: 1667598106679,
+    },
+    {
+      message:
+        '2022-11-04 21:41:46.721+00:00 | main | INFO  | ProtocolScheduleBuilder | Protocol schedule created with milestones: [Frontier: 0, Homestead: 1150000, DaoRecoveryInit: 1920000, DaoRecoveryTransition: 1920001, Homestead: 1920010, TangerineWhistle: 2463000, SpuriousDragon: 2675000, Byzantium: 4370000, Petersburg: 7280000, Istanbul: 9069000, MuirGlacier: 9200000, Berlin: 12244000, London: 12965000, ArrowGlacier: 13773000, GrayGlacier: 15050000]',
+      level: 'INFO',
+      timestamp: 1667598106722,
+    },
+    {
+      message:
+        '2022-11-04 21:41:48.327+00:00 | main | INFO  | TransactionPoolFactory | Enabling transaction pool',
+      level: 'INFO',
+      timestamp: 1667598108328,
+    },
+    {
+      message:
+        '2022-11-04 21:41:48.330+00:00 | main | INFO  | EthPeers | Updating the default best peer comparator',
+      level: 'INFO',
+      timestamp: 1667598108330,
+    },
+    {
+      message:
+        '2022-11-04 21:41:48.351+00:00 | main | INFO  | BesuControllerBuilder | TTD difficulty is present, creating initial sync for PoS',
+      level: 'INFO',
+      timestamp: 1667598108351,
+    },
+    {
+      message:
+        '2022-11-04 21:41:48.391+00:00 | main | INFO  | TransitionBesuControllerBuilder | TTD present, creating DefaultSynchronizer that stops propagating after finalization',
+      level: 'INFO',
+      timestamp: 1667598108392,
+    },
+    {
+      message:
+        '2022-11-04 21:41:48.446+00:00 | main | INFO  | RunnerBuilder | Detecting NAT service.',
+      level: 'INFO',
+      timestamp: 1667598108447,
+    },
+    {
+      message:
+        '2022-11-04 21:41:48.763+00:00 | main | INFO  | Runner | Starting external services ... ',
+      level: 'INFO',
+      timestamp: 1667598108763,
+    },
+    {
+      message:
+        '2022-11-04 21:41:48.764+00:00 | main | INFO  | JsonRpcHttpService | Starting JSON-RPC service on 0.0.0.0:8545',
+      level: 'INFO',
+      timestamp: 1667598108764,
+    },
+    {
+      message:
+        '2022-11-04 21:41:48.897+00:00 | vert.x-eventloop-thread-1 | INFO  | JsonRpcHttpService | JSON-RPC service started and listening on 0.0.0.0:8545',
+      level: 'INFO',
+      timestamp: 1667598108898,
+    },
+    {
+      message:
+        '2022-11-04 21:41:48.898+00:00 | main | INFO  | JsonRpcService | Starting JSON-RPC service on 0.0.0.0:8551',
+      level: 'INFO',
+      timestamp: 1667598108899,
+    },
+    {
+      message:
+        '2022-11-04 21:41:48.907+00:00 | vert.x-eventloop-thread-1 | INFO  | JsonRpcService | JSON-RPC service started and listening on 0.0.0.0:8551',
+      level: 'INFO',
+      timestamp: 1667598108908,
+    },
+    {
+      message:
+        '2022-11-04 21:41:48.909+00:00 | main | INFO  | WebSocketService | Starting Websocket service on 0.0.0.0:8546',
+      level: 'INFO',
+      timestamp: 1667598108910,
+    },
+    {
+      message:
+        '2022-11-04 21:41:48.915+00:00 | vert.x-eventloop-thread-1 | INFO  | WebSocketService | Websocket service started and listening on 0.0.0.0:8546',
+      level: 'INFO',
+      timestamp: 1667598108915,
+    },
+    {
+      message:
+        '2022-11-04 21:41:48.919+00:00 | main | INFO  | AutoTransactionLogBloomCachingService | Starting auto transaction log bloom caching service.',
+      level: 'INFO',
+      timestamp: 1667598108919,
+    },
+    {
+      message:
+        '2022-11-04 21:41:48.928+00:00 | main | INFO  | LogBloomCacheMetadata | Lookup cache metadata file in data directory: /var/lib/besu/caches',
+      level: 'INFO',
+      timestamp: 1667598108931,
+    },
+    {
+      message:
+        '2022-11-04 21:41:48.954+00:00 | main | INFO  | Runner | Starting Ethereum main loop ... ',
+      level: 'INFO',
+      timestamp: 1667598108955,
+    },
+    {
+      message:
+        '2022-11-04 21:41:48.954+00:00 | main | INFO  | NatService | No NAT environment detected so no service could be started',
+      level: 'INFO',
+      timestamp: 1667598108955,
+    },
+    {
+      message:
+        '2022-11-04 21:41:48.954+00:00 | main | INFO  | NetworkRunner | Starting Network.',
+      level: 'INFO',
+      timestamp: 1667598108955,
+    },
+    {
+      message:
+        '2022-11-04 21:41:48.958+00:00 | main | INFO  | DefaultP2PNetwork | Starting DNS discovery with URL enrtree://AKA3AM6LPBYEUDMVNU3BSVQJ5AD45Y7YPOHJLEF6W26QOE4VTUDPE@all.mainnet.ethdisco.net',
+      level: 'INFO',
+      timestamp: 1667598108959,
+    },
+    {
+      message:
+        '2022-11-04 21:41:49.059+00:00 | nioEventLoopGroup-2-1 | INFO  | RlpxAgent | P2P RLPx agent started and listening on /0.0.0.0:30303.',
+      level: 'INFO',
+      timestamp: 1667598109060,
+    },
+    {
+      message:
+        '2022-11-04 21:41:49.074+00:00 | main | INFO  | PeerDiscoveryAgent | Starting peer discovery agent on host=0.0.0.0, port=30303',
+      level: 'INFO',
+      timestamp: 1667598109075,
+    },
+    {
+      message:
+        '2022-11-04 21:41:49.144+00:00 | vert.x-eventloop-thread-1 | INFO  | VertxPeerDiscoveryAgent | Started peer discovery agent successfully, on effective host=0.0.0.0 and port=30303',
+      level: 'INFO',
+      timestamp: 1667598109144,
+    },
+    {
+      message:
+        '2022-11-04 21:41:49.146+00:00 | main | INFO  | PeerDiscoveryAgent | P2P peer discovery agent started and listening on /0.0.0.0:30303',
+      level: 'INFO',
+      timestamp: 1667598109147,
+    },
+    {
+      message:
+        '2022-11-04 21:41:49.289+00:00 | main | INFO  | PeerDiscoveryAgent | Writing node record to disk. NodeRecord{seq=1, publicKey=0x033909aba274f2d0254e79e894ea416c62fd5c81de1b0d836fb85b696af32986d4, udpAddress=Optional[/127.0.0.1:30303], tcpAddress=Optional[/127.0.0.1:30303], asBase64=-Jq4QNYoVoUVzexfQnLnqtQqQwJp9_fi5lyBZAJyFxkGT9UXJYziTbMvP-17sawmUkNPpHa06ye-F_z3BoMKioHCgeUBg2V0aMrJhPxk7ASDEYwwgmlkgnY0gmlwhH8AAAGJc2VjcDI1NmsxoQM5CauidPLQJU556JTqQWxi_VyB3hsNg2-4W2lq8ymG1IN0Y3CCdl-DdWRwgnZf, nodeId=0x1921901c6a2067327bafdc3c00de1f1eb8ae021b397961d3419de43a7a860578, customFields={tcp=30303, udp=30303, ip=0x7f000001, eth=[[0xfc64ec04, 0x118c30]], id=V4, secp256k1=0x033909aba274f2d0254e79e894ea416c62fd5c81de1b0d836fb85b696af32986d4}}',
+      level: 'INFO',
+      timestamp: 1667598109290,
+    },
+    {
+      message:
+        '2022-11-04 21:41:49.490+00:00 | main | INFO  | DefaultP2PNetwork | Enode URL enode://3909aba274f2d0254e79e894ea416c62fd5c81de1b0d836fb85b696af32986d4f6af9615cbac0da5cb23fd51c101962c5a78085371d15760e32d675a763b36c9@127.0.0.1:30303',
+      level: 'INFO',
+      timestamp: 1667598109491,
+    },
+    {
+      message:
+        '2022-11-04 21:41:49.491+00:00 | main | INFO  | DefaultP2PNetwork | Node address 0x00de1f1eb8ae021b397961d3419de43a7a860578',
+      level: 'INFO',
+      timestamp: 1667598109493,
+    },
+    {
+      message:
+        '2022-11-04 21:41:49.512+00:00 | main | INFO  | DefaultSynchronizer | Starting synchronizer.',
+      level: 'INFO',
+      timestamp: 1667598109513,
+    },
+    {
+      message:
+        '2022-11-04 21:41:49.525+00:00 | main | INFO  | FullSyncDownloader | Starting full sync.',
+      level: 'INFO',
+      timestamp: 1667598109526,
+    },
+    {
+      message:
+        '2022-11-04 21:41:49.526+00:00 | main | INFO  | FullSyncTargetManager | No sync target, waiting for peers. Current peers: 0',
+      level: 'INFO',
+      timestamp: 1667598109527,
+    },
+    {
+      message:
+        '2022-11-04 21:41:49.542+00:00 | main | INFO  | Runner | Ethereum main loop is up.',
+      level: 'INFO',
+      timestamp: 1667598109543,
+    },
+    {
+      message:
+        '2022-11-04 21:41:50.084+00:00 | nioEventLoopGroup-3-1 | INFO  | FullSyncTargetManager | No sync target, waiting for peers. Current peers: 1',
+      level: 'INFO',
+      timestamp: 1667598110084,
+    },
+    {
+      message:
+        '2022-11-04 21:41:50.349+00:00 | nioEventLoopGroup-3-5 | INFO  | FullSyncTargetManager | No sync target, waiting for peers. Current peers: 1',
+      level: 'INFO',
+      timestamp: 1667598110350,
+    },
+    {
+      message:
+        '2022-11-04 21:41:55.330+00:00 | EthScheduler-Timer-0 | INFO  | FullSyncTargetManager | No sync target, waiting for peers. Current peers: 3',
+      level: 'INFO',
+      timestamp: 1667598115330,
+    },
+    {
+      message:
+        '2022-11-04 21:41:55.483+00:00 | nioEventLoopGroup-3-5 | INFO  | FullSyncTargetManager | No sync target, waiting for peers. Current peers: 3',
+      level: 'INFO',
+      timestamp: 1667598115484,
+    },
+    {
+      message:
+        '2022-11-04 21:42:00.257+00:00 | nioEventLoopGroup-3-4 | INFO  | FullSyncTargetManager | No sync target, waiting for peers. Current peers: 4',
+      level: 'INFO',
+      timestamp: 1667598120259,
+    },
+    {
+      message:
+        '2022-11-04 21:42:05.261+00:00 | EthScheduler-Timer-0 | INFO  | FullSyncTargetManager | No sync target, waiting for peers. Current peers: 2',
+      level: 'INFO',
+      timestamp: 1667598125262,
+    },
+    {
+      message:
+        '2022-11-04 21:42:06.943+00:00 | nioEventLoopGroup-3-10 | INFO  | FullSyncTargetManager | No sync target, waiting for peers. Current peers: 3',
+      level: 'INFO',
+      timestamp: 1667598126944,
+    },
+    {
+      message:
+        '2022-11-04 21:42:10.840+00:00 | BesuCommand-Shutdown-Hook | INFO  | DefaultSynchronizer | Stopping synchronizer',
+      level: 'INFO',
+      timestamp: 1667598130841,
+    },
+    {
+      message:
+        '2022-11-04 21:42:10.843+00:00 | BesuCommand-Shutdown-Hook | INFO  | NetworkRunner | Stopping Network.',
+      level: 'INFO',
+      timestamp: 1667598130843,
+    },
+    {
+      message:
+        '2022-11-04 21:42:10.857+00:00 | BesuCommand-Shutdown-Hook | INFO  | EthProtocolManager | Stopping eth Subprotocol.',
+      level: 'INFO',
+      timestamp: 1667598130857,
+    },
+    {
+      message:
+        '2022-11-04 21:42:10.957+00:00 | BesuCommand-Shutdown-Hook | INFO  | EthProtocolManager | eth Subprotocol stopped.',
+      level: 'INFO',
+      timestamp: 1667598130958,
+    },
+    {
+      message:
+        '2022-11-04 21:42:10.957+00:00 | BesuCommand-Shutdown-Hook | INFO  | NetworkRunner | Network stopped.',
+      level: 'INFO',
+      timestamp: 1667598130958,
+    },
+    {
+      message:
+        '2022-11-04 21:42:10.958+00:00 | BesuCommand-Shutdown-Hook | INFO  | AutoTransactionLogBloomCachingService | Shutting down Auto transaction logs caching service.',
+      level: 'INFO',
+      timestamp: 1667598130959,
+    },
+    {
+      message:
+        '2022-11-04 21:42:10.960+00:00 | BesuCommand-Shutdown-Hook | INFO  | NatService | No NAT environment detected so no service could be stopped',
+      level: 'INFO',
+      timestamp: 1667598130961,
+    },
+    {
+      message:
+        '2022-11-13 21:42:11.041+00:00 | main | INFO  | Besu | Using jemalloc',
+      level: 'INFO',
+      timestamp: 1668461782022,
+    },
+  ],
+};
diff --git a/src/stories/Generic/Tooltip.stories.tsx b/src/stories/Generic/Tooltip.stories.tsx
new file mode 100644
index 000000000..df7a61081
--- /dev/null
+++ b/src/stories/Generic/Tooltip.stories.tsx
@@ -0,0 +1,22 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import { Tooltip } from '../../renderer/Generics/redesign/Tooltip/Tooltip';
+
+export default {
+  title: 'Generic/Tooltip',
+  component: Tooltip,
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+} as ComponentMeta<typeof Tooltip>;
+
+const Template: ComponentStory<typeof Tooltip> = (args) => (
+  <Tooltip {...args} />
+);
+
+export const Primary = Template.bind({});
+
+Primary.args = {
+  title: 'Low peer count',
+  content: 'Try lorem ipsum sit dolor amet.',
+};