diff --git a/LibraryTrackingApp/src/backend/Core/LibraryTrackingApp.Domain/Entities/Library/Shelf.cs b/LibraryTrackingApp/src/backend/Core/LibraryTrackingApp.Domain/Entities/Library/Shelf.cs
index 7f61cc2..2bb574f 100644
--- a/LibraryTrackingApp/src/backend/Core/LibraryTrackingApp.Domain/Entities/Library/Shelf.cs
+++ b/LibraryTrackingApp/src/backend/Core/LibraryTrackingApp.Domain/Entities/Library/Shelf.cs
@@ -1,7 +1,5 @@
 namespace LibraryTrackingApp.Domain.Entities.Library;
 
-
-//bunlar bir sonraki güncellemede veritabanına migrate edilcektir. raf ve kitap bölmesi dataları 
 public class Shelf : BaseEntity<Guid>, IAuditable<Guid>
 {
     public Guid Id { get; set; }
diff --git a/LibraryTrackingApp/src/frontend/components/AudioBookForm.jsx b/LibraryTrackingApp/src/frontend/components/AudioBookForm.jsx
new file mode 100644
index 0000000..9f2c37f
--- /dev/null
+++ b/LibraryTrackingApp/src/frontend/components/AudioBookForm.jsx
@@ -0,0 +1,118 @@
+import { useState } from "react";
+import {
+  Box,
+  FormControl,
+  FormLabel,
+  Input,
+  Table,
+  TableCaption,
+  Tbody,
+  Textarea,
+  Th,
+  Thead,
+  Tr,
+} from "@chakra-ui/react";
+import UploadForm from "./UploadForm";
+
+const AudioBookForm = ({ onUpload }) => {
+  const [title, setTitle] = useState("");
+  const [author, setAuthor] = useState("");
+  const [narrator, setNarrator] = useState("");
+  const [description, setDescription] = useState("");
+  const [audioFile, setAudioFile] = useState(null);
+  const [audioFiles, setAudioFiles] = useState([]);
+
+  const handleUpload = (file) => {
+    // ayarlanacak..
+  };
+  const handleDelete = (id) => {
+    setAudioFiles(eBooks.filter((audioFile) => audioFile.id !== id));
+  };
+  return (
+    <>
+      <FormControl>
+        <FormLabel htmlFor="title">Başlık</FormLabel>
+        <Input
+          type="text"
+          id="title"
+          value={title}
+          onChange={(e) => setTitle(e.target.value)}
+        />
+      </FormControl>
+      <FormControl mt={4}>
+        <FormLabel htmlFor="author">Yazar</FormLabel>
+        <Input
+          type="text"
+          id="author"
+          value={author}
+          onChange={(e) => setAuthor(e.target.value)}
+        />
+      </FormControl>
+      <FormControl mt={4}>
+        <FormLabel htmlFor="narrator">Anlatan</FormLabel>
+        <Input
+          type="text"
+          id="narrator"
+          value={narrator}
+          onChange={(e) => setNarrator(e.target.value)}
+        />
+      </FormControl>
+      <FormControl mt={4}>
+        <FormLabel htmlFor="description">Açıklama</FormLabel>
+        <Textarea
+          id="description"
+          value={description}
+          onChange={(e) => setDescription(e.target.value)}
+        />
+      </FormControl>
+
+      <UploadForm
+        onUpload={handleUpload}
+        //accept=".mp3, .wav"
+        labelName={"Ses Dosyasını buraya bırakınız."}
+      />
+
+      <Table variant="striped" colorScheme="blue" mt={8}>
+        <TableCaption>{`${audioFiles.length} sesli kitap bulundu.`}</TableCaption>
+        <Thead>
+          <Tr>
+            <Th>Ad</Th>
+            <Th>Dosya Tipi</Th>
+            <Th>Boyut (KB)</Th>
+            <Th>İşlemler</Th>
+          </Tr>
+        </Thead>
+        <Tbody>
+          {audioFiles.map((file) => (
+            <Tr key={file.id}>
+              <Td>{file.title}</Td>
+              <Td>{file.author}</Td>
+              <Td>{(file.size / 1024).toFixed(2)}</Td>
+              <Td>{file.author}</Td>
+
+              <Td>
+                <Button
+                  colorScheme="teal"
+                  size="sm"
+                  mr={2}
+                  onClick={() => window.open(`/app/e-books/${file.id}`)}
+                >
+                  Görüntüle
+                </Button>
+                <Button
+                  colorScheme="red"
+                  size="sm"
+                  onClick={() => handleDelete(file.id)}
+                >
+                  Sil
+                </Button>
+              </Td>
+            </Tr>
+          ))}
+        </Tbody>
+      </Table>
+    </>
+  );
+};
+
+export default AudioBookForm;
diff --git a/LibraryTrackingApp/src/frontend/components/GenreEditModal .jsx b/LibraryTrackingApp/src/frontend/components/GenreEditModal .jsx
new file mode 100644
index 0000000..aa96ff7
--- /dev/null
+++ b/LibraryTrackingApp/src/frontend/components/GenreEditModal .jsx	
@@ -0,0 +1,52 @@
+// GenreEditModal.jsx
+import { useState } from 'react';
+import {
+  Box,
+  Button,
+  FormControl,
+  FormLabel,
+  Input,
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalCloseButton,
+  ModalBody,
+  ModalFooter,
+} from '@chakra-ui/react';
+
+const GenreEditModal = ({ isOpen, onClose, genre, onUpdate }) => {
+  const [name, setName] = useState(genre ? genre.name : '');
+
+  const handleSubmit = () => {
+    onUpdate({ ...genre, name });
+    onClose();
+  };
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>Tür Düzenle</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <FormControl>
+            <FormLabel htmlFor="name">Ad</FormLabel>
+            <Input
+              type="text"
+              id="name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+            />
+          </FormControl>
+        </ModalBody>
+        <ModalFooter>
+          <Button colorScheme="blue" mr={3} onClick={handleSubmit}>Kaydet</Button>
+          <Button variant="ghost" onClick={onClose}>İptal</Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default GenreEditModal;
diff --git a/LibraryTrackingApp/src/frontend/components/LanguageSwitcher.jsx b/LibraryTrackingApp/src/frontend/components/LanguageSwitcher.jsx
index 93509ff..a8fed16 100644
--- a/LibraryTrackingApp/src/frontend/components/LanguageSwitcher.jsx
+++ b/LibraryTrackingApp/src/frontend/components/LanguageSwitcher.jsx
@@ -1,4 +1,10 @@
-import { Box, Button, Select, useColorModeValue } from "@chakra-ui/react";
+import {
+  Box,
+  Button,
+  Select,
+  useColorMode,
+  useColorModeValue,
+} from "@chakra-ui/react";
 import { useRouter } from "next/router";
 import React, { useEffect, useState } from "react";
 import locales, { EN_LOCALE, TR_LOCALE } from "../lib/locales";
@@ -27,7 +33,6 @@ function LangSwitcher() {
     broadcastChannel.addEventListener("message", (message) => {
       changeLanguage(message.data);
     });
-
   }, []);
 
   const changeLanguage = (newLocale) => {
@@ -38,7 +43,7 @@ function LangSwitcher() {
     } else {
       router.push(router.pathname, undefined, {
         locale: newLocale,
-        shallow: true
+        shallow: true,
       });
     }
   };
@@ -50,11 +55,12 @@ function LangSwitcher() {
     changeLanguage(newLocale);
     broadcastChannel.postMessage(newLocale);
   };
-
+  const { colorMode } = useColorMode();
   return (
     <>
       <Button
         id="lang-switcher"
+        _hover={{ color: colorMode === "light" ? "teal.500" : "teal.300" }}
         color={useColorModeValue("text.200", "textD.200")}
         bg="transparent"
         p={2}
@@ -62,10 +68,6 @@ function LangSwitcher() {
         onClick={toggleLanguage}
         mr={2}
         variant={"link"}
-        _hover={{
-          textDecoration: "none",
-          color: "primary.100",
-        }}
         cursor={"pointer"}
       >
         {currentLocale === EN_LOCALE.hl ? "TR" : "EN"}
diff --git a/LibraryTrackingApp/src/frontend/components/MagazineEditForm.jsx b/LibraryTrackingApp/src/frontend/components/MagazineEditForm.jsx
new file mode 100644
index 0000000..a305309
--- /dev/null
+++ b/LibraryTrackingApp/src/frontend/components/MagazineEditForm.jsx
@@ -0,0 +1,125 @@
+import { useState } from "react";
+import {
+  Box,
+  Button,
+  FormControl,
+  FormLabel,
+  Input,
+  Textarea,
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalCloseButton,
+  ModalBody,
+  ModalFooter,
+  Text,
+} from "@chakra-ui/react";
+
+const MagazineEditForm = ({ magazine, isOpen, onClose, onSubmit }) => {
+  const [name, setName] = useState(magazine ? magazine.name : "");
+  const [publicationDate, setPublicationDate] = useState(
+    magazine ? magazine.publicationDate : ""
+  );
+  const [coverImage, setCoverImage] = useState(
+    magazine ? magazine.coverImage : ""
+  );
+
+  const [coverImageURL, setCoverImageURL] = useState(
+    magazine ? magazine.coverImage : ""
+  );
+
+
+  const handleSubmit = () => {
+    onSubmit({ name, publicationDate, coverImage });
+  };
+
+  const handleImageChange = (e) => {
+    const selectedFile = e.target.files[0];
+    if (selectedFile) {
+      setFile(selectedFile);
+      setError("");
+      setCoverImageURL(URL.createObjectURL(selectedFile)); 
+     
+      setMagazine((prevMagazine) => ({
+        ...prevMagazine,
+        coverImage: URL.createObjectURL(selectedFile),
+      }));
+    } else {
+      setFile(null);
+      setError("Lütfen bir dosya seçin.");
+      setCoverImageURL(""); 
+      
+      setMagazine((prevMagazine) => ({
+        ...prevMagazine,
+        coverImage: "",
+      }));
+    }
+  };
+  
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>Dergi Düzenle</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <FormControl>
+            <FormLabel htmlFor="name">Dergi Adı</FormLabel>
+            <Input
+              type="text"
+              id="name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+            />
+          </FormControl>
+          <FormControl mt={4}>
+            <FormLabel htmlFor="publicationDate">Yayın Tarihi</FormLabel>
+            <Input
+              type="text"
+              id="publicationDate"
+              value={publicationDate}
+              onChange={(e) => setPublicationDate(e.target.value)}
+            />
+          </FormControl>
+          <FormControl mt={4}>
+            <FormLabel htmlFor="coverImage">Kapak Resmi</FormLabel>
+            <Input
+              type="file"
+              id="coverImage"
+              accept="image/*"
+              onChange={handleImageChange}
+            />
+            <Text mt={2} fontSize="sm" color="gray.500">
+              Veya kapak resmi URL'sini girin:
+            </Text>
+            <Input
+              type="text"
+              id="coverImageURL"
+              value={coverImageURL}
+              onChange={(e) => setCoverImageURL(e.target.value)}
+            />
+            {coverImage && (
+              <img
+                src={coverImage}
+                alt="Kapak Resmi"
+                style={{ marginTop: "10px", maxWidth: "100%" }}
+              />
+            )}
+          </FormControl>
+        </ModalBody>
+        <ModalFooter>
+          <Button colorScheme="teal" mr={3} onClick={handleSubmit}>
+            Kaydet
+          </Button>
+          <Button variant="ghost" onClick={onClose}>
+            İptal
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default MagazineEditForm;
diff --git a/LibraryTrackingApp/src/frontend/components/ThemeSwitcher.jsx b/LibraryTrackingApp/src/frontend/components/ThemeSwitcher.jsx
index a27ce7d..1f6b106 100644
--- a/LibraryTrackingApp/src/frontend/components/ThemeSwitcher.jsx
+++ b/LibraryTrackingApp/src/frontend/components/ThemeSwitcher.jsx
@@ -42,6 +42,7 @@ function ThemeSwitcher() {
     <>
       <IconButton
         id={"theme-switcher"}
+        _hover={{ color: colorMode === "light" ? "teal.500" : "teal.300" }}
         aria-label="Color Switcher"
         variant={"ghost"}
         onClick={handleToggleColorMode}
diff --git a/LibraryTrackingApp/src/frontend/components/UploadForm.jsx b/LibraryTrackingApp/src/frontend/components/UploadForm.jsx
new file mode 100644
index 0000000..31c1e17
--- /dev/null
+++ b/LibraryTrackingApp/src/frontend/components/UploadForm.jsx
@@ -0,0 +1,89 @@
+import { useState } from 'react';
+import { Box, Button, Text } from '@chakra-ui/react';
+import { MdCloudUpload } from 'react-icons/md';
+
+const UploadForm = ({ onUpload, labelName,accept }) => {
+  const [file, setFile] = useState(null);
+  const [error, setError] = useState('');
+
+  const handleFileChange = (e) => {
+    const selectedFile = e.target.files[0];
+    if (selectedFile) {
+      setFile(selectedFile);
+      setError('');
+    } else {
+      setFile(null);
+      setError('Lütfen bir dosya seçin.');
+    }
+  };
+
+  const handleUpload = () => {
+    if (!file) {
+      setError('Lütfen bir dosya seçin.');
+      return;
+    }
+    onUpload(file);
+    setFile(null);
+  };
+
+  const handleDrop = (e) => {
+    e.preventDefault();
+    const droppedFile = e.dataTransfer.files[0];
+    if (droppedFile) {
+      setFile(droppedFile);
+      setError('');
+    } else {
+      setFile(null);
+      setError('Lütfen bir dosya sürükleyip bırakın.');
+    }
+  };
+
+  const handleDragOver = (e) => {
+    e.preventDefault();
+  };
+
+  return (
+    <Box
+      border="2px dashed"
+      borderColor="gray.200"
+      borderRadius="md"
+      p={6}
+      textAlign="center"
+      position="relative"
+      cursor="pointer"
+      _hover={{ bg: 'gray.50' }}
+      onDrop={handleDrop}
+      onDragOver={handleDragOver}
+    >
+      <input
+        type="file"
+        id="file"
+        accept={accept}
+        onChange={handleFileChange}
+        style={{ display: 'none' }}
+      />
+      <label htmlFor="file">
+        <MdCloudUpload size={24} />
+        <Text fontSize="sm" mt={2} fontWeight={'semibold'}>
+          {labelName}
+        </Text>
+      </label>
+      {error && <Text color="red.500">{error}</Text>}
+      {file && (
+        <Text mt={2} fontWeight="bold">
+          {file.name} ({(file.size / 1024 / 1024).toFixed(2)} MB)
+        </Text>
+      )}
+      <Button
+        mt={4}
+        colorScheme="blue"
+        onClick={handleUpload}
+        isDisabled={!file}
+      >
+        Yükle
+      </Button>
+    </Box>
+  );
+};
+
+export default UploadForm;
diff --git a/LibraryTrackingApp/src/frontend/constants/appSidebarItems.jsx b/LibraryTrackingApp/src/frontend/constants/appSidebarItems.jsx
index d50cefa..6ec700f 100644
--- a/LibraryTrackingApp/src/frontend/constants/appSidebarItems.jsx
+++ b/LibraryTrackingApp/src/frontend/constants/appSidebarItems.jsx
@@ -125,23 +125,10 @@ export const sidebarItems = [
   },
   {
     title: "Tür Yönetimi",
-    icon: <FaBookOpen />,
-    href: null,
+    icon: <CiBoxList />,
+    href: "/app/genre",
     target: "_self",
-    subItems: [
-      {
-        icon: <IoCreateOutline />,
-        title: "Yeni  Ekle",
-        href: "/app/genre/new",
-        target: "_self",
-      },
-      {
-        icon: <CiBoxList />,
-        title: "Listele",
-        href: "/app/genre",
-        target: "_self",
-      },
-    ],
+    subItems: [],
   },
   {
     title: "Üye Yönetimi",
diff --git a/LibraryTrackingApp/src/frontend/constants/meSidebarItems.jsx b/LibraryTrackingApp/src/frontend/constants/meSidebarItems.jsx
index b354ea3..252d51f 100644
--- a/LibraryTrackingApp/src/frontend/constants/meSidebarItems.jsx
+++ b/LibraryTrackingApp/src/frontend/constants/meSidebarItems.jsx
@@ -19,14 +19,14 @@ export const meSidebarItems = [
     target: "_self",
   },
   {
-    title: "Profil Yönetimi",
+    title: "Profilim",
     icon: <FaUser />,
     href: "/me/profile",
     target: "_self",
     subItems: [],
   },
   {
-    title: "Kütüphane Yönetimi",
+    title: "Kütüphanelerim",
     icon: <FaBook />,
     href: "/me/library",
     target: "_self",
diff --git a/LibraryTrackingApp/src/frontend/constants/site.jsx b/LibraryTrackingApp/src/frontend/constants/site.jsx
index d1f99ca..3716e54 100644
--- a/LibraryTrackingApp/src/frontend/constants/site.jsx
+++ b/LibraryTrackingApp/src/frontend/constants/site.jsx
@@ -16,7 +16,7 @@ const API_BASE_URL =
 
 const baseUrl =
   process.env.NODE_ENV === "production"
-    ? "https://appizsoft.com"
+    ? "https://domain.com"
     : "http://localhost:3000";
 
 export const site = {
diff --git a/LibraryTrackingApp/src/frontend/layouts/App/components/Navbar/index.jsx b/LibraryTrackingApp/src/frontend/layouts/App/components/Navbar/index.jsx
index 68fbcae..662f44b 100644
--- a/LibraryTrackingApp/src/frontend/layouts/App/components/Navbar/index.jsx
+++ b/LibraryTrackingApp/src/frontend/layouts/App/components/Navbar/index.jsx
@@ -53,7 +53,7 @@ const Navbar = ({ isOpen, onMenuToggle }) => {
       }
     }
   };
-
+  const { colorMode } = useColorMode();
   return (
     <Flex
       boxShadow="sm"
@@ -65,7 +65,6 @@ const Navbar = ({ isOpen, onMenuToggle }) => {
       width={isOpen ? "calc(100% - 275px)" : "100%"}
       transform={isOpen ? "translateX(275px)" : "translateX(0)"}
       transition="0.3s ease-in"
-
     >
       <HStack spacing={3}>
         {isOpen ? (
@@ -73,7 +72,7 @@ const Navbar = ({ isOpen, onMenuToggle }) => {
             boxSize={4}
             cursor={"pointer"}
             onClick={onMenuToggle}
-            _hover={{ color: "red" }}
+            _hover={{ color: colorMode === "light" ? "red" : "red.300" }}
           />
         ) : (
           <Icon
@@ -81,10 +80,11 @@ const Navbar = ({ isOpen, onMenuToggle }) => {
             as={HiMenuAlt2}
             boxSize={18}
             onClick={onMenuToggle}
+            _hover={{ color: colorMode === "light" ? "teal.500" : "teal.300" }}
           />
         )}
       </HStack>
-      <Box >
+      <Box>
         <NavItem
           isMaximized={isMaximized}
           handleMaximizeToggle={handleMaximizeToggle}
@@ -95,10 +95,11 @@ const Navbar = ({ isOpen, onMenuToggle }) => {
 };
 
 const NavItem = ({ isMaximized, handleMaximizeToggle }) => {
+  const { colorMode } = useColorMode();
   return (
     <>
       <HStack spacing={3}>
-      <NotificationMenu/>
+        <NotificationMenu />
         <LanguageSwitcher />
         <ThemeSwitcher />
 
@@ -107,6 +108,7 @@ const NavItem = ({ isMaximized, handleMaximizeToggle }) => {
           as={isMaximized ? FiMinimize : FiMaximize}
           boxSize={15}
           onClick={handleMaximizeToggle}
+          _hover={{ color: colorMode === "light" ? "teal.500" : "teal.300" }}
         />
 
         <Menu isLazy>
@@ -151,14 +153,16 @@ const NotificationMenu = () => {
     {
       id: 2,
       title: "Bildirim",
-      content: "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+      content:
+        "Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
       time: "1 saat önce",
       read: true,
     },
     {
       id: 3,
       title: "Bilgilendirme",
-      content: "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+      content:
+        "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
       time: "1 gün önce",
       read: false,
     },
@@ -171,37 +175,41 @@ const NotificationMenu = () => {
   const { colorMode } = useColorMode();
 
   // Okunmamış bildirim sayısını hesapla
-  const unreadNotificationsCount = notifications.filter(notification => !notification.read).length;
+  const unreadNotificationsCount = notifications.filter(
+    (notification) => !notification.read
+  ).length;
 
   return (
-    <Menu isLazy>
-      <MenuButton
-        cursor="pointer"
-        boxSize={15}
-        _hover={{ color: colorMode === "light" ? "teal.500" : "teal.300" }}
-        onClick={handleToggle}
-        position="relative"
-      >
-        <FiBell />
-      </MenuButton>
-      <MenuList
-        zIndex={5}
-        border="2px solid"
-        borderColor="gray.200"
-        boxShadow="4px 4px 0"
-        minWidth="200px"
-        display={isOpen ? "block" : "none"}
-      >
-        {notifications.map((notification, index) => (
-          <MenuItem key={index}>
-            <VStack spacing={2} align="start">
-              <Text fontWeight="500">{notification.title}</Text>
-              <Text color="gray.500">{notification.content}</Text>
-            </VStack>
-          </MenuItem>
-        ))}
-      </MenuList>
-    </Menu>
+    <>
+      <Menu isLazy>
+        <MenuButton
+          cursor="pointer"
+          boxSize={15}
+          _hover={{ color: colorMode === "light" ? "teal.500" : "teal.300" }}
+          onClick={handleToggle}
+          position="relative"
+        >
+          <FiBell />
+        </MenuButton>
+        <MenuList
+          zIndex={5}
+          border="2px solid"
+          borderColor="gray.200"
+          boxShadow="4px 4px 0"
+          minWidth="200px"
+          display={isOpen ? "block" : "none"}
+        >
+          {notifications.map((notification, index) => (
+            <MenuItem key={index}>
+              <VStack spacing={2} align="start">
+                <Text fontWeight="500">{notification.title}</Text>
+                <Text color="gray.500">{notification.content}</Text>
+              </VStack>
+            </MenuItem>
+          ))}
+        </MenuList>
+      </Menu>
+    </>
   );
 };
 export default Navbar;
diff --git a/LibraryTrackingApp/src/frontend/package-lock.json b/LibraryTrackingApp/src/frontend/package-lock.json
index fc15f33..9ad754c 100644
--- a/LibraryTrackingApp/src/frontend/package-lock.json
+++ b/LibraryTrackingApp/src/frontend/package-lock.json
@@ -34,6 +34,7 @@
         "react-icons": "^4.12.0",
         "react-joyride": "^2.8.1",
         "react-leaflet": "^4.2.1",
+        "react-pdf": "^8.0.0",
         "react-responsive-carousel": "^3.2.23",
         "recharts": "^2.12.6",
         "redoc": "^2.1.3",
@@ -1486,6 +1487,26 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@mapbox/node-pre-gyp": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/@mapbox/node-pre-gyp/-/node-pre-gyp-1.0.11.tgz",
+      "integrity": "sha512-Yhlar6v9WQgUp/He7BdgzOz8lqMQ8sU+jkCq7Wx8Myc5YFJLbEe7lgui/V7G1qB1DJykHSGwreceSaD60Y0PUQ==",
+      "optional": true,
+      "dependencies": {
+        "detect-libc": "^2.0.0",
+        "https-proxy-agent": "^5.0.0",
+        "make-dir": "^3.1.0",
+        "node-fetch": "^2.6.7",
+        "nopt": "^5.0.0",
+        "npmlog": "^5.0.1",
+        "rimraf": "^3.0.2",
+        "semver": "^7.3.5",
+        "tar": "^6.1.11"
+      },
+      "bin": {
+        "node-pre-gyp": "bin/node-pre-gyp"
+      }
+    },
     "node_modules/@next/env": {
       "version": "13.5.6",
       "resolved": "https://registry.npmjs.org/@next/env/-/env-13.5.6.tgz",
@@ -1914,6 +1935,24 @@
         "@zag-js/dom-query": "0.16.0"
       }
     },
+    "node_modules/abbrev": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
+      "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
+      "optional": true
+    },
+    "node_modules/agent-base": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
+      "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
+      "optional": true,
+      "dependencies": {
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6.0.0"
+      }
+    },
     "node_modules/amdefine": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz",
@@ -1969,6 +2008,25 @@
         "lodash.throttle": "^4.0.1"
       }
     },
+    "node_modules/aproba": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/aproba/-/aproba-2.0.0.tgz",
+      "integrity": "sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ==",
+      "optional": true
+    },
+    "node_modules/are-we-there-yet": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-2.0.0.tgz",
+      "integrity": "sha512-Ci/qENmwHnsYo9xKIcUJN5LeDKdJ6R1Z1j9V/J5wyq8nh/mYPEpIKJbBZXtZjG04HiK7zV/p6Vs9952MrMeUIw==",
+      "optional": true,
+      "dependencies": {
+        "delegates": "^1.0.0",
+        "readable-stream": "^3.6.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/arg": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
@@ -2220,6 +2278,21 @@
         }
       ]
     },
+    "node_modules/canvas": {
+      "version": "2.11.2",
+      "resolved": "https://registry.npmjs.org/canvas/-/canvas-2.11.2.tgz",
+      "integrity": "sha512-ItanGBMrmRV7Py2Z+Xhs7cT+FNt5K0vPL4p9EZ/UX/Mu7hFbkxSjKF2KVtPwX7UYWp7dRKnrTvReflgrItJbdw==",
+      "hasInstallScript": true,
+      "optional": true,
+      "dependencies": {
+        "@mapbox/node-pre-gyp": "^1.0.0",
+        "nan": "^2.17.0",
+        "simple-get": "^3.0.3"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/chalk": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
@@ -2278,6 +2351,15 @@
         "node": ">= 6"
       }
     },
+    "node_modules/chownr": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
+      "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==",
+      "optional": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/classlist-polyfill": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/classlist-polyfill/-/classlist-polyfill-1.2.0.tgz",
@@ -2327,6 +2409,15 @@
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
       "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
     },
+    "node_modules/color-support": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz",
+      "integrity": "sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==",
+      "optional": true,
+      "bin": {
+        "color-support": "bin.js"
+      }
+    },
     "node_modules/color2k": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/color2k/-/color2k-2.0.2.tgz",
@@ -2366,6 +2457,12 @@
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
       "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
     },
+    "node_modules/console-control-strings": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
+      "integrity": "sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==",
+      "optional": true
+    },
     "node_modules/convert-source-map": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
@@ -2558,6 +2655,23 @@
         "node": ">=12"
       }
     },
