diff --git a/backend/service/meeting/meeting_service.go b/backend/service/meeting/meeting_service.go
index e6b79a9..e9b610a 100644
--- a/backend/service/meeting/meeting_service.go
+++ b/backend/service/meeting/meeting_service.go
@@ -41,7 +41,7 @@ func (s *MeetingService) GetMeetingsByDate(date string) ([]model.Meetings, error
 }
 
 func (s *MeetingService) GetAvailableTimeBlocks(meeting model.Meetings, date time.Time) ([]model.TimePreference, error) {
-	if date.Day() <= time.Now().Day() {
+	if date.Before(time.Now()) {
 		return []model.TimePreference{}, fmt.Errorf("cannot schedule a meeting less than one day in advance")
 	}
 
diff --git a/frontend/public/index.html b/frontend/public/index.html
index 3e5a139..1539f2c 100644
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@@ -1,15 +1,23 @@
 <!DOCTYPE html>
 <html lang="">
   <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
     <title><%= htmlWebpackPlugin.options.title %></title>
+    <link
+      href="https://cdn.materialdesignicons.com/5.4.55/css/materialdesignicons.min.css"
+      rel="stylesheet"
+    />
   </head>
   <body>
     <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+      <strong
+        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
+        properly without JavaScript enabled. Please enable it to
+        continue.</strong
+      >
     </noscript>
     <div id="app"></div>
     <!-- built files will be auto injected -->
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 5008bfc..5c9591a 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,12 +1,23 @@
 <template>
   <v-app>
-    <CalendarView @dateSelected="handleDateSelected" />
-    <ScheduleMeeting
-      v-if="meeting"
-      :meeting="meeting"
-      :availableTimeSlots="availableTimeSlots"
-      @scheduleConfirmed="handleScheduleConfirmed"
-    />
+    <v-container>
+      <v-row class="d-flex justify-center">
+        <h1>Neverl8 Meeting Scheduler</h1></v-row
+      >
+      <v-divider class="my-4"></v-divider>
+      <v-row>
+        <v-col>
+          <CalendarView @dateSelected="handleDateSelected" />
+        </v-col>
+        <v-col>
+          <ScheduleMeeting
+            v-if="meeting"
+            :meeting="meeting"
+            :availableTimeSlots="availableTimeSlots"
+            @scheduleMeeting="handleScheduleMeeting"
+          /> </v-col
+      ></v-row>
+    </v-container>
   </v-app>
 </template>
 
@@ -52,7 +63,21 @@ export default {
         this.availableTimeSlots = [];
       }
     },
-    handleScheduleConfirmed() {
+    async handleScheduleMeeting(
+      selectedTimeSlot,
+      candidateName,
+      candidateEmail
+    ) {
+      try {
+        await axios.post(`/api/meeting/schedule`, {
+          meeting_id: this.meeting.id,
+          time_slot: selectedTimeSlot,
+          candidate_name: candidateName,
+          candidate_email: candidateEmail,
+        });
+      } catch (error) {
+        console.error("Error scheduling meeting:", error);
+      }
       alert("Meeting scheduled!");
     },
   },
diff --git a/frontend/src/components/CalendarView.vue b/frontend/src/components/CalendarView.vue
index 57a85f2..cfd848c 100644
--- a/frontend/src/components/CalendarView.vue
+++ b/frontend/src/components/CalendarView.vue
@@ -1,10 +1,13 @@
 <template>
-  <v-date-picker
-    :model-value="date"
-    :min="minDate"
-    :max="maxDate"
-    @update:model-value="handleDateInput"
-  ></v-date-picker>
+  <v-container class="d-flex justify-end">
+    <v-date-picker
+      show-adjacent-months
+      :model-value="date"
+      :min="minDate"
+      :max="maxDate"
+      @update:model-value="handleDateInput"
+    ></v-date-picker>
+  </v-container>
 </template>
 
 <script>
diff --git a/frontend/src/components/ScheduleMeeting.vue b/frontend/src/components/ScheduleMeeting.vue
index 544235e..0fb3e37 100644
--- a/frontend/src/components/ScheduleMeeting.vue
+++ b/frontend/src/components/ScheduleMeeting.vue
@@ -1,57 +1,68 @@
 <template>
-  <div>
-    <h2>Schedule Meeting</h2>
-    <div v-if="meeting">
-      <p>Meeting: {{ meeting.title }}</p>
-      <p>Duration: {{ meeting.duration }} minutes</p>
-      <div v-for="host in meeting.Hosts" :key="host.id">
-        <ul v-if="isHostInAvailableSlots(host.id)">
-          {{
-            host.host_name
-          }}
-          is available for a meeting at the following times
-        </ul>
-      </div>
-      <div v-if="availableTimeSlots.length > 0">
-        <h3>Available Time Slots:</h3>
-        <ul>
-          <li v-for="slot in availableTimeSlots" :key="slot.id">
-            {{ formatDate(slot.start_time) }} -
-            {{ formatDate(slot.end_time) }}
-            <button
-              @click="selectTimePreference(slot), console.log(slot)"
-              :class="{
-                'selected-time-slot': selectedTimeSlotID === slot.id,
-              }"
+  <v-container>
+    <v-row v-if="meeting" justify="start">
+      <v-col cols="12" sm="8" md="8" lg="8" xl="6" xxl="5">
+        <v-card outlined>
+          <v-card-title> Meeting: {{ meeting.title }} </v-card-title>
+          <v-card-text>
+            Duration: {{ meeting.duration }} minutes
+            <v-divider class="my-3"></v-divider>
+            <div v-for="host in meeting.Hosts" :key="host.id">
+              <v-chip v-if="isHostInAvailableSlots(host.id)" class="mb-2">
+                {{ host.host_name }} is available for meetings
+              </v-chip>
+            </div>
+            <v-divider
+              class="my-3"
+              v-if="availableTimeSlots.length > 0"
+            ></v-divider>
+            <v-subheader>Available Time Slots:</v-subheader>
+            <v-virtual-scroll
+              :items="availableTimeSlots"
+              max-height="270"
+              v-if="availableTimeSlots.length > 0"
             >
