Index: main/migrations/0010_subcategory_products2_subcategory.py
===================================================================
--- main/migrations/0010_subcategory_products2_subcategory.py	(revision f84285e7b16852eab969772ebde9afe1b04fc8ae)
+++ main/migrations/0010_subcategory_products2_subcategory.py	(revision f84285e7b16852eab969772ebde9afe1b04fc8ae)
@@ -0,0 +1,28 @@
+# Generated by Django 5.1.7 on 2025-07-04 11:35
+
+import django.db.models.deletion
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('main', '0009_alter_favorite_user'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='Subcategory',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('name', models.CharField(max_length=100)),
+                ('name_mk', models.CharField(max_length=100)),
+                ('category', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to='main.category')),
+            ],
+        ),
+        migrations.AddField(
+            model_name='products2',
+            name='subcategory',
+            field=models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.SET_NULL, to='main.subcategory'),
+        ),
+    ]
Index: main/models.py
===================================================================
--- main/models.py	(revision cd9f2f4e4afae458d5578788c887892d76ca8947)
+++ main/models.py	(revision f84285e7b16852eab969772ebde9afe1b04fc8ae)
@@ -22,4 +22,21 @@
         return self.text
 
+
+
+class Category(models.Model):
+    name = models.CharField(max_length=100)
+    name_mk = models.CharField(max_length=100) # Macedonian name
+
+    def __str__(self):
+        return self.name_mk  # or self.name depending on context
+
+class Subcategory(models.Model):
+    name = models.CharField(max_length=100)       # English
+    name_mk = models.CharField(max_length=100)    # Macedonian
+    category = models.ForeignKey(Category, on_delete=models.CASCADE)
+
+    def __str__(self):
+        return self.name_mk
+
 #sega odime so komanda python manage.py makemigrations
 class Products2(models.Model):
@@ -38,4 +55,5 @@
     popust_date = models.DateField(null=True, blank=True)
     embedding = models.BinaryField()
+    subcategory = models.ForeignKey(Subcategory, on_delete=models.SET_NULL, null=True, blank=True)
 
 
@@ -66,12 +84,4 @@
 
 
-class Category(models.Model):
-    name = models.CharField(max_length=100)  # English name
-    name_mk = models.CharField(max_length=100)  # Macedonian name
-
-    def __str__(self):
-        return self.name_mk  # or self.name depending on context
-
-
 from django.utils import timezone  # Correct import for timezone.now
 
Index: main/templates/main/base.html
===================================================================
--- main/templates/main/base.html	(revision cd9f2f4e4afae458d5578788c887892d76ca8947)
+++ main/templates/main/base.html	(revision f84285e7b16852eab969772ebde9afe1b04fc8ae)
@@ -15,4 +15,23 @@
     <style>
         /* Common Styles */
+                :root {
+            --primary-color: #2e652e;
+            --primary-dark: #1f3f1f;
+            --secondary-color: white; /* Text color */
+            --light-bg: #f5f5f5;
+            --white: #ffffff;
+            --text-dark: #333333;
+            --text-light: #666666;
+            --border-color: #e0e0e0;
+            --error-color: #e74c3c;
+            {#--orange-light: rgba(249,139,36,0.85);#}
+            --orange-light: rgba(253,216,53,0.85);
+            --orange-dark: #F2C9A1;
+            {#--orange-solid: #f98b24;#}
+            --orange-solid: rgba(246,215,27,0.85);
+                    color: rgba(246,193,52,0.85);
+                    color: rgba(246,215,27,0.85)
+        }
+
         body {
             font-family: Arial, sans-serif;
@@ -22,6 +41,9 @@
             flex-direction: column;
             min-height: 100vh;
-            background-color: #f5f5f5;
-        }
+            background-color: var(--light-bg);
+            color: var(--text-dark);
+            line-height: 1.6;
+        }
+
         /* Main Content */
         .main-content {
@@ -39,40 +61,67 @@
 
         .sidebar-section {
-            background-color: white;
+            background-color: var(--white);
             border-radius: 8px;
             padding: 15px;
             margin-bottom: 20px;
             box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+            transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
+                        box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+        }
+
+        .sidebar-section:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
         }
 
         .sidebar-section h3 {
-            color: #2e652e;
+            color: var(--white);
             margin-bottom: 15px;
             padding-bottom: 10px;
-            border-bottom: 1px solid #eee;
-        }
-
-        .sidebar-categories {
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-        }
-
-        .sidebar-category {
-            display: flex;
-            align-items: center;
-            padding: 8px;
-            border-radius: 4px;
-            transition: background-color 0.3s ease;
-        }
-
-        .sidebar-category:hover {
-            background-color: #f0f7f0;
-        }
-
-        .sidebar-category img {
-            width: 24px;
-            height: 24px;
-            margin-right: 10px;
+            border-bottom: 1px solid rgba(255,255,255,0.3);
+        }
+
+        /* Popular Categories */
+        .popular-categories {
+            display: grid;
+            grid-template-columns: repeat(1, 1fr);
+            gap: 15px;
+            margin-bottom: 20px;
+        }
+
+        .popular-category {
+            background-color: var(--white);
+            border-radius: 8px;
+            overflow: hidden;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+            text-align: center;
+        }
+
+        .popular-category:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
+        }
+
+        .popular-category-image {
+            height: 100px;
+            background-size: cover;
+            background-position: center;
+            transition: transform 0.4s ease;
+        }
+
+        .popular-category:hover .popular-category-image {
+            transform: scale(1.05);
+        }
+
+        .popular-category-title {
+            padding: 12px;
+            font-weight: 600;
+            color: var(--primary-color);
+            transition: color 0.3s ease;
+        }
+
+        .popular-category:hover .popular-category-title {
+            color: var(--orange-solid);
         }
 
@@ -82,17 +131,97 @@
         }
 
-        /* Banner */
+        /* ====== BANNER STYLES ====== */
         .banner-container {
-            display: flex;
-            gap: 20px;
-            margin-bottom: 20px;
-        }
-
-        .banner-gallery {
+            margin: 0 auto 30px;
+            max-width: 1200px;
+            position: relative;
+            border-radius: 16px;
+            overflow: hidden;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.15);
+        }
+
+        .banner-slides {
             position: relative;
             width: 100%;
-            height: 300px;
+            height: 400px;
             overflow: hidden;
-            border-radius: 8px;
+        }
+
+        .banner-slide {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-size: cover;
+            background-position: center;
+            display: flex;
+            align-items: center;
+            transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+            opacity: 0;
+            transform: scale(1.02);
+        }
+
+        .banner-slide.active {
+            opacity: 1;
+            z-index: 1;
+            transform: scale(1);
+        }
+
+        .banner-overlay {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, rgba(23,47,23,0.85) 0%, rgba(42,82,42,0.85) 100%);
+            transition: opacity 0.8s ease;
+        }
+
+        .banner-content {
+            position: relative;
+            z-index: 2;
+            padding: 0 60px;
+            max-width: 600px;
+            color: white;
+            text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
+        }
+
+        .banner-title {
+            font-size: 2.8rem;
+            font-weight: 800;
+            margin-bottom: 15px;
+            line-height: 1.2;
+            color: var(--secondary-color);
+            text-shadow: none;
+            transition: all 0.8s ease;
+        }
+
+        .banner-subtitle {
+            font-size: 1.3rem;
+            margin-bottom: 25px;
+            opacity: 0.9;
+            transition: all 0.8s ease;
+            color: var(--secondary-color);
+        }
+
+        .banner-btn {
+            display: inline-block;
+            padding: 12px 30px;
+            background-color: var(--orange-solid);
+            color: var(--secondary-color);
+            font-weight: 700;
+            border-radius: 50px;
+            text-decoration: none;
+            box-shadow: 0 4px 15px rgba(249, 139, 36, 0.3);
+            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+            border: none;
+            cursor: pointer;
+        }
+
+        .banner-btn:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 8px 25px rgba(249, 139, 36, 0.4);
+            background-color: var(--orange-light);
         }
 
@@ -101,26 +230,32 @@
             top: 50%;
             transform: translateY(-50%);
-            width: 40px;
-            height: 40px;
-            background-color: rgba(255, 255, 255, 0.3);
-            border: none;
+            width: 50px;
+            height: 50px;
+            background: rgba(255,255,255,0.2);
+            backdrop-filter: blur(5px);
             border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
             color: white;
             font-size: 20px;
             cursor: pointer;
             z-index: 10;
-            transition: all 0.3s ease;
+            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+            border: 1px solid rgba(255,255,255,0.3);
+            opacity: 0.7;
         }
 
         .banner-nav:hover {
-            background-color: rgba(255, 255, 255, 0.7);
-            color: #2e652e;
-        }
-
-        .banner-nav.prev {
+            background: rgba(255,255,255,0.3);
+            opacity: 1;
+            transform: translateY(-50%) scale(1.1);
+        }
+
+        .banner-prev {
             left: 20px;
         }
 
-        .banner-nav.next {
+        .banner-next {
             right: 20px;
         }
@@ -137,98 +272,82 @@
         }
 
-        /* Slide transition */
-        .banner {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background-size: cover;
-            background-position: center;
-            transition: transform 0.7s ease-in-out;
-        }
-
-        .banner-overlay {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: linear-gradient(135deg, rgba(46, 101, 46, 0.6), rgba(31, 63, 31, 0.4));
-            display: flex;
-            align-items: center;
-            justify-content: flex-start;
-            padding-right: 40px;
-            padding-left: 50px;
-        }
-
-        .banner-content {
-            color: white;
-            text-align: left;
-            max-width: 400px;
+        .banner-dot {
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+            background: rgba(255,255,255,0.5);
+            cursor: pointer;
+            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+        }
+
+        .banner-dot.active {
+            background: var(--orange-solid);
+            transform: scale(1.3);
+        }
+
+        .banner-dot:hover {
+            transform: scale(1.2);
+        }
+
+        /* Animation */
+        @keyframes fadeInUp {
+            from {
+                opacity: 0;
+                transform: translateY(20px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        .banner-content > * {
+            animation: fadeInUp 0.8s ease forwards;
         }
 
         .banner-content h1 {
-            font-size: 2.2rem;
-            font-weight: 700;
-            margin-bottom: 15px;
-            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
-        }
-
-        .banner-content .highlight {
-            color: #fdd835;
-            text-transform: uppercase;
-            letter-spacing: 2px;
+            animation-delay: 0.3s;
         }
 
         .banner-content p {
-            font-size: 1.1rem;
-            margin-bottom: 20px;
-            opacity: 0.9;
-        }
-
-        .banner-btn {
-            padding: 10px 25px;
-            font-size: 1rem;
-            background-color: #fdd835;
-            color: black;
-            text-decoration: none;
-            border-radius: 30px;
-            font-weight: 600;
-            transition: transform 0.3s ease, background-color 0.3s ease;
-            display: inline-block;
-        }
-
-        .banner-btn:hover {
-            background-color: #ffeb3b;
-            transform: translateY(-2px);
-        }
-
-        /* Categories */
-
+            animation-delay: 0.5s;
+        }
+
+        .banner-content a {
+            animation-delay: 0.7s;
+        }
+
+        /* Section Titles */
         .section-title {
             font-size: 1.5rem;
             font-weight: 600;
             margin-bottom: 20px;
-            color: #2e652e;
-        }
-
-        .category-card img {
-            width: 40px;
-            height: 40px;
-            margin-bottom: 10px;
-        }
-
-        .category-card span {
-            font-size: 12px;
-            display: block;
+            color: var(--primary-color);
+            position: relative;
+            padding-bottom: 10px;
+        }
+
+        .section-title::after {
+            content: '';
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            width: 50px;
+            height: 3px;
+            background: linear-gradient(to right, var(--primary-color), var(--orange-solid));
+            border-radius: 3px;
         }
 
         /* Market Flyers */
         .market-flyers {
-            background-color: white;
+            background-color: var(--white);
             border-radius: 8px;
             padding: 20px;
             box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+            transition: transform 0.4s ease, box-shadow 0.4s ease;
+        }
+
+        .market-flyers:hover {
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
         }
 
@@ -240,19 +359,19 @@
 
         .flyer-card {
-            background: white;
+            background: var(--white);
             border-radius: 8px;
             overflow: hidden;
             box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-            transition: transform 0.3s ease, box-shadow 0.3s ease;
+            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
         }
 
         .flyer-card:hover {
             transform: translateY(-5px);
-            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
         }
 
         .flyer-header {
             padding: 15px;
-            background: linear-gradient(135deg, #549249, #3a6b33);
+            background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
             text-align: center;
             color: white;
@@ -274,5 +393,10 @@
             gap: 15px;
             padding: 10px 0;
-            border-bottom: 1px solid #eee;
+            border-bottom: 1px solid var(--border-color);
+            transition: transform 0.3s ease;
+        }
+
+        .flyer-product:hover {
+            transform: translateX(5px);
         }
 
@@ -282,4 +406,9 @@
             object-fit: cover;
             border-radius: 5px;
+            transition: transform 0.3s ease;
+        }
+
+        .flyer-product:hover img {
+            transform: scale(1.05);
         }
 
@@ -293,4 +422,9 @@
             margin-bottom: 5px;
             font-size: 14px;
+            transition: color 0.3s ease;
+        }
+
+        .flyer-product:hover .product-name {
+            color: var(--orange-solid);
         }
 
@@ -307,5 +441,5 @@
 
         .new-price {
-            color: #e74c3c;
+            color: var(--error-color);
             font-weight: bold;
         }
@@ -314,10 +448,10 @@
             width: 100%;
             padding: 10px;
-            background: #cb7e31;
-            color: white;
+            background-color: var(--orange-solid);
+            color: var(--secondary-color);
             border: none;
             font-weight: bold;
             cursor: pointer;
-            transition: background 0.3s;
+            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
             border-radius: 4px;
             margin-top: 10px;
@@ -325,10 +459,12 @@
 
         .view-all-btn:hover {
-            background: #a56629;
+            background-color: var(--orange-light);
+            transform: translateY(-2px);
+            box-shadow: 0 4px 8px rgba(249, 139, 36, 0.3);
         }
 
         /* Footer */
         footer {
-            background: linear-gradient(135deg, #2e652e, #1f3f1f);
+            background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
             color: white;
             padding: 40px 20px;
@@ -347,5 +483,17 @@
             margin-bottom: 20px;
             font-size: 1.2rem;
-            color: #fdd835;
+            color: var(--orange-light);
+            position: relative;
+            padding-bottom: 10px;
+        }
+
+        .footer-section h3::after {
+            content: '';
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            width: 40px;
+            height: 2px;
+            background: var(--orange-light);
         }
 
@@ -355,11 +503,12 @@
             display: block;
             text-decoration: none;
-            transition: color 0.3s ease;
+            transition: all 0.3s ease;
             font-size: 14px;
         }
 
         .footer-section a:hover {
-            color: #fff;
-            text-decoration: underline;
+            color: var(--orange-light);
+            transform: translateX(5px);
+            text-decoration: none;
         }
 
@@ -368,4 +517,9 @@
             align-items: center;
             gap: 8px;
+            transition: transform 0.3s ease;
+        }
+
+        .footer-section.social a:hover {
+            transform: translateX(5px);
         }
 
@@ -395,24 +549,13 @@
             background-color: #f8f9fa;
             border-left: 4px solid #6c757d;
-        }
-
-        .alert-success {
-            background-color: #d4edda;
-            border-left-color: #28a745;
-        }
-
-        .alert-error {
-            background-color: #f8d7da;
-            border-left-color: #dc3545;
-        }
-
-        {#.close-btn {#}
-        {#    position: absolute;#}
-        {#    right: 15px;#}
-        {#    top: 50%;#}
-        {#    transform: translateY(-50%);#}
-        {#    cursor: pointer;#}
-        {#    font-size: 20px;#}
-        {#}#}
+            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+            transform: translateX(100%);
+            opacity: 0;
+        }
+
+        .alert.show {
+            transform: translateX(0);
+            opacity: 1;
+        }
 
         /* Modal */
@@ -426,4 +569,11 @@
             height: 100%;
             background-color: rgba(0, 0, 0, 0.7);
+            overflow-y: auto;
+            opacity: 0;
+            transition: opacity 0.4s ease;
+        }
+
+        .modal.show {
+            opacity: 1;
         }
 
@@ -431,11 +581,16 @@
             background-color: #fefefe;
             margin: 5% auto;
-            padding: 25px;
-            border-radius: 10px;
+            padding: 30px;
+            border-radius: 15px;
             max-width: 900px;
             width: 90%;
-            max-height: 80vh;
-            overflow-y: auto;
+            box-shadow: 0 5px 30px rgba(0, 0, 0, 0.3);
             position: relative;
+            transform: translateY(-20px);
+            transition: transform 0.4s ease;
+        }
+
+        .modal.show .modal-content {
+            transform: translateY(0);
         }
 
@@ -448,122 +603,138 @@
             font-weight: bold;
             cursor: pointer;
+            transition: all 0.3s ease;
         }
 
         .close-modal:hover {
-            color: #333;
+            color: var(--orange-solid);
+            transform: rotate(90deg);
+        }
+
+        .modal-title {
+            font-size: 1.8rem;
+            color: var(--primary-color);
+            margin-bottom: 20px;
+            padding-bottom: 10px;
+            border-bottom: 2px solid var(--primary-color);
+            display: flex;
+            align-items: center;
+            gap: 10px;
         }
 
         .modal-products-grid {
             display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-            gap: 20px;
+            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+            gap: 25px;
             margin-top: 20px;
         }
 
         .modal-product {
-            background: white;
-            border-radius: 8px;
+            background: var(--white);
+            border-radius: 10px;
             overflow: hidden;
-            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
+            box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
+            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+        }
+
+        .modal-product:hover {
+            transform: translateY(-8px);
+            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
         }
 
         .modal-product img {
             width: 100%;
-            height: 150px;
+            height: 180px;
             object-fit: cover;
-        }
-
-        /* Improved Popular Categories */
-        .popular-categories {
-            display: grid;
-            grid-template-columns: repeat(1, 1fr);
-            gap: 15px;
-            margin-bottom: 20px;
-        }
-
-        .popular-category {
-            background-color: white;
-            border-radius: 8px;
-            overflow: hidden;
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-            transition: transform 0.3s ease, box-shadow 0.3s ease;
+            border-bottom: 1px solid var(--border-color);
+            transition: transform 0.4s ease;
+        }
+
+        .modal-product:hover img {
+            transform: scale(1.05);
+        }
+
+        .modal-product-info {
+            padding: 15px;
+        }
+
+        .modal-product-name {
+            font-size: 1rem;
+            font-weight: 600;
+            margin-bottom: 10px;
+            color: var(--text-dark);
+            display: block;
+            transition: color 0.3s ease;
+        }
+
+        .modal-product:hover .modal-product-name {
+            color: var(--orange-solid);
+        }
+
+        .modal-product-price {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .modal-old-price {
+            text-decoration: line-through;
+            color: #999;
+            font-size: 0.9rem;
+        }
+
+        .modal-new-price {
+            color: var(--error-color);
+            font-weight: bold;
+            font-size: 1.1rem;
+        }
+
+        .discount-badge {
+            background-color: var(--error-color);
+            color: white;
+            padding: 3px 8px;
+            border-radius: 4px;
+            font-size: 0.8rem;
+            font-weight: bold;
+            margin-left: 10px;
+        }
+
+        .no-products {
             text-align: center;
-        }
-
-        .popular-category:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
-        }
-
-        .popular-category-image {
-            height: 100px;
-            background-size: cover;
-            background-position: center;
-        }
-
-        .popular-category-title {
-            padding: 12px;
-            font-weight: 600;
-            color: #2e652e;
-        }
-
-        /* Scrollable All Categories */
-        .all-categories-container {
-            max-height: 400px;
-            overflow-y: auto;
-            padding-right: 5px;
-        }
-
-        .all-categories-container::-webkit-scrollbar {
-            width: 6px;
-        }
-
-        .all-categories-container::-webkit-scrollbar-track {
-            background: #f1f1f1;
-            border-radius: 10px;
-        }
-
-        .all-categories-container::-webkit-scrollbar-thumb {
-            background: #2e652e;
-            border-radius: 10px;
-        }
-
-        .all-categories-container::-webkit-scrollbar-thumb:hover {
-            background: #1f3f1f;
-        }
-
-        .category-item {
-            display: flex;
-            align-items: center;
-            padding: 10px;
-            margin-bottom: 8px;
-            background-color: #f9f9f9;
-            border-radius: 6px;
-            transition: background-color 0.3s ease;
-        }
-
-        .category-item:hover {
-            background-color: #e0e8e0;
-        }
-
-        .category-icon {
-            width: 24px;
-            height: 24px;
-            margin-right: 10px;
-            object-fit: contain;
-        }
-
-        a {
-            text-decoration: none;
+            padding: 40px;
+            color: var(--text-light);
+            font-size: 1.1rem;
+            grid-column: 1 / -1;
+        }
+
+        .loading-spinner {
+            display: inline-block;
+            width: 40px;
+            height: 40px;
+            border: 4px solid rgba(46, 101, 46, 0.2);
+            border-radius: 50%;
+            border-top-color: var(--primary-color);
+            animation: spin 1s ease-in-out infinite;
+            margin: 20px auto;
+            grid-column: 1 / -1;
+        }
+
+        @keyframes spin {
+            to {
+                transform: rotate(360deg);
+            }
         }
 
         /* Responsiveness */
         @media (max-width: 1024px) {
-            .categories-grid {
-                grid-template-columns: repeat(4, 1fr);
-            }
-
             .flyers-container {
                 grid-template-columns: repeat(2, 1fr);
+            }
+
+            .banner-title {
+                font-size: 2.4rem;
+            }
+
+            .banner-subtitle {
+                font-size: 1.1rem;
             }
         }
@@ -585,155 +756,66 @@
             }
 
-            .sidebar-section {
-                padding: 20px;
-                border-radius: 15px;
-            }
-
             .popular-categories {
                 grid-template-columns: repeat(2, 1fr);
-                gap: 15px;
-            }
-
-            .popular-category {
-                border-radius: 15px;
-            }
-
-            .popular-category-image {
-                height: 120px;
-            }
-
-            .popular-category-title {
-                padding: 15px;
-                font-size: 1.1rem;
-            }
-
-            .banner-container {
-                flex-direction: column;
-                margin-bottom: 20px;
-            }
-
-            .banner-gallery {
-                height: 250px;
-                border-radius: 15px;
-            }
-
-            .banner-overlay {
-                padding: 20px;
-                justify-content: center;
+            }
+
+            .banner-slides {
+                height: 350px;
             }
 
             .banner-content {
+                padding: 0 30px;
                 text-align: center;
-                max-width: 100%;
-            }
-
-            .banner-content h1 {
-                font-size: 1.8rem;
-            }
-
-            .banner-content p {
-                font-size: 1rem;
-            }
-
-            .banner-btn {
-                font-size: 1rem;
-                padding: 12px 30px;
-            }
-
-            .categories-section {
-                padding: 15px;
-                border-radius: 15px;
-            }
-
-            .category-card img {
-                width: 50px;
-                height: 50px;
-            }
-
-            .category-card span {
-                font-size: 14px;
-            }
-
-            .market-flyers {
-                padding: 15px;
-                border-radius: 15px;
+            }
+
+            .banner-title {
+                font-size: 2rem;
+            }
+
+            .banner-nav {
+                width: 40px;
+                height: 40px;
+                font-size: 16px;
             }
 
             .flyers-container {
                 grid-template-columns: 1fr;
-                gap: 15px;
-            }
-
-            .flyer-card {
-                border-radius: 15px;
-            }
-
-            .flyer-header {
-                padding: 20px;
-            }
-
-            .flyer-products {
-                padding: 20px;
-            }
-
-            .flyer-product {
-                padding: 15px 0;
-                gap: 20px;
-            }
-
-            .flyer-product img {
-                width: 80px;
-                height: 80px;
-            }
-
-            .product-name {
-                font-size: 16px;
-            }
-
-            .product-price {
-                font-size: 16px;
-            }
-
-            .view-all-btn {
-                padding: 12px;
+            }
+
+            .modal-products-grid {
+                grid-template-columns: 1fr;
+            }
+        }
+
+        @media (max-width: 576px) {
+            .banner-slides {
+                height: 300px;
+            }
+
+            .banner-title {
+                font-size: 1.8rem;
+            }
+
+            .banner-subtitle {
                 font-size: 1rem;
-                border-radius: 25px;
-            }
-        }
-
-        @media (max-width: 480px) {
+            }
+
+            .banner-btn {
+                padding: 10px 20px;
+            }
+
             .popular-categories {
                 grid-template-columns: 1fr;
             }
-
-            .popular-category-image {
-                height: 150px;
-            }
-
-            .categories-grid {
-                grid-template-columns: 1fr;
-            }
-
-            .flyers-container {
-                grid-template-columns: 1fr;
-            }
-
-            .modal-products-grid {
-                grid-template-columns: 1fr;
-            }
-
-            .banner-content h1 {
-                font-size: 1.5rem;
-            }
-
-            .banner-btn {
-                padding: 10px 20px;
-            }
         }
 
         a {
-
             text-decoration: none;
-            color: black;
+            color: inherit;
+        }
+
+        #store-name {
+            margin-left: 5px;
+            color: var(--orange-solid);
         }
     </style>
@@ -756,19 +838,46 @@
     <main class="content-area">
         <div class="banner-container">
-            <div class="banner-gallery">
-                <div class="banner" id="rotating-banner">
-                    <div class="banner-overlay">
-                        <div class="banner-content">
-                            <h1>Добредојдовте во <span class="highlight">Штедко</span>!</h1>
-                            <p>Најдобри цени, најквалитетни производи</p>
-                            <a href="{% url 'product_list' %}" class="banner-btn">Разгледај производи</a>
-                        </div>
+            <div class="banner-slides">
+                <!-- Banner 1 -->
+                <div class="banner-slide active" style="background-image: url('{% static 'images/baner1.jpg' %}')">
+                    <div class="banner-overlay"></div>
+                    <div class="banner-content">
+                        <h1 class="banner-title">Сите производи на едно место!</h1>
+                        <p class="banner-subtitle">Пронајди ги најевтините производи со <span style="color: rgba(246,215,27,0.85)"><b>Штедко</b></span></p>
+                        <a href="{% url 'product_list' %}" class="banner-btn">Започни сега</a>
                     </div>
                 </div>
-                <button class="banner-nav prev" aria-label="Previous image">❮</button>
-                <button class="banner-nav next" aria-label="Next image">❯</button>
-                <div class="banner-dots"></div>
+
+                <!-- Banner 2 -->
+                <div class="banner-slide" style="background-image: url('{% static 'images/baner2.jpg' %}')">
+                    <div class="banner-overlay"></div>
+                    <div class="banner-content">
+                        <h1 class="banner-title">Не ги пропуштај дневните попусти!</h1>
+                        <p class="banner-subtitle">До 70% попуст на избрани производи</p>
+                        <a href="{% url 'product_list' %}?discounted=1" class="banner-btn">Види попусти</a>
+                    </div>
+                </div>
+
+                <!-- Banner 3 -->
+                <div class="banner-slide" style="background-image: url('{% static 'images/kreiraj_listi.png' %}')">
+                    <div class="banner-overlay"></div>
+                    <div class="banner-content">
+                        <h1 class="banner-title">Направи си <span style="color: rgba(246,215,27,0.85)">листа</span> за пазарење и дознај</h1>
+                        <p class="banner-subtitle">во кој маркет е <span style="color: rgba(246,215,27,0.85)">најевтино</span>!</p>
+                        <a href="{% url 'product_list' %}?sort=newest" class="banner-btn">Истражувај</a>
+                    </div>
+                </div>
+            </div>
+
+            <button class="banner-nav banner-prev">❮</button>
+            <button class="banner-nav banner-next">❯</button>
+
+            <div class="banner-dots">
+                <div class="banner-dot active"></div>
+                <div class="banner-dot"></div>
+                <div class="banner-dot"></div>
             </div>
         </div>
+
         <section class="market-flyers">
             <h2 class="section-title">Актуелни Попусти</h2>
@@ -785,11 +894,12 @@
                                         <a href="{% url 'product_detail' product.id %}">
                                             <div class="flyer-product">
-                                                <img src="{{ product.image_url }}" alt="{{ product.name }}">
+                                                <img src="{{ product.image_url }}" alt="{{ product.name }}"
+                                                     onerror="this.onerror=null;this.src='{% static 'images/no-image.png' %}'">
                                                 <div class="product-info">
                                                     <span class="product-name">{{ product.name }}</span>
                                                     <span class="product-price">
-                                                    <span class="old-price">{{ product.price }} ден.</span>
-                                                    <span class="new-price">{{ product.actual_price }} ден.</span>
-                                                </span>
+                                                        <span class="old-price">{{ product.price }} ден.</span>
+                                                        <span class="new-price">{{ product.actual_price }} ден.</span>
+                                                    </span>
                                                 </div>
                                             </div>
@@ -800,5 +910,5 @@
                                 {% endif %}
                             </div>
-                            <button class="view-all-btn" data-store="{{ store.name }}">
+                            <button class="view-all-btn" data-store="{{ store.name }}" style="box-shadow: 0 8px 25px rgba(249, 139, 36, 0.4);">
                                 Види ги сите попусти
                             </button>
@@ -806,6 +916,5 @@
                     {% endfor %}
                 {% else %}
-                    <p>No flyer data available. Please log in or check back later. (Debug: stores_with_products is
-                        empty)</p>
+                    <p>No flyer data available. Please log in or check back later.</p>
                 {% endif %}
             </div>
@@ -814,6 +923,6 @@
     <aside class="left-sidebar">
         <div class="sidebar-section">
-            <h3 style="background-color: #2e652e; color: white; padding: 10px; border-radius: 10px">Популарни
-                категории</h3>
+            <h3 style="background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); padding: 10px; border-radius: 10px">
+                Популарни категории</h3>
             <div class="popular-categories">
                 <a href="{% url 'product_list' %}?category=Dairy" class="popular-category">
@@ -846,6 +955,8 @@
     <div class="modal-content">
         <span class="close-modal">×</span>
-        <h2 id="modal-title" style="border-bottom: 2px solid rgba(57,146,47,0.93); margin-bottom: 10px">Попусти во <span
-                id="store-name" style="color: rgba(43,86,43,0.93)"></span></h2>
+        <h2 class="modal-title">
+            <i class="fas fa-tags"></i>
+            Попусти во <span id="store-name"></span>
+        </h2>
         <div class="modal-products-grid" id="modal-products">
             <!-- Products will be loaded here via JavaScript -->
@@ -887,19 +998,121 @@
 
 <script>
