diff --git a/src/components/About/TeamTab.jsx b/src/components/About/TeamTab.jsx
index 1ec37d4..2c81e2a 100644
--- a/src/components/About/TeamTab.jsx
+++ b/src/components/About/TeamTab.jsx
@@ -35,7 +35,7 @@ const TeamMemberCards = ({ teamMembers }) => {
         return (
             <div
                 key={index}
-                className='w-52 h-auto rounded-lg p-2 flex flex-col items-center justify-center mx-2 hover:scale-110'
+                className='w-52 h-auto my-4 rounded-lg p-2 flex flex-col items-center justify-center mx-2 hover:scale-110'
                 style={gradientStyle}
             >
                 <Image
@@ -70,7 +70,7 @@ const TeamMemberCards = ({ teamMembers }) => {
         );
     });
 
-    return <div className='flex justify-center'>{memberCards}</div>;
+    return <div className='flex flex-wrap justify-center'>{memberCards}</div>;
 };
 
 export default TeamMemberCards;
diff --git a/src/components/About/__test__/__snapshots__/TeamTab.test.js.snap b/src/components/About/__test__/__snapshots__/TeamTab.test.js.snap
index f557f28..572145e 100644
--- a/src/components/About/__test__/__snapshots__/TeamTab.test.js.snap
+++ b/src/components/About/__test__/__snapshots__/TeamTab.test.js.snap
@@ -2,10 +2,10 @@
 
 exports[`renders correctly 1`] = `
 <div
-  className="flex justify-center"
+  className="flex flex-wrap justify-center"
 >
   <div
-    className="w-52 h-auto rounded-lg p-2 flex flex-col items-center justify-center mx-2 hover:scale-110"
+    className="w-52 h-auto my-4 rounded-lg p-2 flex flex-col items-center justify-center mx-2 hover:scale-110"
     style={
       Object {
         "background": "linear-gradient(to top, #BFDFDC, #99B4DF)",
@@ -93,7 +93,7 @@ exports[`renders correctly 1`] = `
     </div>
   </div>
   <div
