diff --git a/.github/ISSUE_TEMPLATE/default-issue.md b/.github/ISSUE_TEMPLATE/default-issue.md
index a52e3236..3b227c69 100644
--- a/.github/ISSUE_TEMPLATE/default-issue.md
+++ b/.github/ISSUE_TEMPLATE/default-issue.md
@@ -1,10 +1,9 @@
 ---
 name: Default Issue
 about: Default template for issues
-title: ''
-labels: ''
-assignees: ''
-
+title: ""
+labels: ""
+assignees: ""
 ---
 
 ## Description
@@ -12,5 +11,6 @@ assignees: ''
 <! -- ### Deadline-->
 
 ## TODOs
+
 - [ ] First
 - [ ] Second
diff --git a/package.json b/package.json
index da204318..5703269d 100644
--- a/package.json
+++ b/package.json
@@ -56,6 +56,7 @@
     "prettier-plugin-packagejson": "2.4.6",
     "prettier-plugin-prisma": "5.0.0",
     "prettier-plugin-svelte": "3.1.2",
+    "prettier-plugin-tailwindcss": "^0.5.9",
     "prisma": "5.6.0",
     "sst": "2.36.6",
     "svelte": "4.2.7",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ecf6164d..f029ab07 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -109,6 +109,9 @@ devDependencies:
   prettier-plugin-svelte:
     specifier: 3.1.2
     version: 3.1.2(prettier@3.1.0)(svelte@4.2.7)
+  prettier-plugin-tailwindcss:
+    specifier: ^0.5.9
+    version: 0.5.9(prettier-plugin-svelte@3.1.2)(prettier@3.1.0)
   prisma:
     specifier: 5.6.0
     version: 5.6.0
@@ -7883,6 +7886,59 @@ packages:
       svelte: 4.2.7
     dev: true
 
+  /prettier-plugin-tailwindcss@0.5.9(prettier-plugin-svelte@3.1.2)(prettier@3.1.0):
+    resolution: {integrity: sha512-9x3t1s2Cjbut2QiP+O0mDqV3gLXTe2CgRlQDgucopVkUdw26sQi53p/q4qvGxMLBDfk/dcTV57Aa/zYwz9l8Ew==}
+    engines: {node: '>=14.21.3'}
+    peerDependencies:
+      '@ianvs/prettier-plugin-sort-imports': '*'
+      '@prettier/plugin-pug': '*'
+      '@shopify/prettier-plugin-liquid': '*'
+      '@trivago/prettier-plugin-sort-imports': '*'
+      prettier: ^3.0
+      prettier-plugin-astro: '*'
+      prettier-plugin-css-order: '*'
+      prettier-plugin-import-sort: '*'
+      prettier-plugin-jsdoc: '*'
+      prettier-plugin-marko: '*'
+      prettier-plugin-organize-attributes: '*'
+      prettier-plugin-organize-imports: '*'
+      prettier-plugin-style-order: '*'
+      prettier-plugin-svelte: '*'
+      prettier-plugin-twig-melody: '*'
+    peerDependenciesMeta:
+      '@ianvs/prettier-plugin-sort-imports':
+        optional: true
+      '@prettier/plugin-pug':
+        optional: true
+      '@shopify/prettier-plugin-liquid':
+        optional: true
+      '@trivago/prettier-plugin-sort-imports':
+        optional: true
+      prettier-plugin-astro:
+        optional: true
+      prettier-plugin-css-order:
+        optional: true
+      prettier-plugin-import-sort:
+        optional: true
+      prettier-plugin-jsdoc:
+        optional: true
+      prettier-plugin-marko:
+        optional: true
+      prettier-plugin-organize-attributes:
+        optional: true
+      prettier-plugin-organize-imports:
+        optional: true
+      prettier-plugin-style-order:
+        optional: true
+      prettier-plugin-svelte:
+        optional: true
+      prettier-plugin-twig-melody:
+        optional: true
+    dependencies:
+      prettier: 3.1.0
+      prettier-plugin-svelte: 3.1.2(prettier@3.1.0)(svelte@4.2.7)
+    dev: true
+
   /prettier@3.1.0:
     resolution: {integrity: sha512-TQLvXjq5IAibjh8EpBIkNKxO749UEWABoiIZehEPiY4GNpVdhaFKqSTu+QrlU6D2dPAfubRmtJTi4K4YkQ5eXw==}
     engines: {node: '>=14'}
