diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..b67a62f
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "editor.fontFamily": "'JetBrains Mono', 'monospace', monospace"
+}
\ No newline at end of file
diff --git a/components/AddCategoryPage/index.jsx b/components/AddCategoryPage/index.jsx
deleted file mode 100644
index bbb2d55..0000000
--- a/components/AddCategoryPage/index.jsx
+++ /dev/null
@@ -1,14 +0,0 @@
-// import React from "react";
-// import { useState } from "react";
-// import AddCategory from "../modules/AddCategory";
-// import PageCard from "../modules/__modules__/Card/PageCard";
-
-// const AddCategoryPage = () => {
-//   const [isTopNav, setIsTopNav] = useState(false);
-//   return (
-//     <PageCard setIsTopNav={setIsTopNav}>
-//       <AddCategory isTopNav={isTopNav} />
-//     </PageCard>
-//   );
-// };
-// export default AddCategoryPage;
diff --git a/components/AddCategoryPage/index.tsx b/components/AddCategoryPage/index.tsx
new file mode 100644
index 0000000..a3a93ed
--- /dev/null
+++ b/components/AddCategoryPage/index.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+import { useState } from "react";
+import AddCategory from "../modules/AddCategory";
+import PageCard from "../modules/__modules__/Card/PageCard";
+
+const AddCategoryPage = () => {
+  const [isTopNav, setIsTopNav] = useState(false);
+  
+  return (
+    <PageCard setIsTopNav={setIsTopNav}>
+      <AddCategory  />
+    </PageCard>
+  );
+};
+export default AddCategoryPage;
diff --git a/components/modules/AddCategory/index.jsx b/components/modules/AddCategory/index.jsx
deleted file mode 100644
index cbf5f2a..0000000
--- a/components/modules/AddCategory/index.jsx
+++ /dev/null
@@ -1,55 +0,0 @@
-// import React from "react";
-// import PropTypes from "prop-types";
-
-// const AddCategory = () => {
-//   return (
-//     <>
-//       <div className="my-24 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 Categories
-//           </h2>
-//         </div>
-//         <form className="flex flex-col px-2 py-4 gap-2">
-//           <div className="flex flex-col px-2 w-full">
-//             <label for="category-name" className="pb-2">
-//               choose a name
-//             </label>
-//             <input
-//               type="text"
-//               name="category-name"
-//               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">
-//               Category 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>
-//     </>
-//   );
-// };
-
-// AddCategory.propTypes = {
-//   isTopNav: PropTypes.bool.isRequired,
-// };
-// export default AddCategory;
diff --git a/components/modules/AddCategory/index.tsx b/components/modules/AddCategory/index.tsx
new file mode 100644
index 0000000..5e95157
--- /dev/null
+++ b/components/modules/AddCategory/index.tsx
@@ -0,0 +1,52 @@
+import React from "react";
+
+const AddCategory = () => {
+  return (
+    <>
+      <div className="my-24 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 Categories
+          </h2>
+        </div>
+        <form className="flex flex-col px-2 py-4 gap-2">
+          <div className="flex flex-col px-2 w-full">
+            <label htmlFor="category-name" className="pb-2">
+              choose a name
+            </label>
+            <input
+              type="text"
+              name="category-name"
+              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">
+              Category 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 AddCategory;
diff --git a/pages/admin/addcategory.js b/pages/admin/addcategory.js
deleted file mode 100644
index 15d1084..0000000
--- a/pages/admin/addcategory.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from "react";
-// import AddCategoryPage from '../../components/AddCategoryPage'
-
-const addcategory = () => {
-  // return (
-  //   <div className="bg-globalBg h-screen">
-  //       <AddCategoryPage/>
-  //   </div>
-  // )
-  <></>;
-};
-
-export default addcategory;
diff --git a/pages/admin/addcategory.tsx b/pages/admin/addcategory.tsx
new file mode 100644
index 0000000..accbf8f
--- /dev/null
+++ b/pages/admin/addcategory.tsx
@@ -0,0 +1,13 @@
+import React from "react";
+import AddCategoryPage from '../../components/AddCategoryPage'
+
+const addcategory = () => {
+  return (
+    <div className="bg-globalBg h-screen">
+        <AddCategoryPage/>
+    </div>
+  )
+
+};
+
+export default addcategory;