Index: DjangoProject3/settings.py
===================================================================
--- DjangoProject3/settings.py	(revision 09a55ba56c74813273c03182cd01e2f8d3314915)
+++ DjangoProject3/settings.py	(revision 35577210e2892b3cb3b24bb561e3f46989f9a05e)
@@ -16,4 +16,5 @@
 from dotenv import load_dotenv
 
+
 # Build paths inside the project like this: BASE_DIR / 'subdir'.
 BASE_DIR = Path(__file__).resolve().parent.parent
@@ -39,31 +40,74 @@
 # Application definition
 # Tuka ja dodavame kreiranata aplikacija main.apps.MainConfig da znae django deka postoi. sega mora da se ran migrate comandata
+# INSTALLED_APPS = [
+#     'django.contrib.auth',
+#     'django.contrib.contenttypes',
+#     'django.contrib.sessions',
+#     'django.contrib.messages',
+#     'django.contrib.staticfiles',
+#     'main.apps.MainConfig',
+#     'social_django',
+#     "django.contrib.sites",
+# ]
 INSTALLED_APPS = [
-    'django.contrib.auth',
-    'django.contrib.contenttypes',
-    'django.contrib.sessions',
-    'django.contrib.messages',
-    'django.contrib.staticfiles',
-    'main.apps.MainConfig',
-    'social_django',
-]
+    # Django built-in apps
+    "django.contrib.admin",
+    "django.contrib.auth",
+    "django.contrib.contenttypes",
+    "django.contrib.sessions",
+    "django.contrib.messages",
+    "django.contrib.staticfiles",
+
+    # Required for allauth
+    "django.contrib.sites",
+
+    # Your app
+    "main.apps.MainConfig",
+
+    # Allauth core
+    "allauth",
+    "allauth.account",
+    "allauth.socialaccount",
+
+    # Providers
+    "allauth.socialaccount.providers.google",
+    "allauth.socialaccount.providers.facebook",
+]
+
 
 AUTHENTICATION_BACKENDS = [
+    # Default backend (required for admin login)
     '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
+
+    # Django Allauth backend (handles social logins)
+    'allauth.account.auth_backends.AuthenticationBackend',
+]
+
+
+SITE_ID = 7
+LOGIN_REDIRECT_URL = "/"
+LOGOUT_REDIRECT_URL = "/"
+
+ACCOUNT_EMAIL_REQUIRED = True
+ACCOUNT_USERNAME_REQUIRED = False
+ACCOUNT_AUTHENTICATION_METHOD = "username_email"
+# ACCOUNT_EMAIL_VERIFICATION = "optional"
+# SOCIALACCOUNT_QUERY_EMAIL = True
+
+
+SOCIALACCOUNT_PROVIDERS = {
+    "google": {"SCOPE": ["profile", "email"], "AUTH_PARAMS": {"access_type": "online"}},
+    "facebook": {"METHOD": "oauth2", "SCOPE": ["email"], "FIELDS": ["id","email","name","first_name","last_name"]},
+}
+SOCIALACCOUNT_AUTO_SIGNUP = True  # Automatically create user without showing signup page
+SOCIALACCOUNT_LOGIN_ON_GET = True  # Optional: login immediately on GET request
+
+ACCOUNT_EMAIL_VERIFICATION = "none"
+SOCIALACCOUNT_QUERY_EMAIL = True
+# SOCIALACCOUNT_AUTO_SIGNUP = True
+
+
+
+# LOGIN_REDIRECT_URL = 'home'  # Redirect to home after login
 LOGIN_URL = 'login'
 
@@ -74,7 +118,9 @@
     'django.middleware.csrf.CsrfViewMiddleware',
     'django.contrib.auth.middleware.AuthenticationMiddleware',
+    'allauth.account.middleware.AccountMiddleware',   # <<< ADD THIS LINE
     'django.contrib.messages.middleware.MessageMiddleware',
     'django.middleware.clickjacking.XFrameOptionsMiddleware',
 ]
+
 
 ROOT_URLCONF = 'DjangoProject3.urls'
Index: main/migrations/0011_alter_shoppinglistitem_unique_together_and_more.py
===================================================================
--- main/migrations/0011_alter_shoppinglistitem_unique_together_and_more.py	(revision 35577210e2892b3cb3b24bb561e3f46989f9a05e)
+++ main/migrations/0011_alter_shoppinglistitem_unique_together_and_more.py	(revision 35577210e2892b3cb3b24bb561e3f46989f9a05e)
@@ -0,0 +1,30 @@
+# Generated by Django 5.1.7 on 2025-09-16 12:15
+
+import django.db.models.deletion
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('main', '0010_subcategory_products2_subcategory'),
+    ]
+
+    operations = [
+        migrations.AlterUniqueTogether(
+            name='shoppinglistitem',
+            unique_together={('shopping_list', 'product')},
+        ),
+        migrations.CreateModel(
+            name='ProductHistory',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('price', models.DecimalField(decimal_places=2, max_digits=10)),
+                ('date', models.DateField()),
+                ('product', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to='main.products2')),
+            ],
+            options={
+                'db_table': 'product_history2',
+            },
+        ),
+    ]
Index: main/models.py
===================================================================
--- main/models.py	(revision 09a55ba56c74813273c03182cd01e2f8d3314915)
+++ main/models.py	(revision 35577210e2892b3cb3b24bb561e3f46989f9a05e)
@@ -82,4 +82,7 @@
     added_at = models.DateTimeField(auto_now_add=True)
 
+    class Meta:
+        unique_together = ('shopping_list', 'product')
+
 
 
Index: main/templates/main/favorites.html
===================================================================
--- main/templates/main/favorites.html	(revision 09a55ba56c74813273c03182cd01e2f8d3314915)
+++ main/templates/main/favorites.html	(revision 35577210e2892b3cb3b24bb561e3f46989f9a05e)
@@ -16,5 +16,5 @@
                 <a href="{% url 'product_detail' favorite.product.id %}" class="product-card-link">
                     <div class="product-image-container">
-                        {% if favorite.product.image_url %}
+                        {% if favorite.product.image_url and favorite.product.store != 'Vero' %}
                             <img src="{{ favorite.product.image_url }}" alt="{{ favorite.product.name }}" class="product-image" loading="lazy">
                         {% else %}
Index: main/templates/main/header.html
===================================================================
--- main/templates/main/header.html	(revision 09a55ba56c74813273c03182cd01e2f8d3314915)
+++ main/templates/main/header.html	(revision 35577210e2892b3cb3b24bb561e3f46989f9a05e)
@@ -512,4 +512,7 @@
                 width: 96%;
             }
+        }
+        .header-search input{
+            width: 100%;
         }
     </style>
@@ -566,4 +569,6 @@
                 <li style="z-index: 0"><a href="{% url 'stats' %}">Статистика</a></li>
                 <li><a href="{% url 'view_lists' %}">Листи</a></li>
+                <li><a href="{% url 'nearby_stores' %}">Најблиски Продавници</a></li>
+
             </ul>
             <div style="display: flex">
@@ -610,4 +615,5 @@
         <a href="{% url 'stats' %}">Статистика</a>
         <a href="{% url 'view_lists' %}">Листи</a>
+        <a href="{% url 'nearby_stores' %}">Најблиски Продавници</a>
 
         {% if user.is_authenticated %}
