diff --git a/admin/src/shared/Sidebar.jsx b/admin/src/shared/Sidebar.jsx
index 6de4698..4dab128 100644
--- a/admin/src/shared/Sidebar.jsx
+++ b/admin/src/shared/Sidebar.jsx
@@ -1,4 +1,3 @@
-
 /*
 
 Copyright 2024 Himanshu Dinkar
@@ -16,9 +15,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {  useState ,useContext} from "react";
+import { useState, useContext } from "react";
 import { Link, useLocation, useNavigate } from "react-router-dom";
-// import { ContextStore } from "../store/ContextStore";
+import { motion } from "framer-motion";
+import { Tooltip } from "@mui/material";
 import Logo from "../components/Dashboard/Logo";
 import Lottie from "lottie-react";
 import loadingAnimation from "../assets/loading.json";
@@ -30,9 +30,9 @@ import EventNoteIcon from '@mui/icons-material/EventNote';
 import QuizIcon from '@mui/icons-material/Quiz';
 import AssignmentIcon from '@mui/icons-material/Assignment';
 import Modal from "../components/Model";
+
 const Sidebar = () => {
- 
-  const {userRole} = useContext(RoleContext);
+  const { userRole } = useContext(RoleContext);
   const location = useLocation();
   const [isModalOpen, setIsModalOpen] = useState(false);
   const navigate = useNavigate();
@@ -40,163 +40,157 @@ const Sidebar = () => {
   // Loader state
   const [isLoading, setIsLoading] = useState(false);
 
-  
   const isActive = (path) => location.pathname === path;
 
-
   const handleNavigation = (path) => {
     if (location.pathname !== path) {
       setIsLoading(true);
       setTimeout(() => {
         setIsLoading(false);
         navigate(path);
-      }, 1500); 
+      }, 1500);
     }
   };
 
-  return (
-    <div className="flex max-md:hidden  ">
-      {/* Sidebar */}
-      <div className="sidebar fixed top-0  left-0 h-screen flex flex-col w-[20%] bg-gradient-to-tr from-indigo-800 to-blue-700 text-white">
-        <ul className="flex flex-col ml-10 gap-5">
-          <Logo />
-          <div className="flex gap-4" >
-          <li
-            onClick={() => handleNavigation("/dashboard")}
-            className={`list-style-none flex items-center gap-4 font-medium focus:bg-blue-400 p-3 w-[80%] cursor-pointer hover:text-gray-700 transition-all duration-75 ${
-              isActive("/dashboard")
-                ? "bg-white text-black border rounded-md"
-                : "text-white"
-            }`}
-          >
-          <DashboardIcon/>
-            Dashboard
-          </li>
+  const MenuItem = ({ path, icon: Icon, label, onClick, show = true }) => {
+    if (!show) return null;
+
+    return (
+      <Tooltip title={label} placement="right">
+        <motion.li
+          whileHover={{ x: 5 }}
+          whileTap={{ scale: 0.95 }}
+          onClick={onClick}
+          className={`list-style-none flex items-center gap-4 font-medium p-4 mx-2 
+            rounded-xl cursor-pointer transition-all duration-300 group
+            ${isActive(path)
+              ? "bg-white text-indigo-800 shadow-lg"
+              : "text-white hover:bg-white/10"}`}
+        >
+          <div className={`p-2 rounded-lg ${isActive(path) ? "bg-indigo-100" : "group-hover:bg-white/5"}`}>
+            <Icon className={`w-6 h-6 ${isActive(path) ? "text-indigo-600" : ""}`} />
           </div>
+          <span className="text-sm font-medium">{label}</span>
+        </motion.li>
+      </Tooltip>
+    );
+  };
 