+    "node_modules/debug": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
+      "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+      "optional": true,
+      "dependencies": {
+        "ms": "2.1.2"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/decimal.js-light": {
       "version": "2.5.1",
       "resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz",
@@ -2568,6 +2682,18 @@
       "resolved": "https://registry.npmjs.org/decko/-/decko-1.2.0.tgz",
       "integrity": "sha512-m8FnyHXV1QX+S1cl+KPFDIl6NMkxtKsy6+U/aYyjrOqWMuwAwYWu7ePqrsUHtDR5Y8Yk2pi/KIDSgF+vT4cPOQ=="
     },
+    "node_modules/decompress-response": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-4.2.1.tgz",
+      "integrity": "sha512-jOSne2qbyE+/r8G1VU+G/82LBs2Fs4LAsTiLSHOCOMZQl2OKZ6i8i4IyHemTe+/yIXOtTcRQMzPcgyhoFlqPkw==",
+      "optional": true,
+      "dependencies": {
+        "mimic-response": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/deep-diff": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/deep-diff/-/deep-diff-1.0.2.tgz",
@@ -2589,6 +2715,29 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/delegates": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
+      "integrity": "sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ==",
+      "optional": true
+    },
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/detect-libc": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.3.tgz",
+      "integrity": "sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==",
+      "optional": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/detect-node-es": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
@@ -2938,6 +3087,30 @@
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
       "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
     },
