diff --git a/apps/dashboard/components/layouts/Dashboard.module.css b/apps/dashboard/components/layouts/Dashboard.module.css
deleted file mode 100644
index d71fa47..0000000
--- a/apps/dashboard/components/layouts/Dashboard.module.css
+++ /dev/null
@@ -1,8 +0,0 @@
-.appShellRoot {
-  background: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-9));
-}
-
-.appShellMain {
-  display: flex;
-  flex-direction: column;
-}
diff --git a/apps/dashboard/components/layouts/Dashboard.tsx b/apps/dashboard/components/layouts/Dashboard.tsx
index eb94ea1..e10f50f 100644
--- a/apps/dashboard/components/layouts/Dashboard.tsx
+++ b/apps/dashboard/components/layouts/Dashboard.tsx
@@ -1,26 +1,27 @@
-import { AppShell } from "@mantine/core";
+import { AppShell, Container } from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
 import { ReactNode } from "react";
 
 import { Head } from "../partials/Head";
 import { Nav } from "../partials/Nav";
-import classes from "./Dashboard.module.css";
 
 export function Dashboard({ children }: { children: ReactNode }) {
+  const [mobileOpened, { toggle: toggleMobile }] = useDisclosure();
+
   return (
-    <>
-      <AppShell
-        classNames={{
-          root: classes.appShellRoot,
-          main: classes.appShellMain,
-        }}
-        header={{ height: { base: 40, xs: 60 } }}
-        navbar={{ width: { base: 40, xs: 75 }, breakpoint: "" }}
-        padding="md"
-      >
-        <Head />
-        <Nav />
-        <AppShell.Main>{children}</AppShell.Main>
-      </AppShell>
-    </>
+    <AppShell
+      header={{ height: 64 }}
+      navbar={{ width: 80, breakpoint: "sm", collapsed: { mobile: !mobileOpened } }}
+      padding="xl"
+      bg="var(--mantine-color-body)"
+    >
+      <Head mobileOpened={mobileOpened} toggleMobile={toggleMobile} />
+      <Nav />
+      <AppShell.Main display="flex" style={{ flexDirection: "column", minHeight: "100vh" }}>
+        <Container size="xl" w="100%" flex={1} display="flex" style={{ flexDirection: "column" }}>
+          {children}
+        </Container>
+      </AppShell.Main>
+    </AppShell>
   );
 }
diff --git a/apps/dashboard/components/partials/Head.module.css b/apps/dashboard/components/partials/Head.module.css
deleted file mode 100644
index 380be6e..0000000
--- a/apps/dashboard/components/partials/Head.module.css
+++ /dev/null
@@ -1,42 +0,0 @@
-.values {
-  flex-wrap: nowrap;
-  overflow-x: auto;
-  overflow-y: hidden;
-
-  &::-webkit-scrollbar {
-    height: 0.4rem;
-  }
-
-  &::-webkit-scrollbar-track {
-    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
-    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background-color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-2));
-    border-radius: 0.3rem;
-  }
-}
-
-.inputField {
-  --input-padding-y: 0;
-}
-
-.modal {
-  overflow-y: visible;
-  .section {
-    overflow-y: visible;
-  }
-}
-
-.defaultSelectGroup {
-  @media (max-width: $mantine-breakpoint-md) {
-    display: none;
-  }
-}
-
-.filterIcon {
-  @media (min-width: $mantine-breakpoint-md) {
-    display: none;
-  }
-}
diff --git a/apps/dashboard/components/partials/Head.tsx b/apps/dashboard/components/partials/Head.tsx
index 7116182..0df5155 100644
--- a/apps/dashboard/components/partials/Head.tsx
+++ b/apps/dashboard/components/partials/Head.tsx
@@ -1,4 +1,4 @@
-import { ActionIcon, AppShell, Box, Center, Flex, Group, Modal, rem, Stack } from "@mantine/core";
+import { ActionIcon, AppShell, Box, Burger, Center, Flex, Group, Modal, rem, Stack } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
 import { IProcess } from "@pm2.web/typings";
 import { IconCircleFilled, IconDatabaseCog, IconFilterCog, IconLock, IconServerCog } from "@tabler/icons-react";
@@ -9,9 +9,8 @@ import Access from "@/utils/access";
 
 import { useSelected } from "../context/SelectedProvider";
 import { CustomMultiSelect, IItem } from "../misc/MultiSelect/CustomMultiSelect";
-import classes from "./Head.module.css";
 