+  return (
+    <div className="flex max-md:hidden">
+      <motion.div
+        initial={{ x: -100 }}
+        animate={{ x: 0 }}
+        className="sidebar fixed top-0 left-0 h-screen flex flex-col w-[280px] 
+          bg-gradient-to-br from-indigo-900 via-indigo-800 to-blue-900 
+          shadow-2xl"
+      >
+        <div className="p-6">
+          <Logo />
+        </div>
 
-{userRole==='Director' &&  <li
-            onClick={() => handleNavigation("/add-teachers")}
-            className={`list-style-none font-medium focus:bg-blue-400 p-3 w-[80%] cursor-pointer ${
-              isActive("/add-teachers")
-                ? "bg-white text-black border rounded-md"
-                : "text-white"
-            }`}
-          >
-            Add Teachers
-          </li> }
-         
-
-         {userRole==='Registrar' &&  <li
-            onClick={() => handleNavigation("/enroll-students")}
-            className={`list-style-none font-medium focus:bg-blue-400 p-3 w-[80%] cursor-pointer ${
-              isActive("/enroll-students")
-                ? "bg-white text-black border rounded-md"
-                : "text-white"
-            }`}
-          >
-            Enroll Students
-          </li>}
-          
-          {(userRole==='Teacher'||userRole==='Director') &&  <li
-            onClick={() => handleNavigation("/announcement")}
-            className={`list-style-none flex items-center gap-2 font-medium focus:bg-blue-400 p-3 w-[80%] cursor-pointer ${
-              isActive("/announcement")
-                ? "bg-white text-black border rounded-md"
-                : "text-white"
-            }`}
-          >
-            <CampaignIcon/>
-            Announcement
-          </li>}
-         
-
-         {userRole==='Teacher'&& <li
-            onClick={() => handleNavigation("/timetable")}
-            className={`list-style-none flex gap-4 items-center font-medium focus:bg-blue-400 p-3 w-[80%] cursor-pointer ${
-              isActive("/timetable")
-                ? "bg-white text-black border rounded-md"
-                : "text-white"
-            }`}
-          >
-            <EventNoteIcon/>
-            Time Table
-          </li>}
-         
-
-         {userRole ==='Teacher' && <li
-            onClick={() => handleNavigation("/post-quiz")}
-            className={`list-style-none flex items-center gap-4 font-medium focus:bg-blue-400 p-3 w-[80%] cursor-pointer ${
-              isActive("/post-quiz")
-                ? "bg-white text-black border rounded-md"
-                : "text-white"
-            }`}
-          >
-            <QuizIcon/>
-            Quiz
-          </li>}
-         
-
-         {userRole==='Teacher'&& <li
-            onClick={() => handleNavigation("/post-assignment")}
-            className={`list-style-none flex items-center gap-4 font-medium focus:bg-blue-400 p-3 w-[80%] cursor-pointer ${
-              isActive("/post-assignment")
-                ? "bg-white text-black border rounded-md"
-                : "text-white"
-            }`}
-          >
-            <AssignmentIcon/>
-            Assignment
-          </li>}
-         
-
-          {userRole === 'Registrar' && <li
-            onClick={() => handleNavigation("/student-detail")}
-            className={`list-style-none font-medium focus:bg-blue-400 p-3 w-[80%] cursor-pointer ${
-              isActive("/admin-live")
-                ? "bg-white text-black border rounded-md"
-                : "text-white"
-            }`}
-          >
-            Student Details
-          </li>}
-
-          {userRole === 'Registrar' && <li
-            onClick={() => handleNavigation("/teachers")}
-            className={`list-style-none font-medium focus:bg-blue-400 p-3 w-[80%] cursor-pointer ${
-              isActive("/admin-live")
-                ? "bg-white text-black border rounded-md"
-                : "text-white"
-            }`}
-          >
-            Teacher Details
-          </li>}
-
-         {(userRole === 'Teacher'|| userRole==='Director') && <div className="flex items-center gap-4" >
-          <li
-             onClick={() => setIsModalOpen(true)}
-            className={`list-style-none flex items-center gap-4 font-medium focus:bg-blue-400 p-3 w-[80%] cursor-pointer ${
-              isActive("/admin-live")
-                ? "bg-white text-black border rounded-md"
-                : "text-white"
-            }`}
-          >
-          <LiveTvIcon  />
-            Go Live Class
-          </li>
-          </div>}
-         
-        </ul>
-      </div>
+        <nav className="flex-1 mt-6">
+          <ul className="flex flex-col gap-2">
+            <MenuItem
+              path="/dashboard"
+              icon={DashboardIcon}
+              label="Dashboard"
+              onClick={() => handleNavigation("/dashboard")}
+            />
+
+            <MenuItem
+              path="/add-teachers"
+              icon={AssignmentIcon}
+              label="Add Teachers"
+              onClick={() => handleNavigation("/add-teachers")}
+              show={userRole === 'Director'}
+            />
+
+            <MenuItem
+              path="/enroll-students"
+              icon={AssignmentIcon}
+              label="Enroll Students"
+              onClick={() => handleNavigation("/enroll-students")}
+              show={userRole === 'Registrar'}
+            />
+
+            <MenuItem
+              path="/announcement"
+              icon={CampaignIcon}
+              label="Announcement"
+              onClick={() => handleNavigation("/announcement")}
+              show={userRole === 'Teacher' || userRole === 'Director'}
+            />
+
+            <MenuItem
+              path="/timetable"
+              icon={EventNoteIcon}
+              label="Time Table"
+              onClick={() => handleNavigation("/timetable")}
+              show={userRole === 'Teacher'}
+            />
+
+            <MenuItem
+              path="/post-quiz"
+              icon={QuizIcon}
+              label="Quiz"
+              onClick={() => handleNavigation("/post-quiz")}
+              show={userRole === 'Teacher'}
+            />
+
+            <MenuItem
+              path="/post-assignment"
+              icon={AssignmentIcon}
+              label="Assignment"
+              onClick={() => handleNavigation("/post-assignment")}
+              show={userRole === 'Teacher'}
+            />
+
+            <MenuItem
+              path="/student-detail"
+              icon={AssignmentIcon}
+              label="Student Details"
+              onClick={() => handleNavigation("/student-detail")}
+              show={userRole === 'Registrar'}
+            />
+
+            <MenuItem
+              path="/teachers"
+              icon={AssignmentIcon}
+              label="Teacher Details"
+              onClick={() => handleNavigation("/teachers")}
+              show={userRole === 'Registrar'}
+            />
+
+            {(userRole === 'Teacher' || userRole === 'Director') && (
+              <motion.div
+                whileHover={{ scale: 1.02 }}
+                className="mx-2 mt-4"
+              >
+                <button
+                  onClick={() => setIsModalOpen(true)}
+                  className="w-full flex items-center gap-3 px-4 py-3 
+                    bg-gradient-to-r from-blue-500 to-indigo-500 
+                    text-white rounded-xl shadow-lg hover:shadow-xl
+                    transition-all duration-300"
+                >
+                  <LiveTvIcon />
+                  <span>Go Live Class</span>
+                </button>
+              </motion.div>
+            )}
+          </ul>
+        </nav>
+      </motion.div>
 
       <Modal
         isOpen={isModalOpen}
         onClose={() => setIsModalOpen(false)}
         onSubmit={() => console.log("Handle Room Join")}
         email=""
-        setEmail={() => {}}
+        setEmail={() => { }}
         roomId=""
-        setRoomId={() => {}}
+        setRoomId={() => { }}
         loading={false}
       />
 
@@ -208,7 +202,6 @@ const Sidebar = () => {
             loop={true}
             className="w-20 h-20"
           />
-         
         </div>
       )}
     </div>
diff --git a/client/package-lock.json b/client/package-lock.json
index 6c8ff42..dcbc461 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -16,6 +16,7 @@
         "axios": "^1.7.7",
         "clsx": "^2.1.1",
         "dompurify": "^3.2.3",
+        "framer-motion": "^12.0.6",
         "lucide-react": "^0.459.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
@@ -3469,6 +3470,33 @@
         "url": "https://github.com/sponsors/rawify"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "12.0.6",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.0.6.tgz",
+      "integrity": "sha512-LmrXbXF6Vv5WCNmb+O/zn891VPZrH7XbsZgRLBROw6kFiP+iTK49gxTv2Ur3F0Tbw6+sy9BVtSqnWfMUpH+6nA==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^12.0.0",
+        "motion-utils": "^12.0.0",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -4544,6 +4572,21 @@
         "node": ">=16 || 14 >=14.17"
       }
     },
+    "node_modules/motion-dom": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.0.0.tgz",
+      "integrity": "sha512-CvYd15OeIR6kHgMdonCc1ihsaUG4MYh/wrkz8gZ3hBX/uamyZCXN9S9qJoYF03GqfTt7thTV/dxnHYX4+55vDg==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-utils": "^12.0.0"
+      }
+    },
+    "node_modules/motion-utils": {
+      "version": "12.0.0",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.0.0.tgz",
+      "integrity": "sha512-MNFiBKbbqnmvOjkPyOKgHUp3Q6oiokLkI1bEwm5QA28cxMZrv0CbbBGDNmhF6DIXsi1pCQBSs0dX8xjeER1tmA==",
+      "license": "MIT"
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -6055,6 +6098,12 @@
       "dev": true,
       "license": "Apache-2.0"
     },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
diff --git a/client/package.json b/client/package.json
index 4797c71..fa28a29 100644
--- a/client/package.json
+++ b/client/package.json
@@ -18,6 +18,7 @@
     "axios": "^1.7.7",
     "clsx": "^2.1.1",
     "dompurify": "^3.2.3",
+    "framer-motion": "^12.0.6",
     "lucide-react": "^0.459.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
diff --git a/client/public/images/myImage.jpeg b/client/public/images/myImage.jpeg
new file mode 100644
index 0000000..be2e0e3
Binary files /dev/null and b/client/public/images/myImage.jpeg differ
diff --git a/client/src/components/AI Powered Assistant/AiAssistent.jsx b/client/src/components/AI Powered Assistant/AiAssistent.jsx
index b3bc3c8..e9f14bc 100644
--- a/client/src/components/AI Powered Assistant/AiAssistent.jsx	
+++ b/client/src/components/AI Powered Assistant/AiAssistent.jsx	
@@ -22,6 +22,8 @@ import SendIcon from '@mui/icons-material/Send';
 import AssistantIcon from '@mui/icons-material/AssistantOutlined';
 import { FaSpinner } from 'react-icons/fa';
 import DOMPurify from 'dompurify';