Index: main/templates/main/index.html
===================================================================
--- main/templates/main/index.html	(revision 09a55ba56c74813273c03182cd01e2f8d3314915)
+++ main/templates/main/index.html	(revision 35577210e2892b3cb3b24bb561e3f46989f9a05e)
@@ -5,1149 +5,1155 @@
 {% block content %}
 
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
-    <title>Home</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-    <style>
-        /* Common Styles */
-                :root {
-            --primary-color: #2e652e;
-            --primary-dark: #1f3f1f;
-            --secondary-color: white; /* Text color */
-            --light-bg: #f5f5f5;
-            --white: #ffffff;
-            --text-dark: #333333;
-            --text-light: #666666;
-            --border-color: #e0e0e0;
-            --error-color: #e74c3c;
-            {#--orange-light: rgba(249,139,36,0.85);#}
-            --orange-light: rgba(253,216,53,0.85);
-            --orange-dark: #F2C9A1;
-            {#--orange-solid: #f98b24;#}
-            --orange-solid: rgba(246,215,27,0.85);
-                    color: rgba(246,193,52,0.85);
-                    color: rgba(246,215,27,0.85)
-        }
-
-        body {
-            font-family: Arial, sans-serif;
-            margin: 0;
-            padding: 0;
-            display: flex;
-            flex-direction: column;
-            min-height: 100vh;
-            background-color: var(--light-bg);
-            color: var(--text-dark);
-            line-height: 1.6;
-        }
-
-        /* 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: var(--white);
-            border-radius: 8px;
-            padding: 15px;
-            margin-bottom: 20px;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-            transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
-                        box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-        }
-
-        .sidebar-section:hover {
-            transform: translateY(-3px);
-            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
-        }
-
-        .sidebar-section h3 {
-            color: var(--white);
-            margin-bottom: 15px;
-            padding-bottom: 10px;
-            border-bottom: 1px solid rgba(255,255,255,0.3);
-        }
-
-        /* Popular Categories */
-        .popular-categories {
-            display: grid;
-            grid-template-columns: repeat(1, 1fr);
-            gap: 15px;
-            margin-bottom: 20px;
-        }
-
-        .popular-category {
-            background-color: var(--white);
-            border-radius: 8px;
-            overflow: hidden;
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-            text-align: center;
-        }
-
-        .popular-category:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
-        }
-
-        .popular-category-image {
-            height: 100px;
-            background-size: cover;
-            background-position: center;
-            transition: transform 0.4s ease;
-        }
-
-        .popular-category:hover .popular-category-image {
-            transform: scale(1.05);
-        }
-
-        .popular-category-title {
-            padding: 12px;
-            font-weight: 600;
-            color: var(--primary-color);
-            transition: color 0.3s ease;
-        }
-
-        .popular-category:hover .popular-category-title {
-            color: var(--orange-solid);
-        }
-
-        /* Main Content Area */
-        .content-area {
-            flex-grow: 1;
-        }
-
-        /* ====== BANNER STYLES ====== */
-        .banner-container {
-            margin: 0 auto 30px;
-            max-width: 1200px;
-            position: relative;
-            border-radius: 16px;
-            overflow: hidden;
-            box-shadow: 0 10px 30px rgba(0,0,0,0.15);
-        }
-
-        .banner-slides {
-            position: relative;
-            width: 100%;
-            height: 400px;
-            overflow: hidden;
-        }
-
-        .banner-slide {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background-size: cover;
-            background-position: center;
-            display: flex;
-            align-items: center;
-            transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-            opacity: 0;
-            transform: scale(1.02);
-        }
-
-        .banner-slide.active {
-            opacity: 1;
-            z-index: 1;
-            transform: scale(1);
-        }
-
-        .banner-overlay {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: linear-gradient(90deg, rgba(23,47,23,0.85) 0%, rgba(42,82,42,0.85) 100%);
-            transition: opacity 0.8s ease;
-        }
-
-        .banner-content {
-            position: relative;
-            z-index: 2;
-            padding: 0 60px;
-            max-width: 600px;
-            color: white;
-            text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
-        }
-
-        .banner-title {
-            font-size: 2.8rem;
-            font-weight: 800;
-            margin-bottom: 15px;
-            line-height: 1.2;
-            color: var(--secondary-color);
-            text-shadow: none;
-            transition: all 0.8s ease;
-        }
-
-        .banner-subtitle {
-            font-size: 1.3rem;
-            margin-bottom: 25px;
-            opacity: 0.9;
-            transition: all 0.8s ease;
-            color: var(--secondary-color);
-        }
-
-        .banner-btn {
-            display: inline-block;
-            padding: 12px 30px;
-            background-color: var(--orange-solid);
-            color: var(--secondary-color);
-            font-weight: 700;
-            border-radius: 50px;
-            text-decoration: none;
-            box-shadow: 0 4px 15px rgba(249, 139, 36, 0.3);
-            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-            border: none;
-            cursor: pointer;
-        }
-
-        .banner-btn:hover {
-            transform: translateY(-3px);
-            box-shadow: 0 8px 25px rgba(249, 139, 36, 0.4);
-            background-color: var(--orange-light);
-        }
-
-        .banner-nav {
-            position: absolute;
-            top: 50%;
-            transform: translateY(-50%);
-            width: 50px;
-            height: 50px;
-            background: rgba(255,255,255,0.2);
-            backdrop-filter: blur(5px);
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            color: white;
-            font-size: 20px;
-            cursor: pointer;
-            z-index: 10;
-            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-            border: 1px solid rgba(255,255,255,0.3);
-            opacity: 0.7;
-        }
-
-        .banner-nav:hover {
-            background: rgba(255,255,255,0.3);
-            opacity: 1;
-            transform: translateY(-50%) scale(1.1);
-        }
-
-        .banner-prev {
-            left: 20px;
-        }
-
-        .banner-next {
-            right: 20px;
-        }
-
-        .banner-dots {
-            position: absolute;
-            bottom: 20px;
-            left: 0;
-            right: 0;
-            display: flex;
-            justify-content: center;
-            gap: 10px;
-            z-index: 10;
-        }
-
-        .banner-dot {
-            width: 12px;
-            height: 12px;
-            border-radius: 50%;
-            background: rgba(255,255,255,0.5);
-            cursor: pointer;
-            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-        }
-
-        .banner-dot.active {
-            background: var(--orange-solid);
-            transform: scale(1.3);
-        }
-
-        .banner-dot:hover {
-            transform: scale(1.2);
-        }
-
-        /* Animation */
-        @keyframes fadeInUp {
-            from {
+    <!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>Home</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+        <style>
+            /* Common Styles */
+            :root {
+                --primary-color: #2e652e;
+                --primary-dark: #1f3f1f;
+                --secondary-color: white; /* Text color */
+                --light-bg: #f5f5f5;
+                --white: #ffffff;
+                --text-dark: #333333;
+                --text-light: #666666;
+                --border-color: #e0e0e0;
+                --error-color: #e74c3c;
+            {#--orange-light: rgba(249,139,36,0.85);#} --orange-light: rgba(253, 216, 53, 0.85);
+                --orange-dark: #F2C9A1;
+            {#--orange-solid: #f98b24;#} --orange-solid: rgba(246, 215, 27, 0.85);
+                color: rgba(246, 193, 52, 0.85);
+                color: rgba(246, 215, 27, 0.85)
+            }
+
+            body {
+                font-family: Arial, sans-serif;
+                margin: 0;
+                padding: 0;
+                display: flex;
+                flex-direction: column;
+                min-height: 100vh;
+                background-color: var(--light-bg);
+                color: var(--text-dark);
+                line-height: 1.6;
+            }
+
+            /* 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: var(--white);
+                border-radius: 8px;
+                padding: 15px;
+                margin-bottom: 20px;
+                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+                transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
+                box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+            }
+
+            .sidebar-section:hover {
+                transform: translateY(-3px);
+                box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
+            }
+
+            .sidebar-section h3 {
+                color: var(--white);
+                margin-bottom: 15px;
+                padding-bottom: 10px;
+                border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+            }
+
+            /* Popular Categories */
+            .popular-categories {
+                display: grid;
+                grid-template-columns: repeat(1, 1fr);
+                gap: 15px;
+                margin-bottom: 20px;
+            }
+
+            .popular-category {
+                background-color: var(--white);
+                border-radius: 8px;
+                overflow: hidden;
+                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+                transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+                text-align: center;
+            }
+
+            .popular-category:hover {
+                transform: translateY(-5px);
+                box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
+            }
+
+            .popular-category-image {
+                height: 100px;
+                background-size: cover;
+                background-position: center;
+                transition: transform 0.4s ease;
+            }
+
+            .popular-category:hover .popular-category-image {
+                transform: scale(1.05);
+            }
+
+            .popular-category-title {
+                padding: 12px;
+                font-weight: 600;
+                color: var(--primary-color);
+                transition: color 0.3s ease;
+            }
+
+            .popular-category:hover .popular-category-title {
+                color: var(--orange-solid);
+            }
+
+            /* Main Content Area */
+            .content-area {
+                flex-grow: 1;
+            }
+
+            /* ====== BANNER STYLES ====== */
+            .banner-container {
+                margin: 0 auto 30px;
+                max-width: 1200px;
+                position: relative;
+                border-radius: 16px;
+                overflow: hidden;
+                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
+            }
+
+            .banner-slides {
+                position: relative;
+                width: 100%;
+                height: 400px;
+                overflow: hidden;
+            }
+
+            .banner-slide {
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                background-size: cover;
+                background-position: center;
+                display: flex;
+                align-items: center;
+                transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
                 opacity: 0;
-                transform: translateY(20px);
-            }
-            to {
+                transform: scale(1.02);
+            }
+
+            .banner-slide.active {
                 opacity: 1;
+                z-index: 1;
+                transform: scale(1);
+            }
+
+            .banner-overlay {
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                background: linear-gradient(90deg, rgba(23, 47, 23, 0.85) 0%, rgba(42, 82, 42, 0.85) 100%);
+                transition: opacity 0.8s ease;
+            }
+
+            .banner-content {
+                position: relative;
+                z-index: 2;
+                padding: 0 60px;
+                max-width: 600px;
+                color: white;
+                text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
+            }
+
+            .banner-title {
+                font-size: 2.8rem;
+                font-weight: 800;
+                margin-bottom: 15px;
+                line-height: 1.2;
+                color: var(--secondary-color);
+                text-shadow: none;
+                transition: all 0.8s ease;
+            }
+
+            .banner-subtitle {
+                font-size: 1.3rem;
+                margin-bottom: 25px;
+                opacity: 0.9;
+                transition: all 0.8s ease;
+                color: var(--secondary-color);
+            }
+
+            .banner-btn {
+                display: inline-block;
+                padding: 12px 30px;
+                background-color: var(--orange-solid);
+                color: var(--secondary-color);
+                font-weight: 700;
+                border-radius: 50px;
+                text-decoration: none;
+                box-shadow: 0 4px 15px rgba(249, 139, 36, 0.3);
+                transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+                border: none;
+                cursor: pointer;
+            }
+
+            .banner-btn:hover {
+                transform: translateY(-3px);
+                box-shadow: 0 8px 25px rgba(249, 139, 36, 0.4);
+                background-color: var(--orange-light);
+            }
+
+            .banner-nav {
+                position: absolute;
+                top: 50%;
+                transform: translateY(-50%);
+                width: 50px;
+                height: 50px;
+                background: rgba(255, 255, 255, 0.2);
+                backdrop-filter: blur(5px);
+                border-radius: 50%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                color: white;
+                font-size: 20px;
+                cursor: pointer;
+                z-index: 10;
+                transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+                border: 1px solid rgba(255, 255, 255, 0.3);
+                opacity: 0.7;
+            }
+
+            .banner-nav:hover {
+                background: rgba(255, 255, 255, 0.3);
+                opacity: 1;
+                transform: translateY(-50%) scale(1.1);
+            }
+
+            .banner-prev {
+                left: 20px;
+            }
+
+            .banner-next {
+                right: 20px;
+            }
+
+            .banner-dots {
+                position: absolute;
+                bottom: 20px;
+                left: 0;
+                right: 0;
+                display: flex;
+                justify-content: center;
+                gap: 10px;
+                z-index: 10;
+            }
+
+            .banner-dot {
+                width: 12px;
+                height: 12px;
+                border-radius: 50%;
+                background: rgba(255, 255, 255, 0.5);
+                cursor: pointer;
+                transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+            }
+
+            .banner-dot.active {
+                background: var(--orange-solid);
+                transform: scale(1.3);
+            }
+
+            .banner-dot:hover {
+                transform: scale(1.2);
+            }
+
+            /* Animation */
+            @keyframes fadeInUp {
+                from {
+                    opacity: 0;
+                    transform: translateY(20px);
+                }
+                to {
+                    opacity: 1;
+                    transform: translateY(0);
+                }
+            }
+
+            .banner-content > * {
+                animation: fadeInUp 0.8s ease forwards;
+            }
+
+            .banner-content h1 {
+                animation-delay: 0.3s;
+            }
+
+            .banner-content p {
+                animation-delay: 0.5s;
+            }
+
+            .banner-content a {
+                animation-delay: 0.7s;
+            }
+
+            /* Section Titles */
+            .section-title {
+                font-size: 1.5rem;
+                font-weight: 600;
+                margin-bottom: 20px;
+                color: var(--primary-color);
+                position: relative;
+                padding-bottom: 10px;
+            }
+
+            .section-title::after {
+                content: '';
+                position: absolute;
+                left: 0;
+                bottom: 0;
+                width: 50px;
+                height: 3px;
+                background: linear-gradient(to right, var(--primary-color), var(--orange-solid));
+                border-radius: 3px;
+            }
+
+            /* Market Flyers */
+            .market-flyers {
+                background-color: var(--white);
+                border-radius: 8px;
+                padding: 20px;
+                box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+                transition: transform 0.4s ease, box-shadow 0.4s ease;
+            }
+
+            .market-flyers:hover {
+                box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+            }
+
+            .flyers-container {
+                display: grid;
+                grid-template-columns: repeat(3, 1fr);
+                gap: 20px;
+            }
+
+            .flyer-card {
+                background: var(--white);
+                border-radius: 8px;
+                overflow: hidden;
+                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+                transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+            }
+
+            .flyer-card:hover {
+                transform: translateY(-5px);
+                box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
+            }
+
+            .flyer-header {
+                padding: 15px;
+                background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
+                text-align: center;
+                color: white;
+            }
+
+            .header-search input {
+                width: 97%;
+            }
+
+            .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 var(--border-color);
+                transition: transform 0.3s ease;
+            }
+
+            .flyer-product:hover {
+                transform: translateX(5px);
+            }
+
+            .flyer-product img {
+                width: 60px;
+                height: 60px;
+                object-fit: cover;
+                border-radius: 5px;
+                transition: transform 0.3s ease;
+            }
+
+            .flyer-product:hover img {
+                transform: scale(1.05);
+            }
+
+            .product-info {
+                flex: 1;
+            }
+
+            .product-name {
+                display: block;
+                font-weight: 500;
+                margin-bottom: 5px;
+                font-size: 14px;
+                transition: color 0.3s ease;
+            }
+
+            .flyer-product:hover .product-name {
+                color: var(--orange-solid);
+            }
+
+            .product-price {
+                display: flex;
+                gap: 10px;
+                font-size: 14px;
+            }
+
+            .old-price {
+                text-decoration: line-through;
+                color: #999;
+            }
+
+            .new-price {
+                color: var(--error-color);
+                font-weight: bold;
+            }
+
+            .view-all-btn {
+                width: 100%;
+                padding: 10px;
+                background-color: var(--orange-solid);
+                color: var(--secondary-color);
+                border: none;
+                font-weight: bold;
+                cursor: pointer;
+                transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+                border-radius: 4px;
+                margin-top: 10px;
+            }
+
+            .view-all-btn:hover {
+                background-color: var(--orange-light);
+                transform: translateY(-2px);
+                box-shadow: 0 4px 8px rgba(249, 139, 36, 0.3);
+            }
+
+            /* Footer */
+            footer {
+                background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
+                color: white;
+                padding: 40px 20px;
+                margin-top: auto;
+            }
+
+            .footer-content {
+                max-width: 1200px;
+                margin: 0 auto;
+                display: grid;
+                grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+                gap: 30px;
+            }
+
+            .footer-section h3 {
+                margin-bottom: 20px;
+                font-size: 1.2rem;
+                color: var(--orange-light);
+                position: relative;
+                padding-bottom: 10px;
+            }
+
+            .footer-section h3::after {
+                content: '';
+                position: absolute;
+                left: 0;
+                bottom: 0;
+                width: 40px;
+                height: 2px;
+                background: var(--orange-light);
+            }
+
+            .footer-section p, .footer-section a {
+                color: #ddd;
+                margin-bottom: 10px;
+                display: block;
+                text-decoration: none;
+                transition: all 0.3s ease;
+                font-size: 14px;
+            }
+
+            .footer-section a:hover {
+                color: var(--orange-light);
+                transform: translateX(5px);
+                text-decoration: none;
+            }
+
+            .footer-section.social a {
+                display: inline-flex;
+                align-items: center;
+                gap: 8px;
+                transition: transform 0.3s ease;
+            }
+
+            .footer-section.social a:hover {
+                transform: translateX(5px);
+            }
+
+            .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;
+            }
+
+            /* 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;
+                transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+                transform: translateX(100%);
+                opacity: 0;
+            }
+
+            .alert.show {
+                transform: translateX(0);
+                opacity: 1;
+            }
+
+            /* Modal */
+            .modal {
+                display: none;
+                position: fixed;
+                z-index: 1000;
+                left: 0;
+                top: 0;
+                width: 100%;
+                height: 100%;
+                background-color: rgba(0, 0, 0, 0.7);
+                overflow-y: auto;
+                opacity: 0;
+                transition: opacity 0.4s ease;
+            }
+
+            .modal.show {
+                opacity: 1;
+            }
+
+            .modal-content {
+                background-color: #fefefe;
+                margin: 5% auto;
+                padding: 30px;
+                border-radius: 15px;
+                max-width: 900px;
+                width: 90%;
+                box-shadow: 0 5px 30px rgba(0, 0, 0, 0.3);
+                position: relative;
+                transform: translateY(-20px);
+                transition: transform 0.4s ease;
+            }
+
+            .modal.show .modal-content {
                 transform: translateY(0);
             }
-        }
-
-        .banner-content > * {
-            animation: fadeInUp 0.8s ease forwards;
-        }
-
-        .banner-content h1 {
-            animation-delay: 0.3s;
-        }
-
-        .banner-content p {
-            animation-delay: 0.5s;
-        }
-
-        .banner-content a {
-            animation-delay: 0.7s;
-        }
-
-        /* Section Titles */
-        .section-title {
-            font-size: 1.5rem;
-            font-weight: 600;
-            margin-bottom: 20px;
-            color: var(--primary-color);
-            position: relative;
-            padding-bottom: 10px;
-        }
-
-        .section-title::after {
-            content: '';
-            position: absolute;
-            left: 0;
-            bottom: 0;
-            width: 50px;
-            height: 3px;
-            background: linear-gradient(to right, var(--primary-color), var(--orange-solid));
-            border-radius: 3px;
-        }
-
-        /* Market Flyers */
-        .market-flyers {
-            background-color: var(--white);
-            border-radius: 8px;
-            padding: 20px;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-            transition: transform 0.4s ease, box-shadow 0.4s ease;
-        }
-
-        .market-flyers:hover {
-            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
-        }
-
-        .flyers-container {
-            display: grid;
-            grid-template-columns: repeat(3, 1fr);
-            gap: 20px;
-        }
-
-        .flyer-card {
-            background: var(--white);
-            border-radius: 8px;
-            overflow: hidden;
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-        }
-
-        .flyer-card:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
-        }
-
-        .flyer-header {
-            padding: 15px;
-            background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
-            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 var(--border-color);
-            transition: transform 0.3s ease;
-        }
-
-        .flyer-product:hover {
-            transform: translateX(5px);
-        }
-
-        .flyer-product img {
-            width: 60px;
-            height: 60px;
-            object-fit: cover;
-            border-radius: 5px;
-            transition: transform 0.3s ease;
-        }
-
-        .flyer-product:hover img {
-            transform: scale(1.05);
-        }
-
-        .product-info {
-            flex: 1;
-        }
-
-        .product-name {
-            display: block;
-            font-weight: 500;
-            margin-bottom: 5px;
-            font-size: 14px;
-            transition: color 0.3s ease;
-        }
-
-        .flyer-product:hover .product-name {
-            color: var(--orange-solid);
-        }
-
-        .product-price {
-            display: flex;
-            gap: 10px;
-            font-size: 14px;
-        }
-
-        .old-price {
-            text-decoration: line-through;
-            color: #999;
-        }
-
-        .new-price {
-            color: var(--error-color);
-            font-weight: bold;
-        }
-
-        .view-all-btn {
-            width: 100%;
-            padding: 10px;
-            background-color: var(--orange-solid);
-            color: var(--secondary-color);
-            border: none;
-            font-weight: bold;
-            cursor: pointer;
-            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-            border-radius: 4px;
-            margin-top: 10px;
-        }
-
-        .view-all-btn:hover {
-            background-color: var(--orange-light);
-            transform: translateY(-2px);
-            box-shadow: 0 4px 8px rgba(249, 139, 36, 0.3);
-        }
-
-        /* Footer */
-        footer {
-            background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
-            color: white;
-            padding: 40px 20px;
-            margin-top: auto;
-        }
-
-        .footer-content {
-            max-width: 1200px;
-            margin: 0 auto;
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-            gap: 30px;
-        }
-
-        .footer-section h3 {
-            margin-bottom: 20px;
-            font-size: 1.2rem;
-            color: var(--orange-light);
-            position: relative;
-            padding-bottom: 10px;
-        }
-
-        .footer-section h3::after {
-            content: '';
-            position: absolute;
-            left: 0;
-            bottom: 0;
-            width: 40px;
-            height: 2px;
-            background: var(--orange-light);
-        }
-
-        .footer-section p, .footer-section a {
-            color: #ddd;
-            margin-bottom: 10px;
-            display: block;
-            text-decoration: none;
-            transition: all 0.3s ease;
-            font-size: 14px;
-        }
-
-        .footer-section a:hover {
-            color: var(--orange-light);
-            transform: translateX(5px);
-            text-decoration: none;
-        }
-
-        .footer-section.social a {
-            display: inline-flex;
-            align-items: center;
-            gap: 8px;
-            transition: transform 0.3s ease;
-        }
-
-        .footer-section.social a:hover {
-            transform: translateX(5px);
-        }
-
-        .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;
-        }
-
-        /* 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;
-            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-            transform: translateX(100%);
-            opacity: 0;
-        }
-
-        .alert.show {
-            transform: translateX(0);
-            opacity: 1;
-        }
-
-        /* Modal */
-        .modal {
-            display: none;
-            position: fixed;
-            z-index: 1000;
-            left: 0;
-            top: 0;
-            width: 100%;
-            height: 100%;
-            background-color: rgba(0, 0, 0, 0.7);
-            overflow-y: auto;
-            opacity: 0;
-            transition: opacity 0.4s ease;
-        }
-
-        .modal.show {
-            opacity: 1;
-        }
-
-        .modal-content {
-            background-color: #fefefe;
-            margin: 5% auto;
-            padding: 30px;
-            border-radius: 15px;
-            max-width: 900px;
-            width: 90%;
-            box-shadow: 0 5px 30px rgba(0, 0, 0, 0.3);
-            position: relative;
-            transform: translateY(-20px);
-            transition: transform 0.4s ease;
-        }
-
-        .modal.show .modal-content {
-            transform: translateY(0);
-        }
-
-        .close-modal {
-            position: absolute;
-            right: 25px;
-            top: 25px;
-            color: #aaa;
-            font-size: 28px;
-            font-weight: bold;
-            cursor: pointer;
-            transition: all 0.3s ease;
-        }
-
-        .close-modal:hover {
-            color: var(--orange-solid);
-            transform: rotate(90deg);
-        }
-
-        .modal-title {
-            font-size: 1.8rem;
-            color: var(--primary-color);
-            margin-bottom: 20px;
-            padding-bottom: 10px;
-            border-bottom: 2px solid var(--primary-color);
-            display: flex;
-            align-items: center;
-            gap: 10px;
-        }
-
-        .modal-products-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-            gap: 25px;
-            margin-top: 20px;
-        }
-
-        .modal-product {
-            background: var(--white);
-            border-radius: 10px;
-            overflow: hidden;
-            box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
-            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-        }
-
-        .modal-product:hover {
-            transform: translateY(-8px);
-            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
-        }
-
-        .modal-product img {
-            width: 100%;
-            height: 180px;
-            object-fit: cover;
-            border-bottom: 1px solid var(--border-color);
-            transition: transform 0.4s ease;
-        }
-
-        .modal-product:hover img {
-            transform: scale(1.05);
-        }
-
-        .modal-product-info {
-            padding: 15px;
-        }
-
-        .modal-product-name {
-            font-size: 1rem;
-            font-weight: 600;
-            margin-bottom: 10px;
-            color: var(--text-dark);
-            display: block;
-            transition: color 0.3s ease;
-        }
-
-        .modal-product:hover .modal-product-name {
-            color: var(--orange-solid);
-        }
-
-        .modal-product-price {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-
-        .modal-old-price {
-            text-decoration: line-through;
-            color: #999;
-            font-size: 0.9rem;
-        }
-
-        .modal-new-price {
-            color: var(--error-color);
-            font-weight: bold;
-            font-size: 1.1rem;
-        }
-
-        .discount-badge {
-            background-color: var(--error-color);
-            color: white;
-            padding: 3px 8px;
-            border-radius: 4px;
-            font-size: 0.8rem;
-            font-weight: bold;
-            margin-left: 10px;
-        }
-
-        .no-products {
-            text-align: center;
-            padding: 40px;
-            color: var(--text-light);
-            font-size: 1.1rem;
-            grid-column: 1 / -1;
-        }
-
-        .loading-spinner {
-            display: inline-block;
-            width: 40px;
-            height: 40px;
-            border: 4px solid rgba(46, 101, 46, 0.2);
-            border-radius: 50%;
-            border-top-color: var(--primary-color);
-            animation: spin 1s ease-in-out infinite;
-            margin: 20px auto;
-            grid-column: 1 / -1;
-        }
-
-        @keyframes spin {
-            to {
-                transform: rotate(360deg);
-            }
-        }
-
-        /* Responsiveness */
-        @media (max-width: 1024px) {
-            .flyers-container {
-                grid-template-columns: repeat(2, 1fr);
-            }
-
-            .banner-title {
-                font-size: 2.4rem;
-            }
-
-            .banner-subtitle {
+
+            .close-modal {
+                position: absolute;
+                right: 25px;
+                top: 25px;
+                color: #aaa;
+                font-size: 28px;
+                font-weight: bold;
+                cursor: pointer;
+                transition: all 0.3s ease;
+            }
+
+            .close-modal:hover {
+                color: var(--orange-solid);
+                transform: rotate(90deg);
+            }
+
+            .modal-title {
+                font-size: 1.8rem;
+                color: var(--primary-color);
+                margin-bottom: 20px;
+                padding-bottom: 10px;
+                border-bottom: 2px solid var(--primary-color);
+                display: flex;
+                align-items: center;
+                gap: 10px;
+            }
+
+            .modal-products-grid {
+                display: grid;
+                grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+                gap: 25px;
+                margin-top: 20px;
+            }
+
+            .modal-product {
+                background: var(--white);
+                border-radius: 10px;
+                overflow: hidden;
+                box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
+                transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+            }
+
+            .modal-product:hover {
+                transform: translateY(-8px);
+                box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
+            }
+
+            .modal-product img {
+                width: 100%;
+                height: 180px;
+                object-fit: cover;
+                border-bottom: 1px solid var(--border-color);
+                transition: transform 0.4s ease;
+            }
+
+            .modal-product:hover img {
+                transform: scale(1.05);
+            }
+
+            .modal-product-info {
+                padding: 15px;
+            }
+
+            .modal-product-name {
+                font-size: 1rem;
+                font-weight: 600;
+                margin-bottom: 10px;
+                color: var(--text-dark);
+                display: block;
+                transition: color 0.3s ease;
+            }
+
+            .modal-product:hover .modal-product-name {
+                color: var(--orange-solid);
+            }
+
+            .modal-product-price {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+            }
+
+            .modal-old-price {
+                text-decoration: line-through;
+                color: #999;
+                font-size: 0.9rem;
+            }
+
+            .modal-new-price {
+                color: var(--error-color);
+                font-weight: bold;
                 font-size: 1.1rem;
             }
-        }
-
-        @media (max-width: 768px) {
-            .main-content {
-                flex-direction: column;
-                padding: 10px;
-            }
-
-            .content-area {
-                order: 1;
-            }
-
-            .left-sidebar {
-                width: 100%;
-                order: 2;
-                margin-top: 20px;
-            }
-
-            .popular-categories {
-                grid-template-columns: repeat(2, 1fr);
-            }
-
-            .banner-slides {
-                height: 350px;
-            }
-
-            .banner-content {
-                padding: 0 30px;
+
+            .discount-badge {
+                background-color: var(--error-color);
+                color: white;
+                padding: 3px 8px;
+                border-radius: 4px;
+                font-size: 0.8rem;
+                font-weight: bold;
+                margin-left: 10px;
+            }
+
+            .no-products {
                 text-align: center;
-            }
-
-            .banner-title {
-                font-size: 2rem;
-            }
-
-            .banner-nav {
+                padding: 40px;
+                color: var(--text-light);
+                font-size: 1.1rem;
+                grid-column: 1 / -1;
+            }
+
+            .loading-spinner {
+                display: inline-block;
                 width: 40px;
                 height: 40px;
-                font-size: 16px;
-            }
-
-            .flyers-container {
-                grid-template-columns: 1fr;
-            }
-
-            .modal-products-grid {
-                grid-template-columns: 1fr;
-            }
-        }
-
-        @media (max-width: 576px) {
-            .banner-slides {
-                height: 300px;
-            }
-
-            .banner-title {
-                font-size: 1.8rem;
-            }
-
-            .banner-subtitle {
-                font-size: 1rem;
-            }
-
-            .banner-btn {
-                padding: 10px 20px;
-            }
-
-            .popular-categories {
-                grid-template-columns: 1fr;
-            }
-        }
-
-        a {
-            text-decoration: none;
-            color: inherit;
-        }
-
-        #store-name {
-            margin-left: 5px;
-            color: var(--orange-solid);
-        }
-    </style>
-</head>
-<body>
-
-<div class="message-container">
-    {% if messages %}
-        {% for message in messages %}
-            <div class="alert alert-{{ message.tags }}">
-                {{ message }}
-                <span class="close-btn" onclick="this.parentElement.remove()">×</span>
-            </div>
-        {% endfor %}
-    {% endif %}
-</div>
-
-<!-- Main Content -->
-<div class="main-content">
-    <main class="content-area">
-        <div class="banner-container">
-            <div class="banner-slides">
-                <!-- Banner 1 -->
-                <div class="banner-slide active" style="background-image: url('{% static 'images/baner1.jpg' %}')">
-                    <div class="banner-overlay"></div>
-                    <div class="banner-content">
-                        <h1 class="banner-title">Сите производи на едно место!</h1>
-                        <p class="banner-subtitle">Пронајди ги најевтините производи со <span style="color: rgba(246,215,27,0.85)"><b>Штедко</b></span></p>
-                        <a href="{% url 'product_list' %}" class="banner-btn">Започни сега</a>
+                border: 4px solid rgba(46, 101, 46, 0.2);
+                border-radius: 50%;
+                border-top-color: var(--primary-color);
+                animation: spin 1s ease-in-out infinite;
+                margin: 20px auto;
+                grid-column: 1 / -1;
+            }
+
+            @keyframes spin {
+                to {
+                    transform: rotate(360deg);
+                }
+            }
+
+            /* Responsiveness */
+            @media (max-width: 1024px) {
+                .flyers-container {
+                    grid-template-columns: repeat(2, 1fr);
+                }
+
+                .banner-title {
+                    font-size: 2.4rem;
+                }
+
+                .banner-subtitle {
+                    font-size: 1.1rem;
+                }
+            }
+
+            @media (max-width: 768px) {
+                .main-content {
+                    flex-direction: column;
+                    padding: 10px;
+                }
+
+                .content-area {
+                    order: 1;
+                }
+
+                .left-sidebar {
+                    width: 100%;
+                    order: 2;
+                    margin-top: 20px;
+                }
+
+                .popular-categories {
+                    grid-template-columns: repeat(2, 1fr);
+                }
+
+                .banner-slides {
+                    height: 350px;
+                }
+
+                .banner-content {
+                    padding: 0 30px;
+                    text-align: center;
+                }
+
+                .banner-title {
+                    font-size: 2rem;
+                }
+
+                .banner-nav {
+                    width: 40px;
+                    height: 40px;
+                    font-size: 16px;
+                }
+
+                .flyers-container {
+                    grid-template-columns: 1fr;
+                }
+
+                .modal-products-grid {
+                    grid-template-columns: 1fr;
+                }
+            }
+
+            @media (max-width: 576px) {
+                .banner-slides {
+                    height: 300px;
+                }
+
+                .banner-title {
+                    font-size: 1.8rem;
+                }
+
+                .banner-subtitle {
+                    font-size: 1rem;
+                }
+
+                .banner-btn {
+                    padding: 10px 20px;
+                }
+
+                .popular-categories {
+                    grid-template-columns: 1fr;
+                }
+            }
+
+            a {
+                text-decoration: none;
+                color: inherit;
+            }
+
+            #store-name {
+                margin-left: 5px;
+                color: var(--orange-solid);
+            }
+        </style>
+    </head>
+    <body>
+
+    <div class="message-container">
+        {% if messages %}
+            {% for message in messages %}
+                <div class="alert alert-{{ message.tags }}">
+                    {{ message }}
+                    <span class="close-btn" onclick="this.parentElement.remove()">×</span>
+                </div>
+            {% endfor %}
+        {% endif %}
+    </div>
+
+    <!-- Main Content -->
+    <div class="main-content">
+        <main class="content-area">
+            <div class="banner-container">
+                <div class="banner-slides">
+                    <!-- Banner 1 -->
+                    <div class="banner-slide active" style="background-image: url('{% static 'images/baner1.jpg' %}')">
+                        <div class="banner-overlay"></div>
+                        <div class="banner-content">
+                            <h1 class="banner-title">Сите производи на едно место!</h1>
+                            <p class="banner-subtitle">Пронајди ги најевтините производи со <span
+                                    style="color: rgba(246,215,27,0.85)"><b>Штедко</b></span></p>
+                            <a href="{% url 'product_list' %}" class="banner-btn">Започни сега</a>
+                        </div>
+                    </div>
+
+                    <!-- Banner 2 -->
+                    <div class="banner-slide" style="background-image: url('{% static 'images/baner2.jpg' %}')">
+                        <div class="banner-overlay"></div>
+                        <div class="banner-content">
+                            <h1 class="banner-title">Не ги пропуштај дневните попусти!</h1>
+                            <p class="banner-subtitle">До 70% попуст на избрани производи</p>
+                            <a href="{% url 'product_list' %}?discounted=1" class="banner-btn">Види попусти</a>
+                        </div>
+                    </div>
+
+                    <!-- Banner 3 -->
+                    <div class="banner-slide" style="background-image: url('{% static 'images/kreiraj_listi.png' %}')">
+                        <div class="banner-overlay"></div>
+                        <div class="banner-content">
+                            <h1 class="banner-title">Направи си <span style="color: rgba(246,215,27,0.85)">листа</span>
+                                за пазарење и дознај</h1>
+                            <p class="banner-subtitle">во кој маркет е <span style="color: rgba(246,215,27,0.85)">најевтино</span>!
+                            </p>
+{#                            <a href="{% url 'product_list' %}" >Истражувај</a>#}
+                        </div>
                     </div>
                 </div>
 
-                <!-- Banner 2 -->
-                <div class="banner-slide" style="background-image: url('{% static 'images/baner2.jpg' %}')">
-                    <div class="banner-overlay"></div>
-                    <div class="banner-content">
-                        <h1 class="banner-title">Не ги пропуштај дневните попусти!</h1>
-                        <p class="banner-subtitle">До 70% попуст на избрани производи</p>
-                        <a href="{% url 'product_list' %}?discounted=1" class="banner-btn">Види попусти</a>
-                    </div>
-                </div>
-
-                <!-- Banner 3 -->
-                <div class="banner-slide" style="background-image: url('{% static 'images/kreiraj_listi.png' %}')">
-                    <div class="banner-overlay"></div>
-                    <div class="banner-content">
-                        <h1 class="banner-title">Направи си <span style="color: rgba(246,215,27,0.85)">листа</span> за пазарење и дознај</h1>
-                        <p class="banner-subtitle">во кој маркет е <span style="color: rgba(246,215,27,0.85)">најевтино</span>!</p>
-                        <a href="{% url 'product_list' %}?sort=newest" class="banner-btn">Истражувај</a>
-                    </div>
+                <button class="banner-nav banner-prev">❮</button>
+                <button class="banner-nav banner-next">❯</button>
+
+                <div class="banner-dots">
+                    <div class="banner-dot active"></div>
+                    <div class="banner-dot"></div>
+                    <div class="banner-dot"></div>
                 </div>
             </div>
 
-            <button class="banner-nav banner-prev">❮</button>
-            <button class="banner-nav banner-next">❯</button>
-
-            <div class="banner-dots">
-                <div class="banner-dot active"></div>
-                <div class="banner-dot"></div>
-                <div class="banner-dot"></div>
-            </div>
-        </div>
-
-        <section class="market-flyers">
-            <h2 class="section-title">Актуелни Попусти</h2>
-            <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 }}"
-                                                     onerror="this.onerror=null;this.src='{% static 'images/no-image.png' %}'">
-                                                <div class="product-info">
-                                                    <span class="product-name">{{ product.name }}</span>
-                                                    <span class="product-price">
+            <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 }}"
+                                                         onerror="this.onerror=null;this.src='{% static 'images/no-image.png' %}'">
+                                                    <div class="product-info">
+                                                        <span class="product-name">{{ product.name }}</span>
+                                                        <span class="product-price">
                                                         <span class="old-price">{{ product.price }} ден.</span>
                                                         <span class="new-price">{{ product.actual_price }} ден.</span>
                                                     </span>
