diff --git a/config/__pycache__/settings.cpython-311.pyc b/config/__pycache__/settings.cpython-311.pyc
index 8e4ba6f..181a635 100644
Binary files a/config/__pycache__/settings.cpython-311.pyc and b/config/__pycache__/settings.cpython-311.pyc differ
diff --git a/config/__pycache__/urls.cpython-311.pyc b/config/__pycache__/urls.cpython-311.pyc
index ee29217..5264a83 100644
Binary files a/config/__pycache__/urls.cpython-311.pyc and b/config/__pycache__/urls.cpython-311.pyc differ
diff --git a/config/settings.py b/config/settings.py
index 1788f98..c90f1e1 100644
--- a/config/settings.py
+++ b/config/settings.py
@@ -183,3 +183,6 @@ if EMAIL_USE_SSL:
 # https://docs.djangoproject.com/en/5.2/ref/settings/#default-auto-field
 
 DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
+
+LOGIN_REDIRECT_URL = 'dashboard'
+LOGOUT_REDIRECT_URL = 'home'
diff --git a/config/urls.py b/config/urls.py
index 1a48858..4824951 100644
--- a/config/urls.py
+++ b/config/urls.py
@@ -24,7 +24,6 @@ urlpatterns = [
     path("", include("core.urls")),
 ]
 
-if settings.DEBUG:
-    urlpatterns += static("/assets/", document_root=settings.BASE_DIR / "assets")
-    urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
-    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
+# Always serve media files in dev environment
+urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
+urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
diff --git a/core/templates/base.html b/core/templates/base.html
index 93e9e3c..07a3095 100644
--- a/core/templates/base.html
+++ b/core/templates/base.html
@@ -27,7 +27,7 @@
   <nav class="navbar navbar-expand-lg sticky-top">
     <div class="container">
       <a class="navbar-brand fw-bold" href="{% url 'home' %}">
-        <i class="fa-solid fa-shop text-emerald me-2"></i><span class="text-emerald">UMKM</span> Pemagarsari
+        <i class="fa-solid fa-shop text-orange me-2"></i><span class="text-orange">UMKM</span> Pemagarsari
       </a>
       <button class="navbar-toggler border-0 shadow-none" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
         <span class="navbar-toggler-icon"></span>
@@ -61,7 +61,7 @@
           </li>
           {% else %}
           <li class="nav-item ms-lg-3">
-            <a class="btn btn-emerald rounded-pill px-4" href="{% url 'login' %}">
+            <a class="btn btn-orange rounded-pill px-4" href="{% url 'login' %}">
               <i class="fa-solid fa-right-to-bracket me-2"></i>Masuk
             </a>
           </li>
diff --git a/core/templates/core/auth/login.html b/core/templates/core/auth/login.html
index c7fb9b3..c3c7576 100644
--- a/core/templates/core/auth/login.html
+++ b/core/templates/core/auth/login.html
@@ -22,7 +22,7 @@
                         <label class="form-label fw-bold">Password</label>
                         <input type="password" name="password" class="form-control rounded-3 shadow-none py-2" required>
                     </div>
-                    <button type="submit" class="btn btn-emerald w-100 rounded-pill py-3 mb-3">
+                    <button type="submit" class="btn btn-orange w-100 rounded-pill py-3 mb-3">
                         Masuk Sekarang
                     </button>
                 </form>
diff --git a/core/templates/core/dashboard/index.html b/core/templates/core/dashboard/index.html
index f5bf0ab..eb1e511 100644
--- a/core/templates/core/dashboard/index.html
+++ b/core/templates/core/dashboard/index.html
@@ -10,10 +10,10 @@
             <p class="text-muted mb-0">Kelola toko dan produk Anda di sini.</p>
         </div>
         <div class="d-flex gap-2">
-            <a href="{% url 'shop_add' %}" class="btn btn-outline-emerald rounded-pill px-4">
+            <a href="{% url 'shop_add' %}" class="btn btn-outline-orange rounded-pill px-4">
                 <i class="fa-solid fa-shop me-2"></i>Tambah Toko
             </a>
-            <a href="{% url 'product_add' %}" class="btn btn-emerald rounded-pill px-4">
+            <a href="{% url 'product_add' %}" class="btn btn-orange rounded-pill px-4">
                 <i class="fa-solid fa-plus me-2"></i>Tambah Produk
             </a>
         </div>
@@ -24,8 +24,8 @@
         <div class="col-md-6 col-lg-3">
             <div class="card border-0 rounded-4 shadow-sm p-4">
                 <div class="d-flex align-items-center mb-2">
-                    <div class="bg-emerald bg-opacity-10 p-2 rounded-3 me-3">
-                        <i class="fa-solid fa-shop text-emerald"></i>
+                    <div class="bg-orange bg-opacity-10 p-2 rounded-3 me-3">
+                        <i class="fa-solid fa-shop text-orange"></i>
                     </div>
                     <span class="text-muted small">Toko Anda</span>
                 </div>
