diff --git a/components/Dashboard/Announcements.tsx b/components/Dashboard/Announcements.tsx
new file mode 100644
index 0000000..f2d9961
--- /dev/null
+++ b/components/Dashboard/Announcements.tsx
@@ -0,0 +1,3 @@
+export default function Announcements() {
+  return <span> this is the announcements</span>;
+}
diff --git a/components/Dashboard/Header.tsx b/components/Dashboard/Header.tsx
new file mode 100644
index 0000000..deb76bb
--- /dev/null
+++ b/components/Dashboard/Header.tsx
@@ -0,0 +1,110 @@
+import { useAuth } from "../../contexts/authContext";
+import Image from "next/image";
+import {
+  FaMicrophoneAlt,
+  FaHeadphonesAlt,
+  FaTh,
+  FaBell,
+  FaSearch,
+  FaBuilding,
+  FaCalendarDay,
+  FaClock,
+} from "react-icons/fa";
+import { useTeamDashboardContext } from "../../contexts/teamDashboardContext";
+import router from "next/router";
+import Moment from "react-moment";
+
+export default function Header() {
+  const { logOut } = useAuth();
+  const { team } = useTeamDashboardContext();
+
+  async function handleSignOut() {
+    console.log("clicked log out button");
+
+    try {
+      await logOut();
+
+      router.push("/teams");
+    } catch (error) {
+      console.log(error);
+    }
+  }
+
+  var today = new Date();
+
+  return (
+    <section className="flex-1 flex flex-row items-center justify-between py-5">
+      {/* welcome message */}
+      <span className="flex flex-col items-baseline">
+        <span className="font-bold text-xl text-white">
+          👋Hey Arjun, Good Afternoon!
+        </span>
+
+        {/* Date and time */}
+        <span className="flex flex-row space-x-2">
+          <span className="text-teal-700 bg-teal-200 p-1 rounded-md text-xs font-bold mt-2 flex flex-row items-center space-x-1">
+            <FaBuilding />
+            <span>{team.name}</span>
+          </span>
+
+          <span className="text-sky-700 bg-sky-200 p-1 rounded-md text-xs font-bold mt-2 flex flex-row items-center space-x-1">
+            <FaCalendarDay />
+            <Moment date={today} format="ddd, MMM DD" />
+          </span>
+
+          <span className="text-sky-700 bg-sky-200 p-1 rounded-md text-xs font-bold mt-2 flex flex-row items-center space-x-1">
+            <FaClock />
+            <Moment format="h:m a" />
+          </span>
+        </span>
+      </span>
+
+      {/* header control section */}
+      <span className="flex flex-row items-center space-x-5">
+        <button
+          onClick={handleSignOut}
+          className="mt-10 text-sm text-orange-500 font-semibold py-1 px-4 bg-orange-200 rounded"
+        >
+          👋 Logout
+        </button>
+        {/* search bar */}
+        <div className="pt-2 flex flex-row relative items-center">
+          <button type="submit" className="absolute left-0 top-0 mt-5 ml-5">
+            <FaSearch className="text-white" />
+          </button>
+
+          <input
+            className=" bg-white bg-opacity-40 h-10 px-5 pl-10 pr-16 rounded-lg text-white text-sm focus:outline-none"
+            type="search"
+            name="search"
+            placeholder="Search"
+          />
+
+          <button
+            className="absolute right-1 rounded-lg py-1 px-2 ml-1 
+                                    shadow-md text-center text-white text-sm font-bold"
+          >
+            CTRL + K
+          </button>
+        </div>
+
+        <FaBell className="text-lg text-gray-400 hover:text-white ease-in-out duration-300 hover:scale-110 hover:cursor-pointer" />
+        <FaHeadphonesAlt className="text-lg text-gray-400 hover:text-white ease-in-out duration-300 hover:scale-110 hover:cursor-pointer" />
+        <FaMicrophoneAlt className="text-lg text-gray-400 hover:text-white ease-in-out duration-300 hover:scale-110 hover:cursor-pointer" />
+        <FaTh className="text-lg text-gray-400 hover:text-white ease-in-out duration-300 hover:scale-110 hover:cursor-pointer" />
+
+        {/* avatar */}
+        <span className="relative flex">
+          <span className="bg-gray-200 bg-opacity-30 rounded-full shadow-md absolute w-full h-full"></span>
+          <span className="absolute top-0 right-0 w-3 h-3 bg-green-400 rounded-full"></span>
+          <Image
+            src="/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-22.svg"
+            alt="profile"
+            width={50}
+            height={50}
+          />
+        </span>
+      </span>
+    </section>
+  );
+}
diff --git a/components/Dashboard/Links.tsx b/components/Dashboard/Links.tsx
new file mode 100644
index 0000000..43c76ff
--- /dev/null
+++ b/components/Dashboard/Links.tsx
@@ -0,0 +1,3 @@
+export default function Links() {
+  return <span> this is the links</span>;
+}
diff --git a/components/Rooms/index.js b/components/Dashboard/Rooms.tsx
similarity index 100%
rename from components/Rooms/index.js
rename to components/Dashboard/Rooms.tsx
diff --git a/components/Dashboard/TeamVoiceLine.tsx b/components/Dashboard/TeamVoiceLine.tsx
new file mode 100644
index 0000000..c02a3cd
--- /dev/null
+++ b/components/Dashboard/TeamVoiceLine.tsx
@@ -0,0 +1,3 @@
+export default function TeamVoiceLine() {
+  return <div>rooms</div>;
+}
diff --git a/components/Layouts/BackgroundLayout.js b/components/Layouts/BackgroundLayout.js
index 5da50a9..f3fc725 100644
--- a/components/Layouts/BackgroundLayout.js
+++ b/components/Layouts/BackgroundLayout.js
@@ -1,8 +1,7 @@
-
 export default function BackgroundLayout({ children }) {
   return (
     <div id="bg" className="text-white w-screen h-screen">
       {children}
     </div>
-  )
+  );
 }
