diff --git a/package-lock.json b/package-lock.json
index f237210..94767e4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-icons": "^4.11.0",
         "react-router-dom": "^6.15.0",
         "styled-components": "^6.0.7",
         "styled-reset": "^4.5.1",
@@ -4936,6 +4937,14 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-icons": {
+      "version": "4.11.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.11.0.tgz",
+      "integrity": "sha512-V+4khzYcE5EBk/BvcuYRq6V/osf11ODUM2J8hg2FDSswRrGvqiYUYPRy4OdrWaQOBj4NcpJfmHZLNaD+VH0TyA==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
diff --git a/package.json b/package.json
index 699cfce..4bf1b2a 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
   "dependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^4.11.0",
     "react-router-dom": "^6.15.0",
     "styled-components": "^6.0.7",
     "styled-reset": "^4.5.1",
diff --git a/src/MissionCertification.css b/src/MissionCertification.css
index 9b06541..b9975f1 100644
--- a/src/MissionCertification.css
+++ b/src/MissionCertification.css
@@ -1,25 +1,72 @@
 /* MissionCertification.css */
 
 .mission-header {
-    background-color: #007bff; /* 바의 배경색을 원하는 색상으로 설정합니다. */
-    color: #fff; /* 텍스트 색상을 흰색 또는 원하는 색상으로 설정합니다. */
+    background-color: #fff; /* 바 배경색 설정 */
+    color: #000; /* 텍스트 색상 */
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 10px;
+    border-bottom: 1px solid #ccc; /* 상단바 그레이 구분선 */
   }
   
   .mission-header-content {
-    font-size: 24px; /* 헤더 텍스트의 글자 크기를 조절합니다. */
-    font-weight: bold; /* 텍스트를 볼드체로 설정합니다. */
+    font-size: 24px; /* 헤더 텍스트의 글자 크기 */
   }
   
   .icon-button {
     background: none;
     border: none;
-    color: #fff; /* 아이콘 색상을 흰색 또는 원하는 색상으로 설정합니다. */
-    font-size: 24px; /* 아이콘 크기를 조절합니다. */
+    color: #000; /* 아이콘 색상*/
+    font-size: 24px; /* 아이콘 크기 */
     cursor: pointer;
-    margin-right: 10px; /* 아이콘 간의 간격을 조절합니다. */
+    margin-right: 10px; /* 아이콘 간의 간격을 조절 */
   }
-  
\ No newline at end of file
+
+/* 미션인증 글씨 스타일 */
+.ms-txt{
+    font-size: 24px; 
+    font-weight: bold;
+}
+  
+
+
+
+/* 하단바 스타일 */
+.bottom-bar {
+    position: fixed; /* 화면 하단에 고정 */
+    bottom: 0; /* 하단에 위치 */
+    width: 28%; /* 화면 가로폭에 맞게 너비 설정 */
+    border-top: 1px solid #ccc; /* 상단과 구분하는 그레이 선 추가 */
+    padding: 20px;
+    text-align: center;
+    display: flex;
+    justify-content: center; /* 가로 가운데 정렬 */
+    align-items: center; /* 세로 가운데 정렬 */
+  }
+  
+  
+  
+  /* 업로드 버튼 스타일 */
+  .upload-button {
+    width: 100%;
+    background-color: #02B550; /* 녹색 배경색을 원하는 색상으로 설정 */
+    color: #fff; /* 버튼 텍스트 색상 */
+    border: none;
+    border-radius: 50px; /* 버튼을 타원형으로 만들기 위한 값 */
+    padding: 20px 20px; /* 버튼 내부 여백 설정 */
+    font-size: 16px;
+    cursor: pointer;
+  }
+  
+  /* 업로드 버튼에 호버 효과 추가 (선택 사항) */
+  .upload-button:hover {
+    background-color: #45a049; /* 마우스 호버 시 배경색 변경 */
+  }
+  
+ 
+  
+  
+  
+  
+  
diff --git a/src/MissionCertification.jsx b/src/MissionCertification.jsx
index 35d10d9..1a5b696 100644
--- a/src/MissionCertification.jsx
+++ b/src/MissionCertification.jsx
@@ -2,7 +2,9 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 // import './index.css';
 import './MissionCertification.css';
-// import { FaArrowLeft, FaTimes } from 'react-icons/fa'; // 아이콘 라이브러리에서 아이콘을 가져오기.
+import { FaArrowLeft, FaTimes } from 'react-icons/fa'; // 아이콘 라이브러리에서 아이콘을 가져오기.
+
+
 
 function MissionCertification() {
   const handleGoBack = () => {
@@ -15,21 +17,33 @@ function MissionCertification() {
   };
 
   return (
-    <header className="mission-header">
-      <div className="mission-header-content">
-        <button className="icon-button" onClick={handleGoBack}>
-          {/* 이전 페이지로 가는 아이콘 */}
-          {/* <FaArrowLeft />  */}
-        </button>
-        미션 인증
+    <div>
+      {/* 상단 바 부분 시작!---------------------------------------- */}
+      <header className="mission-header">
+        <div className="mission-header-content">       
+          <button className="icon-button" onClick={handleGoBack}>
+            {/* 이전 페이지로 가는 아이콘 */}
+            <FaArrowLeft />
+          </button>
+        </div>
+        
+        <div className="ms-txt">미션인증</div>
+            
         <button className="icon-button" onClick={handleClose}>
           {/* 화면을 닫는 아이콘 */}
-          {/* <FaTimes /> */}
+          <FaTimes />
         </button>
-      </div>
-    </header>
+      </header>
+      {/* 상단 바 부분 끝!---------------------------------------- */}
+      
+      <footer className="bottom-bar">
+        <button className="upload-button">챌린지 피드에 업로드하기</button>
+      </footer>
+    </div>
   );
+  
 }
+  
 
 export default MissionCertification;