diff --git a/src/components/High/TicketDisplay.tsx b/src/components/High/TicketDisplay.tsx
new file mode 100644
index 00000000..da4fad9e
--- /dev/null
+++ b/src/components/High/TicketDisplay.tsx
@@ -0,0 +1,253 @@
+import useUsers from "@/hooks/useUsers";
+import {
+  Ticket,
+  TicketStatus,
+  TicketStatusLabel,
+  TicketType,
+  TicketTypeLabel,
+} from "@/interfaces/ticket";
+import { User } from "@/interfaces/user";
+import { USER_TYPE_LABELS } from "@/resources/user";
+import axios from "axios";
+import moment from "moment";
+import { useState } from "react";
+import { toast } from "react-toastify";
+import ShortUniqueId from "short-unique-id";
+import Button from "../Low/Button";
+import Input from "../Low/Input";
+import Select from "../Low/Select";
+
+interface Props {
+  user: User;
+  ticket: Ticket;
+  onClose: () => void;
+}
+
+export default function TicketDisplay({ user, ticket, onClose }: Props) {
+  const [subject] = useState(ticket.subject);
+  const [type, setType] = useState<TicketType>(ticket.type);
+  const [description] = useState(ticket.description);
+  const [reporter] = useState(ticket.reporter);
+  const [reportedFrom] = useState(ticket.reportedFrom);
+  const [status, setStatus] = useState(ticket.status);
+  const [assignedTo, setAssignedTo] = useState<string | null>(
+    ticket.assignedTo || null,
+  );
+  const [isLoading, setIsLoading] = useState(false);
+
+  const { users } = useUsers();
+
+  const submit = () => {
+    if (!type)
+      return toast.error("Please choose a type!", { toastId: "missing-type" });
+
+    setIsLoading(true);
+    axios
+      .patch(`/api/tickets/${ticket.id}`, {
+        subject,
+        type,
+        description,
+        reporter,
+        reportedFrom,
+        status,
+        assignedTo,
+      })
+      .then(() => {
+        toast.success(`The ticket has been updated!`, { toastId: "submitted" });
+        onClose();
+      })
+      .catch((e) => {
+        console.error(e);
+        toast.error("Something went wrong, please try again later!", {
+          toastId: "error",
+        });
+      })
+      .finally(() => setIsLoading(false));
+  };
+
+  const del = () => {
+    if (!confirm("Are you sure you want to delete this ticket?")) return;
+
+    setIsLoading(true);
+    axios
+      .delete(`/api/tickets/${ticket.id}`)
+      .then(() => {
+        toast.success(`The ticket has been deleted!`, { toastId: "submitted" });
+        onClose();
+      })
+      .catch((e) => {
+        console.error(e);
+        toast.error("Something went wrong, please try again later!", {
+          toastId: "error",
+        });
+      })
+      .finally(() => setIsLoading(false));
+  };
+
+  return (
+    <form className="flex flex-col gap-4 pt-8">
+      <Input
+        label="Subject"
+        type="text"
+        name="subject"
+        placeholder="Subject..."
+        value={subject}
+        onChange={(e) => null}
+        disabled
+      />
+
+      <div className="-md:flex-col flex w-full items-center gap-4">
+        <div className="flex w-full flex-col gap-3">
+          <label className="text-mti-gray-dim text-base font-normal">
+            Status
+          </label>
+          <Select
+            options={Object.keys(TicketStatusLabel).map((x) => ({
+              value: x,
+              label: TicketStatusLabel[x as keyof typeof TicketStatusLabel],
+            }))}
+            value={{ value: status, label: TicketStatusLabel[status] }}
+            onChange={(value) =>
+              setStatus((value?.value as TicketStatus) ?? undefined)
+            }
+            placeholder="Status..."
+          />
+        </div>
+        <div className="flex w-full flex-col gap-3">
+          <label className="text-mti-gray-dim text-base font-normal">
+            Type
+          </label>
+          <Select
+            options={Object.keys(TicketTypeLabel).map((x) => ({
+              value: x,
+              label: TicketTypeLabel[x as keyof typeof TicketTypeLabel],
+            }))}
+            value={{ value: type, label: TicketTypeLabel[type] }}
+            onChange={(value) => setType(value!.value as TicketType)}
+            placeholder="Type..."
+          />
+        </div>
+      </div>
+
+      <div className="flex w-full flex-col gap-3">
+        <label className="text-mti-gray-dim text-base font-normal">
+          Assignee
+        </label>
+        <Select
+          options={[
+            { value: "me", label: "Assign to me" },
+            ...users
+              .filter((x) => ["admin", "developer"].includes(x.type))
+              .map((u) => ({
+                value: u.id,
+                label: `${u.name} - ${u.email}`,
+              })),
+          ]}
+          value={
+            assignedTo
+              ? {
+                  value: assignedTo,
+                  label: `${users.find((u) => u.id === assignedTo)?.name} - ${users.find((u) => u.id === assignedTo)?.email}`,
+                }
+              : null
+          }
+          onChange={(value) =>
+            value
+              ? setAssignedTo(value.value === "me" ? user.id : value.value)
+              : setAssignedTo(null)
+          }
+          placeholder="Assignee..."
+          isClearable
+        />
+      </div>
+
+      <div className="-md:flex-col flex w-full items-center gap-4">
+        <Input
+          label="Reported From"
+          type="text"
+          name="reportedFrom"
+          onChange={() => null}
+          value={reportedFrom}
+          disabled
+        />
+        <Input
+          label="Date"
+          type="text"
+          name="date"
+          onChange={() => null}
+          value={moment(ticket.date).format("DD/MM/YYYY - HH:mm")}
+          disabled
+        />
+      </div>
+
+      <div className="-md:flex-col flex w-full items-center gap-4">
+        <Input
+          label="Reporter's Name"
+          type="text"
+          name="reporter"
+          onChange={() => null}
+          value={reporter.name}
+          disabled
+        />
+        <Input
+          label="Reporter's E-mail"
+          type="text"
+          name="reporter"
+          onChange={() => null}
+          value={reporter.email}
+          disabled
+        />
+        <Input
+          label="Reporter's Type"
+          type="text"
+          name="reporterType"
+          onChange={() => null}
+          value={USER_TYPE_LABELS[reporter.type]}
+          disabled
+        />
+      </div>
+
+      <textarea
+        className="input border-mti-gray-platinum h-full min-h-[300px] w-full cursor-text rounded-3xl border bg-white px-7 py-8"
+        placeholder="Write your ticket's description here..."
+        contentEditable={false}
+        value={description}
+        spellCheck
+      />
+
+      <div className="-md:flex-col-reverse mt-2 flex w-full items-center justify-between gap-4">
+        <Button
+          type="button"
+          color="red"
+          className="w-full md:max-w-[200px]"
+          variant="outline"
+          onClick={del}
+          isLoading={isLoading}
+        >
+          Delete
+        </Button>
+
+        <div className="-md:flex-col-reverse flex w-full items-center justify-end gap-4">
+          <Button
+            type="button"
+            color="red"
+            className="w-full md:max-w-[200px]"
+            variant="outline"
+            onClick={onClose}
+            isLoading={isLoading}
+          >
+            Cancel
+          </Button>
+          <Button
+            type="button"
+            className="w-full md:max-w-[200px]"
+            isLoading={isLoading}
+            onClick={submit}
+          >
+            Update
+          </Button>
+        </div>
+      </div>
+    </form>
+  );
+}
diff --git a/src/components/High/TicketSubmission.tsx b/src/components/High/TicketSubmission.tsx
new file mode 100644
index 00000000..83862ce4
--- /dev/null
+++ b/src/components/High/TicketSubmission.tsx
@@ -0,0 +1,134 @@
+import { Ticket, TicketType, TicketTypeLabel } from "@/interfaces/ticket";
+import { User } from "@/interfaces/user";
+import axios from "axios";
+import { useState } from "react";
+import { toast } from "react-toastify";
+import ShortUniqueId from "short-unique-id";
+import Button from "../Low/Button";
+import Input from "../Low/Input";
+import Select from "../Low/Select";
+
+interface Props {
+  user: User;
+  page: string;
+  onClose: () => void;
+}
+
+export default function TicketSubmission({ user, page, onClose }: Props) {
+  const [subject, setSubject] = useState("");
+  const [type, setType] = useState<TicketType>();
+  const [description, setDescription] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+
+  const submit = () => {
+    if (!type)
+      return toast.error("Please choose a type!", { toastId: "missing-type" });
+    if (subject.trim() === "")
+      return toast.error("Please input a subject!", {
+        toastId: "missing-subject",
+      });
+    if (description.trim() === "")
+      return toast.error("Please describe your ticket!", {
+        toastId: "missing-desc",
+      });
+
+    setIsLoading(true);
+
+    const shortUID = new ShortUniqueId();
+    const ticket: Ticket = {
+      id: shortUID.randomUUID(8),
+      date: new Date().toISOString(),
+      reporter: {
+        id: user.id,
+        email: user.email,
+        name: user.name,
+        type: user.type,
+      },
+      status: "submitted",
+      subject,
+      type,
+      reportedFrom: page,
+      description,
+    };
+
+    axios
+      .post(`/api/tickets`, ticket)
+      .then(() => {
+        toast.success(
+          `Your ticket has been submitted! You will be contacted by e-mail for further discussion.`,
+          { toastId: "submitted" },
+        );
+        onClose();
+      })
+      .catch((e) => {
+        console.error(e);
+        toast.error("Something went wrong, please try again later!", {
+          toastId: "error",
+        });
+      })
+      .finally(() => setIsLoading(false));
+  };
+
+  return (
+    <form className="flex flex-col gap-4 pt-8">
+      <Input
+        label="Subject"
+        type="text"
+        name="subject"
+        placeholder="Subject..."
+        onChange={(e) => setSubject(e)}
+      />
+      <div className="-md:flex-col flex w-full items-center gap-4">
+        <div className="flex w-full flex-col gap-3">
+          <label className="text-mti-gray-dim text-base font-normal">
+            Type
+          </label>
+          <Select
+            options={Object.keys(TicketTypeLabel).map((x) => ({
+              value: x,
+              label: TicketTypeLabel[x as keyof typeof TicketTypeLabel],
+            }))}
+            onChange={(value) =>
+              setType((value?.value as TicketType) ?? undefined)
+            }
+            placeholder="Type..."
+          />
+        </div>
+        <Input
+          label="Reporter"
+          type="text"
+          name="reporter"
+          onChange={() => null}
+          value={`${user.name} - ${user.email}`}
+          disabled
+        />
+      </div>
+      <textarea
+        className="input border-mti-gray-platinum h-full min-h-[300px] w-full cursor-text rounded-3xl border bg-white px-7 py-8"
+        onChange={(e) => setDescription(e.target.value)}
+        placeholder="Write your ticket's description here..."
+        spellCheck
+      />
+      <div className="mt-2 flex w-full items-center justify-end gap-4">
+        <Button
+          type="button"
+          color="red"
+          className="w-full max-w-[200px]"
+          variant="outline"
+          onClick={onClose}
+          isLoading={isLoading}
+        >
+          Cancel
+        </Button>
+        <Button
+          type="button"
+          className="w-full max-w-[200px]"
+          isLoading={isLoading}
+          onClick={submit}
+        >
+          Submit
+        </Button>
+      </div>
+    </form>
+  );
+}
diff --git a/src/components/Low/Select.tsx b/src/components/Low/Select.tsx
new file mode 100644
index 00000000..e79ce93e
--- /dev/null
+++ b/src/components/Low/Select.tsx
@@ -0,0 +1,68 @@
+import clsx from "clsx";
+import { ComponentProps } from "react";
+import ReactSelect from "react-select";
+
+interface Option {
+  [key: string]: any;
+  value: string;
+  label: string;
+}
+
+interface Props {
+  defaultValue?: Option;
+  value?: Option | null;
+  options: Option[];
+  disabled?: boolean;
+  placeholder?: string;
+  onChange: (value: Option | null) => void;
+  isClearable?: boolean;
+}
+
+export default function Select({
+  value,
+  defaultValue,
+  options,
+  placeholder,
+  disabled,
+  onChange,
+  isClearable,
+}: Props) {
+  return (
+    <ReactSelect
+      className={clsx(
+        "placeholder:text-mti-gray-cool border-mti-gray-platinum w-full rounded-full border bg-white px-4 py-4 text-sm font-normal focus:outline-none",
+        disabled &&
+          "!bg-mti-gray-platinum/40 !text-mti-gray-dim cursor-not-allowed",
+      )}
+      options={options}
+      value={value}
+      onChange={onChange}
+      placeholder={placeholder}
+      menuPortalTarget={document?.body}
+      defaultValue={defaultValue}
+      styles={{
+        menuPortal: (base) => ({ ...base, zIndex: 9999 }),
+        control: (styles) => ({
+          ...styles,
+          paddingLeft: "4px",
+          border: "none",
+          outline: "none",
+          ":focus": {
+            outline: "none",
+          },
+        }),
+        option: (styles, state) => ({
+          ...styles,
+          backgroundColor: state.isFocused
+            ? "#D5D9F0"
+            : state.isSelected
+              ? "#7872BF"
+              : "white",
+          color: state.isFocused ? "black" : styles.color,
+        }),
+      }}
+      isDisabled={disabled}
+      isClearable={isClearable}
+    />
+  );
+}
diff --git a/src/components/MobileMenu.tsx b/src/components/MobileMenu.tsx
index dd31e85e..c6dcd9a5 100644
--- a/src/components/MobileMenu.tsx
+++ b/src/components/MobileMenu.tsx
@@ -1,149 +1,189 @@
-import {User} from "@/interfaces/user";
-import {Dialog, Transition} from "@headlessui/react";
+import { User } from "@/interfaces/user";
+import { Dialog, Transition } from "@headlessui/react";
 import axios from "axios";
 import clsx from "clsx";
 import Image from "next/image";
 import Link from "next/link";
-import {useRouter} from "next/router";
-import {Fragment} from "react";
-import {BsShield, BsShieldFill, BsXLg} from "react-icons/bs";
+import { useRouter } from "next/router";
+import { Fragment } from "react";
+import { BsShield, BsShieldFill, BsXLg } from "react-icons/bs";
 
 interface Props {
-	isOpen: boolean;
-	onClose: () => void;
-	path: string;
-	user: User;
+  isOpen: boolean;
+  onClose: () => void;
+  path: string;
+  user: User;
 }
 