diff --git a/contexts/authContext.js b/contexts/authContext.js
index 405cf72..41fbe15 100644
--- a/contexts/authContext.js
+++ b/contexts/authContext.js
@@ -1,82 +1,90 @@
-import { getAuth, GoogleAuthProvider, onAuthStateChanged, signInWithPopup, signOut, User } from "firebase/auth";
+import {
+  getAuth,
+  GoogleAuthProvider,
+  onAuthStateChanged,
+  signInWithPopup,
+  signOut,
+  User,
+} from "firebase/auth";
 import React, { useContext, useEffect, useState } from "react";
-import firebase from '../services/firebaseService'
-import nookies from 'nookies'
+import firebase from "../services/firebaseService";
 
 const AuthContext = React.createContext(null);
-const googleProvider = new GoogleAuthProvider()
+const googleProvider = new GoogleAuthProvider();
 
 const auth = getAuth();
 
 export function AuthProvider({ children }) {
   const [currUser, setCurrUser] = useState();
-  const [loading, setLoading] = useState(true)
+  const [loading, setLoading] = useState(true);
 
   useEffect(() => {
     const unsubscribe = onAuthStateChanged(auth, async (user) => {
-      console.log('change in auth')
+      console.log("change in auth");
       if (user) {
-        setCurrUser(user)
+        setCurrUser(user);
 
         // set the token in the cookies for ssr verification
         const token = await user.getIdToken();
-        nookies.set(undefined, 'token', token, { path: '/' });
+        // nookies.set(undefined, "token", token, { path: "/" });
       } else {
-        nookies.set(undefined, 'token', '', { path: '/' });
-        
-        setCurrUser(null)
+        // nookies.set(undefined, "token", "", { path: "/" });
+
+        setCurrUser(null);
       }
-      
-      setLoading(false)
+
+      setLoading(false);
     });
 
-    return unsubscribe
-  }, [])
+    return unsubscribe;
+  }, []);
 
   const signInGoogle = () => {
-    return signInWithPopup(auth, googleProvider).then((res) => {
-      // This gives you a Google Access Token. You can use it to access the Google API.
-      const credential = GoogleAuthProvider.credentialFromResult(res);
-      const token = credential.accessToken;
-      // The signed-in user info.
-      const user = res.user;
+    return signInWithPopup(auth, googleProvider)
+      .then((res) => {
+        // This gives you a Google Access Token. You can use it to access the Google API.
+        const credential = GoogleAuthProvider.credentialFromResult(res);
+        const token = credential.accessToken;
+        // The signed-in user info.
+        const user = res.user;
 
-      setCurrUser(user)
+        setCurrUser(user);
 
-      console.log(user)      
-    }).catch((error) => {
-      // Handle Errors here.
-      const errorCode = error.code;
-      const errorMessage = error.message;
-      // The email of the user's account used.
-      const email = error.email;
-      // The AuthCredential type that was used.
-      const credential = GoogleAuthProvider.credentialFromError(error);
-      console.log(error)
-      throw error
-    })
-  }
+        console.log(user);
+      })
+      .catch((error) => {
+        // Handle Errors here.
+        const errorCode = error.code;
+        const errorMessage = error.message;
+        // The email of the user's account used.
+        const email = error.email;
+        // The AuthCredential type that was used.
+        const credential = GoogleAuthProvider.credentialFromError(error);
+        console.log(error);
+        throw error;
+      });
+  };
 
   const logOut = () => {
-    console.log('logging user out')
+    console.log("logging user out");
 
-    return signOut(auth)
-  }
+    return signOut(auth);
+  };
 
   const value = {
     currUser,
     signInGoogle,
-    logOut
-  }
+    logOut,
+  };
 
   return (
     <AuthContext.Provider value={value}>
       {!loading && children}
     </AuthContext.Provider>
-  )
+  );
 }
 
 // custom hook to use the authUserContext and access currUser
 export function useAuth() {
-  return useContext(AuthContext)
-}
\ No newline at end of file
+  return useContext(AuthContext);
+}
diff --git a/package-lock.json b/package-lock.json
index dbdaa49..6437f5a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,12 +9,13 @@
         "antd": "^4.18.3",
         "firebase": "^9.6.2",
         "firebase-admin": "^10.0.1",
