diff --git a/src/app/sample/page.tsx b/src/app/sample/page.tsx
new file mode 100644
index 0000000..c4c30d3
--- /dev/null
+++ b/src/app/sample/page.tsx
@@ -0,0 +1,240 @@
+'use client'
+
+import { useState } from 'react'
+
+export default function page() {
+  const [fileName, setFileName] = useState<File | null>(null) //file name value
+
+  return (
+    <>
+      <div className="form-design-wrap">
+        <div className="design-box">
+          <h1 className="tit">Input</h1>
+          <div className="design-grid-wrap">
+            <input className="input-frame" type="text" placeholder="Input Frame Text" />
+            <input className="input-frame" type="number" placeholder="Input Frame Number" />
+            <input className="input-frame" type="password" placeholder="Input Frame Password" />
+            <input className="input-frame" type="email" placeholder="Input Frame Email" />
+            <input className="input-frame" type="text" placeholder="Input Frame Disabled" defaultValue={'defaultValue'} disabled />
+            <input className="input-frame" type="text" placeholder="Input Frame ReadOnly" readOnly />
+            <div className="filebox">
+              <label className="btn-frame l-blue icon" htmlFor="file">
+                <i className="btn-clip"></i>Upload File
+              </label>
+              <input type="file" id="file" onChange={(e) => setFileName(e.target.files?.[0] ?? null)} />
+            </div>
+            <div className="search-input">
+              <input type="text" className="search-frame" placeholder="Input Frame Search" />
+              <button className="search-icon"></button>
+            </div>
+            <div className="date-input">
+              <button className="date-btn">
+                <i className="date-icon"></i>
+              </button>
+              <input type="text" className="date-frame" placeholder="Input Frame Date" />
+            </div>
+            <div className="login-input id">
+              <input type="text" className="login-frame" placeholder="Input Frame ID" />
+              <button className="login-icon">
+                <i className="del-icon"></i>
+              </button>
+            </div>
+            <div className="login-input pw">
+              <input type="password" className="login-frame" placeholder="Input Frame PW" />
+              <button className="login-icon act">
+                <i className="show-icon"></i>
+              </button>
+            </div>
+            <div className="login-input pw change">
+              <input type="password" className="login-frame" placeholder="Input Frame PW" />
+              <button className="login-icon act">
+                <i className="show-icon"></i>
+              </button>
+            </div>
+          </div>
+        </div>
+        <div className="design-box">
+          <h1 className="tit">Button</h1>
+          <div className="design-grid-wrap">
+            <button className="btn-frame d-blue min">Block Button</button>
+            <button className="btn-frame n-blue min">Block Button</button>
+            <button className="btn-frame red min">Block Button</button>
+            <button className="btn-frame d-blue">Block Button</button>
+            <button className="btn-frame n-blue">Block Button</button>
+            <button className="btn-frame l-blue">Block Button</button>
+            <button className="btn-frame red">Block Button</button>
+            <button className="btn-frame d-blue icon">
+              Block Icon Button<i className="btn-arr"></i>
+            </button>
+            <button className="btn-frame n-blue icon">
+              Block Icon Button<i className="btn-arr"></i>
+            </button>
+            <button className="btn-frame n-blue icon">
+              Block Icon Button<i className="btn-edit"></i>
+            </button>
+            <button className="btn-frame red icon">
+              Block Icon Button<i className="btn-arr"></i>
+            </button>
+            <button className="btn-frame l-blue icon">
+              <i className="btn-clip"></i>Block Icon Button
+            </button>
+            <button className="btn-frame icon login">
+              Block Big Button <i className="btn-arr"></i>
+            </button>
+            <button className="btn-frame" disabled>
+              Block Button
+            </button>
+          </div>
+        </div>
+        <div className="design-box">
+          <h1 className="tit">Check Box</h1>
+          <div className="design-grid-wrap">
+            <div className="check-form-box">
+              <input type="checkbox" id="ch01" />
+              <label htmlFor="ch01">Check Box</label>
+            </div>
+            <div className="check-form-box">
+              <input type="checkbox" id="ch02" />
+              <label htmlFor="ch02">Check Box</label>
+            </div>
+            <div className="check-form-box">
+              <input type="checkbox" id="ch03" defaultChecked />
+              <label htmlFor="ch03">Check Box</label>
+            </div>
+            <div className="check-form-box">
+              <input type="checkbox" id="ch04" defaultChecked />
+              <label htmlFor="ch04">Check Box</label>
+            </div>
+            <div className="check-form-box">
+              <input type="checkbox" id="ch05" disabled />
+              <label htmlFor="ch05">Check Box</label>
+            </div>
+            <div className="check-form-box">
+              <input type="checkbox" id="ch06" disabled />
+              <label htmlFor="ch06">Check Box</label>
+            </div>
+          </div>
+        </div>
+        <div className="design-box">
+          <h1 className="tit">Radio Button</h1>
+          <div className="design-grid-wrap">
+            <div className="radio-form-box">
+              <input type="radio" name="radio01" id="ra01" />
+              <label htmlFor="ra01">Radio Button</label>
+            </div>
+            <div className="radio-form-box">
+              <input type="radio" name="radio01" id="ra02" defaultChecked />
+              <label htmlFor="ra02">Radio Button</label>
+            </div>
+            <div className="radio-form-box">
+              <input type="radio" name="radio03" id="ra05" disabled />
+              <label htmlFor="ra05">Radio Button</label>
+            </div>
+          </div>
+        </div>
+        <div className="design-box">
+          <h1 className="tit">Toggle Button</h1>
+          <div className="design-grid-wrap">
+            <div>
+              <label className="toggle-btn">
+                <input type="checkbox" />
+                <span className="slider"></span>
+              </label>
+            </div>
+            <div className="toggle-form">
+              <label className="toggle-btn">
+                <input type="checkbox" />
+                <span className="slider"></span>
+              </label>
+              <div className="toggle-name">Q.PARTNERS</div>
+            </div>
+          </div>
+        </div>
+        <div className="design-box">
+          <h1 className="tit">Select Box</h1>
+          <div className="design-grid-wrap">
+            <select className="select-form" name="" id="">
+              <option value="">Select01</option>
+              <option value="">Select02</option>
+              <option value="">Select03</option>
+              <option value="">Select04</option>
+              <option value="">Select05</option>
+            </select>
+            <select className="select-form" name="" id="" disabled>
+              <option value="">Select01</option>
+              <option value="">Select02</option>
+              <option value="">Select03</option>
+              <option value="">Select04</option>
+              <option value="">Select05</option>
+            </select>
+            <div className="select-flex-form">
+              <select className="select-form" name="" id="">
+                <option value="">Select01</option>
+                <option value="">Select02</option>
+                <option value="">Select03</option>
+                <option value="">Select04</option>
+                <option value="">Select05</option>
+              </select>
+              <select className="select-form" name="" id="">
+                <option value="">Select01</option>
+                <option value="">Select02</option>
+                <option value="">Select03</option>
+                <option value="">Select04</option>
+                <option value="">Select05</option>
+              </select>
+              <select className="select-form" name="" id="" disabled>
+                <option value="">Select01</option>
+                <option value="">Select02</option>
+                <option value="">Select03</option>
+                <option value="">Select04</option>
+                <option value="">Select05</option>
+              </select>
+            </div>
+          </div>
+        </div>
+        <div className="design-box">
+          <h1 className="tit">TextArea</h1>
+          <div className="design-grid-wrap">
+            <textarea className="textarea-form" name="" id="" placeholder="TextArea Filed"></textarea>
+            <textarea className="textarea-form" name="" id="" disabled></textarea>
+          </div>
+        </div>
+        <style jsx>
+          {`
+            .form-design-wrap {
+              max-width: 1300px;
+              margin: 0px auto;
+              padding: 25px 20px;
+            }
+            .design-box {
+              padding: 15px;
+              box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+              border-radius: 5px;
+              margin-bottom: 25px;
+            }
+            .tit {
+              font-size: 24px;
+              font-weight: 600;
+              color: #000;
+              border-bottom: 1px solid #000;
+              padding-bottom: 5px;
+            }
+            .design-grid-wrap {
+              display: flex;
+              align-items: center;
+              flex-wrap: wrap;
+              margin-top: 20px;
+              gap: 10px;
+            }
+            .icon-bx {
+              width: 10px;
+              height: 10px;
+              margin-right: 5px;
+              background-color: #000;
+            }
+          `}
+        </style>
+      </div>
+    </>
+  )
+}