+    "node_modules/fs-minipass": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz",
+      "integrity": "sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==",
+      "optional": true,
+      "dependencies": {
+        "minipass": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/fs-minipass/node_modules/minipass": {
+      "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
+      "optional": true,
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -2964,6 +3137,26 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/gauge": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/gauge/-/gauge-3.0.2.tgz",
+      "integrity": "sha512-+5J6MS/5XksCuXq++uFRsnUd7Ovu1XenbeuIuNRJxYWjgQbPuFhT14lAvsWfqfAmnwluf1OwMjz39HjfLPci0Q==",
+      "optional": true,
+      "dependencies": {
+        "aproba": "^1.0.3 || ^2.0.0",
+        "color-support": "^1.1.2",
+        "console-control-strings": "^1.0.0",
+        "has-unicode": "^2.0.1",
+        "object-assign": "^4.1.1",
+        "signal-exit": "^3.0.0",
+        "string-width": "^4.2.3",
+        "strip-ansi": "^6.0.1",
+        "wide-align": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/get-caller-file": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
@@ -3033,6 +3226,12 @@
         "node": ">=4"
       }
     },
+    "node_modules/has-unicode": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
+      "integrity": "sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ==",
+      "optional": true
+    },
     "node_modules/hasown": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.0.tgz",
@@ -3071,6 +3270,19 @@
       "resolved": "https://registry.npmjs.org/https/-/https-1.0.0.tgz",
       "integrity": "sha512-4EC57ddXrkaF0x83Oj8sM6SLQHAWXw90Skqu2M4AEWENZ3F02dFJE/GARA8igO79tcgYqGrD7ae4f5L3um2lgg=="
     },