-    function toggleMobileMenu() {
-        const menu = document.getElementById("mobile-menu");
-        const overlay = document.getElementById("overlay");
-        menu.classList.toggle("open");
-        overlay.classList.toggle("active");
-    }
-
-    document.addEventListener('DOMContentLoaded', function () {
-        setTimeout(() => {
-            document.querySelectorAll('.alert').forEach(alert => {
-                alert.style.opacity = '0';
-                setTimeout(() => alert.remove(), 300);
+    // Banner carousel functionality
+    document.addEventListener('DOMContentLoaded', function() {
+        const bannerSlides = document.querySelectorAll('.banner-slide');
+        const prevBtn = document.querySelector('.banner-prev');
+        const nextBtn = document.querySelector('.banner-next');
+        const dots = document.querySelectorAll('.banner-dot');
+        const bannerContainer = document.querySelector('.banner-container');
+
+        let currentIndex = 0;
+        let interval;
+        let touchStartX = 0;
+        let touchEndX = 0;
+        const ROTATION_INTERVAL = 10000; // 10 seconds
+
+        // Initialize the first banner
+        showSlide(currentIndex);
+
+        // Auto-rotate banners
+        function startAutoRotate() {
+            interval = setInterval(nextSlide, ROTATION_INTERVAL);
+        }
+
+        function resetInterval() {
+            clearInterval(interval);
+            startAutoRotate();
+        }
+
+        function showSlide(index) {
+            // Hide all slides
+            bannerSlides.forEach(slide => {
+                slide.classList.remove('active');
             });
-        }, 5000);
-
+
+            // Show current slide
+            bannerSlides[index].classList.add('active');
+
+            // Update dots
+            dots.forEach(dot => dot.classList.remove('active'));
+            dots[index].classList.add('active');
+        }
+
+        function nextSlide() {
+            currentIndex = (currentIndex + 1) % bannerSlides.length;
+            showSlide(currentIndex);
+        }
+
+        function prevSlide() {
+            currentIndex = (currentIndex - 1 + bannerSlides.length) % bannerSlides.length;
+            showSlide(currentIndex);
+        }
+
+        // Button controls
+        nextBtn.addEventListener('click', function() {
+            nextSlide();
+            resetInterval();
+        });
+
+        prevBtn.addEventListener('click', function() {
+            prevSlide();
+            resetInterval();
+        });
+
+        // Dot navigation
+        dots.forEach((dot, index) => {
+            dot.addEventListener('click', function() {
+                currentIndex = index;
+                showSlide(currentIndex);
+                resetInterval();
+            });
+        });
+
+        // Touch events for mobile swipe
+        bannerContainer.addEventListener('touchstart', function(e) {
+            touchStartX = e.changedTouches[0].screenX;
+            clearInterval(interval);
+        }, {passive: true});
+
+        bannerContainer.addEventListener('touchend', function(e) {
+            touchEndX = e.changedTouches[0].screenX;
+            handleSwipe();
+            resetInterval();
+        }, {passive: true});
+
+        function handleSwipe() {
+            const threshold = 50; // Minimum swipe distance
+
+            if (touchEndX < touchStartX - threshold) {
+                // Swiped left - next slide
+                nextSlide();
+            } else if (touchEndX > touchStartX + threshold) {
+                // Swiped right - previous slide
+                prevSlide();
+            }
+        }
+
+        // Start auto-rotation
+        startAutoRotate();
+
+        // Pause on hover
+        bannerContainer.addEventListener('mouseenter', function() {
+            clearInterval(interval);
+        });
+
+        bannerContainer.addEventListener('mouseleave', function() {
+            resetInterval();
+        });
+
+        // Show messages with animation
+        document.querySelectorAll('.alert').forEach(alert => {
+            setTimeout(() => {
+                alert.classList.add('show');
+            }, 100);
+        });
+    });
+
+    // Modal functionality
+    document.addEventListener('DOMContentLoaded', function() {
         const modal = document.getElementById('products-modal');
         const modalTitle = document.getElementById('store-name');
@@ -908,8 +1121,14 @@
 
         document.querySelectorAll('.view-all-btn').forEach(button => {
-            button.addEventListener('click', function () {
+            button.addEventListener('click', function() {
                 const store = this.getAttribute('data-store');
                 modalTitle.textContent = store;
-                modalProducts.innerHTML = '<div class="spinner">Loading...</div>';
+                modalProducts.innerHTML = '<div class="loading-spinner"></div>';
+
+                // Show modal with fade in
+                modal.style.display = 'block';
+                setTimeout(() => {
+                    modal.classList.add('show');
+                }, 10);
 
                 fetch(`/get-store-products/?store=${encodeURIComponent(store)}`, {
@@ -926,22 +1145,27 @@
                             modalProducts.innerHTML = '';
                             data.products.forEach(product => {
+                                const discount = Math.round(((product.price - product.actual_price) / product.price) * 100);
+
                                 const productElement = document.createElement('div');
                                 productElement.className = 'modal-product';
                                 productElement.innerHTML = `
-<a href="/product/${product.id}/">
-        <img src="${product.image_url}" alt="${product.name}">
-        <div class="modal-product-info">
-            <div class="modal-product-name">${product.name}</div>
-            <div class="modal-product-price">
-                <span class="old-price">${product.price} ден.</span>
-                <span class="new-price">${product.actual_price} ден.</span>
-            </div>
-        </div>
-    </a>
+                                    <a href="/product/${product.id}/">
+                                        <img src="${product.image_url}" alt="${product.name}" onerror="this.onerror=null;this.src='{% static 'images/no-image.png' %}'">
+                                        <div class="modal-product-info">
+                                            <span class="modal-product-name">${product.name}</span>
+                                            <div class="modal-product-price">
+                                                <span class="modal-old-price">${product.price} ден.</span>
+                                                <div>
+                                                    <span class="modal-new-price">${product.actual_price} ден.</span>
+                                                    <span class="discount-badge">-${discount}%</span>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </a>
                                 `;
                                 modalProducts.appendChild(productElement);
                             });
                         } else {
-                            modalProducts.innerHTML = '<p>Нема достапни попусти за оваа продавница.</p>';
+                            modalProducts.innerHTML = '<div class="no-products"><i class="fas fa-box-open" style="font-size: 2rem; color: #ccc; margin-bottom: 15px;"></i><p>Нема достапни попусти за оваа продавница.</p></div>';
                         }
                     })
@@ -949,253 +1173,42 @@
                         console.error('Error:', error);
                         modalProducts.innerHTML = `
-                            <p>Грешка при вчитување на производите. <a href="/login/">Најави се</a> или обидете се повторно.</p>
+                            <div class="no-products">
+                                <i class="fas fa-exclamation-triangle" style="font-size: 2rem; color: #e74c3c; margin-bottom: 15px;"></i>
+                                <p>Грешка при вчитување на производите.</p>
+                                <a href="/login/" style="color: #2e652e; font-weight: bold;">Најави се</a> или обидете се повторно.
+                            </div>
                         `;
                     });
 
-                modal.style.display = 'block';
                 document.body.style.overflow = 'hidden';
             });
         });
 
-        closeModal.addEventListener('click', function () {
-            modal.style.display = 'none';
-            document.body.style.overflow = 'auto';
-        });
-
-        window.addEventListener('click', function (event) {
-            if (event.target === modal) {
+        function closeModalHandler() {
+            modal.classList.remove('show');
+            setTimeout(() => {
                 modal.style.display = 'none';
                 document.body.style.overflow = 'auto';
+            }, 400);
+        }
+
+        closeModal.addEventListener('click', closeModalHandler);
+
+        window.addEventListener('click', function(event) {
+            if (event.target === modal) {
+                closeModalHandler();
             }
         });
+
+        // Auto-close messages after 5 seconds
+        setTimeout(() => {
+            document.querySelectorAll('.alert').forEach(alert => {
+                alert.style.opacity = '0';
+                setTimeout(() => alert.remove(), 300);
+            });
+        }, 5000);
     });
-
-    document.addEventListener('DOMContentLoaded', function () {
-        const bannerConfig = [
-            {
-                image: "{% static 'images/baner1.jpg' %}",
-                title: "Добредојдовте во <span class='highlight'>Штедко</span>!",
-                subtitle: "Најдобри цени, најквалитетни производи"
-            },
-            {
-                image: "{% static 'images/baner2.jpg' %}",
-                title: "Специјални понуди",
-                subtitle: "До 50% попуст на избрани производи"
-            },
-            {
-                image: "{% static 'images/baner3.jpg' %}",
-                title: "Ново во понуда",
-                subtitle: "Откријте ги нашите најнови производи"
-            }
-        ];
-
-        const banner = document.getElementById('rotating-banner');
-        const bannerTitle = document.querySelector('.banner-content h1');
-        const bannerSubtitle = document.querySelector('.banner-content p');
-        const prevBtn = document.querySelector('.banner-nav.prev');
-        const nextBtn = document.querySelector('.banner-nav.next');
-        const dotsContainer = document.querySelector('.banner-dots');
-
-        let currentIndex = 0;
-        let autoRotateInterval;
-        const rotateInterval = 15000;
-
-        bannerConfig.forEach((_, index) => {
-            const dot = document.createElement('button');
-            dot.className = 'banner-dot';
-            dot.setAttribute('data-index', index);
-            dot.setAttribute('aria-label', `Go to slide ${index + 1}`);
-            if (index === 0) dot.classList.add('active');
-            dotsContainer.appendChild(dot);
-        });
-
-        const dots = document.querySelectorAll('.banner-dot');
-
-        function updateBanner(index, direction = 'next') {
-            dots.forEach(dot => dot.classList.remove('active'));
-            dots[index].classList.add('active');
-
-            banner.style.transform = `translateX(${direction === 'next' ? '-' : ''}100%)`;
-
-            setTimeout(() => {
-                banner.style.transition = 'none';
-                banner.style.transform = 'translateX(0)';
-                banner.style.backgroundImage = `url(${bannerConfig[index].image})`;
-                bannerTitle.innerHTML = bannerConfig[index].title;
-                bannerSubtitle.textContent = bannerConfig[index].subtitle;
-
-                void banner.offsetWidth;
-
-                banner.style.transition = 'transform 0.7s ease-in-out';
-            }, 700);
-        }
-
-        function nextBanner() {
-            currentIndex = (currentIndex + 1) % bannerConfig.length;
-            updateBanner(currentIndex, 'next');
-            resetAutoRotate();
-        }
-
-        function prevBanner() {
-            currentIndex = (currentIndex - 1 + bannerConfig.length) % bannerConfig.length;
-            updateBanner(currentIndex, 'prev');
-            resetAutoRotate();
-        }
-
-        function startAutoRotate() {
-            autoRotateInterval = setInterval(nextBanner, rotateInterval);
-        }
-
-        function resetAutoRotate() {
-            clearInterval(autoRotateInterval);
-            startAutoRotate();
-        }
-
-        nextBtn.addEventListener('click', nextBanner);
-        prevBtn.addEventListener('click', prevBanner);
-
-        dots.forEach(dot => {
-            dot.addEventListener('click', function () {
-                const dotIndex = parseInt(this.getAttribute('data-index'));
-                if (dotIndex !== currentIndex) {
-                    const direction = dotIndex > currentIndex ? 'next' : 'prev';
-                    currentIndex = dotIndex;
-                    updateBanner(currentIndex, direction);
-                    resetAutoRotate();
-                }
-            });
-        });
-
-        banner.style.backgroundImage = `url(${bannerConfig[0].image})`;
-        startAutoRotate();
-
-        const bannerGallery = document.querySelector('.banner-gallery');
-        bannerGallery.addEventListener('mouseenter', () => {
-            clearInterval(autoRotateInterval);
-        });
-
-        bannerGallery.addEventListener('mouseleave', () => {
-            startAutoRotate();
-        });
-    });
-    document.addEventListener('DOMContentLoaded', function () {
-        // Desktop search elements
-        const searchInput = document.getElementById('searchInput');
-        const suggestionsDiv = document.getElementById('suggestions');
-        const searchForm = document.getElementById('searchForm');
-
-        // Mobile search elements
-        const mobileSearchInput = document.getElementById('mobileSearchInput');
-        const mobileSearchForm = document.getElementById('mobileSearchForm');
-
-        // Extended transliteration with typo correction
-        function transliterateLatinToCyrillic(text) {
-            const map = {
-                'dzh': 'џ', 'dzs': 'џ', 'dsh': 'џ',
-                'zh': 'ж', 'ch': 'ч', 'sh': 'ш', 'lj': 'љ', 'nj': 'њ', 'kj': 'ќ', 'dj': 'ѓ',
-                'zs': 'ж', 'hs': 'ш', 'cx': 'ч', 'sx': 'ш', 'jx': 'ж',
-                'tz': 'ц', 'ts': 'ц', 'tc': 'ц', 'dz': 'џ',
-                'a': 'а', 'b': 'б', 'v': 'в', 'g': 'г', 'd': 'д', 'e': 'е', 'z': 'з', 'i': 'и',
-                'j': 'ј', 'k': 'к', 'l': 'л', 'm': 'м', 'n': 'н', 'o': 'о', 'p': 'п', 'r': 'р',
-                's': 'с', 't': 'т', 'u': 'у', 'f': 'ф', 'h': 'х', 'c': 'ц',
-                'y': 'ј', 'w': 'в', 'x': 'кс', 'q': 'к',
-                'ia': 'ја', 'ie': 'је', 'io': 'јо', 'iu': 'ју'
-            };
-
-            const typoPatterns = [
-                {pattern: /sampon/gi, replace: 'shampon'},
-                {pattern: /cresi/gi, replace: 'creshi'},
-                {pattern: /stipki/gi, replace: 'shtipki'},
-                {pattern: /sch/gi, replace: 'sh'},
-                {pattern: /ck/gi, replace: 'k'},
-                {pattern: /ph/gi, replace: 'f'},
-                {pattern: /th/gi, replace: 't'},
-                {pattern: /([a-z]),([a-z])/gi, replace: '$1$2'},
-                {pattern: /([a-z])\.([a-z])/gi, replace: '$1$2'},
-                {pattern: /([a-z])\1/gi, replace: '$1'}
-            ];
-
-            let normalizedText = text.toLowerCase();
-            for (const {pattern, replace} of typoPatterns) {
-                normalizedText = normalizedText.replace(pattern, replace);
-            }
-
-            let result = '';
-            let i = 0;
-            while (i < normalizedText.length) {
-                if (map[normalizedText.substring(i, i + 3)]) {
-                    result += map[normalizedText.substring(i, i + 3)];
-                    i += 3;
-                } else if (map[normalizedText.substring(i, i + 2)]) {
-                    result += map[normalizedText.substring(i, i + 2)];
-                    i += 2;
-                } else if (map[normalizedText[i]]) {
-                    result += map[normalizedText[i]];
-                    i++;
-                } else {
-                    result += normalizedText[i];
-                    i++;
-                }
-            }
-            return result;
-        }
-
-        function setupSearch(input, form) {
-            input.addEventListener('input', function () {
-                const query = this.value.trim();
-                if (query.length < 2) {
-                    suggestionsDiv.style.display = 'none';
-                    return;
-                }
-
-                fetch(`/search-suggestions/?q=${encodeURIComponent(query)}`)
-                    .then(response => response.json())
-                    .then(data => {
-                        suggestionsDiv.innerHTML = '';
-                        if (data.suggestions.length > 0) {
-                            data.suggestions.forEach(suggestion => {
-                                const div = document.createElement('div');
-                                div.textContent = suggestion;
-                                div.style.padding = '5px 10px';
-                                div.style.cursor = 'pointer';
-                                div.addEventListener('click', function () {
-                                    input.value = transliterateLatinToCyrillic(suggestion);
-                                    suggestionsDiv.style.display = 'none';
-                                    form.submit();
-                                });
-                                suggestionsDiv.appendChild(div);
-                            });
-                            suggestionsDiv.style.display = 'block';
-                        } else {
-                            suggestionsDiv.style.display = 'none';
-                        }
-                    });
-            });
-
-            input.addEventListener('keydown', function (e) {
-                if (e.key === 'Enter') {
-                    e.preventDefault();
-                    suggestionsDiv.style.display = 'none';
-                    input.value = transliterateLatinToCyrillic(input.value);
-                    form.submit();
-                }
-            });
-        }
-
-        setupSearch(searchInput, searchForm);
-        setupSearch(mobileSearchInput, mobileSearchForm);
-
-        document.addEventListener('click', function (e) {
-            if (!searchInput.contains(e.target) && !suggestionsDiv.contains(e.target) &&
-                !mobileSearchInput.contains(e.target)) {
-                suggestionsDiv.style.display = 'none';
-            }
-        });
-    });
-    //raboti search za mobilen
-
-
 </script>
 </body>
+</html>
 {% endblock %}
-</html>
Index: main/templates/main/favorites.html
===================================================================
--- main/templates/main/favorites.html	(revision cd9f2f4e4afae458d5578788c887892d76ca8947)
+++ main/templates/main/favorites.html	(revision f84285e7b16852eab969772ebde9afe1b04fc8ae)
@@ -3,58 +3,67 @@
 
 {% block content %}
-<div class="container" style="max-width: 1200px; margin: 0 auto; padding: 20px;">
-    <h1 style="text-align: center; margin-bottom: 30px; color: #2e652e; position: relative; padding-bottom: 15px;">
-        <span style="padding: 0 20px; position: relative; z-index: 1;">Твоите Омилени</span>
-        <span style="content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, #2e652e, transparent); z-index: 0;"></span>
-    </h1>
-
-    <div class="grid" style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;">
-        {% for favorite in favorites %}
-        <div class="product-card" style="border: 1px solid #e0e0e0; border-radius: 10px; overflow: hidden; transition: all 0.3s ease; background: white;">
-            <a href="{% url 'product_detail' favorite.product.id %}" style="text-decoration: none; color: inherit;">
-                <div class="product-image" style="height: 200px; background-color: #f9f9f9; display: flex; align-items: center; justify-content: center; padding: 15px; position: relative;">
-                    {% if favorite.product.image_url %}
-                        <img src="{{ favorite.product.image_url }}" alt="{{ favorite.product.name }}" style="max-width: 100%; max-height: 100%; object-fit: contain;">
-                    {% else %}
-                        <span style="color: #666;">[No Image]</span>
-                    {% endif %}
-                    <button class="favorite-btn" onclick="event.preventDefault(); toggleFavorite(this, {{ favorite.product.id }});" style="position: absolute; top: 10px; right: 10px; background: rgba(255, 255, 255, 0.9); border: none; border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);">
-                        <i class="fas fa-heart" style="color: #e74c3c; font-size: 18px;"></i>
-                    </button>
-                </div>
-                <div class="product-info" style="padding: 20px;">
-                    <div class="product-name" style="font-weight: bold; margin-bottom: 5px; color: #333; font-size: 0.95rem; line-height: 1.3; height: 2.6em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;">
-                        {{ favorite.product.name }}
-                    </div>
-                    <div class="product-price" style="font-size: 1.2rem; color: #2e652e; font-weight: bold; margin-top: 10px;">
+<div class="main-content">
+    <main class="content-area">
+        <div class="page-header">
+            <h1 class="lists-main-title">Твоите Омилени</h1>
+            <div class="header-decoration"></div>
+            <p class="page-subtitle">Твоите омилени производи, на едно место.</p>
+        </div>
+
+        <div class="lists-grid">
+            {% for favorite in favorites %}
+            <div class="product-card">
+                <a href="{% url 'product_detail' favorite.product.id %}" class="product-card-link">
+                    <div class="product-image-container">
+                        {% if favorite.product.image_url %}
+                            <img src="{{ favorite.product.image_url }}" alt="{{ favorite.product.name }}" class="product-image" loading="lazy">
+                        {% else %}
+                            <div class="no-image-placeholder">
+                                <i class="fas fa-image"></i>
+                            </div>
+                        {% endif %}
+                        <button class="favorite-btn" onclick="event.preventDefault(); toggleFavorite(this, {{ favorite.product.id }});">
+                            <i class="fas fa-heart"></i>
+                        </button>
                         {% if favorite.product.popust %}
-                            <span style="color: #999; text-decoration: line-through; font-size: 0.9rem;">{{ favorite.product.price }} ден.</span>
-                            {{ favorite.product.actual_price }} ден.
-                            <span style="background-color: #e74c3c; color: white; padding: 3px 8px; border-radius: 3px; font-size: 0.8rem; margin-left: 8px;">Попуст!</span>
-                        {% else %}
-                            {{ favorite.product.price }} ден.
+                        <div class="discount-badge">Попуст!</div>
                         {% endif %}
                     </div>
-                    <div class="product-store" style="margin-top: 10px;">
-                        {% if favorite.product.store == 'Vero' %}
-                            <img src="{% static 'images/vero_logo1.png' %}" alt="Vero" style="height: 35px;">
-                        {% elif favorite.product.store == 'Ramstore' %}
-                            <img src="{% static 'images/ramstore_logo.png' %}" alt="Ramstore" style="height: 35px;">
-                        {% elif favorite.product.store == 'Reptil' %}
-                            <img src="{% static 'images/reptil_logo.jpg' %}" alt="Reptil" style="height: 35px;">
-                        {% elif favorite.product.store == 'Zito' %}
-                            <img src="{% static 'images/zito_logo.png' %}" alt="Zito" style="height: 35px;">
-                        {% endif %}
+                    <div class="product-info">
+                        <h3 class="product-name">{{ favorite.product.name }}</h3>
+                        <div class="product-price">
+                            {% if favorite.product.popust %}
+                                <span class="original-price">{{ favorite.product.price }} ден.</span>
+                                <span class="discounted-price">{{ favorite.product.actual_price }} ден.</span>
+                            {% else %}
+                                <span class="regular-price">{{ favorite.product.price }} ден.</span>
+                            {% endif %}
+                        </div>
+                        <div class="product-store">
+                            {% if favorite.product.store == 'Vero' %}
+                                <img src="{% static 'images/vero_logo1.png' %}" alt="Vero" class="store-logo">
+                            {% elif favorite.product.store == 'Ramstore' %}
+                                <img src="{% static 'images/ramstore_logo.png' %}" alt="Ramstore" class="store-logo">
+                            {% elif favorite.product.store == 'Reptil' %}
+                                <img src="{% static 'images/reptil_logo.jpg' %}" alt="Reptil" class="store-logo">
+                            {% elif favorite.product.store == 'Zito' %}
+                                <img src="{% static 'images/zito_logo.png' %}" alt="Zito" class="store-logo">
+                            {% endif %}
+                        </div>
                     </div>
+                </a>
+            </div>
+            {% empty %}
+            <div class="empty-lists-message">
+                <div class="empty-icon">
+                    <i class="fas fa-heart-broken"></i>
                 </div>
-            </a>
+                <h3>Сеуште немаш омилени продукти</h3>
+                <p>Додади продукти во твојата листа на омилени за да ги имаш секогаш при рака</p>
+                <a href="{% url 'product_list' %}" class="action-button">Пребарај продукти</a>
+            </div>
+            {% endfor %}
         </div>
-        {% empty %}
-        <div style="grid-column: 1 / -1; text-align: center; padding: 40px; color: #666; background: rgba(255, 255, 255, 0.8); border-radius: 10px; margin: 20px 0;">
-            <p style="font-size: 1.2rem;">Се уште немаш омилени продукти</p>
-            <a href="{% url 'product_list' %}" style="display: inline-block; margin-top: 20px; padding: 10px 20px; background-color: #2e652e; color: white; border-radius: 5px; text-decoration: none;">Разгледај продукти</a>
-        </div>
-        {% endfor %}
-    </div>
+    </main>
 </div>
 
@@ -62,5 +71,5 @@
 function toggleFavorite(button, productId) {
     const icon = button.querySelector('i');
-    const isFavorite = icon.classList.contains('fas');
+    const productCard = button.closest('.product-card');
 
     fetch('/toggle-favorite/', {
@@ -78,15 +87,27 @@
         if (data.success) {
             if (data.is_favorite) {
-                icon.classList.add('fas', 'active');
-                icon.classList.remove('far');
+                // Animation when adding to favorites
+                icon.classList.add('active');
                 button.classList.add('pulse');
                 setTimeout(() => button.classList.remove('pulse'), 600);
             } else {
-                icon.classList.remove('fas', 'active');
-                icon.classList.add('far');
-                // Optional: Remove the product card from DOM if on favorites page
-                if (window.location.pathname.includes('favorites')) {
-                    button.closest('.product-card').remove();
-                }
+                // Animation when removing from favorites
+                productCard.classList.add('fade-out');
+                setTimeout(() => {
+                    productCard.remove();
+                    // If last item, show empty state
+                    if (document.querySelectorAll('.product-card').length === 0) {
+                        document.querySelector('.lists-grid').innerHTML = `
+                            <div class="empty-lists-message">
+                                <div class="empty-icon">
+                                    <i class="fas fa-heart-broken"></i>
+                                </div>
+                                <h3>Сеуште немаш омилени продукти</h3>
+                                <p>Додади продукти во твојата листа на омилени за да ги имаш секогаш при рака</p>
+                                <a href="{% url 'product_list' %}" class="action-button">Пребарај продукти</a>
+                            </div>
+                        `;
+                    }
+                }, 300);
             }
         }
@@ -96,44 +117,329 @@
 
 <style>
-@media (max-width: 768px) {
-    .grid {
-        grid-template-columns: repeat(2, 1fr) !important;
-        gap: 15px !important;
-    }
+    /* Common Styles */
+    body {
+        font-family: Arial, sans-serif;
+        margin: 0;
+        padding: 0;
+        display: flex;
+        flex-direction: column;
+        min-height: 100vh;
+        {#background-color: #f5f5f5;#}
+        background-color: rgba(46,101,46,0.85);
+    }
+
+    /* Main Content */
+    .main-content {
+        max-width: 1200px;
+        margin: 20px auto;
+        padding: 0 15px;
+        flex-grow: 1;
+    }
+
+    .content-area {
+        background-color: white;
+        border-radius: 8px;
+        padding: 20px;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    }
+
+    .page-header {
+        text-align: center;
+        margin-bottom: 20px;
+    }
+
+    .lists-main-title {
+        font-size: 1.5rem;
+        font-weight: 600;
+        color: #2e652e;
+        margin-bottom: 10px;
+    }
+
+    .page-subtitle {
+        color: #666;
+        font-size: 1rem;
+        margin-top: 5px;
+    }
+
+    .header-decoration {
+        height: 4px;
+        width: 80px;
+        background: linear-gradient(to right, #2e652e, #4caf50);
+        margin: 10px auto;
+        border-radius: 2px;
+    }
+
+    .lists-grid {
+        display: grid;
+        grid-template-columns: repeat(3,1fr);
+        gap: 20px;
+    }
+
     .product-card {
-        border-radius: 8px !important;
-    }
+        background: white;
+        border-radius: 8px;
+        overflow: hidden;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        transition: transform 0.3s ease, box-shadow 0.3s ease;
+        position: relative;
+    }
+
+    .product-card:hover {
+        transform: translateY(-5px);
+        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+    }
+
+    .product-card-link {
+        text-decoration: none;
+        color: inherit;
+        display: block;
+        height: 100%;
+    }
+
+    .product-image-container {
+        height: 200px;
+        background-color: #f9f9f9;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        overflow: hidden;
+    }
+
     .product-image {
-        height: 150px !important;
-    }
-}
-
-@media (max-width: 480px) {
-    .grid {
-        grid-template-columns: 1fr !important;
-    }
-    h1 {
-        font-size: 1.5rem !important;
-        padding-bottom: 10px !important;
-    }
-}
-
-@keyframes pulseHeart {
-    0% { transform: scale(1); }
-    50% { transform: scale(1.3); }
-    100% { transform: scale(1); }
-}
-.pulse {
-    animation: pulseHeart 0.6s ease;
-}
-body {
-            font-family: Arial, sans-serif;
-            margin: 0;
-            padding: 0;
-            display: flex;
-            flex-direction: column;
-            min-height: 100vh;
-            background-color: #f5f5f5;
-        }
+        max-width: 100%;
+        max-height: 100%;
+        object-fit: contain;
+        transition: transform 0.3s ease;
+    }
+
+    .no-image-placeholder {
+        color: #ddd;
+        font-size: 3rem;
+    }
+
+    .favorite-btn {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+        background: rgba(255, 255, 255, 0.9);
+        border: none;
+        border-radius: 50%;
+        width: 36px;
+        height: 36px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        z-index: 2;
+        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+        transition: all 0.3s ease;
+    }
+
+    .favorite-btn:hover {
+        background: white;
+        transform: scale(1.1);
+    }
+
+    .favorite-btn i {
+        color: #e74c3c;
+        font-size: 18px;
+        transition: all 0.3s ease;
+    }
+
+    .favorite-btn i.active {
+        color: #e74c3c;
+    }
+
+    .discount-badge {
+        position: absolute;
+        top: 10px;
+        left: 10px;
+        background-color: #e74c3c;
+        color: white;
+        padding: 3px 8px;
+        border-radius: 3px;
+        font-size: 0.8rem;
+        font-weight: bold;
+    }
+
+    .product-info {
+        padding: 15px;
+    }
+
+    .product-name {
+        font-weight: 500;
+        margin: 0 0 10px 0;
+        color: #333;
+        font-size: 0.95rem;
+        line-height: 1.4;
+        height: 2.8em;
+        overflow: hidden;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+    }
+
+    .product-price {
+        margin: 15px 0;
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: 8px;
+    }
+
+    .regular-price, .discounted-price {
+        font-size: 1.1rem;
+        color: #2e652e;
+        font-weight: bold;
+    }
+
+    .original-price {
+        font-size: 0.9rem;
+        color: #666;
+        text-decoration: line-through;
+    }
+
+    .product-store {
+        margin-top: 15px;
+    }
+
+    .store-logo {
+        height: 35px;
+        max-width: 100%;
+        object-fit: contain;
+    }
+
+    .empty-lists-message {
+        grid-column: 1 / -1;
+        text-align: center;
+        padding: 40px;
+        background: white;
+        border-radius: 8px;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    }
+
+    .empty-icon {
+        font-size: 2.5rem;
+        margin-bottom: 15px;
+        color: #e74c3c;
+    }
+
+    .empty-lists-message h3 {
+        font-size: 1.2rem;
+        margin-bottom: 10px;
+        color: #2e652e;
+    }
+
+    .empty-lists-message p {
+        font-size: 0.9rem;
+        color: #666;
+        margin-bottom: 20px;
+    }
+
+    .action-button {
+        padding: 10px 25px;
+        font-size: 1rem;
+        background-color: #2e652e;
+        color: white;
+        border: none;
+        border-radius: 30px;
+        font-weight: 600;
+        cursor: pointer;
+        transition: background-color 0.3s ease, transform 0.3s ease;
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+        text-decoration: none;
+    }
+
+    .action-button:hover {
+        background-color: #1f3f1f;
+        transform: translateY(-2px);
+    }
+
+    /* Animations */
+    @keyframes pulseHeart {
+        0% { transform: scale(1); }
+        50% { transform: scale(1.3); }
+        100% { transform: scale(1); }
+    }
+
+    @keyframes fadeOut {
+        from { opacity: 1; transform: scale(1); }
+        to { opacity: 0; transform: scale(0.95); }
+    }
+
+    .pulse {
+        animation: pulseHeart 0.6s ease;
+    }
+
+    .fade-out {
+        animation: fadeOut 0.3s ease forwards;
+    }
+
+    /* Responsiveness */
+    @media (max-width: 1024px) {
+        .lists-grid {
+            grid-template-columns: repeat(3, 1fr);
+        }
+    }
+
+    @media (max-width: 768px) {
+        .content-area {
+            padding: 15px;
+            border-radius: 15px;
+        }
+
+        .lists-main-title {
+            font-size: 1.2rem;
+        }
+
+        .lists-grid {
+            grid-template-columns: repeat(2, 1fr);
+            gap: 15px;
+        }
+
+        .product-card {
+            border-radius: 15px;
+        }
+
+        .product-image-container {
+            height: 180px;
+        }
+
+        .action-button {
+            width: 100%;
+            justify-content: center;
+            padding: 12px;
+            border-radius: 25px;
+        }
+
+        .empty-lists-message {
+            padding: 30px 20px;
+        }
+    }
+
+    @media (max-width: 480px) {
+        .lists-main-title {
+            font-size: 1rem;
+        }
+
+        .lists-grid {
+            grid-template-columns: 1fr;
+        }
+
+        .empty-icon {
+            font-size: 2rem;
+        }
+
+        .empty-lists-message h3 {
+            font-size: 1rem;
+        }
+
+        .empty-lists-message p {
+            font-size: 0.8rem;
+        }
+    }
 </style>
 {% endblock %}
Index: main/templates/main/header.html
===================================================================
--- main/templates/main/header.html	(revision cd9f2f4e4afae458d5578788c887892d76ca8947)
+++ main/templates/main/header.html	(revision f84285e7b16852eab969772ebde9afe1b04fc8ae)
@@ -114,4 +114,18 @@
         .auth-btn:not(.logout):hover {
             background-color: #e0e0e0;
+        }
+
+        /* User greeting styles */
+        .user-greeting {
+            font-weight: 600;
+            color: #2e652e;
+            margin-right: 10px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            max-width: 150px;
+            display: flex;
+            align-items: center;
+            gap: 5px;
         }
 
@@ -167,4 +181,5 @@
             margin: 0;
             padding: 0;
+        {#justify-content: space-between;#}
         }
 
@@ -293,4 +308,5 @@
             cursor: pointer;
             transition: background-color 0.3s ease, transform 0.3s ease;
+            margin-left: -9px;
         }
 
@@ -319,4 +335,24 @@
             color: #2e652e;
             transform: translateX(5px);
+        }
+
+        /* User info in mobile menu */
+        .mobile-user-info {
+            padding: 15px;
+            margin-bottom: 10px;
+            background-color: rgba(255, 255, 255, 0.1);
+            border-radius: 8px;
+            color: white;
+        }
+
+        .mobile-user-info .username {
+            font-weight: bold;
+            font-size: 18px;
+            margin-bottom: 5px;
+        }
+
+        .mobile-user-info .email {
+            font-size: 14px;
+            opacity: 0.8;
         }
 
@@ -469,4 +505,10 @@
             body {
                 padding-bottom: 60px;
+            }
+        }
+
+        @media (max-width: 1024px) {
+            .header-search input {
+                width: 96%;
             }
         }
@@ -495,8 +537,9 @@
                     {% csrf_token %}
                     <div class="list-selector-container" style="display: flex; align-items: center; gap: 8px;">
-                        <a href="{% url 'favorites_list' %}" title="Омилени" style="color: #2e652e;">
+                        <a href="{% url 'favorites_list' %}" title="Омилени"
+                           style="color: #2e652e; margin-left: 20px; margin-right: 20px">
                             <i class="fas fa-heart" style="font-size: 18px;"></i>
                         </a>
-                        <select id="listSelector" class="list-selector">
+                        <select id="listSelector" class="list-selector" style="margin-right: 20px">
                             <option value="">-- Избери листа --</option>
                         </select>
@@ -518,9 +561,16 @@
     </div>
     <nav class="main-nav">
-        <ul>
-            <li><a href="{% url 'product_list' %}">Каталог</a></li>
-            <li style="z-index: 0"><a href="{% url 'stats' %}">Статистика</a></li>
-            <li><a href="{% url 'view_lists' %}">Листи</a></li>
-        </ul>
+        <div id="flex" style="display: flex; justify-content: space-between">
+            <ul>
+                <li><a href="{% url 'product_list' %}">Каталог</a></li>
+                <li style="z-index: 0"><a href="{% url 'stats' %}">Статистика</a></li>
+                <li><a href="{% url 'view_lists' %}">Листи</a></li>
+            </ul>
+            <div style="display: flex">
+                <span class="user-greeting" title="{{ user.username }}" style="color: white">
+                            <i class="fas fa-user-circle"></i> {{ user.username|truncatechars:15 }}
+                </span>
+            </div>
+        </div>
     </nav>
 </header>
@@ -529,5 +579,5 @@
 <div id="mobile-header">
     <div id="mobile-logo">
-        <img src="{% static 'images/shtedko_official1.png' %}" alt="Штедко лого">
+        <a href="{% url 'home' %}"><img src="{% static 'images/shtedko_official1.png' %}" alt="Штедко лого"></a>
     </div>
     <div class="menu-toggle" onclick="toggleMobileMenu()">☰</div>
@@ -540,4 +590,13 @@
     </div>
 
+    {% if user.is_authenticated %}
+        <div class="mobile-user-info">
+            <div class="username">
+                <i class="fas fa-user-circle"></i> {{ user.username }}
+            </div>
+            <div class="email">{{ user.email }}</div>
+        </div>
+    {% endif %}
+
     <form method="GET" action="{% url 'product_list' %}" class="mobile-search-form" id="mobileSearchForm">
         <input type="text" name="search" id="mobileSearchInput" placeholder="Пребарај производ..."
@@ -546,12 +605,4 @@
     </form>
 
-    {% if user.is_authenticated %}
-        <div class="mobile-list-selector-container">
-            <select id="mobileListSelector" class="mobile-list-selector">
-                <option value="">-- Избери листа --</option>
-            </select>
-        </div>
-    {% endif %}
-
     <nav class="mobile-nav">
         <a href="{% url 'home' %}">Дома</a>
@@ -561,8 +612,8 @@
 
         {% if user.is_authenticated %}
-            <a href="{% url 'logout' %}">Одјави се</a>
+            <a href="{% url 'logout' %}"><i class="fas fa-sign-out-alt"></i> Одјави се</a>
         {% else %}
-            <a href="{% url 'login' %}">Најави се</a>
-            <a href="{% url 'register' %}">Регистрирај се</a>
+            <a href="{% url 'login' %}"><i class="fas fa-sign-in-alt"></i> Најави се</a>
+            <a href="{% url 'register' %}"><i class="fas fa-user-plus"></i> Регистрирај се</a>
         {% endif %}
     </nav>
@@ -573,9 +624,4 @@
 <nav class="mobile-bottom-nav">
     <div class="mobile-bottom-nav-container">
-        <a href="{% url 'home' %}" class="mobile-bottom-nav-btn {% if request.path == '/' %}active{% endif %}">
-            <i class="fas fa-home"></i>
-            <span>Дома</span>
-        </a>
-
         <a href="{% url 'favorites_list' %}" class="mobile-bottom-nav-btn">
             <i class="fas fa-heart"></i>
@@ -583,23 +629,14 @@
         </a>
 
-
-        {% if user.is_authenticated %}
-            <div class="mobile-bottom-nav-selector">
-                <select id="mobileBottomListSelector" class="mobile-bottom-list-selector">
-                    <option value="">Листи</option>
-                </select>
-            </div>
-        {% else %}
-            <a href="{% url 'view_lists' %}"
-               class="mobile-bottom-nav-btn {% if 'lists' in request.path %}active{% endif %}">
-                <i class="fas fa-list"></i>
-                <span>Листи</span>
-            </a>
-        {% endif %}
-
-        {#        <a href="{% url 'product_list' %}" class="mobile-bottom-nav-btn {% if 'product' in request.path %}active{% endif %}">#}
-        {#            <i class="fas fa-search"></i>#}
-        {#            <span>Пребарувај</span>#}
-        {#        </a>#}
+        <div class="mobile-bottom-nav-selector">
+            <select id="mobileBottomListSelector" class="mobile-bottom-list-selector">
+                <option value="">-- Избери листа --</option>
+            </select>
+        </div>
+
+        <a href="{% url 'view_lists' %}" class="mobile-bottom-nav-btn">
+            <i class="fas fa-list"></i>
+            <span>Листи</span>
+        </a>
     </div>
 </nav>
@@ -608,5 +645,4 @@
 
 {% endblock %}
-
 
 <script>
@@ -677,5 +713,26 @@
         }
 
-        function setupSearch(input, form) {
+        function setupSearch(input, form, isMobile = false) {
+            form.addEventListener('submit', function (e) {
+                e.preventDefault();
+
+                const originalQuery = input.value.trim();
+                const cyrillicQuery = transliterateLatinToCyrillic(originalQuery);
+
+                const originalInput = document.createElement('input');
+                originalInput.type = 'hidden';
+                originalInput.name = 'original_search';
+                originalInput.value = originalQuery;
+                form.appendChild(originalInput);
+
+                const cyrillicInput = document.createElement('input');
+                cyrillicInput.type = 'hidden';
+                cyrillicInput.name = 'cyrillic_search';
+                cyrillicInput.value = cyrillicQuery;
+                form.appendChild(cyrillicInput);
+
+                form.submit();
+            });
+
             input.addEventListener('input', function () {
                 const query = this.value.trim();
@@ -696,7 +753,7 @@
                                 div.style.cursor = 'pointer';
                                 div.addEventListener('click', function () {
-                                    input.value = transliterateLatinToCyrillic(suggestion);
+                                    input.value = suggestion;
                                     suggestionsDiv.style.display = 'none';
-                                    form.submit();
+                                    form.dispatchEvent(new Event('submit'));
                                 });
                                 suggestionsDiv.appendChild(div);
@@ -713,16 +770,26 @@
                     e.preventDefault();
                     suggestionsDiv.style.display = 'none';
-                    input.value = transliterateLatinToCyrillic(input.value);
-                    form.submit();
+                    form.dispatchEvent(new Event('submit'));
                 }
             });
+
+            if (isMobile) {
+                const searchButton = form.querySelector('button[type="submit"]');
+                if (searchButton) {
+                    searchButton.addEventListener('click', function (e) {
+                        e.preventDefault();
+                        form.dispatchEvent(new Event('submit'));
+                    });
+                }
+            }
         }
 
         setupSearch(searchInput, searchForm);
-        setupSearch(mobileSearchInput, mobileSearchForm);
+        setupSearch(mobileSearchInput, mobileSearchForm, true);
 
         document.addEventListener('click', function (e) {
-            if (!searchInput.contains(e.target) && !suggestionsDiv.contains(e.target) &&
-                !mobileSearchInput.contains(e.target)) {
+            if (!searchInput.contains(e.target) &&
+                !mobileSearchInput.contains(e.target) &&
+                !suggestionsDiv.contains(e.target)) {
                 suggestionsDiv.style.display = 'none';
             }
@@ -734,9 +801,6 @@
             .then(response => response.json())
             .then(data => {
-                // Desktop list selector
                 const dropdown = document.getElementById('listSelector');
-                // Mobile list selector
                 const mobileDropdown = document.getElementById('mobileListSelector');
-                // Mobile bottom list selector
                 const mobileBottomDropdown = document.getElementById('mobileBottomListSelector');
 
@@ -756,5 +820,31 @@
                     }
                 });
+
+                const savedListId = localStorage.getItem('selectedListId');
+                if (savedListId) {
+                    if (dropdown) dropdown.value = savedListId;
+                    if (mobileDropdown) mobileDropdown.value = savedListId;
+                    if (mobileBottomDropdown) mobileBottomDropdown.value = savedListId;
+                }
             });
+
+        const listSelectors = [
+            document.getElementById('listSelector'),
+            document.getElementById('mobileListSelector'),
+            document.getElementById('mobileBottomListSelector')
+        ].filter(el => el !== null);
+
+        listSelectors.forEach(selector => {
+            selector.addEventListener('change', function () {
+                const selectedValue = this.value;
+                localStorage.setItem('selectedListId', selectedValue);
+
+                listSelectors.forEach(s => {
+                    if (s !== this) {
+                        s.value = selectedValue;
+                    }
+                });
+            });
+        });
     });
 
@@ -788,7 +878,5 @@
 
                     const result = await response.json();
-                    if (result.success) {
-                        {#alert("Производот е додаден во листата!");#}
-                    } else {
+                    if (!result.success) {
                         alert("Грешка: " + result.message);
                     }
@@ -800,5 +888,4 @@
         });
 
-        // Helper for CSRF token
         function getCookie(name) {
             let cookieValue = null;
@@ -819,28 +906,14 @@
     document.querySelectorAll('.add-to-list-btn').forEach(button => {
         button.addEventListener('click', function () {
-            button.classList.remove('pulse-on-click'); // reset animation if applied
-            void button.offsetWidth; // force reflow so animation can be reapplied
+            button.classList.remove('pulse-on-click');
+            void button.offsetWidth;
             button.classList.add('pulse-on-click');
         });
     });
 
-    // Sync list selectors
     document.addEventListener('DOMContentLoaded', function () {
-        const listSelectors = [
-            document.getElementById('listSelector'),
-            document.getElementById('mobileListSelector'),
-            document.getElementById('mobileBottomListSelector')
-        ].filter(el => el !== null);
-
-        listSelectors.forEach(selector => {
-            selector.addEventListener('change', function () {
-                const selectedValue = this.value;
-                listSelectors.forEach(s => {
-                    if (s !== this) {
-                        s.value = selectedValue;
-                    }
-                });
-            });
-        });
+        if (typeof initializePriceChart === 'function') {
+            initializePriceChart();
+        }
     });
 </script>
Index: main/templates/main/list_detail.html
===================================================================
--- main/templates/main/list_detail.html	(revision cd9f2f4e4afae458d5578788c887892d76ca8947)
+++ main/templates/main/list_detail.html	(revision f84285e7b16852eab969772ebde9afe1b04fc8ae)
@@ -30,5 +30,5 @@
         html, body {
             height: 100%;
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            font-family: Arial, sans-serif;
             background-image: url('{% static "images/baner1.jpg" %}');
             background-size: cover;
@@ -437,8 +437,8 @@
         {#    margin-right: 35px;#}
         {#}#}
-        {#.header-search input{#}
-        {#    margin-right: -20px;#}
-        {#    padding-right: 10px;#}
-        {#}#}
+       .header-search input{
+           width: 102%;
+       }
+        }
     </style>
 </head>
Index: main/templates/main/lists.html
===================================================================
--- main/templates/main/lists.html	(revision cd9f2f4e4afae458d5578788c887892d76ca8947)
+++ main/templates/main/lists.html	(revision f84285e7b16852eab969772ebde9afe1b04fc8ae)
@@ -7,703 +7,4 @@
 {% block content %}
 
-<!DOCTYPE html>
-<html lang="mk">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-    <title>Мои листи</title>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
-    <style>
-        /* Common Styles */
-        body {
-            font-family: Arial, sans-serif;
-            margin: 0;
-            padding: 0;
-            display: flex;
-            flex-direction: column;
-            min-height: 100vh;
-            background-color: #f5f5f5;
-        }
-
-        /* Header */
-        .main-header {
-            background-color: white;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-            position: sticky;
-            top: 0;
-            z-index: 1000;
-        }
-
-        .header-top {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 10px 20px;
-            border-bottom: 1px solid #e5e5e5;
-        }
-
-        .logo img {
-            height: 60px;
-        }
-
-        .header-search {
-            flex-grow: 1;
-            margin: 0 20px;
-            position: relative;
-        }
-
-        .header-search input {
-            width: 97%;
-            padding: 12px 20px;
-            border: 1px solid #ddd;
-            border-radius: 30px;
-            font-size: 16px;
-            background-color: #f5f5f5;
-        }
-
-        .header-search button {
-            position: absolute;
-            right: 15px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: none;
-            border: none;
-            color: #666;
-            cursor: pointer;
-            font-size: 18px;
-        }
-
-        .user-actions {
-            display: flex;
-            align-items: center;
-            gap: 15px;
-        }
-
-        .user-actions a, .user-actions button {
-            color: #333;
-            text-decoration: none;
-            font-size: 14px;
-            display: flex;
-            align-items: center;
-            gap: 5px;
-        }
-
-        .user-actions a:hover {
-            color: #2e652e;
-        }
-
-        .logout-btn {
-            background-color: #2e652e;
-            color: white;
-            border: none;
-            padding: 8px 16px;
-            border-radius: 20px;
-            font-weight: 600;
-            cursor: pointer;
-        }
-
-        .logout-btn:hover {
-            background-color: #1f3f1f;
-        }
-
-        /* Navigation */
-        .main-nav {
-            padding: 15px 30px;
-            background-color: #2e652e;
-        }
-
-        .main-nav ul {
-            display: flex;
-            list-style: none;
-            margin: 0;
-            padding: 0;
-        }
-
-        .main-nav li {
-            margin-right: 20px;
-        }
-
-        .main-nav a {
-            color: white;
-            text-decoration: none;
-            font-weight: 600;
-            padding: 5px 0;
-            position: relative;
-        }
-
-        .main-nav a:hover {
-            color: #fdd835;
-        }
-
-        .main-nav a::after {
-            content: '';
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            width: 0;
-            height: 2px;
-            background-color: #fdd835;
-            transition: width 0.3s ease;
-        }
-
-        .main-nav a:hover::after {
-            width: 100%;
-        }
-
-        /* Mobile Menu */
-        #mobile-header {
-            display: none;
-            justify-content: space-between;
-            align-items: center;
-            padding: 15px 20px;
-            background: linear-gradient(135deg, #2e652e, #1f3f1f);
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-            z-index: 1001;
-            position: relative;
-        }
-
-        #mobile-logo img {
-            height: 50px;
-        }
-
-        .menu-toggle {
-            font-size: 28px;
-            color: white;
-            cursor: pointer;
-            transition: transform 0.3s ease;
-        }
-
-        .menu-toggle:hover {
-            transform: scale(1.1);
-        }
-
-        .mobile-menu {
-            position: fixed;
-            top: 0;
-            right: -100%;
-            width: 75%;
-            height: 100vh;
-            background: linear-gradient(135deg, #f0f7f0, #e0e8e0);
-            box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3);
-            transition: right 0.3s ease;
-            padding: 20px;
-            z-index: 1002;
-            display: flex;
-            flex-direction: column;
-        }
-
-        .mobile-menu.open {
-            right: 0;
-        }
-
-        .mobile-menu-header {
-            display: flex;
-            justify-content: flex-end;
-            margin-bottom: 20px;
-        }
-
-        .close-btn {
-            cursor: pointer;
-            font-size: 28px;
-            color: #2e652e;
-            transition: color 0.3s ease;
-        }
-
-        .close-btn:hover {
-            color: #1f3f1f;
-        }
-
-        .mobile-search-form {
-            display: flex;
-            align-items: center;
-            padding: 12px 16px;
-            gap: 10px;
-            background: white;
-            border-radius: 25px;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-            margin-bottom: 20px;
-        }
-
-        .mobile-search-form input {
-            flex: 1;
-            padding: 10px 15px;
-            border: none;
-            border-radius: 20px;
-            font-size: 14px;
-            outline: none;
-            background: #f5f5f5;
-        }
-
-        .mobile-search-form button {
-            background-color: #2e652e;
-            color: white;
-            border: none;
-            padding: 10px 15px;
-            border-radius: 50%;
-            font-size: 16px;
-            cursor: pointer;
-            transition: background-color 0.3s ease, transform 0.3s ease;
-        }
-
-        .mobile-search-form button:hover {
-            background-color: #1f3f1f;
-            transform: scale(1.1);
-        }
-
-        .mobile-nav {
-            display: flex;
-            flex-direction: column;
-            gap: 20px;
-        }
-
-        .mobile-nav a {
-            color: #2e652e;
-            text-decoration: none;
-            font-size: 18px;
-            padding: 10px 15px;
-            border-radius: 8px;
-            transition: background-color 0.3s ease, color 0.3s ease;
-        }
-
-        .mobile-nav a:hover {
-            background-color: #2e652e;
-            color: white;
-            transform: translateX(5px);
-        }
-
-        #overlay {
-            display: none;
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100vw;
-            height: 100vh;
-            background: rgba(0, 0, 0, 0.5);
-            z-index: 1000;
-        }
-
-        #overlay.active {
-            display: block;
-        }
-
-        /* Message Styling */
-        .message-container {
-            position: fixed;
-            top: 20px;
-            right: 20px;
-            z-index: 1000;
-            max-width: 400px;
-        }
-
-        .alert {
-            padding: 15px;
-            margin-bottom: 10px;
-            border-radius: 4px;
-            position: relative;
-            background-color: #f8f9fa;
-            border-left: 4px solid #6c757d;
-        }
-
-        .alert-success {
-            background-color: #d4edda;
-            border-left-color: #28a745;
-        }
-
-        .alert-error {
-            background-color: #f8d7da;
-            border-left-color: #dc3545;
-        }
-
-        .close-btn {
-            position: absolute;
-            right: 15px;
-            top: 50%;
-            transform: translateY(-50%);
-            cursor: pointer;
-            font-size: 20px;
-        }
-
-        /* Main Content */
-        .main-content {
-            max-width: 1200px;
-            margin: 20px auto;
-            padding: 0 15px;
-            flex-grow: 1;
-        }
-
-        .content-area {
-            background-color: white;
-            border-radius: 8px;
-            padding: 20px;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-        }
-
-        .page-header {
-            text-align: center;
-            margin-bottom: 20px;
-        }
-
-        .lists-main-title {
-            font-size: 1.5rem;
-            font-weight: 600;
-            color: #2e652e;
-            margin-bottom: 10px;
-        }
-
-        .header-decoration {
-            height: 4px;
-            width: 80px;
-            background: linear-gradient(to right, #2e652e, #4caf50);
-            margin: 0 auto;
-            border-radius: 2px;
-        }
-
-        .lists-actions {
-            margin-bottom: 20px;
-            text-align: center;
-        }
-
-        .action-button {
-            padding: 10px 25px;
-            font-size: 1rem;
-            background-color: #2e652e;
-            color: white;
-            border: none;
-            border-radius: 30px;
-            font-weight: 600;
-            cursor: pointer;
-            transition: background-color 0.3s ease, transform 0.3s ease;
-            display: inline-flex;
-            align-items: center;
-            gap: 8px;
-        }
-
-        .action-button:hover {
-            background-color: #1f3f1f;
-            transform: translateY(-2px);
-        }
-
-        .secondary-button {
-            background-color: #f5f5f5;
-            color: #2e652e;
-        }
-
-        .secondary-button:hover {
-            background-color: #e0e8e0;
-        }
-
-        .danger-button {
-            background-color: #e74c3c;
-        }
-
-        .danger-button:hover {
-            background-color: #c62828;
-        }
-
-        .create-list-form {
-            max-width: 500px;
-            margin: 20px auto;
-            padding: 15px;
-            background: #f9f9f9;
-            border-radius: 8px;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-            display: none;
-        }
-
-        .form-group {
-            margin-bottom: 15px;
-        }
-
-        .form-input {
-            width: 100%;
-            padding: 12px 15px;
-            border: 1px solid #ddd;
-            border-radius: 6px;
-            font-size: 1rem;
-            background-color: #f5f5f5;
-        }
-
-        .form-input:focus {
-            border-color: #2e652e;
-            outline: none;
-            box-shadow: 0 0 0 3px rgba(46, 101, 46, 0.2);
-        }
-
-        .form-actions {
-            display: flex;
-            gap: 10px;
-            justify-content: flex-end;
-        }
-
-        .lists-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-            gap: 20px;
-        }
-
-        .list-card {
-            background: white;
-            border-radius: 8px;
-            overflow: hidden;
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-            transition: transform 0.3s ease, box-shadow 0.3s ease;
-            position: relative;
-        }
-
-        .list-card:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
-        }
-
-        .list-card-link {
-            text-decoration: none;
-            color: inherit;
-            display: block;
-            padding: 15px;
-        }
-
-        .list-icon {
-            width: 40px;
-            height: 40px;
-            background-color: #f0f7f0;
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            margin-bottom: 10px;
-            color: #2e652e;
-            font-size: 1rem;
-        }
-
-        .list-title {
-            font-weight: 500;
-            margin-bottom: 8px;
-            font-size: 14px;
-            display: -webkit-box;
-            -webkit-line-clamp: 2;
-            -webkit-box-orient: vertical;
-            overflow: hidden;
-        }
-
-        .list-meta {
-            display: flex;
-            flex-direction: column;
-            gap: 5px;
-            font-size: 12px;
-            color: #666;
-        }
-
-        .meta-item {
-            display: flex;
-            align-items: center;
-            gap: 5px;
-        }
-
-        .delete-list-form {
-            position: absolute;
-            top: 10px;
-            right: 10px;
-        }
-
-        .delete-list-form .action-button {
-            padding: 5px 10px;
-            font-size: 0.85rem;
-        }
-
-        .empty-lists-message {
-            grid-column: 1 / -1;
-            text-align: center;
-            padding: 20px;
-            background: white;
-            border-radius: 8px;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-        }
-
-        .empty-icon {
-            font-size: 2rem;
-            margin-bottom: 10px;
-            color: #2e652e;
-        }
-
-        .empty-lists-message h3 {
-            font-size: 1.2rem;
-            margin-bottom: 10px;
-            color: #2e652e;
-        }
-
-        .empty-lists-message p {
-            font-size: 0.9rem;
-            color: #666;
-        }
-
-        /* Footer */
-        footer {
-            background: linear-gradient(135deg, #2e652e, #1f3f1f);
-            color: white;
-            padding: 40px 20px;
-            margin-top: auto;
-        }
-
-        .footer-content {
-            max-width: 1200px;
-            margin: 0 auto;
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-            gap: 30px;
-        }
-
-        .footer-section h3 {
-            margin-bottom: 20px;
-            font-size: 1.2rem;
-            color: #fdd835;
-        }
-
-        .footer-section p, .footer-section a {
-            color: #ddd;
-            margin-bottom: 10px;
-            display: block;
-            text-decoration: none;
-            transition: color 0.3s ease;
-            font-size: 14px;
-        }
-
-        .footer-section a:hover {
-            color: #fff;
-            text-decoration: underline;
-        }
-
-        .footer-section.social a {
-            display: inline-flex;
-            align-items: center;
-            gap: 8px;
-        }
-
-        .copyright {
-            text-align: center;
-            padding-top: 20px;
-            margin-top: 20px;
-            border-top: 1px solid rgba(255, 255, 255, 0.2);
-            color: #bbb;
-            font-size: 0.9rem;
-        }
-
-        /* Responsiveness */
-        @media (max-width: 768px) {
-            .main-header {
-                display: none;
-            }
-
-            #mobile-header {
-                display: flex;
-            }
-
-            .main-content {
-                padding: 10px;
-            }
-
-            .content-area {
-                padding: 15px;
-                border-radius: 15px;
-            }
-
-            .lists-main-title {
-                font-size: 1.2rem;
-            }
-
-            .lists-grid {
-                grid-template-columns: 1fr;
-                gap: 15px;
-            }
-
-            .list-card {
-                border-radius: 15px;
-            }
-
-            .list-icon {
-                width: 50px;
-                height: 50px;
-                font-size: 1.2rem;
-            }
-
-            .list-title {
-                font-size: 16px;
-            }
-
-            .list-meta {
-                font-size: 14px;
-            }
-
-            .action-button {
-                width: 100%;
-                justify-content: center;
-                padding: 12px;
-                border-radius: 25px;
-            }
-
-            .form-actions {
-                flex-direction: column;
-            }
-
-            .form-actions button {
-                width: 100%;
-            }
-
-            .create-list-form {
-                padding: 20px;
-                border-radius: 15px;
-            }
-
-            .form-input {
-                padding: 10px 15px;
-            }
-        }
-
-        @media (max-width: 480px) {
-            .lists-main-title {
-                font-size: 1rem;
-            }
-
-            .list-icon {
-                width: 40px;
-                height: 40px;
-                font-size: 1rem;
-            }
-
-            .list-title {
-                font-size: 14px;
-            }
-
-            .list-meta {
-                font-size: 12px;
-            }
-
-            .empty-icon {
-                font-size: 1.5rem;
-            }
-
-            .empty-lists-message h3 {
-                font-size: 1rem;
-            }
-
-            .empty-lists-message p {
-                font-size: 0.8rem;
-            }
-        }
-    </style>
-</head>
-<body>
-<!-- Message Container -->
-<div class="message-container">
-    {% if messages %}
-        {% for message in messages %}
-            <div class="alert alert-{{ message.tags }}">
-                {{ message }}
-                <span class="close-btn" onclick="this.parentElement.remove()">×</span>
-            </div>
-        {% endfor %}
-    {% endif %}
-</div>
-
-<!-- Main Content -->
 <div class="main-content">
     <main class="content-area">
@@ -717,9 +18,10 @@
             </button>
             <div id="create-list-form" class="create-list-form">
-                <form method="post" action="{% url 'create_list' %}">
+                <form method="post" action="{% url 'create_list' %}" id="list-form">
                     {% csrf_token %}
                     <div class="form-group">
-                        <input type="text" name="list_name" placeholder="Име на листата" required
-                               class="form-input">
+                        <input type="text" name="list_name" id="list-name-input" placeholder="Име на листата" required
+                               class="form-input" maxlength="100">
+                        <small id="list-name-error" style="color: red; display: none;"></small>
                     </div>
                     <div class="form-actions">
@@ -749,5 +51,5 @@
                     <form method="post" action="{% url 'delete_list' list.id %}" class="delete-list-form">
                         {% csrf_token %}
-                        <button type="submit" class="action-button danger-button">
+                        <button type="submit" class="action-button danger-button" onclick="return confirm('Дали сте сигурни дека сакате да ја избришете оваа листа?')">
                             <i class="fas fa-trash-alt"></i>
                         </button>
@@ -805,4 +107,7 @@
         const createForm = document.getElementById('create-list-form');
         const cancelBtn = document.getElementById('cancel-create');
+        const listForm = document.getElementById('list-form');
+        const listNameInput = document.getElementById('list-name-input');
+        const listNameError = document.getElementById('list-name-error');
 
         if (createBtn && createForm && cancelBtn) {
@@ -810,4 +115,5 @@
                 createForm.style.display = 'block';
                 this.style.display = 'none';
+                listNameInput.focus();
             });
 
@@ -815,4 +121,61 @@
                 createForm.style.display = 'none';
                 createBtn.style.display = 'inline-flex';
+                listNameError.style.display = 'none';
+                listNameInput.value = '';
+            });
+        }
+
+        // List form submission with AJAX
+        if (listForm) {
+            listForm.addEventListener('submit', function(e) {
+                e.preventDefault();
+
+                const formData = new FormData(this);
+                const listName = formData.get('list_name').trim();
+
+                // Validate list name
+                if (listName.length === 0) {
+                    listNameError.textContent = 'Внесете име за листата';
+                    listNameError.style.display = 'block';
+                    return;
+                }
+
+                if (listName.length > 100) {
+                    listNameError.textContent = 'Името не смее да биде подолго од 100 карактери';
+                    listNameError.style.display = 'block';
+                    return;
+                }
+
+                fetch(this.action, {
+                    method: 'POST',
+                    body: formData,
+                    headers: {
+                        'X-CSRFToken': formData.get('csrfmiddlewaretoken'),
+                        'X-Requested-With': 'XMLHttpRequest'
+                    }
+                })
+                .then(response => response.json())
+                .then(data => {
+                    if (data.success) {
+                        // Reload the page to show the new list
+                        window.location.reload();
+                    } else {
+                        // Show error message
+                        listNameError.textContent = data.error || 'Настана грешка. Обидете се повторно.';
+                        listNameError.style.display = 'block';
+                    }
+                })
+                .catch(error => {
+                    console.error('Error:', error);
+                    listNameError.textContent = 'Настана грешка. Обидете се повторно.';
+                    listNameError.style.display = 'block';
+                });
+            });
+        }
+
+        // Clear error when typing
+        if (listNameInput) {
+            listNameInput.addEventListener('input', function() {
+                listNameError.style.display = 'none';
             });
         }
@@ -833,11 +196,378 @@
             overlay.classList.toggle('active');
         }
-
-
-
-
-
+    });
 </script>
-</body>
+
+<style>
+    /* Common Styles */
+    body {
+        font-family: Arial, sans-serif;
+        margin: 0;
+        padding: 0;
+        display: flex;
+        flex-direction: column;
+        min-height: 100vh;
+        background-color: #f5f5f5;
+    }
+
+    /* Main Content */
+    .main-content {
+        max-width: 1200px;
+        margin: 20px auto;
+        padding: 0 15px;
+        flex-grow: 1;
+    }
+
+    .content-area {
+        background-color: white;
+        border-radius: 8px;
+        padding: 20px;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    }
+
+    .page-header {
+        text-align: center;
+        margin-bottom: 20px;
+    }
+
+    .lists-main-title {
+        font-size: 1.5rem;
+        font-weight: 600;
+        color: #2e652e;
+        margin-bottom: 10px;
+    }
+
+    .header-decoration {
+        height: 4px;
+        width: 80px;
+        background: linear-gradient(to right, #2e652e, #4caf50);
+        margin: 0 auto;
+        border-radius: 2px;
+    }
+
+    .lists-actions {
+        margin-bottom: 20px;
+        text-align: center;
+    }
+
+    .action-button {
+        padding: 10px 25px;
+        font-size: 1rem;
+        background-color: #2e652e;
+        color: white;
+        border: none;
+        border-radius: 30px;
+        font-weight: 600;
+        cursor: pointer;
+        transition: background-color 0.3s ease, transform 0.3s ease;
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+    }
+
+    .action-button:hover {
+        background-color: #1f3f1f;
+        transform: translateY(-2px);
+    }
+
+    .secondary-button {
+        background-color: #f5f5f5;
+        color: #2e652e;
+    }
+
+    .secondary-button:hover {
+        background-color: #e0e8e0;
+    }
+
+    .danger-button {
+        background-color: #e74c3c;
+    }
+
+    .danger-button:hover {
+        background-color: #c62828;
+    }
+
+    .create-list-form {
+        max-width: 500px;
+        margin: 20px auto;
+        padding: 15px;
+        background: #f9f9f9;
+        border-radius: 8px;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        display: none;
+    }
+
+    .form-group {
+        margin-bottom: 15px;
+    }
+
+    .form-input {
+        width: 100%;
+        padding: 12px 15px;
+        border: 1px solid #ddd;
+        border-radius: 6px;
+        font-size: 1rem;
+        background-color: #f5f5f5;
+    }
+
+    .form-input:focus {
+        border-color: #2e652e;
+        outline: none;
+        box-shadow: 0 0 0 3px rgba(46, 101, 46, 0.2);
+    }
+
+    .form-actions {
+        display: flex;
+        gap: 10px;
+        justify-content: flex-end;
+    }
+
+    .lists-grid {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr); /* Exactly 3 columns */
+        gap: 30px;
+    }
+
+    .list-card {
+        background: white;
+        border-radius: 8px;
+        overflow: hidden;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        transition: transform 0.3s ease, box-shadow 0.3s ease;
+        position: relative;
+        padding-right: 50px;
+    }
+
+    .list-card:hover {
+        transform: translateY(-5px);
+        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+    }
+
+    .list-card-link {
+        text-decoration: none;
+        color: inherit;
+        display: block;
+        padding: 15px;
+    }
+
+    .list-icon {
+        width: 40px;
+        height: 40px;
+        background-color: #f0f7f0;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-bottom: 10px;
+        color: #2e652e;
+        font-size: 1rem;
+    }
+
+    .list-title {
+        font-weight: 500;
+        margin-bottom: 8px;
+        font-size: 14px;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+    }
+
+    .list-meta {
+        display: flex;
+        flex-direction: column;
+        gap: 5px;
+        font-size: 12px;
+        color: #666;
+    }
+
+    .meta-item {
+        display: flex;
+        align-items: center;
+        gap: 5px;
+    }
+
+    .delete-list-form {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+    }
+
+    .delete-list-form .action-button {
+        padding: 5px 10px;
+        font-size: 0.85rem;
+    }
+
+    .empty-lists-message {
+        grid-column: 1 / -1;
+        text-align: center;
+        padding: 20px;
+        background: white;
+        border-radius: 8px;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    }
+
+    .empty-icon {
+        font-size: 2rem;
+        margin-bottom: 10px;
+        color: #2e652e;
+    }
+
+    .empty-lists-message h3 {
+        font-size: 1.2rem;
+        margin-bottom: 10px;
+        color: #2e652e;
+    }
+
+    .empty-lists-message p {
+        font-size: 0.9rem;
+        color: #666;
+    }
+
+    /* Footer */
+    footer {
+        background: linear-gradient(135deg, #2e652e, #1f3f1f);
+        color: white;
+        padding: 40px 20px;
+        margin-top: auto;
+    }
+
+    .footer-content {
+        max-width: 1200px;
+        margin: 0 auto;
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+        gap: 30px;
+    }
+
+    .footer-section h3 {
+        margin-bottom: 20px;
+        font-size: 1.2rem;
+        color: #fdd835;
+    }
+
+    .footer-section p, .footer-section a {
+        color: #ddd;
+        margin-bottom: 10px;
+        display: block;
+        text-decoration: none;
+        transition: color 0.3s ease;
+        font-size: 14px;
+    }
+
+    .footer-section a:hover {
+        color: #fff;
+        text-decoration: underline;
+    }
+
+    .footer-section.social a {
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+    }
+
+    .copyright {
+        text-align: center;
+        padding-top: 20px;
+        margin-top: 20px;
+        border-top: 1px solid rgba(255, 255, 255, 0.2);
+        color: #bbb;
+        font-size: 0.9rem;
+    }
+
+    /* Responsiveness */
+    @media (max-width: 768px) {
+        .main-content {
+            padding: 10px;
+        }
+
+        .content-area {
+            padding: 15px;
+            border-radius: 15px;
+        }
+
+        .lists-main-title {
+            font-size: 1.2rem;
+        }
+
+        .lists-grid {
+            grid-template-columns: 1fr;
+            gap: 15px;
+        }
+
+        .list-card {
+            border-radius: 15px;
+        }
+
+        .list-icon {
+            width: 50px;
+            height: 50px;
+            font-size: 1.2rem;
+        }
+
+        .list-title {
+            font-size: 16px;
+        }
+
+        .list-meta {
+            font-size: 14px;
+        }
+
+        .action-button {
+            width: 100%;
+            justify-content: center;
+            padding: 12px;
+            border-radius: 25px;
+        }
+
+        .form-actions {
+            flex-direction: column;
+        }
+
+        .form-actions button {
+            width: 100%;
+        }
+
+        .create-list-form {
+            padding: 20px;
+            border-radius: 15px;
+        }
+
+        .form-input {
+            padding: 10px 15px;
+        }
+    }
+
+    @media (max-width: 480px) {
+        .lists-main-title {
+            font-size: 1rem;
+        }
+
+        .list-icon {
+            width: 40px;
+            height: 40px;
+            font-size: 1rem;
+        }
+
+        .list-title {
+            font-size: 14px;
+        }
+
+        .list-meta {
+            font-size: 12px;
+        }
+
+        .empty-icon {
+            font-size: 1.5rem;
+        }
+
+        .empty-lists-message h3 {
+            font-size: 1rem;
+        }
+
+        .empty-lists-message p {
+            font-size: 0.8rem;
+        }
+    }
+</style>
 {% endblock %}
-</html>
Index: main/templates/main/nearby_stores.html
===================================================================
--- main/templates/main/nearby_stores.html	(revision cd9f2f4e4afae458d5578788c887892d76ca8947)
+++ main/templates/main/nearby_stores.html	(revision f84285e7b16852eab969772ebde9afe1b04fc8ae)
@@ -1,4 +1,6 @@
+{% extends 'main/header.html' %}
 {% load static %}
 
+{% block content %}
 <!DOCTYPE html>
 <html lang="en">
@@ -8,186 +10,64 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
     <title>Најблиски продавници</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-    <!-- Leaflet CSS -->
     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
           integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
           crossorigin=""/>
     <style>
-        /* Common Styles */
+        :root {
+            --primary-color: #2e652e;
+            --primary-dark: #1f3f1f;
+            --light-bg: #f5f5f5;
+            --white: #ffffff;
+            --text-dark: #333333;
+            --text-light: #666666;
+            --border-color: #e0e0e0;
+        }
+
+        /* Base Styles */
         body {
             font-family: Arial, sans-serif;
             margin: 0;
             padding: 0;
-            display: flex;
-            flex-direction: column;
-            min-height: 100vh;
-            background: url('{% static "images/baner1.jpg" %}') no-repeat center center fixed;
-            background-size: cover;
-        }
-
-        /* Header */
-        .main-header {
-            background-color: white;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-            position: sticky;
-            top: 0;
-            z-index: 1000;
-        }
-
-        .header-top {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 10px 20px;
-            border-bottom: 1px solid #e5e5e5;
-        }
-
-        .logo img {
-            height: 60px;
-        }
-
-        .header-search {
-            flex-grow: 1;
-            margin: 0 20px;
-            position: relative;
-        }
-
-        .header-search input {
-            width: 97%;
-            padding: 12px 20px;
-            border: 1px solid #ddd;
-            border-radius: 30px;
-            font-size: 16px;
-            background-color: #f5f5f5;
-        }
-
-        .header-search button {
-            position: absolute;
-            right: 15px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: none;
-            border: none;
-            color: #666;
-            cursor: pointer;
-            font-size: 18px;
-        }
-
-        .user-actions {
-            display: flex;
-            align-items: center;
-            gap: 15px;
-        }
-
-        .user-actions a {
-            color: #333;
-            text-decoration: none;
-            font-size: 14px;
-            display: flex;
-            align-items: center;
-            gap: 5px;
-        }
-
-        .user-actions a:hover {
-            color: #2e652e;
-        }
-
-        .logout-btn {
-            background-color: #2e652e;
+            background-color: var(--light-bg);
+            color: var(--text-dark);
+            line-height: 1.6;
+        }
+
+        /* Stores Page Container */
+        .stores-wrapper {
+            padding: 20px;
+            max-width: 1400px;
+            margin: 0 auto;
+        }
+
+        /* Main Container */
+        .stores-container {
+            background-color: var(--white);
+            border-radius: 12px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+            overflow: hidden;
+            margin-bottom: 30px;
+            animation: fadeIn 0.4s ease-out;
+        }
+
+        /* Header Section */
+        .stores-header {
+            background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
+                url('{% static "images/baner1.jpg" %}') center center / cover no-repeat;
             color: white;
-            border: none;
-            padding: 8px 16px;
-            border-radius: 20px;
-            font-weight: 600;
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            gap: 5px;
-        }
-
-        .logout-btn:hover {
-            background-color: #1f3f1f;
+            padding: 40px 20px;
+            text-align: center;
+        }
+
+        .stores-main-title {
+            font-size: 28px;
+            font-weight: 700;
+            margin: 0;
+            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
         }
 
         /* Navigation */
-        .main-nav {
-            padding: 15px 30px;
-            background-color: #2e652e;
-        }
-
-        .main-nav ul {
-            display: flex;
-            list-style: none;
-            margin: 0;
-            padding: 0;
-        }
-
-        .main-nav li {
-            margin-right: 20px;
-        }
-
-        .main-nav a {
-            color: white;
-            text-decoration: none;
-            font-weight: 600;
-            padding: 5px 0;
-            position: relative;
-        }
-
-        .main-nav a:hover {
-            color: #fdd835;
-        }
-
-        .main-nav a::after {
-            content: '';
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            width: 0;
-            height: 2px;
-            background-color: #fdd835;
-            transition: width 0.3s ease;
-        }
-
-        .main-nav a:hover::after {
-            width: 100%;
-        }
-
-        /* Nearby Stores Page Styles */
-        .stores-wrapper {
-            flex: 1;
-            padding: 20px;
-            background: rgba(255, 255, 255, 0.9);
-        }
-
-        .stores-container {
-            max-width: 1200px;
-            margin: 20px auto;
-            background-color: white;
-            border-radius: 12px;
-            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
-            padding: 30px;
-            animation: fadeIn 0.5s ease-in;
-        }
-
-        @keyframes fadeIn {
-            from { opacity: 0; transform: translateY(20px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
-
-        .stores-main-title {
-            background: linear-gradient(135deg, #2e652e, #1f3f1f);
-            color: white;
-            padding: 15px;
-            border-radius: 8px;
-            text-align: center;
-            font-size: 24px;
-            font-weight: 600;
-            margin-bottom: 30px;
-            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
-        }
-
         .back-button {
-            margin-bottom: 20px;
+            margin: 20px;
         }
 
@@ -197,22 +77,23 @@
             gap: 8px;
             padding: 10px 20px;
-            background-color: #e8f5e9;
-            color: #2e652e;
+            background-color: var(--white);
+            color: var(--primary-color);
             border-radius: 30px;
             text-decoration: none;
             font-weight: 600;
             transition: all 0.3s ease;
-            border: 2px solid #c8e6c9;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+            border: 1px solid rgba(46, 101, 46, 0.2);
         }
 
         .back-button a:hover {
-            background-color: #d0f0d0;
-            border-color: #b2dfdb;
+            background-color: #f0f7f0;
             transform: translateY(-2px);
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-        }
-
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+        }
+
+        /* Form Styles */
         .store-search-form {
-            margin-bottom: 30px;
+            padding: 0 20px 20px;
         }
 
@@ -220,9 +101,10 @@
             display: flex;
             gap: 20px;
-            margin-bottom: 15px;
+            margin-bottom: 20px;
         }
 
         .form-group {
             flex: 1;
+            min-width: 0;
         }
 
@@ -231,5 +113,6 @@
             margin-bottom: 8px;
             font-weight: 500;
-            color: #2e652e;
+            color: var(--primary-color);
+            font-size: 14px;
         }
 
@@ -237,20 +120,20 @@
             width: 100%;
             padding: 12px 15px;
-            border: 2px solid #aed581;
-            border-radius: 6px;
-            font-size: 16px;
-            background-color: #fff;
-            transition: all 0.3s ease;
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            font-size: 15px;
+            background-color: var(--white);
+            transition: all 0.2s ease;
         }
 
         .form-input:focus {
-            border-color: #2e652e;
+            border-color: var(--primary-color);
             outline: none;
-            box-shadow: 0 0 8px rgba(46, 101, 46, 0.3);
+            box-shadow: 0 0 0 3px rgba(46, 101, 46, 0.1);
         }
 
         .form-actions {
             text-align: center;
-            margin-top: 20px;
+            margin-top: 30px;
             display: flex;
             gap: 15px;
@@ -262,28 +145,28 @@
             align-items: center;
             gap: 8px;
-            padding: 12px 25px;
+            padding: 14px 30px;
             border-radius: 30px;
             font-weight: 600;
             cursor: pointer;
             transition: all 0.3s ease;
+            font-size: 16px;
             border: 2px solid transparent;
         }
 
         .primary-button {
-            background-color: #2e652e;
-            color: white;
-            border-color: #2e652e;
+            background-color: var(--primary-color);
+            color: var(--white);
+            border-color: var(--primary-color);
         }
 
         .primary-button:hover {
-            background-color: #1f3f1f;
-            border-color: #1f3f1f;
+            background-color: var(--primary-dark);
             transform: translateY(-2px);
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
         }
 
         .secondary-button {
             background-color: #e8f5e9;
-            color: #2e652e;
+            color: var(--primary-color);
             border-color: #c8e6c9;
         }
@@ -291,21 +174,21 @@
         .secondary-button:hover {
             background-color: #d0f0d0;
-            border-color: #b2dfdb;
             transform: translateY(-2px);
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-        }
-
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+        }
+
+        /* Stores Grid */
         .stores-grid {
             display: grid;
             grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
             gap: 20px;
-            margin-top: 30px;
+            margin: 30px 20px;
         }
 
         .store-card {
-            background-color: white;
+            background-color: var(--white);
             border-radius: 8px;
             padding: 20px;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
             transition: all 0.3s ease;
             border-left: 4px solid #81c784;
@@ -314,9 +197,9 @@
         .store-card:hover {
             transform: translateY(-3px);
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
         }
 
         .store-title {
-            color: #2e652e;
+            color: var(--primary-color);
             margin: 0 0 15px 0;
             font-size: 18px;
@@ -334,16 +217,32 @@
             align-items: center;
             gap: 8px;
-            color: #555;
+            color: var(--text-light);
         }
 
         .meta-item i {
-            color: #2e652e;
+            color: var(--primary-color);
             width: 20px;
             text-align: center;
         }
 
+        /* Map Styles */
+        #map-container {
+            height: 500px;
+            margin: 20px;
+            border-radius: 8px;
+            overflow: hidden;
+            border: 1px solid var(--border-color);
+        }
+
+        #map {
+            height: 100%;
+            width: 100%;
+        }
+
+        /* Empty State */
         .no-stores {
             text-align: center;
-            padding: 30px;
+            padding: 40px;
+            margin: 20px;
             background-color: #fff3e0;
             border-radius: 8px;
@@ -370,154 +269,16 @@
         }
 
-        /* Map Styles */
-         /* Mobile Menu */
-        #mobile-header {
-            display: none;
-            justify-content: space-between;
-            align-items: center;
-            padding: 15px 20px;
-            background: linear-gradient(135deg, #2e652e, #1f3f1f);
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-            z-index: 1001;
-            position: relative;
-        }
-
-        #mobile-logo img {
-            height: 50px;
-        }
-
-        .menu-toggle {
-            font-size: 28px;
-            color: white;
-            cursor: pointer;
-            transition: transform 0.3s ease;
-        }
-
-        .menu-toggle:hover {
-            transform: scale(1.1);
-        }
-
-        .mobile-menu {
-            position: fixed;
-            top: 0;
-            right: -100%;
-            width: 75%;
-            height: 100vh;
-            background: linear-gradient(135deg, #f0f7f0, #e0e8e0);
-            box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3);
-            transition: right 0.3s ease;
-            padding: 20px;
-            z-index: 1002;
-            display: flex;
-            flex-direction: column;
-        }
-
-        .mobile-menu.open {
-            right: 0;
-        }
-
-        .mobile-menu-header {
-            display: flex;
-            justify-content: flex-end;
-            margin-bottom: 20px;
-        }
-
-        .close-btn {
-            cursor: pointer;
-            font-size: 28px;
-            color: #2e652e;
-            transition: color 0.3s ease;
-        }
-
-        .close-btn:hover {
-            color: #1f3f1f;
-        }
-
-        .mobile-search-form {
-            display: flex;
-            align-items: center;
-            padding: 12px 16px;
-            gap: 10px;
-            background: white;
-            border-radius: 25px;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-            margin-bottom: 20px;
-        }
-
-        .mobile-search-form input {
-            flex: 1;
-            padding: 10px 15px;
-            border: none;
-            border-radius: 20px;
-            font-size: 14px;
-            outline: none;
-            background: #f5f5f5;
-        }
-
-        .mobile-search-form button {
-            background-color: #2e652e;
-            color: white;
-            border: none;
-            padding: 10px 15px;
-            border-radius: 50%;
-            font-size: 16px;
-            cursor: pointer;
-            transition: background-color 0.3s ease, transform 0.3s ease;
-        }
-
-        .mobile-search-form button:hover {
-            background-color: #1f3f1f;
-            transform: scale(1.1);
-        }
-
-        .mobile-nav {
-            display: flex;
-            flex-direction: column;
-            gap: 20px;
-        }
-
-        .mobile-nav a {
-            color: #2e652e;
-            text-decoration: none;
-            font-size: 18px;
-            padding: 10px 15px;
-            border-radius: 8px;
-            transition: background-color 0.3s ease, color 0.3s ease;
-        }
-
-        .mobile-nav a:hover {
-            background-color: #2e652e;
-            color: white;
-            transform: translateX(5px);
-        }
-
-        #overlay {
-            display: none;
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100vw;
-            height: 100vh;
-            background: rgba(0, 0, 0, 0.5);
-            z-index: 1000;
-        }
-
-        #overlay.active {
-            display: block;
-        }        /* Responsiveness */
+        /* Section Titles */
+        .section-title {
+            color: var(--primary-color);
+            font-size: 20px;
+            font-weight: 600;
+            margin: 30px 20px 15px;
+            padding-bottom: 10px;
+            border-bottom: 1px solid var(--border-color);
+        }
+
+        /* Responsive Adjustments */
         @media (max-width: 768px) {
-            .main-header {
-                display: none;
-            }
-
-            #mobile-header {
-                display: flex;
-            }
-
-            .stores-container {
-                padding: 20px;
-                margin-top: 20px;
-            }
-
             .form-row {
                 flex-direction: column;
@@ -525,32 +286,48 @@
             }
 
