diff --git a/client/package-lock.json b/client/package-lock.json
index 281383df..00f65616 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -38,8 +38,9 @@
         "html-webpack-plugin": "^5.5.1",
         "prettier": "^2.8.8",
         "style-loader": "^3.3.2",
+        "typescript": "^5.0.4",
         "webpack": "^5.81.0",
-        "webpack-cli": "^5.1.1",
+        "webpack-cli": "^5.1.4",
         "webpack-dev-server": "^4.13.3"
       }
     },
@@ -2439,9 +2440,9 @@
       }
     },
     "node_modules/@webpack-cli/configtest": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-2.1.0.tgz",
-      "integrity": "sha512-K/vuv72vpfSEZoo5KIU0a2FsEoYdW0DUMtMpB5X3LlUwshetMZRZRxB7sCsVji/lFaSxtQQ3aM9O4eMolXkU9w==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-2.1.1.tgz",
+      "integrity": "sha512-wy0mglZpDSiSS0XHrVR+BAdId2+yxPSoJW8fsna3ZpYSlufjvxnP4YbKTCBZnNIcGN4r6ZPXV55X4mYExOfLmw==",
       "dev": true,
       "engines": {
         "node": ">=14.15.0"
@@ -2452,9 +2453,9 @@
       }
     },
     "node_modules/@webpack-cli/info": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-2.0.1.tgz",
-      "integrity": "sha512-fE1UEWTwsAxRhrJNikE7v4EotYflkEhBL7EbajfkPlf6E37/2QshOy/D48Mw8G5XMFlQtS6YV42vtbG9zBpIQA==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-2.0.2.tgz",
+      "integrity": "sha512-zLHQdI/Qs1UyT5UBdWNqsARasIA+AaF8t+4u2aS2nEpBQh2mWIVb8qAklq0eUENnC5mOItrIB4LiS9xMtph18A==",
       "dev": true,
       "engines": {
         "node": ">=14.15.0"
@@ -2465,9 +2466,9 @@
       }
     },
     "node_modules/@webpack-cli/serve": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-2.0.4.tgz",
-      "integrity": "sha512-0xRgjgDLdz6G7+vvDLlaRpFatJaJ69uTalZLRSMX5B3VUrDmXcrVA3+6fXXQgmYz7bY9AAgs348XQdmtLsK41A==",
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-2.0.5.tgz",
+      "integrity": "sha512-lqaoKnRYBdo1UgDX8uF24AfGMifWK19TxPmM5FHc2vAGxrJ/qtyUyFBWoY1tISZdelsQ5fBcOusifo5o5wSJxQ==",
       "dev": true,
       "engines": {
         "node": ">=14.15.0"
@@ -8156,6 +8157,19 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/typescript": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.0.4.tgz",
+      "integrity": "sha512-cW9T5W9xY37cc+jfEnaUvX91foxtHkza3Nw3wkoF4sSlKn0MONdkdEndig/qPBWXNkmplh3NzayQzCiHM4/hqw==",
+      "dev": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=12.20"
+      }
+    },
     "node_modules/unbox-primitive": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
@@ -8376,15 +8390,15 @@
       }
     },
     "node_modules/webpack-cli": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-5.1.1.tgz",
-      "integrity": "sha512-OLJwVMoXnXYH2ncNGU8gxVpUtm3ybvdioiTvHgUyBuyMLKiVvWy+QObzBsMtp5pH7qQoEuWgeEUQ/sU3ZJFzAw==",
+      "version": "5.1.4",
+      "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-5.1.4.tgz",
+      "integrity": "sha512-pIDJHIEI9LR0yxHXQ+Qh95k2EvXpWzZ5l+d+jIo+RdSm9MiHfzazIxwwni/p7+x4eJZuvG1AJwgC4TNQ7NRgsg==",
       "dev": true,
       "dependencies": {
         "@discoveryjs/json-ext": "^0.5.0",
-        "@webpack-cli/configtest": "^2.1.0",
-        "@webpack-cli/info": "^2.0.1",
-        "@webpack-cli/serve": "^2.0.4",
+        "@webpack-cli/configtest": "^2.1.1",
+        "@webpack-cli/info": "^2.0.2",
+        "@webpack-cli/serve": "^2.0.5",
         "colorette": "^2.0.14",
         "commander": "^10.0.1",
         "cross-spawn": "^7.0.3",
@@ -10574,23 +10588,23 @@
       }
     },
     "@webpack-cli/configtest": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-2.1.0.tgz",
