diff --git a/client/index.html b/client/index.html
index 6311226..e1c5937 100644
--- a/client/index.html
+++ b/client/index.html
@@ -1,60 +1,69 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
       href="https://fonts.googleapis.com/css2?family=Kodchasan:ital,wght@1,600&display=swap"
       rel="stylesheet"
     />
-  <link rel="icon" type="image/svg+xml" href="/public/favicon.ico" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <meta name="description" content="MyLibrary is a modern library management web app." />
-  <meta property="og:title" content="MyLibrary" />
-  <meta property="og:description" content="MyLibrary is a modern library management web app." />
-  <meta property="og:image" content="https://github.com/suryanshsingh2001/MyLibrary/blob/main/auth0icon.jpg?raw=true" /> <!-- Replace with the actual image URL -->
-  <meta property="og:url" content="https://mylibrary01.vercel.app/" /> <!-- Replace with your live link -->
-  <meta name="twitter:card" content="summary_large_image" />
-  <title>MyLibrary</title>
-  <style>
-    /* Add your loading animation here */
-    .spinner {
-      position: fixed;
-      top: 50%;
-      left: 50%;
-      margin-top: -5em;
-      /* Half of the spinner size */
-      margin-left: -5em;
-      /* Half of the spinner size */
-      width: 10em;
-      /* Adjust the spinner size as needed */
-      height: 10em;
-      /* Adjust the spinner size as needed */
-      background-size: 10em 10em;
-      /* Adjust the spinner size as needed */
-      background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjI2NnB4IiBoZWlnaHQ9IjI5N3B4IiB2aWV3Qm94PSIwIDAgMjY2IDI5NyIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWxuczpza2V0Y2g9Imh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaC9ucyI+CiAgICA8dGl0bGU+c3Bpbm5lcjwvdGl0bGU+CiAgICA8ZGVzY3JpcHRpb24+Q3JlYXRlZCB3aXRoIFNrZXRjaCAoaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoKTwvZGVzY3JpcHRpb24+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBza2V0Y2g6dHlwZT0iTVNQYWdlIj4KICAgICAgICA8cGF0aCBkPSJNMTcxLjUwNzgxMywzLjI1MDAwMDM4IEMyMjYuMjA4MTgzLDEyLjg1NzcxMTEgMjk3LjExMjcyMiw3MS40OTEyODIzIDI1MC44OTU1OTksMTA4LjQxMDE1NSBDMjE2LjU4MjAyNCwxMzUuODIwMzEgMTg2LjUyODQwNSw5Ny4wNjI0OTY0IDE1Ni44MDA3NzQsODUuNzczNDM0NiBDMTI3LjA3MzE0Myw3NC40ODQzNzIxIDc2Ljg4ODQ2MzIsODQuMjE2MTQ2MiA2MC4xMjg5MDY1LDEwOC40MTAxNTMgQy0xNS45ODA0Njg1LDIxOC4yODEyNDcgMTQ1LjI3NzM0NCwyOTYuNjY3OTY4IDE0NS4yNzczNDQsMjk2LjY2Nzk2OCBDMTQ1LjI3NzM0NCwyOTYuNjY3OTY4IC0yNS40NDkyMTg3LDI1Ny4yNDIxOTggMy4zOTg0Mzc1LDEwOC40MTAxNTUgQzE2LjMwNzA2NjEsNDEuODExNDE3NCA4NC43Mjc1ODI5LC0xMS45OTIyOTg1IDE3MS41MDc4MTMsMy4yNTAwMDAzOCBaIiBpZD0iUGF0aC0xIiBmaWxsPSIjMDAwMDAwIiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIj48L3BhdGg+CiAgICA8L2c+Cjwvc3ZnPg==);
-      animation: rotateBefore 1000ms infinite linear reverse;
-    }
-
-    @keyframes rotateBefore {
-      from {
-        transform: rotateX(60deg) rotateY(45deg) rotateZ(0deg);
+    <link rel="icon" type="image/x-icon" href="/favicon_io/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="description"
+      content="MyLibrary is a modern library management web app."
+    />
+    <meta property="og:title" content="MyLibrary" />
+    <meta
+      property="og:description"
+      content="MyLibrary is a modern library management web app."
+    />
+    <meta
+      property="og:image"
+      content="https://github.com/suryanshsingh2001/MyLibrary/blob/main/auth0icon.jpg?raw=true"
+    />
+    <!-- Replace with the actual image URL -->
+    <meta property="og:url" content="https://mylibrary01.vercel.app/" />
+    <!-- Replace with your live link -->
+    <meta name="twitter:card" content="summary_large_image" />
+    <title>MyLibrary</title>
+    <style>
+      /* Add your loading animation here */
+      .spinner {
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        margin-top: -5em;
+        /* Half of the spinner size */
+        margin-left: -5em;
+        /* Half of the spinner size */
+        width: 10em;
+        /* Adjust the spinner size as needed */
+        height: 10em;
+        /* Adjust the spinner size as needed */
+        background-size: 10em 10em;
+        /* Adjust the spinner size as needed */
+        background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjI2NnB4IiBoZWlnaHQ9IjI5N3B4IiB2aWV3Qm94PSIwIDAgMjY2IDI5NyIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWxuczpza2V0Y2g9Imh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaC9ucyI+CiAgICA8dGl0bGU+c3Bpbm5lcjwvdGl0bGU+CiAgICA8ZGVzY3JpcHRpb24+Q3JlYXRlZCB3aXRoIFNrZXRjaCAoaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoKTwvZGVzY3JpcHRpb24+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBza2V0Y2g6dHlwZT0iTVNQYWdlIj4KICAgICAgICA8cGF0aCBkPSJNMTcxLjUwNzgxMywzLjI1MDAwMDM4IEMyMjYuMjA4MTgzLDEyLjg1NzcxMTEgMjk3LjExMjcyMiw3MS40OTEyODIzIDI1MC44OTU1OTksMTA4LjQxMDE1NSBDMjE2LjU4MjAyNCwxMzUuODIwMzEgMTg2LjUyODQwNSw5Ny4wNjI0OTY0IDE1Ni44MDA3NzQsODUuNzczNDM0NiBDMTI3LjA3MzE0Myw3NC40ODQzNzIxIDc2Ljg4ODQ2MzIsODQuMjE2MTQ2MiA2MC4xMjg5MDY1LDEwOC40MTAxNTMgQy0xNS45ODA0Njg1LDIxOC4yODEyNDcgMTQ1LjI3NzM0NCwyOTYuNjY3OTY4IDE0NS4yNzczNDQsMjk2LjY2Nzk2OCBDMTQ1LjI3NzM0NCwyOTYuNjY3OTY4IC0yNS40NDkyMTg3LDI1Ny4yNDIxOTggMy4zOTg0Mzc1LDEwOC40MTAxNTUgQzE2LjMwNzA2NjEsNDEuODExNDE3NCA4NC43Mjc1ODI5LC0xMS45OTIyOTg1IDE3MS41MDc4MTMsMy4yNTAwMDAzOCBaIiBpZD0iUGF0aC0xIiBmaWxsPSIjMDAwMDAwIiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIj48L3BhdGg+CiAgICA8L2c+Cjwvc3ZnPg==);
+        animation: rotateBefore 1000ms infinite linear reverse;
       }
 
-      to {
-        transform: rotateX(60deg) rotateY(45deg) rotateZ(-360deg);
-      }
-    }
-  </style>
-</head>
+      @keyframes rotateBefore {
+        from {
+          transform: rotateX(60deg) rotateY(45deg) rotateZ(0deg);
+        }
 
-<body>
-  <div id="root">
-    <div class="spinner"></div>
-  </div>
-  <script type="module" src="/src/main.jsx"></script>
-</body>
+        to {
+          transform: rotateX(60deg) rotateY(45deg) rotateZ(-360deg);
+        }
+      }
+    </style>
+  </head>
 
