diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 3892cdc..12b19f2 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -34,6 +34,7 @@
         "clsx": "^2.1.1",
         "cmdk": "^1.0.0",
         "date-fns": "^3.6.0",
+        "date-fns-tz": "^3.1.3",
         "firebase": "^10.12.3",
         "geist": "^1.3.1",
         "lucide-react": "^0.376.0",
@@ -3138,6 +3139,14 @@
         "url": "https://github.com/sponsors/kossnocorp"
       }
     },
+    "node_modules/date-fns-tz": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/date-fns-tz/-/date-fns-tz-3.1.3.tgz",
+      "integrity": "sha512-ZfbMu+nbzW0mEzC8VZrLiSWvUIaI3aRHeq33mTe7Y38UctKukgqPR4nTDwcwS4d64Gf8GghnVsroBuMY3eiTeA==",
+      "peerDependencies": {
+        "date-fns": "^3.0.0"
+      }
+    },
     "node_modules/debug": {
       "version": "4.3.5",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.5.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index e237835..0ea2ff4 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -35,6 +35,7 @@
     "clsx": "^2.1.1",
     "cmdk": "^1.0.0",
     "date-fns": "^3.6.0",
+    "date-fns-tz": "^3.1.3",
     "firebase": "^10.12.3",
     "geist": "^1.3.1",
     "lucide-react": "^0.376.0",
diff --git a/frontend/prisma/schema.prisma b/frontend/prisma/schema.prisma
index 58bea78..25bb00d 100644
--- a/frontend/prisma/schema.prisma
+++ b/frontend/prisma/schema.prisma
@@ -8,20 +8,20 @@ datasource db {
 }
 
 model User {
-  id            String                  @id @default(cuid())
-  name          String?
-  email         String                  @unique
-  emailVerified DateTime?
-  image         String?
-  password      String?
-  role          UserRole                @default(USER)
-  nummer        Int?
-  isActive      Boolean                 @default(true)
-  username      String?                 @unique
-  accounts      Account[]
-  paameldinger  ArrangementPaamelding[]
-  bookings      Booking[]
-  Hovedstyret   Hovedstyret?
+  id                     String                  @id @default(cuid())
+  name                   String?
+  email                  String                  @unique
+  emailVerified          DateTime?
+  image                  String?
+  password               String?
+  role                   UserRole                @default(USER)
+  nummer                 Int?
+  isActive               Boolean                 @default(true)
+  username               String?                 @unique
+  accounts               Account[]
+  paameldinger           ArrangementPaamelding[]
+  bookings               Booking[]
+  Hovedstyret            Hovedstyret?
   lavterskelArrangements LavterskelArrangement[]
 }
 
@@ -106,27 +106,13 @@ model Arrangement {
   paameldinger ArrangementPaamelding[]
 }
 
-model LavterskelArrangement {
-  id           String                  @id @default(cuid())
-  navn         String
-  sted         String?
-  dato         DateTime
-  type         String
-  beskrivelse  String?
-  createdAt    DateTime                @default(now())
-  updatedAt    DateTime                @updatedAt
-  userId       String
-  user         User                    @relation(fields: [userId], references: [id])
-  @@index([userId])
-}
-
 model Booking {
   id        String     @id @default(cuid())
   userID    String
   komiteID  String?
   item      BookedItem
   bookedAt  DateTime
-  duration  Int
+  duration  Int?
   createdAt DateTime   @default(now())
   updatedAt DateTime   @updatedAt
   komite    komite?    @relation(fields: [komiteID], references: [id])
@@ -145,6 +131,19 @@ model ArrangementPaamelding {
   @@unique([userID, arrangementID])
 }
 
+model LavterskelArrangement {
+  id           String                  @id @default(cuid())
+  navn         String
+  sted         String?
+  dato         DateTime
+  type         String
+  beskrivelse  String?
+  createdAt    DateTime                @default(now())
+  updatedAt    DateTime                @updatedAt
+  userId       String
+  user         User                    @relation(fields: [userId], references: [id])
+  @@index([userId])
+}
 enum BookedItem {
   KONTOR
   ONE_SOUNDBOX
diff --git a/frontend/src/app/api/arrangementer/[id]/paamelding/route.ts b/frontend/src/app/api/arrangementer/[id]/paamelding/route.ts
index e88df20..9114869 100644
--- a/frontend/src/app/api/arrangementer/[id]/paamelding/route.ts
+++ b/frontend/src/app/api/arrangementer/[id]/paamelding/route.ts
@@ -1,3 +1,4 @@
+import { getUserById } from "@/data/user";
 import { db } from "@/lib/db";
 import {
   ArrangementPaamelding,
@@ -22,47 +23,60 @@ export async function GET(
   }
 }
 
-export async function POST(
-  req: NextRequest,
-  { params }: { params: { id: string } },
-) {
-  try {
-    const arrangement = await db.arrangement.findFirst({
-      where: { id: params.id },
-    });
+// export async function POST(
+//   req: NextRequest,
+//   { params }: { params: { id: string } },
+// ) {
+//   try {
+//     const arrangement = await db.arrangement.findUnique({
+//       where: { id: params.id },
+//     });
 
-    if (!arrangement) {
-      return NextResponse.json({ error: "Arrangement not found" });
-    }
-    const parsedData = ArrangementPaameldingSchema.parse(await req.json());
-    console.log(parsedData);
-    const arrangementPaamelding = await db.arrangementPaamelding.create({
-      data: parsedData,
-    });
+//     if (!arrangement) {
+//       return NextResponse.json({ error: "Arrangement not found" });
+//     }
+//     const user = await getUserById(params.id);
 
-    await db.user.update({
-      where: { id: parsedData.userID },
-      data: {
-        paameldinger: {
-          connect: { id: arrangementPaamelding.id },
-        },
-      },
-    });
+//     const signup = await db.arrangementPaamelding.create({
+//       data: {
+//         user: {
+//           connect: { id: user?.id },
+//         },
+//         arrangement: {
+//           connect: { id: params.id },
+//         },
+//       },
+//     });
 
-    await db.arrangement.update({
-      where: { id: params.id },
-      data: {
-        paameldinger: {
-          connect: { id: arrangementPaamelding.id },
-        },
-      },
-    });
+//     // const parsedData = ArrangementPaameldingSchema.parse(await req.json());
+//     // console.log(parsedData);
+//     // const arrangementPaamelding = await db.arrangementPaamelding.create({
+//     //   data: parsedData,
+//     // });
 
-    return NextResponse.json(
-      { message: "Paamelding successfull", arrangementPaamelding },
-      { status: 201 },
-    );
-  } catch (error) {
-    return NextResponse.json({ error: error }, { status: 500 });
-  }
-}
+//     // await db.user.update({
+//     //   where: { id: parsedData.userID },
+//     //   data: {
+//     //     paameldinger: {
+//     //       connect: { id: arrangementPaamelding.id },
+//     //     },
+//     //   },
+//     // });
+
+//     // await db.arrangement.update({
+//     //   where: { id: params.id },
+//     //   data: {
+//     //     paameldinger: {
+//     //       connect: { id: arrangementPaamelding.id },
+//     //     },
+//     //   },
+//     // });
+
+//     return NextResponse.json(
+//       { message: "Paamelding successfull", arrangementPaamelding },
+//       { status: 201 },
+//     );
+//   } catch (error) {
+//     return NextResponse.json({ error: error }, { status: 500 });
+//   }
+// }
diff --git a/frontend/src/app/api/bookings/route.ts b/frontend/src/app/api/bookings/route.ts
index 418df00..67829a5 100644
--- a/frontend/src/app/api/bookings/route.ts
+++ b/frontend/src/app/api/bookings/route.ts
@@ -2,11 +2,40 @@ import { db } from "@/lib/db";
 import { NextRequest, NextResponse } from "next/server";
 import { BookingSchema } from "@/schemas/booking";
 
-export async function GET() {
-  const bookings = await db.booking.findMany();
-  return NextResponse.json(bookings, { status: 200 });
+export async function GET(req: NextRequest) {
+  const { searchParams } = new URL(req.url);
+  const userID = searchParams.get("userID");
+
+  if (userID) {
+    try {
+      const bookings = await db.booking.findMany({
+        where: {
+          userID: userID,
+        },
+      });
+      return NextResponse.json(bookings, { status: 200 });
+    } catch (error) {
+      return NextResponse.json(
+        { error: "Failed to fetch bookings" },
+        { status: 500 },
+      );
+    }
+  } else {
+    try {
+      const bookings = await db.booking.findMany();
+      return NextResponse.json(bookings, { status: 200 });
+    } catch (error) {
+      return NextResponse.json(
+        { error: "Failed to fetch bookings" },
+        { status: 500 },
+      );
+    }
+  }
 }
 
+// const bookings = await db.booking.findMany();
+// return NextResponse.json(bookings, { status: 200 });
+
 export async function POST(req: NextRequest) {
   try {
     const parsedData = BookingSchema.parse(await req.json());
diff --git a/frontend/src/app/for_studenten/arkiv/page.tsx b/frontend/src/app/for_studenten/arkiv/page.tsx
new file mode 100644
index 0000000..c9c8ec7
--- /dev/null
+++ b/frontend/src/app/for_studenten/arkiv/page.tsx
@@ -0,0 +1,69 @@
+"use client";
+
+import MenuCard, {
+  MenuCardProps,
+} from "@/components/ForStudenten/ui/menu-card";
+import MenuCardView from "@/components/ForStudenten/ui/menu-card-view";
+import { HandCoins, ScrollText, Archive, NotebookPen } from "lucide-react";
+
+const ArkivPage = () => {
+  const cards: MenuCardProps[] = [
+    {
+      title: "Vedtekter",
+      logo: <ScrollText />,
+      description:
+        "Nedenfor finner du vedtektene til EMIL. Disse blir gjennomgått hvert år på budsjett- og vedtektsmøtet.",
+      buttonLabel: "Se vedtekter",
+      href: "https://www.youtube.com/watch?v=xvFZjo5PgG0&ab_channel=Duran",
+    },
+    {
+      title: "Søknader",
+      logo: <HandCoins />,
+      description:
+        "Her finner du alle tidligere søknader, både søknader til Leo's minnefond og Blomsterpotten.",
+      buttonLabel: "Se søknader",
+      href: "https://www.youtube.com/watch?v=xvFZjo5PgG0&ab_channel=Duran",
+    },
+    {
+      title: "Rapporter",
+      logo: <Archive />,
+      description:
+        "Se arkivet for en oversikt over gamle rapporter f. eks. diplomundersøkelsen og trivselsrapporter. ",
+      buttonLabel: "Se rapporter",
+      href: "https://www.youtube.com/watch?v=xvFZjo5PgG0&ab_channel=Duran",
+    },
+    {
+      title: "Hvordan føre bilag",
+      logo: <NotebookPen />,
+      description:
+        "Lurer du på hvordan du skal føre et bilag? Trykk på knappen nedenfor og les guiden.",
+      href: "https://www.youtube.com/watch?v=xvFZjo5PgG0&ab_channel=Duran",
+      buttonLabel: "Hvordan føre bilag",
+    },
+  ];
+
+  return (
+    <div className="flex flex-col items-center justify-center p-12 gap-y-6">
+      <div className="flex flex-col space-y-4">
+        <h1 className=" text-white text-center font-semibold text-4xl w-full">
+          Viktige dokumenter
+        </h1>
+        <p className="text-white text-md text-center">
+          Her ligger alle viktige dokumenter som Emil publiserer hvert år. For å
+          se Diplomundersøkelsen må du trykke på “Se rapporter”.{" "}
+        </p>
+      </div>
+      <MenuCardView cards={cards}></MenuCardView>
+    </div>
+  );
+};
+
+export default ArkivPage;
+
+// <MenuCard
+//           href="https://youtube.com"
+//           logo={<Speaker />}
+//           title="Soundbox"
+//           description="Emil har hele 2 soundboxer som studenter kan låne! Book en soundbox til en valgt dato eller tid. Ventetiden kan være lang så vær obs på å booke i god tid!"
+//           buttonLabel="Book Soundbox"
+//         ></MenuCard>
diff --git a/frontend/src/app/for_studenten/arrangement/page.tsx b/frontend/src/app/for_studenten/arrangement/page.tsx
index fd3e61d..7e814a9 100644
--- a/frontend/src/app/for_studenten/arrangement/page.tsx
+++ b/frontend/src/app/for_studenten/arrangement/page.tsx
@@ -1,11 +1,13 @@
 "use client";
 
-import ListView from "@/components/calendar/listView";
+import ListView from "@/components/event/listView";
+import Hero from "@/components/hero/hero1";
+import { Button } from "@/components/ui/button";
 import { Arrangement } from "@/schemas/arrangement";
 import { lavTerskelArrangement } from "@/schemas/lavterskelArrangement";
 import { useEffect, useState, useRef } from "react";
-import { format } from 'date-fns';
-import { nb } from 'date-fns/locale';
+import { format } from "date-fns";
+import { nb } from "date-fns/locale";
 import StickyNavbar from "@/components/navbar/stickyNavbar";
 import NyStudentCard from "@/components/cards/nyStudentCard";
 import SmallTransissionDarkHighligt from "@/components/hero/transissions/smallTransissionDarkHighlight";
@@ -15,7 +17,7 @@ import AarligArrangementCard from "@/components/cards/aarligArrangementCard";
 import SmallTransissionSPCPC from "@/components/hero/transissions/smallTransissionSPCPC";
 import SmallTransissionPCSPC from "@/components/hero/transissions/smallTransissionPCSPC";
 import LavterskelArrangementForm from "@/components/forms/lavterskelarrangementform";
-import EventCalendarView from "@/components/calendar/eventCalendarview";
+import EventCalendarView from "@/components/event/eventCalendarview";
 import { LavterskelArrangement } from "@prisma/client";
 
 const ForStudentenPage = () => {
@@ -74,13 +76,13 @@ const ForStudentenPage = () => {
 
   // Handle delete request from user
   const handleDeletion = (success: boolean) => {
-    if (success){
+    if (success) {
       fetchData();
       closeModal();
-    } else{
-      console.error("Failed to delete instance")
+    } else {
+      console.error("Failed to delete instance");
     }
-  }
+  };
 
   // Close opened date
   const closeModal = () => {
@@ -121,7 +123,7 @@ const ForStudentenPage = () => {
     }
   };
   // API call to fetch arrangements from DB
-useEffect(() => {
+  useEffect(() => {
     fetchData();
   }, []);
 
@@ -416,18 +418,28 @@ useEffect(() => {
             {selectedDate && (
               <div className="fixed inset-0 bg-[#579783] bg-opacity-30 flex items-center justify-center z-50">
                 <div className="bg-white text-primary rounded-lg shadow-lg px-3 py-6 w-[300px] lg:w-1/3">
-                  <h2 className="text-xl font-bold mb-4">{
-                    // Format date in norwegian with capital letter
-                  (format(selectedDate, "EEEE, d MMMM yyyy", { locale: nb }))
-                  .split(',').map(word => word.charAt(0).toUpperCase() + word.slice(1))}
+                  <h2 className="text-xl font-bold mb-4">
+                    {
+                      // Format date in norwegian with capital letter
+                      format(selectedDate, "EEEE, d MMMM yyyy", { locale: nb })
+                        .split(",")
+                        .map(
+                          (word) =>
+                            word.charAt(0).toUpperCase() + word.slice(1),
+                        )
+                    }
                   </h2>
-                  <EventCalendarView combinedArrangements={combinedArrangements} openForm={openForm} onDeletionSuccess={handleDeletion}/>
+                  <EventCalendarView
+                    combinedArrangements={combinedArrangements}
+                    openForm={openForm}
+                    onDeletionSuccess={handleDeletion}
+                  />
                   {openForm ? (
                     <div>
                       <LavterskelArrangementForm
                         onSubmit={handleSubmit}
                         onClose={handleCloseForm}
-                        selectedDate = {new Date(selectedDate)}
+                        selectedDate={new Date(selectedDate)}
                       />
                     </div>
                   ) : (
@@ -478,4 +490,4 @@ useEffect(() => {
   );
 };
 
-export default ForStudentenPage;
\ No newline at end of file
+export default ForStudentenPage;
diff --git a/frontend/src/app/for_studenten/booking/bookings/page.tsx b/frontend/src/app/for_studenten/booking/bookings/page.tsx
new file mode 100644
index 0000000..b809734
--- /dev/null
+++ b/frontend/src/app/for_studenten/booking/bookings/page.tsx
@@ -0,0 +1,21 @@
+"use client";
+
+import BookingView from "@/components/ForStudenten/booking/booking-view";
+
+const MineBookingerPage = () => {
+  return (
+    <div className="w-4/5 flex flex-col items-center justify-center p-12 gap-y-6">
+      <div className="flex flex-col space-y-4">
+        <h1 className=" text-white text-center font-semibold text-4xl w-full">
+          Soundbox
+        </h1>
+        <p className="text-white text-md text-center">
+          Her er din bookingoversikt{" "}
+        </p>
+      </div>
+      <BookingView />
+    </div>
+  );
+};
+
+export default MineBookingerPage;
diff --git a/frontend/src/app/for_studenten/booking/page.tsx b/frontend/src/app/for_studenten/booking/page.tsx
index 98483a8..64b1627 100644
--- a/frontend/src/app/for_studenten/booking/page.tsx
+++ b/frontend/src/app/for_studenten/booking/page.tsx
@@ -1,9 +1,10 @@
-import BackgroundMain from "@/components/ForStudenten/ui/background-main";
+"use client";
+
 import MenuCard, {
   MenuCardProps,
 } from "@/components/ForStudenten/ui/menu-card";
 import MenuCardView from "@/components/ForStudenten/ui/menu-card-view";
-import { Speaker, Coffee, Home, FileQuestion } from "lucide-react";
+import { Speaker, Coffee, Home, FileQuestion, ListChecks } from "lucide-react";
 
 const BookingPage = () => {
   const cards: MenuCardProps[] = [
@@ -13,7 +14,7 @@ const BookingPage = () => {
       description:
         "Emil har hele 2 soundboxer som studenter kan låne! Book en soundbox til en valgt dato eller tid. Ventetiden kan være lang så vær obs på å booke i god tid!",
       buttonLabel: "Book Soundbox",
-      href: "https://youtube.com",
+      href: "/for_studenten/booking/soundbox",
     },
     {
       title: "Kontoret",
@@ -32,27 +33,29 @@ const BookingPage = () => {
       href: "http://eshyttekom.no/",
     },
     {
-      title: "Annet",
-      logo: <FileQuestion />,
-      description: "Hei hei heo",
-      href: "https://youtube.com",
+      title: "Mine bookinger",
+      logo: <ListChecks />,
+      description:
+        "Her finner du en oversikt over dine aktive og tidligere bookinger.",
+      buttonLabel: "Se min oversikt",
+      href: "/for_studenten/booking/bookings",
     },
   ];
 
   return (
-    <div className="flex items-center justify-center">
-      <BackgroundMain>
-        <div className="flex flex-col space-y-4">
-          <h1 className=" text-white font-semibold text-4xl w-3/4">Booking</h1>
-          <p className="text-white text-md">
-            På Emil kan du som student booke en rekke ting til diverse
-            anledninger. Vi har blant annet 2 Soundboxer til disposisjon,
-            Emil-kontoret og nå en hytte som deles med Smørekoppen! Komiteer kan
-            også booke ting til arrangementer eller liknende.{" "}
-          </p>
-        </div>
-        <MenuCardView cards={cards}></MenuCardView>
-      </BackgroundMain>
+    <div className="flex flex-col items-center justify-center p-12 gap-y-6">
+      <div className="flex flex-col space-y-4">
+        <h1 className=" text-white text-center font-semibold text-4xl w-full">
+          Booking
+        </h1>
+        <p className="text-white text-md text-center">
+          På Emil kan du som student booke en rekke ting til diverse
+          anledninger. Vi har blant annet 2 Soundboxer til disposisjon,
+          Emil-kontoret og nå en hytte som deles med Smørekoppen! Komiteer kan
+          også booke ting til arrangementer eller liknende.{" "}
+        </p>
+      </div>
+      <MenuCardView cards={cards}></MenuCardView>
     </div>
   );
 };
diff --git a/frontend/src/app/for_studenten/booking/soundbox/page.tsx b/frontend/src/app/for_studenten/booking/soundbox/page.tsx
new file mode 100644
index 0000000..98b9fbb
--- /dev/null
+++ b/frontend/src/app/for_studenten/booking/soundbox/page.tsx
@@ -0,0 +1,23 @@
+"use client";
+
+import BookingForm from "@/components/ForStudenten/booking/booking-form";
+import BookingWindow from "@/components/ForStudenten/booking/booking-window";
+
+const SoundboxPage = () => {
+  return (
+    <div className="flex flex-col items-center justify-center p-12 gap-y-6">
+      <div className="flex flex-col space-y-4">
+        <h1 className=" text-white text-center font-semibold text-4xl w-full">
+          Soundbox
+        </h1>
+        <p className="text-white text-md text-center">
+          Emil har 2 soundboxer som kan bookes. Se oversikten nedenfor og finn
+          en dato.{" "}
+        </p>
+      </div>
+      <BookingWindow />
+    </div>
+  );
+};
+
+export default SoundboxPage;
diff --git a/frontend/src/app/for_studenten/page.tsx b/frontend/src/app/for_studenten/page.tsx
index 14536da..9890529 100644
--- a/frontend/src/app/for_studenten/page.tsx
+++ b/frontend/src/app/for_studenten/page.tsx
@@ -1,7 +1,7 @@
 import Hero2 from "@/components/hero/hero2";
 import TransissionIn from "@/components/hero/transissions/transissionIn";
 
-const forStudentenPage = () => {
+const ForStudentenPage = () => {
   return (
     <div className="text-white flex flex-col justify-center items-center p-16 ">
     <img src="/image/sponsorer/logo.png" alt="Emil Logo" className="w-[12rem]"/>
@@ -9,4 +9,4 @@ const forStudentenPage = () => {
   );
 };
 
-export default forStudentenPage;
+export default ForStudentenPage;
diff --git a/frontend/src/app/for_studenten/rapporter/page.tsx b/frontend/src/app/for_studenten/rapporter/page.tsx
deleted file mode 100644
index b4c9c0d..0000000
--- a/frontend/src/app/for_studenten/rapporter/page.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import Hero from "@/components/hero/hero1";
-
-const forStudentenPage = () => {
-  return <div>rapportPage</div>;
-};
-
-export default forStudentenPage;
diff --git a/frontend/src/app/for_studenten/soeknader/page.tsx b/frontend/src/app/for_studenten/soeknader/page.tsx
index dadefc7..b4c9c0d 100644
--- a/frontend/src/app/for_studenten/soeknader/page.tsx
+++ b/frontend/src/app/for_studenten/soeknader/page.tsx
@@ -1,301 +1,7 @@
 import Hero from "@/components/hero/hero1";
-import NyStudentCard, {
-  nyStudentCardProps,
-} from "@/components/cards/nyStudentCard";
-import SmallTransissionPCSPC from "@/components/hero/transissions/smallTransissionPCSPC";
-import SmallTransissionSPCPC from "@/components/hero/transissions/smallTransissionSPCPC";
-import { ArrowRight, ArrowUpRight, Coins, Link } from "lucide-react";
-import { Info } from "lucide-react";
-import { FileQuestion } from "lucide-react";
-import { Flower } from "lucide-react";
-import { Notebook } from "lucide-react";
-import { Button } from "@/components/ui/button";
 
-const soeknaderPage = () => {
-  const unnagjortCards: nyStudentCardProps[] = [
-    {
-      title: "Leo´s minnefond",
-      description: (
-        <>
-          Leos minnefond er et fond i EMIL der det blir satt inn penger hvert
-          år, slik at medlemmer av EMIL kan søke om midler.
-          <br />
-          <br />
-          Du kan søke om midler{" "}
-          <strong className="text-[#9DDBAD]"> opp til 5000 kr</strong> til ulike
-          formål, slik som arrangementer eller investeringer som ikke er
-          budsjettert. Merk at om det skal søkes om større beløp enn 5000 kr må
-          du søke hos <strong className="text-[#9DDBAD]">Blomsterpotten</strong>
-          .
-          <br />
-          <br />
-          Du kan søke fra Leos minnefond både før og etter pengene er brukt. Det
-          anbefales å søke <strong className="text-[#9DDBAD]">før</strong> du
-          bruker pengene for å ikke gå på en smell om du ikke får godkjent.
-        </>
-      ),
-      frist: "",
-      buttonText: "Søk om støtte her",
-      href: "https://docs.google.com/forms/d/e/1FAIpQLSdlweUahxa6eTMwyYTz6iLzgc7NwFx_NDKIWJ6PKbS4v7jPDQ/viewform",
-      icon: <Coins className="h-5" />,
-    },
-
-    {
-      title: "Info",
-      description: (
-        <div>
-          Du kan også sende en mail til styret på @styret@emilweb.no hvor du må ha med:
-          <ul className="list-disc px-4">
-            <li>Navn</li>
-            <li>Komité</li>
-            <li>Beløp det er snakk om</li>
-            <li>Begrunnelse for søknad</li>
-          </ul>
-        </div>
-      ),
-      frist: "",
-      buttonText: "",
-      href: "",
-      icon: <Info className="h-5" />,
-    },
-
-    {
-      title: "Se tidligere søknader",
-      description: (
-        <>
-          Gjennom tiden har det blitt levert mange søknader til Emil. Klikk på
-          knappen nedenfor for å se eldre søknader
-        </>
-      ),
-      frist: "",
-      buttonText: "Se eldre søknader",
-      href: "https://www.youtube.com",
-      icon: <FileQuestion className="h-5" />,
-    },
-  ];
-
-  return (
-    <div className="w-full flex flex-col items-center justify-center">
-      <div className="w-full flex flex-col justify-center items-center max-w-[512px] py-5">
-        <h1 className="text-white font-semibold text-4xl pt-4 text-center">
-          Søknader
-        </h1>
-
-        <p className="text-white font-normal pt-4 text-center">
-          På denne siden finner du alt av informasjon om søknader til
-          linjeforeningen EMIL.
-        </p>
-      </div>
-      <SmallTransissionPCSPC />
-
-      <div></div>
-      <div className="bg-[#225654] w-full text-white flex justify-center items-center py-4 lg:px-16">
-        <div className="w-full flex flex-col items-center lg:items-stretch justify-center lg:flex-row gap-y-4 lg:gap-y-0 lg:gap-x-4 ">
-          <div className="w-[90%] lg:w-[60%] flex flex-col justify-center items-center">
-            <NyStudentCard
-              key={unnagjortCards[0].title}
-              {...unnagjortCards[0]}
-            />
-          </div>
-          <div className="w-[90%] lg:w-[60%] flex flex-col justify-between gap-y-4 items-center ">
-            <NyStudentCard
-              key={unnagjortCards[1].title}
-              {...unnagjortCards[1]}
-            />
-            <NyStudentCard
-              key={unnagjortCards[2].title}
-              {...unnagjortCards[2]}
-            />
-          </div>
-        </div>
-      </div>
-
-      <SmallTransissionSPCPC />
-
-      <div className="bg-[#003A42] text-white flex items-center justify-center pb-7 lg:pb-2">
-        <Flower className="w-12 h-12 pt-4"></Flower>
-        <h1 className="text-white font-semibold text-3xl pt-4 text-center">
-          Blomsterpotten
-        </h1>
-      </div>
-
-      <div className="bg-[#003A42] text-white w-full flex justify-center items-center py-4 pt-1 lg:px-16">
-        <div className="w-full flex flex-col items-center lg:items-stretch justify-center lg:flex-row gap-y-4 lg:gap-y-0 lg:gap-x-4 lg:py-8">
-          <div className="w-[90%] bg-[#00333A] px-12 py-5">
-            <p className="font-bold">Søknadskriterier</p>
-            <br></br>
-            <p className="font-light">
-              Linjeforeningsmedlemmer og komiteer som ønsker å søke om bruk av
-              midler fra EMILs Blomsterpott skal skrive en søknad som inneholder
-              følgende momenter. Dersom ett eller flere av momentene mangler,
-              blir søknaden sendt tilbake til søker med forbedringsforslag og
-              oppfordring til å søke på nytt.
-            </p>
-            <br></br>
-            <p className="font-normal ">
-              Søknaden skal være sendt inn minst 4 uker før midlene skal være
-              utbetalt! 
-            </p>
-          </div>
-
-          <div className="w-[90%] bg-[#00333A] lg:w-fit flex flex-col justify-between gap-y-4 px-12 py-5">
-            <div className="font-thin">
-              <p className="font-bold">Søknaden skal bygges opp slik</p>
-              <ul className="pl-5 mt-2 space-y-1 list-disc ">
-                <li>
-                  Søknaden skal skrives digitalt og sendes per epost til
-                  Blomsterpottstyret, eventuelt til annenparten dersom
-                  Blomsterpottstyret er søker. Håndskrevne søknader tillates
-                  ikke. 
-                </li>
-                <br></br>
-                <li>
-                  Søknaden skal føres punktvis, som vist under. Alle punktene
-                  skal ha samme tittel som de har i søknadskriterene.
-                </li>
-                <br></br>
-                <li>
-                  Punkt 6 skal kopieres direkte inn i søknaden og skal stå
-                  ordrett slik den står i søknadskriteriene.
-                </li>
-                <br></br>
-                <li>
-                  På slutten av søknaden skal det være en underskriftslinje.
-                  Under denne linjen skal det stå dato og sted for søkers
-                  underskrift. Dette er eksemplifisert i slutten av
-                  søknadskriterene.
-                </li>
-              </ul>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div className="pb-20 flex justify-center items-center ">
-        <div className=" bg-white p-4 w-[90%] lg:w-[86%] rounded-md text-[#001D21]  ">
-          <div className="flex items-center">
-            <Notebook></Notebook>
-            <h1 className="font-semibold text-xl">Eksempelsøknad</h1>
-          </div>
-
-          <br></br>
-
-          <p className="font-bold text-xs">1. Søkeren/komiteéns navn</p>
-
-          <p className="font-light text-xs">"Navn"</p>
-          <br></br>
-
-          <p className="font-bold text-xs">2. Konkret hva det søkes om</p>
-
-          <ul className="font-light text-xs list-disc pl-4">
-            <li>
-              Konkret og utfyllende om hva det søkes midler til. For eksempel:
-              Er det innkjøp, som for eksempel lydutsyr, hytte, etc.?
-            </li>
-            <li>Akkurat hva skal kjøpes inn? Hva er bruksområdet?</li>
-            <li>Er det et enkeltarrangement?</li>
-            <li>Hvem er det for? Komité, klassetrinn, jenter/gutter?</li>
-            <li>Hvor mange deltakere vil det være?</li>
-            <li>Er det for et faglig opplegg?</li>
-            <li>Hvem er det for?</li>
-          </ul>
-
-          <ul className="font-light text-xs">
-            <li>Hvordan vil opplegget være?</li>
-          </ul>
-
-          <br></br>
-
-          <p className="font-bold text-xs">
-            3. Hvordan prosjektet vil gangne linjeforeningens medlemmer
-          </p>
-
-          <p className="font-light text-xs">
-            Blomsterpottens midler er ment å komme hele linjeforeningen til
-            gode. Hvordan vil ditt prosjekt gjøre dette?
-          </p>
-
-          <p className="font-light text-xs">
-            Skriv utfyllende og svar på følgende spørsmål i søknadsteksten:
-          </p>
-
-          <ul className="font-light text-xs">
-            <li>
-              Er dette noe som er til nytte i fremtiden, eller er det et
-              prosjekt som gagner medlemmene det året pengene blir brukt?{" "}
-            </li>
-          </ul>
-
-          <ul className="font-light text-xs list-disc pl-4">
-            <li>
-              Er det prioritert slik at alle linjeforeningsmedlemmer får nytte
-              av det, eller kommer det hovedsaklig enkelte klassetrinn eller
-              komiteer til gode?
-            </li>
-          </ul>
-
-          <ul className="font-light text-xs">
-            <li>
-              Hvorfor mener du dette er noe som vil bidra positivt til
-              linjeforeningen?
-            </li>
-          </ul>
-
-          <br></br>
-
-          <p className="font-bold text-xs">
-            4. Er det sendt i søknad til Sit eller andre relevante
-            organisasjoner?
-          </p>
-
-          <p className="font-light text-xs">
-            Linjeforeningskomiteer får ofte innvilget støtte fra andre aktører
-            enn linjeforeningen. Har du/dere gjort en innsats for å skaffe
-            midler på andre måter?
-          </p>
-
-          <p className="font-light text-xs">
-            Er det noe du lurer på angående dette, ta kontakt med Futen.
-          </p>
-
-          <br></br>
-
-          <p className="font-bold text-xs">5. Budsjett</p>
-
-          <p className="font-light text-xs">
-            Det skal legges ved et budsjett hvor det står konkret hva pengene
-            skal bli brukt på, hvor mye det vil koste og hvor man har funnet
-            prisene. Er det uklart hvordan et budsjett lages og hvordan det skal
-            se ut, ta kontakt med Futen.
-          </p>
-
-          <br></br>
-
-          <p className="font-bold text-xs">6. Ansvar for bruk av midler</p>
-
-          <p className="font-light text-xs">
-            “Undertegnede har lest, forstått og akseptert retningslinjene til
-            EMILs Blomsterpott og har ansvaret for at midlene som er innvilget
-            og utbetalt brukes i henhold til det godkjente budsjettet. Ved
-            manglende dokumentasjon på dette, eller dersom midlene er brukt til
-            noe annet, står undertegnede ansvarlig for å tilbakebetale det
-            misbrukte beløpet.”
-          </p>
-
-          <br></br>
-          <br></br>
-
-          <p className="font-light text-xs">Emil Emilsen</p>
-
-          <p className="font-light text-xs">--------------------------</p>
-
-          <p className="font-light text-xs">Emil Emilsen</p>
-
-          <p className="font-light text-xs">17/03/2022, Trondheim</p>
-        </div>
-      </div>
-    </div>
-  );
+const forStudentenPage = () => {
+  return <div>rapportPage</div>;
 };
 
-export default soeknaderPage;
+export default forStudentenPage;
diff --git a/frontend/src/app/for_studenten/viser/page.tsx b/frontend/src/app/for_studenten/viser/page.tsx
deleted file mode 100644
index 760965a..0000000
--- a/frontend/src/app/for_studenten/viser/page.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import Hero from "@/components/hero/hero1";
-
-const forStudentenPage = () => {
-  return <div>viserPage</div>;
-};
-
-export default forStudentenPage;
diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index 7da45d1..cbc85ee 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -10,7 +10,7 @@ import Link from "next/link";
 import { ArrowRight } from "lucide-react";
 import Image from "next/image";
 import { Calendar } from "@/components/ui/calendar";
-import ListView from "@/components/calendar/listView";
+import ListView from "@/components/event/listView";
 import BigCard from "@/components/landing/bigCard";
 import { cardData } from "@/static/landingInfo";
 import VideoPlayer from "@/components/landing/video-player";
@@ -50,7 +50,7 @@ const HomePage = () => {
             </div>
           </div>
           <Link href="/for_studenten/ny_student">
-            <Button className="text-sm lg:text-lg">
+            <Button className="text-sm lg:text-md">
               Les mer
               <ArrowRight className="h-4 w-4 ml-2" />
             </Button>
@@ -59,30 +59,30 @@ const HomePage = () => {
       </div>
       <TransissionIn />
       <div className="w-full background-dark p-8 flex flex-col justify-center items-center">
-        <div className="flex flex-col w-[90%] lg:w-[65%] gap-y-6 ">
-          <div className="text-2xl font-semibold text-white pl-1">
-            Hva skjer på Emil?
-          </div>
-          <div className="gap-4 flex justify-center">
-            <div className="flex justify-center items-center w-full h-[338px]">
-              {loading ? (
-                <div className="animate-ping h-8 w-8 bg-blue-400 rounded-full"></div>
-              ) : (
-                <ListView events={data?.arrangementer || []} />
-              )}
+        <div className="flex flex-col w-[90%] lg:w-[65%] gap-y-6 " >
+            <div className="text-2xl font-semibold text-white pl-1">
+              Hva skjer på Emil?
             </div>
+        <div className="gap-4 flex justify-center">
+          <div className="flex justify-center items-center w-full h-[338px]">
+            {loading ? (
+              <div className="animate-ping h-8 w-8 bg-blue-400 rounded-full"></div>
+            ) : (
+              <ListView events={data?.arrangementer || []} />
+            )}
           </div>
-          <div className="flex justify-center">
-            <BigCard {...dataS} />
-          </div>
-          <div className="w-full flex flex-col gap-y-6 justify-center items-center">
-            <div className="w-full flex text-xl font-semibold text-white justify-center">
-              Søk Emil da vel!
-            </div>
-            <VideoPlayer />
+        </div>
+        <div className="flex justify-center">
+          <BigCard {...dataS} />
+        </div>
+        <div className="w-full flex flex-col gap-y-6 justify-center items-center">
+          <div className="w-full flex text-xl font-semibold text-white justify-center">
+            Søk Emil da vel!
           </div>
+          <VideoPlayer />
         </div>
-        {/* <TransissionOut />
+      </div>
+      {/* <TransissionOut />
       <Baerekraft />
       <TransissionIn /> */}
       </div>
diff --git a/frontend/src/components/ForStudenten/booking/booking-card.tsx b/frontend/src/components/ForStudenten/booking/booking-card.tsx
new file mode 100644
index 0000000..6cfaf04
--- /dev/null
+++ b/frontend/src/components/ForStudenten/booking/booking-card.tsx
@@ -0,0 +1,170 @@
+"use client";
+
+import * as z from "zod";
+
+import { useState, useTransition } from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { format } from "date-fns";
+import { nb } from "date-fns/locale";
+
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+
+import { CardWrapper } from "@/components/auth/card-wrapper";
+import { Button } from "@/components/ui/button";
+import { FormError } from "@/components/form-error";
+import { FormSuccess } from "@/components/form-success";
+import { toast } from "@/components/ui/use-toast";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { CalendarIcon } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Calendar } from "@/components/ui/calendar";
+import { useCurrentUser } from "@/hooks/use-current-user";
+import { checkBooking } from "@/utils/actions/checkBooking";
+import { bookingFormSchema } from "@/schemas/booking";
+
+export const BookingCard = () => {
+  const user = useCurrentUser();
+  const [error, setError] = useState<string | undefined>("");
+  const [success, setSuccess] = useState<string | undefined>("");
+
+  const [isPending, startTransition] = useTransition();
+
+  const form = useForm<z.infer<typeof bookingFormSchema>>({
+    resolver: zodResolver(bookingFormSchema),
+    defaultValues: {
+      bookingDate: undefined,
+    },
+  });
+
+  const onSubmit = (values: z.infer<typeof bookingFormSchema>) => {
+    setError("");
+    setSuccess("");
+
+    startTransition(() => {
+      checkBooking(values, user?.id || "").then((data) => {
+        setError(data?.error);
+        setSuccess(data?.success);
+        toast({
+          title: "Booking gjennomført!:",
+          description: (
+            <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+              <code className="text-white">
+                {JSON.stringify(values, null, 2)}
+              </code>
+            </pre>
+          ),
+        });
+      });
+    });
+  };
+
+  return (
+    <CardWrapper
+      headerTitle="Book soundbox"
+      headerLabel="Enkelt å booke"
+      backButtonLabel="Tilbake til booking"
+      backButtonHref="/for_studenten/booking"
+    >
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+          <div className="space-y-4">
+            <FormField
+              control={form.control}
+              name="item"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Antall</FormLabel>
+                  <Select
+                    onValueChange={field.onChange}
+                    defaultValue={field.value}
+                  >
+                    <FormControl>
+                      <SelectTrigger className="text-black">
+                        <SelectValue placeholder="Velg antall"></SelectValue>
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent>
+                      <SelectItem value="ONE_SOUNDBOX">1</SelectItem>
+                      <SelectItem value="TWO_SOUNDBOXES">2</SelectItem>
+                    </SelectContent>
+                  </Select>
+
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="bookingDate"
+              render={({ field }) => (
+                <FormItem className="flex flex-col">
+                  <FormLabel>Dato</FormLabel>
+                  <Popover>
+                    <PopoverTrigger asChild>
+                      <FormControl>
+                        <Button
+                          variant={"outline"}
+                          className={cn(
+                            "w-[240px] pl-3 text-left font-normal text-black",
+                            !field.value && "text-muted-foreground",
+                          )}
+                        >
+                          {field.value ? (
+                            format(field.value, "PPP", { locale: nb })
+                          ) : (
+                            <span>Velg en dato</span>
+                          )}
+                          <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
+                        </Button>
+                      </FormControl>
+                    </PopoverTrigger>
+                    <PopoverContent className="w-auto p-0" align="start">
+                      <Calendar
+                        mode="single"
+                        selected={field.value}
+                        onSelect={field.onChange}
+                        disabled={(date) =>
+                          date < new Date() || date < new Date("1900-01-01")
+                        }
+                        initialFocus
+                      />
+                    </PopoverContent>
+                  </Popover>
+                  <FormDescription className="">
+                    Velg en dato for din booking.
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </div>
+          <FormError message={error} />
+          <FormSuccess message={success} />
+          <Button type="submit" className="w-full" disabled={isPending}>
+            Book
+          </Button>
+        </form>
+      </Form>
+    </CardWrapper>
+  );
+};
diff --git a/frontend/src/components/ForStudenten/booking/booking-form.tsx b/frontend/src/components/ForStudenten/booking/booking-form.tsx
new file mode 100644
index 0000000..2529777
--- /dev/null
+++ b/frontend/src/components/ForStudenten/booking/booking-form.tsx
@@ -0,0 +1,139 @@
+"use client";
+
+import * as z from "zod";
+import { useForm, useFormState } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Button } from "@/components/ui/button";
+import { CalendarIcon } from "lucide-react";
+import { format } from "date-fns";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Calendar } from "@/components/ui/calendar";
+import { cn } from "@/lib/utils";
+
+const formSchema = z.object({
+  item: z.string({
+    required_error: "Ikke et gyldig antall.",
+  }),
+  bookingDate: z.date({
+    required_error: "En gyldig dato er påkrevd.",
+  }),
+});
+
+const BookingForm = () => {
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      bookingDate: undefined,
+    },
+  });
+
+  const { isSubmitting } = useFormState({ control: form.control });
+
+  const onSubmit = () => {};
+
+  return (
+    <div>
+      <Form {...form}>
+        <form
+          onSubmit={form.handleSubmit(onSubmit)}
+          className="max-w-md w-[240px] flex flex-col space-y-4"
+        >
+          <FormField
+            control={form.control}
+            name="item"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Antall</FormLabel>
+                <Select
+                  onValueChange={field.onChange}
+                  defaultValue={field.value}
+                >
+                  <FormControl>
+                    <SelectTrigger className="text-black">
+                      <SelectValue placeholder="Velg antall"></SelectValue>
+                    </SelectTrigger>
+                  </FormControl>
+                  <SelectContent>
+                    <SelectItem value="ONE_SOUNDBOX">1</SelectItem>
+                    <SelectItem value="TWO_SOUNDBOXES">2</SelectItem>
+                  </SelectContent>
+                </Select>
+
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="bookingDate"
+            render={({ field }) => (
+              <FormItem className="flex flex-col">
+                <FormLabel>Dato</FormLabel>
+                <Popover>
+                  <PopoverTrigger asChild>
+                    <FormControl>
+                      <Button
+                        variant={"outline"}
+                        className={cn(
+                          "w-[240px] pl-3 text-left font-normal text-black",
+                          !field.value && "text-muted-foreground",
+                        )}
+                      >
+                        {field.value ? (
+                          format(field.value, "PPP")
+                        ) : (
+                          <span>Velg en dato</span>
+                        )}
+                        <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
+                      </Button>
+                    </FormControl>
+                  </PopoverTrigger>
+                  <PopoverContent className="w-auto p-0" align="start">
+                    <Calendar
+                      mode="single"
+                      selected={field.value}
+                      onSelect={field.onChange}
+                      disabled={(date) =>
+                        date > new Date() || date < new Date("1900-01-01")
+                      }
+                      initialFocus
+                    />
+                  </PopoverContent>
+                </Popover>
+                <FormDescription className="">
+                  Velg en dato for din booking.
+                </FormDescription>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <Button disabled={isSubmitting} type="submit">
+            Book
+          </Button>
+        </form>
+      </Form>
+    </div>
+  );
+};
+
+export default BookingForm;
diff --git a/frontend/src/components/ForStudenten/booking/booking-view.tsx b/frontend/src/components/ForStudenten/booking/booking-view.tsx
new file mode 100644
index 0000000..5e7c688
--- /dev/null
+++ b/frontend/src/components/ForStudenten/booking/booking-view.tsx
@@ -0,0 +1,183 @@
+"use client";
+
+import { nb } from "date-fns/locale";
+import { format } from "date-fns";
+import { useEffect, useState } from "react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Trash2 } from "lucide-react";
+import { useCurrentUser } from "@/hooks/use-current-user";
+import { Booking } from "@/schemas/booking";
+
+// Function to get a date string for a future date
+const getFutureDate = (daysFromNow: number) => {
+  const date = new Date();
+  date.setDate(date.getDate() + daysFromNow);
+  return date.toISOString().split("T")[0];
+};
+
+const getDate = (date: Date) => {
+  const newDate = new Date(date);
+  return format(newDate, "PPP", { locale: nb });
+};
+
+export default function BookingView() {
+  const user = useCurrentUser();
+  const [bookings, setBookings] = useState<Booking[]>([]);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [bookingToCancel, setBookingToCancel] = useState<Booking | null>(null);
+
+  useEffect(() => {
+    const fetchBookings = async () => {
+      try {
+        const response = await fetch(`/api/bookings?userID=${user?.id}`);
+        const data = await response.json();
+        setBookings(data);
+      } catch (error) {
+        console.error("Failed to fetch bookings:", error);
+      }
+    };
+
+    fetchBookings();
+  }, [user]);
+
+  const handleCancelClick = (booking: Booking) => {
+    setBookingToCancel(booking);
+    setIsModalOpen(true);
+  };
+
+  const handleConfirmCancel = async () => {
+    if (bookingToCancel) {
+      try {
+        const response = await fetch(`/api/bookings/${bookingToCancel.id}`, {
+          method: "DELETE",
+        });
+
+        if (response.ok) {
+          setBookings(
+            bookings.filter((booking) => booking.id !== bookingToCancel.id),
+          );
+        } else {
+          console.log("Failed to delete booking");
+        }
+      } catch (error) {}
+    }
+    setIsModalOpen(false);
+    setBookingToCancel(null);
+  };
+
+  const isBookingActive = (date: Date) => {
+    const bookingDate = new Date(date);
+    const currentDate = new Date();
+    return bookingDate >= currentDate;
+  };
+
+  return (
+    <Card className="w-full">
+      <CardHeader>
+        <CardTitle>Bookinger</CardTitle>
+        <CardDescription>Dine tidligere bookinger.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Type</TableHead>
+              <TableHead>Dato</TableHead>
+              <TableHead className="text-right">Antall</TableHead>
+              <TableHead className="text-right">Action</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {bookings.map((booking) => {
+              const isActive = isBookingActive(booking.bookedAt);
+              return (
+                <TableRow
+                  key={booking.id}
+                  className={isActive ? "bg-green-50" : ""}
+                >
+                  <TableCell>Soundbox</TableCell>
+                  <TableCell>{getDate(booking.bookedAt)}</TableCell>
+                  <TableCell className="text-right">
+                    {booking.item === "ONE_SOUNDBOX" ? 1 : 2}
+                  </TableCell>
+                  <TableCell className="text-right">
+                    {isActive ? (
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        onClick={() => handleCancelClick(booking)}
+                        aria-label={`Cancel ${booking.item} booking for ${booking.bookedAt}`}
+                      >
+                        <Trash2 className="h-4 w-4" />
+                      </Button>
+                    ) : (
+                      <span className="text-sm text-muted-foreground">N/A</span>
+                    )}
+                  </TableCell>
+                </TableRow>
+              );
+            })}
+          </TableBody>
+        </Table>
+      </CardContent>
+
+      <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Bekreft kansellering</DialogTitle>
+            <DialogDescription>
+              Er du sikker på om du vil slette denne bookingen?
+            </DialogDescription>
+          </DialogHeader>
+          {bookingToCancel && (
+            <div className="py-4">
+              <p>
+                <strong className="font-semibold">Type: </strong> Soundbox
+              </p>
+              <p>
+                <strong className="font-semibold">Dato: </strong>{" "}
+                {getDate(bookingToCancel.bookedAt)}
+              </p>
+              <p>
+                <strong className="font-semibold">Antall: </strong>
+                {bookingToCancel.item === "ONE_SOUNDBOX" ? 1 : 2}
+              </p>
+            </div>
+          )}
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setIsModalOpen(false)}>
+              Nei, gå tilbake
+            </Button>
+            <Button variant="destructive" onClick={handleConfirmCancel}>
+              Ja, kanseller bookingen
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </Card>
+  );
+}
diff --git a/frontend/src/components/ForStudenten/booking/booking-window.tsx b/frontend/src/components/ForStudenten/booking/booking-window.tsx
new file mode 100644
index 0000000..d44220a
--- /dev/null
+++ b/frontend/src/components/ForStudenten/booking/booking-window.tsx
@@ -0,0 +1,18 @@
+"use client";
+
+import { Label } from "@radix-ui/react-label";
+import { DatePickerForm } from "../ui/date-picker-form";
+import { ReactNode } from "react";
+import BookingForm from "@/components/ForStudenten/booking/booking-form";
+import { BookingCard } from "./booking-card";
+
+const BookingWindow = () => {
+  return (
+    <div className="sm:p-0 text-white min-h-[560px] w-full rounded-md flex flex-col gap-y-2 items-center justify-center">
+      {/* <BookingForm /> */}
+      <BookingCard />
+    </div>
+  );
+};
+
+export default BookingWindow;
diff --git a/frontend/src/components/ForStudenten/ui/date-picker-form.tsx b/frontend/src/components/ForStudenten/ui/date-picker-form.tsx
new file mode 100644
index 0000000..06b9b37
--- /dev/null
+++ b/frontend/src/components/ForStudenten/ui/date-picker-form.tsx
@@ -0,0 +1,146 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { format } from "date-fns";
+import { CalendarIcon } from "lucide-react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { toast } from "@/components/ui/use-toast";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+
+const FormSchema = z.object({
+  bookingDate: z.date({
+    required_error: "En gyldig dato er påkrevd.",
+  }),
+  antall: z.string({
+    required_error: "Ikke et gyldig antall",
+  }),
+});
+
+export function DatePickerForm() {
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+  });
+
+  function onSubmit(data: z.infer<typeof FormSchema>) {
+    toast({
+      title: "Booking gjennomført!",
+      description: (
+        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+          <code className="text-white">{JSON.stringify(data, null, 2)}</code>
+        </pre>
+      ),
+    });
+  }
+
+  return (
+    <>
+      <Form {...form}>
+        <form
+          onSubmit={form.handleSubmit(onSubmit)}
+          className="space-y-8 text-black"
+        >
+          <FormField
+            control={form.control}
+            name="antall"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel className="text-white">Antall</FormLabel>
+                <Select
+                  onValueChange={field.onChange}
+                  defaultValue={field.value}
+                >
+                  <FormControl>
+                    <SelectTrigger className="w-[180px]">
+                      <SelectValue placeholder="Velg antall" />
+                    </SelectTrigger>
+                  </FormControl>
+                  <SelectContent>
+                    <SelectItem value="ONE_SOUNDBOX">1</SelectItem>
+                    <SelectItem value="TWO_SOUNDBOXES">2</SelectItem>
+                  </SelectContent>
+                </Select>
+                <FormDescription className="text-white">
+                  Velg antall soundboxer du vil booke{" "}
+                </FormDescription>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="bookingDate"
+            render={({ field }) => (
+              <FormItem className="flex flex-col">
+                <FormLabel className="text-white">Dato</FormLabel>
+                <Popover>
+                  <PopoverTrigger asChild>
+                    <FormControl>
+                      <Button
+                        variant={"outline"}
+                        className={cn(
+                          "w-[240px] pl-3 text-left font-normal",
+                          !field.value && "text-muted-foreground",
+                        )}
+                      >
+                        {field.value ? (
+                          format(field.value, "PPP")
+                        ) : (
+                          <span>Velg en dato</span>
+                        )}
+                        <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
+                      </Button>
+                    </FormControl>
+                  </PopoverTrigger>
+                  <PopoverContent className="w-auto p-0" align="start">
+                    <Calendar
+                      mode="single"
+                      selected={field.value}
+                      onSelect={field.onChange}
+                      disabled={(date) =>
+                        date > new Date() || date < new Date("1900-01-01")
+                      }
+                      initialFocus
+                    />
+                  </PopoverContent>
+                </Popover>
+                <FormDescription className="text-white">
+                  Velg en dato for bookingen.
+                </FormDescription>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <Button className="px-8" type="submit">
+            Book
+          </Button>
+        </form>
+      </Form>
+    </>
+  );
+}
diff --git a/frontend/src/components/ForStudenten/ui/menu-card.tsx b/frontend/src/components/ForStudenten/ui/menu-card.tsx
index dd70db0..3761fd3 100644
--- a/frontend/src/components/ForStudenten/ui/menu-card.tsx
+++ b/frontend/src/components/ForStudenten/ui/menu-card.tsx
@@ -32,27 +32,40 @@ const MenuCard = ({
   href,
 }: MenuCardProps) => {
   const router = useRouter();
+  const isInternalLink = href.startsWith("/");
   return (
-    <Card className="min-w-[340px] h-[248px] text-[#001D21] flex flex-col justify-between">
-      <CardHeader className="flex flex-row space-x-2 items-center">
+    <Card className="min-w-[280px] min-h-[248px] border-none bg-[#25504F] text-[#fff] flex flex-col justify-between">
+      <CardHeader className="text-[#9DDBAD] flex flex-row space-x-2 items-center">
         {logo}
-        <CardTitle className="flex items-center pb-1 align-middle">
+        <CardTitle className="flex items-center pb-1 align-middle text-white">
           {title}
         </CardTitle>
       </CardHeader>
       <CardContent className="">
-        <CardDescription>{description}</CardDescription>
+        <CardDescription className="text-white text-ellipsis">
+          {description}
+        </CardDescription>
       </CardContent>
       <CardFooter className="mt-auto">
-        {buttonLabel && (
-          <Button
-            className="bg-[#001D21] text-white hover:bg-[#1E4C52] hover:text-white"
-            variant="outline"
-            onClick={() => router.push(href)}
-          >
-            {buttonLabel}
-          </Button>
-        )}
+        {buttonLabel &&
+          (isInternalLink ? (
+            <Link href={href} passHref>
+              <Button
+                className="bg-[#25504F] text-white hover:bg-[#80b0b7] hover:text-white"
+                variant="outline"
+              >
+                {buttonLabel}
+              </Button>
+            </Link>
+          ) : (
+            <Button
+              className="bg-[#25504F] text-white hover:bg-[#80b0b7] hover:text-white"
+              variant="outline"
+              onClick={() => router.push(href)}
+            >
+              {buttonLabel}
+            </Button>
+          ))}
       </CardFooter>
     </Card>
   );
diff --git a/frontend/src/components/auth/login-form.tsx b/frontend/src/components/auth/login-form.tsx
index f28efd0..95502a5 100644
--- a/frontend/src/components/auth/login-form.tsx
+++ b/frontend/src/components/auth/login-form.tsx
@@ -22,11 +22,13 @@ import { FormError } from "../form-error";
 import { FormSuccess } from "../form-success";
 import { login } from "@/utils/login";
 import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { DEFAULT_LOGIN_REDIRECT } from "@/routes";
 
 export const LoginForm = () => {
+  const router = useRouter();
   const [error, setError] = useState<string | undefined>("");
   const [success, setSuccess] = useState<string | undefined>("");
-
   const [isPending, startTransition] = useTransition();
 
   const form = useForm<z.infer<typeof LoginSchema>>({
@@ -46,6 +48,7 @@ export const LoginForm = () => {
         // This checks if 'data' is truthy after the 'login' call
         setError(data?.error);
         setSuccess(data?.success);
+        router.push(DEFAULT_LOGIN_REDIRECT);
       });
     });
   };
diff --git a/frontend/src/components/calendar/event.tsx b/frontend/src/components/event/event.tsx
similarity index 100%
rename from frontend/src/components/calendar/event.tsx
rename to frontend/src/components/event/event.tsx
diff --git a/frontend/src/components/calendar/eventCalendarview.tsx b/frontend/src/components/event/eventCalendarview.tsx
similarity index 100%
rename from frontend/src/components/calendar/eventCalendarview.tsx
rename to frontend/src/components/event/eventCalendarview.tsx
diff --git a/frontend/src/components/calendar/lavterskelkalender.tsx b/frontend/src/components/event/lavterskelkalender.tsx
similarity index 100%
rename from frontend/src/components/calendar/lavterskelkalender.tsx
rename to frontend/src/components/event/lavterskelkalender.tsx
diff --git a/frontend/src/components/calendar/listView.tsx b/frontend/src/components/event/listView.tsx
similarity index 66%
rename from frontend/src/components/calendar/listView.tsx
rename to frontend/src/components/event/listView.tsx
index 84826f5..81ba648 100644
--- a/frontend/src/components/calendar/listView.tsx
+++ b/frontend/src/components/event/listView.tsx
@@ -1,5 +1,5 @@
 "use client";
-import Event from "@/components/calendar/event";
+import Event from "@/components/event/event";
 import { Arrangement } from "@/schemas/arrangement";
 
 interface ListViewProps {
@@ -8,7 +8,7 @@ interface ListViewProps {
 
 const ListView = ({ events }: ListViewProps) => {
   return (
-    <div className="w-[100%] flex flex-col items-center justify-center rounded-md text-white gap-y-2 lg:gap-y-3">
+    <div className="w-full flex flex-col items-center justify-center rounded-md text-white gap-y-2 lg:gap-y-3">
       {events.map((event, index) => (
         <Event key={index} {...event} />
       ))}
diff --git a/frontend/src/components/hero/for_studenten_banner.tsx b/frontend/src/components/hero/for_studenten_banner.tsx
index a6545c1..700f987 100644
--- a/frontend/src/components/hero/for_studenten_banner.tsx
+++ b/frontend/src/components/hero/for_studenten_banner.tsx
@@ -3,6 +3,7 @@
 import { FC } from "react";
 import { useState } from "react";
 import Link from "next/link";
+import { HandCoins, FileText } from "lucide-react";
 
 const Banner: FC = () => {
   const [activeLink, setActiveLink] = useState("");
@@ -152,62 +153,13 @@ const Banner: FC = () => {
             </div>
           </Link>
           <Link
-            href="/for_studenten/rapporter"
-            className={`text-zinc-400 link-hover-effect ${activeLink === "rapporter" ? "selected-state" : ""}`}
-            onClick={() => handleSetSelectedLink("rapporter")}
+            href="/for_studenten/arkiv"
+            className={`text-zinc-400 link-hover-effect ${activeLink === "arkiv" ? "selected-state" : ""}`}
+            onClick={() => handleSetSelectedLink("arkiv")}
           >
             <div className="flex flex-col items-center justify-center py-1 ">
-              <svg
-                width="25"
-                height="25"
-                viewBox="0 0 25 25"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <g id="icon/backpack">
-                  <path
-                    id="Vector"
-                    d="M4.5 20.5V10.5C4.5 9.43913 4.92143 8.42172 5.67157 7.67157C6.42172 6.92143 7.43913 6.5 8.5 6.5H16.5C17.5609 6.5 18.5783 6.92143 19.3284 7.67157C20.0786 8.42172 20.5 9.43913 20.5 10.5V20.5C20.5 21.0304 20.2893 21.5391 19.9142 21.9142C19.5391 22.2893 19.0304 22.5 18.5 22.5H6.5C5.96957 22.5 5.46086 22.2893 5.08579 21.9142C4.71071 21.5391 4.5 21.0304 4.5 20.5Z"
-                    stroke="currentColor"
-                    strokeWidth="2"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                  />
-                  <path
-                    id="Vector_2"
-                    d="M9.5 6.5V4.5C9.5 3.96957 9.71071 3.46086 10.0858 3.08579C10.4609 2.71071 10.9696 2.5 11.5 2.5H13.5C14.0304 2.5 14.5391 2.71071 14.9142 3.08579C15.2893 3.46086 15.5 3.96957 15.5 4.5V6.5"
-                    stroke="currentColor"
-                    strokeWidth="2"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                  />
-                  <path
-                    id="Vector_3"
-                    d="M8.5 21.5V16.5C8.5 15.9696 8.71071 15.4609 9.08579 15.0858C9.46086 14.7107 9.96957 14.5 10.5 14.5H14.5C15.0304 14.5 15.5391 14.7107 15.9142 15.0858C16.2893 15.4609 16.5 15.9696 16.5 16.5V21.5"
-                    stroke="currentColor"
-                    strokeWidth="2"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                  />
-                  <path
-                    id="Vector_4"
-                    d="M8.5 10.5H16.5"
-                    stroke="currentColor"
-                    strokeWidth="2"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                  />
-                  <path
-                    id="Vector_5"
-                    d="M8.5 18.5H16.5"
-                    stroke="currentColor"
-                    strokeWidth="2"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                  />
-                </g>
-              </svg>
-              <p className="text-xs ">Rapporter</p>
+              <FileText size={25} />
+              <p className="text-xs ">Arkiv</p>
             </div>
           </Link>
 
@@ -263,46 +215,13 @@ const Banner: FC = () => {
             </div>
           </Link>
           <Link
-            href="/for_studenten/viser"
-            className={`text-zinc-400 link-hover-effect ${activeLink === "viser" ? "selected-state" : ""}`}
-            onClick={() => handleSetSelectedLink("viser")}
+            href="/for_studenten/soeknader"
+            className={`text-zinc-400 link-hover-effect ${activeLink === "soeknader" ? "selected-state" : ""}`}
+            onClick={() => handleSetSelectedLink("soeknader")}
           >
             <div className="flex flex-col items-center justify-center py-1 ">
-              <svg
-                width="25"
-                height="25"
-                viewBox="0 0 25 25"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <g id="Frame">
-                  <path
-                    id="Vector"
-                    d="M9.5 18.5V5.5L21.5 3.5V16.5"
-                    stroke="currentColor"
-                    strokeWidth="2"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                  />
-                  <path
-                    id="Vector_2"
-                    d="M6.5 21.5C8.15685 21.5 9.5 20.1569 9.5 18.5C9.5 16.8431 8.15685 15.5 6.5 15.5C4.84315 15.5 3.5 16.8431 3.5 18.5C3.5 20.1569 4.84315 21.5 6.5 21.5Z"
-                    stroke="currentColor"
-                    strokeWidth="2"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                  />
-                  <path
-                    id="Vector_3"
-                    d="M18.5 19.5C20.1569 19.5 21.5 18.1569 21.5 16.5C21.5 14.8431 20.1569 13.5 18.5 13.5C16.8431 13.5 15.5 14.8431 15.5 16.5C15.5 18.1569 16.8431 19.5 18.5 19.5Z"
-                    stroke="currentColor"
-                    strokeWidth="2"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                  />
-                </g>
-              </svg>
-              <p className="text-xs ">Viser</p>
+              <HandCoins size={25} />
+              <p className="text-xs ">Søknader</p>
             </div>
           </Link>
           <Link
diff --git a/frontend/src/components/landing/video-player.tsx b/frontend/src/components/landing/video-player.tsx
index 1c247eb..48a42da 100644
--- a/frontend/src/components/landing/video-player.tsx
+++ b/frontend/src/components/landing/video-player.tsx
@@ -2,7 +2,7 @@
 
 const VideoPlayer = () => {
   return (
-    <div className="justify-center items-center w-full h-100 bg-[#001D21] hidden md:inline-flex">
+    <div className="justify-center items-center w-full h-full bg-[#001D21] hidden md:inline-flex">
       <iframe
         width="100%"
         height="400"
diff --git a/frontend/src/components/ui/button.tsx b/frontend/src/components/ui/button.tsx
index b5c5dba..a42f9a9 100644
--- a/frontend/src/components/ui/button.tsx
+++ b/frontend/src/components/ui/button.tsx
@@ -37,7 +37,7 @@ const buttonVariants = cva(
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-  VariantProps<typeof buttonVariants> {
+    VariantProps<typeof buttonVariants> {
   asChild?: boolean;
 }
 
diff --git a/frontend/src/data/booking.ts b/frontend/src/data/booking.ts
new file mode 100644
index 0000000..1dde115
--- /dev/null
+++ b/frontend/src/data/booking.ts
@@ -0,0 +1,49 @@
+import { db } from "@/lib/db";
+import { format } from "date-fns";
+import { nb } from "date-fns/locale";
+
+/**
+ * Retrieves bookings by a specific date.
+ *
+ * @param bookingDate - The date to filter bookings by.
+ * @returns An array of bookings matching the specified date.
+ * @throws {Error} If there was an error fetching the bookings.
+ */
+export const getBookingsByDate = async (bookingDate: Date) => {
+  try {
+    const bookings = db.booking.findMany({
+      where: {
+        bookedAt: bookingDate,
+      },
+    });
+    return bookings;
+  } catch (error) {
+    console.error("Error fetching bookings by date:", error);
+    throw new Error("Could not fetch bookings");
+  }
+};
+
+export const getBookingsByUserID = async (userID: string) => {
+  try {
+    const user = db.user.findUnique({
+      where: {
+        id: userID,
+      },
+      include: {
+        bookings: true,
+      },
+    });
+
+    if (!user) {
+      return { error: "Could not find user." };
+    }
+
+    if (!user.bookings) {
+      return { message: "No current bookings" };
+    }
+
+    return user.bookings;
+  } catch (error) {
+    return { error: "Could not find bookings." };
+  }
+};
diff --git a/frontend/src/routes.ts b/frontend/src/routes.ts
index 3eca716..258b97e 100644
--- a/frontend/src/routes.ts
+++ b/frontend/src/routes.ts
@@ -37,4 +37,4 @@ export const apiAuthPrefix = "/api/auth";
  * The default login redirect path.
  * @type {string}
  */
-export const DEFAULT_LOGIN_REDIRECT = "/";
+export const DEFAULT_LOGIN_REDIRECT = "/for_studenten";
diff --git a/frontend/src/schemas/booking.ts b/frontend/src/schemas/booking.ts
index f755c87..1015705 100644
--- a/frontend/src/schemas/booking.ts
+++ b/frontend/src/schemas/booking.ts
@@ -1,11 +1,14 @@
 import { z } from "zod";
+import { format } from "date-fns";
+import { nb } from "date-fns/locale";
 
 export const BookingSchema = z.object({
+  id: z.string(),
   userID: z.string(),
   komiteID: z.string().optional(),
   item: z.enum(["KONTOR", "ONE_SOUNDBOX", "TWO_SOUNDBOXES"]),
   bookedAt: z.string().transform((str) => new Date(str)),
-  duration: z.number(),
+  duration: z.number().optional(),
 });
 
 export type Booking = z.infer<typeof BookingSchema>;
@@ -14,4 +17,19 @@ export const updateBookingSchema = BookingSchema.partial();
 
 export const deleteBookingSchema = z.object({
   id: z.string(),
-});
\ No newline at end of file
+});
+
+export const bookingFormSchema = z.object({
+  item: z.enum(["ONE_SOUNDBOX", "TWO_SOUNDBOXES"]),
+  bookingDate: z.date({
+    required_error: "En gyldig dato er påkrevd.",
+  }),
+  // bookingDate: z.date().refine(
+  //   (date) => {
+  //     // Transform the date to the correct localization
+  //     const formattedDate = format(date, "PPP", { locale: nb });
+  //     return formattedDate;
+  //   },
+  //   { message: "Invalid date format" },
+  // ),
+});
diff --git a/frontend/src/utils/actions/checkBooking.ts b/frontend/src/utils/actions/checkBooking.ts
new file mode 100644
index 0000000..0b13c53
--- /dev/null
+++ b/frontend/src/utils/actions/checkBooking.ts
@@ -0,0 +1,66 @@
+"use server";
+
+import * as z from "zod";
+import { bookingFormSchema } from "@/schemas/booking";
+import { getBookingsByDate } from "@/data/booking";
+import { db } from "@/lib/db";
+import { BookedItem } from "@prisma/client";
+
+export const checkBooking = async (
+  values: z.infer<typeof bookingFormSchema>,
+  id: string,
+) => {
+  const validatedFields = bookingFormSchema.safeParse(values);
+
+  if (!validatedFields.success || id === "") {
+    return { error: "Invalid details!" };
+  }
+
+  const { item, bookingDate } = validatedFields.data;
+
+  // Check if the booking date is in the past
+  const now = new Date();
+  now.setHours(0, 0, 0, 0);
+  if (new Date(bookingDate) < now) {
+    return { error: "Booking date cannot be in the past!" };
+  }
+
+  const existingBookings = await getBookingsByDate(bookingDate);
+
+  if (existingBookings) {
+    const oneSoundboxCount = existingBookings.filter(
+      (booking) => booking.item === BookedItem.ONE_SOUNDBOX,
+    ).length;
+
+    const twoSoundboxesExists = existingBookings.some(
+      (booking) => booking.item === BookedItem.TWO_SOUNDBOXES,
+    );
+
+    if (twoSoundboxesExists || oneSoundboxCount >= 2) {
+      return { error: "Soundboxes already booked!" };
+    }
+
+    if (oneSoundboxCount === 1 && item === BookedItem.TWO_SOUNDBOXES) {
+      return {
+        error: "Cannot book 2 Soundboxes when 1 Soundbox is already booked!",
+      };
+    }
+  }
+
+  // No existing bookings, create a new booking
+  try {
+    const newBooking = await db.booking.create({
+      data: {
+        item: item as BookedItem,
+        bookedAt: bookingDate,
+        user: {
+          connect: { id: id },
+        },
+      },
+    });
+    return { success: "Booking successful!", booking: newBooking };
+  } catch (error) {
+    console.error("Error creating new booking:", error);
+    return { error: "Could not create booking" };
+  }
+};