+                                                    </div>
                                                 </div>
-                                            </div>
-                                        </a>
-                                    {% endfor %}
-                                {% else %}
-                                    <p>Нема достапни попусти за {{ store.name }}.</p>
-                                {% endif %}
+                                            </a>
+                                        {% endfor %}
+                                    {% else %}
+                                        <p>Нема достапни попусти за {{ store.name }}.</p>
+                                    {% endif %}
+                                </div>
+                                <button class="view-all-btn" data-store="{{ store.name }}"
+                                        style="box-shadow: 0 8px 25px rgba(249, 139, 36, 0.4);">
+                                    Види ги сите попусти
+                                </button>
                             </div>
-                            <button class="view-all-btn" data-store="{{ store.name }}" style="box-shadow: 0 8px 25px rgba(249, 139, 36, 0.4);">
-                                Види ги сите попусти
-                            </button>
-                        </div>
-                    {% endfor %}
-                {% else %}
-                    <p>No flyer data available. Please log in or check back later.</p>
-                {% endif %}
+                        {% endfor %}
+                    {% else %}
+                        <p>No flyer data available. Please log in or check back later.</p>
+                    {% endif %}
+                </div>
+            </section>
+        </main>
+        <aside class="left-sidebar">
+            <div class="sidebar-section">
+                <h3 style="background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); padding: 10px; border-radius: 10px">
+                    Популарни категории</h3>
+                <div class="popular-categories">
+                    <a href="{% url 'product_list' %}?category=Dairy" class="popular-category">
+                        <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>
-        </section>
-    </main>
-    <aside class="left-sidebar">
-        <div class="sidebar-section">
-            <h3 style="background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); padding: 10px; border-radius: 10px">
-                Популарни категории</h3>
-            <div class="popular-categories">
-                <a href="{% url 'product_list' %}?category=Dairy" class="popular-category">
-                    <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>
+        </aside>
+    </div>
+
+    <!-- Modal for showing all discounted products -->
+    <div id="products-modal" class="modal">
+        <div class="modal-content">
+            <span class="close-modal">×</span>
+            <h2 class="modal-title">
+                <i class="fas fa-tags"></i>
+                Попусти во <span id="store-name"></span>
+            </h2>
+            <div class="modal-products-grid" id="modal-products">
+                <!-- Products will be loaded here via JavaScript -->
             </div>
         </div>
-    </aside>
-</div>
-
-<!-- Modal for showing all discounted products -->
-<div id="products-modal" class="modal">
-    <div class="modal-content">
-        <span class="close-modal">×</span>
-        <h2 class="modal-title">
-            <i class="fas fa-tags"></i>
-            Попусти во <span id="store-name"></span>
-        </h2>
-        <div class="modal-products-grid" id="modal-products">
-            <!-- Products will be loaded here via JavaScript -->
+    </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>
-</div>
-
-<!-- Footer -->
-<footer>
-    <div class="footer-content">
-        <div class="footer-section">
-            <h3>За нас</h3>
-            <p>Ние сме водечка онлајн продавница со најдобри цени и квалитетни производи.</p>
+        <div class="copyright">
+            © 2023 Нашата Продавница. Сите права се задржани.
         </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>
