diff --git a/src/IdleScreen/main.svelte b/src/IdleScreen/main.svelte
index af856c3..cbe7879 100644
--- a/src/IdleScreen/main.svelte
+++ b/src/IdleScreen/main.svelte
@@ -1,5 +1,7 @@
 <script>
 	import Time from "./time.svelte";
-
+	import TimeTable from "./timeTable.svelte";
 </script>
-<Time />
\ No newline at end of file
+
+<TimeTable />
+<Time />
diff --git a/src/IdleScreen/time.svelte b/src/IdleScreen/time.svelte
index dec14f9..058b08d 100644
--- a/src/IdleScreen/time.svelte
+++ b/src/IdleScreen/time.svelte
@@ -41,81 +41,90 @@
 
 <div id="root">
 	<div id="wrap">
-		<div class="rowOfNumbers" bind:this={hour1}>
-			<h1>0</h1>
-			<h1>1</h1>
-			<h1>2</h1>
-			<h1>3</h1>
-			<h1>4</h1>
-			<h1>5</h1>
-			<h1>6</h1>
-			<h1>7</h1>
-			<h1>8</h1>
-			<h1>9</h1>
+		<div id="time">
+			<div class="rowOfNumbers" bind:this={hour1}>
+				<h1>0</h1>
+				<h1>1</h1>
+				<h1>2</h1>
+				<h1>3</h1>
+				<h1>4</h1>
+				<h1>5</h1>
+				<h1>6</h1>
+				<h1>7</h1>
+				<h1>8</h1>
+				<h1>9</h1>
+			</div>
+			<div class="rowOfNumbers" bind:this={hour2}>
+				<h1>0</h1>
+				<h1>1</h1>
+				<h1>2</h1>
+				<h1>3</h1>
+				<h1>4</h1>
+				<h1>5</h1>
+				<h1>6</h1>
+				<h1>7</h1>
+				<h1>8</h1>
+				<h1>9</h1>
+			</div>
+			<h1 id="colen">:</h1>
+			<div class="rowOfNumbers" bind:this={min1}>
+				<h1>0</h1>
+				<h1>1</h1>
+				<h1>2</h1>
+				<h1>3</h1>
+				<h1>4</h1>
+				<h1>5</h1>
+				<h1>6</h1>
+				<h1>7</h1>
+				<h1>8</h1>
+				<h1>9</h1>
+			</div>
+			<div class="rowOfNumbers" bind:this={min2}>
+				<h1>0</h1>
+				<h1>1</h1>
+				<h1>2</h1>
+				<h1>3</h1>
+				<h1>4</h1>
+				<h1>5</h1>
+				<h1>6</h1>
+				<h1>7</h1>
+				<h1>8</h1>
+				<h1>9</h1>
+			</div>
+			<h1 id="thedot">.</h1>
+			<div class="rowOfNumbersSec" bind:this={sec1}>
+				<h1>0</h1>
+				<h1>1</h1>
+				<h1>2</h1>
+				<h1>3</h1>
+				<h1>4</h1>
+				<h1>5</h1>
+				<h1>6</h1>
+				<h1>7</h1>
+				<h1>8</h1>
+				<h1>9</h1>
+			</div>
+			<div class="rowOfNumbersSec" bind:this={sec2}>
+				<h1>0</h1>
+				<h1>1</h1>
+				<h1>2</h1>
+				<h1>3</h1>
+				<h1>4</h1>
+				<h1>5</h1>
+				<h1>6</h1>
+				<h1>7</h1>
+				<h1>8</h1>
+				<h1>9</h1>
+			</div>
+			<h1 id="amorpm">{AMorPM}</h1>
 		</div>
-		<div class="rowOfNumbers" bind:this={hour2}>
-			<h1>0</h1>
-			<h1>1</h1>
-			<h1>2</h1>
-			<h1>3</h1>
-			<h1>4</h1>
-			<h1>5</h1>
-			<h1>6</h1>
-			<h1>7</h1>
-			<h1>8</h1>
-			<h1>9</h1>
+		<div id="date">
+			<h2>
+				{new Date().toLocaleString("en-US", { weekday: "short" })} {new Date().getDate()},
+				{new Date().toLocaleString("en-US", { month: "short" })}
+				{new Date().getFullYear()}
+			</h2>
 		</div>
