diff --git a/app/Http/Controllers/Homepage/ContactController.php b/app/Http/Controllers/Homepage/ContactController.php
new file mode 100644
index 0000000..5785441
--- /dev/null
+++ b/app/Http/Controllers/Homepage/ContactController.php
@@ -0,0 +1,18 @@
+<?php
+
+namespace App\Http\Controllers\Homepage;
+
+use App\Http\Controllers\Controller;
+use Illuminate\Http\Request;
+
+class ContactController extends Controller
+{
+    public function index(){
+        $data = [
+            'title' => 'Kontak',
+            'page' => 'contacts'
+        ];
+
+        return view('homepage.contacts.index', $data);
+    }
+}
diff --git a/public/assets/defaults/address-icon.png b/public/assets/defaults/address-icon.png
new file mode 100644
index 0000000..15ab667
Binary files /dev/null and b/public/assets/defaults/address-icon.png differ
diff --git a/public/assets/defaults/email-icon-2.svg b/public/assets/defaults/email-icon-2.svg
new file mode 100644
index 0000000..3d1b6f4
--- /dev/null
+++ b/public/assets/defaults/email-icon-2.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 7.00005L10.2 11.65C11.2667 12.45 12.7333 12.45 13.8 11.65L20 7" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<rect x="3" y="5" width="18" height="14" rx="2" stroke="#000000" stroke-width="2" stroke-linecap="round"/>
+</svg>
\ No newline at end of file
diff --git a/public/assets/defaults/email-icon.png b/public/assets/defaults/email-icon.png
new file mode 100644
index 0000000..477d066
Binary files /dev/null and b/public/assets/defaults/email-icon.png differ
diff --git a/public/assets/defaults/maps-icon-2.svg b/public/assets/defaults/maps-icon-2.svg
new file mode 100644
index 0000000..41620c4
--- /dev/null
+++ b/public/assets/defaults/maps-icon-2.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 192 192" xmlns="http://www.w3.org/2000/svg" fill="none"><path stroke="#000000" stroke-width="12" d="M96 22a51.88 51.88 0 0 0-36.77 15.303A52.368 52.368 0 0 0 44 74.246c0 16.596 4.296 28.669 20.811 48.898a163.733 163.733 0 0 1 20.053 28.38C90.852 163.721 90.146 172 96 172c5.854 0 5.148-8.279 11.136-20.476a163.723 163.723 0 0 1 20.053-28.38C143.704 102.915 148 90.841 148 74.246a52.37 52.37 0 0 0-15.23-36.943A51.88 51.88 0 0 0 96 22Z"/><circle cx="96" cy="74" r="20" stroke="#000000" stroke-width="12"/></svg>
\ No newline at end of file
diff --git a/public/assets/defaults/phone-icon-2.svg b/public/assets/defaults/phone-icon-2.svg
new file mode 100644
index 0000000..35cb099
--- /dev/null
+++ b/public/assets/defaults/phone-icon-2.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Communication / Phone">
+<path id="Vector" d="M9.50246 4.25722C9.19873 3.4979 8.46332 3 7.64551 3H4.89474C3.8483 3 3 3.8481 3 4.89453C3 13.7892 10.2108 21 19.1055 21C20.1519 21 21 20.1516 21 19.1052L21.0005 16.354C21.0005 15.5361 20.5027 14.8009 19.7434 14.4971L17.1069 13.4429C16.4249 13.1701 15.6483 13.2929 15.0839 13.7632L14.4035 14.3307C13.6089 14.9929 12.4396 14.9402 11.7082 14.2088L9.79222 12.2911C9.06079 11.5596 9.00673 10.3913 9.66895 9.59668L10.2363 8.9163C10.7066 8.35195 10.8305 7.57516 10.5577 6.89309L9.50246 4.25722Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>
\ No newline at end of file
diff --git a/public/assets/defaults/phone-icon.png b/public/assets/defaults/phone-icon.png
new file mode 100644
index 0000000..cd49d02
Binary files /dev/null and b/public/assets/defaults/phone-icon.png differ
diff --git a/resources/views/homepage/about-us/index.blade.php b/resources/views/homepage/about-us/index.blade.php
index b3e69a6..0b20c2b 100644
--- a/resources/views/homepage/about-us/index.blade.php
+++ b/resources/views/homepage/about-us/index.blade.php
@@ -38,5 +38,27 @@
             </div>
         </section>
         <!-- end section -->