diff --git a/prettier.config.cjs b/prettier.config.cjs
index d5d22d34..5b566a06 100644
--- a/prettier.config.cjs
+++ b/prettier.config.cjs
@@ -7,7 +7,12 @@
  */
 const config = {
   printWidth: 100,
-  plugins: ["prettier-plugin-packagejson", "prettier-plugin-prisma", "prettier-plugin-svelte"],
+  plugins: [
+    "prettier-plugin-packagejson",
+    "prettier-plugin-prisma",
+    "prettier-plugin-svelte",
+    "prettier-plugin-tailwindcss",
+  ],
   overrides: [{ files: "*.svelte", options: { parser: "svelte" } }],
 };
 
diff --git a/src/lib/components/summary/GroupsCarousel.svelte b/src/lib/components/summary/GroupsCarousel.svelte
index 194a3573..69121f14 100644
--- a/src/lib/components/summary/GroupsCarousel.svelte
+++ b/src/lib/components/summary/GroupsCarousel.svelte
@@ -2,14 +2,14 @@
   import { groups } from "$lib/stores/summaryStores";
 </script>
 
-<div class="flex gap-2 overflow-x-auto md:gap-4 snap-x snap-mandatory scroll-smooth">
+<div class="flex snap-x snap-mandatory gap-2 overflow-x-auto scroll-smooth md:gap-4">
   {#each $groups as group (group.id)}
     <a href={group.link} target="_blank" referrerpolicy="no-referrer">
       <div
-        class="flex h-24 p-3 bg-center bg-cover rounded-lg md:h-36 snap-start w-36 md:w-64 card"
+        class="card flex h-24 w-36 snap-start rounded-lg bg-cover bg-center p-3 md:h-36 md:w-64"
         style="background-image:url({group.img})"
       >
-        <p class="mt-auto text-lg font-bold text-white md:text-xl line-clamp-2 max-h-12">
+        <p class="mt-auto line-clamp-2 max-h-12 text-lg font-bold text-white md:text-xl">
           {group.name}
         </p>
       </div>
diff --git a/src/lib/components/summary/ScheduledMeetingsList.svelte b/src/lib/components/summary/ScheduledMeetingsList.svelte
index 5fce228b..eb19d8ce 100644
--- a/src/lib/components/summary/ScheduledMeetingsList.svelte
+++ b/src/lib/components/summary/ScheduledMeetingsList.svelte
@@ -14,30 +14,30 @@
 </script>
 
 {#each Object.keys(sortedMeetings) as date}
-  <div class="p-2 card variant-glass">
+  <div class="card variant-glass p-2">
     <h2 class="mb-2 text-xl font-bold md:text-2xl">{convertIsoToWeekdayDate(date)}</h2>
 
     <div class="flex flex-col gap-2">
       {#each sortedMeetings[date] as meeting}
         <div
-          class="flex flex-col justify-between gap-4 p-3 bg-center bg-cover rounded-lg md:items-center h-fit md:flex-row card hover:variant-ghost"
+          class="card flex h-fit flex-col justify-between gap-4 rounded-lg bg-cover bg-center p-3 hover:variant-ghost md:flex-row md:items-center"
         >
-          <div class="flex flex-wrap items-center justify-between w-full gap-2">
+          <div class="flex w-full flex-wrap items-center justify-between gap-2">
             <div class="flex flex-col gap-y-1">
               <a href={meeting.link} target="_blank" referrerpolicy="no-referrer">
-                <p class="text-xl font-bold md:text-2xl line-clamp-1 max-h-12">
+                <p class="line-clamp-1 max-h-12 text-xl font-bold md:text-2xl">
                   {meeting.name}
                 </p>
               </a>
 
               <div class="flex flex-row flex-wrap gap-x-4">
-                <p class="flex items-center gap-1 text-md md:text-lg">
+                <p class="text-md flex items-center gap-1 md:text-lg">
                   <ClockIcon />
                   {convertTo12HourFormat(meeting.startTime)} - {convertTo12HourFormat(
                     meeting.endTime,
                   )}
                 </p>
-                <p class="flex items-center gap-1 text-md md:text-lg">
+                <p class="text-md flex items-center gap-1 md:text-lg">
                   <LocationIcon />
                   {meeting.location}
                 </p>
@@ -45,9 +45,9 @@
             </div>
           </div>
 
-          <div class="flex justify-center w-full md:w-fit">
+          <div class="flex w-full justify-center md:w-fit">
             <RadioGroup
-              class="flex items-center h-fit w-fit"
+              class="flex h-fit w-fit items-center"
               active="variant-filled-primary"
               hover="hover:variant-soft-primary"
             >
diff --git a/src/lib/components/summary/UnscheduledMeetingsList.svelte b/src/lib/components/summary/UnscheduledMeetingsList.svelte
index 3bd873a6..c87491bc 100644
--- a/src/lib/components/summary/UnscheduledMeetingsList.svelte
+++ b/src/lib/components/summary/UnscheduledMeetingsList.svelte
@@ -15,26 +15,26 @@
 <div class="flex flex-col gap-2">
   {#each sortedMeetings as meeting}
     <div
-      class="flex flex-col justify-between gap-4 p-3 bg-center bg-cover rounded-lg md:items-center h-fit md:flex-row card hover:variant-ghost"
+      class="card flex h-fit flex-col justify-between gap-4 rounded-lg bg-cover bg-center p-3 hover:variant-ghost md:flex-row md:items-center"
     >
-      <div class="flex flex-wrap items-center justify-between w-full gap-2">
+      <div class="flex w-full flex-wrap items-center justify-between gap-2">
         <div class="flex flex-col gap-y-1">
           <a href={meeting.link} target="_blank" referrerpolicy="no-referrer">
-            <p class="text-xl font-bold md:text-2xl line-clamp-1 max-h-12">
+            <p class="line-clamp-1 max-h-12 text-xl font-bold md:text-2xl">
               {meeting.name}
             </p>
           </a>
 
           <div class="flex flex-row flex-wrap gap-x-4">
-            <p class="flex items-center gap-1 text-md md:text-lg">
+            <p class="text-md flex items-center gap-1 md:text-lg">
               <CalendarIcon />
               {convertIsoToDate(meeting.startDate)} - {convertIsoToDate(meeting.endDate)}
             </p>
-            <p class="flex items-center gap-1 text-md md:text-lg">
+            <p class="text-md flex items-center gap-1 md:text-lg">
               <ClockIcon />
               {convertTo12HourFormat(meeting.startTime)} - {convertTo12HourFormat(meeting.endTime)}
             </p>
-            <p class="flex items-center gap-1 text-md md:text-lg">
+            <p class="text-md flex items-center gap-1 md:text-lg">
               <LocationIcon />
               {meeting.location}
             </p>
diff --git a/src/routes/summary/+page.svelte b/src/routes/summary/+page.svelte
index 590b149e..3da25820 100644
--- a/src/routes/summary/+page.svelte
+++ b/src/routes/summary/+page.svelte
@@ -12,13 +12,13 @@
 
 <div class="flex flex-col gap-8 px-4 pt-8 md:px-32">
   <div class="flex flex-col gap-4">
-    <h1 class="text-4xl font-bold border-b border-surface-400-500-token">Groups</h1>
+    <h1 class="border-surface-400-500-token border-b text-4xl font-bold">Groups</h1>
     <GroupList />
   </div>
 
   <div class="flex flex-col gap-4">
     <TabGroup>
-      <div class="flex flex-col w-full gap-x-10 gap-y-2">
+      <div class="flex w-full flex-col gap-x-10 gap-y-2">
         <h1 class="text-4xl font-bold">Meetings</h1>
         <div class="flex justify-center gap-5">
           <Tab bind:group={tabSet} name="scheduledTab" value={0}>Scheduled</Tab>