diff --git a/Frontend/app/(admin)/pricing/actions.ts b/Frontend/app/(admin)/pricing/actions.ts
index 75e8a42..bbf07f2 100644
--- a/Frontend/app/(admin)/pricing/actions.ts
+++ b/Frontend/app/(admin)/pricing/actions.ts
@@ -22,10 +22,13 @@ export async function apiPrices() {
       }
     );
     const productResponse = await productRequest.json();
+    console.log("app/pricing/actions","productResponse",productResponse)
     const unsortedProducts: Product[] = productResponse.items;
+    console.log("app/pricing/actions","unsortedProducts",unsortedProducts)
     const prices = await pb.collection("price").getFullList<Price>();
+    console.log("app/pricing/actions","prices",prices)
     for (const product of unsortedProducts) {
-        product.metadata.benefits = JSON.parse(product.metadata.benefits as any);
+        product.metadata.benefits = product?.metadata?.benefits ? JSON.parse(product.metadata.benefits as any) : [];
         const pricesOfProduct = prices.filter(price => price.product_id === product.product_id);
         for (const priceOfProduct of pricesOfProduct){
             if (priceOfProduct.interval === "year"){
diff --git a/Frontend/app/(auth)/account/page.tsx b/Frontend/app/(auth)/account/page.tsx
index ec3b7a5..89dc1a9 100644
--- a/Frontend/app/(auth)/account/page.tsx
+++ b/Frontend/app/(auth)/account/page.tsx
@@ -15,11 +15,15 @@ export default async function AccountPage() {
   !pb.authStore.isValid && redirect("/");
   return (
     user && (
-      <>
+      <main
+        id="content"
+        role="main"
+        className="h-full flex flex-col min-h-screen mx-auto w-screen overflow-hidden bg-white dark:bg-black"
+      >
         <PageHeader title="Account" subtitle={<></>} />
 
         <AccountContent user={user} />
-      </>
+      </main>
     )
   );
 }
diff --git a/Frontend/app/(auth)/actions.ts b/Frontend/app/(auth)/actions.ts
index 067488c..388dae8 100644
--- a/Frontend/app/(auth)/actions.ts
+++ b/Frontend/app/(auth)/actions.ts
@@ -58,6 +58,7 @@ export async function signup(formData: SignUpForm) {
   const email = formData.email;
   const password = formData.password;
   const organisation = formData.organisation;
+  console.log('app/(auth)/actions', 'organisation', organisation)
   const pocketbaseUrl = process.env.NEXT_PUBLIC_POCKETBASE_URL_STRING as string;
   const adminToken = process.env.NEXT_PUBLIC_POCKETBASE_ADMIN_TOKEN as string;
   try {
@@ -211,6 +212,8 @@ export async function getSubscriptions() {
   pb.authStore.loadFromCookie(cookie?.value || '');
   const userId = (pb.authStore.model as User).id
   const subscriptions = await pb.collection("subscription").getFullList<Subscription>({filter: `user_id="${userId}" && status="active"`});
+  console.log('here')
+  console.log('app/(auth)/actions', 'subscriptions', subscriptions)
   if (subscriptions.length === 0){
     return [];
   }
diff --git a/Frontend/components/Header.tsx b/Frontend/components/Header.tsx
index beda630..bc9f497 100644
--- a/Frontend/components/Header.tsx
+++ b/Frontend/components/Header.tsx
@@ -29,18 +29,22 @@ function Header({ isUserLoggedIn }: HeaderProps) {
               {!isUserLoggedIn ? (
                 <>
                   <button
-                    onClick={() => async (router?: AppRouterInstance) => {
-                      const authCookie = await getAuthCookie();
-                      pb.authStore.loadFromCookie(authCookie || "");
-                      if (!authCookie || !pb.authStore.isValid) {
-                        document
-                          .getElementById("sign-in-modal")
-                          ?.setAttribute("name", "signIn");
-                        document.getElementById("sign-in-modal")?.click();
-                      } else {
-                        router?.push("/account");
-                      }
-                    }}
+                    onClick={() =>
+                      (async (router?: AppRouterInstance) => {
+                        console.log("firing");
+                        const authCookie = await getAuthCookie();
+                        pb.authStore.loadFromCookie(authCookie || "");
+                        if (!authCookie || !pb.authStore.isValid) {
+                          console.log("firing");
+                          document
+                            .getElementById("sign-in-modal")
+                            ?.setAttribute("name", "signIn");
+                          document.getElementById("sign-in-modal")?.click();
+                        } else {
+                          router?.push("/account");
+                        }
+                      })()
+                    }
                     className={`btn-sm cursor-pointer rounded py-5 w-24 text-primary hover:text-primary/70`}
                   >
                     Sign In
diff --git a/Frontend/sections/AccountContent.tsx b/Frontend/sections/AccountContent.tsx
index 9b906d3..212e249 100644
--- a/Frontend/sections/AccountContent.tsx
+++ b/Frontend/sections/AccountContent.tsx
@@ -74,17 +74,21 @@ function AccountContent({ user }: ManageSubscriptionProps) {
     </div>
   ) : (
     <div className="flex flex-col">
-      {subscription ? (
+      {/* //TODO: Create Application Component */}
+      {/* {subscription ? (
         <div className="max-w-6xl mx-auto h-full w-full py-8 px-6 md:pt-12">
-          <div className="flex flex-row justify-between w-full bg-gray-700 p-8 rounded">
+          <div className="flex flex-row justify-between w-full bg-gray-100 dark:bg-gray-700 p-8 rounded">
             <div>
-              <h3 className="font-architects-daughter text-xl text-pink-600 mb-2">
+              <h3 className="font-architects-daughter text-xl text-secondary mb-2">
                 Get Started
               </h3>
               <ol className="list-decimal ml-6">
                 <li>
                   <p className="text-lg text-white">
-                    <a href={downloadApplicationLink} className="text-pink-500">
+                    <a
+                      href={downloadApplicationLink}
+                      className="text-secondary"
+                    >
                       Download the application
                     </a>{" "}
                     by scanning the QR code
@@ -94,7 +98,7 @@ function AccountContent({ user }: ManageSubscriptionProps) {
                   <p className="text-lg text-white">
                     <a
                       href={portalWebsiteTemplatesLink}
-                      className="text-pink-500"
+                      className="text-secondary"
                     >
                       Upload some PDF
                     </a>{" "}
@@ -106,7 +110,7 @@ function AccountContent({ user }: ManageSubscriptionProps) {
                     Setup some{" "}
                     <a
                       href={portalWebsiteIntegrationsLink}
-                      className="text-pink-500"
+                      className="text-secondary"
                     >
                       Integrations
                     </a>
@@ -138,35 +142,35 @@ function AccountContent({ user }: ManageSubscriptionProps) {
         </div>
       ) : (
         <></>
-      )}
+      )} */}
       <div className="max-w-6xl mx-auto mb-2 h-full w-full px-6">
-        <div className="w-full bg-gray-700 p-8 rounded">
-          <h3 className="font-architects-daughter text-xl text-pink-600 mb-2">
+        <div className="w-full bg-gray-100 dark:bg-gray-700 p-8 rounded">
+          <h3 className="font-architects-daughter text-xl text-secondary mb-2">
             Your Subscription
           </h3>
           {subscription ? (
             <>
-              <h2 className="h2 text-3xl mb-3">
+              <h2 className="h2 text-3xl mb-3 text-base-content">
                 {subscription?.product?.name}
               </h2>
-              <p className="text-lg text-white mb-4">
+              <p className="text-lg text-base-content mb-4">
                 {subscription.product?.description}
               </p>
               <button
                 onClick={manageSubscription}
-                className="btn text-base capitalize !rounded-md text-white bg-bg-gray-925 hover:bg-gray-900 w-full sm:w-auto mt-8"
+                className="btn text-base capitalize !rounded-md text-base-300 bg-secondary hover:bg-secondary/60 w-full sm:w-auto mt-8"
               >
                 Manage Subscription
               </button>
             </>
           ) : (
             <>
-              <p className="text-lg text-white mb-4">
+              <p className="text-lg text-base-content mb-4">
                 {"You haven’t upgraded your workflow yet"}
               </p>
               <button
                 onClick={() => router.push("/pricing")}
-                className="px-10 py-2 text-base capitalize !rounded-3xl text-white bg-gradient-to-r from-primary to-secondary hover:bg-gray-900 w-full sm:w-auto"
+                className="px-10 py-2 text-base capitalize !rounded-3xl text-base-content bg-gradient-to-r from-primary to-secondary hover:bg-gray-900 w-full sm:w-auto"
               >
                 Upgrade
               </button>
diff --git a/Frontend/sections/ModalSignIn/ModalSignIn.tsx b/Frontend/sections/ModalSignIn/ModalSignIn.tsx
index ff5b876..ba0edce 100644
--- a/Frontend/sections/ModalSignIn/ModalSignIn.tsx
+++ b/Frontend/sections/ModalSignIn/ModalSignIn.tsx
@@ -10,6 +10,7 @@ import SuccessModal from "@/sections/SuccessModal";
 import LoadingModal from "@/sections/LoadingModal";
 import Image from "next/image";
 import { ModalStatus } from "@/types";
+import Icon from "@/components/icon";
 
 function ModalSignIn() {
   const [status, setStatus] = useState<ModalStatus>(ModalStatus.Default);
@@ -31,18 +32,14 @@ function ModalSignIn() {
         onChange={whenModalOpens}
       />
       <label htmlFor="sign-in-modal" className="modal cursor-pointer">
-        <label className="modal-box relative bg-gray-850 max-w-full md:max-w-[550px] py-4 px-3 md:p-6">
+        <label className="modal-box relative bg-gray-100 dark:bg-gray-850 max-w-full md:max-w-[550px] py-4 px-3 md:p-6">
           <div className="flex justify-end pb-2 select-none">
             <label
               onClick={handleCloseModal}
               htmlFor="sign-in-modal"
               className="cursor-pointer"
             >
-              <Image
-                className="rounded-full p-1 hover:bg-gray-500"
-                src={xButton}
-                alt={""}
-              />
+              <Icon name="Dismiss20Filled" size="medium" />
             </label>
           </div>
           <div className={status === ModalStatus.Default ? "block" : "hidden"}>
diff --git a/Frontend/sections/ModalSignIn/ModalSignInForm.tsx b/Frontend/sections/ModalSignIn/ModalSignInForm.tsx
index e860f1e..27d3c1f 100644
--- a/Frontend/sections/ModalSignIn/ModalSignInForm.tsx
+++ b/Frontend/sections/ModalSignIn/ModalSignInForm.tsx
@@ -73,7 +73,7 @@ const ModalSignInForm = forwardRef<FormRefMethods, ModalSignInFormProps>(
             {...register("email")}
             id="SignInEmail"
             type="text"
-            className="w-full appearance-none bg-transparent border border-white focus:border-white rounded-sm px-4 mr-2 text-white placeholder-white"
+            className="w-full appearance-none bg-transparent border rounded-sm px-4 mr-2 text-black placeholder-black border-black dark:text-white dark:placeholder-white dark:border-white"
             placeholder="Your email…"
             aria-label="Your email…"
             autoComplete="on"
@@ -90,7 +90,7 @@ const ModalSignInForm = forwardRef<FormRefMethods, ModalSignInFormProps>(
             {...register("password")}
             id="SignInPwd"
             type="password"
-            className="w-full appearance-none bg-transparent border border-white focus:border-white rounded-sm px-4 mr-2 text-white placeholder-white"
+            className="w-full appearance-none bg-transparent border rounded-sm px-4 mr-2 text-black placeholder-black border-black dark:text-white dark:placeholder-white dark:border-white"
             placeholder="Your password..."
             aria-label="Your password..."
           />
diff --git a/Frontend/sections/ModalSignUp/ModalSignUp.tsx b/Frontend/sections/ModalSignUp/ModalSignUp.tsx
index 530f131..01e3377 100644
--- a/Frontend/sections/ModalSignUp/ModalSignUp.tsx
+++ b/Frontend/sections/ModalSignUp/ModalSignUp.tsx
@@ -10,6 +10,7 @@ import LoadingModal from "@/sections/LoadingModal";
 import Image from "next/image";
 import { ModalStatus } from "@/types";
 import { FormRefMethods } from "../ModalSignIn/ModalSignInForm";
+import Icon from "@/components/icon";
 
 function ModalSignUp() {
   const [status, setStatus] = useState<ModalStatus>(ModalStatus.Default);
@@ -40,11 +41,7 @@ function ModalSignUp() {
               htmlFor="sign-up-modal"
               className="cursor-pointer"
             >
-              <Image
-                className="rounded-full p-1 hover:bg-gray-500"
-                src={xButton}
-                alt="image"
-              />
+              <Icon name="Dismiss20Filled" size="medium" />
             </label>
           </div>
           <div className={status === ModalStatus.Default ? "block" : "hidden"}>