+    "node_modules/https-proxy-agent": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
+      "integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==",
+      "optional": true,
+      "dependencies": {
+        "agent-base": "6",
+        "debug": "4"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/i18next": {
       "version": "23.7.8",
       "resolved": "https://registry.npmjs.org/i18next/-/i18next-23.7.8.tgz",
@@ -3325,11 +3537,63 @@
         "loose-envify": "cli.js"
       }
     },
+    "node_modules/lru-cache": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "optional": true,
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/lunr": {
       "version": "2.3.9",
       "resolved": "https://registry.npmjs.org/lunr/-/lunr-2.3.9.tgz",
       "integrity": "sha512-zTU3DaZaF3Rt9rhN3uBMGQD3dD2/vFQqnvZCDv4dl5iOzq2IZQqTxu90r4E5J+nP70J3ilqVCrbho2eWaeW8Ow=="
     },
+    "node_modules/make-cancellable-promise": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/make-cancellable-promise/-/make-cancellable-promise-1.3.2.tgz",
+      "integrity": "sha512-GCXh3bq/WuMbS+Ky4JBPW1hYTOU+znU+Q5m9Pu+pI8EoUqIHk9+tviOKC6/qhHh8C4/As3tzJ69IF32kdz85ww==",
+      "funding": {
+        "url": "https://github.com/wojtekmaj/make-cancellable-promise?sponsor=1"
+      }
+    },
+    "node_modules/make-dir": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
+      "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
+      "optional": true,
+      "dependencies": {
+        "semver": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/make-dir/node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "optional": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/make-event-props": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/make-event-props/-/make-event-props-1.6.2.tgz",
+      "integrity": "sha512-iDwf7mA03WPiR8QxvcVHmVWEPfMY1RZXerDVNCRYW7dUr2ppH3J58Rwb39/WG39yTZdRSxr3x+2v22tvI0VEvA==",
+      "funding": {
+        "url": "https://github.com/wojtekmaj/make-event-props?sponsor=1"
+      }
+    },
     "node_modules/mark.js": {
       "version": "8.11.1",
       "resolved": "https://registry.npmjs.org/mark.js/-/mark.js-8.11.1.tgz",
@@ -3346,6 +3610,22 @@
         "node": ">= 12"
       }
     },
+    "node_modules/merge-refs": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/merge-refs/-/merge-refs-1.3.0.tgz",
+      "integrity": "sha512-nqXPXbso+1dcKDpPCXvwZyJILz+vSLqGGOnDrYHQYE+B8n9JTCekVLC65AfCpR4ggVyA/45Y0iR9LDyS2iI+zA==",
+      "funding": {
+        "url": "https://github.com/wojtekmaj/merge-refs?sponsor=1"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -3385,6 +3665,18 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/mimic-response": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-2.1.0.tgz",
+      "integrity": "sha512-wXqjST+SLt7R009ySCglWBCFpjUygmCIfD790/kVbiGmUgfYGuB14PiTd5DwVxSV4NcYHjzMkoj5LjQZwTQLEA==",
+      "optional": true,
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -3396,6 +3688,52 @@
         "node": "*"
       }
     },
+    "node_modules/minipass": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-5.0.0.tgz",
+      "integrity": "sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==",
+      "optional": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/minizlib": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-2.1.2.tgz",
+      "integrity": "sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==",
+      "optional": true,
+      "dependencies": {
+        "minipass": "^3.0.0",
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/minizlib/node_modules/minipass": {
+      "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
+      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
+      "optional": true,
+      "dependencies": {
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/mkdirp": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
+      "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
+      "optional": true,
+      "bin": {
+        "mkdirp": "bin/cmd.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/mobx": {
       "version": "6.12.3",
       "resolved": "https://registry.npmjs.org/mobx/-/mobx-6.12.3.tgz",
@@ -3451,6 +3789,12 @@
         }
       }
     },
+    "node_modules/ms": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+      "optional": true
+    },
     "node_modules/mz": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
@@ -3461,6 +3805,12 @@
         "thenify-all": "^1.0.0"
       }
     },
+    "node_modules/nan": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/nan/-/nan-2.19.0.tgz",
+      "integrity": "sha512-nO1xXxfh/RWNxfd/XPfbIfFk5vgLsAxUR9y5O0cHMJu/AW9U95JLXqthYHjEp+8gQ5p96K9jUp8nbVOxCdRbtw==",
+      "optional": true
+    },
     "node_modules/nanoid": {
       "version": "3.3.7",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
@@ -3611,6 +3961,21 @@
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz",
       "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw=="
     },
