diff --git a/components/footer/footer.jsx b/components/footer/footer.jsx
index 09b9061..c78ed9d 100644
--- a/components/footer/footer.jsx
+++ b/components/footer/footer.jsx
@@ -1,31 +1,34 @@
 import styles from '/components/footer/footer.module.css'
+import Link from 'next/link'
+
 
 export default function Footer() {
-  return (
-    <footer className={styles.footer}>
+    return (
+        <footer className={styles.footer}>
             <div className={styles.social}>
-                <a href="#"><i className="fab fa-instagram"></i></a>
-                <a href="#"><i className="fab fa-twitter"></i></a>
-                <a href="https://github.com/suzusou"><i className="fab fa-github"></i></a>
-                <a href="#"><i className="fab fa-facebook"></i></a>
+                <Link href="/" legacyBehavior><a> <i className="fab fa-instagram"></i></a></Link>
+                <Link href="/" legacyBehavior><a><i className="fab fa-twitter"></i></a></Link>
+                <Link href="https://github.com/suzusou" legacyBehavior><a><i className="fab fa-github"></i></a></Link>
+                <Link href="/" legacyBehavior><a><i className="fab fa-facebook"></i></a></Link>
             </div>
 
             <ul className={styles.list}>
                 <li>
-                    <a href="#">Section1</a>
+                <Link href="/" > Section1</Link>
                 </li>
                 <li>
-                    <a href="#">Section2</a>
+                <Link href="/" > Section2</Link>
                 </li>
                 <li>
-                    <a href="#">Section3</a>
+                <Link href="/" > Section3</Link>
                 </li>
                 <li>
-                    <a href="#">Section4</a>
+                <Link href="/" > Section4</Link>
                 </li>
                 <li>
-                    <a href="#">Section5</a>
+                <Link href="/" > Section5</Link>
                 </li>
+                
                 <p className={styles.copyright}>
                     S.S-20220219 @ 2023
                 </p>
@@ -33,5 +36,5 @@ export default function Footer() {
 
         </footer>
 
-  )
+    )
 }
diff --git a/components/header/header.jsx b/components/header/header.jsx
index 90adfb5..b34ae03 100644
--- a/components/header/header.jsx
+++ b/components/header/header.jsx
@@ -1,33 +1,36 @@
 import styles from '/components/header/header.module.css'
+import Link from 'next/link'
 
 export default function Header() {
-  return (
-    <header className={styles.header}>
+    return (
+        <header className={styles.header}>
             <div className={styles.container}>
                 <div className={styles.area_logo_header}>
-                    <a className={styles.logo}href="https://github.com/suzusou">
-                        <div className={styles.logo_name}>Sample Site</div>
-                    </a>
+                    <Link href="https://github.com/suzusou" legacyBehavior>
+                        <a className={styles.logo} >
+                            <div className={styles.logo_name}>Sample Site</div>
+                        </a>
+                    </Link>
                 </div>
-                
+
                 <nav className={styles.area_nav_header}>
                     <ul className={styles.list_nav_header}>
                         <li className={styles.lists}>
-                            <a href="" className={styles.list1}>Section1</a>
+                            <Link href="/" >Section1</Link>
                         </li>
                         <li className={styles.lists}>
-                            <a href="" className={styles.list2}>Section2</a>
+                            <Link href="/" >Section2</Link>
                         </li>
                         <li className={styles.lists}>
-                            <a href="" className={styles.list3}>Section3</a>
+                            <Link href="/" >Section3</Link>
                         </li>
                         <li className={styles.lists}>
-                            <a href="" className={styles.list4}>Section4</a>
+                            <Link href="/" >Section4</Link>
                         </li>
 
                     </ul>
                 </nav>
             </div>
         </header>
-  )
+    )
 }
diff --git a/components/header/header.module.css b/components/header/header.module.css
index 87141db..d4d923e 100644
--- a/components/header/header.module.css
+++ b/components/header/header.module.css
@@ -40,18 +40,12 @@
     position: relative;
 }
 
