diff --git a/LibraryTrackingApp/src/frontend/components/ThemeSwitcher.jsx b/LibraryTrackingApp/src/frontend/components/ThemeSwitcher.jsx
index 26a370d..a27ce7d 100644
--- a/LibraryTrackingApp/src/frontend/components/ThemeSwitcher.jsx
+++ b/LibraryTrackingApp/src/frontend/components/ThemeSwitcher.jsx
@@ -42,12 +42,11 @@ function ThemeSwitcher() {
     <>
       <IconButton
         id={"theme-switcher"}
-        aria-label="Color Switcher"  
-         variant={"ghost"}
+        aria-label="Color Switcher"
+        variant={"ghost"}
         onClick={handleToggleColorMode}
         icon={<Icon as={icon === darkIcon ? BsMoon : BsSun} fontSize="lg" />}
         p={3}
-     
       />
     </>
   );
diff --git a/LibraryTrackingApp/src/frontend/constants/appSidebarItems.jsx b/LibraryTrackingApp/src/frontend/constants/appSidebarItems.jsx
index 67b83b7..d50cefa 100644
--- a/LibraryTrackingApp/src/frontend/constants/appSidebarItems.jsx
+++ b/LibraryTrackingApp/src/frontend/constants/appSidebarItems.jsx
@@ -1,9 +1,4 @@
-import {
-  FiHome,
-  FiSettings,
-  FiLogOut,
-  FiBook,
-} from "react-icons/fi";
+import { FiHome, FiSettings, FiLogOut, FiBook } from "react-icons/fi";
 import {
   BsArrowLeftRight,
   BsBook,
@@ -265,42 +260,3 @@ export const sidebarItems = [
     target: "_self",
   },
 ];
