diff --git a/backend/src/main/java/com/itestra/eep/mappers/EventMapper.java b/backend/src/main/java/com/itestra/eep/mappers/EventMapper.java
index 4642ba0..0aaf4ca 100644
--- a/backend/src/main/java/com/itestra/eep/mappers/EventMapper.java
+++ b/backend/src/main/java/com/itestra/eep/mappers/EventMapper.java
@@ -6,7 +6,6 @@
 import com.itestra.eep.dtos.FileDetailsDTO;
 import com.itestra.eep.models.Event;
 import com.itestra.eep.models.FileEntity;
-import com.itestra.eep.models.Participation;
 import org.mapstruct.*;
 
 import java.time.LocalDateTime;
@@ -28,20 +27,12 @@ public interface EventMapper {
     List<EventDetailsDTO> toDetailsDto(List<Event> events);
 
     @Mappings({
-            @Mapping(source = "participations", target = "participantCount", qualifiedByName = "countConfirmed"),
             @Mapping(source = "date", target = "status", qualifiedByName = "status")
     })
     EventDetailsDTO toDetailsDto(Event event);
 
     FileDetailsDTO toFileDetailsDto(FileEntity file);
 
-    @Named("countConfirmed")
-    default int map(List<Participation> participations) {
-        return participations.stream().filter(Participation::isConfirmed)
-                .mapToInt(p -> p.getGuestCount() + 1)
-                .sum();
-    }
-
     @Named("status")
     default String status(LocalDateTime eventDate) {
         return eventDate.isAfter(LocalDateTime.now()) ? "upcoming" : "completed";
diff --git a/backend/src/main/java/com/itestra/eep/models/Employee.java b/backend/src/main/java/com/itestra/eep/models/Employee.java
index 3d14653..cf0d083 100644
--- a/backend/src/main/java/com/itestra/eep/models/Employee.java
+++ b/backend/src/main/java/com/itestra/eep/models/Employee.java
@@ -21,7 +21,7 @@ public class Employee {
     private UUID id;
 
     @MapsId
-    @OneToOne(fetch = FetchType.LAZY, optional = false)
+    @OneToOne(fetch = FetchType.LAZY, optional = false, orphanRemoval = true)
     @JoinColumn(name = "profile_id", nullable = false)
     private Profile profile;
 
@@ -35,7 +35,7 @@ public class Employee {
     @Column(name = "employment_type")
     private EmploymentType employmentType;
 
-    @OneToMany(mappedBy = "employee")
+    @OneToMany(mappedBy = "employee", orphanRemoval = true)
     private List<Participation> participations = new LinkedList<>();
 
     @ManyToMany
diff --git a/backend/src/main/java/com/itestra/eep/models/Event.java b/backend/src/main/java/com/itestra/eep/models/Event.java
index 07b3157..d9a983f 100644
--- a/backend/src/main/java/com/itestra/eep/models/Event.java
+++ b/backend/src/main/java/com/itestra/eep/models/Event.java
@@ -50,5 +50,18 @@ public class Event {
     @OneToOne(mappedBy = "event", orphanRemoval = true)
     private Schematics schematics;
 
+    @Transient
+    public int getParticipantCount() {
+        return getParticipantCount(null);
+    }
+
+    @Transient
+    public int getParticipantCount(Participation excludeParticipation) {
+        return participations.stream()
+                .filter(p -> excludeParticipation == null || !p.getId().equals(excludeParticipation.getId()))
+                .mapToInt(p -> p.getGuestCount() + 1)
+                .sum();
+    }
+
 }
 
diff --git a/backend/src/main/java/com/itestra/eep/services/impl/EventServiceImpl.java b/backend/src/main/java/com/itestra/eep/services/impl/EventServiceImpl.java
index dc3bff6..456b5a1 100644
--- a/backend/src/main/java/com/itestra/eep/services/impl/EventServiceImpl.java
+++ b/backend/src/main/java/com/itestra/eep/services/impl/EventServiceImpl.java
@@ -58,11 +58,9 @@ public Event create(EventCreateDTO dto) {
     public Event update(UUID id, EventUpdateDTO dto) {
         Event event = eventRepository.findById(id).orElseThrow(EventNotFoundException::new);
         eventMapper.updateEventFromDto(dto, event);
-
-        if (event.getCapacity() < participationRepository.sumGuestCounts(event, null)) {
+        if (dto.getCapacity() != null && event.getParticipantCount(null) > dto.getCapacity()) {
             throw new EventCapacityExceededException();
         }
-
         return eventRepository.save(event);
     }
 
@@ -107,9 +105,7 @@ public void deleteParticipant(UUID participationId) {
 
     private void validateCapacity(Event event, int guestCount, Participation excludeParticipation) {
 
-        Integer total = participationRepository.sumGuestCounts(event, excludeParticipation == null ? null : excludeParticipation.getId());
-
-        int currentTotal = total != null ? total : 0;
+        int currentTotal = event.getParticipantCount(excludeParticipation);
 
         int newTotal = currentTotal + guestCount + 1;
 
diff --git a/backend/src/main/java/com/itestra/eep/webcontroller/SchematicsController.java b/backend/src/main/java/com/itestra/eep/webcontroller/SchematicsController.java
index d8f34a2..22057b9 100644
--- a/backend/src/main/java/com/itestra/eep/webcontroller/SchematicsController.java
+++ b/backend/src/main/java/com/itestra/eep/webcontroller/SchematicsController.java
@@ -28,7 +28,7 @@ public class SchematicsController {
     private final SchematicsMapper schematicsMapper;
 
     @GetMapping("/{id}")
-    @PreAuthorize("hasAnyAuthority('ADMIN', 'EMPLOYEE', 'VISITOR')")
+    @PreAuthorize("hasAnyAuthority('ADMIN', 'EMPLOYEE')")
     public ResponseEntity<SchematicsCreateDTO> getSchematics(@PathVariable UUID id) {
         Schematics schematics = schematicsService.findById(id);
         return new ResponseEntity<>(schematicsMapper.toSchematicsCreateDTO(schematics), HttpStatus.OK);
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index a50cddb..cf69c5d 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,8 +1,8 @@
-import { RouterProvider } from "react-router-dom";
-import { ConfigProvider } from "antd";
-import { AuthProvider } from "./contexts/AuthContext";
-import { router } from "./routes/routes";
-import { Toaster } from "react-hot-toast";
+import {RouterProvider} from "react-router-dom";
+import {ConfigProvider} from "antd";
+import {AuthProvider} from "./contexts/AuthContext";
+import {router} from "./routes/routes";
+import {Toaster} from "react-hot-toast";
 
 function App() {
   return (
diff --git a/frontend/src/components/AppContainer.tsx b/frontend/src/components/AppContainer.tsx
index 3be6171..7223173 100644
--- a/frontend/src/components/AppContainer.tsx
+++ b/frontend/src/components/AppContainer.tsx
@@ -1,15 +1,9 @@
-import { Avatar, Dropdown, Layout, Menu } from "antd";
-import { Outlet, useLocation, useNavigate } from "react-router-dom";
-import {
-  CalendarOutlined,
-  DashboardOutlined,
-  LogoutOutlined,
-  TeamOutlined,
-  UserOutlined,
-} from "@ant-design/icons";
-import { useAuth } from "../contexts/AuthContext";
+import {Avatar, Dropdown, Layout, Menu} from "antd";
+import {Outlet, useLocation, useNavigate} from "react-router-dom";
+import {CalendarOutlined, DashboardOutlined, LogoutOutlined, TeamOutlined, UserOutlined,} from "@ant-design/icons";
+import {useAuth} from "../contexts/AuthContext";
 import useApiService from "../services/apiService.ts";
-import { useState } from "react";
+import {useState} from "react";
 import itestraEventLogo from "../assets/itestra_event_logo.png";
 
 const { Sider, Content, Footer } = Layout;
@@ -70,27 +64,27 @@ export const AppContainer = () => {
   return (
     <Layout className="min-h-screen">
       <Sider
-        theme="dark"
-        className="fixed h-full z-10"
-        breakpoint="lg"
-        collapsedWidth="0"
-        onCollapse={value => setCollapsed(value)}
-        onBreakpoint={broken => setCollapsed(broken)}
+          theme="dark"
+          className="fixed h-full z-10"
+          breakpoint="lg"
+          collapsedWidth="0"
+          onCollapse={value => setCollapsed(value)}
+          onBreakpoint={broken => setCollapsed(broken)}
       >
         <div
-          style={{
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
-            height: 100,
-            marginTop: 16,
-            marginBottom: 4,
-          }}
+            style={{
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              height: 100,
+              marginTop: 16,
+              marginBottom: 4,
+            }}
         >
           <img
             src={itestraEventLogo}
             alt="itestra event planning logo"
-            style={{ height: "64px" }}
+            style={{height: "64px"}}
           />
         </div>
         <Menu
@@ -102,8 +96,8 @@ export const AppContainer = () => {
         />
         {/* User profile at the bottom */}
         <div
-          style={{ position: "absolute", bottom: 0, width: "100%", padding: "24px 0" }}
-          className="flex flex-col items-center"
+            style={{position: "absolute", bottom: 0, width: "100%", padding: "24px 0"}}
+            className="flex flex-col items-center"
         >
           <Dropdown
             menu={{
@@ -120,17 +114,17 @@ export const AppContainer = () => {
         </div>
       </Sider>
       <Layout
-        className="flex flex-col min-h-screen"
-        style={{
-          marginLeft: collapsed ? 0 : 200,
-        }}
+          className="flex flex-col min-h-screen"
+          style={{
+            marginLeft: collapsed ? 0 : 200,
+          }}
       >
         <Content className="bg-gray-50 flex-1 overflow-auto">
           <div className="p-6">
             <Outlet />
           </div>
         </Content>
-        <Footer className="text-center border-t border-gray-200" style={{ background: "#e6f4ff" }}>
+        <Footer className="text-center border-t border-gray-200" style={{background: "#e6f4ff"}}>
           Event Exchange Platform ©{new Date().getFullYear()}
         </Footer>
       </Layout>
diff --git a/frontend/src/components/Breadcrumb.tsx b/frontend/src/components/Breadcrumb.tsx
index f635bee..9498359 100644
--- a/frontend/src/components/Breadcrumb.tsx
+++ b/frontend/src/components/Breadcrumb.tsx
@@ -1,5 +1,5 @@
-import { Breadcrumb as AntBreadcrumb } from "antd";
-import { Link } from "react-router-dom";
+import {Breadcrumb as AntBreadcrumb} from "antd";
+import {Link} from "react-router-dom";
 
 export interface BreadcrumbItem {
   path: string;
diff --git a/frontend/src/components/ProtectedRoute.tsx b/frontend/src/components/ProtectedRoute.tsx
index ced1cb6..d7b96ad 100644
--- a/frontend/src/components/ProtectedRoute.tsx
+++ b/frontend/src/components/ProtectedRoute.tsx
@@ -1,6 +1,6 @@
-import { Navigate, useLocation } from "react-router-dom";
-import { useAuth } from "../contexts/AuthContext";
-import { Spin } from "antd";
+import {Navigate, useLocation} from "react-router-dom";
+import {useAuth} from "../contexts/AuthContext";
+import {Spin} from "antd";
 
 interface ProtectedRouteProps {
   children: React.ReactNode;
@@ -14,10 +14,10 @@ export function ProtectedRoute({ children }: ProtectedRouteProps) {
     return (
       <div
         style={{
-          height: "100vh",
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
+            height: "100vh",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
         }}
       >
         <Spin size="large" />
diff --git a/frontend/src/components/canvas/KonvaCanvas.tsx b/frontend/src/components/canvas/KonvaCanvas.tsx
index c2b2437..7f71b88 100644
--- a/frontend/src/components/canvas/KonvaCanvas.tsx
+++ b/frontend/src/components/canvas/KonvaCanvas.tsx
@@ -1,14 +1,14 @@
-import { useCanvas } from "./contexts/CanvasContext.tsx";
-import { useEffect, useRef, useState } from "react";
-import { Group, Layer, Rect, Stage, Text, Transformer } from "react-konva";
-import { type ElementProperties, renderElement, shapeFactory } from "./utils/constants";
+import {useCanvas} from "./contexts/CanvasContext.tsx";
+import {useEffect, useRef, useState} from "react";
+import {Group, Layer, Rect, Stage, Text, Transformer} from "react-konva";
+import {type ElementProperties, renderElement, shapeFactory} from "./utils/constants";
 import Toolbox from "./elements/Toolbox";
-import { ElementInspector } from "./elements/ElementInspector.tsx";
+import {ElementInspector} from "./elements/ElementInspector.tsx";
 import Konva from "konva";
-import type { Table } from "./elements/Table.tsx";
-import type { Chair } from "./elements/Chair.tsx";
-import type { Wall } from "./elements/Wall.tsx";
-import type { KonvaEventObject } from "konva/lib/Node";
+import type {Table} from "./elements/Table.tsx";
+import type {Chair} from "./elements/Chair.tsx";
+import type {Wall} from "./elements/Wall.tsx";
+import type {KonvaEventObject} from "konva/lib/Node";
 import {
   addElement,
   changeBuildMode,
@@ -19,23 +19,23 @@ import {
   updateMultipleElements,
 } from "./actions/actions.tsx";
 import useApiService from "../../services/apiService.ts";
-import { useParams } from "react-router-dom";
-import { Typography } from "antd";
+import {useParams} from "react-router-dom";
+import {Typography} from "antd";
 
-const { Title } = Typography;
+const {Title} = Typography;
 
 function KonvaCanvas() {
-  const { state, dispatch } = useCanvas();
+  const {state, dispatch} = useCanvas();
   const stageRef = useRef<Konva.Stage | null>(null);
   const [scale, setScale] = useState(1);
   const [quickWallCoordinates, setQuickWallCoordinates] = useState<{
     x1?: number;
     y1?: number;
-  }>({ x1: undefined, y1: undefined });
-  const { getSchematics } = useApiService();
+  }>({x1: undefined, y1: undefined});
+  const {getSchematics} = useApiService();
   const [selectedIds, setSelectedIds] = useState<string[]>([]);
   const [initiated, setInitiated] = useState(false);
-  const { schematicsId } = useParams();
+  const {schematicsId} = useParams();
   const [isShiftPressed, setIsShiftPressed] = useState(false);
 
   const [selectionRectangle, setSelectionRectangle] = useState({
@@ -46,21 +46,21 @@ function KonvaCanvas() {
     y2: 0,
   });
 
-  useEffect(() => {
-    const fetchData = async () => {
-      if (!initiated && schematicsId) {
-        const fetchedAppState = await getSchematics(schematicsId);
-        if (fetchedAppState && !initiated) {
-          dispatch(setState(fetchedAppState.state));
-        }
-      }
-    };
-    fetchData().then(() => {
-      stageRef.current?.setPosition(state.canvasPosition ? state.canvasPosition : { x: 0, y: 0 });
-      setScale(state.scale);
-      setInitiated(true);
-    });
-  }, [dispatch, getSchematics, initiated, schematicsId, state.canvasPosition, state.scale]);
+    useEffect(() => {
+        const fetchData = async () => {
+            if (!initiated && schematicsId) {
+                const fetchedAppState = await getSchematics(schematicsId);
+                if (fetchedAppState && !initiated) {
+                    dispatch(setState({...fetchedAppState, buildMode: 0}));
+                }
+            }
+        };
+        fetchData().then(() => {
+            stageRef.current?.setPosition(state.canvasPosition ? state.canvasPosition : {x: 0, y: 0});
+            setScale(state.scale)
+            setInitiated(true);
+        });
+    }, [dispatch, getSchematics, initiated, schematicsId, state.canvasPosition, state.scale]);
 
   useEffect(() => {
     window.scrollTo(0, 0); // we have to scroll to top-left corner of the page, otherwise it looks bad
@@ -95,7 +95,7 @@ function KonvaCanvas() {
       if (e.key === "Escape") {
         setSelectedIds([]);
 
-        setQuickWallCoordinates({ x1: undefined, y1: undefined });
+        setQuickWallCoordinates({x1: undefined, y1: undefined});
 
         dispatch(changeBuildMode(0));
       }
@@ -146,18 +146,18 @@ function KonvaCanvas() {
 
       // Get all attached chairs and their offsets
       const updates = el
-        .attachedChairs!.map((chairId: string) => {
-          const chair = state.elements.find(e => e.id === chairId) as Chair;
-          if (chair && chair.offset) {
-            return {
-              id: chairId,
-              x: newX + chair.offset.dx,
-              y: newY + chair.offset.dy,
-            };
-          }
-          return null;
-        })
-        .filter(Boolean);
+          .attachedChairs!.map((chairId: string) => {
+        const chair = state.elements.find(e => e.id === chairId) as Chair;
+        if (chair && chair.offset) {
+          return {
+            id: chairId,
+            x: newX + chair.offset.dx,
+            y: newY + chair.offset.dy,
+          };
+        }
+        return null;
+      })
+          .filter(Boolean);
 
       // Update all chair positions
       if (updates.length > 0) {
@@ -176,17 +176,17 @@ function KonvaCanvas() {
     if (el.type === "chair") {
       // Find the closest table
       const tables = state.elements.filter(
-        (t): t is Table => t.type === "circleTable" || t.type === "rectTable"
+          (t): t is Table => t.type === "circleTable" || t.type === "rectTable"
       );
 
       const table = tables.find(t => {
         return (
-          (t.type === "circleTable" && Math.hypot(t.x - x, t.y - y) < t.radius! + el.radius!) ||
-          (t.type === "rectTable" &&
-            x >= t.x - el.radius! &&
-            x <= t.x + t.width! + el.radius! &&
-            y >= t.y - el.radius! &&
-            y <= t.y + t.height! + el.radius!)
+            (t.type === "circleTable" && Math.hypot(t.x - x, t.y - y) < t.radius! + el.radius!) ||
+            (t.type === "rectTable" &&
+                x >= t.x - el.radius! &&
+                x <= t.x + t.width! + el.radius! &&
+                y >= t.y - el.radius! &&
+                y <= t.y + t.height! + el.radius!)
         );
       }) as Table;
 
@@ -247,26 +247,26 @@ function KonvaCanvas() {
 
         // Update chair with attachment info
         dispatch(
-          updateElement({
-            id: el.id,
-            x: attachPosition.x,
-            y: attachPosition.y,
-            attachedTo: table.id,
-            offset: {
-              dx: attachPosition.x - table.x,
-              dy: attachPosition.y - table.y,
-              angle: attachPosition.angle,
-            },
-          })
+            updateElement({
+              id: el.id,
+              x: attachPosition.x,
+              y: attachPosition.y,
+              attachedTo: table.id,
+              offset: {
+                dx: attachPosition.x - table.x,
+                dy: attachPosition.y - table.y,
+                angle: attachPosition.angle,
+              },
+            })
         );
 
         // Update table with attached chair
         if (!table.attachedChairs.includes(el.id)) {
           dispatch(
-            updateElement({
-              id: table.id,
-              attachedChairs: [...table.attachedChairs, el.id],
-            })
+              updateElement({
+                id: table.id,
+                attachedChairs: [...table.attachedChairs, el.id],
+              })
           );
         }
         return;
@@ -275,27 +275,27 @@ function KonvaCanvas() {
         const parent = state.elements.find(t => t.id === el.attachedTo) as Table;
         if (parent) {
           dispatch(
-            updateElement({
-              id: parent.id,
-              attachedChairs: parent.attachedChairs.filter(cid => cid !== el.id),
-            })
+              updateElement({
+                id: parent.id,
+                attachedChairs: parent.attachedChairs.filter(cid => cid !== el.id),
+              })
           );
         }
         dispatch(
-          updateElement({
-            id: el.id,
-            x,
-            y,
-            attachedTo: null,
-            offset: null,
-          })
+            updateElement({
+              id: el.id,
+              x,
+              y,
+              attachedTo: null,
+              offset: null,
+            })
         );
         return;
       }
     }
 
     // Default handling for position updates
-    dispatch(updateElement({ id, x, y }));
+    dispatch(updateElement({id, x, y}));
   };
 
   function handleDoubleClickOnElement(_e: KonvaEventObject<MouseEvent>, el: ElementProperties) {
@@ -318,25 +318,25 @@ function KonvaCanvas() {
       node.scaleY(1);
 
       const updates =
-        el.type === "circleTable" || el.type === "chair"
-          ? {
-              id,
-              radius: el.radius ? Math.max(10, el.radius * scaleX) : undefined,
-            }
-          : el.type !== "wall"
-            ? {
+          el.type === "circleTable" || el.type === "chair"
+              ? {
+                id,
+                radius: el.radius ? Math.max(10, el.radius * scaleX) : undefined,
+              }
+              : el.type !== "wall"
+                  ? {
                 id,
                 width: el.width ? Math.max(10, el.width * scaleX) : undefined,
                 height: el.height ? Math.max(10, el.height * scaleY) : undefined,
                 rotation: node.rotation(),
-              }
-            : {
+                  }
+                  : {
                 id,
                 x1: el.x1! * scaleX,
                 y1: el.y1! * scaleY,
                 x2: el.x2! * scaleX,
                 y2: el.y2! * scaleY,
-              };
+                  };
 
       dispatch(updateElement(updates));
     }
@@ -373,38 +373,39 @@ function KonvaCanvas() {
       } else {
         const x2 = (pointer.x - stage.x()) / scale;
         const y2 = (pointer.y - stage.y()) / scale;
-        const { x1, y1 } = quickWallCoordinates;
+        const {x1, y1} = quickWallCoordinates;
 
         let element = shapeFactory("wall") as Wall;
-        element = { ...element, x1, y1, x2, y2 } as Wall;
+        element = {...element, x1, y1, x2, y2} as Wall;
 
         dispatch(addElement(element));
 
-        setQuickWallCoordinates({ x1: x2, y1: y2 });
+        setQuickWallCoordinates({x1: x2, y1: y2});
       }
     }
   };
 
-  const handleMouseMove = (e: { evt: MouseEvent; target: Konva.Stage }) => {
-    const container = stageRef!.current!.container();
-    if (isShiftPressed) {
-      container.style.cursor = "default";
-    } else {
-      container.style.cursor = "grab";
-    }
+    const handleMouseMove = (e: { evt: MouseEvent, target: Konva.Stage }) => {
 
-    if (!isSelecting.current) {
-      return;
-    }
+        const container = stageRef!.current!.container();
+        if (isShiftPressed || state.buildMode === 1) {
+            container.style.cursor = 'default';
+        } else {
+            container.style.cursor = 'grab';
+        }
 
-    const stage = e.target.getStage();
-    const pos = e.target.getStage().getPointerPosition()!;
-    setSelectionRectangle({
-      ...selectionRectangle,
-      x2: (pos.x - stage.x()) / scale,
-      y2: (pos.y - stage.y()) / scale,
-    });
-  };
+      if (!isSelecting.current) {
+        return;
+      }
+
+      const stage = e.target.getStage();
+      const pos = e.target.getStage().getPointerPosition()!;
+      setSelectionRectangle({
+        ...selectionRectangle,
+        x2: (pos.x - stage.x()) / scale,
+        y2: (pos.y - stage.y()) / scale,
+      });
+    };
 
   const handleMouseUp = () => {
     // Do nothing if we didn't start selection
@@ -428,108 +429,108 @@ function KonvaCanvas() {
     const selected = state.elements.filter(rect => {
       // we are checking if rectangle intersects with selection box
       return Konva.Util.haveIntersection(
-        selBox,
-        rectRefs.current.get(rect.id).getClientRect({ relativeTo: stageRef.current })
+          selBox,
+          rectRefs.current.get(rect.id).getClientRect({relativeTo: stageRef.current})
       );
     });
 
     setSelectedIds(selected.map(rect => rect.id));
   };
 
-  return (
-    <div className="space-y-6">
-      <div
-        className="App"
-        style={{ display: "flex", border: "1px solid #e0e0e0", flexDirection: "row" }}
-      >
-        <Toolbox dispatch={dispatch} stageRef={stageRef} state={state} />
-
-        {/* main Canvas */}
-        <Stage
-          scaleX={scale}
-          scaleY={scale}
-          onWheel={handleWheel}
-          draggable={!isSelecting.current}
-          ref={stageRef}
-          width={window.innerWidth - 150}
-          height={window.innerHeight}
-          onMouseDown={handleMouseDown}
-          onMousemove={handleMouseMove}
-          onMouseup={handleMouseUp}
-        >
-          <Layer>
-            {/* this is where we display elements */}
-            {state.elements?.map(el => {
-              return (
-                <Group
-                  key={el.id}
-                  id={el.id}
-                  x={el.x}
-                  y={el.y}
-                  draggable={el.draggable}
-                  rotation={el.rotation}
-                  onDblClick={e => handleDoubleClickOnElement(e, el)}
-                  onDragMove={e => handleDragMove(e, el)}
-                  onDragEnd={e => handleDragEnd(e, el)}
-                  ref={node => {
-                    if (node) {
-                      rectRefs.current.set(el.id, node);
-                    }
-                  }}
-                >
-                  {renderElement(el, true)}
-                </Group>
-              );
-            })}
-
-            {/* transformer for all selected shapes. this is what we use to scale up or shrink the shapes */}
-            <Transformer
-              ref={transformerRef}
-              boundBoxFunc={(_oldBox, newBox) => {
-                return newBox;
-              }}
-              onTransformEnd={handleTransformEnd}
-            />
-
-            {/* Selection rectangle */}
-            {selectionRectangle.visible && (
-              <Group>
-                <Rect
-                  x={Math.min(selectionRectangle.x1, selectionRectangle.x2)}
-                  y={Math.min(selectionRectangle.y1, selectionRectangle.y2)}
-                  width={Math.abs(selectionRectangle.x2 - selectionRectangle.x1)}
-                  height={Math.abs(selectionRectangle.y2 - selectionRectangle.y1)}
-                  fill="rgba(0,0,255,0.5)"
-                />
-                <Text
-                  text={`start: ${selectionRectangle.x1.toFixed(2)}:${selectionRectangle.y1.toFixed(2)}\nend: ${selectionRectangle.x2.toFixed(2)}:${selectionRectangle.y2.toFixed(2)}`}
-                  x={Math.min(selectionRectangle.x1, selectionRectangle.x2)}
-                  y={Math.min(selectionRectangle.y1, selectionRectangle.y2)}
-                  width={Math.abs(selectionRectangle.x2 - selectionRectangle.x1)}
-                  height={Math.abs(selectionRectangle.y2 - selectionRectangle.y1)}
-                  fill="white"
-                  fontSize={12}
-                  align="center"
-                  verticalAlign="middle"
-                />
-              </Group>
-            )}
-          </Layer>
-        </Stage>
-
-        {/*<StagePreview state={state} mainStage={stageRef.current!}></StagePreview>*/}
-
-        {selectedIds.length === 1 && (
-          <ElementInspector
-            dispatch={dispatch}
-            state={state}
-            selectedIds={selectedIds}
-            setSelectedIds={setSelectedIds}
-          ></ElementInspector>
-        )}
-      </div>
-    </div>
-  );
+    return (
+
+        <div className="space-y-6">
+            <div className="App overflow-hidden bg-white"
+                 style={{display: "flex", border: "1px solid #e0e0e0", flexDirection: "row"}}>
+
+                <Toolbox dispatch={dispatch} stageRef={stageRef} state={state}/>
+
+              {/* main Canvas */}
+              <Stage
+                  scaleX={scale}
+                  scaleY={scale}
+                  onWheel={handleWheel}
+                  draggable={!isSelecting.current}
+                  ref={stageRef}
+                  width={window.innerWidth - 150}
+                  height={window.innerHeight}
+                  onMouseDown={handleMouseDown}
+                  onMousemove={handleMouseMove}
+                  onMouseup={handleMouseUp}
+              >
+                <Layer>
+                  {/* this is where we display elements */}
+                  {state.elements?.map(el => {
+                    return (
+                        <Group
+                            key={el.id}
+                            id={el.id}
+                            x={el.x}
+                            y={el.y}
+                            draggable={el.draggable}
+                            rotation={el.rotation}
+                            onDblClick={e => handleDoubleClickOnElement(e, el)}
+                            onDragMove={e => handleDragMove(e, el)}
+                            onDragEnd={e => handleDragEnd(e, el)}
+                            ref={node => {
+                              if (node) {
+                                rectRefs.current.set(el.id, node);
+                              }
+                            }}
+                        >
+                          {renderElement(el, true)}
+                        </Group>
+                    );
+                  })}
+
+                  {/* transformer for all selected shapes. this is what we use to scale up or shrink the shapes */}
+                  <Transformer
+                      ref={transformerRef}
+                      boundBoxFunc={(_oldBox, newBox) => {
+                        return newBox;
+                      }}
+                      onTransformEnd={handleTransformEnd}
+                  />
+
+                  {/* Selection rectangle */}
+                  {selectionRectangle.visible && (
+                      <Group>
+                        <Rect
+                            x={Math.min(selectionRectangle.x1, selectionRectangle.x2)}
+                            y={Math.min(selectionRectangle.y1, selectionRectangle.y2)}
+                            width={Math.abs(selectionRectangle.x2 - selectionRectangle.x1)}
+                            height={Math.abs(selectionRectangle.y2 - selectionRectangle.y1)}
+                            fill="rgba(0,0,255,0.5)"
+                        />
+                        <Text
+                            text={`start: ${selectionRectangle.x1.toFixed(2)}:${selectionRectangle.y1.toFixed(2)}\nend: ${selectionRectangle.x2.toFixed(2)}:${selectionRectangle.y2.toFixed(2)}`}
+                            x={Math.min(selectionRectangle.x1, selectionRectangle.x2)}
+                            y={Math.min(selectionRectangle.y1, selectionRectangle.y2)}
+                            width={Math.abs(selectionRectangle.x2 - selectionRectangle.x1)}
+                            height={Math.abs(selectionRectangle.y2 - selectionRectangle.y1)}
+                            fill="white"
+                            fontSize={12}
+                            align="center"
+                            verticalAlign="middle"
+                        />
+                      </Group>
+                  )}
+                </Layer>
+              </Stage>
+
+              {/*<StagePreview state={state} mainStage={stageRef.current!}></StagePreview>*/}
+
+              {selectedIds.length === 1 && (
+                  <ElementInspector
+                      dispatch={dispatch}
+                      state={state}
+                      selectedIds={selectedIds}
+                      setSelectedIds={setSelectedIds}
+                  ></ElementInspector>
+              )}
+            </div>
+        </div>
+    );
 }
 
 export default KonvaCanvas;
diff --git a/frontend/src/components/canvas/actions/actions.tsx b/frontend/src/components/canvas/actions/actions.tsx
index 4932228..3e7e47c 100644
--- a/frontend/src/components/canvas/actions/actions.tsx
+++ b/frontend/src/components/canvas/actions/actions.tsx
@@ -1,9 +1,9 @@
-import type { Dispatch, SetStateAction } from "react";
-import type { AppState } from "components/canvas/reducers/CanvasReducer.tsx";
-import { Chair } from "../elements/Chair.tsx";
-import { Wall } from "../elements/Wall.tsx";
-import { Room } from "../elements/Room.tsx";
-import type { Table } from "../elements/Table.tsx";
+import type {Dispatch, SetStateAction} from "react";
+import type {AppState} from "components/canvas/reducers/CanvasReducer.tsx";
+import {Chair} from "../elements/Chair.tsx";
+import {Wall} from "../elements/Wall.tsx";
+import {Room} from "../elements/Room.tsx";
+import type {Table} from "../elements/Table.tsx";
 
 export interface Action {
   type: string;
@@ -60,15 +60,15 @@ export const updateElementSpecificField = (payload: {
 });
 
 export const updateMultipleElements = (
-  payload: ({ id: string; x: number; y: number } | null)[]
+    payload: ({ id: string; x: number; y: number } | null)[]
 ): Action => ({
   type: UPDATE_MULTIPLE_ELEMENTS,
   payload,
 });
 
 export const duplicateMultipleElements = (
-  payload: string[],
-  setSelectedIds: Dispatch<SetStateAction<string[]>>
+    payload: string[],
+    setSelectedIds: Dispatch<SetStateAction<string[]>>
 ): Action => ({
   type: DUPLICATE_MULTIPLE_ELEMENTS,
   payload,
diff --git a/frontend/src/components/canvas/contexts/CanvasContext.tsx b/frontend/src/components/canvas/contexts/CanvasContext.tsx
index 3d8e660..9fb5f0c 100644
--- a/frontend/src/components/canvas/contexts/CanvasContext.tsx
+++ b/frontend/src/components/canvas/contexts/CanvasContext.tsx
@@ -1,12 +1,8 @@
 /* eslint-disable */
 // @ts-nocheck
 
-import { createContext, useContext, useReducer, useEffect } from "react";
-import {
-  type AppState,
-  initialState as InitialStateClass,
-  reducer,
-} from "../reducers/CanvasReducer";
+import {createContext, useContext, useEffect, useReducer} from "react";
+import {type AppState, initialState as InitialStateClass, reducer,} from "../reducers/CanvasReducer";
 
 const CanvasContext = createContext(null);
 export const useCanvas: () => {
@@ -15,23 +11,23 @@ export const useCanvas: () => {
 } = () => useContext(CanvasContext);
 
 // Modified CanvasProvider to accept initialState prop and sync on change
-export const CanvasProvider = ({ children, initialState }) => {
+export const CanvasProvider = ({children, initialState}) => {
   // If initialState is provided, use it; otherwise use default
   const [state, dispatch] = useReducer(
-    reducer,
-    initialState ? initialState : new InitialStateClass()
+      reducer,
+      initialState ? initialState : new InitialStateClass()
   );
 
   // Sync context state if initialState prop changes (for seat allocation page)
   useEffect(() => {
     if (initialState) {
-      dispatch({ type: "SET_STATE", payload: initialState });
+      dispatch({type: "SET_STATE", payload: initialState});
     }
     // eslint-disable-next-line
   }, [JSON.stringify(initialState)]);
 
   return (
-    // @ts-ignore
-    <CanvasContext.Provider value={{ state, dispatch }}>{children}</CanvasContext.Provider>
+      // @ts-ignore
+      <CanvasContext.Provider value={{state, dispatch}}>{children}</CanvasContext.Provider>
   );
 };
diff --git a/frontend/src/components/canvas/elements/Chair.tsx b/frontend/src/components/canvas/elements/Chair.tsx
index 3bf26d7..13a2814 100644
--- a/frontend/src/components/canvas/elements/Chair.tsx
+++ b/frontend/src/components/canvas/elements/Chair.tsx
@@ -1,6 +1,6 @@
-import { v4 as uuidv4 } from "uuid";
-import { Circle } from "react-konva";
-import type { ElementProperties } from "components/canvas/utils/constants.tsx";
+import {v4 as uuidv4} from "uuid";
+import {Circle} from "react-konva";
+import type {ElementProperties} from "components/canvas/utils/constants.tsx";
 
 export class Chair implements ElementProperties {
   id: string;
@@ -22,10 +22,10 @@ export class Chair implements ElementProperties {
     this.radius = 10;
     this.attachedTo = undefined;
     this.draggable = true;
-    this.offset = { dx: 0, dy: 0 };
+    this.offset = {dx: 0, dy: 0};
   }
 }
 
 export function ChairRender(chair: Chair) {
-  return <Circle radius={chair.radius || 10} fill={chair.color || "#888"} />;
+  return <Circle radius={chair.radius || 10} fill={chair.color || "#888"}/>;
 }
diff --git a/frontend/src/components/canvas/elements/ElementInspector.tsx b/frontend/src/components/canvas/elements/ElementInspector.tsx
index b0dc8ad..b11c5b8 100644
--- a/frontend/src/components/canvas/elements/ElementInspector.tsx
+++ b/frontend/src/components/canvas/elements/ElementInspector.tsx
@@ -1,107 +1,107 @@
-import type { AppState } from "../reducers/CanvasReducer.tsx";
+import type {AppState} from "../reducers/CanvasReducer.tsx";
 import React from "react";
-import { getEditableParameters } from "../utils/constants.tsx";
-import { updateElementSpecificField } from "../../../components/canvas/actions/actions.tsx";
+import {getEditableParameters} from "../utils/constants.tsx";
+import {updateElementSpecificField} from "../../../components/canvas/actions/actions.tsx";
 import "./ElementInspector.css";
 
 export function ElementInspector({
-  dispatch,
-  state,
-  selectedIds,
-}: {
-  dispatch: (action: { type: string; payload: object }) => void;
-  state: AppState;
-  selectedIds: string[];
-  setSelectedIds: React.Dispatch<React.SetStateAction<string[]>>;
+                                     dispatch,
+                                     state,
+                                     selectedIds,
+                                 }: {
+    dispatch: (action: { type: string; payload: object }) => void;
+    state: AppState;
+    selectedIds: string[];
+    setSelectedIds: React.Dispatch<React.SetStateAction<string[]>>;
 }) {
-  return (
-    <div
-      style={{
-        position: "fixed",
-        bottom: "10%",
-        right: 20,
-        width: "300px",
-        height: "350px",
-        overflowY: "auto",
-        backgroundColor: "white",
-        border: "1px solid #ccc",
-        borderRadius: "8px",
-        padding: "12px",
-        zIndex: 1000,
-        boxShadow: "0px 0px 10px rgba(0,0,0,0.1)",
-      }}
-    >
-      <h4 style={{ marginTop: 0 }}>Edit Element</h4>
+    return (
+        <div
+            style={{
+                position: "fixed",
+                bottom: "10%",
+                right: 20,
+                width: "300px",
+                height: "350px",
+                overflowY: "auto",
+                backgroundColor: "white",
+                border: "1px solid #ccc",
+                borderRadius: "8px",
+                padding: "12px",
+                zIndex: 1000,
+                boxShadow: "0px 0px 10px rgba(0,0,0,0.1)",
+            }}
+        >
+            <h4 style={{marginTop: 0}}>Edit Element</h4>
 
-      {(() => {
-        const el = state.elements.find(el => el.id === selectedIds[0]);
-        const editableParameters = el ? getEditableParameters(el) : {};
+            {(() => {
+                const el = state.elements.find(el => el.id === selectedIds[0]);
+                const editableParameters = el ? getEditableParameters(el) : {};
 
-        return (
-          <div className="panelStyle">
-            <h4 style={{ marginTop: 0 }}>Edit Element</h4>
-            {el ? (
-              Object.entries(el)
-                .filter(([key]) => Object.prototype.hasOwnProperty.call(editableParameters, key))
-                .map(([key, value]) => {
-                  const paramType = editableParameters[key];
+                return (
+                    <div className="panelStyle">
+                        <h4 style={{marginTop: 0}}>Edit Element</h4>
+                        {el ? (
+                            Object.entries(el)
+                                .filter(([key]) => Object.prototype.hasOwnProperty.call(editableParameters, key))
+                                .map(([key, value]) => {
+                                    const paramType = editableParameters[key];
 
-                  if (Array.isArray(paramType)) {
-                    return (
-                      <div key={key} className="fieldStyle">
-                        <label className="labelStyle">{key}:</label>
-                        <select
-                          className="selectStyle"
-                          value={value as string}
-                          onChange={e =>
-                            dispatch(
-                              updateElementSpecificField({
-                                id: selectedIds[0],
-                                key,
-                                value: e.target.value,
-                              })
-                            )
-                          }
-                        >
-                          {paramType.map((option: string) => (
-                            <option key={option} value={option}>
-                              {option}
-                            </option>
-                          ))}
-                        </select>
-                      </div>
-                    );
-                  }
+                                    if (Array.isArray(paramType)) {
+                                        return (
+                                            <div key={key} className="fieldStyle">
+                                                <label className="labelStyle">{key}:</label>
+                                                <select
+                                                    className="selectStyle"
+                                                    value={value as string}
+                                                    onChange={e =>
+                                                        dispatch(
+                                                            updateElementSpecificField({
+                                                                id: selectedIds[0],
+                                                                key,
+                                                                value: e.target.value,
+                                                            })
+                                                        )
+                                                    }
+                                                >
+                                                    {paramType.map((option: string) => (
+                                                        <option key={option} value={option}>
+                                                            {option}
+                                                        </option>
+                                                    ))}
+                                                </select>
+                                            </div>
+                                        );
+                                    }
 
-                  return (
-                    <div key={key} className="fieldStyle">
-                      <label className="labelStyle">{key}:</label>
-                      <input
-                        className="inputStyle"
-                        type={paramType}
-                        value={value}
-                        onChange={e =>
-                          dispatch(
-                            updateElementSpecificField({
-                              id: selectedIds[0],
-                              key,
-                              value:
-                                paramType === "number"
-                                  ? parseFloat(e.target.value)
-                                  : e.target.value,
-                            })
-                          )
-                        }
-                      />
+                                    return (
+                                        <div key={key} className="fieldStyle">
+                                            <label className="labelStyle">{key}:</label>
+                                            <input
+                                                className="inputStyle"
+                                                type={paramType}
+                                                value={value}
+                                                onChange={e =>
+                                                    dispatch(
+                                                        updateElementSpecificField({
+                                                            id: selectedIds[0],
+                                                            key,
+                                                            value:
+                                                                paramType === "number"
+                                                                    ? parseFloat(e.target.value)
+                                                                    : e.target.value,
+                                                        })
+                                                    )
+                                                }
+                                            />
+                                        </div>
+                                    );
+                                })
+                        ) : (
+                            <div/>
+                        )}
                     </div>
-                  );
-                })
-            ) : (
-              <div />
-            )}
-          </div>
-        );
-      })()}
-    </div>
-  );
+                );
+            })()}
+        </div>
+    );
 }
diff --git a/frontend/src/components/canvas/elements/Room.tsx b/frontend/src/components/canvas/elements/Room.tsx
index bdc47d1..5648f93 100644
--- a/frontend/src/components/canvas/elements/Room.tsx
+++ b/frontend/src/components/canvas/elements/Room.tsx
@@ -1,6 +1,6 @@
-import { Rect } from "react-konva";
-import { v4 as uuidv4 } from "uuid";
-import type { ElementProperties } from "components/canvas/utils/constants.tsx";
+import {Rect} from "react-konva";
+import {v4 as uuidv4} from "uuid";
+import type {ElementProperties} from "components/canvas/utils/constants.tsx";
 
 export class Room implements ElementProperties {
   id: string;
@@ -32,13 +32,13 @@ export class Room implements ElementProperties {
 
 export function RoomRender(room: Room) {
   return (
-    <Rect
-      width={room.width}
-      height={room.height}
-      fill={room.color || "#EEE"}
-      stroke={room.stroke || "#333"}
-      strokeWidth={2}
-      cornerRadius={0}
-    />
+      <Rect
+          width={room.width}
+          height={room.height}
+          fill={room.color || "#EEE"}
+          stroke={room.stroke || "#333"}
+          strokeWidth={2}
+          cornerRadius={0}
+      />
   );
 }
diff --git a/frontend/src/components/canvas/elements/StagePreview.tsx b/frontend/src/components/canvas/elements/StagePreview.tsx
index 1069ed9..11cb39f 100644
--- a/frontend/src/components/canvas/elements/StagePreview.tsx
+++ b/frontend/src/components/canvas/elements/StagePreview.tsx
@@ -1,70 +1,70 @@
-import { Group, Layer, Stage } from "react-konva";
-import { renderElement } from "../utils/constants";
-import { useState } from "react";
-import type { AppState } from "../reducers/CanvasReducer.tsx";
+import {Group, Layer, Stage} from "react-konva";
+import {renderElement} from "../utils/constants";
+import {useState} from "react";
+import type {AppState} from "../reducers/CanvasReducer.tsx";
 import Konva from "konva";
 
-function StagePreview({ state, mainStage }: { state: AppState; mainStage: Konva.Stage }) {
-  const [isVisible, setIsVisible] = useState(false);
+function StagePreview({state, mainStage}: { state: AppState; mainStage: Konva.Stage }) {
+    const [isVisible, setIsVisible] = useState(false);
 
-  const togglePreview = () => {
-    setIsVisible(prev => !prev);
-  };
+    const togglePreview = () => {
+        setIsVisible(prev => !prev);
+    };
 
-  return (
-    <div
-      style={{
-        position: "absolute",
-        top: "7%",
-        right: isVisible ? "15px" : "90px",
-        border: isVisible ? "1px solid grey" : "none",
-        backgroundColor: isVisible ? "lightgrey" : "transparent",
-        zIndex: 999,
-      }}
-    >
-      <div
-        style={{
-          position: "absolute",
-          top: "0",
-          left: "0",
-          zIndex: 1000,
-        }}
-      >
-        <button
-          onClick={togglePreview}
-          style={{
-            width: "70px",
-            height: "40px",
-            backgroundColor: "#ccc",
-            border: "1px solid #999",
-            cursor: "pointer",
-            fontSize: "12px",
-          }}
+    return (
+        <div
+            style={{
+                position: "absolute",
+                top: "7%",
+                right: isVisible ? "15px" : "90px",
+                border: isVisible ? "1px solid grey" : "none",
+                backgroundColor: isVisible ? "lightgrey" : "transparent",
+                zIndex: 999,
+            }}
         >
-          {isVisible ? "Hide Preview" : "Show Preview"}
-        </button>
-      </div>
+            <div
+                style={{
+                    position: "absolute",
+                    top: "0",
+                    left: "0",
+                    zIndex: 1000,
+                }}
+            >
+                <button
+                    onClick={togglePreview}
+                    style={{
+                        width: "70px",
+                        height: "40px",
+                        backgroundColor: "#ccc",
+                        border: "1px solid #999",
+                        cursor: "pointer",
+                        fontSize: "12px",
+                    }}
+                >
+                    {isVisible ? "Hide Preview" : "Show Preview"}
+                </button>
+            </div>
 
-      {isVisible && (
-        <Stage
-          width={(window.innerWidth - 150) / 4}
-          height={window.innerHeight / 4}
-          scaleX={mainStage === null ? 0.25 : mainStage.scaleX() * 0.0625}
-          scaleY={mainStage === null ? 0.25 : mainStage.scaleY() * 0.0625}
-          x={mainStage === null ? 0 : mainStage.x()}
-          y={mainStage === null ? 0 : mainStage.y()}
-        >
-          <Layer>
-            {state.elements.map(el => (
-              <Group key={el.id} id={el.id} x={el.x ?? 0} y={el.y ?? 0}>
-                {renderElement(el, false)}
-              </Group>
-            ))}
-          </Layer>
-        </Stage>
-      )}
-    </div>
-  );
+            {isVisible && (
+                <Stage
+                    width={(window.innerWidth - 150) / 4}
+                    height={window.innerHeight / 4}
+                    scaleX={mainStage === null ? 0.25 : mainStage.scaleX() * 0.0625}
+                    scaleY={mainStage === null ? 0.25 : mainStage.scaleY() * 0.0625}
+                    x={mainStage === null ? 0 : mainStage.x()}
+                    y={mainStage === null ? 0 : mainStage.y()}
+                >
+                    <Layer>
+                        {state.elements.map(el => (
+                            <Group key={el.id} id={el.id} x={el.x ?? 0} y={el.y ?? 0}>
+                                {renderElement(el, false)}
+                            </Group>
+                        ))}
+                    </Layer>
+                </Stage>
+            )}
+        </div>
+    );
 }
 
 export default StagePreview;
diff --git a/frontend/src/components/canvas/elements/Table.tsx b/frontend/src/components/canvas/elements/Table.tsx
index d442c20..efea060 100644
--- a/frontend/src/components/canvas/elements/Table.tsx
+++ b/frontend/src/components/canvas/elements/Table.tsx
@@ -1,101 +1,101 @@
-import { Circle, Group, Rect, Text } from "react-konva";
-import { v4 as uuidv4 } from "uuid";
-import type { ElementProperties } from "components/canvas/utils/constants.tsx";
+import {Circle, Group, Rect, Text} from "react-konva";
+import {v4 as uuidv4} from "uuid";
+import type {ElementProperties} from "components/canvas/utils/constants.tsx";
 
 export const TABLE_TYPES = {
-  RECT: {
-    id: "",
-    name: "",
-    x: 0,
-    y: 0,
-    radius: undefined,
-    stroke: "",
-    attachedChairs: [],
-    rotation: 0,
-    type: "rectTable",
-    label: "Rect Table",
-    color: "#8B4513",
-    width: 80,
-    height: 50,
-  },
-  CIRCLE: {
-    id: "",
-    name: "",
-    x: 0,
-    y: 0,
-    width: undefined,
-    height: undefined,
-    stroke: "",
-    attachedChairs: [],
-    rotation: 0,
-    type: "circleTable",
-    label: "Circle Table",
-    color: "#A0522D",
-    radius: 40,
-  },
+    RECT: {
+        id: "",
+        name: "",
+        x: 0,
+        y: 0,
+        radius: undefined,
+        stroke: "",
+        attachedChairs: [],
+        rotation: 0,
+        type: "rectTable",
+        label: "Rect Table",
+        color: "#8B4513",
+        width: 80,
+        height: 50,
+    },
+    CIRCLE: {
+        id: "",
+        name: "",
+        x: 0,
+        y: 0,
+        width: undefined,
+        height: undefined,
+        stroke: "",
+        attachedChairs: [],
+        rotation: 0,
+        type: "circleTable",
+        label: "Circle Table",
+        color: "#A0522D",
+        radius: 40,
+    },
 };
 
 export class Table implements ElementProperties {
-  id: string;
-  name: string;
-  type: string;
-  x: number;
-  y: number;
-  radius: number | undefined;
-  width: number | undefined;
-  height: number | undefined;
-  rotation: number;
-  stroke: string;
-  color: string;
-  draggable: boolean;
-  attachedChairs: string[];
+    id: string;
+    name: string;
+    type: string;
+    x: number;
+    y: number;
+    radius: number | undefined;
+    width: number | undefined;
+    height: number | undefined;
+    rotation: number;
+    stroke: string;
+    color: string;
+    draggable: boolean;
+    attachedChairs: string[];
 
-  constructor(tableType: ElementProperties) {
-    this.id = uuidv4();
-    this.type = tableType.type;
-    this.name = "Table";
-    this.x = 200;
-    this.y = 100;
+    constructor(tableType: ElementProperties) {
+        this.id = uuidv4();
+        this.type = tableType.type;
+        this.name = "Table";
+        this.x = 200;
+        this.y = 100;
 
-    this.width = tableType.width || undefined;
-    this.height = tableType.height || undefined;
-    this.radius = tableType.radius || undefined;
+        this.width = tableType.width || undefined;
+        this.height = tableType.height || undefined;
+        this.radius = tableType.radius || undefined;
 
-    this.color = tableType.color || "#a57272";
-    this.stroke = "#333";
-    this.draggable = true;
-    this.attachedChairs = [];
-    this.rotation = 0;
-  }
+        this.color = tableType.color || "#a57272";
+        this.stroke = "#333";
+        this.draggable = true;
+        this.attachedChairs = [];
+        this.rotation = 0;
+    }
 }
 
 export function TableRender(table: Table, areTextsEnabled: boolean) {
-  return table.type === "circleTable" ? (
-    <Group>
-      <Circle radius={table.radius} fill={table.color || "#8B4513"} />
-      {areTextsEnabled && (
-        <Text
-          text={`name: ${table.name}\nr: ${table.radius?.toFixed(2)}\nChairs: ${table.attachedChairs.length}`}
-          fill="white"
-          fontSize={12}
-          x={-(table.radius ?? 0) / 2}
-          y={-(table.radius ?? 0) / 2}
-        />
-      )}
-    </Group>
-  ) : (
-    <Group>
-      <Rect width={table.width} height={table.height} fill={table.color || "#8B4513"} />
-      {areTextsEnabled && (
-        <Text
-          text={`name: ${table.name}\nw: ${table.width?.toFixed(2)}\nh: ${table.height?.toFixed(2)}\nChairs: ${table.attachedChairs.length}`}
-          fill="white"
-          fontSize={12}
-          align="center"
-          width={table.width}
-          padding={4}
-        />
-      )}
-    </Group>
-  );
+    return table.type === "circleTable" ? (
+        <Group>
+            <Circle radius={table.radius} fill={table.color || "#8B4513"}/>
+            {areTextsEnabled && (
+                <Text
+                    text={`name: ${table.name}\nr: ${table.radius?.toFixed(2)}\nChairs: ${table.attachedChairs.length}`}
+                    fill="white"
+                    fontSize={12}
+                    x={-(table.radius ?? 0) / 2}
+                    y={-(table.radius ?? 0) / 2}
+                />
+            )}
+        </Group>
+    ) : (
+        <Group>
+            <Rect width={table.width} height={table.height} fill={table.color || "#8B4513"}/>
+            {areTextsEnabled && (
+                <Text
+                    text={`name: ${table.name}\nw: ${table.width?.toFixed(2)}\nh: ${table.height?.toFixed(2)}\nChairs: ${table.attachedChairs.length}`}
+                    fill="white"
+                    fontSize={12}
+                    align="center"
+                    width={table.width}
+                    padding={4}
+                />
+            )}
+        </Group>
+    );
 }
diff --git a/frontend/src/components/canvas/elements/Toolbox.tsx b/frontend/src/components/canvas/elements/Toolbox.tsx
index eaa1dbe..425c7d5 100644
--- a/frontend/src/components/canvas/elements/Toolbox.tsx
+++ b/frontend/src/components/canvas/elements/Toolbox.tsx
@@ -1,189 +1,215 @@
-import { Group, Layer, Rect, Stage, Text } from "react-konva";
-import { shapeFactory, TOOLBOX_ITEMS, TOOLBOX_X, TOOLBOX_Y } from "../utils/constants";
-import type { Chair } from "./Chair";
-import type { Room } from "./Room";
-import type { Wall } from "./Wall";
-import type { AppState } from "../reducers/CanvasReducer.tsx";
-import type { Table } from "./Table.tsx";
+import {Group, Layer, Rect, Stage, Text} from "react-konva";
+import {shapeFactory, TOOLBOX_ITEMS, TOOLBOX_X, TOOLBOX_Y} from "../utils/constants";
+import type {Chair} from "./Chair";
+import type {Room} from "./Room";
+import type {Wall} from "./Wall";
+import type {AppState} from "../reducers/CanvasReducer.tsx";
+import type {Table} from "./Table.tsx";
 import Konva from "konva";
 import React from "react";
 import useApiService from "../../../services/apiService.ts";
-import { useParams } from "react-router-dom";
-import { addElement, changeBuildMode } from "../actions/actions.tsx";
+import {useParams} from "react-router-dom";
+import {addElement, changeBuildMode} from "../actions/actions.tsx";
 
 function downloadURI(uri: string, name: string) {
-  const link = document.createElement("a");
-  link.download = name;
-  link.href = uri;
-  document.body.appendChild(link);
-  link.click();
-  document.body.removeChild(link);
+    const link = document.createElement("a");
+    link.download = name;
+    link.href = uri;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
 }
 
-const handleExport = (stageRef: React.RefObject<Konva.Stage | null>) => {
-  if (!stageRef.current) return;
-
-  const stage = stageRef.current;
-  const layers = stage.getLayers();
-
-  // Check if there are any layers with content
-  if (layers.length === 0) {
-    console.warn("No layers found");
-    return;
-  }
-
-  // Get valid layer rectangles
-  const layerRects = layers
-    .map(layer => layer.getClientRect({ skipTransform: false }))
-    .filter(rect => rect.width > 0 && rect.height > 0);
-
-  if (layerRects.length === 0) {
-    console.warn("No visible content found");
-    return;
-  }
-
-  // Calculate bounding box
-  const minX = Math.min(...layerRects.map(rect => rect.x));
-  const minY = Math.min(...layerRects.map(rect => rect.y));
-  const maxX = Math.max(...layerRects.map(rect => rect.x + rect.width));
-  const maxY = Math.max(...layerRects.map(rect => rect.y + rect.height));
-
-  const contentRect = {
-    x: minX,
-    y: minY,
-    width: maxX - minX,
-    height: maxY - minY,
-  };
-
-  const padding = 50;
-  const exportRect = {
-    x: contentRect.x - padding,
-    y: contentRect.y - padding,
-    width: contentRect.width + padding * 2,
-    height: contentRect.height + padding * 2,
-  };
-
-  try {
-    const uri = stage.toDataURL({
-      x: exportRect.x,
-      y: exportRect.y,
-      width: exportRect.width,
-      height: exportRect.height,
-      pixelRatio: 2,
+export const handleExport = (stageRef: React.RefObject<Konva.Stage | null>) => {
+
+    if (!stageRef.current) return;
+
+    const stage = stageRef.current;
+    const layers = stage.getLayers();
+
+    // Check if there are any layers with content
+    if (layers.length === 0) {
+        console.warn("No layers found");
+        return;
+    }
+
+    // Get valid layer rectangles
+    const layerRects = layers
+        .map(layer => layer.getClientRect({skipTransform: false}))
+        .filter(rect => rect.width > 0 && rect.height > 0);
+
+    if (layerRects.length === 0) {
+        console.warn("No visible content found");
+        return;
+    }
+
+    // Calculate bounding box
+    const minX = Math.min(...layerRects.map(rect => rect.x));
+    const minY = Math.min(...layerRects.map(rect => rect.y));
+    const maxX = Math.max(...layerRects.map(rect => rect.x + rect.width));
+    const maxY = Math.max(...layerRects.map(rect => rect.y + rect.height));
+
+    const contentRect = {
+        x: minX,
+        y: minY,
+        width: maxX - minX,
+        height: maxY - minY,
+    };
+
+    const padding = 50;
+    const exportRect = {
+        x: contentRect.x - padding,
+        y: contentRect.y - padding,
+        width: contentRect.width + padding * 2,
+        height: contentRect.height + padding * 2,
+    };
+
+    // Get stage position to account for any offset
+    const stagePosition = stage.getPosition();
+    const stageSize = stage.getSize();
+
+    // Create a new layer with white background rectangle
+    const backgroundLayer = new Konva.Layer();
+    const exportRectangle = new Konva.Rect({
+        x: -stagePosition.x,
+        y: -stagePosition.y - (padding * 2),
+        width: stageSize.width / stageRef.current.scaleX(),
+        height: stageSize.height / stageRef.current.scaleY(),
+        fill: 'white',
+        listening: false,
     });
 
-    downloadURI(uri, "stage.png");
-  } catch (error) {
-    console.error("Export failed:", error);
-  }
+    backgroundLayer.add(exportRectangle);
+    stage.add(backgroundLayer);
+    backgroundLayer.moveToBottom(); // Make it the first layer
+
+    try {
+        return stage.toDataURL({
+            x: exportRect.x,
+            y: exportRect.y,
+            width: exportRect.width,
+            height: exportRect.height,
+            pixelRatio: 2,
+            mimeType: 'image/jpeg',
+        });
+
+    } catch (error) {
+        console.error('Export failed:', error);
+    } finally {
+        // Clean up: remove the background layer
+        backgroundLayer.destroy();
+    }
 };
 
 const handleToolboxClick = (
-  type: string,
-  dispatch: (arg0: { type: string; payload: number | Chair | Table | Wall | Room | null }) => void
+    type: string,
+    dispatch: (arg0: { type: string; payload: number | Chair | Table | Wall | Room | null }) => void
 ) => {
-  const toolItem = TOOLBOX_ITEMS.find(item => item.type === type);
-  if (!toolItem) return;
-
-  if (type === "quickWall") {
-    dispatch(changeBuildMode(1));
-  } else {
-    dispatch(addElement(shapeFactory(type)));
-  }
+    const toolItem = TOOLBOX_ITEMS.find(item => item.type === type);
+    if (!toolItem) return;
+
+    if (type === "quickWall") {
+        dispatch(changeBuildMode(1));
+    } else {
+        dispatch(addElement(shapeFactory(type)));
+    }
 };
 
 function Toolbox({
-  dispatch,
-  stageRef,
-  state,
-}: {
-  dispatch: (action: { type: string; payload: any }) => void;
-  stageRef: React.RefObject<Konva.Stage | null>;
-  state: AppState;
+                     dispatch,
+                     stageRef,
+                     state,
+                 }: {
+    dispatch: (action: { type: string; payload: any }) => void;
+    stageRef: React.RefObject<Konva.Stage | null>;
+    state: AppState;
 }) {
-  const { updateSchematics } = useApiService();
-  const { schematicsId } = useParams();
-
-  return (
-    <Stage scaleX={1} scaleY={1} width={150} height={window.innerHeight}>
-      <Layer>
-        <Group x={TOOLBOX_X} y={TOOLBOX_Y}>
-          <Rect
-            width={100}
-            height={TOOLBOX_ITEMS.length * 65}
-            fill="#f0f0f0"
-            stroke="#aaa"
-            strokeWidth={1}
-            cornerRadius={8}
-            shadowColor="black"
-            shadowBlur={5}
-            shadowOffset={{ x: 2, y: 2 }}
-            shadowOpacity={0.3}
-          />
-          <Text
-            text={state.buildMode === 0 ? "Toolbox" : "Quick Wall"}
-            x={10}
-            y={10}
-            fontSize={16}
-            fontStyle="bold"
-            fill="black"
-          />
-
-          {TOOLBOX_ITEMS.map((item, i) => (
-            <Group
-              key={item.type}
-              x={10}
-              y={i * 60 + 40}
-              onClick={() => handleToolboxClick(item.type, dispatch)}
-              cursor="pointer"
-            >
-              <Rect width={80} height={40} fill="#ddd" stroke="#999" cornerRadius={6} />
-              <Text text={item.label} fontSize={12} x={10} y={13} fill="black" />
-            </Group>
-          ))}
-
-          <Group y={400} onClick={() => handleExport(stageRef)}>
-            <Rect
-              width={80}
-              height={50}
-              fill="#f66"
-              cornerRadius={8}
-              x={10}
-              stroke="#900"
-              strokeWidth={1}
-            />
-            <Text text="Export PDF" x={25} y={15} fill="white" fontSize={10} fontStyle="bold" />
-          </Group>
-
-          <Group
-            y={460}
-            onClick={() =>
-              updateSchematics(
-                schematicsId!,
-                {
-                  ...state,
-                  canvasPosition: stageRef!.current!.getPosition(),
-                  scale: stageRef!.current!.scaleX(),
-                },
-                stageRef
-              )
-            }
-          >
-            <Rect
-              width={80}
-              height={50}
-              fill="#66f"
-              cornerRadius={8}
-              x={10}
-              stroke="#009"
-              strokeWidth={1}
-            />
-            <Text text="Save" x={25} y={15} fill="white" fontSize={10} fontStyle="bold" />
-          </Group>
-        </Group>
-      </Layer>
-    </Stage>
-  );
+    const {updateSchematics} = useApiService();
+    const {schematicsId} = useParams();
+
+    return (
+        <Stage scaleX={1} scaleY={1} width={150} height={window.innerHeight}>
+            <Layer>
+                <Group x={TOOLBOX_X} y={TOOLBOX_Y}>
+                    <Rect
+                        width={100}
+                        height={TOOLBOX_ITEMS.length * 65}
+                        fill="#f0f0f0"
+                        stroke="#aaa"
+                        strokeWidth={1}
+                        cornerRadius={8}
+                        shadowColor="black"
+                        shadowBlur={5}
+                        shadowOffset={{x: 2, y: 2}}
+                        shadowOpacity={0.3}
+                    />
+                    <Text
+                        text={state.buildMode === 0 ? "Toolbox" : "Quick Wall"}
+                        x={10}
+                        y={10}
+                        fontSize={16}
+                        fontStyle="bold"
+                        fill="black"
+                    />
+
+                    {TOOLBOX_ITEMS.map((item, i) => (
+                        <Group
+                            key={item.type}
+                            x={10}
+                            y={i * 60 + 40}
+                            onClick={() => handleToolboxClick(item.type, dispatch)}
+                            cursor="pointer"
+                        >
+                            <Rect width={80} height={40} fill="#ddd" stroke="#999" cornerRadius={6}/>
+                            <Text text={item.label} fontSize={12} x={10} y={13} fill="black"/>
+                        </Group>
+                    ))}
+
+                    <Group y={400} onClick={() => {
+                        const uri = handleExport(stageRef);
+                        downloadURI(uri!, 'stage.jpeg');
+                    }}>
+                        <Rect
+                            width={80}
+                            height={50}
+                            fill="#f66"
+                            cornerRadius={8}
+                            x={10}
+                            stroke="#900"
+                            strokeWidth={1}
+                        />
+                        <Text text="Export" x={25} y={15} fill="white" fontSize={10} fontStyle="bold"/>
+                    </Group>
+
+                    <Group
+                        y={460}
+                        onClick={() =>
+                            updateSchematics(
+                                schematicsId!,
+                                {
+                                    ...state,
+                                    canvasPosition: stageRef!.current!.getPosition(),
+                                    scale: stageRef!.current!.scaleX(),
+                                },
+                                stageRef
+                            )
+                        }
+                    >
+                        <Rect
+                            width={80}
+                            height={50}
+                            fill="#66f"
+                            cornerRadius={8}
+                            x={10}
+                            stroke="#009"
+                            strokeWidth={1}
+                        />
+                        <Text text="Save" x={25} y={15} fill="white" fontSize={10} fontStyle="bold"/>
+                    </Group>
+                </Group>
+            </Layer>
+        </Stage>
+    );
 }
 
 export default Toolbox;
diff --git a/frontend/src/components/canvas/elements/Wall.tsx b/frontend/src/components/canvas/elements/Wall.tsx
index 9df9a13..8b959ef 100644
--- a/frontend/src/components/canvas/elements/Wall.tsx
+++ b/frontend/src/components/canvas/elements/Wall.tsx
@@ -1,36 +1,36 @@
-import { Line } from "react-konva";
-import { v4 as uuidv4 } from "uuid";
-import type { ElementProperties } from "components/canvas/utils/constants.tsx";
+import {Line} from "react-konva";
+import {v4 as uuidv4} from "uuid";
+import type {ElementProperties} from "components/canvas/utils/constants.tsx";
 
 export class Wall implements ElementProperties {
-  id: string;
-  type: string;
-  x1: number;
-  y1: number;
-  x2: number;
-  y2: number;
-  color: string;
-  draggable: boolean;
+    id: string;
+    type: string;
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+    color: string;
+    draggable: boolean;
 
-  constructor() {
-    this.id = uuidv4();
-    this.type = "wall";
-    this.x1 = 200;
-    this.y1 = 100;
-    this.x2 = 350;
-    this.y2 = 100;
-    this.color = "#444";
-    this.draggable = true;
-  }
+    constructor() {
+        this.id = uuidv4();
+        this.type = "wall";
+        this.x1 = 200;
+        this.y1 = 100;
+        this.x2 = 350;
+        this.y2 = 100;
+        this.color = "#444";
+        this.draggable = true;
+    }
 }
 
 export const WallRender = (wall: Wall) => {
-  return (
-    <Line
-      points={[wall.x1, wall.y1, wall.x2, wall.y2]}
-      stroke="green"
-      strokeWidth={2}
-      lineJoin="round"
-    />
-  );
+    return (
+        <Line
+            points={[wall.x1, wall.y1, wall.x2, wall.y2]}
+            stroke="green"
+            strokeWidth={2}
+            lineJoin="round"
+        />
+    );
 };
diff --git a/frontend/src/components/canvas/reducers/CanvasReducer.tsx b/frontend/src/components/canvas/reducers/CanvasReducer.tsx
index 81f16e8..b35eceb 100644
--- a/frontend/src/components/canvas/reducers/CanvasReducer.tsx
+++ b/frontend/src/components/canvas/reducers/CanvasReducer.tsx
@@ -1,7 +1,7 @@
-import { v4 as uuidv4 } from "uuid";
-import type { Chair } from "../elements/Chair.tsx";
-import type { Wall } from "../elements/Wall.tsx";
-import type { ElementProperties } from "components/canvas/utils/constants.tsx";
+import {v4 as uuidv4} from "uuid";
+import type {Chair} from "../elements/Chair.tsx";
+import type {Wall} from "../elements/Wall.tsx";
+import type {ElementProperties} from "components/canvas/utils/constants.tsx";
 import {
   type Action,
   ADD_ELEMENT,
@@ -36,7 +36,7 @@ export class initialState implements AppState {
     this.buildMode = 0;
     this.elements = [];
     this.groups = [];
-    this.canvasPosition = { x: 0, y: 0 };
+    this.canvasPosition = {x: 0, y: 0};
     this.scale = 1;
   }
 }
@@ -47,13 +47,13 @@ export function reducer(state: AppState, action: Action) {
       if (action.payload) {
         // If payload is a string, parse it; if it's already an object, use it directly
         if (typeof action.payload === "string") {
-          return { ...JSON.parse(action.payload) };
+          return {...JSON.parse(action.payload)};
         } else {
-          return { ...action.payload };
+          return {...action.payload};
         }
-      } else return { ...state };
+      } else return {...state};
     case ADD_ELEMENT:
-      return { ...state, elements: [...state.elements, action.payload] };
+      return {...state, elements: [...state.elements, action.payload]};
     case REMOVE_ELEMENT:
       return {
         ...state,
@@ -63,14 +63,14 @@ export function reducer(state: AppState, action: Action) {
       return {
         ...state,
         elements: state.elements.map(el =>
-          el.id === action.payload.id ? { ...el, ...action.payload } : el
+            el.id === action.payload.id ? {...el, ...action.payload} : el
         ),
       };
     case UPDATE_ELEMENT_SPECIFIC_FIELD:
       return {
         ...state,
         elements: state.elements.map(el =>
-          el.id === action.payload.id ? { ...el, [action.payload.key]: action.payload.value } : el
+            el.id === action.payload.id ? {...el, [action.payload.key]: action.payload.value} : el
         ),
       };
     case UPDATE_MULTIPLE_ELEMENTS:
@@ -78,7 +78,7 @@ export function reducer(state: AppState, action: Action) {
         ...state,
         elements: state.elements.map(el => {
           const update = action.payload.find((update: { id: string }) => update.id === el.id);
-          return update ? { ...el, ...update } : el;
+          return update ? {...el, ...update} : el;
         }),
       };
     case DUPLICATE_MULTIPLE_ELEMENTS: {
@@ -91,10 +91,10 @@ export function reducer(state: AppState, action: Action) {
           const newId = uuidv4();
           idMap[original.id] = newId;
           if (
-            original.type === "chair" ||
-            original.type === "room" ||
-            original.type === "rectTable" ||
-            original.type === "circleTable"
+              original.type === "chair" ||
+              original.type === "room" ||
+              original.type === "rectTable" ||
+              original.type === "circleTable"
           ) {
             newElements.push({
               ...original,
@@ -116,7 +116,7 @@ export function reducer(state: AppState, action: Action) {
       }
 
       const updatedElements = newElements.map(element => {
-        const updated: { [key: string]: unknown } = { ...element };
+        const updated: { [key: string]: unknown } = {...element};
 
         // Replace references if they were among the duplicated ones
         for (const key in updated) {
@@ -146,12 +146,12 @@ export function reducer(state: AppState, action: Action) {
       };
     }
     case CREATE_GROUP:
-      return { ...state, groups: [...state.groups, action.payload] };
+      return {...state, groups: [...state.groups, action.payload]};
     case UPDATE_GROUP:
       return {
         ...state,
         groups: state.groups.map(group =>
-          group.id === action.payload.id ? { ...group, ...action.payload } : group
+            group.id === action.payload.id ? {...group, ...action.payload} : group
         ),
       };
     case REMOVE_GROUP:
@@ -160,7 +160,7 @@ export function reducer(state: AppState, action: Action) {
         groups: state.groups.filter(group => group.id !== action.payload),
       };
     case CHANGE_BUILD_MODE:
-      return { ...state, buildMode: action.payload };
+      return {...state, buildMode: action.payload};
     default:
       return state;
   }
diff --git a/frontend/src/components/canvas/utils/constants.tsx b/frontend/src/components/canvas/utils/constants.tsx
index e78a318..2b28a0c 100644
--- a/frontend/src/components/canvas/utils/constants.tsx
+++ b/frontend/src/components/canvas/utils/constants.tsx
@@ -1,126 +1,126 @@
-import { Table, TABLE_TYPES, TableRender } from "../elements/Table.tsx";
-import { Room, RoomRender } from "../elements/Room.tsx";
-import { Wall, WallRender } from "../elements/Wall.tsx";
-import { Chair, ChairRender } from "../elements/Chair.tsx";
+import {Table, TABLE_TYPES, TableRender} from "../elements/Table.tsx";
+import {Room, RoomRender} from "../elements/Room.tsx";
+import {Wall, WallRender} from "../elements/Wall.tsx";
+import {Chair, ChairRender} from "../elements/Chair.tsx";
 
 export interface ElementProperties {
-  id: string;
-  type: string;
-  x?: number;
-  y?: number;
-  x1?: number;
-  y1?: number;
-  x2?: number;
-  y2?: number;
-  radius?: number;
-  color: string;
-  name?: string;
-  width?: number;
-  height?: number;
-  stroke?: string;
-  attachedChairs?: string[];
-  attachedTo?: string;
-  rotation?: number;
-  draggable?: boolean;
-  offset?: { dx?: number; dy?: number };
+    id: string;
+    type: string;
+    x?: number;
+    y?: number;
+    x1?: number;
+    y1?: number;
+    x2?: number;
+    y2?: number;
+    radius?: number;
+    color: string;
+    name?: string;
+    width?: number;
+    height?: number;
+    stroke?: string;
+    attachedChairs?: string[];
+    attachedTo?: string;
+    rotation?: number;
+    draggable?: boolean;
+    offset?: { dx?: number; dy?: number };
 }
 
 export const TOOLBOX_ITEMS = [
-  { type: "chair", label: "Chair" },
-  { type: "rectTable", label: "Rect Table" },
-  { type: "circleTable", label: "Circle Table" },
-  { type: "wall", label: "Wall", name: "" },
-  { type: "quickWall", label: "Quick Wall" },
-  { type: "room", label: "Room" },
+    {type: "chair", label: "Chair"},
+    {type: "rectTable", label: "Rect Table"},
+    {type: "circleTable", label: "Circle Table"},
+    {type: "wall", label: "Wall", name: ""},
+    {type: "quickWall", label: "Quick Wall"},
+    {type: "room", label: "Room"},
 ];
 
 export const TOOLBOX_X = 20;
 export const TOOLBOX_Y = 20;
 
 export const renderElement = (el: ElementProperties, areTextsEnabled: boolean) => {
-  switch (el.type) {
-    case "chair":
-      return ChairRender(el as Chair);
-    case "rectTable":
-    case "circleTable":
-      return TableRender(el as Table, areTextsEnabled);
-    case "wall":
-      return WallRender(el as Wall);
-    case "room":
-      return RoomRender(el as Room);
-    default:
-      return null;
-  }
+    switch (el.type) {
+        case "chair":
+            return ChairRender(el as Chair);
+        case "rectTable":
+        case "circleTable":
+            return TableRender(el as Table, areTextsEnabled);
+        case "wall":
+            return WallRender(el as Wall);
+        case "room":
+            return RoomRender(el as Room);
+        default:
+            return null;
+    }
 };
 
 export const getEditableParameters = (
-  el: ElementProperties
+    el: ElementProperties
 ): { [key: string]: string | string[] } => {
-  switch (el.type) {
-    case "chair":
-      return {
-        x: "number",
-        y: "number",
-        radius: "number",
-        color: "string",
-      };
-    case "rectTable":
-      return {
-        name: "string",
-        type: ["rectTable", "circleTable"],
-        x: "number",
-        y: "number",
-        width: "number",
-        height: "number",
-        rotation: "number",
-        color: "string",
-      };
-    case "circleTable":
-      return {
-        name: "string",
-        type: ["rectTable", "circleTable"],
-        x: "number",
-        y: "number",
-        radius: "number",
-        rotation: "number",
-        color: "string",
-      };
-    case "wall":
-      return {
-        x1: "number",
-        y1: "number",
-        x2: "number",
-        y2: "number",
-        color: "string",
-      };
-    case "room":
-      return {
-        name: "string",
-        x: "number",
-        y: "number",
-        width: "number",
-        height: "number",
-        rotation: "number",
-        color: "string",
-      };
-    default:
-      return {};
-  }
+    switch (el.type) {
+        case "chair":
+            return {
+                x: "number",
+                y: "number",
+                radius: "number",
+                color: "string",
+            };
+        case "rectTable":
+            return {
+                name: "string",
+                type: ["rectTable", "circleTable"],
+                x: "number",
+                y: "number",
+                width: "number",
+                height: "number",
+                rotation: "number",
+                color: "string",
+            };
+        case "circleTable":
+            return {
+                name: "string",
+                type: ["rectTable", "circleTable"],
+                x: "number",
+                y: "number",
+                radius: "number",
+                rotation: "number",
+                color: "string",
+            };
+        case "wall":
+            return {
+                x1: "number",
+                y1: "number",
+                x2: "number",
+                y2: "number",
+                color: "string",
+            };
+        case "room":
+            return {
+                name: "string",
+                x: "number",
+                y: "number",
+                width: "number",
+                height: "number",
+                rotation: "number",
+                color: "string",
+            };
+        default:
+            return {};
+    }
 };
 
 export const shapeFactory = (type: string) => {
-  switch (type) {
-    case "chair":
-      return new Chair();
-    case "rectTable":
-      return new Table(TABLE_TYPES.RECT);
-    case "circleTable":
-      return new Table(TABLE_TYPES.CIRCLE);
-    case "wall":
-      return new Wall();
-    case "room":
-      return new Room();
-    default:
-      return null;
-  }
+    switch (type) {
+        case "chair":
+            return new Chair();
+        case "rectTable":
+            return new Table(TABLE_TYPES.RECT);
+        case "circleTable":
+            return new Table(TABLE_TYPES.CIRCLE);
+        case "wall":
+            return new Wall();
+        case "room":
+            return new Room();
+        default:
+            return null;
+    }
 };
diff --git a/frontend/src/contexts/AuthContext.tsx b/frontend/src/contexts/AuthContext.tsx
index f504d98..1b01db8 100644
--- a/frontend/src/contexts/AuthContext.tsx
+++ b/frontend/src/contexts/AuthContext.tsx
@@ -1,6 +1,6 @@
-import { createContext, type ReactNode, useContext, useEffect, useState } from "react";
-import type { AuthState, User } from "../types/auth";
-import { authService } from "../services/authService";
+import {createContext, type ReactNode, useContext, useEffect, useState} from "react";
+import type {AuthState, User} from "../types/auth";
+import {authService} from "../services/authService";
 
 interface AuthContextType extends AuthState {
   login: (credentials: User) => Promise<void>;
@@ -58,7 +58,7 @@ export function AuthProvider({ children }: { children: ReactNode }) {
 export const useAuth = () => {
   const context = useContext(AuthContext);
   if (context === undefined) {
-    throw new Error("useAuth must be used within an AuthProvider");
+      throw new Error("useAuth must be used within an AuthProvider");
   }
   return context;
 };
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index 10ed13e..52c3469 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -1,5 +1,5 @@
-import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
+import {StrictMode} from "react";
+import {createRoot} from "react-dom/client";
 import "./index.css";
 import App from "./App.tsx";
 
diff --git a/frontend/src/pages/Dashboard.tsx b/frontend/src/pages/Dashboard.tsx
index 6116252..4c24689 100644
--- a/frontend/src/pages/Dashboard.tsx
+++ b/frontend/src/pages/Dashboard.tsx
@@ -1,4 +1,4 @@
-import { Button, Card, Col, Divider, List, Row, Space, Statistic, Tag, Typography } from "antd";
+import {Button, Card, Col, Divider, List, Row, Space, Statistic, Typography} from "antd";
 import {
   CalendarOutlined,
   CheckCircleOutlined,
@@ -8,9 +8,9 @@ import {
   PlusOutlined,
   TeamOutlined,
 } from "@ant-design/icons";
-import { useEffect, useState } from "react";
-import { Link, useNavigate } from "react-router-dom";
-import { type Event, EVENT_STATUS_COLORS, type EventStatus } from "../types/event";
+import {useEffect, useState} from "react";
+import {Link, useNavigate} from "react-router-dom";
+import {type Event, type EventStatus} from "../types/event";
 import useApiService from "../services/apiService.ts";
 import dayjs from "dayjs";
 
@@ -42,7 +42,7 @@ export const Dashboard = () => {
   }, [getEvents]);
 
   const getStatusIcon = (status: EventStatus) => {
-    return status === "completed" ? <CheckCircleOutlined /> : <ClockCircleOutlined />;
+    return status === "completed" ? <CheckCircleOutlined/> : <ClockCircleOutlined/>;
   };
 
   return (
@@ -90,7 +90,7 @@ export const Dashboard = () => {
             </Col>
           </Row>
 
-          <Card title="Upcoming Events" className="shadow-sm" bodyStyle={{ padding: "12px" }}>
+          <Card title="Upcoming Events" className="shadow-sm" bodyStyle={{padding: "12px"}}>
             <List
               dataSource={events
                 .filter(event => new Date(event.date).getTime() > new Date().getTime())
@@ -112,12 +112,12 @@ export const Dashboard = () => {
                     description={
                       <Space direction="vertical" size="small">
                         <Space>
-                          <CalendarOutlined /> {dayjs(event.date).format("MMMM D, YYYY, HH:mm")}
+                          <CalendarOutlined/> {dayjs(event.date).format("MMMM D, YYYY, HH:mm")}
                           <span style={{ marginLeft: 24 }} />
-                          <TeamOutlined /> {event.participantCount}/{event.capacity} participants
+                          <TeamOutlined/> {event.participantCount}/{event.capacity} participants
                         </Space>
                         <Space>
-                          <FireOutlined />{" "}
+                          <FireOutlined/>{" "}
                           {Number(((event.participantCount / event.capacity) * 100).toFixed(2))} %
                           engagement
                         </Space>
diff --git a/frontend/src/pages/Employees/EmployeeCreate.tsx b/frontend/src/pages/Employees/EmployeeCreate.tsx
index 86463e9..94f2f72 100644
--- a/frontend/src/pages/Employees/EmployeeCreate.tsx
+++ b/frontend/src/pages/Employees/EmployeeCreate.tsx
@@ -1,9 +1,9 @@
-import { useNavigate } from "react-router-dom";
+import {useNavigate} from "react-router-dom";
 import EmployeeForm from "./EmployeeForm";
-import { Card, Button, message, Typography, Form } from "antd";
-import { Breadcrumb } from "../../components/Breadcrumb";
+import {Button, Card, Form, message, Typography} from "antd";
+import {Breadcrumb} from "../../components/Breadcrumb";
 import useApiService from "../../services/apiService";
-import { useState } from "react";
+import {useState} from "react";
 
 const { Title } = Typography;
 
@@ -17,20 +17,20 @@ export const EmployeeCreate = () => {
     setLoading(true);
     try {
       // Ensure authorities is always an array
-      if (
-        values.profile &&
-        values.profile.authorities &&
-        !Array.isArray(values.profile.authorities)
-      ) {
+        if (
+            values.profile &&
+            values.profile.authorities &&
+            !Array.isArray(values.profile.authorities)
+        ) {
         values.profile.authorities = [values.profile.authorities];
       }
       // No gender normalization
       await createEmployee(values);
-      message.success("Employee created successfully");
-      navigate("/employees");
+        message.success("Employee created successfully");
+        navigate("/employees");
     } catch (error) {
-      message.error("Failed to create employee");
-      console.error("Error creating employee:", error);
+        message.error("Failed to create employee");
+        console.error("Error creating employee:", error);
     } finally {
       setLoading(false);
     }
@@ -41,37 +41,37 @@ export const EmployeeCreate = () => {
 
   return (
     <div>
-      <Breadcrumb
-        items={[
-          { path: "/employees", label: "Employees" },
-          { path: "/employees/new", label: "Add Employee" },
-        ]}
-      />
-      <div
-        style={{
-          display: "flex",
-          justifyContent: "space-between",
-          alignItems: "center",
-          marginBottom: 24,
-        }}
-      >
-        <Title level={2} style={{ margin: 0 }}>
-          Add Employee
-        </Title>
-        <div style={{ display: "flex" }}>
-          <Button
-            type="primary"
-            htmlType="submit"
-            loading={loading}
-            onClick={() => form.submit()}
-            style={{ marginRight: 8 }}
-          >
+        <Breadcrumb
+            items={[
+                {path: "/employees", label: "Employees"},
+                {path: "/employees/new", label: "Add Employee"},
+            ]}
+        />
+        <div
+            style={{
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center",
+                marginBottom: 24,
+            }}
+        >
+            <Title level={2} style={{margin: 0}}>
+                Add Employee
+            </Title>
+            <div style={{display: "flex"}}>
+                <Button
+                    type="primary"
+                    htmlType="submit"
+                    loading={loading}
+                    onClick={() => form.submit()}
+                    style={{marginRight: 8}}
+                >
             Add Employee
           </Button>
           <Button onClick={() => navigate(-1)}>Cancel</Button>
         </div>
       </div>
-      <Card style={{ margin: "0 auto" }}>
+        <Card style={{margin: "0 auto"}}>
         <EmployeeForm initialValues={normalizedInitialValues} onSave={handleFinish} form={form} />
       </Card>
     </div>
diff --git a/frontend/src/pages/Employees/EmployeeDetails.tsx b/frontend/src/pages/Employees/EmployeeDetails.tsx
index 150aa6e..d78ba06 100644
--- a/frontend/src/pages/Employees/EmployeeDetails.tsx
+++ b/frontend/src/pages/Employees/EmployeeDetails.tsx
@@ -1,246 +1,241 @@
-import { useEffect, useState } from "react";
-import { Button, Card, Descriptions, Space, Table, Typography, Modal, message, Tag } from "antd";
-import { useLocation, useNavigate, useParams } from "react-router-dom";
-import {
-  ArrowLeftOutlined,
-  EditOutlined,
-  DeleteOutlined,
-  ExclamationCircleOutlined,
-} from "@ant-design/icons";
-import { type Employee } from "../../types/employee.ts";
+import {useEffect, useState} from "react";
+import {Button, Card, Descriptions, message, Modal, Space, Table, Tag, Typography} from "antd";
+import {useLocation, useNavigate, useParams} from "react-router-dom";
+import {DeleteOutlined, EditOutlined, ExclamationCircleOutlined,} from "@ant-design/icons";
+import {type Employee} from "../../types/employee.ts";
 import useApiService from "../../services/apiService.ts";
-import { Breadcrumb } from "../../components/Breadcrumb";
-import { DIET_TYPES, EMPLOYMENT_TYPES, EMPLOYMENT_TYPE_COLORS } from "./EmployeeForm";
+import {Breadcrumb} from "../../components/Breadcrumb";
+import {DIET_TYPES, EMPLOYMENT_TYPE_COLORS, EMPLOYMENT_TYPES} from "./EmployeeForm";
 
-const { Title } = Typography;
+const {Title} = Typography;
 
 // Table columns for attended events
 const eventColumns = [
-  {
-    title: "Event Name",
-    dataIndex: "eventName",
-    key: "eventName",
-  },
-  {
-    title: "Date",
-    dataIndex: "eventDate",
-    key: "eventDate",
-    render: (_: any, record: any) => {
-      return new Date(record.eventDate).toLocaleDateString("en-US", {
-        year: "numeric",
-        month: "long",
-        day: "numeric",
-      });
+    {
+        title: "Event Name",
+        dataIndex: "eventName",
+        key: "eventName",
     },
-  },
-  {
-    title: "Type",
-    dataIndex: "eventType",
-    key: "eventType",
-  },
-  {
-    title: "Address",
-    dataIndex: "eventAddress",
-    key: "eventAddress",
-  },
-  {
-    title: "Guest Count",
-    dataIndex: "guestCount",
-    key: "guestCount",
-  },
-  {
-    title: "Status",
-    dataIndex: "confirmed",
-    key: "confirmed",
-    render: (_: any, record: any) => {
-      return record.confirmed ? "Confirmed" : "Not Confirmed";
+    {
+        title: "Date",
+        dataIndex: "eventDate",
+        key: "eventDate",
+        render: (_: any, record: any) => {
+            return new Date(record.eventDate).toLocaleDateString("en-US", {
+                year: "numeric",
+                month: "long",
+                day: "numeric",
+            });
+        },
     },
-  },
-];
-
-export const EmployeeDetails = () => {
-  const { employeeId } = useParams();
-  const location = useLocation();
-  const navigate = useNavigate();
-  const [employee, setEmployee] = useState<Employee | null>(null);
-  const { getEmployeeById, deleteEmployee } = useApiService();
-  const [deleteModalOpen, setDeleteModalOpen] = useState(false);
-
-  useEffect(() => {
-    (async () => {
-      try {
-        const data = await getEmployeeById(employeeId!);
-        setEmployee(data!);
-      } catch (err) {
-        console.error("Failed to fetch employee:", err);
-      }
-    })();
-  }, [employeeId, getEmployeeById]);
-
-  const basicFields = [
-    { label: "Full Name", value: employee?.profile.fullName },
-    { label: "Gitlab Username", value: employee?.profile.gitlabUsername },
     {
-      label: "Gender",
-      value: employee?.profile.gender
-        ? employee.profile.gender.charAt(0).toUpperCase() +
-          employee.profile.gender.slice(1).toLowerCase()
-        : undefined,
+        title: "Type",
+        dataIndex: "eventType",
+        key: "eventType",
     },
     {
-      label: "Role",
-      value: employee?.profile.authorities?.map(
-        (role: string) => role.charAt(0).toUpperCase() + role.slice(1).toLowerCase()
-      ),
+        title: "Address",
+        dataIndex: "eventAddress",
+        key: "eventAddress",
     },
     {
-      label: "Dietary Preferences",
-      value: employee?.profile.dietTypes?.length
-        ? employee.profile.dietTypes.map(type => {
-            const typeObj = DIET_TYPES.find(t => t.value === type);
-            return typeObj ? typeObj.label : type;
-          })
-        : undefined,
+        title: "Guest Count",
+        dataIndex: "guestCount",
+        key: "guestCount",
     },
-    { label: "Location", value: employee?.location },
     {
-      label: "Employment Type",
-      value: employee?.employmentType
-        ? EMPLOYMENT_TYPES.find(t => t.value === employee.employmentType)?.label || (
-            <Tag color={EMPLOYMENT_TYPE_COLORS[employee.employmentType]}>
-              {employee.employmentType}
-            </Tag>
-          )
-        : undefined,
+        title: "Status",
+        dataIndex: "confirmed",
+        key: "confirmed",
+        render: (_: any, record: any) => {
+            return record.confirmed ? "Confirmed" : "Not Confirmed";
+        },
     },
-    { label: "Date Joined", value: employee?.employmentStartDate },
-  ];
-
-  const contactFields = [{ label: "Email", value: employee?.profile.email }];
+];
 
-  // Scroll to events section if hash is #events
-  useEffect(() => {
-    if (location.hash === "#events") {
-      const el = document.getElementById("events-section");
-      if (el) {
-        el.scrollIntoView({ behavior: "smooth" });
-      }
-    }
-  }, [location.hash]);
+export const EmployeeDetails = () => {
+    const {employeeId} = useParams();
+    const location = useLocation();
+    const navigate = useNavigate();
+    const [employee, setEmployee] = useState<Employee | null>(null);
+    const {getEmployeeById, deleteEmployee} = useApiService();
+    const [deleteModalOpen, setDeleteModalOpen] = useState(false);
 
-  const showDeleteModal = () => {
-    setDeleteModalOpen(true);
-  };
+    useEffect(() => {
+        (async () => {
+            try {
+                const data = await getEmployeeById(employeeId!);
+                setEmployee(data!);
+            } catch (err) {
+                console.error("Failed to fetch employee:", err);
+            }
+        })();
+    }, [employeeId, getEmployeeById]);
 
-  const handleDeleteConfirm = async () => {
-    try {
-      await deleteEmployee(employeeId!);
-      message.success("Employee deleted successfully");
-      navigate("/employees");
-    } catch (error) {
-      message.error("Failed to delete employee");
-      console.error("Error deleting employee:", error);
-    } finally {
-      setDeleteModalOpen(false);
-    }
-  };
+    const basicFields = [
+        {label: "Full Name", value: employee?.profile.fullName},
+        {label: "Gitlab Username", value: employee?.profile.gitlabUsername},
+        {
+            label: "Gender",
+            value: employee?.profile.gender
+                ? employee.profile.gender.charAt(0).toUpperCase() +
+                employee.profile.gender.slice(1).toLowerCase()
+                : undefined,
+        },
+        {
+            label: "Role",
+            value: employee?.profile.authorities?.map(
+                (role: string) => role.charAt(0).toUpperCase() + role.slice(1).toLowerCase()
+            ),
+        },
+        {
+            label: "Dietary Preferences",
+            value: employee?.profile.dietTypes?.length
+                ? employee.profile.dietTypes.map(type => {
+                    const typeObj = DIET_TYPES.find(t => t.value === type);
+                    return typeObj ? typeObj.label : type;
+                })
+                : undefined,
+        },
+        {label: "Location", value: employee?.location},
+        {
+            label: "Employment Type",
+            value: employee?.employmentType
+                ? EMPLOYMENT_TYPES.find(t => t.value === employee.employmentType)?.label || (
+                <Tag color={EMPLOYMENT_TYPE_COLORS[employee.employmentType]}>
+                    {employee.employmentType}
+                </Tag>
+            )
+                : undefined,
+        },
+        {label: "Date Joined", value: employee?.employmentStartDate},
+    ];
 
-  const handleDeleteCancel = () => {
-    setDeleteModalOpen(false);
-  };
+    const contactFields = [{label: "Email", value: employee?.profile.email}];
 
-  return (
-    <div>
-      <Breadcrumb
-        items={[
-          { path: "/employees", label: "Employees" },
-          {
-            path: `/employees/${employeeId}`,
-            label: employee?.profile?.fullName || "Employee Details",
-          },
-        ]}
-      />
-      {/* Page Title */}
-      <div className="flex justify-between items-center mb-6">
-        <Title level={2} className="m-0">
-          {employee?.profile?.fullName || "Employee Details"}
-        </Title>
-        <Space>
-          <Button
-            type="primary"
-            icon={<EditOutlined />}
-            onClick={() => navigate(`/employees/${employeeId}/edit`)}
-          >
-            Edit
-          </Button>
-          <Button danger icon={<DeleteOutlined />} onClick={showDeleteModal}>
-            Delete
-          </Button>
-          <Modal
-            title={
-              <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
-                <ExclamationCircleOutlined style={{ color: "#faad14" }} />
-                Confirm Delete
-              </div>
+    // Scroll to events section if hash is #events
+    useEffect(() => {
+        if (location.hash === "#events") {
+            const el = document.getElementById("events-section");
+            if (el) {
+                el.scrollIntoView({behavior: "smooth"});
             }
-            centered
-            open={deleteModalOpen}
-            onOk={handleDeleteConfirm}
-            onCancel={handleDeleteCancel}
-            okText="Yes, Delete"
-            cancelText="Cancel"
-            okButtonProps={{ danger: true }}
-            width={400}
-          >
-            <p>Are you sure you want to delete this employee?</p>
-            <p style={{ color: "#8c8c8c", fontSize: "14px" }}>This action cannot be undone.</p>
-          </Modal>
-        </Space>
-      </div>
+        }
+    }, [location.hash]);
+
+    const showDeleteModal = () => {
+        setDeleteModalOpen(true);
+    };
+
+    const handleDeleteConfirm = async () => {
+        try {
+            await deleteEmployee(employeeId!);
+            message.success("Employee deleted successfully");
+            navigate("/employees");
+        } catch (error) {
+            message.error("Failed to delete employee");
+            console.error("Error deleting employee:", error);
+        } finally {
+            setDeleteModalOpen(false);
+        }
+    };
+
+    const handleDeleteCancel = () => {
+        setDeleteModalOpen(false);
+    };
+
+    return (
+        <div>
+            <Breadcrumb
+                items={[
+                    {path: "/employees", label: "Employees"},
+                    {
+                        path: `/employees/${employeeId}`,
+                        label: employee?.profile?.fullName || "Employee Details",
+                    },
+                ]}
+            />
+            {/* Page Title */}
+            <div className="flex justify-between items-center mb-6">
+                <Title level={2} className="m-0">
+                    {employee?.profile?.fullName || "Employee Details"}
+                </Title>
+                <Space>
+                    <Button
+                        type="primary"
+                        icon={<EditOutlined/>}
+                        onClick={() => navigate(`/employees/${employeeId}/edit`)}
+                    >
+                        Edit
+                    </Button>
+                    <Button danger icon={<DeleteOutlined/>} onClick={showDeleteModal}>
+                        Delete
+                    </Button>
+                    <Modal
+                        title={
+                            <div style={{display: "flex", alignItems: "center", gap: "8px"}}>
+                                <ExclamationCircleOutlined style={{color: "#faad14"}}/>
+                                Confirm Delete
+                            </div>
+                        }
+                        centered
+                        open={deleteModalOpen}
+                        onOk={handleDeleteConfirm}
+                        onCancel={handleDeleteCancel}
+                        okText="Yes, Delete"
+                        cancelText="Cancel"
+                        okButtonProps={{danger: true}}
+                        width={400}
+                    >
+                        <p>Are you sure you want to delete this employee?</p>
+                        <p style={{color: "#8c8c8c", fontSize: "14px"}}>This action cannot be undone.</p>
+                    </Modal>
+                </Space>
+            </div>
 
-      {/* Basic Information Section (view only) */}
-      <Card title="Basic Information" style={{ marginBottom: 24 }}>
-        <Descriptions column={2} bordered>
-          {basicFields.map(field => (
-            <Descriptions.Item label={field.label} key={field.label}>
-              {Array.isArray(field.value)
-                ? field.value.map((v, i) => (
-                    <span key={i} style={{ marginRight: 4 }}>
+            {/* Basic Information Section (view only) */}
+            <Card title="Basic Information" style={{marginBottom: 24}}>
+                <Descriptions column={2} bordered>
+                    {basicFields.map(field => (
+                        <Descriptions.Item label={field.label} key={field.label}>
+                            {Array.isArray(field.value)
+                                ? field.value.map((v, i) => (
+                                    <span key={i} style={{marginRight: 4}}>
                       {v}
                     </span>
-                  ))
-                : field.value || ""}
-            </Descriptions.Item>
-          ))}
-        </Descriptions>
-      </Card>
+                                ))
+                                : field.value || ""}
+                        </Descriptions.Item>
+                    ))}
+                </Descriptions>
+            </Card>
 
-      {/* Contact Information Section (view only) */}
-      <Card title="Contact Information" style={{ marginBottom: 24 }}>
-        <Descriptions column={1} bordered>
-          {contactFields.map(
-            field =>
-              field.value && (
-                <Descriptions.Item label={field.label} key={field.label}>
-                  {field.value}
-                </Descriptions.Item>
-              )
-          )}
-        </Descriptions>
-      </Card>
+            {/* Contact Information Section (view only) */}
+            <Card title="Contact Information" style={{marginBottom: 24}}>
+                <Descriptions column={1} bordered>
+                    {contactFields.map(
+                        field =>
+                            field.value && (
+                                <Descriptions.Item label={field.label} key={field.label}>
+                                    {field.value}
+                                </Descriptions.Item>
+                            )
+                    )}
+                </Descriptions>
+            </Card>
 
-      {/* Attended Events List Section */}
-      <div id="events-section">
-        <Card title="Attended Events List" style={{ marginBottom: 24 }}>
-          <Table
-            columns={eventColumns}
-            dataSource={employee?.participations ?? []}
-            bordered
-            rowKey="key"
-            pagination={false}
-          />
-        </Card>
-      </div>
-    </div>
-  );
+            {/* Attended Events List Section */}
+            <div id="events-section">
+                <Card title="Attended Events List" style={{marginBottom: 24}}>
+                    <Table
+                        columns={eventColumns}
+                        dataSource={employee?.participations ?? []}
+                        bordered
+                        rowKey="key"
+                        pagination={false}
+                    />
+                </Card>
+            </div>
+        </div>
+    );
 };
diff --git a/frontend/src/pages/Employees/EmployeeEdit.tsx b/frontend/src/pages/Employees/EmployeeEdit.tsx
index ec06882..3d32ba5 100644
--- a/frontend/src/pages/Employees/EmployeeEdit.tsx
+++ b/frontend/src/pages/Employees/EmployeeEdit.tsx
@@ -1,8 +1,8 @@
-import React, { useEffect, useState } from "react";
-import { useParams, useNavigate } from "react-router-dom";
+import React, {useEffect, useState} from "react";
+import {useNavigate, useParams} from "react-router-dom";
 import EmployeeForm from "./EmployeeForm";
-import { Card, Button, message, Typography, Tag, Form } from "antd";
-import { Breadcrumb } from "../../components/Breadcrumb";
+import {Button, Card, Form, message, Typography} from "antd";
+import {Breadcrumb} from "../../components/Breadcrumb";
 import useApiService from "../../services/apiService";
 
 const { Title } = Typography;
@@ -22,8 +22,8 @@ export const EmployeeEdit = () => {
         const data = await getEmployeeById(employeeId!);
         setEmployee(data);
       } catch (err) {
-        message.error("Failed to fetch employee");
-        console.error("Failed to fetch employee:", err);
+          message.error("Failed to fetch employee");
+          console.error("Failed to fetch employee:", err);
       } finally {
         setLoading(false);
       }
@@ -34,20 +34,20 @@ export const EmployeeEdit = () => {
     setSaving(true);
     try {
       // Ensure authorities is always an array
-      if (
-        values.profile &&
-        values.profile.authorities &&
-        !Array.isArray(values.profile.authorities)
-      ) {
+        if (
+            values.profile &&
+            values.profile.authorities &&
+            !Array.isArray(values.profile.authorities)
+        ) {
         values.profile.authorities = [values.profile.authorities];
       }
       // No gender normalization
       await updateEmployee(employeeId!, values);
-      message.success("Employee updated successfully");
+        message.success("Employee updated successfully");
       navigate(`/employees/${employeeId!}`);
     } catch (error) {
-      message.error("Failed to update employee");
-      console.error("Error updating employee:", error);
+        message.error("Failed to update employee");
+        console.error("Error updating employee:", error);
     } finally {
       setSaving(false);
     }
@@ -70,29 +70,29 @@ export const EmployeeEdit = () => {
     <div style={{ padding: 0 }}>
       <Breadcrumb
         items={[
-          { path: "/employees", label: "Employees" },
-          { path: `/employees/${employeeId}/edit`, label: "Edit Employee" },
+            {path: "/employees", label: "Employees"},
+            {path: `/employees/${employeeId}/edit`, label: "Edit Employee"},
         ]}
       />
-      <div
-        style={{
-          display: "flex",
-          justifyContent: "space-between",
-          alignItems: "center",
-          marginBottom: 24,
-        }}
-      >
-        <Title level={2} style={{ margin: 0 }}>
-          Edit Employee
-        </Title>
-        <div style={{ display: "flex" }}>
-          <Button
-            type="primary"
-            htmlType="submit"
-            loading={saving}
-            onClick={() => form.submit()}
-            style={{ marginRight: 8 }}
-          >
+        <div
+            style={{
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center",
+                marginBottom: 24,
+            }}
+        >
+            <Title level={2} style={{margin: 0}}>
+                Edit Employee
+            </Title>
+            <div style={{display: "flex"}}>
+                <Button
+                    type="primary"
+                    htmlType="submit"
+                    loading={saving}
+                    onClick={() => form.submit()}
+                    style={{marginRight: 8}}
+                >
             Save
           </Button>
           <Button onClick={() => navigate(-1)}>Cancel</Button>
diff --git a/frontend/src/pages/Employees/EmployeeForm.tsx b/frontend/src/pages/Employees/EmployeeForm.tsx
index 9e2628b..5a00cde 100644
--- a/frontend/src/pages/Employees/EmployeeForm.tsx
+++ b/frontend/src/pages/Employees/EmployeeForm.tsx
@@ -1,6 +1,6 @@
 import React from "react";
-import { Form, Input, Select, Button, Space, Tag } from "antd";
-import { DietaryPreference, EmploymentType, Role } from "../../types/employee";
+import {Form, Input, Select, Tag} from "antd";
+import {DietaryPreference, EmploymentType, Role} from "../../types/employee";
 
 const { Option } = Select;
 
@@ -11,14 +11,14 @@ type EmployeeFormProps = {
 };
 
 export const DIET_TYPE_COLORS: Record<string, string> = {
-  VEGETARIAN: "green",
-  PESCATARIAN: "blue",
-  HALAL: "orange",
-  KOSHER: "purple",
-  VEGAN: "magenta",
-  LACTOSE_FREE: "cyan",
-  GLUTEN_FREE: "lime",
-  KETO: "gold",
+    VEGETARIAN: "green",
+    PESCATARIAN: "blue",
+    HALAL: "orange",
+    KOSHER: "purple",
+    VEGAN: "magenta",
+    LACTOSE_FREE: "cyan",
+    GLUTEN_FREE: "lime",
+    KETO: "gold",
 };
 export const DIET_TYPES = Object.entries(DietaryPreference).map(([key, label]) => ({
   label: <Tag color={DIET_TYPE_COLORS[key]}>{label}</Tag>,
@@ -26,10 +26,10 @@ export const DIET_TYPES = Object.entries(DietaryPreference).map(([key, label]) =
 }));
 
 export const EMPLOYMENT_TYPE_COLORS: Record<string, string> = {
-  FULLTIME: "green",
-  PARTTIME: "blue",
-  WORKING_STUDENT: "orange",
-  THESIS: "purple",
+    FULLTIME: "green",
+    PARTTIME: "blue",
+    WORKING_STUDENT: "orange",
+    THESIS: "purple",
 };
 
 export const EMPLOYMENT_TYPES = Object.entries(EmploymentType).map(([key, label]) => ({
@@ -48,70 +48,70 @@ const EmployeeForm = ({ initialValues, onSave, form }: EmployeeFormProps) => {
   };
 
   return (
-    <Form form={form} layout="vertical" initialValues={initialValues} onFinish={handleFinish}>
-      <Form.Item
-        label="GitLab Username"
-        name={["profile", "gitlabUsername"]}
-        rules={[{ required: true, message: "Please enter GitLab Username" }]}
-      >
+      <Form form={form} layout="vertical" initialValues={initialValues} onFinish={handleFinish}>
+          <Form.Item
+              label="GitLab Username"
+              name={["profile", "gitlabUsername"]}
+              rules={[{required: true, message: "Please enter GitLab Username"}]}
+          >
         <Input placeholder="Enter GitLab Username" maxLength={500} />
       </Form.Item>
-      <Form.Item
-        label="Full Name"
-        name={["profile", "fullName"]}
-        rules={[{ required: true, message: "Please enter full name" }]}
-      >
+          <Form.Item
+              label="Full Name"
+              name={["profile", "fullName"]}
+              rules={[{required: true, message: "Please enter full name"}]}
+          >
         <Input placeholder="Enter full name" maxLength={250} />
       </Form.Item>
-      <Form.Item
-        label="Gender"
-        name={["profile", "gender"]}
-        rules={[{ required: true, message: "Please select gender" }]}
-      >
+          <Form.Item
+              label="Gender"
+              name={["profile", "gender"]}
+              rules={[{required: true, message: "Please select gender"}]}
+          >
         <Select placeholder="Select gender" maxLength={255}>
           <Option value="Male">Male</Option>
           <Option value="Female">Female</Option>
           <Option value="Diverse">Diverse</Option>
         </Select>
       </Form.Item>
-      <Form.Item
-        label="Email"
-        name={["profile", "email"]}
-        rules={[{ required: true, message: "Please enter email" }]}
-      >
+          <Form.Item
+              label="Email"
+              name={["profile", "email"]}
+              rules={[{required: true, message: "Please enter email"}]}
+          >
         <Input placeholder="Enter email" />
       </Form.Item>
       <Form.Item label="Dietary Preference" name={["profile", "dietTypes"]}>
-        <Select placeholder="Select dietary preference" options={DIET_TYPES} mode="multiple" />
+          <Select placeholder="Select dietary preference" options={DIET_TYPES} mode="multiple"/>
       </Form.Item>
-      <Form.Item
-        label="Employment Type"
-        name="employmentType"
-        rules={[{ required: true, message: "Please select employment type" }]}
-      >
+          <Form.Item
+              label="Employment Type"
+              name="employmentType"
+              rules={[{required: true, message: "Please select employment type"}]}
+          >
         <Select placeholder="Select employment type" options={EMPLOYMENT_TYPES} />
       </Form.Item>
-      <Form.Item
-        label="Date Joined"
-        name="employmentStartDate"
-        rules={[{ required: true, message: "Please enter employment start date" }]}
-      >
+          <Form.Item
+              label="Date Joined"
+              name="employmentStartDate"
+              rules={[{required: true, message: "Please enter employment start date"}]}
+          >
         <Input placeholder="Enter date joined" type="date" />
       </Form.Item>
-      <Form.Item
-        label="Location"
-        name="location"
-        rules={[{ required: true, message: "Please enter location" }]}
-      >
+          <Form.Item
+              label="Location"
+              name="location"
+              rules={[{required: true, message: "Please enter location"}]}
+          >
         <Input placeholder="Enter location" />
       </Form.Item>
-      <Form.Item
-        label="Employee Role"
-        name={["profile", "authorities"]}
-        rules={[{ required: true, message: "Please select a role" }]}
+          <Form.Item
+              label="Employee Role"
+              name={["profile", "authorities"]}
+              rules={[{required: true, message: "Please select a role"}]}
         normalize={value => (Array.isArray(value) ? value : value ? [value] : [])}
-      >
-        <Select placeholder="Select role" options={ROLE_OPTIONS} />
+          >
+              <Select placeholder="Select role" options={ROLE_OPTIONS}/>
       </Form.Item>
     </Form>
   );
diff --git a/frontend/src/pages/Employees/EmployeesList.tsx b/frontend/src/pages/Employees/EmployeesList.tsx
index 3d43da3..c489082 100644
--- a/frontend/src/pages/Employees/EmployeesList.tsx
+++ b/frontend/src/pages/Employees/EmployeesList.tsx
@@ -1,13 +1,13 @@
-import { useEffect, useMemo, useState } from "react";
-import { Button, Input, Select, Space, Table, Typography, Card, Row, Col, Tag } from "antd";
-import { DownloadOutlined, EyeOutlined, PlusOutlined, SearchOutlined } from "@ant-design/icons";
-import type { ColumnsType } from "antd/es/table";
-import { useNavigate } from "react-router-dom";
-import type { Employee } from "types/employee.ts";
+import {useEffect, useMemo, useState} from "react";
+import {Button, Card, Col, Input, Row, Select, Space, Table, Tag, Typography} from "antd";
+import {DownloadOutlined, EyeOutlined, PlusOutlined, SearchOutlined} from "@ant-design/icons";
+import type {ColumnsType} from "antd/es/table";
+import {useNavigate} from "react-router-dom";
+import type {Employee} from "types/employee.ts";
 import useApiService from "../../services/apiService.ts";
 import toast from "react-hot-toast";
-import { Breadcrumb } from "../../components/Breadcrumb";
-import { EMPLOYMENT_TYPE_COLORS, EMPLOYMENT_TYPES } from "./EmployeeForm";
+import {Breadcrumb} from "../../components/Breadcrumb";
+import {EMPLOYMENT_TYPE_COLORS, EMPLOYMENT_TYPES} from "./EmployeeForm";
 
 const { Title } = Typography;
 
@@ -17,25 +17,25 @@ const columns = (
   onNavigate: (employeeId?: string, anchor?: string, editMode?: boolean) => void
 ): ColumnsType<Employee> => [
   {
-    title: "Full Name",
-    dataIndex: ["profile", "fullName"],
-    key: "profile.fullName",
-    sorter: (a, b) => (a.profile?.fullName ?? "").localeCompare(b.profile?.fullName ?? ""),
+      title: "Full Name",
+      dataIndex: ["profile", "fullName"],
+      key: "profile.fullName",
+      sorter: (a, b) => (a.profile?.fullName ?? "").localeCompare(b.profile?.fullName ?? ""),
   },
   {
-    title: "Email",
-    dataIndex: ["profile", "email"],
-    key: "profile.email",
+      title: "Email",
+      dataIndex: ["profile", "email"],
+      key: "profile.email",
   },
   {
-    title: "Location",
-    dataIndex: "location",
-    key: "location",
+      title: "Location",
+      dataIndex: "location",
+      key: "location",
   },
   {
-    title: "Employment Type",
-    dataIndex: "employmentType",
-    key: "employmentType",
+      title: "Employment Type",
+      dataIndex: "employmentType",
+      key: "employmentType",
     render: (type: string) => {
       if (!type) return null;
       const typeObj = EMPLOYMENT_TYPES.find(t => t.value === type);
@@ -44,42 +44,42 @@ const columns = (
       ) : (
         <Tag color={EMPLOYMENT_TYPE_COLORS[type]}>
           {type
-            .split("_")
+              .split("_")
             .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
-            .join(" ")}
+              .join(" ")}
         </Tag>
       );
     },
   },
   {
-    title: "Date Joined",
-    dataIndex: "employmentStartDate",
-    key: "employmentStartDate",
+      title: "Date Joined",
+      dataIndex: "employmentStartDate",
+      key: "employmentStartDate",
   },
   {
-    title: "Events",
-    dataIndex: "attendedEventsCount",
-    key: "attendedEventsCount",
+      title: "Events",
+      dataIndex: "attendedEventsCount",
+      key: "attendedEventsCount",
     render: (_count: number, record: Employee) => (
-      <Button
-        type="link"
-        style={{ color: "black" }}
-        onClick={() => onNavigate(record.profile.id, "events")}
-      >
+        <Button
+            type="link"
+            style={{color: "black"}}
+            onClick={() => onNavigate(record.profile.id, "events")}
+        >
         {record.participations?.length || 0}
       </Button>
     ),
   },
   {
-    title: "Actions",
-    key: "actions",
+      title: "Actions",
+      key: "actions",
     render: (_, record: Employee) => (
       <Space size="small" align="end">
         <Button
           type="default"
-          icon={<EyeOutlined />}
+          icon={<EyeOutlined/>}
           onClick={() => onNavigate(record.profile.id)}
-          style={{ background: "#fff", border: "1px solid #d9d9d9" }}
+          style={{background: "#fff", border: "1px solid #d9d9d9"}}
         >
           View
         </Button>
@@ -92,14 +92,14 @@ const columns = (
 const exportToCSV = (data: Employee[]) => {
   // Define CSV headers
   const headers = [
-    "Gitlab ID",
-    "Full Name",
-    "Gender",
-    "Projects",
-    "Location",
-    "Email",
-    "Roles",
-    "Date Joined",
+      "Gitlab ID",
+      "Full Name",
+      "Gender",
+      "Projects",
+      "Location",
+      "Email",
+      "Roles",
+      "Date Joined",
   ];
   // Map data to CSV rows
   const rows = data.map(emp => [
@@ -115,11 +115,11 @@ const exportToCSV = (data: Employee[]) => {
   // Combine headers and rows
   const csvContent = [headers, ...rows].map(e => e.join(";")).join("\n");
   // Create a blob and trigger download
-  const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
+    const blob = new Blob([csvContent], {type: "text/csv;charset=utf-8;"});
   const url = URL.createObjectURL(blob);
-  const link = document.createElement("a");
+    const link = document.createElement("a");
   link.href = url;
-  link.setAttribute("download", "employees.csv");
+    link.setAttribute("download", "employees.csv");
   document.body.appendChild(link);
   link.click();
   document.body.removeChild(link);
@@ -127,7 +127,7 @@ const exportToCSV = (data: Employee[]) => {
 
 export const EmployeesList = () => {
   const navigate = useNavigate();
-  const [searchText, setSearchText] = useState("");
+    const [searchText, setSearchText] = useState("");
   const [locationFilter, setLocationFilter] = useState<string | undefined>(undefined);
   const [fetchedEmployees, setEmployees] = useState<Employee[]>([]);
   const { getEmployees, deleteEmployee } = useApiService();
@@ -139,27 +139,27 @@ export const EmployeesList = () => {
         const data = await getEmployees();
         setEmployees(data ?? []);
       } catch (err) {
-        console.error("Failed to fetch employees:", err);
+          console.error("Failed to fetch employees:", err);
       }
     })();
   }, [getEmployees]);
 
-  const employees = useMemo(
-    () => fetchedEmployees.map(e => ({ ...e, key: e.profile.id })),
-    [fetchedEmployees]
-  );
+    const employees = useMemo(
+        () => fetchedEmployees.map(e => ({...e, key: e.profile.id})),
+        [fetchedEmployees]
+    );
 
   // Get unique locations for filter dropdown
-  const uniqueLocations = useMemo(
-    () => Array.from(new Set(employees.map(emp => emp.location))).filter(Boolean),
-    [employees]
-  );
+    const uniqueLocations = useMemo(
+        () => Array.from(new Set(employees.map(emp => emp.location))).filter(Boolean),
+        [employees]
+    );
 
   // Filter employees by name and location
   const filteredData = useMemo(() => {
     return employees.filter(item => {
       const matchesSearch =
-        searchText === "" ||
+          searchText === "" ||
         item.profile.fullName?.toLowerCase().includes(searchText.toLowerCase());
       const matchesLocation = !locationFilter || item.location === locationFilter;
       return matchesSearch && matchesLocation;
@@ -172,14 +172,14 @@ export const EmployeesList = () => {
       await deleteEmployee(profileId);
       setEmployees(prev => prev.filter(item => item.profile.id !== profileId));
     } catch (err) {
-      console.error("Failed to delete employee:", err);
+        console.error("Failed to delete employee:", err);
     }
   };
 
   // Handle export action
   const handleExport = () => {
     exportToCSV(filteredData);
-    toast.success("Exported employee data as CSV");
+      toast.success("Exported employee data as CSV");
   };
 
   // Handle navigation to EmployeeDetails page
@@ -188,20 +188,20 @@ export const EmployeesList = () => {
       if (editMode) {
         navigate(`/employees/${employeeId}/edit`);
       } else {
-        navigate(`/employees/${employeeId}${anchor ? `#${anchor}` : ""}`);
+          navigate(`/employees/${employeeId}${anchor ? `#${anchor}` : ""}`);
       }
     } else {
-      navigate("/employees/new");
+        navigate("/employees/new");
     }
   };
 
   return (
     <div style={{ padding: 0 }}>
-      <Breadcrumb items={[{ path: "/employees", label: "Employees" }]} />
+        <Breadcrumb items={[{path: "/employees", label: "Employees"}]}/>
       <div className="flex justify-between items-center mb-6">
-        <Title level={2} className="m-0">
-          Employees
-        </Title>
+          <Title level={2} className="m-0">
+              Employees
+          </Title>
         <Button type="primary" icon={<PlusOutlined />} onClick={() => handleNavigate()}>
           Add Employee
         </Button>
@@ -221,14 +221,14 @@ export const EmployeesList = () => {
             <Select
               allowClear
               placeholder="Location"
-              style={{ width: "100%" }}
+              style={{width: "100%"}}
               value={locationFilter}
               onChange={value => setLocationFilter(value)}
               options={uniqueLocations.map(location => ({ value: location, label: location }))}
             />
           </Col>
           <Col span={8}>
-            <Button icon={<DownloadOutlined />} onClick={handleExport} style={{ width: "100%" }}>
+              <Button icon={<DownloadOutlined/>} onClick={handleExport} style={{width: "100%"}}>
               Export
             </Button>
           </Col>
@@ -242,17 +242,17 @@ export const EmployeesList = () => {
         pagination={{
           pageSize: pageSize,
           showSizeChanger: true,
-          pageSizeOptions: [
-            "10",
-            "20",
-            "50",
-            filteredData.length > 0 ? filteredData.length.toString() : "1000",
-          ],
+            pageSizeOptions: [
+                "10",
+                "20",
+                "50",
+                filteredData.length > 0 ? filteredData.length.toString() : "1000",
+            ],
           showTotal: (total, range) => `${range[0]}-${range[1]} of ${total} items`,
           onShowSizeChange: (_current, size) => setPageSize(size),
           showQuickJumper: false,
         }}
-        scroll={{ x: "max-content" }}
+        scroll={{x: "max-content"}}
       />
     </div>
   );
diff --git a/frontend/src/pages/Events/EventCreate.tsx b/frontend/src/pages/Events/EventCreate.tsx
index f6f0d7c..ef15cd5 100644
--- a/frontend/src/pages/Events/EventCreate.tsx
+++ b/frontend/src/pages/Events/EventCreate.tsx
@@ -12,11 +12,11 @@ import {
   Space,
   Typography,
 } from "antd";
-import { useNavigate } from "react-router-dom";
-import { Breadcrumb } from "../../components/Breadcrumb";
-import { useState } from "react";
-import type { Event, EventType } from "../../types/event";
-import { EVENT_TYPE_COLORS } from "../../types/event";
+import {useNavigate} from "react-router-dom";
+import {Breadcrumb} from "../../components/Breadcrumb";
+import {useState} from "react";
+import type {Event, EventType} from "../../types/event";
+import {EVENT_TYPE_COLORS} from "../../types/event";
 import useApiService from "../../services/apiService";
 
 const { Title } = Typography;
@@ -32,14 +32,14 @@ export const EventCreate = () => {
     setLoading(true);
     try {
       // @ts-ignore
-      console.log("Form values:", { ...values, date: values.date.toISOString() });
+        console.log("Form values:", {...values, date: values.date.toISOString()});
 
       const result = await createEvent(values);
       if (result) {
         navigate(`/events`, { replace: true });
       }
     } catch (error) {
-      console.error("Error creating event:", error);
+        console.error("Error creating event:", error);
     } finally {
       setLoading(false);
     }
@@ -49,8 +49,8 @@ export const EventCreate = () => {
     <div className="space-y-6">
       <Breadcrumb
         items={[
-          { path: "/events", label: "Events" },
-          { path: "/events/create", label: "Create Event" },
+            {path: "/events", label: "Events"},
+            {path: "/events/create", label: "Create Event"},
         ]}
       />
 
@@ -60,7 +60,7 @@ export const EventCreate = () => {
           <Button type="primary" htmlType="submit" loading={loading} onClick={() => form.submit()}>
             Create Event
           </Button>
-          <Button onClick={() => navigate("/events")}>Cancel</Button>
+            <Button onClick={() => navigate("/events")}>Cancel</Button>
         </Space>
       </div>
 
@@ -81,7 +81,7 @@ export const EventCreate = () => {
                 <Descriptions.Item label="Event Name" span={3}>
                   <Form.Item
                     name="name"
-                    rules={[{ required: true, message: "Please enter event name" }]}
+                    rules={[{required: true, message: "Please enter event name"}]}
                     noStyle
                   >
                     <Input />
@@ -91,7 +91,7 @@ export const EventCreate = () => {
                 <Descriptions.Item label="Date" span={3}>
                   <Form.Item
                     name="date"
-                    rules={[{ required: true, message: "Please select event date" }]}
+                    rules={[{required: true, message: "Please select event date"}]}
                     noStyle
                   >
                     <DatePicker
@@ -106,7 +106,7 @@ export const EventCreate = () => {
                 <Descriptions.Item label="Address" span={3}>
                   <Form.Item
                     name="address"
-                    rules={[{ required: true, message: "Please enter event address" }]}
+                    rules={[{required: true, message: "Please enter event address"}]}
                     noStyle
                   >
                     <Input />
@@ -116,16 +116,16 @@ export const EventCreate = () => {
                 <Descriptions.Item label="Type" span={3}>
                   <Form.Item
                     name="eventType"
-                    rules={[{ required: true, message: "Please select event type" }]}
+                    rules={[{required: true, message: "Please select event type"}]}
                     noStyle
                   >
                     <Select
                       options={Object.entries(EVENT_TYPE_COLORS).map(([value]) => ({
                         value,
                         label: value
-                          .split("_")
+                            .split("_")
                           .map(word => word.charAt(0).toUpperCase() + word.slice(1))
-                          .join(" "),
+                            .join(" "),
                       }))}
                     />
                   </Form.Item>
@@ -135,7 +135,7 @@ export const EventCreate = () => {
                   <Form.Item
                     name="capacity"
                     label=""
-                    rules={[{ required: true, message: "Please enter event capacity" }]}
+                    rules={[{required: true, message: "Please enter event capacity"}]}
                     initialValue={1}
                     noStyle
                   >
@@ -146,7 +146,7 @@ export const EventCreate = () => {
                 <Descriptions.Item label="Description" span={3}>
                   <Form.Item
                     name="description"
-                    rules={[{ required: true, message: "Please enter event description" }]}
+                    rules={[{required: true, message: "Please enter event description"}]}
                     noStyle
                   >
                     <TextArea rows={4} />
diff --git a/frontend/src/pages/Events/EventDetails.tsx b/frontend/src/pages/Events/EventDetails.tsx
index a1c2d85..bc8f924 100644
--- a/frontend/src/pages/Events/EventDetails.tsx
+++ b/frontend/src/pages/Events/EventDetails.tsx
@@ -1,18 +1,6 @@
-import {
-  Button,
-  Card,
-  Col,
-  Descriptions,
-  Image,
-  Modal,
-  Row,
-  Space,
-  Statistic,
-  Tag,
-  Typography,
-} from "antd";
-import { useNavigate, useParams } from "react-router-dom";
-import { Breadcrumb } from "../../components/Breadcrumb";
+import {Button, Card, Col, Descriptions, Image, Modal, Row, Space, Statistic, Tag, Typography,} from "antd";
+import {useNavigate, useParams} from "react-router-dom";
+import {Breadcrumb} from "../../components/Breadcrumb";
 import {
   BarChartOutlined,
   DeleteOutlined,
@@ -23,9 +11,9 @@ import {
   TeamOutlined,
   UserAddOutlined,
 } from "@ant-design/icons";
-import { useEffect, useState } from "react";
-import type { Event, FileEntity } from "../../types/event";
-import { EVENT_STATUS_COLORS, EVENT_TYPE_COLORS } from "../../types/event";
+import {useEffect, useState} from "react";
+import type {Event, FileEntity} from "../../types/event";
+import {EVENT_STATUS_COLORS, EVENT_TYPE_COLORS} from "../../types/event";
 import useApiService from "../../services/apiService.ts";
 import FileUploadButton from "./components/FileUploadButton.tsx";
 import FileListDisplay from "./components/FileListComponent.tsx";
@@ -37,8 +25,8 @@ export const EventDetails = () => {
   const { eventId } = useParams();
   const navigate = useNavigate();
   const [event, setEvent] = useState<Event | null>(null);
-  const { getEventById, deleteEvent, deleteFile, fileDownload, initiateSchematics } =
-    useApiService();
+  const {getEventById, deleteEvent, deleteFile, fileDownload, initiateSchematics} =
+      useApiService();
   const [deleteModalOpen, setDeleteModalOpen] = useState(false);
 
   useEffect(() => {
@@ -122,14 +110,14 @@ export const EventDetails = () => {
   }
 
   const imageFiles = event.fileEntities?.filter(
-    file => file.contentType === "image/png" || file.contentType === "image/jpeg"
+      file => file.contentType === "image/png" || file.contentType === "image/jpeg"
   );
 
   return (
     <div className="space-y-6">
       <Breadcrumb
         items={[
-          { path: "/events", label: "Events" },
+          {path: "/events", label: "Events"},
           { path: `/events/${eventId}`, label: event.name },
         ]}
       />
@@ -158,8 +146,8 @@ export const EventDetails = () => {
 
           <Modal
             title={
-              <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
-                <ExclamationCircleOutlined style={{ color: "#faad14" }} />
+              <div style={{display: "flex", alignItems: "center", gap: "8px"}}>
+                <ExclamationCircleOutlined style={{color: "#faad14"}}/>
                 Confirm Delete
               </div>
             }
@@ -173,7 +161,7 @@ export const EventDetails = () => {
             width={400}
           >
             <p>Are you sure you want to delete this event?</p>
-            <p style={{ color: "#8c8c8c", fontSize: "14px" }}>This action cannot be undone.</p>
+            <p style={{color: "#8c8c8c", fontSize: "14px"}}>This action cannot be undone.</p>
           </Modal>
         </Space>
       </div>
@@ -204,9 +192,9 @@ export const EventDetails = () => {
               <Descriptions.Item label="Type" span={3}>
                 <Tag color={EVENT_TYPE_COLORS[event.eventType]}>
                   {event.eventType
-                    .split("_")
+                      .split("_")
                     .map(word => word.charAt(0).toUpperCase() + word.slice(1))
-                    .join(" ")}
+                      .join(" ")}
                 </Tag>
               </Descriptions.Item>
               <Descriptions.Item label="Description" span={3}>
@@ -224,7 +212,7 @@ export const EventDetails = () => {
                       <Image
                         src={`http://localhost:8000/files/${file.fileId}`}
                         alt="Event Image"
-                        style={{ maxWidth: "200", maxHeight: "100", objectFit: "cover" }}
+                        style={{maxWidth: "200", maxHeight: "100", objectFit: "cover"}}
                       />
                     </Col>
                   ))}
@@ -262,13 +250,13 @@ export const EventDetails = () => {
           <Card title="Participants" className="mb-6">
             <Space direction="vertical" className="w-full">
               <Button
-                block
-                icon={<UserAddOutlined />}
-                onClick={() => navigate(`/events/${eventId}/manage-participants`)}
+                  block
+                  icon={<UserAddOutlined/>}
+                  onClick={() => navigate(`/events/${eventId}/manage-participants`)}
               >
                 Manage Participants
               </Button>
-              <Button block icon={<FileTextOutlined />}>
+              <Button block icon={<FileTextOutlined/>}>
                 Export Participants List
               </Button>
             </Space>
@@ -278,40 +266,40 @@ export const EventDetails = () => {
           <Card title="Seat Plan" className="mb-6">
             <Space direction="vertical" className="w-full">
               <Button
-                block
-                icon={<EditOutlined />}
-                onClick={() => {
-                  if (event?.schematics) {
-                    navigate(`/events/${eventId}/seat-plan/${event.schematics.id}`);
-                  } else {
-                    handleCreate();
-                  }
-                }}
+                  block
+                  icon={<EditOutlined/>}
+                  onClick={() => {
+                    if (event?.schematics) {
+                      navigate(`/events/${eventId}/seat-plan/${event.schematics.id}`);
+                    } else {
+                      handleCreate();
+                    }
+                  }}
               >
                 Manage Seat Plan
               </Button>
               {event.schematics?.overviewFileId && (
-                <div className="flex flex-row w-full">
-                  <div
-                    className="flex justify-center items-center mt-2"
-                    style={{
-                      background: "#f5f5f5",
-                      borderRadius: 4,
-                      width: 200,
-                      overflow: "hidden",
-                    }}
-                  >
-                    <Image
-                      src={`http://localhost:8000/files/${event.schematics?.overviewFileId}?t=${Date.now()}`}
-                      alt="Event Seat Plan Image"
-                      style={{
-                        width: "100%",
-                        height: "100%",
-                        objectFit: "cover",
-                      }}
-                    />
+                  <div className="flex flex-row w-full">
+                    <div
+                        className="flex justify-center items-center mt-2"
+                        style={{
+                          background: "#f5f5f5",
+                          borderRadius: 4,
+                          width: 200,
+                          overflow: "hidden",
+                        }}
+                    >
+                      <Image
+                          src={`http://localhost:8000/files/${event.schematics?.overviewFileId}?t=${Date.now()}`}
+                          alt="Event Seat Plan Image"
+                          style={{
+                            width: "100%",
+                            height: "100%",
+                            objectFit: "cover",
+                          }}
+                      />
+                    </div>
                   </div>
-                </div>
               )}
             </Space>
           </Card>
@@ -320,13 +308,13 @@ export const EventDetails = () => {
           <Card title="Seat Allocation" className="mb-6">
             <Space direction="vertical" className="w-full">
               <Button
-                block
-                icon={<EditOutlined />}
-                onClick={() => navigate(`/events/${eventId}/seat-allocation`)}
+                  block
+                  icon={<EditOutlined/>}
+                  onClick={() => navigate(`/events/${eventId}/seat-allocation`)}
               >
                 Manage Seat Allocation
               </Button>
-              <Button block icon={<FileTextOutlined />}>
+              <Button block icon={<FileTextOutlined/>}>
                 Export Seat Allocation
               </Button>
             </Space>
diff --git a/frontend/src/pages/Events/EventEdit.tsx b/frontend/src/pages/Events/EventEdit.tsx
index 3dcf278..6020e3f 100644
--- a/frontend/src/pages/Events/EventEdit.tsx
+++ b/frontend/src/pages/Events/EventEdit.tsx
@@ -12,12 +12,12 @@ import {
   Space,
   Typography,
 } from "antd";
-import { useNavigate, useParams } from "react-router-dom";
-import { Breadcrumb } from "../../components/Breadcrumb";
-import { useEffect, useState } from "react";
+import {useNavigate, useParams} from "react-router-dom";
+import {Breadcrumb} from "../../components/Breadcrumb";
+import {useEffect, useState} from "react";
 
-import type { Event } from "../../types/event";
-import { EVENT_TYPE_COLORS } from "../../types/event";
+import type {Event} from "../../types/event";
+import {EVENT_TYPE_COLORS} from "../../types/event";
 import dayjs from "dayjs";
 import useApiService from "../../services/apiService.ts";
 
@@ -29,7 +29,7 @@ export const EventEdit = () => {
   const navigate = useNavigate();
   const [form] = Form.useForm();
   const [loading, setLoading] = useState(false);
-  const [eventName, setEventName] = useState("");
+    const [eventName, setEventName] = useState("");
   const { getEventById, updateEvent } = useApiService();
 
   useEffect(() => {
@@ -49,13 +49,13 @@ export const EventEdit = () => {
     setLoading(true);
     try {
       // @ts-ignore
-      console.log("Form values:", { ...values, date: values.date.toISOString() });
+        console.log("Form values:", {...values, date: values.date.toISOString()});
       const result = await updateEvent(eventId!, values);
       if (result) {
         navigate(`/events/${eventId}`, { replace: true });
       }
     } catch (error) {
-      console.error("Error updating event:", error);
+        console.error("Error updating event:", error);
     } finally {
       setLoading(false);
     }
@@ -65,9 +65,9 @@ export const EventEdit = () => {
     <div className="space-y-6">
       <Breadcrumb
         items={[
-          { path: "/events", label: "Events" },
+            {path: "/events", label: "Events"},
           { path: `/events/${eventId}`, label: eventName },
-          { path: `/events/${eventId}/edit`, label: "Edit Event" },
+            {path: `/events/${eventId}/edit`, label: "Edit Event"},
         ]}
       />
 
@@ -89,7 +89,7 @@ export const EventEdit = () => {
                 <Descriptions.Item label="Event Name" span={3}>
                   <Form.Item
                     name="name"
-                    rules={[{ required: true, message: "Please enter event name" }]}
+                    rules={[{required: true, message: "Please enter event name"}]}
                     noStyle
                   >
                     <Input />
@@ -99,7 +99,7 @@ export const EventEdit = () => {
                 <Descriptions.Item label="Date" span={3}>
                   <Form.Item
                     name="date"
-                    rules={[{ required: true, message: "Please select event date" }]}
+                    rules={[{required: true, message: "Please select event date"}]}
                     noStyle
                   >
                     <DatePicker
@@ -114,7 +114,7 @@ export const EventEdit = () => {
                 <Descriptions.Item label="Address" span={3}>
                   <Form.Item
                     name="address"
-                    rules={[{ required: true, message: "Please enter event address" }]}
+                    rules={[{required: true, message: "Please enter event address"}]}
                     noStyle
                   >
                     <Input />
@@ -124,16 +124,16 @@ export const EventEdit = () => {
                 <Descriptions.Item label="Type" span={3}>
                   <Form.Item
                     name="eventType"
-                    rules={[{ required: true, message: "Please select event type" }]}
+                    rules={[{required: true, message: "Please select event type"}]}
                     noStyle
                   >
                     <Select
                       options={Object.entries(EVENT_TYPE_COLORS).map(([value]) => ({
                         value,
                         label: value
-                          .split("-")
+                            .split("-")
                           .map(word => word.charAt(0).toUpperCase() + word.slice(1))
-                          .join(" "),
+                            .join(" "),
                       }))}
                     />
                   </Form.Item>
@@ -143,7 +143,7 @@ export const EventEdit = () => {
                   <Form.Item
                     name="capacity"
                     label=""
-                    rules={[{ required: true, message: "Please enter event capacity" }]}
+                    rules={[{required: true, message: "Please enter event capacity"}]}
                     initialValue={1}
                     noStyle
                   >
@@ -154,7 +154,7 @@ export const EventEdit = () => {
                 <Descriptions.Item label="Description" span={3}>
                   <Form.Item
                     name="description"
-                    rules={[{ required: true, message: "Please enter event description" }]}
+                    rules={[{required: true, message: "Please enter event description"}]}
                     noStyle
                   >
                     <TextArea rows={4} />
diff --git a/frontend/src/pages/Events/EventParticipants.tsx b/frontend/src/pages/Events/EventParticipants.tsx
index 18da955..b42565c 100644
--- a/frontend/src/pages/Events/EventParticipants.tsx
+++ b/frontend/src/pages/Events/EventParticipants.tsx
@@ -1,22 +1,10 @@
-import {
-  Button,
-  Card,
-  Col,
-  Input,
-  InputNumber,
-  Modal,
-  Popconfirm,
-  Row,
-  Space,
-  Table,
-  Typography,
-} from "antd";
-import { useNavigate, useParams } from "react-router-dom";
-import { Breadcrumb } from "../../components/Breadcrumb";
-import { useEffect, useState } from "react";
+import {Button, Card, Col, Input, InputNumber, Modal, Popconfirm, Row, Space, Table, Typography,} from "antd";
+import {useNavigate, useParams} from "react-router-dom";
+import {Breadcrumb} from "../../components/Breadcrumb";
+import {useEffect, useState} from "react";
 import useApiService from "../../services/apiService";
-import { DeleteOutlined, UploadOutlined, UserAddOutlined } from "@ant-design/icons";
-import type { Employee, ParticipationDetails } from "types/employee.ts";
+import {DeleteOutlined, UploadOutlined, UserAddOutlined} from "@ant-design/icons";
+import type {Employee, ParticipationDetails} from "types/employee.ts";
 
 const { Title } = Typography;
 
@@ -28,13 +16,13 @@ export const EventParticipants = () => {
     getEmployees,
     addParticipant,
     updateParticipant,
-    deleteParticipation,
+      deleteParticipation,
   } = useApiService();
   const [participants, setParticipants] = useState([] as ParticipationDetails[]);
   const [allEmployees, setAllEmployees] = useState([] as Employee[]);
   const [addModalOpen, setAddModalOpen] = useState(false);
-  const [participantSearch, setParticipantSearch] = useState("");
-  const [employeeSearch, setEmployeeSearch] = useState("");
+    const [participantSearch, setParticipantSearch] = useState("");
+    const [employeeSearch, setEmployeeSearch] = useState("");
   const [employeeGuests, setEmployeeGuests] = useState<{ [id: string]: number }>({});
   const [importModalOpen, setImportModalOpen] = useState(false);
   const [importFile, setImportFile] = useState<File | null>(null);
@@ -45,7 +33,7 @@ export const EventParticipants = () => {
         const data = await getEventParticipants(eventId!);
         setParticipants(data ?? []);
       } catch (err) {
-        console.error("Failed to fetch participants of the event:", err);
+          console.error("Failed to fetch participants of the event:", err);
       }
     })();
   }, [eventId, getEventParticipants]);
@@ -56,7 +44,7 @@ export const EventParticipants = () => {
         const data = await getEmployees();
         setAllEmployees(data ?? []);
       } catch (err) {
-        console.error("Failed to fetch all employees in the system:", err);
+          console.error("Failed to fetch all employees in the system:", err);
       }
     })();
   }, [getEmployees]);
@@ -77,34 +65,34 @@ export const EventParticipants = () => {
     }
   };
 
-  const handleGuestsChange = async (
-    participationId: string,
-    values: {
-      guestCount: number;
-      eventId: string;
-      employeeId: string;
-    }
-  ) => {
+    const handleGuestsChange = async (
+        participationId: string,
+        values: {
+            guestCount: number;
+            eventId: string;
+            employeeId: string;
+        }
+    ) => {
     const participant = await updateParticipant(values);
     if (participant) {
-      setParticipants(prev =>
-        prev.map(p =>
-          p.id === participationId
-            ? {
-                ...p,
-                guestCount: values.guestCount ?? 0,
-              }
-            : p
-        )
-      );
+        setParticipants(prev =>
+            prev.map(p =>
+                p.id === participationId
+                    ? {
+                        ...p,
+                        guestCount: values.guestCount ?? 0,
+                    }
+                    : p
+            )
+        );
     }
   };
 
-  const handleAddParticipant = async (values: {
-    guestCount: number;
-    eventId: string;
-    employeeId: string;
-  }) => {
+    const handleAddParticipant = async (values: {
+        guestCount: number;
+        eventId: string;
+        employeeId: string;
+    }) => {
     const participant = await addParticipant(values);
     if (participant) {
       participants.push(participant);
@@ -120,34 +108,34 @@ export const EventParticipants = () => {
 
   const columns = [
     {
-      title: "Name",
-      dataIndex: "fullName",
-      key: "fullName",
-      sorter: (a: Employee, b: Employee) =>
-        (a.profile?.fullName ?? "").localeCompare(b.profile?.fullName ?? ""),
+        title: "Name",
+        dataIndex: "fullName",
+        key: "fullName",
+        sorter: (a: Employee, b: Employee) =>
+            (a.profile?.fullName ?? "").localeCompare(b.profile?.fullName ?? ""),
     },
-    { title: "Email", dataIndex: "email", key: "email" },
+      {title: "Email", dataIndex: "email", key: "email"},
     {
-      title: "Guests",
-      dataIndex: "guestCount",
-      key: "guestCount",
+        title: "Guests",
+        dataIndex: "guestCount",
+        key: "guestCount",
       render: (guestCount: number, participant: ParticipationDetails) => (
         <InputNumber
           min={0}
           value={guestCount}
           onChange={value =>
-            handleGuestsChange(participant.id, {
-              guestCount: value!,
-              eventId: eventId!,
-              employeeId: participant.employeeId,
-            })
+              handleGuestsChange(participant.id, {
+                  guestCount: value!,
+                  eventId: eventId!,
+                  employeeId: participant.employeeId,
+              })
           }
         />
       ),
     },
     {
-      title: "",
-      key: "actions",
+        title: "",
+        key: "actions",
       render: (_: never, record: ParticipationDetails) => (
         <Popconfirm
           placement="right"
@@ -156,9 +144,9 @@ export const EventParticipants = () => {
           cancelText="No"
           onConfirm={() => handleDelete(record.id)}
         >
-          <Button danger icon={<DeleteOutlined />}>
-            Delete{" "}
-          </Button>
+            <Button danger icon={<DeleteOutlined/>}>
+                Delete{" "}
+            </Button>
         </Popconfirm>
       ),
     },
@@ -168,9 +156,9 @@ export const EventParticipants = () => {
     <div className="space-y-6">
       <Breadcrumb
         items={[
-          { path: "/events", label: "Events" },
-          { path: `/events/${eventId}`, label: eventName || "Event" },
-          { path: `/events/${eventId}/manage-participants`, label: "Manage Participants" },
+            {path: "/events", label: "Events"},
+            {path: `/events/${eventId}`, label: eventName || "Event"},
+            {path: `/events/${eventId}/manage-participants`, label: "Manage Participants"},
         ]}
       />
 
@@ -208,16 +196,16 @@ export const EventParticipants = () => {
 
       <Modal
         width={{
-          xs: "90%",
-          sm: "80%",
-          md: "70%",
-          lg: "60%",
-          xl: "50%",
-          xxl: "40%",
+            xs: "90%",
+            sm: "80%",
+            md: "70%",
+            lg: "60%",
+            xl: "50%",
+            xxl: "40%",
         }}
         style={{
-          maxHeight: "70vh",
-          overflow: "auto",
+            maxHeight: "70vh",
+            overflow: "auto",
         }}
         centered
         title="Add Participants"
@@ -234,18 +222,18 @@ export const EventParticipants = () => {
         <Table
           rowKey={r => r.profile.id}
           columns={[
-            { title: "Name", dataIndex: ["profile", "fullName"], key: "fullName" },
-            { title: "Email", dataIndex: ["profile", "email"], key: "email" },
+              {title: "Name", dataIndex: ["profile", "fullName"], key: "fullName"},
+              {title: "Email", dataIndex: ["profile", "email"], key: "email"},
             {
-              title: "Guests",
-              dataIndex: "guestCount",
-              key: "guestCount",
+                title: "Guests",
+                dataIndex: "guestCount",
+                key: "guestCount",
               render: (guestCount: number, record: Employee) => (
                 <InputNumber
                   min={0}
                   value={employeeGuests[record.profile.id] ?? 0}
                   onChange={value =>
-                    setEmployeeGuests(prev => ({ ...prev, [record.profile.id]: value ?? 0 }))
+                      setEmployeeGuests(prev => ({...prev, [record.profile.id]: value ?? 0}))
                   }
                   style={{ width: 80 }}
                   disabled={participants.some(p => p.employeeId === record.profile.id)}
@@ -253,18 +241,18 @@ export const EventParticipants = () => {
               ),
             },
             {
-              title: "",
-              key: "actions",
+                title: "",
+                key: "actions",
               render: (_: any, record: Employee & { id: string }) => (
                 <Button
                   type="primary"
                   icon={<UserAddOutlined />}
                   onClick={() =>
-                    handleAddParticipant({
+                      handleAddParticipant({
                       guestCount: employeeGuests[record.profile.id],
-                      eventId: eventId!,
-                      employeeId: record.profile.id,
-                    })
+                          eventId: eventId!,
+                          employeeId: record.profile.id,
+                      })
                   }
                   disabled={participants.some(p => p.employeeId === record.profile.id)}
                 >
@@ -280,16 +268,16 @@ export const EventParticipants = () => {
 
       <Modal
         width={{
-          xs: "90%",
-          sm: "80%",
-          md: "70%",
-          lg: "60%",
-          xl: "50%",
-          xxl: "40%",
+            xs: "90%",
+            sm: "80%",
+            md: "70%",
+            lg: "60%",
+            xl: "50%",
+            xxl: "40%",
         }}
         style={{
-          maxHeight: "70vh",
-          overflow: "auto",
+            maxHeight: "70vh",
+            overflow: "auto",
         }}
         centered
         title="Import Participants"
@@ -307,7 +295,7 @@ export const EventParticipants = () => {
           onChange={e => setImportFile(e.target.files?.[0] || null)}
           className="mb-4"
         />
-        {importFile && <div className="mt-2 text-green-600">Selected file: {importFile.name}</div>}
+          {importFile && <div className="mt-2 text-green-600">Selected file: {importFile.name}</div>}
 
         <Input.Search
           placeholder="Search employees..."
@@ -318,18 +306,18 @@ export const EventParticipants = () => {
         <Table
           rowKey={r => r.profile.id}
           columns={[
-            { title: "Name", dataIndex: ["profile", "fullName"], key: "fullName" },
-            { title: "Email", dataIndex: ["profile", "email"], key: "email" },
+              {title: "Name", dataIndex: ["profile", "fullName"], key: "fullName"},
+              {title: "Email", dataIndex: ["profile", "email"], key: "email"},
             {
-              title: "Guests",
-              dataIndex: "guestCount",
-              key: "guestCount",
+                title: "Guests",
+                dataIndex: "guestCount",
+                key: "guestCount",
               render: (guestCount: number, record: Employee) => (
                 <InputNumber
                   min={0}
                   value={employeeGuests[record.profile.id] ?? 0}
                   onChange={value =>
-                    setEmployeeGuests(prev => ({ ...prev, [record.profile.id]: value ?? 0 }))
+                      setEmployeeGuests(prev => ({...prev, [record.profile.id]: value ?? 0}))
                   }
                   style={{ width: 80 }}
                   disabled={participants.some(p => p.employeeId === record.profile.id)}
@@ -337,18 +325,18 @@ export const EventParticipants = () => {
               ),
             },
             {
-              title: "",
-              key: "actions",
+                title: "",
+                key: "actions",
               render: (_: any, record: any) => (
                 <Button
                   type="primary"
                   icon={<UserAddOutlined />}
                   onClick={() =>
-                    handleAddParticipant({
-                      guestCount: record.guestCount,
-                      eventId: eventId,
-                      employeeId: record.profile.id,
-                    })
+                      handleAddParticipant({
+                          guestCount: record.guestCount,
+                          eventId: eventId,
+                          employeeId: record.profile.id,
+                      })
                   }
                   disabled={participants.some(p => p.employeeId === record.profile.id)}
                 >
diff --git a/frontend/src/pages/Events/EventSeatAllocation.tsx b/frontend/src/pages/Events/EventSeatAllocation.tsx
index bbc3e4f..83b6ba4 100644
--- a/frontend/src/pages/Events/EventSeatAllocation.tsx
+++ b/frontend/src/pages/Events/EventSeatAllocation.tsx
@@ -1,13 +1,13 @@
-import React, { useEffect, useState } from "react";
-import { Button, Card, Col, Row, Space, Typography, List, Avatar, message } from "antd";
-import { useNavigate, useParams } from "react-router-dom";
-import { Breadcrumb } from "../../components/Breadcrumb";
+import React, {useEffect, useState} from "react";
+import {Avatar, Button, Card, Col, List, message, Row, Space, Typography} from "antd";
+import {useNavigate, useParams} from "react-router-dom";
+import {Breadcrumb} from "../../components/Breadcrumb";
 import useApiService from "../../services/apiService";
-import { CanvasProvider, useCanvas } from "../../components/canvas/contexts/CanvasContext";
+import {CanvasProvider, useCanvas} from "../../components/canvas/contexts/CanvasContext";
 import KonvaCanvas from "../../components/canvas/KonvaCanvas";
-import type { ParticipationDetails } from "types/employee";
-import type { AppState } from "components/canvas/reducers/CanvasReducer";
-import { setState } from "../../components/canvas/actions/actions";
+import type {ParticipationDetails} from "types/employee";
+import type {AppState} from "components/canvas/reducers/CanvasReducer";
+import {setState} from "../../components/canvas/actions/actions";
 
 const { Title } = Typography;
 
@@ -15,113 +15,113 @@ type SchematicsType = { id: string; name: string; state: AppState } | null;
 
 // Main content component for seat allocation
 const SeatAllocationContent = ({
-  eventId,
-  eventName,
-  schematics,
-  participants,
-}: {
-  eventId: string;
-  eventName: string;
-  schematics: SchematicsType;
-  participants: ParticipationDetails[];
+                                   eventId,
+                                   eventName,
+                                   schematics,
+                                   participants,
+                               }: {
+    eventId: string;
+    eventName: string;
+    schematics: SchematicsType;
+    participants: ParticipationDetails[];
 }) => {
   const navigate = useNavigate();
-  const { state, dispatch } = useCanvas();
-  const [loading, setLoading] = useState(false);
-  const [unallocated, setUnallocated] = useState<ParticipationDetails[]>([]);
-  const { updateSchematics } = useApiService();
+    const {state, dispatch} = useCanvas();
+    const [loading, setLoading] = useState(false);
+    const [unallocated, setUnallocated] = useState<ParticipationDetails[]>([]);
+    const {updateSchematics} = useApiService();
 
-  // Calculate unallocated employees based on current seat assignment
+    // Calculate unallocated employees based on current seat assignment
   useEffect(() => {
-    if (!participants || !state) return;
-    const allocatedIds = new Set(
-      state.elements
-        ?.filter((e: any) => e.type === "chair" && e.employeeId)
-        .map((e: any) => e.employeeId)
-    );
-    setUnallocated(participants.filter(p => !allocatedIds.has(p.employeeId)));
+      if (!participants || !state) return;
+      const allocatedIds = new Set(
+          state.elements
+              ?.filter((e: any) => e.type === "chair" && e.employeeId)
+              .map((e: any) => e.employeeId)
+      );
+      setUnallocated(participants.filter(p => !allocatedIds.has(p.employeeId)));
   }, [participants, state]);
 
-  // Generate initial seat allocation: assign unallocated employees to empty chairs
-  const handleGenerate = () => {
-    if (!state || !participants) return;
-    const newElements = state.elements.map((el: any) => {
-      if (el.type === "chair") {
-        if (!el.employeeId) {
-          const next = participants.find(p => {
-            return !state.elements.some(
-              (e: any) => e.type === "chair" && e.employeeId === p.employeeId
-            );
-          });
-          if (next) {
-            return { ...el, employeeId: next.employeeId };
-          }
-        }
-      }
-      return el;
-    });
-    dispatch(setState({ ...state, elements: newElements }));
-    message.success("Initial allocation generated. You can drag and adjust!");
-  };
+    // Generate initial seat allocation: assign unallocated employees to empty chairs
+    const handleGenerate = () => {
+        if (!state || !participants) return;
+        const newElements = state.elements.map((el: any) => {
+            if (el.type === "chair") {
+                if (!el.employeeId) {
+                    const next = participants.find(p => {
+                        return !state.elements.some(
+                            (e: any) => e.type === "chair" && e.employeeId === p.employeeId
+                        );
+                    });
+                    if (next) {
+                        return {...el, employeeId: next.employeeId};
+                    }
+                }
+            }
+            return el;
+        });
+        dispatch(setState({...state, elements: newElements}));
+        message.success("Initial allocation generated. You can drag and adjust!");
+    };
 
-  // Save the current seat allocation to the backend
-  const handleSave = async () => {
-    if (!schematics || !state) return;
-    setLoading(true);
-    await updateSchematics(schematics.id, state, null as any);
-    setLoading(false);
-    message.success("Allocation saved!");
-  };
+    // Save the current seat allocation to the backend
+    const handleSave = async () => {
+        if (!schematics || !state) return;
+        setLoading(true);
+        await updateSchematics(schematics.id, state, null as any);
+        setLoading(false);
+        message.success("Allocation saved!");
+    };
 
   return (
     <div className="space-y-6">
-      {/* Breadcrumb navigation */}
+        {/* Breadcrumb navigation */}
       <Breadcrumb
         items={[
-          { path: "/events", label: "Events" },
-          { path: `/events/${eventId}`, label: eventName || "Event" },
-          { path: `/events/${eventId}/seat-allocation`, label: "Manage Seat Allocation" },
+            {path: "/events", label: "Events"},
+            {path: `/events/${eventId}`, label: eventName || "Event"},
+            {path: `/events/${eventId}/seat-allocation`, label: "Manage Seat Allocation"},
         ]}
       />
-      {/* Page title and action buttons */}
+        {/* Page title and action buttons */}
       <div className="flex justify-between items-center">
-        <Title level={2}>Seat Allocation</Title>
+          <Title level={2}>Seat Allocation</Title>
         <Space>
-          {/* Generate button on the left */}
-          <Button type="primary" onClick={handleGenerate} disabled={loading}>
-            Generate
-          </Button>
-          {/* Save button in the middle */}
-          <Button type="primary" onClick={handleSave} loading={loading}>
-            Save
-          </Button>
-          {/* Back to Event button on the right */}
+            {/* Generate button on the left */}
+            <Button type="primary" onClick={handleGenerate} disabled={loading}>
+                Generate
+            </Button>
+            {/* Save button in the middle */}
+            <Button type="primary" onClick={handleSave} loading={loading}>
+                Save
+            </Button>
+            {/* Back to Event button on the right */}
           <Button onClick={() => navigate(`/events/${eventId}`)}>Back to Event</Button>
         </Space>
       </div>
-      {/* Main content: seat map and unallocated employees list */}
+        {/* Main content: seat map and unallocated employees list */}
       <Row gutter={16}>
-        <Col span={18}>
-          <Card title="Seat Map (Drag to Adjust)" className="mb-6">
-            {/* Visual seat map, supports drag and drop if implemented in KonvaCanvas */}
-            <KonvaCanvas />
-          </Card>
-        </Col>
-        <Col span={6}>
-          <Card title="Unallocated Employees" className="mb-6">
-            {/* List of employees who are not yet assigned to any seat */}
-            <List
-              dataSource={unallocated}
-              renderItem={item => (
-                <List.Item>
-                  <List.Item.Meta
-                    avatar={<Avatar>{item.fullName?.[0]}</Avatar>}
-                    title={item.fullName}
-                    description={item.email}
+          <Col span={18}>
+              <Card title="Seat Map (Drag to Adjust)" className="mb-6">
+                  {/* Visual seat map, supports drag and drop if implemented in KonvaCanvas */}
+                  <KonvaCanvas/>
+              </Card>
+          </Col>
+          <Col span={6}>
+              <Card title="Unallocated Employees" className="mb-6">
+                  {/* List of employees who are not yet assigned to any seat */}
+                  <List
+                      dataSource={unallocated}
+                      renderItem={item => (
+                          <List.Item>
+                              <List.Item.Meta
+                                  avatar={<Avatar>{item.fullName?.[0]}</Avatar>}
+                                  title={item.fullName}
+                                  description={item.email}
+                              />
+                          </List.Item>
+                      )}
                   />
-                </List.Item>
-              )}
-            />
           </Card>
         </Col>
       </Row>
@@ -131,40 +131,40 @@ const SeatAllocationContent = ({
 
 // Main page component: fetches data and provides context
 export const EventSeatAllocation = () => {
-  const { eventId } = useParams();
-  const { getEventById, getEventParticipants, getSchematics } = useApiService();
-  const [eventName, setEventName] = useState("");
-  const [participants, setParticipants] = useState<ParticipationDetails[]>([]);
-  const [schematics, setSchematics] = useState<SchematicsType>(null);
-  const [loading, setLoading] = useState(false);
+    const {eventId} = useParams();
+    const {getEventById, getEventParticipants, getSchematics} = useApiService();
+    const [eventName, setEventName] = useState("");
+    const [participants, setParticipants] = useState<ParticipationDetails[]>([]);
+    const [schematics, setSchematics] = useState<SchematicsType>(null);
+    const [loading, setLoading] = useState(false);
 
-  // Fetch event info, participants, and seat map on mount
-  useEffect(() => {
-    (async () => {
-      if (!eventId) return;
-      setLoading(true);
-      const event = await getEventById(eventId);
-      if (event) setEventName(event.name);
-      const parts = await getEventParticipants(eventId);
-      setParticipants(parts || []);
-      if (event?.schematics?.id) {
-        const sch = await getSchematics(event.schematics.id);
-        setSchematics(sch || null);
-      }
-      setLoading(false);
-    })();
-  }, [eventId, getEventById, getEventParticipants, getSchematics]);
+    // Fetch event info, participants, and seat map on mount
+    useEffect(() => {
+        (async () => {
+            if (!eventId) return;
+            setLoading(true);
+            const event = await getEventById(eventId);
+            if (event) setEventName(event.name);
+            const parts = await getEventParticipants(eventId);
+            setParticipants(parts || []);
+            if (event?.schematics?.id) {
+                const sch = await getSchematics(event.schematics.id);
+                setSchematics(sch || null);
+            }
+            setLoading(false);
+        })();
+    }, [eventId, getEventById, getEventParticipants, getSchematics]);
 
-  if (!eventId || !schematics) return <div>Loading...</div>;
+    if (!eventId || !schematics) return <div>Loading...</div>;
 
-  return (
-    <CanvasProvider initialState={schematics.state}>
-      <SeatAllocationContent
-        eventId={eventId}
-        eventName={eventName}
-        schematics={schematics}
-        participants={participants}
-      />
-    </CanvasProvider>
-  );
+    return (
+        <CanvasProvider initialState={schematics.state}>
+            <SeatAllocationContent
+                eventId={eventId}
+                eventName={eventName}
+                schematics={schematics}
+                participants={participants}
+            />
+        </CanvasProvider>
+    );
 };
diff --git a/frontend/src/pages/Events/EventSeatPlan.tsx b/frontend/src/pages/Events/EventSeatPlan.tsx
index de3bd5d..0786a53 100644
--- a/frontend/src/pages/Events/EventSeatPlan.tsx
+++ b/frontend/src/pages/Events/EventSeatPlan.tsx
@@ -1,17 +1,17 @@
-import { Button, Card, Col, Row, Space, Typography } from "antd";
-import { useNavigate, useParams } from "react-router-dom";
-import { Breadcrumb } from "../../components/Breadcrumb";
-import { useEffect, useState } from "react";
+import {Button, Card, Col, Row, Space, Typography} from "antd";
+import {useNavigate, useParams} from "react-router-dom";
+import {Breadcrumb} from "../../components/Breadcrumb";
+import {useEffect, useState} from "react";
 import useApiService from "../../services/apiService";
 import KonvaCanvas from "../../components/canvas/KonvaCanvas";
-import { CanvasProvider } from "../../components/canvas/contexts/CanvasContext";
+import {CanvasProvider} from "../../components/canvas/contexts/CanvasContext";
 
 const { Title } = Typography;
 
 export const EventSeatPlan = () => {
   const { eventId } = useParams();
   const navigate = useNavigate();
-  const [eventName, setEventName] = useState("");
+    const [eventName, setEventName] = useState("");
   const { getEventById } = useApiService();
 
   useEffect(() => {
@@ -29,9 +29,9 @@ export const EventSeatPlan = () => {
     <div className="space-y-6">
       <Breadcrumb
         items={[
-          { path: "/events", label: "Events" },
-          { path: `/events/${eventId}`, label: eventName || "Event" },
-          { path: `/events/${eventId}/seat-plan`, label: "Manage Seat Plan" },
+            {path: "/events", label: "Events"},
+            {path: `/events/${eventId}`, label: eventName || "Event"},
+            {path: `/events/${eventId}/seat-plan`, label: "Manage Seat Plan"},
         ]}
       />
 
@@ -46,7 +46,7 @@ export const EventSeatPlan = () => {
         <Col span={24}>
           <Card className="mb-6">
             <CanvasProvider>
-              <KonvaCanvas />
+                <KonvaCanvas/>
             </CanvasProvider>
           </Card>
         </Col>
diff --git a/frontend/src/pages/Events/EventsList.tsx b/frontend/src/pages/Events/EventsList.tsx
index e27246b..e1982a3 100644
--- a/frontend/src/pages/Events/EventsList.tsx
+++ b/frontend/src/pages/Events/EventsList.tsx
@@ -13,21 +13,15 @@ import {
   Tag,
   Typography,
 } from "antd";
-import {
-  AppstoreOutlined,
-  EyeOutlined,
-  PlusOutlined,
-  SearchOutlined,
-  UnorderedListOutlined,
-} from "@ant-design/icons";
-import { useNavigate } from "react-router-dom";
-import { useEffect, useMemo, useState } from "react";
-import { Breadcrumb } from "../../components/Breadcrumb";
-import type { ColumnsType } from "antd/es/table";
-import type { Dayjs } from "dayjs";
+import {AppstoreOutlined, EyeOutlined, PlusOutlined, SearchOutlined, UnorderedListOutlined,} from "@ant-design/icons";
+import {useNavigate} from "react-router-dom";
+import {useEffect, useMemo, useState} from "react";
+import {Breadcrumb} from "../../components/Breadcrumb";
+import type {ColumnsType} from "antd/es/table";
+import type {Dayjs} from "dayjs";
 import dayjs from "dayjs";
-import type { Event, EventStatus, EventType, FileEntity } from "../../types/event";
-import { EVENT_STATUS_COLORS, EVENT_TYPE_COLORS } from "../../types/event";
+import type {Event, EventStatus, EventType, FileEntity} from "../../types/event";
+import {EVENT_STATUS_COLORS, EVENT_TYPE_COLORS} from "../../types/event";
 import useApiService from "../../services/apiService.ts";
 import "./carousel_arrows.css";
 
@@ -61,7 +55,7 @@ export const EventsList = () => {
     return events.filter(event => {
       // Search text filter
       const matchesSearch =
-        searchText === "" ||
+          searchText === "" ||
         event.name.toLowerCase().includes(searchText.toLowerCase()) ||
         event.address.toLowerCase().includes(searchText.toLowerCase());
 
@@ -102,13 +96,13 @@ export const EventsList = () => {
       key: "eventType",
       width: "14%",
       render: (type: EventType) => (
-        <Tag color={EVENT_TYPE_COLORS[type]}>
-          {type
-            .split("_")
-            .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
-            .join(" ")
-            .toUpperCase()}
-        </Tag>
+          <Tag color={EVENT_TYPE_COLORS[type]}>
+            {type
+                .split("_")
+                .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+                .join(" ")
+                .toUpperCase()}
+          </Tag>
       ),
       filters: Object.entries(EVENT_TYPE_COLORS).map(([type, _]) => ({
         text: type.replace(/_/g, " "),
@@ -162,7 +156,7 @@ export const EventsList = () => {
 
   return (
     <div>
-      <Breadcrumb items={[{ path: "/events", label: "Events" }]} />
+      <Breadcrumb items={[{path: "/events", label: "Events"}]}/>
 
       <div className="flex justify-between items-center mb-6">
         <Title level={2} className="m-0">
@@ -170,15 +164,15 @@ export const EventsList = () => {
         </Title>
         <div className="flex items-center gap-4">
           <Space>
-            <UnorderedListOutlined className={isTableView ? "text-blue-500" : "text-gray-400"} />
+            <UnorderedListOutlined className={isTableView ? "text-blue-500" : "text-gray-400"}/>
             <Switch
               checked={!isTableView}
               onChange={checked => setIsTableView(!checked)}
               className="bg-gray-200"
             />
-            <AppstoreOutlined className={!isTableView ? "text-blue-500" : "text-gray-400"} />
+            <AppstoreOutlined className={!isTableView ? "text-blue-500" : "text-gray-400"}/>
           </Space>
-          <Button type="primary" icon={<PlusOutlined />} onClick={() => navigate("/events/create")}>
+          <Button type="primary" icon={<PlusOutlined/>} onClick={() => navigate("/events/create")}>
             Create Event
           </Button>
         </div>
@@ -198,22 +192,22 @@ export const EventsList = () => {
           <Col span={8}>
             <Select
               placeholder="Event Type"
-              style={{ width: "100%" }}
+              style={{width: "100%"}}
               allowClear
               value={selectedType}
               onChange={setSelectedType}
               options={Object.entries(EVENT_TYPE_COLORS).map(([value]) => ({
                 value,
                 label: value
-                  .split("_")
+                    .split("_")
                   .map(word => word.charAt(0).toUpperCase() + word.slice(1))
-                  .join(" "),
+                    .join(" "),
               }))}
             />
           </Col>
           <Col span={8}>
             <RangePicker
-              style={{ width: "100%" }}
+                style={{width: "100%"}}
               value={dateRange}
               onChange={dates => setDateRange(dates)}
             />
@@ -256,14 +250,14 @@ export const EventsList = () => {
                             {(() => {
                               const filteredImages = event.fileEntities?.filter(
                                 (file: FileEntity) =>
-                                  file.contentType === "image/png" ||
-                                  file.contentType === "image/jpeg"
+                                    file.contentType === "image/png" ||
+                                    file.contentType === "image/jpeg"
                               );
                               if (filteredImages && filteredImages.length > 0) {
                                 return (
                                   <Carousel dots={false} arrows={filteredImages.length > 1}>
                                     {filteredImages.map((file: FileEntity) => (
-                                      <div key={file.fileId} className="px-8">
+                                        <div key={file.fileId} className="px-8">
                                         <Card>
                                           <img
                                             src={`http://localhost:8000/files/${file.fileId}`}
diff --git a/frontend/src/pages/Events/carousel_arrows.css b/frontend/src/pages/Events/carousel_arrows.css
index 140c98d..06b2edc 100644
--- a/frontend/src/pages/Events/carousel_arrows.css
+++ b/frontend/src/pages/Events/carousel_arrows.css
@@ -1,14 +1,14 @@
 .slick-prev,
 .slick-next {
-  z-index: 1;
-  opacity: 1 !important;
-  font-size: 24px !important;
-  color: black !important;
+    z-index: 1;
+    opacity: 1 !important;
+    font-size: 24px !important;
+    color: black !important;
 }
 
 .slick-prev:before,
 .slick-next:before {
-  opacity: 1 !important;
-  color: black !important;
-  font-size: 28px;
+    opacity: 1 !important;
+    color: black !important;
+    font-size: 28px;
 }
diff --git a/frontend/src/pages/Events/components/FileListComponent.tsx b/frontend/src/pages/Events/components/FileListComponent.tsx
index e47c0fa..0426140 100644
--- a/frontend/src/pages/Events/components/FileListComponent.tsx
+++ b/frontend/src/pages/Events/components/FileListComponent.tsx
@@ -1,7 +1,7 @@
 import React from "react";
-import { Button, List, Popconfirm, Space, Typography } from "antd";
-import { DeleteOutlined, DownloadOutlined } from "@ant-design/icons";
-import type { FileEntity } from "types/event.ts";
+import {Button, List, Popconfirm, Space, Typography} from "antd";
+import {DeleteOutlined, DownloadOutlined} from "@ant-design/icons";
+import type {FileEntity} from "types/event.ts";
 
 const { Text } = Typography;
 
@@ -12,25 +12,25 @@ const FileListDisplay: React.FC<FileListDisplayProps> = ({ files, onDelete, onDo
         dataSource={files}
         bordered
         size="small"
-        locale={{ emptyText: "No files available." }}
+        locale={{emptyText: "No files available."}}
         renderItem={file => (
           <List.Item
             actions={[
               <Space>
                 <Button icon={<DownloadOutlined />} onClick={() => onDownload(file)} />
-                <Popconfirm
-                  placement="right"
-                  title="Are you sure you want to delete this file?"
-                  okText="Yes"
-                  cancelText="No"
-                  onConfirm={() => onDelete(file.fileId)}
-                >
-                  <Button danger icon={<DeleteOutlined />} />
-                </Popconfirm>
+                  <Popconfirm
+                      placement="right"
+                      title="Are you sure you want to delete this file?"
+                      okText="Yes"
+                      cancelText="No"
+                      onConfirm={() => onDelete(file.fileId)}
+                  >
+                      <Button danger icon={<DeleteOutlined/>}/>
+                  </Popconfirm>
               </Space>,
             ]}
           >
-            <Text ellipsis>{file.name}</Text>
+              <Text ellipsis>{file.name}</Text>
           </List.Item>
         )}
       />
@@ -41,7 +41,7 @@ const FileListDisplay: React.FC<FileListDisplayProps> = ({ files, onDelete, onDo
 export default FileListDisplay;
 
 interface FileListDisplayProps {
-  files: FileEntity[];
-  onDelete: (fileId: string) => void;
-  onDownload: (file: FileEntity) => void;
+    files: FileEntity[];
+    onDelete: (fileId: string) => void;
+    onDownload: (file: FileEntity) => void;
 }
diff --git a/frontend/src/pages/Events/components/FileUploadButton.tsx b/frontend/src/pages/Events/components/FileUploadButton.tsx
index 007e69d..96d955e 100644
--- a/frontend/src/pages/Events/components/FileUploadButton.tsx
+++ b/frontend/src/pages/Events/components/FileUploadButton.tsx
@@ -1,6 +1,6 @@
-import { useState } from "react";
-import { Button, message, Upload } from "antd";
-import { UploadOutlined } from "@ant-design/icons";
+import {useState} from "react";
+import {Button, message, Upload} from "antd";
+import {UploadOutlined} from "@ant-design/icons";
 import useApiService from "../../../services/apiService.ts";
 import toast from "react-hot-toast";
 
@@ -11,7 +11,7 @@ const FileUploadButton = ({ eventId, onUpload }) => {
 
   const handleBeforeUpload = file => {
     if (file.size > 10 * 1024 * 1024) {
-      toast.error("File size exceeds 10 MB");
+        toast.error("File size exceeds 10 MB");
       return false;
     }
     setFile(file);
@@ -20,20 +20,20 @@ const FileUploadButton = ({ eventId, onUpload }) => {
 
   const handleUpload = async () => {
     if (!file) {
-      message.warning("Please select a file first");
+        message.warning("Please select a file first");
       return;
     }
 
     const formData = new FormData();
-    formData.append("file", file);
-    formData.append("eventId", eventId);
+      formData.append("file", file);
+      formData.append("eventId", eventId);
 
     try {
       setUploading(true);
       const uploadedFile = await fileUpload(formData);
       onUpload(uploadedFile);
     } catch (error) {
-      message.error("Upload failed");
+        message.error("Upload failed");
     } finally {
       setUploading(false);
       setFile(null);
diff --git a/frontend/src/pages/Login.tsx b/frontend/src/pages/Login.tsx
index f68a255..135027f 100644
--- a/frontend/src/pages/Login.tsx
+++ b/frontend/src/pages/Login.tsx
@@ -1,7 +1,7 @@
-import { useState } from "react";
-import { useNavigate } from "react-router-dom";
-import { Button, Card, message } from "antd";
-import { useAuth } from "../contexts/AuthContext";
+import {useState} from "react";
+import {useNavigate} from "react-router-dom";
+import {Button, Card, message} from "antd";
+import {useAuth} from "../contexts/AuthContext";
 import logo from "../assets/itestra_logo.png";
 
 export const Login = () => {
@@ -13,7 +13,7 @@ export const Login = () => {
 
   const onVisitorLogin = async () => {
     setIsLoading(true);
-    const values = { email: "", name: "Visitor", roles: ["VISITOR"] };
+    const values = {email: "", name: "Visitor", roles: ["VISITOR"]};
     try {
       await login(values);
       message.success("Welcome!");
@@ -27,14 +27,14 @@ export const Login = () => {
 
   return (
     <div className="min-h-screen flex items-center justify-center bg-gray-50">
-      <Card className="w-1/5 h-1/3 shadow-lg">
+      <Card className="w-1/5 h-2/5 shadow-lg">
         <div className="flex flex-col items-center space-y-6">
           <img src={logo} alt="Company Logo" className="w-28 h-28 object-contain" />
           <Button
             type="primary"
             className="w-48"
             onClick={() =>
-              (window.location.href = "http://localhost:8000/oauth2/authorization/gitlab")
+                (window.location.href = "http://localhost:8000/oauth2/authorization/gitlab")
             }
           >
             Employee Login
diff --git a/frontend/src/pages/LoginSuccess.tsx b/frontend/src/pages/LoginSuccess.tsx
index 7c4273b..070ff8f 100644
--- a/frontend/src/pages/LoginSuccess.tsx
+++ b/frontend/src/pages/LoginSuccess.tsx
@@ -1,7 +1,7 @@
-import { useLocation, useNavigate } from "react-router-dom";
-import { message } from "antd";
-import { useAuth } from "../contexts/AuthContext";
-import { useEffect } from "react";
+import {useLocation, useNavigate} from "react-router-dom";
+import {message} from "antd";
+import {useAuth} from "../contexts/AuthContext";
+import {useEffect} from "react";
 import useApiService from "../services/apiService";
 
 export const LoginSuccess = () => {
@@ -10,24 +10,24 @@ export const LoginSuccess = () => {
   const { login, isAuthenticated } = useAuth();
   const { getOwnProfile } = useApiService();
 
-  const from = (location.state as { from?: { pathname: string } })?.from?.pathname || "/dashboard";
+    const from = (location.state as { from?: { pathname: string } })?.from?.pathname || "/dashboard";
 
   useEffect(() => {
     const doLogin = async () => {
       const ownProfile = await getOwnProfile();
 
       const values = {
-        name: ownProfile!.fullName || "",
-        email: ownProfile!.email || "",
+          name: ownProfile!.fullName || "",
+          email: ownProfile!.email || "",
         roles: ownProfile!.authorities || [],
       };
 
       try {
         await login(values);
-        message.success("Welcome!");
+          message.success("Welcome!");
         navigate(from, { replace: true });
       } catch (err) {
-        message.error("Login failed");
+          message.error("Login failed");
         console.error(err);
       }
     };
diff --git a/frontend/src/pages/NotFound.tsx b/frontend/src/pages/NotFound.tsx
index 18d1643..1df1242 100644
--- a/frontend/src/pages/NotFound.tsx
+++ b/frontend/src/pages/NotFound.tsx
@@ -1,5 +1,5 @@
-import { Button, Result } from "antd";
-import { useNavigate } from "react-router-dom";
+import {Button, Result} from "antd";
+import {useNavigate} from "react-router-dom";
 
 export const NotFound = () => {
   const navigate = useNavigate();
@@ -10,7 +10,7 @@ export const NotFound = () => {
       title="404"
       subTitle="Sorry, the page you visited does not exist."
       extra={
-        <Button type="primary" onClick={() => navigate("/")}>
+          <Button type="primary" onClick={() => navigate("/")}>
           Back to Home
         </Button>
       }
diff --git a/frontend/src/routes/routes.tsx b/frontend/src/routes/routes.tsx
index 75c9858..d1065c9 100644
--- a/frontend/src/routes/routes.tsx
+++ b/frontend/src/routes/routes.tsx
@@ -1,39 +1,39 @@
-import type { RouteObject } from "react-router-dom";
-import { createBrowserRouter } from "react-router-dom";
-import { ProtectedRoute } from "../components/ProtectedRoute";
-import { AppContainer } from "../components/AppContainer";
-import { Login } from "../pages/Login";
-import { Dashboard } from "../pages/Dashboard";
-import { EventsList } from "../pages/Events/EventsList";
-import { EventDetails } from "../pages/Events/EventDetails";
-import { EventEdit } from "../pages/Events/EventEdit";
-import { EventCreate } from "../pages/Events/EventCreate";
-import { EmployeesList } from "../pages/Employees/EmployeesList";
-import { LoginSuccess } from "../pages/LoginSuccess.tsx";
-import { EmployeeDetails } from "../pages/Employees/EmployeeDetails";
-import { NotFound } from "../pages/NotFound";
-import { CanvasProvider } from "../components/canvas/contexts/CanvasContext.tsx";
+import type {RouteObject} from "react-router-dom";
+import {createBrowserRouter} from "react-router-dom";
+import {ProtectedRoute} from "../components/ProtectedRoute";
+import {AppContainer} from "../components/AppContainer";
+import {Login} from "../pages/Login";
+import {Dashboard} from "../pages/Dashboard";
+import {EventsList} from "../pages/Events/EventsList";
+import {EventDetails} from "../pages/Events/EventDetails";
+import {EventEdit} from "../pages/Events/EventEdit";
+import {EventCreate} from "../pages/Events/EventCreate";
+import {EmployeesList} from "../pages/Employees/EmployeesList";
+import {LoginSuccess} from "../pages/LoginSuccess.tsx";
+import {EmployeeDetails} from "../pages/Employees/EmployeeDetails";
+import {NotFound} from "../pages/NotFound";
+import {CanvasProvider} from "../components/canvas/contexts/CanvasContext.tsx";
 import KonvaCanvas from "../components/canvas/KonvaCanvas.tsx";
-import { EventParticipants } from "../pages/Events/EventParticipants.tsx";
-import { EventSeatPlan } from "../pages/Events/EventSeatPlan.tsx";
-import { EventSeatAllocation } from "../pages/Events/EventSeatAllocation.tsx";
-import { EmployeeEdit } from "../pages/Employees/EmployeeEdit";
-import { EmployeeCreate } from "../pages/Employees/EmployeeCreate";
+import {EventParticipants} from "../pages/Events/EventParticipants.tsx";
+import {EventSeatPlan} from "../pages/Events/EventSeatPlan.tsx";
+import {EventSeatAllocation} from "../pages/Events/EventSeatAllocation.tsx";
+import {EmployeeEdit} from "../pages/Employees/EmployeeEdit";
+import {EmployeeCreate} from "../pages/Employees/EmployeeCreate";
 
 const routes: RouteObject[] = [
   // Public routes
   {
-    path: "/login",
+      path: "/login",
     element: <Login />,
   },
   {
-    path: "/login_success",
+      path: "/login_success",
     element: <LoginSuccess />,
   },
 
   // Protected routes with layout
   {
-    path: "/",
+      path: "/",
     element: (
       <ProtectedRoute>
         <AppContainer />
@@ -45,68 +45,68 @@ const routes: RouteObject[] = [
         element: <Dashboard />,
       },
       {
-        path: "dashboard",
+          path: "dashboard",
         element: <Dashboard />,
       },
       {
-        path: "events",
+          path: "events",
         element: <EventsList />,
       },
       {
-        path: "events/create",
+          path: "events/create",
         element: <EventCreate />,
       },
       {
-        path: "events/:eventId",
+          path: "events/:eventId",
         element: <EventDetails />,
       },
       {
-        path: "events/:eventId/edit",
+          path: "events/:eventId/edit",
         element: <EventEdit />,
       },
       {
-        path: "events/:eventId/manage-participants",
+          path: "events/:eventId/manage-participants",
         element: <EventParticipants />,
       },
       {
-        path: "events/:eventId/seat-plan/:schematicsId",
+          path: "events/:eventId/seat-plan/:schematicsId",
         element: <EventSeatPlan />,
       },
       {
-        path: "events/:eventId/seat-allocation",
+          path: "events/:eventId/seat-allocation",
         element: <EventSeatAllocation />,
       },
       {
-        path: "employees",
+          path: "employees",
         element: <EmployeesList />,
       },
       {
-        path: "employees/new",
+          path: "employees/new",
         element: <EmployeeCreate />,
       },
       {
-        path: "employees/:employeeId",
+          path: "employees/:employeeId",
         element: <EmployeeDetails />,
       },
       // TODO: Unnecessary route, remove it
       {
-        path: "employees/:employeeId/edit",
+          path: "employees/:employeeId/edit",
         element: <EmployeeEdit />,
       },
       {
-        path: "canvas/:schematicsId",
-        element: (
-          <CanvasProvider>
-            <KonvaCanvas />
-          </CanvasProvider>
-        ),
+          path: "canvas/:schematicsId",
+          element: (
+              <CanvasProvider>
+                  <KonvaCanvas/>
+              </CanvasProvider>
+          ),
       },
     ],
   },
 
   // Not found route
   {
-    path: "*",
+      path: "*",
     element: <NotFound />,
   },
 ];
diff --git a/frontend/src/services/apiService.ts b/frontend/src/services/apiService.ts
index 11486a2..381d885 100644
--- a/frontend/src/services/apiService.ts
+++ b/frontend/src/services/apiService.ts
@@ -1,471 +1,463 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 
-import type { Employee, ParticipationDetails, Profile } from "types/employee.ts";
-import type { Event, FileEntity, SchematicsEntity } from "types/event.ts";
+import type {Employee, ParticipationDetails, Profile} from "types/employee.ts";
+import type {Event, FileEntity, SchematicsEntity} from "types/event.ts";
 import toast from "react-hot-toast";
-import React, { useCallback } from "react";
-import { useAuth } from "../contexts/AuthContext.tsx";
-import type { AppState } from "components/canvas/reducers/CanvasReducer.tsx";
+import React, {useCallback} from "react";
+import {useAuth} from "../contexts/AuthContext.tsx";
+import type {AppState} from "components/canvas/reducers/CanvasReducer.tsx";
 import Konva from "konva";
+import {handleExport} from "../components/canvas/elements/Toolbox.tsx";
 
 const BASE_URL = "http://localhost:8000";
 
 export default function useApiService() {
-  const { logout } = useAuth();
-
-  const request = useCallback(
-    async <T = never>(endpoint: string, options: RequestInit = {}): Promise<T> => {
-      const url = `${BASE_URL}${endpoint}`;
-
-      const isFormData = options.body instanceof FormData;
-
-      const config: RequestInit = {
-        headers: {
-          ...(isFormData ? {} : { "Content-Type": "application/json" }),
-          ...(options.headers || {}),
+    const {logout} = useAuth();
+
+    const request = useCallback(
+        async <T = never>(endpoint: string, options: RequestInit = {}): Promise<T> => {
+            const url = `${BASE_URL}${endpoint}`;
+
+            const isFormData = options.body instanceof FormData;
+
+            const config: RequestInit = {
+                headers: {
+                    ...(isFormData ? {} : {"Content-Type": "application/json"}),
+                    ...(options.headers || {}),
+                },
+                credentials: "include",
+                ...options,
+            };
+
+            let response: Response;
+
+            try {
+                response = await fetch(url, config);
+            } catch (error) {
+                console.error("API request failed:", error);
+                throw error;
+            }
+
+            if (response.status === 400) {
+                toast.error(await response.text());
+                throw new Error("Bad request");
+            } else if (response.status === 401) {
+                toast.error("Access denied. You are logged out.");
+                logout();
+                throw new Error("Access denied. You are logged out.");
+            } else if (response.status === 403) {
+                toast.error("Access denied. You don't have permission for this action.");
+                throw new Error("Access denied. You don't have permission for this action.");
+            } else if (response.status >= 500 || response.status === 409) {
+                const errorMessage = await response.text();
+                toast.error(errorMessage);
+                throw new Error("Server error. Please try again later.");
+            }
+
+            const contentType = response.headers.get("Content-Type") ?? "";
+
+            if (contentType.includes("application/json")) {
+                return (await response.json()) as T;
+            }
+
+            if (
+                contentType.includes("application/octet-stream") ||
+                contentType.startsWith("application/") ||
+                contentType.startsWith("image/") ||
+                contentType.startsWith("video/")
+            ) {
+                return (await response.blob()) as T;
+            }
+
+            return (await response.text()) as unknown as T;
         },
-        credentials: "include",
-        ...options,
-      };
-
-      let response: Response;
-
-      try {
-        response = await fetch(url, config);
-      } catch (error) {
-        console.error("API request failed:", error);
-        throw error;
-      }
-
-      if (response.status === 400) {
-        toast.error(await response.text());
-        throw new Error("Bad request");
-      } else if (response.status === 401) {
-        toast.error("Access denied. You are logged out.");
-        logout();
-        throw new Error("Access denied. You are logged out.");
-      } else if (response.status === 403) {
-        toast.error("Access denied. You don't have permission for this action.");
-        throw new Error("Access denied. You don't have permission for this action.");
-      } else if (response.status >= 500 || response.status === 409) {
-        const errorMessage = await response.text();
-        toast.error(errorMessage);
-        throw new Error("Server error. Please try again later.");
-      }
-
-      const contentType = response.headers.get("Content-Type") ?? "";
-
-      if (contentType.includes("application/json")) {
-        return (await response.json()) as T;
-      }
-
-      if (
-        contentType.includes("application/octet-stream") ||
-        contentType.startsWith("application/") ||
-        contentType.startsWith("image/") ||
-        contentType.startsWith("video/")
-      ) {
-        return (await response.blob()) as T;
-      }
-
-      return (await response.text()) as unknown as T;
-    },
-    [logout]
-  );
-
-  const logoutRequest = useCallback(async () => {
-    return await request(`/profile/logout`, {
-      method: "POST",
-    });
-  }, [request]);
-
-  const getOwnProfile = useCallback(async (): Promise<Profile> => {
-    return await request<Profile>("/profile/own");
-  }, [request]);
-
-  const getEventById = useCallback(
-    async (id: string): Promise<Event | null> => {
-      try {
-        return await request<Event>(`/events/${id}`);
-      } catch (error) {
-        console.error(`Failed to fetch event with ID ${id}:`, error);
-        return null;
-      }
-    },
-    [request]
-  );
-
-  const getEvents = useCallback(async (): Promise<Event[] | null> => {
-    try {
-      return await request<Event[]>(`/events/all`);
-    } catch (error) {
-      console.error(`Failed to fetch events:`, error);
-      return null;
-    }
-  }, [request]);
-
-  const createEvent = useCallback(
-    async (eventData: Event): Promise<Event | null> => {
-      try {
-        const response = await request<Event>("/events", {
-          method: "POST",
-          body: JSON.stringify(eventData),
-        });
-        toast.success("Event created successfully!");
-        return response;
-      } catch (error) {
-        console.error("Failed to create event", error);
-        return null;
-      }
-    },
-    [request]
-  );
-
-  const updateEvent = useCallback(
-    async (id: string, eventData: Event): Promise<Event | null> => {
-      try {
-        const response = await request<Event>(`/events/${id}`, {
-          method: "PUT",
-          body: JSON.stringify(eventData),
-        });
-        toast.success("Event edited successfully!");
-        return response;
-      } catch (error) {
-        console.error("Failed to update event", error);
-        return null;
-      }
-    },
-    [request]
-  );
-
-  const deleteEvent = useCallback(
-    async (id: string) => {
-      try {
-        const response = await request(`/events/${id}`, {
-          method: "DELETE",
-        });
-        toast.success("Event is deleted successfully!");
-        return response;
-      } catch (err) {
-        toast.error("Event deletion failed");
-      }
-    },
-    [request]
-  );
-
-  const fileUpload = useCallback(
-    async (formData: FormData) => {
-      try {
-        const response = await request<string>("/files/upload", {
-          method: "POST",
-          body: formData,
-        });
-        toast.success("File upload is successful!");
-        return response;
-      } catch (err) {
-        toast.error("File upload failed");
-      }
-    },
-    [request]
-  );
-
-  const fileDownload = useCallback(
-    async (file: FileEntity) => {
-      try {
-        const blob = await request<Blob>(`/files/${file.fileId}`);
-
-        const url = window.URL.createObjectURL(blob);
-        const link = document.createElement("a");
-        link.href = url;
-        link.setAttribute("download", file.name);
-        document.body.appendChild(link);
-        link.click();
-        link.remove();
-        window.URL.revokeObjectURL(url);
-      } catch (err) {
-        console.error(err);
-        toast.error("Failed to download file");
-      }
-    },
-    [request]
-  );
-
-  const deleteFile = useCallback(
-    async (id: string) => {
-      try {
-        const response = await request(`/files/${id}`, {
-          method: "DELETE",
-        });
-        toast.success("File is deleted successfully!");
-        return response;
-      } catch (err) {
-        toast.error("File deletion failed");
-      }
-    },
-    [request]
-  );
-
-  const getSchematics = useCallback(
-    async (id: string) => {
-      try {
-        return await request<{ id: string; name: string; state: AppState }>(`/schematics/${id}`);
-      } catch (err) {
-        toast.error("Schematics fetch failed");
-      }
-    },
-    [request]
-  );
-
-  const initiateSchematics = useCallback(
-    async (eventId: string): Promise<SchematicsEntity | null> => {
-      try {
-        const response = await request(`/schematics`, {
-          method: "POST",
-          body: JSON.stringify({
-            eventId: eventId,
-            state: JSON.stringify({
-              buildMode: 0,
-              elements: [],
-              groups: [],
-              canvasPosition: { x: 0, y: 0 },
-              scale: 1,
-            } as AppState),
-          }),
-        });
-        toast.success("Schematics saved successfully!");
-        return response;
-      } catch (err) {
-        toast.error("Schematics save failed");
-        return null;
-      }
-    },
-    [request]
-  );
-
-  const updateSchematics = useCallback(
-    async (
-      id: string,
-      canvasState: AppState,
-      stageRef: React.RefObject<Konva.Stage | null>
-    ): Promise<SchematicsEntity | null> => {
-      try {
-        const response = await request(`/schematics/${id}`, {
-          method: "PUT",
-          body: JSON.stringify({
-            state: JSON.stringify(canvasState),
-          }),
-        });
-        if (stageRef && stageRef!.current) {
-          const dataUrl = stageRef!.current!.toDataURL({ pixelRatio: 2 });
-          const arr = dataUrl.split(",");
-          const mime = arr[0].match(/:(.*?);/)![1];
-          const bstr = atob(arr[1]);
-          let n = bstr.length;
-          const u8arr = new Uint8Array(n);
-
-          while (n--) {
-            u8arr[n] = bstr.charCodeAt(n);
-          }
-
-          const file = new File([u8arr], id, { type: mime });
-
-          const formData = new FormData();
-          formData.append("file", file);
-          formData.append("schematicsId", id);
-          await fileUpload(formData);
-        }
+        [logout]
+    );
 
-        toast.success("Schematics saved successfully!");
-        return response;
-      } catch (err) {
-        toast.error("Schematics save failed");
-        return null;
-      }
-    },
-    [fileUpload, request]
-  );
-
-  const deleteSchematics = useCallback(
-    async (id: string) => {
-      try {
-        const response = await request(`/schematics/${id}`, {
-          method: "DELETE",
-        });
-        toast.success("Schematics is deleted successfully!");
-        return response;
-      } catch (err) {
-        toast.error("Schematics deletion failed");
-      }
-    },
-    [request]
-  );
-
-  const getEmployeeById = useCallback(
-    async (id: string) => {
-      try {
-        return await request<Employee>(`/profile/employee/${id}`);
-      } catch (err) {
-        toast.error("Employee fetch failed");
-      }
-    },
-    [request]
-  );
-
-  const getEmployees = useCallback(async () => {
-    try {
-      return await request<Employee[]>(`/profile/employees`);
-    } catch (err) {
-      toast.error("Employee fetch all operation failed");
-    }
-  }, [request]);
-
-  const createEmployee = useCallback(
-    async (employeeData: Employee): Promise<Employee | null> => {
-      try {
-        const response = await request<Employee>("/profile/employee", {
-          method: "POST",
-          body: JSON.stringify(employeeData),
-        });
-        toast.success("Employee created successfully!");
-        return response;
-      } catch (error) {
-        console.error("Failed to create employee", error);
-        return null;
-      }
-    },
-    [request]
-  );
-
-  const updateEmployee = useCallback(
-    async (id: string, employeeData: Employee): Promise<Employee | null> => {
-      try {
-        const response = await request<Employee>(`/profile/employee/${id}`, {
-          method: "PUT",
-          body: JSON.stringify(employeeData),
-        });
-        toast.success("Employee edited successfully!");
-        return response;
-      } catch (error) {
-        console.error("Failed to update employee data", error);
-        return null;
-      }
-    },
-    [request]
-  );
-
-  const deleteEmployee = useCallback(
-    async (id: string) => {
-      try {
-        const response = await request(`/profile/employee/${id}`, {
-          method: "DELETE",
-        });
-        toast.success("Employee is deleted successfully!");
-        return response;
-      } catch (err) {
-        toast.error("Employee deletion failed");
-      }
-    },
-    [request]
-  );
-
-  const getEventParticipants = useCallback(
-    async (eventId: string) => {
-      try {
-        return await request<ParticipationDetails[]>(`/events/${eventId}/participants`);
-      } catch (err) {
-        toast.error("Fetch operation for the participants of the event failed");
-      }
-    },
-    [request]
-  );
-
-  const addParticipant = useCallback(
-    async (participation: {
-      guestCount: number;
-      eventId: string;
-      employeeId: string;
-    }): Promise<ParticipationDetails | null> => {
-      try {
-        const response = await request<ParticipationDetails>(
-          `/events/${participation.eventId}/participants`,
-          {
+    const logoutRequest = useCallback(async () => {
+        return await request(`/profile/logout`, {
             method: "POST",
-            body: JSON.stringify(participation),
-          }
-        );
-        toast.success("Participant added successfully!");
-        return response;
-      } catch (error) {
-        console.error("Failed to add participant to the event", error);
-        return null;
-      }
-    },
-    [request]
-  );
-
-  const updateParticipant = useCallback(
-    async (participation: {
-      guestCount: number;
-      eventId: string;
-      employeeId: string;
-    }): Promise<ParticipationDetails | null> => {
-      try {
-        const response = await request<ParticipationDetails>(
-          `/events/${participation.eventId}/participants`,
-          {
-            method: "PUT",
-            body: JSON.stringify(participation),
-          }
-        );
-        toast.success("Participant updated successfully!");
-        return response;
-      } catch (error) {
-        console.error("Failed to update participant to the event", error);
-        return null;
-      }
-    },
-    [request]
-  );
-
-  const deleteParticipation = useCallback(
-    async (id: string) => {
-      try {
-        const response = await request(`/events/participants/${id}`, {
-          method: "DELETE",
         });
-        toast.success("Event participant is deleted successfully!");
-        return response;
-      } catch (err) {
-        toast.error("Event participant deletion failed");
-      }
-    },
-    [request]
-  );
-
-  return {
-    request,
-    logoutRequest,
-    getOwnProfile,
-    getEventById,
-    getEvents,
-    createEvent,
-    updateEvent,
-    deleteEvent,
-    fileUpload,
-    deleteFile,
-    fileDownload,
-    initiateSchematics,
-    getSchematics,
-    updateSchematics,
-    deleteSchematics,
-    getEmployeeById,
-    getEmployees,
-    createEmployee,
-    updateEmployee,
-    deleteEmployee,
-    getEventParticipants,
-    addParticipant,
-    updateParticipant,
-    deleteParticipation,
-  };
+    }, [request]);
+
+    const getOwnProfile = useCallback(async (): Promise<Profile> => {
+        return await request<Profile>("/profile/own");
+    }, [request]);
+
+    const getEventById = useCallback(
+        async (id: string): Promise<Event | null> => {
+            try {
+                return await request<Event>(`/events/${id}`);
+            } catch (error) {
+                console.error(`Failed to fetch event with ID ${id}:`, error);
+                return null;
+            }
+        },
+        [request]
+    );
+
+    const getEvents = useCallback(async (): Promise<Event[] | null> => {
+        try {
+            return await request<Event[]>(`/events/all`);
+        } catch (error) {
+            console.error(`Failed to fetch events:`, error);
+            return null;
+        }
+    }, [request]);
+
+    const createEvent = useCallback(
+        async (eventData: Event): Promise<Event | null> => {
+            try {
+                const response = await request<Event>("/events", {
+                    method: "POST",
+                    body: JSON.stringify(eventData),
+                });
+                toast.success("Event created successfully!");
+                return response;
+            } catch (error) {
+                console.error("Failed to create event", error);
+                return null;
+            }
+        },
+        [request]
+    );
+
+    const updateEvent = useCallback(
+        async (id: string, eventData: Event): Promise<Event | null> => {
+            try {
+                const response = await request<Event>(`/events/${id}`, {
+                    method: "PUT",
+                    body: JSON.stringify(eventData),
+                });
+                toast.success("Event edited successfully!");
+                return response;
+            } catch (error) {
+                console.error("Failed to update event", error);
+                return null;
+            }
+        },
+        [request]
+    );
+
+    const deleteEvent = useCallback(
+        async (id: string) => {
+            try {
+                const response = await request(`/events/${id}`, {
+                    method: "DELETE",
+                });
+                toast.success("Event is deleted successfully!");
+                return response;
+            } catch (err) {
+                toast.error("Event deletion failed");
+            }
+        },
+        [request]
+    );
+
+    const fileUpload = useCallback(
+        async (formData: FormData) => {
+            try {
+                const response = await request<string>("/files/upload", {
+                    method: "POST",
+                    body: formData,
+                });
+                toast.success("File upload is successful!");
+                return response;
+            } catch (err) {
+                toast.error("File upload failed");
+            }
+        },
+        [request]
+    );
+
+    const fileDownload = useCallback(
+        async (file: FileEntity) => {
+            try {
+                const blob = await request<Blob>(`/files/${file.fileId}`);
+
+                const url = window.URL.createObjectURL(blob);
+                const link = document.createElement("a");
+                link.href = url;
+                link.setAttribute("download", file.name);
+                document.body.appendChild(link);
+                link.click();
+                link.remove();
+                window.URL.revokeObjectURL(url);
+            } catch (err) {
+                console.error(err);
+                toast.error("Failed to download file");
+            }
+        },
+        [request]
+    );
+
+    const deleteFile = useCallback(
+        async (id: string) => {
+            try {
+                const response = await request(`/files/${id}`, {
+                    method: "DELETE",
+                });
+                toast.success("File is deleted successfully!");
+                return response;
+            } catch (err) {
+                toast.error("File deletion failed");
+            }
+        },
+        [request]
+    );
+
+    const getSchematics: (id: string) => Promise<AppState> = useCallback(async (id: string) => {
+        try {
+            const response = await request<{ state: string }>(`/schematics/${id}`);
+            return JSON.parse(response.state);
+        } catch (err) {
+            toast.error('Schematics fetch failed');
+        }
+    }, [request]);
+
+    const initiateSchematics = useCallback(
+        async (eventId: string): Promise<SchematicsEntity | null> => {
+            try {
+                const response = await request(`/schematics`, {
+                    method: "POST",
+                    body: JSON.stringify({
+                        eventId: eventId,
+                        state: JSON.stringify({
+                            buildMode: 0,
+                            elements: [],
+                            groups: [],
+                            canvasPosition: {x: 0, y: 0},
+                            scale: 1,
+                        } as AppState),
+                    }),
+                });
+                toast.success("Schematics saved successfully!");
+                return response;
+            } catch (err) {
+                toast.error("Schematics save failed");
+                return null;
+            }
+        },
+        [request]
+    );
+
+    const updateSchematics = useCallback(async (id: string, canvasState: AppState, stageRef: React.RefObject<Konva.Stage | null>): Promise<SchematicsEntity | null> => {
+        try {
+            const response = await request(`/schematics/${id}`, {
+                method: 'PUT',
+                body: JSON.stringify({
+                    state: JSON.stringify(canvasState),
+                }),
+            });
+            if (stageRef && stageRef!.current) {
+                const dataUrl = handleExport(stageRef);
+                const arr = dataUrl!.split(',');
+                const mime = arr[0].match(/:(.*?);/)![1];
+                const bstr = atob(arr[1]);
+                let n = bstr.length;
+                const u8arr = new Uint8Array(n);
+
+                while (n--) {
+                    u8arr[n] = bstr.charCodeAt(n);
+                }
+
+                const file = new File([u8arr], id, {type: mime});
+
+                const formData = new FormData();
+                formData.append('file', file);
+                formData.append('schematicsId', id);
+                await fileUpload(formData);
+            }
+
+            toast.success('Schematics saved successfully!');
+            return response;
+        } catch (err) {
+            toast.error('Schematics save failed');
+            return null;
+        }
+    }, [fileUpload, request]);
+
+    const deleteSchematics = useCallback(
+        async (id: string) => {
+            try {
+                const response = await request(`/schematics/${id}`, {
+                    method: 'DELETE',
+                });
+                toast.success('Schematics is deleted successfully!');
+                return response;
+            } catch (err) {
+                toast.error('Schematics deletion failed');
+            }
+        },
+        [request]
+    );
+
+    const getEmployeeById = useCallback(
+        async (id: string) => {
+            try {
+                return await request<Employee>(`/profile/employee/${id}`);
+            } catch (err) {
+                toast.error("Employee fetch failed");
+            }
+        },
+        [request]
+    );
+
+    const getEmployees = useCallback(async () => {
+        try {
+            return await request<Employee[]>(`/profile/employees`);
+        } catch (err) {
+            toast.error("Employee fetch all operation failed");
+        }
+    }, [request]);
+
+    const createEmployee = useCallback(
+        async (employeeData: Employee): Promise<Employee | null> => {
+            try {
+                const response = await request<Employee>("/profile/employee", {
+                    method: "POST",
+                    body: JSON.stringify(employeeData),
+                });
+                toast.success("Employee created successfully!");
+                return response;
+            } catch (error) {
+                console.error("Failed to create employee", error);
+                return null;
+            }
+        },
+        [request]
+    );
+
+    const updateEmployee = useCallback(
+        async (id: string, employeeData: Employee): Promise<Employee | null> => {
+            try {
+                const response = await request<Employee>(`/profile/employee/${id}`, {
+                    method: "PUT",
+                    body: JSON.stringify(employeeData),
+                });
+                toast.success("Employee edited successfully!");
+                return response;
+            } catch (error) {
+                console.error("Failed to update employee data", error);
+                return null;
+            }
+        },
+        [request]
+    );
+
+    const deleteEmployee = useCallback(
+        async (id: string) => {
+            try {
+                const response = await request(`/profile/employee/${id}`, {
+                    method: "DELETE",
+                });
+                toast.success("Employee is deleted successfully!");
+                return response;
+            } catch (err) {
+                toast.error("Employee deletion failed");
+            }
+        },
+        [request]
+    );
+
+    const getEventParticipants = useCallback(
+        async (eventId: string) => {
+            try {
+                return await request<ParticipationDetails[]>(`/events/${eventId}/participants`);
+            } catch (err) {
+                toast.error("Fetch operation for the participants of the event failed");
+            }
+        },
+        [request]
+    );
+
+    const addParticipant = useCallback(
+        async (participation: {
+            guestCount: number;
+            eventId: string;
+            employeeId: string;
+        }): Promise<ParticipationDetails | null> => {
+            try {
+                const response = await request<ParticipationDetails>(
+                    `/events/${participation.eventId}/participants`,
+                    {
+                        method: "POST",
+                        body: JSON.stringify(participation),
+                    }
+                );
+                toast.success("Participant added successfully!");
+                return response;
+            } catch (error) {
+                console.error("Failed to add participant to the event", error);
+                return null;
+            }
+        },
+        [request]
+    );
+
+    const updateParticipant = useCallback(
+        async (participation: {
+            guestCount: number;
+            eventId: string;
+            employeeId: string;
+        }): Promise<ParticipationDetails | null> => {
+            try {
+                const response = await request<ParticipationDetails>(
+                    `/events/${participation.eventId}/participants`,
+                    {
+                        method: "PUT",
+                        body: JSON.stringify(participation),
+                    }
+                );
+                toast.success("Participant updated successfully!");
+                return response;
+            } catch (error) {
+                console.error("Failed to update participant to the event", error);
+                return null;
+            }
+        },
+        [request]
+    );
+
+    const deleteParticipation = useCallback(
+        async (id: string) => {
+            try {
+                const response = await request(`/events/participants/${id}`, {
+                    method: "DELETE",
+                });
+                toast.success("Event participant is deleted successfully!");
+                return response;
+            } catch (err) {
+                toast.error("Event participant deletion failed");
+            }
+        },
+        [request]
+    );
+
+    return {
+        request,
+        logoutRequest,
+        getOwnProfile,
+        getEventById,
+        getEvents,
+        createEvent,
+        updateEvent,
+        deleteEvent,
+        fileUpload,
+        deleteFile,
+        fileDownload,
+        initiateSchematics,
+        getSchematics,
+        updateSchematics,
+        deleteSchematics,
+        getEmployeeById,
+        getEmployees,
+        createEmployee,
+        updateEmployee,
+        deleteEmployee,
+        getEventParticipants,
+        addParticipant,
+        updateParticipant,
+        deleteParticipation,
+    };
 }
diff --git a/frontend/src/services/authService.ts b/frontend/src/services/authService.ts
index e518e82..f4e7c83 100644
--- a/frontend/src/services/authService.ts
+++ b/frontend/src/services/authService.ts
@@ -1,4 +1,4 @@
-import type { User } from "../types/auth";
+import type {User} from "../types/auth";
 
 const AUTH_KEY = "auth_user";
 
diff --git a/frontend/src/types/employee.ts b/frontend/src/types/employee.ts
index 52c37f5..bbd6402 100644
--- a/frontend/src/types/employee.ts
+++ b/frontend/src/types/employee.ts
@@ -3,7 +3,7 @@ export interface Employee {
   employmentStartDate: string;
   employmentType: string;
   location: string;
-  projects: Project[];
+    projects: Project[];
   participations?: ParticipationDetails[];
 }
 
@@ -38,14 +38,14 @@ export interface ParticipationDetails {
 }
 
 export enum DietaryPreference {
-  VEGETARIAN = "Vegetarian",
-  PESCATARIAN = "Pescatarian",
-  HALAL = "Halal",
-  KOSHER = "Kosher",
-  VEGAN = "Vegan",
-  LACTOSE_FREE = "Lactose free",
-  GLUTEN_FREE = "Gluten free",
-  KETO = "Keto",
+    VEGETARIAN = "Vegetarian",
+    PESCATARIAN = "Pescatarian",
+    HALAL = "Halal",
+    KOSHER = "Kosher",
+    VEGAN = "Vegan",
+    LACTOSE_FREE = "Lactose free",
+    GLUTEN_FREE = "Gluten free",
+    KETO = "Keto",
 }
 
 export enum EmploymentType {
@@ -56,7 +56,7 @@ export enum EmploymentType {
 }
 
 export enum Role {
-  ADMIN = "ADMIN",
-  EMPLOYEE = "EMPLOYEE",
-  VISITOR = "VISITOR",
+    ADMIN = "ADMIN",
+    EMPLOYEE = "EMPLOYEE",
+    VISITOR = "VISITOR",
 }
diff --git a/frontend/src/types/event.ts b/frontend/src/types/event.ts
index f4ad190..9288481 100644
--- a/frontend/src/types/event.ts
+++ b/frontend/src/types/event.ts
@@ -2,15 +2,15 @@ export type EventStatus = "upcoming" | "ongoing" | "completed";
 export type EventType = "WINTER_EVENT" | "SUMMER_EVENT" | "YEAR_END_PARTY";
 
 export const EVENT_STATUS_COLORS: Record<EventStatus, string> = {
-  upcoming: "orange",
-  ongoing: "blue",
-  completed: "green",
+    upcoming: "orange",
+    ongoing: "blue",
+    completed: "green",
 };
 
 export const EVENT_TYPE_COLORS: Record<EventType, string> = {
-  WINTER_EVENT: "blue",
-  SUMMER_EVENT: "orange",
-  YEAR_END_PARTY: "purple",
+    WINTER_EVENT: "blue",
+    SUMMER_EVENT: "orange",
+    YEAR_END_PARTY: "purple",
 };
 
 export interface FileEntity {