diff --git a/about.css b/about.css
new file mode 100644
index 0000000..e69de29
diff --git a/about.html b/about.html
index 33d7219..7480e6f 100644
--- a/about.html
+++ b/about.html
@@ -4,8 +4,58 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>About</title>
+    <link rel="stylesheet" href="about.css">
+<style>
+
+</style>
 </head>
-<body>
+
+<body style="box-sizing: border-box;">
+    <!-- Navigation menu untuk berpindah antar halaman website, semua halaman menggunakan navigation yang sama -->
+    <header style="margin: 1em auto; width: min(1500px,100%);">
+        <nav style="margin: 1em auto 3em auto; width: min(1500px,100%);">
+            <ul style="display: flex; justify-content: flex-end; align-items: center; list-style-type: none;gap: 2em; padding: 0%;">
+                <li style="margin-right: auto;"><a href="index.html" target="_self" title="Home">Home</a></li>
+                <li><a href="about.html" target="_self" title="About me">About</a></li>
+                <li><a href="hobbies.html" target="_self" title="Hobbies">Hobbies</a></li>
+                <li><a href="gallery.html" target="_self" title="Gallery">Gallery</a></li>
+                <li><a href="contact.html" target="_self" title="Contact">Contact</a></li>
+            </ul>
+        </nav>
+    </header>
     
+    <main>
+        <section>
+            <div class="flex-container" style="display: flex; flex-direction: column; align-items: center;" >
+                <h1 style="text-align: center;"> Know Me Fully </h1>  
+                <div class="text-container">       
+                    <p style="max-width: 50em; text-align: justify;">My Full name is Nathan Handokok Sugandi, I am a Computer Science student at Widya Mandala Catholic University Surabaya (UKWMS). 
+                        I have big interest in technology and programming though im a slow learner and it take a lot of time but still i enjoy it. 
+                        Outside of my academic learning, I like to play video games during my free time, drawing some stuff, and occasionally playing with my piano.
+                        I believe that learning is a continuous process, and every experience gives me an opportunity to grow no matter how small or big it is.
+                    </p>
+                </div>
+                <h2>My Education Journey</h2>
+                <div>
+                    <ol>
+                        <li>PG Mandala: 2010-2011</li>
+                        <li>TK Santa Lorent: 2011-2013</li>
+                        <li>SD Santa Lorent: 2013-2019</li>
+                        <li>SMPK Santa Agnes: 2019-2022</li>
+                        <li>SMAK Santa Agnes: 2022-2025</li>
+                        <li>UKWMS: 2026-Present</li>
+                    </ol>
+                </div>
+                <h2> My Favourite Quote?</h2>
+                <p>Would You Intercept Me? I'd Intercept Me!</p>
+            </div>
+        </section>
+    </main>
+
+    <footer>
+        <p>Author: Nathan Handoko</p>
+        <p><a href="mailto:nathan-h.inf25@ukwms.ac.id">gmail : nathan-h.inf25@ukwms.ac.id</a></p>
+        <p>Phone Number : 0851-0270-5905</p>
+    </footer>
 </body>
 </html>
\ No newline at end of file
diff --git a/contact.html b/contact.html
index 400d3fe..cc0e0e9 100644
--- a/contact.html
+++ b/contact.html
@@ -5,7 +5,19 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Contact</title>
 </head>
-<body>
+<body style="box-sizing: border-box;">
+    <!-- Navigation menu untuk berpindah antar halaman website, semua halaman menggunakan navigation yang sama -->
+    <header style="margin: 1em auto; width: min(1500px,100%);">
+        <nav style="margin: 1em auto 3em auto; width: min(1500px,100%);">
+            <ul style="display: flex; justify-content: flex-end; align-items: center; list-style-type: none;gap: 2em; padding: 0%;">
+                <li style="margin-right: auto;"><a href="index.html" target="_self" title="Home">Home</a></li>
+                <li><a href="about.html" target="_self" title="About me">About</a></li>
+                <li><a href="hobbies.html" target="_self" title="Hobbies">Hobbies</a></li>
+                <li><a href="gallery.html" target="_self" title="Gallery">Gallery</a></li>
+                <li><a href="contact.html" target="_self" title="Contact">Contact</a></li>
+            </ul>
+        </nav>
+    </header>
     
 </body>
 </html>