-    // Banner carousel functionality
-    document.addEventListener('DOMContentLoaded', function() {
-        const bannerSlides = document.querySelectorAll('.banner-slide');
-        const prevBtn = document.querySelector('.banner-prev');
-        const nextBtn = document.querySelector('.banner-next');
-        const dots = document.querySelectorAll('.banner-dot');
-        const bannerContainer = document.querySelector('.banner-container');
-
-        let currentIndex = 0;
-        let interval;
-        let touchStartX = 0;
-        let touchEndX = 0;
-        const ROTATION_INTERVAL = 10000; // 10 seconds
-
-        // Initialize the first banner
-        showSlide(currentIndex);
-
-        // Auto-rotate banners
-        function startAutoRotate() {
-            interval = setInterval(nextSlide, ROTATION_INTERVAL);
-        }
-
-        function resetInterval() {
-            clearInterval(interval);
-            startAutoRotate();
-        }
-
-        function showSlide(index) {
-            // Hide all slides
-            bannerSlides.forEach(slide => {
-                slide.classList.remove('active');
-            });
-
-            // Show current slide
-            bannerSlides[index].classList.add('active');
-
-            // Update dots
-            dots.forEach(dot => dot.classList.remove('active'));
-            dots[index].classList.add('active');
-        }
-
-        function nextSlide() {
-            currentIndex = (currentIndex + 1) % bannerSlides.length;
+    </footer>
+
+    <script>
+        // Banner carousel functionality
+        document.addEventListener('DOMContentLoaded', function () {
+            const bannerSlides = document.querySelectorAll('.banner-slide');
+            const prevBtn = document.querySelector('.banner-prev');
+            const nextBtn = document.querySelector('.banner-next');
+            const dots = document.querySelectorAll('.banner-dot');
+            const bannerContainer = document.querySelector('.banner-container');
+
+            let currentIndex = 0;
+            let interval;
+            let touchStartX = 0;
+            let touchEndX = 0;
+            const ROTATION_INTERVAL = 10000; // 10 seconds
+
+            // Initialize the first banner
             showSlide(currentIndex);
-        }
-
-        function prevSlide() {
-            currentIndex = (currentIndex - 1 + bannerSlides.length) % bannerSlides.length;
-            showSlide(currentIndex);
-        }
-
-        // Button controls
-        nextBtn.addEventListener('click', function() {
-            nextSlide();
-            resetInterval();
-        });
-
-        prevBtn.addEventListener('click', function() {
-            prevSlide();
-            resetInterval();
-        });
-
-        // Dot navigation
-        dots.forEach((dot, index) => {
-            dot.addEventListener('click', function() {
-                currentIndex = index;
+
+            // Auto-rotate banners
+            function startAutoRotate() {
+                interval = setInterval(nextSlide, ROTATION_INTERVAL);
+            }
+
+            function resetInterval() {
+                clearInterval(interval);
+                startAutoRotate();
+            }
+
+            function showSlide(index) {
+                // Hide all slides
+                bannerSlides.forEach(slide => {
+                    slide.classList.remove('active');
+                });
+
+                // Show current slide
+                bannerSlides[index].classList.add('active');
+
+                // Update dots
+                dots.forEach(dot => dot.classList.remove('active'));
+                dots[index].classList.add('active');
+            }
+
+            function nextSlide() {
+                currentIndex = (currentIndex + 1) % bannerSlides.length;
                 showSlide(currentIndex);
+            }
+
+            function prevSlide() {
+                currentIndex = (currentIndex - 1 + bannerSlides.length) % bannerSlides.length;
+                showSlide(currentIndex);
+            }
+
+            // Button controls
+            nextBtn.addEventListener('click', function () {
+                nextSlide();
                 resetInterval();
             });
+
+            prevBtn.addEventListener('click', function () {
+                prevSlide();
+                resetInterval();
+            });
+
+            // Dot navigation
+            dots.forEach((dot, index) => {
+                dot.addEventListener('click', function () {
+                    currentIndex = index;
+                    showSlide(currentIndex);
+                    resetInterval();
+                });
+            });
+
+            // Touch events for mobile swipe
+            bannerContainer.addEventListener('touchstart', function (e) {
+                touchStartX = e.changedTouches[0].screenX;
+                clearInterval(interval);
+            }, {passive: true});
+
+            bannerContainer.addEventListener('touchend', function (e) {
+                touchEndX = e.changedTouches[0].screenX;
+                handleSwipe();
+                resetInterval();
+            }, {passive: true});
+
+            function handleSwipe() {
+                const threshold = 50; // Minimum swipe distance
+
+                if (touchEndX < touchStartX - threshold) {
+                    // Swiped left - next slide
+                    nextSlide();
+                } else if (touchEndX > touchStartX + threshold) {
+                    // Swiped right - previous slide
+                    prevSlide();
+                }
+            }
+
+            // Start auto-rotation
+            startAutoRotate();
+
+            // Pause on hover
+            bannerContainer.addEventListener('mouseenter', function () {
+                clearInterval(interval);
+            });
+
+            bannerContainer.addEventListener('mouseleave', function () {
+                resetInterval();
+            });
+
+            // Show messages with animation
+            document.querySelectorAll('.alert').forEach(alert => {
+                setTimeout(() => {
+                    alert.classList.add('show');
+                }, 100);
+            });
         });
 
-        // Touch events for mobile swipe
-        bannerContainer.addEventListener('touchstart', function(e) {
-            touchStartX = e.changedTouches[0].screenX;
-            clearInterval(interval);
-        }, {passive: true});
-
-        bannerContainer.addEventListener('touchend', function(e) {
-            touchEndX = e.changedTouches[0].screenX;
-            handleSwipe();
-            resetInterval();
-        }, {passive: true});
-
-        function handleSwipe() {
-            const threshold = 50; // Minimum swipe distance
-
-            if (touchEndX < touchStartX - threshold) {
-                // Swiped left - next slide
-                nextSlide();
-            } else if (touchEndX > touchStartX + threshold) {
-                // Swiped right - previous slide
-                prevSlide();
-            }
-        }
-
-        // Start auto-rotation
-        startAutoRotate();
-
-        // Pause on hover
-        bannerContainer.addEventListener('mouseenter', function() {
-            clearInterval(interval);
-        });
-
-        bannerContainer.addEventListener('mouseleave', function() {
-            resetInterval();
-        });
-
-        // Show messages with animation
-        document.querySelectorAll('.alert').forEach(alert => {
-            setTimeout(() => {
-                alert.classList.add('show');
-            }, 100);
-        });
-    });
-
-    // Modal functionality
-    document.addEventListener('DOMContentLoaded', function() {
-        const modal = document.getElementById('products-modal');
-        const modalTitle = document.getElementById('store-name');
-        const modalProducts = document.getElementById('modal-products');
-        const closeModal = document.querySelector('.close-modal');
-
-        document.querySelectorAll('.view-all-btn').forEach(button => {
-            button.addEventListener('click', function() {
-                const store = this.getAttribute('data-store');
-                modalTitle.textContent = store;
-                modalProducts.innerHTML = '<div class="loading-spinner"></div>';
-
-                // Show modal with fade in
-                modal.style.display = 'block';
-                setTimeout(() => {
-                    modal.classList.add('show');
-                }, 10);
-
-                fetch(`/get-store-products/?store=${encodeURIComponent(store)}`, {
-                    credentials: 'same-origin'
-                })
-                    .then(response => {
-                        if (!response.ok) {
-                            throw new Error('Network response was not ok');
-                        }
-                        return response.json();
+        // Modal functionality
+        document.addEventListener('DOMContentLoaded', function () {
+            const modal = document.getElementById('products-modal');
+            const modalTitle = document.getElementById('store-name');
+            const modalProducts = document.getElementById('modal-products');
+            const closeModal = document.querySelector('.close-modal');
+
+            document.querySelectorAll('.view-all-btn').forEach(button => {
+                button.addEventListener('click', function () {
+                    const store = this.getAttribute('data-store');
+                    modalTitle.textContent = store;
+                    modalProducts.innerHTML = '<div class="loading-spinner"></div>';
+
+                    // Show modal with fade in
+                    modal.style.display = 'block';
+                    setTimeout(() => {
+                        modal.classList.add('show');
+                    }, 10);
+
+                    fetch(`/get-store-products/?store=${encodeURIComponent(store)}`, {
+                        credentials: 'same-origin'
                     })
-                    .then(data => {
-                        if (data.products && data.products.length > 0) {
-                            modalProducts.innerHTML = '';
-                            data.products.forEach(product => {
-                                const discount = Math.round(((product.price - product.actual_price) / product.price) * 100);
-
-                                const productElement = document.createElement('div');
-                                productElement.className = 'modal-product';
-                                productElement.innerHTML = `
+                        .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) {
+                                modalProducts.innerHTML = '';
+                                data.products.forEach(product => {
+                                    const discount = Math.round(((product.price - product.actual_price) / product.price) * 100);
+
+                                    const productElement = document.createElement('div');
+                                    productElement.className = 'modal-product';
+                                    productElement.innerHTML = `
                                     <a href="/product/${product.id}/">
                                         <img src="${product.image_url}" alt="${product.name}" onerror="this.onerror=null;this.src='{% static 'images/no-image.png' %}'">
@@ -1164,51 +1170,51 @@
                                     </a>
                                 `;
-                                modalProducts.appendChild(productElement);
-                            });
-                        } else {
-                            modalProducts.innerHTML = '<div class="no-products"><i class="fas fa-box-open" style="font-size: 2rem; color: #ccc; margin-bottom: 15px;"></i><p>Нема достапни попусти за оваа продавница.</p></div>';
-                        }
-                    })
-                    .catch(error => {
-                        console.error('Error:', error);
-                        modalProducts.innerHTML = `
+                                    modalProducts.appendChild(productElement);
+                                });
+                            } else {
+                                modalProducts.innerHTML = '<div class="no-products"><i class="fas fa-box-open" style="font-size: 2rem; color: #ccc; margin-bottom: 15px;"></i><p>Нема достапни попусти за оваа продавница.</p></div>';
+                            }
+                        })
+                        .catch(error => {
+                            console.error('Error:', error);
+                            modalProducts.innerHTML = `
                             <div class="no-products">
                                 <i class="fas fa-exclamation-triangle" style="font-size: 2rem; color: #e74c3c; margin-bottom: 15px;"></i>
                                 <p>Грешка при вчитување на производите.</p>
-                                <a href="/login/" style="color: #2e652e; font-weight: bold;">Најави се</a> или обидете се повторно.
+                                <a href="{% url 'account_login' %}">Најави се</a>
                             </div>
                         `;
-                    });
-
-                document.body.style.overflow = 'hidden';
+                        });
+
+                    document.body.style.overflow = 'hidden';
+                });
             });
+
+            function closeModalHandler() {
+                modal.classList.remove('show');
+                setTimeout(() => {
+                    modal.style.display = 'none';
+                    document.body.style.overflow = 'auto';
+                }, 400);
+            }
+
+            closeModal.addEventListener('click', closeModalHandler);
+
+            window.addEventListener('click', function (event) {
+                if (event.target === modal) {
+                    closeModalHandler();
+                }
+            });
+
+            // Auto-close messages after 5 seconds
+            setTimeout(() => {
+                document.querySelectorAll('.alert').forEach(alert => {
+                    alert.style.opacity = '0';
+                    setTimeout(() => alert.remove(), 300);
+                });
+            }, 5000);
         });
-
-        function closeModalHandler() {
-            modal.classList.remove('show');
-            setTimeout(() => {
-                modal.style.display = 'none';
-                document.body.style.overflow = 'auto';
-            }, 400);
-        }
-
-        closeModal.addEventListener('click', closeModalHandler);
-
-        window.addEventListener('click', function(event) {
-            if (event.target === modal) {
-                closeModalHandler();
-            }
-        });
-
-        // Auto-close messages after 5 seconds
-        setTimeout(() => {
-            document.querySelectorAll('.alert').forEach(alert => {
-                alert.style.opacity = '0';
-                setTimeout(() => alert.remove(), 300);
-            });
-        }, 5000);
-    });
-</script>
-</body>
-</html>
+    </script>
+    </body>
+    </html>
 {% endblock %}
Index: main/templates/main/login.html
===================================================================
--- main/templates/main/login.html	(revision 09a55ba56c74813273c03182cd01e2f8d3314915)
+++ main/templates/main/login.html	(revision 35577210e2892b3cb3b24bb561e3f46989f9a05e)
@@ -1,3 +1,4 @@
 {% load static %}
+{% load socialaccount %}
 <!DOCTYPE html>
 <html lang="en">
@@ -177,4 +178,30 @@
             <button type="submit">Најави се</button>
         </form>
+        <!-- Social Login Buttons -->
+<div style="margin-top: 25px; text-align: center;">
+    <p>Или најави се преку:</p>
+    <a href="{% provider_login_url 'google' %}" style="
+        display: inline-block;
+        background-color: #DB4437;
+        color: white;
+        padding: 10px 20px;
+        margin: 5px 0;
+        border-radius: 8px;
+        text-decoration: none;
+        font-weight: 600;
+    ">Google</a>
+
+    <a href="{% provider_login_url 'facebook' %}" style="
+        display: inline-block;
+        background-color: #3b5998;
+        color: white;
+        padding: 10px 20px;
+        margin: 5px 0;
+        border-radius: 8px;
+        text-decoration: none;
+        font-weight: 600;
+    ">Facebook</a>
+</div>
+
 
         <div class="register-link">
Index: main/templates/main/nearby_stores.html
===================================================================
--- main/templates/main/nearby_stores.html	(revision 09a55ba56c74813273c03182cd01e2f8d3314915)
+++ main/templates/main/nearby_stores.html	(revision 35577210e2892b3cb3b24bb561e3f46989f9a05e)
@@ -3,418 +3,118 @@
 
 {% block content %}
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
-    <title>Најблиски продавници</title>
-    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
-          integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
-          crossorigin=""/>
-    <style>
-        :root {
-            --primary-color: #2e652e;
-            --primary-dark: #1f3f1f;
-            --light-bg: #f5f5f5;
-            --white: #ffffff;
-            --text-dark: #333333;
-            --text-light: #666666;
-            --border-color: #e0e0e0;
-        }
-
-        /* Base Styles */
-        body {
-            font-family: Arial, sans-serif;
-            margin: 0;
-            padding: 0;
-            background-color: var(--light-bg);
-            color: var(--text-dark);
-            line-height: 1.6;
-        }
-
-        /* Stores Page Container */
-        .stores-wrapper {
-            padding: 20px;
-            max-width: 1400px;
-            margin: 0 auto;
-        }
-
-        /* Main Container */
-        .stores-container {
-            background-color: var(--white);
-            border-radius: 12px;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
-            overflow: hidden;
-            margin-bottom: 30px;
-            animation: fadeIn 0.4s ease-out;
-        }
-
-        /* Header Section */
-        .stores-header {
-            background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
-                url('{% static "images/baner1.jpg" %}') center center / cover no-repeat;
-            color: white;
-            padding: 40px 20px;
-            text-align: center;
-        }
-
-        .stores-main-title {
-            font-size: 28px;
-            font-weight: 700;
-            margin: 0;
-            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
-        }
-
-        /* Navigation */
-        .back-button {
-            margin: 20px;
-        }
-
-        .back-button a {
-            display: inline-flex;
-            align-items: center;
-            gap: 8px;
-            padding: 10px 20px;
-            background-color: var(--white);
-            color: var(--primary-color);
-            border-radius: 30px;
-            text-decoration: none;
-            font-weight: 600;
-            transition: all 0.3s ease;
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-            border: 1px solid rgba(46, 101, 46, 0.2);
-        }
-
-        .back-button a:hover {
-            background-color: #f0f7f0;
-            transform: translateY(-2px);
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-        }
-
-        /* Form Styles */
-        .store-search-form {
-            padding: 0 20px 20px;
-        }
-
-        .form-row {
-            display: flex;
-            gap: 20px;
-            margin-bottom: 20px;
-        }
-
-        .form-group {
-            flex: 1;
-            min-width: 0;
-        }
-
-        .form-group label {
-            display: block;
-            margin-bottom: 8px;
-            font-weight: 500;
-            color: var(--primary-color);
-            font-size: 14px;
-        }
-
-        .form-input {
-            width: 100%;
-            padding: 12px 15px;
-            border: 1px solid var(--border-color);
-            border-radius: 8px;
-            font-size: 15px;
-            background-color: var(--white);
-            transition: all 0.2s ease;
-        }
-
-        .form-input:focus {
-            border-color: var(--primary-color);
-            outline: none;
-            box-shadow: 0 0 0 3px rgba(46, 101, 46, 0.1);
-        }
-
-        .form-actions {
-            text-align: center;
-            margin-top: 30px;
-            display: flex;
-            gap: 15px;
-            justify-content: center;
-        }
-
-        .action-button {
-            display: inline-flex;
-            align-items: center;
-            gap: 8px;
-            padding: 14px 30px;
-            border-radius: 30px;
-            font-weight: 600;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            font-size: 16px;
-            border: 2px solid transparent;
-        }
-
-        .primary-button {
-            background-color: var(--primary-color);
-            color: var(--white);
-            border-color: var(--primary-color);
-        }
-
-        .primary-button:hover {
-            background-color: var(--primary-dark);
-            transform: translateY(-2px);
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-        }
-
-        .secondary-button {
-            background-color: #e8f5e9;
-            color: var(--primary-color);
-            border-color: #c8e6c9;
-        }
-
-        .secondary-button:hover {
-            background-color: #d0f0d0;
-            transform: translateY(-2px);
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-        }
-
-        /* Stores Grid */
-        .stores-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-            gap: 20px;
-            margin: 30px 20px;
-        }
-
-        .store-card {
-            background-color: var(--white);
-            border-radius: 8px;
-            padding: 20px;
-            box-shadow: 0 2px 8px 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 12px rgba(0, 0, 0, 0.15);
-        }
-
-        .store-title {
-            color: var(--primary-color);
-            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: var(--text-light);
-        }
-
-        .meta-item i {
-            color: var(--primary-color);
-            width: 20px;
-            text-align: center;
-        }
-
-        /* Map Styles */
-        #map-container {
-            height: 500px;
-            margin: 20px;
-            border-radius: 8px;
-            overflow: hidden;
-            border: 1px solid var(--border-color);
-        }
-
-        #map {
-            height: 100%;
-            width: 100%;
-        }
-
-        /* Empty State */
-        .no-stores {
-            text-align: center;
-            padding: 40px;
-            margin: 20px;
-            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;
-        }
-
-        /* Section Titles */
-        .section-title {
-            color: var(--primary-color);
-            font-size: 20px;
-            font-weight: 600;
-            margin: 30px 20px 15px;
-            padding-bottom: 10px;
-            border-bottom: 1px solid var(--border-color);
-        }
-
-        /* Responsive Adjustments */
-        @media (max-width: 768px) {
-            .form-row {
-                flex-direction: column;
-                gap: 15px;
-            }
-
-            .form-actions {
-                flex-direction: column;
-                gap: 10px;
-            }
-
-            .action-button {
-                width: 100%;
-                justify-content: center;
-            }
-
-            #map-container {
-                height: 300px;
-            }
-
-            .stores-grid {
-                grid-template-columns: 1fr;
-            }
-        }
-
-        @media (max-width: 480px) {
-            .stores-wrapper {
-                padding: 10px;
-            }
-
-            .stores-header {
-                padding: 30px 15px;
-            }
-
-            .stores-main-title {
-                font-size: 24px;
-            }
-
-            .back-button {
-                margin: 15px;
-            }
-
-            .store-search-form {
-                padding: 0 15px 15px;
-            }
-        }
-
-        @keyframes fadeIn {
-            from { opacity: 0; transform: translateY(10px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
-    </style>
-</head>
-<body>
-
 <div class="stores-wrapper">
     <div class="stores-container">
         <!-- Header Section -->
         <div class="stores-header">
-            <h1 class="stores-main-title">Најблиски продавници</h1>
+            <div class="header-content">
+                <h1 class="stores-main-title">Најблиски продавници</h1>
+                <p class="stores-subtitle">Пронајди ги најблиските продавници и заштеди гориво</p>
+            </div>
+            <div class="back-button">
+                <a href="{% url 'home' %}" class="back-link">
+                    <i class="fas fa-arrow-left"></i> Назад кон почетна
+                </a>
+            </div>
         </div>
 
-        <div class="back-button">
-            <a href="{% url 'home' %}">
-                <i class="fas fa-arrow-left"></i> Назад кон почетна
-            </a>
+        <!-- Search Form -->
+        <div class="search-card">
+            <form method="get" action="{% url 'nearby_stores' %}" class="store-search-form" id="searchForm">
+                <div class="form-row">
+                    <div class="form-group">
+                        <label for="latitude"><i class="fas fa-map-marker-alt"></i> Latitude:</label>
+                        <input type="text" id="latitude" name="latitude" required class="form-input"
+                               value="{{ request.GET.latitude|default:'' }}" placeholder="41.9981">
+                    </div>
+                    <div class="form-group">
+                        <label for="longitude"><i class="fas fa-map-marker-alt"></i> Longitude:</label>
+                        <input type="text" id="longitude" name="longitude" required class="form-input"
+                               value="{{ request.GET.longitude|default:'' }}" placeholder="21.4254">
+                    </div>
+                </div>
+
+                <div class="form-row">
+                    <div class="form-group">
+                        <label for="fuel_consumption"><i class="fas fa-gas-pump"></i> Потрошувачка на гориво (L/100km):</label>
+                        <input type="number" step="0.1" id="fuel_consumption" name="fuel_consumption" required
+                               class="form-input" value="{{ request.GET.fuel_consumption|default:'' }}" placeholder="6.5">
+                    </div>
+                    <div class="form-group">
+                        <label for="store_chain"><i class="fas fa-store"></i> Продавничка мрежа:</label>
+                        <select name="store_chain" id="store_chain" required class="form-input">
+                            <option value="Reptil" {% if request.GET.store_chain == "Reptil" %}selected{% endif %}>Reptil</option>
+                            <option value="Vero" {% if request.GET.store_chain == "Vero" %}selected{% endif %}>Vero</option>
+                            <option value="Ramstore" {% if request.GET.store_chain == "Ramstore" %}selected{% endif %}>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" id="submitButton">
+                        <i class="fas fa-search"></i> Пронајди продавници
+                    </button>
+                </div>
+            </form>
         </div>
 
-        <!-- Search Form -->
-        <form method="get" action="{% url 'nearby_stores' %}" class="store-search-form">
-            <div class="form-row">
-                <div class="form-group">
-                    <label for="latitude"><i class="fas fa-map-marker-alt"></i> Latitude:</label>
-                    <input type="text" id="latitude" name="latitude" required class="form-input">
-                </div>
-                <div class="form-group">
-                    <label for="longitude"><i class="fas fa-map-marker-alt"></i> Longitude:</label>
-                    <input type="text" id="longitude" name="longitude" required class="form-input">
+        {% if calculating %}
+            <div class="loading-container">
+                <div class="loading-spinner">
+                    <div class="spinner"></div>
+                </div>
+                <div class="loading-text">
+                    <h3>Пресметуваме растојанија и времиња на патување...</h3>
+                    <p>Ова може да потрае неколку секунди.</p>
                 </div>
             </div>
-
-            <div class="form-row">
-                <div class="form-group">
-                    <label for="fuel_consumption"><i class="fas fa-gas-pump"></i> Потрошувачка на гориво (L/100km):</label>
-                    <input type="number" step="0.1" id="fuel_consumption" name="fuel_consumption" required
-                           class="form-input">
-                </div>
-                <div class="form-group">
-                    <label for="store_chain"><i class="fas fa-store"></i> Продавничка мрежа:</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>
+        {% elif nearest_stores %}
+            <div class="results-section">
+                <h2 class="section-title"><i class="fas fa-store"></i> Најблиски продавници</h2>
+                <div class="stores-grid">
+                    {% for store in nearest_stores|slice:":5" %}
+                        <div class="store-card">
+                            <div class="store-card-header">
+                                <h3 class="store-title">{{ store.store }}</h3>
+                                <span class="store-distance">{{ store.distance_km|floatformat:2 }} km</span>
+                            </div>
+                            <div class="store-meta">
+                                <div class="meta-item">
+                                    <i class="fas fa-clock"></i>
+                                    <span>{{ store.duration }}</span>
+                                </div>
+                                <div class="meta-item">
+                                    <i class="fas fa-gas-pump"></i>
+                                    <span>{{ store.gas_used|floatformat:2 }} L</span>
+                                </div>
+                            </div>
+                            <div class="store-card-footer">
+                                <span class="store-chain-badge">{{ request.GET.store_chain }}</span>
+                            </div>
+                        </div>
+                    {% endfor %}
                 </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>
+            <!-- Map Container -->
+            <div class="map-section">
+                <h2 class="section-title"><i class="fas fa-map-marked-alt"></i> Мапа на локации</h2>
+                <div id="map-container">
+                    <div id="map"></div>
+                </div>
+                <div class="map-controls">
+                    <button onclick="centerMapOnUser()" class="action-button secondary-button">
+                        <i class="fas fa-location-arrow"></i> Центрирај на мојата локација
+                    </button>
+                </div>
             </div>
-        </form>
-
-        {% if nearest_stores %}
-            <h2 class="section-title"><i class="fas fa-store"></i> Најблиски продавници</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>
-
-            <!-- Map Container -->
-            <div id="map-container">
-                <div id="map"></div>
-            </div>
-
-{#            <!-- Center Map Button -->#}
-{#            <div class="form-actions" style="margin-top: 15px;">#}
-{#                <button onclick="centerMapOnUser()" class="action-button secondary-button">#}
-{#                    <i class="fas fa-location-arrow"></i> Центрирај на мојата локација#}
-{#                </button>#}
-{#            </div>#}
         {% else %}
             <div class="no-stores">
-                <i class="fas fa-exclamation-circle"></i>
-                <p>Нема пронајдени продавници.</p>
+                <div class="no-stores-icon">
+                    <i class="fas fa-exclamation-circle"></i>
+                </div>
+                <h3>Нема пронајдени продавници</h3>
                 <p>Внесете ги вашите координати за да ги видите најблиските продавници.</p>
             </div>
@@ -422,16 +122,29 @@
 
         {% if least_gas_stores %}
-            <h2 class="section-title"><i class="fas fa-gas-pump"></i> Продавници со најмало користење на гориво</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 class="results-section">
+                <h2 class="section-title"><i class="fas fa-gas-pump"></i> Продавници со најмало користење на гориво</h2>
+                <div class="stores-grid">
+                    {% for store in least_gas_stores|slice:":5" %}
+                        <div class="store-card">
+                            <div class="store-card-header">
+                                <h3 class="store-title">{{ store.store }}</h3>
+                                <span class="store-distance">{{ store.distance_km|floatformat:2 }} km</span>
+                            </div>
+                            <div class="store-meta">
+                                <div class="meta-item">
+                                    <i class="fas fa-clock"></i>
+                                    <span>{{ store.duration }}</span>
+                                </div>
+                                <div class="meta-item">
+                                    <i class="fas fa-gas-pump"></i>
+                                    <span>{{ store.gas_used|floatformat:2 }} L</span>
+                                </div>
+                            </div>
+                            <div class="store-card-footer">
+                                <span class="store-chain-badge">{{ request.GET.store_chain }}</span>
+                            </div>
                         </div>
-                    </div>
-                {% endfor %}
+                    {% endfor %}
+                </div>
             </div>
         {% endif %}
@@ -439,7 +152,6 @@
 </div>
 
-<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
-        integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
-        crossorigin=""></script>
+<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>
+<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
 
 <script>
@@ -449,20 +161,32 @@
                 document.getElementById("latitude").value = position.coords.latitude.toFixed(6);
                 document.getElementById("longitude").value = position.coords.longitude.toFixed(6);
-
-                if (typeof map !== 'undefined') {
-                    updateMap(position.coords.latitude, position.coords.longitude);
+                if (typeof map !== 'undefined') updateMap(position.coords.latitude, position.coords.longitude);
+
+                // Show success notification
+                showNotification('Локацијата е успешно поставена!', 'success');
+            }, function (error) {
+                let errorMsg;
+                switch(error.code) {
+                    case error.PERMISSION_DENIED:
+                        errorMsg = "Корисникот одби пристап до локацијата.";
+                        break;
+                    case error.POSITION_UNAVAILABLE:
+                        errorMsg = "Информациите за локацијата не се достапни.";
+                        break;
+                    case error.TIMEOUT:
+                        errorMsg = "Истекло времето за барање на локацијата.";
+                        break;
+                    default:
+                        errorMsg = "Непозната грешка.";
+                        break;
                 }
-            }, function (error) {
-                {#alert("Грешка при геолокација: " + error.message);#}
-            });
+                showNotification('Грешка при геолокација: ' + errorMsg, 'error');
+            }, { timeout: 10000 });
         } else {
-            alert("Геолокацијата не е поддржана од овој пребарувач.");
-        }
-    }
-
-    let map;
-    let userMarker;
-    let storeMarkers = [];
-    let routeLines = [];
+            showNotification("Геолокацијата не е поддржана од овој пребарувач.", 'error');
+        }
+    }
+
+    let map, userMarker, storeMarkers = [];
 
     document.addEventListener('DOMContentLoaded', function () {
@@ -470,96 +194,62 @@
             initMap();
         {% endif %}
+        document.getElementById('searchForm').addEventListener('submit', function() {
+            document.getElementById('submitButton').innerHTML = '<i class="fas fa-spinner fa-spin"></i> Пресметувам...';
+            document.getElementById('submitButton').disabled = true;
+        });
     });
 
     function initMap() {
-        try {
-            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" }});
-
-            map = L.map('map', {
-                center: [userLat, userLng],
-                zoom: 13
-            });
-
-            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);
-
-            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();
-
-            storeMarkers.forEach(marker => map.removeLayer(marker));
-            routeLines.forEach(line => map.removeLayer(line));
-            storeMarkers = [];
-            routeLines = [];
-
-            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 }}
-                    },
-                {% 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);
-
-                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("Грешка при иницијализација на мапата. Проверете ги координатите или податоците.");
-        }
+        const userLat = parseFloat(document.getElementById('latitude').value) || 41.9981;
+        const userLng = parseFloat(document.getElementById('longitude').value) || 21.4254;
+
+        map = L.map('map').setView([userLat, userLng], 13);
+        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            attribution: '&copy; OpenStreetMap contributors'
+        }).addTo(map);
+
+        // Custom icon for user location
+        const userIcon = L.divIcon({
+            className: 'user-marker',
+            html: '<div class="pulse-dot"></div><i class="fas fa-user"></i>',
+            iconSize: [30, 30],
+            iconAnchor: [15, 15]
+        });
+
+        userMarker = L.marker([userLat, userLng], {icon: userIcon}).addTo(map).bindPopup("<b>Вашата локација</b>").openPopup();
+
+        storeMarkers.forEach(m => map.removeLayer(m));
+        storeMarkers = [];
+
+        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 }}
+                },
+            {% endfor %}
+        ];
+
+        // Custom icon for stores
+        const storeIcon = L.divIcon({
+            className: 'store-marker',
+            html: '<i class="fas fa-store"></i>',
+            iconSize: [25, 25],
+            iconAnchor: [12, 12]
+        });
+
+        stores.forEach(store => {
+            const marker = L.marker([store.latitude, store.longitude], {icon: storeIcon}).addTo(map);
+            marker.bindPopup(`<b>${store.name}</b><br>Растојание: ${store.distance.toFixed(2)} km<br>Време: ${store.duration}<br>Гориво: ${store.gasUsed.toFixed(2)} L`);
+            storeMarkers.push(marker);
+        });
     }
 
     function updateMap(lat, lng) {
-        if (!map) return;
-
-        userMarker.setLatLng([lat, lng]);
-        userMarker.bindPopup("<b>Вашата локација</b>").openPopup();
-
-        routeLines.forEach((line, index) => {
-            const storeMarker = storeMarkers[index];
-            if (storeMarker) {
-                const storeLatLng = storeMarker.getLatLng();
-                line.setLatLngs([[lat, lng], [storeLatLng.lat, storeLatLng.lng]]);
-            }
-        });
-
+        userMarker.setLatLng([lat, lng]).bindPopup("<b>Вашата локација</b>").openPopup();
         map.setView([lat, lng], 13);
     }
