refactor: make theme more consistent

feat: redesign project sharing & initial registration
redesigned the project sharing popup to be a multi select dropdown that populates the options by using the input as a fuzzy search filter on the current users & invited users. users can now also be directly invited by email from the project share window. if invited this way, then the user will receive an email that sends them to a registration page, then a confirmation page. the initial registration was always redone so that it uses a similar system to the above in that it now will accept the first registered user if there are no other accounts (besides 'system').
2020-12-17 22:51:20 -06:00 · 2020-12-17 22:39:14 -06:00 · 2020-10-20 18:58:15 -05:00 · 2020-10-20 18:50:54 -05:00 · 2020-10-20 16:06:16 -05:00 · 2020-09-30 23:38:01 -07:00
210 changed files with 13303 additions and 3149 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
@@ -3,11 +3,10 @@ repos:
  hooks:
    - id: eslint
      name: eslint
-      entry: go run cmd/mage/main.go frontend:lint
+      entry: scripts/lint.sh
      language: system
      files: \.[jt]sx?$  # *.js, *.jsx, *.ts and *.tsx
      types: [file]
-      pass_filenames: false
 - hooks:
  - id: check-yaml
  - id: end-of-file-fixer
--- 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?label=docker)](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
@@ -81,6 +95,7 @@ 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`.

+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.
@@ -89,6 +104,8 @@ Then run the database migrations with `taskcafe migrate`.

 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 goals of Taskcafe is to provide a project management tool that I personally enjoy using for my
--- 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/frontend/.eslintrc.json
+++ b/frontend/.eslintrc.json
@@ -31,7 +31,9 @@
    "@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",
@@ -21,6 +13,7 @@
    "@types/jwt-decode": "^2.2.1",
    "@types/lodash": "^4.14.149",
    "@types/node": "^12.0.0",
+    "@types/query-string": "^6.3.0",
    "@types/react": "^16.9.21",
    "@types/react-beautiful-dnd": "^12.1.1",
    "@types/react-datepicker": "^2.11.0",
@@ -28,6 +21,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,14 +34,15 @@
    "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",
+    "query-string": "^6.13.7",
    "react": "^16.12.0",
    "react-autosize-textarea": "^7.0.0",
    "react-beautiful-dnd": "^13.0.0",
@@ -59,6 +54,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"
  },
@@ -95,10 +93,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
@@ -5,6 +5,7 @@ import GlobalTopNavbar from 'App/TopNavbar';
 import {
  useUsersQuery,
  useDeleteUserAccountMutation,
+  useDeleteInvitedUserAccountMutation,
  useCreateUserAccountMutation,
  UsersDocument,
  UsersQuery,
@@ -81,7 +82,7 @@ const AddUserInput = styled(Input)`
 `;

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

@@ -171,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 =>
@@ -215,11 +227,16 @@ const AdminRoute = () => {
        <Admin
          initialTab={0}
          users={data.users}
+          invitedUsers={data.invitedUsers}
          canInviteUser={user.roles.org === 'admin'}
          onInviteUser={NOOP}
          onUpdateUserPassword={() => {
            hidePopup();
          }}
+          onDeleteInvitedUser={invitedUserID => {
+            deleteInvitedUser({ variables: { invitedUserID } });
+            hidePopup();
+          }}
          onDeleteUser={(userID, newOwnerID) => {
            deleteUser({ variables: { userID, newOwnerID } });
            hidePopup();
--- a/frontend/src/App/Routes.tsx
+++ b/frontend/src/App/Routes.tsx
@@ -1,16 +1,20 @@
-import React from 'react';
-import { Switch, Route } from 'react-router-dom';
+import React, { useEffect, useState } from 'react';
+import { Switch, Route, useHistory } from 'react-router-dom';
 import * as H from 'history';

 import Dashboard from 'Dashboard';
 import Admin from 'Admin';
+import Confirm from 'Confirm';
 import Projects from 'Projects';
 import Project from 'Projects/Project';
 import Teams from 'Teams';
 import Login from 'Auth';
-import Install from 'Install';
+import Register from 'Register';
 import Profile from 'Profile';
 import styled from 'styled-components';
+import JwtDecode from 'jwt-decode';
+import { setAccessToken } from 'shared/utils/accessToken';
+import { useCurrentUser } from 'App/context';

 const MainContent = styled.div`
  padding: 0 0 0 0;
@@ -21,6 +25,50 @@ const MainContent = styled.div`
  flex-grow: 1;
 `;

+const AuthorizedRoutes = () => {
+  const history = useHistory();
+  const [loading, setLoading] = useState(true);
+  const { setUser } = useCurrentUser();
+  useEffect(() => {
+    fetch('/auth/refresh_token', {
+      method: 'POST',
+      credentials: 'include',
+    }).then(async x => {
+      const { status } = x;
+      if (status === 400) {
+        history.replace('/login');
+      } else {
+        const response: RefreshTokenResponse = await x.json();
+        const { accessToken, setup } = response;
+        if (setup) {
+          history.replace(`/register?confirmToken=${setup.confirmToken}`);
+        } else {
+          const claims: JWTToken = JwtDecode(accessToken);
+          const currentUser = {
+            id: claims.userId,
+            roles: { org: claims.orgRole, teams: new Map<string, string>(), projects: new Map<string, string>() },
+          };
+          setUser(currentUser);
+          setAccessToken(accessToken);
+        }
+      }
+      setLoading(false);
+    });
+  }, []);
+  return loading ? null : (
+    <Switch>
+      <MainContent>
+        <Route exact path="/" component={Dashboard} />
+        <Route exact path="/projects" component={Projects} />
+        <Route path="/projects/:projectID" component={Project} />
+        <Route path="/teams/:teamID" component={Teams} />
+        <Route path="/profile" component={Profile} />
+        <Route path="/admin" component={Admin} />
+      </MainContent>
+    </Switch>
+  );
+};
+
 type RoutesProps = {
  history: H.History;
 };
@@ -28,15 +76,9 @@ type RoutesProps = {
 const Routes: React.FC<RoutesProps> = () => (
  <Switch>
    <Route exact path="/login" component={Login} />
-    <Route exact path="/install" component={Install} />
-    <MainContent>
-      <Route exact path="/" component={Dashboard} />
-      <Route exact path="/projects" component={Projects} />
-      <Route path="/projects/:projectID" component={Project} />
-      <Route path="/teams/:teamID" component={Teams} />
-      <Route path="/profile" component={Profile} />
-      <Route path="/admin" component={Admin} />
-    </MainContent>
+    <Route exact path="/register" component={Register} />
+    <Route exact path="/confirm" component={Confirm} />
+    <AuthorizedRoutes />
  </Switch>
 );

--- a/frontend/src/App/ThemeStyles.ts
+++ b/frontend/src/App/ThemeStyles.ts
@@ -1,26 +1,28 @@
 import { DefaultTheme } from 'styled-components';
+import Color from 'color';

 const theme: DefaultTheme = {
  borderRadius: {
-    primary: '3px',
+    primary: '3x',
    alternate: '6px',
  },
  colors: {
-    primary: '115, 103, 240',
-    secondary: '216, 93, 216',
-    alternate: '65, 69, 97',
-    success: '40, 199, 111',
-    danger: '234, 84, 85',
-    warning: '255, 159, 67',
-    dark: '30, 30, 30',
+    multiColors: ['#e362e3', '#7a6ff0', '#37c5ab', '#aa62e3', '#e8384f'],
+    primary: 'rgb(115, 103, 240)',
+    secondary: 'rgb(216, 93, 216)',
+    alternate: 'rgb(65, 69, 97)',
+    success: 'rgb(40, 199, 111)',
+    danger: 'rgb(234, 84, 85)',
+    warning: 'rgb(255, 159, 67)',
+    dark: 'rgb(30, 30, 30)',
    text: {
-      primary: '194, 198, 220',
-      secondary: '255, 255, 255',
+      primary: 'rgb(194, 198, 220)',
+      secondary: 'rgb(255, 255, 255)',
    },
-    border: '65, 69, 97',
+    border: 'rgb(65, 69, 97)',
    bg: {
-      primary: '16, 22, 58',
-      secondary: '38, 44, 73',
+      primary: 'rgb(16, 22, 58)',
+      secondary: 'rgb(38, 44, 73)',
    },
  },
 };
--- a/frontend/src/App/TopNavbar.tsx
+++ b/frontend/src/App/TopNavbar.tsx
@@ -7,7 +7,7 @@ import { useHistory } from 'react-router';
 import { PermissionLevel, PermissionObjectType, useCurrentUser } from 'App/context';
 import {
  RoleCode,
-  useMeQuery,
+  useTopNavbarQuery,
  useDeleteProjectMutation,
  useGetProjectsQuery,
  GetProjectsDocument,
@@ -19,6 +19,8 @@ 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';
+import theme from './ThemeStyles';

 const TeamContainer = styled.div`
  display: flex;
@@ -61,7 +63,7 @@ const TeamProjectBackground = styled.div<{ color: string }>`
  opacity: 1;
  border-radius: 3px;
  &:before {
-    background: rgba(${props => props.theme.colors.bg.secondary});
+    background: ${props => props.theme.colors.bg.secondary};
    bottom: 0;
    content: '';
    left: 0;
@@ -113,7 +115,7 @@ const TeamProjectContainer = styled.div`
  margin: 0 4px 4px 0;
  min-width: 0;
  &:hover ${TeamProjectTitle} {
-    color: rgba(${props => props.theme.colors.text.secondary});
+    color: ${props => props.theme.colors.text.secondary};
  }
  &:hover ${TeamProjectAvatar} {
    opacity: 1;
@@ -123,7 +125,7 @@ const TeamProjectContainer = styled.div`
  }
 `;

-const colors = ['#e362e3', '#7a6ff0', '#37c5ab', '#aa62e3', '#e8384f'];
+const colors = [theme.colors.primary, theme.colors.secondary];

 const ProjectFinder = () => {
  const { loading, data } = useGetProjectsQuery();
@@ -136,7 +138,7 @@ const ProjectFinder = () => {
      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 (
@@ -197,7 +199,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>
@@ -229,10 +231,12 @@ 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> = ({
@@ -245,12 +249,14 @@ const GlobalTopNavbar: React.FC<GlobalTopNavbarProps> = ({
  name,
  popupContent,
  projectMembers,
+  projectInvitedMembers,
  onInviteUser,
  onSaveProjectName,
+  onRemoveInvitedFromBoard,
  onRemoveFromBoard,
 }) => {
  const { user, setUserRoles, setUser } = useCurrentUser();
-  const { data } = useMeQuery({
+  const { loading, data } = useTopNavbarQuery({
    onCompleted: response => {
      if (user && user.roles) {
        setUserRoles({
@@ -300,13 +306,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: theme.colors.primary },
+      );
    }
  };

@@ -314,6 +338,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 =
@@ -363,16 +415,18 @@ const GlobalTopNavbar: React.FC<GlobalTopNavbarProps> = ({
        canEditProjectName={userIsTeamOrProjectAdmin}
        canInviteUser={userIsTeamOrProjectAdmin}
        onMemberProfile={onMemberProfile}
+        onInvitedMemberProfile={onInvitedMemberProfile}
        onInviteUser={onInviteUser}
        onChangeRole={onChangeRole}
        onChangeProjectOwner={onChangeProjectOwner}
-        onNotificationClick={NOOP}
+        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,6 +3,7 @@ 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';
@@ -11,6 +12,39 @@ 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: ${props => props.theme.colors.danger};
+  }
+  .Toastify__toast--warning {
+    background: ${props => props.theme.colors.warning};
+  }
+  .Toastify__toast--success {
+    background: ${props => props.theme.colors.success};
+  }
+  .Toastify__toast-body {
+  }
+  .Toastify__progress-bar {
+  }
+  .Toastify__close-button {
+    display: none;
+  }
+`;
+
 const history = createBrowserHistory();
 type RefreshTokenResponse = {
  accessToken: string;
@@ -18,7 +52,6 @@ type RefreshTokenResponse = {
 };

 const App = () => {
-  const [loading, setLoading] = useState(true);
  const [user, setUser] = useState<CurrentUserRaw | null>(null);
  const setUserRoles = (roles: CurrentUserRoles) => {
    if (user) {
@@ -29,32 +62,6 @@ const App = () => {
    }
  };

-  useEffect(() => {
-    fetch('/auth/refresh_token', {
-      method: 'POST',
-      credentials: 'include',
-    }).then(async x => {
-      const { status } = x;
-      if (status === 400) {
-        history.replace('/login');
-      } else {
-        const response: RefreshTokenResponse = await x.json();
-        const { accessToken, isInstalled } = response;
-        const claims: JWTToken = jwtDecode(accessToken);
-        const currentUser = {
-          id: claims.userId,
-          roles: { org: claims.orgRole, teams: new Map<string, string>(), projects: new Map<string, string>() },
-        };
-        setUser(currentUser);
-        setAccessToken(accessToken);
-        if (!isInstalled) {
-          history.replace('/install');
-        }
-      }
-      setLoading(false);
-    });
-  }, []);
-
  return (
    <>
      <UserContext.Provider value={{ user, setUser, setUserRoles }}>
@@ -63,15 +70,21 @@ const App = () => {
          <BaseStyles />
          <Router history={history}>
            <PopupProvider>
-              {loading ? (
-                <div>loading</div>
-              ) : (
-                <>
-                  <Routes history={history} />
-                </>
-              )}
+              <Routes history={history} />
            </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
@@ -52,7 +52,20 @@ const Auth = () => {
    }).then(async x => {
      const { status } = x;
      if (status === 200) {
-        history.replace('/projects');
+        const response: RefreshTokenResponse = await x.json();
+        const { accessToken, setup } = response;
+        if (setup) {
+          history.replace(`/register?confirmToken=${setup.confirmToken}`);
+        } else {
+          const claims: JWTToken = JwtDecode(accessToken);
+          const currentUser = {
+            id: claims.userId,
+            roles: { org: claims.orgRole, teams: new Map<string, string>(), projects: new Map<string, string>() },
+          };
+          setUser(currentUser);
+          setAccessToken(accessToken);
+          history.replace('/projects');
+        }
      }
    });
  }, []);
--- a/frontend/src/Confirm/Styles.ts
+++ b/frontend/src/Confirm/Styles.ts
--- a/frontend/src/Confirm/index.tsx
+++ b/frontend/src/Confirm/index.tsx
@@ -0,0 +1,61 @@
+import React, { useState } from 'react';
+import axios from 'axios';
+import Confirm from 'shared/components/Confirm';
+import { useHistory, useLocation } from 'react-router';
+import * as QueryString from 'query-string';
+import { toast } from 'react-toastify';
+import { Container, LoginWrapper } from './Styles';
+import JwtDecode from 'jwt-decode';
+import { setAccessToken } from 'shared/utils/accessToken';
+import { useCurrentUser } from 'App/context';
+
+const UsersConfirm = () => {
+  const history = useHistory();
+  const location = useLocation();
+  const [registered, setRegistered] = useState(false);
+  const params = QueryString.parse(location.search);
+  const { setUser } = useCurrentUser();
+  return (
+    <Container>
+      <LoginWrapper>
+        <Confirm
+          hasConfirmToken={params.confirmToken !== undefined}
+          onConfirmUser={setFailed => {
+            fetch('/auth/confirm', {
+              method: 'POST',
+              body: JSON.stringify({
+                confirmToken: params.confirmToken,
+              }),
+            })
+              .then(async x => {
+                const { status } = x;
+                if (status === 200) {
+                  const response = await x.json();
+                  const { accessToken } = response;
+                  const claims: JWTToken = JwtDecode(accessToken);
+                  const currentUser = {
+                    id: claims.userId,
+                    roles: {
+                      org: claims.orgRole,
+                      teams: new Map<string, string>(),
+                      projects: new Map<string, string>(),
+                    },
+                  };
+                  setUser(currentUser);
+                  setAccessToken(accessToken);
+                  history.push('/');
+                } else {
+                  setFailed();
+                }
+              })
+              .catch(() => {
+                setFailed();
+              });
+          }}
+        />
+      </LoginWrapper>
+    </Container>
+  );
+};
+
+export default UsersConfirm;
--- a/frontend/src/Install/index.tsx
+++ b/frontend/src/Install/index.tsx
@@ -1,88 +0,0 @@
-import React, { useEffect, useContext } from 'react';
-import axios from 'axios';
-import Register from 'shared/components/Register';
-import { useHistory } from 'react-router';
-import { getAccessToken, setAccessToken } from 'shared/utils/accessToken';
-import UserContext from 'App/context';
-import jwtDecode from 'jwt-decode';
-import { Container, LoginWrapper } from './Styles';
-
-const Install = () => {
-  const history = useHistory();
-  const { setUser } = useContext(UserContext);
-  useEffect(() => {
-    fetch('/auth/refresh_token', {
-      method: 'POST',
-      credentials: 'include',
-    }).then(async x => {
-      const { status } = x;
-      const response: RefreshTokenResponse = await x.json();
-      const { isInstalled } = response;
-      if (status === 200 && isInstalled) {
-        history.replace('/projects');
-      }
-    });
-  }, []);
-  return (
-    <Container>
-      <LoginWrapper>
-        <Register
-          onSubmit={(data, setComplete, setError) => {
-            const accessToken = getAccessToken();
-            if (data.password !== data.password_confirm) {
-              setError('password', { type: 'error', message: 'Passwords must match' });
-              setError('password_confirm', { type: 'error', message: 'Passwords must match' });
-            } else {
-              axios
-                .post(
-                  '/auth/install',
-                  {
-                    user: {
-                      username: data.username,
-                      roleCode: 'admin',
-                      email: data.email,
-                      password: data.password,
-                      initials: data.initials,
-                      fullname: data.fullname,
-                    },
-                  },
-                  {
-                    headers: {
-                      Authorization: `Bearer ${accessToken}`,
-                    },
-                  },
-                )
-                .then(async x => {
-                  const { status } = x;
-                  if (status === 400) {
-                    history.replace('/login');
-                  } else {
-                    const response: RefreshTokenResponse = await x.data;
-                    const { accessToken: newToken, isInstalled } = response;
-                    const claims: JWTToken = jwtDecode(accessToken);
-                    const currentUser = {
-                      id: claims.userId,
-                      roles: {
-                        org: claims.orgRole,
-                        teams: new Map<string, string>(),
-                        projects: new Map<string, string>(),
-                      },
-                    };
-                    setUser(currentUser);
-                    setAccessToken(accessToken);
-                    if (!isInstalled) {
-                      history.replace('/install');
-                    }
-                  }
-                  history.push('/projects');
-                });
-            }
-            setComplete(true);
-          }}
-        />
-      </LoginWrapper>
-    </Container>
-  );
-};
-
-export default Install;
--- a/frontend/src/Profile/index.tsx
+++ b/frontend/src/Profile/index.tsx
@@ -3,15 +3,32 @@ import styled from 'styled-components/macro';
 import GlobalTopNavbar from 'App/TopNavbar';
 import { getAccessToken } from 'shared/utils/accessToken';
 import Settings from 'shared/components/Settings';
-import { useMeQuery, 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;
+  height: 100%;
+  background: #262c49;
+`;

 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(() => {
@@ -59,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
@@ -5,7 +5,6 @@ import { TaskMetaFilters, TaskMeta, TaskMetaMatch, DueDateFilterType } from 'sha
 import Input from 'shared/components/ControlledInput';
 import { Popup, usePopup } from 'shared/components/PopupMenu';
 import produce from 'immer';
-import moment from 'moment';
 import { mixin } from 'shared/utils/styles';
 import Member from 'shared/components/Member';

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

@@ -72,7 +71,7 @@ export const ActionItem = styled.li`
  align-items: center;
  font-size: 14px;
  &:hover {
-    background: rgb(115, 103, 240);
+    background: ${props => props.theme.colors.primary};
  }
 `;

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

 const ActionItemSeparator = styled.li`
-  color: rgba(${props => props.theme.colors.text.primary}, 0.4);
+  color: ${props => mixin.rgba(props.theme.colors.text.primary, 0.4)};
  font-size: 12px;
  padding-left: 4px;
  padding-right: 4px;
--- a/frontend/src/Projects/Project/Board/FilterStatus.tsx
+++ b/frontend/src/Projects/Project/Board/FilterStatus.tsx
@@ -30,7 +30,7 @@ export const ActionItem = styled.li`
  align-items: center;
  font-size: 14px;
  &:hover {
-    background: rgb(115, 103, 240);
+    background: ${props => props.theme.colors.primary};
  }
  &:hover ${ActionExtraMenuContainer} {
    visibility: visible;
@@ -69,11 +69,11 @@ export const ActionExtraMenuItem = styled.li`
  align-items: center;
  font-size: 14px;
  &:hover {
-    background: rgb(115, 103, 240);
+    background: rgb(${props => props.theme.colors.primary});
  }
 `;
 const ActionExtraMenuSeparator = styled.li`
-  color: rgba(${props => props.theme.colors.text.primary}, 0.4);
+  color: ${props => props.theme.colors.text.primary};
  font-size: 12px;
  padding-left: 4px;
  padding-right: 4px;
--- a/frontend/src/Projects/Project/Board/SortPopup.tsx
+++ b/frontend/src/Projects/Project/Board/SortPopup.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
-import { TaskSorting, TaskSortingType, TaskSortingDirection } from 'shared/components/Lists';
+import { TaskSorting, TaskSortingType, TaskSortingDirection } from 'shared/utils/sorting';
+import { mixin } from 'shared/utils/styles';

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

@@ -29,7 +30,7 @@ export const ActionTitle = styled.span`
 `;

 const ActionItemSeparator = styled.li`
-  color: rgba(${props => props.theme.colors.text.primary}, 0.4);
+  color: ${props => mixin.rgba(props.theme.colors.text.primary, 0.4)};
  font-size: 12px;
  padding-left: 4px;
  padding-right: 4px;
@@ -73,6 +74,11 @@ const SortPopup: React.FC<SortPopupProps> = ({ sorting, onChangeTaskSorting }) =
      >
        <ActionTitle>Task title</ActionTitle>
      </ActionItem>
+      <ActionItem
+        onClick={() => handleSetSorting({ type: TaskSortingType.COMPLETE, direction: TaskSortingDirection.ASC })}
+      >
+        <ActionTitle>Complete</ActionTitle>
+      </ActionItem>
    </ActionsList>
  );
 };
--- a/frontend/src/Projects/Project/Board/index.tsx
+++ b/frontend/src/Projects/Project/Board/index.tsx
@@ -8,6 +8,7 @@ import {
  useSetTaskCompleteMutation,
  useToggleTaskLabelMutation,
  useFindProjectQuery,
+  useSortTaskGroupMutation,
  useUpdateTaskGroupNameMutation,
  useUpdateTaskNameMutation,
  useCreateTaskMutation,
@@ -21,6 +22,10 @@ import {
  useUnassignTaskMutation,
  useUpdateTaskDueDateMutation,
  FindProjectQuery,
+  useDuplicateTaskGroupMutation,
+  DuplicateTaskGroupMutation,
+  DuplicateTaskGroupDocument,
+  useDeleteTaskGroupTasksMutation,
 } from 'shared/generated/graphql';

 import QuickCardEditor from 'shared/components/QuickCardEditor';
@@ -33,10 +38,8 @@ import SimpleLists, {
  TaskMeta,
  TaskMetaMatch,
  TaskMetaFilters,
-  TaskSorting,
-  TaskSortingType,
-  TaskSortingDirection,
 } 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';
@@ -44,11 +47,16 @@ 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) => {
@@ -71,7 +79,7 @@ const renderMetaFilters = (filters: TaskMetaFilters, onClose: MetaFilterCloseFn)
  const filterChips = [];
  if (filters.taskName) {
    filterChips.push(
-      <Chip
+      <FilterChip
        key="task-name"
        label={`Title: ${filters.taskName.name}`}
        onClose={() => onClose(TaskMeta.TITLE, 'task-name')}
@@ -81,12 +89,16 @@ const renderMetaFilters = (filters: TaskMetaFilters, onClose: MetaFilterCloseFn)

  if (filters.dueDate) {
    filterChips.push(
-      <Chip key="due-date" label={filters.dueDate.label} onClose={() => onClose(TaskMeta.DUE_DATE, 'due-date')} />,
+      <FilterChip
+        key="due-date"
+        label={filters.dueDate.label}
+        onClose={() => onClose(TaskMeta.DUE_DATE, 'due-date')}
+      />,
    );
  }
  for (const memberFilter of filters.members) {
    filterChips.push(
-      <Chip
+      <FilterChip
        key={`member-${memberFilter.id}`}
        label={`Member: ${memberFilter.username}`}
        onClose={() => onClose(TaskMeta.MEMBER, memberFilter.id)}
@@ -95,7 +107,7 @@ const renderMetaFilters = (filters: TaskMetaFilters, onClose: MetaFilterCloseFn)
  }
  for (const labelFilter of filters.labels) {
    filterChips.push(
-      <Chip
+      <FilterChip
        key={`label-${labelFilter.id}`}
        label={labelFilter.name === '' ? 'Label' : `Label: ${labelFilter.name}`}
        color={labelFilter.color}
@@ -124,14 +136,14 @@ const ProjectActionWrapper = styled.div<{ disabled?: boolean }>`
  display: flex;
  align-items: center;
  font-size: 15px;
-  color: rgba(${props => props.theme.colors.text.primary});
+  color: ${props => props.theme.colors.text.primary};

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

  &:hover {
-    color: rgba(${props => props.theme.colors.text.secondary});
+    color: ${props => props.theme.colors.text.secondary};
  }
  ${props =>
    props.disabled &&
@@ -255,6 +267,11 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
  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>(
@@ -307,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();
@@ -452,7 +499,7 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
                      }}
                    />
                  </Popup>,
-                  185,
+                  { width: 185 },
                );
              }}
            >
@@ -471,7 +518,7 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
                      }}
                    />
                  </Popup>,
-                  185,
+                  { width: 185 },
                );
              }}
            >
