Index: components/Footer.tsx
===================================================================
--- components/Footer.tsx	(revision 40ac7a920a0b08c324bf4201b03a36483cc3aad4)
+++ components/Footer.tsx	(revision 40ac7a920a0b08c324bf4201b03a36483cc3aad4)
@@ -0,0 +1,41 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import footerLogoUrl from '../assets/projectlogo.png';
+
+export default function Footer() {
+    return (
+        <Box
+            component="footer"
+            sx={{
+                py: 3,
+                px: 2,
+                mt: 'auto',
+                backgroundColor: (theme) =>
+                    theme.palette.mode === 'light'
+                        ? theme.palette.grey[200]
+                        : theme.palette.grey[800],
+            }}
+        >
+            <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-start' }}>
+
+                <Box
+                    component="img"
+                    src={footerLogoUrl}
+                    alt="Footer Logo"
+                    sx={{
+                        height: 30,
+                        mr: 2
+                    }}
+                />
+
+                <Typography variant="body2" color="text.secondary">
+                    {'© '}
+                    {new Date().getFullYear()}
+                    {' PC Forge. All rights reserved.'}
+                </Typography>
+
+            </Box>
+        </Box>
+    );
+}
Index: components/Navbar.tsx
===================================================================
--- components/Navbar.tsx	(revision 40ac7a920a0b08c324bf4201b03a36483cc3aad4)
+++ components/Navbar.tsx	(revision 40ac7a920a0b08c324bf4201b03a36483cc3aad4)
@@ -0,0 +1,86 @@
+import React, { useEffect, useState } from "react";
+import AppBar from "@mui/material/AppBar";
+import Toolbar from "@mui/material/Toolbar";
+import Typography from "@mui/material/Typography";
+import Button from "@mui/material/Button";
+import InputBase from "@mui/material/InputBase";
+import Box from "@mui/material/Box";
+import { styled } from "@mui/material/styles";
+import { fetchAuthState } from "../pages/auth/authState.telefunc";
+import LogoUrl from '../assets/projectlogo.png';
+
+
+type AuthState = { isLoggedIn: boolean; username: string | null };
+
+export default function Navbar() {
+    const [auth, setAuth] = useState<AuthState | null>(null);
+
+    const handleLogout = async (e: React.MouseEvent) => { // funkcija za logout da go resetira auth state, za da ne go pise username-ot u navbar, plus te vrakja na login nazad
+        e.preventDefault();
+
+        setAuth({ isLoggedIn: false, username: null });
+        window.location.href = "/api/auth/signout?callbackUrl=/auth/login";
+    };
+
+    useEffect(() => {
+        let active = true;
+        fetchAuthState()
+            .then((data) => active && setAuth({ isLoggedIn: data.isLoggedIn, username: data.username }))
+            .catch(() => active && setAuth({ isLoggedIn: false, username: null }));
+        return () => { active = false; };
+    }, []);
+
+    const onHoverNav = {
+        color: 'inherit',
+        '&:hover': {
+            backgroundColor: '#ff8201',
+            color: 'white',
+            fontWeight: 'bold',
+        }
+    };
+
+    return (
+        <AppBar position="static" color="default" enableColorOnDark>
+            <Toolbar>
+                <Box sx={{ display: 'flex', alignItems: 'center', mr: 4 }}>
+                    <Box
+                        component="img"
+                        src={LogoUrl}
+                        alt="PC Forge Logo"
+                        sx={{ height: 40, mr: 2, cursor: 'pointer' }}
+                    />
+                    <Typography
+                        variant="h6"
+                        component="a"
+                        href="/"
+                        sx={{ textDecoration: "none", color: "inherit", fontWeight: "bold" }}
+                    >
+                        PC Forge
+                    </Typography>
+                </Box>
+
+                <Box sx={{ display: { xs: "none", md: "flex" }, gap: 2}}>
+                    <Button color="inherit" href="/forge" sx={onHoverNav}>Forge</Button>
+                    <Button color="inherit" href="/components" sx={onHoverNav}>Components</Button>
+                    <Button color="inherit" href="/completed-builds" sx={onHoverNav}>Completed Builds</Button>
+                </Box>
+
+                <Box sx={{ flexGrow: 1 }} />
+
+                <Box sx={{ display: 'flex', gap: 1 }}>
+                    {auth?.isLoggedIn ? (
+                        <>
+                            <Button color="inherit" href="/dashboard/user">{auth.username}</Button>
+                            <Button color="inherit" onClick={handleLogout}>Logout</Button>
+                        </>
+                    ) : (
+                        <>
+                            <Button color="inherit" href="/auth/login">Login</Button>
+                            <Button color="inherit" href="/auth/register">Register</Button>
+                        </>
+                    )}
+                </Box>
+            </Toolbar>
+        </AppBar>
+    );
+}