diff --git a/.vscode/settings.json b/.vscode/settings.json
index 4fc4d43..204668b 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -4,6 +4,7 @@
 	"editor.quickSuggestions": {
 		"strings": true
 	},
+	"css.customData": [".vscode/tailwind.json"],
 	"cSpell.words": [
 		"correctanswer",
 		"creationdate",
diff --git a/.vscode/tailwind.json b/.vscode/tailwind.json
new file mode 100644
index 0000000..d634f37
--- /dev/null
+++ b/.vscode/tailwind.json
@@ -0,0 +1,95 @@
+{
+	"version": 1.2,
+	"atDirectives": [
+		{
+			"name": "@theme",
+			"description": "Use the `@theme` directive to define your project's custom design tokens, like fonts, colors, and breakpoints.",
+			"references": [
+				{
+					"name": "Tailwind Documentation",
+					"url": "https://tailwindcss.com/docs/functions-and-directives#theme-directive"
+				}
+			]
+		},
+		{
+			"name": "@source",
+			"description": "Use the `@source` directive to explicitly specify source files that aren't picked up by Tailwind's automatic content detection.",
+			"references": [
+				{
+					"name": "Tailwind Documentation",
+					"url": "https://tailwindcss.com/docs/functions-and-directives#source-directive"
+				}
+			]
+		},
+		{
+			"name": "@utility",
+			"description": "Use the `@utility` directive to add custom utilities to your project that work with variants like `hover`, `focus` and `lg`.",
+			"references": [
+				{
+					"name": "Tailwind Documentation",
+					"url": "https://tailwindcss.com/docs/functions-and-directives#utility-directive"
+				}
+			]
+		},
+		{
+			"name": "@variant",
+			"description": "Use the `@variant` directive to apply a Tailwind variant to styles in your CSS.",
+			"references": [
+				{
+					"name": "Tailwind Documentation",
+					"url": "https://tailwindcss.com/docs/functions-and-directives#variant-directive"
+				}
+			]
+		},
+		{
+			"name": "@custom-variant",
+			"description": "Use the `@custom-variant` directive to add a custom variant in your project.",
+			"references": [
+				{
+					"name": "Tailwind Documentation",
+					"url": "https://tailwindcss.com/docs/functions-and-directives#custom-variant-directive"
+				}
+			]
+		},
+		{
+			"name": "@apply",
+			"description": "Use the `@apply` directive to inline any existing utility classes into your own custom CSS.",
+			"references": [
+				{
+					"name": "Tailwind Documentation",
+					"url": "https://tailwindcss.com/docs/functions-and-directives#apply-directive"
+				}
+			]
+		},
+		{
+			"name": "@reference",
+			"description": "If you want to use `@apply` or `@variant` in the `<style>` block of a Vue or Svelte component, or within CSS modules, you will need to import your theme variables, custom utilities, and custom variants to make those values available in that context.\n\nTo do this without duplicating any CSS in your output, use the `@reference` directive to import your main stylesheet for reference without actually including the styles.",
+			"references": [
+				{
+					"name": "Tailwind Documentation",
+					"url": "https://tailwindcss.com/docs/functions-and-directives#reference-directive"
+				}
+			]
+		},
+		{
+			"name": "@config",
+			"description": "Use the `@config` directive to load a legacy JavaScript-based configuration file.",
+			"references": [
+				{
+					"name": "Tailwind Documentation",
+					"url": "https://tailwindcss.com/docs/functions-and-directives#config-directive"
+				}
+			]
+		},
+		{
+			"name": "@plugin",
+			"description": "Use the `@plugin` directive to load a legacy JavaScript-based plugin.",
+			"references": [
+				{
+					"name": "Tailwind Documentation",
+					"url": "https://tailwindcss.com/docs/functions-and-directives#plugin-directive"
+				}
+			]
+		}
+	]
+}
diff --git a/package.json b/package.json
index 066c3c1..5bb1a2d 100644
--- a/package.json
+++ b/package.json
@@ -17,13 +17,15 @@
 		"@tailwindcss/postcss": "^4.1.6",
 		"@tailwindcss/vite": "^4.0.0",
 		"autoprefixer": "^10.4.21",
+		"daisyui": "^5.0.38",
 		"eslint-config-prettier": "^10.0.1",
+		"postcss": "^8.5.3",
 		"prettier": "^3.4.2",
 		"prettier-plugin-svelte": "^3.3.3",
 		"prettier-plugin-tailwindcss": "^0.6.11",
 		"sv-popup": "^0.5.3",
 		"svelte": "^5.0.0",
-		"tailwindcss": "^4.0.0",
+		"tailwindcss": "^4.1.7",
 		"vite": "^6.0.0"
 	},
 	"dependencies": {
diff --git a/src/app.css b/src/app.css
deleted file mode 100644
index e2cfb8a..0000000
--- a/src/app.css
+++ /dev/null
@@ -1,8 +0,0 @@
-/*
-
-This file literally only exist so that tailwind intellisense stats to work
-there is no other use of it, you can delete it if you want!
-
-*/
-
-@import "tailwindcss";
\ No newline at end of file
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 945f689..37f8234 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,14 +1,11 @@
 <script>
 	export const prerender = true;
+
+	import "./app.css";
+
 	import { Toaster } from "svelte-5-french-toast";
 	let { children } = $props();
 </script>
 
 <Toaster />
-<div class="h-full text-white bg-black font-[Sour_Gummy]">{@render children()}</div>
-
-<style>
-	@import "https://www.nerdfonts.com/assets/css/webfont.css";
-	@import url("https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&family=JetBrains+Mono:wght@200&family=Sour+Gummy:wght@300&display=swap");
-	@import "tailwindcss";
-</style>
+<div class="h-full font-[Sour_Gummy]">{@render children()}</div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 330c0df..91e914c 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -120,12 +120,6 @@
 		justify-content: center;
 	}
 