@@ -155,7 +155,7 @@
                     <tr>
                         <td colspan="6" class="text-center py-5">
                             <p class="text-muted mb-3">Anda belum menambahkan produk.</p>
-                            <a href="{% url 'product_add' %}" class="btn btn-emerald btn-sm rounded-pill px-4">Tambah Sekarang</a>
+                            <a href="{% url 'product_add' %}" class="btn btn-orange btn-sm rounded-pill px-4">Tambah Sekarang</a>
                         </td>
                     </tr>
                     {% endfor %}
diff --git a/core/templates/core/dashboard/product_form.html b/core/templates/core/dashboard/product_form.html
index ff1fe5d..b235928 100644
--- a/core/templates/core/dashboard/product_form.html
+++ b/core/templates/core/dashboard/product_form.html
@@ -61,7 +61,7 @@
                             <small class="text-muted">Kosongkan jika tidak ingin mengubah foto.</small>
                         </div>
                         <div class="col-12 pt-3">
-                            <button type="submit" class="btn btn-emerald btn-lg w-100 rounded-pill py-3">
+                            <button type="submit" class="btn btn-orange btn-lg w-100 rounded-pill py-3">
                                 <i class="fa-solid fa-save me-2"></i>Simpan Produk
                             </button>
                         </div>
diff --git a/core/templates/core/dashboard/shop_form.html b/core/templates/core/dashboard/shop_form.html
index fad7e3d..0944365 100644
--- a/core/templates/core/dashboard/shop_form.html
+++ b/core/templates/core/dashboard/shop_form.html
@@ -41,7 +41,7 @@
                             <input type="file" name="logo" class="form-control rounded-3 shadow-none">
                         </div>
                         <div class="col-12 pt-3">
-                            <button type="submit" class="btn btn-emerald btn-lg w-100 rounded-pill py-3">
+                            <button type="submit" class="btn btn-orange btn-lg w-100 rounded-pill py-3">
                                 <i class="fa-solid fa-save me-2"></i>Simpan Toko
                             </button>
                         </div>
diff --git a/core/templates/core/index.html b/core/templates/core/index.html
index 42632dd..a4f15ac 100644
--- a/core/templates/core/index.html
+++ b/core/templates/core/index.html
@@ -4,10 +4,10 @@
 {% block content %}
 <!-- Main Banner -->
 <div class="container-fluid px-0 mb-4">
-    <div class="position-relative overflow-hidden" style="max-height: 450px;">
-        <img src="{% static 'images/banner.png' %}" alt="Banner Desa Pemagarsari" class="w-100 h-100" style="object-fit: cover; object-position: center;">
-        <div class="position-absolute bottom-0 start-0 w-100 p-4 bg-gradient-dark text-white d-md-none">
-            <h3 class="fw-bold mb-0">Selamat Datang</h3>
+    <div class="banner-wrapper">
+        <img src="{% static 'images/banner.png' %}" alt="Banner Desa Pemagarsari" class="banner-img">
+        <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center bg-dark bg-opacity-25">
+            <h2 class="text-white fw-bold d-md-none">Desa Pemagarsari</h2>
         </div>
     </div>
 </div>
@@ -15,34 +15,34 @@
 <!-- Hero Section -->
 <section class="hero-section">
     <div class="container">
-        <div class="row align-items-center">
-            <div class="col-lg-6">
-                <span class="badge bg-emerald mb-3 px-3 py-2 rounded-pill">Digitalisasi UMKM Desa</span>
+        <div class="row align-items-center g-4">
+            <div class="col-lg-6 order-2 order-lg-1">
+                <div class="d-inline-block badge bg-orange mb-3 px-3 py-2 rounded-pill">Digitalisasi UMKM Desa</div>
                 <h1 class="hero-title mb-4">Majukan Ekonomi Desa Pemagarsari</h1>
-                <p class="lead text-muted mb-4">Temukan produk unggulan dari warga desa kami. Pesan langsung via WhatsApp tanpa ribet, dukung produk lokal hari ini.</p>
+                <p class="lead text-muted mb-4 text-center text-lg-start">Temukan produk unggulan dari warga desa kami. Pesan langsung via WhatsApp tanpa ribet, dukung produk lokal hari ini.</p>
                 
                 <!-- Search Bar -->
                 <form action="{% url 'home' %}" method="GET" class="mb-4">
                     <div class="search-box p-2 bg-white rounded-pill shadow-sm d-flex">
