diff --git a/src/components/Navbar/index.jsx b/src/components/Navbar/index.jsx
index a1a64b0..8b3a025 100644
--- a/src/components/Navbar/index.jsx
+++ b/src/components/Navbar/index.jsx
@@ -40,7 +40,7 @@ const solutions = [
 const Header = () => {
 	return (
 		<Popover className="relative bg-white">
-			<div className="max-w-7xl mx-auto px-4 sm:px-6">
+			<div className="max-w-7xl mx-auto px-4 sm:px-6 w-full">
 				<div className="flex justify-between items-center border-0 py-3 md:justify-start md:space-x-10">
 					<div className="flex justify-start lg:w-0 lg:flex-1">
 						<div className="text-xl font-medium text-black hover:text-gray-900 list-none">
@@ -53,11 +53,14 @@ const Header = () => {
 							<MenuIcon className="h-6 w-6" aria-hidden="true" />
 						</Popover.Button>
 					</div>
-					<Popover.Group as="nav" className="hidden md:flex space-x-7">
-						<li className="text-base font-medium text-black hover:text-gray-900 mt-1 list-none cursor-pointer">
+					<Popover.Group
+						as="nav"
+						className="hidden md:flex md:flex-row md:justify-end md:items-center space-x-7 md:space-x-3 "
+					>
+						<li className="lg:text-lg md:text-sm text-base font-medium text-black hover:text-gray-900 mt-1 list-none cursor-pointer">
 							Home
 						</li>
-						<li className="text-base font-normal text-gray-500 hover:text-gray-900 mt-1 list-none cursor-pointer">
+						<li className="lg:text-lg md:text-sm text-base md:ml-3 font-normal text-gray-500 hover:text-gray-900 mt-1 list-none cursor-pointer">
 							<Link
 								to="eligibility"
 								spy={true}
@@ -69,7 +72,7 @@ const Header = () => {
 								Eligibility
 							</Link>
 						</li>
-						<li className="text-base font-normal text-gray-500 hover:text-gray-900 mt-1 list-none cursor-pointer">
+						<li className="lg:text-lg md:text-sm text-base md:ml-3 font-normal text-gray-500 hover:text-gray-900 mt-1 list-none cursor-pointer">
 							<Link
 								to="timeline"
 								spy={true}
@@ -81,7 +84,7 @@ const Header = () => {
 								Timeline
 							</Link>
 						</li>
-						<li className="text-base font-normal text-gray-500 hover:text-gray-900 mt-1 list-none cursor-pointer">
+						<li className="lg:text-lg md:text-sm text-base md:ml-3 font-normal text-gray-500 hover:text-gray-900 mt-1 list-none cursor-pointer">
 							<Link
 								to="teams"
 								spy={true}
@@ -93,7 +96,7 @@ const Header = () => {
 								Teams
 							</Link>
 						</li>
-						<li className="text-base font-normal text-gray-500 hover:text-gray-900 mt-1 list-none cursor-pointer">
+						<li className="lg:text-lg md:text-sm text-base md:ml-3 font-normal text-gray-500 hover:text-gray-900 mt-1 list-none cursor-pointer">
 							<Link
 								to="gallery"
 								spy={true}
@@ -105,7 +108,7 @@ const Header = () => {
 								Gallery
 							</Link>
 						</li>
-						<li className="text-base font-normal text-gray-500 hover:text-gray-900 mt-1 list-none cursor-pointer">
+						<li className="lg:text-lg md:text-sm text-base md:ml-3 font-normal text-gray-500 hover:text-gray-900 mt-1 list-none cursor-pointer">
 							<a
 								href="https://bit.ly/minihack22Guideline"
 								target="_blank"
@@ -114,7 +117,7 @@ const Header = () => {
 								Rules
 							</a>
 						</li>
-						<li className="text-base font-normal text-gray-500 hover:text-gray-900 mt-1 list-none cursor-pointer">
+						<li className="lg:text-lg md:text-sm text-base md:ml-3 font-normal text-gray-500 hover:text-gray-900 mt-1 list-none cursor-pointer">
 							<a
 								href="https://www.facebook.com/msclubsliit"
 								target="_blank"
@@ -123,7 +126,7 @@ const Header = () => {
 								Contact
 							</a>
 						</li>
-						<li className="ml-8 cursor-pointer inline-flex items-center justify-center px-4 py-1 border-0 rounded font-normal text-white hover:text-black bg-black hover:bg-gray-200 transition duration-0 hover:duration-500">
+						<li className="lg:text-lg md:text-sm ml-8 md:ml-3 cursor-pointer inline-flex items-center justify-center px-4 md:px-2 md:w-fit py-1 border-0 rounded font-normal text-white hover:text-black bg-black hover:bg-gray-200 transition duration-0 hover:duration-500">
 							<a
 								href="https://teams.microsoft.com/l/team/19%3asKeZlvZa7jFdXBP_ZmYQnyc-w70KXbrRugHyDumm2To1%40thread.tacv2/conversations?groupId=b6390614-7075-4334-afe7-ef873eeb4550&tenantId=44e3cf94-19c9-4e32-96c3-14f5bf01391a"
 								target="_blank"
diff --git a/src/components/TeamCard/index.jsx b/src/components/TeamCard/index.jsx
index 22f2c2b..6e4c19e 100644
--- a/src/components/TeamCard/index.jsx
+++ b/src/components/TeamCard/index.jsx
@@ -4,6 +4,39 @@ import { PortalWithState } from 'react-portal';
 
 const TeamCard = (props) => {
 	return (
+		<div className="md:w-1/3 md:ml-5 lg:w-96 p-4 bg-white border-inherit h-52 border rounded-lg mb-5">
+			<div className="grid md:flex md:flex-row md:justify-between grid-rows-1 grid-cols-11 items-center p-4 md:p-0 pt-2">
+				<div className="col-start-1 col-span-1">
+					<img
+						src={props.teamImage}
+						className="max-w-sm md:h-[2.5rem] rounded-full h-10"
+						alt="Team Cats"
+					/>
+				</div>
+				<div className="col-start-3 col-span-6">
+					<p className="font-bold md:text-xs">{props.team_name}</p>
+				</div>
+				<div className="col-start-7 col-span-2">
+					<button className="w-24 md:w-20 whitespace-nowrap rounded-full md:text-xs border-2 px-3 py-1 text-base md:text-gray-800">
+						{props.round + "st Round"}
+					</button>
+				</div>
+			</div>
+			<div className="p-4 pt-0 pl-2 md:pl-0">
+				<p className="text-gray-900 text-base font-medium mb-1">
+					{props.member01}
+				</p>
+				<p className="text-gray-900 text-base font-medium mb-1">
+					{props.member02}
+				</p>
+				<p className="text-gray-900 text-base font-medium mb-1">
+					{props.member03}
+				</p>
+				<p className="text-gray-900 text-base font-medium mb-1">
+					{props.member04}
+				</p>
+			</div>
+		</div>
 		<PortalWithState closeOnOutsideClick closeOnEsc node={document.getElementById('portal-root')}>
 			{({ openPortal, closePortal, portal }) => (
 				<>
diff --git a/src/views/Header/index.jsx b/src/views/Header/index.jsx
index 49eb184..2b7574c 100644
--- a/src/views/Header/index.jsx
+++ b/src/views/Header/index.jsx
@@ -12,7 +12,7 @@ const Countdown = () => {
 
 	return (
 		<div className="flex justify-center flex-col md:flex-row px-3.5 mt-10">
-			<div className="flex justify-center items-center md:p-10">
+			<div className="flex justify-center items-center md:p-10 md:w-1/2 logoDiv">
 				<img
 					src={Logo}
 					alt="Mini Hackathon Logo"
diff --git a/src/views/TeamView/index.jsx b/src/views/TeamView/index.jsx
index fc167ef..3856628 100644
--- a/src/views/TeamView/index.jsx
+++ b/src/views/TeamView/index.jsx
@@ -78,6 +78,7 @@ const TeamView = () => {
 						Search
 					</button>
 				</div>
+				<div className="flex flex-wrap justify-between md:justify-center sm:justify-center px-4 md:px-20">
 				<div className="flex flex-wrap px-4 justify-center md:px-20">
 					{currentTeamCards.map((singleTeamCardDetails) => (
 						<div key={singleTeamCardDetails.team_id} className="p-3">
diff --git a/yarn.lock b/yarn.lock
index 2f68dd6..d0e62c1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7930,7 +7930,8 @@
     "kleur" "^3.0.3"
     "sisteransi" "^1.0.5"
 
-"prop-types@^15.5.8", "prop-types@^15.7.2", "prop-types@^15.8.1":
+  "prop-types@^15.7.2", "prop-types@^15.8.1":
+
   "integrity" "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg=="
   "resolved" "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz"
   "version" "15.8.1"
@@ -8079,7 +8080,8 @@
     "strip-ansi" "^6.0.1"
     "text-table" "^0.2.0"
 
-"react-dom@^15.5.4 || ^16.0.0 || ^17.0.0 || ^18.0.0", "react-dom@^16 || ^17 || ^18", "react-dom@^16.0.0 || ^17.0.0 || ^18.0.0", "react-dom@^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0", "react-dom@^18.0.0", "react-dom@^18.1.0", "react-dom@>= 16.8.0", "react-dom@>=16.8":
+  "react-dom@^15.5.4 || ^16.0.0 || ^17.0.0 || ^18.0.0", "react-dom@^16 || ^17 || ^18", "react-dom@^16.0.0 || ^17.0.0 || ^18.0.0", "react-dom@^18.0.0", "react-dom@^18.1.0", "react-dom@>= 16.8.0", "react-dom@>=16.8":
+
   "integrity" "sha512-fU1Txz7Budmvamp7bshe4Zi32d0ll7ect+ccxNu9FlObT605GOEB8BfO4tmRJ39R5Zj831VCpvQ05QPBW5yb+w=="
   "resolved" "https://registry.npmjs.org/react-dom/-/react-dom-18.1.0.tgz"
   "version" "18.1.0"
@@ -8143,7 +8145,7 @@
   "version" "4.2.2"
   dependencies:
     "prop-types" "^15.5.8"
-
+    
 "react-qr-code@^2.0.7":
   "integrity" "sha512-NpknL80p7dWbLdHfBSIxQIqLCu3+kBlyzYD692rO0UnVwfCSziIxc1xn/p3JhPEv1RV1lRD8j0w+hR3L7tawTQ=="
   "resolved" "https://registry.npmjs.org/react-qr-code/-/react-qr-code-2.0.7.tgz"
@@ -8257,7 +8259,8 @@
     "prop-types" "^15.7.2"
     "react-intersection-observer" "^8.26.2"
 
-"react@*", "react@^15.0.0 || ^16.0.0 || ^17.0.0|| ^18.0.0", "react@^15.5.4 || ^16.0.0 || ^17.0.0 || ^18.0.0", "react@^16 || ^17 || ^18", "react@^16.0.0 || ^17.0.0 || ^18.0.0", "react@^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0", "react@^16.8.0 || ^17 || ^18", "react@^16.x || ^17.x || ^18.x", "react@^18.0.0", "react@^18.1.0", "react@>= 16", "react@>= 16.8.0", "react@>=16.8", "react@18.1.0":
+  "react@*", "react@^15.0.0 || ^16.0.0 || ^17.0.0|| ^18.0.0", "react@^15.5.4 || ^16.0.0 || ^17.0.0 || ^18.0.0", "react@^16 || ^17 || ^18", "react@^16.0.0 || ^17.0.0 || ^18.0.0", "react@^16.3.0 || ^17", "react@^16.8.0 || ^17 || ^18", "react@^16.x || ^17.x || ^18.x", "react@^18.0.0", "react@^18.1.0", "react@>= 16", "react@>= 16.8.0", "react@>=16.8":
+
   "integrity" "sha512-4oL8ivCz5ZEPyclFQXaNksK3adutVS8l2xzZU0cqEFrE9Sb7fC0EFK5uEk74wIreL1DERyjvsU915j1pcT2uEQ=="
   "resolved" "https://registry.npmjs.org/react/-/react-18.1.0.tgz"
   "version" "18.1.0"