diff --git a/src/renderer/Generics/redesign/SelectCard/SelectCard.tsx b/src/renderer/Generics/redesign/SelectCard/SelectCard.tsx
new file mode 100644
index 000000000..15b99fc78
--- /dev/null
+++ b/src/renderer/Generics/redesign/SelectCard/SelectCard.tsx
@@ -0,0 +1,79 @@
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import { NodeIconId } from 'renderer/assets/images/nodeIcons';
+import { NodeIcon } from '../NodeIcon';
+import { Tag } from '../Tag';
+import {
+  container,
+  descriptionStyle,
+  selectedContainer,
+  tagStyle,
+  textContainer,
+  titleStyle,
+} from './selectCard.css';
+
+export interface SelectCardProps {
+  /**
+   * Node title
+   */
+  title: string;
+  /**
+   * Node info
+   */
+  info?: string;
+  /**
+   * Which icon? // TODO: Change this to drop down eventually
+   */
+  iconId: NodeIconId;
+  /**
+   * Is this selected
+   */
+  isSelected?: boolean;
+  /**
+   * Is this a minority client?
+   */
+  minority?: boolean;
+  /**
+   * Optional click handler
+   */
+  onClick?: () => void;
+}
+
+/**
+ * Primary UI component for user interaction
+ */
+const SelectCard = ({
+  onClick,
+  title,
+  info,
+  iconId,
+  minority = false,
+  isSelected,
+}: SelectCardProps) => {
+  const containerStyles = [container];
+  if (isSelected) {
+    containerStyles.push(selectedContainer);
+  }
+  return (
+    <div
+      className={containerStyles.join(' ')}
+      onClick={() => {
+        if (onClick) {
+          onClick();
+        }
+      }}
+    >
+      <NodeIcon iconId={iconId} size="medium" />
+      <div className={textContainer}>
+        {/* TODO: Fix height to 60px */}
+        <div className={titleStyle}>{title}</div>
+        <div className={descriptionStyle}>{info}</div>
+      </div>
+      {minority && (
+        <div className={tagStyle}>
+          <Tag type="pink" label="Minority Client" />{' '}
+        </div>
+      )}
+    </div>
+  );
+};
+export default SelectCard;
diff --git a/src/renderer/Generics/redesign/SelectCard/selectCard.css.ts b/src/renderer/Generics/redesign/SelectCard/selectCard.css.ts
new file mode 100644
index 000000000..9d3942ef1
--- /dev/null
+++ b/src/renderer/Generics/redesign/SelectCard/selectCard.css.ts
@@ -0,0 +1,58 @@
+import { style } from '@vanilla-extract/css';
+import { vars } from '../theme.css';
+
+export const container = style({
+  margin: 5,
+  cursor: 'pointer',
+  width: 400,
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'center',
+  padding: '10px 12px',
+  gap: '12px',
+  borderRadius: '5px',
+  boxShadow: "inset 0px 0px 0px 4px rgba(255, 255, 255, 0.08)",
+  background: vars.color.background96,
+  ":hover": { background: vars.color.background92 }
+});
+
+export const selectedContainer = style({
+  border: "2px solid #7a64ee",
+  background: vars.components.selectCardBackground,
+  ":hover": { background: vars.components.selectCardBackground }
+});
+
+export const textContainer = style({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'flex-start',
+  padding: '0px',
+  gap: '2px',
+  height: '100%',
+  justifyContent: 'center',
+  flex: 'none',
+  order: 0,
+  flexGrow: 0,
+});
+
+export const titleStyle = style({
+  order: 0,
+  flex: 'none',
+  alignSelf: 'stretch',
+  flexGrow: 0,
+  fontWeight: 600,
+  // color: 'rgba(0, 0, 2, 0.85)',
+});
+
+export const descriptionStyle = style({
+  order: 1,
+  flex: 'none',
+  alignSelf: 'stretch',
+  flexGrow: 0,
+  fontWeight: 400,
+  color: vars.color.font70,
+});
+
+export const tagStyle = style({
+  marginLeft: 'auto'
+});
diff --git a/src/renderer/Generics/redesign/theme.css.ts b/src/renderer/Generics/redesign/theme.css.ts
index a7d6d1167..10bf419f9 100644
--- a/src/renderer/Generics/redesign/theme.css.ts
+++ b/src/renderer/Generics/redesign/theme.css.ts
@@ -32,6 +32,7 @@ export const [lightTheme, vars] = createTheme({
   },
   components: {
     buttonBoxShadow: '0px 1px 2px rgba(0, 0, 0, 0.08)',
+    selectCardBackground: 'rgba(115, 81, 235, 0.08)',
   },
 });
 
@@ -56,5 +57,6 @@ export const darkTheme = createTheme(vars, {
   },
   components: {
     buttonBoxShadow: '0px 1px 2px rgba(0, 0, 0, 0.24)',
+    selectCardBackground: 'rgba(130, 103, 239, 0.08)',
   },
 });
diff --git a/src/stories/SelectCard.stories.tsx b/src/stories/SelectCard.stories.tsx
index 7156ae885..21a60dfd7 100644
--- a/src/stories/SelectCard.stories.tsx
+++ b/src/stories/SelectCard.stories.tsx
@@ -1,7 +1,8 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { NodeIconId } from '../renderer/assets/images/nodeIcons';
 
-import { SelectCard } from '../renderer/Generics/redesign/SelectCard';
+import { SelectCard as OldSelectCard } from '../renderer/Generics/redesign/SelectCard';
+import SelectCard from '../renderer/Generics/redesign/SelectCard/SelectCard';
 
 // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 export default {
@@ -75,7 +76,7 @@ const NetworksTemplate: ComponentStory<typeof SelectCard> = (args) => (
     {networksCards.map((obj) => {
       const darkMode = args.darkMode;
       const { iconId, ...rest } = obj
-      return <SelectCard iconId={iconId as NodeIconId} {...rest} darkMode={darkMode} />;
+      return <OldSelectCard iconId={iconId as NodeIconId} {...rest} darkMode={darkMode} />;
     })}
   </>
 );