diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..2b48a57
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,21 @@
+{
+  "editor.formatOnSave": true,
+  "prettier.requireConfig": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "[svelte]": {
+    "editor.defaultFormatter": "svelte.svelte-vscode"
+  },
+  "editor.quickSuggestions": {
+    "strings": true
+  },
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  },
+  "eslint.workingDirectories": [{ "mode": "auto" }],
+  "eslint.validate": [
+    "svelte"
+  ],
+  "[javascript]": {
+    "editor.defaultFormatter": "ms-vsliveshare.vsliveshare"
+  }
+}
diff --git a/apps/ui/stories/ui/Button.stories.js b/apps/ui/stories/ui/Button.stories.js
new file mode 100644
index 0000000..68260c5
--- /dev/null
+++ b/apps/ui/stories/ui/Button.stories.js
@@ -0,0 +1,43 @@
+import ButtonsView from './views/ButtonsView.svelte';
+
+export default {
+  title: 'ui/Buttons',
+  component: ButtonsView,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: {
+        type: 'select',
+      },
+      options: ['primary', 'secondary', 'download'],
+    },
+    disabled: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    customClasses: {
+      control: {
+        type: 'text',
+      },
+    },
+  },
+};
+export const Default = {
+  args: {
+    variant: 'primary',
+    disabled: false,
+  },
+};
+export const Secondary = {
+  args: {
+    variant: 'secondary',
+    disabled: false,
+  },
+};
+export const Download = {
+  args: {
+    variant: 'download',
+    disabled: false,
+  },
+};
diff --git a/apps/ui/stories/ui/Icons.stories.js b/apps/ui/stories/ui/Icons.stories.js
index a2f8c8d..5e2caef 100644
--- a/apps/ui/stories/ui/Icons.stories.js
+++ b/apps/ui/stories/ui/Icons.stories.js
@@ -1,16 +1,11 @@
 import IconsView from './views/IconsView.svelte';
 
 export default {
-    title: 'ui/Icons',
-    component: IconsView,
-    tags: ['autodocs'],
-    argTypes: {
-        className: "h-8 w-8"
-    }
+  title: 'ui/Icons',
+  component: IconsView,
+  tags: ['autodocs'],
 };
 
 export const Default = {
-    args: {
-        className: "h-8 w-8"
-    }
-}
+  args: {},
+};
diff --git a/apps/ui/stories/ui/views/ButtonsView.svelte b/apps/ui/stories/ui/views/ButtonsView.svelte
new file mode 100644
index 0000000..503c5d2
--- /dev/null
+++ b/apps/ui/stories/ui/views/ButtonsView.svelte
@@ -0,0 +1,28 @@
+<script>
+  import { Button, LogoIcon } from 'ui/index.ts';
+
+  /**
+   *
+   */
+  function handleClick() {
+    console.log('clicked');
+  }
+</script>
+
+<div class="flex gap-2">
+  <Button on:click={handleClick} {...$$props}>
+    <div class="contents" slot="content">This is a button</div>
+  </Button>
+  <Button on:click={handleClick} {...$$props}>
+    <div class="contents" slot="leading">
+      <LogoIcon className="w-5 h-5" />
+    </div>
+    <div class="contents" slot="content">This is a logo button</div>
+  </Button>
+  <Button on:click={handleClick} {...$$props}>
+    <div class="contents" slot="content">This is a version button</div>
+    <div class="contents" slot="trailing">
+      <span class="rounded-3xl -mr-2 px-2 py-1 bg-[#ffffff44]"> v1.0.0 </span>
+    </div>
+  </Button>
+</div>
diff --git a/apps/ui/stories/ui/views/IconsView.svelte b/apps/ui/stories/ui/views/IconsView.svelte
index a28b606..ee180d1 100644
--- a/apps/ui/stories/ui/views/IconsView.svelte
+++ b/apps/ui/stories/ui/views/IconsView.svelte
@@ -18,12 +18,13 @@
         { name: 'PersonIcon', component: PersonIcon},
         { name: 'VerifiedIcon', component: VerifiedIcon },
     ];
+    
 </script>
 
 <div class="grid md:grid-cols-6 gap-4">
     {#each iconImports as { name, component }}
         <div class="flex flex-col items-center">
-            <svelte:component this={component} {...$$props } />
+            <svelte:component this={component} className="w-8 h-8" />
             <span class="text-sm text-gray-500">{name}</span>
         </div>
     {/each}
diff --git a/packages/tailwind-preset-base/index.js b/packages/tailwind-preset-base/index.js
index 064e663..5869292 100644
--- a/packages/tailwind-preset-base/index.js
+++ b/packages/tailwind-preset-base/index.js
@@ -11,6 +11,12 @@ export default {
         mono: 'Source Code Pro, Noto Sans JP, monospace',
         keycode: 'Lucida Grande',
       },
+      colors: {
+        primary: { 50: '#FFFFFF',  100: '#F3F2F3',  200: '#D5D1D6',  300: '#B6B1BA',  400: '#96919D',  500: '#75717F',  600: '#585761',  700: '#3C3D44',  800: '#222326',  900: '#070808',  950: '#000000'},
+        fore: {
+
+        }
+      }
     },
   },
   plugins: [],
diff --git a/packages/ui/components/button/Button.svelte b/packages/ui/components/button/Button.svelte
new file mode 100644
index 0000000..11fb79e
--- /dev/null
+++ b/packages/ui/components/button/Button.svelte
@@ -0,0 +1,23 @@
+<script>
+  // Variants: primary, secondary, download
+  export let variant;
+  // Disabled: boolean
+  export let disabled;
+
+  export let customClasses;
+
+  const variantClasses = {
+    primary: 'bg-primary-50 hover:bg-primary-100 text-black-950',
+    secondary: 'bg-primary-800 hover:bg-primary-900 text-white',
+    download:
+      'hover:-translate-y-[2px] bg-gradient-to-r from-[#47334f] to-[#2d2c4f] text-white duration-[200ms] ease-[cubic-bezier(0.22,0.61,0.36,1)]',
+  };
+
+  let buttonClasses = `disabled:opacity-50 flex flex-row items-center justify-center transition-all duration-[80ms] px-4 py-2 rounded-full gap-2 font-bold text-sm ${variantClasses[variant]} ${customClasses}`;
+</script>
+
+<button {disabled} class={buttonClasses}>
+  <slot name="leading" />
+  <slot name="content" />
+  <slot name="trailing" />
+</button>
diff --git a/packages/ui/index.ts b/packages/ui/index.ts
index ec74e65..af72a23 100644
--- a/packages/ui/index.ts
+++ b/packages/ui/index.ts
@@ -1,3 +1,4 @@
+// ICONS
 export { default as CalendarIcon } from './components/icons/Calendar.svelte';
 export { default as CategoryIcon } from './components/icons/Category.svelte';
 export { default as CheckmarkIcon } from './components/icons/Checkmark.svelte';
@@ -12,4 +13,7 @@ export { default as LogoIcon } from './components/icons/Logo.svelte';
 export { default as NotVerifiedIcon } from './components/icons/NotVerified.svelte';
 export { default as PersonIcon } from './components/icons/Person.svelte';
 export { default as SearchIcon } from './components/icons/Search.svelte';
-export { default as VerifiedIcon } from './components/icons/Verified.svelte';
\ No newline at end of file
+export { default as VerifiedIcon } from './components/icons/Verified.svelte';
+
+// BUTTON
+export { default as Button } from './components/button/Button.svelte'
\ No newline at end of file