-      "integrity": "sha512-K/vuv72vpfSEZoo5KIU0a2FsEoYdW0DUMtMpB5X3LlUwshetMZRZRxB7sCsVji/lFaSxtQQ3aM9O4eMolXkU9w==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-2.1.1.tgz",
+      "integrity": "sha512-wy0mglZpDSiSS0XHrVR+BAdId2+yxPSoJW8fsna3ZpYSlufjvxnP4YbKTCBZnNIcGN4r6ZPXV55X4mYExOfLmw==",
       "dev": true,
       "requires": {}
     },
     "@webpack-cli/info": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-2.0.1.tgz",
-      "integrity": "sha512-fE1UEWTwsAxRhrJNikE7v4EotYflkEhBL7EbajfkPlf6E37/2QshOy/D48Mw8G5XMFlQtS6YV42vtbG9zBpIQA==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-2.0.2.tgz",
+      "integrity": "sha512-zLHQdI/Qs1UyT5UBdWNqsARasIA+AaF8t+4u2aS2nEpBQh2mWIVb8qAklq0eUENnC5mOItrIB4LiS9xMtph18A==",
       "dev": true,
       "requires": {}
     },
     "@webpack-cli/serve": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-2.0.4.tgz",
-      "integrity": "sha512-0xRgjgDLdz6G7+vvDLlaRpFatJaJ69uTalZLRSMX5B3VUrDmXcrVA3+6fXXQgmYz7bY9AAgs348XQdmtLsK41A==",
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-2.0.5.tgz",
+      "integrity": "sha512-lqaoKnRYBdo1UgDX8uF24AfGMifWK19TxPmM5FHc2vAGxrJ/qtyUyFBWoY1tISZdelsQ5fBcOusifo5o5wSJxQ==",
       "dev": true,
       "requires": {}
     },
@@ -14764,6 +14778,12 @@
         "is-typed-array": "^1.1.9"
       }
     },
+    "typescript": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.0.4.tgz",
+      "integrity": "sha512-cW9T5W9xY37cc+jfEnaUvX91foxtHkza3Nw3wkoF4sSlKn0MONdkdEndig/qPBWXNkmplh3NzayQzCiHM4/hqw==",
+      "dev": true
+    },
     "unbox-primitive": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
@@ -14917,15 +14937,15 @@
       }
     },
     "webpack-cli": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-5.1.1.tgz",