-    className="w-52 h-auto rounded-lg p-2 flex flex-col items-center justify-center mx-2 hover:scale-110"
+    className="w-52 h-auto my-4 rounded-lg p-2 flex flex-col items-center justify-center mx-2 hover:scale-110"
     style={
       Object {
         "background": "linear-gradient(to bottom, #BFDFDC, #99B4DF)",
diff --git a/src/components/BookingButton/BookingButton.jsx b/src/components/BookingButton/BookingButton.jsx
index f27060d..3b9b5a9 100755
--- a/src/components/BookingButton/BookingButton.jsx
+++ b/src/components/BookingButton/BookingButton.jsx
@@ -9,7 +9,7 @@ export default function BookingButton({ destination, buttonText }) {
     return (
         <div>
             <button
-                className='w-72 h-10 rounded-md text-xs sm:text-base lg:text-xl font-poppins font-regular bg-Accent text-NeutralBlack dark:text-NeutralWhite uppercase   dark:bg-Dark_Accent dark:hover:bg-[#3E4E68]  hover:bg-[#879AB8] hover:text-NeutralWhite hover:scale-105 duration-500'
+                className='w-28 md:w-72 h-10 rounded-md text-xs sm:text-base lg:text-xl font-poppins font-regular bg-Accent text-NeutralBlack dark:text-NeutralWhite uppercase   dark:bg-Dark_Accent dark:hover:bg-[#3E4E68]  hover:bg-[#879AB8] hover:text-NeutralWhite hover:scale-105 duration-500'
                 data-testid='booking-button'
             >
                 <Link href={destination}>{t(buttonText)}</Link>
diff --git a/src/components/BookingButton/__test__/__snapshots__/BookingButton.test.js.snap b/src/components/BookingButton/__test__/__snapshots__/BookingButton.test.js.snap
index 0674ec6..51bc39a 100755
--- a/src/components/BookingButton/__test__/__snapshots__/BookingButton.test.js.snap
+++ b/src/components/BookingButton/__test__/__snapshots__/BookingButton.test.js.snap
@@ -3,7 +3,7 @@
 exports[`renders correctly 1`] = `
 <div>
   <button
-    className="w-72 h-10 rounded-md text-xs sm:text-base lg:text-xl font-poppins font-regular bg-Accent text-NeutralBlack dark:text-NeutralWhite uppercase   dark:bg-Dark_Accent dark:hover:bg-[#3E4E68]  hover:bg-[#879AB8] hover:text-NeutralWhite hover:scale-105 duration-500"
+    className="w-28 md:w-72 h-10 rounded-md text-xs sm:text-base lg:text-xl font-poppins font-regular bg-Accent text-NeutralBlack dark:text-NeutralWhite uppercase   dark:bg-Dark_Accent dark:hover:bg-[#3E4E68]  hover:bg-[#879AB8] hover:text-NeutralWhite hover:scale-105 duration-500"
     data-testid="booking-button"
   >
     <a
diff --git a/src/components/Footer/__test__/__snapshots__/Footer.test.js.snap b/src/components/Footer/__test__/__snapshots__/Footer.test.js.snap
index db6506f..4ea1417 100644
--- a/src/components/Footer/__test__/__snapshots__/Footer.test.js.snap
+++ b/src/components/Footer/__test__/__snapshots__/Footer.test.js.snap
@@ -23,7 +23,7 @@ exports[`renders correctly 1`] = `
     </label>
     <form>
       <fieldset
-        className="form-control w-96 mt-2"
+        className="form-control md:w-96 mt-2"
       >
         <div
           className="relative flex flex-row mr-[-2rem]"
diff --git a/src/components/HomePage/TherapistsInfoSection.jsx b/src/components/HomePage/TherapistsInfoSection.jsx
index a8fabf6..6b0353d 100755
--- a/src/components/HomePage/TherapistsInfoSection.jsx
+++ b/src/components/HomePage/TherapistsInfoSection.jsx
@@ -14,7 +14,7 @@ export default function TherapistsInfoSection() {
 
     //Displaying the therapists info section
     return (
-        <div className='w-full bg-Primary dark:bg-Dark_Primary lg:pb-4'>
+        <div className='w-full py-4 bg-Primary dark:bg-Dark_Primary lg:pb-4'>
             <h1 className='mx-6 mb-2 text-base md:mb-4 md:text-3xl md:mx-9 md:mt-10 font-poppins uppercase font-medium inline-block text-NeutralBlack dark:text-NeutralWhite '>
                 {t(
                     "Professional, licensed, and vetted therapists that you can trust."
diff --git a/src/components/HomePage/__test__/__snapshots__/Banner.test.js.snap b/src/components/HomePage/__test__/__snapshots__/Banner.test.js.snap
index 8a12f9b..bffbdb5 100755
--- a/src/components/HomePage/__test__/__snapshots__/Banner.test.js.snap
+++ b/src/components/HomePage/__test__/__snapshots__/Banner.test.js.snap
@@ -52,7 +52,7 @@ exports[`renders correctly 1`] = `
   >
     <div>
       <button
-        className="w-72 h-10 rounded-md text-xs sm:text-base lg:text-xl font-poppins font-regular bg-Accent text-NeutralBlack dark:text-NeutralWhite uppercase   dark:bg-Dark_Accent dark:hover:bg-[#3E4E68]  hover:bg-[#879AB8] hover:text-NeutralWhite hover:scale-105 duration-500"
+        className="w-28 md:w-72 h-10 rounded-md text-xs sm:text-base lg:text-xl font-poppins font-regular bg-Accent text-NeutralBlack dark:text-NeutralWhite uppercase   dark:bg-Dark_Accent dark:hover:bg-[#3E4E68]  hover:bg-[#879AB8] hover:text-NeutralWhite hover:scale-105 duration-500"
         data-testid="booking-button"
       >
         <a
diff --git a/src/components/HomePage/__test__/__snapshots__/TherapistsInfoSection.test.js.snap b/src/components/HomePage/__test__/__snapshots__/TherapistsInfoSection.test.js.snap
index 510c404..1e88b6e 100755
--- a/src/components/HomePage/__test__/__snapshots__/TherapistsInfoSection.test.js.snap
+++ b/src/components/HomePage/__test__/__snapshots__/TherapistsInfoSection.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`renders correctly 1`] = `
 <div
-  className="w-full bg-Primary dark:bg-Dark_Primary lg:pb-4"
+  className="w-full py-4 bg-Primary dark:bg-Dark_Primary lg:pb-4"
 >
   <h1
     className="mx-6 mb-2 text-base md:mb-4 md:text-3xl md:mx-9 md:mt-10 font-poppins uppercase font-medium inline-block text-NeutralBlack dark:text-NeutralWhite "
@@ -40,7 +40,7 @@ exports[`renders correctly 1`] = `
   >
     <div>
       <button
-        className="w-72 h-10 rounded-md text-xs sm:text-base lg:text-xl font-poppins font-regular bg-Accent text-NeutralBlack dark:text-NeutralWhite uppercase   dark:bg-Dark_Accent dark:hover:bg-[#3E4E68]  hover:bg-[#879AB8] hover:text-NeutralWhite hover:scale-105 duration-500"
+        className="w-28 md:w-72 h-10 rounded-md text-xs sm:text-base lg:text-xl font-poppins font-regular bg-Accent text-NeutralBlack dark:text-NeutralWhite uppercase   dark:bg-Dark_Accent dark:hover:bg-[#3E4E68]  hover:bg-[#879AB8] hover:text-NeutralWhite hover:scale-105 duration-500"
         data-testid="booking-button"
       >
         <a
diff --git a/src/components/Navbar/Navbar.jsx b/src/components/Navbar/Navbar.jsx
index f740087..d3ba34e 100755
--- a/src/components/Navbar/Navbar.jsx
+++ b/src/components/Navbar/Navbar.jsx
@@ -245,10 +245,10 @@ export default function Navbar({ user }) {
                                             </li>
                                             <li>
                                                 <Link
-                                                    href={`/Payment?userid=${user.uid}`}
+                                                    href={`/Tickets?userid=${user.uid}`}
                                                 >
                                                     <FaFileInvoiceDollar />
-                                                    {t("Payments")}
+                                                    {t("Tickets")}
                                                 </Link>
                                             </li>
                                             <li>
@@ -444,11 +444,11 @@ export default function Navbar({ user }) {
                                                     </li>
                                                     <li>
                                                         <Link
-                                                            href={`/StripePayment?userid=${user.uid}`}
+                                                            href={`/Tickets?userid=${user.uid}`}
                                                             className='hover:text-NeutralWhite'
                                                         >
                                                             <FaFileInvoiceDollar />
-                                                            {t("Payments")}
+                                                            {t("Tickets")}
                                                         </Link>
                                                     </li>
                                                     <li>
diff --git a/src/components/NewsletterSignUp/NewsletterSignUp.jsx b/src/components/NewsletterSignUp/NewsletterSignUp.jsx
index 2de1be0..0823098 100644
--- a/src/components/NewsletterSignUp/NewsletterSignUp.jsx
+++ b/src/components/NewsletterSignUp/NewsletterSignUp.jsx
@@ -146,7 +146,7 @@ function NewsletterSignUp() {
 
     return (
         <form>
-            <fieldset className='form-control w-96 mt-2'>
+            <fieldset className='form-control md:w-96 mt-2'>
                 <div className='relative flex flex-row mr-[-2rem]'>
                     <input
                         onChange={emailChange}
diff --git a/src/components/NewsletterSignUp/__test__/__snapshots__/NewsletterSignUp.test.js.snap b/src/components/NewsletterSignUp/__test__/__snapshots__/NewsletterSignUp.test.js.snap
index 7ee6df2..df0fe26 100644
--- a/src/components/NewsletterSignUp/__test__/__snapshots__/NewsletterSignUp.test.js.snap
+++ b/src/components/NewsletterSignUp/__test__/__snapshots__/NewsletterSignUp.test.js.snap
@@ -3,7 +3,7 @@
 exports[`renders correctly 1`] = `
 <form>
   <fieldset
-    className="form-control w-96 mt-2"
+    className="form-control md:w-96 mt-2"
   >
     <div
       className="relative flex flex-row mr-[-2rem]"
diff --git a/src/components/StripePayment/TotalTickets.jsx b/src/components/StripePayment/TotalTickets.jsx
index 19df856..6a2c753 100644
--- a/src/components/StripePayment/TotalTickets.jsx
+++ b/src/components/StripePayment/TotalTickets.jsx
@@ -3,7 +3,7 @@ import React, { useEffect, useState } from "react";
 
 import { db } from "@/util/firebase";
 
-const TotalTickets = ({ user }) => {
+const TotalTickets = ({ user, setTotalTickets }) => {
     const [totalTicketsFromPayments, setTotalTicketsFromPayments] = useState(0);
 
     useEffect(() => {
@@ -46,6 +46,7 @@ const TotalTickets = ({ user }) => {
                     }
 
                     setTotalTicketsFromPayments(totalTickets);
+                    setTotalTickets(totalTickets); //
                 }
             } catch (error) {
                 console.error(error);
@@ -57,7 +58,7 @@ const TotalTickets = ({ user }) => {
 
     return (
         <div className='font-poppins text-base mx-6 md:text-xl md:mx-9 md:pb-9 pb-6 text-NeutralBlack dark:text-NeutralWhite '>
-            Total Tickets from Payments: {totalTicketsFromPayments}
+            Total Tickets: {totalTicketsFromPayments}
         </div>
     );
 };
diff --git a/src/components/StripePayment/__test__/__snapshots__/TotalTickets.test.js.snap b/src/components/StripePayment/__test__/__snapshots__/TotalTickets.test.js.snap
index b53153f..173f0a9 100644
--- a/src/components/StripePayment/__test__/__snapshots__/TotalTickets.test.js.snap
+++ b/src/components/StripePayment/__test__/__snapshots__/TotalTickets.test.js.snap
@@ -4,7 +4,7 @@ exports[`renders correctly 1`] = `
 <div
   className="font-poppins text-base mx-6 md:text-xl md:mx-9 md:pb-9 pb-6 text-NeutralBlack dark:text-NeutralWhite "
 >
-  Total Tickets from Payments: 
+  Total Tickets: 
   0
 </div>
 `;
diff --git a/src/components/User/__test__/__snapshots__/UserProfile.test.js.snap b/src/components/User/__test__/__snapshots__/UserProfile.test.js.snap
index 8a1af1e..0e3357c 100644
--- a/src/components/User/__test__/__snapshots__/UserProfile.test.js.snap
+++ b/src/components/User/__test__/__snapshots__/UserProfile.test.js.snap
@@ -211,7 +211,7 @@ exports[`renders correctly 1`] = `
                   </li>
                   <li>
                     <a
-                      href="/Payment?userid=undefined"
+                      href="/Tickets?userid=undefined"
                       onClick={[Function]}
                       onMouseEnter={[Function]}
                       onTouchStart={[Function]}
@@ -234,7 +234,7 @@ exports[`renders correctly 1`] = `
                           d="M64 0C28.7 0 0 28.7 0 64V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V160H256c-17.7 0-32-14.3-32-32V0H64zM256 0V128H384L256 0zM64 80c0-8.8 7.2-16 16-16h64c8.8 0 16 7.2 16 16s-7.2 16-16 16H80c-8.8 0-16-7.2-16-16zm0 64c0-8.8 7.2-16 16-16h64c8.8 0 16 7.2 16 16s-7.2 16-16 16H80c-8.8 0-16-7.2-16-16zm128 72c8.8 0 16 7.2 16 16v17.3c8.5 1.2 16.7 3.1 24.1 5.1c8.5 2.3 13.6 11 11.3 19.6s-11 13.6-19.6 11.3c-11.1-3-22-5.2-32.1-5.3c-8.4-.1-17.4 1.8-23.6 5.5c-5.7 3.4-8.1 7.3-8.1 12.8c0 3.7 1.3 6.5 7.3 10.1c6.9 4.1 16.6 7.1 29.2 10.9l.5 .1 0 0 0 0c11.3 3.4 25.3 7.6 36.3 14.6c12.1 7.6 22.4 19.7 22.7 38.2c.3 19.3-9.6 33.3-22.9 41.6c-7.7 4.8-16.4 7.6-25.1 9.1V440c0 8.8-7.2 16-16 16s-16-7.2-16-16V422.2c-11.2-2.1-21.7-5.7-30.9-8.9l0 0c-2.1-.7-4.2-1.4-6.2-2.1c-8.4-2.8-12.9-11.9-10.1-20.2s11.9-12.9 20.2-10.1c2.5 .8 4.8 1.6 7.1 2.4l0 0 0 0 0 0c13.6 4.6 24.6 8.4 36.3 8.7c9.1 .3 17.9-1.7 23.7-5.3c5.1-3.2 7.9-7.3 7.8-14c-.1-4.6-1.8-7.8-7.7-11.6c-6.8-4.3-16.5-7.4-29-11.2l-1.6-.5 0 0c-11-3.3-24.3-7.3-34.8-13.7c-12-7.2-22.6-18.9-22.7-37.3c-.1-19.4 10.8-32.8 23.8-40.5c7.5-4.4 15.8-7.2 24.1-8.7V232c0-8.8 7.2-16 16-16z"
                         />
                       </svg>
-                      Payments
+                      Tickets
                     </a>
                   </li>
                   <li>
@@ -937,7 +937,7 @@ exports[`renders correctly 1`] = `
       </label>
       <form>
         <fieldset
-          className="form-control w-96 mt-2"
+          className="form-control md:w-96 mt-2"
         >
           <div
             className="relative flex flex-row mr-[-2rem]"
diff --git a/src/components/User/__test__/__snapshots__/updateTherapist.test.js.snap b/src/components/User/__test__/__snapshots__/updateTherapist.test.js.snap
index a646bdf..636d986 100644
--- a/src/components/User/__test__/__snapshots__/updateTherapist.test.js.snap
+++ b/src/components/User/__test__/__snapshots__/updateTherapist.test.js.snap
@@ -110,7 +110,7 @@ exports[`renders correctly 1`] = `
                 <summary
                   className="text-Accent text-lg font-bold underline font-poppins text-NeutralBlack font-semibold dark:text-NeutralWhite"
                 >
-                  User
+                  John Doe
                 </summary>
                 <ul
                   className="menu w-32 text-NeutralBlack font-medium font-poppins"
@@ -211,7 +211,7 @@ exports[`renders correctly 1`] = `
                   </li>
                   <li>
                     <a
-                      href="/Payment?userid=undefined"
+                      href="/Tickets?userid=undefined"
                       onClick={[Function]}
                       onMouseEnter={[Function]}
                       onTouchStart={[Function]}
@@ -234,7 +234,7 @@ exports[`renders correctly 1`] = `
                           d="M64 0C28.7 0 0 28.7 0 64V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V160H256c-17.7 0-32-14.3-32-32V0H64zM256 0V128H384L256 0zM64 80c0-8.8 7.2-16 16-16h64c8.8 0 16 7.2 16 16s-7.2 16-16 16H80c-8.8 0-16-7.2-16-16zm0 64c0-8.8 7.2-16 16-16h64c8.8 0 16 7.2 16 16s-7.2 16-16 16H80c-8.8 0-16-7.2-16-16zm128 72c8.8 0 16 7.2 16 16v17.3c8.5 1.2 16.7 3.1 24.1 5.1c8.5 2.3 13.6 11 11.3 19.6s-11 13.6-19.6 11.3c-11.1-3-22-5.2-32.1-5.3c-8.4-.1-17.4 1.8-23.6 5.5c-5.7 3.4-8.1 7.3-8.1 12.8c0 3.7 1.3 6.5 7.3 10.1c6.9 4.1 16.6 7.1 29.2 10.9l.5 .1 0 0 0 0c11.3 3.4 25.3 7.6 36.3 14.6c12.1 7.6 22.4 19.7 22.7 38.2c.3 19.3-9.6 33.3-22.9 41.6c-7.7 4.8-16.4 7.6-25.1 9.1V440c0 8.8-7.2 16-16 16s-16-7.2-16-16V422.2c-11.2-2.1-21.7-5.7-30.9-8.9l0 0c-2.1-.7-4.2-1.4-6.2-2.1c-8.4-2.8-12.9-11.9-10.1-20.2s11.9-12.9 20.2-10.1c2.5 .8 4.8 1.6 7.1 2.4l0 0 0 0 0 0c13.6 4.6 24.6 8.4 36.3 8.7c9.1 .3 17.9-1.7 23.7-5.3c5.1-3.2 7.9-7.3 7.8-14c-.1-4.6-1.8-7.8-7.7-11.6c-6.8-4.3-16.5-7.4-29-11.2l-1.6-.5 0 0c-11-3.3-24.3-7.3-34.8-13.7c-12-7.2-22.6-18.9-22.7-37.3c-.1-19.4 10.8-32.8 23.8-40.5c7.5-4.4 15.8-7.2 24.1-8.7V232c0-8.8 7.2-16 16-16z"
                         />
                       </svg>
-                      Payments
+                      Tickets
                     </a>
                   </li>
                   <li>
@@ -448,7 +448,7 @@ exports[`renders correctly 1`] = `
     className="pt-12"
   >
     <div
-      className="flex justify-center font-semibold font-poppins flex-col md:flex-row  max-w-screen bg-NeutralWhite dark:bg-NeutralBlack"
+      className="flex justify-center px-8 md:px-0 mt-16 font-semibold font-poppins flex-col md:flex-row  max-w-screen bg-NeutralWhite dark:bg-NeutralBlack"
     >
       <div
         className="pb-12 lg:py-16 lg:w-[60%] md:[60%] flex "
@@ -537,7 +537,7 @@ exports[`renders correctly 1`] = `
                 name="name"
                 onChange={[Function]}
                 type="text"
-                value=""
+                value="John Doe"
               />
             </div>
             <div
@@ -573,7 +573,7 @@ exports[`renders correctly 1`] = `
                 name="Birth Date"
                 onChange={[Function]}
                 type="date"
-                value=""
+                value="1990-01-01"
               />
             </div>
             <div
@@ -591,6 +591,7 @@ exports[`renders correctly 1`] = `
                 name="email"
                 onChange={[Function]}
                 type="email"
+                value="johndoe@example.com"
               />
             </div>
             <div
@@ -608,6 +609,7 @@ exports[`renders correctly 1`] = `
                 name="phone"
                 onChange={[Function]}
                 type="number"
+                value="1234567890"
               />
             </div>
           </form>
@@ -647,7 +649,7 @@ exports[`renders correctly 1`] = `
       </label>
       <form>
         <fieldset
-          className="form-control w-96 mt-2"
+          className="form-control md:w-96 mt-2"
         >
           <div
             className="relative flex flex-row mr-[-2rem]"
diff --git a/src/components/User/__test__/updateTherapist.test.js b/src/components/User/__test__/updateTherapist.test.js
index 9dd5ce4..776a2e0 100644
--- a/src/components/User/__test__/updateTherapist.test.js
+++ b/src/components/User/__test__/updateTherapist.test.js
@@ -2,7 +2,16 @@ import renderer from "react-test-renderer";
 
 import TherapistProfile from "../updateTherapist";
 
+const user = {
+    // Populate with necessary user data for testing
+    name: "John Doe",
+    birthDate: "1990-01-01",
+    email: "johndoe@example.com",
+    phoneNumber: "1234567890",
+    // Add other user properties as needed
+};
+
 it("renders correctly", () => {
-    const tree = renderer.create(<TherapistProfile />).toJSON();
+    const tree = renderer.create(<TherapistProfile user={user} />).toJSON();
     expect(tree).toMatchSnapshot();
 });
diff --git a/src/components/User/updateTherapist.jsx b/src/components/User/updateTherapist.jsx
index 4fc9d7e..a31d4d6 100644
--- a/src/components/User/updateTherapist.jsx
+++ b/src/components/User/updateTherapist.jsx
@@ -16,7 +16,7 @@ import { useAppcontext } from "@/context/state";
 import Layout from "@/layout/Layout";
 import { auth, db } from "@/util/firebase";
 
-export default function TherapistProfile(user) {
+export default function TherapistProfile({ user }) {
     const { t } = useTranslation("common");
     const { setProfileUpdated, setUser } = useAppcontext();
     const [fullName, setFullName] = useState(user.name || "");
@@ -123,7 +123,7 @@ export default function TherapistProfile(user) {
             <Head>
                 <title>{t("Update therapist profile")}</title>
             </Head>
-            <div className='flex justify-center font-semibold font-poppins flex-col md:flex-row  max-w-screen bg-NeutralWhite dark:bg-NeutralBlack'>
+            <div className='flex justify-center px-8 md:px-0 mt-16 font-semibold font-poppins flex-col md:flex-row  max-w-screen bg-NeutralWhite dark:bg-NeutralBlack'>
                 <div className='pb-12 lg:py-16 lg:w-[60%] md:[60%] flex '>
                     <div className='bg-NeutralBlack dark:bg-NeutralWhite border-2 w-80 h-80 rounded-full mx-auto flex flex-col items-center justify-center relative overflow-visible'>
                         {user.photoURL ? (
@@ -266,12 +266,3 @@ export default function TherapistProfile(user) {
         </Layout>
     );
 }
-
-// export async function getStaticProps({ locale }) {
-//     return {
-//         props: {
-//             ...(await serverSideTranslations(locale, ["common"])),
-//             // Will be passed to the page component as props
-//         },
-//     };
-// }
diff --git a/src/components/booking/7Submission.jsx b/src/components/booking/7Submission.jsx
index 3e2d6b7..9e7bb83 100644
--- a/src/components/booking/7Submission.jsx
+++ b/src/components/booking/7Submission.jsx
@@ -9,13 +9,18 @@ import {
 } from "firebase/firestore";
 import Head from "next/head";
 import { useTranslation } from "next-i18next";
-import React from "react";
+import React, { useState } from "react";
 
 import { useAppcontext } from "@/context/state";
 import { auth, db } from "@/util/firebase";
+import TotalTickets from "../StripePayment/TotalTickets";
+
 export default function Submission({ OnNext, OnPrevious }) {
     const { bookingInfos, user, setUser } = useAppcontext();
     const { t } = useTranslation("common");
+    const [totalTickets, setTotalTickets] = useState(0); // Track total tickets
+    console.log("im totaaaaal", totalTickets);
+
     async function handleSubmit() {
         const appointment = {
             date: bookingInfos.date,
@@ -97,6 +102,7 @@ export default function Submission({ OnNext, OnPrevious }) {
         });
 
         const userId = user.uid;
+        setTotalTickets((prevTickets) => prevTickets - 1);
 
         async function assignTherapist() {
             if (!userId) {
@@ -151,7 +157,6 @@ export default function Submission({ OnNext, OnPrevious }) {
                 console.error("Error assigning therapist:", error);
             }
         }
-
         assignTherapist();
         OnNext();
     }
@@ -171,11 +176,15 @@ export default function Submission({ OnNext, OnPrevious }) {
 
                 <div className=" bg-NeutralWhite dark:bg-Dark_Accent lg:w-3/5 lg:h-1/2 sm:w-full sm:h-[80%] sm:leading-tight mx-auto mt-14 shadow-[4.0px_8.0px_8.0px_rgba(0,0,0,0.42)] rounded-lg relative'">
                     <div className='flex flex-col justify-center items-center text-center'>
-                        <h3 className=' rounded-md py-12 text-NeutralBlack dark:text-NeutralWhite text-2xl font-semibold font-poppins capitalize'>
+                        <h3 className=' rounded-md py-6 text-NeutralBlack dark:text-NeutralWhite text-2xl font-semibold font-poppins capitalize'>
                             {t("Please be aware that this action")}
                             <br />
                             {t("will cost you a ticket!")}
                         </h3>
+                        <TotalTickets
+                            user={user}
+                            setTotalTickets={setTotalTickets}
+                        />
                     </div>
                     <div className='flex justify-between '>
                         <div className=' pl-6 py-10 lg:py-10 lg:pl-11 group '>
@@ -186,13 +195,28 @@ export default function Submission({ OnNext, OnPrevious }) {
                                 {t("Previous")}
                             </button>
                         </div>
-                        <div className=' pr-6 py-10 lg:py-10 lg:pr-11 group '>
-                            <button
-                                className='w-28 h-10 rounded-md text-base font-poppins font-regular bg-Accent text-NeutralBlack dark:text-NeutralWhite dark:bg-Dark_Primary dark:hover:bg-[#3E4E68]  hover:bg-[#879AB8] hover:text-NeutralWhite hover:scale-105 duration-500'
-                                onClick={handleSubmit}
-                            >
-                                {t("Submit")}
-                            </button>
+
+                        <div className=' pr-6 py-10 lg:py-10 lg:pr-11 group'>
+                            {totalTickets === 0 ? (
+                                <div className='flex flex-col justify-end items-end'>
+                                    <button
+                                        disabled
+                                        className='w-28 h-10 rounded-md text-base font-poppins font-regular bg-gray-300 text-NeutralBlack dark:text-NeutralWhite'
+                                    >
+                                        {t("Submit")}
+                                    </button>
+                                    <p className='font-poppins text-xs mt-2'>
+                                        Please purchase a ticket first.
+                                    </p>
+                                </div>
+                            ) : (
+                                <button
+                                    className='w-28 h-10 rounded-md text-base font-poppins font-regular bg-Accent text-NeutralBlack dark:text-NeutralWhite dark:bg-Dark_Primary dark:hover:bg-[#3E4E68]  hover:bg-[#879AB8] hover:text-NeutralWhite hover:scale-105 duration-500'
+                                    onClick={handleSubmit}
+                                >
+                                    {t("Submit")}
+                                </button>
+                            )}
                         </div>
                     </div>
                 </div>
diff --git a/src/components/booking/__test__/__snapshots__/7Submission.test.js.snap b/src/components/booking/__test__/__snapshots__/7Submission.test.js.snap
index 3cd076b..2266029 100644
--- a/src/components/booking/__test__/__snapshots__/7Submission.test.js.snap
+++ b/src/components/booking/__test__/__snapshots__/7Submission.test.js.snap
@@ -24,12 +24,18 @@ exports[`renders correctly 1`] = `
         className="flex flex-col justify-center items-center text-center"
       >
         <h3
-          className=" rounded-md py-12 text-NeutralBlack dark:text-NeutralWhite text-2xl font-semibold font-poppins capitalize"
+          className=" rounded-md py-6 text-NeutralBlack dark:text-NeutralWhite text-2xl font-semibold font-poppins capitalize"
         >
           Please be aware that this action
           <br />
           will cost you a ticket!
         </h3>
+        <div
+          className="font-poppins text-base mx-6 md:text-xl md:mx-9 md:pb-9 pb-6 text-NeutralBlack dark:text-NeutralWhite "
+        >
+          Total Tickets: 
+          0
+        </div>
       </div>
       <div
         className="flex justify-between "
@@ -44,14 +50,23 @@ exports[`renders correctly 1`] = `
           </button>
         </div>
         <div
-          className=" pr-6 py-10 lg:py-10 lg:pr-11 group "
+          className=" pr-6 py-10 lg:py-10 lg:pr-11 group"
         >
-          <button
-            className="w-28 h-10 rounded-md text-base font-poppins font-regular bg-Accent text-NeutralBlack dark:text-NeutralWhite dark:bg-Dark_Primary dark:hover:bg-[#3E4E68]  hover:bg-[#879AB8] hover:text-NeutralWhite hover:scale-105 duration-500"
-            onClick={[Function]}
+          <div
+            className="flex flex-col justify-end items-end"
           >
-            Submit
-          </button>
+            <button
+              className="w-28 h-10 rounded-md text-base font-poppins font-regular bg-gray-300 text-NeutralBlack dark:text-NeutralWhite"
+              disabled={true}
+            >
+              Submit
+            </button>
+            <p
+              className="font-poppins text-xs mt-2"
+            >
+              Please purchase a ticket first.
+            </p>
+          </div>
         </div>
       </div>
     </div>
diff --git a/src/pages/Auth/index.jsx b/src/pages/Auth/index.jsx
index 110923c..eb1e9b8 100755
--- a/src/pages/Auth/index.jsx
+++ b/src/pages/Auth/index.jsx
@@ -74,8 +74,7 @@ function Auth() {
 
                     // Set cookie for 7 days upon successful sign-up
                     Cookie.set("loggedInUser", user.uid, { expires: 7 });
-
-                    router.push(`/thanks?from=${window.location.pathname}`);
+                    router.push(`/thanks?from=${pathname}`);
                 }
                 authChange();
             })
diff --git a/src/pages/Payment/index.jsx b/src/pages/Payment/index.jsx
deleted file mode 100755
index eefeac4..0000000
--- a/src/pages/Payment/index.jsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import Head from "next/head";
-import Image from "next/image";
-import { useTranslation } from "next-i18next";
-import { serverSideTranslations } from "next-i18next/serverSideTranslations";
-import React from "react";
-
-import PaymentFormII from "@/components/PaymentForm/PaymentFormII";
-
-import Layout from "@/layout/Layout";
-
-import card from "../../../public/assets/Group 166.png";
-
-const CardDetailsPage = () => {
-    const { t } = useTranslation("common");
-
-    return (
-        <div className='bg-cover bg-NeutralWhite dark:bg-Dark_Accent bg-center  flex flex-col'>
-            <Layout>
-                <Head>
-                    <title>{t("Payment")}</title>
-                </Head>
-                <div className=' flex flex-col ml-8 mr-10 my-12 '>
-                    <h1 className='text-NeutralBlack dark:text-NeutralWhite font-poppins font-bold text-3xl'>
-                        {t("Add Card Details")}
-                    </h1>
-                    <p className='text-NeutralBlack dark:text-NeutralWhite font-poppins  text-lg'>
-                        {t(
-                            "Please make sure all of the info you enter are the same as your card registration info."
-                        )}
-                    </p>
-                    <div className='flex flex-col gap-4 md:justify-center mt-6 md:flex-row md:items-center'>
-                        <div className='w-full lg:w-2/3 md:pr-6'>
-                            <PaymentFormII />
-                        </div>
-                        <div className='w-full hidden lg:block md:w-fit md:pl-6 '>
-                            <div className='h-full flex items-center justify-center -mt-4 dark:brightness-90'>
-                                <Image
-                                    src={card}
-                                    alt='payment cards'
-                                    width={300}
-                                    height={150}
-                                />
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </Layout>
-        </div>
-    );
-};
-
-export default CardDetailsPage;
-
-export async function getStaticProps({ locale }) {
-    return {
-        props: {
-            ...(await serverSideTranslations(locale, ["common"])),
-            // Will be passed to the page component as props
-        },
-    };
-}
diff --git a/src/pages/Payment/Tickets.jsx b/src/pages/Tickets/index.jsx
similarity index 99%
rename from src/pages/Payment/Tickets.jsx
rename to src/pages/Tickets/index.jsx
index 4a2300f..e8d9b06 100644
--- a/src/pages/Payment/Tickets.jsx
+++ b/src/pages/Tickets/index.jsx
@@ -78,7 +78,7 @@ const Tickets = ({ user }) => {
                     {cards}
                 </div>
             </div>
-            <TotalTickets />
+            <TotalTickets user={user} />
         </Layout>
     );
 };
diff --git a/src/pages/booking/index.jsx b/src/pages/booking/index.jsx
index 3423ed6..c68ca38 100644
--- a/src/pages/booking/index.jsx
+++ b/src/pages/booking/index.jsx
@@ -72,7 +72,7 @@ function BookingPage({ dates, user }) {
             <Head>
                 <title>{t("Booking")}</title>
             </Head>
-            {Step()}
+            <div className='my-12'>{Step()}</div>
         </Layout>
     );
 }
diff --git a/src/pages/calendar/index.jsx b/src/pages/calendar/index.jsx
index 03d761a..4110206 100644
--- a/src/pages/calendar/index.jsx
+++ b/src/pages/calendar/index.jsx
@@ -8,6 +8,7 @@ import { useRouter } from "next/navigation";
 import { useTranslation } from "next-i18next";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import React, { useState } from "react";
+import styles from "../../styles/Calendar.module.css";
 
 import EventModal from "@/components/calendarEvents/EventModal";
 
@@ -74,9 +75,11 @@ function Calendar({ appointments, user }) {
                     userId={user.uid}
                 />
             )}
-            <div className='px-32 py-6 h-screen'>
+            <div
+                className={`${styles.calendarContainer} px-4 md:px-36 mt-16 mb-44 h-screen`}
+            >
                 <FullCalendar
-                    className='dark:bg-Dark_Primary text-NeutralBlack'
+                    className='text-NeutralBlack dark:text-NeutralWhite dark:bg-Dark_Primary '
                     initialView='dayGridMonth'
                     events={events}
                     eventClick={handleEventClick}
@@ -84,15 +87,16 @@ function Calendar({ appointments, user }) {
                     expandRows={false}
                     dayMaxEventRows={3}
                     // aspectRatio={2}
+
                     contentHeight='auto'
                     headerToolbar={{
-                        start: "bookApp",
-                        center: "title",
-                        end: "prev,next",
+                        start: "title",
+                        center: "",
+                        end: "prev next",
                     }}
                     footerToolbar={{
                         start: "",
-                        center: "",
+                        center: "bookApp",
                         end: "",
                     }}
                     customButtons={
@@ -100,7 +104,7 @@ function Calendar({ appointments, user }) {
                             ? {}
                             : {
                                   bookApp: {
-                                      text: "Book appointment",
+                                      text: "Book an appointment",
                                       click: function () {
                                           router.push(
                                               `/booking?userid=${user.uid}`
diff --git a/src/styles/Calendar.module.css b/src/styles/Calendar.module.css
new file mode 100644
index 0000000..c82c938
--- /dev/null
+++ b/src/styles/Calendar.module.css
@@ -0,0 +1,39 @@
+/* calendar.module.css */
+
+/* Add your custom styles here */
+.calendarContainer {
+    /* Define styles for the calendar container */
+    /* Example: */
+}
+
+/* Define specific styles for the header and footer buttons */
+.calendarHeaderButton {
+    /* Styles for header buttons */
+    /* Example: */
+    color: #333;
+}
+
+.calendarFooterButton {
+    /* Styles for footer buttons */
+    /* Example: */
+    color: #007bff;
+}
+
+/* Styles for FullCalendar header toolbar */
+.fullCalendarToolbar {
+    background-color: #f0f0f0;
+    padding: 10px;
+    color: #007bff;
+    /* Add more styles as needed */
+}
+
+.fullCalendarTitle {
+    font-size: 3rem;
+    color: brown;
+    /* Customize title styles */
+}
+
+/* Additional styles for specific toolbar elements */
+.fullCalendarButton {
+    /* Styles for buttons in the toolbar */
+}