diff --git a/.DS_Store b/.DS_Store
index d889586..478c685 100644
Binary files a/.DS_Store and b/.DS_Store differ
diff --git a/.gitignore b/.gitignore
index db770b9..0541970 100644
--- a/.gitignore
+++ b/.gitignore
@@ -161,4 +161,6 @@ cython_debug/
 #  option (not recommended) you can uncomment the following to ignore the entire idea folder.
 #.idea/
 
-.DS_Store
\ No newline at end of file
+.DS_Store
+
+.idea/
\ No newline at end of file
diff --git a/.idea/GreenCart.iml b/.idea/GreenCart.iml
index b8425b5..c0ac56c 100644
--- a/.idea/GreenCart.iml
+++ b/.idea/GreenCart.iml
@@ -16,7 +16,7 @@
     <content url="file://$MODULE_DIR$">
       <excludeFolder url="file://$MODULE_DIR$/.venv" />
     </content>
-    <orderEntry type="inheritedJdk" />
+    <orderEntry type="jdk" jdkName="Python 3.11 (GreenCart)" jdkType="Python SDK" />
     <orderEntry type="sourceFolder" forTests="false" />
   </component>
   <component name="TemplatesService">
diff --git a/.idea/misc.xml b/.idea/misc.xml
index f8317f1..5d08675 100644
--- a/.idea/misc.xml
+++ b/.idea/misc.xml
@@ -3,5 +3,5 @@
   <component name="Black">
     <option name="sdkName" value="Python 3.9 (GreenCart)" />
   </component>
-  <component name="ProjectRootManager" version="2" project-jdk-name="Python 3.9 (GreenCart)" project-jdk-type="Python SDK" />
+  <component name="ProjectRootManager" version="2" project-jdk-name="Python 3.11 (GreenCart)" project-jdk-type="Python SDK" />
 </project>
\ No newline at end of file
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
deleted file mode 100644
index 94a25f7..0000000
--- a/.idea/vcs.xml
+++ /dev/null
@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="VcsDirectoryMappings">
-    <mapping directory="$PROJECT_DIR$" vcs="Git" />
-  </component>
-</project>
\ No newline at end of file
diff --git a/Auth/.DS_Store b/Auth/.DS_Store
index dae8f3e..f8495f4 100644
Binary files a/Auth/.DS_Store and b/Auth/.DS_Store differ
diff --git a/Contact/__init__.py b/Contact/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/Contact/admin.py b/Contact/admin.py
new file mode 100644
index 0000000..8c38f3f
--- /dev/null
+++ b/Contact/admin.py
@@ -0,0 +1,3 @@
+from django.contrib import admin
+
+# Register your models here.
diff --git a/Contact/apps.py b/Contact/apps.py
new file mode 100644
index 0000000..5515301
--- /dev/null
+++ b/Contact/apps.py
@@ -0,0 +1,6 @@
+from django.apps import AppConfig
+
+
+class ContactConfig(AppConfig):
+    default_auto_field = 'django.db.models.BigAutoField'
+    name = 'Contact'
diff --git a/Contact/migrations/__init__.py b/Contact/migrations/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/Contact/models.py b/Contact/models.py
new file mode 100644
index 0000000..71a8362
--- /dev/null
+++ b/Contact/models.py
@@ -0,0 +1,3 @@
+from django.db import models
+
+# Create your models here.
diff --git a/Contact/tests.py b/Contact/tests.py
new file mode 100644
index 0000000..7ce503c
--- /dev/null
+++ b/Contact/tests.py
@@ -0,0 +1,3 @@
+from django.test import TestCase
+
+# Create your tests here.
diff --git a/Contact/views.py b/Contact/views.py
new file mode 100644
index 0000000..91ea44a
--- /dev/null
+++ b/Contact/views.py
@@ -0,0 +1,3 @@
+from django.shortcuts import render
+
+# Create your views here.
diff --git a/GreenCart/settings.py b/GreenCart/settings.py
index 354571e..ca97a11 100644
--- a/GreenCart/settings.py
+++ b/GreenCart/settings.py
@@ -42,7 +42,9 @@
     "Auth.apps.AuthConfig",
     "Shop.apps.ShopConfig",
     "add_to_cart.apps.AddToCartConfig",
-    "userprofile.apps.UserprofileConfig"
+    'payments.apps.PaymentsConfig',
+    "userprofile.apps.UserprofileConfig",
+    "Support"
 ]
 
 MIDDLEWARE = [
@@ -145,3 +147,23 @@
 # https://docs.djangoproject.com/en/4.2/ref/settings/#default-auto-field
 
 DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
+
+EMAIL_BACKEND = 'django.core.mail.backends.smtp.EmailBackend'
+EMAIL_HOST = 'smtp.example.com'
+EMAIL_PORT = 587
+EMAIL_USE_TLS = True
+EMAIL_HOST_USER = 'support@greencart.com'
+EMAIL_HOST_PASSWORD = 'admin'
+DEFAULT_FROM_EMAIL = 'support@greencart.com'
+# myproject/settings.py
+
+import os
+# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
+BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
+
+# Add these lines at the end of your settings.py file
+MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
+MEDIA_URL = '/media/'
+
+STRIPE_SECRET_KEY = 'sk_test_51PaOOhRtHtPlgcaiSwH19QRY2pMB1G3HYzLZhI5HnX7GwYt4XBxCJ1U9mE3yyFaVPlYobaM4nF1Qn6wzOC1INrjz00c3EnnK05'
+STRIPE_PUBLISHABLE_KEY = 'pk_test_51PaOOhRtHtPlgcaiDlSzoNrhdvbuxI0pjDgLiFgH53Nbch8hjwCNiFIinLLZUUKSA9IhA7dnGyKnBl4qWEI2miDy00H3IE7lGy'
\ No newline at end of file
diff --git a/GreenCart/urls.py b/GreenCart/urls.py
index f3e1e8e..5206cf6 100644
--- a/GreenCart/urls.py
+++ b/GreenCart/urls.py
@@ -1,20 +1,25 @@
 from django.contrib import admin
+from django.conf import settings
+from django.conf.urls.static import static
 from django.urls import path, include
 from django.conf import settings
 from django.conf.urls.static import static
+from payments.views import payment_view, payment_success
 
 # Admin site configuration
 admin.site.index_title = "Welcome to GreenCart Admin Portal"
-admin.site.site_title = "GreenCart Admin Portal"
-admin.site.site_header = "GreenCart Admin Portal"
+admin.site.site_header="GreenCart Admin"
+admin.site.site_title ="GreenCart Admin Portal"
 
 urlpatterns = [
     path('admin/', admin.site.urls),
     path('', include('GreenCartEcom.urls', 'GreenCartEcom'), name='GreenCartEcom'),
     path('cart/', include('add_to_cart.urls', 'AddToCart'), name='AddToCart'),
-    path('auth/', include('Auth.urls', 'Auth'), name='Auth'),
-    path('shop/', include('Shop.urls', 'Shop'), name='Shop'),
-    path('profile/', include('userprofile.urls', 'Profile'), name='Profile'),
+    path('auth/', include('Auth.urls','Auth'), name='Auth'),
+    path('shop/', include('Shop.urls','Shop'), name='Shop'),
+    path('profile/', include('userprofile.urls','Profile'), name='Profile'),
+    path('pay/', include(('payments.urls', 'payments'), namespace='payments')),
+    path('support/', include('Support.urls'), name='Support')
 ]
 
 if settings.DEBUG:
diff --git a/GreenCartEcom/templates/Dashboard/index.html b/GreenCartEcom/templates/Dashboard/index.html
index 214ce2c..700e8b6 100644
--- a/GreenCartEcom/templates/Dashboard/index.html
+++ b/GreenCartEcom/templates/Dashboard/index.html
@@ -5,7 +5,7 @@
 <!-- Carousel Section -->
 <div id="custom-carousel" class="relative w-full" data-carousel="slide">
   <!-- Carousel wrapper -->
-  <div class="relative h-56 overflow-hidden rounded-lg md:h-96">
+  <div class="relative h-72 md:h-96 overflow-hidden">
       <!-- Item 1 -->
       <div class="carousel-item duration-700 ease-in-out">
           <img src="https://bloomscape.com/wp-content/uploads/2020/05/bloomscape_indoor-outdoor_4-1536x1024.jpg?ver=217611" class="absolute block w-full" alt="Image 1">
@@ -51,6 +51,8 @@
   function showSlide(index) {
       slides.forEach((slide, i) => {
           slide.classList.toggle('hidden', i !== index);
+          slide.classList.toggle('opacity-100', i === index);
+          slide.classList.toggle('opacity-0', i !== index);
       });
   }
 
@@ -71,20 +73,34 @@
 
   // Initialize the slider
   showSlide(currentSlide);
+
+  // Automatically move to the next slide every 5 seconds
+  setInterval(moveToNextSlide, 5000);
 </script>
 
 <!-- Product List Section -->
-<div class="product-list grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 mt-10">
-    {% for product in products %}
-    <div class="product-card border p-4 shadow-md">
-        <img src="{{ product.image.url }}" alt="{{ product.name }}" class="w-full h-30 object-cover rounded-t-lg">
-        <div class="product-info mt-4">
-            <h2 class="text-lg font-semibold">{{ product.name }}</h2>
-            <p class="text-gray-600">{{ product.price }}</p>
-            <button class="mt-2 bg-green-500 text-white px-4 py-2 rounded">Add to Cart</button>
+<div class="mt-4 ml-4">
+    <h2 class="font-bold text-xl">Featured Products</h2>
+    <div class="flex overflow-x-auto space-x-6 p-4">
+        {% for product in products %}
+        <div class="relative overflow-hidden rounded-lg shadow-lg flex flex-col justify-between h-100 min-w-[250px]">
+            {% if product.image.url %}
+            <div class="relative pt-10 px-10 flex items-center justify-center h-48">
+                <img class="relative w-40 h-40 object-cover" src="{{ product.image.url }}" alt="{{ product.name }}">
+            </div>
+            {% endif %}
+            <div class="relative text-black px-6 pb-6 mt-6 flex flex-col justify-between flex-grow">
+                <div class="flex justify-between">
+                    <span class="block font-semibold text-sm">{{ product.name }}</span>
+                    <span class="block bg-white rounded-full text-black text-xs font-bold px-3 py-2 leading-none flex items-center">${{ product.price }}</span>
+                </div>
+                <div class="flex justify-center mt-4">
+                    <button class="w-full bg-green-600 text-white px-4 py-2 rounded font-bold text-sm">Add to Cart</button>
+                </div>
+            </div>
         </div>
+        {% endfor %}
     </div>
-    {% endfor %}
 </div>
 
 {% endblock %}
diff --git a/GreenCartEcom/templates/Dashboard/navbar.html b/GreenCartEcom/templates/Dashboard/navbar.html
index 7a73a36..b8f218d 100644
--- a/GreenCartEcom/templates/Dashboard/navbar.html
+++ b/GreenCartEcom/templates/Dashboard/navbar.html
@@ -1,78 +1,91 @@
 {% load static %}
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="https://cdn.tailwindcss.com/"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
     <link rel="stylesheet" href="{% static 'css/app.css' %}">
 
     <title>{% block title %}{% endblock %}</title>
     <style>
-        html, body {
+        html,
+        body {
             height: 100%;
         }
+
         .scroll-container {
-            height: calc(100% - 6rem); /* Adjust based on your header height */
+            height: calc(100% - 6rem);
+            /* Adjust based on your header height */
             overflow-y: auto;
         }
     </style>
 </head>
+
 <body class="flex flex-col min-h-screen">
     <!-- Top section: Header -->
-    <div>
-        {% include 'alert.html' %}
-        <nav class="px-6 py-6 flex justify-between items-center border-b border-gray-200">
-            <!-- Left side: GreenCart logo/image and search field -->
-            <div class="flex items-center">
-                <!-- GreenCart logo/image (replace with your image or text) -->
-                <a href="/" class="flex items-center mb-4 sm:mb-0 space-x-3 rtl:space-x-reverse">
-                    <img src="{% static 'images/logo.png' %}" class="h-8" alt="GreenCart Logo" />
-                    <span class="self-center text-xl font-semibold whitespace-nowrap text-green-600">GreenCart</span>
-                </a>
-                <form method="GET" class="ml-4 flex">
-                    <div class="flex">
-                        <input type="text" name="query" placeholder="Search for a product" class="py-1 px-2 sm:px-4 rounded-l-lg border border-gray-300 focus:outline-none focus:border-green-600 w-full sm:w-auto ">
-                        <button type="submit" class="py-1 px-3 bg-green-600 text-white rounded-r-lg hover:bg-green-700 focus:outline-none focus:bg-green-700">Search</button>
-                    </div>
-                </form>
-            </div>
-            
-            <!-- Right side: Navigation links -->
-            <ul class="flex space-x-4">
-                <li><a href="{% url 'GreenCartEcom:index' %}" class="text-gray-500">Home</a></li>
-                <li><a href="{% url 'GreenCartEcom:contact' %}" class="text-gray-500">Contact</a></li>
-                <li><a href="{% url 'Auth:login' %}" class="text-gray-500">SignIn</a></li>
-{#                <li><a href="{% url 'AddToCart:cart' %}" class="text-gray-500">Cart</a></li>#}
-            </ul>
-        </nav>
+    <div class="sticky top-0 z-50">
+        <div class="bg-white shadow-lg">
+            {% include 'alert.html' %}
+            <nav class="px-6 py-6 flex bg-green-100/75 justify-between items-center border-b border-gray-200">
+                <!-- Left side: GreenCart logo/image and search field -->
+                <div class="flex items-center">
+                    <!-- GreenCart logo/image (replace with your image or text) -->
+                    <a href="/" class="flex items-center mb-4 sm:mb-0 space-x-3 rtl:space-x-reverse">
+                        <img src="{% static 'images/logo.png' %}" class="h-8" alt="GreenCart Logo" />
+                    </a>
+                    <form method="GET" class="ml-4 flex items-center">
+                        <div class="flex">
+                            <input type="text" name="query" placeholder="Search for a product"
+                                class="h-10 py-1 px-2 sm:px-4 rounded-l-lg border border-gray-300 focus:outline-none focus:border-green-600 w-64 sm:w-96">
+                            <!-- Adjusted the height to 12 and width to 64/96 -->
+                            <button type="submit"
+                                class="h-10 py-2 px-4 bg-green-600 text-white rounded-r-lg hover:bg-green-700 focus:outline-none focus:bg-green-700">Search</button>
+                            <!-- Adjusted the height to 12 -->
+                        </div>
+                    </form>
+                </div>
+
+                <!-- Right side: Navigation links -->
+                <ul class="flex space-x-4">
+                    <!-- <li><a href="{% url 'GreenCartEcom:contact' %}" class="pr-4 text-green-500/50 hover:text-green-600 text-lg font-semibold">Contact</a></li> -->
+                    <li><a href="{% url 'Auth:login' %}"
+                            class="pr-4 text-green-500/50 hover:text-green-600 text-lg font-semibold">SignIn</a></li>
+                </ul>
+            </nav>
+        </div>
     </div>
     <!-- Navigation bar for categories -->
     <nav class="bg-white shadow-lg px-4">
         <div class="flex justify-between h-14">
-          <div class="flex">
-            <div class="hidden sm:flex sm:space-x-8">
-              {% for category in navCategories %}
-              <a href="#" class="border-b-2 border-transparent text-gray-900 inline-flex items-center px-1 pt-1 text-sm font-medium hover:border-gray-300">{{ category.title }}</a>
-              {% endfor %}
+            <div class="flex">
+                <div class="hidden sm:flex sm:space-x-8">
+                    {% for category in navCategories %}
+                    <a href="#"
+                        class="border-b-2 border-transparent text-gray-900 inline-flex items-center px-1 pt-1 text-md font-medium hover:border-gray-300">{{ category.title }}</a>
+                    {% endfor %}
+                </div>
             </div>
-          </div>
         </div>
-      </nav>
+    </nav>
 
     <!-- Main content section with scrollbar -->
     <div class="flex flex-col flex-grow">
-        <div class="scroll-container flex-grow overflow-y-auto">
+        <div class="scroll-container flex-grow overflow-y-auto mt-14">
+            <!-- Add margin-top to prevent content from overlapping with the header -->
             {% block content %}
             {% endblock %}
         </div>
-        
+
         <!-- Footer section -->
-        <footer class="bg-gray-800 text-white py-4 flex-shrink-0">
+        <footer class="text-black py-4 flex-shrink-0">
             {% include 'footer.html' %}
         </footer>
     </div>
 
     <script src="{% static 'js/setTimeoutForAlert.js' %}"> </script>
 </body>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/README.md b/README.md
index 20128c9..95fb118 100644
--- a/README.md
+++ b/README.md
@@ -38,6 +38,7 @@ $ pip install -r requirements.txt
 
 ```bash
 $ .\venv\bin\activate # activate virtual env for Windows
+$ .\venv\Scripts\activate
 $  pip install -r requirements.txt
 ```
 
diff --git a/Shop/admin.py b/Shop/admin.py
index 245c230..c6df2be 100644
--- a/Shop/admin.py
+++ b/Shop/admin.py
@@ -1,7 +1,5 @@
 from django.contrib import admin
-
+from .models import Product,Reviews
 # Register your models here.
-
-from .models import Product
-
-admin.site.register(Product)
\ No newline at end of file
+admin.site.register(Product)
+admin.site.register(Reviews)
diff --git a/Shop/forms.py b/Shop/forms.py
new file mode 100644
index 0000000..6f21d4a
--- /dev/null
+++ b/Shop/forms.py
@@ -0,0 +1,23 @@
+# forms.py
+
+from django import forms
+from .models import Product
+
+class ProductForm(forms.ModelForm):
+    class Meta:
+        model = Product
+        fields = [
+            'name', 'description', 'price', 'expiry',
+            'discount_price', 'image', 'in_stock',
+            'rating'
+        ]
+        widgets = {
+            'name': forms.TextInput(attrs={'class': 'bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500', 'placeholder': 'Sun flower', 'required': True}),
+            'description': forms.Textarea(attrs={'class': 'bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500', 'placeholder': 'Description', 'rows': 3}),
+            'price': forms.NumberInput(attrs={'class': 'bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500', 'placeholder': '0.00', 'step': '0.01', 'required': True}),
+            'expiry': forms.NumberInput(attrs={'class': 'bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500', 'placeholder': '0', 'min': 0}),
+            'discount_price': forms.NumberInput(attrs={'class': 'bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500', 'placeholder': '0.00', 'step': '0.01'}),
+            'image': forms.ClearableFileInput(attrs={'class': 'bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500'}),
+            'in_stock': forms.CheckboxInput(attrs={'class': 'sr-only peer', 'id': 'in_stock_toggle'}),  # Hidden checkbox
+            'rating': forms.NumberInput(attrs={'class': 'bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500', 'placeholder': '0.0', 'step': '0.01', 'min': 0, 'max': 5}),
+        }
diff --git a/Shop/migrations/0002_product_expiry.py b/Shop/migrations/0002_product_expiry.py
new file mode 100644
index 0000000..f6c6817
--- /dev/null
+++ b/Shop/migrations/0002_product_expiry.py
@@ -0,0 +1,18 @@
+# Generated by Django 4.2.13 on 2024-06-30 05:26
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('Shop', '0001_initial'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='product',
+            name='expiry',
+            field=models.IntegerField(default=3),
+        ),
+    ]
diff --git a/Shop/migrations/0002_remove_product_created_at_remove_product_updated_at_and_more.py b/Shop/migrations/0002_remove_product_created_at_remove_product_updated_at_and_more.py
new file mode 100644
index 0000000..bbf1fff
--- /dev/null
+++ b/Shop/migrations/0002_remove_product_created_at_remove_product_updated_at_and_more.py
@@ -0,0 +1,36 @@
+# Generated by Django 4.2.13 on 2024-06-30 00:14
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('Shop', '0001_initial'),
+    ]
+
+    operations = [
+        migrations.RemoveField(
+            model_name='product',
+            name='created_at',
+        ),
+        migrations.RemoveField(
+            model_name='product',
+            name='updated_at',
+        ),
+        migrations.AddField(
+            model_name='product',
+            name='discount_price',
+            field=models.DecimalField(blank=True, decimal_places=2, max_digits=10, null=True),
+        ),
+        migrations.AddField(
+            model_name='product',
+            name='in_stock',
+            field=models.BooleanField(default=True),
+        ),
+        migrations.AddField(
+            model_name='product',
+            name='rating',
+            field=models.DecimalField(decimal_places=2, default=0.0, max_digits=3),
+        ),
+    ]
diff --git a/Shop/migrations/0003_product_image.py b/Shop/migrations/0003_product_image.py
new file mode 100644
index 0000000..2017ac3
--- /dev/null
+++ b/Shop/migrations/0003_product_image.py
@@ -0,0 +1,18 @@
+# Generated by Django 4.2.13 on 2024-06-30 00:51
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('Shop', '0002_remove_product_created_at_remove_product_updated_at_and_more'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='product',
+            name='image',
+            field=models.ImageField(default='default.jpg', upload_to='products/'),
+        ),
+    ]
diff --git a/Shop/migrations/0004_merge_0002_product_image_0003_product_image.py b/Shop/migrations/0004_merge_0002_product_image_0003_product_image.py
new file mode 100644
index 0000000..a602ce8
--- /dev/null
+++ b/Shop/migrations/0004_merge_0002_product_image_0003_product_image.py
@@ -0,0 +1,14 @@
+# Generated by Django 4.2.13 on 2024-07-01 19:00
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('Shop', '0002_product_image'),
+        ('Shop', '0003_product_image'),
+    ]
+
+    operations = [
+    ]
diff --git a/Shop/migrations/0005_product_created_at_product_updated_at_and_more.py b/Shop/migrations/0005_product_created_at_product_updated_at_and_more.py
new file mode 100644
index 0000000..4a40dcb
--- /dev/null
+++ b/Shop/migrations/0005_product_created_at_product_updated_at_and_more.py
@@ -0,0 +1,30 @@
+# Generated by Django 4.2.13 on 2024-07-01 19:04
+
+from django.db import migrations, models
+import django.utils.timezone
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('Shop', '0004_merge_0002_product_image_0003_product_image'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='product',
+            name='created_at',
+            field=models.DateTimeField(auto_now_add=True, default=django.utils.timezone.now),
+            preserve_default=False,
+        ),
+        migrations.AddField(
+            model_name='product',
+            name='updated_at',
+            field=models.DateTimeField(auto_now=True),
+        ),
+        migrations.AlterField(
+            model_name='product',
+            name='image',
+            field=models.ImageField(default='default.jpg', upload_to='products/'),
+        ),
+    ]
diff --git a/Shop/migrations/0006_merge_20240701_1928.py b/Shop/migrations/0006_merge_20240701_1928.py
new file mode 100644
index 0000000..10ec6ff
--- /dev/null
+++ b/Shop/migrations/0006_merge_20240701_1928.py
@@ -0,0 +1,14 @@
+# Generated by Django 4.2.13 on 2024-07-01 19:28
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('Shop', '0002_product_expiry'),
+        ('Shop', '0005_product_created_at_product_updated_at_and_more'),
+    ]
+
+    operations = [
+    ]
diff --git a/Shop/migrations/0007_product_user_id.py b/Shop/migrations/0007_product_user_id.py
new file mode 100644
index 0000000..683e394
--- /dev/null
+++ b/Shop/migrations/0007_product_user_id.py
@@ -0,0 +1,18 @@
+# Generated by Django 4.2.13 on 2024-07-02 17:24
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('Shop', '0006_merge_20240701_1928'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='product',
+            name='user_id',
+            field=models.CharField(default='1', max_length=10),
+        ),
+    ]
diff --git a/Shop/migrations/0008_reviews.py b/Shop/migrations/0008_reviews.py
new file mode 100644
index 0000000..56665cf
--- /dev/null
+++ b/Shop/migrations/0008_reviews.py
@@ -0,0 +1,23 @@
+# Generated by Django 4.2.13 on 2024-07-06 23:24
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('Shop', '0007_product_user_id'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='Reviews',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('name', models.CharField(max_length=100)),
+                ('review', models.TextField()),
+                ('product', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to='Shop.product')),
+            ],
+        ),
+    ]
diff --git a/Shop/migrations/0009_reviews_rating.py b/Shop/migrations/0009_reviews_rating.py
new file mode 100644
index 0000000..db92a7a
--- /dev/null
+++ b/Shop/migrations/0009_reviews_rating.py
@@ -0,0 +1,18 @@
+# Generated by Django 4.2.13 on 2024-07-06 23:48
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('Shop', '0008_reviews'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='reviews',
+            name='rating',
+            field=models.DecimalField(decimal_places=2, default=0.0, max_digits=3),
+        ),
+    ]
diff --git a/Shop/models.py b/Shop/models.py
index 369ef85..920758d 100644
--- a/Shop/models.py
+++ b/Shop/models.py
@@ -1,14 +1,28 @@
 from django.db import models
