diff --git a/about.css b/about.css
index f33216d..59743fb 100644
--- a/about.css
+++ b/about.css
@@ -1,16 +1,38 @@
-.about-nav {
-    margin-bottom: 3eem;
+/* External CSS: mengatur posisi header */
+.header {
+    margin: 1em auto;
+    width: min(1500px, 100%);
 }
 
-.about-nav ul {
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    list-style-type: none;
-    gap: 2eem;
-    padding: 0;
+/* External CSS: mengatur posisi navigasi */
+.nav {
+    margin: 1em auto 3em auto;
+    width: min(1500px, 100%);
 }
 
-.about-nav li:first-child {
+/* Mengatur posisi menu Home */
+.nav li:first-child {
     margin-right: auto;
 }
+
+/* External CSS: mengatur layout container utama */
+.flex-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem;
+    width: min(1100px, 100%);
+    margin: 0 auto;
+    box-sizing: border-box;
+    background-color: #ffffff;
+    border: 1px solid #bdbdbd;
+    border-radius: 12px;
+    padding: 30px;
+}
+
+/* External CSS: mengatur tampilan footer */
+footer {
+    margin-top: 3rem;
+    padding: 20px;
+    text-align: center;
+}
\ No newline at end of file
diff --git a/about.html b/about.html
index 1f42c27..0d00137 100644
--- a/about.html
+++ b/about.html
@@ -4,24 +4,18 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>About</title>
+    <!-- External CSS : Mengatur Layout Header, Nav, dan container -->
     <link rel="stylesheet" href="about.css">
+    <!-- Tailwind CSS : menyediakan styling komponen -->
+    <script src="https://cdn.tailwindcss.com"></script>
+<!--Internal CSS : Styling background, font dan tipografi-->
 <style>
     #about-page {
         box-sizing: border-box;
         background-color: #e8e8e8;
         color: #222222;
         font-family: Arial, sans-serif;
-    }
-
-    .flex-container {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        gap: 1rem;
-        background-color: #ffffff;
-        border: 1px solid #bdbdbd;
-        border-radius: 12px;
-        padding: 30px;
+        padding: 20px;
     }
 
     .text-container {
@@ -33,15 +27,21 @@
         padding: 20px;
     }
 
+    .text-container p {
+        text-align: justify;
+    }
+
+    
 </style>
 </head>
 
 <body id="about-page">
     <!-- Navigation menu untuk berpindah antar halaman website, semua halaman menggunakan navigation yang sama -->
-    <header class="header" style="margin: 1em auto; width: min(1500px,100%);">
-        <nav class="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>
+    <header class="header">
+        <nav class="nav">
+            <!-- Inline CSS: mengatur susunan dan jarak menu secara langsung pada elemen ul -->
+            <ul style="display: flex; justify-content: flex-end; align-items: center; list-style-type: none; gap: 2em; padding: 0%;">
+                <li><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>
@@ -52,10 +52,10 @@
     
     <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="flex-container" >
+                <h1 class="inline-block rounded-full border border-gray-500 bg-gray-100 px-4 py-2 text-sm font-semibold tracking-wide text-gray-800"> 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). 
+                    <p class="text-gray-800">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.
@@ -63,7 +63,7 @@
                 </div>
                 <h2>My Education Journey</h2>
                 <div>
-                    <ol>
+                    <ol class="list-decimal list-outside pl-6">
                         <li>PG Mandala: 2010-2011</li>
                         <li>TK Santa Lorent: 2011-2013</li>
                         <li>SD Santa Lorent: 2013-2019</li>
@@ -73,7 +73,7 @@
                     </ol>
                 </div>
                 <h2 > My Favourite Quote?</h2>
-                <p style="text-align: center; font-style: italic;">Would You Intercept Me? I'd Intercept Me!</p>
+                    <p class="italic text-center">Would You Intercept Me? I'd Intercept Me!</p>
             </div>
         </section>
     </main>
