diff --git a/frontend/index.html b/frontend/index.html
index e4b78ea..573ba58 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -2,9 +2,9 @@
-
+
- Vite + React + TS
+ TTIME
diff --git a/frontend/src/Components/BasicWindow.tsx b/frontend/src/Components/BasicWindow.tsx
new file mode 100644
index 0000000..9899fa1
--- /dev/null
+++ b/frontend/src/Components/BasicWindow.tsx
@@ -0,0 +1,18 @@
+import Header from './Header';
+import Footer from './Footer';
+
+function BasicWindow({ username, content, buttons }: { username: string, content: React.ReactNode, buttons:React.ReactNode }) {
+ return (
+
+ );
+}
+
+export default BasicWindow;
\ No newline at end of file
diff --git a/frontend/src/Components/Button.tsx b/frontend/src/Components/Button.tsx
new file mode 100644
index 0000000..a00f5e1
--- /dev/null
+++ b/frontend/src/Components/Button.tsx
@@ -0,0 +1,10 @@
+function Button({text, onClick}: {text: string; onClick: () => void;}){
+ return
+}
+
+export default Button;
\ No newline at end of file
diff --git a/frontend/src/Components/Footer.tsx b/frontend/src/Components/Footer.tsx
new file mode 100644
index 0000000..f1c7e29
--- /dev/null
+++ b/frontend/src/Components/Footer.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+function Footer({ children }: { children: React.ReactNode }) {
+ return (
+
+ );
+}
+
+export default Footer;
\ No newline at end of file
diff --git a/frontend/src/Components/Header.tsx b/frontend/src/Components/Header.tsx
new file mode 100644
index 0000000..fde1fbf
--- /dev/null
+++ b/frontend/src/Components/Header.tsx
@@ -0,0 +1,41 @@
+import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
+
+
+function Header({ username }: { username: string }) {
+ const [isOpen, setIsOpen] = useState(false);
+
+ const handleLogout = () => {
+ // Add any logout logic here
+ };
+
+ return (
+
+ );
+ }
+
+export default Header;
+
diff --git a/frontend/src/Pages/LoginPage.css b/frontend/src/Pages/LoginPage.css
new file mode 100644
index 0000000..0b2f5db
--- /dev/null
+++ b/frontend/src/Pages/LoginPage.css
@@ -0,0 +1,26 @@
+body{
+ overflow: hidden;
+}
+
+@keyframes backgroundTransition {
+ 0% {
+ background-image: url('src/assets/1.jpg');
+ animation-timing-function: ease-out;
+ }
+ 25% {
+ background-image: url('src/assets/2.jpg');
+ animation-timing-function: ease-in;
+ }
+ 50% {
+ background-image: url('src/assets/3.jpg');
+ animation-timing-function: ease-out;
+ }
+ 75% {
+ background-image: url('src/assets/4.jpg');
+ animation-timing-function: ease-in;
+ }
+ 100% {
+ background-image: url('src/assets/1.jpg');
+ animation-timing-function: ease-out;
+ }
+}
\ No newline at end of file
diff --git a/frontend/src/Pages/LoginPage.tsx b/frontend/src/Pages/LoginPage.tsx
new file mode 100644
index 0000000..bbee6b8
--- /dev/null
+++ b/frontend/src/Pages/LoginPage.tsx
@@ -0,0 +1,45 @@
+import Button from "../Components/Button";
+import Logo from "/src/assets/TTIMElogo.png";
+import './LoginPage.css';
+import { useEffect } from "react";
+import { Link } from "react-router-dom";
+
+const PreloadBackgroundAnimation = () => {
+ useEffect(() => {
+ const images = ['src/assets/1.jpg', 'src/assets/2.jpg', 'src/assets/3.jpg', 'src/assets/4.jpg'];
+
+ // Pre-load images
+ for (let i = 0; i < images.length; i++) {
+ const img = new Image();
+ img.src = images[i];
+ }
+ // Start animation
+ document.body.style.animation = "backgroundTransition 30s infinite";
+ }, []);
+
+ return null;
+ };
+
+function LoginPage() {
+
+ return (
+ <>
+
+
+
+
+
Welcome to TTIME!
+
Please log in to continue
+
+
+
+
+
ProjectNameExample
+
+
Your Time Reports
+ New Time Report
+ Statistics
+ Unsigned Time Reports
+
+
+
+ const buttons =
+ <>
+ 
+
+
+