-
+import django.utils.timezone
 # Create your models here.
 
+
 class Product(models.Model):
     name = models.CharField(max_length=100)
     description = models.TextField()
     price = models.DecimalField(max_digits=10, decimal_places=2)
-    image = models.ImageField(default='default.jpg', upload_to='product_images') 
+    expiry = models.IntegerField(default=3)
+    discount_price = models.DecimalField(max_digits=10, decimal_places=2, null=True, blank=True)
+    image = models.ImageField(default='default.jpg', upload_to='products/')
+    in_stock = models.BooleanField(default=True)
+    rating = models.DecimalField(max_digits=3, decimal_places=2, default=0.0)
     created_at = models.DateTimeField(auto_now_add=True)
     updated_at = models.DateTimeField(auto_now=True)
+    user_id = models.CharField(max_length=10,default="1")
 
     def __str__(self):
-        return self.name
\ No newline at end of file
+        return self.name
+
+class Reviews(models.Model):
+    product = models.ForeignKey(Product, on_delete=models.CASCADE)
+    name = models.CharField(max_length=100)
+    review = models.TextField()
+    rating = models.DecimalField(max_digits=3, decimal_places=2, default=0.0)
+    def __str__(self):
+        return self.name
diff --git a/Shop/templates/Shop/base.html b/Shop/templates/Shop/base.html
index c8a034c..733d90a 100644
--- a/Shop/templates/Shop/base.html
+++ b/Shop/templates/Shop/base.html
@@ -8,10 +8,10 @@
     <link rel="stylesheet" href="{% static 'css/app.css' %}">
 </head>
 <body>
+{% include 'alert.html' %}
 {% include 'Shop/navbar.html' %}
 {% block content %}
 {% endblock %}
-<script src="{% static 'js/setTimeoutForAlert.js' %}"> </script>
 {% include 'footer.html' %}
 </body>
 </html>
\ No newline at end of file
diff --git a/Shop/templates/Shop/create_product.html b/Shop/templates/Shop/create_product.html
new file mode 100644
index 0000000..9382080
--- /dev/null
+++ b/Shop/templates/Shop/create_product.html
@@ -0,0 +1,69 @@
+<!-- create_product.html -->
+
+{% extends 'Shop/base.html' %}
+{% load static %}
+
+{% block content %}
+<div class="container mx-auto p-6">
+    <div class="bg-white shadow-lg rounded-lg p-6 flex">
+        <div class="w-1/2 pr-6">
+            <h1 class="text-3xl font-bold mb-5">Add New Product</h1>
+            <form method="post" enctype="multipart/form-data" class="space-y-4">
+                {% csrf_token %}
+                <div>
+                    <label for="id_name" class="block text-sm font-medium text-gray-700">Name</label>
+                    {{ form.name }}
+                </div>
+                <div>
+                    <label for="id_description" class="block text-sm font-medium text-gray-700">Description</label>
+                    {{ form.description }}
+                </div>
+                <div>
+                    <label for="id_price" class="block text-sm font-medium text-gray-700">Price</label>
+                    {{ form.price }}
+                </div>
+                <div>
+                    <label for="id_expiry" class="block text-sm font-medium text-gray-700">Expiry (in months)</label>
+                    {{ form.expiry }}
+                </div>
+                <div>
+                    <label for="id_discount_price" class="block text-sm font-medium text-gray-700">Discount Price</label>
+                    {{ form.discount_price }}
+                </div>
+                <div>
+                    <label for="id_image" class="block text-sm font-medium text-gray-700">Image</label>
+                    {{ form.image }}
+                </div>
+                <div>
+                    <label for="id_in_stock" class="block text-sm font-medium text-gray-700">In Stock</label>
+                    <label class="inline-flex items-center cursor-pointer">
+                        {{ form.in_stock }}
+                        <div class="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
+                    </label>
+                </div>
+                <div>
+                    <label for="id_rating" class="block text-sm font-medium text-gray-700">Rating</label>
+                    {{ form.rating }}
+                </div>
+                <button type="submit" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded mt-4">Save</button>
+            </form>
+        </div>
+        <div class="w-1/2 pl-6 flex items-center justify-center">
+            <div class="w-full h-full border-dashed border-4 border-gray-200 rounded-lg p-4 flex items-center justify-center">
+                <img id="product-image-preview" src="{% if form.instance.image %}{{ form.instance.image.url }}{% else %}{% static 'images/default.jpg' %}{% endif %}" alt="Product Image" class="max-w-full max-h-full object-cover rounded">
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+    document.getElementById('id_image').addEventListener('change', function(event) {
+        const [file] = event.target.files;
+        if (file) {
+            const preview = document.getElementById('product-image-preview');
+            preview.src = URL.createObjectURL(file);
+            preview.onload = () => URL.revokeObjectURL(preview.src);
+        }
+    });
+</script>
+{% endblock %}
diff --git a/Shop/templates/Shop/home.html b/Shop/templates/Shop/home.html
index 2d0f21b..cc2420c 100644
--- a/Shop/templates/Shop/home.html
+++ b/Shop/templates/Shop/home.html
@@ -2,22 +2,131 @@
 
 {% block title %}GreenCart | Home {% endblock %}
 {% block content %}
-    {% include 'alert.html' %}
-    <div class="container mx-auto px-6 md:px-0">
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-            {% for product in products %}
-                <div class="bg-white rounded-lg shadow-lg">
-                    <img src="{{ product.image.url }}" alt="{{ product.name }}" class="rounded-t-lg">
-                    <div class="p-6">
-                        <h2 class="text-2xl font-semibold text-gray-800">{{ product.name }}</h2>
-                        <p class="text-gray-700 mt-2">{{ product.description }}</p>
-                        <div class="flex items-center justify-between mt-4">
-                            <p class="text-xl text-gray-800">${{ product.price }}</p>
-                            <a href="{% url 'add_to_cart' product.id %}" class="px-3 py-1 bg-green-500 text-white font-semibold rounded">Add to Cart</a>
+    <div class="container mx-auto px-6">
+
+
+
+          <!-- Greeting Message -->
+        <h1 class="text-4xl font-bold text-green-800 mb-6 mt-6">{{ greeting }}, {{ user_name }}!</h1>
+
+        <!-- Search Bar -->
+        <form method="GET" class="flex flex-col md:flex-row items-center mb-6">
+            <div class="flex w-full md:max-w-3xl mb-4 md:mb-0">
+                <input type="text" name="query" placeholder="Search for any kind of plants, flowers & more" class="py-3 px-4 rounded-l-lg border border-green-400 focus:outline-none focus:border-green-600 w-full">
+                <button type="submit" class="py-2 px-4 bg-green-600 text-white rounded-r-lg hover:bg-green-700 focus:outline-none focus:bg-green-700">Search</button>
+            </div>
+        </form>
+
+
+
+        <div class="flex flex-col md:flex-row">
+            <div class="w-full md:w-1/5 md:pr-4 mb-6 md:mb-0">
+
+            <!-- Expiry Filter -->
+            <div class="bg-white p-4 rounded-lg shadow-lg mt-6">
+            <h3 class="text-lg font-semibold mb-4">Expiry Filter</h3>
+            <form method="GET" class="space-y-4">
+                <label for="sort_by" class="block text-sm font-medium text-gray-700">Sort products by days left:</label>
+                <select name="sort_by" id="sort_by" class="py-2 px-4 border border-gray-300 rounded-lg w-full  focus:outline-none focus:border-green-600" onchange="this.form.submit()">
+                    <option value="">None</option>
+                    <option value="expiry_desc">More Days</option>
+                    <option value="expiry_asc">Less Days</option>
+                </select>
+            </form>
+            </div>
+            
+                <!--  Price Filter -->
+                <div class="bg-white p-4 rounded-lg shadow-lg mt-6">
+                    <h3 class="text-lg font-semibold mb-4">Price Filter</h3>
+                    <form method="GET" class="space-y-4">
+                        <div>
+                            <label for="min_price" class="block text-sm font-medium text-gray-700">From</label>
+                            <input type="number" name="min_price" id="min_price" placeholder="Min Price" class="py-2 px-4 border border-gray-300 rounded-lg w-full focus:outline-none focus:border-green-600">
+                        </div>
+                        <div>
+                            <label for="max_price" class="block text-sm font-medium text-gray-700">To</label>
+                            <input type="number" name="max_price" id="max_price" placeholder="Max Price" class="py-2 px-4 border border-gray-300 rounded-lg w-full focus:outline-none focus:border-green-600">
+                        </div>
+                        <button type="submit" class="py-2 px-4 bg-green-600 text-white rounded-lg hover:bg-green-700 w-full focus:outline-none focus:bg-green-700">Search by Price</button>
+                    </form>
+
+                </div>
+                <!-- Rating Filter -->
+                <div class="bg-white p-4 rounded-lg shadow-lg mt-6">
+                    <h3 class="text-lg font-semibold mb-4">Rating Filter</h3>
+                    <form method="GET" class="space-y-4">
+                        <div>
+                            <label for="min_rating" class="block text-sm font-medium text-gray-700">Minimum Rating</label>
+                            <select name="min_rating" id="min_rating" class="py-2 px-4 border border-gray-300 rounded-lg w-full focus:outline-none focus:border-green-600">
+                                <option value="0">Any</option>
+                                <option value="1">1 Star</option>
+                                <option value="2">2 Stars</option>
+                                <option value="3">3 Stars</option>
+                                <option value="4">4 Stars</option>
+                                <option value="5">5 Stars</option>
+                            </select>
+                        </div>
+                        <button type="submit" class="py-2 px-4 bg-green-600 text-white rounded-lg hover:bg-green-700 w-full focus:outline-none focus:bg-green-700">Search by Rating</button>
+                    </form>
+                </div>
+
+         
+
+                
+            </div>
+
+            <!-- Main Content Area -->
+            <div class="w-full md:w-4/5">
+                <div class="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                    {% for product in products %}
+                    <div class="relative mx-auto my-6 w-full max-w-xs flex-col overflow-hidden rounded-lg bg-white shadow-md">
+                        <a class="relative flex h-60 overflow-hidden rounded-t-lg group" href="{% url 'Shop:product_detail' product.pk %}">
+                            <img class="object-cover w-full transform transition-transform duration-500 group-hover:scale-110" src="{{ product.image.url }}" alt="product image" />
+                            {% if product.expiry %}
+                            <span class="absolute top-0 left-0 m-2 rounded-full bg-red-600 px-2 text-center text-sm font-medium text-white">
+                                {{product.expiry}} days left
+                            </span>
+                            {% endif %}
+                        </a>
+                        <div class="mt-4 px-5 pb-5">
+                            <a href="{% url 'Shop:product_detail' product.pk %}">
+                                <h5 class="text-xl font-semibold tracking-tight h-16 text-slate-900">{{ product.name }}</h5>
+                            </a>
+                            <div class="mt-2 mb-5 flex items-center">
+                                <div class="flex items-center">
+                                    {% for i in "12345" %}
+                                        {% if product.rating|floatformat:1 >= i %}
+                                        <svg aria-hidden="true" class="h-5 w-5 text-yellow-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                                            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
+                                        </svg>
+                                        {% else %}
+                                        <svg aria-hidden="true" class="h-5 w-5 text-gray-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                                            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
+                                        </svg>
+                                        {% endif %}
+                                    {% endfor %}
+                                </div>
+                                <span class="ml-2 rounded bg-yellow-200 px-2.5 py-0.5 text-xs font-semibold">{{ product.rating }}</span>
+                            </div>
+                            <div class="flex items-center justify-between">
+                                <p>
+                                    <span class="text-3xl font-bold text-slate-900">${{ product.price }}</span>
+                                    {% if product.discount_price %}
+                                    <span class="text-sm text-slate-900 line-through">${{ product.discount_price }}</span>
+                                    {% endif %}
+                                </p>
+                                <a href="#" class="flex items-center rounded-md bg-slate-900 px-5 py-2 text-center text-md font-medium text-white hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-blue-300">
+                                    <svg xmlns="http://www.w3.org/2000/svg" class="mr-2 h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                                        <path stroke-linecap="round" stroke-linejoin="round" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
+                                    </svg>
+                                   Add
+                                </a>
+                            </div>
                         </div>
                     </div>
+                    {% endfor %}
                 </div>
-            {% endfor %}
+            </div>
         </div>
     </div>
 {% endblock %}
diff --git a/Shop/templates/Shop/navbar.html b/Shop/templates/Shop/navbar.html
index 137e805..dadcecd 100644
--- a/Shop/templates/Shop/navbar.html
+++ b/Shop/templates/Shop/navbar.html
@@ -4,27 +4,32 @@
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
+    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
 </head>
 <body>
-<nav class=" py-4 flex-wrap">
+<nav class="py-5 flex-wrap bg-green-100/75">
     <div class="container mx-auto px-6 md:px-0">
         <div class="flex items-center justify-between">