-	h1 {
-		text-align: center;
-		margin: 0;
-		font-size: 60px;
-	}
-
 	h2 {
 		text-align: center;
 		margin: 0;
diff --git a/src/routes/IdleScreen/+page.svelte b/src/routes/IdleScreen/+page.svelte
index 4a9da74..9090bc0 100644
--- a/src/routes/IdleScreen/+page.svelte
+++ b/src/routes/IdleScreen/+page.svelte
@@ -2,32 +2,35 @@
 	import { Modal, Content, Trigger } from "sv-popup";
 
 	import Time from "./components/time/DisplayCollsOfTime.svelte";
-	import TimeTable from "./timeTable.svelte";
-	import EditTimetableDiv from "./EditTimetable.svelte";
+	import TimeTable from "./components/timetable/DisplayRowsOfTimetable.svelte";
+	import EditTimetableDiv from "./components/timetable/EditTimetable.svelte";
+	import { colseModal } from "./logic/TimeAndTableData.svelte.js";
 
 	export let ShowSeconds = $state({ v: true });
 </script>
 
-<div id="wrap">
+<div class="flex h-full flex-col">
 	<div>
 		<button
+			class="btn"
 			onclick={() => {
 				ShowSeconds.v = !ShowSeconds.v;
 				localStorage.setItem("ShowSeconds", String(ShowSeconds.v));
 			}}
-			>{#if ShowSeconds.v}Disable Seconds{:else}Enable Seconds{/if}</button
 		>
-		<Modal button={false} big={true}>
+			{#if ShowSeconds.v}Disable Seconds{:else}Enable Seconds{/if}</button
+		>
+		<Modal big={true} close={colseModal.v}>
 			<Content>
 				<EditTimetableDiv />
 			</Content>
 			<Trigger>
-				<button>Edit timetable </button>
+				<button class="btn">Edit timetable </button>
 			</Trigger>
 		</Modal>
 	</div>
 
-	<div id="root">
-		<!--<TimeTable />--><Time />
+	<div class="flex flex-1 flex-col items-center justify-center">
+		<Time /><TimeTable />
 	</div>
 </div>
diff --git a/src/routes/IdleScreen/EditTimetable.svelte b/src/routes/IdleScreen/EditTimetable.svelte
deleted file mode 100644
index 186b69d..0000000
--- a/src/routes/IdleScreen/EditTimetable.svelte
+++ /dev/null
@@ -1,348 +0,0 @@
-<script>
-	import { newTable } from "./timeTable.svelte";
-
-	let table = JSON.parse(localStorage.getItem("TimeTable"));
-
-	let TabOpen = false;
-
-	let csv = "";
-</script>
-
-<div class="root">
-	<div id="wrap">
-		<div id="left">
-			<div class="Header Row">
-				<span class="DayOfWeek" ></span>
-				{#each table.Times as time}
-					<input
-						type="text"
-						onchange={() => {
-							newTable(table);
-						}}
-						bind:value={time}
-					/>
-				{/each}
-			</div>
-			<div class="Row">
-				<span class="DayOfWeek">Monday</span>
-				{#each table.Monday as time}
-					<input
-						type="text"
-						onchange={() => {
-							newTable(table);
-						}}
-						bind:value={time}
-					/>
-				{/each}
-			</div>
-			<div class="Row">
-				<span class="DayOfWeek">Tuesday</span>
-				{#each table.Tuesday as time}
-					<input
-						type="text"
-						onchange={() => {
-							newTable(table);
-						}}
-						bind:value={time}
-					/>
-				{/each}
-			</div>
-			<div class="Row">
-				<span class="DayOfWeek">Wednesday</span>
-				{#each table.Wednesday as time}
-					<input
-						type="text"
-						onchange={() => {
-							newTable(table);
-						}}
-						bind:value={time}
-					/>
-				{/each}
-			</div>
-			<div class="Row">
-				<span class="DayOfWeek">Thursday</span>
-				{#each table.Thursday as time}
-					<input
-						type="text"
-						onchange={() => {
-							newTable(table);
-						}}
-						bind:value={time}
-					/>
-				{/each}
-			</div>
-			<div class="Row">
-				<span class="DayOfWeek">Friday</span>
-				{#each table.Friday as time}
-					<input
-						type="text"
-						onchange={() => {
-							newTable(table);
-						}}
-						bind:value={time}
-					/>
-				{/each}
-			</div>
-		</div>
-		<div id="right">
-			<button
-				onclick={() => {
-					table.Times.push("");
-					table.Monday.push("");
-					table.Tuesday.push("");
-					table.Wednesday.push("");
-					table.Thursday.push("");
-					table.Friday.push("");
-					newTable(table);
-					table = JSON.parse(localStorage.getItem("TimeTable"));
-				}}
-				><svg
-					xmlns="http://www.w3.org/2000/svg"
-					height="24px"
-					viewBox="0 -960 960 960"
-					width="24px"
-					fill="#FFFFFF"
-					><path
-						d="M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z"
-					/></svg
-				>Add new Period
-			</button>
-			<button
-				onclick={() => {
-					if (
-						confirm(
-							"This will remove the last period, it is not reversible! are you sure?"
-						)
-					) {
-						table.Times.pop();
-						table.Monday.pop();
-						table.Tuesday.pop();
-						table.Wednesday.pop();
-						table.Thursday.pop();
-						table.Friday.pop();
-						newTable(table);
-						table = JSON.parse(localStorage.getItem("TimeTable"));
-					}
-				}}
-				><svg
-					xmlns="http://www.w3.org/2000/svg"
-					height="24px"
-					viewBox="0 -960 960 960"
-					width="24px"
-					fill="#FFFFFF"
-					><path
-						d="M280-120q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520ZM360-280h80v-360h-80v360Zm160 0h80v-360h-80v360ZM280-720v520-520Z"
-					/></svg
-				>
-				Delete last Period
-			</button>
-			<button
-				onclick={() => {
-					TabOpen = true;
-				}}
-				><svg
-					xmlns="http://www.w3.org/2000/svg"
-					height="24px"
-					viewBox="0 -960 960 960"
-					width="24px"
-					fill="#FFFFFF"
-					><path
-						d="M230-360h120v-60H250v-120h100v-60H230q-17 0-28.5 11.5T190-560v160q0 17 11.5 28.5T230-360Zm156 0h120q17 0 28.5-11.5T546-400v-60q0-17-11.5-31.5T506-506h-60v-34h100v-60H426q-17 0-28.5 11.5T386-560v60q0 17 11.5 30.5T426-456h60v36H386v60Zm264 0h60l70-240h-60l-40 138-40-138h-60l70 240ZM160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm0-80h640v-480H160v480Zm0 0v-480 480Z"
-					/></svg
-				>
-				Import From CSV
-			</button>
-		</div>
-	</div>
-</div>
-
-{#if TabOpen !== false}
-	<div id="UpperLayer">
-		<div id="wrapClose">
-			<div class="root">
-				<h1>Paste CSV here:</h1>
-				<p></p>
-				<textarea
-					bind:value={csv}
-					id="box"
-					placeholder="Duration 1, Duration 2, Duration 3, Duration 4
-Subject 01, Subject 02, Subject 03, Subject 04
-Subject 08, Subject 09, Subject 10, Subject 12
-Subject 13, Subject 13, Subject 14, Subject 15"
-				></textarea>
-			</div>
-			<div id="options">
-				<button
-					class="close"
-					id="cancel"
-					onclick={() => (TabOpen = false)}
-					aria-label="close">CANCEL</button
-				>
-				<button
-					class="close"
-					id="save"
-					onclick={() => {
-						TabOpen = false;
-						let lines = csv.split("\n");
-						table.Times = lines[0].split(",");
-						table.Monday = lines[1].split(",");
-						table.Tuesday = lines[2].split(",");
-						table.Wednesday = lines[3].split(",");
-						table.Thursday = lines[4].split(",");
-						table.Friday = lines[5].split(",");
-						newTable(table);
-						table = JSON.parse(localStorage.getItem("TimeTable"));
-					}}
-					aria-label="close">SAVE</button
-				>
-			</div>
-		</div>
-	</div>
-{/if}
-
-<style>
-	.root {
-		display: flex;
-		flex-direction: column;
-		gap: 5px;
-		margin: 10px;
-		justify-content: center;
-		background-color: #303030;
-		padding: 10px;
-		margin: 20px;
-		border-radius: 10px;
-		width: fit-content;
-	}
-
-	#wrap {
-		display: flex;
-		background-color: #252525;
-		padding: 20px;
-		border-radius: 20px;
-		gap: 20px;
-	}
-
-	.Row {
-		display: flex;
-		gap: 2px;
-	}
-
-	span {
-		font-size: 15px;
-		color: white;
-		background-color: #3f3f3f;
-		padding: 5px;
-		border-radius: 10px;
-		width: 100px;
-		text-align: center;
-	}
-
-	.DayOfWeek {
-		width: 100px;
-		background-color: #30492e;
-	}
-
-	input {
-		font-size: 15px;
-		color: white;
-		background-color: #3f3f3f;
-		padding: 5px;
-		border-radius: 10px;
-		width: 100px;
-		text-align: center;
-	}
-	.Header > input {
-		background-color: #30492e;
-	}
-
-	#left {
-		gap: 5px;
-		display: flex;
-		flex-direction: column;
-	}
-
-	#right {
-		gap: 10px;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-	}
-
-	#right > button {
-		background-color: rgb(63, 63, 63);
-		color: white;
-		border: 2px solid white;
-		border-radius: 10px;
-		cursor: pointer;
-		transition: all 0.1s ease-in-out;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		max-width: 100px;
-	}
-
-	#right > button:hover {
-		transform: scale(1.2);
-		background-color: rgb(50, 50, 50);
-	}
-
-	#UpperLayer {
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		backdrop-filter: blur(10px);
-		background-color: rgba(0, 0, 0, 0.5);
-		z-index: 1;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-	}
-
-	#wrapClose {
-		display: flex;
-		flex-direction: column;
-	}
-
-	.close {
-		background-color: #2b2b2b;
-		color: #888;
-		border: none;
-		padding: 10px 20px;
-		border-radius: 5px;
-		cursor: pointer;
-		align-self: center;
-	}
-	#box {
-		width: 700px;
-		height: 300px;
-		background-color: #121212;
-		color: white;
-		border-radius: 10px;
-		resize: vertical;
-		font-size: 20px;
-	}
-
-	h1,
-	p {
-		margin: 0;
-	}
-
-	#options {
-		display: flex;
-		gap: 10px;
-		justify-content: center;
-	}
-
-	#cancel {
-		background-color: #580000;
-		color: #ffffff;
-	}
-
-	#save {
-		background-color: #004611;
-		color: #ffffff;
-	}
-</style>
diff --git a/src/routes/IdleScreen/components/time/DisplayCollsOfTime.svelte b/src/routes/IdleScreen/components/time/DisplayCollsOfTime.svelte
index 047c2b5..69afb40 100644
--- a/src/routes/IdleScreen/components/time/DisplayCollsOfTime.svelte
+++ b/src/routes/IdleScreen/components/time/DisplayCollsOfTime.svelte
@@ -7,32 +7,34 @@
 
 	onMount(() => {
 		ShowSeconds = localStorage.getItem("ShowSeconds") || "true" == "true" ? true : false;
-
 		setInterval(() => {
 			ampm = new Date().getHours() >= 12 ? "PM" : "AM";
 		}, 1000);
 	});
 </script>
 
