diff --git a/package-lock.json b/package-lock.json
index 29242c3..25b0758 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,16 +1,17 @@
 {
   "name": "primal-web-app",
-  "version": "0.78.0",
+  "version": "0.79.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "primal-web-app",
-      "version": "0.78.0",
+      "version": "0.79.2",
       "license": "MIT",
       "dependencies": {
         "@cookbook/solid-intl": "0.1.2",
         "@jukben/emoji-search": "3.0.0",
+        "@kobalte/core": "^0.11.0",
         "@picocss/pico": "1.5.10",
         "@scure/base": "1.1.3",
         "@solidjs/router": "0.8.3",
@@ -512,6 +513,28 @@
         "node": ">=12"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.0.tgz",
+      "integrity": "sha512-kK1h4m36DQ0UHGj5Ah4db7R0rHemTqqO0QLvUqi1/mUUp3LuAWbWxdxSIf/XsnH9VS6rRVPLJCncjRzUvyCLXg==",
+      "dependencies": {
+        "@floating-ui/utils": "^0.1.3"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.3.tgz",
+      "integrity": "sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==",
+      "dependencies": {
+        "@floating-ui/core": "^1.4.2",
+        "@floating-ui/utils": "^0.1.3"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.4.tgz",
+      "integrity": "sha512-qprfWkn82Iw821mcKofJ5Pk9wgioHicxcQMxx+5zt5GSKoqdWvgG5AxVmpmUUjzTLPVSH5auBrhI93Deayn/DA=="
+    },
     "node_modules/@formatjs/cli": {
       "version": "6.1.5",
       "dev": true,
@@ -609,6 +632,31 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@internationalized/date": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.5.0.tgz",
+      "integrity": "sha512-nw0Q+oRkizBWMioseI8+2TeUPEyopJVz5YxoYVzR0W1v+2YytiYah7s/ot35F149q/xAg4F1gT/6eTd+tsUpFQ==",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      }
+    },
+    "node_modules/@internationalized/message": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@internationalized/message/-/message-3.1.1.tgz",
+      "integrity": "sha512-ZgHxf5HAPIaR0th+w0RUD62yF6vxitjlprSxmLJ1tam7FOekqRSDELMg4Cr/DdszG5YLsp5BG3FgHgqquQZbqw==",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0",
+        "intl-messageformat": "^10.1.0"
+      }
+    },
+    "node_modules/@internationalized/number": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/@internationalized/number/-/number-3.2.1.tgz",
+      "integrity": "sha512-hK30sfBlmB1aIe3/OwAPg9Ey0DjjXvHEiGVhNaOiBJl31G0B6wMaX8BN3ibzdlpyRNE9p7X+3EBONmxtJO9Yfg==",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      }
+    },
     "node_modules/@jridgewell/gen-mapping": {
       "version": "0.3.3",
       "dev": true,
@@ -663,6 +711,38 @@
         "node": ">=12.0.0"
       }
     },
+    "node_modules/@kobalte/core": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@kobalte/core/-/core-0.11.0.tgz",
+      "integrity": "sha512-KflwKawdAXv1/W1Eh88SPTwpxGTVs7bAGkkW72w6pnRI3hcFWXEH+E/9CojoFrIc3WVBUT+y7GzaYLOKCailDw==",
+      "dependencies": {
+        "@floating-ui/dom": "^1.5.1",
+        "@internationalized/date": "^3.4.0",
+        "@internationalized/message": "^3.1.1",
+        "@internationalized/number": "^3.2.1",
+        "@kobalte/utils": "^0.9.0"
+      },
+      "peerDependencies": {
+        "solid-js": "^1.7.11"
+      }
+    },
+    "node_modules/@kobalte/utils": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@kobalte/utils/-/utils-0.9.0.tgz",
+      "integrity": "sha512-TYVCpQcpqo1+0HBn3NXoGEBzxd4tH6Um1oc07nrYw1V7Qq0qbMaYAOnfBc1qhlh7sGV4XZldmb0j13Of0FrZQg==",
+      "dependencies": {
+        "@solid-primitives/event-listener": "^2.2.14",
+        "@solid-primitives/keyed": "^1.2.0",
+        "@solid-primitives/map": "^0.4.7",
+        "@solid-primitives/media": "^2.2.4",
+        "@solid-primitives/props": "^3.1.8",
+        "@solid-primitives/refs": "^1.0.5",
+        "@solid-primitives/utils": "^6.2.1"
+      },
+      "peerDependencies": {
+        "solid-js": "^1.7.11"
+      }
+    },
     "node_modules/@noble/ciphers": {
       "version": "0.2.0",
       "license": "MIT",
@@ -724,6 +804,113 @@
         "url": "https://paulmillr.com/funding/"
       }
     },