-            <!-- Branding -->
-            <a href="/" class="flex items-center mb-4 sm:mb-0 space-x-3 rtl:space-x-reverse">
-                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTvjOrvPK_t9Ci8yVypurJ8NdxjyGKtIoTqtw&s" class="h-8" alt="GreenCart Logo" />
-                <span class="self-center text-xl font-semibold whitespace-nowrap text-green-600">GreenCart</span>
-            </a>
+
+            <div class="flex items-center">
+                <a href="/shop" class="flex items-center mb-4 sm:mb-0 space-x-3 rtl:space-x-reverse">
+                    <img src="{% static 'images/logo.png' %}" class="h-8" alt="GreenCart Logo" />
+                </a>
+            </div>
+
             <!-- Navigation Links (Visible on larger screens) -->
             <div class="hidden md:flex items-center space-x-4 relative">
-                <a href="{% url 'AddToCart:cart' %}" class="text-green hover:text-gray-300">Cart</a>
-                <a href="{% url 'Shop:order' %}" class="text-green hover:text-gray-300">Orders</a>
-                <img id="avatar" class="w-10 h-10 rounded-full cursor-pointer hover:boder"  src="{{ user_profile_pic }}" alt="Rounded avatar">
-                <div id="dropdown" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-2 z-20">
+                <a href="{% url 'AddToCart:cart' %}" class="pr-4 text-green-500/50 hover:text-green-600 text-lg font-semibold">Cart</a>
+                <a href="{% url 'Shop:order' %}" class="pr-4 text-green-500/50 hover:text-green-600 text-lg font-semibold">Orders</a>
+                <a href="{% url 'Shop:product_list' %}" class="pr-4 text-green-500/50 hover:text-green-600 text-lg font-semibold">My Listings</a>
+                <a href="{% url 'Shop:about' %}" class="pr-4 text-green-500/50 hover:text-green-600 text-lg font-semibold">About Us</a>
+                <img id="avatar" class="w-10 h-10 rounded-full cursor-pointer hover:border"  src="{{ user_profile_pic }}" alt="Rounded avatar">
+                <div id="dropdown"  class="hidden absolute right-0 top-full mt-2 w-48 bg-white rounded-md shadow-lg py-2 z-20">
                     <a href="{% url 'Profile:get_user_details' %}" class="block px-4 py-2 text-green hover:bg-gray-100">Profile</a>
                     <a href="{% url 'Auth:logout' %}" class="block px-4 py-2 text-green hover:bg-gray-100">Logout</a>
                 </div>
             </div>
-            
+
             <script>
                 document.getElementById('avatar').addEventListener('click', function() {
                     const dropdown = document.getElementById('dropdown');
@@ -34,7 +39,7 @@
                         dropdown.classList.add('hidden');
                     }
                 });
