diff --git a/models/team.ts b/models/team.ts
index ae9b5a5..ea4cdef 100644
--- a/models/team.ts
+++ b/models/team.ts
@@ -2,11 +2,12 @@ import { Timestamp } from "firebase/firestore";
 
 export class Team {
   id: string;
-  name:string;
+  name: string;
 
   status: TeamStatus;
 
-  allowedUserCount:number;
+  allowedUserCount: number;
+  subscriptionPlan: TeamSubscriptionPlan;
 
   companySite: string;
 
@@ -19,5 +20,11 @@ export class Team {
 export enum TeamStatus {
   created = "created",
   deactivated = "deactivated",
-  deleted = "deleted"
-}
\ No newline at end of file
+  deleted = "deleted",
+}
+
+export enum TeamSubscriptionPlan {
+  free = "free",
+  basic = "basic",
+  pro = "pro",
+}
diff --git a/pages/pricing.tsx b/pages/pricing.tsx
new file mode 100644
index 0000000..a42bc65
--- /dev/null
+++ b/pages/pricing.tsx
@@ -0,0 +1,3 @@
+export default function Pricing() {
+  return <div>this is the pricing page</div>;
+}
diff --git a/pages/teams/index.tsx b/pages/teams/index.tsx
index 6d14974..693a954 100644
--- a/pages/teams/index.tsx
+++ b/pages/teams/index.tsx
@@ -5,11 +5,19 @@ import UserService from "../../services/userService";
 import { User } from "../../models/user";
 import { GetServerSidePropsContext } from "next";
 import firebaseAdmin from "firebase-admin";
-import { FaPeopleCarry, FaArrowRight, FaBullhorn } from "react-icons/fa";
+import {
+  FaPeopleCarry,
+  FaArrowRight,
+  FaBullhorn,
+  FaPlus,
+} from "react-icons/fa";
 import BackgroundLayout from "../../components/Layouts/BackgroundLayout";
 import TeamService from "../../services/teamService";
 import Loading from "../../components/Loading";
 import { TeamMemberStatus } from "../../models/teamMember";
+import { Divider, Tooltip } from "antd";
+import { Team } from "../../models/team";
+import moment from "moment";
 
 /**
  * figure out where to take the user based on everything
@@ -24,6 +32,7 @@ function RouteHandler() {
 
   const [loading, setLoading] = useState<Boolean>(true);
   const [user, setUser] = useState<User | null>(null);
+  const [teams, setTeams] = useState<Team[]>([]);
 
   useEffect(() => {
     (async function () {
@@ -55,37 +64,14 @@ function RouteHandler() {
         }
         setUser(returnedUser);
 
-        // check if user is in a team go to the team dashboard
-        const returnedTeamMembers = await teamService.getTeamMembersByUserId(
-          currUser.uid
+        // get all teams that this user id is active in
+        // get all of the teams that this user's email is invited to
+        const teams: Team[] = await teamService.getActiveOrInvitedTeamsbyUser(
+          currUser.uid,
+          returnedUser.emailAddress
         );
 
-        // if the user is deleted from a team, don't let them go there
-        var teamId = "";
-        returnedTeamMembers.map((tm) => {
-          if (tm.status != TeamMemberStatus.deleted) {
-            console.log(
-              "in a team! going to the team dashboard of the first one!"
-            );
-
-            teamId = returnedTeamMembers[0].teamId;
-          }
-        });
-
-        if (teamId) {
-          router.push("/teams/" + teamId);
-          return;
-        }
-
-        // last chance, if they are invited to a team, check for it
-        const invitedTeamMember = await teamService.getTeamMembersByEmailInvite(
-          currUser.email?.toLocaleLowerCase()
-        );
-
-        if (invitedTeamMember.length > 0) {
-          router.push("/teams/" + invitedTeamMember[0].teamId);
-          return;
-        }
+        setTeams(teams);
 
         setLoading(false);
       } catch (error) {
@@ -93,7 +79,7 @@ function RouteHandler() {
         router.push("/teams/login");
       }
     })();
-  }, [currUser]);
+  }, []);
 
   if (loading || !user) {
     return <Loading />;
@@ -101,7 +87,7 @@ function RouteHandler() {
 
   // not in a team yet, and have not created a team yet
   return (
-    <div className="container mx-auto flex flex-col max-w-md m-10 bg-white p-10 rounded-lg shadow-md space-y-5">
+    <div className="container mx-auto flex flex-col max-w-screen-md m-10 bg-white p-10 rounded-lg shadow-md space-y-5">
       {/* header */}
       <div className="flex flex-row items-center justify-between">
         <span className="flex flex-col justify-start">