+import { motion, AnimatePresence } from "framer-motion";
+import { Sparkles, Brain, Copy, SendHorizontal } from 'lucide-react';
 
 const AiAssistent = () => {
   const [input, setInput] = useState("");
@@ -80,66 +82,106 @@ const AiAssistent = () => {
   };
 
   return (
-    <div className="min-h-screen bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
-      <div className="max-w-3xl mx-auto">
-        <div className="text-center mb-8">
-          <h1 className="text-4xl font-bold text-gray-900 mb-2 flex items-center justify-center gap-2">
-            <AssistantIcon className="w-10 h-10 text-blue-600" />
-            Classroom AI Assistant
+    <div className="min-h-screen bg-gradient-to-b from-slate-900 via-slate-800 to-slate-900 py-12 px-4">
+      <div className="max-w-4xl mx-auto">
+        {/* Header Section */}
+        <motion.div 
+          initial={{ y: -20 }}
+          animate={{ y: 0 }}
+          className="text-center mb-12"
+        >
+          <div className="inline-flex items-center justify-center p-3 mb-6 bg-gradient-to-r from-purple-500/10 to-blue-500/10 rounded-2xl border border-purple-500/20">
+            <Brain className="w-10 h-10 text-purple-400" />
+          </div>
+          <h1 className="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-blue-400 mb-4">
+            AI Classroom Assistant
           </h1>
-          <p className="mt-2 text-lg text-gray-600">
-            Ask me anything about your course material, assignments, or schedule
+          <p className="text-gray-400 text-sm max-w-2xl mx-auto">
+            Your intelligent learning companion. Ask questions about your courses, assignments, or any academic topic.
           </p>
-        </div>
-
-        {/* Response Container - Above Input */}
-        {output && (
-          <div className="mb-8 p-6 bg-white rounded-xl shadow-sm border border-gray-200 animate-fade-in">
-            <div className="flex items-start gap-3">
-              <AssistantIcon className="w-6 h-6 text-blue-600 mt-1" />
-              <div className="flex-1 min-w-0">
-                <div 
-                  className="text-gray-900 space-y-4"
-                  dangerouslySetInnerHTML={{ __html: formatResponse(output) }}
-                />
-              </div>
+        </motion.div>
+
+
+        {/* Chat Container */}
+        <div className="bg-slate-800/50 rounded-2xl border border-purple-500/20 backdrop-blur-sm text-gray-200 shadow-2xl mb-8">
+          {/* Response Display */}
+          <AnimatePresence>
+            {output && (
+              <motion.div 
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                exit={{ opacity: 0 }}
+                className="p-6 border-b border-gray-700"
+              >
+                <div className="flex gap-4">
+                  <div className="flex-shrink-0">
+                    <div className="w-8 h-8 rounded-lg bg-gradient-to-r from-purple-500 to-blue-500 flex items-center justify-center">
+                      <Sparkles className="w-4 h-4 text-white" />
+                    </div>
+                  </div>
+                  <div className="flex-grow space-y-4">
+                    <div 
+                      className="prose prose-invert max-w-none"
+                      dangerouslySetInnerHTML={{ __html: formatResponse(output) }}
+                    />
+                    <button
+                      onClick={() => {
+                        navigator.clipboard.writeText(output);
+                        toast.success("Response copied to clipboard!");
+                      }}
+                      className="flex items-center gap-2 text-sm text-gray-400 hover:text-white transition-colors"
+                    >
+                      <Copy className="w-4 h-4" />
+                      Copy response
+                    </button>
+                  </div>
+                </div>
+              </motion.div>
+            )}
+          </AnimatePresence>
+
+          {/* Input Form */}
+          <form onSubmit={handleSubmit} className="p-6">
+            <div className="relative">
+              <textarea
+                value={input}
+                onChange={(e) => setInput(e.target.value)}
+                placeholder="Ask your question here..."
+                className="w-full px-4 py-3 bg-slate-900/50 text-gray-100 rounded-xl
+                  border border-gray-700 focus:border-purple-500 focus:ring-2 
+                  focus:ring-purple-500 focus:ring-opacity-50 transition-all
+                  placeholder-gray-500 resize-none"
+                rows="3"
+                disabled={loading}
+              />
             </div>
-          </div>
-        )}
-
-        {/* Input Form - Fixed at Bottom */}
-        <form onSubmit={handleSubmit} className="sticky bottom-0 bg-gray-50 pt-4 space-y-6">
-          <div className="relative">
-            <textarea
-              value={input}
-              onChange={(e) => setInput(e.target.value)}
-              placeholder="Type your question here..."
-              className="w-full px-6 py-4 text-gray-900 bg-white rounded-xl shadow-sm border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none transition-all duration-200 placeholder-gray-500"
-              rows="3"
-              disabled={loading}
-            />
-          </div>
 
-          <button
-            type="submit"
-            disabled={loading}
-            className={`w-full flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-xl text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-200 ${
-              loading ? 'opacity-75 cursor-not-allowed' : ''
-            }`}
-          >
-            {loading ? (
-              <>
-                <FaSpinner className="animate-spin h-5 w-5 mr-2" />
-                Generating Response...
-              </>
-            ) : (
-              <>
-                <SendIcon className="w-5 h-5 mr-2" />
-                Ask Question
-              </>
-            )}
-          </button>
-        </form>
+            <motion.button
+              whileHover={{ scale: 1.01 }}
+              whileTap={{ scale: 0.99 }}
+              type="submit"
+              disabled={loading}
+              className={`mt-4 w-full flex items-center justify-center gap-2 px-6 py-3 
+                rounded-xl font-medium transition-all duration-200
+                ${loading 
+                  ? 'bg-gray-700 cursor-not-allowed' 
+                  : 'bg-gradient-to-r from-purple-500 to-blue-500 hover:from-purple-600 hover:to-blue-600'
+                }`}
+            >
+              {loading ? (
+                <>
+                  <FaSpinner className="animate-spin w-5 h-5" />
+                  <span>Processing your question...</span>
+                </>
+              ) : (
+                <>
+                  <SendHorizontal className="w-5 h-5" />
+                  <span>Ask Question</span>
+                </>
+              )}
+            </motion.button>
+          </form>
+        </div>
       </div>
     </div>
   );
diff --git a/client/src/pages/About/AboutPage.tsx b/client/src/pages/About/AboutPage.tsx
index 848b8ae..5c4a3d4 100644
--- a/client/src/pages/About/AboutPage.tsx
+++ b/client/src/pages/About/AboutPage.tsx
@@ -25,33 +25,34 @@ import JourneySection from "./components/JourneySection";
 import TeamSection from "./components/TeamSection";
 import ServiceLayout from "../../layout/ServiceLayout";
 
-const AboutPage : React.FC = () => {
+const AboutPage: React.FC = () => {
   return (
-    <div className="min-h-screen bg-gradient-to-b from-slate-950 to-indigo-950  mt-14 bg-white">
-      {/* Previous sections remain unchanged */}
-      {/* Hero Section */}
-      <HeroSection />
-
-      {/* Stats Section */}
-      <StatSection />
-
-<hr className="outline-none mx-14 border-t-2 border-indigo-900" />
-      {/* New Services Section */}
-      <ServiceSection />
-
-      {/* Mission Section */}
-      <MissionSection />
-
-      {/* Journey Section */}
-      <JourneySection />
-
-      {/* Team Section */}
-
-      <TeamSection />
-      <hr  className="outline-none  border-t-2 border-indigo-900 max-md:mx-11 mx-24" />
-
-      {/* Footer */}
-      {/* <Footer /> */}
+    <div className="min-h-screen bg-[#0A0F1C] text-white overflow-hidden">
+      <div className="relative">
+        {/* Background gradient effects */}
+        <div className="absolute top-0 left-0 w-full h-full">
+          <div className="absolute top-1/4 -left-1/4 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl"></div>
+          <div className="absolute bottom-1/4 -right-1/4 w-96 h-96 bg-blue-500/10 rounded-full blur-3xl"></div>
+        </div>
+
+        <div className="relative z-10">
+          <HeroSection />
+          <StatSection />
+          
+          <div className="max-w-7xl mx-auto px-4">
+            <div className="h-px bg-gradient-to-r from-transparent via-purple-500/50 to-transparent my-16"></div>
+          </div>
+          
+          <ServiceSection />
+          <MissionSection />
+          <JourneySection />
+          <TeamSection />
+          
+          <div className="max-w-7xl mx-auto px-4">
+            <div className="h-px bg-gradient-to-r from-transparent via-purple-500/50 to-transparent my-16"></div>
+          </div>
+        </div>
+      </div>
     </div>
   );
 };
diff --git a/client/src/pages/About/components/HeroSection.tsx b/client/src/pages/About/components/HeroSection.tsx
index 1a9f02e..0ab8ce5 100644
--- a/client/src/pages/About/components/HeroSection.tsx
+++ b/client/src/pages/About/components/HeroSection.tsx
@@ -1,19 +1,37 @@
 import React from 'react';
+import { motion } from 'framer-motion';
 
 const HeroSection = () => {
   return (
-    <section className="py-20 bg-gradient-to-b from-slate-950 ">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div className="text-center">
-          <h1 className="text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-300 to-violet-500 mb-6">
-            About EduMatrix
-          </h1>
-          <p className="text-xl text-gray-300 max-w-3xl mx-auto">
-            We're on a mission to make quality education accessible to everyone through innovative technology and dedicated teaching.
-          </p>
+    <section className="relative   py-32 overflow-hidden">
+      <motion.div 
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.8 }}
+        className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10"
+      >
+        <div className="text-center space-y-4">
+          <motion.h1 
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            className="text-5xl font-bold bg-clip-text text-transparent bg-gradient-to-r 
+              from-purple-400 via-pink-500 to-violet-500  leading-tight"
+          >
+            Transforming Education Through Technology
+          </motion.h1>
+          <motion.p 
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.2 }}
+            className=" text-gray-300 text-lg max-w-3xl mx-auto leading-relaxed"
+          >
+            Building the future of learning with innovative virtual classrooms and AI-powered education.
+          </motion.p>
+         
         </div>
