diff --git a/src/renderer/Generics/redesign/Modal/Modal.tsx b/src/renderer/Generics/redesign/Modal/Modal.tsx
index c11df9fa8..6d911713b 100644
--- a/src/renderer/Generics/redesign/Modal/Modal.tsx
+++ b/src/renderer/Generics/redesign/Modal/Modal.tsx
@@ -21,7 +21,7 @@ export const Modal = ({
   return (
     <div
       style={{
-        display: isOpen ? 'block' : 'none',
+        display: isOpen ? 'flex' : 'none',
       }}
       className={modalBackdropStyle}
     >
diff --git a/src/renderer/Generics/redesign/Modal/modal.css.ts b/src/renderer/Generics/redesign/Modal/modal.css.ts
index 331edfe9a..083302652 100644
--- a/src/renderer/Generics/redesign/Modal/modal.css.ts
+++ b/src/renderer/Generics/redesign/Modal/modal.css.ts
@@ -5,6 +5,8 @@ export const modalBackdropStyle = style({
   display: 'none',
   position: 'fixed',
   zIndex: 1,
+  alignItems: 'center',
+  justifyContent: 'center',
   left: '0',
   top: '0',
   width: '100%',
@@ -24,8 +26,6 @@ export const modalContentStyle = style({
   width: '80%',
   top: '50%',
   left: '50%',
-  position: 'fixed',
-  transform: 'translate(-50%, -50%)',
   color: 'inherit',
   // a: { color: 'inherit' },
 });
diff --git a/src/renderer/Generics/redesign/SelectCard.tsx b/src/renderer/Generics/redesign/SelectCard.tsx
deleted file mode 100644
index dae7a312e..000000000
--- a/src/renderer/Generics/redesign/SelectCard.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import { NodeIconId } from 'renderer/assets/images/nodeIcons';
-import { Icon } from './Icon';
-import { NodeIcon } from './NodeIcon';
-import { RadioButtonBackground } from './RadioButtonBackground';
-import { Tag } from './Tag';
-
-export interface SelectCardProps {
-  /**
-   * Node title
-   */
-  title: string;
-  /**
-   * Node info
-   */
-  info?: string;
-  /**
-   * Which icon? // TODO: Change this to drop down eventually
-   */
-  iconId: NodeIconId;
-  /**
-   * Is this dark mode?
-   */
-  darkMode?: boolean;
-  /**
-   * Is this a minority client?
-   */
-  minority?: boolean;
-  /**
-   * Optional click handler
-   */
-  onClick?: () => void;
-}
-
-/**
- * Primary UI component for user interaction
- */
-export const SelectCard = ({
-  onClick,
-  title,
-  info,
-  iconId,
-  darkMode,
-  minority = false,
-}: SelectCardProps) => {
-  // if onClick exists, we want to enable hover states to allow selecting other items
-  const selection = onClick ? 'selection' : '';
-
-  const getSelectionComponents = () => {
-    const components = [];
-    if (minority) {
-      components.push(
-        <div
-          className={['storybook-select-card-type', `${selection}`].join(' ')}
-        >
-          <Tag type="pink" label="Minority Client" />
-        </div>
-      );
-    }
-    if (selection !== '') {
-      components.push(
-        <>
-          <div className="storybook-select-card-selection">
-            See alternatives
-          </div>
-          <div className="storybook-select-card-icon">
-            <Icon iconId="popup" />
-          </div>
-        </>
-      );
-    }
-    return components;
-  };
-
-  return (
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-    <div className={['storybook-select-card'].join(' ')}>
-      <RadioButtonBackground darkMode={darkMode} onClick={onClick}>
-        <div className={['storybook-select-card-contents'].join(' ')}>
-          <NodeIcon iconId={iconId} size="medium" />
-          <div className="storybook-select-card-container">
-            {/* TODO: Fix height to 60px */}
-            <div className="storybook-select-card-title">{title}</div>
-            <div className="storybook-select-card-info">{info}</div>
-          </div>
-          {getSelectionComponents()}
-        </div>
-      </RadioButtonBackground>
-    </div>
-  );
-};
diff --git a/src/renderer/Generics/redesign/SelectCard/SelectCard.tsx b/src/renderer/Generics/redesign/SelectCard/SelectCard.tsx
index a1a1f235b..b637788a1 100644
--- a/src/renderer/Generics/redesign/SelectCard/SelectCard.tsx
+++ b/src/renderer/Generics/redesign/SelectCard/SelectCard.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 import { NodeIconId } from 'renderer/assets/images/nodeIcons';
 import { NodeIcon } from '../NodeIcon/NodeIcon';
-import { Tag } from '../Tag';
+import Tag from '../Tag/Tag';
 import {
   container,
   descriptionStyle,
diff --git a/src/renderer/Generics/redesign/Tag.tsx b/src/renderer/Generics/redesign/Tag.tsx
deleted file mode 100644
index 7c0f53cef..000000000
--- a/src/renderer/Generics/redesign/Tag.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-export interface TagProps {
-  /**
-   * Tag label
-   */
-  label: string;
-  /**
-   * Tag type
-   */
-  type?: 'pink' | 'pink2' | 'green';
-}
-
-/**
- * Primary UI component for user interaction
- */
-export const Tag = ({ label, type }: TagProps) => {
-  return (
-    <div className={['storybook-tag', `${type}`].join(' ')}>
-      <div>{label}</div>
-    </div>
-  );
-};
diff --git a/src/renderer/Generics/redesign/Tag/Tag.tsx b/src/renderer/Generics/redesign/Tag/Tag.tsx
new file mode 100644
index 000000000..ebd2d2f65
--- /dev/null
+++ b/src/renderer/Generics/redesign/Tag/Tag.tsx
@@ -0,0 +1,19 @@
+import { container } from './tag.css';
+
+export interface TagProps {
+  label: string;
+  /**
+   * Tag color
+   */
+  type?: 'pink' | 'pink2' | 'green';
+}
+
+const Tag = ({ label, type }: TagProps) => {
+  return (
+    <div className={[container, `${type}`].join(' ')}>
+      <div>{label}</div>
+    </div>
+  );
+};
+
+export default Tag;
diff --git a/src/renderer/Generics/redesign/Tag/tag.css.ts b/src/renderer/Generics/redesign/Tag/tag.css.ts
new file mode 100644
index 000000000..6386fdcd2
--- /dev/null
+++ b/src/renderer/Generics/redesign/Tag/tag.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: 'row',
+  justifyContent: 'center',
+  alignItems: 'center',
+  padding: '4px 10px',
+  gap: '4px',
+  borderRadius: '14px',
+  fontSize: '11px',
+  lineHeight: '14px',
+  flex: 'none',
+  order: 0,
+  flexGrow: 0,
+  width: 'fit-content',
+  selectors: {
+    [`&.pink`]: {
+      background: vars.components.tagPinkBackground,
+      color: vars.components.tagPinkFontColor,
+    },
+    [`&.pink2`]: { background: '#fee3f9', color: '#ec429f' },
+    [`&.green`]: { background: '#dffbe8', color: '#3ebb64' },
+  },
+});
diff --git a/src/renderer/Generics/redesign/theme.css.ts b/src/renderer/Generics/redesign/theme.css.ts
index 90c365232..31afb96c3 100644
--- a/src/renderer/Generics/redesign/theme.css.ts
+++ b/src/renderer/Generics/redesign/theme.css.ts
@@ -5,8 +5,10 @@ export const common = {
     white: '#FFFFFF',
     white4: 'rgba(255, 255, 255, 0.04)',
     white25: 'rgba(255, 255, 255, 0.25)',
+    white70: 'rgba(255, 255, 255, 0.70)',
     black4: 'rgba(0, 0, 2, 0.04)',
     black25: 'rgba(0, 0, 2, 0.25)',
+    black85: 'rgba(0, 0, 2, 0.85)',
     primary700: '#5A37D7',
   },
 };
@@ -38,6 +40,8 @@ export const [lightTheme, vars] = createTheme({
     selectCardBackground: 'rgba(115, 81, 235, 0.08)',
     selectCardBoxShadow: 'inset 0px 0px 0px 4px rgba(255, 255, 255, 0.08)',
     secondaryButtonBackground: common.color.white,
+    tagPinkBackground: 'rgba(255, 204, 250, 1)',
+    tagPinkFontColor: common.color.black85,
   },
 });
 
@@ -68,5 +72,7 @@ export const darkTheme = createTheme(vars, {
     selectCardBackground: 'rgba(130, 103, 239, 0.08)',
     selectCardBoxShadow: 'none',
     secondaryButtonBackground: common.color.white4,
+    tagPinkBackground: 'rgba(251, 116, 195, 0.25)',
+    tagPinkFontColor: common.color.white70,
   },
 });
diff --git a/src/renderer/Presentational/AddEthereumNode/addEthereumNode.css.ts b/src/renderer/Presentational/AddEthereumNode/addEthereumNode.css.ts
index 8b9c2aefc..79c45656b 100644
--- a/src/renderer/Presentational/AddEthereumNode/addEthereumNode.css.ts
+++ b/src/renderer/Presentational/AddEthereumNode/addEthereumNode.css.ts
@@ -24,4 +24,5 @@ export const descriptionFont = style({
 
 export const sectionFont = style({
   fontWeight: 600,
+  marginBottom: 0,
 });
diff --git a/src/renderer/assets/sass/app.scss b/src/renderer/assets/sass/app.scss
index 572a9da5c..588014cef 100644
--- a/src/renderer/assets/sass/app.scss
+++ b/src/renderer/assets/sass/app.scss
@@ -6,7 +6,6 @@
 @import 'core/_typography';
 
 // Components
-@import 'components/_tag';
 @import 'components/_bubble';
 @import 'components/_toggle';
 @import 'components/_nodeIcon';
diff --git a/src/renderer/assets/sass/components/_tag.scss b/src/renderer/assets/sass/components/_tag.scss
deleted file mode 100644
index be35d08ec..000000000
--- a/src/renderer/assets/sass/components/_tag.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-.storybook-tag {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  padding: 3px 6px;
-  gap: 4px;
-  border-radius: 5px;
-
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 400;
-  font-size: 11px;
-  line-height: 14px;
-
-  flex: none;
-  order: 0;
-  flex-grow: 0;
-  width: fit-content;
-
-  &.pink {
-    background: #ffccfa;
-    color: rgba(0, 0, 2, 0.7);
-  }
-
-  &.pink2 {
-    background: #fee3f9;
-    color: #ec429f;
-  }
-
-  &.green {
-    background: #dffbe8;
-    color: #3ebb64;
-  }
-}
diff --git a/src/stories/Generic/SpecialSelect.stories.tsx b/src/stories/Generic/SpecialSelect.stories.tsx
index 41a993bbe..75def0ca9 100644
--- a/src/stories/Generic/SpecialSelect.stories.tsx
+++ b/src/stories/Generic/SpecialSelect.stories.tsx
@@ -11,4 +11,44 @@ const Template: ComponentStory<typeof SpecialSelect> = (args) => <SpecialSelect
 
 export const Primary = Template.bind({});
 Primary.args = {
+  options: [
+    {
+      iconId: 'nimbus',
+      title: 'Nimbus',
+      value: 'nimbus',
+      label: 'Nimbus',
+      info: 'Consensus Client',
+      minority: true,
+    },
+    {
+      iconId: 'teku',
+      title: 'Teku',
+      info: 'Consensus Client',
+      value: 'prysm',
+      label: 'Prysm',
+      minority: true,
+    },
+    {
+      iconId: 'lighthouse',
+      title: 'Lighthouse',
+      value: 'lighthouse',
+      label: 'Lighthouse',
+      info: 'Consensus Client',
+    },
+    {
+      iconId: 'prysm',
+      title: 'Prysm',
+      info: 'Consensus Client',
+      value: 'prysm',
+      label: 'Prysm',
+    },
+    {
+      iconId: 'lodestar',
+      title: 'Lodestar',
+      value: 'lodestar',
+      label: 'Lodestar',
+      info: 'Consensus Client',
+      minority: true,
+    },
+  ]
 };
diff --git a/src/stories/Generic/Tag.stories.tsx b/src/stories/Generic/Tag.stories.tsx
index 43db2c4f3..41ff1c0d6 100644
--- a/src/stories/Generic/Tag.stories.tsx
+++ b/src/stories/Generic/Tag.stories.tsx
@@ -1,6 +1,6 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 
-import { Tag } from '../../renderer/Generics/redesign/Tag';
+import Tag from '../../renderer/Generics/redesign/Tag/Tag';
 
 export default {
   title: 'Generic/Tag',