-export default function MobileMenu({isOpen, onClose, path, user}: Props) {
-	const router = useRouter();
+export default function MobileMenu({ isOpen, onClose, path, user }: Props) {
+  const router = useRouter();
 
-	const logout = async () => {
-		axios.post("/api/logout").finally(() => {
-			setTimeout(() => router.reload(), 500);
-		});
-	};
+  const logout = async () => {
+    axios.post("/api/logout").finally(() => {
+      setTimeout(() => router.reload(), 500);
+    });
+  };
 
-	return (
-		<Transition appear show={isOpen} as={Fragment}>
-			<Dialog as="div" className="relative z-10" onClose={onClose}>
-				<Transition.Child
-					as={Fragment}
-					enter="ease-out duration-300"
-					enterFrom="opacity-0"
-					enterTo="opacity-100"
-					leave="ease-in duration-200"
-					leaveFrom="opacity-100"
-					leaveTo="opacity-0">
-					<div className="fixed inset-0 bg-black bg-opacity-25" />
-				</Transition.Child>
+  return (
+    <Transition appear show={isOpen} as={Fragment}>
+      <Dialog as="div" className="relative z-10" onClose={onClose}>
+        <Transition.Child
+          as={Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-black bg-opacity-25" />
+        </Transition.Child>
 
-				<div className="fixed inset-0 overflow-y-auto">
-					<div className="flex min-h-full items-center justify-center text-center">
-						<Transition.Child
-							as={Fragment}
-							enter="ease-out duration-300"
-							enterFrom="opacity-0 scale-95"
-							enterTo="opacity-100 scale-100"
-							leave="ease-in duration-200"
-							leaveFrom="opacity-100 scale-100"
-							leaveTo="opacity-0 scale-95">
-							<Dialog.Panel className="w-full h-screen transform overflow-hidden bg-white text-left align-middle shadow-xl transition-all text-black flex flex-col gap-8">
-								<Dialog.Title as="header" className="w-full px-8 py-2 -md:flex justify-between items-center md:hidden shadow-sm">
-									<Link href="/">
-										<Image src="/logo_title.png" alt="EnCoach logo" width={69} height={69} />
-									</Link>
-									<div className="cursor-pointer" onClick={onClose} tabIndex={0}>
-										<BsXLg className="text-2xl text-mti-purple-light" onClick={onClose} />
-									</div>
-								</Dialog.Title>
-								<div className="flex flex-col h-full gap-6 px-8 text-lg">
-									<Link
-										href="/"
-										className={clsx(
-											"transition ease-in-out duration-300 w-fit",
-											path === "/" && "text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
-										)}>
-										Dashboard
-									</Link>
-									{(user.type === "student" || user.type === "teacher" || user.type === "developer") && (
-										<>
-											<Link
-												href="/exam"
-												className={clsx(
-													"transition ease-in-out duration-300 w-fit",
-													path === "/exam" && "text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
-												)}>
-												Exams
-											</Link>
-											<Link
-												href="/exercises"
-												className={clsx(
-													"transition ease-in-out duration-300 w-fit",
-													path === "/exercises" &&
-														"text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
-												)}>
-												Exercises
-											</Link>
-										</>
-									)}
-									<Link
-										href="/stats"
-										className={clsx(
-											"transition ease-in-out duration-300 w-fit",
-											path === "/stats" && "text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
-										)}>
-										Stats
-									</Link>
-									<Link
-										href="/record"
-										className={clsx(
-											"transition ease-in-out duration-300 w-fit",
-											path === "/record" && "text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
-										)}>
-										Record
-									</Link>
-									{["admin", "developer", "agent", "corporate"].includes(user.type) && (
-										<Link
-											href="/payment-record"
-											className={clsx(
-												"transition ease-in-out duration-300 w-fit",
-												path === "/payment-record" &&
-													"text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
-											)}>
-											Payment Record
-										</Link>
-									)}
-									{["admin", "developer", "corporate", "teacher"].includes(user.type) && (
-										<Link
-											href="/settings"
-											className={clsx(
-												"transition ease-in-out duration-300 w-fit",
-												path === "/settings" && "text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
-											)}>
-											Settings
-										</Link>
-									)}
-									<Link
-										href="/profile"
-										className={clsx(
-											"transition ease-in-out duration-300 w-fit",
-											path === "/profile" && "text-mti-purple-light font-semibold border-b-2 border-b-mti-purple-light ",
-										)}>
-										Profile
-									</Link>
+        <div className="fixed inset-0 overflow-y-auto">
+          <div className="flex min-h-full items-center justify-center text-center">
+            <Transition.Child
+              as={Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 scale-95"
+              enterTo="opacity-100 scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 scale-100"
+              leaveTo="opacity-0 scale-95"
+            >
+              <Dialog.Panel className="flex h-screen w-full transform flex-col gap-8 overflow-hidden bg-white text-left align-middle text-black shadow-xl transition-all">
+                <Dialog.Title
+                  as="header"
+                  className="-md:flex w-full items-center justify-between px-8 py-2 shadow-sm md:hidden"
+                >
+                  <Link href="/">
+                    <Image
+                      src="/logo_title.png"
+                      alt="EnCoach logo"
+                      width={69}
+                      height={69}
+                    />
+                  </Link>
+                  <div
+                    className="cursor-pointer"
+                    onClick={onClose}
+                    tabIndex={0}
+                  >
+                    <BsXLg
+                      className="text-mti-purple-light text-2xl"
+                      onClick={onClose}
+                    />
+                  </div>
+                </Dialog.Title>
+                <div className="flex h-full flex-col gap-6 px-8 text-lg">
+                  <Link
+                    href="/"
+                    className={clsx(
+                      "w-fit transition duration-300 ease-in-out",
+                      path === "/" &&
+                        "text-mti-purple-light border-b-mti-purple-light border-b-2 font-semibold ",
+                    )}
+                  >
+                    Dashboard
+                  </Link>
+                  {(user.type === "student" ||
+                    user.type === "teacher" ||
+                    user.type === "developer") && (
+                    <>
+                      <Link
+                        href="/exam"
+                        className={clsx(
+                          "w-fit transition duration-300 ease-in-out",
+                          path === "/exam" &&
+                            "text-mti-purple-light border-b-mti-purple-light border-b-2 font-semibold ",
+                        )}
+                      >
+                        Exams
+                      </Link>
+                      <Link
+                        href="/exercises"
+                        className={clsx(
+                          "w-fit transition duration-300 ease-in-out",
+                          path === "/exercises" &&
+                            "text-mti-purple-light border-b-mti-purple-light border-b-2 font-semibold ",
+                        )}
+                      >
+                        Exercises
+                      </Link>
+                    </>
+                  )}
+                  <Link
+                    href="/stats"
+                    className={clsx(
+                      "w-fit transition duration-300 ease-in-out",
+                      path === "/stats" &&
+                        "text-mti-purple-light border-b-mti-purple-light border-b-2 font-semibold ",
+                    )}
+                  >
+                    Stats
+                  </Link>
+                  <Link
+                    href="/record"
+                    className={clsx(
+                      "w-fit transition duration-300 ease-in-out",
+                      path === "/record" &&
+                        "text-mti-purple-light border-b-mti-purple-light border-b-2 font-semibold ",
+                    )}
+                  >
+                    Record
+                  </Link>
+                  {["admin", "developer", "agent", "corporate"].includes(
+                    user.type,
+                  ) && (
+                    <Link
+                      href="/payment-record"
+                      className={clsx(
+                        "w-fit transition duration-300 ease-in-out",
+                        path === "/payment-record" &&
+                          "text-mti-purple-light border-b-mti-purple-light border-b-2 font-semibold ",
+                      )}
+                    >
+                      Payment Record
+                    </Link>
+                  )}
+                  {["admin", "developer", "corporate", "teacher"].includes(
+                    user.type,
+                  ) && (
+                    <Link
+                      href="/settings"
+                      className={clsx(
+                        "w-fit transition duration-300 ease-in-out",
+                        path === "/settings" &&
+                          "text-mti-purple-light border-b-mti-purple-light border-b-2 font-semibold ",
+                      )}
+                    >
+                      Settings
+                    </Link>
+                  )}
+                  <Link
+                    href="/profile"
+                    className={clsx(
+                      "w-fit transition duration-300 ease-in-out",
+                      path === "/profile" &&
+                        "text-mti-purple-light border-b-mti-purple-light border-b-2 font-semibold ",
+                    )}
+                  >
+                    Profile
+                  </Link>
 
-									<span
-										className={clsx("transition ease-in-out duration-300 w-fit justify-self-end cursor-pointer")}
-										onClick={logout}>
-										Logout
-									</span>
-								</div>
-							</Dialog.Panel>
-						</Transition.Child>
-					</div>
-				</div>
-			</Dialog>
-		</Transition>
-	);
+                  <span
+                    className={clsx(
+                      "w-fit cursor-pointer justify-self-end transition duration-300 ease-in-out",
+                    )}
+                    onClick={logout}
+                  >
+                    Logout
+                  </span>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition>
+  );
 }
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index f7e4666e..c264fc35 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -1,95 +1,161 @@
-import {User} from "@/interfaces/user";
+import { User } from "@/interfaces/user";
 import Link from "next/link";
 import FocusLayer from "@/components/FocusLayer";
-import {preventNavigation} from "@/utils/navigation.disabled";
-import {useRouter} from "next/router";
-import {BsList} from "react-icons/bs";
+import { preventNavigation } from "@/utils/navigation.disabled";
+import { useRouter } from "next/router";
+import { BsList, BsQuestionCircle, BsQuestionCircleFill } from "react-icons/bs";
 import clsx from "clsx";
 import moment from "moment";
 import MobileMenu from "./MobileMenu";
-import {useEffect, useState} from "react";
-import {Type} from "@/interfaces/user";
-import {USER_TYPE_LABELS} from "@/resources/user";
+import { useEffect, useState } from "react";
+import { Type } from "@/interfaces/user";
+import { USER_TYPE_LABELS } from "@/resources/user";
 import useGroups from "@/hooks/useGroups";
-import {isUserFromCorporate} from "@/utils/groups";
+import { isUserFromCorporate } from "@/utils/groups";
+import Button from "./Low/Button";
+import Modal from "./Modal";
+import Input from "./Low/Input";
+import TicketSubmission from "./High/TicketSubmission";
 
 interface Props {
-	user: User;
-	navDisabled?: boolean;
-	focusMode?: boolean;
-	onFocusLayerMouseEnter?: () => void;
-	path: string;
+  user: User;
+  navDisabled?: boolean;
+  focusMode?: boolean;
+  onFocusLayerMouseEnter?: () => void;
+  path: string;
 }
 
 /* eslint-disable @next/next/no-img-element */
-export default function Navbar({user, path, navDisabled = false, focusMode = false, onFocusLayerMouseEnter}: Props) {
-	const [isMenuOpen, setIsMenuOpen] = useState(false);
-	const [disablePaymentPage, setDisablePaymentPage] = useState(true);
+export default function Navbar({
+  user,
+  path,
+  navDisabled = false,
+  focusMode = false,
+  onFocusLayerMouseEnter,
+}: Props) {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [disablePaymentPage, setDisablePaymentPage] = useState(true);
+  const [isTicketOpen, setIsTicketOpen] = useState(false);
 
-	const disableNavigation = preventNavigation(navDisabled, focusMode);
-	const router = useRouter();
+  const disableNavigation = preventNavigation(navDisabled, focusMode);
 
-	const expirationDateColor = (date: Date) => {
-		const momentDate = moment(date);
-		const today = moment(new Date());
+  const expirationDateColor = (date: Date) => {
+    const momentDate = moment(date);
+    const today = moment(new Date());
 
-		if (today.add(1, "days").isAfter(momentDate)) return "!bg-mti-red-ultralight border-mti-red-light";
-		if (today.add(3, "days").isAfter(momentDate)) return "!bg-mti-rose-ultralight border-mti-rose-light";
-		if (today.add(7, "days").isAfter(momentDate)) return "!bg-mti-orange-ultralight border-mti-orange-light";
-	};
+    if (today.add(1, "days").isAfter(momentDate))
+      return "!bg-mti-red-ultralight border-mti-red-light";
+    if (today.add(3, "days").isAfter(momentDate))
+      return "!bg-mti-rose-ultralight border-mti-rose-light";
+    if (today.add(7, "days").isAfter(momentDate))
+      return "!bg-mti-orange-ultralight border-mti-orange-light";
+  };
 
-	const showExpirationDate = () => {
-		if (!user.subscriptionExpirationDate) return false;
+  const showExpirationDate = () => {
+    if (!user.subscriptionExpirationDate) return false;
 
-		const momentDate = moment(user.subscriptionExpirationDate);
-		const today = moment(new Date());
+    const momentDate = moment(user.subscriptionExpirationDate);
+    const today = moment(new Date());
 
-		return today.add(7, "days").isAfter(momentDate);
-	};
+    return today.add(7, "days").isAfter(momentDate);
+  };
 
-	useEffect(() => {
-		if (user.type !== "student" && user.type !== "teacher") setDisablePaymentPage(false);
-		isUserFromCorporate(user.id).then((result) => setDisablePaymentPage(result));
-	}, [user]);
+  useEffect(() => {
+    if (user.type !== "student" && user.type !== "teacher")
+      setDisablePaymentPage(false);
+    isUserFromCorporate(user.id).then((result) =>
+      setDisablePaymentPage(result),
+    );
+  }, [user]);
 
-	return (
-		<>
-			{user && <MobileMenu path={path} isOpen={isMenuOpen} onClose={() => setIsMenuOpen(false)} user={user} />}
-			<header className="w-full bg-transparent py-2 md:py-4 -md:justify-between md:gap-12 flex items-center relative -md:px-4">
-				<Link href={disableNavigation ? "" : "/"} className=" md:px-8 flex gap-8 items-center">
-					<img src="/logo.png" alt="EnCoach's Logo" className="w-8 md:w-12" />
-					<h1 className="font-bold text-2xl w-1/6 -md:hidden">EnCoach</h1>
-				</Link>
-				<div className="flex justify-end -md:items-center gap-4 md:w-5/6 md:mr-8">
-					{showExpirationDate() && (
-						<Link
-							href={disablePaymentPage ? "/payment" : ""}
-							data-tip="Expiry date"
-							className={clsx(
-								"py-2 px-6 w-fit flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
-								"transition duration-300 ease-in-out tooltip tooltip-bottom",
-								!user.subscriptionExpirationDate
-									? "bg-mti-green-ultralight border-mti-green-light"
-									: expirationDateColor(user.subscriptionExpirationDate),
-								"bg-white border-mti-gray-platinum",
-							)}>
-							{!user.subscriptionExpirationDate && "Unlimited"}
-							{user.subscriptionExpirationDate && moment(user.subscriptionExpirationDate).format("DD/MM/YYYY")}
-						</Link>
-					)}
-					<Link href={disableNavigation ? "" : "/profile"} className="flex gap-6 items-center justify-end -md:hidden">
-						<img src={user.profilePicture} alt={user.name} className="w-10 h-10 rounded-full object-cover" />
-						<span className="text-right -md:hidden">
-							{user.type === "corporate" ? `${user.corporateInformation?.companyInformation.name} |` : ""} {user.name} |{" "}
-							{USER_TYPE_LABELS[user.type]}
-						</span>
-					</Link>
-					<div className="cursor-pointer md:hidden" onClick={() => setIsMenuOpen(true)}>
-						<BsList className="text-mti-purple-light w-8 h-8" />
-					</div>
-				</div>
-				{focusMode && <FocusLayer onFocusLayerMouseEnter={onFocusLayerMouseEnter} />}
-			</header>
-		</>
-	);
+  return (
+    <>
+      <Modal
+        isOpen={isTicketOpen}
+        onClose={() => setIsTicketOpen(false)}
+        title="Submit a ticket"
+      >
+        <TicketSubmission
+          user={user}
+          page={window.location.href}
+          onClose={() => setIsTicketOpen(false)}
+        />
+      </Modal>
+
+      {user && (
+        <MobileMenu
+          path={path}
+          isOpen={isMenuOpen}
+          onClose={() => setIsMenuOpen(false)}
+          user={user}
+        />
+      )}
+      <header className="-md:justify-between -md:px-4 relative flex w-full items-center bg-transparent py-2 md:gap-12 md:py-4">
+        <Link
+          href={disableNavigation ? "" : "/"}
+          className=" flex items-center gap-8 md:px-8"
+        >
+          <img src="/logo.png" alt="EnCoach's Logo" className="w-8 md:w-12" />
+          <h1 className="-md:hidden w-1/6 text-2xl font-bold">EnCoach</h1>
+        </Link>
+        <div className="flex items-center justify-end gap-4 md:mr-8 md:w-5/6">
+          {/* OPEN TICKET SYSTEM */}
+          <button
+            className={clsx(
+              "border-mti-purple-light tooltip tooltip-bottom flex h-8 w-8 flex-col items-center justify-center rounded-full border p-1",
+              "hover:bg-mti-purple-light transition duration-300 ease-in-out hover:text-white",
+            )}
+            data-tip="Submit a help/feedback ticket"
+            onClick={() => setIsTicketOpen(true)}
+          >
+            <BsQuestionCircleFill />
+          </button>
+
+          {showExpirationDate() && (
+            <Link
+              href={disablePaymentPage ? "/payment" : ""}
+              data-tip="Expiry date"
+              className={clsx(
+                "flex w-fit cursor-pointer justify-center rounded-full border px-6 py-2 text-sm font-normal focus:outline-none",
+                "tooltip tooltip-bottom transition duration-300 ease-in-out",
+                !user.subscriptionExpirationDate
+                  ? "bg-mti-green-ultralight border-mti-green-light"
+                  : expirationDateColor(user.subscriptionExpirationDate),
+                "border-mti-gray-platinum bg-white",
+              )}
+            >
+              {!user.subscriptionExpirationDate && "Unlimited"}
+              {user.subscriptionExpirationDate &&
+                moment(user.subscriptionExpirationDate).format("DD/MM/YYYY")}
+            </Link>
+          )}
+          <Link
+            href={disableNavigation ? "" : "/profile"}
+            className="-md:hidden flex items-center justify-end gap-6"
+          >
+            <img
+              src={user.profilePicture}
+              alt={user.name}
+              className="h-10 w-10 rounded-full object-cover"
+            />
+            <span className="-md:hidden text-right">
+              {user.type === "corporate"
+                ? `${user.corporateInformation?.companyInformation.name} |`
+                : ""}{" "}
+              {user.name} | {USER_TYPE_LABELS[user.type]}
+            </span>
+          </Link>
+          <div
+            className="cursor-pointer md:hidden"
+            onClick={() => setIsMenuOpen(true)}
+          >
+            <BsList className="text-mti-purple-light h-8 w-8" />
+          </div>
+        </div>
+        {focusMode && (
+          <FocusLayer onFocusLayerMouseEnter={onFocusLayerMouseEnter} />
+        )}
+      </header>
+    </>
+  );
 }
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 19712a67..849f9884 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -1,175 +1,295 @@
 import clsx from "clsx";
-import {IconType} from "react-icons";
-import {MdSpaceDashboard} from "react-icons/md";
+import { IconType } from "react-icons";
+import { MdSpaceDashboard } from "react-icons/md";
 import {
-	BsFileEarmarkText,
-	BsClockHistory,
-	BsPencil,
-	BsGraphUp,
-	BsChevronBarRight,
-	BsChevronBarLeft,
-	BsShieldFill,
-	BsCloudFill,
-	BsCurrencyDollar,
+  BsFileEarmarkText,
+  BsClockHistory,
+  BsPencil,
+  BsGraphUp,
+  BsChevronBarRight,
+  BsChevronBarLeft,
+  BsShieldFill,
+  BsCloudFill,
+  BsCurrencyDollar,
+  BsClipboardData,
 } from "react-icons/bs";
-import {RiLogoutBoxFill} from "react-icons/ri";
-import {SlPencil} from "react-icons/sl";
-import {FaAward} from "react-icons/fa";
+import { RiLogoutBoxFill } from "react-icons/ri";
+import { SlPencil } from "react-icons/sl";
+import { FaAward } from "react-icons/fa";
 import Link from "next/link";
-import {useRouter} from "next/router";
+import { useRouter } from "next/router";
 import axios from "axios";
 import FocusLayer from "@/components/FocusLayer";
-import {preventNavigation} from "@/utils/navigation.disabled";
-import {useState} from "react";
+import { preventNavigation } from "@/utils/navigation.disabled";
+import { useState } from "react";
 import usePreferencesStore from "@/stores/preferencesStore";
-import {Type} from "@/interfaces/user";
+import { Type } from "@/interfaces/user";
 interface Props {
-	path: string;
-	navDisabled?: boolean;
-	focusMode?: boolean;
-	onFocusLayerMouseEnter?: () => void;
-	className?: string;
-	userType?: Type;
+  path: string;
+  navDisabled?: boolean;
+  focusMode?: boolean;
+  onFocusLayerMouseEnter?: () => void;
+  className?: string;
+  userType?: Type;
 }
 
 interface NavProps {
-	Icon: IconType;
-	label: string;
-	path: string;
-	keyPath: string;
-	disabled?: boolean;
-	isMinimized?: boolean;
+  Icon: IconType;
+  label: string;
+  path: string;
+  keyPath: string;
+  disabled?: boolean;
+  isMinimized?: boolean;
 }
 
-const Nav = ({Icon, label, path, keyPath, disabled = false, isMinimized = false}: NavProps) => (
-	<Link
-		href={!disabled ? keyPath : ""}
-		className={clsx(
-			"p-4 rounded-full flex gap-4 items-center text-gray-500 hover:text-white",
-			"transition-all duration-300 ease-in-out",
-			disabled ? "hover:bg-mti-gray-dim cursor-not-allowed" : "hover:bg-mti-purple-light cursor-pointer",
-			path === keyPath && "bg-mti-purple-light text-white",
-			isMinimized ? "w-fit" : "w-full min-w-[200px] 2xl:min-w-[220px] px-8",
-		)}>
-		<Icon size={24} />
-		{!isMinimized && <span className="text-lg font-semibold">{label}</span>}
-	</Link>
+const Nav = ({
+  Icon,
+  label,
+  path,
+  keyPath,
+  disabled = false,
+  isMinimized = false,
+}: NavProps) => (
+  <Link
+    href={!disabled ? keyPath : ""}
+    className={clsx(
+      "flex items-center gap-4 rounded-full p-4 text-gray-500 hover:text-white",
+      "transition-all duration-300 ease-in-out",
+      disabled
+        ? "hover:bg-mti-gray-dim cursor-not-allowed"
+        : "hover:bg-mti-purple-light cursor-pointer",
+      path === keyPath && "bg-mti-purple-light text-white",
+      isMinimized ? "w-fit" : "w-full min-w-[200px] px-8 2xl:min-w-[220px]",
+    )}
+  >
+    <Icon size={24} />
+    {!isMinimized && <span className="text-lg font-semibold">{label}</span>}
+  </Link>
 );
 
-export default function Sidebar({path, navDisabled = false, focusMode = false, userType, onFocusLayerMouseEnter, className}: Props) {
-	const router = useRouter();
+export default function Sidebar({
+  path,
+  navDisabled = false,
+  focusMode = false,
+  userType,
+  onFocusLayerMouseEnter,
+  className,
+}: Props) {
+  const router = useRouter();
 
-	const [isMinimized, toggleMinimize] = usePreferencesStore((state) => [state.isSidebarMinimized, state.toggleSidebarMinimized]);
+  const [isMinimized, toggleMinimize] = usePreferencesStore((state) => [
+    state.isSidebarMinimized,
+    state.toggleSidebarMinimized,
+  ]);
 
-	const logout = async () => {
-		axios.post("/api/logout").finally(() => {
-			setTimeout(() => router.reload(), 500);
-		});
-	};
+  const logout = async () => {
+    axios.post("/api/logout").finally(() => {
+      setTimeout(() => router.reload(), 500);
+    });
+  };
 
-	const disableNavigation = preventNavigation(navDisabled, focusMode);
+  const disableNavigation = preventNavigation(navDisabled, focusMode);
 
-	return (
-		<section
-			className={clsx(
-				"h-full flex bg-transparent flex-col justify-between px-4 py-4 pb-8 relative",
-				isMinimized ? "w-fit" : "w-1/6 -xl:w-fit",
-				className,
-			)}>
-			<div className="xl:flex -xl:hidden flex-col gap-3">
-				<Nav disabled={disableNavigation} Icon={MdSpaceDashboard} label="Dashboard" path={path} keyPath="/" isMinimized={isMinimized} />
-				{(userType === "student" || userType === "teacher" || userType === "developer") && (
-					<>
-						<Nav
-							disabled={disableNavigation}
-							Icon={BsFileEarmarkText}
-							label="Exams"
-							path={path}
-							keyPath="/exam"
-							isMinimized={isMinimized}
-						/>
-						<Nav
-							disabled={disableNavigation}
-							Icon={BsPencil}
-							label="Exercises"
-							path={path}
-							keyPath="/exercises"
-							isMinimized={isMinimized}
-						/>
-					</>
-				)}
-				<Nav disabled={disableNavigation} Icon={BsGraphUp} label="Stats" path={path} keyPath="/stats" isMinimized={isMinimized} />
-				<Nav disabled={disableNavigation} Icon={BsClockHistory} label="Record" path={path} keyPath="/record" isMinimized={isMinimized} />
-				{["admin", "developer", "agent", "corporate"].includes(userType || "") && (
-					<Nav
-						disabled={disableNavigation}
-						Icon={BsCurrencyDollar}
-						label="Payment Record"
-						path={path}
-						keyPath="/payment-record"
-						isMinimized={isMinimized}
-					/>
-				)}
-				{["admin", "developer", "corporate", "teacher"].includes(userType || "") && (
-					<Nav
-						disabled={disableNavigation}
-						Icon={BsShieldFill}
-						label="Settings"
-						path={path}
-						keyPath="/settings"
-						isMinimized={isMinimized}
-					/>
-				)}
-				{userType === "developer" && (
-					<Nav
-						disabled={disableNavigation}
-						Icon={BsCloudFill}
-						label="Generation"
-						path={path}
-						keyPath="/generation"
-						isMinimized={isMinimized}
-					/>
-				)}
-			</div>
-			<div className="xl:hidden -xl:flex flex-col gap-3">
-				<Nav disabled={disableNavigation} Icon={MdSpaceDashboard} label="Dashboard" path={path} keyPath="/" isMinimized={true} />
-				<Nav disabled={disableNavigation} Icon={BsFileEarmarkText} label="Exams" path={path} keyPath="/exam" isMinimized={true} />
-				<Nav disabled={disableNavigation} Icon={BsPencil} label="Exercises" path={path} keyPath="/exercises" isMinimized={true} />
-				<Nav disabled={disableNavigation} Icon={BsGraphUp} label="Stats" path={path} keyPath="/stats" isMinimized={true} />
-				<Nav disabled={disableNavigation} Icon={BsClockHistory} label="Record" path={path} keyPath="/record" isMinimized={true} />
-				{userType !== "student" && (
-					<Nav disabled={disableNavigation} Icon={BsShieldFill} label="Settings" path={path} keyPath="/settings" isMinimized={true} />
-				)}
-				{userType === "developer" && (
-					<Nav disabled={disableNavigation} Icon={BsCloudFill} label="Generation" path={path} keyPath="/generation" isMinimized={true} />
-				)}
-			</div>
+  return (
+    <section
+      className={clsx(
+        "relative flex h-full flex-col justify-between bg-transparent px-4 py-4 pb-8",
+        isMinimized ? "w-fit" : "-xl:w-fit w-1/6",
+        className,
+      )}
+    >
+      <div className="-xl:hidden flex-col gap-3 xl:flex">
+        <Nav
+          disabled={disableNavigation}
+          Icon={MdSpaceDashboard}
+          label="Dashboard"
+          path={path}
+          keyPath="/"
+          isMinimized={isMinimized}
+        />
+        {(userType === "student" ||
+          userType === "teacher" ||
+          userType === "developer") && (
+          <>
+            <Nav
+              disabled={disableNavigation}
+              Icon={BsFileEarmarkText}
+              label="Exams"
+              path={path}
+              keyPath="/exam"
+              isMinimized={isMinimized}
+            />
+            <Nav
+              disabled={disableNavigation}
+              Icon={BsPencil}
+              label="Exercises"
+              path={path}
+              keyPath="/exercises"
+              isMinimized={isMinimized}
+            />
+          </>
+        )}
+        <Nav
+          disabled={disableNavigation}
+          Icon={BsGraphUp}
+          label="Stats"
+          path={path}
+          keyPath="/stats"
+          isMinimized={isMinimized}
+        />
+        <Nav
+          disabled={disableNavigation}
+          Icon={BsClockHistory}
+          label="Record"
+          path={path}
+          keyPath="/record"
+          isMinimized={isMinimized}
+        />
+        {["admin", "developer", "agent", "corporate"].includes(
+          userType || "",
+        ) && (
+          <Nav
+            disabled={disableNavigation}
+            Icon={BsCurrencyDollar}
+            label="Payment Record"
+            path={path}
+            keyPath="/payment-record"
+            isMinimized={isMinimized}
+          />
+        )}
+        {["admin", "developer", "corporate", "teacher"].includes(
+          userType || "",
+        ) && (
+          <Nav
+            disabled={disableNavigation}
+            Icon={BsShieldFill}
+            label="Settings"
+            path={path}
+            keyPath="/settings"
+            isMinimized={isMinimized}
+          />
+        )}
+        {["admin", "developer"].includes(userType || "") && (
+          <Nav
+            disabled={disableNavigation}
+            Icon={BsClipboardData}
+            label="Tickets"
+            path={path}
+            keyPath="/tickets"
+            isMinimized={isMinimized}
+          />
+        )}
+        {userType === "developer" && (
+          <Nav
+            disabled={disableNavigation}
+            Icon={BsCloudFill}
+            label="Generation"
+            path={path}
+            keyPath="/generation"
+            isMinimized={isMinimized}
+          />
+        )}
+      </div>
+      <div className="-xl:flex flex-col gap-3 xl:hidden">
+        <Nav
+          disabled={disableNavigation}
+          Icon={MdSpaceDashboard}
+          label="Dashboard"
+          path={path}
+          keyPath="/"
+          isMinimized={true}
+        />
+        <Nav
+          disabled={disableNavigation}
+          Icon={BsFileEarmarkText}
+          label="Exams"
+          path={path}
+          keyPath="/exam"
+          isMinimized={true}
+        />
+        <Nav
+          disabled={disableNavigation}
+          Icon={BsPencil}
+          label="Exercises"
+          path={path}
+          keyPath="/exercises"
+          isMinimized={true}
+        />
+        <Nav
+          disabled={disableNavigation}
+          Icon={BsGraphUp}
+          label="Stats"
+          path={path}
+          keyPath="/stats"
+          isMinimized={true}
+        />
+        <Nav
+          disabled={disableNavigation}
+          Icon={BsClockHistory}
+          label="Record"
+          path={path}
+          keyPath="/record"
+          isMinimized={true}
+        />
+        {userType !== "student" && (
+          <Nav
+            disabled={disableNavigation}
+            Icon={BsShieldFill}
+            label="Settings"
+            path={path}
+            keyPath="/settings"
+            isMinimized={true}
+          />
+        )}
+        {userType === "developer" && (
+          <Nav
+            disabled={disableNavigation}
+            Icon={BsCloudFill}
+            label="Generation"
+            path={path}
+            keyPath="/generation"
+            isMinimized={true}
+          />
+        )}
+      </div>
 
-			<div className="flex flex-col gap-0 bottom-12 fixed">
-				<div
-					role="button"
-					tabIndex={1}
-					onClick={toggleMinimize}
-					className={clsx(
-						"p-4 rounded-full flex gap-4 items-center cursor-pointer text-black hover:text-mti-rose -xl:hidden transition duration-300 ease-in-out",
-						isMinimized ? "w-fit" : "w-full min-w-[250px] px-8",
-					)}>
-					{isMinimized ? <BsChevronBarRight size={24} /> : <BsChevronBarLeft size={24} />}
-					{!isMinimized && <span className="text-lg font-medium">Minimize</span>}
-				</div>
-				<div
-					role="button"
-					tabIndex={1}
-					onClick={focusMode ? () => {} : logout}
-					className={clsx(
-						"p-4 rounded-full flex gap-4 items-center cursor-pointer text-black hover:text-mti-rose transition duration-300 ease-in-out",
-						isMinimized ? "w-fit" : "w-full min-w-[250px] px-8",
-					)}>
-					<RiLogoutBoxFill size={24} />
-					{!isMinimized && <span className="text-lg font-medium -xl:hidden">Log Out</span>}
-				</div>
-			</div>
-			{focusMode && <FocusLayer onFocusLayerMouseEnter={onFocusLayerMouseEnter} />}
-		</section>
-	);
+      <div className="fixed bottom-12 flex flex-col gap-0">
+        <div
+          role="button"
+          tabIndex={1}
+          onClick={toggleMinimize}
+          className={clsx(
+            "hover:text-mti-rose -xl:hidden flex cursor-pointer items-center gap-4 rounded-full p-4 text-black transition duration-300 ease-in-out",
+            isMinimized ? "w-fit" : "w-full min-w-[250px] px-8",
+          )}
+        >
+          {isMinimized ? (
+            <BsChevronBarRight size={24} />
+          ) : (
+            <BsChevronBarLeft size={24} />
+          )}
+          {!isMinimized && (
+            <span className="text-lg font-medium">Minimize</span>
+          )}
+        </div>
+        <div
+          role="button"
+          tabIndex={1}
+          onClick={focusMode ? () => {} : logout}
+          className={clsx(
+            "hover:text-mti-rose flex cursor-pointer items-center gap-4 rounded-full p-4 text-black transition duration-300 ease-in-out",
+            isMinimized ? "w-fit" : "w-full min-w-[250px] px-8",
+          )}
+        >
+          <RiLogoutBoxFill size={24} />
+          {!isMinimized && (
+            <span className="-xl:hidden text-lg font-medium">Log Out</span>
+          )}
+        </div>
+      </div>
+      {focusMode && (
+        <FocusLayer onFocusLayerMouseEnter={onFocusLayerMouseEnter} />
+      )}
+    </section>
+  );
 }
diff --git a/src/dashboards/Student.tsx b/src/dashboards/Student.tsx
index 75d4bd89..780330f9 100644
--- a/src/dashboards/Student.tsx
+++ b/src/dashboards/Student.tsx
@@ -3,228 +3,415 @@ import ProgressBar from "@/components/Low/ProgressBar";
 import PayPalPayment from "@/components/PayPalPayment";
 import ProfileSummary from "@/components/ProfileSummary";
 import useAssignments from "@/hooks/useAssignments";
+import useInvites from "@/hooks/useInvites";
 import useStats from "@/hooks/useStats";
-import {Assignment} from "@/interfaces/results";
-import {CorporateUser, User} from "@/interfaces/user";
+import useUsers from "@/hooks/useUsers";
+import { Invite } from "@/interfaces/invite";
+import { Assignment } from "@/interfaces/results";
+import { CorporateUser, User } from "@/interfaces/user";
 import useExamStore from "@/stores/examStore";
-import {getExamById} from "@/utils/exams";
-import {getUserCorporate} from "@/utils/groups";
-import {MODULE_ARRAY, sortByModule, sortByModuleName} from "@/utils/moduleUtils";
-import {averageScore, groupBySession} from "@/utils/stats";
-import {CreateOrderActions, CreateOrderData, OnApproveActions, OnApproveData, OrderResponseBody} from "@paypal/paypal-js";
-import {PayPalButtons} from "@paypal/react-paypal-js";
+import { getExamById } from "@/utils/exams";
+import { getUserCorporate } from "@/utils/groups";
+import {
+  MODULE_ARRAY,
+  sortByModule,
+  sortByModuleName,
+} from "@/utils/moduleUtils";
+import { averageScore, groupBySession } from "@/utils/stats";
+import {
+  CreateOrderActions,
+  CreateOrderData,
+  OnApproveActions,
+  OnApproveData,
+  OrderResponseBody,
+} from "@paypal/paypal-js";
+import { PayPalButtons } from "@paypal/react-paypal-js";
 import axios from "axios";
 import clsx from "clsx";
-import {capitalize} from "lodash";
+import { capitalize } from "lodash";
 import moment from "moment";
 import Link from "next/link";
-import {useRouter} from "next/router";
-import {useEffect, useState} from "react";
-import {BsArrowRepeat, BsBook, BsClipboard, BsFileEarmarkText, BsHeadphones, BsMegaphone, BsPen, BsPencil, BsStar} from "react-icons/bs";
-import {toast} from "react-toastify";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+import {
+  BsArrowRepeat,
+  BsBook,
+  BsClipboard,
+  BsFileEarmarkText,
+  BsHeadphones,
+  BsMegaphone,
+  BsPen,
+  BsPencil,
+  BsStar,
+} from "react-icons/bs";
+import { toast } from "react-toastify";
 
 interface Props {
-	user: User;
+  user: User;
 }
 
-export default function StudentDashboard({user}: Props) {
-	const [corporateUserToShow, setCorporateUserToShow] = useState<CorporateUser>();
+export default function StudentDashboard({ user }: Props) {
+  const [corporateUserToShow, setCorporateUserToShow] =
+    useState<CorporateUser>();
 
-	const {stats} = useStats(user.id);
-	const {assignments, isLoading: isAssignmentsLoading, reload: reloadAssignments} = useAssignments({assignees: user?.id});
+  const { stats } = useStats(user.id);
+  const { users } = useUsers();
+  const {
+    assignments,
+    isLoading: isAssignmentsLoading,
+    reload: reloadAssignments,
+  } = useAssignments({ assignees: user?.id });
+  const {
+    invites,
+    isLoading: isInvitesLoading,
+    reload: reloadInvites,
+  } = useInvites({ to: user.id });
 
-	const router = useRouter();
+  const router = useRouter();
 
-	const setExams = useExamStore((state) => state.setExams);
-	const setShowSolutions = useExamStore((state) => state.setShowSolutions);
-	const setUserSolutions = useExamStore((state) => state.setUserSolutions);
-	const setSelectedModules = useExamStore((state) => state.setSelectedModules);
-	const setAssignment = useExamStore((state) => state.setAssignment);
+  const setExams = useExamStore((state) => state.setExams);
+  const setShowSolutions = useExamStore((state) => state.setShowSolutions);
+  const setUserSolutions = useExamStore((state) => state.setUserSolutions);
+  const setSelectedModules = useExamStore((state) => state.setSelectedModules);
+  const setAssignment = useExamStore((state) => state.setAssignment);
 
-	useEffect(() => {
-		getUserCorporate(user.id).then(setCorporateUserToShow);
-	}, [user]);
+  useEffect(() => {
+    getUserCorporate(user.id).then(setCorporateUserToShow);
+  }, [user]);
 
-	const startAssignment = (assignment: Assignment) => {
-		const examPromises = assignment.exams.filter((e) => e.assignee === user.id).map((e) => getExamById(e.module, e.id));
+  const startAssignment = (assignment: Assignment) => {
+    const examPromises = assignment.exams
+      .filter((e) => e.assignee === user.id)
+      .map((e) => getExamById(e.module, e.id));
 
-		Promise.all(examPromises).then((exams) => {
-			if (exams.every((x) => !!x)) {
-				setUserSolutions([]);
-				setShowSolutions(false);
-				setExams(exams.map((x) => x!).sort(sortByModule));
-				setSelectedModules(
-					exams
-						.map((x) => x!)
-						.sort(sortByModule)
-						.map((x) => x!.module),
-				);
-				setAssignment(assignment);
+    Promise.all(examPromises).then((exams) => {
+      if (exams.every((x) => !!x)) {
+        setUserSolutions([]);
+        setShowSolutions(false);
+        setExams(exams.map((x) => x!).sort(sortByModule));
+        setSelectedModules(
+          exams
+            .map((x) => x!)
+            .sort(sortByModule)
+            .map((x) => x!.module),
+        );
+        setAssignment(assignment);
 
-				router.push("/exercises");
-			}
-		});
-	};
+        router.push("/exercises");
+      }
+    });
+  };
 
-	return (
-		<>
-			{corporateUserToShow && (
-				<div className="absolute top-4 right-4 bg-neutral-200 px-2 rounded-lg py-1">
-					Linked to: <b>{corporateUserToShow?.corporateInformation?.companyInformation.name || corporateUserToShow.name}</b>
-				</div>
-			)}
-			<ProfileSummary
-				user={user}
-				items={[
-					{
-						icon: <BsFileEarmarkText className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
-						value: Object.keys(groupBySession(stats)).length,
-						label: "Exams",
-					},
-					{
-						icon: <BsPencil className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
-						value: stats.length,
-						label: "Exercises",
-					},
-					{
-						icon: <BsStar className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
-						value: `${stats.length > 0 ? averageScore(stats) : 0}%`,
-						label: "Average Score",
-					},
-				]}
-			/>
+  const InviteCard = (invite: Invite) => {
+    const [isLoading, setIsLoading] = useState(false);
 
-			<section className="flex flex-col gap-1 md:gap-3">
-				<span className="font-bold text-lg">Bio</span>
-				<span className="text-mti-gray-taupe">
-					{user.bio || "Your bio will appear here, you can change it by clicking on your name in the top right corner."}
-				</span>
-			</section>
+    const inviter = users.find((u) => u.id === invite.from);
+    const name = !inviter
+      ? null
+      : inviter.type === "corporate"
+        ? inviter.corporateInformation?.companyInformation?.name || inviter.name
+        : inviter.name;
 
-			<section className="flex flex-col gap-1 md:gap-3">
-				<div className="flex gap-4 items-center">
-					<div
-						onClick={reloadAssignments}
-						className="flex gap-2 items-center text-mti-purple-light cursor-pointer hover:text-mti-purple-dark transition ease-in-out duration-300">
-						<span className="font-bold text-lg text-mti-black">Assignments</span>
-						<BsArrowRepeat className={clsx("text-xl", isAssignmentsLoading && "animate-spin")} />
-					</div>
-				</div>
-				<span className="text-mti-gray-taupe flex gap-8 overflow-x-scroll scrollbar-hide">
-					{assignments.filter((a) => moment(a.endDate).isSameOrAfter(moment())).length === 0 &&
-						"Assignments will appear here. It seems that for now there are no assignments for you."}
-					{assignments
-						.filter((a) => moment(a.endDate).isSameOrAfter(moment()))
-						.sort((a, b) => moment(a.startDate).diff(b.startDate))
-						.map((assignment) => (
-							<div
-								className={clsx(
-									"border border-mti-gray-anti-flash rounded-xl flex flex-col gap-6 p-4 min-w-[300px]",
-									assignment.results.map((r) => r.user).includes(user.id) && "border-mti-green-light",
-								)}
-								key={assignment.id}>
-								<div className="flex flex-col gap-1">
-									<h3 className="font-semibold text-xl text-mti-black/90">{assignment.name}</h3>
-									<span className="flex gap-1 justify-between">
-										<span>{moment(assignment.startDate).format("DD/MM/YY, HH:mm")}</span>
-										<span>-</span>
-										<span>{moment(assignment.endDate).format("DD/MM/YY, HH:mm")}</span>
-									</span>
-								</div>
-								<div className="flex justify-between w-full items-center">
-									<div className="grid grid-cols-2 gap-2 place-items-center justify-center w-fit min-w-[104px] -md:mt-2">
-										{assignment.exams
-											.filter((e) => e.assignee === user.id)
-											.map((e) => e.module)
-											.sort(sortByModuleName)
-											.map((module) => (
-												<div
-													key={module}
-													data-tip={capitalize(module)}
-													className={clsx(
-														"flex gap-2 items-center w-fit text-white -md:px-4 xl:px-4 md:px-2 py-2 rounded-xl tooltip",
-														module === "reading" && "bg-ielts-reading",
-														module === "listening" && "bg-ielts-listening",
-														module === "writing" && "bg-ielts-writing",
-														module === "speaking" && "bg-ielts-speaking",
-														module === "level" && "bg-ielts-level",
-													)}>
-													{module === "reading" && <BsBook className="w-4 h-4" />}
-													{module === "listening" && <BsHeadphones className="w-4 h-4" />}
-													{module === "writing" && <BsPen className="w-4 h-4" />}
-													{module === "speaking" && <BsMegaphone className="w-4 h-4" />}
-													{module === "level" && <BsClipboard className="w-4 h-4" />}
-												</div>
-											))}
-									</div>
-									{!assignment.results.map((r) => r.user).includes(user.id) && (
-										<>
-											<div
-												className="tooltip w-full md:hidden h-full flex items-center justify-end pl-8"
-												data-tip="Your screen size is too small to perform an assignment">
-												<Button
-													disabled={moment(assignment.startDate).isAfter(moment())}
-													className="w-full h-full !rounded-xl"
-													variant="outline">
-													Start
-												</Button>
-											</div>
-											<Button
-												disabled={moment(assignment.startDate).isAfter(moment())}
-												className="w-full max-w-[50%] h-full !rounded-xl -md:hidden"
-												onClick={() => startAssignment(assignment)}
-												variant="outline">
-												Start
-											</Button>
-										</>
-									)}
-									{assignment.results.map((r) => r.user).includes(user.id) && (
-										<Button
-											onClick={() => router.push("/record")}
-											color="green"
-											className="w-full max-w-[50%] h-full !rounded-xl -md:hidden"
-											variant="outline">
-											Submitted
-										</Button>
-									)}
-								</div>
-							</div>
-						))}
-				</span>
-			</section>
+    const decide = (decision: "accept" | "decline") => {
+      if (!confirm(`Are you sure you want to ${decision} this invite?`)) return;
 
-			<section className="flex flex-col gap-3">
-				<span className="font-bold text-lg">Score History</span>
-				<div className="grid -md:grid-rows-4 md:grid-cols-2 gap-6">
-					{MODULE_ARRAY.map((module) => (
-						<div className="border border-mti-gray-anti-flash rounded-xl flex flex-col gap-2 p-4" key={module}>
-							<div className="flex gap-2 md:gap-3 items-center">
-								<div className="w-8 h-8 md:w-12 md:h-12 bg-mti-gray-smoke flex items-center justify-center rounded-lg md:rounded-xl">
-									{module === "reading" && <BsBook className="text-ielts-reading w-4 h-4 md:w-5 md:h-5" />}
-									{module === "listening" && <BsHeadphones className="text-ielts-listening w-4 h-4 md:w-5 md:h-5" />}
-									{module === "writing" && <BsPen className="text-ielts-writing w-4 h-4 md:w-5 md:h-5" />}
-									{module === "speaking" && <BsMegaphone className="text-ielts-speaking w-4 h-4 md:w-5 md:h-5" />}
-									{module === "level" && <BsClipboard className="text-ielts-level w-4 h-4 md:w-5 md:h-5" />}
-								</div>
-								<div className="flex justify-between w-full">
-									<span className="font-bold md:font-extrabold text-sm">{capitalize(module)}</span>
-									<span className="text-sm font-normal text-mti-gray-dim">
-										Level {user.levels[module] || 0} / Level {user.desiredLevels[module] || 9}
-									</span>
-								</div>
-							</div>
-							<div className="md:pl-14">
-								<ProgressBar
-									color={module}
-									label=""
-									percentage={Math.round((user.levels[module] * 100) / user.desiredLevels[module])}
-									className="w-full h-2"
-								/>
-							</div>
-						</div>
-					))}
-				</div>
-			</section>
-		</>
-	);
+      setIsLoading(true);
+      axios
+        .get(`/api/invites/${decision}/${invite.id}`)
+        .then(() => {
+          toast.success(
+            `Successfully ${decision === "accept" ? "accepted" : "declined"} the invite!`,
+            { toastId: "success" },
+          );
+          reloadInvites();
+        })
+        .catch((e) => {
+          toast.success(`Something went wrong, please try again later!`, {
+            toastId: "error",
+          });
+          reloadInvites();
+        })
+        .finally(() => setIsLoading(false));
+    };
+
+    return (
+      <div className="border-mti-gray-anti-flash flex min-w-[200px] flex-col gap-6 rounded-xl border p-4 text-black">
+        <span>Invited by {name}</span>
+        <div className="flex items-center gap-2">
+          <button
+            onClick={() => decide("accept")}
+            disabled={isLoading}
+            className="bg-mti-green-ultralight hover:bg-mti-green-light w-24 rounded-lg p-2 px-4 transition duration-300 ease-in-out hover:text-white disabled:cursor-not-allowed"
+          >
+            {!isLoading && "Accept"}
+            {isLoading && (
+              <div className="flex items-center justify-center">
+                <BsArrowRepeat className="animate-spin text-white" size={25} />
+              </div>
+            )}
+          </button>
+          <button
+            onClick={() => decide("decline")}
+            disabled={isLoading}
+            className="bg-mti-red-ultralight hover:bg-mti-red-light w-24 rounded-lg p-2 px-4 transition duration-300 ease-in-out hover:text-white disabled:cursor-not-allowed"
+          >
+            {!isLoading && "Decline"}
+            {isLoading && (
+              <div className="flex items-center justify-center">
+                <BsArrowRepeat className="animate-spin text-white" size={25} />
+              </div>
+            )}
+          </button>
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <>
+      {corporateUserToShow && (
+        <div className="absolute right-4 top-4 rounded-lg bg-neutral-200 px-2 py-1">
+          Linked to:{" "}
+          <b>
+            {corporateUserToShow?.corporateInformation?.companyInformation
+              .name || corporateUserToShow.name}
+          </b>
+        </div>
+      )}
+      <ProfileSummary
+        user={user}
+        items={[
+          {
+            icon: (
+              <BsFileEarmarkText className="text-mti-red-light h-6 w-6 md:h-8 md:w-8" />
+            ),
+            value: Object.keys(groupBySession(stats)).length,
+            label: "Exams",
+          },
+          {
+            icon: (
+              <BsPencil className="text-mti-red-light h-6 w-6 md:h-8 md:w-8" />
+            ),
+            value: stats.length,
+            label: "Exercises",
+          },
+          {
+            icon: (
+              <BsStar className="text-mti-red-light h-6 w-6 md:h-8 md:w-8" />
+            ),
+            value: `${stats.length > 0 ? averageScore(stats) : 0}%`,
+            label: "Average Score",
+          },
+        ]}
+      />
+
+      <section className="flex flex-col gap-1 md:gap-3">
+        <span className="text-lg font-bold">Bio</span>
+        <span className="text-mti-gray-taupe">
+          {user.bio ||
+            "Your bio will appear here, you can change it by clicking on your name in the top right corner."}
+        </span>
+      </section>
+
+      <section className="flex flex-col gap-1 md:gap-3">
+        <div className="flex items-center gap-4">
+          <div
+            onClick={reloadAssignments}
+            className="text-mti-purple-light hover:text-mti-purple-dark flex cursor-pointer items-center gap-2 transition duration-300 ease-in-out"
+          >
+            <span className="text-mti-black text-lg font-bold">
+              Assignments
+            </span>
+            <BsArrowRepeat
+              className={clsx(
+                "text-xl",
+                isAssignmentsLoading && "animate-spin",
+              )}
+            />
+          </div>
+        </div>
+        <span className="text-mti-gray-taupe scrollbar-hide flex gap-8 overflow-x-scroll">
+          {assignments.filter((a) => moment(a.endDate).isSameOrAfter(moment()))
+            .length === 0 &&
+            "Assignments will appear here. It seems that for now there are no assignments for you."}
+          {assignments
+            .filter((a) => moment(a.endDate).isSameOrAfter(moment()))
+            .sort((a, b) => moment(a.startDate).diff(b.startDate))
+            .map((assignment) => (
+              <div
+                className={clsx(
+                  "border-mti-gray-anti-flash flex min-w-[300px] flex-col gap-6 rounded-xl border p-4",
+                  assignment.results.map((r) => r.user).includes(user.id) &&
+                    "border-mti-green-light",
+                )}
+                key={assignment.id}
+              >
+                <div className="flex flex-col gap-1">
+                  <h3 className="text-mti-black/90 text-xl font-semibold">
+                    {assignment.name}
+                  </h3>
+                  <span className="flex justify-between gap-1">
+                    <span>
+                      {moment(assignment.startDate).format("DD/MM/YY, HH:mm")}
+                    </span>
+                    <span>-</span>
+                    <span>
+                      {moment(assignment.endDate).format("DD/MM/YY, HH:mm")}
+                    </span>
+                  </span>
+                </div>
+                <div className="flex w-full items-center justify-between">
+                  <div className="-md:mt-2 grid w-fit min-w-[104px] grid-cols-2 place-items-center justify-center gap-2">
+                    {assignment.exams
+                      .filter((e) => e.assignee === user.id)
+                      .map((e) => e.module)
+                      .sort(sortByModuleName)
+                      .map((module) => (
+                        <div
+                          key={module}
+                          data-tip={capitalize(module)}
+                          className={clsx(
+                            "-md:px-4 tooltip flex w-fit items-center gap-2 rounded-xl py-2 text-white md:px-2 xl:px-4",
+                            module === "reading" && "bg-ielts-reading",
+                            module === "listening" && "bg-ielts-listening",
+                            module === "writing" && "bg-ielts-writing",
+                            module === "speaking" && "bg-ielts-speaking",
+                            module === "level" && "bg-ielts-level",
+                          )}
+                        >
+                          {module === "reading" && (
+                            <BsBook className="h-4 w-4" />
+                          )}
+                          {module === "listening" && (
+                            <BsHeadphones className="h-4 w-4" />
+                          )}
+                          {module === "writing" && (
+                            <BsPen className="h-4 w-4" />
+                          )}
+                          {module === "speaking" && (
+                            <BsMegaphone className="h-4 w-4" />
+                          )}
+                          {module === "level" && (
+                            <BsClipboard className="h-4 w-4" />
+                          )}
+                        </div>
+                      ))}
+                  </div>
+                  {!assignment.results.map((r) => r.user).includes(user.id) && (
+                    <>
+                      <div
+                        className="tooltip flex h-full w-full items-center justify-end pl-8 md:hidden"
+                        data-tip="Your screen size is too small to perform an assignment"
+                      >
+                        <Button
+                          disabled={moment(assignment.startDate).isAfter(
+                            moment(),
+                          )}
+                          className="h-full w-full !rounded-xl"
+                          variant="outline"
+                        >
+                          Start
+                        </Button>
+                      </div>
+                      <Button
+                        disabled={moment(assignment.startDate).isAfter(
+                          moment(),
+                        )}
+                        className="-md:hidden h-full w-full max-w-[50%] !rounded-xl"
+                        onClick={() => startAssignment(assignment)}
+                        variant="outline"
+                      >
+                        Start
+                      </Button>
+                    </>
+                  )}
+                  {assignment.results.map((r) => r.user).includes(user.id) && (
+                    <Button
+                      onClick={() => router.push("/record")}
+                      color="green"
+                      className="-md:hidden h-full w-full max-w-[50%] !rounded-xl"
+                      variant="outline"
+                    >
+                      Submitted
+                    </Button>
+                  )}
+                </div>
+              </div>
+            ))}
+        </span>
+      </section>
+
+      {invites.length > 0 && (
+        <section className="flex flex-col gap-1 md:gap-3">
+          <div className="flex items-center gap-4">
+            <div
+              onClick={reloadInvites}
+              className="text-mti-purple-light hover:text-mti-purple-dark flex cursor-pointer items-center gap-2 transition duration-300 ease-in-out"
+            >
+              <span className="text-mti-black text-lg font-bold">Invites</span>
+              <BsArrowRepeat
+                className={clsx("text-xl", isInvitesLoading && "animate-spin")}
+              />
+            </div>
+          </div>
+          <span className="text-mti-gray-taupe scrollbar-hide flex gap-8 overflow-x-scroll">
+            {invites.map((invite) => (
+              <InviteCard key={invite.id} {...invite} />
+            ))}
+          </span>
+        </section>
+      )}
+
+      <section className="flex flex-col gap-3">
+        <span className="text-lg font-bold">Score History</span>
+        <div className="-md:grid-rows-4 grid gap-6 md:grid-cols-2">
+          {MODULE_ARRAY.map((module) => (
+            <div
+              className="border-mti-gray-anti-flash flex flex-col gap-2 rounded-xl border p-4"
+              key={module}
+            >
+              <div className="flex items-center gap-2 md:gap-3">
+                <div className="bg-mti-gray-smoke flex h-8 w-8 items-center justify-center rounded-lg md:h-12 md:w-12 md:rounded-xl">
+                  {module === "reading" && (
+                    <BsBook className="text-ielts-reading h-4 w-4 md:h-5 md:w-5" />
+                  )}
+                  {module === "listening" && (
+                    <BsHeadphones className="text-ielts-listening h-4 w-4 md:h-5 md:w-5" />
+                  )}
+                  {module === "writing" && (
+                    <BsPen className="text-ielts-writing h-4 w-4 md:h-5 md:w-5" />
+                  )}
+                  {module === "speaking" && (
+                    <BsMegaphone className="text-ielts-speaking h-4 w-4 md:h-5 md:w-5" />
+                  )}
+                  {module === "level" && (
+                    <BsClipboard className="text-ielts-level h-4 w-4 md:h-5 md:w-5" />
+                  )}
+                </div>
+                <div className="flex w-full justify-between">
+                  <span className="text-sm font-bold md:font-extrabold">
+                    {capitalize(module)}
+                  </span>
+                  <span className="text-mti-gray-dim text-sm font-normal">
+                    Level {user.levels[module] || 0} / Level{" "}
+                    {user.desiredLevels[module] || 9}
+                  </span>
+                </div>
+              </div>
+              <div className="md:pl-14">
+                <ProgressBar
+                  color={module}
+                  label=""
+                  percentage={Math.round(
+                    (user.levels[module] * 100) / user.desiredLevels[module],
+                  )}
+                  className="h-2 w-full"
+                />
+              </div>
+            </div>
+          ))}
+        </div>
+      </section>
+    </>
+  );
 }
diff --git a/src/email/templates/receivedInvite.handlebars b/src/email/templates/receivedInvite.handlebars
new file mode 100644
index 00000000..69f26208
--- /dev/null
+++ b/src/email/templates/receivedInvite.handlebars
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
+</head>
+<div style="background-color: #ffffff; color: #353338;"
+  class="h-full min-h-screen w-full flex flex-col p-8 gap-16 text-base">
+  <img src="/logo_title.png" class="w-48 h-48 self-center" />
+  <div>
+    <span>Hello {{name}},</span>
+    <br/>
+    <br/>
+    <span>You have been invited to join {{corporateName}}'s group!</span>
+    <br />
+    <br/>
+    <span>Please access the platform to accept or decline the invite.</span>
+  </div>
+  <br />
+  <br />
+  <div>
+    <span>Thanks, <br /> Your EnCoach team</span>
+  </div>
+</div>
+
+</html>
diff --git a/src/email/templates/respondedInvite.handlebars b/src/email/templates/respondedInvite.handlebars
new file mode 100644
index 00000000..e34581a7
--- /dev/null
+++ b/src/email/templates/respondedInvite.handlebars
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
+</head>
+<div style="background-color: #ffffff; color: #353338;"
+  class="h-full min-h-screen w-full flex flex-col p-8 gap-16 text-base">
+  <img src="/logo_title.png" class="w-48 h-48 self-center" />
+  <div>
+    <span>Hello {{corporateName}},</span>
+    <br />
+    <br />
+    <span>{{name}} has decided to {{decision}} your invite!</span>
+  </div>
+  <br />
+  <br />
+  <div>
+    <span>Thanks, <br /> Your EnCoach team</span>
+  </div>
+</div>
+
+</html>
diff --git a/src/email/templates/submittedFeedback.handlebars b/src/email/templates/submittedFeedback.handlebars
new file mode 100644
index 00000000..4bbd94b2
--- /dev/null
+++ b/src/email/templates/submittedFeedback.handlebars
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
+</head>
+<div style="background-color: #ffffff; color: #353338;"
+  class="h-full min-h-screen w-full flex flex-col p-8 gap-16 text-base">
+  <img src="/logo_title.png" class="w-48 h-48 self-center" />
+  <div>
+    <span>Thank you for your ticket submission!</span>
+    <br/>
+    <span>Here is the ticket's information:</span>
+    <br/>
+    <br/>
+    <span><b>ID:</b> {{id}}</span><br/>
+    <span><b>Subject:</b> {{subject}}</span><br/>
+    <span><b>Reporter:</b> {{reporter.name}} - {{reporter.email}}</span><br/>
+    <span><b>Date:</b> {{date}}</span><br/>
+    <span><b>Type:</b> {{type}}</span><br/>
+    <span><b>Page:</b> {{reportedFrom}}</span>
+    <br/>
+    <br/>
+    <span><b>Description:</b> {{description}}</span><br/>
+  </div>
+  <br />
+  <br />
+  <div>
+    <span>Thanks, <br /> Your EnCoach team</span>
+  </div>
+</div>
+
+</html>
diff --git a/src/hooks/useInvites.tsx b/src/hooks/useInvites.tsx
new file mode 100644
index 00000000..4f6ea92f
--- /dev/null
+++ b/src/hooks/useInvites.tsx
@@ -0,0 +1,35 @@
+import { Invite } from "@/interfaces/invite";
+import { Ticket } from "@/interfaces/ticket";
+import { Code, Group, User } from "@/interfaces/user";
+import axios from "axios";
+import { useEffect, useState } from "react";
+
+export default function useInvites({
+  from,
+  to,
+}: {
+  from?: string;
+  to?: string;
+}) {
+  const [invites, setInvites] = useState<Invite[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isError, setIsError] = useState(false);
+
+  const getData = () => {
+    const filters: ((i: Invite) => boolean)[] = [];
+    if (from) filters.push((i: Invite) => i.from === from);
+    if (to) filters.push((i: Invite) => i.to === to);
+
+    setIsLoading(true);
+    axios
+      .get<Invite[]>(`/api/invites`)
+      .then((response) =>
+        setInvites(filters.reduce((d, f) => d.filter(f), response.data)),
+      )
+      .finally(() => setIsLoading(false));
+  };
+
+  useEffect(getData, [to, from]);
+
+  return { invites, isLoading, isError, reload: getData };
+}
diff --git a/src/hooks/useTickets.tsx b/src/hooks/useTickets.tsx
new file mode 100644
index 00000000..c90fd639
--- /dev/null
+++ b/src/hooks/useTickets.tsx
@@ -0,0 +1,22 @@
+import { Ticket } from "@/interfaces/ticket";
+import { Code, Group, User } from "@/interfaces/user";
+import axios from "axios";
+import { useEffect, useState } from "react";
+
+export default function useTickets() {
+  const [tickets, setTickets] = useState<Ticket[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isError, setIsError] = useState(false);
+
+  const getData = () => {
+    setIsLoading(true);
+    axios
+      .get<Ticket[]>(`/api/tickets`)
+      .then((response) => setTickets(response.data))
+      .finally(() => setIsLoading(false));
+  };
+
+  useEffect(getData, []);
+
+  return { tickets, isLoading, isError, reload: getData };
+}
diff --git a/src/interfaces/invite.ts b/src/interfaces/invite.ts
new file mode 100644
index 00000000..ce5e9f5e
--- /dev/null
+++ b/src/interfaces/invite.ts
@@ -0,0 +1,5 @@
+export interface Invite {
+  id: string;
+  from: string;
+  to: string;
+}
diff --git a/src/interfaces/ticket.ts b/src/interfaces/ticket.ts
new file mode 100644
index 00000000..1ffa7d50
--- /dev/null
+++ b/src/interfaces/ticket.ts
@@ -0,0 +1,34 @@
+import { Type } from "./user";
+
+export interface Ticket {
+  id: string;
+  date: string;
+  status: TicketStatus;
+  type: TicketType;
+  reporter: TicketReporter;
+  reportedFrom: string;
+  description: string;
+  subject: string;
+  assignedTo?: string;
+}
+
+export interface TicketReporter {
+  id: string;
+  name: string;
+  email: string;
+  type: Type;
+}
+
+export type TicketType = "feedback" | "bug" | "help";
+export const TicketTypeLabel: { [key in TicketType]: string } = {
+  feedback: "Feedback",
+  bug: "Bug",
+  help: "Help",
+};
+
+export type TicketStatus = "submitted" | "in-progress" | "completed";
+export const TicketStatusLabel: { [key in TicketStatus]: string } = {
+  submitted: "Submitted",
+  "in-progress": "In Progress",
+  completed: "Completed",
+};
diff --git a/src/pages/(admin)/BatchCodeGenerator.tsx b/src/pages/(admin)/BatchCodeGenerator.tsx
index 39bb132c..ec3e6426 100644
--- a/src/pages/(admin)/BatchCodeGenerator.tsx
+++ b/src/pages/(admin)/BatchCodeGenerator.tsx
@@ -1,217 +1,318 @@
 import Button from "@/components/Low/Button";
 import Checkbox from "@/components/Low/Checkbox";
-import {PERMISSIONS} from "@/constants/userPermissions";
+import { PERMISSIONS } from "@/constants/userPermissions";
 import useUsers from "@/hooks/useUsers";
-import {Type, User} from "@/interfaces/user";
-import {USER_TYPE_LABELS} from "@/resources/user";
+import { Type, User } from "@/interfaces/user";
+import { USER_TYPE_LABELS } from "@/resources/user";
 import axios from "axios";
 import clsx from "clsx";
-import {capitalize, uniqBy} from "lodash";
+import { capitalize, uniqBy } from "lodash";
 import moment from "moment";
-import {useEffect, useState} from "react";
+import { useEffect, useState } from "react";
 import ReactDatePicker from "react-datepicker";
-import {toast} from "react-toastify";
+import { toast } from "react-toastify";
 import ShortUniqueId from "short-unique-id";
-import {useFilePicker} from "use-file-picker";
+import { useFilePicker } from "use-file-picker";
 import readXlsxFile from "read-excel-file";
 import Modal from "@/components/Modal";
-import {BsQuestionCircleFill} from "react-icons/bs";
+import { BsFileEarmarkEaselFill, BsQuestionCircleFill } from "react-icons/bs";
 
-const EMAIL_REGEX = new RegExp(/^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$/);
+const EMAIL_REGEX = new RegExp(
+  /^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$/,
+);
 
-const USER_TYPE_PERMISSIONS: {[key in Type]: Type[]} = {
-	student: [],
-	teacher: [],
-	agent: [],
-	corporate: ["student", "teacher"],
-	admin: ["student", "teacher", "agent", "corporate", "admin"],
-	developer: ["student", "teacher", "agent", "corporate", "admin", "developer"],
+const USER_TYPE_PERMISSIONS: { [key in Type]: Type[] } = {
+  student: [],
+  teacher: [],
+  agent: [],
+  corporate: ["student", "teacher"],
+  admin: ["student", "teacher", "agent", "corporate", "admin"],
+  developer: ["student", "teacher", "agent", "corporate", "admin", "developer"],
 };
 
-export default function BatchCodeGenerator({user}: {user: User}) {
-	const [infos, setInfos] = useState<{email: string; name: string; passport_id: string}[]>([]);
-	const [isLoading, setIsLoading] = useState(false);
-	const [expiryDate, setExpiryDate] = useState<Date | null>(null);
-	const [isExpiryDateEnabled, setIsExpiryDateEnabled] = useState(true);
-	const [type, setType] = useState<Type>("student");
-	const [showHelp, setShowHelp] = useState(false);
+export default function BatchCodeGenerator({ user }: { user: User }) {
+  const [infos, setInfos] = useState<
+    { email: string; name: string; passport_id: string }[]
+  >([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [expiryDate, setExpiryDate] = useState<Date | null>(null);
+  const [isExpiryDateEnabled, setIsExpiryDateEnabled] = useState(true);
+  const [type, setType] = useState<Type>("student");
+  const [showHelp, setShowHelp] = useState(false);
 
-	const {users} = useUsers();
+  const { users } = useUsers();
 
-	const {openFilePicker, filesContent, clear} = useFilePicker({
-		accept: ".xlsx",
-		multiple: false,
-		readAs: "ArrayBuffer",
-	});
+  const { openFilePicker, filesContent, clear } = useFilePicker({
+    accept: ".xlsx",
+    multiple: false,
+    readAs: "ArrayBuffer",
+  });
 
-	useEffect(() => {
-		if (user && (user.type === "corporate" || user.type === "teacher")) {
-			setExpiryDate(user.subscriptionExpirationDate || null);
-		}
-	}, [user]);
+  useEffect(() => {
+    if (user && (user.type === "corporate" || user.type === "teacher")) {
+      setExpiryDate(user.subscriptionExpirationDate || null);
+    }
+  }, [user]);
 
-	useEffect(() => {
-		if (!isExpiryDateEnabled) setExpiryDate(null);
-	}, [isExpiryDateEnabled]);
+  useEffect(() => {
+    if (!isExpiryDateEnabled) setExpiryDate(null);
+  }, [isExpiryDateEnabled]);
 
-	useEffect(() => {
-		if (filesContent.length > 0) {
-			const file = filesContent[0];
-			readXlsxFile(file.content).then((rows) => {
-				try {
-					const information = uniqBy(
-						rows
-							.map((row) => {
-								const [firstName, lastName, country, passport_id, email, ...phone] = row as string[];
-								return EMAIL_REGEX.test(email.toString().trim()) && !users.map((u) => u.email).includes(email.toString().trim())
-									? {
-											email: email.toString().trim(),
-											name: `${firstName ?? ""} ${lastName ?? ""}`.trim(),
-											passport_id: passport_id?.toString().trim() || undefined,
-									  }
-									: undefined;
-							})
-							.filter((x) => !!x) as typeof infos,
-						(x) => x.email,
-					);
+  useEffect(() => {
+    if (filesContent.length > 0) {
+      const file = filesContent[0];
+      readXlsxFile(file.content).then((rows) => {
+        try {
+          const information = uniqBy(
+            rows
+              .map((row) => {
+                const [
+                  firstName,
+                  lastName,
+                  country,
+                  passport_id,
+                  email,
+                  ...phone
+                ] = row as string[];
+                return EMAIL_REGEX.test(email.toString().trim())
+                  ? {
+                      email: email.toString().trim().toLowerCase(),
+                      name: `${firstName ?? ""} ${lastName ?? ""}`.trim(),
+                      passport_id: passport_id?.toString().trim() || undefined,
+                    }
+                  : undefined;
+              })
+              .filter((x) => !!x) as typeof infos,
+            (x) => x.email,
+          );
 
-					if (information.length === 0) {
-						toast.error(
-							"Please upload an Excel file containing user information, one per line! All already registered e-mails have also been ignored!",
-						);
-						return clear();
-					}
+          if (information.length === 0) {
+            toast.error(
+              "Please upload an Excel file containing user information, one per line! All already registered e-mails have also been ignored!",
+            );
+            return clear();
+          }
 
-					setInfos(information);
-				} catch {
-					toast.error(
-						"Please upload an Excel file containing user information, one per line! All already registered e-mails have also been ignored!",
-					);
-					return clear();
-				}
-			});
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [filesContent]);
+          setInfos(information);
+        } catch {
+          toast.error(
+            "Please upload an Excel file containing user information, one per line! All already registered e-mails have also been ignored!",
+          );
+          return clear();
+        }
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [filesContent]);
 
-	const generateCode = (type: Type) => {
-		if (!confirm(`You are about to generate ${infos.length} codes, are you sure you want to continue?`)) return;
+  const generateAndInvite = async () => {
+    const newUsers = infos.filter(
+      (x) => !users.map((u) => u.email).includes(x.email),
+    );
+    const existingUsers = infos
+      .filter((x) => users.map((u) => u.email).includes(x.email))
+      .map((i) => users.find((u) => u.email === i.email))
+      .filter((x) => !!x && x.type === "student") as User[];
 
-		const uid = new ShortUniqueId();
-		const codes = infos.map(() => uid.randomUUID(6));
+    const newUsersSentence =
+      newUsers.length > 0 ? `generate ${newUsers.length} code(s)` : undefined;
+    const existingUsersSentence =
+      existingUsers.length > 0
+        ? `invite ${existingUsers.length} registered student(s)`
+        : undefined;
+    if (
+      !confirm(
+        `You are about to ${[newUsersSentence, existingUsersSentence].filter((x) => !!x).join(" and ")}, are you sure you want to continue?`,
+      )
+    )
+      return;
 
-		setIsLoading(true);
-		axios
-			.post<{ok: boolean; valid?: number; reason?: string}>("/api/code", {type, codes, infos: infos, expiryDate})
-			.then(({data, status}) => {
-				if (data.ok) {
-					toast.success(
-						`Successfully generated${data.valid ? ` ${data.valid}/${infos.length}` : ""} ${capitalize(
-							type,
-						)} codes and they have been notified by e-mail!`,
-						{toastId: "success"},
-					);
-					return;
-				}
+    setIsLoading(true);
+    Promise.all(
+      existingUsers.map(
+        async (u) =>
+          await axios.post(`/api/invites`, { to: u.id, from: user.id }),
+      ),
+    )
+      .then(() =>
+        toast.success(
+          `Successfully invited ${existingUsers.length} registered student(s)!`,
+        ),
+      )
+      .finally(() => {
+        if (newUsers.length === 0) setIsLoading(false);
+      });
 
-				if (status === 403) {
-					toast.error(data.reason, {toastId: "forbidden"});
-				}
-			})
-			.catch(({response: {status, data}}) => {
-				if (status === 403) {
-					toast.error(data.reason, {toastId: "forbidden"});
-					return;
-				}
+    if (newUsers.length > 0) generateCode(type, newUsers);
+    setInfos([]);
+  };
 
-				toast.error(`Something went wrong, please try again later!`, {toastId: "error"});
-			})
-			.finally(() => {
-				setIsLoading(false);
-				return clear();
-			});
-	};
+  const generateCode = (type: Type, informations: typeof infos) => {
+    const uid = new ShortUniqueId();
+    const codes = informations.map(() => uid.randomUUID(6));
 
-	return (
-		<>
-			<Modal isOpen={showHelp} onClose={() => setShowHelp(false)} title="Excel File Format">
-				<div className="mt-4 flex flex-col gap-2">
-					<span>Please upload an Excel file with the following format:</span>
-					<table className="w-full">
-						<thead>
-							<tr>
-								<th className="border border-neutral-200 px-2 py-1">First Name</th>
-								<th className="border border-neutral-200 px-2 py-1">Last Name</th>
-								<th className="border border-neutral-200 px-2 py-1">Country</th>
-								<th className="border border-neutral-200 px-2 py-1">Passport/National ID</th>
-								<th className="border border-neutral-200 px-2 py-1">E-mail</th>
-								<th className="border border-neutral-200 px-2 py-1">Phone Number</th>
-							</tr>
-						</thead>
-					</table>
-					<span className="mt-4">
-						<b>Notes:</b>
-						<ul>
-							<li>- All incorrect e-mails will be ignored;</li>
-							<li>- All already registered e-mails will be ignored;</li>
-							<li>- You may have a header row with the format above, however, it is not necessary;</li>
-							<li>- All of the e-mails in the file will receive an e-mail to join EnCoach with the role selected below.</li>
-						</ul>
-					</span>
-				</div>
-			</Modal>
-			<div className="flex flex-col gap-4 border p-4 border-mti-gray-platinum rounded-xl">
-				<div className="flex justify-between items-end">
-					<label className="font-normal text-base text-mti-gray-dim">Choose an Excel file</label>
-					<div className="cursor-pointer tooltip" data-tip="Excel File Format" onClick={() => setShowHelp(true)}>
-						<BsQuestionCircleFill />
-					</div>
-				</div>
-				<Button onClick={openFilePicker} isLoading={isLoading} disabled={isLoading}>
-					{filesContent.length > 0 ? filesContent[0].name : "Choose a file"}
-				</Button>
-				{user && (user.type === "developer" || user.type === "admin") && (
-					<>
-						<div className="flex -md:flex-row md:flex-col -md:items-center 2xl:flex-row 2xl:items-center justify-between gap-2">
-							<label className="font-normal text-base text-mti-gray-dim">Expiry Date</label>
-							<Checkbox isChecked={isExpiryDateEnabled} onChange={setIsExpiryDateEnabled}>
-								Enabled
-							</Checkbox>
-						</div>
-						{isExpiryDateEnabled && (
-							<ReactDatePicker
-								className={clsx(
-									"p-6 w-full min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
-									"hover:border-mti-purple tooltip",
-									"transition duration-300 ease-in-out",
-								)}
-								filterDate={(date) => moment(date).isAfter(new Date())}
-								dateFormat="dd/MM/yyyy"
-								selected={expiryDate}
-								onChange={(date) => setExpiryDate(date)}
-							/>
-						)}
-					</>
-				)}
-				<label className="font-normal text-base text-mti-gray-dim">Select the type of user they should be</label>
-				{user && (
-					<select
-						defaultValue="student"
-						onChange={(e) => setType(e.target.value as typeof user.type)}
-						className="p-6 w-full min-w-[350px] min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer bg-white">
-						{Object.keys(USER_TYPE_LABELS)
-							.filter((x) => USER_TYPE_PERMISSIONS[user.type].includes(x as Type))
-							.map((type) => (
-								<option key={type} value={type}>
-									{USER_TYPE_LABELS[type as keyof typeof USER_TYPE_LABELS]}
-								</option>
-							))}
-					</select>
-				)}
-				<Button onClick={() => generateCode(type)} disabled={infos.length === 0 || (isExpiryDateEnabled ? !expiryDate : false)}>
-					Generate & Send
-				</Button>
-			</div>
-		</>
-	);
+    setIsLoading(true);
+    axios
+      .post<{ ok: boolean; valid?: number; reason?: string }>("/api/code", {
+        type,
+        codes,
+        infos: informations,
+        expiryDate,
+      })
+      .then(({ data, status }) => {
+        if (data.ok) {
+          toast.success(
+            `Successfully generated${data.valid ? ` ${data.valid}/${informations.length}` : ""} ${capitalize(
+              type,
+            )} codes and they have been notified by e-mail!`,
+            { toastId: "success" },
+          );
+          return;
+        }
+
+        if (status === 403) {
+          toast.error(data.reason, { toastId: "forbidden" });
+        }
+      })
+      .catch(({ response: { status, data } }) => {
+        if (status === 403) {
+          toast.error(data.reason, { toastId: "forbidden" });
+          return;
+        }
+
+        toast.error(`Something went wrong, please try again later!`, {
+          toastId: "error",
+        });
+      })
+      .finally(() => {
+        setIsLoading(false);
+        return clear();
+      });
+  };
+
+  return (
+    <>
+      <Modal
+        isOpen={showHelp}
+        onClose={() => setShowHelp(false)}
+        title="Excel File Format"
+      >
+        <div className="mt-4 flex flex-col gap-2">
+          <span>Please upload an Excel file with the following format:</span>
+          <table className="w-full">
+            <thead>
+              <tr>
+                <th className="border border-neutral-200 px-2 py-1">
+                  First Name
+                </th>
+                <th className="border border-neutral-200 px-2 py-1">
+                  Last Name
+                </th>
+                <th className="border border-neutral-200 px-2 py-1">Country</th>
+                <th className="border border-neutral-200 px-2 py-1">
+                  Passport/National ID
+                </th>
+                <th className="border border-neutral-200 px-2 py-1">E-mail</th>
+                <th className="border border-neutral-200 px-2 py-1">
+                  Phone Number
+                </th>
+              </tr>
+            </thead>
+          </table>
+          <span className="mt-4">
+            <b>Notes:</b>
+            <ul>
+              <li>- All incorrect e-mails will be ignored;</li>
+              <li>- All already registered e-mails will be ignored;</li>
+              <li>
+                - You may have a header row with the format above, however, it
+                is not necessary;
+              </li>
+              <li>
+                - All of the e-mails in the file will receive an e-mail to join
+                EnCoach with the role selected below.
+              </li>
+            </ul>
+          </span>
+        </div>
+      </Modal>
+      <div className="border-mti-gray-platinum flex flex-col gap-4 rounded-xl border p-4">
+        <div className="flex items-end justify-between">
+          <label className="text-mti-gray-dim text-base font-normal">
+            Choose an Excel file
+          </label>
+          <div
+            className="tooltip cursor-pointer"
+            data-tip="Excel File Format"
+            onClick={() => setShowHelp(true)}
+          >
+            <BsQuestionCircleFill />
+          </div>
+        </div>
+        <Button
+          onClick={openFilePicker}
+          isLoading={isLoading}
+          disabled={isLoading}
+        >
+          {filesContent.length > 0 ? filesContent[0].name : "Choose a file"}
+        </Button>
+        {user && (user.type === "developer" || user.type === "admin") && (
+          <>
+            <div className="-md:flex-row -md:items-center flex justify-between gap-2 md:flex-col 2xl:flex-row 2xl:items-center">
+              <label className="text-mti-gray-dim text-base font-normal">
+                Expiry Date
+              </label>
+              <Checkbox
+                isChecked={isExpiryDateEnabled}
+                onChange={setIsExpiryDateEnabled}
+              >
+                Enabled
+              </Checkbox>
+            </div>
+            {isExpiryDateEnabled && (
+              <ReactDatePicker
+                className={clsx(
+                  "flex min-h-[70px] w-full cursor-pointer justify-center rounded-full border p-6 text-sm font-normal focus:outline-none",
+                  "hover:border-mti-purple tooltip",
+                  "transition duration-300 ease-in-out",
+                )}
+                filterDate={(date) => moment(date).isAfter(new Date())}
+                dateFormat="dd/MM/yyyy"
+                selected={expiryDate}
+                onChange={(date) => setExpiryDate(date)}
+              />
+            )}
+          </>
+        )}
+        <label className="text-mti-gray-dim text-base font-normal">
+          Select the type of user they should be
+        </label>
+        {user && (
+          <select
+            defaultValue="student"
+            onChange={(e) => setType(e.target.value as typeof user.type)}
+            className="flex min-h-[70px] w-full min-w-[350px] cursor-pointer justify-center rounded-full border bg-white p-6 text-sm font-normal focus:outline-none"
+          >
+            {Object.keys(USER_TYPE_LABELS)
+              .filter((x) =>
+                USER_TYPE_PERMISSIONS[user.type].includes(x as Type),
+              )
+              .map((type) => (
+                <option key={type} value={type}>
+                  {USER_TYPE_LABELS[type as keyof typeof USER_TYPE_LABELS]}
+                </option>
+              ))}
+          </select>
+        )}
+        <Button
+          onClick={generateAndInvite}
+          disabled={
+            infos.length === 0 || (isExpiryDateEnabled ? !expiryDate : false)
+          }
+        >
+          Generate & Send
+        </Button>
+      </div>
+    </>
+  );
 }
diff --git a/src/pages/api/invites/[id].ts b/src/pages/api/invites/[id].ts
new file mode 100644
index 00000000..99b2ba36
--- /dev/null
+++ b/src/pages/api/invites/[id].ts
@@ -0,0 +1,82 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from "next";
+import { app } from "@/firebase";
+import {
+  getFirestore,
+  getDoc,
+  doc,
+  deleteDoc,
+  setDoc,
+} from "firebase/firestore";
+import { withIronSessionApiRoute } from "iron-session/next";
+import { sessionOptions } from "@/lib/session";
+import { Ticket } from "@/interfaces/ticket";
+import { Invite } from "@/interfaces/invite";
+
+const db = getFirestore(app);
+
+export default withIronSessionApiRoute(handler, sessionOptions);
+
+async function handler(req: NextApiRequest, res: NextApiResponse) {
+  if (req.method === "GET") return await get(req, res);
+  if (req.method === "DELETE") return await del(req, res);
+  if (req.method === "PATCH") return await patch(req, res);
+
+  res.status(404).json(undefined);
+}
+
+async function get(req: NextApiRequest, res: NextApiResponse) {
+  if (!req.session.user) {
+    res.status(401).json({ ok: false });
+    return;
+  }
+
+  const { id } = req.query as { id: string };
+
+  const snapshot = await getDoc(doc(db, "invites", id));
+
+  if (snapshot.exists()) {
+    res.status(200).json({ ...snapshot.data(), id: snapshot.id });
+  } else {
+    res.status(404).json(undefined);
+  }
+}
+
+async function del(req: NextApiRequest, res: NextApiResponse) {
+  if (!req.session.user) {
+    res.status(401).json({ ok: false });
+    return;
+  }
+
+  const { id } = req.query as { id: string };
+
+  const snapshot = await getDoc(doc(db, "invites", id));
+  const data = snapshot.data() as Invite;
+
+  const user = req.session.user;
+  if (user.type === "admin" || user.type === "developer") {
+    await deleteDoc(snapshot.ref);
+    res.status(200).json({ ok: true });
+    return;
+  }
+
+  res.status(403).json({ ok: false });
+}
+
+async function patch(req: NextApiRequest, res: NextApiResponse) {
+  if (!req.session.user) {
+    res.status(401).json({ ok: false });
+    return;
+  }
+
+  const { id } = req.query as { id: string };
+  const snapshot = await getDoc(doc(db, "invites", id));
+
+  const user = req.session.user;
+  if (user.type === "admin" || user.type === "developer") {
+    await setDoc(snapshot.ref, req.body, { merge: true });
+    return res.status(200).json({ ok: true });
+  }
+
+  res.status(403).json({ ok: false });
+}
diff --git a/src/pages/api/invites/accept/[id].ts b/src/pages/api/invites/accept/[id].ts
new file mode 100644
index 00000000..41ca356d
--- /dev/null
+++ b/src/pages/api/invites/accept/[id].ts
@@ -0,0 +1,134 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from "next";
+import { app } from "@/firebase";
+import {
+  getFirestore,
+  getDoc,
+  doc,
+  deleteDoc,
+  setDoc,
+  getDocs,
+  collection,
+  where,
+  query,
+} from "firebase/firestore";
+import { withIronSessionApiRoute } from "iron-session/next";
+import { sessionOptions } from "@/lib/session";
+import { Ticket } from "@/interfaces/ticket";
+import { Invite } from "@/interfaces/invite";
+import { Group, User } from "@/interfaces/user";
+import { v4 } from "uuid";
+import { sendEmail } from "@/email";
+
+const db = getFirestore(app);
+
+export default withIronSessionApiRoute(handler, sessionOptions);
+
+async function handler(req: NextApiRequest, res: NextApiResponse) {
+  if (req.method === "GET") return await get(req, res);
+
+  res.status(404).json(undefined);
+}
+
+async function get(req: NextApiRequest, res: NextApiResponse) {
+  if (!req.session.user) {
+    res.status(401).json({ ok: false });
+    return;
+  }
+
+  const { id } = req.query as { id: string };
+  const snapshot = await getDoc(doc(db, "invites", id));
+
+  if (snapshot.exists()) {
+    const invite = { ...snapshot.data(), id: snapshot.id } as Invite;
+    if (invite.to !== req.session.user.id)
+      return res.status(403).json({ ok: false });
+
+    await deleteDoc(snapshot.ref);
+    const invitedByRef = await getDoc(doc(db, "users", invite.from));
+    if (!invitedByRef.exists()) return res.status(404).json({ ok: false });
+
+    const invitedBy = { ...invitedByRef.data(), id: invitedByRef.id } as User;
+    const invitedByGroupsRef = await getDocs(
+      query(collection(db, "groups"), where("admin", "==", invitedBy.id)),
+    );
+    const invitedByGroups = invitedByGroupsRef.docs.map((g) => ({
+      ...g.data(),
+      id: g.id,
+    })) as Group[];
+
+    const typeGroupName =
+      req.session.user.type === "student"
+        ? "Students"
+        : req.session.user.type === "teacher"
+          ? "Teachers"
+          : undefined;
+
+    if (typeGroupName) {
+      const typeGroup: Group = invitedByGroups.find(
+        (g) => g.name === typeGroupName,
+      ) || {
+        id: v4(),
+        admin: invitedBy.id,
+        name: typeGroupName,
+        participants: [],
+        disableEditing: true,
+      };
+      await setDoc(
+        doc(db, "groups", typeGroup.id),
+        {
+          ...typeGroup,
+          participants: [
+            ...typeGroup.participants.filter((x) => x !== req.session.user!.id),
+            req.session.user.id,
+          ],
+        },
+        { merge: true },
+      );
+    }
+
+    const invitationsGroup: Group = invitedByGroups.find(
+      (g) => g.name === "Invited",
+    ) || {
+      id: v4(),
+      admin: invitedBy.id,
+      name: "Invited",
+      participants: [],
+      disableEditing: true,
+    };
+    await setDoc(
+      doc(db, "groups", invitationsGroup.id),
+      {
+        ...invitationsGroup,
+        participants: [
+          ...invitationsGroup.participants.filter(
+            (x) => x !== req.session.user!.id,
+          ),
+          req.session.user.id,
+        ],
+      },
+      {
+        merge: true,
+      },
+    );
+
+    try {
+      await sendEmail(
+        "respondedInvite",
+        {
+          corporateName: invitedBy.name,
+          name: req.session.user.name,
+          decision: "accept",
+        },
+        [invitedBy.email],
+        `${req.session.user.name} has accepted your invite!`,
+      );
+    } catch (e) {
+      console.log(e);
+    }
+
+    res.status(200).json({ ok: true });
+  } else {
+    res.status(404).json(undefined);
+  }
+}
diff --git a/src/pages/api/invites/decline/[id].ts b/src/pages/api/invites/decline/[id].ts
new file mode 100644
index 00000000..e8ab55a9
--- /dev/null
+++ b/src/pages/api/invites/decline/[id].ts
@@ -0,0 +1,72 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from "next";
+import { app } from "@/firebase";
+import {
+  getFirestore,
+  getDoc,
+  doc,
+  deleteDoc,
+  setDoc,
+  getDocs,
+  collection,
+  where,
+  query,
+} from "firebase/firestore";
+import { withIronSessionApiRoute } from "iron-session/next";
+import { sessionOptions } from "@/lib/session";
+import { Ticket } from "@/interfaces/ticket";
+import { Invite } from "@/interfaces/invite";
+import { Group, User } from "@/interfaces/user";
+import { v4 } from "uuid";
+import { sendEmail } from "@/email";
+
+const db = getFirestore(app);
+
+export default withIronSessionApiRoute(handler, sessionOptions);
+
+async function handler(req: NextApiRequest, res: NextApiResponse) {
+  if (req.method === "GET") return await get(req, res);
+
+  res.status(404).json(undefined);
+}
+
+async function get(req: NextApiRequest, res: NextApiResponse) {
+  if (!req.session.user) {
+    res.status(401).json({ ok: false });
+    return;
+  }
+
+  const { id } = req.query as { id: string };
+  const snapshot = await getDoc(doc(db, "invites", id));
+
+  if (snapshot.exists()) {
+    const invite = { ...snapshot.data(), id: snapshot.id } as Invite;
+    if (invite.to !== req.session.user.id)
+      return res.status(403).json({ ok: false });
+
+    await deleteDoc(snapshot.ref);
+    const invitedByRef = await getDoc(doc(db, "users", invite.from));
+    if (!invitedByRef.exists()) return res.status(404).json({ ok: false });
+
+    const invitedBy = { ...invitedByRef.data(), id: invitedByRef.id } as User;
+
+    try {
+      await sendEmail(
+        "respondedInvite",
+        {
+          corporateName: invitedBy.name,
+          name: req.session.user.name,
+          decision: "decline",
+        },
+        [invitedBy.email],
+        `${req.session.user.name} has declined your invite!`,
+      );
+    } catch (e) {
+      console.log(e);
+    }
+
+    res.status(200).json({ ok: true });
+  } else {
+    res.status(404).json(undefined);
+  }
+}
diff --git a/src/pages/api/invites/index.ts b/src/pages/api/invites/index.ts
new file mode 100644
index 00000000..023e6e2d
--- /dev/null
+++ b/src/pages/api/invites/index.ts
@@ -0,0 +1,88 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { sendEmail } from "@/email";
+import { app } from "@/firebase";
+import { Invite } from "@/interfaces/invite";
+import { Ticket } from "@/interfaces/ticket";
+import { User } from "@/interfaces/user";
+import { sessionOptions } from "@/lib/session";
+import {
+  collection,
+  doc,
+  getDoc,
+  getDocs,
+  getFirestore,
+  setDoc,
+} from "firebase/firestore";
+import { withIronSessionApiRoute } from "iron-session/next";
+import type { NextApiRequest, NextApiResponse } from "next";
+import ShortUniqueId from "short-unique-id";
+
+const db = getFirestore(app);
+
+export default withIronSessionApiRoute(handler, sessionOptions);
+
+async function handler(req: NextApiRequest, res: NextApiResponse) {
+  if (!req.session.user) {
+    res.status(401).json({ ok: false });
+    return;
+  }
+
+  if (req.method === "GET") await get(req, res);
+  if (req.method === "POST") await post(req, res);
+}
+
+async function get(req: NextApiRequest, res: NextApiResponse) {
+  const snapshot = await getDocs(collection(db, "invites"));
+
+  res.status(200).json(
+    snapshot.docs.map((doc) => ({
+      id: doc.id,
+      ...doc.data(),
+    })),
+  );
+}
+
+async function post(req: NextApiRequest, res: NextApiResponse) {
+  const body = req.body as Invite;
+
+  const existingInvites = (await getDocs(collection(db, "invites"))).docs.map(
+    (x) => ({ ...x.data(), id: x.id }),
+  ) as Invite[];
+
+  const invitedRef = await getDoc(doc(db, "users", body.to));
+  if (!invitedRef.exists()) return res.status(404).json({ ok: false });
+
+  const invitedByRef = await getDoc(doc(db, "users", body.from));
+  if (!invitedByRef.exists()) return res.status(404).json({ ok: false });
+
+  const invited = { ...invitedRef.data(), id: invitedRef.id } as User;
+  const invitedBy = { ...invitedByRef.data(), id: invitedByRef.id } as User;
+
+  try {
+    await sendEmail(
+      "receivedInvite",
+      {
+        name: invited.name,
+        corporateName:
+          invitedBy.type === "corporate"
+            ? invitedBy.corporateInformation?.companyInformation?.name ||
+              invitedBy.name
+            : invitedBy.name,
+      },
+      [invited.email],
+      "You have been invited to a group!",
+    );
+  } catch (e) {
+    console.log(e);
+  }
+
+  if (
+    existingInvites.filter((i) => i.to === body.to && i.from === body.from)
+      .length == 0
+  ) {
+    const shortUID = new ShortUniqueId();
+    await setDoc(doc(db, "invites", body.id || shortUID.randomUUID(8)), body);
+  }
+
+  res.status(200).json({ ok: true });
+}
diff --git a/src/pages/api/login.ts b/src/pages/api/login.ts
index eaee7022..6276dc51 100644
--- a/src/pages/api/login.ts
+++ b/src/pages/api/login.ts
@@ -1,10 +1,10 @@
-import {NextApiRequest, NextApiResponse} from "next";
-import {getAuth, signInWithEmailAndPassword} from "firebase/auth";
-import {app} from "@/firebase";
-import {sessionOptions} from "@/lib/session";
-import {withIronSessionApiRoute} from "iron-session/next";
-import {User} from "@/interfaces/user";
-import {getFirestore, getDoc, doc} from "firebase/firestore";
+import { NextApiRequest, NextApiResponse } from "next";
+import { getAuth, signInWithEmailAndPassword } from "firebase/auth";
+import { app } from "@/firebase";
+import { sessionOptions } from "@/lib/session";
+import { withIronSessionApiRoute } from "iron-session/next";
+import { User } from "@/interfaces/user";
+import { getFirestore, getDoc, doc } from "firebase/firestore";
 
 const auth = getAuth(app);
 const db = getFirestore(app);
@@ -12,27 +12,27 @@ const db = getFirestore(app);
 export default withIronSessionApiRoute(login, sessionOptions);
 
 async function login(req: NextApiRequest, res: NextApiResponse) {
-	const {email, password} = req.body as {email: string; password: string};
+  const { email, password } = req.body as { email: string; password: string };
 
-	signInWithEmailAndPassword(auth, email, password)
-		.then(async (userCredentials) => {
-			const userId = userCredentials.user.uid;
+  signInWithEmailAndPassword(auth, email.toLowerCase(), password)
+    .then(async (userCredentials) => {
+      const userId = userCredentials.user.uid;
 
-			const docUser = await getDoc(doc(db, "users", userId));
-			if (!docUser.exists()) {
-				res.status(401).json({error: 401, message: "User does not exist!"});
-				return;
-			}
+      const docUser = await getDoc(doc(db, "users", userId));
+      if (!docUser.exists()) {
+        res.status(401).json({ error: 401, message: "User does not exist!" });
+        return;
+      }
 
-			const user = docUser.data() as User;
+      const user = docUser.data() as User;
 
-			req.session.user = {...user, id: userId};
-			await req.session.save();
+      req.session.user = { ...user, id: userId };
+      await req.session.save();
 
-			res.status(200).json({user: {...user, id: userId}});
-		})
-		.catch((error) => {
-			console.log(error);
-			res.status(401).json({error});
-		});
+      res.status(200).json({ user: { ...user, id: userId } });
+    })
+    .catch((error) => {
+      console.log(error);
+      res.status(401).json({ error });
+    });
 }
diff --git a/src/pages/api/register.ts b/src/pages/api/register.ts
index ec609d50..80a2da9a 100644
--- a/src/pages/api/register.ts
+++ b/src/pages/api/register.ts
@@ -1,11 +1,23 @@
-import {NextApiRequest, NextApiResponse} from "next";
-import {createUserWithEmailAndPassword, getAuth} from "firebase/auth";
-import {app} from "@/firebase";
-import {sessionOptions} from "@/lib/session";
-import {withIronSessionApiRoute} from "iron-session/next";
-import {getFirestore, doc, setDoc, query, collection, where, getDocs} from "firebase/firestore";
-import {CorporateInformation, DemographicInformation, Type} from "@/interfaces/user";
-import {addUserToGroupOnCreation} from "@/utils/registration";
+import { NextApiRequest, NextApiResponse } from "next";
+import { createUserWithEmailAndPassword, getAuth } from "firebase/auth";
+import { app } from "@/firebase";
+import { sessionOptions } from "@/lib/session";
+import { withIronSessionApiRoute } from "iron-session/next";
+import {
+  getFirestore,
+  doc,
+  setDoc,
+  query,
+  collection,
+  where,
+  getDocs,
+} from "firebase/firestore";
+import {
+  CorporateInformation,
+  DemographicInformation,
+  Type,
+} from "@/interfaces/user";
+import { addUserToGroupOnCreation } from "@/utils/registration";
 import moment from "moment";
 
 const auth = getAuth(app);
@@ -14,117 +26,140 @@ const db = getFirestore(app);
 export default withIronSessionApiRoute(register, sessionOptions);
 
 const DEFAULT_DESIRED_LEVELS = {
-	reading: 9,
-	listening: 9,
-	writing: 9,
-	speaking: 9,
+  reading: 9,
+  listening: 9,
+  writing: 9,
+  speaking: 9,
 };
 
 const DEFAULT_LEVELS = {
-	reading: 0,
-	listening: 0,
-	writing: 0,
-	speaking: 0,
+  reading: 0,
+  listening: 0,
+  writing: 0,
+  speaking: 0,
 };
 
 async function register(req: NextApiRequest, res: NextApiResponse) {
-	const {type} = req.body as {
-		type: "individual" | "corporate";
-	};
+  const { type } = req.body as {
+    type: "individual" | "corporate";
+  };
 
-	if (type === "individual") return registerIndividual(req, res);
-	if (type === "corporate") return registerCorporate(req, res);
+  if (type === "individual") return registerIndividual(req, res);
+  if (type === "corporate") return registerCorporate(req, res);
 }
 
 async function registerIndividual(req: NextApiRequest, res: NextApiResponse) {
-	const {email, passport_id, password, code} = req.body as {
-		email: string;
-		passport_id?: string;
-		password: string;
-		code?: string;
-	};
+  const { email, passport_id, password, code } = req.body as {
+    email: string;
+    passport_id?: string;
+    password: string;
+    code?: string;
+  };
 
-	const codeQuery = query(collection(db, "codes"), where("code", "==", code));
-	const codeDocs = (await getDocs(codeQuery)).docs.filter((x) => !Object.keys(x.data()).includes("userId"));
+  const codeQuery = query(collection(db, "codes"), where("code", "==", code));
+  const codeDocs = (await getDocs(codeQuery)).docs.filter(
+    (x) => !Object.keys(x.data()).includes("userId"),
+  );
 
-	if (code && code.length > 0 && codeDocs.length === 0) {
-		res.status(400).json({error: "Invalid Code!"});
-		return;
-	}
+  if (code && code.length > 0 && codeDocs.length === 0) {
+    res.status(400).json({ error: "Invalid Code!" });
+    return;
+  }
 
-	const codeData = codeDocs.length > 0 ? (codeDocs[0].data() as {code: string; type: Type; creator?: string; expiryDate: Date | null}) : undefined;
+  const codeData =
+    codeDocs.length > 0
+      ? (codeDocs[0].data() as {
+          code: string;
+          type: Type;
+          creator?: string;
+          expiryDate: Date | null;
+        })
+      : undefined;
 
-	createUserWithEmailAndPassword(auth, email, password)
-		.then(async (userCredentials) => {
-			const userId = userCredentials.user.uid;
-			delete req.body.password;
+  createUserWithEmailAndPassword(auth, email.toLowerCase(), password)
+    .then(async (userCredentials) => {
+      const userId = userCredentials.user.uid;
+      delete req.body.password;
 
-			const user = {
-				...req.body,
-				desiredLevels: DEFAULT_DESIRED_LEVELS,
-				levels: DEFAULT_LEVELS,
-				bio: "",
-				isFirstLogin: codeData ? codeData.type === "student" : true,
-				focus: "academic",
-				type: email.endsWith("@ecrop.dev") ? "developer" : codeData ? codeData.type : "student",
-				subscriptionExpirationDate: codeData ? codeData.expiryDate : moment().subtract(1, "days").toISOString(),
-				...(passport_id ? {demographicInformation: {passport_id}} : {}),
-				registrationDate: new Date().toISOString(),
-				status: code ? "active" : "paymentDue",
-			};
+      const user = {
+        ...req.body,
+        email: email.toLowerCase(),
+        desiredLevels: DEFAULT_DESIRED_LEVELS,
+        levels: DEFAULT_LEVELS,
+        bio: "",
+        isFirstLogin: codeData ? codeData.type === "student" : true,
+        focus: "academic",
+        type: email.endsWith("@ecrop.dev")
+          ? "developer"
+          : codeData
+            ? codeData.type
+            : "student",
+        subscriptionExpirationDate: codeData
+          ? codeData.expiryDate
+          : moment().subtract(1, "days").toISOString(),
+        ...(passport_id ? { demographicInformation: { passport_id } } : {}),
+        registrationDate: new Date().toISOString(),
+        status: code ? "active" : "paymentDue",
+      };
 
-			await setDoc(doc(db, "users", userId), user);
+      await setDoc(doc(db, "users", userId), user);
 
-			if (codeDocs.length > 0 && codeData) {
-				await setDoc(codeDocs[0].ref, {userId: userId}, {merge: true});
-				if (codeData.creator) await addUserToGroupOnCreation(userId, codeData.type, codeData.creator);
-			}
+      if (codeDocs.length > 0 && codeData) {
+        await setDoc(codeDocs[0].ref, { userId: userId }, { merge: true });
+        if (codeData.creator)
+          await addUserToGroupOnCreation(
+            userId,
+            codeData.type,
+            codeData.creator,
+          );
+      }
 
-			req.session.user = {...user, id: userId};
-			await req.session.save();
+      req.session.user = { ...user, id: userId };
+      await req.session.save();
 
-			res.status(200).json({user: {...user, id: userId}});
-		})
-		.catch((error) => {
-			console.log(error);
-			res.status(401).json({error});
-		});
+      res.status(200).json({ user: { ...user, id: userId } });
+    })
+    .catch((error) => {
+      console.log(error);
+      res.status(401).json({ error });
+    });
 }
 
 async function registerCorporate(req: NextApiRequest, res: NextApiResponse) {
-	const {email, password} = req.body as {
-		email: string;
-		password: string;
-		corporateInformation: CorporateInformation;
-	};
+  const { email, password } = req.body as {
+    email: string;
+    password: string;
+    corporateInformation: CorporateInformation;
+  };
 
-	createUserWithEmailAndPassword(auth, email, password)
-		.then(async (userCredentials) => {
-			const userId = userCredentials.user.uid;
-			delete req.body.password;
+  createUserWithEmailAndPassword(auth, email.toLowerCase(), password)
+    .then(async (userCredentials) => {
+      const userId = userCredentials.user.uid;
+      delete req.body.password;
 
-			const user = {
-				...req.body,
-				desiredLevels: DEFAULT_DESIRED_LEVELS,
-				levels: DEFAULT_LEVELS,
-				bio: "",
-				isFirstLogin: false,
-				focus: "academic",
-				type: "corporate",
-				subscriptionExpirationDate: req.body.subscriptionExpirationDate || null,
-				status: "paymentDue",
-				registrationDate: new Date().toISOString(),
-			};
+      const user = {
+        ...req.body,
+        email: email.toLowerCase(),
+        desiredLevels: DEFAULT_DESIRED_LEVELS,
+        levels: DEFAULT_LEVELS,
+        bio: "",
+        isFirstLogin: false,
+        focus: "academic",
+        type: "corporate",
+        subscriptionExpirationDate: req.body.subscriptionExpirationDate || null,
+        status: "paymentDue",
+        registrationDate: new Date().toISOString(),
+      };
 
-			await setDoc(doc(db, "users", userId), user);
+      await setDoc(doc(db, "users", userId), user);
 
-			req.session.user = {...user, id: userId};
-			await req.session.save();
+      req.session.user = { ...user, id: userId };
+      await req.session.save();
 
-			res.status(200).json({user: {...user, id: userId}});
-		})
-		.catch((error) => {
-			console.log(error);
-			res.status(401).json({error});
-		});
+      res.status(200).json({ user: { ...user, id: userId } });
+    })
+    .catch((error) => {
+      console.log(error);
+      res.status(401).json({ error });
+    });
 }
diff --git a/src/pages/api/tickets/[id].ts b/src/pages/api/tickets/[id].ts
new file mode 100644
index 00000000..223ae689
--- /dev/null
+++ b/src/pages/api/tickets/[id].ts
@@ -0,0 +1,81 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from "next";
+import { app } from "@/firebase";
+import {
+  getFirestore,
+  getDoc,
+  doc,
+  deleteDoc,
+  setDoc,
+} from "firebase/firestore";
+import { withIronSessionApiRoute } from "iron-session/next";
+import { sessionOptions } from "@/lib/session";
+import { Ticket } from "@/interfaces/ticket";
+
+const db = getFirestore(app);
+
+export default withIronSessionApiRoute(handler, sessionOptions);
+
+async function handler(req: NextApiRequest, res: NextApiResponse) {
+  if (req.method === "GET") return await get(req, res);
+  if (req.method === "DELETE") return await del(req, res);
+  if (req.method === "PATCH") return await patch(req, res);
+
+  res.status(404).json(undefined);
+}
+
+async function get(req: NextApiRequest, res: NextApiResponse) {
+  if (!req.session.user) {
+    res.status(401).json({ ok: false });
+    return;
+  }
+
+  const { id } = req.query as { id: string };
+
+  const snapshot = await getDoc(doc(db, "tickets", id));
+
+  if (snapshot.exists()) {
+    res.status(200).json({ ...snapshot.data(), id: snapshot.id });
+  } else {
+    res.status(404).json(undefined);
+  }
+}
+
+async function del(req: NextApiRequest, res: NextApiResponse) {
+  if (!req.session.user) {
+    res.status(401).json({ ok: false });
+    return;
+  }
+
+  const { id } = req.query as { id: string };
+
+  const snapshot = await getDoc(doc(db, "tickets", id));
+  const data = snapshot.data() as Ticket;
+
+  const user = req.session.user;
+  if (user.type === "admin" || user.type === "developer") {
+    await deleteDoc(snapshot.ref);
+    res.status(200).json({ ok: true });
+    return;
+  }
+
+  res.status(403).json({ ok: false });
+}
+
+async function patch(req: NextApiRequest, res: NextApiResponse) {
+  if (!req.session.user) {
+    res.status(401).json({ ok: false });
+    return;
+  }
+
+  const { id } = req.query as { id: string };
+  const snapshot = await getDoc(doc(db, "tickets", id));
+
+  const user = req.session.user;
+  if (user.type === "admin" || user.type === "developer") {
+    await setDoc(snapshot.ref, req.body, { merge: true });
+    return res.status(200).json({ ok: true });
+  }
+
+  res.status(403).json({ ok: false });
+}
diff --git a/src/pages/api/tickets/index.ts b/src/pages/api/tickets/index.ts
new file mode 100644
index 00000000..009ed4b9
--- /dev/null
+++ b/src/pages/api/tickets/index.ts
@@ -0,0 +1,69 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import { sendEmail } from "@/email";
+import { app } from "@/firebase";
+import { Ticket, TicketTypeLabel } from "@/interfaces/ticket";
+import { sessionOptions } from "@/lib/session";
+import {
+  collection,
+  doc,
+  getDocs,
+  getFirestore,
+  setDoc,
+} from "firebase/firestore";
+import { withIronSessionApiRoute } from "iron-session/next";
+import moment from "moment";
+import type { NextApiRequest, NextApiResponse } from "next";
+import ShortUniqueId from "short-unique-id";
+
+const db = getFirestore(app);
+
+export default withIronSessionApiRoute(handler, sessionOptions);
+
+async function handler(req: NextApiRequest, res: NextApiResponse) {
+  if (!req.session.user) {
+    res.status(401).json({ ok: false });
+    return;
+  }
+
+  if (req.method === "GET") await get(req, res);
+  if (req.method === "POST") await post(req, res);
+}
+
+async function get(req: NextApiRequest, res: NextApiResponse) {
+  const snapshot = await getDocs(collection(db, "tickets"));
+
+  res.status(200).json(
+    snapshot.docs.map((doc) => ({
+      id: doc.id,
+      ...doc.data(),
+    })),
+  );
+}
+
+async function post(req: NextApiRequest, res: NextApiResponse) {
+  const body = req.body as Ticket;
+
+  const shortUID = new ShortUniqueId();
+  const id = body.id || shortUID.randomUUID(8);
+  await setDoc(doc(db, "tickets", id), body);
+  res.status(200).json({ ok: true });
+
+  try {
+    await sendEmail(
+      "submittedFeedback",
+      {
+        id,
+        subject: body.subject,
+        reporter: body.reporter,
+        date: moment(body.date).format("DD/MM/YYYY - HH:mm"),
+        type: TicketTypeLabel[body.type],
+        reportedFrom: body.reportedFrom,
+        description: body.description,
+      },
+      [body.reporter.email],
+      `Ticket ${id}: ${body.subject}`,
+    );
+  } catch (e) {
+    console.log(e);
+  }
+}
diff --git a/src/pages/tickets.tsx b/src/pages/tickets.tsx
new file mode 100644
index 00000000..d03afb4f
--- /dev/null
+++ b/src/pages/tickets.tsx
@@ -0,0 +1,338 @@
+import Layout from "@/components/High/Layout";
+import TicketDisplay from "@/components/High/TicketDisplay";
+import Select from "@/components/Low/Select";
+import Modal from "@/components/Modal";
+import useTickets from "@/hooks/useTickets";
+import useUser from "@/hooks/useUser";
+import useUsers from "@/hooks/useUsers";
+import {
+  Ticket,
+  TicketStatus,
+  TicketStatusLabel,
+  TicketType,
+  TicketTypeLabel,
+} from "@/interfaces/ticket";
+import { sessionOptions } from "@/lib/session";
+import { shouldRedirectHome } from "@/utils/navigation.disabled";
+import {
+  createColumnHelper,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+} from "@tanstack/react-table";
+import clsx from "clsx";
+import { withIronSessionSsr } from "iron-session/next";
+import moment from "moment";
+import Head from "next/head";
+import { useEffect, useState } from "react";
+import { BsArrowDown, BsArrowUp } from "react-icons/bs";
+import { ToastContainer } from "react-toastify";
+
+const columnHelper = createColumnHelper<Ticket>();
+
+export const getServerSideProps = withIronSessionSsr(({ req, res }) => {
+  const user = req.session.user;
+
+  if (!user || !user.isVerified) {
+    res.setHeader("location", "/login");
+    res.statusCode = 302;
+    res.end();
+    return {
+      props: {
+        user: null,
+      },
+    };
+  }
+
+  if (shouldRedirectHome(user) || user.type !== "developer") {
+    res.setHeader("location", "/");
+    res.statusCode = 302;
+    res.end();
+    return {
+      props: {
+        user: null,
+      },
+    };
+  }
+
+  return {
+    props: { user: req.session.user },
+  };
+}, sessionOptions);
+
+const StatusClassNames: { [key in TicketStatus]: string } = {
+  submitted: "bg-mti-gray-dim",
+  "in-progress": "bg-mti-blue-dark",
+  completed: "bg-mti-green-dark",
+};
+
+const TypesClassNames: { [key in TicketType]: string } = {
+  feedback: "bg-mti-green-light",
+  bug: "bg-mti-red-dark",
+  help: "bg-mti-blue-light",
+};
+
+export default function Tickets() {
+  const [filteredTickets, setFilteredTickets] = useState<Ticket[]>([]);
+  const [selectedTicket, setSelectedTicket] = useState<Ticket>();
+  const [assigneeFilter, setAssigneeFilter] = useState<string>();
+  const [dateSorting, setDateSorting] = useState<"asc" | "desc">("desc");
+
+  const [typeFilter, setTypeFilter] = useState<TicketType>();
+  const [statusFilter, setStatusFilter] = useState<TicketStatus>();
+
+  const { user } = useUser({ redirectTo: "/login" });
+  const { users } = useUsers();
+  const { tickets, reload } = useTickets();
+
+  const sortByDate = (a: Ticket, b: Ticket) => {
+    return moment((dateSorting === "desc" ? b : a).date).diff(
+      moment((dateSorting === "desc" ? a : b).date),
+    );
+  };
+
+  useEffect(() => {
+    const filters = [];
+    if (typeFilter) filters.push((x: Ticket) => x.type === typeFilter);
+    if (statusFilter) filters.push((x: Ticket) => x.status === statusFilter);
+    if (assigneeFilter)
+      filters.push((x: Ticket) => x.assignedTo === assigneeFilter);
+
+    setFilteredTickets(
+      [...filters.reduce((d, f) => d.filter(f), tickets)].sort(sortByDate),
+    );
+  }, [tickets, typeFilter, statusFilter, assigneeFilter, dateSorting]);
+
+  const columns = [
+    columnHelper.accessor("id", {
+      header: "ID",
+      cell: (info) => info.getValue(),
+    }),
+    columnHelper.accessor("type", {
+      header: "Type",
+      cell: (info) => (
+        <span
+          className={clsx(
+            "rounded-lg p-1 px-2 text-white",
+            TypesClassNames[info.getValue()],
+          )}
+        >
+          {TicketTypeLabel[info.getValue()]}
+        </span>
+      ),
+    }),
+    columnHelper.accessor("reporter", {
+      header: "Reporter",
+      cell: (info) => info.getValue().email,
+    }),
+    columnHelper.accessor("reportedFrom", {
+      header: "Reported From",
+      cell: (info) => info.getValue(),
+    }),
+    columnHelper.accessor("date", {
+      id: "date",
+      header: (
+        <button
+          className="flex items-center gap-2"
+          onClick={() =>
+            setDateSorting((prev) => (prev === "asc" ? "desc" : "asc"))
+          }
+        >
+          <span>Date</span>
+          {dateSorting === "desc" && <BsArrowDown />}
+          {dateSorting === "asc" && <BsArrowUp />}
+        </button>
+      ) as any,
+      cell: (info) => moment(info.getValue()).format("DD/MM/YYYY - HH:mm"),
+    }),
+    columnHelper.accessor("subject", {
+      header: "Subject",
+      cell: (info) =>
+        info.getValue().substring(0, 12) +
+        (info.getValue().length > 12 ? "..." : ""),
+    }),
+    columnHelper.accessor("status", {
+      header: "Status",
+      cell: (info) => (
+        <span
+          className={clsx(
+            "rounded-lg p-1 px-2 text-white",
+            StatusClassNames[info.getValue()],
+          )}
+        >
+          {TicketStatusLabel[info.getValue()]}
+        </span>
+      ),
+    }),
+    columnHelper.accessor("assignedTo", {
+      header: "Assignee",
+      cell: (info) => users.find((x) => x.id === info.getValue())?.name || "",
+    }),
+  ];
+
+  const table = useReactTable({
+    data: filteredTickets,
+    columns: columns,
+    getCoreRowModel: getCoreRowModel(),
+  });
+
+  return (
+    <>
+      <Modal
+        isOpen={!!selectedTicket}
+        onClose={() => {
+          reload();
+          setSelectedTicket(undefined);
+        }}
+      >
+        {selectedTicket && (
+          <TicketDisplay
+            user={user!}
+            ticket={selectedTicket}
+            onClose={() => {
+              reload();
+              setSelectedTicket(undefined);
+            }}
+          />
+        )}
+      </Modal>
+
+      <Head>
+        <title>Tickets Panel | EnCoach</title>
+        <meta
+          name="description"
+          content="A training platform for the IELTS exam provided by the Muscat Training Institute and developed by eCrop."
+        />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <ToastContainer />
+      {user && (
+        <Layout user={user} className="gap-6">
+          <h1 className="text-2xl font-semibold">Tickets</h1>
+
+          <div className="flex w-full items-center gap-4">
+            <div className="flex w-full flex-col gap-3">
+              <label className="text-mti-gray-dim text-base font-normal">
+                Status
+              </label>
+              <Select
+                options={Object.keys(TicketStatusLabel).map((x) => ({
+                  value: x,
+                  label: TicketStatusLabel[x as keyof typeof TicketStatusLabel],
+                }))}
+                value={
+                  statusFilter
+                    ? {
+                        value: statusFilter,
+                        label: TicketStatusLabel[statusFilter],
+                      }
+                    : undefined
+                }
+                onChange={(value) =>
+                  setStatusFilter((value?.value as TicketStatus) ?? undefined)
+                }
+                isClearable
+                placeholder="Status..."
+              />
+            </div>
+            <div className="flex w-full flex-col gap-3">
+              <label className="text-mti-gray-dim text-base font-normal">
+                Type
+              </label>
+              <Select
+                options={Object.keys(TicketTypeLabel).map((x) => ({
+                  value: x,
+                  label: TicketTypeLabel[x as keyof typeof TicketTypeLabel],
+                }))}
+                value={
+                  typeFilter
+                    ? { value: typeFilter, label: TicketTypeLabel[typeFilter] }
+                    : undefined
+                }
+                onChange={(value) =>
+                  setTypeFilter((value?.value as TicketType) ?? undefined)
+                }
+                isClearable
+                placeholder="Type..."
+              />
+            </div>
+            <div className="flex w-full flex-col gap-3">
+              <label className="text-mti-gray-dim text-base font-normal">
+                Assignee
+              </label>
+              <Select
+                options={[
+                  { value: "me", label: "Assigned to me" },
+                  ...users
+                    .filter((x) => ["admin", "developer"].includes(x.type))
+                    .map((u) => ({
+                      value: u.id,
+                      label: `${u.name} - ${u.email}`,
+                    })),
+                ]}
+                value={
+                  assigneeFilter
+                    ? {
+                        value: assigneeFilter,
+                        label: `${users.find((u) => u.id === assigneeFilter)?.name} - ${users.find((u) => u.id === assigneeFilter)?.email}`,
+                      }
+                    : null
+                }
+                onChange={(value) =>
+                  value
+                    ? setAssigneeFilter(
+                        value.value === "me" ? user.id : value.value,
+                      )
+                    : setAssigneeFilter(undefined)
+                }
+                placeholder="Assignee..."
+                isClearable
+              />
+            </div>
+          </div>
+
+          <table className="bg-mti-purple-ultralight/40 w-full rounded-xl">
+            <thead>
+              {table.getHeaderGroups().map((headerGroup) => (
+                <tr key={headerGroup.id}>
+                  {headerGroup.headers.map((header) => (
+                    <th className="px-4 py-4 text-left" key={header.id}>
+                      {header.isPlaceholder
+                        ? null
+                        : flexRender(
+                            header.column.columnDef.header,
+                            header.getContext(),
+                          )}
+                    </th>
+                  ))}
+                </tr>
+              ))}
+            </thead>
+            <tbody className="px-2">
+              {table.getRowModel().rows.map((row) => (
+                <tr
+                  className={clsx(
+                    "even:bg-mti-purple-ultralight/40 hover:bg-mti-purple-ultralight cursor-pointer rounded-lg py-2 odd:bg-white",
+                    "transition duration-300 ease-in-out",
+                  )}
+                  onClick={() => setSelectedTicket(row.original)}
+                  key={row.id}
+                >
+                  {row.getVisibleCells().map((cell) => (
+                    <td className="w-fit items-center px-4 py-2" key={cell.id}>
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext(),
+                      )}
+                    </td>
+                  ))}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </Layout>
+      )}
+    </>
+  );
+}