+    "node_modules/nopt": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/nopt/-/nopt-5.0.0.tgz",
+      "integrity": "sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ==",
+      "optional": true,
+      "dependencies": {
+        "abbrev": "1"
+      },
+      "bin": {
+        "nopt": "bin/nopt.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/normalize-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
@@ -3627,6 +3992,18 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/npmlog": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-5.0.1.tgz",
+      "integrity": "sha512-AqZtDUWOMKs1G/8lwylVjrdYgqA4d9nu8hc+0gzRxlDb1I10+FHBGMXs6aiQHFdCUUlqH99MUMuLfzWDNDtfxw==",
+      "optional": true,
+      "dependencies": {
+        "are-we-there-yet": "^2.0.0",
+        "console-control-strings": "^1.1.0",
+        "gauge": "^3.0.0",
+        "set-blocking": "^2.0.0"
+      }
+    },
     "node_modules/oas-kit-common": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/oas-kit-common/-/oas-kit-common-1.0.8.tgz",
@@ -3779,6 +4156,27 @@
         "node": ">=8"
       }
     },
+    "node_modules/path2d-polyfill": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/path2d-polyfill/-/path2d-polyfill-2.0.1.tgz",
+      "integrity": "sha512-ad/3bsalbbWhmBo0D6FZ4RNMwsLsPpL6gnvhuSaU5Vm7b06Kr5ubSltQQ0T7YKsiJQO+g22zJ4dJKNTXIyOXtA==",
+      "optional": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/pdfjs-dist": {
+      "version": "3.11.174",
+      "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-3.11.174.tgz",
+      "integrity": "sha512-TdTZPf1trZ8/UFu5Cx/GXB7GZM30LT+wWUNfsi6Bq8ePLnb+woNKtDymI2mxZYBpMbonNFqKmiz684DIfnd8dA==",
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "canvas": "^2.11.2",
+        "path2d-polyfill": "^2.0.1"
+      }
+    },
     "node_modules/perfect-scrollbar": {
       "version": "1.5.5",
       "resolved": "https://registry.npmjs.org/perfect-scrollbar/-/perfect-scrollbar-1.5.5.tgz",
@@ -4290,6 +4688,42 @@
         "react-dom": "^18.0.0"
       }
     },
+    "node_modules/react-pdf": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/react-pdf/-/react-pdf-8.0.0.tgz",
+      "integrity": "sha512-0aAQjdXeiAFTCGa607reLwPCrjpwH3MM2t0Lpq5Eju6ss17tNDIdhYiyvw/sZg9/ZrmL9aC0I4ztGiFeWz3zOQ==",
+      "dependencies": {
+        "clsx": "^2.0.0",
+        "dequal": "^2.0.3",
+        "make-cancellable-promise": "^1.3.1",
+        "make-event-props": "^1.6.0",
+        "merge-refs": "^1.2.1",
+        "pdfjs-dist": "3.11.174",
+        "tiny-invariant": "^1.0.0",
+        "warning": "^4.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/wojtekmaj/react-pdf?sponsor=1"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-pdf/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/react-remove-scroll": {
       "version": "2.5.7",
       "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.7.tgz",
@@ -4416,6 +4850,20 @@
         "pify": "^2.3.0"
       }
     },
+    "node_modules/readable-stream": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+      "optional": true,
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/readdirp": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -4566,6 +5014,21 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/rimraf": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
+      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+      "optional": true,
+      "dependencies": {
+        "glob": "^7.1.3"
+      },
+      "bin": {
+        "rimraf": "bin.js"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -4588,6 +5051,26 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "optional": true
+    },
     "node_modules/scheduler": {
       "version": "0.23.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
@@ -4606,6 +5089,27 @@
       "resolved": "https://registry.npmjs.org/scrollparent/-/scrollparent-2.1.0.tgz",
       "integrity": "sha512-bnnvJL28/Rtz/kz2+4wpBjHzWoEzXhVg/TE8BeVGJHUqE8THNIRnDxDWMktwM+qahvlRdvlLdsQfYe+cuqfZeA=="
     },
+    "node_modules/semver": {
+      "version": "7.6.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.0.tgz",
+      "integrity": "sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==",
+      "optional": true,
+      "dependencies": {
+        "lru-cache": "^6.0.0"
+      },
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/set-blocking": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+      "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==",
+      "optional": true
+    },
     "node_modules/shallowequal": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
@@ -4660,6 +5164,43 @@
       "resolved": "https://registry.npmjs.org/should-util/-/should-util-1.0.1.tgz",
       "integrity": "sha512-oXF8tfxx5cDk8r2kYqlkUJzZpDBqVY/II2WhvU0n9Y3XYvAYRmeaf1PvvIvTgPnv4KJ+ES5M0PyDq5Jp+Ygy2g=="
     },
+    "node_modules/signal-exit": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
+      "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
+      "optional": true
+    },
+    "node_modules/simple-concat": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/simple-concat/-/simple-concat-1.0.1.tgz",
+      "integrity": "sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "optional": true
+    },
+    "node_modules/simple-get": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/simple-get/-/simple-get-3.1.1.tgz",
+      "integrity": "sha512-CQ5LTKGfCpvE1K0n2us+kuMPbk/q0EKl82s4aheV9oXjFEz6W/Y7oQFVJuU6QG77hRT4Ghb5RURteF5vnWjupA==",
+      "optional": true,
+      "dependencies": {
+        "decompress-response": "^4.2.0",
+        "once": "^1.3.1",
+        "simple-concat": "^1.0.0"
+      }
+    },
     "node_modules/slugify": {
       "version": "1.4.7",
       "resolved": "https://registry.npmjs.org/slugify/-/slugify-1.4.7.tgz",
@@ -4716,6 +5257,15 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/string_decoder": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "optional": true,
+      "dependencies": {
+        "safe-buffer": "~5.2.0"
+      }
+    },
     "node_modules/string-width": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
@@ -4924,6 +5474,23 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/tar": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-6.2.1.tgz",
+      "integrity": "sha512-DZ4yORTwrbTj/7MZYq2w+/ZFdI6OZ/f9SFHR+71gIVUZhOQPHzVCLpvRnPgyaMpfWxxk/4ONva3GQSyNIKRv6A==",
+      "optional": true,
+      "dependencies": {
+        "chownr": "^2.0.0",
+        "fs-minipass": "^2.0.0",
+        "minipass": "^5.0.0",
+        "minizlib": "^2.1.1",
+        "mkdirp": "^1.0.3",
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/thenify": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
@@ -5145,6 +5712,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
@@ -5171,6 +5746,15 @@
         "webidl-conversions": "^3.0.0"
       }
     },
+    "node_modules/wide-align": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.5.tgz",
+      "integrity": "sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==",
+      "optional": true,
+      "dependencies": {
+        "string-width": "^1.0.2 || 2 || 3 || 4"
+      }
+    },
     "node_modules/wrap-ansi": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
@@ -5230,6 +5814,12 @@
         "node": ">=10"
       }
     },
