diff --git a/src/app/(app)/settings/backoffice/events/page.tsx b/src/app/(app)/settings/backoffice/events/page.tsx
new file mode 100644
index 0000000..1e157a6
--- /dev/null
+++ b/src/app/(app)/settings/backoffice/events/page.tsx
@@ -0,0 +1,869 @@
+"use client";
+
+import { AuthCheck } from "@/components/auth-check";
+import CustomCombobox from "@/components/combobox";
+import Input from "@/components/input";
+import Label from "@/components/label";
+import Modal from "@/components/modal";
+import SettingsWrapper from "@/components/settings-wrapper";
+import Table, {
+  HeaderElement,
+  TableCell,
+  TableContent,
+  TableHeader,
+  TableItemWrapper,
+} from "@/components/table";
+import {
+  useCreateCategory,
+  useCreateEvent,
+  useDeleteCategory,
+  useDeleteEvent,
+  useEditCategory,
+  useEditEvent,
+} from "@/lib/mutations/events";
+import { useGetAllCourses } from "@/lib/queries/courses";
+import { useGetCategories, useGetEvents } from "@/lib/queries/events";
+import { ICourse, IEventCategory, IEventResponse } from "@/lib/types";
+import { isAllDay, isAllDayEvent } from "@/lib/utils";
+import { Switch } from "@headlessui/react";
+import { zodResolver } from "@hookform/resolvers/zod";
+import clsx from "clsx";
+import moment from "moment";
+import Link from "next/link";
+import { createContext, useContext, useRef, useState } from "react";
+import { SubmitHandler, useForm } from "react-hook-form";
+import { twMerge } from "tailwind-merge";
+import z from "zod";
+
+interface IModalStateProps {
+  isOpen: boolean;
+  type:
+    | "editCategory"
+    | "editEvent"
+    | "newCategory"
+    | "newEvent"
+    | "delete"
+    | null;
+  data: IEventCategory | IEventResponse | null;
+}
+
+interface IEManagementProvider {
+  onClose: () => void;
+  onOpen: (
+    type:
+      | "editCategory"
+      | "editEvent"
+      | "newCategory"
+      | "newEvent"
+      | "delete"
+      | null,
+    data: IEventCategory | IEventResponse | null,
+  ) => void;
+  modalState: IModalStateProps;
+  categories: IEventCategory[];
+}
+
+interface IInputLineProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label: string;
+  placeholder?: string;
+  isColor?: boolean;
+  colorValue?: string;
+  disabled?: boolean;
+  className?: string;
+  errorMessage?: string;
+}
+
+function formatItems(items: ICourse[] | IEventCategory[] | undefined) {
+  if (!items) return [];
+
+  return items.map((item) => {
+    return { id: item.id, name: item.name };
+  });
+}
+
+function InputLine({
+  label,
+  placeholder,
+  isColor,
+  colorValue,
+  disabled = false,
+  className,
+  errorMessage,
+  onChange,
+  ...rest
+}: IInputLineProps) {
+  return (
+    <div
+      className={twMerge(
+        clsx("justify flex w-full flex-col gap-0.5", className),
+      )}
+    >
+      <Label size="large" className="text-dark font-semibold">
+        {label}
+      </Label>
+
+      <div className="inline-flex gap-1">
+        {isColor && (
+          <div
+            className="h-full w-8.5 rounded-xl border border-black/10 px-2 py-1.5"
+            style={{ backgroundColor: colorValue || "#fff" }}
+          />
+        )}
+
+        <Input
+          disabled={disabled}
+          placeholder={placeholder}
+          onChange={onChange}
+          className={clsx(
+            "bg-muted !py-1",
+            rest.type === "date" || rest.type === "datetime-local"
+              ? "[&>input]:!text-black [&>input:invalid]:!text-black"
+              : "",
+          )}
+          {...rest}
+        />
+      </div>
+
+      <span className="text-danger px-1">{errorMessage}</span>
+    </div>
+  );
+}
+
+function DeleteModalLayout() {
+  const deleteCategory = useDeleteCategory();
+  const deleteEvent = useDeleteEvent();
+  const { onClose, modalState } = useContext(EventsManagementContext);
+
+  if (!modalState.data) return null;
+
+  const isEvent = "category" in modalState.data;
+
+  const handleDelete = () => {
+    if (!isEvent && modalState.data?.id) {
+      deleteCategory.mutate(modalState.data.id);
+    } else if (modalState.data?.id) {
+      deleteEvent.mutate(modalState.data?.id);
+    }
+    onClose();
+  };
+
+  const name = isEvent
+    ? (modalState.data as IEventResponse).title
+    : (modalState.data as IEventCategory).name;
+
+  return (
+    <div className="w-full space-y-8">
+      <div className="space-y-2">
+        <h3 className="text-xl font-semibold">
+          Are you sure you want to delete this {isEvent ? "event" : "category"}?
+        </h3>
+        <div className="text-sm">
+          {isEvent ? (
+            <>
+              <span className="font-semibold">Event: </span>
+              {name}
+            </>
+          ) : (
+            <div className="inline-flex items-center gap-1">
+              <span className="material-symbols-outlined text-xl">error</span>
+              <p>{`Deleting category ${name} will remove all events linked to it`}</p>
+            </div>
+          )}
+        </div>
+      </div>
+      <div className="flex items-center justify-end gap-2">
+        <button
+          onClick={() => onClose()}
+          className="hover:bg-smoke border-dark/5 inline-flex h-fit cursor-pointer items-center justify-center space-x-0.5 rounded-lg border px-3 py-2 transition-all duration-200 hover:scale-95"
+        >
+          Cancel
+        </button>
+        <button
+          onClick={() => handleDelete()}
+          className="bg-primary-400 hover:bg-primary-400/95 inline-flex h-fit cursor-pointer items-center justify-center space-x-0.5 rounded-lg px-3 py-2 text-white transition-all duration-200 hover:scale-95"
+        >
+          Delete
+        </button>
+      </div>
+    </div>
+  );
+}
+
+function CategoryModalLayout() {
+  const { data: courses } = useGetAllCourses();
+  const editCategory = useEditCategory();
+  const createCategory = useCreateCategory();
+
+  const { onClose, modalState } = useContext(EventsManagementContext);
+
+  const isNew = modalState.type === "newCategory";
+  const category = modalState.data as IEventCategory;
+
+  const formSchema = z.object({
+    name: z.string().max(72, {
+      message: "The name should be smaller than 72 characters",
+    }),
+    color: z.string().regex(/^#[0-9a-fA-F]{6}$/, {
+      message: "Invalid color format!(e.g., #RRGGBB)",
+    }),
+  });
+
+  type FormSchema = z.infer<typeof formSchema>;
+
+  const {
+    register,
+    handleSubmit,
+    watch,
+    formState: { errors },
+  } = useForm<FormSchema>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      name: isNew ? "" : category?.name || "",
+      color: isNew ? "#EE7749" : category?.color || "#EE7749",
+    },
+  });
+
+  const colorValue = watch("color");
+
+  const handleSave: SubmitHandler<FormSchema> = (data) => {
+    if (!isNew && modalState.data?.id) {
+      editCategory.mutate({
+        id: modalState.data?.id,
+        category: {
+          name: data.name,
+          color: data.color,
+          course_id: selectedCourse?.id || "",
+          type: enabled ? "mandatory" : "optional",
+        },
+      });
+    } else {
+      createCategory.mutate({
+        name: data.name,
+        color: data.color,
+        course_id: selectedCourse?.id || "",
+        type: enabled ? "mandatory" : "optional",
+      });
+    }
+    onClose();
+  };
+
+  const [selectedCourse, setSelectedCourse] = useState<{
+    id: string;
+    name: string;
+  } | null>(
+    modalState.data && category?.course
+      ? { id: category.course.id, name: category.course.name }
+      : { id: "", name: "None" },
+  );
+
+  const [enabled, setEnabled] = useState(
+    modalState.data && category?.type === "mandatory" ? true : false,
+  );
+
+  return (
+    <form onSubmit={handleSubmit(handleSave)} className="w-full space-y-8">
+      <div className="space-y-2">
+        <h3 className="text-2xl font-semibold">
+          {isNew
+            ? "Creating a new event category"
+            : "Currently editing a category"}
+        </h3>
+        {modalState.data && !isNew && (
+          <p className="text-ld">
+            <span className="font-semibold">Category:</span> {category?.name}
+          </p>
+        )}
+      </div>
+
+      <div className="flex w-full flex-col gap-4">
+        <div className="flex gap-10">
+          <InputLine
+            id="name"
+            label="Name"
+            required
+            placeholder="category name"
+            errorMessage={errors.name?.message}
+            {...register("name", { required: true })}
+          />
+          <InputLine
+            id="color"
+            label="Color"
+            required
+            isColor
+            colorValue={colorValue}
+            placeholder="category color"
+            errorMessage={errors.color?.message}
+            {...register("color", { required: true })}
+          />
+        </div>
+
+        <div className="inline-flex gap-10 pr-4">
+          <div className="flex-1 space-y-1">
+            <Label size="large" className="text-dark flex-1 font-semibold">
+              Course
+            </Label>
+            <div className="relative">
+              <CustomCombobox
+                required
+                disableFlip
+                items={[{ id: "", name: "None" }, ...formatItems(courses)]}
+                selectedItem={selectedCourse}
+                setSelectedItem={setSelectedCourse}
+              />
+            </div>
+          </div>
+
+          <div className="flex flex-col">
+            <Label size="large" className="text-dark w-full font-semibold">
+              Mandatory
+            </Label>
+
+            <div className="flex h-full items-center">
+              <Switch
+                checked={enabled}
+                onChange={setEnabled}
+                className="group bg-dark/15 data-checked:bg-primary-400 inline-flex h-6 w-11 items-center rounded-full transition"
+              >
+                <span className="size-4 translate-x-1 rounded-full bg-white transition group-data-checked:translate-x-6" />
+              </Switch>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex items-center justify-end gap-2">
+        <button
+          type="button"
+          onClick={() => onClose()}
+          className="hover:bg-smoke border-dark/5 inline-flex h-fit cursor-pointer items-center justify-center space-x-0.5 rounded-lg border px-3 py-2 transition-all duration-200 hover:scale-95"
+        >
+          Cancel
+        </button>
+        <button
+          type="submit"
+          className="bg-primary-400 hover:bg-primary-400/95 inline-flex h-fit cursor-pointer items-center justify-center space-x-0.5 rounded-lg px-3 py-2 text-white transition-all duration-200 hover:scale-95"
+        >
+          Save
+        </button>
+      </div>
+    </form>
+  );
+}
+
+function EventModalLayout() {
+  const editEvent = useEditEvent();
+  const createEvent = useCreateEvent();
+  const formRef = useRef<HTMLFormElement>(null);
+
+  const { onClose, modalState, categories } = useContext(
+    EventsManagementContext,
+  );
+
+  const isNew = modalState.type === "newEvent";
+
+  const event = modalState.data as IEventResponse;
+  const start = !isNew ? moment.utc(event?.start) : null;
+  const end = !isNew ? moment.utc(event?.end) : null;
+
+  const formSchema = z
+    .object({
+      name: z.string().max(72, {
+        message: "The name should be smaller than 72 characters",
+      }),
+      start: z.date(),
+      end: z.date(),
+      place: z.string().optional(),
+      link: z
+        .string()
+        .optional()
+        .refine((val) => {
+          if (!val) return true;
+          try {
+            new URL(val);
+            return true;
+          } catch {
+            return false;
+          }
+        }, "Must be a valid URL starting with http:// or https://")
+        .refine(
+          (val) => !val || val.length <= 72,
+          "The link should be smaller than 72 characters",
+        ),
+    })
+    .refine((data) => data.end >= data.start, {
+      message: "End date must be equal or after start date",
+      path: ["end"],
+    });
+
+  type FormSchema = z.infer<typeof formSchema>;
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<FormSchema>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      name: isNew ? "" : event?.title || "",
+      place: isNew ? "" : event?.place || "",
+      link: isNew ? "" : event?.link || "",
+    },
+  });
+
+  const handleSave: SubmitHandler<FormSchema> = (data) => {
+    if (!isNew && modalState.data?.id) {
+      editEvent.mutate({
+        id: modalState.data?.id,
+        event: {
+          title: data.name,
+          start: moment.utc(data.start).format("YYYY-MM-DDTHH:mm:ss[Z]"),
+          end: moment.utc(data.end).format("YYYY-MM-DDTHH:mm:ss[Z]"),
+          place: data.place || "",
+          link: data.link || "",
+          category_id: selectedCategory!.id,
+        },
+      });
+    } else {
+      createEvent.mutate({
+        title: data.name,
+        start: moment.utc(data.start).format("YYYY-MM-DDTHH:mm:ss[Z]"),
+        end: moment.utc(data.end).format("YYYY-MM-DDTHH:mm:ss[Z]"),
+        place: data.place || "",
+        link: data.link || "",
+        category_id: selectedCategory!.id,
+      });
+    }
+    onClose();
+  };
+
+  const [selectedCategory, setSelectedCategory] = useState<{
+    id: string;
+    name: string;
+  } | null>(
+    modalState.data && event?.category
+      ? { id: event.category.id, name: event.category.name }
+      : null,
+  );
+
+  const [enabled, setEnabled] = useState(isAllDayEvent(start, end));
+
+  return (
+    <div className="w-full space-y-8">
+      <div className="space-y-2">
+        <h3 className="text-2xl font-semibold">
+          {isNew ? "Creating a new Event" : "Currently editing an event"}
+        </h3>
+        {modalState.data && !isNew && (
+          <p className="text-ld">
+            <span className="font-semibold">Event:</span> {event?.title}
+          </p>
+        )}
+      </div>
+
+      <form
+        ref={formRef}
+        onSubmit={handleSubmit(handleSave)}
+        className="space-y-8"
+      >
+        <div className="flex w-full flex-col gap-4">
+          <div className="flex gap-10">
+            <InputLine
+              id="name"
+              label="Name"
+              required
+              placeholder="event name"
+              errorMessage={errors.name?.message}
+              {...register("name", { required: true })}
+            />
+            <InputLine
+              id="place"
+              label="Place (optional)"
+              placeholder="event place"
+              errorMessage={errors.place?.message}
+              {...register("place")}
+            />
+          </div>
+
+          <InputLine
+            id="link"
+            label="Link (optional)"
+            placeholder="event link"
+            errorMessage={errors.link?.message}
+            {...register("link")}
+          />
+
+          <div className="flex-1 space-y-1">
+            <Label size="large" className="text-dark flex-1 font-semibold">
+              Category
+            </Label>
+            <div className="relative">
+              <CustomCombobox
+                disableFlip
+                required
+                items={formatItems(categories)}
+                selectedItem={selectedCategory}
+                setSelectedItem={setSelectedCategory}
+              />
+            </div>
+          </div>
+
+          <div className="flex gap-10">
+            <InputLine
+              key={`start-${enabled}`}
+              label={enabled ? "Start Date" : "Start Date Time"}
+              type={enabled ? "date" : "datetime-local"}
+              id="start"
+              required
+              defaultValue={
+                isNew
+                  ? ""
+                  : start?.format(
+                      enabled ? "YYYY-MM-DD" : "YYYY-MM-DDTHH:mm",
+                    ) || ""
+              }
+              errorMessage={errors.start?.message}
+              {...register("start", { valueAsDate: true, required: true })}
+            />
+            <InputLine
+              key={`end-${enabled}`}
+              label={enabled ? "End Date" : "End Date Time"}
+              type={enabled ? "date" : "datetime-local"}
+              id="end"
+              required
+              defaultValue={
+                isNew
+                  ? ""
+                  : end?.format(enabled ? "YYYY-MM-DD" : "YYYY-MM-DDTHH:mm") ||
+                    ""
+              }
+              errorMessage={errors.end?.message}
+              {...register("end", { valueAsDate: true, required: true })}
+            />
+          </div>
+
+          <div className="flex w-fit flex-col">
+            <Label
+              size="large"
+              className="text-dark w-full font-semibold whitespace-nowrap"
+            >
+              All Day
+            </Label>
+
+            <div className="flex h-full items-center">
+              <Switch
+                checked={enabled}
+                onChange={setEnabled}
+                className="group bg-dark/15 data-checked:bg-primary-400 inline-flex h-6 w-11 items-center rounded-full transition"
+              >
+                <span className="size-4 translate-x-1 rounded-full bg-white transition group-data-checked:translate-x-6" />
+              </Switch>
+            </div>
+          </div>
+        </div>
+
+        <div className="flex items-center justify-end gap-2">
+          <button
+            type="button"
+            onClick={() => onClose()}
+            className="hover:bg-smoke border-dark/5 inline-flex h-fit cursor-pointer items-center justify-center space-x-0.5 rounded-lg border px-3 py-2 transition-all duration-200 hover:scale-95"
+          >
+            Cancel
+          </button>
+          <button
+            type="submit"
+            className="bg-primary-400 hover:bg-primary-400/95 inline-flex h-fit cursor-pointer items-center justify-center space-x-0.5 rounded-lg px-3 py-2 text-white transition-all duration-200 hover:scale-95"
+          >
+            Save
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+}
+
+function ActionsBox({
+  type,
+  data,
+}: {
+  type: "category" | "event";
+  data: IModalStateProps["data"];
+}) {
+  const { onOpen } = useContext(EventsManagementContext);
+
+  return (
+    <div className="inline-flex gap-3">
+      <button
+        onClick={() =>
+          onOpen(type == "category" ? "editCategory" : "editEvent", data)
+        }
+        className="group cursor-pointer"
+      >
+        <span className="material-symbols-outlined text-2xl transition-transform ease-in group-hover:scale-90">
+          edit
+        </span>
+      </button>
+      <button
+        onClick={() => onOpen("delete", data)}
+        className="group cursor-pointer"
+      >
+        <span className="material-symbols-outlined text-danger text-2xl transition-transform ease-in group-hover:scale-90">
+          delete
+        </span>
+      </button>
+    </div>
+  );
+}
+
+function ColorTagCard({ color }: { color: string }) {
+  return (
+    <div
+      className="w-fit rounded px-2 py-1 text-xs"
+      style={{ background: `${color}` }}
+    >
+      {color}
+    </div>
+  );
+}
+
+function DateCard({ start, end }: { start: string; end: string }) {
+  const startFormatted = moment.utc(start);
+  const endFormatted = moment.utc(end);
+
+  return (
+    <div className="flex w-fit flex-col">
+      <p>{startFormatted.format("DD/MM/YYYY")}</p>
+      <p>{endFormatted.format("DD/MM/YYYY")}</p>
+    </div>
+  );
+}
+
+function TimeCard({ start, end }: { start: string; end: string }) {
+  const startFormatted = moment.utc(start);
+  const endFormatted = moment.utc(end);
+
+  return (
+    <div className="w-fit">
+      {isAllDay(startFormatted, endFormatted) ? (
+        "All Day"
+      ) : (
+        <p>{`${startFormatted.format("HH:mm")} - ${endFormatted.format("HH:mm")}`}</p>
+      )}
+    </div>
+  );
+}
+
+function CategoryItem({ category }: { category: IEventCategory }) {
+  return (
+    <TableItemWrapper className="text-dark/80">
+      <TableCell className="font-semibold">{category.name}</TableCell>
+      <TableCell>
+        <ColorTagCard color={category.color} />
+      </TableCell>
+      <TableCell>{category.course?.name}</TableCell>
+      <TableCell className="text-dark/70 flex justify-center">
+        {category.type === "mandatory" ? "Yes" : "No"}
+      </TableCell>
+      <TableCell>
+        <ActionsBox type="category" data={category} />
+      </TableCell>
+    </TableItemWrapper>
+  );
+}
+
+function EventItem({ event }: { event: IEventResponse }) {
+  return (
+    <TableItemWrapper className="text-dark/80">
+      <TableCell>
+        <div className="flex flex-col">
+          <span className="font-semibold">{event.title}</span>
+          {event.link && (
+            <Link
+              rel="noopener noreferrer"
+              target="_blank"
+              href={event.link}
+              className="text-primary-400 text-sm transition-opacity duration-300 hover:opacity-60"
+            >
+              {event.link}
+            </Link>
+          )}
+        </div>
+      </TableCell>
+      <TableCell>{event.category?.name}</TableCell>
+      <TableCell>
+        <DateCard start={event.start} end={event.end} />
+      </TableCell>
+      <TableCell>
+        <TimeCard start={event.start} end={event.end} />
+      </TableCell>
+      <TableCell>{`${event.place ? event.place : "none"}`}</TableCell>
+      <TableCell>
+        <ActionsBox type="event" data={event} />
+      </TableCell>
+    </TableItemWrapper>
+  );
+}
+
+const EventsManagementContext = createContext<IEManagementProvider>({
+  onClose: () => {},
+  onOpen: () => {},
+  modalState: { isOpen: false, type: null, data: null },
+  categories: [],
+});
+
+export default function EventsManagement() {
+  const { data: categories = [] } = useGetCategories();
+  const { data: events = [] } = useGetEvents();
+
+  const [modalState, setModalState] = useState<IModalStateProps>({
+    isOpen: false,
+    type: null,
+    data: null,
+  });
+
+  const onClose = () => {
+    setModalState({
+      isOpen: false,
+      type: modalState.type,
+      data: modalState.data,
+    });
+  };
+
+  const onOpen = (
+    type: IModalStateProps["type"],
+    data: IModalStateProps["data"],
+  ) => {
+    setModalState({ isOpen: true, type: type, data: data });
+  };
+
+  return (
+    <>
+      <title>Events & Categories | Pombo</title>
+      <AuthCheck userTypes={["admin", "professor", "department"]}>
+        <SettingsWrapper title="Events & Categories">
+          <EventsManagementContext.Provider
+            value={{ onClose, onOpen, modalState, categories }}
+          >
+            <div className="flex h-full flex-col gap-4">
+              <section className="flex h-1/2 min-h-0 flex-col gap-4">
+                <div className="flex items-center justify-between">
+                  <div className="space-y-1">
+                    <h2 className="text-2xl font-semibold">Event Categories</h2>
+                    <p>Manage categories for your calendar events</p>
+                  </div>
+
+                  <button
+                    onClick={() => onOpen("newCategory", null)}
+                    className="bg-primary-400 hover:bg-primary-400/95 inline-flex h-fit cursor-pointer items-center justify-center space-x-1.5 rounded-lg px-3 py-2 text-white transition-all duration-200 hover:scale-95"
+                  >
+                    <span className="material-symbols-outlined text-xl">
+                      add
+                    </span>
+                    <p className="text-sm font-semibold">New Category</p>
+                  </button>
+                </div>
+
+                <Table>
+                  <TableHeader>
+                    <HeaderElement className="w-2/8" title="Category" />
+                    <HeaderElement className="w-1/8" title="Color" />
+                    <HeaderElement className="w-4/8" title="Course" />
+                    <HeaderElement className="w-fit" title="Mandatory" />
+                    <HeaderElement className="w-fit" title="Actions" />
+                  </TableHeader>
+
+                  <TableContent>
+                    {categories && categories.length > 0 ? (
+                      categories.map((category) => (
+                        <CategoryItem key={category.id} category={category} />
+                      ))
+                    ) : (
+                      <tr>
+                        <td colSpan={5} className="p-4">
+                          <p className="text-dark/50 text-center">
+                            No categories
+                          </p>
+                        </td>
+                      </tr>
+                    )}
+                  </TableContent>
+                </Table>
+              </section>
+
+              <section className="flex h-1/2 min-h-0 flex-col gap-4">
+                <div className="flex items-center justify-between">
+                  <div className="space-y-1">
+                    <h2 className="text-2xl font-semibold">Calendar Events</h2>
+                    <p>Create and manage events for your calendar</p>
+                  </div>
+
+                  <button
+                    onClick={() => onOpen("newEvent", null)}
+                    className="bg-primary-400 hover:bg-primary-400/95 inline-flex h-fit cursor-pointer items-center justify-center space-x-1.5 rounded-lg px-3 py-2 text-white transition-all duration-200 hover:scale-95"
+                  >
+                    <span className="material-symbols-outlined text-xl">
+                      add
+                    </span>
+                    <p className="text-sm font-semibold">New Event</p>
+                  </button>
+                </div>
+
+                <Table>
+                  <TableHeader>
+                    <HeaderElement className="w-2/12" title="Event" />
+                    <HeaderElement className="w-3/12" title="Category" />
+                    <HeaderElement className="w-1/12" title="Date" />
+                    <HeaderElement className="w-2/12" title="Time" />
+                    <HeaderElement className="w-3/12" title="Place" />
+                    <HeaderElement className="w-1/12" title="Actions" />
+                  </TableHeader>
+
+                  <TableContent>
+                    {events && events.length > 0 ? (
+                      events.map((event) => (
+                        <EventItem key={event.id} event={event} />
+                      ))
+                    ) : (
+                      <tr>
+                        <td colSpan={6} className="p-4">
+                          <p className="text-dark/50 text-center">No events</p>
+                        </td>
+                      </tr>
+                    )}
+                  </TableContent>
+                </Table>
+              </section>
+            </div>
+
+            <Modal
+              modalState={modalState.isOpen}
+              onClose={() =>
+                setModalState({
+                  isOpen: false,
+                  type: modalState.type,
+                  data: modalState.data,
+                })
+              }
+              className={
+                modalState.type &&
+                [
+                  "newCategory",
+                  "editCategory",
+                  "newEvent",
+                  "editEvent",
+                ].includes(modalState.type)
+                  ? "max-w-2xl"
+                  : ""
+              }
+            >
+              {modalState.type == "delete" && <DeleteModalLayout />}
+              {(modalState.type == "editCategory" ||
+                modalState.type == "newCategory") && <CategoryModalLayout />}
+              {(modalState.type == "editEvent" ||
+                modalState.type == "newEvent") && <EventModalLayout />}
+            </Modal>
+          </EventsManagementContext.Provider>
+        </SettingsWrapper>
+      </AuthCheck>
+    </>
+  );
+}
diff --git a/src/components/combobox.tsx b/src/components/combobox.tsx
index 195c8a7..d7fa305 100644
--- a/src/components/combobox.tsx
+++ b/src/components/combobox.tsx
@@ -17,6 +17,8 @@ interface ICustomCombobox {
   setSelectedItem: (item: IItemProps | null) => void;
   className?: string;
   placeholder?: string;
+  disableFlip?: boolean;
+  required?: boolean;
 }
 
 export default function CustomCombobox({
@@ -25,6 +27,8 @@ export default function CustomCombobox({
   setSelectedItem,
   className,
   placeholder,
+  disableFlip = false,
+  required = false,
 }: ICustomCombobox) {
   const [query, setQuery] = useState("");
 
@@ -47,8 +51,9 @@ export default function CustomCombobox({
           placeholder={placeholder}
           displayValue={(item: IItemProps) => item?.name || ""}
           onChange={(event) => setQuery(event.target.value)}
+          required={required}
           className={clsx(
-            "bg-muted border-dark/10 w-full rounded-lg border py-1.5 pr-8 pl-3 text-sm/6",
+            "bg-muted border-dark/10 w-full rounded-xl border py-1.5 pr-8 pl-3 text-sm/6",
             "focus:not-data-focus:outline-none data-focus:outline-2 data-focus:-outline-offset-2 data-focus:outline-white/25",
           )}
         />
@@ -60,11 +65,15 @@ export default function CustomCombobox({
         </ComboboxButton>
       </div>
       <ComboboxOptions
-        anchor="bottom"
+        anchor={disableFlip ? undefined : "bottom"}
         transition
         className={clsx(
-          "border-dark/5 bg-muted w-(--input-width) rounded-xl border p-1 [--anchor-gap:--spacing(1)] empty:invisible",
-          "transition duration-100 ease-in data-leave:data-closed:opacity-0",
+          "border-dark/5 bg-muted z-50 rounded-xl border p-1 empty:invisible",
+          "origin-top transition duration-150 ease-out",
+          "data-closed:scale-95 data-closed:opacity-0",
+          disableFlip
+            ? "absolute top-full right-0 left-0 mt-1 max-h-60 overflow-auto"
+            : "w-(--input-width) [--anchor-gap:--spacing(1)]",
         )}
       >
         {filteredItems.map((item) => (
diff --git a/src/components/input.tsx b/src/components/input.tsx
index 9dc4847..5f2f57e 100644
--- a/src/components/input.tsx
+++ b/src/components/input.tsx
@@ -10,7 +10,6 @@ interface IInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
 export default function Input({
   type,
   className,
-  value,
   center_text,
   min,
   max,
@@ -27,18 +26,16 @@ export default function Input({
         clsx(
           className,
           textAlignment,
-          "flex items-center rounded-xl border border-black/10 px-2 py-1.5 text-black outline-none md:px-3 md:py-2.5",
+          "flex w-full items-center rounded-xl border border-black/10 px-2 py-1.5 text-black outline-none md:px-3 md:py-2.5",
         ),
       )}
     >
       <input
         type={mutType}
-        value={value}
         className={twMerge(
           clsx(
-            className,
             textAlignment,
-            "flex-1 bg-transparent text-black outline-none placeholder:text-black/30 invalid:border-red-500 invalid:text-red-600",
+            "w-full flex-1 bg-transparent text-black outline-none placeholder:text-black/30 invalid:border-red-500 invalid:text-red-600",
           ),
         )}
         min={type === "number" ? min : undefined}
diff --git a/src/components/modal.tsx b/src/components/modal.tsx
new file mode 100644
index 0000000..9e49bee
--- /dev/null
+++ b/src/components/modal.tsx
@@ -0,0 +1,65 @@
+import {
+  Dialog,
+  DialogPanel,
+  Transition,
+  TransitionChild,
+} from "@headlessui/react";
+import clsx from "clsx";
+import { Fragment } from "react";
+import { twMerge } from "tailwind-merge";
+
+interface IModalProps {
+  modalState: boolean;
+  onClose: () => void;
+  children: React.ReactNode;
+  className?: string;
+}
+
+export default function Modal({
+  modalState,
+  onClose,
+  children,
+  className,
+}: IModalProps) {
+  return (
+    <Transition appear show={modalState} as={Fragment}>
+      <Dialog as="div" className="relative z-50" onClose={onClose}>
+        <TransitionChild
+          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="bg-dark/5 fixed inset-0 backdrop-blur-sm" />
+        </TransitionChild>
+        <div className="fixed inset-0 flex w-screen items-center justify-center p-4">
+          <TransitionChild
+            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"
+          >
+            <DialogPanel
+              className={twMerge(
+                clsx(
+                  "bg-muted/65 relative max-w-lg flex-1 space-y-4 rounded-2xl border border-black/10 p-6 shadow-xl focus:outline-0",
+                  className,
+                ),
+              )}
+            >
+              <div className="flex h-full w-full items-center justify-center">
+                {children}
+              </div>
+            </DialogPanel>
+          </TransitionChild>
+        </div>
+      </Dialog>
+    </Transition>
+  );
+}
diff --git a/src/components/sidebar-settings.tsx b/src/components/sidebar-settings.tsx
index d62abc0..df377c3 100644
--- a/src/components/sidebar-settings.tsx
+++ b/src/components/sidebar-settings.tsx
@@ -34,50 +34,74 @@ export default function SidebarSettings() {
           </SidebarItem>
         </SidebarItemList>
 
-        {user.data && ["admin", "professor"].includes(user.data.type) && (
-          <>
-            <SidebarHeader>Backoffice</SidebarHeader>
+        {user.data &&
+          ["admin", "professor", "department"].includes(user.data.type) && (
+            <>
+              <SidebarHeader>Backoffice</SidebarHeader>
 
-            <SidebarItemList>
-              <SidebarItem
-                id="configurations"
-                href="/settings/backoffice/configurations"
-              >
-                <SidebarItemLabel icon="settings" label="Configurations" />
-              </SidebarItem>
+              <SidebarItemList>
+                {["admin", "professor"].includes(user.data.type) && (
+                  <>
+                    <SidebarItem
+                      id="configurations"
+                      href="/settings/backoffice/configurations"
+                    >
+                      <SidebarItemLabel
+                        icon="settings"
+                        label="Configurations"
+                      />
+                    </SidebarItem>
 
-              <SidebarItem id="exports" href="/settings/backoffice/exports">
-                <SidebarItemLabel icon="download" label="Export" />
-              </SidebarItem>
+                    <SidebarItem
+                      id="exports"
+                      href="/settings/backoffice/exports"
+                    >
+                      <SidebarItemLabel icon="download" label="Export" />
+                    </SidebarItem>
 
-              <SidebarItem id="jobs" href="/settings/backoffice/jobs">
-                <SidebarItemLabel icon="data_table" label="Jobs Monitor" />
-              </SidebarItem>
+                    <SidebarItem id="jobs" href="/settings/backoffice/jobs">
+                      <SidebarItemLabel
+                        icon="data_table"
+                        label="Jobs Monitor"
+                      />
+                    </SidebarItem>
 
-              <SidebarItem
-                id="statistics"
-                href="/settings/backoffice/statistics"
-              >
-                <SidebarItemLabel icon="insights" label="Statistics" />
-              </SidebarItem>
+                    <SidebarItem
+                      id="statistics"
+                      href="/settings/backoffice/statistics"
+                    >
+                      <SidebarItemLabel icon="insights" label="Statistics" />
+                    </SidebarItem>
+                  </>
+                )}
 
-              {user.data && user.data.type === "admin" && (
-                <>
-                  <SidebarItem id="imports" href="/settings/backoffice/imports">
-                    <SidebarItemLabel icon="upload" label="Import" />
-                  </SidebarItem>
+                {user.data && user.data.type === "admin" && (
+                  <>
+                    <SidebarItem
+                      id="imports"
+                      href="/settings/backoffice/imports"
+                    >
+                      <SidebarItemLabel icon="upload" label="Import" />
+                    </SidebarItem>
 
-                  <SidebarItem
-                    id="generator"
-                    href="/settings/backoffice/generator"
-                  >
-                    <SidebarItemLabel icon="sdk" label="Schedule Generator" />
-                  </SidebarItem>
-                </>
-              )}
-            </SidebarItemList>
-          </>
-        )}
+                    <SidebarItem
+                      id="generator"
+                      href="/settings/backoffice/generator"
+                    >
+                      <SidebarItemLabel icon="sdk" label="Schedule Generator" />
+                    </SidebarItem>
+                  </>
+                )}
+
+                <SidebarItem id="events" href="/settings/backoffice/events">
+                  <SidebarItemLabel
+                    icon="event_upcoming"
+                    label="Events & Categories"
+                  />
+                </SidebarItem>
+              </SidebarItemList>
+            </>
+          )}
       </Sidebar>
     </div>
   );
diff --git a/src/components/table.tsx b/src/components/table.tsx
new file mode 100644
index 0000000..c9f00ee
--- /dev/null
+++ b/src/components/table.tsx
@@ -0,0 +1,61 @@
+import clsx from "clsx";
+
+interface IParentProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function HeaderElement({
+  title,
+  className,
+}: {
+  title: string;
+  className?: string;
+}) {
+  return (
+    <th
+      className={clsx("text-dark/50 p-4 text-start font-semibold", className)}
+    >
+      {title}
+    </th>
+  );
+}
+
+export function TableHeader({ children, className }: IParentProps) {
+  return (
+    <thead className={clsx("sticky top-0 z-10 bg-white shadow-sm", className)}>
+      <tr>{children}</tr>
+    </thead>
+  );
+}
+
+export function TableContent({ children, className }: IParentProps) {
+  return (
+    <tbody
+      className={clsx("divide-dark/10 divide-y overflow-y-scroll", className)}
+    >
+      {children}
+    </tbody>
+  );
+}
+
+export function TableItemWrapper({ children, className }: IParentProps) {
+  return <tr className={clsx("", className)}>{children}</tr>;
+}
+
+export function TableCell({ children, className }: IParentProps) {
+  return <td className={clsx("p-4", className)}>{children}</td>;
+}
+
+export default function Table({ children, className }: IParentProps) {
+  return (
+    <div
+      className={clsx(
+        "border-dark/10 flex h-full min-h-0 flex-col overflow-auto rounded-xl border",
+        className,
+      )}
+    >
+      <table className="w-full">{children}</table>
+    </div>
+  );
+}
diff --git a/src/contexts/events-provider.tsx b/src/contexts/events-provider.tsx
index d09a9b5..4c46f45 100644
--- a/src/contexts/events-provider.tsx
+++ b/src/contexts/events-provider.tsx
@@ -12,7 +12,7 @@ import {
   IEventCategory,
   IEventResponse,
 } from "@/lib/types";
-import { getContrastColor } from "@/lib/utils";
+import { getContrastColor, isAllDayEvent } from "@/lib/utils";
 import moment from "moment";
 import { createContext, useEffect, useState } from "react";
 
@@ -106,14 +106,6 @@ function formatEvents(events: IEventResponse[]) {
     const start = moment.utc(event.start);
     const end = moment.utc(event.end);
 
-    const startsAtMidnight =
-      start.hours() === 0 && start.minutes() === 0 && start.seconds() === 0;
-    const endsAtMidnight =
-      end.hours() === 0 && end.minutes() === 0 && end.seconds() === 0;
-    const allday =
-      (startsAtMidnight && endsAtMidnight) ||
-      end.diff(start, "days", true) >= 1;
-
     return {
       id: event.id,
       title: event.title,
@@ -124,7 +116,7 @@ function formatEvents(events: IEventResponse[]) {
       link: event.link,
       eventColor: event.category.color,
       textColor: getContrastColor(event.category.color, 5),
-      allDay: allday,
+      allDay: isAllDayEvent(start, end),
     };
   });
 }
diff --git a/src/lib/events.ts b/src/lib/events.ts
index f81ed46..d47e1e0 100644
--- a/src/lib/events.ts
+++ b/src/lib/events.ts
@@ -1,5 +1,10 @@
 import { api } from "./api";
-import { IEventResponse } from "./types";
+import {
+  IEventCategory,
+  IEventCategoryRequest,
+  IEventRequest,
+  IEventResponse,
+} from "./types";
 
 export async function getEvents() {
   try {
@@ -10,6 +15,32 @@ export async function getEvents() {
   }
 }
 
+export async function deleteEvent(id: string) {
+  try {
+    await api.delete(`/events/${id}`);
+  } catch {
+    throw new Error(`Failed to delete event with id: ${id}.`);
+  }
+}
+
+export async function editEvent(id: string, event: IEventRequest) {
+  try {
+    const res = await api.patch(`/events/${id}`, { event });
+    return res.data.event;
+  } catch {
+    throw new Error(`Failed to edit event with id: ${id}`);
+  }
+}
+
+export async function createEvent(event: IEventRequest) {
+  try {
+    const res = await api.post("/events", { event });
+    return res.data.event;
+  } catch {
+    throw new Error("Failed to create new event.");
+  }
+}
+
 export async function getSelectedEvents() {
   try {
     const res = await api.get<{ events: IEventResponse[] }>("/events/selected");
@@ -32,7 +63,9 @@ export async function getEventById(id: string) {
 
 export async function getCategories() {
   try {
-    const res = await api.get("/event_categories");
+    const res = await api.get<{ event_categories: IEventCategory[] }>(
+      "/event_categories",
+    );
     return res.data.event_categories;
   } catch {
     throw new Error(`Failed to fetch categories. Please try again later.`);
@@ -61,6 +94,35 @@ export async function getSelectedCateries() {
   }
 }
 
+export async function deleteCategory(id: string) {
+  try {
+    await api.delete(`/event_categories/${id}`);
+  } catch {
+    throw new Error(`Failed to delete category with id: ${id}.`);
+  }
+}
+
+export async function editCategory(
+  id: string,
+  event_category: IEventCategoryRequest,
+) {
+  try {
+    const res = await api.patch(`/event_categories/${id}`, { event_category });
+    return res.data.event_category;
+  } catch {
+    throw new Error(`Failed to edit category with id: ${id}`);
+  }
+}
+
+export async function createCategory(event_category: IEventCategoryRequest) {
+  try {
+    const res = await api.post("/event_categories", { event_category });
+    return res.data.event_category;
+  } catch {
+    throw new Error("Failed to create new category.");
+  }
+}
+
 export async function updateStudentCategories({
   event_categories,
 }: {
diff --git a/src/lib/mutations/events.ts b/src/lib/mutations/events.ts
index 1308a75..6dac5fc 100644
--- a/src/lib/mutations/events.ts
+++ b/src/lib/mutations/events.ts
@@ -1,5 +1,19 @@
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { updateStudentCategories } from "../events";
+import {
+  createCategory,
+  createEvent,
+  deleteCategory,
+  deleteEvent,
+  editCategory,
+  editEvent,
+  updateStudentCategories,
+} from "../events";
+import {
+  IEventCategory,
+  IEventCategoryRequest,
+  IEventRequest,
+  IEventResponse,
+} from "../types";
 
 export function useUpdateStudentCategories() {
   const qc = useQueryClient();
@@ -12,3 +26,83 @@ export function useUpdateStudentCategories() {
     },
   });
 }
+
+export function useDeleteCategory() {
+  const qc = useQueryClient();
+
+  return useMutation({
+    mutationFn: deleteCategory,
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ["categories"] });
+      qc.invalidateQueries({ queryKey: ["events"] });
+    },
+  });
+}
+
+export function useEditCategory() {
+  const qc = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({
+      id,
+      category,
+    }: {
+      id: string;
+      category: IEventCategoryRequest;
+    }) => editCategory(id, category),
+    onSuccess: (data) => {
+      qc.setQueryData<IEventCategory[]>(["categories"], (old) => {
+        if (!old) return [data];
+        return old.map((cat) => (cat.id === data.id ? data : cat));
+      });
+    },
+  });
+}
+
+export function useCreateCategory() {
+  const qc = useQueryClient();
+
+  return useMutation({
+    mutationFn: createCategory,
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ["categories"] });
+    },
+  });
+}
+
+export function useDeleteEvent() {
+  const qc = useQueryClient();
+
+  return useMutation({
+    mutationFn: deleteEvent,
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ["events"] });
+    },
+  });
+}
+
+export function useEditEvent() {
+  const qc = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ id, event }: { id: string; event: IEventRequest }) =>
+      editEvent(id, event),
+    onSuccess: (data) => {
+      qc.setQueryData<IEventResponse[]>(["events"], (old) => {
+        if (!old) return [data];
+        return old.map((event) => (event.id === data.id ? data : event));
+      });
+    },
+  });
+}
+
+export function useCreateEvent() {
+  const qc = useQueryClient();
+
+  return useMutation({
+    mutationFn: createEvent,
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ["events"] });
+    },
+  });
+}
diff --git a/src/lib/types.ts b/src/lib/types.ts
index 6118d05..0804539 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -102,6 +102,10 @@ export interface IEventResponse {
   link?: string;
 }
 
