diff --git a/front/src/assets/explains.json b/front/src/assets/explains.json
index 492e8f0185db201ffde2694588a78d7304fc698c..9b45d0b7e490750264983caa39c776b96406a8db 100644
--- a/front/src/assets/explains.json
+++ b/front/src/assets/explains.json
@@ -1,4 +1,7 @@
 [
+    {
+        "name": ""
+    },
     {
         "id" : "calf",
         "name" : "가자미근 (Soleus muscle)",
@@ -43,6 +46,7 @@
         "source" : "[네이버 지식백과] [삼각근](https://terms.naver.com/entry.naver?docId=1109047) [deltoid muscle, 三角筋] (두산백과 두피디아, 두산백과)"
     },
     {
+        "id" : "back-arm",
         "name" : "삼두근 (Triceps Brachii)",
         "explains" : "삼두근은 팔꿈치 뒤쪽에 위치한 근육으로, 팔꿈치를 펴는 역할을 합니다. 팔꿈치를 굽히고 펴는 동작에서 삼두근은 팔이두근과 함께 작용하며 팔꿈치를 수축하는 기능을 수행합니다. 이 근육은 팔꿈치를 펴는 것뿐만 아니라, 어깨 근육의 수축을 도와 팔이 몸통 쪽으로 움직이는 동작을 가능하게 합니다. 삼두근을 강화하면 팔꿈치를 펴는 힘이 강해지고 팔의 전반적인 힘과 형태가 개선됩니다. 대표적인 강화 운동으로는 트라이셉스 푸시다운, 트라이셉스 익스텐션, 덤벨 킥백 등이 있습니다.",
         "source" : "[네이버 지식백과] [팔삼두근](https://terms.naver.com/entry.naver?docId=1109933) [triceps brachii muscle] (두산백과 두피디아, 두산백과)"
@@ -54,16 +58,19 @@
         "source" : "[네이버 지식백과] [등근육](https://terms.naver.com/entry.naver?docId=938722) [muscles of back] (서울대학교병원 신체기관정보)"
     },
     {
+        "id" : "arm",
         "name" : "전완근 (Forearm Muscles)",
         "explains" : "전완근은 팔꿈치에서 손목 사이에 위치한 근육을 의미합니다. 이 근육은 다중관절근육으로 손을 펴고 쥐는 동작, 손목을 움직여 손을 올리고 내리는 동작, 팔꿈치를 움직여 아래팔을 올리고 내리는 역할을 합니다. 전완근을 강화하면 손목의 힘이 증가하고, 손목 부상 예방에 도움이 됩니다. 전완근을 강화하는 대표적인 운동으로는 바벨 컬, 리스트 등이 있으며 이 운동들은 전완근을 효과적으로 발달시킬 수 있습니다.",
         "source" : "[네이버 지식백과] [전완근](https://terms.naver.com/entry.naver?docId=6209915) (건강용어사전)"
     },
     {
+        "id" : "biceps",
         "name" : "이두근 (Biceps Brachii)",
         "explains" : "이두근(biceps brachii)은 팔꿈치 위쪽에 위치한 주요 근육으로, 팔꿈치를 굽히는 동작과 팔을 회전시키는 역할을 합니다. 이 근육은 팔꿈치 굴곡을 도와 물건을 들어 올리거나 팔꿈치를 구부리는 동작에서 작용하기에 많은 운동에서 중요한 역할을 합니다. 예를 들어, 수영, 조정, 레슬링 등 다양한 스포츠에서 이두근의 강화는 성능을 향상시키는 데 기여하게 됩니다. 이두근이 약하면 던지기, 밀기, 들기 등 기능을 수행하기가 어려워집니. 이두근을 강화하기 위한 대표적인 운동으로는 덤벨 컬, 바벨 컬, 프리처 컬 등이 있으며, 이 운동들은 이두근을 효과적으로 발달시킬 수 있습니다.",
         "source" : "[네이버 지식백과] [위팔 두 갈래근](https://terms.naver.com/entry.naver?docId=1109934) [biceps brachii muscle] (두산백과 두피디아, 두산백과)"
     },
     {
+        "id" : "hamstring", 
         "name" : "햄스트링 (Hamstring Muscles)",
         "explains" : "햄스트링은 허벅지 뒤쪽 부분의 엉덩이와 무릎관절을 연결하는 반건양근, 반막양근, 대퇴이두근 등 3개의 근육으로 이루어져있으며 걷기, 달리기, 점프하기, 볼기의 움직임 조절과 같은 여러 일상적인 활동을 할 때 햄스트링 사용됩니다. 햄스트링을 강화하는 것은 전반적인 다리의 안정성과 부상을 예방하는 데 매우 중요합니다. 대표적인 운동으로는 데드리프트, 런지, 레그 컬 등이 있는데 이를 통해 햄스트링을 효과적으로 발달시킬 수 있습니다.",
         "source" : "[네이버 지식백과] [햄스트링](https://terms.naver.com/entry.naver?docId=933587) (시사상식사전, pmg 지식엔진연구소)"
diff --git a/front/src/components/index.css b/front/src/components/index.css
index b08833fbca870cf1107f6ae537fc405a2d0bd98d..db03726db9128656670ac7cc07edac5836b5f6a7 100644
--- a/front/src/components/index.css
+++ b/front/src/components/index.css
@@ -53,9 +53,6 @@ ul{
     margin: 5px;
     text-align: center;
 }
-  
-.center{
-    display: flex;
 
 .col{
     display: flex;
@@ -63,6 +60,7 @@ ul{
 }
 
 .center{
+    display: flex;
     justify-content: center;
     align-items: center;
 }
@@ -135,7 +133,9 @@ ul{
 }
 
 #clickBlock{
-    width: 15em;
+    width: 25em;
+    max-height: 8.5em;
+}
 
 #videoSelection{
     background-color: #CFFF5E;
@@ -299,4 +299,14 @@ input[type='radio']:checked {
 
 .addbutton{
     align-self: center;
-}
\ No newline at end of file
+}
+
+.round-input{
+    width: 28vw;
+    min-width: 20rem;
+    height: 4.5vh;
+    border:none;
+    border-radius: 10em;
+    background-color: lightgray;
+    margin: 10px;
+}
diff --git a/front/src/components/user/SignIn.jsx b/front/src/components/user/SignIn.jsx
index c6d2dfa89869c6f588261accfc5b73e584307fa3..cabca0540934c8936384bfe0ec237685587390f2 100644
--- a/front/src/components/user/SignIn.jsx
+++ b/front/src/components/user/SignIn.jsx
@@ -27,8 +27,8 @@ function SignIn(){
     return (
         <form id="signInForm" className="rightmove" onSubmit={handleSignIn}>
             <label id="title">Sign In</label>
-            <input type="text" name="id" placeholder='ID' onChange={(e) => setUserId(e.target.value)} value={userId}></input>
-            <input type="password" name="pw" placeholder='PW'onChange={(e) => setPassword(e.target.value)} value={password}></input>
+            <input type="text" name="id" placeholder='ID' className="round-input" onChange={(e) => setUserId(e.target.value)} value={userId}></input>
+            <input type="password" name="pw" placeholder='PW'className="round-input" onChange={(e) => setPassword(e.target.value)} value={password}></input>
             <button type="submit">sign in</button>
         </form>
     );
diff --git a/front/src/components/user/SignUp.jsx b/front/src/components/user/SignUp.jsx
index 5c20cdf557e3d9da7c655f660c7dba68df91c4c1..811b7e0e75872ad8831c94bc5de2e903889ae0ba 100644
--- a/front/src/components/user/SignUp.jsx
+++ b/front/src/components/user/SignUp.jsx
@@ -48,16 +48,16 @@ function SignUp(){
         <>
             <form id="signUpForm" className='leftmove' onSubmit={handleSignUp}>
                 <label id="title">Sign Up</label>
-                <input required type="text" name="name" placeholder='성함' value={userName}
+                <input required type="text" name="name" placeholder='성함' value={userName} className="round-input" 
                         onChange={(e) => setUserName(e.target.value)}></input>
-                <input required type="text" name="id" placeholder='ID' value={userId}
+                <input required type="text" name="id" placeholder='ID' value={userId} className="round-input" 
                         onChange={(e) => setUserId(e.target.value)} ></input>
-                <input required type="password" name="pw" placeholder='PW' value={password}
+                <input required type="password" name="pw" placeholder='PW' value={password} className="round-input" 
                         onChange={(e) => setPassword(e.target.value)}></input>
-                <input required type="password" name="pwConfirm" placeholder='PW를 한번 더 입력해주세요' 
+                <input required type="password" name="pwConfirm" placeholder='PW를 한번 더 입력해주세요' className="round-input" 
                         onChange={handleConfirm}></input>
                 <p style={{color: 'red'}}>{warning}</p>
-                <input required type="email" name="email" placeholder='이메일' value={email}
+                <input required type="email" name="email" placeholder='이메일' value={email} className="round-input" 
                         onChange={(e) => setEmail(e.target.value)}></input>
                 <div className='inputbox'>
                     <label>남</label>
@@ -67,7 +67,7 @@ function SignUp(){
                 </div>
                 <div className='inputbox'>
                     <label>생년월일</label>
-                    <input type="date" placeholder="생년월일" name="birthdate" value={birthdate} onChange={(e) => setBirthdate(e.target.value)}></input>
+                    <input type="date" placeholder="생년월일" name="birthdate" value={birthdate} className="round-input" onChange={(e) => setBirthdate(e.target.value)}></input>
                 </div>
                 {/* <div style={{display: "flex", width: "30em", justifyContent: "center"}}>
                     <input id="age" type="number" name="age" placeholder='나이'></input>
diff --git a/front/src/components/workout/VideoSelection.jsx b/front/src/components/workout/VideoSelection.jsx
index 16c906377d20f7fc85133f4e294ac6d485914aae..8ace8a131a5820cdb8257979b5734e7040782f0f 100644
--- a/front/src/components/workout/VideoSelection.jsx
+++ b/front/src/components/workout/VideoSelection.jsx
@@ -5,10 +5,10 @@ import SelectBtn from './SelectBtn';
 function VideoSelection({dispatch, setSelected}){
     const [warning, setWarning] = useState();
 
-    const [startMin, setStartMin] = useState(0);
-    const [endMin, setEndMin] = useState(0);
-    const [startSec, setStartSec] = useState(0);
-    const [endSec, setSEndSec] = useState(0);
+    const [startMin, setStartMin] = useState(null);
+    const [endMin, setEndMin] = useState(null);
+    const [startSec, setStartSec] = useState(null);
+    const [endSec, setEndSec] = useState(null);
     const [currentLevel, setCurrentLevel] = useState(null);
 
     const tagRef = useRef([]);
@@ -59,7 +59,10 @@ function VideoSelection({dispatch, setSelected}){
         }
     }
     function handleChange(e){
-        if (e.target.name === 'startMin')   setStartMin(e.target.value?e.target.value:0);
+        if (e.target.name === 'startMin')   setStartMin(e.target.value?e.target.value:null);
+        if (e.target.name === 'startSec')   setStartMin(e.target.value?e.target.value:null);
+        if (e.target.name === 'endMin')   setStartMin(e.target.value?e.target.value:1440);
+        if (e.target.name === 'endSec')   setStartMin(e.target.value?e.target.value:null);
     }
 
     return (
@@ -76,20 +79,20 @@ function VideoSelection({dispatch, setSelected}){
                 <div id="timeSelection" className="col center padding">
                     <h3>시간</h3>
                     <span> 
-                    <input type="text" name="startMin" onChange={handleChange}></input>
-                    {/* <input type="text" name="start"  value={startMin !== null ? startMin : ""}
+                    <input type="number" name="startMin" onChange={handleChange} min={0}></input>
+                    {/* <input type="number" name="start"  value={startMin !== null ? startMin : ""}
                     onChange={(e) => {
                         const value = e.target.value;
                         setStartMin(value === "" ? null : parseInt(value, 10));
                     }}></input> */}
                     <span> 분</span>
-                    <input type="text" name="start" onChange={(e) => setStartSec(parseInt(e.target.value))}></input>
+                    <input type="number" name="start" onChange={(e) => e.target.value === 0 ? setStartSec(null) : setStartSec(e.target.value)} min={0}></input>
                     <span> 초</span>
                     </span>
                     <span> ~
-                    <input type="text" name="end" onChange={(e) => setEndMin(parseInt(e.target.value))}></input>
+                    <input type="number" name="end" onChange={(e) => e.target.value === 1440 ? setEndMin(null) : setEndMin(e.target.value)} min={0}></input>
                     <span> 분 </span>
-                    <input type="text" name="start" onChange={(e) => setSEndSec(parseInt(e.target.value))}></input>
+                    <input type="number" name="start" onChange={(e) => e.target.value === 0 ? setEndSec(null) : e.target.value} min={0}></input>
                     <span> 초</span>
                     </span>
                     <p>{warning}</p>
diff --git a/front/src/pages/MyPage.jsx b/front/src/pages/MyPage.jsx
index aa858db9c88035c9cfa950d4ea9164e882d832d3..2a413cdc272a8a03f946ab16bf4efc8befdfd934 100644
--- a/front/src/pages/MyPage.jsx
+++ b/front/src/pages/MyPage.jsx
@@ -111,6 +111,7 @@ function MyPage(){
                             <input 
                                 type={showPassword ? "text" : "password"} 
                                 name="user_password" 
+                                className="round-input"
                                 onChange={(e) => setNewPW(e.target.value)} 
                                 value={newPW}
                             />
@@ -129,6 +130,7 @@ function MyPage(){
                             <input 
                                 type={showPassword ? "text" : "password"} 
                                 name="confirm_password" 
+                                className="round-input"
                                 onChange={handleConfirm}
                             />
                             <br/>
@@ -141,7 +143,7 @@ function MyPage(){
                     </tr>
                     <tr>
                         <th>이메일</th>
-                        <td><input type="text" name="user_email" onChange={(e) => setUser({...user, user_email: e.target.value})} value={user.user_email}></input></td>
+                        <td><input type="text" name="user_email" className="round-input" onChange={(e) => setUser({...user, user_email: e.target.value})} value={user.user_email}></input></td>
                     </tr>
                     <tr>
                         <th>성별</th>
@@ -149,11 +151,11 @@ function MyPage(){
                     </tr>
                     <tr>
                         <th>키</th>
-                        <td><input type="number" name="user_height" onChange={(e) => setUser({...user, user_height: e.target.value})} value={user.user_height}></input></td>
+                        <td><input type="number" className="round-input" name="user_height" onChange={(e) => setUser({...user, user_height: e.target.value})} value={user.user_height}></input></td>
                     </tr>
                     <tr>
                         <th>몸무게</th>
-                        <td><input type="number" name="user_weight" onChange={(e) => setUser({...user, user_weight: e.target.value})} value={user.user_weight}></input></td>
+                        <td><input type="number" className="round-input" name="user_weight" onChange={(e) => setUser({...user, user_weight: e.target.value})} value={user.user_weight}></input></td>
                     </tr>
                     <tr>
                         <th>가입일시</th>
@@ -192,12 +194,13 @@ function MyPage(){
                                 <input 
                                     type={showPassword ? "text" : "password"} 
                                     onChange={(e) => setNewPW(e.target.value)}
-                                    className="modal-input"
+                                    className="round-input modal-input"
                                 />
                             </div>
                             <div className="modal-checkbox-container">
                                 <input 
                                     type="checkbox" 
+                                    className="round-input"
                                     id="showPasswordCheckbox"
                                     checked={showPassword}
                                     onChange={() => setShowPassword(!showPassword)}
diff --git a/front/src/pages/Workout.jsx b/front/src/pages/Workout.jsx
index aa27e9e173c47e0002549b3d493677495234e01b..5d5a618cfd7fbdfa00ac849749b79d93698e7a85 100644
--- a/front/src/pages/Workout.jsx
+++ b/front/src/pages/Workout.jsx
@@ -9,9 +9,6 @@ import { getEntireVideos, searchVideos} from '../api/workoutAPI';
 
 
 function Explains({data, selected}){
-    //conditional Rendering -> handleClick에서 들어온 input의 처리결과 띄우기
-    //h1으로 제목
-    //p로 설명
     return (
         <div id="explains">
             <h1>{explain.find(item => item.id === selected)?.name}</h1>
diff --git a/front/src/pages/index.css b/front/src/pages/index.css
index 988ebc9e8dbde6195161436f3700461a4f86e91a..4ef7bee642fb442da19014dfccd285be78c79768 100644
--- a/front/src/pages/index.css
+++ b/front/src/pages/index.css
@@ -27,7 +27,7 @@ aside{
 } */
 
 #title{
-    font-size: 3em;
+    font-size: 2.5em;
     font-weight: 900;
     padding: 0 0 2vw 0 ;
 }
@@ -61,7 +61,7 @@ form {
     margin: 10px;
 }
 
-input{
+.round-input{
     width: 28vw;
     min-width: 20rem;
     height: 4.5vh;