+    "node_modules/yallist": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "optional": true
+    },
     "node_modules/yaml": {
       "version": "1.10.2",
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
diff --git a/LibraryTrackingApp/src/frontend/package.json b/LibraryTrackingApp/src/frontend/package.json
index bea0c0e..9e9663d 100644
--- a/LibraryTrackingApp/src/frontend/package.json
+++ b/LibraryTrackingApp/src/frontend/package.json
@@ -35,6 +35,7 @@
     "react-icons": "^4.12.0",
     "react-joyride": "^2.8.1",
     "react-leaflet": "^4.2.1",
+    "react-pdf": "^8.0.0",
     "react-responsive-carousel": "^3.2.23",
     "recharts": "^2.12.6",
     "redoc": "^2.1.3",
diff --git a/LibraryTrackingApp/src/frontend/pages/api/pdf-dummy.js b/LibraryTrackingApp/src/frontend/pages/api/pdf-dummy.js
new file mode 100644
index 0000000..b787121
--- /dev/null
+++ b/LibraryTrackingApp/src/frontend/pages/api/pdf-dummy.js
@@ -0,0 +1,18 @@
+import fs from 'fs';
+import path from 'path';
+
+export default function handler(req, res) {
+    
+  const filePath = path.join(process.cwd(), 'public', 'pdf-dummy.pdf');
+
+  fs.readFile(filePath, (err, data) => {
+    if (err) {
+      console.error(err);
+      res.status(500).end();
+      return;
+    }
+
+    res.setHeader('Content-Type', 'application/pdf');
+    res.status(200).send(data);
+  });
+}
diff --git a/LibraryTrackingApp/src/frontend/pages/app/audio-books/[id].jsx b/LibraryTrackingApp/src/frontend/pages/app/audio-books/[id].jsx
new file mode 100644
index 0000000..dfd42e1
--- /dev/null
+++ b/LibraryTrackingApp/src/frontend/pages/app/audio-books/[id].jsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+function AudioBookDetailPage() {
+  return (
+    <div>AudioBookDetailPage</div>
+  )
+}
+
+export default AudioBookDetailPage
\ No newline at end of file
diff --git a/LibraryTrackingApp/src/frontend/pages/app/audio-books/index.jsx b/LibraryTrackingApp/src/frontend/pages/app/audio-books/index.jsx
index feab21d..06f514c 100644
--- a/LibraryTrackingApp/src/frontend/pages/app/audio-books/index.jsx
+++ b/LibraryTrackingApp/src/frontend/pages/app/audio-books/index.jsx
@@ -1,8 +1,13 @@
+import AudioBookForm from '@/components/AudioBookForm'
 import React from 'react'
 
 function BooksPage() {
+
+  
   return (
-    <div>BooksPage</div>
+    <>
+    <AudioBookForm/>
+    </>
   )
 }
 
diff --git a/LibraryTrackingApp/src/frontend/pages/app/e-books/[id].jsx b/LibraryTrackingApp/src/frontend/pages/app/e-books/[id].jsx
new file mode 100644
index 0000000..d55958a
--- /dev/null
+++ b/LibraryTrackingApp/src/frontend/pages/app/e-books/[id].jsx
@@ -0,0 +1,73 @@
+import React, { useState } from "react";
+import { Document, Page, pdfjs } from "react-pdf";
+import { Box, Button } from "@chakra-ui/react";
+import { site } from "@/constants/site";
+import Head from "next/head";
+
+pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
+
+const PdfViewer = ({ pdfUrl }) => {
+  const [numPages, setNumPages] = useState(null);
+  const [pageNumber, setPageNumber] = useState(1);
+
+  const onDocumentLoadSuccess = ({ numPages }) => {
+    setNumPages(numPages);
+  };
+
+  const goToPrevPage = () => {
+    if (pageNumber > 1) {
+      setPageNumber(pageNumber - 1);
+    }
+  };
+
+  const goToNextPage = () => {
+    if (pageNumber < numPages) {
+      setPageNumber(pageNumber + 1);
+    }
+  };
+
+  return (
+    <>
+    <Head>
+      <title>
+        Dummy Fake E-Book
+      </title>
+    </Head>
+      <Document file={pdfUrl} onLoadSuccess={onDocumentLoadSuccess}>
+        <Page pageNumber={pageNumber} />
+      </Document>
+      <Box textAlign="center">
+        <Button
+          colorScheme={"teal"}
+          onClick={goToPrevPage}
+          disabled={pageNumber <= 1}
+        >
+          Önceki Sayfa
+        </Button>
+        <span style={{ margin: "0 10px" }}>
+          Sayfa {pageNumber} / {numPages}
+        </span>
+        <Button
+          colorScheme={"teal"}
+          onClick={goToNextPage}
+          disabled={pageNumber >= numPages}
+        >
+          Sonraki Sayfa
+        </Button>
+      </Box>
+    </>
+  );
+};
+
+export async function getServerSideProps() {
+  //dummy pdf url
+  const pdfUrl = site.baseUrl + "/api/pdf-dummy";
+
+  return {
+    props: {
+      pdfUrl,
+    },
+  };
+}
+
+export default PdfViewer;
diff --git a/LibraryTrackingApp/src/frontend/pages/app/e-books/index.jsx b/LibraryTrackingApp/src/frontend/pages/app/e-books/index.jsx
index feab21d..6f500c8 100644
--- a/LibraryTrackingApp/src/frontend/pages/app/e-books/index.jsx
+++ b/LibraryTrackingApp/src/frontend/pages/app/e-books/index.jsx
@@ -1,9 +1,81 @@
-import React from 'react'
+import { useState } from "react";
+import {
+  Box,
+  Button,
+  Table,
+  Thead,
+  Tbody,
+  Tr,
+  Th,
+  Td,
+  TableCaption,
+} from "@chakra-ui/react";
+import UploadForm from "@/components/UploadForm";
+
+const EBooks = () => {
+  const [eBooks, setEBooks] = useState([]);
+
+  const handleUpload = (file) => {
+    const newEBook = {
+      id: Date.now(),
+      name: file.name,
+      type: file.type,
+      size: file.size,
+    };
+    setEBooks([...eBooks, newEBook]);
+  };
+
+  const handleDelete = (id) => {
+    setEBooks(eBooks.filter((eBook) => eBook.id !== id));
+  };
 
-function BooksPage() {
   return (
-    <div>BooksPage</div>
-  )
-}
+    <Box p={4}>
+      <UploadForm
+        onUpload={handleUpload}
+        accept={".pdf, .epub, .mobi"}
+        labelName={"E-Kitap Dosyasını buraya bırakınız."}
+      />
+
+      <Table variant="striped" colorScheme="blue" mt={8}>
+        <TableCaption>{`${eBooks.length} e-kitap bulundu.`}</TableCaption>
+        <Thead>
+          <Tr>
+            <Th>Ad</Th>
+            <Th>Dosya Tipi</Th>
+            <Th>Boyut (KB)</Th>
+            <Th>İşlemler</Th>
+          </Tr>
+        </Thead>
+        <Tbody>
+          {eBooks.map((eBook) => (
+            <Tr key={eBook.id}>
+              <Td>{eBook.name}</Td>
+              <Td>{eBook.type}</Td>
+              <Td>{(eBook.size / 1024).toFixed(2)}</Td>
+              <Td>
+                <Button
+                  colorScheme="teal"
+                  size="sm"
+                  mr={2}
+                  onClick={() => window.open(`/app/e-books/${eBook.id}`)}
+                >
+                  Görüntüle
+                </Button>
+                <Button
+                  colorScheme="red"
+                  size="sm"
+                  onClick={() => handleDelete(eBook.id)}
+                >
+                  Sil
+                </Button>
+              </Td>
+            </Tr>
+          ))}
+        </Tbody>
+      </Table>
+    </Box>
+  );
+};
 