-                        <input type="text" name="q" value="{{ query }}" class="form-control border-0 bg-transparent px-4 shadow-none" placeholder="Cari kerajinan, makanan, atau jasa...">
-                        <button type="submit" class="btn btn-emerald rounded-pill px-4">
-                            <i class="fa-solid fa-magnifying-glass me-2"></i>Cari
+                        <input type="text" name="q" value="{{ query|default:'' }}" class="form-control border-0 bg-transparent px-3 px-md-4 shadow-none" placeholder="Cari produk...">
+                        <button type="submit" class="btn btn-orange rounded-pill px-3 px-md-4">
+                            <i class="fa-solid fa-magnifying-glass"></i><span class="d-none d-md-inline ms-2">Cari</span>
                         </button>
                     </div>
                 </form>
 
-                <div class="d-flex flex-wrap gap-3">
-                    <a href="#produk" class="btn btn-outline-emerald rounded-pill px-4">Jelajahi Produk</a>
+                <div class="d-flex flex-wrap gap-3 justify-content-center justify-content-lg-start">
+                    <a href="#produk" class="btn btn-orange rounded-pill px-4">Jelajahi Produk</a>
                     {% if query or selected_category %}
                     <a href="{% url 'home' %}" class="btn btn-link text-muted text-decoration-none">Reset Filter</a>
                     {% endif %}
                 </div>
             </div>
-            <div class="col-lg-6 d-none d-lg-block text-center">
-                <div class="position-relative p-4">
-                    <div class="bg-emerald rounded-circle position-absolute top-50 start-50 translate-middle opacity-10" style="width: 500px; height: 500px; filter: blur(60px);"></div>
-                    <div class="position-relative z-1 shadow-lg rounded-4 overflow-hidden border border-white border-4 transform-hover transition-all" style="aspect-ratio: 4/3;">
-                        <img src="https://images.unsplash.com/photo-1488459716781-31db52582fe9?auto=format&fit=crop&q=90&w=1000" alt="Pasar Tradisional Desa" class="w-100 h-100" style="object-fit: cover; object-position: center;">
+            <div class="col-lg-6 order-1 order-lg-2">
+                <div class="position-relative p-2 p-md-4">
+                    <div class="bg-orange rounded-circle position-absolute top-50 start-50 translate-middle opacity-10 d-none d-md-block" style="width: 100%; height: 100%; filter: blur(60px);"></div>
+                    <div class="position-relative z-1 shadow-lg rounded-4 overflow-hidden border border-white border-4 transform-hover transition-all mx-auto" style="max-width: 500px; aspect-ratio: 4/3;">
+                        <img src="https://images.unsplash.com/photo-1488459716781-31db52582fe9?auto=format&fit=crop&q=90&w=800" alt="Pasar Tradisional Desa" class="w-100 h-100 object-fit-cover">
                     </div>
                 </div>
             </div>
@@ -120,7 +120,7 @@
                 <div class="bg-white p-5 rounded-4 shadow-sm">
                     <i class="fa-solid fa-box-open fa-3x text-muted mb-3"></i>
                     <p class="text-muted">Belum ada produk untuk ditampilkan.</p>
-                    <a href="/admin/core/product/add/" class="btn btn-emerald mt-3">Tambah Produk Pertama</a>
+                    <a href="/admin/core/product/add/" class="btn btn-orange mt-3">Tambah Produk Pertama</a>
                 </div>
             </div>
             {% endfor %}
@@ -131,12 +131,12 @@
 <!-- Call to Action -->
 <section class="py-5">
     <div class="container">
-        <div class="p-5 rounded-4 text-white text-center position-relative overflow-hidden shadow-lg" style="background: linear-gradient(135deg, rgba(6, 78, 59, 0.85) 0%, rgba(16, 185, 129, 0.75) 100%), url('https://images.unsplash.com/photo-1516253593875-bd7ba052fbc5?auto=format&fit=crop&q=90&w=1200'); background-size: cover; background-position: center;">
+        <div class="p-5 rounded-4 text-white text-center position-relative overflow-hidden shadow-lg" style="background: linear-gradient(135deg, rgba(30, 58, 138, 0.85) 0%, rgba(249, 115, 22, 0.75) 100%), url('https://images.unsplash.com/photo-1516253593875-bd7ba052fbc5?auto=format&fit=crop&q=90&w=1200'); background-size: cover; background-position: center;">
             <div class="position-relative z-1">
                 <h2 class="fw-bold mb-3">Punya Usaha di Desa Pemagarsari?</h2>
                 <p class="mb-4 opacity-75">Daftarkan toko Anda dan mulai jualan online hari ini. Mudah, gratis, dan langsung ke WhatsApp!</p>
                 <div class="d-flex justify-content-center gap-3">
-                    <a href="{% if user.is_authenticated %}{% url 'dashboard' %}{% else %}{% url 'login' %}{% endif %}" class="btn btn-emerald btn-lg px-5 rounded-pill shadow-lg">Mulai Jualan Sekarang</a>
+                    <a href="{% if user.is_authenticated %}{% url 'dashboard' %}{% else %}{% url 'login' %}{% endif %}" class="btn btn-orange btn-lg px-5 rounded-pill shadow-lg">Mulai Jualan Sekarang</a>
                 </div>
             </div>
         </div>