@@ -567,31 +257,518 @@
     function centerMapOnUser() {
         if (navigator.geolocation) {
-            navigator.geolocation.getCurrentPosition(function (position) {
-                const userLat = position.coords.latitude;
-                const userLng = position.coords.longitude;
-
-                document.getElementById('latitude').value = userLat.toFixed(6);
-                document.getElementById('longitude').value = userLng.toFixed(6);
-
-                if (map) {
-                    updateMap(userLat, userLng);
-                } else {
-                    initMap();
-                }
-            }, function (error) {
-                alert("Грешка при геолокација: " + error.message);
+            navigator.geolocation.getCurrentPosition(function(position){
+                updateMap(position.coords.latitude, position.coords.longitude);
+                document.getElementById('latitude').value = position.coords.latitude.toFixed(6);
+                document.getElementById('longitude').value = position.coords.longitude.toFixed(6);
+                showNotification('Мапата е центрирана на вашата локација', 'success');
             });
-        } else {
-            alert("Геолокацијата не е поддржана од овој пребарувач.");
-        }
-    }
-
-    document.querySelector('.store-search-form').addEventListener('submit', function () {
-        if (map) {
-            setTimeout(initMap, 100);
-        }
-    });
+        }
+    }
+
+    function showNotification(message, type) {
+        // Remove any existing notifications
+        const existingNotifications = document.querySelectorAll('.notification');
+        existingNotifications.forEach(notif => notif.remove());
+
+        const notification = document.createElement('div');
+        notification.className = `notification ${type}`;
+        notification.innerHTML = `
+            <i class="fas fa-${type === 'success' ? 'check-circle' : 'exclamation-circle'}"></i>
+            <span>${message}</span>
+            <button onclick="this.parentElement.remove()"><i class="fas fa-times"></i></button>
+        `;
+
+        document.body.appendChild(notification);
+
+        // Auto remove after 5 seconds
+        setTimeout(() => {
+            if (notification.parentElement) {
+                notification.remove();
+            }
+        }, 5000);
+    }
 </script>
-</body>
+
+<style>
+    :root {
+        --primary: #2e652e;
+        --primary-dark: #1f3f1f;
+        --primary-light: #81c784;
+        --accent: #4caf50;
+        --text: #333;
+        --text-light: #666;
+        --background: #f9f9f9;
+        --card-bg: #ffffff;
+        --border: #e0e0e0;
+        --shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+        --shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.12);
+        --success: #4caf50;
+        --error: #f44336;
+    }
+
+    * {
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0;
+    }
+
+    body {
+    font-family: Arial, sans-serif;
+        background: var(--background);
+        color: var(--text);
+        line-height: 1.6;
+    }
+
+    .stores-wrapper {
+        max-width: 1400px;
+        margin: 0 auto;
+        padding: 20px;
+    }
+
+    .stores-container {
+        background: var(--card-bg);
+        border-radius: 16px;
+        overflow: hidden;
+        box-shadow: var(--shadow);
+    }
+
+    .stores-header {
+        background: linear-gradient(135deg, rgba(46,101,46,0.9) 0%, rgba(76,175,80,0.8) 100%), url('{% static "images/baner1.jpg" %}') center/cover no-repeat;
+        color: white;
+        padding: 30px;
+        position: relative;
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+    }
+
+    .header-content {
+        max-width: 70%;
+    }
+
+    .stores-main-title {
+        font-size: 2.5rem;
+        font-weight: 700;
+        margin-bottom: 10px;
+        text-shadow: 0 2px 4px rgba(0,0,0,0.2);
+    }
+
+    .stores-subtitle {
+        font-size: 1.1rem;
+        opacity: 0.9;
+        font-weight: 300;
+    }
+
+    .back-button {
+        position: absolute;
+        top: 20px;
+        right: 20px;
+    }
+
+    .back-link {
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+        background: rgba(255, 255, 255, 0.2);
+        backdrop-filter: blur(10px);
+        color: white;
+        padding: 10px 20px;
+        border-radius: 30px;
+        text-decoration: none;
+        transition: all 0.3s ease;
+        border: 1px solid rgba(255, 255, 255, 0.3);
+    }
+
+    .back-link:hover {
+        background: rgba(255, 255, 255, 0.3);
+        transform: translateY(-2px);
+    }
+
+    .search-card {
+        padding: 30px;
+        border-bottom: 1px solid var(--border);
+    }
+
+    .form-row {
+        display: flex;
+        gap: 20px;
+        margin-bottom: 20px;
+        flex-wrap: wrap;
+    }
+
+    .form-group {
+        flex: 1;
+        min-width: 250px;
+    }
+
+    .form-group label {
+        display: block;
+        margin-bottom: 8px;
+        color: var(--primary);
+        font-weight: 600;
+        font-size: 0.9rem;
+    }
+
+    .form-input, select {
+        width: 100%;
+        padding: 14px 16px;
+        border-radius: 10px;
+        border: 1px solid var(--border);
+        font-size: 1rem;
+        transition: all 0.3s ease;
+        background: var(--card-bg);
+    }
+
+    .form-input:focus, select:focus {
+        outline: none;
+        border-color: var(--primary);
+        box-shadow: 0 0 0 3px rgba(46, 101, 46, 0.1);
+    }
+
+    .form-actions {
+        display: flex;
+        gap: 15px;
+        margin-top: 20px;
+        flex-wrap: wrap;
+    }
+
+    .action-button {
+        padding: 14px 28px;
+        border-radius: 10px;
+        font-weight: 600;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        display: inline-flex;
+        align-items: center;
+        gap: 10px;
+        border: none;
+        font-size: 1rem;
+    }
+
+    .primary-button {
+        background: var(--primary);
+        color: white;
+    }
+
+    .primary-button:hover {
+        background: var(--primary-dark);
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(46, 101, 46, 0.2);
+    }
+
+    .secondary-button {
+        background: #e8f5e9;
+        color: var(--primary);
+    }
+
+    .secondary-button:hover {
+        background: #d0f0d0;
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(46, 101, 46, 0.1);
+    }
+
+    .loading-container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: 60px 30px;
+        text-align: center;
+    }
+
+    .loading-spinner {
+        margin-bottom: 20px;
+    }
+
+    .spinner {
+        width: 60px;
+        height: 60px;
+        border: 4px solid rgba(46, 101, 46, 0.1);
+        border-radius: 50%;
+        border-top: 4px solid var(--primary);
+        animation: spin 1s linear infinite;
+    }
+
+    @keyframes spin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+    }
+
+    .loading-text h3 {
+        color: var(--primary);
+        margin-bottom: 10px;
+    }
+
+    .loading-text p {
+        color: var(--text-light);
+    }
+
+    .results-section {
+        padding: 30px;
+        border-bottom: 1px solid var(--border);
+    }
+
+    .section-title {
+        font-size: 1.5rem;
+        margin-bottom: 25px;
+        color: var(--primary);
+        display: flex;
+        align-items: center;
+        gap: 10px;
+    }
+
+    .stores-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+        gap: 20px;
+    }
+
+    .store-card {
+        background: var(--card-bg);
+        border-radius: 12px;
+        padding: 20px;
+        box-shadow: var(--shadow);
+        transition: all 0.3s ease;
+        border-left: 4px solid var(--primary-light);
+        display: flex;
+        flex-direction: column;
+    }
+
+    .store-card:hover {
+        transform: translateY(-5px);
+        box-shadow: var(--shadow-hover);
+    }
+
+    .store-card-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+        margin-bottom: 15px;
+    }
+
+    .store-title {
+        color: var(--primary);
+        font-size: 1.2rem;
+        font-weight: 600;
+    }
+
+    .store-distance {
+        background: var(--primary-light);
+        color: var(--primary-dark);
+        padding: 4px 10px;
+        width: 100px;
+        border-radius: 20px;
+        font-size: 0.9rem;
+        font-weight: 600;
+    }
+
+    .store-meta {
+        margin-bottom: 15px;
+    }
+
+    .meta-item {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        margin-bottom: 8px;
+        color: var(--text-light);
+    }
+
+    .store-card-footer {
+        margin-top: auto;
+    }
+
+    .store-chain-badge {
+        background: #e8f5e9;
+        color: var(--primary);
+        padding: 4px 12px;
+        border-radius: 20px;
+        font-size: 0.8rem;
+        font-weight: 600;
+    }
+
+    .map-section {
+        padding: 30px;
+    }
+
+    #map-container {
+        height: 500px;
+        border-radius: 12px;
+        overflow: hidden;
+        margin-bottom: 20px;
+        box-shadow: var(--shadow);
+    }
+
+    #map {
+        width: 100%;
+        height: 100%;
+    }
+
+    .map-controls {
+        display: flex;
+        justify-content: center;
+    }
+
+    .no-stores {
+        padding: 60px 30px;
+        text-align: center;
+    }
+
+    .no-stores-icon {
+        font-size: 3rem;
+        color: #bdbdbd;
+        margin-bottom: 20px;
+    }
+
+    .no-stores h3 {
+        color: var(--text-light);
+        margin-bottom: 10px;
+    }
+
+    .no-stores p {
+        color: var(--text-light);
+    }
+
+    /* Custom map markers */
+    .user-marker {
+        position: relative;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: white;
+        font-size: 14px;
+        background: var(--primary);
+        border-radius: 50%;
+        width: 30px;
+        height: 30px;
+        box-shadow: 0 0 0 4px rgba(46, 101, 46, 0.3);
+    }
+
+    .pulse-dot {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+        background: var(--primary);
+        animation: pulse 2s infinite;
+        z-index: -1;
+    }
+
+    @keyframes pulse {
+        0% {
+            transform: scale(1);
+            opacity: 0.8;
+        }
+        70% {
+            transform: scale(2.5);
+            opacity: 0;
+        }
+        100% {
+            transform: scale(1);
+            opacity: 0;
+        }
+    }
+
+    .store-marker {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: white;
+        font-size: 14px;
+        background: var(--accent);
+        border-radius: 50%;
+        width: 25px;
+        height: 25px;
+        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+    }
+
+    /* Notification system */
+    .notification {
+        position: fixed;
+        top: 20px;
+        right: 20px;
+        padding: 15px 20px;
+        border-radius: 10px;
+        color: white;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        box-shadow: var(--shadow);
+        z-index: 1000;
+        animation: slideIn 0.3s ease;
+        max-width: 350px;
+    }
+
+    .notification.success {
+        background: var(--success);
+    }
+
+    .notification.error {
+        background: var(--error);
+    }
+
+    .notification button {
+        background: none;
+        border: none;
+        color: white;
+        cursor: pointer;
+        margin-left: 10px;
+    }
+
+    @keyframes slideIn {
+        from {
+            transform: translateX(100%);
+            opacity: 0;
+        }
+        to {
+            transform: translateX(0);
+            opacity: 1;
+        }
+    }
+
+    /* Responsive design */
+    @media (max-width: 768px) {
+        .stores-header {
+            flex-direction: column;
+            gap: 20px;
+        }
+
+        .header-content {
+            max-width: 100%;
+        }
+
+        .back-button {
+            position: relative;
+            top: 0;
+            right: 0;
+            align-self: flex-end;
+        }
+
+        .stores-main-title {
+            font-size: 2rem;
+        }
+
+        .form-row {
+            flex-direction: column;
+            gap: 15px;
+        }
+
+        .form-group {
+            min-width: 100%;
+        }
+
+        .form-actions {
+            flex-direction: column;
+        }
+
+        .action-button {
+            width: 100%;
+            justify-content: center;
+        }
+
+        #map-container {
+            height: 300px;
+        }
+    }
+</style>
 {% endblock %}
