219 changed files with 17465 additions and 26512 deletions
--- a/.tmuxinator.yml
+++ b/.tmuxinator.yml
@ -10,8 +10,6 @@ windows:
        - yarn:
          - cd frontend
          - yarn start
-        - worker:
-          - go run cmd/taskcafe/main.go worker
  - web/editor:
      root: ./frontend
      panes:
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -4,26 +4,17 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).

-## UNRELEASED
+## [Unreleased]

 ### Added
- On login page, redirects to `/register` if no users exist (to help streamline initial setup)
+- Task sorting & filtering
+- Redesigned the Task Details UI
+- Implement task group actions (duplicate/delete all tasks/sort)

 ### Fixed
- Fixes new user popup form so that it can now be submitted
-
-## [0.3.5] - 2021-09-04
-
-### Added
- Project visibility can now be set to public - meaning anyone can view the project board
- When redirected to login page while trying to view a page that requires login, you'll be redirected back to the correct page after login
- When creating a new label within the LabelManager on a card, the new label will automatically be applied to the task after creation
-
-### Changed
- Switch primary font to Open Sans
-
-### Fixed
- Any open popups are hidden when closing the Task Details window
+- removed CORS middleware to fix security issue
+- Added 3 retries with backoff to initial database connection [(#47)](https://github.com/JordanKnott/taskcafe/issues/47)
+- Can now actually set a due date

 ## [0.1.1] - 2020-08-21

--- a/docker-compose.dev.yml
+++ b/docker-compose.dev.yml
@ -12,18 +12,24 @@ services:
    volumes:
      - taskcafe-postgres:/var/lib/postgresql/data
    ports:
-      - 8865:5432
+      - 8855:5432
  mailhog:
    image: mailhog/mailhog:latest
    restart: always
    ports:
      - 1025:1025
      - 8025:8025
-  redis:
-    image: redis:6.2
+  broker:
+    image: rabbitmq:3-management
    restart: always
    ports:
-      - 6379:6379
+      - 8060:15672
+      - 5672:5672
+  result_store:
+    image: memcached:1.6-alpine
+    restart: always
+    ports:
+      - 11211:11211

 volumes:
  taskcafe-postgres:
--- a/docker-compose.yml
+++ b/docker-compose.yml
@ -12,9 +12,6 @@ services:
    environment:
      TASKCAFE_DATABASE_HOST: postgres
      TASKCAFE_MIGRATE: "true"
-    volumes:
-      - taskcafe-uploads:/root/uploads
-      
  postgres:
    image: postgres:12.3-alpine
    restart: always
@ -25,13 +22,11 @@ services:
      POSTGRES_PASSWORD: taskcafe_test
      POSTGRES_DB: taskcafe
    volumes:
-      - taskcafe-postgres:/var/lib/postgresql/data
+    - taskcafe-postgres:/var/lib/postgresql/data

 volumes:
  taskcafe-postgres:
    external: false
-  taskcafe-uploads:
-    external: false

 networks:
  taskcafe-test:
--- a/frontend/.env
+++ b/frontend/.env
@ -1,2 +0,0 @@
-REACT_APP_ENABLE_POLLING=true
-ESLINT_NO_DEV_ERRORS=true
--- a/frontend/.env.development
+++ b/frontend/.env.development
@ -1 +0,0 @@
-REACT_APP_ENABLE_POLLING=false
--- a/frontend/.eslintrc.json
+++ b/frontend/.eslintrc.json
@ -24,18 +24,15 @@
    "plugin:@typescript-eslint/recommended"
  ],
  "rules": {
-    "prettier/prettier": "warn",
-    "no-shadow": "off",
+    "prettier/prettier": "error",
    "no-restricted-syntax": ["error", "LabeledStatement", "WithStatement"],
    "@typescript-eslint/explicit-function-return-type": "off",
    "@typescript-eslint/no-explicit-any": "off",
    "@typescript-eslint/no-unused-vars": "off",
    "react/jsx-filename-extension": [2, { "extensions": [".js", ".jsx", ".ts", ".tsx"] }],
-    "react/require-default-props": "off",
    "no-case-declarations": "off",
    "no-plusplus": "off",
    "react/prop-types": 0,
-    "react/no-unused-prop-types": "off",
    "no-continue": "off",
    "react/jsx-props-no-spreading": "off",
    "no-param-reassign": "off",
@ -50,8 +47,6 @@
        "tsx": "never"
      }
    ],
-    "no-use-before-define": "off",
-    "@typescript-eslint/no-use-before-define": ["error"],
    "import/no-extraneous-dependencies": [
      "error",
      {
--- a/frontend/codegen.yml
+++ b/frontend/codegen.yml
@ -1,6 +1,6 @@
 overwrite: true
 schema:
-  - '../internal/graph/schema/*.gql'
+  - '../internal/graph/schema.graphqls'
 documents:
  - 'src/shared/graphql/*.graphqls'
  - 'src/shared/graphql/**/*.ts'
--- a/frontend/package.json
+++ b/frontend/package.json
@ -3,25 +3,28 @@
  "version": "0.1.0",
  "private": true,
  "dependencies": {
-    "@apollo/client": "^3.3.16",
+    "@apollo/client": "^3.0.0-rc.8",
    "@apollo/react-common": "^3.1.4",
-    "@apollo/react-hooks": "^4.0.0",
-    "@taskcafe/rich-markdown-editor": "^11.0.10",
+    "@apollo/react-hooks": "^3.1.3",
+    "@types/axios": "^0.14.0",
    "@types/color": "^3.0.1",
-    "@types/dompurify": "^2.2.2",
+    "@types/date-fns": "^2.6.0",
+    "@types/dompurify": "^2.0.4",
    "@types/emoji-mart": "^3.0.4",
-    "@types/jest": "^26.0.23",
-    "@types/lodash": "^4.14.168",
-    "@types/node": "^15.0.1",
-    "@types/react": "^17.0.20",
-    "@types/react-beautiful-dnd": "^13.0.0",
-    "@types/react-datepicker": "^3.1.8",
-    "@types/react-dom": "^17.0.9",
-    "@types/react-router": "^5.1.13",
-    "@types/react-router-dom": "^5.1.7",
-    "@types/react-select": "^4.0.15",
+    "@types/jest": "^24.0.0",
+    "@types/jwt-decode": "^2.2.1",
+    "@types/lodash": "^4.14.149",
+    "@types/node": "^12.0.0",
+    "@types/query-string": "^6.3.0",
+    "@types/react": "^16.9.21",
+    "@types/react-beautiful-dnd": "^12.1.1",
+    "@types/react-datepicker": "^2.11.0",
+    "@types/react-dom": "^16.9.5",
+    "@types/react-router": "^5.1.4",
+    "@types/react-router-dom": "^5.1.3",
+    "@types/react-select": "^3.0.13",
    "@types/react-timeago": "^4.1.1",
-    "@types/styled-components": "^5.1.0",
+    "@types/styled-components": "^5.0.0",
    "apollo-cache-inmemory": "^1.6.5",
    "apollo-client": "^2.6.8",
    "apollo-link": "^1.2.13",
@ -30,42 +33,39 @@
    "apollo-link-state": "^0.4.2",
    "apollo-utilities": "^1.3.3",
    "axios": "^0.21.1",
-    "axios-auth-refresh": "^3.1.0",
+    "axios-auth-refresh": "^2.2.7",
    "color": "^3.1.2",
-    "date-fns": "^2.21.1",
-    "dayjs": "^1.10.4",
-    "dompurify": "^2.2.8",
-    "emoji-mart": "^3.0.1",
-    "emoticon": "^4.0.0",
-    "graphql": "^15.5.0",
-    "graphql-tag": "^2.12.4",
-    "history": "^5.0.0",
-    "immer": "^9.0.2",
-    "jwt-decode": "^3.1.2",
-    "lodash": "^4.17.21",
-    "loglevel": "^1.7.1",
-    "loglevel-plugin-remote": "^0.6.8",
+    "date-fns": "^2.14.0",
+    "dayjs": "^1.9.1",
+    "dompurify": "^2.2.6",
+    "emoji-mart": "^3.0.0",
+    "emoticon": "^3.2.0",
+    "graphql": "^15.0.0",
+    "graphql-tag": "^2.10.3",
+    "history": "^4.10.1",
+    "immer": "^8.0.1",
+    "jwt-decode": "^2.2.0",
+    "lodash": "^4.17.20",
    "node-emoji": "^1.10.0",
    "prop-types": "^15.7.2",
-    "query-string": "^7.0.0",
-    "react": "^17.0.2",
+    "query-string": "^6.13.7",
+    "react": "^16.12.0",
    "react-autosize-textarea": "^7.0.0",
-    "react-beautiful-dnd": "^13.1.0",
-    "react-datepicker": "^3.8.0",
-    "react-dom": "^17.0.2",
+    "react-beautiful-dnd": "^13.0.0",
+    "react-datepicker": "^2.14.1",
+    "react-dom": "^16.12.0",
    "react-emoji-render": "^1.2.4",
-    "react-hook-form": "^7.3.6",
-    "react-markdown": "^6.0.1",
+    "react-hook-form": "^6.0.6",
+    "react-markdown": "^4.3.1",
    "react-router": "^5.1.2",
    "react-router-dom": "^5.1.2",
-    "react-scripts": "4.0.3",
-    "react-select": "^4.3.0",
-    "react-timeago": "^5.2.0",
-    "react-toastify": "^7.0.4",
-    "rich-markdown-editor": "^11.17.4-0",
-    "styled-components": "^5.2.3",
-    "typescript": "~4.2.4",
-    "unist-util-visit": "^4.0.0"
+    "react-scripts": "3.4.0",
+    "react-select": "^3.1.0",
+    "react-timeago": "^4.4.0",
+    "react-toastify": "^6.0.8",
+    "rich-markdown-editor": "^10.6.5",
+    "styled-components": "^5.0.1",
+    "typescript": "~3.7.2"
  },
  "proxy": "http://localhost:3333",
  "scripts": {
@ -93,20 +93,20 @@
    ]
  },
  "devDependencies": {
-    "@graphql-codegen/cli": "^1.21.4",
-    "@graphql-codegen/typescript": "^1.22.0",
-    "@graphql-codegen/typescript-operations": "^1.17.16",
-    "@graphql-codegen/typescript-react-apollo": "^2.2.4",
-    "@typescript-eslint/eslint-plugin": "^4.22.0",
-    "@typescript-eslint/parser": "^4.22.0",
-    "eslint": "^7.25.0",
+    "@graphql-codegen/cli": "^1.13.2",
+    "@graphql-codegen/typescript": "^1.13.2",
+    "@graphql-codegen/typescript-operations": "^1.13.2",
+    "@graphql-codegen/typescript-react-apollo": "^1.13.2",
+    "@typescript-eslint/eslint-plugin": "^2.20.0",
+    "@typescript-eslint/parser": "^2.20.0",
+    "eslint": "^6.8.0",
    "eslint-config-airbnb": "^18.0.1",
-    "eslint-config-prettier": "^8.3.0",
+    "eslint-config-prettier": "^6.10.0",
    "eslint-plugin-import": "^2.20.1",
    "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-prettier": "^3.4.0",
-    "eslint-plugin-react": "^7.23.2",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "prettier": "^2.2.1"
+    "eslint-plugin-prettier": "^3.1.2",
+    "eslint-plugin-react": "^7.18.3",
+    "eslint-plugin-react-hooks": "^1.7.0",
+    "prettier": "^1.19.1"
  }
 }
--- a/frontend/src/Admin/index.tsx
+++ b/frontend/src/Admin/index.tsx
@ -10,17 +10,16 @@ import {
  UsersDocument,
  UsersQuery,
 } from 'shared/generated/graphql';
+import Input from 'shared/components/Input';
 import styled from 'styled-components';
 import Button from 'shared/components/Button';
-import { useForm, Controller, UseFormSetError } from 'react-hook-form';
+import { useForm, Controller } from 'react-hook-form';
 import { usePopup, Popup } from 'shared/components/PopupMenu';
 import produce from 'immer';
 import updateApolloCache from 'shared/utils/cache';
 import { useCurrentUser } from 'App/context';
 import { Redirect } from 'react-router';
 import NOOP from 'shared/utils/noop';
-import ControlledInput from 'shared/components/ControlledInput';
-import FormInput from 'shared/components/FormInput';

 const DeleteUserWrapper = styled.div`
  display: flex;
@ -78,56 +77,55 @@ const CreateUserButton = styled(Button)`
  width: 100%;
 `;

-const AddUserInput = styled(FormInput)`
+const AddUserInput = styled(Input)`
  margin-bottom: 8px;
 `;

 const InputError = styled.span`
-  color: ${(props) => props.theme.colors.danger};
+  color: ${props => props.theme.colors.danger};
  font-size: 12px;
 `;

 type AddUserPopupProps = {
-  onAddUser: (user: CreateUserData, setError: UseFormSetError<CreateUserData>) => void;
+  onAddUser: (user: CreateUserData) => void;
 };

 const AddUserPopup: React.FC<AddUserPopupProps> = ({ onAddUser }) => {
-  const {
-    register,
-    handleSubmit,
-    formState: { errors },
-    setError,
-    control,
-  } = useForm<CreateUserData>();
+  const { register, handleSubmit, errors, control } = useForm<CreateUserData>();

  const createUser = (data: CreateUserData) => {
-    onAddUser(data, setError);
+    onAddUser(data);
  };
  return (
    <CreateUserForm onSubmit={handleSubmit(createUser)}>
      <AddUserInput
+        floatingLabel
        width="100%"
        label="Full Name"
+        id="fullName"
+        name="fullName"
        variant="alternate"
-        {...register('fullName', { required: 'Full name is required' })}
+        ref={register({ required: 'Full name is required' })}
      />
      {errors.fullName && <InputError>{errors.fullName.message}</InputError>}
      <AddUserInput
        floatingLabel
        width="100%"
        label="Email"
+        id="email"
+        name="email"
        variant="alternate"
-        {...register('email', { required: 'Email is required' })}
+        ref={register({ required: 'Email is required' })}
      />
-      {errors.email && <InputError>{errors.email.message}</InputError>}
      <Controller
        control={control}
        name="roleCode"
        rules={{ required: 'Role is required' }}
-        render={({ field }) => (
+        render={({ onChange, value }) => (
          <Select
-            {...field}
            label="Role"
+            value={value}
+            onChange={onChange}
            options={[
              { label: 'Admin', value: 'admin' },
              { label: 'Member', value: 'member' },
@ -140,25 +138,31 @@ const AddUserPopup: React.FC<AddUserPopupProps> = ({ onAddUser }) => {
        floatingLabel
        width="100%"
        label="Username"
+        id="username"
+        name="username"
        variant="alternate"
-        {...register('username', { required: 'Username is required' })}
+        ref={register({ required: 'Username is required' })}
      />
      {errors.username && <InputError>{errors.username.message}</InputError>}
      <AddUserInput
        floatingLabel
        width="100%"
        label="Initials"
+        id="initials"
+        name="initials"
        variant="alternate"
-        {...register('initials', { required: 'Initials is required' })}
+        ref={register({ required: 'Initials is required' })}
      />
      {errors.initials && <InputError>{errors.initials.message}</InputError>}
      <AddUserInput
        floatingLabel
        width="100%"
        label="Password"
+        id="password"
+        name="password"
        variant="alternate"
        type="password"
-        {...register('password', { required: 'Password is required' })}
+        ref={register({ required: 'Password is required' })}
      />
      {errors.password && <InputError>{errors.password.message}</InputError>}
      <CreateUserButton type="submit">Create</CreateUserButton>
@ -175,10 +179,10 @@ const AdminRoute = () => {
  const { user } = useCurrentUser();
  const [deleteInvitedUser] = useDeleteInvitedUserAccountMutation({
    update: (client, response) => {
-      updateApolloCache<UsersQuery>(client, UsersDocument, (cache) =>
-        produce(cache, (draftCache) => {
+      updateApolloCache<UsersQuery>(client, UsersDocument, cache =>
+        produce(cache, draftCache => {
          draftCache.invitedUsers = cache.invitedUsers.filter(
-            (u) => u.id !== response.data?.deleteInvitedUserAccount.invitedUser.id,
+            u => u.id !== response.data?.deleteInvitedUserAccount.invitedUser.id,
          );
        }),
      );
@ -186,9 +190,9 @@ const AdminRoute = () => {
  });
  const [deleteUser] = useDeleteUserAccountMutation({
    update: (client, response) => {
-      updateApolloCache<UsersQuery>(client, UsersDocument, (cache) =>
-        produce(cache, (draftCache) => {
-          draftCache.users = cache.users.filter((u) => u.id !== response.data?.deleteUserAccount.userAccount.id);
+      updateApolloCache<UsersQuery>(client, UsersDocument, cache =>
+        produce(cache, draftCache => {
+          draftCache.users = cache.users.filter(u => u.id !== response.data?.deleteUserAccount.userAccount.id);
        }),
      );
    },
@ -211,12 +215,9 @@ const AdminRoute = () => {
    },
  });
  if (data && user) {
-    /*
-TODO: add permision check
    if (user.roles.org !== 'admin') {
      return <Redirect to="/" />;
    }
-     */
    return (
      <>
        <GlobalTopNavbar projectID={null} onSaveProjectName={NOOP} name={null} />
@ -224,13 +225,12 @@ TODO: add permision check
          initialTab={0}
          users={data.users}
          invitedUsers={data.invitedUsers}
-          // canInviteUser={user.roles.org === 'admin'} TODO: add permision check
-          canInviteUser
+          canInviteUser={user.roles.org === 'admin'}
          onInviteUser={NOOP}
          onUpdateUserPassword={() => {
            hidePopup();
          }}
-          onDeleteInvitedUser={(invitedUserID) => {
+          onDeleteInvitedUser={invitedUserID => {
            deleteInvitedUser({ variables: { invitedUserID } });
            hidePopup();
          }}
@ -238,20 +238,15 @@ TODO: add permision check
            deleteUser({ variables: { userID, newOwnerID } });
            hidePopup();
          }}
-          onAddUser={($target) => {
+          onAddUser={$target => {
            showPopup(
              $target,
              <Popup tab={0} title="Add member" onClose={() => hidePopup()}>
                <AddUserPopup
-                  onAddUser={(u, setError) => {
+                  onAddUser={u => {
                    const { roleCode, ...userData } = u;
-                    createUser({
-                      variables: { ...userData, roleCode: roleCode.value },
-                    })
-                      .then(() => hidePopup())
-                      .catch((e) => {
-                        setError('email', { type: 'validate', message: e.message });
-                      });
+                    createUser({ variables: { ...userData, roleCode: roleCode.value } });
+                    hidePopup();
                  }}
                />
              </Popup>,
--- a/frontend/src/App/TopNavbar/ProjectFinder.tsx
+++ b/frontend/src/App/TopNavbar/ProjectFinder.tsx
@ -1,13 +1,16 @@
-import React, { useState } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import styled from 'styled-components/macro';
 import { useGetProjectsQuery } from 'shared/generated/graphql';
 import { Link } from 'react-router-dom';
 import LoadingSpinner from 'shared/components/LoadingSpinner';
+import theme from './ThemeStyles';
 import ControlledInput from 'shared/components/ControlledInput';
 import { CaretDown, CaretRight } from 'shared/icons';
 import useStickyState from 'shared/hooks/useStickyState';
 import { usePopup } from 'shared/components/PopupMenu';

+const colors = [theme.colors.primary, theme.colors.secondary];
+
 const TeamContainer = styled.div`
  display: flex;
  flex-direction: column;
@ -24,7 +27,6 @@ const TeamTitleText = styled.span`
  font-size: 14px;
  font-weight: 700;
 `;
-
 const TeamProjects = styled.div`
  display: flex;
  flex-direction: column;
--- a/frontend/src/App/Routes.tsx
+++ b/frontend/src/App/Routes.tsx
@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Switch, Route, useHistory, useLocation, Redirect } from 'react-router-dom';
+import { Switch, Route, useHistory } from 'react-router-dom';
 import * as H from 'history';

 import Dashboard from 'Dashboard';
@ -13,6 +13,8 @@ import Login from 'Auth';
 import Register from 'Register';
 import Profile from 'Profile';
 import styled from 'styled-components';
+import JwtDecode from 'jwt-decode';
+import { setAccessToken } from 'shared/utils/accessToken';
 import { useCurrentUser } from 'App/context';

 const MainContent = styled.div`
@ -24,64 +26,67 @@ const MainContent = styled.div`
  flex-grow: 1;
 `;

-type ValidateTokenResponse = {
-  valid: boolean;
-  userID: string;
+type RefreshTokenResponse = {
+  accessToken: string;
+  setup?: null | { confirmToken: string };
 };

-const UserRequiredRoute: React.FC<any> = ({ children }) => {
-  const { user } = useCurrentUser();
-  const location = useLocation();
-  if (user) {
-    return children;
-  }
-  return (
-    <Redirect
-      to={{
-        pathname: '/login',
-        state: { redirect: location.pathname },
-      }}
-    />
-  );
-};
-
-const Routes: React.FC = () => {
+const AuthorizedRoutes = () => {
+  const history = useHistory();
  const [loading, setLoading] = useState(true);
  const { setUser } = useCurrentUser();
  useEffect(() => {
-    fetch('/auth/validate', {
+    fetch('/auth/refresh_token', {
      method: 'POST',
      credentials: 'include',
-    }).then(async (x) => {
-      const response: ValidateTokenResponse = await x.json();
-      const { valid, userID } = response;
-      if (valid) {
-        setUser(userID);
+    }).then(async x => {
+      const { status } = x;
+      if (status === 400) {
+        history.replace('/login');
+      } else {
+        const response: RefreshTokenResponse = await x.json();
+        const { accessToken, setup } = response;
+        if (setup) {
+          history.replace(`/register?confirmToken=${setup.confirmToken}`);
+        } else {
+          const claims: JWTToken = JwtDecode(accessToken);
+          const currentUser = {
+            id: claims.userId,
+            roles: { org: claims.orgRole, teams: new Map<string, string>(), projects: new Map<string, string>() },
+          };
+          setUser(currentUser);
+          setAccessToken(accessToken);
+        }
      }
      setLoading(false);
    });
  }, []);
-  if (loading) return null;
-  return (
+  return loading ? null : (
    <Switch>
-      <Route exact path="/login" component={Login} />
-      <Route exact path="/register" component={Register} />
-      <Route exact path="/confirm" component={Confirm} />
-      <Switch>
-        <MainContent>
-          <Route path="/p/:projectID" component={Project} />
-
-          <UserRequiredRoute>
-            <Route exact path="/" component={Projects} />
-            <Route path="/teams/:teamID" component={Teams} />
-            <Route path="/profile" component={Profile} />
-            <Route path="/admin" component={Admin} />
-            <Route path="/tasks" component={MyTasks} />
-          </UserRequiredRoute>
-        </MainContent>
-      </Switch>
+      <MainContent>
+        <Route exact path="/" component={Dashboard} />
+        <Route exact path="/projects" component={Projects} />
+        <Route path="/projects/:projectID" component={Project} />
+        <Route path="/teams/:teamID" component={Teams} />
+        <Route path="/profile" component={Profile} />
+        <Route path="/admin" component={Admin} />
+        <Route path="/tasks" component={MyTasks} />
+      </MainContent>
    </Switch>
  );
 };

+type RoutesProps = {
+  history: H.History;
+};
+
+const Routes: React.FC<RoutesProps> = () => (
+  <Switch>
+    <Route exact path="/login" component={Login} />
+    <Route exact path="/register" component={Register} />
+    <Route exact path="/confirm" component={Confirm} />
+    <AuthorizedRoutes />
+  </Switch>
+);
+
 export default Routes;
--- a/frontend/src/App/Toast.ts
+++ b/frontend/src/App/Toast.ts
@ -1,35 +0,0 @@
-import styled from 'styled-components';
-import { ToastContainer } from 'react-toastify';
-
-const ToastedContainer = styled(ToastContainer).attrs({
-  // custom props
-})`
-  .Toastify__toast-container {
-  }
-  .Toastify__toast {
-    padding: 5px;
-    margin-left: 5px;
-    margin-right: 5px;
-    border-radius: 10px;
-    background: #7367f0;
-    color: #fff;
-  }
-  .Toastify__toast--error {
-    background: ${props => props.theme.colors.danger};
-  }
-  .Toastify__toast--warning {
-    background: ${props => props.theme.colors.warning};
-  }
-  .Toastify__toast--success {
-    background: ${props => props.theme.colors.success};
-  }
-  .Toastify__toast-body {
-  }
-  .Toastify__progress-bar {
-  }
-  .Toastify__close-button {
-    display: none;
-  }
-`;
-
-export default ToastedContainer;
--- a/frontend/src/App/TopNavbar/index.tsx
+++ b/frontend/src/App/TopNavbar/index.tsx
@ -1,24 +1,76 @@
-import React, { useState } from 'react';
+import React from 'react';
 import TopNavbar, { MenuItem } from 'shared/components/TopNavbar';
-import LoggedOutNavbar from 'shared/components/TopNavbar/LoggedOut';
 import { ProfileMenu } from 'shared/components/DropdownMenu';
-import polling from 'shared/utils/polling';
-import { useHistory, useRouteMatch } from 'react-router';
-import { useCurrentUser } from 'App/context';
+import ProjectSettings, { DeleteConfirm, DELETE_INFO } from 'shared/components/ProjectSettings';
+import { useHistory } from 'react-router';
+import { PermissionLevel, PermissionObjectType, useCurrentUser } from 'App/context';
 import {
  RoleCode,
  useTopNavbarQuery,
-  useNotificationAddedSubscription,
-  useHasUnreadNotificationsQuery,
+  useDeleteProjectMutation,
+  GetProjectsDocument,
 } from 'shared/generated/graphql';
 import { usePopup, Popup } from 'shared/components/PopupMenu';
+import produce from 'immer';
 import MiniProfile from 'shared/components/MiniProfile';
 import cache from 'App/cache';
 import NotificationPopup, { NotificationItem } from 'shared/components/NotifcationPopup';
-import theme from 'App/ThemeStyles';
+import theme from './ThemeStyles';
 import ProjectFinder from './ProjectFinder';

-// TODO: Move to context based navbar?
+type ProjectPopupProps = {
+  history: any;
+  name: string;
+  projectID: string;
+};
+
+export const ProjectPopup: React.FC<ProjectPopupProps> = ({ history, name, projectID }) => {
+  const { hidePopup, setTab } = usePopup();
+  const [deleteProject] = useDeleteProjectMutation({
+    update: (client, deleteData) => {
+      const cacheData: any = client.readQuery({
+        query: GetProjectsDocument,
+      });
+
+      const newData = produce(cacheData, (draftState: any) => {
+        draftState.projects = draftState.projects.filter(
+          (project: any) => project.id !== deleteData.data?.deleteProject.project.id,
+        );
+      });
+
+      client.writeQuery({
+        query: GetProjectsDocument,
+        data: {
+          ...newData,
+        },
+      });
+    },
+  });
+  return (
+    <>
+      <Popup title={null} tab={0}>
+        <ProjectSettings
+          onDeleteProject={() => {
+            setTab(1, { width: 300 });
+          }}
+        />
+      </Popup>
+      <Popup title={`Delete the "${name}" project?`} tab={1}>
+        <DeleteConfirm
+          description={DELETE_INFO.DELETE_PROJECTS.description}
+          deletedItems={DELETE_INFO.DELETE_PROJECTS.deletedItems}
+          onConfirmDelete={() => {
+            if (projectID) {
+              deleteProject({ variables: { projectID } });
+              hidePopup();
+              history.push('/projects');
+            }
+          }}
+        />
+      </Popup>
+    </>
+  );
+};

 type GlobalTopNavbarProps = {
  nameOnly?: boolean;
@ -39,7 +91,7 @@ type GlobalTopNavbarProps = {
  onRemoveInvitedFromBoard?: (email: string) => void;
 };

-const LoggedInNavbar: React.FC<GlobalTopNavbarProps> = ({
+const GlobalTopNavbar: React.FC<GlobalTopNavbarProps> = ({
  currentTab,
  onSetTab,
  menuType,
@ -55,33 +107,31 @@ const LoggedInNavbar: React.FC<GlobalTopNavbarProps> = ({
  onRemoveInvitedFromBoard,
  onRemoveFromBoard,
 }) => {
-  const [notifications, setNotifications] = useState<Array<{ id: string; notification: { actionType: string } }>>([]);
-  const { data } = useTopNavbarQuery({
-    onCompleted: (d) => {
-      setNotifications((n) => [...n, ...d.notifications]);
-    },
-  });
-  const { data: nData, loading } = useNotificationAddedSubscription({
-    onSubscriptionData: (d) => {
-      setNotifications((n) => {
-        if (d.subscriptionData.data) {
-          return [...n, d.subscriptionData.data.notificationAdded];
-        }
-        return n;
-      });
+  const { user, setUserRoles, setUser } = useCurrentUser();
+  const { loading, data } = useTopNavbarQuery({
+    onCompleted: response => {
+      if (user && user.roles) {
+        setUserRoles({
+          org: user.roles.org,
+          teams: response.me.teamRoles.reduce((map, obj) => {
+            map.set(obj.teamID, obj.roleCode);
+            return map;
+          }, new Map<string, string>()),
+          projects: response.me.projectRoles.reduce((map, obj) => {
+            map.set(obj.projectID, obj.roleCode);
+            return map;
+          }, new Map<string, string>()),
+        });
+      }
    },
  });
  const { showPopup, hidePopup } = usePopup();
-  const { setUser } = useCurrentUser();
-  const { data: unreadData, refetch: refetchHasUnread } = useHasUnreadNotificationsQuery({
-    pollInterval: polling.UNREAD_NOTIFICATIONS,
-  });
  const history = useHistory();
  const onLogout = () => {
    fetch('/auth/logout', {
      method: 'POST',
      credentials: 'include',
-    }).then(async (x) => {
+    }).then(async x => {
      const { status } = x;
      if (status === 200) {
        cache.reset();
@ -97,7 +147,7 @@ const LoggedInNavbar: React.FC<GlobalTopNavbarProps> = ({
      <Popup title={null} tab={0}>
        <ProfileMenu
          onLogout={onLogout}
-          showAdminConsole // TODO: add permision check
+          showAdminConsole={user ? user.roles.org === 'admin' : false}
          onAdminConsole={() => {
            history.push('/admin');
            hidePopup();
@ -118,20 +168,30 @@ const LoggedInNavbar: React.FC<GlobalTopNavbarProps> = ({
    }
  };

-  // TODO: rewrite popup to contain subscription and notification fetch
  const onNotificationClick = ($target: React.RefObject<HTMLElement>) => {
-    showPopup($target, <NotificationPopup onToggleRead={() => refetchHasUnread()} />, {
-      width: 605,
-      borders: false,
-      diamondColor: theme.colors.primary,
-    });
+    if (data) {
+      showPopup(
+        $target,
+        <NotificationPopup>
+          {data.notifications.map(notification => (
+            <NotificationItem
+              title={notification.entity.name}
+              description={`${notification.actor.name} added you as a meber to the task "${notification.entity.name}"`}
+              createdAt={notification.createdAt}
+            />
+          ))}
+        </NotificationPopup>,
+        { width: 415, borders: false, diamondColor: theme.colors.primary },
+      );
+    }
  };

-  // TODO: readd permision check
-  // const userIsTeamOrProjectAdmin = user.isAdmin(PermissionLevel.TEAM, PermissionObjectType.TEAM, teamID);
-  const userIsTeamOrProjectAdmin = true;
+  if (!user) {
+    return null;
+  }
+  const userIsTeamOrProjectAdmin = user.isAdmin(PermissionLevel.TEAM, PermissionObjectType.TEAM, teamID);
  const onInvitedMemberProfile = ($targetRef: React.RefObject<HTMLElement>, email: string) => {
-    const member = projectInvitedMembers ? projectInvitedMembers.find((u) => u.email === email) : null;
+    const member = projectInvitedMembers ? projectInvitedMembers.find(u => u.email === email) : null;
    if (member) {
      showPopup(
        $targetRef,
@ -159,7 +219,7 @@ const LoggedInNavbar: React.FC<GlobalTopNavbarProps> = ({
  };

  const onMemberProfile = ($targetRef: React.RefObject<HTMLElement>, memberID: string) => {
-    const member = projectMembers ? projectMembers.find((u) => u.id === memberID) : null;
+    const member = projectMembers ? projectMembers.find(u => u.id === memberID) : null;
    const warning =
      'You can’t leave because you are the only admin. To make another user an admin, click their avatar, select “Change permissions…”, and select “Admin”.';
    if (member) {
@ -168,7 +228,7 @@ const LoggedInNavbar: React.FC<GlobalTopNavbarProps> = ({
        <MiniProfile
          warning={member.role && member.role.code === 'owner' ? warning : null}
          canChangeRole={userIsTeamOrProjectAdmin}
-          onChangeRole={(roleCode) => {
+          onChangeRole={roleCode => {
            if (onChangeRole) {
              onChangeRole(member.id, roleCode);
            }
@ -189,15 +249,12 @@ const LoggedInNavbar: React.FC<GlobalTopNavbarProps> = ({
    }
  };

-  const user = data ? data.me?.user : null;
-
  return (
    <>
      <TopNavbar
-        hasUnread={unreadData ? unreadData.hasUnreadNotifications.unread : false}
        name={name}
        menuType={menuType}
-        onOpenProjectFinder={($target) => {
+        onOpenProjectFinder={$target => {
          showPopup(
            $target,
            <Popup tab={0} title={null}>
@ -206,7 +263,7 @@ const LoggedInNavbar: React.FC<GlobalTopNavbarProps> = ({
          );
        }}
        currentTab={currentTab}
-        user={user ?? null}
+        user={data ? data.me.user : null}
        canEditProjectName={userIsTeamOrProjectAdmin}
        canInviteUser={userIsTeamOrProjectAdmin}
        onMemberProfile={onMemberProfile}
@ -233,46 +290,4 @@ const LoggedInNavbar: React.FC<GlobalTopNavbarProps> = ({
  );
 };

-const GlobalTopNavbar: React.FC<GlobalTopNavbarProps> = ({
-  currentTab,
-  onSetTab,
-  menuType,
-  teamID,
-  onChangeProjectOwner,
-  onChangeRole,
-  name,
-  popupContent,
-  projectMembers,
-  projectInvitedMembers,
-  onInviteUser,
-  onSaveProjectName,
-  onRemoveInvitedFromBoard,
-  onRemoveFromBoard,
-}) => {
-  const { user } = useCurrentUser();
-  const match = useRouteMatch();
-  if (user) {
-    return (
-      <LoggedInNavbar
-        currentTab={currentTab}
-        projectID={null}
-        onSetTab={onSetTab}
-        menuType={menuType}
-        teamID={teamID}
-        onChangeRole={onChangeRole}
-        onChangeProjectOwner={onChangeProjectOwner}
-        name={name}
-        popupContent={popupContent}
-        projectMembers={projectMembers}
-        projectInvitedMembers={projectInvitedMembers}
-        onInviteUser={onInviteUser}
-        onSaveProjectName={onSaveProjectName}
-        onRemoveInvitedFromBoard={onRemoveInvitedFromBoard}
-        onRemoveFromBoard={onRemoveFromBoard}
-      />
-    );
-  }
-  return <LoggedOutNavbar match={match.url} name={name} menuType={menuType} />;
-};
-
 export default GlobalTopNavbar;
--- a/frontend/src/App/TopNavbar/ProjectPopup.tsx
+++ b/frontend/src/App/TopNavbar/ProjectPopup.tsx
@ -1,89 +0,0 @@
-import React, { useState } from 'react';
-import ProjectSettings, { DeleteConfirm, DELETE_INFO, PublicConfirm } from 'shared/components/ProjectSettings';
-import {
-  useDeleteProjectMutation,
-  GetProjectsDocument,
-  useToggleProjectVisibilityMutation,
-} from 'shared/generated/graphql';
-import { usePopup, Popup } from 'shared/components/PopupMenu';
-import produce from 'immer';
-
-type ProjectPopupProps = {
-  history: any;
-  name: string;
-  publicOn: string | null;
-  projectID: string;
-};
-
-const ProjectPopup: React.FC<ProjectPopupProps> = ({ history, name, projectID, publicOn: initialPublicOn }) => {
-  const { hidePopup, setTab } = usePopup();
-  const [publicOn, setPublicOn] = useState(initialPublicOn);
-  const [toggleProjectVisibility] = useToggleProjectVisibilityMutation({
-    onCompleted: data => {
-      setPublicOn(data.toggleProjectVisibility.project.publicOn);
-    },
-  });
-  const [deleteProject] = useDeleteProjectMutation({
-    update: (client, deleteData) => {
-      const cacheData: any = client.readQuery({
-        query: GetProjectsDocument,
-      });
-
-      const newData = produce(cacheData, (draftState: any) => {
-        draftState.projects = draftState.projects.filter(
-          (project: any) => project.id !== deleteData.data?.deleteProject.project.id,
-        );
-      });
-
-      client.writeQuery({
-        query: GetProjectsDocument,
-        data: {
-          ...newData,
-        },
-      });
-    },
-  });
-  return (
-    <>
-      <Popup title={null} tab={0}>
-        <ProjectSettings
-          publicOn={publicOn}
-          onToggleProjectVisible={visible => {
-            if (visible) {
-              setTab(2, { width: 300 });
-            } else {
-              toggleProjectVisibility({ variables: { projectID, isPublic: false } });
-            }
-          }}
-          onDeleteProject={() => {
-            setTab(1, { width: 300 });
-          }}
-        />
-      </Popup>
-      <Popup title="Change to public?" tab={1}>
-        <PublicConfirm
-          onConfirm={() => {
-            if (projectID) {
-              toggleProjectVisibility({ variables: { projectID, isPublic: true } });
-            }
-          }}
-        />
-      </Popup>
-      <Popup title={`Delete the "${name}" project?`} tab={1}>
-        <DeleteConfirm
-          description={DELETE_INFO.DELETE_PROJECTS.description}
-          deletedItems={DELETE_INFO.DELETE_PROJECTS.deletedItems}
-          onConfirmDelete={() => {
-            if (projectID) {
-              deleteProject({ variables: { projectID } });
-              hidePopup();
-              history.push('/projects');
-            }
-          }}
-        />
-      </Popup>
-    </>
-  );
-};
-
-export default ProjectPopup;
--- a/frontend/src/App/cache.ts
+++ b/frontend/src/App/cache.ts
@ -1,4 +1,4 @@
-import { InMemoryCache } from '@apollo/client';
+import { InMemoryCache } from 'apollo-cache-inmemory';

 const cache = new InMemoryCache();

--- a/frontend/src/App/context.ts
+++ b/frontend/src/App/context.ts
@ -1,20 +1,79 @@
 import React, { useContext } from 'react';

-type UserContextState = {
-  user: string | null;
-  setUser: (user: string | null) => void;
+export enum PermissionLevel {
+  ORG,
+  TEAM,
+  PROJECT,
+}
+
+export enum PermissionObjectType {
+  ORG,
+  TEAM,
+  PROJECT,
+  TASK,
+}
+
+export type CurrentUserRoles = {
+  org: string;
+  teams: Map<string, string>;
+  projects: Map<string, string>;
 };

+export interface CurrentUserRaw {
+  id: string;
+  roles: CurrentUserRoles;
+}
+
+type UserContextState = {
+  user: CurrentUserRaw | null;
+  setUser: (user: CurrentUserRaw | null) => void;
+  setUserRoles: (roles: CurrentUserRoles) => void;
+};
 export const UserContext = React.createContext<UserContextState>({
  user: null,
  setUser: _user => null,
+  setUserRoles: roles => null,
 });

+export interface CurrentUser extends CurrentUserRaw {
+  isAdmin: (level: PermissionLevel, objectType: PermissionObjectType, subjectID?: string | null) => boolean;
+  isVisible: (level: PermissionLevel, objectType: PermissionObjectType, subjectID?: string | null) => boolean;
+}
+
 export const useCurrentUser = () => {
-  const { user, setUser } = useContext(UserContext);
+  const { user, setUser, setUserRoles } = useContext(UserContext);
+  let currentUser: CurrentUser | null = null;
+  if (user) {
+    currentUser = {
+      ...user,
+      isAdmin(level: PermissionLevel, objectType: PermissionObjectType, subjectID?: string | null) {
+        if (user.roles.org === 'admin') {
+          return true;
+        }
+        switch (level) {
+          case PermissionLevel.TEAM:
+            return subjectID ? this.roles.teams.get(subjectID) === 'admin' : false;
+          default:
+            return false;
+        }
+      },
+      isVisible(level: PermissionLevel, objectType: PermissionObjectType, subjectID?: string | null) {
+        if (user.roles.org === 'admin') {
+          return true;
+        }
+        switch (level) {
+          case PermissionLevel.TEAM:
+            return subjectID ? this.roles.teams.get(subjectID) !== null : false;
+          default:
+            return false;
+        }
+      },
+    };
+  }
  return {
-    user,
+    user: currentUser,
    setUser,
+    setUserRoles,
  };
 };

--- a/frontend/src/App/fonts.css
+++ b/frontend/src/App/fonts.css
@ -1,6 +0,0 @@
-@font-face {
-  font-family: 'Open Sans';
-  src: url(../shared/fonts/OpenSans-Regular.ttf) format('truetype');
-  /* other formats include: 'woff2', 'truetype, 'opentype',
-                            'embedded-opentype', and 'svg' */
-}
--- a/frontend/src/App/index.tsx
+++ b/frontend/src/App/index.tsx
@ -1,32 +1,75 @@
 import React, { useState, useEffect } from 'react';
-import { BrowserRouter } from 'react-router-dom';
+import jwtDecode from 'jwt-decode';
+import { createBrowserHistory } from 'history';
+import { Router } from 'react-router';
 import { PopupProvider } from 'shared/components/PopupMenu';
+import { ToastContainer } from 'react-toastify';
+import { setAccessToken } from 'shared/utils/accessToken';
 import styled, { ThemeProvider } from 'styled-components';
 import NormalizeStyles from './NormalizeStyles';
 import BaseStyles from './BaseStyles';
 import theme from './ThemeStyles';
 import Routes from './Routes';
-import ToastedContainer from './Toast';
-import { UserContext } from './context';
+import { UserContext, CurrentUserRaw, CurrentUserRoles, PermissionLevel, PermissionObjectType } from './context';

 import 'react-toastify/dist/ReactToastify.css';
-import './fonts.css';
+
+const StyledContainer = styled(ToastContainer).attrs({
+  // custom props
+})`
+  .Toastify__toast-container {
+  }
+  .Toastify__toast {
+    padding: 5px;
+    margin-left: 5px;
+    margin-right: 5px;
+    border-radius: 10px;
+    background: #7367f0;
+    color: #fff;
+  }
+  .Toastify__toast--error {
+    background: ${props => props.theme.colors.danger};
+  }
+  .Toastify__toast--warning {
+    background: ${props => props.theme.colors.warning};
+  }
+  .Toastify__toast--success {
+    background: ${props => props.theme.colors.success};
+  }
+  .Toastify__toast-body {
+  }
+  .Toastify__progress-bar {
+  }
+  .Toastify__close-button {
+    display: none;
+  }
+`;
+
+const history = createBrowserHistory();

 const App = () => {
-  const [user, setUser] = useState<string | null>(null);
+  const [user, setUser] = useState<CurrentUserRaw | null>(null);
+  const setUserRoles = (roles: CurrentUserRoles) => {
+    if (user) {
+      setUser({
+        ...user,
+        roles,
+      });
+    }
+  };

  return (
    <>
-      <UserContext.Provider value={{ user, setUser }}>
+      <UserContext.Provider value={{ user, setUser, setUserRoles }}>
        <ThemeProvider theme={theme}>
          <NormalizeStyles />
          <BaseStyles />
-          <BrowserRouter>
+          <Router history={history}>
            <PopupProvider>
-              <Routes />
+              <Routes history={history} />
            </PopupProvider>
-          </BrowserRouter>
-          <ToastedContainer
+          </Router>
+          <StyledContainer
            position="bottom-right"
            autoClose={5000}
            hideProgressBar
--- a/frontend/src/Auth/Styles.ts
+++ b/frontend/src/Auth/Styles.ts
@ -4,20 +4,10 @@ export const Container = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
+  width: 100vw;
  height: 100vh;
-
-  @media (max-width: 600px) {
-    position: relative;
-    top: 30%;
-    font-size: 150px;
-  }
 `;

 export const LoginWrapper = styled.div`
-  width: 70%;
-
-  @media (max-width: 600px) {
-    width: 90%;
-    margin-top: 50vh;
-  }
+  width: 60%;
 `;
--- a/frontend/src/Auth/index.tsx
+++ b/frontend/src/Auth/index.tsx
@ -1,5 +1,7 @@
 import React, { useState, useEffect, useContext } from 'react';
-import { useHistory, useLocation } from 'react-router';
+import { useHistory } from 'react-router';
+import JwtDecode from 'jwt-decode';
+import { setAccessToken } from 'shared/utils/accessToken';
 import Login from 'shared/components/Login';
 import UserContext from 'App/context';
 import { Container, LoginWrapper } from './Styles';
@ -7,7 +9,6 @@ import { Container, LoginWrapper } from './Styles';
 const Auth = () => {
  const [invalidLoginAttempt, setInvalidLoginAttempt] = useState(0);
  const history = useHistory();
-  const location = useLocation<{ redirect: string } | undefined>();
  const { setUser } = useContext(UserContext);
  const login = (
    data: LoginFormData,
@ -21,7 +22,7 @@ const Auth = () => {
        username: data.username,
        password: data.password,
      }),
-    }).then(async (x) => {
+    }).then(async x => {
      if (x.status === 401) {
        setInvalidLoginAttempt(invalidLoginAttempt + 1);
        setError('username', { type: 'error', message: 'Invalid username' });
@ -29,27 +30,42 @@ const Auth = () => {
        setComplete(true);
      } else {
        const response = await x.json();
-        const { userID } = response;
-        setUser(userID);
-        if (location.state && location.state.redirect) {
-          history.push(location.state.redirect);
-        } else {
-          history.push('/');
-        }
+        const { accessToken } = response;
+        const claims: JWTToken = JwtDecode(accessToken);
+        const currentUser = {
+          id: claims.userId,
+          roles: { org: claims.orgRole, teams: new Map<string, string>(), projects: new Map<string, string>() },
+        };
+        setUser(currentUser);
+        setComplete(true);
+        setAccessToken(accessToken);
+
+        history.push('/');
      }
    });
  };

  useEffect(() => {
-    fetch('/auth/validate', {
+    fetch('/auth/refresh_token', {
      method: 'POST',
      credentials: 'include',
-    }).then(async (x) => {
-      const response = await x.json();
-      const { valid, userID } = response;
-      if (valid) {
-        setUser(userID);
-        history.replace('/projects');
+    }).then(async x => {
+      const { status } = x;
+      if (status === 200) {
+        const response: RefreshTokenResponse = await x.json();
+        const { accessToken, setup } = response;
+        if (setup) {
+          history.replace(`/register?confirmToken=${setup.confirmToken}`);
+        } else {
+          const claims: JWTToken = JwtDecode(accessToken);
+          const currentUser = {
+            id: claims.userId,
+            roles: { org: claims.orgRole, teams: new Map<string, string>(), projects: new Map<string, string>() },
+          };
+          setUser(currentUser);
+          setAccessToken(accessToken);
+          history.replace('/projects');
+        }
      }
    });
  }, []);
--- a/frontend/src/Confirm/index.tsx
+++ b/frontend/src/Confirm/index.tsx
@ -1,42 +1,58 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
+import axios from 'axios';
 import Confirm from 'shared/components/Confirm';
 import { useHistory, useLocation } from 'react-router';
 import * as QueryString from 'query-string';
-import { useCurrentUser } from 'App/context';
+import { toast } from 'react-toastify';
 import { Container, LoginWrapper } from './Styles';
+import JwtDecode from 'jwt-decode';
+import { setAccessToken } from 'shared/utils/accessToken';
+import { useCurrentUser } from 'App/context';

 const UsersConfirm = () => {
  const history = useHistory();
  const location = useLocation();
+  const [registered, setRegistered] = useState(false);
  const params = QueryString.parse(location.search);
-  const [hasFailed, setFailed] = useState(false);
  const { setUser } = useCurrentUser();
-  useEffect(() => {
-    fetch('/auth/confirm', {
-      method: 'POST',
-      body: JSON.stringify({
-        confirmToken: params.confirmToken,
-      }),
-    })
-      .then(async (x) => {
-        const { status } = x;
-        if (status === 200) {
-          const response = await x.json();
-          const { userID } = response;
-          setUser(userID);
-          history.push('/');
-        } else {
-          setFailed(true);
-        }
-      })
-      .catch(() => {
-        setFailed(false);
-      });
-  }, []);
  return (
    <Container>
      <LoginWrapper>
-        <Confirm hasConfirmToken={params.confirmToken !== undefined} hasFailed={hasFailed} />
+        <Confirm
+          hasConfirmToken={params.confirmToken !== undefined}
+          onConfirmUser={setFailed => {
+            fetch('/auth/confirm', {
+              method: 'POST',
+              body: JSON.stringify({
+                confirmToken: params.confirmToken,
+              }),
+            })
+              .then(async x => {
+                const { status } = x;
+                if (status === 200) {
+                  const response = await x.json();
+                  const { accessToken } = response;
+                  const claims: JWTToken = JwtDecode(accessToken);
+                  const currentUser = {
+                    id: claims.userId,
+                    roles: {
+                      org: claims.orgRole,
+                      teams: new Map<string, string>(),
+                      projects: new Map<string, string>(),
+                    },
+                  };
+                  setUser(currentUser);
+                  setAccessToken(accessToken);
+                  history.push('/');
+                } else {
+                  setFailed();
+                }
+              })
+              .catch(() => {
+                setFailed();
+              });
+          }}
+        />
      </LoginWrapper>
    </Container>
  );
--- a/frontend/src/MyTasks/index.tsx
+++ b/frontend/src/MyTasks/index.tsx
@ -26,7 +26,6 @@ import useOnOutsideClick from 'shared/hooks/onOutsideClick';
 import DueDateManager from 'shared/components/DueDateManager';
 import dayjs from 'dayjs';
 import useStickyState from 'shared/hooks/useStickyState';
-import { StaticContext } from 'react-router';
 import MyTasksSortPopup from './MyTasksSort';
 import MyTasksStatusPopup from './MyTasksStatus';
 import TaskEntry from './TaskEntry';
@ -62,7 +61,11 @@ function prettySort(sort: MyTasksSort) {
  if (sort === MyTasksSort.None) {
    return 'Sort';
  }
-  return `Sort: ${sort.charAt(0) + sort.slice(1).toLowerCase().replace(/_/gi, ' ')}`;
+  return `Sort: ${sort.charAt(0) +
+    sort
+      .slice(1)
+      .toLowerCase()
+      .replace(/_/gi, ' ')}`;
 }

 type Group = {
@ -72,7 +75,7 @@ type Group = {
 };
 const DueDateEditorLabel = styled.div`
  align-items: center;
-  color: ${(props) => props.theme.colors.text.primary};
+  color: ${props => props.theme.colors.text.primary};

  font-size: 11px;
  padding: 0 8px;
@ -104,16 +107,16 @@ const ProjectActionWrapper = styled.div<{ disabled?: boolean }>`
  display: flex;
  align-items: center;
  font-size: 15px;
-  color: ${(props) => props.theme.colors.text.primary};
+  color: ${props => props.theme.colors.text.primary};

  &:not(:last-of-type) {
    margin-right: 16px;
  }

  &:hover {
-    color: ${(props) => props.theme.colors.text.secondary};
+    color: ${props => props.theme.colors.text.secondary};
  }
-  ${(props) =>
+  ${props =>
    props.disabled &&
    css`
      opacity: 0.5;
@ -147,7 +150,7 @@ const ProjectAction: React.FC<ProjectActionProps> = ({ onClick, disabled = false

 const EditorPositioner = styled.div<{ top: number; left: number }>`
  position: absolute;
-  top: ${(p) => p.top}px;
+  top: ${p => p.top}px;
  justify-content: flex-end;
  margin-left: -100vw;
  z-index: 10000;
@ -157,7 +160,7 @@ const EditorPositioner = styled.div<{ top: number; left: number }>`
  height: 0;
  position: fixed;
  width: 100vw;
-  left: ${(p) => p.left}px;
+  left: ${p => p.left}px;
 `;

 const EditorPositionerContents = styled.div`
@ -165,15 +168,15 @@ const EditorPositionerContents = styled.div`
 `;

 const EditorContainer = styled.div<{ width: number }>`
-  border: 1px solid ${(props) => props.theme.colors.primary};
-  background: ${(props) => props.theme.colors.bg.secondary};
+  border: 1px solid ${props => props.theme.colors.primary};
+  background: ${props => props.theme.colors.bg.secondary};
  position: relative;
-  width: ${(p) => p.width}px;
+  width: ${p => p.width}px;
 `;

 const EditorCell = styled.div<{ width: number }>`
  display: flex;
-  width: ${(p) => p.width}px;
+  width: ${p => p.width}px;
 `;

 // TABLE
@ -221,7 +224,7 @@ const TaskGroupItems = styled.div`
 `;

 const ProjectPill = styled.div`
-  background-color: ${(props) => props.theme.colors.bg.primary};
+  background-color: ${props => props.theme.colors.bg.primary};
  text-overflow: ellipsis;
  border-radius: 10px;
  box-sizing: border-box;
@ -247,7 +250,7 @@ const ProjectPillName = styled.span`
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
-  color: ${(props) => props.theme.colors.text.primary};
+  color: ${props => props.theme.colors.text.primary};
 `;

 const ProjectPillColor = styled.svg`
@ -296,7 +299,7 @@ const OptionTitle = styled.div`
  white-space: nowrap;
 `;
 const OptionSubTitle = styled.div`
-  color: ${(props) => props.theme.colors.text.primary};
+  color: ${props => props.theme.colors.text.primary};
  font-size: 11px;
  margin-left: 8px;
  min-width: 50px;
@ -316,7 +319,7 @@ const Option = ({ innerProps, data }: any) => {
 };

 const TaskGroupHeaderContents = styled.div<{ width: number }>`
-  width: ${(p) => p.width}px;
+  width: ${p => p.width}px;
  left: 0;
  position: absolute;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
@ -353,13 +356,13 @@ const TaskGroupMinify = styled.div`
  transition-property: background, border, box-shadow, fill;
  cursor: pointer;
  svg {
-    fill: ${(props) => props.theme.colors.text.primary};
+    fill: ${props => props.theme.colors.text.primary};
    transition-duration: 0.2s;
    transition-property: background, border, box-shadow, fill;
  }

  &:hover svg {
-    fill: ${(props) => props.theme.colors.text.secondary};
+    fill: ${props => props.theme.colors.text.secondary};
  }
 `;
 const TaskGroupName = styled.div`
@ -368,7 +371,7 @@ const TaskGroupName = styled.div`
  display: flex;
  height: 50px;
  min-width: 1px;
-  color: ${(props) => props.theme.colors.text.secondary};
+  color: ${props => props.theme.colors.text.secondary};
  font-weight: 400;
 `;

@ -390,7 +393,7 @@ const Row = styled.div`
 `;

 const RowHeaderLeft = styled.div<{ width: number }>`
-  width: ${(p) => p.width}px;
+  width: ${p => p.width}px;

  align-items: stretch;
  display: flex;
@ -402,7 +405,7 @@ const RowHeaderLeft = styled.div<{ width: number }>`
 `;
 const RowHeaderLeftInner = styled.div`
  align-items: stretch;
-  color: ${(props) => props.theme.colors.text.primary};
+  color: ${props => props.theme.colors.text.primary};
  display: flex;
  flex: 1 0 auto;
  font-size: 12px;
@ -426,7 +429,7 @@ const RowHeaderLeftNameText = styled.div`
 `;

 const RowHeaderRight = styled.div<{ left: number }>`
-  left: ${(p) => p.left}px;
+  left: ${p => p.left}px;
  right: 0px;
  height: 37px;
  position: absolute;
@ -458,7 +461,7 @@ const RowHeaderRightContainer = styled.div`
 `;

 const ItemWrapper = styled.div<{ width: number }>`
-  width: ${(p) => p.width}px;
+  width: ${p => p.width}px;
  align-items: center;
  border: 1px solid #414561;
  border-bottom: 0;
@ -471,11 +474,11 @@ const ItemWrapper = styled.div<{ width: number }>`
  margin-right: -1px;
  padding: 0 8px;
  position: relative;
-  color: ${(props) => props.theme.colors.text.primary};
+  color: ${props => props.theme.colors.text.primary};
  border-bottom: 1px solid #414561;
  &:hover {
-    background: ${(props) => props.theme.colors.primary};
-    color: ${(props) => props.theme.colors.text.secondary};
+    background: ${props => props.theme.colors.primary};
+    color: ${props => props.theme.colors.text.secondary};
  }
 `;
 const ItemsContainer = styled.div`
@ -562,37 +565,14 @@ const Projects = () => {
            onCancel={() => null}
            onDueDateChange={(task, dueDate, hasTime) => {
              if (dateEditor.task) {
-                hidePopup();
-                updateTaskDueDate({
-                  variables: {
-                    taskID: dateEditor.task.id,
-                    dueDate,
-                    hasTime,
-                    deleteNotifications: [],
-                    updateNotifications: [],
-                    createNotifications: [],
-                  },
-                });
-                setDateEditor((prev) => ({
-                  ...prev,
-                  task: { ...task, dueDate: { at: dueDate.toISOString(), notifications: [] }, hasTime },
-                }));
+                updateTaskDueDate({ variables: { taskID: dateEditor.task.id, dueDate, hasTime } });
+                setDateEditor(prev => ({ ...prev, task: { ...task, dueDate: dueDate.toISOString(), hasTime } }));
              }
            }}
-            onRemoveDueDate={(task) => {
+            onRemoveDueDate={task => {
              if (dateEditor.task) {
-                hidePopup();
-                updateTaskDueDate({
-                  variables: {
-                    taskID: dateEditor.task.id,
-                    dueDate: null,
-                    hasTime: false,
-                    deleteNotifications: [],
-                    updateNotifications: [],
-                    createNotifications: [],
-                  },
-                });
-                setDateEditor((prev) => ({ ...prev, task: { ...task, hasTime: false } }));
+                updateTaskDueDate({ variables: { taskID: dateEditor.task.id, dueDate: null, hasTime: false } });
+                setDateEditor(prev => ({ ...prev, task: { ...task, hasTime: false } }));
              }
            }}
          />
@ -607,8 +587,8 @@ const Projects = () => {
      updateApolloCache<MyTasksQuery>(
        client,
        MyTasksDocument,
-        (cache) =>
-          produce(cache, (draftCache) => {
+        cache =>
+          produce(cache, draftCache => {
            if (newTaskData.data) {
              draftCache.myTasks.tasks.unshift(newTaskData.data.createTask);
            }
@ -638,7 +618,7 @@ const Projects = () => {
      groups.push({
        id: 'recently-assigned',
        name: 'Recently Assigned',
-        tasks: data.myTasks.tasks.map((task) => ({
+        tasks: data.myTasks.tasks.map(task => ({
          ...task,
          labels: [],
          position: 0,
@ -648,27 +628,27 @@ const Projects = () => {
      let { tasks } = data.myTasks;
      if (filters.sort === MyTasksSort.DueDate) {
        const group: Group = { id: 'due_date', name: null, tasks: [] };
-        data.myTasks.tasks.forEach((task) => {
+        data.myTasks.tasks.forEach(task => {
          if (task.dueDate) {
            group.tasks.push({ ...task, labels: [], position: 0 });
          }
        });
        groups.push(group);
-        tasks = tasks.filter((t) => t.dueDate === null);
+        tasks = tasks.filter(t => t.dueDate === null);
      }
      const projects = new Map<string, Array<Task>>();
-      data.myTasks.projects.forEach((p) => {
+      data.myTasks.projects.forEach(p => {
        if (!projects.has(p.projectID)) {
          projects.set(p.projectID, []);
        }
        const prev = projects.get(p.projectID);
-        const task = tasks.find((t) => t.id === p.taskID);
+        const task = tasks.find(t => t.id === p.taskID);
        if (prev && task) {
          projects.set(p.projectID, [...prev, { ...task, labels: [], position: 0 }]);
        }
      });
      for (const [id, pTasks] of projects) {
-        const project = data.projects.find((c) => c.id === id);
+        const project = data.projects.find(c => c.id === id);
        if (pTasks.length === 0) continue;
        if (project) {
          groups.push({
@ -678,8 +658,8 @@ const Projects = () => {
              if (a.dueDate === null && b.dueDate === null) return 0;
              if (a.dueDate === null && b.dueDate !== null) return 1;
              if (a.dueDate !== null && b.dueDate === null) return -1;
-              const first = dayjs(a.dueDate.at);
-              const second = dayjs(b.dueDate.at);
+              const first = dayjs(a.dueDate);
+              const second = dayjs(b.dueDate);
              if (first.isSame(second, 'minute')) return 0;
              if (first.isAfter(second)) return -1;
              return 1;
@ -701,13 +681,13 @@ const Projects = () => {
          <ProjectActions />
          <ProjectActions>
            <ProjectAction
-              onClick={($target) => {
+              onClick={$target => {
                showPopup(
                  $target,
                  <MyTasksStatusPopup
                    status={filters.status}
-                    onChangeStatus={(status) => {
-                      setFilters((prev) => ({ ...prev, status }));
+                    onChangeStatus={status => {
+                      setFilters(prev => ({ ...prev, status }));
                      hidePopup();
                    }}
                  />,
@ -719,13 +699,13 @@ const Projects = () => {
              <ProjectActionText>{prettyStatus(filters.status)}</ProjectActionText>
            </ProjectAction>
            <ProjectAction
-              onClick={($target) => {
+              onClick={$target => {
                showPopup(
                  $target,
                  <MyTasksSortPopup
                    sort={filters.sort}
-                    onChangeSort={(sort) => {
-                      setFilters((prev) => ({ ...prev, sort }));
+                    onChangeSort={sort => {
+                      setFilters(prev => ({ ...prev, sort }));
                      hidePopup();
                    }}
                  />,
@ -772,8 +752,8 @@ const Projects = () => {
          <VerticalScoller>
            <VerticalScollerInner>
              <TableContents>
-                {groups.map((group) => {
-                  const isMinified = minified.find((m) => m === group.id) ?? false;
+                {groups.map(group => {
+                  const isMinified = minified.find(m => m === group.id) ?? false;
                  return (
                    <TaskGroupContainer key={group.id}>
                      {group.name && (
@ -781,9 +761,9 @@ const Projects = () => {
                          <TaskGroupHeaderContents width={leftRow}>
                            <TaskGroupMinify
                              onClick={() => {
-                                setMinified((prev) => {
+                                setMinified(prev => {
                                  if (isMinified) {
-                                    return prev.filter((c) => c !== group.id);
+                                    return prev.filter(c => c !== group.id);
                                  }
                                  return [...prev, group.id];
                                });
@ -801,40 +781,29 @@ const Projects = () => {
                      )}
                      <TaskGroupItems>
                        {!isMinified &&
-                          group.tasks.map((task) => {
-                            const projectID = data.myTasks.projects.find((t) => t.taskID === task.id)?.projectID;
-                            const projectName = data.projects.find((p) => p.id === projectID)?.name;
+                          group.tasks.map(task => {
+                            const projectID = data.myTasks.projects.find(t => t.taskID === task.id)?.projectID;
+                            const projectName = data.projects.find(p => p.id === projectID)?.name;
                            return (
                              <TaskEntry
                                key={task.id}
                                complete={task.complete ?? false}
-                                onToggleComplete={(complete) => {
+                                onToggleComplete={complete => {
                                  setTaskComplete({ variables: { taskID: task.id, complete } });
                                }}
                                onTaskDetails={() => {
                                  history.push(`${match.url}/c/${task.id}`);
                                }}
                                onRemoveDueDate={() => {
-                                  updateTaskDueDate({
-                                    variables: {
-                                      taskID: task.id,
-                                      dueDate: null,
-                                      hasTime: false,
-                                      deleteNotifications: [],
-                                      updateNotifications: [],
-                                      createNotifications: [],
-                                    },
-                                  });
+                                  updateTaskDueDate({ variables: { taskID: task.id, dueDate: null, hasTime: false } });
                                }}
                                project={projectName ?? 'none'}
-                                dueDate={task.dueDate.at}
+                                dueDate={task.dueDate}
                                hasTime={task.hasTime ?? false}
                                name={task.name}
-                                onEditName={(name) => updateTaskName({ variables: { taskID: task.id, name } })}
+                                onEditName={name => updateTaskName({ variables: { taskID: task.id, name } })}
                                onEditProject={onEditProject}
-                                onEditDueDate={($target) =>
-                                  onEditDueDate({ ...task, position: 0, labels: [] }, $target)
-                                }
+                                onEditDueDate={$target => onEditDueDate({ ...task, position: 0, labels: [] }, $target)}
                              />
                            );
                          })}
@ -853,9 +822,7 @@ const Projects = () => {
                <EditorCell width={120}>
                  <DueDateEditorLabel>
                    {dateEditor.task.dueDate
-                      ? dayjs(dateEditor.task.dueDate.at).format(
-                          dateEditor.task.hasTime ? 'MMM D [at] h:mm A' : 'MMM D',
-                        )
+                      ? dayjs(dateEditor.task.dueDate).format(dateEditor.task.hasTime ? 'MMM D [at] h:mm A' : 'MMM D')
                      : ''}
                  </DueDateEditorLabel>
                </EditorCell>
@ -889,17 +856,17 @@ const Projects = () => {
        )}
        <Route
          path={`${match.path}/c/:taskID`}
-          render={() => {
-            return (
-              <Details
-                refreshCache={NOOP}
-                availableMembers={[]}
-                projectURL={`${match.url}`}
-                onTaskNameChange={(updatedTask, newName) => {
-                  updateTaskName({ variables: { taskID: updatedTask.id, name: newName } });
-                }}
-                onTaskDescriptionChange={(updatedTask, newDescription) => {
-                  /*
+          render={(routeProps: RouteComponentProps<TaskRouteProps>) => (
+            <Details
+              refreshCache={NOOP}
+              availableMembers={[]}
+              projectURL={`${match.url}`}
+              taskID={routeProps.match.params.taskID}
+              onTaskNameChange={(updatedTask, newName) => {
+                updateTaskName({ variables: { taskID: updatedTask.id, name: newName } });
+              }}
+              onTaskDescriptionChange={(updatedTask, newDescription) => {
+                /*
                updateTaskDescription({
                  variables: { taskID: updatedTask.id, description: newDescription },
                  optimisticResponse: {
@ -912,13 +879,13 @@ const Projects = () => {
                  },
                });
                */
-                }}
-                onDeleteTask={(deletedTask) => {
-                  // deleteTask({ variables: { taskID: deletedTask.id } });
-                  history.push(`${match.url}`);
-                }}
-                onOpenAddLabelPopup={(task, $targetRef) => {
-                  /*
+              }}
+              onDeleteTask={deletedTask => {
+                // deleteTask({ variables: { taskID: deletedTask.id } });
+                history.push(`${match.url}`);
+              }}
+              onOpenAddLabelPopup={(task, $targetRef) => {
+                /*
                taskLabelsRef.current = task.labels;
                showPopup(
                  $targetRef,
@ -933,10 +900,9 @@ const Projects = () => {
                  />,
                );
                */
-                }}
-              />
-            );
-          }}
+              }}
+            />
+          )}
        />
      </>
    );
--- a/frontend/src/Profile/index.tsx
+++ b/frontend/src/Profile/index.tsx
@ -1,6 +1,7 @@
 import React, { useRef, useEffect } from 'react';
 import styled from 'styled-components/macro';
 import GlobalTopNavbar from 'App/TopNavbar';
+import { getAccessToken } from 'shared/utils/accessToken';
 import Settings from 'shared/components/Settings';
 import {
  useMeQuery,
@ -44,15 +45,18 @@ const Projects = () => {
        name="file"
        style={{ display: 'none' }}
        ref={$fileUpload}
-        onChange={(e) => {
+        onChange={e => {
          if (e.target.files) {
            const fileData = new FormData();
            fileData.append('file', e.target.files[0]);
+            const accessToken = getAccessToken();
            axios
              .post('/users/me/avatar', fileData, {
-                withCredentials: true,
+                headers: {
+                  Authorization: `Bearer ${accessToken}`,
+                },
              })
-              .then((res) => {
+              .then(res => {
                if ($fileUpload && $fileUpload.current) {
                  $fileUpload.current.value = '';
                  refetch();
@ -62,7 +66,7 @@ const Projects = () => {
        }}
      />
      <GlobalTopNavbar projectID={null} onSaveProjectName={NOOP} name={null} />
-      {!loading && data && data.me && (
+      {!loading && data && (
        <Settings
          profile={data.me.user}
          onProfileAvatarChange={() => {
@ -71,13 +75,13 @@ const Projects = () => {
            }
          }}
          onResetPassword={(password, done) => {
-            updateUserPassword({ variables: { userID: user, password } });
+            updateUserPassword({ variables: { userID: user.id, password } });
            toast('Password was changed!');
            done();
          }}
          onChangeUserInfo={(d, done) => {
            updateUserInfo({
-              variables: { name: d.fullName, bio: d.bio, email: d.email, initials: d.initials },
+              variables: { name: d.full_name, bio: d.bio, email: d.email, initials: d.initials },
            });
            toast('User info was saved!');
            done();
--- a/frontend/src/Projects/Project/Board/ControlFilter.tsx
+++ b/frontend/src/Projects/Project/Board/ControlFilter.tsx
@ -7,13 +7,12 @@ import { Popup, usePopup } from 'shared/components/PopupMenu';
 import produce from 'immer';
 import { mixin } from 'shared/utils/styles';
 import Member from 'shared/components/Member';
-import { useLabelsQuery } from 'shared/generated/graphql';

 const FilterMember = styled(Member)`
  margin: 2px 0;
  &:hover {
    cursor: pointer;
-    background: ${(props) => props.theme.colors.primary};
+    background: ${props => props.theme.colors.primary};
  }
 `;

@ -29,7 +28,7 @@ export const Label = styled.li`
 `;

 export const CardLabel = styled.span<{ active: boolean; color: string }>`
-  ${(props) =>
+  ${props =>
    props.active &&
    css`
      margin-left: 4px;
@ -44,7 +43,7 @@ export const CardLabel = styled.span<{ active: boolean; color: string }>`
  padding: 6px 12px;
  position: relative;
  transition: padding 85ms, margin 85ms, box-shadow 85ms;
-  background-color: ${(props) => props.color};
+  background-color: ${props => props.color};
  color: #fff;
  display: block;
  max-width: 100%;
@ -72,7 +71,7 @@ export const ActionItem = styled.li`
  align-items: center;
  font-size: 14px;
  &:hover {
-    background: ${(props) => props.theme.colors.primary};
+    background: ${props => props.theme.colors.primary};
  }
 `;

@ -81,7 +80,7 @@ export const ActionTitle = styled.span`
 `;

 const ActionItemSeparator = styled.li`
-  color: ${(props) => mixin.rgba(props.theme.colors.text.primary, 0.4)};
+  color: ${props => mixin.rgba(props.theme.colors.text.primary, 0.4)};
  font-size: 12px;
  padding-left: 4px;
  padding-right: 4px;
@ -108,25 +107,18 @@ const ActionItemLine = styled.div`
  margin: 0.25rem !important;
 `;

-type ControlFilterProps = {
+type FilterMetaProps = {
  filters: TaskMetaFilters;
  userID: string;
-  projectID: string;
+  labels: React.RefObject<Array<ProjectLabel>>;
  members: React.RefObject<Array<TaskUser>>;
  onChangeTaskMetaFilter: (filters: TaskMetaFilters) => void;
 };

-const ControlFilter: React.FC<ControlFilterProps> = ({
-  filters,
-  onChangeTaskMetaFilter,
-  userID,
-  projectID,
-  members,
-}) => {
+const FilterMeta: React.FC<FilterMetaProps> = ({ filters, onChangeTaskMetaFilter, userID, labels, members }) => {
  const [currentFilters, setFilters] = useState(filters);
  const [nameFilter, setNameFilter] = useState(filters.taskName ? filters.taskName.name : '');
  const [currentLabel, setCurrentLabel] = useState('');
-  const { data } = useLabelsQuery({ variables: { projectID } });

  const handleSetFilters = (f: TaskMetaFilters) => {
    setFilters(f);
@ -135,7 +127,7 @@ const ControlFilter: React.FC<ControlFilterProps> = ({

  const handleNameChange = (nFilter: string) => {
    handleSetFilters(
-      produce(currentFilters, (draftFilters) => {
+      produce(currentFilters, draftFilters => {
        draftFilters.taskName = nFilter !== '' ? { name: nFilter } : null;
      }),
    );
@ -146,7 +138,7 @@ const ControlFilter: React.FC<ControlFilterProps> = ({

  const handleSetDueDate = (filterType: DueDateFilterType, label: string) => {
    handleSetFilters(
-      produce(currentFilters, (draftFilters) => {
+      produce(currentFilters, draftFilters => {
        if (draftFilters.dueDate && draftFilters.dueDate.type === filterType) {
          draftFilters.dueDate = null;
        } else {
@ -165,7 +157,7 @@ const ControlFilter: React.FC<ControlFilterProps> = ({
        <ActionsList>
          <TaskNameInput
            width="100%"
-            onChange={(e) => handleNameChange(e.currentTarget.value)}
+            onChange={e => handleNameChange(e.currentTarget.value)}
            value={nameFilter}
            autoFocus
            variant="alternate"
@ -175,14 +167,14 @@ const ControlFilter: React.FC<ControlFilterProps> = ({
          <ActionItem
            onClick={() => {
              handleSetFilters(
-                produce(currentFilters, (draftFilters) => {
+                produce(currentFilters, draftFilters => {
                  if (members.current) {
-                    const member = members.current.find((m) => m.id === userID);
-                    const draftMember = draftFilters.members.find((m) => m.id === userID);
+                    const member = members.current.find(m => m.id === userID);
+                    const draftMember = draftFilters.members.find(m => m.id === userID);
                    if (member && !draftMember) {
                      draftFilters.members.push({ id: userID, username: member.username ? member.username : '' });
                    } else {
-                      draftFilters.members = draftFilters.members.filter((m) => m.id !== userID);
+                      draftFilters.members = draftFilters.members.filter(m => m.id !== userID);
                    }
                  }
                }),
@ -193,7 +185,7 @@ const ControlFilter: React.FC<ControlFilterProps> = ({
              <User width={12} height={12} />
            </ItemIcon>
            <ActionTitle>Just my tasks</ActionTitle>
-            {currentFilters.members.find((m) => m.id === userID) && <ActiveIcon width={12} height={12} />}
+            {currentFilters.members.find(m => m.id === userID) && <ActiveIcon width={12} height={12} />}
          </ActionItem>
          <ActionItem onClick={() => handleSetDueDate(DueDateFilterType.THIS_WEEK, 'Due this week')}>
            <ItemIcon>
@ -236,10 +228,10 @@ const ControlFilter: React.FC<ControlFilterProps> = ({
      </Popup>
      <Popup tab={1} title="By Labels">
        <Labels>
-          {data &&
-            data.findProject.labels
+          {labels.current &&
+            labels.current
              // .filter(label => '' === '' || (label.name && label.name.toLowerCase().startsWith(''.toLowerCase())))
-              .map((label) => (
+              .map(label => (
                <Label key={label.id}>
                  <CardLabel
                    key={label.id}
@ -250,9 +242,9 @@ const ControlFilter: React.FC<ControlFilterProps> = ({
                    }}
                    onClick={() => {
                      handleSetFilters(
-                        produce(currentFilters, (draftFilters) => {
-                          if (draftFilters.labels.find((l) => l.id === label.id)) {
-                            draftFilters.labels = draftFilters.labels.filter((l) => l.id !== label.id);
+                        produce(currentFilters, draftFilters => {
+                          if (draftFilters.labels.find(l => l.id === label.id)) {
+                            draftFilters.labels = draftFilters.labels.filter(l => l.id !== label.id);
                          } else {
                            draftFilters.labels.push({
                              id: label.id,
@ -273,16 +265,16 @@ const ControlFilter: React.FC<ControlFilterProps> = ({
      <Popup tab={2} title="By Member">
        <ActionsList>
          {members.current &&
-            members.current.map((member) => (
+            members.current.map(member => (
              <FilterMember
                key={member.id}
                member={member}
                showName
                onCardMemberClick={() => {
                  handleSetFilters(
-                    produce(currentFilters, (draftFilters) => {
-                      if (draftFilters.members.find((m) => m.id === member.id)) {
-                        draftFilters.members = draftFilters.members.filter((m) => m.id !== member.id);
+                    produce(currentFilters, draftFilters => {
+                      if (draftFilters.members.find(m => m.id === member.id)) {
+                        draftFilters.members = draftFilters.members.filter(m => m.id !== member.id);
                      } else {
                        draftFilters.members.push({ id: member.id, username: member.username ?? '' });
                      }
@ -329,4 +321,4 @@ const ControlFilter: React.FC<ControlFilterProps> = ({
  );
 };

-export default ControlFilter;
+export default FilterMeta;
--- a/frontend/src/Projects/Project/Board/ControlStatus.tsx
+++ b/frontend/src/Projects/Project/Board/ControlStatus.tsx
@ -30,7 +30,7 @@ export const ActionItem = styled.li`
  align-items: center;
  font-size: 14px;
  &:hover {
-    background: ${(props) => props.theme.colors.primary};
+    background: ${props => props.theme.colors.primary};
  }
  &:hover ${ActionExtraMenuContainer} {
    visibility: visible;
@ -69,11 +69,11 @@ export const ActionExtraMenuItem = styled.li`
  align-items: center;
  font-size: 14px;
  &:hover {
-    background: ${(props) => props.theme.colors.primary};
+    background: ${props => props.theme.colors.primary};
  }
 `;
 const ActionExtraMenuSeparator = styled.li`
-  color: ${(props) => props.theme.colors.text.primary};
+  color: ${props => props.theme.colors.text.primary};
  font-size: 12px;
  padding-left: 4px;
  padding-right: 4px;
@ -85,12 +85,12 @@ const ActiveIcon = styled(Checkmark)`
  position: absolute;
 `;

-type ControlStatusProps = {
+type FilterStatusProps = {
  filter: TaskStatusFilter;
  onChangeTaskStatusFilter: (filter: TaskStatusFilter) => void;
 };

-const ControlStatus: React.FC<ControlStatusProps> = ({ filter, onChangeTaskStatusFilter }) => {
+const FilterStatus: React.FC<FilterStatusProps> = ({ filter, onChangeTaskStatusFilter }) => {
  const [currentFilter, setFilter] = useState(filter);
  const handleFilterChange = (f: TaskStatusFilter) => {
    setFilter(f);
@ -146,4 +146,4 @@ const ControlStatus: React.FC<ControlStatusProps> = ({ filter, onChangeTaskStatu
  );
 };

-export default ControlStatus;
+export default FilterStatus;
--- a/frontend/src/Projects/Project/Board/ControlSort.tsx
+++ b/frontend/src/Projects/Project/Board/ControlSort.tsx
@ -1,11 +1,7 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
 import { TaskSorting, TaskSortingType, TaskSortingDirection } from 'shared/utils/sorting';
-import { Checkmark } from 'shared/icons';
-
-const ActiveIcon = styled(Checkmark)`
-  position: absolute;
-`;
+import { mixin } from 'shared/utils/styles';

 export const ActionsList = styled.ul`
  margin: 0;
@ -25,7 +21,7 @@ export const ActionItem = styled.li`
  align-items: center;
  font-size: 14px;
  &:hover {
-    background: ${(props) => props.theme.colors.primary};
+    background: ${props => props.theme.colors.primary};
  }
 `;

@ -33,12 +29,21 @@ export const ActionTitle = styled.span`
  margin-left: 20px;
 `;

-type ControlSortProps = {
+const ActionItemSeparator = styled.li`
+  color: ${props => mixin.rgba(props.theme.colors.text.primary, 0.4)};
+  font-size: 12px;
+  padding-left: 4px;
+  padding-right: 4px;
+  padding-top: 0.75rem;
+  padding-bottom: 0.25rem;
+`;
+
+type SortPopupProps = {
  sorting: TaskSorting;
  onChangeTaskSorting: (taskSorting: TaskSorting) => void;
 };

-const ControlSort: React.FC<ControlSortProps> = ({ sorting, onChangeTaskSorting }) => {
+const SortPopup: React.FC<SortPopupProps> = ({ sorting, onChangeTaskSorting }) => {
  const [currentSorting, setSorting] = useState(sorting);
  const handleSetSorting = (s: TaskSorting) => {
    setSorting(s);
@ -47,41 +52,35 @@ const ControlSort: React.FC<ControlSortProps> = ({ sorting, onChangeTaskSorting
  return (
    <ActionsList>
      <ActionItem onClick={() => handleSetSorting({ type: TaskSortingType.NONE, direction: TaskSortingDirection.ASC })}>
-        {currentSorting.type === TaskSortingType.NONE && <ActiveIcon width={12} height={12} />}
        <ActionTitle>None</ActionTitle>
      </ActionItem>
      <ActionItem
        onClick={() => handleSetSorting({ type: TaskSortingType.DUE_DATE, direction: TaskSortingDirection.ASC })}
      >
-        {currentSorting.type === TaskSortingType.DUE_DATE && <ActiveIcon width={12} height={12} />}
        <ActionTitle>Due date</ActionTitle>
      </ActionItem>
      <ActionItem
        onClick={() => handleSetSorting({ type: TaskSortingType.MEMBERS, direction: TaskSortingDirection.ASC })}
      >
-        {currentSorting.type === TaskSortingType.MEMBERS && <ActiveIcon width={12} height={12} />}
        <ActionTitle>Members</ActionTitle>
      </ActionItem>
      <ActionItem
        onClick={() => handleSetSorting({ type: TaskSortingType.LABELS, direction: TaskSortingDirection.ASC })}
      >
-        {currentSorting.type === TaskSortingType.LABELS && <ActiveIcon width={12} height={12} />}
        <ActionTitle>Labels</ActionTitle>
      </ActionItem>
      <ActionItem
        onClick={() => handleSetSorting({ type: TaskSortingType.TASK_TITLE, direction: TaskSortingDirection.ASC })}
      >
-        {currentSorting.type === TaskSortingType.TASK_TITLE && <ActiveIcon width={12} height={12} />}
        <ActionTitle>Task title</ActionTitle>
      </ActionItem>
      <ActionItem
        onClick={() => handleSetSorting({ type: TaskSortingType.COMPLETE, direction: TaskSortingDirection.ASC })}
      >
-        {currentSorting.type === TaskSortingType.COMPLETE && <ActiveIcon width={12} height={12} />}
        <ActionTitle>Complete</ActionTitle>
      </ActionItem>
    </ActionsList>
  );
 };

-export default ControlSort;
+export default SortPopup;
--- a/frontend/src/Projects/Project/Board/index.tsx
+++ b/frontend/src/Projects/Project/Board/index.tsx
@ -49,9 +49,9 @@ import LabelManagerEditor from 'Projects/Project/LabelManagerEditor';
 import Chip from 'shared/components/Chip';
 import { toast } from 'react-toastify';
 import { useCurrentUser } from 'App/context';
-import ControlStatus from './ControlStatus';
-import ControlFilter from './ControlFilter';
-import ControlSort from './ControlSort';
+import FilterStatus from './FilterStatus';
+import FilterMeta from './FilterMeta';
+import SortPopup from './SortPopup';

 const FilterChip = styled(Chip)`
  margin-right: 4px;
@ -60,20 +60,19 @@ const FilterChip = styled(Chip)`
 type MetaFilterCloseFn = (meta: TaskMeta, key: string) => void;

 const renderTaskSortingLabel = (sorting: TaskSorting) => {
-  switch (sorting.type) {
-    case TaskSortingType.TASK_TITLE:
-      return 'Sort: Task Title';
-    case TaskSortingType.MEMBERS:
-      return 'Sort: Members';
-    case TaskSortingType.DUE_DATE:
-      return 'Sort: Due Date';
-    case TaskSortingType.LABELS:
-      return 'Sort: Labels';
-    case TaskSortingType.COMPLETE:
-      return 'Sort: Complete';
-    default:
-      return 'Sort';
+  if (sorting.type === TaskSortingType.TASK_TITLE) {
+    return 'Sort: Card title';
  }
+  if (sorting.type === TaskSortingType.MEMBERS) {
+    return 'Sort: Members';
+  }
+  if (sorting.type === TaskSortingType.DUE_DATE) {
+    return 'Sort: Due Date';
+  }
+  if (sorting.type === TaskSortingType.LABELS) {
+    return 'Sort: Labels';
+  }
+  return 'Sort';
 };

 const renderMetaFilters = (filters: TaskMetaFilters, onClose: MetaFilterCloseFn) => {
@ -137,16 +136,16 @@ const ProjectActionWrapper = styled.div<{ disabled?: boolean }>`
  display: flex;
  align-items: center;
  font-size: 15px;
-  color: ${(props) => props.theme.colors.text.primary};
+  color: ${props => props.theme.colors.text.primary};

  &:not(:last-of-type) {
    margin-right: 16px;
  }

  &:hover {
-    color: ${(props) => props.theme.colors.text.secondary};
+    color: ${props => props.theme.colors.text.secondary};
  }
-  ${(props) =>
+  ${props =>
    props.disabled &&
    css`
      opacity: 0.5;
@ -199,7 +198,6 @@ type ProjectBoardProps = {
 };

 export const BoardLoading = () => {
-  const { user } = useCurrentUser();
  return (
    <>
      <ProjectBar>
@ -217,22 +215,20 @@ export const BoardLoading = () => {
            <ProjectActionText>Filter</ProjectActionText>
          </ProjectAction>
        </ProjectActions>
-        {user && (
-          <ProjectActions>
-            <ProjectAction>
-              <Tags width={13} height={13} />
-              <ProjectActionText>Labels</ProjectActionText>
-            </ProjectAction>
-            <ProjectAction disabled>
-              <ToggleOn width={13} height={13} />
-              <ProjectActionText>Fields</ProjectActionText>
-            </ProjectAction>
-            <ProjectAction disabled>
-              <Bolt width={13} height={13} />
-              <ProjectActionText>Rules</ProjectActionText>
-            </ProjectAction>
-          </ProjectActions>
-        )}
+        <ProjectActions>
+          <ProjectAction>
+            <Tags width={13} height={13} />
+            <ProjectActionText>Labels</ProjectActionText>
+          </ProjectAction>
+          <ProjectAction disabled>
+            <ToggleOn width={13} height={13} />
+            <ProjectActionText>Fields</ProjectActionText>
+          </ProjectAction>
+          <ProjectAction disabled>
+            <Bolt width={13} height={13} />
+            <ProjectActionText>Rules</ProjectActionText>
+          </ProjectAction>
+        </ProjectActions>
      </ProjectBar>
      <EmptyBoard />
    </>
@ -281,8 +277,8 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
      updateApolloCache<FindProjectQuery>(
        client,
        FindProjectDocument,
-        (cache) =>
-          produce(cache, (draftCache) => {
+        cache =>
+          produce(cache, draftCache => {
            draftCache.findProject.taskGroups = draftCache.findProject.taskGroups.filter(
              (taskGroup: TaskGroup) => taskGroup.id !== deletedTaskGroupData.data?.deleteTaskGroup.taskGroup.id,
            );
@ -297,10 +293,10 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
      updateApolloCache<FindProjectQuery>(
        client,
        FindProjectDocument,
-        (cache) =>
-          produce(cache, (draftCache) => {
+        cache =>
+          produce(cache, draftCache => {
            const { taskGroups } = cache.findProject;
-            const idx = taskGroups.findIndex((taskGroup) => taskGroup.id === newTaskData.data?.createTask.taskGroup.id);
+            const idx = taskGroups.findIndex(taskGroup => taskGroup.id === newTaskData.data?.createTask.taskGroup.id);
            if (idx !== -1) {
              if (newTaskData.data) {
                draftCache.findProject.taskGroups[idx].tasks.push({ ...newTaskData.data.createTask });
@ -317,8 +313,8 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
      updateApolloCache<FindProjectQuery>(
        client,
        FindProjectDocument,
-        (cache) =>
-          produce(cache, (draftCache) => {
+        cache =>
+          produce(cache, draftCache => {
            if (newTaskGroupData.data) {
              draftCache.findProject.taskGroups.push({ ...newTaskGroupData.data.createTaskGroup, tasks: [] });
            }
@ -337,10 +333,10 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
      updateApolloCache<FindProjectQuery>(
        client,
        FindProjectDocument,
-        (cache) =>
-          produce(cache, (draftCache) => {
+        cache =>
+          produce(cache, draftCache => {
            const idx = cache.findProject.taskGroups.findIndex(
-              (t) => t.id === resp.data?.deleteTaskGroupTasks.taskGroupID,
+              t => t.id === resp.data?.deleteTaskGroupTasks.taskGroupID,
            );
            if (idx !== -1) {
              draftCache.findProject.taskGroups[idx].tasks = [];
@ -354,8 +350,8 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
      updateApolloCache<FindProjectQuery>(
        client,
        FindProjectDocument,
-        (cache) =>
-          produce(cache, (draftCache) => {
+        cache =>
+          produce(cache, draftCache => {
            if (resp.data) {
              draftCache.findProject.taskGroups.push(resp.data.duplicateTaskGroup.taskGroup);
            }
@ -372,8 +368,8 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
      updateApolloCache<FindProjectQuery>(
        client,
        FindProjectDocument,
-        (cache) =>
-          produce(cache, (draftCache) => {
+        cache =>
+          produce(cache, draftCache => {
            if (newTask.data) {
              const { previousTaskGroupID, task } = newTask.data.updateTaskLocation;
              if (previousTaskGroupID !== task.taskGroup.id) {
@ -381,9 +377,7 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
                const oldTaskGroupIdx = taskGroups.findIndex((t: TaskGroup) => t.id === previousTaskGroupID);
                const newTaskGroupIdx = taskGroups.findIndex((t: TaskGroup) => t.id === task.taskGroup.id);
                if (oldTaskGroupIdx !== -1 && newTaskGroupIdx !== -1) {
-                  const previousTask = cache.findProject.taskGroups[oldTaskGroupIdx].tasks.find(
-                    (t) => t.id === task.id,
-                  );
+                  const previousTask = cache.findProject.taskGroups[oldTaskGroupIdx].tasks.find(t => t.id === task.id);
                  draftCache.findProject.taskGroups[oldTaskGroupIdx].tasks = taskGroups[oldTaskGroupIdx].tasks.filter(
                    (t: Task) => t.id !== task.id,
                  );
@ -404,14 +398,14 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
  const { user } = useCurrentUser();
  const [deleteTask] = useDeleteTaskMutation();
  const [toggleTaskLabel] = useToggleTaskLabelMutation({
-    onCompleted: (newTaskLabel) => {
+    onCompleted: newTaskLabel => {
      taskLabelsRef.current = newTaskLabel.toggleTaskLabel.task.labels;
    },
  });

  const onCreateTask = (taskGroupID: string, name: string) => {
    if (data) {
-      const taskGroup = data.findProject.taskGroups.find((t) => t.id === taskGroupID);
+      const taskGroup = data.findProject.taskGroups.find(t => t.id === taskGroupID);
      if (taskGroup) {
        let position = 65535;
        if (taskGroup.tasks.length !== 0) {
@ -429,9 +423,7 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
            createTask: {
              __typename: 'Task',
              id: `${Math.round(Math.random() * -1000000)}`,
-              shortId: '',
              name,
-              watched: false,
              complete: false,
              completedAt: null,
              hasTime: false,
@ -446,7 +438,7 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
                checklist: null,
              },
              position,
-              dueDate: { at: null },
+              dueDate: null,
              description: null,
              labels: [],
              assigned: [],
@ -477,13 +469,12 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
    }
    return 'All Tasks';
  };
-
-  if (data) {
+  if (data && user) {
    labelsRef.current = data.findProject.labels;
    membersRef.current = data.findProject.members;
    const onQuickEditorOpen = ($target: React.RefObject<HTMLElement>, taskID: string, taskGroupID: string) => {
-      const taskGroup = data.findProject.taskGroups.find((t) => t.id === taskGroupID);
-      const currentTask = taskGroup ? taskGroup.tasks.find((t) => t.id === taskID) : null;
+      const taskGroup = data.findProject.taskGroups.find(t => t.id === taskGroupID);
+      const currentTask = taskGroup ? taskGroup.tasks.find(t => t.id === taskID) : null;
      if (currentTask) {
        setQuickCardEditor({
          target: $target,
@ -495,9 +486,9 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
    };
    let currentQuickTask = null;
    if (quickCardEditor.taskID && quickCardEditor.taskGroupID) {
-      const targetGroup = data.findProject.taskGroups.find((t) => t.id === quickCardEditor.taskGroupID);
+      const targetGroup = data.findProject.taskGroups.find(t => t.id === quickCardEditor.taskGroupID);
      if (targetGroup) {
-        currentQuickTask = targetGroup.tasks.find((t) => t.id === quickCardEditor.taskID);
+        currentQuickTask = targetGroup.tasks.find(t => t.id === quickCardEditor.taskID);
      }
    }
    return (
@ -505,13 +496,13 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
        <ProjectBar>
          <ProjectActions>
            <ProjectAction
-              onClick={(target) => {
+              onClick={target => {
                showPopup(
                  target,
                  <Popup tab={0} title={null}>
-                    <ControlStatus
+                    <FilterStatus
                      filter={taskStatusFilter}
-                      onChangeTaskStatusFilter={(filter) => {
+                      onChangeTaskStatusFilter={filter => {
                        setTaskStatusFilter(filter);
                        hidePopup();
                      }}
@ -525,13 +516,13 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
              <ProjectActionText>{getTaskStatusFilterLabel(taskStatusFilter)}</ProjectActionText>
            </ProjectAction>
            <ProjectAction
-              onClick={(target) => {
+              onClick={target => {
                showPopup(
                  target,
                  <Popup tab={0} title={null}>
-                    <ControlSort
+                    <SortPopup
                      sorting={taskSorting}
-                      onChangeTaskSorting={(sorting) => {
+                      onChangeTaskSorting={sorting => {
                        setTaskSorting(sorting);
                      }}
                    />
@ -544,16 +535,16 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
              <ProjectActionText>{renderTaskSortingLabel(taskSorting)}</ProjectActionText>
            </ProjectAction>
            <ProjectAction
-              onClick={(target) => {
+              onClick={target => {
                showPopup(
                  target,
-                  <ControlFilter
+                  <FilterMeta
                    filters={taskMetaFilters}
-                    onChangeTaskMetaFilter={(filter) => {
+                    onChangeTaskMetaFilter={filter => {
                      setTaskMetaFilters(filter);
                    }}
-                    userID={user ?? ''}
-                    projectID={projectID}
+                    userID={user?.id}
+                    labels={labelsRef}
                    members={membersRef}
                  />,
                  { width: 200 },
@ -565,11 +556,11 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
            </ProjectAction>
            {renderMetaFilters(taskMetaFilters, (meta, id) => {
              setTaskMetaFilters(
-                produce(taskMetaFilters, (draftFilters) => {
+                produce(taskMetaFilters, draftFilters => {
                  if (meta === TaskMeta.MEMBER) {
-                    draftFilters.members = draftFilters.members.filter((m) => m.id !== id);
+                    draftFilters.members = draftFilters.members.filter(m => m.id !== id);
                  } else if (meta === TaskMeta.LABEL) {
-                    draftFilters.labels = draftFilters.labels.filter((m) => m.id !== id);
+                    draftFilters.labels = draftFilters.labels.filter(m => m.id !== id);
                  } else if (meta === TaskMeta.TITLE) {
                    draftFilters.taskName = null;
                  } else if (meta === TaskMeta.DUE_DATE) {
@ -579,34 +570,36 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
              );
            })}
          </ProjectActions>
-          {user && (
-            <ProjectActions>
-              <ProjectAction
-                onClick={($labelsRef) => {
-                  showPopup(
-                    $labelsRef,
-                    <LabelManagerEditor taskLabels={null} labelColors={data.labelColors} projectID={projectID ?? ''} />,
-                  );
-                }}
-              >
-                <Tags width={13} height={13} />
-                <ProjectActionText>Labels</ProjectActionText>
-              </ProjectAction>
-              <ProjectAction disabled>
-                <ToggleOn width={13} height={13} />
-                <ProjectActionText>Fields</ProjectActionText>
-              </ProjectAction>
-              <ProjectAction disabled>
-                <Bolt width={13} height={13} />
-                <ProjectActionText>Rules</ProjectActionText>
-              </ProjectAction>
-            </ProjectActions>
-          )}
+          <ProjectActions>
+            <ProjectAction
+              onClick={$labelsRef => {
+                showPopup(
+                  $labelsRef,
+                  <LabelManagerEditor
+                    taskLabels={null}
+                    labelColors={data.labelColors}
+                    labels={labelsRef}
+                    projectID={projectID ?? ''}
+                  />,
+                );
+              }}
+            >
+              <Tags width={13} height={13} />
+              <ProjectActionText>Labels</ProjectActionText>
+            </ProjectAction>
+            <ProjectAction disabled>
+              <ToggleOn width={13} height={13} />
+              <ProjectActionText>Fields</ProjectActionText>
+            </ProjectAction>
+            <ProjectAction disabled>
+              <Bolt width={13} height={13} />
+              <ProjectActionText>Rules</ProjectActionText>
+            </ProjectAction>
+          </ProjectActions>
        </ProjectBar>
        <SimpleLists
-          isPublic={user === null}
-          onTaskClick={(task) => {
-            history.push(`${match.url}/c/${task.shortId}`);
+          onTaskClick={task => {
+            history.push(`${match.url}/c/${task.id}`);
          }}
          onCardLabelClick={onCardLabelClick ?? NOOP}
          cardLabelVariant={cardLabelVariant ?? 'large'}
@ -638,7 +631,7 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
              },
            });
          }}
-          onTaskGroupDrop={(droppedTaskGroup) => {
+          onTaskGroupDrop={droppedTaskGroup => {
            updateTaskGroupLocation({
              variables: { taskGroupID: droppedTaskGroup.id, position: droppedTaskGroup.position },
              optimisticResponse: {
@ -658,7 +651,7 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
          onCreateTask={onCreateTask}
          onCreateTaskGroup={onCreateList}
          onCardMemberClick={($targetRef, _taskID, memberID) => {
-            const member = data.findProject.members.find((m) => m.id === memberID);
+            const member = data.findProject.members.find(m => m.id === memberID);
            if (member) {
              showPopup(
                $targetRef,
@ -685,8 +678,8 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
                  deleteTaskGroupTasks({ variables: { taskGroupID } });
                  hidePopup();
                }}
-                onSortTaskGroup={(taskSort) => {
-                  const taskGroup = data.findProject.taskGroups.find((t) => t.id === taskGroupID);
+                onSortTaskGroup={taskSort => {
+                  const taskGroup = data.findProject.taskGroups.find(t => t.id === taskGroupID);
                  if (taskGroup) {
                    const tasks: Array<{ taskID: string; position: number }> = taskGroup.tasks
                      .sort((a, b) => sortTasks(a, b, taskSort))
@ -698,8 +691,8 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
                    hidePopup();
                  }
                }}
-                onDuplicateTaskGroup={(newName) => {
-                  const idx = data.findProject.taskGroups.findIndex((t) => t.id === taskGroupID);
+                onDuplicateTaskGroup={newName => {
+                  const idx = data.findProject.taskGroups.findIndex(t => t.id === taskGroupID);
                  if (idx !== -1) {
                    const taskGroups = data.findProject.taskGroups.sort((a, b) => a.position - b.position);
                    const prevPos = taskGroups[idx].position;
@ -712,7 +705,7 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
                    hidePopup();
                  }
                }}
-                onArchiveTaskGroup={(tgID) => {
+                onArchiveTaskGroup={tgID => {
                  deleteTaskGroup({ variables: { taskGroupID: tgID } });
                  hidePopup();
                }}
@ -746,7 +739,7 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
              );
            }}
            onCardMemberClick={($targetRef, _taskID, memberID) => {
-              const member = data.findProject.members.find((m) => m.id === memberID);
+              const member = data.findProject.members.find(m => m.id === memberID);
              if (member) {
                showPopup(
                  $targetRef,
@ -765,11 +758,11 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
              showPopup(
                $targetRef,
                <LabelManagerEditor
-                  onLabelToggle={(labelID) => {
+                  onLabelToggle={labelID => {
                    toggleTaskLabel({ variables: { taskID: task.id, projectLabelID: labelID } });
                  }}
-                  taskID={task.id}
                  labelColors={data.labelColors}
+                  labels={labelsRef}
                  taskLabels={taskLabelsRef}
                  projectID={projectID ?? ''}
                />,
@ -778,15 +771,15 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
            onArchiveCard={(_listId: string, cardId: string) => {
              return deleteTask({
                variables: { taskID: cardId },
-                update: (client) => {
+                update: client => {
                  updateApolloCache<FindProjectQuery>(
                    client,
                    FindProjectDocument,
-                    (cache) =>
-                      produce(cache, (draftCache) => {
-                        draftCache.findProject.taskGroups = cache.findProject.taskGroups.map((taskGroup) => ({
+                    cache =>
+                      produce(cache, draftCache => {
+                        draftCache.findProject.taskGroups = cache.findProject.taskGroups.map(taskGroup => ({
                          ...taskGroup,
-                          tasks: taskGroup.tasks.filter((t) => t.id !== cardId),
+                          tasks: taskGroup.tasks.filter(t => t.id !== cardId),
                        }));
                      }),
                    { projectID },
@ -800,38 +793,20 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
                <Popup title="Change Due Date" tab={0} onClose={() => hidePopup()}>
                  <DueDateManager
                    task={task}
-                    onRemoveDueDate={(t) => {
-                      hidePopup();
-                      updateTaskDueDate({
-                        variables: {
-                          taskID: t.id,
-                          dueDate: null,
-                          hasTime: false,
-                          deleteNotifications: [],
-                          updateNotifications: [],
-                          createNotifications: [],
-                        },
-                      });
+                    onRemoveDueDate={t => {
+                      updateTaskDueDate({ variables: { taskID: t.id, dueDate: null, hasTime: false } });
+                      // hidePopup();
                    }}
                    onDueDateChange={(t, newDueDate, hasTime) => {
-                      hidePopup();
-                      updateTaskDueDate({
-                        variables: {
-                          taskID: t.id,
-                          dueDate: newDueDate,
-                          hasTime,
-                          deleteNotifications: [],
-                          updateNotifications: [],
-                          createNotifications: [],
-                        },
-                      });
+                      updateTaskDueDate({ variables: { taskID: t.id, dueDate: newDueDate, hasTime } });
+                      // hidePopup();
                    }}
                    onCancel={NOOP}
                  />
                </Popup>,
              );
            }}
-            onToggleComplete={(task) => {
+            onToggleComplete={task => {
              setTaskComplete({ variables: { taskID: task.id, complete: !task.complete } });
            }}
            target={quickCardEditor.target}
--- a/frontend/src/Projects/Project/Details/index.tsx
+++ b/frontend/src/Projects/Project/Details/index.tsx
@ -4,15 +4,13 @@ import TaskDetails from 'shared/components/TaskDetails';
 import TaskDetailsLoading from 'shared/components/TaskDetails/Loading';
 import { Popup, usePopup } from 'shared/components/PopupMenu';
 import MemberManager from 'shared/components/MemberManager';
-import { useRouteMatch, useHistory, useParams } from 'react-router';
+import { useRouteMatch, useHistory } from 'react-router';
 import {
  useDeleteTaskChecklistMutation,
-  useToggleTaskWatchMutation,
  useUpdateTaskChecklistNameMutation,
  useUpdateTaskChecklistItemLocationMutation,
  useCreateTaskChecklistMutation,
  useFindTaskQuery,
-  DueDateNotificationDuration,
  useUpdateTaskDueDateMutation,
  useSetTaskCompleteMutation,
  useAssignTaskMutation,
@ -38,7 +36,6 @@ import Input from 'shared/components/Input';
 import { useForm } from 'react-hook-form';
 import updateApolloCache from 'shared/utils/cache';
 import NOOP from 'shared/utils/noop';
-import polling from 'shared/utils/polling';

 export const ActionsList = styled.ul`
  margin: 0;
@ -58,7 +55,7 @@ export const ActionItem = styled.li`
  align-items: center;
  font-size: 14px;
  &:hover {
-    background: ${(props) => props.theme.colors.primary};
+    background: ${props => props.theme.colors.primary};
  }
 `;

@ -168,8 +165,10 @@ const CreateChecklistPopup: React.FC<CreateChecklistPopupProps> = ({ onCreateChe
        defaultValue="Checklist"
        width="100%"
        label="Name"
+        id="name"
+        name="name"
        variant="alternate"
-        {...register('name', { required: 'Checklist name is required' })}
+        ref={register({ required: 'Checklist name is required' })}
      />
      <CreateChecklistButton type="submit">Create</CreateChecklistButton>
    </CreateChecklistForm>
@ -177,6 +176,7 @@ const CreateChecklistPopup: React.FC<CreateChecklistPopupProps> = ({ onCreateChe
 };

 type DetailsProps = {
+  taskID: string;
  projectURL: string;
  onTaskNameChange: (task: Task, newName: string) => void;
  onTaskDescriptionChange: (task: Task, newDescription: string) => void;
@ -190,6 +190,7 @@ const initialMemberPopupState = { taskID: '', isOpen: false, top: 0, left: 0 };

 const Details: React.FC<DetailsProps> = ({
  projectURL,
+  taskID,
  onTaskNameChange,
  onTaskDescriptionChange,
  onDeleteTask,
@ -198,7 +199,6 @@ const Details: React.FC<DetailsProps> = ({
  refreshCache,
 }) => {
  const { user } = useCurrentUser();
-  const { taskID } = useParams<{ taskID: string }>();
  const { showPopup, hidePopup } = usePopup();
  const history = useHistory();
  const [deleteTaskComment] = useDeleteTaskCommentMutation({
@ -206,11 +206,11 @@ const Details: React.FC<DetailsProps> = ({
      updateApolloCache<FindTaskQuery>(
        client,
        FindTaskDocument,
-        (cache) =>
-          produce(cache, (draftCache) => {
+        cache =>
+          produce(cache, draftCache => {
            if (response.data) {
              draftCache.findTask.comments = cache.findTask.comments.filter(
-                (c) => c.id !== response.data?.deleteTaskComment.commentID,
+                c => c.id !== response.data?.deleteTaskComment.commentID,
              );
            }
          }),
@ -218,14 +218,13 @@ const Details: React.FC<DetailsProps> = ({
      );
    },
  });
-  const [toggleTaskWatch] = useToggleTaskWatchMutation();
  const [createTaskComment] = useCreateTaskCommentMutation({
    update: (client, response) => {
      updateApolloCache<FindTaskQuery>(
        client,
        FindTaskDocument,
-        (cache) =>
-          produce(cache, (draftCache) => {
+        cache =>
+          produce(cache, draftCache => {
            if (response.data) {
              draftCache.findTask.comments.push({
                ...response.data.createTaskComment.comment,
@ -242,18 +241,18 @@ const Details: React.FC<DetailsProps> = ({
      updateApolloCache<FindTaskQuery>(
        client,
        FindTaskDocument,
-        (cache) =>
-          produce(cache, (draftCache) => {
+        cache =>
+          produce(cache, draftCache => {
            if (response.data) {
              const { prevChecklistID, taskChecklistID, checklistItem } = response.data.updateTaskChecklistItemLocation;
              if (taskChecklistID !== prevChecklistID) {
-                const oldIdx = cache.findTask.checklists.findIndex((c) => c.id === prevChecklistID);
-                const newIdx = cache.findTask.checklists.findIndex((c) => c.id === taskChecklistID);
+                const oldIdx = cache.findTask.checklists.findIndex(c => c.id === prevChecklistID);
+                const newIdx = cache.findTask.checklists.findIndex(c => c.id === taskChecklistID);
                if (oldIdx > -1 && newIdx > -1) {
-                  const item = cache.findTask.checklists[oldIdx].items.find((i) => i.id === checklistItem.id);
+                  const item = cache.findTask.checklists[oldIdx].items.find(i => i.id === checklistItem.id);
                  if (item) {
                    draftCache.findTask.checklists[oldIdx].items = cache.findTask.checklists[oldIdx].items.filter(
-                      (i) => i.id !== checklistItem.id,
+                      i => i.id !== checklistItem.id,
                    );
                    draftCache.findTask.checklists[newIdx].items.push({
                      ...item,
@ -270,12 +269,12 @@ const Details: React.FC<DetailsProps> = ({
    },
  });
  const [setTaskChecklistItemComplete] = useSetTaskChecklistItemCompleteMutation({
-    update: (client) => {
+    update: client => {
      updateApolloCache<FindTaskQuery>(
        client,
        FindTaskDocument,
-        (cache) =>
-          produce(cache, (draftCache) => {
+        cache =>
+          produce(cache, draftCache => {
            const { complete, total } = calculateChecklistBadge(draftCache.findTask.checklists);
            draftCache.findTask.badges.checklist = {
              __typename: 'ChecklistBadge',
@ -292,11 +291,11 @@ const Details: React.FC<DetailsProps> = ({
      updateApolloCache<FindTaskQuery>(
        client,
        FindTaskDocument,
-        (cache) =>
-          produce(cache, (draftCache) => {
+        cache =>
+          produce(cache, draftCache => {
            const { checklists } = cache.findTask;
            draftCache.findTask.checklists = checklists.filter(
-              (c) => c.id !== deleteData.data?.deleteTaskChecklist.taskChecklist.id,
+              c => c.id !== deleteData.data?.deleteTaskChecklist.taskChecklist.id,
            );
            const { complete, total } = calculateChecklistBadge(draftCache.findTask.checklists);
            draftCache.findTask.badges.checklist = {
@ -318,8 +317,8 @@ const Details: React.FC<DetailsProps> = ({
      updateApolloCache<FindTaskQuery>(
        client,
        FindTaskDocument,
-        (cache) =>
-          produce(cache, (draftCache) => {
+        cache =>
+          produce(cache, draftCache => {
            if (createData.data) {
              const item = createData.data.createTaskChecklist;
              draftCache.findTask.checklists.push({ ...item });
@ -335,14 +334,14 @@ const Details: React.FC<DetailsProps> = ({
      updateApolloCache<FindTaskQuery>(
        client,
        FindTaskDocument,
-        (cache) =>
-          produce(cache, (draftCache) => {
+        cache =>
+          produce(cache, draftCache => {
            if (deleteData.data) {
              const item = deleteData.data.deleteTaskChecklistItem.taskChecklistItem;
-              const targetIdx = cache.findTask.checklists.findIndex((c) => c.id === item.taskChecklistID);
+              const targetIdx = cache.findTask.checklists.findIndex(c => c.id === item.taskChecklistID);
              if (targetIdx > -1) {
                draftCache.findTask.checklists[targetIdx].items = cache.findTask.checklists[targetIdx].items.filter(
-                  (c) => item.id !== c.id,
+                  c => item.id !== c.id,
                );
              }
              const { complete, total } = calculateChecklistBadge(draftCache.findTask.checklists);
@ -362,12 +361,12 @@ const Details: React.FC<DetailsProps> = ({
      updateApolloCache<FindTaskQuery>(
        client,
        FindTaskDocument,
-        (cache) =>
-          produce(cache, (draftCache) => {
+        cache =>
+          produce(cache, draftCache => {
            if (newTaskItem.data) {
              const item = newTaskItem.data.createTaskChecklistItem;
              const { checklists } = cache.findTask;
-              const idx = checklists.findIndex((c) => c.id === item.taskChecklistID);
+              const idx = checklists.findIndex(c => c.id === item.taskChecklistID);
              if (idx !== -1) {
                draftCache.findTask.checklists[idx].items.push({ ...item });
                const { complete, total } = calculateChecklistBadge(draftCache.findTask.checklists);
@ -385,7 +384,7 @@ const Details: React.FC<DetailsProps> = ({
  });
  const { loading, data, refetch } = useFindTaskQuery({
    variables: { taskID },
-    pollInterval: polling.TASK_DETAILS,
+    pollInterval: 3000,
    fetchPolicy: 'cache-and-network',
  });
  const [setTaskComplete] = useSetTaskCompleteMutation();
@ -416,7 +415,6 @@ const Details: React.FC<DetailsProps> = ({
        width={1070}
        onClose={() => {
          history.push(projectURL);
-          hidePopup();
        }}
        renderContent={() => {
          return data ? (
@ -426,7 +424,7 @@ const Details: React.FC<DetailsProps> = ({
                updateTaskComment({ variables: { commentID, message } });
              }}
              editableComment={editableComment}
-              me={data.me ? data.me.user : null}
+              me={data.me.user}
              onCommentShowActions={(commentID, $targetRef) => {
                showPopup(
                  $targetRef,
@ -443,23 +441,10 @@ const Details: React.FC<DetailsProps> = ({
                );
              }}
              task={data.findTask}
-              onToggleTaskWatch={(task, watched) => {
-                toggleTaskWatch({
-                  variables: { taskID: task.id },
-                  optimisticResponse: {
-                    __typename: 'Mutation',
-                    toggleTaskWatch: {
-                      id: task.id,
-                      __typename: 'Task',
-                      watched,
-                    },
-                  },
-                });
-              }}
              onCreateComment={(task, message) => {
                createTaskComment({ variables: { taskID: task.id, message } });
              }}
-              onChecklistDrop={(checklist) => {
+              onChecklistDrop={checklist => {
                updateTaskChecklistLocation({
                  variables: { taskChecklistID: checklist.id, position: checklist.position },

@ -501,7 +486,7 @@ const Details: React.FC<DetailsProps> = ({
              }}
              onTaskNameChange={onTaskNameChange}
              onTaskDescriptionChange={onTaskDescriptionChange}
-              onToggleTaskComplete={(task) => {
+              onToggleTaskComplete={task => {
                setTaskComplete({ variables: { taskID: task.id, complete: !task.complete } });
              }}
              onDeleteTask={onDeleteTask}
@ -546,7 +531,7 @@ const Details: React.FC<DetailsProps> = ({
                createTaskChecklistItem({ variables: { taskChecklistID, name, position } });
              }}
              onMemberProfile={($targetRef, memberID) => {
-                const member = data.findTask.assigned.find((m) => m.id === memberID);
+                const member = data.findTask.assigned.find(m => m.id === memberID);
                if (member) {
                  showPopup(
                    $targetRef,
@ -556,8 +541,7 @@ const Details: React.FC<DetailsProps> = ({
                        bio="None"
                        onRemoveFromTask={() => {
                          if (user) {
-                            unassignTask({ variables: { taskID: data.findTask.id, userID: member.id ?? '' } });
-                            hidePopup();
+                            unassignTask({ variables: { taskID: data.findTask.id, userID: user.id } });
                          }
                        }}
                      />
@ -597,7 +581,7 @@ const Details: React.FC<DetailsProps> = ({
                    }}
                  >
                    <CreateChecklistPopup
-                      onCreateChecklist={(checklistData) => {
+                      onCreateChecklist={checklistData => {
                        let position = 65535;
                        if (data.findTask.checklists) {
                          const [lastChecklist] = data.findTask.checklists.slice(-1);
@ -647,80 +631,13 @@ const Details: React.FC<DetailsProps> = ({
                  >
                    <DueDateManager
                      task={task}
-                      onRemoveDueDate={(t) => {
-                        updateTaskDueDate({
-                          variables: {
-                            taskID: t.id,
-                            dueDate: null,
-                            hasTime: false,
-                            deleteNotifications: t.dueDate.notifications
-                              ? t.dueDate.notifications.map((n) => ({ id: n.id }))
-                              : [],
-                            updateNotifications: [],
-                            createNotifications: [],
-                          },
-                        });
-                        hidePopup();
+                      onRemoveDueDate={t => {
+                        updateTaskDueDate({ variables: { taskID: t.id, dueDate: null, hasTime: false } });
+                        // hidePopup();
                      }}
-                      onDueDateChange={(t, newDueDate, hasTime, notifications) => {
-                        const updatedNotifications = notifications.current
-                          .filter((c) => c.externalId !== null)
-                          .map((c) => {
-                            let duration = DueDateNotificationDuration.Minute;
-                            switch (c.duration.value) {
-                              case 'hour':
-                                duration = DueDateNotificationDuration.Hour;
-                                break;
-                              case 'day':
-                                duration = DueDateNotificationDuration.Day;
-                                break;
-                              case 'week':
-                                duration = DueDateNotificationDuration.Week;
-                                break;
-                              default:
-                                break;
-                            }
-                            return {
-                              id: c.externalId ?? '',
-                              period: c.period,
-                              duration,
-                            };
-                          });
-                        const newNotifications = notifications.current
-                          .filter((c) => c.externalId === null)
-                          .map((c) => {
-                            let duration = DueDateNotificationDuration.Minute;
-                            switch (c.duration.value) {
-                              case 'hour':
-                                duration = DueDateNotificationDuration.Hour;
-                                break;
-                              case 'day':
-                                duration = DueDateNotificationDuration.Day;
-                                break;
-                              case 'week':
-                                duration = DueDateNotificationDuration.Week;
-                                break;
-                              default:
-                                break;
-                            }
-                            return {
-                              taskID: task.id,
-                              period: c.period,
-                              duration,
-                            };
-                          });
-                        // const updatedNotifications = notifications.filter(c => c.externalId === null);
-                        updateTaskDueDate({
-                          variables: {
-                            taskID: t.id,
-                            dueDate: newDueDate,
-                            hasTime,
-                            createNotifications: newNotifications,
-                            updateNotifications: updatedNotifications,
-                            deleteNotifications: notifications.removed.map((n) => ({ id: n })),
-                          },
-                        });
-                        hidePopup();
+                      onDueDateChange={(t, newDueDate, hasTime) => {
+                        updateTaskDueDate({ variables: { taskID: t.id, dueDate: newDueDate, hasTime } });
+                        // hidePopup();
                      }}
                      onCancel={NOOP}
                    />
--- a/frontend/src/Projects/Project/LabelManagerEditor/index.tsx
+++ b/frontend/src/Projects/Project/LabelManagerEditor/index.tsx
@ -8,14 +8,12 @@ import {
  FindProjectDocument,
  useCreateProjectLabelMutation,
  FindProjectQuery,
-  useToggleTaskLabelMutation,
-  useLabelsQuery,
 } from 'shared/generated/graphql';
 import LabelManager from 'shared/components/PopupMenu/LabelManager';
 import LabelEditor from 'shared/components/PopupMenu/LabelEditor';

 type LabelManagerEditorProps = {
-  taskID?: string;
+  labels: React.RefObject<Array<ProjectLabel>>;
  taskLabels: null | React.RefObject<Array<TaskLabel>>;
  projectID: string;
  labelColors: Array<LabelColor>;
@ -23,7 +21,7 @@ type LabelManagerEditorProps = {
 };

 const LabelManagerEditor: React.FC<LabelManagerEditorProps> = ({
-  taskID,
+  labels: labelsRef,
  projectID,
  labelColors,
  onLabelToggle,
@ -31,19 +29,13 @@ const LabelManagerEditor: React.FC<LabelManagerEditorProps> = ({
 }) => {
  const [currentLabel, setCurrentLabel] = useState('');
  const { setTab, hidePopup } = usePopup();
-  const [toggleTaskLabel] = useToggleTaskLabelMutation();
  const [createProjectLabel] = useCreateProjectLabelMutation({
-    onCompleted: (data) => {
-      if (taskID) {
-        toggleTaskLabel({ variables: { taskID, projectLabelID: data.createProjectLabel.id } });
-      }
-    },
    update: (client, newLabelData) => {
      updateApolloCache<FindProjectQuery>(
        client,
        FindProjectDocument,
-        (cache) =>
-          produce(cache, (draftCache) => {
+        cache =>
+          produce(cache, draftCache => {
            if (newLabelData.data) {
              draftCache.findProject.labels.push({ ...newLabelData.data.createProjectLabel });
            }
@ -60,39 +52,38 @@ const LabelManagerEditor: React.FC<LabelManagerEditorProps> = ({
      updateApolloCache<FindProjectQuery>(
        client,
        FindProjectDocument,
-        (cache) =>
-          produce(cache, (draftCache) => {
+        cache =>
+          produce(cache, draftCache => {
            draftCache.findProject.labels = cache.findProject.labels.filter(
-              (label) => label.id !== newLabelData.data?.deleteProjectLabel.id,
+              label => label.id !== newLabelData.data?.deleteProjectLabel.id,
            );
          }),
        { projectID },
      );
    },
  });
-  const { data } = useLabelsQuery({ variables: { projectID } });
-  const labels = data ? data.findProject.labels : [];
+  const labels = labelsRef.current ? labelsRef.current : [];
  const taskLabels = taskLabelsRef && taskLabelsRef.current ? taskLabelsRef.current : [];
  const [currentTaskLabels, setCurrentTaskLabels] = useState(taskLabels);
  return (
    <>
      <Popup title="Labels" tab={0} onClose={() => hidePopup()}>
        <LabelManager
-          labels={data ? data.findProject.labels : []}
+          labels={labels}
          taskLabels={currentTaskLabels}
          onLabelCreate={() => {
            setTab(2);
          }}
-          onLabelEdit={(labelId) => {
+          onLabelEdit={labelId => {
            setCurrentLabel(labelId);
            setTab(1);
          }}
-          onLabelToggle={(labelId) => {
+          onLabelToggle={labelId => {
            if (onLabelToggle) {
-              if (currentTaskLabels.find((t) => t.projectLabel.id === labelId)) {
-                setCurrentTaskLabels(currentTaskLabels.filter((t) => t.projectLabel.id !== labelId));
-              } else if (data) {
-                const newProjectLabel = data.findProject.labels.find((l) => l.id === labelId);
+              if (currentTaskLabels.find(t => t.projectLabel.id === labelId)) {
+                setCurrentTaskLabels(currentTaskLabels.filter(t => t.projectLabel.id !== labelId));
+              } else {
+                const newProjectLabel = labels.find(l => l.id === labelId);
                if (newProjectLabel) {
                  setCurrentTaskLabels([
                    ...currentTaskLabels,
@ -112,14 +103,14 @@ const LabelManagerEditor: React.FC<LabelManagerEditorProps> = ({
      <Popup onClose={() => hidePopup()} title="Edit label" tab={1}>
        <LabelEditor
          labelColors={labelColors}
-          label={labels.find((label) => label.id === currentLabel) ?? null}
+          label={labels.find(label => label.id === currentLabel) ?? null}
          onLabelEdit={(projectLabelID, name, color) => {
            if (projectLabelID) {
              updateProjectLabel({ variables: { projectLabelID, labelColorID: color.id, name: name ?? '' } });
            }
            setTab(0);
          }}
-          onLabelDelete={(labelID) => {
+          onLabelDelete={labelID => {
            deleteProjectLabel({ variables: { projectLabelID: labelID } });
            setTab(0);
          }}
--- a/frontend/src/Projects/Project/UserManagementPopup/OptionValue.tsx
+++ b/frontend/src/Projects/Project/UserManagementPopup/OptionValue.tsx
@ -1,16 +0,0 @@
-import React from 'react';
-import { Cross } from 'shared/icons';
-import * as S from './Styles';
-
-const OptionValue = ({ data, removeProps }: any) => {
-  return (
-    <S.OptionValueWrapper>
-      <S.OptionValueLabel>{data.label}</S.OptionValueLabel>
-      <S.OptionValueRemove {...removeProps}>
-        <Cross width={14} height={14} />
-      </S.OptionValueRemove>
-    </S.OptionValueWrapper>
-  );
-};
-
-export default OptionValue;
--- a/frontend/src/Projects/Project/UserManagementPopup/Styles.ts
+++ b/frontend/src/Projects/Project/UserManagementPopup/Styles.ts
@ -1,64 +0,0 @@
-import styled from 'styled-components';
-import Button from 'shared/components/Button';
-
-export const OptionWrapper = styled.div<{ isFocused: boolean }>`
-  cursor: pointer;
-  padding: 4px 8px;
-  ${props => props.isFocused && `background: rgba(${props.theme.colors.primary});`}
-  display: flex;
-  align-items: center;
-`;
-
-export const OptionContent = styled.div`
-  display: flex;
-  flex-direction: column;
-  margin-left: 12px;
-`;
-
-export const OptionLabel = styled.span<{ fontSize: number; quiet: boolean }>`
-  display: flex;
-  align-items: center;
-  font-size: ${p => p.fontSize}px;
-  color: rgba(${p => (p.quiet ? p.theme.colors.text.primary : p.theme.colors.text.primary)});
-`;
-
-export const OptionValueWrapper = styled.div`
-  background: rgba(${props => props.theme.colors.bg.primary});
-  border-radius: 4px;
-  margin: 2px;
-  padding: 3px 6px 3px 4px;
-  display: flex;
-  align-items: center;
-`;
-
-export const OptionValueLabel = styled.span`
-  font-size: 12px;
-  color: rgba(${props => props.theme.colors.text.secondary});
-`;
-
-export const OptionValueRemove = styled.button`
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: none;
-  border: none;
-  outline: none;
-  padding: 0;
-  margin: 0;
-  margin-left: 4px;
-`;
-
-export const InviteButton = styled(Button)`
-  margin-top: 12px;
-  height: 32px;
-  padding: 4px 12px;
-  width: 100%;
-  justify-content: center;
-`;
-
-export const InviteContainer = styled.div`
-  min-height: 300px;
-  display: flex;
-  flex-direction: column;
-`;
--- a/frontend/src/Projects/Project/UserManagementPopup/UserOption.tsx
+++ b/frontend/src/Projects/Project/UserManagementPopup/UserOption.tsx
@ -1,39 +0,0 @@
-import React from 'react';
-import TaskAssignee from 'shared/components/TaskAssignee';
-import * as S from './Styles';
-
-type UserOptionProps = {
-  innerProps: any;
-  isDisabled: boolean;
-  isFocused: boolean;
-  label: string;
-  data: any;
-  getValue: any;
-};
-
-const UserOption: React.FC<UserOptionProps> = ({ isDisabled, isFocused, innerProps, label, data }) => {
-  return !isDisabled ? (
-    <S.OptionWrapper {...innerProps} isFocused={isFocused}>
-      <TaskAssignee
-        size={32}
-        member={{
-          id: '',
-          fullName: data.value.label,
-          profileIcon: data.value.profileIcon,
-        }}
-      />
-      <S.OptionContent>
-        <S.OptionLabel fontSize={16} quiet={false}>
-          {label}
-        </S.OptionLabel>
-        {data.value.type === 2 && (
-          <S.OptionLabel fontSize={14} quiet>
-            Joined
-          </S.OptionLabel>
-        )}
-      </S.OptionContent>
-    </S.OptionWrapper>
-  ) : null;
-};
-
-export default UserOption;
--- a/frontend/src/Projects/Project/UserManagementPopup/fetchMembers.ts
+++ b/frontend/src/Projects/Project/UserManagementPopup/fetchMembers.ts
@ -1,82 +0,0 @@
-import gql from 'graphql-tag';
-import isValidEmail from 'shared/utils/email';
-
-type MemberFilterOptions = {
-  projectID?: null | string;
-  teamID?: null | string;
-  organization?: boolean;
-};
-
-export default async function(client: any, projectID: string, options: MemberFilterOptions, input: string, cb: any) {
-  if (input && input.trim().length < 3) {
-    return [];
-  }
-  const res = await client.query({
-    query: gql`
-    query {
-      searchMembers(input: {searchFilter:"${input}", projectID:"${projectID}"}) {
-        id
-        similarity
-        status
-        user {
-          id
-          fullName
-          email
-          profileIcon {
-            url
-            initials
-            bgColor
-          }
-        }
-      }
-    }
-    `,
-  });
-
-  let results: any = [];
-  const emails: Array<string> = [];
-  if (res.data && res.data.searchMembers) {
-    results = [
-      ...res.data.searchMembers.map((m: any) => {
-        if (m.status === 'INVITED') {
-          return {
-            label: m.id,
-            value: {
-              id: m.id,
-              type: 2,
-              profileIcon: {
-                bgColor: '#ccc',
-                initials: m.id.charAt(0),
-              },
-            },
-          };
-        }
-
-        emails.push(m.user.email);
-        return {
-          label: m.user.fullName,
-          value: { id: m.user.id, type: 0, profileIcon: m.user.profileIcon },
-        };
-      }),
-    ];
-  }
-
-  if (isValidEmail(input) && !emails.find(e => e === input)) {
-    results = [
-      ...results,
-      {
-        label: input,
-        value: {
-          id: input,
-          type: 1,
-          profileIcon: {
-            bgColor: '#ccc',
-            initials: input.charAt(0),
-          },
-        },
-      },
-    ];
-  }
-
-  return results;
-}
--- a/frontend/src/Projects/Project/UserManagementPopup/index.tsx
+++ b/frontend/src/Projects/Project/UserManagementPopup/index.tsx
@ -1,82 +0,0 @@
-import React, { useState } from 'react';
-import AsyncSelect from 'react-select/async';
-import { useApolloClient } from '@apollo/react-hooks';
-import { colourStyles } from 'shared/components/Select';
-import { Popup } from 'shared/components/PopupMenu';
-import OptionValue from './OptionValue';
-import UserOption from './UserOption';
-import fetchMembers from './fetchMembers';
-import * as S from './Styles';
-
-type InviteUserData = {
-  email?: string;
-  userID?: string;
-};
-
-type UserManagementPopupProps = {
-  projectID: string;
-  users: Array<User>;
-  projectMembers: Array<TaskUser>;
-  onInviteProjectMembers: (data: Array<InviteUserData>) => void;
-};
-
-const UserManagementPopup: React.FC<UserManagementPopupProps> = ({
-  projectID,
-  users,
-  projectMembers,
-  onInviteProjectMembers,
-}) => {
-  const client = useApolloClient();
-  const [invitedUsers, setInvitedUsers] = useState<Array<any> | null>(null);
-  return (
-    <Popup tab={0} title="Invite a user">
-      <S.InviteContainer>
-        <AsyncSelect
-          getOptionValue={option => option.value.id}
-          placeholder="Email address or username"
-          noOptionsMessage={() => null}
-          onChange={(e: any) => {
-            setInvitedUsers(e);
-          }}
-          isMulti
-          autoFocus
-          cacheOptions
-          styles={colourStyles}
-          defaultOption
-          components={{
-            MultiValue: OptionValue,
-            Option: UserOption,
-            IndicatorSeparator: null,
-            DropdownIndicator: null,
-          }}
-          loadOptions={(i, cb) => fetchMembers(client, projectID, {}, i, cb)}
-        />
-      </S.InviteContainer>
-      <S.InviteButton
-        onClick={() => {
-          if (invitedUsers) {
-            onInviteProjectMembers(
-              invitedUsers.map(user => {
-                if (user.value.type === 0) {
-                  return {
-                    userID: user.value.id,
-                  };
-                }
-                return {
-                  email: user.value.id,
-                };
-              }),
-            );
-          }
-        }}
-        disabled={invitedUsers === null}
-        hoverVariant="none"
-        fontSize="16px"
-      >
-        Send Invite
-      </S.InviteButton>
-    </Popup>
-  );
-};
-
-export default UserManagementPopup;
--- a/frontend/src/Projects/Project/index.tsx
+++ b/frontend/src/Projects/Project/index.tsx
@ -1,9 +1,10 @@
 // LOC830
-import React, { useRef, useEffect } from 'react';
+import React, { useState, useRef, useEffect, useContext } from 'react';
 import updateApolloCache from 'shared/utils/cache';
-import GlobalTopNavbar from 'App/TopNavbar';
-import ProjectPopup from 'App/TopNavbar/ProjectPopup';
-import { usePopup } from 'shared/components/PopupMenu';
+import GlobalTopNavbar, { ProjectPopup } from 'App/TopNavbar';
+import styled from 'styled-components/macro';
+import AsyncSelect from 'react-select/async';
+import { usePopup, Popup } from 'shared/components/PopupMenu';
 import {
  useParams,
  Route,
@ -22,85 +23,432 @@ import {
  useFindProjectQuery,
  useDeleteInvitedProjectMemberMutation,
  useUpdateTaskNameMutation,
+  useCreateTaskMutation,
  useDeleteTaskMutation,
+  useUpdateTaskLocationMutation,
+  useUpdateTaskGroupLocationMutation,
+  useCreateTaskGroupMutation,
  useUpdateTaskDescriptionMutation,
  FindProjectDocument,
  FindProjectQuery,
 } from 'shared/generated/graphql';
 import produce from 'immer';
+import UserContext, { useCurrentUser } from 'App/context';
+import Input from 'shared/components/Input';
+import Member from 'shared/components/Member';
+import EmptyBoard from 'shared/components/EmptyBoard';
 import NOOP from 'shared/utils/noop';
-import useStateWithLocalStorage from 'shared/hooks/useStateWithLocalStorage';
-import localStorage from 'shared/utils/localStorage';
-import polling from 'shared/utils/polling';
+import { Lock, Cross } from 'shared/icons';
+import Button from 'shared/components/Button';
+import { useApolloClient } from '@apollo/react-hooks';
+import TaskAssignee from 'shared/components/TaskAssignee';
+import gql from 'graphql-tag';
+import { colourStyles } from 'shared/components/Select';
 import Board, { BoardLoading } from './Board';
 import Details from './Details';
 import LabelManagerEditor from './LabelManagerEditor';
-import UserManagementPopup from './UserManagementPopup';
+import { mixin } from '../../shared/utils/styles';
+
+const CARD_LABEL_VARIANT_STORAGE_KEY = 'card_label_variant';
+
+const RFC2822_EMAIL = /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/;
+
+const useStateWithLocalStorage = (localStorageKey: string): [string, React.Dispatch<React.SetStateAction<string>>] => {
+  const [value, setValue] = React.useState<string>(localStorage.getItem(localStorageKey) || '');
+
+  React.useEffect(() => {
+    localStorage.setItem(localStorageKey, value);
+  }, [value]);
+
+  return [value, setValue];
+};
+
+const SearchInput = styled(Input)`
+  margin: 0;
+`;
+
+const UserMember = styled(Member)`
+  padding: 4px 0;
+  cursor: pointer;
+  &:hover {
+    background: ${props => mixin.rgba(props.theme.colors.bg.primary, 0.4)};
+  }
+  border-radius: 6px;
+`;
+
+const MemberList = styled.div`
+  margin: 8px 0;
+`;
+
+type InviteUserData = {
+  email?: string;
+  suerID?: string;
+};
+type UserManagementPopupProps = {
+  projectID: string;
+  users: Array<User>;
+  projectMembers: Array<TaskUser>;
+  onInviteProjectMembers: (data: Array<InviteUserData>) => void;
+};
+
+const VisibiltyPrivateIcon = styled(Lock)`
+  padding-right: 4px;
+`;
+
+const VisibiltyButtonText = styled.span`
+  color: rgba(${props => props.theme.colors.text.primary});
+`;
+
+const ShareActions = styled.div`
+  border-top: 1px solid #414561;
+  margin-top: 8px;
+  padding-top: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+
+const VisibiltyButton = styled.button`
+  cursor: pointer;
+  margin: 2px 4px;
+  padding: 2px 4px;
+  align-items: center;
+  justify-content: center;
+  border-bottom: 1px solid transparent;
+  &:hover ${VisibiltyButtonText} {
+    color: rgba(${props => props.theme.colors.text.secondary});
+  }
+  &:hover ${VisibiltyPrivateIcon} {
+    fill: rgba(${props => props.theme.colors.text.secondary});
+    stroke: rgba(${props => props.theme.colors.text.secondary});
+  }
+  &:hover {
+    border-bottom: 1px solid rgba(${props => props.theme.colors.primary});
+  }
+`;
+
+type MemberFilterOptions = {
+  projectID?: null | string;
+  teamID?: null | string;
+  organization?: boolean;
+};
+
+const fetchMembers = async (client: any, projectID: string, options: MemberFilterOptions, input: string, cb: any) => {
+  if (input && input.trim().length < 3) {
+    return [];
+  }
+  const res = await client.query({
+    query: gql`
+    query {
+      searchMembers(input: {searchFilter:"${input}", projectID:"${projectID}"}) {
+        id
+        similarity
+        status
+        user {
+          id
+          fullName
+          email
+          profileIcon {
+            url
+            initials
+            bgColor
+          }
+        }
+      }
+    }
+    `,
+  });
+
+  let results: any = [];
+  const emails: Array<string> = [];
+  if (res.data && res.data.searchMembers) {
+    results = [
+      ...res.data.searchMembers.map((m: any) => {
+        if (m.status === 'INVITED') {
+          return {
+            label: m.id,
+            value: {
+              id: m.id,
+              type: 2,
+              profileIcon: {
+                bgColor: '#ccc',
+                initials: m.id.charAt(0),
+              },
+            },
+          };
+        }
+
+        emails.push(m.user.email);
+        return {
+          label: m.user.fullName,
+          value: { id: m.user.id, type: 0, profileIcon: m.user.profileIcon },
+        };
+      }),
+    ];
+  }
+
+  if (RFC2822_EMAIL.test(input) && !emails.find(e => e === input)) {
+    results = [
+      ...results,
+      {
+        label: input,
+        value: {
+          id: input,
+          type: 1,
+          profileIcon: {
+            bgColor: '#ccc',
+            initials: input.charAt(0),
+          },
+        },
+      },
+    ];
+  }
+
+  return results;
+};
+
+type UserOptionProps = {
+  innerProps: any;
+  isDisabled: boolean;
+  isFocused: boolean;
+  label: string;
+  data: any;
+  getValue: any;
+};
+
+const OptionWrapper = styled.div<{ isFocused: boolean }>`
+  cursor: pointer;
+  padding: 4px 8px;
+  ${props => props.isFocused && `background: rgba(${props.theme.colors.primary});`}
+  display: flex;
+  align-items: center;
+`;
+const OptionContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-left: 12px;
+`;
+
+const OptionLabel = styled.span<{ fontSize: number; quiet: boolean }>`
+  display: flex;
+  align-items: center;
+  font-size: ${p => p.fontSize}px;
+  color: rgba(${p => (p.quiet ? p.theme.colors.text.primary : p.theme.colors.text.primary)});
+`;
+
+const UserOption: React.FC<UserOptionProps> = ({ isDisabled, isFocused, innerProps, label, data }) => {
+  return !isDisabled ? (
+    <OptionWrapper {...innerProps} isFocused={isFocused}>
+      <TaskAssignee
+        size={32}
+        member={{
+          id: '',
+          fullName: data.value.label,
+          profileIcon: data.value.profileIcon,
+        }}
+      />
+      <OptionContent>
+        <OptionLabel fontSize={16} quiet={false}>
+          {label}
+        </OptionLabel>
+        {data.value.type === 2 && (
+          <OptionLabel fontSize={14} quiet>
+            Joined
+          </OptionLabel>
+        )}
+      </OptionContent>
+    </OptionWrapper>
+  ) : null;
+};
+
+const OptionValueWrapper = styled.div`
+  background: rgba(${props => props.theme.colors.bg.primary});
+  border-radius: 4px;
+  margin: 2px;
+  padding: 3px 6px 3px 4px;
+  display: flex;
+  align-items: center;
+`;
+
+const OptionValueLabel = styled.span`
+  font-size: 12px;
+  color: rgba(${props => props.theme.colors.text.secondary});
+`;
+
+const OptionValueRemove = styled.button`
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  outline: none;
+  padding: 0;
+  margin: 0;
+  margin-left: 4px;
+`;
+const OptionValue = ({ data, removeProps }: any) => {
+  return (
+    <OptionValueWrapper>
+      <OptionValueLabel>{data.label}</OptionValueLabel>
+      <OptionValueRemove {...removeProps}>
+        <Cross width={14} height={14} />
+      </OptionValueRemove>
+    </OptionValueWrapper>
+  );
+};
+
+const InviteButton = styled(Button)`
+  margin-top: 12px;
+  height: 32px;
+  padding: 4px 12px;
+  width: 100%;
+  justify-content: center;
+`;
+
+const InviteContainer = styled.div`
+  min-height: 300px;
+  display: flex;
+  flex-direction: column;
+`;
+
+const UserManagementPopup: React.FC<UserManagementPopupProps> = ({
+  projectID,
+  users,
+  projectMembers,
+  onInviteProjectMembers,
+}) => {
+  const client = useApolloClient();
+  const [invitedUsers, setInvitedUsers] = useState<Array<any> | null>(null);
+  return (
+    <Popup tab={0} title="Invite a user">
+      <InviteContainer>
+        <AsyncSelect
+          getOptionValue={option => option.value.id}
+          placeholder="Email address or username"
+          noOptionsMessage={() => null}
+          onChange={(e: any) => {
+            setInvitedUsers(e);
+          }}
+          isMulti
+          autoFocus
+          cacheOptions
+          styles={colourStyles}
+          defaultOption
+          components={{
+            MultiValue: OptionValue,
+            Option: UserOption,
+            IndicatorSeparator: null,
+            DropdownIndicator: null,
+          }}
+          loadOptions={(i, cb) => fetchMembers(client, projectID, {}, i, cb)}
+        />
+      </InviteContainer>
+      <InviteButton
+        onClick={() => {
+          if (invitedUsers) {
+            onInviteProjectMembers(
+              invitedUsers.map(user => {
+                if (user.value.type === 0) {
+                  return {
+                    userID: user.value.id,
+                  };
+                }
+                return {
+                  email: user.value.id,
+                };
+              }),
+            );
+          }
+        }}
+        disabled={invitedUsers === null}
+        hoverVariant="none"
+        fontSize="16px"
+      >
+        Send Invite
+      </InviteButton>
+    </Popup>
+  );
+};

 type TaskRouteProps = {
  taskID: string;
 };

+interface QuickCardEditorState {
+  isOpen: boolean;
+  target: React.RefObject<HTMLElement> | null;
+  taskID: string | null;
+  taskGroupID: string | null;
+}
+
 interface ProjectParams {
  projectID: string;
 }

+const initialQuickCardEditorState: QuickCardEditorState = {
+  taskID: null,
+  taskGroupID: null,
+  isOpen: false,
+  target: null,
+};
+
 const Project = () => {
  const { projectID } = useParams<ProjectParams>();
  const history = useHistory();
  const match = useRouteMatch();
-  const location = useLocation();
-
-  const { showPopup, hidePopup } = usePopup();
-  const labelsRef = useRef<Array<ProjectLabel>>([]);
-  const [value, setValue] = useStateWithLocalStorage(localStorage.CARD_LABEL_VARIANT_STORAGE_KEY);
-  const taskLabelsRef = useRef<Array<TaskLabel>>([]);

  const [updateTaskDescription] = useUpdateTaskDescriptionMutation();
-  const [updateProjectMemberRole] = useUpdateProjectMemberRoleMutation();
-  const [updateTaskName] = useUpdateTaskNameMutation();
-  const { data, error } = useFindProjectQuery({
-    variables: { projectID },
-    pollInterval: polling.PROJECT,
-  });
+  const taskLabelsRef = useRef<Array<TaskLabel>>([]);
  const [toggleTaskLabel] = useToggleTaskLabelMutation({
-    onCompleted: (newTaskLabel) => {
+    onCompleted: newTaskLabel => {
      taskLabelsRef.current = newTaskLabel.toggleTaskLabel.task.labels;
    },
  });
+
+  const [value, setValue] = useStateWithLocalStorage(CARD_LABEL_VARIANT_STORAGE_KEY);
+  const [updateProjectMemberRole] = useUpdateProjectMemberRoleMutation();
+
  const [deleteTask] = useDeleteTaskMutation({
    update: (client, resp) =>
      updateApolloCache<FindProjectQuery>(
        client,
        FindProjectDocument,
-        (cache) =>
-          produce(cache, (draftCache) => {
+        cache =>
+          produce(cache, draftCache => {
            if (resp.data) {
              const taskGroupIdx = draftCache.findProject.taskGroups.findIndex(
-                (tg) => tg.tasks.findIndex((t) => t.id === resp.data?.deleteTask.taskID) !== -1,
+                tg => tg.tasks.findIndex(t => t.id === resp.data?.deleteTask.taskID) !== -1,
              );

              if (taskGroupIdx !== -1) {
                draftCache.findProject.taskGroups[taskGroupIdx].tasks = cache.findProject.taskGroups[
                  taskGroupIdx
-                ].tasks.filter((t) => t.id !== resp.data?.deleteTask.taskID);
+                ].tasks.filter(t => t.id !== resp.data?.deleteTask.taskID);
              }
            }
          }),
-        { projectID: data ? data.findProject.id : '' },
+        { projectID },
      ),
  });

+  const [updateTaskName] = useUpdateTaskNameMutation();
+
+  const { loading, data, error } = useFindProjectQuery({
+    variables: { projectID },
+    pollInterval: 3000,
+  });
+
  const [updateProjectName] = useUpdateProjectNameMutation({
    update: (client, newName) => {
      updateApolloCache<FindProjectQuery>(
        client,
        FindProjectDocument,
-        (cache) =>
-          produce(cache, (draftCache) => {
+        cache =>
+          produce(cache, draftCache => {
            draftCache.findProject.name = newName.data?.updateProjectName.name ?? '';
          }),
-        { projectID: data ? data.findProject.id : '' },
+        { projectID },
      );
    },
  });
@ -110,8 +458,8 @@ const Project = () => {
      updateApolloCache<FindProjectQuery>(
        client,
        FindProjectDocument,
-        (cache) =>
-          produce(cache, (draftCache) => {
+        cache =>
+          produce(cache, draftCache => {
            if (response.data) {
              draftCache.findProject.members = [
                ...cache.findProject.members,
@ -123,7 +471,7 @@ const Project = () => {
              ];
            }
          }),
-        { projectID: data ? data.findProject.id : '' },
+        { projectID },
      );
    },
  });
@ -132,13 +480,13 @@ const Project = () => {
      updateApolloCache<FindProjectQuery>(
        client,
        FindProjectDocument,
-        (cache) =>
-          produce(cache, (draftCache) => {
+        cache =>
+          produce(cache, draftCache => {
            draftCache.findProject.invitedMembers = cache.findProject.invitedMembers.filter(
-              (m) => m.email !== response.data?.deleteInvitedProjectMember.invitedMember.email ?? '',
+              m => m.email !== response.data?.deleteInvitedProjectMember.invitedMember.email ?? '',
            );
          }),
-        { projectID: data ? data.findProject.id : '' },
+        { projectID },
      );
    },
  });
@ -147,23 +495,31 @@ const Project = () => {
      updateApolloCache<FindProjectQuery>(
        client,
        FindProjectDocument,
-        (cache) =>
-          produce(cache, (draftCache) => {
+        cache =>
+          produce(cache, draftCache => {
            draftCache.findProject.members = cache.findProject.members.filter(
-              (m) => m.id !== response.data?.deleteProjectMember.member.id,
+              m => m.id !== response.data?.deleteProjectMember.member.id,
            );
          }),
-        { projectID: data ? data.findProject.id : '' },
+        { projectID },
      );
    },
  });

+  const { user } = useCurrentUser();
+  const location = useLocation();
+
+  const { showPopup, hidePopup } = usePopup();
+  const $labelsRef = useRef<HTMLDivElement>(null);
+  const labelsRef = useRef<Array<ProjectLabel>>([]);
  useEffect(() => {
    if (data) {
      document.title = `${data.findProject.name} | Taskcafé`;
    }
  }, [data]);
-
+  if (error) {
+    history.push('/projects');
+  }
  if (data) {
    labelsRef.current = data.findProject.labels;

@ -171,29 +527,29 @@ const Project = () => {
      <>
        <GlobalTopNavbar
          onChangeRole={(userID, roleCode) => {
-            updateProjectMemberRole({ variables: { userID, roleCode, projectID: data ? data.findProject.id : '' } });
+            updateProjectMemberRole({ variables: { userID, roleCode, projectID } });
          }}
-          onChangeProjectOwner={() => {
+          onChangeProjectOwner={uid => {
            hidePopup();
          }}
-          onRemoveFromBoard={(userID) => {
-            deleteProjectMember({ variables: { userID, projectID: data ? data.findProject.id : '' } });
+          onRemoveFromBoard={userID => {
+            deleteProjectMember({ variables: { userID, projectID } });
            hidePopup();
          }}
-          onRemoveInvitedFromBoard={(email) => {
-            deleteInvitedProjectMember({ variables: { projectID: data ? data.findProject.id : '', email } });
+          onRemoveInvitedFromBoard={email => {
+            deleteInvitedProjectMember({ variables: { projectID, email } });
            hidePopup();
          }}
-          onSaveProjectName={(projectName) => {
-            updateProjectName({ variables: { projectID: data ? data.findProject.id : '', name: projectName } });
+          onSaveProjectName={projectName => {
+            updateProjectName({ variables: { projectID, name: projectName } });
          }}
-          onInviteUser={($target) => {
+          onInviteUser={$target => {
            showPopup(
              $target,
              <UserManagementPopup
-                projectID={data ? data.findProject.id : ''}
-                onInviteProjectMembers={(members) => {
-                  inviteProjectMembers({ variables: { projectID: data ? data.findProject.id : '', members } });
+                projectID={projectID}
+                onInviteProjectMembers={members => {
+                  inviteProjectMembers({ variables: { projectID, members } });
                  hidePopup();
                }}
                users={data.users}
@ -201,14 +557,7 @@ const Project = () => {
              />,
            );
          }}
-          popupContent={
-            <ProjectPopup // eslint-disable-line
-              history={history}
-              publicOn={data.findProject.publicOn}
-              name={data.findProject.name}
-              projectID={projectID}
-            />
-          }
+          popupContent={<ProjectPopup history={history} name={data.findProject.name} projectID={projectID} />}
          menuType={[{ name: 'Board', link: location.pathname }]}
          currentTab={0}
          projectMembers={data.findProject.members}
@ -233,50 +582,49 @@ const Project = () => {
        />
        <Route
          path={`${match.path}/board/c/:taskID`}
-          render={() => {
-            return (
-              <Details
-                refreshCache={NOOP}
-                availableMembers={data.findProject.members}
-                projectURL={`${match.url}/board`}
-                onTaskNameChange={(updatedTask, newName) => {
-                  updateTaskName({ variables: { taskID: updatedTask.id, name: newName } });
-                }}
-                onTaskDescriptionChange={(updatedTask, newDescription) => {
-                  updateTaskDescription({
-                    variables: { taskID: updatedTask.id, description: newDescription },
-                    optimisticResponse: {
-                      __typename: 'Mutation',
-                      updateTaskDescription: {
-                        __typename: 'Task',
-                        id: updatedTask.id,
-                        description: newDescription,
-                      },
+          render={(routeProps: RouteComponentProps<TaskRouteProps>) => (
+            <Details
+              refreshCache={NOOP}
+              availableMembers={data.findProject.members}
+              projectURL={`${match.url}/board`}
+              taskID={routeProps.match.params.taskID}
+              onTaskNameChange={(updatedTask, newName) => {
+                updateTaskName({ variables: { taskID: updatedTask.id, name: newName } });
+              }}
+              onTaskDescriptionChange={(updatedTask, newDescription) => {
+                updateTaskDescription({
+                  variables: { taskID: updatedTask.id, description: newDescription },
+                  optimisticResponse: {
+                    __typename: 'Mutation',
+                    updateTaskDescription: {
+                      __typename: 'Task',
+                      id: updatedTask.id,
+                      description: newDescription,
                    },
-                  });
-                }}
-                onDeleteTask={(deletedTask) => {
-                  deleteTask({ variables: { taskID: deletedTask.id } });
-                  history.push(`${match.url}/board`);
-                }}
-                onOpenAddLabelPopup={(task, $targetRef) => {
-                  taskLabelsRef.current = task.labels;
-                  showPopup(
-                    $targetRef,
-                    <LabelManagerEditor
-                      onLabelToggle={(labelID) => {
-                        toggleTaskLabel({ variables: { taskID: task.id, projectLabelID: labelID } });
-                      }}
-                      taskID={task.id}
-                      labelColors={data.labelColors}
-                      taskLabels={taskLabelsRef}
-                      projectID={projectID}
-                    />,
-                  );
-                }}
-              />
-            );
-          }}
+                  },
+                });
+              }}
+              onDeleteTask={deletedTask => {
+                deleteTask({ variables: { taskID: deletedTask.id } });
+                history.push(`${match.url}/board`);
+              }}
+              onOpenAddLabelPopup={(task, $targetRef) => {
+                taskLabelsRef.current = task.labels;
+                showPopup(
+                  $targetRef,
+                  <LabelManagerEditor
+                    onLabelToggle={labelID => {
+                      toggleTaskLabel({ variables: { taskID: task.id, projectLabelID: labelID } });
+                    }}
+                    labelColors={data.labelColors}
+                    labels={labelsRef}
+                    taskLabels={taskLabelsRef}
+                    projectID={projectID}
+                  />,
+                );
+              }}
+            />
+          )}
        />
      </>
    );
--- a/frontend/src/Projects/index.tsx
+++ b/frontend/src/Projects/index.tsx
@ -9,23 +9,21 @@ import {
  GetProjectsDocument,
  GetProjectsQuery,
 } from 'shared/generated/graphql';
-import FormInput from 'shared/components/FormInput';

 import { Link } from 'react-router-dom';
 import NewProject from 'shared/components/NewProject';
-import { useCurrentUser } from 'App/context';
+import { PermissionLevel, PermissionObjectType, useCurrentUser } from 'App/context';
 import Button from 'shared/components/Button';
 import { usePopup, Popup } from 'shared/components/PopupMenu';
 import { useForm } from 'react-hook-form';
-import ControlledInput from 'shared/components/ControlledInput';
+import Input from 'shared/components/Input';
 import updateApolloCache from 'shared/utils/cache';
 import produce from 'immer';
 import NOOP from 'shared/utils/noop';
 import theme from 'App/ThemeStyles';
-import polling from 'shared/utils/polling';
 import { mixin } from '../shared/utils/styles';

-type CreateTeamData = { name: string };
+type CreateTeamData = { teamName: string };

 type CreateTeamFormProps = {
  onCreateTeam: (teamName: string) => void;
@ -37,30 +35,28 @@ const CreateTeamButton = styled(Button)`
  width: 100%;
 `;

-const ErrorText = styled.span`
-  font-size: 14px;
-  color: ${(props) => props.theme.colors.danger};
-`;
 const CreateTeamForm: React.FC<CreateTeamFormProps> = ({ onCreateTeam }) => {
-  const {
-    register,
-    handleSubmit,
-    formState: { errors },
-  } = useForm<CreateTeamData>();
+  const { register, handleSubmit } = useForm<CreateTeamData>();
  const createTeam = (data: CreateTeamData) => {
-    onCreateTeam(data.name);
+    onCreateTeam(data.teamName);
  };
  return (
    <CreateTeamFormContainer onSubmit={handleSubmit(createTeam)}>
-      {errors.name && <ErrorText>{errors.name.message}</ErrorText>}
-      <FormInput width="100%" label="Team name" variant="alternate" {...register('name')} />
+      <Input
+        width="100%"
+        label="Team name"
+        id="teamName"
+        name="teamName"
+        variant="alternate"
+        ref={register({ required: 'Team name is required' })}
+      />
      <CreateTeamButton type="submit">Create</CreateTeamButton>
    </CreateTeamFormContainer>
  );
 };

 const ProjectAddTile = styled.div`
-  background-color: ${(props) => mixin.rgba(props.theme.colors.bg.primary, 0.4)};
+  background-color: ${props => mixin.rgba(props.theme.colors.bg.primary, 0.4)};
  background-size: cover;
  background-position: 50%;
  color: #fff;
@ -74,7 +70,7 @@ const ProjectAddTile = styled.div`
 `;

 const ProjectTile = styled(Link)<{ color: string }>`
-  background-color: ${(props) => props.color};
+  background-color: ${props => props.color};
  background-size: cover;
  background-position: 50%;
  color: #fff;
@ -145,7 +141,7 @@ const ProjectTileName = styled.div<{ centered?: boolean }>`
  max-height: 40px;
  width: 100%;
  word-wrap: break-word;
-  ${(props) => props.centered && 'text-align: center;'}
+  ${props => props.centered && 'text-align: center;'}
 `;

 const Wrapper = styled.div`
@ -183,7 +179,7 @@ const SectionActionLink = styled(Link)`

 const ProjectSectionTitle = styled.h3`
  font-size: 16px;
-  color: ${(props) => props.theme.colors.text.primary};
+  color: ${props => props.theme.colors.text.primary};
 `;

 const ProjectsContainer = styled.div`
@ -207,14 +203,14 @@ type ShowNewProject = {

 const Projects = () => {
  const { showPopup, hidePopup } = usePopup();
-  const { loading, data } = useGetProjectsQuery({ pollInterval: polling.PROJECTS, fetchPolicy: 'cache-and-network' });
+  const { loading, data } = useGetProjectsQuery({ pollInterval: 3000, fetchPolicy: 'cache-and-network' });
  useEffect(() => {
    document.title = 'Taskcafé';
  }, []);
  const [createProject] = useCreateProjectMutation({
    update: (client, newProject) => {
-      updateApolloCache<GetProjectsQuery>(client, GetProjectsDocument, (cache) =>
-        produce(cache, (draftCache) => {
+      updateApolloCache<GetProjectsQuery>(client, GetProjectsDocument, cache =>
+        produce(cache, draftCache => {
          if (newProject.data) {
            draftCache.projects.push({ ...newProject.data.createProject });
          }
@ -227,8 +223,8 @@ const Projects = () => {
  const { user } = useCurrentUser();
  const [createTeam] = useCreateTeamMutation({
    update: (client, createData) => {
-      updateApolloCache<GetProjectsQuery>(client, GetProjectsDocument, (cache) =>
-        produce(cache, (draftCache) => {
+      updateApolloCache<GetProjectsQuery>(client, GetProjectsDocument, cache =>
+        produce(cache, draftCache => {
          if (createData.data) {
            draftCache.teams.push({ ...createData.data?.createTeam });
          }
@ -242,7 +238,7 @@ const Projects = () => {
    const { projects, teams, organizations } = data;
    const organizationID = organizations[0].id ?? null;
    const personalProjects = projects
-      .filter((p) => p.team === null)
+      .filter(p => p.team === null)
      .sort((a, b) => {
        const textA = a.name.toUpperCase();
        const textB = b.name.toUpperCase();
@ -254,12 +250,12 @@ const Projects = () => {
        const textB = b.name.toUpperCase();
        return textA < textB ? -1 : textA > textB ? 1 : 0; // eslint-disable-line no-nested-ternary
      })
-      .map((team) => {
+      .map(team => {
        return {
          id: team.id,
          name: team.name,
          projects: projects
-            .filter((project) => project.team && project.team.id === team.id)
+            .filter(project => project.team && project.team.id === team.id)
            .sort((a, b) => {
              const textA = a.name.toUpperCase();
              const textB = b.name.toUpperCase();
@ -272,10 +268,10 @@ const Projects = () => {
        <GlobalTopNavbar onSaveProjectName={NOOP} projectID={null} name={null} />
        <Wrapper>
          <ProjectsContainer>
-            {true && ( // TODO: add permision check
+            {user.roles.org === 'admin' && (
              <AddTeamButton
                variant="outline"
-                onClick={($target) => {
+                onClick={$target => {
                  showPopup(
                    $target,
                    <Popup
@ -286,7 +282,7 @@ const Projects = () => {
                      }}
                    >
                      <CreateTeamForm
-                        onCreateTeam={(teamName) => {
+                        onCreateTeam={teamName => {
                          if (organizationID) {
                            createTeam({ variables: { name: teamName, organizationID } });
                            hidePopup();
@ -307,7 +303,7 @@ const Projects = () => {
              <ProjectList>
                {personalProjects.map((project, idx) => (
                  <ProjectListItem key={project.id}>
-                    <ProjectTile color={colors[idx % 5]} to={`/p/${project.shortId}`}>
+                    <ProjectTile color={colors[idx % 5]} to={`/projects/${project.id}`}>
                      <ProjectTileFade />
                      <ProjectTileDetails>
                        <ProjectTileName>{project.name}</ProjectTileName>
@ -329,12 +325,12 @@ const Projects = () => {
                </ProjectListItem>
              </ProjectList>
            </div>
-            {projectTeams.map((team) => {
+            {projectTeams.map(team => {
              return (
                <div key={team.id}>
                  <ProjectSectionTitleWrapper>
                    <ProjectSectionTitle>{team.name}</ProjectSectionTitle>
-                    {true && ( // TODO: add permision check
+                    {user.isAdmin(PermissionLevel.TEAM, PermissionObjectType.TEAM, team.id) && (
                      <SectionActions>
                        <SectionActionLink to={`/teams/${team.id}`}>
                          <SectionAction variant="outline">Projects</SectionAction>
@ -351,7 +347,7 @@ const Projects = () => {
                  <ProjectList>
                    {team.projects.map((project, idx) => (
                      <ProjectListItem key={project.id}>
-                        <ProjectTile color={colors[idx % 5]} to={`/p/${project.shortId}`}>
+                        <ProjectTile color={colors[idx % 5]} to={`/projects/${project.id}`}>
                          <ProjectTileFade />
                          <ProjectTileDetails>
                            <ProjectTileName>{project.name}</ProjectTileName>
@ -359,7 +355,7 @@ const Projects = () => {
                        </ProjectTile>
                      </ProjectListItem>
                    ))}
-                    {true && ( // TODO: add permision check
+                    {user.isAdmin(PermissionLevel.TEAM, PermissionObjectType.TEAM, team.id) && (
                      <ProjectListItem>
                        <ProjectAddTile
                          onClick={() => {
--- a/frontend/src/Register/index.tsx
+++ b/frontend/src/Register/index.tsx
@ -17,7 +17,6 @@ const UsersRegister = () => {
        <Register
          registered={registered}
          onSubmit={(data, setComplete, setError) => {
-            let isRedirected = false;
            if (data.password !== data.password_confirm) {
              setError('password', { type: 'error', message: 'Passwords must match' });
              setError('password_confirm', { type: 'error', message: 'Passwords must match' });
@ -36,26 +35,23 @@ const UsersRegister = () => {
                  },
                }),
              })
-                .then(async (x) => {
+                .then(async x => {
                  const response = await x.json();
                  const { setup } = response;
+                  console.log(response);
                  if (setup) {
                    history.replace(`/confirm?confirmToken=xxxx`);
-                    isRedirected = true;
                  } else if (params.confirmToken) {
                    history.replace(`/confirm?confirmToken=${params.confirmToken}`);
-                    isRedirected = true;
                  } else {
                    setRegistered(true);
                  }
                })
-                .catch((e) => {
+                .catch(() => {
                  toast('There was an issue trying to register');
                });
            }
-            if (!isRedirected) {
-              setComplete(true);
-            }
+            setComplete(true);
          }}
        />
      </LoginWrapper>
--- a/frontend/src/Teams/Members/index.tsx
+++ b/frontend/src/Teams/Members/index.tsx
@ -2,9 +2,8 @@ import React, { useState } from 'react';
 import Input from 'shared/components/Input';
 import updateApolloCache from 'shared/utils/cache';
 import produce from 'immer';
-import polling from 'shared/utils/polling';
 import Button from 'shared/components/Button';
-import { useCurrentUser } from 'App/context';
+import { useCurrentUser, PermissionLevel, PermissionObjectType } from 'App/context';
 import Select from 'shared/components/Select';
 import {
  useGetTeamQuery,
@ -36,7 +35,7 @@ const UserMember = styled(Member)`
  padding: 4px 0;
  cursor: pointer;
  &:hover {
-    background: ${(props) => mixin.rgba(props.theme.colors.bg.primary, 0.4)};
+    background: ${props => mixin.rgba(props.theme.colors.bg.primary, 0.4)};
  }
  border-radius: 6px;
 `;
@ -57,8 +56,8 @@ const UserManagementPopup: React.FC<UserManagementPopupProps> = ({ users, teamMe
      <SearchInput width="100%" variant="alternate" placeholder="Email address or name" name="search" />
      <TeamMemberList>
        {users
-          .filter((u) => u.id !== teamMembers.find((p) => p.id === u.id)?.id)
-          .map((user) => (
+          .filter(u => u.id !== teamMembers.find(p => p.id === u.id)?.id)
+          .map(user => (
            <UserMember
              key={user.id}
              onCardMemberClick={() => onAddTeamMember(user.id)}
@ -116,7 +115,7 @@ export const MiniProfileActionItem = styled.span<{ disabled?: boolean }>`
  position: relative;
  text-decoration: none;

-  ${(props) =>
+  ${props =>
    props.disabled
      ? css`
          user-select: none;
@ -137,7 +136,7 @@ export const Content = styled.div`

 export const CurrentPermission = styled.span`
  margin-left: 4px;
-  color: ${(props) => mixin.rgba(props.theme.colors.text.secondary, 0.4)};
+  color: ${props => mixin.rgba(props.theme.colors.text.secondary, 0.4)};
 `;

 export const Separator = styled.div`
@ -148,13 +147,13 @@ export const Separator = styled.div`

 export const WarningText = styled.span`
  display: flex;
-  color: ${(props) => mixin.rgba(props.theme.colors.text.primary, 0.4)};
+  color: ${props => mixin.rgba(props.theme.colors.text.primary, 0.4)};
  padding: 6px;
 `;

 export const DeleteDescription = styled.div`
  font-size: 14px;
-  color: ${(props) => props.theme.colors.text.primary};
+  color: ${props => props.theme.colors.text.primary};
 `;

 export const RemoveMemberButton = styled(Button)`
@ -221,13 +220,13 @@ const TeamRoleManagerPopup: React.FC<TeamRoleManagerPopupProps> = ({
        <MiniProfileActions>
          <MiniProfileActionWrapper>
            {permissions
-              .filter((p) => (subject.role && subject.role.code === 'owner') || p.code !== 'owner')
-              .map((perm) => (
+              .filter(p => (subject.role && subject.role.code === 'owner') || p.code !== 'owner')
+              .map(perm => (
                <MiniProfileActionItem
                  disabled={subject.role && perm.code !== subject.role.code && !canChangeRole}
                  key={perm.code}
                  onClick={() => {
-                    if (subject.role && perm.code !== subject.role.code) {
+                    if (onChangeRole && subject.role && perm.code !== subject.role.code) {
                      switch (perm.code) {
                        case 'owner':
                          onChangeRole(RoleCode.Owner);
@ -276,8 +275,8 @@ const TeamRoleManagerPopup: React.FC<TeamRoleManagerPopupProps> = ({
              <Select
                label="New projects owner"
                value={orphanedProjectOwner}
-                onChange={(value) => setOrphanedProjectOwner(value)}
-                options={members.filter((m) => m.id !== subject.id).map((m) => ({ label: m.fullName, value: m.id }))}
+                onChange={value => setOrphanedProjectOwner(value)}
+                options={members.filter(m => m.id !== subject.id).map(m => ({ label: m.fullName, value: m.id }))}
              />
            </>
          )}
@ -307,14 +306,14 @@ const MemberItemOption = styled(Button)`
 `;

 const MemberList = styled.div`
-  border-top: 1px solid ${(props) => props.theme.colors.border};
+  border-top: 1px solid ${props => props.theme.colors.border};
 `;

 const MemberListItem = styled.div`
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
-  border-bottom: 1px solid ${(props) => props.theme.colors.border};
+  border-bottom: 1px solid ${props => props.theme.colors.border};
  min-height: 40px;
  padding: 12px 0 12px 40px;
  position: relative;
@ -338,11 +337,11 @@ const MemberProfile = styled(TaskAssignee)`
 `;

 const MemberItemName = styled.p`
-  color: ${(props) => props.theme.colors.text.secondary};
+  color: ${props => props.theme.colors.text.secondary};
 `;

 const MemberItemUsername = styled.p`
-  color: ${(props) => props.theme.colors.text.primary};
+  color: ${props => props.theme.colors.text.primary};
 `;

 const MemberListHeader = styled.div`
@ -351,12 +350,12 @@ const MemberListHeader = styled.div`
 `;
 const ListTitle = styled.h3`
  font-size: 18px;
-  color: ${(props) => props.theme.colors.text.secondary};
+  color: ${props => props.theme.colors.text.secondary};
  margin-bottom: 12px;
 `;
 const ListDesc = styled.span`
  font-size: 16px;
-  color: ${(props) => props.theme.colors.text.primary};
+  color: ${props => props.theme.colors.text.primary};
 `;
 const FilterSearch = styled(Input)`
  margin: 0;
@ -388,11 +387,11 @@ const FilterTabItem = styled.li`
  font-weight: 700;
  text-decoration: none;
  padding: 6px 8px;
-  color: ${(props) => props.theme.colors.text.primary};
+  color: ${props => props.theme.colors.text.primary};
  &:hover {
    border-radius: 6px;
-    background: ${(props) => props.theme.colors.primary};
-    color: ${(props) => props.theme.colors.text.secondary};
+    background: ${props => props.theme.colors.primary};
+    color: ${props => props.theme.colors.text.secondary};
  }
 `;

@ -423,9 +422,9 @@ const Members: React.FC<MembersProps> = ({ teamID }) => {
  const { loading, data } = useGetTeamQuery({
    variables: { teamID },
    fetchPolicy: 'cache-and-network',
-    pollInterval: polling.MEMBERS,
+    pollInterval: 3000,
  });
-  const { user } = useCurrentUser();
+  const { user, setUserRoles } = useCurrentUser();
  const warning =
    'You can’t leave because you are the only admin. To make another user an admin, click their avatar, select “Change permissions…”, and select “Admin”.';
  const [createTeamMember] = useCreateTeamMemberMutation({
@ -433,8 +432,8 @@ const Members: React.FC<MembersProps> = ({ teamID }) => {
      updateApolloCache<GetTeamQuery>(
        client,
        GetTeamDocument,
-        (cache) =>
-          produce(cache, (draftCache) => {
+        cache =>
+          produce(cache, draftCache => {
            if (response.data) {
              draftCache.findTeam.members.push({
                ...response.data.createTeamMember.teamMember,
@ -447,16 +446,26 @@ const Members: React.FC<MembersProps> = ({ teamID }) => {
      );
    },
  });
-  const [updateTeamMemberRole] = useUpdateTeamMemberRoleMutation();
+  const [updateTeamMemberRole] = useUpdateTeamMemberRoleMutation({
+    onCompleted: r => {
+      if (user) {
+        setUserRoles(
+          produce(user.roles, draftRoles => {
+            draftRoles.teams.set(r.updateTeamMemberRole.teamID, r.updateTeamMemberRole.member.role.code);
+          }),
+        );
+      }
+    },
+  });
  const [deleteTeamMember] = useDeleteTeamMemberMutation({
    update: (client, response) => {
      updateApolloCache<GetTeamQuery>(
        client,
        GetTeamDocument,
-        (cache) =>
-          produce(cache, (draftCache) => {
+        cache =>
+          produce(cache, draftCache => {
            draftCache.findTeam.members = cache.findTeam.members.filter(
-              (member) => member.id !== response.data?.deleteTeamMember.userID,
+              member => member.id !== response.data?.deleteTeamMember.userID,
            );
          }),
        { teamID },
@ -482,15 +491,15 @@ const Members: React.FC<MembersProps> = ({ teamID }) => {
            </ListDesc>
            <ListActions>
              <FilterSearch width="250px" variant="alternate" placeholder="Filter by name" />
-              {true && ( // TODO: add permission check
+              {user.isAdmin(PermissionLevel.TEAM, PermissionObjectType.TEAM, data.findTeam.id) && (
                <InviteMemberButton
-                  onClick={($target) => {
+                  onClick={$target => {
                    showPopup(
                      $target,
                      <UserManagementPopup
                        users={data.users}
                        teamMembers={data.findTeam.members}
-                        onAddTeamMember={(userID) => {
+                        onAddTeamMember={userID => {
                          createTeamMember({ variables: { userID, teamID } });
                        }}
                      />,
@ -504,7 +513,7 @@ const Members: React.FC<MembersProps> = ({ teamID }) => {
            </ListActions>
          </MemberListHeader>
          <MemberList>
-            {data.findTeam.members.map((member) => (
+            {data.findTeam.members.map(member => (
              <MemberListItem>
                <MemberProfile showRoleIcons size={32} onMemberProfile={NOOP} member={member} />
                <MemberListItemDetails>
@ -515,23 +524,22 @@ const Members: React.FC<MembersProps> = ({ teamID }) => {
                  <MemberItemOption variant="flat">On 2 projects</MemberItemOption>
                  <MemberItemOption
                    variant="outline"
-                    onClick={($target) => {
+                    onClick={$target => {
                      showPopup(
                        $target,
                        <TeamRoleManagerPopup
-                          currentUserID={user ?? ''}
+                          currentUserID={user.id ?? ''}
                          subject={member}
                          members={data.findTeam.members}
                          warning={member.role && member.role.code === 'owner' ? warning : null}
-                          // canChangeRole={user.isAdmin(PermissionLevel.TEAM, PermissionObjectType.TEAM, teamID)} TODO: add permission check
-                          canChangeRole
-                          onChangeRole={(roleCode) => {
+                          canChangeRole={user.isAdmin(PermissionLevel.TEAM, PermissionObjectType.TEAM, teamID)}
+                          onChangeRole={roleCode => {
                            updateTeamMemberRole({ variables: { userID: member.id, teamID, roleCode } });
                          }}
                          onRemoveFromTeam={
                            member.role && member.role.code === 'owner'
                              ? undefined
-                              : (newOwnerID) => {
+                              : newOwnerID => {
                                  deleteTeamMember({ variables: { teamID, newOwnerID, userID: member.id } });
                                  hidePopup();
                                }
--- a/frontend/src/Teams/Projects/index.tsx
+++ b/frontend/src/Teams/Projects/index.tsx
@ -9,7 +9,6 @@ import {
 import { Link } from 'react-router-dom';
 import Input from 'shared/components/Input';
 import theme from 'App/ThemeStyles';
-import polling from 'shared/utils/polling';

 const FilterSearch = styled(Input)`
  margin: 0;
@ -159,7 +158,7 @@ const TeamProjects: React.FC<TeamProjectsProps> = ({ teamID }) => {
  const { loading, data } = useGetTeamQuery({
    variables: { teamID },
    fetchPolicy: 'cache-and-network',
-    pollInterval: polling.TEAM_PROJECTS,
+    pollInterval: 3000,
  });
  if (data) {
    return (
--- a/frontend/src/Teams/index.tsx
+++ b/frontend/src/Teams/index.tsx
@ -13,7 +13,7 @@ import { usePopup, Popup } from 'shared/components/PopupMenu';
 import { History } from 'history';
 import produce from 'immer';
 import { TeamSettings, DeleteConfirm, DELETE_INFO } from 'shared/components/ProjectSettings';
-import { useCurrentUser } from 'App/context';
+import { PermissionObjectType, PermissionLevel, useCurrentUser } from 'App/context';
 import NOOP from 'shared/utils/noop';
 import Members from './Members';
 import Projects from './Projects';
@ -95,12 +95,9 @@ const Teams = () => {
  const [currentTab, setCurrentTab] = useState(0);
  const match = useRouteMatch();
  if (data && user) {
-    /*
-TODO: re-add permission check
    if (!user.isVisible(PermissionLevel.TEAM, PermissionObjectType.TEAM, teamID)) {
      return <Redirect to="/" />;
    }
-     */
    return (
      <>
        <GlobalTopNavbar
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@ -1,35 +1,24 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { ApolloClient } from '@apollo/client';
-import { ApolloProvider } from '@apollo/client/react';
-
+import axios from 'axios';
+import createAuthRefreshInterceptor from 'axios-auth-refresh';
+import { ApolloProvider } from '@apollo/react-hooks';
+import { ApolloClient } from 'apollo-client';
+import { HttpLink } from 'apollo-link-http';
+import { onError } from 'apollo-link-error';
 import { enableMapSet } from 'immer';
+import { ApolloLink, Observable, fromPromise } from 'apollo-link';
 import dayjs from 'dayjs';
 import updateLocale from 'dayjs/plugin/updateLocale';
 import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
 import isBetween from 'dayjs/plugin/isBetween';
 import weekday from 'dayjs/plugin/weekday';
-import duration from 'dayjs/plugin/duration';
-import relativeTime from 'dayjs/plugin/relativeTime';
-import log from 'loglevel';
-import remote from 'loglevel-plugin-remote';
+import { getAccessToken, getNewToken, setAccessToken } from 'shared/utils/accessToken';
 import cache from './App/cache';
 import App from './App';

-if (process.env.REACT_APP_NODE_ENV === 'production') {
-  remote.apply(log, { format: remote.json });
-  switch (process.env.REACT_APP_LOG_LEVEL) {
-    case 'info':
-      log.setLevel(log.levels.INFO);
-      break;
-    case 'debug':
-      log.setLevel(log.levels.DEBUG);
-      break;
-    default:
-      log.setLevel(log.levels.ERROR);
-  }
-}
+// https://able.bio/AnasT/apollo-graphql-async-access-token-refresh--470t1c8

 enableMapSet();

@ -38,8 +27,6 @@ dayjs.extend(weekday);
 dayjs.extend(isBetween);
 dayjs.extend(customParseFormat);
 dayjs.extend(updateLocale);
-dayjs.extend(duration);
-dayjs.extend(relativeTime);
 dayjs.updateLocale('en', {
  week: {
    dow: 1, // First day of week is Monday
@ -47,7 +34,131 @@ dayjs.updateLocale('en', {
  },
 });

-const client = new ApolloClient({ uri: '/graphql', cache });
+let forward$;
+let isRefreshing = false;
+let pendingRequests: any = [];
+
+const refreshAuthLogic = (failedRequest: any) =>
+  axios.post('/auth/refresh_token', {}, { withCredentials: true }).then(tokenRefreshResponse => {
+    setAccessToken(tokenRefreshResponse.data.accessToken);
+    failedRequest.response.config.headers.Authorization = `Bearer ${tokenRefreshResponse.data.accessToken}`;
+    return Promise.resolve();
+  });
+
+createAuthRefreshInterceptor(axios, refreshAuthLogic);
+
+const resolvePendingRequests = () => {
+  pendingRequests.map((callback: any) => callback());
+  pendingRequests = [];
+};
+
+const resolvePromise = (resolve: () => void) => {
+  pendingRequests.push(() => resolve());
+};
+
+const resetPendingRequests = () => {
+  pendingRequests = [];
+};
+
+const setRefreshing = (newVal: boolean) => {
+  isRefreshing = newVal;
+};
+
+const errorLink = onError(({ graphQLErrors, networkError, operation, forward }) => {
+  if (graphQLErrors) {
+    for (const err of graphQLErrors) {
+      if (err.extensions && err.extensions.code) {
+        switch (err.extensions.code) {
+          case 'UNAUTHENTICATED':
+            if (!isRefreshing) {
+              setRefreshing(true);
+              forward$ = fromPromise(
+                getNewToken()
+                  .then((response: any) => {
+                    setAccessToken(response.accessToken);
+                    resolvePendingRequests();
+                    return response.accessToken;
+                  })
+                  .catch(() => {
+                    resetPendingRequests();
+                    // TODO
+                    // Handle token refresh errors e.g clear stored tokens, redirect to login, ...
+                    return undefined;
+                  })
+                  .finally(() => {
+                    setRefreshing(false);
+                  }),
+              ).filter(value => Boolean(value));
+            } else {
+              forward$ = fromPromise(new Promise(resolvePromise));
+            }
+            return forward$.flatMap(() => forward(operation));
+          default:
+          // pass
+        }
+      }
+    }
+  }
+  if (networkError) {
+    console.log(`[Network error]: ${networkError}`); // eslint-disable-line no-console
+  }
+  return undefined;
+});
+
+const requestLink = new ApolloLink(
+  (operation, forward) =>
+    new Observable((observer: any) => {
+      let handle: any;
+      Promise.resolve(operation)
+        .then((op: any) => {
+          const accessToken = getAccessToken();
+          if (accessToken) {
+            op.setContext({
+              headers: {
+                Authorization: `Bearer ${accessToken}`,
+              },
+            });
+          }
+        })
+        .then(() => {
+          handle = forward(operation).subscribe({
+            next: observer.next.bind(observer),
+            error: observer.error.bind(observer),
+            complete: observer.complete.bind(observer),
+          });
+        })
+        .catch(observer.error.bind(observer));
+
+      return () => {
+        if (handle) {
+          handle.unsubscribe();
+        }
+      };
+    }),
+);
+
+const client = new ApolloClient({
+  link: ApolloLink.from([
+    onError(({ graphQLErrors, networkError }) => {
+      if (graphQLErrors) {
+        graphQLErrors.forEach(
+          ({ message, locations, path }) =>
+            console.log(`[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`), // eslint-disable-line no-console
+        );
+      }
+      if (networkError) {
+        console.log(`[Network error]: ${networkError}`); // eslint-disable-line no-console
+      }
+    }),
+    errorLink,
+    requestLink,
+    new HttpLink({
+      uri: '/graphql',
+      credentials: 'same-origin',
+    }),
+  ]),
+  cache,
+});

 ReactDOM.render(
  <ApolloProvider client={client}>
--- a/frontend/src/shared/components/AddList/Styles.ts
+++ b/frontend/src/shared/components/AddList/Styles.ts
@ -1,5 +1,5 @@
 import styled, { css } from 'styled-components';
-import TextareaAutosize from 'react-autosize-textarea';
+import TextareaAutosize from 'react-autosize-textarea/lib';
 import { mixin } from 'shared/utils/styles';
 import Button from 'shared/components/Button';

--- a/frontend/src/shared/components/AddList/index.tsx
+++ b/frontend/src/shared/components/AddList/index.tsx
@ -49,7 +49,6 @@ export const NameEditor: React.FC<NameEditorProps> = ({ onSave: handleSave, onCa
      <ListNameEditorWrapper>
        <ListNameEditor
          ref={$editorRef}
-          height={40}
          onKeyDown={onKeyDown}
          value={listName}
          onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setListName(e.currentTarget.value)}
--- a/frontend/src/shared/components/Admin/index.tsx
+++ b/frontend/src/shared/components/Admin/index.tsx
@ -10,215 +10,6 @@ import Button from 'shared/components/Button';
 import NOOP from 'shared/utils/noop';
 import { mixin } from 'shared/utils/styles';

-const UserSelect = styled(Select)`
-  margin: 8px 0;
-  padding: 8px 0;
-`;
-
-const NewUserPassInput = styled(Input)`
-  margin: 8px 0;
-`;
-
-const InviteMemberButton = styled(Button)`
-  padding: 7px 12px;
-`;
-
-const UserPassBar = styled.div`
-  display: flex;
-  padding-top: 8px;
-`;
-
-const UserPassConfirmButton = styled(Button)`
-  width: 100%;
-  padding: 7px 12px;
-`;
-
-const UserPassButton = styled(Button)`
-  width: 50%;
-  padding: 7px 12px;
-  & ~ & {
-    margin-left: 6px;
-  }
-`;
-
-const MemberItemOptions = styled.div``;
-
-const MemberItemOption = styled(Button)`
-  padding: 7px 9px;
-  margin: 4px 0 4px 8px;
-  float: left;
-  min-width: 95px;
-`;
-
-const MemberList = styled.div`
-  border-top: 1px solid ${(props) => props.theme.colors.border};
-`;
-
-const MemberListItem = styled.div`
-  display: flex;
-  flex-flow: row wrap;
-  justify-content: space-between;
-  border-bottom: 1px solid ${(props) => props.theme.colors.border};
-  min-height: 40px;
-  padding: 12px 0 12px 40px;
-  position: relative;
-`;
-
-const MemberListItemDetails = styled.div`
-  float: left;
-  flex: 1 0 auto;
-  padding-left: 8px;
-`;
-
-const InviteIcon = styled(UserPlus)`
-  padding-right: 4px;
-`;
-
-const MemberProfile = styled(TaskAssignee)`
-  position: absolute;
-  top: 16px;
-  left: 0;
-  margin: 0;
-`;
-
-const MemberItemName = styled.p`
-  color: ${(props) => props.theme.colors.text.secondary};
-`;
-
-const MemberItemUsername = styled.p`
-  color: ${(props) => props.theme.colors.text.primary};
-`;
-
-const MemberListHeader = styled.div`
-  display: flex;
-  flex-direction: column;
-`;
-const ListTitle = styled.h3`
-  font-size: 18px;
-  color: ${(props) => props.theme.colors.text.secondary};
-  margin-bottom: 12px;
-`;
-const ListDesc = styled.span`
-  font-size: 16px;
-  color: ${(props) => props.theme.colors.text.primary};
-`;
-const FilterSearch = styled(Input)`
-  margin: 0;
-`;
-
-const ListActions = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-top: 8px;
-  margin-bottom: 18px;
-`;
-
-const MemberListWrapper = styled.div`
-  flex: 1 1;
-`;
-
-const Container = styled.div`
-  padding: 2.2rem;
-  display: flex;
-  width: 100%;
-  max-width: 1400px;
-  position: relative;
-  margin: 0 auto;
-`;
-
-const TabNav = styled.div`
-  float: left;
-  width: 220px;
-  height: 100%;
-  display: block;
-  position: relative;
-`;
-
-const TabNavContent = styled.ul`
-  display: block;
-  width: auto;
-  border-bottom: 0 !important;
-  border-right: 1px solid rgba(0, 0, 0, 0.05);
-`;
-
-const TabNavItem = styled.li`
-  padding: 0.35rem 0.3rem;
-  height: 48px;
-  display: block;
-  position: relative;
-`;
-
-const TabNavItemButton = styled.button<{ active: boolean }>`
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-
-  padding-top: 10px !important;
-  padding-bottom: 10px !important;
-  padding-left: 12px !important;
-  padding-right: 8px !important;
-  width: 100%;
-  position: relative;
-
-  color: ${(props) => (props.active ? `${props.theme.colors.secondary}` : props.theme.colors.text.primary)};
-  &:hover {
-    color: ${(props) => `${props.theme.colors.primary}`};
-  }
-  &:hover svg {
-    fill: ${(props) => props.theme.colors.primary};
-  }
-`;
-const TabItemUser = styled(User)<{ active: boolean }>`
-fill: ${(props) => (props.active ? `${props.theme.colors.primary}` : props.theme.colors.text.primary)}
-stroke: ${(props) => (props.active ? `${props.theme.colors.primary}` : props.theme.colors.text.primary)}
-`;
-
-const TabNavItemSpan = styled.span`
-  text-align: left;
-  padding-left: 9px;
-  font-size: 14px;
-`;
-
-const TabNavLine = styled.span<{ top: number }>`
-  left: auto;
-  right: 0;
-  width: 2px;
-  height: 48px;
-  transform: scaleX(1);
-  top: ${(props) => props.top}px;
-
-  background: linear-gradient(
-    30deg,
-    ${(props) => props.theme.colors.primary},
-    ${(props) => props.theme.colors.primary}
-  );
-  box-shadow: 0 0 8px 0 ${(props) => props.theme.colors.primary};
-  display: block;
-  position: absolute;
-  transition: all 0.2s ease;
-`;
-
-const TabContentWrapper = styled.div`
-  position: relative;
-  display: block;
-  overflow: hidden;
-  width: 100%;
-  margin-left: 1rem;
-`;
-
-const TabContent = styled.div`
-  position: relative;
-  width: 100%;
-  display: block;
-  padding: 0;
-  padding: 1.5rem;
-  background-color: #10163a;
-  border-radius: 0.5rem;
-`;
-
-const items = [{ name: 'Members' }];
-
 export const RoleCheckmark = styled(Checkmark)`
  padding-left: 4px;
 `;
@ -263,7 +54,7 @@ export const MiniProfileActionItem = styled.span<{ disabled?: boolean }>`
  position: relative;
  text-decoration: none;

-  ${(props) =>
+  ${props =>
    props.disabled
      ? css`
          user-select: none;
@ -284,7 +75,7 @@ export const Content = styled.div`

 export const CurrentPermission = styled.span`
  margin-left: 4px;
-  color: ${(props) => mixin.rgba(props.theme.colors.text.secondary, 0.4)};
+  color: ${props => mixin.rgba(props.theme.colors.text.secondary, 0.4)};
 `;

 export const Separator = styled.div`
@ -295,13 +86,13 @@ export const Separator = styled.div`

 export const WarningText = styled.span`
  display: flex;
-  color: ${(props) => mixin.rgba(props.theme.colors.text.primary, 0.4)};
+  color: ${props => mixin.rgba(props.theme.colors.text.primary, 0.4)};
  padding: 6px;
 `;

 export const DeleteDescription = styled.div`
  font-size: 14px;
-  color: ${(props) => props.theme.colors.text.primary};
+  color: ${props => props.theme.colors.text.primary};
 `;

 export const RemoveMemberButton = styled(Button)`
@ -370,8 +161,8 @@ const TeamRoleManagerPopup: React.FC<TeamRoleManagerPopupProps> = ({
        <MiniProfileActions>
          <MiniProfileActionWrapper>
            {permissions
-              .filter((p) => (user.role && user.role.code === 'owner') || p.code !== 'owner')
-              .map((perm) => (
+              .filter(p => (user.role && user.role.code === 'owner') || p.code !== 'owner')
+              .map(perm => (
                <MiniProfileActionItem
                  disabled={user.role && perm.code !== user.role.code && !canChangeRole}
                  key={perm.code}
@ -422,9 +213,9 @@ const TeamRoleManagerPopup: React.FC<TeamRoleManagerPopupProps> = ({
                Choose a new user to take over ownership of the users teams & projects.
              </DeleteDescription>
              <UserSelect
-                onChange={(v) => setDeleteUser(v)}
+                onChange={v => setDeleteUser(v)}
                value={deleteUser}
-                options={users.map((u) => ({ label: u.fullName, value: u.id }))}
+                options={users.map(u => ({ label: u.fullName, value: u.id }))}
              />
            </>
          )}
@ -449,7 +240,7 @@ const TeamRoleManagerPopup: React.FC<TeamRoleManagerPopupProps> = ({
            Removing this user from the organzation will remove them from assigned tasks, projects, and teams.
          </DeleteDescription>
          <DeleteDescription>{`The user is the owner of ${user.owned.projects.length} projects & ${user.owned.teams.length} teams.`}</DeleteDescription>
-          <UserSelect onChange={NOOP} value={null} options={users.map((u) => ({ label: u.fullName, value: u.id }))} />
+          <UserSelect onChange={NOOP} value={null} options={users.map(u => ({ label: u.fullName, value: u.id }))} />
          <UserPassConfirmButton
            onClick={() => {
              // onDeleteUser();
@ -502,6 +293,211 @@ const TeamRoleManagerPopup: React.FC<TeamRoleManagerPopupProps> = ({
  );
 };

+const UserSelect = styled(Select)`
+  margin: 8px 0;
+  padding: 8px 0;
+`;
+
+const NewUserPassInput = styled(Input)`
+  margin: 8px 0;
+`;
+
+const InviteMemberButton = styled(Button)`
+  padding: 7px 12px;
+`;
+
+const UserPassBar = styled.div`
+  display: flex;
+  padding-top: 8px;
+`;
+
+const UserPassConfirmButton = styled(Button)`
+  width: 100%;
+  padding: 7px 12px;
+`;
+
+const UserPassButton = styled(Button)`
+  width: 50%;
+  padding: 7px 12px;
+  & ~ & {
+    margin-left: 6px;
+  }
+`;
+
+const MemberItemOptions = styled.div``;
+
+const MemberItemOption = styled(Button)`
+  padding: 7px 9px;
+  margin: 4px 0 4px 8px;
+  float: left;
+  min-width: 95px;
+`;
+
+const MemberList = styled.div`
+  border-top: 1px solid ${props => props.theme.colors.border};
+`;
+
+const MemberListItem = styled.div`
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-between;
+  border-bottom: 1px solid ${props => props.theme.colors.border};
+  min-height: 40px;
+  padding: 12px 0 12px 40px;
+  position: relative;
+`;
+
+const MemberListItemDetails = styled.div`
+  float: left;
+  flex: 1 0 auto;
+  padding-left: 8px;
+`;
+
+const InviteIcon = styled(UserPlus)`
+  padding-right: 4px;
+`;
+
+const MemberProfile = styled(TaskAssignee)`
+  position: absolute;
+  top: 16px;
+  left: 0;
+  margin: 0;
+`;
+
+const MemberItemName = styled.p`
+  color: ${props => props.theme.colors.text.secondary};
+`;
+
+const MemberItemUsername = styled.p`
+  color: ${props => props.theme.colors.text.primary};
+`;
+
+const MemberListHeader = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+const ListTitle = styled.h3`
+  font-size: 18px;
+  color: ${props => props.theme.colors.text.secondary};
+  margin-bottom: 12px;
+`;
+const ListDesc = styled.span`
+  font-size: 16px;
+  color: ${props => props.theme.colors.text.primary};
+`;
+const FilterSearch = styled(Input)`
+  margin: 0;
+`;
+
+const ListActions = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 8px;
+  margin-bottom: 18px;
+`;
+
+const MemberListWrapper = styled.div`
+  flex: 1 1;
+`;
+
+const Container = styled.div`
+  padding: 2.2rem;
+  display: flex;
+  width: 100%;
+  max-width: 1400px;
+  position: relative;
+  margin: 0 auto;
+`;
+
+const TabNav = styled.div`
+  float: left;
+  width: 220px;
+  height: 100%;
+  display: block;
+  position: relative;
+`;
+
+const TabNavContent = styled.ul`
+  display: block;
+  width: auto;
+  border-bottom: 0 !important;
+  border-right: 1px solid rgba(0, 0, 0, 0.05);
+`;
+
+const TabNavItem = styled.li`
+  padding: 0.35rem 0.3rem;
+  height: 48px;
+  display: block;
+  position: relative;
+`;
+
+const TabNavItemButton = styled.button<{ active: boolean }>`
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+
+  padding-top: 10px !important;
+  padding-bottom: 10px !important;
+  padding-left: 12px !important;
+  padding-right: 8px !important;
+  width: 100%;
+  position: relative;
+
+  color: ${props => (props.active ? `${props.theme.colors.secondary}` : props.theme.colors.text.primary)};
+  &:hover {
+    color: ${props => `${props.theme.colors.primary}`};
+  }
+  &:hover svg {
+    fill: ${props => props.theme.colors.primary};
+  }
+`;
+const TabItemUser = styled(User)<{ active: boolean }>`
+fill: ${props => (props.active ? `${props.theme.colors.primary}` : props.theme.colors.text.primary)}
+stroke: ${props => (props.active ? `${props.theme.colors.primary}` : props.theme.colors.text.primary)}
+`;
+
+const TabNavItemSpan = styled.span`
+  text-align: left;
+  padding-left: 9px;
+  font-size: 14px;
+`;
+
+const TabNavLine = styled.span<{ top: number }>`
+  left: auto;
+  right: 0;
+  width: 2px;
+  height: 48px;
+  transform: scaleX(1);
+  top: ${props => props.top}px;
+
+  background: linear-gradient(30deg, ${props => props.theme.colors.primary}, ${props => props.theme.colors.primary});
+  box-shadow: 0 0 8px 0 ${props => props.theme.colors.primary};
+  display: block;
+  position: absolute;
+  transition: all 0.2s ease;
+`;
+
+const TabContentWrapper = styled.div`
+  position: relative;
+  display: block;
+  overflow: hidden;
+  width: 100%;
+  margin-left: 1rem;
+`;
+
+const TabContent = styled.div`
+  position: relative;
+  width: 100%;
+  display: block;
+  padding: 0;
+  padding: 1.5rem;
+  background-color: #10163a;
+  border-radius: 0.5rem;
+`;
+
+const items = [{ name: 'Members' }];
+
 type NavItemProps = {
  active: boolean;
  name: string;
@ -595,7 +591,7 @@ const Admin: React.FC<AdminProps> = ({
                <FilterSearch width="250px" variant="alternate" placeholder="Filter by name" />
                {canInviteUser && (
                  <InviteMemberButton
-                    onClick={($target) => {
+                    onClick={$target => {
                      onAddUser($target);
                    }}
                  >
@ -606,7 +602,7 @@ const Admin: React.FC<AdminProps> = ({
              </ListActions>
            </MemberListHeader>
            <MemberList>
-              {users.map((member) => {
+              {users.map(member => {
                const projectTotal = member.owned.projects.length + member.member.projects.length;
                return (
                  <MemberListItem>
@ -619,7 +615,7 @@ const Admin: React.FC<AdminProps> = ({
                      <MemberItemOption variant="flat">{`On ${projectTotal} projects`}</MemberItemOption>
                      <MemberItemOption
                        variant="outline"
-                        onClick={($target) => {
+                        onClick={$target => {
                          showPopup(
                            $target,
                            <TeamRoleManagerPopup
@ -630,7 +626,7 @@ const Admin: React.FC<AdminProps> = ({
                                onUpdateUserPassword(user, password);
                              }}
                              canChangeRole={(member.role && member.role.code !== 'owner') ?? false}
-                              onChangeRole={(roleCode) => {
+                              onChangeRole={roleCode => {
                                updateUserRole({ variables: { userID: member.id, roleCode } });
                              }}
                              onDeleteUser={onDeleteUser}
@ -644,7 +640,7 @@ const Admin: React.FC<AdminProps> = ({
                  </MemberListItem>
                );
              })}
-              {invitedUsers.map((member) => {
+              {invitedUsers.map(member => {
                return (
                  <MemberListItem>
                    <MemberProfile
@ -668,7 +664,7 @@ const Admin: React.FC<AdminProps> = ({
                    <MemberItemOptions>
                      <MemberItemOption
                        variant="outline"
-                        onClick={($target) => {
+                        onClick={$target => {
                          showPopup(
                            $target,
                            <TeamRoleManagerPopup
--- a/frontend/src/shared/components/Button/index.tsx
+++ b/frontend/src/shared/components/Button/index.tsx
@ -6,11 +6,11 @@ const Text = styled.span<{ fontSize: string; justifyTextContent: string; hasIcon
  position: relative;
  display: flex;
  align-items: center;
-  justify-content: ${(props) => props.justifyTextContent};
+  justify-content: ${props => props.justifyTextContent};
  transition: all 0.2s ease;
-  font-size: ${(props) => props.fontSize};
-  color: ${(props) => props.theme.colors.text.secondary};
-  ${(props) =>
+  font-size: ${props => props.fontSize};
+  color: ${props => props.theme.colors.text.secondary};
+  ${props =>
    props.hasIcon &&
    css`
      padding-left: 4px;
@ -23,11 +23,11 @@ const Base = styled.button<{ color: string; disabled: boolean }>`
  border: none;
  cursor: pointer;
  padding: 0.75rem 2rem;
-  border-radius: ${(props) => props.theme.borderRadius.alternate};
+  border-radius: ${props => props.theme.borderRadius.alternate};
  display: flex;
  align-items: center;

-  ${(props) =>
+  ${props =>
    props.disabled &&
    css`
      opacity: 0.5;
@ -37,8 +37,8 @@ const Base = styled.button<{ color: string; disabled: boolean }>`
 `;

 const Filled = styled(Base)<{ hoverVariant: HoverVariant }>`
-  background: ${(props) => props.theme.colors[props.color]};
-  ${(props) =>
+  background: ${props => props.theme.colors[props.color]};
+  ${props =>
    props.hoverVariant === 'boxShadow' &&
    css`
      &:hover {
@ -48,9 +48,9 @@ const Filled = styled(Base)<{ hoverVariant: HoverVariant }>`
 `;

 const Outline = styled(Base)<{ invert: boolean }>`
-  border: 1px solid ${(props) => props.theme.colors[props.color]};
+  border: 1px solid ${props => props.theme.colors[props.color]};
  background: transparent;
-  ${(props) =>
+  ${props =>
    props.invert
      ? css`
          background: ${props.theme.colors[props.color]});
@ -74,7 +74,7 @@ const Outline = styled(Base)<{ invert: boolean }>`
 const Flat = styled(Base)`
  background: transparent;
  &:hover {
-    background: ${(props) => mixin.rgba(props.theme.colors[props.color], 0.2)};
+    background: ${props => mixin.rgba(props.theme.colors[props.color], 0.2)};
  }
 `;

@ -87,7 +87,7 @@ const LineX = styled.span<{ color: string }>`
  bottom: -2px;
  left: 50%;
  transform: translate(-50%);
-  background: ${(props) => mixin.rgba(props.theme.colors[props.color], 1)};
+  background: ${props => mixin.rgba(props.theme.colors[props.color], 1)};
 `;

 const LineDown = styled(Base)`
@ -96,7 +96,7 @@ const LineDown = styled(Base)`
  border-width: 0;
  border-style: solid;
  border-bottom-width: 2px;
-  border-color: ${(props) => mixin.rgba(props.theme.colors[props.color], 0.2)};
+  border-color: ${props => mixin.rgba(props.theme.colors[props.color], 0.2)};

  &:hover ${LineX} {
    width: 100%;
@ -109,14 +109,17 @@ const LineDown = styled(Base)`
 const Gradient = styled(Base)`
  background: linear-gradient(
    30deg,
-    ${(props) => mixin.rgba(props.theme.colors[props.color], 1)},
-    ${(props) => mixin.rgba(props.theme.colors[props.color], 0.5)}
+    ${props => mixin.rgba(props.theme.colors[props.color], 1)},
+    ${props => mixin.rgba(props.theme.colors[props.color], 0.5)}
  );
  text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3);
+  &:hover {
+    transform: translateY(-2px);
+  }
 `;

 const Relief = styled(Base)`
-  background: ${(props) => mixin.rgba(props.theme.colors[props.color], 1)};
+  background: ${props => mixin.rgba(props.theme.colors[props.color], 1)};
  -webkit-box-shadow: 0 -3px 0 0 rgba(0, 0, 0, 0.2) inset;
  box-shadow: inset 0 -3px 0 0 rgba(0, 0, 0, 0.2);

--- a/frontend/src/shared/components/Card/Styles.ts
+++ b/frontend/src/shared/components/Card/Styles.ts
@ -1,43 +1,32 @@
 import styled, { css, keyframes } from 'styled-components';
 import { mixin } from 'shared/utils/styles';
 import TextareaAutosize from 'react-autosize-textarea';
-import { CheckCircle, CheckSquareOutline, Clock, Bubble } from 'shared/icons';
+import { CheckCircle, CheckSquareOutline, Clock } from 'shared/icons';
 import TaskAssignee from 'shared/components/TaskAssignee';

 export const CardMember = styled(TaskAssignee)<{ zIndex: number }>`
-  box-shadow: 0 0 0 2px ${(props) => props.theme.colors.bg.secondary},
-    inset 0 0 0 1px ${(props) => mixin.rgba(props.theme.colors.bg.secondary, 0.07)};
-  z-index: ${(props) => props.zIndex};
+  box-shadow: 0 0 0 2px ${props => props.theme.colors.bg.secondary},
+    inset 0 0 0 1px ${props => mixin.rgba(props.theme.colors.bg.secondary, 0.07)};
+  z-index: ${props => props.zIndex};
  position: relative;
 `;
-
-export const CommentsIcon = styled(Bubble)<{ color: 'success' | 'normal' }>`
-  ${(props) =>
-    props.color === 'success' &&
-    css`
-      fill: ${props.theme.colors.success};
-      stroke: ${props.theme.colors.success};
-    `}
-`;
-
 export const ChecklistIcon = styled(CheckSquareOutline)<{ color: 'success' | 'normal' }>`
-  ${(props) =>
+  ${props =>
    props.color === 'success' &&
    css`
      fill: ${props.theme.colors.success};
      stroke: ${props.theme.colors.success};
    `}
 `;
-
 export const ClockIcon = styled(Clock)<{ color: string }>`
-  fill: ${(props) => props.color};
+  fill: ${props => props.color};
 `;

 export const EditorTextarea = styled(TextareaAutosize)`
  overflow: hidden;
  overflow-wrap: break-word;
  resize: none;
-  height: 54px;
+  height: 90px;
  width: 100%;

  background: none;
@ -49,7 +38,7 @@ export const EditorTextarea = styled(TextareaAutosize)`
  padding: 0;
  font-size: 14px;
  line-height: 18px;
-  color: ${(props) => props.theme.colors.text.primary};
+  color: ${props => props.theme.colors.text.primary};
  &:focus {
    border: none;
    outline: none;
@ -63,22 +52,6 @@ export const ListCardBadges = styled.div`
  margin-left: -2px;
 `;

-export const CommentsBadge = styled.div`
-  color: #5e6c84;
-  display: flex;
-  align-items: center;
-  margin: 0 6px 4px 0;
-  font-size: 12px;
-  max-width: 100%;
-  min-height: 20px;
-  overflow: hidden;
-  position: relative;
-  padding: 2px;
-  text-decoration: none;
-  text-overflow: ellipsis;
-  vertical-align: top;
-`;
-
 export const ListCardBadge = styled.div`
  color: #5e6c84;
  display: flex;
@ -101,7 +74,7 @@ export const DescriptionBadge = styled(ListCardBadge)`

 export const DueDateCardBadge = styled(ListCardBadge)<{ isPastDue: boolean }>`
  font-size: 12px;
-  ${(props) =>
+  ${props =>
    props.isPastDue &&
    css`
      padding-left: 4px;
@ -116,7 +89,7 @@ export const ListCardBadgeText = styled.span<{ color?: 'success' | 'normal' }>`
  padding: 0 4px 0 6px;
  vertical-align: top;
  white-space: nowrap;
-  ${(props) => props.color === 'success' && `color: ${props.theme.colors.success};`}
+  ${props => props.color === 'success' && `color: ${props.theme.colors.success};`}
 `;

 export const ListCardContainer = styled.div<{ isActive: boolean; editable: boolean }>`
@ -127,7 +100,7 @@ export const ListCardContainer = styled.div<{ isActive: boolean; editable: boole
  cursor: pointer !important;
  position: relative;

-  background-color: ${(props) =>
+  background-color: ${props =>
    props.isActive && !props.editable
      ? mixin.darken(props.theme.colors.bg.secondary, 0.1)
      : `${props.theme.colors.bg.secondary}`};
@ -144,7 +117,7 @@ export const ListCardDetails = styled.div<{ complete: boolean }>`
  position: relative;
  z-index: 10;

-  ${(props) => props.complete && 'opacity: 0.6;'}
+  ${props => props.complete && 'opacity: 0.6;'}
 `;

 const labelVariantExpandAnimation = keyframes`
@ -182,7 +155,7 @@ export const ListCardLabelsWrapper = styled.div`
 `;

 export const ListCardLabel = styled.span<{ variant: 'small' | 'large' }>`
-  ${(props) =>
+  ${props =>
    props.variant === 'small'
      ? css`
          height: 8px;
@ -208,14 +181,14 @@ export const ListCardLabel = styled.span<{ variant: 'small' | 'large' }>`
  color: #fff;
  display: flex;
  position: relative;
-  background-color: ${(props) => props.color};
+  background-color: ${props => props.color};
 `;

 export const ListCardLabels = styled.div<{ toggleLabels: boolean; toggleDirection: 'expand' | 'shrink' }>`
  &:hover {
    opacity: 0.8;
  }
-  ${(props) =>
+  ${props =>
    props.toggleLabels &&
    props.toggleDirection === 'expand' &&
    css`
@ -226,7 +199,7 @@ export const ListCardLabels = styled.div<{ toggleLabels: boolean; toggleDirectio
        animation: ${labelTextVariantExpandAnimation} 0.45s ease-out;
      }
    `}
-  ${(props) =>
+  ${props =>
    props.toggleLabels &&
    props.toggleDirection === 'shrink' &&
    css`
@ -250,7 +223,7 @@ export const ListCardOperation = styled.span`
  top: 2px;
  z-index: 100;
  &:hover {
-    background-color: ${(props) => mixin.darken(props.theme.colors.bg.secondary, 0.25)};
+    background-color: ${props => mixin.darken(props.theme.colors.bg.secondary, 0.25)};
  }
 `;

@ -259,7 +232,7 @@ export const CardTitle = styled.div`
  margin: 0 0 4px;
  overflow: hidden;
  text-decoration: none;
-  color: ${(props) => props.theme.colors.text.primary};
+  color: ${props => props.theme.colors.text.primary};
  display: block;
  align-items: center;
 `;
@ -276,7 +249,7 @@ export const CardMembers = styled.div`
 `;

 export const CompleteIcon = styled(CheckCircle)`
-  fill: ${(props) => props.theme.colors.success};
+  fill: ${props => props.theme.colors.success};
  margin-right: 4px;
  flex-shrink: 0;
  margin-bottom: -2px;
--- a/frontend/src/shared/components/Card/index.tsx
+++ b/frontend/src/shared/components/Card/index.tsx
@ -23,8 +23,6 @@ import {
  CardTitle,
  CardMembers,
  CardTitleText,
-  CommentsIcon,
-  CommentsBadge,
 } from './Styles';

 type DueDate = {
@ -49,7 +47,6 @@ type Props = {
  dueDate?: DueDate;
  checklists?: Checklist | null;
  labels?: Array<ProjectLabel>;
-  comments?: { unread: boolean; total: number } | null;
  watched?: boolean;
  wrapperProps?: any;
  members?: Array<TaskUser> | null;
@ -61,21 +58,18 @@ type Props = {
  onCardTitleChange?: (name: string) => void;
  labelVariant?: CardLabelVariant;
  toggleLabels?: boolean;
-  isPublic?: boolean;
  toggleDirection?: 'shrink' | 'expand';
 };

 const Card = React.forwardRef(
  (
    {
-      isPublic = false,
      wrapperProps,
      onContextMenu,
      taskID,
      taskGroupID,
      complete,
      toggleLabels = false,
-      comments,
      toggleDirection = 'shrink',
      setToggleLabels,
      onClick,
@ -126,11 +120,9 @@ const Card = React.forwardRef(
      }
    };
    const onTaskContext = (e: React.MouseEvent) => {
-      if (!isPublic) {
-        e.preventDefault();
-        e.stopPropagation();
-        onOpenComposer();
-      }
+      e.preventDefault();
+      e.stopPropagation();
+      onOpenComposer();
    };
    const onOperationClick = (e: React.MouseEvent<HTMLOrSVGElement>) => {
      e.preventDefault();
@ -142,7 +134,7 @@ const Card = React.forwardRef(
        onMouseEnter={() => setActive(true)}
        onMouseLeave={() => setActive(false)}
        ref={$cardRef}
-        onClick={(e) => {
+        onClick={e => {
          if (onClick) {
            onClick(e);
          }
@ -153,9 +145,9 @@ const Card = React.forwardRef(
        {...wrapperProps}
      >
        <ListCardInnerContainer ref={$innerCardRef}>
-          {!isPublic && isActive && !editable && (
+          {isActive && !editable && (
            <ListCardOperation
-              onClick={(e) => {
+              onClick={e => {
                e.stopPropagation();
                if (onContextMenu) {
                  onContextMenu($innerCardRef, taskID, taskGroupID);
@ -171,7 +163,7 @@ const Card = React.forwardRef(
                <ListCardLabels
                  toggleLabels={toggleLabels}
                  toggleDirection={toggleDirection}
-                  onClick={(e) => {
+                  onClick={e => {
                    e.stopPropagation();
                    if (onCardLabelClick) {
                      onCardLabelClick();
@ -181,7 +173,7 @@ const Card = React.forwardRef(
                  {labels
                    .slice()
                    .sort((a, b) => a.labelColor.position - b.labelColor.position)
-                    .map((label) => (
+                    .map(label => (
                      <ListCardLabel
                        onAnimationEnd={() => {
                          if (setToggleLabels) {
@ -202,13 +194,13 @@ const Card = React.forwardRef(
              <EditorContent>
                {complete && <CompleteIcon width={16} height={16} />}
                <EditorTextarea
-                  onChange={(e) => {
+                  onChange={e => {
                    setCardTitle(e.currentTarget.value);
                    if (onCardTitleChange) {
                      onCardTitleChange(e.currentTarget.value);
                    }
                  }}
-                  onClick={(e) => {
+                  onClick={e => {
                    e.stopPropagation();
                  }}
                  onKeyDown={handleKeyDown}
@ -225,7 +217,7 @@ const Card = React.forwardRef(
            <ListCardBadges>
              {watched && (
                <ListCardBadge>
-                  <Eye width={12} height={12} />
+                  <Eye width={8} height={8} />
                </ListCardBadge>
              )}
              {dueDate && (
@ -239,12 +231,6 @@ const Card = React.forwardRef(
                  <List width={8} height={8} />
                </DescriptionBadge>
              )}
-              {comments && (
-                <CommentsBadge>
-                  <CommentsIcon color={comments.unread ? 'success' : 'normal'} width={8} height={8} />
-                  <ListCardBadgeText color={comments.unread ? 'success' : 'normal'}>{comments.total}</ListCardBadgeText>
-                </CommentsBadge>
-              )}
              {checklists && (
                <ListCardBadge>
                  <ChecklistIcon
@ -266,7 +252,7 @@ const Card = React.forwardRef(
                    size={28}
                    zIndex={members.length - idx}
                    member={member}
-                    onMemberProfile={($target) => {
+                    onMemberProfile={$target => {
                      if (onCardMemberClick) {
                        onCardMemberClick($target, taskID, member.id);
                      }
--- a/frontend/src/shared/components/Confirm/index.tsx
+++ b/frontend/src/shared/components/Confirm/index.tsx
@ -21,7 +21,14 @@ import {
  SubTitle,
 } from './Styles';

-const Confirm = ({ hasFailed, hasConfirmToken }: ConfirmProps) => {
+const Confirm = ({ onConfirmUser, hasConfirmToken }: ConfirmProps) => {
+  const [hasFailed, setFailed] = useState(false);
+  const setHasFailed = () => {
+    setFailed(true);
+  };
+  useEffect(() => {
+    onConfirmUser(setHasFailed);
+  });
  return (
    <Wrapper>
      <Column>
--- a/frontend/src/shared/components/ControlledInput/index.tsx
+++ b/frontend/src/shared/components/ControlledInput/index.tsx
@ -16,7 +16,7 @@ const InputWrapper = styled.div<{ width: string }>`
 `;

 const InputLabel = styled.span<{ width: string }>`
-  width: ${(props) => props.width};
+  width: ${props => props.width};
  padding: 0.7rem !important;
  color: #c2c6dc;
  left: 0;
@ -40,13 +40,13 @@ const InputInput = styled.input<{
  focusBg: string;
  borderColor: string;
 }>`
-  width: ${(props) => props.width};
+  width: ${props => props.width};
  font-size: 14px;
  border: 1px solid rgba(0, 0, 0, 0.2);
-  border-color: ${(props) => props.borderColor};
+  border-color: ${props => props.borderColor};
  background: #262c49;
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.15);
-  ${(props) => (props.hasIcon ? 'padding: 0.7rem 1rem 0.7rem 3rem;' : 'padding: 0.7rem;')}
+  ${props => (props.hasIcon ? 'padding: 0.7rem 1rem 0.7rem 3rem;' : 'padding: 0.7rem;')}
  line-height: 16px;
  color: #c2c6dc;
  position: relative;
@ -55,13 +55,13 @@ const InputInput = styled.input<{
  &:focus {
    box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(115, 103, 240);
-    background: ${(props) => props.focusBg};
+    background: ${props => props.focusBg};
  }
  &:focus ~ ${InputLabel} {
-    color: ${(props) => props.theme.colors.primary};
+    color: ${props => props.theme.colors.primary};
    transform: translate(-3px, -90%);
  }
-  ${(props) =>
+  ${props =>
    props.hasValue &&
    css`
      & ~ ${InputLabel} {
@ -94,13 +94,11 @@ type ControlledInputProps = {
  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
  value?: string;
  onClick?: (e: React.MouseEvent<HTMLInputElement>) => void;
-  disabled?: boolean;
 };

 const ControlledInput = ({
  width = 'auto',
  variant = 'normal',
-  disabled = false,
  type = 'text',
  autocomplete,
  autoFocus = false,
@ -128,9 +126,8 @@ const ControlledInput = ({
  return (
    <InputWrapper className={className} width={width}>
      <InputInput
-        disabled={disabled}
        hasValue={hasValue}
-        onChange={(e) => {
+        onChange={e => {
          if (onChange) {
            setHasValue(e.currentTarget.value !== '' || floatingLabel);
            onChange(e);
--- a/frontend/src/shared/components/DueDateManager/Styles.ts
+++ b/frontend/src/shared/components/DueDateManager/Styles.ts
@ -1,8 +1,9 @@
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 import Button from 'shared/components/Button';
 import { mixin } from 'shared/utils/styles';
+import Input from 'shared/components/Input';
 import ControlledInput from 'shared/components/ControlledInput';
-import { Bell, Clock } from 'shared/icons';
+import { Clock } from 'shared/icons';

 export const Wrapper = styled.div`
 display: flex
@ -21,27 +22,27 @@ display: flex
  & .react-datepicker__close-icon::after {
    background: none;
    font-size: 16px;
-    color: ${(props) => props.theme.colors.text.primary};
+    color: ${props => props.theme.colors.text.primary};
  }

  & .react-datepicker-time__header {
-    color: ${(props) => props.theme.colors.text.primary};
+    color: ${props => props.theme.colors.text.primary};
  }
  & .react-datepicker__time-list-item {
-    color: ${(props) => props.theme.colors.text.primary};
+    color: ${props => props.theme.colors.text.primary};
  }
  & .react-datepicker__time-container .react-datepicker__time
  .react-datepicker__time-box ul.react-datepicker__time-list
  li.react-datepicker__time-list-item:hover {
-    color: ${(props) => props.theme.colors.text.secondary};
-    background: ${(props) => props.theme.colors.bg.secondary};
+    color: ${props => props.theme.colors.text.secondary};
+    background: ${props => props.theme.colors.bg.secondary};
  }
  & .react-datepicker__time-container .react-datepicker__time {
-    background: ${(props) => props.theme.colors.bg.primary};
+    background: ${props => props.theme.colors.bg.primary};
  }
  & .react-datepicker--time-only {
-    background: ${(props) => props.theme.colors.bg.primary};
-    border: 1px solid ${(props) => props.theme.colors.border};
+    background: ${props => props.theme.colors.bg.primary};
+    border: 1px solid ${props => props.theme.colors.border};
  }

  & .react-datepicker * {
@ -81,12 +82,12 @@ display: flex
  }
  & .react-datepicker__day--selected {
    border-radius: 50%;
-    background: ${(props) => props.theme.colors.primary};
+    background: ${props => props.theme.colors.primary};
    color: #fff;
  }
  & .react-datepicker__day--selected:hover {
    border-radius: 50%;
-    background: ${(props) => props.theme.colors.primary};
+    background: ${props => props.theme.colors.primary};
    color: #fff;
  }
  & .react-datepicker__header {
@ -94,12 +95,12 @@ display: flex
    border: none;
  }
  & .react-datepicker__header--time {
-    border-bottom: 1px solid ${(props) => props.theme.colors.border};
+    border-bottom: 1px solid ${props => props.theme.colors.border};
  }

  & .react-datepicker__input-container input {
  border: 1px solid rgba(0, 0, 0, 0.2);
-  border-color: ${(props) => props.theme.colors.alternate};
+  border-color: ${props => props.theme.colors.alternate};
  background: #262c49;
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.15);
 padding: 0.7rem;
@ -113,7 +114,7 @@ padding: 0.7rem;
  &:focus {
    box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(115, 103, 240);
-    background: ${(props) => props.theme.colors.bg.primary};
+    background: ${props => props.theme.colors.bg.primary};
  }
 `;

@ -141,9 +142,9 @@ export const AddDateRange = styled.div`
  width: 100%;
  font-size: 12px;
  line-height: 16px;
-  color: ${(props) => mixin.rgba(props.theme.colors.primary, 0.8)};
+  color: ${props => mixin.rgba(props.theme.colors.primary, 0.8)};
  &:hover {
-    color: ${(props) => mixin.rgba(props.theme.colors.primary, 1)};
+    color: ${props => mixin.rgba(props.theme.colors.primary, 1)};
    text-decoration: underline;
  }
 `;
@ -200,62 +201,18 @@ export const ActionsWrapper = styled.div`
  align-items: center;
  & .react-datepicker-wrapper {
    margin-left: auto;
-    width: 86px;
+    width: 82px;
  }
  & .react-datepicker__input-container input {
    padding-bottom: 4px;
    padding-top: 4px;
    width: 100%;
  }
-
-  & .react-period-select__indicators {
-    display: none;
-  }
-  & .react-period {
-    width: 100%;
-    max-width: 86px;
-  }
-
-  & .react-period-select__single-value {
-    color: #c2c6dc;
-    margin-left: 0;
-    margin-right: 0;
-  }
-  & .react-period-select__value-container {
-    padding-left: 0;
-    padding-right: 0;
-  }
-  & .react-period-select__control {
-    border: 1px solid rgba(0, 0, 0, 0.2);
-    min-height: 30px;
-    border-color: rgb(65, 69, 97);
-    background: #262c49;
-    box-shadow: 0 0 0 0 rgb(0 0 0 / 15%);
-    color: #c2c6dc;
-    padding-right: 12px;
-    padding-left: 12px;
-    padding-bottom: 4px;
-    padding-top: 4px;
-    width: 100%;
-    position: relative;
-    border-radius: 5px;
-    transition: all 0.3s ease;
-    font-size: 13px;
-    line-height: 20px;
-    padding: 0 12px;
-  }
 `;

 export const ActionClock = styled(Clock)`
  align-self: center;
-  fill: ${(props) => props.theme.colors.primary};
-  margin: 0 8px;
-  flex: 0 0 auto;
-`;
-
-export const ActionBell = styled(Bell)`
-  align-self: center;
-  fill: ${(props) => props.theme.colors.primary};
+  fill: ${props => props.theme.colors.primary};
  margin: 0 8px;
  flex: 0 0 auto;
 `;
@ -265,7 +222,7 @@ export const ActionLabel = styled.div`
  line-height: 14px;
 `;

-export const ActionIcon = styled.div<{ disabled?: boolean }>`
+export const ActionIcon = styled.div`
  height: 36px;
  min-height: 36px;
  min-width: 36px;
@ -275,25 +232,17 @@ export const ActionIcon = styled.div<{ disabled?: boolean }>`
  cursor: pointer;
  margin-right: 8px;
  svg {
-    fill: ${(props) => props.theme.colors.text.primary};
+    fill: ${props => props.theme.colors.text.primary};
    transition-duration: 0.2s;
    transition-property: background, border, box-shadow, fill;
  }
  &:hover svg {
-    fill: ${(props) => props.theme.colors.text.secondary};
+    fill: ${props => props.theme.colors.text.secondary};
  }

-  ${(props) =>
-    props.disabled &&
-    css`
-      opacity: 0.8;
-      cursor: not-allowed;
-    `}
-
  align-items: center;
  display: inline-flex;
  justify-content: center;
-  position: relative;
 `;

 export const ClearButton = styled.div`
@ -311,38 +260,8 @@ export const ClearButton = styled.div`
  justify-content: center;
  transition-duration: 0.2s;
  transition-property: background, border, box-shadow, color, fill;
-  color: ${(props) => props.theme.colors.text.primary};
+  color: ${props => props.theme.colors.text.primary};
  &:hover {
-    color: ${(props) => props.theme.colors.text.secondary};
+    color: ${props => props.theme.colors.text.secondary};
  }
 `;
-
-export const ControlWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  margin-top: 8px;
-`;
-
-export const RightWrapper = styled.div`
-  flex: 1 1 50%;
-  display: flex;
-  align-items: center;
-  flex-direction: row-reverse;
-`;
-
-export const LeftWrapper = styled.div`
-  flex: 1 1 50%;
-  display: flex;
-  align-items: center;
-`;
-
-export const SaveButton = styled(Button)`
-  padding: 6px 12px;
-  justify-content: center;
-  margin-right: 4px;
-`;
-
-export const RemoveButton = styled.div`
-  width: 100%;
-  justify-content: center;
-`;
--- a/frontend/src/shared/components/DueDateManager/index.tsx
+++ b/frontend/src/shared/components/DueDateManager/index.tsx
@ -3,21 +3,14 @@ import dayjs from 'dayjs';
 import styled from 'styled-components';
 import DatePicker from 'react-datepicker';
 import _ from 'lodash';
-import { colourStyles } from 'shared/components/Select';
-import produce from 'immer';
-import Select from 'react-select';
 import 'react-datepicker/dist/react-datepicker.css';
 import { getYear, getMonth } from 'date-fns';
 import { useForm, Controller } from 'react-hook-form';
 import NOOP from 'shared/utils/noop';
-import { Bell, Clock, Cross, Plus, Trash } from 'shared/icons';

 import {
  Wrapper,
  RemoveDueDate,
-  SaveButton,
-  RightWrapper,
-  LeftWrapper,
  DueDateInput,
  DueDatePickerWrapper,
  ConfirmAddDueDate,
@ -29,19 +22,13 @@ import {
  ActionsSeparator,
  ActionClock,
  ActionLabel,
-  ControlWrapper,
-  RemoveButton,
-  ActionBell,
 } from './Styles';
+import { Clock, Cross } from 'shared/icons';
+import Select from 'react-select/src/Select';

 type DueDateManagerProps = {
  task: Task;
-  onDueDateChange: (
-    task: Task,
-    newDueDate: Date,
-    hasTime: boolean,
-    notifications: { current: Array<NotificationInternal>; removed: Array<string> },
-  ) => void;
+  onDueDateChange: (task: Task, newDueDate: Date, hasTime: boolean) => void;
  onRemoveDueDate: (task: Task) => void;
  onCancel: () => void;
 };
@ -54,39 +41,6 @@ const FormField = styled.div`
  width: 50%;
  display: inline-block;
 `;
-
-const NotificationCount = styled.input``;
-
-const ActionPlus = styled(Plus)`
-  position: absolute;
-  fill: ${(props) => props.theme.colors.bg.primary} !important;
-  stroke: ${(props) => props.theme.colors.bg.primary};
-`;
-
-const ActionInput = styled.input`
-  border: 1px solid rgba(0, 0, 0, 0.2);
-  margin-left: auto;
-  margin-right: 4px;
-  border-color: rgb(65, 69, 97);
-  background: #262c49;
-  box-shadow: 0 0 0 0 rgb(0 0 0 / 15%);
-  color: #c2c6dc;
-  position: relative;
-  border-radius: 5px;
-  transition: all 0.3s ease;
-  font-size: 13px;
-  line-height: 20px;
-  padding: 0 12px;
-  padding-bottom: 4px;
-  padding-top: 4px;
-  width: 100%;
-  max-width: 48px;
-  &::-webkit-outer-spin-button,
-  &::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
-`;
 const HeaderSelectLabel = styled.div`
  display: inline-block;
  position: relative;
@ -105,7 +59,7 @@ const HeaderSelectLabel = styled.div`
  color: #c2c6dc;

  &:hover {
-    background: ${(props) => props.theme.colors.primary};
+    background: ${props => props.theme.colors.primary};
    color: #c2c6dc;
  }
 `;
@ -124,12 +78,12 @@ const HeaderSelect = styled.select`

  & option {
    color: #c2c6dc;
-    background: ${(props) => props.theme.colors.bg.primary};
+    background: ${props => props.theme.colors.bg.primary};
  }

  & option:hover {
-    background: ${(props) => props.theme.colors.bg.secondary};
-    border: 1px solid ${(props) => props.theme.colors.primary};
+    background: ${props => props.theme.colors.bg.secondary};
+    border: 1px solid ${props => props.theme.colors.primary};
    outline: none !important;
    box-shadow: none;
    color: #c2c6dc;
@ -161,7 +115,7 @@ const HeaderButton = styled.button`
  border: none;
  border-radius: 3px;
  &:hover {
-    background: ${(props) => props.theme.colors.primary};
+    background: ${props => props.theme.colors.primary};
    color: #fff;
  }
 `;
@ -177,82 +131,35 @@ const HeaderActions = styled.div`
  }
 `;

-const notificationPeriodOptions = [
-  { value: 'minute', label: 'Minutes' },
-  { value: 'hour', label: 'Hours' },
-  { value: 'day', label: 'Days' },
-  { value: 'week', label: 'Weeks' },
-];
-
-type NotificationInternal = {
-  internalId: string;
-  externalId: string | null;
-  period: number;
-  duration: { value: string; label: string };
-};
-
-type NotificationEntryProps = {
-  notification: NotificationInternal;
-  onChange: (period: number, duration: { value: string; label: string }) => void;
-  onRemove: () => void;
-};
-
-const NotificationEntry: React.FC<NotificationEntryProps> = ({ notification, onChange, onRemove }) => {
-  return (
-    <>
-      <ActionBell width={16} height={16} />
-      <ActionLabel>Notification</ActionLabel>
-      <ActionInput
-        value={notification.period}
-        onChange={(e) => {
-          onChange(parseInt(e.currentTarget.value, 10), notification.duration);
-        }}
-        onKeyPress={(e) => {
-          const isNumber = /^[0-9]$/i.test(e.key);
-          if (!isNumber && e.key !== 'Backspace') {
-            e.preventDefault();
-          }
-        }}
-        dir="ltr"
-        autoComplete="off"
-        min="0"
-        type="number"
-      />
-      <Select
-        menuPlacement="top"
-        className="react-period"
-        classNamePrefix="react-period-select"
-        styles={colourStyles}
-        isSearchable={false}
-        defaultValue={notification.duration}
-        options={notificationPeriodOptions}
-        onChange={(e) => {
-          if (e !== null) {
-            onChange(notification.period, e);
-          }
-        }}
-      />
-      <ActionIcon onClick={() => onRemove()}>
-        <Cross width={16} height={16} />
-      </ActionIcon>
-    </>
-  );
-};
 const DueDateManager: React.FC<DueDateManagerProps> = ({ task, onDueDateChange, onRemoveDueDate, onCancel }) => {
-  const currentDueDate = task.dueDate.at ? dayjs(task.dueDate.at).toDate() : null;
-  const {
-    register,
-    handleSubmit,
-    setValue,
-    setError,
-    formState: { errors },
-    control,
-  } = useForm<DueDateFormData>();
+  const currentDueDate = task.dueDate ? dayjs(task.dueDate).toDate() : null;
+  const { register, handleSubmit, errors, setValue, setError, formState, control } = useForm<DueDateFormData>();

  const [startDate, setStartDate] = useState<Date | null>(currentDueDate);
  const [endDate, setEndDate] = useState<Date | null>(currentDueDate);
  const [hasTime, enableTime] = useState(task.hasTime ?? false);
+  const firstRun = useRef<boolean>(true);

+  const debouncedFunctionRef = useRef((newDate: Date | null, nowHasTime: boolean) => {
+    if (!firstRun.current) {
+      if (newDate) {
+        onDueDateChange(task, newDate, nowHasTime);
+      } else {
+        onRemoveDueDate(task);
+        enableTime(false);
+      }
+    } else {
+      firstRun.current = false;
+    }
+  });
+  const debouncedChange = useCallback(
+    _.debounce((newDate, nowHasTime) => debouncedFunctionRef.current(newDate, nowHasTime), 500),
+    [],
+  );
+
+  useEffect(() => {
+    debouncedChange(startDate, hasTime);
+  }, [startDate, hasTime]);
  const years = _.range(2010, getYear(new Date()) + 10, 1);
  const months = [
    'January',
@ -269,46 +176,45 @@ const DueDateManager: React.FC<DueDateManagerProps> = ({ task, onDueDateChange,
    'December',
  ];

+  const onChange = (dates: any) => {
+    const [start, end] = dates;
+    setStartDate(start);
+    setEndDate(end);
+  };
  const [isRange, setIsRange] = useState(false);
-  const [notDuration, setNotDuration] = useState(10);
-  const [removedNotifications, setRemovedNotifications] = useState<Array<string>>([]);
-  const [notifications, setNotifications] = useState<Array<NotificationInternal>>(
-    task.dueDate.notifications
-      ? task.dueDate.notifications.map((c, idx) => {
-          const duration =
-            notificationPeriodOptions.find((o) => o.value === c.duration.toLowerCase()) ?? notificationPeriodOptions[0];
-          return {
-            internalId: `n${idx}`,
-            externalId: c.id,
-            period: c.period,
-            duration,
-          };
-        })
-      : [],
-  );
+
+  const CustomTimeInput = forwardRef(({ value, onClick, onChange, onBlur, onFocus }: any, $ref: any) => {
+    return (
+      <DueDateInput
+        id="endTime"
+        value={value}
+        name="endTime"
+        onChange={onChange}
+        width="100%"
+        variant="alternate"
+        label="Time"
+        onClick={onClick}
+      />
+    );
+  });
+
  return (
    <Wrapper>
      <DateRangeInputs>
        <DatePicker
          selected={startDate}
-          onChange={(date) => {
-            if (!Array.isArray(date) && date !== null) {
-              setStartDate(date);
-            }
-          }}
+          onChange={date => setStartDate(date)}
          popperClassName="picker-hidden"
          dateFormat="yyyy-MM-dd"
          disabledKeyboardNavigation
+          isClearable
          placeholderText="Select due date"
        />
        {isRange ? (
          <DatePicker
            selected={startDate}
-            onChange={(date) => {
-              if (!Array.isArray(date)) {
-                setStartDate(date);
-              }
-            }}
+            isClearable
+            onChange={date => setStartDate(date)}
            popperClassName="picker-hidden"
            dateFormat="yyyy-MM-dd"
            placeholderText="Select from date"
@ -319,11 +225,7 @@ const DueDateManager: React.FC<DueDateManagerProps> = ({ task, onDueDateChange,
      </DateRangeInputs>
      <DatePicker
        selected={startDate}
-        onChange={(date) => {
-          if (!Array.isArray(date)) {
-            setStartDate(date);
-          }
-        }}
+        onChange={date => setStartDate(date)}
        startDate={startDate}
        useWeekdaysShort
        renderCustomHeader={({
@ -345,7 +247,7 @@ const DueDateManager: React.FC<DueDateManagerProps> = ({ task, onDueDateChange,
                value={months[getMonth(date)]}
                onChange={({ target: { value } }) => changeMonth(months.indexOf(value))}
              >
-                {months.map((option) => (
+                {months.map(option => (
                  <option key={option} value={option}>
                    {option}
                  </option>
@ -355,7 +257,7 @@ const DueDateManager: React.FC<DueDateManagerProps> = ({ task, onDueDateChange,
            <HeaderSelectLabel>
              {date.getFullYear()}
              <HeaderSelect value={getYear(date)} onChange={({ target: { value } }) => changeYear(parseInt(value, 10))}>
-                {years.map((option) => (
+                {years.map(option => (
                  <option key={option} value={option}>
                    {option}
                  </option>
@ -377,10 +279,8 @@ const DueDateManager: React.FC<DueDateManagerProps> = ({ task, onDueDateChange,
          <ActionLabel>Due Time</ActionLabel>
          <DatePicker
            selected={startDate}
-            onChange={(date) => {
-              if (!Array.isArray(date)) {
-                setStartDate(date);
-              }
+            onChange={date => {
+              setStartDate(date);
            }}
            showTimeSelect
            showTimeSelectOnly
@ -393,91 +293,23 @@ const DueDateManager: React.FC<DueDateManagerProps> = ({ task, onDueDateChange,
          </ActionIcon>
        </ActionsWrapper>
      )}
-      {notifications.map((n, idx) => (
-        <ActionsWrapper key={n.internalId}>
-          <NotificationEntry
-            notification={n}
-            onChange={(period, duration) => {
-              setNotifications((prev) =>
-                produce(prev, (draft) => {
-                  draft[idx].duration = duration;
-                  draft[idx].period = period;
-                }),
-              );
-            }}
-            onRemove={() => {
-              setNotifications((prev) =>
-                produce(prev, (draft) => {
-                  draft.splice(idx, 1);
-                  if (n.externalId !== null) {
-                    setRemovedNotifications((prev) => {
-                      if (n.externalId !== null) {
-                        return [...prev, n.externalId];
-                      }
-                      return prev;
-                    });
-                  }
-                }),
-              );
-            }}
-          />
-        </ActionsWrapper>
-      ))}
-      <ControlWrapper>
-        <LeftWrapper>
-          <SaveButton
-            onClick={() => {
-              if (startDate && notifications.findIndex((n) => Number.isNaN(n.period)) === -1) {
-                onDueDateChange(task, startDate, hasTime, { current: notifications, removed: removedNotifications });
-              }
-            }}
-          >
-            Save
-          </SaveButton>
-          {currentDueDate !== null && (
-            <ActionIcon
-              onClick={() => {
-                onRemoveDueDate(task);
-              }}
-            >
-              <Trash width={16} height={16} />
-            </ActionIcon>
-          )}
-        </LeftWrapper>
-        <RightWrapper>
+      <ActionsWrapper>
+        {!hasTime && (
          <ActionIcon
-            disabled={notifications.length === 3}
            onClick={() => {
-              setNotifications((prev) => [
-                ...prev,
-                {
-                  externalId: null,
-                  internalId: `n${prev.length + 1}`,
-                  duration: notificationPeriodOptions[0],
-                  period: 10,
-                },
-              ]);
+              if (startDate === null) {
+                const today = new Date();
+                today.setHours(12, 30, 0);
+                setStartDate(today);
+              }
+              enableTime(true);
            }}
          >
-            <Bell width={16} height={16} />
-            <ActionPlus width={8} height={8} />
+            <Clock width={16} height={16} />
          </ActionIcon>
-          {!hasTime && (
-            <ActionIcon
-              onClick={() => {
-                if (startDate === null) {
-                  const today = new Date();
-                  today.setHours(12, 30, 0);
-                  setStartDate(today);
-                }
-                enableTime(true);
-              }}
-            >
-              <Clock width={16} height={16} />
-            </ActionIcon>
-          )}
-        </RightWrapper>
-      </ControlWrapper>
+        )}
+        <ClearButton onClick={() => setStartDate(null)}>{hasTime ? 'Clear all' : 'Clear'}</ClearButton>
+      </ActionsWrapper>
    </Wrapper>
  );
 };
--- a/frontend/src/shared/components/FormInput/index.tsx
+++ b/frontend/src/shared/components/FormInput/index.tsx
@ -1,202 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react';
-import styled, { css } from 'styled-components/macro';
-import theme from '../../../App/ThemeStyles';
-
-const InputWrapper = styled.div<{ width: string }>`
-  position: relative;
-  width: ${(props) => props.width};
-  display: flex;
-  align-items: flex-start;
-  flex-direction: column;
-  position: relative;
-  justify-content: center;
-
-  margin-bottom: 2.2rem;
-  margin-top: 24px;
-`;
-
-const InputLabel = styled.span<{ width: string }>`
-  width: ${(props) => props.width};
-  padding: 0.7rem !important;
-  color: #c2c6dc;
-  left: 0;
-  top: 0;
-  transition: all 0.2s ease;
-  position: absolute;
-  border-radius: 5px;
-  overflow: hidden;
-  font-size: 0.85rem;
-  cursor: text;
-  font-size: 12px;
-      user-select: none;
-    pointer-events: none;
-}
-`;
-
-const InputInput = styled.input<{
-  hasValue: boolean;
-  hasIcon: boolean;
-  width: string;
-  focusBg: string;
-  borderColor: string;
-}>`
-  width: ${(props) => props.width};
-  font-size: 14px;
-  border: 1px solid rgba(0, 0, 0, 0.2);
-  border-color: ${(props) => props.borderColor};
-  background: #262c49;
-  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.15);
-  ${(props) => (props.hasIcon ? 'padding: 0.7rem 1rem 0.7rem 3rem;' : 'padding: 0.7rem;')}
-
-  &:-webkit-autofill, &:-webkit-autofill:hover, &:-webkit-autofill:focus, &:-webkit-autofill:active {
-    -webkit-box-shadow: 0 0 0 30px #262c49 inset !important;
-  }
-  &:-webkit-autofill {
-    -webkit-text-fill-color: #c2c6dc !important;
-  }
-  line-height: 16px;
-  color: #c2c6dc;
-  position: relative;
-  border-radius: 5px;
-  transition: all 0.3s ease;
-  &:focus {
-    box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.15);
-    border: 1px solid ${(props) => props.theme.colors.primary};
-    background: ${(props) => props.focusBg};
-  }
-  &:focus ~ ${InputLabel} {
-    color: ${(props) => props.theme.colors.primary};
-    transform: translate(-3px, -90%);
-  }
-  ${(props) =>
-    props.hasValue &&
-    css`
-      & ~ ${InputLabel} {
-        color: ${props.theme.colors.primary};
-        transform: translate(-3px, -90%);
-      }
-    `}
-`;
-
-const Icon = styled.div`
-  display: flex;
-  left: 16px;
-  position: absolute;
-`;
-
-type FormInputProps = {
-  variant?: 'normal' | 'alternate';
-  disabled?: boolean;
-  label?: string;
-  width?: string;
-  floatingLabel?: boolean;
-  placeholder?: string;
-  icon?: JSX.Element;
-  type?: string;
-  autocomplete?: boolean;
-  autoFocus?: boolean;
-  autoSelect?: boolean;
-  id?: string;
-  name?: string;
-  onChange: any;
-  onBlur: any;
-  className?: string;
-  defaultValue?: string;
-  value?: string;
-  onClick?: (e: React.MouseEvent<HTMLInputElement>) => void;
-};
-
-function useCombinedRefs(...refs: any) {
-  const targetRef = React.useRef();
-
-  React.useEffect(() => {
-    refs.forEach((ref: any) => {
-      if (!ref) return;
-
-      if (typeof ref === 'function') {
-        ref(targetRef.current);
-      } else {
-        ref.current = targetRef.current;
-      }
-    });
-  }, [refs]);
-
-  return targetRef;
-}
-
-const FormInput = React.forwardRef(
-  (
-    {
-      disabled = false,
-      width = 'auto',
-      variant = 'normal',
-      type = 'text',
-      autoFocus = false,
-      autoSelect = false,
-      autocomplete,
-      label,
-      placeholder,
-      onBlur,
-      onChange,
-      icon,
-      name,
-      className,
-      onClick,
-      floatingLabel,
-      defaultValue,
-      value,
-      id,
-    }: FormInputProps,
-    $ref: any,
-  ) => {
-    const [hasValue, setHasValue] = useState(defaultValue !== '');
-    const borderColor = variant === 'normal' ? 'rgba(0,0,0,0.2)' : theme.colors.alternate;
-    const focusBg = variant === 'normal' ? theme.colors.bg.secondary : theme.colors.bg.primary;
-
-    // Merge forwarded ref and internal ref in order to be able to access the ref in the useEffect
-    // The forwarded ref is not accessible by itself, which is what the innerRef & combined ref is for
-    // TODO(jordanknott): This is super ugly, find a better approach?
-    const $innerRef = React.useRef<HTMLInputElement>(null);
-    const combinedRef: any = useCombinedRefs($ref, $innerRef);
-    useEffect(() => {
-      if (combinedRef && combinedRef.current) {
-        if (autoFocus) {
-          combinedRef.current.focus();
-        }
-        if (autoSelect) {
-          combinedRef.current.select();
-        }
-      }
-    }, []);
-    return (
-      <InputWrapper className={className} width={width}>
-        <InputInput
-          onChange={(e) => {
-            setHasValue((e.currentTarget.value !== '' || floatingLabel) ?? false);
-            onChange(e);
-          }}
-          disabled={disabled}
-          hasValue={hasValue}
-          ref={combinedRef}
-          id={id}
-          type={type}
-          name={name}
-          onClick={onClick}
-          autoComplete={autocomplete ? 'on' : 'off'}
-          defaultValue={defaultValue}
-          onBlur={onBlur}
-          value={value}
-          hasIcon={typeof icon !== 'undefined'}
-          width={width}
-          placeholder={placeholder}
-          focusBg={focusBg}
-          borderColor={borderColor}
-        />
-        {label && <InputLabel width={width}>{label}</InputLabel>}
-        <Icon>{icon && icon}</Icon>
-      </InputWrapper>
-    );
-  },
-);
-
-export default FormInput;
--- a/frontend/src/shared/components/List/Styles.ts
+++ b/frontend/src/shared/components/List/Styles.ts
@ -72,9 +72,6 @@ export const HeaderName = styled(TextareaAutosize)`
  box-shadow: none;
  font-weight: 600;
  margin: -4px 0;
-  &:disabled {
-    opacity: 1;
-  }

  letter-spacing: normal;
  word-spacing: normal;
--- a/frontend/src/shared/components/List/index.tsx
+++ b/frontend/src/shared/components/List/index.tsx
@ -24,7 +24,6 @@ type Props = {
  onOpenComposer: (id: string) => void;
  wrapperProps?: any;
  headerProps?: any;
-  isPublic: boolean;
  index?: number;
  onExtraMenuOpen: (taskGroupID: string, $targetRef: React.RefObject<HTMLElement>) => void;
 };
@ -38,7 +37,6 @@ const List = React.forwardRef(
      isComposerOpen,
      onOpenComposer,
      children,
-      isPublic,
      wrapperProps,
      headerProps,
      onExtraMenuOpen,
@ -88,37 +86,39 @@ const List = React.forwardRef(
      <Container ref={$wrapperRef} {...wrapperProps}>
        <Wrapper>
          <Header {...headerProps} isEditing={isEditingTitle}>
-            {!isPublic && <HeaderEditTarget onClick={onClick} isHidden={isEditingTitle} />}
+            <HeaderEditTarget onClick={onClick} isHidden={isEditingTitle} />
            <HeaderName
              ref={$listNameRef}
-              disabled={isPublic}
              onBlur={onBlur}
              onChange={onChange}
              onKeyDown={onKeyDown}
              spellCheck={false}
              value={listName}
            />
-            {!isPublic && (
-              <ListExtraMenuButtonWrapper ref={$extraActionsRef} onClick={handleExtraMenuOpen}>
-                <Ellipsis vertical={false} size={16} color="#c2c6dc" />
-              </ListExtraMenuButtonWrapper>
-            )}
+            <ListExtraMenuButtonWrapper ref={$extraActionsRef} onClick={handleExtraMenuOpen}>
+              <Ellipsis size={16} color="#c2c6dc" />
+            </ListExtraMenuButtonWrapper>
          </Header>
          {children && children}
-          {!isPublic && (
-            <AddCardContainer hidden={isComposerOpen}>
-              <AddCardButton onClick={() => onOpenComposer(id)}>
-                <Plus width={12} height={12} />
-                <AddCardButtonText>Add another card</AddCardButtonText>
-              </AddCardButton>
-            </AddCardContainer>
-          )}
+          <AddCardContainer hidden={isComposerOpen}>
+            <AddCardButton onClick={() => onOpenComposer(id)}>
+              <Plus width={12} height={12} />
+              <AddCardButtonText>Add another card</AddCardButtonText>
+            </AddCardButton>
+          </AddCardContainer>
        </Wrapper>
      </Container>
    );
  },
 );

+List.defaultProps = {
+  children: null,
+  isComposerOpen: false,
+  wrapperProps: {},
+  headerProps: {},
+};
+
 List.displayName = 'List';
 export default List;

--- a/frontend/src/shared/components/Lists/index.tsx
+++ b/frontend/src/shared/components/Lists/index.tsx
@ -4,7 +4,6 @@ import List, { ListCards } from 'shared/components/List';
 import Card from 'shared/components/Card';
 import CardComposer from 'shared/components/CardComposer';
 import AddList from 'shared/components/AddList';
-import log from 'loglevel';
 import {
  isPositionChanged,
  getSortedDraggables,
@ -112,16 +111,24 @@ function shouldStatusFilter(task: Task, filter: TaskStatusFilter) {
        const TODAY = REFERENCE.clone().startOf('day');
        return completedAt.isSame(TODAY, 'd');
      case TaskSince.YESTERDAY:
-        const YESTERDAY = REFERENCE.clone().subtract(1, 'day').startOf('day');
+        const YESTERDAY = REFERENCE.clone()
+          .subtract(1, 'day')
+          .startOf('day');
        return completedAt.isSameOrAfter(YESTERDAY, 'd');
      case TaskSince.ONE_WEEK:
-        const ONE_WEEK = REFERENCE.clone().subtract(7, 'day').startOf('day');
+        const ONE_WEEK = REFERENCE.clone()
+          .subtract(7, 'day')
+          .startOf('day');
        return completedAt.isSameOrAfter(ONE_WEEK, 'd');
      case TaskSince.TWO_WEEKS:
-        const TWO_WEEKS = REFERENCE.clone().subtract(14, 'day').startOf('day');
+        const TWO_WEEKS = REFERENCE.clone()
+          .subtract(14, 'day')
+          .startOf('day');
        return completedAt.isSameOrAfter(TWO_WEEKS, 'd');
      case TaskSince.THREE_WEEKS:
-        const THREE_WEEKS = REFERENCE.clone().subtract(21, 'day').startOf('day');
+        const THREE_WEEKS = REFERENCE.clone()
+          .subtract(21, 'day')
+          .startOf('day');
        return completedAt.isSameOrAfter(THREE_WEEKS, 'd');
      default:
        return true;
@ -144,7 +151,6 @@ interface SimpleProps {
  onCardMemberClick: OnCardMemberClick;
  onCardLabelClick: () => void;
  cardLabelVariant: CardLabelVariant;
-  isPublic?: boolean;
  taskStatusFilter?: TaskStatusFilter;
  taskMetaFilters?: TaskMetaFilters;
  taskSorting?: TaskSorting;
@ -182,7 +188,6 @@ const SimpleLists: React.FC<SimpleProps> = ({
  onExtraMenuOpen,
  onCardMemberClick,
  taskStatusFilter = initTaskStatusFilter,
-  isPublic = false,
  taskMetaFilters = initTaskMetaFilters,
  taskSorting = initTaskSorting,
 }) => {
@ -196,14 +201,14 @@ const SimpleLists: React.FC<SimpleProps> = ({
    let beforeDropDraggables: Array<DraggableElement> | null = null;

    if (isList) {
-      const droppedGroup = taskGroups.find((taskGroup) => taskGroup.id === draggableId);
+      const droppedGroup = taskGroups.find(taskGroup => taskGroup.id === draggableId);
      if (droppedGroup) {
        droppedDraggable = {
          id: draggableId,
          position: droppedGroup.position,
        };
        beforeDropDraggables = getSortedDraggables(
-          taskGroups.map((taskGroup) => {
+          taskGroups.map(taskGroup => {
            return { id: taskGroup.id, position: taskGroup.position };
          }),
        );
@ -227,13 +232,13 @@ const SimpleLists: React.FC<SimpleProps> = ({
      }
    } else {
      const curTaskGroup = taskGroups.findIndex(
-        (taskGroup) => taskGroup.tasks.findIndex((task) => task.id === draggableId) !== -1,
+        taskGroup => taskGroup.tasks.findIndex(task => task.id === draggableId) !== -1,
      );
      let targetTaskGroup = curTaskGroup;
      if (!isSameList) {
-        targetTaskGroup = taskGroups.findIndex((taskGroup) => taskGroup.id === destination.droppableId);
+        targetTaskGroup = taskGroups.findIndex(taskGroup => taskGroup.id === destination.droppableId);
      }
-      const droppedTask = taskGroups[curTaskGroup].tasks.find((task) => task.id === draggableId);
+      const droppedTask = taskGroups[curTaskGroup].tasks.find(task => task.id === draggableId);

      if (droppedTask) {
        droppedDraggable = {
@ -241,7 +246,7 @@ const SimpleLists: React.FC<SimpleProps> = ({
          position: droppedTask.position,
        };
        beforeDropDraggables = getSortedDraggables(
-          taskGroups[targetTaskGroup].tasks.map((task) => {
+          taskGroups[targetTaskGroup].tasks.map(task => {
            return { id: task.id, position: task.position };
          }),
        );
@ -263,9 +268,6 @@ const SimpleLists: React.FC<SimpleProps> = ({
            id: destination.droppableId,
          },
        };
-        log.debug(
-          `action=move taskId=${droppedTask.id} source=${source.droppableId} dest=${destination.droppableId} oldPos=${droppedTask.position} newPos=${newPosition}`,
-        );
        onTaskDrop(newTask, droppedTask.taskGroup.id);
      }
    }
@ -282,7 +284,7 @@ const SimpleLists: React.FC<SimpleProps> = ({
      <BoardWrapper>
        <DragDropContext onDragEnd={onDragEnd}>
          <Droppable direction="horizontal" type="column" droppableId="root">
-            {(provided) => (
+            {provided => (
              <Container {...provided.droppableProps} ref={provided.innerRef}>
                {taskGroups
                  .slice()
@ -290,15 +292,14 @@ const SimpleLists: React.FC<SimpleProps> = ({
                  .map((taskGroup: TaskGroup, index: number) => {
                    return (
                      <Draggable draggableId={taskGroup.id} key={taskGroup.id} index={index}>
-                        {(columnDragProvided) => (
+                        {columnDragProvided => (
                          <Droppable type="tasks" droppableId={taskGroup.id}>
                            {(columnDropProvided, snapshot) => (
                              <List
                                name={taskGroup.name}
-                                onOpenComposer={(id) => setCurrentComposer(id)}
+                                onOpenComposer={id => setCurrentComposer(id)}
                                isComposerOpen={currentComposer === taskGroup.id}
-                                onSaveName={(name) => onChangeTaskGroupName(taskGroup.id, name)}
-                                isPublic={isPublic}
+                                onSaveName={name => onChangeTaskGroupName(taskGroup.id, name)}
                                ref={columnDragProvided.innerRef}
                                wrapperProps={columnDragProvided.draggableProps}
                                headerProps={columnDragProvided.dragHandleProps}
@ -310,8 +311,8 @@ const SimpleLists: React.FC<SimpleProps> = ({
                                <ListCards ref={columnDropProvided.innerRef} {...columnDropProvided.droppableProps}>
                                  {taskGroup.tasks
                                    .slice()
-                                    .filter((t) => shouldStatusFilter(t, taskStatusFilter))
-                                    .filter((t) => shouldMetaFilter(t, taskMetaFilters))
+                                    .filter(t => shouldStatusFilter(t, taskStatusFilter))
+                                    .filter(t => shouldMetaFilter(t, taskMetaFilters))
                                    .sort((a: any, b: any) => a.position - b.position)
                                    .sort((a: any, b: any) => sortTasks(a, b, taskSorting))
                                    .map((task: Task, taskIndex: any) => {
@ -322,14 +323,12 @@ const SimpleLists: React.FC<SimpleProps> = ({
                                          index={taskIndex}
                                          isDragDisabled={taskSorting.type !== TaskSortingType.NONE}
                                        >
-                                          {(taskProvided) => {
+                                          {taskProvided => {
                                            return (
                                              <Card
                                                toggleDirection={toggleDirection}
                                                toggleLabels={toggleLabels}
-                                                isPublic={isPublic}
                                                labelVariant={cardLabelVariant}
-                                                watched={task.watched}
                                                wrapperProps={{
                                                  ...taskProvided.draggableProps,
                                                  ...taskProvided.dragHandleProps,
@ -349,12 +348,12 @@ const SimpleLists: React.FC<SimpleProps> = ({
                                                complete={task.complete ?? false}
                                                taskGroupID={taskGroup.id}
                                                description=""
-                                                labels={task.labels.map((label) => label.projectLabel)}
+                                                labels={task.labels.map(label => label.projectLabel)}
                                                dueDate={
-                                                  task.dueDate.at
+                                                  task.dueDate
                                                    ? {
                                                        isPastDue: false,
-                                                        formattedDate: dayjs(task.dueDate.at).format('MMM D, YYYY'),
+                                                        formattedDate: dayjs(task.dueDate).format('MMM D, YYYY'),
                                                      }
                                                    : undefined
                                                }
@ -364,7 +363,6 @@ const SimpleLists: React.FC<SimpleProps> = ({
                                                  onTaskClick(task);
                                                }}
                                                checklists={task.badges && task.badges.checklist}
-                                                comments={task.badges && task.badges.comments}
                                                onCardMemberClick={onCardMemberClick}
                                                onContextMenu={onQuickEditorOpen}
                                              />
@ -379,7 +377,7 @@ const SimpleLists: React.FC<SimpleProps> = ({
                                      onClose={() => {
                                        setCurrentComposer('');
                                      }}
-                                      onCreateCard={(name) => {
+                                      onCreateCard={name => {
                                        onCreateTask(taskGroup.id, name);
                                      }}
                                      isOpen
@ -398,13 +396,11 @@ const SimpleLists: React.FC<SimpleProps> = ({
            )}
          </Droppable>
        </DragDropContext>
-        {!isPublic && (
-          <AddList
-            onSave={(listName) => {
-              onCreateTaskGroup(listName);
-            }}
-          />
-        )}
+        <AddList
+          onSave={listName => {
+            onCreateTaskGroup(listName);
+          }}
+        />
      </BoardWrapper>
    </BoardContainer>
  );
--- a/frontend/src/shared/components/Lists/metaFilter.ts
+++ b/frontend/src/shared/components/Lists/metaFilter.ts
@ -24,7 +24,7 @@ export default function shouldMetaFilter(task: Task, filters: TaskMetaFilters) {
      isFiltered = shouldFilter(!(task.dueDate && task.dueDate !== null));
    }
    if (task.dueDate) {
-      const taskDueDate = dayjs(task.dueDate.at);
+      const taskDueDate = dayjs(task.dueDate);
      const today = dayjs();
      let start;
      let end;
@ -36,31 +36,61 @@ export default function shouldMetaFilter(task: Task, filters: TaskMetaFilters) {
          isFiltered = shouldFilter(taskDueDate.isSame(today, 'day'));
          break;
        case DueDateFilterType.TOMORROW:
-          isFiltered = shouldFilter(taskDueDate.isBefore(today.clone().add(1, 'day').endOf('day')));
+          isFiltered = shouldFilter(
+            taskDueDate.isBefore(
+              today
+                .clone()
+                .add(1, 'day')
+                .endOf('day'),
+            ),
+          );
          break;
        case DueDateFilterType.THIS_WEEK:
-          start = today.clone().weekday(0).startOf('day');
-          end = today.clone().weekday(6).endOf('day');
+          start = today
+            .clone()
+            .weekday(0)
+            .startOf('day');
+          end = today
+            .clone()
+            .weekday(6)
+            .endOf('day');
          isFiltered = shouldFilter(taskDueDate.isBetween(start, end));
          break;
        case DueDateFilterType.NEXT_WEEK:
-          start = today.clone().weekday(0).add(7, 'day').startOf('day');
-          end = today.clone().weekday(6).add(7, 'day').endOf('day');
+          start = today
+            .clone()
+            .weekday(0)
+            .add(7, 'day')
+            .startOf('day');
+          end = today
+            .clone()
+            .weekday(6)
+            .add(7, 'day')
+            .endOf('day');
          isFiltered = shouldFilter(taskDueDate.isBetween(start, end));
          break;
        case DueDateFilterType.ONE_WEEK:
          start = today.clone().startOf('day');
-          end = today.clone().add(7, 'day').endOf('day');
+          end = today
+            .clone()
+            .add(7, 'day')
+            .endOf('day');
          isFiltered = shouldFilter(taskDueDate.isBetween(start, end));
          break;
        case DueDateFilterType.TWO_WEEKS:
          start = today.clone().startOf('day');
-          end = today.clone().add(14, 'day').endOf('day');
+          end = today
+            .clone()
+            .add(14, 'day')
+            .endOf('day');
          isFiltered = shouldFilter(taskDueDate.isBetween(start, end));
          break;
        case DueDateFilterType.THREE_WEEKS:
          start = today.clone().startOf('day');
-          end = today.clone().add(21, 'day').endOf('day');
+          end = today
+            .clone()
+            .add(21, 'day')
+            .endOf('day');
          isFiltered = shouldFilter(taskDueDate.isBetween(start, end));
          break;
        default:
@ -74,7 +104,7 @@ export default function shouldMetaFilter(task: Task, filters: TaskMetaFilters) {
    }
    for (const member of filters.members) {
      if (task.assigned) {
-        if (task.assigned.findIndex((m) => m.id === member.id) !== -1) {
+        if (task.assigned.findIndex(m => m.id === member.id) !== -1) {
          isFiltered = ShouldFilter.VALID;
        }
      }
@ -86,7 +116,7 @@ export default function shouldMetaFilter(task: Task, filters: TaskMetaFilters) {
    }
    for (const label of filters.labels) {
      if (task.labels) {
-        if (task.labels.findIndex((m) => m.projectLabel.id === label.id) !== -1) {
+        if (task.labels.findIndex(m => m.projectLabel.id === label.id) !== -1) {
          isFiltered = ShouldFilter.VALID;
        }
      }
--- a/frontend/src/shared/components/Login/Styles.ts
+++ b/frontend/src/shared/components/Login/Styles.ts
@ -1,7 +1,6 @@
 import styled from 'styled-components';
 import Button from 'shared/components/Button';
 import { mixin } from 'shared/utils/styles';
-import AccessAccount from 'shared/undraw/AccessAccount';

 export const Wrapper = styled.div`
  background: #eff2f7;
@ -16,12 +15,6 @@ export const Column = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
-  @media (max-width: 600px) {
-    svg {
-      display: none;
-    }
-    position: absolute;
-  }
 `;

 export const LoginFormWrapper = styled.div`
@ -32,47 +25,18 @@ export const LoginFormWrapper = styled.div`
 export const LoginFormContainer = styled.div`
  min-height: 505px;
  padding: 2rem;
-  @media (max-width: 600px) {
-    position: absolute;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    border: solid black 1px;
-    width: 600px;
-    height: 1100px;
-    box-shadow: 20px 20px 50px black;
-  }
-  @media (min-height: 641px) and (max-height: 653px) {
-    margin-top: 25%;
-  }
-  @media (min-height: 654px) and (max-height: 823px) and (max-width: 500px) {
-    margin-top: -20%;
-  }
-  @media (min-height: 480px) and (max-height: 639px) {
-    margin-top: 20%;
-  }
 `;

 export const Title = styled.h1`
  color: #ebeefd;
  font-size: 18px;
  margin-bottom: 14px;
-  @media (max-width: 600px) {
-    font-size: 38px;
-    margin-top: 50px;
-    text-align: center;
-  }
 `;

 export const SubTitle = styled.h2`
  color: #c2c6dc;
  font-size: 14px;
  margin-bottom: 14px;
-  @media (max-width: 600px) {
-    margin-top: 30px;
-    font-size: 24.5px;
-    margin-bottom: 90px;
-    text-align: center;
-  }
 `;
 export const Form = styled.form`
  display: flex;
@ -84,10 +48,6 @@ export const FormLabel = styled.label`
  font-size: 12px;
  position: relative;
  margin-top: 14px;
-  @media (max-width: 600px) {
-    font-size: 35px;
-    font-weight: bold;
-  }
 `;

 export const FormTextInput = styled.input`
@ -99,92 +59,28 @@ export const FormTextInput = styled.input`
  font-size: 1rem;
  color: #c2c6dc;
  border-radius: 5px;
-
-  @media (max-width: 600px) {
-    border: 5px solid rgba(0, 0, 0, 0.2);
-    border-radius: 5%;
-    font-size: 30px;
-    background-color: #353D64;
-    color: black;
-    padding: 0.7rem 1rem 1rem 3rem;
-    text-align: center;
-    &::placeholder {
-      visibility: hidden;
-    }
-
-    &:not(:placeholder-shown) {
-      background-color: white;
-    }
-  }
 `;

 export const FormIcon = styled.div`
  top: 30px;
  left: 16px;
  position: absolute;
-
-  @media (max-width: 600px) {
-    svg {
-      width: 40px;
-      height: 40px;
-      display: inline;
-      position: absolute;
-      top: 30px;
-      left: -5px;
-    }
-  }
 `;

 export const FormError = styled.span`
  font-size: 0.875rem;
-  color: ${(props) => props.theme.colors.danger};
-  @media (max-width: 600px) {
-    font-size: 1.8rem;
-  }
+  color: ${props => props.theme.colors.danger};
 `;

-export const LoginButton = styled(Button)`
-  @media (max-width: 600px) {
-    span {
-      font-size: 40px;
-      text-align: center;
-      width: 100%;
-    }
-    align-self: center;
-    position: absolute; 
-    right: 0px;
-    margin-top: 40%;
-    width: 100%;
-    &:hover {
-      box-shadow: 5px 5px 20px white;
-    }
-  }
-`;
+export const LoginButton = styled(Button)``;

 export const ActionButtons = styled.div`
  margin-top: 17.5px;
  display: flex;
  justify-content: space-between;
-  @media (max-width: 600px) {
-    width: 150px;
-    align-content: center;
-    font-size: 50px;
-  }
 `;

-export const RegisterButton = styled(Button)`
-  @media (max-width: 600px) {
-    span {
-      font-size: 40px;
-      text-align: center;
-      width: 100%;
-    }
-    width: 100%;
-    position: absolute;
-    left: 0px;
-    margin-top: 29%;
-  }
-`;
+export const RegisterButton = styled(Button)``;

 export const LogoTitle = styled.div`
  font-size: 24px;
@ -192,9 +88,6 @@ export const LogoTitle = styled.div`
  margin-left: 12px;
  transition: visibility, opacity, transform 0.25s ease;
  color: #7367f0;
-  @media (max-width: 600px) {
-    font-size: 60px;
-  }
 `;

 export const LogoWrapper = styled.div`
@ -207,16 +100,5 @@ export const LogoWrapper = styled.div`
  padding-bottom: 16px;
  margin-bottom: 24px;
  color: rgb(222, 235, 255);
-  border-bottom: 1px solid ${(props) => mixin.rgba(props.theme.colors.alternate, 0.65)};
-  @media (max-width: 600px) {
-    svg {
-      display: inline;
-      width: 80px;
-      height: 80px;
-    }
-  }
+  border-bottom: 1px solid ${props => mixin.rgba(props.theme.colors.alternate, 0.65)};
 `;
-
-
-
-
--- a/frontend/src/shared/components/Login/index.tsx
+++ b/frontend/src/shared/components/Login/index.tsx
@ -1,8 +1,8 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import AccessAccount from 'shared/undraw/AccessAccount';
 import { User, Lock, Taskcafe } from 'shared/icons';
 import { useForm } from 'react-hook-form';
-import { useHistory } from 'react-router';
+
 import LoadingSpinner from 'shared/components/LoadingSpinner';
 import {
  Form,
@ -25,28 +25,11 @@ import {

 const Login = ({ onSubmit }: LoginProps) => {
  const [isComplete, setComplete] = useState(true);
-  const [showRegistration, setShowRegistration] = useState(false);
-  const {
-    register,
-    handleSubmit,
-    setError,
-    formState: { errors },
-  } = useForm<LoginFormData>();
+  const { register, handleSubmit, errors, setError, formState } = useForm<LoginFormData>();
  const loginSubmit = (data: LoginFormData) => {
    setComplete(false);
    onSubmit(data, setComplete, setError);
  };
-  const history = useHistory();
-  useEffect(() => {
-    fetch('/settings').then(async (x) => {
-      const { isConfigured, allowPublicRegistration } = await x.json();
-      if (!isConfigured) {
-        history.push('/register');
-      } else if (allowPublicRegistration) {
-        setShowRegistration(true);
-      }
-    });
-  }, []);
  return (
    <Wrapper>
      <Column>
@ -65,9 +48,10 @@ const Login = ({ onSubmit }: LoginProps) => {
              <FormLabel htmlFor="username">
                Username
                <FormTextInput
-                  placeholder="Username"
                  type="text"
-                  {...register('username', { required: 'Username is required' })}
+                  id="username"
+                  name="username"
+                  ref={register({ required: 'Username is required' })}
                />
                <FormIcon>
                  <User width={20} height={20} />
@ -77,9 +61,10 @@ const Login = ({ onSubmit }: LoginProps) => {
              <FormLabel htmlFor="password">
                Password
                <FormTextInput
-                  placeholder="Password"
                  type="password"
-                  {...register('password', { required: 'Password is required' })}
+                  id="password"
+                  name="password"
+                  ref={register({ required: 'Password is required' })}
                />
                <FormIcon>
                  <Lock width={20} height={20} />
@ -88,7 +73,7 @@ const Login = ({ onSubmit }: LoginProps) => {
              {errors.password && <FormError>{errors.password.message}</FormError>}

              <ActionButtons>
-                {showRegistration ? <RegisterButton variant="outline">Register</RegisterButton> : <div />}
+                <RegisterButton variant="outline">Register</RegisterButton>
                {!isComplete && <LoadingSpinner size="32px" thickness="2px" borderSize="48px" />}
                <LoginButton type="submit" disabled={!isComplete}>
                  Login
--- a/frontend/src/shared/components/NewProject/index.tsx
+++ b/frontend/src/shared/components/NewProject/index.tsx
@ -98,8 +98,8 @@ const ProjectName = styled.input`
  font-weight: 400;

  &:focus {
-    background: ${(props) => mixin.darken(props.theme.colors.bg.secondary, 0.15)};
-    box-shadow: ${(props) => props.theme.colors.primary} 0px 0px 0px 1px;
+    background: ${props => mixin.darken(props.theme.colors.bg.secondary, 0.15)};
+    box-shadow: ${props => props.theme.colors.primary} 0px 0px 0px 1px;
  }
 `;
 const ProjectNameLabel = styled.label`
@ -210,8 +210,8 @@ const CreateButton = styled.button`

  &:hover {
    color: #fff;
-    background: ${(props) => props.theme.colors.primary};
-    border-color: ${(props) => props.theme.colors.primary};
+    background: ${props => props.theme.colors.primary};
+    border-color: ${props => props.theme.colors.primary};
  }
 `;
 type NewProjectProps = {
@ -224,7 +224,7 @@ type NewProjectProps = {
 const NewProject: React.FC<NewProjectProps> = ({ initialTeamID, teams, onClose, onCreateProject }) => {
  const [projectName, setProjectName] = useState('');
  const [team, setTeam] = useState<null | string>(initialTeamID);
-  const options = [{ label: 'No team', value: 'no-team' }, ...teams.map((t) => ({ label: t.name, value: t.id }))];
+  const options = [{ label: 'No team', value: 'no-team' }, ...teams.map(t => ({ label: t.name, value: t.id }))];
  return (
    <Overlay>
      <Content>
@ -234,7 +234,7 @@ const NewProject: React.FC<NewProjectProps> = ({ initialTeamID, teams, onClose,
              onClose();
            }}
          >
-            <ArrowLeft width={16} height={16} color="#c2c6dc" />
+            <ArrowLeft color="#c2c6dc" />
          </HeaderLeft>
          <HeaderRight
            onClick={() => {
@ -263,7 +263,7 @@ const NewProject: React.FC<NewProjectProps> = ({ initialTeamID, teams, onClose,
                  onChange={(e: any) => {
                    setTeam(e.value);
                  }}
-                  value={options.find((d) => d.value === team)}
+                  value={options.find(d => d.value === team)}
                  styles={colourStyles}
                  classNamePrefix="teamSelect"
                  options={options}
--- a/frontend/src/shared/components/NotifcationPopup/index.tsx
+++ b/frontend/src/shared/components/NotifcationPopup/index.tsx
@ -1,37 +1,8 @@
-import React, { useRef, useState } from 'react';
-import styled, { css } from 'styled-components';
+import React from 'react';
+import styled from 'styled-components';
 import TimeAgo from 'react-timeago';
-import { Link } from 'react-router-dom';
-import { mixin } from 'shared/utils/styles';
-import {
-  useNotificationMarkAllReadMutation,
-  useNotificationsQuery,
-  NotificationFilter,
-  ActionType,
-  useNotificationAddedSubscription,
-  useNotificationToggleReadMutation,
-} from 'shared/generated/graphql';
-import dayjs from 'dayjs';

-import { Popup, usePopup } from 'shared/components/PopupMenu';
-import { Bell, CheckCircleOutline, Circle, Ellipsis, UserCircle } from 'shared/icons';
-import produce from 'immer';
-import { useLocalStorage } from 'shared/hooks/useStateWithLocalStorage';
-import localStorage from 'shared/utils/localStorage';
-import useOnOutsideClick from 'shared/hooks/onOutsideClick';
-
-function getFilterMessage(filter: NotificationFilter) {
-  switch (filter) {
-    case NotificationFilter.Unread:
-      return 'no unread';
-    case NotificationFilter.Assigned:
-      return 'no assigned';
-    case NotificationFilter.Mentioned:
-      return 'no mentioned';
-    default:
-      return 'no';
-  }
-}
+import { Popup } from 'shared/components/PopupMenu';

 const ItemWrapper = styled.div`
  cursor: pointer;
@ -66,7 +37,7 @@ const ItemTextContainer = styled.div`
 const ItemTextTitle = styled.span`
  font-weight: 500;
  display: block;
-  color: ${(props) => props.theme.colors.primary};
+  color: ${props => props.theme.colors.primary};
  font-size: 14px;
 `;
 const ItemTextDesc = styled.span`
@ -101,578 +72,38 @@ export const NotificationItem: React.FC<NotificationItemProps> = ({ title, descr
 };

 const NotificationHeader = styled.div`
-  padding: 20px 28px;
+  padding: 0.75rem;
  text-align: center;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
-  background: ${(props) => props.theme.colors.primary};
+  background: ${props => props.theme.colors.primary};
 `;

 const NotificationHeaderTitle = styled.span`
  font-size: 14px;
-  color: ${(props) => props.theme.colors.text.secondary};
+  color: ${props => props.theme.colors.text.secondary};
 `;

-const EmptyMessage = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 14px;
-  height: 448px;
-`;
-
-const EmptyMessageLabel = styled.span`
-  margin-bottom: 80px;
-`;
-const Notifications = styled.div`
-  border-right: 1px solid rgba(0, 0, 0, 0.1);
-  border-left: 1px solid rgba(0, 0, 0, 0.1);
-  border-top: 1px solid rgba(0, 0, 0, 0.1);
-  border-color: #414561;
-  height: 448px;
-  overflow-y: scroll;
-  user-select: none;
-`;
 const NotificationFooter = styled.div`
  cursor: pointer;
  padding: 0.5rem;
  text-align: center;
-  color: ${(props) => props.theme.colors.primary};
+  color: ${props => props.theme.colors.primary};
  &:hover {
-    background: ${(props) => props.theme.colors.bg.primary};
+    background: ${props => props.theme.colors.bg.primary};
  }
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
-
-  border-right: 1px solid rgba(0, 0, 0, 0.1);
-  border-left: 1px solid rgba(0, 0, 0, 0.1);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-  border-color: #414561;
 `;

-const NotificationTabs = styled.div`
-  align-items: flex-end;
-  align-self: stretch;
-  display: flex;
-  flex: 1 0 auto;
-  justify-content: flex-start;
-  max-width: 100%;
-  padding-top: 4px;
-  border-right: 1px solid rgba(0, 0, 0, 0.1);
-  border-left: 1px solid rgba(0, 0, 0, 0.1);
-  border-color: #414561;
-`;
-
-const NotificationTab = styled.div<{ active: boolean }>`
-  font-size: 80%;
-  color: ${(props) => props.theme.colors.text.primary};
-  font-size: 15px;
-  cursor: pointer;
-  display: flex;
-  user-select: none;
-
-  justify-content: center;
-  line-height: normal;
-  min-width: 1px;
-  transition-duration: 0.2s;
-  transition-property: box-shadow, color;
-  white-space: nowrap;
-  flex: 0 1 auto;
-  padding: 12px 16px;
-
-  &:first-child {
-    margin-left: 12px;
-  }
-
-  &:hover {
-    box-shadow: inset 0 -2px ${(props) => props.theme.colors.text.secondary};
-    color: ${(props) => props.theme.colors.text.secondary};
-  }
-  &:not(:last-child) {
-    margin-right: 12px;
-  }
-
-  ${(props) =>
-    props.active &&
-    css`
-      box-shadow: inset 0 -2px ${props.theme.colors.secondary};
-      color: ${props.theme.colors.secondary};
-      &:hover {
-        box-shadow: inset 0 -2px ${props.theme.colors.secondary};
-        color: ${props.theme.colors.secondary};
-      }
-    `}
-`;
-
-const NotificationLink = styled(Link)`
-  display: flex;
-  text-decoration: none;
-  padding: 16px 8px;
-  width: 100%;
-`;
-
-const NotificationControls = styled.div`
-  width: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-around;
-  visibility: hidden;
-  padding: 4px;
-`;
-
-const NotificationButtons = styled.div`
-  display: flex;
-  align-self: flex-end;
-  align-items: center;
-  margin-top: auto;
-  margin-bottom: 6px;
-`;
-
-const NotificationButton = styled.div`
-  padding: 4px 15px;
-  cursor: pointer;
-  &:hover svg {
-    fill: rgb(216, 93, 216);
-    stroke: rgb(216, 93, 216);
-  }
-`;
-
-const NotificationWrapper = styled.li<{ read: boolean }>`
-  min-height: 80px;
-  display: flex;
-  font-size: 14px;
-  transition: background-color 0.1s ease-in-out;
-  margin: 2px 8px;
-  border-radius: 8px;
-  justify-content: space-between;
-  position: relative;
-  &:hover {
-    background: ${(props) => mixin.rgba(props.theme.colors.primary, 0.5)};
-  }
-  &:hover ${NotificationLink} {
-    color: #fff;
-  }
-  &:hover ${NotificationControls} {
-    visibility: visible;
-  }
-  ${(props) =>
-    !props.read &&
-    css`
-      background: ${(props) => mixin.rgba(props.theme.colors.primary, 0.5)};
-      &:hover {
-        background: ${(props) => mixin.rgba(props.theme.colors.primary, 0.6)};
-      }
-    `}
-`;
-
-const NotificationContentFooter = styled.div`
-  margin-top: 10px;
-  display: flex;
-  align-items: center;
-  color: ${(props) => props.theme.colors.text.primary};
-`;
-
-const NotificationCausedBy = styled.div`
-  height: 48px;
-  width: 48px;
-  min-height: 48px;
-  min-width: 48px;
-`;
-const NotificationCausedByInitials = styled.div`
-  position: relative;
-  display: flex;
-  align-items: center;
-  text: #fff;
-  font-size: 18px;
-  justify-content: center;
-  border-radius: 50%;
-  flex-shrink: 0;
-  height: 100%;
-  width: 100%;
-  border: none;
-  background: #7367f0;
-`;
-
-const NotificationCausedByImage = styled.img`
-  position: relative;
-  display: flex;
-  border-radius: 50%;
-  flex-shrink: 0;
-  height: 100%;
-  width: 100%;
-  border: none;
-  background: #7367f0;
-`;
-
-const NotificationContent = styled.div`
-  display: flex;
-  overflow: hidden;
-  flex-direction: column;
-  margin-left: 16px;
-`;
-
-const NotificationContentHeader = styled.div`
-  font-weight: bold;
-  font-size: 14px;
-  color: #fff;
-
-  svg {
-    margin-left: 8px;
-    fill: rgb(216, 93, 216);
-    stroke: rgb(216, 93, 216);
-  }
-`;
-
-const NotificationBody = styled.div`
-  display: flex;
-  align-items: center;
-  color: #fff;
-  svg {
-    fill: rgb(216, 93, 216);
-    stroke: rgb(216, 93, 216);
-  }
-`;
-
-const NotificationPrefix = styled.span`
-  color: rgb(216, 93, 216);
-  margin: 0 4px;
-`;
-
-const NotificationSeparator = styled.span`
-  margin: 0 6px;
-`;
-
-type NotificationProps = {
-  causedBy?: { fullname: string; username: string; id: string } | null;
-  createdAt: string;
-  read: boolean;
-  data: Array<{ key: string; value: string }>;
-  actionType: ActionType;
-  onToggleRead: () => void;
-};
-
-const Notification: React.FC<NotificationProps> = ({ causedBy, createdAt, data, actionType, read, onToggleRead }) => {
-  const prefix: any = [];
-  const { hidePopup } = usePopup();
-  const dataMap = new Map<string, string>();
-  data.forEach((d) => dataMap.set(d.key, d.value));
-  let link = '#';
-  switch (actionType) {
-    case ActionType.TaskAssigned:
-      prefix.push(<UserCircle key="profile" width={14} height={16} />);
-      prefix.push(
-        <NotificationPrefix key="prefix">
-          <span style={{ fontWeight: 'bold' }}>{causedBy ? causedBy.fullname : 'Removed user'}</span>
-        </NotificationPrefix>,
-      );
-      prefix.push(<span key="content">assigned you to the task &quote;{dataMap.get('TaskName')}&quote;</span>);
-      link = `/p/${dataMap.get('ProjectID')}/board/c/${dataMap.get('TaskID')}`;
-      break;
-    case ActionType.DueDateReminder:
-      prefix.push(<Bell key="profile" width={14} height={16} />);
-      prefix.push(<NotificationPrefix key="prefix">{dataMap.get('TaskName')}</NotificationPrefix>);
-      const now = dayjs();
-      if (dayjs(dataMap.get('DueDate')).isBefore(dayjs())) {
-        prefix.push(
-          <span key="content">is due {dayjs.duration(now.diff(dayjs(dataMap.get('DueAt')))).humanize(true)}</span>,
-        );
-      } else {
-        prefix.push(
-          <span key="content">
-            has passed the due date {dayjs.duration(dayjs(dataMap.get('DueAt')).diff(now)).humanize(true)}
-          </span>,
-        );
-      }
-      link = `/p/${dataMap.get('ProjectID')}/board/c/${dataMap.get('TaskID')}`;
-      break;
-
-    default:
-      throw new Error('unknown action type');
-  }
-
-  return (
-    <NotificationWrapper read={read}>
-      <NotificationLink to={link} onClick={hidePopup}>
-        <NotificationCausedBy>
-          <NotificationCausedByInitials>
-            {causedBy
-              ? causedBy.fullname
-                  .split(' ')
-                  .map((n) => n[0])
-                  .join('.')
-              : 'RU'}
-          </NotificationCausedByInitials>
-        </NotificationCausedBy>
-        <NotificationContent>
-          <NotificationBody>{prefix}</NotificationBody>
-          <NotificationContentFooter>
-            <span>{dayjs.duration(dayjs(createdAt).diff(dayjs())).humanize(true)}</span>
-            <NotificationSeparator>•</NotificationSeparator>
-            <span>{dataMap.get('ProjectName')}</span>
-          </NotificationContentFooter>
-        </NotificationContent>
-      </NotificationLink>
-      <NotificationControls>
-        <NotificationButtons>
-          <NotificationButton onClick={() => onToggleRead()}>
-            {read ? <Circle width={18} height={18} /> : <CheckCircleOutline width={18} height={18} />}
-          </NotificationButton>
-        </NotificationButtons>
-      </NotificationControls>
-    </NotificationWrapper>
-  );
-};
-
-const PopupContent = styled.div`
-  display: flex;
-  flex-direction: column;
-
-  border-right: 1px solid rgba(0, 0, 0, 0.1);
-  border-left: 1px solid rgba(0, 0, 0, 0.1);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-  padding-bottom: 10px;
-  border-color: #414561;
-`;
-
-const tabs = [
-  { label: 'All', key: NotificationFilter.All },
-  { label: 'Unread', key: NotificationFilter.Unread },
-  { label: 'I was mentioned', key: NotificationFilter.Mentioned },
-  { label: 'Assigned to me', key: NotificationFilter.Assigned },
-];
-
-type NotificationEntry = {
-  id: string;
-  read: boolean;
-  readAt?: string | undefined | null;
-  notification: {
-    id: string;
-    data: Array<{ key: string; value: string }>;
-    actionType: ActionType;
-    causedBy?: { id: string; username: string; fullname: string } | undefined | null;
-    createdAt: string;
-  };
-};
-type NotificationPopupProps = {
-  onToggleRead: () => void;
-};
-
-const NotificationHeaderMenu = styled.div`
-  position: absolute;
-  right: 16px;
-  top: 16px;
-`;
-
-const NotificationHeaderMenuIcon = styled.div`
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  svg {
-    fill: #fff;
-    stroke: #fff;
-  }
-`;
-
-const NotificationHeaderMenuContent = styled.div<{ show: boolean }>`
-  min-width: 130px;
-  position: absolute;
-  top: 16px;
-  background: #fff;
-  border-radius: 6px;
-  height: 50px;
-  visibility: ${(props) => (props.show ? 'visible' : 'hidden')};
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  border-color: #414561;
-  background: #262c49;
-  padding: 6px;
-  display: flex;
-  flex-direction: column;
-`;
-
-const NotificationHeaderMenuButton = styled.div`
-  position: relative;
-  padding-left: 4px;
-  padding-right: 4px;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  font-size: 14px;
-  &:hover {
-    background: ${(props) => props.theme.colors.primary};
-  }
-`;
-const NotificationPopup: React.FC<NotificationPopupProps> = ({ onToggleRead }) => {
-  const [filter, setFilter] = useLocalStorage<NotificationFilter>(
-    localStorage.NOTIFICATIONS_FILTER,
-    NotificationFilter.Unread,
-  );
-  const [data, setData] = useState<{ nodes: Array<NotificationEntry>; hasNextPage: boolean; cursor: string }>({
-    nodes: [],
-    hasNextPage: false,
-    cursor: '',
-  });
-  const [toggleRead] = useNotificationToggleReadMutation({
-    onCompleted: (data) => {
-      setData((prev) => {
-        return produce(prev, (draft) => {
-          const idx = draft.nodes.findIndex((n) => n.id === data.notificationToggleRead.id);
-          if (idx !== -1) {
-            draft.nodes[idx].read = data.notificationToggleRead.read;
-            draft.nodes[idx].readAt = data.notificationToggleRead.readAt;
-          }
-        });
-      });
-      onToggleRead();
-    },
-  });
-  const { fetchMore } = useNotificationsQuery({
-    variables: { limit: 8, filter },
-    fetchPolicy: 'network-only',
-    onCompleted: (d) => {
-      setData((prev) => ({
-        hasNextPage: d.notified.pageInfo.hasNextPage,
-        cursor: d.notified.pageInfo.endCursor ?? '',
-        nodes: [...prev.nodes, ...d.notified.notified],
-      }));
-    },
-  });
-  useNotificationAddedSubscription({
-    onSubscriptionData: (d) => {
-      setData((n) => {
-        if (d.subscriptionData.data) {
-          return {
-            ...n,
-            nodes: [d.subscriptionData.data.notificationAdded, ...n.nodes],
-          };
-        }
-        return n;
-      });
-    },
-  });
-  const [toggleAllRead] = useNotificationMarkAllReadMutation();
-
-  const [showHeaderMenu, setShowHeaderMenu] = useState(false);
-
-  const $menuContent = useRef<HTMLDivElement>(null);
-  useOnOutsideClick($menuContent, true, () => setShowHeaderMenu(false), null);
+const NotificationPopup: React.FC = ({ children }) => {
  return (
    <Popup title={null} tab={0} borders={false} padding={false}>
-      <PopupContent>
-        <NotificationHeader>
-          <NotificationHeaderTitle>Notifications</NotificationHeaderTitle>
-          <NotificationHeaderMenu>
-            <NotificationHeaderMenuIcon onClick={() => setShowHeaderMenu(true)}>
-              <Ellipsis size={18} color="#fff" vertical={false} />
-              <NotificationHeaderMenuContent ref={$menuContent} show={showHeaderMenu}>
-                <NotificationHeaderMenuButton
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    setShowHeaderMenu(() => false);
-                    toggleAllRead().then(() => {
-                      setData((prev) =>
-                        produce(prev, (draftData) => {
-                          draftData.nodes = draftData.nodes.map((node) => ({ ...node, read: true }));
-                        }),
-                      );
-                      onToggleRead();
-                    });
-                  }}
-                >
-                  Mark all as read
-                </NotificationHeaderMenuButton>
-              </NotificationHeaderMenuContent>
-            </NotificationHeaderMenuIcon>
-          </NotificationHeaderMenu>
-        </NotificationHeader>
-        <NotificationTabs>
-          {tabs.map((tab) => (
-            <NotificationTab
-              key={tab.key}
-              onClick={() => {
-                if (filter !== tab.key) {
-                  setData({ cursor: '', hasNextPage: false, nodes: [] });
-                  setFilter(tab.key);
-                }
-              }}
-              active={tab.key === filter}
-            >
-              {tab.label}
-            </NotificationTab>
-          ))}
-        </NotificationTabs>
-        {data.nodes.length !== 0 ? (
-          <Notifications
-            onScroll={({ currentTarget }) => {
-              if (Math.ceil(currentTarget.scrollTop + currentTarget.clientHeight) >= currentTarget.scrollHeight) {
-                if (data.hasNextPage) {
-                  console.log(`fetching more = ${data.cursor} - ${data.hasNextPage}`);
-                  fetchMore({
-                    variables: {
-                      limit: 8,
-                      filter,
-                      cursor: data.cursor,
-                    },
-                    updateQuery: (prev, { fetchMoreResult }) => {
-                      if (!fetchMoreResult) return prev;
-                      setData((d) => ({
-                        cursor: fetchMoreResult.notified.pageInfo.endCursor ?? '',
-                        hasNextPage: fetchMoreResult.notified.pageInfo.hasNextPage,
-                        nodes: [...d.nodes, ...fetchMoreResult.notified.notified],
-                      }));
-                      return {
-                        ...prev,
-                        notified: {
-                          ...prev.notified,
-                          pageInfo: {
-                            ...fetchMoreResult.notified.pageInfo,
-                          },
-                          notified: [...prev.notified.notified, ...fetchMoreResult.notified.notified],
-                        },
-                      };
-                    },
-                  });
-                }
-              }
-            }}
-          >
-            {data.nodes.map((n) => (
-              <Notification
-                key={n.id}
-                read={n.read}
-                actionType={n.notification.actionType}
-                data={n.notification.data}
-                createdAt={n.notification.createdAt}
-                causedBy={n.notification.causedBy}
-                onToggleRead={() =>
-                  toggleRead({
-                    variables: { notifiedID: n.id },
-                    optimisticResponse: {
-                      __typename: 'Mutation',
-                      notificationToggleRead: {
-                        __typename: 'Notified',
-                        id: n.id,
-                        read: !n.read,
-                        readAt: new Date().toUTCString(),
-                      },
-                    },
-                  }).then(() => {
-                    onToggleRead();
-                  })
-                }
-              />
-            ))}
-          </Notifications>
-        ) : (
-          <EmptyMessage>
-            <EmptyMessageLabel>You have {getFilterMessage(filter)} notifications</EmptyMessageLabel>
-          </EmptyMessage>
-        )}
-      </PopupContent>
+      <NotificationHeader>
+        <NotificationHeaderTitle>Notifications</NotificationHeaderTitle>
+      </NotificationHeader>
+      <ul>{children}</ul>
+      <NotificationFooter>View All</NotificationFooter>
    </Popup>
  );
 };
--- a/frontend/src/shared/components/PopupMenu/index.tsx
+++ b/frontend/src/shared/components/PopupMenu/index.tsx
@ -218,7 +218,7 @@ export const PopupProvider: React.FC = ({ children }) => {

  const setTab = (newTab: number, options?: PopupOptions) => {
    setState((prevState: PopupState) =>
-      produce(prevState, (draftState) => {
+      produce(prevState, draftState => {
        draftState.previousTab = currentState.currentTab;
        draftState.currentTab = newTab;
        if (options) {
@ -296,7 +296,7 @@ const PopupMenu: React.FC<Props> = ({ width, title, top, left, onClose, noHeader
      <Wrapper padding borders>
        {onPrevious && (
          <PreviousButton onClick={onPrevious}>
-            <AngleLeft size={16} color="#c2c6dc" />
+            <AngleLeft color="#c2c6dc" />
          </PreviousButton>
        )}
        {noHeader ? (
@ -332,7 +332,7 @@ export const Popup: React.FC<PopupProps> = ({ borders = true, padding = true, ti
              setTab(0);
            }}
          >
-            <AngleLeft size={16} color="#c2c6dc" />
+            <AngleLeft color="#c2c6dc" />
          </PreviousButton>
        )}
        {title && (
--- a/frontend/src/shared/components/ProfileIcon/index.tsx
+++ b/frontend/src/shared/components/ProfileIcon/index.tsx
@ -2,15 +2,15 @@ import React, { useRef } from 'react';
 import styled from 'styled-components';

 export const Container = styled.div<{ size: number | string; bgColor: string | null; backgroundURL: string | null }>`
-  width: ${(props) => props.size}px;
-  height: ${(props) => props.size}px;
+  width: ${props => props.size}px;
+  height: ${props => props.size}px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
-  background: ${(props) => (props.backgroundURL ? `url(${props.backgroundURL})` : props.bgColor)};
+  background: ${props => (props.backgroundURL ? `url(${props.backgroundURL})` : props.bgColor)};
  background-position: center;
  background-size: contain;
 `;
@ -22,10 +22,6 @@ type ProfileIconProps = {
 };

 const ProfileIcon: React.FC<ProfileIconProps> = ({ user, onProfileClick, size }) => {
-  let realSize = size;
-  if (size === null) {
-    realSize = 28;
-  }
  const $profileRef = useRef<HTMLDivElement>(null);
  return (
    <Container
@ -33,7 +29,7 @@ const ProfileIcon: React.FC<ProfileIconProps> = ({ user, onProfileClick, size })
      onClick={() => {
        onProfileClick($profileRef, user);
      }}
-      size={realSize}
+      size={size}
      backgroundURL={user.profileIcon.url ?? null}
      bgColor={user.profileIcon.bgColor ?? null}
    >
@ -42,4 +38,8 @@ const ProfileIcon: React.FC<ProfileIconProps> = ({ user, onProfileClick, size })
  );
 };

+ProfileIcon.defaultProps = {
+  size: 28,
+};
+
 export default ProfileIcon;
--- a/frontend/src/shared/components/ProjectSettings/index.tsx
+++ b/frontend/src/shared/components/ProjectSettings/index.tsx
@ -38,17 +38,12 @@ export const ListSeparator = styled.hr`
 `;

 type Props = {
-  publicOn: null | string;
  onDeleteProject: () => void;
-  onToggleProjectVisible: (visible: boolean) => void;
 };
-const ProjectSettings: React.FC<Props> = ({ publicOn, onDeleteProject, onToggleProjectVisible }) => {
+const ProjectSettings: React.FC<Props> = ({ onDeleteProject }) => {
  return (
    <>
      <ListActionsWrapper>
-        <ListActionItemWrapper onClick={() => onToggleProjectVisible(publicOn === null)}>
-          <ListActionItem>{`Make ${publicOn === null ? 'public' : 'private'}`}</ListActionItem>
-        </ListActionItemWrapper>
        <ListActionItemWrapper onClick={() => onDeleteProject()}>
          <ListActionItem>Delete Project</ListActionItem>
        </ListActionItemWrapper>
@ -132,18 +127,5 @@ const DeleteConfirm: React.FC<DeleteConfirmProps> = ({ description, deletedItems
  );
 };

-type PublicConfirmProps = {
-  onConfirm: () => void;
-};
-
-const PublicConfirm: React.FC<PublicConfirmProps> = ({ onConfirm }) => {
-  return (
-    <ConfirmWrapper>
-      <ConfirmDescription>Public projects can be accessed by anyone with a link to the project.</ConfirmDescription>
-      <ConfirmDeleteButton onClick={() => onConfirm()}>Make public</ConfirmDeleteButton>
-    </ConfirmWrapper>
-  );
-};
-
-export { DeleteConfirm, PublicConfirm };
+export { DeleteConfirm };
 export default ProjectSettings;
--- a/frontend/src/shared/components/Register/index.tsx
+++ b/frontend/src/shared/components/Register/index.tsx
@ -26,12 +26,7 @@ const INITIALS_PATTERN = /[a-zA-Z]{2,3}/i;

 const Register = ({ onSubmit, registered = false }: RegisterProps) => {
  const [isComplete, setComplete] = useState(true);
-  const {
-    register,
-    handleSubmit,
-    formState: { errors },
-    setError,
-  } = useForm<RegisterFormData>();
+  const { register, handleSubmit, errors, setError } = useForm<RegisterFormData>();
  const loginSubmit = (data: RegisterFormData) => {
    setComplete(false);
    onSubmit(data, setComplete, setError);
@ -60,7 +55,12 @@ const Register = ({ onSubmit, registered = false }: RegisterProps) => {
                <Form onSubmit={handleSubmit(loginSubmit)}>
                  <FormLabel htmlFor="fullname">
                    Full name
-                    <FormTextInput type="text" {...register('fullname', { required: 'Full name is required' })} />
+                    <FormTextInput
+                      type="text"
+                      id="fullname"
+                      name="fullname"
+                      ref={register({ required: 'Full name is required' })}
+                    />
                    <FormIcon>
                      <User width={20} height={20} />
                    </FormIcon>
@ -68,7 +68,12 @@ const Register = ({ onSubmit, registered = false }: RegisterProps) => {
                  {errors.username && <FormError>{errors.username.message}</FormError>}
                  <FormLabel htmlFor="username">
                    Username
-                    <FormTextInput type="text" {...register('username', { required: 'Username is required' })} />
+                    <FormTextInput
+                      type="text"
+                      id="username"
+                      name="username"
+                      ref={register({ required: 'Username is required' })}
+                    />
                    <FormIcon>
                      <User width={20} height={20} />
                    </FormIcon>
@ -78,7 +83,9 @@ const Register = ({ onSubmit, registered = false }: RegisterProps) => {
                    Email
                    <FormTextInput
                      type="text"
-                      {...register('email', {
+                      id="email"
+                      name="email"
+                      ref={register({
                        required: 'Email is required',
                        pattern: { value: EMAIL_PATTERN, message: 'Must be a valid email' },
                      })}
@ -92,7 +99,9 @@ const Register = ({ onSubmit, registered = false }: RegisterProps) => {
                    Initials
                    <FormTextInput
                      type="text"
-                      {...register('initials', {
+                      id="initials"
+                      name="initials"
+                      ref={register({
                        required: 'Initials is required',
                        pattern: {
                          value: INITIALS_PATTERN,
@ -107,7 +116,12 @@ const Register = ({ onSubmit, registered = false }: RegisterProps) => {
                  {errors.initials && <FormError>{errors.initials.message}</FormError>}
                  <FormLabel htmlFor="password">
                    Password
-                    <FormTextInput type="password" {...register('password', { required: 'Password is required' })} />
+                    <FormTextInput
+                      type="password"
+                      id="password"
+                      name="password"
+                      ref={register({ required: 'Password is required' })}
+                    />
                    <FormIcon>
                      <Lock width={20} height={20} />
                    </FormIcon>
@ -117,7 +131,9 @@ const Register = ({ onSubmit, registered = false }: RegisterProps) => {
                    Password (Confirm)
                    <FormTextInput
                      type="password"
-                      {...register('password_confirm', { required: 'Password (confirm) is required' })}
+                      id="password_confirm"
+                      name="password_confirm"
+                      ref={register({ required: 'Password (confirm) is required' })}
                    />
                    <FormIcon>
                      <Lock width={20} height={20} />
--- a/frontend/src/shared/components/Settings/index.tsx
+++ b/frontend/src/shared/components/Settings/index.tsx
@ -1,23 +1,23 @@
 import React, { useState, useRef } from 'react';
 import styled from 'styled-components';
 import { User } from 'shared/icons';
+import Input from 'shared/components/Input';
 import Button from 'shared/components/Button';
 import { useForm } from 'react-hook-form';
-import ControlledInput from 'shared/components/ControlledInput';

-const PasswordInput = styled(ControlledInput)`
+const PasswordInput = styled(Input)`
  margin-top: 30px;
  margin-bottom: 0;
 `;

-const UserInfoInput = styled(ControlledInput)`
+const UserInfoInput = styled(Input)`
  margin-top: 30px;
  margin-bottom: 0;
 `;

 const FormError = styled.span`
  font-size: 12px;
-  color: ${(props) => props.theme.colors.warning};
+  color: ${props => props.theme.colors.warning};
 `;

 const ProfileContainer = styled.div`
@ -42,7 +42,7 @@ const AvatarMask = styled.div<{ background: string }>`
  width: 100%;
  height: 100%;
  overflow: hidden;
-  background: ${(props) => props.background};
+  background: ${props => props.background};
  border-radius: 50%;
  display: flex;
  align-items: center;
@ -152,12 +152,12 @@ const TabNavItemButton = styled.button<{ active: boolean }>`
  width: 100%;
  position: relative;

-  color: ${(props) => (props.active ? `${props.theme.colors.primary}` : '#c2c6dc')};
+  color: ${props => (props.active ? `${props.theme.colors.primary}` : '#c2c6dc')};
  &:hover {
-    color: ${(props) => props.theme.colors.primary};
+    color: ${props => props.theme.colors.primary};
  }
  &:hover svg {
-    fill: ${(props) => props.theme.colors.primary};
+    fill: ${props => props.theme.colors.primary};
  }
 `;

@ -173,14 +173,10 @@ const TabNavLine = styled.span<{ top: number }>`
  width: 2px;
  height: 48px;
  transform: scaleX(1);
-  top: ${(props) => props.top}px;
+  top: ${props => props.top}px;

-  background: linear-gradient(
-    30deg,
-    ${(props) => props.theme.colors.primary},
-    ${(props) => props.theme.colors.primary}
-  );
-  box-shadow: 0 0 8px 0 ${(props) => props.theme.colors.primary};
+  background: linear-gradient(30deg, ${props => props.theme.colors.primary}, ${props => props.theme.colors.primary});
+  box-shadow: 0 0 8px 0 ${props => props.theme.colors.primary};
  display: block;
  position: absolute;
  transition: all 0.2s ease;
@ -271,36 +267,36 @@ type ResetPasswordTabProps = {
 };
 const ResetPasswordTab: React.FC<ResetPasswordTabProps> = ({ onResetPassword }) => {
  const [active, setActive] = useState(true);
-  const {
-    register,
-    handleSubmit,
-    formState: { errors },
-    setError,
-    reset,
-  } = useForm<{ password: string; passwordConfirm: string }>();
+  const { register, handleSubmit, errors, setError, reset } = useForm<{ password: string; password_confirm: string }>();
  const done = () => {
    reset();
    setActive(true);
  };
  return (
    <form
-      onSubmit={handleSubmit((data) => {
-        if (data.password !== data.passwordConfirm) {
+      onSubmit={handleSubmit(data => {
+        if (data.password !== data.password_confirm) {
          setError('password', { message: 'Passwords must match!', type: 'error' });
-          setError('passwordConfirm', { message: 'Passwords must match!', type: 'error' });
+          setError('password_confirm', { message: 'Passwords must match!', type: 'error' });
        } else {
          onResetPassword(data.password, done);
        }
      })}
    >
-      <PasswordInput width="100%" {...register('password', { required: 'Password is required' })} label="Password" />
+      <PasswordInput
+        width="100%"
+        ref={register({ required: 'Password is required' })}
+        label="Password"
+        name="password"
+      />
      {errors.password && <FormError>{errors.password.message}</FormError>}
      <PasswordInput
        width="100%"
-        {...register('passwordConfirm', { required: 'Password is required' })}
+        ref={register({ required: 'Password is required' })}
        label="Password (confirm)"
+        name="password_confirm"
      />
-      {errors.passwordConfirm && <FormError>{errors.passwordConfirm.message}</FormError>}
+      {errors.password_confirm && <FormError>{errors.password_confirm.message}</FormError>}
      <SettingActions>
        <SaveButton disabled={!active} type="submit">
          Save Change
@ -311,7 +307,7 @@ const ResetPasswordTab: React.FC<ResetPasswordTabProps> = ({ onResetPassword })
 };

 type UserInfoData = {
-  fullName: string;
+  full_name: string;
  bio: string;
  initials: string;
  email: string;
@ -333,11 +329,7 @@ const UserInfoTab: React.FC<UserInfoTabProps> = ({
  onChangeUserInfo,
 }) => {
  const [active, setActive] = useState(true);
-  const {
-    register,
-    handleSubmit,
-    formState: { errors },
-  } = useForm<UserInfoData>();
+  const { register, handleSubmit, errors } = useForm<UserInfoData>();
  const done = () => {
    setActive(true);
  };
@ -349,24 +341,26 @@ const UserInfoTab: React.FC<UserInfoTabProps> = ({
        profile={profile.profileIcon}
      />
      <form
-        onSubmit={handleSubmit((data) => {
+        onSubmit={handleSubmit(data => {
          setActive(false);
          onChangeUserInfo(data, done);
        })}
      >
        <UserInfoInput
-          {...register('fullName', { required: 'Full name is required' })}
+          ref={register({ required: 'Full name is required' })}
+          name="full_name"
          defaultValue={profile.fullName}
          width="100%"
          label="Name"
        />
-        {errors.fullName && <FormError>{errors.fullName.message}</FormError>}
+        {errors.full_name && <FormError>{errors.full_name.message}</FormError>}
        <UserInfoInput
          defaultValue={profile.profileIcon && profile.profileIcon.initials ? profile.profileIcon.initials : ''}
-          {...register('initials', {
+          ref={register({
            required: 'Initials is required',
            pattern: { value: INITIALS_PATTERN, message: 'Intials must be between two to four characters' },
          })}
+          name="initials"
          width="100%"
          label="Initials "
        />
@ -374,7 +368,8 @@ const UserInfoTab: React.FC<UserInfoTabProps> = ({
        <UserInfoInput disabled defaultValue={profile.username ?? ''} width="100%" label="Username " />
        <UserInfoInput
          width="100%"
-          {...register('email', {
+          name="email"
+          ref={register({
            required: 'Email is required',
            pattern: { value: EMAIL_PATTERN, message: 'Must be a valid email' },
          })}
@ -382,7 +377,7 @@ const UserInfoTab: React.FC<UserInfoTabProps> = ({
          label="Email"
        />
        {errors.email && <FormError>{errors.email.message}</FormError>}
-        <UserInfoInput width="100%" {...register('bio')} defaultValue={profile.bio ?? ''} label="Bio" />
+        <UserInfoInput width="100%" name="bio" ref={register()} defaultValue={profile.bio ?? ''} label="Bio" />
        {errors.bio && <FormError>{errors.bio.message}</FormError>}
        <SettingActions>
          <SaveButton disabled={!active} type="submit">
--- a/frontend/src/shared/components/TaskDetails/ActivityMessage.tsx
+++ b/frontend/src/shared/components/TaskDetails/ActivityMessage.tsx
@ -9,21 +9,13 @@ type ActivityMessageProps = {
 };

 function getVariable(data: Array<TaskActivityData>, name: string) {
-  const target = data.find((d) => d.name === name);
+  const target = data.find(d => d.name === name);
  return target ? target.value : null;
 }

-function getVariableBool(data: Array<TaskActivityData>, name: string, defaultValue = false) {
-  const target = data.find((d) => d.name === name);
-  return target ? target.value === 'true' : defaultValue;
-}
-
-function renderDate(timestamp: string | null, hasTime: boolean) {
+function renderDate(timestamp: string | null) {
  if (timestamp) {
-    if (hasTime) {
-      return dayjs(timestamp).format('MMM D [at] h:mm A');
-    }
-    return dayjs(timestamp).format('MMM D');
+    return dayjs(timestamp).format('MMM D [at] h:mm A');
  }
  return null;
 }
@ -38,19 +30,13 @@ const ActivityMessage: React.FC<ActivityMessageProps> = ({ type, data }) => {
      message = `moved this task from ${getVariable(data, 'PrevTaskGroup')} to ${getVariable(data, 'CurTaskGroup')}`;
      break;
    case ActivityType.TaskDueDateAdded:
-      message = `set this task to be due ${renderDate(
-        getVariable(data, 'DueDate'),
-        getVariableBool(data, 'HasTime', true),
-      )}`;
+      message = `set this task to be due ${renderDate(getVariable(data, 'DueDate'))}`;
      break;
    case ActivityType.TaskDueDateRemoved:
      message = `removed the due date from this task`;
      break;
    case ActivityType.TaskDueDateChanged:
-      message = `changed the due date of this task to ${renderDate(
-        getVariable(data, 'CurDueDate'),
-        getVariableBool(data, 'HasTime', true),
-      )}`;
+      message = `changed the due date of this task to ${renderDate(getVariable(data, 'CurDueDate'))}`;
      break;
    case ActivityType.TaskMarkedComplete:
      message = `marked this task complete`;
--- a/frontend/src/shared/components/TaskDetails/CommentCreator.tsx
+++ b/frontend/src/shared/components/TaskDetails/CommentCreator.tsx
@ -69,7 +69,7 @@ const CommentCreator: React.FC<CommentCreatorProps> = ({
      )}
      <CommentEditorContainer>
        <CommentTextArea
-          $showCommentActions={showCommentActions}
+          showCommentActions={showCommentActions}
          placeholder="Write a comment..."
          ref={$comment}
          disabled={disabled}
--- a/frontend/src/shared/components/TaskDetails/Loading.tsx
+++ b/frontend/src/shared/components/TaskDetails/Loading.tsx
@ -13,7 +13,6 @@ import {
  Smile,
 } from 'shared/icons';
 import { toArray } from 'react-emoji-render';
-import { useCurrentUser } from 'App/context';
 import DOMPurify from 'dompurify';
 import TaskAssignee from 'shared/components/TaskAssignee';
 import useOnOutsideClick from 'shared/hooks/onOutsideClick';
@ -82,40 +81,39 @@ import {
  ActivityItemComment,
 } from './Styles';

-const TaskDetailsLoading: React.FC = () => {
-  const { user } = useCurrentUser();
+type TaskDetailsProps = {};
+
+const TaskDetailsLoading: React.FC<TaskDetailsProps> = () => {
  return (
    <Container>
      <LeftSidebar>
        <LeftSidebarContent>
          <LeftSidebarSection>
            <SidebarTitle>TASK GROUP</SidebarTitle>
-            <SidebarButton $loading>
+            <SidebarButton loading>
              <SidebarSkeleton />
            </SidebarButton>
            <DueDateTitle>DUE DATE</DueDateTitle>
-            <SidebarButton $loading>
+            <SidebarButton loading>
              <SidebarSkeleton />
            </SidebarButton>
          </LeftSidebarSection>
          <AssignedUsersSection>
            <DueDateTitle>MEMBERS</DueDateTitle>
-            <SidebarButton $loading>
+            <SidebarButton loading>
              <SidebarSkeleton />
            </SidebarButton>
          </AssignedUsersSection>
-          {user && (
-            <ExtraActionsSection>
-              <DueDateTitle>ACTIONS</DueDateTitle>
-              <ActionButton disabled icon={<Tags width={12} height={12} />}>
-                Labels
-              </ActionButton>
-              <ActionButton disabled icon={<CheckSquareOutline width={12} height={12} />}>
-                Checklist
-              </ActionButton>
-              <ActionButton disabled>Cover</ActionButton>
-            </ExtraActionsSection>
-          )}
+          <ExtraActionsSection>
+            <DueDateTitle>ACTIONS</DueDateTitle>
+            <ActionButton disabled icon={<Tags width={12} height={12} />}>
+              Labels
+            </ActionButton>
+            <ActionButton disabled icon={<CheckSquareOutline width={12} height={12} />}>
+              Checklist
+            </ActionButton>
+            <ActionButton disabled>Cover</ActionButton>
+          </ExtraActionsSection>
        </LeftSidebarContent>
      </LeftSidebar>
      <ContentContainer>
@ -127,25 +125,23 @@ const TaskDetailsLoading: React.FC = () => {
                <span>Mark complete</span>
              </MarkCompleteButton>
            </HeaderLeft>
-            {user && (
-              <HeaderRight>
-                <HeaderActionIcon>
-                  <Paperclip width={16} height={16} />
-                </HeaderActionIcon>
-                <HeaderActionIcon>
-                  <Clone width={16} height={16} />
-                </HeaderActionIcon>
-                <HeaderActionIcon>
-                  <Share width={16} height={16} />
-                </HeaderActionIcon>
-                <HeaderActionIcon>
-                  <Trash width={16} height={16} />
-                </HeaderActionIcon>
-              </HeaderRight>
-            )}
+            <HeaderRight>
+              <HeaderActionIcon>
+                <Paperclip width={16} height={16} />
+              </HeaderActionIcon>
+              <HeaderActionIcon>
+                <Clone width={16} height={16} />
+              </HeaderActionIcon>
+              <HeaderActionIcon>
+                <Share width={16} height={16} />
+              </HeaderActionIcon>
+              <HeaderActionIcon>
+                <Trash width={16} height={16} />
+              </HeaderActionIcon>
+            </HeaderRight>
          </HeaderInnerContainer>
-          <TaskDetailsTitleWrapper $loading>
-            <TaskDetailsTitle value="" disabled $loading />
+          <TaskDetailsTitleWrapper loading>
+            <TaskDetailsTitle value="" disabled loading />
          </TaskDetailsTitleWrapper>
        </HeaderContainer>
        <InnerContentContainer>
@ -155,11 +151,9 @@ const TaskDetailsLoading: React.FC = () => {
          </TabBarSection>
          <ActivitySection />
        </InnerContentContainer>
-        {user && (
-          <CommentContainer>
-            <CommentCreator disabled onCreateComment={() => null} onMemberProfile={() => null} />
-          </CommentContainer>
-        )}
+        <CommentContainer>
+          <CommentCreator disabled onCreateComment={() => null} onMemberProfile={() => null} />
+        </CommentContainer>
      </ContentContainer>
    </Container>
  );
--- a/frontend/src/shared/components/TaskDetails/Styles.ts
+++ b/frontend/src/shared/components/TaskDetails/Styles.ts
@ -4,7 +4,6 @@ import { mixin } from 'shared/utils/styles';
 import Button from 'shared/components/Button';
 import TaskAssignee from 'shared/components/TaskAssignee';
 import theme from 'App/ThemeStyles';
-import { Checkmark } from 'shared/icons';

 export const Container = styled.div`
  display: flex;
@ -23,14 +22,14 @@ export const MarkCompleteButton = styled.button<{ invert: boolean; disabled?: bo
  position: relative;
  border: none;
  cursor: pointer;
-  border-radius: ${(props) => props.theme.borderRadius.alternate};
+  border-radius: ${props => props.theme.borderRadius.alternate};
  display: flex;
  align-items: center;
  background: transparent;
  & span {
    margin-left: 4px;
  }
-  ${(props) =>
+  ${props =>
    props.invert
      ? css`
          background: ${props.theme.colors.success};
@ -64,7 +63,7 @@ export const MarkCompleteButton = styled.button<{ invert: boolean; disabled?: bo
            color: ${props.theme.colors.success};
          }
        `}
-  ${(props) =>
+  ${props =>
    props.invert &&
    css`
      opacity: 0.6;
@ -90,7 +89,7 @@ export const SidebarTitle = styled.div`
  font-size: 12px;
  min-height: 24px;
  margin-left: 8px;
-  color: ${(props) => mixin.rgba(props.theme.colors.text.primary, 0.75)};
+  color: ${props => mixin.rgba(props.theme.colors.text.primary, 0.75)};
  padding-top: 4px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
@ -109,15 +108,15 @@ export const skeletonKeyframes = keyframes`
  }
  `;

-export const SidebarButton = styled.div<{ $loading?: boolean }>`
+export const SidebarButton = styled.div<{ loading?: boolean }>`
  font-size: 14px;
-  color: ${(props) => props.theme.colors.text.primary};
+  color: ${props => props.theme.colors.text.primary};
  min-height: 32px;
  width: 100%;
  border-radius: 6px;

-  ${(props) =>
-    props.$loading
+  ${props =>
+    props.loading
      ? css`
          background: ${props.theme.colors.bg.primary};
        `
@ -179,15 +178,15 @@ export const HeaderLeft = styled.div`
  justify-content: flex-start;
 `;

-export const TaskDetailsTitleWrapper = styled.div<{ $loading?: boolean }>`
+export const TaskDetailsTitleWrapper = styled.div<{ loading?: boolean }>`
  width: 100%;
  margin: 8px 0 4px 0;
  display: flex;
  border-radius: 6px;
-  ${(props) => props.$loading && `background: ${props.theme.colors.bg.primary};`}
+  ${props => props.loading && `background: ${props.theme.colors.bg.primary};`}
 `;

-export const TaskDetailsTitle = styled(TextareaAutosize)<{ $loading?: boolean }>`
+export const TaskDetailsTitle = styled(TextareaAutosize)<{ loading?: boolean }>`
  padding: 9px 8px 7px 8px;
  border-color: transparent;
  border-radius: 6px;
@ -199,11 +198,8 @@ export const TaskDetailsTitle = styled(TextareaAutosize)<{ $loading?: boolean }>
  font-weight: 700;
  background: none;

-  &:disabled {
-    opacity: 1;
-  }
-  ${(props) =>
-    props.$loading
+  ${props =>
+    props.loading
      ? css`
          background-image: linear-gradient(90deg, ${defaultBaseColor}, ${defaultHighlightColor}, ${defaultBaseColor});
          background-size: 200px 100%;
@ -211,7 +207,7 @@ export const TaskDetailsTitle = styled(TextareaAutosize)<{ $loading?: boolean }>
          animation: ${skeletonKeyframes} 1.2s ease-in-out infinite;
        `
      : css`
-          &:not(:disabled):hover {
+          &:hover {
            border-color: #414561;
            border-width: 1px;
            border-style: solid;
@ -227,7 +223,7 @@ export const DueDateTitle = styled.div`
  font-size: 12px;
  min-height: 24px;
  margin-left: 8px;
-  color: ${(props) => mixin.rgba(props.theme.colors.text.primary, 0.75)};
+  color: ${props => mixin.rgba(props.theme.colors.text.primary, 0.75)};
  padding-top: 8px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
@ -238,7 +234,7 @@ export const AssignedUsersSection = styled.div`
  padding-right: 32px;
  padding-top: 24px;
  padding-bottom: 24px;
-  border-bottom: 1px solid ${(props) => props.theme.colors.alternate};
+  border-bottom: 1px solid ${props => props.theme.colors.alternate};
  display: flex;
  flex-direction: column;
 `;
@ -256,10 +252,10 @@ export const AssignUserIcon = styled.div`
  justify-content: center;
  align-items: center;
  &:hover {
-    border: 1px solid ${(props) => mixin.rgba(props.theme.colors.text.secondary, 0.75)};
+    border: 1px solid ${props => mixin.rgba(props.theme.colors.text.secondary, 0.75)};
  }
  &:hover svg {
-    fill: ${(props) => mixin.rgba(props.theme.colors.text.secondary, 0.75)};
+    fill: ${props => mixin.rgba(props.theme.colors.text.secondary, 0.75)};
  }
 `;

@ -274,17 +270,17 @@ export const AssignUsersButton = styled.div`
  align-items: center;
  border: 1px solid transparent;
  &:hover {
-    border: 1px solid ${(props) => mixin.darken(props.theme.colors.alternate, 0.15)};
+    border: 1px solid ${props => mixin.darken(props.theme.colors.alternate, 0.15)};
  }
  &:hover ${AssignUserIcon} {
-    border: 1px solid ${(props) => props.theme.colors.alternate};
+    border: 1px solid ${props => props.theme.colors.alternate};
  }
 `;

 export const AssignUserLabel = styled.span`
  flex: 1 1 auto;
  line-height: 15px;
-  color: ${(props) => mixin.rgba(props.theme.colors.text.primary, 0.75)};
+  color: ${props => mixin.rgba(props.theme.colors.text.primary, 0.75)};
 `;

 export const ExtraActionsSection = styled.div`
@ -296,7 +292,7 @@ export const ExtraActionsSection = styled.div`
 `;

 export const ActionButtonsTitle = styled.h3`
-  color: ${(props) => props.theme.colors.text.primary};
+  color: ${props => props.theme.colors.text.primary};
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
@ -306,17 +302,16 @@ export const ActionButton = styled(Button)`
  margin-top: 8px;
  margin-left: -10px;
  padding: 8px 16px;
-  background: ${(props) => mixin.rgba(props.theme.colors.bg.primary, 0.5)};
+  background: ${props => mixin.rgba(props.theme.colors.bg.primary, 0.5)};
  text-align: left;
  transition: transform 0.2s ease;
  & span {
-    position: unset;
    justify-content: flex-start;
  }
  &:hover {
    box-shadow: none;
    transform: translateX(4px);
-    background: ${(props) => mixin.rgba(props.theme.colors.bg.primary, 0.75)};
+    background: ${props => mixin.rgba(props.theme.colors.bg.primary, 0.75)};
  }
 `;

@ -335,10 +330,10 @@ export const HeaderActionIcon = styled.div`

  cursor: pointer;
  svg {
-    fill: ${(props) => mixin.rgba(props.theme.colors.text.primary, 0.75)};
+    fill: ${props => mixin.rgba(props.theme.colors.text.primary, 0.75)};
  }
  &:hover svg {
-    fill: ${(props) => mixin.rgba(props.theme.colors.primary, 0.75)});
+    fill: ${props => mixin.rgba(props.theme.colors.primary, 0.75)});
  }
 `;

@ -395,7 +390,7 @@ export const MetaDetail = styled.div`
 `;

 export const MetaDetailTitle = styled.h3`
-  color: ${(props) => props.theme.colors.text.primary};
+  color: ${props => props.theme.colors.text.primary};
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
@ -414,7 +409,7 @@ export const MetaDetailContent = styled.div`
 `;
 export const TaskDetailsAddLabel = styled.div`
  border-radius: 3px;
-  background: ${(props) => mixin.darken(props.theme.colors.bg.secondary, 0.15)};
+  background: ${props => mixin.darken(props.theme.colors.bg.secondary, 0.15)};
  cursor: pointer;
  &:hover {
    opacity: 0.8;
@ -429,7 +424,7 @@ export const TaskDetailsAddLabelIcon = styled.div`
  align-items: center;
  justify-content: center;
  border-radius: 3px;
-  background: ${(props) => mixin.darken(props.theme.colors.bg.secondary, 0.15)};
+  background: ${props => mixin.darken(props.theme.colors.bg.secondary, 0.15)};
  cursor: pointer;
  &:hover {
    opacity: 0.8;
@ -445,7 +440,7 @@ export const TaskDetailLabel = styled.div<{ color: string }>`
  &:hover {
    opacity: 0.8;
  }
-  background-color: ${(props) => props.color};
+  background-color: ${props => props.color};
  color: #fff;
  cursor: pointer;
  display: flex;
@ -498,22 +493,17 @@ export const TabBarSection = styled.div`
  margin-top: 2px;
  padding-left: 23px;
  display: flex;
-  justify-content: space-between;
  text-transform: uppercase;
  min-height: 35px;
  border-bottom: 1px solid #414561;
 `;

 export const TabBarItem = styled.div`
-  box-shadow: inset 0 -2px ${(props) => props.theme.colors.primary};
+  box-shadow: inset 0 -2px ${props => props.theme.colors.primary};
  padding: 12px 7px 14px 7px;
  margin-bottom: -1px;
  margin-right: 36px;
-  color: ${(props) => props.theme.colors.text.primary};
-`;
-
-export const TabBarButton = styled(Button)`
-  padding: 6px 12px;
+  color: ${props => props.theme.colors.text.primary};
 `;

 export const CommentContainer = styled.div`
@ -544,19 +534,19 @@ export const CommentProfile = styled(TaskAssignee)`
  align-items: normal;
 `;

-export const CommentTextArea = styled(TextareaAutosize)<{ $showCommentActions: boolean }>`
+export const CommentTextArea = styled(TextareaAutosize)<{ showCommentActions: boolean }>`
  width: 100%;
  line-height: 28px;
  padding: 4px 6px;
  border-radius: 6px;
-  color: ${(props) => props.theme.colors.text.primary};
+  color: ${props => props.theme.colors.text.primary};
  background: #1f243e;
  border: none;
  transition: max-height 200ms, height 200ms, min-height 200ms;
  min-height: 36px;
  max-height: 36px;
-  ${(props) =>
-    props.$showCommentActions
+  ${props =>
+    props.showCommentActions
      ? css`
          min-height: 80px;
          max-height: none;
@ -568,7 +558,7 @@ export const CommentTextArea = styled(TextareaAutosize)<{ $showCommentActions: b
 `;

 export const CommentEditorActions = styled.div<{ visible: boolean }>`
-  display: ${(props) => (props.visible ? 'flex' : 'none')};
+  display: ${props => (props.visible ? 'flex' : 'none')};
  align-items: center;
  padding: 5px 5px 5px 9px;
  border-top: 1px solid #414561;
@ -601,7 +591,7 @@ export const ActivityItemCommentAction = styled.div`
  justify-content: center;
  cursor: pointer;
  svg {
-    fill: ${(props) => props.theme.colors.text.primary} !important;
+    fill: ${props => props.theme.colors.text.primary} !important;
  }
 `;

@ -621,7 +611,7 @@ export const ActivityItemHeader = styled.div<{ editable?: boolean }>`
  display: flex;
  flex-direction: column;
  padding-left: 8px;
-  ${(props) => props.editable && 'width: 100%;'}
+  ${props => props.editable && 'width: 100%;'}
 `;
 export const ActivityItemHeaderUser = styled(TaskAssignee)`
  align-items: start;
@ -630,7 +620,7 @@ export const ActivityItemHeaderUser = styled(TaskAssignee)`
 export const ActivityItemHeaderTitle = styled.div`
  display: flex;
  align-items: center;
-  color: ${(props) => props.theme.colors.text.primary};
+  color: ${props => props.theme.colors.text.primary};
  padding-bottom: 2px;
 `;

@ -641,8 +631,8 @@ export const ActivityItemHeaderTitleName = styled.span`

 export const ActivityItemTimestamp = styled.span<{ margin: number }>`
  font-size: 12px;
-  color: ${(props) => mixin.rgba(props.theme.colors.text.primary, 0.65)};
-  margin-left: ${(props) => props.margin}px;
+  color: ${props => mixin.rgba(props.theme.colors.text.primary, 0.65)};
+  margin-left: ${props => props.margin}px;
 `;

 export const ActivityItemDetails = styled.div`
@ -656,11 +646,11 @@ export const ActivityItemComment = styled.div<{ editable: boolean }>`
  border-radius: 3px;
  ${mixin.boxShadowCard}
  position: relative;
-  color: ${(props) => props.theme.colors.text.primary};
+  color: ${props => props.theme.colors.text.primary};
  padding: 8px 12px;
  margin: 4px 0;
-  background-color: ${(props) => mixin.darken(props.theme.colors.alternate, 0.1)};
-  ${(props) => props.editable && 'width: 100%;'}
+  background-color: ${props => mixin.darken(props.theme.colors.alternate, 0.1)};
+  ${props => props.editable && 'width: 100%;'}

  & span {
    display: inline-flex;
@ -690,7 +680,7 @@ export const ActivityItemCommentActions = styled.div`

 export const ActivityItemLog = styled.span`
  margin-left: 2px;
-  color: ${(props) => props.theme.colors.text.primary};
+  color: ${props => props.theme.colors.text.primary};
 `;

 export const ViewRawButton = styled.button`
@ -701,9 +691,9 @@ export const ViewRawButton = styled.button`
  right: 4px;
  bottom: -24px;
  cursor: pointer;
-  color: ${(props) => mixin.rgba(props.theme.colors.text.primary, 0.25)};
+  color: ${props => mixin.rgba(props.theme.colors.text.primary, 0.25)};
  &:hover {
-    color: ${(props) => props.theme.colors.text.primary};
+    color: ${props => props.theme.colors.text.primary};
  }
 `;

@ -719,8 +709,3 @@ export const TaskDetailsEditor = styled(TextareaAutosize)`
  outline: none;
  border: none;
 `;
-
-export const WatchedCheckmark = styled(Checkmark)`
-  position: absolute;
-  right: 16px;
-`;
--- a/frontend/src/shared/components/TaskDetails/index.tsx
+++ b/frontend/src/shared/components/TaskDetails/index.tsx
@ -1,5 +1,4 @@
 import React, { useState, useRef } from 'react';
-import { useCurrentUser } from 'App/context';
 import {
  Plus,
  User,
@ -12,7 +11,6 @@ import {
  CheckSquareOutline,
  At,
  Smile,
-  Eye,
 } from 'shared/icons';
 import { toArray } from 'react-emoji-render';
 import DOMPurify from 'dompurify';
@ -80,12 +78,10 @@ import {
  ActivityItemHeaderTitle,
  ActivityItemHeaderTitleName,
  ActivityItemComment,
-  TabBarButton,
-  WatchedCheckmark,
 } from './Styles';
 import Checklist, { ChecklistItem, ChecklistItems } from '../Checklist';
 import onDragEnd from './onDragEnd';
-import plugin from './remark';
+import { plugin as em } from './remark';
 import ActivityMessage from './ActivityMessage';

 const parseEmojis = (value: string) => {
@ -139,7 +135,7 @@ const StreamComment: React.FC<StreamCommentProps> = ({
                  onCreateComment={onUpdateComment}
                />
              ) : (
-                <ReactMarkdown skipHtml plugins={[plugin]}>
+                <ReactMarkdown escapeHtml={false} plugins={[em]}>
                  {DOMPurify.sanitize(comment.message, { FORBID_TAGS: ['style', 'img'] })}
                </ReactMarkdown>
              )}
@ -239,7 +235,6 @@ type TaskDetailsProps = {
  onToggleChecklistItem: (itemID: string, complete: boolean) => void;
  onOpenAddMemberPopup: (task: Task, $targetRef: React.RefObject<HTMLElement>) => void;
  onOpenAddLabelPopup: (task: Task, $targetRef: React.RefObject<HTMLElement>) => void;
-  onToggleTaskWatch: (task: Task, watched: boolean) => void;
  onOpenDueDatePopop: (task: Task, $targetRef: React.RefObject<HTMLElement>) => void;
  onOpenAddChecklistPopup: (task: Task, $targetRef: React.RefObject<HTMLElement>) => void;
  onCreateComment: (task: Task, message: string) => void;
@ -261,7 +256,6 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
  task,
  editableComment = null,
  onDeleteChecklist,
-  onToggleTaskWatch,
  onTaskNameChange,
  onCommentShowActions,
  onOpenAddChecklistPopup,
@ -283,7 +277,6 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
  onToggleChecklistItem,
  onMemberProfile,
 }) => {
-  const { user } = useCurrentUser();
  const [taskName, setTaskName] = useState(task.name);
  const [editTaskDescription, setEditTaskDescription] = useState(() => {
    if (task.description) {
@ -305,7 +298,7 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
  const activityStream: Array<{ id: string; data: { time: string; type: 'comment' | 'activity' } }> = [];

  if (task.activity) {
-    task.activity.forEach((activity) => {
+    task.activity.forEach(activity => {
      activityStream.push({
        id: activity.id,
        data: {
@ -317,7 +310,7 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
  }

  if (task.comments) {
-    task.comments.forEach((comment) => {
+    task.comments.forEach(comment => {
      activityStream.push({
        id: comment.id,
        data: {
@ -345,14 +338,12 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
            <SidebarButton
              ref={$dueDateBtn}
              onClick={() => {
-                if (user) {
-                  onOpenDueDatePopop(task, $dueDateBtn);
-                }
+                onOpenDueDatePopop(task, $dueDateBtn);
              }}
            >
-              {task.dueDate.at ? (
+              {task.dueDate ? (
                <SidebarButtonText>
-                  {dayjs(task.dueDate.at).format(task.hasTime ? 'MMM D [at] h:mm A' : 'MMMM D')}
+                  {dayjs(task.dueDate).format(task.hasTime ? 'MMM D [at] h:mm A' : 'MMMM D')}
                </SidebarButtonText>
              ) : (
                <SidebarButtonText>No due date</SidebarButtonText>
@ -363,24 +354,20 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
            <DueDateTitle>MEMBERS</DueDateTitle>
            {task.assigned && task.assigned.length !== 0 ? (
              <MemberList>
-                {task.assigned.map((m) => (
+                {task.assigned.map(m => (
                  <TaskMember
                    key={m.id}
                    member={m}
                    size={32}
-                    onMemberProfile={($target) => {
-                      if (user) {
-                        onMemberProfile($target, m.id);
-                      }
+                    onMemberProfile={$target => {
+                      onMemberProfile($target, m.id);
                    }}
                  />
                ))}
                <AssignUserIcon
                  ref={$addMemberBtn}
                  onClick={() => {
-                    if (user) {
-                      onOpenAddMemberPopup(task, $addMemberBtn);
-                    }
+                    onOpenAddMemberPopup(task, $addMemberBtn);
                  }}
                >
                  <Plus width={16} height={16} />
@ -390,9 +377,7 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
              <AssignUsersButton
                ref={$noMemberBtn}
                onClick={() => {
-                  if (user) {
-                    onOpenAddMemberPopup(task, $noMemberBtn);
-                  }
+                  onOpenAddMemberPopup(task, $noMemberBtn);
                }}
              >
                <AssignUserIcon>
@ -402,36 +387,26 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
              </AssignUsersButton>
            )}
          </AssignedUsersSection>
-          {user && (
-            <ExtraActionsSection>
-              <DueDateTitle>ACTIONS</DueDateTitle>
-              <ActionButton
-                onClick={($target) => {
-                  onOpenAddLabelPopup(task, $target);
-                }}
-                icon={<Tags width={12} height={12} />}
-              >
-                Labels
-              </ActionButton>
-              <ActionButton
-                onClick={($target) => {
-                  onOpenAddChecklistPopup(task, $target);
-                }}
-                icon={<CheckSquareOutline width={12} height={12} />}
-              >
-                Checklist
-              </ActionButton>
-              <ActionButton>Cover</ActionButton>
-              <ActionButton
-                onClick={() => {
-                  onToggleTaskWatch(task, !task.watched);
-                }}
-                icon={<Eye width={12} height={12} />}
-              >
-                Watch {task.watched && <WatchedCheckmark width={18} height={18} />}
-              </ActionButton>
-            </ExtraActionsSection>
-          )}
+          <ExtraActionsSection>
+            <DueDateTitle>ACTIONS</DueDateTitle>
+            <ActionButton
+              onClick={$target => {
+                onOpenAddLabelPopup(task, $target);
+              }}
+              icon={<Tags width={12} height={12} />}
+            >
+              Labels
+            </ActionButton>
+            <ActionButton
+              onClick={$target => {
+                onOpenAddChecklistPopup(task, $target);
+              }}
+              icon={<CheckSquareOutline width={12} height={12} />}
+            >
+              Checklist
+            </ActionButton>
+            <ActionButton>Cover</ActionButton>
+          </ExtraActionsSection>
        </LeftSidebarContent>
      </LeftSidebar>
      <ContentContainer>
@ -439,41 +414,35 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
          <HeaderInnerContainer>
            <HeaderLeft>
              <MarkCompleteButton
-                disabled={user === null}
                invert={task.complete ?? false}
                onClick={() => {
-                  if (user) {
-                    onToggleTaskComplete(task);
-                  }
+                  onToggleTaskComplete(task);
                }}
              >
                <Checkmark width={8} height={8} />
                <span>{task.complete ? 'Completed' : 'Mark complete'}</span>
              </MarkCompleteButton>
            </HeaderLeft>
-            {user && (
-              <HeaderRight>
-                <HeaderActionIcon>
-                  <Paperclip width={16} height={16} />
-                </HeaderActionIcon>
-                <HeaderActionIcon>
-                  <Clone width={16} height={16} />
-                </HeaderActionIcon>
-                <HeaderActionIcon>
-                  <Share width={16} height={16} />
-                </HeaderActionIcon>
-                <HeaderActionIcon onClick={() => onDeleteTask(task)}>
-                  <Trash width={16} height={16} />
-                </HeaderActionIcon>
-              </HeaderRight>
-            )}
+            <HeaderRight>
+              <HeaderActionIcon>
+                <Paperclip width={16} height={16} />
+              </HeaderActionIcon>
+              <HeaderActionIcon>
+                <Clone width={16} height={16} />
+              </HeaderActionIcon>
+              <HeaderActionIcon>
+                <Share width={16} height={16} />
+              </HeaderActionIcon>
+              <HeaderActionIcon onClick={() => onDeleteTask(task)}>
+                <Trash width={16} height={16} />
+              </HeaderActionIcon>
+            </HeaderRight>
          </HeaderInnerContainer>
          <TaskDetailsTitleWrapper>
            <TaskDetailsTitle
              value={taskName}
              ref={$detailsTitle}
-              disabled={user === null}
-              onKeyDown={(e) => {
+              onKeyDown={e => {
                if (e.keyCode === 13) {
                  e.preventDefault();
                  if ($detailsTitle && $detailsTitle.current) {
@ -481,7 +450,7 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
                  }
                }
              }}
-              onChange={(e) => {
+              onChange={e => {
                setTaskName(e.currentTarget.value);
              }}
              onBlur={() => {
@ -494,12 +463,12 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
          <Labels>
            {task.labels.length !== 0 && (
              <MetaDetailContent>
-                {task.labels.map((label) => {
+                {task.labels.map(label => {
                  return (
                    <TaskLabelItem
                      key={label.projectLabel.id}
                      label={label}
-                      onClick={($target) => {
+                      onClick={$target => {
                        onOpenAddLabelPopup(task, $target);
                      }}
                    />
@ -518,7 +487,7 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
              <TaskDetailsEditor value={taskDescriptionRef.current} />
            ) : (
              <EditorContainer
-                onClick={(e) => {
+                onClick={e => {
                  if (!editTaskDescription) {
                    setEditTaskDescription(true);
                  }
@ -526,10 +495,10 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
              >
                <Editor
                  defaultValue={task.description ?? ''}
-                  readOnly={user === null || !editTaskDescription}
                  theme={dark}
+                  readOnly={!editTaskDescription}
                  autoFocus
-                  onChange={(value) => {
+                  onChange={value => {
                    setSaveTimeout(() => {
                      clearTimeout(saveTimeout);
                      return setTimeout(saveDescription, 2000);
@ -544,9 +513,9 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
            <ViewRawButton onClick={() => setShowRaw(!showRaw)}>{showRaw ? 'Show editor' : 'Show raw'}</ViewRawButton>
          </DescriptionContainer>
          <ChecklistSection>
-            <DragDropContext onDragEnd={(result) => onDragEnd(result, task, onChecklistDrop, onChecklistItemDrop)}>
+            <DragDropContext onDragEnd={result => onDragEnd(result, task, onChecklistDrop, onChecklistItemDrop)}>
              <Droppable direction="vertical" type="checklist" droppableId="root">
-                {(dropProvided) => (
+                {dropProvided => (
                  <ChecklistContainer {...dropProvided.droppableProps} ref={dropProvided.innerRef}>
                    {task.checklists &&
                      task.checklists
@ -554,7 +523,7 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
                        .sort((a, b) => a.position - b.position)
                        .map((checklist, idx) => (
                          <Draggable key={checklist.id} draggableId={checklist.id} index={idx}>
-                            {(provided) => (
+                            {provided => (
                              <Checklist
                                ref={provided.innerRef}
                                wrapperProps={provided.draggableProps}
@ -564,10 +533,10 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
                                checklistID={checklist.id}
                                items={checklist.items}
                                onDeleteChecklist={onDeleteChecklist}
-                                onChangeName={(newName) => onChangeChecklistName(checklist.id, newName)}
+                                onChangeName={newName => onChangeChecklistName(checklist.id, newName)}
                                onToggleItem={onToggleChecklistItem}
                                onDeleteItem={onDeleteItem}
-                                onAddItem={(n) => {
+                                onAddItem={n => {
                                  if (task.checklists) {
                                    let position = 65535;
                                    const [lastItem] = checklist.items
@ -582,7 +551,7 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
                                onChangeItemName={onChangeItemName}
                              >
                                <Droppable direction="vertical" type="checklistItem" droppableId={checklist.id}>
-                                  {(checklistDrop) => (
+                                  {checklistDrop => (
                                    <>
                                      <ChecklistItems ref={checklistDrop.innerRef} {...checklistDrop.droppableProps}>
                                        {checklist.items
@ -590,7 +559,7 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
                                          .sort((a, b) => a.position - b.position)
                                          .map((item, itemIdx) => (
                                            <Draggable key={item.id} draggableId={item.id} index={itemIdx}>
-                                              {(itemDrop) => (
+                                              {itemDrop => (
                                                <ChecklistItem
                                                  key={item.id}
                                                  itemID={item.id}
@ -628,34 +597,30 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
            <TabBarItem>Activity</TabBarItem>
          </TabBarSection>
          <ActivitySection>
-            {activityStream.map((stream) =>
+            {activityStream.map(stream =>
              stream.data.type === 'comment' ? (
                <StreamComment
-                  key={stream.id}
                  onExtraActions={onCommentShowActions}
                  onCancelCommentEdit={onCancelCommentEdit}
-                  onUpdateComment={(message) => onUpdateComment(stream.id, message)}
+                  onUpdateComment={message => onUpdateComment(stream.id, message)}
                  editable={stream.id === editableComment}
-                  comment={task.comments && task.comments.find((comment) => comment.id === stream.id)}
+                  comment={task.comments && task.comments.find(comment => comment.id === stream.id)}
                />
              ) : (
-                <StreamActivity
-                  key={stream.id}
-                  activity={task.activity && task.activity.find((activity) => activity.id === stream.id)}
-                />
+                <StreamActivity activity={task.activity && task.activity.find(activity => activity.id === stream.id)} />
              ),
            )}
          </ActivitySection>
        </InnerContentContainer>
-        {me && (
-          <CommentContainer>
+        <CommentContainer>
+          {me && (
            <CommentCreator
              me={me}
-              onCreateComment={(message) => onCreateComment(task, message)}
+              onCreateComment={message => onCreateComment(task, message)}
              onMemberProfile={onMemberProfile}
            />
-          </CommentContainer>
-        )}
+          )}
+        </CommentContainer>
      </ContentContainer>
    </Container>
  );
--- a/frontend/src/shared/components/TaskDetails/remark.js
+++ b/frontend/src/shared/components/TaskDetails/remark.js
@ -1,6 +1,6 @@
-import { visit } from 'unist-util-visit';
+import visit from 'unist-util-visit';
 import emoji from 'node-emoji';
-import { emoticon } from 'emoticon';
+import emoticon from 'emoticon';
 import { Emoji } from 'emoji-mart';
 import React from 'react';

@ -15,31 +15,34 @@ const DEFAULT_SETTINGS = {
 };

 function plugin(options) {
-  const settings = { ...DEFAULT_SETTINGS, ...options };
+  const settings = Object.assign({}, DEFAULT_SETTINGS, options);
  const pad = !!settings.padSpaceAfter;
  const emoticonEnable = !!settings.emoticon;

  function getEmojiByShortCode(match) {
    // find emoji by shortcode - full match or with-out last char as it could be from text e.g. :-),
-    const iconFull = emoticon.find((e) => e.emoticons.includes(match)); // full match
-    const iconPart = emoticon.find((e) => e.emoticons.includes(match.slice(0, -1))); // second search pattern
+    const iconFull = emoticon.find(e => e.emoticons.includes(match)); // full match
+    const iconPart = emoticon.find(e => e.emoticons.includes(match.slice(0, -1))); // second search pattern
    const trimmedChar = iconPart ? match.slice(-1) : '';
    const addPad = pad ? ' ' : '';
-    const icon = iconFull ? iconFull.emoji + addPad : iconPart && iconPart.emoji + addPad + trimmedChar;
+    let icon = iconFull ? iconFull.emoji + addPad : iconPart && iconPart.emoji + addPad + trimmedChar;
    return icon || match;
  }

  function getEmoji(match) {
+    console.log(match);
    const got = emoji.get(match);
    if (pad && got !== match) {
-      return `${got} `;
+      return got + ' ';
    }

+    console.log(got);
    return ReactDOMServer.renderToStaticMarkup(<Emoji set="google" emoji={match} size={16} />);
  }

  function transformer(tree) {
-    visit(tree, 'paragraph', function (node) {
+    visit(tree, 'paragraph', function(node) {
+      console.log(tree);
      // node.value = node.value.replace(RE_EMOJI, getEmoji);
      // jnode.type = 'html';
      // jnode.tagName = 'div';
@ -55,10 +58,11 @@ function plugin(options) {
      if (emoticonEnable) {
        // node.value = node.value.replace(RE_SHORT, getEmojiByShortCode);
      }
+      console.log(node);
    });
  }

  return transformer;
 }

-export default plugin;
+export { plugin };
--- a/frontend/src/shared/components/TopNavbar/LoggedOut.tsx
+++ b/frontend/src/shared/components/TopNavbar/LoggedOut.tsx
@ -1,69 +0,0 @@
-import React, { useRef, useState, useEffect } from 'react';
-import { Home, Star, Bell, AngleDown, BarChart, CheckCircle, ListUnordered } from 'shared/icons';
-import { Link } from 'react-router-dom';
-import { RoleCode } from 'shared/generated/graphql';
-import * as S from './Styles';
-
-export type MenuItem = {
-  name: string;
-  link: string;
-};
-
-type NavBarProps = {
-  menuType?: Array<MenuItem> | null;
-  name: string | null;
-  match: string;
-};
-
-const NavBar: React.FC<NavBarProps> = ({ menuType, name, match }) => {
-  return (
-    <S.NavbarWrapper>
-      <S.NavbarHeader>
-        <S.ProjectActions>
-          <S.ProjectSwitch>
-            <S.ProjectSwitchInner>
-              <S.TaskcafeLogo innerColor="#9f46e4" outerColor="#000" width={32} height={32} />
-            </S.ProjectSwitchInner>
-          </S.ProjectSwitch>
-          <S.ProjectInfo>
-            <S.ProjectMeta>{name && <S.ProjectName>{name}</S.ProjectName>}</S.ProjectMeta>
-            {name && (
-              <S.ProjectTabs>
-                {menuType &&
-                  menuType.map((menu, idx) => {
-                    return (
-                      <S.ProjectTab
-                        key={menu.name}
-                        to={menu.link}
-                        exact
-                        onClick={() => {
-                          // TODO
-                        }}
-                      >
-                        {menu.name}
-                      </S.ProjectTab>
-                    );
-                  })}
-              </S.ProjectTabs>
-            )}
-          </S.ProjectInfo>
-        </S.ProjectActions>
-        <S.LogoContainer to="/">
-          <S.TaskcafeTitle>Taskcafé</S.TaskcafeTitle>
-        </S.LogoContainer>
-        <S.GlobalActions>
-          <Link
-            to={{
-              pathname: '/login',
-              state: { redirect: match },
-            }}
-          >
-            <S.SignIn>Sign In</S.SignIn>
-          </Link>
-        </S.GlobalActions>
-      </S.NavbarHeader>
-    </S.NavbarWrapper>
-  );
-};
-
-export default NavBar;
--- a/frontend/src/shared/components/TopNavbar/Styles.ts
+++ b/frontend/src/shared/components/TopNavbar/Styles.ts
@ -6,11 +6,11 @@ import { NavLink, Link } from 'react-router-dom';
 import TaskAssignee from 'shared/components/TaskAssignee';

 export const ProjectMember = styled(TaskAssignee)<{ zIndex: number }>`
-  z-index: ${(props) => props.zIndex};
+  z-index: ${props => props.zIndex};
  position: relative;

-  box-shadow: 0 0 0 2px ${(props) => props.theme.colors.bg.primary},
-    inset 0 0 0 1px ${(props) => mixin.rgba(props.theme.colors.bg.primary, 0.07)};
+  box-shadow: 0 0 0 2px ${props => props.theme.colors.bg.primary},
+    inset 0 0 0 1px ${props => mixin.rgba(props.theme.colors.bg.primary, 0.07)};
 `;

 export const NavbarWrapper = styled.div`
@ -27,9 +27,9 @@ export const NavbarHeader = styled.header`
  display: flex;
  align-items: center;
  justify-content: space-between;
-  background: ${(props) => props.theme.colors.bg.primary};
+  background: ${props => props.theme.colors.bg.primary};
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.05);
-  border-bottom: 1px solid ${(props) => mixin.rgba(props.theme.colors.alternate, 0.65)};
+  border-bottom: 1px solid ${props => mixin.rgba(props.theme.colors.alternate, 0.65)};
 `;
 export const Breadcrumbs = styled.div`
  color: rgb(94, 108, 132);
@ -59,7 +59,7 @@ export const ProjectSwitchInner = styled.div`
  flex-direction: column;
  justify-content: center;

-  background-color: ${(props) => props.theme.colors.primary};
+  background-color: ${props => props.theme.colors.primary};
 `;

 export const ProjectSwitch = styled.div`
@ -109,27 +109,10 @@ export const NavbarLink = styled(Link)`
  cursor: pointer;
 `;

-export const NotificationCount = styled.div`
-  position: absolute;
-  top: -6px;
-  right: -6px;
-  background: #7367f0;
-  border-radius: 50%;
-  width: 16px;
-  height: 16px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 3px solid rgb(16, 22, 58);
-  color: #fff;
-  font-size: 14px;
-`;
-
 export const IconContainerWrapper = styled.div<{ disabled?: boolean }>`
  margin-right: 20px;
-  position: relative;
  cursor: pointer;
-  ${(props) =>
+  ${props =>
    props.disabled &&
    css`
      opacity: 0.5;
@ -159,15 +142,15 @@ export const ProfileIcon = styled.div<{
  justify-content: center;
  color: #fff;
  font-weight: 700;
-  background: ${(props) => (props.backgroundURL ? `url(${props.backgroundURL})` : props.bgColor)};
+  background: ${props => (props.backgroundURL ? `url(${props.backgroundURL})` : props.bgColor)};
  background-position: center;
  background-size: contain;
 `;

 export const ProjectMeta = styled.div<{ nameOnly?: boolean }>`
  display: flex;
-  ${(props) => !props.nameOnly && 'padding-top: 9px;'}
-  margin-left: -6px;
+  ${props => !props.nameOnly && 'padding-top: 9px;'}
+  margin-left: -14px;
  align-items: center;
  max-width: 100%;
  min-height: 51px;
@ -184,7 +167,7 @@ export const ProjectTabs = styled.div`

 export const ProjectTab = styled(NavLink)`
  font-size: 80%;
-  color: ${(props) => props.theme.colors.text.primary};
+  color: ${props => props.theme.colors.text.primary};
  font-size: 15px;
  cursor: pointer;
  display: flex;
@ -201,22 +184,22 @@ export const ProjectTab = styled(NavLink)`
  }

  &:hover {
-    box-shadow: inset 0 -2px ${(props) => props.theme.colors.text.secondary};
-    color: ${(props) => props.theme.colors.text.secondary};
+    box-shadow: inset 0 -2px ${props => props.theme.colors.text.secondary};
+    color: ${props => props.theme.colors.text.secondary};
  }

  &.active {
-    box-shadow: inset 0 -2px ${(props) => props.theme.colors.secondary};
-    color: ${(props) => props.theme.colors.secondary};
+    box-shadow: inset 0 -2px ${props => props.theme.colors.secondary};
+    color: ${props => props.theme.colors.secondary};
  }
  &.active:hover {
-    box-shadow: inset 0 -2px ${(props) => props.theme.colors.secondary};
-    color: ${(props) => props.theme.colors.secondary};
+    box-shadow: inset 0 -2px ${props => props.theme.colors.secondary};
+    color: ${props => props.theme.colors.secondary};
  }
 `;

 export const ProjectName = styled.h1`
-  color: ${(props) => props.theme.colors.text.primary};
+  color: ${props => props.theme.colors.text.primary};
  font-weight: 600;
  font-size: 20px;
  padding: 3px 10px 3px 8px;
@ -258,7 +241,7 @@ export const ProjectNameTextarea = styled.input`
  font-size: 20px;
  padding: 3px 10px 3px 8px;
  &:focus {
-    box-shadow: ${(props) => props.theme.colors.primary} 0px 0px 0px 1px;
+    box-shadow: ${props => props.theme.colors.primary} 0px 0px 0px 1px;
  }
 `;

@ -276,7 +259,7 @@ export const ProjectSwitcher = styled.button`
  color: #c2c6dc;
  cursor: pointer;
  &:hover {
-    background: ${(props) => props.theme.colors.primary};
+    background: ${props => props.theme.colors.primary};
  }
 `;

@ -300,7 +283,7 @@ export const ProjectSettingsButton = styled.button`
  justify-content: center;
  cursor: pointer;
  &:hover {
-    background: ${(props) => props.theme.colors.primary};
+    background: ${props => props.theme.colors.primary};
  }
 `;

@ -314,19 +297,9 @@ export const ProjectFinder = styled(Button)`
  padding: 6px 12px;
 `;

-export const SignUp = styled(Button)`
-  margin-right: 8px;
-  padding: 6px 12px;
-`;
-
-export const SignIn = styled(Button)`
-  margin-right: 20px;
-  padding: 6px 12px;
-`;
-
 export const NavSeparator = styled.div`
  width: 1px;
-  background: ${(props) => props.theme.colors.border};
+  background: ${props => props.theme.colors.border};
  height: 34px;
  margin: 0 20px;
 `;
@ -343,11 +316,11 @@ export const LogoContainer = styled(Link)`

 export const TaskcafeTitle = styled.h2`
  margin-left: 5px;
-  color: ${(props) => props.theme.colors.text.primary};
+  color: ${props => props.theme.colors.text.primary};
  font-size: 20px;
 `;

 export const TaskcafeLogo = styled(Taskcafe)`
-  fill: ${(props) => props.theme.colors.text.primary};
-  stroke: ${(props) => props.theme.colors.text.primary};
+  fill: ${props => props.theme.colors.text.primary};
+  stroke: ${props => props.theme.colors.text.primary};
 `;
--- a/frontend/src/shared/components/TopNavbar/index.tsx
+++ b/frontend/src/shared/components/TopNavbar/index.tsx
@ -36,7 +36,6 @@ import {
  ProjectMember,
  ProjectMembers,
  ProjectSwitchInner,
-  NotificationCount,
 } from './Styles';

 type IconContainerProps = {
@ -145,7 +144,7 @@ const ProjectHeading: React.FC<ProjectHeadingProps> = ({
      </ProjectSettingsButton>
      {onFavorite && (
        <ProjectSettingsButton onClick={() => onFavorite()}>
-          <Star filled width={16} height={16} color="#c2c6dc" />
+          <Star width={16} height={16} color="#c2c6dc" />
        </ProjectSettingsButton>
      )}
    </>
@ -186,7 +185,6 @@ type NavBarProps = {
  projectMembers?: Array<TaskUser> | null;
  projectInvitedMembers?: Array<InvitedUser> | null;

-  hasUnread: boolean;
  onRemoveFromBoard?: (userID: string) => void;
  onMemberProfile?: ($targetRef: React.RefObject<HTMLElement>, memberID: string) => void;
  onInvitedMemberProfile?: ($targetRef: React.RefObject<HTMLElement>, email: string) => void;
@ -205,7 +203,6 @@ const NavBar: React.FC<NavBarProps> = ({
  onOpenProjectFinder,
  onFavorite,
  onSetTab,
-  hasUnread,
  projectInvitedMembers,
  onChangeRole,
  name,
@ -231,7 +228,7 @@ const NavBar: React.FC<NavBarProps> = ({
    <NavbarWrapper>
      <NavbarHeader>
        <ProjectActions>
-          <ProjectSwitch ref={$finder} onClick={(e) => onOpenProjectFinder($finder)}>
+          <ProjectSwitch ref={$finder} onClick={e => onOpenProjectFinder($finder)}>
            <ProjectSwitchInner>
              <TaskcafeLogo innerColor="#9f46e4" outerColor="#000" width={32} height={32} />
            </ProjectSwitchInner>
@ -307,7 +304,7 @@ const NavBar: React.FC<NavBarProps> = ({
                ))}
                {canInviteUser && (
                  <InviteButton
-                    onClick={($target) => {
+                    onClick={$target => {
                      if (onInviteUser) {
                        onInviteUser($target);
                      }
@ -333,9 +330,8 @@ const NavBar: React.FC<NavBarProps> = ({
          <IconContainer disabled onClick={NOOP}>
            <ListUnordered width={20} height={20} />
          </IconContainer>
-          <IconContainer onClick={onNotificationClick}>
-            <Bell width={20} height={20} />
-            {hasUnread && <NotificationCount />}
+          <IconContainer disabled onClick={onNotificationClick}>
+            <Bell color="#c2c6dc" size={20} />
          </IconContainer>
          <IconContainer disabled onClick={NOOP}>
            <BarChart width={20} height={20} />
--- a/frontend/src/shared/fonts/OpenSans-Bold.ttf
+++ b/frontend/src/shared/fonts/OpenSans-Bold.ttf
--- a/frontend/src/shared/fonts/OpenSans-BoldItalic.ttf
+++ b/frontend/src/shared/fonts/OpenSans-BoldItalic.ttf
--- a/frontend/src/shared/fonts/OpenSans-ExtraBold.ttf
+++ b/frontend/src/shared/fonts/OpenSans-ExtraBold.ttf
--- a/frontend/src/shared/fonts/OpenSans-ExtraBoldItalic.ttf
+++ b/frontend/src/shared/fonts/OpenSans-ExtraBoldItalic.ttf
--- a/frontend/src/shared/fonts/OpenSans-Italic.ttf
+++ b/frontend/src/shared/fonts/OpenSans-Italic.ttf
--- a/frontend/src/shared/fonts/OpenSans-Light.ttf
+++ b/frontend/src/shared/fonts/OpenSans-Light.ttf
--- a/frontend/src/shared/fonts/OpenSans-LightItalic.ttf
+++ b/frontend/src/shared/fonts/OpenSans-LightItalic.ttf
--- a/frontend/src/shared/fonts/OpenSans-Regular.ttf
+++ b/frontend/src/shared/fonts/OpenSans-Regular.ttf
--- a/frontend/src/shared/fonts/OpenSans-SemiBold.ttf
+++ b/frontend/src/shared/fonts/OpenSans-SemiBold.ttf
--- a/frontend/src/shared/fonts/OpenSans-SemiBoldItalic.ttf
+++ b/frontend/src/shared/fonts/OpenSans-SemiBoldItalic.ttf
--- a/frontend/src/shared/generated/graphql.tsx
+++ b/frontend/src/shared/generated/graphql.tsx
--- a/frontend/src/shared/graphql/createProject.graphqls
+++ b/frontend/src/shared/graphql/createProject.graphqls
@ -1,7 +1,6 @@
 mutation createProject($teamID: UUID, $name: String!) {
  createProject(input: {teamID: $teamID, name: $name}) {
    id
-    shortId
    name
    team {
      id
--- a/frontend/src/shared/graphql/findProject.ts
+++ b/frontend/src/shared/graphql/findProject.ts
@ -2,11 +2,9 @@ import gql from 'graphql-tag';
 import TASK_FRAGMENT from './fragments/task';

 const FIND_PROJECT_QUERY = gql`
-query findProject($projectID: String!) {
-  findProject(input: { projectShortID: $projectID }) {
-    id
+query findProject($projectID: UUID!) {
+  findProject(input: { projectID: $projectID }) {
    name
-    publicOn
    team {
      id
    }
--- a/frontend/src/shared/graphql/findTask.graphqls
+++ b/frontend/src/shared/graphql/findTask.graphqls
@ -1,18 +1,9 @@
-query findTask($taskID: String!) {
-  findTask(input: {taskShortID: $taskID}) {
+query findTask($taskID: UUID!) {
+  findTask(input: {taskID: $taskID}) {
    id
-    shortId
    name
-    watched
    description
-    dueDate {
-      at
-      notifications {
-        id
-        period
-        duration
-      }
-    }
+    dueDate
    position
    complete
    hasTime
--- a/frontend/src/shared/graphql/fragments/task.ts
+++ b/frontend/src/shared/graphql/fragments/task.ts
@ -3,15 +3,11 @@ import gql from 'graphql-tag';
 const TASK_FRAGMENT = gql`
  fragment TaskFields on Task {
    id
-    shortId
    name
    description
-    dueDate {
-      at
-    }
+    dueDate
    hasTime
    complete
-    watched
    completedAt
    position
    badges {
@ -19,10 +15,6 @@ const TASK_FRAGMENT = gql`
        complete
        total
      }
-      comments {
-        unread
-        total
-      }
    }
    taskGroup {
      id
--- a/frontend/src/shared/graphql/getProjects.graphqls
+++ b/frontend/src/shared/graphql/getProjects.graphqls
@ -10,7 +10,6 @@ query getProjects {
  }
  projects {
    id
-    shortId
    name
    team {
      id
--- a/frontend/src/shared/graphql/labels.ts
+++ b/frontend/src/shared/graphql/labels.ts
@ -1,26 +0,0 @@
-import gql from 'graphql-tag';
-import TASK_FRAGMENT from './fragments/task';
-
-const FIND_PROJECT_QUERY = gql`
-  query labels($projectID: UUID!) {
-    findProject(input: { projectID: $projectID }) {
-      labels {
-        id
-        createdDate
-        name
-        labelColor {
-          id
-          name
-          colorHex
-          position
-        }
-      }
-    }
-    labelColors {
-      id
-      position
-      colorHex
-      name
-    }
-  }
-`;
--- a/frontend/src/shared/graphql/myTasks.graphqls
+++ b/frontend/src/shared/graphql/myTasks.graphqls
@ -6,15 +6,12 @@ query myTasks($status: MyTasksStatus!, $sort: MyTasksSort!) {
  myTasks(input: { status: $status, sort: $sort }) {
    tasks {
      id
-      shortId
      taskGroup {
        id
        name
      }
      name
-      dueDate {
-        at
-      }
+      dueDate
      hasTime
      complete
      completedAt
--- a/frontend/src/shared/graphql/notificationToggleRead.ts
+++ b/frontend/src/shared/graphql/notificationToggleRead.ts
@ -1,13 +0,0 @@
-import gql from 'graphql-tag';
-
-const CREATE_TASK_MUTATION = gql`
-  mutation notificationToggleRead($notifiedID: UUID!) {
-    notificationToggleRead(input: { notifiedID: $notifiedID }) {
-      id
-      read
-      readAt
-    }
-  }
-`;
-
-export default CREATE_TASK_MUTATION;
--- a/frontend/src/shared/graphql/notifications.ts
+++ b/frontend/src/shared/graphql/notifications.ts
@ -1,34 +0,0 @@
-import gql from 'graphql-tag';
-
-export const TOP_NAVBAR_QUERY = gql`
-  query notifications($limit: Int!, $cursor: String, $filter: NotificationFilter!) {
-    notified(input: { limit: $limit, cursor: $cursor, filter: $filter }) {
-      totalCount
-      pageInfo {
-        endCursor
-        hasNextPage
-      }
-      notified {
-        id
-        read
-        readAt
-        notification {
-          id
-          actionType
-          data {
-            key
-            value
-          }
-          causedBy {
-            username
-            fullname
-            id
-          }
-          createdAt
-        }
-      }
-    }
-  }
-`;
-
-export default TOP_NAVBAR_QUERY;
--- a/frontend/src/shared/graphql/notifictionMarkAllRead.ts
+++ b/frontend/src/shared/graphql/notifictionMarkAllRead.ts
@ -1,11 +0,0 @@
-import gql from 'graphql-tag';
-
-const CREATE_TASK_MUTATION = gql`
-  mutation notificationMarkAllRead {
-    notificationMarkAllRead {
-      success
-    }
-  }
-`;
-
-export default CREATE_TASK_MUTATION;
--- a/frontend/src/shared/graphql/onNotificationAdded.ts
+++ b/frontend/src/shared/graphql/onNotificationAdded.ts
@ -1,26 +0,0 @@
-import gql from 'graphql-tag';
-import TASK_FRAGMENT from './fragments/task';
-
-const FIND_PROJECT_QUERY = gql`
-  subscription notificationAdded {
-    notificationAdded {
-      id
-      read
-      readAt
-      notification {
-        id
-        actionType
-        data {
-          key
-          value
-        }
-        causedBy {
-          username
-          fullname
-          id
-        }
-        createdAt
-      }
-    }
-  }
-`;
--- a/frontend/src/shared/graphql/task/toggleTaskWatcher.ts
+++ b/frontend/src/shared/graphql/task/toggleTaskWatcher.ts
@ -1,12 +0,0 @@
-import gql from 'graphql-tag';
-
-const CREATE_TASK_MUTATION = gql`
-  mutation toggleTaskWatch($taskID: UUID!) {
-    toggleTaskWatch(input: { taskID: $taskID }) {
-      id
-      watched
-    }
-  }
-`;
-
-export default CREATE_TASK_MUTATION;
--- a/frontend/src/shared/graphql/toggleProjectVisibility.ts
+++ b/frontend/src/shared/graphql/toggleProjectVisibility.ts
@ -1,14 +0,0 @@
-import gql from 'graphql-tag';
-
-export const DELETE_PROJECT_MUTATION = gql`
-  mutation toggleProjectVisibility($projectID: UUID!, $isPublic: Boolean!) {
-    toggleProjectVisibility(input: { projectID: $projectID, isPublic: $isPublic }) {
-      project {
-        id
-        publicOn
-      }
-    }
-  }
-`;
-
-export default DELETE_PROJECT_MUTATION;
--- a/frontend/src/shared/graphql/topNavbar.ts
+++ b/frontend/src/shared/graphql/topNavbar.ts
@ -3,19 +3,20 @@ import gql from 'graphql-tag';
 export const TOP_NAVBAR_QUERY = gql`
  query topNavbar {
    notifications {
-      id
+      createdAt
      read
-      readAt
-      notification {
+      id
+      entity {
        id
-        actionType
-        causedBy {
-          username
-          fullname
-          id
-        }
-        createdAt
+        type
+        name
      }
+      actor {
+        id
+        type
+        name
+      }
+      actionType
    }
    me {
      user {
--- a/Show More
+++ b/Show More