diff --git a/frontend/src/components/AvailableRoomList/AvailableRoomList.tsx b/frontend/src/components/AvailableRoomList/AvailableRoomList.tsx
index 7e4b911..368e09f 100644
--- a/frontend/src/components/AvailableRoomList/AvailableRoomList.tsx
+++ b/frontend/src/components/AvailableRoomList/AvailableRoomList.tsx
@@ -69,29 +69,6 @@ const AvailableRoomList = (props: BookingListProps) => {
 
     return (
         <Box id="available-room-list">
-            <div
-                id="available-booking-typography"
-                style={{
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: '20px'
-                }}
-            >
-                <Typography
-                    variant="subtitle1"
-                    textAlign="left"
-                    marginLeft="24px"
-                >
-                    Available rooms:
-                </Typography>
-                <TimePickerButton
-                    aria-label="starting-booking-time"
-                    onClick={() => setExpandTimePickerDrawer(true)}
-                    value={startingTime}
-                >
-                    {startingTime} <ArrowDropDownIcon />
-                </TimePickerButton>
-            </div>
             <List>
                 {noAvailableRooms(rooms) ? (
                     <NoRoomsCard />
diff --git a/frontend/src/components/BookingDrawer/BookingDrawer.tsx b/frontend/src/components/BookingDrawer/BookingDrawer.tsx
index b4af609..eb2ba7f 100644
--- a/frontend/src/components/BookingDrawer/BookingDrawer.tsx
+++ b/frontend/src/components/BookingDrawer/BookingDrawer.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { Box, Button, Typography } from '@mui/material';
 import AddIcon from '@mui/icons-material/Add';
 import RemoveIcon from '@mui/icons-material/Remove';
@@ -267,7 +267,7 @@ export const SmallText = styled(Typography)(({ theme }) => ({
 }));
 
 export const Spacer = styled('div')(() => ({
-    padding: '8px'
+    padding: '4px'
 }));
 
 interface Props {
@@ -290,6 +290,57 @@ interface Props {
     setStartingTime: (s: string) => void;
 }
 
+const FullAndHalfHourButtons = (props: {
+    onClickFull: () => void;
+    disabledFull: boolean;
+    nextFullHour: string;
+    onClickHalf: () => void;
+    disabledHalf: boolean;
+    nextHalfHour: string;
+}) => {
+    const nextIsFull: boolean = useMemo(() => {
+        return parseInt(props.nextHalfHour?.split(':')?.at(1) || '0') < 30;
+    }, [props.nextHalfHour, props.nextFullHour]);
+
+    if (nextIsFull) {
+        return (
+            <>
+                <DrawerButtonSecondary
+                    onClick={props.onClickFull}
+                    disabled={props.disabledFull}
+                >
+                    Until {props.nextFullHour}
+                </DrawerButtonSecondary>
+                <Spacer />
+                <DrawerButtonSecondary
+                    onClick={props.onClickHalf}
+                    disabled={props.disabledHalf}
+                >
+                    Until {props.nextHalfHour}
+                </DrawerButtonSecondary>
+            </>
+        );
+    } else {
+        return (
+            <>
+                <DrawerButtonSecondary
+                    onClick={props.onClickHalf}
+                    disabled={props.disabledHalf}
+                >
+                    Until {props.nextHalfHour}
+                </DrawerButtonSecondary>
+                <Spacer />
+                <DrawerButtonSecondary
+                    onClick={props.onClickFull}
+                    disabled={props.disabledFull}
+                >
+                    Until {props.nextFullHour}
+                </DrawerButtonSecondary>
+            </>
+        );
+    }
+};
+
 const BookingDrawer = (props: Props) => {
     const {
         open,
@@ -506,19 +557,14 @@ const BookingDrawer = (props: Props) => {
                         </DrawerButtonPrimary>
                     </Row>
                     <Row>
-                        <DrawerButtonSecondary
-                            onClick={() => handleNextHalfHour()}
-                            disabled={disableNextHalfHour()}
-                        >
-                            Until {nextHalfHour}
-                        </DrawerButtonSecondary>
-                        <Spacer />
-                        <DrawerButtonSecondary
-                            onClick={() => handleNextFullHour()}
-                            disabled={disableNextFullHour()}
-                        >
-                            Until {nextFullHour}
-                        </DrawerButtonSecondary>
+                        <FullAndHalfHourButtons
+                            onClickFull={() => handleNextFullHour()}
+                            disabledFull={disableNextFullHour()}
+                            nextFullHour={nextFullHour}
+                            onClickHalf={() => handleNextHalfHour()}
+                            disabledHalf={disableNextHalfHour()}
+                            nextHalfHour={nextHalfHour}
+                        />
                     </Row>
                     <Row>
                         <DrawerButtonSecondary
@@ -526,6 +572,9 @@ const BookingDrawer = (props: Props) => {
                             onClick={() =>
                                 handleUntilNext(getTimeAvailableMinutes(room))
                             }
+                            sx={{
+                                margin: 0
+                            }}
                         >
                             Book the whole free slot
                         </DrawerButtonSecondary>
@@ -535,6 +584,9 @@ const BookingDrawer = (props: Props) => {
                             aria-label="book now"
                             data-testid="BookNowButton"
                             onClick={bookRoom}
+                            sx={{
+                                marginTop: '16px'
+                            }}
                         >
                             Book now
                         </DrawerButtonPrimary>
diff --git a/frontend/src/components/BookingDrawer/DurationPicker.tsx b/frontend/src/components/BookingDrawer/DurationPicker.tsx
index e131c1e..b247c7a 100644
--- a/frontend/src/components/BookingDrawer/DurationPicker.tsx
+++ b/frontend/src/components/BookingDrawer/DurationPicker.tsx
@@ -4,12 +4,12 @@ import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 import { styled, Typography } from '@mui/material';
 
 const DurationButton = styled(ToggleButton)(() => ({
-    padding: '8px 16px'
+    padding: '4px 4px'
 }));
 
 const DurationButtonGroup = styled(ToggleButtonGroup)(() => ({
     minWidth: '100%',
-    padding: '6px 8px',
+    paddingTop: '8px',
     marginBottom: '0px !important'
 }));
 
diff --git a/frontend/src/components/BookingView/FilteringDrawer.tsx b/frontend/src/components/BookingView/FilteringDrawer.tsx
index 571158e..8ef073c 100644
--- a/frontend/src/components/BookingView/FilteringDrawer.tsx
+++ b/frontend/src/components/BookingView/FilteringDrawer.tsx
@@ -11,6 +11,7 @@ import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
 import InputAdornment from '@mui/material/InputAdornment';
 import styled from '@mui/styled-engine';
 import { useUserSettings } from '../../contexts/UserSettingsContext';
+import { COLORS, DEFAULT_STYLES } from '../../theme_2024';
 
 export const Row = styled(Box)(({ theme }) => ({
     display: 'flex',
@@ -72,11 +73,11 @@ const FilteringDrawer = (props: Props) => {
         '& .MuiToggleButtonGroup-grouped': {
             marginRight: '16px',
             '&:not(:first-of-type)': {
-                border: 'solid',
                 borderWidth: 'thin',
                 borderRadius: '50px'
             },
             '&:first-of-type': {
+                backgroundColor: COLORS.ACCENT_PINK,
                 marginLeft: '0px',
                 borderRadius: '50px'
             }
diff --git a/frontend/src/fonts/StudioFeixenSans-Bold.otf b/frontend/src/fonts/StudioFeixenSans-Bold.otf
new file mode 100644
index 0000000..4338234
Binary files /dev/null and b/frontend/src/fonts/StudioFeixenSans-Bold.otf differ
diff --git a/frontend/src/fonts/StudioFeixenSans-Book.otf b/frontend/src/fonts/StudioFeixenSans-Book.otf
new file mode 100644
index 0000000..683ebc2
Binary files /dev/null and b/frontend/src/fonts/StudioFeixenSans-Book.otf differ
diff --git a/frontend/src/fonts/StudioFeixenSans-Regular.otf b/frontend/src/fonts/StudioFeixenSans-Regular.otf
new file mode 100644
index 0000000..9c19a6a
Binary files /dev/null and b/frontend/src/fonts/StudioFeixenSans-Regular.otf differ
diff --git a/frontend/src/theme_2024.ts b/frontend/src/theme_2024.ts
index 9ca6256..8afbeba 100644
--- a/frontend/src/theme_2024.ts
+++ b/frontend/src/theme_2024.ts
@@ -16,7 +16,8 @@ import { DoNotDisturbOn, Schedule, WatchLater } from '@mui/icons-material';
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 import { RoomCardReservationStatusIndicator } from './components/RoomCard/RoomCard';
 import Person from '@mui/icons-material/Person';
-import FeixenSansWoff2 from './fonts/StudioFeixenVincit-Regular.woff2';
+import FeixenSansBold from './fonts/StudioFeixenVincit-Bold.ttf';
+import FeixenSansRegular from './fonts/StudioFeixenVincit-Regular.ttf';
 
 export const COLORS = {
     ACCENT_PINK: '#FFCAFF',
@@ -48,7 +49,7 @@ export const UserIcon = styled(Person)(({ theme }) => ({
 export const DEFAULT_STYLES = {
     defaultSpacer: '24px',
     smallerSpacer: '16px',
-    defaultFont: 'Studio Feixen Sans'
+    defaultFont: 'StudioFeixenSans-Bold'
 };
 const { defaultFont } = DEFAULT_STYLES;
 
@@ -131,6 +132,19 @@ declare module '@mui/material/styles' {
     }
 }
 
+const FONT_FACE_BOLD = `
+        @font-face {
+          font-family: 'StudioFeixenSans-Bold';
+          src: url(${FeixenSansBold}) format('woff2');
+          unicodeRange: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF;
+        }
+        @font-face {
+          font-family: 'StudioFeixenSans-Regular';
+          src: url(${FeixenSansRegular}) format('woff2');
+          unicodeRange: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF;
+        }
+      `;
+
 export const DEFAULT_THEME_2024: ThemeOptions = {
     palette: {
         // background: { default: '#f6f5f5' },
@@ -189,7 +203,7 @@ export const DEFAULT_THEME_2024: ThemeOptions = {
         },
         h4: {
             color: COLORS.TEXT_DIMGREY,
-            fontFamily: defaultFont,
+            fontFamily: 'StudioFeixenSans-Regular',
             fontStyle: 'normal',
             fontWeight: 2,
             fontSize: '16px',
@@ -208,13 +222,7 @@ export const DEFAULT_THEME_2024: ThemeOptions = {
     },
     components: {
         MuiCssBaseline: {
-            styleOverrides: `
-        @font-face {
-          font-family: 'Studio Feixen Sans';
-          src: local('Studio Feixen Sans'), local('Studio Feixen Sans'), url(${FeixenSansWoff2}) format('woff2');
-          unicodeRange: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF;
-        }
-      `
+            styleOverrides: FONT_FACE_BOLD
         },
         GarApp: {
             styleOverrides: {