+    "node_modules/@solid-primitives/event-listener": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@solid-primitives/event-listener/-/event-listener-2.3.0.tgz",
+      "integrity": "sha512-0DS7DQZvCExWSpurVZC9/wjI8RmkhuOtWOy6Pp1Woq9ElMT9/bfjNpkwXsOwisLpcTqh9eUs17kp7jtpWcC20w==",
+      "dependencies": {
+        "@solid-primitives/utils": "^6.2.1"
+      },
+      "peerDependencies": {
+        "solid-js": "^1.6.12"
+      }
+    },
+    "node_modules/@solid-primitives/keyed": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@solid-primitives/keyed/-/keyed-1.2.0.tgz",
+      "integrity": "sha512-0DuTeJdxWjCTu73XnDZs24JzfXckBnpvCfQ6Mf/kTPKkMZJh7tjkBnZEk48ckrE9xmwat9stIdfrBmZctsepIw==",
+      "peerDependencies": {
+        "solid-js": "^1.6.12"
+      }
+    },
+    "node_modules/@solid-primitives/map": {
+      "version": "0.4.8",
+      "resolved": "https://registry.npmjs.org/@solid-primitives/map/-/map-0.4.8.tgz",
+      "integrity": "sha512-p9zhIaIWOQVxLaUEjg6nzrBLZUOzozJFHatdKqISSIq7iJhVXX1M1MPzDHHqKyJw/nSENoKgvZehnG3HErnamw==",
+      "dependencies": {
+        "@solid-primitives/trigger": "^1.0.8"
+      },
+      "peerDependencies": {
+        "solid-js": "^1.6.12"
+      }
+    },
+    "node_modules/@solid-primitives/media": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/@solid-primitives/media/-/media-2.2.5.tgz",
+      "integrity": "sha512-wTESNFteSwOZsNIBPLMIVLuOHIIzt2AIZdaCYYxfsJIr/xjDqSomlmdFlAmxfJD3ondO7fwtWfc0rcmAvjoPCA==",
+      "dependencies": {
+        "@solid-primitives/event-listener": "^2.3.0",
+        "@solid-primitives/rootless": "^1.4.2",
+        "@solid-primitives/static-store": "^0.0.5",
+        "@solid-primitives/utils": "^6.2.1"
+      },
+      "peerDependencies": {
+        "solid-js": "^1.6.12"
+      }
+    },
+    "node_modules/@solid-primitives/props": {
+      "version": "3.1.8",
+      "resolved": "https://registry.npmjs.org/@solid-primitives/props/-/props-3.1.8.tgz",
+      "integrity": "sha512-38ERNFhl87emUDPRlYvCmlbvEcK2mOJB38SU22YS2QXFDK7TQf/7P46XZacs7oODc/fckhfZTitht71FMEDe2g==",
+      "dependencies": {
+        "@solid-primitives/utils": "^6.2.1"
+      },
+      "peerDependencies": {
+        "solid-js": "^1.6.12"
+      }
+    },
+    "node_modules/@solid-primitives/refs": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@solid-primitives/refs/-/refs-1.0.5.tgz",
+      "integrity": "sha512-5hmYmYbm6rs43nMHHozyyUngGA7P7q2WtlaCLJEfmlUJf67GWI1PZmqAiol6m9F37XSMZRuvZLoQ7HA/0q3GYg==",
+      "dependencies": {
+        "@solid-primitives/utils": "^6.2.1"
+      },
+      "peerDependencies": {
+        "solid-js": "^1.6.12"
+      }
+    },
+    "node_modules/@solid-primitives/rootless": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/@solid-primitives/rootless/-/rootless-1.4.2.tgz",
+      "integrity": "sha512-ynI/2aEOPyc14IKCX6yDBqnsAYCoLbaP9V/jejEWMVKOT2ZdV2ZxdftaLimOpWPpvjyti5DUJIGTOfLaNb7jlg==",
+      "dependencies": {
+        "@solid-primitives/utils": "^6.2.1"
+      },
+      "peerDependencies": {
+        "solid-js": "^1.6.12"
+      }
+    },
+    "node_modules/@solid-primitives/static-store": {
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/@solid-primitives/static-store/-/static-store-0.0.5.tgz",
+      "integrity": "sha512-ssQ+s/wrlFAEE4Zw8GV499yBfvWx7SMm+ZVc11wvao4T5xg9VfXCL9Oa+x4h+vPMvSV/Knv5LrsLiUa+wlJUXQ==",
+      "dependencies": {
+        "@solid-primitives/utils": "^6.2.1"
+      },
+      "peerDependencies": {
+        "solid-js": "^1.6.12"
+      }
+    },
+    "node_modules/@solid-primitives/trigger": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@solid-primitives/trigger/-/trigger-1.0.8.tgz",
+      "integrity": "sha512-p9e3FGhCk8sRPxDiCT8vnTE+DOEtrAnJZP4zV0NAV6YGnpV50JATVXNiLjKgyiI/mTIRkWB0+9c5SUbRlqFx6A==",
+      "dependencies": {
+        "@solid-primitives/utils": "^6.2.1"
+      },
+      "peerDependencies": {
+        "solid-js": "^1.6.12"
+      }
+    },
+    "node_modules/@solid-primitives/utils": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/@solid-primitives/utils/-/utils-6.2.1.tgz",
+      "integrity": "sha512-TsecNzxiO5bLfzqb4OOuzfUmdOROcssuGqgh5rXMMaasoFZ3GoveUgdY1wcf17frMJM7kCNGNuK34EjErneZkg==",
+      "peerDependencies": {
+        "solid-js": "^1.6.12"
+      }
+    },
     "node_modules/@solidjs/router": {
       "version": "0.8.3",
       "license": "MIT",
@@ -731,6 +918,14 @@
         "solid-js": "^1.5.3"
       }
     },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.2.tgz",