-            
+
                 // Close the dropdown if the user clicks outside of it
                 document.addEventListener('click', function(event) {
                     const dropdown = document.getElementById('dropdown');
@@ -47,7 +52,5 @@
         </div>
     </div>
 </nav>
-
-
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/Shop/templates/Shop/product-detail.html b/Shop/templates/Shop/product-detail.html
new file mode 100644
index 0000000..ce5e4c1
--- /dev/null
+++ b/Shop/templates/Shop/product-detail.html
@@ -0,0 +1,135 @@
+{% extends 'Shop/base.html' %}
+{% load static %}
+{% block content %}
+    <div class="h-screen">
+        <div class="grid grid-cols-2 gap-2 h-full">
+            <div class="flex flex-col p-20 items-center h-full">
+                <div class="relative img-height">
+    <!-- Carousel Items -->
+    <div class="carousel flex overflow-hidden rounded-lg shadow-md h-full">
+      <img src="{{ product.image.url }}" alt="{{ product.name }}" class="w-full h-full object-cover">
+    </div>
+
+  </div>
+            </div>
+            <div class="h-full pt-5 overflow-y-scroll no-scrollbar">
+                <div class="flex flex-col w-full p-6">
+  <!-- Plant Name -->
+  <h1 class="text-4xl font-bold mb-4 text-gray-800">{{ product.name }}</h1>
+  <div class="mt-2 mb-5 flex items-center">
+                                <div class="flex items-center">
+                                    {% for i in "12345" %}
+                                        {% if rating|floatformat:1 >= i %}
+                                        <svg aria-hidden="true" class="h-5 w-5 text-yellow-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                                            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
+                                        </svg>
+                                        {% else %}
+                                        <svg aria-hidden="true" class="h-5 w-5 text-gray-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                                            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
+                                        </svg>
+                                        {% endif %}
+                                    {% endfor %}
+                                </div>
+                                <span class="ml-2 rounded bg-yellow-200 px-2.5 py-0.5 text-xs font-semibold">{{ rating }}</span>
+                            </div>
+  <!-- Price -->
+  <p class="text-2xl font-semibold text-green-700 mb-4">${{ product.price }}</p>
+
+  <!-- Description -->
+  <p class="text-gray-700 mb-6">
+    {{ product.description }}
+  </p>
+
+  <!-- Quantity Selector -->
+  <div class="flex items-center mb-4">
+    <label for="quantity" class="mr-3 text-gray-700">Quantity:</label>
+    <input type="number" id="quantity" name="quantity" min="1" value="1" class="w-16 p-2 border border-gray-300 rounded">
+  </div>
+
+  <!-- Add to Cart Button -->
+  <button class="bg-green-600 text-white py-3 px-6 rounded-lg shadow-md hover:bg-green-700 transition duration-300 mb-4">
+    Add to Cart
+  </button>
+
+  <!-- Expiration Notice -->
+  <p class="text-red-500 mb-6 font-semibold">
+    Hurry! Only {{ product.expiry }} days left until this plant is removed from the store.
+  </p>
+
+  <!-- Additional Information -->
+  <div class="mt-6">
+    <h2 class="text-2xl font-semibold mb-4 text-gray-800">Plant Care Instructions</h2>
+    <ul class="list-disc list-inside text-gray-700 mb-6">
+      <li>Water once a week</li>
+      <li>Place in indirect sunlight</li>
+      <li>Keep in a well-drained pot</li>
+    </ul>
+
+    <h2 class="text-2xl font-semibold mb-4 text-gray-800">Customer Reviews</h2>
+      {% if reviews %}
+          <div class="max-h-72 overflow-y-scroll no-scrollbar">
+          {% for review in reviews %}
+              <div class="bg-gray-100 p-4 rounded-lg shadow-inner mb-4">
+                  <p class="font-semibold flex justify-between">{{ review.name }} <span class="ml-2 rounded bg-yellow-200 px-2.5 py-0.5 text-xs font-semibold">{{ review.rating }}</span></p>
+                  <p class="text-gray-700">"{{ review.review }}"</p>
+              </div>
+          {% endfor %}
+              </div>
+
+      {% else %}
+          <div class="bg-gray-100 p-4 rounded-lg shadow-inner mb-4">
+            <p class="font-semibold">No reviews yet, feel free to leave one!</p>
+          </div>
+      {% endif %}
+
+      <div class="mt-6">
+      <h2 class="text-2xl font-semibold mb-4 text-gray-800">Add a Review</h2>
+      <form method="post" class="bg-white rounded-lg" action="{% url 'Shop:product_detail' product.id %}">
+    {% csrf_token %}
+    <div class="mb-4">
+        <label for="name" class="block text-gray-700 font-semibold mb-2">Your Name</label>
+        <input type="text" id="name" name="name" class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-600" required>
+    </div>
+    <div class="mb-4">
+        <label for="review" class="block text-gray-700 font-semibold mb-2">Your Review</label>
+        <textarea id="review" name="review" class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-600" rows="4" required></textarea>
+    </div>
+    <div class="mb-4">
+        <label for="rating" class="block text-gray-700 font-semibold mb-2">Rating (0.0 - 5.0)</label>
+        <input type="number" id="rating" name="rating" step="0.1" min="0.0" max="5.0" class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-600" required>
+    </div>
+    <button type="submit" class="bg-green-600 text-white py-3 px-6 rounded-lg shadow-md hover:bg-green-900 transition duration-300">
+        Submit Review
+    </button>
+</form>
+
+    </div>
+  </div>
+</div>
+
+            </div>
+        </div>
+    </div>
+    <script>
+        let currentIndex = 0;
+  const slides = document.querySelectorAll('.carousel img');
+
+  function showSlide(index) {
+    slides.forEach((slide, i) => {
+      slide.classList.toggle('hidden', i !== index);
+    });
+  }
+
+  function nextSlide() {
+    currentIndex = (currentIndex + 1) % slides.length;
+    showSlide(currentIndex);
+  }
+
+  function prevSlide() {
+    currentIndex = (currentIndex - 1 + slides.length) % slides.length;
+    showSlide(currentIndex);
+  }
+
+  showSlide(currentIndex)
+    </script>
+{% endblock %}
\ No newline at end of file
diff --git a/Shop/templates/Shop/product_detail.html b/Shop/templates/Shop/product_detail.html
new file mode 100644
index 0000000..2fa4466
--- /dev/null
+++ b/Shop/templates/Shop/product_detail.html
@@ -0,0 +1,31 @@
+{% extends 'Shop/base.html' %}
+
+{% block content %}
+<div class="container mx-auto my-10 p-5">
+    <div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
+        <div class="md:flex">
+            <div class="md:flex-shrink-0">
+                <img class="h-48 w-full object-cover md:h-full md:w-48" src="{{ product.image.url }}" alt="{{ product.name }}">
+            </div>
+            <div class="p-8">
+                <h3 class="text-lg font-bold text-gray-900">{{ product.name }}</h3>
+                <p class="mt-2 text-gray-600">{{ product.description }}</p>
+                <div class="mt-2 text-gray-600">
+                    <span class="text-3xl font-bold">${{ product.price }}</span>
+                    {% if product.discount_price %}
+                    <span class="text-sm line-through">${{ product.discount_price }}</span>
+                    {% endif %}
+                </div>
+                <div class="mt-4">
+                    <span class="text-yellow-500">Rating: {{ product.rating }}</span>
+                </div>
+                <div class="mt-6">
+                    <a href="#" class="flex items-center justify-center rounded-md bg-slate-900 px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-blue-300">
+                        Add to cart
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
diff --git a/Shop/templates/Shop/product_list.html b/Shop/templates/Shop/product_list.html
new file mode 100644
index 0000000..0fa1237
--- /dev/null
+++ b/Shop/templates/Shop/product_list.html
@@ -0,0 +1,39 @@
+{% extends 'Shop/base.html' %}
+
+{% block content %}
+    <div class="container mx-auto p-6">
+        <div class="w-100 flex justify-between items-center p-0">
+            <h1 class="text-3xl font-bold mb-5 p-0 m-0">Product List</h1>
+            <a href="{% url 'Shop:create_product' %}" class="block mt-4">
+                <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">Add New Product</button>
+            </a>
+        </div>
+        {% if products %}
+            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 mt-5">
+                {% for product in products %}
+                    <div class="border rounded-lg shadow-lg p-4 flex flex-col">
+                        <img src="{{ product.image.url }}" alt="{{ product.name }}"
+                             class="w-full h-48 object-cover rounded mb-4">
+                        <h2 class="text-xl font-bold mb-2">{{ product.name }}</h2>
+                        <p class="text-gray-700 mb-4">
+                            {{ product.description|slice:":60" }}{% if product.description|length > 60 %}
+                                ...{% endif %}</p>
+                        <div class="text-lg font-semibold mb-4">${{ product.price }}</div>
+                        <div class="flex space-x-2 mt-auto">
+                            <a class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded text-center">Edit</a>
+                            <a class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded text-center">Delete</a>
+                        </div>
+                    </div>
+                {% endfor %}
+            </div>
+        {% else %}
+            <div class="flex items-center justify-center h-full">
+                <div class="text-center">
+                    <h2 class="text-2xl font-bold mb-4">No Products Listed</h2>
+                    <p class="text-gray-700 mb-4">You haven't listed any products yet.</p>
+                    <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">Add New Product</button>
+                </div>
+            </div>
+        {% endif %}
+    </div>
+{% endblock %}
diff --git a/Shop/urls.py b/Shop/urls.py
index 3266e99..fe48d98 100644
--- a/Shop/urls.py
+++ b/Shop/urls.py
@@ -1,5 +1,5 @@
 from django.urls import path
-from .views import home
+from .views import about, home, product_detail, product_list, create_product
 app_name = 'Shop'
 
 urlpatterns = [
@@ -8,5 +8,9 @@
     path('checkout/',home, name='checkout'),
     path('order/',home, name='order'),
     path('profile/',home, name='profile'),
-
+    path('product-detail/<int:id>', product_detail, name='product_detail'),
+    path('mylistings/', product_list, name='product_list'),
+    path('about/', about, name='about'),
+    path('create_product/', create_product, name='create_product'),
 ]
+
diff --git a/Shop/views.py b/Shop/views.py
index aa4f606..522f8f3 100644
--- a/Shop/views.py
+++ b/Shop/views.py
@@ -1,7 +1,103 @@
-from django.shortcuts import render
+from datetime import datetime
+
 from django.contrib.auth.decorators import login_required
+from django.shortcuts import render, get_object_or_404, redirect
+from .models import Product, Reviews
+from .forms import ProductForm
+
 from userprofile.models import UserProfile
+
 # Create your views here.
 @login_required
 def home(request):
-    return render(request, 'Shop/home.html', {'title': 'GreenCart | Home','user_profile_pic': UserProfile.objects.get(user=request.user).profile_pic.url})
+    query = request.GET.get('query', '')
+    min_price = request.GET.get('min_price', 0)
+    max_price = request.GET.get('max_price', 1000000)
+    min_rating = request.GET.get('min_rating', 0)
+    sort_by = request.GET.get('sort_by', '')
+
+    products = Product.objects.all()
+
+    if query:
+        products = products.filter(name__icontains=query)
+
+    if min_price:
+        products = products.filter(price__gte=min_price)
+
+    if max_price:
+        products = products.filter(price__lte=max_price)
+    
+    if min_rating:
+        products = products.filter(rating__gte=min_rating)  
+        
+    if sort_by == 'expiry_asc':
+        products = products.order_by('expiry')
+    elif sort_by == 'expiry_desc':
+        products = products.order_by('-expiry')        
+
+    current_hour = datetime.now().hour
+    if current_hour < 12:
+        greeting = "Good morning"
+    elif 12 <= current_hour < 18:
+        greeting = "Good afternoon"
+    else:
+        greeting = "Good evening"
+
+    user_name = request.user.first_name if request.user.is_authenticated else "Guest"
+
+    return render(request, 'Shop/home.html', {'products': products,'greeting': greeting,'user_name': user_name,'title': 'GreenCart | Home','user_profile_pic': UserProfile.objects.get(user=request.user).profile_pic.url})
+
+@login_required
+def product_detail(request,id):
+    if request.method == 'POST':
+        product = get_object_or_404(Product, pk=id)
+        name = request.POST.get('name')
+        review = request.POST.get('review')
+        rating = request.POST.get('rating')
+        if name and review and rating:
+            Reviews.objects.create(product=product, name=name, review=review, rating=rating)
+            return redirect('Shop:product_detail', id=id)
+        else:
+            reviews = Reviews.objects.filter(product=product)
+            rating = 0
+            if reviews:
+                for review in reviews:
+                    rating += review.rating
+                rating = round(rating / len(reviews), 1)
+            return render(request, 'Shop/product-detail.html', {'product': product, 'reviews': reviews, 'rating': rating,
+                                                            'user_profile_pic': UserProfile.objects.get(
+                                                                user=request.user).profile_pic.url})
+    else:
+        product = get_object_or_404(Product, pk=id)
+        reviews = Reviews.objects.filter(product=product)
+        rating = 0
+        if reviews:
+            for review in reviews:
+                rating += review.rating
+            rating = round(rating / len(reviews), 1)
+        return render(request,'Shop/product-detail.html',{'product':product,'reviews':reviews,'rating':rating,'user_profile_pic': UserProfile.objects.get(user=request.user).profile_pic.url})
+
+@login_required
+def product_list(request):
+    user = request.user
+    products = Product.objects.filter(user_id=user.id)
+    return render(request, 'Shop/product_list.html', {'products': products,'user_profile_pic': UserProfile.objects.get(user=request.user).profile_pic.url})
+
+@login_required
+def about(request):
+    return render(request, 'about.html',{'user_profile_pic': UserProfile.objects.get(user=request.user).profile_pic.url} )
+
+@login_required
+def create_product(request):
+    if request.method == 'POST':
+        form = ProductForm(request.POST, request.FILES)
+        if form.is_valid():
+            product = form.save(commit=False)
+            product.user_id = request.user.id
+            product.created_at = datetime.now()
+            product.updated_at = datetime.now()
+            product.save()
+        return redirect('Shop:product_list')  # Redirect to the product list or another appropriate page
+    else:
+        form = ProductForm()
+    return render(request, 'Shop/create_product.html', {'form': form, 'user_profile_pic': UserProfile.objects.get(user=request.user).profile_pic.url})
\ No newline at end of file
diff --git a/Support/__init__.py b/Support/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/Support/admin.py b/Support/admin.py
new file mode 100644
index 0000000..8c38f3f
--- /dev/null
+++ b/Support/admin.py
@@ -0,0 +1,3 @@
+from django.contrib import admin
+
+# Register your models here.
diff --git a/Support/apps.py b/Support/apps.py
new file mode 100644
index 0000000..58e8fd3
--- /dev/null
+++ b/Support/apps.py
@@ -0,0 +1,6 @@
+from django.apps import AppConfig
+
+
+class SupportConfig(AppConfig):
+    default_auto_field = 'django.db.models.BigAutoField'
+    name = 'Support'
diff --git a/Support/forms.py b/Support/forms.py
new file mode 100644
index 0000000..078547d
--- /dev/null
+++ b/Support/forms.py
@@ -0,0 +1,9 @@
+# forms.py
+
+from django import forms
+from .models import Query
+
+class QueryForm(forms.ModelForm):
+    class Meta:
+        model = Query
+        fields = ['first_name', 'last_name', 'email', 'type', 'description', 'attachment']
diff --git a/Support/migrations/0001_initial.py b/Support/migrations/0001_initial.py
new file mode 100644
index 0000000..530bdd6
--- /dev/null
+++ b/Support/migrations/0001_initial.py
@@ -0,0 +1,26 @@
+# Generated by Django 5.0.6 on 2024-06-30 00:27
+
+import django.db.models.deletion
+from django.conf import settings
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    initial = True
+
+    dependencies = [
+        migrations.swappable_dependency(settings.AUTH_USER_MODEL),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='ChatMessage',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('message', models.TextField()),
+                ('timestamp', models.DateTimeField(auto_now_add=True)),
+                ('user', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to=settings.AUTH_USER_MODEL)),
+            ],
+        ),
+    ]
diff --git a/Support/migrations/0002_faq_complaint.py b/Support/migrations/0002_faq_complaint.py
new file mode 100644
index 0000000..92ea154
--- /dev/null
+++ b/Support/migrations/0002_faq_complaint.py
@@ -0,0 +1,35 @@
+# Generated by Django 5.0.6 on 2024-06-30 00:44
+
+import django.db.models.deletion
+from django.conf import settings
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('Support', '0001_initial'),
+        migrations.swappable_dependency(settings.AUTH_USER_MODEL),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='FAQ',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('question', models.CharField(max_length=255)),
+                ('answer', models.TextField()),
+            ],
+        ),
+        migrations.CreateModel(
+            name='Complaint',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('subject', models.CharField(max_length=255)),
+                ('description', models.TextField()),
+                ('timestamp', models.DateTimeField(auto_now_add=True)),
+                ('resolved', models.BooleanField(default=False)),
+                ('user', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to=settings.AUTH_USER_MODEL)),
+            ],
+        ),
+    ]
diff --git a/Support/migrations/0003_query_delete_chatmessage.py b/Support/migrations/0003_query_delete_chatmessage.py
new file mode 100644
index 0000000..79cf366
--- /dev/null
+++ b/Support/migrations/0003_query_delete_chatmessage.py
@@ -0,0 +1,29 @@
+# Generated by Django 5.0.6 on 2024-07-01 01:16
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('Support', '0002_faq_complaint'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='Query',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('first_name', models.CharField(max_length=100)),
+                ('last_name', models.CharField(max_length=100)),
+                ('email', models.EmailField(max_length=254)),
+                ('type', models.CharField(choices=[('order_status', 'Order Status'), ('order_delivery', 'Order Delivery'), ('other', 'Other')], max_length=20)),
+                ('description', models.TextField()),
+                ('attachment', models.FileField(blank=True, null=True, upload_to='query_attachments/')),
+                ('created_at', models.DateTimeField(auto_now_add=True)),
+            ],
+        ),
+        migrations.DeleteModel(
+            name='ChatMessage',
+        ),
+    ]
diff --git a/Support/migrations/__init__.py b/Support/migrations/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/Support/models.py b/Support/models.py
new file mode 100644
index 0000000..b84546a
--- /dev/null
+++ b/Support/models.py
@@ -0,0 +1,38 @@
+# Support/models.py
+
+from django.db import models
+from django.conf import settings
+
+class Query(models.Model):
+    first_name = models.CharField(max_length=100)
+    last_name = models.CharField(max_length=100)
+    email = models.EmailField()
+    query_type_choices = [
+        ('order_status', 'Order Status'),
+        ('order_delivery', 'Order Delivery'),
+        ('other', 'Other'),
+    ]
+    type = models.CharField(max_length=20, choices=query_type_choices)
+    description = models.TextField()
+    attachment = models.FileField(upload_to='query_attachments/', blank=True, null=True)
+    created_at = models.DateTimeField(auto_now_add=True)
+
+    def __str__(self):
+        return f"{self.first_name} {self.last_name} - {self.type}"
+
+class FAQ(models.Model):
+    question = models.CharField(max_length=255)
+    answer = models.TextField()
+
+    def __str__(self):
+        return self.question
+
+class Complaint(models.Model):
+    user = models.ForeignKey(settings.AUTH_USER_MODEL, on_delete=models.CASCADE)
+    subject = models.CharField(max_length=255)
+    description = models.TextField()
+    timestamp = models.DateTimeField(auto_now_add=True)
+    resolved = models.BooleanField(default=False)
+
+    def __str__(self):
+        return f'{self.user.username} - {self.subject}'
diff --git a/Support/static/support/css/styles.css b/Support/static/support/css/styles.css
new file mode 100644
index 0000000..07caaf1
--- /dev/null
+++ b/Support/static/support/css/styles.css
@@ -0,0 +1,225 @@
+
+
+.alert {
+    position: fixed;
+    top: 1rem;
+    right: 1rem;
+    z-index: 1000;
+}
+/* Support/static/support/css/styles.css */
+.container {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 20px;
+}
+
+.faq-heading {
+    text-align: center;
+    margin-bottom: 30px;
+    font-size: 2.5rem;
+    color: #4CAF50; /* Green color, adjust as needed */
+}
+
+.accordion {
+    border-radius: 10px;
+    overflow: hidden;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+.faq-item {
+    border-bottom: 1px solid #ddd;
+    overflow: hidden;
+}
+
+.faq-question {
+    background-color: #4CAF50; /* Green color, adjust as needed */
+    color: #fff;
+    padding: 15px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
+}
+
+.faq-question h3 {
+    margin: 0;
+    font-size: 1.5rem;
+}
+
+.accordion-btn {
+    background-color: transparent;
+    color: #fff;
+    border: none;
+    font-size: 1.5rem;
+    cursor: pointer;
+    transition: transform 0.3s;
+}
+
+.accordion-btn:hover {
+    transform: scale(1.1);
+}
+
+.faq-answer {
+    padding: 15px;
+    background-color: #E8F5E9; /* Light green background, adjust as needed */
+    display: none;
+    overflow: hidden;
+    transition: max-height 0.3s ease-out;
+}
+
+.faq-item.active .faq-answer {
+    display: block;
+    max-height: 500px; /* Adjust as needed */
+}
+
+.faq-answer p {
+    margin: 0;
+    font-size: 1.2rem;
+    line-height: 1.6;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .faq-heading {
+        font-size: 2rem;
+    }
+
+    .faq-question h3 {
+        font-size: 1.2rem;
+    }
+
+    .faq-answer p {
+        font-size: 1rem;
+    }
+}
+
+/* styles.css (or any custom CSS file) */
+
+/* Body styles */
+body {
+    font-family: 'Arial', sans-serif;
+    background-color: #f0f0f0; /* Light gray background */
+    padding: 20px;
+}
+
+/* Form container */
+.form-container {
+    max-width: 600px;
+    margin: 0 auto;
+    background-color: #ffffff;
+    padding: 30px;
+    border-radius: 10px;
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); /* Soft shadow effect */
+}
+
+/* Form title */
+.form-title {
+    font-size: 24px;
+    font-weight: bold;
+    color: #2e7d32; /* Dark green */
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+/* Form input fields */
+.form-input {
+    width: 100%;
+    padding: 10px;
+    margin-bottom: 15px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    font-size: 16px;
+}
+
+/* Dropdown select */
+.form-dropdown {
+    width: 100%;
+    padding: 10px;
+    margin-bottom: 15px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    font-size: 16px;
+    background-color: #f9fbe7; /* Light yellow */
+}
+
+/* Description textarea */
+.form-textarea {
+    width: 100%;
+    padding: 10px;
+    margin-bottom: 15px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    font-size: 16px;
+}
+
+/* Submit button */
+.form-submit {
+    width: 100%;
+    padding: 10px;
+    background-color: #2e7d32; /* Dark green */
+    color: #ffffff;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 18px;
+}
+
+/* Submit button hover effect */
+.form-submit:hover {
+    background-color: #4caf50; /* Light green */
+}
+
+/* Attach file input */
+.form-file {
+    width: 100%;
+    padding: 10px;
+    margin-bottom: 15px;
+    font-size: 16px;
+}
+.banner {
+    background-color: #4CAF50;
+    color: white;
+    padding: 60px 0;
+    text-align: center;
+}
+
+.banner-content {
+    max-width: 600px;
+    margin: 0 auto;
+}
+
+.banner h1 {
+    font-size: 2.5em;
+    margin-bottom: 20px;
+}
+
+.banner p {
+    font-size: 1.2em;
+    margin-bottom: 20px;
+}
+
+.ticket {
+    font-size: 24px;
+    margin-top: 20px;
+    background-color: white;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    display: inline-block;
+    color: #4CAF50;
+}
+
+.ticket-label {
+    color: #4CAF50;
+    font-size: 1.2em;
+    margin-bottom: 10px;
+}
+
+.ticket-number {
+    font-size: 1.5em;
+}
+
+.plant-image {
+    max-width: 100px;
+    margin-top: 30px;
+}
diff --git a/Support/static/support/js/setTimeoutForAlert.js b/Support/static/support/js/setTimeoutForAlert.js
new file mode 100644
index 0000000..cf444ae
--- /dev/null
+++ b/Support/static/support/js/setTimeoutForAlert.js
@@ -0,0 +1,9 @@
+console.log("setTimeoutForAlert.js loaded");
+// Your setTimeoutForAlert.js code here
+
+setTimeout(() => {
+        const alert = document.getElementById('alert');
+        if (alert) {
+            alert.style.display = 'none';
+        }
+    }, 1000);
\ No newline at end of file
diff --git a/Support/templates/support/base.html b/Support/templates/support/base.html
new file mode 100644
index 0000000..43dc609
--- /dev/null
+++ b/Support/templates/support/base.html
@@ -0,0 +1,18 @@
+{% load static %}
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>{% block title %}{% endblock %}</title>
+    <script src="https://cdn.tailwindcss.com/"></script>
+    <link rel="stylesheet" href="{% static 'support/css/styles.css' %}">
+    {% block extra_css %}{% endblock %}
+</head>
+<body>
+{% include 'support/navbar.html' %}
+{% block content %}{% endblock %}
+<script src="{% static 'support/js/setTimeoutForAlert.js' %}"></script>
+{% block scripts %}{% endblock %}
+{% include 'footer.html' %}
+</body>
+</html>
diff --git a/Support/templates/support/chat.html b/Support/templates/support/chat.html
new file mode 100644
index 0000000..da24acf
--- /dev/null
+++ b/Support/templates/support/chat.html
@@ -0,0 +1,37 @@
+<!-- Support/templates/support/chat.html -->
+
+{% extends 'support/base.html' %}
+{% block content %}
+<div class="container">
+    <h1>Chat Support</h1>
+    <div id="chat-messages">
+        {% for message in messages %}
+        <div class="message">
+            <p><strong>{{ message.user.username }}</strong>: {{ message.message }}</p>
+            <small>{{ message.timestamp|date:"M d, Y H:i" }}</small>
+        </div>
+        {% empty %}
+        <p>No messages yet.</p>
+        {% endfor %}
+    </div>
+    <form id="chat-form" method="post" action="{% url 'support:send_message' %}">
+        {% csrf_token %}
+        <input type="text" id="message-input" name="message" placeholder="Type your message here..." required>
+        <button type="submit">Send</button>
+    </form>
+</div>
+<script>
+    let chatForm = document.getElementById('chat-form');
+    chatForm.addEventListener('submit', function(event) {
+        event.preventDefault();
+        let messageInput = document.getElementById('message-input');
+        let messageText = messageInput.value.trim();
+        if (messageText !== '') {
+            let messageHtml = `<div class="message"><p><strong>You</strong>: ${messageText}</p><small>Just now</small></div>`;
+            document.getElementById('chat-messages').insertAdjacentHTML('beforeend', messageHtml);
+            chatForm.reset();
+            document.getElementById('chat-messages').scrollTop = document.getElementById('chat-messages').scrollHeight;
+        }
+    });
+</script>
+{% endblock %}
diff --git a/Support/templates/support/complaint_thanks.html b/Support/templates/support/complaint_thanks.html
new file mode 100644
index 0000000..fc5b7ed
--- /dev/null
+++ b/Support/templates/support/complaint_thanks.html
@@ -0,0 +1,16 @@
+<!-- Support/templates/support/raise_complaint.html -->
+
+{% extends 'support/base.html' %}
+{% block content %}
+<div class="container">
+    <h1>Raise a Complaint</h1>
+    <form id="complaint-form" method="post" action="{% url 'support:raise_complaint' %}">
+        {% csrf_token %}
+        <label for="subject">Subject:</label><br>
+        <input type="text" id="subject" name="subject" class="complaint-input" required><br><br>
+        <label for="description">Description:</label><br>
+        <textarea id="description" name="description" class="complaint-input" rows="4" required></textarea><br><br>
+        <button type="submit" class="complaint-submit">Submit</button>
+    </form>
+</div>
+{% endblock %}
diff --git a/Support/templates/support/faq.html b/Support/templates/support/faq.html
new file mode 100644
index 0000000..ef568b5
--- /dev/null
+++ b/Support/templates/support/faq.html
@@ -0,0 +1,45 @@
+<!-- Support/templates/support/faq.html -->
+
+{% extends 'support/base.html' %}
+{% load static %}
+{% block content %}
+<div class="container">
+    <h1 class="faq-heading">Frequently Asked Questions</h1>
+    <div class="accordion">
+        {% for faq in faqs %}
+        <div class="faq-item">
+            <div class="faq-question">
+                <h3>{{ faq.question }}</h3>
+                <button class="accordion-btn">+</button>
+            </div>
+            <div class="faq-answer">
+                <p>{{ faq.answer }}</p>
+            </div>
+        </div>
+        {% empty %}
+        <p>No FAQs available.</p>
+        {% endfor %}
+    </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+    document.addEventListener("DOMContentLoaded", function() {
+        const accordionBtns = document.querySelectorAll('.accordion-btn');
+
+        accordionBtns.forEach(btn => {
+            btn.addEventListener('click', function() {
+                const faqItem = this.parentElement.parentElement;
+                faqItem.classList.toggle('active');
+                const icon = this.innerText;
+                this.innerText = icon === '+' ? '-' : '+';
+            });
+        });
+    });
+</script>
+{% endblock %}
+
+{% block extra_css %}
+<link rel="stylesheet" href="{% static 'Support/static/support/css/styles.css' %}">
+{% endblock %}
diff --git a/Support/templates/support/home.html b/Support/templates/support/home.html
new file mode 100644
index 0000000..88c4bb1
--- /dev/null
+++ b/Support/templates/support/home.html
@@ -0,0 +1,23 @@
+{% extends 'support/base.html' %}
+
+{% block title %}GreenCart | Home {% endblock %}
+{% block content %}
+    {% include 'alert.html' %}
+    <div class="container mx-auto px-6 md:px-0">
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {% for product in products %}
+                <div class="bg-white rounded-lg shadow-lg">
+                    <img src="{{ product.image.url }}" alt="{{ product.name }}" class="rounded-t-lg">
+                    <div class="p-6">
+                        <h2 class="text-2xl font-semibold text-gray-800">{{ product.name }}</h2>
+                        <p class="text-gray-700 mt-2">{{ product.description }}</p>
+                        <div class="flex items-center justify-between mt-4">
+                            <p class="text-xl text-gray-800">${{ product.price }}</p>
+                            <a href="{% url 'add_to_cart' product.id %}" class="px-3 py-1 bg-green-500 text-white font-semibold rounded">Add to Cart</a>
+                        </div>
+                    </div>
+                </div>
+            {% endfor %}
+        </div>
+    </div>
+{% endblock %}
diff --git a/Support/templates/support/navbar.html b/Support/templates/support/navbar.html
new file mode 100644
index 0000000..0c8d80b
--- /dev/null
+++ b/Support/templates/support/navbar.html
@@ -0,0 +1,50 @@
+{% load static %}
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+</head>
+<body>
+<nav class=" py-4 flex-wrap">
+    <div class="container mx-auto px-6 md:px-0">
+        <div class="flex items-center justify-between">
+            <a href="/" class="flex items-center mb-4 sm:mb-0 space-x-3 rtl:space-x-reverse">
+                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTvjOrvPK_t9Ci8yVypurJ8NdxjyGKtIoTqtw&s" class="h-8" alt="GreenCart Logo" />
+                <span class="self-center text-xl font-semibold whitespace-nowrap text-green-600">GreenCart</span>
+            </a>
+            <div class="hidden md:flex items-center space-x-4 relative">
+                <a href="{% url 'Shop:cart' %}" class="text-green hover:text-gray-300">Cart</a>
+                <a href="{% url 'Shop:order' %}" class="text-green hover:text-gray-300">Orders</a>
+                <img id="avatar" class="w-10 h-10 rounded-full cursor-pointer hover:boder"  src="{% static 'images/Yash.png' %}" alt="Rounded avatar">
+                <div id="dropdown" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-2 z-20">
+                    <a href="{% url 'Profile:get_user_details' %}" class="block px-4 py-2 text-green hover:bg-gray-100">Profile</a>
+                    <a href="{% url 'Auth:logout' %}" class="block px-4 py-2 text-green hover:bg-gray-100">Logout</a>
+                </div>
+            </div>
+            
+            <script>
+                document.getElementById('avatar').addEventListener('click', function() {
+                    const dropdown = document.getElementById('dropdown');
+                    if (dropdown.classList.contains('hidden')) {
+                        dropdown.classList.remove('hidden');
+                    } else {
+                        dropdown.classList.add('hidden');
+                    }
+                });
+            
+                document.addEventListener('click', function(event) {
+                    const dropdown = document.getElementById('dropdown');
+                    const avatar = document.getElementById('avatar');
+                    if (!dropdown.contains(event.target) && !avatar.contains(event.target)) {
+                        dropdown.classList.add('hidden');
+                    }
+                });
+            </script>
+        </div>
+    </div>
+</nav>
+
+
+</body>
+</html>
\ No newline at end of file
diff --git a/Support/templates/support/query_form.html b/Support/templates/support/query_form.html
new file mode 100644
index 0000000..a6c77c0
--- /dev/null
+++ b/Support/templates/support/query_form.html
@@ -0,0 +1,30 @@
+<!-- query_form.html -->
+
+{% extends 'support/base.html' %}
+{% load static %}
+
+{% block extra_css %}
+<link rel="stylesheet" href="{% static 'Support/static/support/css/styles.css' %}">
+{% endblock %}
+
+{% block content %}
+<div class="form-container">
+    <h1 class="form-title">Submit Query</h1>
+    <form method="post" enctype="multipart/form-data">
+        {% csrf_token %}
+        <!-- Input fields with appropriate class names -->
+        <input type="text" name="first_name" class="form-input" placeholder="First Name" required>
+        <input type="text" name="last_name" class="form-input" placeholder="Last Name" required>
+        <input type="email" name="email" class="form-input" placeholder="Email" required>
+        <select name="type" class="form-dropdown" required>
+            <option value="" disabled selected>Select Type</option>
+            <option value="order_status">Order Status</option>
+            <option value="order_delivery">Order Delivery</option>
+            <option value="other">Other</option>
+        </select>
+        <textarea name="description" class="form-textarea" placeholder="Description" rows="5" required></textarea>
+        <input type="file" name="attachment" class="form-file">
+        <button type="submit" class="form-submit">Submit</button>
+    </form>
+</div>
+{% endblock %}
diff --git a/Support/templates/support/query_success.html b/Support/templates/support/query_success.html
new file mode 100644
index 0000000..0e35929
--- /dev/null
+++ b/Support/templates/support/query_success.html
@@ -0,0 +1,22 @@
+{% extends 'support/base.html' %}
+{% load static %}
+{% block title %}
+    Query Submitted Successfully
+{% endblock %}
+
+
+{% block content %}
+    <div class="banner">
+        <div class="banner-content">
+            <h1>Query Submitted Successfully</h1>
+            <p>Your query has been successfully submitted. A support ticket has been raised.</p>
+            <div class="ticket">
+                <p>Your support ticket number:</p>
+                <p><strong>{{ ticket_number }}</strong></p> <!-- This will display the generated ticket number -->
+            </div>
+        </div>
+    </div>
+{% endblock %}
+{% block extra_css %}
+    <link rel="stylesheet" href="{% static 'Support/static/support/css/styles.css' %}">
+{% endblock %}
diff --git a/Support/templates/support/raise_complaint.html b/Support/templates/support/raise_complaint.html
new file mode 100644
index 0000000..5f0f718
--- /dev/null
+++ b/Support/templates/support/raise_complaint.html
@@ -0,0 +1,16 @@
+<!-- Support/templates/support/raise_complaint.html -->
+
+{% extends 'support/base.html' %}
+{% block content %}
+<div class="container">
+    <h1>Raise a Complaint</h1>
+    <form method="post" action="{% url 'support:raise_complaint' %}">
+        {% csrf_token %}
+        <label for="subject">Subject:</label><br>
+        <input type="text" id="subject" name="subject" required><br><br>
+        <label for="description">Description:</label><br>
+        <textarea id="description" name="description" rows="4" required></textarea><br><br>
+        <button type="submit">Submit</button>
+    </form>
+</div>
+{% endblock %}
diff --git a/Support/tests.py b/Support/tests.py
new file mode 100644
index 0000000..7ce503c
--- /dev/null
+++ b/Support/tests.py
@@ -0,0 +1,3 @@
+from django.test import TestCase
+
+# Create your tests here.
diff --git a/Support/urls.py b/Support/urls.py
new file mode 100644
index 0000000..3b7f316
--- /dev/null
+++ b/Support/urls.py
@@ -0,0 +1,16 @@
+# Support/urls.py
+
+from django.urls import path
+from . import views
+from django.views.generic import TemplateView
+
+app_name = 'support'
+
+urlpatterns = [
+    path('submit-query/', views.query_form, name='submit_query'),
+    path('query-success/', TemplateView.as_view(template_name='support/query_success.html'), name='query_success'),
+    # path('send-message/', views.send_message, name='send_message'),
+    path('faq/', views.faq, name='faq'),
+    path('raise-complaint/', views.raise_complaint, name='raise_complaint'),
+    path('complaint-thanks/', views.complaint_thanks, name='complaint_thanks'),
+]
diff --git a/Support/views.py b/Support/views.py
new file mode 100644
index 0000000..d3a553c
--- /dev/null
+++ b/Support/views.py
@@ -0,0 +1,58 @@
+# Support/views.py
+import random
+from django.shortcuts import render, redirect
+from django.contrib.auth.decorators import login_required
+from .models import Query, FAQ, Complaint
+from django.utils import timezone
+from django.shortcuts import render, redirect
+from .forms import QueryForm
+from django.core.mail import send_mail
+from django.conf import settings
+from django.views.generic import TemplateView  # Ensure TemplateView import is correct
+from django.urls import reverse_lazy
+
+@login_required
+def query_form(request):
+    if request.method == 'POST':
+        form = QueryForm(request.POST, request.FILES)
+        if form.is_valid():
+            query = form.save()
+
+            subject = f"New Query: {query.type} - {query.first_name} {query.last_name}"
+            message = (
+                f"A new query has been submitted:\n\n"
+                f"Type: {query.get_type_display()}\n"
+                f"Name: {query.first_name} {query.last_name}\n"
+                f"Email: {query.email}\n"
+                f"Description: {query.description}"
+            )
+            from_email = settings.DEFAULT_FROM_EMAIL
+            recipient_list = ['support@greencart.com']
+            ticket_number = random.randint(10000, 99999)
+            send_mail(subject, message, from_email, recipient_list, fail_silently=True)
+
+            return render(request, 'support/query_success.html', {'ticket_number': ticket_number})
+    else:
+        form = QueryForm()
+
+    return render(request, 'support/query_form.html', {'form': form})
+
+
+@login_required
+def faq(request):
+    faqs = FAQ.objects.all()
+    return render(request, 'support/faq.html', {'faqs': faqs})
+
+@login_required
+def raise_complaint(request):
+    if request.method == 'POST':
+        subject = request.POST.get('subject', '')
+        description = request.POST.get('description', '')
+        if subject and description:
+            Complaint.objects.create(user=request.user, subject=subject, description=description)
+            return redirect('support:complaint_thanks')
+    return render(request, 'support/raise_complaint.html')
+
+@login_required
+def complaint_thanks(request):
+    return render(request, 'support/complaint_thanks.html')
diff --git a/data.json b/data.json
index 6c84d71..38c11f6 100644
--- a/data.json
+++ b/data.json
@@ -26,45 +26,172 @@
         }
     },
     {
-        "model":"GreenCartEcom.navCategories",
-        "pk":1,
-        "fields":{
-            "title":"Gardening"
+        "model": "GreenCartEcom.navCategories",
+        "pk": 1,
+        "fields": {
+            "title": "Gardening"
+        }
+    },
+    {
+        "model": "GreenCartEcom.navCategories",
+        "pk": 2,
+        "fields": {
+            "title": "Plants"
+        }
+    },
+    {
+        "model": "GreenCartEcom.navCategories",
+        "pk": 2,
+        "fields": {
+            "title": "Seeds"
+        }
+    },
+    {
+        "model": "GreenCartEcom.navCategories",
+        "pk": 2,
+        "fields": {
+            "title": "Fertilizers"
+        }
+    },
+    {
+        "model": "GreenCartEcom.navCategories",
+        "pk": 2,
+        "fields": {
+            "title": "Pots"
+        }
+    },
+    {
+        "model": "GreenCartEcom.navCategories",
+        "pk": 2,
+        "fields": {
+            "title": "Accessories"
         }
     },
     {
-        "model":"GreenCartEcom.navCategories",
-        "pk":2,
-        "fields":{
-            "title":"Plants"
+        "model": "Shop.Product",
+        "pk": 1,
+        "fields": {
+            "name": "Anthurium (Pink) - Plant",
+            "description": "Anthurium is a genus of about 1,000 species of flowering plants, native to the Americas. These plants are known for their bright flowers and can be used as a decorative indoor plant.",
+            "price": 29.00,
+            "discount_price": 19.00,
+            "image": "products/anthurium_pink.jpg",
+            "in_stock": true,
+            "rating": 4.0,
+            "created_at": "2024-07-01T00:00:00Z",
+            "updated_at": "2024-07-01T00:00:00Z"
         }
     },
     {
-        "model":"GreenCartEcom.navCategories",
-        "pk":2,
-        "fields":{
-            "title":"Seeds"
+        "model": "Shop.Product",
+        "pk": 2,
+        "fields": {
+            "name": "Areca Palm (Small) - Plant",
+            "description": "Areca Palm is a popular houseplant and also known as Butterfly Palm. It is one of the most widely used palms for bright interiors. What makes it special: NASA recommended an air purifier plant. Popular indoor house plant. Best plant for AC rooms, office desk.",
+            "price": 50.00,
+            "discount_price": 30.00,
+            "image": "products/areca_palm_small.webp",
+            "in_stock": true,
+            "rating": 5.0,
+            "created_at": "2024-07-01T00:00:00Z",
+            "updated_at": "2024-07-01T00:00:00Z",
+            "user_id": "2"
         }
     },
     {
-        "model":"GreenCartEcom.navCategories",
-        "pk":2,
-        "fields":{
-            "title":"Fertilizers"
+        "model": "Shop.Product",
+        "pk": 3,
+        "fields": {
+            "name": "Top 5 air purifier and oxygen enriching plant pack",
+            "description": "This plant pack includes the top 5 plants recommended by NASA for air purification and oxygen enrichment. Perfect for any home or office.",
+            "price": 80.00,
+            "discount_price": 70.00,
+            "image": "products/air_purifier_pack.jpg",
+            "in_stock": true,
+            "rating": 3.0,
+            "created_at": "2024-07-01T00:00:00Z",
+            "updated_at": "2024-07-01T00:00:00Z",
+            "user_id": "2"
         }
     },
     {
-        "model":"GreenCartEcom.navCategories",
-        "pk":2,
-        "fields":{
-            "title":"Pots"
+        "model": "Shop.Product",
+        "pk": 4,
+        "fields": {
+            "name": "Sansevieria trifasciata Hahnii, Snake Plant - Plant",
+            "description": "Sansevieria trifasciata Hahnii is a popular houseplant with dark green leaves marked with a pattern of wavy cross stripes in a lighter color. What makes it special: NASA recommended an air purifier plant. Best plant for AC rooms, office desk. Zero maintenance plant. Best indoor plant for low light condition.",
+            "price": 26.00,
+            "discount_price": 16.00,
+            "image": "products/snake_plant.jpg",
+            "in_stock": true,
+            "rating": 5.0,
+            "created_at": "2024-07-01T00:00:00Z",
+            "updated_at": "2024-07-01T00:00:00Z",
+            "user_id": "2"
         }
     },
     {
-        "model":"GreenCartEcom.navCategories",
-        "pk":2,
-        "fields":{
-            "title":"Accessories"
+        "model": "Shop.Product",
+        "pk": 5,
+        "fields": {
+            "name": "Aptenia, Heartleaf Ice - Succulent Plant",
+            "description": "Aptenia is a genus of succulent plants with heart-shaped leaves and bright flowers. These plants are perfect for indoor decoration and require minimal care.",
+            "price": 30.00,
+            "discount_price": 20.00,
+            "image": "products/aptenia_heartleaf.jpg",
+            "in_stock": true,
+            "rating": 5.0,
+            "created_at": "2024-07-01T00:00:00Z",
+            "updated_at": "2024-07-01T00:00:00Z",
+            "user_id": "2"
+        }
+    },
+    {
+        "model": "Shop.Product",
+        "pk": 6,
+        "fields": {
+            "name": "Rose (Red) - Plant",
+            "description": "Red Roses are a symbol of love and beauty. This plant can be grown indoors and is known for its vibrant red flowers.",
+            "price": 21.00,
+            "discount_price": 11.00,
+            "image": "products/rose_red.webp",
+            "in_stock": true,
+            "rating": 2.0,
+            "created_at": "2024-07-01T00:00:00Z",
+            "updated_at": "2024-07-01T00:00:00Z",
+            "user_id": "2"
+        }
+    },
+    {
+        "model": "Shop.Product",
+        "pk": 7,
+        "fields": {
+            "name": "Hydrangea macrophylla (Any Color) - Plant",
+            "description": "Hydrangea macrophylla is known for its large and colorful flower heads. These plants are perfect for indoor decoration and can come in various colors.",
+            "price": 17.00,
+            "discount_price": 14.00,
+            "image": "products/hydrangea_macrophylla.jpg",
+            "in_stock": true,
+            "rating": 3.0,
+            "created_at": "2024-07-01T00:00:00Z",
+            "updated_at": "2024-07-01T00:00:00Z",
+            "user_id": "2"
+        }
+    },
+    {
+        "model": "Shop.Product",
+        "pk": 8,
+        "fields": {
+            "name": "Set of 2 Bonsai Looking Grafted Adeniums",
+            "description": "This set includes two Bonsai looking Adenium plants. These plants are known for their unique appearance and are perfect for indoor decoration.",
+            "price": 26.00,
+            "discount_price": 22.00,
+            "image": "products/bonsai_adenium.jpg",
+            "in_stock": true,
+            "rating": 4.0,
+            "created_at": "2024-07-01T00:00:00Z",
+            "updated_at": "2024-07-01T00:00:00Z",
+            "user_id": "2"
         }
     }
-]
+]
\ No newline at end of file
diff --git a/media/default.jpg b/media/default.jpg
deleted file mode 100644
index 38f286f..0000000
Binary files a/media/default.jpg and /dev/null differ
diff --git a/media/product_images/Ficus Bonsai.jpg b/media/product_images/Ficus Bonsai.jpg
new file mode 100644
index 0000000..174d376
Binary files /dev/null and b/media/product_images/Ficus Bonsai.jpg differ
diff --git a/media/product_images/Ficus_Bonsai.jpg b/media/product_images/Ficus_Bonsai.jpg
new file mode 100644
index 0000000..174d376
Binary files /dev/null and b/media/product_images/Ficus_Bonsai.jpg differ
diff --git a/media/product_images/GardenToolKit.jpg b/media/product_images/GardenToolKit.jpg
new file mode 100644
index 0000000..8b26291
Binary files /dev/null and b/media/product_images/GardenToolKit.jpg differ
diff --git a/media/product_images/Rose_pot.jpg b/media/product_images/Rose_pot.jpg
new file mode 100644
index 0000000..de556a3
Binary files /dev/null and b/media/product_images/Rose_pot.jpg differ
diff --git a/media/product_images/clay_aggregrate.jpg b/media/product_images/clay_aggregrate.jpg
new file mode 100644
index 0000000..c9afe64
Binary files /dev/null and b/media/product_images/clay_aggregrate.jpg differ
diff --git a/media/product_images/rhoeo-plant.jpg b/media/product_images/rhoeo-plant.jpg
new file mode 100644
index 0000000..4e442e2
Binary files /dev/null and b/media/product_images/rhoeo-plant.jpg differ
diff --git a/media/products/air_purifier_pack.jpg b/media/products/air_purifier_pack.jpg
new file mode 100644
index 0000000..aeec2cd
Binary files /dev/null and b/media/products/air_purifier_pack.jpg differ
diff --git a/media/products/air_purifier_pack_O8ecM9f.jpg b/media/products/air_purifier_pack_O8ecM9f.jpg
new file mode 100644
index 0000000..aeec2cd
Binary files /dev/null and b/media/products/air_purifier_pack_O8ecM9f.jpg differ
diff --git a/media/products/anthurium_pink.jpg b/media/products/anthurium_pink.jpg
new file mode 100644
index 0000000..78dc0f9
Binary files /dev/null and b/media/products/anthurium_pink.jpg differ
diff --git a/media/products/anthurium_pink_ZA2GXV7.jpg b/media/products/anthurium_pink_ZA2GXV7.jpg
new file mode 100644
index 0000000..78dc0f9
Binary files /dev/null and b/media/products/anthurium_pink_ZA2GXV7.jpg differ
diff --git a/media/products/anthurium_pink_uTLKkRH.jpg b/media/products/anthurium_pink_uTLKkRH.jpg
new file mode 100644
index 0000000..78dc0f9
Binary files /dev/null and b/media/products/anthurium_pink_uTLKkRH.jpg differ
diff --git a/media/products/aptenia_heartleaf.jpg b/media/products/aptenia_heartleaf.jpg
new file mode 100644
index 0000000..ba766cc
Binary files /dev/null and b/media/products/aptenia_heartleaf.jpg differ
diff --git a/media/products/aptenia_heartleaf_yfbmJA1.jpg b/media/products/aptenia_heartleaf_yfbmJA1.jpg
new file mode 100644
index 0000000..ba766cc
Binary files /dev/null and b/media/products/aptenia_heartleaf_yfbmJA1.jpg differ
diff --git a/media/products/areca_palm_small.webp b/media/products/areca_palm_small.webp
new file mode 100644
index 0000000..81ae7f9
Binary files /dev/null and b/media/products/areca_palm_small.webp differ
diff --git a/media/products/areca_palm_small_a5ou0i3.webp b/media/products/areca_palm_small_a5ou0i3.webp
new file mode 100644
index 0000000..81ae7f9
Binary files /dev/null and b/media/products/areca_palm_small_a5ou0i3.webp differ
diff --git a/media/products/bonsai_adenium.jpg b/media/products/bonsai_adenium.jpg
new file mode 100644
index 0000000..a1e53de
Binary files /dev/null and b/media/products/bonsai_adenium.jpg differ
diff --git a/media/products/bonsai_adenium_25NVgD3.jpg b/media/products/bonsai_adenium_25NVgD3.jpg
new file mode 100644
index 0000000..a1e53de
Binary files /dev/null and b/media/products/bonsai_adenium_25NVgD3.jpg differ
diff --git a/media/products/bonsai_adenium_SZJpeAV.jpg b/media/products/bonsai_adenium_SZJpeAV.jpg
new file mode 100644
index 0000000..a1e53de
Binary files /dev/null and b/media/products/bonsai_adenium_SZJpeAV.jpg differ
diff --git a/media/products/clay_aggregrate.jpg b/media/products/clay_aggregrate.jpg
new file mode 100644
index 0000000..c9afe64
Binary files /dev/null and b/media/products/clay_aggregrate.jpg differ
diff --git a/media/products/hydrangea_macrophylla.jpg b/media/products/hydrangea_macrophylla.jpg
new file mode 100644
index 0000000..d301cdd
Binary files /dev/null and b/media/products/hydrangea_macrophylla.jpg differ
diff --git a/media/products/hydrangea_macrophylla_Qv5i8d3.jpg b/media/products/hydrangea_macrophylla_Qv5i8d3.jpg
new file mode 100644
index 0000000..d301cdd
Binary files /dev/null and b/media/products/hydrangea_macrophylla_Qv5i8d3.jpg differ
diff --git a/media/products/nurserylive-anthurium-andreanum-princess-amalia-elegance-plant_600x600.jpg b/media/products/nurserylive-anthurium-andreanum-princess-amalia-elegance-plant_600x600.jpg
new file mode 100644
index 0000000..78dc0f9
Binary files /dev/null and b/media/products/nurserylive-anthurium-andreanum-princess-amalia-elegance-plant_600x600.jpg differ
diff --git a/media/products/nurserylive-anthurium-andreanum-princess-amalia-elegance-plant_600x600_grie1BR.jpg b/media/products/nurserylive-anthurium-andreanum-princess-amalia-elegance-plant_600x600_grie1BR.jpg
new file mode 100644
index 0000000..78dc0f9
Binary files /dev/null and b/media/products/nurserylive-anthurium-andreanum-princess-amalia-elegance-plant_600x600_grie1BR.jpg differ
diff --git a/media/products/nurserylive-combo-packs-plants-set-of-2-bonsai-looking-grafted-adeniums-1696931_TpqIiln.jpg b/media/products/nurserylive-combo-packs-plants-set-of-2-bonsai-looking-grafted-adeniums-1696931_TpqIiln.jpg
new file mode 100644
index 0000000..a1e53de
Binary files /dev/null and b/media/products/nurserylive-combo-packs-plants-set-of-2-bonsai-looking-grafted-adeniums-1696931_TpqIiln.jpg differ
diff --git a/media/products/pexels-ganajp-21364137.jpg b/media/products/pexels-ganajp-21364137.jpg
new file mode 100644
index 0000000..7f55e12
Binary files /dev/null and b/media/products/pexels-ganajp-21364137.jpg differ
diff --git a/media/products/pexels-pixabay-56860.jpg b/media/products/pexels-pixabay-56860.jpg
new file mode 100644
index 0000000..4b3daf6
Binary files /dev/null and b/media/products/pexels-pixabay-56860.jpg differ
diff --git a/media/products/pexels-pixabay-56860_Qhh2fH3.jpg b/media/products/pexels-pixabay-56860_Qhh2fH3.jpg
new file mode 100644
index 0000000..4b3daf6
Binary files /dev/null and b/media/products/pexels-pixabay-56860_Qhh2fH3.jpg differ
diff --git a/media/products/pexels-viktor-smith-593827-1373960.jpg b/media/products/pexels-viktor-smith-593827-1373960.jpg
new file mode 100644
index 0000000..e532e03
Binary files /dev/null and b/media/products/pexels-viktor-smith-593827-1373960.jpg differ
diff --git a/media/products/rose_red.webp b/media/products/rose_red.webp
new file mode 100644
index 0000000..d6da874
Binary files /dev/null and b/media/products/rose_red.webp differ
diff --git a/media/products/rose_red_9WpJGSb.webp b/media/products/rose_red_9WpJGSb.webp
new file mode 100644
index 0000000..d6da874
Binary files /dev/null and b/media/products/rose_red_9WpJGSb.webp differ
diff --git a/media/products/snake_plant.jpg b/media/products/snake_plant.jpg
new file mode 100644
index 0000000..6980de7
Binary files /dev/null and b/media/products/snake_plant.jpg differ
diff --git a/media/products/snake_plant_JTXcXPl.jpg b/media/products/snake_plant_JTXcXPl.jpg
new file mode 100644
index 0000000..6980de7
Binary files /dev/null and b/media/products/snake_plant_JTXcXPl.jpg differ
diff --git a/media/profile_pics/default.jpg b/media/profile_pics/default.jpg
new file mode 100644
index 0000000..fb56d26
Binary files /dev/null and b/media/profile_pics/default.jpg differ
diff --git a/media/profile_pics/default_JQW1hA0.jpg b/media/profile_pics/default_JQW1hA0.jpg
new file mode 100644
index 0000000..fb56d26
Binary files /dev/null and b/media/profile_pics/default_JQW1hA0.jpg differ
diff --git a/media/team_members/apoorv.jpeg b/media/team_members/apoorv.jpeg
new file mode 100644
index 0000000..2076595
Binary files /dev/null and b/media/team_members/apoorv.jpeg differ
diff --git a/media/team_members/aryan.png b/media/team_members/aryan.png
new file mode 100644
index 0000000..9d20958
Binary files /dev/null and b/media/team_members/aryan.png differ
diff --git a/media/team_members/hetvi.png b/media/team_members/hetvi.png
new file mode 100644
index 0000000..e4d4c21
Binary files /dev/null and b/media/team_members/hetvi.png differ
diff --git a/media/team_members/meet.jpeg b/media/team_members/meet.jpeg
new file mode 100644
index 0000000..6d1b60e
Binary files /dev/null and b/media/team_members/meet.jpeg differ
diff --git a/media/team_members/param.png b/media/team_members/param.png
new file mode 100644
index 0000000..b09c9fb
Binary files /dev/null and b/media/team_members/param.png differ
diff --git a/media/team_members/saipranav.jpeg b/media/team_members/saipranav.jpeg
new file mode 100644
index 0000000..5e26b7b
Binary files /dev/null and b/media/team_members/saipranav.jpeg differ
diff --git a/media/team_members/yashp.png b/media/team_members/yashp.png
new file mode 100644
index 0000000..13b00a2
Binary files /dev/null and b/media/team_members/yashp.png differ
diff --git a/media/team_members/yashs.png b/media/team_members/yashs.png
new file mode 100644
index 0000000..f730b63
Binary files /dev/null and b/media/team_members/yashs.png differ
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..59eca63
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,1430 @@
+{
+  "name": "GreenCart",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "dependencies": {
+        "autoprefixer": "^10.4.19",
+        "postcss": "^8.4.39",
+        "tailwindcss": "^3.4.4"
+      }
+    },
+    "node_modules/@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@isaacs/cliui": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
+      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
+      "dependencies": {
+        "string-width": "^5.1.2",
+        "string-width-cjs": "npm:string-width@^4.2.0",
+        "strip-ansi": "^7.0.1",
+        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
+        "wrap-ansi": "^8.1.0",
+        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
+      "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
+      "dependencies": {
+        "@jridgewell/set-array": "^1.2.1",
+        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/set-array": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
+      "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.4.15",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
+      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.25",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
+      "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@pkgjs/parseargs": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
+      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
+      "optional": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/ansi-regex": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
+      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/any-promise": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A=="
+    },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/arg": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg=="
+    },
+    "node_modules/autoprefixer": {
+      "version": "10.4.19",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.19.tgz",
+      "integrity": "sha512-BaENR2+zBZ8xXhM4pUaKUxlVdxZ0EZhjvbopwnXmxRUfqDmwSpC2lAi/QXvx7NRdPCo1WKEcEF6mV64si1z4Ew==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "browserslist": "^4.23.0",
+        "caniuse-lite": "^1.0.30001599",
+        "fraction.js": "^4.3.7",
+        "normalize-range": "^0.1.2",
+        "picocolors": "^1.0.0",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "bin": {
+        "autoprefixer": "bin/autoprefixer"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
+    },
+    "node_modules/binary-extensions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/browserslist": {
+      "version": "4.23.1",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.1.tgz",
+      "integrity": "sha512-TUfofFo/KsK/bWZ9TWQ5O26tsWW4Uhmt8IYklbnUa70udB6P2wA7w7o4PY4muaEPBQaAX+CEnmmIA41NVHtPVw==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "caniuse-lite": "^1.0.30001629",
+        "electron-to-chromium": "^1.4.796",
+        "node-releases": "^2.0.14",
+        "update-browserslist-db": "^1.0.16"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
+    "node_modules/camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001638",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001638.tgz",
+      "integrity": "sha512-5SuJUJ7cZnhPpeLHaH0c/HPAnAHZvS6ElWyHK9GSIbVOQABLzowiI2pjmpvZ1WEbkyz46iFd4UXlOHR5SqgfMQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ]
+    },
+    "node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/chokidar/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
+    "node_modules/commander": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/cross-spawn": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+      "dependencies": {
+        "path-key": "^3.1.0",
+        "shebang-command": "^2.0.0",
+        "which": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/didyoumean": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw=="
+    },
+    "node_modules/dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA=="
+    },
+    "node_modules/eastasianwidth": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
+      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA=="
+    },
+    "node_modules/electron-to-chromium": {
+      "version": "1.4.815",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.815.tgz",
+      "integrity": "sha512-OvpTT2ItpOXJL7IGcYakRjHCt8L5GrrN/wHCQsRB4PQa1X9fe+X9oen245mIId7s14xvArCGSTIq644yPUKKLg=="
+    },
+    "node_modules/emoji-regex": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg=="
+    },
+    "node_modules/escalade": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.2.tgz",
+      "integrity": "sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/fast-glob": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
+      "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/fast-glob/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/fastq": {
+      "version": "1.17.1",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",
+      "integrity": "sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==",
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
+    },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/foreground-child": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.2.1.tgz",
+      "integrity": "sha512-PXUUyLqrR2XCWICfv6ukppP96sdFwWbNEnfEMt7jNsISjMsvaLNinAHNDYyvkyU+SZG2BTSbT5NjG+vZslfGTA==",
+      "dependencies": {
+        "cross-spawn": "^7.0.0",
+        "signal-exit": "^4.0.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/fraction.js": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
+      "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "patreon",
+        "url": "https://github.com/sponsors/rawify"
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/glob": {
+      "version": "10.4.2",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.2.tgz",
+      "integrity": "sha512-GwMlUF6PkPo3Gk21UxkCohOv0PLcIXVtKyLlpEI28R/cO/4eNOdmLk3CMW1wROV/WR/EsZOWAfBbBOqYvs88/w==",
+      "dependencies": {
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^3.1.2",
+        "minimatch": "^9.0.4",
+        "minipass": "^7.1.2",
+        "package-json-from-dist": "^1.0.0",
+        "path-scurry": "^1.11.1"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-core-module": {
+      "version": "2.14.0",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.14.0.tgz",
+      "integrity": "sha512-a5dFJih5ZLYlRtDc0dZWP7RiKr6xIKzmn/oAYCDvdLThadVgyJwlaoQPmRtMSpz+rk0OGAgIu+TcM9HUF0fk1A==",
+      "dependencies": {
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="
+    },
+    "node_modules/jackspeak": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.0.tgz",
+      "integrity": "sha512-JVYhQnN59LVPFCEcVa2C3CrEKYacvjRfqIQl+h8oi91aLYQVWRYbxjPcv1bUiUy/kLmQaANrYfNMCO3kuEDHfw==",
+      "dependencies": {
+        "@isaacs/cliui": "^8.0.2"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      },
+      "optionalDependencies": {
+        "@pkgjs/parseargs": "^0.11.0"
+      }
+    },
+    "node_modules/jiti": {
+      "version": "1.21.6",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.6.tgz",
+      "integrity": "sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==",
+      "bin": {
+        "jiti": "bin/jiti.js"
+      }
+    },
+    "node_modules/lilconfig": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
+      "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
+    },
+    "node_modules/lru-cache": {
+      "version": "10.3.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.3.0.tgz",
+      "integrity": "sha512-CQl19J/g+Hbjbv4Y3mFNNXFEL/5t/KCg8POCuUqd4rMKjGG+j1ybER83hxV58zL+dFI1PTkt3GNFSHRt+d8qEQ==",
+      "engines": {
+        "node": "14 || >=16.14"
+      }
+    },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.7.tgz",
+      "integrity": "sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==",
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/minipass": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/mz": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
+      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "dependencies": {
+        "any-promise": "^1.0.0",
+        "object-assign": "^4.0.1",
+        "thenify-all": "^1.0.0"
+      }
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/node-releases": {
+      "version": "2.0.14",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz",
+      "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw=="
+    },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/normalize-range": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
+      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-hash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/package-json-from-dist": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.0.tgz",
+      "integrity": "sha512-dATvCeZN/8wQsGywez1mzHtTlP22H8OEfPrVMLNr4/eGa+ijtLn/6M5f0dY8UKNrC2O9UCU6SSoG3qRKnt7STw=="
+    },
+    "node_modules/path-key": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
+    },
+    "node_modules/path-scurry": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
+      "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
+      "dependencies": {
+        "lru-cache": "^10.2.0",
+        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/picocolors": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz",
+      "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew=="
+    },
+    "node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/pirates": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
+      "integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.4.39",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.39.tgz",
+      "integrity": "sha512-0vzE+lAiG7hZl1/9I8yzKLx3aR9Xbof3fBHKunvMfOCYAtMhrsnccJY2iTURb9EZd5+pLuiNV9/c/GZJOHsgIw==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "nanoid": "^3.3.7",
+        "picocolors": "^1.0.1",
+        "source-map-js": "^1.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/postcss-import": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
+      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+      "dependencies": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
+    "node_modules/postcss-js": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
+      "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
+      "dependencies": {
+        "camelcase-css": "^2.0.1"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >= 16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.21"
+      }
+    },
+    "node_modules/postcss-load-config": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
+      "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "lilconfig": "^3.0.0",
+        "yaml": "^2.3.4"
+      },
+      "engines": {
+        "node": ">= 14"
+      },
+      "peerDependencies": {
+        "postcss": ">=8.0.9",
+        "ts-node": ">=9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "postcss": {
+          "optional": true
+        },
+        "ts-node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/postcss-load-config/node_modules/lilconfig": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.2.tgz",
+      "integrity": "sha512-eop+wDAvpItUys0FWkHIKeC9ybYrTGbU41U5K7+bttZZeohvnY7M9dZ5kB21GNWiFT2q1OoPTvncPCgSOVO5ow==",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antonk52"
+      }
+    },
+    "node_modules/postcss-nested": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz",
+      "integrity": "sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==",
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.11"
+      },
+      "engines": {
+        "node": ">=12.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.14"
+      }
+    },
+    "node_modules/postcss-selector-parser": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.0.tgz",
+      "integrity": "sha512-UMz42UD0UY0EApS0ZL9o1XnLhSTtvvvLe5Dc2H2O56fvRZi+KulDyf5ctDhhtYJBGKStV2FL1fy6253cmLgqVQ==",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
+    },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
+    "node_modules/read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+      "dependencies": {
+        "pify": "^2.3.0"
+      }
+    },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/resolve": {
+      "version": "1.22.8",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
+      "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
+      "dependencies": {
+        "is-core-module": "^2.13.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/reusify": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
+      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
+    "node_modules/shebang-command": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dependencies": {
+        "shebang-regex": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/shebang-regex": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
+      "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/string-width": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
+      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+      "dependencies": {
+        "eastasianwidth": "^0.2.0",
+        "emoji-regex": "^9.2.2",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/string-width-cjs": {
+      "name": "string-width",
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width-cjs/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/string-width-cjs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+    },
+    "node_modules/string-width-cjs/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/strip-ansi-cjs": {
+      "name": "strip-ansi",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-ansi-cjs/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/sucrase": {
+      "version": "3.35.0",
+      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
+      "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "commander": "^4.0.0",
+        "glob": "^10.3.10",
+        "lines-and-columns": "^1.1.6",
+        "mz": "^2.7.0",
+        "pirates": "^4.0.1",
+        "ts-interface-checker": "^0.1.9"
+      },
+      "bin": {
+        "sucrase": "bin/sucrase",
+        "sucrase-node": "bin/sucrase-node"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/tailwindcss": {
+      "version": "3.4.4",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.4.tgz",
+      "integrity": "sha512-ZoyXOdJjISB7/BcLTR6SEsLgKtDStYyYZVLsUtWChO4Ps20CBad7lfJKVDiejocV4ME1hLmyY0WJE3hSDcmQ2A==",
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "arg": "^5.0.2",
+        "chokidar": "^3.5.3",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.3.0",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "jiti": "^1.21.0",
+        "lilconfig": "^2.1.0",
+        "micromatch": "^4.0.5",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.0.0",
+        "postcss": "^8.4.23",
+        "postcss-import": "^15.1.0",
+        "postcss-js": "^4.0.1",
+        "postcss-load-config": "^4.0.1",
+        "postcss-nested": "^6.0.1",
+        "postcss-selector-parser": "^6.0.11",
+        "resolve": "^1.22.2",
+        "sucrase": "^3.32.0"
+      },
+      "bin": {
+        "tailwind": "lib/cli.js",
+        "tailwindcss": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/thenify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
+      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "dependencies": {
+        "any-promise": "^1.0.0"
+      }
+    },
+    "node_modules/thenify-all": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
+      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+      "dependencies": {
+        "thenify": ">= 3.1.0 < 4"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/ts-interface-checker": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA=="
+    },
+    "node_modules/update-browserslist-db": {
+      "version": "1.0.16",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.16.tgz",
+      "integrity": "sha512-KVbTxlBYlckhF5wgfyZXTWnMn7MMZjMu9XG8bPlliUOP9ThaF4QnhP8qrjrH7DRzHfSk0oQv1wToW+iA5GajEQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "escalade": "^3.1.2",
+        "picocolors": "^1.0.1"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
+    },
+    "node_modules/which": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "node-which": "bin/node-which"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/wrap-ansi": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
+      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
+      "dependencies": {
+        "ansi-styles": "^6.1.0",
+        "string-width": "^5.0.1",
+        "strip-ansi": "^7.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs": {
+      "name": "wrap-ansi",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/wrap-ansi-cjs/node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/yaml": {
+      "version": "2.4.5",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.4.5.tgz",
+      "integrity": "sha512-aBx2bnqDzVOyNKfsysjA2ms5ZlnjSAW2eG3/L5G/CSujfjLJTJsEw1bGw8kCf04KodQWk1pxlGnZ56CRxiawmg==",
+      "bin": {
+        "yaml": "bin.mjs"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..d2c4f5f
--- /dev/null
+++ b/package.json
@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "autoprefixer": "^10.4.19",
+    "postcss": "^8.4.39",
+    "tailwindcss": "^3.4.4"
+  }
+}
diff --git a/payments/__init__.py b/payments/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/payments/admin.py b/payments/admin.py
new file mode 100644
index 0000000..8c38f3f
--- /dev/null
+++ b/payments/admin.py
@@ -0,0 +1,3 @@
+from django.contrib import admin
+
+# Register your models here.
diff --git a/payments/apps.py b/payments/apps.py
new file mode 100644
index 0000000..4886655
--- /dev/null
+++ b/payments/apps.py
@@ -0,0 +1,6 @@
+from django.apps import AppConfig
+
+
+class PaymentsConfig(AppConfig):
+    default_auto_field = 'django.db.models.BigAutoField'
+    name = 'payments'
diff --git a/payments/forms.py b/payments/forms.py
new file mode 100644
index 0000000..93b4be7
--- /dev/null
+++ b/payments/forms.py
@@ -0,0 +1,9 @@
+# payments/forms.py
+
+from django import forms
+from .models import Payment
+
+class PaymentForm(forms.ModelForm):
+    class Meta:
+        model = Payment
+        fields = ['Name','Description','address','zipcode','country','city','Amount','Email']
diff --git a/payments/migrations/0001_initial.py b/payments/migrations/0001_initial.py
new file mode 100644
index 0000000..011271d
--- /dev/null
+++ b/payments/migrations/0001_initial.py
@@ -0,0 +1,23 @@
+# Generated by Django 4.2.13 on 2024-06-30 00:31
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    initial = True
+
+    dependencies = [
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='Payment',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('amount', models.DecimalField(decimal_places=2, max_digits=10)),
+                ('description', models.CharField(max_length=255)),
+                ('email', models.EmailField(max_length=254)),
+            ],
+        ),
+    ]
diff --git a/payments/migrations/0002_rename_amount_payment_amount_and_more.py b/payments/migrations/0002_rename_amount_payment_amount_and_more.py
new file mode 100644
index 0000000..ba9e81d
--- /dev/null
+++ b/payments/migrations/0002_rename_amount_payment_amount_and_more.py
@@ -0,0 +1,33 @@
+# Generated by Django 4.2.13 on 2024-07-02 18:46
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('payments', '0001_initial'),
+    ]
+
+    operations = [
+        migrations.RenameField(
+            model_name='payment',
+            old_name='amount',
+            new_name='Amount',
+        ),
+        migrations.RenameField(
+            model_name='payment',
+            old_name='description',
+            new_name='Description',
+        ),
+        migrations.RenameField(
+            model_name='payment',
+            old_name='email',
+            new_name='Email',
+        ),
+        migrations.AddField(
+            model_name='payment',
+            name='Name',
+            field=models.CharField(default='John', max_length=255),
+        ),
+    ]
diff --git a/payments/migrations/0003_payment_stripe_payment_intent_id.py b/payments/migrations/0003_payment_stripe_payment_intent_id.py
new file mode 100644
index 0000000..bca16a1
--- /dev/null
+++ b/payments/migrations/0003_payment_stripe_payment_intent_id.py
@@ -0,0 +1,18 @@
+# Generated by Django 4.2.13 on 2024-07-08 20:51
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('payments', '0002_rename_amount_payment_amount_and_more'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='payment',
+            name='stripe_payment_intent_id',
+            field=models.CharField(blank=True, max_length=255, null=True),
+        ),
+    ]
diff --git a/payments/migrations/0004_remove_payment_stripe_payment_intent_id_and_more.py b/payments/migrations/0004_remove_payment_stripe_payment_intent_id_and_more.py
new file mode 100644
index 0000000..fa88bdc
--- /dev/null
+++ b/payments/migrations/0004_remove_payment_stripe_payment_intent_id_and_more.py
@@ -0,0 +1,37 @@
+# Generated by Django 4.2.13 on 2024-07-08 21:55
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('payments', '0003_payment_stripe_payment_intent_id'),
+    ]
+
+    operations = [
+        migrations.RemoveField(
+            model_name='payment',
+            name='stripe_payment_intent_id',
+        ),
+        migrations.AddField(
+            model_name='payment',
+            name='address',
+            field=models.CharField(blank=True, max_length=264),
+        ),
+        migrations.AddField(
+            model_name='payment',
+            name='city',
+            field=models.CharField(blank=True, max_length=264),
+        ),
+        migrations.AddField(
+            model_name='payment',
+            name='country',
+            field=models.CharField(blank=True, max_length=264),
+        ),
+        migrations.AddField(
+            model_name='payment',
+            name='zipcode',
+            field=models.CharField(blank=True, max_length=10),
+        ),
+    ]
diff --git a/payments/migrations/0005_alter_payment_city_alter_payment_country.py b/payments/migrations/0005_alter_payment_city_alter_payment_country.py
new file mode 100644
index 0000000..84d861c
--- /dev/null
+++ b/payments/migrations/0005_alter_payment_city_alter_payment_country.py
@@ -0,0 +1,23 @@
+# Generated by Django 4.2.13 on 2024-07-08 22:00
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('payments', '0004_remove_payment_stripe_payment_intent_id_and_more'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='payment',
+            name='city',
+            field=models.CharField(blank=True, choices=[('NYC', 'New York City'), ('LAX', 'Los Angeles'), ('CHI', 'Chicago'), ('HOU', 'Houston'), ('PHX', 'Phoenix'), ('TOR', 'Toronto'), ('VAN', 'Vancouver'), ('MTL', 'Montreal'), ('LDN', 'London'), ('MAN', 'Manchester'), ('SYD', 'Sydney'), ('MEL', 'Melbourne'), ('BER', 'Berlin'), ('MUC', 'Munich'), ('PAR', 'Paris'), ('LYO', 'Lyon'), ('ROM', 'Rome'), ('MIL', 'Milan'), ('MAD', 'Madrid'), ('BCN', 'Barcelona'), ('TOK', 'Tokyo'), ('OSA', 'Osaka'), ('BJS', 'Beijing'), ('SHA', 'Shanghai'), ('DEL', 'Delhi'), ('MUM', 'Mumbai'), ('RIO', 'Rio de Janeiro'), ('SAO', 'Sao Paulo'), ('MOW', 'Moscow'), ('SPB', 'Saint Petersburg'), ('MEX', 'Mexico City'), ('GDL', 'Guadalajara'), ('JHB', 'Johannesburg'), ('CPT', 'Cape Town'), ('LOS', 'Lagos'), ('CAI', 'Cairo'), ('BUE', 'Buenos Aires'), ('SCL', 'Santiago'), ('BOG', 'Bogota'), ('STO', 'Stockholm'), ('OSL', 'Oslo'), ('CPH', 'Copenhagen'), ('HEL', 'Helsinki'), ('WAW', 'Warsaw'), ('IST', 'Istanbul'), ('SEL', 'Seoul'), ('SIN', 'Singapore'), ('KUL', 'Kuala Lumpur'), ('BKK', 'Bangkok')], max_length=264),
+        ),
+        migrations.AlterField(
+            model_name='payment',
+            name='country',
+            field=models.CharField(blank=True, choices=[('USA', 'United States'), ('CAN', 'Canada'), ('UK', 'United Kingdom'), ('AUS', 'Australia'), ('GER', 'Germany'), ('FRA', 'France'), ('ITA', 'Italy'), ('ESP', 'Spain'), ('JPN', 'Japan'), ('CHN', 'China'), ('IND', 'India'), ('BRA', 'Brazil'), ('RUS', 'Russia'), ('MEX', 'Mexico'), ('RSA', 'South Africa'), ('NIG', 'Nigeria'), ('EGY', 'Egypt'), ('ARG', 'Argentina'), ('CHL', 'Chile'), ('COL', 'Colombia'), ('SWE', 'Sweden'), ('NOR', 'Norway'), ('DEN', 'Denmark'), ('FIN', 'Finland'), ('POL', 'Poland'), ('TUR', 'Turkey'), ('KOR', 'South Korea'), ('SGP', 'Singapore'), ('MYS', 'Malaysia'), ('THA', 'Thailand'), ('VNM', 'Vietnam'), ('PHL', 'Philippines'), ('IDN', 'Indonesia'), ('NZL', 'New Zealand'), ('SAU', 'Saudi Arabia'), ('ISR', 'Israel'), ('UAE', 'United Arab Emirates'), ('IRN', 'Iran'), ('PAK', 'Pakistan'), ('BGD', 'Bangladesh'), ('UKR', 'Ukraine'), ('BEL', 'Belgium'), ('NLD', 'Netherlands'), ('CHE', 'Switzerland'), ('AUT', 'Austria'), ('GRC', 'Greece'), ('HUN', 'Hungary'), ('CZE', 'Czech Republic'), ('PRT', 'Portugal'), ('ROU', 'Romania')], max_length=264),
+        ),
+    ]
diff --git a/payments/migrations/0006_alter_payment_city_alter_payment_country.py b/payments/migrations/0006_alter_payment_city_alter_payment_country.py
new file mode 100644
index 0000000..ae88773
--- /dev/null
+++ b/payments/migrations/0006_alter_payment_city_alter_payment_country.py
@@ -0,0 +1,23 @@
+# Generated by Django 4.2.13 on 2024-07-08 22:06
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('payments', '0005_alter_payment_city_alter_payment_country'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='payment',
+            name='city',
+            field=models.CharField(blank=True, choices=[('NYC', 'New York City'), ('LAX', 'Los Angeles'), ('CHI', 'Chicago'), ('HOU', 'Houston'), ('PHX', 'Phoenix'), ('TOR', 'Toronto'), ('VAN', 'Vancouver'), ('MTL', 'Montreal'), ('LDN', 'London'), ('MAN', 'Manchester'), ('SYD', 'Sydney'), ('MEL', 'Melbourne'), ('BER', 'Berlin'), ('MUC', 'Munich'), ('PAR', 'Paris'), ('LYO', 'Lyon'), ('ROM', 'Rome'), ('MIL', 'Milan'), ('MAD', 'Madrid'), ('BCN', 'Barcelona'), ('TOK', 'Tokyo'), ('OSA', 'Osaka'), ('BJS', 'Beijing'), ('SHA', 'Shanghai'), ('DEL', 'Delhi'), ('MUM', 'Mumbai'), ('RIO', 'Rio de Janeiro'), ('SAO', 'Sao Paulo'), ('MOW', 'Moscow'), ('SPB', 'Saint Petersburg'), ('MEX', 'Mexico City'), ('GDL', 'Guadalajara'), ('JHB', 'Johannesburg'), ('CPT', 'Cape Town'), ('LOS', 'Lagos'), ('CAI', 'Cairo'), ('BUE', 'Buenos Aires'), ('SCL', 'Santiago'), ('BOG', 'Bogota'), ('STO', 'Stockholm'), ('OSL', 'Oslo'), ('CPH', 'Copenhagen'), ('HEL', 'Helsinki'), ('WAW', 'Warsaw'), ('IST', 'Istanbul'), ('SEL', 'Seoul'), ('SIN', 'Singapore'), ('KUL', 'Kuala Lumpur'), ('BKK', 'Bangkok')], default='TOR', max_length=264),
+        ),
+        migrations.AlterField(
+            model_name='payment',
+            name='country',
+            field=models.CharField(blank=True, choices=[('USA', 'United States'), ('CAN', 'Canada'), ('UK', 'United Kingdom'), ('AUS', 'Australia'), ('GER', 'Germany'), ('FRA', 'France'), ('ITA', 'Italy'), ('ESP', 'Spain'), ('JPN', 'Japan'), ('CHN', 'China'), ('IND', 'India'), ('BRA', 'Brazil'), ('RUS', 'Russia'), ('MEX', 'Mexico'), ('RSA', 'South Africa'), ('NIG', 'Nigeria'), ('EGY', 'Egypt'), ('ARG', 'Argentina'), ('CHL', 'Chile'), ('COL', 'Colombia'), ('SWE', 'Sweden'), ('NOR', 'Norway'), ('DEN', 'Denmark'), ('FIN', 'Finland'), ('POL', 'Poland'), ('TUR', 'Turkey'), ('KOR', 'South Korea'), ('SGP', 'Singapore'), ('MYS', 'Malaysia'), ('THA', 'Thailand'), ('VNM', 'Vietnam'), ('PHL', 'Philippines'), ('IDN', 'Indonesia'), ('NZL', 'New Zealand'), ('SAU', 'Saudi Arabia'), ('ISR', 'Israel'), ('UAE', 'United Arab Emirates'), ('IRN', 'Iran'), ('PAK', 'Pakistan'), ('BGD', 'Bangladesh'), ('UKR', 'Ukraine'), ('BEL', 'Belgium'), ('NLD', 'Netherlands'), ('CHE', 'Switzerland'), ('AUT', 'Austria'), ('GRC', 'Greece'), ('HUN', 'Hungary'), ('CZE', 'Czech Republic'), ('PRT', 'Portugal'), ('ROU', 'Romania')], default='CAN', max_length=264),
+        ),
+    ]
diff --git a/payments/migrations/0007_alter_payment_city.py b/payments/migrations/0007_alter_payment_city.py
new file mode 100644
index 0000000..cbc488f
--- /dev/null
+++ b/payments/migrations/0007_alter_payment_city.py
@@ -0,0 +1,18 @@
+# Generated by Django 4.2.13 on 2024-07-08 22:56
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('payments', '0006_alter_payment_city_alter_payment_country'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='payment',
+            name='city',
+            field=models.CharField(blank=True, choices=[('NYC', 'New York City'), ('LAX', 'Los Angeles'), ('CHI', 'Chicago'), ('HOU', 'Houston'), ('PHX', 'Phoenix'), ('TOR', 'Toronto'), ('VAN', 'Vancouver'), ('MTL', 'Montreal'), ('LDN', 'London'), ('MAN', 'Manchester'), ('SYD', 'Sydney'), ('MEL', 'Melbourne'), ('BER', 'Berlin'), ('MUC', 'Munich'), ('PAR', 'Paris'), ('LYO', 'Lyon'), ('ROM', 'Rome'), ('MIL', 'Milan'), ('MAD', 'Madrid'), ('BCN', 'Barcelona'), ('TOK', 'Tokyo'), ('OSA', 'Osaka'), ('BJS', 'Beijing'), ('SHA', 'Shanghai'), ('DEL', 'Delhi'), ('MUM', 'Mumbai'), ('RIO', 'Rio de Janeiro'), ('SAO', 'Sao Paulo'), ('MOW', 'Moscow'), ('SPB', 'Saint Petersburg'), ('MEX', 'Mexico City'), ('GDL', 'Guadalajara'), ('JHB', 'Johannesburg'), ('CPT', 'Cape Town'), ('LOS', 'Lagos'), ('CAI', 'Cairo'), ('BUE', 'Buenos Aires'), ('SCL', 'Santiago'), ('BOG', 'Bogota'), ('STO', 'Stockholm'), ('OSL', 'Oslo'), ('CPH', 'Copenhagen'), ('HEL', 'Helsinki'), ('WAW', 'Warsaw'), ('IST', 'Istanbul'), ('SEL', 'Seoul'), ('SIN', 'Singapore'), ('KUL', 'Kuala Lumpur'), ('BKK', 'Bangkok'), ('HAN', 'Hanoi'), ('HCM', 'Ho Chi Minh City')], default='TOR', max_length=264),
+        ),
+    ]
diff --git a/payments/migrations/0008_payment_stripe_payment_intent_id.py b/payments/migrations/0008_payment_stripe_payment_intent_id.py
new file mode 100644
index 0000000..810bd9e
--- /dev/null
+++ b/payments/migrations/0008_payment_stripe_payment_intent_id.py
@@ -0,0 +1,18 @@
+# Generated by Django 4.2.13 on 2024-07-09 19:17
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('payments', '0007_alter_payment_city'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='payment',
+            name='stripe_payment_intent_id',
+            field=models.CharField(blank=True, max_length=255, null=True),
+        ),
+    ]
diff --git a/payments/migrations/__init__.py b/payments/migrations/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/payments/models.py b/payments/models.py
new file mode 100644
index 0000000..b030fab
--- /dev/null
+++ b/payments/models.py
@@ -0,0 +1,123 @@
+from django.db import models
+
+# Define choices for country and city
+COUNTRY_CHOICES = [
+    ('USA', 'United States'),
+    ('CAN', 'Canada'),
+    ('UK', 'United Kingdom'),
+    ('AUS', 'Australia'),
+    ('GER', 'Germany'),
+    ('FRA', 'France'),
+    ('ITA', 'Italy'),
+    ('ESP', 'Spain'),
+    ('JPN', 'Japan'),
+    ('CHN', 'China'),
+    ('IND', 'India'),
+    ('BRA', 'Brazil'),
+    ('RUS', 'Russia'),
+    ('MEX', 'Mexico'),
+    ('RSA', 'South Africa'),
+    ('NIG', 'Nigeria'),
+    ('EGY', 'Egypt'),
+    ('ARG', 'Argentina'),
+    ('CHL', 'Chile'),
+    ('COL', 'Colombia'),
+    ('SWE', 'Sweden'),
+    ('NOR', 'Norway'),
+    ('DEN', 'Denmark'),
+    ('FIN', 'Finland'),
+    ('POL', 'Poland'),
+    ('TUR', 'Turkey'),
+    ('KOR', 'South Korea'),
+    ('SGP', 'Singapore'),
+    ('MYS', 'Malaysia'),
+    ('THA', 'Thailand'),
+    ('VNM', 'Vietnam'),
+    ('PHL', 'Philippines'),
+    ('IDN', 'Indonesia'),
+    ('NZL', 'New Zealand'),
+    ('SAU', 'Saudi Arabia'),
+    ('ISR', 'Israel'),
+    ('UAE', 'United Arab Emirates'),
+    ('IRN', 'Iran'),
+    ('PAK', 'Pakistan'),
+    ('BGD', 'Bangladesh'),
+    ('UKR', 'Ukraine'),
+    ('BEL', 'Belgium'),
+    ('NLD', 'Netherlands'),
+    ('CHE', 'Switzerland'),
+    ('AUT', 'Austria'),
+    ('GRC', 'Greece'),
+    ('HUN', 'Hungary'),
+    ('CZE', 'Czech Republic'),
+    ('PRT', 'Portugal'),
+    ('ROU', 'Romania'),
+]
+
+CITY_CHOICES = [
+    ('NYC', 'New York City'),
+    ('LAX', 'Los Angeles'),
+    ('CHI', 'Chicago'),
+    ('HOU', 'Houston'),
+    ('PHX', 'Phoenix'),
+    ('TOR', 'Toronto'),
+    ('VAN', 'Vancouver'),
+    ('MTL', 'Montreal'),
+    ('LDN', 'London'),
+    ('MAN', 'Manchester'),
+    ('SYD', 'Sydney'),
+    ('MEL', 'Melbourne'),
+    ('BER', 'Berlin'),
+    ('MUC', 'Munich'),
+    ('PAR', 'Paris'),
+    ('LYO', 'Lyon'),
+    ('ROM', 'Rome'),
+    ('MIL', 'Milan'),
+    ('MAD', 'Madrid'),
+    ('BCN', 'Barcelona'),
+    ('TOK', 'Tokyo'),
+    ('OSA', 'Osaka'),
+    ('BJS', 'Beijing'),
+    ('SHA', 'Shanghai'),
+    ('DEL', 'Delhi'),
+    ('MUM', 'Mumbai'),
+    ('RIO', 'Rio de Janeiro'),
+    ('SAO', 'Sao Paulo'),
+    ('MOW', 'Moscow'),
+    ('SPB', 'Saint Petersburg'),
+    ('MEX', 'Mexico City'),
+    ('GDL', 'Guadalajara'),
+    ('JHB', 'Johannesburg'),
+    ('CPT', 'Cape Town'),
+    ('LOS', 'Lagos'),
+    ('CAI', 'Cairo'),
+    ('BUE', 'Buenos Aires'),
+    ('SCL', 'Santiago'),
+    ('BOG', 'Bogota'),
+    ('STO', 'Stockholm'),
+    ('OSL', 'Oslo'),
+    ('CPH', 'Copenhagen'),
+    ('HEL', 'Helsinki'),
+    ('WAW', 'Warsaw'),
+    ('IST', 'Istanbul'),
+    ('SEL', 'Seoul'),
+    ('SIN', 'Singapore'),
+    ('KUL', 'Kuala Lumpur'),
+    ('BKK', 'Bangkok'),
+    ('HAN', 'Hanoi'),  # Added Vietnamese cities
+    ('HCM', 'Ho Chi Minh City'),  # Added Vietnamese cities
+]
+
+class Payment(models.Model):
+    Name = models.CharField(max_length=255, default="John")
+    Description = models.CharField(max_length=255)
+    address = models.CharField(max_length=264, blank=True)
+    zipcode = models.CharField(max_length=10, blank=True)
+    country = models.CharField(max_length=264, choices=COUNTRY_CHOICES, blank=True, default='CAN')
+    city = models.CharField(max_length=264, choices=CITY_CHOICES, blank=True, default='TOR')
+    Amount = models.DecimalField(max_digits=10, decimal_places=2)
+    Email = models.EmailField()
+    stripe_payment_intent_id = models.CharField(max_length=255, blank=True, null=True)
+
+    def __str__(self):
+        return f"{self.Email} - {self.Amount}"
diff --git a/payments/static/payments/styles.css b/payments/static/payments/styles.css
new file mode 100644
index 0000000..a960f63
--- /dev/null
+++ b/payments/static/payments/styles.css
@@ -0,0 +1,87 @@
+/* payments/static/payments/styles.css */
+
+/* General Styles */
+body {
+    font-family: Arial, sans-serif;
+    background-color: #f9f9f9;
+    color: #333;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+}
+
+h1 {
+    text-align: center;
+    color: #333;
+}
+
+form {
+    background: #fff;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    max-width: 400px;
+    width: 100%;
+    margin: 20px auto;
+}
+
+form div {
+    margin-bottom: 15px;
+}
+
+label {
+    display: block;
+    font-weight: bold;
+    margin-bottom: 5px;
+}
+
+input,
+button {
+    width: 100%;
+    padding: 10px;
+    border-radius: 4px;
+    border: 1px solid #ddd;
+    box-sizing: border-box;
+}
+
+button {
+    background-color: #28a745;
+    color: #fff;
+    border: none;
+    cursor: pointer;
+}
+
+button:hover {
+    background-color: #218838;
+}
+
+/* Stripe Card Element */
+#card-element {
+    border: 1px solid #ddd;
+    padding: 10px;
+    border-radius: 4px;
+    margin-bottom: 10px;
+}
+
+/* Error Message */
+#card-error {
+    color: #e74c3c;
+    margin-top: 10px;
+    text-align: center;
+}
+
+/* Success Message */
+.success {
+    color: #28a745;
+    text-align: center;
+}
+
+/* Responsive Design */
+@media (max-width: 600px) {
+    form {
+        padding: 15px;
+    }
+}
diff --git a/payments/templates/payments/base.html b/payments/templates/payments/base.html
new file mode 100644
index 0000000..e961e53
--- /dev/null
+++ b/payments/templates/payments/base.html
@@ -0,0 +1,20 @@
+{% load static %}
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>{% block title %}{% endblock %}</title>
+    <script src="https://cdn.tailwindcss.com/"></script>
+    <link rel="stylesheet" href="{% static 'css/app.css' %}">
+    {% block extra_css %}{% endblock %}
+</head>
+<body class="bg-gray-100">
+    {% include 'Shop/navbar.html' %}
+    <div class="main-content">
+        {% block content %}
+        {% endblock %}
+    </div>
+    <script src="{% static 'js/setTimeoutForAlert.js' %}"></script>
+    {% include 'footer.html' %}
+</body>
+</html>
diff --git a/payments/templates/payments/checkout.html b/payments/templates/payments/checkout.html
new file mode 100644
index 0000000..92372bc
--- /dev/null
+++ b/payments/templates/payments/checkout.html
@@ -0,0 +1,83 @@
+<!-- payments/templates/payments/checkout.html -->
+{% load static %}
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Checkout</title>
+    <link rel="stylesheet" type="text/css" href="{% static 'payments/styles.css' %}">
+    <script src="https://js.stripe.com/v3/"></script>
+</head>
+<body>
+    <h1>Checkout</h1>
+    <form id="payment-form">
+        <div>
+            <label for="name">Name</label>
+            <input type="text" id="name" name="name" required>
+        </div>
+        <div>
+            <label for="email">Email</label>
+            <input type="email" id="email" name="email" required>
+        </div>
+        <div>
+            <label for="amount">Amount</label>
+            <input type="number" id="amount" name="amount" required>
+        </div>
+        <div>
+            <label for="description">Description</label>
+            <input type="text" id="description" name="description">
+        </div>
+        <div id="card-element">
+            <!-- A Stripe Element will be inserted here. -->
+        </div>
+        <div id="card-error" role="alert"></div>
+        <button id="submit">Pay</button>
+    </form>
+
+    <script>
+        // Initialize Stripe
+        var stripe = Stripe('{{ STRIPE_PUBLISHABLE_KEY }}'); // Replace with your Stripe publishable key
+        var elements = stripe.elements();
+
+        // Create an instance of the card Element
+        var cardElement = elements.create('card');
+
+        // Add an instance of the card Element into the `card-element` <div>
+        cardElement.mount('#card-element');
+
+        // Handle real-time validation errors from the card Element
+        cardElement.on('change', function(event) {
+            var displayError = document.getElementById('card-error');
+            if (event.error) {
+                displayError.textContent = event.error.message;
+            } else {
+                displayError.textContent = '';
+            }
+        });
+
+        // Handle form submission
+        var form = document.getElementById('payment-form');
+        form.addEventListener('submit', function(event) {
+            event.preventDefault();
+
+            stripe.confirmCardPayment('{{ payment_intent_client_secret }}', {
+                payment_method: {
+                    card: cardElement,
+                    billing_details: {
+                        name: form.querySelector('input[name="name"]').value,
+                        email: form.querySelector('input[name="email"]').value,
+                    }
+                }
+            }).then(function(result) {
+                if (result.error) {
+                    // Show error to your customer (e.g., insufficient funds)
+                    var errorElement = document.getElementById('card-error');
+                    errorElement.textContent = result.error.message;
+                } else {
+                    // The payment succeeded!
+                    window.location.href = "{% url 'payments:payment_success' %}";
+                }
+            });
+        });
+    </script>
+</body>
+</html>
diff --git a/payments/templates/payments/payment_form.html b/payments/templates/payments/payment_form.html
new file mode 100644
index 0000000..2b098df
--- /dev/null
+++ b/payments/templates/payments/payment_form.html
@@ -0,0 +1,22 @@
+<!-- payments/templates/payments/payment_form.html -->
+{% extends 'payments/base.html' %}
+{% load static %}
+
+{% block title %}Payment Page{% endblock %}
+
+{% block extra_css %}
+<link rel="stylesheet" href="{% static 'payments/styles.css' %}">
+{% endblock %}
+
+{% block content %}
+<div class="payment-page">
+    <div class="payment-container">
+        <h1>Payment</h1>
+        <form method="post">
+            {% csrf_token %}
+            {{ form.as_p }}
+            <button type="submit">Pay Now</button>
+        </form>
+    </div>
+</div>
+{% endblock %}
diff --git a/payments/templates/payments/payment_success.html b/payments/templates/payments/payment_success.html
new file mode 100644
index 0000000..acc5840
--- /dev/null
+++ b/payments/templates/payments/payment_success.html
@@ -0,0 +1,16 @@
+<!-- payments/templates/payments/payment_success.html -->
+{% extends 'payments/base.html' %}
+{% load static %}
+{% block content %}
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Payment Success</title>
+</head>
+<body>
+    <h1>Payment Successful!</h1>
+    <p>Your payment has been processed.</p>
+</body>
+</html>
+{% endblock %}
diff --git a/payments/tests.py b/payments/tests.py
new file mode 100644
index 0000000..7ce503c
--- /dev/null
+++ b/payments/tests.py
@@ -0,0 +1,3 @@
+from django.test import TestCase
+
+# Create your tests here.
diff --git a/payments/urls.py b/payments/urls.py
new file mode 100644
index 0000000..b142c6b
--- /dev/null
+++ b/payments/urls.py
@@ -0,0 +1,9 @@
+from django.contrib import admin
+from django.urls import path
+from payments.views import payment_view, payment_success  # Import payment_success from payments.views
+
+app_name='payments'
+urlpatterns = [
+    path('payment/', payment_view, name='payment_form'),
+    path('success/', payment_success, name='payment_success'),  # Use payment_success from imported module
+]
diff --git a/payments/views.py b/payments/views.py
new file mode 100644
index 0000000..3b9994f
--- /dev/null
+++ b/payments/views.py
@@ -0,0 +1,33 @@
+from django.conf import settings
+from django.shortcuts import render, redirect
+from django.views.decorators.csrf import csrf_exempt
+from .forms import PaymentForm
+from .models import Payment
+import stripe
+
+
+stripe.api_key = settings.STRIPE_SECRET_KEY
+
+def payment_view(request):
+    form = PaymentForm()
+    if request.method == 'POST':
+        form = PaymentForm(request.POST)
+        if form.is_valid():
+            payment = form.save(commit=False)
+            payment_intent = stripe.PaymentIntent.create(
+                amount=int(payment.Amount * 100),  # Stripe expects the amount in cents
+                currency='cad',
+                metadata={'email': payment.Email}
+            )
+            payment.stripe_payment_intent_id = payment_intent['id']
+            payment.save()
+            return render(request, 'payments/checkout.html', {
+                'payment_intent_client_secret': payment_intent['client_secret'],
+                'STRIPE_PUBLISHABLE_KEY': settings.STRIPE_PUBLISHABLE_KEY,
+                'payment': payment
+            })
+    return render(request, 'payments/payment_form.html', {'form': form})
+
+
+def payment_success(request):
+    return render(request, 'payments/payment_success.html')
diff --git a/requirements.txt b/requirements.txt
index 6c52be5..f4a2d46 100644
Binary files a/requirements.txt and b/requirements.txt differ
diff --git a/static/.DS_Store b/static/.DS_Store
index 9503e68..c4ffc0d 100644
Binary files a/static/.DS_Store and b/static/.DS_Store differ
diff --git a/static/css/app.css b/static/css/app.css
index fb00b52..22eec6f 100644
--- a/static/css/app.css
+++ b/static/css/app.css
@@ -35,4 +35,23 @@
 
 .profile-image-wrapper input[type="file"] {
     display: none;
+}
+
+.carousel-item{
+    object-fit: contain;
+}
+
+/* Hide scrollbar for Chrome, Safari and Opera */
+.no-scrollbar::-webkit-scrollbar {
+    display: none;
+}
+
+/* Hide scrollbar for IE, Edge and Firefox */
+.no-scrollbar {
+    -ms-overflow-style: none;  /* IE and Edge */
+    scrollbar-width: none;  /* Firefox */
+}
+
+.img-height{
+    max-height: 500px;
 }
