Index: .env
===================================================================
--- .env	(revision fef3b4d766831b584534962ac137a311239ecc91)
+++ .env	(revision fef3b4d766831b584534962ac137a311239ecc91)
@@ -0,0 +1,3 @@
+GOOGLE_MAPS_API_KEY=AIzaSyDxr8vc4j8iJ7ZTPP2Z9TuaiKupvgofqbI
+OPENAI_API_KEY = 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
+HUGGINGFACE_TOKEN=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
Index: DjangoProject3/settings.py
===================================================================
--- DjangoProject3/settings.py	(revision 52c9c87d52fd2d6be3621074ff2ed6eac3c913be)
+++ DjangoProject3/settings.py	(revision fef3b4d766831b584534962ac137a311239ecc91)
@@ -12,4 +12,7 @@
 
 from pathlib import Path
+import os
+from decouple import config
+from dotenv import load_dotenv
 
 # Build paths inside the project like this: BASE_DIR / 'subdir'.
@@ -21,4 +24,11 @@
 # SECURITY WARNING: keep the secret key used in production secret!
 SECRET_KEY = 'django-insecure-y5s^rl54gumkkg1m&uwin81&#jb2uy712ai$1tvrt*190+fpo8'
+
+load_dotenv()  # loads .env
+GOOGLE_MAPS_API_KEY = os.getenv("GOOGLE_MAPS_API_KEY")
+# HUGGINGFACE_TOKEN = config('HUGGINGFACE_TOKEN')
+HUGGINGFACE_TOKEN="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"
+
+
 
 # SECURITY WARNING: don't run with debug turned on in production!
@@ -36,9 +46,22 @@
     'django.contrib.staticfiles',
     'main.apps.MainConfig',
+    'social_django',
 ]
 
 AUTHENTICATION_BACKENDS = [
     'django.contrib.auth.backends.ModelBackend',
+    'social_core.backends.google.GoogleOAuth2',
+    'social_core.backends.facebook.FacebookOAuth2',
+    'django.contrib.auth.backends.ModelBackend',
 ]
+# Add to bottom of settings.py
+SOCIAL_AUTH_FACEBOOK_KEY = 'your-facebook-app-id'       # App ID
+SOCIAL_AUTH_FACEBOOK_SECRET = 'your-facebook-app-secret'  # App Secret
+SOCIAL_AUTH_FACEBOOK_SCOPE = ['email', 'public_profile']
+SOCIAL_AUTH_FACEBOOK_PROFILE_EXTRA_PARAMS = {'fields': 'id, name, email'}
+
+SOCIAL_AUTH_GOOGLE_OAUTH2_KEY = 'your-google-client-id'
+SOCIAL_AUTH_GOOGLE_OAUTH2_SECRET = 'your-google-client-secret'
+SOCIAL_AUTH_GOOGLE_OAUTH2_SCOPE = ['email', 'profile']
 
 LOGIN_REDIRECT_URL = 'home'  # Redirect to home after login
Index: main/forms.py
===================================================================
--- main/forms.py	(revision 52c9c87d52fd2d6be3621074ff2ed6eac3c913be)
+++ main/forms.py	(revision fef3b4d766831b584534962ac137a311239ecc91)
@@ -9,2 +9,8 @@
         model = User
         fields = ["username", "email", "password1", "password2"]
+
+class IngredientForm(forms.Form):
+    ingredients = forms.CharField(
+        label="Што имаш во фрижидерот?",
+        widget=forms.Textarea(attrs={"placeholder": "Јајца, млеко, брашно...", "rows": 5})
+    )
Index: main/migrations/0005_remove_shoppinglistitem_checked_and_more.py
===================================================================
--- main/migrations/0005_remove_shoppinglistitem_checked_and_more.py	(revision fef3b4d766831b584534962ac137a311239ecc91)
+++ main/migrations/0005_remove_shoppinglistitem_checked_and_more.py	(revision fef3b4d766831b584534962ac137a311239ecc91)
@@ -0,0 +1,21 @@
+# Generated by Django 5.1.7 on 2025-06-25 06:28
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('main', '0004_remove_product_store_shoppinglistitem_checked_and_more'),
+    ]
+
+    operations = [
+        migrations.RemoveField(
+            model_name='shoppinglistitem',
+            name='checked',
+        ),
+        migrations.RemoveField(
+            model_name='shoppinglistitem',
+            name='completed',
+        ),
+    ]
Index: main/models.py
===================================================================
--- main/models.py	(revision 52c9c87d52fd2d6be3621074ff2ed6eac3c913be)
+++ main/models.py	(revision fef3b4d766831b584534962ac137a311239ecc91)
@@ -22,10 +22,10 @@
 class Products2(models.Model):
     name = models.CharField(max_length=255)
-    price = models.DecimalField(max_digits=10, decimal_places=2)  # This will be the "old_price"
+    price = models.DecimalField(max_digits=10, decimal_places=2)
     actual_price = models.DecimalField(
         max_digits=10,
         decimal_places=2,
         default=0.00  # Add this line
-    )  # Current price (discounted if applicable)
+    )
     category = models.CharField(max_length=100)
     image_url = models.CharField(max_length=255)
@@ -34,5 +34,5 @@
     popust = models.BooleanField(default=False)
     popust_date = models.DateField(null=True, blank=True)
-    embedding = models.BinaryField()  # Make sure this is a BinaryField to store pickled embeddings
+    embedding = models.BinaryField()
 
 
@@ -52,4 +52,6 @@
     name = models.CharField(max_length=100)
     created_at = models.DateTimeField(auto_now_add=True)
+    db_collation = 'utf8mb4_unicode_ci'
+
 
 class ShoppingListItem(models.Model):
Index: main/templates/main/base.html
===================================================================
--- main/templates/main/base.html	(revision 52c9c87d52fd2d6be3621074ff2ed6eac3c913be)
+++ main/templates/main/base.html	(revision fef3b4d766831b584534962ac137a311239ecc91)
@@ -1,2 +1,3 @@
+{% load category_filters %}
 {% load custom_filters %}
 {% load static %}
@@ -5,5 +6,4 @@
 <html lang="en">
 <head>
-    {% load static %}
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -12,5 +12,5 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
     <style>
-        /* Common Styles (same as product_list) */
+        /* Common Styles */
         body {
             font-family: Arial, sans-serif;
@@ -20,109 +20,483 @@
             flex-direction: column;
             min-height: 100vh;
-
-        }
-
-        /* Category Carousel */
-        .category-carousel {
-            max-width: 1200px;
-            margin: 0 auto 40px;
-            padding: 0 20px;
-        }
-
-        .category-carousel h2 {
-            text-align: center;
-            margin-bottom: 20px;
-            font-size: 2rem;
-        }
-
-        .categories {
-            display: flex;
-            gap: 20px; /* Increased gap */
-            overflow-x: auto;
-            padding: 20px 10px; /* More padding */
-            scrollbar-width: thin;
-        }
-
-        /* Improved Category Cards */
-        .category-card {
-            min-width: 200px; /* Increased width */
-            height: 250px; /* Increased height */
+            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;
-            overflow: hidden;
-            border-radius: 12px;
-            transition: all 0.3s ease;
-            flex-shrink: 0; /* Prevent shrinking */
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-        }
-
-
-        .category-card img {
-            width: 100%;
-            height: 100%;
-            object-fit: cover; /* Ensures image covers whole area */
-            transition: transform 0.5s ease;
-        }
-
-        .category-card:hover img {
-            transform: scale(1.1); /* Slight zoom on hover */
-        }
-
-        .category-name {
+        }
+
+        .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;
+            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%;
+        }
+
+        /* Main Content */
+        .main-content {
+            display: flex;
+            max-width: 1200px;
+            margin: 20px auto;
+            padding: 0 15px;
+            gap: 20px;
+        }
+
+        /* Left Sidebar */
+        .left-sidebar {
+            width: 250px;
+        }
+
+        .sidebar-section {
+            background-color: white;
+            border-radius: 8px;
+            padding: 15px;
+            margin-bottom: 20px;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        }
+
+        .sidebar-section h3 {
+            color: #2e652e;
+            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;
+        }
+
+        /* Main Content Area */
+        .content-area {
+            flex-grow: 1;
+        }
+
+        /* Banner */
+        .banner-container {
+            display: flex;
+            gap: 20px;
+            margin-bottom: 20px;
+        }
+
+        .banner-gallery {
+            position: relative;
+            width: 100%;
+            height: 300px;
+            overflow: hidden;
+            border-radius: 8px;
+        }
+
+        .banner-nav {
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 40px;
+            height: 40px;
+            background-color: rgba(255, 255, 255, 0.3);
+            border: none;
+            border-radius: 50%;
+            color: white;
+            font-size: 20px;
+            cursor: pointer;
+            z-index: 10;
+            transition: all 0.3s ease;
+        }
+
+        .banner-nav:hover {
+            background-color: rgba(255, 255, 255, 0.7);
+            color: #2e652e;
+        }
+
+        .banner-nav.prev {
+            left: 20px;
+        }
+
+        .banner-nav.next {
+            right: 20px;
+        }
+
+        .banner-dots {
+            position: absolute;
+            bottom: 20px;
+            left: 0;
             right: 0;
-            background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
+            display: flex;
+            justify-content: center;
+            gap: 10px;
+            z-index: 10;
+        }
+
+        .banner-dot {
+            width: 12px;
+            height: 12px;
+            border-radius: 50%;
+            background-color: rgba(255, 255, 255, 0.5);
+            border: none;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+
+        .banner-dot.active {
+            background-color: white;
+            transform: scale(1.2);
+        }
+
+        /* 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-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;
+        }
+
+        .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 */
+        .categories-section {
+            background-color: white;
+            border-radius: 8px;
+            padding: 20px;
+            margin-bottom: 20px;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        }
+
+        .section-title {
+            font-size: 1.5rem;
+            font-weight: 600;
+            margin-bottom: 20px;
+            color: #2e652e;
+        }
+
+        .categories-grid {
+            display: grid;
+            grid-template-columns: repeat(6, 1fr);
+            gap: 15px;
+        }
+
+        .category-card {
+            text-align: center;
+            padding: 15px 10px;
+            border-radius: 4px;
+            background-color: #f9f9f9;
+            transition: all 0.3s ease;
+        }
+
+        .category-card:hover {
+            background-color: #e9f7fe;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        }
+
+        .category-card img {
+            width: 40px;
+            height: 40px;
+            margin-bottom: 10px;
+        }
+
+        .category-card span {
+            font-size: 12px;
+            display: block;
+        }
+
+        /* Market Flyers */
+        .market-flyers {
+            background-color: white;
+            border-radius: 8px;
+            padding: 20px;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        }
+
+        .flyers-container {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 20px;
+        }
+
+        .flyer-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;
+        }
+
+        .flyer-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+        }
+
+        .flyer-header {
             padding: 15px;
+            background: linear-gradient(135deg, #549249, #3a6b33);
             text-align: center;
+            color: white;
+        }
+
+        .flyer-header h3 {
+            margin: 0;
+            font-size: 1.2rem;
+            font-weight: 600;
+        }
+
+        .flyer-products {
+            padding: 15px;
+        }
+
+        .flyer-product {
+            display: flex;
+            align-items: center;
+            gap: 15px;
+            padding: 10px 0;
+            border-bottom: 1px solid #eee;
+        }
+
+        .flyer-product img {
+            width: 60px;
+            height: 60px;
+            object-fit: cover;
+            border-radius: 5px;
+        }
+
+        .product-info {
+            flex: 1;
+        }
+
+        .product-name {
+            display: block;
+            font-weight: 500;
+            margin-bottom: 5px;
+            font-size: 14px;
+        }
+
+        .product-price {
+            display: flex;
+            gap: 10px;
+            font-size: 14px;
+        }
+
+        .old-price {
+            text-decoration: line-through;
+            color: #999;
+        }
+
+        .new-price {
+            color: #e74c3c;
             font-weight: bold;
-            font-size: 1.1rem;
-            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
-        }
-
-
-        /* Hide scrollbar but keep functionality */
-        .categories::-webkit-scrollbar {
-            height: 8px;
-        }
-
-        .categories::-webkit-scrollbar-track {
-            background: #f1f1f1;
-            border-radius: 10px;
-        }
-
-        .categories::-webkit-scrollbar-thumb {
-            background: #888;
-            border-radius: 10px;
-        }
-
-        .categories::-webkit-scrollbar-thumb:hover {
-            background: #555;
-        }
-
-        /* Discounted Products Section */
-        .discounted-products {
-            max-width: 1200px;
-            margin: 0 auto 40px;
-            padding: 0 20px;
-        }
-
-        .discounted-products h2 {
-            text-align: center;
-            margin-bottom: 20px;
-            font-size: 2rem;
-        }
-
-        .grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(250px, 3fr));
-            gap: 20px;
-        }
-
+        }
+
+        .view-all-btn {
+            width: 100%;
+            padding: 10px;
+            background: #cb7e31;
+            color: white;
+            border: none;
+            font-weight: bold;
+            cursor: pointer;
+            transition: background 0.3s;
+            border-radius: 4px;
+            margin-top: 10px;
+        }
+
+        .view-all-btn:hover {
+            background: #a56629;
+        }
 
         /* Footer */
         footer {
-            background-color: #333;
+            background: linear-gradient(135deg, #2e652e, #1f3f1f);
             color: white;
             padding: 40px 20px;
@@ -134,5 +508,5 @@
             margin: 0 auto;
             display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
             gap: 30px;
         }
@@ -141,15 +515,25 @@
             margin-bottom: 20px;
             font-size: 1.2rem;
+            color: #fdd835;
         }
 
         .footer-section p, .footer-section a {
-            color: #bbb;
+            color: #ddd;
             margin-bottom: 10px;
             display: block;
             text-decoration: none;
+            transition: color 0.3s ease;
+            font-size: 14px;
         }
 
         .footer-section a:hover {
-            color: white;
+            color: #fff;
+            text-decoration: underline;
+        }
+
+        .footer-section.social a {
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
         }
 
@@ -158,6 +542,143 @@
             padding-top: 20px;
             margin-top: 20px;
-            border-top: 1px solid #444;
+            border-top: 1px solid rgba(255, 255, 255, 0.2);
             color: #bbb;
