diff --git a/packages/library/src/assets/css/nychthemeron.css b/packages/library/src/assets/css/nychthemeron.css
index 292ca81..0047856 100644
--- a/packages/library/src/assets/css/nychthemeron.css
+++ b/packages/library/src/assets/css/nychthemeron.css
@@ -23,30 +23,31 @@
 
   /* primary */
   --primary: #d4b278;
-  --primary-fg: #0e0c08;
+  --primary-fg: #fff8e8;
 
   /* semantic */
   --warn: #e08840; /* phlegethon */
   --warn-subtle: #281808;
   --warn-border: #4a2c10;
+  --warn-fg: #fff8e8;
 
-  --danger: #9ab4c8; /* styx */
-  --danger-subtle: #141a22;
-  --danger-border: #2a3848;
+  --danger: #7a1a1a; /* plague */
+  --danger-subtle: #faeaea;
+  --danger-border: #c8a0a0;
+  --danger-fg: #fff8e8;
 
   --info: #88aec8; /* cocytus */
   --info-subtle: #101e2c;
   --info-border: #1e3850;
-
-  --muted: #c8c0a8; /* lethe */
-  --muted-subtle: #201e18;
-  --muted-border: #403c30;
+  --info-fg: #fff8e8;
 
   --neutral: #7a6e60; /* acheron */
+  --neutral-fg: #fff8e8;
 
   --success: #6aaa7a; /* laurel */
   --success-subtle: #0e2214;
   --success-border: #1e4228;
+  --success-fg: #fff8e8;
 
   /* text */
   --text-high: #f4f0e8;
@@ -59,7 +60,7 @@
   --focus-ring: 0 0 0 3px rgba(212, 178, 120, 0.18);
 
   /* fonts */
-  --font-serif: 'Cinzel', Georgia, serif;
+  --font-serif: 'Cinzel', serif;
   --font-sans: 'IBM Plex Sans', system-ui, sans-serif;
   --font-mono: 'IBM Plex Mono', monospace;
 }
@@ -86,24 +87,25 @@
   --warn: #9a6020; /* harmony */
   --warn-subtle: #fdf3e0;
   --warn-border: #e8d0a0;
+  --warn-fg: #fff8e8;
 
   --danger: #7a1a1a; /* plague */
   --danger-subtle: #faeaea;
   --danger-border: #c8a0a0;
+  --danger-fg: #fff8e8;
 
   --info: #3a5a8a; /* oracle */
   --info-subtle: #e8eef8;
   --info-border: #b0c4e0;
-
-  --muted: #a09080; /* lethe */
-  --muted-subtle: #ede8de;
-  --muted-border: #d4cdc0;
+  --info-fg: #fff8e8;
 
   --neutral: #8a8070; /* marble */
+  --neutral-fg: #fff8e8;
 
   --success: #5a7a40; /* laurel */
   --success-subtle: #eef4e8;
   --success-border: #c0d4a8;
+  --success-fg: #fff8e8;
 
   /* text */
   --text-high: #1a1610;
@@ -116,7 +118,7 @@
   --focus-ring: 0 0 0 3px rgba(184, 134, 11, 0.12);
 
   /* fonts */
-  --font-serif: 'Cinzel', Georgia, serif;
+  --font-serif: 'Cinzel', serif;
   --font-sans: 'IBM Plex Sans', system-ui, sans-serif;
   --font-mono: 'IBM Plex Mono', monospace;
 }