diff --git a/core/templates/core/product_detail.html b/core/templates/core/product_detail.html
index c674a82..a207791 100644
--- a/core/templates/core/product_detail.html
+++ b/core/templates/core/product_detail.html
@@ -8,7 +8,7 @@
     <div class="container">
         <nav aria-label="breadcrumb" class="mb-4">
             <ol class="breadcrumb">
-                <li class="breadcrumb-item"><a href="{% url 'home' %}" class="text-decoration-none text-emerald">Beranda</a></li>
+                <li class="breadcrumb-item"><a href="{% url 'home' %}" class="text-decoration-none text-orange">Beranda</a></li>
                 <li class="breadcrumb-item active" aria-current="page">{{ product.name }}</li>
             </ol>
         </nav>
@@ -27,11 +27,11 @@
             </div>
             <div class="col-md-6">
                 <div class="ps-lg-4">
-                    <span class="badge bg-emerald mb-2 px-3 py-2 rounded-pill">{{ product.category.name }}</span>
+                    <span class="badge bg-orange mb-2 px-3 py-2 rounded-pill">{{ product.category.name }}</span>
                     <h1 class="fw-bold mb-3">{{ product.name }}</h1>
                     <div class="d-flex align-items-center mb-4">
                         <div class="bg-light p-2 rounded-3 me-3">
-                            <i class="fa-solid fa-shop text-emerald"></i>
+                            <i class="fa-solid fa-shop text-orange"></i>
                         </div>
                         <div>
                             <p class="mb-0 small text-muted">Dijual oleh</p>
@@ -48,7 +48,7 @@
 
                     <div class="card border-0 bg-light rounded-4 p-4 mb-4">
                         <div class="d-flex align-items-center mb-3">
-                            <i class="fa-solid fa-circle-info text-emerald me-2"></i>
+                            <i class="fa-solid fa-circle-info text-orange me-2"></i>
                             <h6 class="fw-bold mb-0">Cara Pemesanan</h6>
                         </div>
                         <p class="small text-muted mb-0">Klik tombol di bawah untuk terhubung langsung dengan WhatsApp penjual. Pesan otomatis akan terisi dengan detail produk ini.</p>
diff --git a/core/templates/core/shop_detail.html b/core/templates/core/shop_detail.html
index f22f1e3..a7b9b5c 100644
--- a/core/templates/core/shop_detail.html
+++ b/core/templates/core/shop_detail.html
@@ -12,7 +12,7 @@
             </div>
             <div class="row align-items-center position-relative z-1">
                 <div class="col-md-auto mb-4 mb-md-0 text-center">
-                    <div class="bg-emerald rounded-circle d-flex align-items-center justify-content-center text-white mx-auto" style="width: 120px; height: 120px; overflow: hidden;">
+                    <div class="bg-orange rounded-circle d-flex align-items-center justify-content-center text-white mx-auto" style="width: 120px; height: 120px; overflow: hidden;">
                         {% if shop.logo %}
                         <img src="{{ shop.logo.url }}" alt="{{ shop.name }}" class="img-fluid w-100 h-100 object-fit-cover">
                         {% else %}
@@ -29,7 +29,7 @@
                             <span class="fw-bold">{{ shop.whatsapp_number }}</span>
                         </div>
                         <div class="d-flex align-items-center bg-light px-3 py-2 rounded-pill">
-                            <i class="fa-solid fa-box text-emerald me-2"></i>
+                            <i class="fa-solid fa-box text-orange me-2"></i>
                             <span>{{ products.count }} Produk</span>
                         </div>
                     </div>
diff --git a/core/templates/core/shop_list.html b/core/templates/core/shop_list.html
index 8907d0d..390dba0 100644
--- a/core/templates/core/shop_list.html
+++ b/core/templates/core/shop_list.html
@@ -15,7 +15,7 @@
             <div class="col-md-6 col-lg-4">
                 <div class="card border-0 rounded-4 shadow-sm h-100 overflow-hidden">
                     <div class="row g-0 h-100">
-                        <div class="col-4 bg-emerald d-flex align-items-center justify-content-center text-white">
+                        <div class="col-4 bg-orange d-flex align-items-center justify-content-center text-white">
                             {% if shop.logo %}
                             <img src="{{ shop.logo.url }}" alt="{{ shop.name }}" class="img-fluid w-100 h-100 object-fit-cover">
                             {% else %}
@@ -30,7 +30,7 @@
                                     <i class="fa-brands fa-whatsapp text-success me-2"></i>
                                     <span class="small text-muted">{{ shop.whatsapp_number }}</span>
                                 </div>
-                                <a href="{% url 'shop_detail' shop.slug %}" class="btn btn-outline-emerald btn-sm rounded-pill px-4">Kunjungi Toko</a>
+                                <a href="{% url 'shop_detail' shop.slug %}" class="btn btn-outline-orange btn-sm rounded-pill px-4">Kunjungi Toko</a>
                             </div>
                         </div>
                     </div>