+            font-size: 0.9rem;
+        }
+
+        /* 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;
         }
 
@@ -176,4 +697,16 @@
             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;
         }
 
@@ -187,691 +720,5 @@
         }
 
-
-        @media (max-width: 768px) {
-            .category-carousel {
-                padding: 0 10px;
-            }
-
-            .category-card {
-                min-width: 150px;
-                height: 180px;
-            }
-
-            .category-name {
-                padding: 10px;
-                font-size: 0.9rem;
-            }
-        }
-
-        @media (max-width: 480px) {
-            .grid {
-                grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-                gap: 15px;
-            }
-        }
-
-        @media (max-width: 600px) {
-            .footer-content {
-                grid-template-columns: 1fr;
-                gap: 20px;
-            }
-
-            .footer-section {
-                text-align: center;
-            }
-        }
-
-        @media (max-width: 768px) {
-            .message-container {
-                top: 10px;
-                right: 10px;
-                left: 10px;
-                max-width: none;
-            }
-        }
-
-
-        /* Add these to your existing styles */
-        .category-card {
-            -webkit-tap-highlight-color: transparent;
-        }
-
-
-        @media (max-width: 480px) {
-            /* Carousel adjustments */
-            .categories {
-                padding: 15px 5px;
-                gap: 10px;
-                -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
-            }
-
-            .category-card {
-                min-width: 120px;
-                height: 160px;
-            }
-
-            .category-name {
-                padding: 8px;
-                font-size: 0.8rem;
-            }
-
-            /* Force show scrollbar on mobile */
-            .categories {
-                scrollbar-width: auto;
-                -ms-overflow-style: auto;
-            }
-
-            .categories::-webkit-scrollbar {
-                height: 5px;
-            }
-        }
-
-
-        /* Prevent zoom on form inputs */
-        @media (max-width: 768px) {
-            input, select, textarea {
-                font-size: 16px;
-            }
-        }
-
-        .category-carousel {
-            max-width: 1200px;
-            margin: 0 auto 40px;
-            padding: 0 15px; /* Changed from 20px */
-            width: 100%;
-            box-sizing: border-box;
-        }
-
-        @media (max-width: 768px) {
-            .category-carousel {
-                padding: 0 10px;
-            }
-
-            .categories {
-                padding: 15px 5px;
-                gap: 8px;
-                scroll-snap-type: x mandatory;
-            }
-
-            .category-card {
-                min-width: 140px;
-                height: 160px;
-                scroll-snap-align: start;
-            }
-
-            .category-name {
-                padding: 8px;
-                font-size: 0.9rem;
-            }
-        }
-
-        #logo {
-            font-size: 24px;
-            font-weight: bold;
-            margin-right: auto;
-        }
-
-
-        #other a:hover, #other button:hover {
-            color: lightgreen !important; /* Light green on hover */
-        }
-
-
-        #login:hover {
-            color: #cb7e31 !important;
-        {#background-color: #cb7e31 !important;#}{#padding: 10px;#}{#border-radius: 10px;/* Maintain white text on hover */#}
-        }
-
-        #signup:hover {
-            color: black !important; /* Maintain white text on hover */
-        }
-
-        #signup {
-            background-color: #cb7e31;
-            padding: 10px;
-        }
-
-        /* Category Carousel Section */
-        .category-carousel {
-            padding: 50px 20px;
-            background-color: #f8f8f8;
-            text-align: center;
-        }
-
-        /* Carousel Header */
-        .category-carousel h2 {
-            font-size: 2.5rem;
-            font-weight: 600;
-            margin-bottom: 30px;
-            color: #333;
-        }
-
-        /* Categories Container */
-        .categories {
-            display: flex;
-            transition: transform 0.5s ease;
-            gap: 20px;
-        }
-
-        /* Category Card */
-        .category-card {
-            position: relative;
-            max-width: 250px;
-            width: 100%;
-            height: 250px;
-            border-radius: 10px;
-            overflow: hidden;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-            transition: transform 0.3s ease, box-shadow 0.3s ease;
-            text-decoration: none;
-        }
-
-        .category-card img {
-            width: 100%;
-            height: 100%;
-            object-fit: cover;
-            transition: opacity 0.3s ease;
-        }
-
-        /* Category Name Overlay */
-        .category-name {
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            padding: 12px;
-            font-size: 1.1rem;
-            text-align: center;
-            color: white;
-            background: rgba(0, 0, 0, 0.6);
-            font-weight: bold;
-        }
-
-        /* Hover Effects */
-        .category-card:hover {
-            transform: translateY(-8px);
-            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
-        }
-
-        .category-card:hover img {
-            opacity: 0.8;
-        }
-
-        /* Carousel Navigation Buttons */
-        .carousel-prev, .carousel-next {
-            position: absolute;
-            top: 50%;
-            transform: translateY(-50%);
-            background-color: rgba(0, 0, 0, 0.5);
-            color: white;
-            font-size: 2rem;
-            padding: 10px;
-            border: none;
-            cursor: pointer;
-            z-index: 10;
-        }
-
-        .carousel-prev {
-            left: 10px;
-        }
-
-        .carousel-next {
-            right: 10px;
-        }
-
-        /* Mobile Responsiveness */
-        @media (max-width: 768px) {
-            .category-carousel h2 {
-                font-size: 2rem;
-            }
-
-            .categories {
-                gap: 10px;
-            }
-
-            .category-card {
-                max-width: 200px;
-                height: 200px;
-            }
-
-            .category-name {
-                font-size: 1rem;
-            }
-
-            .carousel-prev, .carousel-next {
-                font-size: 1.5rem;
-            }
-        }
-
-
-        /* ===== DESKTOP NAVBAR ===== */
-        #desktop-navbar {
-            display: flex;
-            justify-content: space-evenly;
-            align-items: center;
-            padding: 15px 40px;
-            background-color: white;
-            border-bottom: 1px solid #e2e2e2; /* design line under links */
-            position: sticky;
-            top: 0;
-            z-index: 999;
-            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5); /* ← Floating shadow */
-
-        }
-
-        #logo img {
-            height: 90px;
-        }
-
-        #other {
-            display: flex;
-            align-items: center;
-        }
-
-        #other a,
-        .user-actions a,
-        .user-actions button {
-            margin-left: 20px;
-            text-decoration: none;
-            font-weight: 600;
-            color: black;
-        }
-
-        .user-actions button {
-            background: none;
-            border: none;
-            cursor: pointer;
-            font-weight: 600;
-        }
-
-        /* ===== MOBILE HEADER ===== */
-        #mobile-header {
-            display: none;
-            justify-content: space-between;
-            align-items: center;
-            padding: 15px 20px;
-            background-color: white;
-            border-bottom: 1px solid #e2e2e2;
-            z-index: 1001;
-            position: relative;
-            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5); /* ← Floating shadow */
-        }
-
-        #mobile-logo img {
-            height: 40px;
-        }
-
-        .menu-toggle {
-            font-size: 28px;
-            cursor: pointer;
-        }
-
-        /* ===== MOBILE SLIDE MENU ===== */
-        .mobile-menu {
-            position: fixed;
-            top: 0;
-            right: -100%;
-            width: 75%;
-            height: 100vh;
-            background-color: white;
-            box-shadow: -2px 0 10px rgba(0, 0, 0, 0.2);
-            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;
-            font-size: 24px;
-        }
-
-        .close-btn {
-            cursor: pointer;
-        }
-
-        .mobile-search input {
-            width: 100%;
-            padding: 10px;
-            margin: 15px 0;
-            border: 1px solid #ccc;
-            border-radius: 4px;
-        }
-
-        .mobile-menu nav a,
-        .mobile-menu nav button {
-            display: block;
-            margin: 15px 0;
-            font-size: 18px;
-            text-decoration: none;
-            color: black;
-            background: none;
-            border: none;
-            text-align: left;
-        }
-
-        /* Logo on the left */
-        #logo img {
-            height: 90px;
-        }
-
-        /* Links on the right */
-        #nav-links {
-            display: flex;
-            align-items: center;
-            gap: 25px;
-        }
-
-        /* Style all links and buttons */
-        #nav-links a,
-        .user-actions a,
-        .user-actions button {
-            color: black;
-            text-decoration: none;
-            font-weight: 600;
-            font-size: 1rem;
-            background: none;
-            border: none;
-            cursor: pointer;
-            transition: color 0.3s ease;
-        }
-
-        /* Hover color */
-        #nav-links a:hover,
-        .user-actions a:hover,
-        .user-actions button:hover {
-            color: #2ecc71; /* Green hover */
-        }
-
-        /* Group login/register or logout properly */
-        .user-actions {
-            display: flex;
-            gap: 15px;
-            align-items: center;
-        }
-
-        .logout-btn {
-            background-color: #2ecc71; /* Green background */
-            color: white;
-            border: none;
-            padding: 8px 16px;
-            border-radius: 20px;
-            font-weight: 600;
-            font-size: 0.95rem;
-            cursor: pointer;
-            transition: background-color 0.3s ease;
-        }
-
-        .logout-btn:hover {
-            {#background-color: #27ae60; /* Darker green on hover */#}
-        }
-
-
-        /* ===== OVERLAY FOR MOBILE ===== */
-        #overlay {
-            display: none;
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100vw;
-            height: 100vh;
-            background: rgba(0, 0, 0, 0.4);
-            z-index: 1000;
-        }
-
-        #overlay.active {
-            display: block;
-        }
-
-        /* ===== RESPONSIVENESS ===== */
-        @media (max-width: 768px) {
-            #desktop-navbar {
-                display: none;
-            }
-
-            #mobile-header {
-                display: flex;
-            }
-        }
-
-        /* ===== BANNER ===== */
-        .banner {
-            position: relative;
-            width: 100%;
-            height: 50vh;
-            background: url("{% static 'images/baner1.jpg' %}") center/cover no-repeat;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            overflow: hidden;
-            padding-bottom: 30px;
-        }
-
-        .banner-overlay {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background-color: rgba(0, 0, 0, 0.4);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-
-        .banner-content {
-            color: white;
-            text-align: left;
-            z-index: 1;
-        }
-
-        .banner-content h1 {
-            font-size: 3rem;
-            font-weight: 700;
-        {#margin-bottom: 20px;#}
-        }
-
-        .banner-content .highlight {
-            color: #fdd835; /* highlight "Штедко" */
-        }
-
-        .banner-content p {
-            font-size: 1.3rem;
-            margin-bottom: 30px;
-        }
-
-        .banner-btn {
-            padding: 12px 30px;
-            font-size: 1rem;
-            background-color: #fdd835;
-            color: black;
-            text-decoration: none;
-            border-radius: 30px;
-            font-weight: 600;
-            transition: background-color 0.3s ease;
-            margin-top: 200px;
-        }
-
-        .banner-btn:hover {
-            background-color: #ffeb3b;
-        }
-
-        .mobile-search-form {
-            display: flex;
-            align-items: center;
-            padding: 10px 16px;
-            gap: 8px;
-            background-color: white;
-            border-bottom: 1px solid #eee;
-        }
-
-        .mobile-search-form input {
-            flex: 1;
-            padding: 8px 14px;
-            border-radius: 20px;
-            border: 1px solid #ccc;
-            font-size: 14px;
-            outline: none;
-        }
-
-        .mobile-search-form button {
-            background-color: #2ecc71;
-            color: white;
-            border: none;
-            padding: 8px 12px;
-            border-radius: 50%;
-            font-size: 16px;
-            cursor: pointer;
-            transition: background-color 0.3s ease;
-        }
-
-        .mobile-search-form button:hover {
-            background-color: #27ae60;
-        }
-
-        /* Market Flyers Section */
-        .market-flyers {
-            max-width: 1200px;
-            margin: 40px auto;
-            padding: 0 20px;
-        }
-
-        .market-flyers h2 {
-            text-align: center;
-            margin-bottom: 30px;
-            font-size: 2rem;
-        }
-
-        .flyers-container {
-            display: grid;
-            grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
-            gap: 25px; /* Spacing between cards */
-        }
-
-        /* Responsive adjustments */
-        @media (max-width: 900px) {
-            .flyers-container {
-                grid-template-columns: repeat(2, 1fr); /* 2 columns on medium screens */
-            }
-        }
-
-        @media (max-width: 600px) {
-            .flyers-container {
-                grid-template-columns: 1fr; /* 1 column on small screens */
-            }
-        }
-
-        /* Flyer card styling (unchanged) */
-        .flyer-card {
-            background: white;
-            border-radius: 10px;
-            overflow: hidden;
-            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
-            transition: transform 0.3s ease, box-shadow 0.3s ease;
-        }
-
-        .flyer-card:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
-        }
-
-        .flyer-header {
-            padding: 20px;
-            background: linear-gradient(135deg, #549249, #3a6b33);
-            text-align: center;
-            color: white;
-            position: relative;
-            overflow: hidden;
-        }
-
-        .flyer-header h3 {
-            margin: 0;
-            font-size: 1.5rem;
-            font-weight: 600;
-            position: relative;
-            z-index: 1;
-            color: white;
-        }
-        .flyer-header:before {
-            content: '';
-            position: absolute;
-            top: -50%;
-            right: -50%;
-            width: 100%;
-            height: 200%;
-            background: rgba(255, 255, 255, 0.1);
-            transform: rotate(30deg);
-        }
-
-        .flyer-products {
-            padding: 15px;
-        }
-
-        .flyer-product {
-            display: flex;
-            align-items: center;
-            gap: 15px;
-            padding: 10px 0;
-            border-bottom: 1px solid #eee;
-        }
-
-        .flyer-product:last-child {
-            border-bottom: none;
-        }
-
-        .flyer-product img {
-            width: 60px;
-            height: 60px;
-            object-fit: cover;
-            border-radius: 5px;
-        }
-
-        .product-info {
-            flex: 1;
-        }
-
-        .product-name {
-            display: block;
-            font-weight: 500;
-            margin-bottom: 5px;
-        }
-
-        .product-price {
-            display: flex;
-            gap: 10px;
-        }
-
-        .old-price {
-            text-decoration: line-through;
-            color: #999;
-        }
-
-        .new-price {
-            color: #e74c3c;
-            font-weight: bold;
-        }
-
-        .view-all-btn {
-            width: 100%;
-            padding: 12px;
-            background: #cb7e31;
-            color: white;
-            border: none;
-            font-weight: bold;
-            cursor: pointer;
-            transition: background 0.3s;
-        }
-
-        .view-all-btn:hover {
-            background: #27ae60;
-        }
-
-        /* Modal Styles */
+        /* Modal */
         .modal {
             display: none;
@@ -950,25 +797,306 @@
         }
 
+        /* 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;
+            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;
+        }
+
+        .auth-btn {
+            padding: 8px 16px;
+            border-radius: 20px;
+            font-weight: 600;
+            text-decoration: none;
+            display: inline-flex;
+            align-items: center;
+            gap: 5px;
+        }
+
+        .auth-btn.logout {
+            background-color: #2e652e;
+            color: white;
+            border: none;
+        }
+
+        .auth-btn:not(.logout) {
+            color: #333;
+            background-color: #f5f5f5;
+        }
+
+        /* Responsiveness */
+        @media (max-width: 1024px) {
+            .categories-grid {
+                grid-template-columns: repeat(4, 1fr);
+            }
+
+            .flyers-container {
+                grid-template-columns: repeat(2, 1fr);
+            }
+        }
+
         @media (max-width: 768px) {
+            .main-header {
+                display: none;
+            }
+
+            #mobile-header {
+                display: flex;
+            }
+
+            .main-content {
+                flex-direction: column;
+                padding: 10px;
+            }
+
+            .content-area {
+                order: 1;
+            }
+
+            .left-sidebar {
+                width: 100%;
+                order: 2;
+                margin-top: 20px;
+            }
+
+            .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-content {
+                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;
+            }
+
+            .categories-grid {
+                grid-template-columns: repeat(2, 1fr);
+                gap: 10px;
+            }
+
+            .category-card {
+                padding: 20px 10px;
+                border-radius: 10px;
+            }
+
+            .category-card img {
+                width: 50px;
+                height: 50px;
+            }
+
+            .category-card span {
+                font-size: 14px;
+            }
+
+            .market-flyers {
+                padding: 15px;
+                border-radius: 15px;
+            }
+
             .flyers-container {
                 grid-template-columns: 1fr;
-            }
-
-            .modal-content {
-                width: 95%;
-                margin: 10% auto;
+                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;
+                font-size: 1rem;
+                border-radius: 25px;
+            }
+        }
+
+        @media (max-width: 480px) {
+            .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: repeat(auto-fill, minmax(150px, 1fr));
-            }
-        }
-        {#button.logout-btn{#}
-        {#    border: 2px solid green;#}
-        {#    padding: 10px;#}
-        {##}
-
-
-
+                grid-template-columns: 1fr;
+            }
+
+            .banner-content h1 {
+                font-size: 1.5rem;
+            }
+
+            .banner-btn {
+                padding: 10px 20px;
+            }
+        }
+
+        a {
+
+            text-decoration: none;
+            color: black;
+        }
     </style>
 </head>
@@ -985,173 +1113,179 @@
     {% endif %}
 </div>
-<!-- Navbar (same as product_list) -->
-{% load static %}
-<!-- FULL NAVBAR -->
-<div id="navbar">
-
-    <!-- DESKTOP NAVBAR -->
-    <div id="desktop-navbar">
-        <!-- Logo on the left -->
-        <div id="logo">
+
+<!-- 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>
-
-        <!-- Navigation links on the right -->
-        <div id="nav-links">
-{#            <a href="{% url 'home' %}">Дома</a>#}
-            <a href="{% url 'product_list' %}">Каталог</a>
-            <a href="{% url 'stats' %}"><img src="{% static 'images/stats.png' %}" width="57px"></a>
-
-            <div class="user-actions">
-                {% if user.is_authenticated %}
-                    <form method="post" action="{% url 'logout' %}">
-                        {% csrf_token %}
-                        <button type="submit" class="logout-btn"><img src="{% static 'images/log_out.png' %}"width="35px"></button>
-                    </form>
+        <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 %}
+                <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 style="z-index: 0"><a href="{% url 'stats' %}">Статистика</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" id="mobileSearchForm">
+        <input type="text" name="search" id="mobileSearchInput" 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 '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>
+
+<!-- Main Content -->
+<div class="main-content">
+    <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>
+                </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>
+            </div>
+        </div>
+        <section class="market-flyers">
+            <h2 class="section-title">Актуелни Попусти</h2>
+            <div class="flyers-container">
+                {% if stores_with_products %}
+                    {% for store in stores_with_products %}
+                        <div class="flyer-card">
+                            <div class="flyer-header">
+                                <h3>{{ store.name }}</h3>
+                            </div>
+                            <div class="flyer-products">
+                                {% if store.products %}
+                                    {% for product in store.products|slice:":3" %}
+                                        <a href="{% url 'product_detail' product.id %}">
+                                            <div class="flyer-product">
+                                                <img src="{{ product.image_url }}" alt="{{ product.name }}">
+                                                <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>
+                                                </div>
+                                            </div>
+                                        </a>
+                                    {% endfor %}
+                                {% else %}
+                                    <p>Нема достапни попусти за {{ store.name }}.</p>
+                                {% endif %}
+                            </div>
+                            <button class="view-all-btn" data-store="{{ store.name }}">
+                                Види ги сите попусти
+                            </button>
+                        </div>
+                    {% endfor %}
                 {% else %}
-                    <a href="{% url 'login' %}" id="login">Login</a>
-                    <a href="{% url 'register' %}" id="signup"
-                       style="background-color: #cb7e31; color: white; border-radius: 10px">Sign Up</a>
+                    <p>No flyer data available. Please log in or check back later. (Debug: stores_with_products is
+                        empty)</p>
                 {% endif %}
             </div>
+        </section>
+    </main>
+    <aside class="left-sidebar">
+        <div class="sidebar-section">
+            <h3 style="background-color: #2e652e; color: white; padding: 10px; border-radius: 10px">Популарни
+                категории</h3>
+            <div class="popular-categories">
+                <a href="{% url 'product_list' %}?category=Dairy" class="popular-category">
+                    <div class="popular-category-image"
+                         style="background-image: url('{% static 'images/categories/dairy.jpg' %}')"></div>
+                    <div class="popular-category-title">Млечни производи</div>
+                </a>
+                <a href="{% url 'product_list' %}?category=Vegetables" class="popular-category">
+                    <div class="popular-category-image"
+                         style="background-image: url('{% static 'images/categories/vegetables.jpg' %}')"></div>
+                    <div class="popular-category-title">Зеленчук</div>
+                </a>
+                <a href="{% url 'product_list' %}?category=Drinks" class="popular-category">
+                    <div class="popular-category-image"
+                         style="background-image: url('{% static 'images/categories/drinks.jpg' %}')"></div>
+                    <div class="popular-category-title">Пијалоци</div>
+                </a>
+                <a href="{% url 'product_list' %}?category=Cosmetics" class="popular-category">
+                    <div class="popular-category-image"
+                         style="background-image: url('{% static 'images/categories/cosmetics.jpg' %}')"></div>
+                    <div class="popular-category-title">Козметика</div>
+                </a>
+            </div>
         </div>
-    </div>
-
-
-    <div id="mobile-header">
-        <div id="mobile-logo">
-            <img src="{% static 'images/shtedko_official1.png' %}" alt="Штедко лого" style="height: 40px;">
-        </div>
-        <div class="menu-toggle" onclick="toggleMobileMenu()">☰</div>
-    </div>
-
-
-    <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="q" placeholder="Пребарај производ..." required/>
-            <button type="submit"><i class="fas fa-magnifying-glass"></i></button>
-        </form>
-        <nav>
-            <a href="{% url 'home' %}">Дома</a>
-            <a href="{% url 'product_list' %}">Каталог</a>
-            <a href="#">Статистика</a>
-            {% if user.is_authenticated %}
-                <form method="post" action="{% url 'logout' %}">
-                    {% csrf_token %}
-                    <button type="submit">Logout</button>
-                </form>
-            {% else %}
-                <a href="{% url 'login' %}">Login</a>
-                <a href="{% url 'register' %}">Sign Up</a>
-            {% endif %}
-        </nav>
-    </div>
-    <!-- MOBILE DARK OVERLAY -->
-    <div id="overlay" onclick="toggleMobileMenu()"></div>
-
-
+    </aside>
 </div>
-{% block details %}
-{% endblock %}
-<section class="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>
-</section>
-
-
-<section class="category-carousel">
-<h2 style="
-    background: linear-gradient(135deg, #1f3f1f, #2e652e);
-    padding: 20px 30px;
-    color: #fff;
-    border-radius: 12px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
-    font-size: 1.8rem;
-    text-align: center;
-    margin-bottom: 20px;
-">
-    Категории
-</h2>
-    {% if categories %}
-        <div class="categories">
-            {% for category in categories %}
-                <a href="{% url 'product_list' %}?category={{ category }}" class="category-card">
-                    <img src="{% static 'images/categories/' %}{{ category|lower }}.jpg"
-                         alt="{{ category }}"
-                         onerror="this.src='{% static 'images/categories/default.jpg' %}'">
-{#                    <span class="category-name">{{ category }}</span>#}
-
-                </a>
-            {% endfor %}
-        </div>
-    {% else %}
-        <p style="text-align: center;">Нема достапни категории</p>
-    {% endif %}
-</section>
-
-<section class="market-flyers">
-<h2 style="
-    background: linear-gradient(135deg, #1f3f1f, #2e652e);
-    padding: 20px 30px;
-    color: #fff;
-    border-radius: 12px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
-    font-size: 1.8rem;
-    text-align: center;
-    margin-bottom: 20px;
-">
-    Актуелни Попусти
-</h2>{#<img src="{% static 'images/Штедко.png' %}" alt="Line" style="width: 70px">#}
-<div class="flex" style="display: flex">
-    <div class="flyers-container">
-        {% for store in stores_with_products %}
-            <div class="flyer-card">
-                <div class="flyer-header" style="background-color: #549249; color: white;">
-                    <h3 style="color: white">{{ store.name }}</h3>
-                </div>
-                <div class="flyer-products">
-                    {% if store.products %}
-                        {% for product in store.products %}
-                            <div class="flyer-product">
-
-                                <img src="{{ product.image_url }}" alt="{{ product.name }}">
-
-                                <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>
-                                </div>
-                                 </a>
-                            </div>
-                        {% endfor %}
-                    {% else %}
-                        <p>No discounted products available for {{ store.name }}.</p>
-                    {% endif %}
-                </div>
-                <button class="view-all-btn" data-store="{{ store.name }}">
-                    Види ги сите попусти
-                </button>
-                </div>
-
-        {% endfor %}
-    </div>
-</section>
-
 
 <!-- Modal for showing all discounted products -->
 <div id="products-modal" class="modal">
     <div class="modal-content">
-        <span class="close-modal">&times;</span>
-        <h2 id="modal-title">Попусти во <span id="store-name"></span></h2>
+        <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>
         <div class="modal-products-grid" id="modal-products">
             <!-- Products will be loaded here via JavaScript -->
@@ -1160,4 +1294,5 @@
 </div>
 
+<!-- Footer -->
 <footer>
     <div class="footer-content">
@@ -1179,80 +1314,25 @@
             <a href="#">Политика на приватност</a>
         </div>
+        <div class="footer-section social">
+            <h3>Следете нè</h3>
+            <a href="#" target="_blank"><i class="fab fa-facebook-f"></i> Facebook</a>
+            <a href="#" target="_blank"><i class="fab fa-instagram"></i> Instagram</a>
+            <a href="#" target="_blank"><i class="fab fa-twitter"></i> Twitter</a>
+        </div>
     </div>
     <div class="copyright">
-        &copy; 2023 Нашата Продавница. Сите права се задржани.
+        © 2023 Нашата Продавница. Сите права се задржани.
     </div>
 </footer>
 
 <script>
-    function toggleMenu() {
-        const menu = document.getElementById('other');
-        menu.style.display = menu.style.display === 'flex' ? 'none' : 'flex';
+    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 () {
-        // Close menu when clicking outside
-        document.addEventListener('click', function (e) {
-            if (!e.target.closest('#navbar') &&
-                !e.target.classList.contains('menu-toggle')) {
-                document.getElementById('other').style.display = 'none';
-            }
-        });
-
-        // Carousel touch support
-        const carousel = document.querySelector('.categories');
-        if (carousel) {
-            let isDown = false;
-            let startX;
-            let scrollLeft;
-
-            // Mouse events
-            carousel.addEventListener('mousedown', (e) => {
-                isDown = true;
-                startX = e.pageX - carousel.offsetLeft;
-                scrollLeft = carousel.scrollLeft;
-                carousel.style.cursor = 'grabbing';
-            });
-
-            carousel.addEventListener('mouseleave', () => {
-                isDown = false;
-                carousel.style.cursor = 'grab';
-            });
-
-            carousel.addEventListener('mouseup', () => {
-                isDown = false;
-                carousel.style.cursor = 'grab';
-            });
-
-            carousel.addEventListener('mousemove', (e) => {
-                if (!isDown) return;
-                e.preventDefault();
-                const x = e.pageX - carousel.offsetLeft;
-                const walk = (x - startX) * 2;
-                carousel.scrollLeft = scrollLeft - walk;
-            });
-
-            // Touch events
-            carousel.addEventListener('touchstart', (e) => {
-                isDown = true;
-                startX = e.touches[0].pageX - carousel.offsetLeft;
-                scrollLeft = carousel.scrollLeft;
-            });
-
-            carousel.addEventListener('touchend', () => {
-                isDown = false;
-            });
-
-            carousel.addEventListener('touchmove', (e) => {
-                if (!isDown) return;
-                e.preventDefault();
-                const x = e.touches[0].pageX - carousel.offsetLeft;
-                const walk = (x - startX) * 2;
-                carousel.scrollLeft = scrollLeft - walk;
-            });
-        }
-
-
-        // Auto-hide messages
         setTimeout(() => {
             document.querySelectorAll('.alert').forEach(alert => {
@@ -1261,16 +1341,5 @@
             });
         }, 5000);
-    });
-
-    function toggleMobileMenu() {
-        const menu = document.getElementById("mobile-menu");
-        const overlay = document.getElementById("overlay");
-
-        menu.classList.toggle("open");
-        overlay.classList.toggle("active");
-    }
-
-    // Modal functionality
-    document.addEventListener('DOMContentLoaded', function () {
+
         const modal = document.getElementById('products-modal');
         const modalTitle = document.getElementById('store-name');
@@ -1278,19 +1347,19 @@
         const closeModal = document.querySelector('.close-modal');
 
-        // Open modal when view all button is clicked
         document.querySelectorAll('.view-all-btn').forEach(button => {
             button.addEventListener('click', function () {
                 const store = this.getAttribute('data-store');
                 modalTitle.textContent = store;
-
-                // Clear previous products
-                modalProducts.innerHTML = '';
-
-                // Show loading state
-                modalProducts.innerHTML = '<p>Loading products...</p>';
-
-                // Fetch products via AJAX
-                fetch(`/get-store-products/?store=${encodeURIComponent(store)}`)
-                    .then(response => response.json())
+                modalProducts.innerHTML = '<div class="spinner">Loading...</div>';
+
+                fetch(`/get-store-products/?store=${encodeURIComponent(store)}`, {
+                    credentials: 'same-origin'
+                })
+                    .then(response => {
+                        if (!response.ok) {
+                            throw new Error('Network response was not ok');
+                        }
+                        return response.json();
+                    })
                     .then(data => {
                         if (data.products && data.products.length > 0) {
@@ -1300,22 +1369,26 @@
                                 productElement.className = 'modal-product';
                                 productElement.innerHTML = `
-                                    <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 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>
                                 `;
                                 modalProducts.appendChild(productElement);
                             });
                         } else {
-                            modalProducts.innerHTML = '<p>No discounted products found for this store.</p>';
+                            modalProducts.innerHTML = '<p>Нема достапни попусти за оваа продавница.</p>';
                         }
                     })
                     .catch(error => {
                         console.error('Error:', error);
-                        modalProducts.innerHTML = '<p>Error loading products. Please try again.</p>';
+                        modalProducts.innerHTML = `
+                            <p>Грешка при вчитување на производите. <a href="/login/">Најави се</a> или обидете се повторно.</p>
+                        `;
                     });
 
@@ -1325,5 +1398,4 @@
         });
 
-        // Close modal
         closeModal.addEventListener('click', function () {
             modal.style.display = 'none';
@@ -1331,5 +1403,4 @@
         });
 
-        // Close when clicking outside modal
         window.addEventListener('click', function (event) {
             if (event.target === modal) {
@@ -1339,4 +1410,230 @@
         });
     });
+
+    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>
Index: main/templates/main/fridge_recepies.html
===================================================================
--- main/templates/main/fridge_recepies.html	(revision fef3b4d766831b584534962ac137a311239ecc91)
+++ main/templates/main/fridge_recepies.html	(revision fef3b4d766831b584534962ac137a311239ecc91)
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+</head>
+<body>
+<div id="fridge-suggester">
+  <h3>What’s in your fridge?</h3>
+  <textarea id="fridge-input" rows="3" placeholder="e.g. eggs, milk, flour"></textarea>
+  <button id="fridge-btn">Suggest Recipes</button>
+  <div id="fridge-recipes"></div>
+</div>
+<script>
+
+function getCookie(name) {
+    let cookieValue = null;
+    if (document.cookie && document.cookie !== '') {
+        const cookies = document.cookie.split(';');
+        for (let i = 0; i < cookies.length; i++) {
+            const cookie = cookies[i].trim();
+            if (cookie.substring(0, name.length + 1) === (name + '=')) {
+                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+                break;
+            }
+        }
+    }
+    return cookieValue;
+}
+
+    document.getElementById('fridge-btn').onclick = () => {
+  const ingredients = document.getElementById('fridge-input').value;
+  fetch('/fridge-recipes/', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      'X-CSRFToken': getCookie('csrftoken'),
+    },
+    body: JSON.stringify({ ingredients }),
+  })
+  .then(res => res.json())
+  .then(data => {
+    const div = document.getElementById('fridge-recipes');
+    div.innerHTML = data.recipes.map(r =>
+      `<div><h4>${r.title}</h4><p>${r.description}</p></div>`
+    ).join('');
+  });
+};
+
+</script>
+</body>
+</html>
Index: main/templates/main/list_detail.html
===================================================================
--- main/templates/main/list_detail.html	(revision 52c9c87d52fd2d6be3621074ff2ed6eac3c913be)
+++ main/templates/main/list_detail.html	(revision fef3b4d766831b584534962ac137a311239ecc91)
@@ -4,218 +4,24 @@
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
     <title>Shopping List</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
     <style>
-        body, html {
-            height: 100%;
+        :root {
+            --primary-color: #2e652e;
+            --secondary-color: #3498db;
+            --accent-color: #28a745;
+            --background-overlay: rgba(255, 255, 255, 0.9);
+            --shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+            --border-radius: 12px;
+            --transition: all 0.3s ease;
+        }
+
+        * {
             margin: 0;
             padding: 0;
-        }
-
-        body {
-            font-family: Arial, sans-serif;
-            background-image: url('{% static "images/baner1.jpg" %}');
-            background-size: cover;
-            background-position: center;
-            position: relative;
-            display: flex;
-            justify-content: center;
-            align-items: flex-start;
-        }
-
-        body::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background: inherit;
-            filter: blur(8px);
-            z-index: -1;
-        }
-
-        .shopping-list-wrapper {
-            display: flex;
-            justify-content: center;
-            padding: 20px;
-            width: 100%;
-            height: 100%;
-            overflow-y: auto;
-        }
-
-        .shopping-list-container {
-            max-width: 1000px;
-            width: 100%;
-            background-color: rgba(255, 255, 255, 0.9);
-            padding: 30px;
-            border-radius: 12px;
-            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
-            margin: 20px;
-        }
-
-        .shopping-list-title {
-            text-align: center;
-            margin-bottom: 25px;
-            font-size: 28px;
-            color: #333;
-        }
-
-        .shopping-list-content {
-            margin-top: 20px;
-        }
-
-        .shopping-list-header {
-            display: grid;
-            grid-template-columns: 40px 1fr 120px 120px 120px;
-            gap: 20px;
-            margin-bottom: 15px;
-            font-weight: bold;
-            color: #555;
-        }
-
-        .shopping-list-header .header-item {
-            display: flex;
-            align-items: center;
-            justify-content: left;
-        }
-
-        .shopping-list-items {
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-        }
-
-        .shopping-list-item {
-            display: grid;
-            grid-template-columns: 40px 1fr 120px 120px 120px;
-            gap: 20px;
-            align-items: center;
-            padding: 10px;
-            border-radius: 8px;
-            background-color: #f8f9fa;
-            transition: background-color 0.3s;
-        }
-
-        .shopping-list-item.checked {
-            background-color: #e9ecef;
-            text-decoration: line-through;
-            color: #888;
-        }
-
-        .checkbox input {
-            display: none;
-        }
-
-        .checkbox label {
-            width: 20px;
-            height: 20px;
-            border: 2px solid #3498db;
-            border-radius: 4px;
-            display: inline-block;
-            cursor: pointer;
-        }
-
-        .checkbox input:checked + label {
-            background-color: #3498db;
-        }
-
-        .checkbox input:checked + label::after {
-            content: '';
-            position: absolute;
-            top: 4px;
-            left: 7px;
-            width: 6px;
-            height: 12px;
-            border: solid white;
-            border-width: 0 3px 3px 0;
-            transform: rotate(45deg);
-        }
-
-        .actions button {
-            background-color: #e74c3c;
-            border-color: #e74c3c;
-            color: white;
-            padding: 6px 10px;
-            border-radius: 6px;
-            cursor: pointer;
-        }
-
-        .actions button:hover {
-            background-color: #c0392b;
-        }
-
-        .list-summary {
-            display: flex;
-            justify-content: space-between;
-            margin-top: 30px;
-            padding: 15px 20px;
-            background-color: #f8f9fa;
-            border-radius: 8px;
-        }
-
-        .summary-item {
-            display: flex;
-            gap: 10px;
-        }
-
-        .summary-item span {
-            font-weight: 600;
-        }
-
-        .total-price {
-            color: #28a745;
-        }
-
-        .shopping-list-actions {
-            display: flex;
-            justify-content: space-between;
-            margin-top: 20px;
-        }
-
-        .action-button {
-            padding: 12px 20px;
-            background-color: #3498db;
-            color: white;
-            border: none;
-            border-radius: 6px;
-            cursor: pointer;
-            font-size: 16px;
-        }
-
-        .action-button:hover {
-            background-color: #2980b9;
-        }
-
-        .back-button {
-            background-color: #6c757d;
-        }
-
-        @media (max-width: 768px) {
-            .shopping-list-header, .shopping-list-item {
-                grid-template-columns: 40px 1fr 1fr 100px;
-            }
-
-            .shopping-list-title {
-                font-size: 24px;
-            }
-
-            .list-summary {
-                flex-direction: column;
-                gap: 10px;
-            }
-        }
-
-        .quantity input {
-            width: 60px;
-            padding: 6px;
-            font-size: 16px;
-            border: 1px solid #ccc;
-            border-radius: 6px;
-            text-align: center;
-        }
-        a.action-button.back-button{
-            text-decoration: none;
-        }
+            box-sizing: border-box;
+        }
+
         html, body {
             height: 100%;
@@ -226,87 +32,797 @@
             background-repeat: no-repeat;
             background-attachment: fixed;
+            overflow-x: hidden;
+        }
+
+        body::before {
+            content: '';
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: inherit;
+            filter: blur(8px);
+            z-index: -1;
+        }
+
+        /* Header */
+        .main-header {
+            background-color: white;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+            position: sticky;
+            top: 0;
+            z-index: 1000;
+            display: none;
+        }
+
+        .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;
-            overflow-x: hidden;
-        }
-
-
+        }
+
+        .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;
+        }
+
+        .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: 50px;
+        }
+
+        .menu-toggle {
+            font-size: 28px;
+            color: white;
+            cursor: pointer;
+            transition: transform 0.3s ease;
+        }
+
+        .menu-toggle:hover {
+            transform: scale(1.1);
+        }
+
+        /* Mobile 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-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;
+        }
+
+        /* Sticky Price Summary */
+        .sticky-price-summary {
+            position: sticky;
+            top: 0;
+            background-color: rgba(46, 101, 46, 0.9);
+            color: white;
+            padding: 10px 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            z-index: 999;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+        }
+
+        .sticky-price-summary .summary-item {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            font-size: 14px;
+        }
+
+        .sticky-price-summary .summary-item span:first-child {
+            font-weight: 500;
+            margin-bottom: 3px;
+        }
+
+        .sticky-price-summary .summary-item span:last-child {
+            font-weight: 700;
+            font-size: 16px;
+        }
+
+        .sticky-price-summary .total-price span:last-child {
+            color: #fdd835;
+        }
+
+        .sticky-price-summary .group-button {
+            padding: 8px 16px;
+            background-color: #4caf50;
+            color: white;
+            border: none;
+            border-radius: 20px;
+            cursor: pointer;
+            font-size: 14px;
+            transition: background-color 0.3s ease;
+        }
+
+        .sticky-price-summary .group-button:hover {
+            background-color: #45a049;
+        }
+
+        /* Main Content */
+        .shopping-list-wrapper {
+            display: flex;
+            justify-content: center;
+            align-items: flex-start;
+            gap: 20px;
+            padding: 20px;
+            width: 100%;
+            margin-top: 20px;
+        }
+
+        .shopping-list-container {
+            max-width: 1000px;
+            width: 100%;
+            background-color: var(--background-overlay);
+            padding: 30px;
+            border-radius: var(--border-radius);
+            box-shadow: var(--shadow);
+        }
+
+        .shopping-list-title {
+            text-align: center;
+            margin-bottom: 25px;
+            font-size: 28px;
+            color: var(--primary-color);
+            text-transform: uppercase;
+        }
+
+        .shopping-list-header {
+            display: grid;
+            grid-template-columns: 40px 1fr 120px 120px 120px;
+            gap: 20px;
+            margin-bottom: 15px;
+            font-weight: 600;
+            color: white;
+            text-transform: uppercase;
+            font-size: 14px;
+            background: linear-gradient(135deg, #549249, #3a6b33);
+            padding: 15px;
+            border-radius: 10px;
+        }
+
+        .shopping-list-items {
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+        }
+
+        .shopping-list-item {
+            display: grid;
+            grid-template-columns: 40px 50px 375px 110px 135px auto;
+            gap: 20px;
+            align-items: center;
+            padding: 12px;
+            border-radius: 8px;
+            background-color: #fff;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
+        }
+
+        .shopping-list-item.checked {
+            background-color: #f1f3f5;
+            text-decoration: line-through;
+            color: #888;
+        }
+
+        .checkbox input {
+            display: none;
+        }
+
+        .checkbox label {
+            width: 20px;
+            height: 20px;
+            border: 2px solid var(--secondary-color);
+            border-radius: 4px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+        }
+
+        .checkbox input:checked + label {
+            background-color: var(--secondary-color);
+        }
+
+        .checkbox input:checked + label::after {
+            content: '✓';
+            color: white;
+            font-size: 12px;
+        }
+
+        .quantity input {
+            width: 80px;
+            padding: 6px;
+            font-size: 14px;
+            border: 1px solid #ddd;
+            border-radius: 6px;
+            text-align: center;
+        }
+
+        .price, .store {
+            font-weight: 500;
+            color: #444;
+        }
+
+        .actions button {
+            background-color: #e74c3c;
+            border: none;
+            color: white;
+            padding: 6px 12px;
+            border-radius: 6px;
+            cursor: pointer;
+        }
+
+        .action-button {
+            padding: 12px;
+            background-color: var(--secondary-color);
+            color: white;
+            border: none;
+            border-radius: var(--border-radius);
+            cursor: pointer;
+            font-size: 16px;
+            text-align: center;
+            text-decoration: none;
+        }
+
+        .action-button:hover {
+            background-color: #2980b9;
+        }
+
+        .back-button {
+            background-color: #6c757d;
+        }
+
+        .back-button:hover {
+            background-color: #5a6268;
+        }
+
+        .product-image img {
+            width: 50px;
+            height: 50px;
+            object-fit: cover;
+            border-radius: 8px;
+            border: 1px solid #ccc;
+        }
+
+        /* Mobile Styles */
+        @media (max-width: 768px) {
+            .main-header {
+                display: none;
+            }
+
+            #mobile-header {
+                display: flex;
+            }
+
+            .sticky-price-summary {
+                top: 70px; /* Below mobile header */
+            }
+
+            .shopping-list-wrapper {
+                flex-direction: column;
+                padding: 10px;
+                margin-top: 0;
+            }
+
+            .shopping-list-container {
+                width: 100%;
+                padding: 15px;
+            }
+
+            .shopping-list-header {
+                display: none;
+            }
+
+            .shopping-list-item {
+                grid-template-columns: 40px 1fr 100px;
+                grid-template-rows: auto auto auto;
+                gap: 10px;
+                padding: 15px;
+                position: relative;
+            }
+
+            .product-image {
+                grid-column: 1;
+                grid-row: 1 / span 3;
+            }
+
+            .product {
+                grid-column: 2;
+                grid-row: 1;
+                font-weight: 600;
+            }
+
+            .quantity {
+                grid-column: 2;
+                grid-row: 2;
+                display: flex;
+                align-items: center;
+                gap: 10px;
+            }
+
+            .price {
+                grid-column: 3;
+                grid-row: 2;
+                margin-right: 10px;
+            }
+
+            .store {
+                grid-column: 3;
+                grid-row: 3;
+                margin-top: 5px;
+                word-wrap: break-word;
+                max-width: 100px;
+            }
+
+            .actions {
+                position: absolute;
+                top: 15px;
+                right: 15px;
+            }
+
+            .checkbox {
+                position: absolute;
+                bottom: 15px;
+                right: 15px;
+            }
+
+            .quantity input {
+                width: 60px;
+            }
+
+            .shopping-list-title {
+                font-size: 22px;
+                margin-bottom: 15px;
+            }
+
+            .action-button {
+                padding: 10px;
+                font-size: 14px;
+            }
+
+            .sticky-price-summary .summary-item {
+                font-size: 12px;
+            }
+
+            .sticky-price-summary .summary-item span:last-child {
+                font-size: 14px;
+            }
+        }
+
+        @media (max-width: 480px) {
+            .shopping-list-item {
+                grid-template-columns: 30px 1fr 80px;
+                padding: 10px;
+            }
+
+            .product-image img {
+                width: 40px;
+                height: 40px;
+            }
+
+            .quantity input {
+                width: 50px;
+            }
+
+            .price {
+                grid-column: 3;
+                grid-row: 2;
+                font-size: 12px;
+            }
+
+            .store {
+                grid-column: 3;
+                grid-row: 3;
+                font-size: 12px;
+                max-width: 80px;
+            }
+
+            .actions button {
+                padding: 4px 8px;
+                font-size: 12px;
+            }
+
+            .shopping-list-title {
+                font-size: 20px;
+            }
+
+            .sticky-price-summary {
+                padding: 8px 10px;
+            }
+
+            .sticky-price-summary .summary-item {
+                font-size: 11px;
+            }
+
+            .sticky-price-summary .summary-item span:last-child {
+                font-size: 13px;
+            }
+        }
+
+        @media (min-width: 769px) {
+            .main-header {
+                display: block;
+            }
+
+            #mobile-header {
+                display: none;
+            }
+
+            .sticky-price-summary {
+                top: 130px; /* Below main header */
+            }
+        }
     </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>