-export default BooksPage
\ No newline at end of file
+export default EBooks;
diff --git a/LibraryTrackingApp/src/frontend/pages/app/genre/index.jsx b/LibraryTrackingApp/src/frontend/pages/app/genre/index.jsx
index 004bbe0..fc65293 100644
--- a/LibraryTrackingApp/src/frontend/pages/app/genre/index.jsx
+++ b/LibraryTrackingApp/src/frontend/pages/app/genre/index.jsx
@@ -1,9 +1,176 @@
-import React from 'react'
+import { useState } from 'react';
+import { Box, Button, Heading, Divider, useToast, Text, VStack, Table, Thead, Tbody, Tr, Th, Td, Modal, ModalOverlay, ModalContent, ModalHeader, ModalCloseButton, ModalBody, ModalFooter, FormControl, FormLabel, Switch, Input, Flex } from '@chakra-ui/react';
+import { MdAdd, MdDeleteForever, MdEditSquare } from 'react-icons/md';
+
+const initialGenres = [
+  { id: 1, name: 'Roman', isActive: true },
+  { id: 2, name: 'Bilim Kurgu', isActive: true },
+  { id: 3, name: 'Korku', isActive: false },
+];
+
+const GenreAddForm = ({ isOpen, onClose, onSubmit }) => {
+  const [name, setName] = useState('');
+  const [isActive, setIsActive] = useState(true);
+
+  const handleSubmit = () => {
+    onSubmit({ name, isActive });
+    setName('');
+    setIsActive(true);
+    onClose();
+  };
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>Yeni Tür Ekle</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <FormControl>
+            <FormLabel htmlFor="name">Ad</FormLabel>
+            <Input
+              type="text"
+              id="name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+            />
+          </FormControl>
+          <FormControl mt={4} display="flex" alignItems="center">
+            <FormLabel htmlFor="isActive" mb={0}>Aktif</FormLabel>
+            <Switch id="isActive" colorScheme="blue" isChecked={isActive} onChange={(e) => setIsActive(e.target.checked)} />
+          </FormControl>
+        </ModalBody>
+        <ModalFooter>
+          <Button colorScheme="blue" mr={3} onClick={handleSubmit}>Ekle</Button>
+          <Button variant="ghost" onClick={onClose}>İptal</Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+const GenreEditForm = ({ genre, isOpen, onClose, onSubmit }) => {
+  const [name, setName] = useState(genre ? genre.name : '');
+  const [isActive, setIsActive] = useState(genre ? genre.isActive : true);
+
+  const handleSubmit = () => {
+    onSubmit({ id: genre.id, name, isActive });
+    onClose();
+  };
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>Türü Düzenle</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <FormControl>
+            <FormLabel htmlFor="name">Ad</FormLabel>
+            <Input
+              type="text"
+              id="name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+            />
+          </FormControl>
+          <FormControl mt={4} display="flex" alignItems="center">
+            <FormLabel htmlFor="isActive" mb={0}>Aktif</FormLabel>
+            <Switch id="isActive" colorScheme="blue" isChecked={isActive} onChange={(e) => setIsActive(e.target.checked)} />
+          </FormControl>
+        </ModalBody>
+        <ModalFooter>
+          <Button colorScheme="blue" mr={3} onClick={handleSubmit}>Kaydet</Button>
+          <Button variant="ghost" onClick={onClose}>İptal</Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+const GenreList = ({ genres, onEdit, onDelete }) => {
+  return (
+    <Table  variant="striped" >
+      <Thead>
+        <Tr>
+          <Th>Ad</Th>
+          <Th>Durum</Th>
+          <Th>İşlemler</Th>
+        </Tr>
+      </Thead>
+      <Tbody>
+        {genres.map((genre) => (
+          <Tr key={genre.id}>
+            <Td>{genre.name}</Td>
+            <Td>{genre.isActive ? 'Aktif' : 'Pasif'}</Td>
+            <Td>
+              <Flex gap={3}>
+              <Button colorScheme="blue" size="sm" variant={'outline'} leftIcon={<MdEditSquare />}  onClick={() => onEdit(genre)}>Düzenle</Button>
+              <Button colorScheme="red" size="sm"  variant={'outline'} leftIcon={<MdDeleteForever />} onClick={() => onDelete(genre.id)}>Sil</Button>
+              </Flex>
+            </Td>
+          </Tr>
+        ))}
+      </Tbody>
+    </Table>
+  );
+};
+
+const GenrePage = () => {
+  const [genres, setGenres] = useState(initialGenres);
+  const [selectedGenre, setSelectedGenre] = useState(null);
+  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
+  const [isAddModalOpen, setIsAddModalOpen] = useState(false);
+  const toast = useToast();
+
+  const handleEditGenre = (genre) => {
+    setSelectedGenre(genre);
+    setIsEditModalOpen(true);
+  };
+
+  const handleDeleteGenre = (genreId) => {
+    setGenres(genres.filter(genre => genre.id !== genreId));
+    toast({
+      title: "Tür başarıyla silindi.",
+      status: "success",
+      duration: 3000,
+      isClosable: true,
+    });
+  };
+
+  const handleUpdateGenre = ({ id, name, isActive }) => {
+    setGenres(genres.map(genre => (genre.id === id ? { ...genre, name, isActive } : genre)));
+    setSelectedGenre(null);
+    setIsEditModalOpen(false);
+    toast({
+      title: "Tür başarıyla güncellendi.",
+      status: "success",
+      duration: 3000,
+      isClosable: true,
+    });
+  };
+
+  const handleAddGenre = ({ name, isActive }) => {
+    const newGenre = { id: Date.now(), name, isActive };
+    setGenres([...genres, newGenre]);
+    setIsAddModalOpen(false);
+    toast({
+      title: "Yeni tür başarıyla eklendi.",
+      status: "success",
+      duration: 3000,
+      isClosable: true,
+    });
+  };
 
-function GenresPage() {
   return (
-    <div>GenresPage</div>
-  )
-}
+    <Box>
+      <Button colorScheme="blue" leftIcon={<MdAdd />} onClick={() => setIsAddModalOpen(true)}>Yeni Tür Ekle</Button>
+      <Divider my={4} />
+      <GenreList genres={genres} onEdit={handleEditGenre} onDelete={handleDeleteGenre} />
+      <GenreEditForm genre={selectedGenre} isOpen={isEditModalOpen} onClose={() => setIsEditModalOpen(false)} onSubmit={handleUpdateGenre} />
+      <GenreAddForm isOpen={isAddModalOpen} onClose={() => setIsAddModalOpen(false)} onSubmit={handleAddGenre} />
+    </Box>
+  );
+};
 
-export default GenresPage
\ No newline at end of file
+export default GenrePage;
diff --git a/LibraryTrackingApp/src/frontend/pages/app/genre/new.jsx b/LibraryTrackingApp/src/frontend/pages/app/genre/new.jsx
deleted file mode 100644
index 3c819de..0000000
--- a/LibraryTrackingApp/src/frontend/pages/app/genre/new.jsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react'
-
-function NewGenre() {
-  return (
-    <div>NewGenre</div>
-  )
-}
-
-export default NewGenre
\ No newline at end of file
diff --git a/LibraryTrackingApp/src/frontend/pages/app/magazines/[id].jsx b/LibraryTrackingApp/src/frontend/pages/app/magazines/[id].jsx
new file mode 100644
index 0000000..0630aff
--- /dev/null
+++ b/LibraryTrackingApp/src/frontend/pages/app/magazines/[id].jsx
@@ -0,0 +1,32 @@
+import { Box, Text, Image } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
+
+const MagazineDetail = ({ magazine }) => {
+  const router = useRouter();
+
+  if (!magazine) {
+    return <Box>Loading...</Box>;
+  }
+
+  const handleEdit = () => {
+    router.push(`/app/magazines/${magazine.id}/edit`);
+  };
+
+  return (
+    <Box>
+      <Box mb={4} display="flex" alignItems="center">
+        <Text fontSize="2xl" fontWeight="bold">{magazine.name}</Text>
+        <Box ml={2}>
+          <Button colorScheme="teal" size="sm" onClick={handleEdit}>Düzenle</Button>
+        </Box>
+      </Box>
+      <Box mb={4}>
+        <Image src={magazine.coverImage} alt={magazine.name} />
+      </Box>
+      <Text fontSize="lg">{magazine.publicationDate}</Text>
+      <Text mt={4}>{magazine.description}</Text>
+    </Box>
+  );
+};
+
+export default MagazineDetail;
diff --git a/LibraryTrackingApp/src/frontend/pages/app/magazines/index.jsx b/LibraryTrackingApp/src/frontend/pages/app/magazines/index.jsx
index feab21d..8d9ab4d 100644
--- a/LibraryTrackingApp/src/frontend/pages/app/magazines/index.jsx
+++ b/LibraryTrackingApp/src/frontend/pages/app/magazines/index.jsx
@@ -1,9 +1,75 @@
-import React from 'react'
+import MagazineEditForm from "@/components/MagazineEditForm";
+import { Box, Image, Text, VStack, Button, HStack } from "@chakra-ui/react";
+import { useState } from "react";
+
+
+const MagazineList = ({ magazines }) => {
+  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
+  const [selectedMagazine, setSelectedMagazine] = useState(null);
+
+  const handleEditClick = (magazine) => {
+    setSelectedMagazine(magazine);
+    setIsEditModalOpen(true);
+  };
+
+  const handleCloseModal = () => {
+    setSelectedMagazine(null);
+    setIsEditModalOpen(false);
+  };
+
+  const handleUpdateMagazine = (updatedMagazine) => {
+    console.log("Güncellenen dergi:", updatedMagazine);
+    setIsEditModalOpen(false);
+  };
 
-function BooksPage() {
   return (
-    <div>BooksPage</div>
-  )
+    <HStack align="start" spacing={4}>
+      {magazines.map((magazine) => (
+        <Box key={magazine.id} boxShadow="md" p={4}>
+          <Image src={magazine.coverImage} alt={magazine.name} />
+          <Text fontWeight="bold">{magazine.name}</Text>
+          <Text>{magazine.publicationDate}</Text>
+          <Button colorScheme="teal" size="sm" onClick={() => handleEditClick(magazine)}>
+            Düzenle
+          </Button>
+        </Box>
+      ))}
+      <MagazineEditForm
+        magazine={selectedMagazine}
+        isOpen={isEditModalOpen}
+        onClose={handleCloseModal}
+        onSubmit={handleUpdateMagazine}
+      />
+    </HStack>
+  );
+};
+export async function getServerSideProps() {
+  const magazines = [
+    {
+      id: 1,
+      name: "National Geographic",
+      coverImage: "https://via.placeholder.com/300x200",
+      publicationDate: "Mayıs 2024",
+    },
+    {
+      id: 2,
+      name: "Time",
+      coverImage: "https://via.placeholder.com/300x200",
+      publicationDate: "Nisan 2024",
+    },
+    {
+      id: 3,
+      name: "Vogue",
+      coverImage: "https://via.placeholder.com/300x200",
+      publicationDate: "Mart 2024",
+    },
+  ];
+
+  return {
+    props: {
+      magazines,
+    },
+  };
 }
 
-export default BooksPage
\ No newline at end of file
+export default MagazineList;
diff --git a/LibraryTrackingApp/src/frontend/pages/app/magazines/new.jsx b/LibraryTrackingApp/src/frontend/pages/app/magazines/new.jsx
new file mode 100644
index 0000000..a405794
--- /dev/null
+++ b/LibraryTrackingApp/src/frontend/pages/app/magazines/new.jsx
@@ -0,0 +1,53 @@
+import { useState } from 'react';
+import { Box, Button, FormControl, FormLabel, Input, Text } from '@chakra-ui/react';
+
+const MagazineForm = ({ onAdd }) => {
+  const [name, setName] = useState('');
+  const [publicationDate, setPublicationDate] = useState('');
+  const [coverImage, setCoverImage] = useState(null);
+  const [error, setError] = useState('');
+
+  const handleAddMagazine = () => {
+    if (!name || !publicationDate || !coverImage) {
+      setError('Lütfen tüm alanları doldurun.');
+      return;
+    }
+    onAdd({ name, publicationDate, coverImage });
+    setName('');
+    setPublicationDate('');
+    setCoverImage(null);
+    setError('');
+  };
+
+  const handleFileChange = (e) => {
+    const selectedFile = e.target.files[0];
+    if (selectedFile) {
+      setCoverImage(selectedFile);
+      setError('');
+    } else {
+      setCoverImage(null);
+      setError('Lütfen bir dosya seçin.');
+    }
+  };
+
+  return (
+    <Box>
+      <FormControl>
+        <FormLabel htmlFor="name">Dergi Adı</FormLabel>
+        <Input type="text" id="name" value={name} onChange={(e) => setName(e.target.value)} />
+      </FormControl>
+      <FormControl mt={4}>
+        <FormLabel htmlFor="publicationDate">Yayın Tarihi</FormLabel>
+        <Input type="date" id="publicationDate" value={publicationDate} onChange={(e) => setPublicationDate(e.target.value)} />
+      </FormControl>
+      <FormControl mt={4}>
+        <FormLabel htmlFor="coverImage">Kapak Fotoğrafı</FormLabel>
+        <Input type="file" id="coverImage" onChange={handleFileChange} />
+      </FormControl>
+      {error && <Text color="red.500">{error}</Text>}
+      <Button mt={4} colorScheme="blue" onClick={handleAddMagazine}>Ekle</Button>
+    </Box>
+  );
+};
+
+export default MagazineForm;
diff --git a/LibraryTrackingApp/src/frontend/pages/app/printed-books/[id].jsx b/LibraryTrackingApp/src/frontend/pages/app/printed-books/[id].jsx
new file mode 100644
index 0000000..50f3b96
--- /dev/null
+++ b/LibraryTrackingApp/src/frontend/pages/app/printed-books/[id].jsx
@@ -0,0 +1,19 @@
+import React from "react";
+import { useRouter } from "next/router";
+import { Flex, Heading, Text } from "@chakra-ui/react";
+
+const BookDetailPage = () => {
+  const router = useRouter();
+  const { id } = router.query; // URL'den alınan dinamik parametre değeri
+
+  // Dinamik olarak alınan kitap ID'sine göre ilgili kitabın verilerini getirme (örneğin, API çağrısı veya veritabanı sorgusu)
+
+  return (
+    <Flex direction="column" p={4}>
+      <Heading mb={4}>Kitap Detayı</Heading>
+      <Text>ID: {id}</Text>
+    </Flex>
+  );
+};
+
+export default BookDetailPage;
diff --git a/LibraryTrackingApp/src/frontend/pages/app/printed-books/index.jsx b/LibraryTrackingApp/src/frontend/pages/app/printed-books/index.jsx
index feab21d..ef667c5 100644
--- a/LibraryTrackingApp/src/frontend/pages/app/printed-books/index.jsx
+++ b/LibraryTrackingApp/src/frontend/pages/app/printed-books/index.jsx
@@ -1,9 +1,156 @@
-import React from 'react'
+import React, { useState } from "react";
+import {
+  Flex,
+  Heading,
+  Button,
+  Table,
+  Thead,
+  Tbody,
+  Tr,
+  Th,
+  Td,
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalCloseButton,
+  ModalBody,
+  ModalFooter,
+  FormControl,
+  FormLabel,
+  Input,
+  Textarea,
+} from "@chakra-ui/react";
+import { MdAdd } from "react-icons/md";
+
+const PrintedBooksPage = () => {
+  const [books, setBooks] = useState([
+    {
+      id: 1,
+      title: "Harry Potter and the Philosopher's Stone",
+      author: "J.K. Rowling",
+      publisher: "Bloomsbury",
+      publishedDate: "1997-06-26",
+    },
+    {
+      id: 2,
+      title: "To Kill a Mockingbird",
+      author: "Harper Lee",
+      publisher: "J.B. Lippincott & Co.",
+      publishedDate: "1960-07-11",
+    },
+    // Diğer kitaplar...
+  ]);
+
+  const [isOpen, setIsOpen] = useState(false);
+  const [formData, setFormData] = useState({
+    id: "",
+    title: "",
+    author: "",
+    publisher: "",
+    publishedDate: "",
+  });
+
+  const handleEditClick = (book) => {
+    setIsOpen(true);
+    setFormData(book);
+  };
+
+  const handleCloseModal = () => {
+    setIsOpen(false);
+    setFormData({
+      id: "",
+      title: "",
+      author: "",
+      publisher: "",
+      publishedDate: "",
+    });
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Form verilerini işleme veya güncelleme işlemi burada yapılacak
+    // Örneğin: setBooks ile kitap listesini güncelleme
+    setIsOpen(false);
+    setFormData({
+      id: "",
+      title: "",
+      author: "",
+      publisher: "",
+      publishedDate: "",
+    });
+  };
 
-function BooksPage() {
   return (
-    <div>BooksPage</div>
-  )
-}
+    <Flex direction="column" p={4}>
+      <Button
+        onClick={() => setIsOpen(true)}
+        leftIcon={<MdAdd />}
+        colorScheme="blue"
+        mb={4}
+      >
+        Yeni Kitap Ekle
+      </Button>
+      <Table variant="striped" colorScheme="blue">
+        <Thead>
+          <Tr>
+            <Th>Sıra</Th>
+            <Th>Kitap Adı</Th>
+            <Th>Yazar</Th>
+            <Th>Yayınevi</Th>
+            <Th>Yayın Tarihi</Th>
+            <Th>İşlemler</Th>
+          </Tr>
+        </Thead>
+        <Tbody>
+          {books.map((book, index) => (
+            <Tr key={book.id}>
+              <Td>{index + 1}</Td>
+              <Td>{book.title}</Td>
+              <Td>{book.author}</Td>
+              <Td>{book.publisher}</Td>
+              <Td>{book.publishedDate}</Td>
+              <Td>
+                <Button colorScheme="teal" size="sm" onClick={() => handleEditClick(book)}>
+                  Düzenle
+                </Button>
+                {/* Silme butonu ekleme */}
+              </Td>
+            </Tr>
+          ))}
+        </Tbody>
+      </Table>
+
+      <Modal isOpen={isOpen} onClose={handleCloseModal}>
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader>Kitap Düzenle</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody>
+            <form onSubmit={handleSubmit}>
+              <FormControl id="title">
+                <FormLabel>Kitap Adı</FormLabel>
+                <Input
+                  type="text"
+                  value={formData.title}
+                  onChange={(e) => setFormData({ ...formData, title: e.target.value })}
+                />
+              </FormControl>
+              {/* Diğer form alanları eklenebilir */}
+            </form>
+          </ModalBody>
+          <ModalFooter>
+            <Button colorScheme="teal" mr={3} onClick={handleSubmit}>
+              Kaydet
+            </Button>
+            <Button variant="ghost" onClick={handleCloseModal}>
+              İptal
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </Flex>
+  );
+};
 