diff --git a/hobbies.css b/hobbies.css
index e69de29..34f5074 100644
--- a/hobbies.css
+++ b/hobbies.css
@@ -0,0 +1,117 @@
+/* Mengatur tampilan dasar seluruh halaman */
+* {
+    box-sizing: border-box;
+}
+
+body {
+    margin: 0;
+    background-color: #e8e8e8;
+    color: #222222;
+    font-family: Arial, sans-serif;
+    line-height: 1.6;
+}
+
+/* Mengatur posisi header dan navigasi */
+.header {
+    width: min(1500px, calc(100% - 40px));
+    margin: 1em auto;
+}
+
+.nav {
+    margin-bottom: 3em;
+}
+
+.nav-list {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    list-style-type: none;
+    gap: 2em;
+    padding: 0;
+}
+
+.nav-list li:first-child {
+    margin-right: auto;
+}
+
+.nav-list a {
+    display: block;
+    color: #222222;
+    text-decoration: none;
+    padding: 8px 12px;
+    border-radius: 6px;
+}
+
+.nav-list a:hover {
+    background-color: #d0d0d0;
+}
+
+/* Mengatur container utama halaman Hobbies */
+.hobbies-main {
+    width: min(1100px, calc(100% - 40px));
+    margin: 0 auto;
+}
+
+/* Mengatur judul dan deskripsi halaman */
+.page-title {
+    text-align: center;
+    margin-bottom: 10px;
+}
+
+.page-intro {
+    text-align: center;
+    margin-bottom: 2rem;
+    color: #555555;
+}
+
+/* Mengatur susunan kartu hobi */
+.hobby-grid {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 1.5rem;
+}
+
+/* Mengatur tampilan setiap kartu hobi */
+.hobby-item img {
+    display: block;
+    width: 100%;
+    max-width: 500px;
+    height: auto;
+}
+
+/* Mengatur ukuran dan tampilan foto */
+.hobby-card img {
+    width: 100%;
+    aspect-ratio: 4 / 3;
+    object-fit: cover;
+    border: 1px solid #cccccc;
+    border-radius: 8px;
+}
+
+/* Mengatur judul dan deskripsi setiap hobi */
+.hobby-content h2 {
+    margin: 0;
+    color: #222222;
+}
+
+.hobby-content p {
+    color: #555555;
+    text-align: justify;
+}
+
+/* Menyesuaikan tampilan untuk tablet */
+.hobbies-container {
+    width: 100%;
+    margin: 0 auto;
+    padding: 25px;
+    background-color: #ffffff;
+    border: 1px solid #bdbdbd;
+    border-radius: 12px;
+}
+
+/* Mengatur tampilan footer */
+footer {
+    margin-top: 3rem;
+    padding: 20px;
+    text-align: center;
+}
\ No newline at end of file
diff --git a/hobbies.html b/hobbies.html
index 650d381..ba074cc 100644
--- a/hobbies.html
+++ b/hobbies.html
@@ -4,14 +4,15 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Hobbies</title>
+    <!-- External CSS : Mengatur seluruh style dari Hobbies-->
     <link rel="stylesheet" href="hobbies.css">
 </head>
-<body style="box-sizing: border-box;">
+<body>
     <!-- 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>
+    <header class="header">
+        <nav class="nav">
+            <ul class="nav-list">
+                <li >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>
@@ -19,6 +20,73 @@
             </ul>
         </nav>
     </header>
-    
+    <main class="hobbies-main">
+        <h1 class="page-title">My Hobbies</h1>
+
+        <p class="page-intro">
+            Everyone has their own way to enjoy their free time.
+            Here are some of my favourite activities.
+        </p>
+
+        <!-- Hobby section: menampilkan tiga hobi beserta foto dan deskripsinya -->
+        <section class="hobbies-container">
+
+            <article class="hobby-item">
+                <img src="images/video-games.jpg"
+                     alt="Foto saya sedang bermain video game">
+
+                <div class="hobby-content">
+                    <h2>Playing Video Games</h2>
+                    <p>
+                        I enjoy playing video games during my free time.
+                        Gaming helps me relax and gives me an opportunity
+                        to explore different worlds and challenges.
+                    </p>
+                </div>
+            </article>
+
+            <article class="hobby-item">
+                <img src="images/drawing.jpg"
+                     alt="Foto saya sedang menggambar">
+
+                <div class="hobby-content">
+                    <h2>Drawing</h2>
+                    <p>
+                        Drawing is one of my favourite creative activities.
+                        I enjoy drawing different things and expressing
+                        my ideas through illustrations.
+                    </p>
+                </div>
+            </article>
+
+            <article class="hobby-item">
+                <img src="images/piano.jpg"
+                     alt="Foto saya sedang bermain piano">
+
+                <div class="hobby-content">
+                    <h2>Playing the Piano</h2>
+                    <p>
+                        I occasionally play the piano during my free time.
+                        It is a fun activity that allows me to enjoy music
+                        and practice my musical skills.
+                    </p>
+                </div>
+            </article>
+
+        </section>
+    </main>
+
+    <footer class="footer">
+        <p>Author: Nathan Handoko</p>
+        <p>
+            Email:
+            <a href="mailto:nathan-h.inf25@ukwms.ac.id">
+                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/index.html b/index.html
index 8c6606a..c369abe 100644
--- a/index.html
+++ b/index.html
@@ -6,7 +6,7 @@
     <title>Home</title>
 </head>
 
-<body style="box-sizing: border-box;">
+<body style="box-sizing: border-box; background-color: #e8e8e8;">
     <!-- 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%);">
@@ -34,7 +34,7 @@
         </section>
     </main>
     
-    <footer>
+    <footer style="text-align: center;">
         <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>