+            .form-actions {
+                flex-direction: column;
+                gap: 10px;
+            }
+
+            .action-button {
+                width: 100%;
+                justify-content: center;
+            }
+
+            #map-container {
+                height: 300px;
+            }
+
             .stores-grid {
                 grid-template-columns: 1fr;
             }
-
-            #map-container {
-                height: 300px;
-            }
         }
 
         @media (max-width: 480px) {
+            .stores-wrapper {
+                padding: 10px;
+            }
+
+            .stores-header {
+                padding: 30px 15px;
+            }
+
             .stores-main-title {
-                font-size: 20px;
-                padding: 12px;
-            }
-
-            .back-button a {
-                padding: 8px 15px;
-                font-size: 14px;
-            }
-
-            .action-button {
-                padding: 10px 20px;
-                font-size: 14px;
-            }
-
-            .form-input {
-                font-size: 14px;
-            }
+                font-size: 24px;
+            }
+
+            .back-button {
+                margin: 15px;
+            }
+
+            .store-search-form {
+                padding: 0 15px 15px;
+            }
+        }
+
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
         }
     </style>
@@ -558,97 +335,26 @@
 <body>
 
-<!-- Header -->
-<header class="main-header">
-    <div class="header-top">
-        <div class="logo">
-            <a href="{% url 'home' %}"><img src="{% static 'images/shtedko_official1.png' %}" alt="Штедко лого"/></a>
-        </div>
-        <div class="header-search">
-            <input type="text" placeholder="Пребарај производи...">
-            <button type="submit"><i class="fas fa-search"></i></button>
-        </div>
-        <div class="user-actions">
-            {% if user.is_authenticated %}
-                <form method="post" action="{% url 'logout' %}" class="auth-form">
-                    {% csrf_token %}
-                    <button type="submit" class="auth-btn logout">
-                        <i class="fas fa-sign-out-alt"></i> Одјави се
-                    </button>
-                </form>
-            {% else %}
-                <a href="{% url 'login' %}" class="auth-btn">
-                    <i class="fas fa-user"></i> Најави се
-                </a>
-                <a href="{% url 'register' %}" class="auth-btn">
-                    <i class="fas fa-user-plus"></i> Регистрирај се
-                </a>
-            {% endif %}
-        </div>
-    </div>
-    <nav class="main-nav">
-        <ul>
-            <li><a href="{% url 'home' %}">Дома</a></li>
-            <li><a href="{% url 'product_list' %}">Каталог</a></li>
-            <li><a href="{% url 'stats' %}">Статистика</a></li>
-            <li><a href="{% url 'nearby_stores' %}">Најблиски продавници</a></li>
-        </ul>
-    </nav>
-</header>
-
-<!-- Mobile Menu -->
-<div id="mobile-header">
-    <div id="mobile-logo">
-        <img src="{% static 'images/shtedko_official1.png' %}" alt="Штедко лого">
-    </div>
-    <div class="menu-toggle" onclick="toggleMobileMenu()">☰</div>
-</div>
-
-<!-- Mobile Menu -->
-<div id="mobile-menu" class="mobile-menu">
-    <div class="mobile-menu-header">
-        <span class="close-btn" onclick="toggleMobileMenu()">×</span>
-    </div>
-
-    <form method="GET" action="{% url 'product_list' %}" class="mobile-search-form">
-        <input type="text" name="search" placeholder="Пребарај производ..." value="{{ request.GET.search }}">
-        <button type="submit"><i class="fas fa-search"></i></button>
-    </form>
-
-    <nav class="mobile-nav">
-        <a href="{% url 'home' %}">Дома</a>
-        <a href="{% url 'product_list' %}">Каталог</a>
-        <a href="{% url 'stats' %}">Статистика</a>
-        <a href="{% url 'nearby_stores' %}">Најблиски продавници</a>
-        <a href="{% url 'view_lists' %}">Листи</a>
-
-        {% if user.is_authenticated %}
-            <a href="{% url 'logout' %}">Одјави се</a>
-        {% else %}
-            <a href="{% url 'login' %}">Најави се</a>
-            <a href="{% url 'register' %}">Регистрирај се</a>
-        {% endif %}
-    </nav>
-</div>
-<div id="overlay" onclick="toggleMobileMenu()"></div>
-
-<!-- Nearby Stores Content -->
 <div class="stores-wrapper">
     <div class="stores-container">
