diff --git a/components/avatars/avatar.vue b/components/avatars/avatar.vue
index 39f9cc5..e76ef78 100644
--- a/components/avatars/avatar.vue
+++ b/components/avatars/avatar.vue
@@ -12,6 +12,7 @@ import Skeleton from "../skeleton/Skeleton.vue";
 defineOptions({
     inheritAttrs: false,
 });
+
 const props = defineProps<{
     src?: string;
     alt?: string;
diff --git a/components/buttons/button-dropdown.vue b/components/buttons/button-dropdown.vue
index 03ca2a6..0a0df6d 100644
--- a/components/buttons/button-dropdown.vue
+++ b/components/buttons/button-dropdown.vue
@@ -1,13 +1,14 @@
 <template>
-    <ButtonBase class="enabled:hover:bg-white/20 !rounded-sm !text-left flex flex-row gap-x-3 !ring-0 !p-4 sm:!p-2">
-        <iconify-icon :icon="icon" width="none" class="text-gray-200 size-5" aria-hidden="true" />
+    <ButtonBase class="enabled:hover:bg-white/20 !rounded-sm !ring-0 !p-4 sm:!p-2 !justify-start">
+        <Icon :icon="icon" />
         <slot />
     </ButtonBase>
 </template>
 
 <script lang="ts" setup>
 import type { ButtonHTMLAttributes } from "vue";
-import ButtonBase from "./button-base.vue";
+import ButtonBase from "~/packages/ui/components/buttons/button.vue";
+import Icon from "~/packages/ui/components/icons/icon.vue";
 
 interface Props extends /* @vue-ignore */ ButtonHTMLAttributes {}
 
diff --git a/components/buttons/button-mobile-navbar.vue b/components/buttons/button-mobile-navbar.vue
index 3f5eab2..36f1ab8 100644
--- a/components/buttons/button-mobile-navbar.vue
+++ b/components/buttons/button-mobile-navbar.vue
@@ -1,13 +1,12 @@
 <template>
     <ButtonBase
-        class="hover:bg-white/5 text-xs max-w-full w-full gap-1 h-full !px-0 flex flex-col items-center justify-center">
+        class="hover:bg-white/5 text-xs max-w-full w-full h-full !p-0">
         <iconify-icon :icon="icon" class="size-6" width="none" />
-        <span class="text-xs hidden md:inline">{{ text }}</span>
     </ButtonBase>
 </template>
 
 <script lang="ts" setup>
-import ButtonBase from "./button-base.vue";
+import ButtonBase from "~/packages/ui/components/buttons/button.vue";
 
 defineProps<{
     icon: string;
diff --git a/components/buttons/button-primary.vue b/components/buttons/button-primary.vue
index 97dc0c2..b6f3201 100644
--- a/components/buttons/button-primary.vue
+++ b/components/buttons/button-primary.vue
@@ -1,5 +1,5 @@
 <template>
-    <ButtonBase :loading="loading"
+    <ButtonBase
         class="[--btn-border:theme(colors.primary.950/90%)] [--btn-bg:theme(colors.primary.600)] [--btn-hover-overlay:theme(colors.white/5%)] [--btn-icon:theme(colors.primary.400)] active:[--btn-icon:theme(colors.primary.300)] hover:[--btn-icon:theme(colors.primary.300)] after:shadow-[shadow:inset_0_1px_theme(colors.white/15%)] border border-white/5"
         v-bind="$props">
         <slot />
@@ -8,7 +8,8 @@
 
 <script lang="ts" setup>
 import type { ButtonHTMLAttributes } from "vue";
-import ButtonBase from "./button-base.vue";
+import ButtonBase from "~/packages/ui/components/buttons/button.vue";
+// import ButtonBase from "./button-base.vue";
 
 interface Props extends /* @vue-ignore */ ButtonHTMLAttributes {}
 
diff --git a/components/sidebars/account-picker.vue b/components/sidebars/account-picker.vue
index 5006d88..96ce98c 100644
--- a/components/sidebars/account-picker.vue
+++ b/components/sidebars/account-picker.vue
@@ -20,10 +20,9 @@
                         </span>
                     </div>
                 </div>
-                <ButtonBase v-else class="flex flex-row text-left items-center justify-start gap-3 text-lg hover:ring-1 ring-white/10
-                overflow-hidden h-12 w-full duration-200">
-                    <iconify-icon icon="tabler:login" class="shrink-0 text-2xl" />
-                    <span class="pr-28 line-clamp-1">Sign In</span>
+                <ButtonBase theme="secondary" v-else  class="w-full !justify-start">
+                    <Icon icon="tabler:login" class="!size-6" />
+                    <span class="shrink-0 line-clamp-1">Sign In</span>
                 </ButtonBase>
             </slot>
         </template>
@@ -62,44 +61,24 @@
                 </Menu.Item>
                 <Menu.Item value="" v-if="currentIdentity">
                     <NuxtLink href="/settings" class="w-full">
-                        <div class="rounded text-left flex flex-row gap-x-2 hover:scale-[95%]">
-                            <div
-                                class="shrink-0 size-12 border-dashed border-white/20 border flex items-center justify-center rounded">
-                                <iconify-icon icon="tabler:adjustments" class="size-6 text-gray-200" width="none" />
-                            </div>
-                            <div
-                                class="flex flex-col items-start font-semibold p-1 justify-around text-sm text-gray-300 grow overflow-hidden">
-                                Settings
-                            </div>
-                        </div>
+                        <ButtonBase theme="secondary" class="w-full !justify-start">
+                            <Icon icon="tabler:adjustments" class="!size-6" />
+                            <span class="shrink-0 line-clamp-1">Settings</span>
+                        </ButtonBase>
                     </NuxtLink>
                 </Menu.Item>
                 <Menu.Item value="">
-                    <button @click="$emit('signIn')" class="w-full">
-                        <div class="rounded text-left flex flex-row gap-x-2 hover:scale-[95%]">
-                            <div
-                                class="shrink-0 size-12 border-dashed border-white/20 border flex items-center justify-center rounded">
-                                <iconify-icon icon="tabler:user-plus" class="size-6 text-gray-200" width="none" />
-                            </div>
-                            <div
-                                class="flex flex-col items-start font-semibold p-1 justify-around text-sm text-gray-300 grow overflow-hidden">
-                                Add new account
-                            </div>
-                        </div>
-                    </button>
+                    <ButtonBase @click="$emit('signIn')" theme="secondary" class="w-full !justify-start">
+                        <Icon icon="tabler:user-plus" class="!size-6" />
+                        <span class="shrink-0 line-clamp-1">Add new account</span>
+                    </ButtonBase>
                 </Menu.Item>
                 <Menu.Item value="" v-if="!currentIdentity">
                     <NuxtLink href="/register" class="w-full">
-                        <div class="rounded text-left flex flex-row gap-x-2 hover:scale-[95%]">
-                            <div
-                                class="shrink-0 size-12 border-dashed border-white/20 border flex items-center justify-center rounded">
-                                <iconify-icon icon="tabler:certificate" class="size-6 text-gray-200" width="none" />
-                            </div>
-                            <div
-                                class="flex flex-col items-start font-semibold p-1 justify-around text-sm text-gray-300 grow overflow-hidden">
-                                Create new account
-                            </div>
-                        </div>
+                        <ButtonBase theme="secondary" class="w-full !justify-start">
+                            <Icon icon="tabler:certificate" class="!size-6" />
+                            <span class="shrink-0 line-clamp-1">Create new account</span>
+                        </ButtonBase>
                     </NuxtLink>
                 </Menu.Item>
             </div>
@@ -109,8 +88,9 @@
 
 <script lang="ts" setup>
 import { Menu } from "@ark-ui/vue";
+import ButtonBase from "~/packages/ui/components/buttons/button.vue";
+import Icon from "~/packages/ui/components/icons/icon.vue";
 import Avatar from "../avatars/avatar.vue";
-import ButtonBase from "../buttons/button-base.vue";
 import AdaptiveDropdown from "../dropdowns/AdaptiveDropdown.vue";
 const identities = useIdentities();
 
diff --git a/components/sidebars/navigation.vue b/components/sidebars/navigation.vue
index ce63704..01a16c1 100644
--- a/components/sidebars/navigation.vue
+++ b/components/sidebars/navigation.vue
@@ -1,6 +1,6 @@
 <template>
     <aside
-        class="fixed h-dvh z-10 md:flex hidden flex-col p-4 bg-dark-800 gap-10 max-w-20 hover:max-w-72 duration-200 group ring-1 ring-dark-500"
+        class="fixed h-dvh z-10 md:flex hidden flex-col p-4 bg-dark-800 gap-10 max-w-20 hover:max-w-72 w-full duration-200 group ring-1 ring-dark-500"
         aria-label="Navigation" role="complementary">
         <NuxtLink href="/">
             <img crossorigin="anonymous" class="size-11 rounded ring-1 ring-white/10 hover:scale-105 duration-200"
@@ -12,10 +12,9 @@
                 Timelines</h3>
 
             <NuxtLink v-for="timeline in visibleTimelines" :key="timeline.href" :to="timeline.href">
-                <ButtonBase
-                    class="flex flex-row text-left items-center justify-start gap-3 text-lg hover:ring-1 ring-white/10 overflow-hidden h-12 w-full duration-200">
-                    <iconify-icon :icon="timeline.icon" class="shrink-0 text-2xl" />
-                    <span class="pr-28 line-clamp-1">{{ timeline.name }}</span>
+                <ButtonBase theme="secondary" class="w-full !justify-start">
+                    <Icon :icon="timeline.icon" class="!size-6" />
+                    <span class="shrink-0 line-clamp-1">{{ timeline.name }}</span>
                 </ButtonBase>
             </NuxtLink>
 
@@ -28,43 +27,32 @@
             <AccountPicker @sign-in="signIn().finally(() => loadingAuth = false)"
                 @sign-out="id => signOut(id).finally(() => loadingAuth = false)" />
             <NuxtLink href="/register" v-if="!identity">
-                <ButtonBase
-                    class="flex flex-row text-left items-center justify-start gap-3 text-lg hover:ring-1 ring-white/10 overflow-hidden h-12 w-full duration-200">
-                    <iconify-icon icon="tabler:certificate" class="shrink-0 text-2xl" />
-                    <span class="pr-28 line-clamp-1">Register</span>
+                <ButtonBase theme="secondary" class="w-full !justify-start">
+                    <Icon icon="tabler:certificate" class="!size-6" />
+                    <span class="shrink-0 line-clamp-1">Register</span>
                 </ButtonBase>
             </NuxtLink>
             <NuxtLink href="/settings" v-if="identity">
-                <button @click="$emit('signIn')" class="w-full overflow-hidden">
-                    <div class="rounded text-left flex flex-row items-center gap-x-2 hover:scale-[95%]">
-                        <div
-                            class="shrink-0 size-12 border-dashed border-white/20 border flex items-center justify-center rounded">
-                            <iconify-icon icon="tabler:adjustments" class="size-6 text-gray-200" width="none" />
-                        </div>
-                        <span
-                            class="line-clamp-1 font-semibold p-1 justify-around text-sm text-gray-300 grow overflow-hidden">
-                            Settings
-                        </span>
-                    </div>
-                </button>
+                <ButtonBase @click="$emit('signIn')" theme="secondary" class="w-full !justify-start">
+                    <Icon icon="tabler:adjustments" class="!size-6" />
+                    <span class="shrink-0 line-clamp-1">Settings</span>
+                </ButtonBase>
             </NuxtLink>
             <h3 v-if="identity"
                 class="font-semibold text-gray-300 text-xs uppercase opacity-0 group-hover:opacity-100 duration-200">
                 Posts</h3>
-            <ButtonBase v-if="identity" @click="compose" title="Open composer (shortcut: n)"
-                class="flex flex-row text-left items-center justify-start gap-3 text-lg hover:ring-1 ring-white/10 bg-gradient-to-tr from-primary-300 via-purple-300 to-indigo-400 overflow-hidden h-12 w-full duration-200">
-                <iconify-icon icon="tabler:writing" class="shrink-0 text-2xl" />
-                <span class="pr-28 line-clamp-1">Compose</span>
-                <kbd class="text-xs font-semibold rounded bg-dark-500 font-mono px-1 flex flex-row">
+            <ButtonBase v-if="identity" @click="compose" title="Open composer (shortcut: n)" theme="gradient" class="!justify-start">
+                <Icon icon="tabler:writing" class="!size-6" />
+                <span class="shrink-0 line-clamp-1">Compose</span>
+                <kbd class="text-xs font-semibold rounded bg-dark-500 font-mono px-1 flex flex-row ml-auto">
                     <iconify-icon icon="tabler:keyboard" height="1rem" width="1rem" class="inline" aria-hidden="true" />
                     <iconify-icon icon="tabler:letter-n-small" height="1rem" width="1rem" class="inline -mr-1"
                         aria-hidden="true" />
                 </kbd>
             </ButtonBase>
-            <ButtonBase v-if="$pwa?.needRefresh" @click="$pwa?.updateServiceWorker()" title="Update service worker"
-                class="flex flex-row text-left items-center justify-start gap-3 text-lg ring-2   ring-primary-600 overflow-hidden h-12 w-full duration-200">
-                <iconify-icon icon="tabler:refresh" class="shrink-0 text-2xl" />
-                <span class="pr-28 line-clamp-1">Update</span>
+            <ButtonBase v-if="$pwa?.needRefresh" @click="$pwa?.updateServiceWorker()" title="Update service worker" theme="primary" class="w-full !justify-start">
+                <Icon icon="tabler:refresh" class="!size-6" />
+                <span class="shrink-0 line-clamp-1">Update</span>
             </ButtonBase>
 
         </div>
@@ -107,9 +95,11 @@
 
 <script lang="ts" setup>
 import { Menu } from "@ark-ui/vue";
-import ButtonBase from "../buttons/button-base.vue";
+import ButtonBase from "~/packages/ui/components/buttons/button.vue";
+import Icon from "~/packages/ui/components/icons/icon.vue";
 import ButtonDropdown from "../buttons/button-dropdown.vue";
 import ButtonMobileNavbar from "../buttons/button-mobile-navbar.vue";
+import Button from "../composer/button.vue";
 import AdaptiveDropdown from "../dropdowns/AdaptiveDropdown.vue";
 import AccountPicker from "./account-picker.vue";
 const { $pwa } = useNuxtApp();
diff --git a/components/sidebars/settings-sidebar.vue b/components/sidebars/settings-sidebar.vue
index 5c14f94..218ca6f 100644
--- a/components/sidebars/settings-sidebar.vue
+++ b/components/sidebars/settings-sidebar.vue
@@ -16,8 +16,8 @@
 
 <script lang="ts" setup>
 import { Tabs } from "@ark-ui/vue";
+import ButtonBase from "~/packages/ui/components/buttons/button.vue";
 import { SettingPages } from "~/settings";
-import ButtonBase from "../buttons/button-base.vue";
 
 const tab = ref<SettingPages>(
     (window.location.hash.slice(1) as SettingPages) || SettingPages.Account,
diff --git a/packages/ui/components/buttons/button.vue b/packages/ui/components/buttons/button.vue
new file mode 100644
index 0000000..ab08e45
--- /dev/null
+++ b/packages/ui/components/buttons/button.vue
@@ -0,0 +1,39 @@
+<template>
+    <button v-bind="$attrs" type="button" :disabled="loading"
+        :class="['relative isolate text-base/6 font-semibold px-[calc(theme(spacing[3.5])-1px)] py-[calc(theme(spacing[2.5])-1px)] sm:px-[calc(theme(spacing.3)-1px)] sm:py-[calc(theme(spacing[1.5])-1px)] sm:text-sm/6 focus:outline-none focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-[--btn-bg] before:absolute before:inset-0 before:-z-10 before:rounded-[calc(theme(borderRadius.lg)-1px)] overflow-hidden before:shadow before:hidden after:absolute after:-z-10 after:-inset-px after:rounded-md before:disabled:shadow-none after:disabled:shadow-none text-white cursor-default rounded-md duration-200 hover:shadow disabled:opacity-70 content-none disabled:cursor-not-allowed shadow-sm bg-[--btn-bg] before:bg-[--btn-bg] after:active:bg-[--btn-hover-overlay] after:hover:bg-[--btn-hover-overlay] [&>[data-slot=icon]]:my-0.5 [&>[data-slot=icon]]:size-5 [&>[data-slot=icon]]:shrink-0 [&>[data-slot=icon]]:text-[--btn-icon] [&>[data-slot=icon]]:sm:my-1 [&>[data-slot=icon]]:sm:size-4 inline-flex items-center justify-center gap-x-3', theme && themes[theme]]">
+        <div data-spinner v-if="loading" class="absolute inset-0 bg-[--btn-bg] flex items-center justify-center">
+            <iconify-icon icon="tabler:loader-2" height="none" class="animate-spin size-5" />
+        </div>
+        <slot />
+    </button>
+</template>
+
+<script lang="ts" setup>
+import "iconify-icon";
+import type { ButtonHTMLAttributes } from "vue";
+
+const themes = {
+    primary:
+        "[--btn-border:theme(colors.primary.950/90%)] [--btn-bg:theme(colors.primary.600)] [--btn-hover-overlay:theme(colors.white/30%)] [--btn-icon:theme(colors.primary.200)] active:[--btn-icon:theme(colors.primary.100)] hover:[--btn-icon:theme(colors.primary.100)] after:shadow-[shadow:inset_0_1px_theme(colors.white/15%)] border border-white/5",
+    secondary:
+        "[--btn-border:theme(colors.zinc.950/90%)] [--btn-bg:theme(colors.zinc.800)] [--btn-hover-overlay:theme(colors.white/5%)] [--btn-icon:theme(colors.zinc.400)] active:[--btn-icon:theme(colors.zinc.300)] hover:[--btn-icon:theme(colors.zinc.300)] after:shadow-[shadow:inset_0_1px_theme(colors.white/15%)] border border-white/5",
+    // Gradient:  bg-gradient-to-tr from-primary-300 via-purple-300 to-indigo-400
+    gradient:
+        "bg-[image:--btn-bg] before:bg-[image:--btn-bg] [--btn-border:theme(colors.primary.950/90%)] [--btn-bg:linear-gradient(to_right,theme(colors.primary.300),theme(colors.purple.300),theme(colors.indigo.400))] [--btn-hover-overlay:theme(colors.white/10%)] [--btn-icon:theme(colors.gray.100)] active:[--btn-icon:theme(colors.gray.50)] hover:[--btn-icon:theme(colors.gray.50)] after:shadow-[shadow:inset_0_1px_theme(colors.white/15%)] [&>[data-spinner]]:bg-[image:--btn-bg]",
+};
+
+interface Props extends /* @vue-ignore */ ButtonHTMLAttributes {}
+
+defineProps<
+    Props & {
+        loading?: boolean;
+        theme?: keyof typeof themes;
+    }
+>();
+
+defineOptions({
+    inheritAttrs: false,
+});
+</script>
+
+<style></style>
\ No newline at end of file
diff --git a/packages/ui/components/icons/icon.vue b/packages/ui/components/icons/icon.vue
new file mode 100644
index 0000000..fa0b332
--- /dev/null
+++ b/packages/ui/components/icons/icon.vue
@@ -0,0 +1,11 @@
+<template>
+    <iconify-icon data-slot="icon" :icon="icon" width="none" />
+</template>
+
+<script lang="ts" setup>
+import "iconify-icon";
+
+const props = defineProps<{
+    icon: string;
+}>();
+</script>
\ No newline at end of file
diff --git a/packages/ui/demo/buttons-demo.vue b/packages/ui/demo/buttons-demo.vue
new file mode 100644
index 0000000..3f6fddd
--- /dev/null
+++ b/packages/ui/demo/buttons-demo.vue
@@ -0,0 +1,33 @@
+<template>
+    <div class="flex flex-col max-w-72 mx-auto gap-4">
+        <Button>Click me</Button>
+        <Button theme="primary">Click me</Button>
+        <Button theme="secondary">Click me</Button>
+        <Button theme="gradient">Click me</Button>
+
+        <Button loading>Click me</Button>
+        <Button theme="primary" loading>Click me</Button>
+        <Button theme="secondary" loading>Click me</Button>
+        <Button theme="gradient" loading>Click me</Button>
+
+        <Button><Icon icon="tabler:certificate" />Gamer</Button>
+        <Button theme="primary"><Icon icon="tabler:certificate" />Gamer</Button>
+        <Button theme="secondary"><Icon icon="tabler:certificate" />Gamer</Button>
+        <Button theme="gradient"><Icon icon="tabler:certificate" />Gamer</Button>
+
+        <Button><Icon icon="tabler:certificate" /></Button>
+        <Button theme="primary"><Icon icon="tabler:certificate" /></Button>
+        <Button theme="secondary"><Icon icon="tabler:certificate" /></Button>
+        <Button theme="gradient"><Icon icon="tabler:certificate" /></Button>
+
+        <Button>Gamer<Icon icon="tabler:certificate" /></Button>
+        <Button theme="primary">Gamer<Icon icon="tabler:certificate" /></Button>
+        <Button theme="secondary">Gamer<Icon icon="tabler:certificate" /></Button>
+        <Button theme="gradient">Gamer<Icon icon="tabler:certificate" /></Button>
+    </div>
+</template>
+
+<script setup lang="ts">
+import Button from "../components/buttons/button.vue";
+import Icon from "../components/icons/icon.vue";
+</script>
\ No newline at end of file
diff --git a/packages/ui/package.json b/packages/ui/package.json
new file mode 100644
index 0000000..0b87658
--- /dev/null
+++ b/packages/ui/package.json
@@ -0,0 +1,52 @@
+{
+    "name": "@cpluspatch/ui",
+    "displayName": "CPlusPatch UI",
+    "version": "0.0.0",
+    "author": {
+        "email": "jesse.wierzbinski@cpluspatch.com",
+        "name": "Jesse Wierzbinski (CPlusPatch)",
+        "url": "https://cpluspatch.com"
+    },
+    "readme": "README.md",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/lysand-org/lysand-fe.git",
+        "directory": "packages/ui"
+    },
+    "bugs": {
+        "url": "https://github.com/lysand-org/lysand-fe/issues"
+    },
+    "license": "MIT",
+    "contributors": [
+        {
+            "email": "jesse.wierzbinski@cpluspatch.com",
+            "name": "Jesse Wierzbinski (CPlusPatch)",
+            "url": "https://cpluspatch.com"
+        }
+    ],
+    "maintainers": [
+        {
+            "email": "jesse.wierzbinski@cpluspatch.com",
+            "name": "Jesse Wierzbinski (CPlusPatch)",
+            "url": "https://cpluspatch.com"
+        }
+    ],
+    "description": "UI library for my apps",
+    "categories": ["Other"],
+    "type": "module",
+    "engines": {
+        "bun": ">=1.1.17"
+    },
+    "exports": {
+        ".": {
+            "import": "./index.ts",
+            "default": "./index.ts"
+        },
+        "./types": {
+            "import": "./types.ts",
+            "default": "./types.ts"
+        }
+    },
+    "keywords": ["typescript", "vue", "tailwindcss"],
+    "packageManager": "bun@1.1.17"
+}
diff --git a/pages/_test/demo.vue b/pages/_test/demo.vue
new file mode 100644
index 0000000..cd67366
--- /dev/null
+++ b/pages/_test/demo.vue
@@ -0,0 +1,11 @@
+<template>
+    <ButtonsDemo />
+</template>
+
+<script setup lang="ts">
+import ButtonsDemo from "~/packages/ui/demo/buttons-demo.vue";
+
+definePageMeta({
+    layout: "app",
+});
+</script>
\ No newline at end of file
diff --git a/tailwind.config.ts b/tailwind.config.ts
index f7b668b..2417310 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -42,5 +42,5 @@ export default (<Config>{
         },
     },
     plugins: [forms, typography],
-    content: [],
+    content: ["packages/**/*.{vue,js,ts}"],
 });