feat: more changes

feat: so many stuffs
refactor: add logging info to search members
2020-12-16 20:18:02 -06:00 · 2020-12-05 15:19:34 -06:00 · 2020-10-20 18:59:21 -05:00 · 2020-10-20 18:59:21 -05:00 · 2020-10-20 18:59:21 -05:00 · 2020-10-20 18:59:21 -05:00
209 changed files with 15729 additions and 3244 deletions
--- a/.github/FUNDING.yml
+++ b/.github/FUNDING.yml
@ -0,0 +1,3 @@
+# These are supported funding model platforms
+
+custom: ['https://paypal.me/jordanthedev', 'https://www.buymeacoffee.com/jordanknott']
--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@ -0,0 +1,30 @@
+---
+name: Bug report
+about: Create a report to help improve Taskcafe
+title: ""
+labels: ""
+assignees: ""
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is with steps to reproduce the issue.
+
+**Expected behavior**
+What did you expect to happen?
+
+**Screenshots / Live demo link**
+If applicable, add screenshots to help explain your problem.
+
+**Additional context**
+Add any other context about the problem here.
+
+Please send the Taskcafe web service logs if applicable.
+
+<!--
+
+Please read the contributing guide before working on any new pull requests!
+
+If you would like to ask a question regarding a possible bug or feature request, please
+join the Taskcafe discord - https://discord.gg/JkQDruh
+
+-->
--- a/.github/ISSUE_TEMPLATE/feature_request.md
+++ b/.github/ISSUE_TEMPLATE/feature_request.md
@ -0,0 +1,30 @@
+---
+name: Feature request
+about: Create a feature request to help improve Taskcafe
+title: ""
+labels: ""
+assignees: ""
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.
+
+<!--
+
+Be aware, not all feature requests will get accepted.
+
+Please read the contributing guide before working on any new pull requests!
+
+If you would like to ask a question regarding a possible bug or feature request, please
+join the Taskcafe discord - https://discord.gg/JkQDruh
+
+-->
--- a/.github/pull_request_template.md
+++ b/.github/pull_request_template.md
@ -0,0 +1,19 @@
+* **Please check if the PR fulfills these requirements**
+- [ ] You have read the contribution guidelines [guidelines](https://github.com/JordanKnott/taskcafe/blob/master/CONTRIBUTING.md)
+- [ ] The commit message follows our [guidelines](https://github.com/JordanKnott/taskcafe/blob/master/CONTRIBUTING.md#git-commit-message-style)
+- [ ] Docs have been added / updated (for bug fixes / features)
+
+
+* **What kind of change does this PR introduce?** (Bug fix, feature, docs update, ...)
+
+
+* **What is the current behavior?** (You can also link to an open issue here)
+
+
+* **What is the new behavior (if this is a feature change)?**
+
+
+* **Does this PR introduce a breaking change?** (What changes might users need to make in their application due to this PR?)
+
+
+* **Other information**:
--- a/.github/taskcafe-full.png
+++ b/.github/taskcafe-full.png
--- a/.github/taskcafe-full.svg
+++ b/.github/taskcafe-full.svg
@ -7,16 +7,16 @@
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   inkscape:export-ydpi="96"
-   inkscape:export-xdpi="96"
-   inkscape:export-filename="/home/jordan/Projects/project-citadel/.github/taskcafe-full.png"
-   viewBox="0 0 1100 350"
-   version="1.1"
-   id="svg951"
-   sodipodi:docname="taskcafe-full.svg"
-   width="1100"
+   inkscape:version="1.0 (4035a4fb49, 2020-05-01)"
   height="350"
-   inkscape:version="1.0 (4035a4fb49, 2020-05-01)">
+   width="1100"
+   sodipodi:docname="taskcafe-full.svg"
+   id="svg951"
+   version="1.1"
+   viewBox="0 0 1100 350"
+   inkscape:export-filename="/home/jordan/Projects/project-citadel/.github/taskcafe-full.png"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96">
  <metadata
     id="metadata957">
    <rdf:RDF>
@ -25,81 +25,70 @@
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
+        <dc:title />
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <defs
     id="defs955">
    <inkscape:path-effect
-       effect="bspline"
+       only_selected="false"
+       apply_with_weight="true"
+       apply_no_weight="true"
+       helper_size="0"
+       steps="2"
+       weight="33.333333"
+       lpeversion="1"
+       is_visible="true"
       id="path-effect2633"
-       is_visible="true"
-       lpeversion="1"
-       weight="33.333333"
-       steps="2"
-       helper_size="0"
-       apply_no_weight="true"
-       apply_with_weight="true"
-       only_selected="false" />
+       effect="bspline" />
    <inkscape:path-effect
-       only_selected="false"
-       apply_with_weight="true"
-       apply_no_weight="true"
-       helper_size="0"
-       steps="2"
-       weight="33.333333"
-       lpeversion="1"
-       is_visible="true"
+       effect="bspline"
       id="path-effect2614"
-       effect="bspline" />
-    <inkscape:path-effect
-       only_selected="false"
-       apply_with_weight="true"
-       apply_no_weight="true"
-       helper_size="0"
-       steps="2"
-       weight="33.333333"
-       lpeversion="1"
       is_visible="true"
+       lpeversion="1"
+       weight="33.333333"
+       steps="2"
+       helper_size="0"
+       apply_no_weight="true"
+       apply_with_weight="true"
+       only_selected="false" />
+    <inkscape:path-effect
+       effect="bspline"
       id="path-effect2500"
-       effect="bspline" />
-    <inkscape:path-effect
-       only_selected="false"
-       apply_with_weight="true"
-       apply_no_weight="true"
-       helper_size="0"
-       steps="2"
-       weight="33.333333"
-       lpeversion="1"
       is_visible="true"
+       lpeversion="1"
+       weight="33.333333"
+       steps="2"
+       helper_size="0"
+       apply_no_weight="true"
+       apply_with_weight="true"
+       only_selected="false" />
+    <inkscape:path-effect
+       effect="bspline"
       id="path-effect2491"
-       effect="bspline" />
-    <inkscape:path-effect
-       only_selected="false"
-       apply_with_weight="true"
-       apply_no_weight="true"
-       helper_size="0"
-       steps="2"
-       weight="33.333333"
-       lpeversion="1"
       is_visible="true"
+       lpeversion="1"
+       weight="33.333333"
+       steps="2"
+       helper_size="0"
+       apply_no_weight="true"
+       apply_with_weight="true"
+       only_selected="false" />
+    <inkscape:path-effect
+       effect="bspline"
       id="path-effect1706"
-       effect="bspline" />
-    <inkscape:path-effect
-       only_selected="false"
-       apply_with_weight="true"
-       apply_no_weight="true"
-       helper_size="0"
-       steps="2"
-       weight="33.333333"
-       lpeversion="1"
       is_visible="true"
+       lpeversion="1"
+       weight="33.333333"
+       steps="2"
+       helper_size="0"
+       apply_no_weight="true"
+       apply_with_weight="true"
+       only_selected="false" />
+    <inkscape:path-effect
+       effect="bspline"
       id="path-effect1697"
-       effect="bspline" />
-    <inkscape:path-effect
-       effect="bspline"
-       id="path-effect917"
       is_visible="true"
       lpeversion="1"
       weight="33.333333"
@ -117,11 +106,11 @@
       weight="33.333333"
       lpeversion="1"
       is_visible="true"
-       id="path-effect950"
+       id="path-effect917"
       effect="bspline" />
    <inkscape:path-effect
       effect="bspline"
-       id="path-effect969"
+       id="path-effect950"
       is_visible="true"
       lpeversion="1"
       weight="33.333333"
@ -130,131 +119,150 @@
       apply_no_weight="true"
       apply_with_weight="true"
       only_selected="false" />
+    <inkscape:path-effect
+       only_selected="false"
+       apply_with_weight="true"
+       apply_no_weight="true"
+       helper_size="0"
+       steps="2"
+       weight="33.333333"
+       lpeversion="1"
+       is_visible="true"
+       id="path-effect969"
+       effect="bspline" />
  </defs>
  <sodipodi:namedview
-     inkscape:document-rotation="0"
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="1920"
-     inkscape:window-height="1032"
-     id="namedview953"
-     showgrid="false"
-     units="px"
-     inkscape:zoom="1.2109091"
-     inkscape:cx="550"
-     inkscape:cy="241.06607"
-     inkscape:window-x="0"
-     inkscape:window-y="-18"
+     inkscape:current-layer="g2585"
     inkscape:window-maximized="1"
-     inkscape:current-layer="g2585" />
+     inkscape:window-y="-18"
+     inkscape:window-x="0"
+     inkscape:cy="250.95495"
+     inkscape:cx="534.60693"
+     inkscape:zoom="0.85624204"
+     units="px"
+     showgrid="false"
+     id="namedview953"
+     inkscape:window-height="1032"
+     inkscape:window-width="1920"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0"
+     guidetolerance="10"
+     gridtolerance="10"
+     objecttolerance="10"
+     borderopacity="1"
+     bordercolor="#666666"
+     pagecolor="#ffffff"
+     inkscape:document-rotation="0" />
  <g
-     id="g974"
-     transform="matrix(7.6408653,0,0,7.6408653,40.593299,-53.251254)">
+     transform="matrix(7.6408653,0,0,7.6408653,40.593299,-53.251254)"
+     id="g974">
    <g
-       id="g1721"
-       transform="matrix(0.21947908,0,0,0.21947908,-1.6240521,6.1742219)">
+       transform="matrix(0.21947908,0,0,0.21947908,-1.6240521,6.1742219)"
+       id="g1721">
      <g
-         transform="translate(0,-133.87521)"
-         id="g2454">
+         id="g2454"
+         transform="translate(0,-133.87521)">
        <g
-           transform="translate(-35.365658,-44.89936)"
-           id="g2554">
+           id="g2554"
+           transform="translate(-35.365658,-44.89936)">
          <g
-             transform="translate(0,107.63572)"
-             id="g2433">
+             id="g2433"
+             transform="translate(0,107.63572)">
            <g
-               transform="translate(0.82337254,1.4684449)"
-               id="g2439">
+               id="g2439"
+               transform="translate(0.82337254,1.4684449)">
              <g
                 id="g2472">
                <g
-                   transform="translate(0,-15.084391)"
-                   id="g2585">
+                   id="g2585"
+                   transform="translate(0,-15.084391)">
                  <g
-                     id="g2427"
-                     transform="matrix(1.9229347,0,0,1.9229347,9.8747364,70.748305)">
-                    <path
-                       transform="matrix(0.13087523,0,0,0.13087523,-5.3126573,6.9692701)"
-                       style="fill:#7367f0;fill-opacity:1;stroke-width:0.399296"
-                       d="m 372.01783,403.60348 c -54.69036,0 -99.02539,44.33501 -99.02539,99.02537 0,54.69035 44.33503,99.02537 99.02539,99.02537 54.69036,0 99.02538,-44.33502 99.02538,-99.02537 0,-54.69036 -44.33502,-99.02538 -99.02538,-99.02537 z m 0,19.16619 c 44.13497,0 79.85917,35.71742 79.85917,79.85918 0,44.13497 -35.71741,79.85919 -79.85917,79.85919 -44.13497,0 -79.85918,-35.71742 -79.85918,-79.85919 0,-44.13498 35.71742,-79.85918 79.85918,-79.85918 m 55.98288,52.01507 -8.99853,-9.0712 c -1.86352,-1.87869 -4.89736,-1.89107 -6.77605,-0.0272 L 355.78487,521.674 331.91016,497.60565 c -1.86352,-1.87869 -4.89736,-1.89107 -6.77605,-0.0275 l -9.07159,8.99853 c -1.8787,1.86352 -1.89108,4.89736 -0.0272,6.77646 l 36.24849,36.54196 c 1.86352,1.87869 4.89736,1.89107 6.77605,0.0272 l 68.9141,-68.36106 c 1.87828,-1.86392 1.89025,-4.89778 0.0268,-6.77646 z"
-                       id="path1636" />
+                     transform="translate(1.0665725)"
+                     id="g4610">
                    <g
-                       transform="translate(-0.16733365,0.61658838)"
-                       id="g2513">
-                      <path
-                         d="m 274.76901,687.50206 h 187.88752 c 51.86479,0 93.94376,-42.07897 93.94376,-93.94375 h 31.31459 c 69.08781,0 125.25834,-56.17055 125.25834,-125.25835 0,-69.08781 -56.17053,-125.25834 -125.25834,-125.25834 H 204.31119 c -13.01512,0 -23.48594,10.47081 -23.48594,23.48593 v 227.03076 c 0,51.86478 42.07898,93.94375 93.94376,93.94375 z M 587.91488,405.67079 c 34.54391,0 62.62917,28.08527 62.62917,62.62917 0,34.5439 -28.08526,62.62917 -62.62917,62.62917 H 556.60029 V 405.67079 Z m 46.6783,375.77503 H 134.14696 c -46.580452,0 -59.693435,-62.62917 -35.228913,-62.62917 H 669.72424 c 24.46452,0 11.54725,62.62917 -35.13106,62.62917 z"
-                         id="path949"
-                         style="fill:#10163a;fill-opacity:1;stroke-width:0.978574"
-                         transform="matrix(0.13087523,0,0,0.13087523,-5.3126573,6.9692701)" />
+                       id="g2560"
+                       transform="translate(-28.409706,-8.3958791)">
+                      <text
+                         xml:space="preserve"
+                         style="font-size:124.328px;line-height:1.25;font-family:'Fira Sans';-inkscape-font-specification:'Fira Sans';letter-spacing:0px;word-spacing:0px;opacity:0.99;stroke-width:0.690712"
+                         x="196.89775"
+                         y="235.17853"
+                         id="text852"><tspan
+                           sodipodi:role="line"
+                           id="tspan850"
+                           x="196.89775"
+                           y="235.17853"
+                           style="font-size:124.328px;fill:#10163a;fill-opacity:1;stroke-width:0.690712">Taskcafé</tspan></text>
+                      <text
+                         xml:space="preserve"
+                         style="font-size:22.6594px;line-height:1.25;font-family:'Fira Sans';-inkscape-font-specification:'Fira Sans';letter-spacing:0px;word-spacing:0px;opacity:0.99;stroke-width:0.596299"
+                         x="223.15549"
+                         y="261.83273"
+                         id="text856"><tspan
+                           sodipodi:role="line"
+                           id="tspan854"
+                           x="223.15549"
+                           y="261.83273"
+                           style="font-size:22.6594px;fill:#262c49;fill-opacity:1;stroke-width:0.596299">An open source project management tool</tspan></text>
+                    </g>
+                    <g
+                       id="g4591"
+                       transform="matrix(0.63214637,0,0,0.63214637,34.070751,71.061726)">
                      <g
-                         style="stroke:#10163a;stroke-width:0.999994;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-                         id="g1711"
-                         transform="translate(-0.91048867,42.172992)">
+                         transform="matrix(1.9229347,0,0,1.9229347,9.8747364,70.748305)"
+                         id="g2427">
+                        <path
+                           id="path1636"
+                           d="m 372.01783,403.60348 c -54.69036,0 -99.02539,44.33501 -99.02539,99.02537 0,54.69035 44.33503,99.02537 99.02539,99.02537 54.69036,0 99.02538,-44.33502 99.02538,-99.02537 0,-54.69036 -44.33502,-99.02538 -99.02538,-99.02537 z m 0,19.16619 c 44.13497,0 79.85917,35.71742 79.85917,79.85918 0,44.13497 -35.71741,79.85919 -79.85917,79.85919 -44.13497,0 -79.85918,-35.71742 -79.85918,-79.85919 0,-44.13498 35.71742,-79.85918 79.85918,-79.85918 m 55.98288,52.01507 -8.99853,-9.0712 c -1.86352,-1.87869 -4.89736,-1.89107 -6.77605,-0.0272 L 355.78487,521.674 331.91016,497.60565 c -1.86352,-1.87869 -4.89736,-1.89107 -6.77605,-0.0275 l -9.07159,8.99853 c -1.8787,1.86352 -1.89108,4.89736 -0.0272,6.77646 l 36.24849,36.54196 c 1.86352,1.87869 4.89736,1.89107 6.77605,0.0272 l 68.9141,-68.36106 c 1.87828,-1.86392 1.89025,-4.89778 0.0268,-6.77646 z"
+                           style="fill:#7367f0;fill-opacity:1;stroke-width:0.399296"
+                           transform="matrix(0.13087523,0,0,0.13087523,-5.3126573,6.9692701)" />
                        <g
-                           id="g2505"
-                           transform="translate(0.09191978,50.168306)">
+                           id="g2513"
+                           transform="translate(-0.16733365,0.61658838)">
+                          <path
+                             transform="matrix(0.13087523,0,0,0.13087523,-5.3126573,6.9692701)"
+                             style="fill:#10163a;fill-opacity:1;stroke-width:0.978574"
+                             id="path949"
+                             d="m 274.76901,687.50206 h 187.88752 c 51.86479,0 93.94376,-42.07897 93.94376,-93.94375 h 31.31459 c 69.08781,0 125.25834,-56.17055 125.25834,-125.25835 0,-69.08781 -56.17053,-125.25834 -125.25834,-125.25834 H 204.31119 c -13.01512,0 -23.48594,10.47081 -23.48594,23.48593 v 227.03076 c 0,51.86478 42.07898,93.94375 93.94376,93.94375 z M 587.91488,405.67079 c 34.54391,0 62.62917,28.08527 62.62917,62.62917 0,34.5439 -28.08526,62.62917 -62.62917,62.62917 H 556.60029 V 405.67079 Z m 46.6783,375.77503 H 134.14696 c -46.580452,0 -59.693435,-62.62917 -35.228913,-62.62917 H 669.72424 c 24.46452,0 11.54725,62.62917 -35.13106,62.62917 z" />
                          <g
-                             transform="translate(-0.68526563,40.225035)"
-                             id="g2638">
-                            <path
-                               style="fill:none;stroke:#10163a;stroke-width:3.10099;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-                               d="m 34.769434,-84.879608 c -1.513055,-1.532226 -2.968787,-3.006403 -2.895671,-4.268256 0.07312,-1.261854 1.703997,-2.281876 3.242849,-3.677242 1.538852,-1.395366 2.985679,-3.166058 1.805573,-4.837199 -1.180106,-1.671141 -4.987365,-3.242735 -4.929449,-5.195115 0.05792,-1.95238 3.981161,-4.28523 4.510279,-6.39714 0.529119,-2.11191 -2.336082,-4.003 -5.201646,-5.89433"
-                               id="path915"
-                               inkscape:original-d="m 34.769434,-84.879608 c -1.48426,-1.560661 -2.968784,-3.006405 -4.453574,-4.510003 1.631212,-1.019797 3.262093,-2.039821 4.892743,-3.060127 1.447149,-1.770498 2.893976,-3.54119 4.340567,-5.312182 -3.807146,-1.571393 -7.614404,-3.14299 -11.422003,-4.71488 3.923669,-2.33269 7.846916,-4.66554 11.769976,-6.99871 -2.86505,-1.8909 -5.730251,-3.78199 -8.595774,-5.67338"
-                               inkscape:path-effect="#path-effect917" />
-                            <path
-                               inkscape:path-effect="#path-effect2614"
-                               inkscape:original-d="m 45.467515,-84.87961 c -1.48426,-1.56066 -2.968784,-3.006404 -4.453574,-4.510002 1.631212,-1.019797 3.262093,-2.039821 4.892743,-3.060127 1.447149,-1.770498 2.893976,-3.54119 4.340567,-5.312182 -3.807146,-1.571393 -7.614404,-3.142989 -11.422003,-4.714879 3.923669,-2.33269 7.846916,-4.66555 11.769976,-6.99871 -2.86505,-1.8909 -5.730251,-3.78199 -8.595774,-5.67338"
-                               id="path915-9"
-                               d="m 45.467515,-84.87961 c -1.513055,-1.532226 -2.968786,-3.006402 -2.895671,-4.268255 0.07312,-1.261854 1.703997,-2.281876 3.242849,-3.677242 1.538852,-1.395366 2.985679,-3.166058 1.805573,-4.837199 -1.180106,-1.671141 -4.987365,-3.242734 -4.929449,-5.195114 0.05792,-1.95238 3.981165,-4.28524 4.510282,-6.39714 0.529116,-2.11191 -2.336085,-4.003 -5.201649,-5.89433"
-                               style="fill:none;stroke:#10163a;stroke-width:3.10099;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
-                            <path
-                               style="fill:none;stroke:#10163a;stroke-width:3.10099;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-                               d="m 56.1656,-84.87961 c -1.513055,-1.532227 -2.968786,-3.006403 -2.895671,-4.268257 0.07312,-1.261854 1.703997,-2.281876 3.242849,-3.677242 1.538852,-1.395366 2.985678,-3.166057 1.805572,-4.837198 -1.180105,-1.671141 -4.987363,-3.242733 -4.929448,-5.195113 0.05792,-1.95238 3.981162,-4.28524 4.510282,-6.39715 0.529119,-2.11191 -2.336084,-4.00299 -5.201649,-5.89432"
-                               id="path915-9-0"
-                               inkscape:original-d="m 56.1656,-84.87961 c -1.48426,-1.560662 -2.968784,-3.006405 -4.453574,-4.510004 1.631212,-1.019796 3.262093,-2.03982 4.892743,-3.060127 1.447149,-1.770498 2.893976,-3.541189 4.340567,-5.312182 -3.807146,-1.571393 -7.614404,-3.142987 -11.422003,-4.714877 3.923669,-2.33269 7.846916,-4.66555 11.769976,-6.99872 -2.86505,-1.89089 -5.730251,-3.78198 -8.595774,-5.67337"
-                               inkscape:path-effect="#path-effect2633" />
+                             transform="translate(-0.91048867,42.172992)"
+                             id="g1711"
+                             style="stroke:#10163a;stroke-width:0.999994;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1">
+                            <g
+                               transform="translate(0.09191978,50.168306)"
+                               id="g2505">
+                              <g
+                                 id="g2638"
+                                 transform="translate(-0.68526563,40.225035)">
+                                <path
+                                   inkscape:path-effect="#path-effect917"
+                                   inkscape:original-d="m 34.769434,-84.879608 c -1.48426,-1.560661 -2.968784,-3.006405 -4.453574,-4.510003 1.631212,-1.019797 3.262093,-2.039821 4.892743,-3.060127 1.447149,-1.770498 2.893976,-3.54119 4.340567,-5.312182 -3.807146,-1.571393 -7.614404,-3.14299 -11.422003,-4.71488 3.923669,-2.33269 7.846916,-4.66554 11.769976,-6.99871 -2.86505,-1.8909 -5.730251,-3.78199 -8.595774,-5.67338"
+                                   id="path915"
+                                   d="m 34.769434,-84.879608 c -1.513055,-1.532226 -2.968787,-3.006403 -2.895671,-4.268256 0.07312,-1.261854 1.703997,-2.281876 3.242849,-3.677242 1.538852,-1.395366 2.985679,-3.166058 1.805573,-4.837199 -1.180106,-1.671141 -4.987365,-3.242735 -4.929449,-5.195115 0.05792,-1.95238 3.981161,-4.28523 4.510279,-6.39714 0.529119,-2.11191 -2.336082,-4.003 -5.201646,-5.89433"
+                                   style="fill:none;stroke:#10163a;stroke-width:3.10099;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+                                <path
+                                   style="fill:none;stroke:#10163a;stroke-width:3.10099;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+                                   d="m 45.467515,-84.87961 c -1.513055,-1.532226 -2.968786,-3.006402 -2.895671,-4.268255 0.07312,-1.261854 1.703997,-2.281876 3.242849,-3.677242 1.538852,-1.395366 2.985679,-3.166058 1.805573,-4.837199 -1.180106,-1.671141 -4.987365,-3.242734 -4.929449,-5.195114 0.05792,-1.95238 3.981165,-4.28524 4.510282,-6.39714 0.529116,-2.11191 -2.336085,-4.003 -5.201649,-5.89433"
+                                   id="path915-9"
+                                   inkscape:original-d="m 45.467515,-84.87961 c -1.48426,-1.56066 -2.968784,-3.006404 -4.453574,-4.510002 1.631212,-1.019797 3.262093,-2.039821 4.892743,-3.060127 1.447149,-1.770498 2.893976,-3.54119 4.340567,-5.312182 -3.807146,-1.571393 -7.614404,-3.142989 -11.422003,-4.714879 3.923669,-2.33269 7.846916,-4.66555 11.769976,-6.99871 -2.86505,-1.8909 -5.730251,-3.78199 -8.595774,-5.67338"
+                                   inkscape:path-effect="#path-effect2614" />
+                                <path
+                                   inkscape:path-effect="#path-effect2633"
+                                   inkscape:original-d="m 56.1656,-84.87961 c -1.48426,-1.560662 -2.968784,-3.006405 -4.453574,-4.510004 1.631212,-1.019796 3.262093,-2.03982 4.892743,-3.060127 1.447149,-1.770498 2.893976,-3.541189 4.340567,-5.312182 -3.807146,-1.571393 -7.614404,-3.142987 -11.422003,-4.714877 3.923669,-2.33269 7.846916,-4.66555 11.769976,-6.99872 -2.86505,-1.89089 -5.730251,-3.78198 -8.595774,-5.67337"
+                                   id="path915-9-0"
+                                   d="m 56.1656,-84.87961 c -1.513055,-1.532227 -2.968786,-3.006403 -2.895671,-4.268257 0.07312,-1.261854 1.703997,-2.281876 3.242849,-3.677242 1.538852,-1.395366 2.985678,-3.166057 1.805572,-4.837198 -1.180105,-1.671141 -4.987363,-3.242733 -4.929448,-5.195113 0.05792,-1.95238 3.981162,-4.28524 4.510282,-6.39715 0.529119,-2.11191 -2.336084,-4.00299 -5.201649,-5.89432"
+                                   style="fill:none;stroke:#10163a;stroke-width:3.10099;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+                              </g>
+                            </g>
                          </g>
                        </g>
                      </g>
+                      <path
+                         id="path2782"
+                         d="m 93.574758,186.094 c -13.47814,0 -24.40427,10.92613 -24.40427,24.40428 0,13.47814 10.92613,24.40427 24.40427,24.40427 13.478152,0 24.404282,-10.92613 24.404282,-24.40427 0,-13.47815 -10.92613,-24.40428 -24.404282,-24.40428 z m 0,4.72341 c 10.876832,0 19.680872,8.80236 19.680872,19.68087 0,10.87683 -8.80236,19.68086 -19.680872,19.68086 -10.876819,0 -19.680863,-8.80236 -19.680863,-19.68086 0,-10.87684 8.802364,-19.68087 19.680863,-19.68087 m 13.796692,12.81883 -2.21764,-2.23554 c -0.45925,-0.463 -1.20693,-0.46604 -1.66993,-0.007 l -13.909644,13.79786 -5.883794,-5.93153 c -0.459258,-0.46298 -1.206929,-0.46603 -1.669926,-0.007 l -2.235645,2.21764 c -0.462989,0.45926 -0.466044,1.20693 -0.0068,1.67002 l 8.933241,9.00557 c 0.459258,0.46299 1.206929,0.46605 1.669926,0.007 l 16.983502,-16.84721 c 0.4629,-0.45935 0.46585,-1.20702 0.007,-1.67002 z"
+                         style="fill:#7367f0;fill-opacity:1;stroke-width:0.0984039" />
                    </g>
                  </g>
-                  <g
-                     id="g2560"
-                     transform="translate(0,15.33842)">
-                    <text
-                       xml:space="preserve"
-                       style="font-size:124.328px;line-height:1.25;font-family:'Fira Sans';-inkscape-font-specification:'Fira Sans';letter-spacing:0px;word-spacing:0px;opacity:0.99;stroke-width:0.690712"
-                       x="196.89775"
-                       y="235.17853"
-                       id="text852"><tspan
-                         sodipodi:role="line"
-                         id="tspan850"
-                         x="196.89775"
-                         y="235.17853"
-                         style="font-size:124.328px;fill:#10163a;fill-opacity:1;stroke-width:0.690712">Taskcafé</tspan></text>
-                    <text
-                       xml:space="preserve"
-                       style="font-size:22.6594px;line-height:1.25;font-family:'Fira Sans';-inkscape-font-specification:'Fira Sans';letter-spacing:0px;word-spacing:0px;opacity:0.99;stroke-width:0.596299"
-                       x="223.15549"
-                       y="261.83273"
-                       id="text856"><tspan
-                         sodipodi:role="line"
-                         id="tspan854"
-                         x="223.15549"
-                         y="261.83273"
-                         style="font-size:22.6594px;fill:#262c49;fill-opacity:1;stroke-width:0.596299">An open source project management tool</tspan></text>
-                  </g>
-                  <path
-                     style="fill:#7367f0;fill-opacity:1;stroke-width:0.0984039"
-                     d="m 93.574758,186.094 c -13.47814,0 -24.40427,10.92613 -24.40427,24.40428 0,13.47814 10.92613,24.40427 24.40427,24.40427 13.478152,0 24.404282,-10.92613 24.404282,-24.40427 0,-13.47815 -10.92613,-24.40428 -24.404282,-24.40428 z m 0,4.72341 c 10.876832,0 19.680872,8.80236 19.680872,19.68087 0,10.87683 -8.80236,19.68086 -19.680872,19.68086 -10.876819,0 -19.680863,-8.80236 -19.680863,-19.68086 0,-10.87684 8.802364,-19.68087 19.680863,-19.68087 m 13.796692,12.81883 -2.21764,-2.23554 c -0.45925,-0.463 -1.20693,-0.46604 -1.66993,-0.007 l -13.909644,13.79786 -5.883794,-5.93153 c -0.459258,-0.46298 -1.206929,-0.46603 -1.669926,-0.007 l -2.235645,2.21764 c -0.462989,0.45926 -0.466044,1.20693 -0.0068,1.67002 l 8.933241,9.00557 c 0.459258,0.46299 1.206929,0.46605 1.669926,0.007 l 16.983502,-16.84721 c 0.4629,-0.45935 0.46585,-1.20702 0.007,-1.67002 z"
-                     id="path2782" />
                </g>
              </g>
            </g>
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@ -1,4 +1,12 @@
 repos:
+- repo: local
+  hooks:
+    - id: eslint
+      name: eslint
+      entry: scripts/lint.sh
+      language: system
+      files: \.[jt]sx?$  # *.js, *.jsx, *.ts and *.tsx
+      types: [file]
 - hooks:
  - id: check-yaml
  - id: end-of-file-fixer
--- a/.tmuxinator.yml
+++ b/.tmuxinator.yml
@ -1,14 +1,12 @@
-name: citadel
+name: taskcafe
 root: .

-on_project_start: docker start test-db
-
 windows:
  - services:
      root: ./
      panes:
        - api:
-          - go run cmd/citadel/main.go web
+          - go run cmd/taskcafe/main.go web
        - yarn:
          - cd frontend
          - yarn start
@ -19,8 +17,8 @@ windows:
  - api/editor:
      root: ./
      panes:
-        - vim cmd/citadel/main.go
+        - vim cmd/taskcafe/main.go
  - database:
      root: ./
      panes:
-        - pgcli postgres://postgres:test@localhost:5432/citadel
+        - pgcli postgres://taskcafe:taskcafe_test@localhost:5432/taskcafe
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -0,0 +1,27 @@
+# Changelog
+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]
+
+### Added
+- Task sorting & filtering
+- Redesigned the Task Details UI
+- Implement task group actions (duplicate/delete all tasks/sort)
+
+### Fixed
+- 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
+
+### Fixed
+- fix panic(nil) when loading config if config file actually exists
+
+## [0.1.0] - 2020-08-21
+
+### Added
+- first "stable" alpha release
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@ -4,8 +4,13 @@ Thanks for wanting to contribute to Taskcafe!

 ### Where do I go from here?

-If you have noticed a bug or have a feature request, make one! If best to get confirmation
-of your bug or feature before starting work on a pull request.
+So you want to contribute to Taskcafe? Great!
+
+If you have noticed a bug or want to add a new feature, please [create an issue](https://github.com/JordanKnott/taskcafe/issues/new/choose) for it before starting any work on a pull request.
+
+Alternatively you can join the [Taskcafe discord](https://discord.gg/JkQDruh) and ask in the #questions channel.
+
+After the bug is validated or the feature is accepted by a project maintainer, the next step is to fork the repository!

 ### Fork & create a branch

@ -27,6 +32,10 @@ The `description` is a decriptive summary of the change the PR will make.
 - One PR per fix or feature
 - Setup & install [pre-commit hooks](https://pre-commit.com/#install) then install the hooks `pre-commit install && pre-commit install --hook-type commit-msg`

+### Unwanted PRs
+
+- Please do not submit pull requests containing only typo fixes, fixed spelling mistakes, or minor wording changes.
+
 ### Git Commit Message Style

 This project uses the [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/#summary) format.
--- a/README.md
+++ b/README.md
@ -1,24 +1,38 @@
-![Taskcafe](./.github/taskcafe-full.png)
+<p align="center">
+ <img width="450px" src="./.github/taskcafe-full.png" align="center" alt="Taskcafe logo" />
+</p>
+<p align="center">
+  <a href="https://discord.gg/JkQDruh">
+    <img alt="Discord" src="https://img.shields.io/discord/745396499613220955" />
+  </a>
+  <a href="https://github.com/JordanKnott/taskcafe/releases">
+    <img alt="Releases" src="https://img.shields.io/github/v/release/JordanKnott/taskcafe" />
+  </a>
+  <a href="https://hub.docker.com/repository/docker/taskcafe/taskcafe">
+    <img alt="Dockerhub" src="https://img.shields.io/docker/v/taskcafe/taskcafe?label=docker&sort=semver" />
+  </a>
+  <a href="https://goreportcard.com/report/github.com/JordanKnott/taskcafe">
+    <img alt="Go Report Card" src="https://goreportcard.com/badge/github.com/JordanKnott/taskcafe" />
+  </a>
+  <a href="">
+    <img alt="Docker pulls" src="https://img.shields.io/docker/pulls/taskcafe/taskcafe" />
+  </a>
+</p>
+<p align="center">
+Was this project useful? Please consider <a href="https://www.buymeacoffee.com/jordanknott">donating</a> to help me improve it!
+</p>

-[![Discord](https://img.shields.io/discord/745396499613220955)](https://discord.gg/JkQDruh)
-[![Releases](https://img.shields.io/github/v/release/JordanKnott/taskcafe)](https://github.com/JordanKnott/taskcafe/releases)
-[![Dockerhub](https://img.shields.io/docker/v/taskcafe/taskcafe)](https://hub.docker.com/repository/docker/taskcafe/taskcafe)
-[![Go Report Card](https://goreportcard.com/badge/github.com/JordanKnott/taskcafe)](https://goreportcard.com/report/github.com/JordanKnott/taskcafe)
-
-
-## Overview
+**Please note that this project is still in active development. Some options may not work yet! For updates on development, join the Discord server**

 ![Taskcafe](./.github/taskcafe_preview.png)

-A free & open source alternative project management tool.
-
-**Please note that this project is still in active development. Some options may not work yet!**
 ## Features

 Currently Taskcafe only offers basic task tracking through a Kanban board.

 Currently you can do the following to tasks:

+- Task sorting & filtering
 - Add colors & named labels
 - Add due dates
 - Descriptions written in Markdown
@ -26,7 +40,7 @@ Currently you can do the following to tasks:
 - Checklists
 - Mark tasks as complete

-For a list of planned features, check out the [roadmap](https://github.com/JordanKnott/taskcafe/wiki/Roadmap)!
+For a list of planned features, check out the [Roadmap](https://github.com/JordanKnott/taskcafe/wiki/Roadmap)!

 ## Installation

@ -44,7 +58,6 @@ Now do the following:

 ``` bash
 docker-compose -p taskcafe up -d
-docker-compose -p taskcafe -f docker-compose.yml -f docker-compose.migrate.yml run --rm migrate
 ```

 This will start a postgres instance as well as a taskcafe instance.
@ -80,25 +93,28 @@ This will:

 The newly created `taskcafe` binary can be found in the __dist__ folder.

-It contains everything neccessary to run except the config file. An example config file can be found in `conf/app.example.toml`
+It contains everything neccessary to run except the config file. An example config file can be found in `conf/app.example.toml`.

+For more information on configuration, please read the [wiki](https://github.com/JordanKnott/taskcafe/wiki/Configuration).
 The config will need to be copied to a `conf/app.toml` in the same place the binary is.

 Make sure to fill out the database section of the config in order to connect it to your database.

 Then run the database migrations with `taskcafe migrate`.

-Now you can run the web interface by running `taskcafe web`
+Now you can run the web interface by running `taskcafe web`.
+
+[A more detailed guide for installing on Ubuntu/Debian](https://github.com/JordanKnott/taskcafe/wiki/Installation-(ubuntu-debian))

 ## How is this different from X (Trello, NextCloud, etc)?

-One of the primary goal's of Taskcafe is to provide a project management tool that I personally enjoy using for my
+One of the primary goals of Taskcafe is to provide a project management tool that I personally enjoy using for my
 own projects and fits my workflow.

-During alpha developement, the current plan is to build the "basic" features - features that are pretty much
+During alpha development, the current plan is to build the "basic" features - features that are pretty much
 standard across all kanban boards / project management tools.

-Once Taskcafe is out of alpha, there are many features that I plan on adding that will differentiate it from other products (checkout the Roadmap for ideas on future plans).
+Once Taskcafe is out of alpha, there are many features that I plan on adding that will differentiate it from other products (check out the [Roadmap](https://github.com/JordanKnott/taskcafe/wiki/Roadmap) for ideas on future plans).

 ## Contributing & community

--- a/conf/air.toml
+++ b/conf/air.toml
@ -0,0 +1,47 @@
+# Config file for [Air](https://github.com/cosmtrek/air) in TOML format
+
+# Working directory
+# . or absolute path, please note that the directories following must be under root.
+root = "."
+tmp_dir = "tmp"
+
+[build]
+# Just plain old shell command. You could use `make` as well.
+cmd = "go build -o ./dist/taskcafe cmd/taskcafe/main.go"
+# Binary file yields from `cmd`.
+bin = "dist/taskcafe"
+# Customize binary.
+full_bin = "./dist/taskcafe web"
+# Watch these filename extensions.
+include_ext = ["go"]
+# Ignore these filename extensions or directories.
+exclude_dir = ["dist", "frontend"]
+# Watch these directories if you specified.
+include_dir = []
+# Exclude files.
+exclude_file = []
+# This log file places in your tmp_dir.
+log = "air.log"
+# It's not necessary to trigger build each time file changes if it's too frequent.
+delay = 1000 # ms
+# Stop running old binary when build errors occur.
+stop_on_error = true
+# Send Interrupt signal before killing process (windows does not support this feature)
+send_interrupt = false
+# Delay after sending Interrupt signal
+kill_delay = 500 # ms
+
+[log]
+# Show log time
+time = false
+
+[color]
+# Customize each part's color. If no color found, use the raw app log.
+main = "magenta"
+watcher = "cyan"
+build = "yellow"
+runner = "green"
+
+[misc]
+# Delete tmp directory on exit
+clean_on_exit = true
--- a/conf/taskcafe.example.toml
+++ b/conf/taskcafe.example.toml
@ -1,5 +1,5 @@
-[general]
-host = '0.0.0.0:3333'
+[server]
+hostname = '0.0.0.0:3333'

 [email_notifications]
 enabled = true
--- a/docker-compose.dev.yml
+++ b/docker-compose.dev.yml
@ -12,7 +12,7 @@ services:
    volumes:
      - taskcafe-postgres:/var/lib/postgresql/data
    ports:
-      - 5432:5432
+      - 8855:5432
  mailhog:
    image: mailhog/mailhog:latest
    restart: always
--- a/docker-compose.yml
+++ b/docker-compose.yml
@ -1,7 +1,8 @@
 version: "3"
 services:
  web:
-    build: .
+    image: taskcafe/taskcafe:latest
+    # build: .
    ports:
      - "3333:3333"
    depends_on:
--- a/frontend/.eslintrc.json
+++ b/frontend/.eslintrc.json
@ -30,7 +30,10 @@
    "@typescript-eslint/no-explicit-any": "off",
    "@typescript-eslint/no-unused-vars": "off",
    "react/jsx-filename-extension": [2, { "extensions": [".js", ".jsx", ".ts", ".tsx"] }],
+    "no-case-declarations": "off",
+    "no-plusplus": "off",
    "react/prop-types": 0,
+    "no-continue": "off",
    "react/jsx-props-no-spreading": "off",
    "no-param-reassign": "off",
    "import/extensions": [
--- a/frontend/package.json
+++ b/frontend/package.json
@ -6,14 +6,6 @@
    "@apollo/client": "^3.0.0-rc.8",
    "@apollo/react-common": "^3.1.4",
    "@apollo/react-hooks": "^3.1.3",
-    "@fortawesome/fontawesome-svg-core": "^1.2.27",
-    "@fortawesome/free-brands-svg-icons": "^5.12.1",
-    "@fortawesome/free-regular-svg-icons": "^5.12.1",
-    "@fortawesome/free-solid-svg-icons": "^5.12.1",
-    "@fortawesome/react-fontawesome": "^0.1.8",
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.3.2",
-    "@testing-library/user-event": "^7.1.2",
    "@types/axios": "^0.14.0",
    "@types/color": "^3.0.1",
    "@types/date-fns": "^2.6.0",
@ -28,6 +20,7 @@
    "@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.0.0",
    "apollo-cache-inmemory": "^1.6.5",
    "apollo-client": "^2.6.8",
@ -40,13 +33,13 @@
    "axios-auth-refresh": "^2.2.7",
    "color": "^3.1.2",
    "date-fns": "^2.14.0",
+    "dayjs": "^1.9.1",
    "graphql": "^15.0.0",
    "graphql-tag": "^2.10.3",
    "history": "^4.10.1",
    "immer": "^6.0.3",
    "jwt-decode": "^2.2.0",
-    "lodash": "^4.17.15",
-    "moment": "^2.24.0",
+    "lodash": "^4.17.20",
    "prop-types": "^15.7.2",
    "react": "^16.12.0",
    "react-autosize-textarea": "^7.0.0",
@ -59,6 +52,9 @@
    "react-router-dom": "^5.1.2",
    "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"
  },
@ -71,7 +67,8 @@
    "storybook": "start-storybook -p 9009 -s public",
    "build-storybook": "build-storybook -s public",
    "generate": "graphql-codegen",
-    "lint": "eslint --ext js,ts,tsx src"
+    "lint": "eslint --ext js,ts,tsx src",
+    "tsc": "tsc"
  },
  "eslintConfig": {
    "extends": "react-app"
@ -94,10 +91,10 @@
    "@graphql-codegen/typescript-operations": "^1.13.2",
    "@graphql-codegen/typescript-react-apollo": "^1.13.2",
    "@storybook/addon-actions": "^5.3.13",
-    "@storybook/addon-links": "^5.3.13",
    "@storybook/addon-backgrounds": "^5.3.17",
    "@storybook/addon-docs": "^5.3.17",
    "@storybook/addon-knobs": "^5.3.17",
+    "@storybook/addon-links": "^5.3.13",
    "@storybook/addon-storysource": "^5.3.17",
    "@storybook/addon-viewport": "^5.3.17",
    "@storybook/addons": "^5.3.13",
--- a/frontend/src/Admin/index.tsx
+++ b/frontend/src/Admin/index.tsx
@ -1,10 +1,11 @@
-import React, { useEffect, useState, useContext } from 'react';
+import React, { useEffect } from 'react';
 import Admin from 'shared/components/Admin';
 import Select from 'shared/components/Select';
 import GlobalTopNavbar from 'App/TopNavbar';
 import {
  useUsersQuery,
  useDeleteUserAccountMutation,
+  useDeleteInvitedUserAccountMutation,
  useCreateUserAccountMutation,
  UsersDocument,
  UsersQuery,
@ -16,8 +17,9 @@ 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 UserContext, { useCurrentUser } from 'App/context';
+import { useCurrentUser } from 'App/context';
 import { Redirect } from 'react-router';
+import NOOP from 'shared/utils/noop';

 const DeleteUserWrapper = styled.div`
  display: flex;
@ -37,6 +39,7 @@ const DeleteUserButton = styled(Button)`
 type DeleteUserPopupProps = {
  onDeleteUser: () => void;
 };
+
 const DeleteUserPopup: React.FC<DeleteUserPopupProps> = ({ onDeleteUser }) => {
  return (
    <DeleteUserWrapper>
@ -47,10 +50,12 @@ const DeleteUserPopup: React.FC<DeleteUserPopupProps> = ({ onDeleteUser }) => {
    </DeleteUserWrapper>
  );
 };
+
 type RoleCodeOption = {
  label: string;
  value: string;
 };
+
 type CreateUserData = {
  email: string;
  username: string;
@ -65,6 +70,7 @@ const CreateUserForm = styled.form`
  flex-direction: column;
  margin: 0 12px;
 `;
+
 const CreateUserButton = styled(Button)`
  margin-top: 8px;
  padding: 6px 12px;
@ -85,7 +91,7 @@ type AddUserPopupProps = {
 };

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

  const createUser = (data: CreateUserData) => {
    onAddUser(data);
@ -115,7 +121,7 @@ const AddUserPopup: React.FC<AddUserPopupProps> = ({ onAddUser }) => {
        control={control}
        name="roleCode"
        rules={{ required: 'Role is required' }}
-        render={({ onChange, onBlur, value }) => (
+        render={({ onChange, value }) => (
          <Select
            label="Role"
            value={value}
@ -166,11 +172,22 @@ const AddUserPopup: React.FC<AddUserPopupProps> = ({ onAddUser }) => {

 const AdminRoute = () => {
  useEffect(() => {
-    document.title = 'Taskcafé | Admin';
+    document.title = 'Admin | Taskcafé';
  }, []);
  const { loading, data } = useUsersQuery();
  const { showPopup, hidePopup } = usePopup();
  const { user } = useCurrentUser();
+  const [deleteInvitedUser] = useDeleteInvitedUserAccountMutation({
+    update: (client, response) => {
+      updateApolloCache<UsersQuery>(client, UsersDocument, cache =>
+        produce(cache, draftCache => {
+          draftCache.invitedUsers = cache.invitedUsers.filter(
+            u => u.id !== response.data.deleteInvitedUserAccount.invitedUser.id,
+          );
+        }),
+      );
+    },
+  });
  const [deleteUser] = useDeleteUserAccountMutation({
    update: (client, response) => {
      updateApolloCache<UsersQuery>(client, UsersDocument, cache =>
@ -198,21 +215,26 @@ const AdminRoute = () => {
    },
  });
  if (loading) {
-    return <GlobalTopNavbar projectID={null} onSaveProjectName={() => {}} name={null} />;
+    return <GlobalTopNavbar projectID={null} onSaveProjectName={NOOP} name={null} />;
  }
  if (data && user) {
-    if (user.roles.org != 'admin') {
+    if (user.roles.org !== 'admin') {
      return <Redirect to="/" />;
    }
    return (
      <>
-        <GlobalTopNavbar projectID={null} onSaveProjectName={() => {}} name={null} />
+        <GlobalTopNavbar projectID={null} onSaveProjectName={NOOP} name={null} />
        <Admin
          initialTab={0}
          users={data.users}
-          canInviteUser={user.roles.org == 'admin'}
-          onInviteUser={() => {}}
-          onUpdateUserPassword={(user, password) => {
+          invitedUsers={data.invitedUsers}
+          canInviteUser={user.roles.org === 'admin'}
+          onInviteUser={NOOP}
+          onUpdateUserPassword={() => {
+            hidePopup();
+          }}
+          onDeleteInvitedUser={invitedUserID => {
+            deleteInvitedUser({ variables: { invitedUserID } });
            hidePopup();
          }}
          onDeleteUser={(userID, newOwnerID) => {
@ -224,8 +246,8 @@ const AdminRoute = () => {
              $target,
              <Popup tab={0} title="Add member" onClose={() => hidePopup()}>
                <AddUserPopup
-                  onAddUser={user => {
-                    const { roleCode, ...userData } = user;
+                  onAddUser={u => {
+                    const { roleCode, ...userData } = u;
                    createUser({ variables: { ...userData, roleCode: roleCode.value } });
                    hidePopup();
                  }}
--- a/frontend/src/App/Routes.tsx
+++ b/frontend/src/App/Routes.tsx
@ -1,10 +1,11 @@
 import React from 'react';
-import {Router, Switch, Route} from 'react-router-dom';
+import { Switch, Route } from 'react-router-dom';
 import * as H from 'history';

 import Dashboard from 'Dashboard';
 import Admin from 'Admin';
 import Projects from 'Projects';
+import Outline from 'Outline';
 import Project from 'Projects/Project';
 import Teams from 'Teams';
 import Login from 'Auth';
@ -20,11 +21,12 @@ const MainContent = styled.div`
  flex-direction: column;
  flex-grow: 1;
 `;
+
 type RoutesProps = {
  history: H.History;
 };

-const Routes = ({history}: RoutesProps) => (
+const Routes: React.FC<RoutesProps> = () => (
  <Switch>
    <Route exact path="/login" component={Login} />
    <Route exact path="/install" component={Install} />
@ -35,6 +37,7 @@ const Routes = ({history}: RoutesProps) => (
      <Route path="/teams/:teamID" component={Teams} />
      <Route path="/profile" component={Profile} />
      <Route path="/admin" component={Admin} />
+      <Route path="/outline" component={Outline} />
    </MainContent>
  </Switch>
 );
--- a/frontend/src/App/ThemeStyles.ts
+++ b/frontend/src/App/ThemeStyles.ts
@ -1,4 +1,4 @@
-import { createGlobalStyle, DefaultTheme } from 'styled-components';
+import { DefaultTheme } from 'styled-components';

 const theme: DefaultTheme = {
  borderRadius: {
@ -25,4 +25,4 @@ const theme: DefaultTheme = {
  },
 };

-export { theme };
+export default theme;
--- a/frontend/src/App/TopNavbar.tsx
+++ b/frontend/src/App/TopNavbar.tsx
@ -1,13 +1,13 @@
-import React, { useState, useContext, useEffect } from 'react';
+import React from 'react';
 import TopNavbar, { MenuItem } from 'shared/components/TopNavbar';
 import styled from 'styled-components/macro';
-import DropdownMenu, { ProfileMenu } from 'shared/components/DropdownMenu';
+import { ProfileMenu } from 'shared/components/DropdownMenu';
 import ProjectSettings, { DeleteConfirm, DELETE_INFO } from 'shared/components/ProjectSettings';
 import { useHistory } from 'react-router';
-import { UserContext, PermissionLevel, PermissionObjectType, useCurrentUser } from 'App/context';
+import { PermissionLevel, PermissionObjectType, useCurrentUser } from 'App/context';
 import {
  RoleCode,
-  useMeQuery,
+  useTopNavbarQuery,
  useDeleteProjectMutation,
  useGetProjectsQuery,
  GetProjectsDocument,
@ -18,6 +18,8 @@ import produce from 'immer';
 import { Link } from 'react-router-dom';
 import MiniProfile from 'shared/components/MiniProfile';
 import cache from 'App/cache';
+import NOOP from 'shared/utils/noop';
+import NotificationPopup, { NotificationItem } from 'shared/components/NotifcationPopup';

 const TeamContainer = styled.div`
  display: flex;
@ -130,12 +132,12 @@ const ProjectFinder = () => {
    return <span>loading</span>;
  }
  if (data) {
-    const { projects, teams, organizations } = data;
+    const { projects, teams } = data;
    const projectTeams = teams.map(team => {
      return {
        id: team.id,
        name: team.name,
-        projects: projects.filter(project => project.team.id === team.id),
+        projects: projects.filter(project => project.team && project.team.id === team.id),
      };
    });
    return (
@ -196,7 +198,7 @@ export const ProjectPopup: React.FC<ProjectPopupProps> = ({ history, name, proje
      <Popup title={null} tab={0}>
        <ProjectSettings
          onDeleteProject={() => {
-            setTab(1, 300);
+            setTab(1, { width: 300 });
          }}
        />
      </Popup>
@ -228,39 +230,41 @@ type GlobalTopNavbarProps = {
  menuType?: Array<MenuItem>;
  onChangeRole?: (userID: string, roleCode: RoleCode) => void;
  projectMembers?: null | Array<TaskUser>;
+  projectInvitedMembers?: null | Array<InvitedUser>;
  onSaveProjectName?: (projectName: string) => void;
  onInviteUser?: ($target: React.RefObject<HTMLElement>) => void;
  onSetTab?: (tab: number) => void;
  onRemoveFromBoard?: (userID: string) => void;
+  onRemoveInvitedFromBoard?: (email: string) => void;
 };

 const GlobalTopNavbar: React.FC<GlobalTopNavbarProps> = ({
  currentTab,
  onSetTab,
  menuType,
-  projectID,
  teamID,
  onChangeProjectOwner,
  onChangeRole,
  name,
  popupContent,
  projectMembers,
+  projectInvitedMembers,
  onInviteUser,
  onSaveProjectName,
+  onRemoveInvitedFromBoard,
  onRemoveFromBoard,
-  nameOnly,
 }) => {
  const { user, setUserRoles, setUser } = useCurrentUser();
-  const { loading, data } = useMeQuery({
-    onCompleted: data => {
+  const { loading, data } = useTopNavbarQuery({
+    onCompleted: response => {
      if (user && user.roles) {
        setUserRoles({
          org: user.roles.org,
-          teams: data.me.teamRoles.reduce((map, obj) => {
+          teams: response.me.teamRoles.reduce((map, obj) => {
            map.set(obj.teamID, obj.roleCode);
            return map;
          }, new Map<string, string>()),
-          projects: data.me.projectRoles.reduce((map, obj) => {
+          projects: response.me.projectRoles.reduce((map, obj) => {
            map.set(obj.projectID, obj.roleCode);
            return map;
          }, new Map<string, string>()),
@ -268,7 +272,7 @@ const GlobalTopNavbar: React.FC<GlobalTopNavbarProps> = ({
      }
    },
  });
-  const { showPopup, hidePopup, setTab } = usePopup();
+  const { showPopup, hidePopup } = usePopup();
  const history = useHistory();
  const onLogout = () => {
    fetch('/auth/logout', {
@ -301,13 +305,31 @@ const GlobalTopNavbar: React.FC<GlobalTopNavbarProps> = ({
          }}
        />
      </Popup>,
-      195,
+      { width: 195 },
    );
  };

  const onOpenSettings = ($target: React.RefObject<HTMLElement>) => {
    if (popupContent) {
-      showPopup($target, popupContent, 185);
+      showPopup($target, popupContent, { width: 185 });
+    }
+  };
+
+  const onNotificationClick = ($target: React.RefObject<HTMLElement>) => {
+    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: '#7367f0' },
+      );
    }
  };

@ -315,6 +337,34 @@ const GlobalTopNavbar: React.FC<GlobalTopNavbarProps> = ({
    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;
+    if (member) {
+      showPopup(
+        $targetRef,
+        <MiniProfile
+          onRemoveFromBoard={() => {
+            if (onRemoveInvitedFromBoard) {
+              onRemoveInvitedFromBoard(member.email);
+            }
+          }}
+          invited
+          user={{
+            id: member.email,
+            fullName: member.email,
+            bio: 'Invited',
+            profileIcon: {
+              bgColor: '#000',
+              url: null,
+              initials: member.email.charAt(0),
+            },
+          }}
+          bio=""
+        />,
+      );
+    }
+  };
+
  const onMemberProfile = ($targetRef: React.RefObject<HTMLElement>, memberID: string) => {
    const member = projectMembers ? projectMembers.find(u => u.id === memberID) : null;
    const warning =
@ -364,16 +414,18 @@ const GlobalTopNavbar: React.FC<GlobalTopNavbarProps> = ({
        canEditProjectName={userIsTeamOrProjectAdmin}
        canInviteUser={userIsTeamOrProjectAdmin}
        onMemberProfile={onMemberProfile}
+        onInvitedMemberProfile={onInvitedMemberProfile}
        onInviteUser={onInviteUser}
        onChangeRole={onChangeRole}
        onChangeProjectOwner={onChangeProjectOwner}
-        onNotificationClick={() => {}}
+        onNotificationClick={onNotificationClick}
        onSetTab={onSetTab}
        onRemoveFromBoard={onRemoveFromBoard}
        onDashboardClick={() => {
          history.push('/');
        }}
        projectMembers={projectMembers}
+        projectInvitedMembers={projectInvitedMembers}
        onProfileClick={onProfileClick}
        onSaveName={onSaveProjectName}
        onOpenSettings={onOpenSettings}
--- a/frontend/src/App/index.tsx
+++ b/frontend/src/App/index.tsx
@ -3,14 +3,48 @@ 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 theme from './ThemeStyles';
 import Routes from './Routes';
 import { UserContext, CurrentUserRaw, CurrentUserRoles, PermissionLevel, PermissionObjectType } from './context';

+import 'react-toastify/dist/ReactToastify.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: rgba(${props => props.theme.colors.danger});
+  }
+  .Toastify__toast--warning {
+    background: rgba(${props => props.theme.colors.warning});
+  }
+  .Toastify__toast--success {
+    background: rgba(${props => props.theme.colors.success});
+  }
+  .Toastify__toast-body {
+  }
+  .Toastify__progress-bar {
+  }
+  .Toastify__close-button {
+    display: none;
+  }
+`;
+
 const history = createBrowserHistory();
 type RefreshTokenResponse = {
  accessToken: string;
@ -72,6 +106,18 @@ const App = () => {
              )}
            </PopupProvider>
          </Router>
+          <StyledContainer
+            position="bottom-right"
+            autoClose={5000}
+            hideProgressBar
+            newestOnTop
+            closeOnClick
+            rtl={false}
+            pauseOnFocusLoss
+            draggable
+            pauseOnHover
+            limit={5}
+          />
        </ThemeProvider>
      </UserContext.Provider>
    </>
--- a/frontend/src/Auth/index.tsx
+++ b/frontend/src/Auth/index.tsx
@ -1,13 +1,10 @@
 import React, { useState, useEffect, useContext } from 'react';
-import { useForm } from 'react-hook-form';
 import { useHistory } from 'react-router';
-
-import { setAccessToken } from 'shared/utils/accessToken';
-
-import Login from 'shared/components/Login';
-import { Container, LoginWrapper } from './Styles';
-import UserContext, { PermissionLevel, PermissionObjectType } from 'App/context';
 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';

 const Auth = () => {
  const [invalidLoginAttempt, setInvalidLoginAttempt] = useState(0);
--- a/frontend/src/Install/index.tsx
+++ b/frontend/src/Install/index.tsx
@ -1,18 +1,13 @@
 import React, { useEffect, useContext } from 'react';
 import axios from 'axios';
 import Register from 'shared/components/Register';
-import { Container, LoginWrapper } from './Styles';
-import { useCreateUserAccountMutation, useMeQuery, MeDocument, MeQuery } from 'shared/generated/graphql';
 import { useHistory } from 'react-router';
 import { getAccessToken, setAccessToken } from 'shared/utils/accessToken';
-import updateApolloCache from 'shared/utils/cache';
-import produce from 'immer';
-import { useApolloClient } from '@apollo/react-hooks';
-import UserContext, { PermissionLevel, PermissionObjectType } from 'App/context';
+import UserContext from 'App/context';
 import jwtDecode from 'jwt-decode';
+import { Container, LoginWrapper } from './Styles';

 const Install = () => {
-  const client = useApolloClient();
  const history = useHistory();
  const { setUser } = useContext(UserContext);
  useEffect(() => {
@ -63,8 +58,8 @@ const Install = () => {
                    history.replace('/login');
                  } else {
                    const response: RefreshTokenResponse = await x.data;
-                    const { accessToken, isInstalled } = response;
-                    const claims: JWTToken = jwtDecode(accessToken);
+                    const { accessToken: newToken, isInstalled } = response;
+                    const claims: JWTToken = jwtDecode(newToken);
                    const currentUser = {
                      id: claims.userId,
                      roles: {
@ -74,7 +69,7 @@ const Install = () => {
                      },
                    };
                    setUser(currentUser);
-                    setAccessToken(accessToken);
+                    setAccessToken(newToken);
                    if (!isInstalled) {
                      history.replace('/install');
                    }
--- a/frontend/src/Outline/DragDebug.tsx
+++ b/frontend/src/Outline/DragDebug.tsx
@ -0,0 +1,24 @@
+import React from 'react';
+import { DragDebugWrapper } from './Styles';
+
+type DragDebugProps = {
+  zone: ImpactZone | null;
+  depthTarget: number;
+  draggedNodes: Array<string> | null;
+};
+
+const DragDebug: React.FC<DragDebugProps> = ({ zone, depthTarget, draggedNodes }) => {
+  let aboveID = null;
+  let belowID = null;
+  if (zone) {
+    aboveID = zone.above ? zone.above.node.id : null;
+    belowID = zone.below ? zone.below.node.id : null;
+  }
+  return (
+    <DragDebugWrapper>{`aboveID=${aboveID} / belowID=${belowID} / depthTarget=${depthTarget} draggedNodes=${
+      draggedNodes ? draggedNodes.toString() : null
+    }`}</DragDebugWrapper>
+  );
+};
+
+export default DragDebug;
--- a/frontend/src/Outline/DragIndicator.tsx
+++ b/frontend/src/Outline/DragIndicator.tsx
@ -0,0 +1,41 @@
+import React from 'react';
+import { getDimensions } from './utils';
+import { DragIndicatorBar } from './Styles';
+
+type DragIndicatorProps = {
+  container: React.RefObject<HTMLDivElement>;
+  zone: ImpactZone;
+  depthTarget: number;
+};
+
+const DragIndicator: React.FC<DragIndicatorProps> = ({ container, zone, depthTarget }) => {
+  let top = 0;
+  let width = 0;
+  if (zone.below === null) {
+    if (zone.above) {
+      const entry = getDimensions(zone.above.dimensions.entry);
+      const children = getDimensions(zone.above.dimensions.children);
+      if (children) {
+        top = children.top;
+        width = children.width - depthTarget * 35;
+      } else if (entry) {
+        top = entry.bottom;
+        width = entry.width - depthTarget * 35;
+      }
+    }
+  } else if (zone.below) {
+    const entry = getDimensions(zone.below.dimensions.entry);
+    if (entry) {
+      top = entry.top;
+      width = entry.width - depthTarget * 35;
+    }
+  }
+  let left = 0;
+  if (container && container.current) {
+    left = container.current.getBoundingClientRect().left + (depthTarget - 1) * 35;
+    width = container.current.getBoundingClientRect().width - depthTarget * 35;
+  }
+  return <DragIndicatorBar top={top} left={left} width={width} />;
+};
+
+export default DragIndicator;
--- a/frontend/src/Outline/Dragger.tsx
+++ b/frontend/src/Outline/Dragger.tsx
@ -0,0 +1,242 @@
+import React, { useRef, useCallback, useState, useMemo, useEffect } from 'react';
+import { Dot } from 'shared/icons';
+import styled from 'styled-components';
+import {
+  findNextDraggable,
+  getDimensions,
+  getTargetDepth,
+  getNodeAbove,
+  getBelowParent,
+  findNodeAbove,
+  getNodeOver,
+  getLastChildInBranch,
+  findNodeDepth,
+} from './utils';
+import { useDrag } from './useDrag';
+
+const Container = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  border-radius: 9px;
+  background: rgba(${p => p.theme.colors.primary});
+  svg {
+    fill: rgba(${p => p.theme.colors.text.primary});
+    stroke: rgba(${p => p.theme.colors.text.primary});
+  }
+`;
+
+type DraggerProps = {
+  container: React.RefObject<HTMLDivElement>;
+  draggedNodes: { nodes: Array<string>; first?: OutlineNode | null };
+  isDragging: boolean;
+  onDragEnd: (zone: ImpactZone) => void;
+  initialPos: { x: number; y: number };
+};
+
+const Dragger: React.FC<DraggerProps> = ({ draggedNodes, container, onDragEnd, isDragging, initialPos }) => {
+  const [pos, setPos] = useState<{ x: number; y: number }>(initialPos);
+  const { outline, impact, setImpact } = useDrag();
+  const $handle = useRef<HTMLDivElement>(null);
+  const handleMouseUp = useCallback(() => {
+    onDragEnd(impact ? impact.zone : { below: null, above: null });
+  }, [impact]);
+  const handleMouseMove = useCallback(
+    e => {
+      e.preventDefault();
+      const { clientX, clientY, pageX, pageY } = e;
+      setPos({ x: clientX, y: clientY });
+      const { curDepth, curPosition, curDraggable } = getNodeOver({ x: clientX, y: clientY }, outline.current);
+      let depthTarget: number = 0;
+      let aboveNode: null | OutlineNode = null;
+      let belowNode: null | OutlineNode = null;
+
+      if (curPosition === 'before') {
+        belowNode = curDraggable;
+      } else {
+        aboveNode = curDraggable;
+      }
+
+      // if belowNode has the depth of 1, then the above element will be a part of a different branch
+
+      const { relationships, nodes } = outline.current;
+      if (!belowNode || !aboveNode) {
+        if (belowNode) {
+          aboveNode = findNodeAbove(outline.current, curDepth, belowNode);
+        } else if (aboveNode) {
+          let targetBelowNode: RelationshipChild | null = null;
+          const parent = relationships.get(aboveNode.parent);
+          if (aboveNode.children !== 0 && !aboveNode.collapsed) {
+            const abr = relationships.get(aboveNode.id);
+            if (abr) {
+              const newTarget = abr.children[0];
+              if (newTarget) {
+                targetBelowNode = newTarget;
+              }
+            }
+          } else if (parent) {
+            const aboveNodeIndex = parent.children.findIndex(c => aboveNode && c.id === aboveNode.id);
+            if (aboveNodeIndex !== -1) {
+              if (aboveNodeIndex === parent.children.length - 1) {
+                targetBelowNode = getBelowParent(aboveNode, outline.current);
+              } else {
+                const nextChild = parent.children[aboveNodeIndex + 1];
+                targetBelowNode = nextChild ?? null;
+              }
+            }
+          }
+          if (targetBelowNode) {
+            const depthNodes = nodes.get(targetBelowNode.depth);
+            if (depthNodes) {
+              belowNode = depthNodes.get(targetBelowNode.id) ?? null;
+            }
+          }
+        }
+      }
+
+      // if outside outline, get either first or last item in list based on mouse Y
+      if (!aboveNode && !belowNode) {
+        if (container && container.current) {
+          const bounds = container.current.getBoundingClientRect();
+          if (clientY < bounds.top + bounds.height / 2) {
+            const rootChildren = outline.current.relationships.get('root');
+            const rootDepth = outline.current.nodes.get(1);
+            if (rootChildren && rootDepth) {
+              const firstChild = rootChildren.children[0];
+              belowNode = rootDepth.get(firstChild.id) ?? null;
+              aboveNode = null;
+            }
+          } else {
+            // TODO: enhance to actually get last child item, not last top level branch
+            const rootChildren = outline.current.relationships.get('root');
+            const rootDepth = outline.current.nodes.get(1);
+            if (rootChildren && rootDepth) {
+              const lastChild = rootChildren.children[rootChildren.children.length - 1];
+              const lastParentNode = rootDepth.get(lastChild.id) ?? null;
+
+              if (lastParentNode) {
+                const lastBranchChild = getLastChildInBranch(outline.current, lastParentNode);
+                if (lastBranchChild) {
+                  const lastChildDepth = outline.current.nodes.get(lastBranchChild.depth);
+                  if (lastChildDepth) {
+                    aboveNode = lastChildDepth.get(lastBranchChild.id) ?? null;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+
+      if (aboveNode) {
+        const { ancestors } = findNodeDepth(outline.current.published, aboveNode.id);
+        for (let i = 0; i < draggedNodes.nodes.length; i++) {
+          const nodeID = draggedNodes.nodes[i];
+          if (ancestors.find(c => c === nodeID)) {
+            if (draggedNodes.first) {
+              belowNode = draggedNodes.first;
+              aboveNode = findNodeAbove(outline.current, aboveNode ? aboveNode.depth : 1, draggedNodes.first);
+            } else {
+              const { depth } = findNodeDepth(outline.current.published, nodeID);
+              const nodeDepth = outline.current.nodes.get(depth);
+              const targetNode = nodeDepth ? nodeDepth.get(nodeID) : null;
+              if (targetNode) {
+                belowNode = targetNode;
+
+                aboveNode = findNodeAbove(outline.current, depth, targetNode);
+              }
+            }
+          }
+        }
+      }
+
+      // calculate available depths
+
+      let minDepth = 1;
+      let maxDepth = 2;
+      if (aboveNode) {
+        const aboveParent = relationships.get(aboveNode.parent);
+        if (aboveNode.children !== 0 && !aboveNode.collapsed) {
+          minDepth = aboveNode.depth + 1;
+          maxDepth = aboveNode.depth + 1;
+        } else if (aboveParent) {
+          minDepth = aboveNode.depth;
+          maxDepth = aboveNode.depth + 1;
+          const aboveNodeIndex = aboveParent.children.findIndex(c => aboveNode && c.id === aboveNode.id);
+          if (aboveNodeIndex === aboveParent.children.length - 1) {
+            minDepth = belowNode ? belowNode.depth : minDepth;
+          }
+        }
+      }
+      if (aboveNode) {
+        const dimensions = outline.current.dimensions.get(aboveNode.id);
+        const entry = getDimensions(dimensions?.entry);
+        if (entry) {
+          depthTarget = getTargetDepth(clientX, entry.left, { min: minDepth, max: maxDepth });
+        }
+      }
+
+      let aboveImpact: null | ImpactZoneData = null;
+      let belowImpact: null | ImpactZoneData = null;
+      if (aboveNode) {
+        const aboveDim = outline.current.dimensions.get(aboveNode.id);
+        if (aboveDim) {
+          aboveImpact = {
+            node: aboveNode,
+            dimensions: aboveDim,
+          };
+        }
+      }
+      if (belowNode) {
+        const belowDim = outline.current.dimensions.get(belowNode.id);
+        if (belowDim) {
+          belowImpact = {
+            node: belowNode,
+            dimensions: belowDim,
+          };
+        }
+      }
+
+      setImpact({
+        zone: {
+          above: aboveImpact,
+          below: belowImpact,
+        },
+        depth: depthTarget,
+      });
+    },
+    [outline.current.nodes],
+  );
+  useEffect(() => {
+    document.addEventListener('mouseup', handleMouseUp);
+    document.addEventListener('mousemove', handleMouseMove);
+    return () => {
+      document.removeEventListener('mouseup', handleMouseUp);
+      document.removeEventListener('mousemove', handleMouseMove);
+    };
+  }, []);
+  const styles = useMemo(() => {
+    const position: 'absolute' | 'relative' = isDragging ? 'absolute' : 'relative';
+    return {
+      cursor: isDragging ? '-webkit-grabbing' : '-webkit-grab',
+      transform: `translate(${pos.x - 10}px, ${pos.y - 4}px)`,
+      transition: isDragging ? 'none' : 'transform 500ms',
+      zIndex: isDragging ? 2 : 1,
+      position,
+    };
+  }, [isDragging, pos]);
+
+  return (
+    <>
+      {pos && (
+        <Container ref={$handle} style={styles}>
+          <Dot width={18} height={18} />
+        </Container>
+      )}
+    </>
+  );
+};
+
+export default Dragger;
--- a/frontend/src/Outline/Entry.tsx
+++ b/frontend/src/Outline/Entry.tsx
@ -0,0 +1,155 @@
+import React, { useRef, useEffect } from 'react';
+import { Dot, CaretDown, CaretRight } from 'shared/icons';
+
+import { EntryChildren, EntryWrapper, EntryContent, EntryInnerContent, EntryHandle, ExpandButton } from './Styles';
+import { useDrag } from './useDrag';
+
+function getCaretPosition(editableDiv: any) {
+  let caretPos = 0;
+  let sel: any = null;
+  let range: any = null;
+  if (window.getSelection) {
+    sel = window.getSelection();
+    if (sel && sel.rangeCount) {
+      range = sel.getRangeAt(0);
+      if (range.commonAncestorContainer.parentNode === editableDiv) {
+        caretPos = range.endOffset;
+      }
+    }
+  }
+  return caretPos;
+}
+
+type EntryProps = {
+  id: string;
+  collapsed?: boolean;
+  onToggleCollapse: (id: string, collapsed: boolean) => void;
+  parentID: string;
+  onStartDrag: (e: { id: string; clientX: number; clientY: number }) => void;
+  onStartSelect: (e: { id: string; depth: number }) => void;
+  isRoot?: boolean;
+  selection: null | Array<{ id: string }>;
+  draggedNodes: null | Array<string>;
+  entries: Array<ItemElement>;
+  onCancelDrag: () => void;
+  position: number;
+  chain?: Array<string>;
+  depth?: number;
+};
+
+const Entry: React.FC<EntryProps> = ({
+  id,
+  parentID,
+  isRoot = false,
+  selection,
+  onToggleCollapse,
+  onStartSelect,
+  position,
+  onCancelDrag,
+  onStartDrag,
+  collapsed = false,
+  draggedNodes,
+  entries,
+  chain = [],
+  depth = 0,
+}) => {
+  const $entry = useRef<HTMLDivElement>(null);
+  const $children = useRef<HTMLDivElement>(null);
+  const { setNodeDimensions, clearNodeDimensions } = useDrag();
+  useEffect(() => {
+    if (isRoot) return;
+    if ($entry && $entry.current) {
+      setNodeDimensions(id, {
+        entry: $entry,
+        children: entries.length !== 0 ? $children : null,
+      });
+    }
+    return () => {
+      clearNodeDimensions(id);
+    };
+  }, [position, depth, entries]);
+  let showHandle = true;
+  if (draggedNodes && draggedNodes.length === 1 && draggedNodes.find(c => c === id)) {
+    showHandle = false;
+  }
+  let isSelected = false;
+  if (selection && selection.find(c => c.id === id)) {
+    isSelected = true;
+  }
+  let onSaveTimer: any = null;
+  const onSaveTimeout = 300;
+  return (
+    <EntryWrapper isSelected={isSelected} isDragging={!showHandle}>
+      {!isRoot && (
+        <EntryContent>
+          {entries.length !== 0 && (
+            <ExpandButton onClick={() => onToggleCollapse(id, !collapsed)}>
+              {collapsed ? <CaretRight width={20} height={20} /> : <CaretDown width={20} height={20} />}
+            </ExpandButton>
+          )}
+          {showHandle && (
+            <EntryHandle
+              onMouseUp={() => onCancelDrag()}
+              onMouseDown={e => {
+                onStartDrag({ id, clientX: e.clientX, clientY: e.clientY });
+              }}
+            >
+              <Dot width={18} height={18} />
+            </EntryHandle>
+          )}
+          <EntryInnerContent
+            onMouseDown={() => {
+              onStartSelect({ id, depth });
+            }}
+            onKeyDown={e => {
+              if (e.key === 'z' && e.ctrlKey) {
+                if ($entry && $entry.current) {
+                  console.log(getCaretPosition($entry.current));
+                }
+              } else {
+                clearTimeout(onSaveTimer);
+                if ($entry && $entry.current) {
+                  onSaveTimer = setTimeout(() => {
+                    if ($entry && $entry.current) {
+                      console.log($entry.current.textContent);
+                    }
+                  }, onSaveTimeout);
+                }
+              }
+            }}
+            contentEditable
+            ref={$entry}
+          >
+            {`${id.toString()} - ${position}`}
+          </EntryInnerContent>
+        </EntryContent>
+      )}
+      {entries.length !== 0 && !collapsed && (
+        <EntryChildren ref={$children} isRoot={isRoot}>
+          {entries
+            .sort((a, b) => a.position - b.position)
+            .map(entry => (
+              <Entry
+                parentID={id}
+                key={entry.id}
+                position={entry.position}
+                depth={depth + 1}
+                draggedNodes={draggedNodes}
+                collapsed={entry.collapsed}
+                id={entry.id}
+                onStartSelect={onStartSelect}
+                onStartDrag={onStartDrag}
+                onCancelDrag={onCancelDrag}
+                entries={entry.children ?? []}
+                chain={[...chain, id]}
+                selection={selection}
+                onToggleCollapse={onToggleCollapse}
+              />
+            ))}
+        </EntryChildren>
+      )}
+    </EntryWrapper>
+  );
+};
+
+export default Entry;
--- a/frontend/src/Outline/Styles.ts
+++ b/frontend/src/Outline/Styles.ts
@ -0,0 +1,164 @@
+import styled, { css } from 'styled-components';
+import { mixin } from 'shared/utils/styles';
+
+export const EntryWrapper = styled.div<{ isDragging: boolean; isSelected: boolean }>`
+  position: relative;
+  ${props =>
+    props.isDragging &&
+    css`
+      &:before {
+        border-radius: 3px;
+        content: '';
+        position: absolute;
+        top: 2px;
+        right: -5px;
+        left: -5px;
+        bottom: -2px;
+        background-color: #eceef0;
+      }
+    `}
+  ${props =>
+    props.isSelected &&
+    css`
+      &:before {
+        border-radius: 3px;
+        content: '';
+        position: absolute;
+        top: 2px;
+        right: -5px;
+        bottom: -2px;
+        left: -5px;
+        background-color: rgba(${props.theme.colors.primary}, 0.75);
+      }
+    `}
+`;
+
+export const EntryChildren = styled.div<{ isRoot: boolean }>`
+  position: relative;
+  ${props =>
+    !props.isRoot &&
+    css`
+      margin-left: 10px;
+      padding-left: 25px;
+      border-left: 1px solid rgba(${props.theme.colors.text.primary}, 0.6);
+    `}
+`;
+
+export const PageContent = styled.div`
+  min-height: calc(100vh - 146px);
+  width: 100%;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  box-shadow: none;
+  user-select: none;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 700px;
+  padding-left: 56px;
+  padding-right: 56px;
+  padding-top: 24px;
+  padding-bottom: 24px;
+  text-size-adjust: none;
+`;
+
+export const DragHandle = styled.div<{ top: number; left: number }>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: fixed;
+  left: 0;
+  top: 0;
+  transform: translate3d(${props => props.left}px, ${props => props.top}px, 0);
+  transition: transform 0.2s cubic-bezier(0.2, 0, 0, 1);
+  width: 18px;
+  height: 18px;
+  color: rgb(75, 81, 85);
+  border-radius: 9px;
+`;
+export const RootWrapper = styled.div``;
+
+export const EntryHandle = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  left: 501px;
+  top: 7px;
+  width: 18px;
+  height: 18px;
+  color: rgba(${p => p.theme.colors.text.primary});
+  border-radius: 9px;
+  &:hover {
+    background: rgba(${p => p.theme.colors.primary});
+  }
+  svg {
+    fill: rgba(${p => p.theme.colors.text.primary});
+    stroke: rgba(${p => p.theme.colors.text.primary});
+  }
+`;
+
+export const EntryInnerContent = styled.div`
+  padding-top: 4px;
+  font-size: 15px;
+  white-space: pre-wrap;
+  line-height: 24px;
+  min-height: 24px;
+  overflow-wrap: break-word;
+  position: relative;
+  user-select: text;
+  color: rgba(${p => p.theme.colors.text.primary});
+  &::selection {
+    background: #a49de8;
+  }
+  &:focus {
+    outline: 0;
+  }
+`;
+
+export const DragDebugWrapper = styled.div`
+  position: absolute;
+  left: 42px;
+  bottom: 24px;
+  color: #fff;
+`;
+
+export const DragIndicatorBar = styled.div<{ left: number; top: number; width: number }>`
+  position: absolute;
+  width: ${props => props.width}px;
+  top: ${props => props.top}px;
+  left: ${props => props.left}px;
+  height: 4px;
+  border-radius: 3px;
+  background: rgb(204, 204, 204);
+`;
+
+export const ExpandButton = styled.div`
+  top: 6px;
+  cursor: default;
+  color: transparent;
+  position: absolute;
+  top: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  left: 478px;
+  width: 20px;
+  height: 20px;
+  svg {
+    fill: transparent;
+  }
+`;
+export const EntryContent = styled.div`
+  position: relative;
+  margin-left: -500px;
+  padding-left: 524px;
+
+  &:hover ${ExpandButton} svg {
+    fill: rgb(${props => props.theme.colors.text.primary});
+  }
+`;
+
+export const PageContainer = styled.div`
+  overflow: scroll;
+`;
--- a/frontend/src/Outline/index.tsx
+++ b/frontend/src/Outline/index.tsx
@ -0,0 +1,504 @@
+import React, { useState, useRef, useEffect, useMemo, useCallback, useContext, memo, createRef } from 'react';
+import { DotCircle } from 'shared/icons';
+import styled from 'styled-components/macro';
+import GlobalTopNavbar from 'App/TopNavbar';
+import _ from 'lodash';
+import produce from 'immer';
+import Entry from './Entry';
+import DragIndicator from './DragIndicator';
+import Dragger from './Dragger';
+import DragDebug from './DragDebug';
+import { DragContext } from './useDrag';
+
+import {
+  PageContainer,
+  DragDebugWrapper,
+  DragIndicatorBar,
+  PageContent,
+  EntryChildren,
+  EntryInnerContent,
+  EntryWrapper,
+  EntryContent,
+  RootWrapper,
+  EntryHandle,
+} from './Styles';
+import {
+  transformToTree,
+  findNode,
+  findNodeDepth,
+  getNumberOfChildren,
+  validateDepth,
+  getDimensions,
+  findNextDraggable,
+  getNodeOver,
+  getCorrectNode,
+  findCommonParent,
+} from './utils';
+import NOOP from 'shared/utils/noop';
+
+type OutlineCommand = {
+  nodes: Array<{
+    id: string;
+    prev: { position: number; parent: string | null };
+    next: { position: number; parent: string | null };
+  }>;
+};
+
+type ItemCollapsed = {
+  id: string;
+  collapsed: boolean;
+};
+
+const listItems: Array<ItemElement> = [
+  { id: 'root', position: 4096, parent: null, collapsed: false },
+  { id: 'entry-1', position: 4096, parent: 'root', collapsed: false },
+  { id: 'entry-1_3', position: 4096 * 3, parent: 'entry-1', collapsed: false },
+  { id: 'entry-1_3_1', position: 4096, parent: 'entry-1_3', collapsed: false },
+  { id: 'entry-1_3_2', position: 4096 * 2, parent: 'entry-1_3', collapsed: false },
+  { id: 'entry-1_3_3', position: 4096 * 3, parent: 'entry-1_3', collapsed: false },
+  { id: 'entry-1_3_3_1', position: 4096 * 1, parent: 'entry-1_3_3', collapsed: false },
+  { id: 'entry-1_3_3_1_1', position: 4096 * 1, parent: 'entry-1_3_3_1', collapsed: false },
+  { id: 'entry-2', position: 4096 * 2, parent: 'root', collapsed: false },
+  { id: 'entry-3', position: 4096 * 3, parent: 'root', collapsed: false },
+  { id: 'entry-4', position: 4096 * 4, parent: 'root', collapsed: false },
+  { id: 'entry-5', position: 4096 * 5, parent: 'root', collapsed: false },
+];
+
+const Outline: React.FC = () => {
+  const [items, setItems] = useState(listItems);
+  const [selecting, setSelecting] = useState<{
+    isSelecting: boolean;
+    node: { id: string; depth: number } | null;
+  }>({ isSelecting: false, node: null });
+  const [selection, setSelection] = useState<null | { nodes: Array<{ id: string }>; first?: OutlineNode | null }>(null);
+  const [dragging, setDragging] = useState<{
+    show: boolean;
+    draggedNodes: null | Array<string>;
+    initialPos: { x: number; y: number };
+  }>({ show: false, draggedNodes: null, initialPos: { x: 0, y: 0 } });
+  const [impact, setImpact] = useState<null | {
+    listPosition: number;
+    zone: ImpactZone;
+    depthTarget: number;
+  }>(null);
+  const selectRef = useRef<{ isSelecting: boolean; hasSelection: boolean; node: { id: string; depth: number } | null }>(
+    {
+      isSelecting: false,
+      node: null,
+      hasSelection: false,
+    },
+  );
+  const impactRef = useRef<null | { listPosition: number; depth: number; zone: ImpactZone }>(null);
+  useEffect(() => {
+    if (impact) {
+      impactRef.current = { zone: impact.zone, depth: impact.depthTarget, listPosition: impact.listPosition };
+    }
+  }, [impact]);
+  useEffect(() => {
+    selectRef.current.isSelecting = selecting.isSelecting;
+    selectRef.current.node = selecting.node;
+  }, [selecting]);
+
+  const $content = useRef<HTMLDivElement>(null);
+  const outline = useRef<OutlineData>({
+    published: new Map<string, string>(),
+    dimensions: new Map<string, NodeDimensions>(),
+    nodes: new Map<number, Map<string, OutlineNode>>(),
+    relationships: new Map<string, NodeRelationships>(),
+  });
+
+  const tree = transformToTree(_.cloneDeep(items));
+  let root: any = null;
+  if (tree.length === 1) {
+    root = tree[0];
+  }
+  const outlineHistory = useRef<{ commands: Array<OutlineCommand>; current: number }>({ current: -1, commands: [] });
+
+  useEffect(() => {
+    outline.current.relationships = new Map<string, NodeRelationships>();
+    outline.current.published = new Map<string, string>();
+    outline.current.nodes = new Map<number, Map<string, OutlineNode>>();
+    const collapsedMap = items.reduce((map, next) => {
+      if (next.collapsed) {
+        map.set(next.id, true);
+      }
+      return map;
+    }, new Map<string, boolean>());
+    items.forEach(item => outline.current.published.set(item.id, item.parent ?? 'root'));
+
+    for (let i = 0; i < items.length; i++) {
+      const { collapsed, position, id, parent: curParent } = items[i];
+      if (id === 'root') {
+        continue;
+      }
+      const parent = curParent ?? 'root';
+      outline.current.published.set(id, parent ?? 'root');
+      const { depth, ancestors } = findNodeDepth(outline.current.published, id);
+      const collapsedParent = ancestors.slice(0, -1).find(a => collapsedMap.get(a));
+      if (collapsedParent) {
+        continue;
+      }
+      const children = getNumberOfChildren(root, ancestors);
+      if (!outline.current.nodes.has(depth)) {
+        outline.current.nodes.set(depth, new Map<string, OutlineNode>());
+      }
+      const targetDepthNodes = outline.current.nodes.get(depth);
+      if (targetDepthNodes) {
+        targetDepthNodes.set(id, {
+          id,
+          children,
+          position,
+          depth,
+          ancestors,
+          collapsed,
+          parent,
+        });
+      }
+      if (!outline.current.relationships.has(parent)) {
+        outline.current.relationships.set(parent, {
+          self: {
+            depth: depth - 1,
+            id: parent,
+          },
+          children: [],
+          numberOfSubChildren: 0,
+        });
+      }
+      const nodeRelations = outline.current.relationships.get(parent);
+      if (nodeRelations) {
+        outline.current.relationships.set(parent, {
+          self: nodeRelations.self,
+          numberOfSubChildren: nodeRelations.numberOfSubChildren + children,
+          children: [...nodeRelations.children, { id, position, depth, children }].sort(
+            (a, b) => a.position - b.position,
+          ),
+        });
+      }
+    }
+  }, [items]);
+  const handleKeyDown = useCallback(e => {
+    if (e.code === 'KeyZ' && e.ctrlKey) {
+      const currentCommand = outlineHistory.current.commands[outlineHistory.current.current];
+      if (currentCommand) {
+        setItems(prevItems =>
+          produce(prevItems, draftItems => {
+            currentCommand.nodes.forEach(node => {
+              const idx = prevItems.findIndex(c => c.id === node.id);
+              if (idx !== -1) {
+                draftItems[idx].parent = node.prev.parent;
+                draftItems[idx].position = node.prev.position;
+              }
+            });
+            outlineHistory.current.current--;
+          }),
+        );
+      }
+    } else if (e.code === 'KeyY' && e.ctrlKey) {
+      const currentCommand = outlineHistory.current.commands[outlineHistory.current.current + 1];
+      if (currentCommand) {
+        setItems(prevItems =>
+          produce(prevItems, draftItems => {
+            currentCommand.nodes.forEach(node => {
+              const idx = prevItems.findIndex(c => c.id === node.id);
+              if (idx !== -1) {
+                draftItems[idx].parent = node.next.parent;
+                draftItems[idx].position = node.next.position;
+              }
+            });
+            outlineHistory.current.current++;
+          }),
+        );
+      }
+    }
+  }, []);
+
+  const handleMouseUp = useCallback(
+    e => {
+      if (selectRef.current.hasSelection && !selectRef.current.isSelecting) {
+        setSelection(null);
+      }
+      if (selectRef.current.isSelecting) {
+        setSelecting({ isSelecting: false, node: null });
+      }
+    },
+    [dragging, selecting],
+  );
+  const handleMouseMove = useCallback(e => {
+    if (selectRef.current.isSelecting && selectRef.current.node) {
+      const { clientX, clientY } = e;
+      const dimensions = outline.current.dimensions.get(selectRef.current.node.id);
+      if (dimensions) {
+        const entry = getDimensions(dimensions.entry);
+        if (entry) {
+          const isAbove = clientY < entry.top;
+          const isBelow = clientY > entry.bottom;
+          if (!isAbove && !isBelow && selectRef.current.hasSelection) {
+            const nodeDepth = outline.current.nodes.get(selectRef.current.node.depth);
+            const aboveNode = nodeDepth ? nodeDepth.get(selectRef.current.node.id) : null;
+            if (aboveNode) {
+              setSelection({ nodes: [{ id: selectRef.current.node.id }], first: aboveNode });
+              selectRef.current.hasSelection = false;
+            }
+          }
+          if (isAbove || isBelow) {
+            e.preventDefault();
+            const { curDraggable } = getNodeOver({ x: clientX, y: clientY }, outline.current);
+            const nodeDepth = outline.current.nodes.get(selectRef.current.node.depth);
+            const selectedNode = nodeDepth ? nodeDepth.get(selectRef.current.node.id) : null;
+            let aboveNode: OutlineNode | undefined | null = null;
+            let belowNode: OutlineNode | undefined | null = null;
+            if (isBelow) {
+              aboveNode = selectedNode;
+              belowNode = curDraggable;
+            } else {
+              aboveNode = curDraggable;
+              belowNode = selectedNode;
+            }
+            if (aboveNode && belowNode) {
+              const aboveDim = outline.current.dimensions.get(aboveNode.id);
+              const belowDim = outline.current.dimensions.get(belowNode.id);
+              if (aboveDim && belowDim) {
+                const aboveDimBounds = getDimensions(aboveDim.entry);
+                const belowDimBounds = getDimensions(belowDim.children ? belowDim.children : belowDim.entry);
+                const aboveDimY = aboveDimBounds ? aboveDimBounds.bottom : 0;
+                const belowDimY = belowDimBounds ? belowDimBounds.top : 0;
+                const inbetweenNodes: Array<{ id: string }> = [];
+                for (const [id, dimension] of outline.current.dimensions.entries()) {
+                  if (id === aboveNode.id || id === belowNode.id) {
+                    inbetweenNodes.push({ id });
+                    continue;
+                  }
+                  const targetNodeBounds = getDimensions(dimension.entry);
+                  if (targetNodeBounds) {
+                    if (
+                      Math.round(aboveDimY) <= Math.round(targetNodeBounds.top) &&
+                      Math.round(belowDimY) >= Math.round(targetNodeBounds.bottom)
+                    ) {
+                      inbetweenNodes.push({ id });
+                    }
+                  }
+                }
+                const filteredNodes = inbetweenNodes.filter(n => {
+                  const parent = outline.current.published.get(n.id);
+                  if (parent) {
+                    const foundParent = inbetweenNodes.find(c => c.id === parent);
+                    if (foundParent) {
+                      return false;
+                    }
+                  }
+                  return true;
+                });
+                selectRef.current.hasSelection = true;
+                setSelection({ nodes: filteredNodes, first: aboveNode });
+              }
+            }
+          }
+        }
+      }
+    }
+  }, []);
+  useEffect(() => {
+    document.addEventListener('mouseup', handleMouseUp);
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('mouseup', handleMouseUp);
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.addEventListener('keydown', handleKeyDown);
+    };
+  }, []);
+
+  if (!root) {
+    return null;
+  }
+  return (
+    <>
+      <GlobalTopNavbar onSaveProjectName={NOOP} projectID={null} name={null} />
+      <DragContext.Provider
+        value={{
+          outline,
+          impact,
+          setImpact: data => {
+            if (data) {
+              const { zone, depth } = data;
+              let listPosition = 65535;
+              if (zone.above && zone.above.node.depth + 1 <= depth && zone.above.node.collapsed) {
+                const aboveChildren = items
+                  .filter(i => (zone.above ? i.parent === zone.above.node.id : false))
+                  .sort((a, b) => a.position - b.position);
+                const lastChild = aboveChildren[aboveChildren.length - 1];
+                if (lastChild) {
+                  listPosition = lastChild.position * 2.0;
+                }
+              } else {
+                console.log(zone.above);
+                console.log(zone.below);
+                const correctNode = getCorrectNode(outline.current, zone.above ? zone.above.node : null, depth);
+                console.log(correctNode);
+                const listAbove = validateDepth(correctNode, depth);
+                const listBelow = validateDepth(zone.below ? zone.below.node : null, depth);
+                console.log(listAbove, listBelow);
+                if (listAbove && listBelow) {
+                  listPosition = (listAbove.position + listBelow.position) / 2.0;
+                } else if (listAbove && !listBelow) {
+                  listPosition = listAbove.position * 2.0;
+                } else if (!listAbove && listBelow) {
+                  listPosition = listBelow.position / 2.0;
+                }
+              }
+
+              if (!zone.above && zone.below) {
+                const newPosition = zone.below.node.position / 2.0;
+                setImpact(() => ({
+                  zone,
+                  listPosition: newPosition,
+                  depthTarget: depth,
+                }));
+              }
+              if (zone.above) {
+                // console.log(`prev=${prev} next=${next} targetPosition=${targetPosition}`);
+                // let targetID = depthTarget === 1 ? 'root' : node.ancestors[depthTarget - 1];
+                // targetID = targetID ?? node.id;
+                setImpact(() => ({
+                  zone,
+                  listPosition,
+                  depthTarget: depth,
+                }));
+              }
+            } else {
+              setImpact(null);
+            }
+          },
+          setNodeDimensions: (nodeID, ref) => {
+            outline.current.dimensions.set(nodeID, ref);
+          },
+          clearNodeDimensions: nodeID => {
+            outline.current.dimensions.delete(nodeID);
+          },
+        }}
+      >
+        <>
+          <PageContainer>
+            <PageContent>
+              <RootWrapper ref={$content}>
+                <Entry
+                  onStartSelect={({ id, depth }) => {
+                    setSelection(null);
+                    setSelecting({ isSelecting: true, node: { id, depth } });
+                  }}
+                  onToggleCollapse={(id, collapsed) => {
+                    setItems(prevItems =>
+                      produce(prevItems, draftItems => {
+                        const idx = prevItems.findIndex(c => c.id === id);
+                        if (idx !== -1) {
+                          draftItems[idx].collapsed = collapsed;
+                        }
+                      }),
+                    );
+                  }}
+                  id="root"
+                  parentID="root"
+                  isRoot
+                  selection={selection ? selection.nodes : null}
+                  draggedNodes={dragging.draggedNodes}
+                  position={root.position}
+                  entries={root.children}
+                  onCancelDrag={() => {
+                    setImpact(null);
+                    setDragging({ show: false, draggedNodes: null, initialPos: { x: 0, y: 0 } });
+                  }}
+                  onStartDrag={e => {
+                    if (e.id !== 'root') {
+                      if (selectRef.current.hasSelection && selection && selection.nodes.find(c => c.id === e.id)) {
+                        setImpact(null);
+                        setDragging({
+                          show: true,
+                          draggedNodes: [...selection.nodes.map(c => c.id)],
+                          initialPos: { x: e.clientX, y: e.clientY },
+                        });
+                      } else {
+                        setImpact(null);
+                        setDragging({ show: true, draggedNodes: [e.id], initialPos: { x: e.clientX, y: e.clientY } });
+                      }
+                    }
+                  }}
+                />
+              </RootWrapper>
+            </PageContent>
+          </PageContainer>
+          {dragging.show && dragging.draggedNodes && (
+            <Dragger
+              container={$content}
+              initialPos={dragging.initialPos}
+              draggedNodes={{ nodes: dragging.draggedNodes, first: selection ? selection.first : null }}
+              isDragging={dragging.show}
+              onDragEnd={() => {
+                if (dragging.draggedNodes && impactRef.current) {
+                  const { zone, depth, listPosition } = impactRef.current;
+                  const noZone = !zone.above && !zone.below;
+                  if (!noZone) {
+                    let parentID = 'root';
+                    if (zone.above) {
+                      parentID = zone.above.node.ancestors[depth - 1];
+                    }
+                    let reparent = true;
+                    for (let i = 0; i < dragging.draggedNodes.length; i++) {
+                      const draggedID = dragging.draggedNodes[i];
+                      const prevItem = items.find(i => i.id === draggedID);
+                      if (prevItem && prevItem.position === listPosition && prevItem.parent === parentID) {
+                        reparent = false;
+                        break;
+                      }
+                    }
+                    // TODO: set reparent if list position changed but parent did not
+                    //
+
+                    if (reparent) {
+                      // UPDATE OUTLINE DATA AFTER NODE MOVE
+                      setItems(itemsPrev =>
+                        produce(itemsPrev, draftItems => {
+                          if (dragging.draggedNodes) {
+                            const command: OutlineCommand = { nodes: [] };
+                            outlineHistory.current.current += 1;
+                            dragging.draggedNodes.forEach(n => {
+                              const curDragging = itemsPrev.findIndex(i => i.id === n);
+                              command.nodes.push({
+                                id: n,
+                                prev: {
+                                  parent: draftItems[curDragging].parent,
+                                  position: draftItems[curDragging].position,
+                                },
+                                next: {
+                                  parent: parentID,
+                                  position: listPosition,
+                                },
+                              });
+                              draftItems[curDragging].parent = parentID;
+                              draftItems[curDragging].position = listPosition;
+                            });
+                            outlineHistory.current.commands[outlineHistory.current.current] = command;
+                            if (outlineHistory.current.commands[outlineHistory.current.current + 1]) {
+                              outlineHistory.current.commands.splice(outlineHistory.current.current + 1);
+                            }
+                          }
+                        }),
+                      );
+                    }
+                  }
+                }
+                setImpact(null);
+                setDragging({ show: false, draggedNodes: null, initialPos: { x: 0, y: 0 } });
+              }}
+            />
+          )}
+        </>
+      </DragContext.Provider>
+      {impact && <DragIndicator depthTarget={impact.depthTarget} container={$content} zone={impact.zone} />}
+      {impact && (
+        <DragDebug zone={impact.zone ?? null} draggedNodes={dragging.draggedNodes} depthTarget={impact.depthTarget} />
+      )}
+    </>
+  );
+};
+
+export default Outline;
--- a/frontend/src/Outline/useDrag.ts
+++ b/frontend/src/Outline/useDrag.ts
@ -0,0 +1,22 @@
+import React, { useContext } from 'react';
+
+type DragContextData = {
+  impact: null | { zone: ImpactZone; depthTarget: number };
+  outline: React.MutableRefObject<OutlineData>;
+  setNodeDimensions: (
+    nodeID: string,
+    ref: { entry: React.RefObject<HTMLElement>; children: React.RefObject<HTMLElement> | null },
+  ) => void;
+  clearNodeDimensions: (nodeID: string) => void;
+  setImpact: (data: ImpactData | null) => void;
+};
+
+export const DragContext = React.createContext<DragContextData | null>(null);
+
+export const useDrag = () => {
+  const ctx = useContext(DragContext);
+  if (ctx) {
+    return ctx;
+  }
+  throw new Error('context is null');
+};
--- a/frontend/src/Outline/utils.ts
+++ b/frontend/src/Outline/utils.ts
@ -0,0 +1,361 @@
+import _ from 'lodash';
+
+export function getCorrectNode(data: OutlineData, node: OutlineNode | null, depth: number) {
+  if (node) {
+    console.log(depth, node);
+    if (depth === node.depth) {
+      return node;
+    }
+    const parent = node.ancestors[depth];
+    console.log('parent', parent);
+    if (parent) {
+      const parentNode = data.relationships.get(parent);
+      if (parentNode) {
+        const parentDepth = parentNode.self.depth;
+        const nodeDepth = data.nodes.get(parentDepth);
+        return nodeDepth ? nodeDepth.get(parent) : null;
+      }
+    }
+  }
+  return null;
+}
+export function validateDepth(node: OutlineNode | null | undefined, depth: number) {
+  if (node) {
+    return node.depth === depth ? node : null;
+  }
+  return null;
+}
+
+export function getNodeAbove(node: OutlineNode, startingParent: RelationshipChild, outline: OutlineData) {
+  let hasChildren = true;
+  let nodeAbove: null | RelationshipChild = null;
+  let aboveTargetID = startingParent.id;
+  while (hasChildren) {
+    const targetParent = outline.relationships.get(aboveTargetID);
+    if (targetParent) {
+      const parentNodes = outline.nodes.get(targetParent.self.depth);
+      const parentNode = parentNodes ? parentNodes.get(targetParent.self.id) : null;
+      if (targetParent.children.length === 0) {
+        if (parentNode) {
+          nodeAbove = {
+            id: parentNode.id,
+            depth: parentNode.depth,
+            position: parentNode.position,
+            children: parentNode.children,
+          };
+          console.log('node above', nodeAbove);
+        }
+        hasChildren = false;
+        continue;
+      }
+      nodeAbove = targetParent.children[targetParent.children.length - 1];
+      if (targetParent.numberOfSubChildren === 0) {
+        hasChildren = false;
+      } else {
+        aboveTargetID = nodeAbove.id;
+      }
+    } else {
+      const target = outline.relationships.get(node.ancestors[0]);
+      if (target) {
+        const targetChild = target.children.find(i => i.id === aboveTargetID);
+        if (targetChild) {
+          nodeAbove = targetChild;
+        }
+        hasChildren = false;
+      }
+    }
+  }
+  console.log('final node above', nodeAbove);
+  return nodeAbove;
+}
+
+export function getBelowParent(node: OutlineNode, outline: OutlineData) {
+  const { relationships, nodes } = outline;
+  const parentDepth = nodes.get(node.depth - 1);
+  const parent = parentDepth ? parentDepth.get(node.parent) : null;
+  if (parent) {
+    const grandfather = relationships.get(parent.parent);
+    if (grandfather) {
+      const parentIndex = grandfather.children.findIndex(c => c.id === parent.id);
+      if (parentIndex !== -1) {
+        if (parentIndex === grandfather.children.length - 1) {
+          const root = relationships.get(node.ancestors[0]);
+          if (root) {
+            const ancestorIndex = root.children.findIndex(c => c.id === node.ancestors[1]);
+            if (ancestorIndex !== -1) {
+              const nextAncestor = root.children[ancestorIndex + 1];
+              if (nextAncestor) {
+                return nextAncestor;
+              }
+            }
+          }
+        } else {
+          const nextChild = grandfather.children[parentIndex + 1];
+          if (nextChild) {
+            return nextChild;
+          }
+        }
+      }
+    }
+  }
+  return null;
+}
+
+export function getDimensions(ref: React.RefObject<HTMLElement> | null | undefined) {
+  if (ref && ref.current) {
+    return ref.current.getBoundingClientRect();
+  }
+  return null;
+}
+
+export function getTargetDepth(mouseX: number, handleLeft: number, availableDepths: { min: number; max: number }) {
+  if (mouseX > handleLeft) {
+    return availableDepths.max;
+  }
+  let curDepth = availableDepths.max - 1;
+  for (let x = availableDepths.min; x < availableDepths.max; x++) {
+    const breakpoint = handleLeft - x * 35;
+    // console.log(`mouseX=${mouseX} breakpoint=${breakpoint} x=${x} curDepth=${curDepth}`);
+    if (mouseX > breakpoint) {
+      return curDepth;
+    }
+    curDepth -= 1;
+  }
+
+  return availableDepths.min;
+}
+
+export function findNextDraggable(pos: { x: number; y: number }, outline: OutlineData, curDepth: number) {
+  let index = 0;
+  const currentDepthNodes = outline.nodes.get(curDepth);
+  let nodeAbove: null | RelationshipChild = null;
+  if (!currentDepthNodes) {
+    return null;
+  }
+  for (const [id, node] of currentDepthNodes) {
+    const dimensions = outline.dimensions.get(id);
+    const target = dimensions ? getDimensions(dimensions.entry) : null;
+    const children = dimensions ? getDimensions(dimensions.children) : null;
+    if (target) {
+      console.log(
+        `[${id}] ${pos.y} <= ${target.bottom} = ${pos.y <= target.bottom} / ${pos.y} >= ${target.top} = ${pos.y >=
+          target.top}`,
+      );
+      if (pos.y <= target.bottom && pos.y >= target.top) {
+        const middlePoint = target.top + target.height / 2;
+        const position: ImpactPosition = pos.y > middlePoint ? 'after' : 'before';
+        return {
+          found: true,
+          node,
+          position,
+        };
+      }
+    }
+    if (children) {
+      console.log(
+        `[${id}] ${pos.y} <= ${children.bottom} = ${pos.y <= children.bottom} / ${pos.y} >= ${children.top} = ${pos.y >=
+          children.top}`,
+      );
+      if (pos.y <= children.bottom && pos.y >= children.top) {
+        const position: ImpactPosition = 'after';
+        return { found: false, node, position };
+      }
+    }
+    index += 1;
+  }
+  return null;
+}
+
+export function transformToTree(arr: any) {
+  const nodes: any = {};
+  return arr.filter(function(obj: any) {
+    var id = obj['id'],
+      parentId = obj['parent'];
+
+    nodes[id] = _.defaults(obj, nodes[id], { children: [] });
+    parentId && (nodes[parentId] = nodes[parentId] || { children: [] })['children'].push(obj);
+
+    return !parentId;
+  });
+}
+
+export function findNode(parentID: string, nodeID: string, data: OutlineData) {
+  const nodeRelations = data.relationships.get(parentID);
+  if (nodeRelations) {
+    const nodeDepth = data.nodes.get(nodeRelations.self.depth + 1);
+    if (nodeDepth) {
+      const node = nodeDepth.get(nodeID);
+      return node ?? null;
+    }
+  }
+  return null;
+}
+
+export function findNodeDepth(published: Map<string, string>, id: string) {
+  let currentID = id;
+  let breaker = 0;
+  let depth = 0;
+  let ancestors = [id];
+  while (currentID !== 'root') {
+    const nextID = published.get(currentID);
+    if (nextID) {
+      ancestors = [nextID, ...ancestors];
+      currentID = nextID;
+      depth += 1;
+      breaker += 1;
+      if (breaker > 100) {
+        throw new Error('node depth breaker was thrown');
+      }
+    } else {
+      throw new Error('unable to find nextID');
+    }
+  }
+  return { depth, ancestors };
+}
+
+export function getNumberOfChildren(root: ItemElement, ancestors: Array<string>) {
+  let currentBranch = root;
+  for (let i = 1; i < ancestors.length; i++) {
+    const nextBranch = currentBranch.children ? currentBranch.children.find(c => c.id === ancestors[i]) : null;
+    if (nextBranch) {
+      currentBranch = nextBranch;
+    } else {
+      throw new Error('unable to find next branch');
+    }
+  }
+  return currentBranch.children ? currentBranch.children.length : 0;
+}
+
+export function findNodeAbove(outline: OutlineData, curDepth: number, belowNode: OutlineNode) {
+  let targetAboveNode: null | RelationshipChild = null;
+  if (curDepth === 1) {
+    const relations = outline.relationships.get(belowNode.ancestors[0]);
+    if (relations) {
+      const parentIndex = relations.children.findIndex(n => belowNode && n.id === belowNode.ancestors[1]);
+      if (parentIndex !== -1) {
+        const aboveParent = relations.children[parentIndex - 1];
+        if (parentIndex === 0) {
+          targetAboveNode = null;
+        } else {
+          targetAboveNode = getNodeAbove(belowNode, aboveParent, outline);
+        }
+      }
+    }
+  } else {
+    const relations = outline.relationships.get(belowNode.parent);
+    if (relations) {
+      const currentIndex = relations.children.findIndex(n => belowNode && n.id === belowNode.id);
+      // is first child, so use parent
+      if (currentIndex === 0) {
+        const parentNodes = outline.nodes.get(belowNode.depth - 1);
+        const parentNode = parentNodes ? parentNodes.get(belowNode.parent) : null;
+        if (parentNode) {
+          targetAboveNode = {
+            id: belowNode.parent,
+            depth: belowNode.depth - 1,
+            position: parentNode.position,
+            children: parentNode.children,
+          };
+        }
+      } else if (currentIndex !== -1) {
+        // is not first child, so first prev sibling
+        const aboveParentNode = relations.children[currentIndex - 1];
+        if (aboveParentNode) {
+          targetAboveNode = getNodeAbove(belowNode, aboveParentNode, outline);
+          if (targetAboveNode === null) {
+            targetAboveNode = aboveParentNode;
+          }
+        }
+      }
+    }
+  }
+  if (targetAboveNode) {
+    const depthNodes = outline.nodes.get(targetAboveNode.depth);
+    if (depthNodes) {
+      return depthNodes.get(targetAboveNode.id) ?? null;
+    }
+  }
+  return null;
+}
+
+export function getNodeOver(mouse: { x: number; y: number }, outline: OutlineData) {
+  let curDepth = 1;
+  let curDraggables: any;
+  let curDraggable: any;
+  let curPosition: ImpactPosition = 'after';
+  while (outline.nodes.size + 1 > curDepth) {
+    curDraggables = outline.nodes.get(curDepth);
+    if (curDraggables) {
+      const nextDraggable = findNextDraggable(mouse, outline, curDepth);
+      if (nextDraggable) {
+        curDraggable = nextDraggable.node;
+        curPosition = nextDraggable.position;
+        if (nextDraggable.found) {
+          break;
+        }
+        curDepth += 1;
+      } else {
+        break;
+      }
+    }
+  }
+  return {
+    curDepth,
+    curDraggable,
+    curPosition,
+  };
+}
+
+export function findCommonParent(outline: OutlineData, aboveNode: OutlineNode, belowNode: OutlineNode) {
+  let aboveParentID = null;
+  let depth = 0;
+  for (let aIdx = aboveNode.ancestors.length - 1; aIdx !== 0; aIdx--) {
+    depth = aIdx;
+    const aboveNodeParent = aboveNode.ancestors[aIdx];
+    for (let bIdx = belowNode.ancestors.length - 1; bIdx !== 0; bIdx--) {
+      if (belowNode.ancestors[bIdx] === aboveNodeParent) {
+        aboveParentID = aboveNodeParent;
+      }
+    }
+  }
+  if (aboveParentID) {
+    const parent = outline.relationships.get(aboveParentID) ?? null;
+    if (parent) {
+      return {
+        parent,
+        depth,
+      };
+    }
+    return null;
+  }
+  return null;
+}
+
+export function getLastChildInBranch(outline: OutlineData, lastParentNode: OutlineNode) {
+  let curParentRelation = outline.relationships.get(lastParentNode.id);
+  if (!curParentRelation) {
+    return { id: lastParentNode.id, depth: 1 };
+  }
+  let hasChildren = lastParentNode.children !== 0;
+  let depth = 1;
+  let finalID: null | string = null;
+  while (hasChildren) {
+    if (curParentRelation) {
+      const lastChild = curParentRelation.children.sort((a, b) => a.position - b.position)[
+        curParentRelation.children.length - 1
+      ];
+      depth += 1;
+      if (lastChild.children === 0) {
+        finalID = lastChild.id;
+        break;
+      }
+      curParentRelation = outline.relationships.get(lastChild.id);
+    } else {
+      hasChildren = false;
+    }
+  }
+  if (finalID !== null) {
+    return { id: finalID, depth };
+  }
+  return null;
+}
--- a/frontend/src/Profile/index.tsx
+++ b/frontend/src/Profile/index.tsx
@ -1,12 +1,22 @@
 import React, { useRef, useEffect } from 'react';
 import styled from 'styled-components/macro';
 import GlobalTopNavbar from 'App/TopNavbar';
-import { Link } from 'react-router-dom';
 import { getAccessToken } from 'shared/utils/accessToken';
 import Settings from 'shared/components/Settings';
-import { useMeQuery, useClearProfileAvatarMutation, useUpdateUserPasswordMutation } from 'shared/generated/graphql';
+import {
+  useMeQuery,
+  useClearProfileAvatarMutation,
+  useUpdateUserPasswordMutation,
+  useUpdateUserInfoMutation,
+  MeQuery,
+  MeDocument,
+} from 'shared/generated/graphql';
 import axios from 'axios';
 import { useCurrentUser } from 'App/context';
+import NOOP from 'shared/utils/noop';
+import { toast } from 'react-toastify';
+import updateApolloCache from 'shared/utils/cache';
+import produce from 'immer';

 const MainContent = styled.div`
  padding: 0 0 50px 80px;
@ -18,6 +28,7 @@ const Projects = () => {
  const $fileUpload = useRef<HTMLInputElement>(null);
  const [clearProfileAvatar] = useClearProfileAvatarMutation();
  const { user } = useCurrentUser();
+  const [updateUserInfo] = useUpdateUserInfoMutation();
  const [updateUserPassword] = useUpdateUserPasswordMutation();
  const { loading, data, refetch } = useMeQuery();
  useEffect(() => {
@ -54,7 +65,7 @@ const Projects = () => {
          }
        }}
      />
-      <GlobalTopNavbar projectID={null} onSaveProjectName={() => {}} name={null} />
+      <GlobalTopNavbar projectID={null} onSaveProjectName={NOOP} name={null} />
      {!loading && data && (
        <Settings
          profile={data.me.user}
@ -65,6 +76,14 @@ const Projects = () => {
          }}
          onResetPassword={(password, done) => {
            updateUserPassword({ variables: { userID: user.id, password } });
+            toast('Password was changed!');
+            done();
+          }}
+          onChangeUserInfo={(d, done) => {
+            updateUserInfo({
+              variables: { name: d.full_name, bio: d.bio, email: d.email, initials: d.initials },
+            });
+            toast('User info was saved!');
            done();
          }}
          onProfileAvatarRemove={() => {
--- a/frontend/src/Projects/Project/Board/FilterMeta.tsx
+++ b/frontend/src/Projects/Project/Board/FilterMeta.tsx
@ -0,0 +1,323 @@
+import React, { useState, useEffect } from 'react';
+import styled, { css } from 'styled-components';
+import { Checkmark, User, Calendar, Tags, Clock } from 'shared/icons';
+import { TaskMetaFilters, TaskMeta, TaskMetaMatch, DueDateFilterType } from 'shared/components/Lists';
+import Input from 'shared/components/ControlledInput';
+import { Popup, usePopup } from 'shared/components/PopupMenu';
+import produce from 'immer';
+import { mixin } from 'shared/utils/styles';
+import Member from 'shared/components/Member';
+
+const FilterMember = styled(Member)`
+  margin: 2px 0;
+  &:hover {
+    cursor: pointer;
+    background: rgba(${props => props.theme.colors.primary});
+  }
+`;
+
+export const Labels = styled.ul`
+  list-style: none;
+  margin: 0 8px;
+  padding: 0;
+  margin-bottom: 8px;
+`;
+
+export const Label = styled.li`
+  position: relative;
+`;
+
+export const CardLabel = styled.span<{ active: boolean; color: string }>`
+  ${props =>
+    props.active &&
+    css`
+      margin-left: 4px;
+      box-shadow: -8px 0 ${mixin.darken(props.color, 0.12)};
+      border-radius: 3px;
+    `}
+
+  cursor: pointer;
+  font-weight: 700;
+  margin: 0 0 4px;
+  min-height: 20px;
+  padding: 6px 12px;
+  position: relative;
+  transition: padding 85ms, margin 85ms, box-shadow 85ms;
+  background-color: ${props => props.color};
+  color: #fff;
+  display: block;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-height: 31px;
+`;
+
+export const ActionsList = styled.ul`
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+`;
+
+export const ActionItem = styled.li`
+  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: rgb(115, 103, 240);
+  }
+`;
+
+export const ActionTitle = styled.span`
+  margin-left: 20px;
+`;
+
+const ActionItemSeparator = styled.li`
+  color: rgba(${props => props.theme.colors.text.primary}, 0.4);
+  font-size: 12px;
+  padding-left: 4px;
+  padding-right: 4px;
+  padding-top: 0.75rem;
+  padding-bottom: 0.25rem;
+`;
+
+const ActiveIcon = styled(Checkmark)`
+  position: absolute;
+  right: 4px;
+`;
+
+const ItemIcon = styled.div`
+  position: absolute;
+`;
+
+const TaskNameInput = styled(Input)`
+  margin: 0;
+`;
+
+const ActionItemLine = styled.div`
+  height: 1px;
+  border-top: 1px solid #414561;
+  margin: 0.25rem !important;
+`;
+
+type FilterMetaProps = {
+  filters: TaskMetaFilters;
+  userID: string;
+  labels: React.RefObject<Array<ProjectLabel>>;
+  members: React.RefObject<Array<TaskUser>>;
+  onChangeTaskMetaFilter: (filters: TaskMetaFilters) => void;
+};
+
+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 handleSetFilters = (f: TaskMetaFilters) => {
+    setFilters(f);
+    onChangeTaskMetaFilter(f);
+  };
+
+  const handleNameChange = (nFilter: string) => {
+    handleSetFilters(
+      produce(currentFilters, draftFilters => {
+        draftFilters.taskName = nFilter !== '' ? { name: nFilter } : null;
+      }),
+    );
+    setNameFilter(nFilter);
+  };
+
+  const { setTab } = usePopup();
+
+  const handleSetDueDate = (filterType: DueDateFilterType, label: string) => {
+    handleSetFilters(
+      produce(currentFilters, draftFilters => {
+        if (draftFilters.dueDate && draftFilters.dueDate.type === filterType) {
+          draftFilters.dueDate = null;
+        } else {
+          draftFilters.dueDate = {
+            label,
+            type: filterType,
+          };
+        }
+      }),
+    );
+  };
+
+  return (
+    <>
+      <Popup tab={0} title={null}>
+        <ActionsList>
+          <TaskNameInput
+            width="100%"
+            onChange={e => handleNameChange(e.currentTarget.value)}
+            value={nameFilter}
+            variant="alternate"
+            placeholder="Task name..."
+          />
+          <ActionItemSeparator>QUICK ADD</ActionItemSeparator>
+          <ActionItem
+            onClick={() => {
+              handleSetFilters(
+                produce(currentFilters, draftFilters => {
+                  if (members.current) {
+                    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);
+                    }
+                  }
+                }),
+              );
+            }}
+          >
+            <ItemIcon>
+              <User width={12} height={12} />
+            </ItemIcon>
+            <ActionTitle>Just my tasks</ActionTitle>
+            {currentFilters.members.find(m => m.id === userID) && <ActiveIcon width={12} height={12} />}
+          </ActionItem>
+          <ActionItem onClick={() => handleSetDueDate(DueDateFilterType.THIS_WEEK, 'Due this week')}>
+            <ItemIcon>
+              <Calendar width={12} height={12} />
+            </ItemIcon>
+            <ActionTitle>Due this week</ActionTitle>
+            {currentFilters.dueDate && currentFilters.dueDate.type === DueDateFilterType.THIS_WEEK && (
+              <ActiveIcon width={12} height={12} />
+            )}
+          </ActionItem>
+          <ActionItem onClick={() => handleSetDueDate(DueDateFilterType.NEXT_WEEK, 'Due next week')}>
+            <ItemIcon>
+              <Calendar width={12} height={12} />
+            </ItemIcon>
+            <ActionTitle>Due next week</ActionTitle>
+            {currentFilters.dueDate && currentFilters.dueDate.type === DueDateFilterType.NEXT_WEEK && (
+              <ActiveIcon width={12} height={12} />
+            )}
+          </ActionItem>
+          <ActionItemLine />
+          <ActionItem onClick={() => setTab(1)}>
+            <ItemIcon>
+              <Tags width={12} height={12} />
+            </ItemIcon>
+            <ActionTitle>By Label</ActionTitle>
+          </ActionItem>
+          <ActionItem onClick={() => setTab(2)}>
+            <ItemIcon>
+              <User width={12} height={12} />
+            </ItemIcon>
+            <ActionTitle>By Member</ActionTitle>
+          </ActionItem>
+          <ActionItem onClick={() => setTab(3)}>
+            <ItemIcon>
+              <Clock width={12} height={12} />
+            </ItemIcon>
+            <ActionTitle>By Due Date</ActionTitle>
+          </ActionItem>
+        </ActionsList>
+      </Popup>
+      <Popup tab={1} title="By Labels">
+        <Labels>
+          {labels.current &&
+            labels.current
+              // .filter(label => '' === '' || (label.name && label.name.toLowerCase().startsWith(''.toLowerCase())))
+              .map(label => (
+                <Label key={label.id}>
+                  <CardLabel
+                    key={label.id}
+                    color={label.labelColor.colorHex}
+                    active={currentLabel === label.id}
+                    onMouseEnter={() => {
+                      setCurrentLabel(label.id);
+                    }}
+                    onClick={() => {
+                      handleSetFilters(
+                        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,
+                              name: label.name ?? '',
+                              color: label.labelColor.colorHex,
+                            });
+                          }
+                        }),
+                      );
+                    }}
+                  >
+                    {label.name}
+                  </CardLabel>
+                </Label>
+              ))}
+        </Labels>
+      </Popup>
+      <Popup tab={2} title="By Member">
+        <ActionsList>
+          {members.current &&
+            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);
+                      } else {
+                        draftFilters.members.push({ id: member.id, username: member.username ?? '' });
+                      }
+                    }),
+                  );
+                }}
+              />
+            ))}
+        </ActionsList>
+      </Popup>
+      <Popup tab={3} title="By Due Date">
+        <ActionsList>
+          <ActionItem onClick={() => handleSetDueDate(DueDateFilterType.TODAY, 'Today')}>
+            <ActionTitle>Today</ActionTitle>
+          </ActionItem>
+          <ActionItem onClick={() => handleSetDueDate(DueDateFilterType.THIS_WEEK, 'Due this week')}>
+            <ActionTitle>This week</ActionTitle>
+          </ActionItem>
+          <ActionItem onClick={() => handleSetDueDate(DueDateFilterType.NEXT_WEEK, 'Due next week')}>
+            <ActionTitle>Next week</ActionTitle>
+          </ActionItem>
+          <ActionItem onClick={() => handleSetDueDate(DueDateFilterType.OVERDUE, 'Overdue')}>
+            <ActionTitle>Overdue</ActionTitle>
+          </ActionItem>
+          <ActionItemLine />
+          <ActionItem onClick={() => handleSetDueDate(DueDateFilterType.TOMORROW, 'In the next day')}>
+            <ActionTitle>In the next day</ActionTitle>
+          </ActionItem>
+          <ActionItem onClick={() => handleSetDueDate(DueDateFilterType.ONE_WEEK, 'In the next week')}>
+            <ActionTitle>In the next week</ActionTitle>
+          </ActionItem>
+          <ActionItem onClick={() => handleSetDueDate(DueDateFilterType.TWO_WEEKS, 'In the next two weeks')}>
+            <ActionTitle>In the next two weeks</ActionTitle>
+          </ActionItem>
+          <ActionItem onClick={() => handleSetDueDate(DueDateFilterType.THREE_WEEKS, 'In the next three weeks')}>
+            <ActionTitle>In the next three weeks</ActionTitle>
+          </ActionItem>
+          <ActionItem onClick={() => handleSetDueDate(DueDateFilterType.NO_DUE_DATE, 'Has no due date')}>
+            <ActionTitle>Has no due date</ActionTitle>
+          </ActionItem>
+        </ActionsList>
+      </Popup>
+    </>
+  );
+};
+
+export default FilterMeta;
--- a/frontend/src/Projects/Project/Board/FilterStatus.tsx
+++ b/frontend/src/Projects/Project/Board/FilterStatus.tsx
@ -0,0 +1,149 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { Checkmark } from 'shared/icons';
+import { TaskStatusFilter, TaskStatus, TaskSince } from 'shared/components/Lists';
+
+export const ActionsList = styled.ul`
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+`;
+
+export const ActionExtraMenuContainer = styled.div`
+  visibility: hidden;
+  position: absolute;
+  left: 100%;
+  top: -4px;
+  padding-left: 2px;
+  width: 100%;
+`;
+
+export const ActionItem = styled.li`
+  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: rgb(115, 103, 240);
+  }
+  &:hover ${ActionExtraMenuContainer} {
+    visibility: visible;
+  }
+`;
+
+export const ActionTitle = styled.span`
+  margin-left: 20px;
+`;
+
+export const ActionExtraMenu = styled.ul`
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+
+  padding: 5px;
+  padding-top: 8px;
+  border-radius: 5px;
+  box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.1);
+
+  color: #c2c6dc;
+  background: #262c49;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-color: #414561;
+`;
+
+export const ActionExtraMenuItem = styled.li`
+  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: rgb(115, 103, 240);
+  }
+`;
+const ActionExtraMenuSeparator = styled.li`
+  color: rgba(${props => props.theme.colors.text.primary}, 0.4);
+  font-size: 12px;
+  padding-left: 4px;
+  padding-right: 4px;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+`;
+
+const ActiveIcon = styled(Checkmark)`
+  position: absolute;
+`;
+
+type FilterStatusProps = {
+  filter: TaskStatusFilter;
+  onChangeTaskStatusFilter: (filter: TaskStatusFilter) => void;
+};
+
+const FilterStatus: React.FC<FilterStatusProps> = ({ filter, onChangeTaskStatusFilter }) => {
+  const [currentFilter, setFilter] = useState(filter);
+  const handleFilterChange = (f: TaskStatusFilter) => {
+    setFilter(f);
+    onChangeTaskStatusFilter(f);
+  };
+  const handleCompleteClick = (s: TaskSince) => {
+    handleFilterChange({ status: TaskStatus.COMPLETE, since: s });
+  };
+  return (
+    <ActionsList>
+      <ActionItem onClick={() => handleFilterChange({ status: TaskStatus.INCOMPLETE, since: TaskSince.ALL })}>
+        {currentFilter.status === TaskStatus.INCOMPLETE && <ActiveIcon width={12} height={12} />}
+        <ActionTitle>Incomplete Tasks</ActionTitle>
+      </ActionItem>
+      <ActionItem>
+        {currentFilter.status === TaskStatus.COMPLETE && <ActiveIcon width={12} height={12} />}
+        <ActionTitle>Compelete Tasks</ActionTitle>
+        <ActionExtraMenuContainer>
+          <ActionExtraMenu>
+            <ActionExtraMenuItem onClick={() => handleCompleteClick(TaskSince.ALL)}>
+              {currentFilter.since === TaskSince.ALL && <ActiveIcon width={12} height={12} />}
+              <ActionTitle>All completed tasks</ActionTitle>
+            </ActionExtraMenuItem>
+            <ActionExtraMenuSeparator>Marked complete since</ActionExtraMenuSeparator>
+            <ActionExtraMenuItem onClick={() => handleCompleteClick(TaskSince.TODAY)}>
+              {currentFilter.since === TaskSince.TODAY && <ActiveIcon width={12} height={12} />}
+              <ActionTitle>Today</ActionTitle>
+            </ActionExtraMenuItem>
+            <ActionExtraMenuItem onClick={() => handleCompleteClick(TaskSince.YESTERDAY)}>
+              {currentFilter.since === TaskSince.YESTERDAY && <ActiveIcon width={12} height={12} />}
+              <ActionTitle>Yesterday</ActionTitle>
+            </ActionExtraMenuItem>
+            <ActionExtraMenuItem onClick={() => handleCompleteClick(TaskSince.ONE_WEEK)}>
+              {currentFilter.since === TaskSince.ONE_WEEK && <ActiveIcon width={12} height={12} />}
+              <ActionTitle>1 week</ActionTitle>
+            </ActionExtraMenuItem>
+            <ActionExtraMenuItem onClick={() => handleCompleteClick(TaskSince.TWO_WEEKS)}>
+              {currentFilter.since === TaskSince.TWO_WEEKS && <ActiveIcon width={12} height={12} />}
+              <ActionTitle>2 weeks</ActionTitle>
+            </ActionExtraMenuItem>
+            <ActionExtraMenuItem onClick={() => handleCompleteClick(TaskSince.THREE_WEEKS)}>
+              {currentFilter.since === TaskSince.THREE_WEEKS && <ActiveIcon width={12} height={12} />}
+              <ActionTitle>3 weeks</ActionTitle>
+            </ActionExtraMenuItem>
+          </ActionExtraMenu>
+        </ActionExtraMenuContainer>
+      </ActionItem>
+      <ActionItem onClick={() => handleFilterChange({ status: TaskStatus.ALL, since: TaskSince.ALL })}>
+        {currentFilter.status === TaskStatus.ALL && <ActiveIcon width={12} height={12} />}
+        <ActionTitle>All Tasks</ActionTitle>
+      </ActionItem>
+    </ActionsList>
+  );
+};
+
+export default FilterStatus;
--- a/frontend/src/Projects/Project/Board/SortPopup.tsx
+++ b/frontend/src/Projects/Project/Board/SortPopup.tsx
@ -0,0 +1,85 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { TaskSorting, TaskSortingType, TaskSortingDirection } from 'shared/utils/sorting';
+
+export const ActionsList = styled.ul`
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+`;
+
+export const ActionItem = styled.li`
+  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: rgb(115, 103, 240);
+  }
+`;
+
+export const ActionTitle = styled.span`
+  margin-left: 20px;
+`;
+
+const ActionItemSeparator = styled.li`
+  color: rgba(${props => 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 SortPopup: React.FC<SortPopupProps> = ({ sorting, onChangeTaskSorting }) => {
+  const [currentSorting, setSorting] = useState(sorting);
+  const handleSetSorting = (s: TaskSorting) => {
+    setSorting(s);
+    onChangeTaskSorting(s);
+  };
+  return (
+    <ActionsList>
+      <ActionItem onClick={() => handleSetSorting({ type: TaskSortingType.NONE, direction: TaskSortingDirection.ASC })}>
+        <ActionTitle>None</ActionTitle>
+      </ActionItem>
+      <ActionItem
+        onClick={() => handleSetSorting({ type: TaskSortingType.DUE_DATE, direction: TaskSortingDirection.ASC })}
+      >
+        <ActionTitle>Due date</ActionTitle>
+      </ActionItem>
+      <ActionItem
+        onClick={() => handleSetSorting({ type: TaskSortingType.MEMBERS, direction: TaskSortingDirection.ASC })}
+      >
+        <ActionTitle>Members</ActionTitle>
+      </ActionItem>
+      <ActionItem
+        onClick={() => handleSetSorting({ type: TaskSortingType.LABELS, direction: TaskSortingDirection.ASC })}
+      >
+        <ActionTitle>Labels</ActionTitle>
+      </ActionItem>
+      <ActionItem
+        onClick={() => handleSetSorting({ type: TaskSortingType.TASK_TITLE, direction: TaskSortingDirection.ASC })}
+      >
+        <ActionTitle>Task title</ActionTitle>
+      </ActionItem>
+      <ActionItem
+        onClick={() => handleSetSorting({ type: TaskSortingType.COMPLETE, direction: TaskSortingDirection.ASC })}
+      >
+        <ActionTitle>Complete</ActionTitle>
+      </ActionItem>
+    </ActionsList>
+  );
+};
+
+export default SortPopup;
--- a/frontend/src/Projects/Project/Board/index.tsx
+++ b/frontend/src/Projects/Project/Board/index.tsx
@ -1,52 +1,122 @@
-import React, { useState, useRef, useContext, useEffect } from 'react';
-import { MENU_TYPES } from 'shared/components/TopNavbar';
+import React, { useState, useRef } from 'react';
 import updateApolloCache from 'shared/utils/cache';
-import GlobalTopNavbar, { ProjectPopup } from 'App/TopNavbar';
-import LabelManagerEditor from '../LabelManagerEditor';
 import styled, { css } from 'styled-components/macro';
 import { Bolt, ToggleOn, Tags, CheckCircle, Sort, Filter } from 'shared/icons';
 import { usePopup, Popup } from 'shared/components/PopupMenu';
-import { useParams, Route, useRouteMatch, useHistory, RouteComponentProps, useLocation } from 'react-router-dom';
+import { useRouteMatch, useHistory } from 'react-router-dom';
 import {
-  useUpdateProjectMemberRoleMutation,
-  useCreateProjectMemberMutation,
-  useDeleteProjectMemberMutation,
  useSetTaskCompleteMutation,
  useToggleTaskLabelMutation,
-  useUpdateProjectNameMutation,
  useFindProjectQuery,
+  useSortTaskGroupMutation,
  useUpdateTaskGroupNameMutation,
  useUpdateTaskNameMutation,
-  useUpdateProjectLabelMutation,
  useCreateTaskMutation,
-  useDeleteProjectLabelMutation,
  useDeleteTaskMutation,
  useUpdateTaskLocationMutation,
  useUpdateTaskGroupLocationMutation,
  useCreateTaskGroupMutation,
  useDeleteTaskGroupMutation,
-  useUpdateTaskDescriptionMutation,
  useAssignTaskMutation,
-  DeleteTaskDocument,
  FindProjectDocument,
-  useCreateProjectLabelMutation,
  useUnassignTaskMutation,
  useUpdateTaskDueDateMutation,
  FindProjectQuery,
-  useUsersQuery,
+  useDuplicateTaskGroupMutation,
+  DuplicateTaskGroupMutation,
+  DuplicateTaskGroupDocument,
+  useDeleteTaskGroupTasksMutation,
 } from 'shared/generated/graphql';

 import QuickCardEditor from 'shared/components/QuickCardEditor';
 import ListActions from 'shared/components/ListActions';
 import MemberManager from 'shared/components/MemberManager';
-import SimpleLists from 'shared/components/Lists';
+import SimpleLists, {
+  TaskStatus,
+  TaskSince,
+  TaskStatusFilter,
+  TaskMeta,
+  TaskMetaMatch,
+  TaskMetaFilters,
+} from 'shared/components/Lists';
+import { TaskSorting, TaskSortingType, TaskSortingDirection, sortTasks } from 'shared/utils/sorting';
 import produce from 'immer';
 import MiniProfile from 'shared/components/MiniProfile';
 import DueDateManager from 'shared/components/DueDateManager';
-import UserContext, { useCurrentUser } from 'App/context';
-import LabelManager from 'shared/components/PopupMenu/LabelManager';
-import LabelEditor from 'shared/components/PopupMenu/LabelEditor';
 import EmptyBoard from 'shared/components/EmptyBoard';
+import NOOP from 'shared/utils/noop';
+import LabelManagerEditor from 'Projects/Project/LabelManagerEditor';
+import Chip from 'shared/components/Chip';
+import { toast } from 'react-toastify';
+import { useCurrentUser } from 'App/context';
+import FilterStatus from './FilterStatus';
+import FilterMeta from './FilterMeta';
+import SortPopup from './SortPopup';
+
+const FilterChip = styled(Chip)`
+  margin-right: 4px;
+`;
+
+type MetaFilterCloseFn = (meta: TaskMeta, key: string) => void;
+
+const renderTaskSortingLabel = (sorting: TaskSorting) => {
+  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) => {
+  const filterChips = [];
+  if (filters.taskName) {
+    filterChips.push(
+      <FilterChip
+        key="task-name"
+        label={`Title: ${filters.taskName.name}`}
+        onClose={() => onClose(TaskMeta.TITLE, 'task-name')}
+      />,
+    );
+  }
+
+  if (filters.dueDate) {
+    filterChips.push(
+      <FilterChip
+        key="due-date"
+        label={filters.dueDate.label}
+        onClose={() => onClose(TaskMeta.DUE_DATE, 'due-date')}
+      />,
+    );
+  }
+  for (const memberFilter of filters.members) {
+    filterChips.push(
+      <FilterChip
+        key={`member-${memberFilter.id}`}
+        label={`Member: ${memberFilter.username}`}
+        onClose={() => onClose(TaskMeta.MEMBER, memberFilter.id)}
+      />,
+    );
+  }
+  for (const labelFilter of filters.labels) {
+    filterChips.push(
+      <FilterChip
+        key={`label-${labelFilter.id}`}
+        label={labelFilter.name === '' ? 'Label' : `Label: ${labelFilter.name}`}
+        color={labelFilter.color}
+        onClose={() => onClose(TaskMeta.LABEL, labelFilter.id)}
+      />,
+    );
+  }
+  return filterChips;
+};

 const ProjectBar = styled.div`
  display: flex;
@ -61,14 +131,14 @@ const ProjectActions = styled.div`
  align-items: center;
 `;

-const ProjectAction = styled.div<{ disabled?: boolean }>`
+const ProjectActionWrapper = styled.div<{ disabled?: boolean }>`
  cursor: pointer;
  display: flex;
  align-items: center;
  font-size: 15px;
  color: rgba(${props => props.theme.colors.text.primary});

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

@ -88,6 +158,25 @@ const ProjectActionText = styled.span`
  padding-left: 4px;
 `;

+type ProjectActionProps = {
+  onClick?: (target: React.RefObject<HTMLElement>) => void;
+  disabled?: boolean;
+};
+
+const ProjectAction: React.FC<ProjectActionProps> = ({ onClick, disabled = false, children }) => {
+  const $container = useRef<HTMLDivElement>(null);
+  const handleClick = () => {
+    if (onClick) {
+      onClick($container);
+    }
+  };
+  return (
+    <ProjectActionWrapper ref={$container} onClick={handleClick} disabled={disabled}>
+      {children}
+    </ProjectActionWrapper>
+  );
+};
+
 interface QuickCardEditorState {
  isOpen: boolean;
  target: React.RefObject<HTMLElement> | null;
@ -113,18 +202,18 @@ export const BoardLoading = () => {
    <>
      <ProjectBar>
        <ProjectActions>
-          <ProjectAction disabled>
+          <ProjectAction>
            <CheckCircle width={13} height={13} />
            <ProjectActionText>All Tasks</ProjectActionText>
          </ProjectAction>
-          <ProjectAction disabled>
-            <Filter width={13} height={13} />
-            <ProjectActionText>Filter</ProjectActionText>
-          </ProjectAction>
-          <ProjectAction disabled>
+          <ProjectAction>
            <Sort width={13} height={13} />
            <ProjectActionText>Sort</ProjectActionText>
          </ProjectAction>
+          <ProjectAction>
+            <Filter width={13} height={13} />
+            <ProjectActionText>Filter</ProjectActionText>
+          </ProjectAction>
        </ProjectActions>
        <ProjectActions>
          <ProjectAction>
@ -146,18 +235,43 @@ export const BoardLoading = () => {
  );
 };

+const initTaskStatusFilter: TaskStatusFilter = {
+  status: TaskStatus.ALL,
+  since: TaskSince.ALL,
+};
+
+const initTaskMetaFilters: TaskMetaFilters = {
+  match: TaskMetaMatch.MATCH_ANY,
+  dueDate: null,
+  taskName: null,
+  labels: [],
+  members: [],
+};
+
+const initTaskSorting: TaskSorting = {
+  type: TaskSortingType.NONE,
+  direction: TaskSortingDirection.ASC,
+};
+
 const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick, cardLabelVariant }) => {
  const [assignTask] = useAssignTaskMutation();
  const [unassignTask] = useUnassignTaskMutation();
-  const $labelsRef = useRef<HTMLDivElement>(null);
  const match = useRouteMatch();
  const labelsRef = useRef<Array<ProjectLabel>>([]);
+  const membersRef = useRef<Array<TaskUser>>([]);
  const { showPopup, hidePopup } = usePopup();
  const taskLabelsRef = useRef<Array<TaskLabel>>([]);
  const [quickCardEditor, setQuickCardEditor] = useState(initialQuickCardEditorState);
-  const { user } = useCurrentUser();
  const [updateTaskGroupLocation] = useUpdateTaskGroupLocationMutation({});
+  const [taskStatusFilter, setTaskStatusFilter] = useState(initTaskStatusFilter);
+  const [taskMetaFilters, setTaskMetaFilters] = useState(initTaskMetaFilters);
+  const [taskSorting, setTaskSorting] = useState(initTaskSorting);
  const history = useHistory();
+  const [sortTaskGroup] = useSortTaskGroupMutation({
+    onCompleted: () => {
+      toast('List was sorted');
+    },
+  });
  const [deleteTaskGroup] = useDeleteTaskGroupMutation({
    update: (client, deletedTaskGroupData) => {
      updateApolloCache<FindProjectQuery>(
@ -210,6 +324,36 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
  const { loading, data } = useFindProjectQuery({
    variables: { projectID },
  });
+  const [deleteTaskGroupTasks] = useDeleteTaskGroupTasksMutation({
+    update: (client, resp) =>
+      updateApolloCache<FindProjectQuery>(
+        client,
+        FindProjectDocument,
+        cache =>
+          produce(cache, draftCache => {
+            const idx = cache.findProject.taskGroups.findIndex(
+              t => t.id === resp.data.deleteTaskGroupTasks.taskGroupID,
+            );
+            if (idx !== -1) {
+              draftCache.findProject.taskGroups[idx].tasks = [];
+            }
+          }),
+        { projectID },
+      ),
+  });
+  const [duplicateTaskGroup] = useDuplicateTaskGroupMutation({
+    update: (client, resp) => {
+      updateApolloCache<FindProjectQuery>(
+        client,
+        FindProjectDocument,
+        cache =>
+          produce(cache, draftCache => {
+            draftCache.findProject.taskGroups.push(resp.data.duplicateTaskGroup.taskGroup);
+          }),
+        { projectID },
+      );
+    },
+  });

  const [updateTaskDueDate] = useUpdateTaskDueDateMutation();
  const [setTaskComplete] = useSetTaskCompleteMutation();
@ -240,6 +384,7 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
      );
    },
  });
+  const { user } = useCurrentUser();
  const [deleteTask] = useDeleteTaskMutation();
  const [toggleTaskLabel] = useToggleTaskLabelMutation({
    onCompleted: newTaskLabel => {
@ -269,6 +414,7 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
              id: `${Math.round(Math.random() * -1000000)}`,
              name,
              complete: false,
+              completedAt: null,
              taskGroup: {
                __typename: 'TaskGroup',
                id: taskGroup.id,
@ -305,15 +451,19 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
  if (loading) {
    return <BoardLoading />;
  }
-  if (data) {
+  const getTaskStatusFilterLabel = (filter: TaskStatusFilter) => {
+    if (filter.status === TaskStatus.COMPLETE) {
+      return 'Complete';
+    }
+    if (filter.status === TaskStatus.INCOMPLETE) {
+      return 'Incomplete';
+    }
+    return 'All Tasks';
+  };
+  if (data && user) {
    labelsRef.current = data.findProject.labels;
+    membersRef.current = data.findProject.members;
    const onQuickEditorOpen = ($target: React.RefObject<HTMLElement>, taskID: string, taskGroupID: string) => {
-      if ($target && $target.current) {
-        const pos = $target.current.getBoundingClientRect();
-        const height = 120;
-        if (window.innerHeight - pos.bottom < height) {
-        }
-      }
      const taskGroup = data.findProject.taskGroups.find(t => t.id === taskGroupID);
      const currentTask = taskGroup ? taskGroup.tasks.find(t => t.id === taskID) : null;
      if (currentTask) {
@ -336,23 +486,84 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
      <>
        <ProjectBar>
          <ProjectActions>
-            <ProjectAction disabled>
+            <ProjectAction
+              onClick={target => {
+                showPopup(
+                  target,
+                  <Popup tab={0} title={null}>
+                    <FilterStatus
+                      filter={taskStatusFilter}
+                      onChangeTaskStatusFilter={filter => {
+                        setTaskStatusFilter(filter);
+                        hidePopup();
+                      }}
+                    />
+                  </Popup>,
+                  { width: 185 },
+                );
+              }}
+            >
              <CheckCircle width={13} height={13} />
-              <ProjectActionText>All Tasks</ProjectActionText>
+              <ProjectActionText>{getTaskStatusFilterLabel(taskStatusFilter)}</ProjectActionText>
            </ProjectAction>
-            <ProjectAction disabled>
+            <ProjectAction
+              onClick={target => {
+                showPopup(
+                  target,
+                  <Popup tab={0} title={null}>
+                    <SortPopup
+                      sorting={taskSorting}
+                      onChangeTaskSorting={sorting => {
+                        setTaskSorting(sorting);
+                      }}
+                    />
+                  </Popup>,
+                  { width: 185 },
+                );
+              }}
+            >
+              <Sort width={13} height={13} />
+              <ProjectActionText>{renderTaskSortingLabel(taskSorting)}</ProjectActionText>
+            </ProjectAction>
+            <ProjectAction
+              onClick={target => {
+                showPopup(
+                  target,
+                  <FilterMeta
+                    filters={taskMetaFilters}
+                    onChangeTaskMetaFilter={filter => {
+                      setTaskMetaFilters(filter);
+                    }}
+                    userID={user?.id}
+                    labels={labelsRef}
+                    members={membersRef}
+                  />,
+                  { width: 200 },
+                );
+              }}
+            >
              <Filter width={13} height={13} />
              <ProjectActionText>Filter</ProjectActionText>
            </ProjectAction>
-            <ProjectAction disabled>
-              <Sort width={13} height={13} />
-              <ProjectActionText>Sort</ProjectActionText>
-            </ProjectAction>
+            {renderMetaFilters(taskMetaFilters, (meta, id) => {
+              setTaskMetaFilters(
+                produce(taskMetaFilters, draftFilters => {
+                  if (meta === TaskMeta.MEMBER) {
+                    draftFilters.members = draftFilters.members.filter(m => m.id !== id);
+                  } else if (meta === TaskMeta.LABEL) {
+                    draftFilters.labels = draftFilters.labels.filter(m => m.id !== id);
+                  } else if (meta === TaskMeta.TITLE) {
+                    draftFilters.taskName = null;
+                  } else if (meta === TaskMeta.DUE_DATE) {
+                    draftFilters.dueDate = null;
+                  }
+                }),
+              );
+            })}
          </ProjectActions>
          <ProjectActions>
            <ProjectAction
-              ref={$labelsRef}
-              onClick={() => {
+              onClick={$labelsRef => {
                showPopup(
                  $labelsRef,
                  <LabelManagerEditor
@ -381,7 +592,7 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
          onTaskClick={task => {
            history.push(`${match.url}/c/${task.id}`);
          }}
-          onCardLabelClick={onCardLabelClick ?? (() => {})}
+          onCardLabelClick={onCardLabelClick ?? NOOP}
          cardLabelVariant={cardLabelVariant ?? 'large'}
          onTaskDrop={(droppedTask, previousTaskGroupID) => {
            updateTaskLocation({
@ -425,9 +636,12 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
            });
          }}
          taskGroups={data.findProject.taskGroups}
+          taskStatusFilter={taskStatusFilter}
+          taskMetaFilters={taskMetaFilters}
+          taskSorting={taskSorting}
          onCreateTask={onCreateTask}
          onCreateTaskGroup={onCreateList}
-          onCardMemberClick={($targetRef, taskID, memberID) => {
+          onCardMemberClick={($targetRef, _taskID, memberID) => {
            const member = data.findProject.members.find(m => m.id === memberID);
            if (member) {
              showPopup(
@ -449,15 +663,44 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
          onExtraMenuOpen={(taskGroupID: string, $targetRef: any) => {
            showPopup(
              $targetRef,
-              <Popup title="List actions" tab={0} onClose={() => hidePopup()}>
-                <ListActions
-                  taskGroupID={taskGroupID}
-                  onArchiveTaskGroup={tgID => {
-                    deleteTaskGroup({ variables: { taskGroupID: tgID } });
+              <ListActions
+                taskGroupID={taskGroupID}
+                onDeleteTaskGroupTasks={() => {
+                  deleteTaskGroupTasks({ variables: { taskGroupID } });
+                  hidePopup();
+                }}
+                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))
+                      .reduce((prevTasks: Array<{ taskID: string; position: number }>, t, idx) => {
+                        prevTasks.push({ taskID: t.id, position: (idx + 1) * 2048 });
+                        return tasks;
+                      }, []);
+                    sortTaskGroup({ variables: { taskGroupID, tasks } });
                    hidePopup();
-                  }}
-                />
-              </Popup>,
+                  }
+                }}
+                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;
+                    const next = taskGroups[idx + 1];
+                    let newPos = prevPos * 2;
+                    if (next) {
+                      newPos = (prevPos + next.position) / 2.0;
+                    }
+                    duplicateTaskGroup({ variables: { projectID, taskGroupID, name: newName, position: newPos } });
+                    hidePopup();
+                  }
+                }}
+                onArchiveTaskGroup={tgID => {
+                  deleteTaskGroup({ variables: { taskGroupID: tgID } });
+                  hidePopup();
+                }}
+              />,
            );
          }}
        />
@ -486,7 +729,7 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
                </Popup>,
              );
            }}
-            onCardMemberClick={($targetRef, taskID, memberID) => {
+            onCardMemberClick={($targetRef, _taskID, memberID) => {
              const member = data.findProject.members.find(m => m.id === memberID);
              if (member) {
                showPopup(
@ -516,8 +759,8 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
                />,
              );
            }}
-            onArchiveCard={(_listId: string, cardId: string) =>
-              deleteTask({
+            onArchiveCard={(_listId: string, cardId: string) => {
+              return deleteTask({
                variables: { taskID: cardId },
                update: client => {
                  updateApolloCache<FindProjectQuery>(
@ -533,8 +776,8 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
                    { projectID },
                  );
                },
-              })
-            }
+              });
+            }}
            onOpenDueDatePopup={($targetRef, task) => {
              showPopup(
                $targetRef,
@ -549,7 +792,7 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
                      updateTaskDueDate({ variables: { taskID: t.id, dueDate: newDueDate } });
                      hidePopup();
                    }}
-                    onCancel={() => {}}
+                    onCancel={NOOP}
                  />
                </Popup>,
              );
--- a/frontend/src/Projects/Project/Details/index.tsx
+++ b/frontend/src/Projects/Project/Details/index.tsx
@ -1,7 +1,7 @@
-import React, { useState, useContext, useEffect } from 'react';
+import React, { useState } from 'react';
 import Modal from 'shared/components/Modal';
 import TaskDetails from 'shared/components/TaskDetails';
-import PopupMenu, { Popup, usePopup } from 'shared/components/PopupMenu';
+import { Popup, usePopup } from 'shared/components/PopupMenu';
 import MemberManager from 'shared/components/MemberManager';
 import { useRouteMatch, useHistory } from 'react-router';
 import {
@ -22,7 +22,7 @@ import {
  FindTaskDocument,
  FindTaskQuery,
 } from 'shared/generated/graphql';
-import UserContext, { useCurrentUser } from 'App/context';
+import { useCurrentUser } from 'App/context';
 import MiniProfile from 'shared/components/MiniProfile';
 import DueDateManager from 'shared/components/DueDateManager';
 import produce from 'immer';
@ -31,6 +31,7 @@ import Button from 'shared/components/Button';
 import Input from 'shared/components/Input';
 import { useForm } from 'react-hook-form';
 import updateApolloCache from 'shared/utils/cache';
+import NOOP from 'shared/utils/noop';

 const calculateChecklistBadge = (checklists: Array<TaskChecklist>) => {
  const total = checklists.reduce((prev: any, next: any) => {
@ -75,15 +76,12 @@ const CreateChecklistInput = styled(Input)`
  margin-bottom: 8px;
 `;

-const InputError = styled.span`
-  color: rgba(${props => props.theme.colors.danger});
-  font-size: 12px;
-`;
 type CreateChecklistPopupProps = {
  onCreateChecklist: (data: CreateChecklistData) => void;
 };
+
 const CreateChecklistPopup: React.FC<CreateChecklistPopupProps> = ({ onCreateChecklist }) => {
-  const { register, handleSubmit, errors } = useForm<CreateChecklistData>();
+  const { register, handleSubmit } = useForm<CreateChecklistData>();
  const createUser = (data: CreateChecklistData) => {
    onCreateChecklist(data);
  };
@ -132,9 +130,6 @@ const Details: React.FC<DetailsProps> = ({
  const { user } = useCurrentUser();
  const { showPopup, hidePopup } = usePopup();
  const history = useHistory();
-  const match = useRouteMatch();
-  const [currentMemberTask, setCurrentMemberTask] = useState('');
-  const [memberPopupData, setMemberPopupData] = useState(initialMemberPopupState);
  const [updateTaskChecklistLocation] = useUpdateTaskChecklistLocationMutation();
  const [updateTaskChecklistItemLocation] = useUpdateTaskChecklistItemLocationMutation({
    update: (client, response) => {
@ -148,7 +143,7 @@ const Details: React.FC<DetailsProps> = ({
              const oldIdx = cache.findTask.checklists.findIndex(c => c.id === prevChecklistID);
              const newIdx = cache.findTask.checklists.findIndex(c => c.id === checklistID);
              if (oldIdx > -1 && newIdx > -1) {
-                const item = cache.findTask.checklists[oldIdx].items.find(item => item.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,
@ -295,25 +290,26 @@ const Details: React.FC<DetailsProps> = ({
    },
  });
  if (loading) {
-    return <div>loading</div>;
+    return null;
  }
  if (!data) {
-    return <div>loading</div>;
+    return null;
  }
  return (
    <>
      <Modal
-        width={768}
+        width={1070}
        onClose={() => {
          history.push(projectURL);
        }}
        renderContent={() => {
          return (
            <TaskDetails
+              me={data.me.user}
              task={data.findTask}
              onChecklistDrop={checklist => {
                updateTaskChecklistLocation({
-                  variables: { checklistID: checklist.id, position: checklist.position },
+                  variables: { taskChecklistID: checklist.id, position: checklist.position },

                  optimisticResponse: {
                    __typename: 'Mutation',
@ -328,20 +324,24 @@ const Details: React.FC<DetailsProps> = ({
                  },
                });
              }}
-              onChecklistItemDrop={(prevChecklistID, checklistID, checklistItem) => {
+              onChecklistItemDrop={(prevChecklistID, taskChecklistID, checklistItem) => {
                updateTaskChecklistItemLocation({
-                  variables: { checklistID, checklistItemID: checklistItem.id, position: checklistItem.position },
+                  variables: {
+                    taskChecklistID,
+                    taskChecklistItemID: checklistItem.id,
+                    position: checklistItem.position,
+                  },
                  optimisticResponse: {
                    __typename: 'Mutation',
                    updateTaskChecklistItemLocation: {
                      __typename: 'UpdateTaskChecklistItemLocationPayload',
                      prevChecklistID,
-                      checklistID,
+                      taskChecklistID,
                      checklistItem: {
                        __typename: 'TaskChecklistItem',
                        position: checklistItem.position,
                        id: checklistItem.id,
-                        taskChecklistID: checklistID,
+                        taskChecklistID,
                      },
                    },
                  },
@ -398,7 +398,7 @@ const Details: React.FC<DetailsProps> = ({
                if (member) {
                  showPopup(
                    $targetRef,
-                    <Popup title={null} onClose={() => {}} tab={0}>
+                    <Popup title={null} onClose={NOOP} tab={0}>
                      <MiniProfile
                        user={member}
                        bio="None"
@ -412,19 +412,19 @@ const Details: React.FC<DetailsProps> = ({
                  );
                }
              }}
-              onOpenAddMemberPopup={(task, $targetRef) => {
+              onOpenAddMemberPopup={(_task, $targetRef) => {
                showPopup(
                  $targetRef,
-                  <Popup title="Members" tab={0} onClose={() => {}}>
+                  <Popup title="Members" tab={0} onClose={NOOP}>
                    <MemberManager
                      availableMembers={availableMembers}
                      activeMembers={data.findTask.assigned}
                      onMemberChange={(member, isActive) => {
                        if (user) {
                          if (isActive) {
-                            assignTask({ variables: { taskID: data.findTask.id, userID: user.id } });
+                            assignTask({ variables: { taskID: data.findTask.id, userID: member.id } });
                          } else {
-                            unassignTask({ variables: { taskID: data.findTask.id, userID: user.id } });
+                            unassignTask({ variables: { taskID: data.findTask.id, userID: member.id } });
                          }
                        }
                      }}
@ -486,7 +486,7 @@ const Details: React.FC<DetailsProps> = ({
                showPopup(
                  $targetRef,
                  <Popup
-                    title={'Change Due Date'}
+                    title="Change Due Date"
                    tab={0}
                    onClose={() => {
                      hidePopup();
@ -502,9 +502,10 @@ const Details: React.FC<DetailsProps> = ({
                        updateTaskDueDate({ variables: { taskID: t.id, dueDate: newDueDate } });
                        hidePopup();
                      }}
-                      onCancel={() => {}}
+                      onCancel={NOOP}
                    />
                  </Popup>,
+                  { showDiamond: false, targetPadding: '0' },
                );
              }}
            />
--- a/frontend/src/Projects/Project/LabelManagerEditor/index.tsx
+++ b/frontend/src/Projects/Project/LabelManagerEditor/index.tsx
@ -3,32 +3,11 @@ import updateApolloCache from 'shared/utils/cache';
 import { usePopup, Popup } from 'shared/components/PopupMenu';
 import produce from 'immer';
 import {
-  useUpdateProjectMemberRoleMutation,
-  useCreateProjectMemberMutation,
-  useDeleteProjectMemberMutation,
-  useSetTaskCompleteMutation,
-  useToggleTaskLabelMutation,
-  useUpdateProjectNameMutation,
-  useFindProjectQuery,
-  useUpdateTaskGroupNameMutation,
-  useUpdateTaskNameMutation,
  useUpdateProjectLabelMutation,
-  useCreateTaskMutation,
  useDeleteProjectLabelMutation,
-  useDeleteTaskMutation,
-  useUpdateTaskLocationMutation,
-  useUpdateTaskGroupLocationMutation,
-  useCreateTaskGroupMutation,
-  useDeleteTaskGroupMutation,
-  useUpdateTaskDescriptionMutation,
-  useAssignTaskMutation,
-  DeleteTaskDocument,
  FindProjectDocument,
  useCreateProjectLabelMutation,
-  useUnassignTaskMutation,
-  useUpdateTaskDueDateMutation,
  FindProjectQuery,
-  useUsersQuery,
 } from 'shared/generated/graphql';
 import LabelManager from 'shared/components/PopupMenu/LabelManager';
 import LabelEditor from 'shared/components/PopupMenu/LabelEditor';
--- a/frontend/src/Projects/Project/index.tsx
+++ b/frontend/src/Projects/Project/index.tsx
@ -3,8 +3,8 @@ import React, { useState, useRef, useEffect, useContext } from 'react';
 import updateApolloCache from 'shared/utils/cache';
 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 LabelManagerEditor from './LabelManagerEditor';
 import {
  useParams,
  Route,
@ -16,11 +16,12 @@ import {
 } from 'react-router-dom';
 import {
  useUpdateProjectMemberRoleMutation,
-  useCreateProjectMemberMutation,
+  useInviteProjectMembersMutation,
  useDeleteProjectMemberMutation,
  useToggleTaskLabelMutation,
  useUpdateProjectNameMutation,
  useFindProjectQuery,
+  useDeleteInvitedProjectMemberMutation,
  useUpdateTaskNameMutation,
  useCreateTaskMutation,
  useDeleteTaskMutation,
@ -36,12 +37,22 @@ 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 { 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 EmptyBoard from 'shared/components/EmptyBoard';
+import LabelManagerEditor from './LabelManagerEditor';

 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) || '');

@ -69,29 +80,299 @@ const MemberList = styled.div`
  margin: 8px 0;
 `;

+type InviteUserData = {
+  email?: string;
+  suerID?: string;
+};
 type UserManagementPopupProps = {
+  projectID: string;
  users: Array<User>;
  projectMembers: Array<TaskUser>;
-  onAddProjectMember: (userID: string) => void;
+  onInviteProjectMembers: (data: Array<InviteUserData>) => void;
 };

-const UserManagementPopup: React.FC<UserManagementPopupProps> = ({ users, projectMembers, onAddProjectMember }) => {
+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) => {
+  console.log(input.trim().length < 3);
+  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> = [];
+  console.log(res.data && res.data.searchMembers);
+  if (res.data && res.data.searchMembers) {
+    results = [
+      ...res.data.searchMembers.map((m: any) => {
+        if (m.status === 'INVITED') {
+          console.log(`${m.id} is added`);
+          return {
+            label: m.id,
+            value: {
+              id: m.id,
+              type: 2,
+              profileIcon: {
+                bgColor: '#ccc',
+                initials: m.id.charAt(0),
+              },
+            },
+          };
+        } else {
+          console.log(`${m.user.email} is added`);
+          emails.push(m.user.email);
+          return {
+            label: m.user.fullName,
+            value: { id: m.user.id, type: 0, profileIcon: m.user.profileIcon },
+          };
+        }
+      }),
+    ];
+    console.log(results);
+  }
+
+  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 }) => {
+  console.log(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">
-      <SearchInput width="100%" variant="alternate" placeholder="Email address or name" name="search" />
-      <MemberList>
-        {users
-          .filter(u => u.id !== projectMembers.find(p => p.id === u.id)?.id)
-          .map(user => (
-            <UserMember
-              key={user.id}
-              onCardMemberClick={() => onAddProjectMember(user.id)}
-              showName
-              member={user}
-              taskID=""
-            />
-          ))}
-      </MemberList>
+      <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>
  );
 };
@ -124,6 +405,7 @@ const Project = () => {
  const match = useRouteMatch();

  const [updateTaskDescription] = useUpdateTaskDescriptionMutation();
+  const taskLabelsRef = useRef<Array<TaskLabel>>([]);
  const [toggleTaskLabel] = useToggleTaskLabelMutation({
    onCompleted: newTaskLabel => {
      taskLabelsRef.current = newTaskLabel.toggleTaskLabel.task.labels;
@ -133,11 +415,30 @@ const Project = () => {
  const [value, setValue] = useStateWithLocalStorage(CARD_LABEL_VARIANT_STORAGE_KEY);
  const [updateProjectMemberRole] = useUpdateProjectMemberRoleMutation();

-  const [deleteTask] = useDeleteTaskMutation();
+  const [deleteTask] = useDeleteTaskMutation({
+    update: (client, resp) =>
+      updateApolloCache<FindProjectQuery>(
+        client,
+        FindProjectDocument,
+        cache =>
+          produce(cache, draftCache => {
+            const taskGroupIdx = draftCache.findProject.taskGroups.findIndex(
+              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);
+            }
+          }),
+        { projectID },
+      ),
+  });

  const [updateTaskName] = useUpdateTaskNameMutation();

-  const { loading, data } = useFindProjectQuery({
+  const { loading, data, error } = useFindProjectQuery({
    variables: { projectID },
  });

@ -155,14 +456,36 @@ const Project = () => {
    },
  });

-  const [createProjectMember] = useCreateProjectMemberMutation({
+  const [inviteProjectMembers] = useInviteProjectMembersMutation({
    update: (client, response) => {
      updateApolloCache<FindProjectQuery>(
        client,
        FindProjectDocument,
        cache =>
          produce(cache, draftCache => {
-            draftCache.findProject.members.push({ ...response.data.createProjectMember.member });
+            draftCache.findProject.members = [
+              ...cache.findProject.members,
+              ...response.data.inviteProjectMembers.members,
+            ];
+            draftCache.findProject.invitedMembers = [
+              ...cache.findProject.invitedMembers,
+              ...response.data.inviteProjectMembers.invitedMembers,
+            ];
+          }),
+        { projectID },
+      );
+    },
+  });
+  const [deleteInvitedProjectMember] = useDeleteInvitedProjectMemberMutation({
+    update: (client, response) => {
+      updateApolloCache<FindProjectQuery>(
+        client,
+        FindProjectDocument,
+        cache =>
+          produce(cache, draftCache => {
+            draftCache.findProject.invitedMembers = cache.findProject.invitedMembers.filter(
+              m => m.email !== response.data.deleteInvitedProjectMember.invitedMember.email,
+            );
          }),
        { projectID },
      );
@ -190,7 +513,6 @@ const Project = () => {
  const { showPopup, hidePopup } = usePopup();
  const $labelsRef = useRef<HTMLDivElement>(null);
  const labelsRef = useRef<Array<ProjectLabel>>([]);
-  const taskLabelsRef = useRef<Array<TaskLabel>>([]);
  useEffect(() => {
    if (data) {
      document.title = `${data.findProject.name} | Taskcafé`;
@ -199,11 +521,14 @@ const Project = () => {
  if (loading) {
    return (
      <>
-        <GlobalTopNavbar onSaveProjectName={projectName => {}} name="" projectID={null} />
+        <GlobalTopNavbar onSaveProjectName={NOOP} name="" projectID={null} />
        <BoardLoading />
      </>
    );
  }
+  if (error) {
+    history.push('/projects');
+  }
  if (data) {
    labelsRef.current = data.findProject.labels;

@ -220,6 +545,10 @@ const Project = () => {
            deleteProjectMember({ variables: { userID, projectID } });
            hidePopup();
          }}
+          onRemoveInvitedFromBoard={email => {
+            deleteInvitedProjectMember({ variables: { projectID, email } });
+            hidePopup();
+          }}
          onSaveProjectName={projectName => {
            updateProjectName({ variables: { projectID, name: projectName } });
          }}
@ -227,8 +556,10 @@ const Project = () => {
            showPopup(
              $target,
              <UserManagementPopup
-                onAddProjectMember={userID => {
-                  createProjectMember({ variables: { userID, projectID } });
+                projectID={projectID}
+                onInviteProjectMembers={members => {
+                  inviteProjectMembers({ variables: { projectID, members } });
+                  hidePopup();
                }}
                users={data.users}
                projectMembers={data.findProject.members}
@ -239,8 +570,9 @@ const Project = () => {
          menuType={[{ name: 'Board', link: location.pathname }]}
          currentTab={0}
          projectMembers={data.findProject.members}
+          projectInvitedMembers={data.findProject.invitedMembers}
          projectID={projectID}
-          teamID={data.findProject.team.id}
+          teamID={data.findProject.team ? data.findProject.team.id : null}
          name={data.findProject.name}
        />
        <Route path={`${match.path}`} exact render={() => <Redirect to={`${match.url}/board`} />} />
@ -261,7 +593,7 @@ const Project = () => {
          path={`${match.path}/board/c/:taskID`}
          render={(routeProps: RouteComponentProps<TaskRouteProps>) => (
            <Details
-              refreshCache={() => {}}
+              refreshCache={NOOP}
              availableMembers={data.findProject.members}
              projectURL={`${match.url}/board`}
              taskID={routeProps.match.params.taskID}
@ -269,10 +601,21 @@ const Project = () => {
                updateTaskName({ variables: { taskID: updatedTask.id, name: newName } });
              }}
              onTaskDescriptionChange={(updatedTask, newDescription) => {
-                updateTaskDescription({ variables: { taskID: updatedTask.id, description: 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;
--- a/frontend/src/Projects/index.tsx
+++ b/frontend/src/Projects/index.tsx
@ -1,4 +1,4 @@
-import React, { useState, useContext, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import styled from 'styled-components/macro';
 import GlobalTopNavbar from 'App/TopNavbar';
 import Empty from 'shared/undraw/Empty';
@ -10,48 +10,31 @@ import {
  GetProjectsQuery,
 } from 'shared/generated/graphql';

-import ProjectGridItem, { AddProjectItem } from 'shared/components/ProjectGridItem';
 import { Link } from 'react-router-dom';
 import NewProject from 'shared/components/NewProject';
-import UserContext, { PermissionLevel, PermissionObjectType, 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 Input from 'shared/components/Input';
 import updateApolloCache from 'shared/utils/cache';
 import produce from 'immer';
-const EmptyStateContent = styled.div`
-  display: flex;
-  justy-content: center;
-  align-items: center;
-  flex-direction: column;
-`;
+import NOOP from 'shared/utils/noop';

-const EmptyStateTitle = styled.h3`
-  color: #fff;
-  font-size: 18px;
-`;
-
-const EmptyStatePrompt = styled.span`
-  color: rgba(${props => props.theme.colors.text.primary});
-  font-size: 16px;
-  margin-top: 8px;
-`;
-const EmptyState = styled(Empty)`
-  display: block;
-  margin: 0 auto;
-`;
-const CreateTeamButton = styled(Button)`
-  width: 100%;
-`;
 type CreateTeamData = { teamName: string };
+
 type CreateTeamFormProps = {
  onCreateTeam: (teamName: string) => void;
 };
+
 const CreateTeamFormContainer = styled.form``;

+const CreateTeamButton = styled(Button)`
+  width: 100%;
+`;
+
 const CreateTeamForm: React.FC<CreateTeamFormProps> = ({ onCreateTeam }) => {
-  const { register, handleSubmit, errors } = useForm<CreateTeamData>();
+  const { register, handleSubmit } = useForm<CreateTeamData>();
  const createTeam = (data: CreateTeamData) => {
    onCreateTeam(data.teamName);
  };
@ -186,6 +169,7 @@ const SectionActions = styled.div`
 const SectionAction = styled(Button)`
  padding: 6px 12px;
 `;
+
 const SectionActionLink = styled(Link)`
  margin-right: 8px;
 `;
@ -201,12 +185,7 @@ const ProjectsContainer = styled.div`
  max-width: 825px;
  min-width: 288px;
 `;
-const ProjectGrid = styled.div`
-  max-width: 780px;
-  display: grid;
-  grid-template-columns: 240px 240px 240px;
-  gap: 20px 10px;
-`;
+
 const AddTeamButton = styled(Button)`
  padding: 6px 12px;
  position: absolute;
@ -214,16 +193,11 @@ const AddTeamButton = styled(Button)`
  right: 12px;
 `;

-const CreateFirstTeam = styled(Button)`
-  margin-top: 8px;
-`;
 type ShowNewProject = {
  open: boolean;
  initialTeamID: null | string;
 };

-const ProjectLink = styled(Link)``;
-
 const Projects = () => {
  const { showPopup, hidePopup } = usePopup();
  const { loading, data } = useGetProjectsQuery({ fetchPolicy: 'network-only' });
@ -241,7 +215,7 @@ const Projects = () => {
  });

  const [showNewProject, setShowNewProject] = useState<ShowNewProject>({ open: false, initialTeamID: null });
-  const { user, setUser } = useCurrentUser();
+  const { user } = useCurrentUser();
  const [createTeam] = useCreateTeamMutation({
    update: (client, createData) => {
      updateApolloCache<GetProjectsQuery>(client, GetProjectsDocument, cache =>
@ -252,39 +226,42 @@ const Projects = () => {
    },
  });
  if (loading) {
-    return (
-      <>
-        <span>loading</span>
-      </>
-    );
+    return <GlobalTopNavbar onSaveProjectName={NOOP} projectID={null} name={null} />;
  }

  const colors = ['#e362e3', '#7a6ff0', '#37c5ab', '#aa62e3', '#e8384f'];
  if (data && user) {
    const { projects, teams, organizations } = data;
    const organizationID = organizations[0].id ?? null;
+    const personalProjects = projects
+      .filter(p => p.team === null)
+      .sort((a, b) => {
+        const textA = a.name.toUpperCase();
+        const textB = b.name.toUpperCase();
+        return textA < textB ? -1 : textA > textB ? 1 : 0; // eslint-disable-line no-nested-ternary
+      });
    const projectTeams = teams
      .sort((a, b) => {
        const textA = a.name.toUpperCase();
        const textB = b.name.toUpperCase();
-        return textA < textB ? -1 : textA > textB ? 1 : 0;
+        return textA < textB ? -1 : textA > textB ? 1 : 0; // eslint-disable-line no-nested-ternary
      })
      .map(team => {
        return {
          id: team.id,
          name: team.name,
          projects: projects
-            .filter(project => 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();
-              return textA < textB ? -1 : textA > textB ? 1 : 0;
+              return textA < textB ? -1 : textA > textB ? 1 : 0; // eslint-disable-line no-nested-ternary
            }),
        };
      });
    return (
      <>
-        <GlobalTopNavbar onSaveProjectName={() => {}} projectID={null} name={null} />
+        <GlobalTopNavbar onSaveProjectName={NOOP} projectID={null} name={null} />
        <Wrapper>
          <ProjectsContainer>
            {user.roles.org === 'admin' && (
@ -315,39 +292,35 @@ const Projects = () => {
                Add Team
              </AddTeamButton>
            )}
-            {projectTeams.length === 0 && (
-              <EmptyStateContent>
-                <EmptyState width={425} height={425} />
-                <EmptyStateTitle>No teams exist</EmptyStateTitle>
-                <EmptyStatePrompt>Create a new team to get started</EmptyStatePrompt>
-                <CreateFirstTeam
-                  variant="outline"
-                  onClick={$target => {
-                    showPopup(
-                      $target,
-                      <Popup
-                        title="Create team"
-                        tab={0}
-                        onClose={() => {
-                          hidePopup();
-                        }}
-                      >
-                        <CreateTeamForm
-                          onCreateTeam={teamName => {
-                            if (organizationID) {
-                              createTeam({ variables: { name: teamName, organizationID } });
-                              hidePopup();
-                            }
-                          }}
-                        />
-                      </Popup>,
-                    );
-                  }}
-                >
-                  Create new team
-                </CreateFirstTeam>
-              </EmptyStateContent>
-            )}
+            <div>
+              <ProjectSectionTitleWrapper>
+                <ProjectSectionTitle>Personal Projects</ProjectSectionTitle>
+              </ProjectSectionTitleWrapper>
+              <ProjectList>
+                {personalProjects.map((project, idx) => (
+                  <ProjectListItem key={project.id}>
+                    <ProjectTile color={colors[idx % 5]} to={`/projects/${project.id}`}>
+                      <ProjectTileFade />
+                      <ProjectTileDetails>
+                        <ProjectTileName>{project.name}</ProjectTileName>
+                      </ProjectTileDetails>
+                    </ProjectTile>
+                  </ProjectListItem>
+                ))}
+                <ProjectListItem>
+                  <ProjectAddTile
+                    onClick={() => {
+                      setShowNewProject({ open: true, initialTeamID: 'no-team' });
+                    }}
+                  >
+                    <ProjectTileFade />
+                    <ProjectAddTileDetails>
+                      <ProjectTileName centered>Create new project</ProjectTileName>
+                    </ProjectAddTileDetails>
+                  </ProjectAddTile>
+                </ProjectListItem>
+              </ProjectList>
+            </div>
            {projectTeams.map(team => {
              return (
                <div key={team.id}>
@ -401,7 +374,7 @@ const Projects = () => {
                initialTeamID={showNewProject.initialTeamID}
                onCreateProject={(name, teamID) => {
                  if (user) {
-                    createProject({ variables: { teamID, name, userID: user.id } });
+                    createProject({ variables: { teamID, name } });
                    setShowNewProject({ open: false, initialTeamID: null });
                  }
                }}
--- a/frontend/src/Teams/Members/index.tsx
+++ b/frontend/src/Teams/Members/index.tsx
@ -1,9 +1,9 @@
-import React, { useState, useContext } from 'react';
+import React, { useState } from 'react';
 import Input from 'shared/components/Input';
 import updateApolloCache from 'shared/utils/cache';
 import produce from 'immer';
 import Button from 'shared/components/Button';
-import UserContext, { useCurrentUser, PermissionLevel, PermissionObjectType } from 'App/context';
+import { useCurrentUser, PermissionLevel, PermissionObjectType } from 'App/context';
 import Select from 'shared/components/Select';
 import {
  useGetTeamQuery,
@ -13,8 +13,6 @@ import {
  useUpdateTeamMemberRoleMutation,
  GetTeamQuery,
  GetTeamDocument,
-  MeDocument,
-  MeQuery,
 } from 'shared/generated/graphql';
 import { UserPlus, Checkmark } from 'shared/icons';
 import styled, { css } from 'styled-components/macro';
@ -22,6 +20,7 @@ import { usePopup, Popup } from 'shared/components/PopupMenu';
 import TaskAssignee from 'shared/components/TaskAssignee';
 import Member from 'shared/components/Member';
 import ControlledInput from 'shared/components/ControlledInput';
+import NOOP from 'shared/utils/noop';

 const MemberListWrapper = styled.div`
  flex: 1 1;
@ -129,6 +128,7 @@ export const MiniProfileActionItem = styled.span<{ disabled?: boolean }>`
          }
        `}
 `;
+
 export const Content = styled.div`
  padding: 0 12px 12px;
 `;
@ -160,6 +160,7 @@ export const RemoveMemberButton = styled(Button)`
  padding: 6px 12px;
  width: 100%;
 `;
+
 type TeamRoleManagerPopupProps = {
  currentUserID: string;
  subject: User;
@ -253,7 +254,7 @@ const TeamRoleManagerPopup: React.FC<TeamRoleManagerPopupProps> = ({
          {subject.role && subject.role.code === 'owner' && (
            <>
              <Separator />
-              <WarningText>You can't change roles because there must be an owner.</WarningText>
+              <WarningText>You can not change roles because there must be an owner.</WarningText>
            </>
          )}
        </MiniProfileActions>
@ -510,7 +511,7 @@ const Members: React.FC<MembersProps> = ({ teamID }) => {
          <MemberList>
            {data.findTeam.members.map(member => (
              <MemberListItem>
-                <MemberProfile showRoleIcons size={32} onMemberProfile={() => {}} member={member} />
+                <MemberProfile showRoleIcons size={32} onMemberProfile={NOOP} member={member} />
                <MemberListItemDetails>
                  <MemberItemName>{member.fullName}</MemberItemName>
                  <MemberItemUsername>{`@${member.username}`}</MemberItemUsername>
--- a/frontend/src/Teams/index.tsx
+++ b/frontend/src/Teams/index.tsx
@ -1,24 +1,22 @@
-import React, { useState, useContext, useEffect } from 'react';
-import styled, { css } from 'styled-components/macro';
-import { MENU_TYPES } from 'shared/components/TopNavbar';
+import React, { useState, useEffect } from 'react';
+import styled from 'styled-components/macro';
 import GlobalTopNavbar from 'App/TopNavbar';
 import updateApolloCache from 'shared/utils/cache';
-import { Route, Switch, useRouteMatch, Redirect } from 'react-router';
-import Members from './Members';
-import Projects from './Projects';
-
+import { Route, Switch, useRouteMatch, Redirect, useParams, useHistory } from 'react-router';
 import {
  useGetTeamQuery,
  useDeleteTeamMutation,
  GetProjectsDocument,
  GetProjectsQuery,
 } from 'shared/generated/graphql';
-import { useParams, useHistory, useLocation } from 'react-router';
 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 UserContext, { PermissionObjectType, PermissionLevel, 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';

 const OuterWrapper = styled.div`
  display: flex;
@ -59,7 +57,7 @@ export const TeamPopup: React.FC<TeamPopupProps> = ({ history, name, teamID }) =
      <Popup title={null} tab={0}>
        <TeamSettings
          onDeleteTeam={() => {
-            setTab(1, 340);
+            setTab(1, { width: 340 });
          }}
        />
      </Popup>
@ -87,18 +85,30 @@ type TeamsRouteProps = {
 const Teams = () => {
  const { teamID } = useParams<TeamsRouteProps>();
  const history = useHistory();
-  const { loading, data } = useGetTeamQuery({ variables: { teamID } });
+  const { loading, data } = useGetTeamQuery({
+    variables: { teamID },
+    onCompleted: resp => {
+      document.title = `${resp.findTeam.name} | Taskcafé`;
+    },
+  });
  const { user } = useCurrentUser();
  const [currentTab, setCurrentTab] = useState(0);
  const match = useRouteMatch();
-  useEffect(() => {
-    document.title = 'Teams | Taskcafé';
-  }, []);
  if (loading) {
    return (
-      <>
-        <span>loading</span>
-      </>
+      <GlobalTopNavbar
+        menuType={[
+          { name: 'Projects', link: `${match.url}` },
+          { name: 'Members', link: `${match.url}/members` },
+        ]}
+        currentTab={currentTab}
+        onSetTab={tab => {
+          setCurrentTab(tab);
+        }}
+        onSaveProjectName={NOOP}
+        projectID={null}
+        name={null}
+      />
    );
  }
  if (data && user) {
@ -117,7 +127,7 @@ const Teams = () => {
            setCurrentTab(tab);
          }}
          popupContent={<TeamPopup history={history} name={data.findTeam.name} teamID={teamID} />}
-          onSaveProjectName={() => {}}
+          onSaveProjectName={NOOP}
          projectID={null}
          name={data.findTeam.name}
        />
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@ -8,13 +8,34 @@ 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 { getAccessToken, getNewToken, setAccessToken } from 'shared/utils/accessToken';
 import cache from './App/cache';
 import App from './App';

 // https://able.bio/AnasT/apollo-graphql-async-access-token-refresh--470t1c8
+
+dayjs.extend(isSameOrAfter);
+
+dayjs.extend(weekday);
+dayjs.extend(isBetween);
+dayjs.extend(customParseFormat);
 enableMapSet();

+dayjs.extend(updateLocale);
+
+dayjs.updateLocale('en', {
+  week: {
+    dow: 1, // First day of week is Monday
+    doy: 7, // First week of year must contain 1 January (7 + 1 - 1)
+  },
+});
+
 let forward$;
 let isRefreshing = false;
 let pendingRequests: any = [];
@ -81,7 +102,7 @@ const errorLink = onError(({ graphQLErrors, networkError, operation, forward })
    }
  }
  if (networkError) {
-    console.log(`[Network error]: ${networkError}`);
+    console.log(`[Network error]: ${networkError}`); // eslint-disable-line no-console
  }
  return undefined;
 });
@ -122,12 +143,13 @@ 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}`),
+        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}`);
+        console.log(`[Network error]: ${networkError}`); // eslint-disable-line no-console
      }
    }),
    errorLink,
--- a/frontend/src/outline.d.ts
+++ b/frontend/src/outline.d.ts
--- a/frontend/src/shared/components/AddList/index.tsx
+++ b/frontend/src/shared/components/AddList/index.tsx
@ -16,11 +16,12 @@ import {
 } from './Styles';

 type NameEditorProps = {
+  buttonLabel?: string;
  onSave: (listName: string) => void;
  onCancel: () => void;
 };

-const NameEditor: React.FC<NameEditorProps> = ({ onSave, onCancel }) => {
+export const NameEditor: React.FC<NameEditorProps> = ({ onSave: handleSave, onCancel, buttonLabel = 'Save' }) => {
  const $editorRef = useRef<HTMLTextAreaElement>(null);
  const [listName, setListName] = useState('');
  useEffect(() => {
@ -28,6 +29,11 @@ const NameEditor: React.FC<NameEditorProps> = ({ onSave, onCancel }) => {
      $editorRef.current.focus();
    }
  });
+  const onSave = (newName: string) => {
+    if (newName.replace(/\s+/g, '') !== '') {
+      handleSave(newName);
+    }
+  };
  const onKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter') {
      e.preventDefault();
@ -60,7 +66,7 @@ const NameEditor: React.FC<NameEditorProps> = ({ onSave, onCancel }) => {
            }
          }}
        >
-          Save
+          {buttonLabel}
        </AddListButton>
        <CancelAdd onClick={() => onCancel()}>
          <Cross width={16} height={16} />
@ -98,7 +104,7 @@ const AddList: React.FC<AddListProps> = ({ onSave }) => {
        ) : (
          <Placeholder>
            <AddIconWrapper>
-              <Plus size={12} color="#c2c6dc" />
+              <Plus width={12} height={12} />
            </AddIconWrapper>
            Add another list
          </Placeholder>
--- a/frontend/src/shared/components/Admin/Admin.stories.tsx
+++ b/frontend/src/shared/components/Admin/Admin.stories.tsx
@ -1,10 +1,10 @@
-import React, { useRef } from 'react';
-import Admin from '.';
-import { theme } from 'App/ThemeStyles';
-import NormalizeStyles from 'App/NormalizeStyles';
-import BaseStyles from 'App/BaseStyles';
+import React from 'react';
 import { ThemeProvider } from 'styled-components';
 import { action } from '@storybook/addon-actions';
+import theme from 'App/ThemeStyles';
+import NormalizeStyles from 'App/NormalizeStyles';
+import BaseStyles from 'App/BaseStyles';
+import Admin from '.';

 export default {
  component: Admin,
@ -51,7 +51,9 @@ export const Default = () => {
              },
            },
          ]}
+          invitedUsers={[]}
          onAddUser={action('add user')}
+          onDeleteInvitedUser={action('delete invited user')}
        />
      </ThemeProvider>
    </>
--- a/frontend/src/shared/components/Admin/index.tsx
+++ b/frontend/src/shared/components/Admin/index.tsx
@ -1,15 +1,13 @@
 import React, { useState, useRef } from 'react';
-import { UserPlus, Checkmark } from 'shared/icons';
 import styled, { css } from 'styled-components';
 import TaskAssignee from 'shared/components/TaskAssignee';
 import Select from 'shared/components/Select';
-import { User, Plus, Lock, Pencil, Trash } from 'shared/icons';
+import { User, UserPlus, Checkmark } from 'shared/icons';
 import { usePopup, Popup } from 'shared/components/PopupMenu';
 import { RoleCode, useUpdateUserRoleMutation } from 'shared/generated/graphql';
 import Input from 'shared/components/Input';
-import Member from 'shared/components/Member';
-
 import Button from 'shared/components/Button';
+import NOOP from 'shared/utils/noop';

 export const RoleCheckmark = styled(Checkmark)`
  padding-left: 4px;
@ -69,6 +67,7 @@ export const MiniProfileActionItem = styled.span<{ disabled?: boolean }>`
          }
        `}
 `;
+
 export const Content = styled.div`
  padding: 0 12px 12px;
 `;
@ -100,12 +99,13 @@ export const RemoveMemberButton = styled(Button)`
  padding: 6px 12px;
  width: 100%;
 `;
+
 type TeamRoleManagerPopupProps = {
  user: User;
  users: Array<User>;
  warning?: string | null;
-  canChangeRole: boolean;
-  onChangeRole: (roleCode: RoleCode) => void;
+  canChangeRole?: boolean;
+  onChangeRole?: (roleCode: RoleCode) => void;
  updateUserPassword?: (user: TaskUser, password: string) => void;
  onDeleteUser?: (userID: string, newOwnerID: string | null) => void;
 };
@ -120,7 +120,7 @@ const TeamRoleManagerPopup: React.FC<TeamRoleManagerPopupProps> = ({
  onChangeRole,
 }) => {
  const { hidePopup, setTab } = usePopup();
-  const [userPass, setUserPass] = useState({ pass: '', passConfirm: '' });
+  const [userPass] = useState({ pass: '', passConfirm: '' });
  const [deleteUser, setDeleteUser] = useState<{ label: string; value: string } | null>(null);
  const hasOwned = user.owned.projects.length !== 0 || user.owned.teams.length !== 0;
  return (
@ -195,7 +195,7 @@ const TeamRoleManagerPopup: React.FC<TeamRoleManagerPopupProps> = ({
          {user.role && user.role.code === 'owner' && (
            <>
              <Separator />
-              <WarningText>You can't change roles because there must be an owner.</WarningText>
+              <WarningText>You can not change roles because there must be an owner.</WarningText>
            </>
          )}
        </MiniProfileActions>
@ -209,7 +209,7 @@ const TeamRoleManagerPopup: React.FC<TeamRoleManagerPopupProps> = ({
            <>
              <DeleteDescription>{`The user is the owner of ${user.owned.projects.length} projects & ${user.owned.teams.length} teams.`}</DeleteDescription>
              <DeleteDescription>
-                Choose a new user to take over ownership of this user's teams & projects.
+                Choose a new user to take over ownership of the users teams & projects.
              </DeleteDescription>
              <UserSelect
                onChange={v => setDeleteUser(v)}
@ -239,7 +239,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={() => {}} 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();
@ -253,7 +253,7 @@ const TeamRoleManagerPopup: React.FC<TeamRoleManagerPopupProps> = ({
      <Popup title="Reset password?" onClose={() => hidePopup()} tab={3}>
        <Content>
          <DeleteDescription>
-            You can either set the user's new password directly or send the user an email allowing them to reset their
+            You can either set the users new password directly or send the user an email allowing them to reset their
            own password.
          </DeleteDescription>
          <UserPassBar>
@ -291,6 +291,7 @@ const TeamRoleManagerPopup: React.FC<TeamRoleManagerPopupProps> = ({
    </>
  );
 };
+
 const UserSelect = styled(Select)`
  margin: 8px 0;
  padding: 8px 0;
@ -299,6 +300,7 @@ const UserSelect = styled(Select)`
 const NewUserPassInput = styled(Input)`
  margin: 8px 0;
 `;
+
 const InviteMemberButton = styled(Button)`
  padding: 7px 12px;
 `;
@ -307,6 +309,7 @@ const UserPassBar = styled.div`
  display: flex;
  padding-top: 8px;
 `;
+
 const UserPassConfirmButton = styled(Button)`
  width: 100%;
  padding: 7px 12px;
@ -397,104 +400,6 @@ const MemberListWrapper = styled.div`
  flex: 1 1;
 `;

-const Root = styled.div`
-  .ag-theme-material {
-    --ag-foreground-color: #c2c6dc;
-    --ag-secondary-foreground-color: #c2c6dc;
-    --ag-background-color: transparent;
-    --ag-header-background-color: transparent;
-    --ag-header-foreground-color: #c2c6dc;
-    --ag-border-color: #414561;
-
-    --ag-row-hover-color: #262c49;
-    --ag-header-cell-hover-background-color: #262c49;
-    --ag-checkbox-unchecked-color: #c2c6dc;
-    --ag-checkbox-indeterminate-color: rgba(115, 103, 240);
-    --ag-selected-row-background-color: #262c49;
-    --ag-material-primary-color: rgba(115, 103, 240);
-    --ag-material-accent-color: rgba(115, 103, 240);
-  }
-  .ag-theme-material ::-webkit-scrollbar {
-    width: 12px;
-  }
-
-  .ag-theme-material ::-webkit-scrollbar-track {
-    background: #262c49;
-    border-radius: 20px;
-  }
-
-  .ag-theme-material ::-webkit-scrollbar-thumb {
-    background: #7367f0;
-    border-radius: 20px;
-  }
-  .ag-header-cell-text {
-    color: #fff;
-    font-weight: 700;
-  }
-`;
-
-const Header = styled.div`
-  border-bottom: 1px solid #e2e2e2;
-  flex-direction: row;
-  box-sizing: border-box;
-  display: flex;
-  white-space: nowrap;
-  width: 100%;
-  overflow: hidden;
-  background: transparent;
-  border-bottom-color: #414561;
-  color: #fff;
-
-  height: 112px;
-  min-height: 112px;
-`;
-
-const EditUserIcon = styled(Pencil)``;
-
-const LockUserIcon = styled(Lock)``;
-
-const DeleteUserIcon = styled(Trash)``;
-
-type ActionButtonProps = {
-  onClick: ($target: React.RefObject<HTMLElement>) => void;
-};
-
-const ActionButtonWrapper = styled.div`
-  margin-right: 8px;
-  cursor: pointer;
-  display: inline-flex;
-`;
-
-const ActionButton: React.FC<ActionButtonProps> = ({ onClick, children }) => {
-  const $wrapper = useRef<HTMLDivElement>(null);
-  return (
-    <ActionButtonWrapper onClick={() => onClick($wrapper)} ref={$wrapper}>
-      {children}
-    </ActionButtonWrapper>
-  );
-};
-
-const ActionButtons = (params: any) => {
-  return (
-    <>
-      <ActionButton onClick={() => {}}>
-        <EditUserIcon width={16} height={16} />
-      </ActionButton>
-      <ActionButton onClick={$target => params.onDeleteUser($target, params.value)}>
-        <DeleteUserIcon width={16} height={16} />
-      </ActionButton>
-    </>
-  );
-};
-
-const Wrapper = styled.div`
-  background: #eff2f7;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-wrap: wrap;
-`;
-
 const Container = styled.div`
  padding: 2.2rem;
  display: flex;
@ -525,6 +430,7 @@ const TabNavItem = styled.li`
  display: block;
  position: relative;
 `;
+
 const TabNavItemButton = styled.button<{ active: boolean }>`
  cursor: pointer;
  display: flex;
@ -545,6 +451,10 @@ const TabNavItemButton = styled.button<{ active: boolean }>`
    fill: rgba(115, 103, 240);
  }
 `;
+const TabItemUser = styled(User)<{ active: boolean }>`
+fill: ${props => (props.active ? 'rgba(115, 103, 240)' : '#c2c6dc')}
+stroke: ${props => (props.active ? 'rgba(115, 103, 240)' : '#c2c6dc')}
+`;

 const TabNavItemSpan = styled.span`
  text-align: left;
@ -607,7 +517,7 @@ const NavItem: React.FC<NavItemProps> = ({ active, name, tab, onClick }) => {
      }}
    >
      <TabNavItemButton active={active}>
-        <User size={14} color={active ? 'rgba(115, 103, 240)' : '#c2c6dc'} />
+        <TabItemUser width={14} height={14} active={active} />
        <TabNavItemSpan>{name}</TabNavItemSpan>
      </TabNavItemButton>
    </TabNavItem>
@ -620,8 +530,10 @@ type AdminProps = {
  onDeleteUser: (userID: string, newOwnerID: string | null) => void;
  onInviteUser: ($target: React.RefObject<HTMLElement>) => void;
  users: Array<User>;
+  invitedUsers: Array<InvitedUserAccount>;
  canInviteUser: boolean;
  onUpdateUserPassword: (user: TaskUser, password: string) => void;
+  onDeleteInvitedUser: (invitedUserID: string) => void;
 };

 const Admin: React.FC<AdminProps> = ({
@ -630,14 +542,16 @@ const Admin: React.FC<AdminProps> = ({
  onUpdateUserPassword,
  canInviteUser,
  onDeleteUser,
+  onDeleteInvitedUser,
  onInviteUser,
+  invitedUsers,
  users,
 }) => {
  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 [currentTop, setTop] = useState(initialTab * 48);
  const [currentTab, setTab] = useState(initialTab);
-  const { showPopup, hidePopup } = usePopup();
+  const { showPopup } = usePopup();
  const $tabNav = useRef<HTMLDivElement>(null);

  const [updateUserRole] = useUpdateUserRoleMutation();
@ -647,6 +561,7 @@ const Admin: React.FC<AdminProps> = ({
        <TabNavContent>
          {items.map((item, idx) => (
            <NavItem
+              key={item.name}
              onClick={(tab, top) => {
                if ($tabNav && $tabNav.current) {
                  const pos = $tabNav.current.getBoundingClientRect();
@ -666,7 +581,7 @@ const Admin: React.FC<AdminProps> = ({
        <TabContent>
          <MemberListWrapper>
            <MemberListHeader>
-              <ListTitle>{`Members (${users.length})`}</ListTitle>
+              <ListTitle>{`Members (${users.length + invitedUsers.length})`}</ListTitle>
              <ListDesc>
                Organization admins can create / manage / delete all projects & teams. Members only have access to teams
                or projects they have been added to.
@ -690,7 +605,7 @@ const Admin: React.FC<AdminProps> = ({
                const projectTotal = member.owned.projects.length + member.member.projects.length;
                return (
                  <MemberListItem>
-                    <MemberProfile showRoleIcons size={32} onMemberProfile={() => {}} member={member} />
+                    <MemberProfile showRoleIcons size={32} onMemberProfile={NOOP} member={member} />
                    <MemberListItemDetails>
                      <MemberItemName>{member.fullName}</MemberItemName>
                      <MemberItemUsername>{`@${member.username}`}</MemberItemUsername>
@ -724,6 +639,65 @@ const Admin: React.FC<AdminProps> = ({
                  </MemberListItem>
                );
              })}
+              {invitedUsers.map(member => {
+                return (
+                  <MemberListItem>
+                    <MemberProfile
+                      showRoleIcons
+                      size={32}
+                      onMemberProfile={NOOP}
+                      member={{
+                        id: member.id,
+                        fullName: member.email,
+                        profileIcon: {
+                          bgColor: '#fff',
+                          url: null,
+                          initials: member.email.charAt(0),
+                        },
+                      }}
+                    />
+                    <MemberListItemDetails>
+                      <MemberItemName>{member.email}</MemberItemName>
+                      <MemberItemUsername>Invited</MemberItemUsername>
+                    </MemberListItemDetails>
+                    <MemberItemOptions>
+                      <MemberItemOption
+                        variant="outline"
+                        onClick={$target => {
+                          showPopup(
+                            $target,
+                            <TeamRoleManagerPopup
+                              user={{
+                                id: member.id,
+                                fullName: member.email,
+                                profileIcon: {
+                                  bgColor: '#fff',
+                                  url: null,
+                                  initials: member.email.charAt(0),
+                                },
+                                member: {
+                                  teams: [],
+                                  projects: [],
+                                },
+                                owned: {
+                                  teams: [],
+                                  projects: [],
+                                },
+                              }}
+                              users={users}
+                              onDeleteUser={() => {
+                                onDeleteInvitedUser(member.id);
+                              }}
+                            />,
+                          );
+                        }}
+                      >
+                        Manage
+                      </MemberItemOption>
+                    </MemberItemOptions>
+                  </MemberListItem>
+                );
+              })}
            </MemberList>
          </MemberListWrapper>
        </TabContent>
--- a/frontend/src/shared/components/Button/Button.stories.tsx
+++ b/frontend/src/shared/components/Button/Button.stories.tsx
@ -2,7 +2,7 @@ import React from 'react';
 import { action } from '@storybook/addon-actions';
 import BaseStyles from 'App/BaseStyles';
 import NormalizeStyles from 'App/NormalizeStyles';
-import { theme } from 'App/ThemeStyles';
+import theme from 'App/ThemeStyles';
 import styled, { ThemeProvider } from 'styled-components';
 import Button from '.';

--- a/frontend/src/shared/components/Button/index.tsx
+++ b/frontend/src/shared/components/Button/index.tsx
@ -1,7 +1,7 @@
 import React, { useRef } from 'react';
 import styled, { css } from 'styled-components/macro';

-const Text = styled.span<{ fontSize: string; justifyTextContent: string }>`
+const Text = styled.span<{ fontSize: string; justifyTextContent: string; hasIcon?: boolean }>`
  position: relative;
  display: flex;
  align-items: center;
@ -9,6 +9,11 @@ const Text = styled.span<{ fontSize: string; justifyTextContent: string }>`
  transition: all 0.2s ease;
  font-size: ${props => props.fontSize};
  color: rgba(${props => props.theme.colors.text.secondary});
+  ${props =>
+    props.hasIcon &&
+    css`
+      padding-left: 4px;
+    `}
 `;

 const Base = styled.button<{ color: string; disabled: boolean }>`
@ -18,6 +23,8 @@ const Base = styled.button<{ color: string; disabled: boolean }>`
  cursor: pointer;
  padding: 0.75rem 2rem;
  border-radius: ${props => props.theme.borderRadius.alternate};
+  display: flex;
+  align-items: center;

  ${props =>
    props.disabled &&
@ -28,22 +35,38 @@ const Base = styled.button<{ color: string; disabled: boolean }>`
    `}
 `;

-const Filled = styled(Base)`
+const Filled = styled(Base)<{ hoverVariant: HoverVariant }>`
  background: rgba(${props => props.theme.colors[props.color]});
-  &:hover {
-    box-shadow: 0 8px 25px -8px rgba(${props => props.theme.colors[props.color]});
-  }
+  ${props =>
+    props.hoverVariant === 'boxShadow' &&
+    css`
+      &:hover {
+        box-shadow: 0 8px 25px -8px rgba(${props.theme.colors[props.color]});
+      }
+    `}
 `;
-const Outline = styled(Base)`
+const Outline = styled(Base)<{ invert: boolean }>`
  border: 1px solid rgba(${props => props.theme.colors[props.color]});
  background: transparent;
-  & ${Text} {
-    color: rgba(${props => props.theme.colors[props.color]});
-  }
-
-  &:hover {
-    background: rgba(${props => props.theme.colors[props.color]}, 0.08);
-  }
+  ${props =>
+    props.invert
+      ? css`
+          background: rgba(${props.theme.colors[props.color]});
+          & ${Text} {
+            color: rgba(${props.theme.colors.text.secondary});
+          }
+          &:hover {
+            background: rgba(${props.theme.colors[props.color]}, 0.8);
+          }
+        `
+      : css`
+          & ${Text} {
+            color: rgba(${props.theme.colors[props.color]});
+          }
+          &:hover {
+            background: rgba(${props.theme.colors[props.color]}, 0.08);
+          }
+        `}
 `;

 const Flat = styled(Base)`
@ -104,12 +127,16 @@ const Relief = styled(Base)`
  }
 `;

+type HoverVariant = 'boxShadow' | 'none';
 type ButtonProps = {
  fontSize?: string;
  variant?: 'filled' | 'outline' | 'flat' | 'lineDown' | 'gradient' | 'relief';
+  hoverVariant?: HoverVariant;
  color?: 'primary' | 'danger' | 'success' | 'warning' | 'dark';
  disabled?: boolean;
  type?: 'button' | 'submit';
+  icon?: JSX.Element;
+  invert?: boolean;
  className?: string;
  onClick?: ($target: React.RefObject<HTMLButtonElement>) => void;
  justifyTextContent?: string;
@ -118,10 +145,13 @@ type ButtonProps = {
 const Button: React.FC<ButtonProps> = ({
  disabled = false,
  fontSize = '14px',
+  invert = false,
  color = 'primary',
  variant = 'filled',
+  hoverVariant = 'boxShadow',
  type = 'button',
  justifyTextContent = 'center',
+  icon,
  onClick,
  className,
  children,
@ -135,8 +165,17 @@ const Button: React.FC<ButtonProps> = ({
  switch (variant) {
    case 'filled':
      return (
-        <Filled ref={$button} type={type} onClick={handleClick} className={className} disabled={disabled} color={color}>
-          <Text justifyTextContent={justifyTextContent} fontSize={fontSize}>
+        <Filled
+          ref={$button}
+          hoverVariant={hoverVariant}
+          type={type}
+          onClick={handleClick}
+          className={className}
+          disabled={disabled}
+          color={color}
+        >
+          {icon && icon}
+          <Text hasIcon={typeof icon !== 'undefined'} justifyTextContent={justifyTextContent} fontSize={fontSize}>
            {children}
          </Text>
        </Filled>
@ -145,6 +184,7 @@ const Button: React.FC<ButtonProps> = ({
      return (
        <Outline
          ref={$button}
+          invert={invert}
          type={type}
          onClick={handleClick}
          className={className}
--- a/frontend/src/shared/components/Card/Styles.ts
+++ b/frontend/src/shared/components/Card/Styles.ts
@ -1,9 +1,7 @@
 import styled, { css, keyframes } from 'styled-components';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { mixin } from 'shared/utils/styles';
 import TextareaAutosize from 'react-autosize-textarea';
-import { CheckCircle, CheckSquareOutline } from 'shared/icons';
-import { RefObject } from 'react';
+import { CheckCircle, CheckSquareOutline, Clock } from 'shared/icons';
 import TaskAssignee from 'shared/components/TaskAssignee';

 export const CardMember = styled(TaskAssignee)<{ zIndex: number }>`
@ -20,7 +18,9 @@ export const ChecklistIcon = styled(CheckSquareOutline)<{ color: 'success' | 'no
      stroke: rgba(${props.theme.colors.success});
    `}
 `;
-export const ClockIcon = styled(FontAwesomeIcon)``;
+export const ClockIcon = styled(Clock)<{ color: string }>`
+  fill: ${props => props.color};
+`;

 export const EditorTextarea = styled(TextareaAutosize)`
  overflow: hidden;
@ -147,6 +147,11 @@ export const ListCardLabelText = styled.span`
  line-height: 16px;
 `;

+export const ListCardLabelsWrapper = styled.div`
+  overflow: auto;
+  position: relative;
+`;
+
 export const ListCardLabel = styled.span<{ variant: 'small' | 'large' }>`
  ${props =>
    props.variant === 'small'
@ -178,8 +183,6 @@ export const ListCardLabel = styled.span<{ variant: 'small' | 'large' }>`
 `;

 export const ListCardLabels = styled.div<{ toggleLabels: boolean; toggleDirection: 'expand' | 'shrink' }>`
-  overflow: auto;
-  position: relative;
  &:hover {
    opacity: 0.8;
  }
--- a/frontend/src/shared/components/Card/index.tsx
+++ b/frontend/src/shared/components/Card/index.tsx
@ -1,7 +1,5 @@
 import React, { useState, useRef, useEffect } from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faPencilAlt, faList } from '@fortawesome/free-solid-svg-icons';
-import { faClock, faCheckSquare, faEye } from '@fortawesome/free-regular-svg-icons';
+import { Pencil, Eye, List } from 'shared/icons';
 import {
  EditorTextarea,
  CardMember,
@ -20,11 +18,11 @@ import {
  ListCardLabels,
  ListCardLabel,
  ListCardLabelText,
+  ListCardLabelsWrapper,
  ListCardOperation,
  CardTitle,
  CardMembers,
 } from './Styles';
-import { CheckSquare } from 'shared/icons';

 type DueDate = {
  isPastDue: boolean;
@ -155,39 +153,42 @@ const Card = React.forwardRef(
                }
              }}
            >
-              <FontAwesomeIcon onClick={onOperationClick} color="#c2c6dc" size="xs" icon={faPencilAlt} />
+              <Pencil width={8} height={8} />
            </ListCardOperation>
          )}
          <ListCardDetails complete={complete ?? false}>
-            <ListCardLabels
-              toggleLabels={toggleLabels}
-              toggleDirection={toggleDirection}
-              onClick={e => {
-                e.stopPropagation();
-                if (onCardLabelClick) {
-                  onCardLabelClick();
-                }
-              }}
-            >
-              {labels &&
-                labels
-                  .slice()
-                  .sort((a, b) => a.labelColor.position - b.labelColor.position)
-                  .map(label => (
-                    <ListCardLabel
-                      onAnimationEnd={() => {
-                        if (setToggleLabels) {
-                          setToggleLabels(false);
-                        }
-                      }}
-                      variant={labelVariant ?? 'large'}
-                      color={label.labelColor.colorHex}
-                      key={label.id}
-                    >
-                      <ListCardLabelText>{label.name}</ListCardLabelText>
-                    </ListCardLabel>
-                  ))}
-            </ListCardLabels>
+            {labels && labels.length !== 0 && (
+              <ListCardLabelsWrapper>
+                <ListCardLabels
+                  toggleLabels={toggleLabels}
+                  toggleDirection={toggleDirection}
+                  onClick={e => {
+                    e.stopPropagation();
+                    if (onCardLabelClick) {
+                      onCardLabelClick();
+                    }
+                  }}
+                >
+                  {labels
+                    .slice()
+                    .sort((a, b) => a.labelColor.position - b.labelColor.position)
+                    .map(label => (
+                      <ListCardLabel
+                        onAnimationEnd={() => {
+                          if (setToggleLabels) {
+                            setToggleLabels(false);
+                          }
+                        }}
+                        variant={labelVariant ?? 'large'}
+                        color={label.labelColor.colorHex}
+                        key={label.id}
+                      >
+                        <ListCardLabelText>{label.name}</ListCardLabelText>
+                      </ListCardLabel>
+                    ))}
+                </ListCardLabels>
+              </ListCardLabelsWrapper>
+            )}
            {editable ? (
              <EditorContent>
                {complete && <CompleteIcon width={16} height={16} />}
@ -209,24 +210,24 @@ const Card = React.forwardRef(
            ) : (
              <CardTitle>
                {complete && <CompleteIcon width={16} height={16} />}
-                {`${title}${position ? ' - ' + position : ''}`}
+                {`${title}${position ? ` - ${position}` : ''}`}
              </CardTitle>
            )}
            <ListCardBadges>
              {watched && (
                <ListCardBadge>
-                  <FontAwesomeIcon color="#6b778c" icon={faEye} size="xs" />
+                  <Eye width={8} height={8} />
                </ListCardBadge>
              )}
              {dueDate && (
                <DueDateCardBadge isPastDue={dueDate.isPastDue}>
-                  <ClockIcon color={dueDate.isPastDue ? '#fff' : '#6b778c'} icon={faClock} size="xs" />
+                  <ClockIcon color={dueDate.isPastDue ? '#fff' : '#6b778c'} width={8} height={8} />
                  <ListCardBadgeText>{dueDate.formattedDate}</ListCardBadgeText>
                </DueDateCardBadge>
              )}
              {description && (
                <DescriptionBadge>
-                  <FontAwesomeIcon color="#6b778c" icon={faList} size="xs" />
+                  <List width={8} height={8} />
                </DescriptionBadge>
              )}
              {checklists && (
@ -236,9 +237,9 @@ const Card = React.forwardRef(
                    width={8}
                    height={8}
                  />
-                  <ListCardBadgeText
-                    color={checklists.complete === checklists.total ? 'success' : 'normal'}
-                  >{`${checklists.complete}/${checklists.total}`}</ListCardBadgeText>
+                  <ListCardBadgeText color={checklists.complete === checklists.total ? 'success' : 'normal'}>
+                    {`${checklists.complete}/${checklists.total}`}
+                  </ListCardBadgeText>
                </ListCardBadge>
              )}
            </ListCardBadges>
--- a/frontend/src/shared/components/CardComposer/Styles.ts
+++ b/frontend/src/shared/components/CardComposer/Styles.ts
@ -1,15 +1,15 @@
 import styled from 'styled-components';
 import Button from 'shared/components/Button';
 import TextareaAutosize from 'react-autosize-textarea';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { mixin } from 'shared/utils/styles';

-export const CancelIcon = styled(FontAwesomeIcon)`
+export const CancelIconWrapper = styled.div`
  opacity: 0.8;
  cursor: pointer;
  font-size: 1.25em;
  padding-left: 5px;
 `;
+
 export const CardComposerWrapper = styled.div<{ isOpen: boolean }>`
  padding-bottom: 8px;
  display: ${props => (props.isOpen ? 'flex' : 'none')};
--- a/frontend/src/shared/components/CardComposer/index.tsx
+++ b/frontend/src/shared/components/CardComposer/index.tsx
@ -1,12 +1,12 @@
 import React, { useState, useRef } from 'react';
 import PropTypes from 'prop-types';
 import useOnEscapeKeyDown from 'shared/hooks/onEscapeKeyDown';
-import { faTimes } from '@fortawesome/free-solid-svg-icons';
 import useOnOutsideClick from 'shared/hooks/onOutsideClick';
+import { Cross } from 'shared/icons';

 import {
  CardComposerWrapper,
-  CancelIcon,
+  CancelIconWrapper,
  AddCardButton,
  ComposerControls,
  ComposerControlsSaveSection,
@ -26,10 +26,9 @@ const CardComposer = ({ isOpen, onCreateCard, onClose }: Props) => {
  useOnOutsideClick($cardRef, true, onClose, null);
  useOnEscapeKeyDown(isOpen, onClose);
  return (
-    <CardComposerWrapper isOpen={isOpen}>
+    <CardComposerWrapper isOpen={isOpen} ref={$cardRef}>
      <Card
        title={cardName}
-        ref={$cardRef}
        taskID=""
        taskGroupID=""
        editable
@ -52,7 +51,9 @@ const CardComposer = ({ isOpen, onCreateCard, onClose }: Props) => {
          >
            Add Card
          </AddCardButton>
-          <CancelIcon onClick={onClose} icon={faTimes} color="#42526e" />
+          <CancelIconWrapper onClick={() => onClose()}>
+            <Cross width={12} height={12} />
+          </CancelIconWrapper>
        </ComposerControlsSaveSection>
        <ComposerControlsActionsSection />
      </ComposerControls>
--- a/frontend/src/shared/components/Checklist/Checklist.stories.tsx
+++ b/frontend/src/shared/components/Checklist/Checklist.stories.tsx
@ -2,9 +2,10 @@ import React, { useState } from 'react';
 import { action } from '@storybook/addon-actions';
 import BaseStyles from 'App/BaseStyles';
 import NormalizeStyles from 'App/NormalizeStyles';
-import { theme } from 'App/ThemeStyles';
+import theme from 'App/ThemeStyles';
 import produce from 'immer';
 import styled, { ThemeProvider } from 'styled-components';
+import NOOP from 'shared/utils/noop';
 import Checklist, { ChecklistItem } from '.';

 export default {
@ -132,7 +133,7 @@ export const Default = () => {
            }}
            onToggleItem={onToggleItem}
          >
-            {items.map((item, idx) => (
+            {items.map(item => (
              <ChecklistItem
                key={item.id}
                wrapperProps={{}}
@ -141,9 +142,9 @@ export const Default = () => {
                itemID={item.id}
                name={item.name}
                complete={item.complete}
-                onDeleteItem={() => {}}
-                onChangeName={() => {}}
-                onToggleItem={() => {}}
+                onDeleteItem={NOOP}
+                onChangeName={NOOP}
+                onToggleItem={NOOP}
              />
            ))}
          </Checklist>
--- a/frontend/src/shared/components/Checklist/index.tsx
+++ b/frontend/src/shared/components/Checklist/index.tsx
@ -25,7 +25,7 @@ const WindowTitle = styled.div`

 const WindowTitleIcon = styled(CheckSquareOutline)`
  top: 10px;
-  left: -40px;
+  left: -32px;
  position: absolute;
 `;

--- a/frontend/src/shared/components/Chip/index.tsx
+++ b/frontend/src/shared/components/Chip/index.tsx
@ -0,0 +1,71 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+import { Cross } from 'shared/icons';
+
+const LabelText = styled.span`
+  margin-left: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: rgba(${props => props.theme.colors.text.primary});
+`;
+
+const Container = styled.div<{ color?: string }>`
+  min-height: 26px;
+  min-width: 26px;
+  font-size: 0.8rem;
+  border-radius: 20px;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  ${props =>
+    props.color
+      ? css`
+          background: ${props.color};
+          & ${LabelText} {
+            color: rgba(${props.theme.colors.text.secondary});
+          }
+        `
+      : css`
+          background: rgba(${props.theme.colors.bg.primary});
+        `}
+`;
+
+const CloseButton = styled.button`
+  cursor: pointer;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  margin: 0 4px;
+  background: rgba(0, 0, 0, 0.15);
+  &:hover {
+    background: rgba(0, 0, 0, 0.25);
+  }
+`;
+
+type ChipProps = {
+  label: string;
+  onClose?: () => void;
+  color?: string;
+  className?: string;
+};
+
+const Chip: React.FC<ChipProps> = ({ label, onClose, color, className }) => {
+  return (
+    <Container className={className} color={color}>
+      <LabelText>{label}</LabelText>
+      {onClose && (
+        <CloseButton onClick={() => onClose()}>
+          <Cross width={12} height={12} />
+        </CloseButton>
+      )}
+    </Container>
+  );
+};
+
+export default Chip;
--- a/frontend/src/shared/components/ControlledInput/Input.stories.tsx
+++ b/frontend/src/shared/components/ControlledInput/Input.stories.tsx
@ -1,11 +1,11 @@
 import React from 'react';
 import BaseStyles from 'App/BaseStyles';
 import NormalizeStyles from 'App/NormalizeStyles';
-import { theme } from 'App/ThemeStyles';
+import theme from 'App/ThemeStyles';
 import styled, { ThemeProvider } from 'styled-components';
+import { User } from 'shared/icons';

 import Input from '.';
-import { User } from 'shared/icons';

 export default {
  component: Input,
@ -35,7 +35,7 @@ export const Default = () => {
        <Wrapper>
          <Input label="Label placeholder" />
          <Input width="100%" placeholder="Placeholder" />
-          <Input icon={<User size={20} />} width="100%" placeholder="Placeholder" />
+          <Input icon={<User width={20} height={20} />} width="100%" placeholder="Placeholder" />
        </Wrapper>
      </ThemeProvider>
    </>
--- a/frontend/src/shared/components/DropdownMenu/index.tsx
+++ b/frontend/src/shared/components/DropdownMenu/index.tsx
@ -18,7 +18,7 @@ const DropdownMenu: React.FC<DropdownMenuProps> = ({ left, top, onLogout, onClos
    <Container ref={$containerRef} left={left} top={top}>
      <Wrapper>
        <ActionItem onClick={onAdminConsole}>
-          <User size={16} color="#c2c6dc" />
+          <User width={16} height={16} />
          <ActionTitle>Profile</ActionTitle>
        </ActionItem>
        <Separator />
@ -54,7 +54,7 @@ const ProfileMenu: React.FC<ProfileMenuProps> = ({ showAdminConsole, onAdminCons
        </>
      )}
      <ActionItem onClick={onProfile}>
-        <User size={16} color="#c2c6dc" />
+        <User width={16} height={16} />
        <ActionTitle>Profile</ActionTitle>
      </ActionItem>
      <ActionsList>
--- a/frontend/src/shared/components/DueDateManager/DueDateManager.stories.tsx
+++ b/frontend/src/shared/components/DueDateManager/DueDateManager.stories.tsx
@ -1,8 +1,8 @@
-import React, { useRef } from 'react';
+import React from 'react';
 import { action } from '@storybook/addon-actions';
 import BaseStyles from 'App/BaseStyles';
 import NormalizeStyles from 'App/NormalizeStyles';
-import { theme } from 'App/ThemeStyles';
+import theme from 'App/ThemeStyles';
 import styled, { ThemeProvider } from 'styled-components';
 import { Popup } from '../PopupMenu';
 import DueDateManager from '.';
--- a/frontend/src/shared/components/DueDateManager/index.tsx
+++ b/frontend/src/shared/components/DueDateManager/index.tsx
@ -1,23 +1,14 @@
 import React, { useState, useEffect, forwardRef } from 'react';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import styled from 'styled-components';
 import DatePicker from 'react-datepicker';
-import { Cross } from 'shared/icons';
 import _ from 'lodash';
-
-import {
-  Wrapper,
-  ActionWrapper,
-  RemoveDueDate,
-  DueDateInput,
-  DueDatePickerWrapper,
-  ConfirmAddDueDate,
-  CancelDueDate,
-} from './Styles';
-
 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 { Wrapper, ActionWrapper, RemoveDueDate, DueDateInput, DueDatePickerWrapper, ConfirmAddDueDate } from './Styles';

 type DueDateManagerProps = {
  task: Task;
@ -119,18 +110,14 @@ const HeaderActions = styled.div`
 `;

 const DueDateManager: React.FC<DueDateManagerProps> = ({ task, onDueDateChange, onRemoveDueDate, onCancel }) => {
-  const now = moment();
-  const [textStartDate, setTextStartDate] = useState(now.format('YYYY-MM-DD'));
+  const now = dayjs();
+  const { register, handleSubmit, errors, setValue, setError, formState, control } = useForm<DueDateFormData>();
  const [startDate, setStartDate] = useState(new Date());
-  useEffect(() => {
-    setTextStartDate(moment(startDate).format('YYYY-MM-DD'));
-  }, [startDate]);

-  const [textEndTime, setTextEndTime] = useState(now.format('h:mm A'));
-  const [endTime, setEndTime] = useState(now.toDate());
  useEffect(() => {
-    setTextEndTime(moment(endTime).format('h:mm A'));
-  }, [endTime]);
+    const newDate = dayjs(startDate).format('YYYY-MM-DD');
+    setValue('endDate', newDate);
+  }, [startDate]);

  const years = _.range(2010, getYear(new Date()) + 10, 1);
  const months = [
@ -147,9 +134,8 @@ const DueDateManager: React.FC<DueDateManagerProps> = ({ task, onDueDateChange,
    'November',
    'December',
  ];
-  const { register, handleSubmit, errors, setValue, setError, formState, control } = useForm<DueDateFormData>();
  const saveDueDate = (data: any) => {
-    const newDate = moment(`${data.endDate} ${data.endTime}`, 'YYYY-MM-DD h:mm A');
+    const newDate = dayjs(`${data.endDate} ${dayjs(data.endTime).format('h:mm A')}`, 'YYYY-MM-DD h:mm A');
    if (newDate.isValid()) {
      onDueDateChange(task, newDate.toDate());
    }
@ -158,11 +144,12 @@ const DueDateManager: React.FC<DueDateManagerProps> = ({ task, onDueDateChange,
    return (
      <DueDateInput
        id="endTime"
+        value={value}
        name="endTime"
        ref={$ref}
        width="100%"
        variant="alternate"
-        label="Date"
+        label="Time"
        onClick={onClick}
      />
    );
@ -177,7 +164,7 @@ const DueDateManager: React.FC<DueDateManagerProps> = ({ task, onDueDateChange,
            width="100%"
            variant="alternate"
            label="Date"
-            defaultValue={textStartDate}
+            defaultValue={now.format('YYYY-MM-DD')}
            ref={register({
              required: 'End date is required.',
            })}
@ -186,6 +173,7 @@ const DueDateManager: React.FC<DueDateManagerProps> = ({ task, onDueDateChange,
        <FormField>
          <Controller
            control={control}
+            defaultValue={now.toDate()}
            name="endTime"
            render={({ onChange, onBlur, value }) => (
              <DatePicker
@ -220,7 +208,10 @@ const DueDateManager: React.FC<DueDateManagerProps> = ({ task, onDueDateChange,
                </HeaderButton>
                <HeaderSelectLabel>
                  {months[date.getMonth()]}
-                  <HeaderSelect value={getYear(date)} onChange={({ target: { value } }) => changeYear(parseInt(value))}>
+                  <HeaderSelect
+                    value={getYear(date)}
+                    onChange={({ target: { value } }) => changeYear(parseInt(value, 10))}
+                  >
                    {years.map(option => (
                      <option key={option} value={option}>
                        {option}
@ -250,12 +241,14 @@ const DueDateManager: React.FC<DueDateManagerProps> = ({ task, onDueDateChange,
            selected={startDate}
            inline
            onChange={date => {
-              setStartDate(date ?? new Date());
+              if (date) {
+                setStartDate(date);
+              }
            }}
          />
        </DueDatePickerWrapper>
        <ActionWrapper>
-          <ConfirmAddDueDate type="submit" onClick={() => {}}>
+          <ConfirmAddDueDate type="submit" onClick={NOOP}>
            Save
          </ConfirmAddDueDate>
          <RemoveDueDate
--- a/frontend/src/shared/components/Input/Input.stories.tsx
+++ b/frontend/src/shared/components/Input/Input.stories.tsx
@ -1,11 +1,11 @@
 import React from 'react';
 import BaseStyles from 'App/BaseStyles';
 import NormalizeStyles from 'App/NormalizeStyles';
-import { theme } from 'App/ThemeStyles';
+import theme from 'App/ThemeStyles';
 import styled, { ThemeProvider } from 'styled-components';
+import { User } from 'shared/icons';

 import Input from '.';
-import { User } from 'shared/icons';

 export default {
  component: Input,
@ -35,7 +35,7 @@ export const Default = () => {
        <Wrapper>
          <Input label="Label placeholder" />
          <Input width="100%" placeholder="Placeholder" />
-          <Input icon={<User size={20} />} width="100%" placeholder="Placeholder" />
+          <Input icon={<User width={20} height={20} />} width="100%" placeholder="Placeholder" />
        </Wrapper>
      </ThemeProvider>
    </>
--- a/frontend/src/shared/components/Input/index.tsx
+++ b/frontend/src/shared/components/Input/index.tsx
@ -78,6 +78,7 @@ const Icon = styled.div`

 type InputProps = {
  variant?: 'normal' | 'alternate';
+  disabled?: boolean;
  label?: string;
  width?: string;
  floatingLabel?: boolean;
@ -91,6 +92,7 @@ type InputProps = {
  name?: string;
  className?: string;
  defaultValue?: string;
+  value?: string;
  onClick?: (e: React.MouseEvent<HTMLInputElement>) => void;
 };

@ -115,6 +117,7 @@ function useCombinedRefs(...refs: any) {
 const Input = React.forwardRef(
  (
    {
+      disabled = false,
      width = 'auto',
      variant = 'normal',
      type = 'text',
@ -129,6 +132,7 @@ const Input = React.forwardRef(
      onClick,
      floatingLabel,
      defaultValue,
+      value,
      id,
    }: InputProps,
    $ref: any,
@ -158,6 +162,7 @@ const Input = React.forwardRef(
          onChange={e => {
            setHasValue((e.currentTarget.value !== '' || floatingLabel) ?? false);
          }}
+          disabled={disabled}
          hasValue={hasValue}
          ref={combinedRef}
          id={id}
@ -166,6 +171,7 @@ const Input = React.forwardRef(
          onClick={onClick}
          autoComplete={autocomplete ? 'on' : 'off'}
          defaultValue={defaultValue}
+          value={value}
          hasIcon={typeof icon !== 'undefined'}
          width={width}
          placeholder={placeholder}
--- a/frontend/src/shared/components/List/List.stories.tsx
+++ b/frontend/src/shared/components/List/List.stories.tsx
@ -3,6 +3,7 @@ import { action } from '@storybook/addon-actions';
 import Card from 'shared/components/Card';
 import CardComposer from 'shared/components/CardComposer';
 import LabelColors from 'shared/constants/labelColors';
+import NOOP from 'shared/utils/noop';
 import List, { ListCards } from '.';

 export default {
@ -60,7 +61,7 @@ export const Default = () => {
      onExtraMenuOpen={action('extra menu open')}
    >
      <ListCards>
-        <CardComposer onClose={() => {}} onCreateCard={name => {}} isOpen={false} />
+        <CardComposer onClose={NOOP} onCreateCard={NOOP} isOpen={false} />
      </ListCards>
    </List>
  );
@ -77,7 +78,7 @@ export const WithCardComposer = () => {
      onExtraMenuOpen={action('extra menu open')}
    >
      <ListCards>
-        <CardComposer onClose={() => {}} onCreateCard={name => {}} isOpen />
+        <CardComposer onClose={NOOP} onCreateCard={NOOP} isOpen />
      </ListCards>
    </List>
  );
@ -108,7 +109,7 @@ export const WithCard = () => {
          checklists={{ complete: 1, total: 4 }}
          dueDate={{ isPastDue: false, formattedDate: 'Oct 26, 2020' }}
        />
-        <CardComposer onClose={() => {}} onCreateCard={name => {}} isOpen={false} />
+        <CardComposer onClose={NOOP} onCreateCard={NOOP} isOpen={false} />
      </ListCards>
    </List>
  );
@ -138,7 +139,7 @@ export const WithCardAndComposer = () => {
          checklists={{ complete: 1, total: 4 }}
          dueDate={{ isPastDue: false, formattedDate: 'Oct 26, 2020' }}
        />
-        <CardComposer onClose={() => {}} onCreateCard={name => {}} isOpen />
+        <CardComposer onClose={NOOP} onCreateCard={NOOP} isOpen />
      </ListCards>
    </List>
  );
--- a/frontend/src/shared/components/List/Styles.ts
+++ b/frontend/src/shared/components/List/Styles.ts
@ -73,7 +73,6 @@ export const HeaderName = styled(TextareaAutosize)`
  box-shadow: none;
  font-weight: 600;
  margin: -4px 0;
-  padding: 4px 8px;

  letter-spacing: normal;
  word-spacing: normal;
--- a/frontend/src/shared/components/List/index.tsx
+++ b/frontend/src/shared/components/List/index.tsx
@ -102,7 +102,7 @@ const List = React.forwardRef(
          {children && children}
          <AddCardContainer hidden={isComposerOpen}>
            <AddCardButton onClick={() => onOpenComposer(id)}>
-              <Plus size={12} color="#c2c6dc" />
+              <Plus width={12} height={12} />
              <AddCardButtonText>Add another card</AddCardButtonText>
            </AddCardButton>
          </AddCardContainer>
--- a/frontend/src/shared/components/ListActions/ListActions.stories.tsx
+++ b/frontend/src/shared/components/ListActions/ListActions.stories.tsx
@ -1,18 +0,0 @@
-import React from 'react';
-import { action } from '@storybook/addon-actions';
-import ListActions from '.';
-
-export default {
-  component: ListActions,
-  title: 'ListActions',
-  parameters: {
-    backgrounds: [
-      { name: 'white', value: '#ffffff', default: true },
-      { name: 'gray', value: '#f8f8f8' },
-    ],
-  },
-};
-
-export const Default = () => {
-  return <ListActions taskGroupID="1" onArchiveTaskGroup={action('on archive task group')} />;
-};
--- a/frontend/src/shared/components/ListActions/index.tsx
+++ b/frontend/src/shared/components/ListActions/index.tsx
@ -1,50 +1,100 @@
 import React from 'react';
+import { usePopup, Popup } from 'shared/components/PopupMenu';
+import { NameEditor } from 'shared/components/AddList';
+import NOOP from 'shared/utils/noop';
+import styled from 'styled-components';
+import { TaskSorting, TaskSortingDirection, TaskSortingType } from 'shared/utils/sorting';
 import { InnerContent, ListActionsWrapper, ListActionItemWrapper, ListActionItem, ListSeparator } from './Styles';

+const CopyWrapper = styled.div`
+  margin: 0 12px;
+`;
+
 type Props = {
  taskGroupID: string;
-
+  onDuplicateTaskGroup: (newTaskGroupName: string) => void;
+  onDeleteTaskGroupTasks: () => void;
  onArchiveTaskGroup: (taskGroupID: string) => void;
+  onSortTaskGroup: (taskSorting: TaskSorting) => void;
 };
-const LabelManager: React.FC<Props> = ({ taskGroupID, onArchiveTaskGroup }) => {
+
+const LabelManager: React.FC<Props> = ({
+  taskGroupID,
+  onDeleteTaskGroupTasks,
+  onDuplicateTaskGroup,
+  onArchiveTaskGroup,
+  onSortTaskGroup,
+}) => {
+  const { setTab } = usePopup();
  return (
-    <InnerContent>
-      <ListActionsWrapper>
-        <ListActionItemWrapper>
-          <ListActionItem>Add card...</ListActionItem>
-        </ListActionItemWrapper>
-        <ListActionItemWrapper>
-          <ListActionItem>Copy List...</ListActionItem>
-        </ListActionItemWrapper>
-        <ListActionItemWrapper>
-          <ListActionItem>Move card...</ListActionItem>
-        </ListActionItemWrapper>
-        <ListActionItemWrapper>
-          <ListActionItem>Watch</ListActionItem>
-        </ListActionItemWrapper>
-      </ListActionsWrapper>
-      <ListSeparator />
-      <ListActionsWrapper>
-        <ListActionItemWrapper>
-          <ListActionItem>Sort By...</ListActionItem>
-        </ListActionItemWrapper>
-      </ListActionsWrapper>
-      <ListSeparator />
-      <ListActionsWrapper>
-        <ListActionItemWrapper>
-          <ListActionItem>Move All Cards in This List...</ListActionItem>
-        </ListActionItemWrapper>
-        <ListActionItemWrapper>
-          <ListActionItem>Archive All Cards in This List...</ListActionItem>
-        </ListActionItemWrapper>
-      </ListActionsWrapper>
-      <ListSeparator />
-      <ListActionsWrapper>
-        <ListActionItemWrapper onClick={() => onArchiveTaskGroup(taskGroupID)}>
-          <ListActionItem>Archive This List</ListActionItem>
-        </ListActionItemWrapper>
-      </ListActionsWrapper>
-    </InnerContent>
+    <>
+      <Popup tab={0} title={null}>
+        <InnerContent>
+          <ListActionsWrapper>
+            <ListActionItemWrapper onClick={() => setTab(1)}>
+              <ListActionItem>Duplicate</ListActionItem>
+            </ListActionItemWrapper>
+            <ListActionItemWrapper onClick={() => setTab(2)}>
+              <ListActionItem>Sort</ListActionItem>
+            </ListActionItemWrapper>
+          </ListActionsWrapper>
+          <ListSeparator />
+          <ListActionsWrapper>
+            <ListActionItemWrapper onClick={() => onDeleteTaskGroupTasks()}>
+              <ListActionItem>Delete All Tasks</ListActionItem>
+            </ListActionItemWrapper>
+          </ListActionsWrapper>
+          <ListSeparator />
+          <ListActionsWrapper>
+            <ListActionItemWrapper onClick={() => onArchiveTaskGroup(taskGroupID)}>
+              <ListActionItem>Delete</ListActionItem>
+            </ListActionItemWrapper>
+          </ListActionsWrapper>
+        </InnerContent>
+      </Popup>
+      <Popup tab={1} title="Copy list" onClose={NOOP}>
+        <CopyWrapper>
+          <NameEditor
+            onCancel={NOOP}
+            onSave={listName => {
+              onDuplicateTaskGroup(listName);
+            }}
+            buttonLabel="Duplicate"
+          />
+        </CopyWrapper>
+      </Popup>
+      <Popup tab={2} title="Sort list" onClose={NOOP}>
+        <InnerContent>
+          <ListActionsWrapper>
+            <ListActionItemWrapper
+              onClick={() => onSortTaskGroup({ type: TaskSortingType.TASK_TITLE, direction: TaskSortingDirection.ASC })}
+            >
+              <ListActionItem>Task title</ListActionItem>
+            </ListActionItemWrapper>
+            <ListActionItemWrapper
+              onClick={() => onSortTaskGroup({ type: TaskSortingType.TASK_TITLE, direction: TaskSortingDirection.ASC })}
+            >
+              <ListActionItem>Due date</ListActionItem>
+            </ListActionItemWrapper>
+            <ListActionItemWrapper
+              onClick={() => onSortTaskGroup({ type: TaskSortingType.COMPLETE, direction: TaskSortingDirection.ASC })}
+            >
+              <ListActionItem>Complete</ListActionItem>
+            </ListActionItemWrapper>
+            <ListActionItemWrapper
+              onClick={() => onSortTaskGroup({ type: TaskSortingType.LABELS, direction: TaskSortingDirection.ASC })}
+            >
+              <ListActionItem>Labels</ListActionItem>
+            </ListActionItemWrapper>
+            <ListActionItemWrapper
+              onClick={() => onSortTaskGroup({ type: TaskSortingType.MEMBERS, direction: TaskSortingDirection.ASC })}
+            >
+              <ListActionItem>Members</ListActionItem>
+            </ListActionItemWrapper>
+          </ListActionsWrapper>
+        </InnerContent>
+      </Popup>
+    </>
  );
 };
 export default LabelManager;
--- a/frontend/src/shared/components/Lists/Styles.ts
+++ b/frontend/src/shared/components/Lists/Styles.ts
@ -4,10 +4,8 @@ export const Container = styled.div`
  flex: 1;
  user-select: none;
  white-space: nowrap;
-  margin-bottom: 8px;
  overflow-x: auto;
  overflow-y: hidden;
-  padding-bottom: 8px;

  ::-webkit-scrollbar {
    height: 10px;
@ -35,10 +33,9 @@ export const BoardWrapper = styled.div`

  user-select: none;
  white-space: nowrap;
-  margin-bottom: 8px;
  overflow-x: auto;
  overflow-y: hidden;
-  padding-bottom: 8px;
+  padding-bottom: 4px;
  position: absolute;
  top: 0;
  right: 0;
--- a/frontend/src/shared/components/Lists/index.tsx
+++ b/frontend/src/shared/components/Lists/index.tsx
@ -10,9 +10,132 @@ import {
  getNewDraggablePosition,
  getAfterDropDraggableList,
 } from 'shared/utils/draggables';
-import moment from 'moment';
+import dayjs from 'dayjs';
+import { TaskSorting, TaskSortingType, TaskSortingDirection, sortTasks } from 'shared/utils/sorting';

 import { Container, BoardContainer, BoardWrapper } from './Styles';
+import shouldMetaFilter from './metaFilter';
+
+export enum TaskMeta {
+  NONE,
+  TITLE,
+  MEMBER,
+  LABEL,
+  DUE_DATE,
+}
+
+export enum TaskMetaMatch {
+  MATCH_ANY,
+  MATCH_ALL,
+}
+
+export enum TaskStatus {
+  ALL,
+  COMPLETE,
+  INCOMPLETE,
+}
+
+export enum TaskSince {
+  ALL,
+  TODAY,
+  YESTERDAY,
+  ONE_WEEK,
+  TWO_WEEKS,
+  THREE_WEEKS,
+}
+
+export type TaskStatusFilter = {
+  status: TaskStatus;
+  since: TaskSince;
+};
+
+export interface TaskMetaFilterName {
+  meta: TaskMeta;
+  value?: string | dayjs.Dayjs | null;
+  id?: string | null;
+}
+
+export type TaskNameMetaFilter = {
+  name: string;
+};
+
+export enum DueDateFilterType {
+  TODAY,
+  TOMORROW,
+  THIS_WEEK,
+  NEXT_WEEK,
+  ONE_WEEK,
+  TWO_WEEKS,
+  THREE_WEEKS,
+  OVERDUE,
+  NO_DUE_DATE,
+}
+
+export type DueDateMetaFilter = {
+  type: DueDateFilterType;
+  label: string;
+};
+
+export type MemberMetaFilter = {
+  id: string;
+  username: string;
+};
+
+export type LabelMetaFilter = {
+  id: string;
+  name: string;
+  color: string;
+};
+
+export type TaskMetaFilters = {
+  match: TaskMetaMatch;
+  dueDate: DueDateMetaFilter | null;
+  taskName: TaskNameMetaFilter | null;
+  members: Array<MemberMetaFilter>;
+  labels: Array<LabelMetaFilter>;
+};
+
+function shouldStatusFilter(task: Task, filter: TaskStatusFilter) {
+  if (filter.status === TaskStatus.ALL) {
+    return true;
+  }
+
+  if (filter.status === TaskStatus.INCOMPLETE && task.complete === false) {
+    return true;
+  }
+  if (filter.status === TaskStatus.COMPLETE && task.completedAt && task.complete === true) {
+    const completedAt = dayjs(task.completedAt);
+    const REFERENCE = dayjs();
+    switch (filter.since) {
+      case TaskSince.TODAY:
+        const TODAY = REFERENCE.clone().startOf('day');
+        return completedAt.isSame(TODAY, 'd');
+      case TaskSince.YESTERDAY:
+        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');
+        return completedAt.isSameOrAfter(ONE_WEEK, 'd');
+      case TaskSince.TWO_WEEKS:
+        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');
+        return completedAt.isSameOrAfter(THREE_WEEKS, 'd');
+      default:
+        return true;
+    }
+  }
+  return false;
+}

 interface SimpleProps {
  taskGroups: Array<TaskGroup>;
@ -28,8 +151,29 @@ interface SimpleProps {
  onCardMemberClick: OnCardMemberClick;
  onCardLabelClick: () => void;
  cardLabelVariant: CardLabelVariant;
+  taskStatusFilter?: TaskStatusFilter;
+  taskMetaFilters?: TaskMetaFilters;
+  taskSorting?: TaskSorting;
 }

+const initTaskStatusFilter: TaskStatusFilter = {
+  status: TaskStatus.ALL,
+  since: TaskSince.ALL,
+};
+
+const initTaskMetaFilters: TaskMetaFilters = {
+  match: TaskMetaMatch.MATCH_ANY,
+  dueDate: null,
+  taskName: null,
+  labels: [],
+  members: [],
+};
+
+const initTaskSorting: TaskSorting = {
+  type: TaskSortingType.NONE,
+  direction: TaskSortingDirection.ASC,
+};
+
 const SimpleLists: React.FC<SimpleProps> = ({
  taskGroups,
  onTaskDrop,
@ -43,6 +187,9 @@ const SimpleLists: React.FC<SimpleProps> = ({
  cardLabelVariant,
  onExtraMenuOpen,
  onCardMemberClick,
+  taskStatusFilter = initTaskStatusFilter,
+  taskMetaFilters = initTaskMetaFilters,
+  taskSorting = initTaskSorting,
 }) => {
  const onDragEnd = ({ draggableId, source, destination, type }: DropResult) => {
    if (typeof destination === 'undefined') return;
@ -81,7 +228,7 @@ const SimpleLists: React.FC<SimpleProps> = ({
          position: newPosition,
        });
      } else {
-        throw { error: 'task group can not be found' };
+        throw new Error('task group can not be found');
      }
    } else {
      const curTaskGroup = taskGroups.findIndex(
@ -164,10 +311,18 @@ const SimpleLists: React.FC<SimpleProps> = ({
                                <ListCards ref={columnDropProvided.innerRef} {...columnDropProvided.droppableProps}>
                                  {taskGroup.tasks
                                    .slice()
+                                    .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) => {
                                      return (
-                                        <Draggable key={task.id} draggableId={task.id} index={taskIndex}>
+                                        <Draggable
+                                          key={task.id}
+                                          draggableId={task.id}
+                                          index={taskIndex}
+                                          isDragDisabled={taskSorting.type !== TaskSortingType.NONE}
+                                        >
                                          {taskProvided => {
                                            return (
                                              <Card
@ -198,7 +353,7 @@ const SimpleLists: React.FC<SimpleProps> = ({
                                                  task.dueDate
                                                    ? {
                                                        isPastDue: false,
-                                                        formattedDate: moment(task.dueDate).format('MMM D, YYYY'),
+                                                        formattedDate: dayjs(task.dueDate).format('MMM D, YYYY'),
                                                      }
                                                    : undefined
                                                }
--- a/frontend/src/shared/components/Lists/metaFilter.ts
+++ b/frontend/src/shared/components/Lists/metaFilter.ts
@ -0,0 +1,132 @@
+import { TaskMetaFilters, DueDateFilterType } from 'shared/components/Lists';
+import dayjs from 'dayjs';
+
+enum ShouldFilter {
+  NO_FILTER,
+  VALID,
+  NOT_VALID,
+}
+
+function shouldFilter(cond: boolean) {
+  return cond ? ShouldFilter.VALID : ShouldFilter.NOT_VALID;
+}
+
+export default function shouldMetaFilter(task: Task, filters: TaskMetaFilters) {
+  let isFiltered = ShouldFilter.NO_FILTER;
+  if (filters.taskName) {
+    isFiltered = shouldFilter(task.name.toLowerCase().startsWith(filters.taskName.name.toLowerCase()));
+  }
+  if (filters.dueDate) {
+    if (isFiltered === ShouldFilter.NO_FILTER) {
+      isFiltered = ShouldFilter.NOT_VALID;
+    }
+    if (filters.dueDate.type === DueDateFilterType.NO_DUE_DATE) {
+      isFiltered = shouldFilter(!(task.dueDate && task.dueDate !== null));
+    }
+    if (task.dueDate) {
+      const taskDueDate = dayjs(task.dueDate);
+      const today = dayjs();
+      let start;
+      let end;
+      switch (filters.dueDate.type) {
+        case DueDateFilterType.OVERDUE:
+          isFiltered = shouldFilter(taskDueDate.isBefore(today));
+          break;
+        case DueDateFilterType.TODAY:
+          isFiltered = shouldFilter(taskDueDate.isSame(today, 'day'));
+          break;
+        case DueDateFilterType.TOMORROW:
+          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');
+          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');
+          isFiltered = shouldFilter(taskDueDate.isBetween(start, end));
+          break;
+        case DueDateFilterType.ONE_WEEK:
+          start = today.clone().startOf('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');
+          isFiltered = shouldFilter(taskDueDate.isBetween(start, end));
+          break;
+        case DueDateFilterType.THREE_WEEKS:
+          start = today.clone().startOf('day');
+          end = today
+            .clone()
+            .add(21, 'day')
+            .endOf('day');
+          isFiltered = shouldFilter(taskDueDate.isBetween(start, end));
+          break;
+        default:
+          isFiltered = ShouldFilter.NOT_VALID;
+      }
+    }
+  }
+  if (filters.members.length !== 0) {
+    if (isFiltered === ShouldFilter.NO_FILTER) {
+      isFiltered = ShouldFilter.NOT_VALID;
+    }
+    for (const member of filters.members) {
+      if (task.assigned) {
+        if (task.assigned.findIndex(m => m.id === member.id) !== -1) {
+          isFiltered = ShouldFilter.VALID;
+        }
+      }
+    }
+  }
+  if (filters.labels.length !== 0) {
+    if (isFiltered === ShouldFilter.NO_FILTER) {
+      isFiltered = ShouldFilter.NOT_VALID;
+    }
+    for (const label of filters.labels) {
+      if (task.labels) {
+        if (task.labels.findIndex(m => m.projectLabel.id === label.id) !== -1) {
+          isFiltered = ShouldFilter.VALID;
+        }
+      }
+    }
+  }
+  if (isFiltered === ShouldFilter.NO_FILTER) {
+    return true;
+  }
+  if (isFiltered === ShouldFilter.VALID) {
+    return true;
+  }
+  return false;
+}
--- a/frontend/src/shared/components/LoadingSpinner/LoadingSpinner.stories.tsx
+++ b/frontend/src/shared/components/LoadingSpinner/LoadingSpinner.stories.tsx
@ -0,0 +1,24 @@
+import React from 'react';
+import NormalizeStyles from 'App/NormalizeStyles';
+import BaseStyles from 'App/BaseStyles';
+import LoadingSpinner from '.';
+
+export default {
+  component: LoadingSpinner,
+  title: 'Login',
+  parameters: {
+    backgrounds: [
+      { name: 'white', value: '#ffffff' },
+      { name: 'gray', value: '#cdd3e1', default: true },
+    ],
+  },
+};
+export const Default = () => {
+  return (
+    <>
+      <NormalizeStyles />
+      <BaseStyles />
+      <LoadingSpinner />
+    </>
+  );
+};
--- a/frontend/src/shared/components/LoadingSpinner/Styles.ts
+++ b/frontend/src/shared/components/LoadingSpinner/Styles.ts
@ -0,0 +1,42 @@
+import styled, { keyframes } from 'styled-components';
+
+const LoadingSpinnerKeyframes = keyframes`
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+`;
+
+export const LoadingSpinnerWrapper = styled.div<{ color: string; size: string; borderSize: string; thickness: string }>`
+  display: inline-block;
+  position: relative;
+  width: ${props => props.borderSize};
+  height: ${props => props.borderSize};
+
+  & > div {
+    box-sizing: border-box;
+    display: block;
+    position: absolute;
+    width: ${props => props.size};
+    height: ${props => props.size};
+    margin: ${props => props.thickness};
+    border: ${props => props.thickness} solid rgba(${props => props.theme.colors[props.color]});
+    border-radius: 50%;
+    animation: 1.2s ${LoadingSpinnerKeyframes} cubic-bezier(0.5, 0, 0.5, 1) infinite;
+    border-color: rgba(${props => props.theme.colors[props.color]}) transparent transparent transparent;
+  }
+
+  & > div:nth-child(1) {
+    animation-delay: -0.45s;
+  }
+  & > div:nth-child(2) {
+    animation-delay: -0.3s;
+  }
+  & > div:nth-child(3) {
+    animation-delay: -0.15s;
+  }
+`;
+
+export default LoadingSpinnerWrapper;
--- a/frontend/src/shared/components/LoadingSpinner/index.tsx
+++ b/frontend/src/shared/components/LoadingSpinner/index.tsx
@ -0,0 +1,41 @@
+import React from 'react';
+
+import { LoadingSpinnerWrapper} from './Styles';
+
+type LoadingSpinnerProps = {
+  color?: 'primary' | 'danger' | 'success' | 'warning' | 'dark';
+  size?: string;
+  borderSize?: string;
+  thickness?: string;
+};
+
+/**
+ * The default parameters may not be applicable to every scenario
+ *
+ * While borderSize and size should be a single prop,
+ * it is currently not as such because it would require math to be done to strings
+ * e.g "80px - 16"
+ *
+ *
+ * @param color
+ * @param size The size of the spinner. It is recommended to be at least 16 px less than the borderSize
+ * @param thickness
+ * @param borderSize Border size affects the size of the border which if is too small may break the spinner.
+ * @constructor
+ */
+const LoadingSpinner: React.FC<LoadingSpinnerProps> = ({
+  color = 'primary',
+  size = '64px',
+  thickness = '8px',
+  borderSize = '80px',
+}) => {
+  return (
+      <LoadingSpinnerWrapper color={color} size={size} thickness={thickness} borderSize={borderSize}>
+        <div />
+        <div />
+        <div />
+      </LoadingSpinnerWrapper>
+  );
+};
+
+export default LoadingSpinner;
--- a/frontend/src/shared/components/Login/index.tsx
+++ b/frontend/src/shared/components/Login/index.tsx
@ -3,6 +3,7 @@ import AccessAccount from 'shared/undraw/AccessAccount';
 import { User, Lock, Taskcafe } from 'shared/icons';
 import { useForm } from 'react-hook-form';

+import LoadingSpinner from 'shared/components/LoadingSpinner';
 import {
  Form,
  LogoWrapper,
@ -53,7 +54,7 @@ const Login = ({ onSubmit }: LoginProps) => {
                  ref={register({ required: 'Username is required' })}
                />
                <FormIcon>
-                  <User color="#c2c6dc" size={20} />
+                  <User width={20} height={20} />
                </FormIcon>
              </FormLabel>
              {errors.username && <FormError>{errors.username.message}</FormError>}
@ -73,6 +74,7 @@ const Login = ({ onSubmit }: LoginProps) => {

              <ActionButtons>
                <RegisterButton variant="outline">Register</RegisterButton>
+                {!isComplete && <LoadingSpinner size="32px" thickness="2px" borderSize="48px" />}
                <LoginButton type="submit" disabled={!isComplete}>
                  Login
                </LoginButton>
--- a/frontend/src/shared/components/Member/index.tsx
+++ b/frontend/src/shared/components/Member/index.tsx
@ -2,6 +2,7 @@ import React, { useRef } from 'react';
 import styled from 'styled-components';
 import TaskAssignee from 'shared/components/TaskAssignee';
 import { Checkmark } from 'shared/icons';
+import NOOP from 'shared/utils/noop';

 const CardCheckmark = styled(Checkmark)`
  position: absolute;
@ -43,6 +44,7 @@ type MemberProps = {
  showName?: boolean;
  className?: string;
  showCheckmark?: boolean;
+  size?: number;
 };

 const CardMemberWrapper = styled.div<{ ref: any }>`
@ -62,6 +64,7 @@ const Member: React.FC<MemberProps> = ({
  showName,
  showCheckmark = false,
  className,
+  size = 28,
 }) => {
  const $targetRef = useRef<HTMLDivElement>();
  return (
@ -76,7 +79,7 @@ const Member: React.FC<MemberProps> = ({
        }
      }}
    >
-      <TaskAssignee onMemberProfile={() => {}} size={28} member={member} />
+      <TaskAssignee onMemberProfile={NOOP} size={32} member={member} />
      {showName && <CardMemberName>{member.fullName}</CardMemberName>}
      {showCheckmark && <CardCheckmark width={12} height={12} />}
    </CardMemberWrapper>
--- a/frontend/src/shared/components/MemberManager/index.tsx
+++ b/frontend/src/shared/components/MemberManager/index.tsx
@ -1,5 +1,6 @@
 import React, { useState } from 'react';
-
+import { Checkmark } from 'shared/icons';
+import Member from 'shared/components/Member';
 import {
  MemberName,
  ProfileIcon,
@ -12,8 +13,6 @@ import {
  BoardMemberListItemContent,
  ActiveIconWrapper,
 } from './Styles';
-import { Checkmark } from 'shared/icons';
-import Member from 'shared/components/Member';

 type MemberManagerProps = {
  availableMembers: Array<TaskUser>;
--- a/frontend/src/shared/components/MiniProfile/index.tsx
+++ b/frontend/src/shared/components/MiniProfile/index.tsx
@ -47,6 +47,7 @@ const permissions = [
 type MiniProfileProps = {
  bio: string;
  user: TaskUser;
+  invited?: boolean;
  onRemoveFromTask?: () => void;
  onChangeRole?: (roleCode: RoleCode) => void;
  onRemoveFromBoard?: () => void;
@ -56,6 +57,7 @@ type MiniProfileProps = {
 const MiniProfile: React.FC<MiniProfileProps> = ({
  user,
  bio,
+  invited,
  canChangeRole,
  onRemoveFromTask,
  onChangeRole,
@ -74,7 +76,7 @@ const MiniProfile: React.FC<MiniProfileProps> = ({
          )}
          <ProfileInfo>
            <InfoTitle>{user.fullName}</InfoTitle>
-            <InfoUsername>{`@${user.username}`}</InfoUsername>
+            {invited ? <InfoUsername>Invited</InfoUsername> : <InfoUsername>{`@${user.username}`}</InfoUsername>}
            <InfoBio>{bio}</InfoBio>
          </ProfileInfo>
        </Profile>
@ -160,7 +162,7 @@ const MiniProfile: React.FC<MiniProfileProps> = ({
          {user.role && user.role.code === 'owner' && (
            <>
              <Separator />
-              <WarningText>You can't change roles because there must be an owner.</WarningText>
+              <WarningText>You can not change roles because there must be an owner.</WarningText>
            </>
          )}
        </MiniProfileActions>
--- a/frontend/src/shared/components/Modal/Styles.ts
+++ b/frontend/src/shared/components/Modal/Styles.ts
@ -15,18 +15,20 @@ export const ScrollOverlay = styled.div`
 export const ClickableOverlay = styled.div`
  min-height: 100%;
  background: rgba(0, 0, 0, 0.4);
-  display: flex;
-  justify-content: center;
 `;

-export const StyledModal = styled.div<{ width: number }>`
-  display: inline-block;
+export const StyledModal = styled.div<{ width: number; height: number }>`
  position: relative;
-  margin: 48px 0 80px;
-  width: 100%;
+  width: ${props => props.width}px;
+  height: ${props => props.height}px;
+  left: 0;
+  right: 0;
+  top: 48px;
+  bottom: 16px;
+  margin: auto;
+
  background: #262c49;
-  max-width: ${props => props.width}px;
  vertical-align: middle;
-  border-radius: 3px;
+  border-radius: 6px;
  ${mixin.boxShadowMedium}
 `;
--- a/frontend/src/shared/components/Modal/index.tsx
+++ b/frontend/src/shared/components/Modal/index.tsx
@ -1,9 +1,10 @@
-import React, { useRef } from 'react';
+import React, { useRef, useEffect, useState } from 'react';
 import ReactDOM from 'react-dom';
-
 import useOnOutsideClick from 'shared/hooks/onOutsideClick';
 import useOnEscapeKeyDown from 'shared/hooks/onEscapeKeyDown';
-
+import useWindowSize from 'shared/hooks/useWindowSize';
+import styled from 'styled-components';
+import { Cross } from 'shared/icons';
 import { ScrollOverlay, ClickableOverlay, StyledModal } from './Styles';

 const $root: HTMLElement = document.getElementById('root')!; // eslint-disable-line @typescript-eslint/no-non-null-assertion
@ -14,21 +15,50 @@ type ModalProps = {
  renderContent: () => JSX.Element;
 };

-const Modal: React.FC<ModalProps> = ({ width, onClose: tellParentToClose, renderContent }) => {
+function getAdjustedHeight(height: number) {
+  if (height >= 900) {
+    return height - 150;
+  }
+  if (height >= 800) {
+    return height - 125;
+  }
+  return height - 70;
+}
+
+const CloseIcon = styled(Cross)`
+  position: absolute;
+  top: 16px;
+  right: -32px;
+  cursor: pointer;
+  fill: rgba(${props => props.theme.colors.text.primary});
+  &:hover {
+    fill: rgba(${props => props.theme.colors.text.secondary});
+  }
+`;
+
+const InnerModal: React.FC<ModalProps> = ({ width, onClose: tellParentToClose, renderContent }) => {
  const $modalRef = useRef<HTMLDivElement>(null);
  const $clickableOverlayRef = useRef<HTMLDivElement>(null);
+  const [_width, height] = useWindowSize();

  useOnOutsideClick($modalRef, true, tellParentToClose, $clickableOverlayRef);
  useOnEscapeKeyDown(true, tellParentToClose);

-  return ReactDOM.createPortal(
+  return (
    <ScrollOverlay>
      <ClickableOverlay ref={$clickableOverlayRef}>
-        <StyledModal width={width} ref={$modalRef}>
+        <StyledModal width={width} height={getAdjustedHeight(height)} ref={$modalRef}>
          {renderContent()}
+          <CloseIcon onClick={() => tellParentToClose()} width={20} height={20} />
        </StyledModal>
      </ClickableOverlay>
-    </ScrollOverlay>,
+    </ScrollOverlay>
+  );
+};
+
+const Modal: React.FC<ModalProps> = ({ width, onClose: tellParentToClose, renderContent }) => {
+  return ReactDOM.createPortal(
+    <InnerModal width={width} onClose={tellParentToClose} renderContent={renderContent} />,
    $root,
  );
 };
--- a/frontend/src/shared/components/NewProject/NewProject.stories.tsx
+++ b/frontend/src/shared/components/NewProject/NewProject.stories.tsx
@ -1,9 +1,8 @@
-import React, { useState, useRef, createRef } from 'react';
+import React from 'react';
 import { action } from '@storybook/addon-actions';
-import styled from 'styled-components';
 import NormalizeStyles from 'App/NormalizeStyles';
 import BaseStyles from 'App/BaseStyles';
-
+import NOOP from 'shared/utils/noop';
 import NewProject from '.';

 export default {
@ -26,7 +25,7 @@ export const Default = () => {
        initialTeamID={null}
        onCreateProject={action('create project')}
        teams={[{ name: 'General', id: 'general', createdAt: '' }]}
-        onClose={() => {}}
+        onClose={NOOP}
      />
    </>
  );
--- a/frontend/src/shared/components/NewProject/index.tsx
+++ b/frontend/src/shared/components/NewProject/index.tsx
@ -4,6 +4,19 @@ import { mixin } from 'shared/utils/styles';
 import Select from 'react-select';
 import { ArrowLeft, Cross } from 'shared/icons';

+function getBackgroundColor(isDisabled: boolean, isSelected: boolean, isFocused: boolean) {
+  if (isDisabled) {
+    return null;
+  }
+  if (isSelected) {
+    return mixin.darken('#262c49', 0.25);
+  }
+  if (isFocused) {
+    return mixin.darken('#262c49', 0.15);
+  }
+  return null;
+}
+
 const Overlay = styled.div`
  z-index: 10000;
  background: #262c49;
@ -149,14 +162,8 @@ const colourStyles = {
  option: (styles: any, { data, isDisabled, isFocused, isSelected }: any) => {
    return {
      ...styles,
-      backgroundColor: isDisabled
-        ? null
-        : isSelected
-        ? mixin.darken('#262c49', 0.25)
-        : isFocused
-        ? mixin.darken('#262c49', 0.15)
-        : null,
-      color: isDisabled ? '#ccc' : isSelected ? '#fff' : '#c2c6dc',
+      backgroundColor: getBackgroundColor(isDisabled, isSelected, isFocused),
+      color: isDisabled ? '#ccc' : isSelected ? '#fff' : '#c2c6dc', // eslint-disable-line
      cursor: isDisabled ? 'not-allowed' : 'default',
      ':active': {
        ...styles[':active'],
@ -210,13 +217,13 @@ type NewProjectProps = {
  initialTeamID: string | null;
  teams: Array<Team>;
  onClose: () => void;
-  onCreateProject: (projectName: string, teamID: string) => void;
+  onCreateProject: (projectName: string, teamID: string | null) => void;
 };

 const NewProject: React.FC<NewProjectProps> = ({ initialTeamID, teams, onClose, onCreateProject }) => {
  const [projectName, setProjectName] = useState('');
  const [team, setTeam] = useState<null | string>(initialTeamID);
-  const options = 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>
@ -264,8 +271,8 @@ const NewProject: React.FC<NewProjectProps> = ({ initialTeamID, teams, onClose,
            </ProjectInfo>
            <CreateButton
              onClick={() => {
-                if (team && projectName !== '') {
-                  onCreateProject(projectName, team);
+                if (projectName !== '') {
+                  onCreateProject(projectName, team === 'no-team' ? null : team);
                }
              }}
            >
--- a/frontend/src/shared/components/NotifcationPopup/index.tsx
+++ b/frontend/src/shared/components/NotifcationPopup/index.tsx
@ -0,0 +1,111 @@
+import React from 'react';
+import styled from 'styled-components';
+import TimeAgo from 'react-timeago';
+
+import { Popup } from 'shared/components/PopupMenu';
+
+const ItemWrapper = styled.div`
+  cursor: pointer;
+  border-bottom: 1px solid #414561;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  justify-content: space-between;
+  display: flex;
+
+  &:hover {
+    background: #10163a;
+  }
+`;
+const ItemWrapperContent = styled.div`
+  display: flex;
+  align-items: flex-start;
+`;
+
+const ItemIconContainer = styled.span`
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+`;
+
+const ItemTextContainer = styled.div`
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+`;
+
+const ItemTextTitle = styled.span`
+  font-weight: 500;
+  display: block;
+  color: rgba(${props => props.theme.colors.primary});
+  font-size: 14px;
+`;
+const ItemTextDesc = styled.span`
+  font-size: 12px;
+`;
+
+const ItemTimeAgo = styled.span`
+  margin-top: 0.25rem;
+  white-space: nowrap;
+  font-size: 11px;
+`;
+
+type NotificationItemProps = {
+  title: string;
+  description: string;
+  createdAt: string;
+};
+
+export const NotificationItem: React.FC<NotificationItemProps> = ({ title, description, createdAt }) => {
+  return (
+    <ItemWrapper>
+      <ItemWrapperContent>
+        <ItemIconContainer />
+        <ItemTextContainer>
+          <ItemTextTitle>{title}</ItemTextTitle>
+          <ItemTextDesc>{description}</ItemTextDesc>
+        </ItemTextContainer>
+      </ItemWrapperContent>
+      <TimeAgo date={createdAt} component={ItemTimeAgo} />
+    </ItemWrapper>
+  );
+};
+
+const NotificationHeader = styled.div`
+  padding: 0.75rem;
+  text-align: center;
+  border-top-left-radius: 6px;
+  border-top-right-radius: 6px;
+  background: rgba(${props => props.theme.colors.primary});
+`;
+
+const NotificationHeaderTitle = styled.span`
+  font-size: 14px;
+  color: rgba(${props => props.theme.colors.text.secondary});
+`;
+
+const NotificationFooter = styled.div`
+  cursor: pointer;
+  padding: 0.5rem;
+  text-align: center;
+  color: rgba(${props => props.theme.colors.primary});
+  &:hover {
+    background: #10163a;
+  }
+  border-bottom-left-radius: 6px;
+  border-bottom-right-radius: 6px;
+`;
+
+const NotificationPopup: React.FC = ({ children }) => {
+  return (
+    <Popup title={null} tab={0} borders={false} padding={false}>
+      <NotificationHeader>
+        <NotificationHeaderTitle>Notifications</NotificationHeaderTitle>
+      </NotificationHeader>
+      <ul>{children}</ul>
+      <NotificationFooter>View All</NotificationFooter>
+    </Popup>
+  );
+};
+
+export default NotificationPopup;
--- a/frontend/src/shared/components/PopupMenu/PopupMenu.stories.tsx
+++ b/frontend/src/shared/components/PopupMenu/PopupMenu.stories.tsx
@ -1,381 +0,0 @@
-import React, { useState, useRef, createRef } from 'react';
-import { action } from '@storybook/addon-actions';
-import LabelColors from 'shared/constants/labelColors';
-import LabelManager from 'shared/components/PopupMenu/LabelManager';
-import LabelEditor from 'shared/components/PopupMenu/LabelEditor';
-import ListActions from 'shared/components/ListActions';
-import MemberManager from 'shared/components/MemberManager';
-import DueDateManager from 'shared/components/DueDateManager';
-import MiniProfile from 'shared/components/MiniProfile';
-
-import styled from 'styled-components';
-import produce from 'immer';
-import NormalizeStyles from 'App/NormalizeStyles';
-import BaseStyles from 'App/BaseStyles';
-
-import PopupMenu, { PopupProvider, usePopup, Popup } from '.';
-
-export default {
-  component: PopupMenu,
-  title: 'PopupMenu',
-  parameters: {
-    backgrounds: [
-      { name: 'white', value: '#ffffff', default: true },
-      { name: 'gray', value: '#f8f8f8' },
-    ],
-  },
-};
-const labelData: Array<ProjectLabel> = [
-  {
-    id: 'development',
-    name: 'Development',
-    createdDate: new Date().toString(),
-    labelColor: {
-      id: '1',
-      colorHex: LabelColors.BLUE,
-      name: 'blue',
-      position: 1,
-    },
-  },
-];
-
-const OpenLabelBtn = styled.span``;
-
-type TabProps = {
-  tab: number;
-};
-
-const LabelManagerEditor = () => {
-  const [labels, setLabels] = useState(labelData);
-  const [currentLabel, setCurrentLabel] = useState('');
-  const { setTab } = usePopup();
-  return (
-    <>
-      <Popup title="Labels" tab={0} onClose={action('on close')}>
-        <LabelManager
-          labels={labels}
-          onLabelCreate={() => {
-            setTab(2);
-          }}
-          onLabelEdit={labelId => {
-            setCurrentLabel(labelId);
-            setTab(1);
-          }}
-          onLabelToggle={labelId => {
-            setLabels(
-              produce(labels, draftState => {
-                const idx = labels.findIndex(label => label.id === labelId);
-                if (idx !== -1) {
-                  draftState[idx] = { ...draftState[idx] };
-                }
-              }),
-            );
-          }}
-        />
-      </Popup>
-      <Popup onClose={action('on close')} title="Edit label" tab={1}>
-        <LabelEditor
-          labelColors={[{ id: '1', colorHex: '#c2c6dc', position: 1, name: 'gray' }]}
-          label={labels.find(label => label.id === currentLabel) ?? null}
-          onLabelEdit={(_labelId, name, color) => {
-            setLabels(
-              produce(labels, draftState => {
-                const idx = labels.findIndex(label => label.id === currentLabel);
-                if (idx !== -1) {
-                  draftState[idx] = {
-                    ...draftState[idx],
-                    name,
-                    labelColor: {
-                      ...draftState[idx].labelColor,
-                      name: color.name ?? '',
-                      colorHex: color.colorHex,
-                    },
-                  };
-                }
-              }),
-            );
-            setTab(0);
-          }}
-        />
-      </Popup>
-      <Popup onClose={action('on close')} title="Create new label" tab={2}>
-        <LabelEditor
-          label={null}
-          labelColors={[{ id: '1', colorHex: '#c2c6dc', position: 1, name: 'gray' }]}
-          onLabelEdit={(_labelId, name, color) => {
-            setLabels([
-              ...labels,
-              {
-                id: name,
-                name,
-                createdDate: new Date().toString(),
-                labelColor: {
-                  id: color.id,
-                  colorHex: color.colorHex,
-                  name: color.name ?? '',
-                  position: 1,
-                },
-              },
-            ]);
-            setTab(0);
-          }}
-        />
-      </Popup>
-    </>
-  );
-};
-
-const OpenLabelsButton = () => {
-  const $buttonRef = createRef<HTMLButtonElement>();
-  const [currentLabel, setCurrentLabel] = useState('');
-  const [labels, setLabels] = useState(labelData);
-  const { showPopup, setTab } = usePopup();
-  return (
-    <OpenLabelBtn
-      ref={$buttonRef}
-      onClick={() => {
-        showPopup($buttonRef, <LabelManagerEditor />);
-      }}
-    >
-      Open
-    </OpenLabelBtn>
-  );
-};
-
-export const LabelsPopup = () => {
-  const [isPopupOpen, setPopupOpen] = useState(false);
-  return (
-    <PopupProvider>
-      <OpenLabelsButton />
-    </PopupProvider>
-  );
-};
-
-export const LabelsLabelEditor = () => {
-  const [isPopupOpen, setPopupOpen] = useState(false);
-  return (
-    <>
-      {isPopupOpen && (
-        <PopupMenu
-          onPrevious={action('on previous')}
-          title="Change Label"
-          top={10}
-          onClose={() => setPopupOpen(false)}
-          left={10}
-        >
-          <LabelEditor
-            label={labelData[0]}
-            onLabelEdit={action('label edit')}
-            labelColors={[{ id: '1', colorHex: '#c2c6dc', position: 1, name: 'gray' }]}
-          />
-        </PopupMenu>
-      )}
-      <button type="submit" onClick={() => setPopupOpen(true)}>
-        Open
-      </button>
-    </>
-  );
-};
-const initalState = { left: 0, top: 0, isOpen: false };
-
-export const ListActionsPopup = () => {
-  const $buttonRef = useRef<HTMLButtonElement>(null);
-  const [popupData, setPopupData] = useState(initalState);
-  return (
-    <>
-      {popupData.isOpen && (
-        <PopupMenu
-          title="List Actions"
-          top={popupData.top}
-          onClose={() => setPopupData(initalState)}
-          left={popupData.left}
-        >
-          <ListActions taskGroupID="1" onArchiveTaskGroup={action('archive task group')} />
-        </PopupMenu>
-      )}
-      <button
-        ref={$buttonRef}
-        type="submit"
-        onClick={() => {
-          if ($buttonRef && $buttonRef.current) {
-            const pos = $buttonRef.current.getBoundingClientRect();
-            setPopupData({
-              isOpen: true,
-              left: pos.left,
-              top: pos.top + pos.height + 10,
-            });
-          }
-        }}
-      >
-        Open
-      </button>
-    </>
-  );
-};
-
-export const MemberManagerPopup = () => {
-  const $buttonRef = useRef<HTMLButtonElement>(null);
-  const [popupData, setPopupData] = useState(initalState);
-  return (
-    <>
-      <NormalizeStyles />
-      <BaseStyles />
-      {popupData.isOpen && (
-        <PopupMenu title="Members" top={popupData.top} onClose={() => setPopupData(initalState)} left={popupData.left}>
-          <MemberManager
-            availableMembers={[
-              {
-                id: '1',
-                fullName: 'Jordan Knott',
-                profileIcon: { bgColor: null, url: null, initials: null },
-              },
-            ]}
-            activeMembers={[]}
-            onMemberChange={action('member change')}
-          />
-        </PopupMenu>
-      )}
-      <span
-        ref={$buttonRef}
-        onClick={() => {
-          if ($buttonRef && $buttonRef.current) {
-            const pos = $buttonRef.current.getBoundingClientRect();
-            setPopupData({
-              isOpen: true,
-              left: pos.left,
-              top: pos.top + pos.height + 10,
-            });
-          }
-        }}
-      >
-        Open
-      </span>
-    </>
-  );
-};
-
-export const DueDateManagerPopup = () => {
-  const $buttonRef = useRef<HTMLButtonElement>(null);
-  const [popupData, setPopupData] = useState(initalState);
-  return (
-    <>
-      <NormalizeStyles />
-      <BaseStyles />
-      {popupData.isOpen && (
-        <PopupMenu title="Due Date" top={popupData.top} onClose={() => setPopupData(initalState)} left={popupData.left}>
-          <DueDateManager
-            onRemoveDueDate={action('remove due date')}
-            task={{
-              id: '1',
-              taskGroup: { name: 'General', id: '1', position: 1 },
-              name: 'Hello, world',
-              position: 1,
-              labels: [
-                {
-                  id: 'soft-skills',
-                  assignedDate: new Date().toString(),
-                  projectLabel: {
-                    createdDate: new Date().toString(),
-                    id: 'label-soft-skills',
-                    name: 'Soft Skills',
-                    labelColor: {
-                      id: '1',
-                      name: 'white',
-                      colorHex: '#fff',
-                      position: 1,
-                    },
-                  },
-                },
-              ],
-              description: 'hello!',
-              assigned: [
-                {
-                  id: '1',
-                  profileIcon: { bgColor: null, url: null, initials: null },
-                  fullName: 'Jordan Knott',
-                },
-              ],
-            }}
-            onCancel={action('cancel')}
-            onDueDateChange={action('due date change')}
-          />
-        </PopupMenu>
-      )}
-      <span
-        style={{
-          width: '60px',
-          textAlign: 'center',
-          margin: '25px auto',
-          cursor: 'pointer',
-        }}
-        ref={$buttonRef}
-        onClick={() => {
-          if ($buttonRef && $buttonRef.current) {
-            const pos = $buttonRef.current.getBoundingClientRect();
-            setPopupData({
-              isOpen: true,
-              left: pos.left,
-              top: pos.top + pos.height + 10,
-            });
-          }
-        }}
-      >
-        Open
-      </span>
-    </>
-  );
-};
-
-export const MiniProfilePopup = () => {
-  const $buttonRef = useRef<HTMLButtonElement>(null);
-  const [popupData, setPopupData] = useState(initalState);
-  return (
-    <>
-      <NormalizeStyles />
-      <BaseStyles />
-      {popupData.isOpen && (
-        <PopupMenu
-          noHeader
-          title="Due Date"
-          top={popupData.top}
-          onClose={() => setPopupData(initalState)}
-          left={popupData.left}
-        >
-          <MiniProfile
-            user={{
-              id: '1',
-              fullName: 'Jordan Knott',
-              username: 'jordanthedev',
-              profileIcon: { url: null, bgColor: '#000', initials: 'JK' },
-            }}
-            bio="Stuff and things"
-            onRemoveFromTask={action('mini profile')}
-          />
-        </PopupMenu>
-      )}
-      <span
-        style={{
-          width: '60px',
-          textAlign: 'center',
-          margin: '25px auto',
-          cursor: 'pointer',
-          color: '#fff',
-          background: '#f00',
-        }}
-        ref={$buttonRef}
-        onClick={() => {
-          if ($buttonRef && $buttonRef.current) {
-            const pos = $buttonRef.current.getBoundingClientRect();
-            setPopupData({
-              isOpen: true,
-              left: pos.left,
-              top: pos.top + pos.height + 10,
-            });
-          }
-        }}
-      >
-        Open
-      </span>
-    </>
-  );
-};
--- a/frontend/src/shared/components/PopupMenu/Styles.ts
+++ b/frontend/src/shared/components/PopupMenu/Styles.ts
@ -1,11 +1,11 @@
 import styled, { css } from 'styled-components';
 import { mixin } from 'shared/utils/styles';
-import Input from '../Input';
 import ControlledInput from 'shared/components/ControlledInput';

 export const Container = styled.div<{
  invertY: boolean;
  invert: boolean;
+  targetPadding: string;
  top: number;
  left: number;
  ref: any;
@ -16,7 +16,7 @@ export const Container = styled.div<{
  display: block;
  position: absolute;
  width: ${props => props.width}px;
-  padding-top: 10px;
+  padding-top: ${props => props.targetPadding};
  height: auto;
  z-index: 40000;
  ${props =>
@ -29,14 +29,18 @@ export const Container = styled.div<{
    css`
      top: auto;
      padding-top: 0;
-      padding-bottom: 10px;
+      padding-bottom: ${props.targetPadding};
      bottom: ${props.top}px;
    `}
 `;

-export const Wrapper = styled.div`
-  padding: 5px;
-  padding-top: 8px;
+export const Wrapper = styled.div<{ padding: boolean; borders: boolean }>`
+  ${props =>
+    props.padding &&
+    css`
+      padding: 5px;
+      padding-top: 8px;
+    `}
  border-radius: 5px;
  box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.1);
  position: relative;
@ -44,8 +48,12 @@ export const Wrapper = styled.div`

  color: #c2c6dc;
  background: #262c49;
-  border: 1px solid rgba(0, 0, 0, 0.1);
-  border-color: #414561;
+  ${props =>
+    props.borders &&
+    css`
+      border: 1px solid rgba(0, 0, 0, 0.1);
+      border-color: #414561;
+    `}
 `;

 export const Header = styled.div`
@ -327,7 +335,7 @@ export const PreviousButton = styled.div`
  cursor: pointer;
 `;

-export const ContainerDiamond = styled.div<{ invert: boolean; invertY: boolean }>`
+export const ContainerDiamond = styled.div<{ borders: boolean; color: string; invert: boolean; invertY: boolean }>`
  ${props => (props.invert ? 'right: 10px; ' : 'left: 15px;')}
  position: absolute;
  width: 10px;
@ -348,6 +356,10 @@ export const ContainerDiamond = styled.div<{ invert: boolean; invertY: boolean }
  transform: rotate(45deg) translate(-7px);
  z-index: 10;

-  background: #262c49;
-  border-color: #414561;
+  background: ${props => props.color};
+  ${props =>
+    props.borders &&
+    css`
+      border-color: #414561;
+    `}
 `;
--- a/frontend/src/shared/components/PopupMenu/index.tsx
+++ b/frontend/src/shared/components/PopupMenu/index.tsx
@ -2,6 +2,7 @@ import React, { useRef, createContext, RefObject, useState, useContext, useEffec
 import { Cross, AngleLeft } from 'shared/icons';
 import useOnOutsideClick from 'shared/hooks/onOutsideClick';
 import { createPortal } from 'react-dom';
+import NOOP from 'shared/utils/noop';
 import produce from 'immer';
 import {
  Container,
@ -14,9 +15,37 @@ import {
  Wrapper,
 } from './Styles';

+function getPopupOptions(options?: PopupOptions) {
+  const popupOptions = {
+    borders: true,
+    diamondColor: '#262c49',
+    targetPadding: '10px',
+    showDiamond: true,
+    width: 316,
+  };
+  if (options) {
+    if (options.borders) {
+      popupOptions.borders = options.borders;
+    }
+    if (options.width) {
+      popupOptions.width = options.width;
+    }
+    if (options.targetPadding) {
+      popupOptions.targetPadding = options.targetPadding;
+    }
+    if (typeof options.showDiamond !== 'undefined' && options.showDiamond !== null) {
+      popupOptions.showDiamond = options.showDiamond;
+    }
+    if (options.diamondColor) {
+      popupOptions.diamondColor = options.diamondColor;
+    }
+  }
+  return popupOptions;
+}
+
 type PopupContextState = {
-  show: (target: RefObject<HTMLElement>, content: JSX.Element, width?: string | number) => void;
-  setTab: (newTab: number, width?: number | string) => void;
+  show: (target: RefObject<HTMLElement>, content: JSX.Element, options?: PopupOptions) => void;
+  setTab: (newTab: number, options?: PopupOptions) => void;
  getCurrentTab: () => number;
  hide: () => void;
 };
@ -25,23 +54,44 @@ type PopupProps = {
  title: string | null;
  onClose?: () => void;
  tab: number;
+  padding?: boolean;
+  borders?: boolean;
+  diamondColor?: string;
 };

 type PopupContainerProps = {
  top: number;
  left: number;
  invert: boolean;
+  targetPadding: string;
  invertY: boolean;
  onClose: () => void;
  width?: string | number;
 };

-const PopupContainer: React.FC<PopupContainerProps> = ({ width, top, left, onClose, children, invert, invertY }) => {
+const PopupContainer: React.FC<PopupContainerProps> = ({
+  width,
+  top,
+  left,
+  onClose,
+  children,
+  invert,
+  invertY,
+  targetPadding,
+}) => {
  const $containerRef = useRef<HTMLDivElement>(null);
  const [currentTop, setCurrentTop] = useState(top);
  useOnOutsideClick($containerRef, true, onClose, null);
  return (
-    <Container width={width ?? 316} left={left} top={currentTop} ref={$containerRef} invert={invert} invertY={invertY}>
+    <Container
+      targetPadding={targetPadding}
+      width={width ?? 316}
+      left={left}
+      top={currentTop}
+      ref={$containerRef}
+      invert={invert}
+      invertY={invertY}
+    >
      {children}
    </Container>
  );
@ -52,10 +102,10 @@ PopupContainer.defaultProps = {
 };

 const PopupContext = createContext<PopupContextState>({
-  show: () => {},
-  setTab: () => {},
+  show: NOOP,
+  setTab: NOOP,
  getCurrentTab: () => 0,
-  hide: () => {},
+  hide: NOOP,
 });

 export const usePopup = () => {
@ -72,13 +122,28 @@ type PopupState = {
  currentTab: number;
  previousTab: number;
  content: JSX.Element | null;
-  width?: string | number;
+  options: PopupOptionsInternal | null;
 };

 const { Provider, Consumer } = PopupContext;

 const canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement);

+type PopupOptionsInternal = {
+  width: number;
+  borders: boolean;
+  targetPadding: string;
+  diamondColor: string;
+  showDiamond: boolean;
+};
+
+type PopupOptions = {
+  targetPadding?: string | null;
+  showDiamond?: boolean | null;
+  width?: number | null;
+  borders?: boolean | null;
+  diamondColor?: string | null;
+};
 const defaultState = {
  isOpen: false,
  left: 0,
@ -88,11 +153,12 @@ const defaultState = {
  currentTab: 0,
  previousTab: 0,
  content: null,
+  options: null,
 };

 export const PopupProvider: React.FC = ({ children }) => {
  const [currentState, setState] = useState<PopupState>(defaultState);
-  const show = (target: RefObject<HTMLElement>, content: JSX.Element, width?: number | string) => {
+  const show = (target: RefObject<HTMLElement>, content: JSX.Element, options?: PopupOptions) => {
    if (target && target.current) {
      const bounds = target.current.getBoundingClientRect();
      let top = bounds.top + bounds.height;
@ -101,6 +167,7 @@ export const PopupProvider: React.FC = ({ children }) => {
        top = window.innerHeight - bounds.top;
        invertY = true;
      }
+      const popupOptions = getPopupOptions(options);
      if (bounds.left + 304 + 30 > window.innerWidth) {
        setState({
          isOpen: true,
@ -111,7 +178,7 @@ export const PopupProvider: React.FC = ({ children }) => {
          currentTab: 0,
          previousTab: 0,
          content,
-          width: width ?? 316,
+          options: popupOptions,
        });
      } else {
        setState({
@ -123,7 +190,7 @@ export const PopupProvider: React.FC = ({ children }) => {
          currentTab: 0,
          previousTab: 0,
          content,
-          width: width ?? 316,
+          options: popupOptions,
        });
      }
    }
@ -138,20 +205,21 @@ export const PopupProvider: React.FC = ({ children }) => {
      currentTab: 0,
      previousTab: 0,
      content: null,
+      options: null,
    });
  };
  const portalTarget = canUseDOM ? document.body : null; // appease flow

-  const setTab = (newTab: number, width?: number | string) => {
-    const newWidth = width ?? currentState.width;
-    setState((prevState: PopupState) => {
-      return {
-        ...prevState,
-        previousTab: currentState.currentTab,
-        currentTab: newTab,
-        width: newWidth,
-      };
-    });
+  const setTab = (newTab: number, options?: PopupOptions) => {
+    setState((prevState: PopupState) =>
+      produce(prevState, draftState => {
+        draftState.previousTab = currentState.currentTab;
+        draftState.currentTab = newTab;
+        if (options) {
+          draftState.options = getPopupOptions(options);
+        }
+      }),
+    );
  };

  const getCurrentTab = () => {
@ -162,17 +230,26 @@ export const PopupProvider: React.FC = ({ children }) => {
    <Provider value={{ hide, show, setTab, getCurrentTab }}>
      {portalTarget &&
        currentState.isOpen &&
+        currentState.options &&
        createPortal(
          <PopupContainer
            invertY={currentState.invertY}
            invert={currentState.invert}
            top={currentState.top}
+            targetPadding={currentState.options.targetPadding}
            left={currentState.left}
            onClose={() => setState(defaultState)}
-            width={currentState.width ?? 316}
+            width={currentState.options.width}
          >
            {currentState.content}
-            <ContainerDiamond invertY={currentState.invertY} invert={currentState.invert} />
+            {currentState.options.showDiamond && (
+              <ContainerDiamond
+                color={currentState.options.diamondColor}
+                borders={currentState.options.borders}
+                invertY={currentState.invertY}
+                invert={currentState.invert}
+              />
+            )}
          </PopupContainer>,
          portalTarget,
        )}
@ -196,8 +273,16 @@ const PopupMenu: React.FC<Props> = ({ width, title, top, left, onClose, noHeader
  useOnOutsideClick($containerRef, true, onClose, null);

  return (
-    <Container invertY={false} width={width ?? 316} invert={false} left={left} top={top} ref={$containerRef}>
-      <Wrapper>
+    <Container
+      targetPadding="10px"
+      invertY={false}
+      width={width ?? 316}
+      invert={false}
+      left={left}
+      top={top}
+      ref={$containerRef}
+    >
+      <Wrapper padding borders>
        {onPrevious && (
          <PreviousButton onClick={onPrevious}>
            <AngleLeft color="#c2c6dc" />
@ -221,7 +306,7 @@ const PopupMenu: React.FC<Props> = ({ width, title, top, left, onClose, noHeader
  );
 };

-export const Popup: React.FC<PopupProps> = ({ title, onClose, tab, children }) => {
+export const Popup: React.FC<PopupProps> = ({ borders = true, padding = true, title, onClose, tab, children }) => {
  const { getCurrentTab, setTab } = usePopup();
  if (getCurrentTab() !== tab) {
    return null;
@ -229,7 +314,7 @@ export const Popup: React.FC<PopupProps> = ({ title, onClose, tab, children }) =

  return (
    <>
-      <Wrapper>
+      <Wrapper borders={borders} padding={padding}>
        {tab > 0 && (
          <PreviousButton
            onClick={() => {
--- a/frontend/src/shared/components/ProjectGridItem/index.tsx
+++ b/frontend/src/shared/components/ProjectGridItem/index.tsx
@ -13,7 +13,7 @@ export const AddProjectItem: React.FC<AddProjectItemProps> = ({ onAddProject })
        onAddProject();
      }}
    >
-      <Plus size={20} color="#c2c6dc" />
+      <Plus width={12} height={12} />
      <AddProjectLabel>New Project</AddProjectLabel>
    </AddProjectWrapper>
  );
--- a/frontend/src/shared/components/QuickCardEditor/QuickCardEditor.stories.tsx
+++ b/frontend/src/shared/components/QuickCardEditor/QuickCardEditor.stories.tsx
@ -5,6 +5,7 @@ import CardComposer from 'shared/components/CardComposer';
 import LabelColors from 'shared/constants/labelColors';
 import List, { ListCards } from 'shared/components/List';
 import QuickCardEditor from 'shared/components/QuickCardEditor';
+import NOOP from 'shared/utils/noop';

 export default {
  component: QuickCardEditor,
@ -71,7 +72,7 @@ export const Default = () => {
        isComposerOpen={false}
        onSaveName={action('on save name')}
        onOpenComposer={action('on open composer')}
-        onExtraMenuOpen={(taskGroupID, $targetRef) => {}}
+        onExtraMenuOpen={NOOP}
      >
        <ListCards>
          <Card
@ -81,7 +82,7 @@ export const Default = () => {
            ref={$cardRef}
            title={task.name}
            onClick={action('on click')}
-            onContextMenu={e => {
+            onContextMenu={() => {
              setTarget($cardRef);
              setEditorOpen(true);
            }}
@ -90,7 +91,7 @@ export const Default = () => {
            checklists={{ complete: 1, total: 4 }}
            dueDate={{ isPastDue: false, formattedDate: 'Oct 26, 2020' }}
          />
-          <CardComposer onClose={() => {}} onCreateCard={name => {}} isOpen={false} />
+          <CardComposer onClose={NOOP} onCreateCard={NOOP} isOpen={false} />
        </ListCards>
      </List>
    </>
--- a/frontend/src/shared/components/Register/index.tsx
+++ b/frontend/src/shared/components/Register/index.tsx
@ -55,7 +55,7 @@ const Register = ({ onSubmit }: RegisterProps) => {
                  ref={register({ required: 'Full name is required' })}
                />
                <FormIcon>
-                  <User color="#c2c6dc" size={20} />
+                  <User width={20} height={20} />
                </FormIcon>
              </FormLabel>
              {errors.username && <FormError>{errors.username.message}</FormError>}
@ -68,7 +68,7 @@ const Register = ({ onSubmit }: RegisterProps) => {
                  ref={register({ required: 'Username is required' })}
                />
                <FormIcon>
-                  <User color="#c2c6dc" size={20} />
+                  <User width={20} height={20} />
                </FormIcon>
              </FormLabel>
              {errors.username && <FormError>{errors.username.message}</FormError>}
@ -84,7 +84,7 @@ const Register = ({ onSubmit }: RegisterProps) => {
                  })}
                />
                <FormIcon>
-                  <User color="#c2c6dc" size={20} />
+                  <User width={20} height={20} />
                </FormIcon>
              </FormLabel>
              {errors.email && <FormError>{errors.email.message}</FormError>}
@ -103,7 +103,7 @@ const Register = ({ onSubmit }: RegisterProps) => {
                  })}
                />
                <FormIcon>
-                  <User color="#c2c6dc" size={20} />
+                  <User width={20} height={20} />
                </FormIcon>
              </FormLabel>
              {errors.initials && <FormError>{errors.initials.message}</FormError>}
--- a/frontend/src/shared/components/Select/index.tsx
+++ b/frontend/src/shared/components/Select/index.tsx
@ -3,7 +3,20 @@ import Select from 'react-select';
 import styled from 'styled-components';
 import { mixin } from 'shared/utils/styles';

-const colourStyles = {
+function getBackgroundColor(isDisabled: boolean, isSelected: boolean, isFocused: boolean) {
+  if (isDisabled) {
+    return null;
+  }
+  if (isSelected) {
+    return mixin.darken('#262c49', 0.25);
+  }
+  if (isFocused) {
+    return mixin.darken('#262c49', 0.15);
+  }
+  return null;
+}
+
+export const colourStyles = {
  control: (styles: any, data: any) => {
    return {
      ...styles,
@ -43,14 +56,8 @@ const colourStyles = {
  option: (styles: any, { data, isDisabled, isFocused, isSelected }: any) => {
    return {
      ...styles,
-      backgroundColor: isDisabled
-        ? null
-        : isSelected
-        ? mixin.darken('#262c49', 0.25)
-        : isFocused
-        ? mixin.darken('#262c49', 0.15)
-        : null,
-      color: isDisabled ? '#ccc' : isSelected ? '#fff' : '#c2c6dc',
+      backgroundColor: getBackgroundColor(isDisabled, isSelected, isFocused),
+      color: isDisabled ? '#ccc' : isSelected ? '#fff' : '#c2c6dc', // eslint-disable-line
      cursor: isDisabled ? 'not-allowed' : 'default',
      ':active': {
        ...styles[':active'],
--- a/frontend/src/shared/components/Settings/Settings.stories.tsx
+++ b/frontend/src/shared/components/Settings/Settings.stories.tsx
@ -27,6 +27,7 @@ export const Default = () => {
      <BaseStyles />
      <Settings
        profile={profile}
+        onChangeUserInfo={action('change user info')}
        onResetPassword={action('reset password')}
        onProfileAvatarRemove={action('remove')}
        onProfileAvatarChange={action('profile avatar change')}
--- a/frontend/src/shared/components/Settings/index.tsx
+++ b/frontend/src/shared/components/Settings/index.tsx
@ -10,6 +10,11 @@ const PasswordInput = styled(Input)`
  margin-bottom: 0;
 `;

+const UserInfoInput = styled(Input)`
+  margin-top: 30px;
+  margin-bottom: 0;
+`;
+
 const FormError = styled.span`
  font-size: 12px;
  color: rgba(${props => props.theme.colors.warning});
@ -218,7 +223,7 @@ const NavItem: React.FC<NavItemProps> = ({ active, name, tab, onClick }) => {
      }}
    >
      <TabNavItemButton active={active}>
-        <User size={14} color={active ? 'rgba(115, 103, 240)' : '#c2c6dc'} />
+        <User width={20} height={20} />
        <TabNavItemSpan>{name}</TabNavItemSpan>
      </TabNavItemButton>
    </TabNavItem>
@ -240,6 +245,7 @@ const SaveButton = styled(Button)`
 type SettingsProps = {
  onProfileAvatarChange: () => void;
  onProfileAvatarRemove: () => void;
+  onChangeUserInfo: (data: UserInfoData, done: () => void) => void;
  onResetPassword: (password: string, done: () => void) => void;
  profile: TaskUser;
 };
@ -300,9 +306,93 @@ const ResetPasswordTab: React.FC<ResetPasswordTabProps> = ({ onResetPassword })
  );
 };

+type UserInfoData = {
+  full_name: string;
+  bio: string;
+  initials: string;
+  email: string;
+};
+type UserInfoTabProps = {
+  profile: TaskUser;
+  onProfileAvatarChange: () => void;
+  onProfileAvatarRemove: () => void;
+  onChangeUserInfo: (data: UserInfoData, done: () => void) => void;
+};
+
+const EMAIL_PATTERN = /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/i;
+const INITIALS_PATTERN = /^[a-zA-Z]{2,3}$/i;
+
+const UserInfoTab: React.FC<UserInfoTabProps> = ({
+  profile,
+  onProfileAvatarRemove,
+  onProfileAvatarChange,
+  onChangeUserInfo,
+}) => {
+  const [active, setActive] = useState(true);
+  const { register, handleSubmit, errors } = useForm<UserInfoData>();
+  const done = () => {
+    setActive(true);
+  };
+  return (
+    <>
+      <AvatarSettings
+        onProfileAvatarRemove={onProfileAvatarRemove}
+        onProfileAvatarChange={onProfileAvatarChange}
+        profile={profile.profileIcon}
+      />
+      <form
+        onSubmit={handleSubmit(data => {
+          setActive(false);
+          onChangeUserInfo(data, done);
+        })}
+      >
+        <UserInfoInput
+          ref={register({ required: 'Full name is required' })}
+          name="full_name"
+          defaultValue={profile.fullName}
+          width="100%"
+          label="Name"
+        />
+        {errors.full_name && <FormError>{errors.full_name.message}</FormError>}
+        <UserInfoInput
+          defaultValue={profile.profileIcon && profile.profileIcon.initials ? profile.profileIcon.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 "
+        />
+        {errors.initials && <FormError>{errors.initials.message}</FormError>}
+        <UserInfoInput disabled defaultValue={profile.username ?? ''} width="100%" label="Username " />
+        <UserInfoInput
+          width="100%"
+          name="email"
+          ref={register({
+            required: 'Email is required',
+            pattern: { value: EMAIL_PATTERN, message: 'Must be a valid email' },
+          })}
+          defaultValue={profile.email ?? ''}
+          label="Email"
+        />
+        {errors.email && <FormError>{errors.email.message}</FormError>}
+        <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">
+            Save Change
+          </SaveButton>
+        </SettingActions>
+      </form>
+    </>
+  );
+};
+
 const Settings: React.FC<SettingsProps> = ({
  onProfileAvatarRemove,
  onProfileAvatarChange,
+  onChangeUserInfo,
  onResetPassword,
  profile,
 }) => {
@ -315,6 +405,7 @@ const Settings: React.FC<SettingsProps> = ({
        <TabNavContent>
          {items.map((item, idx) => (
            <NavItem
+              key={item.name}
              onClick={(tab, top) => {
                if ($tabNav && $tabNav.current) {
                  const pos = $tabNav.current.getBoundingClientRect();
@ -332,23 +423,12 @@ const Settings: React.FC<SettingsProps> = ({
      </TabNav>
      <TabContentWrapper>
        <Tab tab={0} currentTab={currentTab}>
-          <AvatarSettings
-            onProfileAvatarRemove={onProfileAvatarRemove}
+          <UserInfoTab
            onProfileAvatarChange={onProfileAvatarChange}
-            profile={profile.profileIcon}
+            onProfileAvatarRemove={onProfileAvatarRemove}
+            profile={profile}
+            onChangeUserInfo={onChangeUserInfo}
          />
-          <Input defaultValue={profile.fullName} width="100%" label="Name" />
-          <Input
-            defaultValue={profile.profileIcon && profile.profileIcon.initials ? profile.profileIcon.initials : ''}
-            width="100%"
-            label="Initials "
-          />
-          <Input defaultValue={profile.username ?? ''} width="100%" label="Username " />
-          <Input width="100%" label="Email" />
-          <Input width="100%" label="Bio" />
-          <SettingActions>
-            <SaveButton>Save Change</SaveButton>
-          </SettingActions>
        </Tab>
        <Tab tab={1} currentTab={currentTab}>
          <ResetPasswordTab onResetPassword={onResetPassword} />
--- a/frontend/src/shared/components/TaskAssignee/index.tsx
+++ b/frontend/src/shared/components/TaskAssignee/index.tsx
@ -1,5 +1,5 @@
 import React, { useRef } from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { DoubleChevronUp, Crown } from 'shared/icons';

 export const AdminIcon = styled(DoubleChevronUp)`
@ -24,7 +24,12 @@ const TaskDetailAssignee = styled.div`
  position: relative;
 `;

-export const Wrapper = styled.div<{ size: number | string; bgColor: string | null; backgroundURL: string | null }>`
+export const Wrapper = styled.div<{
+  size: number | string;
+  bgColor: string | null;
+  backgroundURL: string | null;
+  hasClick: boolean;
+}>`
  width: ${props => props.size}px;
  height: ${props => props.size}px;
  border-radius: 9999px;
@ -37,33 +42,60 @@ export const Wrapper = styled.div<{ size: number | string; bgColor: string | nul
  background-size: contain;
  font-size: 14px;
  font-weight: 400;
-  &:hover {
-    opacity: 0.8;
-  }
+  ${props =>
+    props.hasClick &&
+    css`
+      &:hover {
+        opacity: 0.8;
+      }
+    `}
 `;

 type TaskAssigneeProps = {
  size: number | string;
  showRoleIcons?: boolean;
  member: TaskUser;
-  onMemberProfile: ($targetRef: React.RefObject<HTMLElement>, memberID: string) => void;
+  invited?: boolean;
+  onMemberProfile?: ($targetRef: React.RefObject<HTMLElement>, memberID: string) => void;
  className?: string;
 };

-const TaskAssignee: React.FC<TaskAssigneeProps> = ({ showRoleIcons, member, onMemberProfile, size, className }) => {
+const TaskAssignee: React.FC<TaskAssigneeProps> = ({
+  showRoleIcons,
+  member,
+  invited,
+  onMemberProfile,
+  size,
+  className,
+}) => {
  const $memberRef = useRef<HTMLDivElement>(null);
+  let profileIcon: ProfileIcon = {
+    url: null,
+    bgColor: null,
+    initials: null,
+  };
+  if (member.profileIcon) {
+    profileIcon = member.profileIcon;
+  }
  return (
    <TaskDetailAssignee
      className={className}
      ref={$memberRef}
      onClick={e => {
        e.stopPropagation();
-        onMemberProfile($memberRef, member.id);
+        if (onMemberProfile) {
+          onMemberProfile($memberRef, member.id);
+        }
      }}
      key={member.id}
    >
-      <Wrapper backgroundURL={member.profileIcon.url ?? null} bgColor={member.profileIcon.bgColor ?? null} size={size}>
-        {(!member.profileIcon.url && member.profileIcon.initials) ?? ''}
+      <Wrapper
+        hasClick={typeof onMemberProfile !== undefined}
+        backgroundURL={profileIcon.url ?? null}
+        bgColor={profileIcon.bgColor ?? null}
+        size={size}
+      >
+        {(!profileIcon.url && profileIcon.initials) ?? ''}
      </Wrapper>
      {showRoleIcons && member.role && member.role.code === 'admin' && <AdminIcon width={10} height={10} />}
      {showRoleIcons && member.role && member.role.code === 'owner' && <OwnerIcon width={10} height={10} />}
--- a/frontend/src/shared/components/TaskDetails/Styles.ts
+++ b/frontend/src/shared/components/TaskDetails/Styles.ts
@ -1,287 +1,365 @@
-import styled from 'styled-components';
-import TextareaAutosize from 'react-autosize-textarea/lib';
+import styled, { css } from 'styled-components';
+import TextareaAutosize from 'react-autosize-textarea';
 import { mixin } from 'shared/utils/styles';
 import Button from 'shared/components/Button';
+import TaskAssignee from 'shared/components/TaskAssignee';
+import { User, Trash, Paperclip } from 'shared/icons';
+import Member from 'shared/components/Member';

-export const TaskHeader = styled.div`
-  padding: 21px 30px 0px;
-  margin-right: 70px;
+export const Container = styled.div`
+  display: flex;
+  height: 100%;
+`;
+
+export const LeftSidebar = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 300px;
+  background: #222740;
+`;
+
+export const MarkCompleteButton = styled.button<{ invert: boolean }>`
+  padding: 4px 8px;
+  position: relative;
+  border: none;
+  cursor: pointer;
+  border-radius: ${props => props.theme.borderRadius.alternate};
+  display: flex;
+  align-items: center;
+  background: transparent;
+  & span {
+    margin-left: 4px;
+  }
+  ${props =>
+    props.invert
+      ? css`
+          background: rgba(${props.theme.colors.success});
+          & svg {
+            fill: rgba(${props.theme.colors.text.secondary});
+          }
+          & span {
+            color: rgba(${props.theme.colors.text.secondary});
+          }
+          &:hover {
+            background: rgba(${props.theme.colors.success}, 0.8);
+          }
+        `
+      : css`
+          background: none;
+          border: 1px solid rgba(${props.theme.colors.text.secondary});
+          & svg {
+            fill: rgba(${props.theme.colors.text.secondary});
+          }
+          & span {
+            color: rgba(${props.theme.colors.text.secondary});
+          }
+          &:hover {
+            background: rgba(${props.theme.colors.success}, 0.08);
+            border: 1px solid rgba(${props.theme.colors.success});
+          }
+          &:hover svg {
+            fill: rgba(${props.theme.colors.success});
+          }
+          &:hover span {
+            color: rgba(${props.theme.colors.success});
+          }
+        `}
+`;
+
+export const LeftSidebarContent = styled.div`
+  padding-top: 32px;
  display: flex;
  flex-direction: column;
 `;

-export const TaskMeta = styled.div`
-  position: relative;
+export const LeftSidebarSection = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding-left: 32px;
+  padding-right: 32px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid #414561;
+`;
+
+export const SidebarTitle = styled.div`
+  font-size: 12px;
+  min-height: 24px;
+  margin-left: 8px;
+  color: rgba(${props => props.theme.colors.text.primary}, 0.75);
+  padding-top: 4px;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+`;
+
+export const SidebarButton = styled.div`
+  font-size: 14px;
+  color: rgba(${props => props.theme.colors.text.primary});
+  min-height: 32px;
+  width: 100%;
+
+  padding: 9px 8px 7px 8px;
+  border-color: transparent;
+  border-radius: 6px;
+  border-width: 1px;
+  border-style: solid;
+
+  display: inline-block;
+  outline: 0;
  cursor: pointer;
-  font-size: 14px;
+  &:hover {
+    border-color: #414561;
+  }
+`;
+
+export const SidebarButtonText = styled.span`
+  min-height: 16px;
+  flex: 1 1 auto;
  display: flex;
-  align-items: center;
-  border-radius: 4px;
+  justify-content: flex-start;
 `;

-export const TaskGroupLabel = styled.span`
-  color: #c2c6dc;
-  font-size: 14px;
-`;
-export const TaskGroupLabelName = styled.span`
-  color: #c2c6dc;
-  text-decoration: underline;
-  font-size: 14px;
-`;
-
-export const TaskActions = styled.div`
-  position: absolute;
-  top: 0;
-  right: 0;
-  padding: 21px 18px 0px;
+export const ContentContainer = styled.div`
  display: flex;
-  align-items: center;
-`;
-
-export const TaskAction = styled.button`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  height: 32px;
-  cursor: pointer;
-  padding: 0px 9px;
-`;
-
-export const TaskDetailsWrapper = styled.div`
-  display: flex;
-  padding: 0px 16px 60px;
-`;
-
-export const TaskDetailsContent = styled.div`
+  flex-direction: column;
  flex: 1;
-  padding-right: 8px;
+  padding-top: 32px;
+  overflow: auto;
 `;

-export const TaskDetailsSidebar = styled.div`
-  width: 168px;
-  padding-left: 8px;
+export const HeaderContainer = styled.div`
+  flex: 0 0 auto;
+  padding: 0px 32px 0px 24px;
+`;
+
+export const HeaderInnerContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  margin: 0 0 0 0;
+  padding: 0 0 0 4px;
+`;
+
+export const HeaderLeft = styled.div`
+  display: flex;
+  justify-content: flex-start;
 `;

 export const TaskDetailsTitleWrapper = styled.div`
  width: 100%;
-  margin: 0 0 0 -8px;
+  margin: 8px 0 4px 0;
  display: inline-block;
 `;

 export const TaskDetailsTitle = styled(TextareaAutosize)`
-  line-height: 1.28;
-  resize: none;
-  box-shadow: transparent 0px 0px 0px 1px;
-  font-size: 24px;
-  font-weight: 700;
-  padding: 4px;
-  background: #262c49;
+  padding: 9px 8px 7px 8px;
+  border-color: transparent;
+  border-radius: 6px;
  border-width: 1px;
  border-style: solid;
-  border-color: transparent;
-  border-image: initial;
-  transition: background 0.1s ease 0s;
-  overflow-y: hidden;
  width: 100%;
  color: #c2c6dc;
-  &:focus {
-    box-shadow: rgb(115, 103, 240) 0px 0px 0px 1px;
-    background: ${mixin.darken('#262c49', 0.15)};
-  }
-`;
+  display: inline-block;
+  outline: 0;
+  font-size: 24px;
+  font-weight: 700;
+  background: none;

-export const TaskDetailsLabel = styled.div`
-  padding: 24px 0px 12px;
-  font-size: 15px;
-  font-weight: 600;
-  color: #c2c6dc;
-`;
-
-export const TaskDetailsAddDetailsButton = styled.div`
-  background: ${mixin.darken('#262c49', 0.15)};
-  box-shadow: none;
-  border: none;
-  border-radius: 3px;
-  display: block;
-  min-height: 56px;
-  padding: 8px 12px;
-  text-decoration: none;
-  font-size: 14px;
-  cursor: pointer;
-  color: #c2c6dc;
  &:hover {
-    background: ${mixin.darken('#262c49', 0.25)};
-    box-shadow: none;
-    border: none;
+    border-color: #414561;
  }
-`;
-
-export const TaskDetailsEditorWrapper = styled.div`
-  display: block;
-  padding-bottom: 9px;
-  z-index: 50;
-  width: 100%;
-`;
-
-export const TaskDetailsEditor = styled(TextareaAutosize)`
-  width: 100%;
-  min-height: 108px;
-  color: #c2c6dc;
-  background: #262c49;
-  box-shadow: rgb(115, 103, 240) 0px 0px 0px 1px;
-  border-radius: 3px;
-  line-height: 20px;
-  padding: 8px 12px;
-  outline: none;
-  border: none;

  &:focus {
-    box-shadow: rgb(115, 103, 240) 0px 0px 0px 1px;
-    background: ${mixin.darken('#262c49', 0.05)};
+    border-color: rgba(${props => props.theme.colors.primary});
  }
 `;

-export const TaskDetailsMarkdown = styled.div`
-  width: 100%;
+export const DueDateTitle = styled.div`
+  font-size: 12px;
+  min-height: 24px;
+  margin-left: 8px;
+  color: rgba(${props => props.theme.colors.text.primary}, 0.75);
+  padding-top: 8px;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+`;
+
+export const AssignedUsersSection = styled.div`
+  padding-left: 32px;
+  padding-right: 32px;
+  padding-top: 24px;
+  padding-bottom: 24px;
+  border-bottom: 1px solid #414561;
+  display: flex;
+  flex-direction: column;
+`;
+
+export const AssignUserIcon = styled.div`
  cursor: pointer;
-  color: #c2c6dc;
-
-  h1 {
-    font-size: 24px;
-    font-weight: 600;
-    line-height: 28px;
-    margin: 0 0 12px;
+  height: 32px;
+  width: 32px;
+  position: relative;
+  border-radius: 50%;
+  border: 1px dashed #414561;
+  margin-right: 8px;
+  display: flex;
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  &:hover {
+    border: 1px solid rgba(${props => props.theme.colors.text.secondary}, 0.75);
  }
-
-  h2 {
-    font-weight: 600;
-    font-size: 20px;
-    line-height: 24px;
-    margin: 16px 0 8px;
+  &:hover svg {
+    fill: rgba(${props => props.theme.colors.text.secondary}, 0.75);
  }
+`;

-  p {
-    margin: 0 0 8px;
+export const AssignUsersButton = styled.div`
+  cursor: pointer;
+  display: inline-flex;
+  flex: 1 1 auto;
+  height: 40px;
+  padding: 4px 16px 4px 8px;
+  margin-left: -1px;
+  border-radius: 6px;
+  align-items: center;
+  border: 1px solid transparent;
+  &:hover {
+    border: 1px solid ${mixin.darken('#414561', 0.15)};
  }
+  &:hover ${AssignUserIcon} {
+    border: 1px solid #414561;
+  }
+`;

-  strong {
-    font-weight: 700;
+export const AssignUserLabel = styled.span`
+  flex: 1 1 auto;
+  line-height: 15px;
+  color: rgba(${props => props.theme.colors.text.primary}, 0.75);
+`;
+
+export const ExtraActionsSection = styled.div`
+  padding-left: 32px;
+  padding-right: 32px;
+  padding-top: 24px;
+  display: flex;
+  flex-direction: column;
+`;
+
+export const ActionButtonsTitle = styled.h3`
+  color: rgba(${props => props.theme.colors.text.primary});
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: 0.04em;
+`;
+
+export const ActionButton = styled(Button)`
+  margin-top: 8px;
+  margin-left: -10px;
+  padding: 8px 16px;
+  background: rgba(${props => props.theme.colors.bg.primary}, 0.5);
+  text-align: left;
+  transition: transform 0.2s ease;
+  & span {
+    justify-content: flex-start;
  }
+  &:hover {
+    box-shadow: none;
+    transform: translateX(4px);
+    background: rgba(${props => props.theme.colors.bg.primary}, 0.75);
+  }
+`;
+
+export const HeaderRight = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+export const HeaderActionIcon = styled.div`
+  padding: 4px 4px 4px 4px;
+  margin: 0 4px 0 4px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  cursor: pointer;
+  svg {
+    fill: rgba(${props => props.theme.colors.text.primary}, 0.75);
+  }
+  &:hover svg {
+    fill: rgba(${props => props.theme.colors.primary});
+  }
+`;
+
+export const EditorContainer = styled.div`
+  margin-left: 32px;
+  margin-right: 32px;
+
+  padding: 9px 8px 7px 8px;
+  border-color: transparent;
+  border-radius: 6px;
+  border-width: 1px;
+  border-style: solid;
+  outline: 0;
+  background: none;

  ul {
-    margin: 8px 0;
+    list-style-type: disc;
  }

-  ul > li {
-    margin: 8px 8px 8px 24px;
-    list-style: disc;
-  }
-
-  p a {
-    color: rgba(${props => props.theme.colors.primary});
+  ul.checkbox_list input[type='checkbox'] {
+    border-radius: 6px;
+    border-width: 1px;
+    border-style: solid;
+    border-color: #414561;
  }
 `;

-export const TaskDetailsControls = styled.div`
-  clear: both;
-  margin-top: 8px;
+export const InnerContentContainer = styled.div`
+  overflow: auto;
+  position: relative;
+`;
+
+export const DescriptionContainer = styled.div`
+  position: relative;
  display: flex;
+  flex-direction: column;
 `;

-export const ConfirmSave = styled(Button)`
-  padding: 6px 12px;
-  border-radius: 3px;
-  margin-right: 6px;
+export const DescriptionActionButton = styled(Button)`
+  padding: 8px 16px;
 `;

-export const CancelEdit = styled.div`
+export const Labels = styled.div`
  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 32px;
-  width: 32px;
-  cursor: pointer;
+  padding-left: 9px;
+  margin: 0 0 8px 0;
 `;

-export const TaskDetailSectionTitle = styled.div`
-  text-transform: uppercase;
-  color: #c2c6dc;
-  font-size: 12.5px;
-  font-weight: 600;
-  margin: 24px 0px 5px;
-`;
-
-export const TaskDetailAssignees = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-`;
-
-export const TaskDetailAssignee = styled.div`
-  &:hover {
-    opacity: 0.8;
-  }
-  margin-right: 4px;
-`;
-
-export const ProfileIcon = styled.div`
-  width: 32px;
-  height: 32px;
-  border-radius: 9999px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #fff;
-  font-weight: 700;
-  background: rgb(115, 103, 240);
-  cursor: pointer;
-`;
-
-export const TaskDetailsAddMemberIcon = styled.div`
-  float: left;
-  height: 32px;
-  width: 32px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 100%;
-  background: ${mixin.darken('#262c49', 0.15)};
-  cursor: pointer;
-  &:hover {
-    opacity: 0.8;
-  }
-`;
-
-export const TaskDetailLabels = styled.div`
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-`;
-
-export const TaskDetailLabel = styled.div<{ color: string }>`
-  &:hover {
-    opacity: 0.8;
-  }
-  background-color: ${props => props.color};
-  color: #fff;
-
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-
-  border-radius: 3px;
-  box-sizing: border-box;
+export const MetaDetail = styled.div`
  display: block;
  float: left;
-  font-weight: 600;
-  height: 32px;
-  line-height: 32px;
-  margin: 0 4px 4px 0;
-  min-width: 40px;
-  padding: 0 12px;
-  width: auto;
+  margin: 0 16px 8px 0;
+  max-width: 100%;
 `;

+export const MetaDetailTitle = styled.h3`
+  color: rgba(${props => props.theme.colors.text.primary});
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: 0.04em;
+  margin-top: 16px;
+  text-transform: uppercase;
+  display: block;
+  line-height: 20px;
+  margin: 0 8px 4px 0;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+`;
+
+export const MetaDetailContent = styled.div`
+  display: flex;
+`;
 export const TaskDetailsAddLabel = styled.div`
  border-radius: 3px;
  background: ${mixin.darken('#262c49', 0.15)};
@ -306,83 +384,231 @@ export const TaskDetailsAddLabelIcon = styled.div`
  }
 `;

-export const NoDueDateLabel = styled.span`
-  color: rgb(137, 147, 164);
-  font-size: 14px;
-  cursor: pointer;
+export const ChecklistSection = styled.div`
+  margin-top: 8px;
+  padding: 0 24px;
 `;

-export const UnassignedLabel = styled.div`
-  color: rgb(137, 147, 164);
-  font-size: 14px;
+export const TaskDetailLabel = styled.div<{ color: string }>`
+  &:hover {
+    opacity: 0.8;
+  }
+  background-color: ${props => props.color};
+  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
+  border-radius: 3px;
+  box-sizing: border-box;
+  display: block;
+  float: left;
+  font-weight: 600;
  height: 32px;
+  line-height: 32px;
+  margin: 0 4px 0 0;
+  min-width: 40px;
+  padding: 0 12px;
+  width: auto;
 `;

-export const ActionButtons = styled.div`
+export const MemberList = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 4px 16px 4px 8px;
+  margin-left: -1px;
+`;
+
+export const TaskMember = styled(TaskAssignee)`
+  margin-right: 4px;
+`;
+
+export const ActionButtonIcon = styled.div``;
+
+export const EditorActions = styled.div`
+  display: flex;
+  align-items: center;
+
+  margin-left: 32px;
+  margin-right: 32px;
+  padding: 9px 8px 7px 8px;
+`;
+
+export const CancelIcon = styled.div`
+  width: 32px;
+  height: 32p;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 4px;
+`;
+
+export const TabBarSection = styled.div`
+  margin-top: 2px;
+  padding-left: 23px;
+  display: flex;
+  text-transform: uppercase;
+  min-height: 35px;
+  border-bottom: 1px solid #414561;
+`;
+
+export const TabBarItem = styled.div`
+  box-shadow: inset 0 -2px rgba(216, 93, 216);
+  padding: 12px 7px 14px 7px;
+  margin-bottom: -1px;
+  margin-right: 36px;
+  color: rgba(${props => props.theme.colors.text.primary});
+`;
+
+export const CommentContainer = styled.div`
+  flex: 0 0 auto;
+  margin-top: auto;
+  padding: 15px 26px;
+  background: #1f243e;
+`;
+
+export const CommentInnerWrapper = styled.div`
+  display: flex;
+  position: relative;
+`;
+
+export const CommentEditorContainer = styled.div`
+  flex: 1;
+  border-radius: 6px;
+  border: 1px solid #414561;
  display: flex;
  flex-direction: column;
 `;
-
-export const ActionButtonsTitle = styled.h3`
-  color: rgba(${props => props.theme.colors.text.primary});
-  font-size: 12px;
-  font-weight: 500;
-  letter-spacing: 0.04em;
+export const CommentProfile = styled(TaskAssignee)`
+  margin-right: 8px;
+  position: relative;
+  top: 0;
+  padding-top: 3px;
+  align-items: normal;
 `;

-export const ActionButton = styled(Button)`
-  margin-top: 8px;
-  padding: 6px 12px;
-  background: rgba(${props => props.theme.colors.bg.primary}, 0.4);
-  text-align: left;
-  &:hover {
-    box-shadow: none;
-    background: rgba(${props => props.theme.colors.bg.primary}, 0.6);
+export const CommentTextArea = styled(TextareaAutosize)`
+  width: 100%;
+  line-height: 28px;
+  padding: 4px 6px;
+  border-radius: 6px;
+  color: rgba(${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;
+  &:not(:focus) {
+    height: 36px;
+  }
+  &:focus {
+    min-height: 80px;
+    max-height: none;
+    line-height: 20px;
  }
 `;

-export const MetaDetails = styled.div`
-  margin-top: 8px;
+export const CommentEditorActions = styled.div<{ visible: boolean }>`
+  display: ${props => (props.visible ? 'flex' : 'none')};
+  align-items: center;
+  padding: 5px 5px 5px 9px;
+  border-top: 1px solid #414561;
+`;
+
+export const CommentEditorActionIcon = styled.div`
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+export const CommentEditorSaveButton = styled(Button)`
+  margin-left: auto;
+  padding: 8px 16px;
+`;
+
+export const ActivitySection = styled.div`
+  overflow-x: hidden;
+
+  padding: 8px 26px;
+`;
+
+export const ActivityItem = styled.div`
+  padding: 8px 0;
+  position: relative;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  word-break: break-word;
+`;
+
+export const ActivityItemHeader = styled.div`
  display: flex;
 `;
+export const ActivityItemHeaderUser = styled(TaskAssignee)`
+  margin-right: 4px;
+`;

-export const TaskDueDateButton = styled(Button)`
-  height: 32px;
-  padding: 6px 12px;
-  background: rgba(${props => props.theme.colors.bg.primary}, 0.4);
+export const ActivityItemHeaderTitle = styled.div`
+  margin-left: 4px;
+  line-height: 18px;
+  display: flex;
+  align-items: center;
+`;
+
+export const ActivityItemHeaderTitleName = styled.span`
+  color: rgba(${props => props.theme.colors.text.primary});
+  font-weight: 500;
+`;
+
+export const ActivityItemTimestamp = styled.span<{ margin: number }>`
+  font-size: 12px;
+  color: rgba(${props => props.theme.colors.text.primary}, 0.65);
+  margin-left: ${props => props.margin}px;
+`;
+
+export const ActivityItemDetails = styled.div`
+  margin-left: 32px;
+`;
+
+export const ActivityItemComment = styled.div`
+  display: inline-flex;
+  border-radius: 3px;
+  ${mixin.boxShadowCard}
+  position: relative;
+  color: rgba(${props => props.theme.colors.text.primary});
+  padding: 8px 12px;
+  margin: 4px 0;
+  background-color: ${mixin.darken('#262c49', 0.1)};
+`;
+
+export const ActivityItemLog = styled.span`
+  margin-left: 2px;
+  color: rgba(${props => props.theme.colors.text.primary});
+`;
+
+export const ViewRawButton = styled.button`
+  border-radius: 3px;
+  padding: 8px 12px;
+  display: flex;
+  position: absolute;
+  right: 4px;
+  bottom: -24px;
+  cursor: pointer;
+  color: rgba(${props => props.theme.colors.text.primary}, 0.25);
  &:hover {
-    box-shadow: none;
-    background: rgba(${props => props.theme.colors.bg.primary}, 0.6);
+    color: rgba(${props => props.theme.colors.text.primary});
  }
 `;

-export const MetaDetail = styled.div`
-  display: block;
-  float: left;
-  margin: 0 16px 8px 0;
-  max-width: 100%;
-`;
-
-export const TaskDetailsSection = styled.div`
-  display: block;
-`;
-
-export const MetaDetailTitle = styled.h3`
-  color: rgba(${props => props.theme.colors.text.primary});
-  font-size: 12px;
-  font-weight: 500;
-  letter-spacing: 0.04em;
-  margin-top: 16px;
-  text-transform: uppercase;
-  display: block;
+export const TaskDetailsEditor = styled(TextareaAutosize)`
+  min-height: 108px;
+  color: #c2c6dc;
+  background: #262c49;
+  border-radius: 3px;
  line-height: 20px;
-  margin: 0 8px 4px 0;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
+  margin-left: 32px;
+  margin-right: 32px;
+  padding: 9px 8px 7px 8px;
+  outline: none;
+  border: none;
 `;
-
-export const MetaDetailContent = styled.div``;
--- a/frontend/src/shared/components/TaskDetails/index.tsx
+++ b/frontend/src/shared/components/TaskDetails/index.tsx
@ -1,68 +1,77 @@
-import React, { useState, useRef, useEffect } from 'react';
-import { Bin, Cross, Plus } from 'shared/icons';
-import useOnOutsideClick from 'shared/hooks/onOutsideClick';
-import ReactMarkdown from 'react-markdown';
-
+import React, { useState, useRef } from 'react';
 import {
-  isPositionChanged,
-  getSortedDraggables,
-  getNewDraggablePosition,
-  getAfterDropDraggableList,
-} from 'shared/utils/draggables';
-import { DragDropContext, Droppable, Draggable, DropResult } from 'react-beautiful-dnd';
-import TaskAssignee from 'shared/components/TaskAssignee';
-import moment from 'moment';
-
-import {
-  NoDueDateLabel,
-  TaskDueDateButton,
-  UnassignedLabel,
-  TaskGroupLabel,
-  TaskGroupLabelName,
-  TaskDetailsSection,
-  TaskActions,
-  TaskDetailsAddLabel,
-  TaskDetailsAddLabelIcon,
-  TaskAction,
-  TaskMeta,
-  ActionButtons,
-  ActionButton,
-  ActionButtonsTitle,
-  TaskHeader,
-  ProfileIcon,
-  TaskDetailsContent,
-  TaskDetailsWrapper,
-  TaskDetailsSidebar,
-  TaskDetailsTitleWrapper,
-  TaskDetailsTitle,
-  TaskDetailsLabel,
-  TaskDetailsAddDetailsButton,
-  TaskDetailsEditor,
-  TaskDetailsEditorWrapper,
-  TaskDetailsMarkdown,
-  TaskDetailsControls,
-  ConfirmSave,
-  CancelEdit,
-  TaskDetailSectionTitle,
-  TaskDetailLabel,
-  TaskDetailLabels,
-  TaskDetailAssignee,
-  TaskDetailAssignees,
-  TaskDetailsAddMemberIcon,
-  MetaDetails,
-  MetaDetail,
-  MetaDetailTitle,
-  MetaDetailContent,
-} from './Styles';
-import Checklist, { ChecklistItem, ChecklistItems } from '../Checklist';
+  Plus,
+  User,
+  Trash,
+  Paperclip,
+  Clone,
+  Share,
+  Tags,
+  Checkmark,
+  CheckSquareOutline,
+  At,
+  Smile,
+} from 'shared/icons';
+import Editor from 'rich-markdown-editor';
+import dark from 'shared/utils/editorTheme';
 import styled from 'styled-components';

-const ChecklistContainer = styled.div``;
+import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
+import dayjs from 'dayjs';

-type TaskContentProps = {
-  onEditContent: () => void;
-  description: string;
-};
+import Task from 'shared/icons/Task';
+import {
+  TaskDetailLabel,
+  CommentContainer,
+  MetaDetailContent,
+  TaskDetailsAddLabelIcon,
+  ActionButton,
+  AssignUserIcon,
+  AssignUserLabel,
+  AssignUsersButton,
+  AssignedUsersSection,
+  ViewRawButton,
+  DueDateTitle,
+  Container,
+  LeftSidebar,
+  ContentContainer,
+  LeftSidebarContent,
+  LeftSidebarSection,
+  SidebarTitle,
+  SidebarButton,
+  SidebarButtonText,
+  MarkCompleteButton,
+  HeaderContainer,
+  HeaderLeft,
+  HeaderInnerContainer,
+  TaskDetailsTitleWrapper,
+  TaskDetailsTitle,
+  ExtraActionsSection,
+  HeaderRight,
+  HeaderActionIcon,
+  EditorContainer,
+  InnerContentContainer,
+  DescriptionContainer,
+  Labels,
+  ChecklistSection,
+  MemberList,
+  TaskMember,
+  TabBarSection,
+  TabBarItem,
+  CommentTextArea,
+  CommentEditorContainer,
+  CommentEditorActions,
+  CommentEditorActionIcon,
+  CommentEditorSaveButton,
+  CommentProfile,
+  CommentInnerWrapper,
+  ActivitySection,
+  TaskDetailsEditor,
+} from './Styles';
+import Checklist, { ChecklistItem, ChecklistItems } from '../Checklist';
+import onDragEnd from './onDragEnd';
+
+const ChecklistContainer = styled.div``;

 type TaskLabelProps = {
  label: TaskLabel;
@ -84,62 +93,15 @@ const TaskLabelItem: React.FC<TaskLabelProps> = ({ label, onClick }) => {
  );
 };

-const TaskContent: React.FC<TaskContentProps> = ({ description, onEditContent }) => {
-  return description === '' ? (
-    <TaskDetailsAddDetailsButton onClick={onEditContent}>Add a more detailed description</TaskDetailsAddDetailsButton>
-  ) : (
-    <TaskDetailsMarkdown onClick={onEditContent}>
-      <ReactMarkdown source={description} />
-    </TaskDetailsMarkdown>
-  );
-};
-
 type DetailsEditorProps = {
  description: string;
  onTaskDescriptionChange: (newDescription: string) => void;
  onCancel: () => void;
 };

-const DetailsEditor: React.FC<DetailsEditorProps> = ({
-  description: initialDescription,
-  onTaskDescriptionChange,
-  onCancel,
-}) => {
-  const [description, setDescription] = useState(initialDescription);
-  const $editorWrapperRef = useRef<HTMLDivElement>(null);
-  const $editorRef = useRef<HTMLTextAreaElement>(null);
-  const handleOutsideClick = () => {
-    onTaskDescriptionChange(description);
-  };
-  useEffect(() => {
-    if ($editorRef && $editorRef.current) {
-      $editorRef.current.focus();
-      $editorRef.current.select();
-    }
-  }, []);
-
-  useOnOutsideClick($editorWrapperRef, true, handleOutsideClick, null);
-  return (
-    <TaskDetailsEditorWrapper ref={$editorWrapperRef}>
-      <TaskDetailsEditor
-        ref={$editorRef}
-        value={description}
-        onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setDescription(e.currentTarget.value)}
-      />
-      <TaskDetailsControls>
-        <ConfirmSave variant="relief" onClick={handleOutsideClick}>
-          Save
-        </ConfirmSave>
-        <CancelEdit onClick={onCancel}>
-          <Plus size={16} color="#c2c6dc" />
-        </CancelEdit>
-      </TaskDetailsControls>
-    </TaskDetailsEditorWrapper>
-  );
-};
-
 type TaskDetailsProps = {
  task: Task;
+  me?: TaskUser | null;
  onTaskNameChange: (task: Task, newName: string) => void;
  onTaskDescriptionChange: (task: Task, newDescription: string) => void;
  onDeleteTask: (task: Task) => void;
@ -161,6 +123,7 @@ type TaskDetailsProps = {
 };

 const TaskDetails: React.FC<TaskDetailsProps> = ({
+  me,
  task,
  onDeleteChecklist,
  onTaskNameChange,
@ -181,209 +144,205 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
  onToggleChecklistItem,
  onMemberProfile,
 }) => {
-  const [editorOpen, setEditorOpen] = useState(false);
-  const [description, setDescription] = useState(task.description ?? '');
  const [taskName, setTaskName] = useState(task.name);
-  const handleClick = () => {
-    setEditorOpen(!editorOpen);
-  };
-  const handleDeleteTask = () => {
-    onDeleteTask(task);
-  };
-  const $title = useRef<HTMLTextAreaElement>(null);
-  const onKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter') {
-      e.preventDefault();
-      onTaskNameChange(task, taskName);
-      if ($title && $title.current) {
-        $title.current.blur();
+  const [editTaskDescription, setEditTaskDescription] = useState(() => {
+    if (task.description) {
+      if (task.description.trim() === '' || task.description.trim() === '\\') {
+        return true;
      }
+      return false;
    }
-  };
-  const $unassignedRef = useRef<HTMLDivElement>(null);
-  const $addMemberRef = useRef<HTMLDivElement>(null);
-  const onUnassignedClick = () => {
-    onOpenAddMemberPopup(task, $unassignedRef);
-  };
-  const onAddMember = ($target: React.RefObject<HTMLElement>) => {
-    onOpenAddMemberPopup(task, $target);
-  };
-  const onAddChecklist = ($target: React.RefObject<HTMLElement>) => {
-    onOpenAddChecklistPopup(task, $target);
-  };
-  const $dueDateLabel = useRef<HTMLDivElement>(null);
-  const $addLabelRef = useRef<HTMLDivElement>(null);
+    return true;
+  });
+  const [saveTimeout, setSaveTimeout] = useState<any>(null);
+  const [showRaw, setShowRaw] = useState(false);
+  const [showCommentActions, setShowCommentActions] = useState(false);
+  const taskDescriptionRef = useRef(task.description ?? '');
+  const $noMemberBtn = useRef<HTMLDivElement>(null);
+  const $addMemberBtn = useRef<HTMLDivElement>(null);
+  const $dueDateBtn = useRef<HTMLDivElement>(null);

-  const onAddLabel = ($target: React.RefObject<HTMLElement>) => {
-    onOpenAddLabelPopup(task, $target);
+  const saveDescription = () => {
+    onTaskDescriptionChange(task, taskDescriptionRef.current);
  };
-
-  const onDragEnd = ({ draggableId, source, destination, type }: DropResult) => {
-    if (typeof destination === 'undefined') return;
-    if (!isPositionChanged(source, destination)) return;
-
-    const isChecklist = type === 'checklist';
-    const isSameChecklist = destination.droppableId === source.droppableId;
-    let droppedDraggable: DraggableElement | null = null;
-    let beforeDropDraggables: Array<DraggableElement> | null = null;
-
-    if (!task.checklists) return;
-    if (isChecklist) {
-      const droppedGroup = task.checklists.find(taskGroup => taskGroup.id === draggableId);
-      if (droppedGroup) {
-        droppedDraggable = {
-          id: draggableId,
-          position: droppedGroup.position,
-        };
-        beforeDropDraggables = getSortedDraggables(
-          task.checklists.map(checklist => {
-            return { id: checklist.id, position: checklist.position };
-          }),
-        );
-        if (droppedDraggable === null || beforeDropDraggables === null) {
-          throw new Error('before drop draggables is null');
-        }
-        const afterDropDraggables = getAfterDropDraggableList(
-          beforeDropDraggables,
-          droppedDraggable,
-          isChecklist,
-          isSameChecklist,
-          destination,
-        );
-        const newPosition = getNewDraggablePosition(afterDropDraggables, destination.index);
-        onChecklistDrop({ ...droppedGroup, position: newPosition });
-      } else {
-        throw { error: 'task group can not be found' };
-      }
-    } else {
-      const targetChecklist = task.checklists.findIndex(
-        checklist => checklist.items.findIndex(item => item.id === draggableId) !== -1,
-      );
-      const droppedChecklistItem = task.checklists[targetChecklist].items.find(item => item.id === draggableId);
-
-      if (droppedChecklistItem) {
-        droppedDraggable = {
-          id: draggableId,
-          position: droppedChecklistItem.position,
-        };
-        beforeDropDraggables = getSortedDraggables(
-          task.checklists[targetChecklist].items.map(item => {
-            return { id: item.id, position: item.position };
-          }),
-        );
-        if (droppedDraggable === null || beforeDropDraggables === null) {
-          throw new Error('before drop draggables is null');
-        }
-        const afterDropDraggables = getAfterDropDraggableList(
-          beforeDropDraggables,
-          droppedDraggable,
-          isChecklist,
-          isSameChecklist,
-          destination,
-        );
-        const newPosition = getNewDraggablePosition(afterDropDraggables, destination.index);
-        const newItem = {
-          ...droppedChecklistItem,
-          position: newPosition,
-        };
-        onChecklistItemDrop(droppedChecklistItem.taskChecklistID, destination.droppableId, newItem);
-      }
-    }
-  };
-
  return (
-    <>
-      <TaskActions>
-        <TaskAction onClick={handleDeleteTask}>
-          <Bin size={20} color="#c2c6dc" />
-        </TaskAction>
-        <TaskAction onClick={onCloseModal}>
-          <Cross width={16} height={16} />
-        </TaskAction>
-      </TaskActions>
-      <TaskHeader>
-        <TaskDetailsTitleWrapper>
-          <TaskDetailsTitle
-            ref={$title}
-            value={taskName}
-            onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setTaskName(e.currentTarget.value)}
-            onKeyDown={onKeyDown}
-          />
-        </TaskDetailsTitleWrapper>
-        <TaskMeta>
-          {task.taskGroup.name && (
-            <TaskGroupLabel>
-              in list <TaskGroupLabelName>{task.taskGroup.name}</TaskGroupLabelName>
-            </TaskGroupLabel>
-          )}
-        </TaskMeta>
-      </TaskHeader>
-      <TaskDetailsWrapper>
-        <TaskDetailsContent>
-          <MetaDetails>
-            {task.assigned && task.assigned.length !== 0 && (
-              <MetaDetail>
-                <MetaDetailTitle>MEMBERS</MetaDetailTitle>
-                <MetaDetailContent>
-                  {task.assigned &&
-                    task.assigned.map(member => (
-                      <TaskAssignee key={member.id} size={32} member={member} onMemberProfile={onMemberProfile} />
-                    ))}
-                  <TaskDetailsAddMemberIcon ref={$addMemberRef} onClick={() => onAddMember($addMemberRef)}>
-                    <Plus size={16} color="#c2c6dc" />
-                  </TaskDetailsAddMemberIcon>
-                </MetaDetailContent>
-              </MetaDetail>
-            )}
-            {task.labels.length !== 0 && (
-              <MetaDetail>
-                <MetaDetailTitle>LABELS</MetaDetailTitle>
-                <MetaDetailContent>
-                  {task.labels.map(label => {
-                    return (
-                      <TaskLabelItem
-                        key={label.projectLabel.id}
-                        label={label}
-                        onClick={$target => {
-                          onOpenAddLabelPopup(task, $target);
-                        }}
-                      />
-                    );
-                  })}
-                  <TaskDetailsAddLabelIcon ref={$addLabelRef} onClick={() => onAddLabel($addLabelRef)}>
-                    <Plus size={16} color="#c2c6dc" />
-                  </TaskDetailsAddLabelIcon>
-                </MetaDetailContent>
-              </MetaDetail>
-            )}
-            {task.dueDate && (
-              <MetaDetail>
-                <MetaDetailTitle>DUE DATE</MetaDetailTitle>
-                <MetaDetailContent>
-                  <TaskDueDateButton>{moment(task.dueDate).format('MMM D [at] h:mm A')}</TaskDueDateButton>
-                </MetaDetailContent>
-              </MetaDetail>
-            )}
-          </MetaDetails>
-
-          <TaskDetailsSection>
-            <TaskDetailsLabel>Description</TaskDetailsLabel>
-            {editorOpen ? (
-              <DetailsEditor
-                description={description}
-                onTaskDescriptionChange={newDescription => {
-                  setEditorOpen(false);
-                  setDescription(newDescription);
-                  onTaskDescriptionChange(task, newDescription);
-                }}
-                onCancel={() => {
-                  setEditorOpen(false);
-                }}
-              />
+    <Container>
+      <LeftSidebar>
+        <LeftSidebarContent>
+          <LeftSidebarSection>
+            <SidebarTitle>TASK GROUP</SidebarTitle>
+            <SidebarButton>
+              <SidebarButtonText>{task.taskGroup.name}</SidebarButtonText>
+            </SidebarButton>
+            <DueDateTitle>DUE DATE</DueDateTitle>
+            <SidebarButton
+              ref={$dueDateBtn}
+              onClick={() => {
+                onOpenDueDatePopop(task, $dueDateBtn);
+              }}
+            >
+              {task.dueDate ? (
+                <SidebarButtonText>{dayjs(task.dueDate).format('MMM D [at] h:mm A')}</SidebarButtonText>
+              ) : (
+                <SidebarButtonText>No due date</SidebarButtonText>
+              )}
+            </SidebarButton>
+          </LeftSidebarSection>
+          <AssignedUsersSection>
+            <DueDateTitle>MEMBERS</DueDateTitle>
+            {task.assigned && task.assigned.length !== 0 ? (
+              <MemberList>
+                {task.assigned.map(m => (
+                  <TaskMember
+                    key={m.id}
+                    member={m}
+                    size={32}
+                    onMemberProfile={$target => {
+                      onMemberProfile($target, m.id);
+                    }}
+                  />
+                ))}
+                <AssignUserIcon
+                  ref={$addMemberBtn}
+                  onClick={() => {
+                    onOpenAddMemberPopup(task, $addMemberBtn);
+                  }}
+                >
+                  <Plus width={16} height={16} />
+                </AssignUserIcon>
+              </MemberList>
            ) : (
-              <TaskContent description={description} onEditContent={handleClick} />
+              <AssignUsersButton
+                ref={$noMemberBtn}
+                onClick={() => {
+                  onOpenAddMemberPopup(task, $noMemberBtn);
+                }}
+              >
+                <AssignUserIcon>
+                  <User width={16} height={16} />
+                </AssignUserIcon>
+                <AssignUserLabel>No members</AssignUserLabel>
+              </AssignUsersButton>
            )}
-            <DragDropContext onDragEnd={onDragEnd}>
+          </AssignedUsersSection>
+          <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>
+        <HeaderContainer>
+          <HeaderInnerContainer>
+            <HeaderLeft>
+              <MarkCompleteButton
+                invert={task.complete ?? false}
+                onClick={() => {
+                  onToggleTaskComplete(task);
+                }}
+              >
+                <Checkmark width={8} height={8} />
+                <span>{task.complete ? 'Completed' : 'Mark complete'}</span>
+              </MarkCompleteButton>
+            </HeaderLeft>
+            <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}
+              onChange={e => {
+                setTaskName(e.currentTarget.value);
+              }}
+              onBlur={() => {
+                if (taskName !== task.name) {
+                  onTaskNameChange(task, taskName);
+                }
+              }}
+            />
+          </TaskDetailsTitleWrapper>
+          <Labels>
+            {task.labels.length !== 0 && (
+              <MetaDetailContent>
+                {task.labels.map(label => {
+                  return (
+                    <TaskLabelItem
+                      key={label.projectLabel.id}
+                      label={label}
+                      onClick={$target => {
+                        onOpenAddLabelPopup(task, $target);
+                      }}
+                    />
+                  );
+                })}
+                <TaskDetailsAddLabelIcon>
+                  <Plus width={12} height={12} />
+                </TaskDetailsAddLabelIcon>
+              </MetaDetailContent>
+            )}
+          </Labels>
+        </HeaderContainer>
+        <InnerContentContainer>
+          <DescriptionContainer>
+            {showRaw ? (
+              <TaskDetailsEditor value={taskDescriptionRef.current} />
+            ) : (
+              <EditorContainer
+                onClick={e => {
+                  if (!editTaskDescription) {
+                    setEditTaskDescription(true);
+                  }
+                }}
+              >
+                <Editor
+                  defaultValue={task.description ?? ''}
+                  theme={dark}
+                  readOnly={!editTaskDescription}
+                  autoFocus
+                  onChange={value => {
+                    setSaveTimeout(() => {
+                      clearTimeout(saveTimeout);
+                      return setTimeout(saveDescription, 2000);
+                    });
+                    const text = value();
+                    taskDescriptionRef.current = text;
+                  }}
+                />
+              </EditorContainer>
+            )}
+
+            <ViewRawButton onClick={() => setShowRaw(!showRaw)}>{showRaw ? 'Show editor' : 'Show raw'}</ViewRawButton>
+          </DescriptionContainer>
+          <ChecklistSection>
+            <DragDropContext onDragEnd={result => onDragEnd(result, task, onChecklistDrop, onChecklistItemDrop)}>
              <Droppable direction="vertical" type="checklist" droppableId="root">
                {dropProvided => (
                  <ChecklistContainer {...dropProvided.droppableProps} ref={dropProvided.innerRef}>
@ -441,9 +400,9 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
                                                  complete={item.complete}
                                                  onDeleteItem={onDeleteItem}
                                                  onChangeName={onChangeItemName}
-                                                  onToggleItem={(itemID, complete) =>
-                                                    onToggleChecklistItem(item.id, complete)
-                                                  }
+                                                  onToggleItem={(itemID, complete) => {
+                                                    onToggleChecklistItem(item.id, complete);
+                                                  }}
                                                />
                                              )}
                                            </Draggable>
@ -462,32 +421,54 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
                )}
              </Droppable>
            </DragDropContext>
-          </TaskDetailsSection>
-        </TaskDetailsContent>
-        <TaskDetailsSidebar>
-          <ActionButtons>
-            <ActionButtonsTitle>ADD TO CARD</ActionButtonsTitle>
-            <ActionButton justifyTextContent="flex-start" onClick={() => onToggleTaskComplete(task)}>
-              {task.complete ? 'Mark Incomplete' : 'Mark Complete'}
-            </ActionButton>
-            <ActionButton justifyTextContent="flex-start" onClick={$target => onAddMember($target)}>
-              Members
-            </ActionButton>
-            <ActionButton justifyTextContent="flex-start" onClick={$target => onAddLabel($target)}>
-              Labels
-            </ActionButton>
-            <ActionButton justifyTextContent="flex-start" onClick={$target => onAddChecklist($target)}>
-              Checklist
-            </ActionButton>
-            <ActionButton justifyTextContent="flex-start" onClick={$target => onOpenDueDatePopop(task, $target)}>
-              Due Date
-            </ActionButton>
-            <ActionButton justifyTextContent="flex-start">Attachment</ActionButton>
-            <ActionButton justifyTextContent="flex-start">Cover</ActionButton>
-          </ActionButtons>
-        </TaskDetailsSidebar>
-      </TaskDetailsWrapper>
-    </>
+          </ChecklistSection>
+          <TabBarSection>
+            <TabBarItem>Activity</TabBarItem>
+          </TabBarSection>
+          <ActivitySection />
+        </InnerContentContainer>
+        <CommentContainer>
+          {me && (
+            <CommentInnerWrapper>
+              <CommentProfile
+                member={me}
+                size={32}
+                onMemberProfile={$target => {
+                  onMemberProfile($target, me.id);
+                }}
+              />
+              <CommentEditorContainer>
+                <CommentTextArea
+                  disabled
+                  placeholder="Write a comment..."
+                  onFocus={() => {
+                    setShowCommentActions(true);
+                  }}
+                  onBlur={() => {
+                    setShowCommentActions(false);
+                  }}
+                />
+                <CommentEditorActions visible={showCommentActions}>
+                  <CommentEditorActionIcon>
+                    <Paperclip width={12} height={12} />
+                  </CommentEditorActionIcon>
+                  <CommentEditorActionIcon>
+                    <At width={12} height={12} />
+                  </CommentEditorActionIcon>
+                  <CommentEditorActionIcon>
+                    <Smile width={12} height={12} />
+                  </CommentEditorActionIcon>
+                  <CommentEditorActionIcon>
+                    <Task width={12} height={12} />
+                  </CommentEditorActionIcon>
+                  <CommentEditorSaveButton>Save</CommentEditorSaveButton>
+                </CommentEditorActions>
+              </CommentEditorContainer>
+            </CommentInnerWrapper>
+          )}
+        </CommentContainer>
+      </ContentContainer>
+    </Container>
  );
 };

--- a/frontend/src/shared/components/TaskDetails/onDragEnd.ts
+++ b/frontend/src/shared/components/TaskDetails/onDragEnd.ts
@ -0,0 +1,90 @@
+import {
+  getSortedDraggables,
+  isPositionChanged,
+  getNewDraggablePosition,
+  getAfterDropDraggableList,
+} from 'shared/utils/draggables';
+import { DropResult } from 'react-beautiful-dnd';
+
+type OnChecklistDropFn = (checklist: TaskChecklist) => void;
+type OnChecklistItemDropFn = (prevChecklistID: string, checklistID: string, checklistItem: TaskChecklistItem) => void;
+
+const onDragEnd = (
+  { draggableId, source, destination, type }: DropResult,
+  task: Task,
+  onChecklistDrop: OnChecklistDropFn,
+  onChecklistItemDrop: OnChecklistItemDropFn,
+) => {
+  if (typeof destination === 'undefined') return;
+  if (!isPositionChanged(source, destination)) return;
+
+  const isChecklist = type === 'checklist';
+  const isSameChecklist = destination.droppableId === source.droppableId;
+  let droppedDraggable: DraggableElement | null = null;
+  let beforeDropDraggables: Array<DraggableElement> | null = null;
+
+  if (!task.checklists) return;
+  if (isChecklist) {
+    const droppedGroup = task.checklists.find(taskGroup => taskGroup.id === draggableId);
+    if (droppedGroup) {
+      droppedDraggable = {
+        id: draggableId,
+        position: droppedGroup.position,
+      };
+      beforeDropDraggables = getSortedDraggables(
+        task.checklists.map(checklist => {
+          return { id: checklist.id, position: checklist.position };
+        }),
+      );
+      if (droppedDraggable === null || beforeDropDraggables === null) {
+        throw new Error('before drop draggables is null');
+      }
+      const afterDropDraggables = getAfterDropDraggableList(
+        beforeDropDraggables,
+        droppedDraggable,
+        isChecklist,
+        isSameChecklist,
+        destination,
+      );
+      const newPosition = getNewDraggablePosition(afterDropDraggables, destination.index);
+      onChecklistDrop({ ...droppedGroup, position: newPosition });
+    } else {
+      throw new Error('task group can not be found');
+    }
+  } else {
+    const targetChecklist = task.checklists.findIndex(
+      checklist => checklist.items.findIndex(item => item.id === draggableId) !== -1,
+    );
+    const droppedChecklistItem = task.checklists[targetChecklist].items.find(item => item.id === draggableId);
+
+    if (droppedChecklistItem) {
+      droppedDraggable = {
+        id: draggableId,
+        position: droppedChecklistItem.position,
+      };
+      beforeDropDraggables = getSortedDraggables(
+        task.checklists[targetChecklist].items.map(item => {
+          return { id: item.id, position: item.position };
+        }),
+      );
+      if (droppedDraggable === null || beforeDropDraggables === null) {
+        throw new Error('before drop draggables is null');
+      }
+      const afterDropDraggables = getAfterDropDraggableList(
+        beforeDropDraggables,
+        droppedDraggable,
+        isChecklist,
+        isSameChecklist,
+        destination,
+      );
+      const newPosition = getNewDraggablePosition(afterDropDraggables, destination.index);
+      const newItem = {
+        ...droppedChecklistItem,
+        position: newPosition,
+      };
+      onChecklistItemDrop(droppedChecklistItem.taskChecklistID, destination.droppableId, newItem);
+    }
+  }
+};
+
+export default onDragEnd;
--- a/frontend/src/shared/components/TopNavbar/Styles.ts
+++ b/frontend/src/shared/components/TopNavbar/Styles.ts
@ -5,6 +5,8 @@ import Button from 'shared/components/Button';
 import { Taskcafe } from 'shared/icons';
 import { NavLink, Link } from 'react-router-dom';
 import TaskAssignee from 'shared/components/TaskAssignee';
+import { useRef } from 'react';
+
 export const ProjectMember = styled(TaskAssignee)<{ zIndex: number }>`
  z-index: ${props => props.zIndex};
  position: relative;
@ -64,7 +66,7 @@ export const ProfileNameWrapper = styled.div`
  line-height: 1.25;
 `;

-export const IconContainer = styled.div<{ disabled?: boolean }>`
+export const IconContainerWrapper = styled.div<{ disabled?: boolean }>`
  margin-right: 20px;
  cursor: pointer;
  ${props =>
@ -85,7 +87,10 @@ export const ProfileNameSecondary = styled.small`
  color: #c2c6dc;
 `;

-export const ProfileIcon = styled.div<{ bgColor: string | null; backgroundURL: string | null }>`
+export const ProfileIcon = styled.div<{
+  bgColor: string | null;
+  backgroundURL: string | null;
+}>`
  width: 40px;
  height: 40px;
  border-radius: 9999px;
@ -246,8 +251,8 @@ export const NavSeparator = styled.div`
 export const LogoContainer = styled(Link)`
  display: block;
  left: 50%;
+  right: 50%;
  position: absolute;
-  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
--- a/frontend/src/shared/components/TopNavbar/index.tsx
+++ b/frontend/src/shared/components/TopNavbar/index.tsx
@ -1,18 +1,17 @@
 import React, { useRef, useState, useEffect } from 'react';
-import { Home, Star, Bell, AngleDown, BarChart, CheckCircle } from 'shared/icons';
+import { Home, Star, Bell, AngleDown, BarChart, CheckCircle, ListUnordered } from 'shared/icons';
 import styled from 'styled-components';
 import ProfileIcon from 'shared/components/ProfileIcon';
-import TaskAssignee from 'shared/components/TaskAssignee';
-import { usePopup, Popup } from 'shared/components/PopupMenu';
+import { usePopup } from 'shared/components/PopupMenu';
 import { RoleCode } from 'shared/generated/graphql';
-import MiniProfile from 'shared/components/MiniProfile';
+import NOOP from 'shared/utils/noop';
 import {
  TaskcafeLogo,
  TaskcafeTitle,
  ProjectFinder,
  LogoContainer,
  NavSeparator,
-  IconContainer,
+  IconContainerWrapper,
  ProjectNameTextarea,
  InviteButton,
  GlobalActions,
@ -31,7 +30,29 @@ import {
  ProjectMember,
  ProjectMembers,
 } from './Styles';
-import { Link } from 'react-router-dom';
+import { useHistory } from 'react-router';
+
+type IconContainerProps = {
+  disabled?: boolean;
+  onClick?: ($target: React.RefObject<HTMLElement>) => void;
+};
+
+const IconContainer: React.FC<IconContainerProps> = ({ onClick, disabled = false, children }) => {
+  const $container = useRef<HTMLDivElement>(null);
+  return (
+    <IconContainerWrapper
+      ref={$container}
+      disabled={disabled}
+      onClick={() => {
+        if (onClick) {
+          onClick($container);
+        }
+      }}
+    >
+      {children}
+    </IconContainerWrapper>
+  );
+};

 const HomeDashboard = styled(Home)``;

@ -145,7 +166,7 @@ type NavBarProps = {
  onFavorite?: () => void;
  onProfileClick: ($target: React.RefObject<HTMLElement>) => void;
  onSaveName?: (name: string) => void;
-  onNotificationClick: () => void;
+  onNotificationClick: ($target: React.RefObject<HTMLElement>) => void;
  canEditProjectName?: boolean;
  canInviteUser?: boolean;
  onInviteUser?: ($target: React.RefObject<HTMLElement>) => void;
@ -153,8 +174,11 @@ type NavBarProps = {
  user: TaskUser | null;
  onOpenSettings: ($target: React.RefObject<HTMLElement>) => void;
  projectMembers?: Array<TaskUser> | null;
+  projectInvitedMembers?: Array<InvitedUser> | null;
+
  onRemoveFromBoard?: (userID: string) => void;
  onMemberProfile?: ($targetRef: React.RefObject<HTMLElement>, memberID: string) => void;
+  onInvitedMemberProfile?: ($targetRef: React.RefObject<HTMLElement>, email: string) => void;
 };

 const NavBar: React.FC<NavBarProps> = ({
@ -164,10 +188,12 @@ const NavBar: React.FC<NavBarProps> = ({
  onChangeProjectOwner,
  currentTab,
  onMemberProfile,
+  onInvitedMemberProfile,
  canEditProjectName = false,
  onOpenProjectFinder,
  onFavorite,
  onSetTab,
+  projectInvitedMembers,
  onChangeRole,
  name,
  onRemoveFromBoard,
@ -184,6 +210,7 @@ const NavBar: React.FC<NavBarProps> = ({
      onProfileClick($target);
    }
  };
+  const history = useHistory();
  const { showPopup } = usePopup();
  return (
    <NavbarWrapper>
@ -225,19 +252,38 @@ const NavBar: React.FC<NavBarProps> = ({
          <TaskcafeTitle>Taskcafé</TaskcafeTitle>
        </LogoContainer>
        <GlobalActions>
-          {projectMembers && onMemberProfile && (
+          {projectMembers && projectInvitedMembers && onMemberProfile && onInvitedMemberProfile && (
            <>
              <ProjectMembers>
                {projectMembers.map((member, idx) => (
                  <ProjectMember
                    showRoleIcons
-                    zIndex={projectMembers.length - idx}
+                    zIndex={projectMembers.length - idx + projectInvitedMembers.length}
                    key={member.id}
                    size={28}
                    member={member}
                    onMemberProfile={onMemberProfile}
                  />
                ))}
+                {projectInvitedMembers.map((member, idx) => (
+                  <ProjectMember
+                    showRoleIcons
+                    zIndex={projectInvitedMembers.length - idx}
+                    key={member.email}
+                    size={28}
+                    invited
+                    member={{
+                      id: member.email,
+                      fullName: member.email,
+                      profileIcon: {
+                        url: null,
+                        initials: member.email.charAt(0),
+                        bgColor: '#fff',
+                      },
+                    }}
+                    onMemberProfile={onInvitedMemberProfile}
+                  />
+                ))}
                {canInviteUser && (
                  <InviteButton
                    onClick={$target => {
@ -257,16 +303,19 @@ const NavBar: React.FC<NavBarProps> = ({
          <ProjectFinder onClick={onOpenProjectFinder} variant="gradient">
            Projects
          </ProjectFinder>
-          <IconContainer onClick={onDashboardClick}>
+          <IconContainer onClick={() => onDashboardClick()}>
            <HomeDashboard width={20} height={20} />
          </IconContainer>
-          <IconContainer disabled>
+          <IconContainer disabled onClick={NOOP}>
            <CheckCircle width={20} height={20} />
          </IconContainer>
-          <IconContainer onClick={onNotificationClick}>
+          <IconContainer onClick={() => history.push('/outline')}>
+            <ListUnordered width={20} height={20} />
+          </IconContainer>
+          <IconContainer disabled onClick={onNotificationClick}>
            <Bell color="#c2c6dc" size={20} />
          </IconContainer>
-          <IconContainer disabled>
+          <IconContainer disabled onClick={NOOP}>
            <BarChart width={20} height={20} />
          </IconContainer>

--- 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,5 +1,5 @@
-mutation createProject($teamID: UUID!, $userID: UUID!, $name: String!) {
-  createProject(input: {teamID: $teamID, userID: $userID, name: $name}) {
+mutation createProject($teamID: UUID, $name: String!) {
+  createProject(input: {teamID: $teamID, name: $name}) {
    id
    name
    team {
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Jordan Knott	33f06c1035	feat: more changes	2020-12-16 20:18:02 -06:00
Jordan Knott	eff2044a6b	feat: so many stuffs	2020-12-05 15:19:34 -06:00
Jordan Knott	451581e934	refactor: add logging info to search members	2020-10-20 18:59:21 -05:00
Jordan Knott	0a48b578fd	chore: add air config	2020-10-20 18:59:21 -05:00
Jordan Knott	262f9cbdda	feat: redesign project invite popup	2020-10-20 18:59:21 -05:00
Jordan Knott	737d2b640f	feat: redesign project sharing	2020-10-20 18:59:21 -05:00
Jordan Knott	36f25391b4	feat: add public projects	2020-10-20 18:59:21 -05:00
Jordan Knott	696a9aeee7	refactor: move default viper config values to commands/commands.go	2020-10-20 18:59:21 -05:00
Jordan Knott	6c7203a4aa	refactor: move default viper config values to commands/commands.go	2020-10-20 18:58:15 -05:00
IJustDev	86f2d90668	feat(cli): Reset Password Command Introduce `reset-password` command. Refs #71	2020-10-20 18:50:54 -05:00
Nurseiit Abdimomyn	92493deedf	refactor: replace moment with dayjs	2020-10-20 16:06:16 -05:00
Cain Watson	a288e06123	feat: add 'complete' sort option	2020-09-30 23:38:01 -07:00
Jordan Knott	ed4775faa5	docs(CONTRIBUTING): add section on unwanted PRs	2020-10-01 00:55:59 -05:00
FernTheDev	0c7d2e2c9f	feat(Login): add spinner on login	2020-09-23 15:40:35 -07:00
Jordan Knott	4277b7b2a8	feat: add personal projects personal projects are projects that have no team. they can only seen by the project members (one of which is whoever first creates the project).	2020-09-19 20:23:16 -05:00
Jordan Knott	28a53f14ad	docs(README): update docker badge to filter out nightly	2020-09-19 20:03:33 -05:00
Jordan Knott	0d4fb6a0d0	fix: member permissions now works correctly	2020-09-19 17:26:02 -05:00
Jordan Knott	0366b4c7f7	fix(CardComposer): add card button now creates a card	2020-09-18 20:33:15 -05:00
Jordan Knott	058749cb17	fix(commands/web): return error from ListenAndServe	2020-09-18 20:19:14 -05:00
Jordan Knott	3d95c6b600	docs(README): add docker pulls badge	2020-09-16 15:15:58 -05:00
Jordan Knott	c7538a98e5	fix: segfault on database connection failure	2020-09-12 18:23:23 -05:00
Jordan Knott	fe84f97f18	fix: url encode avatar filename when showing path fixes #61	2020-09-12 18:12:12 -05:00
Jordan Knott	52c60abcd7	fix: secret key is no longer hard coded the secret key for signing JWT tokens is now read from server.secret. if that does not exist, then a random UUID v4 is generated and used instead. a log warning is also shown.	2020-09-12 18:03:17 -05:00
Jordan Knott	9fdb3008db	docs(bug_report): add note about server logs	2020-09-12 03:33:24 -05:00
Jordan Knott	e2ef8a1a19	fix: initial access token after install is now set correctly	2020-09-12 03:24:09 -05:00
Jordan Knott	61cd376bfd	fix: rename host to hostname in example config fixes #59	2020-09-12 01:32:01 -05:00
Jordan Knott	ba9fc64fd9	fix: do not add localhost:3333 url to avatar urls fixes #58	2020-09-12 01:23:48 -05:00
Jordan Knott	03dafe9b7b	fix: remove font awesome library	2020-09-11 19:58:42 -05:00
Jordan Knott	12a767947a	fix: duplicate schema migration	2020-09-11 19:29:41 -05:00
Jordan Knott	40557ba79f	feat: add view raw markdown button to task details	2020-09-11 16:21:46 -05:00
Jordan Knott	e4d1e21304	docs(README): re-add screenshot	2020-09-11 15:11:56 -05:00
Jordan Knott	f7c6ee470e	fix: task label margin issue with task title	2020-09-11 14:54:22 -05:00
Jordan Knott	227ce5966d	fix: top navbar logo was not always centered	2020-09-11 14:43:46 -05:00
Jordan Knott	aa5e1c0661	fix: flickering when transitioning to some pages	2020-09-11 14:41:21 -05:00
Jordan Knott	b603081691	fix: task labels wrapper extending farther than it should	2020-09-11 14:36:41 -05:00
Jordan Knott	e76ea9da63	fix: show correct task group in task details	2020-09-11 14:34:57 -05:00
Jordan Knott	923d7f7372	feat: add user profile settings tab	2020-09-11 14:26:02 -05:00
Jordan Knott	009d717d80	fix: uploading avatar image failing due to invalid UUID key fixes #55	2020-09-11 13:57:02 -05:00
Jordan Knott	4272fefa28	feat: implement task group actions - allow sorting specifc task groups - duplicate task group - delete all tasks in task group	2020-09-10 23:58:10 -05:00
Jordan Knott	25f5cad557	chore: switch eslint to lint changed files intead of whole project	2020-09-10 22:35:16 -05:00
Jordan Knott	cb655347be	docs: add pull request template	2020-09-10 16:01:25 -05:00
Jordan Knott	03cf245828	docs(CONTRIBUTING): add note about asking in discord	2020-09-10 15:57:53 -05:00
Jordan Knott	09d73fdbce	docs(README): update source build instructions	2020-09-10 15:53:47 -05:00
Jordan Knott	0caa803d27	feat: add notification UI showPopup was also refactored to be better	2020-09-10 15:31:04 -05:00
Jordan Knott	feea209507	docs(README): update taskcafe logo design & readme content	2020-09-02 21:11:18 -05:00
Jordan Knott	e57033655a	docs(FUNDING): add maintainer donation links	2020-09-02 21:04:40 -05:00
Jordan Knott	31526a2575	docs(CHANGELOG): add changelog document	2020-09-02 20:40:56 -05:00
Jordan Knott	0a1bdc19f3	fix: remove cors middleware fixes #51	2020-09-02 20:30:38 -05:00
Jordan Knott	771d598c04	feat: add task details	2020-09-02 20:27:43 -05:00
Jordan Knott	a9a1576f46	fix: update margin on filter chips	2020-09-02 20:27:22 -05:00
Jordan Knott	9541ae70e0	docs(CONTRIBUTING): add notice about creating issue before starting work on PR	2020-09-02 15:32:37 -05:00
Jordan Knott	66583bb4fb	feat: add task sorting & filtering adds filtering by task status (completion date, incomplete, completion) adds filtering by task metadata (task name, labels, members, due date) adds sorting by task name, labels, members, and due date	2020-08-28 23:32:17 -07:00
Jordan Knott	47782d6d86	fix: due date manager now sends the correct new due date	2020-08-28 20:59:45 -05:00
Jordan Knott	4988176220	fix: add retry with backoff to initial database connection	2020-08-28 14:22:24 -05:00
Jordan Knott	dd50baa05a	refactor: add logging to CreateTask resolver	2020-08-23 17:52:45 -05:00
Jordan Knott	46e724e731	feat: add pre commit hook to lint frontend & fix warnings	2020-08-23 17:29:06 -05:00
Jordan Knott	8ce19a1ceb	refactor: update project name in tmuxinator	2020-08-23 17:29:06 -05:00
Jordan Knott	8f410cd9b7	fix: use pre-built taskcafe image in docker-compose by default	2020-08-23 11:44:50 -05:00
Jeremy Tsai	adae924ca1	docs(README): fix minor typos/inconsistencies	2020-08-23 09:57:10 -05:00
Jordan Knott	22e4669c34	docs(README): remove docker compose migration step	2020-08-22 02:52:51 -05:00
Jordan Knott	81b89f2411	docs(README): update docker release badge label	2020-08-21 23:49:25 -05:00
Jordan Knott	13480acd7e	fix(TaskDetails): update member layout	2020-08-21 23:37:48 -05:00