diff --git a/README.md b/README.md
index f345428..d186eca 100644
--- a/README.md
+++ b/README.md
@@ -57,67 +57,80 @@ This example skeleton provides the default ui experience for dashboards, featuri
 third-level menus.
 
 ```html
+
 <template>
-  <FloatingBanner></FloatingBanner>
-  <FirstLevelMenu>
-    <template v-slot:top>
-      <FirstLevelLink icon="fa-home">Home</FirstLevelLink>
-      <FirstLevelLink icon="fa-location-dot">Pull Zones</FirstLevelLink>
-      <FirstLevelLink icon="fa-bucket">Buckets</FirstLevelLink>
-      <FirstLevelLink icon="fa-meteor">Spaces</FirstLevelLink>
-      <FirstLevelLink icon="fa-globe">Domains</FirstLevelLink>
-      <FirstLevelLink icon="fa-list">Zones</FirstLevelLink>
-    </template>
+    <FloatingBanner></FloatingBanner>
+    <FirstLevelMenu>
+        <template v-slot:top>
+            <FirstLevelLink icon="fa-home">Home</FirstLevelLink>
+            <FirstLevelLink icon="fa-location-dot">Pull Zones</FirstLevelLink>
+            <FirstLevelLink icon="fa-bucket">Buckets</FirstLevelLink>
+            <FirstLevelLink icon="fa-meteor">Spaces</FirstLevelLink>
+            <FirstLevelLink icon="fa-globe">Domains</FirstLevelLink>
+            <FirstLevelLink icon="fa-list">Zones</FirstLevelLink>
+        </template>
 
-    <template v-slot:bottom>
-      <FirstLevelLink icon="fa-wallet">Billing</FirstLevelLink>
-      <FirstLevelLink icon="fa-fingerprint">Account</FirstLevelLink>
-      <FirstLevelLink icon="fa-arrow-right-from-bracket">Logout</FirstLevelLink>
-    </template>
+        <template v-slot:bottom>
+            <FirstLevelLink icon="fa-wallet">Billing</FirstLevelLink>
+            <FirstLevelLink icon="fa-fingerprint">Account</FirstLevelLink>
+            <FirstLevelLink icon="fa-arrow-right-from-bracket">Logout</FirstLevelLink>
+        </template>
 
-    <SecondLevelMenu>
-      <template v-slot:title>Domains</template>
+        <SecondLevelMenu>
+            <template v-slot:title>Domains</template>
 
-      <SecondLevelLink icon="fa-globe">example.com</SecondLevelLink>
-      <SecondLevelLink icon="fa-globe">example.com</SecondLevelLink>
-      <SecondLevelLink icon="fa-globe">example.com</SecondLevelLink>
-      <SecondLevelLink icon="fa-globe">example.com</SecondLevelLink>
-    </SecondLevelMenu>
+            <SecondLevelLink icon="fa-globe">example.com</SecondLevelLink>
+            <SecondLevelLink icon="fa-globe">example.com</SecondLevelLink>
+            <SecondLevelLink icon="fa-globe">example.com</SecondLevelLink>
+            <SecondLevelLink icon="fa-globe">example.com</SecondLevelLink>
+        </SecondLevelMenu>
 
-    <FlexAuto>
-      <ScreenScrollContainer>
-        <ThirdLevelMenu>
-          <template v-slot:title>Test</template>
-        </ThirdLevelMenu>
-        <Container>
-          <HeroCard>
-            <div class="text-3xl">Yeet!</div>
-          </HeroCard>
-          <Card>
-            <CardHeader>Test</CardHeader>
-            <CardBody>Test</CardBody>
-          </Card>
-          <Card>
-            <CardHeader>Test</CardHeader>
-            <CardBody>Test</CardBody>
-          </Card>
-        </Container>
-      </ScreenScrollContainer>
-    </FlexAuto>
-  </FirstLevelMenu>
+        <FlexAuto>
+            <ScreenScrollContainer>
+                <ThirdLevelMenu>
+                    <template v-slot:title>Test</template>
+                </ThirdLevelMenu>
+                <Container>
+                    <HeroCard>
+                        <div class="text-3xl">Yeet!</div>
+                    </HeroCard>
+                    <Card>
+                        <CardHeader>Test</CardHeader>
+                        <CardBody>Test</CardBody>
+                    </Card>
+                    <Card>
+                        <CardHeader>Test</CardHeader>
+                        <CardBody>Test</CardBody>
+                    </Card>
+                </Container>
+            </ScreenScrollContainer>
+        </FlexAuto>
+    </FirstLevelMenu>
 </template>
 
 <script>
-import Card from "@bitinflow/ui/components/Card";
-import CardHeader from "@bitinflow/ui/components/CardHeader";
-import CardBody from "@bitinflow/ui/components/CardBody";
-import SecondLevelMenu from "@bitinflow/ui/components/SecondLevelMenu";
-import FloatingBanner from "@bitinflow/ui/components/FloatingBanner";
-import FirstLevelMenu from "@bitinflow/ui/components/FirstLevelMenu";
-import ScreenScrollContainer from "@bitinflow/ui/components/ScreenScrollContainer";
+    import components from "@bitinflow/ui/components";
+    import {useMenu} from "@bitinflow/ui/composables";
 
-export default {
-  components: {FloatingBanner, ScreenScrollContainer, FirstLevelMenu, SecondLevelMenu, CardBody, CardHeader, Card},
-}
+    export default {
+        components,
+        setup() {
+            useMenu({
+                thirdLevelLinks: [
+                    {
+                        name: 'Test',
+                        icon: 'fa-star',
+                        to: 'test'
+                    }
+                ]
+            })
+        },
+
+        methods: {
+            toggleDarkMode() {
+                document.body.classList.toggle('dark')
+            }
+        }
+    }
 </script>
 ```
\ No newline at end of file
diff --git a/src/colors.js b/colors.js
similarity index 87%
rename from src/colors.js
rename to colors.js
index fbd5d49..5eef73d 100644
--- a/src/colors.js
+++ b/colors.js
@@ -22,4 +22,4 @@ const colors = {
     },
 };
 