+        <!-- Header Section -->
+        <div class="stores-header">
+            <h1 class="stores-main-title">Најблиски продавници</h1>
+        </div>
+
         <div class="back-button">
-            <a href="javascript:history.back()" class="action-button secondary-button">
-                <i class="fas fa-arrow-left"></i> Назад
+            <a href="{% url 'home' %}">
+                <i class="fas fa-arrow-left"></i> Назад кон почетна
             </a>
         </div>
 
-        <h1 class="stores-main-title">Најблиски продавници</h1>
-
+        <!-- Search Form -->
         <form method="get" action="{% url 'nearby_stores' %}" class="store-search-form">
             <div class="form-row">
                 <div class="form-group">
-                    <label for="latitude">Latitude:</label>
+                    <label for="latitude"><i class="fas fa-map-marker-alt"></i> Latitude:</label>
                     <input type="text" id="latitude" name="latitude" required class="form-input">
                 </div>
                 <div class="form-group">
-                    <label for="longitude">Longitude:</label>
+                    <label for="longitude"><i class="fas fa-map-marker-alt"></i> Longitude:</label>
                     <input type="text" id="longitude" name="longitude" required class="form-input">
                 </div>
@@ -657,10 +363,10 @@
             <div class="form-row">
                 <div class="form-group">
-                    <label for="fuel_consumption">Потрошувачка на гориво (L/100km):</label>
+                    <label for="fuel_consumption"><i class="fas fa-gas-pump"></i> Потрошувачка на гориво (L/100km):</label>
                     <input type="number" step="0.1" id="fuel_consumption" name="fuel_consumption" required
                            class="form-input">
                 </div>
                 <div class="form-group">
-                    <label for="store_chain">Продавничка мрежа:</label>
+                    <label for="store_chain"><i class="fas fa-store"></i> Продавничка мрежа:</label>
                     <select name="store_chain" id="store_chain" required class="form-input">
                         <option value="Reptil">Reptil</option>
@@ -676,5 +382,5 @@
                 </button>
                 <button type="submit" class="action-button primary-button">
-                    <i class="fas fa-search"></i> Пронајди
+                    <i class="fas fa-search"></i> Пронајди продавници
                 </button>
             </div>
@@ -682,6 +388,5 @@
 
         {% if nearest_stores %}
-            <h2 style="color: #2e652e; font-size: 20px; margin-top: 30px; margin-bottom: 15px;">Најблиски
-                продавници</h2>
+            <h2 class="section-title"><i class="fas fa-store"></i> Најблиски продавници</h2>
             <div class="stores-grid">
                 {% for store in nearest_stores|slice:":5" %}
@@ -691,6 +396,5 @@
                             <span class="meta-item"><i class="fas fa-route"></i> Растојание: {{ store.distance_km }} km</span>
                             <span class="meta-item"><i class="fas fa-clock"></i> Време: {{ store.duration }}</span>
-                            <span class="meta-item"><i
-                                    class="fas fa-gas-pump"></i> Гориво: {{ store.gas_used }} L</span>
+                            <span class="meta-item"><i class="fas fa-gas-pump"></i> Гориво: {{ store.gas_used }} L</span>
                         </div>
                     </div>
@@ -698,16 +402,4 @@
             </div>
 
-            {% if nearest_stores %}
-                <div style="display: none;">
-                    <h3>Debug Store Data:</h3>
-                    {% for store in nearest_stores %}
-                        <p>
-                            {{ store.store }} -
-                            Lat: {{ store.latitude }},
-                            Lng: {{ store.longitude }}
-                        </p>
-                    {% endfor %}
-                </div>
-            {% endif %}
             <!-- Map Container -->
             <div id="map-container">
@@ -715,20 +407,20 @@
             </div>
 
