diff --git a/.eslintrc.js b/.eslintrc.js
index 3db637c39..63d3caa95 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,6 +1,8 @@
 module.exports = {
   extends: 'erb',
   rules: {
+    // Javascript can handle cycles in dependencies
+    'import/no-cycle': 'off',
     // A temporary hack related to IDE not resolving correct package.json
     'import/no-extraneous-dependencies': 'off',
     'import/no-unresolved': 'error',
diff --git a/assets/locales/en/genericComponents.json b/assets/locales/en/genericComponents.json
index 5b7d5165d..f0249eb4a 100644
--- a/assets/locales/en/genericComponents.json
+++ b/assets/locales/en/genericComponents.json
@@ -9,6 +9,7 @@
   "Hide" : "Hide",
   "Language": "Language",
   "LaunchOnStartup": "Launch on startup",
+  "LearnMore": "Learn more",
   "LightMode": "Light mode",
   "loadingDotDotDot": "loading...",
   "MinorityClient" : "Minority Client",
diff --git a/assets/locales/es/genericComponents.json b/assets/locales/es/genericComponents.json
index 81776045a..98761f9cc 100644
--- a/assets/locales/es/genericComponents.json
+++ b/assets/locales/es/genericComponents.json
@@ -6,6 +6,7 @@
   "FinishingUp" : "Finishing arriba...",
   "Language" : "Idioma",
   "LaunchOnStartup" : "Empieze en Startup",
+  "LearnMore": "Aprender más",
   "LightMode": "Luz modo",
   "MinorityClient" : "Mejor Client",
   "NextStep" : "Proxima step",
diff --git a/src/common/nodeConfig.ts b/src/common/nodeConfig.ts
index a421d4601..46e09203e 100644
--- a/src/common/nodeConfig.ts
+++ b/src/common/nodeConfig.ts
@@ -1,15 +1,16 @@
-type FilePathControl = {
+export const FilePathControlType = 'filePath';
+export type FilePathControl = {
   type: 'filePath';
 };
-type TextControl = {
+export type TextControl = {
   type: 'text';
 };
-type SelectTranslation = { value: string; config?: string };
-type SelectControl = {
+export type SelectTranslation = { value: string; config?: string };
+export type SelectControl = {
   type: 'select/single';
   controlTranslations: SelectTranslation[];
 };
-type MultiSelectControl = {
+export type MultiSelectControl = {
   type: 'select/multiple';
   controlTranslations: SelectTranslation[];
 };
diff --git a/src/renderer/Footer/DynamicNodeConfig.tsx b/src/renderer/Footer/DynamicNodeConfig.tsx
deleted file mode 100644
index 0b8ef262e..000000000
--- a/src/renderer/Footer/DynamicNodeConfig.tsx
+++ /dev/null
@@ -1,229 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import { useAppSelector } from '../state/hooks';
-import { selectSelectedNode } from '../state/node';
-import {
-  ConfigValue,
-  ConfigTranslationMap,
-  ConfigTranslation,
-  ConfigTranslationControl,
-} from '../../common/nodeConfig';
-import electron from '../electronGlobal';
-import Select from '../DynamicControls/Select';
-import TextArea from '../DynamicControls/TextArea';
-import Warning from '../Warning';
-import { InfoModal } from '../InfoIconButton';
-import ExternalLink from '../Generics/ExternalLink';
-
-type CategoryConfig = {
-  category: string;
-  configTranslationMap: ConfigTranslationMap;
-};
-const DynamicNodeConfig = () => {
-  const selectedNode = useAppSelector(selectSelectedNode);
-  const [sIsConfigDisabled, setIsConfigDisabled] = useState<boolean>(true);
-  const [sConfigTranslationMap, setConfigTranslationMap] =
-    useState<ConfigTranslationMap>();
-  const [sCategoryConfigs, setCategoryConfigs] = useState<CategoryConfig[]>();
-
-  useEffect(() => {
-    let isDisabled = true;
-    let configTranslationMap;
-    console.log(selectedNode);
-    if (selectedNode) {
-      isDisabled = selectedNode.status === 'running';
-      configTranslationMap = selectedNode.spec.configTranslation;
-    }
-    console.log('NodeConfig isDisabled? ', isDisabled);
-    setIsConfigDisabled(isDisabled);
-    setConfigTranslationMap(configTranslationMap);
-  }, [selectedNode]);
-
-  useEffect(() => {
-    // category to configs
-    const categoryMap: Record<string, ConfigTranslationMap> = {};
-    if (sConfigTranslationMap) {
-      Object.keys(sConfigTranslationMap).forEach((configKey) => {
-        const configTranslation: ConfigTranslation =
-          sConfigTranslationMap[configKey];
-        const category = configTranslation.category ?? 'Other';
-        if (!categoryMap[category]) {
-          categoryMap[category] = {};
-        }
-        categoryMap[category][configKey] = configTranslation;
-      });
-    }
-    const arr = Object.keys(categoryMap).map((category) => {
-      return {
-        category,
-        configTranslationMap: categoryMap[category],
-      };
-    });
-
-    // Put 'Other' category at the bottom
-    arr.sort((x, y) => {
-      if (x.category === 'Other') {
-        return 1;
-      }
-      if (y.category === 'Other') {
-        return -1;
-      }
-      return 0;
-    });
-
-    setCategoryConfigs(arr);
-  }, [sConfigTranslationMap]);
-
-  if (!selectedNode) {
-    return <>No node selected</>;
-  }
-
-  const onNodeConfigChange = async (
-    configKey: string,
-    newValue: ConfigValue
-  ) => {
-    // updateNode
-    console.log('updating node with newValue: ', newValue);
-    const { configValuesMap } = selectedNode.config;
-    const newConfig = {
-      ...selectedNode.config,
-      configValuesMap: {
-        ...configValuesMap,
-        [configKey]: newValue,
-      },
-    };
-    // console.log('updating node with newConfig: ', newConfig);
-    await electron.updateNode(selectedNode.id, {
-      config: newConfig,
-    });
-    // console.log('updated node!!!: ', updateNode);
-    // todo: show user a success notification
-  };
-
-  return (
-    <>
-      {sIsConfigDisabled && (
-        <Warning>
-          <h3>The node must be stopped to make configuration changes.</h3>
-        </Warning>
-      )}
-      {sCategoryConfigs && (
-        <>
-          {sCategoryConfigs.map((categoryConfig) => {
-            const { configTranslationMap, category } = categoryConfig;
-            return (
-              <div key={category}>
-                <h2 style={{ marginBlockEnd: 0 }}>{category}</h2>
-                {configTranslationMap ? (
-                  <>
-                    {Object.keys(configTranslationMap).map((configKey) => {
-                      const configTranslation: ConfigTranslation =
-                        configTranslationMap[configKey];
-
-                      const configTranslationControl: ConfigTranslationControl =
-                        configTranslation.uiControl;
-                      let currentValue: string | string[] =
-                        selectedNode.config?.configValuesMap?.[configKey];
-                      if (currentValue === undefined) {
-                        if (
-                          configTranslation.niceNodeDefaultValue !== undefined
-                        ) {
-                          currentValue = configTranslation.niceNodeDefaultValue;
-                        } else if (
-                          configTranslation.defaultValue !== undefined
-                        ) {
-                          currentValue = configTranslation.defaultValue;
-                        }
-                        // todo for mutli select?
-                      }
-                      // console.log(
-                      //   'rendering config: ',
-                      //   configTranslation,
-                      //   currentValue
-                      // );
-                      return (
-                        <div key={configKey} style={{ marginBottom: 20 }}>
-                          <div>
-                            <span>{configTranslation.displayName}</span>
-                            {(configTranslation.infoDescription ||
-                              configTranslation.documentation) && (
-                              <InfoModal title={configTranslation.displayName}>
-                                {configTranslation.infoDescription}
-                                {configTranslation.defaultValue && (
-                                  <p>
-                                    Default value:{' '}
-                                    {configTranslation.defaultValue}
-                                  </p>
-                                )}
-                                {configTranslation.documentation && (
-                                  <ExternalLink
-                                    title="Documentation Link"
-                                    url={configTranslation.documentation}
-                                  />
-                                )}
-                              </InfoModal>
-                            )}
-                          </div>
-                          {configTranslationControl?.type === 'filePath' && (
-                            <>
-                              {`Current folder: ${currentValue}`}
-                              <button
-                                type="button"
-                                onClick={() =>
-                                  electron.openDialogForNodeDataDir(
-                                    selectedNode.id
-                                  )
-                                }
-                                disabled={sIsConfigDisabled}
-                              >
-                                Select folder
-                              </button>
-                            </>
-                          )}
-                          {configTranslationControl?.type === 'text' && (
-                            <TextArea
-                              value={currentValue as string}
-                              onChange={(newValue: string) =>
-                                onNodeConfigChange(configKey, newValue)
-                              }
-                              isDisabled={sIsConfigDisabled}
-                            />
-                          )}
-                          {(configTranslationControl?.type ===
-                            'select/single' ||
-                            configTranslationControl?.type ===
-                              'select/multiple') && (
-                            <Select
-                              value={currentValue}
-                              // defaultValue={configTranslation.defaultValue}
-                              onChange={(newValue) =>
-                                onNodeConfigChange(configKey, newValue)
-                              }
-                              options={configTranslationControl.controlTranslations.map(
-                                ({ value }) => {
-                                  return { value, label: value };
-                                }
-                              )}
-                              isDisabled={sIsConfigDisabled}
-                              isMulti={
-                                configTranslationControl?.type ===
-                                'select/multiple'
-                              }
-                            />
-                          )}
-                        </div>
-                      );
-                    })}
-                  </>
-                ) : (
-                  <p>Unable to find configuration settings</p>
-                )}
-              </div>
-            );
-          })}
-        </>
-      )}
-    </>
-  );
-};
-export default DynamicNodeConfig;
diff --git a/src/renderer/Footer/DynamicSettings.tsx b/src/renderer/Footer/DynamicSettings.tsx
deleted file mode 100644
index b058f548e..000000000
--- a/src/renderer/Footer/DynamicSettings.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-// import { useState } from 'react';
-
-// import electron from '../electronGlobal';
-import MenuDrawer from './MenuDrawer';
-import DynamicNodeConfig from './DynamicNodeConfig';
-import { useAppSelector } from '../state/hooks';
-import { selectSelectedNode } from '../state/node';
-import RemoveNodeButton from '../AddNode/RemoveNodeButton';
-
-type Props = {
-  isOpen: boolean | undefined;
-  onClickCloseButton: () => void;
-};
-
-const DynamicSettings = ({ isOpen, onClickCloseButton }: Props) => {
-  const selectedNode = useAppSelector(selectSelectedNode);
-  // const [sDeleteNodeStorageResult, setDeleteNodeStorageResult] =
-  //   useState<boolean>();
-
-  let title = 'Settings';
-  if (selectedNode) {
-    title = `${selectedNode.spec.displayName} settings`;
-  }
-  return (
-    <MenuDrawer
-      title={title}
-      isSelected={!!isOpen}
-      onClickCloseButton={onClickCloseButton}
-    >
-      <DynamicNodeConfig />
-      &nbsp;
-      {selectedNode && (
-        <>
-          <h2 style={{ marginBlockEnd: 0 }}>Remove node from NiceNode</h2>
-          <p> (optionally delete node storage in confirmation dialog)</p>
-          <div style={{ padding: 20 }}>
-            <RemoveNodeButton node={selectedNode} />
-          </div>
-        </>
-      )}
-      {/* todo fix: This deletes the entire node.runtime.dataDir.. hmm */}
-      {/* <h2>Storage</h2>
-      <div>
-        <h3>Delete node data</h3>
-        <p>
-          Your node requires this data to run and will require time and internet
-          data to recover if deleted. Only delete node data if you do not intend
-          to run this node.
-        </p>
-        <button
-          type="button"
-          disabled={selectedNode === undefined}
-          onClick={async () => {
-            console.log('Deleting node storage...');
-            // clear result while waiting for delete to return
-            setDeleteNodeStorageResult(undefined);
-            if (selectedNode?.id) {
-              setDeleteNodeStorageResult(
-                await electron.deleteNodeStorage(selectedNode?.id)
-              );
-            } else {
-              console.error('Unable to delete storage. No selected node.');
-            }
-          }}
-          style={{ marginLeft: 10, backgroundColor: 'red', color: 'white' }}
-        >
-          <span>Delete</span>
-        </button>
-        {sDeleteNodeStorageResult !== undefined && (
-          <>
-            {sDeleteNodeStorageResult ? (
-              <span>Delete successful</span>
-            ) : (
-              <span>Delete failed</span>
-            )}
-          </>
-        )}
-      </div> */}
-    </MenuDrawer>
-  );
-};
-export default DynamicSettings;
diff --git a/src/renderer/Footer/Footer.tsx b/src/renderer/Footer/Footer.tsx
index 680a7f9b0..7f494f36d 100644
--- a/src/renderer/Footer/Footer.tsx
+++ b/src/renderer/Footer/Footer.tsx
@@ -1,6 +1,5 @@
 import { VscDebugConsole } from 'react-icons/vsc';
 import { AiOutlineAreaChart } from 'react-icons/ai';
-import { MdSettings } from 'react-icons/md';
 import { FaDocker } from 'react-icons/fa';
 import { useEffect, useState } from 'react';
 
@@ -8,9 +7,7 @@ import IconButton from '../IconButton';
 import Monitoring from './Monitoring';
 import Debugging from './Debugging';
 import electron from '../electronGlobal';
-import DynamicSettings from './DynamicSettings';
 import Docker from './Docker';
-import LanguageSelect from '../LanguageSelect';
 import { useGetIsDockerInstalledQuery } from '../state/settingsService';
 
 export const FOOTER_HEIGHT = 64;
@@ -51,21 +48,6 @@ const Footer = () => {
         paddingRight: 10,
       }}
     >
-      <IconButton
-        type="button"
-        onClick={() => {
-          setSelectedMenuDrawer(
-            sSelectedMenuDrawer === 'settings' ? undefined : 'settings'
-          );
-        }}
-        style={{
-          borderBottom:
-            sSelectedMenuDrawer === 'settings' ? '2px solid' : 'none',
-          borderTop: sSelectedMenuDrawer === 'settings' ? '2px solid' : 'none',
-        }}
-      >
-        <MdSettings />
-      </IconButton>
       <IconButton
         type="button"
         onClick={() => {
@@ -121,10 +103,6 @@ const Footer = () => {
         isOpen={sSelectedMenuDrawer === 'debugging'}
         onClickCloseButton={onCloseDrawer}
       />
-      <DynamicSettings
-        isOpen={sSelectedMenuDrawer === 'settings'}
-        onClickCloseButton={onCloseDrawer}
-      />
       <Monitoring
         isOpen={sSelectedMenuDrawer === 'monitoring'}
         onClickCloseButton={onCloseDrawer}
@@ -135,8 +113,6 @@ const Footer = () => {
           onClickCloseButton={onCloseDrawer}
         />
       )}
-      &nbsp; &nbsp;
-      <LanguageSelect />
     </div>
   );
 };
diff --git a/src/renderer/DynamicControls/Select.tsx b/src/renderer/Generics/redesign/DynamicSettings/DynamicControls/Select.tsx
similarity index 100%
rename from src/renderer/DynamicControls/Select.tsx
rename to src/renderer/Generics/redesign/DynamicSettings/DynamicControls/Select.tsx
diff --git a/src/renderer/DynamicControls/TextArea.tsx b/src/renderer/Generics/redesign/DynamicSettings/DynamicControls/TextArea.tsx
similarity index 100%
rename from src/renderer/DynamicControls/TextArea.tsx
rename to src/renderer/Generics/redesign/DynamicSettings/DynamicControls/TextArea.tsx
diff --git a/src/renderer/Generics/redesign/DynamicSettings/DynamicSettings.tsx b/src/renderer/Generics/redesign/DynamicSettings/DynamicSettings.tsx
new file mode 100644
index 000000000..44d02ab58
--- /dev/null
+++ b/src/renderer/Generics/redesign/DynamicSettings/DynamicSettings.tsx
@@ -0,0 +1,52 @@
+import { useEffect, useState } from 'react';
+import {
+  ConfigTranslationMap,
+  ConfigValuesMap,
+} from '../../../../common/nodeConfig';
+import { SettingChangeHandler } from '../../../Presentational/NodeSettingsModal/NodeSettingsWrapper';
+import LineLabelSettings from '../LabelSetting/LabelSettings';
+import { LabelSettingsSectionProps } from '../LabelSetting/LabelValuesSection';
+import convertConfigToLabelSettings from './convertConfigToLabelSettings';
+
+export type CategoryConfig = {
+  category: string;
+  configTranslationMap: ConfigTranslationMap;
+};
+export type DynamicSettingsProps = {
+  categoryConfigs?: CategoryConfig[];
+  configValuesMap?: ConfigValuesMap;
+  isDisabled?: boolean;
+  onChange?: SettingChangeHandler;
+};
+const DynamicSettings = ({
+  categoryConfigs,
+  configValuesMap,
+  isDisabled,
+  onChange,
+}: DynamicSettingsProps) => {
+  const [sSections, setSections] = useState<LabelSettingsSectionProps>({
+    items: [],
+  });
+
+  useEffect(() => {
+    setSections(
+      convertConfigToLabelSettings({
+        categoryConfigs: categoryConfigs ?? [],
+        configValuesMap: configValuesMap ?? {},
+        isDisabled,
+        onChange,
+      })
+    );
+  }, [categoryConfigs, configValuesMap, isDisabled, onChange]);
+
+  if (!categoryConfigs) {
+    return <>No node settings found.</>;
+  }
+
+  return (
+    <>
+      <LineLabelSettings items={[sSections]} />
+    </>
+  );
+};
+export default DynamicSettings;
diff --git a/src/renderer/Generics/redesign/DynamicSettings/Setting.tsx b/src/renderer/Generics/redesign/DynamicSettings/Setting.tsx
new file mode 100644
index 000000000..ebbeb1676
--- /dev/null
+++ b/src/renderer/Generics/redesign/DynamicSettings/Setting.tsx
@@ -0,0 +1,88 @@
+import { useCallback } from 'react';
+import {
+  ConfigValue,
+  ConfigTranslation,
+  ConfigTranslationControl,
+  ConfigKey,
+} from '../../../../common/nodeConfig';
+import FolderInput from '../Input/FolderInput';
+import Input from '../Input/Input';
+import Select from '../Select/Select';
+import MultiSelect from '../Select/MultiSelect';
+import { SettingChangeHandler } from '../../../Presentational/NodeSettingsModal/NodeSettingsWrapper';
+
+export type SettingProps = {
+  configTranslation: ConfigTranslation;
+  configKey: ConfigKey;
+  currentValue: string | string[];
+  isDisabled?: boolean;
+  onChange?: SettingChangeHandler;
+};
+const Setting = ({
+  configTranslation,
+  configKey,
+  currentValue,
+  isDisabled,
+  onChange,
+}: SettingProps) => {
+  const onNodeConfigChange = useCallback(
+    (newValue?: ConfigValue) => {
+      const asyncUpdate = async () => {
+        console.log('Setting value changed to newValue: ', newValue);
+        if (onChange) {
+          onChange(configKey, newValue);
+        }
+      };
+      asyncUpdate();
+    },
+    [configKey, onChange]
+  );
+
+  const configTranslationControl: ConfigTranslationControl =
+    configTranslation.uiControl;
+
+  return (
+    <div key={configKey}>
+      {configTranslationControl?.type === 'filePath' && (
+        <FolderInput
+          placeholder={currentValue as string}
+          disabled={isDisabled}
+          onClickChange={onNodeConfigChange}
+        />
+      )}
+      {configTranslationControl?.type === 'text' && (
+        <Input
+          value={currentValue as string}
+          onChange={(newValue: string) => onNodeConfigChange(newValue)}
+          disabled={isDisabled}
+        />
+      )}
+      {configTranslationControl?.type === 'select/single' && (
+        <Select
+          value={currentValue as string}
+          onChange={(newValue) => onNodeConfigChange(newValue?.value)}
+          options={configTranslationControl.controlTranslations.map(
+            ({ value }) => {
+              return { value, label: value };
+            }
+          )}
+          isDisabled={isDisabled}
+        />
+      )}
+      {configTranslationControl?.type === 'select/multiple' && (
+        <MultiSelect
+          value={currentValue}
+          onChange={(newValue) => onNodeConfigChange(newValue)}
+          options={configTranslationControl.controlTranslations.map(
+            ({ value }) => {
+              return { value, label: value };
+            }
+          )}
+          isDisabled={isDisabled ?? false}
+          isMulti={configTranslationControl?.type === 'select/multiple'}
+        />
+      )}
+    </div>
+  );
+};
+export default Setting;
diff --git a/src/renderer/Generics/redesign/DynamicSettings/convertConfigToLabelSettings.tsx b/src/renderer/Generics/redesign/DynamicSettings/convertConfigToLabelSettings.tsx
new file mode 100644
index 000000000..f9f7e1f3e
--- /dev/null
+++ b/src/renderer/Generics/redesign/DynamicSettings/convertConfigToLabelSettings.tsx
@@ -0,0 +1,105 @@
+import {
+  ConfigTranslation,
+  ConfigValuesMap,
+} from '../../../../common/nodeConfig';
+import { SettingChangeHandler } from '../../../Presentational/NodeSettingsModal/NodeSettingsWrapper';
+import {
+  LabelSettingsItem,
+  LabelSettingsSectionProps,
+} from '../LabelSetting/LabelValuesSection';
+import { CategoryConfig } from './DynamicSettings';
+import Setting from './Setting';
+
+const getConfigValue = (
+  configTranslation: ConfigTranslation,
+  configKey: string,
+  configValuesMap: ConfigValuesMap
+) => {
+  let currentValue: string | string[] = configValuesMap?.[configKey];
+  if (currentValue === undefined) {
+    if (configTranslation.niceNodeDefaultValue !== undefined) {
+      currentValue = configTranslation.niceNodeDefaultValue;
+    } else if (configTranslation.defaultValue !== undefined) {
+      currentValue = configTranslation.defaultValue;
+    }
+  }
+  return currentValue;
+};
+
+const convertConfigToLabelSettings = ({
+  categoryConfigs,
+  configValuesMap,
+  isDisabled,
+  onChange,
+}: {
+  categoryConfigs: CategoryConfig[];
+  configValuesMap: ConfigValuesMap;
+  isDisabled?: boolean;
+  onChange?: SettingChangeHandler;
+}): LabelSettingsSectionProps => {
+  // no separate settings sections (Only one for now)
+  const section: LabelSettingsSectionProps = {
+    items: [],
+  };
+
+  // We're parsing the settings obj to form a categories array
+  // which contains the settings for each category
+  const configSettingsItems: LabelSettingsItem[][] = categoryConfigs.map(
+    (categoryConfig) => {
+      const { configTranslationMap } = categoryConfig;
+
+      if (configTranslationMap) {
+        // categorySettingsArr: An array of all the Settings in this category
+        const categorySettingsArr: LabelSettingsItem[] = Object.keys(
+          configTranslationMap
+        ).map((configKey) => {
+          const configTranslation: ConfigTranslation =
+            configTranslationMap[configKey];
+
+          const currentValue: string | string[] = getConfigValue(
+            configTranslation,
+            configKey,
+            configValuesMap
+          );
+
+          const settingItem: LabelSettingsItem = {
+            label: configTranslation.displayName,
+            value: (
+              <Setting
+                key={configKey}
+                configKey={configKey}
+                configTranslation={configTranslation}
+                currentValue={currentValue}
+                isDisabled={isDisabled}
+                onChange={onChange}
+              />
+            ),
+          };
+          if (configTranslation.infoDescription) {
+            settingItem.description = configTranslation.infoDescription;
+          }
+          if (configTranslation.documentation) {
+            settingItem.learnMoreLink = configTranslation.documentation;
+          }
+          return settingItem;
+        });
+        return categorySettingsArr;
+      }
+      // config with translation? todo: error
+      console.error(
+        'category config does not have a configTranslation',
+        categoryConfig
+      );
+      return [];
+    }
+  );
+  // End of parsing category settings
+  // Now flatten them into one category or "section"
+  if (configSettingsItems) {
+    configSettingsItems.forEach((categorySettingsArr) => {
+      section.items = section.items.concat(categorySettingsArr);
+    });
+  }
+  return section;
+};
+export default convertConfigToLabelSettings;
diff --git a/src/renderer/Generics/redesign/Header/Header.tsx b/src/renderer/Generics/redesign/Header/Header.tsx
index a69e00168..ebb3b5951 100644
--- a/src/renderer/Generics/redesign/Header/Header.tsx
+++ b/src/renderer/Generics/redesign/Header/Header.tsx
@@ -18,6 +18,7 @@ import {
   popupContainer,
   menuButtonContainer,
 } from './header.css';
+import NodeSettingsWrapper from '../../../Presentational/NodeSettingsModal/NodeSettingsWrapper';
 
 /**
  * Primary UI component for user interaction
@@ -28,6 +29,8 @@ export const Header = (props: NodeOverviewProps) => {
   const [isCalloutDisplayed, setIsCalloutDisplayed] = useState<boolean>(false);
   const [isSettingsDisplayed, setIsSettingsDisplayed] =
     useState<boolean>(false);
+  const [sIsSettingsModalOpen, setIsSettingsModalOpen] =
+    useState<boolean>(false);
 
   const startStopButtonProps: ButtonProps = {
     label: '',
@@ -126,6 +129,7 @@ export const Header = (props: NodeOverviewProps) => {
             variant="icon"
             size="small"
             onClick={() => {
+              setIsSettingsModalOpen(true);
               if (type === 'client') {
                 if (onAction) onAction('settings');
                 // setIsSettingsDisplayed(!isSettingsDisplayed);
@@ -171,6 +175,11 @@ export const Header = (props: NodeOverviewProps) => {
           )}
         </div>
       </div>
+
+      <NodeSettingsWrapper
+        isOpen={sIsSettingsModalOpen}
+        onClickClose={() => setIsSettingsModalOpen(false)}
+      />
     </div>
   );
 };
diff --git a/src/renderer/Generics/redesign/HeaderMetrics/HeaderMetrics.tsx b/src/renderer/Generics/redesign/HeaderMetrics/HeaderMetrics.tsx
index 64e21cefe..61ba8cc0e 100644
--- a/src/renderer/Generics/redesign/HeaderMetrics/HeaderMetrics.tsx
+++ b/src/renderer/Generics/redesign/HeaderMetrics/HeaderMetrics.tsx
@@ -1,12 +1,10 @@
+import React from 'react';
 import { MetricStats, MetricTypes } from '../MetricTypes/MetricTypes';
 import { container } from './headerMetrics.css';
 import VerticalLine from '../VerticalLine/VerticalLine';
 import { getSyncStatus } from '../utils';
 import { NodeOverviewProps } from '../consts';
 
-/**
- * Primary UI component for user interaction
- */
 export const HeaderMetrics = (props: NodeOverviewProps) => {
   const { type, status, stats } = props;
   const getSlotOrBlockMetricType = stats.currentSlot
@@ -33,13 +31,13 @@ export const HeaderMetrics = (props: NodeOverviewProps) => {
         }
         // const statsValue = index === 0 ? getSyncStatus(status) : stats[metric];
         return (
-          <>
+          <React.Fragment key={metric}>
             <MetricTypes
               statsValue={statsValue}
               statsType={assignedMetric[index]}
             />
             {index !== 3 && <VerticalLine />}
-          </>
+          </React.Fragment>
         );
       })}
     </div>
diff --git a/src/renderer/Generics/redesign/Input/FolderInput.tsx b/src/renderer/Generics/redesign/Input/FolderInput.tsx
index 52e0fdfd5..9713c1911 100644
--- a/src/renderer/Generics/redesign/Input/FolderInput.tsx
+++ b/src/renderer/Generics/redesign/Input/FolderInput.tsx
@@ -16,6 +16,10 @@ export interface FolderInputProps {
    *  is located (mounted).
    */
   freeStorageSpaceGBs?: number;
+  /**
+   *  Is this input field disabled?
+   */
+  disabled?: boolean;
   /**
    *  Provide to allow the user to change the folder location
    */
@@ -25,6 +29,7 @@ export interface FolderInputProps {
 const FolderInput = ({
   placeholder,
   freeStorageSpaceGBs,
+  disabled,
   onClickChange,
 }: FolderInputProps) => {
   return (
@@ -36,7 +41,7 @@ const FolderInput = ({
         <Button
           size="small"
           label="Change..."
-          disabled={!onClickChange}
+          disabled={!onClickChange || disabled}
           onClick={onClickChange}
         />
       </div>
diff --git a/src/renderer/Generics/redesign/Input/Input.tsx b/src/renderer/Generics/redesign/Input/Input.tsx
index 0f9af5019..a3a0ff841 100644
--- a/src/renderer/Generics/redesign/Input/Input.tsx
+++ b/src/renderer/Generics/redesign/Input/Input.tsx
@@ -1,6 +1,10 @@
 import { container } from './input.css';
 
 export interface InputProps {
+  /**
+   *  Control the input by passing a value
+   */
+  value?: string;
   /**
    *  What's the placeholder text?
    */
@@ -13,15 +17,28 @@ export interface InputProps {
    *  Is this input field disabled?
    */
   disabled?: boolean;
+  onChange?: (newValue: string) => void;
 }
 
-const Input = ({ placeholder, required, disabled }: InputProps) => {
+const Input = ({
+  value,
+  placeholder,
+  required,
+  disabled,
+  onChange,
+}: InputProps) => {
   return (
     <input
       {...{
         type: 'text',
         className: [container].join(' '),
         placeholder,
+        value,
+        onChange: (event) => {
+          if (onChange) {
+            onChange(event.target.value);
+          }
+        },
         ...(disabled && { disabled }),
         ...(required && { required }),
       }}
diff --git a/src/renderer/Generics/redesign/Input/folderInput.css.ts b/src/renderer/Generics/redesign/Input/folderInput.css.ts
index 18596b792..ad40b0d6a 100644
--- a/src/renderer/Generics/redesign/Input/folderInput.css.ts
+++ b/src/renderer/Generics/redesign/Input/folderInput.css.ts
@@ -6,6 +6,7 @@ export const container = style({
   flexDirection: 'column',
   gap: 8,
   width: '100%',
+  minWidth: 400,
 });
 
 export const pathAndChangeContainer = style({
diff --git a/src/renderer/Generics/redesign/LabelSetting/LabelSettings.tsx b/src/renderer/Generics/redesign/LabelSetting/LabelSettings.tsx
index b40d07d87..5bd7606f2 100644
--- a/src/renderer/Generics/redesign/LabelSetting/LabelSettings.tsx
+++ b/src/renderer/Generics/redesign/LabelSetting/LabelSettings.tsx
@@ -23,7 +23,7 @@ export interface LineLabelSettingsProps {
 }
 
 /**
- * Primary UI component for user interaction
+ * Rows of labels and inputs used for settings screens
  */
 const LineLabelSettings = ({
   title,
@@ -41,8 +41,10 @@ const LineLabelSettings = ({
       {title && <div className={titleFont}>{title}</div>}
       <div className={columnContainer}>
         {items &&
-          items.map((item) => (
-            <div className={columnDiv} key={item.sectionTitle}>
+          items.map((item, index) => (
+            // Settings section ordering does not change during view of modal
+            // eslint-disable-next-line react/no-array-index-key
+            <div className={columnDiv} key={index}>
               <LineLabelSettingsItem {...item} />
             </div>
           ))}
diff --git a/src/renderer/Generics/redesign/LabelSetting/LabelValuesSection.tsx b/src/renderer/Generics/redesign/LabelSetting/LabelValuesSection.tsx
index d0f8b31c2..358e6cabd 100644
--- a/src/renderer/Generics/redesign/LabelSetting/LabelValuesSection.tsx
+++ b/src/renderer/Generics/redesign/LabelSetting/LabelValuesSection.tsx
@@ -1,5 +1,7 @@
 import React, { ReactElement } from 'react';
+import { useTranslation } from 'react-i18next';
 import ExternalLink from '../Link/ExternalLink';
+import Caption from '../Typography/Caption';
 import {
   sectionContainer,
   lineContainer,
@@ -7,39 +9,32 @@ import {
   lineValueText,
   sectionHeaderContainer,
   sectionHeaderText,
+  labelAndDescriptionContainer,
 } from './labelSettingsSection.css';
 
+export type LabelSettingsItem = {
+  label: string;
+  value: ReactElement | string;
+  description?: string;
+  learnMoreLink?: string;
+};
 export interface LabelSettingsSectionProps {
   /**
    * Title gets uppercased
    */
-  sectionTitle: string;
+  sectionTitle?: string;
   /**
    * The sections label value items
    */
-  items: {
-    label: string;
-    value: ReactElement | string;
-    link?: string;
-  }[];
+  items: LabelSettingsItem[];
 }
 
 const LabelSettingsSection = ({
   sectionTitle,
   items,
 }: LabelSettingsSectionProps) => {
-  const renderValue = (item: {
-    label: string;
-    value: ReactElement | string;
-    link?: string;
-  }) => {
-    const value = item.link ? (
-      <ExternalLink url={item.link} text={item.value.toString()} />
-    ) : (
-      item.value
-    );
-    return <div className={lineValueText}>{value}</div>;
-  };
+  const { t } = useTranslation('genericComponents');
+
   return (
     <div className={sectionContainer}>
       {sectionTitle && (
@@ -49,10 +44,24 @@ const LabelSettingsSection = ({
       )}
       {items &&
         items.map((item) => (
-          <React.Fragment key={item.label + item.value}>
+          <React.Fragment key={item.label}>
             <div className={lineContainer}>
-              <div className={lineKeyText}>{item.label}</div>
-              {renderValue(item)}
+              <div className={labelAndDescriptionContainer}>
+                <div className={lineKeyText}>{item.label}</div>
+                <Caption>
+                  {item.description}{' '}
+                  {item.learnMoreLink && (
+                    <ExternalLink
+                      url={item.learnMoreLink}
+                      text={t('LearnMore')}
+                      inline
+                      hideIcon
+                    />
+                  )}
+                </Caption>
+              </div>
+
+              <div className={lineValueText}>{item.value}</div>
             </div>
           </React.Fragment>
         ))}
diff --git a/src/renderer/Generics/redesign/LabelSetting/labelSettingsSection.css.ts b/src/renderer/Generics/redesign/LabelSetting/labelSettingsSection.css.ts
index d58846732..9bfe4a42c 100644
--- a/src/renderer/Generics/redesign/LabelSetting/labelSettingsSection.css.ts
+++ b/src/renderer/Generics/redesign/LabelSetting/labelSettingsSection.css.ts
@@ -30,10 +30,13 @@ export const lineContainer = style({
   boxSizing: 'border-box',
   display: 'flex',
   flexDirection: 'row',
+  flexWrap: 'wrap',
   justifyContent: 'space-between',
   alignItems: 'center',
+  minHeight: '48px',
   padding: '8px 0px',
-  gap: '28px',
+  columnGap: '14px',
+  rowGap: '8px',
   flex: 'none',
   order: 1,
   alignSelf: 'stretch',
@@ -41,13 +44,21 @@ export const lineContainer = style({
   borderBottom: '1px solid',
   borderColor: vars.color.font10,
 });
+
+export const labelAndDescriptionContainer = style({
+  display: 'flex',
+  gap: 4,
+  flexDirection: 'column',
+  flex: 'none',
+  order: 0,
+  flexGrow: 0,
+  maxWidth: '100%',
+});
+
 export const lineKeyText = style({
   fontWeight: 590,
   color: vars.color.font70,
   letterSpacing: '-0.12px',
-  flex: 'none',
-  order: 0,
-  flexGrow: 0,
 });
 
 export const lineValueText = style({
diff --git a/src/renderer/Generics/redesign/Link/ExternalLink.tsx b/src/renderer/Generics/redesign/Link/ExternalLink.tsx
index 299e496f0..a693c6ace 100644
--- a/src/renderer/Generics/redesign/Link/ExternalLink.tsx
+++ b/src/renderer/Generics/redesign/Link/ExternalLink.tsx
@@ -15,16 +15,20 @@ export interface ExternalLinkProps {
    * Inline the link
    */
   inline?: boolean;
+  /**
+   * Hide the external link icon
+   */
+  hideIcon?: boolean;
 }
 
-const ExternalLink = ({ url, text, inline }: ExternalLinkProps) => {
+const ExternalLink = ({ url, text, inline, hideIcon }: ExternalLinkProps) => {
   const classContainer = inline ? inlineContainer : blockContainer;
   return (
     <div className={classContainer}>
       <a className={linkText} href={url} target="_blank" rel="noreferrer">
         {text}
       </a>
-      <Icon iconId="external" />
+      {!hideIcon && <Icon iconId="external" />}
     </div>
   );
 };
diff --git a/src/renderer/Generics/redesign/Message/Message.tsx b/src/renderer/Generics/redesign/Message/Message.tsx
index 655d349f8..ee57d2ccb 100644
--- a/src/renderer/Generics/redesign/Message/Message.tsx
+++ b/src/renderer/Generics/redesign/Message/Message.tsx
@@ -43,7 +43,7 @@ export interface MessageProps {
   /**
    * Message description
    */
-  description: string;
+  description?: string;
   /**
    * onClick event
    */
@@ -63,7 +63,7 @@ export const Message = ({
       </div>
       <div className={textContainer}>
         <div className={messageTitle}>{title}</div>
-        <div className={messageDescription}>{description}</div>
+        {description && <div className={messageDescription}>{description}</div>}
       </div>
       {onClick && (
         <div className={closeContainer}>
diff --git a/src/renderer/Generics/redesign/Message/message.css.ts b/src/renderer/Generics/redesign/Message/message.css.ts
index d75d27c77..b2dbce047 100644
--- a/src/renderer/Generics/redesign/Message/message.css.ts
+++ b/src/renderer/Generics/redesign/Message/message.css.ts
@@ -11,7 +11,6 @@ export const container = style({
   borderRadius: '10px',
   padding: 24,
   position: 'relative',
-  marginBottom: 32,
   selectors: {
     [`&.info`]: {
       backgroundColor: vars.components.messageInfoBackground,
diff --git a/src/renderer/Generics/redesign/Modal/Modal.tsx b/src/renderer/Generics/redesign/Modal/Modal.tsx
index 300914f62..adf78b5ed 100644
--- a/src/renderer/Generics/redesign/Modal/Modal.tsx
+++ b/src/renderer/Generics/redesign/Modal/Modal.tsx
@@ -1,5 +1,11 @@
+import { useCallback, useEffect } from 'react';
 import Button from '../Button/Button';
-import { modalBackdropStyle, modalContentStyle, titleFont } from './modal.css';
+import {
+  modalBackdropStyle,
+  modalChildrenContainer,
+  modalContentStyle,
+  titleFont,
+} from './modal.css';
 
 type Props = {
   children: React.ReactNode;
@@ -16,23 +22,38 @@ export const Modal = ({
   title,
   isFullScreen,
 }: Props) => {
+  const escFunction = useCallback(
+    (event) => {
+      if (event.key === 'Escape') {
+        // Do whatever when esc is pressed
+        onClickCloseButton();
+      }
+    },
+    [onClickCloseButton]
+  );
+
+  useEffect(() => {
+    document.addEventListener('keydown', escFunction, false);
+
+    return () => {
+      document.removeEventListener('keydown', escFunction, false);
+    };
+  }, [escFunction]);
+
   return (
     <div
       style={{
         display: isOpen ? 'flex' : 'none',
-        // paddingTop: 35 leaves room for the drag bar on mac
-        paddingTop: isFullScreen ? 35 : '',
+        // paddingTop: 30 leaves room for the drag bar on mac
+        paddingTop: 30,
       }}
       className={modalBackdropStyle}
     >
       <div
         className={modalContentStyle}
         style={{
-          display: 'flex',
-          flexDirection: 'column',
           height: isFullScreen ? '95vh' : '',
           width: isFullScreen ? '95vw' : '',
-          minHeight: 100,
         }}
       >
         <div style={{ display: 'flex', flexDirection: 'column' }}>
@@ -50,7 +71,7 @@ export const Modal = ({
             {title}
           </span>
         </div>
-        <div style={{ flex: 1, overflow: 'auto' }}>{children}</div>
+        <div className={modalChildrenContainer}>{children}</div>
       </div>
     </div>
   );
diff --git a/src/renderer/Generics/redesign/Modal/modal.css.ts b/src/renderer/Generics/redesign/Modal/modal.css.ts
index d727d1c4b..68eb6e125 100644
--- a/src/renderer/Generics/redesign/Modal/modal.css.ts
+++ b/src/renderer/Generics/redesign/Modal/modal.css.ts
@@ -2,6 +2,7 @@ import { style } from '@vanilla-extract/css';
 import { vars } from '../theme.css';
 
 export const modalBackdropStyle = style({
+  boxSizing: 'border-box',
   display: 'none',
   position: 'fixed',
   zIndex: 1,
@@ -9,6 +10,8 @@ export const modalBackdropStyle = style({
   justifyContent: 'center',
   left: '0',
   top: '0',
+  paddingTop: 30,
+  paddingBottom: 30,
   width: '100%',
   height: '100%',
   overflow: 'auto',
@@ -16,9 +19,13 @@ export const modalBackdropStyle = style({
 });
 
 export const modalContentStyle = style({
+  display: 'flex',
+  flexDirection: 'column',
+  minHeight: 150,
+  boxSizing: 'border-box',
   filter:
     'drop-shadow(0px 32px 64px rgba(0, 0, 0, 0.1876)) drop-shadow(0px 2px 21px rgba(0, 0, 0, 0.1474))',
-  maxHeight: '95vh',
+  maxHeight: '90vh',
   backgroundColor: vars.color.background,
   padding: '32px',
   paddingTop: '0px',
@@ -36,3 +43,10 @@ export const titleFont = style({
   fontWeight: 590,
   paddingBottom: 16,
 });
+
+export const modalChildrenContainer = style({
+  flex: 1,
+  overflow: 'auto',
+  // extra padding from scrollbar
+  paddingRight: 10,
+});
diff --git a/src/renderer/Generics/redesign/RedesignContainer.tsx b/src/renderer/Generics/redesign/RedesignContainer.tsx
index 332d0332f..56b743a73 100644
--- a/src/renderer/Generics/redesign/RedesignContainer.tsx
+++ b/src/renderer/Generics/redesign/RedesignContainer.tsx
@@ -5,31 +5,40 @@ import { store } from '../../state/store';
 
 import StorybookLanguageSelect from '../../Presentational/StorybookLanguageSelect';
 import { darkTheme, lightTheme } from './theme.css';
+import Button from './Button/Button';
 
 const RedesignContainerStoryBook: React.FC = ({ children }) => {
   const [isDarkTheme, setIsDarkTheme] = useState(false);
 
   return (
     <Provider store={store}>
-      <div style={{ display: 'flex', flexDirection: 'column', height: '90vh' }}>
-        <div style={{ display: 'flex', flexDirection: 'row' }}>
+      <div
+        id="onBoarding"
+        className={isDarkTheme ? darkTheme : lightTheme}
+        style={{ display: 'flex', flexDirection: 'column', height: '90vh' }}
+      >
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'flex-end',
+            gap: 20,
+          }}
+        >
           <div>
             <p>Toggle dark mode</p>
-            <button
-              style={{ width: 150 }}
-              type="button"
+            <Button
+              label={`Switch to ${isDarkTheme ? 'light' : 'dark'} theme`}
               onClick={() =>
                 setIsDarkTheme((currentValue: boolean) => !currentValue)
               }
-            >
-              Switch to {isDarkTheme ? 'light' : 'dark'} theme
-            </button>
+            />
+          </div>
+          <div style={{ minWidth: 150 }}>
+            <StorybookLanguageSelect />
           </div>
-          <StorybookLanguageSelect />
         </div>
         <div
-          id="onBoarding"
-          className={isDarkTheme ? darkTheme : lightTheme}
           style={{
             marginTop: '1em',
             border: '1px dashed #E3E3E3',
diff --git a/src/renderer/Generics/redesign/Select/MultiSelect.tsx b/src/renderer/Generics/redesign/Select/MultiSelect.tsx
new file mode 100644
index 000000000..91a827e12
--- /dev/null
+++ b/src/renderer/Generics/redesign/Select/MultiSelect.tsx
@@ -0,0 +1,77 @@
+import { useEffect, useState } from 'react';
+import ReactSelect, {
+  MenuPlacement,
+  MultiValue,
+  SingleValue,
+} from 'react-select';
+
+type SelectOption = { value: string; label: string };
+
+type Props = {
+  isDisabled: boolean;
+  options: SelectOption[];
+  value: undefined | string | string[];
+  onChange: (newValue?: string | string[]) => void;
+  isMulti: boolean;
+  menuPlacement?: string;
+};
+const MultiSelect = ({
+  isDisabled,
+  options,
+  value,
+  onChange,
+  isMulti,
+  menuPlacement,
+}: Props) => {
+  const [sSelectedOptions, setSelectedOptions] = useState<SelectOption[]>([]);
+
+  useEffect(() => {
+    // if no value is set in the prop, show the default value
+    // (ex. if no value is set in the node's config, show the node spec default value)
+    if (Array.isArray(value)) {
+      setSelectedOptions(
+        options.filter((option) => {
+          return value.includes(option.value);
+        })
+      );
+    } else {
+      setSelectedOptions(
+        options.filter((option) => {
+          return value === option.value;
+        })
+      );
+    }
+  }, [value, options]);
+
+  return (
+    <div style={{ color: 'initial' }}>
+      <ReactSelect
+        value={sSelectedOptions}
+        options={options}
+        onChange={(
+          newValue: SingleValue<SelectOption> | MultiValue<SelectOption>
+        ) => {
+          console.log('onChange newValue: ', newValue);
+          if (Array.isArray(newValue)) {
+            // return array of values
+            onChange(
+              newValue.map((selectOption) => {
+                return selectOption.value;
+              })
+            );
+          } else {
+            const singleValue = newValue as SingleValue<SelectOption>;
+            onChange(singleValue?.value ? singleValue.value : undefined);
+          }
+        }}
+        isDisabled={isDisabled}
+        isMulti={isMulti}
+        menuPlacement={menuPlacement as MenuPlacement}
+      />
+    </div>
+  );
+};
+MultiSelect.defaultProps = {
+  menuPlacement: 'bottom',
+};
+export default MultiSelect;
diff --git a/src/renderer/Generics/redesign/Select/Select.tsx b/src/renderer/Generics/redesign/Select/Select.tsx
index 69dfcc51e..e352f8993 100644
--- a/src/renderer/Generics/redesign/Select/Select.tsx
+++ b/src/renderer/Generics/redesign/Select/Select.tsx
@@ -80,7 +80,10 @@ const Select = ({
         styles={{
           control: (base) => ({
             ...base,
-            backgroundColor: 'inherit',
+            backgroundColor: isDisabled
+              ? vars.color.backgroundDisabled
+              : 'inherit',
+            color: isDisabled ? vars.color.fontDisabled : 'inherit',
             borderColor: vars.color.border,
             boxShadow: 'none',
             ':hover': {
diff --git a/src/renderer/Generics/redesign/Typography b/src/renderer/Generics/redesign/Typography
deleted file mode 100644
index e69de29bb..000000000
diff --git a/src/renderer/Generics/redesign/Typography/Caption.tsx b/src/renderer/Generics/redesign/Typography/Caption.tsx
new file mode 100644
index 000000000..c27d3019f
--- /dev/null
+++ b/src/renderer/Generics/redesign/Typography/Caption.tsx
@@ -0,0 +1,13 @@
+import { captionTextClass } from './caption.css';
+
+export interface CaptionProps {
+  children?: React.ReactNode;
+  text?: React.ReactNode | string;
+  // todo: display block or inline?
+}
+
+const Caption = ({ text, children }: CaptionProps) => {
+  return <div className={captionTextClass}>{children ?? text}</div>;
+};
+
+export default Caption;
diff --git a/src/renderer/Generics/redesign/Typography/caption.css.ts b/src/renderer/Generics/redesign/Typography/caption.css.ts
new file mode 100644
index 000000000..0f8c934ad
--- /dev/null
+++ b/src/renderer/Generics/redesign/Typography/caption.css.ts
@@ -0,0 +1,9 @@
+import { style } from '@vanilla-extract/css';
+import { vars } from '../theme.css';
+
+export const captionTextClass = style({
+  fontWeight: 400,
+  fontSize: 11,
+  lineHeight: '14px',
+  color: vars.color.font70,
+});
diff --git a/src/renderer/Presentational/NodeSettingsModal/NodeSettings.tsx b/src/renderer/Presentational/NodeSettingsModal/NodeSettings.tsx
new file mode 100644
index 000000000..8ec269023
--- /dev/null
+++ b/src/renderer/Presentational/NodeSettingsModal/NodeSettings.tsx
@@ -0,0 +1,55 @@
+import { useTranslation } from 'react-i18next';
+
+import { Modal } from '../../Generics/redesign/Modal/Modal';
+import DynamicSettings, {
+  CategoryConfig,
+} from '../../Generics/redesign/DynamicSettings/DynamicSettings';
+import { ConfigValuesMap } from '../../../common/nodeConfig';
+import { Message } from '../../Generics/redesign/Message/Message';
+import { SettingChangeHandler } from './NodeSettingsWrapper';
+
+export type ThemeSetting = 'light' | 'dark' | 'auto';
+export type Preference = 'theme' | 'isOpenOnStartup';
+export interface NodeSettingsProps {
+  isOpen: boolean;
+  onClickClose: () => void;
+  categoryConfigs?: CategoryConfig[];
+  configValuesMap?: ConfigValuesMap;
+  isDisabled?: boolean;
+  onChange?: SettingChangeHandler;
+}
+
+const NodeSettings = ({
+  isOpen,
+  onClickClose,
+  categoryConfigs,
+  configValuesMap,
+  isDisabled,
+  onChange,
+}: NodeSettingsProps) => {
+  const { t } = useTranslation('genericComponents');
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      title={t('Node settings')}
+      onClickCloseButton={onClickClose}
+    >
+      {isDisabled && (
+        <Message
+          type="warning"
+          title="The node must be stopped to make changes"
+        />
+      )}
+      {/* todo: tab1 */}
+      <DynamicSettings
+        categoryConfigs={categoryConfigs}
+        configValuesMap={configValuesMap}
+        isDisabled={isDisabled}
+        onChange={onChange}
+      />
+    </Modal>
+  );
+};
+
+export default NodeSettings;
diff --git a/src/renderer/Presentational/NodeSettingsModal/NodeSettingsWrapper.tsx b/src/renderer/Presentational/NodeSettingsModal/NodeSettingsWrapper.tsx
new file mode 100644
index 000000000..d3c3448a2
--- /dev/null
+++ b/src/renderer/Presentational/NodeSettingsModal/NodeSettingsWrapper.tsx
@@ -0,0 +1,140 @@
+import { useEffect, useState } from 'react';
+import {
+  ConfigTranslation,
+  ConfigTranslationMap,
+  ConfigValue,
+  FilePathControlType,
+} from '../../../common/nodeConfig';
+import electron from '../../electronGlobal';
+import { CategoryConfig } from '../../Generics/redesign/DynamicSettings/DynamicSettings';
+import { useAppSelector } from '../../state/hooks';
+import { selectSelectedNode } from '../../state/node';
+import NodeSettings from './NodeSettings';
+
+export type SettingChangeHandler = (
+  configKey: string,
+  newValue: ConfigValue
+) => void;
+export interface NodeSettingsWrapperProps {
+  isOpen: boolean;
+  onClickClose: () => void;
+}
+
+const NodeSettingsWrapper = ({
+  isOpen,
+  onClickClose,
+}: NodeSettingsWrapperProps) => {
+  const [sIsConfigDisabled, setIsConfigDisabled] = useState<boolean>(true);
+  const [sConfigTranslationMap, setConfigTranslationMap] =
+    useState<ConfigTranslationMap>();
+  const [sCategoryConfigs, setCategoryConfigs] = useState<CategoryConfig[]>();
+
+  const selectedNode = useAppSelector(selectSelectedNode);
+
+  useEffect(() => {
+    let isDisabled = true;
+    let configTranslationMap;
+    console.log(selectedNode);
+    if (selectedNode) {
+      isDisabled = ['running', 'starting'].includes(selectedNode.status);
+      configTranslationMap = selectedNode.spec.configTranslation;
+    }
+    setIsConfigDisabled(isDisabled);
+    setConfigTranslationMap(configTranslationMap);
+  }, [selectedNode]);
+  // configTranslationMap = selectedNode.spec.configTranslation;
+
+  useEffect(() => {
+    // category to configs
+    const categoryMap: Record<string, ConfigTranslationMap> = {};
+    if (sConfigTranslationMap) {
+      Object.keys(sConfigTranslationMap).forEach((configKey) => {
+        const configTranslation: ConfigTranslation =
+          sConfigTranslationMap[configKey];
+        const category = configTranslation.category ?? 'Other';
+        if (!categoryMap[category]) {
+          categoryMap[category] = {};
+        }
+        categoryMap[category][configKey] = configTranslation;
+      });
+    }
+    const arr = Object.keys(categoryMap).map((category) => {
+      return {
+        category,
+        configTranslationMap: categoryMap[category],
+      };
+    });
+
+    // Put 'Other' category at the bottom
+    arr.sort((x, y) => {
+      if (x.category === 'Other') {
+        return 1;
+      }
+      if (y.category === 'Other') {
+        return -1;
+      }
+      return 0;
+    });
+
+    setCategoryConfigs(arr);
+  }, [sConfigTranslationMap]);
+
+  /**
+   * Sent from the individual setting input component
+   * @param configKey
+   * @param newValue
+   */
+  const onNodeConfigChange: SettingChangeHandler = async (
+    configKey: string,
+    newValue: ConfigValue
+  ) => {
+    // updateNode
+    console.log('updating node with newValue: ', newValue);
+    if (selectedNode?.config) {
+      // If the configChange is for a folder location, open electron
+      const { configValuesMap } = selectedNode.config;
+      const currentValue = configValuesMap[configKey];
+      const { configTranslation } = selectedNode.spec;
+      if (
+        configTranslation &&
+        configTranslation[configKey]?.uiControl.type === FilePathControlType
+      ) {
+        const openDialogForNodeDataDir =
+          await electron.openDialogForNodeDataDir(selectedNode.id);
+        console.log(
+          'openDialogForNodeDataDir before, and res:',
+          currentValue,
+          openDialogForNodeDataDir
+        );
+      } else {
+        const newConfig = {
+          ...selectedNode.config,
+          configValuesMap: {
+            ...configValuesMap,
+            [configKey]: newValue,
+          },
+        };
+        console.log('updating node with newConfig: ', newConfig);
+        await electron.updateNode(selectedNode.id, {
+          config: newConfig,
+        });
+      }
+      // todo: show the user it was successful or not
+    } else {
+      console.error('No selectedNode detected. Unable to change settings');
+    }
+  };
+
+  return (
+    <NodeSettings
+      isOpen={isOpen}
+      onClickClose={onClickClose}
+      categoryConfigs={sCategoryConfigs}
+      configValuesMap={selectedNode?.config.configValuesMap}
+      isDisabled={sIsConfigDisabled}
+      onChange={onNodeConfigChange}
+    />
+  );
+};
+
+export default NodeSettingsWrapper;
diff --git a/src/renderer/Presentational/StorybookLanguageSelect.tsx b/src/renderer/Presentational/StorybookLanguageSelect.tsx
index ba985210d..f2b6202b2 100644
--- a/src/renderer/Presentational/StorybookLanguageSelect.tsx
+++ b/src/renderer/Presentational/StorybookLanguageSelect.tsx
@@ -1,6 +1,6 @@
 import { useTranslation } from 'react-i18next';
 import { useState } from 'react';
-import Select from '../DynamicControls/Select';
+import Select from '../Generics/redesign/Select/Select';
 
 const StorybookLanguageSelect = () => {
   const { i18n } = useTranslation();
@@ -8,16 +8,15 @@ const StorybookLanguageSelect = () => {
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const onChangeLanguage = async (newLang: any) => {
-    console.log('language selected: ', newLang);
-    setLang(newLang);
-    i18n.changeLanguage(newLang);
+    console.log('language selected: ', newLang.value);
+    setLang(newLang.value);
+    i18n.changeLanguage(newLang.value);
   };
 
   return (
     <Select
       isDisabled={false}
       value={sLang}
-      isMulti={false}
       options={[
         { label: 'English', value: 'en' },
         { label: 'Chinese', value: 'cn' },
diff --git a/src/stories/Generic/DynamicSettings.stories.tsx b/src/stories/Generic/DynamicSettings.stories.tsx
new file mode 100644
index 000000000..8bb6765bd
--- /dev/null
+++ b/src/stories/Generic/DynamicSettings.stories.tsx
@@ -0,0 +1,241 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { ConfigValuesMap } from '../../common/nodeConfig';
+
+import DynamicSettings, { CategoryConfig } from '../../renderer/Generics/redesign/DynamicSettings/DynamicSettings';
+
+export default {
+  title: 'Generic/DynamicSettings',
+  component: DynamicSettings,
+  argTypes: {},
+} as ComponentMeta<typeof DynamicSettings>;
+
+const Template: ComponentStory<typeof DynamicSettings> = (args) => (
+  <DynamicSettings {...args} />
+);
+console.log('yoooooo');
+
+const configValuesMap: ConfigValuesMap = {
+  dataDir:
+    '/Users/johns/Library/Application Support/NiceNode/nodes/besu-1667947772',
+  hostAllowlist: 'localhost,host.docker.internal',
+  http: 'Enabled',
+  httpCorsDomains: '"http://localhost"',
+  webSockets: 'Disabled',
+};
+
+const categoryConfigs: CategoryConfig[] = [
+  {
+    category: "Storage",
+    configTranslationMap: {
+      dataDir: {
+        displayName: 'Data location',
+        category: 'Storage',
+        cliConfigPrefix: '--data-path=',
+        uiControl: {
+          type: 'filePath',
+        },
+      },
+      dataStorageFormat: {
+        displayName: "Besu's data storage format",
+        category: 'Storage',
+        cliConfigPrefix: '--data-storage-format=',
+        uiControl: {
+          type: 'select/single',
+          controlTranslations: [
+            {
+              value: 'FOREST',
+              config: 'FOREST',
+            },
+            {
+              value: 'BONSAI',
+              config: 'BONSAI',
+            },
+          ],
+        },
+        defaultValue: 'FOREST',
+        documentation:
+          'https://besu.hyperledger.org/en/stable/Reference/CLI/CLI-Syntax/#data-storage-format',
+      },
+    }
+  },
+  {
+    category: "Syncronization",
+    configTranslationMap: {
+      syncMode: {
+        displayName: 'Sync mode',
+        category: 'Syncronization',
+        cliConfigPrefix: '--sync-mode=',
+        uiControl: {
+          type: 'select/single',
+          controlTranslations: [
+            {
+              value: 'FAST',
+              config: 'FAST',
+            },
+            {
+              value: 'FULL',
+              config: 'FULL',
+            },
+          ],
+        },
+        defaultValue: 'FAST',
+      },
+    }
+  },
+  {
+    category: "RPC APIs",
+    configTranslationMap: {
+      http: {
+        displayName: 'RPC http connections',
+        category: 'RPC APIs',
+        uiControl: {
+          type: 'select/single',
+          controlTranslations: [
+            {
+              value: 'Enabled',
+              config: '--rpc-http-enabled',
+            },
+            {
+              value: 'Disabled',
+            },
+          ],
+        },
+        defaultValue: 'Disabled',
+      },
+      webSockets: {
+        displayName: 'RPC websocket connections',
+        uiControl: {
+          type: 'select/single',
+          controlTranslations: [
+            {
+              value: 'Enabled',
+              config: '--rpc-ws-enabled=true',
+            },
+            {
+              value: 'Disabled',
+            },
+          ],
+        },
+        defaultValue: 'Disabled',
+      },
+      webSocketsPort: {
+        displayName: 'WebSockets RPC listening port',
+        cliConfigPrefix: '--rpc-ws-port=',
+        defaultValue: '8546',
+        uiControl: {
+          type: 'text',
+        },
+      },
+      httpApis: {
+        displayName: "Enabled HTTP API's",
+        category: 'RPC APIs',
+        cliConfigPrefix: '--rpc-http-api=',
+        valuesJoinStr: ',',
+        uiControl: {
+          type: 'select/multiple',
+          controlTranslations: [
+            {
+              value: 'ADMIN',
+              config: 'ADMIN',
+            },
+            {
+              value: 'CLIQUE',
+              config: 'CLIQUE',
+            },
+            {
+              value: 'DEBUG',
+              config: 'DEBUG',
+            },
+            {
+              value: 'EEA',
+              config: 'EEA',
+            },
+            {
+              value: 'ETH',
+              config: 'ETH',
+            },
+            {
+              value: 'IBFT',
+              config: 'IBFT',
+            },
+            {
+              value: 'MINER',
+              config: 'MINER',
+            },
+            {
+              value: 'NET',
+              config: 'NET',
+            },
+            {
+              value: 'PERM',
+              config: 'PERM',
+            },
+            {
+              value: 'PLUGINS',
+              config: 'PLUGINS',
+            },
+            {
+              value: 'QBFT',
+              config: 'QBFT',
+            },
+            {
+              value: 'TRACE',
+              config: 'TRACE',
+            },
+            {
+              value: 'TXPOOL',
+              config: 'TXPOOL',
+            },
+            {
+              value: 'WEB3',
+              config: 'WEB3',
+            },
+          ],
+        },
+        defaultValue: ['ETH', 'NET', 'WEB3'],
+      },
+      hostAllowList: {
+        displayName: 'RPC connections accepted by node',
+        category: 'RPC APIs',
+        cliConfigPrefix: '--host-allowlist=',
+        uiControl: {
+          type: 'text',
+        },
+        infoDescription:
+          'A comma-separated list of hostnames to access the JSON-RPC API and pull Besu metrics. By default, Besu accepts requests from localhost and 127.0.0.1. Example value: medomain.com,meotherdomain.com',
+        defaultValue: 'localhost,127.0.0.1',
+      },
+    }
+  },
+  {
+    category: "Other",
+    configTranslationMap: {
+      httpCorsDomains: {
+        displayName: 'Allowed virtual hostnames for inbound requests',
+        cliConfigPrefix: '--rpc-http-cors-origins=',
+        valuesJoinStr: ',',
+        uiControl: {
+          type: 'text',
+        },
+        documentation:
+          'https://besu.hyperledger.org/en/stable/public-networks/reference/cli/options/#rpc-http-cors-origins',
+        infoDescription:
+          'Change where the node accepts http connections (use comma separated urls wrapped in double quotes). If using a browser wallet, the extension url is required to be input here.',
+      },
+      maxPeerCount: {
+        displayName: 'Max Peer Count (set to low number to use less bandwidth)',
+        cliConfigPrefix: '--max-peers=',
+        defaultValue: '25',
+        uiControl: {
+          type: 'text',
+        },
+      },
+    }
+  }
+]
+
+export const Primary = Template.bind({});
+Primary.args = {
+  categoryConfigs,
+  configValuesMap,
+};
diff --git a/src/stories/Generic/LabelSettings.stories.tsx b/src/stories/Generic/LabelSettings.stories.tsx
index 50bc3b6bc..f1464a087 100644
--- a/src/stories/Generic/LabelSettings.stories.tsx
+++ b/src/stories/Generic/LabelSettings.stories.tsx
@@ -1,6 +1,7 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 
 import LabelSettings from '../../renderer/Generics/redesign/LabelSetting/LabelSettings';
+import ExternalLink from '../../renderer/Generics/redesign/Link/ExternalLink';
 import Select from '../../renderer/Generics/redesign/Select/Select';
 import { Toggle } from '../../renderer/Generics/redesign/Toggle/Toggle';
 
@@ -21,12 +22,16 @@ About.args = {
     {
       sectionTitle: 'Preferences',
       items: [
-        { label: 'Launch on startup', value: <Toggle checked={true}/> },
-        { label: 'Language', value: <Select options={[{value: 'en', label: "English"}]}/> },
+        { label: 'Launch on startup', value: <Toggle checked={true}/>, description: "NiceNode will automatically open when your computer starts up.", learnMoreLink: 'https://ethereum.org' },
+        { label: 'Language', value: <Select options={[{value: 'en', label: "English"}]}/>, learnMoreLink: 'https://nicenode.xyz' },
         {
           label: 'Website',
-          value: 'nimbus.team',
-          link: 'https://ethereum.org',
+          value: <ExternalLink url="https://ethereum.org" text='nimbus website'/>,
+          description: "this is kind of obvious, just here to test"
+        },
+        {
+          label: 'Website',
+          value: <ExternalLink url="https://ethereum.org" text='Ethereum.org'/>,
         },
       ],
     }
diff --git a/src/stories/Presentational/NodeSettings.stories.tsx b/src/stories/Presentational/NodeSettings.stories.tsx
new file mode 100644
index 000000000..9f4e13adb
--- /dev/null
+++ b/src/stories/Presentational/NodeSettings.stories.tsx
@@ -0,0 +1,247 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { ConfigValuesMap } from '../../common/nodeConfig';
+
+import NodeSettings from '../../renderer/Presentational/NodeSettingsModal/NodeSettings';
+
+export default {
+  title: 'Presentational/NodeSettings',
+  component: NodeSettings,
+  argTypes: {},
+} as ComponentMeta<typeof NodeSettings>;
+
+const Template: ComponentStory<typeof NodeSettings> = (args) => (
+  <NodeSettings {...args} />
+);
+
+const configValuesMap: ConfigValuesMap = {
+  dataDir:
+    '/Users/johns/Library/Application Support/NiceNode/nodes/besu-1667947772',
+  hostAllowlist: 'localhost,host.docker.internal',
+  http: 'Enabled',
+  httpCorsDomains: '"http://localhost"',
+  webSockets: 'Disabled',
+};
+
+
+export const Primary = Template.bind({});
+Primary.args = {
+  isOpen: true,
+  onClickClose: () => alert('close clicked'),
+  configValuesMap,
+  categoryConfigs: [
+    {
+      category: "Storage",
+      configTranslationMap: {
+        dataDir: {
+          displayName: "Node data is stored in this folder",
+          category: "Storage",
+          cliConfigPrefix: "--data-path=",
+          uiControl: {
+            type: "filePath"
+          },
+          documentation: "https://besu.hyperledger.org/en/stable/Reference/CLI/CLI-Syntax/#data-path"
+        },
+        dataStorageFormat: {
+          displayName: "The data storage format to use",
+          category: "Storage",
+          cliConfigPrefix: "--data-storage-format=",
+          uiControl: {
+            type: "select/single",
+            controlTranslations: [
+              {
+                value: "FOREST",
+                config: "FOREST"
+              },
+              {
+                value: "BONSAI",
+                config: "BONSAI"
+              }
+            ]
+          },
+          defaultValue: "FOREST",
+          documentation: "https://besu.hyperledger.org/en/stable/Reference/CLI/CLI-Syntax/#data-storage-format"
+        }
+      }
+    },
+    {
+      category: "Syncronization",
+      configTranslationMap: {
+        syncMode: {
+          displayName: "Node synchronization mode",
+          category: "Syncronization",
+          cliConfigPrefix: "--sync-mode=",
+          uiControl: {
+            type: "select/single",
+            controlTranslations: [
+              {
+                value: "FAST",
+                config: "FAST"
+              },
+              {
+                value: "FULL",
+                config: "FULL"
+              }
+            ]
+          },
+          defaultValue: "FAST",
+          documentation: "https://besu.hyperledger.org/en/stable/Concepts/Node-Types/"
+        }
+      }
+    },
+    {
+      category: "RPC APIs",
+      configTranslationMap: {
+        http: {
+          displayName: "rpc http connections (*NiceNode requires http connections)",
+          category: "RPC APIs",
+          uiControl: {
+            type: "select/single",
+            controlTranslations: [
+              {
+                value: "Enabled",
+                config: "--rpc-http-enabled"
+              },
+              {
+                value: "Disabled"
+              }
+            ]
+          },
+          defaultValue: "Disabled",
+          documentation: "https://besu.hyperledger.org/en/stable/Reference/CLI/CLI-Syntax/#rpc-http-enabled"
+        },
+        httpApis: {
+          displayName: "Enabled certain HTTP APIs",
+          category: "RPC APIs",
+          cliConfigPrefix: "--rpc-http-api=",
+          valuesJoinStr: ",",
+          uiControl: {
+            type: "select/multiple",
+            controlTranslations: [
+              {
+                value: "ADMIN",
+                config: "ADMIN"
+              },
+              {
+                value: "CLIQUE",
+                config: "CLIQUE"
+              },
+              {
+                value: "DEBUG",
+                config: "DEBUG"
+              },
+              {
+                value: "EEA",
+                config: "EEA"
+              },
+              {
+                value: "ETH",
+                config: "ETH"
+              },
+              {
+                value: "IBFT",
+                config: "IBFT"
+              },
+              {
+                value: "MINER",
+                config: "MINER"
+              },
+              {
+                value: "NET",
+                config: "NET"
+              },
+              {
+                value: "PERM",
+                config: "PERM"
+              },
+              {
+                value: "PLUGINS",
+                config: "PLUGINS"
+              },
+              {
+                value: "QBFT",
+                config: "QBFT"
+              },
+              {
+                value: "TRACE",
+                config: "TRACE"
+              },
+              {
+                value: "TXPOOL",
+                config: "TXPOOL"
+              },
+              {
+                value: "WEB3",
+                config: "WEB3"
+              }
+            ]
+          },
+          defaultValue: [
+            "ETH",
+            "NET",
+            "WEB3"
+          ],
+          documentation: "https://besu.hyperledger.org/en/stable/Reference/CLI/CLI-Syntax/#rpc-http-api"
+        },
+        hostAllowList: {
+          displayName: "A comma-separated list of hostnames to access the JSON-RPC API and pull Besu metrics. By default, Besu accepts requests from localhost and 127.0.0.1.",
+          category: "RPC APIs",
+          cliConfigPrefix: "--host-allowlist=",
+          uiControl: {
+            type: "text"
+          },
+          infoDescription: "Example value: medomain.com,meotherdomain.com",
+          defaultValue: "localhost,127.0.0.1"
+        }
+      }
+    },
+    {
+      category: "Other",
+      configTranslationMap: {
+        webSockets: {
+          displayName: "Enables or disables the WebSocket JSON-RPC service. The default is false.",
+          uiControl: {
+            type: "select/single",
+            controlTranslations: [
+              {
+                value: "Enabled",
+                config: "--rpc-ws-enabled=true"
+              },
+              {
+                value: "Disabled"
+              }
+            ]
+          },
+          defaultValue: "Disabled",
+          documentation: "https://besu.hyperledger.org/en/stable/Reference/CLI/CLI-Syntax/#rpc-ws-enabled"
+        },
+        webSocketsPort: {
+          displayName: "The port (TCP) on which WebSocket JSON-RPC listens.",
+          cliConfigPrefix: "--rpc-ws-port=",
+          defaultValue: "8546",
+          uiControl: {
+            type: "text"
+          },
+          documentation: "https://besu.hyperledger.org/en/stable/Reference/CLI/CLI-Syntax/#rpc-ws-port",
+          infoDescription: "The port (TCP) on which WebSocket JSON-RPC listens. The default is 8546. You must expose ports appropriately (https://besu.hyperledger.org/en/stable/HowTo/Find-and-Connect/Configuring-Ports/)."
+        },
+        httpCorsDomains: {
+          displayName: "Change where the node accepts http connections (use comma separated urls wrapped in double quotes)",
+          cliConfigPrefix: "--rpc-http-cors-origins=",
+          valuesJoinStr: ",",
+          uiControl: {
+            type: "text"
+          }
+        },
+        maxPeerCount: {
+          displayName: "Max Peer Count (set to low number to use less bandwidth)",
+          cliConfigPrefix: "--max-peers=",
+          defaultValue: "25",
+          uiControl: {
+            type: "text"
+          },
+          documentation: "https://besu.hyperledger.org/en/stable/HowTo/Find-and-Connect/Managing-Peers/#limit-peers"
+        }
+      }
+    }
+  ]
+};
diff --git a/tsconfig.json b/tsconfig.json
index 66374d686..7d41e1e7c 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -23,5 +23,5 @@
     // skip because github's macos-latest was checking lib types
     "skipLibCheck": true
   },
-  "exclude": ["test", "release/build", "release/app/dist", ".erb/dll"]
+  "exclude": ["test", "release/build", "release/app/dist", ".erb/dll", "storybook-static"]
 }