-              Select
-            </button>
-          </li>
-        </ul>
-      </div>
-      <div v-else>
-        <h3>No available time slots for this day</h3>
-      </div>
-      <div v-if="selectedTimeSlotID >= 0">
-        <h4>Enter your details</h4>
-        <form @submit.prevent="scheduleMeeting">
-          <input
-            type="text"
-            v-model="candidateName"
-            placeholder="Your Name"
-            required
-          />
-          <input
-            type="email"
-            v-model="candidateEmail"
-            placeholder="Your Email"
-            required
-          />
-          <button type="submit">Submit</button>
-        </form>
-      </div>
-    </div>
-  </div>
+              <template v-slot:default="{ item }">
+                <v-list-item
+                  @click="selectTimePreference(item)"
+                  :active="item.id === selectedTimeSlotID"
+                >
+                  {{ formatDate(item.start_time) }} -
+                  {{ formatDate(item.end_time) }}
+                </v-list-item>
+              </template>
+            </v-virtual-scroll>
+            <div v-else>
+              <v-alert border="left" type="info" col="12"
+                >No available time slots for this day</v-alert
+              >
+            </div>
+          </v-card-text>
+        </v-card>
+      </v-col>
+      <v-col cols="12" sm="6" v-if="selectedTimeSlotID >= 0">
+        <v-card outlined>
+          <v-card-title>Enter your details</v-card-title>
+          <v-card-text>
+            <v-form @submit.prevent="scheduleMeeting">
+              <v-text-field
+                v-model="candidateName"
+                label="Your Name"
+                required
+              ></v-text-field>
+              <v-text-field
+                v-model="candidateEmail"
+                label="Your Email"
+                type="email"
+                required
+              ></v-text-field>
+              <v-btn type="submit" color="primary">Submit</v-btn>
+            </v-form>
+          </v-card-text>
+        </v-card>
+      </v-col>
+    </v-row>
+  </v-container>
 </template>
 
 <script>
@@ -65,6 +76,7 @@ export default {
       candidateName: "",
       candidateEmail: "",
       selectedTimeSlotID: -1,
+      selectedSlot: null,
     };
   },
   methods: {
@@ -73,13 +85,20 @@ export default {
     },
     selectTimePreference(selectedSlot) {
       this.selectedTimeSlotID = selectedSlot.id;
+      this.selectedSlot = selectedSlot;
     },
     scheduleMeeting() {
-      this.$emit("scheduleConfirmed");
+      this.$emit(
+        "scheduleMeeting",
+        this.selectedSlot,
+        this.candidateName,
+        this.candidateEmail
+      );
       // Reset form
       this.candidateName = "";
       this.candidateEmail = "";
       this.selectedTimeSlotID = -1;
+      this.selectedSlot = null;
     },
     formatDate(dateString) {
       const date = new Date(dateString);
@@ -91,10 +110,3 @@ export default {
   },
 };
 </script>
-
-<style>
-.selected-time-slot {
-  background-color: #4caf50;
-  color: white;
-}
-</style>
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 5e183d1..7290603 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -7,6 +7,9 @@ import * as components from "vuetify/components";
 import * as directives from "vuetify/directives";
 
 const vuetify = createVuetify({
+  theme: {
+    defaultTheme: "dark",
+  },
   components,
   directives,
 });