diff --git a/media/product_images/Golden_banana_chips_in_garden_sunshine_1.png b/media/product_images/Golden_banana_chips_in_garden_sunshine_1.png
old mode 100644
new mode 100755
diff --git a/media/product_images/Golden_banana_chips_in_wooden_bowl.png b/media/product_images/Golden_banana_chips_in_wooden_bowl.png
old mode 100644
new mode 100755
diff --git a/media/product_images/Jajanan_Pasar_Masakan_Nusantara.png b/media/product_images/Jajanan_Pasar_Masakan_Nusantara.png
old mode 100644
new mode 100755
diff --git a/media/product_images/Laundry_Ibu_Tini_logo_design_1.png b/media/product_images/Laundry_Ibu_Tini_logo_design_1.png
old mode 100644
new mode 100755
diff --git a/media/product_images/Masakan_Nusantara_Ibu_Tini.png b/media/product_images/Masakan_Nusantara_Ibu_Tini.png
old mode 100644
new mode 100755
diff --git a/media/shop_logos/7819e47b-9455-4740-bb47-199007a1b8a4_fM25NsS.png b/media/shop_logos/7819e47b-9455-4740-bb47-199007a1b8a4_fM25NsS.png
old mode 100644
new mode 100755
diff --git a/media/shop_logos/Kripik_Pisang_logo_design.png b/media/shop_logos/Kripik_Pisang_logo_design.png
old mode 100644
new mode 100755
diff --git a/media/shop_logos/Logo_Masakan_Nusantara_Ibu_Tini.png b/media/shop_logos/Logo_Masakan_Nusantara_Ibu_Tini.png
old mode 100644
new mode 100755
diff --git a/static/css/custom.css b/static/css/custom.css
old mode 100644
new mode 100755
index deea78e..f953d51
--- a/static/css/custom.css
+++ b/static/css/custom.css
@@ -1,15 +1,23 @@
 :root {
-    --emerald-primary: #10B981;
-    --emerald-dark: #059669;
-    --forest-deep: #064E3B;
+    --primary-orange: #F97316; /* Orange 500 */
+    --dark-orange: #EA580C;    /* Orange 600 */
+    --primary-blue: #2563EB;   /* Blue 600 */
+    --dark-blue: #1E40AF;      /* Blue 800 */
+    --deep-blue: #1E3A8A;      /* Blue 900 */
+    
+    /* Compatibility Mapping */
+    --emerald-primary: var(--primary-orange);
+    --emerald-dark: var(--dark-orange);
+    --forest-deep: var(--deep-blue);
+    
     --amber-warm: #F59E0B;
-    --glass-bg: rgba(255, 255, 255, 0.8);
-    --soft-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
+    --glass-bg: rgba(255, 255, 255, 0.9);
+    --soft-shadow: 0 10px 30px rgba(30, 58, 138, 0.1);
 }
 
 body {
     font-family: 'Inter', sans-serif;
-    background-color: #f8fafc;
+    background-color: #F0FDF4; /* Hijau Muda */
     color: #1e293b;
 }
 
@@ -17,46 +25,94 @@ h1, h2, h3, h4, .navbar-brand {
     font-family: 'Poppins', sans-serif;
 }
 