-.list1,
-.list2,
-.list3,
-.list4 {
+.lists a {
     display: inline-block;
     color: #111;
 }
 
-.list1::after,
-.list2::after,
-.list3::after,
-.list4::after {
+.lists a::after{
     position: absolute;
     bottom: -4px;
     left: 0;
@@ -64,10 +58,7 @@
     transition: transform .3s;
 }
 
-.list1:hover::after,
-.list2:hover::after,
-.list3:hover::after,
-.list4:hover::after {
+.lists a:hover::after{
     transform: scale(1, 1);
 }
 
@@ -77,10 +68,7 @@
         display: block;
     }
 
-    .list1,
-    .list2,
-    .list3,
-    .list4 {
+    .lists a{
         font-size: 14px;
     }
 
@@ -99,10 +87,7 @@
         margin: 0 0 0 1vw;
     }
 
-    .list1::after,
-    .list2::after,
-    .list3::after,
-    .list4::after {
+    .lists a::after{
         bottom: -2px;
         height: 1.5px;
     }
@@ -116,17 +101,11 @@
         height: 65px;
     }
 
-    .list1,
-    .list2,
-    .list3,
-    .list4 {
+    .lists a {
         font-size: 11px;
     }
 
-    .list1::after,
-    .list2::after,
-    .list3::after,
-    .list4::after {
+    .lists a::after {
         bottom: 0px;
         height: 1px;
     }
diff --git a/package.json b/package.json
index d233f4b..a37ec97 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,10 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.3.0",
+    "@fortawesome/free-regular-svg-icons": "^6.3.0",
+    "@fortawesome/free-solid-svg-icons": "^6.3.0",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "next": "13.2.4",
     "react": "18.2.0",
     "react-dom": "18.2.0"
diff --git a/src/pages/_document.js b/src/pages/_document.js
index 54e8bf3..098dde6 100644
--- a/src/pages/_document.js
+++ b/src/pages/_document.js
@@ -3,7 +3,9 @@ import { Html, Head, Main, NextScript } from 'next/document'
 export default function Document() {
   return (
     <Html lang="en">
-      <Head />
+      <Head>
+      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"></link>
+      </Head>
       <body>
         <Main />
         <NextScript />
diff --git a/src/pages/index.js b/src/pages/index.js
index 9fbddf5..b88dea3 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -1,23 +1,22 @@
 import Head from 'next/head'
-import Header from '../../components/header/header'
-import Contents from '../../components/contents/contents'
-import Footer from '../../components/footer/footer'
-
+import Header from '/components/header/header'
+import Contents from '/components/contents/contents'
+import Footer from '/components/footer/footer'
 
 export default function Home() {
   return (
     <>
       <Head>
-        <title>Create Next App</title>
+        <title>Site Design</title>
         <meta name="description" content="Generated by create next app" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <link rel="icon" href="/favicon.ico" />
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"></link>
       </Head>
 
       < Header />
       <Contents />
       < Footer />
+      
     </>
   )
 }
diff --git a/yarn.lock b/yarn.lock
index 38218ba..bf899e9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,6 +2,39 @@
 # yarn lockfile v1
 
 
+"@fortawesome/fontawesome-common-types@6.3.0":
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.3.0.tgz#51f734e64511dbc3674cd347044d02f4dd26e86b"
+  integrity sha512-4BC1NMoacEBzSXRwKjZ/X/gmnbp/HU5Qqat7E8xqorUtBFZS+bwfGH5/wqOC2K6GV0rgEobp3OjGRMa5fK9pFg==
+
+"@fortawesome/fontawesome-svg-core@^6.3.0":
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.3.0.tgz#b6a17d48d231ac1fad93e43fca7271676bf316cf"
+  integrity sha512-uz9YifyKlixV6AcKlOX8WNdtF7l6nakGyLYxYaCa823bEBqyj/U2ssqtctO38itNEwXb8/lMzjdoJ+aaJuOdrw==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "6.3.0"
+
+"@fortawesome/free-regular-svg-icons@^6.3.0":
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.3.0.tgz#286f87f777e6c96af59151e86647c81083029ee2"
+  integrity sha512-cZnwiVHZ51SVzWHOaNCIA+u9wevZjCuAGSvSYpNlm6A4H4Vhwh8481Bf/5rwheIC3fFKlgXxLKaw8Xeroz8Ntg==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "6.3.0"
+
+"@fortawesome/free-solid-svg-icons@^6.3.0":
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.3.0.tgz#d3bd33ae18bb15fdfc3ca136e2fea05f32768a65"
+  integrity sha512-x5tMwzF2lTH8pyv8yeZRodItP2IVlzzmBuD1M7BjawWgg9XAvktqJJ91Qjgoaf8qJpHQ8FEU9VxRfOkLhh86QA==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "6.3.0"
+
+"@fortawesome/react-fontawesome@^0.2.0":
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz#d90dd8a9211830b4e3c08e94b63a0ba7291ddcf4"
+  integrity sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==
+  dependencies:
+    prop-types "^15.8.1"
+
 "@next/env@13.2.4":
   version "13.2.4"
   resolved "https://registry.yarnpkg.com/@next/env/-/env-13.2.4.tgz#8b763700262b2445140a44a8c8d088cef676dbae"
@@ -94,7 +127,7 @@ client-only@0.0.1:
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
   integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
 
-loose-envify@^1.1.0:
+loose-envify@^1.1.0, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -131,6 +164,11 @@ next@13.2.4:
     "@next/swc-win32-ia32-msvc" "13.2.4"
     "@next/swc-win32-x64-msvc" "13.2.4"
 
+object-assign@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
+  integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==
+
 picocolors@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
@@ -145,6 +183,15 @@ postcss@8.4.14:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
+prop-types@^15.8.1:
+  version "15.8.1"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
+  integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
+  dependencies:
+    loose-envify "^1.4.0"
+    object-assign "^4.1.1"
+    react-is "^16.13.1"
+
 react-dom@18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
@@ -153,6 +200,11 @@ react-dom@18.2.0:
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 
+react-is@^16.13.1:
+  version "16.13.1"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
+  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
+
 react@18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"