-</html>
\ No newline at end of file
+  <body>
+    <div id="root">
+      <div class="spinner"></div>
+    </div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/client/public/favicon_io/about.txt b/client/public/favicon_io/about.txt
new file mode 100644
index 0000000..e4a6d67
--- /dev/null
+++ b/client/public/favicon_io/about.txt
@@ -0,0 +1,6 @@
+This favicon was generated using the following font:
+
+- Font Title: Lalezar
+- Font Author: Copyright 2015 by Borna Izadpanah (www.borna.design). All rights reserved. 
+- Font Source: http://fonts.gstatic.com/s/lalezar/v14/zrfl0HLVx-HwTP82UaDyIiL0RCg.ttf
+- Font License: SIL Open Font License, 1.1 (http://scripts.sil.org/OFL))
diff --git a/client/public/favicon_io/android-chrome-192x192.png b/client/public/favicon_io/android-chrome-192x192.png
new file mode 100644
index 0000000..825c320
Binary files /dev/null and b/client/public/favicon_io/android-chrome-192x192.png differ
diff --git a/client/public/favicon_io/android-chrome-512x512.png b/client/public/favicon_io/android-chrome-512x512.png
new file mode 100644
index 0000000..da43c2a
Binary files /dev/null and b/client/public/favicon_io/android-chrome-512x512.png differ
diff --git a/client/public/favicon_io/apple-touch-icon.png b/client/public/favicon_io/apple-touch-icon.png
new file mode 100644
index 0000000..66e34ac
Binary files /dev/null and b/client/public/favicon_io/apple-touch-icon.png differ
diff --git a/client/public/favicon_io/favicon-16x16.png b/client/public/favicon_io/favicon-16x16.png
new file mode 100644
index 0000000..42af827
Binary files /dev/null and b/client/public/favicon_io/favicon-16x16.png differ
diff --git a/client/public/favicon_io/favicon-32x32.png b/client/public/favicon_io/favicon-32x32.png
new file mode 100644
index 0000000..3e4a3ea
Binary files /dev/null and b/client/public/favicon_io/favicon-32x32.png differ
diff --git a/client/public/favicon_io/favicon.ico b/client/public/favicon_io/favicon.ico
new file mode 100644
index 0000000..b5909c5
Binary files /dev/null and b/client/public/favicon_io/favicon.ico differ
diff --git a/client/public/favicon_io/site.webmanifest b/client/public/favicon_io/site.webmanifest
new file mode 100644
index 0000000..45dc8a2
--- /dev/null
+++ b/client/public/favicon_io/site.webmanifest
@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
\ No newline at end of file
