diff --git a/package-lock.json b/package-lock.json
index 3bdff6f..96e0d2b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
       "dependencies": {
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-fast-marquee": "^1.6.2",
         "react-icons": "^4.11.0",
         "web-vitals": "^2.1.4"
       },
@@ -1882,6 +1883,15 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-fast-marquee": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/react-fast-marquee/-/react-fast-marquee-1.6.2.tgz",
+      "integrity": "sha512-bXUuW1r+Yzd8ZjsPmMDy8WJMubHAZd/7n0W/IzUQHtd0iBfxWohP6hzCFnEHWMCOtC9wxSAq/BiEnig4kdI2Vw==",
+      "peerDependencies": {
+        "react": ">= 16.8.0 || 18.0.0",
+        "react-dom": ">= 16.8.0 || 18.0.0"
+      }
+    },
     "node_modules/react-icons": {
       "version": "4.11.0",
       "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.11.0.tgz",
diff --git a/package.json b/package.json
index 1767f57..2c1e935 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
   "dependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-fast-marquee": "^1.6.2",
     "react-icons": "^4.11.0",
     "web-vitals": "^2.1.4"
   },
diff --git a/src/App.jsx b/src/App.jsx
index 064be53..1f20926 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,5 +1,12 @@
+<<<<<<< HEAD
 import { Navbar, Team, ContactUs, Footer } from "./components";
 
