diff --git a/Gemfile.lock b/Gemfile.lock
index 4bfc577..2eece38 100644
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -149,6 +149,8 @@ GEM
     net-smtp (0.5.0)
       net-protocol
     nio4r (2.7.3)
+    nokogiri (1.16.5-arm64-darwin)
+      racc (~> 1.4)
     nokogiri (1.16.5-x86_64-linux)
       racc (~> 1.4)
     psych (5.1.2)
@@ -219,11 +221,14 @@ GEM
       actionpack (>= 5.2)
       activesupport (>= 5.2)
       sprockets (>= 3.0.0)
+    sqlite3 (1.7.3-arm64-darwin)
     sqlite3 (1.7.3-x86_64-linux)
     stimulus-rails (1.3.3)
       railties (>= 6.0.0)
     stringio (3.1.0)
     strscan (3.1.0)
+    tailwindcss-rails (2.6.0-arm64-darwin)
+      railties (>= 7.0.0)
     tailwindcss-rails (2.6.0-x86_64-linux)
       railties (>= 7.0.0)
     thor (1.3.1)
@@ -249,6 +254,7 @@ GEM
     zeitwerk (2.6.14)
 
 PLATFORMS
+  arm64-darwin-23
   x86_64-linux
 
 DEPENDENCIES
diff --git a/app/assets/stylesheets/application.tailwind.css b/app/assets/stylesheets/application.tailwind.css
index 16f48d0..08d74a7 100644
--- a/app/assets/stylesheets/application.tailwind.css
+++ b/app/assets/stylesheets/application.tailwind.css
@@ -10,15 +10,4 @@
   }
 }
 
-*/
-body  {
-    height: 100vw;
-    overflow: hidden;
-}
-
-toastui-calendar-time {
-    height: 100% !important;
-}
-
-.toastui-calendar-timegrid { height: 100%;  }
-.toastui-calendar-panel.toastui-calendar-time { overflow-y: inherit; }
\ No newline at end of file
+*/
\ No newline at end of file
diff --git a/app/assets/stylesheets/calendar.tailwind.css b/app/assets/stylesheets/calendar.tailwind.css
new file mode 100644
index 0000000..575ee47
--- /dev/null
+++ b/app/assets/stylesheets/calendar.tailwind.css
@@ -0,0 +1,24 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/*
+
+@layer components {
+  .btn-primary {
+    @apply py-2 px-4 bg-blue-200;
+  }
+}
+
+*/
+body.calendar  {
+    height: 99vw;
+    overflow: hidden;
+}
+
+toastui-calendar-time {
+    height: 99% !important;
+}
+
+.toastui-calendar-timegrid { height: 99%;  }
+.toastui-calendar-panel.toastui-calendar-time { overflow-y: inherit; }
\ No newline at end of file
diff --git a/app/controllers/reservations_controller.rb b/app/controllers/reservations_controller.rb
index c9bfab0..20e02f3 100644
--- a/app/controllers/reservations_controller.rb
+++ b/app/controllers/reservations_controller.rb
@@ -5,7 +5,6 @@ class ReservationsController < ApplicationController
   layout :determine_layout
   # GET /reservations or /reservations.json
   def index
-
     @reservations = Reservation.all.includes(:team, :customer).where(company: @company)
     @reservations = ActiveModelSerializers::SerializableResource.new(@reservations).as_json
   end
diff --git a/app/javascript/controllers/main_calendar_controller.js b/app/javascript/controllers/main_calendar_controller.js
index 8f88137..627ff1b 100644
--- a/app/javascript/controllers/main_calendar_controller.js
+++ b/app/javascript/controllers/main_calendar_controller.js
@@ -27,7 +27,7 @@ export default class extends Controller {
       ],
     });
 
-    this.calendar = calendar;
+    window.calendar = calendar;
     this.getCalendardata();
     calendar.render();
   }
@@ -36,11 +36,11 @@ export default class extends Controller {
     var reservations = JSON.parse(document.querySelector("#main-calendar").dataset.reservations);
     window.reservations = reservations;
     reservations.forEach(reservation => {
-      this.calendar.createSchedules([
+      window.calendar.createEvents([
         {
           id: reservation.id,
           calendarId: 'cal1',
-          title: reservation.customer,
+          title: reservation.customer.name,
           category: 'time',
           dueDateClass: reservation.dueDateClass,
           location: reservation.team.name,
diff --git a/app/models/reservation.rb b/app/models/reservation.rb
index 98514c9..51cbd91 100644
--- a/app/models/reservation.rb
+++ b/app/models/reservation.rb
@@ -7,3 +7,7 @@ class Reservation < ApplicationRecord
   validates :customer_id, presence: true
   validates :team_id, presence: true
 end
+
+class ReservationSerializer < ActiveModel::Serializer
+  attributes :id, :company, :customer, :team, :start_time, :end_time
+end
\ No newline at end of file
diff --git a/app/views/layouts/calendar.html.erb b/app/views/layouts/calendar.html.erb
index fc7f371..7ea68d4 100644
--- a/app/views/layouts/calendar.html.erb
+++ b/app/views/layouts/calendar.html.erb
@@ -8,12 +8,12 @@
     <link rel="stylesheet" href="https://uicdn.toast.com/calendar/latest/toastui-calendar.min.css" />
     <script src="https://uicdn.toast.com/calendar/latest/toastui-calendar.min.js"></script>
     <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>
-    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
+    <%= stylesheet_link_tag "calendar.tailwind", "data-turbo-track": "reload" %>
 
     <%= javascript_importmap_tags %>
   </head>
 
-  <body>
+  <body class="calendar">
     <main style="height: 100vw;">
       <%= yield %>
     </main>