+
+<!-- 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 %}
+                <form method="post" action="{% url 'logout' %}" class="auth-form">
+                    {% csrf_token %}
+                    <button type="submit" class="logout-btn" style="color: white">
+                        <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 'view_lists' %}">Листи</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>
+<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" 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 '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>
+
+<!-- Sticky Price Summary -->
+<div class="sticky-price-summary">
+    <div class="summary-item">
+        <span>Вкупно</span>
+        <span id="sticky-total-items">{{ items|length }}</span>
+    </div>
+    <div class="summary-item">
+        <span>Одбрани</span>
+        <span id="sticky-checked-items">0</span>
+    </div>
+    <div class="summary-item">
+        <span>Вкупна цена</span>
+        <span id="sticky-total-price-all">{{ total_price_all }} ден.</span>
+    </div>
+    <div class="summary-item total-price">
+        <span>Цена (одбрани)</span>
+        <span id="sticky-total-price">{{ total_price }} ден.</span>
+    </div>
+    <button id="group-by-store" class="group-button">Групирај по продавници</button>
+</div>
+
+<!-- Main Content -->
 <div class="shopping-list-wrapper">
     <div class="shopping-list-container">
-        <h1 class="shopping-list-title"><span style="color: #2e652e">{{ shopping_list.name }}</span> - Листа на продукти</h1>
-
-        <div class="shopping-list-content">
-            {% if items %}
-                <div class="shopping-list-header">
-                    <div class="header-item checkbox"></div>
-                    <div class="header-item product">Продукт</div>
-                    <div class="header-item quantity">Количина</div>
-                    <div class="header-item price">Цена</div>
-{#                    <div class="header-item actions">Акции</div>#}
-                </div>
-
-                <div class="shopping-list-items">
-                    {% for item in items %}
-                        <div class="shopping-list-item {% if item.checked %}checked{% endif %}"
-                             data-item-id="{{ item.id }}">
-                            <div class="checkbox">
-                                <input type="checkbox" class="item-checkbox" id="item-{{ item.id }}"
-                                       {% if item.checked %}checked{% endif %}>
-                                <label for="item-{{ item.id }}"></label>
-                            </div>
-                            <div class="product">{{ item.product.name }}</div>
-                            <div class="quantity">
-                                <input type="number" class="quantity-input" min="1" value="{{ item.quantity }}"
-                                       data-price="{{ item.product.price }}">
-                            </div>
-                            <div class="price">{{ item.product.price }} ден.</div>
-                            <div class="actions">
-                                <button class="remove-button" data-item-id="{{ item.id }}">
-                                    <i class="fas fa-times"></i> Отстрани
-                                </button>
-                            </div>
+        <h1 class="shopping-list-title"><span>{{ shopping_list.name }}</span> - Листа на продукти</h1>
+        {% if items %}
+            <div class="shopping-list-header">
+                <div></div>
+                <div>Продукт</div>
+                <div>Количина</div>
+                <div>Цена</div>
+                <div>Продавница</div>
+            </div>
+            <div class="shopping-list-items">
+                {% for item in items %}
+                    <div class="shopping-list-item {% if item.checked %}checked{% endif %}"
+                         data-item-id="{{ item.id }}">
+                        <div class="checkbox">
+                            <input type="checkbox" class="item-checkbox" id="item-{{ item.id }}"
+                                   {% if item.checked %}checked{% endif %}>
+                            <label for="item-{{ item.id }}"></label>
                         </div>
-                    {% endfor %}
-                </div>
-
-                <div class="list-summary">
-                    <div class="summary-item">
-                        <span>Вкупно продукти:</span>
-                        <span id="total-items">{{ items.count }}</span>
+                        <div class="product-image">
+                            <img src="{{ item.product.image_url }}" alt="{{ item.product.name }}">
+                        </div>
+                        <div class="product">{{ item.product.name }}</div>
+                        <div class="quantity">
+                            <input type="number" class="quantity-input" min="1" value="{{ item.quantity }}"
+                                   data-price="{{ item.product.price }}">
+                        </div>
+                        <div class="price">{{ item.product.price }} ден.</div>
+                        <div class="store">{{ item.product.store }}</div>
+                        <div class="actions">
+                            <button class="remove-button" data-item-id="{{ item.id }}">Отстрани</button>
+                        </div>
                     </div>
-                    <div class="summary-item">
-                        <span>Одбрано:</span>
-                        <span id="checked-items">0</span>
-                    </div>
-                    <div class="summary-item">
-                        <span>Вкупна цена:</span>
-                        <span id="total-price-all">{{ total_price_all }} ден.</span>
-                    </div>
-                    <div class="summary-item total-price">
-                        <span>Вкупна цена (одбрани):</span>
-                        <span id="total-price">{{ total_price }} ден.</span>
-                    </div>
-                </div>
-
-            {% else %}
-                <p>Немате додадено продукти во оваа листа.</p>
-            {% endif %}
-        </div>
-
+                {% endfor %}
+            </div>
+        {% else %}
+            <p style="text-align:center; color: #555;">Немате додадено продукти во оваа листа.</p>
+        {% endif %}
         <div class="shopping-list-actions">
-{#            <button id="clear-checked" class="action-button" disabled>#}
-{#                <i class="fas fa-check-circle"></i> Исчисти одбрано#}
-{#            </button>#}
-            <a href="{% url 'product_list' %}" class="action-button back-button">
-                <i class="fas fa-arrow-left"></i> Назад до производи
-            </a>
-            <a href="{% url 'view_lists' %}" class="action-button back-button">
-                <i class="fas fa-arrow-left"></i> Назад до листи
-            </a>
-            {#            <a href="{% url 'lists.html' %}" class="action-button back-button">#}
-            {#                <i class="fas fa-arrow-left"></i> Назад до Листи#}
-            {#            </a>#}
+            {#                <a href="{% url 'product_list' %}" class="action-button back-button">Назад до производи</a>#}
+            {#                <a href="{% url 'view_lists' %}" class="action-button back-button">Назад до листи</a>#}
         </div>
     </div>
@@ -314,157 +830,177 @@
 
 <script>
-    document.addEventListener('DOMContentLoaded', function () {
-        const checkboxes = document.querySelectorAll('.item-checkbox');
-        const quantityInputs = document.querySelectorAll('.quantity-input');
-        const clearCheckedBtn = document.getElementById('clear-checked');
-        const checkedCounter = document.getElementById('checked-items');
-
-        function updateTotalPrice() {
-            let checkedPrice = 0;
-            let totalPriceAll = 0;
-
+    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 getCookie(name) {
+            let cookieValue = null;
+            if (document.cookie && document.cookie !== '') {
+                const cookies = document.cookie.split(';');
+                for (let cookie of cookies) {
+                    cookie = cookie.trim();
+                    if (cookie.startsWith(name + '=')) {
+                        cookieValue = decodeURIComponent(cookie.slice(name.length + 1));
+                        break;
+                    }
+                }
+            }
+            return cookieValue;
+        }
+
+        const csrftoken = getCookie('csrftoken');
+
+        function updateAllPriceDisplays() {
+            let checked = 0, all = 0, checkedCount = 0;
             document.querySelectorAll('.shopping-list-item').forEach(item => {
-                const checkbox = item.querySelector('.item-checkbox');
-                const quantityInput = item.querySelector('.quantity-input');
-                const unitPrice = parseFloat(quantityInput.dataset.price);
-                const quantity = parseInt(quantityInput.value) || 0;
-                const totalItemPrice = unitPrice * quantity;
-
-                if (checkbox.checked) {
-                    checkedPrice += totalItemPrice;
+                const qty = parseInt(item.querySelector('.quantity-input').value) || 0;
+                const price = parseFloat(item.querySelector('.quantity-input').dataset.price);
+                const total = qty * price;
+                all += total;
+                if (item.querySelector('.item-checkbox').checked) {
+                    checked += total;
+                    checkedCount++;
                 }
-
-                totalPriceAll += totalItemPrice;
             });
 
-            document.getElementById('total-price').textContent = checkedPrice + ' ден.';
-            document.getElementById('total-price-all').textContent = totalPriceAll + ' ден.';
+            document.getElementById('total-price').textContent = `${checked} ден.`;
+            document.getElementById('total-price-all').textContent = `${all} ден.`;
+            document.getElementById('checked-items').textContent = checkedCount;
+            document.getElementById('sticky-total-price').textContent = `${checked} ден.`;
+            document.getElementById('sticky-total-price-all').textContent = `${all} ден.`;
+            document.getElementById('sticky-checked-items').textContent = checkedCount;
         }
 
         function updateCheckedCount() {
             const checkedCount = document.querySelectorAll('.item-checkbox:checked').length;
-            checkedCounter.textContent = checkedCount;
-            clearCheckedBtn.disabled = checkedCount === 0;
-            updateTotalPrice();
-        }
-
-        checkboxes.forEach(checkbox => {
-            checkbox.addEventListener('change', function () {
-                const listItem = this.closest('.shopping-list-item');
-                listItem.classList.toggle('checked', this.checked);
+            document.getElementById('checked-items').textContent = checkedCount;
+            document.getElementById('sticky-checked-items').textContent = checkedCount;
+            updateAllPriceDisplays();
+        }
+
+        document.querySelectorAll('.item-checkbox').forEach(cb => {
+            cb.addEventListener('change', () => {
+                cb.closest('.shopping-list-item').classList.toggle('checked', cb.checked);
                 updateCheckedCount();
             });
         });
 
-        quantityInputs.forEach(input => {
-            input.addEventListener('input', updateTotalPrice);
+        document.querySelectorAll('.quantity-input').forEach(input => {
+            input.addEventListener('input', updateAllPriceDisplays);
         });
 
-        updateCheckedCount();
-    });
-    document.addEventListener('DOMContentLoaded', function () {
-    // Function to get CSRF token
-    function getCookie(name) {
-        let cookieValue = null;
-        if (document.cookie && document.cookie !== '') {
-            const cookies = document.cookie.split(';');
-            for (let i = 0; i < cookies.length; i++) {
-                const cookie = cookies[i].trim();
-                if (cookie.substring(0, name.length + 1) === (name + '=')) {
-                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
-                    break;
-                }
-            }
-        }
-        return cookieValue;
-    }
-
-    const csrftoken = getCookie('csrftoken');
-
-    // Your existing checkbox and quantity handling code...
-    const checkboxes = document.querySelectorAll('.item-checkbox');
-    const quantityInputs = document.querySelectorAll('.quantity-input');
-    const clearCheckedBtn = document.getElementById('clear-checked');
-    const checkedCounter = document.getElementById('checked-items');
-
-    function updateTotalPrice() {
-        let checkedPrice = 0;
-        let totalPriceAll = 0;
-
-        document.querySelectorAll('.shopping-list-item').forEach(item => {
-            const checkbox = item.querySelector('.item-checkbox');
-            const quantityInput = item.querySelector('.quantity-input');
-            const unitPrice = parseFloat(quantityInput.dataset.price);
-            const quantity = parseInt(quantityInput.value) || 0;
-            const totalItemPrice = unitPrice * quantity;
-
-            if (checkbox.checked) {
-                checkedPrice += totalItemPrice;
-            }
-
-            totalPriceAll += totalItemPrice;
-        });
-
-        document.getElementById('total-price').textContent = checkedPrice + ' ден.';
-        document.getElementById('total-price-all').textContent = totalPriceAll + ' ден.';
-    }
-
-    function updateCheckedCount() {
-        const checkedCount = document.querySelectorAll('.item-checkbox:checked').length;
-        checkedCounter.textContent = checkedCount;
-        clearCheckedBtn.disabled = checkedCount === 0;
-        updateTotalPrice();
-    }
-
-    checkboxes.forEach(checkbox => {
-        checkbox.addEventListener('change', function () {
-            const listItem = this.closest('.shopping-list-item');
-            listItem.classList.toggle('checked', this.checked);
-            updateCheckedCount();
-        });
-    });
-
-    quantityInputs.forEach(input => {
-        input.addEventListener('input', updateTotalPrice);
-    });
-
-    // Handle remove button clicks
-    document.querySelectorAll('.remove-button').forEach(button => {
-        button.addEventListener('click', function() {
-            const itemId = this.dataset.itemId;
-            const listItem = this.closest('.shopping-list-item');
-
-            if (!confirm('Дали сте сигурни дека сакате да го отстраните овој производ?')) {
-                return;
-            }
-
-            fetch(`/remove-from-list/${itemId}/`, {
-                method: 'POST',
-                headers: {
-                    'X-CSRFToken': csrftoken,
-                    'Content-Type': 'application/json'
-                },
-                body: JSON.stringify({})
-            })
-            .then(response => {
-                if (response.ok) {
-                    listItem.remove();
-                    const totalItemsElement = document.getElementById('total-items');
-                    totalItemsElement.textContent = parseInt(totalItemsElement.textContent) - 1;
-                    updateTotalPrice();
-                    updateCheckedCount();
-                } else {
-                    alert('Грешка при бришење на производот');
-                }
-            })
-            .catch(error => {
-                console.error('Error:', error);
-                alert('Грешка при бришење на производот');
+        document.querySelectorAll('.remove-button').forEach(btn => {
+            btn.addEventListener('click', () => {
+                const id = btn.dataset.itemId;
+                if (!confirm('Дали сте сигурни дека сакате да го отстраните овој производ?')) return;
+                fetch(`/remove-from-list/${id}/`, {
+                    method: 'POST',
+                    headers: {'X-CSRFToken': csrftoken, 'Content-Type': 'application/json'},
+                }).then(res => {
+                    if (res.ok) {
+                        btn.closest('.shopping-list-item').remove();
+                        const itemCount = document.querySelectorAll('.shopping-list-item').length;
+                        document.getElementById('total-items').textContent = itemCount;
+                        document.getElementById('sticky-total-items').textContent = itemCount;
+                        updateCheckedCount();
+                    }
+                });
             });
         });
+
+        let isGrouped = false;
+        let originalOrder = [];
+
+        document.getElementById('group-by-store')?.addEventListener('click', () => {
+            const container = document.querySelector('.shopping-list-items');
+
+            if (!isGrouped) {
+                originalOrder = Array.from(container.children);
+
+                const grouped = {};
+                originalOrder.forEach(item => {
+                    const store = item.querySelector('.store').textContent.trim();
+                    if (!grouped[store]) grouped[store] = [];
+                    grouped[store].push(item);
+                });
+
+                container.innerHTML = '';
+                for (const store in grouped) {
+                    const section = document.createElement('div');
+                    section.style.marginBottom = '10px';
+                    section.innerHTML = `<div style="font-weight:bold; margin:10px 0;">Продавница: <span style='color: darkgreen'>${store}</span></div>`;
+                    grouped[store].forEach(i => section.appendChild(i));
+                    container.appendChild(section);
+                }
+
+                isGrouped = true;
+                document.getElementById('group-by-store').textContent = 'Одгрупирај';
+            } else {
+                container.innerHTML = '';
+                originalOrder.forEach(item => container.appendChild(item));
+
+                isGrouped = false;
+                document.getElementById('group-by-store').textContent = 'Групирај по продавници';
+            }
+        });
+
+        updateCheckedCount();
+
+        // Search suggestions
+        const searchInput = document.getElementById('searchInput');
+        const suggestionsDiv = document.getElementById('suggestions');
+        const searchForm = document.getElementById('searchForm');
+
+        if (searchInput && suggestionsDiv && searchForm) {
+            searchInput.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 () {
+                                    searchInput.value = suggestion;
+                                    suggestionsDiv.style.display = 'none';
+                                    searchForm.submit();
+                                });
+                                suggestionsDiv.appendChild(div);
+                            });
+                            suggestionsDiv.style.display = 'block';
+                        } else {
+                            suggestionsDiv.style.display = 'none';
+                        }
+                    });
+            });
+
+            searchInput.addEventListener('keydown', function (e) {
+                if (e.key === 'Enter') {
+                    e.preventDefault();
+                    suggestionsDiv.style.display = 'none';
+                    searchForm.submit();
+                }
+            });
+
+            document.addEventListener('click', function (e) {
+                if (!searchInput.contains(e.target) && !suggestionsDiv.contains(e.target)) {
+                    suggestionsDiv.style.display = 'none';
+                }
+            });
+        }
     });
-
-    updateCheckedCount();
-});
 </script>
 </body>
Index: main/templates/main/lists.html
===================================================================
--- main/templates/main/lists.html	(revision 52c9c87d52fd2d6be3621074ff2ed6eac3c913be)
+++ main/templates/main/lists.html	(revision fef3b4d766831b584534962ac137a311239ecc91)
@@ -1,191 +1,408 @@
 {% load static %}
-
-{% block content %}
-    <div class="lists-wrapper">
-        <div class="back-button">
-            <a href="javascript:history.back()" class="action-button secondary-button">
-                <i class="fas fa-arrow-left"></i> Назад
-            </a>
-        </div>
-
-        <div class="lists-container">
-            <h1 class="lists-main-title" style="padding: 10px; color: white; border-radius: 10px; background: linear-gradient(135deg, #1f3f1f, #2e652e);
-">Мои листи </h1>
-
-            <div class="lists-actions">
-                <button id="create-list-btn" class="action-button primary-button">
-                    <i class="fas fa-plus"></i> Нова листа
-                </button>
-
-                <div id="create-list-form" class="create-list-form" style="display: none;">
-                    <form method="post" action="{% url 'create_list' %}">
-                        {% csrf_token %}
-                        <div class="form-group">
-                            <input type="text" name="list_name" placeholder="Име на листата" required
-                                   class="form-input">
-                        </div>
-                        <div class="form-actions">
-                            <button type="submit" class="action-button submit-button">Креирај</button>
-                            <button type="button" id="cancel-create" class="action-button secondary-button">Откажи
-                            </button>
-                        </div>
-                    </form>
-                </div>
-            </div>
-
-            <div class="lists-grid">
-                {% for list in user_lists %}
-                    <div class="list-card">
-                        <a href="{% url 'view_list' list.id %}" class="list-card-link">
-                            <h3 class="list-title">{{ list.name }}</h3>
-                            <div class="list-meta">
-                            <span class="meta-item">
-                                <i class="fas fa-shopping-basket"></i> {{ list.items.count }} продукти
-                            </span>
-                                <span class="meta-item">
-                                <i class="far fa-calendar-alt"></i> {{ list.created_at|date:"d.m.Y" }}
-                            </span>
-                            </div>
-                        </a>
-                        <form method="post" action="{% url 'delete_list' list.id %}" class="delete-list-form">
-                            {% csrf_token %}
-                            <button type="submit" class="action-button danger-button small-button">
-                                <i class="fas fa-trash-alt"></i> Избриши
-                            </button>
-                        </form>
-                    </div>
-                {% empty %}
-                    <div class="empty-lists-message">
-                        <i class="far fa-folder-open"></i>
-                        <p>Немате креирано листи.</p>
-                    </div>
-                {% endfor %}
-            </div>
-        </div>
-    </div>
-
+{% load category_filters %}
+{% load custom_filters %}
+
+<!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>
-       html, body {
-            height: 100%;
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            background-image: url('{% static "images/baner1.jpg" %}');
-            background-size: cover;
-            background-position: center;
-            background-repeat: no-repeat;
-            background-attachment: fixed;
+        /* 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;
-            overflow-x: hidden;
-       }
-
-        /* Base Styles - Consistent with shopping list */
-        .lists-wrapper {
+        }
+
+        .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;
-            box-sizing: border-box;
-            background: url('/static/images/background.jpg') no-repeat center center fixed;
-            background-size: cover;
-            min-height: 100vh;
-        }
-
-        .back-button {
+            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;
-            top: 20px;
-            left: 20px;
-            z-index: 10;
-        }
-
-        .lists-container {
+            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;
-            background: rgba(255, 255, 255, 0.85); /* Semi-transparent background */
-            border-radius: 10px;
-            box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
-            padding: 30px;
-            margin-top: 60px;
-        }
-
-        .lists-main-title {
+            border-radius: 2px;
+        }
+
+        .lists-actions {
+            margin-bottom: 20px;
             text-align: center;
-            color: #2c3e50;
-            margin-bottom: 30px;
-            font-size: 28px;
+        }
+
+        .action-button {
+            padding: 10px 25px;
+            font-size: 1rem;
+            background-color: #2e652e;
+            color: white;
+            border: none;
+            border-radius: 30px;
             font-weight: 600;
-        }
-
-        /* Action Buttons - Consistent style */
-        .lists-actions {
-            margin-bottom: 30px;
-            text-align: center;
-        }
-
-        .action-button {
+            cursor: pointer;
+            transition: background-color 0.3s ease, transform 0.3s ease;
             display: inline-flex;
             align-items: center;
             gap: 8px;
-            padding: 12px 25px;
-            border-radius: 6px;
-            font-weight: 500;
-            text-decoration: none;
-            transition: all 0.3s ease;
-            cursor: pointer;
-            border: 2px solid transparent;
-        }
-
-        .primary-button {
-            background-color: #3498db;
-            color: white;
-            border-color: #3498db;
-        }
-
-        .primary-button:hover {
-            background-color: #2980b9;
-            border-color: #2980b9;
+        }
+
+        .action-button:hover {
+            background-color: #1f3f1f;
+            transform: translateY(-2px);
         }
 
         .secondary-button {
-            background-color: #f8f9fa;
-            color: #495057;
-            border-color: #dee2e6;
+            background-color: #f5f5f5;
+            color: #2e652e;
         }
 
         .secondary-button:hover {
-            background-color: #e9ecef;
-            border-color: #ced4da;
+            background-color: #e0e8e0;
         }
 
         .danger-button {
             background-color: #e74c3c;
-            color: white;
-            border-color: #e74c3c;
         }
 
         .danger-button:hover {
-            background-color: #c0392b;
-            border-color: #c0392b;
-        }
-
-        .submit-button {
-            background-color: #28a745;
-            color: white;
-            border-color: #28a745;
-        }
-
-        .submit-button:hover {
-            background-color: #218838;
-            border-color: #218838;
-        }
-
-        .small-button {
-            padding: 8px 15px;
-            font-size: 14px;
-        }
-
-        /* Create List Form */
+            background-color: #c62828;
+        }
+
         .create-list-form {
             max-width: 500px;
-            margin: 20px auto 0;
-            padding: 20px;
-            background: #f8f9fa;
+            margin: 20px auto;
+            padding: 15px;
+            background: #f9f9f9;
             border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+            display: none;
         }
 
@@ -197,13 +414,14 @@
             width: 100%;
             padding: 12px 15px;
-            border: 1px solid #ced4da;
+            border: 1px solid #ddd;
             border-radius: 6px;
-            font-size: 16px;
-            transition: border-color 0.3s;
+            font-size: 1rem;
+            background-color: #f5f5f5;
         }
 
         .form-input:focus {
-            border-color: #3498db;
+            border-color: #2e652e;
             outline: none;
+            box-shadow: 0 0 0 3px rgba(46, 101, 46, 0.2);
         }
 
@@ -214,24 +432,22 @@
         }
 
-        /* Lists Grid */
         .lists-grid {
             display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
             gap: 20px;
         }
 
-        /* List Card */
         .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;
-            background: #fff;
-            border-radius: 8px;
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-            padding: 20px;
-            transition: transform 0.3s, box-shadow 0.3s;
         }
 
         .list-card:hover {
-            transform: translateY(-3px);
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+            transform: translateY(-5px);
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
         }
 
@@ -240,11 +456,28 @@
             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 {
-            color: #2c3e50;
-            margin: 0 0 15px 0;
-            font-size: 20px;
-            font-weight: 600;
+            font-weight: 500;
+            margin-bottom: 8px;
+            font-size: 14px;
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
         }
 
@@ -252,6 +485,7 @@
             display: flex;
             flex-direction: column;
-            gap: 8px;
-            color: #6c757d;
+            gap: 5px;
+            font-size: 12px;
+            color: #666;
         }
 
@@ -259,60 +493,139 @@
             display: flex;
             align-items: center;
-            gap: 8px;
-            font-size: 14px;
+            gap: 5px;
         }
 
         .delete-list-form {
             position: absolute;
-            top: 15px;
-            right: 15px;
-        }
-
-        /* Empty State */
+            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;
-            color: #6c757d;
-        }
-
-        .empty-lists-message i {
-            font-size: 40px;
-            margin-bottom: 15px;
-            color: #adb5bd;
-        }
-
-        .empty-lists-message p {
-            font-size: 18px;
-            margin: 0;
-        }
-
-        /* Icons */
-        i {
+            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;
         }
 
-        /* Responsive Styles */
+        .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) {
-            .lists-container {
-                padding: 20px;
+            .main-header {
+                display: none;
+            }
+
+            #mobile-header {
+                display: flex;
+            }
+
+            .main-content {
+                padding: 10px;
+            }
+
+            .content-area {
+                padding: 15px;
+                border-radius: 15px;
             }
 
             .lists-main-title {
-                font-size: 24px;
+                font-size: 1.2rem;
             }
 
             .lists-grid {
-                grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
-            }
-        }
-
-        @media (max-width: 480px) {
-            .lists-container {
-                padding: 15px;
-            }
-
-            .lists-main-title {
-                font-size: 20px;
+                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;
             }
 
@@ -320,4 +633,6 @@
                 width: 100%;
                 justify-content: center;
+                padding: 12px;
+                border-radius: 25px;
             }
 
@@ -329,269 +644,390 @@
                 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>
-    <style>
-        .lists-wrapper {
-            width: 100%;
-            padding: 20px;
-            box-sizing: border-box;
-            {#background: linear-gradient(to right, #3ba431, #2e652e);#}
-            background-size: cover;
-            min-height: 100vh;
-        }
-
-        .back-button {
-            position: absolute;
-            top: 20px;
-            left: 20px;
-            z-index: 10;
-        }
-
-        .lists-container {
-            max-width: 1200px;
-            margin: 0 auto;
-            background: rgba(255, 255, 255, 0.95);
-            border-radius: 12px;
-            box-shadow: 0 4px 25px rgba(0, 0, 0, 0.15);
-            padding: 30px;
-            margin-top: 60px;
-        }
-
-        .lists-main-title {
-            text-align: center;
-            color: #2e7d32; /* Darker green */
-            margin-bottom: 30px;
-            font-size: 32px;
-            font-weight: 700;
-        }
-
-        .lists-actions {
-            margin-bottom: 30px;
-            text-align: center;
-        }
-
-        .action-button {
-            display: inline-flex;
-            align-items: center;
-            gap: 8px;
-            padding: 12px 25px;
-            border-radius: 6px;
-            font-weight: 500;
-            text-decoration: none;
-            transition: all 0.3s ease;
-            cursor: pointer;
-            border: 2px solid transparent;
-        }
-
-        .primary-button {
-            background-color: #43a047; /* Green */
-            color: white;
-            border-color: #43a047;
-        }
-
-        .primary-button:hover {
-            background-color: #388e3c;
-            border-color: #388e3c;
-        }
-
-        .secondary-button {
-            background-color: #e8f5e9;
-            color: #2e7d32;
-            border-color: #c8e6c9;
-        }
-
-        .secondary-button:hover {
-            background-color: #d0f0d0;
-            border-color: #b2dfdb;
-        }
-
-        .danger-button {
-            background-color: #ef5350;
-            color: white;
-            border-color: #ef5350;
-        }
-
-        .danger-button:hover {
-            background-color: #c62828;
-            border-color: #c62828;
-        }
-
-        .submit-button {
-            background-color: #66bb6a;
-            color: white;
-            border-color: #66bb6a;
-        }
-
-        .submit-button:hover {
-            background-color: #43a047;
-            border-color: #43a047;
-        }
-
-        .small-button {
-            padding: 8px 15px;
-            font-size: 14px;
-        }
-
-        .create-list-form {
-            max-width: 500px;
-            margin: 20px auto 0;
-            padding: 20px;
-            background: #f1f8e9;
-            border-radius: 8px;
-        }
-
-        .form-group {
-            margin-bottom: 15px;
-        }
-
-        .form-input {
-            width: 100%;
-            padding: 12px 15px;
-            border: 1px solid #aed581;
-            border-radius: 6px;
-            font-size: 16px;
-            transition: border-color 0.3s;
-            background-color: #ffffff;
-        }
-
-        .form-input:focus {
-            border-color: #66bb6a;
-            outline: none;
-        }
-
-        .form-actions {
-            display: flex;
-            gap: 10px;
-            justify-content: flex-end;
-        }
-
-        .lists-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-            gap: 20px;
-        }
-
-        .list-card {
-            position: relative;
-            background: #ffffff;
-            border-left: 5px solid #81c784;
-            border-radius: 8px;
-            box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
-            padding: 20px;
-            transition: transform 0.3s, box-shadow 0.3s;
-        }
-
-        .list-card:hover {
-            transform: translateY(-3px);
-            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
-        }
-
-        .list-card-link {
-            text-decoration: none;
-            color: inherit;
-            display: block;
-        }
-
-        .list-title {
-            color: #2e652e;
-            margin: 0 0 15px 0;
-            font-size: 20px;
-            font-weight: 600;
-        }
-
-        .list-meta {
-            display: flex;
-            flex-direction: column;
-            gap: 8px;
-            color: #549249;
-        }
-
-        .meta-item {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            font-size: 14px;
-        }
-
-        .delete-list-form {
-            position: absolute;
-            top: 15px;
-            right: 15px;
-        }
-
-        .empty-lists-message {
-            grid-column: 1 / -1;
-            text-align: center;
-            padding: 40px 20px;
-            color: #2e652e;
-        }
-
-        .empty-lists-message i {
-            font-size: 40px;
-            margin-bottom: 15px;
-            color: #549249;
-        }
-
-        .empty-lists-message p {
-            font-size: 18px;
-            margin: 0;
-        }
-
-        i {
-            font-size: 14px;
-        }
-
-        @media (max-width: 768px) {
-            .lists-container {
-                padding: 20px;
-            }
-
-            .lists-main-title {
-                font-size: 26px;
-            }
-
-            .lists-grid {
-                grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
-            }
-        }
-
-        @media (max-width: 480px) {
-            .lists-container {
-                padding: 15px;
-            }
-
-            .lists-main-title {
-                font-size: 22px;
-            }
-
-            .action-button {
-                width: 100%;
-                justify-content: center;
-            }
-
-            .form-actions {
-                flex-direction: column;
-            }
-
-            .form-actions button {
-                width: 100%;
-            }
-        }
-    </style>
-
-
-    <script>
-        document.getElementById('create-list-btn').addEventListener('click', function () {
-            document.getElementById('create-list-form').style.display = 'block';
-            this.style.display = 'none';
+</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>
+
+<!-- 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 %}
+                <form method="post" action="{% url 'logout' %}" class="auth-form">
+                    {% csrf_token %}
+                    <button type="submit" class="logout-btn" style="color: white">
+                        <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 'view_lists' %}">Листи</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>
+<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" 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 '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>
+
+<!-- Main Content -->
+<div class="main-content">
+    <main class="content-area">
+        <div class="page-header">
+            <h1 class="lists-main-title">Мои листи</h1>
+            <div class="header-decoration"></div>
+        </div>
+        <div class="lists-actions">
+            <button id="create-list-btn" class="action-button">
+                <i class="fas fa-plus"></i> Нова листа
+            </button>
+            <div id="create-list-form" class="create-list-form">
+                <form method="post" action="{% url 'create_list' %}">
+                    {% csrf_token %}
+                    <div class="form-group">
+                        <input type="text" name="list_name" placeholder="Име на листата" required
+                               class="form-input">
+                    </div>
+                    <div class="form-actions">
+                        <button type="submit" class="action-button">Креирај</button>
+                        <button type="button" id="cancel-create" class="action-button secondary-button">Откажи</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+        <div class="lists-grid">
+            {% for list in user_lists %}
+                <div class="list-card">
+                    <a href="{% url 'view_list' list.id %}" class="list-card-link">
+                        <div class="list-icon">
+                            <i class="fas fa-list-ul"></i>
+                        </div>
+                        <h3 class="list-title">{{ list.name }}</h3>
+                        <div class="list-meta">
+                                <span class="meta-item">
+                                    <i class="fas fa-shopping-basket"></i> {{ list.items.count }} продукти
+                                </span>
+                            <span class="meta-item">
+                                    <i class="far fa-calendar-alt"></i> {{ list.created_at|date:"d.m.Y" }}
+                                </span>
+                        </div>
+                    </a>
+                    <form method="post" action="{% url 'delete_list' list.id %}" class="delete-list-form">
+                        {% csrf_token %}
+                        <button type="submit" class="action-button danger-button">
+                            <i class="fas fa-trash-alt"></i>
+                        </button>
+                    </form>
+                </div>
+            {% empty %}
+                <div class="empty-lists-message">
+                    <div class="empty-icon">
+                        <i class="far fa-folder-open"></i>
+                    </div>
+                    <h3>Немате креирано листи</h3>
+                    <p>Кликнете на "Нова листа" за да креирате ваша прва листа</p>
+                </div>
+            {% endfor %}
+        </div>
+    </main>
+</div>
+
+<!-- Footer -->
+<footer>
+    <div class="footer-content">
+        <div class="footer-section">
+            <h3>За нас</h3>
+            <p>Ние сме водечка онлајн продавница со најдобри цени и квалитетни производи.</p>
+        </div>
+        <div class="footer-section">
+            <h3>Контакт</h3>
+            <p>Телефон: +389 70 123 456</p>
+            <p>Email: kontakt@nasataprodavnica.com</p>
+            <p>Адреса: Улица ББ, Скопје</p>
+        </div>
+        <div class="footer-section">
+            <h3>Брзи линкови</h3>
+            <a href="{% url 'home' %}">Дома</a>
+            <a href="{% url 'product_list' %}">Каталог</a>
+            <a href="#">Услови на користење</a>
+            <a href="#">Политика на приватност</a>
+        </div>
+        <div class="footer-section social">
+            <h3>Следете нè</h3>
+            <a href="#" target="_blank"><i class="fab fa-facebook-f"></i> Facebook</a>
+            <a href="#" target="_blank"><i class="fab fa-instagram"></i> Instagram</a>
+            <a href="#" target="_blank"><i class="fab fa-twitter"></i> Twitter</a>
+        </div>
+    </div>
+    <div class="copyright">
+        © 2023 Нашата Продавница. Сите права се задржани.
+    </div>
+</footer>
+
+<script>
+    document.addEventListener('DOMContentLoaded', function () {
+        // Create list form toggle
+        const createBtn = document.getElementById('create-list-btn');
+        const createForm = document.getElementById('create-list-form');
+        const cancelBtn = document.getElementById('cancel-create');
+
+        if (createBtn && createForm && cancelBtn) {
+            createBtn.addEventListener('click', function () {
+                createForm.style.display = 'block';
+                this.style.display = 'none';
+            });
+
+            cancelBtn.addEventListener('click', function () {
+                createForm.style.display = 'none';
+                createBtn.style.display = 'inline-flex';
+            });
+        }
+
+        // Auto-dismiss messages
+        setTimeout(() => {
+            document.querySelectorAll('.alert').forEach(alert => {
+                alert.style.opacity = '0';
+                setTimeout(() => alert.remove(), 300);
+            });
+        }, 5000);
+
+        // Mobile menu toggle
+        function toggleMobileMenu() {
+            const menu = document.getElementById('mobile-menu');
+            const overlay = document.getElementById('overlay');
+            menu.classList.toggle('open');
+            overlay.classList.toggle('active');
+        }
+
+        const menuToggle = document.querySelector('.menu-toggle');
+        const mobileMenu = document.getElementById('mobile-menu');
+        const overlay = document.getElementById('overlay');
+
+        if (menuToggle && mobileMenu && overlay) {
+            menuToggle.addEventListener('click', toggleMobileMenu);
+            overlay.addEventListener('click', toggleMobileMenu);
+            document.querySelector('.close-btn').addEventListener('click', toggleMobileMenu);
+        }
+
+        // Search suggestions and transliteration
+        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';
+                }
+            });
         });
-
-        document.getElementById('cancel-create').addEventListener('click', function () {
-            document.getElementById('create-list-form').style.display = 'none';
-            document.getElementById('create-list-btn').style.display = 'inline-flex';
-        });
-    </script>
-
-    <!-- Include Font Awesome for icons (add this in your base template) -->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
-{% endblock %}
+</script>
+</body>
+</html>
Index: main/templates/main/logout.html
===================================================================
--- main/templates/main/logout.html	(revision 52c9c87d52fd2d6be3621074ff2ed6eac3c913be)
+++ main/templates/main/logout.html	(revision fef3b4d766831b584534962ac137a311239ecc91)
@@ -5,5 +5,5 @@
         <small class="text-muted">
             <a href="{% url 'login' %}">Log In Again</a> or
-            <a href="{% url 'home' %}">Return to Homepage</a>
+            <a href="{% url 'base' %}">Return to Homepage</a>
         </small>
     </div>
Index: main/templates/main/main.html
===================================================================
--- main/templates/main/main.html	(revision fef3b4d766831b584534962ac137a311239ecc91)
+++ main/templates/main/main.html	(revision fef3b4d766831b584534962ac137a311239ecc91)
@@ -0,0 +1,608 @@
+{% load category_filters %}
+{% load custom_filters %}
+{% load static %}
+
+<!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>Price Comparison | Shop Smart</title>
+    <style>
+        /* Reset and Base Styles */
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: Arial, sans-serif;
+            color: #333;
+            line-height: 1.5;
+            background-color: #f5f5f5;
+        }
+
+        a {
+            text-decoration: none;
+            color: inherit;
+        }
+
+        ul {
+            list-style: none;
+        }
+
+        /* Header Styles */
+        .header {
+            background-color: #fff;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+            position: sticky;
+            top: 0;
+            z-index: 1000;
+        }
+
+        .header-top {
+            background-color: #f5f5f5;
+            padding: 8px 0;
+            border-bottom: 1px solid #e5e5e5;
+        }
+
+        .header-top-container {
+            max-width: 1200px;
+            margin: 0 auto;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 0 15px;
+        }
+
+        .header-logo {
+            display: flex;
+            align-items: center;
+        }
+
+        .header-logo img {
+            height: 40px;
+        }
+
+        .header-search {
+            flex-grow: 1;
+            margin: 0 20px;
+            position: relative;
+        }
+
+        .header-search input {
+            width: 100%;
+            padding: 10px 15px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            font-size: 16px;
+        }
+
+        .header-search button {
+            position: absolute;
+            right: 10px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: none;
+            border: none;
+            color: #666;
+            cursor: pointer;
+        }
+
+        .header-actions {
+            display: flex;
+            align-items: center;
+        }
+
+        .header-actions a {
+            margin-left: 15px;
+            font-size: 14px;
+            color: #666;
+        }
+
+        .header-actions a:hover {
+            color: #00a0e3;
+        }
+
+        .header-nav {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 0 15px;
+        }
+
+        .header-nav ul {
+            display: flex;
+        }
+
+        .header-nav li {
+            padding: 15px 10px;
+            font-size: 14px;
+            font-weight: bold;
+            color: #666;
+        }
+
+        .header-nav li:hover {
+            color: #00a0e3;
+            border-bottom: 2px solid #00a0e3;
+        }
+
+        /* Main Content */
+        .container {
+            max-width: 1200px;
+            margin: 20px auto;
+            padding: 0 15px;
+        }
+
+        /* Hero Banner */
+        .hero-banner {
+            background-color: #00a0e3;
+            color: white;
+            padding: 30px;
+            border-radius: 4px;
+            margin-bottom: 20px;
+            background-image: linear-gradient(to right, #00a0e3, #0083c1);
+        }
+
+        .hero-banner h1 {
+            font-size: 28px;
+            margin-bottom: 10px;
+        }
+
+        .hero-banner p {
+            font-size: 16px;
+            margin-bottom: 20px;
+        }
+
+        /* Categories */
+        .categories-section {
+            background-color: #fff;
+            border-radius: 4px;
+            padding: 20px;
+            margin-bottom: 20px;
+        }
+
+        .section-title {
+            font-size: 20px;
+            margin-bottom: 20px;
+            color: #333;
+            font-weight: bold;
+        }
+
+        .categories-grid {
+            display: grid;
+            grid-template-columns: repeat(6, 1fr);
+            gap: 15px;
+        }
+
+        .category-card {
+            text-align: center;
+            padding: 15px 10px;
+            border-radius: 4px;
+            background-color: #f9f9f9;
+            transition: all 0.3s ease;
+        }
+
+        .category-card:hover {
+            background-color: #e9f7fe;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+        }
+
+        .category-card img {
+            width: 40px;
+            height: 40px;
+            margin-bottom: 10px;
+        }
+
+        .category-card span {
+            font-size: 12px;
+            display: block;
+        }
+
+        /* Products Grid */
+        .products-section {
+            background-color: #fff;
+            border-radius: 4px;
+            padding: 20px;
+            margin-bottom: 20px;
+        }
+
+        .products-grid {
+            display: grid;
+            grid-template-columns: repeat(4, 1fr);
+            gap: 20px;
+        }
+
+        .product-card {
+            border: 1px solid #eee;
+            border-radius: 4px;
+            padding: 15px;
+            transition: all 0.3s ease;
+        }
+
+        .product-card:hover {
+            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+        }
+
+        .product-image {
+            height: 120px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-bottom: 15px;
+        }
+
+        .product-image img {
+            max-height: 100%;
+            max-width: 100%;
+        }
+
+        .product-title {
+            font-size: 14px;
+            margin-bottom: 10px;
+            height: 40px;
+            overflow: hidden;
+        }
+
+        .product-price {
+            font-size: 18px;
+            font-weight: bold;
+            color: #e60000;
+            margin-bottom: 10px;
+        }
+
+        .product-old-price {
+            font-size: 14px;
+            color: #999;
+            text-decoration: line-through;
+            margin-right: 5px;
+        }
+
+        .product-shop {
+            font-size: 12px;
+            color: #666;
+            margin-bottom: 10px;
+        }
+
+        .product-rating {
+            color: #ffc107;
+            font-size: 12px;
+            margin-bottom: 10px;
+        }
+
+        .product-btn {
+            display: block;
+            background-color: #00a0e3;
+            color: white;
+            text-align: center;
+            padding: 8px;
+            border-radius: 4px;
+            font-size: 14px;
+            transition: background-color 0.3s ease;
+        }
+
+        .product-btn:hover {
+            background-color: #0083c1;
+        }
+
+        /* Footer */
+        .footer {
+            background-color: #333;
+            color: #fff;
+            padding: 40px 0;
+        }
+
+        .footer-container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 0 15px;
+            display: grid;
+            grid-template-columns: repeat(4, 1fr);
+            gap: 30px;
+        }
+
+        .footer-column h3 {
+            font-size: 16px;
+            margin-bottom: 15px;
+            color: #fff;
+        }
+
+        .footer-column ul li {
+            margin-bottom: 10px;
+            font-size: 14px;
+            color: #ccc;
+        }
+
+        .footer-column ul li:hover {
+            color: #fff;
+        }
+
+        .footer-bottom {
+            max-width: 1200px;
+            margin: 30px auto 0;
+            padding: 20px 15px 0;
+            border-top: 1px solid #444;
+            font-size: 12px;
+            color: #999;
+        }
+
+        /* Mobile Menu */
+        .mobile-menu-btn {
+            display: none;
+            background: none;
+            border: none;
+            font-size: 20px;
+            color: #666;
+            cursor: pointer;
+        }
+
+        /* Responsive Styles */
+        @media (max-width: 1024px) {
+            .categories-grid {
+                grid-template-columns: repeat(4, 1fr);
+            }
+
+            .products-grid {
+                grid-template-columns: repeat(3, 1fr);
+            }
+        }
+
+        @media (max-width: 768px) {
+            .header-top-container {
+                flex-wrap: wrap;
+            }
+
+            .header-search {
+                order: 3;
+                margin: 10px 0 0;
+                width: 100%;
+            }
+
+            .mobile-menu-btn {
+                display: block;
+            }
+
+            .header-nav {
+                display: none;
+            }
+
+            .categories-grid {
+                grid-template-columns: repeat(3, 1fr);
+            }
+
+            .products-grid {
+                grid-template-columns: repeat(2, 1fr);
+            }
+
+            .footer-container {
+                grid-template-columns: repeat(2, 1fr);
+            }
+        }
+
+        @media (max-width: 480px) {
+            .categories-grid {
+                grid-template-columns: repeat(2, 1fr);
+            }
+
+            .products-grid {
+                grid-template-columns: 1fr;
+            }
+
+            .footer-container {
+                grid-template-columns: 1fr;
+            }
+        }
+    </style>
+</head>
+<body>
+    <!-- Header -->
+    <header class="header">
+        <div class="header-top">
+            <div class="header-top-container">
+                <button class="mobile-menu-btn">
+                    <i class="fas fa-bars"></i>
+                </button>
+
+                <div class="header-logo">
+                    <a href="{% url 'home' %}">
+                        <img src="{% static 'images/shtedko_official1.png' %}" alt="Price Comparison">
+                    </a>
+                </div>
+
+                <div class="header-search">
+                    <input type="text" placeholder="What are you looking for?">
+                    <button type="submit"><i class="fas fa-search"></i></button>
+                </div>
+
+                <div class="header-actions">
+                    {% if user.is_authenticated %}
+                        <a href="{% url 'logout' %}"><i class="fas fa-sign-out-alt"></i> Logout</a>
+                    {% else %}
+                        <a href="{% url 'login' %}"><i class="fas fa-user"></i> Login</a>
+                        <a href="{% url 'register' %}"><i class="fas fa-user-plus"></i> Register</a>
+                    {% endif %}
+                    <a href="#"><i class="fas fa-heart"></i> Favorites</a>
+                </div>
+            </div>
+        </div>
+
+        <nav class="header-nav">
+            <ul>
+                <li><a href="{% url 'home' %}">Home</a></li>
+                <li><a href="{% url 'product_list' %}">Products</a></li>
+                <li><a href="#">Categories</a></li>
+                <li><a href="#">Deals</a></li>
+                <li><a href="#">Stores</a></li>
+                <li><a href="{% url 'stats' %}">Statistics</a></li>
+            </ul>
+        </nav>
+    </header>
+
+    <!-- Main Content -->
+    <main class="container">
+        <!-- Hero Banner -->
+        <section class="hero-banner">
+            <h1>Find the best prices for your favorite products</h1>
+            <p>Compare prices from hundreds of stores and save money on every purchase</p>
+            <a href="{% url 'product_list' %}" class="product-btn">Browse Products</a>
+        </section>
+
+        <!-- Categories Section -->
+        <section class="categories-section">
+            <h2 class="section-title">Popular Categories</h2>
+            <div class="categories-grid">
+                {% for category in categories|slice:":12" %}
+                <a href="{% url 'product_list' %}?category={{ category }}" class="category-card">
+                    <img src="{% static 'images/categories/' %}{{ category|lower }}.jpg"
+                         alt="{{ category }}"
+                         onerror="this.src='{% static 'images/categories/default.jpg' %}'">
+                    <span>{{ category|translate_category }}</span>
+                </a>
+                {% endfor %}
+            </div>
+        </section>
+
+        <!-- Top Deals Section -->
+        <section class="products-section">
+            <h2 class="section-title">Today's Best Deals</h2>
+            <div class="products-grid">
+                {% for product in top_deals|slice:":8" %}
+                <div class="product-card">
+                    <div class="product-image">
+                        <img src="{{ product.image_url }}" alt="{{ product.name }}">
+                    </div>
+                    <div class="product-title">{{ product.name }}</div>
+                    <div class="product-price">
+                        {% if product.price > product.actual_price %}
+                            <span class="product-old-price">{{ product.price }} ден.</span>
+                        {% endif %}
+                        {{ product.actual_price }} ден.
+                    </div>
+                    <div class="product-shop">{{ product.store.name }}</div>
+                    <div class="product-rating">
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="far fa-star"></i>
+                    </div>
+                    <a href="#" class="product-btn">View Deal</a>
+                </div>
+                {% endfor %}
+            </div>
+        </section>
+
+        <!-- Popular Products Section -->
+        <section class="products-section">
+            <h2 class="section-title">Most Popular Products</h2>
+            <div class="products-grid">
+                {% for product in popular_products|slice:":8" %}
+                <div class="product-card">
+                    <div class="product-image">
+                        <img src="{{ product.image_url }}" alt="{{ product.name }}">
+                    </div>
+                    <div class="product-title">{{ product.name }}</div>
+                    <div class="product-price">
+                        {% if product.price > product.actual_price %}
+                            <span class="product-old-price">{{ product.price }} ден.</span>
+                        {% endif %}
+                        {{ product.actual_price }} ден.
+                    </div>
+                    <div class="product-shop">{{ product.store.name }}</div>
+                    <div class="product-rating">
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="far fa-star"></i>
+                    </div>
+                    <a href="#" class="product-btn">View Deal</a>
+                </div>
+                {% endfor %}
+            </div>
+        </section>
+    </main>
+
+    <!-- Footer -->
+    <footer class="footer">
+        <div class="footer-container">
+            <div class="footer-column">
+                <h3>About Us</h3>
+                <ul>
+                    <li><a href="#">About Company</a></li>
+                    <li><a href="#">Careers</a></li>
+                    <li><a href="#">Press</a></li>
+                    <li><a href="#">Blog</a></li>
+                </ul>
+            </div>
+
+            <div class="footer-column">
+                <h3>Help & Contact</h3>
+                <ul>
+                    <li><a href="#">Help Center</a></li>
+                    <li><a href="#">Contact Us</a></li>
+                    <li><a href="#">Shipping Information</a></li>
+                    <li><a href="#">Returns & Refunds</a></li>
+                </ul>
+            </div>
+
+            <div class="footer-column">
+                <h3>Legal</h3>
+                <ul>
+                    <li><a href="#">Terms of Service</a></li>
+                    <li><a href="#">Privacy Policy</a></li>
+                    <li><a href="#">Cookie Policy</a></li>
+                    <li><a href="#">Imprint</a></li>
+                </ul>
+            </div>
+
+            <div class="footer-column">
+                <h3>Connect With Us</h3>
+                <ul>
+                    <li><a href="#"><i class="fab fa-facebook"></i> Facebook</a></li>
+                    <li><a href="#"><i class="fab fa-twitter"></i> Twitter</a></li>
+                    <li><a href="#"><i class="fab fa-instagram"></i> Instagram</a></li>
+                    <li><a href="#"><i class="fab fa-youtube"></i> YouTube</a></li>
+                </ul>
+            </div>
+        </div>
+
+        <div class="footer-bottom">
+            <p>© 2023 Price Comparison. All rights reserved. Prices and availability are subject to change.</p>
+        </div>
+    </footer>
+
+    <script>
+        // Mobile menu toggle
+        document.querySelector('.mobile-menu-btn').addEventListener('click', function() {
+            document.querySelector('.header-nav').style.display =
+                document.querySelector('.header-nav').style.display === 'block' ? 'none' : 'block';
+        });
+
+        // Responsive adjustments
+        function adjustLayout() {
+            if (window.innerWidth < 768) {
+                // Mobile specific adjustments
+            } else {
+                // Desktop adjustments
+                document.querySelector('.header-nav').style.display = 'block';
+            }
+        }
+
+        window.addEventListener('resize', adjustLayout);
+        adjustLayout();
+
+        // Product card animations
+        document.querySelectorAll('.product-card').forEach(card => {
+            card.addEventListener('mouseenter', function() {
+                this.style.transform = 'translateY(-5px)';
+            });
+
+            card.addEventListener('mouseleave', function() {
+                this.style.transform = 'translateY(0)';
+            });
+        });
+    </script>
+</body>
+</html>
Index: main/templates/main/nearby_stores.html
===================================================================
--- main/templates/main/nearby_stores.html	(revision 52c9c87d52fd2d6be3621074ff2ed6eac3c913be)
+++ main/templates/main/nearby_stores.html	(revision fef3b4d766831b584534962ac137a311239ecc91)
@@ -1,54 +1,918 @@
+{% load static %}
+
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
-    <title>Nearby Stores</title>
+    <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">
+    <!-- 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 */
         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;
+            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%;
+        }
+
+        /* Nearby Stores Page Styles */
+        .stores-wrapper {
+            flex: 1;
             padding: 20px;
-        }
-
-        h1, h2 {
-            color: #2c3e50;
-        }
-
-        table {
+            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;
+        }
+
+        .back-button a {
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            padding: 10px 20px;
+            background-color: #e8f5e9;
+            color: #2e652e;
+            border-radius: 30px;
+            text-decoration: none;
+            font-weight: 600;
+            transition: all 0.3s ease;
+            border: 2px solid #c8e6c9;
+        }
+
+        .back-button a:hover {
+            background-color: #d0f0d0;
+            border-color: #b2dfdb;
+            transform: translateY(-2px);
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+        }
+
+        .store-search-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%;
-            border-collapse: collapse;
-            margin-top: 15px;
-        }
-
-        th, td {
-            padding: 12px;
-            border: 1px solid #ddd;
-            text-align: left;
-        }
-
-        tr:nth-child(even) {
-            background-color: #f8f8f8;
+            padding: 12px 15px;
+            border: 2px solid #aed581;
+            border-radius: 6px;
+            font-size: 16px;
+            background-color: #fff;
+            transition: all 0.3s ease;
+        }
+
+        .form-input:focus {
+            border-color: #2e652e;
+            outline: none;
+            box-shadow: 0 0 8px rgba(46, 101, 46, 0.3);
+        }
+
+        .form-actions {
+            text-align: center;
+            margin-top: 20px;
+            display: flex;
+            gap: 15px;
+            justify-content: center;
+        }
+
+        .action-button {
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            padding: 12px 25px;
+            border-radius: 30px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            border: 2px solid transparent;
+        }
+
+        .primary-button {
+            background-color: #2e652e;
+            color: white;
+            border-color: #2e652e;
+        }
+
+        .primary-button:hover {
+            background-color: #1f3f1f;
+            border-color: #1f3f1f;
+            transform: translateY(-2px);
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+        }
+
+        .secondary-button {
+            background-color: #e8f5e9;
+            color: #2e652e;
+            border-color: #c8e6c9;
+        }
+
+        .secondary-button:hover {
+            background-color: #d0f0d0;
+            border-color: #b2dfdb;
+            transform: translateY(-2px);
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+        }
+
+        .stores-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+            gap: 20px;
+            margin-top: 30px;
+        }
+
+        .store-card {
+            background-color: white;
+            border-radius: 8px;
+            padding: 20px;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+            transition: all 0.3s ease;
+            border-left: 4px solid #81c784;
+        }
+
+        .store-card:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+        }
+
+        .store-title {
+            color: #2e652e;
+            margin: 0 0 15px 0;
+            font-size: 18px;
+            font-weight: 600;
+        }
+
+        .store-meta {
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+        }
+
+        .meta-item {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            color: #555;
+        }
+
+        .meta-item i {
+            color: #2e652e;
+            width: 20px;
+            text-align: center;
+        }
+
+        .no-stores {
+            text-align: center;
+            padding: 30px;
+            background-color: #fff3e0;
+            border-radius: 8px;
+            color: #e65100;
+            border-left: 4px solid #e65100;
+            animation: pulse 1.5s infinite;
+        }
+
+        @keyframes pulse {
+            0% { transform: scale(1); }
+            50% { transform: scale(1.02); }
+            100% { transform: scale(1); }
+        }
+
+        .no-stores i {
+            font-size: 40px;
+            margin-bottom: 15px;
+            color: #e65100;
+        }
+
+        .no-stores p {
+            margin: 5px 0;
+            font-size: 16px;
+        }
+
+        /* 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 */
+        @media (max-width: 768px) {
+            .main-header {
+                display: none;
+            }
+
+            #mobile-header {
+                display: flex;
+            }
+
+            .stores-container {
+                padding: 20px;
+                margin-top: 20px;
+            }
+
+            .form-row {
+                flex-direction: column;
+                gap: 15px;
+            }
+
+            .stores-grid {
+                grid-template-columns: 1fr;
+            }
+
+            #map-container {
+                height: 300px;
+            }
+        }
+
+        @media (max-width: 480px) {
+            .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;
+            }
         }
     </style>
 </head>
 <body>