-export default colors
\ No newline at end of file
+module.exports = (colors.__esModule ? colors : { default: colors }).default
\ No newline at end of file
diff --git a/src/components.js b/components.js
similarity index 100%
rename from src/components.js
rename to components.js
diff --git a/src/components/Button.vue b/components/Button.vue
similarity index 100%
rename from src/components/Button.vue
rename to components/Button.vue
diff --git a/src/components/Card.vue b/components/Card.vue
similarity index 100%
rename from src/components/Card.vue
rename to components/Card.vue
diff --git a/src/components/CardBody.vue b/components/CardBody.vue
similarity index 100%
rename from src/components/CardBody.vue
rename to components/CardBody.vue
diff --git a/src/components/CardHeader.vue b/components/CardHeader.vue
similarity index 100%
rename from src/components/CardHeader.vue
rename to components/CardHeader.vue
diff --git a/src/components/Container.vue b/components/Container.vue
similarity index 100%
rename from src/components/Container.vue
rename to components/Container.vue
diff --git a/src/components/FirstLevelLink.vue b/components/FirstLevelLink.vue
similarity index 100%
rename from src/components/FirstLevelLink.vue
rename to components/FirstLevelLink.vue
diff --git a/src/components/FirstLevelMenu.vue b/components/FirstLevelMenu.vue
similarity index 100%
rename from src/components/FirstLevelMenu.vue
rename to components/FirstLevelMenu.vue
diff --git a/src/components/FlexAuto.vue b/components/FlexAuto.vue
similarity index 100%
rename from src/components/FlexAuto.vue
rename to components/FlexAuto.vue
diff --git a/src/components/FloatingBanner.vue b/components/FloatingBanner.vue
similarity index 100%
rename from src/components/FloatingBanner.vue
rename to components/FloatingBanner.vue
diff --git a/src/components/HeroCard.vue b/components/HeroCard.vue
similarity index 100%
rename from src/components/HeroCard.vue
rename to components/HeroCard.vue
diff --git a/src/components/ScreenScrollContainer.vue b/components/ScreenScrollContainer.vue
similarity index 100%
rename from src/components/ScreenScrollContainer.vue
rename to components/ScreenScrollContainer.vue
diff --git a/src/components/SecondLevelLink.vue b/components/SecondLevelLink.vue
similarity index 100%
rename from src/components/SecondLevelLink.vue
rename to components/SecondLevelLink.vue
diff --git a/src/components/SecondLevelMenu.vue b/components/SecondLevelMenu.vue
similarity index 100%
rename from src/components/SecondLevelMenu.vue
rename to components/SecondLevelMenu.vue
diff --git a/src/components/ThirdLevelMenu.vue b/components/ThirdLevelMenu.vue
similarity index 92%
rename from src/components/ThirdLevelMenu.vue
rename to components/ThirdLevelMenu.vue
index b4c682f..e580fff 100644
--- a/src/components/ThirdLevelMenu.vue
+++ b/components/ThirdLevelMenu.vue
@@ -12,7 +12,7 @@
       <div class="container mx-auto px-4 lg:px-16">
         <div class="hidden xl:block space-x-4">
           <Button v-for="link in thirdLevelLinks">
-            <i :class="link.icon" class="icon"></i> {{ link.name }}
+            <i :class="['far', link.icon]" class="icon"></i> {{ link.name }}
           </Button>
         </div>
 
@@ -30,7 +30,7 @@
 
 <script>
 import {mapState} from "pinia";