+=======
+import Navbar from "./components/NavBar/NavBar";
+import Footer from "./components/footer/Footer";
+import Team from "./components/team/Team";
+import ContactUs from "./components/contact/ContactUs";
+>>>>>>> team/initial-design
 function App() {
   return (
     <div>
diff --git a/src/assets/ourTeam.png b/src/assets/ourTeam.png
new file mode 100644
index 0000000..13d0bc8
Binary files /dev/null and b/src/assets/ourTeam.png differ
diff --git a/src/components/NavBar.jsx b/src/components/NavBar.jsx
index 22805e4..6fc8b2d 100644
--- a/src/components/NavBar.jsx
+++ b/src/components/NavBar.jsx
@@ -1,22 +1,38 @@
+<<<<<<< HEAD:src/components/NavBar.jsx
 import React from 'react'
 import Logo from '../assets/gdsc-logo.png'
+=======
+import React from "react";
+import Logo from "../../assets/gdsc-logo.png";
+>>>>>>> team/initial-design:src/components/NavBar/NavBar.jsx
 const Navbar = () => {
   return (
-    <div className='w-[100%]  flex justify-center items-center py-6 relative'>
-        <div className='flex justify-center items-center absolute left-[5vw] gap-1'>
-            <img src={Logo} alt="image" className='h-[3.5rem]'/>
-            <h1 className='font-bold text-lg text-[#767676]'>GDSC AEC</h1>
-        </div>
-      <div style={{boxShadow:' 0 0 10px rgba(0, 0, 0, 0.2)'}}    className='  px-[5em] rounded-full '>
-        <ul className=' flex justify-center items-center  gap-12 drop-shadow-2xl text-sm h-[6.4vh] text-[#535353] transition-all delay-300'>
-            <li className='hover:border-b-2 hover:border-b-blue-400 hover:cursor-pointer hover:text-blue-500'>About us</li>
-            <li className='hover:border-b-2 hover:border-b-blue-400 hover:cursor-pointer hover:text-blue-500'>Event</li>
-            <li className='hover:border-b-2 hover:border-b-blue-400 hover:cursor-pointer hover:text-blue-500'>Our Team</li>
-            <li className='hover:border-b-2 hover:border-b-blue-400 hover:cursor-pointer hover:text-blue-500'>Contact</li>
+    <div className="w-[100%]  flex justify-center items-center py-6 relative">
+      <div className="flex justify-center items-center absolute left-[5vw] gap-1">
+        <img src={Logo} alt="image" className="h-[3.5rem]" />
+        <h1 className="font-bold text-lg text-[#767676]">GDSC AEC</h1>
+      </div>
+      <div
+        style={{ boxShadow: " 0 0 10px rgba(0, 0, 0, 0.2)" }}
+        className="  px-[5em] rounded-full "
+      >
+        <ul className=" flex justify-center items-center  gap-12 drop-shadow-2xl text-sm h-[6.4vh] text-[#535353] transition-all delay-300">
+          <li className="hover:border-b-2 hover:border-b-blue-400 hover:cursor-pointer hover:text-blue-500">
+            About us
+          </li>
+          <li className="hover:border-b-2 hover:border-b-blue-400 hover:cursor-pointer hover:text-blue-500">
+            Event
+          </li>
+          <li className="hover:border-b-2 hover:border-b-blue-400 hover:cursor-pointer hover:text-blue-500">
+            Our Team
+          </li>
+          <li className="hover:border-b-2 hover:border-b-blue-400 hover:cursor-pointer hover:text-blue-500">
+            Contact
+          </li>
         </ul>
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default Navbar
+export default Navbar;
diff --git a/src/components/contact/ContactUs.jsx b/src/components/contact/ContactUs.jsx
index 2168138..6d7e8c8 100644
--- a/src/components/contact/ContactUs.jsx
+++ b/src/components/contact/ContactUs.jsx
@@ -1,37 +1,35 @@
 import contactus from "../../assets/contactus.png";
 export default function ContactUs() {
   return (
-    <div>
-      <div className="flex flex-col p-10 justify-evenly md:flex-row">
-        <img src={contactus} className="max-w-full" alt="Contact Us" />
+    <div className="flex flex-col p-10 pt-[10rem] pb-[10rem] justify-evenly md:flex-row">
+      <img src={contactus} className="max-w-full" alt="Contact Us" />
 
-        <div className="md:pl-10">
-          <h1 className="text-black text-[4.875rem] font-semibold">
-            Get in Touch
-          </h1>
-          <h2 className="text-[#686868] text-[1.4375rem] font-semibold leading-normal font-inter">
-            If you have any questions or inquiries, feel free to ask us.
-          </h2>
-          <form className="flex flex-col">
-            <input
-              className="p-2 m-2 border-2 border-black rounded-lg md:w-1/3 lg:w-full"
-              type="text"
-              name="firstname"
-              placeholder="Your name.."
-            />
-            <input
-              className="p-2 m-2 border-2 border-black rounded-lg md:w-1/3 lg:w-full"
-              type="text"
-              name="email"
-              placeholder="Email"
-            />
-            <textarea
-              className="h-40 p-2 m-2 border-2 border-black rounded-lg md:w-1/3 lg:w-full"
-              name="Message"
-              placeholder="Message"
-            ></textarea>
-          </form>
-        </div>
+      <div className="md:pl-10">
+        <h1 className="text-black text-[4.875rem] font-semibold">
+          Get in Touch
+        </h1>
+        <h2 className="text-[#686868] text-[1.4375rem] font-semibold leading-normal font-inter">
+          If you have any questions or inquiries, feel free to ask us.
+        </h2>
+        <form className="flex flex-col">
+          <input
+            className="p-2 m-2 border-2 border-black rounded-lg md:w-1/3 lg:w-full"
+            type="text"
+            name="firstname"
+            placeholder="Your name.."
+          />
+          <input
+            className="p-2 m-2 border-2 border-black rounded-lg md:w-1/3 lg:w-full"
+            type="text"
+            name="email"
+            placeholder="Email"
+          />
+          <textarea
+            className="h-40 p-2 m-2 border-2 border-black rounded-lg md:w-1/3 lg:w-full"
+            name="Message"
+            placeholder="Message"
+          ></textarea>
+        </form>
       </div>
     </div>
   );
diff --git a/src/components/team/Card.jsx b/src/components/team/Card.jsx
index c87239c..0525635 100644
--- a/src/components/team/Card.jsx
+++ b/src/components/team/Card.jsx
@@ -1,24 +1,39 @@
-export default function Card({ name, image, role, linkedin, github, twitter }) {
-  console.log(role.name);
+import { FaLinkedin, FaGithub, FaTwitter } from "react-icons/fa";
+export default function Card({
+  name,
+  image,
+  role,
+  linkedin,
+  github,
+  twitter,
+  colour,
+}) {
+  console.log(colour);
+  const className = `flex flex-col m-6 justify-center gap-2 items-center shadow-[0px_0px_15px_2px_rgba(0,0,0,0.17)] border-b-8 border-b-[${colour}] border-solid
+  w-[18rem] h-[22rem] shrink-0`;
+
   return (
-    <div className="flex flex-col justify-center  w-[18.875rem] h-[24.4375rem] shrink-0">
-      <div className="">{role}</div>
+    <div className={className}>
       <img
-        className="text-[#1C1C1C] text-[1.625rem] not-italic font-medium leading-[normal]"
+        className="text-[#1C1C1C] rounded-[31.25rem] w-[11.25rem] h-[11.25rem]"
         src={image}
         alt="Meh"
       />
-      <h1>{name}</h1>
-      <h2>{role}</h2>
-      <div className="flex flex-row justify-center">
+      <h1 className="text-[#1C1C1C] text-[1.625rem] not-italic font-medium leading-[normal]">
+        {name}
+      </h1>
+      <h2 className="text-neutral-500 text-[1.375rem] not-italic font-medium leading-[normal]">
+        {role}
+      </h2>
+      <div className="flex flex-row gap-[2rem] justify-center">
         <a href={linkedin}>
-          <img src="" />
+          <FaLinkedin size="2rem" />
         </a>
         <a href={github}>
-          <img src="" />
+          <FaGithub size="2rem" />
         </a>
         <a href={twitter}>
-          <img src="" />
+          <FaTwitter size="2rem" />
         </a>
       </div>
     </div>
diff --git a/src/components/team/Team.jsx b/src/components/team/Team.jsx
index a9413c5..5aef83e 100644
--- a/src/components/team/Team.jsx
+++ b/src/components/team/Team.jsx
@@ -1,17 +1,29 @@
 import * as data from "../../data/data2023.json";
+import Marquee from "../marqueeCards/Marquee";
 import Card from "./Card";
+import ourTeam from "../../assets/ourTeam.png";
 export default function Team() {
   console.log(data.teamMembers[0]);
+  const colourChoices = ["#EA4335", "#34A853", "#4285F4", "#FBBC05"];
   return (
-    <div className="flex 6flex-row justify-evenly">
-      <Card
-        name={data.teamMembers[0].name}
-        role={data.teamMembers[0].role}
-        linkedin={data.teamMembers[0].linkedinUrl}
-        github={data.teamMembers[0].githubUrl}
-        twitter={data.teamMembers[0].twitterUrl}
-        image={data.teamMembers[0].image}
-      />
+    <div
+      style={{ display: "flex", alignItems: "center", flexDirection: "column" }}
+    >
+      <img src={ourTeam} alt="Our Team" />
+      <Marquee direction="left">
+        {data.teamMembers.map((members, index) => (
+          <Card
+            name={members.name}
+            role={members.role}
+            linkedin={members.linkedinUrl}
+            github={members.githubUrl}
+            twitter={members.twitterUrl}
+            image={members.image}
+            key={index}
+            colour={colourChoices[index % 4]}
+          />
+        ))}
+      </Marquee>
     </div>
   );
 }