-export default BooksPage
\ No newline at end of file
+export default PrintedBooksPage;
diff --git a/LibraryTrackingApp/src/frontend/pages/app/printed-books/new.jsx b/LibraryTrackingApp/src/frontend/pages/app/printed-books/new.jsx
new file mode 100644
index 0000000..c7cd78c
--- /dev/null
+++ b/LibraryTrackingApp/src/frontend/pages/app/printed-books/new.jsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+function NewPrintedBookPage() {
+  return (
+    <div>NewPrintedBookPage</div>
+  )
+}
+
+export default NewPrintedBookPage
\ No newline at end of file
diff --git a/LibraryTrackingApp/src/frontend/pages/app/thesis/index.jsx b/LibraryTrackingApp/src/frontend/pages/app/thesis/index.jsx
index feab21d..69b861e 100644
--- a/LibraryTrackingApp/src/frontend/pages/app/thesis/index.jsx
+++ b/LibraryTrackingApp/src/frontend/pages/app/thesis/index.jsx
@@ -1,9 +1,9 @@
 import React from 'react'
 
-function BooksPage() {
+function ThesisPage() {
   return (
-    <div>BooksPage</div>
+    <div>ThesisPage</div>
   )
 }
 
-export default BooksPage
\ No newline at end of file
+export default ThesisPage
\ No newline at end of file
diff --git a/LibraryTrackingApp/src/frontend/public/pdf-dummy.pdf b/LibraryTrackingApp/src/frontend/public/pdf-dummy.pdf
new file mode 100644
index 0000000..774c2ea
Binary files /dev/null and b/LibraryTrackingApp/src/frontend/public/pdf-dummy.pdf differ