-import {useMenuStore} from "../stores/menu";
+import {useMenuStore} from "../stores/menu.js";
 import Button from "./Button.vue";
 
 export default {
diff --git a/src/composables/app.js b/composables/index.js
similarity index 77%
rename from src/composables/app.js
rename to composables/index.js
index 538a990..ef68e14 100644
--- a/src/composables/app.js
+++ b/composables/index.js
@@ -1,4 +1,4 @@
-import {useMenuStore} from "../stores/menu";
+import {useMenuStore} from "../stores/menu.js";
 
 export const useMenu = (data) => {
     const menu = useMenuStore()
diff --git a/dist/library.cjs b/dist/library.cjs
deleted file mode 100644
index eab8df2..0000000
--- a/dist/library.cjs
+++ /dev/null
@@ -1,571 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var vue = require('vue');
-var pinia = require('pinia');
-
-var script$d = {
-  name: "Button",
-
-  methods: {
-    click() {
-      this.$emit('click');
-    }
-  }
-};
-
-const _hoisted_1$c = {
-  href: "#",
-  class: "truncate text-black dark:text-white hover:bg-zinc-100 dark:bg-base-700 dark:hover:bg-base-600 dark:text-white rounded-lg px-4 py-2"
-};
-
-function render$d(_ctx, _cache, $props, $setup, $data, $options) {
-  return (vue.openBlock(), vue.createElementBlock("a", _hoisted_1$c, [
-    vue.renderSlot(_ctx.$slots, "default")
-  ]))
-}
-
-script$d.render = render$d;
-script$d.__file = "src/components/Button.vue";
-
-var script$c = {
-  name: "Card"
-};
-
-const _hoisted_1$b = { class: "bg-white text-black dark:bg-base-700 dark:text-white rounded shadow mb-8" };
-
-function render$c(_ctx, _cache, $props, $setup, $data, $options) {
-  return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$b, [
-    vue.renderSlot(_ctx.$slots, "default")
-  ]))
-}
-
-script$c.render = render$c;
-script$c.__file = "src/components/Card.vue";
-
-var script$b = {
-  name: "CardBody"
-};
-
-const _hoisted_1$a = { class: "p-8 rounded-b" };
-
-function render$b(_ctx, _cache, $props, $setup, $data, $options) {
-  return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$a, [
-    vue.renderSlot(_ctx.$slots, "default")
-  ]))
-}
-
-script$b.render = render$b;
-script$b.__file = "src/components/CardBody.vue";
-
-var script$a = {
-  name: "CardHeader"
-};
-
-const _hoisted_1$9 = { class: "py-4 px-8 border-b dark:border-base-800 rounded-t" };
-const _hoisted_2$4 = { class: "text-xl font-medium" };
-
-function render$a(_ctx, _cache, $props, $setup, $data, $options) {
-  return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$9, [
-    vue.createElementVNode("div", _hoisted_2$4, [
-      vue.renderSlot(_ctx.$slots, "default")
-    ])
-  ]))
-}
-
-script$a.render = render$a;
-script$a.__file = "src/components/CardHeader.vue";
-
-var script$9 = {
-  name: "Container"
-};
-
-const _hoisted_1$8 = { class: "container mx-auto px-4 lg:px-16 py-8 space-y-8" };
-
-function render$9(_ctx, _cache, $props, $setup, $data, $options) {
-  return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$8, [
-    vue.renderSlot(_ctx.$slots, "default")
-  ]))
-}
-
-script$9.render = render$9;
-script$9.__file = "src/components/Container.vue";
-
-var script$8 = {
-  name: "FirstLevelLink",
-  props: {
-    icon: {
-      type: String,
-      default: 'fa-arrow-up-right-from-square'
-    }
-  }
-};
-
-const _hoisted_1$7 = {
-  class: "hover:bg-primary-500 rounded-lg text-center text-xs py-4 flex flex-col space-y-2",
-  href: "#"
-};
-
-function render$8(_ctx, _cache, $props, $setup, $data, $options) {
-  return (vue.openBlock(), vue.createElementBlock("a", _hoisted_1$7, [
-    vue.createElementVNode("i", {
-      class: vue.normalizeClass(['fal text-xl', $props.icon])
-    }, null, 2 /* CLASS */),
-    vue.createElementVNode("span", null, [
-      vue.renderSlot(_ctx.$slots, "default")
-    ])
-  ]))
-}
-
-script$8.render = render$8;
-script$8.__file = "src/components/FirstLevelLink.vue";
-
-var script$7 = {
-  name: "FirstLevelMenu",
-  data() {
-    return {
-      primaryMenu: [
-        {name: 'Home', icon: 'fal fa-home', to: '/', exact: true},
-        {name: 'Buckets', icon: 'fal fa-bucket', to: '/buckets', exact: false},
-        {name: 'Domains', icon: 'fal fa-globe', to: '/domains', exact: false},
-        {name: 'Spaces', icon: 'fal fa-meteor', to: '/spaces', exact: false},
-        {name: 'Zones', icon: 'fal fa-list-ul', to: '/zones', exact: false},
-      ],
-      secondaryMenu: [
-        {name: 'Logout', icon: 'fal fa-sign-out', to: '/logout'},
-      ],
-    };
-  },
-  methods: {
-    toggleMenu() {
-      this.$refs.overlay.classList.toggle('hidden');
-      this.$refs.sidebar.classList.toggle('-translate-x-full');
-    },
-    closeMenu() {
-      this.$refs.overlay.classList.add('hidden');
-      this.$refs.sidebar.classList.add('-translate-x-full');
-    },
-    toggleDarkMode() {
-      document.body.classList.toggle('dark');
-    }
-  },
-};
-
-const _withScopeId = n => (vue.pushScopeId("data-v-42eb52e3"),n=n(),vue.popScopeId(),n);
-const _hoisted_1$6 = { class: "bg-gray-100 dark:bg-base min-h-screen flex flex-col relative" };
-const _hoisted_2$3 = {
-  ref: "overlay",
-  class: "sm:hidden hidden bg-gray-800 opacity-50 w-full min-h-screen absolute z-10"
-};
-const _hoisted_3$3 = { class: "bg-white relative shadow sm:hidden z-10" };
-const _hoisted_4$2 = { class: "container flex justify-between items-center py-4" };
-const _hoisted_5$1 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/vue.createElementVNode("img", {
-  src: "/img/icon-light.svg",
-  class: "h-4",
-  alt: "bitinflow"
-}, null, -1 /* HOISTED */));
-const _hoisted_6$1 = { class: "flex items-center space-x-4" };
-const _hoisted_7$1 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/vue.createElementVNode("img", {
-  class: "h-8 w-8 rounded-full",
-  alt: "profile",
-  src: "/img/avatar.jpg"
-}, null, -1 /* HOISTED */));
-const _hoisted_8$1 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/vue.createElementVNode("svg", {
-  xmlns: "http://www.w3.org/2000/svg",
-  class: "h-6 w-6",
-  fill: "none",
-  viewBox: "0 0 24 24",
-  stroke: "currentColor"
-}, [
-  /*#__PURE__*/vue.createElementVNode("path", {
-    "stroke-linecap": "round",
-    "stroke-linejoin": "round",
-    "stroke-width": "2",
-    d: "M4 6h16M4 12h16M4 18h16"
-  })
-], -1 /* HOISTED */));
-const _hoisted_9$1 = [
-  _hoisted_8$1
-];
-const _hoisted_10 = { class: "flex flex-grow" };
-const _hoisted_11 = {
-  ref: "sidebar",
-  class: "flex h-screen flex-col w-36 bg-base-800 dark:border-r dark:border-base text-gray-100 shadow sm:relative absolute inset-y-0 transform -translate-x-full sm:translate-x-0 transition transition-transform z-20"
-};
-const _hoisted_12 = { class: "flex-none bg-primary-500 h-16 sm:h-20 py-3 sm:py-6 text-white flex flex-initial justify-center" };
-const _hoisted_13 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/vue.createElementVNode("img", {
-  src: "/img/icon-light.svg",
-  class: "h-8 w-auto",
-  alt: "Logo"
-}, null, -1 /* HOISTED */));
-const _hoisted_14 = [
-  _hoisted_13
-];
-const _hoisted_15 = { class: "flex-auto flex flex-col overflow-y-auto py-6 space-y-6" };
-const _hoisted_16 = { class: "primary flex flex-grow flex-col space-y-4 px-6" };
-const _hoisted_17 = { class: "flex flex-initial flex-col space-y-4 px-6" };
-const _hoisted_18 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/vue.createElementVNode("div", { class: "flex-none" }, null, -1 /* HOISTED */));
-const _hoisted_19 = { class: "flex flex-1" };
-
-function render$7(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_nuxt_link = vue.resolveComponent("nuxt-link");
-
-  return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$6, [
-    vue.createCommentVNode(" Overlay "),
-    vue.createElementVNode("div", _hoisted_2$3, null, 512 /* NEED_PATCH */),
-    vue.createCommentVNode(" Header "),
-    vue.createElementVNode("header", _hoisted_3$3, [
-      vue.createElementVNode("div", _hoisted_4$2, [
-        _hoisted_5$1,
-        vue.createElementVNode("div", _hoisted_6$1, [
-          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($data.secondaryMenu, (link) => {
-            return (vue.openBlock(), vue.createBlock(_component_nuxt_link, {
-              key: link.name,
-              to: link.to
-            }, {
-              default: vue.withCtx(() => [
-                vue.createElementVNode("i", {
-                  class: vue.normalizeClass([link.icon, "icon"])
-                }, null, 2 /* CLASS */),
-                vue.createTextVNode(" " + vue.toDisplayString(link.name), 1 /* TEXT */)
-              ]),
-              _: 2 /* DYNAMIC */
-            }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["to"]))
-          }), 128 /* KEYED_FRAGMENT */)),
-          vue.createVNode(_component_nuxt_link, {
-            class: "inline-block flex",
-            to: "/"
-          }, {
-            default: vue.withCtx(() => [
-              _hoisted_7$1
-            ]),
-            _: 1 /* STABLE */
-          }),
-          vue.createElementVNode("button", {
-            onClick: _cache[0] || (_cache[0] = (...args) => ($options.toggleMenu && $options.toggleMenu(...args))),
-            class: "focus-within:outline-none pl-4"
-          }, _hoisted_9$1)
-        ])
-      ])
-    ]),
-    vue.createCommentVNode(" Sidenav with Content "),
-    vue.createElementVNode("div", _hoisted_10, [
-      vue.createCommentVNode(" Sidenav "),
-      vue.createElementVNode("nav", _hoisted_11, [
-        vue.createCommentVNode(" logo "),
-        vue.createElementVNode("div", _hoisted_12, [
-          vue.createElementVNode("button", {
-            onClick: _cache[1] || (_cache[1] = (...args) => ($options.toggleDarkMode && $options.toggleDarkMode(...args)))
-          }, _hoisted_14)
-        ]),
-        vue.createElementVNode("div", _hoisted_15, [
-          vue.createCommentVNode(" nav "),
-          vue.createElementVNode("nav", _hoisted_16, [
-            vue.renderSlot(_ctx.$slots, "top")
-          ]),
-          vue.createElementVNode("nav", _hoisted_17, [
-            vue.renderSlot(_ctx.$slots, "bottom")
-          ])
-        ]),
-        _hoisted_18
-      ], 512 /* NEED_PATCH */),
-      vue.createCommentVNode(" Content "),
-      vue.createElementVNode("main", _hoisted_19, [
-        vue.renderSlot(_ctx.$slots, "default")
-      ])
-    ])
-  ]))
-}
-
-script$7.render = render$7;
-script$7.__scopeId = "data-v-42eb52e3";
-script$7.__file = "src/components/FirstLevelMenu.vue";
-
-var script$6 = {
-  name: "Flex"
-};
-
-const _hoisted_1$5 = { class: "flex-auto" };
-
-function render$6(_ctx, _cache, $props, $setup, $data, $options) {
-  return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$5, [
-    vue.renderSlot(_ctx.$slots, "default")
-  ]))
-}
-
-script$6.render = render$6;
-script$6.__file = "src/components/FlexAuto.vue";
-
-var script$5 = {
-  name: "FloatingBanner"
-};
-
-const _hoisted_1$4 = { class: "fixed inset-x-0 bottom-0 pb-2 sm:pb-5 z-[100]" };
-const _hoisted_2$2 = /*#__PURE__*/vue.createStaticVNode("<div class=\"mx-auto max-w-7xl px-2 sm:px-6 lg:px-8\"><div class=\"rounded-lg bg-primary-500 p-2 shadow-lg sm:p-3\"><div class=\"flex flex-wrap items-center justify-between\"><div class=\"flex w-0 flex-1 items-center\"><span class=\"flex rounded-lg bg-primary-800 p-2\"><!-- Heroicon name: outline/megaphone --><svg class=\"h-6 w-6 text-white\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M10.34 15.84c-.688-.06-1.386-.09-2.09-.09H7.5a4.5 4.5 0 110-9h.75c.704 0 1.402-.03 2.09-.09m0 9.18c.253.962.584 1.892.985 2.783.247.55.06 1.21-.463 1.511l-.657.38c-.551.318-1.26.117-1.527-.461a20.845 20.845 0 01-1.44-4.282m3.102.069a18.03 18.03 0 01-.59-4.59c0-1.586.205-3.124.59-4.59m0 9.18a23.848 23.848 0 018.835 2.535M10.34 6.66a23.847 23.847 0 008.835-2.535m0 0A23.74 23.74 0 0018.795 3m.38 1.125a23.91 23.91 0 011.014 5.395m-1.014 8.855c-.118.38-.245.754-.38 1.125m.38-1.125a23.91 23.91 0 001.014-5.395m0-3.46c.495.413.811 1.035.811 1.73 0 .695-.316 1.317-.811 1.73m0-3.46a24.347 24.347 0 010 3.46\"></path></svg></span><p class=\"ml-3 truncate font-medium text-white\"><span class=\"md:hidden\">We announced a new product!</span><span class=\"hidden md:inline\">Big news! We&#39;re excited to announce a brand new product.</span></p></div><div class=\"order-3 mt-2 w-full flex-shrink-0 sm:order-2 sm:mt-0 sm:w-auto\"><a href=\"#\" class=\"flex items-center justify-center rounded-md border border-transparent bg-white px-4 py-2 text-sm font-medium text-primary-500 shadow-sm hover:bg-zinc-200\">Learn more</a></div><div class=\"order-2 flex-shrink-0 sm:order-3 sm:ml-2\"><button type=\"button\" class=\"-mr-1 flex rounded-md p-2 hover:bg-primary-500 focus:outline-none focus:ring-2 focus:ring-white\"><span class=\"sr-only\">Dismiss</span><!-- Heroicon name: outline/x-mark --><svg class=\"h-6 w-6 text-white\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\"></path></svg></button></div></div></div></div>", 1);
-const _hoisted_3$2 = [
-  _hoisted_2$2
-];
-
-function render$5(_ctx, _cache, $props, $setup, $data, $options) {
-  return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$4, _hoisted_3$2))
-}
-
-script$5.render = render$5;
-script$5.__file = "src/components/FloatingBanner.vue";
-
-var script$4 = {
-  name: "HeroCard"
-};
-
-const _hoisted_1$3 = { class: "bg-gradient-to-tr from-primary-600 to-primary-400 text-white rounded shadow p-8" };
-
-function render$4(_ctx, _cache, $props, $setup, $data, $options) {
-  return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3, [
-    vue.renderSlot(_ctx.$slots, "default")
-  ]))
-}
-
-script$4.render = render$4;
-script$4.__file = "src/components/HeroCard.vue";
-
-var script$3 = {
-  name: "ScreenScrollContainer"
-};
-
-const _hoisted_1$2 = { class: "overflow-y-auto h-screen" };
-
-function render$3(_ctx, _cache, $props, $setup, $data, $options) {
-  return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2, [
-    vue.renderSlot(_ctx.$slots, "default")
-  ]))
-}
-
-script$3.render = render$3;
-script$3.__file = "src/components/ScreenScrollContainer.vue";
-
-var script$2 = {
-  name: "SecondLevelLink",
-  components: {Button: script$d},
-  props: {
-    icon: {
-      type: String,
-      default: 'fa-arrow-up-right-from-square'
-    }
-  }
-};
-
-function render$2(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_Button = vue.resolveComponent("Button");
-
-  return (vue.openBlock(), vue.createBlock(_component_Button, { class: "flex items-center gap-2" }, {
-    default: vue.withCtx(() => [
-      vue.createElementVNode("i", {
-        class: vue.normalizeClass(['fal', $props.icon])
-      }, null, 2 /* CLASS */),
-      vue.createTextVNode(),
-      vue.renderSlot(_ctx.$slots, "default")
-    ]),
-    _: 3 /* FORWARDED */
-  }))
-}
-
-script$2.render = render$2;
-script$2.__file = "src/components/SecondLevelLink.vue";
-
-var script$1 = {
-  name: "SecondLevelMenu",
-  components: {SecondLevelLink: script$2},
-  props: {
-    items: {
-      type: Array,
-      default: [
-        {name: 'Test', href: 'Test'}
-      ]
-    }
-  }
-};
-
-const _hoisted_1$1 = { class: "w-64 bg-white text-black shadow dark:bg-base-700 dark:text-white dark:border-base-900 dark:border-l flex flex-col overflow-y-auto h-screen absolute sm:relative transform -translate-x-full sm:translate-x-0 pt-10 pb-4 px-4 space-y-2" };
-const _hoisted_2$1 = { class: "font-semibold px-4" };
-const _hoisted_3$1 = { class: "flex flex-col gap-2 justify-between flex-1" };
-const _hoisted_4$1 = { class: "flex flex-col gap-2" };
-
-function render$1(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_SecondLevelLink = vue.resolveComponent("SecondLevelLink");
-
-  return (vue.openBlock(), vue.createElementBlock("nav", _hoisted_1$1, [
-    vue.createElementVNode("span", _hoisted_2$1, [
-      vue.renderSlot(_ctx.$slots, "title")
-    ]),
-    vue.createElementVNode("div", _hoisted_3$1, [
-      vue.createElementVNode("div", _hoisted_4$1, [
-        vue.renderSlot(_ctx.$slots, "default")
-      ]),
-      vue.createElementVNode("div", null, [
-        vue.createVNode(_component_SecondLevelLink, {
-          class: "bg-zinc-100 hover:bg-zinc-200 dark:bg-base-500 dark:hover:bg-base-600",
-          icon: "fa-plus"
-        }, {
-          default: vue.withCtx(() => [
-            vue.createTextVNode(" Create Resource ")
-          ]),
-          _: 1 /* STABLE */
-        })
-      ])
-    ])
-  ]))
-}
-
-script$1.render = render$1;
-script$1.__scopeId = "data-v-05ca9b6f";
-script$1.__file = "src/components/SecondLevelMenu.vue";
-
-const useMenuStore = pinia.defineStore('menu', {
-    state: () => {
-        return {
-            thirdLevelLinks: []
-        }
-    },
-    actions: {
-        updateThirdLevelLinks(links) {
-            this.thirdLevelLinks = links;
-        },
-    },
-});
-
-var script = {
-  name: "ThirdLevelMenu",
-  components: {Button: script$d},
-  data() {
-    return {
-      link: ''
-    }
-  },
-  computed: {
-    ...pinia.mapState(useMenuStore, ['thirdLevelLinks'])
-  },
-  methods: {
-    onChange(event) {
-      this.link = event.target.value;
-      this.$router.push(event.target.value);
-    }
-  }
-};
-
-const _hoisted_1 = { class: "flex-1 dark:border-l dark:border-base shadow text-black dark:text-white" };
-const _hoisted_2 = { class: "bg-white border-b dark:bg-base-600 dark:border-base" };
-const _hoisted_3 = { class: "container mx-auto px-4 lg:px-16 py-10" };
-const _hoisted_4 = { class: "text-3xl font-semibold" };
-const _hoisted_5 = { class: "bg-white dark:bg-base-700 py-4" };
-const _hoisted_6 = { class: "container mx-auto px-4 lg:px-16" };
-const _hoisted_7 = { class: "hidden xl:block space-x-4" };
-const _hoisted_8 = { class: "flex flex-col xl:hidden" };
-const _hoisted_9 = ["to", "value"];
-
-function render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_Button = vue.resolveComponent("Button");
-
-  return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
-    vue.createElementVNode("div", _hoisted_2, [
-      vue.createElementVNode("div", _hoisted_3, [
-        vue.createElementVNode("div", _hoisted_4, [
-          vue.renderSlot(_ctx.$slots, "title")
-        ])
-      ])
-    ]),
-    vue.createElementVNode("nav", _hoisted_5, [
-      vue.createElementVNode("div", _hoisted_6, [
-        vue.createElementVNode("div", _hoisted_7, [
-          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.thirdLevelLinks, (link) => {
-            return (vue.openBlock(), vue.createBlock(_component_Button, null, {
-              default: vue.withCtx(() => [
-                vue.createElementVNode("i", {
-                  class: vue.normalizeClass([link.icon, "icon"])
-                }, null, 2 /* CLASS */),
-                vue.createTextVNode(" " + vue.toDisplayString(link.name), 1 /* TEXT */)
-              ]),
-              _: 2 /* DYNAMIC */
-            }, 1024 /* DYNAMIC_SLOTS */))
-          }), 256 /* UNKEYED_FRAGMENT */))
-        ]),
-        vue.createElementVNode("div", _hoisted_8, [
-          vue.withDirectives(vue.createElementVNode("select", {
-            onChange: _cache[0] || (_cache[0] = (...args) => ($options.onChange && $options.onChange(...args))),
-            "onUpdate:modelValue": _cache[1] || (_cache[1] = $event => (($data.link) = $event)),
-            class: "bg-white"
-          }, [
-            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.thirdLevelLinks, (link) => {
-              return (vue.openBlock(), vue.createElementBlock("option", {
-                key: link.name,
-                to: link.to,
-                value: link.to
-              }, vue.toDisplayString(link.name), 9 /* TEXT, PROPS */, _hoisted_9))
-            }), 128 /* KEYED_FRAGMENT */))
-          ], 544 /* HYDRATE_EVENTS, NEED_PATCH */), [
-            [vue.vModelSelect, $data.link]
-          ])
-        ])
-      ])
-    ])
-  ]))
-}
-
-script.render = render;
-script.__scopeId = "data-v-4c63018c";
-script.__file = "src/components/ThirdLevelMenu.vue";
-
-var components = {
-    Button: script$d,
-    Card: script$c,
-    CardBody: script$b,
-    CardHeader: script$a,
-    Container: script$9,
-    FirstLevelLink: script$8,
-    FirstLevelMenu: script$7,
-    FlexAuto: script$6,
-    FloatingBanner: script$5,
-    HeroCard: script$4,
-    ScreenScrollContainer: script$3,
-    SecondLevelLink: script$2,
-    SecondLevelMenu: script$1,
-    ThirdLevelMenu: script,
-};
-
-const colors = {
-    primary: {
-        DEFAULT: '#00BFA5',
-        '50': '#A6FFF3',
-        '100': '#8CFFEF',
-        '200': '#59FFE8',
-        '300': '#26FFE1',
-        '400': '#00F2D1',
-        '500': '#00BFA5',
-        '600': '#00917D',
-        '700': '#006356',
-        '800': '#00352E',
-        '900': '#000706'
-    },
-    base: {
-        DEFAULT: '#070709',
-        '500': '#3a3a3d',
-        '600': '#26262c',
-        '700': '#1f1f23',
-        '800': '#18181b',
-        '900': '#0e0e10'
-    },
-};
-
-const plugin = {
-    install (Vue) {
-        for (const prop in components) {
-            if (components.hasOwnProperty(prop)) {
-                const component = components[prop];
-                Vue.component(component.name, component);
-            }
-        }
-    }
-};
-
-exports.colors = colors;
-exports.default = plugin;
diff --git a/dist/library.mjs b/dist/library.mjs
deleted file mode 100644
index 2152fd7..0000000
--- a/dist/library.mjs
+++ /dev/null
@@ -1,566 +0,0 @@
-import { openBlock, createElementBlock, renderSlot, createElementVNode, normalizeClass, resolveComponent, createCommentVNode, Fragment, renderList, createBlock, withCtx, createTextVNode, toDisplayString, createVNode, pushScopeId, popScopeId, createStaticVNode, withDirectives, vModelSelect } from 'vue';
-import { defineStore, mapState } from 'pinia';
-
-var script$d = {
-  name: "Button",
-
-  methods: {
-    click() {
-      this.$emit('click');
-    }
-  }
-};
-
-const _hoisted_1$c = {
-  href: "#",
-  class: "truncate text-black dark:text-white hover:bg-zinc-100 dark:bg-base-700 dark:hover:bg-base-600 dark:text-white rounded-lg px-4 py-2"
-};
-
-function render$d(_ctx, _cache, $props, $setup, $data, $options) {
-  return (openBlock(), createElementBlock("a", _hoisted_1$c, [
-    renderSlot(_ctx.$slots, "default")
-  ]))
-}
-
-script$d.render = render$d;
-script$d.__file = "src/components/Button.vue";
-
-var script$c = {
-  name: "Card"
-};
-
-const _hoisted_1$b = { class: "bg-white text-black dark:bg-base-700 dark:text-white rounded shadow mb-8" };
-
-function render$c(_ctx, _cache, $props, $setup, $data, $options) {
-  return (openBlock(), createElementBlock("div", _hoisted_1$b, [
-    renderSlot(_ctx.$slots, "default")
-  ]))
-}
-
-script$c.render = render$c;
-script$c.__file = "src/components/Card.vue";
-
-var script$b = {
-  name: "CardBody"
-};
-
-const _hoisted_1$a = { class: "p-8 rounded-b" };
-
-function render$b(_ctx, _cache, $props, $setup, $data, $options) {
-  return (openBlock(), createElementBlock("div", _hoisted_1$a, [
-    renderSlot(_ctx.$slots, "default")
-  ]))
-}
-
-script$b.render = render$b;
-script$b.__file = "src/components/CardBody.vue";
-
-var script$a = {
-  name: "CardHeader"
-};
-
-const _hoisted_1$9 = { class: "py-4 px-8 border-b dark:border-base-800 rounded-t" };
-const _hoisted_2$4 = { class: "text-xl font-medium" };
-
-function render$a(_ctx, _cache, $props, $setup, $data, $options) {
-  return (openBlock(), createElementBlock("div", _hoisted_1$9, [
-    createElementVNode("div", _hoisted_2$4, [
-      renderSlot(_ctx.$slots, "default")
-    ])
-  ]))
-}
-
-script$a.render = render$a;
-script$a.__file = "src/components/CardHeader.vue";
-
-var script$9 = {
-  name: "Container"
-};
-
-const _hoisted_1$8 = { class: "container mx-auto px-4 lg:px-16 py-8 space-y-8" };
-
-function render$9(_ctx, _cache, $props, $setup, $data, $options) {
-  return (openBlock(), createElementBlock("div", _hoisted_1$8, [
-    renderSlot(_ctx.$slots, "default")
-  ]))
-}
-
-script$9.render = render$9;
-script$9.__file = "src/components/Container.vue";
-
-var script$8 = {
-  name: "FirstLevelLink",
-  props: {
-    icon: {
-      type: String,
-      default: 'fa-arrow-up-right-from-square'
-    }
-  }
-};
-
-const _hoisted_1$7 = {
-  class: "hover:bg-primary-500 rounded-lg text-center text-xs py-4 flex flex-col space-y-2",
-  href: "#"
-};
-
-function render$8(_ctx, _cache, $props, $setup, $data, $options) {
-  return (openBlock(), createElementBlock("a", _hoisted_1$7, [
-    createElementVNode("i", {
-      class: normalizeClass(['fal text-xl', $props.icon])
-    }, null, 2 /* CLASS */),
-    createElementVNode("span", null, [
-      renderSlot(_ctx.$slots, "default")
-    ])
-  ]))
-}
-
-script$8.render = render$8;
-script$8.__file = "src/components/FirstLevelLink.vue";
-
-var script$7 = {
-  name: "FirstLevelMenu",
-  data() {
-    return {
-      primaryMenu: [
-        {name: 'Home', icon: 'fal fa-home', to: '/', exact: true},
-        {name: 'Buckets', icon: 'fal fa-bucket', to: '/buckets', exact: false},
-        {name: 'Domains', icon: 'fal fa-globe', to: '/domains', exact: false},
-        {name: 'Spaces', icon: 'fal fa-meteor', to: '/spaces', exact: false},
-        {name: 'Zones', icon: 'fal fa-list-ul', to: '/zones', exact: false},
-      ],
-      secondaryMenu: [
-        {name: 'Logout', icon: 'fal fa-sign-out', to: '/logout'},
-      ],
-    };
-  },
-  methods: {
-    toggleMenu() {
-      this.$refs.overlay.classList.toggle('hidden');
-      this.$refs.sidebar.classList.toggle('-translate-x-full');
-    },
-    closeMenu() {
-      this.$refs.overlay.classList.add('hidden');
-      this.$refs.sidebar.classList.add('-translate-x-full');
-    },
-    toggleDarkMode() {
-      document.body.classList.toggle('dark');
-    }
-  },
-};
-
-const _withScopeId = n => (pushScopeId("data-v-42eb52e3"),n=n(),popScopeId(),n);
-const _hoisted_1$6 = { class: "bg-gray-100 dark:bg-base min-h-screen flex flex-col relative" };
-const _hoisted_2$3 = {
-  ref: "overlay",
-  class: "sm:hidden hidden bg-gray-800 opacity-50 w-full min-h-screen absolute z-10"
-};
-const _hoisted_3$3 = { class: "bg-white relative shadow sm:hidden z-10" };
-const _hoisted_4$2 = { class: "container flex justify-between items-center py-4" };
-const _hoisted_5$1 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/createElementVNode("img", {
-  src: "/img/icon-light.svg",
-  class: "h-4",
-  alt: "bitinflow"
-}, null, -1 /* HOISTED */));
-const _hoisted_6$1 = { class: "flex items-center space-x-4" };
-const _hoisted_7$1 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/createElementVNode("img", {
-  class: "h-8 w-8 rounded-full",
-  alt: "profile",
-  src: "/img/avatar.jpg"
-}, null, -1 /* HOISTED */));
-const _hoisted_8$1 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/createElementVNode("svg", {
-  xmlns: "http://www.w3.org/2000/svg",
-  class: "h-6 w-6",
-  fill: "none",
-  viewBox: "0 0 24 24",
-  stroke: "currentColor"
-}, [
-  /*#__PURE__*/createElementVNode("path", {
-    "stroke-linecap": "round",
-    "stroke-linejoin": "round",
-    "stroke-width": "2",
-    d: "M4 6h16M4 12h16M4 18h16"
-  })
-], -1 /* HOISTED */));
-const _hoisted_9$1 = [
-  _hoisted_8$1
-];
-const _hoisted_10 = { class: "flex flex-grow" };
-const _hoisted_11 = {
-  ref: "sidebar",
-  class: "flex h-screen flex-col w-36 bg-base-800 dark:border-r dark:border-base text-gray-100 shadow sm:relative absolute inset-y-0 transform -translate-x-full sm:translate-x-0 transition transition-transform z-20"
-};
-const _hoisted_12 = { class: "flex-none bg-primary-500 h-16 sm:h-20 py-3 sm:py-6 text-white flex flex-initial justify-center" };
-const _hoisted_13 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/createElementVNode("img", {
-  src: "/img/icon-light.svg",
-  class: "h-8 w-auto",
-  alt: "Logo"
-}, null, -1 /* HOISTED */));
-const _hoisted_14 = [
-  _hoisted_13
-];
-const _hoisted_15 = { class: "flex-auto flex flex-col overflow-y-auto py-6 space-y-6" };
-const _hoisted_16 = { class: "primary flex flex-grow flex-col space-y-4 px-6" };
-const _hoisted_17 = { class: "flex flex-initial flex-col space-y-4 px-6" };
-const _hoisted_18 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/createElementVNode("div", { class: "flex-none" }, null, -1 /* HOISTED */));
-const _hoisted_19 = { class: "flex flex-1" };
-
-function render$7(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_nuxt_link = resolveComponent("nuxt-link");
-
-  return (openBlock(), createElementBlock("div", _hoisted_1$6, [
-    createCommentVNode(" Overlay "),
-    createElementVNode("div", _hoisted_2$3, null, 512 /* NEED_PATCH */),
-    createCommentVNode(" Header "),
-    createElementVNode("header", _hoisted_3$3, [
-      createElementVNode("div", _hoisted_4$2, [
-        _hoisted_5$1,
-        createElementVNode("div", _hoisted_6$1, [
-          (openBlock(true), createElementBlock(Fragment, null, renderList($data.secondaryMenu, (link) => {
-            return (openBlock(), createBlock(_component_nuxt_link, {
-              key: link.name,
-              to: link.to
-            }, {
-              default: withCtx(() => [
-                createElementVNode("i", {
-                  class: normalizeClass([link.icon, "icon"])
-                }, null, 2 /* CLASS */),
-                createTextVNode(" " + toDisplayString(link.name), 1 /* TEXT */)
-              ]),
-              _: 2 /* DYNAMIC */
-            }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["to"]))
-          }), 128 /* KEYED_FRAGMENT */)),
-          createVNode(_component_nuxt_link, {
-            class: "inline-block flex",
-            to: "/"
-          }, {
-            default: withCtx(() => [
-              _hoisted_7$1
-            ]),
-            _: 1 /* STABLE */
-          }),
-          createElementVNode("button", {
-            onClick: _cache[0] || (_cache[0] = (...args) => ($options.toggleMenu && $options.toggleMenu(...args))),
-            class: "focus-within:outline-none pl-4"
-          }, _hoisted_9$1)
-        ])
-      ])
-    ]),
-    createCommentVNode(" Sidenav with Content "),
-    createElementVNode("div", _hoisted_10, [
-      createCommentVNode(" Sidenav "),
-      createElementVNode("nav", _hoisted_11, [
-        createCommentVNode(" logo "),
-        createElementVNode("div", _hoisted_12, [
-          createElementVNode("button", {
-            onClick: _cache[1] || (_cache[1] = (...args) => ($options.toggleDarkMode && $options.toggleDarkMode(...args)))
-          }, _hoisted_14)
-        ]),
-        createElementVNode("div", _hoisted_15, [
-          createCommentVNode(" nav "),
-          createElementVNode("nav", _hoisted_16, [
-            renderSlot(_ctx.$slots, "top")
-          ]),
-          createElementVNode("nav", _hoisted_17, [
-            renderSlot(_ctx.$slots, "bottom")
-          ])
-        ]),
-        _hoisted_18
-      ], 512 /* NEED_PATCH */),
-      createCommentVNode(" Content "),
-      createElementVNode("main", _hoisted_19, [
-        renderSlot(_ctx.$slots, "default")
-      ])
-    ])
-  ]))
-}
-
-script$7.render = render$7;
-script$7.__scopeId = "data-v-42eb52e3";
-script$7.__file = "src/components/FirstLevelMenu.vue";
-
-var script$6 = {
-  name: "Flex"
-};
-
-const _hoisted_1$5 = { class: "flex-auto" };
-
-function render$6(_ctx, _cache, $props, $setup, $data, $options) {
-  return (openBlock(), createElementBlock("div", _hoisted_1$5, [
-    renderSlot(_ctx.$slots, "default")
-  ]))
-}
-
-script$6.render = render$6;
-script$6.__file = "src/components/FlexAuto.vue";
-
-var script$5 = {
-  name: "FloatingBanner"
-};
-
-const _hoisted_1$4 = { class: "fixed inset-x-0 bottom-0 pb-2 sm:pb-5 z-[100]" };
-const _hoisted_2$2 = /*#__PURE__*/createStaticVNode("<div class=\"mx-auto max-w-7xl px-2 sm:px-6 lg:px-8\"><div class=\"rounded-lg bg-primary-500 p-2 shadow-lg sm:p-3\"><div class=\"flex flex-wrap items-center justify-between\"><div class=\"flex w-0 flex-1 items-center\"><span class=\"flex rounded-lg bg-primary-800 p-2\"><!-- Heroicon name: outline/megaphone --><svg class=\"h-6 w-6 text-white\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M10.34 15.84c-.688-.06-1.386-.09-2.09-.09H7.5a4.5 4.5 0 110-9h.75c.704 0 1.402-.03 2.09-.09m0 9.18c.253.962.584 1.892.985 2.783.247.55.06 1.21-.463 1.511l-.657.38c-.551.318-1.26.117-1.527-.461a20.845 20.845 0 01-1.44-4.282m3.102.069a18.03 18.03 0 01-.59-4.59c0-1.586.205-3.124.59-4.59m0 9.18a23.848 23.848 0 018.835 2.535M10.34 6.66a23.847 23.847 0 008.835-2.535m0 0A23.74 23.74 0 0018.795 3m.38 1.125a23.91 23.91 0 011.014 5.395m-1.014 8.855c-.118.38-.245.754-.38 1.125m.38-1.125a23.91 23.91 0 001.014-5.395m0-3.46c.495.413.811 1.035.811 1.73 0 .695-.316 1.317-.811 1.73m0-3.46a24.347 24.347 0 010 3.46\"></path></svg></span><p class=\"ml-3 truncate font-medium text-white\"><span class=\"md:hidden\">We announced a new product!</span><span class=\"hidden md:inline\">Big news! We&#39;re excited to announce a brand new product.</span></p></div><div class=\"order-3 mt-2 w-full flex-shrink-0 sm:order-2 sm:mt-0 sm:w-auto\"><a href=\"#\" class=\"flex items-center justify-center rounded-md border border-transparent bg-white px-4 py-2 text-sm font-medium text-primary-500 shadow-sm hover:bg-zinc-200\">Learn more</a></div><div class=\"order-2 flex-shrink-0 sm:order-3 sm:ml-2\"><button type=\"button\" class=\"-mr-1 flex rounded-md p-2 hover:bg-primary-500 focus:outline-none focus:ring-2 focus:ring-white\"><span class=\"sr-only\">Dismiss</span><!-- Heroicon name: outline/x-mark --><svg class=\"h-6 w-6 text-white\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\"></path></svg></button></div></div></div></div>", 1);
-const _hoisted_3$2 = [
-  _hoisted_2$2
-];
-
-function render$5(_ctx, _cache, $props, $setup, $data, $options) {
-  return (openBlock(), createElementBlock("div", _hoisted_1$4, _hoisted_3$2))
-}
-
-script$5.render = render$5;
-script$5.__file = "src/components/FloatingBanner.vue";
-
-var script$4 = {
-  name: "HeroCard"
-};
-
-const _hoisted_1$3 = { class: "bg-gradient-to-tr from-primary-600 to-primary-400 text-white rounded shadow p-8" };
-
-function render$4(_ctx, _cache, $props, $setup, $data, $options) {
-  return (openBlock(), createElementBlock("div", _hoisted_1$3, [
-    renderSlot(_ctx.$slots, "default")
-  ]))
-}
-
-script$4.render = render$4;
-script$4.__file = "src/components/HeroCard.vue";
-
-var script$3 = {
-  name: "ScreenScrollContainer"
-};
-
-const _hoisted_1$2 = { class: "overflow-y-auto h-screen" };
-
-function render$3(_ctx, _cache, $props, $setup, $data, $options) {
-  return (openBlock(), createElementBlock("div", _hoisted_1$2, [
-    renderSlot(_ctx.$slots, "default")
-  ]))
-}
-
-script$3.render = render$3;
-script$3.__file = "src/components/ScreenScrollContainer.vue";
-
-var script$2 = {
-  name: "SecondLevelLink",
-  components: {Button: script$d},
-  props: {
-    icon: {
-      type: String,
-      default: 'fa-arrow-up-right-from-square'
-    }
-  }
-};
-
-function render$2(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_Button = resolveComponent("Button");
-
-  return (openBlock(), createBlock(_component_Button, { class: "flex items-center gap-2" }, {
-    default: withCtx(() => [
-      createElementVNode("i", {
-        class: normalizeClass(['fal', $props.icon])
-      }, null, 2 /* CLASS */),
-      createTextVNode(),
-      renderSlot(_ctx.$slots, "default")
-    ]),
-    _: 3 /* FORWARDED */
-  }))
-}
-
-script$2.render = render$2;
-script$2.__file = "src/components/SecondLevelLink.vue";
-
-var script$1 = {
-  name: "SecondLevelMenu",
-  components: {SecondLevelLink: script$2},
-  props: {
-    items: {
-      type: Array,
-      default: [
-        {name: 'Test', href: 'Test'}
-      ]
-    }
-  }
-};
-
-const _hoisted_1$1 = { class: "w-64 bg-white text-black shadow dark:bg-base-700 dark:text-white dark:border-base-900 dark:border-l flex flex-col overflow-y-auto h-screen absolute sm:relative transform -translate-x-full sm:translate-x-0 pt-10 pb-4 px-4 space-y-2" };
-const _hoisted_2$1 = { class: "font-semibold px-4" };
-const _hoisted_3$1 = { class: "flex flex-col gap-2 justify-between flex-1" };
-const _hoisted_4$1 = { class: "flex flex-col gap-2" };
-
-function render$1(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_SecondLevelLink = resolveComponent("SecondLevelLink");
-
-  return (openBlock(), createElementBlock("nav", _hoisted_1$1, [
-    createElementVNode("span", _hoisted_2$1, [
-      renderSlot(_ctx.$slots, "title")
-    ]),
-    createElementVNode("div", _hoisted_3$1, [
-      createElementVNode("div", _hoisted_4$1, [
-        renderSlot(_ctx.$slots, "default")
-      ]),
-      createElementVNode("div", null, [
-        createVNode(_component_SecondLevelLink, {
-          class: "bg-zinc-100 hover:bg-zinc-200 dark:bg-base-500 dark:hover:bg-base-600",
-          icon: "fa-plus"
-        }, {
-          default: withCtx(() => [
-            createTextVNode(" Create Resource ")
-          ]),
-          _: 1 /* STABLE */
-        })
-      ])
-    ])
-  ]))
-}
-
-script$1.render = render$1;
-script$1.__scopeId = "data-v-05ca9b6f";
-script$1.__file = "src/components/SecondLevelMenu.vue";
-
-const useMenuStore = defineStore('menu', {
-    state: () => {
-        return {
-            thirdLevelLinks: []
-        }
-    },
-    actions: {
-        updateThirdLevelLinks(links) {
-            this.thirdLevelLinks = links;
-        },
-    },
-});
-
-var script = {
-  name: "ThirdLevelMenu",
-  components: {Button: script$d},
-  data() {
-    return {
-      link: ''
-    }
-  },
-  computed: {
-    ...mapState(useMenuStore, ['thirdLevelLinks'])
-  },
-  methods: {
-    onChange(event) {
-      this.link = event.target.value;
-      this.$router.push(event.target.value);
-    }
-  }
-};
-
-const _hoisted_1 = { class: "flex-1 dark:border-l dark:border-base shadow text-black dark:text-white" };
-const _hoisted_2 = { class: "bg-white border-b dark:bg-base-600 dark:border-base" };
-const _hoisted_3 = { class: "container mx-auto px-4 lg:px-16 py-10" };
-const _hoisted_4 = { class: "text-3xl font-semibold" };
-const _hoisted_5 = { class: "bg-white dark:bg-base-700 py-4" };
-const _hoisted_6 = { class: "container mx-auto px-4 lg:px-16" };
-const _hoisted_7 = { class: "hidden xl:block space-x-4" };
-const _hoisted_8 = { class: "flex flex-col xl:hidden" };
-const _hoisted_9 = ["to", "value"];
-
-function render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_Button = resolveComponent("Button");
-
-  return (openBlock(), createElementBlock("div", _hoisted_1, [
-    createElementVNode("div", _hoisted_2, [
-      createElementVNode("div", _hoisted_3, [
-        createElementVNode("div", _hoisted_4, [
-          renderSlot(_ctx.$slots, "title")
-        ])
-      ])
-    ]),
-    createElementVNode("nav", _hoisted_5, [
-      createElementVNode("div", _hoisted_6, [
-        createElementVNode("div", _hoisted_7, [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.thirdLevelLinks, (link) => {
-            return (openBlock(), createBlock(_component_Button, null, {
-              default: withCtx(() => [
-                createElementVNode("i", {
-                  class: normalizeClass([link.icon, "icon"])
-                }, null, 2 /* CLASS */),
-                createTextVNode(" " + toDisplayString(link.name), 1 /* TEXT */)
-              ]),
-              _: 2 /* DYNAMIC */
-            }, 1024 /* DYNAMIC_SLOTS */))
-          }), 256 /* UNKEYED_FRAGMENT */))
-        ]),
-        createElementVNode("div", _hoisted_8, [
-          withDirectives(createElementVNode("select", {
-            onChange: _cache[0] || (_cache[0] = (...args) => ($options.onChange && $options.onChange(...args))),
-            "onUpdate:modelValue": _cache[1] || (_cache[1] = $event => (($data.link) = $event)),
-            class: "bg-white"
-          }, [
-            (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.thirdLevelLinks, (link) => {
-              return (openBlock(), createElementBlock("option", {
-                key: link.name,
-                to: link.to,
-                value: link.to
-              }, toDisplayString(link.name), 9 /* TEXT, PROPS */, _hoisted_9))
-            }), 128 /* KEYED_FRAGMENT */))
-          ], 544 /* HYDRATE_EVENTS, NEED_PATCH */), [
-            [vModelSelect, $data.link]
-          ])
-        ])
-      ])
-    ])
-  ]))
-}
-
-script.render = render;
-script.__scopeId = "data-v-4c63018c";
-script.__file = "src/components/ThirdLevelMenu.vue";
-
-var components = {
-    Button: script$d,
-    Card: script$c,
-    CardBody: script$b,
-    CardHeader: script$a,
-    Container: script$9,
-    FirstLevelLink: script$8,
-    FirstLevelMenu: script$7,
-    FlexAuto: script$6,
-    FloatingBanner: script$5,
-    HeroCard: script$4,
-    ScreenScrollContainer: script$3,
-    SecondLevelLink: script$2,
-    SecondLevelMenu: script$1,
-    ThirdLevelMenu: script,
-};
-
-const colors = {
-    primary: {
-        DEFAULT: '#00BFA5',
-        '50': '#A6FFF3',
-        '100': '#8CFFEF',
-        '200': '#59FFE8',
-        '300': '#26FFE1',
-        '400': '#00F2D1',
-        '500': '#00BFA5',
-        '600': '#00917D',
-        '700': '#006356',
-        '800': '#00352E',
-        '900': '#000706'
-    },
-    base: {
-        DEFAULT: '#070709',
-        '500': '#3a3a3d',
-        '600': '#26262c',
-        '700': '#1f1f23',
-        '800': '#18181b',
-        '900': '#0e0e10'
-    },
-};
-
-const plugin = {
-    install (Vue) {
-        for (const prop in components) {
-            if (components.hasOwnProperty(prop)) {
-                const component = components[prop];
-                Vue.component(component.name, component);
-            }
-        }
-    }
-};
-
-export { colors, plugin as default };
diff --git a/dist/library.mjs.css b/dist/library.mjs.css
deleted file mode 100644
index ab69d3a..0000000
--- a/dist/library.mjs.css
+++ /dev/null
@@ -1,23 +0,0 @@
-.nuxt-link-active[data-v-42eb52e3] {
-  background: #00BFA5;
-}
-
-.nuxt-link-active[data-v-42eb52e3]:hover {
-  background: #004F44;
-}
-
-.nuxt-link-active[data-v-4c63018c] {
-  background: #f3f3f3;
-}
-
-.dark .nuxt-link-active[data-v-4c63018c] {
-  background: #464649;
-}
-
-.nuxt-link-active[data-v-05ca9b6f] {
-  background: #f3f3f3;
-}
-
-.dark .nuxt-link-active[data-v-05ca9b6f] {
-  background: #464649;
-}
\ No newline at end of file
diff --git a/package.json b/package.json
index d119ce6..999170a 100644
--- a/package.json
+++ b/package.json
@@ -2,27 +2,11 @@
   "name": "@bitinflow/ui",
   "version": "0.0.1",
   "description": "bitinflow UI Kit",
