diff --git a/kabinizer-back-end/kabinizer-api/Controllers/BookingRequestController.cs b/kabinizer-back-end/kabinizer-api/Controllers/BookingRequestController.cs
index af072c1..a732209 100644
--- a/kabinizer-back-end/kabinizer-api/Controllers/BookingRequestController.cs
+++ b/kabinizer-back-end/kabinizer-api/Controllers/BookingRequestController.cs
@@ -61,11 +61,6 @@ public async Task<ActionResult<IEnumerable<BookingRequestDto>>> GetBookingReques
         try
         {
            var bookingRequests = await bookingRequestService.GetBookingRequestsByUser(userId);
-           if (bookingRequests.Count == 0)
-           {
-               return NotFound("No booking requests found for the user");
-           }
-           
            return Ok(bookingRequests.Select(BookingRequestDto.FromModel));
         }
         catch (Exception ex)
diff --git a/kabinizer-back-end/kabinizer-api/Services/BookingRequest/BookingRequestService.cs b/kabinizer-back-end/kabinizer-api/Services/BookingRequest/BookingRequestService.cs
index 80b7da0..459f725 100644
--- a/kabinizer-back-end/kabinizer-api/Services/BookingRequest/BookingRequestService.cs
+++ b/kabinizer-back-end/kabinizer-api/Services/BookingRequest/BookingRequestService.cs
@@ -73,9 +73,9 @@ public async Task<IEnumerable<BookingRequestEntity>> GetBookingRequests()
         return bookingRequest;
     }
 