-<h2>Nearby Stores</h2>
-
-<p>Your location: Latitude {{ latitude }}, Longitude {{ longitude }}</p>
-<p>Your car's fuel consumption: {{ fuel_usage }} L/100km</p>
-<p>Store chain: {{ selected_store }}</p>
-
-{% if nearby_stores %}
-    <h3>Closest Stores:</h3>
-    <ul>
-        {% for store in nearby_stores %}
-            <li>
-                {{ store.name }} -
-                {{ store.distance|floatformat:2 }} km away -
-                {{ store.fuel|floatformat:2 }} liters used
-            </li>
-        {% endfor %}
-    </ul>
-{% else %}
-    <p>No stores found for the selected chain.</p>
-{% endif %}
+
+<!-- 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">
+        <div class="back-button">
+            <a href="javascript:history.back()" class="action-button secondary-button">
+                <i class="fas fa-arrow-left"></i> Назад
+            </a>
+        </div>
+
+        <h1 class="stores-main-title">Најблиски продавници</h1>
+
+        <form method="get" action="{% url 'nearby_stores' %}" class="store-search-form">
+            <div class="form-row">
+                <div class="form-group">
+                    <label for="latitude">Latitude:</label>
+                    <input type="text" id="latitude" name="latitude" required class="form-input">
+                </div>
+                <div class="form-group">
+                    <label for="longitude">Longitude:</label>
+                    <input type="text" id="longitude" name="longitude" required class="form-input">
+                </div>
+            </div>
+
+            <div class="form-row">
+                <div class="form-group">
+                    <label for="fuel_consumption">Потрошувачка на гориво (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>
+                    <select name="store_chain" id="store_chain" required class="form-input">
+                        <option value="Reptil">Reptil</option>
+                        <option value="Vero">Vero</option>
+                        <option value="Ramstore">Ramstore</option>
+                    </select>
+                </div>
+            </div>
+
+            <div class="form-actions">
+                <button type="button" onclick="getLocation()" class="action-button secondary-button">
+                    <i class="fas fa-location-arrow"></i> Користи моја локација
+                </button>
+                <button type="submit" class="action-button primary-button">
+                    <i class="fas fa-search"></i> Пронајди
+                </button>
+            </div>
+        </form>
+
+        {% if nearest_stores %}
+            <h2 style="color: #2e652e; font-size: 20px; margin-top: 30px; margin-bottom: 15px;">Најблиски
+                продавници</h2>
+            <div class="stores-grid">
+                {% for store in nearest_stores|slice:":5" %}
+                    <div class="store-card">
+                        <h3 class="store-title">{{ store.store }}</h3>
+                        <div class="store-meta">
+                            <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>
+                        </div>
+                    </div>
+                {% endfor %}
+            </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">
+                <div id="map"></div>
+            </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>
+        {% else %}
+            <div class="no-stores">
+                <i class="fas fa-exclamation-circle"></i>
+                <p>Нема пронајдени продавници.</p>
+            </div>
+        {% endif %}
+
+        {% if least_gas_stores %}
+            <h2 style="color: #2e652e; font-size: 20px; margin-top: 30px; margin-bottom: 15px;">Продавници со најмало
+                користење на гориво</h2>
+            <div class="stores-grid">
+                {% for store in least_gas_stores|slice:":5" %}
+                    <div class="store-card">
+                        <h3 class="store-title">{{ store.store }}</h3>
+                        <div class="store-meta">
+                            <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>
+                        </div>
+                    </div>
+                {% endfor %}
+            </div>
+        {% endif %}
+    </div>
+</div>
+
+<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
+        integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
+        crossorigin=""></script>
+
+<script>
+    function getLocation() {
+        if (navigator.geolocation) {
+            navigator.geolocation.getCurrentPosition(function (position) {
+                document.getElementById("latitude").value = position.coords.latitude;
+                document.getElementById("longitude").value = position.coords.longitude;
+            }, function (error) {
+                alert("Грешка при геолокација: " + error.message);
+            });
+        } else {
+            alert("Геолокацијата не е поддржана од овој пребарувач.");
+        }
+    }
+
+    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;
+    let storeMarkers = [];
+    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 %}
+    });
+
+    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],
+                zoom: 13
+            });
+
+            // 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',
+                maxZoom: 18
+            }).addTo(map);
+
+            // Add user marker
+            userMarker = L.marker([userLat, userLng], {
+                icon: L.icon({
+                    iconUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon.png',
+                    iconSize: [25, 41],
+                    iconAnchor: [12, 41],
+                    popupAnchor: [1, -34]
+                })
+            }).addTo(map);
+            userMarker.bindPopup("<b>Вашата локација</b>").openPopup();
+
+            // Clear previous markers and lines
+            storeMarkers.forEach(marker => map.removeLayer(marker));
+            routeLines.forEach(line => map.removeLayer(line));
+            storeMarkers = [];
+            routeLines = [];
+
+            // Add store markers
+            const stores = [
+                {% for store in nearest_stores %}
+                    {
+                        name: "{{ store.store|escapejs }}",
+                        latitude: {{ store.latitude }},
+                        longitude: {{ store.longitude }},
+                        distance: {{ store.distance_km }},
+                        duration: "{{ store.duration|escapejs }}",
+                        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 %}
+            ];
+
+            stores.forEach(store => {
+                const storeMarker = L.marker([store.latitude, store.longitude], {
+                    icon: L.icon({
+                        iconUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon-2x.png',
+                        iconSize: [25, 41],
+                        iconAnchor: [12, 41],
+                        popupAnchor: [1, -34]
+                    })
+                }).addTo(map);
+                storeMarker.bindPopup(
+                    `<b>${store.name}</b><br>` +
+                    `Растојание: ${store.distance} km<br>` +
+                    `Време: ${store.duration}<br>` +
+                    `Гориво: ${store.gasUsed} L`
+                );
+                storeMarkers.push(storeMarker);
+
+                // Add route line
+                const line = L.polyline(
+                    [[userLat, userLng], [store.latitude, store.longitude]],
+                    {color: '#2e652e', weight: 2, dashArray: '5, 5'}
+                ).addTo(map);
+                routeLines.push(line);
+            });
+
+            console.log("Map initialized successfully with center:", [userLat, userLng]);
+        } catch (error) {
+            console.error("Error initializing map:", error);
+            alert("Грешка при иницијализација на мапата. Проверете ги координатите или податоците.");
+        }
+    }
+
+    function centerMapOnUser() {
+        if (navigator.geolocation) {
+            navigator.geolocation.getCurrentPosition(function (position) {
+                const userLat = position.coords.latitude;
+                const userLng = position.coords.longitude;
+
+                // Update form fields
+                document.getElementById('latitude').value = userLat;
+                document.getElementById('longitude').value = userLng;
+
+                // Update map view and markers
+                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);
+                } else {
+                    initMap();
+                }
+            }, function (error) {
+                alert("Грешка при геолокација: " + error.message);
+            });
+        } else {
+            alert("Геолокацијата не е поддржана од овој пребарувач.");
+        }
+    }
+
+    // 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
+        }
+    });
+</script>
 </body>
 </html>