-<div class="flex justify-center items-end flex-row">
-	<Row type={"hour"} digit={0} />
-	<Row type={"hour"} digit={1} />
-	<h1 class="text-[200px] leading-[200px]">:</h1>
-	<Row type={"min"} digit={0} />
-	<Row type={"min"} digit={1} />
+<div class="m-5 w-fit rounded-lg bg-gray-700 p-3">
+	<div class="flex items-baseline justify-center">
+		<Row type={"hour"} digit={0} />
+		<Row type={"hour"} digit={1} />
+		<h1 class="m-0 text-[200px] leading-[200px]">:</h1>
+		<Row type={"min"} digit={0} />
+		<Row type={"min"} digit={1} />
 
-	{#if ShowSeconds}
-		<Row type={"sec"} digit={0} />
-		<Row type={"sec"} digit={1} />
-	{/if}
+		{#if ShowSeconds}
+			<h1 class="text-[75px] leading-none text-gray-500">.</h1>
 
-	<h1>{ampm}</h1>
-</div>
-<div>
-	<h2>
-		{new Date().toLocaleString("en-US", { weekday: "short" })}
-		{new Date().getDate()},
-		{new Date().toLocaleString("en-US", { month: "short" })}
-		{new Date().getFullYear()}
-	</h2>
+			<Row type={"sec"} digit={0} />
+			<Row type={"sec"} digit={1} />
+		{/if}
+		<h1 class="text-[75px] leading-none text-gray-500 ml-3">{ampm}</h1>
+	</div>
+	<div>
+		<h1 class="text-center text-5xl text-gray-300">
+			{new Date().toLocaleString("en-US", { weekday: "short" })}
+			{new Date().getDate()},
+			{new Date().toLocaleString("en-US", { month: "short" })}
+			{new Date().getFullYear()}
+		</h1>
+	</div>
 </div>
diff --git a/src/routes/IdleScreen/components/time/digit.svelte b/src/routes/IdleScreen/components/time/digit.svelte
index fd91b91..98c8dc2 100644
--- a/src/routes/IdleScreen/components/time/digit.svelte
+++ b/src/routes/IdleScreen/components/time/digit.svelte
@@ -3,7 +3,9 @@
 </script>
 
 {#if props.size == "small"}
-	<h1 class="m-0 leading-[75px] text-[75px] text-gray-500">{props.digit}</h1>
+	<h1 class="flex items-center justify-center text-[75px] leading-none m-0 text-gray-500">
+		{props.digit}
+	</h1>
 {:else if props.size == "large"}
-	<h1 class="m-0 leading-[200px] text-[200px]">{props.digit}</h1>
-{/if}
+	<h1 class="flex items-center justify-center text-[200px] leading-none m-0">{props.digit}</h1>
+{/if}
\ No newline at end of file
diff --git a/src/routes/IdleScreen/components/time/row.svelte b/src/routes/IdleScreen/components/time/row.svelte
index bc81e23..fa94570 100644
--- a/src/routes/IdleScreen/components/time/row.svelte
+++ b/src/routes/IdleScreen/components/time/row.svelte
@@ -19,7 +19,7 @@
 
 <div
 	style="--height: {size == 'small' ? '75px' : '200px'};"
-	class="flex h-(--height) flex-col overflow-y-hidden scroll-smooth"
+	class="flex h-(--height) flex-col overflow-y-hidden scroll-smooth" 
 	bind:this={thisRow}
 >
 	{#each Array(digits) as _, i}
diff --git a/src/routes/IdleScreen/components/timetable/DisplayRowsOfTimetable.svelte b/src/routes/IdleScreen/components/timetable/DisplayRowsOfTimetable.svelte
new file mode 100644
index 0000000..2230b1b
--- /dev/null
+++ b/src/routes/IdleScreen/components/timetable/DisplayRowsOfTimetable.svelte
@@ -0,0 +1,37 @@
+<script>
+	import { onMount } from "svelte";
+	import { timetableData } from "../../logic/TimeAndTableData.svelte";
+
+	let legend = ["", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
+
+	onMount(() => {
+		timetableData.v = JSON.parse(localStorage.getItem("timetableData")) || timetableData.v;
+	});
+</script>
+
+<div
+	class="m-5 grid grid-cols-[auto_repeat(var(--NoOfPeriods),_auto)] gap-1 gap-x-1 gap-y-2 rounded-lg bg-gray-800 p-3"
+	style="--NoOfPeriods: {timetableData.v[0].length - 1};"
+>
+	{#each timetableData.v as row, RowIndex}
+		{#each row as time, timeIndex}
+			{#if RowIndex == 0 && timeIndex == 0}
+				<span class="rounded-xl bg-transparent p-1.5 text-center text-xl"></span>
+			{:else if RowIndex == 0}
+				<span class="rounded-xl bg-blue-800 p-1.5 text-center text-xl">{time}</span>
+			{:else if RowIndex == new Date().getDay() && timeIndex == 0}
+				<span class="rounded-xl bg-green-600 p-1.5 text-center text-xl"
+					>{legend[RowIndex]}</span
+				>
+			{:else if RowIndex == new Date().getDay()}
+				<span class="rounded-xl bg-green-600 p-1.5 text-center text-xl">{time}</span>
+			{:else if timeIndex == 0}
+				<span class="rounded-xl bg-green-900 p-1.5 text-center text-xl"
+					>{legend[RowIndex]}</span
+				>
+			{:else}
+				<span class="rounded-xl bg-gray-700 p-1.5 text-center text-xl">{time}</span>
+			{/if}
+		{/each}
+	{/each}
+</div>
diff --git a/src/routes/IdleScreen/components/timetable/EditTimetable.svelte b/src/routes/IdleScreen/components/timetable/EditTimetable.svelte
new file mode 100644
index 0000000..2ca0e2f
--- /dev/null
+++ b/src/routes/IdleScreen/components/timetable/EditTimetable.svelte
@@ -0,0 +1,58 @@
+<script>
+	import { onMount } from "svelte";
+	import { timetableData } from "../../logic/TimeAndTableData.svelte";
+
+	let data = $state.snapshot(timetableData).v;
+
+	let legend = ["", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
+
+	import { colseModal } from "../../logic/TimeAndTableData.svelte.js";
+
+	onMount(() => {
+		colseModal.v = false;
+	});
+</script>
+
+<div class="m-5 flex flex-col items-center justify-center rounded-lg bg-gray-800 p-3">
+	<div
+		class=" flex flex-col gap-1 gap-x-1 gap-y-2 overflow-x-auto"
+		style="--NoOfPeriods: {timetableData.v[0].length - 1};"
+	>
+		{#each data as row, RowIndex}
+			<div class="flex">
+				{#each row as _, timeIndex}
+					{#if RowIndex == 0 && timeIndex == 0}
+						<input class="rounded-xl bg-transparent p-0.5 text-center" disabled />
+					{:else if timeIndex == 0}
+						<input
+							class="rounded-xl bg-green-900 p-0.5 text-center"
+							bind:value={legend[RowIndex]}
+							disabled
+						/>
+					{:else if RowIndex == 0}
+						<input
+							class="rounded-xl border-2 border-white bg-blue-800 p-0.5 text-center"
+							bind:value={data[RowIndex][timeIndex]}
+						/>
+					{:else}
+						<input
+							class="rounded-xl border-2 border-white bg-gray-700 p-0.5 text-center"
+							bind:value={data[RowIndex][timeIndex]}
+						/>
+					{/if}
+				{/each}
+			</div>
+		{/each}
+	</div>
+
+	<div>
+		<button
+			onclick={() => {
+				timetableData.v = data;
+				localStorage.setItem("TimetableData", JSON.stringify(data));
+				colseModal.v = true;
+			}}
+			class="btn green mt-3">SAVE</button
+		>
+	</div>
+</div>
diff --git a/src/routes/IdleScreen/logic/TimeAndTableData.svelte.js b/src/routes/IdleScreen/logic/TimeAndTableData.svelte.js
index e69de29..d480d89 100644
--- a/src/routes/IdleScreen/logic/TimeAndTableData.svelte.js
+++ b/src/routes/IdleScreen/logic/TimeAndTableData.svelte.js
@@ -0,0 +1,20 @@
+export let timetableData = $state({
+	v: [
+		[
+			"07:50 - 08:50",
+			"08:50 - 09:40",
+			"09:40 - 10:30 ",
+			"10:30 - 11:00",
+			"11:00 - 12:00",
+			"12:00 - 01:00",
+			"01:00 - 02:00",
+		],
+		["English", "Sanskrit", "Math", "Lunch", "Hindi", "Social Science", "Science"],
+		["English", "Art & Craft", "Math", "Lunch", "Hindi", "Social Science", "Science"],
+		["English", "GK", "Math", "Lunch", "Hindi", "Social Science", "Science"],
+		["English", "Sanskrit", "Math", "Lunch", "Hindi", "Social Science", "Science"],
+		["English", "Computers", "Math", "Lunch", "Hindi", "Social Science", "Science"],
+	],
+});
+
+export let colseModal = $state({ v: false });
diff --git a/src/routes/IdleScreen/timeTable.svelte b/src/routes/IdleScreen/timeTable.svelte
deleted file mode 100644
index 67374c8..0000000
--- a/src/routes/IdleScreen/timeTable.svelte
+++ /dev/null
@@ -1,198 +0,0 @@
-<script module>
-	export function newTable(timetable) {
-		localStorage.setItem("TimeTable", JSON.stringify(timetable));
-		table = timetable;
-	}
-
-	let TemplateTable = {
-		Times: [
-			"07:50 - 08:50",
-			"08:50 - 09:40",
-			"09:40 - 10:30 ",
-			"10:30 - 11:00",
-			"11:00 - 12:00",
-			"12:00 - 01:00",
-			"01:00 - 02:00",
-		],
-		Monday: [
-			"English",
-			"Sanskrit",
-			"Math",
-			"Lunch",
-			"Hindi",
-			"Social Science",
-			"Science",
-		],
-		Tuesday: [
-			"English",
-			"Art & Craft",
-			"Math",
-			"Lunch",
-			"Hindi",
-			"Social Science",
-			"Science",
-		],
-		Wednesday: [
-			"English",
-			"GK",
-			"Math",
-			"Lunch",
-			"Hindi",
-			"Social Science",
-			"Science",
-		],
-		Thursday: [
-			"English",
-			"Sanskrit",
-			"Math",
-			"Lunch",
-			"Hindi",
-			"Social Science",
-			"Science",
-		],
-		Friday: [
-			"English",
-			"Computers",
-			"Math",
-			"Lunch",
-			"Hindi",
-			"Social Science",
-			"Science",
-		],
-	};
-
-	let table = $state();
-
-	/*let TempTimeTable = localStorage.getItem("TimeTable") || "";
-
-	if (TempTimeTable != "") {
-		table = JSON.parse(TempTimeTable);
-	} else {
-		newTable($state.snapshot(TemplateTable));
-	}*/
-</script>
-
-<div id="root">
-	<div id="wrap">
-		<div class="Header Row">
-			<span class="DayOfWeek" style="Opacity: 0;"></span>
-			{#each table.Times as time}
-				<span>{time}</span>
-			{/each}
-		</div>
-		<div class="Row">
-			{#if new Date().getDay() == 1}
-				<span class="DayOfWeek NavHighlight">Monday</span>
-			{:else}
-				<span class="DayOfWeek">Monday</span>
-			{/if}
-			{#each table.Monday as time}
-				{#if new Date().getDay() == 1}
-					<span class="highlight">{time}</span>
-				{:else}
-					<span>{time}</span>
-				{/if}
-			{/each}
-		</div>
-		<div class="Row">
-			{#if new Date().getDay() == 2}
-				<span class="DayOfWeek NavHighlight">Tuesday</span>
-			{:else}
-				<span class="DayOfWeek">Tuesday</span>
-			{/if}
-			{#each table.Tuesday as time}
-				{#if new Date().getDay() == 2}
-					<span class="highlight">{time}</span>
-				{:else}
-					<span>{time}</span>
-				{/if}
-			{/each}
-		</div>
-		<div class="Row">
-			{#if new Date().getDay() == 3}
-				<span class="DayOfWeek NavHighlight">Wednesday</span>
-			{:else}
-				<span class="DayOfWeek">Wednesday</span>
-			{/if}
-			{#each table.Wednesday as time}
-				{#if new Date().getDay() == 3}
-					<span class="highlight">{time}</span>
-				{:else}
-					<span>{time}</span>
-				{/if}
-			{/each}
-		</div>
-		<div class="Row">
-			{#if new Date().getDay() == 4}
-				<span class="DayOfWeek NavHighlight">Thursday</span>
-			{:else}
-				<span class="DayOfWeek">Thursday</span>
-			{/if}
-			{#each table.Thursday as time}
-				{#if new Date().getDay() == 4}
-					<span class="highlight">{time}</span>
-				{:else}
-					<span>{time}</span>
-				{/if}
-			{/each}
-		</div>
-		<div class="Row">
-			{#if new Date().getDay() == 5}
-				<span class="DayOfWeek NavHighlight">Friday</span>
-			{:else}
-				<span class="DayOfWeek">Friday</span>
-			{/if}
-			{#each table.Friday as time}
-				{#if new Date().getDay() == 5}
-					<span class="highlight">{time}</span>
-				{:else}
-					<span>{time}</span>
-				{/if}
-			{/each}
-		</div>
-	</div>
-</div>
-
-<style>
-	#root {
-		display: grid;
-		place-items: center;
-	}
-
-	#wrap {
-		display: flex;
-		background-color: #252525;
-		padding: 20px;
-		border-radius: 20px;
-		flex-direction: column;
-		gap: 10px;
-	}
-	.Row {
-		display: flex;
-		gap: 5px;
-	}
-	span {
-		font-size: 20px;
-		color: white;
-		background-color: #3f3f3f;
-		padding: 5px;
-		border-radius: 10px;
-		width: 140px;
-		text-align: center;
-	}
-	.Header > span {
-		background-color: #30492e;
-	}
-	.DayOfWeek {
-		width: 120px;
-		background-color: #30492e;
-	}
-	.highlight {
-		background-color: #707070;
-		display: block;
-	}
-	.NavHighlight {
-		background-color: #3b8235;
-		display: block;
-	}
-</style>
diff --git a/src/routes/app.css b/src/routes/app.css
new file mode 100644
index 0000000..47fa6dc
--- /dev/null
+++ b/src/routes/app.css
@@ -0,0 +1,17 @@
+@import "https://www.nerdfonts.com/assets/css/webfont.css";
+@import url("https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&family=JetBrains+Mono:wght@200&family=Sour+Gummy:wght@300&display=swap");
+@import "tailwindcss";
+
+:root {
+	@apply bg-gray-950 p-5 text-white;
+}
+
+
+
+.btn {
+	@apply cursor-pointer rounded border-2 border-white bg-gray-600 px-4 py-2 font-bold text-white transition-all hover:scale-105 hover:-rotate-5 hover:bg-gray-500 hover:shadow-lg;
+
+	&.green {
+		@apply bg-green-600 hover:bg-green-500;
+	}
+}
\ No newline at end of file