\ No newline at end of file
diff --git a/static/css/main.css b/static/css/main.css
new file mode 100644
index 0000000..b8dcc73
--- /dev/null
+++ b/static/css/main.css
@@ -0,0 +1,4 @@
+/* myproject/static/css/main.css */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..fb64d6b
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,8 @@
+// postcss.config.js
+module.exports = {
+    plugins: [
+        require('tailwindcss'),
+        require('autoprefixer'),
+        // Add other PostCSS plugins here as needed
+    ]
+}
diff --git a/templates/about.html b/templates/about.html
new file mode 100644
index 0000000..1275777
--- /dev/null
+++ b/templates/about.html
@@ -0,0 +1,77 @@
+<!-- about.html -->
+{% extends 'Shop/base.html' %}
+
+{% block title %}About Us{% endblock %}
+
+{% block content %}
+<div class="py-16 bg-white">  
+  <div class="container m-auto px-6 text-gray-600 md:px-12 xl:px-6">
+    <div class="space-y-6 md:space-y-0 md:flex md:gap-6 lg:items-center lg:gap-12">
+      <div class="md:5/12 lg:w-5/12">
+        <img src="https://tailus.io/sources/blocks/left-image/preview/images/startup.png" alt="Startup image" loading="lazy" width="100%" height="auto">
+      </div>
+      <div class="md:7/12 lg:w-6/12">
+        <h2 class="text-2xl text-gray-900 font-bold md:text-4xl">About GreenCart 💚</h2>
+        <p class="mt-6 text-gray-600">
+          Welcome to GreenCart, your number one source for all things plants. We're dedicated to providing you the very best of indoor and outdoor plants, with an emphasis on quality, variety, and customer service.
+        </p>
+        <p class="mt-4 text-gray-600">
+          Founded in 2024, GreenCart has come a long way from its beginnings as a small plant nursery. When we first started out, our passion for green living drove us to start our own business.
+        </p>
+        <p class="mt-4 text-gray-600">
+          We now serve customers all over the country and are thrilled to turn our passion into our own website. We hope you enjoy our products as much as we enjoy offering them to you. If you have any questions or comments, please don't hesitate to contact us.
+        </p>
+        <p class="mt-4 text-gray-600">
+          Sincerely,<br>
+          The GreenCart Team
+        </p>
+      </div>
+    </div>
+    <div class="flex lg:flex-row flex-col justify-between gap-8 pt-12">
+      <div class="w-full lg:w-5/12 flex flex-col justify-center">
+          <h1 class="text-3xl lg:text-4xl font-bold leading-9 text-gray-800 dark:text-white pb-4">Our Story 🚀</h1>
+          <p class="font-normal text-base leading-6 text-gray-600 dark:text-white"> At GreenCart, we believe that plants have the power to transform spaces and improve lives. Our journey began in a small greenhouse, where a shared love for nature and a commitment to sustainability brought us together. Today, we are proud to be a thriving e-commerce platform, delivering fresh, healthy plants to customers across the country.</p>
+          <p class="mt-4 text-gray-600">
+            Meet the passionate team behind GreenCart
+          </p>
+      </div>
+      <div class="w-full lg:w-8/12 lg:pt-8">
+          <div class="grid md:grid-cols-4 sm:grid-cols-2 grid-cols-1 lg:gap-4 shadow-lg rounded-lg">
+              <div class="p-4 pb-6 flex justify-center flex-col items-center">
+                  <img class="rounded-md h-40 w-40 object-cover" src="/media/team_members/yashs.png" alt="Yash Sahsani" />
+                  <p class="font-medium text-lg leading-5 text-gray-800 dark:text-white mt-4">Yash Sahsani</p>
+              </div>
+              <div class="p-4 pb-6 flex justify-center flex-col items-center">
+                  <img class="rounded-md h-40 w-40 object-cover" src="/media/team_members/param.png" alt="Param Kamdar" />
+                  <p class="font-medium text-lg leading-5 text-gray-800 dark:text-white mt-4">Param Kamdar</p>
+              </div>
+              <div class="p-4 pb-6 flex justify-center flex-col items-center">
+                  <img class="rounded-md h-40 w-40 object-cover" src="/media/team_members/yashp.png" alt="Yash Patel" />
+                  <p class="font-medium text-lg leading-5 text-gray-800 dark:text-white mt-4">Yash Patel</p>
+              </div>
+              <div class="p-4 pb-6 flex justify-center flex-col items-center">
+                  <img class="rounded-md h-40 w-40 object-cover" src="/media/team_members/hetvi.png" alt="Hetvi Patel" />
+                  <p class="font-medium text-lg leading-5 text-gray-800 dark:text-white mt-4">Hetvi Patel</p>
+              </div>
+              <div class="p-4 pb-6 flex justify-center flex-col items-center">
+                  <img class="rounded-md h-40 w-40 object-cover" src="/media/team_members/meet.jpeg" alt="Meet Patel" />
+                  <p class="font-medium text-lg leading-5 text-gray-800 dark:text-white mt-4">Meet Patel</p>
+              </div>
+              <div class="p-4 pb-6 flex justify-center flex-col items-center">
+                  <img class="rounded-md h-40 w-40 object-cover" src="/media/team_members/saipranav.jpeg" alt="Sai Pranav" />
+                  <p class="font-medium text-lg leading-5 text-gray-800 dark:text-white mt-4">Sai Pranav</p>
+              </div>
+              <div class="p-4 pb-6 flex justify-center flex-col items-center">
+                  <img class="rounded-md h-40 w-40 object-cover" src="/media/team_members/apoorv.jpeg" alt="Apoorv Shamma" />
+                  <p class="font-medium text-lg leading-5 text-gray-800 dark:text-white mt-4">Apoorv Shamma</p>
+              </div>
+              <div class="p-4 pb-6 flex justify-center flex-col items-center">
+                  <img class="rounded-md h-40 w-40 object-cover" src="/media/team_members/aryan.png" alt="Aryan Batra" />
+                  <p class="font-medium text-lg leading-5 text-gray-800 dark:text-white mt-4">Aryan Batra</p>
+              </div>
+          </div>
+      </div>
+  </div>
+  </div>
+</div>
+{% endblock %}
diff --git a/templates/footer.html b/templates/footer.html
index 169c721..0332fd5 100644
--- a/templates/footer.html
+++ b/templates/footer.html
@@ -1,24 +1,52 @@
-<footer class="bg-gray-800 text-gray-300 py-6 mt-auto">
-    <div class="container mx-auto px-6">
-        <div class="flex flex-wrap justify-between items-center">
-            <!-- Left Side -->
-            <div class="w-full md:w-1/2 mb-4 md:mb-0">
-                <p class="mb-2">Contact us:</p>
-                <p class="text-sm">123 Example Street, City, Country</p>
-                <p class="text-sm">Phone: +123 456 789</p>
-                <p class="text-sm">Email: info@example.com</p>
+<footer class="w-full bg-teal-100 py-8 px-4">
+    <div class="container mx-auto">
+        <div class="flex justify-between flex-wrap">
+            <div class="flex flex-col">
+                <h2 class="text-lg font-semibold">Useful Links</h2>
+                <ul class="mt-4 space-y-2">
+                    <li><a href="#">Track Order</a></li>
+                    <li><a href="#">Orders</a></li>
+                    <li><a href="{% url 'support:faq' %}">FAQ's</a></li>
+                    <li><a href="#">Offers</a></li>
+                    <li><a href="#">Rewards</a></li>
+                    <li><a href="#">Affiliate</a></li>
+                    <li><a href="#">Corporate</a></li>
+                </ul>
             </div>