-</html>
Index: main/templates/main/product_list.html
===================================================================
--- main/templates/main/product_list.html	(revision 09a55ba56c74813273c03182cd01e2f8d3314915)
+++ main/templates/main/product_list.html	(revision 35577210e2892b3cb3b24bb561e3f46989f9a05e)
@@ -27,4 +27,8 @@
                 padding: 0 20px;
                 margin-top: 20px;
+            }
+
+            .header-search input {
+                width: 97%;
             }
 
@@ -585,4 +589,7 @@
                 .product-image {
                     height: 160px;
+                }
+                .pagination{
+                    margin-bottom: 50px;
                 }
             }
@@ -1764,5 +1771,5 @@
                            for="sort">Сортирај по:</label>
                     <select id="sort" onchange="updateSort()">
-                        <option value="-" >    -- Избери --
+                        <option value="-"> -- Избери --
                         </option>
                         <option value="price_asc" {% if selected_sort == 'price_asc' %}selected{% endif %}>Цена
@@ -1796,10 +1803,18 @@
                         <a href="{% url 'product_detail' product.id %}">
                             <div class="product-image">
-                                {% if product.image_url %}
+{#                                {% if product.store == 'Vero' %}#}
+{#                                    <img src="{% static 'images/no-image.png' %}" alt="no-image">#}
+{#                                {% else %}#}
+{#                                    <img src="{{ product.image_url }}" alt="{{ product.name }}"#}
+{#                                         style="max-width: 100%; max-height: 100%;">#}
+{#                                {% endif %}#}
+                                {% if product.image_url and product.store != 'Vero' %}
                                     <img src="{{ product.image_url }}" alt="{{ product.name }}"
                                          style="max-width: 100%; max-height: 100%;">
                                 {% else %}
-                                    [No Image]
+                                    <img src="{% static 'images/no-image.png' %}" alt="no-image">
                                 {% endif %}
+
+
                             </div>
                             <div class="product-info">
@@ -2097,6 +2112,10 @@
 
 
+
+
                             {% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}">&laquo;</a>
                     <a href="?page=
+
+
 
 
@@ -2366,6 +2385,10 @@
 
 
+
+
                             {{ page_obj.next_page_number }}{% for key, value in request.GET.items %}{% if key != 'page' %}&{{ key }}={{ value }}{% endif %}{% endfor %}">&rsaquo;</a>
                     <a href="?page=
+
+
 
 
@@ -2908,4 +2931,10 @@
             addToListButtons.forEach(button => {
                 button.addEventListener('click', async () => {
+                    // Pulse animation
+                    button.classList.remove('pulse-on-click');
+                    void button.offsetWidth; // force reflow
+                    button.classList.add('pulse-on-click');
+
+                    // Add to list logic
                     const productId = button.dataset.productId;
                     const selectedListId = document.getElementById('listSelector').value;
@@ -2931,5 +2960,6 @@
                         const result = await response.json();
                         if (result.success) {
-                            {#alert("Производот е додаден во листата!");#}
+                            // Optionally show a message here
+                            // alert("Производот е додаден во листата!");
                         } else {
                             alert("Грешка: " + result.message);
@@ -2958,11 +2988,5 @@
             }
         });
-        document.querySelectorAll('.add-to-list-btn').forEach(button => {
-            button.addEventListener('click', function () {
-                button.classList.remove('pulse-on-click'); // reset animation if applied
-                void button.offsetWidth; // force reflow so animation can be reapplied
-                button.classList.add('pulse-on-click');
-            });
-        });
+
 
         document.addEventListener('DOMContentLoaded', function () {
Index: main/templates/main/register.html
===================================================================
--- main/templates/main/register.html	(revision 09a55ba56c74813273c03182cd01e2f8d3314915)
+++ main/templates/main/register.html	(revision 35577210e2892b3cb3b24bb561e3f46989f9a05e)
@@ -1,71 +1,88 @@
 {% load static %}
+{% load socialaccount %}
 <!DOCTYPE html>
 <html lang="mk">
 <head>
-<meta charset="UTF-8" />
-<meta name="viewport" content="width=device-width, initial-scale=1" />
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Регистрација</title>
 <style>
-    /* Global Reset */
+    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
+
     * {
+        box-sizing: border-box;
         margin: 0;
         padding: 0;
-        box-sizing: border-box;
     }
 
     body {
-        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-        height: 100vh;
+        font-family: 'Poppins', Arial, sans-serif;
+        min-height: 100vh;
         display: flex;
         justify-content: center;
         align-items: center;
-        background: url('{% static "images/baner1.jpg" %}') no-repeat center center/cover;
+        background: url('{% static "images/baner1.jpg" %}') center/cover no-repeat fixed;
         position: relative;
-    }
-
-    /* Dark transparent overlay for contrast */
+        color: #333;
+        padding: 15px;
+    }
+
     body::before {
         content: '';
         position: absolute;
         inset: 0;
-        background: rgba(0,0,0,0.5);
+        background: inherit;
+        filter: blur(8px) brightness(0.7);
         z-index: -1;
     }
 
     .auth-container {
-        width: 100%;
-        max-width: 420px;
-        background: rgba(255, 255, 255, 0.95);
-        padding: 35px 30px;
-        border-radius: 16px;
-        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
-        animation: fadeIn 0.6s ease-in-out;
+        position: relative;
+        width: 100%;
+        max-width: 700px;
+        background-color: rgba(255, 255, 255, 0.97);
+        padding: 25px;
+        border-radius: 12px;
+        box-shadow: 0 8px 25px rgba(0,0,0,0.2);
+        text-align: center;
     }
 
     .auth-container h2 {
-        text-align: center;
-        margin-bottom: 25px;
-        font-size: 28px;
-        color: #222;
+        font-weight: 600;
+        font-size: 1.6rem;
+        margin-bottom: 20px;
+        color: #2e652e;
+    }
+
+    .two-column-form {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 15px;
+    }
+
+    .form-column {
+        flex: 1;
+        min-width: 280px;
     }
 
     .form-group {
-        margin-bottom: 18px;
+        margin-bottom: 12px;
+        text-align: left;
     }
 
     .form-group label {
         display: block;
-        margin-bottom: 6px;
-        font-weight: 600;
-        color: #444;
-        font-size: 15px;
+        margin-bottom: 5px;
+        font-weight: 500;
+        color: #2e652e;
+        font-size: 0.9rem;
     }
 
     .form-group input {
         width: 100%;
-        padding: 12px 14px;
-        border: 1px solid #ccc;
-        border-radius: 8px;
-        font-size: 15px;
+        padding: 10px 12px;
+        border: 1.5px solid #ddd;
+        border-radius: 6px;
+        font-size: 0.9rem;
         transition: all 0.3s ease;
     }
@@ -73,67 +90,142 @@
     .form-group input:focus {
         border-color: #28a745;
-        box-shadow: 0 0 0 3px rgba(40,167,69,0.2);
+        box-shadow: 0 0 5px rgba(40, 167, 69, 0.3);
         outline: none;
     }
 
+    .full-width {
+        width: 100%;
+        flex-basis: 100%;
+    }
+
     button[type="submit"] {
         width: 100%;
-        padding: 13px;
-        background: linear-gradient(135deg, #28a745, #218838);
+        padding: 12px;
+        background-color: #2e652e;
         color: white;
+        font-weight: 600;
+        font-size: 0.95rem;
         border: none;
-        border-radius: 8px;
-        font-size: 16px;
-        font-weight: 600;
+        border-radius: 6px;
         cursor: pointer;
-        transition: transform 0.2s ease, opacity 0.2s ease;
+        transition: background-color 0.3s ease;
+        margin-top: 8px;
     }
 
     button[type="submit"]:hover {
-        transform: translateY(-2px);
-        opacity: 0.9;
+        background-color: #1f3f1f;
+    }
+
+    .divider {
+        display: flex;
+        align-items: center;
+        margin: 15px 0;
+        color: #777;
+        font-size: 0.85rem;
+    }
+
+    .divider::before,
+    .divider::after {
+        content: "";
+        flex: 1;
+        height: 1px;
+        background-color: #ddd;
+    }
+
+    .divider::before {
+        margin-right: 8px;
+    }
+
+    .divider::after {
+        margin-left: 8px;
     }
 
     .login-link {
-        text-align: center;
-        margin-top: 18px;
-        font-size: 14px;
+        margin-top: 15px;
+        font-size: 0.9rem;
+        color: #555;
     }
 
     .login-link a {
-        color: #007bff;
+        color: #2e652e;
         font-weight: 600;
         text-decoration: none;
-        transition: color 0.3s ease;
     }
 
     .login-link a:hover {
-        color: #0056b3;
+        color: #1f3f1f;
         text-decoration: underline;
     }
 
     .errorlist {
-        color: #dc3545;
-        margin-bottom: 15px;
-        padding-left: 20px;
-        font-size: 14px;
+        background: #ffe6e6;
+        border: 1px solid #ff4d4d;
+        color: #d8000c;
+        padding: 8px 10px;
+        margin-bottom: 12px;
+        border-radius: 6px;
+        list-style: none;
+        font-weight: 500;
+        font-size: 0.8rem;
     }
 
     .errorlist li {
-        list-style-type: none;
-        margin-bottom: 5px;
-    }
-
-    small.helptext {
-        font-size: 12px;
+        margin: 0;
+    }
+
+    .social-buttons {
+        display: flex;
+        gap: 10px;
+        margin-top: 12px;
+    }
+
+    .social-buttons a {
+        flex: 1;
+        text-align: center;
+        text-decoration: none;
+        padding: 10px;
+        border-radius: 6px;
+        font-weight: 500;
+        color: white;
+        font-size: 0.9rem;
+        transition: all 0.3s ease;
+    }
+
+    .social-buttons a.google {
+        background-color: #DB4437;
+    }
+
+    .social-buttons a.google:hover {
+        background-color: #c1351d;
+    }
+
+    .social-buttons a.facebook {
+        background-color: #3b5998;
+    }
+
+    .social-buttons a.facebook:hover {
+        background-color: #2d4373;
+    }
+
+    .help-text {
         color: #666;
+        font-size: 0.75rem;
+        display: block;
         margin-top: 4px;
-        display: block;
-    }
-
-    /* Fade-in animation */
-    @keyframes fadeIn {
-        from {opacity: 0; transform: translateY(20px);}
-        to {opacity: 1; transform: translateY(0);}
+    }
+
+    @media (max-width: 650px) {
+        .two-column-form {
+            flex-direction: column;
+        }
+
+        .form-column {
+            min-width: 100%;
+        }
+
+        .social-buttons {
+            flex-direction: column;
+            gap: 8px;
+        }
     }
 </style>
@@ -143,33 +235,50 @@
     <h2>Регистрација</h2>
 
-    {% if form.errors %}
-    <ul class="errorlist">
-        {% for field, errors in form.errors.items %}
-            {% for error in errors %}
-                <li>{{ error }}</li>
-            {% endfor %}
+    {% if form.non_field_errors %}
+        <ul class="errorlist full-width">
+        {% for error in form.non_field_errors %}
+            <li>{{ error }}</li>
         {% endfor %}
-    </ul>
+        </ul>
     {% endif %}
 
     <form method="post" novalidate>
         {% csrf_token %}
-
-        {% for field in form %}
-        <div class="form-group">
-            {{ field.label_tag }}
-            {{ field }}
-            {% if field.help_text %}
-                <small class="helptext">{{ field.help_text }}</small>
-            {% endif %}
-        </div>
-        {% endfor %}
-
-        <button type="submit">Регистрирај се</button>
-
-        <div class="login-link">
-            <a href="{% url 'login' %}">Веќе имате профил? Најавете се</a>
+        <div class="two-column-form">
+            {% for field in form %}
+            <div class="form-column">
+                <div class="form-group">
+                    {{ field.label_tag }}
+                    {{ field }}
+                    {% if field.help_text %}
+                        <span class="help-text">{{ field.help_text }}</span>
+                    {% endif %}
+                    {% if field.errors %}
+                        <ul class="errorlist">
+                        {% for error in field.errors %}
+                            <li>{{ error }}</li>
+                        {% endfor %}
+                        </ul>
+                    {% endif %}
+                </div>
+            </div>
+            {% endfor %}
+
+            <div class="full-width">
+                <button type="submit">Регистрирај се</button>
+            </div>
         </div>
     </form>
+
+    <div class="divider full-width">или регистрирај се со</div>
+
+    <div class="social-buttons full-width">
+        <a href="{% provider_login_url 'google' %}" class="google">Google</a>
+        <a href="{% provider_login_url 'facebook' %}" class="facebook">Facebook</a>
+    </div>
+
+    <div class="login-link full-width">
+        Веќе имате сметка? <a href="{% url 'login' %}">Најавете се</a>
+    </div>
 </div>
 </body>
Index: main/templates/main/stats.html
===================================================================
--- main/templates/main/stats.html	(revision 09a55ba56c74813273c03182cd01e2f8d3314915)
+++ main/templates/main/stats.html	(revision 35577210e2892b3cb3b24bb561e3f46989f9a05e)
@@ -4,310 +4,4 @@
 {% load static %}
 {% block content %}
-
-<!DOCTYPE html>
-<html lang="mk">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
-    <title>Ценовна историја - Штедко</title>
-    <style>
-        :root {
-            --primary-color: #2e652e;
-            --primary-dark: #1f3f1f;
-            --secondary-color: white;
-            --light-bg: #f5f5f5;
-            --white: #ffffff;
-            --text-dark: #333333;
-            --text-light: #666666;
-            --border-color: #e0e0e0;
-            --error-color: #e74c3c;
-            --orange-light: rgba(253,216,53,0.85);
-            --orange-dark: #F2C9A1;
-            --orange-solid: rgba(246,215,27,0.85);
-        }
-
-        body {
-            font-family: Arial, sans-serif;
-            margin: 0;
-            padding: 0;
-            display: flex;
-            flex-direction: column;
-            min-height: 100vh;
-            background-color: var(--light-bg);
-            color: var(--text-dark);
-            line-height: 1.6;
-        }
-
-        .main-content {
-            display: flex;
-            max-width: 1200px;
-            margin: 20px auto;
-            padding: 0 15px;
-            gap: 20px;
-        }
-
-        .content-area {
-            flex-grow: 1;
-            background-color: var(--white);
-            border-radius: 8px;
-            padding: 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: var(--primary-color);
-            position: relative;
-            padding-bottom: 10px;
-        }
-
-        .section-title::after {
-            content: '';
-            position: absolute;
-            left: 0;
-            bottom: 0;
-            width: 50px;
-            height: 3px;
-            background: linear-gradient(to right, var(--primary-color), var(--orange-solid));
-            border-radius: 3px;
-        }
-
-        .price-history-container {
-            display: flex;
-            gap: 20px;
-            flex-wrap: wrap;
-        }
-
-        .search-panel {
-            flex: 1 1 250px;
-            max-width: 300px;
-            background-color: var(--white);
-            border-radius: 8px;
-            padding: 20px;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-        }
-
-        .chart-panel {
-            flex: 2 1 500px;
-            min-width: 300px;
-            background-color: var(--white);
-            border-radius: 8px;
-            padding: 20px;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-        }
-
-        .search-form {
-            display: flex;
-            flex-direction: column;
-            gap: 15px;
-            margin-bottom: 20px;
-        }
-
-        .form-group {
-            display: flex;
-            flex-direction: column;
-        }
-
-        .form-group label {
-            font-weight: bold;
-            font-size: 0.9rem;
-            margin-bottom: 5px;
-            color: var(--primary-color);
-        }
-
-        .form-group select, 
-        .form-group input {
-            padding: 10px 12px;
-            border-radius: 4px;
-            border: 1px solid var(--border-color);
-            font-size: 0.9rem;
-            transition: all 0.3s ease;
-        }
-
-        .form-group select:focus, 
-        .form-group input:focus {
-            outline: none;
-            border-color: var(--primary-color);
-            box-shadow: 0 0 0 2px rgba(46, 101, 46, 0.2);
-        }
-
-        .search-btn {
-            padding: 12px;
-            background-color: var(--primary-color);
-            color: var(--white);
-            border: none;
-            border-radius: 5px;
-            cursor: pointer;
-            font-weight: bold;
-            transition: all 0.3s ease;
-            margin-top: 10px;
-        }
-
-        .search-btn:hover {
-            background-color: var(--primary-dark);
-            transform: translateY(-2px);
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-        }
-
-        .similar-products {
-            margin-top: 20px;
-        }
-
-        .similar-products h3 {
-            font-size: 1.1rem;
-            margin-bottom: 15px;
-            color: var(--primary-color);
-            border-bottom: 1px solid var(--border-color);
-            padding-bottom: 8px;
-        }
-
-        .products-list {
-            list-style: none;
-            padding: 0;
-            margin: 0;
-        }
-
-        .product-item {
-            padding: 10px 12px;
-            cursor: pointer;
-            background: var(--white);
-            margin-bottom: 8px;
-            border-radius: 5px;
-            border: 1px solid var(--border-color);
-            font-size: 0.85rem;
-            transition: all 0.3s ease;
-        }
-
-        .product-item:hover {
-            background: #e8f4e8;
-            border-color: var(--primary-color);
-            transform: translateX(5px);
-        }
-
-        .product-item.active {
-            background: var(--primary-color) !important;
-            color: var(--white) !important;
-            border-color: var(--primary-dark);
-        }
-
-        .chart-container {
-            background: var(--white);
-            padding: 15px;
-            border-radius: 8px;
-            border: 1px solid var(--border-color);
-            min-height: 300px;
-            display: flex;
-            flex-direction: column;
-        }
-
-        .chart-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 20px;
-        }
-
-        .chart-title {
-            font-size: 1.2rem;
-            color: var(--primary-color);
-            margin: 0;
-        }
-
-        .chart-actions {
-            display: flex;
-            gap: 10px;
-        }
-
-        .chart-btn {
-            padding: 6px 12px;
-            background-color: var(--orange-solid);
-            color: var(--white);
-            border: none;
-            border-radius: 4px;
-            cursor: pointer;
-            font-size: 0.8rem;
-            transition: all 0.3s ease;
-        }
-
-        .chart-btn:hover {
-            background-color: var(--orange-light);
-        }
-
-        #priceChart {
-            flex-grow: 1;
-            width: 100% !important;
-        }
-
-        .no-data {
-            text-align: center;
-            padding: 40px 20px;
-            color: var(--text-light);
-        }
-
-        .no-data i {
-            font-size: 3rem;
-            margin-bottom: 15px;
-            color: #ccc;
-        }
-
-        .loading-spinner {
-            display: inline-block;
-            width: 40px;
-            height: 40px;
-            border: 4px solid rgba(46, 101, 46, 0.2);
-            border-radius: 50%;
-            border-top-color: var(--primary-color);
-            animation: spin 1s ease-in-out infinite;
-            margin: 20px auto;
-        }
-
-        @keyframes spin {
-            to { transform: rotate(360deg); }
-        }
-
-        @media (max-width: 768px) {
-            .price-history-container {
-                flex-direction: column;
-            }
-            
-            .search-panel {
-                max-width: 88%;
-            }
-            
-            .chart-panel {
-                min-width: 88%;
-            }
-        }
-
-        .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;
-            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-            transform: translateX(100%);
-            opacity: 0;
-        }
-
-        .alert.show {
-            transform: translateX(0);
-            opacity: 1;
-        }
-    </style>
-</head>
-<body>
 
 <div class="message-container">
@@ -323,13 +17,23 @@
 
 <div class="main-content">
-<main class="content-area">
-<h2 class="section-title">Ценовна историја</h2>
-
-<div class="price-history-container">
-<div class="search-panel">
-    <form method="get" id="searchForm" class="search-form">
-        <div class="form-group">
+  <main class="content-area">
+    <div class="page-header">
+      <h2 class="section-title">Ценовна историја</h2>
+      <p class="page-description">Откријте ја историјата на цените на производите од вашите омилени продавници</p>
+    </div>
+
+    <div class="price-history-container">
+      <!-- Search panel -->
+      <div class="search-panel">
+        <div class="panel-header">
+          <i class="fas fa-search"></i>
+          <h3>Пребарај производи</h3>
+        </div>
+
+        <form method="get" id="searchForm" class="search-form">
+          <div class="form-group">
             <label for="store">Продавница:</label>
-            <select name="store" id="store" required>
+            <div class="select-wrapper">
+              <select name="store" id="store" required>
                 <option value="">-- Избери продавница --</option>
                 <option value="Vero" {% if store == 'Vero' %}selected{% endif %}>Vero</option>
@@ -337,159 +41,910 @@
                 <option value="Reptil" {% if store == 'Reptil' %}selected{% endif %}>Reptil</option>
                 <option value="Zito" {% if store == 'Zito' %}selected{% endif %}>Zito</option>
-            </select>
+              </select>
+              <i class="fas fa-chevron-down"></i>
+            </div>
+          </div>
+
+          <div class="form-group">
+            <label for="query">Име на производ:</label>
+            <div class="input-wrapper">
+              <input type="text" name="query" id="query" value="{{ query }}" required placeholder="Внеси име на производ">
+              <i class="fas fa-tag"></i>
+            </div>
+          </div>
+
+          <button type="submit" class="search-btn">
+            <i class="fas fa-search"></i>
+            Пребарај
+          </button>
+        </form>
+
+        {% if similar_products %}
+        <div class="similar-products">
+          <div class="similar-header">
+            <i class="fas fa-lightbulb"></i>
+            <h3>Препорачани производи:</h3>
+          </div>
+          <div class="products-scroll-container">
+            {% for p, similarity in similar_products %}
+              <div class="product-item" data-product="{{ p }}">
+                <span class="product-name">{{ p }}</span>
+{#                <span class="similarity-badge">{{ similarity|floatformat:0 }}%</span>#}
+              </div>
+            {% endfor %}
+          </div>
         </div>
-
-        <div class="form-group">
-            <label for="query">Производ:</label>
-            <input type="text" name="query" id="query" value="{{ query }}" required placeholder="Внеси име на производ">
+        {% endif %}
+      </div>
+
+      <!-- Chart panel -->
+      <div class="chart-panel">
+        <div class="panel-header">
+          <i class="fas fa-chart-line"></i>
+          <h3>Графикон на цени</h3>
         </div>
 
-        <button type="submit" class="search-btn">Пребарај</button>
-    </form>
-
-    {% if similar_products %}
-    <div class="similar-products">
-        <h3>Слични производи:</h3>
-        <ul class="products-list" id="similarProductsList">
-            {% for p, similarity in similar_products %}
-                <li class="product-item" data-product="{{ p }}">{{ p }}</li>
-            {% endfor %}
-        </ul>
+        <div class="chart-container" id="chartContainer">
+          <div class="chart-header">
+            <h3 class="chart-title" id="chartTitle">Изберете производ за да ја видите ценовната историја</h3>
+            <div class="chart-actions" id="chartActions" style="display: none;">
+              <button class="chart-btn export-btn" id="downloadChart">
+                <i class="fas fa-download"></i>
+                <span>Сними</span>
+              </button>
+              <button class="chart-btn info-btn" id="chartInfo">
+                <i class="fas fa-info-circle"></i>
+                <span>Инфо</span>
+              </button>
+            </div>
+          </div>
+
+          <div id="chartContent">
+            <div class="no-data">
+              <div class="no-data-icon">
+                <i class="fas fa-chart-bar"></i>
+              </div>
+              <h4>Нема податоци за приказ</h4>
+              <p>Изберете производ од листата за да ја видите неговата ценовна историја</p>
+            </div>
+          </div>
+        </div>
+
+        <div class="stats-container" id="statsContainer" style="display: none;">
+          <div class="stat-card">
+            <div class="stat-icon">
+              <i class="fas fa-tag"></i>
+            </div>
+            <div class="stat-info">
+              <span class="stat-value" id="currentPrice">-</span>
+              <span class="stat-label">Тековна цена</span>
+            </div>
+          </div>
+
+          <div class="stat-card">
+            <div class="stat-icon low">
+              <i class="fas fa-arrow-down"></i>
+            </div>
+            <div class="stat-info">
+              <span class="stat-value" id="lowestPrice">-</span>
+              <span class="stat-label">Најниска цена</span>
+            </div>
+          </div>
+
+          <div class="stat-card">
+            <div class="stat-icon high">
+              <i class="fas fa-arrow-up"></i>
+            </div>
+            <div class="stat-info">
+              <span class="stat-value" id="highestPrice">-</span>
+              <span class="stat-label">Највисока цена</span>
+            </div>
+          </div>
+
+          <div class="stat-card">
+            <div class="stat-icon avg">
+              <i class="fas fa-balance-scale"></i>
+            </div>
+            <div class="stat-info">
+              <span class="stat-value" id="averagePrice">-</span>
+              <span class="stat-label">Просечна цена</span>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
-    {% endif %}
+  </main>
 </div>
 
-<div class="chart-panel">
-<div class="chart-container" id="chartContainer">
-<div class="chart-header">
-    <h3 class="chart-title" id="chartTitle">График за ценовната историја на производот</h3>
-    <div class="chart-actions" id="chartActions" style="display: none;">
-        <button class="chart-btn" id="downloadChart"><i class="fas fa-download"></i> Сними</button>
-    </div>
-</div>
-
-<div id="chartContent">
-    <div class="no-data">
-        <i class="fas fa-chart-line"></i>
-        <p>Нема податоци за приказ. Избери производ од листата.</p>
-    </div>
-</div>
-</div>
-</div>
-</div>
-</main>
-</div>
-
+<!-- Styles -->
+<style>
+:root {
+  --primary: #2e652e;
+  --primary-light: #4caf50;
+  --primary-dark: #1f3f1f;
+  --secondary: #ff9800;
+  --bg: #f8f9fa;
+  --card-bg: #ffffff;
+  --white: #fff;
+  --border: #e0e0e0;
+  --text: #333333;
+  --text-light: #666666;
+  --text-lighter: #888888;
+  --success: #4caf50;
+  --warning: #ff9800;
+  --danger: #f44336;
+  --info: #2196f3;
+  --shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  --shadow-hover: 0 6px 16px rgba(0, 0, 0, 0.12);
+  --radius: 12px;
+  --radius-sm: 8px;
+  --transition: all 0.3s ease;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  background: var(--bg);
+    font-family: Arial, sans-serif;
+  margin: 0;
+  color: var(--text);
+  line-height: 1.6;
+}
+
+.main-content {
+  display: flex;
+  max-width: 1400px;
+  margin: 20px auto;
+  padding: 0 20px;
+  gap: 25px;
+}
+
+.header-search input{
+    width: 100%;
+}
+
+.content-area {
+  flex-grow: 1;
+  background: var(--card-bg);
+  border-radius: var(--radius);
+  padding: 25px;
+  box-shadow: var(--shadow);
+}
+
+.page-header {
+  margin-bottom: 30px;
+  padding-bottom: 15px;
+  border-bottom: 1px solid var(--border);
+}
+
+.section-title {
+  font-size: 1.8rem;
+  color: var(--primary);
+  margin: 0 0 8px 0;
+  font-weight: 700;
+}
+
+.page-description {
+  color: var(--text-light);
+  margin: 0;
+  font-size: 1rem;
+}
+
+.price-history-container {
+  display: flex;
+  gap: 25px;
+  flex-wrap: wrap;
+}
+
+.search-panel, .chart-panel {
+  background: var(--card-bg);
+  border-radius: var(--radius);
+  padding: 0;
+  box-shadow: var(--shadow);
+  transition: var(--transition);
+}
+
+.search-panel:hover, .chart-panel:hover {
+  box-shadow: var(--shadow-hover);
+}
+
+.search-panel {
+  flex: 1 1 320px;
+  max-width: 380px;
+}
+
+.chart-panel {
+  flex: 2 1 600px;
+  min-width: 340px;
+}
+
+.panel-header {
+  display: flex;
+  align-items: center;
+  padding: 20px 25px;
+  border-bottom: 1px solid var(--border);
+  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
+  color: white;
+  border-radius: var(--radius) var(--radius) 0 0;
+}
+
+.panel-header i {
+  margin-right: 12px;
+  font-size: 1.2rem;
+}
+
+.panel-header h3 {
+  margin: 0;
+  font-size: 1.2rem;
+  font-weight: 600;
+}
+
+.search-form {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  padding: 25px;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.form-group label {
+  font-weight: 600;
+  font-size: 0.95rem;
+  color: var(--text);
+}
+
+.select-wrapper, .input-wrapper {
+  position: relative;
+}
+
+.select-wrapper i, .input-wrapper i {
+  position: absolute;
+  right: 15px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--text-lighter);
+  pointer-events: none;
+}
+
+.form-group input, .form-group select {
+  padding: 14px 15px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  font-size: 1rem;
+  width: 100%;
+  transition: var(--transition);
+  background: var(--white);
+  appearance: none;
+}
+
+.form-group input:focus, .form-group select:focus {
+  outline: none;
+  border-color: var(--primary);
+  box-shadow: 0 0 0 3px rgba(46, 101, 46, 0.2);
+}
+
+.search-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  padding: 14px;
+  border: none;
+  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
+  color: #fff;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: var(--transition);
+  font-weight: 600;
+  font-size: 1rem;
+  margin-top: 10px;
+}
+
+.search-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 8px rgba(46, 101, 46, 0.3);
+}
+
+.similar-products {
+  margin-top: 20px;
+  border-top: 1px solid var(--border);
+  padding: 25px;
+}
+
+.similar-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 15px;
+}
+
+.similar-header i {
+  color: var(--secondary);
+  margin-right: 10px;
+  font-size: 1.1rem;
+}
+
+.similar-header h3 {
+  margin: 0;
+  font-size: 1.1rem;
+  color: var(--text);
+}
+
+.products-scroll-container {
+  max-height: 300px;
+  overflow-y: auto;
+  padding-right: 5px;
+}
+
+.products-scroll-container::-webkit-scrollbar {
+  width: 6px;
+}
+
+.products-scroll-container::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 10px;
+}
+
+.products-scroll-container::-webkit-scrollbar-thumb {
+  background: var(--primary);
+  border-radius: 10px;
+}
+
+.products-scroll-container::-webkit-scrollbar-thumb:hover {
+  background: var(--primary-dark);
+}
+
+.product-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 15px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  margin-bottom: 10px;
+  cursor: pointer;
+  transition: var(--transition);
+  background: var(--white);
+}
+
+.product-item:hover {
+  background: #eef8ee;
+  border-color: var(--primary-light);
+  transform: translateX(5px);
+}
+
+.product-item.active {
+  background: var(--primary);
+  color: #fff;
+  border-color: var(--primary);
+}
+
+.product-name {
+  flex: 1;
+  font-weight: 500;
+}
+
+.similarity-badge {
+  background: var(--secondary);
+  color: white;
+  padding: 4px 8px;
+  border-radius: 20px;
+  font-size: 0.8rem;
+  font-weight: 600;
+}
+
+.chart-container {
+  display: flex;
+  flex-direction: column;
+  min-height: 300px;
+  padding: 25px;
+}
+
+.chart-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  flex-wrap: wrap;
+  gap: 15px;
+}
+
+.chart-title {
+  font-size: 1.2rem;
+  color: var(--text);
+  margin: 0;
+  font-weight: 600;
+}
+
+.chart-actions {
+  display: flex;
+  gap: 10px;
+}
+
+.chart-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 15px;
+  border: none;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: var(--transition);
+  font-weight: 500;
+  font-size: 0.9rem;
+}
+
+.export-btn {
+  background: var(--primary);
+  color: white;
+}
+
+.export-btn:hover {
+  background: var(--primary-dark);
+}
+
+.info-btn {
+  background: var(--info);
+  color: white;
+}
+
+.info-btn:hover {
+  background: #0b7dda;
+}
+
+.no-data {
+  text-align: center;
+  color: var(--text-light);
+  padding: 40px 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 300px;
+}
+
+.no-data-icon {
+  font-size: 3.5rem;
+  margin-bottom: 15px;
+  color: #ddd;
+}
+
+.no-data h4 {
+  font-size: 1.3rem;
+  margin: 0 0 10px 0;
+  color: var(--text-light);
+}
+
+.no-data p {
+  margin: 0;
+  font-size: 1rem;
+}
+
+.loading-spinner {
+  width: 50px;
+  height: 50px;
+  border: 4px solid rgba(46, 101, 46, 0.2);
+  border-top-color: var(--primary);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  margin: 40px auto;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.stats-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 15px;
+  padding: 20px 25px;
+  border-top: 1px solid var(--border);
+}
+
+.stat-card {
+  display: flex;
+  align-items: center;
+  padding: 15px;
+  background: var(--white);
+  border-radius: var(--radius-sm);
+  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
+  transition: var(--transition);
+}
+
+.stat-card:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
+}
+
+.stat-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 15px;
+  background: rgba(46, 101, 46, 0.1);
+  color: var(--primary);
+}
+
+.stat-icon.low {
+  background: rgba(76, 175, 80, 0.1);
+  color: var(--success);
+}
+
+.stat-icon.high {
+  background: rgba(244, 67, 54, 0.1);
+  color: var(--danger);
+}
+
+.stat-icon.avg {
+  background: rgba(33, 150, 243, 0.1);
+  color: var(--info);
+}
+
+.stat-info {
+  display: flex;
+  flex-direction: column;
+}
+
+.stat-value {
+  font-size: 1.3rem;
+  font-weight: 700;
+  color: var(--text);
+}
+
+.stat-label {
+  font-size: 0.85rem;
+  color: var(--text-light);
+}
+
+.message-container {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.alert {
+  position: relative;
+  padding: 15px 20px;
+  background: var(--card-bg);
+  border-left: 4px solid var(--primary);
+  border-radius: 6px;
+  box-shadow: var(--shadow);
+  opacity: 0;
+  transform: translateX(100%);
+  transition: 0.4s;
+  max-width: 350px;
+}
+
+.alert.show {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+.close-btn {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  cursor: pointer;
+  font-weight: bold;
+  font-size: 1.2rem;
+  color: var(--text-light);
+}
+
+.close-btn:hover {
+  color: var(--text);
+}
+
+@media (max-width: 1024px) {
+  .main-content {
+    flex-direction: column;
+  }
+
+  .stats-container {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 768px) {
+  .main-content {
+    padding: 0 15px;
+    margin: 15px auto;
+  }
+
+  .content-area {
+    padding: 20px;
+  }
+
+  .price-history-container {
+    flex-direction: column;
+    gap: 20px;
+  }
+
+  .search-panel, .chart-panel {
+    max-width: 100%;
+    min-width: 100%;
+  }
+
+  .chart-header {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .chart-actions {
+    width: 100%;
+    justify-content: center;
+  }
+
+  .stats-container {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 480px) {
+  .section-title {
+    font-size: 1.5rem;
+  }
+
+  .search-form {
+    padding: 20px;
+  }
+
+  .similar-products, .chart-container {
+    padding: 20px;
+  }
+}
+</style>
+
+<!-- Chart.js -->
 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@1.2.1/dist/chartjs-plugin-zoom.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
+
 <script>
 let priceChart = null;
 
-// Show messages animation
+// Animate messages
 document.querySelectorAll('.alert').forEach(alert => {
-    setTimeout(() => alert.classList.add('show'), 100);
+  setTimeout(() => alert.classList.add('show'), 100);
+  setTimeout(() => {
+    alert.style.opacity = '0';
+    setTimeout(() => alert.remove(), 300);
+  }, 5000);
 });
-setTimeout(() => {
-    document.querySelectorAll('.alert').forEach(alert => {
-        alert.style.opacity = '0';
-        setTimeout(() => alert.remove(), 300);
+
+// Cyrillic transliteration
+const cyrMap = {a:"а",b:"б",v:"в",g:"г",d:"д",e:"е",zh:"ж",z:"з",i:"и",j:"ј",k:"к",l:"л",m:"м",n:"н",o:"о",p:"п",r:"р",s:"с",t:"т",u:"у",f:"ф",h:"х",c:"ц",ch:"ч",sh:"ш",dj:"џ",lj:"љ",nj:"њ",y:"ј",w:"в",x:"кс",q:"ќ"};
+
+function latinToCyrillic(str) {
+  str = str.toLowerCase();
+  for(let k in cyrMap) {
+    str = str.replace(new RegExp(k, "g"), cyrMap[k]);
+  }
+  return str;
+}
+
+// Handle similar product clicks
+document.querySelectorAll('.product-item').forEach(item => {
+  item.addEventListener('click', async function() {
+    document.querySelectorAll('.product-item').forEach(i => i.classList.remove('active'));
+    this.classList.add('active');
+
+    let productName = this.dataset.product;
+    const store = document.querySelector('#store').value;
+    if (!store) {
+      showMessage("Ве молам изберете продавница прво.", "warning");
+      return;
+    }
+
+    const cyrName = latinToCyrillic(productName);
+    document.getElementById('chartActions').style.display = 'flex';
+    document.getElementById('chartTitle').innerText = `Историја на цени за: ${productName}`;
+    document.getElementById('chartContent').innerHTML = '<div class="loading-spinner"></div>';
+
+    // Show loading state for stats
+    document.getElementById('statsContainer').style.display = 'grid';
+    document.querySelectorAll('.stat-value').forEach(el => {
+      el.innerText = '...';
     });
-}, 5000);
-
-// --- Cyrillic transliteration map ---
-const cyrMap = {
-    'a':'а','b':'б','v':'в','g':'г','d':'д','e':'е','zh':'ж','z':'з',
-    'i':'и','j':'ј','k':'к','l':'л','m':'м','n':'н','o':'о','p':'п',
-    'r':'р','s':'с','t':'т','u':'у','f':'ф','h':'х','c':'ц','ch':'ч',
-    'sh':'ш','dj':'џ','lj':'љ','nj':'њ','y':'ј','w':'в','x':'кс','q':'ќ'
-};
-
-function latinToCyrillic(str) {
-    str = str.toLowerCase();
-    for (let key in cyrMap) {
-        let re = new RegExp(key, 'g');
-        str = str.replace(re, cyrMap[key]);
+
+    try {
+      const res = await fetch(`/api/product-history/?store=${store}&product=${encodeURIComponent(cyrName)}`);
+      const data = await res.json();
+
+      if (!data?.data?.length) {
+        document.getElementById('chartContent').innerHTML = `
+          <div class="no-data">
+            <div class="no-data-icon">
+              <i class="fas fa-exclamation-circle"></i>
+            </div>
+            <h4>Нема податоци за цените</h4>
+            <p>Не се пронајдени записи за цени на овој производ</p>
+          </div>`;
+        document.getElementById('statsContainer').style.display = 'none';
+        return;
+      }
+
+      // Process data for chart
+      const sortedData = data.data.sort((a, b) => new Date(a.date) - new Date(b.date));
+      const labels = sortedData.map(e => new Date(e.date));
+      const prices = sortedData.map(e => parseFloat(e.price));
+
+      // Calculate stats
+      const currentPrice = prices[prices.length - 1];
+      const lowestPrice = Math.min(...prices);
+      const highestPrice = Math.max(...prices);
+      const averagePrice = (prices.reduce((a, b) => a + b, 0) / prices.length).toFixed(2);
+
+      // Update stats
+      document.getElementById('currentPrice').innerText = `${currentPrice} МКД`;
+      document.getElementById('lowestPrice').innerText = `${lowestPrice} МКД`;
+      document.getElementById('highestPrice').innerText = `${highestPrice} МКД`;
+      document.getElementById('averagePrice').innerText = `${averagePrice} МКД`;
+
+      // Render chart
+      document.getElementById('chartContent').innerHTML = '<canvas id="priceChart"></canvas>';
+      const ctx = document.getElementById('priceChart').getContext('2d');
+
+      if (priceChart) priceChart.destroy();
+
+      priceChart = new Chart(ctx, {
+        type: 'line',
+        data: {
+          labels: labels,
+          datasets: [{
+            label: 'Цена (МКД)',
+            data: prices,
+            borderColor: '#2e652e',
+            backgroundColor: 'rgba(46, 101, 46, 0.1)',
+            fill: true,
+            tension: 0.2,
+            pointBackgroundColor: '#fff',
+            pointBorderColor: '#2e652e',
+            pointBorderWidth: 2,
+            pointRadius: 4,
+            pointHoverRadius: 6
+          }]
+        },
+        options: {
+          responsive: true,
+          maintainAspectRatio: true,
+          plugins: {
+            legend: {
+              display: false
+            },
+            tooltip: {
+              mode: 'index',
+              intersect: false,
+              callbacks: {
+                label: function(context) {
+                  return `Цена: ${context.parsed.y} МКД`;
+                },
+                title: function(context) {
+                  return new Date(context[0].parsed.x).toLocaleDateString('mk-MK');
+                }
+              }
+            },
+            zoom: {
+              zoom: {
+                wheel: {
+                  enabled: true,
+                },
+                pinch: {
+                  enabled: true
+                },
+                mode: 'x',
+              },
+              pan: {
+                enabled: true,
+                mode: 'x',
+              }
+            }
+          },
+          scales: {
+            x: {
+              type: 'time',
+              time: {
+                unit: 'day',
+                tooltipFormat: 'dd MMM yyyy',
+                displayFormats: {
+                  day: 'dd MMM'
+                }
+              },
+              title: {
+                display: true,
+                text: 'Датум'
+              }
+            },
+            y: {
+              title: {
+                display: true,
+                text: 'Цена (МКД)'
+              },
+              grace: '5%'
+            }
+          }
+        }
+      });
+
+    } catch (err) {
+      console.error(err);
+      document.getElementById('chartContent').innerHTML = `
+        <div class="no-data">
+          <div class="no-data-icon">
+            <i class="fas fa-exclamation-triangle"></i>
+          </div>
+          <h4>Грешка при вчитување</h4>
+          <p>Настана грешка при вчитување на податоците. Обидете се повторно.</p>
+        </div>`;
+      document.getElementById('statsContainer').style.display = 'none';
     }
-    return str;
-}
-
-// Handle similar product clicks
-document.querySelectorAll('#similarProductsList li').forEach(item => {
-    item.addEventListener('click', async function() {
-        document.querySelectorAll('#similarProductsList li').forEach(i => i.classList.remove('active'));
-        this.classList.add('active');
-
-        let productName = this.dataset.product;
-        const store = document.querySelector('select[name="store"]').value;
-        if (!store) { alert('Ве молам изберете продавница прво.'); return; }
-
-        // Convert product name to Cyrillic before sending request
-        const cyrName = latinToCyrillic(productName);
-
-        document.getElementById('chartActions').style.display = 'flex';
-        document.getElementById('chartTitle').innerText = `Историја на цени за: ${productName}`;
-
-        document.getElementById('chartContent').innerHTML = '<div class="loading-spinner"></div>';
-
-        try {
-            const res = await fetch(`/api/product-history/?store=${store}&product=${encodeURIComponent(cyrName)}`);
-            const data = await res.json();
-
-            if (!data || !data.data || data.data.length === 0) {
-                document.getElementById('chartContent').innerHTML = `
-                    <div class="no-data">
-                        <i class="fas fa-exclamation-circle"></i>
-                        <p>Нема податоци за цените на овој производ.</p>
-                    </div>
-                `;
-                return;
-            }
-
-            const labels = data.data.map(e => (new Date(e.date)).toLocaleDateString('mk-MK'));
-            const prices = data.data.map(e => e.price);
-
-            document.getElementById('chartContent').innerHTML = '<canvas id="priceChart"></canvas>';
-            const ctx = document.getElementById('priceChart').getContext('2d');
-            if (priceChart) priceChart.destroy();
-
-            priceChart = new Chart(ctx, {
-                type: 'line',
-                data: { labels, datasets:[{
-                    label:'Цена (МКД)',
-                    data: prices,
-                    borderColor:'#2e652e',
-                    backgroundColor:'rgba(46,101,46,0.1)',
-                    borderWidth:2,
-                    tension:0.1,
-                    fill:true,
-                    pointBackgroundColor:'#2e652e',
-                    pointBorderColor:'#fff',
-                    pointRadius:4,
-                    pointHoverRadius:6
-                }]}
-            });
-
-        } catch(err) {
-            console.error(err);
-            document.getElementById('chartContent').innerHTML = `
-                <div class="no-data">
-                    <i class="fas fa-exclamation-triangle"></i>
-                    <p>Грешка при вчитување на ценовната историја.</p>
-                </div>
-            `;
-        }
-    });
+  });
 });
 
 // Download chart
-document.getElementById('downloadChart')?.addEventListener('click', function() {
-    if(priceChart) {
-        const link = document.createElement('a');
-        link.download = 'price-history.png';
-        link.href = priceChart.toBase64Image();
-        link.click();
-    }
+document.getElementById('downloadChart')?.addEventListener('click', () => {
+  if (priceChart) {
+    const link = document.createElement('a');
+    link.download = 'price-history.png';
+    link.href = priceChart.toBase64Image();
+    link.click();
+  } else {
+    showMessage("Нема графикон за снимање.", "warning");
+  }
+});
+
+// Chart info button
+document.getElementById('chartInfo')?.addEventListener('click', () => {
+  showMessage("Користете го тркалчето на глушецот за да зумирате или влечете за да панорамирате графиконот.", "info");
+});
+
+// Helper function to show messages
+function showMessage(message, type) {
+  const messageContainer = document.querySelector('.message-container');
+  const alert = document.createElement('div');
+  alert.className = `alert alert-${type}`;
+  alert.innerHTML = `
+    ${message}
+    <span class="close-btn" onclick="this.parentElement.remove()">×</span>
+  `;
+
+  messageContainer.appendChild(alert);
+
+  setTimeout(() => alert.classList.add('show'), 100);
+  setTimeout(() => {
+    alert.style.opacity = '0';
+    setTimeout(() => alert.remove(), 300);
+  }, 5000);
+}
+
+// Add event listener for form submission to show loading state
+document.getElementById('searchForm').addEventListener('submit', function() {
+  const store = document.querySelector('#store').value;
+  const query = document.querySelector('#query').value;
+
+  if (!store || !query) {
+    return; // Let browser handle validation
+  }
+
+  // Show loading state for similar products
+  const similarProducts = document.querySelector('.similar-products');
+  if (similarProducts) {
+    similarProducts.innerHTML = '<div class="loading-spinner"></div>';
+  }
 });
 </script>
-</body>
-</html>
+
 {% endblock %}
Index: main/templates/socialaccount/1.html
===================================================================
--- main/templates/socialaccount/1.html	(revision 35577210e2892b3cb3b24bb561e3f46989f9a05e)
+++ main/templates/socialaccount/1.html	(revision 35577210e2892b3cb3b24bb561e3f46989f9a05e)
@@ -0,0 +1,11 @@
+{% extends "main/index.html" %}
+{% block content %}
+<div style="text-align:center; padding:50px;">
+    <h2>Welcome! Almost done...</h2>
+    <p>Your Google account is about to be connected to our site.</p>
+    <form method="post" action="{% url 'socialaccount_signup' %}">
+        {% csrf_token %}
+        <button type="submit" class="btn btn-primary">Continue</button>
+    </form>
+</div>
+{% endblock %}
Index: main/urls.py
===================================================================
--- main/urls.py	(revision 09a55ba56c74813273c03182cd01e2f8d3314915)
+++ main/urls.py	(revision 35577210e2892b3cb3b24bb561e3f46989f9a05e)
@@ -4,4 +4,6 @@
 from . import views
 from django.contrib.auth import views as auth_views
+from django.urls import path, include
+from django.contrib import admin
 
 from .views import custom_logout, remove_from_list, get_store_products, stats_view
@@ -44,4 +46,7 @@
     path('get-favorites/', views.get_favorites, name='get_favorites'),
     path('api/product-history/', views.product_history_api, name='product_history_api'),
+    path("accounts/", include("allauth.urls")),
+    path('admin/', admin.site.urls),  # <<< Add this line
+    # provides login, logout, callbacks
 
 ]
Index: main/views.py
===================================================================
--- main/views.py	(revision 09a55ba56c74813273c03182cd01e2f8d3314915)
+++ main/views.py	(revision 35577210e2892b3cb3b24bb561e3f46989f9a05e)
@@ -86,14 +86,14 @@
         popust_filtered = store_filtered.filter(popust=True)
 
-        print(f"Store: {cleaned}")
-        print(f"Products after store filter: {store_filtered.count()}")
-        print(f"Products after popust filter: {popust_filtered.count()}")
+        # print(f"Store: {cleaned}")
+        # print(f"Products after store filter: {store_filtered.count()}")
+        # print(f"Products after popust filter: {popust_filtered.count()}")
 
         products = popust_filtered.order_by('-price')[:3]
 
-        if not products:
-            print(f"No discounted products for {cleaned}")
-        else:
-            print(f"Found {len(products)} products for {cleaned}")
+        # if not products:
+        #     print(f"No discounted products for {cleaned}")
+        # else:
+        #     print(f"Found {len(products)} products for {cleaned}")
 
         stores_with_products.append({
@@ -388,4 +388,8 @@
 def add_to_list(request):
     try:
+        # Only allow POST
+        if request.method != "POST":
+            return JsonResponse({'success': False, 'message': 'Invalid request'}, status=405)
+
         # Extract data from POST request
         data = json.loads(request.body)
@@ -393,8 +397,4 @@
         list_id = data.get('list_id')
 
-        # Debugging: Log received values
-        print(f"Product ID: {product_id}, List ID: {list_id}, User: {request.user}")
-
-        # Validate inputs
         if not product_id or not list_id:
             return JsonResponse({'success': False, 'message': 'Missing product or list ID'}, status=400)
@@ -404,8 +404,5 @@
         product = get_object_or_404(Products2, id=product_id)
 
-        # Debugging: Confirm the product and list are found
-        print(f"Shopping List: {shopping_list}, Product: {product}")
-
-        # Get or create the list item
+        # Get or create the item
         item, created = ShoppingListItem.objects.get_or_create(
             shopping_list=shopping_list,
@@ -414,18 +411,17 @@
         )
 
-        # Check if item is created or updated
         if not created:
             item.quantity += 1
             item.save()
 
-        # Debugging: Confirm the item was saved
-        print(f"Item: {item}, Created: {created}")
-
-        return JsonResponse({'success': True, 'message': 'Product added to list'})
+        return JsonResponse({
+            'success': True,
+            'message': f'{product.name} added to list',
+            'quantity': item.quantity
+        })
 
     except Exception as e:
-        print(f"Error: {e}")  # Log error details
+        print(f"Error: {e}")
         return JsonResponse({'success': False, 'message': str(e)}, status=400)
-
 def get_user_lists(request):
     if not request.user.is_authenticated:
@@ -625,5 +621,5 @@
 
     # Debug output - remove in production
-    print("Context being sent to template:")
+    # print("Context being sent to template:")
     for key, value in context.items():
         print(f"{key}: {value}")
@@ -698,9 +694,26 @@
 
     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 Ruzveltova", "lat": 42.0040878561334, "lon": 21.41538436528707, "chain": "reptil"},
+        {"name": "Reptil Market Crniche", "lat": 41.98424985514346, "lon": 21.42854499185496, "chain": "reptil"},
+        {"name": "Reptil Market Butel", "lat": 42.03151299550568, "lon": 21.44460271127004, "chain": "reptil"},
+        {"name": "Reptil Market Avtokomanda", "lat": 42.00314285371043, "lon": 21.464809841955148, "chain": "reptil"},
+        {"name": "Reptil Market Radishani", "lat": 42.05659527027985, "lon": 21.451523714968985, "chain": "reptil"},
+        {"name": "Reptil Market Madzari", "lat": 42.00080136926024, "lon": 21.488524284283873, "chain": "reptil"},
+        {"name": "Reptil Market Lisice", "lat": 41.975386066287584, "lon": 21.472738657297704, "chain": "reptil"},
+        {"name": "Reptil Market Ardorom bul.Jane Sandanski", "lat": 41.98410917961027, "lon": 21.46690158428389, "chain": "reptil"},
+        {"name": "Reptil Market Bardovci", "lat": 42.025668068096394, "lon": 21.37584645411437, "chain": "reptil"},
+        {"name": "Reptil Market Aerodrom", "lat": 41.985188473060354, "lon": 21.453380984283882, "chain": "reptil"},
+        {"name": "Reptil Market Shop & Go", "lat": 41.99948987076041, "lon": 21.423976899626428, "chain": "reptil"},
+        {"name": "Reptil Market Zelen Pazar", "lat": 41.991862538872645, "lon": 21.433574943394476, "chain": "reptil"},
+        {"name": "Reptil Market Drzhavna Bolnica", "lat": 41.99082095885179, "lon": 21.424983018422854, "chain": "reptil"},
+        {"name": "Reptil Market Kisela Voda", "lat": 41.98173349419106, "lon": 21.43810738428388, "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 Karposh 3 br.9", "lat": 42.007022300132036, "lon": 21.400571526550074, "chain": "reptil"},
+        {"name": "Reptil Market Karposh br.6", "lat": 42.00112199222344, "lon": 21.41212279925285, "chain": "reptil"},
+        {"name": "Reptil Market Karposh br.5", "lat": 42.007478018986724, "lon": 21.395736283910317, "chain": "reptil"},
+        {"name": "Reptil Market Porta Vlae", "lat": 42.00816321194575, "lon": 21.370438003817473, "chain": "reptil"},
+        {"name": "Reptil Market Nerezi", "lat": 41.995647756137735, "lon": 21.39414196856774, "chain": "reptil"},
+        {"name": "Reptil Market Vlae", "lat": 42.011056469322966, "lon": 21.374480029937953, "chain": "reptil"},
+        {"name": "Reptil Market Centar Pestaloci", "lat": 41.99836555442384, "lon": 21.421861676512417, "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"},
