diff --git a/app/components/header.tsx b/app/components/header.tsx
new file mode 100644
index 0000000..824b41a
--- /dev/null
+++ b/app/components/header.tsx
@@ -0,0 +1,60 @@
+import { Separator, Surface, Typography } from "@heroui/react";
+import { Tabs } from "@heroui/react";
+import { Button } from "@heroui/react";
+import { useNavigate, useLocation } from "react-router";
+
+export function Header() {
+    const location = useLocation();
+    const navigate = useNavigate();
+
+    return (
+        <div className="flex w-full fixed top-0">
+            <Surface
+                className="flex shadow-lg shadow-indigo-900 w-full p-2 m-2 rounded-3xl items-center justify-between"
+                variant="default"
+            >
+                <Tabs
+                    selectedKey={location.pathname}
+                    onSelectionChange={(key) => navigate(String(key))}
+                >
+                    <Tabs.ListContainer>
+                        <Tabs.List>
+                            <Tabs.Tab id="/">
+                                Home
+                                <Tabs.Indicator />
+                            </Tabs.Tab>
+                            <Tabs.Tab id="/inventory">
+                                Inventory
+                                <Tabs.Indicator />
+                            </Tabs.Tab>
+                            <Tabs.Tab id="/maps">
+                                Maps
+                                <Tabs.Indicator />
+                            </Tabs.Tab>
+                            <Tabs.Tab id="/gamemodes">
+                                Gamemodes
+                                <Tabs.Indicator />
+                            </Tabs.Tab>
+                        </Tabs.List>
+                    </Tabs.ListContainer>
+                </Tabs>
+                <div className="absolute flex left-1/2 -translate-x-1/2">
+                <Typography.Heading
+                    level={2}
+                    align="center"
+                >
+                    Porning
+                </Typography.Heading>
+                <Separator orientation="vertical" variant="tertiary" className="bg-white mx-4"/>
+                <Typography.Heading
+                    level={2}
+                    align="center"
+                >
+                    CS2
+                </Typography.Heading>
+                </div>
+               <Button>Login</Button>
+            </Surface>
+        </div>
+    );
+}