diff --git a/Frontend/src/components/Footer.jsx b/Frontend/src/components/Footer.jsx
index 77811da..a20d327 100644
--- a/Frontend/src/components/Footer.jsx
+++ b/Frontend/src/components/Footer.jsx
@@ -35,6 +35,7 @@ const Footer = () => {
                 <motion.a
                   key={index}
                   href={link.href}
+                  target="_blank" 
                   className="text-light hover:text-accent transition-colors duration-300"
                   whileHover={{ scale: 1.2 }}
                   whileTap={{ scale: 0.9 }}
diff --git a/Frontend/src/pages/AboutUs.jsx b/Frontend/src/pages/AboutUs.jsx
index 2180006..2201396 100644
--- a/Frontend/src/pages/AboutUs.jsx
+++ b/Frontend/src/pages/AboutUs.jsx
@@ -1,18 +1,94 @@
 import React from 'react';
+import { FaHeartbeat, FaCogs, FaUsers } from 'react-icons/fa';
+import { motion } from 'framer-motion'; // Import motion for animation
 
 const AboutUs = () => {
+  const features = [
+    {
+      icon: FaHeartbeat,
+      title: 'Our Mission',
+      description: 'To deliver healthcare solutions that ensure better patient care through efficiency and technological advancement.',
+    },
+    {
+      icon: FaCogs,
+      title: 'Our Vision',
+      description: 'We aim to revolutionize healthcare management by developing tools that healthcare professionals can rely on.',
+    },
+    {
+      icon: FaUsers,
+      title: 'Our Values',
+      description: 'We are dedicated to providing innovative, reliable, and user-friendly solutions for healthcare providers worldwide.',
+    },
+  ];
+
   return (
-    <div className="container mx-auto px-4 py-8">
-      <h1 className="text-3xl font-bold mb-4">About Us</h1>
-      <p className="mb-4">
-        Hospital Management System (HMS) is a cutting-edge solution designed to streamline healthcare operations and improve patient care.
-      </p>
-      <p className="mb-4">
-        Our mission is to revolutionize healthcare management by providing innovative technology solutions that enhance efficiency, reduce errors, and ultimately improve patient outcomes.
-      </p>
-      <p>
-        With a team of experienced healthcare professionals and software engineers, we are committed to developing and maintaining a system that meets the evolving needs of modern healthcare facilities.
-      </p>
+    <div className="container mx-auto px-4 py-12">
+      {/* Hero Section */}
+      <div className="bg-light p-8 rounded-lg mb-12 text-center">
+        <h1 className="text-4xl font-bold text-primary mb-4">About Us</h1>
+        <p className="text-lg text-secondary mb-4">
+          Hospital Management System (HMS) is a cutting-edge solution designed to streamline healthcare operations and improve patient care.
+        </p>
+        <p className="text-lg text-secondary">
+          Our mission is to revolutionize healthcare management through innovative technology solutions that enhance efficiency, reduce errors, and improve patient outcomes.
+        </p>
+      </div>
+
+      {/* Mission, Vision, Values Section */}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
+        {features.map((feature, index) => (
+          <motion.div
+            key={index}
+            className="bg-white p-6 rounded-3xl shadow-lg text-center"
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5, delay: index * 0.1 }}
+            whileHover={{ y: -10 }}  // Hover effect
+          >
+            <feature.icon className="text-4xl sm:text-5xl text-accent mb-4 mx-auto" />
+            <h3 className="text-lg sm:text-xl font-semibold mb-2 text-primary">
+              {feature.title}
+            </h3>
+            <p className="text-gray-600 text-sm sm:text-base">
+              {feature.description}
+            </p>
+          </motion.div>
+        ))}
+      </div>
+
+      {/* Team Section */}
+      <div className="bg-light p-8 rounded-lg">
+        <h2 className="text-3xl font-bold text-center text-primary mb-8">Meet Our Team</h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <motion.div
+            className="team-member bg-white p-6 shadow-md rounded-lg text-center border border-accent"
+            whileHover={{ scale: 1.05 }}  // Hover effect on team member cards
+            transition={{ duration: 0.3 }}
+          >
+            <img
+              src="https://via.placeholder.com/150"
+              alt="Team Member"
+              className="w-24 h-24 rounded-full mx-auto mb-4"
+            />
+            <h3 className="text-xl font-semibold mb-2 text-primary">Dr. John Doe</h3>
+            <p className="text-secondary">Chief Medical Officer</p>
+          </motion.div>
+          <motion.div
+            className="team-member bg-white p-6 shadow-md rounded-lg text-center border border-accent"
+            whileHover={{ scale: 1.05 }}  // Hover effect on team member cards
+            transition={{ duration: 0.3 }}
+          >
+            <img
+              src="https://via.placeholder.com/150"
+              alt="Team Member"
+              className="w-24 h-24 rounded-full mx-auto mb-4"
+            />
+            <h3 className="text-xl font-semibold mb-2 text-primary">Jane Smith</h3>
+            <p className="text-secondary">Lead Software Engineer</p>
+          </motion.div>
+          {/* Add more team members as needed */}
+        </div>
+      </div>
     </div>
   );
 };