+export type IEventRequest = Omit<IEventResponse, "id" | "category"> & {
+  category_id: string;
+};
+
 export interface IJobProps {
   id: number;
   type: string;
@@ -115,11 +119,15 @@ export interface IJobProps {
 export interface IEventCategory {
   id: string;
   name: string;
+  type: "optional" | "mandatory";
   color: string;
   course?: ICourse;
-  type: "optional" | "mandatory";
 }
 
+export type IEventCategoryRequest = Omit<IEventCategory, "id" | "course"> & {
+  course_id: string;
+};
+
 export type IEventCategoriesSorted = {
   year?: number;
   categories: IEventCategory[];
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 1b90d0e..bea39ca 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -50,3 +50,33 @@ export function getContrastColor(baseColor: string, targetRatio: number = 5) {
 
   return contrastColor || (direction === "darken" ? "#000" : "#fff");
 }
+
+export function isAllDay(
+  start: moment.Moment | null,
+  end: moment.Moment | null,
+): boolean {
+  if (!start || !end) return false;
+
+  const startsAtMidnight =
+    start.hours() === 0 && start.minutes() === 0 && start.seconds() === 0;
+  const endsAtMidnight =
+    end.hours() === 0 && end.minutes() === 0 && end.seconds() === 0;
+
+  return startsAtMidnight && endsAtMidnight;
+}
+
+export function isMultipleDay(
+  start: moment.Moment | null,
+  end: moment.Moment | null,
+): boolean {
+  if (!start || !end) return false;
+
+  return end.diff(start, "days", true) >= 1;
+}
+
+export function isAllDayEvent(
+  start: moment.Moment | null,
+  end: moment.Moment | null,
+): boolean {
+  return isAllDay(start, end) || isMultipleDay(start, end);
+}