diff --git a/components/AccountSettingPage/index.jsx b/components/AccountSettingPage/index.jsx
deleted file mode 100644
index 7b0ff58..0000000
--- a/components/AccountSettingPage/index.jsx
+++ /dev/null
@@ -1,16 +0,0 @@
-// import React, { useState } from "react";
-// import AccountSettings from "../modules/AccountSettings";
-// import PageCard from "../modules/__modules__/Card/PageCard";
-
-// const AccountSettingsPage = () => {
-//   const [isTopNav, setIsTopNav] = useState(false);
-//   return (
-//     <div className="bg-globalBg h-screen mobile:h-fit">
-//       <PageCard setIsTopNav={setIsTopNav}>
-//         <AccountSettings isTopNav={isTopNav} />
-//       </PageCard>
-//     </div>
-//   );
-// };
-
-// export default AccountSettingsPage;
diff --git a/components/AccountSettingPage/index.tsx b/components/AccountSettingPage/index.tsx
new file mode 100644
index 0000000..43ea3d0
--- /dev/null
+++ b/components/AccountSettingPage/index.tsx
@@ -0,0 +1,16 @@
+import React, { useState } from "react";
+import AccountSettings from "../modules/AccountSettings";
+import PageCard from "../modules/__modules__/Card/PageCard";
+
+const AccountSettingsPage = () => {
+  const [isTopNav, setIsTopNav] = useState(false);
+  return (
+    <div className="bg-globalBg h-screen mobile:h-fit">
+      <PageCard setIsTopNav={setIsTopNav}>
+        <AccountSettings isTopNav={isTopNav} />
+      </PageCard>
+    </div>
+  );
+};
+
+export default AccountSettingsPage;
diff --git a/components/BottomPaler/BottomPalyer.jsx b/components/BottomPaler/BottomPalyer.jsx
deleted file mode 100644
index 07ca10a..0000000
--- a/components/BottomPaler/BottomPalyer.jsx
+++ /dev/null
@@ -1,101 +0,0 @@
-// import React from "react";
-// import {
-//   LoopIcon,
-//   PlayListIcon,
-//   ShuffleIcon,
-//   VolumeDownIcon,
-//   VolumeUpIcon,
-// } from "../modules/__modules/Vectors";
-// import { VNext, VPlay, VPrev } from "../modules/__modules__/_Vectors";
-// import Slider from "@mui/material/Slider";
-// import PropTypes from "prop-types";
-
-// const BottomPlayer = ({ isFixed = true }) => {
-//   return (
-//     <div
-//       className={`z-20 w-full ${
-//         isFixed
-//           ? "fixed justify-between bg-gray-700 "
-//           : "absolute justify-center items-center"
-//       } bottom-0 pb-2 pt-3 px-6 md:px-8 flex flex-col md:flex-row items-center h-28 md:h-20 opacity-90`}
-//     >
-//       <div
-//         className={`${
-//           isFixed ? "w-full md:w-3/6 lg:w-2/6 flex box" : "hidden"
-//         }`}
-//       >
-//         {isFixed && (
-//           <div className={`w-4/6 gap-2 flex`}>
-//             <img
-//               src="https://templates.iqonic.design/muzik/html/images/dashboard/hot-songs/04.png"
-//               alt="Keith"
-//               className="w-14 md:w-14 md:h-14 rounded-lg"
-//             />
-//             <div className="text-lg font-semibold text-gray-300 capitalize">
-//               <h1>Tell me u luv me</h1>
-//               <p className="text-base font-medium">Keith Urban</p>
-//             </div>
-//           </div>
-//         )}
-//         <div className="md:hidden w-2/6 flex gap-2 m-auto">
-//           <VPrev className="w-8 h-8 cursor-pointer text-gray-200" />
-//           <VPlay className="w-8 h-8 cursor-pointer text-gray-200" />
-//           <VNext className="w-8 h-8 cursor-pointer text-gray-200" />
-//         </div>
-//       </div>
-
-//       <div
-//         className={`${
-//           isFixed
-//             ? "md:3/6 lg-4/6 mg:gap-6 justify-between"
-//             : "w-full justify-center"
-//         } flex flex-col md:flex-row items-center`}
-//       >
-//         <div className="flex justify-center items-center gap-2">
-//           <span className="text-gray-200 text-base font-medium">00:00</span>
-//           <Slider
-//             className={`${
-//               isFixed ? "w-60 md:w-28 lg:w-40" : "w-20"
-//             } mx-1 text-primary`}
-//           />
-//           <span className="text-gray-200 text-base font-medium">00:00</span>
-//         </div>
-//         <div className="hidden md:flex items-center justify-center gap-3 lg:gap-4 w-1/3">
-//           <ShuffleIcon
-//             className={`hidden w-6 h-6 text-primary cursor-pointer ${
-//               !isFixed ? "hidden" : "lg:inline"
-//             }`}
-//           />
-//           <VPrev className="w-10 h-10 cursor-pointer text-gray-200" />
-//           <VPlay className="w-10 h-10 cursor-pointer text-gray-200" />
-//           <VNext className="w-10 h-10 cursor-pointer text-gray-200" />
-//           <LoopIcon
-//             className={`hidden w-6 h-6 text-primary cursor-pointer ${
-//               !isFixed ? "hidden" : "lg:inline"
-//             }`}
-//           />
-//         </div>
-//         <div className="hidden lg:flex items-center justify-center gap-2 w-1/3 ">
-//           <PlayListIcon
-//             className={`w-6 h-6 text-gray-200 ${!isFixed && "hidden"}`}
-//           />
-//           <div className="flex justify-center items-center gap-1">
-//             <VolumeDownIcon className="w-6 h-6 text-gray-200" />
-//             <Slider
-//               className="w-40 mx-1 text-primary"
-//               defaultValue={50}
-//               valueLabelDisplay="auto"
-//             />
-//             <VolumeUpIcon className="w-6 h-6  text-gray-200" />
-//           </div>
-//         </div>
-//       </div>
-//     </div>
-//   );
-// };
-
-// BottomPlayer.propTypes = {
-//   isFixed: PropTypes.bool,
-// };
-
-// export default BottomPlayer;
diff --git a/components/BottomPaler/BottomPalyer.tsx b/components/BottomPaler/BottomPalyer.tsx
new file mode 100644
index 0000000..6c34d6e
--- /dev/null
+++ b/components/BottomPaler/BottomPalyer.tsx
@@ -0,0 +1,101 @@
+/* eslint-disable @next/next/no-img-element */
+import React, { FC } from "react";
+import {
+  LoopIcon,
+  PlayListIcon,
+  ShuffleIcon,
+  VolumeDownIcon,
+  VolumeUpIcon,
+} from "../modules/__modules/Vectors";
+import { VNext, VPlay, VPrev } from "../modules/__modules__/_Vectors";
+import Slider from "@mui/material/Slider";
+
+interface IProps {
+  isFixed?: boolean;
+}
+
+const BottomPlayer: FC<IProps> = ({ isFixed = true }) => {
+  return (
+    <div
+      className={`z-20 w-full ${
+        isFixed
+          ? "fixed justify-between bg-gray-700 "
+          : "absolute justify-center items-center"
+      } bottom-0 pb-2 pt-3 px-6 md:px-8 flex flex-col md:flex-row items-center h-28 md:h-20 opacity-90`}
+    >
+      <div
+        className={`${
+          isFixed ? "w-full md:w-3/6 lg:w-2/6 flex box" : "hidden"
+        }`}
+      >
+        {isFixed && (
+          <div className={`w-4/6 gap-2 flex`}>
+            <img
+              src="https://templates.iqonic.design/muzik/html/images/dashboard/hot-songs/04.png"
+              alt="Keith"
+              className="w-14 md:w-14 md:h-14 rounded-lg"
+            />
+            <div className="text-lg font-semibold text-gray-300 capitalize">
+              <h1>Tell me u luv me</h1>
+              <p className="text-base font-medium">Keith Urban</p>
+            </div>
+          </div>
+        )}
+        <div className="md:hidden w-2/6 flex gap-2 m-auto">
+          <VPrev className="w-8 h-8 cursor-pointer text-gray-200" />
+          <VPlay className="w-8 h-8 cursor-pointer text-gray-200" />
+          <VNext className="w-8 h-8 cursor-pointer text-gray-200" />
+        </div>
+      </div>
+
+      <div
+        className={`${
+          isFixed
+            ? "md:3/6 lg-4/6 mg:gap-6 justify-between"
+            : "w-full justify-center"
+        } flex flex-col md:flex-row items-center`}
+      >
+        <div className="flex justify-center items-center gap-2">
+          <span className="text-gray-200 text-base font-medium">00:00</span>
+          <Slider
+            className={`${
+              isFixed ? "w-60 md:w-28 lg:w-40" : "w-20"
+            } mx-1 text-primary`}
+          />
+          <span className="text-gray-200 text-base font-medium">00:00</span>
+        </div>
+        <div className="hidden md:flex items-center justify-center gap-3 lg:gap-4 w-1/3">
+          <ShuffleIcon
+            className={`hidden w-6 h-6 text-primary cursor-pointer ${
+              !isFixed ? "hidden" : "lg:inline"
+            }`}
+          />
+          <VPrev className="w-10 h-10 cursor-pointer text-gray-200" />
+          <VPlay className="w-10 h-10 cursor-pointer text-gray-200" />
+          <VNext className="w-10 h-10 cursor-pointer text-gray-200" />
+          <LoopIcon
+            className={`hidden w-6 h-6 text-primary cursor-pointer ${
+              !isFixed ? "hidden" : "lg:inline"
+            }`}
+          />
+        </div>
+        <div className="hidden lg:flex items-center justify-center gap-2 w-1/3 ">
+          <PlayListIcon
+            className={`w-6 h-6 text-gray-200 ${!isFixed && "hidden"}`}
+          />
+          <div className="flex justify-center items-center gap-1">
+            <VolumeDownIcon className="w-6 h-6 text-gray-200" />
+            <Slider
+              className="w-40 mx-1 text-primary"
+              defaultValue={50}
+              valueLabelDisplay="auto"
+            />
+            <VolumeUpIcon className="w-6 h-6  text-gray-200" />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default BottomPlayer;
diff --git a/components/lib/atoms/index.js b/components/lib/atoms/index.js
deleted file mode 100644
index dd79e3e..0000000
--- a/components/lib/atoms/index.js
+++ /dev/null
@@ -1,20 +0,0 @@
-// import { atom } from "recoil";
-
-// // ----------- atom with one value here ------------------------
-
-// const openMenuAtom = atom({
-//   key: "openMenuAtom",
-//   default: false,
-// });
-
-// const leftNavPinedAtom = atom({
-//   key: "leftNavPinedAtom",
-//   default: false,
-// });
-
-// const displaySettingsModalAtom = atom({
-//   key: "displaysettingsModalAtom",
-//   default: false,
-// });
-
-// export { openMenuAtom, leftNavPinedAtom, displaySettingsModalAtom };
diff --git a/components/lib/atoms/index.ts b/components/lib/atoms/index.ts
new file mode 100644
index 0000000..29aeb9d
--- /dev/null
+++ b/components/lib/atoms/index.ts
@@ -0,0 +1,20 @@
+import { atom } from "recoil";
+
+// ----------- atom with one value here ------------------------
+
+const openMenuAtom = atom<boolean>({
+  key: "openMenuAtom",
+  default: false,
+});
+
+const leftNavPinedAtom = atom<boolean>({
+  key: "leftNavPinedAtom",
+  default: false,
+});
+
+const displaySettingsModalAtom = atom<boolean>({
+  key: "displaysettingsModalAtom",
+  default: false,
+});
+
+export { openMenuAtom, leftNavPinedAtom, displaySettingsModalAtom };
diff --git a/components/modules/AccountSettings/index.jsx b/components/modules/AccountSettings/index.jsx
deleted file mode 100644
index d54b5a5..0000000
--- a/components/modules/AccountSettings/index.jsx
+++ /dev/null
@@ -1,112 +0,0 @@
-// import React from "react";
-// import PropTypes from "prop-types";
-
-// const AccountSettings = ({ isTopNav }) => {
-//   return (
-//     <div
-//       className={`mt-24 h-full flex justify-center mobile:flex-col mobile:mr-5 mobile:pb-40 transition-all ${
-//         isTopNav && "mobile:mt-40 transition-all"
-//       }`}
-//     >
-//       <div className="w-full border border-gray-200 p-10 bg-white shadow-sm rounded-md h-fit">
-//         <h3 className="text-2xl font-bold py-5 border-b border-gray-200">
-//           Account Setting
-//         </h3>
-//         <div>
-//           <div className="flex flex-col pt-4">
-//             <label htmlFor="userName" className="py-3">
-//               User name:
-//             </label>
-//             <input
-//               type="text"
-//               name="userName"
-//               placeholder="Ilunga Mbidi"
-//               className="py-2 px-3 bg-transparent border border-gray-200 outline-none focus:border-primary rounded-md transition-all"
-//             />
-//           </div>
-//           <div className="flex flex-col pt-4">
-//             <label htmlFor="email" className="py-3">
-//               Email:
-//             </label>
-//             <input
-//               type="email"
-//               name="email"
-//               placeholder="ilungambidi243@gmail.com"
-//               className="py-2 px-3 bg-transparent border border-gray-200 outline-none focus:border-primary rounded-md transition-all"
-//             />
-//           </div>
-//           <div className="flex flex-col pt-4">
-//             <label htmlFor="altarnateEmail" className="py-3">
-//               Alternate Email:
-//             </label>
-//             <input
-//               type="email"
-//               name="altarnateEmail"
-//               placeholder="ilungambidi@gmail.com"
-//               className="py-2 px-3 bg-transparent border border-gray-200 outline-none focus:border-primary rounded-md transition-all"
-//             />
-//           </div>
-//           <button className="mt-5 py-2 px-20 mobilesm:w-full rounded-md bg-primary bg-opacity-80 hover:bg-opacity-100 transition-all font-bold text-white">
-//             Submit
-//           </button>
-//         </div>
-//       </div>
-//       <div className="w-full border border-gray-200 p-10 bg-white shadow-sm rounded-md mx-5 mobile:mx-0 mobile:mt-5">
-//         <h3 className="text-2xl font-bold py-5 border-b border-gray-200">
-//           Social Media
-//         </h3>
-//         <div>
-//           <div className="flex flex-col pt-4">
-//             <label htmlFor="facebook" className="py-3">
-//               Facebook:
-//             </label>
-//             <input
-//               type="url"
-//               name="facebook"
-//               placeholder="Ilunga Mbidi"
-//               className="py-2 px-3 bg-transparent border border-gray-200 outline-none focus:border-primary rounded-md transition-all"
-//             />
-//           </div>
-//           <div className="flex flex-col pt-4 h-fit">
-//             <label htmlFor="tweeter" className="py-3">
-//               Tweeter:
-//             </label>
-//             <input
-//               type="url"
-//               name="tweeter"
-//               placeholder="https://www.tweeter/mbidi243"
-//               className="py-2 px-3 bg-transparent border border-gray-200 outline-none focus:border-primary rounded-md transition-all"
-//             />
-//           </div>
-//           <div className="flex flex-col pt-4">
-//             <label htmlFor="instagram" className="py-3">
-//               Instagram:
-//             </label>
-//             <input
-//               type="url"
-//               name="instagram"
-//               placeholder="https://www.instagram/mbidi.officiel"
-//               className="py-2 px-3 bg-transparent border border-gray-200 outline-none focus:border-primary rounded-md transition-all"
-//             />
-//           </div>
-//           <div className="flex flex-col pt-4">
-//             <label htmlFor="youtube" className="py-3">
-//               Youtube:
-//             </label>
-//             <input
-//               type="url"
-//               name="youtube"
-//               placeholder="https://www.youtube/mbidi.officiel"
-//               className="py-2 px-3 bg-transparent border border-gray-200 outline-none focus:border-primary rounded-md transition-all"
-//             />
-//           </div>
-//         </div>
-//         <button className="mt-5 py-2 px-20 rounded-md mobilesm:w-full bg-primary bg-opacity-80 hover:bg-opacity-100 transition-all font-bold text-white">
-//           Submit
-//         </button>
-//       </div>
-//     </div>
-//   );
-// };
-
-// export default AccountSettings;
diff --git a/components/modules/AccountSettings/index.tsx b/components/modules/AccountSettings/index.tsx
new file mode 100644
index 0000000..2db38df
--- /dev/null
+++ b/components/modules/AccountSettings/index.tsx
@@ -0,0 +1,115 @@
+import React, { FC } from "react";
+
+interface IProps {
+  isTopNav: boolean;
+}
+
+const AccountSettings: FC<IProps> = ({ isTopNav }) => {
+  return (
+    <div
+      className={`mt-24 h-full flex justify-center mobile:flex-col mobile:mr-5 mobile:pb-40 transition-all ${
+        isTopNav && "mobile:mt-40 transition-all"
+      }`}
+    >
+      <div className="w-full border border-gray-200 p-10 bg-white shadow-sm rounded-md h-fit">
+        <h3 className="text-2xl font-bold py-5 border-b border-gray-200">
+          Account Setting
+        </h3>
+        <div>
+          <div className="flex flex-col pt-4">
+            <label htmlFor="userName" className="py-3">
+              User name:
+            </label>
+            <input
+              type="text"
+              name="userName"
+              placeholder="Ilunga Mbidi"
+              className="py-2 px-3 bg-transparent border border-gray-200 outline-none focus:border-primary rounded-md transition-all"
+            />
+          </div>
+          <div className="flex flex-col pt-4">
+            <label htmlFor="email" className="py-3">
+              Email:
+            </label>
+            <input
+              type="email"
+              name="email"
+              placeholder="ilungambidi243@gmail.com"
+              className="py-2 px-3 bg-transparent border border-gray-200 outline-none focus:border-primary rounded-md transition-all"
+            />
+          </div>
+          <div className="flex flex-col pt-4">
+            <label htmlFor="altarnateEmail" className="py-3">
+              Alternate Email:
+            </label>
+            <input
+              type="email"
+              name="altarnateEmail"
+              placeholder="ilungambidi@gmail.com"
+              className="py-2 px-3 bg-transparent border border-gray-200 outline-none focus:border-primary rounded-md transition-all"
+            />
+          </div>
+          <button className="mt-5 py-2 px-20 mobilesm:w-full rounded-md bg-primary bg-opacity-80 hover:bg-opacity-100 transition-all font-bold text-white">
+            Submit
+          </button>
+        </div>
+      </div>
+      <div className="w-full border border-gray-200 p-10 bg-white shadow-sm rounded-md mx-5 mobile:mx-0 mobile:mt-5">
+        <h3 className="text-2xl font-bold py-5 border-b border-gray-200">
+          Social Media
+        </h3>
+        <div>
+          <div className="flex flex-col pt-4">
+            <label htmlFor="facebook" className="py-3">
+              Facebook:
+            </label>
+            <input
+              type="url"
+              name="facebook"
+              placeholder="Ilunga Mbidi"
+              className="py-2 px-3 bg-transparent border border-gray-200 outline-none focus:border-primary rounded-md transition-all"
+            />
+          </div>
+          <div className="flex flex-col pt-4 h-fit">
+            <label htmlFor="tweeter" className="py-3">
+              Tweeter:
+            </label>
+            <input
+              type="url"
+              name="tweeter"
+              placeholder="https://www.tweeter/mbidi243"
+              className="py-2 px-3 bg-transparent border border-gray-200 outline-none focus:border-primary rounded-md transition-all"
+            />
+          </div>
+          <div className="flex flex-col pt-4">
+            <label htmlFor="instagram" className="py-3">
+              Instagram:
+            </label>
+            <input
+              type="url"
+              name="instagram"
+              placeholder="https://www.instagram/mbidi.officiel"
+              className="py-2 px-3 bg-transparent border border-gray-200 outline-none focus:border-primary rounded-md transition-all"
+            />
+          </div>
+          <div className="flex flex-col pt-4">
+            <label htmlFor="youtube" className="py-3">
+              Youtube:
+            </label>
+            <input
+              type="url"
+              name="youtube"
+              placeholder="https://www.youtube/mbidi.officiel"
+              className="py-2 px-3 bg-transparent border border-gray-200 outline-none focus:border-primary rounded-md transition-all"
+            />
+          </div>
+        </div>
+        <button className="mt-5 py-2 px-20 rounded-md mobilesm:w-full bg-primary bg-opacity-80 hover:bg-opacity-100 transition-all font-bold text-white">
+          Submit
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default AccountSettings;
diff --git a/components/modules/NavBar/LeftNav/AdminMenu/AdminSubmenu/index.jsx b/components/modules/NavBar/LeftNav/AdminMenu/AdminSubmenu/index.jsx
deleted file mode 100644
index ff49db8..0000000
--- a/components/modules/NavBar/LeftNav/AdminMenu/AdminSubmenu/index.jsx
+++ /dev/null
@@ -1,48 +0,0 @@
-// import Link from "next/link";
-// import React from "react";
-// import {
-//   CategoryIcon,
-//   MicIcon,
-//   PlayCircleIcon,
-//   HomeSubMenuIcon,
-// } from "../../../../__modules/Vectors";
-
-// const AdminSubmenu = () => {
-//   return (
-//     <ul className="flex flex-col ml-5 py-5">
-//       <Link href="/admin/dashboard">
-//         <li className="px-5 flex items-center hover:text-primary transition-all cursor-pointer text-primary">
-//           <span className="p-2 bg-gray-200 mx-1 rounded-lg font-poppins">
-//             <HomeSubMenuIcon />
-//           </span>
-//           DashBoard
-//         </li>
-//       </Link>
-//       <Link href="/admin/category">
-//         <li className="px-5 flex items-center py-2 hover:text-primary transition-all cursor-pointer">
-//           <span className="p-2 bg-gray-200 mx-1 rounded-lg">
-//             <CategoryIcon />
-//           </span>
-//           Category
-//         </li>
-//       </Link>
-//       <Link href="/admin/singerlist">
-//         <li className="px-5 flex items-center py-2 hover:text-primary transition-all cursor-pointer">
-//           <span className="p-2 bg-gray-200 mx-1 rounded-lg">
-//             <MicIcon />
-//           </span>
-//           Singer
-//         </li>
-//       </Link>
-
-//       <li className="px-5 flex items-center py-2 hover:text-primary transition-all cursor-pointer">
-//         <span className="p-2 bg-gray-200 mx-1 rounded-lg">
-//           <PlayCircleIcon />
-//         </span>
-//         Songs
-//       </li>
-//     </ul>
-//   );
-// };
-
-// export default AdminSubmenu;
diff --git a/components/modules/NavBar/LeftNav/AdminMenu/AdminSubmenu/index.tsx b/components/modules/NavBar/LeftNav/AdminMenu/AdminSubmenu/index.tsx
new file mode 100644
index 0000000..758bb20
--- /dev/null
+++ b/components/modules/NavBar/LeftNav/AdminMenu/AdminSubmenu/index.tsx
@@ -0,0 +1,48 @@
+import Link from "next/link";
+import React from "react";
+import {
+  CategoryIcon,
+  MicIcon,
+  PlayCircleIcon,
+  HomeSubMenuIcon,
+} from "../../../../__modules/Vectors";
+
+const AdminSubmenu = () => {
+  return (
+    <ul className="flex flex-col ml-5 py-5">
+      <Link href="/admin/dashboard">
+        <li className="px-5 flex items-center hover:text-primary transition-all cursor-pointer text-primary">
+          <span className="p-2 bg-gray-200 mx-1 rounded-lg font-poppins">
+            <HomeSubMenuIcon />
+          </span>
+          DashBoard
+        </li>
+      </Link>
+      <Link href="/admin/category">
+        <li className="px-5 flex items-center py-2 hover:text-primary transition-all cursor-pointer">
+          <span className="p-2 bg-gray-200 mx-1 rounded-lg">
+            <CategoryIcon />
+          </span>
+          Category
+        </li>
+      </Link>
+      <Link href="/admin/singerlist">
+        <li className="px-5 flex items-center py-2 hover:text-primary transition-all cursor-pointer">
+          <span className="p-2 bg-gray-200 mx-1 rounded-lg">
+            <MicIcon />
+          </span>
+          Singer
+        </li>
+      </Link>
+
+      <li className="px-5 flex items-center py-2 hover:text-primary transition-all cursor-pointer">
+        <span className="p-2 bg-gray-200 mx-1 rounded-lg">
+          <PlayCircleIcon />
+        </span>
+        Songs
+      </li>
+    </ul>
+  );
+};
+
+export default AdminSubmenu;
diff --git a/components/modules/NavBar/LeftNav/AdminMenu/index.jsx b/components/modules/NavBar/LeftNav/AdminMenu/index.jsx
deleted file mode 100644
index fe59a73..0000000
--- a/components/modules/NavBar/LeftNav/AdminMenu/index.jsx
+++ /dev/null
@@ -1,40 +0,0 @@
-// import React from "react";
-// import { AdminIcon, ChevronRightIcon } from "../../../__modules/Vectors";
-// import AdminSubmenu from "./AdminSubmenu";
-// import PropTypes from "prop-types";
-
-// const AdminMenu = ({ isAdminSubmenu, toggleSubmenu }) => {
-//   return (
-//     <div className="py-5">
-//       <div
-//         className={`flex items-center px-3 border-r-2 ${
-//           isAdminSubmenu && "border-primary text-primary"
-//         }`}
-//       >
-//         <AdminIcon />
-//         <div className="flex items-center justify-between w-56">
-//           <p className="px-2">Admin</p>
-//           <button onClick={() => toggleSubmenu("admin")}>
-//             <ChevronRightIcon
-//               className={`${isAdminSubmenu && "rotate-90"} transition-all`}
-//             />
-//           </button>
-//         </div>
-//       </div>
-//       <div
-//         className={`${
-//           isAdminSubmenu ? "max-h-fit" : "max-h-0 overflow-hidden"
-//         } transition-all overflow-y-auto`}
-//       >
-//         <AdminSubmenu />
-//       </div>
-//     </div>
-//   );
-// };
-
-// AdminMenu.propTypes = {
-//   isAdminSubmenu: PropTypes.bool.isRequired,
-//   toggleSubmenu: PropTypes.func.isRequired,
-// };
-
-// export default AdminMenu;
diff --git a/components/modules/NavBar/LeftNav/AdminMenu/index.tsx b/components/modules/NavBar/LeftNav/AdminMenu/index.tsx
new file mode 100644
index 0000000..a2d849b
--- /dev/null
+++ b/components/modules/NavBar/LeftNav/AdminMenu/index.tsx
@@ -0,0 +1,39 @@
+import React, { FC } from "react";
+import { AdminIcon, ChevronRightIcon } from "../../../__modules/Vectors";
+import AdminSubmenu from "./AdminSubmenu";
+
+interface IProps {
+  isAdminSubmenu: boolean;
+  toggleSubmenu: (menuType: string) => void;
+}
+
+const AdminMenu: FC<IProps> = ({ isAdminSubmenu, toggleSubmenu }) => {
+  return (
+    <div className="py-5">
+      <div
+        className={`flex items-center px-3 border-r-2 ${
+          isAdminSubmenu && "border-primary text-primary"
+        }`}
+      >
+        <AdminIcon />
+        <div className="flex items-center justify-between w-56">
+          <p className="px-2">Admin</p>
+          <button onClick={() => toggleSubmenu("admin")}>
+            <ChevronRightIcon
+              className={`${isAdminSubmenu && "rotate-90"} transition-all`}
+            />
+          </button>
+        </div>
+      </div>
+      <div
+        className={`${
+          isAdminSubmenu ? "max-h-fit" : "max-h-0 overflow-hidden"
+        } transition-all overflow-y-auto`}
+      >
+        <AdminSubmenu />
+      </div>
+    </div>
+  );
+};
+
+export default AdminMenu;
diff --git a/components/modules/NavBar/LeftNav/DashBoard/DashboardMenu/index.jsx b/components/modules/NavBar/LeftNav/DashBoard/DashboardMenu/index.jsx
deleted file mode 100644
index cc9fc5c..0000000
--- a/components/modules/NavBar/LeftNav/DashBoard/DashboardMenu/index.jsx
+++ /dev/null
@@ -1,62 +0,0 @@
-// import React from "react";
-// import PropTypes from "prop-types";
-// import {
-//   HomeSubMenuIcon,
-//   HeadPhonesIcon,
-//   FileMusicIcon,
-//   ArrowExpendUpRighIcon,
-//   DownLoadOutlineIcon,
-//   FilePlusIcon,
-//   FavoriteIcon,
-// } from "../../../../__modules/Vectors";
-
-// const DashboardMenu = () => {
-//   return (
-//     <ul className="flex flex-col ml-5 py-5">
-//       <li className="px-5 flex items-center hover:text-primary transition-all cursor-pointer text-primary">
-//         <span className="p-2 bg-gray-200 mx-1 rounded-lg font-poppins">
-//           <HomeSubMenuIcon />
-//         </span>
-//         Home
-//       </li>
-//       <li className="px-5 flex items-center py-2 hover:text-primary transition-all cursor-pointer">
-//         <span className="p-2 bg-gray-200 mx-1 rounded-lg">
-//           <HeadPhonesIcon />
-//         </span>
-//         Latest
-//       </li>
-//       <li className="px-5 flex items-center py-2 hover:text-primary transition-all cursor-pointer">
-//         <span className="p-2 bg-gray-200 mx-1 rounded-lg">
-//           <FileMusicIcon />
-//         </span>
-//         Album
-//       </li>
-//       <li className="px-5 flex items-center py-2 hover:text-primary transition-all cursor-pointer">
-//         <span className="p-2 bg-gray-200 mx-1 rounded-lg">
-//           <ArrowExpendUpRighIcon />
-//         </span>
-//         Trending
-//       </li>
-//       <li className="px-5 flex items-center py-2 hover:text-primary transition-all cursor-pointer">
-//         <span className="p-2 bg-gray-200 mx-1 rounded-lg">
-//           <DownLoadOutlineIcon />
-//         </span>
-//         Streaming
-//       </li>
-//       <li className="px-5 flex items-center py-2 hover:text-primary transition-all cursor-pointer">
-//         <span className="p-2 bg-gray-200 mx-1 rounded-lg">
-//           <FilePlusIcon />
-//         </span>
-//         Playlist
-//       </li>
-//       <li className="px-5 flex items-center py-2 hover:text-primary transition-all cursor-pointer">
-//         <span className="p-2 bg-gray-200 mx-1 rounded-lg">
-//           <FavoriteIcon />
-//         </span>
-//         Favorite
-//       </li>
-//     </ul>
-//   );
-// };
-
-// export default DashboardMenu;
diff --git a/components/modules/NavBar/LeftNav/DashBoard/DashboardMenu/index.tsx b/components/modules/NavBar/LeftNav/DashBoard/DashboardMenu/index.tsx
new file mode 100644
index 0000000..e1c766a
--- /dev/null
+++ b/components/modules/NavBar/LeftNav/DashBoard/DashboardMenu/index.tsx
@@ -0,0 +1,61 @@
+import React from "react";
+import {
+  HomeSubMenuIcon,
+  HeadPhonesIcon,
+  FileMusicIcon,
+  ArrowExpendUpRighIcon,
+  DownLoadOutlineIcon,
+  FilePlusIcon,
+  FavoriteIcon,
+} from "../../../../__modules/Vectors";
+
+const DashboardMenu = () => {
+  return (
+    <ul className="flex flex-col ml-5 py-5">
+      <li className="px-5 flex items-center hover:text-primary transition-all cursor-pointer text-primary">
+        <span className="p-2 bg-gray-200 mx-1 rounded-lg font-poppins">
+          <HomeSubMenuIcon />
+        </span>
+        Home
+      </li>
+      <li className="px-5 flex items-center py-2 hover:text-primary transition-all cursor-pointer">
+        <span className="p-2 bg-gray-200 mx-1 rounded-lg">
+          <HeadPhonesIcon />
+        </span>
+        Latest
+      </li>
+      <li className="px-5 flex items-center py-2 hover:text-primary transition-all cursor-pointer">
+        <span className="p-2 bg-gray-200 mx-1 rounded-lg">
+          <FileMusicIcon />
+        </span>
+        Album
+      </li>
+      <li className="px-5 flex items-center py-2 hover:text-primary transition-all cursor-pointer">
+        <span className="p-2 bg-gray-200 mx-1 rounded-lg">
+          <ArrowExpendUpRighIcon />
+        </span>
+        Trending
+      </li>
+      <li className="px-5 flex items-center py-2 hover:text-primary transition-all cursor-pointer">
+        <span className="p-2 bg-gray-200 mx-1 rounded-lg">
+          <DownLoadOutlineIcon />
+        </span>
+        Streaming
+      </li>
+      <li className="px-5 flex items-center py-2 hover:text-primary transition-all cursor-pointer">
+        <span className="p-2 bg-gray-200 mx-1 rounded-lg">
+          <FilePlusIcon />
+        </span>
+        Playlist
+      </li>
+      <li className="px-5 flex items-center py-2 hover:text-primary transition-all cursor-pointer">
+        <span className="p-2 bg-gray-200 mx-1 rounded-lg">
+          <FavoriteIcon />
+        </span>
+        Favorite
+      </li>
+    </ul>
+  );
+};
+
+export default DashboardMenu;
diff --git a/components/modules/NavBar/LeftNav/DashBoard/index.jsx b/components/modules/NavBar/LeftNav/DashBoard/index.jsx
deleted file mode 100644
index 75ed824..0000000
--- a/components/modules/NavBar/LeftNav/DashBoard/index.jsx
+++ /dev/null
@@ -1,40 +0,0 @@
-// import React from "react";
-// import { ChevronRightIcon, HomeIcon } from "../../../__modules/Vectors";
-// import DashboardMenu from "./DashboardMenu";
-// import PropTypes from "prop-types";
-
-// const DashBord = ({ isDashboardSubmenu, toggleSubmenu }) => {
-//   return (
-//     <div>
-//       <div
-//         className={`flex items-center px-3 border-r-2 ${
-//           isDashboardSubmenu && "border-primary text-primary"
-//         }`}
-//       >
-//         <HomeIcon />
-//         <div className="flex items-center justify-between w-56">
-//           <p className="px-2">DashBoard</p>
-//           <button onClick={() => toggleSubmenu("dashboard")}>
-//             <ChevronRightIcon
-//               className={`${isDashboardSubmenu && "rotate-90"} transition-all`}
-//             />
-//           </button>
-//         </div>
-//       </div>
-//       <div
-//         className={`${
-//           isDashboardSubmenu ? "max-h-fit" : "max-h-0 overflow-hidden"
-//         } transition-all`}
-//       >
-//         <DashboardMenu />
-//       </div>
-//     </div>
-//   );
-// };
-
-// DashBord.propTypes = {
-//   isDashboardSubmenu: PropTypes.bool.isRequired,
-//   toggleSubmenu: PropTypes.func.isRequired,
-// };
-
-// export default DashBord;
diff --git a/components/modules/NavBar/LeftNav/DashBoard/index.tsx b/components/modules/NavBar/LeftNav/DashBoard/index.tsx
new file mode 100644
index 0000000..11a61b4
--- /dev/null
+++ b/components/modules/NavBar/LeftNav/DashBoard/index.tsx
@@ -0,0 +1,39 @@
+import React, { FC } from "react";
+import { ChevronRightIcon, HomeIcon } from "../../../__modules/Vectors";
+import DashboardMenu from "./DashboardMenu";
+
+interface IProps {
+  isDashboardSubmenu: boolean;
+  toggleSubmenu: (menuType: string) => void;
+}
+
+const DashBord: FC<IProps> = ({ isDashboardSubmenu, toggleSubmenu }) => {
+  return (
+    <div>
+      <div
+        className={`flex items-center px-3 border-r-2 ${
+          isDashboardSubmenu && "border-primary text-primary"
+        }`}
+      >
+        <HomeIcon />
+        <div className="flex items-center justify-between w-56">
+          <p className="px-2">DashBoard</p>
+          <button onClick={() => toggleSubmenu("dashboard")}>
+            <ChevronRightIcon
+              className={`${isDashboardSubmenu && "rotate-90"} transition-all`}
+            />
+          </button>
+        </div>
+      </div>
+      <div
+        className={`${
+          isDashboardSubmenu ? "max-h-fit" : "max-h-0 overflow-hidden"
+        } transition-all`}
+      >
+        <DashboardMenu />
+      </div>
+    </div>
+  );
+};
+
+export default DashBord;
diff --git a/components/modules/NavBar/LeftNav/NavContentIcons/index.jsx b/components/modules/NavBar/LeftNav/NavContentIcons/index.jsx
deleted file mode 100644
index c435178..0000000
--- a/components/modules/NavBar/LeftNav/NavContentIcons/index.jsx
+++ /dev/null
@@ -1,37 +0,0 @@
-// import React from "react";
-// import {
-//   HomeSubMenuIcon,
-//   HeadPhonesIcon,
-//   FileMusicIcon,
-//   ArrowExpendUpRighIcon,
-//   DownLoadOutlineIcon,
-//   FilePlusIcon,
-//   FavoriteIcon,
-//   AdminIcon,
-// } from "../../../__modules/Vectors";
-// import PropTypes from "prop-types";
-
-// const NavContentIcons = ({ isMouseOverLeftNav }) => {
-//   return (
-//     <div
-//       className={`flex flex-col justify-center items-center mobile:hidden ${
-//         isMouseOverLeftNav && "hidden"
-//       }`}
-//     >
-//       <HomeSubMenuIcon className="my-3 text-2xl text-primary" />
-//       <HeadPhonesIcon className="my-3 text-2xl" />
-//       <FileMusicIcon className="my-3 text-2xl" />
-//       <ArrowExpendUpRighIcon className="my-3 text-2xl" />
-//       <DownLoadOutlineIcon className="my-3 text-2xl" />
-//       <FilePlusIcon className="my-3 text-2xl" />
-//       <FavoriteIcon className="my-3 text-2xl" />
-//       <AdminIcon className="my-3 text-2xl" />
-//     </div>
-//   );
-// };
-
-// NavContentIcons.propTypes = {
-//   isMouseOverLeftNav: PropTypes.bool.isRequired,
-// };
-
-// export default NavContentIcons;
diff --git a/components/modules/NavBar/LeftNav/NavContentIcons/index.tsx b/components/modules/NavBar/LeftNav/NavContentIcons/index.tsx
new file mode 100644
index 0000000..a618011
--- /dev/null
+++ b/components/modules/NavBar/LeftNav/NavContentIcons/index.tsx
@@ -0,0 +1,36 @@
+import React, { FC } from "react";
+import {
+  HomeSubMenuIcon,
+  HeadPhonesIcon,
+  FileMusicIcon,
+  ArrowExpendUpRighIcon,
+  DownLoadOutlineIcon,
+  FilePlusIcon,
+  FavoriteIcon,
+  AdminIcon,
+} from "../../../__modules/Vectors";
+
+interface IProps {
+  isMouseOverLeftNav: boolean;
+}
+
+const NavContentIcons: FC<IProps> = ({ isMouseOverLeftNav }) => {
+  return (
+    <div
+      className={`flex flex-col justify-center items-center mobile:hidden ${
+        isMouseOverLeftNav && "hidden"
+      }`}
+    >
+      <HomeSubMenuIcon className="my-3 text-2xl text-primary" />
+      <HeadPhonesIcon className="my-3 text-2xl" />
+      <FileMusicIcon className="my-3 text-2xl" />
+      <ArrowExpendUpRighIcon className="my-3 text-2xl" />
+      <DownLoadOutlineIcon className="my-3 text-2xl" />
+      <FilePlusIcon className="my-3 text-2xl" />
+      <FavoriteIcon className="my-3 text-2xl" />
+      <AdminIcon className="my-3 text-2xl" />
+    </div>
+  );
+};
+
+export default NavContentIcons;
diff --git a/components/modules/NavBar/LeftNav/index.jsx b/components/modules/NavBar/LeftNav/index.jsx
deleted file mode 100644
index ba27707..0000000
--- a/components/modules/NavBar/LeftNav/index.jsx
+++ /dev/null
@@ -1,103 +0,0 @@
-// import React, { useState } from "react";
-// import { useRecoilState } from "recoil";
-// import { leftNavPinedAtom, openMenuAtom } from "../../../lib/atoms";
-// import { MoonIcon, SunIcon, CloseIcon, PinIcon } from "../../__modules/Vectors";
-// import NavContentIcons from "./NavContentIcons";
-// import AdminMenu from "./AdminMenu";
-// import DashBord from "./DashBoard";
-
-// const LeftNav = () => {
-//   const [isDarkMode, setIsDarkMode] = useState(false);
-//   const [isMouseOverLeftNav, setIsMouseOverLeftNav] = useState(false);
-//   const [isSubmenu, setIsSubMenu] = useState({
-//     isAdminSubmenu: false,
-//     isDashboardSubmenu: true,
-//   });
-//   const { isAdminSubmenu, isDashboardSubmenu } = isSubmenu;
-//   const [isLeftNavPined, setIsLeftNavPined] = useRecoilState(leftNavPinedAtom);
-//   const [isMenuOpened, setIsMenuOpened] = useRecoilState(openMenuAtom);
-
-//   const toggleTheme = () => {
-//     setIsDarkMode(!isDarkMode);
-//   };
-
-//   const toggleSubmenu = (menuName) => {
-//     menuName === "dashboard"
-//       ? setIsSubMenu({
-//           isAdminSubmenu: false,
-//           isDashboardSubmenu: !isDashboardSubmenu,
-//         })
-//       : setIsSubMenu({
-//           isDashboardSubmenu: false,
-//           isAdminSubmenu: !isAdminSubmenu,
-//         });
-//   };
-
-//   const onPinLeftNav = () => {
-//     setIsLeftNavPined(!isLeftNavPined);
-//   };
-
-//   return (
-//     <div
-//       onMouseOver={() => setIsMouseOverLeftNav(true)}
-//       onMouseOut={() => setIsMouseOverLeftNav(isLeftNavPined ? true : false)}
-//       className={`bg-white shadow-2xl h-full w-fit font-Mulish z-10 fixed top-0 bottom-0 left-0 flex flex-col justify-between  transition-all
-//       ${!isMenuOpened && "mobile:w-0 mobile:overflow-hidden transition-all"}
-//       `}
-//     >
-//       <div>
-//         <div className="px-3 py-5 flex justify-between mobile:items-center">
-//           <h1
-//             className={`text-2xl font-bold ${
-//               !isMouseOverLeftNav && "text-center"
-//             } mobile:text-left`}
-//           >
-//             Yokaa
-//           </h1>
-//           <button
-//             onClick={() => setIsMenuOpened(!isMenuOpened)}
-//             className="hidden mobile:block"
-//           >
-//             <CloseIcon />
-//           </button>
-//           <button
-//             onClick={onPinLeftNav}
-//             className={`${isMouseOverLeftNav ? "block" : "hidden"} ${
-//               isLeftNavPined && "p-2 rounded-full text-white bg-primary"
-//             } mobile:hidden`}
-//           >
-//             <PinIcon />
-//           </button>
-//         </div>
-//         <NavContentIcons isMouseOverLeftNav={isMouseOverLeftNav} />
-//         <div
-//           className={`${
-//             !isMouseOverLeftNav ? "w-0 overflow-hidden" : "w-full"
-//           } mobile:w-full`}
-//         >
-//           <DashBord
-//             isDashboardSubmenu={isDashboardSubmenu}
-//             toggleSubmenu={toggleSubmenu}
-//           />
-//           <AdminMenu
-//             isAdminSubmenu={isAdminSubmenu}
-//             toggleSubmenu={toggleSubmenu}
-//           />
-//         </div>
-//       </div>
-//       <button
-//         onClick={toggleTheme}
-//         className="flex justify-center items-center bg-primary m-6 py-3 rounded-full text-white font-Mulish font-bold"
-//       >
-//         {isDarkMode ? <MoonIcon /> : <SunIcon />}
-//         <span
-//           className={`px-2 ${!isMouseOverLeftNav && "hidden"} mobile:block`}
-//         >
-//           {isDarkMode ? "Dark" : "Light"}
-//         </span>
-//       </button>
-//     </div>
-//   );
-// };
-
-// export default LeftNav;
diff --git a/components/modules/NavBar/LeftNav/index.tsx b/components/modules/NavBar/LeftNav/index.tsx
new file mode 100644
index 0000000..60da55b
--- /dev/null
+++ b/components/modules/NavBar/LeftNav/index.tsx
@@ -0,0 +1,103 @@
+import React, { useState } from "react";
+import { useRecoilState } from "recoil";
+import { leftNavPinedAtom, openMenuAtom } from "../../../lib/atoms";
+import { MoonIcon, SunIcon, CloseIcon, PinIcon } from "../../__modules/Vectors";
+import NavContentIcons from "./NavContentIcons";
+import AdminMenu from "./AdminMenu";
+import DashBord from "./DashBoard";
+
+const LeftNav = () => {
+  const [isDarkMode, setIsDarkMode] = useState(false);
+  const [isMouseOverLeftNav, setIsMouseOverLeftNav] = useState(false);
+  const [isSubmenu, setIsSubMenu] = useState({
+    isAdminSubmenu: false,
+    isDashboardSubmenu: true,
+  });
+  const { isAdminSubmenu, isDashboardSubmenu } = isSubmenu;
+  const [isLeftNavPined, setIsLeftNavPined] = useRecoilState(leftNavPinedAtom);
+  const [isMenuOpened, setIsMenuOpened] = useRecoilState(openMenuAtom);
+
+  const toggleTheme = () => {
+    setIsDarkMode(!isDarkMode);
+  };
+
+  const toggleSubmenu = (menuName: string) => {
+    menuName === "dashboard"
+      ? setIsSubMenu({
+          isAdminSubmenu: false,
+          isDashboardSubmenu: !isDashboardSubmenu,
+        })
+      : setIsSubMenu({
+          isDashboardSubmenu: false,
+          isAdminSubmenu: !isAdminSubmenu,
+        });
+  };
+
+  const onPinLeftNav = () => {
+    setIsLeftNavPined(!isLeftNavPined);
+  };
+
+  return (
+    <div
+      onMouseOver={() => setIsMouseOverLeftNav(true)}
+      onMouseOut={() => setIsMouseOverLeftNav(isLeftNavPined ? true : false)}
+      className={`bg-white shadow-2xl h-full w-fit font-Mulish z-10 fixed top-0 bottom-0 left-0 flex flex-col justify-between  transition-all
+      ${!isMenuOpened && "mobile:w-0 mobile:overflow-hidden transition-all"}
+      `}
+    >
+      <div>
+        <div className="px-3 py-5 flex justify-between mobile:items-center">
+          <h1
+            className={`text-2xl font-bold ${
+              !isMouseOverLeftNav && "text-center"
+            } mobile:text-left`}
+          >
+            Yokaa
+          </h1>
+          <button
+            onClick={() => setIsMenuOpened(!isMenuOpened)}
+            className="hidden mobile:block"
+          >
+            <CloseIcon />
+          </button>
+          <button
+            onClick={onPinLeftNav}
+            className={`${isMouseOverLeftNav ? "block" : "hidden"} ${
+              isLeftNavPined && "p-2 rounded-full text-white bg-primary"
+            } mobile:hidden`}
+          >
+            <PinIcon />
+          </button>
+        </div>
+        <NavContentIcons isMouseOverLeftNav={isMouseOverLeftNav} />
+        <div
+          className={`${
+            !isMouseOverLeftNav ? "w-0 overflow-hidden" : "w-full"
+          } mobile:w-full`}
+        >
+          <DashBord
+            isDashboardSubmenu={isDashboardSubmenu}
+            toggleSubmenu={toggleSubmenu}
+          />
+          <AdminMenu
+            isAdminSubmenu={isAdminSubmenu}
+            toggleSubmenu={toggleSubmenu}
+          />
+        </div>
+      </div>
+      <button
+        onClick={toggleTheme}
+        className="flex justify-center items-center bg-primary m-6 py-3 rounded-full text-white font-Mulish font-bold"
+      >
+        {isDarkMode ? <MoonIcon /> : <SunIcon />}
+        <span
+          className={`px-2 ${!isMouseOverLeftNav && "hidden"} mobile:block`}
+        >
+          {isDarkMode ? "Dark" : "Light"}
+        </span>
+      </button>
+    </div>
+  );
+};
+
+export default LeftNav;
diff --git a/components/modules/NavBar/TopNav/__modules/NotificationModal/index.jsx b/components/modules/NavBar/TopNav/__modules/NotificationModal/index.jsx
deleted file mode 100644
index a9fb6b6..0000000
--- a/components/modules/NavBar/TopNav/__modules/NotificationModal/index.jsx
+++ /dev/null
@@ -1,39 +0,0 @@
-// import React from "react";
-
-// const NotificationModal = () => {
-//   return (
-//     <div className="mt-20 bg-white w-72 rounded-2xl absolute right-0 mx-5 z-10 mobile:mt-32">
-//       <div className="flex bg-primary text-white justify-between py-3 px-3 rounded-t-2xl items-center">
-//         <p>All Notifications</p>
-//         <p className="p-2 w-10 text-center bg-gray-400 text-black rounded-xl">
-//           4
-//         </p>
-//       </div>
-//       <div className="border-b border-white rounded-b-2xl">
-//         {Array.from({ length: 5 }).map((_, index) => {
-//           return (
-//             <div
-//               key={index}
-//               className="flex py-3 border-t border-primary border-opacity-30"
-//             >
-//               <img
-//                 src="https://bukovskevrchy.pl/img/d43b5923dab8424859b9b68ed4bcdc61.jpg"
-//                 alt="profile"
-//                 className="w-10 h-10 object-cover rounded-lg ml-3"
-//               />
-//               <div className="px-5 flex flex-col w-full">
-//                 <p>G-tech</p>
-//                 <div className="flex justify-between text-gray-500 items-center">
-//                   <p>like</p>
-//                   <p className="text-xs">Just now</p>
-//                 </div>
-//               </div>
-//             </div>
-//           );
-//         })}
-//       </div>
-//     </div>
-//   );
-// };
-
-// export default NotificationModal;
diff --git a/components/modules/NavBar/TopNav/__modules/NotificationModal/index.tsx b/components/modules/NavBar/TopNav/__modules/NotificationModal/index.tsx
new file mode 100644
index 0000000..421ddb6
--- /dev/null
+++ b/components/modules/NavBar/TopNav/__modules/NotificationModal/index.tsx
@@ -0,0 +1,40 @@
+/* eslint-disable @next/next/no-img-element */
+import React from "react";
+
+const NotificationModal = () => {
+  return (
+    <div className="mt-20 bg-white w-72 rounded-2xl absolute right-0 mx-5 z-10 mobile:mt-32">
+      <div className="flex bg-primary text-white justify-between py-3 px-3 rounded-t-2xl items-center">
+        <p>All Notifications</p>
+        <p className="p-2 w-10 text-center bg-gray-400 text-black rounded-xl">
+          4
+        </p>
+      </div>
+      <div className="border-b border-white rounded-b-2xl">
+        {Array.from({ length: 5 }).map((_, index) => {
+          return (
+            <div
+              key={index}
+              className="flex py-3 border-t border-primary border-opacity-30"
+            >
+              <img
+                src="https://bukovskevrchy.pl/img/d43b5923dab8424859b9b68ed4bcdc61.jpg"
+                alt="profile"
+                className="w-10 h-10 object-cover rounded-lg ml-3"
+              />
+              <div className="px-5 flex flex-col w-full">
+                <p>G-tech</p>
+                <div className="flex justify-between text-gray-500 items-center">
+                  <p>like</p>
+                  <p className="text-xs">Just now</p>
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default NotificationModal;
diff --git a/components/modules/NavBar/TopNav/__modules/ProfileMenuModal/index.jsx b/components/modules/NavBar/TopNav/__modules/ProfileMenuModal/index.jsx
deleted file mode 100644
index 957b463..0000000
--- a/components/modules/NavBar/TopNav/__modules/ProfileMenuModal/index.jsx
+++ /dev/null
@@ -1,84 +0,0 @@
-// import React from "react";
-// import {
-//   AccountIcon,
-//   EditProfileIcon,
-//   LockIcon,
-//   ProfileSheetIcon,
-// } from "../../../../__modules/Vectors";
-// import { useRouter } from "next/router";
-
-// const ProfileMenuModal = () => {
-//   const router = useRouter();
-//   return (
-//     <div className="mt-20 bg-white w-72 rounded-2xl absolute right-0 mx-5 z-50  mobile:mt-32">
-//       <div className="flex flex-col bg-primary text-white justify-start py-3 px-3 rounded-t-2xl">
-//         <p>Hello G-Tech</p>
-//         <p className="font-thin">Available</p>
-//       </div>
-//       <div className="border-b border-white rounded-b-2xl">
-//         <div className="flex py-3 border-t border-primary border-opacity-30 items-center hover:bg-primary hover:bg-opacity-20 transition-all cursor-pointer">
-//           <div className="bg-primary p-4 mx-2 rounded-xl bg-opacity-30">
-//             <ProfileSheetIcon className="text-primary" />
-//           </div>
-//           <div className="px-5 flex flex-col w-full">
-//           <div
-//             className="px-5 flex flex-col w-full"
-//             onClick={() => router.push("/account/profile")}>
-//               <p className="font-semibold">My Profle</p>
-//               <p className="text-xs text-gray-500">
-//                 View personal profile details
-//               </p>
-
-//             </div>
-//           </div>
-//         </div>
-//         <div className="flex py-3 border-t border-primary border-opacity-30 items-center hover:bg-primary hover:bg-opacity-20 transition-all cursor-pointer">
-//           <div className="bg-primary p-4 mx-2 rounded-xl bg-opacity-30">
-//             <EditProfileIcon className="text-primary" />
-//           </div>
-//           <div
-//             className="px-5 flex flex-col w-full"
-//             onClick={() => router.push("/account/edit")}
-//           >
-//             <p className="font-semibold">Edit Profle</p>
-//             <p className="text-xs text-gray-500">
-//               Modify personal profile details
-//             </p>
-//           </div>
-//         </div>
-//         <div className="flex py-3 border-t border-primary border-opacity-30 items-center hover:bg-primary hover:bg-opacity-20 transition-all cursor-pointer">
-//           <div className="bg-primary p-4 mx-2 rounded-xl bg-opacity-30">
-//             <AccountIcon className="text-primary" />
-//           </div>
-//           <div className="px-5 flex flex-col w-full">
-//             <p className="font-semibold">My Profle</p>
-//             <p className="text-xs text-gray-500">
-//               Manage Your account parameter
-//             </p>
-//           </div>
-//         </div>
-//         <div
-//           onClick={() => router.push("/account/setting")}
-//           className="flex py-3 border-t border-primary border-opacity-30 items-center hover:bg-primary hover:bg-opacity-20 transition-all cursor-pointer"
-//         >
-//           <div className="bg-primary p-4 mx-2 rounded-xl bg-opacity-30">
-//             <LockIcon className="text-primary" />
-//           </div>
-//           <div className="px-5 flex flex-col w-full">
-//             <p className="font-semibold">Privacy Setting</p>
-//             <p className="text-xs text-gray-500">
-//               Control your privacy parameter
-//             </p>
-//           </div>
-//         </div>
-//         <div className="flex py-3 border-t border-primary border-opacity-30 justify-center items-center">
-//           <button className="bg-primary py-2 px-10 text-white rounded-md">
-//             Sign out
-//           </button>
-//         </div>
-//       </div>
-//     </div>
-//   );
-// };
-
-// export default ProfileMenuModal;
diff --git a/components/modules/NavBar/TopNav/__modules/ProfileMenuModal/index.tsx b/components/modules/NavBar/TopNav/__modules/ProfileMenuModal/index.tsx
new file mode 100644
index 0000000..9e7d00c
--- /dev/null
+++ b/components/modules/NavBar/TopNav/__modules/ProfileMenuModal/index.tsx
@@ -0,0 +1,84 @@
+import React from "react";
+import {
+  AccountIcon,
+  EditProfileIcon,
+  LockIcon,
+  ProfileSheetIcon,
+} from "../../../../__modules/Vectors";
+import { useRouter } from "next/router";
+
+const ProfileMenuModal = () => {
+  const router = useRouter();
+  return (
+    <div className="mt-20 bg-white w-72 rounded-2xl absolute right-0 mx-5 z-50  mobile:mt-32">
+      <div className="flex flex-col bg-primary text-white justify-start py-3 px-3 rounded-t-2xl">
+        <p>Hello G-Tech</p>
+        <p className="font-thin">Available</p>
+      </div>
+      <div className="border-b border-white rounded-b-2xl">
+        <div className="flex py-3 border-t border-primary border-opacity-30 items-center hover:bg-primary hover:bg-opacity-20 transition-all cursor-pointer">
+          <div className="bg-primary p-4 mx-2 rounded-xl bg-opacity-30">
+            <ProfileSheetIcon className="text-primary" />
+          </div>
+          <div className="px-5 flex flex-col w-full">
+            <div
+              className="px-5 flex flex-col w-full"
+              onClick={() => router.push("/account/profile")}
+            >
+              <p className="font-semibold">My Profle</p>
+              <p className="text-xs text-gray-500">
+                View personal profile details
+              </p>
+            </div>
+          </div>
+        </div>
+        <div className="flex py-3 border-t border-primary border-opacity-30 items-center hover:bg-primary hover:bg-opacity-20 transition-all cursor-pointer">
+          <div className="bg-primary p-4 mx-2 rounded-xl bg-opacity-30">
+            <EditProfileIcon className="text-primary" />
+          </div>
+          <div
+            className="px-5 flex flex-col w-full"
+            onClick={() => router.push("/account/edit")}
+          >
+            <p className="font-semibold">Edit Profle</p>
+            <p className="text-xs text-gray-500">
+              Modify personal profile details
+            </p>
+          </div>
+        </div>
+        <div className="flex py-3 border-t border-primary border-opacity-30 items-center hover:bg-primary hover:bg-opacity-20 transition-all cursor-pointer">
+          <div className="bg-primary p-4 mx-2 rounded-xl bg-opacity-30">
+            <AccountIcon className="text-primary" />
+          </div>
+          <div className="px-5 flex flex-col w-full">
+            <p className="font-semibold">My Profle</p>
+            <p className="text-xs text-gray-500">
+              Manage Your account parameter
+            </p>
+          </div>
+        </div>
+        <div
+          onClick={() => router.push("/account/setting")}
+          className="flex py-3 border-t border-primary border-opacity-30 items-center hover:bg-primary hover:bg-opacity-20 transition-all cursor-pointer"
+        >
+          <div className="bg-primary p-4 mx-2 rounded-xl bg-opacity-30">
+            <LockIcon className="text-primary" />
+          </div>
+          <div className="px-5 flex flex-col w-full">
+            <p className="font-semibold">Privacy Setting</p>
+            <p className="text-xs text-gray-500">
+              Control your privacy parameter
+            </p>
+          </div>
+        </div>
+        <div className="flex py-3 border-t border-primary border-opacity-30 justify-center items-center">
+          <button className="bg-primary py-2 px-10 text-white rounded-md">
+            Sign out
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ProfileMenuModal;
diff --git a/components/modules/NavBar/TopNav/index.jsx b/components/modules/NavBar/TopNav/index.jsx
deleted file mode 100644
index 0a53597..0000000
--- a/components/modules/NavBar/TopNav/index.jsx
+++ /dev/null
@@ -1,143 +0,0 @@
-// import React, { useState } from "react";
-// import {
-//   LoginIcon,
-//   MenuOutlineIcon,
-//   MicrophoneIcon,
-//   NotificationIcon,
-//   SeachIcon,
-//   ChevronRightIcon,
-// } from "../../__modules/Vectors";
-// import { openMenuAtom } from "../../../lib/atoms";
-// import { useRecoilState } from "recoil";
-// import NotificationModal from "./__modules/NotificationModal";
-// import ProfileMenuModal from "./__modules/ProfileMenuModal";
-// import PropTypes from "prop-types";
-// import Link from "next/link";
-
-// const TopNav = ({ setIsTopNav }) => {
-//   const [isTopMenu, setIsTopMenu] = useState(false);
-//   const [isMenuOpened, setIsMenuOpened] = useRecoilState(openMenuAtom);
-//   const [isNotificationModal, setIsNotificationModal] = useState(false);
-//   const [isProfileMenuModal, setIsProfileMenuModal] = useState(false);
-
-//   const isloggedIn = false;
-
-//   const toggleNoticationNavModals = () => {
-//     setIsNotificationModal(!isNotificationModal);
-//     setIsProfileMenuModal(false);
-//   };
-
-//   const toggleProfileNavModals = () => {
-//     setIsProfileMenuModal(!isProfileMenuModal);
-//     setIsNotificationModal(false);
-//   };
-
-//   const toggleTopMenu = () => {
-//     setIsTopMenu(!isTopMenu);
-//     setIsTopNav(!isTopMenu);
-//   };
-
-//   return (
-//     <>
-//       <div className="flex absolute top-0 left-0 right-0 justify-between items-center py-4 pr-5 font-Mulish">
-//         <div className="mobile:hidden">
-//           <ul className="inline-flex font-bold">
-//             <Link href="/">
-//               <li className="pr-5 hover:text-primary cursor-pointer text-primary">
-//                 Home
-//               </li>
-//             </Link>
-//             <Link href="/latest">
-//               <li className="px-5 hover:text-primary cursor-pointer">Latest</li>
-//             </Link>
-//             <Link href="/album">
-//               <li className="px-5  hover:text-primary cursor-pointer">Album</li>
-//             </Link>
-//             <Link href="#">
-//               <li className="px-5  hover:text-primary cursor-pointer">
-//                 Trending
-//               </li>
-//             </Link>
-//           </ul>
-//         </div>
-//         <div className="hidden items-center text-primary mobile:flex">
-//           <button onClick={() => setIsMenuOpened(!isMenuOpened)}>
-//             <MenuOutlineIcon />
-//           </button>
-//         </div>
-//         <h1 className="px-3 text-2xl font-bold text-primary hidden mobile:block">
-//           Yokaa
-//         </h1>
-//         <div className="mobile:flex mobile:flex-col">
-//           <button
-//             onClick={toggleTopMenu}
-//             className="text-primary mobile:block hidden"
-//           >
-//             <ChevronRightIcon
-//               className={`${isTopMenu && "rotate-90"} transition-all`}
-//             />
-//           </button>
-//           <div
-//             className={`items-center justify-end ${
-//               isTopMenu ? "flex" : "mobile:hidden"
-//             } flex mobile:absolute mobile:top-16 mobile:right-0 mobile:bg-white mobile:w-full mobile:px-5 mobile:py-3`}
-//           >
-//             <button className="hidden mobile:block">
-//               <SeachIcon />
-//             </button>
-//             <div className="border border-gray-200 items-center px-3 py-2 rounded-tr-2xl rounded-bl-2xl bg-white mobile:hidden flex">
-//               <SeachIcon />
-//               <input type="text" className="outline-none px-3 w-96" />
-//               <MicrophoneIcon />
-//             </div>
-//             <div className="flex">
-//               <button
-//                 className="px-5 relative"
-//                 onClick={toggleNoticationNavModals}
-//               >
-//                 <NotificationIcon />
-//                 <span className="absolute top-0 bg-primary text-xs text-white px-1 rounded-full">
-//                   +
-//                 </span>
-//               </button>
-//               <button
-//                 className={`px-5  flex justify-center items-center bg-primary py-1 rounded-md text-white ${
-//                   !isloggedIn && "hidden"
-//                 }`}
-//               >
-//                 <LoginIcon className="mx-2" /> Log in
-//               </button>
-//               <button onClick={toggleProfileNavModals}>
-//                 <img
-//                   src="https://bukovskevrchy.pl/img/d43b5923dab8424859b9b68ed4bcdc61.jpg"
-//                   alt="profile"
-//                   className="w-12 h-12 object-cover rounded-full"
-//                 />
-//               </button>
-//             </div>
-//           </div>
-//         </div>
-//       </div>
-//       <div
-//         className={`z-50 transition-all ${
-//           isTopMenu ? "mobile:block" : "mobile:hidden"
-//         } ${isNotificationModal ? "-translate-x-10" : "translate-x-96"}`}
-//       >
-//         <NotificationModal />
-//       </div>
-//       <div
-//         className={`z-50 transition-all ${
-//           isTopMenu ? "mobile:block" : "mobile:hidden"
-//         } ${isProfileMenuModal ? "translate-x-0" : "translate-x-96"}`}
-//       >
-//         <ProfileMenuModal />
-//       </div>
-//     </>
-//   );
-// };
-
-// TopNav.propstype = {
-//   setIsTopNav: PropTypes.func,
-// };
-
-// export default TopNav;
diff --git a/components/modules/NavBar/TopNav/index.tsx b/components/modules/NavBar/TopNav/index.tsx
new file mode 100644
index 0000000..ecf991c
--- /dev/null
+++ b/components/modules/NavBar/TopNav/index.tsx
@@ -0,0 +1,143 @@
+/* eslint-disable @next/next/no-img-element */
+import React, { Dispatch, SetStateAction, useState, FC } from "react";
+import {
+  LoginIcon,
+  MenuOutlineIcon,
+  MicrophoneIcon,
+  NotificationIcon,
+  SeachIcon,
+  ChevronRightIcon,
+} from "../../__modules/Vectors";
+import { openMenuAtom } from "../../../lib/atoms";
+import { useRecoilState } from "recoil";
+import NotificationModal from "./__modules/NotificationModal";
+import ProfileMenuModal from "./__modules/ProfileMenuModal";
+import Link from "next/link";
+
+interface IProps {
+  setIsTopNav: Dispatch<SetStateAction<boolean>>;
+}
+
+const TopNav: FC<IProps> = ({ setIsTopNav }) => {
+  const [isTopMenu, setIsTopMenu] = useState(false);
+  const [isMenuOpened, setIsMenuOpened] = useRecoilState(openMenuAtom);
+  const [isNotificationModal, setIsNotificationModal] = useState(false);
+  const [isProfileMenuModal, setIsProfileMenuModal] = useState(false);
+
+  const isloggedIn = false;
+
+  const toggleNoticationNavModals = () => {
+    setIsNotificationModal(!isNotificationModal);
+    setIsProfileMenuModal(false);
+  };
+
+  const toggleProfileNavModals = () => {
+    setIsProfileMenuModal(!isProfileMenuModal);
+    setIsNotificationModal(false);
+  };
+
+  const toggleTopMenu = () => {
+    setIsTopMenu(!isTopMenu);
+    setIsTopNav(!isTopMenu);
+  };
+
+  return (
+    <>
+      <div className="flex absolute top-0 left-0 right-0 justify-between items-center py-4 pr-5 font-Mulish">
+        <div className="mobile:hidden">
+          <ul className="inline-flex font-bold">
+            <Link href="/">
+              <li className="pr-5 hover:text-primary cursor-pointer text-primary">
+                Home
+              </li>
+            </Link>
+            <Link href="/latest">
+              <li className="px-5 hover:text-primary cursor-pointer">Latest</li>
+            </Link>
+            <Link href="/album">
+              <li className="px-5  hover:text-primary cursor-pointer">Album</li>
+            </Link>
+            <Link href="#">
+              <li className="px-5  hover:text-primary cursor-pointer">
+                Trending
+              </li>
+            </Link>
+          </ul>
+        </div>
+        <div className="hidden items-center text-primary mobile:flex">
+          <button onClick={() => setIsMenuOpened(!isMenuOpened)}>
+            <MenuOutlineIcon />
+          </button>
+        </div>
+        <h1 className="px-3 text-2xl font-bold text-primary hidden mobile:block">
+          Yokaa
+        </h1>
+        <div className="mobile:flex mobile:flex-col">
+          <button
+            onClick={toggleTopMenu}
+            className="text-primary mobile:block hidden"
+          >
+            <ChevronRightIcon
+              className={`${isTopMenu && "rotate-90"} transition-all`}
+            />
+          </button>
+          <div
+            className={`items-center justify-end ${
+              isTopMenu ? "flex" : "mobile:hidden"
+            } flex mobile:absolute mobile:top-16 mobile:right-0 mobile:bg-white mobile:w-full mobile:px-5 mobile:py-3`}
+          >
+            <button className="hidden mobile:block">
+              <SeachIcon />
+            </button>
+            <div className="border border-gray-200 items-center px-3 py-2 rounded-tr-2xl rounded-bl-2xl bg-white mobile:hidden flex">
+              <SeachIcon />
+              <input type="text" className="outline-none px-3 w-96" />
+              <MicrophoneIcon />
+            </div>
+            <div className="flex">
+              <button
+                className="px-5 relative"
+                onClick={toggleNoticationNavModals}
+              >
+                <NotificationIcon />
+                <span className="absolute top-0 bg-primary text-xs text-white px-1 rounded-full">
+                  +
+                </span>
+              </button>
+              <button
+                className={`px-5  flex justify-center items-center bg-primary py-1 rounded-md text-white ${
+                  !isloggedIn && "hidden"
+                }`}
+              >
+                <LoginIcon className="mx-2" /> Log in
+              </button>
+              <button onClick={toggleProfileNavModals}>
+                <img
+                  src="https://bukovskevrchy.pl/img/d43b5923dab8424859b9b68ed4bcdc61.jpg"
+                  alt="profile"
+                  className="w-12 h-12 object-cover rounded-full"
+                />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        className={`z-50 transition-all ${
+          isTopMenu ? "mobile:block" : "mobile:hidden"
+        } ${isNotificationModal ? "-translate-x-10" : "translate-x-96"}`}
+      >
+        <NotificationModal />
+      </div>
+      <div
+        className={`z-50 transition-all ${
+          isTopMenu ? "mobile:block" : "mobile:hidden"
+        } ${isProfileMenuModal ? "translate-x-0" : "translate-x-96"}`}
+      >
+        <ProfileMenuModal />
+      </div>
+    </>
+  );
+};
+
+export default TopNav;
diff --git a/components/modules/NavBar/index.jsx b/components/modules/NavBar/index.jsx
deleted file mode 100644
index d484017..0000000
--- a/components/modules/NavBar/index.jsx
+++ /dev/null
@@ -1,4 +0,0 @@
-// import LeftNav from "./LeftNav";
-// import TopNav from "./TopNav";
-
-// export { LeftNav, TopNav };
diff --git a/components/modules/NavBar/index.tsx b/components/modules/NavBar/index.tsx
new file mode 100644
index 0000000..ff13f96
--- /dev/null
+++ b/components/modules/NavBar/index.tsx
@@ -0,0 +1,4 @@
+import LeftNav from "./LeftNav";
+import TopNav from "./TopNav";
+
+export { LeftNav, TopNav };
diff --git a/components/modules/__modules__/Card/PageCard.jsx b/components/modules/__modules__/Card/PageCard.jsx
deleted file mode 100644
index a1d69d4..0000000
--- a/components/modules/__modules__/Card/PageCard.jsx
+++ /dev/null
@@ -1,31 +0,0 @@
-// import React from "react";
-// import { useRecoilValue } from "recoil";
-// import { leftNavPinedAtom } from "../../../lib/atoms";
-// import PropTypes from "prop-types";
-// import { LeftNav, TopNav } from "../../NavBar";
-// import BottomPlayer from "../../../BottomPaler/BottomPalyer";
-
-// const PageCard = ({ children, setIsTopNav }) => {
-//   const isLeftNavPined = useRecoilValue(leftNavPinedAtom);
-//   return (
-//     <>
-//       <div
-//         className={`relative flex flex-col ${
-//           !isLeftNavPined ? "ml-28 transition-all" : "transition-all ml-72"
-//         } mobile:ml-5`}
-//       >
-//         <TopNav setIsTopNav={setIsTopNav} />
-//         {children}
-//       </div>
-//       <LeftNav />
-//       <BottomPlayer />
-//     </>
-//   );
-// };
-
-// PageCard.propTypes = {
-//   children: PropTypes.element.isRequired,
-//   setIsTopNav: PropTypes.func,
-// };
-
-// export default PageCard;
diff --git a/components/modules/__modules__/Card/PageCard.tsx b/components/modules/__modules__/Card/PageCard.tsx
new file mode 100644
index 0000000..864eec6
--- /dev/null
+++ b/components/modules/__modules__/Card/PageCard.tsx
@@ -0,0 +1,30 @@
+import React, { Dispatch, FC, SetStateAction } from "react";
+import { useRecoilValue } from "recoil";
+import { leftNavPinedAtom } from "../../../lib/atoms";
+import { LeftNav, TopNav } from "../../NavBar";
+import BottomPlayer from "../../../BottomPaler/BottomPalyer";
+
+interface IProps {
+  children: any;
+  setIsTopNav: Dispatch<SetStateAction<boolean>>;
+}
+
+const PageCard: FC<IProps> = ({ children, setIsTopNav }) => {
+  const isLeftNavPined = useRecoilValue(leftNavPinedAtom);
+  return (
+    <>
+      <div
+        className={`relative flex flex-col ${
+          !isLeftNavPined ? "ml-28 transition-all" : "transition-all ml-72"
+        } mobile:ml-5`}
+      >
+        <TopNav setIsTopNav={setIsTopNav} />
+        {children}
+      </div>
+      <LeftNav />
+      <BottomPlayer />
+    </>
+  );
+};
+
+export default PageCard;
diff --git a/components/modules/__modules__/Card/TopSongCard.tsx b/components/modules/__modules__/Card/TopSongCard.tsx
index 7859a89..6178a25 100644
--- a/components/modules/__modules__/Card/TopSongCard.tsx
+++ b/components/modules/__modules__/Card/TopSongCard.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable @next/next/no-img-element */
 import React, { useState } from "react";
 import { PauseIcon, PlayCircleIcon } from "../../__modules/Vectors";
 
@@ -6,14 +7,17 @@ const TopSongCard = (props: any) => {
   const [isPlaying, setIsPlaying] = useState(false);
   const [isPlayingIndex, setIsPlayingIndex] = useState(-1);
 
-  interface SongoData{
-    id:number, title:string, img:"string", artist:string
+  interface SongoData {
+    id: number;
+    title: string;
+    img: "string";
+    artist: string;
   }
 
   return (
     <div className="py-4">
       <div className="flex flex-wrap -ml-4 -mr-4">
-        {props.data.map((song : SongoData) => {
+        {props.data.map((song: SongoData) => {
           const { id, title, img, artist } = song as SongoData;
           return (
             <div
diff --git a/components/modules/__modules__/_Vectors/index.jsx b/components/modules/__modules__/_Vectors/index.jsx
deleted file mode 100644
index b84af71..0000000
--- a/components/modules/__modules__/_Vectors/index.jsx
+++ /dev/null
@@ -1,9 +0,0 @@
-// import { GiHamburgerMenu as VHamburger } from 'react-icons/gi';
-// import { BiDotsVerticalRounded as VDots } from "react-icons/bi"
-// import { FaPlay as VPlay } from 'react-icons/fa'
-// import { BsPauseCircleFill as VPause } from 'react-icons/bs'
-// import { IoStarOutline as VStar } from 'react-icons/io5'
-// import { ImNext as VNext } from 'react-icons/im';
-// import { ImPrevious as VPrev } from 'react-icons/im'
-// import VWave from './wavePlayVector';
-// export { VHamburger, VDots, VWave, VPrev, VNext, VPlay, VPause, VStar };
diff --git a/components/modules/__modules__/_Vectors/index.tsx b/components/modules/__modules__/_Vectors/index.tsx
new file mode 100644
index 0000000..b997794
--- /dev/null
+++ b/components/modules/__modules__/_Vectors/index.tsx
@@ -0,0 +1,9 @@
+import { GiHamburgerMenu as VHamburger } from "react-icons/gi";
+import { BiDotsVerticalRounded as VDots } from "react-icons/bi";
+import { FaPlay as VPlay } from "react-icons/fa";
+import { BsPauseCircleFill as VPause } from "react-icons/bs";
+import { IoStarOutline as VStar } from "react-icons/io5";
+import { ImNext as VNext } from "react-icons/im";
+import { ImPrevious as VPrev } from "react-icons/im";
+import VWave from "./wavePlayVector";
+export { VHamburger, VDots, VWave, VPrev, VNext, VPlay, VPause, VStar };
diff --git a/components/modules/__modules__/_Vectors/wavePlayVector.jsx b/components/modules/__modules__/_Vectors/wavePlayVector.jsx
deleted file mode 100644
index e73dd23..0000000
--- a/components/modules/__modules__/_Vectors/wavePlayVector.jsx
+++ /dev/null
@@ -1,20 +0,0 @@
-// import React from 'react'
-
-// const VWave = ({ className }) => {
-// 	return (
-// 		<svg version="1.1" id="Icons" xmlns="http://www.w3.org/2000/svg" fill='white' x="0px" y="0px" viewBox="0 0 32 32" className={className} >
-// 			<g>
-// 				<path d="M4,13c-0.6,0-1,0.4-1,1v4c0,0.6,0.4,1,1,1s1-0.4,1-1v-4C5,13.4,4.6,13,4,13z" />
-// 				<path d="M8,11c-0.6,0-1,0.4-1,1v8c0,0.6,0.4,1,1,1s1-0.4,1-1v-8C9,11.4,8.6,11,8,11z" />
-// 				<path d="M12,6c-0.6,0-1,0.4-1,1v18c0,0.6,0.4,1,1,1s1-0.4,1-1V7C13,6.4,12.6,6,12,6z" />
-// 				<path d="M16,13c-0.6,0-1,0.4-1,1v4c0,0.6,0.4,1,1,1s1-0.4,1-1v-4C17,13.4,16.6,13,16,13z" />
-// 				<path d="M20,9c-0.6,0-1,0.4-1,1v12c0,0.6,0.4,1,1,1s1-0.4,1-1V10C21,9.4,20.6,9,20,9z" />
-// 				<path d="M24,6c-0.6,0-1,0.4-1,1v18c0,0.6,0.4,1,1,1s1-0.4,1-1V7C25,6.4,24.6,6,24,6z" />
-// 				<path d="M28,13c-0.6,0-1,0.4-1,1v4c0,0.6,0.4,1,1,1s1-0.4,1-1v-4C29,13.4,28.6,13,28,13z" />
-// 			</g>
-// 		</svg>
-
-// 	)
-// }
-
-// export default VWave
diff --git a/components/modules/__modules__/_Vectors/wavePlayVector.tsx b/components/modules/__modules__/_Vectors/wavePlayVector.tsx
new file mode 100644
index 0000000..c1c83b2
--- /dev/null
+++ b/components/modules/__modules__/_Vectors/wavePlayVector.tsx
@@ -0,0 +1,28 @@
+import React, { FC } from "react";
+
+const VWave: FC<{ className: string }> = ({ className }) => {
+  return (
+    <svg
+      version="1.1"
+      id="Icons"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="white"
+      x="0px"
+      y="0px"
+      viewBox="0 0 32 32"
+      className={className}
+    >
+      <g>
+        <path d="M4,13c-0.6,0-1,0.4-1,1v4c0,0.6,0.4,1,1,1s1-0.4,1-1v-4C5,13.4,4.6,13,4,13z" />
+        <path d="M8,11c-0.6,0-1,0.4-1,1v8c0,0.6,0.4,1,1,1s1-0.4,1-1v-8C9,11.4,8.6,11,8,11z" />
+        <path d="M12,6c-0.6,0-1,0.4-1,1v18c0,0.6,0.4,1,1,1s1-0.4,1-1V7C13,6.4,12.6,6,12,6z" />
+        <path d="M16,13c-0.6,0-1,0.4-1,1v4c0,0.6,0.4,1,1,1s1-0.4,1-1v-4C17,13.4,16.6,13,16,13z" />
+        <path d="M20,9c-0.6,0-1,0.4-1,1v12c0,0.6,0.4,1,1,1s1-0.4,1-1V10C21,9.4,20.6,9,20,9z" />
+        <path d="M24,6c-0.6,0-1,0.4-1,1v18c0,0.6,0.4,1,1,1s1-0.4,1-1V7C25,6.4,24.6,6,24,6z" />
+        <path d="M28,13c-0.6,0-1,0.4-1,1v4c0,0.6,0.4,1,1,1s1-0.4,1-1v-4C29,13.4,28.6,13,28,13z" />
+      </g>
+    </svg>
+  );
+};
+
+export default VWave;