-        "isomorphic-unfetch": "^3.1.0",
+        "js-cookie": "^3.0.1",
+        "moment": "^2.29.1",
         "next": "12.0.7",
-        "nookies": "^2.5.2",
         "react": "17.0.2",
         "react-dom": "17.0.2",
-        "react-icons": "^4.3.1"
+        "react-icons": "^4.3.1",
+        "react-moment": "^1.1.1"
       },
       "devDependencies": {
         "@types/react": "^17.0.38",
@@ -3291,14 +3292,6 @@
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
       "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
     },
-    "node_modules/cookie": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.1.tgz",
-      "integrity": "sha512-ZwrFkGJxUR3EIoXtO+yVE69Eb7KlixbaeAWfBQB9vVsNn/o+Yw69gBWSSDK825hQNdN+wF8zELf3dFNl/kxkUA==",
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
     "node_modules/copy-to-clipboard": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz",
@@ -5682,15 +5675,6 @@
       "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=",
       "dev": true
     },
-    "node_modules/isomorphic-unfetch": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/isomorphic-unfetch/-/isomorphic-unfetch-3.1.0.tgz",
-      "integrity": "sha512-geDJjpoZ8N0kWexiwkX8F9NkTsXhetLPVbZFQ+JTW239QNOwvB0gniuR1Wc6f0AMTn7/mFGyXvHTifrCp/GH8Q==",
-      "dependencies": {
-        "node-fetch": "^2.6.1",
-        "unfetch": "^4.2.0"
-      }
-    },
     "node_modules/jest-worker": {
       "version": "27.0.0-next.5",
       "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.0.0-next.5.tgz",
@@ -5740,6 +5724,14 @@
         "url": "https://github.com/sponsors/panva"
       }
     },
+    "node_modules/js-cookie": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.1.tgz",
+      "integrity": "sha512-+0rgsUXZu4ncpPxRL+lNEptWMOWl9etvPHc/koSRp6MPwpRYAhmk0dUG00J4bxVV3r9uUzfo24wW0knS07SKSw==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -6492,15 +6484,6 @@
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.77.tgz",
       "integrity": "sha512-rB1DUFUNAN4Gn9keO2K1efO35IDK7yKHCdCaIMvFO7yUYmmZYeDjnGKle26G4rwj+LKRQpjyUUvMkPglwGCYNQ=="
     },