diff --git a/Frontend/src/pages/ContactUs.jsx b/Frontend/src/pages/ContactUs.jsx
index 4f49222..d37c858 100644
--- a/Frontend/src/pages/ContactUs.jsx
+++ b/Frontend/src/pages/ContactUs.jsx
@@ -1,21 +1,93 @@
-import React from 'react';
+import React, { useState } from 'react';
 
 const ContactUs = () => {
+  const [formData, setFormData] = useState({
+    name: '',
+    email: '',
+    message: '',
+  });
+
+  const handleChange = (e) => {
+    setFormData({
+      ...formData,
+      [e.target.name]: e.target.value,
+    });
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle form submission logic here, like sending data to an API
+    console.log(formData);
+    alert('Thank you for reaching out! We will get back to you soon.');
+  };
+
   return (
     <div className="container mx-auto px-4 py-8">
-      <h1 className="text-3xl font-bold mb-4">Contact Us</h1>
-      <p className="mb-4">We'd love to hear from you. Please feel free to reach out with any questions or concerns.</p>
-      <div className="mb-4">
-        <h2 className="text-xl font-semibold mb-2">Email</h2>
-        <p>support@hms.com</p>
-      </div>
-      <div className="mb-4">
-        <h2 className="text-xl font-semibold mb-2">Phone</h2>
-        <p>+1 (555) 123-4567</p>
+      <h1 className="text-3xl font-bold mb-6">Contact Us</h1>
+
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+        {/* Contact Information Cards */}
+        <div className="card bg-white p-6 shadow-md rounded-lg">
+          <h2 className="text-xl font-semibold mb-2">Email</h2>
+          <p className="text-gray-700">support@hms.com</p>
+        </div>
+        <div className="card bg-white p-6 shadow-md rounded-lg">
+          <h2 className="text-xl font-semibold mb-2">Phone</h2>
+          <p className="text-gray-700">+1 (555) 123-4567</p>
+        </div>
+        <div className="card bg-white p-6 shadow-md rounded-lg">
+          <h2 className="text-xl font-semibold mb-2">Address</h2>
+          <p className="text-gray-700">123 Healthcare Street, Medical City, HC 12345</p>
+        </div>
       </div>
-      <div>
-        <h2 className="text-xl font-semibold mb-2">Address</h2>
-        <p>123 Healthcare Street, Medical City, HC 12345</p>
+
+      {/* Contact Form */}
+      <div className="bg-white p-8 shadow-md rounded-lg">
+        <h2 className="text-2xl font-semibold mb-4">Get in Touch</h2>
+        <form onSubmit={handleSubmit} className="space-y-6">
+          <div>
+            <label htmlFor="name" className="block text-lg font-medium mb-1">Name</label>
+            <input
+              type="text"
+              id="name"
+              name="name"
+              value={formData.name}
+              onChange={handleChange}
+              className="w-full px-4 py-2 border rounded-md focus:outline-none focus:ring focus:ring-blue-500"
+              required
+            />
+          </div>
+          <div>
+            <label htmlFor="email" className="block text-lg font-medium mb-1">Email</label>
+            <input
+              type="email"
+              id="email"
+              name="email"
+              value={formData.email}
+              onChange={handleChange}
+              className="w-full px-4 py-2 border rounded-md focus:outline-none focus:ring focus:ring-blue-500"
+              required
+            />
+          </div>
+          <div>
+            <label htmlFor="message" className="block text-lg font-medium mb-1">Message</label>
+            <textarea
+              id="message"
+              name="message"
+              value={formData.message}
+              onChange={handleChange}
+              className="w-full px-4 py-2 border rounded-md focus:outline-none focus:ring focus:ring-blue-500"
+              rows="4"
+              required
+            ></textarea>
+          </div>
+          <button
+            type="submit"
+            className="w-full py-2 px-4 bg-blue-500 text-white font-semibold rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50"
+          >
+            Send Message
+          </button>
+        </form>
       </div>
     </div>
   );
diff --git a/package-lock.json b/package-lock.json
index d309abe..a594b70 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2,5 +2,75 @@
   "name": "Hospital-Management",
   "lockfileVersion": 3,
   "requires": true,
-  "packages": {}
+  "packages": {
+    "": {
+      "dependencies": {
+        "herotofu-react": "^1.0.6"
+      }
+    },
+    "node_modules/herotofu-react": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/herotofu-react/-/herotofu-react-1.0.6.tgz",
+      "integrity": "sha512-q1vNErrQVVoGxi5erpc5IMJ+QtIqiSDL2KF1G45uf69bsmxSKXyIKUFf/vVq9NaYAww4rNIL0TWfupSvb+MOEQ==",
+      "engines": {
+        "node": ">=16.20.2"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18 || ^19",
+        "react-dom": "^16.8.0 || ^17 || ^18 || ^19"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "peer": true
+    },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "peer": true,
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
+    "node_modules/react": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+      "peer": true,
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
+      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+      "peer": true,
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.23.2"
+      },
+      "peerDependencies": {
+        "react": "^18.3.1"
+      }
+    },
+    "node_modules/scheduler": {
+      "version": "0.23.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
+      "peer": true,
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      }
+    }
+  }
 }
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..9a11c4f
--- /dev/null
+++ b/package.json
@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "herotofu-react": "^1.0.6"
+  }
+}