diff --git a/webui/src/states/Root/pages/Overview/components/Server/Server.jsx b/webui/src/states/Root/pages/Overview/components/Server/Server.jsx
index aa66a5d..3aae87f 100644
--- a/webui/src/states/Root/pages/Overview/components/Server/Server.jsx
+++ b/webui/src/states/Root/pages/Overview/components/Server/Server.jsx
@@ -1,16 +1,18 @@
-import {Avatar, Box, Button, Chip, CircularProgress, IconButton, Stack, Tooltip, Typography} from "@mui/material";
-import {AvTimer, Bolt, Dns, Group, PowerOff, PowerSettingsNew, Share} from "@mui/icons-material";
+import {Alert, Avatar, Box, Chip, CircularProgress, IconButton, Snackbar, Stack, Typography} from "@mui/material";
+import {Dns, MoreVert} from "@mui/icons-material";
 import PurpurImage from "@/common/assets/software/purpur.webp";
 import PaperImage from "@/common/assets/software/paper.webp";
 import SpigotImage from "@/common/assets/software/spigot.webp";
-import {useContext, useEffect, useRef, useState} from "react";
-import {isDev, postRequest, PROXY_URL, proxyRequest} from "@/common/utils/RequestUtil.js";
-import {ServerContext} from "@/common/contexts/Server/index.js";
-import {t} from "i18next";
+import {useEffect, useRef, useState} from "react";
+import {isDev, PROXY_URL} from "@/common/utils/RequestUtil.js";
+import ServerInfo from "@/states/Root/pages/Overview/components/Server/components/ServerInfo";
+import ServerMenu from "@/states/Root/pages/Overview/components/Server/components/ServerMenu";
 
 export const Server = ({uuid, configuration, status}) => {
+    const [menuOpen, setMenuOpen] = useState(false);
+    const menuRef = useRef(null);
 
-    const {updateServer} = useContext(ServerContext);
+    const [alert, setAlert] = useState(null);
 
     const frameRef = useRef(null);
     const serverRef = useRef(null);
@@ -23,8 +25,7 @@ export const Server = ({uuid, configuration, status}) => {
     }, [frameOpen]);
 
     useEffect(() => {
-        if (isDev) return () => {
-        };
+        if (isDev) return () => {};
 
         const interval = setInterval(() => {
             if (frameRef.current) {
@@ -46,26 +47,6 @@ export const Server = ({uuid, configuration, status}) => {
         if (serverInfo === null || Object.keys(serverInfo).length === 0) setFrameOpen(false);
     }, [serverInfo]);
 
-    const updateServerInfo = () => {
-        proxyRequest(uuid + "/api/stats/")
-            .then((response) => {
-                if (response.status === 200) return response.json();
-                throw new Error("Server is offline");
-            })
-            .then((data) => setServerInfo(data))
-            .catch(() => setServerInfo(null));
-    }
-
-    const startServer = async () => {
-        await postRequest("server/start", {uuid});
-        updateServer();
-    }
-
-    const stopServer = async () => {
-        await postRequest("server/stop", {uuid});
-        updateServer();
-    }
-
     const onServerClick = () => {
         if (serverRef.current === null) return;
         if (serverRef.current.contains(document.activeElement)) return;
@@ -75,91 +56,60 @@ export const Server = ({uuid, configuration, status}) => {
         }
     }
 
-    useEffect(() => {
-        updateServerInfo();
-
-        const interval = setInterval(() => updateServerInfo(), 5000);
-
-        return () => clearInterval(interval);
-    }, []);
-
     return (
-        <Box key={uuid} backgroundColor="background.darker" borderRadius={2} p={2} m={1}
-             style={{cursor: serverInfo !== null && Object.keys(serverInfo).length > 0 ? "pointer" : "default"}}
-             boxShadow={5} gap={2} ref={serverRef} onClick={onServerClick}>
+        <>
+            <Snackbar open={alert !== null} autoHideDuration={6000} onClose={() => setAlert(null)}
+                      anchorOrigin={{vertical: "bottom", horizontal: "right"}}>
+                <Alert severity={alert !== null ? alert.severity : "info"}>{alert !== null ? alert.message : ""}</Alert>
+            </Snackbar>
+            <ServerMenu menuOpen={menuOpen} menuRef={menuRef} setMenuOpen={setMenuOpen} uuid={uuid} setAlert={setAlert}
+                        status={status} config={configuration}/>
+            <Box key={uuid} backgroundColor="background.darker" borderRadius={2} p={2} m={1}
+                 style={{cursor: serverInfo !== null && Object.keys(serverInfo).length > 0 ? "pointer" : "default"}}
+                 boxShadow={5} gap={2} ref={serverRef} onClick={onServerClick}>
 
-            <Stack direction="row" gap={2} alignItems="center" justifyContent="space-between"
-                   marginBottom={frameOpen ? 2 : 0}>
-                <Stack direction="row" gap={2} alignItems="center">
-                    <Avatar sx={{width: 45, height: 45, backgroundColor: "primary.main"}}>
-                        <Dns/>
-                    </Avatar>
-                    <Stack direction="column" gap={1} sx={{width: {xs: "100%", md: "100%", lg: "25rem"}}}>
-                        <Stack direction="row" gap={1} alignItems="center">
-                            <img alt={configuration.type} style={{width: 25, height: 25}}
-                                 src={configuration.type === "purpur" ? PurpurImage : configuration.type === "paper" ? PaperImage : SpigotImage}/>
-                            <Typography variant="h6">{configuration.name}</Typography>
-                            <Chip label={configuration.version} color="primary" size="small"/>
+                <Stack direction="row" gap={2} alignItems="center" justifyContent="space-between"
+                       marginBottom={frameOpen ? 2 : 0}>
+                    <Stack direction="row" gap={2} alignItems="center">
+                        <Avatar sx={{width: 45, height: 45, backgroundColor: "primary.main"}}>
+                            <Dns/>
+                        </Avatar>
+                        <Stack direction="column" gap={1} sx={{width: {xs: "100%", md: "100%", lg: "25rem"}}}>
+                            <Stack direction="row" gap={1} alignItems="center">
+                                <img alt={configuration.type} style={{width: 25, height: 25}}
+                                     src={configuration.type === "purpur" ? PurpurImage : configuration.type === "paper" ? PaperImage : SpigotImage}/>
+                                <Typography variant="h6">{configuration.name}</Typography>
+                                <Chip label={configuration.version} color="primary" size="small"/>
+                            </Stack>
+
+                            <Typography variant="body2">{configuration.description}</Typography>
                         </Stack>
 
-                        <Typography variant="body2">{configuration.description}</Typography>
+                        <ServerInfo status={status} uuid={uuid} serverInfo={serverInfo} setServerInfo={setServerInfo}
+                                    setAlert={setAlert}/>
                     </Stack>
-
                     <Stack direction="row" gap={2} alignItems="center">
-                        {serverInfo === null && (
-                            <Button variant="outlined" color="error" onClick={() => console.log("test")}
-                                    startIcon={<PowerOff/>}>{t("server.not_connected")}
-                            </Button>)}
-                        {serverInfo !== null && Object.keys(serverInfo).length === 0 && (
-                            <Button variant="outlined" color="warning" onClick={() => console.log("test")}
-                                    startIcon={<Bolt/>}>{t("server.loading")}
-                            </Button>)}
-                        {serverInfo !== null && Object.keys(serverInfo).length > 0 && (
-                            <Stack direction="row" gap={3} alignItems="center"
-                                   sx={{display: {xs: "none", md: "none", lg: "flex"}}}>
-                                <Stack direction="row" gap={1} alignItems="center">
-                                    <Group/>
-                                    <Typography
-                                        variant="body2">{serverInfo.online_players} / {serverInfo.max_players}</Typography>
-                                </Stack>
-                                <Stack direction="row" gap={1} alignItems="center">
-                                    <AvTimer/>
-                                    <Typography variant="body2">{serverInfo.tps}</Typography>
-                                </Stack>
-                                <Stack direction="row" gap={1} alignItems="center">
-                                    <Button variant="outlined" color="info" onClick={() => console.log("test")}
-                                            startIcon={<Share/>}>{t("server.share")}
-                                    </Button>
-                                </Stack>
-                            </Stack>
-                        )}
-                    </Stack>
-
-                </Stack>
-                <Stack direction="row" gap={2} alignItems="center">
-                    <Tooltip title={status === "OFFLINE" ? t("server.start") : t("server.stop")}>
-                        <IconButton color="primary" size="large"
-                                    onClick={() => status === "OFFLINE" ? startServer() : stopServer()}>
-                            <PowerSettingsNew/>
+                        <IconButton color="primary" size="large" id="server-menu" onClick={() => setMenuOpen(!menuOpen)}
+                                    ref={menuRef}>
+                            <MoreVert/>
                         </IconButton>
-                    </Tooltip>
-                    <Box width={10} height={50} borderRadius={2}
-                         bgcolor={status === "ONLINE" ? "success.main" : "error.main"}/>
+                        <Box width={10} height={50} borderRadius={2}
+                             bgcolor={status === "ONLINE" ? "success.main" : "error.main"}/>
+                    </Stack>
                 </Stack>
-            </Stack>
 
-            {frameOpen && !frameLoaded && (
-                <Stack direction="row" gap={2} alignItems="center" justifyContent="center" height={500}>
-                    <CircularProgress/>
-                </Stack>
-            )}
+                {frameOpen && !frameLoaded && (
+                    <Stack direction="row" gap={2} alignItems="center" justifyContent="center" height={500}>
+                        <CircularProgress/>
+                    </Stack>
+                )}
 
-            {frameOpen && (
-                <iframe src={PROXY_URL + "/" + uuid + "/"} width="100%" height={frameLoaded ? 600 : 0}
-                        onLoad={() => setInterval(() => setFrameLoaded(true), 600)}
-                        style={{border: "none", borderRadius: 20}} ref={frameRef}/>
-            )}
-
-        </Box>
+                {frameOpen && (
+                    <iframe src={PROXY_URL + "/" + uuid + "/"} width="100%" height={frameLoaded ? 600 : 0}
+                            onLoad={() => setInterval(() => setFrameLoaded(true), 600)}
+                            style={{border: "none", borderRadius: 20}} ref={frameRef}/>
+                )}
+            </Box>
+        </>
     )
 }
\ No newline at end of file