+      "integrity": "sha512-E4KcWTpoLHqwPHLxidpOqQbcrZVgi0rsmmZXUle1jXmJfuIf/UWpczUJ7MZZ5tlxytgJXyp0w4PGkkeLiuIdZw==",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/@thisbeyond/solid-select": {
       "version": "0.13.0",
       "license": "MIT",
diff --git a/package.json b/package.json
index 42cf29d..e9cf236 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
   "dependencies": {
     "@cookbook/solid-intl": "0.1.2",
     "@jukben/emoji-search": "3.0.0",
+    "@kobalte/core": "^0.11.0",
     "@picocss/pico": "1.5.10",
     "@scure/base": "1.1.3",
     "@solidjs/router": "0.8.3",
diff --git a/src/Router.tsx b/src/Router.tsx
index ebed31d..1d1ce67 100644
--- a/src/Router.tsx
+++ b/src/Router.tsx
@@ -1,7 +1,7 @@
 import { Component, createResource, lazy } from 'solid-js';
 import { Routes, Route, Navigate, RouteDataFuncArgs } from "@solidjs/router";
 
-import { ComponentLog, PrimalWindow } from './types/primal';
+import { PrimalWindow } from './types/primal';
 import { fetchKnownProfiles } from './lib/profile';
 
 import { useHomeContext } from './contexts/HomeContext';
diff --git a/src/components/Buttons/ButtonPrimary.tsx b/src/components/Buttons/ButtonPrimary.tsx
new file mode 100644
index 0000000..6e26c68
--- /dev/null
+++ b/src/components/Buttons/ButtonPrimary.tsx
@@ -0,0 +1,27 @@
+import { Component, JSXElement, Match, Show, Switch } from 'solid-js';
+import { hookForDev } from '../../lib/devTools';
+import { Button } from "@kobalte/core";
+
+import styles from './Buttons.module.scss';
+
+const ButtonPrimary: Component<{
+  id?: string,
+  onClick?: (e: MouseEvent) => void,
+  children?: JSXElement,
+  disabled?: boolean,
+}> = (props) => {
+  return (
+    <Button.Root
+      id={props.id}
+      class={styles.primary}
+      onClick={props.onClick}
+      disabled={props.disabled}
+    >
+      <span>
+        {props.children}
+      </span>
+    </Button.Root>
+  )
+}
+
+export default hookForDev(ButtonPrimary);
diff --git a/src/components/Buttons/ButtonSecondary.tsx b/src/components/Buttons/ButtonSecondary.tsx
new file mode 100644
index 0000000..e35812a
--- /dev/null
+++ b/src/components/Buttons/ButtonSecondary.tsx
@@ -0,0 +1,29 @@
+import { Component, JSXElement, Match, Show, Switch } from 'solid-js';
+import { hookForDev } from '../../lib/devTools';
+import { Button } from "@kobalte/core";
+
+import styles from './Buttons.module.scss';
+
+const ButtonSecondary: Component<{
+  id?: string,
+  onClick?: (e: MouseEvent) => void,
+  children?: JSXElement,
+  disabled?: boolean,
+}> = (props) => {
+  return (
+    <Button.Root
+      id={props.id}
+      class={styles.secondary}
+      onClick={props.onClick}
+      disabled={props.disabled}
+    >
+      <div>
+        <span>
+          {props.children}
+        </span>
+      </div>
+    </Button.Root>
+  );
+}
+
+export default hookForDev(ButtonSecondary);
diff --git a/src/components/Buttons/Buttons.module.scss b/src/components/Buttons/Buttons.module.scss
new file mode 100644
index 0000000..5437743
--- /dev/null
+++ b/src/components/Buttons/Buttons.module.scss
@@ -0,0 +1,36 @@
+.primary {
+  border: none;
+  border-radius: 6px;
+  margin: 0px 8px;
+  padding: 0px;
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 700;
+  background: var(--brand-gradient-vertical);
+  color: white;
+  >span {
+    opacity: 0.75;
+  }
+}
+
+.secondary {
+  border: none;
+  border-radius: 6px;
+  padding: 1px;
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 700;
+  background: var(--brand-gradient-vertical);
+  color: var(--text-tertiary-2);
+  >div {
+    width: 100%;
+    height: 100%;
+    vertical-align: middle;
+    border-radius: 6px;
+    background-color: var(--background-card);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+}