diff --git a/apps/front/src/app.css b/apps/front/src/app.css
index 7b34a5c..77e8302 100644
--- a/apps/front/src/app.css
+++ b/apps/front/src/app.css
@@ -10,34 +10,35 @@
 		@apply text-base text-black;
 	}
 	.h1 {
-		@apply text-4xl font-semibold mb-4;
+		@apply text-4xl font-semibold;
 	}
 
 	.h2 {
-		@apply text-3xl font-semibold mb-3;
+		@apply text-3xl font-semibold;
 	}
 
 	.h3 {
-		@apply text-2xl font-medium mb-2;
+		@apply text-2xl font-medium;
 	}
 
 	.h4 {
-		@apply text-xl font-medium mb-2;
+		@apply text-xl font-medium;
 	}
 
 	.h5 {
-		@apply text-lg font-medium mb-2;
+		@apply text-lg font-medium;
 	}
 
 	.h6 {
-		@apply text-base font-medium mb-2;
+		@apply text-base font-medium;
 	}
 
 	.p {
-		@apply text-base mb-4;
+		@apply text-base;
 	}
 	.text-primary{@apply text-purple-600;}
 	.bg-primary{@apply bg-purple-900;}
+	.border-primary{@apply border-purple-600;}
 	.rounded-primary{@apply rounded-lg;}
 }
 
diff --git a/apps/front/src/routes/admin/+page.svelte b/apps/front/src/routes/admin/+page.svelte
index df8b4b3..97a98ff 100644
--- a/apps/front/src/routes/admin/+page.svelte
+++ b/apps/front/src/routes/admin/+page.svelte
@@ -1,3 +1,90 @@
-<h1 class="text-3xl font-bold text-center text-gray-900">
-    To be discussed...
-</h1>
+<script lang="ts">
+    const users = [
+        {
+            name: "Leslie Alexander",
+            username: "leslie.alexander",
+            role: "Viewer",
+        },
+        {
+            name: "Michael Foster",
+            username: "michael.foster",
+            role: "Viewer",
+        },
+        {
+            name: "Dries Vincent",
+            username: "dries.vincent",
+            role: "User",
+        },
+        {
+            name: "Lindsay Walton",
+            username: "lindsay.walton",
+            role: "User",
+        },
+        {
+            name: "Courtney Henry",
+            username: "courtney.henry",
+            role: "Operator",
+        },
+        {
+            name: "Tom Cook",
+            username: "tom.cook",
+            role: "Administrator",
+        }
+    ];
+</script>
+
+
+<section class="space-y-4 lg:space-y-8 max-w-5xl 2xl:max-w-6xl mx-auto">
+    <div class="flex items-center">
+        <h1 class="h1">
+            Users & Access Management
+        </h1>
+
+        <div class="ml-auto">
+            <button type="button" class="btn btn-primary">Add user</button>
+        </div>
+    </div>
+
+    <div class="-mx-4 lg:mx-0 overflow-x-auto p-px">
+        <div class="inline-block min-w-full py-2 align-middle">
+            <div class="overflow-hidden shadow ring-1 ring-black ring-opacity-5 lg:rounded-primary">
+                <table class="min-w-full divide-y divide-gray-300 text-sm">
+                    <thead class="bg-gray-50 font-medium">
+                    <tr>
+                        <th scope="col" class="py-3.5 pl-4 pr-3 text-left sm:pl-6">Name</th>
+                        <th scope="col" class="px-3 py-3.5 text-left">Username</th>
+                        <th scope="col" class="px-3 py-3.5 text-left">Role</th>
+                        <th scope="col" class="px-3 py-3.5 text-left">Comment</th>
+                        <th scope="col" class="relative py-3.5 pl-3 pr-4 sm:pr-6">
+                            <span class="sr-only">Edit</span>
+                        </th>
+                    </tr>
+                    </thead>
+                    <tbody class="divide-y divide-gray-200 bg-white text-gray-500">
+                    {#each users as user}
+                        <tr>
+                            <td class="whitespace-nowrap font-medium py-4 pl-4 pr-3 text-black sm:pl-6">{user.name}</td>
+                            <td class="whitespace-nowrap px-3 py-4 text-sm">{user.username}</td>
+                            <td class="whitespace-nowrap px-3 py-4 text-sm">
+                                {#if user.role.toLowerCase() === "administrator"}
+                                    <span class="-translate-x-2 inline-flex items-center rounded-primary px-2 py-1
+                                    text-primary border border-primary">
+                                        {user.role}
+                                    </span>
+                                {:else}
+                                    {user.role}
+                                {/if}
+                                </td>
+                            <td class="whitespace-nowrap px-3 py-4 text-sm"></td>
+                            <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right sm:pr-6">
+                                <a href="/" class="text-primary hover:underline">Edit<span class="sr-only">, {user.name}</span></a>
+                            </td>
+                        </tr>
+                    {/each}
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+</section>
+
diff --git a/apps/front/src/routes/schedule/+page.svelte b/apps/front/src/routes/schedule/+page.svelte
index b78e6a9..5466eca 100644
--- a/apps/front/src/routes/schedule/+page.svelte
+++ b/apps/front/src/routes/schedule/+page.svelte
@@ -2,7 +2,7 @@
 
 </script>
 
-<section class="space-y-4 lg:space-y-8">
+<section class="space-y-4 lg:space-y-8 max-w-5xl 2xl:max-w-6xl mx-auto">
     <h1 class="h1">
         Schedule
     </h1>
@@ -23,9 +23,9 @@
                         </th>
                     </tr>
                     </thead>
-                    <tbody class="divide-y divide-gray-200 bg-white text-gray-600">
+                    <tbody class="divide-y divide-gray-200 bg-white text-gray-500">
                     <tr>
-                        <td class="whitespace-nowrap py-4 pl-4 pr-3 text-black sm:pl-6">
+                        <td class="whitespace-nowrap font-medium py-4 pl-4 pr-3 text-black sm:pl-6">
                             <a href="/schedule/1/edit/" class="hover:underline">South entrance weekends</a>
                             </td>
                         <td class="whitespace-nowrap px-3 py-4">
@@ -44,7 +44,7 @@
                         </td>
                     </tr>
                     <tr>
-                        <td class="whitespace-nowrap py-4 pl-4 pr-3 text-black sm:pl-6">
+                        <td class="whitespace-nowrap font-medium py-4 pl-4 pr-3 text-black sm:pl-6">
                             <a href="/schedule/1/edit/" class="hover:underline">South entrance weekends</a>
                             </td>
                         <td class="whitespace-nowrap px-3 py-4">
@@ -63,7 +63,7 @@
                         </td>
                     </tr>
                     <tr>
-                        <td class="whitespace-nowrap py-4 pl-4 pr-3 text-black sm:pl-6">
+                        <td class="whitespace-nowrap font-medium py-4 pl-4 pr-3 text-black sm:pl-6">
                             <a href="/schedule/1/edit/" class="hover:underline">South entrance weekends</a>
                             </td>
                         <td class="whitespace-nowrap px-3 py-4">
@@ -82,7 +82,7 @@
                         </td>
                     </tr>
                     <tr>
-                        <td class="whitespace-nowrap py-4 pl-4 pr-3 text-black sm:pl-6">
+                        <td class="whitespace-nowrap font-medium py-4 pl-4 pr-3 text-black sm:pl-6">
                             <a href="/schedule/1/edit/" class="hover:underline">South entrance weekends</a>
                             </td>
                         <td class="whitespace-nowrap px-3 py-4">