-  "main": "dist/library.cjs",
-  "module": "dist/library.mjs",
-  "type": "module",
-  "files": [
-    "dist"
-  ],
-  "scripts": {
-    "build": "rollup -c"
-  },
   "author": "René Preuß <rene@bitinflow.com>",
   "license": "Apache-2.0",
   "dependencies": {
     "@nuxt/kit": "^3.0.0-rc.12",
     "pinia": ">=2.0.23",
     "vue": "^3.2.41"
-  },
-  "devDependencies": {
-    "rollup": "^3.2.3",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-scss": "^3.0.0",
-    "rollup-plugin-vue": "^6.0.0",
-    "sass": "^1.55.0"
   }
 }
diff --git a/rollup.config.js b/rollup.config.js
deleted file mode 100644
index c3b82ef..0000000
--- a/rollup.config.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import vue from 'rollup-plugin-vue'
-import peerDepsExternal from 'rollup-plugin-peer-deps-external'
-import scss from "rollup-plugin-scss";
-
-export default [
-    {
-        input: 'src/index.js',
-        output: [
-            {
-                format: 'esm',
-                file: 'dist/library.mjs'
-            },
-            {
-                format: 'cjs',
-                file: 'dist/library.cjs'
-            }
-        ],
-        plugins: [
-            vue(), peerDepsExternal(), scss()
-        ]
-    }
-]
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
deleted file mode 100644
index 28c00cf..0000000
--- a/src/index.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import components from './components'
-import colors from './colors.js'
-
-const plugin = {
-    install (Vue) {
-        for (const prop in components) {
-            if (components.hasOwnProperty(prop)) {
-                const component = components[prop]
-                Vue.component(component.name, component)
-            }
-        }
-    }
-}
-
-export {colors}
-
-export default plugin
\ No newline at end of file
diff --git a/src/stores/menu.js b/stores/menu.js
similarity index 100%
rename from src/stores/menu.js
rename to stores/menu.js