-    "node_modules/nookies": {
-      "version": "2.5.2",
-      "resolved": "https://registry.npmjs.org/nookies/-/nookies-2.5.2.tgz",
-      "integrity": "sha512-x0TRSaosAEonNKyCrShoUaJ5rrT5KHRNZ5DwPCuizjgrnkpE5DRf3VL7AyyQin4htict92X1EQ7ejDbaHDVdYA==",
-      "dependencies": {
-        "cookie": "^0.4.1",
-        "set-cookie-parser": "^2.4.6"
-      }
-    },
     "node_modules/normalize-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
@@ -6999,7 +6982,6 @@
       "version": "15.7.2",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
       "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
-      "dev": true,
       "dependencies": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
@@ -7009,8 +6991,7 @@
     "node_modules/prop-types/node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "dev": true
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
     "node_modules/proto3-json-serializer": {
       "version": "0.1.6",
@@ -7789,6 +7770,16 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "node_modules/react-moment": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/react-moment/-/react-moment-1.1.1.tgz",
+      "integrity": "sha512-WjwvxBSnmLMRcU33do0KixDB+9vP3e84eCse+rd+HNklAMNWyRgZTDEQlay/qK6lcXFPRuEIASJTpEt6pyK7Ww==",
+      "peerDependencies": {
+        "moment": "^2.29.0",
+        "prop-types": "^15.7.0",
+        "react": "^16.0 || ^17.0.0"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.8.3",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
@@ -8053,11 +8044,6 @@
         "semver": "bin/semver.js"
       }
     },
-    "node_modules/set-cookie-parser": {
-      "version": "2.4.8",
-      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.4.8.tgz",
-      "integrity": "sha512-edRH8mBKEWNVIVMKejNnuJxleqYE/ZSdcT8/Nem9/mmosx12pctd80s2Oy00KNZzrogMZS5mauK2/ymL1bvlvg=="
-    },
     "node_modules/set-immediate-shim": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/set-immediate-shim/-/set-immediate-shim-1.0.1.tgz",
@@ -8774,11 +8760,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/unfetch": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/unfetch/-/unfetch-4.2.0.tgz",
-      "integrity": "sha512-F9p7yYCn6cIW9El1zi0HI6vqpeIvBsr3dSuRO6Xuppb1u5rXpCPmMvLSyECLhybr9isec8Ohl0hPekMVrEinDA=="
-    },
     "node_modules/unique-string": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/unique-string/-/unique-string-2.0.0.tgz",
@@ -11755,11 +11736,6 @@
         }
       }
     },
-    "cookie": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.1.tgz",
-      "integrity": "sha512-ZwrFkGJxUR3EIoXtO+yVE69Eb7KlixbaeAWfBQB9vVsNn/o+Yw69gBWSSDK825hQNdN+wF8zELf3dFNl/kxkUA=="
-    },
     "copy-to-clipboard": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz",
@@ -13567,15 +13543,6 @@
       "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=",
       "dev": true
     },
-    "isomorphic-unfetch": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/isomorphic-unfetch/-/isomorphic-unfetch-3.1.0.tgz",
-      "integrity": "sha512-geDJjpoZ8N0kWexiwkX8F9NkTsXhetLPVbZFQ+JTW239QNOwvB0gniuR1Wc6f0AMTn7/mFGyXvHTifrCp/GH8Q==",
-      "requires": {
-        "node-fetch": "^2.6.1",
-        "unfetch": "^4.2.0"
-      }
-    },
     "jest-worker": {
       "version": "27.0.0-next.5",
       "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.0.0-next.5.tgz",
@@ -13609,6 +13576,11 @@
         "@panva/asn1.js": "^1.0.0"
       }
     },
+    "js-cookie": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.1.tgz",
+      "integrity": "sha512-+0rgsUXZu4ncpPxRL+lNEptWMOWl9etvPHc/koSRp6MPwpRYAhmk0dUG00J4bxVV3r9uUzfo24wW0knS07SKSw=="
+    },
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -14237,15 +14209,6 @@
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.77.tgz",
       "integrity": "sha512-rB1DUFUNAN4Gn9keO2K1efO35IDK7yKHCdCaIMvFO7yUYmmZYeDjnGKle26G4rwj+LKRQpjyUUvMkPglwGCYNQ=="
     },
