diff --git a/frontend/edu-connect/js-cookie.d.ts b/frontend/edu-connect/js-cookie.d.ts
new file mode 100644
index 0000000..102a985
--- /dev/null
+++ b/frontend/edu-connect/js-cookie.d.ts
@@ -0,0 +1 @@
+declare module 'js-cookie';
\ No newline at end of file
diff --git a/frontend/edu-connect/package-lock.json b/frontend/edu-connect/package-lock.json
index 92864ab..ed0af8e 100644
--- a/frontend/edu-connect/package-lock.json
+++ b/frontend/edu-connect/package-lock.json
@@ -8,14 +8,24 @@
       "name": "edu-connect",
       "version": "0.1.0",
       "dependencies": {
+        "@radix-ui/react-avatar": "^1.1.2",
+        "@radix-ui/react-dropdown-menu": "^2.1.4",
+        "@radix-ui/react-label": "^2.1.1",
         "@radix-ui/react-navigation-menu": "^1.2.3",
+        "@radix-ui/react-progress": "^1.1.1",
+        "@radix-ui/react-scroll-area": "^1.2.2",
+        "@radix-ui/react-select": "^2.1.4",
         "@radix-ui/react-slot": "^1.1.1",
+        "@radix-ui/react-tabs": "^1.1.2",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
+        "js-cookie": "^3.0.5",
         "lucide-react": "^0.471.0",
         "next": "14.2.23",
         "react": "^18",
         "react-dom": "^18",
+        "react-pageflip": "^2.0.3",
+        "react-pdf": "^9.2.1",
         "tailwind-merge": "^2.6.0",
         "tailwindcss-animate": "^1.0.7"
       },
@@ -100,6 +110,40 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.6.9",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.9.tgz",
+      "integrity": "sha512-uMXCuQ3BItDUbAMhIXw7UPXRfAlOAvZzdK9BWpE60MCn+Svt3aLn9jsPTi/WNGlRUu2uI0v5S7JiIUsbsvh3fw==",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.9"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.6.13",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.13.tgz",
+      "integrity": "sha512-umqzocjDgNRGTuO7Q8CU32dkHkECqI8ZdMZ5Swb6QAM0t5rnlrN3lGo1hdpscRd3WS8T6DKYK4ephgIH9iRh3w==",
+      "dependencies": {
+        "@floating-ui/core": "^1.6.0",
+        "@floating-ui/utils": "^0.2.9"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.2.tgz",
+      "integrity": "sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==",
+      "dependencies": {
+        "@floating-ui/dom": "^1.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.9",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.9.tgz",
+      "integrity": "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg=="
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.13.0",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz",
@@ -418,11 +462,63 @@
         "node": ">=14"
       }
     },
+    "node_modules/@radix-ui/number": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.1.0.tgz",
+      "integrity": "sha512-V3gRzhVNU1ldS5XhAPTom1fOIo4ccrjjJgmE+LI2h/WaFpHmx0MQApT+KZHnx8abG6Avtfcz4WoEciMnpFT3HQ=="
+    },
     "node_modules/@radix-ui/primitive": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.1.tgz",
       "integrity": "sha512-SJ31y+Q/zAyShtXJc8x83i9TYdbAfHZ++tUZnvjJJqFjzsdUnKsxPL6IEtBlxKkU7yzer//GQtZSV4GbldL3YA=="
     },
+    "node_modules/@radix-ui/react-arrow": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.1.tgz",
+      "integrity": "sha512-NaVpZfmv8SKeZbn4ijN2V3jlHA9ngBG16VnIIm22nUR0Yk8KUALyBxT3KYEUnNuch9sTE8UTsS3whzBgKOL30w==",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-avatar": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-avatar/-/react-avatar-1.1.2.tgz",
+      "integrity": "sha512-GaC7bXQZ5VgZvVvsJ5mu/AEbjYLnhhkoidOboC50Z6FFlLA03wG2ianUoH+zgDQ31/9gCF59bE4+2bBgTyMiig==",
+      "dependencies": {
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.1",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-collection": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.1.tgz",
@@ -516,6 +612,72 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-dropdown-menu": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.1.4.tgz",
+      "integrity": "sha512-iXU1Ab5ecM+yEepGAWK8ZhMyKX4ubFdCNtol4sT9D0OVErG9PNElfx3TQhjw7n7BC5nFVz68/5//clWy+8TXzA==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-menu": "2.1.4",
+        "@radix-ui/react-primitive": "2.0.1",
+        "@radix-ui/react-use-controllable-state": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-guards": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.1.tgz",
+      "integrity": "sha512-pSIwfrT1a6sIoDASCSpFwOasEwKTZWDw/iBdtnqKO7v6FeOzYJ7U53cPzYFVR3geGGXgVHaH+CdngrrAzqUGxg==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-scope": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.1.tgz",
+      "integrity": "sha512-01omzJAYRxXdG2/he/+xy+c8a8gCydoQ1yOxnWNcRhrrBW5W+RQJ22EK1SaO8tb3WoUsuEw7mJjBozPzihDFjA==",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.1",
+        "@radix-ui/react-use-callback-ref": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-id": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.0.tgz",
@@ -533,6 +695,67 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-label": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.1.1.tgz",
+      "integrity": "sha512-UUw5E4e/2+4kFMH7+YxORXGWggtY6sM8WIwh5RZchhLuUg2H1hc98Py+pr8HMz6rdaYrK2t296ZEjYLOCO5uUw==",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-menu": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.1.4.tgz",
+      "integrity": "sha512-BnOgVoL6YYdHAG6DtXONaR29Eq4nvbi8rutrV/xlr3RQCMMb3yqP85Qiw/3NReozrSW+4dfLkK+rc1hb4wPU/A==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-collection": "1.1.1",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-dismissable-layer": "1.1.3",
+        "@radix-ui/react-focus-guards": "1.1.1",
+        "@radix-ui/react-focus-scope": "1.1.1",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-popper": "1.2.1",
+        "@radix-ui/react-portal": "1.1.3",
+        "@radix-ui/react-presence": "1.1.2",
+        "@radix-ui/react-primitive": "2.0.1",
+        "@radix-ui/react-roving-focus": "1.1.1",
+        "@radix-ui/react-slot": "1.1.1",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "^2.6.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-navigation-menu": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-navigation-menu/-/react-navigation-menu-1.2.3.tgz",
@@ -568,6 +791,60 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-popper": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.1.tgz",
+      "integrity": "sha512-3kn5Me69L+jv82EKRuQCXdYyf1DqHwD2U/sxoNgBGCB7K9TRc3bQamQ+5EPM9EvyPdli0W41sROd+ZU1dTCztw==",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.0.0",
+        "@radix-ui/react-arrow": "1.1.1",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.1",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0",
+        "@radix-ui/react-use-rect": "1.1.0",
+        "@radix-ui/react-use-size": "1.1.0",
+        "@radix-ui/rect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-portal": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.3.tgz",
+      "integrity": "sha512-NciRqhXnGojhT93RPyDaMPfLH3ZSl4jjIFbZQ1b/vxvZEdHsBZ49wP9w8L3HzUQwep01LcWtkUvm0OVB5JAHTw==",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.1",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-presence": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.2.tgz",
@@ -613,6 +890,131 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-progress": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-progress/-/react-progress-1.1.1.tgz",
+      "integrity": "sha512-6diOawA84f/eMxFHcWut0aE1C2kyE9dOyCTQOMRR2C/qPiXz/X0SaiA/RLbapQaXUCmy0/hLMf9meSccD1N0pA==",
+      "dependencies": {
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-roving-focus": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.1.tgz",
+      "integrity": "sha512-QE1RoxPGJ/Nm8Qmk0PxP8ojmoaS67i0s7hVssS7KuI2FQoc/uzVlZsqKfQvxPE6D8hICCPHJ4D88zNhT3OOmkw==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-collection": "1.1.1",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.1",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-scroll-area": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-scroll-area/-/react-scroll-area-1.2.2.tgz",
+      "integrity": "sha512-EFI1N/S3YxZEW/lJ/H1jY3njlvTd8tBmgKEn4GHi51+aMm94i6NmAJstsm5cu3yJwYqYc93gpCPm21FeAbFk6g==",
+      "dependencies": {
+        "@radix-ui/number": "1.1.0",
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-presence": "1.1.2",
+        "@radix-ui/react-primitive": "2.0.1",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-select": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.1.4.tgz",
+      "integrity": "sha512-pOkb2u8KgO47j/h7AylCj7dJsm69BXcjkrvTqMptFqsE2i0p8lHkfgneXKjAgPzBMivnoMyt8o4KiV4wYzDdyQ==",
+      "dependencies": {
+        "@radix-ui/number": "1.1.0",
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-collection": "1.1.1",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-dismissable-layer": "1.1.3",
+        "@radix-ui/react-focus-guards": "1.1.1",
+        "@radix-ui/react-focus-scope": "1.1.1",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-popper": "1.2.1",
+        "@radix-ui/react-portal": "1.1.3",
+        "@radix-ui/react-primitive": "2.0.1",
+        "@radix-ui/react-slot": "1.1.1",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0",
+        "@radix-ui/react-use-previous": "1.1.0",
+        "@radix-ui/react-visually-hidden": "1.1.1",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "^2.6.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-slot": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.1.tgz",
@@ -630,6 +1032,35 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-tabs": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.1.2.tgz",
+      "integrity": "sha512-9u/tQJMcC2aGq7KXpGivMm1mgq7oRJKXphDwdypPd/j21j/2znamPU8WkXgnhUaTrSFNIt8XhOyCAupg8/GbwQ==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-direction": "1.1.0",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-presence": "1.1.2",
+        "@radix-ui/react-primitive": "2.0.1",
+        "@radix-ui/react-roving-focus": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-use-callback-ref": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz",
@@ -706,6 +1137,40 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-use-rect": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.0.tgz",
+      "integrity": "sha512-0Fmkebhr6PiseyZlYAOtLS+nb7jLmpqTrJyv61Pe68MKYW6OWdRE2kI70TaYY27u7H0lajqM3hSMMLFq18Z7nQ==",
+      "dependencies": {
+        "@radix-ui/rect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-size": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.0.tgz",
+      "integrity": "sha512-XW3/vWuIXHa+2Uwcc2ABSfcCledmXhhQPlGbfcRXbiUQI5Icjcg19BGCZVKKInYbvUCut/ufbbLLPFC5cbb1hw==",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-visually-hidden": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.1.1.tgz",
@@ -728,6 +1193,11 @@
         }
       }
     },
+    "node_modules/@radix-ui/rect": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.1.0.tgz",
+      "integrity": "sha512-A9+lCBZoaMJlVKcRBz2YByCG+Cp2t6nAnMnNba+XiWxnj6r4JUFqfsgwocMBZU9LPtdxC6wB56ySYpc7LQIoJg=="
+    },
     "node_modules/@rtsao/scc": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
@@ -1095,6 +1565,17 @@
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
       "dev": true
     },
+    "node_modules/aria-hidden": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.4.tgz",
+      "integrity": "sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/aria-query": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz",
@@ -1297,6 +1778,26 @@
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
     },
+    "node_modules/base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "optional": true
+    },
     "node_modules/binary-extensions": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
@@ -1308,6 +1809,17 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/bl": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
+      "integrity": "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==",
+      "optional": true,
+      "dependencies": {
+        "buffer": "^5.5.0",
+        "inherits": "^2.0.4",
+        "readable-stream": "^3.4.0"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -1329,6 +1841,30 @@
         "node": ">=8"
       }
     },
+    "node_modules/buffer": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
+      "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "optional": true,
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.1.13"
+      }
+    },
     "node_modules/busboy": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
@@ -1423,6 +1959,21 @@
         }
       ]
     },
+    "node_modules/canvas": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/canvas/-/canvas-3.0.1.tgz",
+      "integrity": "sha512-PcpVF4f8RubAeN/jCQQ/UymDKzOiLmRPph8fOTzDnlsUihkO/AUlxuhaa7wGRc3vMcCbV1fzuvyu5cWZlIcn1w==",
+      "hasInstallScript": true,
+      "optional": true,
+      "dependencies": {
+        "node-addon-api": "^7.0.0",
+        "prebuild-install": "^7.1.1",
+        "simple-get": "^3.0.3"
+      },
+      "engines": {
+        "node": "^18.12.0 || >= 20.9.0"
+      }
+    },
     "node_modules/chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -1473,6 +2024,12 @@
         "node": ">= 6"
       }
     },
+    "node_modules/chownr": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz",
+      "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==",
+      "optional": true
+    },
     "node_modules/class-variance-authority": {
       "version": "0.7.1",
       "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
@@ -1631,6 +2188,27 @@
         }
       }
     },
+    "node_modules/decompress-response": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-4.2.1.tgz",
+      "integrity": "sha512-jOSne2qbyE+/r8G1VU+G/82LBs2Fs4LAsTiLSHOCOMZQl2OKZ6i8i4IyHemTe+/yIXOtTcRQMzPcgyhoFlqPkw==",
+      "optional": true,
+      "dependencies": {
+        "mimic-response": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/deep-extend": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
+      "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
+      "optional": true,
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
     "node_modules/deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -1671,6 +2249,28 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/detect-libc": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.3.tgz",
+      "integrity": "sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==",
+      "optional": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/detect-node-es": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
+      "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ=="
+    },
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -1717,6 +2317,15 @@
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
       "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg=="
     },
