diff --git a/apps/api/docker-compose.yml b/apps/api/docker-compose.yml
index e7220ca6f..5667d5fd0 100644
--- a/apps/api/docker-compose.yml
+++ b/apps/api/docker-compose.yml
@@ -13,6 +13,11 @@ services:
     volumes:
       - postgres_data:/var/lib/postgresql/data
 
+  mailhog:
+    image: jcalonso/mailhog
+    ports:
+      - 1025:1025 # smtp server
+      - 8025:8025 # web ui
 
 volumes:
   postgres_data:
diff --git a/apps/api/package.json b/apps/api/package.json
index 41eec030a..ade8215e0 100644
--- a/apps/api/package.json
+++ b/apps/api/package.json
@@ -16,6 +16,7 @@
     "@types/bcrypt": "^5.0.0",
     "@types/jsonwebtoken": "^8.5.8",
     "@types/node": "^17.0.23",
+    "@types/nodemailer": "^6.4.14",
     "@types/passport-local": "^1.0.35",
     "prisma": "5.2.0",
     "ts-node": "^10.7.0",
@@ -38,6 +39,7 @@
     "imap": "^0.8.19",
     "jsonwebtoken": "9.0.2",
     "mailparser": "^3.6.5",
+    "nodemailer": "^6.9.7",
     "posthog-node": "^3.1.3",
     "prisma": "^5.6.0"
   },
diff --git a/apps/api/src/controllers/auth.ts b/apps/api/src/controllers/auth.ts
index c4a0d5dfe..7f85004e1 100644
--- a/apps/api/src/controllers/auth.ts
+++ b/apps/api/src/controllers/auth.ts
@@ -1,7 +1,10 @@
+import axios from "axios";
 import bcrypt from "bcrypt";
 import { FastifyInstance, FastifyReply, FastifyRequest } from "fastify";
 import jwt from "jsonwebtoken";
+import { track } from "../lib/hog";
 import { checkToken } from "../lib/jwt";
+import { forgotPassword } from "../lib/nodemailer/auth/forgot-password";
 import { prisma } from "../prisma";
 
 export function authRoutes(fastify: FastifyInstance) {
@@ -42,7 +45,7 @@ export function authRoutes(fastify: FastifyInstance) {
         });
       }
 