@@ -111,50 +97,90 @@ function RouteHandler() {
           </span>
         </span>
 
-        <button onClick={() => router.push("/teams/profile")}>
-          <img
-            src={user ? user.avatarUrl : currUser.photoURL}
-            alt="asdf"
-            className="rounded-full w-12"
-          />
-        </button>
+        <Tooltip title={"Click to Edit Profile"}>
+          <button onClick={() => router.push("/teams/profile")}>
+            <img
+              src={user ? user.avatarUrl : currUser.photoURL}
+              alt="asdf"
+              className="rounded-full w-12 shadow-lg"
+            />
+          </button>
+        </Tooltip>
       </div>
 
-      {/* create team hover thing */}
-      <button
-        onClick={() => router.push("/teams/create")}
-        className="group flex flex-row py-5 px-3 items-center border border-dashed rounded hover:shadow-lg transition duration-400"
-      >
-        <FaPeopleCarry className="text-5xl text-teal-500" />
+      <div className="flex flex-row items-center">
+        <span className="text-gray-400">Your Teams</span>
+        <Tooltip title={"Add members and get started immediately!"}>
+          <button
+            onClick={() => window.open("/teams/create", "_self")}
+            className="ml-auto rounded text-xs font-semibold bg-gray-200 p-2 text-teal-600 shadow-lg flex flex-row items-center space-x-2"
+          >
+            <FaPlus />
+            <span>Create</span>
+          </button>
+        </Tooltip>
+      </div>
 
-        <span className="flex flex-col items-start ml-2 mr-10">
-          <span className="text-gray-500">Create a Team</span>
-          <span className="text-gray-300 text-sm text-left">
-            Add members, and get started immediately.
-          </span>
-        </span>
+      {/* all teams part of */}
+      <div className="flex flex-row flex-wrap">
+        {teams.map((team) => {
+          return (
+            <span
+              key={team.id}
+              className="group  hover:bg-teal-600 hover:bg-opacity-10 transition-all 
+              p-5 rounded bg-gray-200 bg-opacity-20 flex flex-row justify-between items-center w-[20rem] m-2"
+            >
+              <span className="flex flex-col mr-10 items-start">
+                <span className="text-lg text-teal-600 group-hover:font-semibold transition-all">
+                  {team.name}
+                </span>
 
-        <span className="ml-auto bg-gray-500 bg-opacity-25 p-2 rounded group-hover:bg-opacity-40 group-hover:bg-teal-500">
-          <FaArrowRight className="text-sm text-white" />
-        </span>
-      </button>
+                {team.companySite && (
+                  <span
+                    onClick={() => window.open(team.companySite, "_blank")}
+                    className="text-xs hover:cursor-pointer font-semibold text-teal-600 p-1 bg-teal-500 bg-opacity-20 rounded"
+                  >
+                    {team.companySite}
+                  </span>
+                )}
 
-      {/* tell your manager to add your email */}
-      <button className="group flex flex-row py-5 px-3 items-center border border-dashed rounded">
-        <FaBullhorn className="text-5xl text-orange-300" />
+                <span className="text-sm text-gray-300">
+                  {"created: " + moment(team.createdDate.toDate()).fromNow()}
+                </span>
+              </span>
 
-        <span className="flex flex-col items-start ml-2 mr-10">
-          <span className="text-gray-500">Remind Your Manager</span>
-          <span className="text-gray-300 text-sm text-left">
-            Your account email is {user.emailAddress}
-          </span>
-        </span>
-      </button>
+              <Tooltip title={"Go to " + team.name}>
+                <span
+                  onClick={() => window.open("/teams/" + team.id, "_blank")}
+                  className="ml-auto hover:cursor-pointer transition-all bg-gray-500 bg-opacity-25 p-2 rounded group-hover:bg-opacity-40 group-hover:bg-teal-500"
+                >
+                  <FaArrowRight className="text-sm text-white" />
+                </span>
+              </Tooltip>
+            </span>
+          );
+        })}
+
+        {teams.length == 0 ? (
+          <button className="group flex flex-row py-5 px-3 items-center border border-dashed rounded">
+            <FaBullhorn className="text-5xl text-orange-300" />
+
+            <span className="flex flex-col items-start ml-2 mr-10">
+              <span className="text-gray-500">Remind Your Manager</span>
+              <span className="text-gray-300 text-xs text-left">
+                Your account email is {user.emailAddress}
+              </span>
+            </span>
+          </button>
+        ) : (
+          ""
+        )}
+      </div>
 
       <span className="text-gray-300 ml-auto text-md mt-10">
         or learn more about{" "}
         <button
-          onClick={() => router.push("/teams/landing")}
+          onClick={() => window.open("/", "_self")}
           className="underline font-satisfy text-xl text-teal-500 decoration-teal-500"
         >
           nirvana