-    public async Task<bool> DeleteBookingRequest(Guid bookingRequestId)
+    public async Task DeleteBookingRequest(Guid bookingRequestId)
     {
-        var bookingRequest = await GetBookingRequestById(bookingRequestId);
+        var bookingRequest = await entityContext.BookingRequests.FirstOrDefaultAsync(b => b.Id == bookingRequestId);
         if (bookingRequest == null)
         {
             throw new Exception(
@@ -84,7 +84,6 @@ public async Task<bool> DeleteBookingRequest(Guid bookingRequestId)
 
         entityContext.BookingRequests.Remove(bookingRequest);
         await entityContext.SaveChangesAsync();
-        return true;
     }
 
     public async Task<List<BookingRequestEntity>> GetBookingRequestsByUser(Guid userId)
@@ -109,6 +108,7 @@ public async Task<List<BookingRequestEntity>> GetBookingRequestsByPeriod(Guid pe
             .Include(br => br.Period)
             .Where(b => b.PeriodId == periodId)
             .ToListAsync();
+        
         if (bookingRequests == null)
         {
             throw new Exception("No booking requests found for the period");
diff --git a/kabinizer-front-end/api/index.ts b/kabinizer-front-end/api/index.ts
index 6e8aa38..2fd69a1 100644
--- a/kabinizer-front-end/api/index.ts
+++ b/kabinizer-front-end/api/index.ts
@@ -11,11 +11,8 @@ export type { BookingRequestDto } from "./models/BookingRequestDto";
 export type { CreateBookingRequestDto } from "./models/CreateBookingRequestDto";
 export type { CreateDrawDto } from "./models/CreateDrawDto";
 export type { Draw } from "./models/Draw";
-export type { DrawEntity } from "./models/DrawEntity";
 export type { DrawPeriod } from "./models/DrawPeriod";
 export type { Period } from "./models/Period";
-export type { PeriodEntity } from "./models/PeriodEntity";
-export type { UserEntity } from "./models/UserEntity";
 
 export { BookingRequestService } from "./services/BookingRequestService";
 export { DrawService } from "./services/DrawService";
diff --git a/kabinizer-front-end/api/models/BookingRequestDto.ts b/kabinizer-front-end/api/models/BookingRequestDto.ts
index 25fd9d8..c47cca3 100644
--- a/kabinizer-front-end/api/models/BookingRequestDto.ts
+++ b/kabinizer-front-end/api/models/BookingRequestDto.ts
@@ -3,14 +3,9 @@
 /* tslint:disable */
 /* eslint-disable */
 
-import type { PeriodEntity } from "./PeriodEntity";
-import type { UserEntity } from "./UserEntity";
-
 export type BookingRequestDto = {
   id?: string;
   userId?: string;
-  user?: UserEntity;
-  period?: PeriodEntity;
   periodId?: string;
   createdDate?: string;
   createdBy?: string;
diff --git a/kabinizer-front-end/api/models/DrawEntity.ts b/kabinizer-front-end/api/models/DrawEntity.ts
deleted file mode 100644
index fb18e48..0000000
--- a/kabinizer-front-end/api/models/DrawEntity.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-/* generated using openapi-typescript-codegen -- do no edit */
-/* istanbul ignore file */
-/* tslint:disable */
-/* eslint-disable */
-
-import type { PeriodEntity } from "./PeriodEntity";
-
-export type DrawEntity = {
-  id?: string;
-  deadlineStart?: string;
-  deadlineEnd?: string;
-  title?: string | null;
-  isSpecial?: boolean;
-  periods?: Array<PeriodEntity> | null;
-};
diff --git a/kabinizer-front-end/api/models/PeriodEntity.ts b/kabinizer-front-end/api/models/PeriodEntity.ts
deleted file mode 100644
index 59a2549..0000000
--- a/kabinizer-front-end/api/models/PeriodEntity.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-/* generated using openapi-typescript-codegen -- do no edit */
-/* istanbul ignore file */
-/* tslint:disable */
-/* eslint-disable */
-
-import type { DrawEntity } from "./DrawEntity";
-
-export type PeriodEntity = {
-  id?: string;
-  periodStart?: string;
-  periodEnd?: string;
-  title?: string | null;
-  drawId?: string;
-  draw?: DrawEntity;
-};
diff --git a/kabinizer-front-end/api/models/UserEntity.ts b/kabinizer-front-end/api/models/UserEntity.ts
deleted file mode 100644
index c33ab00..0000000
--- a/kabinizer-front-end/api/models/UserEntity.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-/* generated using openapi-typescript-codegen -- do no edit */
-/* istanbul ignore file */
-/* tslint:disable */
-/* eslint-disable */
-
-export type UserEntity = {
-  id?: string;
-  name?: string | null;
-};
diff --git a/kabinizer-front-end/src/pages/selectPeriods/Calendar/Calendar.tsx b/kabinizer-front-end/src/pages/selectPeriods/Calendar/Calendar.tsx
deleted file mode 100644
index 1c22f2f..0000000
--- a/kabinizer-front-end/src/pages/selectPeriods/Calendar/Calendar.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { CreateBookingRequestDto, Draw } from "../../../../api";
-import { CompareDates } from "../../../utils";
-import { GetWeeklyPeriods, getMonthsMap } from "@/utils/calendar";
-import Months from "./Months";
-
-const Calendar = ({
-  draws,
-  selected,
-  setSelected,
-}: {
-  draws: Draw[];
-  selected: CreateBookingRequestDto[];
-  setSelected: (selected: CreateBookingRequestDto[]) => void;
-}) => {
-  const periods = draws
-    .map((value) => value.periods ?? [])
-    .flat()
-    .sort((a, b) => {
-      return CompareDates(a, b);
-    });
-
-  const onClick = (periodId: string) => {
-    const checked = selected.find((s) => s.periodId === periodId);
-
-    if (checked) {
-      setSelected(selected.filter((s) => s.periodId !== periodId));
-    } else {
-      const period = periods.find((p) => p.id === periodId);
-      if (period) {
-        setSelected([
-          ...selected,
-          {
-            periodId: period.id ?? "",
-          },
-        ]);
-      }
-    }
-  };
-
-  if (periods.length === 0) {
-    return <div>No periods</div>;
-  }
-
-  const data = GetWeeklyPeriods(periods, draws);
-  const monthMap = getMonthsMap(data);
-
-  console.log(monthMap);
-
-  return <Months months={monthMap} selected={selected} onClick={onClick} />;
-};
-
-export default Calendar;
diff --git a/kabinizer-front-end/src/pages/selectPeriods/Calendar/DrawPeriodsCalendar.tsx b/kabinizer-front-end/src/pages/selectPeriods/Calendar/DrawPeriodsCalendar.tsx
new file mode 100644
index 0000000..ed8c37b
--- /dev/null
+++ b/kabinizer-front-end/src/pages/selectPeriods/Calendar/DrawPeriodsCalendar.tsx
@@ -0,0 +1,66 @@
+import {
+  BookingRequestService,
+  CreateBookingRequestDto,
+  DrawService,
+} from "../../../../api";
+import { CompareDates } from "@/utils";
+import DrawPeriodMonths from "./Months";
+import { useMutation, useQuery, useQueryClient } from "react-query";
+import useUser from "@/hooks/useUser.tsx";
+import { getMonthsMap, GetWeeklyPeriods } from "@/utils/calendar.ts";
+
+const DrawPeriodsCalendar = () => {
+  const user = useUser();
+  const queryClient = useQueryClient();
+
+  const { data: draws, isLoading: isLoadingDraws } = useQuery(
+    "getApiDraw",
+    DrawService.getApiDraw,
+  );
+  const { data: bookingRequests, isLoading: isLoadingBookingRequests } =
+    useQuery(
+      "myBookingRequests",
+      () => BookingRequestService.getApiBookingRequestUser(user.localAccountId),
+      { enabled: !!user.localAccountId },
+    );
+
+  const addBooking = useMutation(
+    "postApiBooking",
+    (payload: CreateBookingRequestDto[]) =>
+      BookingRequestService.postApiBookingRequest(payload),
+    { onSuccess: () => queryClient.invalidateQueries("myBookingRequests") },
+  );
+  const removeBooking = useMutation(
+    "deleteApiBooking",
+    (payload: string[]) =>
+      BookingRequestService.deleteApiBookingRequest(payload),
+    { onSuccess: () => queryClient.invalidateQueries("myBookingRequests") },
+  );
+
+  if (isLoadingDraws || isLoadingBookingRequests) return <div>Loading...</div>;
+
+  const periods = draws
+    ?.flatMap((value) => value.periods ?? [])
+    .sort(CompareDates);
+
+  if (!periods?.length) return <div>No periods</div>;
+
+  const monthMap = getMonthsMap(GetWeeklyPeriods(periods, draws || []));
+
+  const toggleBooking = (periodId: string) => {
+    const booking = bookingRequests?.find((b) => b.periodId === periodId);
+    booking?.id
+      ? removeBooking.mutate([booking.id])
+      : addBooking.mutate([{ periodId }]);
+  };
+
+  return (
+    <DrawPeriodMonths
+      months={monthMap}
+      selected={bookingRequests || []}
+      onClick={toggleBooking}
+    />
+  );
+};
+
+export default DrawPeriodsCalendar;
diff --git a/kabinizer-front-end/src/pages/selectPeriods/Calendar/Months.tsx b/kabinizer-front-end/src/pages/selectPeriods/Calendar/Months.tsx
index 292f4b9..520d0b9 100644
--- a/kabinizer-front-end/src/pages/selectPeriods/Calendar/Months.tsx
+++ b/kabinizer-front-end/src/pages/selectPeriods/Calendar/Months.tsx
@@ -3,6 +3,7 @@ import { COLORS, MONTHS } from "@/options";
 import { MonthMapType } from "@/types";
 import Weeks from "./Weeks";
 import { OptionsProps } from "./Options";
+import React from "react";
 
 type MonthsProps = {
   months: MonthMapType;
diff --git a/kabinizer-front-end/src/pages/selectPeriods/Deadline.tsx b/kabinizer-front-end/src/pages/selectPeriods/Deadline.tsx
deleted file mode 100644
index 8f8a1cd..0000000
--- a/kabinizer-front-end/src/pages/selectPeriods/Deadline.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { Draw } from "../../../api";
-import { FormatDate } from "../../utils";
-
-type DeadlineProps = {
-  draws: Draw[];
-};
-
-const Deadline = ({ draws }: DeadlineProps) => {
-  return (
-    <div className="rounded-xl bg-[#E6E6E6] p-2">
-      <div className="flex justify-end">
-        <h2 className="font-poppins font-bold text-[#515151]">Deadline</h2>
-      </div>
-      <div className="flex flex-col gap-1">
-        {draws.map((draw) => (
-          <div key={draw.id} className="flex justify-between align-middle">
-            <p className="text-l font-poppins font-bold text-[#020202]">
-              {draw.title}
-            </p>
-            <p className="font-poppins text-2xl font-bold text-[#354A71]">
-              {draw.end ? FormatDate(new Date(draw.end)) : "–"}
-            </p>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-};
-
-export default Deadline;
diff --git a/kabinizer-front-end/src/pages/selectPeriods/DrawDeadlines.tsx b/kabinizer-front-end/src/pages/selectPeriods/DrawDeadlines.tsx
new file mode 100644
index 0000000..e73930c
--- /dev/null
+++ b/kabinizer-front-end/src/pages/selectPeriods/DrawDeadlines.tsx
@@ -0,0 +1,35 @@
+import { DrawService } from "../../../api";
+import { FormatDate } from "@/utils";
+import { useQuery } from "react-query";
+
+const DrawDeadlines = () => {
+  const { data: draws, isLoading } = useQuery(["getApiDraw"], () =>
+    DrawService.getApiDraw(),
+  );
+  if (isLoading) return <div>Loading...</div>;
+  if (!draws) return <div>No data</div>;
+
+  return (
+    <div className="w-full pb-10">
+      <div className="rounded-xl bg-[#E6E6E6] p-2">
+        <div className="flex justify-end">
+          <h2 className="font-poppins font-bold text-[#515151]">Deadline</h2>
+        </div>
+        <div className="flex flex-col gap-1">
+          {draws?.map((draw) => (
+            <div key={draw.id} className="flex justify-between align-middle">
+              <p className="text-l font-poppins font-bold text-[#020202]">
+                {draw.title}
+              </p>
+              <p className="font-poppins text-2xl font-bold text-[#354A71]">
+                {draw.end ? FormatDate(new Date(draw.end)) : "–"}
+              </p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DrawDeadlines;
diff --git a/kabinizer-front-end/src/pages/selectPeriods/index.tsx b/kabinizer-front-end/src/pages/selectPeriods/index.tsx
index 46255ac..8331c73 100644
--- a/kabinizer-front-end/src/pages/selectPeriods/index.tsx
+++ b/kabinizer-front-end/src/pages/selectPeriods/index.tsx
@@ -1,128 +1,29 @@
-import { useMutation, useQuery, useQueryClient } from "react-query";
-import {
-  BookingRequest,
-  BookingRequestService,
-  CreateBookingRequestDto,
-  DrawService,
-} from "../../../api/index.ts";
+import { CreateBookingRequestDto } from "../../../api";
 
 import WeekDayRow from "../../components/WeekDayRow";
-import Calendar from "./Calendar/Calendar.tsx";
+import DrawPeriodsCalendar from "./Calendar/DrawPeriodsCalendar.tsx";
 import { useState } from "react";
-import Button from "../../components/Button.tsx";
-import Deadline from "./Deadline.tsx";
+import DrawDeadlines from "./DrawDeadlines.tsx";
 import Title from "../../components/Title.tsx";
-import { getAllBookingRequests } from "@/utils/calendar.ts";
-
-const getDeletedBookings = (
-  bookings: BookingRequest[] | undefined = [],
-  selected: CreateBookingRequestDto[],
-) => {
-  return bookings.filter(
-    (b) => !selected.map((s) => s.periodId).includes(b.period?.id),
-  );
-};
 
 const SelectPeriodsView = () => {
-  const queryClient = useQueryClient();
   const [selected, setSelected] = useState<CreateBookingRequestDto[]>([]);
 
-  const { data = [], isLoading } = useQuery(["getApiDraw"], () =>
-    DrawService.getApiDraw(),
-  );
-
-  const getSelectedBookingRequests = async () => {
-    try {
-      const bookingRequests =
-        await BookingRequestService.getApiBookingRequest();
-
-      setSelected(
-        bookingRequests.map((d) => ({
-          periodId: d.period?.id ?? "",
-          userId: d.user?.id ?? "",
-          bookingRequestId: d.bookingRequestId ?? "",
-        })),
-      );
-
-      return bookingRequests;
-    } catch (error) {
-      console.error(error);
-    }
-  };
-
-  const { data: bookings } = useQuery(
-    ["getApiBookingRequest"],
-    () => getSelectedBookingRequests(),
-    { staleTime: Infinity, cacheTime: Infinity },
-  );
-
-  const handleUpdate = async () => {
-    try {
-      const deletedBookings = getDeletedBookings(bookings, selected);
-      const deletedBookingIds = deletedBookings.map(
-        (d) => d.bookingRequestId as string,
-      );
-
-      await BookingRequestService.deleteApiBookingRequest(deletedBookingIds);
-      await BookingRequestService.postApiBookingRequest(selected);
-
-      queryClient.invalidateQueries("getApiBookingRequest");
-    } catch (error) {
-      console.error(error);
-    }
-  };
-
-  const { mutateAsync: update, isLoading: isUpdating } = useMutation(() =>
-    handleUpdate(),
-  );
-
-  const handleSelectAll = () => {
-    const allPeriods = getAllBookingRequests(data);
-    if (selected.length === allPeriods.length) {
-      setSelected([]);
-    } else {
-      setSelected(allPeriods);
-    }
-  };
-
-  if (isLoading) {
-    return (
-      <div className="flex h-full items-center justify-center">Loading...</div>
-    );
-  }
-
   return (
     <div className="flex flex-col items-center py-10">
       <div className="flex w-96 flex-col items-center gap-4">
         <Title>Mine ønsker</Title>
-        <div className="w-full pb-10">
-          <Deadline draws={data} />
-        </div>
+        <DrawDeadlines />
         <div className="flex w-full justify-between">
           <Label />
-          <div className="w-32">
-            <Button size="medium" onClick={handleSelectAll}>
-              Marker alle
-            </Button>
-          </div>
         </div>
         <div className="flex flex-col gap-1">
           <WeekDayRow />
-          <Calendar
-            draws={data}
+          <DrawPeriodsCalendar
             selected={selected}
             setSelected={(selected) => setSelected(selected)}
           />
         </div>
-        <div className="flex h-8 w-full items-center justify-center px-20 pt-6">
-          {isUpdating ? (
-            <p className="ml-4">Lagrer...</p>
-          ) : (
-            <Button size="large" onClick={update} disabled={isLoading}>
-              Lagre
-            </Button>
-          )}
-        </div>
       </div>
     </div>
   );