+        <!-- start section -->
+        <section class="half-section pt-0">
+            <div class="container">
+                <div class="row justify-content-center">
+                    <div class="col-lg-10">
+                        <div class="row justify-content-center">
+                            <div class="col-12 text-center elements-social social-icon-style-04">
+                                <ul class="large-icon dark">
+                                    <li><a class="facebook" href="https://www.facebook.com/" target="_blank"><i class="fa-brands fa-facebook-f"></i><span></span></a></li>
+                                    <li><a class="twitter" href="http://www.twitter.com" target="_blank"><i class="fa-brands fa-twitter"></i><span></span></a></li>
+                                    <li><a class="instagram" href="http://www.instagram.com" target="_blank"><i class="fa-brands fa-instagram"></i><span></span></a></li>
+                                    <li><a class="youtube" href="http://www.youtube.com" target="_blank"><i class="fa-brands fa-youtube"></i><span></span></a></li>
+                                    <li><a class="whatsapp" href="http://www.whatsapp.com" target="_blank"><i class="fa-brands fa-whatsapp"></i><span></span></a></li>
+                                    <li><a class="telegram" href="http://www.telegram.com" target="_blank"><i class="fa-brands fa-telegram"></i><span></span></a></li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- end section -->
         <!-- start footer -->
 @include('partials.homepage.footer')
diff --git a/resources/views/homepage/announcements/read.blade.php b/resources/views/homepage/announcements/read.blade.php
index b589d0c..efbb161 100644
--- a/resources/views/homepage/announcements/read.blade.php
+++ b/resources/views/homepage/announcements/read.blade.php
@@ -60,8 +60,9 @@
                                     <li><a class="facebook" href="https://www.facebook.com/" target="_blank"><i class="fa-brands fa-facebook-f"></i><span></span></a></li>
                                     <li><a class="twitter" href="http://www.twitter.com" target="_blank"><i class="fa-brands fa-twitter"></i><span></span></a></li>
                                     <li><a class="instagram" href="http://www.instagram.com" target="_blank"><i class="fa-brands fa-instagram"></i><span></span></a></li>
-                                    <li><a class="linkedin" href="http://www.linkedin.com" target="_blank"><i class="fa-brands fa-linkedin-in"></i><span></span></a></li>
-                                    <li><a class="behance" href="http://www.behance.com/" target="_blank"><i class="fa-brands fa-behance"></i><span></span></a></li>
+                                    <li><a class="youtube" href="http://www.youtube.com" target="_blank"><i class="fa-brands fa-youtube"></i><span></span></a></li>
+                                    <li><a class="whatsapp" href="http://www.whatsapp.com" target="_blank"><i class="fa-brands fa-whatsapp"></i><span></span></a></li>
+                                    <li><a class="telegram" href="http://www.telegram.com" target="_blank"><i class="fa-brands fa-telegram"></i><span></span></a></li>
                                 </ul>
                             </div>
                         </div>
