diff --git a/src/app.html b/src/app.html
index 84ffad1..4471298 100644
--- a/src/app.html
+++ b/src/app.html
@@ -3,6 +3,12 @@
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%sveltekit.assets%/favicon.png" />
+    <link
+      rel="stylesheet"
+      as="style"
+      crossorigin="anonymous"
+      href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css"
+    />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     %sveltekit.head%
   </head>
diff --git a/src/lib/components/AdaptiveDiv.svelte b/src/lib/components/AdaptiveDiv.svelte
new file mode 100644
index 0000000..ee845cc
--- /dev/null
+++ b/src/lib/components/AdaptiveDiv.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+  let { children } = $props();
+</script>
+
+<div class="mx-auto h-full w-full max-w-screen-md">
+  {@render children?.()}
+</div>
diff --git a/src/lib/components/buttons/Button.svelte b/src/lib/components/buttons/Button.svelte
new file mode 100644
index 0000000..db27c33
--- /dev/null
+++ b/src/lib/components/buttons/Button.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+  interface Props {
+    children?: any;
+    color?: "primary" | "gray";
+    onclick?: () => void;
+  }
+
+  let { children, color = "primary", onclick }: Props = $props();
+
+  let bgColorStyle = $derived(
+    {
+      primary: "bg-primary-600 active:bg-primary-500",
+      gray: "bg-gray-300 active:bg-gray-400",
+    }[color],
+  );
+  let fontColorStyle = $derived(
+    {
+      primary: "text-white",
+      gray: "text-gray-800",
+    }[color],
+  );
+</script>
+
+<button {onclick} class="{bgColorStyle} {fontColorStyle} h-12 rounded-xl font-medium">
+  <div class="h-full w-full p-3 transition active:scale-95">
+    {@render children?.()}
+  </div>
+</button>
diff --git a/src/lib/components/buttons/TextButton.svelte b/src/lib/components/buttons/TextButton.svelte
new file mode 100644
index 0000000..6ccb71f
--- /dev/null
+++ b/src/lib/components/buttons/TextButton.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+  interface Props {
+    children?: any;
+    onclick?: () => void;
+  }
+
+  let { children, onclick }: Props = $props();
+</script>
+
+<button {onclick} class="font-medium text-gray-800 active:rounded-xl active:bg-gray-100">
+  <div class="h-full w-full p-1 transition active:scale-95">
+    {@render children?.()}
+  </div>
+</button>
diff --git a/src/lib/components/buttons/index.ts b/src/lib/components/buttons/index.ts
new file mode 100644
index 0000000..0b93571
--- /dev/null
+++ b/src/lib/components/buttons/index.ts
@@ -0,0 +1,2 @@
+export { default as Button } from "./Button.svelte";
+export { default as TextButton } from "./TextButton.svelte";
diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
new file mode 100644
index 0000000..85508da
--- /dev/null
+++ b/src/lib/components/index.ts
@@ -0,0 +1 @@
+export { default as AdaptiveDiv } from "./AdaptiveDiv.svelte";
diff --git a/src/lib/components/inputs/TextInput.svelte b/src/lib/components/inputs/TextInput.svelte
new file mode 100644
index 0000000..e8bee93
--- /dev/null
+++ b/src/lib/components/inputs/TextInput.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+  interface Props {
+    placeholder: string;
+    type?: "text" | "password";
+    value?: string;
+  }
+
+  let { placeholder, type = "text", value = $bindable("") }: Props = $props();
+</script>
+
+<div class="relative mt-6">
+  <input
+    bind:value
+    {type}
+    placeholder=" "
+    class="w-full border-b-2 border-gray-300 py-1 text-xl outline-none transition-all duration-300 ease-in-out"
+  />
+  <!-- svelte-ignore a11y_label_has_associated_control -->
+  <label
+    class="absolute left-0 top-1/2 -translate-y-1/2 transform text-xl text-gray-400 transition-all duration-300 ease-in-out"
+  >
+    {placeholder}
+  </label>
+</div>
+
+<style>
+  input:focus,
+  input:not(:placeholder-shown) {
+    @apply border-primary-300;
+  }
+  input:focus + label,
+  input:not(:placeholder-shown) + label {
+    @apply text-primary-400 top-0 -translate-y-full text-sm;
+  }
+</style>
diff --git a/src/lib/components/inputs/index.ts b/src/lib/components/inputs/index.ts
new file mode 100644
index 0000000..c2c534d
--- /dev/null
+++ b/src/lib/components/inputs/index.ts
@@ -0,0 +1 @@
+export { default as TextInput } from "./TextInput.svelte";
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 9d75afa..e8c5803 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -4,7 +4,53 @@ export default {
   content: ["./src/**/*.{html,js,svelte,ts}"],
 
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        primary: {
+          "000": "#FFF5F5",
+          100: "#FFE3E3",
+          200: "#FFC9C9",
+          300: "#FFA8A8",
+          400: "#FF8787",
+          500: "#FF6B6B",
+          600: "#FA5252",
+          700: "#F03E3E",
+          800: "#E03131",
+          900: "#C92A2A",
+        },
+        gray: {
+          "000": "#F8F9FA",
+          100: "#F1F3F5",
+          200: "#E9ECEF",
+          300: "#DEE2E6",
+          400: "#CED4DA",
+          500: "#ADB5BD",
+          600: "#868E96",
+          700: "#495057",
+          800: "#343A40",
+          900: "#212529",
+        },
+      },
+      fontFamily: {
+        sans: [
+          '"Pretendard Variable"',
+          "Pretendard",
+          "-apple-system",
+          "BlinkMacSystemFont",
+          "system-ui",
+          "Roboto",
+          '"Helvetica Neue"',
+          '"Segoe UI"',
+          '"Apple SD Gothic Neo"',
+          '"Noto Sans KR"',
+          '"Malgun Gothic"',
+          '"Apple Color Emoji"',
+          '"Segoe UI Emoji"',
+          '"Segoe UI Symbol"',
+          "sans-serif",
+        ],
+      },
+    },
   },
 
   plugins: [],