-
-            <!-- Right Side -->
-            <div class="w-full md:w-1/2">
-                <ul class="flex justify-end space-x-4">
-                    <li><a href="#" class="text-white hover:text-gray-300">About Us</a></li>
-                    <li><a href="#" class="text-white hover:text-gray-300">Terms of Service</a></li>
-                    <li><a href="#" class="text-white hover:text-gray-300">Privacy Policy</a></li>
-                    <li><a href="#" class="text-white hover:text-gray-300">Contact Us</a></li>
+            <div class="flex flex-col">
+                <h2 class="text-lg font-semibold">About</h2>
+                <ul class="mt-4 space-y-2">
+                    <li><a href="#">About GreenCart</a></li>
+                    <li><a href="{% url 'support:submit_query' %}">Contact us</a></li>
+                    <li><a href="#">Privacy Policy</a></li>
+                    <li><a href="#">Refund Policy</a></li>
+                    <li><a href="#">Shipping Policy</a></li>
+                    <li><a href="#">Terms of Service</a></li>
+                    <li><a href="#">Jobs</a></li>
                 </ul>
-                <p class="mt-4 text-sm">&copy; 2024 Your Ecommerce Site. All rights reserved.</p>
             </div>
+            <div class="flex flex-col">
+                <h2 class="text-lg font-semibold">Follow Us</h2>
+                <div class="mt-4 flex space-x-4">
+                    <a href="#"><i class="fab fa-facebook"></i></a>
+                    <a href="#"><i class="fab fa-twitter"></i></a>
+                    <a href="#"><i class="fab fa-pinterest"></i></a>
+                    <a href="#"><i class="fab fa-instagram"></i></a>
+                    <a href="#"><i class="fab fa-youtube"></i></a>
+                    <a href="#"><i class="fab fa-linkedin"></i></a>
+                </div>
+            </div>
+            <div class="flex flex-col">
+                <h2 class="text-lg font-semibold">Subscribe</h2>
+                <p class="mt-4">Join us to receive gardening tips, offers, news & more</p>
+                <form class="mt-4 flex">
+                    <input type="email" class="p-2 border border-gray-300 rounded-l-md" placeholder="Email address">
+                    <button type="submit" class="p-2 bg-red-500 text-white rounded-r-md">Sign up</button>
+                </form>
+            </div>
+        </div>
+        <div class="mt-12 text-center text-sm text-gray-600">
+            <p class="text-center text-sm mt-4">&copy; 2024 GreenCart. All rights reserved.</p>
         </div>
     </div>
 </footer>