diff --git a/manage_notifications/utils.py b/manage_notifications/utils.py
index 90b52b3..2fa6a08 100644
--- a/manage_notifications/utils.py
+++ b/manage_notifications/utils.py
@@ -6,7 +6,7 @@ from .models import IAmPrincipalNotificationSettings, IAmPrincipal, PrincipalTyp
 
 
 def onesignal_send_notification(
-    title, message, image_url="http://127.0.0.1:8000/", eligible_principals=None
+    title, message, image_url=None, eligible_principals=None
 ):
     onesignal_app_id = settings.ONE_SIGNAL_APP_ID
     onesignal_rest_api_key = settings.ONE_SIGNAL_API_KEY
@@ -33,9 +33,7 @@ def onesignal_send_notification(
 
     if image_url:
         # Include image URL if provided (requires additional OneSignal configuration)
-        data["large_icon"] = (
-            str(image_url.url)
-        )
+        data["large_icon"] = str(image_url.url)
 
     # data = json.dumps(data)
     print("Data: ", data)
@@ -63,17 +61,19 @@ def send_notification(title, message, image_url=None, eligible_principals=None):
         return None  # Or handle this scenario as needed
 
     # Extract OneSignal player IDs
-    player_ids = eligible_principals.values_list("player_id", flat=True)
+    # player_ids = eligible_principals.values_list("player_id", flat=True)
 
     # Prepare notification payload
     notification_payload = {
         "headings": {"en": title},
         "contents": {"en": message},
-        "include_player_ids": list(player_ids),
+        "include_player_ids": eligible_principals,
+        "big_picture": image_url.url,
     }
 
     if image_url:
-        notification_payload["big_picture"] = image_url
+        image_url_str = image_url.url
+        notification_payload["big_picture"] = image_url_str
 
     # Send notification
     response = onesignal_client.send_notification(notification_payload)
diff --git a/manage_notifications/views.py b/manage_notifications/views.py
index 618fb88..6244b44 100644
--- a/manage_notifications/views.py
+++ b/manage_notifications/views.py
@@ -12,6 +12,7 @@ from manage_notifications.models import PushNotification
 from manage_notifications.utils import (
     get_eligible_principals_for_notification,
     onesignal_send_notification,
+    send_notification,
 )
 
 # Create your views here.
@@ -87,7 +88,8 @@ class PushNotificationsCreateOrUpdateView(LoginRequiredMixin, generic.View):
         title = push_notification.title
         message = push_notification.message
         image_url = push_notification.banner_image
-        onesignal_send_notification(title, message, image_url, player_ids)
+        # onesignal_send_notification(title, message, image_url, player_ids)
+        send_notification(title, message, image_url, player_ids)
         print(onesignal_send_notification)
         # if onesignal_send_notification(
         #     push_notification.title,
diff --git a/manage_subscriptions/urls.py b/manage_subscriptions/urls.py
index cbd6198..8deff4e 100644
--- a/manage_subscriptions/urls.py
+++ b/manage_subscriptions/urls.py
@@ -73,4 +73,5 @@ urlpatterns = [
     path("stripe/", views.SubscriptionPageView.as_view(), name="stripe"),
     path("success/", views.SuccessView.as_view(), name="success"),
     path("cancel/", views.CancelView.as_view(), name="cancel"),
+    path("join-now/", views.IndexView.as_view(), name="index"),
 ]
diff --git a/manage_subscriptions/views.py b/manage_subscriptions/views.py
index 40b58d6..8110929 100644
--- a/manage_subscriptions/views.py
+++ b/manage_subscriptions/views.py
@@ -342,7 +342,7 @@ class PrincipalSubscriptionDeleteView(LoginRequiredMixin, generic.View):
 
 
 class SubscriptionPageView(TemplateView):
-    template_name = "stripe_html/subscribe.html"
+    template_name = "stripe_html/index.html"
 
     def get(self, request, *args, **kwargs):
         # Example of extracting the token from a query parameter or cookie
@@ -483,3 +483,38 @@ class SuccessView(TemplateView):
 
 class CancelView(TemplateView):
     template_name = "stripe_html/cancel.html"
+
+
+class IndexView(TemplateView):
+    template_name = "stripe_html/index.html"
+
+    def get(self, request, *args, **kwargs):
+        # Example of extracting the token from a query parameter or cookie
+        token = request.GET.get("token")
+        # token = request.GET.get("token") or request.COOKIES.get("jwt")
+        print("token: ", token)
+        if token:
+            try:
+                # Decode and validate token
+                payload = jwt.decode(token, settings.SECRET_KEY, algorithms=["HS256"])
+                print("payload: ", payload)
+                try:
+                    UserModel = get_user_model()
+                    user = UserModel.objects.get(id=payload["user_id"])
+                    # Manually specify the authentication backend
+                    user.backend = "django.contrib.auth.backends.ModelBackend"
+                    # Log the user in
+                    login(request, user)
+                    print("Logged in user: ", user)
+
+                except IAmPrincipal.DoesNotExist:
+                    # Handle expired token
+                    return HttpResponseBadRequest("No Principal Found")
+
+            except jwt.ExpiredSignatureError:
+                # Handle expired token
+                return HttpResponseBadRequest("Expired Signature Error")
+            except jwt.InvalidTokenError:
+                return HttpResponseBadRequest("Invalid Token Error")
+
+        return super().get(request, *args, **kwargs)
diff --git a/templates/payment/images/1 inner.png b/static/images/1 inner.png
similarity index 100%
rename from templates/payment/images/1 inner.png
rename to static/images/1 inner.png
diff --git a/templates/payment/images/1.png b/static/images/1.png
similarity index 100%
rename from templates/payment/images/1.png
rename to static/images/1.png
diff --git a/templates/payment/images/2 inner.png b/static/images/2 inner.png
similarity index 100%
rename from templates/payment/images/2 inner.png
rename to static/images/2 inner.png
diff --git a/templates/payment/images/2.png b/static/images/2.png
similarity index 100%
rename from templates/payment/images/2.png
rename to static/images/2.png
diff --git a/templates/payment/images/3 inner.png b/static/images/3 inner.png
similarity index 100%
rename from templates/payment/images/3 inner.png
rename to static/images/3 inner.png
diff --git a/templates/payment/images/3.png b/static/images/3.png
similarity index 100%
rename from templates/payment/images/3.png
rename to static/images/3.png
diff --git a/templates/payment/images/About Us Banner.png b/static/images/About Us Banner.png
similarity index 100%
rename from templates/payment/images/About Us Banner.png
rename to static/images/About Us Banner.png
diff --git a/templates/payment/images/Adventure.png b/static/images/Adventure.png
similarity index 100%
rename from templates/payment/images/Adventure.png
rename to static/images/Adventure.png
diff --git a/templates/payment/images/Star 1.png b/static/images/Star 1.png
similarity index 100%
rename from templates/payment/images/Star 1.png
rename to static/images/Star 1.png
diff --git a/templates/payment/images/ab.png b/static/images/ab.png
similarity index 100%
rename from templates/payment/images/ab.png
rename to static/images/ab.png
diff --git a/templates/payment/images/about1.png b/static/images/about1.png
similarity index 100%
rename from templates/payment/images/about1.png
rename to static/images/about1.png
diff --git a/templates/payment/images/about2.png b/static/images/about2.png
similarity index 100%
rename from templates/payment/images/about2.png
rename to static/images/about2.png
diff --git a/templates/payment/images/at.png b/static/images/at.png
similarity index 100%
rename from templates/payment/images/at.png
rename to static/images/at.png
diff --git a/templates/payment/images/baner.jpg b/static/images/baner.jpg
similarity index 100%
rename from templates/payment/images/baner.jpg
rename to static/images/baner.jpg
diff --git a/templates/payment/images/banner-mobile-cut.png b/static/images/banner-mobile-cut.png
similarity index 100%
rename from templates/payment/images/banner-mobile-cut.png
rename to static/images/banner-mobile-cut.png
diff --git a/templates/payment/images/banner-mobile.png b/static/images/banner-mobile.png
similarity index 100%
rename from templates/payment/images/banner-mobile.png
rename to static/images/banner-mobile.png
diff --git a/templates/payment/images/group.png b/static/images/group.png
similarity index 100%
rename from templates/payment/images/group.png
rename to static/images/group.png
diff --git a/templates/payment/images/ham.png b/static/images/ham.png
similarity index 100%
rename from templates/payment/images/ham.png
rename to static/images/ham.png
diff --git a/templates/payment/images/iPhone 14 Pro Max.png b/static/images/iPhone 14 Pro Max.png
similarity index 100%
rename from templates/payment/images/iPhone 14 Pro Max.png
rename to static/images/iPhone 14 Pro Max.png
diff --git a/templates/payment/images/icon.png b/static/images/icon.png
similarity index 100%
rename from templates/payment/images/icon.png
rename to static/images/icon.png
diff --git a/templates/payment/images/key mini.png b/static/images/key mini.png
similarity index 100%
rename from templates/payment/images/key mini.png
rename to static/images/key mini.png
diff --git a/templates/payment/images/key nini 2.png b/static/images/key nini 2.png
similarity index 100%
rename from templates/payment/images/key nini 2.png
rename to static/images/key nini 2.png
diff --git a/templates/payment/images/key-main.png b/static/images/key-main.png
similarity index 100%
rename from templates/payment/images/key-main.png
rename to static/images/key-main.png
diff --git a/templates/payment/images/logo.png b/static/images/logo.png
similarity index 100%
rename from templates/payment/images/logo.png
rename to static/images/logo.png
diff --git a/templates/payment/images/menu-left-btn.png b/static/images/menu-left-btn.png
similarity index 100%
rename from templates/payment/images/menu-left-btn.png
rename to static/images/menu-left-btn.png
diff --git a/templates/payment/images/menu-right-btn.png b/static/images/menu-right-btn.png
similarity index 100%
rename from templates/payment/images/menu-right-btn.png
rename to static/images/menu-right-btn.png
diff --git a/templates/payment/images/terms.png b/static/images/terms.png
similarity index 100%
rename from templates/payment/images/terms.png
rename to static/images/terms.png
diff --git a/templates/payment/index.html b/templates/stripe_html/index.html
similarity index 80%
rename from templates/payment/index.html
rename to templates/stripe_html/index.html
index 6251b6d..eebf833 100644
--- a/templates/payment/index.html
+++ b/templates/stripe_html/index.html
@@ -1,15 +1,17 @@
+{% load static %}
 <!DOCTYPE html>
 <html lang="en">
 
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="icon" type="image/x-icon" href="/images/icon.png">
+    <link rel="icon" type="image/x-icon" href="{% static '/images/icon.png' %}">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
         integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous" />
-        <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
-    <link rel="stylesheet" href="style.css">
+    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
+    <link rel="stylesheet" href="{% static 'src/assets/css/payment/style.css' %}">
     <title>Good times</title>
+    <script src="https://js.stripe.com/v3/"></script>
 </head>
 
 <body>
@@ -20,10 +22,10 @@
             <div class="header-main-inner">
                 <div class="logo">
                     <a href="index.html">
-                        <img loading="lazy" src="images/logo.png" alt="logo">
+                        <img loading="lazy" src="{% static '/images/logo.png' %}" alt="logo">
                     </a>
                 </div>
-                <nav class="navs">
+                <!-- <nav class="navs">
                     <div class="cross-btn">
                         &times;
                     </div>
@@ -34,9 +36,9 @@
                     </ul>
                 </nav>
                 <div class="hamburger">
-                    <img loading="lazy" src="images/ham.png" alt>
+                    <img loading="lazy" src="{% static "/images/ham.png" %}" alt>
                 </div>
-                <div class="overlay"></div>
+                <div class="overlay"></div> -->
             </div>
 
         </div>
@@ -61,21 +63,21 @@
 
                         <div class="store-app">
                             <a href>
-                                <img loading="lazy" src="images/menu-left-btn.png" alt>
+                                <img loading="lazy" src="{% static '/images/menu-left-btn.png' %}" alt>
                             </a>
                             <a href class>
-                                <img loading="lazy" src="images/menu-right-btn.png" alt>
+                                <img loading="lazy" src="{% static '/images/menu-right-btn.png' %}" alt>
                             </a>
                         </div>
 
                         <div class="baner-btn">
-                            <button class="common-btn">Join now</button>
+                            <button class="common-btn" id="submitBtn">Join now</button>
                         </div>
                     </div>
                 </div>
                 <div class="col-md-6">
                     <div class="baner-img" data-aos="zoom-in-up" data-aos-duration="1000">
-                        <img loading="lazy" src="images/banner-mobile.png" alt>
+                        <img loading="lazy" src="{% static '/images/banner-mobile.png' %}" alt>
                     </div>
                 </div>
             </div>
@@ -90,13 +92,13 @@
             <div class="row">
                 <div class="col-md-6">
                     <div class="key-main-img text-center" data-aos="flip-left">
-                        <img loading="lazy" src="images/key-main.png" alt>
+                        <img loading="lazy" src="{% static '/images/key-main.png' %}" alt>
                     </div>
 
                 </div>
                 <div class="col-md-6" data-aos="flip-left" data-aos-duration="1000">
                     <div class="key-right-first">
-                        <img loading="lazy" src="images/key mini.png" alt>
+                        <img loading="lazy" src="{% static '/images/key mini.png' %}" alt>
                         <div class="key-right-first-inner">
                             <p class="sec-mini-heading">Comprehensive Event
                                 Listings</p>
@@ -107,7 +109,7 @@
                         </div>
                     </div>
                     <div class="key-right-second">
-                        <img loading="lazy" src="images/key nini 2.png" alt>
+                        <img loading="lazy" src="{% static '/images/key nini 2.png' %}" alt>
                         <div class="key-right-second-inner">
                             <p class="sec-mini-heading">Personalized
                                 Recommendations</p>
@@ -133,30 +135,30 @@
             </p>
             <div class="easy-steps-main">
                 <div class="easy-steps-first">
-                    <img loading="lazy" src="images/1.png" alt class="easy-steps-first-img-num">
+                    <img loading="lazy" src="{% static '/images/1.png' %}" alt class="easy-steps-first-img-num">
                     <h4 class="para-dark">Sign Up</h4>
                     <p class="para">Create your account using your email <br> or
                         social media account.
                     </p>
-                    <img loading="lazy" src="images/1 inner.png" alt class="easy-steps-first-img-bot">
+                    <img loading="lazy" src="{% static '/images/1 inner.png' %}" alt class="easy-steps-first-img-bot">
                 </div>
                 <div class="easy-steps-first">
-                    <img loading="lazy" src="images/2.png" alt class="easy-steps-first-img-num">
+                    <img loading="lazy" src="{% static '/images/2.png' %}" alt class="easy-steps-first-img-num">
                     <h4 class="para-dark">Subscribe</h4>
                     <p class="para">Subscribe, pick your city, and share <br>
                         your
                         interests with us.
                     </p>
-                    <img loading="lazy" src="images/2 inner.png" alt class="easy-steps-first-img-bot">
+                    <img loading="lazy" src="{% static '/images/2 inner.png' %}" alt class="easy-steps-first-img-bot">
                 </div>
                 <div class="easy-steps-first">
-                    <img loading="lazy" src="images/3.png" alt class="easy-steps-first-img-num">
+                    <img loading="lazy" src="{% static '/images/3.png' %}" alt class="easy-steps-first-img-num">
                     <h4 class="para-dark">Start Exploring</h4>
                     <p class="para">Discover your city’s best experiences <br>
                         and
                         events.
                     </p>
-                    <img loading="lazy" src="images/3 inner.png" alt class="easy-steps-first-img-bot">
+                    <img loading="lazy" src="{% static '/images/3 inner.png' %}" alt class="easy-steps-first-img-bot">
                 </div>
             </div>
         </div>
@@ -175,29 +177,29 @@
                     <div class="Adventure-left">
                         <div class="Adventure-rti">
                             <div class="Adventure-icon">
-                                <img loading="lazy" src="images/Star 1.png" alt>
+                                <img loading="lazy" src="{% static '/images/Star 1.png' %}" alt>
                             </div>
                             <div class="Adventure-text">Stay Informed</div>
                         </div>
                         <div class="Adventure-rti">
                             <div class="Adventure-icon">
-                                <img loading="lazy" src="images/Star 1.png" alt>
+                                <img loading="lazy" src="{% static '/images/Star 1.png' %}" alt>
                             </div>
                             <div class="Adventure-text">Curated
                                 Recommendations</div>
                         </div>
                         <div class="Adventure-rti">
                             <div class="Adventure-icon">
-                                <img loading="lazy" src="images/Star 1.png" alt>
+                                <img loading="lazy" src="{% static '/images/Star 1.png' %}" alt>
                             </div>
                             <div class="Adventure-text">Social Sharing</div>
                         </div>
                         <div class="store-app">
                             <a href>
-                                <img loading="lazy" src="images/menu-left-btn.png" alt>
+                                <img loading="lazy" src="{% static '/images/menu-left-btn.png' %}" alt>
                             </a>
                             <a href class>
-                                <img loading="lazy" src="images/menu-right-btn.png" alt>
+                                <img loading="lazy" src="{% static '/images/menu-right-btn.png' %}" alt>
                             </a>
                         </div>
                         <div class="Adventure-btn">
@@ -207,7 +209,7 @@
                 </div>
                 <div class="col-md-6">
                     <div class="Adventure-right text-center">
-                        <img loading="lazy" src="images/Adventure.png" alt>
+                        <img loading="lazy" src="{% static '/images/Adventure.png' %}" alt>
                     </div>
                 </div>
             </div>
@@ -347,16 +349,16 @@
     <section class="footer">
         <div class="container">
             <div class="footer-main-img">
-                <img loading="lazy" src="images/logo.png" alt>
+                <img loading="lazy" src="{% static '/images/logo.png' %}" alt>
             </div>
             <div class="footer-main-grid">
                 <div class="footer-main-grid-first">
                     <div class="store-app">
                         <a href>
-                            <img loading="lazy" src="images/menu-left-btn.png" alt>
+                            <img loading="lazy" src="{% static '/images/menu-left-btn.png' %}" alt>
                         </a>
                         <a href class>
-                            <img loading="lazy" src="images/menu-right-btn.png" alt>
+                            <img loading="lazy" src="{% static '/images/menu-right-btn.png' %}" alt>
                         </a>
                     </div>
                 </div>
@@ -373,9 +375,9 @@
                     </p>
                 </div>
                 <div class="footer-main-grid-fourth">
-                    <div class="footer-btn">
+                    <!-- <div class="footer-btn">
                         <button class="common-btn">Join now</button>
-                    </div>
+                    </div> -->
                     <p class="para">Let the Adventure Begin</p>
                     <p class="para">FAQ
                     </p>
@@ -395,8 +397,36 @@
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
         integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous">
         </script>
-        <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
-    <script src="custom.js"></script>
+    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
+    <script src="{% static 'src/assets/js/payment/custom.js' %}"></script>
+
+    <script>
+        console.log("Sanity check!");
+
+        // Get Stripe publishable key
+        fetch("https://goodtimes.betadelivery.com/subscriptions/stripe-subscription/")
+            .then((result) => { return result.json(); })
+            .then((data) => {
+                // Initialize Stripe.js
+                const stripe = Stripe(data.publicKey);
+
+                // new
+                // Event handler
+                document.querySelector("#submitBtn").addEventListener("click", () => {
+                    // Get Checkout Session ID
+                    fetch("https://goodtimes.betadelivery.com/subscriptions/create-checkout-session/")
+                        .then((result) => { return result.json(); })
+                        .then((data) => {
+                            console.log(data);
+                            // Redirect to Stripe Checkout
+                            return stripe.redirectToCheckout({ sessionId: data.sessionId })
+                        })
+                        .then((res) => {
+                            console.log(res);
+                        });
+                });
+            });
+    </script>
 
 </body>