diff --git a/proyek-frontend/app/components/landing-page/header.vue b/proyek-frontend/app/components/landing-page/header.vue
index 5fc5812..05c2d2e 100644
--- a/proyek-frontend/app/components/landing-page/header.vue
+++ b/proyek-frontend/app/components/landing-page/header.vue
@@ -29,7 +29,7 @@ const navLinks = ref([
 
 <style scoped>
 .main-header {
-  background-color: #eaf2ff; /* Warna biru muda */
+  background-color: #eaf2ff; 
   padding: 15px 0;
   border-bottom: 1px solid #d4e3ff;
   width: 100%;
@@ -49,18 +49,18 @@ const navLinks = ref([
   align-items: center;
   font-weight: bold;
   font-size: 1.5rem;
-  color: #0d6efd; /* Biru Primer */
+  color: #0d6efd; 
 }
 
 .logo-icon {
-  width: 40px; /* Sesuaikan ukuran logo */
+  width: 40px;
   margin-right: 10px;
 }
 
 .nav-links {
   list-style: none;
   display: flex;
-  gap: 30px; /* Jarak antar menu */
+  gap: 30px; 
   margin: 0;
   padding: 0;
 }
@@ -73,6 +73,6 @@ const navLinks = ref([
 }
 
 .nav-links a:hover {
-  color: #0d6efd; /* Warna biru saat di-hover */
+  color: #0d6efd; 
 }
 </style>
\ No newline at end of file
diff --git a/proyek-frontend/app/components/landing-page/howtosection.vue b/proyek-frontend/app/components/landing-page/howtosection.vue
index bdd8407..75652a3 100644
--- a/proyek-frontend/app/components/landing-page/howtosection.vue
+++ b/proyek-frontend/app/components/landing-page/howtosection.vue
@@ -83,6 +83,7 @@ const steps = [
 
 .howto-card:hover {
   transform: translateY(-4px);
+  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
 }
 
 .card-icon {