-		<h1 id="colen">:</h1>
-		<div class="rowOfNumbers" bind:this={min1}>
-			<h1>0</h1>
-			<h1>1</h1>
-			<h1>2</h1>
-			<h1>3</h1>
-			<h1>4</h1>
-			<h1>5</h1>
-			<h1>6</h1>
-			<h1>7</h1>
-			<h1>8</h1>
-			<h1>9</h1>
-		</div>
-		<div class="rowOfNumbers" bind:this={min2}>
-			<h1>0</h1>
-			<h1>1</h1>
-			<h1>2</h1>
-			<h1>3</h1>
-			<h1>4</h1>
-			<h1>5</h1>
-			<h1>6</h1>
-			<h1>7</h1>
-			<h1>8</h1>
-			<h1>9</h1>
-		</div>
-		<h1 id="thedot">.</h1>
-		<div class="rowOfNumbersSec" bind:this={sec1}>
-			<h1>0</h1>
-			<h1>1</h1>
-			<h1>2</h1>
-			<h1>3</h1>
-			<h1>4</h1>
-			<h1>5</h1>
-			<h1>6</h1>
-			<h1>7</h1>
-			<h1>8</h1>
-			<h1>9</h1>
-		</div>
-		<div class="rowOfNumbersSec" bind:this={sec2}>
-			<h1>0</h1>
-			<h1>1</h1>
-			<h1>2</h1>
-			<h1>3</h1>
-			<h1>4</h1>
-			<h1>5</h1>
-			<h1>6</h1>
-			<h1>7</h1>
-			<h1>8</h1>
-			<h1>9</h1>
-		</div>
-		<h1 id="amorpm">{AMorPM}</h1>
 	</div>
 </div>
 
@@ -123,16 +132,20 @@
 	#root {
 		display: grid;
 		place-items: center;
-		height: 100%;
+		height: 50%;
 	}
 
 	#wrap {
+		background-color: #252525;
+		padding: 20px 70px;
+		border-radius: 20px;
+	}
+
+	#time {
 		display: flex;
 		justify-content: center;
 		align-items: baseline;
-		background-color: #252525;
-        padding: 20px 70px;
-        border-radius: 20px;
+        margin: -30px;
 	}
 
 	#colen {
@@ -193,4 +206,11 @@
 		margin-left: 30px;
 		color: #585858;
 	}
+
+    h2 {
+        margin: 0;
+        font-size: 40px;
+        color: #888;
+        text-align: center;
+    }
 </style>
diff --git a/src/IdleScreen/timeTable.svelte b/src/IdleScreen/timeTable.svelte
new file mode 100644
index 0000000..d54db08
--- /dev/null
+++ b/src/IdleScreen/timeTable.svelte
@@ -0,0 +1,138 @@
+<script>
+	let table = {
+		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",
+			"Social Science",
+			"Hindi",
+			"Science",
+		],
+		Tuesday: [
+			"English",
+			"GK",
+			"Math",
+			"Lunch",
+			"Social Science",
+			"Hindi",
+			"Science",
+		],
+		Wednesday: [
+			"English",
+			"Art & Craft",
+			"Math",
+			"Lunch",
+			"Social Science",
+			"Hindi",
+			"Science",
+		],
+		Thursday: [
+			"English",
+			"Sanskrit",
+			"Math",
+			"Lunch",
+			"Social Science",
+			"Hindi",
+			"Science",
+		],
+		Friday: [
+			"English",
+			"Computers",
+			"Math",
+			"Lunch",
+			"Social Science",
+			"Hindi",
+			"Science",
+		],
+	};
+</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">
+			<span class="DayOfWeek">Monday</span>
+			{#each table.Monday as time}
+				<span>{time}</span>
+			{/each}
+		</div>
+		<div class="Row">
+			<span class="DayOfWeek">Tuesday</span>
+			{#each table.Tuesday as time}
+				<span>{time}</span>
+			{/each}
+		</div>
+		<div class="Row">
+			<span class="DayOfWeek">Wednesday</span>
+			{#each table.Wednesday as time}
+				<span>{time}</span>
+			{/each}
+		</div>
+		<div class="Row">
+			<span class="DayOfWeek">Thursday</span>
+			{#each table.Thursday as time}
+				<span>{time}</span>
+			{/each}
+		</div>
+		<div class="Row">
+			<span class="DayOfWeek">Friday</span>
+			{#each table.Friday as time}
+				<span>{time}</span>
+			{/each}
+		</div>
+	</div>
+</div>
+
+<style>
+	#root {
+		display: grid;
+		place-items: center;
+		height: 50%;
+	}
+
+	#wrap {
+		display: flex;
+		background-color: #252525;
+		padding: 20px;
+		border-radius: 20px;
+		flex-direction: column;
+		gap: 10px;
+	}
+	.Row {
+		display: flex;
+		gap: 5px;
+	}
+
+	span {
+		font-size: 25px;
+		color: white;
+		background-color: #3f3f3f;
+		padding: 10px;
+		border-radius: 10px;
+		width: 170px;
+		text-align: center;
+	}
+
+	.Header > span {
+		background-color: #30492e;
+	}
+	.DayOfWeek {
+		width: 150px;
+		background-color: #30492e;
+	}
+</style>