-export function Head() {
+export function Head({ mobileOpened, toggleMobile }: { mobileOpened?: boolean; toggleMobile?: () => void }) {
   const { servers, selectItem, selectedItem } = useSelected();
   const { data: session } = useSession();
   const [opened, { open, close }] = useDisclosure(false);
@@ -36,7 +35,7 @@ export function Head() {
                 value: server._id,
                 label: server.name,
                 status: new Date(server.updatedAt).getTime() > Date.now() - 1000 * 60 ? "online" : "offline",
-                disabled: !server.processes.some((process) => hasAccess(server._id, process._id)), // check whether user has access to any process
+                disabled: !server.processes.some((process) => hasAccess(server._id, process._id)),
               })) || []
             }
             onChange={(values) => {
@@ -45,15 +44,9 @@ export function Head() {
             itemComponent={itemComponent}
             placeholder="Select Server"
             searchable
-            w={{
-              md: "25rem",
-            }}
-            radius={"md"}
-            classNames={{
-              pillsList: classes.values,
-            }}
+            w={{ md: "15rem", base: "100%" }}
+            radius="md"
             hidePickedOptions
-            // zIndex={204}
           />
           <CustomMultiSelect
             leftSection={<IconDatabaseCog />}
@@ -79,23 +72,13 @@ export function Head() {
             }}
             placeholder="Select Process"
             searchable
-            w={{
-              md: "25rem",
-            }}
+            w={{ md: "15rem", base: "100%" }}
             maxValues={4}
-            radius={"md"}
+            radius="md"
             withScrollArea
             maxDropdownHeight={200}
-            classNames={{
-              pillsList: classes.values,
-            }}
-            style={{
-              zIndex: 204,
-            }}
-            comboboxProps={{
-              position: "bottom",
-              middlewares: { flip: false, shift: false },
-            }}
+            style={{ zIndex: 204 }}
+            comboboxProps={{ position: "bottom", middlewares: { flip: false, shift: false } }}
             hidePickedOptions
           />
         </>
@@ -105,32 +88,36 @@ export function Head() {
 
   return (
     <AppShell.Header>
-      <Modal opened={opened} onClose={close} title="Server/Process Filter" className={classes.modal} zIndex={200}>
-        <Stack
-          style={{
-            zIndex: 203,
-          }}
-        >
-          {MultiSelectItems}
-        </Stack>
+      <Modal opened={opened} onClose={close} title="Server/Process Filter" zIndex={200}>
+        <Stack style={{ zIndex: 203 }}>{MultiSelectItems}</Stack>
       </Modal>
-      <Flex h={"100%"} justify={"space-between"}>
-        <Group h={"100%"}>
-          <Center
-            w={{
-              base: rem(42),
-              xs: rem(70),
-            }}
-          >
-            <Image alt="logo" src="/logo.png" width={25} height={25} />
+      <Flex h="100%" justify="space-between" align="center" pr="xl">
+        <Group h="100%" gap={0}>
+          {toggleMobile && <Burger opened={mobileOpened} onClick={toggleMobile} hiddenFrom="sm" size="sm" ml="md" />}
+          <Center w={80} h="100%">
+            <Image
+              alt="logo"
+              src="/logo.png"
+              width={30}
+              height={30}
+              style={{ filter: "drop-shadow(0px 0px 8px rgba(0,0,0,0.5))" }}
+            />
           </Center>
         </Group>
-        <Group h={"100%"} justify="right" px={"lg"} className={classes.defaultSelectGroup}>
-          {MultiSelectItems}
-        </Group>
-        <Group h={"100%"} justify="right" px={"xs"} className={classes.filterIcon}>
-          <ActionIcon variant="light" color="blue" onClick={open}>
-            <IconFilterCog size={"1.2rem"} />
+
+        <Group h="100%" justify="right" gap="md">
+          <Group display={{ base: "none", lg: "flex" }} gap="md">
+            {MultiSelectItems}
+          </Group>
+          <ActionIcon
+            variant="light"
+            color="cyan"
+            onClick={open}
+            size="lg"
+            radius="md"
+            display={{ base: "flex", lg: "none" }}
+          >
+            <IconFilterCog size="1.2rem" />
           </ActionIcon>
         </Group>
       </Flex>
diff --git a/apps/dashboard/components/partials/Nav.module.css b/apps/dashboard/components/partials/Nav.module.css
deleted file mode 100644
index 0573c5f..0000000
--- a/apps/dashboard/components/partials/Nav.module.css
+++ /dev/null
@@ -1,67 +0,0 @@
-.stackLink {
-  @media (max-width: $mantine-breakpoint-xs) {
-    gap: rem(10);
-  }
-}
-
-.stackAction {
-  @media (max-width: $mantine-breakpoint-xs) {
-    gap: rem(15);
-  }
-}
-
-.link {
-  width: rem(50);
-  height: rem(50);
-  border-radius: var(--mantine-radius-md);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
-
-  &:hover {
-    background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-5));
-  }
-
-  @media (max-width: $mantine-breakpoint-sm) {
-    width: rem(20);
-    height: rem(20);
-  }
-}
-
-.icon {
-  width: rem(24);
-  height: rem(24);
-
-  @media (max-width: $mantine-breakpoint-sm) {
-    width: rem(20);
-    height: rem(20);
-  }
-}
-
-.active {
-  &,
-  &:hover {
-    background-color: var(--mantine-primary-color-light);
-  }
-}
-
-.colorSchemeDark {
-  @mixin dark {
-    display: none;
-  }
-
-  @mixin light {
-    display: block;
-  }
-}
-
-.colorSchemeLight {
-  @mixin light {
-    display: none;
-  }
-
-  @mixin dark {
-    display: block;
-  }
-}
diff --git a/apps/dashboard/components/partials/Nav.tsx b/apps/dashboard/components/partials/Nav.tsx
index 2a898b1..91a7469 100644
--- a/apps/dashboard/components/partials/Nav.tsx
+++ b/apps/dashboard/components/partials/Nav.tsx
@@ -1,4 +1,4 @@
-import { AppShell, Stack, Tooltip, UnstyledButton, useMantineColorScheme } from "@mantine/core";
+import { ActionIcon, AppShell, Stack, Tooltip, useMantineColorScheme, useMantineTheme } from "@mantine/core";
 import {
   IconGauge,
   IconLayoutDashboard,
@@ -9,52 +9,50 @@ import {
   IconUser,
   TablerIcon,
 } from "@tabler/icons-react";
-import cx from "clsx";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { Session } from "next-auth";
 import { signOut, useSession } from "next-auth/react";
 
-import classes from "./Nav.module.css";
-
-interface NavbarBtnProps {
-  icon: TablerIcon;
-  label: string;
-  active?: boolean;
-  onClick?(): void;
-}
-
-function NavbarBtn({ icon: Icon, label, active, onClick }: NavbarBtnProps) {
-  return (
-    <Tooltip label={label} position="right" transitionProps={{ duration: 0 }}>
-      <UnstyledButton onClick={onClick} className={`${classes.link} ${active && classes.active}`}>
-        <Icon className={classes.icon} stroke={1.5} />
-      </UnstyledButton>
-    </Tooltip>
-  );
-}
-
 interface NavbarLinkProps {
   icon: TablerIcon;
   label: string;
   active?: boolean;
   href?: string;
+  onClick?: () => void;
 }
 
-function NavbarLink({ icon: Icon, label, active, href }: NavbarLinkProps) {
-  return (
+function NavbarLink({ icon: Icon, label, active, href, onClick }: NavbarLinkProps) {
+  const theme = useMantineTheme();
+
+  const content = (
     <Tooltip label={label} position="right" transitionProps={{ duration: 0 }}>
-      <Link href={href || ""} className={`${classes.link} ${active && classes.active}`}>
-        <Icon stroke={1.5} className={classes.icon} />
-      </Link>
+      <ActionIcon
+        variant={active ? "light" : "subtle"}
+        color={active ? theme.primaryColor : "gray"}
+        onClick={onClick}
+        size="xl"
+        radius="md"
+      >
+        <Icon stroke={1.5} size={22} />
+      </ActionIcon>
     </Tooltip>
   );
+
+  if (href) {
+    return (
+      <Link href={href} style={{ textDecoration: "none" }}>
+        {content}
+      </Link>
+    );
+  }
+
+  return content;
 }
 
 const navLinks = [
   { icon: IconGauge, label: "Overview", href: "/" },
   { icon: IconLayoutDashboard, label: "Process", href: "/process" },
-  /* { icon: IconServerBolt, label: 'Server', href: '/server' }, */ // TODO: Add server page, server
   {
     icon: IconUser,
     label: "User Administration",
@@ -67,37 +65,33 @@ const navLinks = [
       return false;
     },
   },
-  /* { icon: IconBellCog, label: 'Alerts', href: '/alert' }, */
   { icon: IconSettings, label: "Settings", href: "/settings" },
 ];
 
 export function Nav() {
-  const { toggleColorScheme } = useMantineColorScheme();
+  const { colorScheme, toggleColorScheme } = useMantineColorScheme();
   const { data: session } = useSession();
-  //active page
   const router = useRouter();
-  const active = navLinks.findIndex((link) => router.pathname === link.href);
 
   const links = navLinks
     .filter((link) => (link.onlyIf ? link.onlyIf(session) : true))
-    .map((link, index) => <NavbarLink {...link} key={link.label} active={index === active} />);
+    .map((link) => <NavbarLink {...link} key={link.label} active={router.pathname === link.href} />);
 
   return (
-    <AppShell.Navbar p="sm">
-      <AppShell.Section grow mt={20}>
-        <Stack justify="center" className={classes.stackLink}>
+    <AppShell.Navbar p="md">
+      <AppShell.Section grow>
+        <Stack justify="center" align="center" gap="sm">
           {links}
         </Stack>
       </AppShell.Section>
       <AppShell.Section>
-        <Stack justify="center" className={classes.stackAction}>
-          <Tooltip label="Toggle Theme" position="right" transitionProps={{ duration: 0 }}>
-            <Link href={""} className={classes.link} onClick={() => toggleColorScheme()}>
-              <IconSun stroke={1.5} className={cx(classes.icon, classes.colorSchemeLight)} />
-              <IconMoonStars stroke={1.5} className={cx(classes.icon, classes.colorSchemeDark)} />
-            </Link>
-          </Tooltip>
-          <NavbarBtn icon={IconLogout} label="Logout" onClick={() => signOut()} />
+        <Stack justify="center" align="center" gap="sm">
+          <NavbarLink
+            icon={colorScheme === "dark" ? IconSun : IconMoonStars}
+            label="Toggle Theme"
+            onClick={() => toggleColorScheme()}
+          />
+          <NavbarLink icon={IconLogout} label="Logout" onClick={() => signOut()} />
         </Stack>
       </AppShell.Section>
     </AppShell.Navbar>
diff --git a/apps/dashboard/components/process/ProcessActionRow.tsx b/apps/dashboard/components/process/ProcessActionRow.tsx
index 54471fd..78fb48e 100644
--- a/apps/dashboard/components/process/ProcessActionRow.tsx
+++ b/apps/dashboard/components/process/ProcessActionRow.tsx
@@ -1,7 +1,6 @@
 import { ActionIcon, Flex } from "@mantine/core";
 import { IconPower, IconReload, IconSquareRoundedMinus, IconTrash } from "@tabler/icons-react";
 
-import classes from "@/styles/process.module.css";
 import { sendNotification } from "@/utils/notification";
 import { trpc } from "@/utils/trpc";
 
@@ -69,27 +68,8 @@ export default function ProcessAction({ processId, collapse }: ProcessActionProp
       >
         <IconTrash size="1.4rem" />
       </ActionIcon>
-      <ActionIcon
-        className={classes.colorSchemeLight}
-        variant={"light"}
-        color={"dark.2"}
-        radius="sm"
-        size={"sm"}
-        mr={"-3px"}
-        onClick={collapse}
-      >
-        <IconSquareRoundedMinus size="1.1rem" />
-      </ActionIcon>
-      <ActionIcon
-        className={classes.colorSchemeDark}
-        variant={"subtle"}
-        color={"dark.8"}
-        radius="sm"
-        size={"sm"}
-        mr={"-3px"}
-        onClick={collapse}
-      >
-        <IconSquareRoundedMinus size="1.1rem" />
+      <ActionIcon variant="subtle" color="gray" radius="sm" size="lg" onClick={collapse}>
+        <IconSquareRoundedMinus size="1.2rem" />
       </ActionIcon>
     </Flex>
   );
diff --git a/apps/dashboard/components/process/ProcessGitMetric.tsx b/apps/dashboard/components/process/ProcessGitMetric.tsx
index 0319027..1a3e919 100644
--- a/apps/dashboard/components/process/ProcessGitMetric.tsx
+++ b/apps/dashboard/components/process/ProcessGitMetric.tsx
@@ -1,32 +1,31 @@
-import { Anchor, Flex, Paper, Popover, Text } from "@mantine/core";
+import { Anchor, Badge, Group, Popover, Text } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
 import { IProcess } from "@pm2.web/typings";
 import { IconGitMerge } from "@tabler/icons-react";
 
-import classes from "@/styles/process.module.css";
-
 export default function ProcessGitMetric({ versioning }: { versioning?: IProcess["versioning"] }) {
   const [opened, { close, open }] = useDisclosure(false);
 
   return (
     <Popover withArrow shadow="md" opened={opened} trapFocus>
       <Popover.Target>
-        <Paper
-          className={classes.processMetric}
+        <Badge
+          variant="light"
           radius="md"
-          p={"4px"}
-          px={"10px"}
+          size="lg"
+          h="30px"
           onMouseEnter={open}
           onMouseLeave={close}
+          style={{ cursor: "pointer" }}
         >
-          <Flex align={"center"} justify={"space-between"} gap={"5px"} w={"5em"}>
+          <Group align="center" gap="xs">
             <IconGitMerge size="1.2rem" />
             <Anchor href={`${versioning?.url}/commit/${versioning?.revision}`} target="_blank" underline="hover">
               {versioning?.branch}
               {versioning?.unstaged && "*"}
             </Anchor>
-          </Flex>
-        </Paper>
+          </Group>
+        </Badge>
       </Popover.Target>
       <Popover.Dropdown style={{ pointerEvents: "none" }}>
         {versioning?.comment?.split("\n")?.map((t, tIdx) => (
diff --git a/apps/dashboard/components/process/ProcessHeader.tsx b/apps/dashboard/components/process/ProcessHeader.tsx
index 9b5fa92..5d3e5fd 100644
--- a/apps/dashboard/components/process/ProcessHeader.tsx
+++ b/apps/dashboard/components/process/ProcessHeader.tsx
@@ -1,4 +1,4 @@
-import { Flex, Indicator, Text } from "@mantine/core";
+import { Flex, Group, Indicator, Text } from "@mantine/core";
 import { IProcess } from "@pm2.web/typings";
 import {
   IconBrandCSharp,
@@ -54,13 +54,13 @@ export default function ProcessHeader({
   }, [interpreter]);
 
   return (
-    <Flex align={"center"} rowGap={"10px"} columnGap={"5px"}>
+    <Group align="center" gap="sm">
       <Indicator color={statusColor || "gray"} position="bottom-end" size={10} offset={5} zIndex={1}>
         <InterpreterIcon />
       </Indicator>
       <Text size="xl" fw={600}>
         {name}
       </Text>
-    </Flex>
+    </Group>
   );
 }
diff --git a/apps/dashboard/components/process/ProcessItem.tsx b/apps/dashboard/components/process/ProcessItem.tsx
index 3307973..fd2c9af 100644
--- a/apps/dashboard/components/process/ProcessItem.tsx
+++ b/apps/dashboard/components/process/ProcessItem.tsx
@@ -1,10 +1,7 @@
-import { Flex, Paper, Transition } from "@mantine/core";
+import { Group, Paper, Stack, Transition } from "@mantine/core";
 import { IProcess, ISetting } from "@pm2.web/typings";
-import cx from "clsx";
 import { useState } from "react";
 
-import classes from "@/styles/process.module.css";
-
 import ProcessAction from "./ProcessActionRow";
 import ProcessChart from "./ProcessChart";
 import ProcessHeader from "./ProcessHeader";
@@ -37,25 +34,26 @@ export default function ProcessItem({ process, setting }: ProcessItemProps) {
     <Paper
       key={process._id}
       radius="md"
-      p="xs"
+      p="md"
       shadow="sm"
-      className={cx(classes.processItem, {
-        [classes.opened]: !collapsed,
-        [classes.closed]: collapsed,
-      })}
+      bg="var(--mantine-color-body)"
+      style={{
+        transition: "box-shadow 0.2s ease, transform 0.2s ease",
+        border: "1px solid var(--mantine-color-default-border)",
+      }}
     >
-      <Flex direction={"column"}>
-        <Flex align={"center"} justify={"space-between"} wrap={"wrap"}>
+      <Stack>
+        <Group justify="space-between" align="center" wrap="wrap" gap="md">
           <ProcessHeader statusColor={getStatusColor()} interpreter={process.type} name={process.name} />
-          <Flex align={"center"} rowGap={"10px"} columnGap={"40px"} wrap={"wrap"} justify={"end"}>
+          <Group align="center" gap="md" wrap="wrap" justify="flex-end">
             <ProcessMetricRow
               process={process}
               refetchInterval={setting.polling.frontend}
               showMetric={process.status == "online"}
             />
             <ProcessAction processId={process._id} collapse={() => setCollapsed(!collapsed)} />
-          </Flex>
-        </Flex>
+          </Group>
+        </Group>
         <Transition transition="scale-y" duration={500} mounted={!collapsed}>
           {(styles) => (
             <div style={{ ...styles }}>
@@ -68,7 +66,7 @@ export default function ProcessItem({ process, setting }: ProcessItemProps) {
             </div>
           )}
         </Transition>
-      </Flex>
+      </Stack>
     </Paper>
   );
 }
diff --git a/apps/dashboard/components/process/ProcessLog.tsx b/apps/dashboard/components/process/ProcessLog.tsx
index ac16e84..9006111 100644
--- a/apps/dashboard/components/process/ProcessLog.tsx
+++ b/apps/dashboard/components/process/ProcessLog.tsx
@@ -1,6 +1,5 @@
-import { Paper, ScrollArea, Text } from "@mantine/core";
+import { Card, ScrollArea, Text } from "@mantine/core";
 
-import classes from "@/styles/process.module.css";
 import { trpc } from "@/utils/trpc";
 
 interface ProcessActionProps {
@@ -17,8 +16,8 @@ export default function ProcessLog({ processId, refetchInterval }: ProcessAction
   );
 
   return (
-    <Paper radius="md" p="xs" className={classes.processLog} h={"100px"} m="xs">
-      <ScrollArea h={"100%"} style={{ overflowX: "hidden" }}>
+    <Card radius="md" p="xs" h="150px" m="xs" withBorder>
+      <ScrollArea h="100%" style={{ overflowX: "hidden" }}>
         <Text fw="bold">Logs</Text>
         <div>
           {getLogs?.data?.map((log) => (
@@ -36,6 +35,6 @@ export default function ProcessLog({ processId, refetchInterval }: ProcessAction
           {getLogs.error && <div>Error: {getLogs.error.message}</div>}
         </div>
       </ScrollArea>
-    </Paper>
+    </Card>
   );
 }
diff --git a/apps/dashboard/components/process/ProcessMetric.tsx b/apps/dashboard/components/process/ProcessMetric.tsx
index 2e337ff..6fae8e6 100644
--- a/apps/dashboard/components/process/ProcessMetric.tsx
+++ b/apps/dashboard/components/process/ProcessMetric.tsx
@@ -1,9 +1,7 @@
-import { Flex, Paper, Text } from "@mantine/core";
+import { Badge, Group, Text } from "@mantine/core";
 import { Icon, IconProps } from "@tabler/icons-react";
 import { ForwardRefExoticComponent, RefAttributes } from "react";
 
-import classes from "@/styles/process.module.css";
-
 export default function ProcessItemMetric({
   w,
   Icon,
@@ -14,11 +12,13 @@ export default function ProcessItemMetric({
   value?: string | undefined | boolean;
 }) {
   return (
-    <Paper className={classes.processMetric} radius="md" p={"4px"} px={"10px"}>
-      <Flex align={"center"} justify={"space-between"} gap={"5px"} w={w || "50px"}>
+    <Badge variant="light" radius="md" size="lg" h="30px">
+      <Group align="center" gap="xs">
         <Icon size="1.2rem" />
-        <Text size="md">{value || ""}</Text>
-      </Flex>
-    </Paper>
+        <Text size="sm" fw={600}>
+          {value || ""}
+        </Text>
+      </Group>
+    </Badge>
   );
 }
diff --git a/apps/dashboard/components/process/ProcessMetricRow.tsx b/apps/dashboard/components/process/ProcessMetricRow.tsx
index 8444811..798b467 100644
--- a/apps/dashboard/components/process/ProcessMetricRow.tsx
+++ b/apps/dashboard/components/process/ProcessMetricRow.tsx
@@ -1,4 +1,4 @@
-import { Flex } from "@mantine/core";
+import { Group, Progress, Stack, Text, Tooltip } from "@mantine/core";
 import { IProcess } from "@pm2.web/typings";
 import { IconCpu, IconDeviceSdCard, IconHistory } from "@tabler/icons-react";
 import ms from "ms";
@@ -7,7 +7,6 @@ import { formatBytes } from "@/utils/format";
 import { trpc } from "@/utils/trpc";
 
 import ProcessGitMetric from "./ProcessGitMetric";
-import ProcessItemMetric from "./ProcessMetric";
 
 interface ProcessActionProps {
   process: IProcess;
@@ -23,16 +22,53 @@ export default function ProcessMetricRow({ process, refetchInterval, showMetric
     },
   );
 
+  const cpuValue = showMetric ? getStat.data?.cpu || 0 : 0;
+  const memValue = showMetric ? getStat.data?.memory || 0 : 0;
+
   return (
-    <Flex align={"center"} gap={"xs"} wrap={"wrap"}>
+    <Group align="center" gap="xl" wrap="nowrap" style={{ flexGrow: 1 }}>
       {process?.versioning?.url && <ProcessGitMetric versioning={process.versioning} />}
-      <ProcessItemMetric
-        w="75px"
-        Icon={IconDeviceSdCard}
-        value={showMetric && formatBytes(getStat.data?.memory || 0)}
-      />
-      <ProcessItemMetric w="55px" Icon={IconCpu} value={showMetric && (getStat.data?.cpu?.toFixed(0) || 0) + "%"} />
-      <ProcessItemMetric w="57px" Icon={IconHistory} value={showMetric && ms(getStat.data?.uptime || 0)} />
-    </Flex>
+
+      <Tooltip label={`CPU: ${cpuValue.toFixed(1)}%`}>
+        <Stack gap={4} style={{ width: 120 }}>
+          <Group justify="space-between">
+            <Group gap={4}>
+              <IconCpu size={14} color="gray" />
+              <Text size="xs" fw={700} c="dimmed">
+                CPU
+              </Text>
+            </Group>
+            <Text size="xs" fw={700}>
+              {showMetric ? `${cpuValue.toFixed(0)}%` : "-"}
+            </Text>
+          </Group>
+          <Progress value={Math.min(cpuValue, 100)} color="blue" size="sm" radius="xl" />
+        </Stack>
+      </Tooltip>
+
+      <Tooltip label={`RAM: ${formatBytes(memValue)}`}>
+        <Stack gap={4} style={{ width: 120 }}>
+          <Group justify="space-between">
+            <Group gap={4}>
+              <IconDeviceSdCard size={14} color="gray" />
+              <Text size="xs" fw={700} c="dimmed">
+                RAM
+              </Text>
+            </Group>
+            <Text size="xs" fw={700}>
+              {showMetric ? formatBytes(memValue) : "-"}
+            </Text>
+          </Group>
+          <Progress value={Math.min((memValue / (1024 * 1024 * 1024)) * 100, 100)} color="teal" size="sm" radius="xl" />
+        </Stack>
+      </Tooltip>
+
+      <Group gap={4}>
+        <IconHistory size={16} color="gray" />
+        <Text size="sm" fw={700}>
+          {showMetric ? ms(getStat.data?.uptime || 0) : "-"}
+        </Text>
+      </Group>
+    </Group>
   );
 }
diff --git a/apps/dashboard/components/settings/UpdateConfiguration.module.css b/apps/dashboard/components/settings/UpdateConfiguration.module.css
deleted file mode 100644
index 1c11229..0000000
--- a/apps/dashboard/components/settings/UpdateConfiguration.module.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.pinInput {
-  @media (max-width: $mantine-breakpoint-xs) {
-    width: 1.5rem;
-    height: 1.5rem;
-    min-height: auto;
-  }
-}
diff --git a/apps/dashboard/components/settings/UpdateConfiguration.tsx b/apps/dashboard/components/settings/UpdateConfiguration.tsx
index 59a4760..5386dbb 100644
--- a/apps/dashboard/components/settings/UpdateConfiguration.tsx
+++ b/apps/dashboard/components/settings/UpdateConfiguration.tsx
@@ -5,10 +5,10 @@ import {
   Checkbox,
   CopyButton,
   Flex,
-  Grid,
   Input,
   NumberInput,
   PinInput,
+  SimpleGrid,
   Stack,
   Title,
   Tooltip,
@@ -21,8 +21,6 @@ import { IconCheck, IconCopy, IconDeviceFloppy, IconRefresh } from "@tabler/icon
 import { sendNotification } from "@/utils/notification";
 import { trpc } from "@/utils/trpc";
 
-import classes from "./UpdateConfiguration.module.css";
-
 interface UpdateConfigurationProps {
   settings: ISetting;
 }
@@ -62,90 +60,80 @@ export default function UpdateConfiguration({ settings }: UpdateConfigurationPro
       </Accordion.Control>
       <Accordion.Panel px="xs">
         <form onSubmit={globalConfiguration.onSubmit((values) => updateSetting.mutate(values))}>
-          <Grid grow>
-            <Grid.Col span={2}>
-              <Stack my={"xs"}>
-                <NumberInput
-                  label="Backend Update Interval"
-                  description="In ms"
-                  placeholder="Backend Update Interval"
-                  required
-                  {...globalConfiguration.getInputProps("polling.backend")}
-                  min={1000}
-                  step={500}
-                />
-                <NumberInput
-                  label="Frontend Update Interval"
-                  description="In ms"
-                  placeholder="Frontend Update Interval"
-                  required
-                  {...globalConfiguration.getInputProps("polling.frontend")}
-                  min={1000}
-                  step={500}
-                />
-              </Stack>
-            </Grid.Col>
-            <Grid.Col span={2}>
-              <Stack my={"xs"}>
-                <NumberInput
-                  label="Log Rotation"
-                  description="automatically rotate logs,to meet max logs length"
-                  placeholder="Log Rotation"
-                  required
-                  step={50}
-                  {...globalConfiguration.getInputProps("logRotation")}
-                />
-                <Checkbox
-                  label="Exclude Daemon Process"
-                  {...globalConfiguration.getInputProps("excludeDaemon", { type: "checkbox" })}
-                  description="excludes process with name pm2.web-daemon"
-                />
-                <Input.Wrapper label="Registration Code" description="requires code for registering new user accounts">
-                  <Flex align={"end"} gap={"xs"} wrap={"wrap"}>
-                    <PinInput
-                      length={6}
-                      {...globalConfiguration.getInputProps("registrationCode")}
-                      classNames={{
-                        input: classes.pinInput,
-                      }}
-                    />
-                    <ActionIcon
-                      type="button"
-                      title="reload_code"
-                      variant="light"
-                      color="blue"
-                      radius="sm"
-                      size={"2rem"}
-                      onClick={() => globalConfiguration.setFieldValue("registrationCode", randomId().slice(8, 14))}
-                    >
-                      <IconRefresh />
-                    </ActionIcon>
-                    <CopyButton value={globalConfiguration.values.registrationCode} timeout={2000}>
-                      {({ copied, copy }) => (
-                        <Tooltip label={copied ? "Copied" : "Copy"} withArrow position="right">
-                          <ActionIcon color={copied ? "teal" : "gray"} onClick={copy} variant="light" size={"2rem"}>
-                            {copied ? <IconCheck /> : <IconCopy size="1rem" />}
-                          </ActionIcon>
-                        </Tooltip>
-                      )}
-                    </CopyButton>
-                  </Flex>
-                </Input.Wrapper>
-              </Stack>
-              <Flex justify={"flex-end"}>
+          <SimpleGrid cols={{ base: 1, md: 2 }} spacing="md">
+            <Stack>
+              <NumberInput
+                label="Backend Update Interval"
+                description="In ms"
+                placeholder="Backend Update Interval"
+                required
+                {...globalConfiguration.getInputProps("polling.backend")}
+                min={1000}
+                step={500}
+              />
+              <NumberInput
+                label="Frontend Update Interval"
+                description="In ms"
+                placeholder="Frontend Update Interval"
+                required
+                {...globalConfiguration.getInputProps("polling.frontend")}
+                min={1000}
+                step={500}
+              />
+            </Stack>
+            <Stack>
+              <NumberInput
+                label="Log Rotation"
+                description="automatically rotate logs,to meet max logs length"
+                placeholder="Log Rotation"
+                required
+                step={50}
+                {...globalConfiguration.getInputProps("logRotation")}
+              />
+              <Checkbox
+                label="Exclude Daemon Process"
+                {...globalConfiguration.getInputProps("excludeDaemon", { type: "checkbox" })}
+                description="excludes process with name pm2.web-daemon"
+              />
+              <Input.Wrapper label="Registration Code" description="requires code for registering new user accounts">
+                <Flex align={"end"} gap={"xs"} wrap={"wrap"}>
+                  <PinInput length={6} {...globalConfiguration.getInputProps("registrationCode")} size="sm" />
+                  <ActionIcon
+                    type="button"
+                    title="reload_code"
+                    variant="light"
+                    color="blue"
+                    radius="sm"
+                    size={"2rem"}
+                    onClick={() => globalConfiguration.setFieldValue("registrationCode", randomId().slice(8, 14))}
+                  >
+                    <IconRefresh />
+                  </ActionIcon>
+                  <CopyButton value={globalConfiguration.values.registrationCode} timeout={2000}>
+                    {({ copied, copy }) => (
+                      <Tooltip label={copied ? "Copied" : "Copy"} withArrow position="right">
+                        <ActionIcon color={copied ? "teal" : "gray"} onClick={copy} variant="light" size={"2rem"}>
+                          {copied ? <IconCheck /> : <IconCopy size="1rem" />}
+                        </ActionIcon>
+                      </Tooltip>
+                    )}
+                  </CopyButton>
+                </Flex>
+              </Input.Wrapper>
+              <Flex justify="flex-end" mt="auto">
                 <Button
                   type="submit"
                   variant="light"
                   color="teal"
                   leftSection={<IconDeviceFloppy />}
-                  mt={"sm"}
+                  mt="sm"
                   loading={updateSetting.isPending}
                 >
                   Save
                 </Button>
               </Flex>
-            </Grid.Col>
-          </Grid>
+            </Stack>
+          </SimpleGrid>
         </form>
       </Accordion.Panel>
     </Accordion.Item>
diff --git a/apps/dashboard/components/stats/StatsRing.module.css b/apps/dashboard/components/stats/StatsRing.module.css
deleted file mode 100644
index facac7e..0000000
--- a/apps/dashboard/components/stats/StatsRing.module.css
+++ /dev/null
@@ -1,11 +0,0 @@
-.statsRing {
-  background: light-dark(white, var(--mantine-color-dark-7));
-}
-
-.statsRingLabel {
-  color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-gray-5));
-}
-
-.statsRingValue {
-  color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-gray-4));
-}
diff --git a/apps/dashboard/components/stats/StatsRing.tsx b/apps/dashboard/components/stats/StatsRing.tsx
index b40e7e0..651cfe0 100644
--- a/apps/dashboard/components/stats/StatsRing.tsx
+++ b/apps/dashboard/components/stats/StatsRing.tsx
@@ -1,6 +1,4 @@
-import { Box, Flex, Group, Paper, RingProgress, Text } from "@mantine/core";
-
-import classes from "./StatsRing.module.css";
+import { Box, Card, Flex, Group, RingProgress, Text } from "@mantine/core";
 
 interface StatsRingProps {
   title: string;
@@ -16,7 +14,7 @@ interface StatsRingProps {
 
 export function StatsRing({ stat }: { stat: StatsRingProps }) {
   return (
-    <Paper radius="md" p="xs" key={stat.title} shadow="sm" className={classes.statsRing}>
+    <Card radius="md" p="md" key={stat.title} shadow="sm" withBorder>
       <Group align="top">
         <RingProgress
           roundCaps
@@ -33,16 +31,16 @@ export function StatsRing({ stat }: { stat: StatsRingProps }) {
           </Text>
           {stat.stats.map((s) => (
             <Flex gap={"xs"} key={s.label} align={"end"}>
-              <Text fw={700} size="xl" className={classes.statsRingLabel}>
+              <Text fw={700} size="md" c="dimmed">
                 {s.label}:
               </Text>
-              <Text fw={600} size="lg" className={classes.statsRingValue}>
+              <Text fw={600} size="md">
                 {s.value}
               </Text>
             </Flex>
           ))}
         </Box>
       </Group>
-    </Paper>
+    </Card>
   );
 }
diff --git a/apps/dashboard/components/user/table/UserItem.module.css b/apps/dashboard/components/user/table/UserItem.module.css
deleted file mode 100644
index 4a1be3a..0000000
--- a/apps/dashboard/components/user/table/UserItem.module.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.rowSelected {
-  background-color: var(--mantine-color-blue-light);
-}
diff --git a/apps/dashboard/components/user/table/UserItem.tsx b/apps/dashboard/components/user/table/UserItem.tsx
index e05e984..91efc13 100644
--- a/apps/dashboard/components/user/table/UserItem.tsx
+++ b/apps/dashboard/components/user/table/UserItem.tsx
@@ -7,8 +7,6 @@ import { GoogleIcon } from "@/components/icons/google";
 import { actionNotification } from "@/utils/notification";
 import { trpc } from "@/utils/trpc";
 
-import classes from "./UserItem.module.css";
-
 interface UserItemProps {
   selected: boolean;
   selectUser: (userId: string) => void;
@@ -60,7 +58,7 @@ export default function UserItem({
   });
 
   return (
-    <Table.Tr className={cx({ [classes.rowSelected]: selected })} data-cy="user-item" data-cy-id={email}>
+    <Table.Tr bg={selected ? "var(--mantine-color-blue-light)" : undefined} data-cy="user-item" data-cy-id={email}>
       <Table.Td>
         <Checkbox
           checked={selected}
diff --git a/apps/dashboard/pages/_app.tsx b/apps/dashboard/pages/_app.tsx
index 9d52ac0..6c93a94 100644
--- a/apps/dashboard/pages/_app.tsx
+++ b/apps/dashboard/pages/_app.tsx
@@ -15,7 +15,7 @@ const App = ({ Component, pageProps }: AppProps) => {
   return (
     <>
       <SessionProvider session={pageProps.session}>
-        <MantineProvider theme={theme}>
+        <MantineProvider>
           <Notifications />
           <Component {...pageProps} />
         </MantineProvider>
diff --git a/apps/dashboard/pages/index.tsx b/apps/dashboard/pages/index.tsx
index 2857214..a9ee186 100644
--- a/apps/dashboard/pages/index.tsx
+++ b/apps/dashboard/pages/index.tsx
@@ -1,6 +1,7 @@
 import { AreaChart, DonutChart } from "@mantine/charts";
-import { Flex, Paper, SimpleGrid } from "@mantine/core";
+import { Card, Center, Flex, Group, Paper, SimpleGrid, Stack, Text, ThemeIcon, Title } from "@mantine/core";
 import { ISetting } from "@pm2.web/typings";
+import { IconActivity, IconClockHour4, IconCpu, IconDeviceSdCard, IconServer } from "@tabler/icons-react";
 import ms from "ms";
 import { InferGetServerSidePropsType } from "next";
 import Head from "next/head";
@@ -10,19 +11,20 @@ import DashboardLog from "@/components/dashboard/DashboardLog";
 import { Dashboard } from "@/components/layouts/Dashboard";
 import { StatsRing } from "@/components/stats/StatsRing";
 import { getServerSideHelpers } from "@/server/helpers";
-import classes from "@/styles/index.module.css";
 import { formatBytes } from "@/utils/format";
 import { trpc } from "@/utils/trpc";
 
 const statChartProps = {
-  h: "120px",
+  h: "300px",
   withLegend: true,
   withGradient: true,
   withDots: false,
-  withXAxis: false,
+  withXAxis: true,
+  withYAxis: true,
   yAxisProps: { width: 55 },
   areaChartProps: { syncId: "stats" },
   connectNulls: true,
+  curveType: "monotone" as any,
 };
 
 function Home({ settings }: { settings: ISetting }) {
@@ -45,23 +47,119 @@ function Home({ settings }: { settings: ISetting }) {
   const offlineCount = selectedProcesses.filter((p) => p.status == "offline").length;
 
   return (
-    <Flex direction={"column"} rowGap={"md"} flex={1}>
-      <SimpleGrid cols={{ base: 1, sm: 4 }}>
-        <Paper className={classes.chartBg} p={"xs"}>
+    <Stack gap="xl" flex={1}>
+      <Group justify="space-between" align="center">
+        <Title order={2}>System Overview</Title>
+      </Group>
+
+      <SimpleGrid cols={{ base: 1, sm: 2, lg: 4 }} spacing="lg">
+        <Paper p="xl" radius="md" shadow="sm">
+          <Group justify="space-between" align="flex-start" wrap="nowrap">
+            <div>
+              <Text c="dimmed" tt="uppercase" fw={700} size="xs">
+                Total Servers
+              </Text>
+              <Text fw={900} size="2.5rem">
+                {selectedServers.length}
+              </Text>
+            </div>
+            <ThemeIcon color="cyan" variant="light" size={48} radius="md">
+              <IconServer size="1.8rem" />
+            </ThemeIcon>
+          </Group>
+        </Paper>
+
+        <Paper p="xl" radius="md" shadow="sm">
+          <Group justify="space-between" align="flex-start" wrap="nowrap">
+            <div>
+              <Text c="dimmed" tt="uppercase" fw={700} size="xs">
+                Online Processes
+              </Text>
+              <Group align="flex-end" gap="xs" wrap="nowrap">
+                <Text fw={900} size="2.5rem">
+                  {onlineCount}
+                </Text>
+                <Text c="dimmed" pb="sm">
+                  / {selectedProcesses.length}
+                </Text>
+              </Group>
+            </div>
+            <ThemeIcon
+              color={onlineCount === selectedProcesses.length && onlineCount > 0 ? "teal" : "cyan"}
+              variant="light"
+              size={48}
+              radius="md"
+            >
+              <IconActivity size="1.8rem" />
+            </ThemeIcon>
+          </Group>
+        </Paper>
+
+        <Paper p="xl" radius="md" shadow="sm">
+          <Group justify="space-between" align="flex-start" wrap="nowrap">
+            <div>
+              <Text c="dimmed" tt="uppercase" fw={700} size="xs">
+                Server Uptime
+              </Text>
+              <Text fw={900} size="2.5rem" style={{ whiteSpace: "nowrap" }}>
+                {ms(data?.serverUptime || 0)}
+              </Text>
+            </div>
+            <ThemeIcon color="violet" variant="light" size={48} radius="md">
+              <IconClockHour4 size="1.8rem" />
+            </ThemeIcon>
+          </Group>
+        </Paper>
+
+        <Paper p="xl" radius="md" shadow="sm">
+          <Group justify="space-between" align="flex-start" wrap="nowrap">
+            <div>
+              <Text c="dimmed" tt="uppercase" fw={700} size="xs">
+                Process Uptime
+              </Text>
+              <Text fw={900} size="2.5rem" style={{ whiteSpace: "nowrap" }}>
+                {ms(data?.processUptime || 0)}
+              </Text>
+            </div>
+            <ThemeIcon color="grape" variant="light" size={48} radius="md">
+              <IconActivity size="1.8rem" />
+            </ThemeIcon>
+          </Group>
+        </Paper>
+      </SimpleGrid>
+
+      <SimpleGrid cols={{ base: 1, xl: 2 }} spacing="lg">
+        <Paper p="xl" shadow="sm" radius="md">
+          <Group justify="space-between" mb="lg">
+            <Text fw={700} size="lg">
+              CPU Usage
+            </Text>
+            <ThemeIcon color="blue" variant="light" size="lg" radius="xl">
+              <IconCpu size="1.2rem" />
+            </ThemeIcon>
+          </Group>
           <AreaChart
             {...statChartProps}
             data={chartData}
             dataKey="date"
             type="default"
-            valueFormatter={(value) => value.toFixed(1)}
-            unit="%"
+            valueFormatter={(value) => value.toFixed(1) + "%"}
             series={[
-              { name: "processCpu", color: "blue", label: "Process CPU" },
-              { name: "serverCpu", color: "grape", label: "Server CPU" },
+              { name: "processCpu", color: "cyan.6", label: "Process CPU" },
+              { name: "serverCpu", color: "violet.6", label: "Server CPU" },
             ]}
           />
         </Paper>
-        <Paper className={classes.chartBg} p={"xs"}>
+
+        <Paper p="xl" shadow="sm" radius="md">
+          <Group justify="space-between" mb="lg">
+            <Text fw={700} size="lg">
+              Memory Allocation
+            </Text>
+            <ThemeIcon color="indigo" variant="light" size="lg" radius="xl">
+              <IconDeviceSdCard size="1.2rem" />
+            </ThemeIcon>
+          </Group>
           <AreaChart
             {...statChartProps}
             data={chartData}
@@ -69,52 +167,20 @@ function Home({ settings }: { settings: ISetting }) {
             type="default"
             valueFormatter={(value) => formatBytes(value)}
             series={[
-              { name: "processRam", color: "indigo", label: "Process RAM" },
-              { name: "serverRam", color: "yellow", label: "Server RAM" },
+              { name: "processRam", color: "teal.6", label: "Process RAM" },
+              { name: "serverRam", color: "indigo.6", label: "Server RAM" },
             ]}
           />
         </Paper>
-        <StatsRing
-          stat={{
-            title: "Uptime",
-            stats: [
-              {
-                label: "Server",
-                value: ms(data?.serverUptime || 0),
-              },
-              {
-                label: "Process",
-                value: ms(data?.processUptime || 0),
-              },
-            ],
-            progress: 80,
-            color: "#8377D1",
-            icon: "up",
-          }}
-        />
-        <Paper className={classes.chartBg} p={"md"}>
-          <Flex justify={"center"}>
-            <DonutChart
-              classNames={{
-                label: classes.statusLabel,
-              }}
-              size={220}
-              thickness={30}
-              style={{ marginBottom: -120 }}
-              data={[
-                { name: "Online", value: onlineCount, color: "teal.5" },
-                { name: "Stopped", value: stoppedCount, color: "yellow.5" },
-                { name: "Offline", value: offlineCount, color: "red.6" },
-              ]}
-              chartLabel={"STATUS"}
-              startAngle={180}
-              endAngle={0}
-            />
-          </Flex>
-        </Paper>
       </SimpleGrid>
-      <DashboardLog refetchInterval={settings.polling.frontend} processIds={selectedProcesses.map((p) => p._id)} />
-    </Flex>
+
+      <Paper p="xl" shadow="sm" radius="md">
+        <Text fw={700} size="lg" mb="md">
+          Process Activity Logs
+        </Text>
+        <DashboardLog refetchInterval={settings.polling.frontend} processIds={selectedProcesses.map((p) => p._id)} />
+      </Paper>
+    </Stack>
   );
 }
 
diff --git a/apps/dashboard/pages/settings.tsx b/apps/dashboard/pages/settings.tsx
index c9654a8..77be24b 100644
--- a/apps/dashboard/pages/settings.tsx
+++ b/apps/dashboard/pages/settings.tsx
@@ -1,4 +1,4 @@
-import { Accordion, Badge, Grid, Overlay, Paper, ScrollArea, Title } from "@mantine/core";
+import { Accordion, Badge, Card, Grid, Overlay, ScrollArea, Title } from "@mantine/core";
 import { InferGetServerSidePropsType } from "next";
 import Head from "next/head";
 import { useSession } from "next-auth/react";
@@ -33,16 +33,9 @@ export default function Settings({}: InferGetServerSidePropsType<typeof getServe
       </Head>
 
       <Dashboard>
-        <Grid
-          flex={1}
-          styles={{
-            root: {
-              display: "flex",
-            },
-          }}
-        >
-          <Grid.Col span={{ lg: 8, md: 7, sm: 6, xs: 12 }}>
-            <Paper shadow="sm" radius="md" p={"md"} mih={"100%"} h={"100%"}>
+        <Grid flex={1}>
+          <Grid.Col span={{ base: 12, md: 7, lg: 8 }}>
+            <Card shadow="sm" radius="md" p="md" mih="100%" h="100%" withBorder>
               <Title order={3} style={{ marginBottom: "1rem" }}>
                 Configuration
               </Title>
@@ -59,10 +52,10 @@ export default function Settings({}: InferGetServerSidePropsType<typeof getServe
                   </Overlay>
                 )}
               </ScrollArea>
-            </Paper>
+            </Card>
           </Grid.Col>
-          <Grid.Col span={{ lg: 4, md: 5, sm: 6, xs: 12 }}>
-            <Paper shadow="sm" radius="md" p={"md"} style={{ height: "100%" }}>
+          <Grid.Col span={{ base: 12, md: 5, lg: 4 }}>
+            <Card shadow="sm" radius="md" p="md" h="100%" withBorder>
               <Title order={3} style={{ marginBottom: "1rem" }}>
                 User Settings
               </Title>
@@ -71,7 +64,7 @@ export default function Settings({}: InferGetServerSidePropsType<typeof getServe
                 <DeleteAccount />
                 {isOAuth2 && <UnlinkOAuth2 />}
               </Accordion>
-            </Paper>
+            </Card>
           </Grid.Col>
         </Grid>
       </Dashboard>
diff --git a/apps/dashboard/pages/user.tsx b/apps/dashboard/pages/user.tsx
index 84c87bd..0ede34c 100644
--- a/apps/dashboard/pages/user.tsx
+++ b/apps/dashboard/pages/user.tsx
@@ -3,11 +3,11 @@ import {
   Badge,
   Box,
   Button,
+  Card,
   Divider,
   Flex,
   Grid,
   Overlay,
-  Paper,
   rem,
   ScrollArea,
   Title,
@@ -28,8 +28,6 @@ import { actionNotification } from "@/utils/notification";
 import { IPermissionConstants, Permission, PERMISSIONS } from "@/utils/permission";
 import { trpc } from "@/utils/trpc";
 
-import classes from "../styles/user.module.css";
-
 export default function User({}: InferGetServerSidePropsType<typeof getServerSideProps>) {
   const dashboardQuery = trpc.server.getDashBoardData.useQuery(true);
   const usersQuery = trpc.user.getUsers.useQuery();
@@ -138,14 +136,7 @@ export default function User({}: InferGetServerSidePropsType<typeof getServerSid
         <link rel="icon" type="image/png" href="/logo.png" />
       </Head>
       <Dashboard>
-        <Grid
-          flex={1}
-          styles={{
-            root: {
-              display: "flex",
-            },
-          }}
-        >
+        <Grid flex={1}>
           <UserManagement
             refreshUsers={usersQuery.refetch}
             users={users}
@@ -153,33 +144,17 @@ export default function User({}: InferGetServerSidePropsType<typeof getServerSid
             setSelection={setSelection}
           />
           <Grid.Col span={{ lg: 6, md: 12 }}>
-            <Paper shadow="sm" radius="md" style={{ height: "100%" }} p={"lg"} px={"md"} pb={"sm"}>
-              <Flex direction={"column"} h="100%">
+            <Card shadow="sm" radius="md" style={{ height: "100%" }} p="lg" withBorder>
+              <Flex direction="column" h="100%">
                 <Title order={4} style={{ marginBottom: "1rem" }}>
                   Custom Permissions
                 </Title>
-                <Flex direction={"column"} justify={"space-between"} h="100%">
-                  <ScrollArea h={490}>
-                    <Accordion
-                      chevronPosition="left"
-                      classNames={{
-                        content: classes.content,
-                      }}
-                    >
+                <Flex direction="column" h="100%">
+                  <ScrollArea flex={1} mb="md">
+                    <Accordion chevronPosition="left">
                       {servers.map((item) => (
                         <Accordion.Item value={item._id} key={item._id}>
-                          <Flex
-                            align={"center"}
-                            direction={"row"}
-                            justify={{
-                              base: "start",
-                              sm: "space-between",
-                            }}
-                            wrap={{
-                              base: "wrap",
-                              sm: "nowrap",
-                            }}
-                          >
+                          <Flex align="center" justify="space-between" wrap="wrap" gap="sm">
                             <Accordion.Control>
                               <Flex align={"center"} direction={"row"} gap={rem(4)}>
                                 <IconCircleFilled
@@ -196,10 +171,6 @@ export default function User({}: InferGetServerSidePropsType<typeof getServerSid
                               </Flex>
                             </Accordion.Control>
                             <CustomMultiSelect
-                              classNames={{
-                                pill: classes.value,
-                                pillsList: classes.values,
-                              }}
                               value={getSelectedPerms(item._id)}
                               onChange={(values) => updatePermsState(item._id, "", values)}
                               data={permissionData}
@@ -222,15 +193,7 @@ export default function User({}: InferGetServerSidePropsType<typeof getServerSid
                             {item.processes?.map((process) => (
                               <div key={process._id}>
                                 <Box py={"xs"}>
-                                  <Flex
-                                    align={"center"}
-                                    direction={"row"}
-                                    justify={"space-between"}
-                                    wrap={{
-                                      base: "wrap",
-                                      sm: "nowrap",
-                                    }}
-                                  >
+                                  <Flex align="center" justify="space-between" wrap="wrap" gap="sm">
                                     <Flex align={"center"} direction={"row"} gap={rem(4)}>
                                       <IconCircleFilled
                                         size={10}
@@ -247,10 +210,6 @@ export default function User({}: InferGetServerSidePropsType<typeof getServerSid
                                       {process.name}
                                     </Flex>
                                     <CustomMultiSelect
-                                      classNames={{
-                                        pill: classes.value,
-                                        pillsList: classes.values,
-                                      }}
                                       value={getSelectedPerms(item._id, process._id)}
                                       data={permissionData}
                                       itemComponent={SelectItemComponent}
@@ -281,7 +240,7 @@ export default function User({}: InferGetServerSidePropsType<typeof getServerSid
                       )}
                     </Transition>
                   </ScrollArea>
-                  <Flex justify={"flex-end"} direction={"row"}>
+                  <Flex justify="flex-end" mt="auto">
                     <Button
                       variant="light"
                       color="teal"
@@ -302,7 +261,7 @@ export default function User({}: InferGetServerSidePropsType<typeof getServerSid
                   </Flex>
                 </Flex>
               </Flex>
-            </Paper>
+            </Card>
           </Grid.Col>
         </Grid>
       </Dashboard>
diff --git a/apps/dashboard/styles/index.module.css b/apps/dashboard/styles/index.module.css
deleted file mode 100644
index f1a7d8f..0000000
--- a/apps/dashboard/styles/index.module.css
+++ /dev/null
@@ -1,9 +0,0 @@
-.chartBg {
-  background: light-dark(white, var(--mantine-color-dark-7));
-}
-
-.statusLabel {
-  font-size: var(--mantine-h3-font-size);
-  font-weight: var(--mantine-h1-font-weight);
-  transform: translateY(-1em);
-}
diff --git a/apps/dashboard/styles/process.module.css b/apps/dashboard/styles/process.module.css
deleted file mode 100644
index 5965048..0000000
--- a/apps/dashboard/styles/process.module.css
+++ /dev/null
@@ -1,51 +0,0 @@
-.processItem {
-  background: light-dark(white, var(--mantine-color-dark-7));
-  transition: 0.5s ease-out max-height;
-}
-
-.processItem.opened {
-  max-height: 400px;
-  @media (max-width: $mantine-breakpoint-xs) {
-    max-height: 440px;
-  }
-}
-
-.processItem.closed {
-  max-height: 55px;
-
-  @media (max-width: $mantine-breakpoint-sm) {
-    max-height: 90px;
-  }
-
-  @media (max-width: $mantine-breakpoint-xs) {
-    max-height: 120px;
-  }
-}
-
-.processLog {
-  background: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-8));
-}
-
-.processMetric {
-  background: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-8));
-}
-
-.colorSchemeDark {
-  @mixin dark {
-    display: none;
-  }
-
-  @mixin light {
-    display: block;
-  }
-}
-
-.colorSchemeLight {
-  @mixin light {
-    display: none;
-  }
-
-  @mixin dark {
-    display: block;
-  }
-}
diff --git a/apps/dashboard/styles/user.module.css b/apps/dashboard/styles/user.module.css
deleted file mode 100644
index 218fe30..0000000
--- a/apps/dashboard/styles/user.module.css
+++ /dev/null
@@ -1,21 +0,0 @@
-.value {
-  margin-left: rem(1);
-  margin-right: rem(1);
-}
-
-.values {
-  max-width: rem(20-0);
-  flex-wrap: nowrap;
-  overflow-x: auto;
-  scrollbar-width: thin;
-  overflow-y: hidden;
-}
-
-.content {
-  padding: 0;
-  padding-left: rem(60);
-
-  @media (max-width: $mantine-breakpoint-xs) {
-    padding-left: rem(10);
-  }
-}