diff --git a/resources/views/homepage/contacts/index.blade.php b/resources/views/homepage/contacts/index.blade.php
new file mode 100644
index 0000000..4c86e4f
--- /dev/null
+++ b/resources/views/homepage/contacts/index.blade.php
@@ -0,0 +1,153 @@
+@include('partials.homepage.head')
+    <body data-mobile-nav-style="full-screen-menu" data-mobile-nav-bg-color="">
+        @include('partials.homepage.header')
+        <!-- start page title -->
+        <section class="half-section page-title-center-alignment cover-background top-space-margin">
+            <div class="container">
+                <div class="row">
+                    <div class="col-12 text-center position-relative page-title-large">
+                        <h1 class="d-inline-block fw-600 ls-minus-1px text-dark-gray mb-15px">Kontak</h1>
+                    </div>
+                    <div class="col-12 breadcrumb breadcrumb-style-01 d-flex justify-content-center">
+                        <ul>
+                            <li><a href="{{route('homepage.landing')}}">Beranda</a></li>
+                            <li><a href="{{route('homepage.contacts.index')}}">Kontak</a></li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- end page title -->
+        <!-- start section -->
+        <section class="bg-gradient-very-light-gray">
+            <div class="container">
+                <div class="row row-cols-1 row-cols-lg-3 row-cols-sm-2 justify-content-center" data-anime='{ "el": "childs",  "translateY": [0, 0], "perspective": [1200, 1200], "scale": [1.05, 1], "rotateX": [50, 0], "opacity": [0,1], "duration":600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }'>
+                    <!-- start features box item -->
+                    <div class="col icon-with-text-style-07 transition-inner-all md-mb-30px">
+                        <div class="bg-white feature-box h-100 justify-content-start box-shadow-quadruple-large box-shadow-quadruple-large-hover text-start p-17 sm-p-14 border-radius-6px">
+                            <div class="feature-box-icon mb-30px">
+                                <img src="{{asset('assets/defaults/maps-icon-2.svg')}}" class="h-70px" alt="">
+                            </div>
+                            <div class="feature-box-content last-paragraph-no-margin">
+                                <span class="d-inline-block fw-600 text-dark-gray mb-5px fs-18 ls-minus-05px">Alamat</span>
+                                <p>{{$app->contact_address}}</p>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- end features box item -->
+                    <!-- start features box item -->
+                    <div class="col icon-with-text-style-07 transition-inner-all md-mb-30px">
+                        <div class="bg-white feature-box h-100 justify-content-start box-shadow-quadruple-large box-shadow-quadruple-large-hover text-start p-17 sm-p-14 border-radius-6px">
+                            <div class="feature-box-icon mb-30px">
+                                <img src="{{asset('assets/defaults/email-icon-2.svg')}}" class="h-70px" alt="">
+                            </div>
+                            <div class="feature-box-content last-paragraph-no-margin">
+                                <span class="d-inline-block fw-600 text-dark-gray mb-5px fs-18 ls-minus-05px">Email</span>
+                                <p>{{$app->contact_email}}</p>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- end features box item -->
+                    <!-- start features box item -->
+                    <div class="col icon-with-text-style-07 transition-inner-all xs-mb-30px">
+                        <div class="bg-white feature-box h-100 justify-content-start box-shadow-quadruple-large box-shadow-quadruple-large-hover text-start p-17 sm-p-14 border-radius-6px">
+                            <div class="feature-box-icon mb-30px">
+                                <img src="{{asset('assets/defaults/phone-icon-2.svg')}}" class="h-70px" alt="">
+                            </div>
+                            <div class="feature-box-content last-paragraph-no-margin">
+                                <span class="d-inline-block fw-600 text-dark-gray mb-5px fs-18 ls-minus-05px">Nomor Telepon</span>
+                                <p>{{$app->contact_phone}}</p>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- end features box item -->
+                </div>
+            </div>
+        </section>
+        <!-- end section -->
+        <!-- start section -->
+        <section class="half-section pt-0">
+            <div class="container">
+                <div class="row justify-content-center">
+                    <div class="col-lg-10">
+                        <div class="row justify-content-center">
+                            <div class="col-12 text-center elements-social social-icon-style-04">
+                                <ul class="large-icon dark">
+                                    <li><a class="facebook" href="https://www.facebook.com/" target="_blank"><i class="fa-brands fa-facebook-f"></i><span></span></a></li>
+                                    <li><a class="twitter" href="http://www.twitter.com" target="_blank"><i class="fa-brands fa-twitter"></i><span></span></a></li>
+                                    <li><a class="instagram" href="http://www.instagram.com" target="_blank"><i class="fa-brands fa-instagram"></i><span></span></a></li>
+                                    <li><a class="youtube" href="http://www.youtube.com" target="_blank"><i class="fa-brands fa-youtube"></i><span></span></a></li>
+                                    <li><a class="whatsapp" href="http://www.whatsapp.com" target="_blank"><i class="fa-brands fa-whatsapp"></i><span></span></a></li>
+                                    <li><a class="telegram" href="http://www.telegram.com" target="_blank"><i class="fa-brands fa-telegram"></i><span></span></a></li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- end section -->
+        <!-- start section -->
+        <section class="p-0 mb-5">
+            <div class="container">
+                <div class="row justify-content-center">
+                    <div class="col-4">
+                        <img src="{{asset('assets/defaults/diskominfo-building.jpg')}}"
+                     alt="Building"
+                     style="width: 100%; height: 500px; object-fit: cover; border-radius: 8px;">
+                    </div>
+                    <div class="col-8">
+                        <iframe
+                            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3432.141752620895!2d107.44145707430351!3d-6.554894664077222!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e690e51c899aa9f%3A0x6005e63423ceedc8!2sDiskominfo%20Kab.%20Purwakarta!5e1!3m2!1sen!2sid!4v1743259282707!5m2!1sen!2sid"
+                            width="100%"
+                            height="500"
+                            style="border:0;"
+                            allowfullscreen=""
+                            loading="lazy"
+                            referrerpolicy="no-referrer-when-downgrade">
+                        </iframe>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- end section -->
+        <!-- start section -->
+        <section class="p-0 mb-5">
+            <div class="container">
+                <div class="row justify-content-center">
+                    <div class="col-12">
+                        <div class="bg-very-light-gray p-7 border-radius-8px">
+                            <form action="email-templates/contact-form.php" method="post" class="contact-form-style-05">
+                                <div class="col-12 text-center mb-5" data-anime='{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 100, "staggervalue": 300, "easing": "easeOutQuad" }'>
+                                    <span class="text-base-color fw-600 mb-5px text-uppercase d-block">Lebih mudah</span>
+                                    <h2 class="text-dark-gray fw-700 ls-minus-1px">Hubungi kami</h2>
+                                </div>
+                                <div class="row justify-content-center" data-anime='{ "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 500, "staggervalue": 300, "easing": "easeOutQuad" }'>
+                                    <div class="col-md-6 sm-mb-30px">
+                                        <input class="mb-30px form-control bg-white required" type="text" name="name" placeholder="Nama Anda*" />
+                                        <input class="mb-30px form-control bg-white required" type="email" name="email" placeholder="Alamat email Anda*" />
+                                        <input class="form-control bg-white" type="tel" name="phone" placeholder="Nomor telepon Anda*" />
+                                    </div>
+                                    <div class="col-md-6">
+                                        <textarea class="h-100 form-control bg-white" name="message" cols="40" rows="6" placeholder="Pesan Anda"></textarea>
+                                    </div>
+                                    <div class="col-md-6 mt-30px sm-mt-20px">
+                                        <p class="mb-0 fs-13 lh-24 text-center text-md-start">Kami berkomitmen untuk melindungi privasi Anda. Kami tidak akan pernah mengumpulkan informasi tentang Anda..</p>
+                                    </div>
+                                    <div class="col-md-6 text-center text-md-end mt-30px sm-mt-20px">
+                                        <input type="hidden" name="redirect" value="">
+                                        <button class="btn btn-medium btn-dark-gray btn-box-shadow btn-rounded submit" type="submit">Kirim pesan</button>
+                                    </div>
+                                    <div class="col-12">
+                                        <div class="form-results mt-20px d-none"></div>
+                                    </div>
+                                </div>
+                            </form>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- end section -->
+        <!-- start footer -->
+@include('partials.homepage.footer')
diff --git a/resources/views/homepage/index.blade.php b/resources/views/homepage/index.blade.php
index ab6ca54..ae97201 100644
--- a/resources/views/homepage/index.blade.php
+++ b/resources/views/homepage/index.blade.php
@@ -145,51 +145,21 @@
         </section>
         <!-- end section -->
         <!-- start section -->