@@ -491,7 +538,7 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
                    labels={labelsRef}
                    members={membersRef}
                  />,
-                  200,
+                  { width: 200 },
                );
              }}
            >
@@ -616,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();
+                }}
+              />,
            );
          }}
        />
--- a/frontend/src/Projects/Project/Details/index.tsx
+++ b/frontend/src/Projects/Project/Details/index.tsx
@@ -290,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',
@@ -323,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,
                      },
                    },
                  },
@@ -500,6 +505,7 @@ const Details: React.FC<DetailsProps> = ({
                      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,6 +3,7 @@ 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 {
  useParams,
@@ -15,11 +16,12 @@ import {
 } from 'react-router-dom';
 import {
  useUpdateProjectMemberRoleMutation,
-  useCreateProjectMemberMutation,
+  useInviteProjectMembersMutation,
  useDeleteProjectMemberMutation,
  useToggleTaskLabelMutation,
  useUpdateProjectNameMutation,
  useFindProjectQuery,
+  useDeleteInvitedProjectMemberMutation,
  useUpdateTaskNameMutation,
  useCreateTaskMutation,
  useDeleteTaskMutation,
@@ -37,12 +39,21 @@ 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 LabelManagerEditor from './LabelManagerEditor';
+import { mixin } from '../../shared/utils/styles';

 const CARD_LABEL_VARIANT_STORAGE_KEY = 'card_label_variant';

+const RFC2822_EMAIL = /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/;
+
 const useStateWithLocalStorage = (localStorageKey: string): [string, React.Dispatch<React.SetStateAction<string>>] => {
  const [value, setValue] = React.useState<string>(localStorage.getItem(localStorageKey) || '');

@@ -61,7 +72,7 @@ const UserMember = styled(Member)`
  padding: 4px 0;
  cursor: pointer;
  &:hover {
-    background: rgba(${props => props.theme.colors.bg.primary}, 0.4);
+    background: ${props => mixin.rgba(props.theme.colors.bg.primary, 0.4)};
  }
  border-radius: 6px;
 `;
@@ -70,29 +81,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>
  );
 };
@@ -135,11 +416,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 },
  });

@@ -157,14 +457,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 },
      );
@@ -205,6 +527,9 @@ const Project = () => {
      </>
    );
  }
+  if (error) {
+    history.push('/projects');
+  }
  if (data) {
    labelsRef.current = data.findProject.labels;

@@ -221,6 +546,10 @@ const Project = () => {
            deleteProjectMember({ variables: { userID, projectID } });
            hidePopup();
          }}
