diff --git a/.github/PULL_REQUEST_TEMPLATE/solo-template.yml b/.github/PULL_REQUEST_TEMPLATE/solo-template.yml
index 8779fb3..0c7abf7 100644
--- a/.github/PULL_REQUEST_TEMPLATE/solo-template.yml
+++ b/.github/PULL_REQUEST_TEMPLATE/solo-template.yml
@@ -1,6 +1,6 @@
 name: '📝 PR Template (Solo)'
 description: '혼자 쓰는 컴포넌트 PR 템플릿'
-labels: ['pr']
+labels: ['feat']
 body:
   - type: input
     id: title
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
new file mode 100644
index 0000000..7438221
--- /dev/null
+++ b/pnpm-workspace.yaml
@@ -0,0 +1,5 @@
+ignoredBuiltDependencies:
+  - unrs-resolver
+
+packages:
+  - 'xp-components'
\ No newline at end of file
diff --git a/src/componets/Button/Button.scss b/src/componets/Button/Button.scss
index 5107506..182d534 100644
--- a/src/componets/Button/Button.scss
+++ b/src/componets/Button/Button.scss
@@ -2,7 +2,7 @@
 @use 'sass:map';
 
 .btn {
-  background: #d4d4d4;
+  background: s.color(gray-300);
   @include s.text-style-extended(lg, 400, gray-900);
   border: none;
   padding: 6px 18px;
@@ -25,11 +25,11 @@
       2px 2px 0 0 s.color(gray-900);
   }
   &:active {
-    background: #bbbbbb;
+    background: s.color(gray-300);
     color: s.color(gray-900);
     box-shadow:
       inset 1px 1px 0 0 s.color(white),
-      1px 1px 0 0 #868686,
+      1px 1px 0 0 s.color(gray-600),
       0px 0px 0 0 s.color(gray-900);
   }
 
diff --git a/src/componets/Checkbox/Checkbox.scss b/src/componets/Checkbox/Checkbox.scss
index bece911..3b95ecc 100644
--- a/src/componets/Checkbox/Checkbox.scss
+++ b/src/componets/Checkbox/Checkbox.scss
@@ -36,9 +36,9 @@
   height: 18px;
   border-radius: 0;
   border: 2px solid s.color(gray-400);
-  background: s.color(white);
+  background: s.color(gray-300);
   cursor: pointer;
-  transition:
+  transition: 
     background-color 0.2s,
     border-color 0.2s;
 
@@ -46,6 +46,7 @@
     ~ .checkbox_png {
       opacity: 1;
     }