-        <section class="pt-4">
+        <section class="half-section pt-0">
             <div class="container">
-                <div class="row position-relative clients-style-08" data-anime='{ "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }'>
-                    <div class="col swiper text-center feather-shadow" data-slider-options='{ "slidesPerView": 2, "spaceBetween":0, "speed": 4000, "loop": true, "pagination": { "el": ".slider-four-slide-pagination-2", "clickable": false }, "allowTouchMove": false, "autoplay": { "delay":0, "disableOnInteraction": false }, "navigation": { "nextEl": ".slider-four-slide-next-2", "prevEl": ".slider-four-slide-prev-2" }, "keyboard": { "enabled": true, "onlyInViewport": true }, "breakpoints": { "1200": { "slidesPerView": 4 }, "992": { "slidesPerView": 3 }, "768": { "slidesPerView": 2 } }, "effect": "slide" }'>
-                        <div class="swiper-wrapper marquee-slide">
-                            <!-- start client item -->
-                            <div class="swiper-slide">
-                                <a href="#"><img src="images/logo-envato.svg" class="h-40px xs-h-30px" alt="" /></a>
+                <div class="row justify-content-center">
+                    <div class="col-lg-10">
+                        <div class="row justify-content-center">
+                            <div class="col-12 text-center elements-social social-icon-style-04">
+                                <ul class="large-icon dark">
+                                    <li><a class="facebook" href="https://www.facebook.com/" target="_blank"><i class="fa-brands fa-facebook-f"></i><span></span></a></li>
+                                    <li><a class="twitter" href="http://www.twitter.com" target="_blank"><i class="fa-brands fa-twitter"></i><span></span></a></li>
+                                    <li><a class="instagram" href="http://www.instagram.com" target="_blank"><i class="fa-brands fa-instagram"></i><span></span></a></li>
+                                    <li><a class="youtube" href="http://www.youtube.com" target="_blank"><i class="fa-brands fa-youtube"></i><span></span></a></li>
+                                    <li><a class="whatsapp" href="http://www.whatsapp.com" target="_blank"><i class="fa-brands fa-whatsapp"></i><span></span></a></li>
+                                    <li><a class="telegram" href="http://www.telegram.com" target="_blank"><i class="fa-brands fa-telegram"></i><span></span></a></li>
+                                </ul>
                             </div>
