diff --git a/src/Route/Admin/AddChart/AddChart.css b/src/Route/Admin/AddChart/AddChart.css
index e69de29..e404bd2 100644
--- a/src/Route/Admin/AddChart/AddChart.css
+++ b/src/Route/Admin/AddChart/AddChart.css
@@ -0,0 +1,6 @@
+input[type=text] {
+    width: 30%;
+    padding: 0.5em 1em;
+    margin: 0.5em ;
+    box-sizing: border-box;
+  }
\ No newline at end of file
diff --git a/src/Route/Admin/AddChart/AddChart.jsx b/src/Route/Admin/AddChart/AddChart.jsx
index 16dd91e..44d6104 100644
--- a/src/Route/Admin/AddChart/AddChart.jsx
+++ b/src/Route/Admin/AddChart/AddChart.jsx
@@ -48,16 +48,16 @@ function AddChart() {
             <h1>Add Chart</h1>
             <form method="post" onSubmit={handleSubmit}>
                 <div>
-                    <label htmlFor="title">Title</label>
-                    <input type="text" name="title" id="title" />
+                    <label htmlFor="title" className='w-1/3 text-xl uppercase tracking-wide text-sm text-green-500 font-semibold'>Title</label>
+                    <input className="w-2/3 bg-gray-200 appearance-none border-2 border-gray-200 rounded w-64 py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500" name="title" id="title" type="text"></input>
                 </div>
                 <div>
-                    <label htmlFor="artist">Artist</label>
-                    <input type="text" name="artist" id="artist" />
+                    <label htmlFor="artist" className=' text-xl uppercase tracking-wide text-sm text-green-500 font-semibold' >Artist</label>
+                    <input className="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-64 py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500" name="artist" id="artist" type="text"></input>
                 </div>
                 <div>
-                    <label htmlFor="category">Category</label>
-                    <select name="category" id="category">
+                    <label htmlFor="category" className='text-2xl'>Category</label>
+                    <select className="block appearance-none w-64 bg-white border border-gray-400 hover:border-purple-500 px-4 py-2 pr-8 rounded shadow leading-tight focus:outline-none focus:shadow-outline" name="category" id="category">
                         <option value="pop">Pops & Anime</option>
                         <option value="niconico">niconico & Vocaloid</option>
                         <option value="touhou">Touhou Project</option>
@@ -68,25 +68,50 @@ function AddChart() {
                     </select>
                 </div>
                 <div>
-                    <p>Difficulty: </p>
-                    <label htmlFor="easy">Easy</label>
-                    <input type="string" name="easy" id="easy" />
-                    <label htmlFor="basic">Basic</label>
-                    <input type="string" name="basic" id="basic" />
-                    <label htmlFor="advance">Advance</label>
-                    <input type="string" name="advance" id="advance" />
-                    <label htmlFor="expert">Expert</label>
-                    <input type="string" name="expert" id="expert" />
-                    <label htmlFor="master">Master</label>
-                    <input type="string" name="master" id="master" />
-                    <label htmlFor="remaster">Remaster</label>
-                    <input type="string" name="remaster" id="remaster" />
+                    <div className='text-2xl'>
+                        <p>Difficulty: </p>
+                    </div>
+                    <div className='flex content-start '>
+                        <div className='p-3'>
+                        <label htmlFor="easy" className=' flex -space-x-4 text-xl uppercase tracking-wide text-blue-500 font-semibold'>Easy</label>
+                        <input type="string" name="easy" id="easy" className="w-24 bg-blue-300 appearance-none border-2 border-gray-200 rounded  py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-blue-500"/>
+                        </div>
+
+                        <div className='p-3'>
+                        <label htmlFor="basic" className=' flex -space-x-4 text-xl uppercase tracking-wide text-green-500 font-semibold'>Basic</label>
+                        <input type="string" name="basic" id="basic" className="w-24 bg-green-300 appearance-none border-2 border-gray-200 rounded  py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-green-500"/>
+                        </div>
+                        
+                        <div className='p-3'>
+                        <label htmlFor="advance" className=' flex -space-x-4 text-xl uppercase tracking-wide text-yellow-500 font-semibold'>Advance</label>
+                        <input type="string" name="advance" id="advance" className="w-24 bg-yellow-300 appearance-none border-2 border-gray-200 rounded  py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-yellow-500" />
+                        </div>
+
+                        <div className='p-3'>
+                        <label htmlFor="expert" className='flex -space-x-4 text-xl uppercase tracking-wide text-red-500 font-semibold'>Expert</label>
+                        <input type="string" name="expert" id="expert" className="w-24 bg-red-300 appearance-none border-2 border-gray-200 rounded  py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-red-500"/>
+                        </div>
+
+                        <div className='p-3'>
+                        <label htmlFor="master" className='flex -space-x-4 text-xl uppercase tracking-wide text-fuchsia-500 font-semibold'>Master</label>
+                        <input type="string" name="master" id="master" className="w-24 bg-fuchsia-300 appearance-none border-2 border-gray-200 rounded  py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-fuchsia-500"/>
+                        </div>
+
+                        <div className='p-3'>
+                        <label htmlFor="remaster" className='flex -space-x-4 text-xl uppercase tracking-wide text-indigo-500 font-semibold'>Remaster</label>
+                        <input type="string" name="remaster" id="remaster" className="w-24 bg-gray-300 appearance-none border-2 border-gray-200 rounded  py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500"/>
+                        </div>
+                    </div>
+                </div>
+                <div>
+                    <label htmlFor="image"className='text-2xl w1/6'>Image Cover</label>
+                    <input type="string" name="image" id="image" className=" bg-gray-200 appearance-none border-2 border-gray-200 rounded w-3/6 py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500"/>
                 </div>
                 <div>
-                    <label htmlFor="image">Image Cover</label>
-                    <input type="string" name="image" id="image" />
+                <button className="w-full flex-shrink-0 bg-teal-500 hover:bg-teal-700 border-teal-500 hover:border-teal-700 text-sm border-4 text-white py-1 px-2 rounded"type="submit">
+                    Submit
+                </button>
                 </div>
-                <button type="submit">Submit</button>
             </form>
         </div>
     );