diff --git a/app/components/header.tsx b/app/components/header.tsx
index f8659a5..6c6686a 100644
--- a/app/components/header.tsx
+++ b/app/components/header.tsx
@@ -1,4 +1,4 @@
-import { Separator, Surface, Typography } from "@heroui/react";
+import { ButtonGroup, Surface, Typography } from "@heroui/react";
 import { Tabs } from "@heroui/react";
 import { Button } from "@heroui/react";
 import { useNavigate, useLocation } from "react-router";
@@ -43,7 +43,12 @@ export function Header() {
                 <div className="absolute flex left-1/2 -translate-x-1/2">
                 <img className="h-12" src={porning} alt="Porning logo" />
                 </div>
-            <User />
+                <ButtonGroup >
+                    <Button onClick={() => {window.open("steam://rungame/730//+connect cs.p0rning.com", "_blank")}}><Typography.Paragraph>Connect to server</Typography.Paragraph></Button>
+                    <User>
+                    <ButtonGroup.Separator />
+                    </User>
+                </ButtonGroup>
             </Surface>
         </div>
     );