+    border: 2px solid s.color(gray-900);
   }
 
   @media (max-width: 640px) {
diff --git a/src/componets/Checkbox/Checkbox.stories.tsx b/src/componets/Checkbox/Checkbox.stories.tsx
index 2a3cf79..4c672ff 100644
--- a/src/componets/Checkbox/Checkbox.stories.tsx
+++ b/src/componets/Checkbox/Checkbox.stories.tsx
@@ -10,13 +10,13 @@ const meta: Meta<typeof Checkbox> = {
 export default meta;
 type Story = StoryObj<typeof Checkbox>;
 
-export const Primary: Story = {
+export const Default: Story = {
   args: {
     label: 'Checkbox Default'
   }
 };
 
-export const Secondary: Story = {
+export const Checked: Story = {
   args: {
     label: 'Checkbox Checked',
     checked: true
diff --git a/src/componets/Input/Input.scss b/src/componets/Input/Input.scss
new file mode 100644
index 0000000..3194132
--- /dev/null
+++ b/src/componets/Input/Input.scss
@@ -0,0 +1,77 @@
+@use '../../styles/index' as s;
+@use 'sass:map';
+
+
+.input_wrapper {
+  position: relative;
+  cursor: pointer;
+  width: 100%;
+}
+
+// 인풋 필드
+.input_field {
+  width: 100%;
+  padding: 10px;
+  box-sizing: border-box;
+  border: none; 
+  background: s.color(gray-300); 
+  color: s.color(gray-900);
+ 
+  box-shadow:
+    inset 1px 1px 0 0 s.color(white),
+    1px 1px 0 0 s.color(gray-600),
+    2px 2px 0 0 s.color(gray-900);
+  transition:
+    background-color 0.12s,
+    color 0.12s,
+    box-shadow 0.12s;
+
+
+  &:hover,
+  &:focus {
+    outline: none;
+    background: s.color(gray-300);
+    color: s.color(gray-900);
+    box-shadow:
+      inset 1px 1px 0 0 s.color(white),
+      2px 2px 0 0 s.color(gray-900); 
+  }
+
+  &:active {
+    background: s.color(gray-300);
+    color: s.color(gray-900);
+    box-shadow:
+      inset 1px 1px 0 0 s.color(white),
+      1px 1px 0 0 s.color(gray-600),
+      0px 0px 0 0 s.color(gray-900);
+  }
+
+  @media (max-width: 640px) {
+    @include s.text-style-extended(md, 400, gray-900);
+    padding: 5px 13px;
+  }
+}
+
+// placeholder 스타일
+.input_placeholder {
+  position: absolute;
+  left: 8px;
+  top: -10px;
+  @include s.text-style-extended(xs, 400, gray-900);
+  background: s.color(white);
+  padding: 0 4px;
+  pointer-events: none;
+  transition: 0.2s;
+  box-shadow:
+    inset 1px 1px 0 0 s.color(white),
+    1px 1px 0 0 s.color(gray-600),
+    0px 0px 0 0 s.color(gray-900);
+}
+
+// focus 시 placeholder 스타일
+.input_field:focus + .input_placeholder,
+.input_field:not(:placeholder-shown) + .input_placeholder {
+
+  background: s.color(white);
+  padding: 0 4px;
+}
\ No newline at end of file
diff --git a/src/componets/Input/Input.stories.tsx b/src/componets/Input/Input.stories.tsx
new file mode 100644
index 0000000..ee0b306
--- /dev/null
+++ b/src/componets/Input/Input.stories.tsx
@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import Input from './Input';
+
+const meta: Meta<typeof Input> = {
+  title: 'Components/Input',
+  component: Input,
+  argTypes: { onChange: { action: 'changed' } }
+};
+
+export default meta;
+type Story = StoryObj<typeof Input>;
+
+export const Text: Story = {
+  args: {
+    label: 'Text 입력',
+    id: 'input-text',
+    type: 'text',
+    placeholder: '텍스트 입력'
+  }
+};
+
+export const Password: Story = {
+  args: {
+    label: '비밀번호 입력',
+    id: 'input-password',
+    type: 'password',
+    placeholder: '비밀번호 입력'
+  }
+};
+
+export const Email: Story = {
+  args: {
+    label: '이메일 입력',
+    id: 'input-email',
+    type: 'email',
+    placeholder: '이메일 입력'
+  }
+};
+
+export const AutoId: Story = {
+  args: {
+    label: '자동 ID Input',
+    placeholder: 'id 없이 렌더링'
+  }
+};
\ No newline at end of file
diff --git a/src/componets/Input/Input.test.tsx b/src/componets/Input/Input.test.tsx
new file mode 100644
index 0000000..aa9dd60
--- /dev/null
+++ b/src/componets/Input/Input.test.tsx
@@ -0,0 +1,43 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { test, expect, vi } from 'vitest';
+
+import Input from './Input';
+
+test('label(플레이스홀더)과 input이 id로 연결되어 있다', () => {
+  render(<Input label="테스트라벨" />);
+  const label = screen.getByText('테스트라벨');
+  const input = screen.getByRole('textbox');
+  expect(label).toHaveAttribute('for', input.getAttribute('id'));
+});
+
+test('type, placeholder, value props 전달 확인', () => {
+  render(
+    <Input
+      label="이메일"
+      type="email"
+      placeholder="이메일 입력"
+      value="abc@ex.com"
+    />
+  );
+  const input = screen.getByRole('textbox');
+  expect(input).toHaveAttribute('type', 'email');
+  expect(input).toHaveAttribute('placeholder', '이메일 입력');
+  expect(input).toHaveValue('abc@ex.com');
+});
+
+test('Input 입력 시 onChange 이벤트 발생', async () => {
+  const handleChange = vi.fn();
+  render(<Input label="패스워드" type="password" onChange={handleChange} />);
+  const input = screen.getByLabelText('패스워드');
+  await userEvent.type(input, 'secret');
+  expect(handleChange).toHaveBeenCalled();
+});
+
+test('id 소품 없을 때 자동 id 생성', () => {
+  render(<Input label="자동ID" />);
+  const input = screen.getByRole('textbox');
+  const label = screen.getByText('자동ID');
+  expect(input.getAttribute('id')).toBeTruthy();
+  expect(label).toHaveAttribute('for', input.getAttribute('id'));
+});
\ No newline at end of file
diff --git a/src/componets/Input/Input.tsx b/src/componets/Input/Input.tsx
new file mode 100644
index 0000000..4bd7d86
--- /dev/null
+++ b/src/componets/Input/Input.tsx
@@ -0,0 +1,21 @@
+import React, { useId } from 'react';
+import './Input.scss';
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {
+  label: string;
+}
+
+const Input: React.FC<InputProps> = ({ label, id: propId, type = 'text', ...rest }) => {
+  const reactId = useId();
+  const id = propId || reactId;
+
+  return (
+    <div className="input_wrapper">
+      <input type={type} className="input_field" id={id} {...rest} />
+      <label htmlFor={id} className="input_placeholder">{label}</label>
+    </div>
+  );
+};
+
+export default Input;
\ No newline at end of file
diff --git a/src/public/vite.svg b/src/public/vite.svg
new file mode 100644
index 0000000..e7b8dfb
--- /dev/null
+++ b/src/public/vite.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
\ No newline at end of file