+          onRemoveInvitedFromBoard={email => {
+            deleteInvitedProjectMember({ variables: { projectID, email } });
+            hidePopup();
+          }}
          onSaveProjectName={projectName => {
            updateProjectName({ variables: { projectID, name: projectName } });
          }}
@@ -228,8 +557,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}
@@ -240,8 +571,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`} />} />
@@ -270,10 +602,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
@@ -20,33 +20,8 @@ import Input from 'shared/components/Input';
 import updateApolloCache from 'shared/utils/cache';
 import produce from 'immer';
 import NOOP from 'shared/utils/noop';
-
-const EmptyStateContent = styled.div`
-  display: flex;
-  justy-content: center;
-  align-items: center;
-  flex-direction: column;
-`;
-
-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%;
-`;
+import theme from 'App/ThemeStyles';
+import { mixin } from '../shared/utils/styles';

 type CreateTeamData = { teamName: string };

@@ -56,6 +31,10 @@ type CreateTeamFormProps = {

 const CreateTeamFormContainer = styled.form``;

+const CreateTeamButton = styled(Button)`
+  width: 100%;
+`;
+
 const CreateTeamForm: React.FC<CreateTeamFormProps> = ({ onCreateTeam }) => {
  const { register, handleSubmit } = useForm<CreateTeamData>();
  const createTeam = (data: CreateTeamData) => {
@@ -77,7 +56,7 @@ const CreateTeamForm: React.FC<CreateTeamFormProps> = ({ onCreateTeam }) => {
 };

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

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

 const ProjectsContainer = styled.div`
@@ -209,13 +188,6 @@ const ProjectsContainer = styled.div`
  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;
@@ -223,10 +195,6 @@ const AddTeamButton = styled(Button)`
  right: 12px;
 `;

-const CreateFirstTeam = styled(Button)`
-  margin-top: 8px;
-`;
-
 type ShowNewProject = {
  open: boolean;
  initialTeamID: null | string;
@@ -260,17 +228,20 @@ const Projects = () => {
    },
  });
  if (loading) {
-    return (
-      <>
-        <span>loading</span>
-      </>
-    );
+    return <GlobalTopNavbar onSaveProjectName={NOOP} projectID={null} name={null} />;
  }

-  const colors = ['#e362e3', '#7a6ff0', '#37c5ab', '#aa62e3', '#e8384f'];
+  const colors = theme.colors.multiColors;
  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();
@@ -282,7 +253,7 @@ const Projects = () => {
          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();
@@ -323,39 +294,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}>
@@ -409,7 +376,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/Register/Styles.ts
+++ b/frontend/src/Register/Styles.ts
@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100vw;
+  height: 100vh;
+`;
+
+export const LoginWrapper = styled.div`
+  width: 60%;
+`;
--- a/frontend/src/Register/index.tsx
+++ b/frontend/src/Register/index.tsx
@@ -0,0 +1,62 @@
+import React, { useState } from 'react';
+import axios from 'axios';
+import Register from 'shared/components/Register';
+import { useHistory, useLocation } from 'react-router';
+import * as QueryString from 'query-string';
+import { toast } from 'react-toastify';
+import { Container, LoginWrapper } from './Styles';
+
+const UsersRegister = () => {
+  const history = useHistory();
+  const location = useLocation();
+  const [registered, setRegistered] = useState(false);
+  const params = QueryString.parse(location.search);
+  return (
+    <Container>
+      <LoginWrapper>
+        <Register
+          registered={registered}
+          onSubmit={(data, setComplete, setError) => {
+            if (data.password !== data.password_confirm) {
+              setError('password', { type: 'error', message: 'Passwords must match' });
+              setError('password_confirm', { type: 'error', message: 'Passwords must match' });
+            } else {
+              // TODO: change to fetch?
+              fetch('/auth/register', {
+                method: 'POST',
+                body: JSON.stringify({
+                  user: {
+                    username: data.username,
+                    roleCode: 'admin',
+                    email: data.email,
+                    password: data.password,
+                    initials: data.initials,
+                    fullname: data.fullname,
+                  },
+                }),
+              })
+                .then(async x => {
+                  const response = await x.json();
+                  const { setup } = response;
+                  console.log(response);
+                  if (setup) {
+                    history.replace(`/confirm?confirmToken=xxxx`);
+                  } else if (params.confirmToken) {
+                    history.replace(`/confirm?confirmToken=${params.confirmToken}`);
+                  } else {
+                    setRegistered(true);
+                  }
+                })
+                .catch(() => {
+                  toast('There was an issue trying to register');
+                });
+            }
+            setComplete(true);
+          }}
+        />
+      </LoginWrapper>
+    </Container>
+  );
+};
+
+export default UsersRegister;
--- a/frontend/src/Teams/Members/index.tsx
+++ b/frontend/src/Teams/Members/index.tsx
@@ -21,6 +21,7 @@ import TaskAssignee from 'shared/components/TaskAssignee';
 import Member from 'shared/components/Member';
 import ControlledInput from 'shared/components/ControlledInput';
 import NOOP from 'shared/utils/noop';
+import { mixin } from 'shared/utils/styles';

 const MemberListWrapper = styled.div`
  flex: 1 1;
@@ -34,7 +35,7 @@ const UserMember = styled(Member)`
  padding: 4px 0;
  cursor: pointer;
  &:hover {
-    background: rgba(${props => props.theme.colors.bg.primary}, 0.4);
+    background: ${props => mixin.rgba(props.theme.colors.bg.primary, 0.4)};
  }
  border-radius: 6px;
 `;
@@ -119,12 +120,12 @@ export const MiniProfileActionItem = styled.span<{ disabled?: boolean }>`
      ? css`
          user-select: none;
          pointer-events: none;
-          color: rgba(${props.theme.colors.text.primary}, 0.4);
+          color: ${mixin.rgba(props.theme.colors.text.primary, 0.4)};
        `
      : css`
          cursor: pointer;
          &:hover {
-            background: rgb(115, 103, 240);
+            background: ${props.theme.colors.primary};
          }
        `}
 `;
@@ -135,7 +136,7 @@ export const Content = styled.div`

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

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

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

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

 export const RemoveMemberButton = styled(Button)`
@@ -305,14 +306,14 @@ const MemberItemOption = styled(Button)`
 `;

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

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

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

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

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

--- a/frontend/src/Teams/Projects/index.tsx
+++ b/frontend/src/Teams/Projects/index.tsx
@@ -8,6 +8,7 @@ import {
 } from 'shared/generated/graphql';
 import { Link } from 'react-router-dom';
 import Input from 'shared/components/Input';
+import theme from 'App/ThemeStyles';

 const FilterSearch = styled(Input)`
  margin: 0;
@@ -34,11 +35,11 @@ const FilterTabItem = styled.li`
  font-weight: 700;
  text-decoration: none;
  padding: 6px 8px;
-  color: rgba(${props => props.theme.colors.text.primary});
+  color: ${props => props.theme.colors.text.primary};
  &:hover {
    border-radius: 6px;
-    background: rgba(${props => props.theme.colors.primary});
-    color: rgba(${props => props.theme.colors.text.secondary});
+    background: ${props => props.theme.colors.primary};
+    color: ${props => props.theme.colors.text.secondary};
  }
 `;

@@ -55,7 +56,7 @@ const FilterTabTitle = styled.h2`
 `;

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

-const colors = ['#e362e3', '#7a6ff0', '#37c5ab', '#aa62e3', '#e8384f'];
+const colors = theme.colors.multiColors;

 type TeamProjectsProps = {
  teamID: string;
--- a/frontend/src/Teams/index.tsx
+++ b/frontend/src/Teams/index.tsx
@@ -57,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>
@@ -85,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) {
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@@ -8,15 +8,28 @@ import { HttpLink } from 'apollo-link-http';
 import { onError } from 'apollo-link-error';
 import { enableMapSet } from 'immer';
 import { ApolloLink, Observable, fromPromise } from 'apollo-link';
-import moment from 'moment';
+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();

-moment.updateLocale('en', {
+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)
--- a/frontend/src/outline.d.ts
+++ b/frontend/src/outline.d.ts
--- a/frontend/src/shared/components/AddList/AddList.stories.tsx
+++ b/frontend/src/shared/components/AddList/AddList.stories.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { action } from '@storybook/addon-actions';
+import theme from 'App/ThemeStyles';
 import AddList from '.';

 export default {
@@ -7,7 +8,7 @@ export default {
  title: 'AddList',
  parameters: {
    backgrounds: [
-      { name: 'gray', value: '#262c49', default: true },
+      { name: 'gray', value: theme.colors.bg.secondary, default: true },
      { name: 'white', value: '#ffffff' },
    ],
  },
--- a/frontend/src/shared/components/AddList/Styles.ts
+++ b/frontend/src/shared/components/AddList/Styles.ts
@@ -67,7 +67,7 @@ export const ListNameEditorWrapper = styled.div`
  display: flex;
 `;
 export const ListNameEditor = styled(TextareaAutosize)`
-  background-color: ${props => mixin.lighten('#262c49', 0.05)};
+  background-color: ${props => mixin.lighten(props.theme.colors.bg.secondary, 0.05)};
  border: none;
  box-shadow: inset 0 0 0 2px #0079bf;
  transition: margin 85ms ease-in, background 85ms ease-in;
@@ -91,7 +91,7 @@ export const ListNameEditor = styled(TextareaAutosize)`

  color: #c2c6dc;
  l &:focus {
-    background-color: ${props => mixin.lighten('#262c49', 0.05)};
+    background-color: ${props => mixin.lighten(props.theme.colors.bg.secondary, 0.05)};
  }
 `;

--- 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
@@ -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
@@ -8,6 +8,7 @@ import { RoleCode, useUpdateUserRoleMutation } from 'shared/generated/graphql';
 import Input from 'shared/components/Input';
 import Button from 'shared/components/Button';
 import NOOP from 'shared/utils/noop';
+import { mixin } from 'shared/utils/styles';

 export const RoleCheckmark = styled(Checkmark)`
  padding-left: 4px;
@@ -58,12 +59,12 @@ export const MiniProfileActionItem = styled.span<{ disabled?: boolean }>`
      ? css`
          user-select: none;
          pointer-events: none;
-          color: rgba(${props.theme.colors.text.primary}, 0.4);
+          color: ${mixin.rgba(props.theme.colors.text.primary, 0.4)};
        `
      : css`
          cursor: pointer;
          &:hover {
-            background: rgb(115, 103, 240);
+            background: ${props.theme.colors.primary};
          }
        `}
 `;
@@ -74,7 +75,7 @@ export const Content = styled.div`

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

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

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

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

 export const RemoveMemberButton = styled(Button)`
@@ -104,8 +105,8 @@ 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;
 };
@@ -333,14 +334,14 @@ const MemberItemOption = styled(Button)`
 `;

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

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

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

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

 const MemberListHeader = styled.div`
@@ -377,12 +378,12 @@ const MemberListHeader = styled.div`
 `;
 const ListTitle = styled.h3`
  font-size: 18px;
-  color: rgba(${props => props.theme.colors.text.secondary});
+  color: ${props => props.theme.colors.text.secondary};
  margin-bottom: 12px;
 `;
 const ListDesc = styled.span`
  font-size: 16px;
-  color: rgba(${props => props.theme.colors.text.primary});
+  color: ${props => props.theme.colors.text.primary};
 `;
 const FilterSearch = styled(Input)`
  margin: 0;
@@ -443,17 +444,17 @@ const TabNavItemButton = styled.button<{ active: boolean }>`
  width: 100%;
  position: relative;

-  color: ${props => (props.active ? 'rgba(115, 103, 240)' : '#c2c6dc')};
+  color: ${props => (props.active ? `${props.theme.colors.secondary}` : props.theme.colors.text.primary)};
  &:hover {
-    color: rgba(115, 103, 240);
+    color: ${props => `${props.theme.colors.primary}`};
  }
  &:hover svg {
-    fill: rgba(115, 103, 240);
+    fill: ${props => props.theme.colors.primary};
  }
 `;
 const TabItemUser = styled(User)<{ active: boolean }>`
-fill: ${props => (props.active ? 'rgba(115, 103, 240)' : '#c2c6dc')}
-stroke: ${props => (props.active ? 'rgba(115, 103, 240)' : '#c2c6dc')}
+fill: ${props => (props.active ? `${props.theme.colors.primary}` : props.theme.colors.text.primary)}
+stroke: ${props => (props.active ? `${props.theme.colors.primary}` : props.theme.colors.text.primary)}
 `;

 const TabNavItemSpan = styled.span`
@@ -470,8 +471,8 @@ const TabNavLine = styled.span<{ top: number }>`
  transform: scaleX(1);
  top: ${props => props.top}px;

-  background: linear-gradient(30deg, rgba(115, 103, 240), rgba(115, 103, 240));
-  box-shadow: 0 0 8px 0 rgba(115, 103, 240);
+  background: linear-gradient(30deg, ${props => props.theme.colors.primary}, ${props => props.theme.colors.primary});
+  box-shadow: 0 0 8px 0 ${props => props.theme.colors.primary};
  display: block;
  position: absolute;
  transition: all 0.2s ease;
@@ -530,8 +531,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> = ({
@@ -540,7 +543,9 @@ const Admin: React.FC<AdminProps> = ({
  onUpdateUserPassword,
  canInviteUser,
  onDeleteUser,
+  onDeleteInvitedUser,
  onInviteUser,
+  invitedUsers,
  users,
 }) => {
  const warning =
@@ -557,6 +562,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();
@@ -576,7 +582,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.
@@ -634,6 +640,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/index.tsx
+++ b/frontend/src/shared/components/Button/index.tsx
@@ -1,14 +1,20 @@
 import React, { useRef } from 'react';
 import styled, { css } from 'styled-components/macro';
+import { mixin } from '../../utils/styles';

-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;
  justify-content: ${props => props.justifyTextContent};
  transition: all 0.2s ease;
  font-size: ${props => props.fontSize};
-  color: rgba(${props => props.theme.colors.text.secondary});
+  color: ${props => props.theme.colors.text.secondary};
+  ${props =>
+    props.hasIcon &&
+    css`
+      padding-left: 4px;
+    `}
 `;

 const Base = styled.button<{ color: string; disabled: boolean }>`
@@ -18,6 +24,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,28 +36,45 @@ const Base = styled.button<{ color: string; disabled: boolean }>`
    `}
 `;

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

 const Flat = styled(Base)`
  background: transparent;
  &:hover {
-    background: rgba(${props => props.theme.colors[props.color]}, 0.2);
+    background: ${props => mixin.rgba(props.theme.colors[props.color], 0.2)};
  }
 `;

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

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

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

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

@@ -104,12 +129,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 +147,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 +167,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 +186,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,14 +1,12 @@
 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 }>`
-  box-shadow: 0 0 0 2px rgba(${props => props.theme.colors.bg.secondary}),
-    inset 0 0 0 1px rgba(${props => props.theme.colors.bg.secondary}, 0.07);
+  box-shadow: 0 0 0 2px ${props => props.theme.colors.bg.secondary},
+    inset 0 0 0 1px ${props => mixin.rgba(props.theme.colors.bg.secondary, 0.07)};
  z-index: ${props => props.zIndex};
  position: relative;
 `;