@@ -131,19 +133,27 @@
 }
 
 html {
-  font-family: var(--font-sans);
+  font-family: var(--font-serif);
   font-size: 14px;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 body {
-  background-color: var(--surface-0);
+  background-color: var(--surface-0) !important;
   color: var(--text-body);
   min-height: 100vh;
 }
 
-*:focus-visible {
-  outline: none;
-  box-shadow: var(--focus-ring);
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+.wreath {
+  transform-origin: 340px 180px;
+  animation: spin 2s linear infinite;
 }
diff --git a/packages/library/src/assets/theme/theme.css b/packages/library/src/assets/theme/theme.css
index 475192a..3bbe9cf 100644
--- a/packages/library/src/assets/theme/theme.css
+++ b/packages/library/src/assets/theme/theme.css
@@ -1,6 +1,95 @@
 @import url('../css/nychthemeron.css');
 
-.nych-button-primary {
+[class^='nych-'] {
+  font-family: var(--font-serif) !important;
+}
+
+[class^='nych-']:disabled {
+  cursor: not-allowed;
+  box-shadow: unset;
+}
+
+[class^='nych-button'] {
+  padding: 7px;
+  border-radius: 5px;
+  box-shadow: 2px 2px 10px var(--text-high);
+  border: none;
+  cursor: pointer;
+}
+
+[class^='nych-button']:hover:not(:disabled) {
+  box-shadow: 0px 0px 8px var(--text-high);
+  transition: box-shadow 0.3s ease;
+}
+
+[class^='nych-button'][data-p~='loading'] {
+  display: flex;
+}
+
+[class^='nych-button'][data-p~='loading'] span {
+  margin-top: 2px;
+}
+
+[class^='nych-'][class$='-primary'] {
   background-color: var(--primary);
   color: var(--primary-fg);
 }
+
+[class^='nych-'][class$='-secondary'],
+[class^='nych-'][class$='-muted'] {
+  background-color: var(--neutral);
+  color: var(--neutral-fg);
+}
+
+[class^='nych-'][class$='-info'] {
+  background-color: var(--info);
+  color: var(--info-fg);
+}
+
+[class^='nych-'][class$='-success'] {
+  background-color: var(--success);
+  color: var(--success-fg);
+}
+
+[class^='nych-'][class$='-warning'] {
+  background-color: var(--warn);
+  color: var(--warn-fg);
+}
+
+[class^='nych-'][class$='-danger'],
+[class^='nych-'][class$='-error'] {
+  background-color: var(--danger);
+  color: var(--danger-fg);
+}
+
+[class^='nych-'][class$='-large'] span {
+  font-size: 16pt;
+}
+
+.nych-loading-icon .wreath path {
+  fill: var(--primary-fg);
+}
+
+.nych-loading-icon .wreath line {
+  stroke: var(--text-high);
+}
+
+.nych-button-icon {
+  margin-right: 5px;
+  margin-top: 0px;
+}
+
+[class^='nych-'][data-p~='small'] * {
+  height: 15px;
+  font-size: 8pt;
+}
+
+[class^='nych-'][data-p~='normal'] * {
+  height: 25px;
+  font-size: 12pt;
+}
+
+[class^='nych-'][data-p~='large'] * {
+  height: 40px;
+  font-size: 20pt;
+}
diff --git a/packages/library/src/components/NychButton.vue b/packages/library/src/components/NychButton.vue
index 95b33fe..7a878af 100644
--- a/packages/library/src/components/NychButton.vue
+++ b/packages/library/src/components/NychButton.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { Button } from 'primevue'
 import { computed } from 'vue'
+import NychLoadingIcon from './NychLoadingIcon.vue'
 
 interface Props {
   label?: string
-  variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger'
+  variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'
   size?: 'small' | 'normal' | 'large'
   disabled?: boolean
   loading?: boolean
@@ -25,6 +26,8 @@ const emit = defineEmits<{
 const buttonClass = computed(() => ({
   [`nych-button-${props.variant}`]: true,
 }))
+
+
 </script>
 
 <template>
@@ -32,10 +35,15 @@ const buttonClass = computed(() => ({
     unstyled
     :label="label"
     :class="buttonClass"
+    :size="size"
     :disabled="disabled || loading"
     :loading="loading"
     @click="emit('click', $event)"
-  />
+  >
+    <template #loadingicon>
+      <NychLoadingIcon class="nych-button-icon" />
+    </template>
+  </Button>
 </template>
 
 <style lang="css"></style>
diff --git a/packages/library/src/components/NychLoadingIcon.vue b/packages/library/src/components/NychLoadingIcon.vue
new file mode 100644
index 0000000..23e9b73
--- /dev/null
+++ b/packages/library/src/components/NychLoadingIcon.vue
@@ -0,0 +1,70 @@
+<template>
+  <svg class="nych-loading-icon" preserve-aspect-ratio="true" viewBox="226 66 228 228 ">
+    <g class="wreath">
+      <g transform="rotate(0,340,180)">
+        <path d="M340,70 C350,78 352,96 343,112 C339,107 332,93 335,76 Z" />
+        <line x1="340" y1="73" x2="343" y2="110" stroke-width="0.8" stroke-linecap="round" />
+      </g>
+      <g transform="rotate(22.5,340,180)">
+        <path d="M340,72 C350,80 352,97 343,113 C339,108 332,94 335,77 Z" />
+        <line x1="340" y1="75" x2="343" y2="111" stroke-width="0.8" stroke-linecap="round" />
+      </g>
+      <g transform="rotate(45,340,180)">
+        <path d="M340,70 C350,78 352,96 343,112 C339,107 332,93 335,76 Z" />
+        <line x1="340" y1="73" x2="343" y2="110" stroke-width="0.8" stroke-linecap="round" />
+      </g>
+      <g transform="rotate(67.5,340,180)">
+        <path d="M340,72 C350,80 352,97 343,113 C339,108 332,94 335,77 Z" />
+        <line x1="340" y1="75" x2="343" y2="111" stroke-width="0.8" stroke-linecap="round" />
+      </g>
+      <g transform="rotate(90,340,180)">
+        <path d="M340,70 C350,78 352,96 343,112 C339,107 332,93 335,76 Z" />
+        <line x1="340" y1="73" x2="343" y2="110" stroke-width="0.8" stroke-linecap="round" />
+      </g>
+      <g transform="rotate(112.5,340,180)">
+        <path d="M340,72 C350,80 352,97 343,113 C339,108 332,94 335,77 Z" />
+        <line x1="340" y1="75" x2="343" y2="111" stroke-width="0.8" stroke-linecap="round" />
+      </g>
+      <g transform="rotate(135,340,180)">
+        <path d="M340,70 C350,78 352,96 343,112 C339,107 332,93 335,76 Z" />
+        <line x1="340" y1="73" x2="343" y2="110" stroke-width="0.8" stroke-linecap="round" />
+      </g>
+      <g transform="rotate(157.5,340,180)">
+        <path d="M340,72 C350,80 352,97 343,113 C339,108 332,94 335,77 Z" />
+        <line x1="340" y1="75" x2="343" y2="111" stroke-width="0.8" stroke-linecap="round" />
+      </g>
+      <g transform="rotate(180,340,180)">
+        <path d="M340,70 C350,78 352,96 343,112 C339,107 332,93 335,76 Z" />
+        <line x1="340" y1="73" x2="343" y2="110" stroke-width="0.8" stroke-linecap="round" />
+      </g>
+      <g transform="rotate(202.5,340,180)">
+        <path d="M340,72 C350,80 352,97 343,113 C339,108 332,94 335,77 Z" />
+        <line x1="340" y1="75" x2="343" y2="111" stroke-width="0.8" stroke-linecap="round" />
+      </g>
+      <g transform="rotate(225,340,180)">
+        <path d="M340,70 C350,78 352,96 343,112 C339,107 332,93 335,76 Z" />
+        <line x1="340" y1="73" x2="343" y2="110" stroke-width="0.8" stroke-linecap="round" />
+      </g>
+      <g transform="rotate(247.5,340,180)">
+        <path d="M340,72 C350,80 352,97 343,113 C339,108 332,94 335,77 Z" />
+        <line x1="340" y1="75" x2="343" y2="111" stroke-width="0.8" stroke-linecap="round" />
+      </g>
+      <g transform="rotate(270,340,180)">
+        <path d="M340,70 C350,78 352,96 343,112 C339,107 332,93 335,76 Z" />
+        <line x1="340" y1="73" x2="343" y2="110" stroke-width="0.8" stroke-linecap="round" />
+      </g>
+      <g transform="rotate(292.5,340,180)">
+        <path d="M340,72 C350,80 352,97 343,113 C339,108 332,94 335,77 Z" />
+        <line x1="340" y1="75" x2="343" y2="111" stroke-width="0.8" stroke-linecap="round" />
+      </g>
+      <g transform="rotate(315,340,180)">
+        <path d="M340,70 C350,78 352,96 343,112 C339,107 332,93 335,76 Z" />
+        <line x1="340" y1="73" x2="343" y2="110" stroke-width="0.8" stroke-linecap="round" />
+      </g>
+      <g transform="rotate(337.5,340,180)">
+        <path d="M340,72 C350,80 352,97 343,113 C339,108 332,94 335,77 Z" />
+        <line x1="340" y1="75" x2="343" y2="111" stroke-width="0.8" stroke-linecap="round" />
+      </g>
+    </g>
+  </svg>
+</template>
diff --git a/packages/playground/stories/Button.stories.ts b/packages/playground/stories/Button.stories.ts
index ae2fb46..fa22d65 100644
--- a/packages/playground/stories/Button.stories.ts
+++ b/packages/playground/stories/Button.stories.ts
@@ -12,7 +12,7 @@ const meta = {
   argTypes: {
     variant: {
       control: { type: 'select' },
-      options: ['primary', 'secondary', 'success', 'warning', 'danger'],
+      options: ['primary', 'secondary', 'info', 'success', 'warning', 'danger'],
       description: 'Button variant style',
     },
     size: {
@@ -52,6 +52,13 @@ export const Secondary: Story = {
   },
 }
 
+export const Info: Story = {
+  args: {
+    label: 'Info Button',
+    variant: 'info',
+  },
+}
+
 export const Success: Story = {
   args: {
     label: 'Success Button',
@@ -95,9 +102,9 @@ export const Sizes: Story = {
     },
     template: `
       <div class="flex gap-4 items-center">
-        <NychButton label="Small" size="small" />
-        <NychButton label="Normal" size="normal" />
-        <NychButton label="Large" size="large" />
+        <NychButton label="Small" size="small"  loading="true"/>
+        <NychButton label="Normal" size="normal" loading="true" />
+        <NychButton label="Large" size="large" loading="true" />
       </div>
     `,
   }),