diff --git a/proyek-frontend/app/assets/css/main.css b/proyek-frontend/app/assets/css/main.css
index a461c50..f4c1129 100644
--- a/proyek-frontend/app/assets/css/main.css
+++ b/proyek-frontend/app/assets/css/main.css
@@ -1 +1,4 @@
-@import "tailwindcss";
\ No newline at end of file
+@import "tailwindcss";
+html {
+  scroll-behavior: smooth;
+}
diff --git a/proyek-frontend/app/components/landing-page/aboutsection.vue b/proyek-frontend/app/components/landing-page/aboutsection.vue
index 6a18548..3aaa753 100644
--- a/proyek-frontend/app/components/landing-page/aboutsection.vue
+++ b/proyek-frontend/app/components/landing-page/aboutsection.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="about-section">
+  <section id="tentang-kami" class="about-section">
     <div class="container">
       <!-- Judul -->
       <h2 class="section-title">Tentang Kami</h2>
diff --git a/proyek-frontend/app/components/landing-page/header.vue b/proyek-frontend/app/components/landing-page/header.vue
index 4a16060..1e89f35 100644
--- a/proyek-frontend/app/components/landing-page/header.vue
+++ b/proyek-frontend/app/components/landing-page/header.vue
@@ -18,8 +18,8 @@
 import { ref } from 'vue';
 
 const navLinks = ref([
-  { name: 'Beranda', path: '#' },
-  { name: 'Tentang Kami', path: '#' },
+  { name: 'Beranda', path: '#beranda' },
+  { name: 'Tentang Kami', path: '#tentang-kami' },
   { name: 'Templat', path: '#' },
   { name: 'Panduan', path: '#' },
   { name: 'Keistimewaan', path: '#' },
diff --git a/proyek-frontend/app/components/landing-page/hero.vue b/proyek-frontend/app/components/landing-page/hero.vue
index 05be4f8..06664a3 100644
--- a/proyek-frontend/app/components/landing-page/hero.vue
+++ b/proyek-frontend/app/components/landing-page/hero.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="hero-section">
+  <section id="beranda" class="hero-section">
     <div class="container hero-layout">
       <div class="hero-text">
         <h1>