diff --git a/apps/admin-web/package.json b/apps/admin-web/package.json
index 293cd02e..23749d2f 100644
--- a/apps/admin-web/package.json
+++ b/apps/admin-web/package.json
@@ -7,14 +7,21 @@
     "@auth0/auth0-spa-js": "^1.2.2",
     "@types/react-csv": "^1.1.2",
     "antd": "^4.1.3",
+    "chart.js": "^2.9.3",
+    "graphql": "^14",
     "graphql-tag": "^2.10.1",
     "qrcode.react": "^1.0.0",
     "react": "^16.7.0",
+    "react-apollo": "^3.1.3",
+    "react-burger-menu": "^2.6.13",
+    "react-chartjs-2": "^2.9.0",
     "react-csv": "^2.0.3",
     "react-dom": "^16.7.0",
     "react-highlight-words": "^0.16.0",
     "react-router-dom": "^5.1.2",
     "react-scripts": "^3.4.1",
+    "react-use": "^15.1.0",
+    "serialize-javascript": "^2.1.2",
     "styled-components": "^4.1.3"
   },
   "scripts": {
@@ -35,6 +42,7 @@
     "@types/jest": "^24.0.18",
     "@types/node": "^12.7.12",
     "@types/react": "^16.7.20",
+    "@types/react-burger-menu": "^2.6.1",
     "@types/react-dom": "^16.0.11",
     "@types/react-highlight-words": "^0.16.0",
     "@types/react-router-dom": "^5.1.0",
diff --git a/apps/admin-web/public/index.html b/apps/admin-web/public/index.html
index 2327face..ed70fdb2 100644
--- a/apps/admin-web/public/index.html
+++ b/apps/admin-web/public/index.html
@@ -1,15 +1,22 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <meta name="theme-color" content="#000000">
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <meta name="theme-color" content="#000000" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Nunito+Sans&display=swap"
+      rel="stylesheet"
+    />
     <!--
       manifest.json provides metadata used when your web app is added to the
       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
diff --git a/apps/admin-web/src/App.tsx b/apps/admin-web/src/App.tsx
index 0d8e691f..b2711698 100644
--- a/apps/admin-web/src/App.tsx
+++ b/apps/admin-web/src/App.tsx
@@ -1,129 +1,87 @@
 import React, { useEffect } from "react";
-import { BrowserRouter, Link, Route, Switch } from "react-router-dom";
-import { Layout, Menu, PageHeader, Spin } from "antd";
-
-import { ToolList } from "./Tools";
-import { Events } from "./screens/Events";
-import { Membership } from "./screens/Membership";
-import { RedemptionCodes } from "./screens/RedemptionCodes";
+import { Spin } from "antd";
+import { BrowserRouter } from "react-router-dom";
+import styled, { AnyStyledComponent } from "styled-components";
 import { config } from "./config";
 import "./static/css/App.css";
-
 import { useAuth0 } from "./utils/react-auth0-wrapper";
+import Sidebar from "./screens/Dashboard/Sidebar";
+import Main from "./screens/Dashboard/Main";
 
-const { Header, Content, Footer, Sider } = Layout;
-
-const NotFound: React.FC<{}> = (): JSX.Element => {
-  return <h1>You are lost!</h1>;
-};
-
-const MainContent: React.SFC<{}> = (): JSX.Element => {
-  return (
-    <Switch>
-      <Route exact={true} path="/" component={ToolList} />
-      <Route path="/events" component={Events} />
-      <Route path="/membership" component={Membership} />
-      <Route path="/redemption" component={RedemptionCodes} />
-      <Route component={NotFound} />
-    </Switch>
-  );
-};
+const Grid: AnyStyledComponent = styled.div`
+  height: 100vh;
+  display: grid;
+  width: 100vw;
+  margin: auto;
+  grid-template-columns: repeat(16, 1fr);
+  grid-template-rows: auto;
+  grid-template-areas: "m m c c c c c c c c c c c c c c";
+  @media (max-width:  1530px) {
+    grid-template-columns: 1fr
+    grid-template-areas: 
+            "m"
+            "c";
+    grid-template-rows: 0px auto;
+    
+  }
+`;
+const Content: AnyStyledComponent = styled.div`
+	grid-area: c;
+`;
+const Menu: AnyStyledComponent = styled.div`
+	grid-area: m;
+	@media (max-width: 1530px) {
+		grid-area: m;
+	}
+`;
 
 const App: React.SFC<{}> = (): JSX.Element => {
-  const {
-    loading,
-    isAuthenticated,
-    getTokenSilently,
-    loginWithRedirect,
-    logout,
-    user,
-  } = useAuth0();
+	const {
+		loading,
+		isAuthenticated,
+		getTokenSilently,
+		loginWithRedirect,
+	} = useAuth0();
 
-  useEffect(() => {
-    if (loading) {
-      return;
-    }
+	useEffect(() => {
+		if (loading) {
+			return;
+		}
 
-    if (!isAuthenticated) {
-      const fn: any = async (): Promise<void> => {
-        await loginWithRedirect({
-          appState: { targetUrl: window.location.href },
-        });
-      };
+		if (!isAuthenticated) {
+			const fn: any = async (): Promise<void> => {
+				await loginWithRedirect({
+					appState: { targetUrl: window.location.href },
+				});
+			};
 
-      fn();
-    } else {
-      const setToken: () => void = async (): Promise<void> => {
-        const token: string = (await getTokenSilently()) || "";
-        localStorage.setItem(config.ACCESS_TOKEN_KEY, token);
-      };
+			fn();
+		} else {
+			const setToken: () => void = async (): Promise<void> => {
+				const token: string = (await getTokenSilently()) || "";
+				localStorage.setItem(config.ACCESS_TOKEN_KEY, token);
+			};
 
-      setToken();
-    }
-  }, [loading, isAuthenticated, getTokenSilently]);
+			setToken();
+		}
+	}, [loading, isAuthenticated, getTokenSilently]);
 
-  const onLogoutClick: () => void = (): void => {
-    logout({ returnTo: config.REDIRECT_PAGE_URI });
-  };
+	if (loading || !isAuthenticated) {
+		return <Spin size="large" className="load-page" tip="Loading..." />;
+	}
 
-  if (loading || !isAuthenticated) {
-    return <Spin size="large" className="load-page" tip="Loading..." />;
-  }
-
-  return (
-    <BrowserRouter>
-      <Layout>
-        <Sider
-          breakpoint="md"
-          collapsedWidth="0"
-          onBreakpoint={undefined}
-          onCollapse={undefined}
-        >
-          <div className="logo" />
-          <Menu theme="dark" mode="inline" defaultSelectedKeys={["events"]}>
-            <Menu.Item key="events">
-              <Link to="/events">
-                <span className="nav-text">Events</span>
-              </Link>
-            </Menu.Item>
-            <Menu.Item key="membership">
-              <Link to="/membership">
-                <span className="nav-text">Membership Tool</span>
-              </Link>
-            </Menu.Item>
-            <Menu.Item key="redemption">
-              <Link to="/redemption">
-                <span className="nav-text">Redemption Codes</span>
-              </Link>
-            </Menu.Item>
-            <Menu.Item onClick={onLogoutClick} key="signOut">
-              <span className="nav-text">Sign Out</span>
-            </Menu.Item>
-          </Menu>
-        </Sider>
-        <Layout>
-          <Header style={{ background: "#fff", padding: 0 }}>
-            <PageHeader
-              backIcon={false}
-              title={`Hello, ${user.name}. Welcome to your Admin Dashboard`}
-            />
-          </Header>
-          <Content style={{ margin: "24px 16px 0" }}>
-            <MainContent />
-            <Footer style={{ textAlign: "center" }}>S&T ACM 2019</Footer>
-          </Content>
-        </Layout>
-      </Layout>
-    </BrowserRouter>
-  );
+	return (
+		<BrowserRouter>
+			<Grid>
+				<Content>
+					<Main />
+				</Content>
+				<Menu>
+					<Sidebar />
+				</Menu>
+			</Grid>
+		</BrowserRouter>
+	);
 };
 
-/*
- * Future Routes
-        <Route exact={true} path="/membership" component={Membership} />
-        <Route exact={true} path="/sigs" component={Sigs} />
-        <Route exact={true} path="/sponsors" component={Sponsors} />
-        <Route exact={true} path="/products" component={Products} />
-*/
-
 export { App };
diff --git a/apps/admin-web/src/Tools.tsx b/apps/admin-web/src/Tools.tsx
deleted file mode 100644
index 7479b816..00000000
--- a/apps/admin-web/src/Tools.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from "react";
-import { Link } from "react-router-dom";
-
-const ToolList: React.SFC<{}> = (): JSX.Element => {
-  return (
-    <div>
-      <h2>Tools:</h2>
-      <ul>
-        <li>
-          <Link to="/events">Events</Link>
-        </li>
-        <li>
-          <Link to="/membership">Membership</Link>
-        </li>
-        <li>
-          <Link to="/redemption">Redemption Codes</Link>
-        </li>
-      </ul>
-    </div>
-  );
-};
-
-export { ToolList };
diff --git a/apps/admin-web/src/generated/graphql.tsx b/apps/admin-web/src/generated/graphql.tsx
index 5d19d855..2e49872e 100644
--- a/apps/admin-web/src/generated/graphql.tsx
+++ b/apps/admin-web/src/generated/graphql.tsx
@@ -428,6 +428,21 @@ export type UserUpdateInput = {
   email?: Maybe<Scalars['String']>;
 };
 
+export type GetCurrentEventsQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+export type GetCurrentEventsQuery = (
+  { __typename?: 'Query' }
+  & { currentEvents: Array<(
+    { __typename?: 'Event' }
+    & Pick<Event, 'id' | 'dateCreated' | 'dateHosted' | 'dateExpire' | 'eventTitle' | 'description' | 'location' | 'flierLink' | 'eventLink'>
+    & { hostSig: (
+      { __typename?: 'Sig' }
+      & Pick<Sig, 'name'>
+    ) }
+  )> }
+);
+
 export type SigsQueryVariables = Exact<{ [key: string]: never; }>;
 
 
@@ -621,6 +636,49 @@ export type GetProductsQuery = (
 );
 
 
+export const GetCurrentEventsDocument = gql`
+    query getCurrentEvents {
+  currentEvents {
+    id
+    dateCreated
+    dateHosted
+    dateExpire
+    hostSig {
+      name
+    }
+    eventTitle
+    description
+    location
+    flierLink
+    eventLink
+  }
+}
+    `;
+
+/**
+ * __useGetCurrentEventsQuery__
+ *
+ * To run a query within a React component, call `useGetCurrentEventsQuery` and pass it any options that fit your needs.
+ * When your component renders, `useGetCurrentEventsQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useGetCurrentEventsQuery({
+ *   variables: {
+ *   },
+ * });
+ */
+export function useGetCurrentEventsQuery(baseOptions?: ApolloReactHooks.QueryHookOptions<GetCurrentEventsQuery, GetCurrentEventsQueryVariables>) {
+        return ApolloReactHooks.useQuery<GetCurrentEventsQuery, GetCurrentEventsQueryVariables>(GetCurrentEventsDocument, baseOptions);
+      }
+export function useGetCurrentEventsLazyQuery(baseOptions?: ApolloReactHooks.LazyQueryHookOptions<GetCurrentEventsQuery, GetCurrentEventsQueryVariables>) {
+          return ApolloReactHooks.useLazyQuery<GetCurrentEventsQuery, GetCurrentEventsQueryVariables>(GetCurrentEventsDocument, baseOptions);
+        }
+export type GetCurrentEventsQueryHookResult = ReturnType<typeof useGetCurrentEventsQuery>;
+export type GetCurrentEventsLazyQueryHookResult = ReturnType<typeof useGetCurrentEventsLazyQuery>;
+export type GetCurrentEventsQueryResult = ApolloReactCommon.QueryResult<GetCurrentEventsQuery, GetCurrentEventsQueryVariables>;
 export const SigsDocument = gql`
     query sigs {
   sigs {
diff --git a/apps/admin-web/src/screens/Dashboard/Main.tsx b/apps/admin-web/src/screens/Dashboard/Main.tsx
new file mode 100644
index 00000000..64709fee
--- /dev/null
+++ b/apps/admin-web/src/screens/Dashboard/Main.tsx
@@ -0,0 +1,30 @@
+import React from "react";
+import { Route, Switch } from "react-router-dom";
+import { Upcoming } from "../Events/Upcoming";
+import { Previous } from "../Events/Previous";
+import { Membership } from "../Membership";
+import { ToolList } from "../../tools/Tools";
+import { Officers } from "../Permissions/Officers";
+import { Groups } from "../Permissions/Groups";
+import { RedemptionCodes } from "../Permissions/RedemptionCodes";
+
+const NotFound: React.FC<{}> = (): JSX.Element => {
+  return <h1>You are lost!</h1>;
+};
+
+const Main: React.SFC<{}> = (): JSX.Element => {
+  return (
+    <Switch>
+      <Route exact={true} path="/" component={ToolList} />
+      <Route path="/events/upcoming" component={Upcoming} />
+      <Route path="/events/previous" component={Previous} />
+      <Route path="/membership" component={Membership} />
+      <Route path="/permissions/officers" component={Officers} />
+      <Route path="/permissions/groups" component={Groups} />
+      <Route path="/permissions/redemption" component={RedemptionCodes} />
+      <Route component={NotFound} />
+    </Switch>
+  );
+};
+
+export default Main;
diff --git a/apps/admin-web/src/screens/Dashboard/Option.tsx b/apps/admin-web/src/screens/Dashboard/Option.tsx
new file mode 100644
index 00000000..1c204fac
--- /dev/null
+++ b/apps/admin-web/src/screens/Dashboard/Option.tsx
@@ -0,0 +1,54 @@
+import React from "react";
+import styled from "styled-components";
+
+import { useAuth0 } from "../../utils/react-auth0-wrapper";
+
+const Dropdown = styled.div`
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  left: 0;
+  right: 0;
+  box-shadow: 0 0 5px gray;
+  background-color: white;
+  border-radius: 8px;
+  font-size: 17px;
+  color: black;
+  margin-top: 0.5em;
+  z-index: 1000;
+  text-align: center;
+  a {
+    background-color: white;
+    color: black;
+    font-weight: bold;
+    width: 100%;
+    padding: 0.3em 0;
+  }
+`;
+
+const Profile = styled.a`
+  border-radius: 8px 8px 0 0;
+`;
+
+const LogoutBtn = styled.a`
+  border-radius: 0 0 8px 8px;
+`;
+
+const Options: React.FC<{}> = (): JSX.Element => {
+  const { logout } = useAuth0();
+
+  const logoutClick = () => {
+    logout({ returnTo: window.location.origin });
+  };
+
+  return (
+    <Dropdown>
+      <Profile href={`https://profile.mstacm.org/`}>Profile</Profile>
+      <LogoutBtn onClick={logoutClick}>Log Out</LogoutBtn>
+    </Dropdown>
+  );
+};
+
+export { Options };
diff --git a/apps/admin-web/src/screens/Dashboard/Profile.tsx b/apps/admin-web/src/screens/Dashboard/Profile.tsx
new file mode 100644
index 00000000..2439b128
--- /dev/null
+++ b/apps/admin-web/src/screens/Dashboard/Profile.tsx
@@ -0,0 +1,93 @@
+import React from "react";
+import styled from "styled-components";
+
+import { useAuth0 } from "../../utils/react-auth0-wrapper";
+import { Options } from "./Option";
+
+const DropdownWrapper = styled.div`
+  position: relative;
+`;
+
+const Name = styled.div`
+  border: none;
+  font-size: 17px;
+  font-weight: bold;
+  background: none;
+  color: black;
+  margin-right: 1em;
+  margin-left: 0.5em;
+  &:hover {
+    cursor: pointer;
+  }
+  @media (max-width: 1500px) {
+    color: white;
+  }
+`;
+
+const Picture = styled.img`
+  min-width: 30px;
+  max-width: 30px;
+  min-height: 30px;
+  max-height: 30px;
+  border-radius: 50%;
+`;
+
+const ProfileDisplay = styled.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  outline: 0;
+  background: transparent;
+  border: none;
+`;
+
+const TriangleDown = styled.div`
+  height: 0;
+  width: 0;
+
+  border-top: 4px solid black;
+  border-right: 4px solid transparent;
+  border-left: 4px solid transparent;
+  @media (max-width: 1500px) {
+    border-top: 4px solid white;
+  }
+`;
+
+const TriangleRight = styled.div`
+  height: 0;
+  width: 0;
+  margin-right: 4px;
+  border-top: 4px solid transparent;
+  border-left: 4px solid black;
+  border-bottom: 4px solid transparent;
+  @media (max-width: 1500px) {
+    border-left: 4px solid white;
+  }
+`;
+
+const ProfileOptions: React.FC<{}> = (): JSX.Element => {
+  const { loading, user } = useAuth0();
+
+  const [down, setDown] = React.useState(false);
+
+  return (
+    <DropdownWrapper>
+      <ProfileDisplay
+        onClick={() => {
+          if (down) {
+            setDown(false);
+          } else {
+            setDown(true);
+          }
+        }}
+      >
+        {!loading && <Picture src={user.picture} alt="Profile"></Picture>}
+        {!loading && <Name>{user.name}</Name>}
+        {down ? <TriangleRight /> : <TriangleDown />}
+      </ProfileDisplay>
+      {down && <Options />}
+    </DropdownWrapper>
+  );
+};
+
+export { ProfileOptions };
diff --git a/apps/admin-web/src/screens/Dashboard/Sidebar.tsx b/apps/admin-web/src/screens/Dashboard/Sidebar.tsx
new file mode 100644
index 00000000..3d0c6d12
--- /dev/null
+++ b/apps/admin-web/src/screens/Dashboard/Sidebar.tsx
@@ -0,0 +1,148 @@
+import React, { useState } from "react";
+import { useWindowSize } from "react-use";
+import { scaleDown as Menu } from "react-burger-menu";
+import styled, { AnyStyledComponent } from "styled-components";
+import logo from "./acm-logo.png";
+import { ProfileOptions } from "./Profile";
+import { NavButton } from "./common/NavButton";
+import { NavDropDownContent } from "./common/NavDropdown/NavDropDownContent";
+import { NavDropDown } from "./common/NavDropdown/NavDropDown";
+
+const Center: AnyStyledComponent = styled.div`
+  padding-top: 40px;
+  width: 230px;
+  background-color: #087abb;
+  height: 100vh;
+  overflow: hidden;
+  font-family: Nunito Sans;
+  display: flex;
+  position: fixed;
+  // border-radius: 0px 50px 50px 0px;
+  color: white;
+  flex-direction: column;
+  @media (max-width: 1530px) {
+    width: 100%;
+    position: relative;
+  }
+`;
+
+const Side: AnyStyledComponent = styled.ul`
+  padding-left: 0;
+`;
+
+const Acmtext: AnyStyledComponent = styled.div`
+  font-family: Nunito Sans;
+  font-style: normal;
+  font-weight: bold;
+  user-select: none;
+
+  font-size: 24px;
+`;
+
+const Acm: AnyStyledComponent = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-bottom: 100px;
+`;
+
+const LogMobile: AnyStyledComponent = styled.div`
+  display: flex;
+  font-family: Nunito Sans;
+
+  align-items: center;
+  padding-top: 30px;
+  justify-content: center;
+  z-index: 10;
+`;
+
+const Img = styled.img`
+  height: 40px;
+  width: 40px;
+  margin-right: 10px;
+  user-select: none;
+`;
+
+function Sidebar() {
+  const [link, setLink] = useState();
+  const linkCallback = (data: any) => {
+    setLink(data);
+  };
+
+  const { width } = useWindowSize();
+
+  const smallMenu = width <= 600 ? 180 : 300;
+
+  const content = (
+    <div>
+      <Acm>
+        <Img src={logo}></Img>
+        <Acmtext>S&amp;T ACM</Acmtext>
+      </Acm>
+
+      <Side>
+        <NavDropDown
+          linkData={link}
+          navTitle="Events"
+          navLink="/events/upcoming"
+          image="https://img.icons8.com/material-outlined/24/000000/data-configuration.png"
+        >
+          <NavDropDownContent
+            dropDownTitle="Upcoming"
+            dropDownLink="/events/upcoming"
+            siblingCallBack={linkCallback}
+          />
+          <NavDropDownContent
+            dropDownTitle="Previous"
+            dropDownLink="/events/previous"
+            siblingCallBack={linkCallback}
+          />
+        </NavDropDown>
+        <NavButton
+          image="https://img.icons8.com/material-outlined/24/000000/data-configuration.png"
+          text="Membership"
+          link="/membership"
+        ></NavButton>
+        <NavDropDown
+          linkData={link}
+          navTitle="Permissions"
+          navLink="/permissions/officers"
+          image="https://img.icons8.com/material-outlined/24/000000/data-configuration.png"
+        >
+          <NavDropDownContent
+            dropDownTitle="Officers"
+            dropDownLink="/permissions/officers"
+            siblingCallBack={linkCallback}
+          />
+          <NavDropDownContent
+            dropDownTitle="Groups"
+            dropDownLink="/permissions/groups"
+            siblingCallBack={linkCallback}
+          />
+          <NavDropDownContent
+            dropDownTitle="Redemption"
+            dropDownLink="/permissions/redemption"
+            siblingCallBack={linkCallback}
+          />
+        </NavDropDown>
+      </Side>
+    </div>
+  );
+
+  if (width <= 1530) {
+    return (
+      <Menu width={smallMenu}>
+        <Center>
+          {content}
+          <LogMobile>
+            <ProfileOptions />
+          </LogMobile>
+        </Center>
+      </Menu>
+    );
+  } else {
+    return <Center>{content}</Center>;
+  }
+}
+
+export default Sidebar;
diff --git a/apps/admin-web/src/screens/Dashboard/acm-logo.png b/apps/admin-web/src/screens/Dashboard/acm-logo.png
new file mode 100644
index 00000000..c68b2890
Binary files /dev/null and b/apps/admin-web/src/screens/Dashboard/acm-logo.png differ
diff --git a/apps/admin-web/src/screens/Dashboard/common/NavButton.tsx b/apps/admin-web/src/screens/Dashboard/common/NavButton.tsx
new file mode 100644
index 00000000..8b5b888d
--- /dev/null
+++ b/apps/admin-web/src/screens/Dashboard/common/NavButton.tsx
@@ -0,0 +1,82 @@
+import React, { FunctionComponent, useEffect, useState } from "react";
+import styled, { AnyStyledComponent } from "styled-components";
+import { useLocation, Link } from "react-router-dom";
+
+interface INavButtonProps {
+  text: string;
+  link: string;
+  image: string;
+}
+const ButtonText: AnyStyledComponent = styled.div`
+  display: flex;
+  font-family: Nunito Sans;
+  padding-left: 30px;
+  padding-top: 20px;
+  font-size: 24px;
+
+  user-select: none;
+  cursor: pointer;
+  @media (max-width: 600px) {
+    padding-left: 20px;
+    padding-top: 20px;
+    font-size: 18px;
+  }
+`;
+
+const Img = styled.img`
+  height: 20px;
+  width: 20px;
+
+  margin-right: 10px;
+
+  margin-top: 7px;
+  user-select: none;
+`;
+const ImageGroup: AnyStyledComponent = styled.div``;
+
+const NavButton: FunctionComponent<INavButtonProps> = ({
+  text,
+  link,
+  children,
+  image,
+}): JSX.Element => {
+  const [background, setBackground] = useState("#087abb");
+  const [color, setColor] = useState("white");
+  useEffect(() => {
+    if (location.pathname === link) {
+      setBackground("#f4f5f8");
+      setColor("#087abb");
+    } else {
+      setBackground("#087abb");
+      setColor("white");
+    }
+  });
+  const location = useLocation();
+
+  const active: React.CSSProperties = {
+    backgroundColor: background,
+    color: color,
+    transition: "all 0.17s ease-in-out",
+  };
+
+  return (
+    <div>
+      <div>
+        <Link to={link}>
+          <div style={active}>
+            <ImageGroup>
+              <ButtonText>
+                <Img src={image} />
+                {text}
+              </ButtonText>
+            </ImageGroup>
+
+            {children}
+          </div>
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export { NavButton };
diff --git a/apps/admin-web/src/screens/Dashboard/common/NavDropdown/NavDropDown.tsx b/apps/admin-web/src/screens/Dashboard/common/NavDropdown/NavDropDown.tsx
new file mode 100644
index 00000000..d59e76ce
--- /dev/null
+++ b/apps/admin-web/src/screens/Dashboard/common/NavDropdown/NavDropDown.tsx
@@ -0,0 +1,111 @@
+import React, { FunctionComponent, useEffect, useState } from "react";
+import styled, { AnyStyledComponent } from "styled-components";
+import { useLocation, Link } from "react-router-dom";
+
+interface IDropDownProps {
+  navTitle: string;
+  navLink: string;
+  linkData?: string;
+  image: string;
+}
+const ButtonText: AnyStyledComponent = styled.div`
+  display: flex;
+  font-family: Nunito Sans;
+  padding-left: 30px;
+  padding-top: 20px;
+  font-size: 24px;
+
+  user-select: none;
+  cursor: pointer;
+  @media (max-width: 600px) {
+    padding-left: 20px;
+    padding-top: 20px;
+    font-size: 18px;
+  }
+`;
+const Drop: AnyStyledComponent = styled.div`
+  margin-left: 50px;
+  @media (max-width: 600px) {
+    margin-left: 20px;
+  }
+`;
+
+const Img = styled.img`
+  height: 20px;
+  width: 20px;
+  margin-right: 10px;
+  margin-top: 7px;
+  display: flex;
+
+  user-select: none;
+`;
+const ImageGroup: AnyStyledComponent = styled.div``;
+
+const NavDropDown: FunctionComponent<IDropDownProps> = ({
+  navTitle,
+  navLink,
+  linkData,
+  image,
+  children,
+}): JSX.Element => {
+  const [background, setBackground] = useState("#087abb");
+  const [color, setColor] = useState("white");
+  const [display, setDisplay] = useState("none");
+  const [textColor, setTextColor] = useState("white");
+
+  useEffect(() => {
+    if (location.pathname === navLink) {
+      setBackground("#f4f5f8");
+      setColor("#087abb");
+      setDisplay("");
+      setTextColor("#0D5D8B");
+    } else {
+      setBackground("#087abb");
+      setColor("white");
+      setDisplay("none");
+      setTextColor("white");
+    }
+    if (location.pathname === linkData) {
+      setBackground("#f4f5f8");
+      setColor("#087abb");
+      setDisplay("");
+      setTextColor("#0D5D8B");
+    }
+  });
+  const location = useLocation();
+
+  const active: React.CSSProperties = {
+    backgroundColor: background,
+    color: color,
+    transition: "all 0.17s ease-in-out",
+  };
+  const text: React.CSSProperties = {
+    color: textColor,
+  };
+  const drop: React.CSSProperties = {
+    display: display,
+    transition: "all 0.17s ease-in-out",
+  };
+
+  return (
+    <div>
+      <div style={active}>
+        <Link to={navLink}>
+          <div style={text}>
+            <ImageGroup>
+              <ButtonText>
+                <Img src={image} />
+                {navTitle}
+              </ButtonText>
+            </ImageGroup>
+          </div>
+          <Drop>
+            <div style={drop}>{children}</div>
+          </Drop>
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export { NavDropDown };
diff --git a/apps/admin-web/src/screens/Dashboard/common/NavDropdown/NavDropDownContent.tsx b/apps/admin-web/src/screens/Dashboard/common/NavDropdown/NavDropDownContent.tsx
new file mode 100644
index 00000000..0d94506e
--- /dev/null
+++ b/apps/admin-web/src/screens/Dashboard/common/NavDropdown/NavDropDownContent.tsx
@@ -0,0 +1,53 @@
+import React, { FunctionComponent, useState, useEffect } from "react";
+import styled, { AnyStyledComponent } from "styled-components";
+import { useLocation, Link } from "react-router-dom";
+
+interface IDropDownContentProps {
+	dropDownTitle: string;
+	dropDownLink: string;
+	siblingCallBack: Function;
+}
+
+const DropItem: AnyStyledComponent = styled.div`
+	border-left: 1px solid #d3d3d3;
+	padding-left: 10px;
+	color: #0d5d8b;
+`;
+const NavDropDownContent: FunctionComponent<IDropDownContentProps> = ({
+	dropDownTitle,
+	dropDownLink,
+	siblingCallBack,
+}): JSX.Element => {
+	const location = useLocation();
+	const [childLink, setChildLink] = useState("");
+	const [color, setColor] = useState("#0D5D8B");
+
+	useEffect(() => {
+		if (location.pathname === dropDownLink) {
+			setColor("#000");
+		} else {
+			setColor("#0D5D8B");
+		}
+	});
+
+	const dropColor = {
+		color: color,
+	};
+	const handleClick = () => {
+		setChildLink(dropDownLink);
+	};
+
+	siblingCallBack(childLink);
+
+	return (
+		<div onClick={handleClick}>
+			<Link to={dropDownLink}>
+				<DropItem>
+					<div style={dropColor}>{dropDownTitle}</div>
+				</DropItem>
+			</Link>
+		</div>
+	);
+};
+
+export { NavDropDownContent };
diff --git a/apps/admin-web/src/screens/Events/DataCards/EventPartGraph.tsx b/apps/admin-web/src/screens/Events/DataCards/EventPartGraph.tsx
new file mode 100644
index 00000000..6db4b0a3
--- /dev/null
+++ b/apps/admin-web/src/screens/Events/DataCards/EventPartGraph.tsx
@@ -0,0 +1,86 @@
+import React from "react";
+import { Menu, Dropdown } from "antd";
+import { DownOutlined } from "@ant-design/icons";
+import styled, { AnyStyledComponent } from "styled-components";
+import { Graph } from "./Graph";
+
+const Center: AnyStyledComponent = styled.div`
+  display: flex;
+  padding-top: 20px;
+
+  padding-bottom: 40px;
+  justify-content: center;
+`;
+const Box: AnyStyledComponent = styled.div`
+  height: 140px;
+  width: 300px;
+
+  padding: 10px;
+  background-color: white;
+  border-radius: 12px;
+  padding-top: 10px;
+  display: flex;
+  box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.08);
+  font-family: Nunito Sans;
+  padding-bottom: 5px;
+`;
+const Title: AnyStyledComponent = styled.div`
+  display: inline-block;
+`;
+const DropdownStyle: AnyStyledComponent = styled.div`
+  padding-left: 30px;
+  display: inline-block;
+`;
+const Group: AnyStyledComponent = styled.div`
+  padding-left: 10px;
+`;
+const GraphStyles: AnyStyledComponent = styled.div`
+  margin-left: -15px;
+  margin-top: -20px;
+`;
+
+const DropdownButton: AnyStyledComponent = styled.button`
+  outline: 0;
+  border: 0;
+  cursor: pointer;
+  background: none;
+`;
+
+const EventPartGraph: React.SFC<{}> = (): JSX.Element => {
+  const menu = (
+    <Menu>
+      <Menu.Item>
+        <DropdownButton>N/A</DropdownButton>
+      </Menu.Item>
+      <Menu.Item>
+        <DropdownButton>N/A</DropdownButton>
+      </Menu.Item>
+    </Menu>
+  );
+  return (
+    <Center>
+      <Box>
+        <Group>
+          <Title>Event Participation</Title>
+
+          <DropdownStyle>
+            <Dropdown overlay={menu}>
+              <DropdownButton
+                className="ant-dropdown-link"
+                onClick={(e: any) => e.preventDefault()}
+              >
+                6 months
+                <DownOutlined />
+              </DropdownButton>
+            </Dropdown>
+          </DropdownStyle>
+          <GraphStyles>
+            <Graph />
+          </GraphStyles>
+        </Group>
+      </Box>
+    </Center>
+  );
+};
+
+export { EventPartGraph };
diff --git a/apps/admin-web/src/screens/Events/DataCards/Graph.tsx b/apps/admin-web/src/screens/Events/DataCards/Graph.tsx
new file mode 100644
index 00000000..944be3ac
--- /dev/null
+++ b/apps/admin-web/src/screens/Events/DataCards/Graph.tsx
@@ -0,0 +1,48 @@
+import React from "react";
+import { Line } from "react-chartjs-2";
+
+const state = {
+  labels: [""], //temp placeholder data
+  datasets: [
+    {
+      label: "",
+      fill: false,
+
+      lineTension: 0.5,
+      backgroundColor: "rgba(75,192,192,1)",
+      borderColor: "rgba(0,0,0,1)",
+      borderWidth: 2,
+      data: [0, 0, 0, 0, 0],
+    },
+  ],
+};
+
+const Graph: React.SFC<{}> = (): JSX.Element => {
+  return (
+    <div>
+      <Line
+        data={state}
+        options={{
+          scales: {
+            yAxes: [
+              {
+                ticks: {
+                  beginAtZero: true,
+                },
+              },
+            ],
+          },
+          title: {
+            display: true,
+          },
+          legend: {
+            display: false,
+            position: "right",
+          },
+        }}
+      />
+    </div>
+  );
+};
+
+export { Graph };
diff --git a/apps/admin-web/src/screens/Events/DataCards/NumberOfEventCard.tsx b/apps/admin-web/src/screens/Events/DataCards/NumberOfEventCard.tsx
new file mode 100644
index 00000000..5e7bfdce
--- /dev/null
+++ b/apps/admin-web/src/screens/Events/DataCards/NumberOfEventCard.tsx
@@ -0,0 +1,240 @@
+import React, { useState } from "react";
+import { Menu, Dropdown } from "antd";
+import {
+	DownOutlined,
+	CaretDownOutlined,
+	CaretUpOutlined,
+} from "@ant-design/icons";
+import styled, { AnyStyledComponent } from "styled-components";
+import { useEventsQuery } from "../../../generated/graphql";
+import { errorData } from "../EventList";
+
+const Box: AnyStyledComponent = styled.div`
+	height: 140px;
+	width: 300px;
+	padding: 10px;
+	user-select: none;
+	background-color: white;
+	border-radius: 12px;
+	padding-top: 10px;
+	box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.08);
+	font-family: Nunito Sans;
+	padding-bottom: 5px;
+`;
+const Title: AnyStyledComponent = styled.div`
+	display: inline-block;
+`;
+const Group: AnyStyledComponent = styled.div`
+	display: flex;
+	justify-content: center;
+`;
+const Center: AnyStyledComponent = styled.div`
+	display: flex;
+	padding-top: 20px;
+	justify-content: center;
+	padding-bottom: 40px;
+`;
+const DropdownStyle: AnyStyledComponent = styled.div`
+	padding-left: 20px;
+	display: inline-block;
+`;
+const EventNumbersGroup: AnyStyledComponent = styled.div`
+	display: flex;
+	padding-top: 20px;
+	margin-left: -20px;
+`;
+const EventNumbers: AnyStyledComponent = styled.div`
+	font-size: 30px;
+	flex: 1;
+	padding-left: 50px;
+	font-weight: bold;
+`;
+const EventNumbersText: AnyStyledComponent = styled.div`
+	font-size: 15px;
+	padding: 0;
+	display: flex;
+	margin-top: -15px;
+`;
+const EventDifference: AnyStyledComponent = styled.div`
+	display: flex;
+	flex: 1;
+	font-size: 30px;
+	font-weight: bold;
+	flex-direction: column;
+`;
+const EventDifferenceText: AnyStyledComponent = styled.div`
+	font-size: 15px;
+
+	display: flex;
+	margin-top: -15px;
+`;
+const EventDifferenceIcon: AnyStyledComponent = styled.div`
+	display: inline-block;
+	padding-left: 20px;
+`;
+const EventDifferenceNumber: AnyStyledComponent = styled.div`
+	display: inline-block;
+	padding-left: 20px;
+`;
+const DropdownButton: AnyStyledComponent = styled.button`
+	outline: 0;
+	border: 0;
+	cursor: pointer;
+	background: none;
+`;
+const todaysDate = new Date();
+const todaysISO = todaysDate.toISOString();
+
+const NumberOfEventCard: React.SFC<{}> = (): JSX.Element => {
+	const { loading, error, data }: any = useEventsQuery();
+	let events: any;
+	if (loading) {
+		events = errorData;
+	} else if (error) {
+		events = errorData;
+	} else {
+		events = data.events;
+	}
+
+	const [title, setTitle] = useState("This week ");
+	let [eventNumber, difference] = thisWeekData();
+	let carrot, fromLast;
+
+	const greenRed = {
+		color: "#59595a",
+	};
+
+	function handleClick(time: string) {
+		setTitle(time);
+	}
+
+	const menu = (
+		<Menu>
+			<Menu.Item>
+				<DropdownButton onClick={() => handleClick("This week ")}>
+					This week
+				</DropdownButton>
+			</Menu.Item>
+			<Menu.Item>
+				<DropdownButton onClick={() => handleClick("This month ")}>
+					This month
+				</DropdownButton>
+			</Menu.Item>
+		</Menu>
+	);
+
+	function thisWeekData() {
+		const thisWeekFilter = events.filter(
+			(a: any) =>
+				new Date(a.dateHosted.split("T")[0]).getTime() -
+					new Date(a.dateHosted.split("T")[0]).getDay() * 86400000 ===
+				new Date(todaysISO.split("T")[0]).getTime() -
+					new Date(todaysISO.split("T")[0]).getDay() * 86400000
+		);
+
+		const lastWeekFilter = events.filter(
+			(a: any) =>
+				new Date(a.dateHosted.split("T")[0]).getTime() -
+					new Date(a.dateHosted.split("T")[0]).getDay() * 86400000 ===
+				new Date(todaysISO.split("T")[0]).getTime() -
+					new Date(todaysISO.split("T")[0]).getDay() * 86400000 -
+					7 * 86400000
+		);
+
+		const amountOfThisWeekEvents = thisWeekFilter.length;
+		const thisWeekDifference = amountOfThisWeekEvents - lastWeekFilter.length;
+
+		return [amountOfThisWeekEvents, thisWeekDifference];
+	}
+
+	function thisMonthData() {
+		const thisMonthFilter = events.filter(
+			(c: any) =>
+				new Date(c.dateHosted.split("T")[0]).getTime() <
+				new Date(todaysISO.split("T")[0]).getTime() + 30 * 86400000
+		);
+		const thisMonthPreviousFilter = thisMonthFilter.filter(
+			(c: any) =>
+				new Date(c.dateHosted.split("T")[0]).getTime() -
+					new Date(todaysISO.split("T")[0]).getTime() >
+				0
+		);
+		const lastMonthFilter = events.filter(
+			(c: any) =>
+				new Date(c.dateHosted.split("T")[0]).getTime() >
+				new Date(todaysISO.split("T")[0]).getTime() - 30 * 86400000
+		);
+		const lastMonthPreviousFilter = lastMonthFilter.filter(
+			(c: any) =>
+				new Date(c.dateHosted.split("T")[0]).getTime() -
+					new Date(todaysISO.split("T")[0]).getTime() <
+				0
+		);
+		const amountOfThisMonthEvents = thisMonthPreviousFilter.length;
+		const thisMonthDifference =
+			amountOfThisMonthEvents - lastMonthPreviousFilter.length;
+
+		return [amountOfThisMonthEvents, thisMonthDifference];
+	}
+
+	if (title === "This week ") {
+		[eventNumber, difference] = thisWeekData();
+		fromLast = "From last week";
+	} else if (title === "This month ") {
+		[eventNumber, difference] = thisMonthData();
+		fromLast = "From last month";
+	}
+
+	if (difference > 0) {
+		greenRed.color = "#2FC022";
+		carrot = <CaretUpOutlined style={greenRed} />;
+	} else if (difference < 0) {
+		greenRed.color = "#FF0000";
+		carrot = <CaretDownOutlined style={greenRed} />;
+	} else {
+		carrot = <CaretUpOutlined />;
+		greenRed.color = "#59595a";
+	}
+	return (
+		<Center>
+			<Box>
+				<Group>
+					<Title>Number of Events</Title>
+					<DropdownStyle>
+						<Dropdown overlay={menu}>
+							<DropdownButton
+								className="ant-dropdown-link"
+								onClick={(e: any) => e.preventDefault()}
+							>
+								{title}
+
+								<DownOutlined />
+							</DropdownButton>
+						</Dropdown>
+					</DropdownStyle>
+				</Group>
+
+				<EventNumbersGroup>
+					<EventNumbers>
+						{eventNumber}
+
+						<EventNumbersText>Events</EventNumbersText>
+					</EventNumbers>
+
+					<EventDifference>
+						<div>
+							<EventDifferenceIcon>{carrot}</EventDifferenceIcon>
+
+							<EventDifferenceNumber>
+								<div style={greenRed}>{Math.abs(difference)}</div>
+							</EventDifferenceNumber>
+						</div>
+						<EventDifferenceText>{fromLast}</EventDifferenceText>
+					</EventDifference>
+				</EventNumbersGroup>
+			</Box>
+		</Center>
+	);
+};
+
+export { NumberOfEventCard };
diff --git a/apps/admin-web/src/screens/Events/DataCards/NumberOfParts.tsx b/apps/admin-web/src/screens/Events/DataCards/NumberOfParts.tsx
new file mode 100644
index 00000000..81af0646
--- /dev/null
+++ b/apps/admin-web/src/screens/Events/DataCards/NumberOfParts.tsx
@@ -0,0 +1,121 @@
+import React from "react";
+import { Menu, Dropdown } from "antd";
+import { DownOutlined } from "@ant-design/icons";
+import styled, { AnyStyledComponent } from "styled-components";
+
+const Center: AnyStyledComponent = styled.div`
+	display: flex;
+	padding-top: 20px;
+
+	padding-bottom: 40px;
+	justify-content: center;
+`;
+const Box: AnyStyledComponent = styled.div`
+	height: 140px;
+	width: 300px;
+	padding: 10px;
+	background-color: white;
+	border-radius: 12px;
+	padding-top: 10px;
+	display: flex;
+	box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.08);
+	font-family: Nunito Sans;
+	padding-bottom: 5px;
+`;
+const Title: AnyStyledComponent = styled.div``;
+const GroupOne: AnyStyledComponent = styled.div`
+	display: flex;
+	width: 100%;
+	padding-left: 10px;
+	height: 100%;
+	flex-direction: column;
+	flex: 1;
+`;
+const GroupTwo: AnyStyledComponent = styled.div`
+	display: flex;
+	flex: 1;
+	width: 100%;
+	flex-direction: column;
+	height: 100%;
+`;
+const DropdownStyle: AnyStyledComponent = styled.div`
+	padding-left: 20px;
+	display: inline-block;
+`;
+const EventPartNumbers: AnyStyledComponent = styled.div`
+	font-size: 30px;
+	font-weight: bold;
+	display: inline-block;
+`;
+const AttendeesText: AnyStyledComponent = styled.div`
+	display: inline-block;
+`;
+const AttendeesNumbers: AnyStyledComponent = styled.div`
+	font-weight: bold;
+	font-size: 21px;
+`;
+const AttendeeText: AnyStyledComponent = styled.div`
+	font-size: 15px;
+	font-weight: bold;
+	display: flex;
+	padding-left: 10px;
+	margin-top: -15px;
+`;
+
+const AttendeePercentage: AnyStyledComponent = styled.div`
+	font-size: 40px;
+	font-weight: bold;
+	padding-left: 10px;
+`;
+const AttendeeGroup: AnyStyledComponent = styled.div`
+	padding-top: 10px;
+`;
+const DropdownButton: AnyStyledComponent = styled.button`
+	outline: 0;
+	border: 0;
+	cursor: pointer;
+	background: none;
+`;
+const NumberOfParts: React.SFC<{}> = (): JSX.Element => {
+	const menu = (
+		<Menu>
+			<Menu.Item>
+				<DropdownButton>Last week </DropdownButton>
+			</Menu.Item>
+			<Menu.Item>
+				<DropdownButton>Last month </DropdownButton>
+			</Menu.Item>
+		</Menu>
+	);
+	return (
+		<Center>
+			<Box>
+				<GroupOne>
+					<Title>Event Participation</Title>
+					<EventPartNumbers>N/A</EventPartNumbers>
+					<AttendeesText>Unique Attendees</AttendeesText>
+					<AttendeesNumbers>N/A</AttendeesNumbers>
+				</GroupOne>
+				<GroupTwo>
+					<DropdownStyle>
+						<Dropdown overlay={menu}>
+							<DropdownButton
+								className="ant-dropdown-link"
+								onClick={(e: any) => e.preventDefault()}
+							>
+								Last week
+								<DownOutlined />
+							</DropdownButton>
+						</Dropdown>
+					</DropdownStyle>
+					<AttendeeGroup>
+						<AttendeePercentage>N/A</AttendeePercentage>
+						<AttendeeText>From last week</AttendeeText>
+					</AttendeeGroup>
+				</GroupTwo>
+			</Box>
+		</Center>
+	);
+};
+
+export { NumberOfParts };
diff --git a/apps/admin-web/src/screens/Events/Event.tsx b/apps/admin-web/src/screens/Events/Event.tsx
index 2ad8fec4..e379b0f6 100644
--- a/apps/admin-web/src/screens/Events/Event.tsx
+++ b/apps/admin-web/src/screens/Events/Event.tsx
@@ -1,51 +1,203 @@
 import React, { useState } from "react";
 
-import styled, { AnyStyledComponent } from "styled-components";
+import styled from "styled-components";
 
 import { GET_EVENTS } from "./helpers";
 import { useDeleteEventMutation } from "../../generated/graphql";
 import { IEvent } from "./interfaces";
 import { EventFormModal } from "./EventFormModal";
-import { QRModal } from "./QRModal"
-import { Button } from "antd";
+import { QRModal } from "./QRModal";
 
 interface IEventProps {
   event: IEvent;
   index: number;
   key: number;
 }
+const Box = styled.div`
+  height: 226px;
+  max-width: 912px;
+  background-color: white;
+  border-radius: 12px;
+  padding-top: 20px;
+  box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.08);
+  font-family: Nunito Sans;
+  padding-bottom: 20px;
+  @media (max-width: 900px) {
+    width: auto;
+  }
+`;
+const Space = styled.div`
+  padding-bottom: 15px;
+`;
+const Constraint = styled.div`
+  display: flex;
+  height: 100%;
+  max-width: 612px;
+  margin: auto;
+  display: flex;
+  transition: all 0.2s ease-in-out;
+  flex-direction: column;
 
-const EventWrapper: AnyStyledComponent = styled.li`
+  @media (max-width: 900px) {
+    padding: 5px;
+  }
+  @media (max-width: 750px) {
+    max-width: 800px;
+  }
+`;
+const Group = styled.div`
   display: flex;
-  margin: 20px 0;
-  justify-content: space-between;
+  align-items: center;
+  @media (max-width: 750px) {
+  }
 `;
-const EventContent: AnyStyledComponent = styled.div`
+const ButtonGroup = styled.div`
   display: flex;
   align-items: center;
+  @media (max-width: 750px) {
+    justify-content: center;
+  }
 `;
-const EventFlier: AnyStyledComponent = styled.img`
-  height: 88px;
-  min-width: 68px;
-  margin-right: 20px;
+const Title = styled.div`
+  display: inline-block;
+  font-size: 24px;
+  font-family: Nunito Sans;
+  padding-right: 20px;
+  font-weight: 300;
+  color: #333333;
+  @media (max-width: 900px) {
+    font-size: 18px;
+    padding-right: 10px;
+  }
+  @media (max-width: 380px) {
+    font-size: 16px;
+  }
+  @media (max-width: 300px) {
+    font-size: 14px;
+  }
 `;
-const EventDetails: AnyStyledComponent = styled.div``;
-const EventHighLevel: AnyStyledComponent = styled.div`
+
+const Time = styled.div`
+  font-weight: bold;
+  font-size: 18px;
+  font-family: Nunito Sans;
   display: flex;
+  @media (max-width: 900px) {
+    font-size: 14px;
+  }
+  @media (max-width: 380px) {
+    font-size: 11px;
+  }
+`;
+const Description = styled.div`
+  font-weight: 300;
+  font-size: 18px;
+  font-family: Nunito Sans;
+  padding-bottom: 20px;
+  color: #555555;
+  word-wrap: break-word;
+  @media (max-width: 900px) {
+    font-size: 14px;
+  }
+  @media (max-width: 380px) {
+    font-size: 11px;
+  }
 `;
-const EventTitle: AnyStyledComponent = styled.h3`
-  margin: 0;
-  line-height: 20px;
+const Edit = styled.button`
+  display: inline-block;
+  background: #2d9cdb;
+  backdrop-filter: blur(4px);
+  width: 120px;
+  height: 34px;
+  font-weight: bold;
+  font-size: 17px;
+  border: none;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+  outline: 0;
+  border-radius: 40px;
+  color: #ffffff;
+  margin-right: 50px;
+  &:hover {
+    background: #087abb;
+  }
+  @media (max-width: 500px) {
+    width: 100px;
+    height: 29px;
+    font-size: 13px;
+  }
 `;
-const EventDate: AnyStyledComponent = styled.p`
-  padding: 0 6px;
-  margin: 0 0 0 20px;
-  border-radius: 20px;
-  border: 2px solid blue;
+const Remove = styled.button`
+  display: inline-block;
+  color: #696969;
+  font-size: 17px;
+  border: none;
+  border-radius: 40px;
+  background-color: white;
+  width: 120px;
+  cursor: pointer;
+  outline: 0;
+  height: 34px;
+  @media (max-width: 500px) {
+    width: 100px;
+    height: 29px;
+    font-size: 13px;
+  }
+`;
+const Fly = styled.img`
+  height: 160px;
+  width: 106px;
+  float: left;
+  transition: all 0.2s ease-in-out;
+  margin-left: 25px;
+  &:hover {
+    box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 8px 0px;
+  }
+  @media (max-width: 900px) {
+    height: 130px;
+    width: 90px;
+  }
+  @media (max-width: 760px) {
+    display: none;
+  }
+`;
+
+const Link = styled.a`
+  display: inline-block;
+  padding-left: 5px;
+  padding-right: 5px;
+  font-size: 12px;
+  font-family: Nunito Sans;
+  border-radius: 50px;
+  color: white;
+  transition: all 0.2s ease-in-out;
+  background: #0392ce;
+  margin-left: 10px;
+  &:hover {
+    background: #087abb;
+    color: white;
+  }
+`;
+const QRButton = styled.button`
+  display: inline-block;
+  padding-left: 5px;
+  padding-right: 5px;
+  font-size: 12px;
+  font-family: Nunito Sans;
+  border-radius: 50px;
+  color: white;
+  transition: all 0.2s ease-in-out;
+  background: #0392ce;
+  margin-left: 10px;
+  border: 0;
+  outline: 0;
+  cursor: pointer
+	&:hover {
+    background: #087abb;
+    color: white;
+    cursor: pointer;
+  }
 `;
-const EventMidLevel: AnyStyledComponent = styled.div``;
-const EventDescription: AnyStyledComponent = styled.div``;
-const EventLowLevel: AnyStyledComponent = styled.div``;
 
 const Event: React.FC<IEventProps> = (props: IEventProps): JSX.Element => {
   const [deleteEvent] = useDeleteEventMutation();
@@ -69,6 +221,10 @@ const Event: React.FC<IEventProps> = (props: IEventProps): JSX.Element => {
     setFormVisible(true);
   };
 
+  const handleQR: () => void = (): void => {
+    setQRVisible(true);
+  };
+
   const handleDelete: () => void = (): void => {
     deleteEvent({
       refetchQueries: [{ query: GET_EVENTS }],
@@ -76,62 +232,97 @@ const Event: React.FC<IEventProps> = (props: IEventProps): JSX.Element => {
     });
   };
 
-  const handleQR: () => void = (): void => {
-    setQRVisible(true);
-  };
-
   // const handleAdvert: any = (): any => {};
 
   // const handleQR: any = (): any => {};
 
   const { event }: any = props;
+  const end = formatDate(event.dateExpire).slice(-8);
+  const start = formatDate(event.dateHosted);
+  function truncate(str: string, n: number, useWordBoundary: boolean) {
+    if (str.length <= n) {
+      return str;
+    }
+    const subString = str.substr(0, n - 1);
+    return `${
+      useWordBoundary
+        ? subString.substr(0, subString.lastIndexOf(" "))
+        : subString
+    }...`;
+  }
+
+  const branch = {
+    display: "inline-block",
+    paddingLeft: "5px",
+    paddingRight: "5px",
+    fontSize: "12px",
+    fontFamily: "Nunito Sans",
+    borderRadius: "50px",
+
+    backgroundColor: "",
+  };
+
+  if (event.hostSig.name === "Women") {
+    branch.backgroundColor = "#f5deb3";
+  } else if (event.hostSig.name === "Security") {
+    branch.backgroundColor = "#ffa500";
+  } else if (event.hostSig.name === "Hack") {
+    branch.backgroundColor = "#7fffd4";
+  } else if (event.hostSig.name === "Competition") {
+    branch.backgroundColor = "#ff8888";
+  } else if (event.hostSig.name === "Web") {
+    branch.backgroundColor = "#87ceeb";
+  } else if (event.hostSig.name === "Data") {
+    branch.backgroundColor = "#e6e6fa";
+  } else if (event.hostSig.name === "Game") {
+    branch.backgroundColor = "#ffc0cb";
+  }
 
   return (
-    <EventWrapper>
-      <EventContent>
-        <EventFlier src={event.flierLink} alt={"Flier"} />
-        <EventDetails>
-          <EventHighLevel>
-            <EventTitle>
-              ACM {event.hostSig.name}: {event.eventTitle}
-            </EventTitle>
-            <EventDate>
-              {formatDate(event.dateHosted)}
-              {event.dateHosted !== event.dateExpire &&
-                " - " + formatDate(event.dateExpire)}
-            </EventDate>
-          </EventHighLevel>
-          <EventMidLevel>
-            {event.location}
-            {event.eventLink && (
-              <span>
-                {" "}
-                - <a href={event.eventLink}>Link</a>
-              </span>
+    <Space>
+      <QRModal visible={QRVisible} setVisible={setQRVisible} event={event} />
+      <Box>
+        {event.flierLink === null ? (
+          ""
+        ) : (
+          <a rel="noopener noreferrer" target="_blank" href={event.flierLink}>
+            <Fly src={event.flierLink} alt="Flier" />
+          </a>
+        )}
+
+        <Constraint>
+          <Group>
+            <Title>{truncate(event.eventTitle, 25, false)}</Title>
+            <div style={branch}>{event.hostSig.name}</div>
+            {event.eventLink === null ? (
+              ""
+            ) : (
+              <Link
+                rel="noopener noreferrer"
+                target="_blank"
+                href={event.eventLink}
+              >
+                Link
+              </Link>
             )}
-          </EventMidLevel>
-          <EventDescription>{event.description}</EventDescription>
-          <EventLowLevel>Created {formatDate(event.dateCreated)}</EventLowLevel>
-        </EventDetails>
-      </EventContent>
-      <div>
-        <div>
-          <Button onClick={handleEdit}>Edit</Button>
-          <Button onClick={handleDelete}>Delete</Button>
-          <Button onClick={handleQR}>QR</Button>
-        </div>
-      </div>
+            <QRButton onClick={handleQR}>QR</QRButton>
+          </Group>
+          <Time>
+            {start} -{end} @ {truncate(event.location, 15, false)}
+          </Time>
+          <Description>{truncate(event.description, 128, false)}</Description>
+          <ButtonGroup>
+            <Edit onClick={handleEdit}>Edit</Edit>
+            <Remove onClick={handleDelete}>Remove</Remove>
+          </ButtonGroup>
+        </Constraint>
+      </Box>
       <EventFormModal
         formVisible={formVisible}
         setFormVisible={setFormVisible}
         event={event}
       />
-      <QRModal
-        visible={QRVisible}
-        setVisible={setQRVisible}
-        event={event}
-      />
-    </EventWrapper>
+    </Space>
   );
 };
 
@@ -139,6 +330,7 @@ const Event: React.FC<IEventProps> = (props: IEventProps): JSX.Element => {
  * Buttons to be added
         <div>
           <Button onClick={handleAdvert}>Advert</Button>
+          <Button onClick={handleQR}>QR</Button>
         </div>
 */
 
diff --git a/apps/admin-web/src/screens/Events/EventData.tsx b/apps/admin-web/src/screens/Events/EventData.tsx
new file mode 100644
index 00000000..2fc2a802
--- /dev/null
+++ b/apps/admin-web/src/screens/Events/EventData.tsx
@@ -0,0 +1,28 @@
+import React from "react";
+import styled, { AnyStyledComponent } from "styled-components";
+import { NumberOfEventCard } from "./DataCards/NumberOfEventCard";
+import { NumberOfParts } from "./DataCards/NumberOfParts";
+// import { EventPartGraph } from "./DataCards/EventPartGraph"; //taking this out until fully implented
+
+const Group: AnyStyledComponent = styled.div`
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	width: 100%;
+`;
+const Center: AnyStyledComponent = styled.div``;
+const EventData: React.SFC<{}> = (): JSX.Element => {
+	return (
+		<div>
+			<Center>
+				<Group>
+					<NumberOfParts />
+					<NumberOfEventCard />
+					{/* <EventPartGraph /> taking this out until fully implented */}
+				</Group>
+			</Center>
+		</div>
+	);
+};
+
+export { EventData };
diff --git a/apps/admin-web/src/screens/Events/EventFormModal.tsx b/apps/admin-web/src/screens/Events/EventFormModal.tsx
index 11fc62e1..4dd60d9d 100644
--- a/apps/admin-web/src/screens/Events/EventFormModal.tsx
+++ b/apps/admin-web/src/screens/Events/EventFormModal.tsx
@@ -28,9 +28,9 @@ const EventFormModal: React.FC<IEventFormModalProps> = ({
       footer={null}
       onCancel={handleCancel}
     >
-      <EventForm eventBase={event}/>
+    <EventForm eventBase={event} />
     </Modal>
   );
 };
 
-export { EventFormModal };
\ No newline at end of file
+export { EventFormModal };
diff --git a/apps/admin-web/src/screens/Events/EventList.tsx b/apps/admin-web/src/screens/Events/EventList.tsx
index 69357630..3476540c 100644
--- a/apps/admin-web/src/screens/Events/EventList.tsx
+++ b/apps/admin-web/src/screens/Events/EventList.tsx
@@ -1,52 +1,251 @@
 import React from "react";
-
 import styled, { AnyStyledComponent } from "styled-components";
-
 import { Event } from "./Event";
-
-import { useEventsQuery } from "../../generated/graphql";
-
 import { IEvent } from "./interfaces";
 
 const PageWrapper: AnyStyledComponent = styled.div`
-  margin: 0 auto;
   padding: 15px;
   max-width: 800px;
+  @media (max-width: 750px) {
+    margin: 0 auto;
+  }
 `;
 const List: AnyStyledComponent = styled.ul`
   padding: 0;
   margin: 0;
 `;
+interface IQueryProps {
+  loading: any;
+  error: any;
+  data: any;
+}
+const todaysDate = new Date();
+const todaysISO = todaysDate.toISOString();
+const errorData = [
+  // This allows Event data to error to this if it cannot fetch
+  // This will never show as any type of event
+  {
+    id: 1,
+    dateCreated: "2019-10-03T18:59:21.955Z",
+    dateHosted: "2019-10-03T18:59:21.955Z",
+    dateExpire: "2019-10-03T18:59:21.955Z",
+    hostSig: {
+      name: "Women",
+    },
+    eventTitle: "Bob Ross Painting Night",
+    description:
+      "Join ACM-W and ACM Hack for a night of painting happy little trees while following a Bob Ross tutorial with friends. Not very good at painting? Well, no fear! Bob Ross was an American painter known for hosting a tv series on painting techniques for beginners. Easels and paint will be provided, but you must RSVP at https://tinyurl.com/y52roqb6.",
+    location: "Toomey 254",
+    flierLink: "https://cdn.mstacm.org/events/acmw_bob_ross_painting_night.png",
+    eventLink: "https://cdn.mstacm.org/events/acmw_bob_ross_painting_night.png",
+  },
+];
 
-const EventList: React.SFC<{}> = (): JSX.Element => {
-  const { loading, error, data }: any = useEventsQuery();
-
+const PrevioustList: React.SFC<IQueryProps> = ({
+  loading,
+  error,
+  data,
+}): JSX.Element => {
   if (loading) {
     return (
       <PageWrapper>
         <h3>Loading...</h3>
       </PageWrapper>
     );
-  } else if (error) {
+  }
+  if (error) {
     return (
       <PageWrapper>
         <h3>{error.toString()}</h3>
       </PageWrapper>
     );
-  } else {
-    const events: IEvent[] = data.events;
-    const listElements: JSX.Element[] = events.map(
-      (event: IEvent, index: number) => (
-        <Event event={event} index={index} key={event.id} />
-      )
+  }
+  const events: IEvent[] = data;
+
+  events
+    .sort(
+      (a: any, b: any) =>
+        new Date(a.dateHosted).getTime() - new Date(b.dateHosted).getTime() // sorts by upcoming - later
+    )
+    .reverse();
+  const previousEventFilter = events.filter(
+    (c: any) =>
+      new Date(c.dateHosted).getTime() -
+        new Date(todaysISO.split("T")[0]).getTime() < // Filters out dates that have passed
+      0
+  );
+  const listElements: JSX.Element[] = previousEventFilter.map(
+    (event: IEvent, index: number) => (
+      <Event event={event} index={index} key={event.id} />
+    )
+  );
+
+  return (
+    <PageWrapper>
+      <List>
+        {listElements.length < 1 ? "No previous events" : listElements}
+      </List>
+    </PageWrapper>
+  );
+};
+
+const ThisWeekList: React.SFC<IQueryProps> = ({
+  loading,
+  error,
+  data,
+}): JSX.Element => {
+  if (loading) {
+    return (
+      <PageWrapper>
+        <h3>Loading...</h3>
+      </PageWrapper>
+    );
+  }
+  if (error) {
+    return (
+      <PageWrapper>
+        <h3>{error.toString()}</h3>
+      </PageWrapper>
     );
+  }
+  const events: IEvent[] = data;
+  events.sort(
+    (a: any, b: any) =>
+      new Date(a.dateHosted).getTime() - new Date(b.dateHosted).getTime() // sorts by upcoming - later
+  );
+
+  const thisWeekEventFilter = events.filter(
+    (a: any) =>
+      new Date(a.dateHosted.split("T")[0]).getTime() -
+        new Date(a.dateHosted.split("T")[0]).getDay() * 86400000 ===
+      new Date(todaysISO.split("T")[0]).getTime() -
+        new Date(todaysISO.split("T")[0]).getDay() * 86400000 // Finds the monday of our week and the monday of the the events week and tests if its equal
+  );
+  const passedEventFilter = thisWeekEventFilter.filter(
+    (c: any) =>
+      new Date(c.dateHosted).getTime() -
+        new Date(todaysISO.split("T")[0]).getTime() > // Filters out dates that have passed
+      0
+  );
 
+  const listElements: JSX.Element[] = passedEventFilter.map(
+    (event: IEvent, index: number) => (
+      <Event event={event} index={index} key={event.id} />
+    )
+  );
+
+  return (
+    <PageWrapper>
+      <List>
+        {listElements.length < 1
+          ? "No upcoming events this week"
+          : listElements}
+      </List>
+    </PageWrapper>
+  );
+};
+const NextWeekList: React.SFC<IQueryProps> = ({
+  loading,
+  error,
+  data,
+}): JSX.Element => {
+  if (loading) {
     return (
       <PageWrapper>
-        <List>{listElements}</List>
+        <h3>Loading...</h3>
+      </PageWrapper>
+    );
+  }
+  if (error) {
+    return (
+      <PageWrapper>
+        <h3>{error.toString()}</h3>
       </PageWrapper>
     );
   }
+  const events: IEvent[] = data;
+  events.sort(
+    (a: any, b: any) =>
+      new Date(a.dateHosted).getTime() - new Date(b.dateHosted).getTime() // sorts by upcoming - later
+  );
+
+  const nextWeekEventFilter = events.filter(
+    (a: any) =>
+      new Date(a.dateHosted.split("T")[0]).getTime() -
+        new Date(a.dateHosted.split("T")[0]).getDay() * 86400000 ===
+      new Date(todaysISO.split("T")[0]).getTime() +
+        7 * 86400000 -
+        new Date(todaysISO.split("T")[0]).getDay() * 86400000 // Finds our monday and event monday but 7 days in the future
+  );
+  const passedEventFilter = nextWeekEventFilter.filter(
+    (c: any) =>
+      new Date(c.dateHosted).getTime() -
+        new Date(todaysISO.split("T")[0]).getTime() >
+      0
+  );
+
+  const listElements: JSX.Element[] = passedEventFilter.map(
+    (event: IEvent, index: number) => (
+      <Event event={event} index={index} key={event.id} />
+    )
+  );
+
+  return (
+    <PageWrapper>
+      <List>
+        {listElements.length < 1
+          ? "No upcoming events next week"
+          : listElements}
+      </List>
+    </PageWrapper>
+  );
 };
 
-export { EventList };
+const Future: React.SFC<IQueryProps> = ({
+  loading,
+  error,
+  data,
+}): JSX.Element => {
+  if (loading) {
+    return (
+      <PageWrapper>
+        <h3>Loading...</h3>
+      </PageWrapper>
+    );
+  }
+  if (error) {
+    return (
+      <PageWrapper>
+        <h3>{error.toString()}</h3>
+      </PageWrapper>
+    );
+  }
+  const events: IEvent[] = data;
+  events.sort(
+    (a: any, b: any) =>
+      new Date(a.dateHosted).getTime() - new Date(b.dateHosted).getTime() // sorts by new dates to old dates
+  );
+
+  const futureEventFilter = events.filter(
+    (c: any) =>
+      new Date(c.dateHosted.split("T")[0]).getTime() >
+      new Date(todaysISO.split("T")[0]).getTime() +
+        13 * 86400000 -
+        new Date(todaysISO.split("T")[0]).getDay() * 86400000 // Filters outs previous, this week, and next week dates
+  );
+
+  const listElements: JSX.Element[] = futureEventFilter.map(
+    (event: IEvent, index: number) => (
+      <Event event={event} index={index} key={event.id} />
+    )
+  );
+
+  return (
+    <PageWrapper>
+      <List>
+        {listElements.length < 1 ? "No upcoming future events" : listElements}
+      </List>
+    </PageWrapper>
+  );
+};
+export { PrevioustList, ThisWeekList, NextWeekList, Future, errorData };
diff --git a/apps/admin-web/src/screens/Events/Header.tsx b/apps/admin-web/src/screens/Events/Header.tsx
index e070bf3b..03592ce4 100644
--- a/apps/admin-web/src/screens/Events/Header.tsx
+++ b/apps/admin-web/src/screens/Events/Header.tsx
@@ -1,30 +1,121 @@
 import React, { useState } from "react";
 import styled from "styled-components";
-
-import { Button } from "antd";
+import { ProfileOptions } from "../Dashboard/Profile";
 import { EventFormModal } from "./EventFormModal";
 
 const Wrapper: any = styled.div`
-  display: flex;
-  justify-content: space-between;
+	display: flex;
 `;
 
-const Header: React.SFC<{}> = (): JSX.Element => {
-  const [formVisible, setFormVisible] = useState(false);
-  const addEvent: () => void = (): void => {
-    setFormVisible(true);
-  };
+const HeaderText = styled.div`
+	font-weight: bold;
+	font-size: 64px;
+	padding-bottom: 15px;
+	color: #333333;
+	display: flex;
+	padding-right: 25px;
+	transition: all 0.2s ease-in-out;
+	@media (max-width: 900px) {
+		font-size: 40px;
+	}
+	@media (max-width: 700px) {
+		font-size: 30px;
+	}
+	@media (max-width: 550px) {
+		font-size: 25px;
+	}
+	@media (max-width: 450px) {
+		font-size: 23px;
+	}
+	@media (max-width: 380px) {
+		font-size: 20px;
+	}
+	@media (max-width: 340px) {
+		font-size: 17px;
+	}
+`;
+const Group = styled.div`
+	display: flex;
+	align-items: center;
+`;
+const Log = styled.div`
+	display: inline-block;
+	@media (max-width: 1530px) {
+		display: none;
+	}
+`;
+const AddEventButton = styled.button`
+	display: inline-block;
+	background: #2d9cdb;
+	backdrop-filter: blur(4px);
+	width: 155px;
+	cursor: pointer;
+	height: 43px;
+	outline: 0;
+	font-weight: bold;
+	font-size: 17px;
+	border: none;
+	border-radius: 40px;
+	transition: all 0.2s ease-in-out;
+	color: #ffffff;
+	margin-right: 50px;
+	&:hover {
+		background: #087abb;
+	}
+	@media (max-width: 900px) {
+		margin-top: -15px;
+	}
+	@media (max-width: 700px) {
+		width: 125px;
+		height: 35px;
+		font-size: 15px;
+	}
+	@media (max-width: 550px) {
+		width: 111px;
+		height: 29px;
+		font-size: 14px;
+	}
+	@media (max-width: 450px) {
+		width: 100px;
+		height: 24px;
+		font-size: 14px;
+	}
+	@media (max-width: 380px) {
+		width: 90px;
+		height: 20px;
+		font-size: 13px;
+	}
+`;
+const UpcomingHeader: React.SFC<{}> = (): JSX.Element => {
+	const [formVisible, setFormVisible] = useState(false);
+	const addEvent: () => void = (): void => {
+		setFormVisible(true);
+	};
 
-  return (
-    <Wrapper>
-      <h1>Events</h1>
-      <Button onClick={addEvent}>Add Event</Button>
-      <EventFormModal
-        formVisible={formVisible}
-        setFormVisible={setFormVisible}
-      />
-    </Wrapper>
-  );
+	return (
+		<Wrapper>
+			<Group>
+				<HeaderText>Upcoming Events</HeaderText>
+				<AddEventButton onClick={addEvent}>Add Event</AddEventButton>
+				<Log>
+					<ProfileOptions />
+				</Log>
+			</Group>
+			<EventFormModal
+				formVisible={formVisible}
+				setFormVisible={setFormVisible}
+			/>
+		</Wrapper>
+	);
+};
+const PreviousHeader: React.SFC<{}> = (): JSX.Element => {
+	return (
+		<Wrapper>
+			<Group>
+				<HeaderText>Previous Events</HeaderText>
+			</Group>
+		</Wrapper>
+	);
 };
 
-export { Header };
+export { UpcomingHeader, PreviousHeader };
diff --git a/apps/admin-web/src/screens/Events/Previous.tsx b/apps/admin-web/src/screens/Events/Previous.tsx
new file mode 100644
index 00000000..0f71ef2b
--- /dev/null
+++ b/apps/admin-web/src/screens/Events/Previous.tsx
@@ -0,0 +1,44 @@
+import React from "react";
+import styled, { AnyStyledComponent } from "styled-components";
+import { useEventsQuery } from "../../generated/graphql";
+import { PrevioustList } from "./EventList";
+
+import { PreviousHeader } from "./Header";
+import { IEvent } from "./interfaces";
+
+const PageWrapper: AnyStyledComponent = styled.div`
+  padding-left: 70px;
+  padding-top: 50px;
+  @media (max-width: 900px) {
+    padding-top: 50px;
+    padding-left: 0;
+  }
+`;
+const Center: AnyStyledComponent = styled.div`
+  @media (max-width: 900px) {
+    display: flex;
+    justify-content: center;
+  }
+`;
+
+const Previous: React.SFC<{}> = (): JSX.Element => {
+  const result: any = useEventsQuery();
+
+  let data: IEvent[] = [];
+  if (result.data && result.data.events) {
+    data = result.data.events as IEvent[];
+  }
+  const loading = result.loading;
+  const error = result.error;
+
+  return (
+    <PageWrapper>
+      <Center>
+        <PreviousHeader />
+      </Center>
+      <PrevioustList loading={loading} error={error} data={data} />
+    </PageWrapper>
+  );
+};
+
+export { Previous };
diff --git a/apps/admin-web/src/screens/Events/QRModal.tsx b/apps/admin-web/src/screens/Events/QRModal.tsx
index fd48fbe4..369d6ed1 100644
--- a/apps/admin-web/src/screens/Events/QRModal.tsx
+++ b/apps/admin-web/src/screens/Events/QRModal.tsx
@@ -3,49 +3,49 @@ import React from "react";
 import { IEvent } from "./interfaces";
 import Modal from "antd/lib/modal/Modal";
 
-var QRCode = require('qrcode.react');
+var QRCode = require("qrcode.react");
 
 interface IQRModalProps {
-  visible: boolean;
-  setVisible: (arg: boolean) => void;
-  event?: IEvent;
+	visible: boolean;
+	setVisible: (arg: boolean) => void;
+	event?: IEvent;
 }
 
 const QRModal: React.FC<IQRModalProps> = ({
-  visible,
-  setVisible,
-  event,
+	visible,
+	setVisible,
+	event,
 }: IQRModalProps): JSX.Element => {
-  const handleCancel: () => void = (): void => {
-    setVisible(false);
-  };
-
-  const registrationLink: string = "https://mstacm.org/e/" + event?.urlKey; 
-
-  if(event?.urlKey == null) {
-    return (
-      <Modal
-        title={"Registration Link Error"}
-        visible={visible}
-        footer={null}
-        onCancel={handleCancel}
-      >
-        <h2>This event does not have a registration URL key.</h2>
-      </Modal>
-    );
-  }
-
-  return (
-    <Modal
-      title={"Registration Link"}
-      visible={visible}
-      footer={null}
-      onCancel={handleCancel}
-    >
-      <h2>{registrationLink}</h2>
-      <QRCode value={registrationLink} />
-    </Modal>
-  );
+	const handleCancel: () => void = (): void => {
+		setVisible(false);
+	};
+
+	const registrationLink: string = "https://mstacm.org/e/" + event?.urlKey;
+
+	if (event?.urlKey == null) {
+		return (
+			<Modal
+				title={"Registration Link Error"}
+				visible={visible}
+				footer={null}
+				onCancel={handleCancel}
+			>
+				<h2>This event does not have a registration URL key.</h2>
+			</Modal>
+		);
+	}
+
+	return (
+		<Modal
+			title={"Registration Link"}
+			visible={visible}
+			footer={null}
+			onCancel={handleCancel}
+		>
+			<h2>{registrationLink}</h2>
+			<QRCode value={registrationLink} />
+		</Modal>
+	);
 };
 
-export { QRModal };
\ No newline at end of file
+export { QRModal };
diff --git a/apps/admin-web/src/screens/Events/Upcoming.tsx b/apps/admin-web/src/screens/Events/Upcoming.tsx
new file mode 100644
index 00000000..21603bcd
--- /dev/null
+++ b/apps/admin-web/src/screens/Events/Upcoming.tsx
@@ -0,0 +1,127 @@
+import React from "react";
+import gql from "graphql-tag";
+
+import { EventData } from "./EventData";
+import styled, { AnyStyledComponent } from "styled-components";
+import { Collapse } from "./common/Collapse";
+import { NextWeekList } from "./EventList";
+import { ThisWeekList } from "./EventList";
+import { Future } from "./EventList";
+import { UpcomingHeader } from "./Header";
+
+import {
+  Event as IEvent,
+  GetCurrentEventsQueryHookResult,
+  useGetCurrentEventsQuery,
+} from "../../generated/graphql";
+export const GET_CURRENT_EVENTS_QUERY: any = gql`
+  query getCurrentEvents {
+    currentEvents {
+      id
+      dateCreated
+      dateHosted
+      dateExpire
+      hostSig {
+        name
+      }
+      eventTitle
+      description
+      location
+      flierLink
+      eventLink
+    }
+  }
+`;
+
+
+const Grid: AnyStyledComponent = styled.div`
+  height: 100vh;
+  display: grid;
+  width: 100%;
+  margin: auto;
+  position: relative;
+  grid-template-columns: repeat(16, 1fr);
+  grid-template-areas: "c c c c c c c c c c c c t t t t";
+  @media (max-width:  1300px) {
+    grid-template-columns: 1fr
+    grid-template-areas:     
+            "c"
+            "t";
+  }
+`;
+
+const EventDataLayout: AnyStyledComponent = styled.div`
+  background-color: white;
+  grid-area: t;
+  height: 100%;
+  width: 100%;
+  @media (max-width: 1300px) {
+    display: none;
+  }
+`;
+const PageWrapper: AnyStyledComponent = styled.div`
+  padding-left: 70px;
+  padding-top: 50px;
+  @media (max-width: 900px) {
+    padding-top: 50px;
+    padding-left: 0;
+  }
+`;
+const Center: AnyStyledComponent = styled.div`
+  @media (max-width: 900px) {
+    display: flex;
+    justify-content: center;
+  }
+`;
+const Content: AnyStyledComponent = styled.div`
+  grid-area: c;
+  @media (max-width: 1500px) {
+    grid-row: 1;
+  }
+`;
+
+const Upcoming: React.SFC<{}> = (): JSX.Element => {
+  // const {
+  //   loading,
+  //   error,
+  //   data,
+  // }: GetCurrentEventsQueryHookResult = useGetCurrentEventsQuery();
+
+  const result: GetCurrentEventsQueryHookResult = useGetCurrentEventsQuery();
+  let data: IEvent[] = [];
+  if (result.data && result.data.currentEvents) {
+    data = result.data.currentEvents as IEvent[];
+  }
+  const loading = result.loading;
+  const error = result.error;
+
+  return (
+    <Grid>
+      <Content>
+        <PageWrapper>
+          <Center>
+            <UpcomingHeader />
+          </Center>
+
+          <Collapse
+            week="This week"
+            list={<ThisWeekList loading={loading} error={error} data={data} />}
+          />
+          <Collapse
+            week="Next week"
+            list={<NextWeekList loading={loading} error={error} data={data} />}
+          />
+          <Collapse
+            week="Future"
+            list={<Future loading={loading} error={error} data={data} />}
+          />
+        </PageWrapper>
+      </Content>
+      <EventDataLayout>
+        <EventData />
+      </EventDataLayout>
+    </Grid>
+  );
+};
+
+export { Upcoming };
diff --git a/apps/admin-web/src/screens/Events/common/Collapse.tsx b/apps/admin-web/src/screens/Events/common/Collapse.tsx
new file mode 100644
index 00000000..dc1dfb7a
--- /dev/null
+++ b/apps/admin-web/src/screens/Events/common/Collapse.tsx
@@ -0,0 +1,72 @@
+import React, { useState } from "react";
+import styled, { AnyStyledComponent } from "styled-components";
+
+const SubTitle: AnyStyledComponent = styled.div`
+  font-size: 30px;
+  padding-left: 10px;
+  display: inline-block;
+
+  @media (max-width: 450px) {
+    font-size: 17px;
+  }
+`;
+const CollapseButton: AnyStyledComponent = styled.button`
+  display: inline-block;
+  color: #696969;
+  cursor: pointer;
+  font-size: 17px;
+  border: none;
+  border-radius: 40px;
+  outline: 0;
+  background-color: #f4f5f8;
+  width: 120px;
+  height: 34px;
+  @media (max-width: 500px) {
+    width: 100px;
+    height: 29px;
+
+    font-size: 13px;
+  }
+`;
+const Group: AnyStyledComponent = styled.div`
+  display: flex;
+  user-select: none;
+
+  align-items: center;
+`;
+
+interface CollapseProps {
+  week: string;
+  list: JSX.Element;
+}
+
+const Collapse: React.SFC<CollapseProps> = ({
+  list,
+  week,
+}: CollapseProps): JSX.Element => {
+  const [open, setIsOpen] = useState(false);
+  const style = {
+    collapsed: {
+      display: "none",
+    },
+    expanded: {
+      display: "block",
+    },
+  };
+
+  return (
+    <div>
+      <Group>
+        <SubTitle>{week}</SubTitle>
+        <CollapseButton onClick={() => setIsOpen(!open)}>
+          {open ? "Show" : "Collapse"}
+        </CollapseButton>
+      </Group>
+      <div style={open ? style.collapsed : style.expanded} aria-expanded={open}>
+        {list}
+      </div>
+    </div>
+  );
+};
+
+export { Collapse };
diff --git a/apps/admin-web/src/screens/Events/index.tsx b/apps/admin-web/src/screens/Events/index.tsx
deleted file mode 100644
index d39653cf..00000000
--- a/apps/admin-web/src/screens/Events/index.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from "react";
-import styled, { AnyStyledComponent } from "styled-components";
-
-import { EventList } from "./EventList";
-import { Header } from "./Header";
-
-const PageWrapper: AnyStyledComponent = styled.div`
-  margin: 0 auto;
-  padding: 15px;
-  max-width: 800px;
-`;
-
-const Events: React.SFC<{}> = (): JSX.Element => {
-  return (
-    <PageWrapper>
-      <Header />
-      <EventList />
-    </PageWrapper>
-  );
-};
-
-export { Events };
diff --git a/apps/admin-web/src/screens/Membership/index.tsx b/apps/admin-web/src/screens/Membership/index.tsx
index 2799bae5..20ab08f3 100644
--- a/apps/admin-web/src/screens/Membership/index.tsx
+++ b/apps/admin-web/src/screens/Membership/index.tsx
@@ -1,33 +1,59 @@
 import React, { useState, useEffect } from "react";
 
-import { Table, Input, Dropdown, Button, Menu, Modal, DatePicker, Checkbox, message } from "antd";
-import { SearchOutlined, UserOutlined, LockOutlined, UnlockOutlined } from "@ant-design/icons";
+import { Table, Input, Button, Modal, DatePicker, message } from "antd";
+import { SearchOutlined } from "@ant-design/icons";
 import Highlighter from "react-highlight-words";
 import moment from "moment";
 import styled, { AnyStyledComponent } from "styled-components";
 import { CSVLink } from "react-csv";
 
-import { IUser } from "./interfaces";
+import { IUser, IStyles } from "./interfaces";
 import {
-  useUpdateExpirationDateMutation,
-  useMembersQuery,
-  useUpdateShirtReceivedMutation,
-  useResetShirtReceivedMutation,
-  useDeleteMemberMutation,
-  User,
+	useUpdateExpirationDateMutation,
+	useMembersQuery,
+	useUpdateShirtReceivedMutation,
+	useResetShirtReceivedMutation,
+	useDeleteMemberMutation,
+	User,
 } from "../../generated/graphql";
 
-const EditModalHeader: AnyStyledComponent = styled.div`
-  margin-bottom: 15px;
-`;
+const btnStyles: IStyles = {
+	display: "inline-block",
+	cursor: "pointer",
+	marginLeft: "9px",
+};
 
+const EditInputs: AnyStyledComponent = styled.input`
+	margin-left: 20px;
+`;
+const MembershipPadding: AnyStyledComponent = styled.div`
+	padding: 30px;
+	padding-top: 60px;
+`;
 const EditCol: AnyStyledComponent = styled.div`
-  margin-top: 10px;
-  margin-bottom: 10px;
+	margin-top: 10px;
+	margin-bottom: 10px;
+`;
+
+const ConfirmButton: AnyStyledComponent = styled.button`
+	margin-left: 20px;
+`;
+
+const DeleteYes: AnyStyledComponent = styled.button`
+	margin-right: 10px;
 `;
 
 const DeleteConfirmation: AnyStyledComponent = styled.div`
-  margin: 10px;
+	margin: 10px;
+`;
+
+const ShirtResetButton: AnyStyledComponent = styled.button`
+	margin-bottom: 25px;
+`;
+
+const DownloadCSV: AnyStyledComponent = styled.button`
+  margin-bottom: 25px;
+  float: right;
 `;
 
 const Membership: React.FC<{}> = () => {
@@ -40,42 +66,47 @@ const Membership: React.FC<{}> = () => {
   const [
     updateExpirationDate,
     {
-      error: expirationError
+      loading: expirationLoading,
+      error: expirationError,
+      data: expirationData,
     },
   ]: any = useUpdateExpirationDateMutation();
 
   const [
     updateShirtReceived,
     {
-      error: updateShirtError
+      loading: updateShirtLoading,
+      error: updateShirtError,
+      data: updateShirtData,
     },
   ]: any = useUpdateShirtReceivedMutation();
 
   const [
     updateDeleteMember,
     {
-      error: deleteMemberError
+      loading: deleteMemberLoading,
+      error: deleteMemberError,
+      data: deleteMemberData,
     },
   ]: any = useDeleteMemberMutation();
 
   const [
     updateResetShirts,
     {
-      error: resetShirtsError
+      loading: resetShirtsLoading,
+      error: resetShirtsError,
+      data: resetShirtsData,
     },
   ]: any = useResetShirtReceivedMutation();
 
   const [searchText, setSearchText] = useState<string>("");
   const [searchedColumn, setSearchedColumn] = useState<string>("");
   const [searchInput, setSearchInput] = useState<any>("");
-  const [shirtReceivedLocked, setShirtReceivedLocked] = useState<boolean>(true);
 
   const [editMembershipVisible, setEditMembershipVisible] = useState(false);
 
   const [userId, setUserId] = useState("");
 
-  const [checkingShirtStatus, setCheckingShirtStatus] = useState(false);
-
   const [
     editMembershipVisibleDelete,
     setEditMembershipVisibleDelete,
@@ -88,7 +119,9 @@ const Membership: React.FC<{}> = () => {
 
   useEffect(() => {
     // Events for member data query
-    if (memberError) {
+    if (memberLoading) {
+      message.info("Member Data Loading");
+    } else if (memberError) {
       message.info("An error occured loading member data.");
     } else if (memberData) {
       const usersData: IUser[] = memberData.users.map((user: User) => ({
@@ -97,44 +130,58 @@ const Membership: React.FC<{}> = () => {
         fullName: `${user.firstName} ${user.lastName}`,
       }));
       setUsers(usersData);
+      message.success("Member data loaded.");
     }
   }, [memberData, memberLoading, memberError]);
 
   useEffect(() => {
     // Events for shirt update mutation
-    if (updateShirtError) {
+    if (updateShirtLoading) {
+      message.info("Update Shirt Data Loading");
+    } else if (updateShirtError) {
       message.info("An error occured loading shirt mutation data.");
+    } else if (updateShirtData) {
+      message.success("Update shirt success.");
     }
-  }, [updateShirtError]);
+  }, [updateShirtData, updateShirtError, updateShirtLoading]);
 
   useEffect(() => {
     // Events for update expiration mutation
-    if (expirationError) {
+    if (expirationLoading) {
+      message.info("Expiration Data Loading");
+    } else if (expirationError) {
       message.info("An error occured loading expiration mutation data.");
+    } else if (expirationData) {
+      message.success("Expiration date update success.");
     }
-  }, [expirationError]);
+  }, [expirationData, expirationLoading, expirationError]);
 
   useEffect(() => {
     // Events for delete member mutation
-    if (deleteMemberError) {
+    if (deleteMemberLoading) {
+      message.info("Delete Member Data Loading");
+    } else if (deleteMemberError) {
       message.info("An error occured loading delete member mutation data.");
+    } else if (deleteMemberData) {
+      message.success("Member deletion succeeded.");
     }
-  }, [deleteMemberError]);
+  }, [deleteMemberData, deleteMemberError, deleteMemberLoading]);
 
   useEffect(() => {
     // Events for resetting all shirts mutation
-    if (resetShirtsError) {
+    if (resetShirtsLoading) {
+      message.info("Shirt Reset Data Loading");
+    } else if (resetShirtsError) {
       message.info("An error occured loading shirt reset mutation data.");
+    } else if (resetShirtsData) {
+      message.success("Shirt reset succeeded.");
     }
-  }, [resetShirtsError]);
+  }, [resetShirtsData, resetShirtsError, resetShirtsLoading]);
 
   useEffect(() => {
     getShirtStatus();
     getExpirationDate();
-    saveAction();
-    setUserId("null");
-    setCheckingShirtStatus(false);
-  }, [checkingShirtStatus]);
+  }, [userId]);
 
   const handleVisibility: () => void = (): void => {
     setEditMembershipVisible(true);
@@ -152,10 +199,6 @@ const Membership: React.FC<{}> = () => {
     setEditMembershipVisibleDelete(false);
   };
 
-  const handleShirtReceivedLocked: () => void = (): void => {
-    setShirtReceivedLocked(!shirtReceivedLocked);
-  }; 
-
   const statusActive: (expirationDate: string) => string = (
     expirationDate: string
   ) => {
@@ -175,12 +218,7 @@ const Membership: React.FC<{}> = () => {
   const name: Function = (id: string) => {
     for (let i = 0; i < users.length; i++) {
       if (users[i].id === id) {
-        if (users[i].fullName === "null null") {
-          return "";
-        }
-        else {
-          return users[i].fullName;
-        }
+        return users[i].fullName;
       }
     }
     return "";
@@ -224,7 +262,7 @@ const Membership: React.FC<{}> = () => {
     )
       return "N/A";
     try {
-      return new Date(expirationDate.replace(/-/g, '\/').replace(/T.+/, '')).toLocaleDateString("en-US");
+      return new Date(expirationDate).toLocaleDateString("en-US");
     } catch {
       return "N/A";
     }
@@ -233,6 +271,14 @@ const Membership: React.FC<{}> = () => {
   const handleNo: Function = () => {
     return (): void => {
       handleCancelDelete();
+      handleVisibility();
+    };
+  };
+
+  const deleteAction: Function = () => {
+    return (): void => {
+      handleCancel();
+      handleVisibilityDelete();
     };
   };
 
@@ -259,10 +305,10 @@ const Membership: React.FC<{}> = () => {
             id: userId,
           },
         });
-        if (curExpDate != "null") {
+        if (curExpDate) {
           try {
             new Date(curExpDate);
-            users[i].membershipExpiration = curExpDate.replaceAll("-", "/");
+            users[i].membershipExpiration = curExpDate;
             updateExpirationDate({
               variables: { date: curExpDate, id: userId },
             });
@@ -278,6 +324,10 @@ const Membership: React.FC<{}> = () => {
     handleCancel();
   };
 
+  const changeShirtReceived: Function = () => {
+    setCurShirtStatus(!curShirtStatus);
+  };
+
   const resetAllShirts: Function = () => {
     updateResetShirts();
     for (let i = 0; i < users.length; i++) {
@@ -357,6 +407,7 @@ const Membership: React.FC<{}> = () => {
         <Button
           type="primary"
           onClick={() => handleSearch(selectedKeys, confirm, dataIndex)}
+          icon="search"
           size="small"
           style={{ width: 90, marginRight: 8 }}
         >
@@ -418,7 +469,7 @@ const Membership: React.FC<{}> = () => {
       key: "name",
       ...getColumnSearchProps("fullName"),
       render: (record: IUser) => (
-        <span>{`${record.firstName === null ? "" : record.firstName} ${record.lastName === null ? "" : record.lastName}`}</span>
+        <span>{`${record.firstName} ${record.lastName}`}</span>
       ),
     },
     {
@@ -430,17 +481,9 @@ const Membership: React.FC<{}> = () => {
     {
       title: "Status",
       key: "status",
-      render: (record: IUser) => {
-        const status = statusActive(record.membershipExpiration);
-        let color;
-        if (status === "Active") {
-          color = "green"
-        }
-        else if (status === "Expired") {
-          color = "red"
-        }
-        return <span style={{color: color}}>{status}</span>
-    },
+      render: (record: IUser) => (
+        <span>{statusActive(record.membershipExpiration)}</span>
+      ),
     },
     {
       title: "Expiration",
@@ -450,101 +493,92 @@ const Membership: React.FC<{}> = () => {
       ),
     },
     {
-      title: () => {
-      return (<span>
-        ACM Shirt 
-        <LockOutlined onClick={handleShirtReceivedLocked} title="Locked" style={{display: (shirtReceivedLocked ? "inline-block" : "none"), cursor: "pointer", fontSize: "16px", marginLeft: "7px"}} />
-        <UnlockOutlined onClick={handleShirtReceivedLocked} title="Unlocked" style={{display: (shirtReceivedLocked ? "none" : "inline-block"), cursor: "pointer", fontSize: "16px", marginLeft: "7px"}} />
-      </span>)
-      },
-      key: "acm shirt",
-      align: "center" as "center",
+      title: "Edit",
+      key: "edit",
       render: (record: IUser) => (
-        <Checkbox onClick={() => {
-            setCheckingShirtStatus(true);
+        <button
+          style={btnStyles}
+          onClick={() => {
             setUserId(record.id);
-            setCurShirtStatus(!record.shirtReceived);
-        }} checked={record.shirtReceived} disabled={shirtReceivedLocked} />
+            handleVisibility();
+          }}
+        >
+          Edit
+        </button>
       ),
     },
     {
-      key: "edit",
+      title: "ACM Shirt",
+      key: "acm shirt",
       render: (record: IUser) => (
-        <Dropdown.Button trigger={['click']} overlay={
-          <Menu>
-            <Menu.Item icon={<UserOutlined />} onClick={() => {
-              setUserId(record.id);
-              setCurShirtStatus(record.shirtReceived);
-              setCurExpDate(record.membershipExpiration);
-              handleVisibility();
-            }}>
-              Edit
-            </Menu.Item>
-            <Menu.Item icon={<UserOutlined />} style={{color: "red"}} onClick={() => {
-                handleVisibilityDelete();
-                setUserId(record.id);
-              }}>
-              Delete
-            </Menu.Item>
-          </Menu>
-        }></Dropdown.Button>
+        <span>{record.shirtReceived ? "Received" : "Not Received"}</span>
       ),
     },
   ];
 
   return (
     <div>
-      <Button style={{marginBottom: "20px"}} onClick={() => resetAllShirts()}>
-        Reset Shirt Status
-      </Button>
-
-      <Button style={{float: "right"}}>
-        {downloadCSV()}
-      </Button>
-
-      <Table dataSource={users} columns={columns} />
-      <Modal
-        visible={editMembershipVisible}
-        footer={null}
-        onCancel={handleCancel}
-      >
-        <EditModalHeader>
+      <MembershipPadding>
+        <ShirtResetButton style={btnStyles} onClick={() => resetAllShirts()}>
+          Reset Shirt Status
+        </ShirtResetButton>
+
+        <DownloadCSV>
+          {downloadCSV()}
+        </DownloadCSV>
+
+        <Table dataSource={users} columns={columns} />
+        <Modal
+          visible={editMembershipVisible}
+          footer={null}
+          onCancel={handleCancel}
+        >
           <div>
             <strong>{name(userId)}</strong>
           </div>
+          <div>{email(userId)}</div>
+          <hr />
           <div>
-            {email(userId)}
+            <EditCol>
+              <span>Picked Up Shirt:</span>
+              <EditInputs
+                type="checkbox"
+                checked={curShirtStatus}
+                onChange={changeShirtReceived}
+              />
+            </EditCol>
+
+            <EditCol>
+              <span>Membership Expiration Date: </span>
+              <DatePicker
+                value={curExpDate ? moment(curExpDate) : null}
+                onChange={changeDate}
+                placeholder="Select Expiration Date"
+              />
+            </EditCol>
+
+            <hr />
+
+            <button style={btnStyles} onClick={deleteAction()}>
+              Delete
+            </button>
+            <ConfirmButton style={btnStyles} onClick={saveAction}>
+              Confirm
+            </ConfirmButton>
           </div>
-        </EditModalHeader>
-        <hr />
-        <div>
-          <EditCol>
-            <span>Membership Expiration Date: </span>
-            <DatePicker
-              value={curExpDate.replace(/-/g, '\/').replace(/T.+/, '') ? moment(curExpDate.replace(/-/g, '\/').replace(/T.+/, '')) : null}
-              onChange={changeDate}
-              placeholder="Select Expiration Date"
-            />
-          </EditCol>
-
-          <hr />
-
-          <Button onClick={() => {saveAction()}}>
-            Confirm
-          </Button>
-        </div>
-      </Modal>
-      <Modal
-        visible={editMembershipVisibleDelete}
-        footer={null}
-        onCancel={handleCancelDelete}
-      >
-        <div>Are you sure you want to delete this user?</div>
-        <DeleteConfirmation>
-          <Button style={{marginRight: 10}} onClick={deleteUser(userId)}>Yes</Button>
-          <Button onClick={handleNo()}>No</Button>
-        </DeleteConfirmation>
-      </Modal>
+        </Modal>
+        <Modal
+          visible={editMembershipVisibleDelete}
+          footer={null}
+          onCancel={handleCancelDelete}
+        >
+          <div>Are you sure you want to delete this user?</div>
+          <DeleteConfirmation>
+            <DeleteYes onClick={deleteUser(userId)}>Yes</DeleteYes>
+            <button onClick={handleNo()}>No</button>
+          </DeleteConfirmation>
+        </Modal>
+      </MembershipPadding>
     </div>
   );
 };
diff --git a/apps/admin-web/src/screens/Membership/interfaces.ts b/apps/admin-web/src/screens/Membership/interfaces.ts
index 15a9849a..45e5c3c1 100644
--- a/apps/admin-web/src/screens/Membership/interfaces.ts
+++ b/apps/admin-web/src/screens/Membership/interfaces.ts
@@ -9,3 +9,8 @@ export interface IUser {
   shirtReceived: boolean; //eventually, not optional
 }
 
+export interface IStyles {
+  display: string;
+  cursor: string;
+  marginLeft: string;
+}
diff --git a/apps/admin-web/src/screens/Permissions/Groups.tsx b/apps/admin-web/src/screens/Permissions/Groups.tsx
new file mode 100644
index 00000000..ce1e70e9
--- /dev/null
+++ b/apps/admin-web/src/screens/Permissions/Groups.tsx
@@ -0,0 +1,9 @@
+import React from "react";
+
+const Groups: React.SFC<{}> = (): JSX.Element => {
+  return (
+    <h1>Groups</h1>
+  );
+};
+
+export { Groups };
diff --git a/apps/admin-web/src/screens/Permissions/Officers/OfficerCard.tsx b/apps/admin-web/src/screens/Permissions/Officers/OfficerCard.tsx
new file mode 100644
index 00000000..055633d3
--- /dev/null
+++ b/apps/admin-web/src/screens/Permissions/Officers/OfficerCard.tsx
@@ -0,0 +1,132 @@
+import React from "react";
+import styled, { AnyStyledComponent } from "styled-components";
+import { IOfficer } from "./OfficersList";
+import { EditOutlined, DeleteOutlined , LockTwoTone} from "@ant-design/icons";
+
+interface IOfficerProps {
+  value: IOfficer;
+}
+
+const OfficerCard: React.FC<any> = (props: IOfficerProps): JSX.Element => {
+  const data = props.value;
+
+  const OfficerCard: AnyStyledComponent = styled.div`
+    flex: 1;
+    height: 320px;
+    min-width: 260px;
+    max-width: 260px;
+    margin: 30px;
+    user-select: none;
+    background-color: white;
+    border-radius: 12px;
+    padding-top: 10px;
+    box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.08);
+    font-weight: bold;
+    font-size: 20px;
+    text-align: center;
+  `;
+
+  const ProfileImage: AnyStyledComponent = styled.img`
+    border-radius: 50%;
+    width: 100px;
+    height: auto;
+    margin-top: 10px;
+  `;
+
+  const Name: AnyStyledComponent = styled.div`
+    font-size: 18px;
+    margin-top: 10px;
+  `;
+
+  const RoleWrapper: AnyStyledComponent = styled.div`
+    display: flex;
+    justify-content: center;
+    margin-top: 5px;
+    margin-bottom: 18px;
+  `;
+
+  const Role: AnyStyledComponent = styled.div`
+    font-size: 16px;
+    font-weight: normal;
+    background: #87ceeb;
+    backdrop-filter: blur(4px);
+    width: 100px;
+    height: 25px;
+    outline: 0;
+    border: none;
+    border-radius: 40px;
+  `;
+
+  const EditIconWrapper: AnyStyledComponent = styled.div`
+    display: inline-block;
+    margin-right: 135px;
+    &:hover {
+      cursor: pointer
+    }
+  `;
+
+  const DeleteIconWrapper: AnyStyledComponent = styled.div`
+    display: inline-block;
+    &:hover {
+      cursor: pointer
+    }
+  `;
+
+  const PermissionsButton: AnyStyledComponent = styled.div`
+    display: inline-block;
+    padding: 12px;
+    margin-top: 32px;
+    font-size: 15px;
+    font-weight: normal;
+    color: #0d5d8b;
+    border-top: solid .5px rgb(0, 0, 0, 0.2);
+    border-right: solid .5px rgb(0, 0, 0, 0.2);
+    width: 50%;
+    height: 50px;
+    &:hover {
+      cursor: pointer
+    }
+  `;
+
+  const ProfileButton: AnyStyledComponent = styled.div`
+    display: inline-block;
+    padding: 12px;
+    margin-top: 32px;
+    font-size: 15px;
+    font-weight: normal;
+    color: #0d5d8b;
+    border-top: solid .5px rgb(0, 0, 0, 0.2);
+    border-left: solid .5px rgb(0, 0, 0, 0.2);
+    width: 50%;
+    height: 50px;
+    &:hover {
+      cursor: pointer
+    }
+  `;
+  
+  return (
+    <OfficerCard>
+      <ProfileImage src={data.img} />
+      <Name>{data.firstName} {data.lastName}</Name>
+      <RoleWrapper>
+        <Role>{data.role}</Role>
+      </RoleWrapper>
+      <EditIconWrapper>
+        <EditOutlined />
+      </EditIconWrapper>
+      <DeleteIconWrapper>
+        <DeleteOutlined />
+      </DeleteIconWrapper>
+      <PermissionsButton>
+        <LockTwoTone style={{marginRight: '5px'}} />
+        Permissions
+      </PermissionsButton>
+      <ProfileButton>
+        <LockTwoTone style={{marginRight: '5px'}} />
+        Profile
+      </ProfileButton>
+    </OfficerCard>
+  );
+};
+
+export { OfficerCard };
diff --git a/apps/admin-web/src/screens/Permissions/Officers/OfficersHeader.tsx b/apps/admin-web/src/screens/Permissions/Officers/OfficersHeader.tsx
new file mode 100644
index 00000000..f7defc39
--- /dev/null
+++ b/apps/admin-web/src/screens/Permissions/Officers/OfficersHeader.tsx
@@ -0,0 +1,125 @@
+import React from "react";
+import { Input } from 'antd';
+import styled from "styled-components";
+import { ProfileOptions } from "../../Dashboard/Profile";
+
+const Wrapper: any = styled.div`
+	display: flex;
+`;
+
+const HeaderText = styled.div`
+	font-weight: bold;
+	font-size: 64px;
+	padding-bottom: 15px;
+	color: #333333;
+	display: flex;
+	padding-right: 25px;
+	transition: all 0.2s ease-in-out;
+	@media (max-width: 900px) {
+		font-size: 40px;
+	}
+	@media (max-width: 700px) {
+		font-size: 30px;
+	}
+	@media (max-width: 550px) {
+		font-size: 25px;
+	}
+	@media (max-width: 450px) {
+		font-size: 23px;
+	}
+	@media (max-width: 380px) {
+		font-size: 20px;
+	}
+	@media (max-width: 340px) {
+		font-size: 17px;
+	}
+`;
+const Group = styled.div`
+	display: flex;
+	align-items: center;
+`;
+const Log = styled.div`
+  display: inline-block;
+  position: absolute;
+  right: 175px;
+	@media (max-width: 1530px) {
+		display: none;
+	}
+`;
+const AddOfficerButton = styled.button`
+	display: inline-block;
+	background: #2d9cdb;
+	backdrop-filter: blur(4px);
+	width: 155px;
+	cursor: pointer;
+	height: 43px;
+	outline: 0;
+	font-weight: bold;
+	font-size: 17px;
+	border: none;
+	border-radius: 40px;
+	transition: all 0.2s ease-in-out;
+	color: #ffffff;
+	margin-right: 50px;
+	&:hover {
+		background: #087abb;
+	}
+	@media (max-width: 900px) {
+		margin-top: -15px;
+	}
+	@media (max-width: 700px) {
+		width: 125px;
+		height: 35px;
+		font-size: 15px;
+	}
+	@media (max-width: 550px) {
+		width: 111px;
+		height: 29px;
+		font-size: 14px;
+	}
+	@media (max-width: 450px) {
+		width: 100px;
+		height: 24px;
+		font-size: 14px;
+	}
+	@media (max-width: 380px) {
+		width: 90px;
+		height: 20px;
+		font-size: 13px;
+	}
+`;
+const SearchInput = styled(Input)`
+	display: inline-block;
+	width: 260px;
+	background: transparent;
+	border-top: none;
+	border-right: none;
+	border-left: none;
+	border-bottom: solid 1px black;
+	border-radius: 0;
+	&:focus {
+        box-shadow: none;
+    }
+]`;
+
+const OfficersHeader: React.SFC<{}> = (): JSX.Element => {
+	const addOfficer: () => void = (): void => {
+		console.log("Officer Added");
+		// implement add officer logic here
+	};
+
+	return (
+		<Wrapper>
+			<Group>
+				<HeaderText>Officers</HeaderText>
+				<AddOfficerButton onClick={addOfficer}>Add Officer</AddOfficerButton>
+				<SearchInput placeholder="&#128269; Search" />
+				<Log>
+					<ProfileOptions />
+				</Log>
+			</Group>
+		</Wrapper>
+	);
+};
+
+export { OfficersHeader };
diff --git a/apps/admin-web/src/screens/Permissions/Officers/OfficersList.tsx b/apps/admin-web/src/screens/Permissions/Officers/OfficersList.tsx
new file mode 100644
index 00000000..fefd285b
--- /dev/null
+++ b/apps/admin-web/src/screens/Permissions/Officers/OfficersList.tsx
@@ -0,0 +1,72 @@
+import React from "react";
+import styled, { AnyStyledComponent } from "styled-components";
+import { OfficerCard } from "./OfficerCard";
+import ClayProfile from "./common/clay.png";
+
+
+export interface IOfficer {
+  img: string;
+  firstName: string;
+  lastName: string;
+  role: string;
+}
+
+const OfficersList: React.SFC<{}> = (): JSX.Element => {
+  // dummy data
+  const officersData: IOfficer[] = [
+    {
+      "img": ClayProfile,
+      "firstName": "Carter",
+      "lastName": "Wagner",
+      "role": "Web Chair"
+    },
+    {
+      "img": ClayProfile,
+      "firstName": "Carter",
+      "lastName": "Wagner",
+      "role": "Web Chair"
+    },
+    {
+      "img": ClayProfile,
+      "firstName": "Carter",
+      "lastName": "Wagner",
+      "role": "Web Chair"
+    },
+    {
+      "img": ClayProfile,
+      "firstName": "Carter",
+      "lastName": "Wagner",
+      "role": "Web Chair"
+    },
+    {
+      "img": ClayProfile,
+      "firstName": "Carter",
+      "lastName": "Wagner",
+      "role": "Web Chair"
+    },
+    {
+      "img": ClayProfile,
+      "firstName": "Carter",
+      "lastName": "Wagner",
+      "role": "Web Chair"
+    }
+  ];
+
+  const Wrapper: AnyStyledComponent = styled.div`
+    display: flex;
+    flex-wrap: wrap;
+    align-items: right;
+    justify-content: center;
+    margin-top: 25px;
+    padding-left: 200px;
+    padding-right: 200px;
+  `;
+
+  return (
+    <Wrapper>
+      {officersData.map((officer: IOfficer) => <OfficerCard value={officer} />)}
+    </Wrapper>
+  );
+};
+
+export { OfficersList };
diff --git a/apps/admin-web/src/screens/Permissions/Officers/common/clay.png b/apps/admin-web/src/screens/Permissions/Officers/common/clay.png
new file mode 100644
index 00000000..f8aa29e8
Binary files /dev/null and b/apps/admin-web/src/screens/Permissions/Officers/common/clay.png differ
diff --git a/apps/admin-web/src/screens/Permissions/Officers/index.tsx b/apps/admin-web/src/screens/Permissions/Officers/index.tsx
new file mode 100644
index 00000000..25ce517b
--- /dev/null
+++ b/apps/admin-web/src/screens/Permissions/Officers/index.tsx
@@ -0,0 +1,132 @@
+import React from "react";
+import styled, { AnyStyledComponent } from "styled-components";
+import { Menu, Dropdown } from 'antd';
+import { OfficersHeader } from "./OfficersHeader";
+import { OfficersList } from "./OfficersList";
+
+const PageWrapper: AnyStyledComponent = styled.div`
+  padding-left: 70px;
+  padding-top: 50px;
+  @media (max-width: 900px) {
+  padding-top: 50px;
+	padding-left: 0;
+  }
+`;
+
+const Filters: AnyStyledComponent = styled.div`
+  display: flex;
+  margin-top: 30px;
+  justify-content: center;
+`;
+
+const AllOfficersButton: AnyStyledComponent = styled.div`
+	height: 50px;
+	width: 175px;
+	padding: 10px;
+  margin-right: 15px;
+	user-select: none;
+	background-color: white;
+	border-radius: 12px;
+	padding-top: 10px;
+	box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.08);
+  font-weight: bold;
+  font-size: 20px;
+  text-align: center;
+  &:hover {
+    cursor: pointer;
+  }
+`;
+
+const CommunitiesDropDown: AnyStyledComponent = styled.div`
+	height: 50px;
+	width: 185px;
+	padding: 10px;
+  margin-left: 15px;
+	user-select: none;
+	background: transparent;
+	border-radius: 12px;
+	padding-top: 10px;
+	box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.08);
+  border: solid .5px rgb(0, 0, 0, 0.1);
+  font-weight: bold;
+  font-size: 20px;
+  text-align: center;
+  &:hover {
+    cursor: pointer;
+  }
+`;
+
+const InnerDropDown: AnyStyledComponent = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const TriangleDown = styled.div`
+  margin-left: 8px;
+  height: 0;
+  width: 0;
+
+  border-top: 6px solid black;
+  border-right: 6px solid transparent;
+  border-left: 6px solid transparent;
+  @media (max-width: 1500px) {
+    border-top: 6px solid white;
+  }
+`;
+
+const Officers: React.SFC<{}> = (): JSX.Element => {
+  const menu = (
+    <Menu>
+      <Menu.Item>
+        General
+      </Menu.Item>
+      <Menu.Item>
+        Web
+      </Menu.Item>
+      <Menu.Item>
+        Competition
+      </Menu.Item>
+      <Menu.Item>
+        Security
+      </Menu.Item>
+      <Menu.Item>
+        Game
+      </Menu.Item>
+      <Menu.Item>
+        Data
+      </Menu.Item>
+      <Menu.Item>
+        Women
+      </Menu.Item>
+      <Menu.Item>
+        Hack
+      </Menu.Item>
+      <Menu.Item>
+        Arcade
+      </Menu.Item>
+      <Menu.Item>
+        Grad
+      </Menu.Item>
+    </Menu>
+  );
+
+	return (
+		<PageWrapper>
+      <OfficersHeader />
+      <Filters>
+        <AllOfficersButton>All Officers</AllOfficersButton>
+        <CommunitiesDropDown>
+          <Dropdown overlay={menu} trigger={['click']}>
+            <InnerDropDown className="ant-dropdown-link">
+              Communities <TriangleDown />
+            </InnerDropDown>
+          </Dropdown>
+        </CommunitiesDropDown>
+      </Filters>
+      <OfficersList />
+		</PageWrapper>
+	);
+};
+
+export { Officers };
diff --git a/apps/admin-web/src/screens/Permissions/RedemptionCodes/index.tsx b/apps/admin-web/src/screens/Permissions/RedemptionCodes/index.tsx
new file mode 100644
index 00000000..4028f279
--- /dev/null
+++ b/apps/admin-web/src/screens/Permissions/RedemptionCodes/index.tsx
@@ -0,0 +1,114 @@
+import React from "react";
+import styled, { AnyStyledComponent } from "styled-components";
+import { Form, Select, Button } from "antd";
+
+import {
+	useCreateCodeMutation,
+	useGetGroupsQuery,
+	useGetProductsQuery,
+	useGetPermissionsQuery,
+} from "../../../generated/graphql";
+
+const Box: AnyStyledComponent = styled.div`
+	height: auto;
+	width: auto;
+	padding: 10px;
+	background-color: white;
+	margin-top: 20px;
+	margin-bottom: 20px;
+	border-radius: 12px;
+	font-size: 20px;
+	padding-top: 10px;
+
+	box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.08);
+	font-family: Nunito Sans;
+	padding-bottom: 5px;
+`;
+const RedemPadding: AnyStyledComponent = styled.div`
+	padding: 50px 40px 20px;
+`;
+const { Option } = Select;
+
+const RedemptionCodes: React.FC<{}> = () => {
+	const { data: gd } = useGetGroupsQuery();
+	const { data: ped } = useGetPermissionsQuery();
+	const { data: prd } = useGetProductsQuery();
+	const [createCode, { loading, error, data }] = useCreateCodeMutation();
+
+	const onFinish = (values: any) => {
+		createCode({
+			variables: {
+				permissions: values.permissions,
+				groups: values.groups,
+				products: values.product ? [values.product] : null, // currently we only support one product but could be more in the future
+			},
+		});
+	};
+	return (
+		<>
+			<RedemPadding>
+				<Form name="redemption-codes" onFinish={onFinish}>
+					<Box>
+						<Form.Item name="groups" label="Permission Groups">
+							<Select
+								mode="multiple"
+								placeholder="Please select permission groups to apply"
+							>
+								{gd?.groups.map(({ name: group }: { name: string }) => (
+									<Option value={group}>{group}</Option>
+								))}
+							</Select>
+						</Form.Item>
+					</Box>
+					<Box>
+						<Form.Item name="permissions" label="Permissions">
+							<Select
+								mode="multiple"
+								placeholder="Please select permissions to apply"
+							>
+								{ped?.permissions.map(
+									({ name: permission }: { name: string }) => (
+										<Option value={permission}>{permission}</Option>
+									)
+								)}
+							</Select>
+						</Form.Item>
+					</Box>
+					<Box>
+						<Form.Item name="product" label="Product">
+							<Select placeholder="Please select a product">
+								{prd?.products.map(
+									({
+										displayName: product,
+										tag,
+									}: {
+										displayName: string;
+										tag: string;
+									}) => (
+										<Option value={tag}>{product}</Option>
+									)
+								)}
+							</Select>
+						</Form.Item>
+					</Box>
+
+					<Form.Item>
+						<Button type="primary" htmlType="submit">
+							Submit
+						</Button>
+					</Form.Item>
+				</Form>
+			</RedemPadding>
+			{(loading && "Loading") || // If loading
+			(error && error.toString()) || // If error
+				(data && ( // If success
+					<>
+						<h3>Redemtion Code Created:</h3>
+						<p>{`https://mstacm.org/?redeem=${data.createRedemptionCode.id}`}</p>
+					</>
+				))}
+		</>
+	);
+};
+
+export { RedemptionCodes };
diff --git a/apps/admin-web/src/screens/RedemptionCodes/queries.ts b/apps/admin-web/src/screens/Permissions/RedemptionCodes/queries.ts
similarity index 100%
rename from apps/admin-web/src/screens/RedemptionCodes/queries.ts
rename to apps/admin-web/src/screens/Permissions/RedemptionCodes/queries.ts
diff --git a/apps/admin-web/src/screens/RedemptionCodes/index.tsx b/apps/admin-web/src/screens/RedemptionCodes/index.tsx
deleted file mode 100644
index a26225b7..00000000
--- a/apps/admin-web/src/screens/RedemptionCodes/index.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import React from "react";
-
-import { Form, Select, Button } from "antd";
-
-import {
-  useCreateCodeMutation,
-  useGetGroupsQuery,
-  useGetProductsQuery,
-  useGetPermissionsQuery,
-} from "../../generated/graphql";
-
-const { Option } = Select;
-
-const RedemptionCodes: React.FC<{}> = () => {
-  const { data: gd } = useGetGroupsQuery();
-  const { data: ped } = useGetPermissionsQuery();
-  const { data: prd } = useGetProductsQuery();
-  const [createCode, { loading, error, data }] = useCreateCodeMutation();
-
-  const onFinish = (values: any) => {
-    createCode({
-      variables: {
-        permissions: values.permissions,
-        groups: values.groups,
-        products: values.product ? [values.product] : null, // currently we only support one product but could be more in the future
-      },
-    });
-  };
-  return (
-    <>
-      <Form name="redemption-codes" onFinish={onFinish}>
-        <Form.Item name="groups" label="Permission Groups">
-          <Select
-            mode="multiple"
-            placeholder="Please select permission groups to apply"
-          >
-            {gd?.groups.map(({ name: group }: { name: string }) => (
-              <Option value={group}>{group}</Option>
-            ))}
-          </Select>
-        </Form.Item>
-        <Form.Item name="permissions" label="Permissions">
-          <Select
-            mode="multiple"
-            placeholder="Please select permissions to apply"
-          >
-            {ped?.permissions.map(({ name: permission }: { name: string }) => (
-              <Option value={permission}>{permission}</Option>
-            ))}
-          </Select>
-        </Form.Item>
-
-        <Form.Item name="product" label="Product">
-          <Select placeholder="Please select a product">
-            {prd?.products.map(
-              ({
-                displayName: product,
-                tag,
-              }: {
-                displayName: string;
-                tag: string;
-              }) => (
-                <Option value={tag}>{product}</Option>
-              )
-            )}
-          </Select>
-        </Form.Item>
-
-        <Form.Item>
-          <Button type="primary" htmlType="submit">
-            Submit
-          </Button>
-        </Form.Item>
-      </Form>
-      {(loading && "Loading") || // If loading
-      (error && error.toString()) || // If error
-        (data && ( // If success
-          <>
-            <h3>Redemtion Code Created:</h3>
-            <p>{`https://mstacm.org/?redeem=${data.createRedemptionCode.id}`}</p>
-          </>
-        ))}
-    </>
-  );
-};
-
-export { RedemptionCodes };
diff --git a/apps/admin-web/src/static/css/App.css b/apps/admin-web/src/static/css/App.css
index 080909fe..24465db5 100644
--- a/apps/admin-web/src/static/css/App.css
+++ b/apps/admin-web/src/static/css/App.css
@@ -1,21 +1,145 @@
 @import "~antd/dist/antd.css";
 
 body {
-  margin: 0;
-  padding: 0;
-  font-family: sans-serif;
+	margin: 0;
+	padding: 0;
+	font-family: sans-serif;
+	background-color: #f4f5f8;
 }
 
 .load-page {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 100vh;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	height: 100vh;
 }
 
 #root {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+}
+
+/* Change color on hover */
+.bm-item:hover {
+	color: white;
+}
+
+/* The rest copied directly from react-burger-menu docs */
+
+/* Position and sizing of burger button */
+.bm-burger-button {
+	position: fixed;
+	width: 36px;
+	height: 30px;
+	transition: all 0.2s ease-in-out;
+	left: 20px;
+	top: 20px;
+}
+@media (max-width: 600px) {
+	.bm-burger-button {
+		width: 28px;
+		height: 20px;
+	}
+}
+@media (max-width: 500px) {
+	.bm-burger-button {
+		width: 26px;
+		height: 20px;
+	}
+}
+@media (max-width: 500px) {
+	.bm-burger-button {
+		left: 15px;
+		top: 15px;
+	}
+}
+@media (max-width: 380px) {
+	.bm-burger-button {
+		width: 16px;
+		height: 10px;
+	}
+}
+/* Color/shape of burger icon bars */
+.bm-burger-bars {
+	background: #373a47;
+}
+
+/* Position and sizing of clickable cross button */
+
+/* Color/shape of close button cross */
+
+/* General sidebar styles */
+
+/* Morph shape necessary with bubble or elastic */
+
+/* Wrapper for item list */
+.bm-item-list {
+	color: #b8b7ad;
+}
+
+/* Styling of overlay */
+.bm-overlay {
+	background: rgba(0, 0, 0, 0.3);
+}
+.bm-cross-button {
+	height: 0px;
+	width: 0px;
+}
+
+/* Color/shape of close button cross */
+.bm-cross {
+	background: #bdc3c7;
+}
+.bm-menu-wrap {
+	position: fixed;
+	height: 100vh;
+	width: 70%;
+}
+
+/* General sidebar styles */
+/* Morph shape necessary with bubble or elastic */
+.bm-morph-shape {
+	fill: #373a47;
+}
+/* Color/shape of close button cross */
+.bm-cross {
+	background: #bdc3c7;
+}
+.bm-menu-wrap {
+	position: fixed;
+	height: 100vh;
+}
+
+/* General sidebar styles */
+.bm-menu {
+	background: #373a47;
+	height: 100%;
+}
+
+/* Morph shape necessary with bubble or elastic */
+.bm-morph-shape {
+	fill: #373a47;
+}
+
+/* Wrapper for item list */
+.bm-item-list {
+	color: #b8b7ad;
+}
+
+/* Individual item */
+.bm-item {
+	display: inline-block;
+}
+
+/* Individual item */
+.bm-item {
+	display: inline-block;
+}
+
+/* Color/shape of close button cross */
+.bm-cross {
+	background: #bdc3c7;
+	display: none;
 }
diff --git a/apps/admin-web/src/tools/Tools.tsx b/apps/admin-web/src/tools/Tools.tsx
new file mode 100644
index 00000000..ac56ca08
--- /dev/null
+++ b/apps/admin-web/src/tools/Tools.tsx
@@ -0,0 +1,29 @@
+import React from "react";
+import { ToolBox } from "./ToolsBox";
+import styled, { AnyStyledComponent } from "styled-components";
+//Placeholder until we get a statistic page to replace this
+const Grid: AnyStyledComponent = styled.div`
+	display: grid;
+	height: 100%;
+	grid-gap: 40px;
+	padding-top: 30px;
+	width: 50%;
+	margin: auto;
+	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+	grid-template-rows: repeat(3, 1fr);
+`;
+
+const ToolList: React.SFC<{}> = (): JSX.Element => {
+	return (
+		<div>
+			<Grid>
+				<ToolBox link="/events/upcoming" tool="Upcoming events" />
+				<ToolBox link="/events/previous" tool="Previous events" />
+				<ToolBox link="/membership" tool="Membership" />
+				<ToolBox link="/redemption" tool="Redemption" />
+			</Grid>
+		</div>
+	);
+};
+
+export { ToolList };
diff --git a/apps/admin-web/src/tools/ToolsBox.tsx b/apps/admin-web/src/tools/ToolsBox.tsx
new file mode 100644
index 00000000..665f0da8
--- /dev/null
+++ b/apps/admin-web/src/tools/ToolsBox.tsx
@@ -0,0 +1,41 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import styled, { AnyStyledComponent } from "styled-components";
+
+interface IToolProps {
+  tool: string;
+  link: string;
+}
+const Box: AnyStyledComponent = styled.div`
+  height: 140px;
+  width: 200px;
+  padding: 10px;
+  background-color: white;
+  border-radius: 12px;
+  font-size: 20px;
+  padding-top: 10px;
+  display: flex;
+  box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.08);
+  font-family: Nunito Sans;
+  padding-bottom: 5px;
+`;
+const Center: AnyStyledComponent = styled.div`
+  display: flex;
+  margin-right: auto;
+  margin-left: auto;
+  align-items: center;
+`;
+
+const ToolBox: React.SFC<IToolProps> = ({ tool, link }): JSX.Element => {
+  return (
+    <Link to={link}>
+      <Box>
+        <Center>
+          <div>{tool}</div>
+        </Center>
+      </Box>
+    </Link>
+  );
+};
+
+export { ToolBox };
diff --git a/apps/api/MIGRATIONS.md b/apps/api/MIGRATIONS.md
index a19a20c4..480ab547 100644
--- a/apps/api/MIGRATIONS.md
+++ b/apps/api/MIGRATIONS.md
@@ -10,107 +10,110 @@ into the shape of the new schema.
 
 1. Purge your development database and turn off the api.
 
-    **If you are using `docker`:**
+   **If you are using `docker`:**
 
-    ```bash
-    docker-compose down
-    ```
+   ```bash
+   docker-compose down
+   ```
 
-    **If you are running a local `PostgreSQL` database:**
+   **If you are running a local `PostgreSQL` database:**
 
-    Drop the database.
+   Drop the database.
 
 2. Remove SSL support from TypeORM in "production" mode
 
    Comment out [this line in ormconfig.js](ormconfig.js#L29)
-   
+
    ```js
-     // ssl: IS_PROD ? true : false
+   // ssl: IS_PROD ? true : false
    ```
 
 3. Recreate the database and start `api` in "production" mode.
-    You must start `api` in "production mode" so that you will not have database
-    synchronization enabled, which ensures the database is always the same as
-    the schema and is useful for debugging.
+   You must start `api` in "production mode" so that you will not have database
+   synchronization enabled, which ensures the database is always the same as
+   the schema and is useful for debugging.
+
+   **If you are using `docker`:**
+
+   1. Comment out [this line in docker-compose.override.yml](../docker-compose.override.yml#L16)
 
-    **If you are using `docker`:**
-    1. Comment out [this line in docker-compose.override.yml](../docker-compose.override.yml#L16)
+      ```yaml
+      phoenix_web:
+        # command: bash -c "yarn build && yarn start:prod"
+        command: yarn start:dev # <--- This line
+      ```
 
-        ```yaml
-        phoenix_web:
-            # command: bash -c "yarn build && yarn start:prod"
-            command: yarn start:dev # <--- This line
-        ```
+      > The line runs the api in development mode
 
-        > The line runs the api in development mode
+   2. Uncomment [the previous line in docker-compose.override.yml](../docker-compose.override.yml#L15)
 
-    2. Uncomment [the previous line in docker-compose.override.yml](../docker-compose.override.yml#L15)
+      ```yaml
+      phoenix_web:
+        command: bash -c "yarn build && yarn start:prod" # <--- This line
+        # command: yarn start:dev
+      ```
 
-        ```yaml
-        phoenix_web:
-            command: bash -c "yarn build && yarn start:prod" # <--- This line
-            # command: yarn start:dev
-        ```
+      > The line builds and runs `api` in production mode instead
 
-        > The line builds and runs `api` in production mode instead
+   3. Start `api` and the database with `docker-compose`:
 
-    3. Start `api` and the database with `docker-compose`:
+      ```bash
+      docker-compose up
+      ```
 
-        ```bash
-        docker-compose up
-        ```
+   **If you are running the database and `api` locally:**
 
-    **If you are running the database and `api` locally:**
-    1. Remake the `phoenix` database
-    2. Build and start `api` in production mode
+   1. Remake the `phoenix` database
+   2. Build and start `api` in production mode
 
-        ```bash
-        yarn build && yarn start:prod
-        ```
+      ```bash
+      yarn build && yarn start:prod
+      ```
 
-    ----
-    What these changes do is skip [three lines in main.ts](src/main.ts#L24)
-    which cause the synchronization each time the `api` starts by setting the
-    `NODE_ENV` environment variable to "production".
+   ***
+
+   What these changes do is skip [three lines in main.ts](src/main.ts#L24)
+   which cause the synchronization each time the `api` starts by setting the
+   `NODE_ENV` environment variable to "production".
 
 4. Your database is now out of sync with your code, which is good.
 
-    **Verify that the changes you have made to the database schema are not
-    present in the database now.**
+   **Verify that the changes you have made to the database schema are not
+   present in the database now.**
 
-    > You can either query using `psql` from the command line or use a gui like
-    `postico` for macOS or `pgadmin` for windows.
+   > You can either query using `psql` from the command line or use a gui like
+   > `postico` for macOS or `pgadmin` for windows.
 
 5. Generate the automatic migration using `typeorm`
 
-    ```bash
-    yarn typeorm migration:generate -n <feature-name>
-    ```
+   ```bash
+   yarn typeorm migration:generate -n <feature-name>
+   ```
 
-    where `<feature-name>` is a simple name for what changed.
-    (Ex. UserShirts for a feature where users now have shirts in the database)
+   where `<feature-name>` is a simple name for what changed.
+   (Ex. UserShirts for a feature where users now have shirts in the database)
 
 6. Run new migrations
-   
+
    ```bash
     yarn typeorm migration:run
-    ```
+   ```
 
-6. Check that the database now looks as it should, and edit the migration file
-    located in [the migrations folder](src/migrations) to make sure that
-    only the parts of the schema **you changed** are being modified.
+7. Check that the database now looks as it should, and edit the migration file
+   located in [the migrations folder](src/migrations) to make sure that
+   only the parts of the schema **you changed** are being modified.
 
-    > Any `DROP`s in the `up` function generated by `typeorm` are a sign of bad
-    news. There is also a few lines involving the product table and a field
-    becoming numeric that are not supposed to be in there but always are added
-    due to a bug. These should be removed.
+   > Any `DROP`s in the `up` function generated by `typeorm` are a sign of bad
+   > news. There is also a few lines involving the product table and a field
+   > becoming numeric that are not supposed to be in there but always are added
+   > due to a bug. These should be removed.
 
-    If the migration is wrong it is up to you to amend the SQL queries to make
-    the migration work as it needs to.
+   If the migration is wrong it is up to you to amend the SQL queries to make
+   the migration work as it needs to.
 
-7. Test your migration
+8. Test your migration
 
-    Rerun the steps to delete and rebuild the database by hand and make sure
-    that the default entries are all looking as expected and no errors occur.
-    This is a dry run on a development database of exactly what will happen in
-    production.
+   Rerun the steps to delete and rebuild the database by hand and make sure
+   that the default entries are all looking as expected and no errors occur.
+   This is a dry run on a development database of exactly what will happen in
+   production.
diff --git a/apps/api/ormconfig.js b/apps/api/ormconfig.js
index 25e3f330..009990c2 100644
--- a/apps/api/ormconfig.js
+++ b/apps/api/ormconfig.js
@@ -1,4 +1,4 @@
-const IS_PROD = process.env.NODE_ENV === "production";
+const IS_PROD = process.env.NODE_ENV === "dev";
 const ROOT_DIR = IS_PROD ? "build" : "src";
 
 module.exports = {
diff --git a/apps/web/src/screens/HomePage/sections/Events/index.tsx b/apps/web/src/screens/HomePage/sections/Events/index.tsx
index f8f2421f..a82b2319 100644
--- a/apps/web/src/screens/HomePage/sections/Events/index.tsx
+++ b/apps/web/src/screens/HomePage/sections/Events/index.tsx
@@ -9,13 +9,12 @@ import Icon from "react-eva-icons";
 import { PageConstraint } from "../../../../components/PageConstraint";
 import { Checkbox } from "./Checkbox";
 import { Event } from "./Event";
-
 import { config } from "../../../../config";
 
 import {
   Event as IEvent,
   GetCurrentEventsQueryHookResult,
-  useGetCurrentEventsQuery
+  useGetCurrentEventsQuery,
 } from "../../../../generated/graphql";
 
 export const GET_CURRENT_EVENTS_QUERY: any = gql`
@@ -199,7 +198,7 @@ const FILTER_TYPES: string[] = [
   "General",
   "Hack",
   "Security",
-  "Women"
+  "Women",
 ];
 
 const DEFAULT_EVENTS_TO_DISPLAY: number = 3;
@@ -404,7 +403,7 @@ const Events: React.FC<{}> = (): JSX.Element => {
               display: noFilteredEvents() ? "none" : "",
               fontSize: "15px",
               margin: "-10px auto 0 auto",
-              paddingTop: showDefault() ? "50px" : ""
+              paddingTop: showDefault() ? "50px" : "",
             }}
             href={CALENDAR_LINK}
             target="_blank"
diff --git a/yarn.lock b/yarn.lock
index ffc82931..f91288d8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -78,7 +78,29 @@
     ts-invariant "^0.4.4"
     tslib "^1.10.0"
 
-"@apollo/react-hooks@^3.0.0", "@apollo/react-hooks@^3.1.1", "@apollo/react-hooks@^3.1.2":
+"@apollo/react-components@^3.1.5":
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/@apollo/react-components/-/react-components-3.1.5.tgz#040d2f35ce4947747efe16f76d59dcbd797ffdaf"
+  integrity sha512-c82VyUuE9VBnJB7bnX+3dmwpIPMhyjMwyoSLyQWPHxz8jK4ak30XszJtqFf4eC4hwvvLYa+Ou6X73Q8V8e2/jg==
+  dependencies:
+    "@apollo/react-common" "^3.1.4"
+    "@apollo/react-hooks" "^3.1.5"
+    prop-types "^15.7.2"
+    ts-invariant "^0.4.4"
+    tslib "^1.10.0"
+
+"@apollo/react-hoc@^3.1.5":
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/@apollo/react-hoc/-/react-hoc-3.1.5.tgz#6552d2fb4aafc59fdc8f4e353358b98b89cfab6f"
+  integrity sha512-jlZ2pvEnRevLa54H563BU0/xrYSgWQ72GksarxUzCHQW85nmn9wQln0kLBX7Ua7SBt9WgiuYQXQVechaaCulfQ==
+  dependencies:
+    "@apollo/react-common" "^3.1.4"
+    "@apollo/react-components" "^3.1.5"
+    hoist-non-react-statics "^3.3.0"
+    ts-invariant "^0.4.4"
+    tslib "^1.10.0"
+
+"@apollo/react-hooks@^3.0.0", "@apollo/react-hooks@^3.1.1", "@apollo/react-hooks@^3.1.2", "@apollo/react-hooks@^3.1.5":
   version "3.1.5"
   resolved "https://registry.yarnpkg.com/@apollo/react-hooks/-/react-hooks-3.1.5.tgz#7e710be52461255ae7fc0b3b9c2ece64299c10e6"
   integrity sha512-y0CJ393DLxIIkksRup4nt+vSjxalbZBXnnXxYbviq/woj+zKa431zy0yT4LqyRKpFy9ahMIwxBnBwfwIoupqLQ==
@@ -88,6 +110,15 @@
     ts-invariant "^0.4.4"
     tslib "^1.10.0"
 
+"@apollo/react-ssr@^3.1.5":
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/@apollo/react-ssr/-/react-ssr-3.1.5.tgz#53703cd493afcde567acc6d5512cab03dafce6de"
+  integrity sha512-wuLPkKlctNn3u8EU8rlECyktpOUCeekFfb0KhIKknpGY6Lza2Qu0bThx7D9MIbVEzhKadNNrzLcpk0Y8/5UuWg==
+  dependencies:
+    "@apollo/react-common" "^3.1.4"
+    "@apollo/react-hooks" "^3.1.5"
+    tslib "^1.10.0"
+
 "@ardatan/aggregate-error@0.0.1":
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/@ardatan/aggregate-error/-/aggregate-error-0.0.1.tgz#1403ac5de10d8ca689fc1f65844c27179ae1d44f"
@@ -3017,6 +3048,11 @@
   dependencies:
     jest-diff "^24.3.0"
 
+"@types/js-cookie@2.2.6":
+  version "2.2.6"
+  resolved "https://registry.yarnpkg.com/@types/js-cookie/-/js-cookie-2.2.6.tgz#f1a1cb35aff47bc5cfb05cb0c441ca91e914c26f"
+  integrity sha512-+oY0FDTO2GYKEV0YPvSshGq9t7YozVkgvXLty7zogQNuCxBhT9/3INX9Q7H1aRZ4SUDRXAKlJuA4EA5nTt7SNw==
+
 "@types/js-yaml@^3.12.5":
   version "3.12.5"
   resolved "https://registry.yarnpkg.com/@types/js-yaml/-/js-yaml-3.12.5.tgz#136d5e6a57a931e1cce6f9d8126aa98a9c92a6bb"
@@ -3094,6 +3130,13 @@
   resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.4.tgz#15925414e0ad2cd765bfef58842f7e26a7accb24"
   integrity sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug==
 
+"@types/react-burger-menu@^2.6.1":
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/@types/react-burger-menu/-/react-burger-menu-2.6.1.tgz#9733e700f0ddb6f288fdb6eef8a785b27a486229"
+  integrity sha512-uWY/xQ4WzdMk0oN3/KmtQ7MWLcdLsymFjSIG5awHMju2vIS0V6C4vqwVCmULz9UlVKpmH1TP6si0E75GY9Sc9w==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-csv@^1.1.2":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@types/react-csv/-/react-csv-1.1.2.tgz#a5694d7e5cbf4bc1d4baa178a3fa7ac3466ea8c5"
@@ -3423,6 +3466,11 @@
   dependencies:
     tslib "^1.9.3"
 
+"@xobotyi/scrollbar-width@1.9.5":
+  version "1.9.5"
+  resolved "https://registry.yarnpkg.com/@xobotyi/scrollbar-width/-/scrollbar-width-1.9.5.tgz#80224a6919272f405b87913ca13b92929bdf3c4d"
+  integrity sha512-N8tkAACJx2ww8vFMneJmaAgmjAG1tnVBZJRLRcx061tmsLRZHSEZSLuGWnwPtunsSLvSqXQ2wfp7Mgqg1I+2dQ==
+
 "@xtuc/ieee754@^1.2.0":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@xtuc/ieee754/-/ieee754-1.2.0.tgz#eef014a3145ae477a1cbc00cd1e552336dceb790"
@@ -3620,6 +3668,11 @@ alphanum-sort@^1.0.0:
   resolved "https://registry.yarnpkg.com/alphanum-sort/-/alphanum-sort-1.0.2.tgz#97a1119649b211ad33691d9f9f486a8ec9fbe0a3"
   integrity sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=
 
+amdefine@>=0.0.4:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5"
+  integrity sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=
+
 ansi-colors@^3.0.0:
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-3.2.4.tgz#e3a3da4bfbae6c86a9c285625de124a234026fbf"
@@ -4109,11 +4162,25 @@ assign-symbols@^1.0.0:
   resolved "https://registry.yarnpkg.com/assign-symbols/-/assign-symbols-1.0.0.tgz#59667f41fadd4f20ccbc2bb96b8d4f7f78ec0367"
   integrity sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c=
 
+ast-transform@0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/ast-transform/-/ast-transform-0.0.0.tgz#74944058887d8283e189d954600947bc98fe0062"
+  integrity sha1-dJRAWIh9goPhidlUYAlHvJj+AGI=
+  dependencies:
+    escodegen "~1.2.0"
+    esprima "~1.0.4"
+    through "~2.3.4"
+
 ast-types-flow@0.0.7, ast-types-flow@^0.0.7:
   version "0.0.7"
   resolved "https://registry.yarnpkg.com/ast-types-flow/-/ast-types-flow-0.0.7.tgz#f70b735c6bca1a5c9c22d982c3e39e7feba3bdad"
   integrity sha1-9wtzXGvKGlycItmCw+Oef+ujva0=
 
+ast-types@^0.7.0:
+  version "0.7.8"
+  resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.7.8.tgz#902d2e0d60d071bdcd46dc115e1809ed11c138a9"
+  integrity sha1-kC0uDWDQcb3NRtwRXhgJ7RHBOKk=
+
 astral-regex@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-1.0.0.tgz#6c8c3fb827dd43ee3918f27b82782ab7658a6fd9"
@@ -4573,7 +4640,7 @@ browser-process-hrtime@^1.0.0:
   resolved "https://registry.yarnpkg.com/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz#3c9b4b7d782c8121e56f10106d84c0d0ffc94626"
   integrity sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==
 
-browser-resolve@^1.11.3:
+browser-resolve@^1.11.3, browser-resolve@^1.8.1:
   version "1.11.3"
   resolved "https://registry.yarnpkg.com/browser-resolve/-/browser-resolve-1.11.3.tgz#9b7cbb3d0f510e4cb86bdbd796124d28b5890af6"
   integrity sha512-exDi1BYWB/6raKHmDTCicQfTkqwN5fioMFV4j8BsfMU4R2DK/QfZfK7kOVkmWCNANf0snkBzqGqAJBao9gZMdQ==
@@ -4618,6 +4685,15 @@ browserify-des@^1.0.0:
     inherits "^2.0.1"
     safe-buffer "^5.1.2"
 
+browserify-optional@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/browserify-optional/-/browserify-optional-1.0.1.tgz#1e13722cfde0d85f121676c2a72ced533a018869"
+  integrity sha1-HhNyLP3g2F8SFnbCpyztUzoBiGk=
+  dependencies:
+    ast-transform "0.0.0"
+    ast-types "^0.7.0"
+    browser-resolve "^1.8.1"
+
 browserify-rsa@^4.0.0, browserify-rsa@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/browserify-rsa/-/browserify-rsa-4.0.1.tgz#21e0abfaf6f2029cf2fafb133567a701d4135524"
@@ -4989,6 +5065,29 @@ chardet@^0.7.0:
   resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
   integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==
 
+chart.js@^2.9.3:
+  version "2.9.3"
+  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-2.9.3.tgz#ae3884114dafd381bc600f5b35a189138aac1ef7"
+  integrity sha512-+2jlOobSk52c1VU6fzkh3UwqHMdSlgH1xFv9FKMqHiNCpXsGPQa/+81AFa+i3jZ253Mq9aAycPwDjnn1XbRNNw==
+  dependencies:
+    chartjs-color "^2.1.0"
+    moment "^2.10.2"
+
+chartjs-color-string@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz#1df096621c0e70720a64f4135ea171d051402f71"
+  integrity sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==
+  dependencies:
+    color-name "^1.0.0"
+
+chartjs-color@^2.1.0:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/chartjs-color/-/chartjs-color-2.4.1.tgz#6118bba202fe1ea79dd7f7c0f9da93467296c3b0"
+  integrity sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==
+  dependencies:
+    chartjs-color-string "^0.6.0"
+    color-convert "^1.9.3"
+
 chokidar@^2.0.0, chokidar@^2.1.8:
   version "2.1.8"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.1.8.tgz#804b3a7b6a99358c3c5c61e71d8728f041cff917"
@@ -5202,7 +5301,7 @@ collection-visit@^1.0.0:
     map-visit "^1.0.0"
     object-visit "^1.0.0"
 
-color-convert@^1.9.0, color-convert@^1.9.1:
+color-convert@^1.9.0, color-convert@^1.9.1, color-convert@^1.9.3:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
   integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
@@ -6802,6 +6901,17 @@ escodegen@^1.11.0, escodegen@^1.9.1:
   optionalDependencies:
     source-map "~0.6.1"
 
+escodegen@~1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.2.0.tgz#09de7967791cc958b7f89a2ddb6d23451af327e1"
+  integrity sha1-Cd55Z3kcyVi3+Jot220jRRrzJ+E=
+  dependencies:
+    esprima "~1.0.4"
+    estraverse "~1.5.0"
+    esutils "~1.0.0"
+  optionalDependencies:
+    source-map "~0.1.30"
+
 eslint-config-airbnb-base@^14.2.0:
   version "14.2.0"
   resolved "https://registry.yarnpkg.com/eslint-config-airbnb-base/-/eslint-config-airbnb-base-14.2.0.tgz#fe89c24b3f9dc8008c9c0d0d88c28f95ed65e9c4"
@@ -7076,6 +7186,11 @@ esprima@^4.0.0, esprima@^4.0.1:
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
   integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
 
+esprima@~1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/esprima/-/esprima-1.0.4.tgz#9f557e08fc3b4d26ece9dd34f8fbf476b62585ad"
+  integrity sha1-n1V+CPw7TSbs6d00+Pv0drYlha0=
+
 esquery@^1.0.1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.3.1.tgz#b78b5828aa8e214e29fb74c4d5b752e1c033da57"
@@ -7100,11 +7215,21 @@ estraverse@^5.1.0, estraverse@^5.2.0:
   resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.2.0.tgz#307df42547e6cc7324d3cf03c155d5cdb8c53880"
   integrity sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ==
 
+estraverse@~1.5.0:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-1.5.1.tgz#867a3e8e58a9f84618afb6c2ddbcd916b7cbaf71"
+  integrity sha1-hno+jlip+EYYr7bC3bzZFrfLr3E=
+
 esutils@^2.0.2:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
   integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
 
+esutils@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/esutils/-/esutils-1.0.0.tgz#8151d358e20c8acc7fb745e7472c0025fe496570"
+  integrity sha1-gVHTWOIMisx/t0XnRywAJf5JZXA=
+
 etag@~1.8.1:
   version "1.8.1"
   resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
@@ -7115,6 +7240,11 @@ eva-icons@^1.1.1:
   resolved "https://registry.yarnpkg.com/eva-icons/-/eva-icons-1.1.3.tgz#d4a88a93e92250c769703eb90920752ab0f72c0a"
   integrity sha512-QBSEWNbEx1H0numXP1qgxKVCZHonRaky5ft4pGzQBcO4cy7mEja6TuJ8rc7BqX2pmkvetVQWKDH+DK/8y7GTag==
 
+eve@~0.5.1:
+  version "0.5.4"
+  resolved "https://registry.yarnpkg.com/eve/-/eve-0.5.4.tgz#67d080b9725291d7e389e34c26860dd97f1debaa"
+  integrity sha1-Z9CAuXJSkdfjieNMJoYN2X8d66o=
+
 eventemitter3@^3.1.0:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-3.1.2.tgz#2d3d48f9c346698fce83a85d7d664e98535df6e7"
@@ -7353,6 +7483,11 @@ fast-levenshtein@~2.0.6:
   resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
   integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=
 
+fast-shallow-equal@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fast-shallow-equal/-/fast-shallow-equal-1.0.0.tgz#d4dcaf6472440dcefa6f88b98e3251e27f25628b"
+  integrity sha512-HPtaa38cPgWvaCFmRNhlc6NG7pv6NUHqjPgVAkWGoB9mQMwYB27/K0CvOM5Czy+qpT3e8XJ6Q4aPAnzpNpzNaw==
+
 fast-text-encoding@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/fast-text-encoding/-/fast-text-encoding-1.0.3.tgz#ec02ac8e01ab8a319af182dae2681213cfe9ce53"
@@ -8069,7 +8204,7 @@ graphql-tag@2.11.0, graphql-tag@^2.10.1, graphql-tag@^2.11.0:
   resolved "https://registry.yarnpkg.com/graphql-tag/-/graphql-tag-2.11.0.tgz#1deb53a01c46a7eb401d6cb59dec86fa1cccbffd"
   integrity sha512-VmsD5pJqWJnQZMUeRwrDhfgoyqcfwEkvtpANqcoUG8/tOLkwNgU9mzub/Mc78OJMhHjx7gfAMTxzdG43VGg3bA==
 
-graphql@^14.5.3:
+graphql@^14, graphql@^14.5.3:
   version "14.7.0"
   resolved "https://registry.yarnpkg.com/graphql/-/graphql-14.7.0.tgz#7fa79a80a69be4a31c27dda824dc04dac2035a72"
   integrity sha512-l0xWZpoPKpppFzMfvVyFmp9vLN7w/ZZJPefUicMCepfJeQ8sMcztloGYY9DfjVPo6tIUDzU5Hw3MUbIjj9AVVA==
@@ -9667,6 +9802,11 @@ jest@24.9.0, jest@^24.8.0:
     import-local "^2.0.0"
     jest-cli "^24.9.0"
 
+js-cookie@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-2.2.1.tgz#69e106dc5d5806894562902aa5baec3744e9b2b8"
+  integrity sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ==
+
 js-file-download@^0.4.7:
   version "0.4.12"
   resolved "https://registry.yarnpkg.com/js-file-download/-/js-file-download-0.4.12.tgz#10c70ef362559a5b23cdbdc3bd6f399c3d91d821"
@@ -10917,6 +11057,11 @@ moment@2.x:
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.27.0.tgz#8bff4e3e26a236220dfe3e36de756b6ebaa0105d"
   integrity sha512-al0MUK7cpIcglMv3YF13qSgdAIqxHTO7brRtaz3DlSULbqfazqkc5kEjNrLDOM7fsjshoFIihnU8snrP7zUvhQ==
 
+moment@^2.10.2:
+  version "2.26.0"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.26.0.tgz#5e1f82c6bafca6e83e808b30c8705eed0dcbd39a"
+  integrity sha512-oIixUO+OamkUkwjhAVE18rAMfRJNsNe/Stid/gwHSOfHrOtw9EhAY2AHvdKZ/k/MggcYELFCJz/Sn2pL8b8JMw==
+
 moment@^2.24.0, moment@^2.25.3:
   version "2.29.1"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
@@ -11001,7 +11146,7 @@ nan@^2.12.1:
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.1.tgz#d7be34dfa3105b91494c3147089315eff8874b01"
   integrity sha512-isWHgVjnFjh2x2yuJ/tj3JbwoHu3UC2dX5G/88Cm24yB6YopVgxvBObDY7n5xW6ExmFhJpSEQqFPvq9zaXc8Jw==
 
-nano-css@^5.1.0:
+nano-css@^5.1.0, nano-css@^5.2.1:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/nano-css/-/nano-css-5.3.0.tgz#9d3cd29788d48b6a07f52aa4aec7cf4da427b6b5"
   integrity sha512-uM/9NGK9/E9/sTpbIZ/bQ9xOLOIHZwrrb/CRlbDHBU/GFS7Gshl24v/WJhwsVViWkpOXUmiZ66XO7fSB4Wd92Q==
@@ -13956,6 +14101,17 @@ rc@^1.2.8:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+react-apollo@^3.1.3:
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/react-apollo/-/react-apollo-3.1.5.tgz#36692d393c47e7ccc37f0a885c7cc5a8b4961c91"
+  integrity sha512-xOxMqxORps+WHrUYbjVHPliviomefOpu5Sh35oO3osuOyPTxvrljdfTLGCggMhcXBsDljtS5Oy4g+ijWg3D4JQ==
+  dependencies:
+    "@apollo/react-common" "^3.1.4"
+    "@apollo/react-components" "^3.1.5"
+    "@apollo/react-hoc" "^3.1.5"
+    "@apollo/react-hooks" "^3.1.5"
+    "@apollo/react-ssr" "^3.1.5"
+
 react-app-polyfill@^1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/react-app-polyfill/-/react-app-polyfill-1.0.6.tgz#890f8d7f2842ce6073f030b117de9130a5f385f0"
@@ -13968,6 +14124,25 @@ react-app-polyfill@^1.0.6:
     regenerator-runtime "^0.13.3"
     whatwg-fetch "^3.0.0"
 
+react-burger-menu@^2.6.13:
+  version "2.6.13"
+  resolved "https://registry.yarnpkg.com/react-burger-menu/-/react-burger-menu-2.6.13.tgz#51b86eb35076c5fbe80027e2ce4c58bd6708f724"
+  integrity sha512-tloQs8F2+YHR/FYfQpu4z+OQzgGHzUZYZXBxGmb6/6eckjQ1GvzeNpHp4IZigpe0ovamg1HgDRK3qNlOPezjlA==
+  dependencies:
+    browserify-optional "^1.0.0"
+    classnames "^2.2.6"
+    eve "~0.5.1"
+    prop-types "^15.7.2"
+    snapsvg-cjs "0.0.6"
+
+react-chartjs-2@^2.9.0:
+  version "2.9.0"
+  resolved "https://registry.yarnpkg.com/react-chartjs-2/-/react-chartjs-2-2.9.0.tgz#d054dbdd763fbe9a76296a4ae0752ea549b76d9e"
+  integrity sha512-IYwqUUnQRAJ9SNA978vxulHJTcUFTJk2LDVfbAyk0TnJFZZG7+6U/2flsE4MCw6WCbBjTTypy8T82Ch7XrPtRw==
+  dependencies:
+    lodash "^4.17.4"
+    prop-types "^15.5.8"
+
 react-csv@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/react-csv/-/react-csv-2.0.3.tgz#f5d17a3c71107d9bcbe580049350200debdc042a"
@@ -14219,6 +14394,13 @@ react-transition-group@^4:
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
+react-universal-interface@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/react-universal-interface/-/react-universal-interface-0.6.0.tgz#b65cbf7d71a2f3f7dd9705d8e4f06748539bd465"
+  integrity sha512-PzApKKWfd7gvDi1sU/D07jUqnLvFxYqvJi+GEtLvBO5tXJjKr2Sa8ETVHkMA7Jcvdwt7ttbPq7Sed1JpFdNqBQ==
+  dependencies:
+    tslib "^1.9.3"
+
 react-use@^12.2.0:
   version "12.13.0"
   resolved "https://registry.yarnpkg.com/react-use/-/react-use-12.13.0.tgz#dfefd8145552841f1c2213c2e79966b505a264ba"
@@ -14236,6 +14418,26 @@ react-use@^12.2.0:
     ts-easing "^0.2.0"
     tslib "^1.10.0"
 
+react-use@^15.1.0:
+  version "15.1.0"
+  resolved "https://registry.yarnpkg.com/react-use/-/react-use-15.1.0.tgz#e8680b3615841e81ec1070ca7374fa0da0539104"
+  integrity sha512-1kpWcG7cKGO4aHNAsrhBQMs4mrtyQfX6TozC/NPaMYKoUrGRykLMsrJwyvaWsYVpenXuxqPtO31hNwdexO3Brg==
+  dependencies:
+    "@types/js-cookie" "2.2.6"
+    "@xobotyi/scrollbar-width" "1.9.5"
+    copy-to-clipboard "^3.2.0"
+    fast-deep-equal "^3.1.1"
+    fast-shallow-equal "^1.0.0"
+    js-cookie "^2.2.1"
+    nano-css "^5.2.1"
+    react-universal-interface "^0.6.0"
+    resize-observer-polyfill "^1.5.1"
+    screenfull "^5.0.0"
+    set-harmonic-interval "^1.0.1"
+    throttle-debounce "^2.1.0"
+    ts-easing "^0.2.0"
+    tslib "^2.0.0"
+
 react-wait@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/react-wait/-/react-wait-0.3.0.tgz#0cdd4d919012451a5bc3ab0a16d00c6fd9a8c10b"
@@ -15114,6 +15316,11 @@ send@0.17.1:
     range-parser "~1.2.1"
     statuses "~1.5.0"
 
+serialize-javascript@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-2.1.2.tgz#ecec53b0e0317bdc95ef76ab7074b7384785fa61"
+  integrity sha512-rs9OggEUF0V4jUSecXazOYsLfu7OGK2qIn3c7IPBiffz32XniEp/TX9Xmc9LQfK2nQ2QKHvZ2oygKUGU0lG4jQ==
+
 serialize-javascript@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-4.0.0.tgz#b525e1238489a5ecfc42afacc3fe99e666f4b1aa"
@@ -15347,6 +15554,20 @@ snapdragon@^0.8.1:
     source-map-resolve "^0.5.0"
     use "^3.1.0"
 
+snapsvg-cjs@0.0.6:
+  version "0.0.6"
+  resolved "https://registry.yarnpkg.com/snapsvg-cjs/-/snapsvg-cjs-0.0.6.tgz#3b2f56af2573d3d364c3ed5bf8885745f4d2dde1"
+  integrity sha1-Oy9WryVz09Nkw+1b+IhXRfTS3eE=
+  dependencies:
+    snapsvg "0.5.1"
+
+snapsvg@0.5.1:
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/snapsvg/-/snapsvg-0.5.1.tgz#0caf52c79189a290746fc446cc5e863f6bdddfe3"
+  integrity sha1-DK9Sx5GJopB0b8RGzF6GP2vd3+M=
+  dependencies:
+    eve "~0.5.1"
+
 sockjs-client@1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/sockjs-client/-/sockjs-client-1.4.0.tgz#c9f2568e19c8fd8173b4997ea3420e0bb306c7d5"
@@ -15442,6 +15663,13 @@ source-map@^0.5.0, source-map@^0.5.6:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
   integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
 
+source-map@~0.1.30:
+  version "0.1.43"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.1.43.tgz#c24bc146ca517c1471f5dacbe2571b2b7f9e3346"
+  integrity sha1-wkvBRspRfBRx9drL4lcbK3+eM0Y=
+  dependencies:
+    amdefine ">=0.0.4"
+
 sourcemap-codec@^1.4.1:
   version "1.4.8"
   resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"
@@ -16135,6 +16363,11 @@ throttle-debounce@^2.0.1:
   resolved "https://registry.yarnpkg.com/throttle-debounce/-/throttle-debounce-2.2.1.tgz#fbd933ae6793448816f7d5b3cae259d464c98137"
   integrity sha512-i9hAVld1f+woAiyNGqWelpDD5W1tpMroL3NofTz9xzwq6acWBlO2dC8k5EFSZepU6oOINtV5Q3aSPoRg7o4+fA==
 
+throttle-debounce@^2.1.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/throttle-debounce/-/throttle-debounce-2.3.0.tgz#fd31865e66502071e411817e241465b3e9c372e2"
+  integrity sha512-H7oLPV0P7+jgvrk+6mwwwBDmxTaxnu9HMXmloNLXwnNO0ZxZ31Orah2n8lU1eMPvsaowP2CX+USCgyovXfdOFQ==
+
 through2@^2.0.0, through2@^2.0.2:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.5.tgz#01c1e39eb31d07cb7d03a96a70823260b23132cd"
@@ -16151,7 +16384,7 @@ through2@^3.0.0:
     inherits "^2.0.4"
     readable-stream "2 || 3"
 
-through@2, "through@>=2.2.7 <3", through@^2.3.4, through@^2.3.6:
+through@2, "through@>=2.2.7 <3", through@^2.3.4, through@^2.3.6, through@~2.3.4:
   version "2.3.8"
   resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
   integrity sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=
@@ -16355,7 +16588,12 @@ tslib@^1.9.3:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.13.0.tgz#c881e13cc7015894ed914862d276436fa9a47043"
   integrity sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==
 
-tslib@^2.0.0, tslib@~2.0.0, tslib@~2.0.1:
+tslib@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.0.0.tgz#18d13fc2dce04051e20f074cc8387fd8089ce4f3"
+  integrity sha512-lTqkx847PI7xEDYJntxZH89L2/aXInsyF2luSafe/+0fHOMjlBNXdH6th7f70qxLDhul7KZK0zC8V5ZIyHl0/g==
+
+tslib@~2.0.0, tslib@~2.0.1:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.0.2.tgz#462295631185db44b21b1ea3615b63cd1c038242"
   integrity sha512-wAH28hcEKwna96/UacuWaVspVLkg4x1aDM9JlzqaQTOFczCktkVAb5fmXChgandR1EraDPs2w8P+ozM+oafwxg==
