diff --git a/src/app/design-system/page.tsx b/src/app/design-system/page.tsx
index 2aaead5..1172825 100644
--- a/src/app/design-system/page.tsx
+++ b/src/app/design-system/page.tsx
@@ -1,3 +1,5 @@
+import Button from '@/shared/components/Button';
+
 function Page() {
   return (
     <div className="p-6 space-y-6">
@@ -33,7 +35,11 @@ function Page() {
 
         <div className="space-y-2">
           <h3 className="text-xl font-medium border-b pb-1">Button</h3>
-          {/* 여기 컴포넌트 삽입 */}
+          <Button>버튼</Button>
+          <Button variant="purple" size="sm">
+            Button
+          </Button>
+          <Button variant="disable">button</Button>
         </div>
       </div>
 
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 9cc8854..a6070a3 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,6 +1,5 @@
 import type { Metadata } from 'next';
-import '../styles/global.css';
-
+import '@/shared/styles/global.css';
 export const metadata: Metadata = {
   title: 'SSOUL',
   description: '칵테일을 좋아하는 사람들을 위한 서비스',
diff --git a/src/@store/store.ts b/src/shared/@store/store.ts
similarity index 100%
rename from src/@store/store.ts
rename to src/shared/@store/store.ts
diff --git a/src/@types/index.ts b/src/shared/@types/index.ts
similarity index 100%
rename from src/@types/index.ts
rename to src/shared/@types/index.ts
diff --git a/src/assets/icons/bell_24.svg b/src/shared/assets/icons/bell_24.svg
similarity index 100%
rename from src/assets/icons/bell_24.svg
rename to src/shared/assets/icons/bell_24.svg
diff --git a/src/assets/icons/close_20.svg b/src/shared/assets/icons/close_20.svg
similarity index 100%
rename from src/assets/icons/close_20.svg
rename to src/shared/assets/icons/close_20.svg
diff --git a/src/assets/icons/comment_28.svg b/src/shared/assets/icons/comment_28.svg
similarity index 100%
rename from src/assets/icons/comment_28.svg
rename to src/shared/assets/icons/comment_28.svg
diff --git a/src/assets/icons/edit_28.svg b/src/shared/assets/icons/edit_28.svg
similarity index 100%
rename from src/assets/icons/edit_28.svg
rename to src/shared/assets/icons/edit_28.svg
diff --git a/src/assets/icons/github_32.svg b/src/shared/assets/icons/github_32.svg
similarity index 100%
rename from src/assets/icons/github_32.svg
rename to src/shared/assets/icons/github_32.svg
diff --git a/src/assets/icons/help_24.svg b/src/shared/assets/icons/help_24.svg
similarity index 100%
rename from src/assets/icons/help_24.svg
rename to src/shared/assets/icons/help_24.svg
diff --git a/src/assets/icons/imageBox_24.svg b/src/shared/assets/icons/imageBox_24.svg
similarity index 100%
rename from src/assets/icons/imageBox_24.svg
rename to src/shared/assets/icons/imageBox_24.svg
diff --git a/src/assets/icons/imageBox_fill_24.svg b/src/shared/assets/icons/imageBox_fill_24.svg
similarity index 100%
rename from src/assets/icons/imageBox_fill_24.svg
rename to src/shared/assets/icons/imageBox_fill_24.svg
diff --git a/src/assets/icons/keep_36.svg b/src/shared/assets/icons/keep_36.svg
similarity index 100%
rename from src/assets/icons/keep_36.svg
rename to src/shared/assets/icons/keep_36.svg
diff --git a/src/assets/icons/keep_active_36.svg b/src/shared/assets/icons/keep_active_36.svg
similarity index 100%
rename from src/assets/icons/keep_active_36.svg
rename to src/shared/assets/icons/keep_active_36.svg
diff --git a/src/assets/icons/like_28.svg b/src/shared/assets/icons/like_28.svg
similarity index 100%
rename from src/assets/icons/like_28.svg
rename to src/shared/assets/icons/like_28.svg
diff --git a/src/assets/icons/like_active_28.svg b/src/shared/assets/icons/like_active_28.svg
similarity index 100%
rename from src/assets/icons/like_active_28.svg
rename to src/shared/assets/icons/like_active_28.svg
diff --git a/src/assets/icons/link_36.svg b/src/shared/assets/icons/link_36.svg
similarity index 100%
rename from src/assets/icons/link_36.svg
rename to src/shared/assets/icons/link_36.svg
diff --git a/src/assets/icons/search_32.svg b/src/shared/assets/icons/search_32.svg
similarity index 100%
rename from src/assets/icons/search_32.svg
rename to src/shared/assets/icons/search_32.svg
diff --git a/src/assets/icons/selectDown_24.svg b/src/shared/assets/icons/selectDown_24.svg
similarity index 100%
rename from src/assets/icons/selectDown_24.svg
rename to src/shared/assets/icons/selectDown_24.svg
diff --git a/src/assets/icons/send_36.svg b/src/shared/assets/icons/send_36.svg
similarity index 100%
rename from src/assets/icons/send_36.svg
rename to src/shared/assets/icons/send_36.svg
diff --git a/src/assets/icons/share_24.svg b/src/shared/assets/icons/share_24.svg
similarity index 100%
rename from src/assets/icons/share_24.svg
rename to src/shared/assets/icons/share_24.svg
diff --git a/src/assets/icons/singout_24.svg b/src/shared/assets/icons/singout_24.svg
similarity index 100%
rename from src/assets/icons/singout_24.svg
rename to src/shared/assets/icons/singout_24.svg
diff --git a/src/assets/icons/tag_24.svg b/src/shared/assets/icons/tag_24.svg
similarity index 100%
rename from src/assets/icons/tag_24.svg
rename to src/shared/assets/icons/tag_24.svg
diff --git a/src/assets/icons/user_24.svg b/src/shared/assets/icons/user_24.svg
similarity index 100%
rename from src/assets/icons/user_24.svg
rename to src/shared/assets/icons/user_24.svg
diff --git a/src/assets/images/index.ts b/src/shared/assets/images/index.ts
similarity index 100%
rename from src/assets/images/index.ts
rename to src/shared/assets/images/index.ts
diff --git a/src/shared/components/Button.tsx b/src/shared/components/Button.tsx
new file mode 100644
index 0000000..4d1e74c
--- /dev/null
+++ b/src/shared/components/Button.tsx
@@ -0,0 +1,28 @@
+import { ButtonHTMLAttributes, Ref } from 'react';
+
+interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
+  size?: 'default' | 'sm';
+  variant?: 'default' | 'purple' | 'disable';
+  children: string;
+  ref?: Ref<HTMLButtonElement | null>;
+}
+
+const SIZE = {
+  default: 'py-1 px-2 h-10 rounded-lg text-base font-bold min-w-25 cursor-pointer flex-center',
+  sm: 'py-1 px-2 rounded-lg text-base font-bold min-w-20 cursor-pointer flex-center',
+};
+
+const VARIANT = {
+  default: 'bg-secondary',
+  purple: 'bg-tertiary text-bold text-secondary',
+  disable: 'bg-gray',
+};
+
+function Button({ size = 'default', variant = 'default', children, ref, ...rest }: Props) {
+  return (
+    <button className={`${SIZE[size]} ${VARIANT[variant]}`} {...rest} ref={ref}>
+      {children}
+    </button>
+  );
+}
+export default Button;
diff --git a/src/components/index.tsx b/src/shared/components/index.tsx
similarity index 100%
rename from src/components/index.tsx
rename to src/shared/components/index.tsx
diff --git a/src/hook/index.ts b/src/shared/hook/index.ts
similarity index 100%
rename from src/hook/index.ts
rename to src/shared/hook/index.ts
diff --git a/src/lib/index.ts b/src/shared/lib/index.ts
similarity index 100%
rename from src/lib/index.ts
rename to src/shared/lib/index.ts
diff --git a/src/styles/_base.css b/src/shared/styles/_base.css
similarity index 100%
rename from src/styles/_base.css
rename to src/shared/styles/_base.css
diff --git a/src/styles/_components.css b/src/shared/styles/_components.css
similarity index 100%
rename from src/styles/_components.css
rename to src/shared/styles/_components.css
diff --git a/src/styles/_theme.css b/src/shared/styles/_theme.css
similarity index 100%
rename from src/styles/_theme.css
rename to src/shared/styles/_theme.css
diff --git a/src/styles/_utilities.css b/src/shared/styles/_utilities.css
similarity index 100%
rename from src/styles/_utilities.css
rename to src/shared/styles/_utilities.css
diff --git a/src/styles/global.css b/src/shared/styles/global.css
similarity index 100%
rename from src/styles/global.css
rename to src/shared/styles/global.css
diff --git a/src/utills/debounce.ts b/src/shared/utills/debounce.ts
similarity index 100%
rename from src/utills/debounce.ts
rename to src/shared/utills/debounce.ts
diff --git a/src/utills/scrollToTop.ts b/src/shared/utills/scrollToTop.ts
similarity index 100%
rename from src/utills/scrollToTop.ts
rename to src/shared/utills/scrollToTop.ts
diff --git a/src/utills/test.ts b/src/shared/utills/test.ts
similarity index 100%
rename from src/utills/test.ts
rename to src/shared/utills/test.ts
diff --git a/src/utills/throttle.ts b/src/shared/utills/throttle.ts
similarity index 100%
rename from src/utills/throttle.ts
rename to src/shared/utills/throttle.ts
diff --git a/src/utills/tw.ts b/src/shared/utills/tw.ts
similarity index 100%
rename from src/utills/tw.ts
rename to src/shared/utills/tw.ts