-      await prisma.user.create({
+      const user = await prisma.user.create({
         data: {
           email,
           password: await bcrypt.hash(password, 10),
@@ -51,13 +54,116 @@ export function authRoutes(fastify: FastifyInstance) {
         },
       });
 
+      const hog = track();
+
+      hog.capture({
+        event: "user_registered",
+        distinctId: user.id,
+      });
+
       reply.send({
         success: true,
       });
     }
   );
 
-  // User login route
+  // Forgot password & generate code
+  fastify.post(
+    "/api/v1/auth/password-reset",
+    async (request: FastifyRequest, reply: FastifyReply) => {
+      const { email, link } = request.body as { email: string; link: string };
+
+      let user = await prisma.user.findUnique({
+        where: { email },
+      });
+
+      if (!user) {
+        reply.code(401).send({
+          message: "Invalid email",
+          success: false,
+        });
+      }
+
+      function generateRandomCode() {
+        const min = 100000; // Minimum 6-digit number
+        const max = 999999; // Maximum 6-digit number
+        return Math.floor(Math.random() * (max - min + 1)) + min;
+      }
+
+      const code = generateRandomCode();
+
+      const uuid = await prisma.passwordResetToken.create({
+        data: {
+          userId: user!.id,
+          code: String(code),
+        },
+      });
+
+      forgotPassword(email, String(code), link, uuid.id);
+
+      reply.send({
+        success: true,
+      });
+    }
+  );
+
+  // Check code & uuid us valid
+  fastify.post(
+    "/api/v1/auth/password-reset/code",
+    async (request: FastifyRequest, reply: FastifyReply) => {
+      const { code, uuid } = request.body as { code: string; uuid: string };
+
+      const reset = await prisma.passwordResetToken.findUnique({
+        where: { code: code, id: uuid },
+      });
+
+      if (!reset) {
+        reply.code(401).send({
+          message: "Invalid Code",
+          success: false,
+        });
+      } else {
+        reply.send({
+          success: true,
+        });
+      }
+    }
+  );
+
+  // Reset users password via code
+  fastify.post(
+    "/api/v1/auth/password-reset/password",
+    async (request: FastifyRequest, reply: FastifyReply) => {
+      const { password, code } = request.body as {
+        password: string;
+        code: string;
+      };
+
+      const user = await prisma.passwordResetToken.findUnique({
+        where: { code: code },
+      });
+
+      if (!user) {
+        reply.code(401).send({
+          message: "Invalid Code",
+          success: false,
+        });
+      }
+
+      await prisma.user.update({
+        where: { id: user!.userId },
+        data: {
+          password: await bcrypt.hash(password, 10),
+        },
+      });
+
+      reply.send({
+        success: true,
+      });
+    }
+  );
+
+  // User password login route
   fastify.post(
     "/api/v1/auth/login",
     {
@@ -137,6 +243,133 @@ export function authRoutes(fastify: FastifyInstance) {
     }
   );
 
+  // Checks if a user is SSO or password
+  fastify.post(
+    "/api/v1/auth/sso/check",
+    async (request: FastifyRequest, reply: FastifyReply) => {
+      let { email } = request.body as {
+        email: string;
+      };
+
+      let user = await prisma.user.findUnique({
+        where: { email },
+      });
+
+      if (!user) {
+        reply.code(401).send({
+          message: "Invalid email",
+          success: false,
+        });
+      }
+
+      const authtype = await prisma.config.findMany({
+        where: {
+          sso_active: true,
+        },
+      });
+
+      const provider = await prisma.provider.findMany();
+      const oauth = provider[0];
+
+      console.log(authtype);
+
+      if (authtype.length === 0) {
+        reply.code(200).send({
+          success: true,
+          message: "SSO not enabled",
+          oauth: false,
+        });
+      }
+
+      const url = "https://github.com/login/oauth/authorize";
+
+      reply.send({
+        oauth: true,
+        success: true,
+        ouath_url: `${url}?client_id=${oauth.clientId}&redirect_uri=${oauth.redirectUri}&state=${email}&login=${email}&scope=user`,
+      });
+    }
+  );
+
+  // SSO api callback route
+  fastify.get(
+    "/api/v1/auth/sso/login/callback",
+    async (request: FastifyRequest, reply: FastifyReply) => {
+      const { code, state } = request.query as { code: string; state: string };
+
+      const provider = await prisma.provider.findFirst({});
+
+      const data = await axios.post(
+        `https://github.com/login/oauth/access_token`,
+        {
+          client_id: provider?.clientId,
+          client_secret: provider?.clientSecret,
+          code: code,
+          redirect_uri: provider?.redirectUri,
+        },
+        {
+          headers: {
+            Accept: "application/json",
+          },
+        }
+      );
+
+      const access_token = data.data;
+
+      if (access_token) {
+        const gh = await axios.get(`https://api.github.com/user/emails`, {
+          headers: {
+            Accept: "application/vnd.github+json",
+            Authorization: `token ${access_token.access_token}`,
+          },
+        });
+
+        const emails = gh.data;
+
+        const filter = emails.filter((e: any) => e.primary === true);
+
+        let user = await prisma.user.findUnique({
+          where: { email: filter[0].email },
+        });
+
+        if (!user) {
+          reply.send({
+            success: false,
+            message: "Invalid email",
+          });
+        }
+
+        var b64string = process.env.SECRET;
+        var buf = new Buffer(b64string!, "base64"); // Ta-da
+
+        let token = jwt.sign(
+          {
+            data: { id: user!.id },
+          },
+          buf,
+          { expiresIn: "8h" }
+        );
+
+        await prisma.session.create({
+          data: {
+            userId: user!.id,
+            sessionToken: token,
+            expires: new Date(Date.now() + 8 * 60 * 60 * 1000),
+          },
+        });
+
+        reply.send({
+          token,
+          success: true,
+        });
+      } else {
+        reply.status(403).send({
+          success: false,
+        });
+      }
+    }
+  );
+
   // Delete a user
   fastify.delete(
     "/api/v1/auth/user/:id",
@@ -177,10 +410,12 @@ export function authRoutes(fastify: FastifyInstance) {
 
         if (!user) {
           reply.code(401).send({
-            message: "Invalid email or password",
+            message: "Invalid user",
           });
         }
 
+        const config = await prisma.config.findFirst();
+
         const data = {
           id: user!.id,
           email: user!.email,
@@ -191,6 +426,7 @@ export function authRoutes(fastify: FastifyInstance) {
           ticket_status_changed: user!.notify_ticket_status_changed,
           ticket_comments: user!.notify_ticket_comments,
           ticket_assigned: user!.notify_ticket_assigned,
+          sso_status: config!.sso_active,
         };
 
         reply.send({
@@ -282,6 +518,50 @@ export function authRoutes(fastify: FastifyInstance) {
     }
   );
 
+  // Update a users Email notification settings
+  fastify.put(
+    "/api/v1/auth/profile/notifcations/emails",
+    async (request: FastifyRequest, reply: FastifyReply) => {
+      const bearer = request.headers.authorization!.split(" ")[1];
+
+      //checks if token is valid and returns valid token
+      const token = checkToken(bearer);
+
+      if (token) {
+        let session = await prisma.session.findUnique({
+          where: {
+            sessionToken: bearer,
+          },
+        });
+
+        const {
+          notify_ticket_created,
+          notify_ticket_assigned,
+          notify_ticket_comments,
+          notify_ticket_status_changed,
+        } = request.body as any;
+
+        let user = await prisma.user.update({
+          where: { id: session?.userId },
+          data: {
+            notify_ticket_created: notify_ticket_created,
+            notify_ticket_assigned: notify_ticket_assigned,
+            notify_ticket_comments: notify_ticket_comments,
+            notify_ticket_status_changed: notify_ticket_status_changed,
+          },
+        });
+
+        reply.send({
+          user,
+        });
+      } else {
+        reply.send({
+          sucess: false,
+        });
+      }
+    }
+  );
+
   // Logout a user (deletes session)
   fastify.get(
     "/api/v1/auth/user/:id/logout",
@@ -299,4 +579,25 @@ export function authRoutes(fastify: FastifyInstance) {
       }
     }
   );
+
+  // Update a users role
+  fastify.put(
+    "/api/v1/auth/user/role",
+    async (request: FastifyRequest, reply: FastifyReply) => {
+      const bearer = request.headers.authorization!.split(" ")[1];
+      const token = checkToken(bearer);
+      if (token) {
+        const { id, role } = request.body as { id: string; role: boolean };
+
+        await prisma.user.update({
+          where: { id },
+          data: {
+            isAdmin: role,
+          },
+        });
+
+        reply.send({ success: true });
+      }
+    }
+  );
 }
diff --git a/apps/api/src/controllers/clients.ts b/apps/api/src/controllers/clients.ts
index c3a9b63a5..d2c92adc5 100644
--- a/apps/api/src/controllers/clients.ts
+++ b/apps/api/src/controllers/clients.ts
@@ -1,4 +1,5 @@
 import { FastifyInstance, FastifyReply, FastifyRequest } from "fastify";
+import { track } from "../lib/hog";
 import { checkToken } from "../lib/jwt";
 import { prisma } from "../prisma";
 
@@ -14,7 +15,7 @@ export function clientRoutes(fastify: FastifyInstance) {
       if (token) {
         const { name, email, number, contactName }: any = request.body;
 
-        await prisma.client.create({
+        const client = await prisma.client.create({
           data: {
             name,
             contactName,
@@ -23,6 +24,13 @@ export function clientRoutes(fastify: FastifyInstance) {
           },
         });
 
+        const hog = track();
+
+        hog.capture({
+          event: "client_created",
+          distinctId: client.id,
+        });
+
         reply.send({
           success: true,
         });
diff --git a/apps/api/src/controllers/config.ts b/apps/api/src/controllers/config.ts
new file mode 100644
index 000000000..9936d47d4
--- /dev/null
+++ b/apps/api/src/controllers/config.ts
@@ -0,0 +1,237 @@
+// Check Github Version
+// Add outbound email provider
+// Email Verification
+// SSO Provider
+// Portal Locale
+// Feature Flags
+
+import { FastifyInstance, FastifyReply, FastifyRequest } from "fastify";
+
+import { checkToken } from "../lib/jwt";
+import { prisma } from "../prisma";
+
+export function configRoutes(fastify: FastifyInstance) {
+  // Check if SSO is enabled
+  fastify.get(
+    "/api/v1/config/sso/enabled",
+
+    async (request: FastifyRequest, reply: FastifyReply) => {
+      const bearer = request.headers.authorization!.split(" ")[1];
+      const token = checkToken(bearer);
+
+      if (token) {
+        const config = await prisma.config.findFirst();
+
+        //@ts-expect-error
+        const { sso_active } = config;
+
+        if (sso_active) {
+          const provider = await prisma.provider.findFirst({});
+
+          reply.send({
+            success: true,
+            sso: sso_active,
+            provider: provider,
+          });
+        }
+
+        reply.send({
+          success: true,
+          sso: sso_active,
+        });
+      }
+    }
+  );
+
+  // Update SSO Provider Settings
+  fastify.post(
+    "/api/v1/config/sso/provider",
+
+    async (request: FastifyRequest, reply: FastifyReply) => {
+      const bearer = request.headers.authorization!.split(" ")[1];
+      const token = checkToken(bearer);
+
+      if (token) {
+        const {
+          name,
+          client_id,
+          client_secret,
+          redirect_uri,
+          tenantId,
+          issuer,
+        }: any = request.body;
+
+        const conf = await prisma.config.findFirst();
+
+        //update config to true
+        await prisma.config.update({
+          where: { id: conf!.id },
+          data: {
+            sso_active: true,
+            sso_provider: name,
+          },
+        });
+
+        const check_provider = await prisma.provider.findFirst({});
+
+        if (check_provider === null) {
+          await prisma.provider.create({
+            data: {
+              name: name,
+              clientId: client_id,
+              clientSecret: client_secret,
+              active: true,
+              redirectUri: redirect_uri,
+              tenantId: tenantId,
+              issuer: issuer,
+            },
+          });
+        } else {
+          await prisma.provider.update({
+            where: { id: check_provider.id },
+            data: {
+              name: name,
+              clientId: client_id,
+              clientSecret: client_secret,
+              active: true,
+              redirectUri: redirect_uri,
+              tenantId: tenantId,
+              issuer: issuer,
+            },
+          });
+        }
+
+        reply.send({
+          success: true,
+          message: "SSO Provider updated!",
+        });
+      }
+    }
+  );
+
+  // Delete SSO Provider
+  fastify.delete(
+    "/api/v1/config/sso/provider",
+
+    async (request: FastifyRequest, reply: FastifyReply) => {
+      const bearer = request.headers.authorization!.split(" ")[1];
+      const token = checkToken(bearer);
+
+      if (token) {
+        const conf = await prisma.config.findFirst();
+
+        //update config to true
+        await prisma.config.update({
+          where: { id: conf!.id },
+          data: {
+            sso_active: false,
+            sso_provider: "",
+          },
+        });
+
+        const provider = await prisma.provider.findFirst({});
+        await prisma.provider.delete({
+          where: { id: provider!.id },
+        });
+
+        reply.send({
+          success: true,
+          message: "SSO Provider deleted!",
+        });
+      }
+    }
+  );
+
+  // Check if Emails are enabled & GET email settings
+  fastify.get(
+    "/api/v1/config/email",
+
+    async (request: FastifyRequest, reply: FastifyReply) => {
+      const bearer = request.headers.authorization!.split(" ")[1];
+      const token = checkToken(bearer);
+
+      if (token) {
+        // GET EMAIL SETTINGS
+        const config = await prisma.email.findFirst({});
+
+        if (config === null) {
+          reply.send({
+            success: true,
+            active: false,
+          });
+        }
+
+        if (config?.active) {
+          reply.send({
+            success: true,
+            active: true,
+            email: config,
+          });
+        } else {
+          reply.send({
+            success: true,
+            active: false,
+            email: config,
+          });
+        }
+      }
+    }
+  );
+
+  // Update Email Provider Settings
+  fastify.put(
+    "/api/v1/config/email",
+
+    async (request: FastifyRequest, reply: FastifyReply) => {
+      const bearer = request.headers.authorization!.split(" ")[1];
+      const token = checkToken(bearer);
+
+      if (token) {
+        const {
+          host,
+          active,
+          port,
+          reply: replyto,
+          username,
+          password,
+        }: any = request.body;
+
+        const email = await prisma.email.findFirst();
+
+        if (email === null) {
+          await prisma.email.create({
+            data: {
+              host: host,
+              port: port,
+              reply: replyto,
+              user: username,
+              pass: password,
+              active: true,
+            },
+          });
+        } else {
+          await prisma.email.update({
+            where: { id: email.id },
+            data: {
+              host: host,
+              port: port,
+              reply: replyto,
+              user: username,
+              pass: password,
+              active: active,
+            },
+          });
+        }
+
+        reply.send({
+          success: true,
+          message: "SSO Provider updated!",
+        });
+      }
+    }
+  );
+
+  // Test email is working
+
+  // Disable/Enable Email
+}
diff --git a/apps/api/src/controllers/notifications.ts b/apps/api/src/controllers/notifications.ts
new file mode 100644
index 000000000..b5f9fe62d
--- /dev/null
+++ b/apps/api/src/controllers/notifications.ts
@@ -0,0 +1,4 @@
+// Create a new notification
+// Get All notifications
+// Mark as read
+// Delete notification
diff --git a/apps/api/src/controllers/ticket.ts b/apps/api/src/controllers/ticket.ts
index 327ee6fa0..cd3dc0725 100644
--- a/apps/api/src/controllers/ticket.ts
+++ b/apps/api/src/controllers/ticket.ts
@@ -2,9 +2,24 @@ import { FastifyInstance, FastifyReply, FastifyRequest } from "fastify";
 
 import axios from "axios";
 import { checkToken } from "../lib/jwt";
+
+//@ts-ignore
+import { track } from "../lib/hog";
+import { sendAssignedEmail } from "../lib/nodemailer/ticket/assigned";
+import { sendComment } from "../lib/nodemailer/ticket/comment";
+import { sendTicketCreate } from "../lib/nodemailer/ticket/create";
+import { sendTicketStatus } from "../lib/nodemailer/ticket/status";
 import { checkSession } from "../lib/session";
 import { prisma } from "../prisma";
 
+const validateEmail = (email: string) => {
+  return String(email)
+    .toLowerCase()
+    .match(
+      /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|.(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
+    );
+};
+
 export function ticketRoutes(fastify: FastifyInstance) {
   // Create a new ticket
   fastify.post(
@@ -47,6 +62,20 @@ export function ticketRoutes(fastify: FastifyInstance) {
         },
       });
 
+      if (!email && !validateEmail(email)) {
+        await sendTicketCreate(ticket);
+      }
+
+      if (engineer && engineer.name !== "Unassigned") {
+        const assgined = await prisma.user.findUnique({
+          where: {
+            id: ticket.userId,
+          },
+        });
+
+        await sendAssignedEmail(assgined!.email);
+      }
+
       const webhook = await prisma.webhooks.findMany({
         where: {
           type: "ticket_created",
@@ -55,19 +84,43 @@ export function ticketRoutes(fastify: FastifyInstance) {
 
       for (let i = 0; i < webhook.length; i++) {
         if (webhook[i].active === true) {
-          console.log(webhook[i].url);
-          await axios.post(`${webhook[i].url}`, {
-            method: "POST",
-            headers: {
-              "Content-Type": "application/json",
-            },
-            body: JSON.stringify({
-              data: `Ticket ${ticket.id} created by ${ticket.name} -> ${ticket.email}. Priority -> ${ticket.priority}`,
-            }),
-          });
+          const url = webhook[i].url;
+          if (url.includes("discord.com")) {
+            const message = {
+              content: `Ticket ${ticket.id} created by ${ticket.name} -> ${ticket.email}. Priority -> ${ticket.priority}`,
+              avatar_url:
+                "https://avatars.githubusercontent.com/u/76014454?s=200&v=4",
+              username: "Peppermint.sh",
+            };
+            axios
+              .post(url, message)
+              .then((response) => {
+                console.log("Message sent successfully!");
+                console.log("Discord API response:", response.data);
+              })
+              .catch((error) => {
+                console.error("Error sending message:", error);
+              });
+          } else {
+            await axios.post(`${webhook[i].url}`, {
+              headers: {
+                "Content-Type": "application/json",
+              },
+              body: JSON.stringify({
+                data: `Ticket ${ticket.id} created by ${ticket.name} -> ${ticket.email}. Priority -> ${ticket.priority}`,
+              }),
+            });
+          }
         }
       }
 
+      const hog = track();
+
+      hog.capture({
+        event: "ticket_created",
+        distinctId: ticket.id,
+      });
+
       reply.status(200).send({
         message: "Ticket created correctly",
         success: true,
@@ -177,6 +230,41 @@ export function ticketRoutes(fastify: FastifyInstance) {
     }
   );
 
+  // Get all tickets (admin)
+  fastify.get(
+    "/api/v1/tickets/all/admin",
+    async (request: FastifyRequest, reply: FastifyReply) => {
+      const bearer = request.headers.authorization!.split(" ")[1];
+      const token = checkToken(bearer);
+
+      if (token) {
+        const tickets = await prisma.ticket.findMany({
+          orderBy: [
+            {
+              createdAt: "desc",
+            },
+          ],
+          include: {
+            client: {
+              select: { id: true, name: true, number: true },
+            },
+            assignedTo: {
+              select: { id: true, name: true },
+            },
+            team: {
+              select: { id: true, name: true },
+            },
+          },
+        });
+
+        reply.send({
+          tickets: tickets,
+          sucess: true,
+        });
+      }
+    }
+  );
+
   // Get all open tickets for a user
   fastify.get(
     "/api/v1/tickets/user/open",
@@ -308,7 +396,7 @@ export function ticketRoutes(fastify: FastifyInstance) {
       const { user, id }: any = request.body;
 
       if (token) {
-        await prisma.user.update({
+        const assigned = await prisma.user.update({
           where: { id: user },
           data: {
             tickets: {
@@ -319,6 +407,10 @@ export function ticketRoutes(fastify: FastifyInstance) {
           },
         });
 
+        const { email } = assigned;
+
+        await sendAssignedEmail(email);
+
         reply.send({
           success: true,
         });
@@ -327,6 +419,7 @@ export function ticketRoutes(fastify: FastifyInstance) {
   );
 
   // Link a ticket to another ticket
+
   // fastify.post(
   //   "/api/v1/ticket/link",
 
@@ -378,7 +471,7 @@ export function ticketRoutes(fastify: FastifyInstance) {
       const bearer = request.headers.authorization!.split(" ")[1];
       const token = checkToken(bearer);
 
-      const { text, id }: any = request.body;
+      const { text, id, public: public_comment }: any = request.body;
 
       if (token) {
         const user = await checkSession(bearer);
@@ -386,12 +479,32 @@ export function ticketRoutes(fastify: FastifyInstance) {
         await prisma.comment.create({
           data: {
             text: text,
-            public: Boolean(false),
+            public: public_comment,
             ticketId: id,
             userId: user!.id,
           },
         });
 
+        const ticket = await prisma.ticket.findUnique({
+          where: {
+            id: id,
+          },
+        });
+
+        //@ts-expect-error
+        const { email, title } = ticket;
+
+        if (public_comment && email) {
+          sendComment(text, title, email);
+        }
+
+        const hog = track();
+
+        hog.capture({
+          event: "ticket_comment",
+          distinctId: ticket!.id,
+        });
+
         reply.send({
           success: true,
         });
@@ -410,16 +523,12 @@ export function ticketRoutes(fastify: FastifyInstance) {
       if (token) {
         const { status, id }: any = request.body;
 
-        const ticket: any = await prisma.ticket
-          .update({
-            where: { id: id },
-            data: {
-              isComplete: status,
-            },
-          })
-          .then(async (ticket) => {
-            // await sendTicketStatus(ticket);
-          });
+        const ticket: any = await prisma.ticket.update({
+          where: { id: id },
+          data: {
+            isComplete: status,
+          },
+        });
 
         const webhook = await prisma.webhooks.findMany({
           where: {
@@ -428,21 +537,41 @@ export function ticketRoutes(fastify: FastifyInstance) {
         });
 
         for (let i = 0; i < webhook.length; i++) {
+          const url = webhook[i].url;
+
           if (webhook[i].active === true) {
             const s = status ? "Completed" : "Outstanding";
-            await axios.post(`${webhook[i].url}`, {
-              method: "POST",
-              headers: {
-                "Content-Type": "application/json",
-              },
-              body: JSON.stringify({
-                data: `Ticket ${ticket.id} created by ${ticket.email}, has had it's status changed to ${s}`,
-              }),
-              redirect: "follow",
-            });
+            if (url.includes("discord.com")) {
+              const message = {
+                content: `Ticket ${ticket.id} created by ${ticket.email}, has had it's status changed to ${s}`,
+                avatar_url:
+                  "https://avatars.githubusercontent.com/u/76014454?s=200&v=4",
+                username: "Peppermint.sh",
+              };
+              axios
+                .post(url, message)
+                .then((response) => {
+                  console.log("Message sent successfully!");
+                  console.log("Discord API response:", response.data);
+                })
+                .catch((error) => {
+                  console.error("Error sending message:", error);
+                });
+            } else {
+              await axios.post(`${webhook[i].url}`, {
+                headers: {
+                  "Content-Type": "application/json",
+                },
+                body: JSON.stringify({
+                  data: `Ticket ${ticket.id} created by ${ticket.email}, has had it's status changed to ${s}`,
+                }),
+              });
+            }
           }
         }
 
+        sendTicketStatus(ticket);
+
         reply.send({
           success: true,
         });
diff --git a/apps/api/src/controllers/time.ts b/apps/api/src/controllers/time.ts
index 463c561ee..b1a23742f 100644
--- a/apps/api/src/controllers/time.ts
+++ b/apps/api/src/controllers/time.ts
@@ -1,19 +1,32 @@
 import { FastifyInstance, FastifyReply, FastifyRequest } from "fastify";
+import { prisma } from "../prisma";
 
 export function timeTrackingRoutes(fastify: FastifyInstance) {
   // Create a new entry
-  fastify.get(
-    "/api/v1/time/entries/new",
+  fastify.post(
+    "/api/v1/time/new",
 
     async (request: FastifyRequest, reply: FastifyReply) => {
-      // check jwt is valid
-      // check user is admin
+      const { time, ticket, title, user }: any = request.body;
+
+      console.log(request.body);
+
+      await prisma.timeTracking.create({
+        data: {
+          time: Number(time),
+          title,
+          userId: user,
+          ticketId: ticket,
+        },
+      });
+
+      reply.send({
+        success: true,
+      });
     }
   );
 
   // Get all entries
 
   // Delete an entry
-
-  // Link an entry to a ticket
 }
diff --git a/apps/api/src/lib/hog.ts b/apps/api/src/lib/hog.ts
new file mode 100644
index 000000000..ba543c993
--- /dev/null
+++ b/apps/api/src/lib/hog.ts
@@ -0,0 +1,9 @@
+import { PostHog } from "posthog-node";
+
+export function track() {
+  return new PostHog(
+    "phc_2gbpy3JPtDC6hHrQy35yMxMci1NY0fD1sttGTcPjwVf",
+
+    { host: "https://app.posthog.com" }
+  );
+}
diff --git a/apps/api/src/lib/imap.ts b/apps/api/src/lib/imap.ts
index 159083fd1..f1b882e25 100644
--- a/apps/api/src/lib/imap.ts
+++ b/apps/api/src/lib/imap.ts
@@ -85,31 +85,43 @@ export const getEmails = async () => {
                 simpleParser(stream, async (err: any, parsed: any) => {
                   const { from, subject, textAsHtml, text, html } = parsed;
 
+                  console.log("from", from);
+
                   const parsedData = parseEmailContent(textAsHtml);
 
-                  const imap = await client.imap_Email.create({
-                    data: {
-                      from: from.text,
-                      subject: subject ? subject : "No Subject",
-                      body: text ? text : "No Body",
-                      html: html ? html : "",
-                      text: textAsHtml,
-                    },
-                  });
-
-                  const ticket = await client.ticket.create({
-                    data: {
-                      email: imap.from,
-                      name: imap.from,
-                      title: imap.subject ? imap.subject : "-",
-                      isComplete: Boolean(false),
-                      priority: "Low",
-                      fromImap: Boolean(true),
-                      detail: textAsHtml,
-                    },
-                  });
-
-                  console.log(imap, ticket);
+                  if (subject !== undefined && subject.includes("Re:")) {
+                    return await client.comment.create({
+                      data: {
+                        text: text ? text : "No Body",
+                        userId: null,
+                        ticketId: subject.split(" ")[1].split("#")[1],
+                      },
+                    });
+                  } else {
+                    const imap = await client.imap_Email.create({
+                      data: {
+                        from: from.value[0].address,
+                        subject: subject ? subject : "No Subject",
+                        body: text ? text : "No Body",
+                        html: html ? html : "",
+                        text: textAsHtml,
+                      },
+                    });
+
+                    const ticket = await client.ticket.create({
+                      data: {
+                        email: from.value[0].address,
+                        name: from.value[0].name,
+                        title: imap.subject ? imap.subject : "-",
+                        isComplete: Boolean(false),
+                        priority: "Low",
+                        fromImap: Boolean(true),
+                        detail: textAsHtml,
+                      },
+                    });
+
+                    console.log(imap, ticket);
+                  }
                 });
               });
               msg.once("attributes", (attrs: any) => {
diff --git a/apps/api/src/lib/nodemailer/auth/forgot-password.ts b/apps/api/src/lib/nodemailer/auth/forgot-password.ts
new file mode 100644
index 000000000..03e242cd4
--- /dev/null
+++ b/apps/api/src/lib/nodemailer/auth/forgot-password.ts
@@ -0,0 +1,98 @@
+import nodeMailer from "nodemailer";
+import { prisma } from "../../../prisma";
+
+export async function forgotPassword(
+  email: string,
+  code: string,
+  link: string,
+  token: string
+) {
+  try {
+    let mail;
+
+    const emails = await prisma.email.findMany();
+
+    const resetlink = `${link}/auth/reset-password?token=${token}`;
+
+    if (emails.length > 0) {
+      if (process.env.ENVIRONMENT === "development") {
+        let testAccount = await nodeMailer.createTestAccount();
+        mail = nodeMailer.createTransport({
+          port: 1025,
+          secure: false, // true for 465, false for other ports
+          auth: {
+            user: testAccount.user, // generated ethereal user
+            pass: testAccount.pass, // generated ethereal password
+          },
+        });
+      } else {
+        const email = emails[0];
+        mail = nodeMailer.createTransport({
+          // @ts-ignore
+          host: email.host,
+          port: email.port,
+          secure: email.secure, // true for 465, false for other ports
+          auth: {
+            user: email.user, // generated ethereal user
+            pass: email.pass, // generated ethereal password
+          },
+        });
+      }
+
+      console.log("Sending email to: ", email);
+
+      let info = await mail.sendMail({
+        from: "noreply@peppermint.sh", // sender address
+        to: email, // list of receivers
+        subject: `Password Reset Request`, // Subject line
+        text: `Password Reset Code: ${code}, follow this link to reset your password ${resetlink}`, // plain text body
+        html: `
+      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+        <html lang="en">
+          <head>
+            <meta http-equiv="Content-Type" content="text/html charset=UTF-8" />
+          </head>
+          <div id="" style="display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0">Ticket Created<div></div>
+          </div>
+
+          <body style="background-color:#ffffff;margin:0 auto;font-family:-apple-system, BlinkMacSystemFont, &#x27;Segoe UI&#x27;, &#x27;Roboto&#x27;, &#x27;Oxygen&#x27;, &#x27;Ubuntu&#x27;, &#x27;Cantarell&#x27;, &#x27;Fira Sans&#x27;, &#x27;Droid Sans&#x27;, &#x27;Helvetica Neue&#x27;, sans-serif">
+            <table align="center" role="presentation" cellSpacing="0" cellPadding="0" border="0" width="100%" style="max-width:600px;margin:0 auto">
+              <tr style="width:100%">
+                <td>
+                  <table style="margin-top:8px" align="center" border="0" cellPadding="0" cellSpacing="0" role="presentation" width="100%">
+                  </table>
+                  <h1 style="color:#1d1c1d;font-size:16px;font-weight:700;margin:10px 0;padding:0;line-height:42px">Password Reset</h1>
+                  <p style="font-size:20px;line-height:28px;margin:4px 0">
+                  <p>Password code: ${code}</p>
+                  <a href=${resetlink}>Reset Here</a>
+                  <p style="font-size:14px;margin:16px 0;color:#000">
+                  Kind regards, 
+
+                  <table align="center" border="0" cellPadding="0" cellSpacing="0" role="presentation" width="100%">
+                    <tbody>
+                      <tr>
+                        <td>
+                          <a target="_blank" style="color:#b7b7b7;text-decoration:underline" href="https://slackhq.com" rel="noopener noreferrer">Our blog</a>   |   <a target="_blank" style="color:#b7b7b7;text-decoration:underline" href="https://slack.com/legal" rel="noopener noreferrer">Documentation</a>   |   <a target="_blank" style="color:#b7b7b7;text-decoration:underline" href="https://slack.com/help" rel="noopener noreferrer">Discord</a> </a>
+                          <p style="font-size:12px;line-height:15px;margin:16px 0;color:#b7b7b7;text-align:left">This was an automated message sent by peppermint.sh -> An open source helpdesk solution</p>
+                          <p style="font-size:12px;line-height:15px;margin:16px 0;color:#b7b7b7;text-align:left;margin-bottom:50px">©2022 Peppermint Ticket Management, a Peppermint Labs product.<br />All rights reserved.</p>
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </td>
+              </tr>
+            </table>
+          </body>
+        </html>
+      `,
+      });
+
+      console.log("Message sent: %s", info.messageId);
+
+      // Preview only available when sending through an Ethereal account
+      console.log("Preview URL: %s", nodeMailer.getTestMessageUrl(info));
+    }
+  } catch (error) {
+    console.log(error);
+  }
+}
diff --git a/apps/api/src/lib/nodemailer/ticket/assigned.ts b/apps/api/src/lib/nodemailer/ticket/assigned.ts
new file mode 100644
index 000000000..213174491
--- /dev/null
+++ b/apps/api/src/lib/nodemailer/ticket/assigned.ts
@@ -0,0 +1,90 @@
+import nodeMailer from "nodemailer";
+import { prisma } from "../../../prisma";
+
+export async function sendAssignedEmail(email: any) {
+  try {
+    let mail;
+
+    const emails = await prisma.email.findMany();
+
+    if (emails.length > 0) {
+      if (process.env.ENVIRONMENT === "development") {
+        let testAccount = await nodeMailer.createTestAccount();
+        mail = nodeMailer.createTransport({
+          port: 1025,
+          secure: false, // true for 465, false for other ports
+          auth: {
+            user: testAccount.user, // generated ethereal user
+            pass: testAccount.pass, // generated ethereal password
+          },
+        });
+      } else {
+        const email = emails[0];
+        mail = nodeMailer.createTransport({
+          // @ts-ignore
+          host: email.host,
+          port: email.port,
+          secure: email.secure, // true for 465, false for other ports
+          auth: {
+            user: email.user, // generated ethereal user
+            pass: email.pass, // generated ethereal password
+          },
+        });
+      }
+
+      console.log("Sending email to: ", email);
+
+      await mail
+        .sendMail({
+          from: "noreply@peppermint.sh", // sender address
+          to: email, // list of receivers
+          subject: `A new ticket has been assigned to you`, // Subject line
+          text: `Hello there, a ticket has been assigned to you`, // plain text body
+          html: `
+            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+              <html lang="en">
+                <head>
+                  <meta http-equiv="Content-Type" content="text/html charset=UTF-8" />
+                </head>
+                <div id="" style="display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0">Ticket Created<div></div>
+                </div>
+
+                <body style="background-color:#ffffff;margin:0 auto;font-family:-apple-system, BlinkMacSystemFont, &#x27;Segoe UI&#x27;, &#x27;Roboto&#x27;, &#x27;Oxygen&#x27;, &#x27;Ubuntu&#x27;, &#x27;Cantarell&#x27;, &#x27;Fira Sans&#x27;, &#x27;Droid Sans&#x27;, &#x27;Helvetica Neue&#x27;, sans-serif">
+                  <table align="center" role="presentation" cellSpacing="0" cellPadding="0" border="0" width="100%" style="max-width:600px;margin:0 auto">
+                    <tr style="width:100%">
+                      <td>
+                        <table style="margin-top:8px" align="center" border="0" cellPadding="0" cellSpacing="0" role="presentation" width="100%">
+                        </table>
+                        <h1 style="color:#1d1c1d;font-size:16px;font-weight:700;margin:10px 0;padding:0;line-height:42px">Ticket Assigned</h1>
+                        <p style="font-size:20px;line-height:28px;margin:4px 0">
+                        <p>Hello, <br>A new ticket has been assigned to you.</p>
+                        <p style="font-size:14px;margin:16px 0;color:#000">
+                        Kind regards, 
+
+                        <table align="center" border="0" cellPadding="0" cellSpacing="0" role="presentation" width="100%">
+                          <tbody>
+                            <tr>
+                              <td>
+                                <a target="_blank" style="color:#b7b7b7;text-decoration:underline" href="https://docs.peppermint.sh" rel="noopener noreferrer">Documentation</a>   |   <a target="_blank" style="color:#b7b7b7;text-decoration:underline" href="https://discord.gg/8XFkbgKmgv" rel="noopener noreferrer">Discord</a> </a>
+                                <p style="font-size:12px;line-height:15px;margin:16px 0;color:#b7b7b7;text-align:left">This was an automated message sent by peppermint.sh -> An open source helpdesk solution</p>
+                                <p style="font-size:12px;line-height:15px;margin:16px 0;color:#b7b7b7;text-align:left;margin-bottom:50px">©2022 Peppermint Ticket Management, a Peppermint Labs product.<br />All rights reserved.</p>
+                              </td>
+                            </tr>
+                          </tbody>
+                        </table>
+                      </td>
+                    </tr>
+                  </table>
+                </body>
+              </html>
+            `,
+        })
+        .then((info) => {
+          console.log("Message sent: %s", info.messageId);
+        })
+        .catch((err) => console.log(err));
+    }
+  } catch (error) {
+    console.log(error);
+  }
+}
diff --git a/apps/api/src/lib/nodemailer/ticket/comment.ts b/apps/api/src/lib/nodemailer/ticket/comment.ts
new file mode 100644
index 000000000..c730d2258
--- /dev/null
+++ b/apps/api/src/lib/nodemailer/ticket/comment.ts
@@ -0,0 +1,96 @@
+import nodeMailer from "nodemailer";
+import { prisma } from "../../../prisma";
+
+export async function sendComment(
+  comment: string,
+  title: string,
+  email: string
+) {
+  try {
+    let mail;
+
+    console.log("Sending email to: ", email);
+
+    const emails = await prisma.email.findMany();
+
+    if (emails.length > 0) {
+      if (process.env.ENVIRONMENT === "development") {
+        let testAccount = await nodeMailer.createTestAccount();
+        mail = nodeMailer.createTransport({
+          port: 1025,
+          secure: false, // true for 465, false for other ports
+          auth: {
+            user: testAccount.user, // generated ethereal user
+            pass: testAccount.pass, // generated ethereal password
+          },
+        });
+      } else {
+        const email = emails[0];
+        mail = nodeMailer.createTransport({
+          // @ts-ignore
+          host: email.host,
+          port: email.port,
+          secure: email.secure, // true for 465, false for other ports
+          auth: {
+            user: email.user, // generated ethereal user
+            pass: email.pass, // generated ethereal password
+          },
+        });
+      }
+
+      await mail
+        .sendMail({
+          from: '"No reply 👻" noreply@peppermint.sh', // sender address
+          to: email,
+          subject: `New comment on a ticket`, // Subject line
+          text: `Hello there, Ticket: ${title}, has had an update with a comment of ${comment}`, // plain text body
+          html: `
+            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+              <html lang="en">
+
+                <head>
+                  <meta http-equiv="Content-Type" content="text/html charset=UTF-8" />
+                </head>
+                <div id="" style="display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0">Ticket Created<div></div>
+                </div>
+
+                <body style="background-color:#ffffff;margin:0 auto;font-family:-apple-system, BlinkMacSystemFont, &#x27;Segoe UI&#x27;, &#x27;Roboto&#x27;, &#x27;Oxygen&#x27;, &#x27;Ubuntu&#x27;, &#x27;Cantarell&#x27;, &#x27;Fira Sans&#x27;, &#x27;Droid Sans&#x27;, &#x27;Helvetica Neue&#x27;, sans-serif">
+                  <table align="center" role="presentation" cellSpacing="0" cellPadding="0" border="0" width="100%" style="max-width:600px;margin:0 auto">
+                    <tr style="width:100%">
+                      <td>
+                        <table style="margin-top:8px" align="center" border="0" cellPadding="0" cellSpacing="0" role="presentation" width="100%">
+                        </table>
+                        <h1 style="color:#1d1c1d;font-size:16px;font-weight:700;margin:10px 0;padding:0;line-height:42px">Ticket Update for: ${title}</h1>
+                        <p style="font-size:20px;line-height:28px;margin:4px 0">
+                        <p>${comment}</p>
+                        <p style="font-size:14px;margin:16px 0;color:#000">
+                        Kind regards, 
+
+                        <table align="center" border="0" cellPadding="0" cellSpacing="0" role="presentation" width="100%">
+                          <tbody>
+                            <tr>
+                              <td>
+                              <a target="_blank" style="color:#b7b7b7;text-decoration:underline" href="https://docs.peppermint.sh" rel="noopener noreferrer">Documentation</a>   |   <a target="_blank" style="color:#b7b7b7;text-decoration:underline" href="https://discord.gg/8XFkbgKmgv" rel="noopener noreferrer">Discord</a> </a>
+                              <p style="font-size:12px;line-height:15px;margin:16px 0;color:#b7b7b7;text-align:left">This was an automated message sent by peppermint.sh -> An open source helpdesk solution</p>
+                                <p style="font-size:12px;line-height:15px;margin:16px 0;color:#b7b7b7;text-align:left;margin-bottom:50px">©2022 Peppermint Ticket Management, a Peppermint Labs product.<br />All rights reserved.</p>
+                              </td>
+                            </tr>
+                          </tbody>
+                        </table>
+                      </td>
+                    </tr>
+                  </table>
+                </body>
+
+              </html>
+            `,
+        })
+        .then((info) => {
+          console.log("Message sent: %s", info.messageId);
+        })
+        .catch((err) => console.log(err));
+    }
+  } catch (error) {
+    console.log(error);
+  }
+}
diff --git a/apps/api/src/lib/nodemailer/ticket/create.ts b/apps/api/src/lib/nodemailer/ticket/create.ts
new file mode 100644
index 000000000..2885064a5
--- /dev/null
+++ b/apps/api/src/lib/nodemailer/ticket/create.ts
@@ -0,0 +1,90 @@
+import nodeMailer from "nodemailer";
+import { prisma } from "../../../prisma";
+
+export async function sendTicketCreate(ticket: any) {
+  try {
+    let mail;
+
+    const emails = await prisma.email.findMany();
+
+    if (emails.length > 0) {
+      if (process.env.ENVIRONMENT === "development") {
+        let testAccount = await nodeMailer.createTestAccount();
+        mail = nodeMailer.createTransport({
+          port: 1025,
+          secure: false, // true for 465, false for other ports
+          auth: {
+            user: testAccount.user, // generated ethereal user
+            pass: testAccount.pass, // generated ethereal password
+          },
+        });
+      } else {
+        const email = emails[0];
+        mail = nodeMailer.createTransport({
+          // @ts-ignore
+          host: email.host,
+          port: email.port,
+          secure: email.secure, // true for 465, false for other ports
+          auth: {
+            user: email.user, // generated ethereal user
+            pass: email.pass, // generated ethereal password
+          },
+        });
+      }
+
+      await mail
+        .sendMail({
+          from: '"No reply 👻" noreply@peppermint.sh', // sender address
+          to: ticket.email,
+          subject: `Ticket ${ticket.id} has just been created & logged`, // Subject line
+          text: `Hello there, Ticket ${ticket.id}, which you reported on ${ticket.createdAt}, has now been created and logged`, // plain text body
+          html: `
+            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+              <html lang="en">
+
+                <head>
+                  <meta http-equiv="Content-Type" content="text/html charset=UTF-8" />
+                </head>
+                <div id="" style="display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0">Ticket Created<div></div>
+                </div>
+
+                <body style="background-color:#ffffff;margin:0 auto;font-family:-apple-system, BlinkMacSystemFont, &#x27;Segoe UI&#x27;, &#x27;Roboto&#x27;, &#x27;Oxygen&#x27;, &#x27;Ubuntu&#x27;, &#x27;Cantarell&#x27;, &#x27;Fira Sans&#x27;, &#x27;Droid Sans&#x27;, &#x27;Helvetica Neue&#x27;, sans-serif">
+                  <table align="center" role="presentation" cellSpacing="0" cellPadding="0" border="0" width="100%" style="max-width:600px;margin:0 auto">
+                    <tr style="width:100%">
+                      <td>
+                        <table style="margin-top:8px" align="center" border="0" cellPadding="0" cellSpacing="0" role="presentation" width="100%">
+                        </table>
+                        <h1 style="color:#1d1c1d;font-size:16px;font-weight:700;margin:10px 0;padding:0;line-height:42px">Ticket Created: ${ticket.id}</h1>
+                        <p style="font-size:20px;line-height:28px;margin:4px 0">
+                        <p>Hello, <br>Your ticket has now been created and logged.</p>
+                        <p style="font-size:14px;margin:16px 0;color:#000">
+                        Kind regards, 
+
+                        <table align="center" border="0" cellPadding="0" cellSpacing="0" role="presentation" width="100%">
+                          <tbody>
+                            <tr>
+                              <td>
+                              <a target="_blank" style="color:#b7b7b7;text-decoration:underline" href="https://docs.peppermint.sh" rel="noopener noreferrer">Documentation</a>   |   <a target="_blank" style="color:#b7b7b7;text-decoration:underline" href="https://discord.gg/8XFkbgKmgv" rel="noopener noreferrer">Discord</a> </a>
+                              <p style="font-size:12px;line-height:15px;margin:16px 0;color:#b7b7b7;text-align:left">This was an automated message sent by peppermint.sh -> An open source helpdesk solution</p>
+                                <p style="font-size:12px;line-height:15px;margin:16px 0;color:#b7b7b7;text-align:left;margin-bottom:50px">©2022 Peppermint Ticket Management, a Peppermint Labs product.<br />All rights reserved.</p>
+                              </td>
+                            </tr>
+                          </tbody>
+                        </table>
+                      </td>
+                    </tr>
+                  </table>
+                </body>
+
+              </html>
+            `,
+        })
+        .then((info) => {
+          console.log("Message sent: %s", info.messageId);
+        })
+        .catch((err) => console.log(err));
+    }
+  } catch (error) {
+    console.log(error);
+  }
+}
diff --git a/apps/api/src/lib/nodemailer/ticket/status.ts b/apps/api/src/lib/nodemailer/ticket/status.ts
new file mode 100644
index 000000000..a75fa9b2f
--- /dev/null
+++ b/apps/api/src/lib/nodemailer/ticket/status.ts
@@ -0,0 +1,101 @@
+import nodeMailer from "nodemailer";
+import { prisma } from "../../../prisma";
+
+export async function sendTicketStatus(ticket: any) {
+  let mail;
+
+  const emails = await prisma.email.findMany();
+
+  if (emails.length > 0) {
+    if (process.env.ENVIRONMENT === "development") {
+      let testAccount = await nodeMailer.createTestAccount();
+      mail = nodeMailer.createTransport({
+        port: 1025,
+        secure: false, // true for 465, false for other ports
+        auth: {
+          user: testAccount.user, // generated ethereal user
+          pass: testAccount.pass, // generated ethereal password
+        },
+      });
+    } else {
+      const email = emails[0];
+      mail = nodeMailer.createTransport({
+        //@ts-ignore
+        host: email.host,
+        port: email.port,
+        secure: email.secure, // true for 465, false for other ports
+        auth: {
+          user: email.user, // generated ethereal user
+          pass: email.pass, // generated ethereal password
+        },
+      });
+    }
+
+    await mail
+      .sendMail({
+        from: "noreply@peppermint.sh", // sender address
+        to: ticket.email,
+        subject: `Ticket ${ticket.id} status is now ${
+          ticket.isComplete ? "COMPLETED" : "OUTSTANDING"
+        }`, // Subject line
+        text: `Hello there, Ticket ${ticket.id}, now has a status of ${
+          ticket.isComplete ? "COMPLETED" : "OUTSTANDING"
+        }`, // plain text body
+        html: `
+      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+        <html lang="en">
+        
+          <head>
+            <meta http-equiv="Content-Type" content="text/html charset=UTF-8" />
+          </head>
+          <div id="" style="display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0">Ticket Created<div></div>
+          </div>
+        
+          <body style="background-color:#ffffff;margin:0 auto;font-family:-apple-system, BlinkMacSystemFont, &#x27;Segoe UI&#x27;, &#x27;Roboto&#x27;, &#x27;Oxygen&#x27;, &#x27;Ubuntu&#x27;, &#x27;Cantarell&#x27;, &#x27;Fira Sans&#x27;, &#x27;Droid Sans&#x27;, &#x27;Helvetica Neue&#x27;, sans-serif">
+            <table align="center" role="presentation" cellSpacing="0" cellPadding="0" border="0" width="100%" style="max-width:600px;margin:0 auto">
+              <tr style="width:100%">
+                <td>
+                  <table style="margin-top:8px" align="center" border="0" cellPadding="0" cellSpacing="0" role="presentation" width="100%">
+                    <tbody>
+                      <tr>
+                        <td><img alt="Slack" src="https://raw.githubusercontent.com/Peppermint-Lab/peppermint/next/static/black-side-logo.svg" width="200" height="60" style="display:block;outline:none;border:none;text-decoration:none" /></td>
+                      </tr>
+                    </tbody>
+                  </table>
+                  <h1 style="color:#1d1c1d;font-size:16px;font-weight:700;margin:10px 0;padding:0;line-height:42px">Ticket: ${
+                    ticket.title
+                  }</h1>
+                  <p style="font-size:20px;line-height:28px;margin:4px 0">
+                  <p>Your Ticket, now has a status of ${
+                    ticket.isComplete ? "completed" : "open"
+                  }</p>
+                  Kind regards, 
+                  <br>
+                  Peppermint ticket management
+                  </p>
+                  
+                  <table align="center" border="0" cellPadding="0" cellSpacing="0" role="presentation" width="100%">
+                    <tbody>
+                      <tr>
+                        <td>
+                        <a target="_blank" style="color:#b7b7b7;text-decoration:underline" href="https://docs.peppermint.sh" rel="noopener noreferrer">Documentation</a>   |   <a target="_blank" style="color:#b7b7b7;text-decoration:underline" href="https://discord.gg/8XFkbgKmgv" rel="noopener noreferrer">Discord</a> </a>
+                        <p style="font-size:12px;line-height:15px;margin:16px 0;color:#b7b7b7;text-align:left">This was an automated message sent by peppermint.sh -> An open source helpdesk solution</p>
+                          <p style="font-size:12px;line-height:15px;margin:16px 0;color:#b7b7b7;text-align:left;margin-bottom:50px">©2022 Peppermint Ticket Management, a Peppermint Labs product.<br />All rights reserved.</p>
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </td>
+              </tr>
+            </table>
+          </body>
+        
+        </html>
+        `,
+      })
+      .then((info) => {
+        console.log("Message sent: %s", info.messageId);
+      })
+      .catch((err) => console.log(err));
+  }
+}
diff --git a/apps/api/src/main.ts b/apps/api/src/main.ts
index 4405a4e45..d48f70c13 100644
--- a/apps/api/src/main.ts
+++ b/apps/api/src/main.ts
@@ -4,7 +4,7 @@ import Fastify, { FastifyInstance } from "fastify";
 import { getEmails } from "./lib/imap";
 
 import { exec } from "child_process";
-import { PostHog } from "posthog-node";
+import { track } from "./lib/hog";
 import { prisma } from "./prisma";
 import { registerRoutes } from "./routes";
 
@@ -112,7 +112,7 @@ const start = async () => {
 
     const port = process.env.PORT || 5003;
 
-    await server.listen(
+    server.listen(
       { port: Number(port), host: "0.0.0.0" },
       async (err, address) => {
         if (err) {
@@ -120,18 +120,14 @@ const start = async () => {
           process.exit(1);
         }
 
-        const client = new PostHog(
-          "phc_2gbpy3JPtDC6hHrQy35yMxMci1NY0fD1sttGTcPjwVf",
-
-          { host: "https://app.posthog.com" }
-        );
+        const client = track();
 
         client.capture({
           event: "server_started",
           distinctId: "uuid",
         });
 
-        await client.shutdownAsync();
+        client.shutdownAsync();
         console.info(`Server listening on ${address}`);
       }
     );
diff --git a/apps/api/src/prisma/migrations/20231130184144_uptime_kb_config/migration.sql b/apps/api/src/prisma/migrations/20231130184144_uptime_kb_config/migration.sql
new file mode 100644
index 000000000..800cbf950
--- /dev/null
+++ b/apps/api/src/prisma/migrations/20231130184144_uptime_kb_config/migration.sql
@@ -0,0 +1,59 @@
+-- AlterTable
+ALTER TABLE "Config" ADD COLUMN     "client_version" TEXT,
+ADD COLUMN     "feature_previews" BOOLEAN NOT NULL DEFAULT false,
+ADD COLUMN     "gh_version" TEXT,
+ADD COLUMN     "out_of_office" BOOLEAN NOT NULL DEFAULT false,
+ADD COLUMN     "out_of_office_end" TIMESTAMP(3),
+ADD COLUMN     "out_of_office_message" TEXT,
+ADD COLUMN     "out_of_office_start" TIMESTAMP(3),
+ADD COLUMN     "portal_locale" TEXT,
+ADD COLUMN     "sso_active" BOOLEAN NOT NULL DEFAULT false,
+ADD COLUMN     "sso_provider" TEXT;
+
+-- CreateTable
+CREATE TABLE "SSO" (
+    "id" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "name" TEXT NOT NULL,
+    "clientId" TEXT NOT NULL,
+    "clientSecret" TEXT NOT NULL,
+    "active" BOOLEAN NOT NULL,
+    "issuer" TEXT,
+    "tenantId" TEXT,
+
+    CONSTRAINT "SSO_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "Uptime" (
+    "id" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "name" TEXT NOT NULL,
+    "url" TEXT NOT NULL,
+    "active" BOOLEAN NOT NULL DEFAULT false,
+    "webhook" TEXT,
+    "latency" INTEGER,
+    "status" BOOLEAN,
+
+    CONSTRAINT "Uptime_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "knowledgeBase" (
+    "id" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "title" TEXT NOT NULL,
+    "content" TEXT NOT NULL,
+    "tags" TEXT[],
+    "author" TEXT NOT NULL,
+    "public" BOOLEAN NOT NULL DEFAULT false,
+    "ticketId" TEXT,
+
+    CONSTRAINT "knowledgeBase_pkey" PRIMARY KEY ("id")
+);
+
+-- AddForeignKey
+ALTER TABLE "knowledgeBase" ADD CONSTRAINT "knowledgeBase_ticketId_fkey" FOREIGN KEY ("ticketId") REFERENCES "Ticket"("id") ON DELETE SET NULL ON UPDATE CASCADE;
diff --git a/apps/api/src/prisma/migrations/20231130184716_sso/migration.sql b/apps/api/src/prisma/migrations/20231130184716_sso/migration.sql
new file mode 100644
index 000000000..216e9b680
--- /dev/null
+++ b/apps/api/src/prisma/migrations/20231130184716_sso/migration.sql
@@ -0,0 +1,8 @@
+/*
+  Warnings:
+
+  - You are about to drop the `SSO` table. If the table is not empty, all the data it contains will be lost.
+
+*/
+-- DropTable
+DROP TABLE "SSO";
diff --git a/apps/api/src/prisma/migrations/20231130185305_allow/migration.sql b/apps/api/src/prisma/migrations/20231130185305_allow/migration.sql
new file mode 100644
index 000000000..7adf3b10d
--- /dev/null
+++ b/apps/api/src/prisma/migrations/20231130185305_allow/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Config" ALTER COLUMN "notifications" DROP NOT NULL;
diff --git a/apps/api/src/prisma/migrations/20231201011858_redirect/migration.sql b/apps/api/src/prisma/migrations/20231201011858_redirect/migration.sql
new file mode 100644
index 000000000..0429f1b5a
--- /dev/null
+++ b/apps/api/src/prisma/migrations/20231201011858_redirect/migration.sql
@@ -0,0 +1,18 @@
+/*
+  Warnings:
+
+  - You are about to drop the `Account` table. If the table is not empty, all the data it contains will be lost.
+  - You are about to drop the `VerificationToken` table. If the table is not empty, all the data it contains will be lost.
+
+*/
+-- DropForeignKey
+ALTER TABLE "Account" DROP CONSTRAINT "Account_userId_fkey";
+
+-- AlterTable
+ALTER TABLE "Provider" ADD COLUMN     "redirectUri" TEXT;
+
+-- DropTable
+DROP TABLE "Account";
+
+-- DropTable
+DROP TABLE "VerificationToken";
diff --git a/apps/api/src/prisma/migrations/20231202030625_/migration.sql b/apps/api/src/prisma/migrations/20231202030625_/migration.sql
new file mode 100644
index 000000000..c0f80f7db
--- /dev/null
+++ b/apps/api/src/prisma/migrations/20231202030625_/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Config" ADD COLUMN     "encryption_key" TEXT;
diff --git a/apps/api/src/prisma/migrations/20231202030940_/migration.sql b/apps/api/src/prisma/migrations/20231202030940_/migration.sql
new file mode 100644
index 000000000..f32bebc27
--- /dev/null
+++ b/apps/api/src/prisma/migrations/20231202030940_/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Config" ADD COLUMN     "first_time_setup" BOOLEAN NOT NULL DEFAULT true;
diff --git a/apps/api/src/prisma/migrations/20231202031821_/migration.sql b/apps/api/src/prisma/migrations/20231202031821_/migration.sql
new file mode 100644
index 000000000..e4610340a
--- /dev/null
+++ b/apps/api/src/prisma/migrations/20231202031821_/migration.sql
@@ -0,0 +1,9 @@
+/*
+  Warnings:
+
+  - The `encryption_key` column on the `Config` table would be dropped and recreated. This will lead to data loss if there is data in the column.
+
+*/
+-- AlterTable
+ALTER TABLE "Config" DROP COLUMN "encryption_key",
+ADD COLUMN     "encryption_key" BYTEA;
diff --git a/apps/api/src/prisma/migrations/20231203164241_/migration.sql b/apps/api/src/prisma/migrations/20231203164241_/migration.sql
new file mode 100644
index 000000000..5e32c2625
--- /dev/null
+++ b/apps/api/src/prisma/migrations/20231203164241_/migration.sql
@@ -0,0 +1,8 @@
+-- DropForeignKey
+ALTER TABLE "Comment" DROP CONSTRAINT "Comment_userId_fkey";
+
+-- AlterTable
+ALTER TABLE "Comment" ALTER COLUMN "userId" DROP NOT NULL;
+
+-- AddForeignKey
+ALTER TABLE "Comment" ADD CONSTRAINT "Comment_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE SET NULL ON UPDATE CASCADE;
diff --git a/apps/api/src/prisma/migrations/20231203224035_code/migration.sql b/apps/api/src/prisma/migrations/20231203224035_code/migration.sql
new file mode 100644
index 000000000..b29e5f0a3
--- /dev/null
+++ b/apps/api/src/prisma/migrations/20231203224035_code/migration.sql
@@ -0,0 +1,11 @@
+-- CreateTable
+CREATE TABLE "PasswordResetToken" (
+    "id" TEXT NOT NULL,
+    "code" TEXT NOT NULL,
+    "userId" TEXT NOT NULL,
+
+    CONSTRAINT "PasswordResetToken_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "PasswordResetToken_code_key" ON "PasswordResetToken"("code");
diff --git a/apps/api/src/prisma/schema.prisma b/apps/api/src/prisma/schema.prisma
index 9e1226fc5..e45d759b6 100644
--- a/apps/api/src/prisma/schema.prisma
+++ b/apps/api/src/prisma/schema.prisma
@@ -15,26 +15,7 @@ model Provider {
   active       Boolean
   issuer       String?
   tenantId     String?
-}
-
-model Account {
-  id                       String  @id @default(cuid())
-  userId                   String
-  type                     String
-  provider                 String
-  providerAccountId        String
-  refresh_token            String? @db.Text
-  access_token             String? @db.Text
-  expires_at               Int?
-  token_type               String?
-  scope                    String?
-  id_token                 String? @db.Text
-  session_state            String?
-  refresh_token_expires_in Int?
-
-  user User @relation(fields: [userId], references: [id], onDelete: Cascade)
-
-  @@unique([provider, providerAccountId])
+  redirectUri  String?
 }
 
 model Session {
@@ -45,6 +26,12 @@ model Session {
   user         User     @relation(fields: [userId], references: [id], onDelete: Cascade)
 }
 
+model PasswordResetToken {
+  id     String @id @default(cuid())
+  code   String @unique
+  userId String
+}
+
 model User {
   id                           String   @id @default(uuid())
   createdAt                    DateTime @default(now())
@@ -69,19 +56,10 @@ model User {
   Team         Team?          @relation(fields: [teamId], references: [id])
   teamId       String?
   Comment      Comment[]
-  Account      Account[]
   Session      Session[]
   TimeTracking TimeTracking[]
 }
 
-model VerificationToken {
-  identifier String
-  token      String   @unique
-  expires    DateTime
-
-  @@unique([identifier, token])
-}
-
 model Team {
   id        String   @id @default(uuid())
   createdAt DateTime @default(now())
@@ -114,12 +92,13 @@ model Ticket {
   Comment      Comment[]
   TimeTracking TimeTracking[]
 
-  team       Team?   @relation(fields: [teamId], references: [id])
-  teamId     String?
-  assignedTo User?   @relation(fields: [userId], references: [id])
-  client     Client? @relation(fields: [clientId], references: [id])
-  clientId   String?
-  userId     String?
+  team          Team?           @relation(fields: [teamId], references: [id])
+  teamId        String?
+  assignedTo    User?           @relation(fields: [userId], references: [id])
+  client        Client?         @relation(fields: [clientId], references: [id])
+  clientId      String?
+  userId        String?
+  knowledgeBase knowledgeBase[]
 }
 
 model TimeTracking {
@@ -145,10 +124,10 @@ model Comment {
   text   String
   public Boolean @default(false)
 
-  userId   String
-  user     User   @relation(fields: [userId], references: [id])
+  userId   String?
+  user     User?   @relation(fields: [userId], references: [id])
   ticketId String
-  ticket   Ticket @relation(fields: [ticketId], references: [id])
+  ticket   Ticket  @relation(fields: [ticketId], references: [id])
 }
 
 model Client {
@@ -258,7 +237,47 @@ model Config {
   createdAt DateTime @default(now())
   updatedAt DateTime @default(now())
 
-  notifications Json // Array of service names and an active field of TRUE OR FALSE
+  notifications         Json? // Array of service names and an active field of TRUE OR FALSE
+  sso_provider          String?
+  sso_active            Boolean   @default(false)
+  gh_version            String?
+  client_version        String?
+  portal_locale         String?
+  feature_previews      Boolean   @default(false)
+  out_of_office         Boolean   @default(false)
+  out_of_office_message String?
+  out_of_office_start   DateTime?
+  out_of_office_end     DateTime?
+  encryption_key        Bytes?
+  first_time_setup      Boolean   @default(true)
+}
+
+model Uptime {
+  id        String   @id @default(uuid())
+  createdAt DateTime @default(now())
+  updatedAt DateTime @default(now())
+
+  name    String
+  url     String
+  active  Boolean  @default(false)
+  webhook String?
+  latency Int?
+  status  Boolean?
+}
+
+model knowledgeBase {
+  id        String   @id @default(uuid())
+  createdAt DateTime @default(now())
+  updatedAt DateTime @default(now())
+
+  title   String
+  content String
+  tags    String[]
+  author  String
+  public  Boolean  @default(false)
+
+  ticketId String?
+  ticket   Ticket? @relation(fields: [ticketId], references: [id])
 }
 
 model Imap_Email {
diff --git a/apps/api/src/prisma/seed.js b/apps/api/src/prisma/seed.js
index 647e68276..f43a4aa17 100644
--- a/apps/api/src/prisma/seed.js
+++ b/apps/api/src/prisma/seed.js
@@ -1,33 +1,59 @@
 const { PrismaClient } = require("@prisma/client");
+const crypto = require("crypto");
 
 const prisma = new PrismaClient();
 
 async function main() {
-  const admin = await prisma.user.upsert({
-    where: { email: "admin@admin.com" },
-    update: {},
-    create: {
-      email: `admin@admin.com`,
-      name: "admin",
-      isAdmin: true,
-      password: "$2b$10$BFmibvOW7FtY0soAAwujoO9y2tIyB7WEJ2HNq9O7zh9aeejMvRsKu",
-      language: "en",
-    },
-  });
+  const setup = await prisma.config.findFirst({});
 
-  const internal = await prisma.client.upsert({
-    where: { email: `internal@admin.com` },
-    update: {},
-    create: {
-      email: `internal@admin.com`,
-      name: "internal",
-      contactName: "admin",
-      number: "123456789",
-      active: true,
-    },
-  });
+  if (setup === null) {
+    await prisma.user.upsert({
+      where: { email: "admin@admin.com" },
+      update: {},
+      create: {
+        email: `admin@admin.com`,
+        name: "admin",
+        isAdmin: true,
+        password:
+          "$2b$10$BFmibvOW7FtY0soAAwujoO9y2tIyB7WEJ2HNq9O7zh9aeejMvRsKu",
+        language: "en",
+      },
+    });
+
+    await prisma.client.upsert({
+      where: { email: `internal@admin.com` },
+      update: {},
+      create: {
+        email: `internal@admin.com`,
+        name: "internal",
+        contactName: "admin",
+        number: "123456789",
+        active: true,
+      },
+    });
+
+    const encryptionKey = crypto.randomBytes(32); // Generates a random key
+
+    const conf = await prisma.config.create({
+      data: {
+        gh_version: "0.3.6",
+        client_version: "0.3.6",
+        portal_locale: "en",
+        encryption_key: encryptionKey,
+      },
+    });
 
-  console.log({ admin, internal });
+    await prisma.config.update({
+      where: {
+        id: conf.id,
+      },
+      data: {
+        first_time_setup: false,
+      },
+    });
+  } else {
+    console.log("No need to seed, already seeded");
+  }
 }
 
 main()
diff --git a/apps/api/src/routes.ts b/apps/api/src/routes.ts
index a342a457f..446be6441 100644
--- a/apps/api/src/routes.ts
+++ b/apps/api/src/routes.ts
@@ -1,10 +1,12 @@
 import { FastifyInstance } from "fastify";
 import { authRoutes } from "./controllers/auth";
 import { clientRoutes } from "./controllers/clients";
+import { configRoutes } from "./controllers/config";
 import { dataRoutes } from "./controllers/data";
 import { notebookRoutes } from "./controllers/notebook";
 import { emailQueueRoutes } from "./controllers/queue";
 import { ticketRoutes } from "./controllers/ticket";
+import { timeTrackingRoutes } from "./controllers/time";
 import { todoRoutes } from "./controllers/todos";
 import { userRoutes } from "./controllers/users";
 import { webhookRoutes } from "./controllers/webhooks";
@@ -19,4 +21,6 @@ export function registerRoutes(fastify: FastifyInstance) {
   notebookRoutes(fastify);
   clientRoutes(fastify);
   webhookRoutes(fastify);
+  configRoutes(fastify);
+  timeTrackingRoutes(fastify);
 }
diff --git a/apps/client/components/TicketViews/admin.tsx b/apps/client/components/TicketViews/admin.tsx
new file mode 100644
index 000000000..e59b3c734
--- /dev/null
+++ b/apps/client/components/TicketViews/admin.tsx
@@ -0,0 +1,377 @@
+import { getCookie } from "cookies-next";
+import moment from "moment";
+import { useRouter } from "next/router";
+import React, { useMemo } from "react";
+import { useQuery } from "react-query";
+import {
+  useFilters,
+  useGlobalFilter,
+  usePagination,
+  useTable,
+} from "react-table";
+import TicketsMobileList from "../../components/TicketsMobileList";
+
+const fetchALLTIckets = async () => {
+  const res = await fetch(
+    `${process.env.NEXT_PUBLIC_API_URL}/api/v1/tickets/all/admin`,
+    {
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${getCookie("session")}`,
+      },
+    }
+  );
+  return res.json();
+};
+
+function DefaultColumnFilter({ column: { filterValue, setFilter } }: any) {
+  return (
+    <input
+      className="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md"
+      type="text"
+      value={filterValue || ""}
+      onChange={(e) => {
+        setFilter(e.target.value || undefined); // Set undefined to remove the filter entirely
+      }}
+      placeholder="Type to filter"
+    />
+  );
+}
+function Table({ columns, data }: any) {
+  const filterTypes = React.useMemo(
+    () => ({
+      // Add a new fuzzyTextFilterFn filter type.
+      // fuzzyText: fuzzyTextFilterFn,
+      // Or, override the default text filter to use
+      // "startWith"
+      text: (rows: any, id: any, filterValue: any) =>
+        rows.filter((row: any) => {
+          const rowValue = row.values[id];
+          return rowValue !== undefined
+            ? String(rowValue)
+                .toLowerCase()
+                .startsWith(String(filterValue).toLowerCase())
+            : true;
+        }),
+    }),
+    []
+  );
+
+  const defaultColumn = React.useMemo(
+    () => ({
+      // Let's set up our default Filter UI
+      Filter: DefaultColumnFilter,
+    }),
+    []
+  );
+
+  const {
+    getTableProps,
+    getTableBodyProps,
+    headerGroups,
+    //@ts-expect-error
+    page,
+    prepareRow,
+    //@ts-expect-error
+    canPreviousPage,
+    //@ts-expect-error
+    canNextPage,
+    //@ts-expect-error
+    pageCount,
+    //@ts-expect-error
+    gotoPage,
+    //@ts-expect-error
+    nextPage,
+    //@ts-expect-error
+    previousPage,
+    //@ts-expect-error
+    setPageSize,
+    //@ts-expect-error
+    state: { pageIndex, pageSize },
+  } = useTable(
+    {
+      columns,
+      data,
+      //@ts-expect-error
+      defaultColumn, // Be sure to pass the defaultColumn option
+      filterTypes,
+      initialState: {
+        //@ts-expect-error
+        pageIndex: 0,
+      },
+    },
+    useFilters, // useFilters!
+    useGlobalFilter,
+    usePagination
+  );
+
+  return (
+    <div className="overflow-x-auto md:-mx-6 lg:-mx-8">
+      <div className="py-2 align-middle inline-block min-w-full md:px-6 lg:px-8">
+        <div className="shadow overflow-hidden border-b border-gray-200 md:rounded-lg">
+          <table
+            {...getTableProps()}
+            className="min-w-full divide-y divide-gray-200"
+          >
+            <thead className="bg-gray-50">
+              {headerGroups.map((headerGroup: any) => (
+                <tr
+                  {...headerGroup.getHeaderGroupProps()}
+                  key={headerGroup.headers.map((header: any) => header.id)}
+                >
+                  {headerGroup.headers.map((column: any) =>
+                    column.hideHeader === false ? null : (
+                      <th
+                        {...column.getHeaderProps()}
+                        className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                      >
+                        {column.render("Header")}
+                        {/* Render the columns filter UI */}
+                        <div>
+                          {column.canFilter ? column.render("Filter") : null}
+                        </div>
+                      </th>
+                    )
+                  )}
+                </tr>
+              ))}
+            </thead>
+            <tbody {...getTableBodyProps()}>
+              {page.map((row: any, i: any) => {
+                prepareRow(row);
+                return (
+                  <tr {...row.getRowProps()} className="bg-white">
+                    {row.cells.map((cell: any) => (
+                      <td
+                        className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900"
+                        {...cell.getCellProps()}
+                      >
+                        {cell.render("Cell")}
+                      </td>
+                    ))}
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+
+          {data.length > 10 && (
+            <nav
+              className="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6"
+              aria-label="Pagination"
+            >
+              <div className="hidden sm:block">
+                <div className="flex flex-row flex-nowrap w-full space-x-2">
+                  <p className="block text-sm font-medium text-gray-700 mt-4">
+                    Show
+                  </p>
+                  <select
+                    id="location"
+                    name="location"
+                    className="block w-full pl-3 pr-10 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"
+                    value={pageSize}
+                    onChange={(e) => {
+                      setPageSize(Number(e.target.value));
+                    }}
+                  >
+                    {[10, 20, 30, 40, 50].map((pageSize) => (
+                      <option key={pageSize} value={pageSize}>
+                        {pageSize}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+              </div>
+              <div className="flex-1 flex justify-between sm:justify-end">
+                <button
+                  className="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
+                  type="button"
+                  onClick={() => previousPage()}
+                  disabled={!canPreviousPage}
+                >
+                  Previous
+                </button>
+                <button
+                  className="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
+                  type="button"
+                  onClick={() => nextPage()}
+                  disabled={!canNextPage}
+                >
+                  Next
+                </button>
+              </div>
+            </nav>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function AdminTicketLayout() {
+  const { data, status, refetch } = useQuery(
+    "fetchallTickets",
+    fetchALLTIckets
+  );
+
+  const router = useRouter();
+
+  const high = "bg-red-100 text-red-800";
+  const low = "bg-blue-100 text-blue-800";
+  const normal = "bg-green-100 text-green-800";
+
+  const columns = useMemo(
+    () => [
+      {
+        Header: "Type",
+        accessor: "type",
+        id: "type",
+        width: 50,
+      },
+      {
+        Header: "Summary",
+        accessor: "title",
+        id: "summary",
+        Cell: ({ row, value }: any) => {
+          return (
+            <>
+              <span className=" max-w-[240px] truncate">{value}</span>
+            </>
+          );
+        },
+      },
+      {
+        Header: "Assignee",
+        accessor: "assignedTo.name",
+        id: "assignee",
+        Cell: ({ row, value }: any) => {
+          return (
+            <>
+              <span className="w-[80px] truncate">{value ? value : "n/a"}</span>
+            </>
+          );
+        },
+      },
+      {
+        Header: "Client",
+        accessor: "client.name",
+        id: "client",
+        Cell: ({ row, value }: any) => {
+          return (
+            <>
+              <span className="w-[80px] truncate">{value ? value : "n/a"}</span>
+            </>
+          );
+        },
+      },
+      {
+        Header: "Priority",
+        accessor: "priority",
+        id: "priority",
+        Cell: ({ row, value }) => {
+          let p = value;
+          let badge;
+
+          if (p === "Low") {
+            badge = low;
+          }
+          if (p === "Normal") {
+            badge = normal;
+          }
+          if (p === "High") {
+            badge = high;
+          }
+
+          return (
+            <>
+              <span
+                className={`inline-flex items-center rounded-md justify-center w-1/2 px-2 py-1 text-xs font-medium ring-1 ring-inset ${badge}`}
+              >
+                {value}
+              </span>
+            </>
+          );
+        },
+      },
+      {
+        Header: "Status",
+        accessor: "status",
+        id: "status",
+        Cell: ({ row, value }) => {
+          let p = value;
+          let badge;
+
+          return (
+            <>
+              <span className="inline-flex items-center rounded-md bg-yellow-50 px-2 py-1 text-xs font-medium text-yellow-700 ring-1 ring-inset ring-red-600/10">
+                {value === "needs_support" && <span>Needs Support</span>}
+                {value === "in_progress" && <span>In Progress</span>}
+                {value === "in_review" && <span>In Review</span>}
+                {value === "done" && <span>Done</span>}
+              </span>
+            </>
+          );
+        },
+      },
+      {
+        Header: "Created",
+        accessor: "createdAt",
+        id: "created",
+        Cell: ({ row, value }) => {
+          const now = moment(value).format("DD/MM/YYYY");
+          return (
+            <>
+              <span className="">{now}</span>
+            </>
+          );
+        },
+      },
+    ],
+    []
+  );
+
+  return (
+    <>
+      {status === "success" && (
+        <>
+          {data.tickets && data.tickets.length > 0 && (
+            <>
+              <div className="hidden sm:block">
+                <Table columns={columns} data={data.tickets} />
+              </div>
+
+              <div className="sm:hidden">
+                <TicketsMobileList tickets={data.tickets} />
+              </div>
+            </>
+          )}
+
+          {data.tickets.length === 0 && (
+            <>
+              <div className="text-center mt-72">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="mx-auto h-12 w-12 text-gray-400"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  stroke-width="2"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                  />
+                </svg>
+
+                <h3 className="mt-2 text-sm font-medium text-gray-900">
+                  You currently don't have any assigned tickets. :)
+                </h3>
+              </div>
+            </>
+          )}
+        </>
+      )}
+    </>
+  );
+}
diff --git a/apps/client/components/UpdateUserModal/index.js b/apps/client/components/UpdateUserModal/index.tsx
similarity index 66%
rename from apps/client/components/UpdateUserModal/index.js
rename to apps/client/components/UpdateUserModal/index.tsx
index baf67ff17..d8f62daec 100644
--- a/apps/client/components/UpdateUserModal/index.js
+++ b/apps/client/components/UpdateUserModal/index.tsx
@@ -1,39 +1,29 @@
 import { Dialog, Transition } from "@headlessui/react";
 import { XMarkIcon } from "@heroicons/react/24/outline";
+import { getCookie } from "cookies-next";
 import { useRouter } from "next/router";
-import React, { Fragment, useState } from "react";
+import { Fragment, useState } from "react";
 
 export default function UpdateUserModal({ user }) {
   const [open, setOpen] = useState(false);
 
-  const [name, setName] = useState(user.name);
-  const [email, setEmail] = useState(user.email);
   const [admin, setAdmin] = useState(user.isAdmin);
-  const [error, setError] = useState(null);
 
   const router = useRouter();
 
-  const notificationMethods = [
-    { id: "user", title: "user" },
-    { id: "admin", title: "admin" },
-  ];
-
   async function updateUser() {
-    if (name.length > 0 && email.length > 0) {
-      await fetch("/api/v1/admin/user/update", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          email,
-          name,
-          admin,
-          id: user.id,
-        }),
-      }).then(() => router.reload(router.pathname));
-    }
-    setError("Length needs to be more than zero");
+    await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/v1/auth/user/role`, {
+      method: "PUT",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${getCookie("session")}`,
+      },
+      body: JSON.stringify({
+        role: admin,
+        id: user.id,
+      }),
+    });
+    // .then(() => router.reload());
   }
 
   return (
@@ -43,7 +33,7 @@ export default function UpdateUserModal({ user }) {
         type="button"
         className="inline-flex items-center px-4 py-1.5 border font-semibold border-gray-300 shadow-sm text-xs rounded text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
       >
-        Edit
+        Role
       </button>
 
       <Transition.Root show={open} as={Fragment}>
@@ -97,54 +87,10 @@ export default function UpdateUserModal({ user }) {
                       as="h3"
                       className="text-lg leading-6 font-medium text-gray-900"
                     >
-                      Edit User
+                      Edit User Role
                     </Dialog.Title>
                     <div className="mt-2 space-y-4">
-                      <>
-                        <input
-                          type="text"
-                          className={
-                            error !== null && name.length === 0
-                              ? "shadow-sm focus:ring-red-500 focus:border-red-500 block w-3/4 sm:text-sm border-red-600 rounded-md"
-                              : "shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-3/4 sm:text-sm border-gray-300 rounded-md"
-                          }
-                          placeholder="Enter client name here..."
-                          name="name"
-                          onChange={(e) => setName(e.target.value)}
-                          value={name}
-                          focus={
-                            error !== null && name.length > 0 ? true : false
-                          }
-                        />
-                        {error !== null && name.length === 0 && (
-                          <p className="text-red-500 text-xs italic">{error}</p>
-                        )}
-                      </>
-
-                      <>
-                        <input
-                          type="email"
-                          className={
-                            error !== null && email.length === 0
-                              ? "shadow-sm focus:ring-red-500 focus:border-red-500 block w-3/4 sm:text-sm border-red-600 rounded-md"
-                              : "shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-3/4 sm:text-sm border-gray-300 rounded-md"
-                          }
-                          placeholder="Enter email here...."
-                          onChange={(e) => setEmail(e.target.value)}
-                          value={email}
-                          focus={
-                            error !== null && email.length > 0 ? true : false
-                          }
-                        />
-                        {error !== null && email.length === 0 && (
-                          <p className="text-red-500 text-xs italic">{error}</p>
-                        )}
-                      </>
-
                       <div className="">
-                        <label className="text-base font-medium text-gray-900">
-                          User Type
-                        </label>
                         <div className="space-y-2 sm:flex sm:items-center sm:space-y-0 sm:space-x-10">
                           <span className="relative z-0 inline-flex shadow-sm rounded-md space-x-4">
                             <button
diff --git a/apps/client/layouts/adminLayout.tsx b/apps/client/layouts/adminLayout.tsx
index ee9ddf1bf..6ba775de7 100644
--- a/apps/client/layouts/adminLayout.tsx
+++ b/apps/client/layouts/adminLayout.tsx
@@ -42,34 +42,42 @@ export default function AdminLayout({ children }: any) {
       href: "/admin/webhooks",
       current: router.pathname === "/admin/webhooks",
     },
-    // {
-    //   name: "Notifications",
-    //   href: "/admin/notifications",
-    // },
+    {
+      name: "Outbound Emails",
+      href: "/admin/email",
+      current: router.pathname === "/admin/email",
+    },
+    {
+      name: "SSO",
+      href: "/admin/sso",
+      current: router.pathname === "/admin/sso",
+    },
   ];
 
   return (
-    <div className="flex md:divide-x-2 h-[85vh]">
-      <div className="hidden md:flex w-56 mt-11">
-        <nav className="space-y-1 w-full pr-4" aria-label="Sidebar">
-          {navigation.map((item) => (
-            <Link
-              key={item.name}
-              href={item.href}
-              className={classNames(
-                item.current
-                  ? "bg-green-500 text-white hover:text-white"
-                  : "text-gray-800 hover:bg-gray-200 hover:text-gray-900",
-                "flex items-center px-3 py-2 text-sm font-medium rounded-md w-full"
-              )}
-              aria-current={item.current ? "page" : undefined}
-            >
-              <span className="truncate">{item.name}</span>
-            </Link>
-          ))}
-        </nav>
+    <div className="flex justify-center">
+      <div className="flex xl:divide-x-2 justify-center h-[85vh] max-w-5xl pr-4">
+        <div className="hidden xl:flex w-56 mt-11 pr-4">
+          <nav className="space-y-1 w-full pr-4" aria-label="Sidebar">
+            {navigation.map((item) => (
+              <Link
+                key={item.name}
+                href={item.href}
+                className={classNames(
+                  item.current
+                    ? "bg-green-500 text-white hover:text-white"
+                    : "text-gray-800 hover:bg-gray-200 hover:text-gray-900",
+                  "flex items-center px-3 py-2 text-sm font-medium rounded-md w-full"
+                )}
+                aria-current={item.current ? "page" : undefined}
+              >
+                <span className="truncate">{item.name}</span>
+              </Link>
+            ))}
+          </nav>
+        </div>
+        <div className="flex-1 px-6 xl:w-[800px] ">{children}</div>
       </div>
-      <div className="flex-1 px-4">{children}</div>
     </div>
   );
 }
diff --git a/apps/client/layouts/newLayout.tsx b/apps/client/layouts/newLayout.tsx
index 58ffc5c7f..10b0d4662 100644
--- a/apps/client/layouts/newLayout.tsx
+++ b/apps/client/layouts/newLayout.tsx
@@ -12,7 +12,6 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import { Fragment, useCallback, useEffect, useState } from "react";
 
-import { spotlight } from "@mantine/spotlight";
 import useTranslation from "next-translate/useTranslation";
 import { useUser } from "../store/session";
 
@@ -496,7 +495,7 @@ export default function NewLayout({ children }: any) {
             />
 
             <div className="flex flex-1 gap-x-4 self-stretch lg:gap-x-6 pb-2">
-              <div
+              {/* <div
                 className="relative mt-2 hidden sm:flex items-center w-full min-w-[320px] max-w-[360px] hover:cursor-pointer"
                 onClick={() => {
                   spotlight.open();
@@ -518,7 +517,7 @@ export default function NewLayout({ children }: any) {
                     /
                   </kbd>
                 </div>
-              </div>
+              </div> */}
               <div className="flex w-full justify-end items-center gap-x-4 lg:gap-x-6">
                 <button
                   type="button"
@@ -590,7 +589,7 @@ export default function NewLayout({ children }: any) {
           </div>
 
           <main className="py-2">
-            <div className="px-2 py-2 sm:px-4">{children}</div>
+            <div className="p-4 sm:p-8">{children}</div>
           </main>
         </div>
       </div>
diff --git a/apps/client/layouts/settings.tsx b/apps/client/layouts/settings.tsx
index 3f4f4190e..b5be9a85e 100644
--- a/apps/client/layouts/settings.tsx
+++ b/apps/client/layouts/settings.tsx
@@ -1,13 +1,13 @@
-import { useState } from "react";
-
 import useTranslation from "next-translate/useTranslation";
 import Link from "next/link";
 import { useRouter } from "next/router";
+import { useUser } from "../store/session";
 
 export default function Settings({ children }) {
   const router = useRouter();
 
   const { t } = useTranslation("peppermint");
+  const { user } = useUser();
 
   const linkStyles = {
     active:
@@ -15,7 +15,6 @@ export default function Settings({ children }) {
     inactive:
       "w-full border-transparent text-gray-900 hover:bg-gray-50 hover:text-gray-900 group mt-1 border-l-4 px-3 py-2 flex items-center text-sm font-medium",
   };
-  const [show, setShow] = useState("profile");
 
   return (
     <div>
@@ -78,31 +77,33 @@ export default function Settings({ children }) {
                     <span className="truncate">{t("notifications")}</span>
                   </Link>
 
-                  <Link
-                    href="/settings/password"
-                    className={
-                      router.pathname === "/settings/password"
-                        ? linkStyles.active
-                        : linkStyles.inactive
-                    }
-                  >
-                    <svg
-                      className=" flex-shrink-0 -ml-1 mr-3 h-6 w-6"
-                      xmlns="http://www.w3.org/2000/svg"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      stroke="currentColor"
-                      aria-hidden="true"
+                  {!user.sso_active && (
+                    <Link
+                      href="/settings/password"
+                      className={
+                        router.pathname === "/settings/password"
+                          ? linkStyles.active
+                          : linkStyles.inactive
+                      }
                     >
-                      <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="2"
-                        d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"
-                      />
-                    </svg>
-                    <span className="truncate">{t("reset_password")}</span>
-                  </Link>
+                      <svg
+                        className=" flex-shrink-0 -ml-1 mr-3 h-6 w-6"
+                        xmlns="http://www.w3.org/2000/svg"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                        aria-hidden="true"
+                      >
+                        <path
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="2"
+                          d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"
+                        />
+                      </svg>
+                      <span className="truncate">{t("reset_password")}</span>
+                    </Link>
+                  )}
                 </nav>
               </aside>
 
diff --git a/apps/client/lib/nodemailer/ticket/create.js b/apps/client/lib/nodemailer/ticket/create.js
deleted file mode 100644
index e24273182..000000000
--- a/apps/client/lib/nodemailer/ticket/create.js
+++ /dev/null
@@ -1,97 +0,0 @@
-import nodeMailer from "nodemailer";
-import { prisma } from "../../../prisma/prisma";
-
-export async function sendTicketCreate(ticket) {
-  try {
-    let mail;
-
-    const emails = await prisma.email.findMany();
-
-    if (emails.length > 0) {
-      if (process.env.NODE_ENV === "development") {
-        let testAccount = await nodeMailer.createTestAccount();
-        mail = nodeMailer.createTransport({
-          port: 1025,
-          secure: false, // true for 465, false for other ports
-          auth: {
-            user: testAccount.user, // generated ethereal user
-            pass: testAccount.pass, // generated ethereal password
-          },
-        });
-      } else {
-        const email = emails[0];
-        mail = nodeMailer.createTransport({
-          host: email.host,
-          port: email.port,
-          secure: email.secure, // true for 465, false for other ports
-          auth: {
-            user: email.user, // generated ethereal user
-            pass: email.pass, // generated ethereal password
-          },
-        });
-      }
-
-      let info = await mail.sendMail({
-        from: '"No reply 👻" noreply@peppermint.sh', // sender address
-        to: ticket.email,
-        subject: `Ticket ${ticket.id} has just been created & logged`, // Subject line
-        text: `Hello there, Ticket ${ticket.id}, which you reported on ${ticket.createdAt}, has now been created and logged`, // plain text body
-        html: `
-      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html lang="en">
-
-  <head>
-    <meta http-equiv="Content-Type" content="text/html charset=UTF-8" />
-  </head>
-  <div id="" style="display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0">Ticket Created<div></div>
-  </div>
-
-  <body style="background-color:#ffffff;margin:0 auto;font-family:-apple-system, BlinkMacSystemFont, &#x27;Segoe UI&#x27;, &#x27;Roboto&#x27;, &#x27;Oxygen&#x27;, &#x27;Ubuntu&#x27;, &#x27;Cantarell&#x27;, &#x27;Fira Sans&#x27;, &#x27;Droid Sans&#x27;, &#x27;Helvetica Neue&#x27;, sans-serif">
-    <table align="center" role="presentation" cellSpacing="0" cellPadding="0" border="0" width="100%" style="max-width:600px;margin:0 auto">
-      <tr style="width:100%">
-        <td>
-          <table style="margin-top:8px" align="center" border="0" cellPadding="0" cellSpacing="0" role="presentation" width="100%">
-            <tbody>
-              <tr>
-                <td><img alt="Slack" src="https://raw.githubusercontent.com/Peppermint-Lab/peppermint/next/static/black-side-logo.svg" width="200" height="60" style="display:block;outline:none;border:none;text-decoration:none" /></td>
-              </tr>
-            </tbody>
-          </table>
-          <h1 style="color:#1d1c1d;font-size:16px;font-weight:700;margin:10px 0;padding:0;line-height:42px">Ticket Created: ${ticket.id}</h1>
-          <p style="font-size:20px;line-height:28px;margin:4px 0">
-          <p>Hello, <br>Your ticket has now been created and logged.</p>
-          <p style="font-size:14px;margin:16px 0;color:#000">
-          Kind regards, 
-          <br>
-          Peppermint ticket management
-          </p>
-          
-          <table align="center" border="0" cellPadding="0" cellSpacing="0" role="presentation" width="100%">
-            <tbody>
-              <tr>
-                <td>
-                  <a target="_blank" style="color:#b7b7b7;text-decoration:underline" href="https://slackhq.com" rel="noopener noreferrer">Our blog</a>   |   <a target="_blank" style="color:#b7b7b7;text-decoration:underline" href="https://slack.com/legal" rel="noopener noreferrer">Documentation</a>   |   <a target="_blank" style="color:#b7b7b7;text-decoration:underline" href="https://slack.com/help" rel="noopener noreferrer">Discord</a> </a>
-                  <p style="font-size:12px;line-height:15px;margin:16px 0;color:#b7b7b7;text-align:left">This was an automated message sent by peppermint.sh -> An open source helpdesk solution</p>
-                  <p style="font-size:12px;line-height:15px;margin:16px 0;color:#b7b7b7;text-align:left;margin-bottom:50px">©2022 Peppermint Ticket Management, a Peppermint Labs product.<br />All rights reserved.</p>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </td>
-      </tr>
-    </table>
-  </body>
-
-</html>
-      `,
-      });
-
-      console.log("Message sent: %s", info.messageId);
-
-      // Preview only available when sending through an Ethereal account
-      console.log("Preview URL: %s", nodeMailer.getTestMessageUrl(info));
-    }
-  } catch (error) {
-    console.log(error);
-  }
-}
diff --git a/apps/client/lib/nodemailer/ticket/status.js b/apps/client/lib/nodemailer/ticket/status.js
deleted file mode 100644
index 064d07a8e..000000000
--- a/apps/client/lib/nodemailer/ticket/status.js
+++ /dev/null
@@ -1,102 +0,0 @@
-import nodeMailer from "nodemailer";
-import { prisma } from "../../../prisma/prisma";
-
-export async function sendTicketStatus(ticket) {
-  let mail;
-
-  const emails = await prisma.email.findMany();
-
-  if (emails.length > 0) {
-    if (process.env.NODE_ENV === "development") {
-      let testAccount = await nodeMailer.createTestAccount();
-      mail = nodeMailer.createTransport({
-        port: 1025,
-        secure: false, // true for 465, false for other ports
-        auth: {
-          user: testAccount.user, // generated ethereal user
-          pass: testAccount.pass, // generated ethereal password
-        },
-      });
-    } else {
-      const email = emails[0];
-      mail = nodeMailer.createTransport({
-        host: email.host,
-        port: email.port,
-        secure: email.secure, // true for 465, false for other ports
-        auth: {
-          user: email.user, // generated ethereal user
-          pass: email.pass, // generated ethereal password
-        },
-      });
-    }
-
-    let info = await mail.sendMail({
-      from: "", // sender address
-      to: ticket.email,
-      subject: `Ticket ${ticket.id} status is now ${
-        ticket.isComplete ? "COMPLETED" : "OUTSTANDING"
-      }`, // Subject line
-      text: `Hello there, Ticket ${ticket.id}, now has a status of ${
-        ticket.isComplete ? "COMPLETED" : "OUTSTANDING"
-      }`, // plain text body
-      html: `
-      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-  <html lang="en">
-  
-    <head>
-      <meta http-equiv="Content-Type" content="text/html charset=UTF-8" />
-    </head>
-    <div id="" style="display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0">Ticket Created<div></div>
-    </div>
-  
-    <body style="background-color:#ffffff;margin:0 auto;font-family:-apple-system, BlinkMacSystemFont, &#x27;Segoe UI&#x27;, &#x27;Roboto&#x27;, &#x27;Oxygen&#x27;, &#x27;Ubuntu&#x27;, &#x27;Cantarell&#x27;, &#x27;Fira Sans&#x27;, &#x27;Droid Sans&#x27;, &#x27;Helvetica Neue&#x27;, sans-serif">
-      <table align="center" role="presentation" cellSpacing="0" cellPadding="0" border="0" width="100%" style="max-width:600px;margin:0 auto">
-        <tr style="width:100%">
-          <td>
-            <table style="margin-top:8px" align="center" border="0" cellPadding="0" cellSpacing="0" role="presentation" width="100%">
-              <tbody>
-                <tr>
-                  <td><img alt="Slack" src="https://raw.githubusercontent.com/Peppermint-Lab/peppermint/next/static/black-side-logo.svg" width="200" height="60" style="display:block;outline:none;border:none;text-decoration:none" /></td>
-                </tr>
-              </tbody>
-            </table>
-            <h1 style="color:#1d1c1d;font-size:16px;font-weight:700;margin:10px 0;padding:0;line-height:42px">Ticket Created: ${
-              ticket.title
-            }</h1>
-            <p style="font-size:20px;line-height:28px;margin:4px 0">
-            <p>Hello there, <br>Your Ticket, which was #${
-              ticket.number
-            }, now has a status of ${
-        ticket.isComplete ? "completed" : "open"
-      }</p>
-            Kind regards, 
-            <br>
-            Peppermint ticket management
-            </p>
-            
-            <table align="center" border="0" cellPadding="0" cellSpacing="0" role="presentation" width="100%">
-              <tbody>
-                <tr>
-                  <td>
-                    <a target="_blank" style="color:#b7b7b7;text-decoration:underline" href="https://slackhq.com" rel="noopener noreferrer">Our blog</a>   |   <a target="_blank" style="color:#b7b7b7;text-decoration:underline" href="https://slack.com/legal" rel="noopener noreferrer">Documentation</a>   |   <a target="_blank" style="color:#b7b7b7;text-decoration:underline" href="https://slack.com/help" rel="noopener noreferrer">Discord</a> </a>
-                    <p style="font-size:12px;line-height:15px;margin:16px 0;color:#b7b7b7;text-align:left">This was an automated message sent by peppermint.sh -> An open source helpdesk solution</p>
-                    <p style="font-size:12px;line-height:15px;margin:16px 0;color:#b7b7b7;text-align:left;margin-bottom:50px">©2022 Peppermint Ticket Management, a Peppermint Labs product.<br />All rights reserved.</p>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </td>
-        </tr>
-      </table>
-    </body>
-  
-  </html>
-  `,
-    });
-
-    console.log("Message sent: %s", info.messageId);
-
-    // Preview only available when sending through an Ethereal account
-    console.log("Preview URL: %s", nodeMailer.getTestMessageUrl(info));
-  }
-}
diff --git a/apps/client/locales/da/peppermint.json b/apps/client/locales/da/peppermint.json
index d08aeaee9..c72385655 100644
--- a/apps/client/locales/da/peppermint.json
+++ b/apps/client/locales/da/peppermint.json
@@ -78,7 +78,11 @@
       "profile_desc": "Disse oplysninger vil blive vist offentligt, så vær forsigtig med, hvad du deler.",
       "language": "Sprog",
       "notifications": "Notifikationer",
-      "save_and_reload": "Gem og genindlæs"
+      "save_and_reload": "Gem og genindlæs",
+      "select_a_client": "Vælg en kunde",
+      "select_an_engineer": "Vælg en ingeniør",
+      "ticket_create": "Opret billet",
+      "internallycommented_at": "Kommenteret internt kl."
     
   }
   
\ No newline at end of file
diff --git a/apps/client/locales/de/peppermint.json b/apps/client/locales/de/peppermint.json
index 908263930..e998b1d08 100644
--- a/apps/client/locales/de/peppermint.json
+++ b/apps/client/locales/de/peppermint.json
@@ -78,5 +78,9 @@
   "profile_desc": "Diese Informationen werden öffentlich angezeigt, also achten Sie darauf, was Sie teilen.",
   "language": "Sprache",
   "notifications": "Benachrichtigungen",
-  "save_and_reload": "Speichern und neu laden"
+  "save_and_reload": "Speichern und neu laden",
+  "select_a_client": "Kunden auswählen",
+  "select_an_engineer": "Einen Ingenieur auswählen",
+  "ticket_create": "Ticket erstellen",
+  "internallycommented_at": "Intern kommentiert um"
 }
diff --git a/apps/client/locales/en/peppermint.json b/apps/client/locales/en/peppermint.json
index 594d220e6..53c47c66f 100644
--- a/apps/client/locales/en/peppermint.json
+++ b/apps/client/locales/en/peppermint.json
@@ -78,5 +78,9 @@
   "profile_desc": "This information will be displayed publicly so be careful what you share.",
   "language": "Language",
   "notifications": "Notifications",
-  "save_and_reload": "Save and Reload"
+  "save_and_reload": "Save and Reload",
+  "select_a_client": "Select a client",
+  "select_an_engineer": "Select an engineer",
+  "ticket_create": "Create Ticket",
+  "internallycommented_at": "Internally Commented At"
 }
diff --git a/apps/client/locales/es/peppermint.json b/apps/client/locales/es/peppermint.json
index 5a1b18f4c..6978c7393 100644
--- a/apps/client/locales/es/peppermint.json
+++ b/apps/client/locales/es/peppermint.json
@@ -78,6 +78,10 @@
   "profile_desc": "Esta información se mostrará públicamente, así que ten cuidado con lo que compartes.",
   "language": "Idioma",
   "notifications": "Notificaciones",
-  "save_and_reload": "Guardar y recargar"
+  "save_and_reload": "Guardar y recargar",
+  "select_a_client": "Seleccionar un cliente",
+  "select_an_engineer": "Seleccionar un ingeniero",
+  "ticket_create": "Crear ticket",
+  "internallycommented_at": "Comentado internamente en"
   }
   
\ No newline at end of file
diff --git a/apps/client/locales/fr/peppermint.json b/apps/client/locales/fr/peppermint.json
index 0207fe08d..89357cb5a 100644
--- a/apps/client/locales/fr/peppermint.json
+++ b/apps/client/locales/fr/peppermint.json
@@ -78,7 +78,11 @@
       "profile_desc": "Ces informations seront affichées publiquement, alors faites attention à ce que vous partagez.",
       "language": "Langue",
       "notifications": "Notifications",
-      "save_and_reload": "Enregistrer et recharger"
+      "save_and_reload": "Enregistrer et recharger",
+      "select_a_client": "Sélectionner un client",
+      "select_an_engineer": "Sélectionner un ingénieur",
+      "ticket_create": "Créer un ticket",
+      "internallycommented_at": "Commenté en interne à"
     
   }
   
\ No newline at end of file
diff --git a/apps/client/locales/no/peppermint.json b/apps/client/locales/no/peppermint.json
index 611f149c6..d9c823d56 100644
--- a/apps/client/locales/no/peppermint.json
+++ b/apps/client/locales/no/peppermint.json
@@ -78,6 +78,10 @@
   "profile_desc": "Denne informasjonen vil bli vist offentlig, så vær forsiktig med hva du deler.",
   "language": "Språk",
   "notifications": "Varsler",
-  "save_and_reload": "Lagre og last inn på nytt"
+  "save_and_reload": "Lagre og last inn på nytt",
+  "select_a_client": "Velg en kunde",
+      "select_an_engineer": "Velg en ingeniør",
+      "ticket_create": "Opprett billett",
+      "internallycommented_at": "Kommentert internt kl."
   }
   
\ No newline at end of file
diff --git a/apps/client/locales/pt/peppermint.json b/apps/client/locales/pt/peppermint.json
index 20bd655d4..f26e2f3a1 100644
--- a/apps/client/locales/pt/peppermint.json
+++ b/apps/client/locales/pt/peppermint.json
@@ -78,6 +78,10 @@
     "profile_desc": "Estas informações serão exibidas publicamente, então tenha cuidado com o que compartilha.",
   "language": "Idioma",
   "notifications": "Notificações",
-  "save_and_reload": "Salvar e Recarregar"
+  "save_and_reload": "Salvar e Recarregar",
+  "select_a_client": "Selecionar um cliente",
+  "select_an_engineer": "Selecionar um engenheiro",
+  "ticket_create": "Criar ticket",
+  "internallycommented_at": "Comentado internamente às"
   }
   
\ No newline at end of file
diff --git a/apps/client/locales/se/peppermint.json b/apps/client/locales/se/peppermint.json
index 1306e0635..107e1343b 100644
--- a/apps/client/locales/se/peppermint.json
+++ b/apps/client/locales/se/peppermint.json
@@ -78,5 +78,9 @@
   "profile_desc": "Denna information kommer att visas offentligt, så var försiktig med vad du delar.",
   "language": "Språk",
   "notifications": "Notifieringar",
-  "save_and_reload": "Spara och ladda om"
+  "save_and_reload": "Spara och ladda om",
+  "select_a_client": "Välj en klient",
+      "select_an_engineer": "Välj en ingenjör",
+      "ticket_create": "Skapa en biljett",
+      "internallycommented_at": "Kommenterat internt kl."
 }
diff --git a/apps/client/locales/tl/peppermint.json b/apps/client/locales/tl/peppermint.json
index fee9879b7..9345f950e 100644
--- a/apps/client/locales/tl/peppermint.json
+++ b/apps/client/locales/tl/peppermint.json
@@ -78,7 +78,11 @@
       "profile_desc": "Ang impormasyong ito ay ipapakita sa publiko kaya mag-ingat sa iyong ibabahagi.",
   "language": "Wika",
   "notifications": "Mga Abiso",
-  "save_and_reload": "I-save at I-reload"
+  "save_and_reload": "I-save at I-reload",
+    "select_a_client": "Pumili ng isang kliyente",
+    "select_an_engineer": "Pumili ng isang inhinyero",
+    "ticket_create": "Gumawa ng tiket",
+    "internallycommented_at": "Internallyo nag-komento sa"
     
   }
   
\ No newline at end of file
diff --git a/apps/client/package.json b/apps/client/package.json
index 3817591b0..cfc2acf00 100644
--- a/apps/client/package.json
+++ b/apps/client/package.json
@@ -16,6 +16,7 @@
     "@mantine/notifications": "^6.0.13",
     "@mantine/spotlight": "^6.0.13",
     "@mantine/tiptap": "^6.0.13",
+    "@radix-ui/themes": "^2.0.1",
     "@tabler/icons-react": "^2.20.0",
     "@tailwindcss/forms": "^0.4.0",
     "@tiptap/extension-highlight": "^2.0.3",
diff --git a/apps/client/pages/_app.tsx b/apps/client/pages/_app.tsx
index 936d9a267..15b48ff63 100644
--- a/apps/client/pages/_app.tsx
+++ b/apps/client/pages/_app.tsx
@@ -1,3 +1,4 @@
+import "@radix-ui/themes/styles.css";
 import "../styles/globals.css";
 
 import {
@@ -9,6 +10,7 @@ import {
 import { MantineProvider } from "@mantine/core";
 import { Notifications } from "@mantine/notifications";
 import { SpotlightProvider } from "@mantine/spotlight";
+import { Theme } from "@radix-ui/themes";
 import { useRouter } from "next/router";
 import { QueryClient, QueryClientProvider } from "react-query";
 
@@ -37,10 +39,7 @@ function Auth({ children }: any) {
   }
 
   return (
-    <div className="flex h-screen justify-center items-center text-green-600">
-      {/* <ScaleLoader color="green" loading={status} size={100} /> */}
-      <span>loading</span>
-    </div>
+    <div className="flex h-screen justify-center items-center text-green-600"></div>
   );
 }
 
@@ -92,32 +91,35 @@ function MyApp({ Component, pageProps: { session, ...pageProps } }: any) {
 
   if (router.asPath.slice(0, 5) === "/auth") {
     return (
-      <SessionProvider>
+      <>
+        <Notifications position="top-right" />
         <Component {...pageProps} />
-      </SessionProvider>
+      </>
     );
   }
 
   if (router.pathname.includes("/admin")) {
     return (
       <SessionProvider>
-        <MantineProvider withNormalizeCSS withGlobalStyles>
-          <SpotlightProvider
-            shortcut={["mod + P", "mod + K", "/"]}
-            actions={actions}
-          >
-            <QueryClientProvider client={queryClient}>
-              <Auth>
-                <NewLayout>
-                  <AdminLayout>
-                    <Notifications position="top-right" />
-                    <Component {...pageProps} />
-                  </AdminLayout>
-                </NewLayout>
-              </Auth>
-            </QueryClientProvider>
-          </SpotlightProvider>
-        </MantineProvider>
+        <Theme>
+          <MantineProvider withNormalizeCSS withGlobalStyles>
+            <SpotlightProvider
+              shortcut={["mod + P", "mod + K", "/"]}
+              actions={actions}
+            >
+              <QueryClientProvider client={queryClient}>
+                <Auth>
+                  <NewLayout>
+                    <AdminLayout>
+                      <Notifications position="top-right" />
+                      <Component {...pageProps} />
+                    </AdminLayout>
+                  </NewLayout>
+                </Auth>
+              </QueryClientProvider>
+            </SpotlightProvider>
+          </MantineProvider>
+        </Theme>
       </SessionProvider>
     );
   }
@@ -192,22 +194,24 @@ function MyApp({ Component, pageProps: { session, ...pageProps } }: any) {
 
   return (
     <SessionProvider>
-      <MantineProvider withNormalizeCSS withGlobalStyles>
-        <SpotlightProvider
-          shortcut={["mod + P", "mod + K", "/"]}
-          actions={actions}
-          searchPlaceholder="Search ..."
-        >
-          <QueryClientProvider client={queryClient}>
-            <Auth>
-              <NewLayout>
-                <Notifications position="top-right" />
-                <Component {...pageProps} />
-              </NewLayout>
-            </Auth>
-          </QueryClientProvider>
-        </SpotlightProvider>
-      </MantineProvider>
+      <Theme>
+        <MantineProvider withNormalizeCSS withGlobalStyles>
+          <SpotlightProvider
+            shortcut={["mod + P", "mod + K", "/"]}
+            actions={actions}
+            searchPlaceholder="Search ..."
+          >
+            <QueryClientProvider client={queryClient}>
+              <Auth>
+                <NewLayout>
+                  <Notifications position="top-right" />
+                  <Component {...pageProps} />
+                </NewLayout>
+              </Auth>
+            </QueryClientProvider>
+          </SpotlightProvider>
+        </MantineProvider>
+      </Theme>
     </SessionProvider>
   );
 }
diff --git a/apps/client/pages/admin/email-queues/new.js b/apps/client/pages/admin/email-queues/new.js
index 3b9b92a4b..5f78b24e0 100644
--- a/apps/client/pages/admin/email-queues/new.js
+++ b/apps/client/pages/admin/email-queues/new.js
@@ -108,6 +108,7 @@ export default function EmailQueues() {
                       onChange={(e) => setHostname(e.target.value)}
                     />
                   </div>
+
                   <div>
                     <label
                       htmlFor="email"
diff --git a/apps/client/pages/admin/email.tsx b/apps/client/pages/admin/email.tsx
new file mode 100644
index 000000000..19019a472
--- /dev/null
+++ b/apps/client/pages/admin/email.tsx
@@ -0,0 +1,283 @@
+import { Switch } from "@headlessui/react";
+import { ExclamationTriangleIcon } from "@heroicons/react/20/solid";
+import { getCookie } from "cookies-next";
+import { useEffect, useState } from "react";
+
+export default function Notifications() {
+  const [loading, setLoading] = useState(true);
+  const [enabled, setEnabled] = useState(false);
+  const [host, setHost] = useState("");
+  const [port, setPort] = useState("");
+  const [secure, setSecure] = useState(true);
+  const [reply, setReply] = useState("");
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+
+  async function updateEmailConfig() {
+    await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/v1/config/email`, {
+      method: "PUT",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${getCookie("session")}`,
+      },
+      body: JSON.stringify({
+        host,
+        active: enabled,
+        port,
+        secure,
+        reply,
+        username,
+        password,
+      }),
+    })
+      .then((res) => res.json())
+      .then((res) => {
+        fetchEmailConfig();
+      });
+  }
+
+  async function fetchEmailConfig() {
+    await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/v1/config/email`, {
+      method: "get",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${getCookie("session")}`,
+      },
+    })
+      .then((res) => res.json())
+      .then((res) => {
+        if (res.success && res.active) {
+          console.log(res);
+          setEnabled(res.email.active);
+          setHost(res.email.host);
+          setPort(res.email.port);
+          setSecure(res.email.secure);
+          setUsername(res.email.user);
+          setReply(res.email.reply);
+        } else {
+          setEnabled(false);
+        }
+      })
+      .then(() => setLoading(false));
+  }
+
+  useEffect(() => {
+    fetchEmailConfig();
+  }, []);
+
+  return (
+    <main className="flex-1">
+      <div className="relative max-w-4xl mx-auto md:px-8 xl:px-0">
+        <div className="pt-10 pb-6">
+          <div className="divide-y-2">
+            <div className="px-4 sm:px-6 md:px-0">
+              <h1 className="text-3xl font-extrabold text-gray-900">
+                Outbound Email Settings
+              </h1>
+            </div>
+            <div className="px-4 sm:px-6 md:px-0">
+              <div className="sm:flex sm:items-center mt-4">
+                <div className="sm:flex-auto">
+                  <p className="mt-2 text-sm text-gray-700">
+                    Manage your outbound email settings. This is the mailbox
+                    that will send all outbound emails. To either clients or
+                    internal users for Notifications.
+                  </p>
+                </div>
+                <div className="sm:ml-16 sm:flex-none">
+                  <>
+                    <button
+                      onClick={() => updateEmailConfig()}
+                      type="button"
+                      className="rounded bg-white px-4 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
+                    >
+                      Save
+                    </button>
+                  </>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        {!loading && (
+          <div className="px-4 sm:px-6 md:px-0">
+            <div className="mb-6">
+              {enabled ? (
+                <div className="rounded-md bg-green-50 p-4">
+                  <div className="flex">
+                    <div className="flex-shrink-0">
+                      <ExclamationTriangleIcon
+                        className="h-5 w-5 text-green-400"
+                        aria-hidden="true"
+                      />
+                    </div>
+                    <div className="ml-3">
+                      <h3 className="text-sm font-medium text-green-800">
+                        SMTP Config Found & working
+                      </h3>
+                      <div className="mt-2 text-sm text-green-700">
+                        <p>The config you supplied is working as intended.</p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              ) : (
+                <div className="rounded-md bg-yellow-50 p-4">
+                  <div className="flex">
+                    <div className="flex-shrink-0">
+                      <ExclamationTriangleIcon
+                        className="h-5 w-5 text-yellow-400"
+                        aria-hidden="true"
+                      />
+                    </div>
+                    <div className="ml-3">
+                      <h3 className="text-sm font-medium text-yellow-800">
+                        No Active Email Settings found
+                      </h3>
+                      <div className="mt-2 text-sm text-yellow-700">
+                        <p>
+                          Please either create and submit an smtp config or
+                          active your old one.
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
+            <div className="bg-white shadow sm:rounded-lg">
+              <div className="px-4 py-5 sm:p-6">
+                <div className="space-y-6">
+                  <div className="grid grid-cols-3 gap-6">
+                    <div className="col-span-3 sm:col-span-2">
+                      <label
+                        htmlFor="company_website"
+                        className="block text-sm font-medium text-gray-700"
+                      >
+                        SMTP Host
+                      </label>
+                      <div className="mt-1 flex rounded-md shadow-sm">
+                        <input
+                          type="text"
+                          name="company_website"
+                          id="company_website"
+                          className="flex-1 focus:ring-green-500 focus:border-green-500 block w-full min-w-0 rounded-md sm:text-sm border-gray-300"
+                          placeholder="smtp.gmail.com"
+                          value={host}
+                          onChange={(e) => setHost(e.target.value)}
+                        />
+                      </div>
+                    </div>
+                  </div>
+                  <div className="grid grid-cols-3 gap-6">
+                    <div className="col-span-3 sm:col-span-2">
+                      <label
+                        htmlFor="company_website"
+                        className="block text-sm font-medium text-gray-700"
+                      >
+                        SMTP Port
+                      </label>
+                      <div className="mt-1 flex rounded-md shadow-sm">
+                        <input
+                          type="text"
+                          name="company_website"
+                          id="company_website"
+                          className="flex-1 focus:ring-green-500 focus:border-green-500 block w-full min-w-0 rounded-md sm:text-sm border-gray-300"
+                          placeholder="587"
+                          value={port}
+                          onChange={(e) => setPort(e.target.value)}
+                        />
+                      </div>
+                    </div>
+                  </div>
+                  <div className="grid grid-cols-3 gap-6">
+                    <div className="col-span-3 sm:col-span-2">
+                      <label
+                        htmlFor="company_website"
+                        className="block text-sm font-medium text-gray-700"
+                      >
+                        SMTP Username
+                      </label>
+                      <div className="mt-1 flex rounded-md shadow-sm">
+                        <input
+                          type="text"
+                          name="company_website"
+                          id="company_website"
+                          className="flex-1 focus:ring-green-500 focus:border-green-500 block w-full min-w-0 rounded-md sm:text-sm border"
+                          value={username}
+                          onChange={(e) => setUsername(e.target.value)}
+                        />
+                      </div>
+                    </div>
+                  </div>
+                  <div className="grid grid-cols-3 gap-6">
+                    <div className="col-span-3 sm:col-span-2">
+                      <label
+                        htmlFor="company_website"
+                        className="block text-sm font-medium text-gray-700"
+                      >
+                        SMTP Password
+                      </label>
+                      <div className="mt-1 flex rounded-md shadow-sm">
+                        <input
+                          type="text"
+                          name="company_website"
+                          id="company_website"
+                          className="flex-1 focus:ring-green-500 focus:border-green-500 block w-full min-w-0 rounded-md sm:text-sm border"
+                          value={password}
+                          onChange={(e) => setPassword(e.target.value)}
+                        />
+                      </div>
+                    </div>
+                  </div>
+                  <div className="grid grid-cols-3 gap-6">
+                    <div className="col-span-3 sm:col-span-2">
+                      <label
+                        htmlFor="company_website"
+                        className="block text-sm font-medium text-gray-700"
+                      >
+                        reply-to
+                      </label>
+                      <div className="mt-1 flex rounded-md shadow-sm">
+                        <input
+                          type="text"
+                          name="company_website"
+                          id="company_website"
+                          className="flex-1 focus:ring-green-500 focus:border-green-500 block w-full min-w-0 rounded-md sm:text-sm border"
+                          value={reply}
+                          onChange={(e) => setReply(e.target.value)}
+                        />
+                      </div>
+                    </div>
+                  </div>
+                  <div>
+                    <label
+                      htmlFor="company_website"
+                      className="block text-sm font-medium text-gray-700"
+                    >
+                      Secure
+                    </label>
+                    <Switch
+                      checked={secure}
+                      onChange={setSecure}
+                      className={`${
+                        enabled ? "bg-blue-600" : "bg-gray-200"
+                      } relative inline-flex h-6 w-11 items-center rounded-full`}
+                    >
+                      <span className="sr-only">Enable notifications</span>
+                      <span
+                        className={`${
+                          enabled ? "translate-x-6" : "translate-x-1"
+                        } inline-block h-4 w-4 transform rounded-full bg-white transition`}
+                      />
+                    </Switch>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </main>
+  );
+}
diff --git a/apps/client/pages/admin/sso.js b/apps/client/pages/admin/sso.js
deleted file mode 100644
index af307f241..000000000
--- a/apps/client/pages/admin/sso.js
+++ /dev/null
@@ -1,168 +0,0 @@
-import { Fragment, useState } from "react";
-import { Menu, Transition, Switch } from "@headlessui/react";
-import { EllipsisVerticalIcon } from "@heroicons/react/20/solid";
-
-function classNames(...classes) {
-  return classes.filter(Boolean).join(" ");
-}
-
-export default function Notifications() {
-  const [enabled, setEnabled] = useState(false);
-  const [provider, setProvider] = useState();
-  const [clientId, setClientId] = useState();
-  const [clientSecret, setClientSecret] = useState();
-  const [tenantId, setTenantId] = useState();
-  const [issuer, setIssuer] = useState();
-
-  async function postData() {
-    const res = await fetch("/api/v1/admin/sso/update", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify({
-        provider,
-        clientId,
-        clientSecret,
-        tenantId,
-        issuer,
-      }),
-    })
-      .then((res) => res.json())
-      .then(() => {
-        // handle success or error
-      });
-  }
-
-  return (
-    <main className="flex-1">
-      <div className="relative max-w-4xl mx-auto md:px-8 xl:px-0">
-        <div className="pt-10 pb-16">
-          <div className="px-4 sm:px-6 md:px-0">
-            <h1 className="text-3xl font-extrabold text-gray-900">
-              SSO Settings
-            </h1>
-          </div>
-          <div className="px-4 sm:px-6 md:px-0">
-            <div className="py-6">
-              <div className="w-full lg:w-1/2">
-                <h2 className="text-base font-semibold leading-7 text-gray-900">
-                  Provider
-                </h2>
-                <p className="mt-1 text-sm leading-6 text-gray-600">
-                  Which provider would you like to use?
-                </p>
-                <select
-                  id="provider"
-                  name="provider"
-                  onChange={(e) => setProvider(e.target.value)}
-                  className="mt-2 block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-indigo-600 sm:text-sm sm:leading-6"
-                  defaultValue=""
-                >
-                  {provider === undefined && (
-                    <option>Please select an option</option>
-                  )}
-                  <option>Azure Active Directory</option>
-                  <option>Auth0</option>
-                  <option>Github</option>
-                  <option>Discord</option>
-                  <option>Gitlab</option>
-                  <option>Google</option>
-                  <option>Atlassian</option>
-                  <option>Apple</option>
-                  {/* <option>Amazon Cognito</option> */}
-                </select>
-              </div>
-              {provider !== undefined && (
-                <div className="space-y-4 mt-4">
-                  <div>
-                    <label
-                      htmlFor="email"
-                      className="block text-sm font-medium leading-6 text-gray-900"
-                    >
-                      clientId
-                    </label>
-                    <div className="mt-2">
-                      <input
-                        type="email"
-                        name="email"
-                        id="email"
-                        className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
-                        onChange={(e) => setClientId(e.target.value)}
-                      />
-                    </div>
-                  </div>
-                  <div>
-                    <label
-                      htmlFor="email"
-                      className="block text-sm font-medium leading-6 text-gray-900"
-                    >
-                      clientSecret
-                    </label>
-                    <div className="mt-2">
-                      <input
-                        type="email"
-                        name="email"
-                        id="email"
-                        className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
-                        onChange={(e) => setClientSecret(e.target.value)}
-                      />
-                    </div>
-                  </div>
-                  {provider === "Azure Active Directory" && (
-                    <div>
-                      <label
-                        htmlFor="email"
-                        className="block text-sm font-medium leading-6 text-gray-900"
-                      >
-                        tenantId
-                      </label>
-                      <div className="mt-2">
-                        <input
-                          type="email"
-                          name="email"
-                          id="email"
-                          className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
-                          onChange={(e) => setTenantId(e.target.value)}
-                        />
-                      </div>
-                    </div>
-                  )}
-                  {provider === "Auth0" && (
-                    <div>
-                      <label
-                        htmlFor="email"
-                        className="block text-sm font-medium leading-6 text-gray-900"
-                      >
-                        Issuer
-                      </label>
-                      <div className="mt-2">
-                        <input
-                          type="email"
-                          name="email"
-                          id="email"
-                          className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
-                          onChange={(e) => setIssuer(e.target.value)}
-                        />
-                      </div>
-                    </div>
-                  )}
-
-                  <div className="mt-6 flex items-center justify-end gap-x-6">
-                    <button
-                      type="submit"
-                      onClick={() => postData()}
-                      className="rounded-md bg-green-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600"
-                    >
-                      Save
-                    </button>
-                  </div>
-                </div>
-              )}
-            </div>
-          </div>
-        </div>
-      </div>
-    </main>
-  );
-}
diff --git a/apps/client/pages/admin/sso.tsx b/apps/client/pages/admin/sso.tsx
new file mode 100644
index 000000000..35dea8904
--- /dev/null
+++ b/apps/client/pages/admin/sso.tsx
@@ -0,0 +1,431 @@
+import { ExclamationTriangleIcon } from "@heroicons/react/20/solid";
+import { getCookie } from "cookies-next";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+
+export default function SSO() {
+  const router = useRouter();
+
+  const [isloading, setIsLoading] = useState(true);
+  const [enabled, setEnabled] = useState(false);
+  const [provider, setProvider] = useState("");
+  const [clientId, setClientId] = useState("");
+  const [clientSecret, setClientSecret] = useState("");
+  const [tenantId, setTenantId] = useState("");
+  const [issuer, setIssuer] = useState("");
+  const [redirectUri, setRedirectUri] = useState(
+    `${window.location.origin}/auth/oauth`
+  );
+  const [sso, setSSO] = useState<any>();
+
+  async function postData() {
+    await fetch(
+      `${process.env.NEXT_PUBLIC_API_URL}/api/v1/config/sso/provider`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${getCookie("session")}`,
+        },
+        body: JSON.stringify({
+          name: provider,
+          client_id: clientId,
+          client_secret: clientSecret,
+          tenantId,
+          issuer,
+          redirect_uri: redirectUri,
+        }),
+      }
+    )
+      .then((res) => res.json())
+      .then((res) => {
+        if (res.success) {
+          router.reload();
+        }
+      });
+  }
+
+  async function deleteConfig() {
+    await fetch(
+      `${process.env.NEXT_PUBLIC_API_URL}/api/v1/config/sso/provider`,
+      {
+        method: "DELETE",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${getCookie("session")}`,
+        },
+      }
+    )
+      .then((res) => res.json())
+      .then((res) => {
+        if (res.success) {
+          router.reload();
+        }
+      });
+  }
+
+  async function checkState() {
+    await fetch(
+      `${process.env.NEXT_PUBLIC_API_URL}/api/v1/config/sso/enabled`,
+      {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${getCookie("session")}`,
+        },
+      }
+    )
+      .then((res) => res.json())
+      .then((res) => {
+        if (res.success) {
+          setEnabled(res.sso);
+
+          if (res.sso) {
+            setClientId(res.provider.clientId);
+          }
+          setSSO(res.provider);
+
+          setIsLoading(false);
+        }
+      });
+  }
+
+  console.log(provider);
+
+  useEffect(() => {
+    checkState();
+  }, []);
+
+  return (
+    <main className="flex-1">
+      <div className="relative max-w-4xl mx-auto md:px-8 xl:px-0">
+        <div className="pt-10 pb-16">
+          <div className="px-4 sm:px-6 md:px-0">
+            <h1 className="text-3xl font-extrabold text-gray-900">
+              SSO Settings
+            </h1>
+          </div>
+          <div className="px-4 sm:px-6 md:px-0 my-4">
+            <div className="mb-6">
+              {enabled ? (
+                <div className="rounded-md bg-green-50 p-4">
+                  <div className="flex">
+                    <div className="flex-shrink-0">
+                      <ExclamationTriangleIcon
+                        className="h-5 w-5 text-green-400"
+                        aria-hidden="true"
+                      />
+                    </div>
+                    <div className="ml-3">
+                      <h3 className="text-sm font-medium text-green-800">
+                        SSO is enabled & configured
+                      </h3>
+                      <div className="mt-2 text-sm text-green-700">
+                        <p>The config you supplied is working as intended.</p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              ) : (
+                <div className="rounded-md bg-yellow-50 p-4">
+                  <div className="flex">
+                    <div className="flex-shrink-0">
+                      <ExclamationTriangleIcon
+                        className="h-5 w-5 text-yellow-400"
+                        aria-hidden="true"
+                      />
+                    </div>
+                    <div className="ml-3">
+                      <h3 className="text-sm font-medium text-yellow-800">
+                        No Active SSO Settings found
+                      </h3>
+                      <div className="mt-2 text-sm text-yellow-700">
+                        <p>
+                          Please either create and submit an sso config or
+                          activate your old one.
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
+            <div className="py-6 bg-white shadow-md p-4 rounded-md">
+              {!isloading && !enabled ? (
+                <>
+                  <div>
+                    <div className="w-full lg:w-1/2">
+                      <h2 className="text-base font-semibold leading-7 text-gray-900">
+                        Provider
+                      </h2>
+                      <p className="mt-1 text-sm leading-6 text-gray-600">
+                        Which provider would you like to use?
+                      </p>
+                      <select
+                        id="provider"
+                        name="provider"
+                        onChange={(e) => setProvider(e.target.value)}
+                        className="mt-2 block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                        value={provider || ""}
+                      >
+                        {provider === "" && (
+                          <option value="" disabled>
+                            Please select an option
+                          </option>
+                        )}
+                        <option value="github">Github</option>
+                        {/* <option value="discord">Discord</option>
+                        <option value="gitlab">Gitlab</option>
+                        <option value="google">Google</option> */}
+                      </select>
+                    </div>
+                  </div>
+                  {provider !== "" && (
+                    <div className="space-y-4 mt-4">
+                      <div>
+                        <span className="text-xl font-bold capitalize">
+                          {provider} SSO settings
+                        </span>
+                      </div>
+                      <div>
+                        <label
+                          htmlFor="clientIdddd"
+                          className="block text-sm font-medium leading-6 text-gray-900"
+                        >
+                          Client Id
+                        </label>
+                        <div className="mt-2">
+                          <input
+                            type="text"
+                            name="clientIdddd"
+                            id="clientIdddd"
+                            autoComplete="new-password"
+                            className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                            onChange={(e) => setClientId(e.target.value)}
+                          />
+                        </div>
+                      </div>
+                      <div>
+                        <label
+                          htmlFor="secret"
+                          className="block text-sm font-medium leading-6 text-gray-900"
+                        >
+                          Client Secret
+                        </label>
+                        <div className="mt-2">
+                          <input
+                            type="text"
+                            name="secret"
+                            id="secret"
+                            autoComplete="new-password"
+                            className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                            onChange={(e) => setClientSecret(e.target.value)}
+                          />
+                        </div>
+                      </div>
+                      <div>
+                        <label
+                          htmlFor="redirecturi"
+                          className="block text-sm font-medium leading-6 text-gray-900"
+                        >
+                          Redirect Uri
+                        </label>
+                        <div className="mt-2">
+                          <input
+                            type="text"
+                            id="redirecturi"
+                            className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                            onChange={(e) => setRedirectUri(e.target.value)}
+                            value={redirectUri}
+                          />
+                        </div>
+                      </div>
+                      {provider === "azure_ad" && (
+                        <div>
+                          <label
+                            htmlFor="email"
+                            className="block text-sm font-medium leading-6 text-gray-900"
+                          >
+                            tenantId
+                          </label>
+                          <div className="mt-2">
+                            <input
+                              type="email"
+                              name="email"
+                              id="email"
+                              className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                              onChange={(e) => setTenantId(e.target.value)}
+                            />
+                          </div>
+                        </div>
+                      )}
+                      {provider === "Auth0" && (
+                        <div>
+                          <label
+                            htmlFor="email"
+                            className="block text-sm font-medium leading-6 text-gray-900"
+                          >
+                            Issuer
+                          </label>
+                          <div className="mt-2">
+                            <input
+                              type="email"
+                              name="email"
+                              id="email"
+                              className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                              onChange={(e) => setIssuer(e.target.value)}
+                            />
+                          </div>
+                        </div>
+                      )}
+
+                      <div className="mt-6 flex items-center justify-end gap-x-6">
+                        <button
+                          type="submit"
+                          onClick={() => postData()}
+                          className="rounded-md bg-green-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600"
+                        >
+                          Save
+                        </button>
+                      </div>
+                    </div>
+                  )}
+                </>
+              ) : (
+                sso !== undefined && (
+                  <div className="p-4">
+                    <div>
+                      <div className="flex flex-col space-y-2">
+                        <span className="text-xl font-bold capitalize">
+                          {sso.name} SSO settings
+                        </span>
+                        <span className="text-sm">
+                          Below are the settings for your active ouath based SSO
+                          set up. This set up is <strong>ORG WIDE</strong>, and
+                          affects all users. Take caution when updating these
+                          values.
+                        </span>
+                      </div>
+                      <div className="space-y-4 mt-4">
+                        <div>
+                          <label
+                            htmlFor="clientId"
+                            className="block text-sm font-medium leading-6 text-gray-900"
+                          >
+                            Client Id
+                          </label>
+                          <div className="mt-2">
+                            <input
+                              type="text"
+                              name="clientId"
+                              id="clientId"
+                              autoComplete="new-password"
+                              className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                              onChange={(e) => setClientId(e.target.value)}
+                              value={clientId}
+                              defaultValue={sso?.client_id}
+                            />
+                          </div>
+                        </div>
+                        <div>
+                          <label
+                            htmlFor="secret"
+                            className="block text-sm font-medium leading-6 text-gray-900"
+                          >
+                            Client Secret
+                          </label>
+                          <div className="mt-2">
+                            <input
+                              type="password"
+                              name="secret"
+                              id="secret"
+                              autoComplete="new-password"
+                              className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                              onChange={(e) => setClientSecret(e.target.value)}
+                            />
+                          </div>
+                        </div>
+                        <div>
+                          <label
+                            htmlFor="redirecturi"
+                            className="block text-sm font-medium leading-6 text-gray-900"
+                          >
+                            Redirect Uri
+                          </label>
+                          <div className="mt-2">
+                            <input
+                              type="text"
+                              id="redirecturi"
+                              className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                              onChange={(e) => setRedirectUri(e.target.value)}
+                              value={redirectUri}
+                            />
+                          </div>
+                        </div>
+                        {sso.name === "azure_ad" && (
+                          <div>
+                            <label
+                              htmlFor="tennantId"
+                              className="block text-sm font-medium leading-6 text-gray-900"
+                            >
+                              tenantId
+                            </label>
+                            <div className="mt-2">
+                              <input
+                                type="text"
+                                name="tennantId"
+                                id="tennantId"
+                                className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                                onChange={(e) => setTenantId(e.target.value)}
+                              />
+                            </div>
+                          </div>
+                        )}
+                        {sso.name === "Auth0" && (
+                          <div>
+                            <label
+                              htmlFor="email"
+                              className="block text-sm font-medium leading-6 text-gray-900"
+                            >
+                              Issuer
+                            </label>
+                            <div className="mt-2">
+                              <input
+                                type="text"
+                                name="issuer"
+                                id="issuer"
+                                className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                                onChange={(e) => setIssuer(e.target.value)}
+                              />
+                            </div>
+                          </div>
+                        )}
+
+                        <div className="mt-12 flex items-center justify-between gap-x-6">
+                          <button
+                            type="submit"
+                            onClick={() => deleteConfig()}
+                            className="rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600"
+                          >
+                            Delete Config
+                          </button>
+                          <button
+                            type="submit"
+                            onClick={() => postData()}
+                            className="rounded-md bg-green-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-green-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-600"
+                          >
+                            Update Config
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                )
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+}
diff --git a/apps/client/pages/admin/tickets.tsx b/apps/client/pages/admin/tickets.tsx
new file mode 100644
index 000000000..16a06ac9f
--- /dev/null
+++ b/apps/client/pages/admin/tickets.tsx
@@ -0,0 +1,410 @@
+import { getCookie } from "cookies-next";
+import moment from "moment";
+import { useRouter } from "next/router";
+import React, { useMemo } from "react";
+import { useQuery } from "react-query";
+import {
+  useFilters,
+  useGlobalFilter,
+  usePagination,
+  useTable,
+} from "react-table";
+import TicketsMobileList from "../../components/TicketsMobileList";
+
+const fetchALLTIckets = async () => {
+  const res = await fetch(
+    `${process.env.NEXT_PUBLIC_API_URL}/api/v1/tickets/all/admin`,
+    {
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${getCookie("session")}`,
+      },
+    }
+  );
+  return res.json();
+};
+
+function DefaultColumnFilter({ column: { filterValue, setFilter } }: any) {
+  return (
+    <input
+      className="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md"
+      type="text"
+      value={filterValue || ""}
+      onChange={(e) => {
+        setFilter(e.target.value || undefined); // Set undefined to remove the filter entirely
+      }}
+      placeholder="Type to filter"
+    />
+  );
+}
+function Table({ columns, data }: any) {
+  const filterTypes = React.useMemo(
+    () => ({
+      // Add a new fuzzyTextFilterFn filter type.
+      // fuzzyText: fuzzyTextFilterFn,
+      // Or, override the default text filter to use
+      // "startWith"
+      text: (rows: any, id: any, filterValue: any) =>
+        rows.filter((row: any) => {
+          const rowValue = row.values[id];
+          return rowValue !== undefined
+            ? String(rowValue)
+                .toLowerCase()
+                .startsWith(String(filterValue).toLowerCase())
+            : true;
+        }),
+    }),
+    []
+  );
+
+  const defaultColumn = React.useMemo(
+    () => ({
+      // Let's set up our default Filter UI
+      Filter: DefaultColumnFilter,
+    }),
+    []
+  );
+
+  const {
+    getTableProps,
+    getTableBodyProps,
+    headerGroups,
+    //@ts-expect-error
+    page,
+    prepareRow,
+    //@ts-expect-error
+    canPreviousPage,
+    //@ts-expect-error
+    canNextPage,
+    //@ts-expect-error
+    pageCount,
+    //@ts-expect-error
+    gotoPage,
+    //@ts-expect-error
+    nextPage,
+    //@ts-expect-error
+    previousPage,
+    //@ts-expect-error
+    setPageSize,
+    //@ts-expect-error
+    state: { pageIndex, pageSize },
+  } = useTable(
+    {
+      columns,
+      data,
+      //@ts-expect-error
+      defaultColumn, // Be sure to pass the defaultColumn option
+      filterTypes,
+      initialState: {
+        //@ts-expect-error
+        pageIndex: 0,
+      },
+    },
+    useFilters, // useFilters!
+    useGlobalFilter,
+    usePagination
+  );
+
+  return (
+    <div className="overflow-x-auto md:-mx-6 lg:-mx-8">
+      <div className="py-2 align-middle inline-block min-w-full md:px-6 lg:px-8">
+        <div className="shadow overflow-hidden border-b border-gray-200 md:rounded-lg">
+          <table
+            {...getTableProps()}
+            className="min-w-full divide-y divide-gray-200"
+          >
+            <thead className="bg-gray-50">
+              {headerGroups.map((headerGroup: any) => (
+                <tr
+                  {...headerGroup.getHeaderGroupProps()}
+                  key={headerGroup.headers.map((header: any) => header.id)}
+                >
+                  {headerGroup.headers.map((column: any) =>
+                    column.hideHeader === false ? null : (
+                      <th
+                        {...column.getHeaderProps()}
+                        className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                      >
+                        {column.render("Header")}
+                        {/* Render the columns filter UI */}
+                        <div>
+                          {column.canFilter ? column.render("Filter") : null}
+                        </div>
+                      </th>
+                    )
+                  )}
+                </tr>
+              ))}
+            </thead>
+            <tbody {...getTableBodyProps()}>
+              {page.map((row: any, i: any) => {
+                prepareRow(row);
+                return (
+                  <tr {...row.getRowProps()} className="bg-white">
+                    {row.cells.map((cell: any) => (
+                      <td
+                        className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900"
+                        {...cell.getCellProps()}
+                      >
+                        {cell.render("Cell")}
+                      </td>
+                    ))}
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+
+          {data.length > 10 && (
+            <nav
+              className="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6"
+              aria-label="Pagination"
+            >
+              <div className="hidden sm:block">
+                <div className="flex flex-row flex-nowrap w-full space-x-2">
+                  <p className="block text-sm font-medium text-gray-700 mt-4">
+                    Show
+                  </p>
+                  <select
+                    id="location"
+                    name="location"
+                    className="block w-full pl-3 pr-10 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"
+                    value={pageSize}
+                    onChange={(e) => {
+                      setPageSize(Number(e.target.value));
+                    }}
+                  >
+                    {[10, 20, 30, 40, 50].map((pageSize) => (
+                      <option key={pageSize} value={pageSize}>
+                        {pageSize}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+              </div>
+              <div className="flex-1 flex justify-between sm:justify-end">
+                <button
+                  className="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
+                  type="button"
+                  onClick={() => previousPage()}
+                  disabled={!canPreviousPage}
+                >
+                  Previous
+                </button>
+                <button
+                  className="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
+                  type="button"
+                  onClick={() => nextPage()}
+                  disabled={!canNextPage}
+                >
+                  Next
+                </button>
+              </div>
+            </nav>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function Clients() {
+  const { data, status, refetch } = useQuery(
+    "fetchallTickets",
+    fetchALLTIckets
+  );
+
+  const router = useRouter();
+
+  const high = "bg-red-100 text-red-800";
+  const low = "bg-blue-100 text-blue-800";
+  const normal = "bg-green-100 text-green-800";
+
+  const columns = useMemo(
+    () => [
+      {
+        Header: "Type",
+        accessor: "type",
+        id: "type",
+        width: 50,
+      },
+      {
+        Header: "Summary",
+        accessor: "title",
+        id: "summary",
+        Cell: ({ row, value }: any) => {
+          return (
+            <>
+              <span className=" max-w-[240px] truncate">{value}</span>
+            </>
+          );
+        },
+      },
+      {
+        Header: "Assignee",
+        accessor: "assignedTo.name",
+        id: "assignee",
+        Cell: ({ row, value }: any) => {
+          return (
+            <>
+              <span className="w-[80px] truncate">{value ? value : "n/a"}</span>
+            </>
+          );
+        },
+      },
+      {
+        Header: "Client",
+        accessor: "client.name",
+        id: "client",
+        Cell: ({ row, value }: any) => {
+          return (
+            <>
+              <span className="w-[80px] truncate">{value ? value : "n/a"}</span>
+            </>
+          );
+        },
+      },
+      {
+        Header: "Priority",
+        accessor: "priority",
+        id: "priority",
+        Cell: ({ row, value }) => {
+          let p = value;
+          let badge;
+
+          if (p === "Low") {
+            badge = low;
+          }
+          if (p === "Normal") {
+            badge = normal;
+          }
+          if (p === "High") {
+            badge = high;
+          }
+
+          return (
+            <>
+              <span
+                className={`inline-flex items-center rounded-md justify-center w-1/2 px-2 py-1 text-xs font-medium ring-1 ring-inset ${badge}`}
+              >
+                {value}
+              </span>
+            </>
+          );
+        },
+      },
+      {
+        Header: "Status",
+        accessor: "status",
+        id: "status",
+        Cell: ({ row, value }) => {
+          let p = value;
+          let badge;
+
+          return (
+            <>
+              <span className="inline-flex items-center rounded-md bg-yellow-50 px-2 py-1 text-xs font-medium text-yellow-700 ring-1 ring-inset ring-red-600/10">
+                {value === "needs_support" && <span>Needs Support</span>}
+                {value === "in_progress" && <span>In Progress</span>}
+                {value === "in_review" && <span>In Review</span>}
+                {value === "done" && <span>Done</span>}
+              </span>
+            </>
+          );
+        },
+      },
+      {
+        Header: "Created",
+        accessor: "createdAt",
+        id: "created",
+        Cell: ({ row, value }) => {
+          const now = moment(value).format("DD/MM/YYYY");
+          return (
+            <>
+              <span className="">{now}</span>
+            </>
+          );
+        },
+      },
+    ],
+    []
+  );
+
+  return (
+    <main className="flex-1">
+      <div className="relative max-w-4xl mx-auto md:px-8 xl:px-0">
+        <div className="pt-10 pb-16 divide-y-2">
+          <div className="px-4 sm:px-6 md:px-0">
+            <h1 className="text-3xl font-extrabold text-gray-900">Tickets</h1>
+          </div>
+          <div className="px-4 sm:px-6 md:px-0">
+            <div className="sm:flex sm:items-center">
+              <div className="sm:flex-auto mt-4">
+                <p className="mt-2 text-sm text-gray-700">
+                  A list of all your organisation's tickets, regardless of
+                  status.
+                </p>
+              </div>
+            </div>
+            <div className="py-4">
+              {status === "loading" && (
+                <div className="min-h-screen flex flex-col justify-center items-center py-12 sm:px-6 lg:px-8">
+                  <h2> Loading data ... </h2>
+                </div>
+              )}
+
+              {status === "error" && (
+                <div className="min-h-screen flex flex-col justify-center items-center py-12 sm:px-6 lg:px-8">
+                  <h2 className="text-2xl font-bold">
+                    {" "}
+                    Error fetching data ...{" "}
+                  </h2>
+                </div>
+              )}
+              {status === "success" && (
+                <>
+                  {data.tickets && data.tickets.length > 0 && (
+                    <>
+                      <div className="hidden sm:block ">
+                        <Table columns={columns} data={data.tickets} />
+                      </div>
+
+                      <div className="sm:hidden">
+                        <TicketsMobileList tickets={data.tickets} />
+                      </div>
+                    </>
+                  )}
+
+                  {data.tickets.length === 0 && (
+                    <>
+                      <div className="text-center mt-72">
+                        <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          className="mx-auto h-12 w-12 text-gray-400"
+                          fill="none"
+                          viewBox="0 0 24 24"
+                          stroke="currentColor"
+                          stroke-width="2"
+                        >
+                          <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                          />
+                        </svg>
+
+                        <h3 className="mt-2 text-sm font-medium text-gray-900">
+                          You currently don't have any assigned tickets. :)
+                        </h3>
+                      </div>
+                    </>
+                  )}
+                </>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+}
diff --git a/apps/client/pages/admin/users/internal/new.js b/apps/client/pages/admin/users/internal/new.js
deleted file mode 100644
index 11b6379ba..000000000
--- a/apps/client/pages/admin/users/internal/new.js
+++ /dev/null
@@ -1,147 +0,0 @@
-import { notifications } from "@mantine/notifications";
-import { getCookie } from "cookies-next";
-import { useRouter } from "next/router";
-import React, { useState } from "react";
-
-export default function CreateUser() {
-  const [password, setPassword] = useState("");
-  const [email, setEmail] = useState("");
-  const [name, setName] = useState("");
-  const [admin, setAdmin] = useState(false);
-
-  const router = useRouter();
-
-  async function createUser() {
-    await fetch(
-      `${process.env.NEXT_PUBLIC_API_URL}/api/v1/auth/user/register`,
-      {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-          Authorization: "Bearer " + getCookie("session"),
-        },
-        body: JSON.stringify({
-          password,
-          email,
-          name,
-          admin,
-        }),
-      }
-    )
-      .then((res) => res.json())
-      .then((res) => {
-        if (res.success === true) {
-          router.push("/admin/users");
-          notifications.show({
-            title: "User created successfully",
-            message: "The action was processed correctly! 💚",
-          });
-        } else {
-          notifications.show({
-            title: "There has been an error ",
-            message: "Whoops! please wait and try again! 🤥",
-            color: "red",
-          });
-        }
-      });
-  }
-
-  const notificationMethods = [
-    { id: "user", title: "user" },
-    { id: "admin", title: "admin" },
-  ];
-
-  return (
-    <div>
-      <main className="flex-1">
-        <div className="relative max-w-4xl mx-auto md:px-8 xl:px-0">
-          <div className="pt-10 pb-16 divide-y-2">
-            <div className="px-4 sm:px-6 md:px-0">
-              <h1 className="text-3xl font-extrabold text-gray-900">
-                Add a new user
-              </h1>
-            </div>
-            <div className="px-4 sm:px-6 md:px-0">
-              <div className="py-4">
-                <div className="sm:flex sm:items-start">
-                  <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
-                    <div className="mt-2 space-y-4">
-                      <input
-                        type="text"
-                        className="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-1/2 sm:text-sm border-gray-300 rounded-md"
-                        placeholder="Enter first name here..."
-                        name="name"
-                        onChange={(e) => setName(e.target.value)}
-                      />
-
-                      <input
-                        type="text"
-                        className="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md"
-                        placeholder="Enter email here...."
-                        onChange={(e) => setEmail(e.target.value)}
-                      />
-
-                      <input
-                        type="password"
-                        className="shadow-sm mb-4 focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md"
-                        placeholder="Enter password here..."
-                        onChange={(e) => setPassword(e.target.value)}
-                      />
-
-                      <div className="mt-6">
-                        <label className="text-base font-medium text-gray-900 ">
-                          User Type
-                        </label>
-                        <div className="space-y-4 sm:flex sm:items-center sm:space-y-0 sm:space-x-10">
-                          {notificationMethods.map((notificationMethod) => (
-                            <div
-                              key={notificationMethod.id}
-                              className="flex items-center"
-                            >
-                              <input
-                                id={notificationMethod.id}
-                                name="notification-method"
-                                type="radio"
-                                defaultChecked={
-                                  notificationMethod.id === "user"
-                                }
-                                className="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300"
-                                value={notificationMethod.id}
-                                onChange={(e) =>
-                                  e.target.value === "admin"
-                                    ? setAdmin(true)
-                                    : setAdmin(false)
-                                }
-                              />
-                              <label
-                                htmlFor={notificationMethod.id}
-                                className="ml-3 block text-sm font-medium text-gray-700"
-                              >
-                                {notificationMethod.title}
-                              </label>
-                            </div>
-                          ))}
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
-                  <button
-                    type="button"
-                    className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-green-600 text-base font-medium text-white hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 sm:ml-3 sm:w-auto sm:text-sm"
-                    onClick={() => {
-                      createUser();
-                    }}
-                  >
-                    Save
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </main>
-    </div>
-  );
-}
diff --git a/apps/client/pages/admin/users/internal/new.tsx b/apps/client/pages/admin/users/internal/new.tsx
new file mode 100644
index 000000000..239af9ef1
--- /dev/null
+++ b/apps/client/pages/admin/users/internal/new.tsx
@@ -0,0 +1,175 @@
+import { Switch } from "@headlessui/react";
+import { notifications } from "@mantine/notifications";
+import { Flex } from "@radix-ui/themes";
+import { getCookie } from "cookies-next";
+import { useRouter } from "next/router";
+import { useState } from "react";
+import { useUser } from "../../../../store/session";
+
+export default function CreateUser() {
+  const [isLoading, setIsLoading] = useState(false);
+  const [auth, setAuth] = useState(undefined);
+
+  const [password, setPassword] = useState("");
+  const [email, setEmail] = useState("");
+  const [name, setName] = useState("");
+  const [admin, setAdmin] = useState(false);
+  const [language, setLanguage] = useState("en");
+
+  const { user } = useUser();
+
+  const router = useRouter();
+
+  async function createUser() {
+    await fetch(
+      `${process.env.NEXT_PUBLIC_API_URL}/api/v1/auth/user/register`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: "Bearer " + getCookie("session"),
+        },
+        body: JSON.stringify({
+          password,
+          email,
+          name,
+          admin,
+          language,
+        }),
+      }
+    )
+      .then((res) => res.json())
+      .then((res) => {
+        if (res.success === true) {
+          router.push("/admin/users/internal");
+          notifications.show({
+            title: "User created successfully",
+            message: "The action was processed correctly! 💚",
+          });
+        } else {
+          notifications.show({
+            title: "There has been an error ",
+            message: "Whoops! please wait and try again! 🤥",
+            color: "red",
+          });
+        }
+      });
+  }
+
+  async function checkAuth() {
+    await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/v1/auth/check`, {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: "Bearer " + getCookie("session"),
+      },
+    })
+      .then((res) => res.json())
+      .then((res) => {
+        if (res.success === true) {
+          setAuth(res.auth);
+          setIsLoading(false);
+        } else {
+        }
+      });
+  }
+
+  return (
+    <div>
+      <main className="flex-1">
+        <div className="relative max-w-4xl mx-auto md:px-8 xl:px-0">
+          <div className="pt-10 pb-6 divide-y-2">
+            <div className="px-4 sm:px-6 md:px-0">
+              <h1 className="text-3xl font-extrabold text-gray-900">
+                Add a new user
+              </h1>
+            </div>
+          </div>
+          <div className="bg-white p-6 rounded-md shadow-lg">
+            <Flex gap="4" direction="column" align="start">
+              <div className="w-1/2">
+                <label className="text-gray-900 font-bold">Name</label>
+                <input
+                  type="text"
+                  className="px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500 block w-full sm:text-sm"
+                  placeholder="John Doe"
+                  onChange={(e) => setName(e.target.value)}
+                />
+              </div>
+              <div className="w-1/2">
+                <label className="text-gray-900 font-bold">Email</label>
+                <input
+                  type="text"
+                  className="px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500 block w-full sm:text-sm"
+                  placeholder="John Doe"
+                  onChange={(e) => setEmail(e.target.value)}
+                />
+              </div>
+              {!user.sso_active && (
+                <div className="w-1/2">
+                  <label className="text-gray-900 font-bold">Password</label>
+                  <input
+                    type="text"
+                    className="px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500 block w-full sm:text-sm"
+                    placeholder=""
+                    onChange={(e) => setPassword(e.target.value)}
+                  />
+                </div>
+              )}
+              <div className="w-1/2 flex flex-col">
+                <label className="text-gray-900 font-bold">Language</label>
+                <select
+                  id="language"
+                  name="language"
+                  className="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"
+                  value={language}
+                  onChange={(e) => setLanguage(e.target.value)}
+                >
+                  <option value="en">English</option>
+                  <option value="de">German</option>
+                  <option value="se">Swedish</option>
+                  <option value="es">Spanish</option>
+                  <option value="no">Norwegian</option>
+                  <option value="fr">French</option>
+                  <option value="pt">Tagalong</option>
+                  <option value="da">Danish</option>
+                  <option value="pt">Portuguese</option>
+                </select>
+              </div>
+              <div>
+                <label className="text-gray-900 font-bold">Admin User</label>
+                <div className="flex flex-row space-x-2 items-center">
+                  <Switch
+                    checked={admin}
+                    onChange={setAdmin}
+                    className={`${
+                      admin ? "bg-blue-600" : "bg-gray-200"
+                    } relative inline-flex h-6 w-11 items-center rounded-full`}
+                  >
+                    <span className="sr-only">Enable notifications</span>
+                    <span
+                      className={`${
+                        admin ? "translate-x-6" : "translate-x-1"
+                      } inline-block h-4 w-4 transform rounded-full bg-white transition`}
+                    />
+                  </Switch>
+                </div>
+              </div>
+              <div
+                className="flex justify-end w-full "
+                onClick={() => createUser()}
+              >
+                <button
+                  type="button"
+                  className="rounded-md bg-green-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-green-500"
+                >
+                  Create User
+                </button>
+              </div>
+            </Flex>
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+}
diff --git a/apps/client/pages/auth/forgot-password.tsx b/apps/client/pages/auth/forgot-password.tsx
new file mode 100644
index 000000000..97675876d
--- /dev/null
+++ b/apps/client/pages/auth/forgot-password.tsx
@@ -0,0 +1,113 @@
+import { notifications } from "@mantine/notifications";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { useState } from "react";
+
+export default function Login({}) {
+  const router = useRouter();
+
+  const [email, setEmail] = useState("");
+  const [view, setView] = useState("request");
+
+  async function postData() {
+    await fetch(
+      `${process.env.NEXT_PUBLIC_API_URL}/api/v1/auth/password-reset`,
+      {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email, link: window.location.origin }),
+      }
+    )
+      .then((res) => res.json())
+      .then((res) => {
+        if (res.success) {
+          notifications.show({
+            title: "Success",
+            message: "A password reset email is on its way.",
+            color: "green",
+            autoClose: 5000,
+          });
+          router.push("/auth/login");
+        } else {
+          notifications.show({
+            title: "Error",
+            message:
+              "There was an error with this request, please try again. If this issue persists, please contact support via the discord.",
+            color: "red",
+            autoClose: 5000,
+          });
+        }
+      });
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50 flex flex-col justify-center py-12 sm:px-6 lg:px-8">
+      <div className="sm:mx-auto sm:w-full sm:max-w-md">
+        <a target="_blank" href="https://peppermint.sh/">
+          <img
+            className="mx-auto h-36 w-auto"
+            src="/login.svg"
+            alt="peppermint.sh logo"
+          />
+        </a>
+        <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">
+          Request Password Reset
+        </h2>
+      </div>
+
+      <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
+        <div className="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
+          <div className="space-y-4">
+            <div>
+              <label
+                htmlFor="email"
+                className="block text-sm font-medium text-gray-700"
+              >
+                Email address
+              </label>
+              <div className="mt-1">
+                <input
+                  id="email"
+                  name="email"
+                  type="email"
+                  autoComplete="email"
+                  required
+                  onChange={(e) => setEmail(e.target.value)}
+                  className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-green-500 focus:border-green-500 sm:text-sm"
+                />
+              </div>
+            </div>
+
+            <div className="flex items-center justify-between">
+              <div className="text-sm">
+                <Link
+                  href="/auth/login"
+                  className="font-medium text-indigo-600 hover:text-indigo-500"
+                >
+                  Remember your password?
+                </Link>
+              </div>
+            </div>
+
+            <div>
+              <button
+                type="submit"
+                onClick={postData}
+                className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500"
+              >
+                Submit Request
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <div className="mt-8 text-center flex flex-col space-y-2">
+          <span className="font-bold">Built with 💚 by Peppermint Labs</span>
+          <a href="https://docs.peppermint.sh/" target="_blank">
+            Documentation
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/client/pages/auth/login.tsx b/apps/client/pages/auth/login.tsx
index ea178f70a..eeebf6a77 100644
--- a/apps/client/pages/auth/login.tsx
+++ b/apps/client/pages/auth/login.tsx
@@ -1,8 +1,8 @@
+import { notifications } from "@mantine/notifications";
 import { setCookie } from "cookies-next";
+import Link from "next/link";
 import { useRouter } from "next/router";
-import { useState } from "react";
-
-import { useUser } from "../../store/session";
+import { useEffect, useState } from "react";
 
 export default function Login({}) {
   const router = useRouter();
@@ -10,30 +10,73 @@ export default function Login({}) {
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [status, setStatus] = useState("idle");
-
-  const { setUser } = useUser();
+  const [auth, setAuth] = useState("oauth");
 
   async function postData() {
-    await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/v1/auth/login`, {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ email, password }),
-    })
-      .then((res) => res.json())
-      .then((res) => {
-        console.log(res);
-        if (res.user) {
-          setCookie("session", res.token);
-          setUser(res.user);
-          if (res.user.firstLogin) {
-            router.push("/onboarding");
+    if (auth === "oauth") {
+      await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/v1/auth/sso/check`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email }),
+      })
+        .then((res) => res.json())
+        .then(async (res) => {
+          if (res.success && res.oauth) {
+            router.push(res.ouath_url);
           } else {
-            router.push("/");
+            if (!res.success) {
+              notifications.show({
+                title: "Error",
+                message:
+                  "There was an error logging in, please try again. If this issue persists, please contact support via the discord.",
+                color: "red",
+                autoClose: 5000,
+              });
+            } else {
+              setAuth("password");
+            }
           }
-        }
-      });
+        });
+    } else {
+      await fetch(`${process.env.NEXT_PUBLIC_API_URL}/api/v1/auth/login`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email, password }),
+      })
+        .then((res) => res.json())
+        .then(async (res) => {
+          if (res.user) {
+            setCookie("session", res.token);
+            if (res.user.firstLogin) {
+              router.push("/onboarding");
+            } else {
+              router.push("/");
+            }
+          } else {
+            notifications.show({
+              title: "Error",
+              message:
+                "There was an error logging in, please try again. If this issue persists, please contact support via the discord.",
+              color: "red",
+              autoClose: 5000,
+            });
+          }
+        });
+    }
   }
 
+  useEffect(() => {
+    if (router.query.error) {
+      notifications.show({
+        title: "Account Error - No Account Found",
+        color: "red",
+        message:
+          "It looks like you have tried to use SSO with an account that does not exist. Please try again or contact your admin to get you set up first.",
+        autoClose: false,
+      });
+    }
+  }, [router]);
+
   return (
     <div className="min-h-screen bg-gray-50 flex flex-col justify-center py-12 sm:px-6 lg:px-8">
       <div className="sm:mx-auto sm:w-full sm:max-w-md">
@@ -54,7 +97,7 @@ export default function Login({}) {
           <div className="text-center mr-4">{/* <Loader size={32} /> */}</div>
         ) : (
           <div className="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
-            <div className="space-y-6">
+            <div className="space-y-4">
               <div>
                 <label
                   htmlFor="email"
@@ -75,51 +118,38 @@ export default function Login({}) {
                 </div>
               </div>
 
-              <div>
-                <label
-                  htmlFor="password"
-                  className="block text-sm font-medium text-gray-700"
-                >
-                  Password
-                </label>
-                <div className="mt-1">
-                  <input
-                    id="password"
-                    name="password"
-                    type="password"
-                    autoComplete="password"
-                    required
-                    onChange={(e) => setPassword(e.target.value)}
-                    className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-green-500 focus:border-green-500 sm:text-sm"
-                  />
-                </div>
-              </div>
-
-              {/* <div className="flex items-center justify-between">
-                <div className="flex items-center">
-                  <input
-                    id="remember-me"
-                    name="remember-me"
-                    type="checkbox"
-                    className="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"
-                  />
+              {auth !== "oauth" && (
+                <div>
                   <label
-                    htmlFor="remember-me"
-                    className="ml-2 block text-sm text-gray-900"
+                    htmlFor="password"
+                    className="block text-sm font-medium text-gray-700"
                   >
-                    Remember me
+                    Password
                   </label>
-                </div> 
+                  <div className="mt-1">
+                    <input
+                      id="password"
+                      name="password"
+                      type="password"
+                      autoComplete="password"
+                      required
+                      onChange={(e) => setPassword(e.target.value)}
+                      className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-green-500 focus:border-green-500 sm:text-sm"
+                    />
+                  </div>
+                </div>
+              )}
 
-                 <div className="text-sm">
-                  <a
-                    href="#"
+              <div className="flex items-center justify-between">
+                <div className="text-sm">
+                  <Link
+                    href="/auth/forgot-password"
                     className="font-medium text-indigo-600 hover:text-indigo-500"
                   >
                     Forgot your password?
-                  </a>
+                  </Link>
                 </div>
-              </div> */}
+              </div>
 
               <div>
                 <button
@@ -179,8 +209,11 @@ export default function Login({}) {
           </div>
         )}
 
-        <div className="mt-8 text-center">
+        <div className="mt-8 text-center flex flex-col space-y-2">
           <span className="font-bold">Built with 💚 by Peppermint Labs</span>
+          <a href="https://docs.peppermint.sh/" target="_blank">
+            Documentation
+          </a>
         </div>
       </div>
     </div>
diff --git a/apps/client/pages/auth/oauth.tsx b/apps/client/pages/auth/oauth.tsx
new file mode 100644
index 000000000..5eccbd05d
--- /dev/null
+++ b/apps/client/pages/auth/oauth.tsx
@@ -0,0 +1,65 @@
+import { setCookie } from "cookies-next";
+import { useRouter } from "next/router";
+import { useEffect } from "react";
+
+export async function getServerSideProps({ query }: any) {
+  //   console.log(query);
+
+  if (process.env.API_URL.includes("localhost")) {
+    const sso = await fetch(
+      `http://127.0.0.1:5003/api/v1/auth/sso/login/callback?code=${query.code}&state=${query.state}`
+    ).then((res) => res.json());
+
+    if (!sso.success) {
+      return {
+        redirect: {
+          destination: "/auth/login?error=account_not_found",
+          permanent: false,
+        },
+      };
+    } else {
+      return {
+        props: {
+          token: sso.token,
+          permanent: true,
+        },
+      };
+    }
+  } else {
+    const sso = await fetch(
+      `${process.env.API_UR}/api/v1/auth/sso/login/check?code=${query.code}&state=${query.state}`
+    ).then((res) => res.json());
+    console.log(sso);
+
+    if (!sso.success) {
+      return {
+        redirect: {
+          destination: "/auth/login?error=account_not_found",
+          permanent: false,
+        },
+      };
+    } else {
+      return {
+        props: {
+          token: sso.token,
+          permanent: true,
+        },
+      };
+    }
+  }
+}
+
+export default function Login({ token }) {
+  const router = useRouter();
+
+  function setandRedirect() {
+    setCookie("session", token, { maxAge: 60 * 6 * 24 });
+    router.push("/onboarding");
+  }
+
+  useEffect(() => {
+    setandRedirect();
+  }, []);
+
+  return <div></div>;
+}
diff --git a/apps/client/pages/auth/reset-password.tsx b/apps/client/pages/auth/reset-password.tsx
new file mode 100644
index 000000000..d8ca90e2a
--- /dev/null
+++ b/apps/client/pages/auth/reset-password.tsx
@@ -0,0 +1,171 @@
+import { notifications } from "@mantine/notifications";
+import { useRouter } from "next/router";
+import { useState } from "react";
+
+export default function Login({}) {
+  const router = useRouter();
+
+  const [code, setCode] = useState("");
+  const [password, setPassword] = useState("");
+  const [view, setView] = useState("code");
+
+  async function sendCode() {
+    await fetch(
+      `${process.env.NEXT_PUBLIC_API_URL}/api/v1/auth/password-reset/code`,
+      {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ code, uuid: router.query.token }),
+      }
+    )
+      .then((res) => res.json())
+      .then((res) => {
+        if (res.success) {
+          notifications.show({
+            title: "Success",
+            message: "A password reset email is on its way.",
+            color: "green",
+            autoClose: 5000,
+          });
+          setView("password");
+        } else {
+          notifications.show({
+            title: "Error",
+            message:
+              "There was an error with this request, please try again. If this issue persists, please contact support via the discord.",
+            color: "red",
+            autoClose: 5000,
+          });
+        }
+      });
+  }
+
+  async function updatPassword() {
+    if (password.length < 1) {
+      notifications.show({
+        title: "Error",
+        message: "Password cannot be empty.",
+        color: "red",
+        autoClose: 5000,
+      });
+    } else {
+      await fetch(
+        `${process.env.NEXT_PUBLIC_API_URL}/api/v1/auth/password-reset/password`,
+        {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ code, password }),
+        }
+      )
+        .then((res) => res.json())
+        .then((res) => {
+          if (res.success) {
+            notifications.show({
+              title: "Success",
+              message: "Password updated successfully.",
+              color: "green",
+              autoClose: 5000,
+            });
+            router.push("/auth/login");
+          } else {
+            notifications.show({
+              title: "Error",
+              message:
+                "There was an error with this request, please try again. If this issue persists, please contact support via the discord.",
+              color: "red",
+              autoClose: 5000,
+            });
+          }
+        });
+    }
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50 flex flex-col justify-center py-12 sm:px-6 lg:px-8">
+      <div className="sm:mx-auto sm:w-full sm:max-w-md">
+        <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">
+          Reset Password
+        </h2>
+      </div>
+
+      <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
+        <div className="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
+          <div className="space-y-4">
+            {view === "code" ? (
+              <>
+                <div>
+                  <label
+                    htmlFor="text"
+                    className="block text-sm font-medium text-gray-700"
+                  >
+                    Code
+                  </label>
+                  <div className="mt-1">
+                    <input
+                      id="text"
+                      name="text"
+                      type="text"
+                      autoComplete="off"
+                      required
+                      onChange={(e) => setCode(e.target.value)}
+                      className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-green-500 focus:border-green-500 sm:text-sm"
+                    />
+                  </div>
+                </div>
+
+                <div>
+                  <button
+                    type="submit"
+                    onClick={sendCode}
+                    className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500"
+                  >
+                    Check Code
+                  </button>
+                </div>
+              </>
+            ) : (
+              <>
+                <div>
+                  <label
+                    htmlFor="text"
+                    className="block text-sm font-medium text-gray-700"
+                  >
+                    New Password
+                  </label>
+                  <div className="mt-1">
+                    <input
+                      id="text"
+                      name="text"
+                      type="password"
+                      autoComplete="off"
+                      required
+                      onChange={(e) => setPassword(e.target.value)}
+                      className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-green-500 focus:border-green-500 sm:text-sm"
+                    />
+                  </div>
+                </div>
+
+                <div>
+                  <button
+                    type="submit"
+                    onClick={updatPassword}
+                    className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500"
+                  >
+                    Change Password
+                  </button>
+                </div>
+              </>
+            )}
+          </div>
+        </div>
+
+        <div className="mt-8 text-center flex flex-col space-y-2">
+          <span className="font-bold">Built with 💚 by Peppermint Labs</span>
+          <a href="https://docs.peppermint.sh/" target="_blank">
+            Documentation
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/client/pages/onboarding.tsx b/apps/client/pages/onboarding.tsx
index 9ea7b1d5e..b06cc37cf 100644
--- a/apps/client/pages/onboarding.tsx
+++ b/apps/client/pages/onboarding.tsx
@@ -16,8 +16,8 @@ export default function Home() {
   return (
     <div className="bg-gray-200">
       <div className="flex justify-center align-center h-screen items-center">
-        <div className="bg-white shadow-xl rounded-lg p-8">
-          <div className="flex justify-between items-center min-w-[700px]">
+        <div className="bg-white shadow-xl rounded-lg lg:p-8 p-4 mx-4">
+          <div className="flex justify-between items-center">
             <div className="flex flex-col">
               <h1 className="text-2xl font-bold">Peppermint </h1>
               <p className="text-gray-600">
@@ -28,11 +28,11 @@ export default function Home() {
           </div>
           <div className="mt-4 ">
             <div className="flex flex-col space-y-4">
-              <div className="border p-2 rounded-md border-dashed flex flex-row space-x-4 items-center">
+              <div className="border p-2 md:p-6 rounded-md border-dashed flex flex-col md:flex-row space-x-4 items-center">
                 <img src="/github.svg" className="h-10 w-10" />
-                <div className="flex flex-col align-center w-[36em]">
+                <div className="flex flex-col align-center lg:w-[36em]">
                   <span className="font-bold text-lg">Github</span>
-                  <span className="max-w-lg">
+                  <span className="max-w-md lg:max-w-lg text-xs md:text-md">
                     Being an open source project, all of our source code can be
                     housed here. If you ever face a bug or are unsure about
                     something.
@@ -41,61 +41,46 @@ export default function Home() {
                 <Link
                   target="_blank"
                   href="https://github.com/Peppermint-Lab/peppermint"
-                  className="rounded-md bg-gray-600 px-2.5  hover:text-white py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-gray-500 "
+                  className="rounded-md mt-4 sm:mt-0 bg-gray-600 px-2.5 whitespace-nowrap hover:text-white py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-gray-500 "
                 >
                   Check it out
                 </Link>
               </div>
-              <div className="border p-2 rounded-md border-dashed flex flex-row space-x-4 items-center">
+              <div className="border p-2 md:p-6 rounded-md border-dashed w-full flex flex-col md:flex-row space-x-4 items-center">
                 <img src="/logo.svg" className="h-10 w-10" />
-                <div className="flex flex-col align-center w-[36em]">
+                <div className="flex flex-col align-center lg:w-[36em]">
                   <span className="font-bold text-lg">Docs</span>
-                  <span className="max-w-lg">
-                    Documentation for Peppermint can be found here.
+                  <span className="max-w-lg text-xs md:text-md">
+                    Documentation for Peppermint can be found here. If you find
+                    something that isnt documented, feel free to open a PR or an
+                    Issue. We'll get straight on it.
                   </span>
                 </div>
                 <Link
                   target="_blank"
                   href="https://github.com/Peppermint-Lab/peppermint"
-                  className="rounded-md bg-green-600 px-2.5 py-1.5 text-sm font-semibold hover:text-white text-white shadow-sm hover:bg-green-500 "
+                  className="rounded-md flex-end bg-green-600 mt-4 whitespace-nowrap sm:mt-0 px-2.5 py-1.5 text-sm font-semibold hover:text-white text-white shadow-sm hover:bg-green-500 "
                 >
                   Check it out
                 </Link>
               </div>
-              <div className="border p-2 rounded-md border-dashed flex flex-row space-x-4 items-center ">
+              <div className="border p-2 md:p-6 rounded-md border-dashed flex flex-col md:flex-row space-x-4 items-center ">
                 <img src="/discord.svg" className="h-10 w-10" />
-                <div className="flex flex-col align-center w-[36em]">
+                <div className="flex flex-col align-center lg:w-[36em]">
                   <span className="font-bold text-lg">Discord</span>
-                  <span className="max-w-lg">
+                  <span className="max-w-lg text-xs md:text-md">
                     Join our discord server to get help from the community or
-                    the developers.
+                    the developers. Not a bad place to hang out either.
                   </span>
                 </div>
                 <Link
                   target="_blank"
                   href="https://discord.gg/zbTy8nuHnK"
-                  className="rounded-md bg-blue-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 "
+                  className="rounded-md bg-blue-600 mt-4 whitespace-nowrap sm:mt-0 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 "
                 >
                   Check it out
                 </Link>
               </div>
-              {/* <div className="border p-2 rounded-md border-dashed flex flex-row space-x-4 items-center">
-                <img src="/github.svg" className="h-10 w-10" />
-                <div className="flex flex-col align-center w-[36em]">
-                  <span className="font-bold text-lg">Roadmap</span>
-                  <span className="max-w-lg">
-                    Being an open source project, all of our source code can be
-                    housed here. If you ever face a bug or are unsure about
-                    something.
-                  </span>
-                </div>
-                <Link
-                  href="https://github.com/Peppermint-Lab/peppermint"
-                  className="rounded-md bg-gray-600 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-gray-500 "
-                >
-                  Check it out
-                </Link>
-              </div> */}
             </div>
           </div>
           <div className="float-right mt-4">
diff --git a/apps/client/pages/settings/notifications.tsx b/apps/client/pages/settings/notifications.tsx
index ff77c3906..70835ae7b 100644
--- a/apps/client/pages/settings/notifications.tsx
+++ b/apps/client/pages/settings/notifications.tsx
@@ -16,21 +16,22 @@ export default function UserNotifications() {
     user.ticket_status_changed
   );
   const [ticket_assigned, setTicket_assigned] = useState(user.ticket_assigned);
-  const [loading, setLoading] = useState();
+  const [ticket_comments, setTicket_comments] = useState(user.ticket_comments);
 
   async function updateNotifications() {
     await fetch(
-      `${process.env.NEXT_PUBLIC_API_URL}/api/v1/auth/profile/config`,
+      `${process.env.NEXT_PUBLIC_API_URL}/api/v1/auth/profile/notifcations/emails`,
       {
-        method: "POST",
+        method: "PUT",
         headers: {
           "Content-Type": "application/json",
           Authorization: "Bearer " + token,
         },
         body: JSON.stringify({
-          ticket_creation,
-          ticket_assigned,
-          ticket_status,
+          notify_ticket_created: ticket_creation,
+          notify_ticket_assigned: ticket_assigned,
+          notify_ticket_status_changed: ticket_status,
+          notify_ticket_comments: ticket_comments,
         }),
       }
     );
@@ -102,7 +103,7 @@ export default function UserNotifications() {
                   </span>
                   <Switch
                     checked={ticket_status}
-                    onChange={() => setTicket_status}
+                    onChange={setTicket_status}
                     className={classNames(
                       ticket_status ? "bg-teal-600" : "bg-gray-200",
                       "relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
@@ -154,9 +155,46 @@ export default function UserNotifications() {
                     />
                   </Switch>
                 </Switch.Group>
+
+                <Switch.Group
+                  as="div"
+                  className="flex items-center justify-between"
+                >
+                  <span className="flex-grow flex flex-col">
+                    <Switch.Label
+                      as="span"
+                      className="text-sm font-medium text-gray-900"
+                      passive
+                    >
+                      Ticket Comment
+                    </Switch.Label>
+                    <Switch.Description
+                      as="span"
+                      className="text-sm text-gray-500"
+                    >
+                      Get emailed when a comment is added to your ticket
+                    </Switch.Description>
+                  </span>
+                  <Switch
+                    checked={ticket_comments}
+                    onChange={setTicket_comments}
+                    className={classNames(
+                      ticket_comments ? "bg-teal-600" : "bg-gray-200",
+                      "relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+                    )}
+                  >
+                    <span
+                      aria-hidden="true"
+                      className={classNames(
+                        ticket_comments ? "translate-x-5" : "translate-x-0",
+                        "pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200"
+                      )}
+                    />
+                  </Switch>
+                </Switch.Group>
               </div>
 
-              <div className="m-4 float-right">
+              <div className="my-4 float-right">
                 <button
                   onClick={() => updateNotifications()}
                   type="button"
diff --git a/apps/client/pages/tickets/[id].tsx b/apps/client/pages/tickets/[id].tsx
index 4cbefce02..55682129d 100644
--- a/apps/client/pages/tickets/[id].tsx
+++ b/apps/client/pages/tickets/[id].tsx
@@ -1,4 +1,4 @@
-import { Listbox, Transition } from "@headlessui/react";
+import { Listbox, Switch, Transition } from "@headlessui/react";
 import {
   CalendarIcon,
   ChatBubbleLeftEllipsisIcon,
@@ -19,6 +19,8 @@ import { Fragment, useEffect, useState } from "react";
 import { useQuery } from "react-query";
 import renderHTML from "react-render-html";
 // import TextAlign from '@tiptap/extension-text-align';
+import { notifications } from "@mantine/notifications";
+import { Text, Tooltip } from "@radix-ui/themes";
 import SubScript from "@tiptap/extension-subscript";
 import Superscript from "@tiptap/extension-superscript";
 import { getCookie } from "cookies-next";
@@ -72,6 +74,8 @@ export default function Ticket() {
   const [ticketStatus, setTicketStatus] = useState<any>();
   const [comment, setComment] = useState<any>();
   const [timeSpent, setTimeSpent] = useState<any>();
+  const [publicComment, setPublicComment] = useState<any>(false);
+  const [timeReason, setTimeReason] = useState("");
 
   const IssueEditor = useEditor({
     extensions: [
@@ -163,6 +167,7 @@ export default function Ticket() {
       body: JSON.stringify({
         text: comment,
         id,
+        public: publicComment,
       }),
     })
       .then((res) => res.json())
@@ -178,14 +183,22 @@ export default function Ticket() {
       },
       body: JSON.stringify({
         time: timeSpent,
-        id: data.ticket.id,
-        title: data.ticket.title,
+        ticket: id,
+        title: timeReason,
+        user: user.id,
       }),
     })
       .then((res) => res.json())
-      .then(() => {
-        setTimeEdit(false);
-        refetch();
+      .then((res) => {
+        if (res.success) {
+          setTimeEdit(false);
+          refetch();
+          notifications.show({
+            title: "Time Added",
+            message: "Time has been added to the ticket",
+            color: "blue",
+          });
+        }
       });
   }
 
@@ -242,6 +255,7 @@ export default function Ticket() {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`,
         },
         body: JSON.stringify({
           user: n.id,
@@ -432,7 +446,7 @@ export default function Ticket() {
                             </div>
                             {!assignedEdit ? (
                               <ul role="list" className="mt-3 space-y-3">
-                                <li className="flex justify-start">
+                                <li className="flex justify-start items-center space-x-4">
                                   <div className="flex-shrink-0">
                                     <span className="inline-flex h-6 w-6 items-center justify-center rounded-full bg-gray-500">
                                       <span className="text-xs font-medium leading-none text-white uppercase">
@@ -459,12 +473,6 @@ export default function Ticket() {
                                           <span className="block truncate">
                                             {n ? n.name : t("select_new_user")}
                                           </span>
-                                          <span className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
-                                            {/* <SelectorIcon
-                                    className="h-5 w-5 text-gray-400"
-                                    aria-hidden="true"
-                                  /> */}
-                                          </span>
                                         </Listbox.Button>
 
                                         <Transition
@@ -723,15 +731,22 @@ export default function Ticket() {
                                                   {item.user.name}
                                                 </span>
                                               </div>
-                                              <p className="text-xs text-gray-500">
-                                                {item.public
-                                                  ? "Publicly"
-                                                  : "Internally"}
-                                                {t("commented_at")}
-                                                {moment(item.createdAt).format(
-                                                  "hh:mm DD-MM-YYYY"
-                                                )}
-                                              </p>
+                                              <div className=" flex flex-row space-x-1">
+                                                <span className="text-xs text-gray-500">
+                                                  {item.public
+                                                    ? "Publicly"
+                                                    : "Internally"}
+                                                </span>
+                                                <span className="text-xs text-gray-500">
+                                                  commented at
+                                                </span>
+
+                                                <span className="text-xs text-gray-500">
+                                                  {moment(
+                                                    item.createdAt
+                                                  ).format("DD/MM/YYYY hh:mm")}
+                                                </span>
+                                              </div>
                                             </div>
                                             <div className="text-sm  text-gray-900">
                                               <span>{item.text}</span>
@@ -777,7 +792,36 @@ export default function Ticket() {
                                       }
                                     />
                                   </div>
-                                  <div className="mt-6 flex items-center justify-end space-x-4">
+                                  <div className="mt-4 flex justify-end">
+                                    <Text as="label" size="2">
+                                      <div className="flex flex-row items-center space-x-2">
+                                        <Switch
+                                          checked={publicComment}
+                                          onChange={setPublicComment}
+                                          className={`${
+                                            publicComment
+                                              ? "bg-blue-600"
+                                              : "bg-gray-200"
+                                          } relative inline-flex h-6 w-11 items-center rounded-full`}
+                                        >
+                                          <span className="sr-only">
+                                            Enable notifications
+                                          </span>
+                                          <span
+                                            className={`${
+                                              publicComment
+                                                ? "translate-x-6"
+                                                : "translate-x-1"
+                                            } inline-block h-4 w-4 transform rounded-full bg-white transition`}
+                                          />
+                                        </Switch>
+                                        <Tooltip content="Enabling this will mean the email registered to the ticket will get a reply based on your comment.">
+                                          <Text> Public Reply</Text>
+                                        </Tooltip>
+                                      </div>
+                                    </Text>
+                                  </div>
+                                  <div className="mt-4 flex items-center justify-end space-x-4">
                                     {data.ticket.isComplete ? (
                                       <button
                                         type="button"
@@ -892,7 +936,7 @@ export default function Ticket() {
                       </div>
                       {!assignedEdit ? (
                         <ul role="list" className="mt-3 space-y-3">
-                          <li className="flex justify-start">
+                          <li className="flex justify-star items-center space-x-2">
                             <div className="flex-shrink-0">
                               <span className="inline-flex h-6 w-6 items-center justify-center rounded-full bg-gray-500">
                                 <span className="text-xs font-medium leading-none text-white uppercase">
@@ -1453,7 +1497,7 @@ export default function Ticket() {
                         </>
                       )}
                     </div>
-                    {/* <div className="border-t border-gray-200">
+                    <div className="border-t border-gray-200">
                       <div className="flex flex-row items-center justify-between mt-2">
                         <span className="text-sm font-medium text-gray-500 ">
                           Time Tracking
@@ -1493,20 +1537,29 @@ export default function Ticket() {
                       )}
                       {editTime && (
                         <div>
-                          <div className="mt-2">
+                          <div className="mt-2 flex flex-col space-y-2">
+                            <input
+                              type="text"
+                              name="text"
+                              id="timespent_text"
+                              className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                              placeholder="What did you do?"
+                              value={timeReason}
+                              onChange={(e) => setTimeReason(e.target.value)}
+                            />
                             <input
                               type="number"
                               name="number"
                               id="timespent"
                               className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
-                              placeholder="30"
+                              placeholder="Time in minutes"
                               value={timeSpent}
                               onChange={(e) => setTimeSpent(e.target.value)}
                             />
                           </div>
                         </div>
                       )}
-                    </div> */}
+                    </div>
                   </div>
                 </aside>
               </div>
diff --git a/apps/client/pages/tickets/index.tsx b/apps/client/pages/tickets/index.tsx
index 05ad4d3c7..078872ed0 100644
--- a/apps/client/pages/tickets/index.tsx
+++ b/apps/client/pages/tickets/index.tsx
@@ -4,10 +4,12 @@ import { useRouter } from "next/router";
 import { useState } from "react";
 import Loader from "react-spinners/ClipLoader";
 
+import TicketsAdminLayout from "../../components/TicketViews/admin";
 import AssignedTickets from "../../components/TicketViews/assigned";
 import ClosedTickets from "../../components/TicketViews/closed";
 import OpenTickets from "../../components/TicketViews/open";
 import UnassignedTickets from "../../components/TicketViews/unassiged";
+import { useUser } from "../../store/session";
 
 function classNames(...classes: any) {
   return classes.filter(Boolean).join(" ");
@@ -19,6 +21,8 @@ export default function Tickets() {
 
   const [loading, setLoading] = useState(false);
 
+  const user = useUser();
+
   const tabs = [
     {
       name: t("open"),
@@ -68,7 +72,10 @@ export default function Tickets() {
                 defaultValue={tabs[0].name}
               >
                 {tabs.map((tab) => (
-                  <option key={tab.name}>{tab.name}</option>
+                  <>
+                    <option key={tab.name}>{tab.name}</option>
+                    {user.isAdmin && <option key="admin">ADMIN</option>}
+                  </>
                 ))}
               </select>
             </div>
@@ -76,19 +83,20 @@ export default function Tickets() {
               <div className="">
                 <nav className="-mb-px flex space-x-8" aria-label="Tabs">
                   {tabs.map((tab) => (
-                    <Link
-                      key={tab.name}
-                      href={tab.href}
-                      className={classNames(
-                        tab.current
-                          ? "border-indigo-500 text-indigo-600"
-                          : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-200",
-                        "whitespace-nowrap flex py-2 px-1 border-b-2 font-medium text-sm"
-                      )}
-                      aria-current={tab.current ? "page" : undefined}
-                    >
-                      {tab.name}
-                      {/* {tab.count ? (
+                    <>
+                      <Link
+                        key={tab.name}
+                        href={tab.href}
+                        className={classNames(
+                          tab.current
+                            ? "border-indigo-500 text-indigo-600"
+                            : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-200",
+                          "whitespace-nowrap flex py-2 px-1 border-b-2 font-medium text-sm"
+                        )}
+                        aria-current={tab.current ? "page" : undefined}
+                      >
+                        {tab.name}
+                        {/* {tab.count ? (
                         <span
                           className={classNames(
                             tab.current
@@ -100,8 +108,21 @@ export default function Tickets() {
                           {tab.count}
                         </span>
                       ) : null} */}
-                    </Link>
+                      </Link>
+                    </>
                   ))}
+                  <Link
+                    key="admin"
+                    href="?filter=admin"
+                    className={classNames(
+                      router.asPath === "/tickets?filter=admin"
+                        ? "border-indigo-500 text-indigo-600"
+                        : "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-200",
+                      "whitespace-nowrap flex py-2 px-1 border-b-2 font-medium text-sm"
+                    )}
+                  >
+                    admin
+                  </Link>
                 </nav>
               </div>
             </div>
@@ -115,6 +136,9 @@ export default function Tickets() {
                 <UnassignedTickets />
               )}
               {router.asPath === "/tickets?filter=closed" && <ClosedTickets />}
+              {router.asPath === "/tickets?filter=admin" && (
+                <TicketsAdminLayout />
+              )}
             </div>
           </div>
         </>
diff --git a/docker-compose.dev.yml b/docker-compose.dev.yml
index 4f57987d7..8ce7f8086 100644
--- a/docker-compose.dev.yml
+++ b/docker-compose.dev.yml
@@ -24,7 +24,7 @@ services:
     depends_on:
       - peppermint_postgres
     healthcheck:
-      test: ["CMD", "sh", "-c", "wget --spider $$BASE_URL"]
+      test: ["CMD", "sh", "-c", "wget --spider $$API_URL"]
       interval: 30s
       timeout: 10s
       retries: 3
diff --git a/docker-compose.local.yml b/docker-compose.local.yml
index f1c342be9..6a4c74daf 100644
--- a/docker-compose.local.yml
+++ b/docker-compose.local.yml
@@ -24,7 +24,7 @@ services:
     depends_on:
       - peppermint_postgres
     healthcheck:
-      test: ["CMD", "sh", "-c", "wget --spider $$BASE_URL"]
+      test: ["CMD", "sh", "-c", "wget --spider $$API_URL"]
       interval: 30s
       timeout: 10s
       retries: 3
diff --git a/docker-compose.yml b/docker-compose.yml
index ca9fe0276..a2f5d279e 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -24,7 +24,7 @@ services:
     depends_on:
       - peppermint_postgres
     healthcheck:
-      test: ["CMD", "sh", "-c", "wget --spider $$BASE_URL"]
+      test: ["CMD", "sh", "-c", "wget --spider $$API_URL"]
       interval: 30s
       timeout: 10s
       retries: 3
diff --git a/yarn.lock b/yarn.lock
index 5cecd5d9e..c1efde9bb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -378,7 +378,7 @@
   dependencies:
     "@floating-ui/utils" "^0.1.3"
 
-"@floating-ui/dom@^1.2.1":
+"@floating-ui/dom@^1.2.1", "@floating-ui/dom@^1.5.1":
   version "1.5.3"
   resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.5.3.tgz#54e50efcb432c06c23cd33de2b575102005436fa"
   integrity sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==
@@ -393,6 +393,13 @@
   dependencies:
     "@floating-ui/dom" "^1.2.1"
 
+"@floating-ui/react-dom@^2.0.0":
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.0.4.tgz#b076fafbdfeb881e1d86ae748b7ff95150e9f3ec"
+  integrity sha512-CF8k2rgKeh/49UrnIBs4BdxPUV6vize/Db1d/YbCLyp9GiVZ0BEwf5AiDSxJRCr6yOkGqTFHtmrULxkEfYZ7dQ==
+  dependencies:
+    "@floating-ui/dom" "^1.5.1"
+
 "@floating-ui/react@^0.19.1":
   version "0.19.2"
   resolved "https://registry.yarnpkg.com/@floating-ui/react/-/react-0.19.2.tgz#c6e4d2097ed0dca665a7c042ddf9cdecc95e9412"
@@ -866,6 +873,11 @@
   resolved "https://registry.yarnpkg.com/@prisma/engines/-/engines-5.6.0.tgz#82c445aa10633bbc0388aa2d6e411a0bd94c9439"
   integrity sha512-Mt2q+GNJpU2vFn6kif24oRSBQv1KOkYaterQsi0k2/lA+dLvhRX6Lm26gon6PYHwUM8/h8KRgXIUMU0PCLB6bw==
 
+"@radix-ui/colors@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/colors/-/colors-3.0.0.tgz#e8a591a303c44e503bd1212cacf40a09511165e0"
+  integrity sha512-FUOsGBkHrYJwCSEtWRCIfQbZG7q1e6DgxCIOe1SUQzDe/7rXXeA47s8yCn6fuTNQAj1Zq4oTFi9Yjp3wzElcxg==
+
 "@radix-ui/number@1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/number/-/number-1.0.0.tgz#4c536161d0de750b3f5d55860fc3de46264f897b"
@@ -873,6 +885,13 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/number@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/number/-/number-1.0.1.tgz#644161a3557f46ed38a042acf4a770e826021674"
+  integrity sha512-T5gIdVO2mmPW3NNhjNgEP3cqMXjXL9UbO0BzWcXfvdBs+BohbQxvd/K5hSVKmn9/lbTdsQVKbUcP5WLCwvUbBg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
 "@radix-ui/primitive@1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/primitive/-/primitive-1.0.0.tgz#e1d8ef30b10ea10e69c76e896f608d9276352253"
@@ -880,6 +899,87 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/primitive@1.0.1", "@radix-ui/primitive@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/primitive/-/primitive-1.0.1.tgz#e46f9958b35d10e9f6dc71c497305c22e3e55dbd"
+  integrity sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/react-accessible-icon@^1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-accessible-icon/-/react-accessible-icon-1.0.3.tgz#53c4b5f4afbea51bbf009432c1dc01806f337254"
+  integrity sha512-duVGKeWPSUILr/MdlPxV+GeULTc2rS1aihGdQ3N2qCUPMgxYLxvAsHJM3mCVLF8d5eK+ympmB22mb1F3a5biNw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-visually-hidden" "1.0.3"
+
+"@radix-ui/react-alert-dialog@^1.0.5":
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-alert-dialog/-/react-alert-dialog-1.0.5.tgz#70dd529cbf1e4bff386814d3776901fcaa131b8c"
+  integrity sha512-OrVIOcZL0tl6xibeuGt5/+UxoT2N27KCFOPjFyfXMnchxSHZ/OW7cCX2nGlIYJrbHK/fczPcFzAwvNBB6XBNMA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.1"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-dialog" "1.0.5"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-slot" "1.0.2"
+
+"@radix-ui/react-arrow@1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-arrow/-/react-arrow-1.0.3.tgz#c24f7968996ed934d57fe6cde5d6ec7266e1d25d"
+  integrity sha512-wSP+pHsB/jQRaL6voubsQ/ZlrGBHHrOjmBnr19hxYgtS0WvAFwZhK2WP/YY5yF9uKECCEEDGxuLxq1NBK51wFA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-primitive" "1.0.3"
+
+"@radix-ui/react-aspect-ratio@^1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-aspect-ratio/-/react-aspect-ratio-1.0.3.tgz#d1a15d6953203e6fd7f5b569fae77c88c1880125"
+  integrity sha512-fXR5kbMan9oQqMuacfzlGG/SQMcmMlZ4wrvpckv8SgUulD0MMpspxJrxg/Gp/ISV3JfV1AeSWTYK9GvxA4ySwA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-primitive" "1.0.3"
+
+"@radix-ui/react-avatar@^1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-avatar/-/react-avatar-1.0.4.tgz#de9a5349d9e3de7bbe990334c4d2011acbbb9623"
+  integrity sha512-kVK2K7ZD3wwj3qhle0ElXhOjbezIgyl2hVvgwfIdexL3rN6zJmy5AqqIf+D31lxVppdzV8CjAfZ6PklkmInZLw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-use-callback-ref" "1.0.1"
+    "@radix-ui/react-use-layout-effect" "1.0.1"
+
+"@radix-ui/react-checkbox@^1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-checkbox/-/react-checkbox-1.0.4.tgz#98f22c38d5010dd6df4c5744cac74087e3275f4b"
+  integrity sha512-CBuGQa52aAYnADZVt/KBQzXrwx6TqnlwtcIPGtVt5JkkzQwMOLJjPukimhfKEr4GQNd43C+djUh5Ikopj8pSLg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.1"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-presence" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-use-controllable-state" "1.0.1"
+    "@radix-ui/react-use-previous" "1.0.1"
+    "@radix-ui/react-use-size" "1.0.1"
+
+"@radix-ui/react-collection@1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-collection/-/react-collection-1.0.3.tgz#9595a66e09026187524a36c6e7e9c7d286469159"
+  integrity sha512-3SzW+0PW7yBBoQlT8wNcGtaxaD0XSu0uLUFgrtHY08Acx05TaHaOmVLR73c0j/cqpDy53KBMO7s0dx2wmOIDIA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-slot" "1.0.2"
+
 "@radix-ui/react-compose-refs@1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.0.tgz#37595b1f16ec7f228d698590e78eeed18ff218ae"
@@ -887,6 +987,26 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/react-compose-refs@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz#7ed868b66946aa6030e580b1ffca386dd4d21989"
+  integrity sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/react-context-menu@^2.1.5":
+  version "2.1.5"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-context-menu/-/react-context-menu-2.1.5.tgz#1bdbd72761439f9166f75dc4598f276265785c83"
+  integrity sha512-R5XaDj06Xul1KGb+WP8qiOh7tKJNz2durpLBXAGZjSVtctcRFCuEvy2gtMwRJGePwQQE5nV77gs4FwRi8T+r2g==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.1"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-menu" "2.0.6"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-use-callback-ref" "1.0.1"
+    "@radix-ui/react-use-controllable-state" "1.0.1"
+
 "@radix-ui/react-context@1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-context/-/react-context-1.0.0.tgz#f38e30c5859a9fb5e9aa9a9da452ee3ed9e0aee0"
@@ -894,6 +1014,34 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/react-context@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-context/-/react-context-1.0.1.tgz#fe46e67c96b240de59187dcb7a1a50ce3e2ec00c"
+  integrity sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/react-dialog@1.0.5", "@radix-ui/react-dialog@^1.0.5":
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-dialog/-/react-dialog-1.0.5.tgz#71657b1b116de6c7a0b03242d7d43e01062c7300"
+  integrity sha512-GjWJX/AUpB703eEBanuBnIWdIXg6NvJFCXcNlSZk4xdszCdhrJgBoUd1cGk67vFO+WdA2pfI/plOpqz/5GUP6Q==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.1"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-dismissable-layer" "1.0.5"
+    "@radix-ui/react-focus-guards" "1.0.1"
+    "@radix-ui/react-focus-scope" "1.0.4"
+    "@radix-ui/react-id" "1.0.1"
+    "@radix-ui/react-portal" "1.0.4"
+    "@radix-ui/react-presence" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-slot" "1.0.2"
+    "@radix-ui/react-use-controllable-state" "1.0.1"
+    aria-hidden "^1.1.1"
+    react-remove-scroll "2.5.5"
+
 "@radix-ui/react-direction@1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-direction/-/react-direction-1.0.0.tgz#a2e0b552352459ecf96342c79949dd833c1e6e45"
@@ -901,6 +1049,173 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/react-direction@1.0.1", "@radix-ui/react-direction@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-direction/-/react-direction-1.0.1.tgz#9cb61bf2ccf568f3421422d182637b7f47596c9b"
+  integrity sha512-RXcvnXgyvYvBEOhCBuddKecVkoMiI10Jcm5cTI7abJRAHYfFxeu+FBQs/DvdxSYucxR5mna0dNsL6QFlds5TMA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/react-dismissable-layer@1.0.5":
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.5.tgz#3f98425b82b9068dfbab5db5fff3df6ebf48b9d4"
+  integrity sha512-aJeDjQhywg9LBu2t/At58hCvr7pEm0o2Ke1x33B+MhjNmmZ17sy4KImo0KPLgsnc/zN7GPdce8Cnn0SWvwZO7g==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.1"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-use-callback-ref" "1.0.1"
+    "@radix-ui/react-use-escape-keydown" "1.0.3"
+
+"@radix-ui/react-dropdown-menu@^2.0.6":
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.0.6.tgz#cdf13c956c5e263afe4e5f3587b3071a25755b63"
+  integrity sha512-i6TuFOoWmLWq+M/eCLGd/bQ2HfAX1RJgvrBQ6AQLmzfvsLdefxbWu8G9zczcPFfcSPehz9GcpF6K9QYreFV8hA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.1"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-id" "1.0.1"
+    "@radix-ui/react-menu" "2.0.6"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-use-controllable-state" "1.0.1"
+
+"@radix-ui/react-focus-guards@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-guards/-/react-focus-guards-1.0.1.tgz#1ea7e32092216b946397866199d892f71f7f98ad"
+  integrity sha512-Rect2dWbQ8waGzhMavsIbmSVCgYxkXLxxR3ZvCX79JOglzdEy4JXMb98lq4hPxUbLr77nP0UOGf4rcMU+s1pUA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/react-focus-scope@1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-scope/-/react-focus-scope-1.0.4.tgz#2ac45fce8c5bb33eb18419cdc1905ef4f1906525"
+  integrity sha512-sL04Mgvf+FmyvZeYfNu1EPAaaxD+aw7cYeIB9L9Fvq8+urhltTRaEo5ysKOpHuKPclsZcSUMKlN05x4u+CINpA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-use-callback-ref" "1.0.1"
+
+"@radix-ui/react-form@^0.0.3":
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-form/-/react-form-0.0.3.tgz#328e7163e723ccc748459d66a2d685d7b4f85d5a"
+  integrity sha512-kgE+Z/haV6fxE5WqIXj05KkaXa3OkZASoTDy25yX2EIp/x0c54rOH/vFr5nOZTg7n7T1z8bSyXmiVIFP9bbhPQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.1"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-id" "1.0.1"
+    "@radix-ui/react-label" "2.0.2"
+    "@radix-ui/react-primitive" "1.0.3"
+
+"@radix-ui/react-hover-card@^1.0.7":
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-hover-card/-/react-hover-card-1.0.7.tgz#684bca2504432566357e7157e087051aa3577948"
+  integrity sha512-OcUN2FU0YpmajD/qkph3XzMcK/NmSk9hGWnjV68p6QiZMgILugusgQwnLSDs3oFSJYGKf3Y49zgFedhGh04k9A==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.1"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-dismissable-layer" "1.0.5"
+    "@radix-ui/react-popper" "1.1.3"
+    "@radix-ui/react-portal" "1.0.4"
+    "@radix-ui/react-presence" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-use-controllable-state" "1.0.1"
+
+"@radix-ui/react-id@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-id/-/react-id-1.0.1.tgz#73cdc181f650e4df24f0b6a5b7aa426b912c88c0"
+  integrity sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-use-layout-effect" "1.0.1"
+
+"@radix-ui/react-label@2.0.2":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-label/-/react-label-2.0.2.tgz#9c72f1d334aac996fdc27b48a8bdddd82108fb6d"
+  integrity sha512-N5ehvlM7qoTLx7nWPodsPYPgMzA5WM8zZChQg8nyFJKnDO5WHdba1vv5/H6IO5LtJMfD2Q3wh1qHFGNtK0w3bQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-primitive" "1.0.3"
+
+"@radix-ui/react-menu@2.0.6":
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-menu/-/react-menu-2.0.6.tgz#2c9e093c1a5d5daa87304b2a2f884e32288ae79e"
+  integrity sha512-BVkFLS+bUC8HcImkRKPSiVumA1VPOOEC5WBMiT+QAVsPzW1FJzI9KnqgGxVDPBcql5xXrHkD3JOVoXWEXD8SYA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.1"
+    "@radix-ui/react-collection" "1.0.3"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-direction" "1.0.1"
+    "@radix-ui/react-dismissable-layer" "1.0.5"
+    "@radix-ui/react-focus-guards" "1.0.1"
+    "@radix-ui/react-focus-scope" "1.0.4"
+    "@radix-ui/react-id" "1.0.1"
+    "@radix-ui/react-popper" "1.1.3"
+    "@radix-ui/react-portal" "1.0.4"
+    "@radix-ui/react-presence" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-roving-focus" "1.0.4"
+    "@radix-ui/react-slot" "1.0.2"
+    "@radix-ui/react-use-callback-ref" "1.0.1"
+    aria-hidden "^1.1.1"
+    react-remove-scroll "2.5.5"
+
+"@radix-ui/react-popover@^1.0.7":
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-popover/-/react-popover-1.0.7.tgz#23eb7e3327330cb75ec7b4092d685398c1654e3c"
+  integrity sha512-shtvVnlsxT6faMnK/a7n0wptwBD23xc1Z5mdrtKLwVEfsEMXodS0r5s0/g5P0hX//EKYZS2sxUjqfzlg52ZSnQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.1"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-dismissable-layer" "1.0.5"
+    "@radix-ui/react-focus-guards" "1.0.1"
+    "@radix-ui/react-focus-scope" "1.0.4"
+    "@radix-ui/react-id" "1.0.1"
+    "@radix-ui/react-popper" "1.1.3"
+    "@radix-ui/react-portal" "1.0.4"
+    "@radix-ui/react-presence" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-slot" "1.0.2"
+    "@radix-ui/react-use-controllable-state" "1.0.1"
+    aria-hidden "^1.1.1"
+    react-remove-scroll "2.5.5"
+
+"@radix-ui/react-popper@1.1.3":
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-popper/-/react-popper-1.1.3.tgz#24c03f527e7ac348fabf18c89795d85d21b00b42"
+  integrity sha512-cKpopj/5RHZWjrbF2846jBNacjQVwkP068DfmgrNJXpvVWrOvlAmE9xSiy5OqeE+Gi8D9fP+oDhUnPqNMY8/5w==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@floating-ui/react-dom" "^2.0.0"
+    "@radix-ui/react-arrow" "1.0.3"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-use-callback-ref" "1.0.1"
+    "@radix-ui/react-use-layout-effect" "1.0.1"
+    "@radix-ui/react-use-rect" "1.0.1"
+    "@radix-ui/react-use-size" "1.0.1"
+    "@radix-ui/rect" "1.0.1"
+
+"@radix-ui/react-portal@1.0.4", "@radix-ui/react-portal@^1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-portal/-/react-portal-1.0.4.tgz#df4bfd353db3b1e84e639e9c63a5f2565fb00e15"
+  integrity sha512-Qki+C/EuGUVCQTOTD5vzJzJuMUlewbzuKyUy+/iHM2uwGiru9gZeBJtHAPKAEkB5KWGi9mP/CHKcY0wt1aW45Q==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-primitive" "1.0.3"
+
 "@radix-ui/react-presence@1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-presence/-/react-presence-1.0.0.tgz#814fe46df11f9a468808a6010e3f3ca7e0b2e84a"
@@ -910,6 +1225,15 @@
     "@radix-ui/react-compose-refs" "1.0.0"
     "@radix-ui/react-use-layout-effect" "1.0.0"
 
+"@radix-ui/react-presence@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-presence/-/react-presence-1.0.1.tgz#491990ba913b8e2a5db1b06b203cb24b5cdef9ba"
+  integrity sha512-UXLW4UAbIY5ZjcvzjfRFo5gxva8QirC9hF7wRE4U5gz+TP0DbRk+//qyuAQ1McDxBt1xNMBTaciFGvEmJvAZCg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-use-layout-effect" "1.0.1"
+
 "@radix-ui/react-primitive@1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-1.0.1.tgz#c1ebcce283dd2f02e4fbefdaa49d1cb13dbc990a"
@@ -918,6 +1242,47 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-slot" "1.0.1"
 
+"@radix-ui/react-primitive@1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz#d49ea0f3f0b2fe3ab1cb5667eb03e8b843b914d0"
+  integrity sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-slot" "1.0.2"
+
+"@radix-ui/react-radio-group@^1.1.3":
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-radio-group/-/react-radio-group-1.1.3.tgz#3197f5dcce143bcbf961471bf89320735c0212d3"
+  integrity sha512-x+yELayyefNeKeTx4fjK6j99Fs6c4qKm3aY38G3swQVTN6xMpsrbigC0uHs2L//g8q4qR7qOcww8430jJmi2ag==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.1"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-direction" "1.0.1"
+    "@radix-ui/react-presence" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-roving-focus" "1.0.4"
+    "@radix-ui/react-use-controllable-state" "1.0.1"
+    "@radix-ui/react-use-previous" "1.0.1"
+    "@radix-ui/react-use-size" "1.0.1"
+
+"@radix-ui/react-roving-focus@1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-roving-focus/-/react-roving-focus-1.0.4.tgz#e90c4a6a5f6ac09d3b8c1f5b5e81aab2f0db1974"
+  integrity sha512-2mUg5Mgcu001VkGy+FfzZyzbmuUWzgWkj3rvv4yu+mLw03+mTzbxZHvfcGyFp2b8EkQeMkpRQ5FiA2Vr2O6TeQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.1"
+    "@radix-ui/react-collection" "1.0.3"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-direction" "1.0.1"
+    "@radix-ui/react-id" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-use-callback-ref" "1.0.1"
+    "@radix-ui/react-use-controllable-state" "1.0.1"
+
 "@radix-ui/react-scroll-area@1.0.2":
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-scroll-area/-/react-scroll-area-1.0.2.tgz#26c906d351b56835c0301126b24574c9e9c7b93b"
@@ -934,6 +1299,76 @@
     "@radix-ui/react-use-callback-ref" "1.0.0"
     "@radix-ui/react-use-layout-effect" "1.0.0"
 
+"@radix-ui/react-scroll-area@^1.0.5":
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-scroll-area/-/react-scroll-area-1.0.5.tgz#01160c6893f24a2ddb5aa399ae5b3ba84ad4d3cc"
+  integrity sha512-b6PAgH4GQf9QEn8zbT2XUHpW5z8BzqEc7Kl11TwDrvuTrxlkcjTD5qa/bxgKr+nmuXKu4L/W5UZ4mlP/VG/5Gw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/number" "1.0.1"
+    "@radix-ui/primitive" "1.0.1"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-direction" "1.0.1"
+    "@radix-ui/react-presence" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-use-callback-ref" "1.0.1"
+    "@radix-ui/react-use-layout-effect" "1.0.1"
+
+"@radix-ui/react-select@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-select/-/react-select-2.0.0.tgz#a3511792a51a7018d6559357323a7f52e0e38887"
+  integrity sha512-RH5b7af4oHtkcHS7pG6Sgv5rk5Wxa7XI8W5gvB1N/yiuDGZxko1ynvOiVhFM7Cis2A8zxF9bTOUVbRDzPepe6w==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/number" "1.0.1"
+    "@radix-ui/primitive" "1.0.1"
+    "@radix-ui/react-collection" "1.0.3"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-direction" "1.0.1"
+    "@radix-ui/react-dismissable-layer" "1.0.5"
+    "@radix-ui/react-focus-guards" "1.0.1"
+    "@radix-ui/react-focus-scope" "1.0.4"
+    "@radix-ui/react-id" "1.0.1"
+    "@radix-ui/react-popper" "1.1.3"
+    "@radix-ui/react-portal" "1.0.4"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-slot" "1.0.2"
+    "@radix-ui/react-use-callback-ref" "1.0.1"
+    "@radix-ui/react-use-controllable-state" "1.0.1"
+    "@radix-ui/react-use-layout-effect" "1.0.1"
+    "@radix-ui/react-use-previous" "1.0.1"
+    "@radix-ui/react-visually-hidden" "1.0.3"
+    aria-hidden "^1.1.1"
+    react-remove-scroll "2.5.5"
+
+"@radix-ui/react-separator@^1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-separator/-/react-separator-1.0.3.tgz#be5a931a543d5726336b112f465f58585c04c8aa"
+  integrity sha512-itYmTy/kokS21aiV5+Z56MZB54KrhPgn6eHDKkFeOLR34HMN2s8PaN47qZZAGnvupcjxHaFZnW4pQEh0BvvVuw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-primitive" "1.0.3"
+
+"@radix-ui/react-slider@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-slider/-/react-slider-1.1.2.tgz#330ff2a0e1f6c19aace76590004f229a7e8fbe6c"
+  integrity sha512-NKs15MJylfzVsCagVSWKhGGLNR1W9qWs+HtgbmjjVUB3B9+lb3PYoXxVju3kOrpf0VKyVCtZp+iTwVoqpa1Chw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/number" "1.0.1"
+    "@radix-ui/primitive" "1.0.1"
+    "@radix-ui/react-collection" "1.0.3"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-direction" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-use-controllable-state" "1.0.1"
+    "@radix-ui/react-use-layout-effect" "1.0.1"
+    "@radix-ui/react-use-previous" "1.0.1"
+    "@radix-ui/react-use-size" "1.0.1"
+
 "@radix-ui/react-slot@1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.0.1.tgz#e7868c669c974d649070e9ecbec0b367ee0b4d81"
@@ -942,6 +1377,62 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-compose-refs" "1.0.0"
 
+"@radix-ui/react-slot@1.0.2", "@radix-ui/react-slot@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.0.2.tgz#a9ff4423eade67f501ffb32ec22064bc9d3099ab"
+  integrity sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-compose-refs" "1.0.1"
+
+"@radix-ui/react-switch@^1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-switch/-/react-switch-1.0.3.tgz#6119f16656a9eafb4424c600fdb36efa5ec5837e"
+  integrity sha512-mxm87F88HyHztsI7N+ZUmEoARGkC22YVW5CaC+Byc+HRpuvCrOBPTAnXgf+tZ/7i0Sg/eOePGdMhUKhPaQEqow==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.1"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-use-controllable-state" "1.0.1"
+    "@radix-ui/react-use-previous" "1.0.1"
+    "@radix-ui/react-use-size" "1.0.1"
+
+"@radix-ui/react-tabs@^1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-tabs/-/react-tabs-1.0.4.tgz#993608eec55a5d1deddd446fa9978d2bc1053da2"
+  integrity sha512-egZfYY/+wRNCflXNHx+dePvnz9FbmssDTJBtgRfDY7e8SE5oIo3Py2eCB1ckAbh1Q7cQ/6yJZThJ++sgbxibog==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.1"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-direction" "1.0.1"
+    "@radix-ui/react-id" "1.0.1"
+    "@radix-ui/react-presence" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-roving-focus" "1.0.4"
+    "@radix-ui/react-use-controllable-state" "1.0.1"
+
+"@radix-ui/react-tooltip@^1.0.7":
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-tooltip/-/react-tooltip-1.0.7.tgz#8f55070f852e7e7450cc1d9210b793d2e5a7686e"
+  integrity sha512-lPh5iKNFVQ/jav/j6ZrWq3blfDJ0OH9R6FlNUHPMqdLuQ9vwDgFsRxvl8b7Asuy5c8xmoojHUxKHQSOAvMHxyw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.1"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-dismissable-layer" "1.0.5"
+    "@radix-ui/react-id" "1.0.1"
+    "@radix-ui/react-popper" "1.1.3"
+    "@radix-ui/react-portal" "1.0.4"
+    "@radix-ui/react-presence" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-slot" "1.0.2"
+    "@radix-ui/react-use-controllable-state" "1.0.1"
+    "@radix-ui/react-visually-hidden" "1.0.3"
+
 "@radix-ui/react-use-callback-ref@1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.0.tgz#9e7b8b6b4946fe3cbe8f748c82a2cce54e7b6a90"
@@ -949,6 +1440,29 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/react-use-callback-ref@1.0.1", "@radix-ui/react-use-callback-ref@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz#f4bb1f27f2023c984e6534317ebc411fc181107a"
+  integrity sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/react-use-controllable-state@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.1.tgz#ecd2ced34e6330caf89a82854aa2f77e07440286"
+  integrity sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-use-callback-ref" "1.0.1"
+
+"@radix-ui/react-use-escape-keydown@1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.3.tgz#217b840c250541609c66f67ed7bab2b733620755"
+  integrity sha512-vyL82j40hcFicA+M4Ex7hVkB9vHgSse1ZWomAqV2Je3RleKGO5iM8KMOEtfoSB0PnIelMd2lATjTGMYqN5ylTg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-use-callback-ref" "1.0.1"
+
 "@radix-ui/react-use-layout-effect@1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.0.tgz#2fc19e97223a81de64cd3ba1dc42ceffd82374dc"
@@ -956,6 +1470,84 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/react-use-layout-effect@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.1.tgz#be8c7bc809b0c8934acf6657b577daf948a75399"
+  integrity sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/react-use-previous@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-previous/-/react-use-previous-1.0.1.tgz#b595c087b07317a4f143696c6a01de43b0d0ec66"
+  integrity sha512-cV5La9DPwiQ7S0gf/0qiD6YgNqM5Fk97Kdrlc5yBcrF3jyEZQwm7vYFqMo4IfeHgJXsRaMvLABFtd0OVEmZhDw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/react-use-rect@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-rect/-/react-use-rect-1.0.1.tgz#fde50b3bb9fd08f4a1cd204572e5943c244fcec2"
+  integrity sha512-Cq5DLuSiuYVKNU8orzJMbl15TXilTnJKUCltMVQg53BQOF1/C5toAaGrowkgksdBQ9H+SRL23g0HDmg9tvmxXw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/rect" "1.0.1"
+
+"@radix-ui/react-use-size@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-size/-/react-use-size-1.0.1.tgz#1c5f5fea940a7d7ade77694bb98116fb49f870b2"
+  integrity sha512-ibay+VqrgcaI6veAojjofPATwledXiSmX+C0KrBk/xgpX9rBzPV3OsfwlhQdUOFbh+LKQorLYT+xTXW9V8yd0g==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-use-layout-effect" "1.0.1"
+
+"@radix-ui/react-visually-hidden@1.0.3", "@radix-ui/react-visually-hidden@^1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.0.3.tgz#51aed9dd0fe5abcad7dee2a234ad36106a6984ac"
+  integrity sha512-D4w41yN5YRKtu464TLnByKzMDG/JlMPHtfZgQAu9v6mNakUqGUI9vUrfQKz8NK41VMm/xbZbh76NUTVtIYqOMA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-primitive" "1.0.3"
+
+"@radix-ui/rect@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/rect/-/rect-1.0.1.tgz#bf8e7d947671996da2e30f4904ece343bc4a883f"
+  integrity sha512-fyrgCaedtvMg9NK3en0pnOYJdtfwxUcNolezkNPUsoX57X8oQk+NkqcvzHXD2uKNij6GXmWU9NDru2IWjrO4BQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/themes@^2.0.1":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/themes/-/themes-2.0.1.tgz#b5125da412966a2ad91c706da9a231780a934ee5"
+  integrity sha512-uO+faiGfwuIR0N9utwIfuasAmH1qRHYJtYTX2Syx0UYEtc9pPAhoCoYobZZi+J03H5WaQouvGiBN6T+UUMm+6Q==
+  dependencies:
+    "@radix-ui/colors" "^3.0.0"
+    "@radix-ui/primitive" "^1.0.1"
+    "@radix-ui/react-accessible-icon" "^1.0.3"
+    "@radix-ui/react-alert-dialog" "^1.0.5"
+    "@radix-ui/react-aspect-ratio" "^1.0.3"
+    "@radix-ui/react-avatar" "^1.0.4"
+    "@radix-ui/react-checkbox" "^1.0.4"
+    "@radix-ui/react-context-menu" "^2.1.5"
+    "@radix-ui/react-dialog" "^1.0.5"
+    "@radix-ui/react-direction" "^1.0.1"
+    "@radix-ui/react-dropdown-menu" "^2.0.6"
+    "@radix-ui/react-form" "^0.0.3"
+    "@radix-ui/react-hover-card" "^1.0.7"
+    "@radix-ui/react-popover" "^1.0.7"
+    "@radix-ui/react-portal" "^1.0.4"
+    "@radix-ui/react-radio-group" "^1.1.3"
+    "@radix-ui/react-scroll-area" "^1.0.5"
+    "@radix-ui/react-select" "^2.0.0"
+    "@radix-ui/react-separator" "^1.0.3"
+    "@radix-ui/react-slider" "^1.1.2"
+    "@radix-ui/react-slot" "^1.0.2"
+    "@radix-ui/react-switch" "^1.0.3"
+    "@radix-ui/react-tabs" "^1.0.4"
+    "@radix-ui/react-tooltip" "^1.0.7"
+    "@radix-ui/react-use-callback-ref" "^1.0.1"
+    "@radix-ui/react-visually-hidden" "^1.0.3"
+    classnames "^2.3.2"
+
 "@remirror/core-constants@^2.0.2":
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/@remirror/core-constants/-/core-constants-2.0.2.tgz#f05eccdc69e3a65e7d524b52548f567904a11a1a"
@@ -1490,6 +2082,13 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.45.tgz#2c0fafd78705e7a18b7906b5201a522719dc5190"
   integrity sha512-w+tIMs3rq2afQdsPJlODhoUEKzFP1ayaoyl1CcnwtIlsVe7K7bA1NGm4s3PraqTLlXnbIN84zuBlxBWo1u9BLw==
 
+"@types/nodemailer@^6.4.14":
+  version "6.4.14"
+  resolved "https://registry.yarnpkg.com/@types/nodemailer/-/nodemailer-6.4.14.tgz#5c81a5e856db7f8ede80013e6dbad7c5fb2283e2"
+  integrity sha512-fUWthHO9k9DSdPCSPRqcu6TWhYyxTBg382vlNIttSe9M7XfsT06y0f24KHXtbnijPGGRIcVvdKHTNikOI6qiHA==
+  dependencies:
+    "@types/node" "*"
+
 "@types/object.omit@^3.0.0":
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/@types/object.omit/-/object.omit-3.0.3.tgz#cc52b1d9774c1619b5c6fc50229d087f01eabd68"
@@ -1854,7 +2453,7 @@ argparse@^2.0.1:
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
   integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
 
-aria-hidden@^1.1.3:
+aria-hidden@^1.1.1, aria-hidden@^1.1.3:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/aria-hidden/-/aria-hidden-1.2.3.tgz#14aeb7fb692bbb72d69bebfa47279c1fd725e954"
   integrity sha512-xcLxITLe2HYa1cnYnwCjkOO1PqUHQpozB8x9AR0OgWN2woOBi5kSDVxKfd0b7sb1hw5qFeJhXm9H1nu3xSfLeQ==
@@ -2378,6 +2977,11 @@ ci-info@^3.8.0:
   resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-3.9.0.tgz#4279a62028a7b1f262f3473fc9605f5e218c59b4"
   integrity sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==
 
+classnames@^2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924"
+  integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==
+
 client-only@0.0.1, client-only@^0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1"
@@ -6501,7 +7105,7 @@ nodemailer@6.9.3:
   resolved "https://registry.yarnpkg.com/nodemailer/-/nodemailer-6.9.3.tgz#e4425b85f05d83c43c5cd81bf84ab968f8ef5cbe"
   integrity sha512-fy9v3NgTzBngrMFkDsKEj0r02U7jm6XfC3b52eoNV+GCrGj+s8pt5OqhiJdWKuw51zCTdiNR/IUD1z33LIIGpg==
 
-nodemailer@^6.7.2, nodemailer@^6.9.2:
+nodemailer@^6.7.2, nodemailer@^6.9.2, nodemailer@^6.9.7:
   version "6.9.7"
   resolved "https://registry.yarnpkg.com/nodemailer/-/nodemailer-6.9.7.tgz#ec2f488f62ba1558e7b19239b62778df4a5c4397"
   integrity sha512-rUtR77ksqex/eZRLmQ21LKVH5nAAsVicAtAYudK7JgwenEDZ0UIQ1adUGqErz7sMkWYxWTTU1aeP2Jga6WQyJw==
@@ -7451,7 +8055,7 @@ react-query@^3.34.7:
     broadcast-channel "^3.4.1"
     match-sorter "^6.0.2"
 
-react-remove-scroll-bar@^2.3.4:
+react-remove-scroll-bar@^2.3.3, react-remove-scroll-bar@^2.3.4:
   version "2.3.4"
   resolved "https://registry.yarnpkg.com/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.4.tgz#53e272d7a5cb8242990c7f144c44d8bd8ab5afd9"
   integrity sha512-63C4YQBUt0m6ALadE9XV56hV8BgJWDmmTPY758iIJjfQKt2nYwoUrPk0LXRXcB/yIj82T1/Ixfdpdk68LwIB0A==
@@ -7459,6 +8063,17 @@ react-remove-scroll-bar@^2.3.4:
     react-style-singleton "^2.2.1"
     tslib "^2.0.0"
 
+react-remove-scroll@2.5.5:
+  version "2.5.5"
+  resolved "https://registry.yarnpkg.com/react-remove-scroll/-/react-remove-scroll-2.5.5.tgz#1e31a1260df08887a8a0e46d09271b52b3a37e77"
+  integrity sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==
+  dependencies:
+    react-remove-scroll-bar "^2.3.3"
+    react-style-singleton "^2.2.1"
+    tslib "^2.1.0"
+    use-callback-ref "^1.3.0"
+    use-sidecar "^1.1.2"
+
 react-remove-scroll@^2.5.5:
   version "2.5.7"
   resolved "https://registry.yarnpkg.com/react-remove-scroll/-/react-remove-scroll-2.5.7.tgz#15a1fd038e8497f65a695bf26a4a57970cac1ccb"