-
-export const items = [
-  {
-    title: "Kütüphane",
-    description: "Kütüphane bilgilerini düzenleyin, yeni kütüphaneler ekleyin.",
-    link: "/app/library",
-  },
-  {
-    title: "Üyeler",
-    description: "Üyeleri yönetin, yeni üyeler ekleyin.",
-    link: "/app/member",
-  },
-  {
-    title: "Kitaplar",
-    description: "Kitapları düzenleyin, yeni kitaplar ekleyin.",
-    link: "/app/book",
-  },
-  {
-    title: "Personel",
-    description: "Personel bilgilerini yönetin, yeni personel ekleyin.",
-    link: "/app/staff",
-  },
-  {
-    title: "Ödünç Verme",
-    description: "Kitap ödünç verme işlemlerini yönetin.",
-    link: "/app/borrow",
-  },
-  {
-    title: "Kitap Türleri",
-    description: "Kitap türlerini düzenleyin, yeni türler ekleyin.",
-    link: "/app/genre",
-  },
-  {
-    title: "Kitap Etiketleri",
-    description:
-      "Arama terimlerini yönetin, popüler arama terimlerini görüntüleyin ve düzenleyin.",
-    link: "/app/book-tag",
-  },
-];
diff --git a/LibraryTrackingApp/src/frontend/layouts/Admin/components/Navbar/index.jsx b/LibraryTrackingApp/src/frontend/layouts/Admin/components/Navbar/index.jsx
index 8cdec15..6891113 100644
--- a/LibraryTrackingApp/src/frontend/layouts/Admin/components/Navbar/index.jsx
+++ b/LibraryTrackingApp/src/frontend/layouts/Admin/components/Navbar/index.jsx
@@ -54,16 +54,15 @@ const Navbar = ({ isOpen, onMenuToggle }) => {
 
   return (
     <Flex
-      py="2"
-      boxShadow="sm"
-      border="0 solid #e5e7eb"
-      position="fixed"
-      top="0"
-      bg={useColorModeValue("gray.100", "gray.700")}
-      width="100%"
-      transition="0.3s ease-in-out"
-      justifyContent={"space-between"}
-      p={2}
+    boxShadow="sm"
+    border="0 solid #e5e7eb"
+    bg={useColorModeValue("gray.100", "gray.700")}
+    justifyContent={"space-between"}
+    p={2}
+    zIndex={15}
+    width={isOpen ? "calc(100% - 275px)" : "100%"}
+    transform={isOpen ? "translateX(275px)" : "translateX(0)"}
+     transition="0.3s ease-in"
     >
       <HStack spacing={3}>
         <Icon
diff --git a/LibraryTrackingApp/src/frontend/layouts/Admin/layout.jsx b/LibraryTrackingApp/src/frontend/layouts/Admin/layout.jsx
index 442c05d..93369b4 100644
--- a/LibraryTrackingApp/src/frontend/layouts/Admin/layout.jsx
+++ b/LibraryTrackingApp/src/frontend/layouts/Admin/layout.jsx
@@ -31,7 +31,6 @@ function Layout({ children }) {
           ml={isSidebarOpen ? "300px" : "0px"}
           mt={isSidebarOpen ? "20" : "20"}
           transition="margin-left 0.5s ease-in-out"
-          p={6}
         >
           {children}
         </Box>
diff --git a/LibraryTrackingApp/src/frontend/layouts/Anon/components/HeroSection.jsx b/LibraryTrackingApp/src/frontend/layouts/Anon/components/HeroSection.jsx
index 9aedeba..4cb63da 100644
--- a/LibraryTrackingApp/src/frontend/layouts/Anon/components/HeroSection.jsx
+++ b/LibraryTrackingApp/src/frontend/layouts/Anon/components/HeroSection.jsx
@@ -76,7 +76,7 @@ const HeroSection = () => {
                     maxH="52px"
                     w="max-content"
                     color="white"
-                    bgGradient="linear(to-br, #228be6, #15aabf)"
+                    bgGradient="linear(to-br, teal.500, teal.300)"
                     rounded="md"
                   >
                     {feature.icon}
@@ -108,9 +108,9 @@ const HeroSection = () => {
                 <chakra.button
                   h={12}
                   px={6}
-                  bgGradient="linear(to-br, #228be6, #15aabf)"
+                  bgGradient="linear(to-br, teal.500, teal.300)"
                   color="white"
-                  _hover={{ bgGradient: "linear(to-br, #228be6, #228be6)" }}
+                  _hover={{ bgGradient: "linear(to-br, teal.500, teal.400)" }}
                   variant="solid"
                   size="lg"
                   rounded="md"
diff --git a/LibraryTrackingApp/src/frontend/layouts/Anon/components/Navbar.jsx b/LibraryTrackingApp/src/frontend/layouts/Anon/components/Navbar.jsx
index 884b676..858f147 100644
--- a/LibraryTrackingApp/src/frontend/layouts/Anon/components/Navbar.jsx
+++ b/LibraryTrackingApp/src/frontend/layouts/Anon/components/Navbar.jsx
@@ -57,13 +57,23 @@ export default function Navbar() {
           <ThemeSwitcher />
 
           <Link href="/register" passHref target="_blank">
-            <Button colorScheme="white" variant="outline">
+            <Button colorScheme="white" variant="outline"
+             px={6}
+
+            >
               Kayıt Ol
             </Button>
           </Link>
 
           <Link href="/login" passHref target="_blank">
-            <Button colorScheme="teal">Giriş Yap</Button>
+            <Button
+              bgGradient="linear(to-br, teal.500, teal.300)"
+              color="white"
+              _hover={{ bgGradient: "linear(to-br, teal.500, teal.400)" }}
+              px={6}
+            >
+              Giriş Yap
+            </Button>
           </Link>
         </Flex>
 
diff --git a/LibraryTrackingApp/src/frontend/layouts/App/components/Navbar/index.jsx b/LibraryTrackingApp/src/frontend/layouts/App/components/Navbar/index.jsx
index 2e094f4..2eabcaa 100644
--- a/LibraryTrackingApp/src/frontend/layouts/App/components/Navbar/index.jsx
+++ b/LibraryTrackingApp/src/frontend/layouts/App/components/Navbar/index.jsx
@@ -20,6 +20,7 @@ import LanguageSwitcher from "../../../../components/LanguageSwitcher";
 
 import { FiMinimize, FiMaximize } from "react-icons/fi";
 import { HiMenuAlt2 } from "react-icons/hi";
+import { CloseIcon } from "@chakra-ui/icons";
 
 const Navbar = ({ isOpen, onMenuToggle }) => {
   const [isMaximized, setIsMaximized] = useState(false);
@@ -54,30 +55,40 @@ const Navbar = ({ isOpen, onMenuToggle }) => {
 
   return (
     <Flex
-      py="2"
       boxShadow="sm"
       border="0 solid #e5e7eb"
-      position="fixed"
-      top="0"
       bg={useColorModeValue("gray.100", "gray.700")}
-      width="100%"
-      transition="0.3s ease-in-out"
       justifyContent={"space-between"}
       p={2}
+      zIndex={15}
+      width={isOpen ? "calc(100% - 275px)" : "100%"}
+      transform={isOpen ? "translateX(275px)" : "translateX(0)"}
+      transition="0.3s ease-in"
+
     >
       <HStack spacing={3}>
-        <Icon
-          cursor={"pointer"}
-          as={HiMenuAlt2}
-          boxSize={18}
-          onClick={onMenuToggle}
-        />
+        {isOpen ? (
+          <CloseIcon
+            boxSize={4}
+            cursor={"pointer"}
+            onClick={onMenuToggle}
+            _hover={{ color: "red" }}
+          />
+        ) : (
+          <Icon
+            cursor={"pointer"}
+            as={HiMenuAlt2}
+            boxSize={18}
+            onClick={onMenuToggle}
+          />
+        )}
       </HStack>
-
-      <NavItem
-        isMaximized={isMaximized}
-        handleMaximizeToggle={handleMaximizeToggle}
-      />
+      <Box >
+        <NavItem
+          isMaximized={isMaximized}
+          handleMaximizeToggle={handleMaximizeToggle}
+        />
+      </Box>
     </Flex>
   );
 };
diff --git a/LibraryTrackingApp/src/frontend/layouts/App/components/Sidebar/index.jsx b/LibraryTrackingApp/src/frontend/layouts/App/components/Sidebar/index.jsx
index c22fa7b..6c82666 100644
--- a/LibraryTrackingApp/src/frontend/layouts/App/components/Sidebar/index.jsx
+++ b/LibraryTrackingApp/src/frontend/layouts/App/components/Sidebar/index.jsx
@@ -17,7 +17,7 @@ import { useRouter } from "next/router";
 import { sidebarItems } from "@/constants/appSidebarItems";
 import { useState } from "react";
 
-function Sidebar({ isOpen, toggleSidebar }) {
+function Sidebar({ isOpen }) {
   const router = useRouter();
 
   return (
@@ -33,21 +33,12 @@ function Sidebar({ isOpen, toggleSidebar }) {
       transition="0.3s ease-in-out"
       transform={isOpen ? "translateX(0)" : "translateX(-275px)"}
       boxShadow="md"
-      zIndex="2"
     >
       <Flex alignItems="center" mb="8">
         <Avatar size="sm" name="Admin" />
         <Text ml="3" fontSize="lg" fontWeight="bold" color="white">
           Application Panel
         </Text>
-        <Box ml="auto" onClick={toggleSidebar}>
-          <CloseIcon
-            boxSize={4}
-            color="white"
-            cursor={"pointer"}
-            _hover={{ color: "red" }}
-          />
-        </Box>
       </Flex>
       <VStack spacing="4" align="stretch">
         {sidebarItems.map((item, index) => (
diff --git a/LibraryTrackingApp/src/frontend/layouts/Me/components/Navbar/index.jsx b/LibraryTrackingApp/src/frontend/layouts/Me/components/Navbar/index.jsx
index 27718d6..76b1087 100644
--- a/LibraryTrackingApp/src/frontend/layouts/Me/components/Navbar/index.jsx
+++ b/LibraryTrackingApp/src/frontend/layouts/Me/components/Navbar/index.jsx
@@ -54,16 +54,15 @@ const Navbar = ({ isOpen, onMenuToggle }) => {
 
   return (
     <Flex
-      py="2"
-      boxShadow="sm"
-      border="0 solid #e5e7eb"
-      position="fixed"
-      top="0"
-      bg={useColorModeValue("gray.100", "gray.700")}
-      width="100%"
-      transition="0.3s ease-in-out"
-      justifyContent={"space-between"}
-      p={2}
+    boxShadow="sm"
+    border="0 solid #e5e7eb"
+    bg={useColorModeValue("gray.100", "gray.700")}
+    justifyContent={"space-between"}
+    p={2}
+    zIndex={15}
+    width={isOpen ? "calc(100% - 275px)" : "100%"}
+    transform={isOpen ? "translateX(275px)" : "translateX(0)"}
+     transition="0.3s ease-in"
     >
       <HStack spacing={3}>
         <Icon
diff --git a/LibraryTrackingApp/src/frontend/package-lock.json b/LibraryTrackingApp/src/frontend/package-lock.json
index 74c3d25..fc15f33 100644
--- a/LibraryTrackingApp/src/frontend/package-lock.json
+++ b/LibraryTrackingApp/src/frontend/package-lock.json
@@ -35,6 +35,7 @@
         "react-joyride": "^2.8.1",
         "react-leaflet": "^4.2.1",
         "react-responsive-carousel": "^3.2.23",
+        "recharts": "^2.12.6",
         "redoc": "^2.1.3",
         "tailwindcss": "3.3.3",
         "yup": "^1.4.0"
@@ -1783,6 +1784,60 @@
         "url": "https://github.com/sponsors/tannerlinsley"
       }
     },
+    "node_modules/@types/d3-array": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.1.tgz",
+      "integrity": "sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg=="
+    },
+    "node_modules/@types/d3-color": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
+      "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A=="
+    },
+    "node_modules/@types/d3-ease": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
+      "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA=="
+    },
+    "node_modules/@types/d3-interpolate": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
+      "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
+      "dependencies": {
+        "@types/d3-color": "*"
+      }
+    },
+    "node_modules/@types/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-P2dlU/q51fkOc/Gfl3Ul9kicV7l+ra934qBFXCFhrZMOL6du1TM0pm1ThYvENukyOn5h9v+yMJ9Fn5JK4QozrQ=="
+    },
+    "node_modules/@types/d3-scale": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.8.tgz",
+      "integrity": "sha512-gkK1VVTr5iNiYJ7vWDI+yUFFlszhNMtVeneJ6lUTKPjprsvLLI9/tgEGiXJOnlINJA8FyA88gfnQsHbybVZrYQ==",
+      "dependencies": {
+        "@types/d3-time": "*"
+      }
+    },
+    "node_modules/@types/d3-shape": {
+      "version": "3.1.6",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.6.tgz",
+      "integrity": "sha512-5KKk5aKGu2I+O6SONMYSNflgiP0WfZIQvVUMan50wHsLG1G94JlxEVnCpQARfTtzytuY0p/9PXXZb3I7giofIA==",
+      "dependencies": {
+        "@types/d3-path": "*"
+      }
+    },
+    "node_modules/@types/d3-time": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.3.tgz",
+      "integrity": "sha512-2p6olUZ4w3s+07q3Tm2dbiMZy5pCDfYwtLXXHUnVzXgQlZ/OyPtUz6OL382BkOuGlLXqfT+wqv8Fw2v8/0geBw=="
+    },
+    "node_modules/@types/d3-timer": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
+      "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw=="
+    },
     "node_modules/@types/hoist-non-react-statics": {
       "version": "3.3.5",
       "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz",
@@ -2393,6 +2448,121 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
+    "node_modules/d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-format": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz",
+      "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "dependencies": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+      "dependencies": {
+        "d3-path": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "dependencies": {
+        "d3-array": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time-format": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "dependencies": {
+        "d3-time": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/decimal.js-light": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz",
+      "integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg=="
+    },
     "node_modules/decko": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/decko/-/decko-1.2.0.tgz",
@@ -2434,6 +2604,15 @@
       "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
       "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA=="
     },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/dompurify": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.5.0.tgz",
@@ -2556,6 +2735,14 @@
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
+    "node_modules/fast-equals": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/fast-equals/-/fast-equals-5.0.1.tgz",
+      "integrity": "sha512-WF1Wi8PwwSY7/6Kx0vKXtw8RwuSGoM1bvDaJbu7MxDlR1vovZjIAKrnzyrThgAjm6JDTu0fVgWXDlMGspodfoQ==",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/fast-glob": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
@@ -2940,6 +3127,14 @@
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
     },
+    "node_modules/internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/invariant": {
       "version": "2.2.4",
       "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
@@ -4150,6 +4345,20 @@
         "react-easy-swipe": "^0.0.21"
       }
     },
+    "node_modules/react-smooth": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-4.0.1.tgz",
+      "integrity": "sha512-OE4hm7XqR0jNOq3Qmk9mFLyd6p2+j6bvbPJ7qlB7+oo0eNcL2l7WQzG6MBnT3EXY6xzkLMUBec3AfewJdA0J8w==",
+      "dependencies": {
+        "fast-equals": "^5.0.1",
+        "prop-types": "^15.8.1",
+        "react-transition-group": "^4.4.5"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-style-singleton": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",
@@ -4184,6 +4393,21 @@
         "react": "^16.8.0 || ^17.0.0-0 || ^18.0.0"
       }
     },
+    "node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -4203,6 +4427,44 @@
         "node": ">=8.10.0"
       }
     },
+    "node_modules/recharts": {
+      "version": "2.12.6",
+      "resolved": "https://registry.npmjs.org/recharts/-/recharts-2.12.6.tgz",
+      "integrity": "sha512-D+7j9WI+D0NHauah3fKHuNNcRK8bOypPW7os1DERinogGBGaHI7i6tQKJ0aUF3JXyBZ63dyfKIW2WTOPJDxJ8w==",
+      "dependencies": {
+        "clsx": "^2.0.0",
+        "eventemitter3": "^4.0.1",
+        "lodash": "^4.17.21",
+        "react-is": "^16.10.2",
+        "react-smooth": "^4.0.0",
+        "recharts-scale": "^0.4.4",
+        "tiny-invariant": "^1.3.1",
+        "victory-vendor": "^36.6.8"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/recharts-scale": {
+      "version": "0.4.5",
+      "resolved": "https://registry.npmjs.org/recharts-scale/-/recharts-scale-0.4.5.tgz",
+      "integrity": "sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==",
+      "dependencies": {
+        "decimal.js-light": "^2.4.1"
+      }
+    },
+    "node_modules/recharts/node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/redoc": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/redoc/-/redoc-2.1.3.tgz",
@@ -4853,6 +5115,27 @@
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
     },
+    "node_modules/victory-vendor": {
+      "version": "36.9.2",
+      "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-36.9.2.tgz",
+      "integrity": "sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ==",
+      "dependencies": {
+        "@types/d3-array": "^3.0.3",
+        "@types/d3-ease": "^3.0.0",
+        "@types/d3-interpolate": "^3.0.1",
+        "@types/d3-scale": "^4.0.2",
+        "@types/d3-shape": "^3.1.0",
+        "@types/d3-time": "^3.0.0",
+        "@types/d3-timer": "^3.0.0",
+        "d3-array": "^3.1.6",
+        "d3-ease": "^3.0.1",
+        "d3-interpolate": "^3.0.1",
+        "d3-scale": "^4.0.2",
+        "d3-shape": "^3.1.0",
+        "d3-time": "^3.0.0",
+        "d3-timer": "^3.0.1"
+      }
+    },
     "node_modules/void-elements": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
diff --git a/LibraryTrackingApp/src/frontend/package.json b/LibraryTrackingApp/src/frontend/package.json
index 9fa326a..bea0c0e 100644
--- a/LibraryTrackingApp/src/frontend/package.json
+++ b/LibraryTrackingApp/src/frontend/package.json
@@ -36,6 +36,7 @@
     "react-joyride": "^2.8.1",
     "react-leaflet": "^4.2.1",
     "react-responsive-carousel": "^3.2.23",
+    "recharts": "^2.12.6",
     "redoc": "^2.1.3",
     "tailwindcss": "3.3.3",
     "yup": "^1.4.0"
diff --git a/LibraryTrackingApp/src/frontend/pages/admin/index.jsx b/LibraryTrackingApp/src/frontend/pages/admin/index.jsx
index ec2818b..3b5ad9b 100644
--- a/LibraryTrackingApp/src/frontend/pages/admin/index.jsx
+++ b/LibraryTrackingApp/src/frontend/pages/admin/index.jsx
@@ -1,15 +1,9 @@
 import StatData from "@/layouts/Admin/components/Stats";
-import { Box, Flex, Heading, VStack, Text, Badge, HStack } from "@chakra-ui/react";
-import { FiUsers, FiBook, FiMapPin, FiClock } from "react-icons/fi";
+import { Box } from "@chakra-ui/react";
 
 const AdminIndexPage = () => {
-  const todayActivities = {
-    newUsers: 5,
-    newBooks: 10,
-    newLibraries: 2,
-    newLocations: 3,
-    newWorkingHours: 15,
-  };
+ 
+  
 
   return (
     <Box p="6">
diff --git a/LibraryTrackingApp/src/frontend/pages/app/index.jsx b/LibraryTrackingApp/src/frontend/pages/app/index.jsx
index bc6d6e5..12b0568 100644
--- a/LibraryTrackingApp/src/frontend/pages/app/index.jsx
+++ b/LibraryTrackingApp/src/frontend/pages/app/index.jsx
@@ -1,51 +1,374 @@
-import { items } from "@/constants/appSidebarItems";
 import {
+  Box,
   Flex,
   Heading,
-  Grid,
-  GridItem,
   Text,
-  Box,
-  Link as ChakraLink,
+  SimpleGrid,
+  VStack,
+  Stat,
+  StatLabel,
+  StatNumber,
+  CircularProgress,
+  CircularProgressLabel,
+  useStatStyles,
 } from "@chakra-ui/react";
-import Link from "next/link";
+import { useEffect, useState } from "react";
+import {
+  LineChart,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+  BarChart,
+  Bar,
+} from "recharts";
+
+// Örnek veri
+const upcomingEvents = [
+  { title: "Kitap Kulübü Toplantısı", date: "24 Mayıs 2024" },
+  { title: "Yazar Söyleşisi", date: "28 Mayıs 2024" },
+  { title: "Okuma Maratonu", date: "2 Haziran 2024" },
+];
+
+const popularBooks = [
+  { title: "Yabancı", author: "Albert Camus", borrowed: 42 },
+  { title: "Suç ve Ceza", author: "Fyodor Dostoevsky", borrowed: 35 },
+  { title: "1984", author: "George Orwell", borrowed: 30 },
+  { title: "Küçük Prens", author: "Antoine de Saint-Exupéry", borrowed: 28 },
+];
+
+const stockData = [
+  { name: "Romanlar", value: 450 },
+  { name: "Polisiye", value: 320 },
+  { name: "Bilim Kurgu", value: 280 },
+  { name: "Klasikler", value: 210 },
+];
+
+const dailyStats = {
+  newMembers: 15,
+  newBooks: 25,
+  returnedBooks: 10,
+};
+
+// Örnek veri kümesi 1
+const monthlyData = [
+  { month: "Ocak", newMembers: 200, newBooks: 300 },
+  { month: "Şubat", newMembers: 150, newBooks: 250 },
+  { month: "Mart", newMembers: 250, newBooks: 350 },
+  { month: "Nisan", newMembers: 180, newBooks: 280 },
+  { month: "Mayıs", newMembers: 220, newBooks: 320 },
+  { month: "Haziran", newMembers: 190, newBooks: 270 },
+];
+
+// Örnek veri kümesi 2
+const weeklyData = [
+  { week: "Hafta 1", newMembers: 30, newBooks: 40 },
+  { week: "Hafta 2", newMembers: 35, newBooks: 45 },
+  { week: "Hafta 3", newMembers: 28, newBooks: 38 },
+  { week: "Hafta 4", newMembers: 32, newBooks: 42 },
+];
+
+// Örnek veri kümesi 3
+const yearlyData = [
+  { year: 2022, newMembers: 1500, newBooks: 2000 },
+  { year: 2023, newMembers: 1800, newBooks: 2300 },
+  { year: 2024, newMembers: 2200, newBooks: 2700 },
+];
+
+const totalBooksData = [
+  { name: "Romanlar", total: 550 },
+  { name: "Polisiye", total: 380 },
+  { name: "Bilim Kurgu", total: 320 },
+  { name: "Klasikler", total: 230 },
+  { name: "Dergiler", total: 180 },
+];
+
+// Kütüphane istatistikleri için örnek veri seti
+const libraryStatsData = [
+  { name: 'Romanlar', total: 550 },
+  { name: 'Polisiye', total: 380 },
+  { name: 'Bilim Kurgu', total: 320 },
+  { name: 'Klasikler', total: 230 },
+  { name: 'Dergiler', total: 180 },
+];
+
+// Kullanıcı istatistikleri için örnek veri seti
+const userStatsData = [
+  { name: 'Pazartesi', newUsers: 20, activeUsers: 15 },
+  { name: 'Salı', newUsers: 15, activeUsers: 10 },
+  { name: 'Çarşamba', newUsers: 25, activeUsers: 20 },
+  { name: 'Perşembe', newUsers: 18, activeUsers: 13 },
+  { name: 'Cuma', newUsers: 22, activeUsers: 18 },
+  { name: 'Cumartesi', newUsers: 27, activeUsers: 22 },
+  { name: 'Pazar', newUsers: 30, activeUsers: 25 },
+];
+
+
+const Dashboard = () => {
+  const [mount, setMount] = useState(false);
+
+  useEffect(() => {
+    setMount(true);
+  }, []);
 
-function AppIndexPage() {
   return (
-    <Flex direction="column" alignItems="center" justifyContent="center">
-      <Heading as="h1" size="2xl" textAlign="center" mb={4}>
-        Hoş Geldiniz!
-      </Heading>
-      <Text fontSize="xl" textAlign="center" mb={8}>
-        Bu, kütüphane yönetim paneline hoş geldiniz. Buradan kütüphane, üye,
-        kitap, personel ve diğer kaynakları yönetebilirsiniz.
-      </Text>
-      <Grid
-        templateColumns={{ base: "repeat(1, 1fr)", md: "repeat(3, 1fr)" }}
-        gap={6}
-      >
-        {items.map((item, index) => (
-          <GridItem key={index}>
-            <Box bg="gray.200" p={8} borderRadius="lg" textAlign="center">
-              <Heading as="h2" size="lg" mb={4}>
-                {item.title}
-              </Heading>
-              <Text fontSize="md">{item.description}</Text>
-              <ChakraLink
-                as={Link}
-                href={item.link}
-                mt={4}
-                color="blue.500"
-                textDecoration="underline"
-              >
-                Detaylar
-              </ChakraLink>
+    <Box p={8}>
+      <Heading mb={8}>Hoş Geldiniz, Yönetici!</Heading>
+
+      {/* Günlük Rapor */}
+      <Box mb={8}>
+        <Heading size="md" mb={4}>
+          Günlük Rapor
+        </Heading>
+        <SimpleGrid columns={{ base: 1, md: 3 }} spacing={4}>
+          <Stat>
+            <StatLabel>Yeni Üyeler</StatLabel>
+            <StatNumber>{dailyStats.newMembers}</StatNumber>
+          </Stat>
+          <Stat>
+            <StatLabel>Yeni Kitaplar</StatLabel>
+            <StatNumber>{dailyStats.newBooks}</StatNumber>
+          </Stat>
+          <Stat>
+            <StatLabel>İade Edilen Kitaplar</StatLabel>
+            <StatNumber>{dailyStats.returnedBooks}</StatNumber>
+          </Stat>
+        </SimpleGrid>
+      </Box>
+
+      {/* Yaklaşan Etkinlikler */}
+      <Box mb={8}>
+        <Heading size="md" mb={4}>
+          Yaklaşan Etkinlikler
+        </Heading>
+        <VStack align="start" spacing={4}>
+          {upcomingEvents.map((event, index) => (
+            <Box key={index} borderWidth="1px" borderRadius="lg" p={4} w="100%">
+              <Text fontWeight="bold">{event.title}</Text>
+              <Text>{event.date}</Text>
+            </Box>
+          ))}
+        </VStack>
+      </Box>
+
+      {/* En Popüler Kitaplar */}
+      <Box mb={8}>
+        <Heading size="md" mb={4}>
+          En Popüler Kitaplar
+        </Heading>
+        <SimpleGrid columns={{ base: 1, md: 2 }} spacing={4}>
+          {popularBooks.map((book, index) => (
+            <Box key={index} borderWidth="1px" borderRadius="lg" p={4}>
+              <Text fontWeight="bold">{book.title}</Text>
+              <Text>{book.author}</Text>
+              <Text>{book.borrowed} kez ödünç alındı</Text>
             </Box>
-          </GridItem>
-        ))}
-      </Grid>
-    </Flex>
+          ))}
+        </SimpleGrid>
+      </Box>
+
+      {/* Stok Durumu ve Kütüphane Dolum Oranı */}
+      <SimpleGrid columns={{ base: 1, md: 2 }} spacing={8} mb={8}>
+        <Box>
+          <Heading size="md" mb={4}>
+            Stok Durumu
+          </Heading>
+          <VStack align="start" spacing={4}>
+            {stockData.map((data, index) => (
+              <Stat
+                key={index}
+                borderWidth="1px"
+                borderRadius="lg"
+                p={4}
+                w="100%"
+              >
+                <StatLabel>{data.name}</StatLabel>
+                <StatNumber>{data.value}</StatNumber>
+              </Stat>
+            ))}
+          </VStack>
+        </Box>
+        <Box>
+          <Heading size="md" mb={4}>
+            Kütüphane Dolum Oranı
+          </Heading>
+          <CircularProgress value={70} size="120px">
+            <CircularProgressLabel>{70}%</CircularProgressLabel>
+          </CircularProgress>
+        </Box>
+      </SimpleGrid>
+
+      {/* Grafik */}
+      <Box>
+        <Heading size="md" mb={4}>
+          Günlük Üye ve Kitap İstatistikleri
+        </Heading>
+        <ResponsiveContainer width="100%" height={300}>
+          <LineChart
+            width={500}
+            height={300}
+            data={[
+              { name: "Pazartesi", newMembers: 20, newBooks: 30 },
+              { name: "Salı", newMembers: 15, newBooks: 25 },
+              { name: "Çarşamba", newMembers: 25, newBooks: 35 },
+              { name: "Perşembe", newMembers: 18, newBooks: 28 },
+              { name: "Cuma", newMembers: 22, newBooks: 32 },
+              { name: "Cumartesi", newMembers: 27, newBooks: 38 },
+              { name: "Pazar", newMembers: 30, newBooks: 40 },
+            ]}
+            margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
+          >
+            <XAxis dataKey="name" />
+            <YAxis />
+            <CartesianGrid strokeDasharray="3 3" />
+            <Tooltip />
+            <Legend />
+            <Line type="monotone" dataKey="newMembers" stroke="#8884d8" />
+            <Line type="monotone" dataKey="newBooks" stroke="#82ca9d" />
+          </LineChart>
+        </ResponsiveContainer>
+      </Box>
+
+      <Flex gap={3} direction={{ base: "column", xl: "row" }}>
+        <MonthlyChart />
+        <WeeklyChart />
+        <YearlyChart />
+      </Flex>
+
+      {mount && (
+        <Flex gap={3} direction={{ base: "column", xl: "row" }}>
+          <UserStatsChart />
+          <LibraryStatsChart />
+          <TotalBooksChart />
+        </Flex>
+      )}
+    </Box>
   );
-}
+};
+
+// Aylık istatistikler için grafik
+const MonthlyChart = () => (
+  <LineChart
+    width={600}
+    height={300}
+    data={monthlyData}
+    margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
+  >
+    <XAxis dataKey="month" />
+    <YAxis />
+    <CartesianGrid strokeDasharray="3 3" />
+    <Tooltip />
+    <Legend />
+    <Line
+      type="monotone"
+      dataKey="newMembers"
+      stroke="#8884d8"
+      activeDot={{ r: 8 }}
+    />
+    <Line type="monotone" dataKey="newBooks" stroke="#82ca9d" />
+  </LineChart>
+);
+
+// Haftalık istatistikler için grafik
+const WeeklyChart = () => (
+  <LineChart
+    width={600}
+    height={300}
+    data={weeklyData}
+    margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
+  >
+    <XAxis dataKey="week" />
+    <YAxis />
+    <CartesianGrid strokeDasharray="3 3" />
+    <Tooltip />
+    <Legend />
+    <Line
+      type="monotone"
+      dataKey="newMembers"
+      stroke="#8884d8"
+      activeDot={{ r: 8 }}
+    />
+    <Line type="monotone" dataKey="newBooks" stroke="#82ca9d" />
+  </LineChart>
+);
+
+// Yıllık istatistikler için grafik
+const YearlyChart = () => (
+  <LineChart
+    width={600}
+    height={300}
+    data={yearlyData}
+    margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
+  >
+    <XAxis dataKey="year" />
+    <YAxis />
+    <CartesianGrid strokeDasharray="3 3" />
+    <Tooltip />
+    <Legend />
+    <Line
+      type="monotone"
+      dataKey="newMembers"
+      stroke="#8884d8"
+      activeDot={{ r: 8 }}
+    />
+    <Line type="monotone" dataKey="newBooks" stroke="#82ca9d" />
+  </LineChart>
+);
+// Toplam eser istatistikleri için grafik
+const TotalBooksChart = () => (
+  <BarChart
+    width={600}
+    height={300}
+    data={totalBooksData}
+    margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
+  >
+    <CartesianGrid strokeDasharray="3 3" />
+    <XAxis dataKey="name" />
+    <YAxis />
+    <Tooltip />
+    <Legend />
+    <Bar dataKey="total" fill="#8884d8" />
+  </BarChart>
+);
+
+// Kütüphane istatistikleri için grafik
+const LibraryStatsChart = () => (
+  <BarChart
+    width={600}
+    height={300}
+    data={libraryStatsData}
+    margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
+  >
+    <CartesianGrid strokeDasharray="3 3" />
+    <XAxis dataKey="name" />
+    <YAxis />
+    <Tooltip />
+    <Legend />
+    <Bar dataKey="total" fill="#82ca9d" />
+  </BarChart>
+);
+
+// Kullanıcı İstatistikleri için grafik
+const UserStatsChart = () => (
+  <ResponsiveContainer width="100%" height={300}>
+  <BarChart
+    width={500}
+    height={300}
+    data={userStatsData}
+    margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
+  >
+    <CartesianGrid strokeDasharray="3 3" />
+    <XAxis dataKey="name" />
+    <YAxis />
+    <Tooltip />
+    <Legend />
+    <Bar dataKey="newUsers" fill="#8884d8" />
+    <Bar dataKey="activeUsers" fill="#82ca9d" />
+  </BarChart>
+</ResponsiveContainer>
+);
 
-export default AppIndexPage;
+export default Dashboard;
diff --git a/LibraryTrackingApp/src/frontend/pages/app/settings/index.jsx b/LibraryTrackingApp/src/frontend/pages/app/settings/index.jsx
index a51b0c1..b8ba6fa 100644
--- a/LibraryTrackingApp/src/frontend/pages/app/settings/index.jsx
+++ b/LibraryTrackingApp/src/frontend/pages/app/settings/index.jsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import {
   Button,
   Container,
@@ -20,7 +20,7 @@ import {
   Box,
   Heading,
   Switch,
-  ButtonGroup,
+  useColorMode,
 } from "@chakra-ui/react";
 
 const LibraryProfileSettingsPage = () => {
@@ -60,7 +60,7 @@ const LibraryProfileSettingsPage = () => {
 
   return (
     <Container maxW="5xl">
-      <Tabs>
+      <Tabs overflow={"auto"}>
         <TabList>
           <Tab
             _selected={{
@@ -272,6 +272,7 @@ const LibraryProfileSettingsPage = () => {
 };
 
 const GeneralSettingsPage = () => {
+  const { colorMode, toggleColorMode } = useColorMode();
   const toast = useToast();
   const [formData, setFormData] = useState({
     enableDarkMode: false,
@@ -280,8 +281,25 @@ const GeneralSettingsPage = () => {
     enableAutoApproval: false,
   });
 
+  useEffect(() => {
+    const channelBroadcast = () => {};
+    const channel = new BroadcastChannel("themeChannel");
+    let newColorMode = "";
+
+    if (formData.enableDarkMode) {
+      newColorMode = "dark";
+    } else {
+      newColorMode = "light";
+    }
+
+    channel.postMessage({ colorMode: newColorMode });
+
+    channelBroadcast();
+  }, [formData.enableDarkMode]);
+
   const handleChange = (e) => {
     const { name, checked } = e.target;
+
     setFormData((prevData) => ({
       ...prevData,
       [name]: checked,