-            <!-- Add a button to center map on user location -->
-            <div class="form-actions" style="margin-top: 15px;">
-                <button onclick="centerMapOnUser()" class="action-button secondary-button">
-                    <i class="fas fa-location-arrow"></i> Центрирај на мојата локација
-                </button>
-            </div>
+{#            <!-- Center Map Button -->#}
+{#            <div class="form-actions" style="margin-top: 15px;">#}
+{#                <button onclick="centerMapOnUser()" class="action-button secondary-button">#}
+{#                    <i class="fas fa-location-arrow"></i> Центрирај на мојата локација#}
+{#                </button>#}
+{#            </div>#}
         {% else %}
             <div class="no-stores">
                 <i class="fas fa-exclamation-circle"></i>
                 <p>Нема пронајдени продавници.</p>
+                <p>Внесете ги вашите координати за да ги видите најблиските продавници.</p>
             </div>
         {% endif %}
 
         {% if least_gas_stores %}
-            <h2 style="color: #2e652e; font-size: 20px; margin-top: 30px; margin-bottom: 15px;">Продавници со најмало
-                користење на гориво</h2>
+            <h2 class="section-title"><i class="fas fa-gas-pump"></i> Продавници со најмало користење на гориво</h2>
             <div class="stores-grid">
                 {% for store in least_gas_stores|slice:":5" %}
@@ -738,6 +430,5 @@
                             <span class="meta-item"><i class="fas fa-route"></i> Растојание: {{ store.distance_km }} km</span>
                             <span class="meta-item"><i class="fas fa-clock"></i> Време: {{ store.duration }}</span>
-                            <span class="meta-item"><i
-                                    class="fas fa-gas-pump"></i> Гориво: {{ store.gas_used }} L</span>
+                            <span class="meta-item"><i class="fas fa-gas-pump"></i> Гориво: {{ store.gas_used }} L</span>
                         </div>
                     </div>
@@ -756,8 +447,12 @@
         if (navigator.geolocation) {
             navigator.geolocation.getCurrentPosition(function (position) {
-                document.getElementById("latitude").value = position.coords.latitude;
-                document.getElementById("longitude").value = position.coords.longitude;
+                document.getElementById("latitude").value = position.coords.latitude.toFixed(6);
+                document.getElementById("longitude").value = position.coords.longitude.toFixed(6);
+
+                if (typeof map !== 'undefined') {
+                    updateMap(position.coords.latitude, position.coords.longitude);
+                }
             }, function (error) {
-                alert("Грешка при геолокација: " + error.message);
+                {#alert("Грешка при геолокација: " + error.message);#}
             });
         } else {
@@ -766,12 +461,4 @@
     }
 
-    function toggleMobileMenu() {
-        const menu = document.getElementById("mobile-menu");
-        const overlay = document.getElementById("overlay");
-        menu.classList.toggle("open");
-        overlay.classList.toggle("active");
-    }
-
-    // Map variables
     let map;
     let userMarker;
@@ -779,11 +466,7 @@
     let routeLines = [];
 
-    // Initialize map when DOM is loaded
     document.addEventListener('DOMContentLoaded', function () {
-        // Check if nearest_stores exists and initialize map
         {% if nearest_stores %}
             initMap();
-        {% else %}
-            console.log("No nearest_stores data available to initialize map.");
         {% endif %}
     });
@@ -791,9 +474,7 @@
     function initMap() {
         try {
-            // Get coordinates from form or use first store as center if form is empty
             const userLat = parseFloat(document.getElementById('latitude').value) || {{ nearest_stores.0.latitude|default:41.9981 }};
             const userLng = parseFloat(document.getElementById('longitude').value) || {{ nearest_stores.0.longitude|default:21.4254 }};
 
-            // Create map
             map = L.map('map', {
                 center: [userLat, userLng],
@@ -801,5 +482,4 @@
             });
 
-            // Add tile layer
             L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                 attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
@@ -807,5 +487,4 @@
             }).addTo(map);
 
-            // Add user marker
             userMarker = L.marker([userLat, userLng], {
                 icon: L.icon({
@@ -818,5 +497,4 @@
             userMarker.bindPopup("<b>Вашата локација</b>").openPopup();
 
-            // Clear previous markers and lines
             storeMarkers.forEach(marker => map.removeLayer(marker));
             routeLines.forEach(line => map.removeLayer(line));
@@ -824,5 +502,4 @@
             routeLines = [];
 
-            // Add store markers
             const stores = [
                 {% for store in nearest_stores %}
@@ -835,7 +512,4 @@
                         gasUsed: {{ store.gas_used }}
                     },
-                {% empty %}
-                    // Fallback coordinates if no stores (e.g., Skopje center)
-                    { name: "No stores", latitude: 41.9981, longitude: 21.4254, distance: 0, duration: "N/A", gasUsed: 0 },
                 {% endfor %}
             ];
@@ -858,5 +532,4 @@
                 storeMarkers.push(storeMarker);
 
-                // Add route line
                 const line = L.polyline(
                     [[userLat, userLng], [store.latitude, store.longitude]],
@@ -873,4 +546,21 @@
     }
 
+    function updateMap(lat, lng) {
+        if (!map) return;
+
+        userMarker.setLatLng([lat, lng]);
+        userMarker.bindPopup("<b>Вашата локација</b>").openPopup();
+
+        routeLines.forEach((line, index) => {
+            const storeMarker = storeMarkers[index];
+            if (storeMarker) {
+                const storeLatLng = storeMarker.getLatLng();
+                line.setLatLngs([[lat, lng], [storeLatLng.lat, storeLatLng.lng]]);
+            }
+        });
+
+        map.setView([lat, lng], 13);
+    }
+
     function centerMapOnUser() {
         if (navigator.geolocation) {
@@ -879,22 +569,9 @@
                 const userLng = position.coords.longitude;
 
-                // Update form fields
-                document.getElementById('latitude').value = userLat;
-                document.getElementById('longitude').value = userLng;
-
-                // Update map view and markers
+                document.getElementById('latitude').value = userLat.toFixed(6);
+                document.getElementById('longitude').value = userLng.toFixed(6);
+
                 if (map) {
-                    userMarker.setLatLng([userLat, userLng]);
-                    userMarker.bindPopup("<b>Вашата локација</b>").openPopup();
-
-                    routeLines.forEach((line, index) => {
-                        const storeMarker = storeMarkers[index];
-                        if (storeMarker) {
-                            const storeLatLng = storeMarker.getLatLng();
-                            line.setLatLngs([[userLat, userLng], [storeLatLng.lat, storeLatLng.lng]]);
-                        }
-                    });
-
-                    map.setView([userLat, userLng], 13);
+                    updateMap(userLat, userLng);
                 } else {
                     initMap();
@@ -908,11 +585,11 @@
     }
 
-    // Reinitialize map on form submission if needed
     document.querySelector('.store-search-form').addEventListener('submit', function () {
         if (map) {
-            setTimeout(initMap, 100); // Slight delay to ensure form data is processed
+            setTimeout(initMap, 100);
         }
     });
 </script>
 </body>
+{% endblock %}
 </html>
Index: main/templates/main/product_detail.html
===================================================================
--- main/templates/main/product_detail.html	(revision cd9f2f4e4afae458d5578788c887892d76ca8947)
+++ main/templates/main/product_detail.html	(revision f84285e7b16852eab969772ebde9afe1b04fc8ae)
@@ -1,1141 +1,805 @@
+{% extends 'main/header.html' %}
 {% load category_filters %}
 {% load static %}
 {% load custom_filters %}
-
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>{{ product.name }}</title>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
-    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <style>
-        /* General reset and base styling */
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-
-        html, body {
-            height: 100%;
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            background-color: #f5f5f5;
-            position: relative;
-            overflow-x: hidden;
-        }
-
-        /* Main container */
-        .main-container {
-            display: grid;
-            grid-template-columns: 250px 1fr 350px;
-            gap: 20px;
-            max-width: 1400px;
-            margin: 20px auto;
-            padding: 0 20px;
-        }
-
-        /* Left column - Product image and actions */
-        .left-column {
-            background: white;
-            border-radius: 8px;
-            padding: 20px;
-            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-            height: fit-content;
-        }
-
-        .product-image-container {
-            text-align: center;
-            margin-bottom: 20px;
-        }
-
-        .product-image-container img {
-            max-width: 100%;
-            max-height: 250px;
-            object-fit: contain;
-        }
-
-        .product-actions {
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-        }
-
-        .view-product-btn, .add-to-list-btn {
-            padding: 10px;
-            border-radius: 4px;
-            font-weight: 600;
-            text-align: center;
-            text-decoration: none;
-            transition: all 0.3s;
-        }
-
-        .view-product-btn {
-            background: #3498db;
-            color: white;
-        }
-
-        .view-product-btn:hover {
-            background: #2980b9;
-        }
-
-        .add-to-list-btn {
-            background: #2ecc71;
-            color: white;
-            border: none;
-            cursor: pointer;
-        }
-
-        .add-to-list-btn:hover {
-            background: #27ae60;
-        }
-
-        /* Middle column - Product info and similar products */
-        .middle-column {
-            background: white;
-            border-radius: 8px;
-            padding: 20px;
-            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-        }
-
-        .product-info {
-            margin-bottom: 30px;
-        }
-
-        .product-info h2 {
-            font-size: 20px;
-            margin-bottom: 15px;
-            color: #333;
-        }
-
-        .info-item {
-            margin-bottom: 10px;
-        }
-
-        .info-label {
-            font-weight: 600;
-            color: #555;
-        }
-
-        .info-value {
-            color: #333;
-        }
-
-        .similar-products {
-            margin-top: 30px;
-        }
-
-        .similar-products h3 {
-            font-size: 18px;
-            margin-bottom: 15px;
-            color: #333;
-            border-bottom: 1px solid #eee;
-            padding-bottom: 10px;
-        }
-
-        .similar-product-card {
-            display: flex;
-            align-items: center;
-            padding: 15px;
-            border: 1px solid #eee;
-            border-radius: 6px;
-            margin-bottom: 15px;
-            transition: all 0.3s;
-        }
-
-        .similar-product-card:hover {
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-        }
-
-        .similar-product-card.cheaper {
-            border: 2px solid #e74c3c;
-            background-color: #fdecea;
-            animation: pulse 2s infinite;
-        }
-
-        @keyframes pulse {
-            0% {
-                box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.4);
-            }
-            70% {
-                box-shadow: 0 0 0 10px rgba(231, 76, 60, 0);
-            }
-            100% {
-                box-shadow: 0 0 0 0 rgba(231, 76, 60, 0);
-            }
-        }
-
-        .similar-product-image {
-            flex: 0 0 80px;
-            margin-right: 15px;
-        }
-
-        .similar-product-image img {
-            max-width: 80px;
-            max-height: 80px;
-            object-fit: contain;
-        }
-
-        .similar-product-info {
-            flex: 1;
-        }
-
-        .similar-product-name {
-            font-weight: 600;
-            margin-bottom: 5px;
-        }
-
-        .similar-product-price {
-            font-weight: bold;
-        }
-
-        .similar-product-price.cheaper {
-            color: #e74c3c;
-        }
-
-        .similar-product-store {
-            font-size: 13px;
-            color: #666;
-            margin-top: 5px;
-        }
-
-        .similar-product-actions {
-            flex: 0 0 100px;
-            text-align: right;
-        }
-
-        .view-similar-btn {
-            padding: 6px 12px;
-            background: #3498db;
-            color: white;
-            border-radius: 4px;
-            text-decoration: none;
-            font-size: 13px;
-            transition: all 0.3s;
-        }
-
-        .view-similar-btn:hover {
-            background: #2980b9;
-        }
-
-        /* Right column - Price chart */
-        .right-column {
-            background: white;
-            border-radius: 8px;
-            padding: 20px;
-            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-            height: fit-content;
-        }
-
-        .price-chart-container h3 {
-            font-size: 18px;
-            margin-bottom: 15px;
-            color: #333;
-            border-bottom: 1px solid #eee;
-            padding-bottom: 10px;
-        }
-
-        .chart-container {
-            position: relative;
-            height: 300px;
-            width: 100%;
-        }
-
-        .no-data-message {
-            text-align: center;
-            padding: 20px;
-            color: #666;
-            font-style: italic;
-        }
-
-        /* Navbar styles (keep your existing navbar styles) */
-        /* ===== DESKTOP NAVBAR ===== */
-        .main-header {
-            background-color: white;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-            position: sticky;
-            top: 0;
-            z-index: 1000;
-        }
-
-        .header-top {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 10px 20px;
-            border-bottom: 1px solid #e5e5e5;
-        }
-
-        .logo img {
-            height: 60px;
-        }
-
-        .header-search {
-            flex-grow: 1;
-            margin: 0 20px;
-            position: relative;
-        }
-
-        .header-search input {
-            width: 100%;
-            padding: 12px 20px;
-            border: 1px solid #ddd;
-            border-radius: 30px;
-            font-size: 16px;
-            background-color: #f5f5f5;
-        }
-
-        .header-search button {
-            position: absolute;
-            right: 15px;
-            top: 50%;
-            transform: translateY(-50%);
-            background: none;
-            border: none;
-            color: #666;
-            cursor: pointer;
-            font-size: 18px;
-        }
-
-        .user-actions {
-            display: flex;
-            align-items: center;
-            gap: 15px;
-        }
-
-        .user-actions a {
-            color: #333;
-            text-decoration: none;
-            font-size: 14px;
-            display: flex;
-            align-items: center;
-            gap: 5px;
-        }
-
-        .user-actions a:hover {
-            color: #2e652e;
-        }
-
-        .logout-btn {
-            background-color: #2e652e;
-            color: white;
-            border: none;
-            padding: 8px 16px;
-            border-radius: 20px;
-            font-weight: 600;
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            gap: 5px;
-        }
-
-        .logout-btn:hover {
-            background-color: #1f3f1f;
-        }
-
-        /* Navigation */
-        .main-nav {
-            padding: 15px 30px;
-            background-color: #2e652e;
-        }
-
-        .main-nav ul {
-            display: flex;
-            list-style: none;
-            margin: 0;
-            padding: 0;
-        }
-
-        .main-nav li {
-            margin-right: 20px;
-        }
-
-        .main-nav a {
-            color: white;
-            text-decoration: none;
-            font-weight: 600;
-            padding: 5px 0;
-            position: relative;
-        }
-
-        .main-nav a:hover {
-            color: #fdd835;
-        }
-
-        .main-nav a::after {
-            content: '';
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            width: 0;
-            height: 2px;
-            background-color: #fdd835;
-            transition: width 0.3s ease;
-        }
-
-        .main-nav a:hover::after {
-            width: 100%;
-        }
-
-        /* ===== MOBILE HEADER ===== */
-        #mobile-header {
-            display: none;
-            justify-content: space-between;
-            align-items: center;
-            padding: 15px 20px;
-            background: linear-gradient(135deg, #2e652e, #1f3f1f);
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-            z-index: 1001;
-            position: relative;
-        }
-
-        #mobile-logo img {
-            height: 40px;
-        }
-
-        .menu-toggle {
-            font-size: 28px;
-            color: white;
-            cursor: pointer;
-            transition: transform 0.3s ease;
-        }
-
-        .menu-toggle:hover {
-            transform: scale(1.1);
-        }
-
-        /* ===== MOBILE SLIDE MENU ===== */
-        .mobile-menu {
-            position: fixed;
-            top: 0;
-            right: -100%;
-            width: 75%;
-            height: 100vh;
-            background: linear-gradient(135deg, #f0f7f0, #e0e8e0);
-            box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3);
-            transition: right 0.3s ease;
-            padding: 20px;
-            z-index: 1002;
-            display: flex;
-            flex-direction: column;
-        }
-
-        .mobile-menu.open {
-            right: 0;
-        }
-
-        .mobile-menu-header {
-            display: flex;
-            justify-content: flex-end;
-            margin-bottom: 20px;
-        }
-
-        .close-btn {
-            cursor: pointer;
-            font-size: 28px;
-            color: #2e652e;
-            transition: color 0.3s ease;
-        }
-
-        .close-btn:hover {
-            color: #1f3f1f;
-        }
-
-        .mobile-search-form {
-            display: flex;
-            align-items: center;
-            padding: 12px 16px;
-            gap: 10px;
-            background: white;
-            border-radius: 25px;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-            margin-bottom: 20px;
-        }
-
-        .mobile-search-form input {
-            flex: 1;
-            padding: 10px 15px;
-            border: none;
-            border-radius: 20px;
-            font-size: 14px;
-            outline: none;
-            background: #f5f5f5;
-        }
-
-        .mobile-search-form button {
-            background-color: #2e652e;
-            color: white;
-            border: none;
-            padding: 10px 15px;
-            border-radius: 50%;
-            font-size: 16px;
-            cursor: pointer;
-            transition: background-color 0.3s ease, transform 0.3s ease;
-        }
-
-        .mobile-search-form button:hover {
-            background-color: #1f3f1f;
-            transform: scale(1.1);
-        }
-
-        .mobile-menu nav a,
-        .mobile-menu nav button {
-            display: block;
-            margin: 15px 0;
-            font-size: 18px;
-            text-decoration: none;
-            color: #2e652e;
-            background: none;
-            border: none;
-            text-align: left;
-        }
-
-        .mobile-menu nav a:hover {
-            background-color: #2e652e;
-            color: white;
-            transform: translateX(5px);
-        }
-
-        /* ===== OVERLAY FOR MOBILE ===== */
-        #overlay {
-            display: none;
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100vw;
-            height: 100vh;
-            background: rgba(0, 0, 0, 0.5);
-            z-index: 1000;
-        }
-
-        #overlay.active {
-            display: block;
-        }
-
-        /* ===== RESPONSIVENESS ===== */
-        @media (max-width: 1024px) {
+{% block content %}
+
+    <!DOCTYPE html>
+    <html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <title>{{ product.name }}</title>
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
+        <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <style>
+            /* General reset and base styling */
+            * {
+                margin: 0;
+                padding: 0;
+                box-sizing: border-box;
+            }
+
+            html, body {
+                height: 100%;
+                font-family: Arial, sans-serif;
+                background-color: #f5f5f5;
+                position: relative;
+                overflow-x: hidden;
+            }
+
+            /* Main container */
             .main-container {
-                grid-template-columns: 1fr;
+                display: grid;
+                grid-template-columns: 250px 1fr 350px;
+                gap: 20px;
+                max-width: 1400px;
+                margin: 20px auto;
+                padding: 0 20px;
+            }
+
+            /* Left column - Product image and actions */
+            .left-column {
+                background: white;
+                border-radius: 8px;
+                padding: 20px;
+                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+                height: fit-content;
+            }
+
+            .product-image-container {
+                text-align: center;
+                margin-bottom: 20px;
+            }
+
+            .product-image-container img {
+                max-width: 100%;
+                max-height: 250px;
+                object-fit: contain;
+            }
+
+            .product-actions {
+                display: flex;
+                flex-direction: column;
+                gap: 10px;
+            }
+
+            .view-product-btn, .add-to-list-btn {
+                padding: 10px;
+                border-radius: 4px;
+                font-weight: 600;
+                text-align: center;
+                text-decoration: none;
+                transition: all 0.3s;
+            }
+
+            .view-product-btn {
+                background: #3498db;
+                color: white;
+            }
+
+            .view-product-btn:hover {
+                background: #2980b9;
+            }
+
+            .add-to-list-btn {
+                background: #2ecc71;
+                color: white;
+                border: none;
+                cursor: pointer;
+            }
+
+            .add-to-list-btn:hover {
+                background: #27ae60;
+            }
+
+            /* Middle column - Product info and similar products */
+            .middle-column {
+                background: white;
+                border-radius: 8px;
+                padding: 20px;
+                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+            }
+
+            .product-info {
+                margin-bottom: 30px;
+            }
+
+            .product-info h2 {
+                font-size: 20px;
+                margin-bottom: 15px;
+                color: #333;
+            }
+
+            .info-item {
+                margin-bottom: 10px;
+            }
+
+            .info-label {
+                font-weight: 600;
+                color: #555;
+            }
+
+            .info-value {
+                color: #333;
+            }
+
+            .similar-products {
+                margin-top: 30px;
+            }
+
+            .similar-products h3 {
+                font-size: 18px;
+                margin-bottom: 15px;
+                color: #333;
+                border-bottom: 1px solid #eee;
+                padding-bottom: 10px;
+            }
+
+            .similar-product-card {
+                display: flex;
+                align-items: center;
                 padding: 15px;
-            }
-
-            .left-column, .middle-column, .right-column {
+                border: 1px solid #eee;
+                border-radius: 6px;
+                margin-bottom: 15px;
+                transition: all 0.3s;
+            }
+
+            .similar-product-card:hover {
+                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+            }
+
+            .similar-product-card.cheaper {
+                border: 2px solid #e74c3c;
+                background-color: #fdecea;
+                animation: pulse 2s infinite;
+            }
+
+            @keyframes pulse {
+                0% {
+                    box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.4);
+                }
+                70% {
+                    box-shadow: 0 0 0 10px rgba(231, 76, 60, 0);
+                }
+                100% {
+                    box-shadow: 0 0 0 0 rgba(231, 76, 60, 0);
+                }
+            }
+
+            .similar-product-image {
+                flex: 0 0 80px;
+                margin-right: 15px;
+            }
+
+            .similar-product-image img {
+                max-width: 80px;
+                max-height: 80px;
+                object-fit: contain;
+            }
+
+            .similar-product-info {
+                flex: 1;
+            }
+
+            .similar-product-name {
+                font-weight: 600;
+                margin-bottom: 5px;
+            }
+
+            .similar-product-price {
+                font-weight: bold;
+            }
+
+            .similar-product-price.cheaper {
+                color: #e74c3c;
+            }
+
+            .similar-product-store {
+                font-size: 13px;
+                color: #666;
+                margin-top: 5px;
+            }
+
+            .similar-product-actions {
+                flex: 0 0 100px;
+                text-align: right;
+            }
+
+            .view-similar-btn {
+                padding: 6px 12px;
+                background: #3498db;
+                color: white;
+                border-radius: 4px;
+                text-decoration: none;
+                font-size: 13px;
+                transition: all 0.3s;
+            }
+
+            .view-similar-btn:hover {
+                background: #2980b9;
+            }
+
+            /* Right column - Price chart */
+            .right-column {
+                background: white;
+                border-radius: 8px;
+                padding: 20px;
+                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+                height: fit-content;
+            }
+
+            .price-chart-container h3 {
+                font-size: 18px;
+                margin-bottom: 15px;
+                color: #333;
+                border-bottom: 1px solid #eee;
+                padding-bottom: 10px;
+            }
+
+            .chart-container {
+                position: relative;
+                height: 300px;
                 width: 100%;
             }
-        }
-
-        @media (max-width: 768px) {
-            .main-header {
+
+            .no-data-message {
+                text-align: center;
+                padding: 20px;
+                color: #666;
+                font-style: italic;
+            }
+
+            /* Lists dropdown styles */
+            .lists-dropdown {
+                position: relative;
+                display: inline-block;
+            }
+
+            .lists-toggle {
+                background: none;
+                border: none;
+                cursor: pointer;
+                font-weight: 600;
+                font-size: 1rem;
+                color: black;
+                padding: 5px 10px;
+                border-radius: 5px;
+            }
+
+            .lists-toggle:hover {
+                background-color: #f0f0f0;
+            }
+
+            .dropdown-content {
                 display: none;
-            }
-
-            #mobile-header {
+                position: absolute;
+                background-color: white;
+                min-width: 160px;
+                box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+                z-index: 1;
+                border-radius: 5px;
+            }
+
+            .dropdown-content a {
+                color: black;
+                padding: 12px 16px;
+                text-decoration: none;
+                display: block;
+            }
+
+            .dropdown-content a:hover {
+                background-color: #f1f1f1;
+            }
+
+            .show {
+                display: block;
+            }
+
+            .lists-toggle:hover .selected-list-badge {
+                background: #1f3f1f;
+                transform: scale(1.05);
+            }
+
+            /* Modal styles */
+            .modal {
+                position: fixed;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                background-color: rgba(0, 0, 0, 0.6);
                 display: flex;
-            }
-        }
-
-        /* Lists dropdown styles */
-        .lists-dropdown {
-            position: relative;
-            display: inline-block;
-        }
-
-        .lists-toggle {
-            background: none;
-            border: none;
-            cursor: pointer;
-            font-weight: 600;
-            font-size: 1rem;
-            color: black;
-            padding: 5px 10px;
-            border-radius: 5px;
-        }
-
-        .lists-toggle:hover {
-            background-color: #f0f0f0;
-        }
-
-        .dropdown-content {
-            display: none;
-            position: absolute;
-            background-color: white;
-            min-width: 160px;
-            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
-            z-index: 1;
-            border-radius: 5px;
-        }
-
-        .dropdown-content a {
-            color: black;
-            padding: 12px 16px;
-            text-decoration: none;
-            display: block;
-        }
-
-        .dropdown-content a:hover {
-            background-color: #f1f1f1;
-        }
-
-        .show {
-            display: block;
-        }
-
-        /* Mobile lists dropdown styles */
-        .lists-dropdown-mobile {
-            position: relative;
-            display: inline-block;
-        }
-
-        .lists-toggle-mobile {
-            background: none;
-            border: none;
-            cursor: pointer;
-            font-size: 20px;
-            color: white;
-            padding: 5px;
-        }
-
-        .dropdown-content-mobile {
-            display: none;
-            position: absolute;
-            right: 0;
-            background-color: white;
-            min-width: 160px;
-            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
-            z-index: 1003;
-            border-radius: 5px;
-            max-height: 300px;
-            overflow-y: auto;
-        }
-
-        .dropdown-content-mobile a {
-            color: black;
-            padding: 12px 16px;
-            text-decoration: none;
-            display: block;
-        }
-
-        .dropdown-content-mobile a:hover {
-            background-color: #f1f1f1;
-        }
-
-        .dropdown-content-mobile.show {
-            display: block;
-        }
-
-        .selected-list-badge {
-            font-size: 12px;
-            background: #2e652e;
-            color: white;
-            padding: 4px 8px;
-            border-radius: 12px;
-            margin-left: 8px;
-            display: inline-flex;
-            align-items: center;
-            line-height: 1;
-            transition: all 0.2s;
-        }
-
-        .lists-toggle:hover .selected-list-badge {
-            background: #1f3f1f;
-            transform: scale(1.05);
-        }
-
-        /* Modal styles */
-        .modal {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background-color: rgba(0, 0, 0, 0.6);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            z-index: 999;
-        }
-
-        .modal-content {
-            background: white;
-            padding: 20px 30px;
-            border-radius: 10px;
-            text-align: center;
-            max-width: 400px;
-            width: 90%;
-            position: relative;
-            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
-        }
-
-        .modal-content h3 {
-        {#margin-bottom: 15px;#} padding: 10px;
-        }
-
-        .modal-content button {
-            background-color: #28a745;
-            color: white;
-            padding: 8px 16px;
-            margin: 6px;
-            border: none;
-            border-radius: 6px;
-            cursor: pointer;
-            font-size: 14px;
-        }
-
-        .modal-content button:hover {
-            background-color: #218838;
-        }
-
-        .close-modal {
-            position: absolute;
-            top: 10px;
-            right: 15px;
-            font-size: 22px;
-            cursor: pointer;
-        }
-
-        a {
-            text-decoration: none;
-            color: black;
-        }
-
-        /* Price history section */
-        .section-header {
-            display: flex;
-            align-items: center;
-            gap: 10px;
-            margin-bottom: 15px;
-        }
-
-        .section-header h3 {
-            margin: 0;
-            font-size: 18px;
-            color: #333;
-        }
-
-        .section-header i {
-            color: #2e652e;
-            font-size: 20px;
-        }
-
-        .chart-summary {
-            display: grid;
-            grid-template-columns: repeat(3, 1fr);
-            gap: 10px;
-            margin-top: 15px;
-            background: #f8f9fa;
-            padding: 12px;
-            border-radius: 8px;
-        }
-
-        .summary-item {
-            text-align: center;
-        }
-
-        .summary-label {
-            display: block;
-            font-size: 12px;
-            color: #666;
-            margin-bottom: 5px;
-        }
-
-        .summary-value {
-            font-weight: 600;
-            color: #2e652e;
-        }
-
-        /* Date range selector */
-        .date-range-form {
-            margin-top: 15px;
-        }
-
-        .form-row {
-            display: flex;
-            gap: 10px;
-            margin-bottom: 10px;
-        }
-
-        .form-group {
-            flex: 1;
-        }
-
-        .form-group label {
-            display: block;
-            margin-bottom: 5px;
-            font-size: 13px;
-            color: #555;
-        }
-
-        .form-group label i {
-            margin-right: 5px;
-        }
-
-        .form-input {
-            width: 100%;
-            padding: 8px 12px;
-            border: 1px solid #ddd;
-            border-radius: 6px;
-            font-size: 14px;
-        }
-
-        .update-chart-btn {
-            width: 100%;
-            padding: 10px;
-            background-color: #2e652e;
-            color: white;
-            border: none;
-            border-radius: 6px;
-            font-weight: 500;
-            cursor: pointer;
-            transition: background-color 0.3s;
-        }
-
-        .update-chart-btn:hover {
-            background-color: #1f3f1f;
-        }
-
-        .update-chart-btn i {
-            margin-right: 8px;
-        }
-
-        /* Promo banner */
-        .promo-banner {
-            margin-top: 20px;
-            position: relative;
-            border-radius: 8px;
-            overflow: hidden;
-            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-        }
-
-        .promo-banner img {
-            width: 100%;
-            height: auto;
-            display: block;
-        }
-
-        .banner-overlay {
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: rgba(0, 0, 0, 0.6);
-            color: white;
-            padding: 15px;
-        }
-
-        .banner-overlay h4 {
-            margin: 0 0 5px 0;
-            font-size: 16px;
-        }
-
-        .banner-overlay p {
-            margin: 0;
-            font-size: 13px;
-            opacity: 0.9;
-        }
-
-        /* Chart tooltip styling */
-        .chartjs-tooltip {
-            background: rgba(0, 0, 0, 0.7);
-            border-radius: 4px;
-            color: white;
-            padding: 8px 12px;
-            font-size: 14px;
-        }
-
-        /* Message container for alerts */
-        .message-container {
-            position: fixed;
-            top: 20px;
-            right: 20px;
-            z-index: 1000;
-            max-width: 400px;
-        }
-
-        .alert {
-            padding: 15px;
-            margin-bottom: 10px;
-            border-radius: 4px;
-            position: relative;
-            background-color: #f8f9fa;
-            border-left: 4px solid #6c757d;
-        }
-
-        .alert-close-btn {
-            position: absolute;
-            right: 15px;
-            top: 50%;
-            transform: translateY(-50%);
-            cursor: pointer;
-            font-size: 20px;
-        }
-
-
-        .similar-product-card {
-            padding: 15px;
-            margin-bottom: 15px;
-            border-radius: 8px;
-            transition: all 0.3s ease;
-            background: white;
-            border: 1px solid #e0e0e0;
-        }
-
-        .similar-product-card.cheaper {
-            border: 2px solid #e74c3c;
-            background-color: #fff5f5;
-            box-shadow: 0 4px 12px rgba(231, 76, 60, 0.15);
-            position: relative;
-        }
-
-        .similar-product-card.cheaper::before {
-            content: "ПОНИСКА ЦЕНА";
-            position: absolute;
-            top: -10px;
-            left: 15px;
-            background: #e74c3c;
-            color: white;
-            padding: 3px 8px;
-            border-radius: 4px;
-            font-size: 11px;
-            font-weight: bold;
-        }
-
-        /* Improved similar product image container */
-        .similar-product-image {
-            flex: 0 0 100px;
-            height: 100px;
-            margin-right: 15px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            background: #f9f9f9;
-            border-radius: 6px;
-            overflow: hidden;
-            border: 1px solid #eee;
-        }
-
-        .similar-product-image img {
-            max-width: 100%;
-            max-height: 100%;
-            object-fit: contain;
-            width: auto;
-            height: auto;
-        }
-
-        /* Enhanced price highlighting */
-        .similar-product-price.cheaper {
-            color: #e74c3c;
-            font-weight: bold;
-            font-size: 18px;
-        }
-
-        /* Improved list selection badge */
-        .selected-list-badge {
-            font-size: 12px;
-            background: #2e652e;
-            color: white;
-            padding: 4px 8px;
-            border-radius: 12px;
-            margin-left: 8px;
-            display: inline-flex;
-            align-items: center;
-            line-height: 1;
-            transition: all 0.2s;
-        }
-
-        .lists-toggle:hover .selected-list-badge {
-            background: #1f3f1f;
-            transform: scale(1.05);
-        }
-
-        /* Make sure images in similar products are visible */
-        .similar-product-image img {
-            display: block;
-            width: auto;
-            height: auto;
-            max-width: 100%;
-            max-height: 100%;
-        }
-
-        :root {
-            --fa-style-family-classic: "Font Awesome 6 Free";
-            --fa-font-solid: normal 900 1em / 1 "Font Awesome 6 Free";
-        }
-
-    </style>
-</head>
-<body>
-
-<!-- Message container for alerts -->
-<div class="message-container">
-    {% if messages %}
-        {% for message in messages %}
-            <div class="alert alert-{{ message.tags }}">
-                {{ message }}
-                <span class="alert-close-btn" onclick="this.parentElement.remove()">×</span>
+                align-items: center;
+                justify-content: center;
+                z-index: 999;
+            }
+
+            .modal-content {
+                background: white;
+                padding: 20px 30px;
+                border-radius: 10px;
+                text-align: center;
+                max-width: 400px;
+                width: 90%;
+                position: relative;
+                box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
+            }
+
+            .modal-content h3 {
+                padding: 10px;
+            }
+
+            .modal-content button {
+                background-color: #28a745;
+                color: white;
+                padding: 8px 16px;
+                margin: 6px;
+                border: none;
+                border-radius: 6px;
+                cursor: pointer;
+                font-size: 14px;
+            }
+
+            .modal-content button:hover {
+                background-color: #218838;
+            }
+
+            .close-modal {
+                position: absolute;
+                top: 10px;
+                right: 15px;
+                font-size: 22px;
+                cursor: pointer;
+            }
+
+            a {
+                text-decoration: none;
+                color: black;
+            }
+
+            /* Price history section */
+            .section-header {
+                display: flex;
+                align-items: center;
+                gap: 10px;
+                margin-bottom: 15px;
+            }
+
+            .section-header h3 {
+                margin: 0;
+                font-size: 18px;
+                color: #333;
+            }
+
+            .section-header i {
+                color: #2e652e;
+                font-size: 20px;
+            }
+
+            .chart-summary {
+                display: grid;
+                grid-template-columns: repeat(3, 1fr);
+                gap: 10px;
+                margin-top: 15px;
+                background: #f8f9fa;
+                padding: 12px;
+                border-radius: 8px;
+            }
+
+            .summary-item {
+                text-align: center;
+            }
+
+            .summary-label {
+                display: block;
+                font-size: 12px;
+                color: #666;
+                margin-bottom: 5px;
+            }
+
+            .summary-value {
+                font-weight: 600;
+                color: #2e652e;
+            }
+
+            /* Date range selector */
+            .date-range-form {
+                margin-top: 15px;
+            }
+
+            .form-row {
+                display: flex;
+                gap: 10px;
+                margin-bottom: 10px;
+            }
+
+            .form-group {
+                flex: 1;
+            }
+
+            .form-group label {
+                display: block;
+                margin-bottom: 5px;
+                font-size: 13px;
+                color: #555;
+            }
+
+            .form-group label i {
+                margin-right: 5px;
+            }
+
+            .form-input {
+                width: 100%;
+                padding: 8px 12px;
+                border: 1px solid #ddd;
+                border-radius: 6px;
+                font-size: 14px;
+            }
+
+            .update-chart-btn {
+                width: 100%;
+                padding: 10px;
+                background-color: #2e652e;
+                color: white;
+                border: none;
+                border-radius: 6px;
+                font-weight: 500;
+                cursor: pointer;
+                transition: background-color 0.3s;
+            }
+
+            .update-chart-btn:hover {
+                background-color: #1f3f1f;
+            }
+
+            .update-chart-btn i {
+                margin-right: 8px;
+            }
+
+            /* Promo banner */
+            .promo-banner {
+                margin-top: 20px;
+                position: relative;
+                border-radius: 8px;
+                overflow: hidden;
+                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+            }
+
+            .promo-banner img {
+                width: 100%;
+                height: auto;
+                display: block;
+            }
+
+            .banner-overlay {
+                position: absolute;
+                bottom: 0;
+                left: 0;
+                right: 0;
+                background: rgba(0, 0, 0, 0.6);
+                color: white;
+                padding: 15px;
+            }
+
+            .banner-overlay h4 {
+                margin: 0 0 5px 0;
+                font-size: 16px;
+            }
+
+            .banner-overlay p {
+                margin: 0;
+                font-size: 13px;
+                opacity: 0.9;
+            }
+
+            /* Chart tooltip styling */
+            .chartjs-tooltip {
+                background: rgba(0, 0, 0, 0.7);
+                border-radius: 4px;
+                color: white;
+                padding: 8px 12px;
+                font-size: 14px;
+            }
+
+            /* Message container for alerts */
+            .message-container {
+                position: fixed;
+                top: 20px;
+                right: 20px;
+                z-index: 1000;
+                max-width: 400px;
+            }
+
+            .alert {
+                padding: 15px;
+                margin-bottom: 10px;
+                border-radius: 4px;
+                position: relative;
+                background-color: #f8f9fa;
+                border-left: 4px solid #6c757d;
+            }
+
+            .alert-close-btn {
+                position: absolute;
+                right: 15px;
+                top: 50%;
+                transform: translateY(-50%);
+                cursor: pointer;
+                font-size: 20px;
+            }
+
+            .similar-product-card {
+                padding: 15px;
+                margin-bottom: 15px;
+                border-radius: 8px;
+                transition: all 0.3s ease;
+                background: white;
+                border: 1px solid #e0e0e0;
+            }
+
+            .similar-product-card.cheaper {
+                border: 2px solid #e74c3c;
+                background-color: #fff5f5;
+                box-shadow: 0 4px 12px rgba(231, 76, 60, 0.15);
+                position: relative;
+            }
+
+            .similar-product-card.cheaper::before {
+                content: "ПОНИСКА ЦЕНА";
+                position: absolute;
+                top: -10px;
+                left: 15px;
+                background: #e74c3c;
+                color: white;
+                padding: 3px 8px;
+                border-radius: 4px;
+                font-size: 11px;
+                font-weight: bold;
+            }
+
+            /* Improved similar product image container */
+            .similar-product-image {
+                flex: 0 0 100px;
+                height: 100px;
+                margin-right: 15px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                background: #f9f9f9;
+                border-radius: 6px;
+                overflow: hidden;
+                border: 1px solid #eee;
+            }
+
+            .similar-product-image img {
+                max-width: 100%;
+                max-height: 100%;
+                object-fit: contain;
+                width: auto;
+                height: auto;
+            }
+
+            /* Enhanced price highlighting */
+            .similar-product-price.cheaper {
+                color: #e74c3c;
+                font-weight: bold;
+                font-size: 18px;
+            }
+
+            /* Improved list selection badge */
+            .selected-list-badge {
+                font-size: 12px;
+                background: #2e652e;
+                color: white;
+                padding: 4px 8px;
+                border-radius: 12px;
+                margin-left: 8px;
+                display: inline-flex;
+                align-items: center;
+                line-height: 1;
+                transition: all 0.2s;
+            }
+
+            .lists-toggle:hover .selected-list-badge {
+                background: #1f3f1f;
+                transform: scale(1.05);
+            }
+
+            /* Make sure images in similar products are visible */
+            .similar-product-image img {
+                display: block;
+                width: auto;
+                height: auto;
+                max-width: 100%;
+                max-height: 100%;
+            }
+
+            :root {
+                --fa-style-family-classic: "Font Awesome 6 Free";
+                --fa-font-solid: normal 900 1em / 1 "Font Awesome 6 Free";
+            }
+
+            .mobile-search-form button {
+                margin-left: -7px;
+            }
+
+            /* Prevent horizontal scrolling */
+            body {
+                overflow-x: hidden;
+                width: 100%;
+            }
+
+            .mobile-menu{
+                width: 86%;
+            }
+
+            /* ===== RESPONSIVENESS ===== */
+            @media (max-width: 1200px) {
+                .main-container {
+                    grid-template-columns: 250px 1fr;
+                }
+
+                .right-column {
+                    grid-column: span 2;
+                }
+
+                .chart-container {
+                    height: 400px;
+                }
+            }
+
+            @media (max-width: 992px) {
+                .main-container {
+                    grid-template-columns: 1fr;
+                    padding: 15px;
+                    gap: 15px;
+                }
+
+                .left-column, .middle-column, .right-column {
+                    width: 100%;
+                }
+
+                .right-column {
+                    grid-column: span 1;
+                }
+
+                .product-image-container img {
+                    max-height: 200px;
+                }
+
+                .similar-product-card {
+                    flex-direction: column;
+                    align-items: flex-start;
+                }
+
+                .similar-product-image {
+                    margin-bottom: 10px;
+                    margin-right: 0;
+                }
+
+                .similar-product-actions {
+                    margin-top: 10px;
+                    width: 100%;
+                    text-align: left;
+                }
+
+                .view-similar-btn {
+                    display: block;
+                    width: 100%;
+                    text-align: center;
+                }
+            }
+
+            @media (max-width: 768px) {
+                .promo-banner {
+                    display: none;
+                }
+
+                .chart-summary {
+                    grid-template-columns: 1fr;
+                }
+
+                .form-row {
+                    flex-direction: column;
+                }
+
+                .similar-product-image {
+                    width: 100%;
+                    height: auto;
+                    flex: none;
+                }
+            }
+
+            @media (max-width: 576px) {
+                .main-container {
+                    padding: 10px;
+                }
+
+                .product-info h2 {
+                    font-size: 18px;
+                }
+
+                .similar-products h3 {
+                    font-size: 16px;
+                }
+
+                .similar-product-card {
+                    padding: 10px;
+                }
+
+                .price-chart-container h3 {
+                    font-size: 16px;
+                }
+
+                .chart-container {
+                    height: 300px;
+                }
+            }
+            .header-search input{
+                width: 102%;
+            }
+        </style>
+    </head>
+    <body>
+
+    <!-- Message container for alerts -->
+    <div class="message-container">
+        {% if messages %}
+            {% for message in messages %}
+                <div class="alert alert-{{ message.tags }}">
+                    {{ message }}
+                    <span class="alert-close-btn" onclick="this.parentElement.remove()">×</span>
+                </div>
+            {% endfor %}
+        {% endif %}
+    </div>
+
+    <!-- Main content -->
+    <div class="main-container">
+        <!-- Left column - Add banner below product image -->
+        <div class="left-column">
+            <div class="product-image-container">
+                {% if product.image_url %}
+                    <img src="{{ product.image_url }}" alt="{{ product.name }}">
+                {% else %}
+                    <div class="no-image-placeholder">
+                        <span>Нема слика</span>
+                    </div>
+                {% endif %}
             </div>
-        {% endfor %}
-    {% endif %}
-</div>
-
-<!-- Header -->
-<header class="main-header">
-    <div class="header-top">
-        <div class="logo">
-            <a href="{% url 'home' %}"><img src="{% static 'images/shtedko_official1.png' %}" alt="Штедко лого"/></a>
-        </div>
-
-        <div class="header-search">
-            <form method="GET" action="{% url 'product_list' %}" id="searchForm">
-                <input type="text" name="search" id="searchInput" placeholder="Пребарај производи..."
-                       value="{{ request.GET.search }}">
-                <button type="submit"><i class="fas fa-search"></i></button>
-            </form>
-            <div id="suggestions"
-                 style="position: absolute; background: white; border: 1px solid #ddd; border-radius: 5px; width: 98%; max-height: 200px; overflow-y: auto; display: none; z-index:2;"></div>
-        </div>
-        <div class="user-actions">
-            {% if user.is_authenticated %}
-                <div class="lists-dropdown">
-                    <button class="lists-toggle" onclick="toggleListsDropdown()">
-                        <i class="fas fa-list"></i> Листа
-                        <span id="selected-list-name" class="selected-list-badge">
-                            {% if user_lists %}(Избери листа){% else %}(Нема листи){% endif %}
-                        </span>
-                    </button>
-                    <div id="listsDropdown" class="dropdown-content">
-                        {% for list in user_lists %}
-                            <a href="#" onclick="selectList('{{ list.id }}', '{{ list.name }}')">{{ list.name }}</a>
-                        {% empty %}
-                            <a href="{% url 'create_list' %}">Креирај нова листа</a>
-                        {% endfor %}
-                    </div>
+
+            <div class="product-actions">
+                <a href="{{ product.product_url }}" target="_blank" class="view-product-btn">
+                    <i class="fas fa-external-link-alt"></i> Види производ
+                </a>
+                <button class="add-to-list-btn" onclick="addToList({{ product.id }})">
+                    <i class="fas fa-plus"></i> Додади во листа
+                </button>
+            </div>
+
+            <!-- New promotional banner -->
+            <div class="promo-banner">
+                <img src="{% static 'images/vertical_banner.png' %}" alt="Промоција">
+                <div class="banner-overlay">
+                    <h4>Специјална понуда!</h4>
+                    <p>Дознајте ги нашите најнови промоции</p>
                 </div>
-
-                <form method="post" action="{% url 'logout' %}">
-                    {% csrf_token %}
-                    <button type="submit" class="logout-btn">
-                        <i class="fas fa-sign-out-alt"></i> Одјави се
-                    </button>
-                </form>
-            {% else %}
-                <a href="{% url 'login' %}"
-                   style=" padding: 8px 16px; border-radius: 20px; background-color: #f5f5f5; margin-right: -10px"><b><i
-                        class="fas fa-user"></i> Најави се</b></a>
-                <a href="{% url 'register' %}"
-                   style=" padding: 8px 16px; border-radius: 20px; background-color: #f5f5f5"><b><i
-                        class="fas fa-user-plus"></i> Регистрирај се </b></a>
-            {% endif %}
-        </div>
-    </div>
-
-    <nav class="main-nav">
-        <ul style="font-weight: 600; font-size: 17px">
-            <li><a href="{% url 'product_list' %}">Каталог</a></li>
-            <li><a href="{% url 'stats' %}">Статистика</a></li>
-            {#            <li><a href="#">Попусти</a></li>#}
-            {#            <li><a href="#">Продавници</a></li>#}
-        </ul>
-    </nav>
-</header>
-
-<!-- Mobile Header -->
-<div id="mobile-header">
-    <div id="mobile-logo">
-        <img src="{% static 'images/shtedko_official1.png' %}" alt="Штедко лого" style="height: 40px;">
-    </div>
-    <div style="display: flex; align-items: center; gap: 10px;">
-        <!-- Lists dropdown for mobile -->
-        <div class="lists-dropdown-mobile">
-            <button class="lists-toggle-mobile" onclick="toggleMobileListsDropdown()">
-                <img src="{% static 'images/lists.png' %}" style="width: 20px; margin-top: 7px">
-            </button>
-            <div id="mobileListsDropdown" class="dropdown-content-mobile">
-                {% for list in user_lists %}
-                    <a href="#" onclick="selectList('{{ list.id }}', '{{ list.name }}')">{{ list.name }}</a>
-                {% empty %}
-                    <a href="{% url 'create_list' %}">Креирај нова листа</a>
-                {% endfor %}
             </div>
         </div>
-        <!-- Hamburger menu -->
-        <div class="menu-toggle" onclick="toggleMobileMenu()">☰</div>
-    </div>
-</div>
-
-<!-- Mobile Menu -->
-<div id="mobile-menu" class="mobile-menu">
-    <div class="mobile-menu-header">
-        <span class="close-btn" onclick="toggleMobileMenu()">✕</span>
-    </div>
-   <form method="GET" action="{% url 'product_list' %}" class="mobile-search-form" id="mobileSearchForm">
-        <input type="text" name="search" id="mobileSearchInput" style="padding: 7px" placeholder="Пребарај производ..."
-               value="{{ request.GET.search }}">
-        <button type="submit"><i class="fas fa-search"></i></button>
-    </form>
-    <nav>
-        <a href="{% url 'home' %}">Дома</a>
-        <a href="{% url 'product_list' %}">Каталог</a>
-        <a href="{% url 'stats' %}">Статистика</a>
-        {% if user.is_authenticated %}
-            <form method="post" action="{% url 'logout' %}">
-                {% csrf_token %}
-                <button type="submit" style="color:#2e652e"><b>Одјави се</b></button>
-            </form>
-        {% else %}
-            <a href="{% url 'login' %}" style="color:#2e652e"><b>Најави се</b></a>
-            <a href="{% url 'register' %}" style="color:#2e652e"><b>Регистрирај се</b></a>
-        {% endif %}
-    </nav>
-</div>
-
-<!-- MOBILE DARK OVERLAY -->
-<div id="overlay" onclick="toggleMobileMenu()"></div>
-
-<!-- Main content -->
-<div class="main-container">
-    <!-- Left column - Add banner below product image -->
-    <div class="left-column">
-        <div class="product-image-container">
-            {% if product.image_url %}
-                <img src="{{ product.image_url }}" alt="{{ product.name }}">
-            {% else %}
-                <div class="no-image-placeholder">
-                    <span>Нема слика</span>
+        <!-- Middle column - Product info and similar products -->
+        <div class="middle-column">
+            <div class="product-info">
+                <h2>{{ product.name }}</h2>
+
+                <div class="info-item">
+                    <span class="info-label">Категорија:</span>
+                    <span class="info-value">{{ product.category | translate_category }}</span>
                 </div>
-            {% endif %}
-        </div>
-
-        <div class="product-actions">
-            <a href="{{ product.product_url }}" target="_blank" class="view-product-btn">
-                <i class="fas fa-external-link-alt"></i> Види производ
-            </a>
-            <button class="add-to-list-btn" onclick="addToList({{ product.id }})">
-                <i class="fas fa-plus"></i> Додади во листа
-            </button>
-        </div>
-
-        <!-- New promotional banner -->
-        <div class="promo-banner">
-            <img src="{% static 'images/vertical_banner.png' %}" alt="Промоција">
-            <div class="banner-overlay">
-                <h4>Специјална понуда!</h4>
-                <p>Дознајте ги нашите најнови промоции</p>
-            </div>
-        </div>
-    </div>
-    <!-- Middle column - Product info and similar products -->
-    <div class="middle-column">
-        <div class="product-info">
-            <h2>{{ product.name }}</h2>
-
-            <div class="info-item">
-                <span class="info-label">Категорија:</span>
-                <span class="info-value">{{ product.category | translate_category }}</span>
-            </div>
-
-            <div class="info-item">
-                <span class="info-label">Продавница:</span>
-                <span class="info-value">
+
+                <div class="info-item">
+                    <span class="info-label">Продавница:</span>
+                    <span class="info-value">
                     {% if product.store == "Vero" %}
                         <img src="{% static 'images/vero_logo1.png' %}" alt="Vero"
@@ -1148,462 +812,414 @@
                              style="height: 25px; vertical-align: middle;">
                     {% endif %}
-                    {#                    {{ product.store }}#}
                 </span>
-            </div>
-
-            <div class="info-item">
-                <span class="info-label">Цена:</span>
-                <span class="info-value" style="font-weight: bold; font-size: 18px; color: #2e652e;">
+                </div>
+
+                <div class="info-item">
+                    <span class="info-label">Цена:</span>
+                    <span class="info-value" style="font-weight: bold; font-size: 18px; color: #2e652e;">
                     {{ product.price }} ден
                 </span>
+                </div>
+            </div>
+
+            <div class="similar-products">
+                <h3><i class="fas fa-random"></i> Слични производи</h3>
+
+                {% for similar in similar_products|slice:":5" %}
+                    <div class="similar-product-card {% if similar.price < product.price %}cheaper{% endif %}">
+                        <div class="similar-product-image">
+                            {% if similar.image %}
+                                <img src="{{ similar.image }}" alt="{{ similar.name }}"
+                                     onerror="this.onerror=null;this.src='{% static 'images/no-image.png' %}'">
+                            {% else %}
+                                <img src="{% static 'images/no-image.png' %}" alt="Нема слика">
+                            {% endif %}
+                        </div>
+
+                        <div class="similar-product-info">
+                            <div class="similar-product-name">
+                                <a href="{% url 'product_detail' similar.id %}">{{ similar.name }}</a>
+                            </div>
+                            <div class="similar-product-price {% if similar.price < product.price %}cheaper{% endif %}">
+                                {{ similar.price }} ден
+                                {% if similar.price < product.price %}
+                                    <span style="color: #e74c3c; font-size: 13px;">
+                                    (Заштеда: {{ product.price|subtract:similar.price }} ден)
+                                </span>
+                                {% endif %}
+                            </div>
+                            <div class="similar-product-store">
+                                {% if similar.store == "Vero" %}
+                                    <img src="{% static 'images/vero_logo1.png' %}" alt="Vero"
+                                         style="height: 20px; vertical-align: middle;">
+                                {% elif similar.store == "Reptil" %}
+                                    <img src="{% static 'images/reptil_logo.jpg' %}" alt="Reptil"
+                                         style="height: 20px; vertical-align: middle;">
+                                {% elif similar.store == "Ramstore" %}
+                                    <img src="{% static 'images/ramstore_logo.png' %}" alt="Ramstore"
+                                         style="height: 20px; vertical-align: middle;">
+                                {% endif %}
+                            </div>
+                        </div>
+
+                        <div class="similar-product-actions">
+                            <a href="{% url 'product_detail' similar.id %}" class="view-similar-btn">
+                                <i class="fas fa-info-circle"></i> Детали
+                            </a>
+                        </div>
+                    </div>
+                {% empty %}
+                    <div style="padding: 20px; text-align: center; color: #666;">
+                        Нема слични производи во моментов.
+                    </div>
+                {% endfor %}
             </div>
         </div>
 
-        <div class="similar-products">
-            <h3><i class="fas fa-random"></i> Слични производи</h3>
-
-            {% for similar in similar_products|slice:":5" %}
-                <div class="similar-product-card {% if similar.price < product.price %}cheaper{% endif %}">
-                    <div class="similar-product-image">
-                        {% if similar.image %}
-                            <img src="{{ similar.image }}" alt="{{ similar.name }}"
-                                 onerror="this.onerror=null;this.src='{% static 'images/no-image.png' %}'">
-                        {% else %}
-                            <img src="{% static 'images/no-image.png' %}" alt="Нема слика">
-                        {% endif %}
-                    </div>
-
-                    <div class="similar-product-info">
-                        <div class="similar-product-name">
-                            <a href="{% url 'product_detail' similar.id %}">{{ similar.name }}</a>
+        <!-- Right column - Price chart -->
+        <div class="right-column">
+            <div class="price-history-container">
+                <div class="section-header">
+                    <i class="fas fa-chart-line"></i>
+                    <h3>Историја на цени</h3>
+                </div>
+
+                <div class="chart-container">
+                    {% if price_history %}
+                        <canvas id="priceChart"></canvas>
+                        <div class="chart-summary">
+                            <div class="summary-item">
+                                <span class="summary-label">Тековна цена:</span>
+                                <span class="summary-value">{{ product.price|floatformat:2 }} ден</span>
+                            </div>
                         </div>
-                        <div class="similar-product-price {% if similar.price < product.price %}cheaper{% endif %}">
-                            {{ similar.price }} ден
-                            {% if similar.price < product.price %}
-                                <span style="color: #e74c3c; font-size: 13px;">
-                                    (Заштеда: {{ product.price|subtract:similar.price }} ден)
-                                </span>
-                            {% endif %}
+                    {% else %}
+                        <div class="no-data-message">
+                            <i class="fas fa-exclamation-circle"></i>
+                            <p>Нема достапни историски податоци за цените.</p>
                         </div>
-                        <div class="similar-product-store">
-                            {% if similar.store == "Vero" %}
-                                <img src="{% static 'images/vero_logo1.png' %}" alt="Vero"
-                                     style="height: 20px; vertical-align: middle;">
-                            {% elif similar.store == "Reptil" %}
-                                <img src="{% static 'images/reptil_logo.jpg' %}" alt="Reptil"
-                                     style="height: 20px; vertical-align: middle;">
-                            {% elif similar.store == "Ramstore" %}
-                                <img src="{% static 'images/ramstore_logo.png' %}" alt="Ramstore"
-                                     style="height: 20px; vertical-align: middle;">
-                            {% endif %}
-                            {#                            {{ similar.store }}#}
-                        </div>
-                    </div>
-
-                    <div class="similar-product-actions">
-                        <a href="{% url 'product_detail' similar.id %}" class="view-similar-btn">
-                            <i class="fas fa-info-circle"></i> Детали
-                        </a>
-                    </div>
+                    {% endif %}
                 </div>
-            {% empty %}
-                <div style="padding: 20px; text-align: center; color: #666;">
-                    Нема слични производи во моментов.
-                </div>
-            {% endfor %}
-        </div>
-    </div>
-
-    <!-- Right column - Price chart -->
-    <div class="right-column">
-        <div class="price-history-container">
-            <div class="section-header">
-                <i class="fas fa-chart-line"></i>
-                <h3>Историја на цени</h3>
-            </div>
-
-            <div class="chart-container">
+
                 {% if price_history %}
-                    <canvas id="priceChart"></canvas>
-                    <div class="chart-summary">
-                        <div class="summary-item">
-                            <span class="summary-label">Тековна цена:</span>
-                            <span class="summary-value">{{ product.price|floatformat:2 }} ден</span>
-                        </div>
-                        {#                    <div class="summary-item">#}
-                        {#                        <span class="summary-label">Најниска:</span>#}
-                        {#                        <span class="summary-value">{{ min_price|floatformat:2 }} ден</span>#}
-                        {#                    </div>#}
-                        {#                    <div class="summary-item">#}
-                        {#                        <span class="summary-label">Највисока:</span>#}
-                        {#                        <span class="summary-value">{{ max_price|floatformat:2 }} ден</span>#}
-                        {#                    </div>#}
-                    </div>
-                {% else %}
-                    <div class="no-data-message">
-                        <i class="fas fa-exclamation-circle"></i>
-                        <p>Нема достапни историски податоци за цените.</p>
+                    <div class="date-range-selector">
+                        <form method="get" class="date-range-form">
+                            <div class="form-row">
+                                <div class="form-group">
+                                    <label for="start-date"><i class="far fa-calendar-alt"></i> Од:</label>
+                                    <input type="date" id="start-date" name="start_date" class="form-input"
+                                           value="{{ start_date|default:'' }}">
+                                </div>
+                                <div class="form-group">
+                                    <label for="end-date"><i class="far fa-calendar-alt"></i> До:</label>
+                                    <input type="date" id="end-date" name="end_date" class="form-input"
+                                           value="{{ end_date|default:'' }}">
+                                </div>
+                            </div>
+                            <input type="hidden" name="product_id" value="{{ product.id }}">
+                            <button type="submit" class="update-chart-btn">
+                                <i class="fas fa-sync-alt"></i> Ажурирај графикон
+                            </button>
+                        </form>
                     </div>
                 {% endif %}
             </div>
-
-            {% if price_history %}
-                <div class="date-range-selector">
-                    <form method="get" class="date-range-form">
-                        <div class="form-row">
-                            <div class="form-group">
-                                <label for="start-date"><i class="far fa-calendar-alt"></i> Од:</label>
-                                <input type="date" id="start-date" name="start_date" class="form-input"
-                                       value="{{ start_date|default:'' }}">
-                            </div>
-                            <div class="form-group">
-                                <label for="end-date"><i class="far fa-calendar-alt"></i> До:</label>
-                                <input type="date" id="end-date" name="end_date" class="form-input"
-                                       value="{{ end_date|default:'' }}">
-                            </div>
-                        </div>
-                        <input type="hidden" name="product_id" value="{{ product.id }}">
-                        <button type="submit" class="update-chart-btn">
-                            <i class="fas fa-sync-alt"></i> Ажурирај графикон
-                        </button>
-                    </form>
-                </div>
-            {% endif %}
         </div>
-    </div>
-    <!-- List Selection Modal -->
-    <div id="listModal" style="display: none;" class="modal">
-        <div class="modal-content">
-            <span class="close-modal" onclick="closeModal()">×</span>
-            <h3>Избери листа</h3>
-            <ul id="listOptions" style="list-style: none; padding: 0;">
-                {% for list in user_lists %}
-                    <li style="margin: 10px 0;">
-                        <button onclick="addToList({{ list.id }})"
-                                style="width: 100%; text-align: left; padding: 10px; border: 1px solid #ddd; border-radius: 4px; background: white; cursor: pointer;">
-                            {{ list.name }}
-                        </button>
-                    </li>
-                {% empty %}
-                    <li style="margin: 20px 0; text-align: center;">
-                        Немаш листи. <a href="{% url 'create_list' %}" style="color: #2e652e;">Креирај тука</a>
-                    </li>
-                {% endfor %}
-            </ul>
+        <!-- List Selection Modal -->
+        <div id="listModal" style="display: none;" class="modal">
+            <div class="modal-content">
+                <span class="close-modal" onclick="closeModal()">×</span>
+                <h3>Избери листа</h3>
+                <ul id="listOptions" style="list-style: none; padding: 0;">
+                    {% for list in user_lists %}
+                        <li style="margin: 10px 0;">
+                            <button onclick="addToList({{ list.id }})"
+                                    style="width: 100%; text-align: left; padding: 10px; border: 1px solid #ddd; border-radius: 4px; background: white; cursor: pointer;">
+                                {{ list.name }}
+                            </button>
+                        </li>
+                    {% empty %}
+                        <li style="margin: 20px 0; text-align: center;">
+                            Немаш листи. <a href="{% url 'create_list' %}" style="color: #2e652e;">Креирај тука</a>
+                        </li>
+                    {% endfor %}
+                </ul>
+            </div>
         </div>
-    </div>
-
-    <script>
-        let selectedProductId = null;
-        let selectedListId = localStorage.getItem('selectedListId');
-        let selectedListName = localStorage.getItem('selectedListName');
-
-        function showListOptions(button) {
-            selectedProductId = button.dataset.productId;
-            document.getElementById('listModal').style.display = 'flex';
-        }
-
-        function closeModal() {
-            document.getElementById('listModal').style.display = 'none';
-            selectedProductId = null;
-        }
-
-        function toggleMobileMenu() {
-            const menu = document.getElementById("mobile-menu");
-            const overlay = document.getElementById("overlay");
-
-            menu.classList.toggle("open");
-            overlay.classList.toggle("active");
-        }
-
-        function toggleListsDropdown() {
-            document.getElementById("listsDropdown").classList.toggle("show");
-        }
-
-        document.addEventListener('DOMContentLoaded', function () {
-            if (selectedListId && selectedListName) {
-                document.getElementById("selected-list-name").textContent = selectedListName;
-            }
-
-            // Initialize price chart if data exists
-            {% if price_history %}
-                initializePriceChart();
-            {% endif %}
-        });
-
-        function initializePriceChart() {
-            const ctx = document.getElementById('priceChart').getContext('2d');
-
-            // Prepare data from Django template
-            const labels = [
-                {% for entry in chart_data %}
-                    "{{ entry.date|date:'d.m.Y' }}"{% if not forloop.last %},{% endif %}
-                {% endfor %}
-            ];
-
-            const prices = [
-                {% for entry in chart_data %}
-                    {{ entry.price }}{% if not forloop.last %},{% endif %}
-                {% endfor %}
-            ];
-
-            const minPrice = Math.min(...prices);
-            const maxPrice = Math.max(...prices);
-            const range = maxPrice - minPrice;
-            const suggestedMin = Math.max(0, minPrice - range * 0.1);
-            const suggestedMax = maxPrice + range * 0.1;
-
-            new Chart(ctx, {
-                type: 'line',
-                data: {
-                    labels: labels,
-                    datasets: [{
-                        label: 'Цена (ден) за {{ product.name }}',
-                        data: prices,
-                        borderColor: '#2ecc71',
-                        backgroundColor: 'rgba(46, 204, 113, 0.1)',
-                        borderWidth: 2,
-                        tension: 0.1,
-                        fill: true
-                    }]
-                },
-                options: {
-                    responsive: true,
-                    maintainAspectRatio: false,
-                    scales: {
-                        y: {
-                            beginAtZero: false,
-                            suggestedMin: suggestedMin,
-                            suggestedMax: suggestedMax,
-                            ticks: {
-                                callback: function (value) {
-                                    return value + ' ден';
+
+        <script>
+            function toggleListsDropdown() {
+                document.getElementById("listsDropdown").classList.toggle("show");
+            }
+
+            document.addEventListener('DOMContentLoaded', function () {
+                if (selectedListId && selectedListName) {
+                    document.getElementById("selected-list-name").textContent = selectedListName;
+                }
+
+                // Initialize price chart if data exists
+                {% if price_history %}
+                    initializePriceChart();
+                {% endif %}
+            });
+
+            function initializePriceChart() {
+                const ctx = document.getElementById('priceChart').getContext('2d');
+
+                // Prepare data from Django template
+                const labels = [
+                    {% for entry in chart_data %}
+                        "{{ entry.date|date:'d.m.Y' }}"{% if not forloop.last %},{% endif %}
+                    {% endfor %}
+                ];
+
+                const prices = [
+                    {% for entry in chart_data %}
+                        {{ entry.price }}{% if not forloop.last %},{% endif %}
+                    {% endfor %}
+                ];
+
+                const minPrice = Math.min(...prices);
+                const maxPrice = Math.max(...prices);
+                const range = maxPrice - minPrice;
+                const suggestedMin = Math.max(0, minPrice - range * 0.1);
+                const suggestedMax = maxPrice + range * 0.1;
+
+                new Chart(ctx, {
+                    type: 'line',
+                    data: {
+                        labels: labels,
+                        datasets: [{
+                            label: 'Цена (ден) за {{ product.name }}',
+                            data: prices,
+                            borderColor: '#2ecc71',
+                            backgroundColor: 'rgba(46, 204, 113, 0.1)',
+                            borderWidth: 2,
+                            tension: 0.1,
+                            fill: true
+                        }]
+                    },
+                    options: {
+                        responsive: true,
+                        maintainAspectRatio: false,
+                        scales: {
+                            y: {
+                                beginAtZero: false,
+                                suggestedMin: suggestedMin,
+                                suggestedMax: suggestedMax,
+                                ticks: {
+                                    callback: function (value) {
+                                        return value + ' ден';
+                                    }
+                                },
+                                grid: {
+                                    color: 'rgba(0, 0, 0, 0.05)'
                                 }
                             },
-                            grid: {
-                                color: 'rgba(0, 0, 0, 0.05)'
+                            x: {
+                                grid: {
+                                    display: false
+                                }
                             }
                         },
-                        x: {
-                            grid: {
-                                display: false
-                            }
-                        }
-                    },
-                    plugins: {
-                        tooltip: {
-                            callbacks: {
-                                label: function (context) {
-                                    return 'Цена: ' + context.parsed.y + ' ден';
+                        plugins: {
+                            tooltip: {
+                                callbacks: {
+                                    label: function (context) {
+                                        return 'Цена: ' + context.parsed.y + ' ден';
+                                    }
                                 }
                             }
                         }
                     }
-                }
-            });
-            try {
-                new Chart(document.getElementById('priceChart').getContext('2d'), {
-                    type: 'line',
-                    data: {labels: ['Test'], datasets: [{label: 'Test', data: [1]}]}
                 });
-                console.log("Test chart created successfully");
-            } catch (e) {
-                console.error("Chart.js error:", e);
-            }
-
-
-        }
-
-        window.onclick = function (event) {
-            if (!event.target.matches('.lists-toggle')) {
-                const dropdowns = document.getElementsByClassName("dropdown-content");
-                for (let i = 0; i < dropdowns.length; i++) {
-                    const openDropdown = dropdowns[i];
-                    if (openDropdown.classList.contains('show')) {
-                        openDropdown.classList.remove('show');
+                try {
+                    new Chart(document.getElementById('priceChart').getContext('2d'), {
+                        type: 'line',
+                        data: {labels: ['Test'], datasets: [{label: 'Test', data: [1]}]}
+                    });
+                    console.log("Test chart created successfully");
+                } catch (e) {
+                    console.error("Chart.js error:", e);
+                }
+            }
+
+            window.onclick = function (event) {
+                if (!event.target.matches('.lists-toggle')) {
+                    const dropdowns = document.getElementsByClassName("dropdown-content");
+                    for (let i = 0; i < dropdowns.length; i++) {
+                        const openDropdown = dropdowns[i];
+                        if (openDropdown.classList.contains('show')) {
+                            openDropdown.classList.remove('show');
+                        }
                     }
                 }
             }
-        }
-
-        function addToList(productId) {
-            if (!{{ request.user.is_authenticated|yesno:"true,false" }}) {
-                alert("Мора да бите најавени за да додавате производи во листа!");
-                return;
-            }
-
-            if (!selectedListId) {
-                alert("Ве молиме изберете листа од менито 'Листи'!");
-                return;
-            }
-
-            fetch("{% url 'add_to_list' %}", {
-                method: "POST",
-                headers: {
-                    "X-CSRFToken": "{{ csrf_token }}",
-                    "Content-Type": "application/json"
-                },
-                body: JSON.stringify({
-                    list_id: selectedListId,
-                    product_id: productId
+
+            function addToList(productId) {
+                if (!{{ request.user.is_authenticated|yesno:"true,false" }}) {
+                    alert("Мора да бите најавени за да додавате производи во листа!");
+                    return;
+                }
+
+                if (!selectedListId) {
+                    alert("Ве молиме изберете листа од менито 'Листи'!");
+                    return;
+                }
+
+                fetch("{% url 'add_to_list' %}", {
+                    method: "POST",
+                    headers: {
+                        "X-CSRFToken": "{{ csrf_token }}",
+                        "Content-Type": "application/json"
+                    },
+                    body: JSON.stringify({
+                        list_id: selectedListId,
+                        product_id: productId
+                    })
                 })
-            })
-                .then(response => response.json())
-                .then(data => {
-                    if (data.success) {
-                        alert(`Производот е успешно додаден во листата "${selectedListName}"!`);
-                    } else {
-                        alert("Грешка: " + data.message);
-                    }
-                })
-                .catch(error => {
-                    console.error('Error:', error);
-                    alert("Настана грешка при додавањето на производот.");
-                });
-        }
-
-        function toggleMobileListsDropdown() {
-            document.getElementById("mobileListsDropdown").classList.toggle("show");
-        }
-
-        document.addEventListener('click', function (event) {
-            if (!event.target.closest('.lists-dropdown-mobile') && !event.target.classList.contains('lists-toggle-mobile')) {
-                const dropdown = document.getElementById("mobileListsDropdown");
-                if (dropdown.classList.contains('show')) {
-                    dropdown.classList.remove('show');
-                }
-            }
-        });
-
-        function selectList(listId, listName) {
-            selectedListId = listId;
-            selectedListName = listName;
-
-            localStorage.setItem('selectedListId', listId);
-            localStorage.setItem('selectedListName', listName);
-
-            document.getElementById("selected-list-name").textContent = listName;
-
-            document.getElementById("listsDropdown").classList.remove('show');
-            document.getElementById("mobileListsDropdown").classList.remove('show');
-        }
-
-      document.addEventListener('DOMContentLoaded', function () {
-        // Desktop search elements
-        const searchInput = document.getElementById('searchInput');
-        const suggestionsDiv = document.getElementById('suggestions');
-        const searchForm = document.getElementById('searchForm');
-
-        // Mobile search elements
-        const mobileSearchInput = document.getElementById('mobileSearchInput');
-        const mobileSearchForm = document.getElementById('mobileSearchForm');
-
-        // Extended transliteration with typo correction
-        function transliterateLatinToCyrillic(text) {
-            const map = {
-                'dzh': 'џ', 'dzs': 'џ', 'dsh': 'џ',
-                'zh': 'ж', 'ch': 'ч', 'sh': 'ш', 'lj': 'љ', 'nj': 'њ', 'kj': 'ќ', 'dj': 'ѓ',
-                'zs': 'ж', 'hs': 'ш', 'cx': 'ч', 'sx': 'ш', 'jx': 'ж',
-                'tz': 'ц', 'ts': 'ц', 'tc': 'ц', 'dz': 'џ',
-                'a': 'а', 'b': 'б', 'v': 'в', 'g': 'г', 'd': 'д', 'e': 'е', 'z': 'з', 'i': 'и',
-                'j': 'ј', 'k': 'к', 'l': 'л', 'm': 'м', 'n': 'н', 'o': 'о', 'p': 'п', 'r': 'р',
-                's': 'с', 't': 'т', 'u': 'у', 'f': 'ф', 'h': 'х', 'c': 'ц',
-                'y': 'ј', 'w': 'в', 'x': 'кс', 'q': 'к',
-                'ia': 'ја', 'ie': 'је', 'io': 'јо', 'iu': 'ју'
-            };
-
-            const typoPatterns = [
-                {pattern: /sampon/gi, replace: 'shampon'},
-                {pattern: /cresi/gi, replace: 'creshi'},
-                {pattern: /stipki/gi, replace: 'shtipki'},
-                {pattern: /sch/gi, replace: 'sh'},
-                {pattern: /ck/gi, replace: 'k'},
-                {pattern: /ph/gi, replace: 'f'},
-                {pattern: /th/gi, replace: 't'},
-                {pattern: /([a-z]),([a-z])/gi, replace: '$1$2'},
-                {pattern: /([a-z])\.([a-z])/gi, replace: '$1$2'},
-                {pattern: /([a-z])\1/gi, replace: '$1'}
-            ];
-
-            let normalizedText = text.toLowerCase();
-            for (const {pattern, replace} of typoPatterns) {
-                normalizedText = normalizedText.replace(pattern, replace);
-            }
-
-            let result = '';
-            let i = 0;
-            while (i < normalizedText.length) {
-                if (map[normalizedText.substring(i, i + 3)]) {
-                    result += map[normalizedText.substring(i, i + 3)];
-                    i += 3;
-                } else if (map[normalizedText.substring(i, i + 2)]) {
-                    result += map[normalizedText.substring(i, i + 2)];
-                    i += 2;
-                } else if (map[normalizedText[i]]) {
-                    result += map[normalizedText[i]];
-                    i++;
-                } else {
-                    result += normalizedText[i];
-                    i++;
-                }
-            }
-            return result;
-        }
-
-        function setupSearch(input, form) {
-            input.addEventListener('input', function () {
-                const query = this.value.trim();
-                if (query.length < 2) {
-                    suggestionsDiv.style.display = 'none';
-                    return;
-                }
-
-                fetch(`/search-suggestions/?q=${encodeURIComponent(query)}`)
                     .then(response => response.json())
                     .then(data => {
-                        suggestionsDiv.innerHTML = '';
-                        if (data.suggestions.length > 0) {
-                            data.suggestions.forEach(suggestion => {
-                                const div = document.createElement('div');
-                                div.textContent = suggestion;
-                                div.style.padding = '5px 10px';
-                                div.style.cursor = 'pointer';
-                                div.addEventListener('click', function () {
-                                    input.value = transliterateLatinToCyrillic(suggestion);
+                        if (data.success) {
+                            alert(`Производот е успешно додаден во листата "${selectedListName}"!`);
+                        } else {
+                            alert("Грешка: " + data.message);
+                        }
+                    })
+                    .catch(error => {
+                        console.error('Error:', error);
+                        alert("Настана грешка при додавањето на производот.");
+                    });
+            }
+
+            function selectList(listId, listName) {
+                selectedListId = listId;
+                selectedListName = listName;
+
+                localStorage.setItem('selectedListId', listId);
+                localStorage.setItem('selectedListName', listName);
+
+                document.getElementById("selected-list-name").textContent = listName;
+
+                document.getElementById("listsDropdown").classList.remove('show');
+                document.getElementById("mobileListsDropdown").classList.remove('show');
+            }
+
+            document.addEventListener('DOMContentLoaded', function () {
+                // Desktop search elements
+                const searchInput = document.getElementById('searchInput');
+                const suggestionsDiv = document.getElementById('suggestions');
+                const searchForm = document.getElementById('searchForm');
+
+                // Mobile search elements
+                const mobileSearchInput = document.getElementById('mobileSearchInput');
+                const mobileSearchForm = document.getElementById('mobileSearchForm');
+
+                // Extended transliteration with typo correction
+                function transliterateLatinToCyrillic(text) {
+                    const map = {
+                        'dzh': 'џ', 'dzs': 'џ', 'dsh': 'џ',
+                        'zh': 'ж', 'ch': 'ч', 'sh': 'ш', 'lj': 'љ', 'nj': 'њ', 'kj': 'ќ', 'dj': 'ѓ',
+                        'zs': 'ж', 'hs': 'ш', 'cx': 'ч', 'sx': 'ш', 'jx': 'ж',
+                        'tz': 'ц', 'ts': 'ц', 'tc': 'ц', 'dz': 'џ',
+                        'a': 'а', 'b': 'б', 'v': 'в', 'g': 'г', 'd': 'д', 'e': 'е', 'z': 'з', 'i': 'и',
+                        'j': 'ј', 'k': 'к', 'l': 'л', 'm': 'м', 'n': 'н', 'o': 'о', 'p': 'п', 'r': 'р',
+                        's': 'с', 't': 'т', 'u': 'у', 'f': 'ф', 'h': 'х', 'c': 'ц',
+                        'y': 'ј', 'w': 'в', 'x': 'кс', 'q': 'к',
+                        'ia': 'ја', 'ie': 'је', 'io': 'јо', 'iu': 'ју'
+                    };
+
+                    const typoPatterns = [
+                        {pattern: /sampon/gi, replace: 'shampon'},
+                        {pattern: /cresi/gi, replace: 'creshi'},
+                        {pattern: /stipki/gi, replace: 'shtipki'},
+                        {pattern: /sch/gi, replace: 'sh'},
+                        {pattern: /ck/gi, replace: 'k'},
+                        {pattern: /ph/gi, replace: 'f'},
+                        {pattern: /th/gi, replace: 't'},
+                        {pattern: /([a-z]),([a-z])/gi, replace: '$1$2'},
+                        {pattern: /([a-z])\.([a-z])/gi, replace: '$1$2'},
+                        {pattern: /([a-z])\1/gi, replace: '$1'}
+                    ];
+
+                    let normalizedText = text.toLowerCase();
+                    for (const {pattern, replace} of typoPatterns) {
+                        normalizedText = normalizedText.replace(pattern, replace);
+                    }
+
+                    let result = '';
+                    let i = 0;
+                    while (i < normalizedText.length) {
+                        if (map[normalizedText.substring(i, i + 3)]) {
+                            result += map[normalizedText.substring(i, i + 3)];
+                            i += 3;
+                        } else if (map[normalizedText.substring(i, i + 2)]) {
+                            result += map[normalizedText.substring(i, i + 2)];
+                            i += 2;
+                        } else if (map[normalizedText[i]]) {
+                            result += map[normalizedText[i]];
+                            i++;
+                        } else {
+                            result += normalizedText[i];
+                            i++;
+                        }
+                    }
+                    return result;
+                }
+
+                function setupSearch(input, form) {
+                    input.addEventListener('input', function () {
+                        const query = this.value.trim();
+                        if (query.length < 2) {
+                            suggestionsDiv.style.display = 'none';
+                            return;
+                        }
+
+                        fetch(`/search-suggestions/?q=${encodeURIComponent(query)}`)
+                            .then(response => response.json())
+                            .then(data => {
+                                suggestionsDiv.innerHTML = '';
+                                if (data.suggestions.length > 0) {
+                                    data.suggestions.forEach(suggestion => {
+                                        const div = document.createElement('div');
+                                        div.textContent = suggestion;
+                                        div.style.padding = '5px 10px';
+                                        div.style.cursor = 'pointer';
+                                        div.addEventListener('click', function () {
+                                            input.value = transliterateLatinToCyrillic(suggestion);
+                                            suggestionsDiv.style.display = 'none';
+                                            form.submit();
+                                        });
+                                        suggestionsDiv.appendChild(div);
+                                    });
+                                    suggestionsDiv.style.display = 'block';
+                                } else {
                                     suggestionsDiv.style.display = 'none';
-                                    form.submit();
-                                });
-                                suggestionsDiv.appendChild(div);
+                                }
                             });
-                            suggestionsDiv.style.display = 'block';
-                        } else {
+                    });
+
+                    input.addEventListener('keydown', function (e) {
+                        if (e.key === 'Enter') {
+                            e.preventDefault();
                             suggestionsDiv.style.display = 'none';
+                            input.value = transliterateLatinToCyrillic(input.value);
+                            form.submit();
                         }
                     });
+                }
+
+                setupSearch(searchInput, searchForm);
+                setupSearch(mobileSearchInput, mobileSearchForm);
+
+                document.addEventListener('click', function (e) {
+                    if (!searchInput.contains(e.target) && !suggestionsDiv.contains(e.target) &&
+                        !mobileSearchInput.contains(e.target)) {
+                        suggestionsDiv.style.display = 'none';
+                    }
+                });
             });
-
-            input.addEventListener('keydown', function (e) {
-                if (e.key === 'Enter') {
-                    e.preventDefault();
-                    suggestionsDiv.style.display = 'none';
-                    input.value = transliterateLatinToCyrillic(input.value);
-                    form.submit();
-                }
-            });
-        }
-
-        setupSearch(searchInput, searchForm);
-        setupSearch(mobileSearchInput, mobileSearchForm);
-
-        document.addEventListener('click', function (e) {
-            if (!searchInput.contains(e.target) && !suggestionsDiv.contains(e.target) &&
-                !mobileSearchInput.contains(e.target)) {
-                suggestionsDiv.style.display = 'none';
-            }
-        });
-    });
-
-    </script>
-
-</body>
+        </script>
+    </body>
+{% endblock %}
 </html>
Index: main/templates/main/product_list.html
===================================================================
--- main/templates/main/product_list.html	(revision cd9f2f4e4afae458d5578788c887892d76ca8947)
+++ main/templates/main/product_list.html	(revision f84285e7b16852eab969772ebde9afe1b04fc8ae)
@@ -1,3 +1,3 @@
-{% extends 'main\header.html' %}
+{% extends 'main/header.html' %}
 {% load static %}
 {% load category_filters %}
@@ -1726,14 +1726,14 @@
                         <label for="store-ramstore">Ramstore</label>
                     </div>
-                    <div class="filter-option">
-                        <input type="checkbox" id="store-zito" name="store" value="Zito"
-                               {% if 'Zito' in selected_stores %}checked{% endif %}>
-                        <label for="store-zito">Zito</label>
-                    </div>
-                    <div class="filter-option">
-                        <input type="checkbox" id="store-kam" name="store" value="Kam"
-                               {% if 'Kam' in selected_stores %}checked{% endif %}>
-                        <label for="store-kam">Kam</label>
-                    </div>
+                    {#                    <div class="filter-option">#}
+                    {#                        <input type="checkbox" id="store-zito" name="store" value="Zito"#}
+                    {#                               {% if 'Zito' in selected_stores %}checked{% endif %}>#}
+                    {#                        <label for="store-zito">Zito</label>#}
+                    {#                    </div>#}
+                    {#                    <div class="filter-option">#}
+                    {#                        <input type="checkbox" id="store-kam" name="store" value="Kam"#}
+                    {#                               {% if 'Kam' in selected_stores %}checked{% endif %}>#}
+                    {#                        <label for="store-kam">Kam</label>#}
+                    {#                    </div>#}
                 </div>
                 <input type="hidden" name="sort" id="sortValue" value="{{ selected_sort }}">
@@ -1764,5 +1764,5 @@
                            for="sort">Сортирај по:</label>
                     <select id="sort" onchange="updateSort()">
-                        <option value="popular" {% if selected_sort == 'popular' %}selected{% endif %}>Најпопуларни
+                        <option value="-" >    -- Избери --
                         </option>
                         <option value="price_asc" {% if selected_sort == 'price_asc' %}selected{% endif %}>Цена
@@ -1852,5 +1852,6 @@
                                                 data-product-id="{{ product.id }}"><b>Додај</b>
                                         </button>
-                                        <button onclick="toggleFavorite(this, {{ product.id }})" class="favorite-btn">
+                                        <button onclick="toggleFavorite(this, {{ product.id }})" class="favorite-btn"
+                                                data-product-id="{{ product.id }}">
                                             <i class="far fa-heart"></i>
                                         </button>
@@ -1905,5 +1906,5 @@
                                                  style="max-width: 100%; max-height: 100%;">
                                         {% else %}
-                                            [No Image]
+                                            <img src="{% static 'images/no-image.png' %}" alt="no-image">
                                         {% endif %}
                                     </div>
@@ -2094,6 +2095,10 @@
 
 
+
+
                             {% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}">&laquo;</a>
                     <a href="?page=
+
+
 
 
@@ -2359,6 +2364,10 @@
 
 
+
+
                             {{ page_obj.next_page_number }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}">&rsaquo;</a>
                     <a href="?page=
+
+
 
 
@@ -2894,18 +2903,4 @@
         }
 
-        document.addEventListener("DOMContentLoaded", function () {
-            fetch('/api/lists/')
-                .then(response => response.json())
-                .then(data => {
-                    const dropdown = document.getElementById('listSelector');
-                    data.lists.forEach(list => {
-                        const option = document.createElement('option');
-                        option.value = list.id;
-                        option.text = list.name;
-                        dropdown.appendChild(option);
-                    });
-                });
-        });
-
         document.addEventListener('DOMContentLoaded', function () {
             const addToListButtons = document.querySelectorAll('.add-to-list-btn');
@@ -3186,9 +3181,11 @@
 
         function toggleFavorite(button, productId) {
+            const icon = button.querySelector('i');
+
             fetch('/toggle-favorite/', {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
-                    'X-CSRFToken': getCookie('csrftoken')  // <-- Get CSRF from cookie
+                    'X-CSRFToken': getCookie('csrftoken')
                 },
                 body: JSON.stringify({product_id: productId})
@@ -3197,10 +3194,18 @@
                 .then(data => {
                     if (data.success) {
-                        // Update heart icon
-                        const icon = button.querySelector('i');
+                        // Toggle the heart icon
                         icon.classList.toggle('far');
                         icon.classList.toggle('fas');
 
-                        // Reload favorites list page to reflect changes
+                        // Update color immediately
+                        if (icon.classList.contains('fas')) {
+                            icon.style.color = '#e74c3c';
+                            button.classList.add('pulse');
+                            setTimeout(() => button.classList.remove('pulse'), 600);
+                        } else {
+                            icon.style.color = '#ccc';
+                        }
+
+                        // Reload favorites list page if needed
                         if (window.location.pathname === '/favorites/') {
                             window.location.reload();
@@ -3208,4 +3213,7 @@
                     } else {
                         console.error('Failed to toggle favorite:', data.message);
+                        if (data.redirect) {
+                            window.location.href = data.redirect;
+                        }
                     }
                 })
@@ -3214,4 +3222,34 @@
                 });
         }
+
+        document.addEventListener('DOMContentLoaded', function () {
+            // Check if user is authenticated
+            {% if user.is_authenticated %}
+                // Get all favorite buttons
+                const favoriteButtons = document.querySelectorAll('.favorite-btn');
+
+                // Get list of favorited product IDs from the server
+                fetch('/get-favorites/')
+                    .then(response => response.json())
+                    .then(data => {
+                        if (data.success) {
+                            // For each product, check if it's favorited
+                            favoriteButtons.forEach(button => {
+                                const productId = button.getAttribute('data-product-id');
+                                if (data.favorites.includes(parseInt(productId))) {
+                                    // If favorited, set the heart to filled state
+                                    const icon = button.querySelector('i');
+                                    icon.classList.remove('far');
+                                    icon.classList.add('fas');
+                                    icon.style.color = '#e74c3c';
+                                }
+                            });
+                        }
+                    })
+                    .catch(error => {
+                        console.error('Error fetching favorites:', error);
+                    });
+            {% endif %}
+        });
 
     </script>
@@ -3242,23 +3280,23 @@
 
 
-    <!-- Arrow pointing to list selector -->
-    <div id="listArrow" class="arrow-pointer pulse-arrow"
-         style="width: 60px; height: 60px; position: absolute;">
-        <svg viewBox="0 0 24 24" style="width: 100%; height: 100%;" preserveAspectRatio="xMidYMid meet"
-             xmlns="http://www.w3.org/2000/svg">
-            <path d="m14.707 12.707-4 4a1 1 0 0 1-1.414-1.414L12.586 12 9.293 8.707a1 1 0 1 1 1.414-1.414l4 4a1 1 0 0 1 0 1.414z"
-                  style="fill:rgba(31,63,31,0.93)"/>
-        </svg>
-    </div>
-
-
-    <div id="navArrow" class="arrow-pointer pulse-arrow"
-         style="position: absolute; width: 50px; height: 50px;">
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet"
-             style="width: 100%; height: 100%;">
-            <path d="M16 15a1 1 0 0 1-.707-.293L12 11.414l-3.293 3.293a1 1 0 1 1-1.414-1.414l4-4a1 1 0 0 1 1.414 0l4 4A1 1 0 0 1 16 15z"
-                  style="fill:rgba(31,63,31,0.93)"/>
-        </svg>
-    </div>
+    {#    <!-- Arrow pointing to list selector -->#}
+    {#    <div id="listArrow" class="arrow-pointer pulse-arrow"#}
+    {#         style="width: 60px; height: 60px; position: absolute;">#}
+    {#        <svg viewBox="0 0 24 24" style="width: 100%; height: 100%;" preserveAspectRatio="xMidYMid meet"#}
+    {#             xmlns="http://www.w3.org/2000/svg">#}
+    {#            <path d="m14.707 12.707-4 4a1 1 0 0 1-1.414-1.414L12.586 12 9.293 8.707a1 1 0 1 1 1.414-1.414l4 4a1 1 0 0 1 0 1.414z"#}
+    {#                  style="fill:rgba(31,63,31,0.93)"/>#}
+    {#        </svg>#}
+    {#    </div>#}
+
+
+    {#    <div id="navArrow" class="arrow-pointer pulse-arrow"#}
+    {#         style="position: absolute; width: 50px; height: 50px;">#}
+    {#        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet"#}
+    {#             style="width: 100%; height: 100%;">#}
+    {#            <path d="M16 15a1 1 0 0 1-.707-.293L12 11.414l-3.293 3.293a1 1 0 1 1-1.414-1.414l4-4a1 1 0 0 1 1.414 0l4 4A1 1 0 0 1 16 15z"#}
+    {#                  style="fill:rgba(31,63,31,0.93)"/>#}
+    {#        </svg>#}
+    {#    </div>#}
 
 
Index: main/templates/main/profile.html
===================================================================
--- main/templates/main/profile.html	(revision f84285e7b16852eab969772ebde9afe1b04fc8ae)
+++ main/templates/main/profile.html	(revision f84285e7b16852eab969772ebde9afe1b04fc8ae)
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+</head>
+<body>
+
+</body>
+</html>
Index: main/templates/main/stats.html
===================================================================
--- main/templates/main/stats.html	(revision cd9f2f4e4afae458d5578788c887892d76ca8947)
+++ main/templates/main/stats.html	(revision f84285e7b16852eab969772ebde9afe1b04fc8ae)
@@ -3,170 +3,349 @@
 
 {% block content %}
-    <!DOCTYPE html>
-    <html lang="en">
-    <head>
-        <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
-        <title>Статистика</title>
-        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-        <style>
-            /* Common Styles */
-            body {
-                font-family: Arial, sans-serif;
-                margin: 0;
-                padding: 0;
-                display: flex;
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
+    <title>Статистика</title>
+    <style>
+        :root {
+            --primary-color: #2e652e;
+            --primary-dark: #1f3f1f;
+            --light-bg: #f5f5f5;
+            --white: #ffffff;
+            --text-dark: #333333;
+            --text-light: #666666;
+            --border-color: #e0e0e0;
+        }
+
+        /* Base Styles */
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+            background-color: var(--light-bg);
+            color: var(--text-dark);
+            line-height: 1.6;
+        }
+
+        /* Stats Page Container */
+        .stats-wrapper {
+            padding: 20px;
+            max-width: 1400px;
+            margin: 0 auto;
+        }
+
+        /* Main Container */
+        .stats-container {
+            background-color: var(--white);
+            border-radius: 12px;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+            overflow: hidden;
+            margin-bottom: 30px;
+        }
+
+        /* Header Section */
+        .stats-header {
+            background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
+                url('{% static "images/baner2.jpg" %}') center center / cover no-repeat;
+            color: white;
+            padding: 40px 20px;
+            text-align: center;
+        }
+
+        .stats-main-title {
+            font-size: 28px;
+            font-weight: 700;
+            margin: 0;
+            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+        }
+
+        .stats-subtitle {
+            font-size: 16px;
+            opacity: 0.9;
+            margin-top: 8px;
+            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+        }
+
+        /* Navigation */
+        .back-button {
+            margin: 20px;
+        }
+
+        .back-button a {
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            padding: 10px 20px;
+            background-color: var(--white);
+            color: var(--primary-color);
+            border-radius: 30px;
+            text-decoration: none;
+            font-weight: 600;
+            transition: all 0.3s ease;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+            border: 1px solid rgba(46, 101, 46, 0.2);
+        }
+
+        .back-button a:hover {
+            background-color: #f0f7f0;
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+        }
+
+        /* Form Styles */
+        .stats-form {
+            padding: 0 20px 20px;
+        }
+
+        .form-row {
+            display: flex;
+            gap: 20px;
+            margin-bottom: 20px;
+        }
+
+        .form-group {
+            flex: 1;
+            min-width: 0;
+        }
+
+        .form-group label {
+            display: block;
+            margin-bottom: 8px;
+            font-weight: 500;
+            color: var(--primary-color);
+            font-size: 14px;
+        }
+
+        .form-input {
+            width: 75%;
+            padding: 12px 15px;
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            font-size: 15px;
+            background-color: var(--white);
+            transition: all 0.2s ease;
+        }
+
+        .form-input:focus {
+            border-color: var(--primary-color);
+            outline: none;
+            box-shadow: 0 0 0 3px rgba(46, 101, 46, 0.1);
+        }
+
+        .form-actions {
+            text-align: center;
+            margin-top: 30px;
+        }
+
+        .action-button {
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            padding: 14px 30px;
+            background-color: var(--primary-color);
+            color: var(--white);
+            border: none;
+            border-radius: 30px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            font-size: 16px;
+        }
+
+        .action-button:hover {
+            background-color: var(--primary-dark);
+            transform: translateY(-2px);
+        }
+
+        /* Results Section */
+        .results-container {
+            display: flex;
+            gap: 30px;
+            padding: 20px;
+        }
+
+        /* Products List */
+        .products-list {
+            flex: 1;
+            min-width: 300px;
+            max-height: 500px;
+            overflow-y: auto;
+            background-color: var(--white);
+            border-radius: 8px;
+            padding: 15px;
+            border: 1px solid var(--border-color);
+        }
+
+        .products-list h3 {
+            color: var(--primary-color);
+            font-size: 18px;
+            font-weight: 600;
+            margin-bottom: 15px;
+            padding-bottom: 10px;
+            border-bottom: 1px solid var(--border-color);
+        }
+
+        .product-item {
+            display: flex;
+            align-items: center;
+            gap: 15px;
+            padding: 12px;
+            margin-bottom: 12px;
+            border-radius: 6px;
+            transition: all 0.2s ease;
+            border: 1px solid var(--border-color);
+        }
+
+        .product-item:hover {
+            background-color: #f8f8f8;
+            border-color: var(--primary-color);
+        }
+
+        .product-item img {
+            width: 50px;
+            height: 50px;
+            object-fit: contain;
+            border-radius: 4px;
+            border: 1px solid var(--border-color);
+        }
+
+        .product-info {
+            flex: 1;
+        }
+
+        .product-info a {
+            color: var(--primary-color);
+            font-weight: 600;
+            text-decoration: none;
+        }
+
+        .product-info a:hover {
+            text-decoration: underline;
+        }
+
+        .product-meta {
+            font-size: 12px;
+            color: var(--text-light);
+            margin-top: 3px;
+        }
+
+        /* Chart Container */
+        .chart-container {
+            flex: 2;
+            min-width: 300px;
+            background-color: var(--white);
+            border-radius: 8px;
+            padding: 20px;
+            border: 1px solid var(--border-color);
+        }
+
+        .chart-container h3 {
+            color: var(--primary-color);
+            font-size: 18px;
+            font-weight: 600;
+            margin-bottom: 20px;
+            padding-bottom: 10px;
+            border-bottom: 1px solid var(--border-color);
+        }
+
+        .chart-wrapper {
+            position: relative;
+            height: 400px;
+            width: 100%;
+        }
+
+        /* Empty State */
+        .no-results {
+            text-align: center;
+            padding: 40px;
+            color: #666;
+        }
+
+        .no-results i {
+            font-size: 40px;
+            margin-bottom: 15px;
+            color: var(--text-light);
+        }
+
+        /* Stats Summary */
+        .stats-summary {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 15px;
+            margin: 20px;
+        }
+
+        .summary-card {
+            background-color: var(--white);
+            border-radius: 8px;
+            padding: 20px;
+            text-align: center;
+            border: 1px solid var(--border-color);
+        }
+
+        .summary-card h4 {
+            color: var(--primary-color);
+            margin: 0 0 10px;
+            font-size: 16px;
+        }
+
+        .summary-card .value {
+            font-size: 24px;
+            font-weight: 700;
+            margin-bottom: 5px;
+        }
+
+        .summary-card .label {
+            font-size: 12px;
+            color: var(--text-light);
+        }
+
+        /* Promo Banner */
+        .promo-banner {
+            background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
+            color: white;
+            padding: 15px 20px;
+            border-radius: 8px;
+            margin: 20px;
+            display: flex;
+            align-items: center;
+        }
+
+        .promo-banner .banner-content {
+            flex: 1;
+        }
+
+        .promo-banner h2 {
+            margin: 0;
+            font-size: 20px;
+        }
+
+        .promo-banner p {
+            margin: 5px 0 0;
+            opacity: 0.9;
+            font-size: 14px;
+        }
+
+        /* Responsive Adjustments */
+        @media (max-width: 1200px) {
+            .results-container {
                 flex-direction: column;
-                min-height: 100vh;
-                background-color: #f5f5f5;
-            }
-
-            /* Stats Page Styles */
-            .stats-wrapper {
-                flex: 1;
-                padding: 20px;
-                background-color: #f9f9f9;
-            }
-
-            .stats-container {
-                max-width: 1200px;
-                margin: 20px auto;
-                background-color: white;
-                border-radius: 8px;
-                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-                padding: 30px;
-            }
-
+            }
+
+            .products-list {
+                max-height: 300px;
+            }
+        }
+
+        @media (max-width: 768px) {
             .stats-main-title {
-                background: linear-gradient(135deg, #2e652e, #1f3f1f);
-                color: white;
-                padding: 15px;
-                border-radius: 8px;
-                text-align: center;
                 font-size: 24px;
-                font-weight: 600;
-                margin-bottom: 30px;
-            }
-
-            .back-button {
-                margin-bottom: 20px;
-            }
-
-            .back-button a {
-                display: inline-flex;
-                align-items: center;
-                gap: 8px;
-                padding: 10px 20px;
-                background-color: #f5f5f5;
-                color: #2e652e;
-                border-radius: 30px;
-                text-decoration: none;
-                font-weight: 600;
-                transition: all 0.3s ease;
-            }
-
-            .back-button a:hover {
-                background-color: #e0e8e0;
-            }
-
-            .stats-form {
-                margin-bottom: 30px;
-            }
-
-            .form-row {
-                display: flex;
-                gap: 20px;
-                margin-bottom: 15px;
-            }
-
-            .form-group {
-                flex: 1;
-            }
-
-            .form-group label {
-                display: block;
-                margin-bottom: 8px;
-                font-weight: 500;
-                color: #2e652e;
-            }
-
-            .form-input {
-                width: 100%;
-                padding: 12px 15px;
-                border: 1px solid #ddd;
-                border-radius: 6px;
-                font-size: 16px;
-                background-color: #f9f9f9;
-                transition: all 0.3s ease;
-            }
-
-            .form-input:focus {
-                border-color: #2e652e;
-                outline: none;
-                box-shadow: 0 0 8px rgba(46, 101, 46, 0.2);
-            }
-
-            .form-actions {
-                text-align: center;
-                margin-top: 20px;
-            }
-
-            .action-button {
-                display: inline-flex;
-                align-items: center;
-                gap: 8px;
-                padding: 12px 25px;
-                background-color: #2e652e;
-                color: white;
-                border: none;
-                border-radius: 30px;
-                font-weight: 600;
-                cursor: pointer;
-                transition: all 0.3s ease;
-            }
-
-            .action-button:hover {
-                background-color: #1f3f1f;
-                transform: translateY(-2px);
-                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-            }
-
-            .product-choices h3 {
-                color: #2e652e;
-                font-size: 20px;
-                font-weight: 600;
-                margin-bottom: 15px;
-            }
-            .price-history h3 {
-                color: #2e652e;
-                font-size: 20px;
-                font-weight: 600;
-                margin-bottom: 20px;
-            }
-
-            .no-results {
-                text-align: center;
-                padding: 30px;
-                background-color: #fff3e0;
-                border-radius: 8px;
-                color: #e65100;
-                border-left: 4px solid #e65100;
-            }
-
-            .no-results i {
-                font-size: 40px;
-                margin-bottom: 15px;
-                color: #e65100;
-            }
-
-            .no-results p {
-                margin: 5px 0;
-                font-size: 16px;
-            }
-
-            .stats-container {
-                padding: 20px;
-                margin-top: 20px;
+            }
+
+            .stats-subtitle {
+                font-size: 14px;
             }
 
@@ -176,199 +355,361 @@
             }
 
-            .products-grid {
+            .results-container {
+                padding: 15px;
+                gap: 20px;
+            }
+
+            .chart-wrapper {
+                height: 350px;
+            }
+
+            .promo-banner {
+                flex-direction: column;
+                text-align: center;
+            }
+        }
+
+        @media (max-width: 480px) {
+            .stats-wrapper {
+                padding: 10px;
+            }
+
+            .stats-header {
+                padding: 30px 15px;
+            }
+
+            .back-button {
+                margin: 15px;
+            }
+
+            .stats-form {
+                padding: 0 15px 15px;
+            }
+
+            .action-button {
+                width: 100%;
+                justify-content: center;
+            }
+
+            .product-item {
+                padding: 10px;
+            }
+
+            .chart-wrapper {
+                height: 300px;
+            }
+
+            .stats-summary {
                 grid-template-columns: 1fr;
             }
-
-            /* Adjust flex layout for mobile */
-            .flex-container {
-                flex-direction: column !important;
-                gap: 20px !important;
-            }
-
-            /* Product list adjustments */
-            .products-list {
-                max-width: 100% !important;
-                max-height: 400px !important;
-                padding: 8px !important;
-            }
-
-            .product-item {
-                margin-bottom: 10px !important;
-                padding-bottom: 8px !important;
-            }
-
-            .product-item img {
-                width: 40px !important;
-                height: 40px !important;
-            }
-
-            .product-item a {
-                font-size: 14px !important;
-            }
-
-            .product-item div {
-                font-size: 10px !important;
-            }
-
-            /* Chart adjustments */
-            .chart-container {
-            padding: 15px !important;
-            }
-
-            .chart-container h3 {
-                font-size: 16px !important;
-            }
-
-            .no-results {
-                padding: 20px !important;
-                font-size: 14px !important;
-            }
-
-            .no-results i {
-                font-size: 30px !important;
-            }
-
-            @media (max-width: 480px) {
-                .stats-main-title {
-                    font-size: 20px;
-                    padding: 12px;
-                }
-
-                .back-button a {
-                    padding: 8px 15px;
-                    font-size: 14px;
-                }
-
-                .action-button {
-                    padding: 10px 20px;
-                    font-size: 14px;
-                }
-
-                /* Further reduce product item sizes */
-                .product-item img {
-                    width: 35px !important;
-                    height: 35px !important;
-                }
-
-                .product-item a {
-                    font-size: 13px !important;
-                }
-
-                .product-item div {
-                    font-size: 9px !important;
-                }
-
-                /* Further reduce chart padding */
-                .chart-container {
-                    padding: 10px !important;
-                }
-            }
-        </style>
-    </head>
-    <body>
-
-    <!-- Stats Content -->
-    <div class="stats-wrapper">
-        <div class="stats-container">
-            <div class="back-button">
-                <a href="{% url 'home' %}" class="action-button">
-                    <i class="fas fa-arrow-left"></i> Назад
-                </a>
-            </div>
-
+        }
+
+        /* Animations */
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+
+        .stats-container {
+            animation: fadeIn 0.4s ease-out;
+        }
+    </style>
+</head>
+<body>
+
+<div class="stats-wrapper">
+    <div class="stats-container">
+        <!-- Header Section -->
+        <div class="stats-header">
             <h1 class="stats-main-title">Ценовна историја</h1>
-
-            <form method="get" class="stats-form">
-                <div class="form-row">
-                    <div class="form-group">
-                        <label for="store-select">Продавница:</label>
-                        <select name="store" id="store-select" required class="form-input">
-                            <option value="">Избери продавница...</option>
-                            <option value="Vero" {% if store == "Vero" %}selected{% endif %}>Vero</option>
-                            <option value="Ramstore" {% if store == "Ramstore" %}selected{% endif %}>Ramstore</option>
-                            <option value="Reptil" {% if store == "Reptil" %}selected{% endif %}>Reptil</option>
-                            <option value="Zito" {% if store == "Zito" %}selected{% endif %}>Zito</option>
-                        </select>
-                    </div>
-                    <div class="form-group" style="width: 93%">
-                        <label for="product-input">Продукт:</label>
-                        <input type="text" id="product-input" name="query" placeholder="напр. ВОДА" required
-                               value="{{ query|default:'' }}" class="form-input">
-                    </div>
-                </div>
-                <div class="form-row">
-                    <div class="form-group" style="width: 93%">
-                        <label for="start-date">Од датум:</label>
-                        <input type="date" id="start-date" name="start_date" class="form-input"
-                               value="{{ start_date|default:'' }}">
-                    </div>
-                    <div class="form-group" style="width: 93%">
-                        <label for="end-date">До датум:</label>
-                        <input type="date" id="end-date" name="end_date" class="form-input"
-                               value="{{ end_date|default:'' }}">
-                    </div>
-                </div>
-                <div class="form-actions">
-                    <button type="submit" class="action-button">
-                        <i class="fas fa-chart-line"></i> Прикажи историја
-                    </button>
-                </div>
-            </form>
-
-            {% if similar_products and not exact_match %}
-                <!-- New flex container for products and chart -->
-                <div style="display: flex; gap: 30px;" class="flex-container">
-
-                    <!-- Left: Products List -->
-                    <div style="flex: 1; max-width: 400px; overflow-y: auto; max-height: 600px; border: 1px solid #ddd; border-radius: 8px; padding: 10px; background: #fff;"
-                         class="products-list">
-                        <h3 style="color:#2e652e; margin-bottom: 15px;">Слични производи во {{ store }}:</h3>
-                        <div>
-                            {% for product, similarity in similar_products %}
-                                <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 15px; border-bottom: 1px solid #eee; padding-bottom: 10px;"
-                                     class="product-item">
-                                    <!-- Example product image, adapt src as needed -->
-                                    {#                                <img src="{{product.image_url}}" alt="{{ product }}"#}
-                                    {#                                     style="width: 60px; height: 60px; object-fit: contain; border-radius: 6px; border: 1px solid #ccc;">#}
-                                    <div style="flex-grow: 1;">
-                                        <a href="?store={{ store|urlencode }}&query={{ query|urlencode }}&selected_product={{ product|urlencode }}"
-                                           style="color: #2e652e; font-weight: 600; text-decoration: none;">
-                                            {{ product }}
-                                        </a>
-                                        <div style="font-size: 12px; color: #666;">
-                                            {#                                        {{ similarity|floatformat:2 }} сличност#}
-                                        </div>
-                                    </div>
+            <p class="stats-subtitle">Анализирајте ги промените на цените низ времето</p>
+        </div>
+
+        <div class="back-button">
+            <a href="{% url 'home' %}">
+                <i class="fas fa-arrow-left"></i> Назад кон почетна
+            </a>
+        </div>
+
+        <!-- Search Form -->
+        <form method="get" class="stats-form" id="statsSearchForm">
+            <div class="form-row">
+                <div class="form-group">
+                    <label for="store-select"><i class="fas fa-store"></i> Продавница:</label>
+                    <select name="store" id="store-select" required class="form-input" style="width: 79%">
+                        <option value="">Избери продавница...</option>
+                        <option value="Vero" {% if store == "Vero" %}selected{% endif %}>Vero</option>
+                        <option value="Ramstore" {% if store == "Ramstore" %}selected{% endif %}>Ramstore</option>
+                        <option value="Reptil" {% if store == "Reptil" %}selected{% endif %}>Reptil</option>
+                        <option value="Zito" {% if store == "Zito" %}selected{% endif %}>Zito</option>
+                    </select>
+                </div>
+                <div class="form-group">
+                    <label for="product-input"><i class="fas fa-search"></i> Продукт:</label>
+                    <input type="text" id="product-input" name="query" placeholder="напр. ВОДА" required
+                           value="{{ query|default:'' }}" class="form-input" autocomplete="off">
+                    <div id="stats-suggestions" style="position: absolute; background: white; border: 1px solid #ddd; border-radius: 5px; width: 75%; max-height: 200px; overflow-y: auto; display: none; z-index: 2; margin-top: 5px;"></div>
+                </div>
+            </div>
+            <div class="form-row">
+                <div class="form-group">
+                    <label for="start-date"><i class="far fa-calendar-alt"></i> Од датум:</label>
+                    <input type="date" id="start-date" name="start_date" class="form-input"
+                           value="{{ start_date|default:'' }}">
+                </div>
+                <div class="form-group">
+                    <label for="end-date"><i class="far fa-calendar-alt"></i> До датум:</label>
+                    <input type="date" id="end-date" name="end_date" class="form-input"
+                           value="{{ end_date|default:'' }}">
+                </div>
+            </div>
+            <div class="form-actions">
+                <button type="submit" class="action-button">
+                    <i class="fas fa-chart-line"></i> Прикажи историја
+                </button>
+            </div>
+        </form>
+
+        {% if similar_products and not exact_match %}
+            <!-- Results Section -->
+            <div class="results-container">
+                <!-- Products List -->
+                <div class="products-list">
+                    <h3><i class="fas fa-list-ul"></i> Слични производи во {{ store }}:</h3>
+                    {% for product, similarity in similar_products %}
+                        <div class="product-item">
+                            {% if store == "Vero" %}
+                                <img src="{% static 'images/vero_logo1.png' %}" alt="{{ product }}">
+                            {% elif store == "Ramstore" %}
+                                <img src="{% static 'images/ramstore_logo.png' %}" alt="{{ product }}">
+                            {% elif store == "Reptil" %}
+                                <img src="{% static 'images/reptil_logo.jpg' %}" alt="{{ product }}">
+                            {% else %}
+                                <img src="{% static 'images/no-image.png' %}" alt="{{ product }}">
+                            {% endif %}
+                            <div class="product-info">
+                                <a href="?store={{ store|urlencode }}&query={{ query|urlencode }}&selected_product={{ product|urlencode }}">
+                                    {{ product }}
+                                </a>
+                                <div class="product-meta">
+                                    Сличност: {{ similarity|floatformat:2 }}%
                                 </div>
-                            {% endfor %}
+                            </div>
                         </div>
-                    </div>
-
-                    <!-- Right: Chart -->
-                    <div style="flex: 2; background: #fff; border-radius: 8px; padding: 20px; box-shadow: 0 2px 6px rgba(0,0,0,0.1);"
-                         class="chart-container" style="width: 93%">
-                        {% if matched_name %}
-                            <h3 style="color:#2e652e; margin-bottom: 15px;">Ценовна историја за {{ matched_name }}
-                                во {{ store }}</h3>
+                    {% endfor %}
+                </div>
+
+                <!-- Chart Container -->
+                <div class="chart-container">
+                    {% if matched_name %}
+                        <h3><i class="fas fa-chart-line"></i> Ценовна историја за {{ matched_name }}</h3>
+                        <div class="chart-wrapper">
                             <canvas id="priceChart"></canvas>
-                        {% else %}
-                            <div style="padding: 50px; text-align: center; color: #e65100; border: 1px solid #e65100; border-radius: 8px;"
-                                 class="no-results">
-                                <i class="fas fa-exclamation-circle" style="font-size: 40px; margin-bottom: 15px;"></i>
-                                <p>Не се пронајдени производи за "{{ query }}" во {{ store }}.</p>
-                                <p>Обидете се со различни термини или проверете го пишувањето.</p>
-                            </div>
-                        {% endif %}
-                    </div>
-
-                </div>
-            {% endif %}
-
+                        </div>
+                    {% else %}
+                        <div class="no-results">
+                            <i class="fas fa-exclamation-circle"></i>
+                            <p>Не се пронајдени производи за "{{ query }}" во {{ store }}.</p>
+                        </div>
+                    {% endif %}
+                </div>
+            </div>
+        {% endif %}
+
+        <!-- Stats Summary -->
+        {% if chart_data %}
+        <div class="promo-banner">
+            <div class="banner-content">
+                <h2>Статистички преглед</h2>
+                <p>Клучни метрики за вашиот избор</p>
+            </div>
+            <i class="fas fa-chart-pie"></i>
         </div>
+
+        <div class="stats-summary">
+            <div class="summary-card">
+                <h4>Тековна цена</h4>
+                <div class="value">
+                    {% if current_price %}
+                        {{ current_price }} ден
+                    {% else %}
+                        -
+                    {% endif %}
+                </div>
+                <div class="label">Последна забележана</div>
+            </div>
+            <div class="summary-card">
+                <h4>Најниска цена</h4>
+                <div class="value">
+                    {% if min_price %}
+                        {{ min_price }} ден
+                    {% else %}
+                        -
+                    {% endif %}
+                </div>
+                <div class="label">Во избраниот период</div>
+            </div>
+            <div class="summary-card">
+                <h4>Највисока цена</h4>
+                <div class="value">
+                    {% if max_price %}
+                        {{ max_price }} ден
+                    {% else %}
+                        -
+                    {% endif %}
+                </div>
+                <div class="label">Во избраниот период</div>
+            </div>
+            <div class="summary-card">
+                <h4>Просечна цена</h4>
+                <div class="value">
+                    {% if avg_price %}
+                        {{ avg_price|floatformat:2 }} ден
+                    {% else %}
+                        -
+                    {% endif %}
+                </div>
+                <div class="label">Во избраниот период</div>
+            </div>
+        </div>
+        {% endif %}
     </div>
-
-
-    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-    <script>
+</div>
+
+<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+<script>
+     function transliterateLatinToCyrillic(text) {
+        const map = {
+            'dzh': 'џ', 'dzs': 'џ', 'dsh': 'џ',
+            'zh': 'ж', 'ch': 'ч', 'sh': 'ш', 'lj': 'љ', 'nj': 'њ', 'kj': 'ќ', 'dj': 'ѓ',
+            'zs': 'ж', 'hs': 'ш', 'cx': 'ч', 'sx': 'ш', 'jx': 'ж',
+            'tz': 'ц', 'ts': 'ц', 'tc': 'ц', 'dz': 'џ',
+            'a': 'а', 'b': 'б', 'v': 'в', 'g': 'г', 'd': 'д', 'e': 'е', 'z': 'з', 'i': 'и',
+            'j': 'ј', 'k': 'к', 'l': 'л', 'm': 'м', 'n': 'н', 'o': 'о', 'p': 'п', 'r': 'р',
+            's': 'с', 't': 'т', 'u': 'у', 'f': 'ф', 'h': 'х', 'c': 'ц',
+            'y': 'ј', 'w': 'в', 'x': 'кс', 'q': 'к',
+            'ia': 'ја', 'ie': 'је', 'io': 'јо', 'iu': 'ју'
+        };
+
+        const typoPatterns = [
+            {pattern: /sampon/gi, replace: 'shampon'},
+            {pattern: /cresi/gi, replace: 'creshi'},
+            {pattern: /stipki/gi, replace: 'shtipki'},
+            {pattern: /sch/gi, replace: 'sh'},
+            {pattern: /ck/gi, replace: 'k'},
+            {pattern: /ph/gi, replace: 'f'},
+            {pattern: /th/gi, replace: 't'},
+            {pattern: /([a-z]),([a-z])/gi, replace: '$1$2'},
+            {pattern: /([a-z])\.([a-z])/gi, replace: '$1$2'},
+            {pattern: /([a-z])\1/gi, replace: '$1'}
+        ];
+
+        let normalizedText = text.toLowerCase();
+        for (const {pattern, replace} of typoPatterns) {
+            normalizedText = normalizedText.replace(pattern, replace);
+        }
+
+        let result = '';
+        let i = 0;
+        while (i < normalizedText.length) {
+            if (map[normalizedText.substring(i, i + 3)]) {
+                result += map[normalizedText.substring(i, i + 3)];
+                i += 3;
+            } else if (map[normalizedText.substring(i, i + 2)]) {
+                result += map[normalizedText.substring(i, i + 2)];
+                i += 2;
+            } else if (map[normalizedText[i]]) {
+                result += map[normalizedText[i]];
+                i++;
+            } else {
+                result += normalizedText[i];
+                i++;
+            }
+        }
+        return result;
+    }
+
+    document.addEventListener('DOMContentLoaded', function() {
+        const productInput = document.getElementById('product-input');
+        const statsSuggestions = document.getElementById('stats-suggestions');
+        const statsSearchForm = document.getElementById('statsSearchForm');
+        const storeSelect = document.getElementById('store-select');
+
+        // Handle form submission with transliteration
+        statsSearchForm.addEventListener('submit', function(e) {
+            e.preventDefault();
+
+            const originalQuery = productInput.value.trim();
+            const cyrillicQuery = transliterateLatinToCyrillic(originalQuery);
+            const selectedStore = storeSelect.value;
+
+            // Create hidden inputs for the original and transliterated queries
+            const originalInput = document.createElement('input');
+            originalInput.type = 'hidden';
+            originalInput.name = 'original_query';
+            originalInput.value = originalQuery;
+            statsSearchForm.appendChild(originalInput);
+
+            const cyrillicInput = document.createElement('input');
+            cyrillicInput.type = 'hidden';
+            cyrillicInput.name = 'cyrillic_query';
+            cyrillicInput.value = cyrillicQuery;
+            statsSearchForm.appendChild(cyrillicInput);
+
+            statsSearchForm.submit();
+        });
+
+        // Handle input for suggestions
+        productInput.addEventListener('input', function() {
+            const query = this.value.trim();
+            const store = storeSelect.value;
+
+            if (query.length < 2 || !store) {
+                statsSuggestions.style.display = 'none';
+                return;
+            }
+
+            fetch(`/search-suggestions/?q=${encodeURIComponent(query)}&store=${encodeURIComponent(store)}`)
+                .then(response => response.json())
+                .then(data => {
+                    statsSuggestions.innerHTML = '';
+                    if (data.suggestions.length > 0) {
+                        data.suggestions.forEach(suggestion => {
+                            const div = document.createElement('div');
+                            div.textContent = suggestion;
+                            div.style.padding = '8px 12px';
+                            div.style.cursor = 'pointer';
+                            div.addEventListener('click', function() {
+                                productInput.value = suggestion;
+                                statsSuggestions.style.display = 'none';
+                                statsSearchForm.dispatchEvent(new Event('submit'));
+                            });
+                            statsSuggestions.appendChild(div);
+                        });
+                        statsSuggestions.style.display = 'block';
+                    } else {
+                        statsSuggestions.style.display = 'none';
+                    }
+                });
+        });
+
+        document.addEventListener('click', function(e) {
+            if (!productInput.contains(e.target) && !statsSuggestions.contains(e.target)) {
+                statsSuggestions.style.display = 'none';
+            }
+        });
+
+        productInput.addEventListener('keydown', function(e) {
+            if (e.key === 'Enter') {
+                e.preventDefault();
+                statsSuggestions.style.display = 'none';
+                statsSearchForm.dispatchEvent(new Event('submit'));
+            }
+        });
+
+        storeSelect.addEventListener('change', function() {
+            statsSuggestions.style.display = 'none';
+        });
+
         {% if chart_data %}
             const ctx = document.getElementById('priceChart').getContext('2d');
@@ -391,9 +732,9 @@
                     labels: labels,
                     datasets: [{
-                        label: 'Цена (МКД) {{ start_date }} до {{ end_date }}',
+                        label: 'Цена (МКД)',
                         data: prices,
                         borderColor: '#2e652e',
                         backgroundColor: 'rgba(46, 101, 46, 0.1)',
-                        borderWidth: 2,
+                        borderWidth: 3,
                         tension: 0.1,
                         fill: true
@@ -402,27 +743,11 @@
                 options: {
                     responsive: true,
-                    scales: {
-                        y: {
-                            beginAtZero: false,
-                            grid: {
-                                color: 'rgba(0, 0, 0, 0.05)'
-                            },
-                            ticks: {
-                                color: '#333'
-                            }
-                        },
-                        x: {
-                            grid: {
-                                color: 'rgba(0, 0, 0, 0.05)'
-                            },
-                            ticks: {
-                                color: '#333'
-                            }
-                        }
-                    },
+                    maintainAspectRatio: false,
                     plugins: {
-                        legend: {
-                            labels: {
-                                color: '#2e652e'
+                        tooltip: {
+                            callbacks: {
+                                label: function(context) {
+                                    return 'Цена: ' + context.parsed.y + ' ден';
+                                }
                             }
                         }
@@ -432,137 +757,18 @@
         {% endif %}
 
-        document.querySelector('.stats-form').addEventListener('submit', function (e) {
-            const startDate = document.getElementById('start-date').value;
-            const endDate = document.getElementById('end-date').value;
-
-            if (startDate && endDate && startDate > endDate) {
-                alert('Крајниот датум мора да биде после почетниот датум.');
-                e.preventDefault();
-            }
-        });
-
-        function toggleMobileMenu() {
-            const menu = document.getElementById("mobile-menu");
-            const overlay = document.getElementById("overlay");
-            menu.classList.toggle("open");
-            overlay.classList.toggle("active");
-        }
-
-        document.addEventListener('DOMContentLoaded', function () {
-            // Desktop search elements
-            const searchInput = document.getElementById('searchInput');
-            const suggestionsDiv = document.getElementById('suggestions');
-            const searchForm = document.getElementById('searchForm');
-
-            // Mobile search elements
-            const mobileSearchInput = document.getElementById('mobileSearchInput');
-            const mobileSearchForm = document.getElementById('mobileSearchForm');
-
-            // Extended transliteration with typo correction
-            function transliterateLatinToCyrillic(text) {
-                const map = {
-                    'dzh': 'џ', 'dzs': 'џ', 'dsh': 'џ',
-                    'zh': 'ж', 'ch': 'ч', 'sh': 'ш', 'lj': 'љ', 'nj': 'њ', 'kj': 'ќ', 'dj': 'ѓ',
-                    'zs': 'ж', 'hs': 'ш', 'cx': 'ч', 'sx': 'ш', 'jx': 'ж',
-                    'tz': 'ц', 'ts': 'ц', 'tc': 'ц', 'dz': 'џ',
-                    'a': 'а', 'b': 'б', 'v': 'в', 'g': 'г', 'd': 'д', 'e': 'е', 'z': 'з', 'i': 'и',
-                    'j': 'ј', 'k': 'к', 'l': 'л', 'm': 'м', 'n': 'н', 'o': 'о', 'p': 'п', 'r': 'р',
-                    's': 'с', 't': 'т', 'u': 'у', 'f': 'ф', 'h': 'х', 'c': 'ц',
-                    'y': 'ј', 'w': 'в', 'x': 'кс', 'q': 'к',
-                    'ia': 'ја', 'ie': 'је', 'io': 'јо', 'iu': 'ју'
-                };
-
-                const typoPatterns = [
-                    {pattern: /sampon/gi, replace: 'shampon'},
-                    {pattern: /cresi/gi, replace: 'creshi'},
-                    {pattern: /stipki/gi, replace: 'shtipki'},
-                    {pattern: /sch/gi, replace: 'sh'},
-                    {pattern: /ck/gi, replace: 'k'},
-                    {pattern: /ph/gi, replace: 'f'},
-                    {pattern: /th/gi, replace: 't'},
-                    {pattern: /([a-z]),([a-z])/gi, replace: '$1$2'},
-                    {pattern: /([a-z])\.([a-z])/gi, replace: '$1$2'},
-                    {pattern: /([a-z])\1/gi, replace: '$1'}
-                ];
-
-                let normalizedText = text.toLowerCase();
-                for (const {pattern, replace} of typoPatterns) {
-                    normalizedText = normalizedText.replace(pattern, replace);
-                }
-
-                let result = '';
-                let i = 0;
-                while (i < normalizedText.length) {
-                    if (map[normalizedText.substring(i, i + 3)]) {
-                        result += map[normalizedText.substring(i, i + 3)];
-                        i += 3;
-                    } else if (map[normalizedText.substring(i, i + 2)]) {
-                        result += map[normalizedText.substring(i, i + 2)];
-                        i += 2;
-                    } else if (map[normalizedText[i]]) {
-                        result += map[normalizedText[i]];
-                        i++;
-                    } else {
-                        result += normalizedText[i];
-                        i++;
-                    }
-                }
-                return result;
-            }
-
-            function setupSearch(input, form) {
-                input.addEventListener('input', function () {
-                    const query = this.value.trim();
-                    if (query.length < 2) {
-                        suggestionsDiv.style.display = 'none';
-                        return;
-                    }
-
-                    fetch(`/search-suggestions/?q=${encodeURIComponent(query)}`)
-                        .then(response => response.json())
-                        .then(data => {
-                            suggestionsDiv.innerHTML = '';
-                            if (data.suggestions.length > 0) {
-                                data.suggestions.forEach(suggestion => {
-                                    const div = document.createElement('div');
-                                    div.textContent = suggestion;
-                                    div.style.padding = '5px 10px';
-                                    div.style.cursor = 'pointer';
-                                    div.addEventListener('click', function () {
-                                        input.value = transliterateLatinToCyrillic(suggestion);
-                                        suggestionsDiv.style.display = 'none';
-                                        form.submit();
-                                    });
-                                    suggestionsDiv.appendChild(div);
-                                });
-                                suggestionsDiv.style.display = 'block';
-                            } else {
-                                suggestionsDiv.style.display = 'none';
-                            }
-                        });
-                });
-
-                input.addEventListener('keydown', function (e) {
-                    if (e.key === 'Enter') {
-                        e.preventDefault();
-                        suggestionsDiv.style.display = 'none';
-                        input.value = transliterateLatinToCyrillic(input.value);
-                        form.submit();
-                    }
-                });
-            }
-
-            setupSearch(searchInput, searchForm);
-            setupSearch(mobileSearchInput, mobileSearchForm);
-
-            document.addEventListener('click', function (e) {
-                if (!searchInput.contains(e.target) && !suggestionsDiv.contains(e.target) &&
-                    !mobileSearchInput.contains(e.target)) {
-                    suggestionsDiv.style.display = 'none';
+        const startDate = document.getElementById('start-date');
+        const endDate = document.getElementById('end-date');
+
+        if (startDate && endDate) {
+            statsSearchForm.addEventListener('submit', function(e) {
+                if (startDate.value && endDate.value && startDate.value > endDate.value) {
+                    alert('Крајниот датум мора да биде после почетниот датум.');
+                    e.preventDefault();
                 }
             });
-        });
-    </script>
-    </body>
+        }
+    });
+</script>
+</body>
 {% endblock %}
 </html>
Index: main/urls.py
===================================================================
--- main/urls.py	(revision cd9f2f4e4afae458d5578788c887892d76ca8947)
+++ main/urls.py	(revision f84285e7b16852eab969772ebde9afe1b04fc8ae)
@@ -6,5 +6,4 @@
 
 from .views import custom_logout, remove_from_list, get_store_products, stats_view
-
 
 # from .views import test_db_connection
@@ -42,5 +41,6 @@
     path('toggle-favorite/', views.toggle_favorite, name='toggle_favorite'),
     path('favorites/', views.favorites_list, name='favorites_list'),
-
+    # path('profile/', views.profile, name='profile'),
+    path('get-favorites/', views.get_favorites, name='get_favorites'),
 
 ]
Index: main/utils/similarity.py
===================================================================
--- main/utils/similarity.py	(revision cd9f2f4e4afae458d5578788c887892d76ca8947)
+++ main/utils/similarity.py	(revision f84285e7b16852eab969772ebde9afe1b04fc8ae)
@@ -1,41 +1,2 @@
-# import pickle
-# import numpy as np
-# from sentence_transformers import SentenceTransformer
-# from sklearn.metrics.pairwise import cosine_similarity
-# from .db import get_all_products
-#
-#
-# model = SentenceTransformer('sentence-transformers/all-MiniLM-L6-v2')
-#
-# def get_similar_products(product_name, product_category, top_n=5):
-#     query_embedding = model.encode([product_name])
-#
-#     products = get_all_products()
-#
-#     similarities = []
-#
-#     for p in products:
-#         try:
-#             if p['category'] != product_category or p['name'] == product_name:
-#                 continue
-#
-#             embedding = pickle.loads(p['embedding'])
-#             embedding = np.array(embedding).reshape(1, -1)
-#             sim = cosine_similarity(query_embedding, embedding)[0][0]
-#
-#             similarities.append({
-#                 'id': p['id'],
-#                 'name': p['name'],
-#                 'similarity': round(sim, 2),
-#                 'price': p.get('price'),
-#                 'store': p.get('store'),
-#                 'image': p.get('image_url'),
-#
-#             })
-#
-#         except Exception as e:
-#             continue
-#
-#     return sorted(similarities, key=lambda x: x['similarity'], reverse=True)[:top_n]
 import pickle
 import numpy as np
@@ -46,12 +7,9 @@
 from .db import get_all_products
 
-
 model = SentenceTransformer('sentence-transformers/all-MiniLM-L6-v2')
 
-# Define unimportant words to ignore in matching
 STOPWORDS = {
-    "парче", "свежо", "парчиња", "грам", "г.", "ком", "комад", "број", "бр", "парчиња", "(Р)",
+    "парче", "свежо", "парчиња", "грам", "г.", "ком", "комад", "број", "бр", "парчиња", "(Р)","крекери","чоколадо","kg","кг","/","млад","млади",
 }
-
 
 def get_similar_products(product_name, product_category, top_n=5):
@@ -59,5 +17,4 @@
     products = get_all_products()
 
-    # Step 1: Find the store of the original product
     current_product_store = None
     for p in products:
@@ -66,8 +23,6 @@
             break
 
-    # Step 2: Filter products in the same category and different name
     filtered_products = [p for p in products if p['category'] == product_category and p['name'] != product_name]
 
-    # Step 3: Build keyword frequency across products in this category
     all_keywords = []
     for p in filtered_products:
@@ -98,15 +53,13 @@
                     bonus += 5
 
-            # Embedding similarity
             embedding = pickle.loads(p['embedding'])
             embedding = np.array(embedding).reshape(1, -1)
             sim = cosine_similarity(query_embedding, embedding)[0][0]
 
-            # 🆕 Store bonus/penalty
             store_bonus = 0
             if p.get('store') != current_product_store:
-                store_bonus += 10  # prioritize different stores
+                store_bonus += 10
             else:
-                store_bonus -= 5  # slightly penalize same-store products
+                store_bonus -= 5
 
             total_score = keyword_score + bonus + (sim * 5) + store_bonus
@@ -130,8 +83,4 @@
 
 def tokenize(name):
-    """
-    Tokenize product names, lowercase, clean, ignore short words and stopwords.
-    Also captures numbers + volume (e.g., 1л, 0.5л).
-    """
     name = name.lower()
     tokens = re.findall(r'\w+(?:\.\d+)?л|\d+|\w+', name)
Index: main/views.py
===================================================================
--- main/views.py	(revision cd9f2f4e4afae458d5578788c887892d76ca8947)
+++ main/views.py	(revision f84285e7b16852eab969772ebde9afe1b04fc8ae)
@@ -5,4 +5,7 @@
 from django.shortcuts import render, redirect
 from django.contrib.auth import login
+import transliterate  # pip install transliterate
+
+
 from .forms import RegisterForm
 from django.contrib.auth import logout
@@ -111,13 +114,29 @@
 # def base(response):
 #     return render(response, "main/base.html")
+from django.db.models import Q
+from django.utils import timezone
+from django.db.models import Case, When, DecimalField
+from django.core.paginator import Paginator
+
+
 def product_list(request):
     products = Products2.objects.all()
-    search_query = request.GET.get('search')
-
-    # If there's a search query, find matching products
-    if search_query:
-        products = products.filter(name__icontains=search_query)
-
-    # Apply filters (unchanged from your original code)
+    search_query = request.GET.get('search', '').strip()
+    original_query = request.GET.get('original_search', '').strip()
+    cyrillic_query = request.GET.get('cyrillic_search', '').strip()
+
+    # For backward compatibility with old search URLs
+    if not original_query and search_query:
+        original_query = search_query
+        cyrillic_query = transliterate_latin_to_cyrillic(search_query)
+
+    # If there's a search query, find matching products in both Latin and Cyrillic
+    if original_query:
+        products = products.filter(
+            Q(name__icontains=original_query) |
+            Q(name__icontains=cyrillic_query)
+        )
+
+    # Rest of your existing filters remain unchanged
     selected_categories = request.GET.getlist('category')
     if selected_categories:
@@ -179,5 +198,5 @@
     # Get similar products if there's a search query and results
     similar_products = None
-    if search_query and page_obj:
+    if original_query and page_obj:
         # Get the first product from search results as reference
         reference_product = page_obj[0]
@@ -208,9 +227,29 @@
         'selected_stores': selected_stores,
         'selected_sort': sort,
-        'search_query': search_query,
+        'search_query': original_query or search_query,  # Show the original query in the UI
         'fav_ids': fav_ids,
         'similar_products': similar_products,
     }
     return render(request, 'main/product_list.html', context)
+
+
+# Helper function for transliteration
+def transliterate_latin_to_cyrillic(text):
+    mapping = {
+        'dzh': 'џ', 'dzs': 'џ', 'dsh': 'џ',
+        'zh': 'ж', 'ch': 'ч', 'sh': 'ш', 'lj': 'љ', 'nj': 'њ', 'kj': 'ќ', 'dj': 'ѓ',
+        'zs': 'ж', 'hs': 'ш', 'cx': 'ч', 'sx': 'ш', 'jx': 'ж',
+        'tz': 'ц', 'ts': 'ц', 'tc': 'ц', 'dz': 'џ',
+        'a': 'а', 'b': 'б', 'v': 'в', 'g': 'г', 'd': 'д', 'e': 'е', 'z': 'з', 'i': 'и',
+        'j': 'ј', 'k': 'к', 'l': 'л', 'm': 'м', 'n': 'н', 'o': 'о', 'p': 'п', 'r': 'р',
+        's': 'с', 't': 'т', 'u': 'у', 'f': 'ф', 'h': 'х', 'c': 'ц',
+        'y': 'ј', 'w': 'в', 'x': 'кс', 'q': 'к',
+        'ia': 'ја', 'ie': 'је', 'io': 'јо', 'iu': 'ју'
+    }
+
+    text = text.lower()
+    for lat, cyr in mapping.items():
+        text = text.replace(lat, cyr)
+    return text
 
 from django.contrib.auth import authenticate, login
@@ -239,5 +278,4 @@
     logout(request)
 
-    # Replicate the home view logic for stores_with_products
     categories = Products2.objects.exclude(
         Q(category__isnull=True) | Q(category__exact='')
@@ -257,5 +295,5 @@
         popust_filtered = store_filtered.filter(popust=True)
         products = popust_filtered.order_by('-price')[:3]
-        if products.exists():  # Only add if there are products
+        if products.exists():
             stores_with_products.append({
                 'name': cleaned,
@@ -281,10 +319,26 @@
 def create_list(request):
     if request.method == 'POST':
-        list_name = request.POST.get('list_name')
-        if list_name:
+        list_name = request.POST.get('list_name', '').strip()
+
+        # Transliterate Cyrillic to Latin if needed
+        try:
+            if any(ord(char) > 127 for char in list_name):  # Check for non-ASCII
+                list_name = transliterate.translit(list_name, reversed=True)
+        except:
+            pass  # Fall through to original name
+
+        try:
             ShoppingList.objects.create(user=request.user, name=list_name)
-            return redirect('view_lists')
-    return redirect('view_lists')
-
+            return JsonResponse({'success': True})
+        except Exception as e:
+            return JsonResponse({
+                'success': False,
+                'error': str(e)
+            })
+
+    return JsonResponse({
+        'success': False,
+        'error': 'Invalid request method'
+    })
 
 
@@ -467,19 +521,28 @@
     similar_products = []
     exact_match = False
-
-    if store and query:
-        with connection.cursor() as cursor:
-            cursor.execute("""
-                SELECT DISTINCT name 
-                FROM product_history2 
-                WHERE store LIKE %s AND name = %s
-                LIMIT 1
-            """, ['%' + store + '%', query])
-            exact_match_result = cursor.fetchone()
-
-            if exact_match_result:
-                matched_name = exact_match_result[0]
-                exact_match = True
-            else:
+    current_price = None
+    min_price = None
+    max_price = None
+    avg_price = None
+
+    if store and (query or selected_product):
+        # First check for exact match if we have a query (not selected product)
+        if query and not selected_product:
+            with connection.cursor() as cursor:
+                cursor.execute("""
+                    SELECT DISTINCT name 
+                    FROM product_history2 
+                    WHERE store LIKE %s AND name = %s
+                    LIMIT 1
+                """, ['%' + store + '%', query])
+                exact_match_result = cursor.fetchone()
+
+                if exact_match_result:
+                    matched_name = exact_match_result[0]
+                    exact_match = True
+
+        # If no exact match or we have selected_product, find similar products
+        if not exact_match:
+            with connection.cursor() as cursor:
                 cursor.execute("""
                     SELECT DISTINCT name FROM product_history2 
@@ -488,33 +551,28 @@
                 all_store_products = [row[0] for row in cursor.fetchall()]
 
+                search_term = selected_product if selected_product else query
                 similar_products = []
 
-                string_matches = get_close_matches(
-                    query,
-                    all_store_products,
-                    n=10,
-                    cutoff=0.3
-                )
-
-                query_lower = query.lower()
-                contains_matches = [
-                                       p for p in all_store_products
-                                       if query_lower in p.lower()
-                                   ][:10]
-
-                all_matches = list(set(string_matches + contains_matches))
-
-                if len(all_matches) < 5:
-                    all_matches.extend([
+                if search_term:
+                    from difflib import get_close_matches
+                    string_matches = get_close_matches(
+                        search_term,
+                        all_store_products,
+                        n=10,
+                        cutoff=0.3
+                    )
+
+                    query_lower = search_term.lower()
+                    contains_matches = [
                                            p for p in all_store_products
-                                           if p not in all_matches
-                                       ][:10 - len(all_matches)])
-
-                similar_products = [(p, 1.0) for p in all_matches[:10]]
-
-        if selected_product:
-            matched_name = selected_product
-
-        if matched_name:
+                                           if query_lower in p.lower()
+                                       ][:10]
+
+                    all_matches = list(set(string_matches + contains_matches))
+                    similar_products = [(p, 100) for p in all_matches[:10]]  # Using 100% for all for simplicity
+
+        # If we have a selected product or exact match, get price history
+        product_to_search = selected_product if selected_product else matched_name
+        if product_to_search:
             base_sql = """
                 SELECT scraped_date, price 
@@ -522,7 +580,6 @@
                 WHERE name = %s AND store LIKE %s
             """
-            params = [matched_name, '%' + store + '%']
-
-            # Add date range conditions if provided
+            params = [product_to_search, '%' + store + '%']
+
             if start_date_obj and end_date_obj:
                 base_sql += " AND scraped_date BETWEEN %s AND %s"
@@ -545,7 +602,14 @@
                 } for row in result]
 
-    return render(request, 'main/stats.html', {
+                if result:
+                    prices = [float(row[1]) for row in result]
+                    current_price = prices[-1]
+                    min_price = min(prices)
+                    max_price = max(prices)
+                    avg_price = sum(prices) / len(prices)
+
+    context = {
         'chart_data': chart_data,
-        'matched_name': matched_name,
+        'matched_name': matched_name or selected_product,
         'query': query,
         'store': store,
@@ -554,6 +618,16 @@
         'start_date': start_date,
         'end_date': end_date,
-    })
-
+        'current_price': current_price,
+        'min_price': min_price,
+        'max_price': max_price,
+        'avg_price': avg_price,
+    }
+
+    # Debug output - remove in production
+    print("Context being sent to template:")
+    for key, value in context.items():
+        print(f"{key}: {value}")
+
+    return render(request, 'main/stats.html', context)
 def get_driving_distance(user_lat, user_lon, store_lat, store_lon, api_key):
     url = "https://maps.googleapis.com/maps/api/distancematrix/json"
@@ -775,37 +849,78 @@
 
 
-@login_required
+@require_POST
 def toggle_favorite(request):
-    if request.method == 'POST':
-        try:
-            data = json.loads(request.body)
-            product_id = data.get('product_id')
-
-            product = Products2.objects.get(id=product_id)
-            favorite, created = Favorite.objects.get_or_create(
+    # Handle unauthenticated users
+    if not request.user.is_authenticated:
+        return JsonResponse({
+            'success': False,
+            'message': 'Authentication required',
+            'login_required': True,
+            'login_url': f'/login/?next={request.META.get("HTTP_REFERER", "/")}'
+        }, status=401)
+
+    try:
+        data = json.loads(request.body)
+        product_id = data.get('product_id')
+
+        if not product_id:
+            return JsonResponse({'success': False, 'message': 'Product ID is required'}, status=400)
+
+        product = Products2.objects.get(id=product_id)
+
+        # Check if favorite exists
+        favorite_exists = Favorite.objects.filter(
+            user=request.user,
+            product=product
+        ).exists()
+
+        if favorite_exists:
+            # Delete if exists
+            Favorite.objects.filter(
+                user=request.user,
+                product=product
+            ).delete()
+            return JsonResponse({
+                'success': True,
+                'action': 'removed',
+                'is_favorite': False,
+                'product_id': product_id
+            })
+        else:
+            # Create if doesn't exist
+            Favorite.objects.create(
                 user=request.user,
                 product=product
             )
-
-            if not created:
-                favorite.delete()
-                return JsonResponse({'success': True, 'is_favorite': False})
-
-            return JsonResponse({'success': True, 'is_favorite': True})
-
-        except Products2.DoesNotExist:
-            return JsonResponse({'success': False, 'message': 'Product not found'})
-        except Exception as e:
-            return JsonResponse({'success': False, 'message': str(e)})
-
-    return JsonResponse({'success': False, 'message': 'Invalid request'})
-
-@login_required
-def get_favorites(request):
-    favorites = Favorite.objects.filter(user=request.user).values_list('product_id', flat=True)
-    return JsonResponse({'favorites': list(favorites)})
-
+            return JsonResponse({
+                'success': True,
+                'action': 'added',
+                'is_favorite': True,
+                'product_id': product_id
+            })
+
+    except Products2.DoesNotExist:
+        return JsonResponse({
+            'success': False,
+            'message': 'Product not found'
+        }, status=404)
+    except Exception as e:
+        return JsonResponse({
+            'success': False,
+            'message': str(e)
+        }, status=500)
 @login_required
 def favorites_list(request):
     favorites = Favorite.objects.filter(user=request.user).select_related('product')
     return render(request, 'main/favorites.html', {'favorites': favorites})
+
+@login_required
+def get_favorites(request):
+    if request.user.is_authenticated:
+        favorites = Favorite.objects.filter(user=request.user).values_list('product_id', flat=True)
+        return JsonResponse({
+            'success': True,
+            'favorites': list(favorites)
+        })
+    return JsonResponse({'success': False, 'message': 'User not authenticated'})
+