-      </div>
+      </motion.div>
     </section>
+    
   );
 };
 
diff --git a/client/src/pages/About/components/JourneySection.tsx b/client/src/pages/About/components/JourneySection.tsx
index 3ecb20e..d120460 100644
--- a/client/src/pages/About/components/JourneySection.tsx
+++ b/client/src/pages/About/components/JourneySection.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { motion } from 'framer-motion';
 import milestones from "../utils/milestones.ts";
 
 
@@ -7,29 +8,47 @@ interface Milestone{
   event:string;
 }
 
-const JourneySection : React.FC = () => {
-
+const JourneySection: React.FC = () => {
   return (
-    <section className="py-20 bg-gradient-to-b from-indigo-950 to-slate-950">
+    <section className="py-32 relative">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        <h2 className="text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-violet-600 mb-12 text-center">
+        <motion.h2 
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          className="text-5xl font-bold text-center bg-clip-text text-transparent 
+            bg-gradient-to-r from-purple-400 via-pink-500 to-violet-500 mb-16"
+        >
           Our Journey
-        </h2>
-        <div className="max-w-3xl mx-auto">
+        </motion.h2>
+
+        <div className="max-w-4xl mx-auto">
           {milestones.map((milestone : Milestone, index : number) => (
-            <div key={index} className="flex items-start mb-8 last:mb-0" data-aos="fade-up">
-              <div className="flex-shrink-0 w-24">
-                <div className="font-bold text-purple-200">
+            <motion.div
+              key={index}
+              initial={{ opacity: 0, x: -50 }}
+              whileInView={{ opacity: 1, x: 0 }}
+              transition={{ delay: index * 0.2 }}
+              className="flex items-start mb-12 last:mb-0"
+            >
+              <div className="flex-shrink-0 w-32">
+                <div className="text-2xl font-bold bg-clip-text text-transparent 
+                  bg-gradient-to-r from-purple-400 to-pink-400">
                   {milestone.year}
                 </div>
               </div>
-              <div className="flex-grow pl-8 border-l-2 border-indigo-900 relative">
-                <div className="absolute -left-2.5 top-0 w-5 h-5 bg-indigo-900 rounded-full border-2 border-purple-400"></div>
-                <div className="bg-indigo-900 text-gray-300 p-6 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300">
-                  {milestone.event}
-                </div>
+              <div className="flex-grow pl-8 border-l-2 border-purple-500/30 relative">
+                <div className="absolute -left-[9px] top-[10px] w-4 h-4 bg-purple-500 rounded-full 
+                  shadow-lg shadow-purple-500/50"></div>
+                <motion.div
+                  whileHover={{ scale: 1.02 }}
+                  className="bg-gradient-to-br from-purple-500/10 to-violet-500/10 
+                    backdrop-blur-sm border border-purple-500/10 p-6 rounded-xl 
+                    shadow-lg hover:shadow-purple-500/20 transition-all duration-300"
+                >
+                  <p className="text-gray-300 text-lg">{milestone.event}</p>
+                </motion.div>
               </div>
-            </div>
+            </motion.div>
           ))}
         </div>
       </div>
diff --git a/client/src/pages/About/components/StatSection.tsx b/client/src/pages/About/components/StatSection.tsx
index 0f386b0..55a0eca 100644
--- a/client/src/pages/About/components/StatSection.tsx
+++ b/client/src/pages/About/components/StatSection.tsx
@@ -9,7 +9,7 @@ icon:ReactNode
 
 const StatSection : React.FC = () => {
   return (
-    <section className="py-20 bg-gradient-to-b from-slate-950 ">
+    <section className="  bg-gradient-to-b   ">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
           {stats.map((stat : Stat, index:number) => (
diff --git a/client/src/pages/About/components/TeamSection.tsx b/client/src/pages/About/components/TeamSection.tsx
index e89cf66..ab5fd6e 100644
--- a/client/src/pages/About/components/TeamSection.tsx
+++ b/client/src/pages/About/components/TeamSection.tsx
@@ -1,29 +1,63 @@
 import React from 'react';
+import { motion } from 'framer-motion';
 
-const TeamSection : React.FC = () => {
+const teamMembers = [
+  {
+    name: 'John Doe',
+    role: 'CEO & Founder',
+    image: '/path-to-image.jpg',
+    social: {
+      linkedin: '#',
+      twitter: '#'
+    }
+  },
+  // ...add more team members
+];
+
+const TeamSection: React.FC = () => {
   return (
-    <section className="py-20 bg-gradient-to-b from-indigo-950 to-slate-950">
+    <section className="py-32 relative overflow-hidden">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div className="text-center">
-          <h2 className="text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-violet-600 mb-6">
-            Our Team
+        <motion.div 
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6 }}
+          className="text-center mb-16"
+        >
+          <h2 className="text-5xl font-bold bg-clip-text text-transparent 
+            bg-gradient-to-r from-purple-400 via-pink-500 to-violet-500 mb-6">
+            Meet Our Team
           </h2>
-          <p className="text-lg text-gray-300 mb-12 max-w-3xl mx-auto">
-            We're a dedicated team of educators, technologists, and innovators working together to transform education.
+          <p className="text-xl text-gray-300 max-w-3xl mx-auto">
+            Passionate educators and innovators dedicated to transforming the future of education
           </p>
-        </div>
-        {/* Placeholder for team members */}
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-          {[1, 2, 3].map((_, index:number) => (
-            <div
+        </motion.div>
+
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-12">
+          {teamMembers.map((member, index) => (
+            <motion.div
               key={index}
-              className="bg-slate-900 p-8 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300 hover:scale-105"
-              data-aos="fade-up"
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              transition={{ delay: index * 0.2 }}
+              className="group"
             >
-              <div className="w-24 h-24 bg-gray-700 rounded-full mx-auto mb-4"></div>
-              <h3 className="text-xl font-semibold text-gray-200 mb-2">Team Member {index + 1}</h3>
-              <p className="text-gray-400">Role</p>
-            </div>
+              <div className="relative overflow-hidden rounded-2xl bg-gradient-to-b from-purple-500/10 to-violet-500/10
+                backdrop-blur-sm border border-purple-500/10 p-8 hover:shadow-2xl
+                transition-all duration-300 hover:scale-105"
+              >
+                {/* Member content */}
+                <div className="relative z-10">
+                  <div className="w-32 h-32 mx-auto mb-6 overflow-hidden rounded-full 
+                    border-4 border-purple-500/30 group-hover:border-purple-500 transition-colors">
+                    <img src="/images/myImage.jpeg" alt="" className="w-full h-full object-cover" />
+                  </div>
+                  <h3 className="text-2xl font-semibold text-white mb-2">Himanshu Dinkar</h3>
+                  <p className="text-purple-400 mb-4">{member.role}</p>
+                  {/* Add social links */}
+                </div>
+              </div>
+            </motion.div>
           ))}
         </div>
       </div>
diff --git a/client/src/pages/Home/components/DashboardSection.jsx b/client/src/pages/Home/components/DashboardSection.jsx
index a09434e..0bb1cf4 100644
--- a/client/src/pages/Home/components/DashboardSection.jsx
+++ b/client/src/pages/Home/components/DashboardSection.jsx
@@ -15,44 +15,79 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react'
-import '../CSS/HomePage.css'
+import React from 'react';
+import { motion } from 'framer-motion';
+import '../CSS/HomePage.css';
+
+const features = [
+  // { icon: "💎", text: "Role based Admin features" },
+  { icon: "💎", text: "Add teachers and students in your Virtual College" },
+  { icon: "💎", text: "Upload Assignment and Quizes for your Students" },
+  { icon: "💎", text: "Manage your College Timetable and Announcements" },
+  { icon: "💎", text: "View and Download your College Reports" },
+  { icon: "💎", text: "Go Live feature for teaching your Students" }
+];
 
 const DashboardSection = () => {
   return (
-    <section  id="project-video"
-    className="py-10  px-6  max-md:h-auto rounded-md  relative shadow-md bg-gray-950 " >
-        <div className="container  max-md:h-auto  mx-auto flex max-md:flex-col gap-8 max-md:gap-6  max-md:justify-start h-screen p-20 max-md:p-0 w-full justify-center items-center ">
-
-        <div className="right-portion relative h-screen max-md:h-auto w-[100%] max-md:w-full flex max-md:items-start items-center  justify-center  ">
-        
-
-                <img className='rounded-md max-md:w-full w-[100%] max-md:h-auto max-md:ml-0 ml-11 h-[50%]  ' src="/images/dashboard.png" alt="" />
-        
-            </div>
-
-            <div className=" max-md:w-full  relative gap-8 flex max-md:mx-2 flex-col max-md:justify-start justify-center mx-4 w-[90%] ">
-                <h1 className='text-gray-200  w-full max-md:text-3xl max-md:w-full font-semibold text-4xl mx-3' > Interactive Admin Dashboard for College Faculty </h1>
-                <ul className='text-gray-200 max-md:text-sm w-full max-md:mx-1 gap-4 flex flex-col  text-wrap mx-3' >
-                    <li  > 💎 Role based Admin features</li>
-                    <li  > 💎 Add teachers and students in your Virtual College </li>
-                    <li  > 💎 Upload Assignment and Quizes for your Students </li>
-                    <li  > 💎 Manage your College Timetable and Announcements </li>
-                    <li  > 💎 View and Download your College Reports </li>
-                    <li> 💎 Go Live feature for teaching your Students </li>
-                    {/* <li  > 💎 AI powered Smart Education System </li> */}
-
-                </ul>
-            </div>
-            
-            </div>
+    <section className="py-20 px-6 bg-gradient-to-b from-gray-950 to-slate-900 relative overflow-hidden">
+      <div className="max-w-7xl mx-auto">
+        <motion.div 
+          initial={{ opacity: 0 }}
+          whileInView={{ opacity: 1 }}
+          transition={{ duration: 0.6 }}
+          className="grid lg:grid-cols-2 gap-16 items-center"
+        >
+          <motion.div
+            initial={{ x: -50, opacity: 0 }}
+            whileInView={{ x: 0, opacity: 1 }}
+            className="relative group"
+          >
+            <div className="absolute inset-0 h-full bg-blue-500/30 blur-3xl rounded-3xl group-hover:blur-2xl transition-all duration-300"></div>
+            <img 
+              className='rounded-2xl shadow-2xl relative  z-10 border border-blue-500/20 
+                transform transition-transform duration-500 group-hover:scale-[1.02]'
+              src="/images/dashboard.png" 
+              alt="Admin Dashboard" 
+            />
+          </motion.div>
+
+          <motion.div 
+            initial={{ x: 50, opacity: 0 }}
+            whileInView={{ x: 0, opacity: 1 }}
+            className="space-y-4"
+          >
+            <h2 className='text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-200 to-white'>
+              Interactive Admin Dashboard for College Faculty
+            </h2>
             
-                {/* <img className="absolute top-0 left-[45%]  h-[10%] object-contain max-md:hidden w-full  inset-0" src="/images/pattern6.png" alt="pattern1" />
+            <motion.ul className='space-y-4'>
+              {features.map((feature, index) => (
+                <motion.li
+                  key={index}
+                  initial={{ x: 50, opacity: 0 }}
+                  whileInView={{ x: 0, opacity: 1 }}
+                  transition={{ delay: index * 0.1 }}
+                  className="flex items-center gap-3 text-gray-300 hover:text-white transition-colors duration-300"
+                >
+                  <span className="text-md">{feature.icon}</span>
+                  <span className="text-md">{feature.text}</span>
+                </motion.li>
+              ))}
+            </motion.ul>
+
+           
+          </motion.div>
+        </motion.div>
+      </div>
 
-                <img className="absolute top-0 -left-[45%]  h-[10%] object-contain max-md:hidden w-full  inset-0" src="/images/pattern6.png" alt="pattern1" /> */}
-        
+      {/* Background decorations */}
+      <div className="absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none">
+        <div className="absolute top-1/4 -left-1/4 w-96 h-96 bg-blue-500/10 rounded-full blur-3xl"></div>
+        <div className="absolute bottom-1/4 -right-1/4 w-96 h-96 bg-indigo-500/10 rounded-full blur-3xl"></div>
+      </div>
     </section>
-  )
-}
+  );
+};
 
-export default DashboardSection
+export default DashboardSection;
diff --git a/client/src/pages/Home/components/TestimonialCard.tsx b/client/src/pages/Home/components/TestimonialCard.tsx
index 76e8b17..762c13e 100644
--- a/client/src/pages/Home/components/TestimonialCard.tsx
+++ b/client/src/pages/Home/components/TestimonialCard.tsx
@@ -1,20 +1,63 @@
 // TestimonialCard.tsx
 import React from "react";
 import { StarRating } from "./StarRating";
+import { motion } from "framer-motion" // You'll need to install framer-motion
+
 interface TestimonialCardProps {
-    quote: string;
-    author: string;
-  }
-  
-  export const TestimonialCard = ({ quote, author }: TestimonialCardProps) => (
-    <div
-      data-aos="fade-up"
-      data-aos-duration="1000"
-      className="bg-slate-900 p-6 rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300 hover:scale-105"
-    >
-      <StarRating />
-      <p className="text-gray-400 mb-4">{quote}</p>
-      <p className="text-gray-200 font-semibold">- {author}</p>
+  quote: string;
+  author: string;
+  role?: string;
+  avatarUrl?: string;
+}
+
+export const TestimonialCard = ({ 
+  quote, 
+  author, 
+  role = "Student", 
+  avatarUrl 
+}: TestimonialCardProps) => (
+  <motion.div
+    whileHover={{ y: -5 }}
+    initial={{ opacity: 0, y: 20 }}
+    animate={{ opacity: 1, y: 0 }}
+    transition={{ duration: 0.3 }}
+    className="bg-gradient-to-br from-slate-900 to-slate-800 p-8 rounded-2xl shadow-xl
+               border border-slate-700/50 backdrop-blur-sm
+               hover:shadow-2xl hover:border-slate-600/50 transition-all duration-300"
+  >
+    <div className="flex items-center gap-4 mb-6">
+      {avatarUrl ? (
+        <img 
+          src={avatarUrl} 
+          alt={author} 
+          className="w-12 h-12 rounded-full border-2 border-blue-500"
+        />
+      ) : (
+        <div className="w-12 h-12 rounded-full bg-blue-500 flex items-center justify-center">
+          <span className="text-xl font-bold text-white">
+            {author.charAt(0)}
+          </span>
+        </div>
+      )}
+      <div>
+        <h3 className="text-gray-100 font-semibold text-lg">{author}</h3>
+        <p className="text-blue-400 text-sm">{role}</p>
+      </div>
     </div>
-  );
-  
\ No newline at end of file
+
+    <StarRating />
+    
+    <div className="mt-6 relative">
+      <svg
+        className="absolute top-0 left-0 w-8 h-8 text-blue-500/20 transform -translate-x-6 -translate-y-6"
+        fill="currentColor"
+        viewBox="0 0 32 32"
+      >
+        <path d="M9.352 4C4.456 7.456 1 13.12 1 19.36c0 5.088 3.072 8.064 6.624 8.064 3.36 0 5.856-2.688 5.856-5.856 0-3.168-2.208-5.472-5.088-5.472-.576 0-1.344.096-1.536.192.48-3.264 3.552-7.104 6.624-9.024L9.352 4zm16.512 0c-4.8 3.456-8.256 9.12-8.256 15.36 0 5.088 3.072 8.064 6.624 8.064 3.264 0 5.856-2.688 5.856-5.856 0-3.168-2.304-5.472-5.184-5.472-.576 0-1.248.096-1.44.192.48-3.264 3.456-7.104 6.528-9.024L25.864 4z" />
+      </svg>
+      <p className="text-gray-300  leading-relaxed italic relative z-10">
+        "{quote}"
+      </p>
+    </div>
+  </motion.div>
+);
diff --git a/client/src/pages/Home/components/VideoSection.jsx b/client/src/pages/Home/components/VideoSection.jsx
index aa551de..fbe049e 100644
--- a/client/src/pages/Home/components/VideoSection.jsx
+++ b/client/src/pages/Home/components/VideoSection.jsx
@@ -17,34 +17,72 @@ limitations under the License.
 
 
 import React from "react";
+import { motion } from "framer-motion";
 import '../CSS/HomePage.css'
 
 const VideoSection = () => {
   return (
-    <section
-      id="project-video"
-      className="py-10  relative px-6  p-8 rounded-md  shadow-md bg-gradient-to-b from-indigo-950 to-blue-950  "
-    >
-      <div className="container flex gap-3  max-md:h-auto h-[70%] mx-auto w-full justify-center max-md:flex-col-reverse max-md:w-full max-md:items-center p-16 max-md:p-0 ">
-        <div className="left-portion gap-8 mt-16 max-md:mt-0 flex flex-col justify-center max-md:items-start max-md:w-[100%] w-[60%] ">
-          <h1 className="text-gray-300 text-3xl max-md:mt-8 mx-3 max-md:text-2xl font-semibold max-md:w-full ">
-            {" "}
-            Supported Live Lecture And Live Chatting Features for Students and
-            Teachers{" "}
-          </h1>
-          <p className="text-gray-200 font-light text-md max-md:text-sm max-md:w-full max-md:h-auto h-36 w-[90%] text-wrap mx-3">
-          The platform enables live lecture streaming and interactive live chatting, promoting seamless communication between students and teachers for an enhanced, engaging, and collaborative learning experience in real time.
-          </p>
-        </div>
-        <div className="right-portion h-full items-center w-1/2   max-md:w-full flex max-md:items-start max-md:h-1/2  justify-center ">
-          <video
-            className="rounded-lg mt-10 w-[95%] "
-            src="/videos/project.mp4 "
-            autoPlay
-            muted
-          ></video>
+    <section className="py-16 relative px-6 rounded-xl shadow-2xl bg-gradient-to-b from-indigo-950 via-blue-950 to-slate-900">
+      <motion.div 
+        initial={{ opacity: 0 }}
+        whileInView={{ opacity: 1 }}
+        transition={{ duration: 0.6 }}
+        className="container mx-auto flex gap-12 items-center max-w-7xl max-md:flex-col-reverse"
+      >
+        <div className="flex-1 space-y-8">
+          <motion.h1 
+            initial={{ x: -50 }}
+            whileInView={{ x: 0 }}
+            className="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-200 to-white max-md:text-3xl"
+          >
+            Interactive Live Learning Experience
+          </motion.h1>
+          
+          <motion.p 
+            initial={{ x: -50 }}
+            whileInView={{ x: 0 }}
+            transition={{ delay: 0.2 }}
+            className="text-gray-300 text-lg leading-relaxed"
+          >
+            Engage in real-time with interactive live lectures and dynamic chat features. 
+            Experience seamless communication between students and teachers in our 
+            state-of-the-art virtual classroom environment.
+          </motion.p>
+
+          <motion.div 
+            initial={{ y: 20, opacity: 0 }}
+            whileInView={{ y: 0, opacity: 1 }}
+            transition={{ delay: 0.4 }}
+            className="flex gap-4"
+          >
+            <button className="px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-md
+              transition-all duration-300 transform text-sm hover:scale-105">
+              Try Live Class
+            </button>
+            <button className="px-6 py-3 border text-sm border-blue-400 text-blue-400 
+              hover:bg-blue-400/10 rounded-lg transition-all duration-300">
+              Learn More
+            </button>
+          </motion.div>
         </div>
-      </div>
+
+        <motion.div 
+          initial={{ scale: 0.8, opacity: 0 }}
+          whileInView={{ scale: 1, opacity: 1 }}
+          className="flex-1"
+        >
+          <div className="relative">
+            <div className="absolute inset-0 bg-blue-500/20 blur-3xl rounded-full"></div>
+            <video
+              className="rounded-2xl shadow-2xl relative z-10 border border-blue-500/20"
+              src="/videos/project.mp4"
+              autoPlay
+              muted
+              loop
+            />
+          </div>
+        </motion.div>
+      </motion.div>
     </section>
   );
 };
diff --git a/client/src/shared/Footer/Footer.css b/client/src/shared/Footer/Footer.css
index c6a13fd..fa70079 100644
--- a/client/src/shared/Footer/Footer.css
+++ b/client/src/shared/Footer/Footer.css
@@ -1 +1 @@
-.gradient-bg1 { background: radial-gradient(circle, #190043 30%, #000230); }
\ No newline at end of file
+.gradient-bg1 { background: radial-gradient(circle, #190043 30%, #000230); }
diff --git a/client/src/shared/Footer/Footer.jsx b/client/src/shared/Footer/Footer.jsx
index eb10f9b..a7cd373 100644
--- a/client/src/shared/Footer/Footer.jsx
+++ b/client/src/shared/Footer/Footer.jsx
@@ -15,73 +15,147 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {Link} from 'react-router-dom'
+import { Link } from 'react-router-dom'
 import React from 'react'
-import { useLocation } from 'react-router-dom'; // Import useLocation
+import { useLocation } from 'react-router-dom';
 import './Footer.css'
-import { Mail, Phone, MapPin} from 'lucide-react';
+// Fix: Update imports from lucide-react
+import { 
+  Mail, 
+  Phone, 
+  MapPin, 
+  Facebook, 
+  Twitter, 
+  Linkedin, // Changed from LinkedIn to Linkedin
+  Instagram 
+} from 'lucide-react';
+import { motion } from 'framer-motion';
 
+const FooterLink = ({ href, children }) => (
+  <motion.li
+    whileHover={{ x: 5 }}
+    whileTap={{ scale: 0.95 }}
+  >
+    <a 
+      href={href} 
+      className="hover:text-white transition-colors duration-300 flex items-center gap-2"
+    >
+      {children}
+    </a>
+  </motion.li>
+);
 
+const SocialButton = ({ Icon, href }) => (
+  <motion.a
+    whileHover={{ y: -3 }}
+    whileTap={{ scale: 0.95 }}
+    href={href}
+    className="p-2 bg-gray-800 rounded-lg hover:bg-gray-700 transition-colors duration-300"
+  >
+    <Icon className="w-5 h-5" />
+  </motion.a>
+);
 
 const Footer = () => {
-  const location = useLocation(); // Get the current path using useLocation
-  const isContactPage = location.pathname === '/contacti'; // Check if the current path is "/contact"
+  const location = useLocation();
+  const isContactPage = location.pathname === '/contacti';
+
   return (
-    <footer className={isContactPage ? 'bg-slate-950 text-white  shadow-xl p-6 hover:shadow-md transition-shadow' :'bg-slate-950 text-gray-400 py-12'}>
-    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-      <div className="grid grid-cols-2 md:grid-cols-4 max-md:gap-24 gap-36">
-        <div>
-          <div className="text-3xl max-md:text-2xl   flex items-center gap-2 font-extrabold">
-                 <img className="rounded-md  h-10" src="/logo/E.png" alt="" />
-                   <Link className='text-white' to="/">EduMatrix</Link>
-                 </div>
-                 <ul className="space-y-2 max-md:w-56 max-md:text-sm ">
-                  <li className="flex items-center mt-4 space-x-2">
-                    <Mail className="w-4  h-4 text-gray-400" />
-                    <span className="text-gray-400 block ">support@edumatrix.com</span>
-                  </li>
-                  <li className="flex items-center space-x-2">
-                    <Phone className="w-4  h-4  text-gray-400" />
-                    <span className="text-gray-400 block w-[100%] max-md:w-24">+91639886545</span>
-                  </li>
-                  <li className="flex items-center space-x-2">
-                    <MapPin className="w-4 h-4 text-gray-400" />
-                    <span className="text-gray-400 max-md:w-[100%]">123 Education Street, Tech Valley</span>
-                  </li>
-                </ul>
-        </div>
-       
-        <div className='max-md:ml-5'>
-          <h3 className="text-white font-semibold max-md:text-sm max-md:mt-3  mb-4">Resources</h3>
-          <ul className="space-y-2 text-sm  ">
-            <li><a href="#" className="hover:text-white ">Documentation</a></li>
-            <li><a href="#" className="hover:text-white">Guides</a></li>
-            <li><a href="#" className="hover:text-white">Support</a></li>
-          </ul>
-        </div>
-        <div>
-          <h3 className="text-white font-semibold mb-4">Company</h3>
-          <ul className="space-y-2">
-            <li><a href="#" className="hover:text-white">About</a></li>
-            <li><a href="#" className="hover:text-white">Careers</a></li>
-            <li><a href="#" className="hover:text-white">Contact</a></li>
-          </ul>
+    <footer className={`relative overflow-hidden ${
+      isContactPage 
+        ? 'bg-gradient-to-b from-slate-900 to-slate-950 text-white shadow-xl' 
+        : 'bg-gradient-to-b from-slate-900 to-slate-950 text-gray-400'
+    } py-16`}>
+      {/* Background Pattern */}
+      <div className="absolute inset-0 bg-grid-white/[0.02] pointer-events-none" />
+      
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-12 md:gap-8">
+          {/* Brand Section */}
+          <div className="space-y-6">
+            <motion.div 
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              className="flex items-center gap-3"
+            >
+              <img className="h-12 w-auto rounded-lg" src="/logo/E.png" alt="EduMatrix Logo" />
+              <Link to="/" className="text-3xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 text-transparent bg-clip-text">
+                EduMatrix
+              </Link>
+            </motion.div>
+
+            <ul className="space-y-4">
+              <FooterLink href="mailto:support@edumatrix.com">
+                <Mail className="w-4 h-4" />
+                support@edumatrix.com
+              </FooterLink>
+              <FooterLink href="tel:+91639886545">
+                <Phone className="w-4 h-4" />
+                +91 63988 86545
+              </FooterLink>
+              <FooterLink href="#">
+                <MapPin className="w-4 h-4" />
+                123 Education Street, Tech Valley
+              </FooterLink>
+            </ul>
+
+            {/* Social Links */}
+            <div className="flex gap-4">
+              <SocialButton Icon={Facebook} href="#" />
+              <SocialButton Icon={Twitter} href="#" />
+              <SocialButton Icon={Linkedin} href="#" />
+              <SocialButton Icon={Instagram} href="#" />
+            </div>
+          </div>
+
+          {/* Resources Section */}
+          <div>
+            <h3 className="text-lg font-semibold text-white mb-6">Resources</h3>
+            <ul className="space-y-3">
+              <FooterLink href="#">Documentation</FooterLink>
+              <FooterLink href="#">Tutorials</FooterLink>
+              <FooterLink href="#">Support Center</FooterLink>
+              <FooterLink href="#">API Reference</FooterLink>
+            </ul>
+          </div>
+
+          {/* Company Section */}
+          <div>
+            <h3 className="text-lg font-semibold text-white mb-6">Company</h3>
+            <ul className="space-y-3">
+              <FooterLink href="#">About Us</FooterLink>
+              <FooterLink href="#">Careers</FooterLink>
+              <FooterLink href="#">News & Blog</FooterLink>
+              <FooterLink href="#">Contact Us</FooterLink>
+            </ul>
+          </div>
+
+          {/* Legal Section */}
+          <div>
+            <h3 className="text-lg font-semibold text-white mb-6">Legal</h3>
+            <ul className="space-y-3">
+              <FooterLink href="#">Privacy Policy</FooterLink>
+              <FooterLink href="#">Terms of Service</FooterLink>
+              <FooterLink href="#">Security</FooterLink>
+              <FooterLink href="#">Compliance</FooterLink>
+            </ul>
+          </div>
         </div>
-        <div className='max-md:ml-5' >
-          <h3 className="text-white font-semibold mb-4">Legal</h3>
-          <ul className="space-y-2">
-            <li><a href="#" className="hover:text-white">Privacy</a></li>
-            <li><a href="#" className="hover:text-white">Terms</a></li>
-            <li><a href="#" className="hover:text-white">Security</a></li>
-          </ul>
+
+        {/* Copyright Section */}
+        <div className="mt-16 pt-8 border-t border-gray-800">
+          <div className="text-center text-sm">
+            <p className="text-gray-400">
+              &copy; {new Date().getFullYear()} EduMatrix. All rights reserved.
+            </p>
+            <p className="mt-2 text-gray-500">
+              Empowering Education Through Technology
+            </p>
+          </div>
         </div>
       </div>
-      <div className="border-t border-gray-800 mt-12 pt-8 text-center">
-        <p>&copy; 2024 EduMatrix. All rights reserved.</p>
-      </div>
-    </div>
-  </footer>
-  )
-}
+    </footer>
+  );
+};
 
-export default Footer
+export default Footer;
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..88e2a54
--- /dev/null
+++ b/package.json
@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "motion": "^12.0.6"
+  }
+}
diff --git a/server/controllers/annoncementController.js b/server/controllers/annoncementController.js
index 60b6d58..65589ac 100644
--- a/server/controllers/annoncementController.js
+++ b/server/controllers/annoncementController.js
@@ -21,42 +21,67 @@ const announcement = async (req, res) => {
     const { category, course, branch, description } = req.body;
 
     try {
-        const postAnnouncement = await Announcement.create({
+        // Input validation
+        if (!category || !course || !branch || !description) {
+            return res.status(400).json({
+                success: false,
+                message: "All fields are required",
+                details: {
+                    category: !category ? "Category is required" : null,
+                    course: !course ? "Course is required" : null,
+                    branch: !branch ? "Branch is required" : null,
+                    description: !description ? "Description is required" : null
+                }
+            });
+        }
 
+        const postAnnouncement = await Announcement.create({
             category,
             course,
             branch,
-            description
+            description,
+            createdAt: new Date(),
+            lastModified: new Date()
         });
 
         return res.status(201).json({
             success: true,
-            postAnnouncement,
-            message: "Announcement Successfully posted"
+            data: postAnnouncement,
+            message: "Announcement successfully posted",
+            timestamp: new Date()
         });
     } catch (error) {
+        console.error('Announcement creation error:', error);
         return res.status(500).json({
             success: false,
-            message: "Error Posting the Announcement"
+            message: "Error posting the announcement",
+            error: process.env.NODE_ENV === 'development' ? error.message : undefined
         });
     }
 };
 
 const displayAnnouncement = async (req, res) => { 
     try {
-        const getAnnouncement = await Announcement.find(); 
+        const getAnnouncement = await Announcement.find()
+            .sort({ createdAt: -1 })
+            .select('-__v')
+            .lean();
 
         return res.status(200).json({
             success: true,
-            getAnnouncement,
-            message: "Announcement Successfully displayed"
+            count: getAnnouncement.length,
+            data: getAnnouncement,
+            message: "Announcements successfully retrieved",
+            timestamp: new Date()
         });
     } catch (error) {
+        console.error('Announcement retrieval error:', error);
         return res.status(500).json({
             success: false,
-            message: "Some error occurred"
+            message: "Error retrieving announcements",
+            error: process.env.NODE_ENV === 'development' ? error.message : undefined
         });
     }
 };
 
-module.exports = { announcement, displayAnnouncement }; 
+module.exports = { announcement, displayAnnouncement };