Index: main/templates/main/product_detail.html
===================================================================
--- main/templates/main/product_detail.html	(revision 52c9c87d52fd2d6be3621074ff2ed6eac3c913be)
+++ main/templates/main/product_detail.html	(revision fef3b4d766831b584534962ac137a311239ecc91)
@@ -1,606 +1,1005 @@
-    {% 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">
-        <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;
+{% 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);
             }
-
-            html, body {
-                height: 100%;
-                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-                background-image: url('{% static "images/baner1.jpg" %}');
-                background-size: cover;
-                background-position: center;
-                background-repeat: no-repeat;
-                background-attachment: fixed;
-                position: relative;
-                overflow-x: hidden;
+            70% {
+                box-shadow: 0 0 0 10px rgba(231, 76, 60, 0);
             }
-
-            body::before {
-                content: '';
-                position: fixed;
-                top: 0;
-                left: 0;
-                right: 0;
-                bottom: 0;
-                background: inherit;
-                filter: blur(10px);
-                z-index: -1;
+            100% {
+                box-shadow: 0 0 0 0 rgba(231, 76, 60, 0);
             }
-
-            .product-wrapper {
-                max-width: 800px;
-                margin: 60px auto;
-                background: rgba(255, 255, 255, 0.95);
-                border-radius: 16px;
-                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
-                padding: 40px;
-                animation: fadeIn 0.8s ease-in-out;
+        }
+
+        .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) {
+            .main-container {
+                grid-template-columns: 1fr;
+                padding: 15px;
             }
 
-            @keyframes fadeIn {
-                from {
-                    opacity: 0;
-                    transform: translateY(30px);
-                }
-                to {
-                    opacity: 1;
-                    transform: translateY(0);
-                }
+            .left-column, .middle-column, .right-column {
+                width: 100%;
             }
-
-            h1, h2 {
-                text-align: center;
-                color: #222;
-                margin-bottom: 20px;
+        }
+
+        @media (max-width: 768px) {
+            .main-header {
+                display: none;
             }
 
-            .product-image {
-                text-align: center;
-                margin-bottom: 30px;
+            #mobile-header {
+                display: flex;
             }
-
-            .product-image img {
-                max-width: 240px;
-                border-radius: 10px;
-                box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
-                transition: transform 0.3s ease;
-            }
-
-            .product-image img:hover {
-                transform: scale(1.05);
-            }
-
-            .product-info {
-                margin-bottom: 25px;
-                padding: 0 10px;
-            }
-
-            .product-info p {
-                margin: 10px 0;
-                font-size: 17px;
-                color: #444;
-            }
-
-            .product-info p strong {
-                color: #111;
-            }
-
-            .product-actions {
-                text-align: center;
-                margin-top: 20px;
-            }
-
-            .view-product, .add-to-list {
-                display: inline-block;
-                padding: 12px 24px;
-                margin: 8px;
-                font-size: 15px;
-                font-weight: 600;
-                border-radius: 8px;
-                text-decoration: none;
-                transition: all 0.3s ease;
-                box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
-            }
-
-            .view-product {
-                background-color: #3498db;
-                color: white;
-            }
-
-            .view-product:hover {
-                background-color: #2980b9;
-                box-shadow: 0 6px 16px rgba(41, 128, 185, 0.4);
-            }
-
-            .add-to-list {
-                background-color: #28a745;
-                color: white;
-                border: none;
-                cursor: pointer;
-            }
-
-            .add-to-list:hover {
-                background-color: #218838;
-                box-shadow: 0 6px 16px rgba(40, 167, 69, 0.4);
-            }
-
-            .similar-products {
-                margin-top: 40px;
-            }
-
-            .similar-products h2 {
-                margin-bottom: 16px;
-            }
-
-            .similar-products ul {
-                list-style: none;
-                padding: 0 20px;
-            }
-
-            .similar-products li {
-                margin: 10px 0;
-                font-size: 15px;
-                color: #2c3e50;
-            }
-
-            .similar-products li a {
-                text-decoration: none;
-                color: #007bff;
-                font-weight: 500;
-            }
-
-            .similar-products li a:hover {
-                text-decoration: underline;
-            }
-
-            .similar-store {
-                font-size: 13px;
-                color: #888;
-                margin-left: 5px;
-            }
-
-            @media (max-width: 600px) {
-                .product-wrapper {
-                    padding: 25px 20px;
-                    margin: 30px 15px;
-                }
-
-                .product-image img {
-                    max-width: 180px;
-                }
-
-                .view-product, .add-to-list {
-                    width: 100%;
-                    margin: 10px 0;
-                }
-            }
-
-            .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;
-            }
-
-            .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;
-            }
-
-            /* ===== DESKTOP NAVBAR ===== */
-            #desktop-navbar {
-                display: flex;
-                justify-content: space-evenly;
-                align-items: center;
-                padding: 15px 40px;
-                background-color: white;
-                border-bottom: 1px solid #e2e2e2; /* design line under links */
-                position: sticky;
-                top: 0;
-                z-index: 999;
-            }
-
-            #logo img {
-                height: 90px;
-            }
-
-            #other a,
-            .user-actions a,
-            .user-actions button {
-                margin-left: 20px;
-                text-decoration: none;
-                font-weight: 600;
-                color: black;
-            }
-
-            .user-actions button {
-                background: none;
-                border: none;
-                cursor: pointer;
-                font-weight: 600;
-            }
-
-            /* ===== MOBILE HEADER ===== */
-            #mobile-header {
-                display: none;
-                justify-content: space-between;
-                align-items: center;
-                padding: 15px 20px;
-                background-color: white;
-                border-bottom: 1px solid #e2e2e2;
-                z-index: 1001;
-                position: relative;
-            }
-
-            #mobile-logo img {
-                height: 40px;
-            }
-
-            .menu-toggle {
-                font-size: 28px;
-                cursor: pointer;
-            }
-
-            /* ===== MOBILE SLIDE MENU ===== */
-            .mobile-menu {
-                position: fixed;
-                top: 0;
-                right: -100%;
-                width: 75%;
-                height: 100vh;
-                background-color: white;
-                box-shadow: -2px 0 10px rgba(0, 0, 0, 0.2);
-                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;
-                font-size: 24px;
-            }
-
-            .close-btn {
-                cursor: pointer;
-            }
-
-            .mobile-search input {
-                width: 100%;
-                padding: 10px;
-                margin: 15px 0;
-                border: 1px solid #ccc;
-                border-radius: 4px;
-            }
-
-            .mobile-menu nav a,
-            .mobile-menu nav button {
-                display: block;
-                margin: 15px 0;
-                font-size: 18px;
-                text-decoration: none;
-                color: black;
-                background: none;
-                border: none;
-                text-align: left;
-            }
-
-            /* Logo on the left */
-            #logo img {
-                height: 90px;
-            }
-
-            /* Links on the right */
-            #nav-links {
-                display: flex;
-                align-items: center;
-                gap: 25px;
-            }
-
-            /* Style all links and buttons */
-            #nav-links a,
-            .user-actions a,
-            .user-actions button {
-                color: black;
-                text-decoration: none;
-                font-weight: 600;
-                font-size: 1rem;
-                background: none;
-                border: none;
-                cursor: pointer;
-                transition: color 0.3s ease;
-            }
-
-            /* Hover color */
-            #nav-links a:hover,
-            .user-actions a:hover,
-            .user-actions button:hover {
-                color: #2ecc71; /* Green hover */
-            }
-
-            /* Group login/register or logout properly */
-            .user-actions {
-                display: flex;
-                gap: 15px;
-                align-items: center;
-            }
-
-            .logout-btn {
-                background-color: #2ecc71; /* Green background */
-                color: white;
-                border: none;
-                padding: 8px 16px;
-                border-radius: 20px;
-                font-weight: 600;
-                font-size: 0.95rem;
-                cursor: pointer;
-                transition: background-color 0.3s ease;
-            }
-
-            .logout-btn:hover {
-                {#background-color: #27ae60; /* Darker green on hover */#}
-            }
-
-
-            /* ===== OVERLAY FOR MOBILE ===== */
-            #overlay {
-                display: none;
-                position: fixed;
-                top: 0;
-                left: 0;
-                width: 100vw;
-                height: 100vh;
-                background: rgba(0, 0, 0, 0.4);
-                z-index: 1000;
-            }
-
-            #overlay.active {
-                display: block;
-            }
-
-            /* ===== RESPONSIVENESS ===== */
-            @media (max-width: 768px) {
-                #desktop-navbar {
-                    display: none;
-                }
-
-                #mobile-header {
-                    display: flex;
-                }
-            }
-
-            .mobile-search-form {
-                display: flex;
-                align-items: center;
-                padding: 10px 16px;
-                gap: 8px;
-                background-color: white;
-                border-bottom: 1px solid #eee;
-            }
-
-            .mobile-search-form input {
-                flex: 1;
-                padding: 8px 14px;
-                border-radius: 20px;
-                border: 1px solid #ccc;
-                font-size: 14px;
-                outline: none;
-            }
-
-            .mobile-search-form button {
-                background-color: #2ecc71;
-                color: white;
-                border: none;
-                padding: 8px 12px;
-                border-radius: 50%;
-                font-size: 16px;
-                cursor: pointer;
-                transition: background-color 0.3s ease;
-            }
-
-            .mobile-search-form button:hover {
-                background-color: #27ae60;
-            }
-
-            .similar-products {
-                border: 2px solid #e74c3c;
-                background-color: #fdecea;
-                padding: 10px;
-                border-radius: 10px;
-            }
-
-            .similar-products .cheaper-product img {
-                max-width: 120px !important;
-                transform: scale(0.9);
-            }
-
-            /* Add to your 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: black;
-                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; /* Above mobile menu */
-                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;
-            }
-
-            /* Adjust mobile menu z-index */
-            .mobile-menu {
-                z-index: 1002; /* Below dropdown */
-            }
-
-            /* Add to your CSS */
-            .selected-list-badge {
-                font-size: 12px;
-                background: #2ecc71;
-                color: white;
-                padding: 2px 6px;
-                border-radius: 10px;
-                margin-left: 5px;
-            }
-
-
-        </style>
-    </head>
-    <body>
-
-
-    <!-- FULL NAVBAR -->
-    <div id="navbar">
-
-        <!-- DESKTOP NAVBAR -->
-        <div id="desktop-navbar">
-            <!-- Logo on the left -->
-            <div id="logo">
-                <a href="{% url 'home' %}"><img src="{% static 'images/shtedko_official1.png' %}" alt="Штедко лого"/></a>
+        }
+
+        /* 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>
             </div>
-
-            <!-- Navigation links on the right -->
-            <div id="nav-links">
-    {#            <a href="{% url 'home' %}">Дома</a>#}
-                <a href="{% url 'product_list' %}">Каталог</a>
-                <a href="#"><img src="{% static 'images/stats.png' %}" width="57px"></a>
-
+        {% 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">{% if user_lists %}(Избери листа){% else %}(Нема
-                            листи){% endif %}</span>
+                        <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">
@@ -613,218 +1012,289 @@
                 </div>
 
-
-                <div class="user-actions">
-                    {% if user.is_authenticated %}
-                        <form method="post" action="{% url 'logout' %}">
-                            {% csrf_token %}
-                            <button type="submit" class="logout-btn"><img src="{% static 'images/log_out.png' %}"width="35px"></button>
-                        </form>
-                    {% else %}
-                        <a href="{% url 'login' %}" id="login">Login</a>
-                        <a href="{% url 'register' %}" id="signup">Sign Up</a>
-                    {% endif %}
-                </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>
-
-
-        <div id="mobile-header">
-            <div id="mobile-logo">
-                <img src="{% static 'images/shtedko_official1.png' %}" alt="Штедко лого" style="height: 40px;">
+        <!-- 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>
+                </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 style="display: flex; align-items: center; gap: 10px;">
-                <!-- Lists dropdown for mobile -->
-                <div class="lists-dropdown-mobile">
-                    <button class="lists-toggle-mobile" onclick="toggleMobileListsDropdown()">
-                        <i class="fas fa-list"></i>
-                    </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>
+    <!-- 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">
+                    {% if product.store == "Vero" %}
+                        <img src="{% static 'images/vero_logo1.png' %}" alt="Vero"
+                             style="height: 25px; vertical-align: middle;">
+                    {% elif product.store == "Reptil" %}
+                        <img src="{% static 'images/reptil_logo.jpg' %}" alt="Reptil"
+                             style="height: 25px; vertical-align: middle;">
+                    {% elif product.store == "Ramstore" %}
+                        <img src="{% static 'images/ramstore_logo.png' %}" alt="Ramstore"
+                             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;">
+                    {{ 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 %}
+                            {#                            {{ 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>
                 </div>
-                <!-- Hamburger menu -->
-                <div class="menu-toggle" onclick="toggleMobileMenu()">☰</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>
-
-        <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="q" placeholder="Пребарај производ..." required/>
-                <button type="submit"><i class="fas fa-magnifying-glass"></i></button>
-            </form>
-            <nav>
-                <a href="{% url 'home' %}">Дома</a>
-                <a href="{% url 'product_list' %}">Каталог</a>
-                <a href="#">Статистика</a>
-                {% if user.is_authenticated %}
-                    <form method="post" action="{% url 'logout' %}">
-                        {% csrf_token %}
-                        <button type="submit">Logout</button>
-                    </form>
+
+            <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 %}
-                    <a href="{% url 'login' %}">Login</a>
-                    <a href="{% url 'register' %}">Sign Up</a>
-                {% endif %}
-            </nav>
-        </div>
-        <!-- MOBILE DARK OVERLAY -->
-        <div id="overlay" onclick="toggleMobileMenu()"></div>
-
-
-    </div>
-
-
-    <div class="product-wrapper">
-        <div class="product-detail">
-            <div class="product-image">
-                {% if product.image_url %}
-                    <img style="width:150px" src="{{ product.image_url }}" alt="{{ product.name }}">
-                {% else %}
-                    <p>📷 Нема слика за овој производ.</p>
+                    <div class="no-data-message">
+                        <i class="fas fa-exclamation-circle"></i>
+                        <p>Нема достапни историски податоци за цените.</p>
+                    </div>
                 {% endif %}
             </div>
 
-            <h1>{{ product.name }}</h1>
-
-            <div class="product-info">
-                <p><strong>Категорија:</strong> {{ product.category }}</p>
-                <p><strong>Продавница:</strong> {{ product.store }}</p>
-                <p><strong>Цена:</strong> {{ product.price }} ден</p>
-            </div>
-
-            <div class="product-actions">
-                <a href="{{ product.product_url }}" target="_blank" class="view-product">🔗 Види производ</a>
-                <button class="add-to-list" onclick="addToList({{ product.id }})">
-                    ➕ Додади во листа
-                </button>
-            </div>
-        </div>
-
-        <div class="similar-products">
-            <h2>Слични производи</h2>
-            <ul>
-                {% for similar in similar_products|slice:":3" %}
-                    {% if similar.price < product.price %}
-                        <div class="cheaper-product-alert"
-                             style="border: 2px solid #e74c3c; background-color: #fdecea; padding: 15px; border-radius: 10px; margin-bottom: 15px; animation: pulse 2s infinite;">
-                            <div style="display: flex; align-items: center; gap: 15px;">
-                                {% if similar.image_url %}
-                                    <img src="{{ similar.image_url }}" alt="{{ similar.name }}"
-                                         style="max-width: 120px; border-radius: 8px;">
-                                {% endif %}
-                                <div>
-                                    <h3 style="color: #c0392b; margin-bottom: 5px;">ПОЕВТИНО!</h3>
-                                    <p><strong>Име:</strong> <a href="{% url 'product_detail' similar.id %}"
-                                                                style="color: #2980b9; font-weight: bold;">{{ similar.name }}</a>
-                                    </p>
-                                    <p><strong>Цена:</strong> <span
-                                            style="color: #c0392b; font-weight: bold;">{{ similar.price }} ден</span>
-                                        (заштеда: {{ product.price|subtract:similar.price }} ден)</p>
-                                    <p><strong>Продавница:</strong>
-                                        {% if similar.store == "Vero" %}
-                                            <img src="{% static 'images/vero_logo.png' %}" alt="Vero"
-                                                 style="height: 30px; vertical-align: middle;">
-                                        {% elif similar.store == "Reptil" %}
-                                            <img src="{% static 'images/reptil_logo.jpg' %}" alt="Reptil"
-                                                 style="height: 30px; vertical-align: middle;">
-                                        {% elif similar.store == "Ramstore" %}
-                                            <img src="{% static 'images/ramstore_logo.png' %}" alt="Ramstore"
-                                                 style="height: 30px; vertical-align: middle;">
-                                        {% endif %}
-                                        {{ similar.store }}
-                                    </p>
-                                    <a href="{% url 'product_detail' similar.id %}"
-                                       style="display: inline-block; margin-top: 10px; padding: 8px 15px; background-color: #e74c3c; color: white; border-radius: 5px; text-decoration: none;">Види
-                                        производ</a>
-                                </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>
-                    {% else %}
-                        <li class="similar-product">
-                            <div style="display: flex; align-items: center; gap: 15px;">
-                                {% if similar.image_url %}
-                                    <img src="{{ similar.image_url }}" alt="{{ similar.name }}"
-                                         style="max-width: 80px; border-radius: 6px;">
-                                {% endif %}
-                                <div>
-                                    <a href="{% url 'product_detail' similar.id %}">{{ similar.name }}</a><br>
-                                    <span>Цена: {{ similar.price }} ден</span>
-                                    {% if similar.store == "Vero" %}
-                                        <img src="{% static 'images/vero_logo.png' %}" alt="Vero"
-                                             style="height: 25px; vertical-align: middle;">
-                                    {% elif similar.store == "Reptil" %}
-                                        <img src="{% static 'images/reptil_logo.jpg' %}" alt="Reptil"
-                                             style="height: 25px; vertical-align: middle;">
-                                    {% elif similar.store == "Ramstore" %}
-                                        <img src="{% static 'images/ramstore_logo.png' %}" alt="Ramstore"
-                                             style="height: 25px; vertical-align: middle;">
-                                    {% endif %}
-                                    <span class="similar-store"> | {{ similar.store }}</span>
-                                </div>
-                            </div>
-                        </li>
-                    {% endif %}
-                {% empty %}
-                    <li>Нема слични производи.</li>
-                {% endfor %}
-            </ul>
+                        <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>
-
-        <style>
-            @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);
-                }
-            }
-
-            .cheaper-product-alert {
-                position: relative;
-            }
-
-            .cheaper-product-alert::before {
-                content: "🔥 Поевтино!";
-                position: absolute;
-                top: -10px;
-                left: 15px;
-                background-color: #e74c3c;
-                color: white;
-                padding: 3px 10px;
-                border-radius: 20px;
-                font-size: 12px;
-                font-weight: bold;
-            }
-        </style>
-
     </div>
+    <!-- List Selection Modal -->
     <div id="listModal" style="display: none;" class="modal">
         <div class="modal-content">
-            <span class="close-modal" onclick="closeModal()">&times;</span>
+            <span class="close-modal" onclick="closeModal()">×</span>
             <h3>Избери листа</h3>
-            <ul id="listOptions">
+            <ul id="listOptions" style="list-style: none; padding: 0;">
                 {% for list in user_lists %}
-                    <li>
-                        <button onclick="addToList({{ list.id }})">{{ list.name }}</button>
+                    <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>Немаш листи. <a href="{% url 'create_list' %}">Креирај тука</a></li>
+                    <li style="margin: 20px 0; text-align: center;">
+                        Немаш листи. <a href="{% url 'create_list' %}" style="color: #2e652e;">Креирај тука</a>
+                    </li>
                 {% endfor %}
             </ul>
         </div>
     </div>
+
     <script>
         let selectedProductId = null;
+        let selectedListId = localStorage.getItem('selectedListId');
+        let selectedListName = localStorage.getItem('selectedListName');
 
         function showListOptions(button) {
@@ -849,8 +1319,4 @@
             document.getElementById("listsDropdown").classList.toggle("show");
         }
-
-        let selectedListId = localStorage.getItem('selectedListId');
-        let selectedListName = localStorage.getItem('selectedListName');
-
 
         document.addEventListener('DOMContentLoaded', function () {
@@ -858,5 +1324,94 @@
                 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)'
+                            }
+                        },
+                        x: {
+                            grid: {
+                                display: false
+                            }
+                        }
+                    },
+                    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')) {
@@ -907,10 +1462,8 @@
         }
 
-        // Add this function for mobile dropdown toggle
         function toggleMobileListsDropdown() {
             document.getElementById("mobileListsDropdown").classList.toggle("show");
         }
 
-        // Close mobile dropdown when clicking outside
         document.addEventListener('click', function (event) {
             if (!event.target.closest('.lists-dropdown-mobile') && !event.target.classList.contains('lists-toggle-mobile')) {
@@ -922,22 +1475,134 @@
         });
 
-        // Update your existing selectList function to work with both dropdowns
         function selectList(listId, listName) {
             selectedListId = listId;
             selectedListName = listName;
 
-            // Store in localStorage
             localStorage.setItem('selectedListId', listId);
             localStorage.setItem('selectedListName', listName);
 
-            // Update both desktop and mobile displays
             document.getElementById("selected-list-name").textContent = listName;
 
-            // Close both dropdowns
             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';
+                        }
+                    });
+            });
+
+            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>
-    </html>
+</body>
+</html>
Index: main/templates/main/product_list.html
===================================================================
--- main/templates/main/product_list.html	(revision 52c9c87d52fd2d6be3621074ff2ed6eac3c913be)
+++ main/templates/main/product_list.html	(revision fef3b4d766831b584534962ac137a311239ecc91)
@@ -37,4 +37,5 @@
             margin: 0 auto;
             padding: 0 20px;
+            margin-top: 20px;
         }
 
@@ -45,14 +46,9 @@
             background-color: #cea274;
             border-radius: 8px;
-            margin-right: 30px;
-        }
-
-        .filter-section {
-            margin-bottom: 25px;
-            border-bottom: 1px solid #ddd;
-            padding-bottom: 15px;
-        }
-
-        .filter-section h3 {
+        {#margin-right: 30px;#} margin-left: 20px;
+        }
+
+
+        h3 {
             margin-top: 0;
             margin-bottom: 15px;
@@ -65,6 +61,45 @@
 
         .price-slider {
+            -webkit-appearance: none; /* Remove default style */
             width: 100%;