-.text-emerald {
-    color: var(--emerald-primary);
+/* Orange Styles */
+.text-orange, .text-emerald {
+    color: var(--primary-orange);
 }
 
-.bg-emerald {
-    background-color: var(--emerald-primary);
+.bg-orange, .bg-emerald {
+    background-color: var(--primary-orange);
 }
 
-.btn-emerald {
-    background-color: var(--emerald-primary);
-    border-color: var(--emerald-primary);
+.btn-orange, .btn-emerald {
+    background-color: var(--primary-orange);
+    border-color: var(--primary-orange);
     color: white;
     font-weight: 600;
     transition: all 0.3s ease;
 }
 
-.btn-emerald:hover {
-    background-color: var(--emerald-dark);
-    border-color: var(--emerald-dark);
+.btn-orange:hover, .btn-emerald:hover {
+    background-color: var(--dark-orange);
+    border-color: var(--dark-orange);
     color: white;
     transform: translateY(-2px);
-    box-shadow: 0 5px 15px rgba(16, 185, 129, 0.4);
+    box-shadow: 0 5px 15px rgba(249, 115, 22, 0.4);
+}
+
+.btn-outline-orange, .btn-outline-emerald {
+    color: var(--primary-orange);
+    border: 2px solid var(--primary-orange);
+    font-weight: 600;
+    transition: all 0.3s ease;
+}
+
+.btn-outline-orange:hover, .btn-outline-emerald:hover {
+    background-color: var(--primary-orange);
+    color: white;
+    transform: translateY(-2px);
+}
+
+/* Blue Styles */
+.text-blue {
+    color: var(--primary-blue);
+}
+
+.bg-blue {
+    background-color: var(--primary-blue);
+}
+
+.btn-blue {
+    background-color: var(--primary-blue);
+    border-color: var(--primary-blue);
+    color: white;
+    font-weight: 600;
+    transition: all 0.3s ease;
+}
+
+.btn-blue:hover {
+    background-color: var(--dark-blue);
+    border-color: var(--dark-blue);
+    color: white;
+    transform: translateY(-2px);
+    box-shadow: 0 5px 15px rgba(37, 99, 235, 0.4);
 }
 
 .navbar {
     background: var(--glass-bg);
     backdrop-filter: blur(10px);
-    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+    border-bottom: 1px solid rgba(30, 58, 138, 0.05);
     padding: 1rem 0;
 }
 
 .navbar-brand {
     font-size: 1.5rem;
-    color: var(--forest-deep);
+    color: var(--deep-blue);
+}
+
+.nav-link {
+    color: var(--deep-blue);
+    font-weight: 500;
+}
+
+.nav-link:hover {
+    color: var(--primary-orange);
 }
 
 /* Hero Section */
 .hero-section {
     padding: 100px 0;
-    background: linear-gradient(135deg, #ecfdf5 0%, #ffffff 100%);
+    background: linear-gradient(135deg, #DCFCE7 0%, #F0FDF4 100%);
     position: relative;
     overflow: hidden;
 }
@@ -68,7 +124,7 @@ h1, h2, h3, h4, .navbar-brand {
     right: -5%;
     width: 400px;
     height: 400px;
-    background: radial-gradient(circle, rgba(16, 185, 129, 0.1) 0%, rgba(255, 255, 255, 0) 70%);
+    background: radial-gradient(circle, rgba(34, 197, 94, 0.1) 0%, rgba(255, 255, 255, 0) 70%);
     z-index: 0;
 }
 
@@ -76,7 +132,7 @@ h1, h2, h3, h4, .navbar-brand {
     font-size: 3.5rem;
     font-weight: 800;
     line-height: 1.2;
-    color: var(--forest-deep);
+    color: var(--deep-blue);
 }
 
 /* Cards */
@@ -94,14 +150,14 @@ h1, h2, h3, h4, .navbar-brand {
 
 .category-card:hover {
     transform: translateY(-5px);
-    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 15px 40px rgba(30, 58, 138, 0.15);
 }
 
 .category-icon {
     width: 60px;
     height: 60px;
-    background: #ecfdf5;
-    color: var(--emerald-primary);
+    background: #fff7ed;
+    color: var(--primary-orange);
     border-radius: 15px;
     display: flex;
     align-items: center;
@@ -122,7 +178,7 @@ h1, h2, h3, h4, .navbar-brand {
 
 .product-card:hover {
     transform: translateY(-5px);
-    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 15px 40px rgba(30, 58, 138, 0.15);
 }
 
 .product-img-wrapper {
@@ -152,14 +208,14 @@ h1, h2, h3, h4, .navbar-brand {
 }
 
 .product-price {
-    color: var(--emerald-primary);
+    color: var(--primary-orange);
     font-weight: 700;
     font-size: 1.25rem;
 }
 
 .shop-badge {
-    background: #f1f5f9;
-    color: #64748b;
+    background: #eff6ff;
+    color: var(--primary-blue);
     padding: 4px 12px;
     border-radius: 100px;
     font-size: 0.75rem;
@@ -193,7 +249,7 @@ h1, h2, h3, h4, .navbar-brand {
 .transform-hover:hover {
     animation-play-state: paused;
     transform: scale(1.03) translateY(-5px);
-    box-shadow: 0 30px 60px -12px rgba(16, 185, 129, 0.3) !important;
+    box-shadow: 0 30px 60px -12px rgba(249, 115, 22, 0.3) !important;
 }
 
 .transition-all {
@@ -202,18 +258,18 @@ h1, h2, h3, h4, .navbar-brand {
 
 /* Search Box */
 .search-box {
-    border: 1px solid rgba(0,0,0,0.05);
+    border: 1px solid rgba(30, 58, 138, 0.1);
     transition: all 0.3s ease;
 }
 
 .search-box:focus-within {
-    border-color: var(--emerald-primary);
-    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1) !important;
+    border-color: var(--primary-orange);
+    box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.1) !important;
 }
 
 /* Categories Active State */
 .category-card.active {
-    background: var(--forest-deep);
+    background: var(--deep-blue);
     color: white !important;
 }
 
@@ -226,8 +282,49 @@ h1, h2, h3, h4, .navbar-brand {
     color: white !important;
 }
 
+footer {
+    background-color: #F0FDF4;
+    border-top: 1px solid rgba(34, 197, 94, 0.1);
+}
+
 @media (max-width: 768px) {
     .hero-title {
-        font-size: 2.5rem;
+        font-size: 2.2rem;
+        text-align: center;
+    }
+    .hero-section {
+        padding: 60px 0;
+        text-align: center;
+    }
+    .banner-wrapper {
+        height: 200px !important;
+    }
+    .category-card {
+        padding: 1.2rem;
+    }
+    .category-icon {
+        width: 50px;
+        height: 50px;
+        font-size: 1.2rem;
+        margin-bottom: 1rem;
     }
 }
+
+/* Utilities */
+.banner-wrapper {
+    height: 400px;
+    width: 100%;
+    position: relative;
+    overflow: hidden;
+}
+
+.banner-img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: center;
+}
+
+.object-fit-cover {
+    object-fit: cover;
+}
diff --git a/static/images/banner.png b/static/images/banner.png
new file mode 100755
index 0000000..2cb6ce7
Binary files /dev/null and b/static/images/banner.png differ
diff --git a/staticfiles/css/custom.css b/staticfiles/css/custom.css
index deea78e..f953d51 100644
--- a/staticfiles/css/custom.css
+++ b/staticfiles/css/custom.css
@@ -1,15 +1,23 @@
 :root {
-    --emerald-primary: #10B981;
-    --emerald-dark: #059669;
-    --forest-deep: #064E3B;
+    --primary-orange: #F97316; /* Orange 500 */
+    --dark-orange: #EA580C;    /* Orange 600 */
+    --primary-blue: #2563EB;   /* Blue 600 */
+    --dark-blue: #1E40AF;      /* Blue 800 */
+    --deep-blue: #1E3A8A;      /* Blue 900 */
+    
+    /* Compatibility Mapping */
+    --emerald-primary: var(--primary-orange);
+    --emerald-dark: var(--dark-orange);
+    --forest-deep: var(--deep-blue);
+    
     --amber-warm: #F59E0B;
-    --glass-bg: rgba(255, 255, 255, 0.8);
-    --soft-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
+    --glass-bg: rgba(255, 255, 255, 0.9);
+    --soft-shadow: 0 10px 30px rgba(30, 58, 138, 0.1);
 }
 
 body {
     font-family: 'Inter', sans-serif;
-    background-color: #f8fafc;
+    background-color: #F0FDF4; /* Hijau Muda */
     color: #1e293b;
 }
 
@@ -17,46 +25,94 @@ h1, h2, h3, h4, .navbar-brand {
     font-family: 'Poppins', sans-serif;
 }
 
-.text-emerald {
-    color: var(--emerald-primary);
+/* Orange Styles */
+.text-orange, .text-emerald {
+    color: var(--primary-orange);
 }
 
-.bg-emerald {
-    background-color: var(--emerald-primary);
+.bg-orange, .bg-emerald {
+    background-color: var(--primary-orange);
 }
 
-.btn-emerald {
-    background-color: var(--emerald-primary);
-    border-color: var(--emerald-primary);
+.btn-orange, .btn-emerald {
+    background-color: var(--primary-orange);
+    border-color: var(--primary-orange);
     color: white;
     font-weight: 600;
     transition: all 0.3s ease;
 }
 
-.btn-emerald:hover {
-    background-color: var(--emerald-dark);
-    border-color: var(--emerald-dark);
+.btn-orange:hover, .btn-emerald:hover {
+    background-color: var(--dark-orange);
+    border-color: var(--dark-orange);
     color: white;
     transform: translateY(-2px);
-    box-shadow: 0 5px 15px rgba(16, 185, 129, 0.4);
+    box-shadow: 0 5px 15px rgba(249, 115, 22, 0.4);
+}
+
+.btn-outline-orange, .btn-outline-emerald {
+    color: var(--primary-orange);
+    border: 2px solid var(--primary-orange);
+    font-weight: 600;
+    transition: all 0.3s ease;
+}
+
+.btn-outline-orange:hover, .btn-outline-emerald:hover {
+    background-color: var(--primary-orange);
+    color: white;
+    transform: translateY(-2px);
+}
+
+/* Blue Styles */
+.text-blue {
+    color: var(--primary-blue);
+}
+
+.bg-blue {
+    background-color: var(--primary-blue);
+}
+
+.btn-blue {
+    background-color: var(--primary-blue);
+    border-color: var(--primary-blue);
+    color: white;
+    font-weight: 600;
+    transition: all 0.3s ease;
+}
+
+.btn-blue:hover {
+    background-color: var(--dark-blue);
+    border-color: var(--dark-blue);
+    color: white;
+    transform: translateY(-2px);
+    box-shadow: 0 5px 15px rgba(37, 99, 235, 0.4);
 }
 
 .navbar {
     background: var(--glass-bg);
     backdrop-filter: blur(10px);
-    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+    border-bottom: 1px solid rgba(30, 58, 138, 0.05);
     padding: 1rem 0;
 }
 
 .navbar-brand {
     font-size: 1.5rem;
-    color: var(--forest-deep);
+    color: var(--deep-blue);
+}
+
+.nav-link {
+    color: var(--deep-blue);
+    font-weight: 500;
+}
+
+.nav-link:hover {
+    color: var(--primary-orange);
 }
 
 /* Hero Section */
 .hero-section {
     padding: 100px 0;
-    background: linear-gradient(135deg, #ecfdf5 0%, #ffffff 100%);
+    background: linear-gradient(135deg, #DCFCE7 0%, #F0FDF4 100%);
     position: relative;
     overflow: hidden;
 }
@@ -68,7 +124,7 @@ h1, h2, h3, h4, .navbar-brand {
     right: -5%;
     width: 400px;
     height: 400px;
-    background: radial-gradient(circle, rgba(16, 185, 129, 0.1) 0%, rgba(255, 255, 255, 0) 70%);
+    background: radial-gradient(circle, rgba(34, 197, 94, 0.1) 0%, rgba(255, 255, 255, 0) 70%);
     z-index: 0;
 }
 
@@ -76,7 +132,7 @@ h1, h2, h3, h4, .navbar-brand {
     font-size: 3.5rem;
     font-weight: 800;
     line-height: 1.2;
-    color: var(--forest-deep);
+    color: var(--deep-blue);
 }
 
 /* Cards */
@@ -94,14 +150,14 @@ h1, h2, h3, h4, .navbar-brand {
 
 .category-card:hover {
     transform: translateY(-5px);
-    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 15px 40px rgba(30, 58, 138, 0.15);
 }
 
 .category-icon {
     width: 60px;
     height: 60px;
-    background: #ecfdf5;
-    color: var(--emerald-primary);
+    background: #fff7ed;
+    color: var(--primary-orange);
     border-radius: 15px;
     display: flex;
     align-items: center;
@@ -122,7 +178,7 @@ h1, h2, h3, h4, .navbar-brand {
 
 .product-card:hover {
     transform: translateY(-5px);
-    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 15px 40px rgba(30, 58, 138, 0.15);
 }
 
 .product-img-wrapper {
@@ -152,14 +208,14 @@ h1, h2, h3, h4, .navbar-brand {
 }
 
 .product-price {
-    color: var(--emerald-primary);
+    color: var(--primary-orange);
     font-weight: 700;
     font-size: 1.25rem;
 }
 
 .shop-badge {
-    background: #f1f5f9;
-    color: #64748b;
+    background: #eff6ff;
+    color: var(--primary-blue);
     padding: 4px 12px;
     border-radius: 100px;
     font-size: 0.75rem;
@@ -193,7 +249,7 @@ h1, h2, h3, h4, .navbar-brand {
 .transform-hover:hover {
     animation-play-state: paused;
     transform: scale(1.03) translateY(-5px);
-    box-shadow: 0 30px 60px -12px rgba(16, 185, 129, 0.3) !important;
+    box-shadow: 0 30px 60px -12px rgba(249, 115, 22, 0.3) !important;
 }
 
 .transition-all {
@@ -202,18 +258,18 @@ h1, h2, h3, h4, .navbar-brand {
 
 /* Search Box */
 .search-box {
-    border: 1px solid rgba(0,0,0,0.05);
+    border: 1px solid rgba(30, 58, 138, 0.1);
     transition: all 0.3s ease;
 }
 
 .search-box:focus-within {
-    border-color: var(--emerald-primary);
-    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1) !important;
+    border-color: var(--primary-orange);
+    box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.1) !important;
 }
 
 /* Categories Active State */
 .category-card.active {
-    background: var(--forest-deep);
+    background: var(--deep-blue);
     color: white !important;
 }
 
@@ -226,8 +282,49 @@ h1, h2, h3, h4, .navbar-brand {
     color: white !important;
 }
 
+footer {
+    background-color: #F0FDF4;
+    border-top: 1px solid rgba(34, 197, 94, 0.1);
+}
+
 @media (max-width: 768px) {
     .hero-title {
-        font-size: 2.5rem;
+        font-size: 2.2rem;
+        text-align: center;
+    }
+    .hero-section {
+        padding: 60px 0;
+        text-align: center;
+    }
+    .banner-wrapper {
+        height: 200px !important;
+    }
+    .category-card {
+        padding: 1.2rem;
+    }
+    .category-icon {
+        width: 50px;
+        height: 50px;
+        font-size: 1.2rem;
+        margin-bottom: 1rem;
     }
 }
+
+/* Utilities */
+.banner-wrapper {
+    height: 400px;
+    width: 100%;
+    position: relative;
+    overflow: hidden;
+}
+
+.banner-img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: center;
+}
+
+.object-fit-cover {
+    object-fit: cover;
+}
diff --git a/staticfiles/images/banner.png b/staticfiles/images/banner.png
index ffed682..2cb6ce7 100644
Binary files a/staticfiles/images/banner.png and b/staticfiles/images/banner.png differ