diff --git a/src/IdleScreen/time.svelte b/src/IdleScreen/time.svelte
index cb055c3..dec14f9 100644
--- a/src/IdleScreen/time.svelte
+++ b/src/IdleScreen/time.svelte
@@ -8,9 +8,20 @@
 	let sec1;
 	let sec2;
 
+	let AMorPM = "AM";
+
 	function updateTime() {
 		const now = new Date();
-		const hours = now.getHours().toString().padStart(2, "0");
+
+		let hours = now.getHours().toString().padStart(2, "0");
+
+		if (now.getHours() > 12) {
+			hours = (now.getHours() - 12).toString().padStart(2, "0");
+			AMorPM = "PM";
+		} else {
+			AMorPM = "AM";
+		}
+
 		const minutes = now.getMinutes().toString().padStart(2, "0");
 		const seconds = now.getSeconds().toString().padStart(2, "0");
 
@@ -29,88 +40,99 @@
 </script>
 
 <div id="root">
-	<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 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>
+		<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>
 
 <style>
 	#root {
+		display: grid;
+		place-items: center;
+		height: 100%;
+	}
+
+	#wrap {
 		display: flex;
 		justify-content: center;
-		align-items: center;
-		height: 100%;
+		align-items: baseline;
+		background-color: #252525;
+        padding: 20px 70px;
+        border-radius: 20px;
 	}
 
 	#colen {
@@ -164,4 +186,11 @@
 		margin: 0;
 		color: #585858;
 	}
+
+	#amorpm {
+		font-size: 75px;
+		margin: 0;
+		margin-left: 30px;
+		color: #585858;
+	}
 </style>