-                            <!-- end client item -->
-                            <!-- start client item -->
-                            <div class="swiper-slide">
-                                <a href="#"><img src="images/logo-pingdom.svg" class="h-40px xs-h-30px" alt="" /></a>
-                            </div>
-                            <!-- end client item -->
-                            <!-- start client item -->
-                            <div class="swiper-slide">
-                                <a href="#"><img src="images/logo-paypal.svg" class="h-40px xs-h-30px" alt="" /></a>
-                            </div>
-                            <!-- end client item -->
-                            <!-- start client item -->
-                            <div class="swiper-slide">
-                                <a href="#"><img src="images/logo-walmart.svg" class="h-40px xs-h-30px" alt="" /></a>
-                            </div>
-                            <!-- end client item -->
-                            <!-- start client item -->
-                            <div class="swiper-slide">
-                                <a href="#"><img src="images/logo-amazon.svg" class="h-40px xs-h-30px" alt="" /></a>
-                            </div>
-                            <!-- end client item -->
-                            <!-- start client item -->
-                            <div class="swiper-slide">
-                                <a href="#"><img src="images/logo-logitech.svg" class="h-40px xs-h-30px" alt="" /></a>
-                            </div>
-                            <!-- end client item -->
-                            <!-- start client item -->
-                            <div class="swiper-slide">
-                                <a href="#"><img src="images/logo-envato.svg" class="h-40px xs-h-30px" alt="" /></a>
-                            </div>
-                            <!-- end client item -->
-                            <!-- start client item -->
-                            <div class="swiper-slide">
-                                <a href="#"><img src="images/logo-pingdom.svg" class="h-40px xs-h-30px" alt="" /></a>
-                            </div>
-                            <!-- end client item -->
                         </div>
                     </div>
                 </div>
diff --git a/resources/views/homepage/news/read.blade.php b/resources/views/homepage/news/read.blade.php
index c3a3db8..17c6f69 100644
--- a/resources/views/homepage/news/read.blade.php
+++ b/resources/views/homepage/news/read.blade.php
@@ -26,12 +26,13 @@
                             </div>
                             <div class="row justify-content-center">
                                 <div class="col-12 text-center elements-social social-icon-style-04">