-      "integrity": "sha512-OLJwVMoXnXYH2ncNGU8gxVpUtm3ybvdioiTvHgUyBuyMLKiVvWy+QObzBsMtp5pH7qQoEuWgeEUQ/sU3ZJFzAw==",
+      "version": "5.1.4",
+      "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-5.1.4.tgz",
+      "integrity": "sha512-pIDJHIEI9LR0yxHXQ+Qh95k2EvXpWzZ5l+d+jIo+RdSm9MiHfzazIxwwni/p7+x4eJZuvG1AJwgC4TNQ7NRgsg==",
       "dev": true,
       "requires": {
         "@discoveryjs/json-ext": "^0.5.0",
-        "@webpack-cli/configtest": "^2.1.0",
-        "@webpack-cli/info": "^2.0.1",
-        "@webpack-cli/serve": "^2.0.4",
+        "@webpack-cli/configtest": "^2.1.1",
+        "@webpack-cli/info": "^2.0.2",
+        "@webpack-cli/serve": "^2.0.5",
         "colorette": "^2.0.14",
         "commander": "^10.0.1",
         "cross-spawn": "^7.0.3",
diff --git a/client/package.json b/client/package.json
index a7536fd3..06f1cbd0 100644
--- a/client/package.json
+++ b/client/package.json
@@ -28,8 +28,9 @@
     "html-webpack-plugin": "^5.5.1",
     "prettier": "^2.8.8",
     "style-loader": "^3.3.2",
+    "typescript": "^5.0.4",
     "webpack": "^5.81.0",
-    "webpack-cli": "^5.1.1",
+    "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.13.3"
   },
   "dependencies": {
diff --git a/client/public/github.png b/client/public/github.png
new file mode 100644
index 00000000..50b81752
Binary files /dev/null and b/client/public/github.png differ
diff --git a/client/src/common/Footer.js b/client/src/common/Footer.js
index 4e98e9a9..3f16ad39 100644
--- a/client/src/common/Footer.js
+++ b/client/src/common/Footer.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import FooterStyle from '../style/FooterStyle';
-import { RxNotionLogo } from 'react-icons/rx';
-import { GoMarkGithub } from 'react-icons/go';
+// import { RxNotionLogo } from 'react-icons/rx';
+// import { GoMarkGithub } from 'react-icons/go';
 
 function Footer() {
   return (
@@ -10,7 +10,7 @@ function Footer() {
         <div className="content-template">
           <div className="content">
             <div className="Team">
-              <h4 className="Teamh4">Front-End</h4>
+              <div className="Teamh4">FE🧃</div>
               <ul className="Teamul">
                 <li>
                   <a
@@ -20,7 +20,7 @@ function Footer() {
                   >
                     <img
                       className="profile-icon"
-                      src="https://user-images.githubusercontent.com/82639552/235307158-1cb6146d-53a1-4c06-9f8e-9ab3b6557199.jpg"
+                      src="https://github.com/yeomdogyeong.png"
                       alt="Profile icon"
                     />
                   </a>
@@ -35,7 +35,7 @@ function Footer() {
                   >
                     <img
                       className="profile-icon"
-                      src="https://user-images.githubusercontent.com/82639552/235307301-f1f52c06-781b-43ff-9493-d9e69c7ea118.jpg"
+                      src="https://github.com/ggggggggithub.png"
                       alt="Profile icon"
                     />
                   </a>
@@ -49,7 +49,7 @@ function Footer() {
                   >
                     <img
                       className="profile-icon"
-                      src="https://user-images.githubusercontent.com/82639552/235307316-087601a2-bf93-4bf3-a7b1-b128243ef242.jpg"
+                      src="https://github.com/nowaveosu.png"
                       alt="Profile icon"
                     />
                   </a>
@@ -63,7 +63,7 @@ function Footer() {
                   >
                     <img
                       className="profile-icon"
-                      src="https://user-images.githubusercontent.com/82639552/235307329-5a37c265-ec9d-4a63-acd3-e3d5f69068b0.jpg"
+                      src="https://github.com/wlsljh0516.png"
                       alt="Profile icon"
                     />
                   </a>
@@ -72,7 +72,7 @@ function Footer() {
               </ul>
             </div>
             <div className="Team">
-              <h4 className="Teamh4">Back-End</h4>
+              <div className="Teamh4">BE🧃</div>
               <ul className="Teamul">
                 <li>
                   <a
@@ -82,7 +82,7 @@ function Footer() {
                   >
                     <img
                       className="profile-icon"
-                      src="https://user-images.githubusercontent.com/82639552/235307385-877084c4-1a4d-4b61-9c2c-eec712e6bb3e.jpg"
+                      src="https://github.com/Sniij.png"
                       alt="Profile icon"
                     />
                   </a>
@@ -97,7 +97,7 @@ function Footer() {
                   >
                     <img
                       className="profile-icon"
-                      src="https://user-images.githubusercontent.com/82639552/235307351-71145bf5-c902-434b-90e3-9563385b9c71.jpg"
+                      src="https://github.com/insooY.png"
                       alt="Profile icon"
                     />
                   </a>
@@ -111,7 +111,7 @@ function Footer() {
                   >
                     <img
                       className="profile-icon"
-                      src="https://user-images.githubusercontent.com/82639552/235307360-cd8e5f1d-ee0c-4295-bad2-278d072ccd5e.jpg"
+                      src="https://github.com/Gitdonghee.png"
                       alt="Profile icon"
                     />
                   </a>
@@ -120,7 +120,7 @@ function Footer() {
               </ul>
             </div>
             <div className="teamContent">
-              <div className="teamLogo">
+              {/* <div className="teamLogo">
                 <img
                   src="https://camo.githubusercontent.com/dc42bd7ca030fc716579172fe7e093a7e510bd149987a7f5b6ed50b116343a88/68747470733a2f2f63617073756c652d72656e6465722e76657263656c2e6170702f6170693f747970653d776176696e6726636f6c6f723d6175746f266865696768743d3330302673656374696f6e3d68656164657226746578743d25454225423025393825454225414625423825454325424425413925323026666f6e7453697a653d3735"
                   alt="teamLogo"
@@ -129,21 +129,27 @@ function Footer() {
                 <span className="Teamspan">
                   Team. <strong>반미콩</strong>
                 </span>
-              </div>
+              </div> */}
               <div className="linkSNS">
-                <a
+                {/* <a
                   href="https://www.notion.so/codestates/db25eab5a8684b1786324e6cd8724852"
                   target="_blank"
                   rel="noreferrer"
                 >
-                  <RxNotionLogo size={25} />
-                </a>
+                  <RxNotionLogo size={33} />
+                </a> */}
                 <a
                   href="https://github.com/codestates-seb/seb43_main_009"
                   target="_blank"
                   rel="noreferrer"
                 >
-                  <GoMarkGithub size={25} />
+                  <img
+                    className="github-icon"
+                    src="https://cdn.pixabay.com/photo/2022/01/30/13/33/github-6980894_1280.png"
+                    alt="Profile icon"
+                  />
+
+                  {/* <GoMarkGithub size={33} /> */}
                 </a>
               </div>
             </div>
diff --git a/client/src/common/Layout.js b/client/src/common/Layout.js
index 1464d666..758aef60 100644
--- a/client/src/common/Layout.js
+++ b/client/src/common/Layout.js
@@ -2,15 +2,20 @@ import React from 'react';
 import Footer from './Footer';
 import Header from './Header';
 import { MainContent } from '../style/LayoutStyle';
+import styled from 'styled-components';
+
+const LayoutStyle = styled.div`
+  min-height: 100vh; // 뷰포트 높이의 100%를 최소 높이로 설정
+`;
 
 const Layout = (props) => {
   const { children } = props;
   return (
-    <>
+    <LayoutStyle>
       <Header />
       <MainContent>{children}</MainContent>
       <Footer />
-    </>
+    </LayoutStyle>
   );
 };
 
diff --git a/client/src/style/FooterStyle.js b/client/src/style/FooterStyle.js
index 0b066ea1..35e02cef 100644
--- a/client/src/style/FooterStyle.js
+++ b/client/src/style/FooterStyle.js
@@ -3,28 +3,25 @@ import '../variables.css';
 
 const FooterStyle = styled.footer`
   position: relative;
-  height: 100%;
-  font-family: 'Noto Sans KR', sans-serif;
+  font-family: 'MaplestoryOTFBold';
+
   li {
     color: #000000;
     display: inline-block;
     text-align: center;
-    margin: 0px 10px;
-  }
-  h3 {
-    font-size: 25px;
-    font-weight: bold;
-    margin-left: 1em;
+    margin: 5px 30px;
   }
-  h4 {
-    font-size: 20px;
-    font-weight: bold;
-    margin-bottom: 20px;
+
+  .Teamh4 {
+    margin-left: 10px;
+    font-size: 10px;
+    margin-top: 10px;
   }
   li > span {
     display: block;
     text-align: center;
-    font-size: 20px;
+    font-size: 13px;
+    color: gray;
     @media only screen and (max-width: 768px) {
       font-size: 10px;
     }
@@ -38,7 +35,7 @@ const FooterStyle = styled.footer`
     background-color: var(--blackalpha-800);
   }
   .content {
-    background-color: #d9d9d9;
+    border-top: 1px solid #e0e0e0;
     width: 100%;
     display: flex;
     justify-content: space-around;
@@ -59,18 +56,17 @@ const FooterStyle = styled.footer`
     flex-direction: column;
   }
   .Teamul {
-    height: auto;
     display: flex;
-    padding-inline-start: 0;
+    /* padding-inline-start: 0; */
   }
   .Teamh4 {
-    font-size: 20px;
+    font-size: 15px;
     @media only screen and (max-width: 768px) {
       font-size: 10px;
     }
   }
   .Teamspan {
-    font-size: 20px;
+    font-size: 15px;
     @media only screen and (max-width: 768px) {
       font-size: 15px;
     }
@@ -84,6 +80,13 @@ const FooterStyle = styled.footer`
       height: 50px;
     }
   }
+
+  .github-icon {
+    width: 30px;
+    height: 30px;
+    border-radius: 50px;
+  }
+
   .footerLogo {
     display: flex;
     justify-content: center;
@@ -134,22 +137,22 @@ const FooterStyle = styled.footer`
     }
   }
   .linkSNS {
-    width: 70px;
     display: flex;
     flex-direction: column;
-    justify-content: space-around;
+    justify-content: center;
     align-items: center;
   }
   .linkSNS > a {
     padding: 5px;
     border-radius: 50%;
     color: var(--white);
-    border: 1px solid var(--gray-600);
     cursor: pointer;
   }
   .linkSNS > a:hover {
     color: var(--blackalpha-900);
     background: var(--white);
+    transform: scale(1.1);
+    transition: transform 0.3s ease;
   }
 `;
 
diff --git a/client/src/style/HeaderStyle.js b/client/src/style/HeaderStyle.js
index 4e1f04f7..580b3dfa 100644
--- a/client/src/style/HeaderStyle.js
+++ b/client/src/style/HeaderStyle.js
@@ -67,7 +67,7 @@ export const Menu = styled.div`
   }
   &.selected {
     color: #f05758;
-    border-bottom 2px solid #f05758;  
+    border-bottom: 2px solid #f05758;
   }
 `;