Updated Homepage & Styling;

Corrected imports/config settings;

web_server/frontend/src/components/Layout/Button.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+
+interface ButtonProps {
+	title?: string;
+	alt?: string;
+	onClick?: () => void;
+}
+
+const Button = ({ title, alt, onClick }: ButtonProps) => {
+  return (
+	<div>
+	  
+	</div>
+  )
+}
+
+export default Button

web_server/frontend/src/components/Layout/ListRow.tsx

@@ -0,0 +1,76 @@
+import React from "react";
+
+interface StreamItem {
+  id: number;
+  title: string;
+  streamer: string;
+  viewers: number;
+  thumbnail?: string;
+}
+
+interface ListEntryProps {
+  stream: StreamItem;
+  onClick?: () => void;
+}
+
+interface ListRowProps {
+  title: string;
+  description: string;
+  streams: StreamItem[];
+  onStreamClick?: (streamId: string) => void;
+}
+
+// Individual stream entry component
+const ListEntry: React.FC<ListEntryProps> = ({ stream, onClick }) => {
+  return (
+    <div
+      className="flex flex-col bg-gray-800 rounded-lg overflow-hidden cursor-pointer hover:bg-gray-700 transition-colors"
+      onClick={onClick}
+    >
+      <div className="relative w-full pt-[56.25%]">
+        {stream.thumbnail ? (
+          <img
+            src={`images/`+stream.thumbnail}
+            alt={stream.title}
+            className="absolute top-0 left-0 w-full h-full object-cover"
+          />
+        ) : (
+          <div className="absolute top-0 left-0 w-full h-full bg-gray-600" />
+        )}
+      </div>
+      <div className="p-3">
+        <h3 className="font-semibold text-lg">{stream.title}</h3>
+        <p className="text-gray-400">{stream.streamer}</p>
+        <p className="text-sm text-gray-500">{stream.viewers} viewers</p>
+      </div>
+    </div>
+  );
+};
+
+// Row of stream entries
+const ListRow: React.FC<ListRowProps> = ({
+  title,
+  description,
+  streams,
+  onStreamClick,
+}) => {
+  return (
+    <div className="flex flex-col space-y-4 py-6">
+      <div className="space-y-1">
+        <h2 className="text-2xl font-bold">{title}</h2>
+        <p className="text-gray-400">{description}</p>
+      </div>
+      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+        {streams.map((stream) => (
+          <ListEntry
+            key={stream.id}
+            stream={stream}
+            onClick={() => onStreamClick?.(stream.id)}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default ListRow;

web_server/frontend/src/components/Layout/Logo.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+
+const Logo: React.FC = () => {
+  return (
+    <div className="text-center text-[12vh] font-bold text-orange-500">
+      <h6 className="text-sm">Go on, have a...</h6>
+      <div className="flex justify-center items-center space-x-6">
+        <span>G</span>
+        <span>A</span>
+        <span>N</span>
+        <span>D</span>
+        <span>E</span>
+        <span>R</span>
+      </div>
+    </div>
+  );
+};
+
+export default Logo;

web_server/frontend/src/components/Layout/Navbar.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import Logo from "./Logo";
+import Button from "./Button";
+import { Link } from "react-router-dom";
+import { Search, User, LogIn } from "lucide-react";
+
+interface NavbarProps {
+  logged_in: boolean;
+}
+
+const Navbar: React.FC<NavbarProps> = ({ logged_in }) => {
+  return (
+    <div className="flex flex-col justify-around items-center h-[45vh]">
+      <Logo />
+      <div className="nav-buttons flex items-center space-x-4">
+        {logged_in ? (
+          <div>
+            <Link
+              to="/logout"
+              className="flex items-center text-gray-700 hover:text-purple-600"
+            >
+              <Button title="" />
+            </Link>
+          </div>
+        ) : (
+          <div>
+            <Link
+              to="/login"
+              className="flex items-center text-gray-700 hover:text-purple-600"
+            >
+              <LogIn className="h-5 w-5 mr-1" />
+              Login
+            </Link>
+            <Link
+              to="/signup"
+              className="flex items-center text-gray-700 hover:text-purple-600"
+            >
+              <User className="h-5 w-5 mr-1" />
+              Sign Up
+            </Link>
+          </div>
+        )}
+        <Button title="Quick Settings" />
+      </div>
+
+      <div className="search-bar relative">
+        <input
+          type="text"
+          placeholder="Search..."
+          className="w-64 px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:border-purple-500"
+        />
+        <Search className="absolute right-3 top-2.5 h-5 w-5 text-gray-400" />
+      </div>
+    </div>
+  );
+};
+
+export default Navbar;