-                                    <ul class="medium-icon dark">
+                                    <ul class="large-icon dark">
                                         <li><a class="facebook" href="https://www.facebook.com/" target="_blank"><i class="fa-brands fa-facebook-f"></i><span></span></a></li>
                                         <li><a class="twitter" href="http://www.twitter.com" target="_blank"><i class="fa-brands fa-twitter"></i><span></span></a></li>
-                                        <li><a class="instagram" href="http://www.instagram.com" target="_blank"><i class="fa-brands fa-instagram"><span></span></i></a></li>
-                                        <li><a class="linkedin" href="http://www.linkedin.com" target="_blank"><i class="fa-brands fa-linkedin-in"><span></span></i></a></li>
-                                        <li><a class="behance" href="http://www.behance.com/" target="_blank"><i class="fa-brands fa-behance"></i><span></span></a></li>
+                                        <li><a class="instagram" href="http://www.instagram.com" target="_blank"><i class="fa-brands fa-instagram"></i><span></span></a></li>
+                                        <li><a class="youtube" href="http://www.youtube.com" target="_blank"><i class="fa-brands fa-youtube"></i><span></span></a></li>
+                                        <li><a class="whatsapp" href="http://www.whatsapp.com" target="_blank"><i class="fa-brands fa-whatsapp"></i><span></span></a></li>
+                                        <li><a class="telegram" href="http://www.telegram.com" target="_blank"><i class="fa-brands fa-telegram"></i><span></span></a></li>
                                     </ul>
                                 </div>
                             </div>
@@ -76,24 +77,12 @@
                                         <span class="fw-500">Facebook</span>
                                     </a>
                                 </div>
-                                <div class="col border-bottom border-color-extra-medium-gray ps-25px pe-25px xl-ps-15px xl-pe-15px lg-ps-10px lg-pe-10px pt-10px pb-10px">
-                                    <a class="dribbble text-dark-gray" href="http://www.dribbble.com" target="_blank">
-                                        <i class="fa-brands fa-dribbble fs-18 me-10px"></i>
-                                        <span class="fw-500">Dribbble</span>
-                                    </a>
-                                </div>
                                 <div class="col border-bottom border-end border-color-extra-medium-gray ps-25px pe-25px xl-ps-15px xl-pe-15px lg-ps-10px lg-pe-10px pt-10px pb-10px">
                                     <a class="twitter text-dark-gray" href="http://www.twitter.com" target="_blank">
                                         <i class="fa-brands fa-twitter fs-18 me-10px"></i>
                                         <span class="fw-500">Twitter</span>
                                     </a>
                                 </div>
-                                <div class="col border-bottom border-color-extra-medium-gray ps-25px pe-25px xl-ps-15px xl-pe-15px lg-ps-10px lg-pe-10px pt-10px pb-10px">
-                                    <a class="youtube text-dark-gray" href="http://www.youtube.com" target="_blank">
-                                        <i class="fa-brands fa-youtube fs-18 me-10px"></i>
-                                        <span class="fw-500">Youtube</span>
-                                    </a>
-                                </div>
                                 <div class="col border-bottom border-end border-color-extra-medium-gray ps-25px pe-25px xl-ps-15px xl-pe-15px lg-ps-10px lg-pe-10px pt-10px pb-10px">
                                     <a class="instagram text-dark-gray" href="http://www.instagram.com" target="_blank">
                                         <i class="fa-brands fa-instagram fs-18 me-10px"></i>
@@ -101,21 +90,21 @@
                                     </a>
                                 </div>
                                 <div class="col border-bottom border-color-extra-medium-gray ps-25px pe-25px xl-ps-15px xl-pe-15px lg-ps-10px lg-pe-10px pt-10px pb-10px">
-                                    <a class="vimeo text-dark-gray" href="https://vimeo.com/" target="_blank">
-                                        <i class="fa-brands fa-vimeo-v fs-18 me-10px"></i>
-                                        <span class="fw-500">Vimeo</span>
+                                    <a class="youtube text-dark-gray" href="http://www.youtube.com" target="_blank">
+                                        <i class="fa-brands fa-youtube fs-18 me-10px"></i>
+                                        <span class="fw-500">Youtube</span>
                                     </a>
                                 </div>