@@ -16,11 +14,13 @@ export const ChecklistIcon = styled(CheckSquareOutline)<{ color: 'success' | 'no
  ${props =>
    props.color === 'success' &&
    css`
-      fill: rgba(${props.theme.colors.success});
-      stroke: rgba(${props.theme.colors.success});
+      fill: ${props.theme.colors.success};
+      stroke: ${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;
@@ -38,7 +38,7 @@ export const EditorTextarea = styled(TextareaAutosize)`
  padding: 0;
  font-size: 14px;
  line-height: 18px;
-  color: rgba(${props => props.theme.colors.text.primary});
+  color: ${props => props.theme.colors.text.primary};
  &:focus {
    border: none;
    outline: none;
@@ -89,7 +89,7 @@ export const ListCardBadgeText = styled.span<{ color?: 'success' | 'normal' }>`
  padding: 0 4px 0 6px;
  vertical-align: top;
  white-space: nowrap;
-  ${props => props.color === 'success' && `color: rgba(${props.theme.colors.success});`}
+  ${props => props.color === 'success' && `color: ${props.theme.colors.success};`}
 `;

 export const ListCardContainer = styled.div<{ isActive: boolean; editable: boolean }>`
@@ -101,7 +101,9 @@ export const ListCardContainer = styled.div<{ isActive: boolean; editable: boole
  position: relative;

  background-color: ${props =>
-    props.isActive && !props.editable ? mixin.darken('#262c49', 0.1) : `rgba(${props.theme.colors.bg.secondary})`};
+    props.isActive && !props.editable
+      ? mixin.darken(props.theme.colors.bg.secondary, 0.1)
+      : `${props.theme.colors.bg.secondary}`};
 `;

 export const ListCardInnerContainer = styled.div`
@@ -147,6 +149,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 +185,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;
  }
@@ -218,7 +223,7 @@ export const ListCardOperation = styled.span`
  top: 2px;
  z-index: 100;
  &:hover {
-    background-color: ${props => mixin.darken('#262c49', 0.25)};
+    background-color: ${props => mixin.darken(props.theme.colors.bg.secondary, 0.25)};
  }
 `;

@@ -230,7 +235,7 @@ export const CardTitle = styled.span`
  word-wrap: break-word;
  line-height: 18px;
  font-size: 14px;
-  color: rgba(${props => props.theme.colors.text.primary});
+  color: ${props => props.theme.colors.text.primary};

  display: flex;
  align-items: center;
@@ -243,7 +248,7 @@ export const CardMembers = styled.div`
 `;

 export const CompleteIcon = styled(CheckCircle)`
-  fill: rgba(${props => props.theme.colors.success});
+  fill: ${props => props.theme.colors.success};
  margin-right: 4px;
  flex-shrink: 0;
 `;
--- 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, faEye } from '@fortawesome/free-regular-svg-icons';
+import { Pencil, Eye, List } from 'shared/icons';
 import {
  EditorTextarea,
  CardMember,
@@ -20,6 +18,7 @@ import {
  ListCardLabels,
  ListCardLabel,
  ListCardLabelText,
+  ListCardLabelsWrapper,
  ListCardOperation,
  CardTitle,
  CardMembers,
@@ -154,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} />}
@@ -214,18 +216,18 @@ const Card = React.forwardRef(
            <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 && (
--- 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
@@ -22,7 +22,7 @@ export default {
 const Container = styled.div`
  width: 552px;
  margin: 25px;
-  border: 1px solid rgba(${props => props.theme.colors.bg.primary});
+  border: 1px solid ${props => props.theme.colors.bg.primary};
 `;

 const defaultItems = [
--- a/frontend/src/shared/components/Checklist/index.tsx
+++ b/frontend/src/shared/components/Checklist/index.tsx
@@ -12,6 +12,7 @@ import Button from 'shared/components/Button';
 import TextareaAutosize from 'react-autosize-textarea';
 import Control from 'react-select/src/components/Control';
 import useOnOutsideClick from 'shared/hooks/onOutsideClick';
+import { mixin } from 'shared/utils/styles';

 const Wrapper = styled.div`
  margin-bottom: 24px;
@@ -25,7 +26,7 @@ const WindowTitle = styled.div`

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

@@ -38,7 +39,7 @@ const WindowChecklistTitle = styled.div`

 const WindowTitleText = styled.h3`
  cursor: pointer;
-  color: rgba(${props => props.theme.colors.text.primary});
+  color: ${props => props.theme.colors.text.primary};
  margin: 6px 0;
  display: inline-block;
  width: auto;
@@ -73,7 +74,7 @@ const ChecklistProgressPercent = styled.span`
 `;

 const ChecklistProgressBar = styled.div`
-  background: rgba(${props => props.theme.colors.bg.primary});
+  background: ${props => props.theme.colors.bg.primary};
  border-radius: 4px;
  clear: both;
  height: 8px;
@@ -83,7 +84,7 @@ const ChecklistProgressBar = styled.div`
 `;
 const ChecklistProgressBarCurrent = styled.div<{ width: number }>`
  width: ${props => props.width}%;
-  background: rgba(${props => (props.width === 100 ? props.theme.colors.success : props.theme.colors.primary)});
+  background: ${props => (props.width === 100 ? props.theme.colors.success : props.theme.colors.primary)};
  bottom: 0;
  left: 0;
  position: absolute;
@@ -111,7 +112,7 @@ const ChecklistIcon = styled.div`
 `;

 const ChecklistItemCheckedIcon = styled(CheckSquare)`
-  fill: rgba(${props => props.theme.colors.primary});
+  fill: ${props => props.theme.colors.primary};
 `;

 const ChecklistItemDetails = styled.div`
@@ -133,7 +134,7 @@ const ChecklistItemTextControls = styled.div`
 `;

 const ChecklistItemText = styled.span<{ complete: boolean }>`
-  color: ${props => (props.complete ? '#5e6c84' : `rgba(${props.theme.colors.text.primary})`)};
+  color: ${props => (props.complete ? '#5e6c84' : `${props.theme.colors.text.primary}`)};
  ${props => props.complete && 'text-decoration: line-through;'}
  line-height: 20px;
  font-size: 16px;
@@ -155,14 +156,14 @@ const ControlButton = styled.div`
  margin-left: 4px;
  padding: 4px 6px;
  border-radius: 6px;
-  background-color: rgba(${props => props.theme.colors.bg.primary}, 0.8);
+  background-color: ${props => mixin.rgba(props.theme.colors.bg.primary, 0.8)};
  display: flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  &:hover {
-    background-color: rgba(${props => props.theme.colors.primary}, 1);
+    background-color: ${props => mixin.rgba(props.theme.colors.primary, 1)};
  }
 `;

@@ -189,27 +190,27 @@ export const ChecklistNameEditor = styled(TextareaAutosize)`
  padding: 8px 12px;
  font-size: 16px;
  line-height: 20px;
-  border: 1px solid rgba(${props => props.theme.colors.primary});
+  border: 1px solid ${props => props.theme.colors.primary};
  border-radius: 3px;
-  color: rgba(${props => props.theme.colors.text.primary});
+  color: ${props => props.theme.colors.text.primary};

-  border-color: rgba(${props => props.theme.colors.border});
-  background-color: rgba(${props => props.theme.colors.bg.primary}, 0.4);
+  border-color: ${props => props.theme.colors.border};
+  background-color: ${props => mixin.rgba(props.theme.colors.bg.primary, 0.4)};
  &:focus {
-    border-color: rgba(${props => props.theme.colors.primary});
+    border-color: ${props => props.theme.colors.primary};
  }
 `;

 const AssignUserButton = styled(AccountPlus)`
-  fill: rgba(${props => props.theme.colors.text.primary});
+  fill: ${props => props.theme.colors.text.primary};
 `;

 const ClockButton = styled(Clock)`
-  fill: rgba(${props => props.theme.colors.text.primary});
+  fill: ${props => props.theme.colors.text.primary};
 `;

 const TrashButton = styled(Trash)`
-  fill: rgba(${props => props.theme.colors.text.primary});
+  fill: ${props => props.theme.colors.text.primary};
 `;

 const ChecklistItemWrapper = styled.div<{ ref: any }>`
@@ -224,7 +225,7 @@ const ChecklistItemWrapper = styled.div<{ ref: any }>`
  }

  &:hover {
-    background-color: rgba(${props => props.theme.colors.bg.primary}, 0.4);
+    background-color: ${props => mixin.rgba(props.theme.colors.bg.primary, 0.4)};
  }
  &:hover ${ControlButton} {
    opacity: 1;
@@ -246,10 +247,10 @@ const CancelButton = styled.div`
  cursor: pointer;
  margin: 5px;
  & svg {
-    fill: rgba(${props => props.theme.colors.text.primary});
+    fill: ${props => props.theme.colors.text.primary};
  }
  &:hover svg {
-    fill: rgba(${props => props.theme.colors.text.secondary});
+    fill: ${props => props.theme.colors.text.secondary};
  }
 `;

@@ -265,7 +266,7 @@ const EditableDeleteButton = styled.button`
  border-radius: 3px;

  &:hover {
-    background: rgba(${props => props.theme.colors.primary}, 0.8);
+    background: ${props => mixin.rgba(props.theme.colors.primary, 0.8)};
  }
 `;

--- a/frontend/src/shared/components/Chip/index.tsx
+++ b/frontend/src/shared/components/Chip/index.tsx
@@ -7,11 +7,10 @@ const LabelText = styled.span`
  display: flex;
  align-items: center;
  justify-content: center;
-  color: rgba(${props => props.theme.colors.text.primary});
+  color: ${props => props.theme.colors.text.primary};
 `;

 const Container = styled.div<{ color?: string }>`
-  margin: 0.75rem;
  min-height: 26px;
  min-width: 26px;
  font-size: 0.8rem;
@@ -25,11 +24,11 @@ const Container = styled.div<{ color?: string }>`
      ? css`
          background: ${props.color};
          & ${LabelText} {
-            color: rgba(${props.theme.colors.text.secondary});
+            color: ${props.theme.colors.text.secondary};
          }
        `
      : css`
-          background: rgba(${props.theme.colors.bg.primary});
+          background: ${props.theme.colors.bg.primary};
        `}
 `;

@@ -53,11 +52,12 @@ type ChipProps = {
  label: string;
  onClose?: () => void;
  color?: string;
+  className?: string;
 };

-const Chip: React.FC<ChipProps> = ({ label, onClose, color }) => {
+const Chip: React.FC<ChipProps> = ({ label, onClose, color, className }) => {
  return (
-    <Container color={color}>
+    <Container className={className} color={color}>
      <LabelText>{label}</LabelText>
      {onClose && (
        <CloseButton onClick={() => onClose()}>
--- a/frontend/src/shared/components/Confirm/Styles.ts
+++ b/frontend/src/shared/components/Confirm/Styles.ts
@@ -0,0 +1,103 @@
+import styled from 'styled-components';
+import Button from 'shared/components/Button';
+
+export const Wrapper = styled.div`
+  background: #eff2f7;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+`;
+
+export const Column = styled.div`
+  width: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+export const LoginFormWrapper = styled.div`
+  background: #10163a;
+  width: 100%;
+`;
+
+export const LoginFormContainer = styled.div`
+  min-height: 505px;
+  padding: 2rem;
+`;
+
+export const Title = styled.h1`
+  color: #ebeefd;
+  font-size: 18px;
+  margin-bottom: 14px;
+`;
+
+export const SubTitle = styled.h2`
+  color: #c2c6dc;
+  font-size: 14px;
+  margin-bottom: 14px;
+`;
+export const Form = styled.form`
+  display: flex;
+  flex-direction: column;
+`;
+
+export const FormLabel = styled.label`
+  color: #c2c6dc;
+  font-size: 12px;
+  position: relative;
+  margin-top: 14px;
+`;
+
+export const FormTextInput = styled.input`
+  width: 100%;
+  background: #262c49;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  margin-top: 4px;
+  padding: 0.7rem 1rem 0.7rem 3rem;
+  font-size: 1rem;
+  color: #c2c6dc;
+  border-radius: 5px;
+`;
+
+export const FormIcon = styled.div`
+  top: 30px;
+  left: 16px;
+  position: absolute;
+`;
+
+export const FormError = styled.span`
+  font-size: 0.875rem;
+  color: rgb(234, 84, 85);
+`;
+
+export const LoginButton = styled(Button)``;
+
+export const ActionButtons = styled.div`
+  margin-top: 17.5px;
+  display: flex;
+  justify-content: space-between;
+`;
+
+export const RegisterButton = styled(Button)``;
+
+export const LogoTitle = styled.div`
+  font-size: 24px;
+  font-weight: 600;
+  margin-left: 12px;
+  transition: visibility, opacity, transform 0.25s ease;
+  color: #7367f0;
+`;
+
+export const LogoWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: row;
+  position: relative;
+  width: 100%;
+  padding-bottom: 16px;
+  margin-bottom: 24px;
+  color: rgb(222, 235, 255);
+  border-bottom: 1px solid rgba(65, 69, 97, 0.65);
+`;
--- a/frontend/src/shared/components/Confirm/index.tsx
+++ b/frontend/src/shared/components/Confirm/index.tsx
@@ -0,0 +1,62 @@
+import React, { useState, useEffect } from 'react';
+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,
+  LogoTitle,
+  ActionButtons,
+  RegisterButton,
+  FormError,
+  FormIcon,
+  FormLabel,
+  FormTextInput,
+  Wrapper,
+  Column,
+  LoginFormWrapper,
+  LoginFormContainer,
+  Title,
+  SubTitle,
+} from './Styles';
+
+const Confirm = ({ onConfirmUser, hasConfirmToken }: ConfirmProps) => {
+  const [hasFailed, setFailed] = useState(false);
+  const setHasFailed = () => {
+    setFailed(true);
+  };
+  useEffect(() => {
+    onConfirmUser(setHasFailed);
+  });
+  return (
+    <Wrapper>
+      <Column>
+        <AccessAccount width={275} height={250} />
+      </Column>
+      <Column>
+        <LoginFormWrapper>
+          <LoginFormContainer>
+            <LogoWrapper>
+              <Taskcafe width={42} height={42} />
+              <LogoTitle>Taskcafé</LogoTitle>
+            </LogoWrapper>
+            {hasConfirmToken ? (
+              <>
+                <Title>Confirming user...</Title>
+                {hasFailed ? <SubTitle>There was an error while confirming your user</SubTitle> : <LoadingSpinner />}
+              </>
+            ) : (
+              <>
+                <Title>There is no confirmation token</Title>
+                <SubTitle>There seems to have been an error.</SubTitle>
+              </>
+            )}
+          </LoginFormContainer>
+        </LoginFormWrapper>
+      </Column>
+    </Wrapper>
+  );
+};
+
+export default Confirm;
--- a/frontend/src/shared/components/ControlledInput/Input.stories.tsx
+++ b/frontend/src/shared/components/ControlledInput/Input.stories.tsx
@@ -19,7 +19,7 @@ export default {
 };

 const Wrapper = styled.div`
-  background: rgba(${props => props.theme.colors.bg.primary});
+  background: ${props => props.theme.colors.bg.primary};
  padding: 45px;
  margin: 25px;
  display: flex;
--- a/frontend/src/shared/components/ControlledInput/index.tsx
+++ b/frontend/src/shared/components/ControlledInput/index.tsx
@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react';
 import styled, { css } from 'styled-components/macro';
+import theme from '../../../App/ThemeStyles';

 const InputWrapper = styled.div<{ width: string }>`
  position: relative;
@@ -57,14 +58,14 @@ const InputInput = styled.input<{
    background: ${props => props.focusBg};
  }
  &:focus ~ ${InputLabel} {
-    color: rgba(115, 103, 240);
+    color: ${props => props.theme.colors.primary};
    transform: translate(-3px, -90%);
  }
  ${props =>
    props.hasValue &&
    css`
      & ~ ${InputLabel} {
-        color: rgba(115, 103, 240);
+        color: ${props.theme.colors.primary};
        transform: translate(-3px, -90%);
      }
    `}
@@ -115,8 +116,8 @@ const ControlledInput = ({
 }: ControlledInputProps) => {
  const $input = useRef<HTMLInputElement>(null);
  const [hasValue, setHasValue] = useState(false);
-  const borderColor = variant === 'normal' ? 'rgba(0, 0, 0, 0.2)' : '#414561';
-  const focusBg = variant === 'normal' ? 'rgba(38, 44, 73, )' : 'rgba(16, 22, 58, 1)';
+  const borderColor = variant === 'normal' ? 'rgba(0, 0, 0, 0.2)' : theme.colors.alternate;
+  const focusBg = variant === 'normal' ? theme.colors.bg.secondary : theme.colors.bg.primary;
  useEffect(() => {
    if (autoFocus && $input && $input.current) {
      $input.current.focus();
--- a/frontend/src/shared/components/DropdownMenu/DropdownMenu.stories.tsx
+++ b/frontend/src/shared/components/DropdownMenu/DropdownMenu.stories.tsx
@@ -2,6 +2,7 @@ import React, { createRef, useState } from 'react';
 import styled from 'styled-components';
 import { action } from '@storybook/addon-actions';
 import DropdownMenu from '.';
+import theme from '../../../App/ThemeStyles';

 export default {
  component: DropdownMenu,
@@ -10,7 +11,7 @@ export default {
    backgrounds: [
      { name: 'white', value: '#ffffff' },
      { name: 'gray', value: '#f8f8f8' },
-      { name: 'darkBlue', value: '#262c49', default: true },
+      { name: 'darkBlue', value: theme.colors.bg.secondary, default: true },
    ],
  },
 };
--- a/frontend/src/shared/components/DropdownMenu/Styles.ts
+++ b/frontend/src/shared/components/DropdownMenu/Styles.ts
@@ -59,7 +59,7 @@ export const ActionItem = styled.li`
  align-items: center;
  font-size: 14px;
  &:hover {
-    background: rgb(115, 103, 240);
+    background: ${props => props.theme.colors.primary};
  }
 `;

--- a/frontend/src/shared/components/DueDateManager/Styles.ts
+++ b/frontend/src/shared/components/DueDateManager/Styles.ts
@@ -19,23 +19,23 @@ display: flex
  }

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

  & .react-datepicker * {
@@ -75,12 +75,12 @@ display: flex
  }
  & .react-datepicker__day--selected {
    border-radius: 50%;
-    background: rgba(115, 103, 240);
+    background: ${props => props.theme.colors.primary};
    color: #fff;
  }
  & .react-datepicker__day--selected:hover {
    border-radius: 50%;
-    background: rgba(115, 103, 240);
+    background: ${props => props.theme.colors.primary};
    color: #fff;
  }
  & .react-datepicker__header {
@@ -88,7 +88,7 @@ display: flex
    border: none;
  }
  & .react-datepicker__header--time {
-    border-bottom: 1px solid rgba(${props => props.theme.colors.border});
+    border-bottom: 1px solid ${props => props.theme.colors.border};
  }

 `;
--- a/frontend/src/shared/components/DueDateManager/index.tsx
+++ b/frontend/src/shared/components/DueDateManager/index.tsx
@@ -1,5 +1,5 @@
 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 _ from 'lodash';
@@ -43,7 +43,7 @@ const HeaderSelectLabel = styled.div`
  color: #c2c6dc;

  &:hover {
-    background: rgba(115, 103, 240);
+    background: ${props => props.theme.colors.primary};
    color: #c2c6dc;
  }
 `;
@@ -60,8 +60,8 @@ const HeaderSelect = styled.select`
  appearance: none;

  &:hover {
-    background: #262c49;
-    border: 1px solid rgba(115, 103, 240);
+    background: ${props => props.theme.colors.bg.secondary};
+    border: 1px solid ${props => props.theme.colors.primary};
    outline: none !important;
    box-shadow: none;
    color: #c2c6dc;
@@ -93,7 +93,7 @@ const HeaderButton = styled.button`
  border: none;
  border-radius: 3px;
  &:hover {
-    background: rgba(115, 103, 240);
+    background: ${props => props.theme.colors.primary};
    color: #fff;
  }
 `;
@@ -110,12 +110,12 @@ const HeaderActions = styled.div`
 `;

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

  useEffect(() => {
-    const newDate = moment(startDate).format('YYYY-MM-DD');
+    const newDate = dayjs(startDate).format('YYYY-MM-DD');
    setValue('endDate', newDate);
  }, [startDate]);

@@ -135,7 +135,7 @@ const DueDateManager: React.FC<DueDateManagerProps> = ({ task, onDueDateChange,
    'December',
  ];
  const saveDueDate = (data: any) => {
-    const newDate = moment(`${data.endDate} ${moment(data.endTime).format('h:mm A')}`, '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());
    }
--- a/frontend/src/shared/components/EmptyBoard/index.tsx
+++ b/frontend/src/shared/components/EmptyBoard/index.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import styled, { keyframes } from 'styled-components/macro';
 import { mixin } from 'shared/utils/styles';
+import theme from '../../../App/ThemeStyles';

 export const BoardContainer = styled.div`
  position: relative;
@@ -34,9 +35,9 @@ export const Container = styled.div`
  white-space: nowrap;
 `;

-export const defaultBaseColor = '#10163a';
+export const defaultBaseColor = theme.colors.bg.primary;

-export const defaultHighlightColor = mixin.lighten('#10163a', 0.25);
+export const defaultHighlightColor = mixin.lighten(theme.colors.bg.primary, 0.25);

 export const skeletonKeyframes = keyframes`
  0% {
--- a/frontend/src/shared/components/Input/Input.stories.tsx
+++ b/frontend/src/shared/components/Input/Input.stories.tsx
@@ -19,7 +19,7 @@ export default {
 };

 const Wrapper = styled.div`
-  background: rgba(${props => props.theme.colors.bg.primary});
+  background: ${props => props.theme.colors.bg.primary};
  padding: 45px;
  margin: 25px;
  display: flex;
--- a/frontend/src/shared/components/Input/index.tsx
+++ b/frontend/src/shared/components/Input/index.tsx
@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react';
 import styled, { css } from 'styled-components/macro';
+import theme from '../../../App/ThemeStyles';

 const InputWrapper = styled.div<{ width: string }>`
  position: relative;
@@ -53,18 +54,18 @@ const InputInput = styled.input<{
  transition: all 0.3s ease;
  &:focus {
    box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.15);
-    border: 1px solid rgba(115, 103, 240);
+    border: 1px solid ${props => props.theme.colors.primary};
    background: ${props => props.focusBg};
  }
  &:focus ~ ${InputLabel} {
-    color: rgba(115, 103, 240);
+    color: ${props => props.theme.colors.primary};
    transform: translate(-3px, -90%);
  }
  ${props =>
    props.hasValue &&
    css`
      & ~ ${InputLabel} {
-        color: rgba(115, 103, 240);
+        color: ${props.theme.colors.primary};
        transform: translate(-3px, -90%);
      }
    `}
@@ -78,6 +79,7 @@ const Icon = styled.div`

 type InputProps = {
  variant?: 'normal' | 'alternate';
+  disabled?: boolean;
  label?: string;
  width?: string;
  floatingLabel?: boolean;
@@ -116,6 +118,7 @@ function useCombinedRefs(...refs: any) {
 const Input = React.forwardRef(
  (
    {
+      disabled = false,
      width = 'auto',
      variant = 'normal',
      type = 'text',
@@ -136,8 +139,8 @@ const Input = React.forwardRef(
    $ref: any,
  ) => {
    const [hasValue, setHasValue] = useState(defaultValue !== '');
-    const borderColor = variant === 'normal' ? 'rgba(0, 0, 0, 0.2)' : '#414561';
-    const focusBg = variant === 'normal' ? 'rgba(38, 44, 73, )' : 'rgba(16, 22, 58, 1)';
+    const borderColor = variant === 'normal' ? 'rgba(0,0,0,0.2)' : theme.colors.alternate;
+    const focusBg = variant === 'normal' ? theme.colors.bg.secondary : theme.colors.bg.primary;

    // Merge forwarded ref and internal ref in order to be able to access the ref in the useEffect
    // The forwarded ref is not accessible by itself, which is what the innerRef & combined ref is for
@@ -160,6 +163,7 @@ const Input = React.forwardRef(
          onChange={e => {
            setHasValue((e.currentTarget.value !== '' || floatingLabel) ?? false);
          }}
+          disabled={disabled}
          hasValue={hasValue}
          ref={combinedRef}
          id={id}
--- a/frontend/src/shared/components/List/Styles.ts
+++ b/frontend/src/shared/components/List/Styles.ts
@@ -1,6 +1,5 @@
 import styled, { css } from 'styled-components';
 import TextareaAutosize from 'react-autosize-textarea';
-import { mixin } from 'shared/utils/styles';

 export const Container = styled.div`
  width: 272px;
@@ -34,7 +33,7 @@ export const AddCardButton = styled.a`
  &:hover {
    color: #c2c6dc;
    text-decoration: none;
-    background: rgb(115, 103, 240);
+    background: ${props => props.theme.colors.primary};
  }
 `;
 export const Wrapper = styled.div`
@@ -73,7 +72,6 @@ export const HeaderName = styled(TextareaAutosize)`
  box-shadow: none;
  font-weight: 600;
  margin: -4px 0;
-  padding: 4px 8px;

  letter-spacing: normal;
  word-spacing: normal;
@@ -97,7 +95,7 @@ export const Header = styled.div<{ isEditing: boolean }>`
    props.isEditing &&
    css`
      & ${HeaderName} {
-        box-shadow: rgb(115, 103, 240) 0px 0px 0px 1px;
+        box-shadow: ${props.theme.colors.primary} 0px 0px 0px 1px;
      }
    `}
 `;
--- 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/Styles.ts
+++ b/frontend/src/shared/components/ListActions/Styles.ts
@@ -21,7 +21,7 @@ export const ListActionItem = styled.span`
  margin: 0 -12px;
  text-decoration: none;
  &:hover {
-    background: rgb(115, 103, 240);
+    background: ${props => props.theme.colors.primary};
  }
 `;

--- 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/Lists.stories.tsx
+++ b/frontend/src/shared/components/Lists/Lists.stories.tsx
@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { action } from '@storybook/addon-actions';
+import theme from 'App/ThemeStyles';
 import Lists from '.';

 export default {
@@ -7,7 +8,7 @@ export default {
  title: 'Lists',
  parameters: {
    backgrounds: [
-      { name: 'gray', value: '#262c49', default: true },
+      { name: 'gray', value: theme.colors.bg.secondary, default: true },
      { name: 'white', value: '#ffffff' },
    ],
  },
--- 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,7 +10,8 @@ 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';
@@ -50,7 +51,7 @@ export type TaskStatusFilter = {

 export interface TaskMetaFilterName {
  meta: TaskMeta;
-  value?: string | moment.Moment | null;
+  value?: string | dayjs.Dayjs | null;
  id?: string | null;
 }

@@ -94,127 +95,6 @@ export type TaskMetaFilters = {
  labels: Array<LabelMetaFilter>;
 };

-export enum TaskSortingType {
-  NONE,
-  DUE_DATE,
-  MEMBERS,
-  LABELS,
-  TASK_TITLE,
-}
-
-export enum TaskSortingDirection {
-  ASC,
-  DESC,
-}
-
-export type TaskSorting = {
-  type: TaskSortingType;
-  direction: TaskSortingDirection;
-};
-
-function sortString(a: string, b: string) {
-  if (a < b) {
-    return -1;
-  }
-  if (a > b) {
-    return 1;
-  }
-  return 0;
-}
-
-function sortTasks(a: Task, b: Task, taskSorting: TaskSorting) {
-  if (taskSorting.type === TaskSortingType.TASK_TITLE) {
-    if (a.name < b.name) {
-      return -1;
-    }
-    if (a.name > b.name) {
-      return 1;
-    }
-    return 0;
-  }
-  if (taskSorting.type === TaskSortingType.DUE_DATE) {
-    if (a.dueDate && !b.dueDate) {
-      return -1;
-    }
-    if (b.dueDate && !a.dueDate) {
-      return 1;
-    }
-    return moment(a.dueDate).diff(moment(b.dueDate));
-  }
-  if (taskSorting.type === TaskSortingType.LABELS) {
-    // sorts non-empty labels by name, then by empty label color name
-    let aLabels = [];
-    let bLabels = [];
-    let aLabelsEmpty = [];
-    let bLabelsEmpty = [];
-    if (a.labels) {
-      for (const aLabel of a.labels) {
-        if (aLabel.projectLabel.name && aLabel.projectLabel.name !== '') {
-          aLabels.push(aLabel.projectLabel.name);
-        } else {
-          aLabelsEmpty.push(aLabel.projectLabel.labelColor.name);
-        }
-      }
-    }
-    if (b.labels) {
-      for (const bLabel of b.labels) {
-        if (bLabel.projectLabel.name && bLabel.projectLabel.name !== '') {
-          bLabels.push(bLabel.projectLabel.name);
-        } else {
-          bLabelsEmpty.push(bLabel.projectLabel.labelColor.name);
-        }
-      }
-    }
-    aLabels = aLabels.sort((aLabel, bLabel) => sortString(aLabel, bLabel));
-    bLabels = bLabels.sort((aLabel, bLabel) => sortString(aLabel, bLabel));
-    aLabelsEmpty = aLabelsEmpty.sort((aLabel, bLabel) => sortString(aLabel, bLabel));
-    bLabelsEmpty = bLabelsEmpty.sort((aLabel, bLabel) => sortString(aLabel, bLabel));
-    if (aLabelsEmpty.length !== 0 || bLabelsEmpty.length !== 0) {
-      if (aLabelsEmpty.length > bLabelsEmpty.length) {
-        if (bLabels.length !== 0) {
-          return 1;
-        }
-        return -1;
-      }
-    }
-    if (aLabels.length < bLabels.length) {
-      return 1;
-    }
-    if (aLabels.length > bLabels.length) {
-      return -1;
-    }
-    return 0;
-  }
-  if (taskSorting.type === TaskSortingType.MEMBERS) {
-    let aMembers = [];
-    let bMembers = [];
-    if (a.assigned) {
-      for (const aMember of a.assigned) {
-        if (aMember.fullName) {
-          aMembers.push(aMember.fullName);
-        }
-      }
-    }
-    if (b.assigned) {
-      for (const bMember of b.assigned) {
-        if (bMember.fullName) {
-          bMembers.push(bMember.fullName);
-        }
-      }
-    }
-    aMembers = aMembers.sort((aMember, bMember) => sortString(aMember, bMember));
-    bMembers = bMembers.sort((aMember, bMember) => sortString(aMember, bMember));
-    if (aMembers.length < bMembers.length) {
-      return 1;
-    }
-    if (aMembers.length > bMembers.length) {
-      return -1;
-    }
-    return 0;
-  }
-  return 0;
-}
-
 function shouldStatusFilter(task: Task, filter: TaskStatusFilter) {
  if (filter.status === TaskStatus.ALL) {
    return true;
@@ -224,30 +104,30 @@ function shouldStatusFilter(task: Task, filter: TaskStatusFilter) {
    return true;
  }
  if (filter.status === TaskStatus.COMPLETE && task.completedAt && task.complete === true) {
-    const completedAt = moment(task.completedAt);
-    const REFERENCE = moment(); // fixed just for testing, use moment();
+    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, 'days')
+          .subtract(1, 'day')
          .startOf('day');
        return completedAt.isSameOrAfter(YESTERDAY, 'd');
      case TaskSince.ONE_WEEK:
        const ONE_WEEK = REFERENCE.clone()
-          .subtract(7, 'days')
+          .subtract(7, 'day')
          .startOf('day');
        return completedAt.isSameOrAfter(ONE_WEEK, 'd');
      case TaskSince.TWO_WEEKS:
        const TWO_WEEKS = REFERENCE.clone()
-          .subtract(14, 'days')
+          .subtract(14, 'day')
          .startOf('day');
        return completedAt.isSameOrAfter(TWO_WEEKS, 'd');
      case TaskSince.THREE_WEEKS:
        const THREE_WEEKS = REFERENCE.clone()
-          .subtract(21, 'days')
+          .subtract(21, 'day')
          .startOf('day');
        return completedAt.isSameOrAfter(THREE_WEEKS, 'd');
      default:
@@ -473,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
@@ -1,5 +1,5 @@
 import { TaskMetaFilters, DueDateFilterType } from 'shared/components/Lists';
-import moment from 'moment';
+import dayjs from 'dayjs';

 enum ShouldFilter {
  NO_FILTER,
@@ -24,8 +24,8 @@ export default function shouldMetaFilter(task: Task, filters: TaskMetaFilters) {
      isFiltered = shouldFilter(!(task.dueDate && task.dueDate !== null));
    }
    if (task.dueDate) {
-      const taskDueDate = moment(task.dueDate);
-      const today = moment();
+      const taskDueDate = dayjs(task.dueDate);
+      const today = dayjs();
      let start;
      let end;
      switch (filters.dueDate.type) {
@@ -40,7 +40,7 @@ export default function shouldMetaFilter(task: Task, filters: TaskMetaFilters) {
            taskDueDate.isBefore(
              today
                .clone()
-                .add(1, 'days')
+                .add(1, 'day')
                .endOf('day'),
            ),
          );
@@ -60,12 +60,12 @@ export default function shouldMetaFilter(task: Task, filters: TaskMetaFilters) {
          start = today
            .clone()
            .weekday(0)
-            .add(7, 'days')
+            .add(7, 'day')
            .startOf('day');
          end = today
            .clone()
            .weekday(6)
-            .add(7, 'days')
+            .add(7, 'day')
            .endOf('day');
          isFiltered = shouldFilter(taskDueDate.isBetween(start, end));
          break;
@@ -73,7 +73,7 @@ export default function shouldMetaFilter(task: Task, filters: TaskMetaFilters) {
          start = today.clone().startOf('day');
          end = today
            .clone()
-            .add(7, 'days')
+            .add(7, 'day')
            .endOf('day');
          isFiltered = shouldFilter(taskDueDate.isBetween(start, end));
          break;
@@ -81,7 +81,7 @@ export default function shouldMetaFilter(task: Task, filters: TaskMetaFilters) {
          start = today.clone().startOf('day');
          end = today
            .clone()
-            .add(14, 'days')
+            .add(14, 'day')
            .endOf('day');
          isFiltered = shouldFilter(taskDueDate.isBetween(start, end));
          break;
@@ -89,7 +89,7 @@ export default function shouldMetaFilter(task: Task, filters: TaskMetaFilters) {
          start = today.clone().startOf('day');
          end = today
            .clone()
-            .add(21, 'days')
+            .add(21, 'day')
            .endOf('day');
          isFiltered = shouldFilter(taskDueDate.isBetween(start, end));
          break;
--- 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 ${props => props.theme.colors[props.color]};
+    border-radius: 50%;
+    animation: 1.2s ${LoadingSpinnerKeyframes} cubic-bezier(0.5, 0, 0.5, 1) infinite;
+    border-color: ${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/Styles.ts
+++ b/frontend/src/shared/components/Login/Styles.ts
@@ -1,5 +1,6 @@
 import styled from 'styled-components';
 import Button from 'shared/components/Button';
+import { mixin } from 'shared/utils/styles';

 export const Wrapper = styled.div`
  background: #eff2f7;
@@ -68,7 +69,7 @@ export const FormIcon = styled.div`

 export const FormError = styled.span`
  font-size: 0.875rem;
-  color: rgb(234, 84, 85);
+  color: ${props => props.theme.colors.danger};
 `;

 export const LoginButton = styled(Button)``;
@@ -99,5 +100,5 @@ export const LogoWrapper = styled.div`
  padding-bottom: 16px;
  margin-bottom: 24px;
  color: rgb(222, 235, 255);
-  border-bottom: 1px solid rgba(65, 69, 97, 0.65);
+  border-bottom: 1px solid ${props => mixin.rgba(props.theme.colors.alternate, 0.65)};
 `;
--- a/frontend/src/shared/components/Login/index.tsx
+++ b/frontend/src/shared/components/Login/index.tsx
@@ -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,
@@ -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
@@ -44,6 +44,7 @@ type MemberProps = {
  showName?: boolean;
  className?: string;
  showCheckmark?: boolean;
+  size?: number;
 };

 const CardMemberWrapper = styled.div<{ ref: any }>`
@@ -63,6 +64,7 @@ const Member: React.FC<MemberProps> = ({
  showName,
  showCheckmark = false,
  className,
+  size = 28,
 }) => {
  const $targetRef = useRef<HTMLDivElement>();
  return (
@@ -77,7 +79,7 @@ const Member: React.FC<MemberProps> = ({
        }
      }}
    >
-      <TaskAssignee onMemberProfile={NOOP} 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/Styles.ts
+++ b/frontend/src/shared/components/MemberManager/Styles.ts
@@ -20,14 +20,14 @@ export const MemberManagerSearch = styled(TextareaAutosize)`
  font-size: 14px;
  font-weight: 400;

-  background: #262c49;
+  background: ${props => props.theme.colors.bgColor.secondary};
  outline: none;
-  color: #c2c6dc;
-  border-color: #414561;
+  color: ${props => props.theme.colors.text.primary};
+  border-color: ${props => props.theme.colors.border};

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

@@ -66,8 +66,8 @@ export const BoardMemberListItemContent = styled(Member)`
  color: #c2c6dc;

  &:hover {
-    background-color: rgba(${props => props.theme.colors.primary});
-    color: rgba(${props => props.theme.colors.text.secondary});
+    background-color: ${props => props.theme.colors.primary};
+    color: ${props => props.theme.colors.text.secondary};
  }
 `;

@@ -80,7 +80,7 @@ export const ProfileIcon = styled.div`
  justify-content: center;
  color: #c2c6dc;
  font-weight: 700;
-  background: rgb(115, 103, 240);
+  background: ${props => props.theme.colors.primary};
  cursor: pointer;
  margin-right: 6px;
 `;
--- a/frontend/src/shared/components/MiniProfile/Styles.ts
+++ b/frontend/src/shared/components/MiniProfile/Styles.ts
@@ -1,6 +1,7 @@
 import styled, { css } from 'styled-components';
 import Button from 'shared/components/Button';
 import { Checkmark } from 'shared/icons';
+import { mixin } from 'shared/utils/styles';

 export const RoleCheckmark = styled(Checkmark)`
  padding-left: 4px;
@@ -80,36 +81,36 @@ export const MiniProfileActionItem = styled.span<{ disabled?: boolean }>`
      ? css`
          user-select: none;
          pointer-events: none;
-          color: rgba(${props.theme.colors.text.primary}, 0.4);
+          color: ${mixin.rgba(props.theme.colors.text.primary, 0.4)};
        `
      : css`
          cursor: pointer;
          &:hover {
-            background: rgb(115, 103, 240);
+            background: ${props.theme.colors.primary};
          }
        `}
 `;

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

 export const Separator = styled.div`
  height: 1px;
-  border-top: 1px solid #414561;
+  border-top: 1px solid ${props => props.theme.colors.alternate};
  margin: 0.25rem !important;
 `;

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

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

 export const RemoveMemberButton = styled(Button)`
--- 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>
--- 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: ${props => props.theme.colors.text.primary};
+  &:hover {
+    fill: ${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/Navbar/Styles.ts
+++ b/frontend/src/shared/components/Navbar/Styles.ts
@@ -1,4 +1,5 @@
 import styled, { css } from 'styled-components';
+import { mixin } from 'shared/utils/styles';

 export const Logo = styled.div``;

@@ -9,7 +10,7 @@ export const LogoTitle = styled.div`
  font-size: 24px;
  font-weight: 600;
  transition: visibility, opacity, transform 0.25s ease;
-  color: #7367f0;
+  color: #22ff00;
 `;
 export const ActionContainer = styled.div`
  position: relative;
@@ -46,8 +47,8 @@ export const ActionButtonWrapper = styled.div<{ active?: boolean }>`
  ${props =>
    props.active &&
    css`
-      background: rgb(115, 103, 240);
-      box-shadow: 0 0 10px 1px rgba(115, 103, 240, 0.7);
+      background: ${props.theme.colors.primary};
+      box-shadow: 0 0 10px 1px ${mixin.rgba(props.theme.colors.primary, 0.7)};
    `}
  border-radius: 6px;
  cursor: pointer;
@@ -73,7 +74,7 @@ export const LogoWrapper = styled.div`
  color: rgb(222, 235, 255);
  cursor: pointer;
  transition: color 0.1s ease 0s, border 0.1s ease 0s;
-  border-bottom: 1px solid rgba(65, 69, 97, 0.65);
+  border-bottom: 1px solid ${props => mixin.rgba(props.theme.colors.alternate, 0.65)};
 `;

 export const Container = styled.aside`
@@ -87,12 +88,12 @@ export const Container = styled.aside`
  transform: translateZ(0px);
  background: #10163a;
  transition: all 0.1s ease 0s;
-  border-right: 1px solid rgba(65, 69, 97, 0.65);
+  border-right: 1px solid ${props => mixin.rgba(props.theme.colors.alternate, 0.65)};

  &:hover {
    width: 260px;
    box-shadow: rgba(0, 0, 0, 0.6) 0px 0px 50px 0px;
-    border-right: 1px solid rgba(65, 69, 97, 0);
+    border-right: 1px solid ${props => mixin.rgba(props.theme.colors.alternate, 0)};
  }
  &:hover ${LogoTitle} {
    bottom: -12px;
@@ -106,6 +107,6 @@ export const Container = styled.aside`
  }

  &:hover ${LogoWrapper} {
-    border-bottom: 1px solid rgba(65, 69, 97, 0);
+    border-bottom: 1px solid ${props => mixin.rgba(props.theme.colors.alternate, 0)};
  }
 `;
--- a/frontend/src/shared/components/NewProject/index.tsx
+++ b/frontend/src/shared/components/NewProject/index.tsx
@@ -3,16 +3,17 @@ import styled from 'styled-components';
 import { mixin } from 'shared/utils/styles';
 import Select from 'react-select';
 import { ArrowLeft, Cross } from 'shared/icons';
+import theme from '../../../App/ThemeStyles';

 function getBackgroundColor(isDisabled: boolean, isSelected: boolean, isFocused: boolean) {
  if (isDisabled) {
    return null;
  }
  if (isSelected) {
-    return mixin.darken('#262c49', 0.25);
+    return mixin.darken(theme.colors.bg.secondary, 0.25);
  }
  if (isFocused) {
-    return mixin.darken('#262c49', 0.15);
+    return mixin.darken(theme.colors.bg.secondary, 0.15);
  }
  return null;
 }
@@ -97,8 +98,8 @@ const ProjectName = styled.input`
  font-weight: 400;

  &:focus {
-    background: ${mixin.darken('#262c49', 0.15)};
-    box-shadow: rgb(115, 103, 240) 0px 0px 0px 1px;
+    background: ${props => mixin.darken(props.theme.colors.bg.secondary, 0.15)};
+    box-shadow: ${props => props.theme.colors.primary} 0px 0px 0px 1px;
  }
 `;
 const ProjectNameLabel = styled.label`
@@ -126,35 +127,35 @@ const colourStyles = {
  control: (styles: any, data: any) => {
    return {
      ...styles,
-      backgroundColor: data.isMenuOpen ? mixin.darken('#262c49', 0.15) : '#262c49',
-      boxShadow: data.menuIsOpen ? 'rgb(115, 103, 240) 0px 0px 0px 1px' : 'none',
+      backgroundColor: data.isMenuOpen ? mixin.darken(theme.colors.bg.secondary, 0.15) : theme.colors.bg.secondary,
+      boxShadow: data.menuIsOpen ? `${theme.colors.primary} 0px 0px 0px 1px` : 'none',
      borderRadius: '3px',
      borderWidth: '1px',
      borderStyle: 'solid',
      borderImage: 'initial',
-      borderColor: '#414561',
+      borderColor: theme.colors.alternate,
      ':hover': {
-        boxShadow: 'rgb(115, 103, 240) 0px 0px 0px 1px',
+        boxShadow: `${theme.colors.primary} 0px 0px 0px 1px`,
        borderRadius: '3px',
        borderWidth: '1px',
        borderStyle: 'solid',
        borderImage: 'initial',
-        borderColor: '#414561',
+        borderColor: theme.colors.alternate,
      },
      ':active': {
-        boxShadow: 'rgb(115, 103, 240) 0px 0px 0px 1px',
+        boxShadow: `${theme.colors.primary} 0px 0px 0px 1px`,
        borderRadius: '3px',
        borderWidth: '1px',
        borderStyle: 'solid',
        borderImage: 'initial',
-        borderColor: 'rgb(115, 103, 240)',
+        borderColor: `${theme.colors.primary}`,
      },
    };
  },
  menu: (styles: any) => {
    return {
      ...styles,
-      backgroundColor: mixin.darken('#262c49', 0.15),
+      backgroundColor: mixin.darken(theme.colors.bg.secondary, 0.15),
    };
  },
  dropdownIndicator: (styles: any) => ({ ...styles, color: '#c2c6dc', ':hover': { color: '#c2c6dc' } }),
@@ -167,11 +168,11 @@ const colourStyles = {
      cursor: isDisabled ? 'not-allowed' : 'default',
      ':active': {
        ...styles[':active'],
-        backgroundColor: !isDisabled && (isSelected ? mixin.darken('#262c49', 0.25) : '#fff'),
+        backgroundColor: !isDisabled && (isSelected ? mixin.darken(theme.colors.bg.secondary, 0.25) : '#fff'),
      },
      ':hover': {
        ...styles[':hover'],
-        backgroundColor: !isDisabled && (isSelected ? 'rgb(115, 103, 240)' : 'rgb(115, 103, 240)'),
+        backgroundColor: !isDisabled && (isSelected ? theme.colors.primary : theme.colors.primary),
      },
    };
  },
@@ -209,21 +210,21 @@ const CreateButton = styled.button`

  &:hover {
    color: #fff;
-    background: rgb(115, 103, 240);
-    border-color: rgb(115, 103, 240);
+    background: ${props => props.theme.colors.primary};
+    border-color: ${props => props.theme.colors.primary};
  }
 `;
 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>
@@ -271,8 +272,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: ${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: ${props => props.theme.colors.primary};
+`;
+
+const NotificationHeaderTitle = styled.span`
+  font-size: 14px;
+  color: ${props => props.theme.colors.text.secondary};
+`;
+
+const NotificationFooter = styled.div`
+  cursor: pointer;
+  padding: 0.5rem;
+  text-align: center;
+  color: ${props => props.theme.colors.primary};
+  &:hover {
+    background: ${props => props.theme.colors.bg.primary};
+  }
+  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/LabelEditor.tsx
+++ b/frontend/src/shared/components/PopupMenu/LabelEditor.tsx
@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import { SaveButton, DeleteButton, LabelBox, EditLabelForm, FieldLabel, FieldName } from './Styles';

 const WhiteCheckmark = styled(Checkmark)`
-  fill: rgba(${props => props.theme.colors.text.secondary});
+  fill: ${props => props.theme.colors.text.secondary};
 `;
 type Props = {
  labelColors: Array<LabelColor>;
--- a/frontend/src/shared/components/PopupMenu/Styles.ts
+++ b/frontend/src/shared/components/PopupMenu/Styles.ts
@@ -1,10 +1,12 @@
 import styled, { css } from 'styled-components';
 import { mixin } from 'shared/utils/styles';
 import ControlledInput from 'shared/components/ControlledInput';
+import theme from 'App/ThemeStyles';

 export const Container = styled.div<{
  invertY: boolean;
  invert: boolean;
+  targetPadding: string;
  top: number;
  left: number;
  ref: any;
@@ -15,7 +17,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 =>
@@ -28,14 +30,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;
@@ -43,8 +49,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`
@@ -167,7 +177,7 @@ export const LabelIcon = styled.div`
  cursor: pointer;

  &:hover {
-    background: rgb(115, 103, 240);
+    background: ${props => props.theme.colors.primary};
  }
 `;

@@ -224,8 +234,8 @@ export const FieldName = styled.input`
  font-weight: 400;

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

@@ -249,7 +259,7 @@ export const LabelBox = styled.span<{ color: string }>`
 `;

 export const SaveButton = styled.input`
-  background: rgb(115, 103, 240);
+  background: ${props => props.theme.colors.primary};
  box-shadow: none;
  border: none;
  color: #fff;
@@ -287,7 +297,7 @@ export const DeleteButton = styled.input`

  &:hover {
    color: #fff;
-    background: rgb(115, 103, 240);
+    background: ${props => props.theme.colors.primary};
    border-color: transparent;
  }
 `;
@@ -308,7 +318,7 @@ export const CreateLabelButton = styled.button`
  cursor: pointer;

  &:hover {
-    background: rgb(115, 103, 240);
+    background: ${props => props.theme.colors.primary};
  }
 `;

@@ -326,7 +336,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;
@@ -347,6 +357,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
@@ -4,6 +4,7 @@ import useOnOutsideClick from 'shared/hooks/onOutsideClick';
 import { createPortal } from 'react-dom';
 import NOOP from 'shared/utils/noop';
 import produce from 'immer';
+import theme from 'App/ThemeStyles';
 import {
  Container,
  ContainerDiamond,
@@ -15,9 +16,37 @@ import {
  Wrapper,
 } from './Styles';

+function getPopupOptions(options?: PopupOptions) {
+  const popupOptions = {
+    borders: true,
+    diamondColor: theme.colors.bg.secondary,
+    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;
 };
@@ -26,23 +55,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>
  );
@@ -73,13 +123,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,
@@ -89,11 +154,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;
@@ -102,6 +168,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,
@@ -112,7 +179,7 @@ export const PopupProvider: React.FC = ({ children }) => {
          currentTab: 0,
          previousTab: 0,
          content,
-          width: width ?? 316,
+          options: popupOptions,
        });
      } else {
        setState({
@@ -124,7 +191,7 @@ export const PopupProvider: React.FC = ({ children }) => {
          currentTab: 0,
          previousTab: 0,
          content,
-          width: width ?? 316,
+          options: popupOptions,
        });
      }
    }
@@ -139,20 +206,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 = () => {
@@ -163,17 +231,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,
        )}
@@ -197,8 +274,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" />
@@ -222,7 +307,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;
@@ -230,7 +315,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/ProjectSettings/index.tsx
+++ b/frontend/src/shared/components/ProjectSettings/index.tsx
@@ -24,7 +24,7 @@ export const ListActionItem = styled.span`
  margin: 0 -12px;
  text-decoration: none;
  &:hover {
-    background: rgb(115, 103, 240);
+    background: ${props => props.theme.colors.primary};
  }
 `;

--- a/frontend/src/shared/components/QuickCardEditor/Styles.ts
+++ b/frontend/src/shared/components/QuickCardEditor/Styles.ts
@@ -1,6 +1,4 @@
 import styled, { keyframes, css } from 'styled-components';
-import TextareaAutosize from 'react-autosize-textarea';
-import { mixin } from 'shared/utils/styles';

 export const Wrapper = styled.div<{ open: boolean }>`
  background: rgba(0, 0, 0, 0.55);
@@ -30,7 +28,7 @@ export const Container = styled.div<{ fixed: boolean; width: number; top: number

 export const SaveButton = styled.button`
  cursor: pointer;
-  background: rgb(115, 103, 240);
+  background: ${props => props.theme.colors.primary};
  box-shadow: none;
  border: none;
  color: #fff;
--- a/frontend/src/shared/components/Register/Styles.ts
+++ b/frontend/src/shared/components/Register/Styles.ts
@@ -1,5 +1,6 @@
 import styled from 'styled-components';
 import Button from 'shared/components/Button';
+import { mixin } from 'shared/utils/styles';

 export const Wrapper = styled.div`
  background: #eff2f7;
@@ -68,7 +69,7 @@ export const FormIcon = styled.div`

 export const FormError = styled.span`
  font-size: 0.875rem;
-  color: rgb(234, 84, 85);
+  color: ${props => props.theme.colors.danger};
 `;

 export const LoginButton = styled(Button)``;
@@ -99,5 +100,5 @@ export const LogoWrapper = styled.div`
  padding-bottom: 16px;
  margin-bottom: 24px;
  color: rgb(222, 235, 255);
-  border-bottom: 1px solid rgba(65, 69, 97, 0.65);
+  border-bottom: 1px solid ${props => mixin.rgba(props.theme.colors.alternate, 0.65)};
 `;
--- a/frontend/src/shared/components/Register/index.tsx
+++ b/frontend/src/shared/components/Register/index.tsx
@@ -24,7 +24,7 @@ import {
 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 Register = ({ onSubmit }: RegisterProps) => {
+const Register = ({ onSubmit, registered = false }: RegisterProps) => {
  const [isComplete, setComplete] = useState(true);
  const { register, handleSubmit, errors, setError } = useForm<RegisterFormData>();
  const loginSubmit = (data: RegisterFormData) => {
@@ -43,103 +43,112 @@ const Register = ({ onSubmit }: RegisterProps) => {
              <Taskcafe width={42} height={42} />
              <LogoTitle>Taskcafé</LogoTitle>
            </LogoWrapper>
-            <Title>Register</Title>
-            <SubTitle>Please create the system admin user</SubTitle>
-            <Form onSubmit={handleSubmit(loginSubmit)}>
-              <FormLabel htmlFor="fullname">
-                Full name
-                <FormTextInput
-                  type="text"
-                  id="fullname"
-                  name="fullname"
-                  ref={register({ required: 'Full name is required' })}
-                />
-                <FormIcon>
-                  <User width={20} height={20} />
-                </FormIcon>
-              </FormLabel>
-              {errors.username && <FormError>{errors.username.message}</FormError>}
-              <FormLabel htmlFor="username">
-                Username
-                <FormTextInput
-                  type="text"
-                  id="username"
-                  name="username"
-                  ref={register({ required: 'Username is required' })}
-                />
-                <FormIcon>
-                  <User width={20} height={20} />
-                </FormIcon>
-              </FormLabel>
-              {errors.username && <FormError>{errors.username.message}</FormError>}
-              <FormLabel htmlFor="email">
-                Email
-                <FormTextInput
-                  type="text"
-                  id="email"
-                  name="email"
-                  ref={register({
-                    required: 'Email is required',
-                    pattern: { value: EMAIL_PATTERN, message: 'Must be a valid email' },
-                  })}
-                />
-                <FormIcon>
-                  <User width={20} height={20} />
-                </FormIcon>
-              </FormLabel>
-              {errors.email && <FormError>{errors.email.message}</FormError>}
-              <FormLabel htmlFor="initials">
-                Initials
-                <FormTextInput
-                  type="text"
-                  id="initials"
-                  name="initials"
-                  ref={register({
-                    required: 'Initials is required',
-                    pattern: {
-                      value: INITIALS_PATTERN,
-                      message: 'Initials must be between 2 to 3 characters.',
-                    },
-                  })}
-                />
-                <FormIcon>
-                  <User width={20} height={20} />
-                </FormIcon>
-              </FormLabel>
-              {errors.initials && <FormError>{errors.initials.message}</FormError>}
-              <FormLabel htmlFor="password">
-                Password
-                <FormTextInput
-                  type="password"
-                  id="password"
-                  name="password"
-                  ref={register({ required: 'Password is required' })}
-                />
-                <FormIcon>
-                  <Lock width={20} height={20} />
-                </FormIcon>
-              </FormLabel>
-              {errors.password && <FormError>{errors.password.message}</FormError>}
-              <FormLabel htmlFor="password_confirm">
-                Password (Confirm)
-                <FormTextInput
-                  type="password"
-                  id="password_confirm"
-                  name="password_confirm"
-                  ref={register({ required: 'Password (confirm) is required' })}
-                />
-                <FormIcon>
-                  <Lock width={20} height={20} />
-                </FormIcon>
-              </FormLabel>
-              {errors.password_confirm && <FormError>{errors.password_confirm.message}</FormError>}
+            {registered ? (
+              <>
+                <Title>Thanks for registering</Title>
+                <SubTitle>Please check your inbox for a confirmation email.</SubTitle>
+              </>
+            ) : (
+              <>
+                <Title>Register</Title>
+                <SubTitle>Please create your user</SubTitle>
+                <Form onSubmit={handleSubmit(loginSubmit)}>
+                  <FormLabel htmlFor="fullname">
+                    Full name
+                    <FormTextInput
+                      type="text"
+                      id="fullname"
+                      name="fullname"
+                      ref={register({ required: 'Full name is required' })}
+                    />
+                    <FormIcon>
+                      <User width={20} height={20} />
+                    </FormIcon>
+                  </FormLabel>
+                  {errors.username && <FormError>{errors.username.message}</FormError>}
+                  <FormLabel htmlFor="username">
+                    Username
+                    <FormTextInput
+                      type="text"
+                      id="username"
+                      name="username"
+                      ref={register({ required: 'Username is required' })}
+                    />
+                    <FormIcon>
+                      <User width={20} height={20} />
+                    </FormIcon>
+                  </FormLabel>
+                  {errors.username && <FormError>{errors.username.message}</FormError>}
+                  <FormLabel htmlFor="email">
+                    Email
+                    <FormTextInput
+                      type="text"
+                      id="email"
+                      name="email"
+                      ref={register({
+                        required: 'Email is required',
+                        pattern: { value: EMAIL_PATTERN, message: 'Must be a valid email' },
+                      })}
+                    />
+                    <FormIcon>
+                      <User width={20} height={20} />
+                    </FormIcon>
+                  </FormLabel>
+                  {errors.email && <FormError>{errors.email.message}</FormError>}
+                  <FormLabel htmlFor="initials">
+                    Initials
+                    <FormTextInput
+                      type="text"
+                      id="initials"
+                      name="initials"
+                      ref={register({
+                        required: 'Initials is required',
+                        pattern: {
+                          value: INITIALS_PATTERN,
+                          message: 'Initials must be between 2 to 3 characters.',
+                        },
+                      })}
+                    />
+                    <FormIcon>
+                      <User width={20} height={20} />
+                    </FormIcon>
+                  </FormLabel>
+                  {errors.initials && <FormError>{errors.initials.message}</FormError>}
+                  <FormLabel htmlFor="password">
+                    Password
+                    <FormTextInput
+                      type="password"
+                      id="password"
+                      name="password"
+                      ref={register({ required: 'Password is required' })}
+                    />
+                    <FormIcon>
+                      <Lock width={20} height={20} />
+                    </FormIcon>
+                  </FormLabel>
+                  {errors.password && <FormError>{errors.password.message}</FormError>}
+                  <FormLabel htmlFor="password_confirm">
+                    Password (Confirm)
+                    <FormTextInput
+                      type="password"
+                      id="password_confirm"
+                      name="password_confirm"
+                      ref={register({ required: 'Password (confirm) is required' })}
+                    />
+                    <FormIcon>
+                      <Lock width={20} height={20} />
+                    </FormIcon>
+                  </FormLabel>
+                  {errors.password_confirm && <FormError>{errors.password_confirm.message}</FormError>}

-              <ActionButtons>
-                <RegisterButton type="submit" disabled={!isComplete}>
-                  Register
-                </RegisterButton>
-              </ActionButtons>
-            </Form>
+                  <ActionButtons>
+                    <RegisterButton type="submit" disabled={!isComplete}>
+                      Register
+                    </RegisterButton>
+                  </ActionButtons>
+                </Form>
+              </>
+            )}
          </LoginFormContainer>
        </LoginFormWrapper>
      </Column>
--- a/frontend/src/shared/components/Select/index.tsx
+++ b/frontend/src/shared/components/Select/index.tsx
@@ -2,53 +2,54 @@ import React from 'react';
 import Select from 'react-select';
 import styled from 'styled-components';
 import { mixin } from 'shared/utils/styles';
+import theme from 'App/ThemeStyles';

 function getBackgroundColor(isDisabled: boolean, isSelected: boolean, isFocused: boolean) {
  if (isDisabled) {
    return null;
  }
  if (isSelected) {
-    return mixin.darken('#262c49', 0.25);
+    return mixin.darken(theme.colors.bg.secondary, 0.25);
  }
  if (isFocused) {
-    return mixin.darken('#262c49', 0.15);
+    return mixin.darken(theme.colors.bg.secondary, 0.15);
  }
  return null;
 }

-const colourStyles = {
+export const colourStyles = {
  control: (styles: any, data: any) => {
    return {
      ...styles,
-      backgroundColor: data.isMenuOpen ? mixin.darken('#262c49', 0.15) : '#262c49',
-      boxShadow: data.menuIsOpen ? 'rgb(115, 103, 240) 0px 0px 0px 1px' : 'none',
+      backgroundColor: data.isMenuOpen ? mixin.darken(theme.colors.bg.secondary, 0.15) : theme.colors.bg.secondary,
+      boxShadow: data.menuIsOpen ? `${theme.colors.primary} 0px 0px 0px 1px` : 'none',
      borderRadius: '3px',
      borderWidth: '1px',
      borderStyle: 'solid',
      borderImage: 'initial',
-      borderColor: '#414561',
+      borderColor: theme.colors.alternate,
      ':hover': {
-        boxShadow: 'rgb(115, 103, 240) 0px 0px 0px 1px',
+        boxShadow: `${theme.colors.primary} 0px 0px 0px 1px`,
        borderRadius: '3px',
        borderWidth: '1px',
        borderStyle: 'solid',
        borderImage: 'initial',
-        borderColor: '#414561',
+        borderColor: theme.colors.alternate,
      },
      ':active': {
-        boxShadow: 'rgb(115, 103, 240) 0px 0px 0px 1px',
+        boxShadow: `${theme.colors.primary} 0px 0px 0px 1px`,
        borderRadius: '3px',
        borderWidth: '1px',
        borderStyle: 'solid',
        borderImage: 'initial',
-        borderColor: 'rgb(115, 103, 240)',
+        borderColor: `${theme.colors.primary}`,
      },
    };
  },
  menu: (styles: any) => {
    return {
      ...styles,
-      backgroundColor: mixin.darken('#262c49', 0.15),
+      backgroundColor: mixin.darken(theme.colors.bg.secondary, 0.15),
    };
  },
  dropdownIndicator: (styles: any) => ({ ...styles, color: '#c2c6dc', ':hover': { color: '#c2c6dc' } }),
@@ -61,11 +62,11 @@ const colourStyles = {
      cursor: isDisabled ? 'not-allowed' : 'default',
      ':active': {
        ...styles[':active'],
-        backgroundColor: !isDisabled && (isSelected ? mixin.darken('#262c49', 0.25) : '#fff'),
+        backgroundColor: !isDisabled && (isSelected ? mixin.darken(theme.colors.bg.secondary, 0.25) : '#fff'),
      },
      ':hover': {
        ...styles[':hover'],
-        backgroundColor: !isDisabled && (isSelected ? 'rgb(115, 103, 240)' : 'rgb(115, 103, 240)'),
+        backgroundColor: !isDisabled && (isSelected ? theme.colors.primary : theme.colors.primary),
      },
    };
  },
@@ -86,7 +87,7 @@ const colourStyles = {
 const InputLabel = styled.span<{ width: string }>`
 width: ${props => props.width};
 padding-left: 0.7rem;
-color: rgba(115, 103, 240);
+color: ${props => props.theme.colors.primary};
 left: 0;
 top: 0;
 transition: all 0.2s ease;
--- 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,9 +10,14 @@ 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});
+  color: ${props => props.theme.colors.warning};
 `;

 const ProfileContainer = styled.div`
@@ -147,12 +152,12 @@ const TabNavItemButton = styled.button<{ active: boolean }>`
  width: 100%;
  position: relative;

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

@@ -170,8 +175,8 @@ const TabNavLine = styled.span<{ top: number }>`
  transform: scaleX(1);
  top: ${props => props.top}px;

-  background: linear-gradient(30deg, rgba(115, 103, 240), rgba(115, 103, 240));
-  box-shadow: 0 0 8px 0 rgba(115, 103, 240);
+  background: linear-gradient(30deg, ${props => props.theme.colors.primary}, ${props => props.theme.colors.primary});
+  box-shadow: 0 0 8px 0 ${props => props.theme.colors.primary};
  display: block;
  position: absolute;
  transition: all 0.2s ease;
@@ -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,46 +24,78 @@ 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;
  display: flex;
  align-items: center;
  justify-content: center;
-  color: rgba(${props => (props.backgroundURL ? props.theme.colors.text.primary : '0,0,0')});
+  color: ${props => (props.backgroundURL ? props.theme.colors.text.primary : 'rgb(0,0,0)')};
  background: ${props => (props.backgroundURL ? `url(${props.backgroundURL})` : props.bgColor)};
  background-position: center;
  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,291 +1,366 @@
-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';

-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: ${props.theme.colors.success};
+          & svg {
+            fill: ${props.theme.colors.text.secondary};
+          }
+          & span {
+            color: ${props.theme.colors.text.secondary};
+          }
+          &:hover {
+            background: ${mixin.rgba(props.theme.colors.success, 0.8)};
+          }
+        `
+      : css`
+          background: none;
+          border: 1px solid ${props.theme.colors.text.secondary};
+          & svg {
+            fill: ${props.theme.colors.text.secondary};
+          }
+          & span {
+            color: ${props.theme.colors.text.secondary};
+          }
+          &:hover {
+            background: ${mixin.rgba(props.theme.colors.success, 0.08)};
+            border: 1px solid ${props.theme.colors.success};
+          }
+          &:hover svg {
+            fill: ${props.theme.colors.success};
+          }
+          &:hover span {
+            color: ${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: ${props => mixin.rgba(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: ${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: ${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: ${props => mixin.rgba(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 ${props => props.theme.colors.alternate};
+  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 ${props => mixin.rgba(props.theme.colors.text.secondary, 0.75)};
  }
-
-  h2 {
-    font-weight: 600;
-    font-size: 20px;
-    line-height: 24px;
-    margin: 16px 0 8px;
+  &:hover svg {
+    fill: ${props => mixin.rgba(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 ${props => mixin.darken(props.theme.colors.alternate, 0.15)};
  }
+  &:hover ${AssignUserIcon} {
+    border: 1px solid ${props => props.theme.colors.alternate};
+  }
+`;

-  strong {
-    font-weight: 700;
+export const AssignUserLabel = styled.span`
+  flex: 1 1 auto;
+  line-height: 15px;
+  color: ${props => mixin.rgba(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: ${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: ${props => mixin.rgba(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: ${props => mixin.rgba(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: ${props => mixin.rgba(props.theme.colors.text.primary, 0.75)};
+  }
+  &:hover svg {
+    fill: ${props => mixin.rgba(props.theme.colors.primary, 0.75)});
+  }
+`;
+
+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: ${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)};
+  background: ${props => mixin.darken(props.theme.colors.bg.secondary, 0.15)};
  cursor: pointer;
  &:hover {
    opacity: 0.8;
@@ -300,97 +375,238 @@ export const TaskDetailsAddLabelIcon = styled.div`
  align-items: center;
  justify-content: center;
  border-radius: 3px;
-  background: ${mixin.darken('#262c49', 0.15)};
+  background: ${props => mixin.darken(props.theme.colors.bg.secondary, 0.15)};
  cursor: pointer;
  &:hover {
    opacity: 0.8;
  }
 `;

-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 ${props => props.theme.colors.primary};
+  padding: 12px 7px 14px 7px;
+  margin-bottom: -1px;
+  margin-right: 36px;
+  color: ${props => props.theme.colors.text.primary};
+`;
+
+export const 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: ${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;
-  display: flex;
+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 TaskDueDateButton = styled(Button)`
+export const CommentEditorActionIcon = styled.div`
+  width: 32px;
  height: 32px;
-  padding: 6px 12px;
-  background: rgba(${props => props.theme.colors.bg.primary}, 0.4);
-  &:hover {
-    box-shadow: none;
-    background: rgba(${props => props.theme.colors.bg.primary}, 0.6);
-  }
-`;
-
-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;
-  line-height: 20px;
-  margin: 0 8px 4px 0;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-`;
-
-export const TaskMember = styled(TaskAssignee)``;
-
-export const MetaDetailContent = styled.div`
  display: flex;
-  & ${TaskMember} {
-    margin-right: 4px;
+  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 ActivityItemHeaderTitle = styled.div`
+  margin-left: 4px;
+  line-height: 18px;
+  display: flex;
+  align-items: center;
+`;
+
+export const ActivityItemHeaderTitleName = styled.span`
+  color: ${props => props.theme.colors.text.primary};
+  font-weight: 500;
+`;
+
+export const ActivityItemTimestamp = styled.span<{ margin: number }>`
+  font-size: 12px;
+  color: ${props => mixin.rgba(props.theme.colors.text.primary, 0.65)};
+  margin-left: ${props => props.margin}px;
+`;
+
+export const ActivityItemDetails = styled.div`
+  margin-left: 32px;
+`;
+
+export const ActivityItemComment = styled.div`
+  display: inline-flex;
+  border-radius: 3px;
+  ${mixin.boxShadowCard}
+  position: relative;
+  color: ${props => props.theme.colors.text.primary};
+  padding: 8px 12px;
+  margin: 4px 0;
+  background-color: ${props => mixin.darken(props.theme.colors.alternate, 0.1)};
+`;
+
+export const ActivityItemLog = styled.span`
+  margin-left: 2px;
+  color: ${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: ${props => mixin.rgba(props.theme.colors.text.primary, 0.25)};
+  &:hover {
+    color: ${props => props.theme.colors.text.primary};
  }
 `;
+
+export const TaskDetailsEditor = styled(TextareaAutosize)`
+  min-height: 108px;
+  color: #c2c6dc;
+  background: #262c49;
+  border-radius: 3px;
+  line-height: 20px;
+  margin-left: 32px;
+  margin-right: 32px;
+  padding: 9px 8px 7px 8px;
+  outline: none;
+  border: none;
+`;
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
FernTheDev	2de48e288b	refactor: make theme more consistent	2020-12-17 22:51:20 -06:00
Jordan Knott	7b6624ecc3	feat: redesign project sharing & initial registration redesigned the project sharing popup to be a multi select dropdown that populates the options by using the input as a fuzzy search filter on the current users & invited users. users can now also be directly invited by email from the project share window. if invited this way, then the user will receive an email that sends them to a registration page, then a confirmation page. the initial registration was always redone so that it uses a similar system to the above in that it now will accept the first registered user if there are no other accounts (besides 'system').	2020-12-17 22:39:14 -06: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