diff --git a/contact.css b/contact.css
new file mode 100644
index 0000000..0c1aebe
--- /dev/null
+++ b/contact.css
@@ -0,0 +1,132 @@
+footer {
+    margin-top: 3rem;
+    padding: 20px;
+    text-align: center;
+}
+
+/* Mengatur tampilan dasar halaman */
+* {
+    box-sizing: border-box;
+}
+
+body {
+    margin: 0;
+    min-height: 100vh;
+    background-color: #e8e8e8;
+    font-family: Arial, sans-serif;
+    color: #222222;
+}
+
+/* Mengatur posisi header dan navigasi */
+.header {
+    width: min(1500px, 100%);
+    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 judul halaman */
+main > h1 {
+    text-align: center;
+    margin: 30px 0;
+}
+
+/* Mengatur kotak utama Contact */
+.contact-card {
+    width: min(650px, 100%);
+    margin: 40px auto;
+    background-color: white;
+    border: 1px solid #cccccc;
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 8px 8px 0 #444444;
+}
+
+/* Mengatur header kecil pada kotak Contact */
+.contact-header {
+    background-color: #444444;
+    color: white;
+    padding: 8px 15px;
+}
+
+.contact-header p {
+    margin: 0;
+}
+
+/* Mengatur isi kotak Contact */
+.contact-content {
+    padding: 40px 20px;
+    text-align: center;
+}
+
+.contact-content h2 {
+    font-size: 28px;
+    margin-bottom: 8px;
+}
+
+.contact-content > p {
+    color: #777777;
+    margin-bottom: 30px;
+}
+
+/* Mengatur posisi pilihan kontak */
+.contact-options {
+    display: flex;
+    justify-content: center;
+    gap: 30px;
+}
+
+/* Mengatur masing-masing pilihan kontak */
+.contact-item {
+    width: 180px;
+    padding: 15px;
+    border-radius: 10px;
+    transition: 0.2s;
+}
+
+.contact-item:hover {
+    background-color: #f0f0f0;
+    transform: translateY(-4px);
+}
+
+.contact-item a {
+    text-decoration: none;
+}
+
+.contact-icon {
+    display: block;
+    font-size: 35px;
+    margin-bottom: 10px;
+}
+
+.contact-item h3 {
+    margin: 8px 0;
+}
+
diff --git a/contact.html b/contact.html
index 2f92d72..abaf52d 100644
--- a/contact.html
+++ b/contact.html
@@ -4,13 +4,14 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Contact</title>
+    <link rel="stylesheet" href="contact.css">
 </head>
 <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>
+    <header class="header">
+        <nav class="nav">
+            <ul class="nav-list">
+                <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>
@@ -18,7 +19,38 @@
             </ul>
         </nav>
     </header>
-    
+
+    <main>
+        <section class="contact-card">
+
+            <div class="contact-content">
+                <h2>hi! you can contact me at</h2>
+                <p>Computer Science Student</p>
+                <div class="contact-options">
+
+                    <!-- WhatsApp -->
+                    <div class="contact-item">
+                        <a href="https://wa.me/6285102705905" target="_blank">
+                            <span class="contact-icon"> 📞 </span>
+                            <h3>WhatsApp</h3>
+                            <p>0851-0270-5905</p>
+                        </a>
+                    </div>
+
+                    <!-- Discord -->
+                    <div class="contact-item">
+                        <a href="https://discord.com/app" target="_blank">
+                            <span class="contact-icon">🎮</span>
+                            <h3>Discord</h3>
+                            <p>UnkNotNootwn</p>
+                            <small>@unknotnootwn_29083</small>
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </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>
diff --git a/hobbies.css b/hobbies.css
index aac2513..4a8360b 100644
--- a/hobbies.css
+++ b/hobbies.css
@@ -68,7 +68,7 @@ body {
 .hobby-grid {
     display: grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));
-    gap: 1.5rem;
+    gap: 1em;
 }
 
 /* Mengatur tampilan setiap kartu hobi */