+    "node_modules/end-of-stream": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
+      "integrity": "sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==",
+      "optional": true,
+      "dependencies": {
+        "once": "^1.4.0"
+      }
+    },
     "node_modules/enhanced-resolve": {
       "version": "5.18.0",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.0.tgz",
@@ -2330,6 +2939,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/expand-template": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/expand-template/-/expand-template-2.0.3.tgz",
+      "integrity": "sha512-XYfuKMvj4O35f/pOXLObndIRvyQ+/+6AhODh+OKWj9S9498pHHn/IMszH+gt0fBCRWMNfk1ZSp5x3AifmnI2vg==",
+      "optional": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -2465,6 +3083,12 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/fs-constants": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
+      "integrity": "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==",
+      "optional": true
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -2545,6 +3169,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/get-nonce": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz",
+      "integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/get-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
@@ -2587,6 +3219,12 @@
         "url": "https://github.com/privatenumber/get-tsconfig?sponsor=1"
       }
     },
+    "node_modules/github-from-package": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/github-from-package/-/github-from-package-0.0.0.tgz",
+      "integrity": "sha512-SyHy3T1v2NUXn29OsWdxmK6RwHD+vkj3v8en8AOBZ1wBQ/hCAQ5bAQTD02kW4W9tUp/3Qh6J8r9EvntiyCmOOw==",
+      "optional": true
+    },
     "node_modules/glob": {
       "version": "10.3.10",
       "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.10.tgz",
@@ -2781,6 +3419,26 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/ieee754": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "optional": true
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -2830,7 +3488,13 @@
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "dev": true
+      "devOptional": true
+    },
+    "node_modules/ini": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
+      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
+      "optional": true
     },
     "node_modules/internal-slot": {
       "version": "1.1.0",
@@ -3285,6 +3949,14 @@
         "jiti": "bin/jiti.js"
       }
     },
+    "node_modules/js-cookie": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
+      "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==",
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -3448,6 +4120,22 @@
         "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
+    "node_modules/make-cancellable-promise": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/make-cancellable-promise/-/make-cancellable-promise-1.3.2.tgz",
+      "integrity": "sha512-GCXh3bq/WuMbS+Ky4JBPW1hYTOU+znU+Q5m9Pu+pI8EoUqIHk9+tviOKC6/qhHh8C4/As3tzJ69IF32kdz85ww==",
+      "funding": {
+        "url": "https://github.com/wojtekmaj/make-cancellable-promise?sponsor=1"
+      }
+    },
+    "node_modules/make-event-props": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/make-event-props/-/make-event-props-1.6.2.tgz",
+      "integrity": "sha512-iDwf7mA03WPiR8QxvcVHmVWEPfMY1RZXerDVNCRYW7dUr2ppH3J58Rwb39/WG39yTZdRSxr3x+2v22tvI0VEvA==",
+      "funding": {
+        "url": "https://github.com/wojtekmaj/make-event-props?sponsor=1"
+      }
+    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -3457,6 +4145,22 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/merge-refs": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/merge-refs/-/merge-refs-1.3.0.tgz",
+      "integrity": "sha512-nqXPXbso+1dcKDpPCXvwZyJILz+vSLqGGOnDrYHQYE+B8n9JTCekVLC65AfCpR4ggVyA/45Y0iR9LDyS2iI+zA==",
+      "funding": {
+        "url": "https://github.com/wojtekmaj/merge-refs?sponsor=1"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -3477,6 +4181,18 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/mimic-response": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-2.1.0.tgz",
+      "integrity": "sha512-wXqjST+SLt7R009ySCglWBCFpjUygmCIfD790/kVbiGmUgfYGuB14PiTd5DwVxSV4NcYHjzMkoj5LjQZwTQLEA==",
+      "optional": true,
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -3493,7 +4209,7 @@
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
       "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
-      "dev": true,
+      "devOptional": true,
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -3506,6 +4222,12 @@
         "node": ">=16 || 14 >=14.17"
       }
     },
+    "node_modules/mkdirp-classic": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz",
+      "integrity": "sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==",
+      "optional": true
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -3539,6 +4261,12 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/napi-build-utils": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/napi-build-utils/-/napi-build-utils-1.0.2.tgz",
+      "integrity": "sha512-ONmRUqK7zj7DWX0D9ADe03wbwOBZxNAfF20PlGfCWQcD3+/MakShIHrMqx9YwPTfxDdF1zLeL+RGZiR9kGMLdg==",
+      "optional": true
+    },
     "node_modules/natural-compare": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
@@ -3621,6 +4349,24 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/node-abi": {
+      "version": "3.71.0",
+      "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-3.71.0.tgz",
+      "integrity": "sha512-SZ40vRiy/+wRTf21hxkkEjPJZpARzUMVcJoQse2EF8qkUWbbO2z7vd5oA/H6bVH6SZQ5STGcu0KRDS7biNRfxw==",
+      "optional": true,
+      "dependencies": {
+        "semver": "^7.3.5"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/node-addon-api": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
+      "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
+      "optional": true
+    },
     "node_modules/normalize-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
@@ -3754,7 +4500,7 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
       "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "wrappy": "1"
       }
@@ -3823,6 +4569,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/page-flip": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/page-flip/-/page-flip-2.0.7.tgz",
+      "integrity": "sha512-96lQFUUz7r/LZzEUZJ3yBIMEKU9+m8HMFDzTvTdD6P7Ag/wXINjp9n0W7b4wanwnDbQETo4uNUoL3zMqpFxwGA=="
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -3881,6 +4632,27 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/path2d": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/path2d/-/path2d-0.2.2.tgz",
+      "integrity": "sha512-+vnG6S4dYcYxZd+CZxzXCNKdELYZSKfohrk98yajCo1PtRoDgCTrrwOvK1GT0UoAdVszagDVllQc0U1vaX4NUQ==",
+      "optional": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/pdfjs-dist": {
+      "version": "4.8.69",
+      "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-4.8.69.tgz",
+      "integrity": "sha512-IHZsA4T7YElCKNNXtiLgqScw4zPd3pG9do8UrznC757gMd7UPeHSL2qwNNMJo4r79fl8oj1Xx+1nh2YkzdMpLQ==",
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "canvas": "^3.0.0-rc2",
+        "path2d": "^0.2.1"
+      }
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -4058,6 +4830,84 @@
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
     },
+    "node_modules/prebuild-install": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/prebuild-install/-/prebuild-install-7.1.2.tgz",
+      "integrity": "sha512-UnNke3IQb6sgarcZIDU3gbMeTp/9SSU1DAIkil7PrqG1vZlBtY5msYccSKSHDqa3hNg436IXK+SNImReuA1wEQ==",
+      "optional": true,
+      "dependencies": {
+        "detect-libc": "^2.0.0",
+        "expand-template": "^2.0.3",
+        "github-from-package": "0.0.0",
+        "minimist": "^1.2.3",
+        "mkdirp-classic": "^0.5.3",
+        "napi-build-utils": "^1.0.1",
+        "node-abi": "^3.3.0",
+        "pump": "^3.0.0",
+        "rc": "^1.2.7",
+        "simple-get": "^4.0.0",
+        "tar-fs": "^2.0.0",
+        "tunnel-agent": "^0.6.0"
+      },
+      "bin": {
+        "prebuild-install": "bin.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/prebuild-install/node_modules/decompress-response": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz",
+      "integrity": "sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==",
+      "optional": true,
+      "dependencies": {
+        "mimic-response": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/prebuild-install/node_modules/mimic-response": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-3.1.0.tgz",
+      "integrity": "sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==",
+      "optional": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/prebuild-install/node_modules/simple-get": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/simple-get/-/simple-get-4.0.1.tgz",
+      "integrity": "sha512-brv7p5WgH0jmQJr1ZDDfKDOSeWWg+OVypG99A/5vYGPqJ6pxiaHLy8nxtFjBA7oMa01ebA9gfh1uMCFqOuXxvA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "optional": true,
+      "dependencies": {
+        "decompress-response": "^6.0.0",
+        "once": "^1.3.1",
+        "simple-concat": "^1.0.0"
+      }
+    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -4078,6 +4928,16 @@
         "react-is": "^16.13.1"
       }
     },
+    "node_modules/pump": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.2.tgz",
+      "integrity": "sha512-tUPXtzlGM8FE3P0ZL6DVs/3P58k9nk8/jZeQCurTJylQA8qFYzHFfhBJkuqyE0FifOsQ0uKWekiZ5g8wtr28cw==",
+      "optional": true,
+      "dependencies": {
+        "end-of-stream": "^1.1.0",
+        "once": "^1.3.1"
+      }
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -4106,6 +4966,30 @@
         }
       ]
     },
+    "node_modules/rc": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
+      "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
+      "optional": true,
+      "dependencies": {
+        "deep-extend": "^0.6.0",
+        "ini": "~1.3.0",
+        "minimist": "^1.2.0",
+        "strip-json-comments": "~2.0.1"
+      },
+      "bin": {
+        "rc": "cli.js"
+      }
+    },
+    "node_modules/rc/node_modules/strip-json-comments": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
+      "integrity": "sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==",
+      "optional": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/react": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
@@ -4135,6 +5019,108 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
       "dev": true
     },
+    "node_modules/react-pageflip": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/react-pageflip/-/react-pageflip-2.0.3.tgz",
+      "integrity": "sha512-k81mHhRvUM52y8jyzTCh5t4O0lepkLhp+XGSUzq2C3uD+iW99Cv0jfRlqFCjZbD5N3jKkIFr7/3giucoXKDP3Q==",
+      "dependencies": {
+        "page-flip": "latest"
+      }
+    },
+    "node_modules/react-pdf": {
+      "version": "9.2.1",
+      "resolved": "https://registry.npmjs.org/react-pdf/-/react-pdf-9.2.1.tgz",
+      "integrity": "sha512-AJt0lAIkItWEZRA5d/mO+Om4nPCuTiQ0saA+qItO967DTjmGjnhmF+Bi2tL286mOTfBlF5CyLzJ35KTMaDoH+A==",
+      "dependencies": {
+        "clsx": "^2.0.0",
+        "dequal": "^2.0.3",
+        "make-cancellable-promise": "^1.3.1",
+        "make-event-props": "^1.6.0",
+        "merge-refs": "^1.3.0",
+        "pdfjs-dist": "4.8.69",
+        "tiny-invariant": "^1.0.0",
+        "warning": "^4.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/wojtekmaj/react-pdf?sponsor=1"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-remove-scroll": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.6.2.tgz",
+      "integrity": "sha512-KmONPx5fnlXYJQqC62Q+lwIeAk64ws/cUw6omIumRzMRPqgnYqhSSti99nbj0Ry13bv7dF+BKn7NB+OqkdZGTw==",
+      "dependencies": {
+        "react-remove-scroll-bar": "^2.3.7",
+        "react-style-singleton": "^2.2.1",
+        "tslib": "^2.1.0",
+        "use-callback-ref": "^1.3.3",
+        "use-sidecar": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-remove-scroll-bar": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.8.tgz",
+      "integrity": "sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==",
+      "dependencies": {
+        "react-style-singleton": "^2.2.2",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-style-singleton": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.3.tgz",
+      "integrity": "sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==",
+      "dependencies": {
+        "get-nonce": "^1.0.0",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -4143,6 +5129,20 @@
         "pify": "^2.3.0"
       }
     },
+    "node_modules/readable-stream": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+      "optional": true,
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/readdirp": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -4320,6 +5320,26 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "optional": true
+    },
     "node_modules/safe-push-apply": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/safe-push-apply/-/safe-push-apply-1.0.0.tgz",
@@ -4365,7 +5385,7 @@
       "version": "7.6.3",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
       "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
-      "dev": true,
+      "devOptional": true,
       "bin": {
         "semver": "bin/semver.js"
       },
@@ -4521,6 +5541,37 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/simple-concat": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/simple-concat/-/simple-concat-1.0.1.tgz",
+      "integrity": "sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "optional": true
+    },
+    "node_modules/simple-get": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/simple-get/-/simple-get-3.1.1.tgz",
+      "integrity": "sha512-CQ5LTKGfCpvE1K0n2us+kuMPbk/q0EKl82s4aheV9oXjFEz6W/Y7oQFVJuU6QG77hRT4Ghb5RURteF5vnWjupA==",
+      "optional": true,
+      "dependencies": {
+        "decompress-response": "^4.2.0",
+        "once": "^1.3.1",
+        "simple-concat": "^1.0.0"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -4543,6 +5594,15 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/string_decoder": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
+      "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
+      "optional": true,
+      "dependencies": {
+        "safe-buffer": "~5.2.0"
+      }
+    },
     "node_modules/string-width": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
@@ -4882,6 +5942,34 @@
         "node": ">=6"
       }
     },
