diff --git a/src/components/Clock.tsx b/src/components/Clock.tsx
new file mode 100644
index 0000000..1f099fc
--- /dev/null
+++ b/src/components/Clock.tsx
@@ -0,0 +1,27 @@
+import { useState, useEffect } from 'preact/hooks';
+
+const Clock = () => {
+    const [currentTime, setCurrentTime] = useState('');
+
+    useEffect(() => { // Hell
+        const updateCurrentTime = () => {
+        const now = new Date();
+        const dayOfWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'][now.getDay()];
+        let hours = now.getHours();
+        hours = hours % 12 || 12;
+
+        const formattedTime = `${dayOfWeek}, ${hours < 10 ? '0' : ''}${hours}`;
+        
+        setCurrentTime(formattedTime);
+        };
+        updateCurrentTime();
+        const intervalId = setInterval(updateCurrentTime, 1000);
+        return () => clearInterval(intervalId);
+    }, []);
+
+    return (
+        <h1>{currentTime}</h1>
+    );
+};
+
+export default Clock;
\ No newline at end of file
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 08389f6..957fbd2 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -2,11 +2,9 @@ import { useLocation } from "preact-iso";
 import LinkSvg from "../assets/link.svg";
 import LogoSvg from "../assets/logo.svg";
 import { useState, useEffect } from "preact/hooks"
-
+import Clock from "./Clock";
 export function Header() {
   const { url } = useLocation();
-  const [currentTime, setCurrentTime] = useState('');
-
 
   return (
     <div id="navbar" className="h-16 px-4 bg-navbar-color flex flex-row items-center justify-between">
@@ -16,7 +14,7 @@ export function Header() {
 			</div>
       
 			<div className="w-1/3">
-				Clock
+				<Clock />
 			</div>
 			<div className="w-1/3">
 				<span className="">Games</span>