-        }
+            height: 5px;
+            background-color: rgba(43, 86, 43, 0.93); /* Track background */
+            border-radius: 4px;
+            outline: none;
+        }
+
+        /* Chrome, Safari, Opera - Track */
+        .price-slider::-webkit-slider-runnable-track {
+            background: rgba(43, 86, 43, 0.93);
+            border-radius: 4px;
+        }
+
+        /* Firefox - Track */
+        .price-slider::-moz-range-track {
+            background: rgba(43, 86, 43, 0.93);
+            border-radius: 4px;
+        }
+
+        /* Chrome, Safari, Opera - Thumb */
+        .price-slider::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            appearance: none;
+            width: 15px;
+            height: 15px;
+            background-color: rgba(42, 82, 42, 0.93); /* Your green color */
+            border-radius: 50%;
+            cursor: pointer;
+            margin-top: -6px; /* Align thumb vertically */
+        }
+
+        /* Firefox - Thumb */
+        .price-slider::-moz-range-thumb {
+            width: 20px;
+            height: 20px;
+            background-color: rgba(42, 82, 42, 0.93); /* Your green color */
+            border-radius: 50%;
+            cursor: pointer;
+        }
+
 
         .price-range {
@@ -73,5 +108,5 @@
             margin-top: 5px;
             font-size: 12px;
-            color: #666;
+            color: rgba(31, 63, 31, 0.93);
         }
 
@@ -92,4 +127,7 @@
             justify-content: flex-end;
             margin-bottom: 20px;
+            border: rgba(43, 86, 43, 0.93);
+            padding: 5px;
+            border-radius: 5px;
         }
 
@@ -97,9 +135,11 @@
             width: auto;
             margin-left: 10px;
+            background-color: rgba(46, 101, 46, 0.93);
+            color: white;
         }
 
         .grid {
             display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+            grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
             gap: 20px;
         }
@@ -112,8 +152,9 @@
         }
 