+    "node_modules/tar-fs": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-2.1.1.tgz",
+      "integrity": "sha512-V0r2Y9scmbDRLCNex/+hYzvp/zyYjvFbHPNgVTKfQvVrb6guiE/fxP+XblDNR011utopbkex2nM4dHNV6GDsng==",
+      "optional": true,
+      "dependencies": {
+        "chownr": "^1.1.1",
+        "mkdirp-classic": "^0.5.2",
+        "pump": "^3.0.0",
+        "tar-stream": "^2.1.4"
+      }
+    },
+    "node_modules/tar-stream": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-2.2.0.tgz",
+      "integrity": "sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==",
+      "optional": true,
+      "dependencies": {
+        "bl": "^4.0.3",
+        "end-of-stream": "^1.4.1",
+        "fs-constants": "^1.0.0",
+        "inherits": "^2.0.3",
+        "readable-stream": "^3.1.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/text-table": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
@@ -4907,6 +5995,11 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/tiny-invariant": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
+      "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg=="
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -4952,6 +6045,18 @@
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="
     },
+    "node_modules/tunnel-agent": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
+      "integrity": "sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==",
+      "optional": true,
+      "dependencies": {
+        "safe-buffer": "^5.0.1"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -5096,11 +6201,60 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/use-callback-ref": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.3.tgz",
+      "integrity": "sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/use-sidecar": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.3.tgz",
+      "integrity": "sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==",
+      "dependencies": {
+        "detect-node-es": "^1.1.0",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
     },
+    "node_modules/warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -5299,7 +6453,7 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
       "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/yaml": {
       "version": "2.7.0",
diff --git a/frontend/edu-connect/package.json b/frontend/edu-connect/package.json
index 9391175..f9fece5 100644
--- a/frontend/edu-connect/package.json
+++ b/frontend/edu-connect/package.json
@@ -9,14 +9,24 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@radix-ui/react-avatar": "^1.1.2",
+    "@radix-ui/react-dropdown-menu": "^2.1.4",
+    "@radix-ui/react-label": "^2.1.1",
     "@radix-ui/react-navigation-menu": "^1.2.3",
+    "@radix-ui/react-progress": "^1.1.1",
+    "@radix-ui/react-scroll-area": "^1.2.2",
+    "@radix-ui/react-select": "^2.1.4",
     "@radix-ui/react-slot": "^1.1.1",
+    "@radix-ui/react-tabs": "^1.1.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "js-cookie": "^3.0.5",
     "lucide-react": "^0.471.0",
     "next": "14.2.23",
     "react": "^18",
     "react-dom": "^18",
+    "react-pageflip": "^2.0.3",
+    "react-pdf": "^9.2.1",
     "tailwind-merge": "^2.6.0",
     "tailwindcss-animate": "^1.0.7"
   },
diff --git a/frontend/edu-connect/src/app/_partials/CommunitySection.tsx b/frontend/edu-connect/src/app/_partials/CommunitySection.tsx
new file mode 100644
index 0000000..533e493
--- /dev/null
+++ b/frontend/edu-connect/src/app/_partials/CommunitySection.tsx
@@ -0,0 +1,34 @@
+import CommunityImage from '@/assets/img/community-collboration.jpg'
+import Image from 'next/image'
+
+const CommunitySection = () => {
+  return(
+    <div className="bg-gray-50 border-t">
+      <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-16">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
+          <div>
+            <h2 className="text-3xl font-bold mb-6 text-purple-700">Join Our Growing Community</h2>
+            <p className="text-gray-600 mb-8">
+              Connect with fellow researchers, educators, and learners. Share your knowledge, collaborate on courses, and participate in meaningful discussions.
+            </p>
+            <div className="grid grid-cols-2 gap-4 text-center">
+              <div className="bg-white p-4 rounded-lg shadow-sm border border-purple-700">
+                <p className="text-2xl font-bold text-purple-600">500+</p>
+                <p className="text-gray-600">Expert Contributors</p>
+              </div>
+              <div className="bg-white p-4 rounded-lg shadow-sm border border-purple-700">
+                <p className="text-2xl font-bold text-purple-600">1000+</p>
+                <p className="text-gray-600">Research-Based Courses</p>
+              </div>
+            </div>
+          </div>
+          <div className="relative overlay-purple">
+            <Image src={CommunityImage} alt="Community collaboration" className="rounded-lg shadow-lg"  />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default CommunitySection
\ No newline at end of file
diff --git a/frontend/edu-connect/src/app/_partials/FeaturedCourses.tsx b/frontend/edu-connect/src/app/_partials/FeaturedCourses.tsx
new file mode 100644
index 0000000..c9985e1
--- /dev/null
+++ b/frontend/edu-connect/src/app/_partials/FeaturedCourses.tsx
@@ -0,0 +1,104 @@
+import React from 'react';
+import CourseCard from '@/components/elements/CourseCard';
+
+const FeaturedCourses = () => {
+  const courses = [
+    {
+      id: 1,
+      title: 'Foundation course to under stand about software',
+      category: 'Data & Tech',
+      lessons: 23,
+      duration: '1hr 30 min',
+      price: 32.00,
+      originalPrice: 89.00,
+      instructor: {
+        name : 'Micie John',
+        	image: 'https://dummyimage.com/300'
+      },
+      rating: 4.5,
+      reviews: 44,
+      image: 'https://dummyimage.com/300'
+    },
+    {
+      id: 2,
+      title: 'Nidhies course to under stand about softwere',
+      category: 'Mechanical',
+      lessons: 29,
+      duration: '2hr 30 min',
+      price: 32.00,
+      originalPrice: 89.00,
+      instructor: {
+        name : 'Micie John',
+        	image: 'https://dummyimage.com/300'
+      },
+      rating: 4.5,
+      reviews: 44,
+      image: 'https://dummyimage.com/300'
+    },
+    {
+      id: 3,
+      title: 'Minws course to under stand about solution',
+      category: 'Development',
+      lessons: 25,
+      duration: '1hr 40 min',
+      price: 40.00,
+      originalPrice: 89.00,
+      instructor: {
+        name : 'Micie John',
+        	image: 'https://dummyimage.com/300'
+      },
+      rating: 4.5,
+      reviews: 44,
+      image: 'https://dummyimage.com/300'
+    },
+    {
+      id: 3,
+      title: 'Minws course to under stand about solution',
+      category: 'Development',
+      lessons: 25,
+      duration: '1hr 40 min',
+      price: 40.00,
+      originalPrice: 89.00,
+      instructor: {
+        name : 'Micie John',
+        	image: 'https://dummyimage.com/300'
+      },
+      rating: 4.5,
+      reviews: 44,
+      image: 'https://dummyimage.com/300'
+    }
+  ];
+
+  return (
+    <div className="max-w-7xl mx-auto p-6">
+      <div className="flex justify-between items-center my-12">
+        <div>
+          <h1 className="text-3xl font-bold">Featured Courses</h1>
+          <h2 className="text-xl text-purple-700">View all featured courses</h2>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+        
+        {
+          courses?.map((course : Record<string,any> , index) => {
+            return(
+              <CourseCard
+                key={index}
+                id={course.id}
+                image ={course?.image}
+                title ={course?.title}
+                category = {course?.category}
+                lessons = {course?.lessons}
+                instructor = {course?.instructor}
+                duration={course?.duration}
+              />
+            )
+          })
+        }
+      </div>
+    </div>
+  );
+};
+
+export default FeaturedCourses;
\ No newline at end of file
diff --git a/frontend/edu-connect/src/app/_partials/FeaturesSection.tsx b/frontend/edu-connect/src/app/_partials/FeaturesSection.tsx
new file mode 100644
index 0000000..2ff68ad
--- /dev/null
+++ b/frontend/edu-connect/src/app/_partials/FeaturesSection.tsx
@@ -0,0 +1,66 @@
+
+type Feature = {
+  title : string , 
+  description : string
+  icon : React.ReactNode
+}
+const FeaturesSection = () => {
+
+  const features: Feature[] = [
+    {
+      title: 'Research-Based Learning',
+      description: 'Create and access courses developed by leading researchers and educators in their fields.',
+      icon: (
+        <div className="w-12 h-12 rounded-lg bg-purple-100 flex items-center justify-center">
+          <svg className="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
+          </svg>
+        </div>
+      )
+    },
+    {
+      title: 'Knowledge Sharing',
+      description: 'Join a vibrant community where educators and learners share insights and resources.',
+      icon: (
+        <div className="w-12 h-12 rounded-lg bg-purple-100 flex items-center justify-center">
+          <svg className="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
+          </svg>
+        </div>
+      )
+    },
+    {
+      title: 'Interactive Assessments',
+      description: 'Validate learning through comprehensive quizzes and assessments designed by experts.',
+      icon: (
+        <div className="w-12 h-12 rounded-lg bg-purple-100 flex items-center justify-center">
+          <svg className="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+          </svg>
+        </div>
+      )
+    }
+  ];
+
+  return(
+    <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-24">
+      <div className="text-center mb-16">
+        <h2 className="text-3xl font-bold text-gray-900 mb-4">Why Choose EduConnect?</h2>
+        <p className=" max-w-2xl mx-auto">
+          Our platform connects researchers, educators, and learners in a dynamic environment focused on quality education and knowledge sharing.
+        </p>
+      </div>
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+        {features.map((feature, index) => (
+            <div key={index} className="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition-shadow border border-purple-700">
+              {feature.icon}
+              <h3 className="text-xl font-semibold mt-4 mb-2">{feature.title}</h3>
+              <p className="text-gray-600">{feature.description}</p>
+            </div>
+        ))}
+      </div>
+      </div>
+  )
+}
+
+export default FeaturesSection
\ No newline at end of file
diff --git a/frontend/edu-connect/src/app/_partials/HeroSection.tsx b/frontend/edu-connect/src/app/_partials/HeroSection.tsx
new file mode 100644
index 0000000..d4d2d24
--- /dev/null
+++ b/frontend/edu-connect/src/app/_partials/HeroSection.tsx
@@ -0,0 +1,49 @@
+import LearnWithUS  from '@/assets/img/learn-with-us.jpg'
+import Image from 'next/image';
+
+const HeroSection: React.FC = () => {
+  return (
+    <div className="bg-gradient-to-br from-purple-900 to-indigo-900 text-white">
+      <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-24">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
+          <div>
+            <div className="text-purple-300 mb-4">
+              RESEARCH-POWERED LEARNING PLATFORM
+            </div>
+            <h1 className="text-4xl md:text-6xl font-bold mb-6">
+              Connect, Learn, and Grow Together
+            </h1>
+            <p className="mb-8 text-gray-300 text-lg">
+              Join a community where researchers and educators create engaging
+              courses, share knowledge, and help learners validate their
+              understanding through interactive assessments.
+            </p>
+            <div className="flex gap-4">
+              <button className="bg-white text-gray-900 px-6 py-3 rounded-md font-medium">
+                Explore Courses
+              </button>
+              <button className="text-white border border-white px-6 py-3 rounded-md font-medium">
+                Create Course →
+              </button>
+            </div>
+          </div>
+          <div className="relative">
+            <div className='overlay-purple'>
+              <Image
+                src={LearnWithUS}
+                alt="Collaborative learning"
+                className="rounded-lg shadow-xl"
+              />
+            </div>
+            <div className="absolute -bottom-4 -right-4 bg-purple-700 text-white p-4 rounded-lg shadow-lg">
+              <p className="font-bold">10,000+</p>
+              <p className="text-sm">Active Learners</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default HeroSection
diff --git a/frontend/edu-connect/src/app/auth/login/_partials/LoginForm.tsx b/frontend/edu-connect/src/app/auth/login/_partials/LoginForm.tsx
new file mode 100644
index 0000000..ab761ef
--- /dev/null
+++ b/frontend/edu-connect/src/app/auth/login/_partials/LoginForm.tsx
@@ -0,0 +1,82 @@
+import { useState } from 'react';
+import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { EyeIcon, EyeOffIcon } from 'lucide-react';
+
+export default function LoginForm() {
+  const [showPassword, setShowPassword] = useState(false);
+
+  return (
+    <div className="flex items-center justify-center min-h-[60vh]">
+      <Card className="w-full max-w-md shadow-lg border-0">
+        <CardHeader className="space-y-3">
+          <CardTitle className="text-2xl font-bold text-purple-600">Login</CardTitle>
+          <CardDescription className="text-gray-600">
+            Enter your email and password to login to your account
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form className="space-y-6">
+            <div className="space-y-2">
+              <Label htmlFor="email" className="text-gray-700">Email</Label>
+              <Input 
+                id="email" 
+                type="email" 
+                placeholder="Enter your email"
+                className="h-11 px-4 bg-gray-50/50 border-gray-200 focus:border-purple-500 focus:ring-purple-500"
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="password" className="text-gray-700">Password</Label>
+              <div className="relative">
+                <Input 
+                  id="password" 
+                  type={showPassword ? "text" : "password"}
+                  placeholder="Enter your password"
+                  className="h-11 px-4 bg-gray-50/50 border-gray-200 focus:border-purple-500 focus:ring-purple-500 pr-10"
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowPassword(!showPassword)}
+                  className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700"
+                >
+                  {showPassword ? (
+                    <EyeOffIcon className="h-5 w-5" />
+                  ) : (
+                    <EyeIcon className="h-5 w-5" />
+                  )}
+                </button>
+              </div>
+            </div>
+            
+            <div className="flex items-center justify-between text-sm">
+              <label className="flex items-center space-x-2 text-gray-600">
+                <input type="checkbox" className="rounded border-gray-300 text-purple-600 focus:ring-purple-500" />
+                <span>Remember me</span>
+              </label>
+              <a href="#" className="text-purple-600 hover:text-purple-700">
+                Forgot password?
+              </a>
+            </div>
+
+            <Button 
+              type="submit" 
+              className="w-full h-11 bg-purple-600 hover:bg-purple-700 text-white font-semibold"
+            >
+              Login
+            </Button>
+
+            <div className="text-center text-sm text-gray-600">
+              Don't have an account?{' '}
+              <a href="#" className="text-purple-600 hover:text-purple-700 font-semibold">
+                Register
+              </a>
+            </div>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/edu-connect/src/app/auth/login/page.tsx b/frontend/edu-connect/src/app/auth/login/page.tsx
new file mode 100644
index 0000000..885ede0
--- /dev/null
+++ b/frontend/edu-connect/src/app/auth/login/page.tsx
@@ -0,0 +1,20 @@
+'use client'
+import AppContextProvider from "@/helpers/context/AppContextProvider"
+import LoginForm from "./_partials/LoginForm"
+import CommonView from "@/views/CommonView"
+
+const LoginPage : React.FC = ()  => {
+  return(
+    <>
+      <AppContextProvider>
+        <CommonView>
+          <div className="py-16 bg-gray-50">
+            <LoginForm />
+          </div>
+        </CommonView>
+      </AppContextProvider>
+    </>
+  )
+}
+
+export default LoginPage
\ No newline at end of file
diff --git a/frontend/edu-connect/src/app/auth/register/_partials/registerForm.tsx b/frontend/edu-connect/src/app/auth/register/_partials/registerForm.tsx
new file mode 100644
index 0000000..5df628a
--- /dev/null
+++ b/frontend/edu-connect/src/app/auth/register/_partials/registerForm.tsx
@@ -0,0 +1,186 @@
+import { ChangeEvent, FormEvent, useState } from 'react';
+import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { EyeIcon, EyeOffIcon, Upload } from 'lucide-react';
+
+export default function SignupForm() {
+  const [showPassword, setShowPassword] = useState(false);
+  const [formData, setFormData] = useState({
+    email: '',
+    firstName: '',
+    lastName: '',
+    username: '',
+    password: '',
+    bio: '',
+    dob: '',
+    profile_picture: null
+  });
+  const [error , setError] = useState<Record<string,any>>({})
+
+  const handleInputChange = (e : ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    const { id, value } = e.target;
+    setFormData(prev => ({
+      ...prev,
+      [id]: value
+    }));
+  };
+
+  const handleSubmit = (e : FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    console.log('Form submitted:', formData);
+  };
+
+  return (
+    <div className="flex items-center justify-center min-h-[80vh]">
+      <Card className="w-full max-w-lg shadow-lg border border-purple-700">
+        <CardHeader className="space-y-3">
+          <CardTitle className="text-2xl font-bold text-purple-600">Create Account</CardTitle>
+          <CardDescription className="text-gray-600">
+            Fill in your details to create your account
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleSubmit} className="space-y-6">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label htmlFor="firstName" className="text-gray-700">First Name</Label>
+                <Input 
+                  id="firstName"
+                  value={formData.firstName}
+                  onChange={handleInputChange}
+                  className="h-11 px-4 bg-gray-50/50 border-gray-200 focus:border-purple-500 focus:ring-purple-500"
+                  placeholder="Enter your first name"
+                  error={error?.firstName}
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="lastName" className="text-gray-700">Last Name</Label>
+                <Input 
+                  id="lastName"
+                  value={formData.lastName}
+                  onChange={handleInputChange}
+                  className="h-11 px-4 bg-gray-50/50 border-gray-200 focus:border-purple-500 focus:ring-purple-500"
+                  placeholder="Enter your last name"
+                  error={error?.lastName}
+                />
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="email" className="text-gray-700">Email</Label>
+              <Input 
+                id="email"
+                type="email"
+                value={formData.email}
+                onChange={handleInputChange}
+                className="h-11 px-4 bg-gray-50/50 border-gray-200 focus:border-purple-500 focus:ring-purple-500"
+                placeholder="Enter your email"
+                error={error?.email}
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="username" className="text-gray-700">Username</Label>
+              <Input 
+                id="username"
+                value={formData.username}
+                onChange={handleInputChange}
+                className="h-11 px-4 bg-gray-50/50 border-gray-200 focus:border-purple-500 focus:ring-purple-500"
+                placeholder="Choose a username"
+                error={error?.username}
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="password" className="text-gray-700">Password</Label>
+              <div className="relative">
+                <Input 
+                  id="password"
+                  type={showPassword ? "text" : "password"}
+                  value={formData.password}
+                  onChange={handleInputChange}
+                  className="h-11 px-4 bg-gray-50/50 border-gray-200 focus:border-purple-500 focus:ring-purple-500 pr-10"
+                  placeholder="Create a strong password"
+                  error={error?.password}
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowPassword(!showPassword)}
+                  className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700"
+                >
+                  {showPassword ? (
+                    <EyeOffIcon className="h-5 w-5" />
+                  ) : (
+                    <EyeIcon className="h-5 w-5" />
+                  )}
+                </button>
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="dob" className="text-gray-700">Date of Birth</Label>
+              <Input 
+                id="dob"
+                type="date"
+                value={formData.dob}
+                onChange={handleInputChange}
+                error={error?.dob}
+                className="h-11 px-4 bg-gray-50/50 border-gray-200 focus:border-purple-500 focus:ring-purple-500"
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="bio" className="text-gray-700">Bio</Label>
+              <textarea 
+                id="bio"
+                value={formData.bio}
+                onChange={handleInputChange}
+                className="w-full px-4 py-2 bg-gray-50/50 border-gray-200 rounded-md focus:border-purple-500 focus:ring-purple-500"
+                rows={3}
+                placeholder="Tell us about yourself"
+              />
+              {
+                error?.bio && error?.bio.map((err : any) => {
+                  return(
+                    <span className='text-red-500'>{err}</span>
+                  )
+                })
+              }
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="profile_picture" className="text-gray-700">Profile Picture</Label>
+              <div className="flex items-center space-x-2">
+                <Button
+                  type="button"
+                  variant="outline"
+                  className="h-11 px-4 border-gray-200 hover:bg-gray-50"
+                >
+                  <Upload className="h-5 w-5 mr-2" />
+                  Upload Photo
+                </Button>
+                <span className="text-sm text-gray-500">No file chosen</span>
+              </div>
+            </div>
+
+            <Button 
+              type="submit" 
+              className="w-full h-11 bg-purple-600 hover:bg-purple-700 text-white font-semibold"
+            >
+              Create Account
+            </Button>
+
+            <div className="text-center text-sm text-gray-600">
+              Already have an account?{' '}
+              <a href="#" className="text-purple-600 hover:text-purple-700 font-semibold">
+                Login
+              </a>
+            </div>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/frontend/edu-connect/src/app/auth/register/page.tsx b/frontend/edu-connect/src/app/auth/register/page.tsx
new file mode 100644
index 0000000..5823738
--- /dev/null
+++ b/frontend/edu-connect/src/app/auth/register/page.tsx
@@ -0,0 +1,17 @@
+'use client'
+import AppContextProvider from "@/helpers/context/AppContextProvider"
+import CommonView from "@/views/CommonView"
+import RegisterForm from "./_partials/registerForm"
+
+export default function Component() {
+  return (
+    <AppContextProvider>
+      <CommonView>
+        <div className="py-6">
+          <RegisterForm />
+        </div>
+      </CommonView>
+    </AppContextProvider>
+    
+  )
+}
\ No newline at end of file
diff --git a/frontend/edu-connect/src/app/globals.css b/frontend/edu-connect/src/app/globals.css
index fe85b19..65366b9 100644
--- a/frontend/edu-connect/src/app/globals.css
+++ b/frontend/edu-connect/src/app/globals.css
@@ -76,3 +76,13 @@ body {
     @apply bg-background text-foreground;
   }
 }
+
+.overlay-purple::before{
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: #7e22ce;
+  opacity: 0.2;
+}
+
+
diff --git a/frontend/edu-connect/src/app/layout.tsx b/frontend/edu-connect/src/app/layout.tsx
index 0561475..54f5d78 100644
--- a/frontend/edu-connect/src/app/layout.tsx
+++ b/frontend/edu-connect/src/app/layout.tsx
@@ -1,8 +1,6 @@
 import type { Metadata } from "next";
 import localFont from "next/font/local";
 import "./globals.css";
-import { NavigationMenuWithIcons } from "@/components/common/Navbar/navMenu";
-import Footer from "@/components/common/Footer/footer";
 
 const geistSans = localFont({
   src: "./fonts/GeistVF.woff",
@@ -30,9 +28,7 @@ export default function RootLayout({
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
-        <NavigationMenuWithIcons />
-        {children}
-        <Footer />
+          {children}
       </body>
     </html>
   );
diff --git a/frontend/edu-connect/src/app/my-courses/_partials/CoursesActionModal.tsx b/frontend/edu-connect/src/app/my-courses/_partials/CoursesActionModal.tsx
new file mode 100644
index 0000000..45d927f
--- /dev/null
+++ b/frontend/edu-connect/src/app/my-courses/_partials/CoursesActionModal.tsx
@@ -0,0 +1,119 @@
+'use client';
+import React from 'react';
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@/components/ui/select";
+import { TabsContent } from '@/components/ui/tabs';
+
+const CourseActionFormTabContent :React.FC = () => {
+    const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+        // Handle form submission
+        const formData = new FormData(e.currentTarget);
+        console.log('Form submitted:', Object.fromEntries(formData));
+    };
+
+    return (
+            <Card>
+                <CardHeader>
+                    <CardTitle className="text-2xl">Create New Course</CardTitle>
+                </CardHeader>
+                <CardContent>
+                    <form onSubmit={handleSubmit} className="space-y-6">
+                        {/* Course Title */}
+                        <div className="space-y-2">
+                            <Label htmlFor="title">Course Title</Label>
+                            <Input
+                                id="title"
+                                name="title"
+                                placeholder="Enter course title"
+                                required
+                                className="w-full"
+                            />
+                        </div>
+
+                        {/* Course Category */}
+                        <div className="space-y-2">
+                            <Label htmlFor="category">Category</Label>
+                            <Select name="category">
+                                <SelectTrigger>
+                                    <SelectValue placeholder="Select a category" />
+                                </SelectTrigger>
+                                <SelectContent>
+                                    <SelectItem value="programming">Programming</SelectItem>
+                                    <SelectItem value="design">Design</SelectItem>
+                                    <SelectItem value="business">Business</SelectItem>
+                                    <SelectItem value="marketing">Marketing</SelectItem>
+                                </SelectContent>
+                            </Select>
+                        </div>
+
+                        {/* Course Description */}
+                        <div className="space-y-2">
+                            <Label htmlFor="description">Description</Label>
+                            <Textarea
+                                id="description"
+                                name="description"
+                                placeholder="Enter course description"
+                                className="min-h-32"
+                            />
+                        </div>
+
+                        {/* Estimated Learning Hours */}
+                        <div className="space-y-2">
+                            <Label htmlFor="estimatedHours">Estimated Learning Hours</Label>
+                            <Input
+                                id="estimatedHours"
+                                name="estimatedHours"
+                                type="number"
+                                min="1"
+                                placeholder="Enter estimated hours"
+                            />
+                        </div>
+
+                        {/* Required Pages */}
+                        <div className="space-y-2">
+                            <Label htmlFor="requiredPages">Required Pages</Label>
+                            <Input
+                                id="requiredPages"
+                                name="requiredPages"
+                                type="number"
+                                min="1"
+                                placeholder="Enter number of required pages"
+                            />
+                        </div>
+
+                        {/* PDF Upload */}
+                        <div className="space-y-2">
+                            <Label htmlFor="coursePdf">Course PDF</Label>
+                            <Input
+                                id="coursePdf"
+                                name="coursePdf"
+                                type="file"
+                                accept=".pdf"
+                                className="cursor-pointer"
+                            />
+                        </div>
+
+                        {/* Submit Button */}
+                        <div className="pt-4">
+                            <Button type="submit" className="w-full">
+                                Create Course
+                            </Button>
+                        </div>
+                    </form>
+                </CardContent>
+            </Card>
+    );
+};
+
+export default CourseActionFormTabContent;
\ No newline at end of file
diff --git a/frontend/edu-connect/src/app/my-courses/_partials/MyCoursesTabContent.tsx b/frontend/edu-connect/src/app/my-courses/_partials/MyCoursesTabContent.tsx
new file mode 100644
index 0000000..fa5aa58
--- /dev/null
+++ b/frontend/edu-connect/src/app/my-courses/_partials/MyCoursesTabContent.tsx
@@ -0,0 +1,9 @@
+const MyCoursesTabContent : React.FC = () => {
+  return(
+    <>
+      
+    </>
+  )
+}
+
+export default MyCoursesTabContent
\ No newline at end of file
diff --git a/frontend/edu-connect/src/app/my-courses/_partials/myCoursesTabWrapper.tsx b/frontend/edu-connect/src/app/my-courses/_partials/myCoursesTabWrapper.tsx
new file mode 100644
index 0000000..4e33d3a
--- /dev/null
+++ b/frontend/edu-connect/src/app/my-courses/_partials/myCoursesTabWrapper.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import MyCoursesActionContent from './MyCoursesTabContent';
+import CourseActionFormTabContent from './CoursesActionModal';
+
+const MyCoursesWrapper = () => {
+  return (
+    <div className="container mx-auto py-8">
+      <Tabs defaultValue="general" className="flex gap-6 min-h-[50vh]">
+        <div className="min-w-[240px]">
+          <TabsList className="flex flex-col h-auto bg-transparent p-0">
+            <TabsTrigger 
+              value="generali"
+              className="justify-start w-full px-3 py-2 text-left data-[state=active]:bg-gray-50 data-[state=active]:border data-[state=active]:border-purple-700/50 rounded-md "
+            >
+              Profile
+            </TabsTrigger>
+            <TabsTrigger 
+              value="email" 
+              className="justify-start w-full px-3 py-2 text-left data-[state=active]:bg-gray-50 data-[state=active]:border data-[state=active]:border-purple-700/50 rounded-md"
+            >
+              Account
+            </TabsTrigger>
+            <TabsTrigger 
+              value="password" 
+              className="justify-start w-full px-3 py-2 text-left data-[state=active]:bg-gray-50 data-[state=active]:border data-[state=active]:border-purple-700/50 rounded-md"
+            >
+              Security
+            </TabsTrigger>
+          </TabsList>
+        </div>
+
+        <div className="flex-1">
+          <TabsContent value="general" className="mt-0">
+            {/* <MyCoursesActionContent /> */}
+            <CourseActionFormTabContent />
+          </TabsContent>
+          {/* <UserEmailUpdateTabContent />
+          <UserPasswordUpdateTabContent /> */}
+        </div>
+      </Tabs>
+    </div>
+  );
+};
+
+export default MyCoursesWrapper;
\ No newline at end of file
diff --git a/frontend/edu-connect/src/app/my-courses/page.tsx b/frontend/edu-connect/src/app/my-courses/page.tsx
new file mode 100644
index 0000000..2b371db
--- /dev/null
+++ b/frontend/edu-connect/src/app/my-courses/page.tsx
@@ -0,0 +1,19 @@
+'use client'
+import AppContextProvider from "@/helpers/context/AppContextProvider"
+import MyCoursesWrapper from "./_partials/myCoursesTabWrapper"
+import CommonView from "@/views/CommonView"
+
+
+const MyCourses : React.FC = () => {
+  return(
+    <>
+    <AppContextProvider>
+      <CommonView>
+        <MyCoursesWrapper />
+      </CommonView>
+    </AppContextProvider>
+    </>
+  )
+}
+
+export default MyCourses
\ No newline at end of file
diff --git a/frontend/edu-connect/src/app/page.tsx b/frontend/edu-connect/src/app/page.tsx
index 6fe62d1..965386d 100644
--- a/frontend/edu-connect/src/app/page.tsx
+++ b/frontend/edu-connect/src/app/page.tsx
@@ -1,101 +1,21 @@
-import Image from "next/image";
+'use client'
+
+import AppContextProvider from "@/helpers/context/AppContextProvider";
+import CommonView from "@/views/CommonView";
+import HeroSection from "./_partials/HeroSection";
+import FeaturesSection from "./_partials/FeaturesSection";
+import CommunitySection from "./_partials/CommunitySection";
+import FeaturedCourses from "./_partials/FeaturedCourses";
 
 export default function Home() {
   return (
-    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
-      <main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
-        <Image
-          className="dark:invert"
-          src="https://nextjs.org/icons/next.svg"
-          alt="Next.js logo"
-          width={180}
-          height={38}
-          priority
-        />
-        <ol className="list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
-          <li className="mb-2">
-            Get started by editing{" "}
-            <code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold">
-              src/app/page.tsx
-            </code>
-            .
-          </li>
-          <li>Save and see your changes instantly.</li>
-        </ol>
-
-        <div className="flex gap-4 items-center flex-col sm:flex-row">
-          <a
-            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="https://nextjs.org/icons/vercel.svg"
-              alt="Vercel logomark"
-              width={20}
-              height={20}
-            />
-            Deploy now
-          </a>
-          <a
-            className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Read our docs
-          </a>
-        </div>
-      </main>
-      <footer className="row-start-3 flex gap-6 flex-wrap items-center justify-center">
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="https://nextjs.org/icons/file.svg"
-            alt="File icon"
-            width={16}
-            height={16}
-          />
-          Learn
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="https://nextjs.org/icons/window.svg"
-            alt="Window icon"
-            width={16}
-            height={16}
-          />
-          Examples
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="https://nextjs.org/icons/globe.svg"
-            alt="Globe icon"
-            width={16}
-            height={16}
-          />
-          Go to nextjs.org →
-        </a>
-      </footer>
-    </div>
+    <AppContextProvider>
+      <CommonView>
+        <HeroSection />
+        <FeaturedCourses />
+        <FeaturesSection />
+        <CommunitySection />
+      </CommonView>
+    </AppContextProvider>
   );
 }
diff --git a/frontend/edu-connect/src/app/user/profile/_partials/UserEmailUpdateTabContent.tsx b/frontend/edu-connect/src/app/user/profile/_partials/UserEmailUpdateTabContent.tsx
new file mode 100644
index 0000000..f2b0bbc
--- /dev/null
+++ b/frontend/edu-connect/src/app/user/profile/_partials/UserEmailUpdateTabContent.tsx
@@ -0,0 +1,47 @@
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+
+const UserEmailUpdateTabContent = () => {
+  return(
+    <>
+      <TabsContent value="email" className="mt-0">
+        <Card>
+          <CardHeader>
+            <CardTitle>Email Settings</CardTitle>
+            <p className="text-sm text-gray-500">
+              Manage your email addresses and verification status.
+            </p>
+          </CardHeader>
+          <CardContent className="space-y-6">
+            
+
+            <div className="space-y-2">
+              <label className="text-sm font-medium">Primary Email Address</label>
+              <div className="p-4 border rounded-lg space-y-4">
+                <div className="flex items-center justify-between">
+                  <span>your@email.com</span>
+                  <span className="text-sm text-green-600">✓ Verified</span>
+                  {
+                    false && 
+                    <Button>Add & Verify</Button>
+                  }
+                </div>
+              </div>
+            </div>
+
+            
+          </CardContent>
+        </Card>
+      </TabsContent>
+    </>
+  )
+}
+
+export default UserEmailUpdateTabContent
\ No newline at end of file
diff --git a/frontend/edu-connect/src/app/user/profile/_partials/UserPasswordUpdateTabContent.tsx b/frontend/edu-connect/src/app/user/profile/_partials/UserPasswordUpdateTabContent.tsx
new file mode 100644
index 0000000..e9471cd
--- /dev/null
+++ b/frontend/edu-connect/src/app/user/profile/_partials/UserPasswordUpdateTabContent.tsx
@@ -0,0 +1,46 @@
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { TabsContent } from "@/components/ui/tabs";
+
+const UserPasswordUpdateTabContent = () => {
+  return(
+    <TabsContent value="password" className="mt-0">
+      <Card>
+        <CardHeader>
+          <CardTitle>Update Password</CardTitle>
+          <p className="text-sm text-gray-500">
+            Change your password to keep your account secure.
+          </p>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          <div className="space-y-2">
+            <label className="text-sm font-medium">Current Password</label>
+            <Input type="password" required />
+          </div>
+
+          <div className="space-y-2">
+            <label className="text-sm font-medium">New Password</label>
+            <Input type="password" required/>
+          </div>
+
+          <div className="space-y-2">
+            <label className="text-sm font-medium">Confirm New Password</label>
+            <Input type="password" required/>
+          </div>
+
+          <div className="mx-auto w-fit">
+            <Button className="mt-6 w-full md:min-w-[600px] min-w-[300px]  bg-purple-700">Save Changes</Button>
+          </div>
+        </CardContent>
+      </Card>
+    </TabsContent>
+  )
+}
+
+export default UserPasswordUpdateTabContent
\ No newline at end of file
diff --git a/frontend/edu-connect/src/app/user/profile/_partials/UserTabContent.tsx b/frontend/edu-connect/src/app/user/profile/_partials/UserTabContent.tsx
new file mode 100644
index 0000000..7c98285
--- /dev/null
+++ b/frontend/edu-connect/src/app/user/profile/_partials/UserTabContent.tsx
@@ -0,0 +1,83 @@
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
+
+const UserTabContent = () => {
+  return(
+    <Card>
+        <CardHeader>
+          <CardTitle>Profile</CardTitle>
+          <p className="text-sm text-gray-500">
+            Manage your personal information and profile settings.
+          </p>
+        </CardHeader>
+      <CardContent className="space-y-6">
+
+        {/* Profile Picture */}
+        <div className="space-y-2">
+          <label className="text-sm font-medium">Profile Picture</label>
+          <div className="flex items-center gap-4">
+            <div className="h-16 w-16 rounded-full bg-gray-100 flex items-center justify-center">
+              <span className="text-gray-500 text-sm">No image</span>
+            </div>
+            <Button variant="outline">Upload Image</Button>
+          </div>
+        </div>
+        {/* Email */}
+
+        {/* Name */}
+        <div className="grid grid-cols-2 gap-4">
+          <div className="space-y-2">
+            <label className="text-sm font-medium">First Name</label>
+            <Input defaultValue="John" />
+          </div>
+          <div className="space-y-2">
+            <label className="text-sm font-medium">Last Name</label>
+            <Input defaultValue="Doe" />
+          </div>
+        </div>
+
+        {/* Username */}
+        <div className="grid grid-cols-2 gap-4">
+          <div className="space-y-2">
+            <label className="text-sm font-medium">Username</label>
+            <Input defaultValue="johndoe123" />
+            <p className="text-sm text-gray-500">
+              This is your public display name. You can only change this once every 30 days.
+            </p>
+          </div>
+          <div className="space-y-2">
+            <label className="text-sm font-medium">Date of Birth</label>
+            <Input 
+              type="date" 
+              defaultValue="1990-01-01"
+            />
+          </div>
+        </div>
+
+
+        
+
+        {/* Bio */}
+        <div className="space-y-2">
+          <label className="text-sm font-medium">Bio</label>
+          <Textarea 
+            defaultValue="This is a test user."
+            placeholder="Tell us about yourself"
+          />
+          <p className="text-sm text-gray-500">
+            You can @mention other users and organizations to link to them.
+          </p>
+        </div>
+
+        {/* Update Button */}
+        <div className="mx-auto w-fit">
+          <Button className="mt-6 w-full md:min-w-[600px] min-w-[300px]  bg-purple-700">Save Changes</Button>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+export default UserTabContent
\ No newline at end of file
diff --git a/frontend/edu-connect/src/app/user/profile/_partials/profile.tsx b/frontend/edu-connect/src/app/user/profile/_partials/profile.tsx
new file mode 100644
index 0000000..d1c94c4
--- /dev/null
+++ b/frontend/edu-connect/src/app/user/profile/_partials/profile.tsx
@@ -0,0 +1,96 @@
+import React from 'react';
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import UserTabContent from './UserTabContent';
+import UserEmailUpdateTabContent from './UserEmailUpdateTabContent';
+import UserPasswordUpdateTabContent from './UserPasswordUpdateTabContent';
+
+const ProfileSettings = () => {
+  return (
+    <div className="container mx-auto py-8">
+      <Tabs defaultValue="general" className="flex gap-6 min-h-[50vh]">
+        <div className="min-w-[240px]">
+          <TabsList className="flex flex-col h-auto bg-transparent p-0">
+            <TabsTrigger 
+              value="general" 
+              className="justify-start w-full px-3 py-2 text-left data-[state=active]:bg-gray-50 data-[state=active]:border data-[state=active]:border-purple-700/50 rounded-md "
+            >
+              Profile
+            </TabsTrigger>
+            <TabsTrigger 
+              value="email" 
+              className="justify-start w-full px-3 py-2 text-left data-[state=active]:bg-gray-50 data-[state=active]:border data-[state=active]:border-purple-700/50 rounded-md"
+            >
+              Account
+            </TabsTrigger>
+            <TabsTrigger 
+              value="password" 
+              className="justify-start w-full px-3 py-2 text-left data-[state=active]:bg-gray-50 data-[state=active]:border data-[state=active]:border-purple-700/50 rounded-md"
+            >
+              Security
+            </TabsTrigger>
+          </TabsList>
+        </div>
+
+        <div className="flex-1">
+          <TabsContent value="general" className="mt-0">
+            <UserTabContent />
+          </TabsContent>
+          <UserEmailUpdateTabContent />
+          <UserPasswordUpdateTabContent />
+
+          <TabsContent value="account" className="mt-0">
+            <Card>
+              <CardHeader>
+                <CardTitle>Account</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <p>Account settings coming soon...</p>
+              </CardContent>
+            </Card>
+          </TabsContent>
+
+          <TabsContent value="appearance" className="mt-0">
+            <Card>
+              <CardHeader>
+                <CardTitle>Appearance</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <p>Appearance settings coming soon...</p>
+              </CardContent>
+            </Card>
+          </TabsContent>
+
+          <TabsContent value="notifications" className="mt-0">
+            <Card>
+              <CardHeader>
+                <CardTitle>Notifications</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <p>Notification settings coming soon...</p>
+              </CardContent>
+            </Card>
+          </TabsContent>
+
+          <TabsContent value="display" className="mt-0">
+            <Card>
+              <CardHeader>
+                <CardTitle>Display</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <p>Display settings coming soon...</p>
+              </CardContent>
+            </Card>
+          </TabsContent>
+        </div>
+      </Tabs>
+    </div>
+  );
+};
+
+export default ProfileSettings;
\ No newline at end of file
diff --git a/frontend/edu-connect/src/app/user/profile/page.tsx b/frontend/edu-connect/src/app/user/profile/page.tsx
new file mode 100644
index 0000000..273a67a
--- /dev/null
+++ b/frontend/edu-connect/src/app/user/profile/page.tsx
@@ -0,0 +1,19 @@
+'use client'
+
+import AppContextProvider from "@/helpers/context/AppContextProvider"
+import ProfileSettings from "./_partials/profile"
+import CommonView from "@/views/CommonView"
+
+const UserProfileIndex = () => {
+  return(
+    <>
+    <AppContextProvider>
+      <CommonView>
+        <ProfileSettings />
+      </CommonView>
+    </AppContextProvider>
+    </>
+  )
+}
+
+export default UserProfileIndex
\ No newline at end of file
diff --git a/frontend/edu-connect/src/assets/dynamic-img/dynamic-img.ts b/frontend/edu-connect/src/assets/dynamic-img/dynamic-img.ts
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/edu-connect/src/assets/img/community-collboration.jpg b/frontend/edu-connect/src/assets/img/community-collboration.jpg
new file mode 100644
index 0000000..e697a86
Binary files /dev/null and b/frontend/edu-connect/src/assets/img/community-collboration.jpg differ
diff --git a/frontend/edu-connect/src/assets/img/learn-with-us.jpg b/frontend/edu-connect/src/assets/img/learn-with-us.jpg
new file mode 100644
index 0000000..1438207
Binary files /dev/null and b/frontend/edu-connect/src/assets/img/learn-with-us.jpg differ
diff --git a/frontend/edu-connect/src/components/common/Footer/footer.tsx b/frontend/edu-connect/src/components/common/Footer/footer.tsx
index fd512cf..629af78 100644
--- a/frontend/edu-connect/src/components/common/Footer/footer.tsx
+++ b/frontend/edu-connect/src/components/common/Footer/footer.tsx
@@ -7,10 +7,10 @@ import { Facebook, Instagram, Linkedin, Twitter } from "lucide-react"
 
 export default function Footer() {
   return (
-    <section className="w-full py-12 md:py-24 lg:py-32 bg-zinc-900 dark:bg-zinc-100">
-      <div className="container px-4 md:px-6 flex flex-col items-center text-center">
+    <section className="w-full py-6 md:py-12 lg:py-24 bg-zinc-900 dark:bg-zinc-100">
+      <div className="container px-4 md:px-6 flex flex-col items-center text-center mx-auto">
         <h2 className="text-2xl font-bold tracking-tighter sm:text-3xl md:text-4xl lg:text-5xl/none text-white">
-          Stay Connected
+          Stay Connected with <span className="text-purple-700">EduConnect</span>
         </h2>
         <p className="mx-auto max-w-[700px] text-zinc-100 md:text-lg dark:text-zinc-800">
           Subscribe to our newsletter and follow us on our social media.
@@ -18,47 +18,30 @@ export default function Footer() {
         <div className="w-full max-w-md space-y-2 my-4">
           <form className="flex space-x-2">
             <Input type="email" placeholder="Enter your email" className="max-w-lg flex-1 text-zinc-900 bg-white" />
-            <Button type="submit" variant="outline" className="text-white border-white">
+            <Button type="submit" variant="outline" className="text-white border-purple-700 bg-purple-700">
               Subscribe
             </Button>
           </form>
         </div>
-        <div className="flex justify-center space-x-4">
-          <Link href="#" aria-label="Facebook page" className="text-white" prefetch={false}>
+        <div className="flex justify-center space-x-4 mt-16">
+          <Link href="#" aria-label="Facebook page" className="text-purple-700" prefetch={false}>
             <Facebook className="h-6 w-6" />
           </Link>
-          <Link href="#" aria-label="Twitter profile" className="text-white" prefetch={false}>
+          <Link href="#" aria-label="Twitter profile" className="text-purple-700" prefetch={false}>
             <Twitter className="h-6 w-6" />
           </Link>
-          <Link href="#" aria-label="Instagram profile" className="text-white" prefetch={false}>
+          <Link href="#" aria-label="Instagram profile" className="text-purple-700" prefetch={false}>
             <Instagram className="h-6 w-6" />
           </Link>
-          <Link href="#" aria-label="LinkedIn profile" className="text-white" prefetch={false}>
+          <Link href="#" aria-label="LinkedIn profile" className="text-purple-700" prefetch={false}>
             <Linkedin className="h-6 w-6" />
           </Link>
         </div>
       </div>
+      <p className=" text-center mt-6 text-purple-700 text-white font-semibold">&copy; Copyright - EduConnect 2024 - 2026</p>
     </section>
   )
 }
 
-// function FacebookIcon(props) {
-//   return (
-//     <svg
-//       {...props}
-//       xmlns="http://www.w3.org/2000/svg"
-//       width="24"
-//       height="24"
-//       viewBox="0 0 24 24"
-//       fill="none"
-//       stroke="currentColor"
-//       strokeWidth="2"
-//       strokeLinecap="round"
-//       strokeLinejoin="round"
-//     >
-//       <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" />
-//     </svg>
-//   )
-// }
 
 
diff --git a/frontend/edu-connect/src/components/common/Header/_partials/header.type.ts b/frontend/edu-connect/src/components/common/Header/_partials/header.type.ts
new file mode 100644
index 0000000..e8014f5
--- /dev/null
+++ b/frontend/edu-connect/src/components/common/Header/_partials/header.type.ts
@@ -0,0 +1,13 @@
+import { ElementType } from 'react';
+
+export interface NavItem {
+  title: string;
+  href: string;
+  description: string;
+  icon: ElementType;
+}
+
+export interface ListItemProps extends React.ComponentPropsWithoutRef<"a"> {
+  icon?: ElementType;
+  title?: string;
+}
\ No newline at end of file
diff --git a/frontend/edu-connect/src/components/common/Header/_partials/headerFeatureSection.tsx b/frontend/edu-connect/src/components/common/Header/_partials/headerFeatureSection.tsx
new file mode 100644
index 0000000..bdd2399
--- /dev/null
+++ b/frontend/edu-connect/src/components/common/Header/_partials/headerFeatureSection.tsx
@@ -0,0 +1,13 @@
+import { Button } from "@/components/ui/button"
+
+const HeaderFeatureSection : React.FC = () => {
+  return(
+    <div className="flex">
+        <Button>
+          Login
+        </Button>
+    </div>
+  )
+}
+
+export default HeaderFeatureSection
\ No newline at end of file
diff --git a/frontend/edu-connect/src/components/common/Header/_partials/login.tsx b/frontend/edu-connect/src/components/common/Header/_partials/login.tsx
new file mode 100644
index 0000000..c5ea026
--- /dev/null
+++ b/frontend/edu-connect/src/components/common/Header/_partials/login.tsx
@@ -0,0 +1,7 @@
+const Login : React.FC = () => {
+  return(
+    <>
+      
+    </>
+  )
+}
\ No newline at end of file
diff --git a/frontend/edu-connect/src/components/common/Header/_partials/searchBar.tsx b/frontend/edu-connect/src/components/common/Header/_partials/searchBar.tsx
new file mode 100644
index 0000000..8c90f66
--- /dev/null
+++ b/frontend/edu-connect/src/components/common/Header/_partials/searchBar.tsx
@@ -0,0 +1,49 @@
+import { Input } from "@/components/ui/input"
+import { Search } from "lucide-react";
+import { useState } from "react";
+
+const SearchBar = () => {
+
+  const [searchQuery, setSearchQuery] = useState<string>('');
+
+  const handleSearch = (e: React.FormEvent) => {
+    e.preventDefault();
+    // Handle search logic here
+    console.log('Searching for:', searchQuery);
+  };
+
+
+  return(
+    <>
+      <form 
+        onSubmit={handleSearch}
+        className="hidden sm:flex flex-1 mx-4 max-w-md relative"
+      >
+        <div className="relative w-full">
+          <Input
+            type="search"
+            placeholder="Search courses..."
+            className="w-full pl-10 bg-purple-700/10 border-white/20 text-white placeholder:text-white/50 focus:ring-[#9333EA] focus:border-[#9333EA]"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+          />
+          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-white/50" />
+        </div>
+      </form>
+      <div className="sm:hidden px-4 pb-4">
+        <form onSubmit={handleSearch} className="relative">
+          <Input
+            type="search"
+            placeholder="Search courses..."
+            className="w-full pl-10 bg-white/10 border-white/20 text-white placeholder:text-white/50 focus:ring-[#9333EA] focus:border-[#9333EA]"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+          />
+          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-white/50" />
+        </form>
+      </div>
+    </>
+  )
+}
+
+export default  SearchBar
\ No newline at end of file
diff --git a/frontend/edu-connect/src/components/common/Header/_partials/userProfileDropDown.tsx b/frontend/edu-connect/src/components/common/Header/_partials/userProfileDropDown.tsx
new file mode 100644
index 0000000..4c42eac
--- /dev/null
+++ b/frontend/edu-connect/src/components/common/Header/_partials/userProfileDropDown.tsx
@@ -0,0 +1,34 @@
+
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator } from "@/components/ui/dropdown-menu"
+import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar"
+import Link from "next/link"
+import { Button } from "@/components/ui/button"
+
+export default function Component() {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Avatar className="h-9 w-9">
+          <AvatarImage src="/placeholder-user.jpg" alt="@shadcn" />
+          <AvatarFallback>JP</AvatarFallback>
+          <span className="sr-only">Toggle user menu</span>
+        </Avatar>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-56">
+        <DropdownMenuItem className="font-bold text-lg">John Doe</DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem asChild>
+          <Link href="#" className="block w-full text-left" prefetch={false}>
+            Profile
+          </Link>
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem asChild>
+          <Button variant="outline" className="block w-full text-left">
+            Logout
+          </Button>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
\ No newline at end of file
diff --git a/frontend/edu-connect/src/components/common/Header/header.tsx b/frontend/edu-connect/src/components/common/Header/header.tsx
new file mode 100644
index 0000000..e4abba1
--- /dev/null
+++ b/frontend/edu-connect/src/components/common/Header/header.tsx
@@ -0,0 +1,56 @@
+import React, { useState } from 'react';
+import { Button } from "@/components/ui/button";
+import { Menu, X } from "lucide-react";
+import { DesktopNav } from '../Navbar/desktopNav';
+import { MobileNav } from '../Navbar/mobileNav';
+import SearchBar from './_partials/searchBar';
+
+const Header = () => {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+  const toggleMenu = () => {
+    setIsMenuOpen(!isMenuOpen);
+  };
+
+  return (
+    <header className="relative bg-zinc-900">
+      <div className="container mx-auto px-4">
+        <div className="flex items-center justify-between py-4">
+          {/* Logo */}
+          <h1 className="brand-logo text-purple-700 font-bold text-2xl">EDU CONNECT</h1>
+          <SearchBar />
+          <div className='flex gap-8'>
+            <DesktopNav />
+            <div className="hidden md:block space-x-4">
+              <Button className='bg-purple-700'>
+                Login
+              </Button>
+              <Button className='bg-purple-700'>
+                Register
+              </Button>
+            </div>
+          </div>
+
+
+
+          {/* Hamburger Menu Button */}
+          <button
+            onClick={toggleMenu}
+            className="md:hidden p-2 rounded-md hover:bg-gray-100"
+          >
+            {isMenuOpen ? (
+              <X className="h-6 w-6" />
+            ) : (
+              <Menu className="h-6 w-6" />
+            )}
+          </button>
+        </div>
+
+        {/* Mobile Navigation */}
+        <MobileNav isOpen={isMenuOpen} />
+      </div>
+    </header>
+  );
+};
+
+export default Header;
\ No newline at end of file
diff --git a/frontend/edu-connect/src/components/common/Navbar/desktopNav.tsx b/frontend/edu-connect/src/components/common/Navbar/desktopNav.tsx
new file mode 100644
index 0000000..8f51bf4
--- /dev/null
+++ b/frontend/edu-connect/src/components/common/Navbar/desktopNav.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import Link from "next/link";
+import { NavigationMenu,NavigationMenuItem, NavigationMenuLink, NavigationMenuList, navigationMenuTriggerStyle } from "@/components/ui/navigation-menu";
+import { Book, Home, User } from "lucide-react";
+
+export const DesktopNav = () => {
+  return (
+    <div className="hidden md:block">
+      <NavigationMenu>
+        <NavigationMenuList>
+          {/* <NavigationMenuItem>
+            <NavigationMenuTrigger className='bg-zinc-900 text-white hover:bg-zinc-600'>
+              <Home className="mr-2 h-4 w-4" />
+              Menu
+            </NavigationMenuTrigger>
+            <NavigationMenuContent>
+              <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px]">
+                {navigationItems.map((item : Record<string,any> , index : number) => (
+                  <ListItem
+                    key={item.title}
+                    title={item.title}
+                    href={item.href}
+                    icon={item.icon}
+                  >
+                    {item.description}
+                  </ListItem>
+                ))}
+              </ul>
+            </NavigationMenuContent>
+          </NavigationMenuItem> */}
+
+          <NavigationMenuItem>
+            <Link href="/docs" legacyBehavior passHref>
+              <NavigationMenuLink className={navigationMenuTriggerStyle()}>
+                <Home className="mr-2 h-4 w-4" />
+                Home
+              </NavigationMenuLink>
+            </Link>
+          </NavigationMenuItem>
+
+          <NavigationMenuItem>
+            <Link href="/profile" legacyBehavior passHref>
+              <NavigationMenuLink className={navigationMenuTriggerStyle()}>
+                <Book className="mr-2 h-4 w-4" />
+                All Courses
+              </NavigationMenuLink>
+            </Link>
+          </NavigationMenuItem>
+        </NavigationMenuList>
+      </NavigationMenu>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/frontend/edu-connect/src/components/common/Navbar/listItem.tsx b/frontend/edu-connect/src/components/common/Navbar/listItem.tsx
new file mode 100644
index 0000000..cdfbf39
--- /dev/null
+++ b/frontend/edu-connect/src/components/common/Navbar/listItem.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { NavigationMenuLink } from "@/components/ui/navigation-menu";
+import { cn } from "@/lib/utils";
+import { ListItemProps } from '../Header/_partials/header.type';
+
+export const ListItem = React.forwardRef<React.ElementRef<"a">, ListItemProps>(
+  ({ className, title, children, icon: Icon, ...props }, ref) => {
+    return (
+      <li>
+        <NavigationMenuLink asChild>
+          <a
+            ref={ref}
+            className={cn(
+              "block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-zinc-500 hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground bg-zinc-900 text-white",
+              className
+            )}
+            {...props}
+          >
+            <div className="flex items-center text-sm font-medium leading-none">
+              {Icon && <Icon className="mr-2 h-4 w-4" />}
+              {title}
+            </div>
+            <p className="line-clamp-2 text-sm leading-snug text-muted-foreground mt-2">
+              {children}
+            </p>
+          </a>
+        </NavigationMenuLink>
+      </li>
+    );
+  }
+);
+ListItem.displayName = "ListItem";
\ No newline at end of file
diff --git a/frontend/edu-connect/src/components/common/Navbar/mobileNav.tsx b/frontend/edu-connect/src/components/common/Navbar/mobileNav.tsx
new file mode 100644
index 0000000..d3048d5
--- /dev/null
+++ b/frontend/edu-connect/src/components/common/Navbar/mobileNav.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { navigationItems } from './navRoutes';
+
+interface MobileNavProps {
+  isOpen: boolean;
+}
+
+export const MobileNav: React.FC<MobileNavProps> = ({ isOpen }) => {
+  if (!isOpen) return null;
+
+  return (
+    <div className="md:hidden absolute top-full left-0 right-0 bg-white border-t shadow-lg">
+      <nav className="px-4 py-2">
+        {navigationItems.map((item :Record<string,any> , index : number) => (
+          <Link
+            key={item.title}
+            href={item.href}
+            className="flex items-center px-4 py-3 hover:bg-gray-100 rounded-md"
+          >
+            <item.icon className="mr-3 h-5 w-5" />
+            <span>{item.title}</span>
+          </Link>
+        ))}
+        <div className="px-4 py-3">
+          <Button className="w-full">
+            Login
+          </Button>
+        </div>
+      </nav>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/frontend/edu-connect/src/components/common/Navbar/navRoutes.tsx b/frontend/edu-connect/src/components/common/Navbar/navRoutes.tsx
new file mode 100644
index 0000000..49ec150
--- /dev/null
+++ b/frontend/edu-connect/src/components/common/Navbar/navRoutes.tsx
@@ -0,0 +1,41 @@
+import { Home, Settings, Book, FileText, Bell, User } from "lucide-react";
+import { NavItem } from "../Header/_partials/header.type";
+
+export const navigationItems: NavItem[] = [
+  {
+    title: "Dashboard",
+    href: "/dashboard",
+    description: "Overview of your account and key metrics",
+    icon: Home
+  },
+  {
+    title: "Settings",
+    href: "/settings",
+    description: "Manage your account preferences and configuration",
+    icon: Settings
+  },
+  {
+    title: "Documentation",
+    href: "/docs",
+    description: "Detailed guides and API references",
+    icon: Book
+  },
+  {
+    title: "Reports",
+    href: "/reports",
+    description: "View and generate activity reports",
+    icon: FileText
+  },
+  {
+    title: "Notifications",
+    href: "/notifications",
+    description: "Manage your alerts and notifications",
+    icon: Bell
+  },
+  {
+    title: "Profile",
+    href: "/profile",
+    description: "View and edit your profile information",
+    icon: User
+  },
+];
\ No newline at end of file
diff --git a/frontend/edu-connect/src/components/elements/CommonContainer.tsx b/frontend/edu-connect/src/components/elements/CommonContainer.tsx
new file mode 100644
index 0000000..ca175d0
--- /dev/null
+++ b/frontend/edu-connect/src/components/elements/CommonContainer.tsx
@@ -0,0 +1,19 @@
+const CommonContainer = ({
+  children,
+  title,
+  className
+} : {
+  children : React.ReactNode
+  title? : string
+  className? : string
+}) => {
+  return(
+    <>
+    
+      <title>{title ?? 'EDCUCONNECT'}</title>
+      <div className={`container py-4 px-4 sm:px-8 mx-auto ${className}`}>{children}</div>
+    </>
+  )
+}
+export default CommonContainer
+
diff --git a/frontend/edu-connect/src/components/elements/CourseCard.tsx b/frontend/edu-connect/src/components/elements/CourseCard.tsx
new file mode 100644
index 0000000..8c238e7
--- /dev/null
+++ b/frontend/edu-connect/src/components/elements/CourseCard.tsx
@@ -0,0 +1,73 @@
+import { BookOpen, Clock, Heart } from "lucide-react"
+import { Card, CardContent } from "../ui/card"
+
+
+interface CourseInterface {
+  id : string ,
+  image :string | null 
+  title : string
+  category : string
+  lessons : string
+  duration : string
+  instructor : {
+    image : string
+    name : string
+  }
+}
+
+const CourseCard : React.FC<CourseInterface> = ({
+  id,
+  image,
+  title,
+  category,
+  lessons ,
+  instructor,
+  duration
+}) => {
+  return(
+    <Card key={id} className="overflow-hidden">
+            <div className="relative">
+              
+              <img
+                src={image!}
+                alt={title}
+                className="w-full h-48 object-cover"
+              />
+              <span className="absolute top-4 left-4 bg-purple-700/90 text-white px-3 py-1 rounded-full text-sm">
+                {category}
+              </span>
+              <button className="absolute top-4 right-4 p-2 bg-white/90 rounded-full hover:bg-white">
+                <Heart className="w-4 h-4 fill-red-500 text-red-500" />
+              </button>
+            </div>
+            <CardContent className="p-6">
+              <div className="flex gap-4 text-sm text-gray-600 mb-3">
+                <div className="flex items-center gap-1">
+                  <BookOpen className="w-4 h-4" />
+                  <span>{lessons} Lesson</span>
+                </div>
+                <div className="flex items-center gap-1">
+                  <Clock className="w-4 h-4" />
+                  <span>{duration}</span>
+                </div>
+              </div>
+              <h3 className="text-lg font-semibold mb-4">{title}</h3>
+              <div className="flex justify-between items-center">
+                <div className="flex items-center gap-2">
+                  <img
+                    src={instructor?.image}
+                    alt={instructor?.name}
+                    className="w-8 h-8 rounded-full"
+                  />
+                  <span className="text-sm">{instructor?.name}</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <span className="text-purple-700 font-semibold text-sm px-4 py-1 bg-purple-200 rounded-2xl">Free</span>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+  )
+}
+
+export default CourseCard
\ No newline at end of file
diff --git a/frontend/edu-connect/src/components/elements/DiscussionForm.tsx b/frontend/edu-connect/src/components/elements/DiscussionForm.tsx
new file mode 100644
index 0000000..e1a2900
--- /dev/null
+++ b/frontend/edu-connect/src/components/elements/DiscussionForm.tsx
@@ -0,0 +1,109 @@
+import React, { useState } from 'react';
+import { Card, CardContent } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
+import { Textarea } from "@/components/ui/textarea";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { MessageCircle, ThumbsUp, Reply } from "lucide-react";
+
+const DiscussionSection = () => {
+  const [comment, setComment] = useState('');
+  const [discussions, setDiscussions] = useState([
+    {
+      id: 1,
+      user: 'Sarah Chen',
+      avatar: '/api/placeholder/32/32',
+      content: 'This is really interesting! I particularly liked the section about state management.',
+      likes: 12,
+      replies: 2,
+      timestamp: '2 hours ago'
+    },
+    {
+      id: 2,
+      user: 'Alex Kim',
+      avatar: '/api/placeholder/32/32',
+      content: 'Great explanation! Could you elaborate more on the useEffect implementation?',
+      likes: 8,
+      replies: 1,
+      timestamp: '1 hour ago'
+    }
+  ]);
+
+  const handleSubmit = () => {
+    if (comment.trim()) {
+      const newComment = {
+        id: discussions.length + 1,
+        user: 'Current User',
+        avatar: '/api/placeholder/32/32',
+        content: comment,
+        likes: 0,
+        replies: 0,
+        timestamp: 'Just now'
+      };
+      setDiscussions([...discussions, newComment]);
+      setComment('');
+    }
+  };
+
+  return (
+    <Card className="w-full max-w-2xl mx-auto">
+      <CardContent className="p-6">
+        <div className="mb-6">
+          <div className="flex items-start gap-4">
+            <Avatar className="w-8 h-8">
+              <AvatarImage src="/api/placeholder/32/32" alt="User" />
+              <AvatarFallback>U</AvatarFallback>
+            </Avatar>
+            <div className="flex-1">
+              <Textarea
+                placeholder="Add to the discussion..."
+                value={comment}
+                onChange={(e) => setComment(e.target.value)}
+                className="min-h-24 mb-2"
+              />
+              <Button onClick={handleSubmit} className="float-right">
+                Post Comment
+              </Button>
+            </div>
+          </div>
+        </div>
+
+        <ScrollArea className="h-96">
+          <div className="space-y-6">
+            {discussions.map((discussion) => (
+              <div key={discussion.id} className="flex gap-4">
+                <Avatar className="w-8 h-8">
+                  <AvatarImage src={discussion.avatar} alt={discussion.user} />
+                  <AvatarFallback>{discussion.user[0]}</AvatarFallback>
+                </Avatar>
+                <div className="flex-1">
+                  <div className="flex items-center gap-2 mb-1">
+                    <span className="font-medium">{discussion.user}</span>
+                    <span className="text-sm text-gray-500">{discussion.timestamp}</span>
+                  </div>
+                  <p className="text-gray-700 mb-2">{discussion.content}</p>
+                  <div className="flex items-center gap-4">
+                    <button className="flex items-center gap-1 text-sm text-gray-500 hover:text-gray-700">
+                      <ThumbsUp className="w-4 h-4" />
+                      {discussion.likes}
+                    </button>
+                    <button className="flex items-center gap-1 text-sm text-gray-500 hover:text-gray-700">
+                      <Reply className="w-4 h-4" />
+                      Reply
+                    </button>
+                    <button className="flex items-center gap-1 text-sm text-gray-500 hover:text-gray-700">
+                      <MessageCircle className="w-4 h-4" />
+                      {discussion.replies} replies
+                    </button>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </ScrollArea>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default DiscussionSection;
\ No newline at end of file
diff --git a/frontend/edu-connect/src/components/ui/avatar.tsx b/frontend/edu-connect/src/components/ui/avatar.tsx
new file mode 100644
index 0000000..51e507b
--- /dev/null
+++ b/frontend/edu-connect/src/components/ui/avatar.tsx
@@ -0,0 +1,50 @@
+"use client"
+
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "@/lib/utils"
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className
+    )}
+    {...props}
+  />
+))
+Avatar.displayName = AvatarPrimitive.Root.displayName
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full", className)}
+    {...props}
+  />
+))
+AvatarImage.displayName = AvatarPrimitive.Image.displayName
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+
+export { Avatar, AvatarImage, AvatarFallback }
diff --git a/frontend/edu-connect/src/components/ui/badge.tsx b/frontend/edu-connect/src/components/ui/badge.tsx
new file mode 100644
index 0000000..e87d62b
--- /dev/null
+++ b/frontend/edu-connect/src/components/ui/badge.tsx
@@ -0,0 +1,36 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants }
diff --git a/frontend/edu-connect/src/components/ui/card.tsx b/frontend/edu-connect/src/components/ui/card.tsx
new file mode 100644
index 0000000..cabfbfc
--- /dev/null
+++ b/frontend/edu-connect/src/components/ui/card.tsx
@@ -0,0 +1,76 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-xl border bg-card text-card-foreground shadow",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
diff --git a/frontend/edu-connect/src/components/ui/dropdown-menu.tsx b/frontend/edu-connect/src/components/ui/dropdown-menu.tsx
new file mode 100644
index 0000000..082639f
--- /dev/null
+++ b/frontend/edu-connect/src/components/ui/dropdown-menu.tsx
@@ -0,0 +1,201 @@
+"use client"
+
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { Check, ChevronRight, Circle } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const DropdownMenu = DropdownMenuPrimitive.Root
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto" />
+  </DropdownMenuPrimitive.SubTrigger>
+))
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+))
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+))
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      {...props}
+    />
+  )
+}
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+}
diff --git a/frontend/edu-connect/src/components/ui/input.tsx b/frontend/edu-connect/src/components/ui/input.tsx
index 69b64fb..ee3cb85 100644
--- a/frontend/edu-connect/src/components/ui/input.tsx
+++ b/frontend/edu-connect/src/components/ui/input.tsx
@@ -1,22 +1,48 @@
-import * as React from "react"
+import * as React from "react";
+import { cn } from "@/lib/utils";
 
-import { cn } from "@/lib/utils"
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  error?: string[];
+  label?: string;
+  helperText?: string;
+  required?: boolean;
+}
 
-const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
-  ({ className, type, ...props }, ref) => {
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, error, label, helperText, required = false, ...props }, ref) => {
     return (
-      <input
-        type={type}
-        className={cn(
-          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-          className
+      <div className="w-full space-y-2">
+        {label && (
+          <div className="flex text-sm font-medium text-gray-700">
+            {label}
+            {required && <span className="text-red-500 ml-1">*</span>}
+          </div>
         )}
-        ref={ref}
-        {...props}
-      />
+        <input
+          type={type}
+          className={cn(
+            "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+            error && error.length > 0 && "border-red-500 focus-visible:ring-red-500",
+            className
+          )}
+          ref={ref}
+          {...props}
+        />
+        {helperText && (
+          <p className="text-sm text-muted-foreground">
+            {helperText}
+          </p>
+        )}
+        {error && error.map((message, index) => (
+          <p key={index} className="text-sm font-medium text-red-500">
+            {message}
+          </p>
+        ))}
+      </div>
     )
   }
 )
+
 Input.displayName = "Input"
 
-export { Input }
+export { Input }
\ No newline at end of file
diff --git a/frontend/edu-connect/src/components/ui/label.tsx b/frontend/edu-connect/src/components/ui/label.tsx
new file mode 100644
index 0000000..5341821
--- /dev/null
+++ b/frontend/edu-connect/src/components/ui/label.tsx
@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+)
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }
diff --git a/frontend/edu-connect/src/components/ui/navigation-menu.tsx b/frontend/edu-connect/src/components/ui/navigation-menu.tsx
index a5d4d27..74c94ea 100644
--- a/frontend/edu-connect/src/components/ui/navigation-menu.tsx
+++ b/frontend/edu-connect/src/components/ui/navigation-menu.tsx
@@ -41,7 +41,7 @@ NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName
 const NavigationMenuItem = NavigationMenuPrimitive.Item
 
 const navigationMenuTriggerStyle = cva(
-  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50"
+  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors text-white bg-zinc-900 hover:bg-zinc-500 hover:text-accent-foreground  disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50"
 )
 
 const NavigationMenuTrigger = React.forwardRef<