-    "nookies": {
-      "version": "2.5.2",
-      "resolved": "https://registry.npmjs.org/nookies/-/nookies-2.5.2.tgz",
-      "integrity": "sha512-x0TRSaosAEonNKyCrShoUaJ5rrT5KHRNZ5DwPCuizjgrnkpE5DRf3VL7AyyQin4htict92X1EQ7ejDbaHDVdYA==",
-      "requires": {
-        "cookie": "^0.4.1",
-        "set-cookie-parser": "^2.4.6"
-      }
-    },
     "normalize-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
@@ -14590,7 +14553,6 @@
       "version": "15.7.2",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
       "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
-      "dev": true,
       "requires": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
@@ -14600,8 +14562,7 @@
         "react-is": {
           "version": "16.13.1",
           "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-          "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-          "dev": true
+          "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
         }
       }
     },
@@ -15173,6 +15134,12 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "react-moment": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/react-moment/-/react-moment-1.1.1.tgz",
+      "integrity": "sha512-WjwvxBSnmLMRcU33do0KixDB+9vP3e84eCse+rd+HNklAMNWyRgZTDEQlay/qK6lcXFPRuEIASJTpEt6pyK7Ww==",
+      "requires": {}
+    },
     "react-refresh": {
       "version": "0.8.3",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
@@ -15351,11 +15318,6 @@
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
       "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
     },
-    "set-cookie-parser": {
-      "version": "2.4.8",
-      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.4.8.tgz",
-      "integrity": "sha512-edRH8mBKEWNVIVMKejNnuJxleqYE/ZSdcT8/Nem9/mmosx12pctd80s2Oy00KNZzrogMZS5mauK2/ymL1bvlvg=="
-    },
     "set-immediate-shim": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/set-immediate-shim/-/set-immediate-shim-1.0.1.tgz",
@@ -15917,11 +15879,6 @@
         "which-boxed-primitive": "^1.0.2"
       }
     },
-    "unfetch": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/unfetch/-/unfetch-4.2.0.tgz",
-      "integrity": "sha512-F9p7yYCn6cIW9El1zi0HI6vqpeIvBsr3dSuRO6Xuppb1u5rXpCPmMvLSyECLhybr9isec8Ohl0hPekMVrEinDA=="
-    },
     "unique-string": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/unique-string/-/unique-string-2.0.0.tgz",
diff --git a/package.json b/package.json
index b3c2edd..8a517ad 100644
--- a/package.json
+++ b/package.json
@@ -11,12 +11,13 @@
     "antd": "^4.18.3",
     "firebase": "^9.6.2",
     "firebase-admin": "^10.0.1",
-    "isomorphic-unfetch": "^3.1.0",
+    "js-cookie": "^3.0.1",
+    "moment": "^2.29.1",
     "next": "12.0.7",
-    "nookies": "^2.5.2",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "react-icons": "^4.3.1"
+    "react-icons": "^4.3.1",
+    "react-moment": "^1.1.1"
   },
   "devDependencies": {
     "@types/react": "^17.0.38",
diff --git a/pages/teams/[teamid].tsx b/pages/teams/[teamid].tsx
index c4429d9..76a0039 100644
--- a/pages/teams/[teamid].tsx
+++ b/pages/teams/[teamid].tsx
@@ -1,6 +1,7 @@
 import { GetServerSidePropsContext, GetServerSidePropsResult } from "next";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
+import Header from "../../components/Dashboard/Header";
 import BackgroundLayout from "../../components/Layouts/BackgroundLayout";
 import Loading from "../../components/Loading";
 import { useAuth } from "../../contexts/authContext";
@@ -19,7 +20,11 @@ function TeamDashboard() {
 
   console.log(teamDashboardContext);
 
-  return <div>{JSON.stringify(teamDashboardContext)}</div>;
+  return (
+    <div className="container mx-auto max-w-screen-xl py-10 px-10 flex flex-col space-y-5">
+      <Header />
+    </div>
+  );
 }
 
 export default function TeamDashboardWrapper() {
diff --git a/styles/globals.css b/styles/globals.css
index 139ab11..9471b25 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -22,6 +22,7 @@ body {
 
 main {
   font-family: "Poppins", sans-serif;
+  overflow: hidden;
 }
 
 #bg {