-        .product-card:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
-        }
+        {##}
+        {#.product-card:hover {#}
+        {#    transform: translateY(-5px);#}
+        {#    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);#}
+
 
         .product-image {
@@ -134,9 +175,4 @@
         }
 
-        .product-price {
-            color: #007bff;
-            font-weight: bold;
-            margin-bottom: 10px;
-        }
 
         .old-price {
@@ -224,10 +260,12 @@
             justify-content: space-between;
             margin-top: 10px;
+            padding-bottom: -10px;
+            flex-direction: column;
+        {#margin-bottom: -px;#}
         }
 
         .view-product {
             font-size: 12px;
-            color: #007bff;
-            text-decoration: none;
+        {#color: #007bff;#} text-decoration: none;
         }
 
@@ -270,7 +308,7 @@
 
         .discount-valid {
-            font-size: 0.8em;
+            font-size: 0.7em;
             color: #666;
-            margin-top: 3px;
+            margin-top: 7px;
         }
 
@@ -310,9 +348,10 @@
         }
 
-        .grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-            gap: 20px;
-        }
+        {##}
+        {#.grid {#}
+        {#    display: grid;#}
+        {#    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));#}
+        {#gap: 20px;#}
+
 
         @media (max-width: 600px) {
@@ -339,5 +378,5 @@
             background-color: #f8f8f8;
             border-radius: 8px;
-            margin-right: 30px;
+        {#margin-right: 30px;#} margin-left: 0px;
         }
 
@@ -802,5 +841,5 @@
         /* ===== RESPONSIVENESS ===== */
         @media (max-width: 768px) {
-            #desktop-navbar {
+            .main-header{
                 display: none;
             }
@@ -811,36 +850,4 @@
         }
 
-        .mobile-search-form {
-            display: flex;
-            align-items: center;
-            padding: 10px 16px;
-            gap: 8px;
-            background-color: white;
-            border-bottom: 1px solid #eee;
-        }
-
-        .mobile-search-form input {
-            flex: 1;
-            padding: 8px 14px;
-            border-radius: 20px;
-            border: 1px solid #ccc;
-            font-size: 14px;
-            outline: none;
-        }
-
-        .mobile-search-form button {
-            background-color: #2ecc71;
-            color: white;
-            border: none;
-            padding: 8px 12px;
-            border-radius: 50%;
-            font-size: 16px;
-            cursor: pointer;
-            transition: background-color 0.3s ease;
-        }
-
-        .mobile-search-form button:hover {
-            background-color: #27ae60;
-        }
 
         /* Mobile and smaller screens */
@@ -900,11 +907,4 @@
         }
 
-        .filter-section {
-            margin-bottom: 25px;
-            border-bottom: 1px solid #ddd;
-            padding-bottom: 15px;
-            max-height: 200px; /* Ограничи максимална висина */
-            overflow-y: auto; /* Овозможи вертикален скрол */
-        }
 
         .filter-section::-webkit-scrollbar {
@@ -936,17 +936,4 @@
         }
 
-        .filter-section h3 {
-            margin-top: 0;
-            margin-bottom: 15px;
-            font-size: 16px;
-            position: sticky;
-            top: 0;
-            background-color: #cb7e31;
-            padding: 5px 0;
-            z-index: 1;
-            color: white;
-            padding-left: 10px;
-            border-radius: 10px;
-        }
 
         /* Стилови за скролбар за различни прелистувачи */
@@ -1002,4 +989,644 @@
         }
 
+        /* 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;
+        }
+
+        /* Update the header-search styles */
+        .header-search {
+            flex-grow: 1;
+            margin: 0 20px;
+            position: relative;
+        }
+
+        .header-search input {
+            width: 98%;
+            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;
+        }
+
+        .header-search button:hover {
+            color: #2e652e;
+        }
+
+        .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: none;
+            border: none;
+            padding: 0;
+            cursor: pointer;
+        }
+
+        /* 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;
+        }
+
+        .category-filter {
+            padding: 15px 20px;
+            background: #f9f9f9;
+            border-radius: 12px;
+            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+            max-width: 300px;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+
+        .filters h3 {
+            font-weight: 600;
+            font-size: 1.3rem;
+            margin-bottom: 15px;
+            color: #333;
+            border-bottom: 2px solid #4CAF50;
+            padding-bottom: 6px;
+            user-select: none;
+        }
+
+        .price-filter h3 {
+            font-weight: 600;
+            font-size: 1.3rem;
+            margin-bottom: 15px;
+            color: #333;
+            border-bottom: 2px solid #4CAF50;
+            padding-bottom: 6px;
+            user-select: none;
+        }
+
+        .store-filter h3 {
+            font-weight: 600;
+            font-size: 1.3rem;
+            margin-bottom: 15px;
+            color: #333;
+            border-bottom: 2px solid #4CAF50;
+            padding-bottom: 6px;
+            user-select: none;
+        }
+
+        .filter-option {
+            display: flex;
+            align-items: center;
+            margin-bottom: 10px;
+            cursor: pointer;
+            user-select: none;
+        }
+
+        .filter-option input[type="checkbox"] {
+            width: 18px;
+            height: 18px;
+            margin-right: 12px;
+            accent-color: #4CAF50; /* modern browsers */
+            cursor: pointer;
+            transition: transform 0.15s ease-in-out;
+        }
+
+        .filter-option input[type="checkbox"]:hover {
+            transform: scale(1.1);
+        }
+
+        .filter-option label {
+            font-size: 1rem;
+            color: #555;
+            transition: color 0.3s ease;
+        }
+
+        .filter-option:hover label {
+            color: #4CAF50;
+        }
+
+
+        .filters {
+            width: 280px;
+            padding: 25px;
+            background-color: #f5f5f5;
+            border-radius: 10px;
+            margin-right: 30px;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+            border: 1px solid #e0e0e0;
+        }
+
+        {##}
+        {#.filter-section h3 {#}
+        {#    background-color: #2e652e;#}
+        {#    color: white;#}
+        {#    padding: 10px 15px;#}
+        {#    border-radius: 5px;#}
+        {#    margin: 0 -15px 15px -15px;#}
+        {#    font-size: 1rem;#}
+
+        {##}
+        {#        .price-filter h3 {#}
+        {#            background-color: #2e652e;#}
+        {#            color: white;#}
+        {#            padding: 10px 15px;#}
+        {#            border-radius: 5px;#}
+        {#            margin: 0 -15px 15px -15px;#}
+        {#            font-size: 1rem;#}
+        {#        }#}
+
+        {#.store-filter h3 {#}
+        {#    background-color: #2e652e;#}
+        {#    color: white;#}
+        {#    padding: 10px 15px;#}
+        {#    border-radius: 5px;#}
+        {#    margin: 0 -15px 15px -15px;#}
+        {#    font-size: 1rem;#}
+        {
+        #}#}
+
+        .filter-submit-btn {
+            background-color: #2e652e;
+            color: white;
+            border: none;
+            padding: 10px 20px;
+            border-radius: 5px;
+            width: 100%;
+            font-size: 1rem;
+            cursor: pointer;
+            transition: background-color 0.3s;
+        }
+
+        .filter-submit-btn:hover {
+            background-color: #3e7e3e;
+        }
+
+        .product-card {
+            border: 1px solid #e0e0e0;
+            border-radius: 10px;
+            overflow: hidden;
+            transition: all 0.3s ease;
+            background: white;
+        }
+
+        .product-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+            border-color: #2e652e;
+        }
+
+        .product-image {
+            height: 200px;
+            background-color: #f9f9f9;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 15px;
+        }
+
+        .product-image img {
+            max-height: 100%;
+            max-width: 100%;
+            object-fit: contain;
+        }
+
+        .product-info {
+            padding: 20px;
+        }
+
+        .product-price {
+            font-size: 1.2rem;
+            color: #2e652e;
+            font-weight: bold;
+            margin-top: 20px;
+            display: flex; /* Use flexbox for vertical stacking */
+            flex-direction: column; /* Stack children vertically */
+            gap: 5px; /* Add spacing between elements */
+        }
+
+        .old-price {
+            color: #999;
+            text-decoration: line-through;
+            font-size: 0.9rem;
+        }
+
+        .discount-badge {
+            background-color: #e74c3c;
+            color: white;
+            padding: 3px 8px;
+            border-radius: 3px;
+            font-size: 0.8rem;
+            margin-left: 8px;
+        }
+
+        @keyframes spin {
+            0% {
+                transform: rotate(0deg);
+            }
+            100% {
+                transform: rotate(360deg);
+            }
+        }
+
+        .view-product:hover {
+            color: rgba(57, 146, 47, 0.93);
+        }
+
+
+        /* Alternative ribbon style 1 - corner flag */
+        .ribbon-flag {
+            position: absolute;
+            top: 0;
+            right: 0;
+            width: 0;
+            height: 0;
+            border-style: solid;
+            border-width: 0 0 0 0;
+            border-color: transparent #e74c3c transparent transparent;
+        {#z-index: 1;#} visibility: visible !important; /* Force visibility */
+            opacity: 1 !important; /* Force visibility */
+
+
+        }
+
+        .ribbon-flag-text {
+            position: absolute;
+            top: -4px;
+            right: -10px;
+            color: white;
+            font-size: 15px;
+            font-weight: bold;
+            transform: rotate(70deg);
+            z-index: 5;
+            visibility: visible !important;
+        / opacity: 1 !important; /* Force visibility */
+
+
+        }
+
+        .product-card, .product-image {
+            position: relative;
+        {#overflow: visible !important;#}
+        }
+
+        /* Instruction Modal Styles */
+        /* Enhanced Instruction Modal */
+        .instruction-modal {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.85);
+            z-index: 9999;
+            font-family: Arial, sans-serif;
+        }
+
+        .modal-content {
+            background: white;
+            border-radius: 15px;
+            width: 90%;
+            max-width: 450px;
+            margin: auto;
+            position: relative;
+            overflow: hidden;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+            transform: scale(0.9);
+            opacity: 0;
+            animation: modalEntrance 0.4s forwards;
+        }
+
+        @keyframes modalEntrance {
+            to {
+                transform: scale(1);
+                opacity: 1;
+            }
+        }
+
+        .modal-header {
+            background: #2e652e;
+            color: white;
+            padding: 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .modal-header h3 {
+            margin: 0;
+            font-size: 1.4rem;
+        }
+
+        .modal-body {
+            padding: 20px;
+        }
+
+        .instruction-step {
+            display: flex;
+            align-items: flex-start;
+            margin-bottom: 15px;
+            padding: 10px;
+            border-radius: 8px;
+            background: #f8f8f8;
+        }
+
+        .step-number {
+            background: #2e652e;
+            color: white;
+            width: 25px;
+            height: 25px;
+            border-radius: 50%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin-right: 15px;
+            font-weight: bold;
+            flex-shrink: 0;
+        }
+
+        .hint-text {
+            color: #666;
+            font-size: 0.9em;
+            font-style: italic;
+        }
+
+        .modal-action-btn {
+            background: #2e652e;
+            color: white;
+            border: none;
+            padding: 12px 25px;
+            border-radius: 30px;
+            margin: 20px auto;
+            display: block;
+            font-size: 1rem;
+            font-weight: bold;
+            cursor: pointer;
+            transition: all 0.3s;
+        }
+
+        .modal-action-btn:hover {
+            background: #3e7e3e;
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(46, 101, 46, 0.3);
+        }
+
+        .modal-close-btn {
+            background: none;
+            border: none;
+            color: white;
+            font-size: 1.8rem;
+            cursor: pointer;
+            padding: 0 10px;
+        }
+
+        /* Enhanced Arrows */
+        .arrow-pointer {
+        {#position: absolute;#} width: 100px;
+            height: 100px;
+            pointer-events: none;
+            z-index: 10000;
+        }
+
+
+        .pulse-arrow {
+            animation: pulse 1.5s infinite, float 3s ease-in-out infinite;
+        }
+
+        @keyframes pulse {
+            0% {
+                transform: scale(1);
+            }
+            50% {
+                transform: scale(1.2);
+            }
+            100% {
+                transform: scale(1);
+            }
+        }
+
+        @keyframes float {
+            0%, 100% {
+                transform: translateY(0);
+            }
+            50% {
+                transform: translateY(-10px);
+            }
+        }
+
+        }
+
 
     </style>
@@ -1009,112 +1636,178 @@
 <div id="navbar">
 
-    <!-- DESKTOP NAVBAR -->
-    <div id="desktop-navbar">
-        <!-- Logo on the left -->
-        <div id="logo">
-            <a href="{% url 'home' %}"><img src="{% static 'images/shtedko_official1.png' %}" alt="Штедко лого"/></a>
-        </div>
-
-        <!-- Navigation links on the right -->
-        <div id="nav-links">
-            {#            <a href="{% url 'home' %}">Дома</a>#}
-            <a href="{% url 'product_list' %}">Каталог</a>
-            <a href="#"><img src="{% static 'images/stats.png' %}" width="57px"></a>
-            <a href="{% url 'view_lists' %}"><img src="{% static 'images/lists.png' %}" width="30px"></a>
-            <!-- Add the Листи link here -->
+    <!-- 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 %}
+                    <a href="{% url 'view_lists' %}" class="list-icon">
+                        {#                        <img src="{% static 'images/final_icon_listi.png' %}" width="60px" alt="Листи">#}
+                        мои листи
+                    </a>
+                    <select id="listSelector" class="form-select">
+                        листа:
+                        <option value="">-- Избери листа --</option>
+                    </select>
+                    {#                    <a href="{% url 'stats' %}" class="stats-icon">#}
+                    {#                        <img src="{% static 'images/stats.png' %}" width="57px" alt="Статистика">#}
+                    {#                    </a>#}
                     <form method="post" action="{% url 'logout' %}">
                         {% csrf_token %}
-                        <button type="submit" class="logout-btn"><img src="{% static 'images/log_out.png' %}"
-                                                                      width="35px"></button>
+                        <button type="submit" class="logout-btn">
+                            <img src="{% static 'images/log_out.png' %}" width="35px" alt="Одјави се">
+                        </button>
                     </form>
                 {% else %}
-                    <a style="padding: 10px" href="{% url 'login' %}" id="login">Login</a>
-                    <a style="padding: 10px" href="{% url 'register' %}" id="signup">Sign Up</a>
+                    <a href="{% url 'login' %}"
+                       style=" padding: 8px 16px; border-radius: 20px; background-color: #f5f5f5; margin-right: -10px"><i
+                            class="fas fa-user"></i> Најави се</a>
+                    <a href="{% url 'register' %}"
+                       style=" padding: 8px 16px; border-radius: 20px; background-color: #f5f5f5"><i
+                            class="fas fa-user-plus"></i> Регистрирај се</a>
                 {% endif %}
             </div>
         </div>
-    </div>
-
-    <!-- MOBILE NAVBAR -->
+
+        <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="#">Попусти</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: 30px;">
+            <img src="{% static 'images/shtedko_official1.png' %}" alt="Штедко лого">
         </div>
         <div class="menu-toggle" onclick="toggleMobileMenu()">☰</div>
     </div>
 
-    <!-- MOBILE SLIDE-IN MENU -->
+    <!-- Mobile Menu -->
     <div id="mobile-menu" class="mobile-menu">
         <div class="mobile-menu-header">
-            <span class="close-btn" onclick="toggleMobileMenu()">✕</span>
+            <span class="close-btn" onclick="toggleMobileMenu()">×</span>
         </div>
-        <form method="get" action="{% url 'product_list' %}" class="mobile-search-form">
-            <input type="text" name="q" placeholder="Пребарај производ..." required/>
-            <button type="submit"><i class="fas fa-magnifying-glass"></i></button>
+
+        <form method="GET" action="{% url 'product_list' %}" class="mobile-search-form" id="mobileSearchForm">
+            <input type="text" name="search" id="mobileSearchInput" placeholder="Пребарај производ..."
+                   value="{{ request.GET.search }}">
+            <button type="submit"><i class="fas fa-search"></i></button>
         </form>
-        <nav>
+
+        <nav class="mobile-nav">
             <a href="{% url 'home' %}">Дома</a>
             <a href="{% url 'product_list' %}">Каталог</a>
-            <a href="#">Статистика</a>
-            <a href="{% url 'view_lists' %}">Листи</a> <!-- Add Листи here as well -->
+            <a href="{% url 'stats' %}">Статистика</a>
+            {#            <a href="#">Попусти</a>#}
+            {#            <a href="#">Продавници</a>#}
+            <a href="{% url 'view_lists' %}">Листи</a>
 
             {% if user.is_authenticated %}
-                <form method="post" action="{% url 'logout' %}">
-                    {% csrf_token %}
-                    <button type="submit">Logout</button>
-                </form>
+                <a href="{% url 'logout' %}">Одјави се</a>
             {% else %}
-                <a href="{% url 'login' %}">Login</a>
-                <a href="{% url 'register' %}">Sign Up</a>
+                <a href="{% url 'login' %}">Најави се</a>
+                <a href="{% url 'register' %}">Регистрирај се</a>
             {% endif %}
         </nav>
     </div>
-    <!-- MOBILE DARK OVERLAY -->
-    <div id="overlay" onclick="toggleMobileMenu()"></div>
-
 </div>
 
-<div id="horizontal_picture"
-     style="background-image: url('{% static 'images/baner1.jpg' %}'); background-size: cover; background-position: center; padding: 50px 30px; text-align: center; color: white; position: relative; z-index: 1;">
-    <!-- Heading Section -->
-    {#    <h2 style="font-size: 3rem; font-weight: bold; margin-bottom: 10px;">Каталог</h2>#}
-    {#    <h3 style="font-size: 1.5rem; font-weight: 300; margin-bottom: 20px;">Избери го вистинското!</h3>#}
-
-    <!-- Search Form -->
-    <form method="GET" action="." class="search-form"
-          style="display: inline-block; position: relative; z-index: 2; width: 100%; max-width: 800px;">
-        <input type="text" name="search" placeholder="Пребарај производи по име..."
-               value="{{ request.GET.search }}"
-               style="padding: 12px 20px; width: 80%; max-width: 600px; border-radius: 50px; border: 1px solid #ddd; font-size: 1rem; outline: none; transition: all 0.3s ease;">
-        <button type="submit"
-                style="padding: 12px 30px; color: white; background-color: #cb7e31; border: none; border-radius: 50px; margin-left: 10px; cursor: pointer; font-size: 1rem; font-weight: 600; transition: all 0.3s ease;">
-            Пребарај
-        </button>
-    </form>
-
-    <!-- Overlay for Text Contrast -->
-    <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); z-index: 0;"></div>
-</div>
+{#    <div id="horizontal_picture"#}
+{#         style="background-image: url('{% static 'images/baner1.jpg' %}');#}
+{#                 background-size: cover;#}
+{#                 background-position: center;#}
+{#                 height: 250px;#}
+{#                 display: flex;#}
+{#                 flex-direction: column;#}
+{#                 justify-content: center;#}
+{#                 align-items: center;#}
+{#                 color: white;#}
+{#                 text-shadow: 2px 2px 4px rgba(0,0,0,0.5);#}
+{#                 margin-bottom: 30px;#}
+{#                 position: relative;">#}
+{##}
+{#        <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.3); z-index: 0;"></div>#}
+{##}
+{#        <div style="position: relative; z-index: 1; text-align: center; padding: 20px;">#}
+{#            <h1 style="font-size: 2.5rem; margin-bottom: 10px;">Нашите Производи</h1>#}
+{#            <p style="font-size: 1.2rem; max-width: 600px;">Откријте ги најдобрите производи по најниски цени</p>#}
+{#        </div>#}
+{#    </div>#}
+
+{#    <div id="overlay" onclick="toggleMobileMenu()"></div>#}
+
+{#    <div id="horizontal_picture"#}
+{#         style="background-image: url('{% static 'images/baner1.jpg' %}'); background-size: cover;margin-top: 20px; background-position: center; padding: 10px 30px; text-align: center; color: white; position: relative; z-index: 1;">#}
+<!-- Heading Section -->
+{#    <h2 style="font-size: 3rem; font-weight: bold; margin-bottom: 10px;">Каталог</h2>#}
+{#    <h3 style="font-size: 1.5rem; font-weight: 300; margin-bottom: 20px;">Избери го вистинското!</h3>#}
+
+{#        <!-- Search Form -->#}
+{#        <form method="GET" action="." class="search-form"#}
+{#              style="display: inline-block; position: relative; z-index: 2; width: 100%; max-width: 800px;">#}
+{#            <input type="text" name="search" placeholder="Пребарај производи по име..."#}
+{#                   value="{{ request.GET.search }}"#}
+{#                   style="padding: 12px 20px; width: 80%; max-width: 600px; border-radius: 50px; border: 1px solid #ddd; font-size: 1rem; outline: none; transition: all 0.3s ease;">#}
+{#            <button type="submit"#}
+{#                    style="padding: 12px 30px; color: white; background-color: #cb7e31; border: none; border-radius: 50px; margin-left: 10px; cursor: pointer; font-size: 1rem; font-weight: 600; transition: all 0.3s ease;">#}
+{#                Пребарај#}
+{#            </button>#}
+{#        </form>#}
+
+<!-- Overlay for Text Contrast -->
+{#        <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); z-index: 0;"></div>#}
+{#    </div>#}
 
 <!-- Add this modal at the bottom of your body -->
-<div class="modal-overlay" id="listModal">
-    <div class="modal-content">
-        <div class="modal-header">
-            <div class="modal-title">Избери листа</div>
-            <button class="close-modal" onclick="closeModal()">×</button>
-        </div>
-        <div id="listsContainer">
-            <!-- Lists will be dynamically populated here -->
-        </div>
-        <div class="create-new-list" onclick="showNewListForm()">+ Креирај нова листа</div>
-        <div class="new-list-form" id="newListForm">
-            <input type="text" id="newListName" placeholder="Име на листата">
-            <button onclick="createNewList()">Креирај</button>
-        </div>
-    </div>
-</div>
+{#    <div class="modal-overlay" id="listModal">#}
+{#        <div class="modal-content">#}
+{#            <div class="modal-header">#}
+{#                <div class="modal-title">Избери листа</div>#}
+{#                <button class="close-modal" onclick="closeModal()">×</button>#}
+{#            </div>#}
+{#            <div id="listsContainer">#}
+{#                <!-- Lists will be dynamically populated here -->#}
+{#            </div>#}
+{#            <div class="create-new-list" onclick="showNewListForm()">+ Креирај нова листа</div>#}
+{#            <div class="new-list-form" id="newListForm">#}
+{#                <input type="text" id="newListName" placeholder="Име на листата">#}
+{#                <button onclick="createNewList()">Креирај</button>#}
+{#            </div>#}
+{#        </div>#}
+{#    </div>#}
+{#    <div class="featured-section" style="margin-bottom: 40px;">#}
+{#        <h2 style="text-align: center; margin-bottom: 30px; color: #333;">Препорачани Производи</h2>#}
+{#        <div class="grid" style="grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));">#}
+{#            <!-- Featured products here -->#}
+{#        </div>#}
+{#    </div>#}
+{#    <div class="cta-section"#}
+{#         style="background-color: #f9f9f9; padding: 50px 20px; text-align: center; margin-top: 50px;">#}
+{#        <h2 style="color: #2e652e; margin-bottom: 20px;">Не ги најдовте што го баравте?</h2>#}
+{#        <p style="max-width: 600px; margin: 0 auto 30px; color: #555;">Контактирајте не и ќе ви помогнеме да го најдете#}
+{#            саканиот производ</p>#}
+{#        <a href="#"#}
+{#           style="background-color: #2e652e; color: white; padding: 12px 30px; border-radius: 5px; text-decoration: none; font-weight: bold;">Контактирај#}
+{#            не</a>#}
+{#    </div>#}
 
 <div class="catalog-container">
@@ -1127,10 +1820,15 @@
             {% endif %}
 
-            <div class="filter-section">
+            <div class="filter-section category-filter">
                 <h3>Категории</h3>
                 {% for category in categories %}
                     <div class="filter-option">
-                        <input type="checkbox" id="cat-{{ forloop.counter }}" name="category" value="{{ category }}"
-                               {% if category in selected_categories %}checked{% endif %}>
+                        <input
+                                type="checkbox"
+                                id="cat-{{ forloop.counter }}"
+                                name="category"
+                                value="{{ category }}"
+                                {% if category in selected_categories %}checked{% endif %}
+                        >
                         <label for="cat-{{ forloop.counter }}">{{ category|translate_category }}</label>
                     </div>
@@ -1138,15 +1836,23 @@
             </div>
 
-            <div class="filter-section">
+            <div class="filter-section price-filter">
                 <h3>Цена</h3>
-                <input type="range" min="0" max="1000" value="{{ selected_max_price|default:'1000' }}"
-                       class="price-slider" id="priceRange" name="max_price">
+                <input
+                        type="range"
+                        min="0"
+                        max="6000"
+                        value="{{ selected_max_price|default:'6000' }}"
+                        class="price-slider"
+                        id="priceRange"
+                        name="max_price"
+                        style="width: 270px"
+                />
                 <div class="price-range">
                     <span>0 ден.</span>
-                    <span id="maxPriceDisplay">{{ selected_max_price|default:'1000' }} ден.</span>
+                    <span id="maxPriceDisplay">6000 ден.</span>
                 </div>
             </div>
 
-            <div class="filter-section">
+            <div class="filter-section store-filter">
                 <h3>Продавници</h3>
                 <div class="filter-option">
@@ -1165,5 +1871,11 @@
                     <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>
+
 
             <input type="hidden" name="sort" id="sortValue" value="{{ selected_sort }}">
@@ -1187,17 +1899,22 @@
         {% endif %}
         <div class="sorting-options">
-            <label style="margin-top: 7px" for="sort">Сортирај по:</label>
-            <select id="sort" onchange="updateSort()">
-                <option value="price_asc" {% if selected_sort == 'price_asc' %}selected{% endif %}>Цена (најниска)
-                </option>
-                <option value="price_desc" {% if selected_sort == 'price_desc' %}selected{% endif %}>Цена (највисока)
-                </option>
-                <option value="name_asc" {% if selected_sort == 'name_asc' %}selected{% endif %}>Име (А-Ш)</option>
-                <option value="name_desc" {% if selected_sort == 'name_desc' %}selected{% endif %}>Име (Ш-А)</option>
-                <option value="popular" {% if selected_sort == 'popular' %}selected{% endif %}>Најпопуларни</option>
-            </select>
-            <select id="listSelector" class="form-select">
-                <option value="">-- Избери листа --</option>
-            </select>
+            <b>
+                <label style="margin-top: 7px; color: rgba(43,86,43,0.93)"
+                       for="sort">Сортирај по:</label>
+                <select id="sort" onchange="updateSort()">
+                    <option value="popular" {% if selected_sort == 'popular' %}selected{% endif %}>Најпопуларни</option>
+                    <option value="price_asc" {% if selected_sort == 'price_asc' %}selected{% endif %}>Цена (најниска)
+                    </option>
+                    <option value="price_desc" {% if selected_sort == 'price_desc' %}selected{% endif %}>Цена
+                        (највисока)
+                    </option>
+                    <option value="name_asc" {% if selected_sort == 'name_asc' %}selected{% endif %}>Име (А-Ш)</option>
+                    <option value="name_desc" {% if selected_sort == 'name_desc' %}selected{% endif %}>Име (Ш-А)
+                    </option>
+                </select>
+                {#            <select id="listSelector" class="form-select">#}
+                {#                <option value="">-- Избери листа --</option>#}
+                {#            </select>#}
+            </b>
         </div>
 
@@ -1206,4 +1923,11 @@
             {% for product in page_obj %}
                 <div class="product-card">
+                    {% if product.popust %}
+                        <div class="ribbon-flag"></div>
+                        <div class="ribbon-flag-text">
+                            {#                            Попуст!#}
+                            <img src="{% static 'images/novo_disc.png' %}" width="90px">
+                        </div>
+                    {% endif %}
                     <a href="{% url 'product_detail' product.id %}">
                         <div class="product-image">
@@ -1218,17 +1942,21 @@
 
                             <div style="color: rgba(10,12,15,0.71)" class="product-name">{{ product.name }}</div>
-                            <div class="product-price">
-                                {% if product.popust %}
-                                    <span class="old-price">{{ product.price }} ден.</span>
-                                    {{ product.actual_price }} ден.
-                                    <span class="discount-badge">Попуст!</span>
-                                    {% if product.popust_date %}
-                                        <div class="discount-valid">
-                                            Важи до: {{ product.popust_date|date:"d.m.Y" }}
-                                        </div>
+                            <div style="display: block">
+                                <div class="product-price">
+                                    {% if product.popust %}
+
+                                        <span class="old-price">{{ product.price }} ден.</span>
+                                        {{ product.actual_price }} ден.
+                                        <span class="discount-badge"
+                                              style="width: 50px; margin-left: -1px">Попуст!</span>
+                                        {% if product.popust_date %}
+                                            <div class="discount-valid">
+                                                Важи до: {{ product.popust_date|date:"d.m.Y" }}
+                                            </div>
+                                        {% endif %}
+                                    {% else %}
+                                        {{ product.price }} ден.
                                     {% endif %}
-                                {% else %}
-                                    {{ product.price }} ден.
-                                {% endif %}
+                                </div>
                             </div>
 
@@ -1236,21 +1964,25 @@
                             <div class="product-store">
                                 {% if product.store == 'Vero' %}
-                                    <img src="{% static 'images/vero_logo.png' %}" alt="Vero" style="height: 35px;">
+                                    <img src="{% static 'images/vero_logo1.png' %}" alt="Vero" style="height: 35px;">
                                 {% elif product.store == 'Ramstore' %}
                                     <img src="{% static 'images/ramstore_logo.png' %}" alt="Ramstore"
                                          style="height: 35px;">
                                 {% elif product.store == 'Reptil' %}
-                                    <img src="{% static 'images/reptil_logo.jpg' %}" alt="Reptil" style="height: 35px;">
+                                    <img src="{% static 'images/reptil_logo.jpg' %}" alt="Reptil"
+                                         style="height: 35px;">
+                                {% elif product.store == 'Zito' %}
+                                    <img src="{% static 'images/zito_logo.png' %}" alt="Zito"
+                                         style="height: 35px;">
                                 {% endif %}
                             </div>
                             <div class="product-category">{{ product.category|translate_category }}</div>
                             <div class="product-actions">
-                                <a href="{{ product.product_url }}" target="_blank" class="view-product">Види
+                                <a href="{{ product.product_url }}" target="_blank" class="view-product"
+                                   style="color: rgba(22,53,22,0.93); ">Види
                                     производ</a>
                                 <div class="product-actions">
                                     <button class="btn btn-success add-to-list-btn"
-                                            style="padding: 7px; background-color: #2e652e; color: white; border-radius: 10px; border-color: rgba(84,146,73,0.71); cursor: pointer;"
-                                            data-product-id="{{ product.id }}">Додај
-                                        во листа
+                                            style="padding: 7px; background-color: #2e652e; color: white; border-radius: 10px; border-color: rgba(84,146,73,0.71); cursor: pointer; "
+                                            data-product-id="{{ product.id }}"><b>Додај</b>
                                     </button>
                                 </div>
@@ -1270,287 +2002,463 @@
         {% if page_obj.has_other_pages %}
             <div class="pagination">
-        <span class="step-links" style="margin-bottom: 40px">
-            {% if page_obj.has_previous %}
-                <a href="?page=1
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-                        {% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}">&laquo;</a>
-                <a href="?page=
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-                        {{ page_obj.previous_page_number }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}">&lsaquo;</a>
-            {% endif %}
-
-            <span class="current">
-                Страна {{ page_obj.number }} од {{ page_obj.paginator.num_pages }}.
+            <span class="step-links" style="margin-bottom: 40px">
+                {% if page_obj.has_previous %}
+                    <a href="?page=1
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+                            {% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}">&laquo;</a>
+                    <a href="?page=
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+                            {{ page_obj.previous_page_number }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}">&lsaquo;</a>
+                {% endif %}
+
+                <span class="current">
+                    Страна {{ page_obj.number }} од {{ page_obj.paginator.num_pages }}.
+                </span>
+
+                {% if page_obj.has_next %}
+                    <a href="?page=
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+                            {{ page_obj.next_page_number }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}">&rsaquo;</a>
+                    <a href="?page=
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+                            {{ page_obj.paginator.num_pages }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}">&raquo;</a>
+                {% endif %}
             </span>
-
-            {% if page_obj.has_next %}
-                <a href="?page=
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-                        {{ page_obj.next_page_number }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}">&rsaquo;</a>
-                <a href="?page=
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-                        {{ page_obj.paginator.num_pages }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}">&raquo;</a>
-            {% endif %}
-        </span>
             </div>
         {% endif %}
@@ -1806,7 +2714,7 @@
         if (userLists.length === 0) {
             listsContainer.innerHTML = `
-            <p>Немате креирано листи.</p>
-            <div class="create-new-list" onclick="showNewListForm()">Креирај нова листа</div>
-        `;
+                <p>Немате креирано листи.</p>
+                <div class="create-new-list" onclick="showNewListForm()">Креирај нова листа</div>
+            `;
         } else {
             userLists.forEach(list => {
@@ -2031,7 +2939,292 @@
         });
     });
-
+    {#// Add this to your existing JavaScript#}
+    {#document.addEventListener('DOMContentLoaded', function () {#}
+    {#    // Handle navbar search form submission#}
+    {#    const navbarSearchForm = document.querySelector('.header-search form');#}
+    {#    if (navbarSearchForm) {#}
+    {#        navbarSearchForm.addEventListener('submit', function (e) {#}
+    {#            const searchInput = this.querySelector('input[name="search"]');#}
+    {#            if (searchInput.value.trim() === '') {#}
+    {#                e.preventDefault(); // Prevent empty searches#}
+    {#            }#}
+    {#        });#}
+    {#    }#}
+
+    // Handle mobile search form submission
+    {#    const mobileSearchForm = document.querySelector('.mobile-search-form');#}
+    {#    if (mobileSearchForm) {#}
+    {#        mobileSearchForm.addEventListener('submit', function (e) {#}
+    {#            const searchInput = this.querySelector('input[name="search"]');#}
+    {#            if (searchInput.value.trim() === '') {#}
+    {#                e.preventDefault(); // Prevent empty searches#}
+    {#            }#}
+    {#        });#}
+    {#    }#}
+    {#{}#}
+    {#);#}
+
+    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 priceRange = document.getElementById('priceRange');
+    const maxPriceDisplay = document.getElementById('maxPriceDisplay');
+
+    priceRange.addEventListener('input', () => {
+        maxPriceDisplay.textContent = priceRange.value + ' ден.';
+    });
+    document.addEventListener('DOMContentLoaded', function () {
+        // Check if this is the first visit to the catalog page
+        if (!localStorage.getItem('catalogTourShown')) {
+            // Show the instruction modal after a short delay
+            setTimeout(showInstructionModal, 1000);
+
+            // Mark that the tour has been shown
+            localStorage.setItem('catalogTourShown', 'true');
+        }
+
+        // Close button handler
+        document.getElementById('closeInstruction')?.addEventListener('click', function () {
+            document.getElementById('instructionModal').style.display = 'none';
+        });
+    });
+
+    document.addEventListener('DOMContentLoaded', function () {
+        // Check if first visit
+        if (!localStorage.getItem('catalogTourShown')) {
+            setTimeout(showEnhancedTour, 1000);
+            localStorage.setItem('catalogTourShown', 'true');
+        }
+
+        // Close button
+        document.getElementById('closeInstruction')?.addEventListener('click', closeTour);
+        document.getElementById('gotItBtn')?.addEventListener('click', closeTour);
+
+        // Optional: Replay button
+        document.getElementById('showInstructionsAgain')?.addEventListener('click', showEnhancedTour);
+    });
+
+    function showEnhancedTour() {
+        const modal = document.getElementById('instructionModal');
+        const listArrow = document.getElementById('listArrow');
+        const navArrow = document.getElementById('navArrow');
+        const listSelector = document.getElementById('listSelector');
+        const navLists = document.querySelector('.user-actions .list-icon');
+        // In showEnhancedTour():
+        {#listArrow.style.left = '300px';  // Fixed test position#}
+        {#listArrow.style.top = '100px';#}
+        {#navArrow.style.left = '200px';#}
+        {#navArrow.style.top = '200px';#}
+
+        if (modal && listArrow && navArrow) {
+            // Position arrows
+            if (listSelector) {
+                const listRect = listSelector.getBoundingClientRect();
+                listArrow.style.left = `${listRect.left + listRect.width / 2 - 50}px`; // Adjust X position
+                listArrow.style.top = `${listRect.top - 80}px`; // Adjust Y position
+            }
+
+            if (navLists) {
+                const navRect = navLists.getBoundingClientRect();
+                navArrow.style.left = `${navRect.left + navRect.width / 2 - 50}px`; // Adjust X position
+                navArrow.style.top = `${navRect.bottom - 30}px`; // Adjust Y position
+            }
+
+            // Show modal and arrows
+            modal.style.display = 'flex';
+            setTimeout(() => {
+                listArrow.style.opacity = '1';
+                navArrow.style.opacity = '1';
+            }, 500);
+        }
+    }
+
+    function closeTour() {
+        const modal = document.getElementById('instructionModal');
+        if (modal) {
+            modal.style.animation = 'modalExit 0.3s forwards';
+            setTimeout(() => {
+                modal.style.display = 'none';
+            }, 300);
+        }
+    }
+
+    // Add to your existing CSS:
+    {#@keyframes#}
+    {#modalExit#}
+    {#{#}
+    {#    to#}
+    {#    {#}
+    {#        transform: scale(0.9);#}
+    {#        opacity: 0;#}
+    {#    }#}
+
+
+    document.getElementById('showInstructionsAgain')?.addEventListener('click', showInstructionModal);
 
 </script>
+<!-- Instruction Modal - Enhanced -->
+<div id="instructionModal" class="instruction-modal">
+    <div class="modal-content">
+        <div class="modal-header" style="border-radius: 7px;">
+            <h3>Како да ги користите листите?</h3>
+            <button id="closeInstruction" class="modal-close-btn">&times;</button>
+        </div>
+        <div class="modal-body">
+            {#            <p>Како да користите листи:</p>#}
+            <div class="instruction-step">
+                <div class="step-number">1</div>
+                <p>Изберете листа од паѓачкото мени!</p>
+            </div>
+            <div class="instruction-step">
+                <div class="step-number">2</div>
+                <p>Кликнете на <strong>"Додај"</strong> за да го додадете производот во листа.</p>
+            </div>
+            <div class="instruction-step">
+                <div class="step-number">3</div>
+                <p>Пристапете ги вашите листи од менито <strong>"Мои листи"</strong><span
+                        class="hint-text">(горе десно)</span></p>
+            </div>
+        </div>
+        <button id="gotItBtn" class="modal-action-btn">Разбрав!</button>
+    </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>
+
+
+</div>
+<button id="showInstructionsAgain"
+        style="position: fixed; bottom: 20px; right: 20px; background: #2e652e; color: white; border: none; border-radius: 50%; width: 40px; height: 40px; cursor: pointer; font-size: 20px;">
+    ?
+</button>
 </body>
 </html>
Index: main/templates/main/stats.html
===================================================================
--- main/templates/main/stats.html	(revision 52c9c87d52fd2d6be3621074ff2ed6eac3c913be)
+++ main/templates/main/stats.html	(revision fef3b4d766831b584534962ac137a311239ecc91)
@@ -1,41 +1,733 @@
 {% load static %}
 
+<!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;
+            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 {
+            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%;
+        }
+
+        /* 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;
+        }
+
+        .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 {
+            margin: 30px 0;
+            padding: 20px;
+            background-color: #f9f9f9;
+            border-radius: 8px;
+        }
+
+        .product-choices h3 {
+            color: #2e652e;
+            font-size: 20px;
+            font-weight: 600;
+            margin-bottom: 15px;
+        }
+
+        .products-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+            gap: 15px;
+        }
+
+        .product-card {
+            background-color: white;
+            border-radius: 8px;
+            padding: 15px;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+            transition: all 0.3s ease;
+            border-left: 4px solid #81c784;
+        }
+
+        .product-card:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+        }
+
+        .product-card-link {
+            text-decoration: none;
+            color: inherit;
+        }
+
+        .product-title {
+            color: #2e652e;
+            margin: 0 0 10px 0;
+            font-size: 16px;
+            font-weight: 500;
+        }
+
+        .similarity-badge {
+            background-color: #e8f5e9;
+            color: #2e652e;
+            padding: 4px 10px;
+            border-radius: 12px;
+            font-size: 13px;
+            font-weight: 500;
+            display: inline-block;
+        }
+
+        .price-history {
+            margin: 40px 0;
+            padding: 20px;
+            background-color: white;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        }
+
+        .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;
+        }
+
+        /* 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 */
+        @media (max-width: 768px) {
+            .main-header {
+                display: none;
+            }
+
+            #mobile-header {
+                display: flex;
+            }
+
+            .stats-container {
+                padding: 20px;
+                margin-top: 20px;
+            }
+
+            .form-row {
+                flex-direction: column;
+                gap: 15px;
+            }
+
+            .products-grid {
+                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 {
+            {#min-width: 100% !important;#}{#max-width: 100% !important;#} 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;
+            }
+        }
+
+        {#/* Scrollbar for product list */#}
+        {#.products-scrollable {#}
+        {#    overflow-y: auto;#}
+        {#    max-height: 600px;#}
+        {#{#}
+        #}#}
+        {##}
+        {#.products-scrollable::-webkit-scrollbar {#}
+        {#    width: 8px;#}
+        {#{#}
+        #}#}
+        {##}
+        {#.products-scrollable::-webkit-scrollbar-thumb {#}
+        {#    background-color: #2e652e;#}
+        {#    border-radius: 4px;#}
+        {#{#}
+        #}#}
+
+    </style>
+</head>
+<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">
+            <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>
+        <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"
+                            style="background-color: rgba(43,86,43,0.93); color: white; padding: 8px 16px; border-radius: 20px">
+                        <b><i class="fas fa-sign-out-alt"></i> Одјави се </b>
+                    </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 'product_list' %}">Каталог</a></li>
+            <li><a href="{% url 'stats' %}">Статистика</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" id="mobileSearchForm">
+        <input type="text" name="search" id="mobileSearchInput" 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 '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>
+
+<!-- Stats Content -->
 <div class="stats-wrapper">
-    <div class="back-button">
-{#        <a href="javascript:history.back()" class="action-button secondary-button">#}
-        <a href="{% url 'home' %}" class="action-button secondary-button">
-            <i class="fas fa-arrow-left"></i> Назад
-        </a>
-    </div>
-
     <div class="stats-container">
-        <h1 class="stats-main-title"
-            style="padding: 10px; color: white; border-radius: 10px; background: linear-gradient(135deg, #1f3f1f, #2e652e);">
-            Ценовна историја
-        </h1>
+        <div class="back-button">
+            <a href="{% url 'home' %}" class="action-button">
+                <i class="fas fa-arrow-left"></i> Назад
+            </a>
+        </div>
+
+        <h1 class="stats-main-title">Ценовна историја</h1>
 
         <form method="get" class="stats-form">
-            <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">Vero</option>
-                    <option value="Ramstore">Ramstore</option>
-                    <option value="Reptil">Reptil</option>
-                </select>
-            </div>
-            <div class="form-group">
-                <label for="product-input">Продукт:</label>
-                <input type="text" id="product-input" name="query" placeholder="напр. ВОДА" required
-                       value="{{ query|default:'' }}" class="form-input">
-            </div>
-            <!-- Add these date range fields -->
             <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">
+                <div class="form-group" style="width: 93%">
                     <label for="end-date">До датум:</label>
                     <input type="date" id="end-date" name="end_date" class="form-input"
@@ -44,5 +736,5 @@
             </div>
             <div class="form-actions">
-                <button type="submit" class="action-button primary-button">
+                <button type="submit" class="action-button">
                     <i class="fas fa-chart-line"></i> Прикажи историја
                 </button>
@@ -51,36 +743,55 @@
 
         {% if similar_products and not exact_match %}
-            <div class="product-choices">
-                <h3>Слични производи во {{ store }}:</h3>
-                <div class="products-grid">
-                    {% for product, similarity in similar_products %}
-                        <div class="product-card">
-                            <a href="?store={{ store|urlencode }}&query={{ query|urlencode }}&selected_product={{ product|urlencode }}"
-                               class="product-card-link">
-                                <h4 class="product-title">{{ product }}</h4>
-                                <div class="product-meta">
-                                    <span class="similarity-badge">{{ similarity|floatformat:2 }} сличност</span>
+            <!-- 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>
-                            </a>
+                            </div>
+                        {% endfor %}
+                    </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>
+                        <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>
-                    {% endfor %}
+                    {% endif %}
                 </div>
+
             </div>
         {% endif %}
 
-        {% if matched_name %}
-            <div class="price-history">
-                <h3>Ценовна историја за {{ matched_name }} во {{ store }}</h3>
-                <canvas id="priceChart"></canvas>
-            </div>
-        {% elif query %}
-            <div class="no-results">
-                <i class="fas fa-exclamation-circle"></i>
-                <p>Не се пронајдени производи за "{{ query }}" во {{ store }}.</p>
-                <p>Обидете се со различни термини или проверете го пишувањето.</p>
-            </div>
-        {% endif %}
     </div>
 </div>
+
 
 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
@@ -122,4 +833,7 @@
                         grid: {
                             color: 'rgba(0, 0, 0, 0.05)'
+                        },
+                        ticks: {
+                            color: '#333'
                         }
                     },
@@ -127,4 +841,14 @@
                         grid: {
                             color: 'rgba(0, 0, 0, 0.05)'
+                        },
+                        ticks: {
+                            color: '#333'
+                        }
+                    }
+                },
+                plugins: {
+                    legend: {
+                        labels: {
+                            color: '#2e652e'
                         }
                     }
@@ -133,4 +857,5 @@
         });
     {% endif %}
+
     document.querySelector('.stats-form').addEventListener('submit', function (e) {
         const startDate = document.getElementById('start-date').value;
@@ -142,235 +867,127 @@
         }
     });
+
+    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';
+            }
+        });
+    });
 </script>
-
-<style>
-    .stats-wrapper {
-        width: 100%;
-        padding: 20px;
-        box-sizing: border-box;
-        background: url('{% static "images/baner1.jpg" %}') no-repeat center center fixed;
-        background-size: cover;
-        min-height: 100vh;
-    }
-
-    .back-button {
-        position: absolute;
-        top: 20px;
-        left: 20px;
-        z-index: 10;
-    }
-
-    .stats-container {
-        max-width: 1200px;
-        margin: 0 auto;
-        background: rgba(255, 255, 255, 0.95);
-        border-radius: 12px;
-        box-shadow: 0 4px 25px rgba(0, 0, 0, 0.15);
-        padding: 30px;
-        margin-top: 60px;
-    }
-
-    .stats-main-title {
-        text-align: center;
-        margin-bottom: 30px;
-        font-size: 28px;
-        font-weight: 600;
-    }
-
-    .stats-form {
-        margin-bottom: 30px;
-    }
-
-    .form-group {
-        margin-bottom: 20px;
-    }
-
-    .form-group label {
-        display: block;
-        margin-bottom: 8px;
-        font-weight: 500;
-        color: #2e652e;
-    }
-
-    .form-input {
-        width: 100%;
-        padding: 12px 15px;
-        border: 1px solid #aed581;
-        border-radius: 6px;
-        font-size: 16px;
-        transition: all 0.3s;
-        background-color: white;
-    }
-
-    .form-input:focus {
-        border-color: #2e652e;
-        outline: none;
-        box-shadow: 0 0 0 3px rgba(46, 101, 46, 0.2);
-    }
-
-    .form-actions {
-        text-align: center;
-        margin-top: 25px;
-    }
-
-    .action-button {
-        display: inline-flex;
-        align-items: center;
-        gap: 8px;
-        padding: 12px 25px;
-        border-radius: 6px;
-        font-weight: 500;
-        text-decoration: none;
-        transition: all 0.3s ease;
-        cursor: pointer;
-        border: 2px solid transparent;
-    }
-
-    .primary-button {
-        background-color: #2e652e;
-        color: white;
-        border-color: #2e652e;
-    }
-
-    .primary-button:hover {
-        background-color: #1f3f1f;
-        border-color: #1f3f1f;
-    }
-
-    .secondary-button {
-        background-color: #e8f5e9;
-        color: #2e652e;
-        border-color: #c8e6c9;
-    }
-
-    .secondary-button:hover {
-        background-color: #d0f0d0;
-        border-color: #b2dfdb;
-    }
-
-    .product-choices {
-        margin: 30px 0;
-    }
-
-    .products-grid {
-        display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-        gap: 20px;
-        margin-top: 20px;
-    }
-
-    .product-card {
-        background: white;
-        border-left: 4px solid #81c784;
-        border-radius: 8px;
-        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
-        padding: 15px;
-        transition: all 0.3s;
-    }
-
-    .product-card:hover {
-        transform: translateY(-3px);
-        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12);
-    }
-
-    .product-card-link {
-        text-decoration: none;
-        color: inherit;
-        display: block;
-    }
-
-    .product-title {
-        color: #2e652e;
-        margin: 0 0 10px 0;
-        font-size: 16px;
-        font-weight: 500;
-    }
-
-    .product-meta {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-    }
-
-    .similarity-badge {
-        background: #e8f5e9;
-        color: #2e652e;
-        padding: 4px 10px;
-        border-radius: 12px;
-        font-size: 13px;
-        font-weight: 500;
-    }
-
-    .price-history {
-        margin: 40px 0;
-        padding: 20px;
-        background: white;
-        border-radius: 8px;
-        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
-    }
-
-    .price-history h3 {
-        color: #2e652e;
-        margin-top: 0;
-        margin-bottom: 20px;
-    }
-
-    .no-results {
-        text-align: center;
-        padding: 30px;
-        background: #fff3e0;
-        border-radius: 8px;
-        color: #e65100;
-        margin: 30px 0;
-    }
-
-    .no-results i {
-        font-size: 40px;
-        margin-bottom: 15px;
-        color: #e65100;
-    }
-
-    .no-results p {
-        margin: 5px 0;
-        font-size: 16px;
-    }
-
-    @media (max-width: 768px) {
-        .stats-container {
-            padding: 20px;
-        }
-
-        .products-grid {
-            grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
-        }
-    }
-
-    @media (max-width: 480px) {
-        .stats-container {
-            padding: 15px;
-        }
-
-        .stats-main-title {
-            font-size: 24px;
-        }
-
-        .form-actions button {
-            width: 100%;
-        }
-    }
-
-    .form-row {
-        display: flex;
-        gap: 20px;
-        margin-bottom: 20px;
-    }
-
-    .form-row .form-group {
-        flex: 1;
-    }
-
-    /* Style date inputs to match other form elements */
-    input[type="date"].form-input {
-        padding: 11px 15px; /* Slightly adjusted to account for browser styling */
-    }
-</style>
+</body>
+</html>
Index: main/templatetags/category_filters.py
===================================================================
--- main/templatetags/category_filters.py	(revision 52c9c87d52fd2d6be3621074ff2ed6eac3c913be)
+++ main/templatetags/category_filters.py	(revision fef3b4d766831b584534962ac137a311239ecc91)
@@ -1,6 +1,4 @@
 from django import template
-
 register = template.Library()
-
 CATEGORY_TRANSLATIONS = {
     'snacks': 'Грицки',
@@ -25,9 +23,7 @@
     'frozen food': 'Замрзната Храна',
     'baby food': 'Храна за Бебиња',
-    # Add all other categories
 }
 
 @register.filter(name='translate_category')
 def translate_category(category):
-    # Convert to lowercase and strip whitespace for reliable matching
     return CATEGORY_TRANSLATIONS.get(category.lower().strip(), category)
Index: main/urls.py
===================================================================
--- main/urls.py	(revision 52c9c87d52fd2d6be3621074ff2ed6eac3c913be)
+++ main/urls.py	(revision fef3b4d766831b584534962ac137a311239ecc91)
@@ -5,5 +5,6 @@
 from django.contrib.auth import views as auth_views
 
-from .views import custom_logout, remove_from_list, get_store_products, stats_view, nearby_stores_view
+from .views import custom_logout, remove_from_list, get_store_products, stats_view
+
 
 # from .views import test_db_connection
@@ -33,4 +34,11 @@
     path('statistics/', stats_view, name='stats'),
     path('nearby-stores/', views.nearby_stores_view, name='nearby_stores'),
+    # path("recepies/", views.recipe_generator, name="recipe_generator"),
+    path('fridge-recipes/', views.fridge_recipes, name='fridge_recipes'),
+    # path('admin/', admin.site.urls),
+    path('search-suggestions/', views.search_suggestions, name='search_suggestions'),
+
+    # django-allauth urls:
+
 
 ]
Index: main/utils/similarity.py
===================================================================
--- main/utils/similarity.py	(revision 52c9c87d52fd2d6be3621074ff2ed6eac3c913be)
+++ main/utils/similarity.py	(revision fef3b4d766831b584534962ac137a311239ecc91)
@@ -1,39 +1,130 @@
+# 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
+import re
+from collections import Counter
 from sentence_transformers import SentenceTransformer
 from sklearn.metrics.pairwise import cosine_similarity
-from .db import get_all_products  # We'll make this next
+from .db import get_all_products
 
 
 model = SentenceTransformer('sentence-transformers/all-MiniLM-L6-v2')
 
+# Define unimportant words to ignore in matching
+STOPWORDS = {
+    "парче", "свежо", "парчиња", "грам", "г.", "ком", "комад", "број", "бр", "парчиња"
+}
+
+
 def get_similar_products(product_name, product_category, top_n=5):
     query_embedding = model.encode([product_name])
-
     products = get_all_products()
 
-    similarities = []
+    # Step 1: Filter products by category only
+    filtered_products = [p for p in products if p['category'] == product_category and p['name'] != product_name]
 
-    for p in products:
+    # Step 2: Build keyword frequency across products in this category
+    all_keywords = []
+    for p in filtered_products:
+        all_keywords += tokenize(p['name'])
+
+    keyword_freq = Counter(all_keywords)
+
+    # Step 3: Tokenize the query
+    query_keywords = set(tokenize(product_name))
+
+    results = []
+
+    for p in filtered_products:
         try:
-            if p['category'] != product_category or p['name'] == product_name:
-                continue
+            product_keywords = set(tokenize(p['name']))
+            common_keywords = query_keywords & product_keywords
 
+            if len(common_keywords) == 0:
+                continue  # skip if no overlap
+
+            # Base keyword score based on frequency in dataset
+            keyword_score = sum(keyword_freq[k] for k in common_keywords)
+
+            # Boost score if 2+ strong matches
+            bonus = 0
+            if len(common_keywords) >= 2:
+                bonus += 5
+
+            # Extra bonus for important matches
+            for word in common_keywords:
+                if word in ['пиво', 'вино', 'ракија', 'сок', 'млеко', 'кромид', 'јаболко']:
+                    bonus += 10
+                elif re.match(r'\d+(\.\d+)?л', word):  # match like 1л, 0.5л
+                    bonus += 5
+
+            # Embedding similarity
             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'],  # Ensure the 'id' is included
+            total_score = keyword_score + bonus + (sim * 5)
+
+            results.append({
+                'id': p['id'],
                 'name': p['name'],
                 'similarity': round(sim, 2),
+                'keyword_score': keyword_score,
+                'score': round(total_score, 2),
                 'price': p.get('price'),
                 'store': p.get('store'),
                 'image': p.get('image_url'),
-
             })
 
-        except Exception as e:
+        except Exception:
             continue
 
-    return sorted(similarities, key=lambda x: x['similarity'], reverse=True)[:top_n]
+    return sorted(results, key=lambda x: x['score'], reverse=True)[:top_n]
+
+
+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)
+    return [t for t in tokens if len(t) > 1 and t not in STOPWORDS]
Index: main/views.py
===================================================================
--- main/views.py	(revision 52c9c87d52fd2d6be3621074ff2ed6eac3c913be)
+++ main/views.py	(revision fef3b4d766831b584534962ac137a311239ecc91)
@@ -1,17 +1,5 @@
 import json
-from datetime import datetime
-from django.shortcuts import render
-from geopy.distance import geodesic
-
-from .models import Products2
+import requests
 from django.core.paginator import Paginator
-from django.db.models import Q
-from django.http import JsonResponse
-from django.views.decorators.csrf import csrf_exempt
-from django.contrib.auth.decorators import login_required
-from django.http import HttpResponse
-from django.db import connection
-from django.utils import timezone
-from django.db.models import F
 from django.db.models import Case, When, DecimalField
 from django.shortcuts import render, redirect
@@ -19,27 +7,11 @@
 from .forms import RegisterForm
 from django.contrib.auth import logout
-from django.contrib import messages
-from django.shortcuts import render, redirect, get_object_or_404
 from django.contrib.auth.decorators import login_required
-from .models import ShoppingList, ShoppingListItem
-from django.shortcuts import render, redirect, get_object_or_404
-from django.contrib.auth.decorators import login_required
-from django.http import JsonResponse
 from .models import ShoppingList, ShoppingListItem, Products2
 from django.views.decorators.http import require_POST
 from django.views.decorators.csrf import csrf_exempt
-from main.models import User
 from .utils.similarity import get_similar_products
-from .utils.similarity import get_similar_products
-from django.db.models import F
-from django.db.models.functions import Lower, Trim
 from django.shortcuts import render, get_object_or_404
-from django.shortcuts import render
-from django.db.models import Q
-from datetime import datetime, time
-from difflib import get_close_matches
-from django.shortcuts import render
-from geopy.distance import geodesic
-
+from datetime import datetime
 
 
@@ -100,5 +72,5 @@
     discounted_products = Products2.objects.filter(
         popust=True
-    ).order_by('-price')[:12]  # Removed the date filter here
+    ).order_by('-price')[:12]
 
     stores = Products2.objects.filter(popust=True).values_list('store', flat=True).distinct()
@@ -108,17 +80,13 @@
         cleaned = store.strip()
 
-        # Debugging step: break down the query into parts to inspect the data
         store_filtered = Products2.objects.filter(store__iexact=cleaned)
         popust_filtered = store_filtered.filter(popust=True)
 
-        # Debugging output: Check the number of products for each store
         print(f"Store: {cleaned}")
         print(f"Products after store filter: {store_filtered.count()}")
         print(f"Products after popust filter: {popust_filtered.count()}")
 
-        # Fetch products for the store
-        products = popust_filtered.order_by('-price')[:3]  # No date filter here
-
-        # Debugging output: Check the actual products being fetched
+        products = popust_filtered.order_by('-price')[:3]
+
         if not products:
             print(f"No discounted products for {cleaned}")
@@ -151,10 +119,8 @@
         products = products.filter(name__icontains=query)
 
-    # Search by name only
     search_query = request.GET.get('search')
     if search_query:
         products = products.filter(name__icontains=search_query)
 
-    # Category filter
     selected_categories = request.GET.getlist('category')
     if selected_categories:
@@ -230,5 +196,4 @@
     products = Products2.objects.all()
 
-    # Handle search
     search_query = request.GET.get('search', '')
     if search_query:
@@ -241,5 +206,4 @@
     context = {
         'products': products,
-        # your other context variables
     }
     return render(request, 'main/product_list.html', context)
@@ -261,5 +225,5 @@
     logout(request)
 
-    # Get the same context data as your home view
+    # Replicate the home view logic for stores_with_products
     categories = Products2.objects.exclude(
         Q(category__isnull=True) | Q(category__exact='')
@@ -272,9 +236,23 @@
     ).order_by('-price')[:12]
 
+    stores = Products2.objects.filter(popust=True).values_list('store', flat=True).distinct()
+    stores_with_products = []
+    for store in stores:
+        cleaned = store.strip()
+        store_filtered = Products2.objects.filter(store__iexact=cleaned)
+        popust_filtered = store_filtered.filter(popust=True)
+        products = popust_filtered.order_by('-price')[:3]
+        if products.exists():  # Only add if there are products
+            stores_with_products.append({
+                'name': cleaned,
+                'products': list(products),
+                'count': products.count()
+            })
+
     context = {
         'categories': categories,
-        'discounted_products': discounted_products
+        'discounted_products': discounted_products,
+        'stores_with_products': stores_with_products
     }
-
     return render(request, 'main/base.html', context)
 
@@ -336,28 +314,4 @@
         return JsonResponse({'success': True})
     return JsonResponse({'success': False})
-
-
-# @csrf_exempt
-# @require_POST
-# def add_to_list(request):
-#     product_id = request.POST.get('product_id')
-#     list_id = request.POST.get('list_id')
-#
-#     try:
-#         # Get or create the list item
-#         item, created = ShoppingListItem.objects.get_or_create(
-#             list_id=list_id,
-#             product_id=product_id,
-#             defaults={'quantity': 1}
-#         )
-#
-#         if not created:
-#             item.quantity += 1
-#             item.save()
-#
-#         return JsonResponse({'success': True, 'message': 'Product added to list'})
-#
-#     except Exception as e:
-#         return JsonResponse({'success': False, 'message': str(e)}, status=400)
 
 @csrf_exempt
@@ -417,14 +371,30 @@
     product = get_object_or_404(Products2, id=product_id)
 
-    # You can call your get_similar_products function here
+    chart_data = []
+    with connection.cursor() as cursor:
+        cursor.execute("""
+            SELECT scraped_date, price 
+            FROM product_history2 
+            WHERE name = %s AND store LIKE %s
+            ORDER BY scraped_date ASC
+        """, [product.name, '%' + product.store + '%'])
+
+        result = cursor.fetchall()
+        chart_data = [{
+            'date': row[0].isoformat(),
+            'price': float(row[1])
+        } for row in result]
+
     similar_products = get_similar_products(product.name, product.category)
 
     return render(request, 'main/product_detail.html', {
         'product': product,
-        'similar_products': similar_products
+        'similar_products': similar_products,
+        'chart_data': chart_data,
+        'price_history': chart_data
     })
 @login_required
 @require_POST
-@csrf_exempt  # Add this if you're still having CSRF issues during testing
+@csrf_exempt
 def remove_from_list(request, item_id):
     try:
@@ -449,4 +419,5 @@
         {
             'name': p.name,
+            'id': p.id,
             'price': str(p.price),
             'actual_price': str(p.actual_price),
@@ -459,7 +430,4 @@
 
 
-from difflib import SequenceMatcher
-from django.db import connection
-
 from difflib import get_close_matches
 from django.db import connection
@@ -471,9 +439,7 @@
     selected_product = request.GET.get('selected_product', '').strip()
 
-    # Get date range parameters
     start_date = request.GET.get('start_date')
     end_date = request.GET.get('end_date')
 
-    # Validate and parse dates
     try:
         start_date_obj = datetime.strptime(start_date, '%Y-%m-%d').date() if start_date else None
@@ -490,5 +456,4 @@
     if store and query:
         with connection.cursor() as cursor:
-            # 1. First try exact match
             cursor.execute("""
                 SELECT DISTINCT name 
@@ -503,5 +468,4 @@
                 exact_match = True
             else:
-                # 2. Get all product names from this store
                 cursor.execute("""
                     SELECT DISTINCT name FROM product_history2 
@@ -510,8 +474,6 @@
                 all_store_products = [row[0] for row in cursor.fetchall()]
 
-                # 3. Find similar products using multiple approaches
                 similar_products = []
 
-                # Approach 1: Close string matches
                 string_matches = get_close_matches(
                     query,
@@ -521,5 +483,4 @@
                 )
 
-                # Approach 2: Products containing the search term
                 query_lower = query.lower()
                 contains_matches = [
@@ -581,65 +542,216 @@
     })
 
-
-STORE_LOCATIONS = {
-    'Reptil': [
-        {'name': 'Reptil 1', 'lat': 42.002, 'lon': 21.400},
-        {'name': 'Reptil 2', 'lat': 42.005, 'lon': 21.410},
-        {'name': 'Reptil 3', 'lat': 42.010, 'lon': 21.420},
-    ],
-    'Vero': [
-        {'name': 'Vero 1', 'lat': 41.998, 'lon': 21.435},
-        {'name': 'Vero 2', 'lat': 42.012, 'lon': 21.395},
-    ],
-    'Ramstore': [
-        {'name': 'Ramstore 1', 'lat': 42.007, 'lon': 21.408},
-        {'name': 'Ramstore 2', 'lat': 42.015, 'lon': 21.420},
+def get_driving_distance(user_lat, user_lon, store_lat, store_lon, api_key):
+    url = "https://maps.googleapis.com/maps/api/distancematrix/json"
+    params = {
+        "origins": f"{user_lat},{user_lon}",
+        "destinations": f"{store_lat},{store_lon}",
+        "key": api_key,
+        "units": "metric"
+    }
+    response = requests.get(url, params=params)
+    data = response.json()
+
+    if data['status'] == 'OK':
+        element = data['rows'][0]['elements'][0]
+        if element['status'] == 'OK':
+            distance_km = element['distance']['value'] / 1000
+            duration = element['duration']['text']
+            return distance_km, duration
+    return None, None
+
+from django.conf import settings
+
+def nearby_stores_view(request):
+    user_lat = request.GET.get('latitude')
+    user_lon = request.GET.get('longitude')
+    fuel_consumption = request.GET.get('fuel_consumption')
+    store_chain = request.GET.get('store_chain')
+
+    print("Received params:", user_lat, user_lon, fuel_consumption, store_chain)
+
+    if not all([user_lat, user_lon, fuel_consumption, store_chain]):
+        return render(request, "main/nearby_stores.html", {
+            "error": "Missing parameters.",
+            "results": [],
+        })
+
+    user_lat = float(user_lat)
+    user_lon = float(user_lon)
+    fuel_consumption = float(fuel_consumption)
+    store_chain = store_chain.lower()
+
+    stores = [
+        {"name": "Reptil Market Ruzveltova", "lat": 41.9980, "lon": 21.4250, "chain": "reptil"},
+        {"name": "Reptil Market Crniche", "lat": 41.9840, "lon": 21.4400, "chain": "reptil"},
+        {"name": "Reptil Market Kisela Voda", "lat": 41.9510, "lon": 21.4460, "chain": "reptil"},
+        {"name": "Reptil Market Aerodrom", "lat": 41.9780, "lon": 21.4680, "chain": "reptil"},
+        {"name": "Reptil Market Karposh", "lat": 41.9980, "lon": 21.3930, "chain": "reptil"},
+        {"name": "Reptil Market Partizanska", "lat": 41.9980, "lon": 21.4090, "chain": "reptil"},
+        {"name": "Reptil Market Porta Vlae", "lat": 41.9990, "lon": 21.3860, "chain": "reptil"},
+        {"name": "Reptil Market Radishani", "lat": 42.0500, "lon": 21.4500, "chain": "reptil"},
+        {"name": "Reptil Market Karposh 3", "lat": 41.9990, "lon": 21.4080, "chain": "reptil"},
+        {"name": "Reptil Market Butel", "lat": 42.0400, "lon": 21.4500, "chain": "reptil"},
+        {"name": "Reptil Market Center (50ta Divizija)", "lat": 41.9980, "lon": 21.4320, "chain": "reptil"},
+        {"name": "Reptil Market Nerezi", "lat": 41.9960, "lon": 21.3900, "chain": "reptil"},
+        {"name": "Reptil Market Madzari", "lat": 41.9900, "lon": 21.4700, "chain": "reptil"},
+        {"name": "Reptil Market Lisiche", "lat": 41.9752, "lon": 21.4728, "chain": "reptil"},
+        {"name": "Reptil Market Green Market", "lat": 41.9950, "lon": 21.4360, "chain": "reptil"},
+        {"name": "Reptil Market Center (Aminta III)", "lat": 41.9980, "lon": 21.4300, "chain": "reptil"},
+        {"name": "Reptil Market Kozle", "lat": 41.9960, "lon": 21.3900, "chain": "reptil"},
+        {"name": "Reptil Market Vlae", "lat": 41.9990, "lon": 21.3860, "chain": "reptil"},
+        {"name": "Reptil Market Avtokomanda", "lat": 42.0000, "lon": 21.4700, "chain": "reptil"},
+        {"name": "Reptil Market Bardovci", "lat": 42.0200, "lon": 21.3900, "chain": "reptil"},
+        {"name": "Reptil Market Novo Lisiche", "lat": 41.9801, "lon": 21.4752, "chain": "reptil"},
+        {"name": "Reptil Market Taftalidze", "lat": 41.9972, "lon": 21.4085, "chain": "reptil"},
+        {"name": "Ramstore Vardar", "lat": 41.9981, "lon": 21.4325, "chain": "ramstore"},
+        {"name": "Ramstore City Mall", "lat": 42.0045, "lon": 21.3919, "chain": "ramstore"},
+        {"name": "Ramstore Taftalidze", "lat": 42.0030, "lon": 21.3925, "chain": "ramstore"},
+        {"name": "Ramstore Karposh", "lat": 42.0040, "lon": 21.3940, "chain": "ramstore"},
+        {"name": "Ramstore Cevahir", "lat": 41.9880, "lon": 21.4700, "chain": "ramstore"},
+        {"name": "Ramstore Park", "lat": 41.9975, "lon": 21.4260, "chain": "ramstore"},
+        {"name": "Ramstore Gorno Lisiche", "lat": 41.9600, "lon": 21.4700, "chain": "ramstore"},
+        {"name": "Ramstore Kapitol", "lat": 41.9830, "lon": 21.4690, "chain": "ramstore"},
+        {"name": "Ramstore Kapishtec", "lat": 41.9900, "lon": 21.4300, "chain": "ramstore"},
+        {"name": "Ramstore Debar Maalo", "lat": 41.9970, "lon": 21.4300, "chain": "ramstore"},
+        {"name": "Ramstore Vodno", "lat": 41.9900, "lon": 21.4300, "chain": "ramstore"},
+        {"name": "Ramstore Aerodrom", "lat": 41.9800, "lon": 21.4700, "chain": "ramstore"},
+        {"name": "Ramstore Star Aerodrom", "lat": 41.9800, "lon": 21.4700, "chain": "ramstore"},
+        {"name": "Ramstore Michurin", "lat": 41.9800, "lon": 21.4700, "chain": "ramstore"},
+        {"name": "Ramstore Sever", "lat": 42.0100, "lon": 21.4400, "chain": "ramstore"},
+        {"name": "Ramstore Cair", "lat": 42.0100, "lon": 21.4400, "chain": "ramstore"},
+        {"name": "Vero Aerodrom", "lat": 41.9980, "lon": 21.4680, "chain": "vero"},
+        {"name": "Vero Taftalidze", "lat": 41.9972, "lon": 21.4085, "chain": "vero"},
+        {"name": "Vero GTC", "lat": 41.9981, "lon": 21.4325, "chain": "vero"},
+        {"name": "Vero Čair", "lat": 42.0000, "lon": 21.4330, "chain": "vero"},
+        {"name": "Vero Vero Centar", "lat": 41.9980, "lon": 21.4250, "chain": "vero"},
+        {"name": "Vero Kisela Voda", "lat": 41.9510, "lon": 21.4460, "chain": "vero"},
+        {"name": "Vero Karposh", "lat": 41.9980, "lon": 21.3930, "chain": "vero"},
+        {"name": "Vero Diamond Mall", "lat": 41.9985, "lon": 21.4230, "chain": "vero"},
     ]
+
+    filtered_stores = [s for s in stores if s["chain"] == store_chain]
+
+    print("Filtered stores:", filtered_stores)
+
+    results = []
+    for store in filtered_stores:
+        distance_km, duration = get_driving_distance(user_lat, user_lon, store["lat"], store["lon"], settings.GOOGLE_MAPS_API_KEY)
+        if distance_km is not None:
+            gas_used = (distance_km * 2 * fuel_consumption) / 100
+            results.append({
+                "store": store["name"],
+                "distance_km": distance_km,
+                "duration": duration,
+                "gas_used": round(gas_used, 2),
+                "lat": store["lat"],
+                "lon": store["lon"],
+            })
+
+    nearest_stores = sorted(results, key=lambda x: x['distance_km'])
+    nearest_stores_top5 = nearest_stores[:5]
+
+    least_gas_stores = sorted(results, key=lambda x: x['gas_used'])
+    least_gas_stores_top5 = least_gas_stores[:5]
+
+    context = {
+        "results": results,
+        "nearest_stores": nearest_stores_top5,
+        "least_gas_stores": least_gas_stores_top5,
+        "latitude": user_lat,
+        "longitude": user_lon,
+        "fuel_consumption": fuel_consumption,
+        "store_chain": store_chain.title(),
+    }
+    return render(request, "main/nearby_stores.html", context)
+
+from django.shortcuts import render
+from django.http import JsonResponse
+from django.views.decorators.csrf import csrf_exempt
+
+@csrf_exempt
+def fridge_recipes(request):
+    if request.method != 'POST':
+        return JsonResponse({'error': 'Invalid method'}, status=405)
+    try:
+        data = json.loads(request.body)
+        ingredients = data.get('ingredients', '')
+
+        payload = {
+            "inputs": f"User has the following ingredients: {ingredients}. Suggest a Macedonian recipe using them. Return only one recipe with name and preparation steps."
+        }
+        headers = {
+            "Authorization": f"Bearer {settings.HUGGINGFACE_TOKEN}"
+        }
+        response = requests.post(
+            "https://api-inference.huggingface.co/models/mistralai/Mistral-7B-Instruct-v0.1",
+            headers=headers,
+            json=payload
+        )
+
+        if response.status_code != 200:
+            print(f"Hugging Face API error {response.status_code}: {response.text}")
+            return JsonResponse({"error": "Не може да се генерира рецепт. Обидете се повторно."}, status=500)
+
+        result = response.json()
+        if isinstance(result, dict) and result.get("error"):
+            print(f"HF API returned error: {result['error']}")
+            return JsonResponse({"error": "Не може да се генерира рецепт. Обидете се повторно."}, status=500)
+
+        generated_text = result[0]['generated_text']
+
+        return JsonResponse({
+            "recipes": [{
+                "title": "Предлог Рецепт",
+                "description": generated_text
+            }]
+        })
+    except Exception as e:
+        import traceback
+        traceback.print_exc()
+        return JsonResponse({"error": "Не може да се генерира рецепт. Обидете се повторно."}, status=500)
+
+
+LATIN_TO_CYRILLIC = {
+    'dzh': 'џ', 'ch': 'ч', 'sh': 'ш', 'zh': 'ж', 'lj': 'љ', 'nj': 'њ', 'kj': 'ќ', 'dj': 'ѓ',
+    'a': 'а', 'b': 'б', 'v': 'в', 'g': 'г', 'd': 'д', 'e': 'е', 'z': 'з', 'i': 'и',
+    'j': 'ј', 'k': 'к', 'l': 'л', 'm': 'м', 'n': 'н', 'o': 'о', 'p': 'п', 'r': 'р',
+    's': 'с', 't': 'т', 'u': 'у', 'f': 'ф', 'h': 'х', 'c': 'ц',
 }
 
-def nearby_stores_view(request):
-    latitude = request.GET.get('latitude')
-    longitude = request.GET.get('longitude')
-    fuel_usage = request.GET.get('fuel_usage')
-    selected_store = request.GET.get('store')
-
-    if not latitude or not longitude or not fuel_usage or not selected_store:
-        return render(request, 'main/nearby_stores.html', {'error': 'Missing parameters'})
-
-    try:
-        user_location = (float(latitude), float(longitude))
-        fuel_usage = float(fuel_usage)
-    except ValueError:
-        return render(request, 'main/nearby_stores.html', {'error': 'Invalid input'})
-
-    stores = [
-        {'name': 'Reptil 1', 'lat': 42.003, 'lon': 21.406},
-        {'name': 'Reptil 2', 'lat': 42.010, 'lon': 21.420},
-        {'name': 'Reptil 3', 'lat': 42.005, 'lon': 21.400},
-        {'name': 'Vero 1', 'lat': 42.007, 'lon': 21.410},
-    ]
-
-    nearby_stores = []
-    for store in stores:
-        print(f"Checking store: {store['name']}")
-        if selected_store.lower() in store['name'].lower():
-            store_location = (store['lat'], store['lon'])
-            distance_km = geodesic(user_location, store_location).km
-            fuel_needed = (fuel_usage / 100) * distance_km
-            nearby_stores.append({
-                'name': store['name'],
-                'distance': distance_km,
-                'fuel': fuel_needed
-            })
-
-    nearby_stores.sort(key=lambda x: x['distance'])
-
-    context = {
-        'nearby_stores': nearby_stores,
-        'latitude': latitude,
-        'longitude': longitude,
-        'fuel_usage': fuel_usage,
-        'selected_store': selected_store,
-    }
-
-    return render(request, 'main/nearby_stores.html', context)
+def transliterate_latin_to_cyrillic(text):
+    result = ''
+    i = 0
+    while i < len(text):
+        if text[i:i+3].lower() in LATIN_TO_CYRILLIC:
+            result += LATIN_TO_CYRILLIC[text[i:i+3].lower()]
+            i += 3
+        elif text[i:i+2].lower() in LATIN_TO_CYRILLIC:
+            result += LATIN_TO_CYRILLIC[text[i:i+2].lower()]
+            i += 2
+        elif text[i].lower() in LATIN_TO_CYRILLIC:
+            result += LATIN_TO_CYRILLIC[text[i].lower()]
+            i += 1
+        else:
+            result += text[i]
+            i += 1
+    return result
+
+def search_suggestions(request):
+    query = request.GET.get('q', '').strip()
+    if len(query) < 2:
+        return JsonResponse({'suggestions': []})
+
+    cyrillic_query = transliterate_latin_to_cyrillic(query)
+
+    suggestions = Products2.objects.filter(
+        name__icontains=cyrillic_query
+    ).values_list('name', flat=True).distinct()[:10]
+
+    if not suggestions:
+        suggestions = Products2.objects.filter(
+            name__icontains=query
+        ).values_list('name', flat=True).distinct()[:10]
+
+    return JsonResponse({'suggestions': list(suggestions)})
+