diff --git a/frontend/edu-connect/src/components/ui/progress.tsx b/frontend/edu-connect/src/components/ui/progress.tsx
new file mode 100644
index 0000000..4fc3b47
--- /dev/null
+++ b/frontend/edu-connect/src/components/ui/progress.tsx
@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import * as ProgressPrimitive from "@radix-ui/react-progress"
+
+import { cn } from "@/lib/utils"
+
+const Progress = React.forwardRef<
+  React.ElementRef<typeof ProgressPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
+>(({ className, value, ...props }, ref) => (
+  <ProgressPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative h-2 w-full overflow-hidden rounded-full bg-primary/20",
+      className
+    )}
+    {...props}
+  >
+    <ProgressPrimitive.Indicator
+      className="h-full w-full flex-1 bg-primary transition-all"
+      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+    />
+  </ProgressPrimitive.Root>
+))
+Progress.displayName = ProgressPrimitive.Root.displayName
+
+export { Progress }
diff --git a/frontend/edu-connect/src/components/ui/scroll-area.tsx b/frontend/edu-connect/src/components/ui/scroll-area.tsx
new file mode 100644
index 0000000..0b4a48d
--- /dev/null
+++ b/frontend/edu-connect/src/components/ui/scroll-area.tsx
@@ -0,0 +1,48 @@
+"use client"
+
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "@/lib/utils"
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn("relative overflow-hidden", className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+))
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" &&
+        "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" &&
+        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+))
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+
+export { ScrollArea, ScrollBar }
diff --git a/frontend/edu-connect/src/components/ui/select.tsx b/frontend/edu-connect/src/components/ui/select.tsx
new file mode 100644
index 0000000..0cbf77d
--- /dev/null
+++ b/frontend/edu-connect/src/components/ui/select.tsx
@@ -0,0 +1,159 @@
+"use client"
+
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { Check, ChevronDown, ChevronUp } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Select = SelectPrimitive.Root
+
+const SelectGroup = SelectPrimitive.Group
+
+const SelectValue = SelectPrimitive.Value
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+))
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("px-2 py-1.5 text-sm font-semibold", className)}
+    {...props}
+  />
+))
+SelectLabel.displayName = SelectPrimitive.Label.displayName
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+}
diff --git a/frontend/edu-connect/src/components/ui/tabs.tsx b/frontend/edu-connect/src/components/ui/tabs.tsx
new file mode 100644
index 0000000..0f4caeb
--- /dev/null
+++ b/frontend/edu-connect/src/components/ui/tabs.tsx
@@ -0,0 +1,55 @@
+"use client"
+
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@/lib/utils"
+
+const Tabs = TabsPrimitive.Root
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+      className
+    )}
+    {...props}
+  />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    )}
+    {...props}
+  />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }
diff --git a/frontend/edu-connect/src/components/ui/textarea.tsx b/frontend/edu-connect/src/components/ui/textarea.tsx
new file mode 100644
index 0000000..e56b0af
--- /dev/null
+++ b/frontend/edu-connect/src/components/ui/textarea.tsx
@@ -0,0 +1,22 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Textarea = React.forwardRef<
+  HTMLTextAreaElement,
+  React.ComponentProps<"textarea">
+>(({ className, ...props }, ref) => {
+  return (
+    <textarea
+      className={cn(
+        "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  )
+})
+Textarea.displayName = "Textarea"
+
+export { Textarea }
diff --git a/frontend/edu-connect/src/helpers/apiSchema/User.ts b/frontend/edu-connect/src/helpers/apiSchema/User.ts
new file mode 100644
index 0000000..a4abf48
--- /dev/null
+++ b/frontend/edu-connect/src/helpers/apiSchema/User.ts
@@ -0,0 +1,14 @@
+export interface User {
+  firstName: string;
+  lastName: string;
+  email: string;
+  id: string;
+  pfpName: string;
+  bio: string;
+  date_of_birth: string;
+}
+
+export interface Admin extends User {
+  role: string;
+  permissions: string[];
+}
diff --git a/frontend/edu-connect/src/helpers/context/AppContextProvider.tsx b/frontend/edu-connect/src/helpers/context/AppContextProvider.tsx
new file mode 100644
index 0000000..cea4461
--- /dev/null
+++ b/frontend/edu-connect/src/helpers/context/AppContextProvider.tsx
@@ -0,0 +1,15 @@
+import { AuthProvider } from "./AuthProvider"
+
+const AppContextProvider = ({
+  children
+} : {
+  children : React.ReactNode
+}) => {
+  return(
+    <AuthProvider>
+      {children}
+    </AuthProvider>
+  )
+}
+
+export default AppContextProvider
\ No newline at end of file
diff --git a/frontend/edu-connect/src/helpers/context/AuthProvider.tsx b/frontend/edu-connect/src/helpers/context/AuthProvider.tsx
new file mode 100644
index 0000000..fbc8e79
--- /dev/null
+++ b/frontend/edu-connect/src/helpers/context/AuthProvider.tsx
@@ -0,0 +1,93 @@
+"use client";
+
+import React, { ReactNode, createContext, useEffect, useState } from "react";
+import Cookies from "js-cookie";
+import { User } from "../apiSchema/User";
+import { getEduConnectAccessToken } from "../token.helper";
+
+interface AuthContextProps {
+  user: User | null;
+  loading: boolean;
+  fetchUser: (token: string) => void;
+  logout: () => void;
+}
+
+interface AuthProviderProps {
+  children: ReactNode;
+}
+
+const AuthContext = createContext<AuthContextProps>({
+  user: null,
+  loading: true,
+  fetchUser: () => {},
+  logout: () => {},
+});
+
+const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
+  
+
+  const [user, setUser] = useState<User | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  const fetchUser = async () => {
+    
+
+    try {
+      // Fetch user data
+      const userResponse = await fetch(`${process.env.NEXT_PUBLIC_EDU_CONNECT_HOST}/api/get-user-by-token`, {
+        method: "POST",
+        headers: {
+          Authorization: `Bearer ${getEduConnectAccessToken()}`,
+          Accept: "Application/json",
+        },
+      });
+
+      const userData = await userResponse.json();
+      setUser(userData.data);
+      // router.replace(routes.SELECT_COMPANY_INDEX)
+    } catch (error) {
+      console.error("Fetch error:", error);
+      // router.replace(routes.ADMIN_LOGIN);
+    } finally {
+      setLoading(false); // Only set loading to false on initial load
+    }
+  };
+
+  useEffect(() => {
+    if (!user) {
+      fetchUser();
+    }
+  }, []);
+
+
+  const logout = async () => {
+    try {
+      await fetch(`${process.env.NEXT_PUBLIC_IDP_HOST}/api/logout`, {
+        method: "POST",
+        headers: {
+          Authorization: `Bearer ${getEduConnectAccessToken()}`,
+        },
+      });
+    } catch (error) {
+      console.error("Logout error:", error);
+    } finally {
+      Cookies.remove("HRMS_ACCESS_TOKEN", { domain: process.env.APP_DOMAIN });
+      setUser(null);
+    }
+  };
+
+  return (
+    <AuthContext.Provider
+      value={{
+        user,
+        loading: !user && loading,
+        fetchUser: fetchUser,
+        logout,
+      }}
+    >
+      {children}
+    </AuthContext.Provider>
+  );
+};
+
+export { AuthContext, AuthProvider };
\ No newline at end of file
diff --git a/frontend/edu-connect/src/helpers/token.helper.ts b/frontend/edu-connect/src/helpers/token.helper.ts
new file mode 100644
index 0000000..f1bb67c
--- /dev/null
+++ b/frontend/edu-connect/src/helpers/token.helper.ts
@@ -0,0 +1,16 @@
+import Cookie from 'js-cookie'
+
+export const getEduConnectAccessToken = () : string | null => {
+  return Cookie.get('EDU_CONNECT_ACCESS_TOKEN')
+}
+
+export const setEduConnectAccessToken = (token : string) : void => {
+  Cookie.set('EDU_CONNECT_ACCESS_TOKEN' , token)
+}
+
+export const removeEduConnectAccessToken = () : void => {
+  Cookie.remove('EDU_CONNECT_ACCESS_TOKEN')
+}
+
+
+
diff --git a/frontend/edu-connect/src/lib/routes.ts b/frontend/edu-connect/src/lib/routes.ts
new file mode 100644
index 0000000..5f543bf
--- /dev/null
+++ b/frontend/edu-connect/src/lib/routes.ts
@@ -0,0 +1,4 @@
+export const routes = {
+  INDEX_PAGE : '/' , 
+  LOGIN_ROUTES : '/login'
+}
\ No newline at end of file
diff --git a/frontend/edu-connect/src/views/CommonView.tsx b/frontend/edu-connect/src/views/CommonView.tsx
new file mode 100644
index 0000000..a54c4fa
--- /dev/null
+++ b/frontend/edu-connect/src/views/CommonView.tsx
@@ -0,0 +1,20 @@
+import Footer from "@/components/common/Footer/footer"
+import Header from "@/components/common/Header/header"
+
+const CommonView = ({
+  children
+} : {
+  children : React.ReactNode
+}) => {
+  return(
+    <div className="min-h-screen flex flex-col justify-between">
+      <Header />
+      <main>
+        {children}
+      </main>
+      <Footer />
+    </div>
+  )
+}
+
+export default CommonView
\ No newline at end of file
diff --git a/frontend/edu-connect/tailwind.config.ts b/frontend/edu-connect/tailwind.config.ts
index 0aecfcc..9170f8d 100644
--- a/frontend/edu-connect/tailwind.config.ts
+++ b/frontend/edu-connect/tailwind.config.ts
@@ -6,6 +6,7 @@ const config: Config = {
     "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
     "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
     "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/views/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   theme: {
   	extend: {