-                                <div class="col border-end border-color-extra-medium-gray ps-25px pe-25px xl-ps-15px xl-pe-15px lg-ps-10px lg-pe-10px pt-10px pb-10px">
-                                    <a class="linkedin text-dark-gray" href="https://www.linkedin.com/" target="_blank">
-                                        <i class="fa-brands fa-linkedin-in fs-18 me-10px"></i>
-                                        <span class="fw-500">Linkedin</span>
+                                <div class="col border-bottom border-color-extra-medium-gray ps-25px pe-25px xl-ps-15px xl-pe-15px lg-ps-10px lg-pe-10px pt-10px pb-10px">
+                                    <a class="whatsapp text-dark-gray" href="http://www.whatsapp.com" target="_blank">
+                                        <i class="fa-brands fa-whatsapp fs-18 me-10px"></i>
+                                        <span class="fw-500">WhatsApp</span>
                                     </a>
                                 </div>
-                                <div class="col ps-25px pe-25px xl-ps-15px xl-pe-15px lg-ps-10px lg-pe-10px pt-10px pb-10px">
-                                    <a class="behance text-dark-gray" href="http://www.behance.com/" target="_blank">
-                                        <i class="fa-brands fa-behance fs-18 me-10px"></i>
-                                        <span class="fw-500 fs-16">Behance</span>
+                                <div class="col border-bottom border-color-extra-medium-gray ps-25px pe-25px xl-ps-15px xl-pe-15px lg-ps-10px lg-pe-10px pt-10px pb-10px">
+                                    <a class="telegram text-dark-gray" href="http://www.telegram.com" target="_blank">
+                                        <i class="fa-brands fa-telegram fs-18 me-10px"></i>
+                                        <span class="fw-500">Telegram</span>
                                     </a>
                                 </div>
                             </div>
diff --git a/resources/views/partials/homepage/header.blade.php b/resources/views/partials/homepage/header.blade.php
index 86100ba..0bf3523 100644
--- a/resources/views/partials/homepage/header.blade.php
+++ b/resources/views/partials/homepage/header.blade.php
@@ -36,7 +36,7 @@
                         <li class="nav-item"><a href="{{route('homepage.news.index')}}" class="nav-link fs-25 {{$page === 'news' ? 'active-menu' : ''}}">Berita</a></li>
                         <li class="nav-item"><a href="{{route('homepage.announcements.index')}}" class="nav-link fs-25 {{$page === 'announcements' ? 'active-menu' : ''}}">Pengumuman</a></li>
                         <li class="nav-item"><a href="{{route('homepage.about.us.index')}}" class="nav-link fs-25 {{$page === 'about_us' ? 'active-menu' : ''}}">Tentang Kami</a></li>
-                        <li class="nav-item"><a href="demo-hosting-pricing.html" class="nav-link fs-25">Kontak</a></li>
+                        <li class="nav-item"><a href="{{route('homepage.contacts.index')}}" class="nav-link fs-25 {{$page === 'contacts' ? 'active-menu' : ''}}">Kontak</a></li>
                     </ul>
                 </div>
             </div>
diff --git a/routes/web.php b/routes/web.php
index 45f7b32..e6081c0 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -26,6 +26,7 @@
 use App\Http\Controllers\Dashboard\SubLocationController;
 use App\Http\Controllers\Dashboard\UserController;
 use App\Http\Controllers\Homepage\AboutUsController;
+use App\Http\Controllers\Homepage\ContactController;
 use App\Http\Controllers\Homepage\NewsController as HomepageNewsController;
 use App\Http\Controllers\Homepage\AnnouncementController as HomepageAnnouncementController;
 use App\Http\Controllers\Homepage\LandingPageController;
@@ -47,6 +48,10 @@
     Route::prefix('about-us')->name('about.us.')->controller(AboutUsController::class)->group(function(){
         Route::get('/', 'index')->name('index');
     });
+
+    Route::prefix('contacts')->name('contacts.')->controller(ContactController::class)->group(function(){
+        Route::get('/', 'index')->name('index');
+    });
 });
 
 Route::prefix('auth')->group(function(){