\ No newline at end of file
diff --git a/gallery.html b/gallery.html
index ddfb903..3897c98 100644
--- a/gallery.html
+++ b/gallery.html
@@ -5,7 +5,19 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Gallery</title>
 </head>
-<body>
+<body style="box-sizing: border-box;">
+    <!-- Navigation menu untuk berpindah antar halaman website, semua halaman menggunakan navigation yang sama -->
+    <header style="margin: 1em auto; width: min(1500px,100%);">
+        <nav style="margin: 1em auto 3em auto; width: min(1500px,100%);">
+            <ul style="display: flex; justify-content: flex-end; align-items: center; list-style-type: none;gap: 2em; padding: 0%;">
+                <li style="margin-right: auto;"><a href="index.html" target="_self" title="Home">Home</a></li>
+                <li><a href="about.html" target="_self" title="About me">About</a></li>
+                <li><a href="hobbies.html" target="_self" title="Hobbies">Hobbies</a></li>
+                <li><a href="gallery.html" target="_self" title="Gallery">Gallery</a></li>
+                <li><a href="contact.html" target="_self" title="Contact">Contact</a></li>
+            </ul>
+        </nav>
+    </header>
     
 </body>
 </html>
\ No newline at end of file
diff --git a/hobbies.css b/hobbies.css
new file mode 100644
index 0000000..e69de29
diff --git a/hobbies.html b/hobbies.html
index f3102c9..650d381 100644
--- a/hobbies.html
+++ b/hobbies.html
@@ -4,8 +4,21 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Hobbies</title>
+    <link rel="stylesheet" href="hobbies.css">
 </head>
-<body>
+<body style="box-sizing: border-box;">
+    <!-- Navigation menu untuk berpindah antar halaman website, semua halaman menggunakan navigation yang sama -->
+    <header style="margin: 1em auto; width: min(1500px,100%);">
+        <nav style="margin: 1em auto 3em auto; width: min(1500px,100%);">
+            <ul style="display: flex; justify-content: flex-end; align-items: center; list-style-type: none;gap: 2em; padding: 0%;">
+                <li style="margin-right: auto;"><a href="index.html" target="_self" title="Home">Home</a></li>
+                <li><a href="about.html" target="_self" title="About me">About</a></li>
+                <li><a href="hobbies.html" target="_self" title="Hobbies">Hobbies</a></li>
+                <li><a href="gallery.html" target="_self" title="Gallery">Gallery</a></li>
+                <li><a href="contact.html" target="_self" title="Contact">Contact</a></li>
+            </ul>
+        </nav>
+    </header>
     
 </body>
 </html>
\ No newline at end of file
diff --git a/index.html b/index.html
index e9fc863..11c7d29 100644
--- a/index.html
+++ b/index.html
@@ -28,9 +28,7 @@
                 <div class="text-container">       
                     <h2 style="text-align: center;"> Hello, I'm Nathan </h2>
                     <p style="text-align: center; font-style: italic;"> "Would You Learn Me? I'd Learn Me!"</p>
-                    <p style="max-width: 50em; text-align: justify;">Hi, I'm Nathan! I am a Computer Science student at Widya Mandala Catholic University Surabaya (UKWMS). 
-                        I have a keen interest in technology and enjoy programming. 
-                        Outside of my academic pursuits, I like playing video games, drawing, and playing the piano. </p>
+                    <p style="max-width: 60em; text-align: justify;">Hi, I'm Nathan! I am a Computer Science student at Widya Mandala Catholic University Surabaya (UKWMS). Nice To Meet You!</p>
                 </div>
             </div>
         </section>
@@ -39,6 +37,7 @@
     <footer>
         <p>Author: Nathan Handoko</p>
         <p><a href="mailto:nathan-h.inf25@ukwms.ac.id">gmail : nathan-h.inf25@ukwms.ac.id</a></p>
+        <p>Phone Number : 0851-0270-5905</p>
     </footer>
 </body>
 </html>
\ No newline at end of file