diff --git a/src/client/components/OfficeFloorMap.tsx b/src/client/components/OfficeFloorMap.tsx
index 7d2651f0..a2dc7c19 100644
--- a/src/client/components/OfficeFloorMap.tsx
+++ b/src/client/components/OfficeFloorMap.tsx
@@ -1,7 +1,7 @@
-import React from 'react'
+import React, { MouseEventHandler } from 'react'
 import { Avatar, Button, P } from '#client/components/ui'
 import {
-  DailyEventType,
+  ScheduledItemType,
   OfficeArea,
   OfficeAreaDesk,
   OfficeRoom,
@@ -14,32 +14,18 @@ import { useStore } from '@nanostores/react'
 import * as stores from '#client/stores'
 import { ImageWithPanZoom } from './ui/ImageWithPanZoom'
 
-type OfficeFloorMapProps = {
-  area: OfficeArea
-  mappablePoints?: any
-  clickablePoints?: string[]
-  selectedPointId: string | null
-  onToggle: (id: string, kind: string) => void
-  showUsers?: boolean
-  officeVisits?: Record<string, Array<DailyEventType>>
-  panZoom?: boolean
-}
+type PointComponentFunctionProps = (
+  item: OfficeAreaDesk | OfficeRoom,
+  isSelected: boolean,
+  isAvailable: boolean,
+  onClick: (id: string, kind: string) => MouseEventHandler<HTMLAnchorElement>
+) => Element | JSX.Element
 
 const PointComponent: Record<
-  VisitType,
-  (
-    item: OfficeAreaDesk,
-    isSelected: boolean,
-    isAvailable: boolean,
-    onClick: (id: string, kind: string) => void
-  ) => Element | JSX.Element
+  VisitType.Visit | VisitType.RoomReservation,
+  PointComponentFunctionProps
 > = {
-  [VisitType.Visit]: (
-    item: OfficeAreaDesk,
-    isSelected: boolean,
-    isAvailable: boolean,
-    onClick: (id: string, kind: string) => void
-  ) => (
+  [VisitType.Visit]: (item, isSelected, isAvailable, onClick) => (
     <Button
       size="small"
       kind={isSelected ? 'primary' : 'secondary'}
@@ -56,12 +42,7 @@ const PointComponent: Record<
       {item?.name}
     </Button>
   ),
-  [VisitType.RoomReservation]: (
-    item: any,
-    isSelected: boolean,
-    isAvailable: boolean,
-    onClick: (id: string, kind: string) => void
-  ) => (
+  [VisitType.RoomReservation]: (item, isSelected, isAvailable, onClick) => (
     <Button
       size="small"
       kind={isSelected ? 'primary' : 'secondary'}
@@ -70,23 +51,14 @@ const PointComponent: Record<
         'absolute -translate-y-2/4 -translate-x-2/4 whitespace-nowrap',
         isSelected && 'border-pink-600 border-2',
         'bg-gray-100 text-black',
-        'rounded-sm  border-2  p-4',
+        'rounded-sm  border-2  sm:p-4',
         'hover:scale-105 transition-all delay-100'
       )}
       onClick={onClick(item.id, VisitType.RoomReservation)}
     >
-      <P textType="additional" className={cn('my-0')}>
-        Meeting Room
-      </P>
       <p className="font-bold">{item.name}</p>
     </Button>
   ),
-  [VisitType.Guest]: (
-    item: OfficeRoom,
-    isSelected: boolean,
-    isAvailable: boolean,
-    onClick: (id: string, kind: string) => void
-  ) => {},
 }
 
 const UserPoint = ({
@@ -114,16 +86,23 @@ const UserPoint = ({
   </div>
 )
 
-const PointMapping: React.FC<{
-  me?: UserMe | null
-  objects: Array<OfficeAreaDesk>
-  areaId: string
-  officeVisits?: Record<string, Array<DailyEventType>>
-  showUsers: boolean
+type PointMappingProps = {
+  officeVisits?: Record<string, Array<ScheduledItemType>>
+  showUsers?: boolean
   selectedPointId: string | null
   clickablePoints?: string[]
   onToggle: (id: string, kind: string) => void
-}> = ({
+}
+
+const PointMapping: React.FC<
+  PointMappingProps & {
+    me?: UserMe | null
+    objects: Array<
+      OfficeAreaDesk & { kind: VisitType.Visit | VisitType.RoomReservation }
+    >
+    areaId: string
+  }
+> = ({
   me,
   objects,
   areaId,
@@ -149,7 +128,7 @@ const PointMapping: React.FC<{
       let user = null
 
       if (!!officeVisits && me && showUsers) {
-        const bookedVisit: DailyEventType | undefined =
+        const bookedVisit: ScheduledItemType | undefined =
           officeVisits.visit?.find(
             (v) => v.areaId === areaId && v.objectId === x.id
           )
@@ -175,7 +154,7 @@ const PointMapping: React.FC<{
                 top: `${x.position?.y}%`,
               }}
             >
-              {/* // @todo fix this */}
+              {/* @ts-ignore */}
               {PointComponent[x.kind](x, isSelected, isAvailable, onClick)}
             </div>
           )}
@@ -184,6 +163,12 @@ const PointMapping: React.FC<{
     })
 }
 
+type OfficeFloorMapProps = {
+  area: OfficeArea
+  mappablePoints?: any
+  panZoom?: boolean
+} & PointMappingProps
+
 export const OfficeFloorMap: React.FC<OfficeFloorMapProps> = ({
   area,
   mappablePoints,
diff --git a/src/client/components/ui/ImageWithPanZoom.tsx b/src/client/components/ui/ImageWithPanZoom.tsx
index 2f4f4aa2..5ec0bd67 100644
--- a/src/client/components/ui/ImageWithPanZoom.tsx
+++ b/src/client/components/ui/ImageWithPanZoom.tsx
@@ -42,7 +42,7 @@ export const ImageWithPanZoom = ({
       onTouchMove={handleTouchMove}
       onTouchEnd={handleTouchEnd}
       className={cn(
-        'overflow-hidden relative w-full h-full',
+        'overflow-hidden relative w-full h-full sm:h-auto',
         containerClassName
       )}
     >
diff --git a/src/client/utils/hooks.ts b/src/client/utils/hooks.ts
index 0ce914f1..af71255b 100644
--- a/src/client/utils/hooks.ts
+++ b/src/client/utils/hooks.ts
@@ -154,10 +154,10 @@ export function usePanZoom(
 ): {
   position: { x: number; y: number }
   scale: number
-  handleTouchStart: (e: TouchEvent) => void
-  handleTouchMove: (e: TouchEvent) => void
-  handleTouchEnd: (e: TouchEvent) => void
-  handleWheel: (e: WheelEvent) => void
+  handleTouchStart: React.TouchEventHandler<HTMLDivElement>
+  handleTouchMove: React.TouchEventHandler<HTMLDivElement>
+  handleTouchEnd: React.TouchEventHandler<HTMLDivElement>
+  handleWheel: React.WheelEventHandler<HTMLDivElement>
 } {
   const [isPanning, setIsPanning] = useState(false)
   const [touchStart, setTouchStart] = useState({ x: 0, y: 0 })
@@ -186,16 +186,20 @@ export function usePanZoom(
     }
   }, [containerRef, imageRef, scale])
 
-  const handleTouchStart = useCallback((event: TouchEvent) => {
-    if (event.touches.length === 1) {
-      const touch = event.touches[0]
-      setTouchStart({
-        x: touch.clientX,
-        y: touch.clientY,
-      })
-      setIsPanning(true)
-    }
-  }, [])
+  const handleTouchStart: React.TouchEventHandler<HTMLDivElement> = useCallback(
+    (event) => {
+      console.log(event)
+      if (event.touches.length === 1) {
+        const touch = event.touches[0]
+        setTouchStart({
+          x: touch.clientX,
+          y: touch.clientY,
+        })
+        setIsPanning(true)
+      }
+    },
+    []
+  )
 
   const updatePositionWithinBounds = (newX: number, newY: number) => {
     const boundary = 100
@@ -208,14 +212,15 @@ export function usePanZoom(
     // a little crotch for now :)
     const indx = scale > 1.5 ? 200 : 50
     const yBoundaryTop = -imageDimensions.height + indx * scale
+    console.log(newX, ', ', newY)
     return {
       x: newX > 0 ? Math.min(newX, xBoundary) : Math.max(newX, -xBoundary),
       y: newY > 0 ? Math.min(newY, yBoundary) : Math.max(newY, yBoundaryTop),
     }
   }
 
-  const handleTouchMove = useCallback(
-    (event: TouchEvent) => {
+  const handleTouchMove: React.TouchEventHandler<HTMLDivElement> = useCallback(
+    (event) => {
       if (isPanning && event.touches.length === 1) {
         const touch = event.touches[0]
         const deltaX = touch.clientX - touchStart.x
@@ -240,14 +245,17 @@ export function usePanZoom(
     setIsPanning(false)
   }, [])
 
-  const handleWheel = useCallback((event: WheelEvent) => {
-    event.preventDefault()
-    const scaleAdjustment = event.deltaY > 0 ? 0.9 : 1.1
-    setScale((prevScale) => {
-      const newScale = prevScale * scaleAdjustment
-      return Math.max(1, newScale < MAX_ZOOM ? newScale : MAX_ZOOM)
-    })
-  }, [])
+  const handleWheel: React.WheelEventHandler<HTMLDivElement> = useCallback(
+    (event) => {
+      event.preventDefault()
+      const scaleAdjustment = event.deltaY > 0 ? 0.9 : 1.1
+      setScale((prevScale) => {
+        const newScale = prevScale * scaleAdjustment
+        return Math.max(1, newScale < MAX_ZOOM ? newScale : MAX_ZOOM)
+      })
+    },
+    []
+  )
 
   return {
     position,
diff --git a/src/modules/events/client/components/EventsPage.tsx b/src/modules/events/client/components/EventsPage.tsx
index d1a8c974..9afdac1d 100644
--- a/src/modules/events/client/components/EventsPage.tsx
+++ b/src/modules/events/client/components/EventsPage.tsx
@@ -70,7 +70,7 @@ export const EventsPage = () => {
     return null
   }
 
-  if (!events || !Object.keys(events).length) {
+  if (!events || !(Sections.past in events && Sections.upcoming in events)) {
     return (
       <div className="text-gray-400 text-center">No upcoming events yet</div>
     )
@@ -84,6 +84,7 @@ export const EventsPage = () => {
         {!!myEvents && (
           <div>
             {Object.values(Sections).map((title) => {
+              // @ts-ignore
               const evs = myEvents[TitleStatus[title] as EventApplicationStatus]
               if (!!evs?.length) {
                 return <EventsList title={title} events={evs} />
@@ -91,15 +92,12 @@ export const EventsPage = () => {
             })}
           </div>
         )}
-        {Sections.past in events &&
-          Sections.upcoming in events &&
-          [Sections.upcoming, Sections.past].map((timeTitle) => {
-            console.log(timeTitle)
-            const evs = events[timeTitle]
-            if (evs?.length) {
-              return <EventsList title={timeTitle} events={evs} />
-            }
-          })}
+        {[Sections.upcoming, Sections.past].map((timeTitle) => {
+          const evs = events[timeTitle]
+          if (evs?.length) {
+            return <EventsList title={timeTitle} events={evs} />
+          }
+        })}
       </ComponentWrapper>
     </Background>
   )
diff --git a/src/modules/events/server/models/event-application.ts b/src/modules/events/server/models/event-application.ts
index fbd8994b..ba4f0428 100644
--- a/src/modules/events/server/models/event-application.ts
+++ b/src/modules/events/server/models/event-application.ts
@@ -32,6 +32,7 @@ export class EventApplication
   declare creatorUserId: string
   declare formId: string | null
   declare formSubmissionId: string | null
+  declare event: Event
 
   static async countByEventId(): Promise<Record<string, number>> {
     const entries = (await this.findAll({
diff --git a/src/modules/events/server/models/event.ts b/src/modules/events/server/models/event.ts
index 584ec79f..0b59d31a 100644
--- a/src/modules/events/server/models/event.ts
+++ b/src/modules/events/server/models/event.ts
@@ -63,6 +63,7 @@ export class Event
   declare notificationRule: EventModel['notificationRule']
   declare metadata: EventModel['metadata']
   declare responsibleUserIds: EventModel['responsibleUserIds']
+  declare applications?: EventModel['applications']
 
   usePublicView(
     application: EventApplication | null,
diff --git a/src/modules/events/server/router.ts b/src/modules/events/server/router.ts
index fbebc8a8..c3ffa117 100644
--- a/src/modules/events/server/router.ts
+++ b/src/modules/events/server/router.ts
@@ -485,7 +485,7 @@ const userRouter: FastifyPluginCallback = async function (fastify, opts) {
       }
 
       return events.map((e) => {
-        const application = !!e.applications.length ? e.applications[0] : null
+        const application = !!e?.applications?.length ? e.applications[0] : null
         return e.usePublicView(application, [], null)
       })
     }
@@ -542,7 +542,7 @@ const userRouter: FastifyPluginCallback = async function (fastify, opts) {
       if (!!req.query.byStatus) {
         const result: Record<
           EventApplicationStatus,
-          Array<EventApplication>
+          Array<Event & { applicationId: string }>
         > = {
           [EventApplicationStatus.Confirmed]: [],
           [EventApplicationStatus.Pending]: [],
diff --git a/src/modules/events/types.ts b/src/modules/events/types.ts
index be4987bd..7c574874 100644
--- a/src/modules/events/types.ts
+++ b/src/modules/events/types.ts
@@ -29,6 +29,7 @@ export interface Event {
   notificationRule: EventNotificationRule
   metadata: Record<string, any>
   responsibleUserIds: string[]
+  applications?: EventApplication[]
 }
 
 export type EventMetadata = {
@@ -73,6 +74,7 @@ export interface EventApplication {
   creatorUserId: string
   formId: string | null
   formSubmissionId: string | null
+  event?: Event
 }
 
 export enum EventApplicationStatus {
diff --git a/src/modules/hub-map/client/components/DailyEvent.tsx b/src/modules/hub-map/client/components/DailyEvent.tsx
deleted file mode 100644
index e2970802..00000000
--- a/src/modules/hub-map/client/components/DailyEvent.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-import React from 'react'
-import { cn } from '#client/utils'
-import { DailyEventType, StatusColor, VisitType } from '#shared/types'
-import dayjs from 'dayjs'
-import { FButton, P } from '#client/components/ui'
-
-// temporary colors, havent picked the best colours yet
-// @todo update to final colours, move colours to tailwindconfig
-export const BGColors: Record<string, string> = {
-  [VisitType.RoomReservation]: 'bg-[#F0FAF4]',
-  [VisitType.Visit]: 'bg-cta-hover-purpleNoOpacity',
-  [VisitType.Guest]: 'bg-cta-hover-ceruleanNoOpacity',
-}
-
-export const BGColorSelect: Record<string, string> = {
-  [VisitType.RoomReservation]: 'border-[#AFEEC8]',
-  [VisitType.Visit]: 'border-[#C4B8E5]',
-  [VisitType.Guest]: 'border-cta-hover-ceruleanNoOpacity',
-}
-
-export const BGColorsHover: Record<string, string> = {
-  [VisitType.RoomReservation]: `hover:border-[#AFEEC8]`,
-  [VisitType.Visit]: `hover:border-[#C4B8E5]`,
-  [VisitType.Guest]: `hover:border-cta-ceruleanNoOpacity`,
-}
-
-export const OfficeVisitsHeaders = {
-  [VisitType.Visit]: 'Desks',
-  [VisitType.Guest]: 'Guest Visits',
-  [VisitType.RoomReservation]: 'Rooms',
-} as const
-
-const DateHeader = ({ dateValue }: { dateValue: string | Date }) => (
-  <P textType="additional" className="mt-0 mb-0">
-    <span className="text-accents-red">
-      {dayjs(dateValue).isToday() ? `Today` : dayjs(dateValue).format('dddd')}
-      {' · '}
-    </span>
-    <span className="text-text-secondary">
-      {dayjs(dateValue).format('D MMMM')}
-    </span>
-  </P>
-)
-
-export const DailyEvent = ({
-  dailyEvent,
-  selected,
-  onClick,
-  onEntityCancel,
-}: {
-  dailyEvent: DailyEventType
-  selected: string | null
-  onClick: (item: DailyEventType) => void
-  onEntityCancel: (
-    id: string,
-    type: string,
-    value: string,
-    date: string
-  ) => void
-}) => {
-  const iAmSelected = selected == dailyEvent.id
-  return (
-    <div className="animate-fade-in-left" title={dailyEvent.status}>
-      <div
-        onClick={() => onClick(dailyEvent)}
-        className={cn(
-          'transition-all',
-          'w-[224px] h-[192px]  flex flex-col justify-between rounded-sm py-4 px-6 cursor-pointer',
-          BGColors[dailyEvent.type],
-          'border border-transparent',
-          iAmSelected && BGColorSelect[dailyEvent.type],
-          BGColorsHover[dailyEvent.type] && `${BGColorsHover[dailyEvent.type]}`
-        )}
-      >
-        <div className="flex flex-col gap-2">
-          <div className="overflow-hidden">
-            <DateHeader dateValue={dailyEvent.date} />
-            <div className="flex justify-between items-center mt-2">
-              <p className={cn('capitalize', iAmSelected && 'font-bold')}>
-                {dailyEvent.value}
-              </p>
-              <div
-                className={cn(
-                  'h-2 w-2 rounded-full',
-                  StatusColor[dailyEvent.status]
-                )}
-              ></div>
-            </div>
-            <p className="text-text-secondary text-sm">
-              {dailyEvent.dateTime ? dailyEvent.dateTime : ''}
-            </p>
-            <p className="text-text-tertiary text-sm break-all">
-              {dailyEvent.description}
-            </p>
-          </div>
-        </div>
-        {!!selected && (
-          <FButton
-            kind="secondary"
-            size="small"
-            className="w-full mt-2"
-            onClick={() =>
-              onEntityCancel(
-                dailyEvent.id,
-                dailyEvent.type,
-                dailyEvent.value,
-                dailyEvent.date
-              )
-            }
-          >
-            Cancel
-          </FButton>
-        )}
-      </div>
-    </div>
-  )
-}
diff --git a/src/modules/hub-map/client/components/HubMap.tsx b/src/modules/hub-map/client/components/HubMap.tsx
index ba421beb..3def6c82 100644
--- a/src/modules/hub-map/client/components/HubMap.tsx
+++ b/src/modules/hub-map/client/components/HubMap.tsx
@@ -7,17 +7,15 @@ import dayjs from 'dayjs'
 import { DaySlider } from '#client/components/ui/DaySlider'
 import { DATE_FORMAT } from '#client/constants'
 import { OfficeFloorMap } from '#client/components/OfficeFloorMap'
-import { DailyEventsList } from './DailyEventsList'
+import { ScheduledItemsList } from './ScheduledItemsList'
 import {
   useAvailableDesks,
   useOfficeVisitors,
   useVisitsAreas,
 } from '#modules/visits/client/queries'
 import { propEq } from '#shared/utils'
-import { useOfficeVisitsUpcoming } from '#modules/office-visits/client/queries'
 import { getPoints, goToMeetings, goToVisits } from '../helpers'
 import { VisitType } from '#shared/types'
-import { useMyEvents, useUpcomingEvents } from '#modules/events/client/queries'
 import { useUpcoming } from '../queries'
 
 export const HubMap = () => {
@@ -62,7 +60,7 @@ export const HubMap = () => {
     (areaId: string) => setAreaId(areaId),
     []
   )
-  // number of office visitors
+
   const { data: visitors } = useOfficeVisitors(
     officeId,
     dayjs(date).format(DATE_FORMAT)
@@ -111,7 +109,7 @@ export const HubMap = () => {
   return (
     <WidgetWrapper className="transition-all delay-100" title={`Hub Map`}>
       <div className="overflow-none">
-        <DailyEventsList
+        <ScheduledItemsList
           onChooseCard={(id, areaId, chosenDate) => {
             setSelectedDailyEvent(id)
             setAreaId(areaId)
diff --git a/src/modules/hub-map/client/components/ScheduledItem.tsx b/src/modules/hub-map/client/components/ScheduledItem.tsx
new file mode 100644
index 00000000..df36e2bd
--- /dev/null
+++ b/src/modules/hub-map/client/components/ScheduledItem.tsx
@@ -0,0 +1,116 @@
+import React from 'react'
+import { cn } from '#client/utils'
+import {
+  ColorsBg,
+  ColorsBorder,
+  ColorsHover,
+  ScheduledItemType,
+  StatusColor,
+} from '#shared/types'
+import dayjs from 'dayjs'
+import { FButton, P } from '#client/components/ui'
+
+export const PageUrls: Record<string, string> = {
+  event: '/events',
+}
+
+const DateHeader = ({ dateValue }: { dateValue: string | Date }) => {
+  const date = dayjs(dateValue).isToday()
+    ? `Today`
+    : dayjs(dateValue).format('dddd')
+  return (
+    <P textType="additional" className="mt-0 mb-0">
+      <span
+        className={cn(
+          date === 'Today' ? 'text-accents-red' : 'text-text-secondary'
+        )}
+      >
+        {date}
+        {' · '}
+      </span>
+      <span className="text-text-secondary">
+        {dayjs(dateValue).format('D MMMM')}
+      </span>
+    </P>
+  )
+}
+
+export const ScheduledItem = ({
+  sheduledItem,
+  selected,
+  onClick,
+  onEntityCancel,
+}: {
+  sheduledItem: ScheduledItemType
+  selected: string | null
+  onClick: (item: ScheduledItemType) => void
+  onEntityCancel: (
+    id: string,
+    type: string,
+    value: string,
+    date: string
+  ) => void
+}) => {
+  const iAmSelected = selected == sheduledItem.id
+  return (
+    <div className="animate-fade-in-left" title={sheduledItem.status}>
+      <div
+        onClick={() => {
+          if (!!PageUrls[sheduledItem.type]) {
+            window.location.href = PageUrls[sheduledItem.type]
+          } else {
+            onClick(sheduledItem)
+          }
+        }}
+        className={cn(
+          'transition-all',
+          'w-[224px] h-[192px]  flex flex-col justify-between rounded-sm py-4 px-6 cursor-pointer',
+          ColorsBg[sheduledItem.type],
+          'border border-transparent',
+          iAmSelected && ColorsBorder[sheduledItem.type],
+          ColorsHover[sheduledItem.type] && `${ColorsHover[sheduledItem.type]}`
+        )}
+      >
+        <div className="flex flex-col gap-2">
+          <div className="overflow-hidden">
+            <DateHeader dateValue={sheduledItem.date} />
+            <div className="flex justify-between items-center mt-2">
+              <p className={cn('capitalize', iAmSelected && 'font-bold')}>
+                {sheduledItem.value}
+              </p>
+              <div
+                className={cn(
+                  'h-2 w-2 rounded-full',
+                  StatusColor[sheduledItem.status]
+                )}
+              ></div>
+            </div>
+            <p className="text-text-secondary text-sm">
+              {sheduledItem.dateTime ? sheduledItem.dateTime : ''}
+            </p>
+            <p className="text-text-tertiary text-sm break-all">
+              {sheduledItem.description}
+            </p>
+          </div>
+        </div>
+        {!!selected && (
+          <FButton
+            kind="secondary"
+            size="small"
+            className="w-full mt-2"
+            onClick={() =>
+              onEntityCancel(
+                sheduledItem.id,
+                sheduledItem.type,
+                sheduledItem.value,
+                sheduledItem.date
+              )
+            }
+          >
+            Cancel
+          </FButton>
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/src/modules/hub-map/client/components/DailyEventsList.tsx b/src/modules/hub-map/client/components/ScheduledItemsList.tsx
similarity index 71%
rename from src/modules/hub-map/client/components/DailyEventsList.tsx
rename to src/modules/hub-map/client/components/ScheduledItemsList.tsx
index e4768ea8..62d88ed7 100644
--- a/src/modules/hub-map/client/components/DailyEventsList.tsx
+++ b/src/modules/hub-map/client/components/ScheduledItemsList.tsx
@@ -8,18 +8,17 @@ import * as stores from '#client/stores'
 import { useUpdateRoomReservationByUser } from '#modules/room-reservation/client/queries'
 import { useUpdateGuestInviteByUser } from '#modules/guest-invites/client/queries'
 import {
-  DailyEventType,
+  ScheduledItemType,
   GuestInviteStatus,
   RoomReservationStatus,
   VisitStatus,
   VisitType,
 } from '#shared/types'
-import { useOfficeVisitsUpcoming } from '#modules/office-visits/client/queries'
 import { FRIENDLY_DATE_FORMAT } from '#client/constants'
-import { DailyEvent } from './DailyEvent'
+import { ScheduledItem } from './ScheduledItem'
 import { useUpcoming } from '../queries'
 
-export const DailyEventsList: React.FC<{
+export const ScheduledItemsList: React.FC<{
   onChooseCard: (id: string | null, areaId: string | null, date: Dayjs) => void
   setDate: (d: Dayjs) => void
   date: Dayjs
@@ -27,12 +26,12 @@ export const DailyEventsList: React.FC<{
 }> = ({ onChooseCard, setDate, date, className }) => {
   const officeId = useStore(stores.officeId)
   const office = useOffice(officeId)
-  const [upcomingEvents, setUpcomingEvents] = React.useState([])
-  const [selected, setSelected] = React.useState<DailyEventType | null>(null)
+  const [scheduledItems, setScheduledItems] = React.useState([])
+  const [selected, setSelected] = React.useState<ScheduledItemType | null>(null)
 
   const cancellationCallback = () => {
     showNotification(`Successfully cancelled.`, 'success')
-    refetchVisits()
+    refetchUpcoming()
   }
 
   const me = useStore(stores.me)
@@ -47,46 +46,43 @@ export const DailyEventsList: React.FC<{
     status: VisitStatus | RoomReservationStatus | GuestInviteStatus
   }
 
-  const { data: myUpcomingVisits, refetch: refetchVisits } = useUpcoming(
-    officeId,
-    dayjs().toString(),
-    me?.id
-  )
+  const { data: myUpcomingScheduledItems, refetch: refetchUpcoming } =
+    useUpcoming(officeId, dayjs().toString(), me?.id)
 
   React.useEffect(() => {
-    if (!!myUpcomingVisits?.upcoming) {
-      setUpcomingEvents(myUpcomingVisits.upcoming)
+    if (!!myUpcomingScheduledItems?.upcoming) {
+      setScheduledItems(myUpcomingScheduledItems.upcoming)
     }
-  }, [myUpcomingVisits])
+  }, [myUpcomingScheduledItems])
 
   React.useEffect(() => {
     if (selected) {
       // if you removed the last item of this type
-      if (myUpcomingVisits?.byType[selected?.type].length === 0) {
+      if (myUpcomingScheduledItems?.byType[selected?.type].length === 0) {
         resetView()
       } else {
-        setUpcomingEvents(myUpcomingVisits?.byType[selected?.type])
+        setScheduledItems(myUpcomingScheduledItems?.byType[selected?.type])
       }
     }
-  }, [myUpcomingVisits?.byType, date])
+  }, [myUpcomingScheduledItems?.byType, date])
 
   const resetView = () => {
     setSelected(null)
-    setUpcomingEvents(myUpcomingVisits.upcoming)
+    setScheduledItems(myUpcomingScheduledItems.upcoming)
     onChooseCard(null, selected?.areaId ?? '', dayjs())
   }
 
-  const processOnClick = (dailyEvent: DailyEventType) => {
-    if (!dailyEvent) {
+  const processOnClick = (scheduledItem: ScheduledItemType) => {
+    if (!scheduledItem) {
       return
     }
-    setUpcomingEvents(myUpcomingVisits.byType[dailyEvent.type])
-    setSelected(dailyEvent)
-    setDate(dayjs(dailyEvent.date))
+    setScheduledItems(myUpcomingScheduledItems.byType[scheduledItem.type])
+    setSelected(scheduledItem)
+    setDate(dayjs(scheduledItem.date))
     onChooseCard(
-      dailyEvent.objectId ?? '',
-      dailyEvent.areaId ?? '',
-      dayjs(dailyEvent.date)
+      scheduledItem.objectId ?? '',
+      scheduledItem.areaId ?? '',
+      dayjs(scheduledItem.date)
     )
   }
 
@@ -116,7 +112,7 @@ export const DailyEventsList: React.FC<{
       }
       updateFns[type](data)
       setSelected(null)
-      refetchVisits()
+      refetchUpcoming()
     }
   }
 
@@ -137,11 +133,11 @@ export const DailyEventsList: React.FC<{
         </p>
       )}
       <div className="flex justify-start gap-4 overflow-x-auto max-w-[980px]">
-        {!!upcomingEvents?.length &&
-          upcomingEvents.map((v: DailyEventType, index) => (
-            <DailyEvent
-              key={v?.id}
-              dailyEvent={v}
+        {!!scheduledItems?.length &&
+          scheduledItems.map((item: ScheduledItemType, index) => (
+            <ScheduledItem
+              key={item?.id}
+              sheduledItem={item}
               onClick={processOnClick}
               selected={selected?.id ?? null}
               onEntityCancel={onEntityCancel}
diff --git a/src/modules/hub-map/client/queries.ts b/src/modules/hub-map/client/queries.ts
index 0e63046c..2c1241a4 100644
--- a/src/modules/hub-map/client/queries.ts
+++ b/src/modules/hub-map/client/queries.ts
@@ -1,24 +1,8 @@
-import { useQuery, useMutation } from 'react-query'
-import { AxiosError, AxiosResponse } from 'axios'
+import { useQuery } from 'react-query'
+import { AxiosError } from 'axios'
 import { api } from '#client/utils/api'
 import dayjs from 'dayjs'
 import { DATE_FORMAT } from '#server/constants'
-// import { Entity } from '#shared/types'
-
-// export const useCreateEntity = (cb: () => void) =>
-//   useMutation<AxiosResponse, AxiosError, EntityCreationRequest>(
-//     (data: EntityCreationRequest) =>
-//       api.post('/admin-api/<MODULE_ID>/<ENTITY>', data),
-//     { onSuccess: cb }
-//   )
-
-// export const useEntities = () => {
-//   const path = '/admin-api/<MODULE_ID>/<ENTITY>'
-//   return useQuery<Entity[], AxiosError>(
-//     path,
-//     async () => (await api.get<Entity[]>(path)).data
-//   )
-// }
 
 export const useUpcoming = (
   officeId: string,
diff --git a/src/modules/hub-map/server/router.ts b/src/modules/hub-map/server/router.ts
index 01b3149e..ce758068 100644
--- a/src/modules/hub-map/server/router.ts
+++ b/src/modules/hub-map/server/router.ts
@@ -1,7 +1,7 @@
 import { User } from '#modules/users/server/models'
 import { appConfig } from '#server/app-config'
 import {
-  DailyEventType,
+  ScheduledItemType,
   EntityVisibility,
   EventApplicationStatus,
   GenericVisit,
@@ -62,7 +62,7 @@ const userRouter: FastifyPluginCallback = async function (fastify, opts) {
         date
       )
 
-      const upcomingItems: Array<DailyEventType> = []
+      const upcomingItems: Array<ScheduledItemType> = []
       const upcomingByDate: Record<string, any> = {}
 
       const dailyEventsReservations = roomReservations.map(
@@ -143,8 +143,9 @@ const userRouter: FastifyPluginCallback = async function (fastify, opts) {
       }
 
       return {
-        upcoming: upcomingItems.sort((a: DailyEventType, b: DailyEventType) =>
-          dayjs(a.date).isAfter(dayjs(b.date)) ? 1 : -1
+        upcoming: upcomingItems.sort(
+          (a: ScheduledItemType, b: ScheduledItemType) =>
+            dayjs(a.date).isAfter(dayjs(b.date)) ? 1 : -1
         ),
         byType: {
           [VisitType.Visit]: dailyEventsVisits,
diff --git a/src/modules/hub-map/types.ts b/src/modules/hub-map/types.ts
index a4bb37e8..c4809bbc 100644
--- a/src/modules/hub-map/types.ts
+++ b/src/modules/hub-map/types.ts
@@ -1,7 +1,33 @@
-// @todo fix type
-export const StatusColor: Record<string, string> = {
+import { VisitStatus, VisitType } from '#shared/types'
+
+export const ColorsBg: Record<string, string> = {
+  [VisitType.RoomReservation]: 'bg-cta-hover-jade',
+  [VisitType.Visit]: 'bg-cta-hover-purple',
+  [VisitType.Guest]: 'bg-cta-hover-cerullean',
+}
+
+export const ColorsBorder: Record<string, string> = {
+  [VisitType.RoomReservation]: 'border-cta-jade',
+  [VisitType.Visit]: 'border-cta-purple',
+  [VisitType.Guest]: 'border-cta-hover-cerullean',
+}
+
+export const ColorsHover: Record<string, string> = {
+  [VisitType.RoomReservation]: `hover:${
+    ColorsBorder[VisitType.RoomReservation]
+  }`,
+  [VisitType.Visit]: `hover:${ColorsBorder[VisitType.Visit]}`,
+  [VisitType.Guest]: `hover:${ColorsBorder[VisitType.Guest]}`,
+}
+
+export const OfficeVisitsHeaders = {
+  [VisitType.Visit]: 'Desks',
+  [VisitType.Guest]: 'Guest Visits',
+  [VisitType.RoomReservation]: 'Rooms',
+} as const
+
+export const StatusColor: Record<VisitStatus, string> = {
   confirmed: 'bg-green-500',
   pending: 'bg-yellow-500',
   cancelled: 'bg-red-500',
-  rejected: 'bg-red-500',
 }
diff --git a/src/modules/office-visits/client/queries.ts b/src/modules/office-visits/client/queries.ts
index 8b488279..d0d42e29 100644
--- a/src/modules/office-visits/client/queries.ts
+++ b/src/modules/office-visits/client/queries.ts
@@ -20,20 +20,6 @@ export const useOfficeVisits = (officeId: string, date: string) => {
   )
 }
 
-export const useOfficeVisitsUpcoming = (
-  officeId: string,
-  date: string,
-  userId?: string
-) => {
-  const path = '/user-api/office-visits/upcoming'
-  return useQuery<any, AxiosError>(
-    [path, { officeId, date: dayjs(date).format(DATE_FORMAT), userId }],
-    async ({ queryKey }) =>
-      (await api.get<any>(path, { params: queryKey[1] })).data,
-    { enabled: !!officeId }
-  )
-}
-
 export const useVisitsStatsAdmin = (
   officeId: string,
   dateRange: [string, string],
diff --git a/src/modules/office-visits/types.ts b/src/modules/office-visits/types.ts
index a15f6d24..661b31a6 100644
--- a/src/modules/office-visits/types.ts
+++ b/src/modules/office-visits/types.ts
@@ -12,7 +12,7 @@ export const OfficeVisitsHeaders = {
   [VisitType.RoomReservation]: 'Meeting Room Bookings',
 } as const
 
-export type DailyEventType = {
+export type ScheduledItemType = {
   id: string
   value: string
   type: string
diff --git a/src/modules/room-reservation/server/helpers/index.ts b/src/modules/room-reservation/server/helpers/index.ts
index 9bc98a37..ab119221 100644
--- a/src/modules/room-reservation/server/helpers/index.ts
+++ b/src/modules/room-reservation/server/helpers/index.ts
@@ -1,6 +1,5 @@
-import { appConfig } from '#server/app-config'
 import { DATE_FORMAT_DAY_NAME } from '#server/constants'
-import { Office, RoomReservation } from '#shared/types'
+import { RoomReservation } from '#shared/types'
 import dayjs, { Dayjs } from 'dayjs'
 
 export const intervalStep = 30
diff --git a/src/server/app-config/schemas.ts b/src/server/app-config/schemas.ts
index a2835e2f..0d1e26ba 100644
--- a/src/server/app-config/schemas.ts
+++ b/src/server/app-config/schemas.ts
@@ -92,7 +92,6 @@ export const officeArea = z
     name: z.string(),
     capacity: z.number().min(1),
     map: z.string(),
-    // @todo remove type: "desks"
     bookable: z.boolean().default(false),
     desks: z.array(officeAreaDesk).min(1),
     meetingRooms: z.array(officeRoom).min(1).optional(),