diff --git a/components/AddNewSongPage/index.jsx b/components/AddNewSongPage/index.jsx
deleted file mode 100644
index d9d90b2..0000000
--- a/components/AddNewSongPage/index.jsx
+++ /dev/null
@@ -1,14 +0,0 @@
-// import React from "react";
-// import { useState } from "react";
-// import AddNewSinger from "../modules/AddNewsinger";
-// import PageCard from "../modules/__modules__/Card/PageCard";
-
-// const AddNewSongPage = () => {
-//   const [isTopNav, setIsTopNav] = useState(false);
-//   return (
-//     <PageCard setIsTopNav={setIsTopNav}>
-//       <AddNewSinger isTopNav={isTopNav} />
-//     </PageCard>
-//   );
-// };
-// export default AddNewSongPage;
diff --git a/components/AddNewSongPage/index.tsx b/components/AddNewSongPage/index.tsx
new file mode 100644
index 0000000..875e7ff
--- /dev/null
+++ b/components/AddNewSongPage/index.tsx
@@ -0,0 +1,14 @@
+import React from "react";
+import { useState } from "react";
+import AddNewSinger from "../modules/AddNewSinger";
+import PageCard from "../modules/__modules__/Card/PageCard";
+
+const AddNewSongPage = () => {
+  const [isTopNav, setIsTopNav] = useState(false);
+  return (
+    <PageCard setIsTopNav={setIsTopNav}>
+      <AddNewSinger />
+    </PageCard>
+  );
+};
+export default AddNewSongPage;
diff --git a/components/modules/AddNewSinger/index.jsx b/components/modules/AddNewSinger/index.jsx
deleted file mode 100644
index be92aea..0000000
--- a/components/modules/AddNewSinger/index.jsx
+++ /dev/null
@@ -1,84 +0,0 @@
-// import React from "react";
-// import PropTypes from "prop-types";
-
-// const AddNewSinger = () => {
-//   return (
-//     <>
-//       <div className="my-24 mobile:mb-32 bg-white flex flex-col shadow-lg mr-5 rounded-xl pt-2">
-//         <div className="flex justify-between items-center pb-5 border-b">
-//           <h2 className="font-bold text-2xl text-gray-700 pl-5 pt-3">
-//             Add New singer
-//           </h2>
-//         </div>
-//         <form className="flex flex-col px-2 py-4 gap-2">
-//           <div className="flex flex-col px-2 w-full">
-//             <label for="singer-name" className="pb-2">
-//               singer name
-//             </label>
-//             <input
-//               type="text"
-//               name="singer-name"
-//               className="bg-transparent border  px-3 transition-all py-2 rounded-md outline-none"
-//             />
-//           </div>
-//           <div className="flex flex-col px-2 w-full">
-//             <label for="profile" className="pb-2">
-//               Singer Profile:
-//             </label>
-//             <input
-//               type="file"
-//               name="profile"
-//               className="
-//                 flex
-//                 file:mr-4 file:py-2 file:px-4
-//                 file:rounded-full file:border-0
-//                 file:text-sm file:font-semibold
-//                 file:bg-primary file:text-gray-100
-//                 hover:file:text-primary
-//                 hover:file:bg-gray-100
-//                 hover:file:shadow-lg
-//                 bg-transparent border  px-3 transition-all py-2 rounded-md outline-none"
-//             />
-//           </div>
-//           <div className="flex flex-col px-2 w-full">
-//             <label for="email" className="pb-2">
-//               singer email
-//             </label>
-//             <input
-//               type="email"
-//               name="email"
-//               className="bg-transparent border  px-3 transition-all py-2 rounded-md outline-none"
-//             />
-//           </div>
-//           <div className="flex flex-col px-2 ">
-//             <label for="category-name" className="py-2">
-//               Singer Description:
-//             </label>
-//             <textarea
-//               name="category-name"
-//               cols="20"
-//               rows="6"
-//               className="bg-transparent border  px-3 transition-all py-4 rounded-md outline-none"
-//             />
-//           </div>
-//           <div className="flex capitalize right gap-4 px-2">
-//             <button className="bg-primary w-20 px-2 py-2 rounded-xl text-white font-medium ">
-//               submit
-//             </button>
-//             <button
-//               type="reset"
-//               className="bg-orange-600 w-20 px-2 py-2 rounded-xl text-white font-medium "
-//             >
-//               reset
-//             </button>
-//           </div>
-//         </form>
-//       </div>
-//     </>
-//   );
-// };
-
-// AddNewSinger.propTypes = {
-//   isTopNav: PropTypes.bool.isRequired,
-// };
-// export default AddNewSinger;
diff --git a/components/modules/AddNewSinger/index.tsx b/components/modules/AddNewSinger/index.tsx
new file mode 100644
index 0000000..355e512
--- /dev/null
+++ b/components/modules/AddNewSinger/index.tsx
@@ -0,0 +1,81 @@
+import React from "react";
+
+const AddNewSinger = () => {
+  return (
+    <>
+      <div className="my-24 mobile:mb-32 bg-white flex flex-col shadow-lg mr-5 rounded-xl pt-2">
+        <div className="flex justify-between items-center pb-5 border-b">
+          <h2 className="font-bold text-2xl text-gray-700 pl-5 pt-3">
+            Add New singer
+          </h2>
+        </div>
+        <form className="flex flex-col px-2 py-4 gap-2">
+          <div className="flex flex-col px-2 w-full">
+            <label htmlFor="singer-name" className="pb-2">
+              singer name
+            </label>
+            <input
+              type="text"
+              name="singer-name"
+              className="bg-transparent border  px-3 transition-all py-2 rounded-md outline-none"
+            />
+          </div>
+          <div className="flex flex-col px-2 w-full">
+            <label htmlFor="profile" className="pb-2">
+              Singer Profile:
+            </label>
+            <input
+              type="file"
+              name="profile"
+              className="
+                flex
+                file:mr-4 file:py-2 file:px-4
+                file:rounded-full file:border-0
+                file:text-sm file:font-semibold
+                file:bg-primary file:text-gray-100
+                hover:file:text-primary
+                hover:file:bg-gray-100
+                hover:file:shadow-lg
+                bg-transparent border  px-3 transition-all py-2 rounded-md outline-none"
+            />
+          </div>
+          <div className="flex flex-col px-2 w-full">
+            <label htmlFor="email" className="pb-2">
+              singer email
+            </label>
+            <input
+              type="email"
+              name="email"
+              className="bg-transparent border  px-3 transition-all py-2 rounded-md outline-none"
+            />
+          </div>
+          <div className="flex flex-col px-2 ">
+            <label htmlFor="category-name" className="py-2">
+              Singer Description:
+            </label>
+            <textarea
+              name="category-name"
+              cols={20}
+              rows={6}
+              className="bg-transparent border  px-3 transition-all py-4 rounded-md outline-none"
+            />
+          </div>
+          <div className="flex capitalize right gap-4 px-2">
+            <button className="bg-primary w-20 px-2 py-2 rounded-xl text-white font-medium ">
+              submit
+            </button>
+            <button
+              type="reset"
+              className="bg-orange-600 w-20 px-2 py-2 rounded-xl text-white font-medium "
+            >
+              reset
+            </button>
+          </div>
+        </form>
+      </div>
+    </>
+  );
+};
+
+
+export default AddNewSinger;