diff --git a/apps/front/src/app.css b/apps/front/src/app.css
index 102cdcf..7b34a5c 100644
--- a/apps/front/src/app.css
+++ b/apps/front/src/app.css
@@ -3,52 +3,62 @@
 @tailwind utilities;
 
 @layer base {
-	.poppins-light {
-		font-family: "Poppins", sans-serif;
-		font-weight: 300;
-		font-style: normal;
-	}
-
-	.poppins-regular {
+	html {
 		font-family: "Poppins", sans-serif;
 		font-weight: 400;
 		font-style: normal;
+		@apply text-base text-black;
+	}
+	.h1 {
+		@apply text-4xl font-semibold mb-4;
 	}
 
-	.poppins-medium {
-		font-family: "Poppins", sans-serif;
-		font-weight: 500;
-		font-style: normal;
+	.h2 {
+		@apply text-3xl font-semibold mb-3;
 	}
 
-	.poppins-semibold {
-		font-family: "Poppins", sans-serif;
-		font-weight: 600;
-		font-style: normal;
+	.h3 {
+		@apply text-2xl font-medium mb-2;
 	}
-	html {
-		@apply poppins-regular text-base text-black;
+
+	.h4 {
+		@apply text-xl font-medium mb-2;
 	}
+
+	.h5 {
+		@apply text-lg font-medium mb-2;
+	}
+
+	.h6 {
+		@apply text-base font-medium mb-2;
+	}
+
+	.p {
+		@apply text-base mb-4;
+	}
+	.text-primary{@apply text-purple-600;}
+	.bg-primary{@apply bg-purple-900;}
+	.rounded-primary{@apply rounded-lg;}
 }
 
 @layer components {
 	.btn {
 		@apply cursor-pointer flex items-center justify-center gap-2;
-		@apply rounded-lg px-4 h-12 text-white;
+		@apply rounded-primary px-6 h-12 text-white;
 		@apply focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2;
 	}
 
 	.btn-primary {
-		@apply bg-purple-900 text-purple-50 hover:bg-purple-600 focus-visible:outline-purple-600;
+		@apply bg-primary text-purple-50 hover:bg-purple-600 focus-visible:outline-purple-600;
 	}
 
 	.input{
-		@apply block w-full h-12 rounded-lg border border-gray-300 text-gray-900;
+		@apply block w-full h-12 rounded-primary border border-gray-300 text-gray-900;
 		@apply placeholder:text-gray-500;
-		@apply focus:border-purple-900 focus:ring-1 focus:ring-inset focus:ring-transparent;
+		@apply focus:border-purple-600 focus:ring-1 focus:ring-inset focus:ring-transparent;
 	}
 
 	.label{
-		@apply block text-black;
+		@apply block text-black text-sm;
 	}
 }
diff --git a/apps/front/src/lib/client/components/icons/calendarDays.svelte b/apps/front/src/lib/client/components/icons/calendarDays.svelte
new file mode 100644
index 0000000..ba92527
--- /dev/null
+++ b/apps/front/src/lib/client/components/icons/calendarDays.svelte
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
+     class="shrink-0 {$$props.size ? `size-${$$props.size}` : 'size-6'} {$$props.class || ''}">
+    <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5m-9-6h.008v.008H12v-.008ZM12 15h.008v.008H12V15Zm0 2.25h.008v.008H12v-.008ZM9.75 15h.008v.008H9.75V15Zm0 2.25h.008v.008H9.75v-.008ZM7.5 15h.008v.008H7.5V15Zm0 2.25h.008v.008H7.5v-.008Zm6.75-4.5h.008v.008h-.008v-.008Zm0 2.25h.008v.008h-.008V15Zm0 2.25h.008v.008h-.008v-.008Zm2.25-4.5h.008v.008H16.5v-.008Zm0 2.25h.008v.008H16.5V15Z" />
+</svg>
diff --git a/apps/front/src/lib/client/components/icons/index.ts b/apps/front/src/lib/client/components/icons/index.ts
index 0b4aa1f..3e7d1b7 100644
--- a/apps/front/src/lib/client/components/icons/index.ts
+++ b/apps/front/src/lib/client/components/icons/index.ts
@@ -4,6 +4,7 @@ export { default as IconBars3 } from './bars3.svelte';
 export { default as IconBell } from './bell.svelte';
 export { default as IconBuildingOffice2 } from './buildingOffice2.svelte';
 export { default as IconBulb } from './bulb.svelte';
+export { default as IconCalendarDays } from './calendarDays.svelte';
 export { default as IconChartPie } from './chartPie.svelte';
 export { default as IconCheck } from './check.svelte';
 export { default as IconCog6Tooth } from './cog6tooth.svelte';
diff --git a/apps/front/src/lib/client/components/login.svelte b/apps/front/src/lib/client/components/login.svelte
index cefb0e1..37ee583 100644
--- a/apps/front/src/lib/client/components/login.svelte
+++ b/apps/front/src/lib/client/components/login.svelte
@@ -7,7 +7,7 @@
 	<h2 class="mt-20 mb-10 text-center text-2xl font-semibold leading-9 text-gray-900">Sign in to your account</h2>
 
 	<div class="mx-auto w-full max-w-md">
-		<div class="bg-white p-6 lg:py-12 rounded-lg sm:px-12 shadow-sm">
+		<div class="bg-white p-6 lg:py-12 rounded-primary sm:px-12 shadow-sm">
 			<form class="space-y-6" on:submit|preventDefault={auth.signIn}>
 				<div>
 					<label for="email" class="label">Username</label>
diff --git a/apps/front/src/lib/client/components/nav.svelte b/apps/front/src/lib/client/components/nav.svelte
index c80b6f4..28ae5a8 100644
--- a/apps/front/src/lib/client/components/nav.svelte
+++ b/apps/front/src/lib/client/components/nav.svelte
@@ -3,6 +3,7 @@
 	import { page } from '$app/stores';
 	import {
 		IconBell,
+		IconCalendarDays,
 		IconChartPie,
 		IconCog6Tooth,
 		IconCpuChip,
@@ -26,22 +27,18 @@
 		{ name: 'Devices', href: '/devices', Icon: IconCpuChip },
 		{ name: 'Fault', href: '/fault', Icon: IconExclamationTriangle },
 		{ name: 'Notifications', href: '/notifications', Icon: IconBell },
+		{ name: 'Schedule', href: '/schedule', Icon: IconCalendarDays },
 		{ name: 'Admin', href: '/admin', Icon: IconUser },
 		{ name: 'Reports', href: '/reports', Icon: IconChartPie },
 		{ name: 'Settings', href: '/settings', Icon: IconCog6Tooth }
 	];
-	const activeClasses = 'bg-gray-800 text-white';
-	const inactiveClasses = 'text-gray-400 hover:text-white hover:bg-gray-800';
-	const baseClasses = 'group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold';
+	const activeClasses = 'bg-purple-950 text-purple-100';
+	const inactiveClasses = 'text-purple-100 hover:text-white hover:bg-purple-950';
+	const baseClasses = 'group flex gap-x-3 rounded-primary p-2 text-sm leading-6';
 </script>
 
 <div class="flex gap-4 h-16 shrink-0 items-center">
-	<img
-			class="h-8 w-auto"
-			src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500"
-			alt="Your Company"
-	/>
-	<h3 class="text-white">GB Lux</h3>
+	<h3 class="text-purple-100 font-semibold text-xl">GB Lux</h3>
 </div>
 <nav class="flex flex-1 flex-col">
 	<ul role="list" class="flex flex-1 flex-col -mx-2 space-y-1">
diff --git a/apps/front/src/lib/client/components/table.svelte b/apps/front/src/lib/client/components/table.svelte
index 03d9518..c528aa4 100644
--- a/apps/front/src/lib/client/components/table.svelte
+++ b/apps/front/src/lib/client/components/table.svelte
@@ -18,7 +18,7 @@
 		<div class="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
 			<a
 				href={addLink}
-				class="flex gap-1 items-center rounded-md bg-indigo-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+				class="flex gap-1 items-center rounded-primary bg-indigo-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
 			>
 				<svg
 					xmlns="http://www.w3.org/2000/svg"
@@ -38,7 +38,7 @@
 	{/if}
 </div>
 <div class="flex flex-col">
-	<div class="min-w-full overflow-hidden overflow-x-auto align-middle shadow sm:rounded-lg">
+	<div class="min-w-full overflow-hidden overflow-x-auto align-middle shadow sm:rounded-primary">
 		<table class="min-w-full divide-y divide-gray-200">
 			<thead>
 				<tr
@@ -123,12 +123,12 @@
 			<div class="flex flex-1 justify-between gap-x-3 sm:justify-end">
 				<a
 					href={link}
-					class="relative inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:ring-gray-400"
+					class="relative inline-flex items-center rounded-primary bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:ring-gray-400"
 					>Previous</a
 				>
 				<a
 					href={link}
-					class="relative inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:ring-gray-400"
+					class="relative inline-flex items-center rounded-primary bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:ring-gray-400"
 					>Next</a
 				>
 			</div>
diff --git a/apps/front/src/lib/client/components/toggle.svelte b/apps/front/src/lib/client/components/toggle.svelte
index 07ad27f..b650d01 100644
--- a/apps/front/src/lib/client/components/toggle.svelte
+++ b/apps/front/src/lib/client/components/toggle.svelte
@@ -1,17 +1,20 @@
 <script lang="ts">
+	import { createEventDispatcher } from 'svelte';
 	export let initialValue: boolean = false;
 
 	let enabled: boolean = initialValue;
+	const dispatch = createEventDispatcher();
 
 	const toggleSwitch = (): void => {
 		enabled = !enabled;
+		dispatch('toggle', enabled);
 	};
 </script>
 
 <button
 	type="button"
-	class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2"
-	class:bg-indigo-600={enabled}
+	class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-purple-900 focus:ring-offset-2"
+	class:bg-purple-900={enabled}
 	class:bg-gray-200={!enabled}
 	role="switch"
 	aria-checked={enabled}
diff --git a/apps/front/src/lib/client/components/weekCheckbox.svelte b/apps/front/src/lib/client/components/weekCheckbox.svelte
new file mode 100644
index 0000000..794b43d
--- /dev/null
+++ b/apps/front/src/lib/client/components/weekCheckbox.svelte
@@ -0,0 +1,2 @@
+<div class="flex gap-1 sm:gap-2"> <label class="cursor-pointer flex items-center justify-center relative rounded-full size-12"> <input checked class="border-0 h-0 opacity-0 peer/checkbox w-0" type="checkbox" id="monday" name="week-days"> <span class="peer-checked/checkbox:text-purple-50 text-sm z-10">Mon</span> <span class="inset-0 absolute bg-gray-200 inline-block peer-checked/checkbox:bg-primary rounded-full z-0"></span> </label> <label class="cursor-pointer flex items-center justify-center relative rounded-full size-12"> <input checked class="border-0 h-0 opacity-0 peer/checkbox w-0" type="checkbox" id="tuesday" name="week-days"> <span class="peer-checked/checkbox:text-purple-50 text-sm z-10">Tue</span> <span class="inset-0 absolute bg-gray-200 inline-block peer-checked/checkbox:bg-primary rounded-full z-0"></span> </label> <label class="cursor-pointer flex items-center justify-center relative rounded-full size-12"> <input class="border-0 h-0 opacity-0 peer/checkbox w-0" type="checkbox" id="wednesday" name="week-days"> <span class="peer-checked/checkbox:text-purple-50 text-sm z-10">Wed</span> <span class="inset-0 absolute bg-gray-200 inline-block peer-checked/checkbox:bg-primary rounded-full z-0"></span> </label> <label class="cursor-pointer flex items-center justify-center relative rounded-full size-12"> <input checked class="border-0 h-0 opacity-0 peer/checkbox w-0" type="checkbox" id="thursday" name="week-days"> <span class="peer-checked/checkbox:text-purple-50 text-sm z-10">Thu</span> <span class="inset-0 absolute bg-gray-200 inline-block peer-checked/checkbox:bg-primary rounded-full z-0"></span> </label> <label class="cursor-pointer flex items-center justify-center relative rounded-full size-12"> <input class="border-0 h-0 opacity-0 peer/checkbox w-0" type="checkbox" id="friday" name="week-days"> <span class="peer-checked/checkbox:text-purple-50 text-sm z-10">Fri</span> <span class="inset-0 absolute bg-gray-200 inline-block peer-checked/checkbox:bg-primary rounded-full z-0"></span> </label> <label class="cursor-pointer flex items-center justify-center relative rounded-full size-12"> <input class="border-0 h-0 opacity-0 peer/checkbox w-0" type="checkbox" id="saturday" name="week-days"> <span class="peer-checked/checkbox:text-purple-50 text-sm z-10">Sat</span> <span class="inset-0 absolute bg-gray-200 inline-block peer-checked/checkbox:bg-primary rounded-full z-0"></span> </label> <label class="cursor-pointer flex items-center justify-center relative rounded-full size-12"> <input class="border-0 h-0 opacity-0 peer/checkbox w-0" type="checkbox" id="sunday" name="week-days"> <span class="peer-checked/checkbox:text-purple-50 text-sm z-10">Sun</span> <span class="inset-0 absolute bg-gray-200 inline-block peer-checked/checkbox:bg-primary rounded-full z-0"></span> </label> </div>
+
diff --git a/apps/front/src/routes/+layout.svelte b/apps/front/src/routes/+layout.svelte
index 38c79fd..6b33a78 100644
--- a/apps/front/src/routes/+layout.svelte
+++ b/apps/front/src/routes/+layout.svelte
@@ -46,7 +46,7 @@
 
 					<!-- Sidebar component -->
 					<div
-						class="flex grow flex-col gap-y-5 overflow-y-auto bg-gray-900 px-6 pb-4 ring-1 ring-white/10"
+						class="flex grow flex-col gap-y-5 overflow-y-auto bg-primary px-6 pb-4 ring-1 ring-white/10"
 					>
 						<Nav />
 					</div>
@@ -58,7 +58,7 @@
 		<!-- Static sidebar for desktop -->
 		<div class="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-72 lg:flex-col">
 			<!-- Sidebar component -->
-			<div class="flex grow flex-col gap-y-5 overflow-y-auto bg-gray-900 px-6 pb-4">
+			<div class="flex grow flex-col gap-y-5 overflow-y-auto bg-primary px-6 pb-4">
 				<Nav />
 			</div>
 		</div>
@@ -73,7 +73,7 @@
 				</button>
 
 				<!-- Separator -->
-				<div class="h-6 w-px bg-gray-900/10 lg:hidden" aria-hidden="true"></div>
+				<div class="h-6 w-px bg-primary/10 lg:hidden" aria-hidden="true"></div>
 
 				<div class="flex flex-1 gap-x-4 self-stretch lg:gap-x-6">
 					<form class="relative flex flex-1" action="#" method="GET">
@@ -94,7 +94,7 @@
 						</button>
 
 						<!-- Separator -->
-						<div class="hidden lg:block lg:h-6 lg:w-px lg:bg-gray-900/10" aria-hidden="true"></div>
+						<div class="hidden lg:block lg:h-6 lg:w-px lg:bg-primary/10" aria-hidden="true"></div>
 
 						<!-- Profile dropdown -->
 						<div class="relative">
@@ -114,7 +114,7 @@
 								/>
 								<span class="hidden lg:flex lg:items-center">
 									<span
-										class="ml-4 text-sm font-semibold leading-6 text-gray-900"
+										class="ml-4 text-sm leading-6 text-gray-900"
 										aria-hidden="true">Tom Cook</span
 									>
 									<svg
@@ -144,7 +144,7 @@
 							-->
 							{#if isDropdownOpen}
 								<div
-									class="absolute right-0 z-10 mt-2.5 w-32 origin-top-right rounded-md bg-white py-2 shadow-lg ring-1 ring-gray-900/5 focus:outline-none"
+									class="absolute right-0 z-10 mt-2.5 w-32 origin-top-right rounded-primary bg-white py-2 shadow-lg ring-1 ring-gray-900/5 focus:outline-none"
 									role="menu"
 									aria-orientation="vertical"
 									aria-labelledby="user-menu-button"
diff --git a/apps/front/src/routes/+page.svelte b/apps/front/src/routes/+page.svelte
index 9a1ad5d..7ee623a 100644
--- a/apps/front/src/routes/+page.svelte
+++ b/apps/front/src/routes/+page.svelte
@@ -16,7 +16,7 @@
 	<ul
 		role="list"
 		class="grid grid-cols-1 gap-x-6 gap-y-8 md:grid-cols-3 xl:gap-x-8
-	*:overflow-hidden *:rounded-xl *:border *:border-gray-200 *:bg-white"
+	*:overflow-hidden *:rounded-primary *:border *:border-gray-200 *:bg-white"
 	>
 		<li>
 			<div class="flex items-center gap-2 bg-gray-50 p-5">
@@ -102,7 +102,7 @@
 	</ul>
 
 	<!--Map-->
-	<div class="h-96 relative overflow-hidden rounded-xl border border-gray-200 bg-white">
+	<div class="h-96 relative overflow-hidden rounded-primary border border-gray-200 bg-white">
 		<img class="brightness-85" src="../img/map.png" width="2414" height="2008" alt="Map example" />
 		<ul>
 			<li class="absolute top-[30%] left-[53%] cursor-pointer">
@@ -130,7 +130,7 @@
 
 	<ul
 			class="grid grid-cols-1 gap-x-6 gap-y-8 md:grid-cols-3 xl:gap-x-8
-	*:overflow-hidden *:rounded-xl *:border *:border-gray-200 *:bg-white"
+	*:overflow-hidden *:rounded-primary *:border *:border-gray-200 *:bg-white"
 	>
 		<li>
 			<ChartMotion />
diff --git a/apps/front/src/routes/devices/+page.svelte b/apps/front/src/routes/devices/+page.svelte
index 7a4dac1..2d2b656 100644
--- a/apps/front/src/routes/devices/+page.svelte
+++ b/apps/front/src/routes/devices/+page.svelte
@@ -16,7 +16,7 @@
 			<select
 				id="tabs"
 				name="tabs"
-				class="block w-full rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500"
+				class="block w-full rounded-primary border-gray-300 focus:border-indigo-500 focus:ring-indigo-500"
 				bind:value={selectedTab}
 				on:change={handleTabChange}
 			>
@@ -70,7 +70,7 @@
 					>
 				</div>
 			</div>
-			<div class="min-w-full overflow-hidden overflow-x-auto align-middle shadow sm:rounded-lg">
+			<div class="min-w-full overflow-hidden overflow-x-auto align-middle shadow sm:rounded-primary">
 				<table class="min-w-full divide-y divide-gray-200">
 					<thead>
 						<tr
@@ -150,7 +150,7 @@
 					>
 				</div>
 			</div>
-			<div class="min-w-full overflow-hidden overflow-x-auto align-middle shadow sm:rounded-lg">
+			<div class="min-w-full overflow-hidden overflow-x-auto align-middle shadow sm:rounded-primary">
 				<table class="min-w-full divide-y divide-gray-200">
 					<thead>
 						<tr
@@ -230,7 +230,7 @@
 					>
 				</div>
 			</div>
-			<div class="min-w-full overflow-hidden overflow-x-auto align-middle shadow sm:rounded-lg">
+			<div class="min-w-full overflow-hidden overflow-x-auto align-middle shadow sm:rounded-primary">
 				<table class="min-w-full divide-y divide-gray-200">
 					<thead>
 						<tr
diff --git a/apps/front/src/routes/devices/1/+page.svelte b/apps/front/src/routes/devices/1/+page.svelte
index 02e9d0a..b9e14dd 100644
--- a/apps/front/src/routes/devices/1/+page.svelte
+++ b/apps/front/src/routes/devices/1/+page.svelte
@@ -5,7 +5,7 @@
 <div class="sm:col-span-4 flex gap-2 items-center">
 	<label for="website" class="block text-sm font-medium leading-6 text-gray-900">Zone ID:</label>
 	<div
-		class="flex rounded-md shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-600 sm:max-w-md"
+		class="flex rounded-primary shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-600 sm:max-w-md"
 	>
 		<input
 			type="text"
@@ -16,7 +16,7 @@
 		/>
 	</div>
 	<button
-		class="inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+		class="inline-flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-primary shadow-sm text-white bg-indigo-600 hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
 	>
 		Save
 	</button>
diff --git a/apps/front/src/routes/devices/1/add/+page.svelte b/apps/front/src/routes/devices/1/add/+page.svelte
index d63c074..3d28bb1 100644
--- a/apps/front/src/routes/devices/1/add/+page.svelte
+++ b/apps/front/src/routes/devices/1/add/+page.svelte
@@ -7,13 +7,13 @@
 			<p class="mt-1 text-sm leading-6 text-gray-600">This information will be displayed publicly so be careful what you share.</p>
 		</div>
 
-		<form class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl md:col-span-2">
+		<form class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-primary md:col-span-2">
 			<div class="px-4 py-6 sm:p-8">
 				<div class="grid max-w-2xl grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
 					<div class="sm:col-span-4">
-						<label for="website" class="block text-sm font-medium leading-6 text-gray-900">Website</label>
+						<label for="website" class="label">Website</label>
 						<div class="mt-2">
-							<div class="flex rounded-md shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-600 sm:max-w-md">
+							<div class="flex rounded-primary shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-600 sm:max-w-md">
 								<span class="flex select-none items-center pl-3 text-gray-500 sm:text-sm">http://</span>
 								<input type="text" name="website" id="website" class="block flex-1 border-0 bg-transparent py-1.5 pl-1 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6" placeholder="www.example.com">
 							</div>
@@ -21,32 +21,32 @@
 					</div>
 
 					<div class="col-span-full">
-						<label for="about" class="block text-sm font-medium leading-6 text-gray-900">About</label>
+						<label for="about" class="label">About</label>
 						<div class="mt-2">
-							<textarea id="about" name="about" rows="3" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"></textarea>
+							<textarea id="about" name="about" rows="3" class="block w-full rounded-primary border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"></textarea>
 						</div>
 						<p class="mt-3 text-sm leading-6 text-gray-600">Write a few sentences about yourself.</p>
 					</div>
 
 					<div class="col-span-full">
-						<label for="photo" class="block text-sm font-medium leading-6 text-gray-900">Photo</label>
+						<label for="photo" class="label">Photo</label>
 						<div class="mt-2 flex items-center gap-x-3">
 							<svg class="h-12 w-12 text-gray-300" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
 								<path fill-rule="evenodd" d="M18.685 19.097A9.723 9.723 0 0021.75 12c0-5.385-4.365-9.75-9.75-9.75S2.25 6.615 2.25 12a9.723 9.723 0 003.065 7.097A9.716 9.716 0 0012 21.75a9.716 9.716 0 006.685-2.653zm-12.54-1.285A7.486 7.486 0 0112 15a7.486 7.486 0 015.855 2.812A8.224 8.224 0 0112 20.25a8.224 8.224 0 01-5.855-2.438zM15.75 9a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" clip-rule="evenodd" />
 							</svg>
-							<button type="button" class="rounded-md bg-white px-2.5 py-1.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">Change</button>
+							<button type="button" class="rounded-primary bg-white px-2.5 py-1.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">Change</button>
 						</div>
 					</div>
 
 					<div class="col-span-full">
-						<label for="cover-photo" class="block text-sm font-medium leading-6 text-gray-900">Cover photo</label>
-						<div class="mt-2 flex justify-center rounded-lg border border-dashed border-gray-900/25 px-6 py-10">
+						<label for="cover-photo" class="label">Cover photo</label>
+						<div class="mt-2 flex justify-center rounded-primary border border-dashed border-gray-900/25 px-6 py-10">
 							<div class="text-center">
 								<svg class="mx-auto h-12 w-12 text-gray-300" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
 									<path fill-rule="evenodd" d="M1.5 6a2.25 2.25 0 012.25-2.25h16.5A2.25 2.25 0 0122.5 6v12a2.25 2.25 0 01-2.25 2.25H3.75A2.25 2.25 0 011.5 18V6zM3 16.06V18c0 .414.336.75.75.75h16.5A.75.75 0 0021 18v-1.94l-2.69-2.689a1.5 1.5 0 00-2.12 0l-.88.879.97.97a.75.75 0 11-1.06 1.06l-5.16-5.159a1.5 1.5 0 00-2.12 0L3 16.061zm10.125-7.81a1.125 1.125 0 112.25 0 1.125 1.125 0 01-2.25 0z" clip-rule="evenodd" />
 								</svg>
 								<div class="mt-4 flex text-sm leading-6 text-gray-600">
-									<label for="file-upload" class="relative cursor-pointer rounded-md bg-white font-semibold text-indigo-600 focus-within:outline-none focus-within:ring-2 focus-within:ring-indigo-600 focus-within:ring-offset-2 hover:text-indigo-500">
+									<label for="file-upload" class="relative cursor-pointer rounded-primary bg-white font-semibold text-indigo-600 focus-within:outline-none focus-within:ring-2 focus-within:ring-indigo-600 focus-within:ring-offset-2 hover:text-indigo-500">
 										<span>Upload a file</span>
 										<input id="file-upload" name="file-upload" type="file" class="sr-only">
 									</label>
@@ -60,7 +60,7 @@
 			</div>
 			<div class="flex items-center justify-end gap-x-6 border-t border-gray-900/10 px-4 py-4 sm:px-8">
 				<button type="button" class="text-sm font-semibold leading-6 text-gray-900">Cancel</button>
-				<button type="submit" class="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Save</button>
+				<button type="submit" class="rounded-primary bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Save</button>
 			</div>
 		</form>
 	</div>
@@ -71,32 +71,32 @@
 			<p class="mt-1 text-sm leading-6 text-gray-600">Use a permanent address where you can receive mail.</p>
 		</div>
 
-		<form class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl md:col-span-2">
+		<form class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-primary md:col-span-2">
 			<div class="px-4 py-6 sm:p-8">
 				<div class="grid max-w-2xl grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
 					<div class="sm:col-span-3">
-						<label for="first-name" class="block text-sm font-medium leading-6 text-gray-900">First name</label>
+						<label for="first-name" class="label">First name</label>
 						<div class="mt-2">
-							<input type="text" name="first-name" id="first-name" autocomplete="given-name" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
+							<input type="text" name="first-name" id="first-name" autocomplete="given-name" class="input">
 						</div>
 					</div>
 
 					<div class="sm:col-span-3">
-						<label for="last-name" class="block text-sm font-medium leading-6 text-gray-900">Last name</label>
+						<label for="last-name" class="label">Last name</label>
 						<div class="mt-2">
-							<input type="text" name="last-name" id="last-name" autocomplete="family-name" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
+							<input type="text" name="last-name" id="last-name" autocomplete="family-name" class="input">
 						</div>
 					</div>
 
 					<div class="sm:col-span-4">
-						<label for="email" class="block text-sm font-medium leading-6 text-gray-900">Email address</label>
+						<label for="email" class="label">Email address</label>
 						<div class="mt-2">
-							<input id="email" name="email" type="email" autocomplete="email" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
+							<input id="email" name="email" type="email" autocomplete="email" class="input">
 						</div>
 					</div>
 
 					<div class="sm:col-span-4">
-						<label for="country" class="block text-sm font-medium leading-6 text-gray-900">Country</label>
+						<label for="country" class="label">Country</label>
 						<div class="mt-2">
 							<select id="country" name="country" autocomplete="country-name" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:max-w-xs sm:text-sm sm:leading-6">
 								<option>United States</option>
@@ -107,30 +107,30 @@
 					</div>
 
 					<div class="col-span-full">
-						<label for="street-address" class="block text-sm font-medium leading-6 text-gray-900">Street address</label>
+						<label for="street-address" class="label">Street address</label>
 						<div class="mt-2">
-							<input type="text" name="street-address" id="street-address" autocomplete="street-address" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
+							<input type="text" name="street-address" id="street-address" autocomplete="street-address" class="input">
 						</div>
 					</div>
 
 					<div class="sm:col-span-2 sm:col-start-1">
-						<label for="city" class="block text-sm font-medium leading-6 text-gray-900">City</label>
+						<label for="city" class="label">City</label>
 						<div class="mt-2">
-							<input type="text" name="city" id="city" autocomplete="address-level2" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
+							<input type="text" name="city" id="city" autocomplete="address-level2" class="input">
 						</div>
 					</div>
 
 					<div class="sm:col-span-2">
-						<label for="region" class="block text-sm font-medium leading-6 text-gray-900">State / Province</label>
+						<label for="region" class="label">State / Province</label>
 						<div class="mt-2">
-							<input type="text" name="region" id="region" autocomplete="address-level1" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
+							<input type="text" name="region" id="region" autocomplete="address-level1" class="input">
 						</div>
 					</div>
 
 					<div class="sm:col-span-2">
-						<label for="postal-code" class="block text-sm font-medium leading-6 text-gray-900">ZIP / Postal code</label>
+						<label for="postal-code" class="label">ZIP / Postal code</label>
 						<div class="mt-2">
-							<input type="text" name="postal-code" id="postal-code" autocomplete="postal-code" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
+							<input type="text" name="postal-code" id="postal-code" autocomplete="postal-code" class="input">
 						</div>
 					</div>
 				</div>
@@ -148,7 +148,7 @@
 			<p class="mt-1 text-sm leading-6 text-gray-600">We'll always let you know about important changes, but you pick what else you want to hear about.</p>
 		</div>
 
-		<form class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl md:col-span-2">
+		<form class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-primary md:col-span-2">
 			<div class="px-4 py-6 sm:p-8">
 				<div class="max-w-2xl space-y-10">
 					<fieldset>
@@ -189,23 +189,23 @@
 						<div class="mt-6 space-y-6">
 							<div class="flex items-center gap-x-3">
 								<input id="push-everything" name="push-notifications" type="radio" class="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600">
-								<label for="push-everything" class="block text-sm font-medium leading-6 text-gray-900">Everything</label>
+								<label for="push-everything" class="label">Everything</label>
 							</div>
 							<div class="flex items-center gap-x-3">
 								<input id="push-email" name="push-notifications" type="radio" class="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600">
-								<label for="push-email" class="block text-sm font-medium leading-6 text-gray-900">Same as email</label>
+								<label for="push-email" class="label">Same as email</label>
 							</div>
 							<div class="flex items-center gap-x-3">
 								<input id="push-nothing" name="push-notifications" type="radio" class="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600">
-								<label for="push-nothing" class="block text-sm font-medium leading-6 text-gray-900">No push notifications</label>
+								<label for="push-nothing" class="label">No push notifications</label>
 							</div>
 						</div>
 					</fieldset>
 				</div>
 			</div>
 			<div class="flex items-center justify-end gap-x-6 border-t border-gray-900/10 px-4 py-4 sm:px-8">
-				<button type="button" class="text-sm font-semibold leading-6 text-gray-900">Cancel</button>
-				<button type="submit" class="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Save</button>
+				<button type="button" class="btn text-purple-900">Cancel</button>
+				<button type="submit" class="btn btn-primary">Save</button>
 			</div>
 		</form>
 	</div>
diff --git a/apps/front/src/routes/fault/+page.svelte b/apps/front/src/routes/fault/+page.svelte
index 88dd2e8..f696580 100644
--- a/apps/front/src/routes/fault/+page.svelte
+++ b/apps/front/src/routes/fault/+page.svelte
@@ -6,7 +6,7 @@
 	<ul
 			role="list"
 			class="grid grid-cols-1 gap-x-6 gap-y-8 md:grid-cols-3 xl:gap-x-8
-	*:overflow-hidden *:rounded-xl *:border *:border-gray-200 *:bg-white"
+	*:overflow-hidden *:rounded-primary *:border *:border-gray-200 *:bg-white"
 	>
 		<li>
 			<div class="flex items-center gap-2 bg-gray-50 p-5">
@@ -98,7 +98,7 @@
 	</ul>
 
 	<div class="flex flex-col">
-		<div class="min-w-full overflow-hidden overflow-x-auto align-middle shadow sm:rounded-lg">
+		<div class="min-w-full overflow-hidden overflow-x-auto align-middle shadow sm:rounded-primary">
 			<table class="min-w-full divide-y divide-gray-200">
 				<thead>
 				<tr
diff --git a/apps/front/src/routes/map/+page.svelte b/apps/front/src/routes/map/+page.svelte
index be47df6..76f43d7 100644
--- a/apps/front/src/routes/map/+page.svelte
+++ b/apps/front/src/routes/map/+page.svelte
@@ -14,12 +14,12 @@
 
 <section class="space-y-4 lg:space-y-8">
     <h1 class="text-xl lg:text-2xl font-medium lg:text-right">Create new zones with edit buttons:</h1>
-    <div class="flex relative overflow-hidden rounded-xl border border-gray-200 bg-white">
+    <div class="flex relative overflow-hidden rounded-primary border border-gray-200 bg-white">
 
 
         <Map/>
 
-        <div class="top-2 absolute bg-white block right-2 rounded-xl shadow z-10">
+        <div class="top-2 absolute bg-white block right-2 rounded-primary shadow z-10">
             <div class="flex flex-col gap-4 p-2">
                 <div class="flex flex-col gap-0.5">
                     <button class="btn btn-primary" type="button">
diff --git a/apps/front/src/routes/schedule/+page.svelte b/apps/front/src/routes/schedule/+page.svelte
new file mode 100644
index 0000000..b78e6a9
--- /dev/null
+++ b/apps/front/src/routes/schedule/+page.svelte
@@ -0,0 +1,109 @@
+<script lang="ts">
+
+</script>
+
+<section class="space-y-4 lg:space-y-8">
+    <h1 class="h1">
+        Schedule
+    </h1>
+
+    <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">Title</th>
+                        <th scope="col" class="px-3 py-3.5 text-left">Start time</th>
+                        <th scope="col" class="px-3 py-3.5 text-left">End time</th>
+                        <th scope="col" class="px-3 py-3.5 text-left">Status</th>
+                        <th scope="col" class="px-3 py-3.5 text-left">Days of week</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-600">
+                    <tr>
+                        <td class="whitespace-nowrap 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">
+                            17:00
+                        </td>
+                        <td class="whitespace-nowrap px-3 py-4">02:00</td>
+                        <td class="whitespace-nowrap px-3 py-4">
+                            <div class="flex items-center gap-x-2">
+                                <span class="h-2 w-2 rounded-full bg-green-600"></span>
+                                <span class="text-gray-500">On</span>
+                            </div>
+                        </td>
+                        <td class="whitespace-nowrap px-3 py-4">Sat, Sun</td>
+                        <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right sm:pr-6">
+                            <a href="/schedule/1/edit/" class="text-primary hover:underline">Edit<span class="sr-only">, Lindsay Walton</span></a>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="whitespace-nowrap 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">
+                            17:00
+                        </td>
+                        <td class="whitespace-nowrap px-3 py-4">02:00</td>
+                        <td class="whitespace-nowrap px-3 py-4">
+                            <div class="flex items-center gap-x-2">
+                                <span class="h-2 w-2 rounded-full bg-green-600"></span>
+                                <span class="text-gray-500">On</span>
+                            </div>
+                        </td>
+                        <td class="whitespace-nowrap px-3 py-4">Sat, Sun</td>
+                        <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right sm:pr-6">
+                            <a href="/schedule/1/edit/" class="text-primary hover:underline">Edit<span class="sr-only">, Lindsay Walton</span></a>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="whitespace-nowrap 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">
+                            17:00
+                        </td>
+                        <td class="whitespace-nowrap px-3 py-4">02:00</td>
+                        <td class="whitespace-nowrap px-3 py-4">
+                            <div class="flex items-center gap-x-2">
+                                <span class="h-2 w-2 rounded-full bg-green-600"></span>
+                                <span class="text-gray-500">On</span>
+                            </div>
+                        </td>
+                        <td class="whitespace-nowrap px-3 py-4">Sat, Sun</td>
+                        <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right sm:pr-6">
+                            <a href="/schedule/1/edit/" class="text-primary hover:underline">Edit<span class="sr-only">, Lindsay Walton</span></a>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="whitespace-nowrap 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">
+                            17:00
+                        </td>
+                        <td class="whitespace-nowrap px-3 py-4">02:00</td>
+                        <td class="whitespace-nowrap px-3 py-4">
+                            <div class="flex items-center gap-x-2">
+                                <span class="h-2 w-2 rounded-full bg-green-600"></span>
+                                <span class="text-gray-500">On</span>
+                            </div>
+                        </td>
+                        <td class="whitespace-nowrap px-3 py-4">Sat, Sun</td>
+                        <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right sm:pr-6">
+                            <a href="/schedule/1/edit/" class="text-primary hover:underline">Edit<span class="sr-only">, Lindsay Walton</span></a>
+                        </td>
+                    </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+
+</section>
diff --git a/apps/front/src/routes/schedule/1/edit/+page.svelte b/apps/front/src/routes/schedule/1/edit/+page.svelte
new file mode 100644
index 0000000..188f48a
--- /dev/null
+++ b/apps/front/src/routes/schedule/1/edit/+page.svelte
@@ -0,0 +1,67 @@
+<script lang="ts">
+import ToggleSwitch from "$lib/client/components/toggle.svelte";
+import WeekCheckbox from "$lib/client/components/weekCheckbox.svelte";
+
+let statusEnabled: boolean = false;
+
+const handleToggle = (newStatus: boolean) => {
+    statusEnabled = newStatus;
+};
+</script>
+
+<section class="space-y-4 lg:space-y-8">
+    <h1 class="h1">
+        Edit
+    </h1>
+
+    <div class="space-y-10 divide-y divide-gray-900/10">
+        <form class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl md:col-span-2">
+            <div class="px-4 py-6 sm:p-8">
+                <div class="grid max-w-2xl grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
+                    <div class="sm:col-span-5">
+                        <label for="first-name" class="label">Name</label>
+                        <div class="mt-2">
+                            <input type="text" name="name" id="name" autocomplete="given-name"
+                                   class="input" value="South entrance weekends">
+                        </div>
+                    </div>
+
+                    <div class="sm:col-span-2 sm:col-start-1">
+                        <label for="startTime" class="label">Start time</label>
+                        <div class="mt-2">
+                            <input type="text" name="startTime" id="startTime" class="input">
+                        </div>
+                    </div>
+
+                    <div class="sm:col-span-2">
+                        <label for="endTime" class="label">End time</label>
+                        <div class="mt-2">
+                            <input type="text" name="endTime" id="endTime" class="input">
+                        </div>
+                    </div>
+
+                    <div class="col-span-full flex items-center gap-4">
+                        <label for="status" class="label">Status:</label>
+
+                        <ToggleSwitch on:toggle={event => handleToggle(event.detail)} />
+
+                        <span class="label {statusEnabled ? '' : 'text-gray-400'}">{statusEnabled ? 'on' : 'off'}</span>
+                    </div>
+
+                    <div class="col-span-full">
+                        <label for="street-address" class="label">Days of week</label>
+                        <div class="mt-2">
+                            <WeekCheckbox />
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="flex items-center justify-end gap-x-4 border-t border-gray-900/10 px-4 py-4 sm:px-8">
+                <a href="/schedule" class="btn text-purple-600">Cancel</a>
+                <button type="submit" class="btn btn-primary">Save</button>
+            </div>
+        </form>
+    </div>
+
+
+</section>