Repository: thenewboston-developers/Website
Pull request #2011 (2021-08-08 13:40:28)

Handle breadcrumb and sidemenu for projects
Fixes part of #2009 

Pending confirmation from designer


Patch:
diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md
new file mode 100644
index 0000000..9278f86
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/feature_request.md
@@ -0,0 +1,30 @@
+---
+name: Feature request
+about: Request for new feature to help us improve
+title: ''
+labels: 'suggestion'
+assignees: ''
+
+---
+
+**Is your proposal related to a problem?**
+Provide a clear and concise description of what the problem is.
+For example, "It's frustrating when..."
+
+**Describe the solution**
+Provide a clear and concise description of what you expected to happen.
+
+**Screenshots/Recordings**
+If applicable, add screenshots to help explain your problem.
+
+**Describe alternatives**
+Let us know about other solutions you've tried or researched.
+
+**Additional context**
+Is there anything else you can add about the proposal?
+You might want to link to related issues here, if you haven't already.
+
+**Account Number**
+Your account number where the reward coins for this feature request will be sent (pending review and approval).
+
+[How to Create an Account](https://thenewboston.com/wallet/create-an-account)
\ No newline at end of file
diff --git a/.github/ISSUE_TEMPLATE/new-contributor.md b/.github/ISSUE_TEMPLATE/new_contributor.md
similarity index 100%
rename from .github/ISSUE_TEMPLATE/new-contributor.md
rename to .github/ISSUE_TEMPLATE/new_contributor.md
diff --git a/package-lock.json b/package-lock.json
index 67fc4c9..78a04e7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -36,6 +36,7 @@
         "react-syntax-highlighter": "^15.3.0",
         "react-toastify": "^6.0.8",
         "react-tsparticles": "^1.29.2",
+        "recharts": "^2.0.9",
         "sass": "^1.32.8",
         "yup": "^0.31.0"
       },
@@ -2871,6 +2872,32 @@
         "@babel/types": "^7.3.0"
       }
     },
+    "node_modules/@types/d3-path": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-2.0.1.tgz",
+      "integrity": "sha512-6K8LaFlztlhZO7mwsZg7ClRsdLg3FJRzIIi6SZXDWmmSJc2x8dd2VkESbLXdk3p8cuvz71f36S0y8Zv2AxqvQw=="
+    },
+    "node_modules/@types/d3-scale": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-3.3.2.tgz",
+      "integrity": "sha512-gGqr7x1ost9px3FvIfUMi5XA/F/yAf4UkUDtdQhpH92XCT0Oa7zkkRzY61gPVJq+DxpHn/btouw5ohWkbBsCzQ==",
+      "dependencies": {
+        "@types/d3-time": "^2"
+      }
+    },
+    "node_modules/@types/d3-shape": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-2.1.3.tgz",
+      "integrity": "sha512-HAhCel3wP93kh4/rq+7atLdybcESZ5bRHDEZUojClyZWsRuEMo3A52NGYJSh48SxfxEU6RZIVbZL2YFZ2OAlzQ==",
+      "dependencies": {
+        "@types/d3-path": "^2"
+      }
+    },
+    "node_modules/@types/d3-time": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-2.1.1.tgz",
+      "integrity": "sha512-9MVYlmIgmRR31C5b4FVSWtuMmBHh2mOWQYfl7XAYOa8dsnb7iEmUmRSWSFgXFtkjxO65d7hTUHQC+RhR/9IWFg=="
+    },
     "node_modules/@types/eslint": {
       "version": "7.2.6",
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.2.6.tgz",
@@ -3199,6 +3226,11 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/resize-observer-browser": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/@types/resize-observer-browser/-/resize-observer-browser-0.1.6.tgz",
+      "integrity": "sha512-61IfTac0s9jvNtBCpyo86QeaN8qqpMGHdK0uGKCCIy2dt5/Yk84VduHIdWAcmkC5QvdkPL0p5eWYgUZtHKKUVg=="
+    },
     "node_modules/@types/resolve": {
       "version": "0.0.8",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-0.0.8.tgz",
@@ -5379,6 +5411,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/classnames": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
+      "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
+    },
     "node_modules/clean-css": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz",
@@ -6190,6 +6227,11 @@
         "node": ">=8.0.0"
       }
     },
+    "node_modules/css-unit-converter": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/css-unit-converter/-/css-unit-converter-1.1.2.tgz",
+      "integrity": "sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA=="
+    },
     "node_modules/css-what": {
       "version": "3.4.2",
       "resolved": "https://registry.npmjs.org/css-what/-/css-what-3.4.2.tgz",
@@ -6423,6 +6465,73 @@
         "type": "^1.0.1"
       }
     },
+    "node_modules/d3-array": {
+      "version": "2.12.1",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz",
+      "integrity": "sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==",
+      "dependencies": {
+        "internmap": "^1.0.0"
+      }
+    },
+    "node_modules/d3-color": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-2.0.0.tgz",
+      "integrity": "sha512-SPXi0TSKPD4g9tw0NMZFnR95XVgUZiBH+uUTqQuDu1OsE2zomHU7ho0FISciaPvosimixwHFl3WHLGabv6dDgQ=="
+    },
+    "node_modules/d3-format": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-2.0.0.tgz",
+      "integrity": "sha512-Ab3S6XuE/Q+flY96HXT0jOXcM4EAClYFnRGY5zsjRGNy6qCYrQsMffs7cV5Q9xejb35zxW5hf/guKw34kvIKsA=="
+    },
+    "node_modules/d3-interpolate": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-2.0.1.tgz",
+      "integrity": "sha512-c5UhwwTs/yybcmTpAVqwSFl6vrQ8JZJoT5F7xNFK9pymv5C0Ymcc9/LIJHtYIggg/yS9YHw8i8O8tgb9pupjeQ==",
+      "dependencies": {
+        "d3-color": "1 - 2"
+      }
+    },
+    "node_modules/d3-path": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-2.0.0.tgz",
+      "integrity": "sha512-ZwZQxKhBnv9yHaiWd6ZU4x5BtCQ7pXszEV9CU6kRgwIQVQGLMv1oiL4M+MK/n79sYzsj+gcgpPQSctJUsLN7fA=="
+    },
+    "node_modules/d3-scale": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-3.3.0.tgz",
+      "integrity": "sha512-1JGp44NQCt5d1g+Yy+GeOnZP7xHo0ii8zsQp6PGzd+C1/dl0KGsp9A7Mxwp+1D1o4unbTTxVdU/ZOIEBoeZPbQ==",
+      "dependencies": {
+        "d3-array": "^2.3.0",
+        "d3-format": "1 - 2",
+        "d3-interpolate": "1.2.0 - 2",
+        "d3-time": "^2.1.1",
+        "d3-time-format": "2 - 3"
+      }
+    },
+    "node_modules/d3-shape": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-2.1.0.tgz",
+      "integrity": "sha512-PnjUqfM2PpskbSLTJvAzp2Wv4CZsnAgTfcVRTwW03QR3MkXF8Uo7B1y/lWkAsmbKwuecto++4NlsYcvYpXpTHA==",
+      "dependencies": {
+        "d3-path": "1 - 2"
+      }
+    },
+    "node_modules/d3-time": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-2.1.1.tgz",
+      "integrity": "sha512-/eIQe/eR4kCQwq7yxi7z4c6qEXf2IYGcjoWB5OOQy4Tq9Uv39/947qlDcN2TLkiTzQWzvnsuYPB9TrWaNfipKQ==",
+      "dependencies": {
+        "d3-array": "2"
+      }
+    },
+    "node_modules/d3-time-format": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-3.0.0.tgz",
+      "integrity": "sha512-UXJh6EKsHBTjopVqZBhFysQcoXSv/5yLONZvkQ5Kk3qbwiUYkdX17Xa1PT6U1ZWXGGfB1ey5L8dKMlFq2DO0Ag==",
+      "dependencies": {
+        "d3-time": "1 - 2"
+      }
+    },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.6.tgz",
@@ -6494,6 +6603,11 @@
       "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.2.1.tgz",
       "integrity": "sha512-KaL7+6Fw6i5A2XSnsbhm/6B+NuEA7TZ4vqxnd5tXz9sbKtrN9Srj8ab4vKVdK8YAqZO9P1kg45Y6YLoduPf+kw=="
     },
+    "node_modules/decimal.js-light": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz",
+      "integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg=="
+    },
     "node_modules/decode-uri-component": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
@@ -8701,6 +8815,11 @@
       "integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==",
       "dev": true
     },
+    "node_modules/fast-equals": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/fast-equals/-/fast-equals-2.0.3.tgz",
+      "integrity": "sha512-0EMw4TTUxsMDpDkCg0rXor2gsg+npVrMIHbEhvD0HZyIhUX6AktC/yasm+qKwfyswd06Qy95ZKk8p2crTo0iPA=="
+    },
     "node_modules/fast-glob": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.4.tgz",
@@ -10440,6 +10559,11 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/internmap": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-1.0.1.tgz",
+      "integrity": "sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw=="
+    },
     "node_modules/invariant": {
       "version": "2.2.4",
       "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
@@ -14044,6 +14168,11 @@
       "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
       "integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0="
     },
+    "node_modules/lodash.debounce": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+      "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
+    },
     "node_modules/lodash.memoize": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
@@ -17782,6 +17911,11 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "node_modules/react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
     "node_modules/react-measure": {
       "version": "2.5.2",
       "resolved": "https://registry.npmjs.org/react-measure/-/react-measure-2.5.2.tgz",
@@ -17832,6 +17966,21 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-resize-detector": {
+      "version": "6.7.4",
+      "resolved": "https://registry.npmjs.org/react-resize-detector/-/react-resize-detector-6.7.4.tgz",
+      "integrity": "sha512-wzvGmUdEDMhiUHVZGnl4kuyj/TEQhvbB5LyAGkbYXetwJ2O+u/zftmPvU+kxiO1h+d9aUqQBKcNLS7TvB3ytqA==",
+      "dependencies": {
+        "@types/resize-observer-browser": "^0.1.5",
+        "lodash.debounce": "^4.0.8",
+        "lodash.throttle": "^4.1.1",
+        "resize-observer-polyfill": "^1.5.1"
+      },
+      "peerDependencies": {
+        "react": "^16.0.0 || ^17.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0"
+      }
+    },
     "node_modules/react-router": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz",
@@ -18017,6 +18166,44 @@
         "react-transition-group": "^4.3.0"
       }
     },
+    "node_modules/react-smooth": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-2.0.0.tgz",
+      "integrity": "sha512-wK4dBBR6P21otowgMT9toZk+GngMplGS1O5gk+2WSiHEXIrQgDvhR5IIlT74Vtu//qpTcipkgo21dD7a7AUNxw==",
+      "dependencies": {
+        "fast-equals": "^2.0.0",
+        "raf": "^3.4.0",
+        "react-transition-group": "2.9.0"
+      },
+      "peerDependencies": {
+        "prop-types": "^15.6.0",
+        "react": "^15.0.0 || ^16.0.0 || ^17.0.0",
+        "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0"
+      }
+    },
+    "node_modules/react-smooth/node_modules/dom-helpers": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.4.0.tgz",
+      "integrity": "sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==",
+      "dependencies": {
+        "@babel/runtime": "^7.1.2"
+      }
+    },
+    "node_modules/react-smooth/node_modules/react-transition-group": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.9.0.tgz",
+      "integrity": "sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==",
+      "dependencies": {
+        "dom-helpers": "^3.4.0",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2",
+        "react-lifecycles-compat": "^3.0.4"
+      },
+      "peerDependencies": {
+        "react": ">=15.0.0",
+        "react-dom": ">=15.0.0"
+      }
+    },
     "node_modules/react-syntax-highlighter": {
       "version": "15.3.0",
       "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-15.3.0.tgz",
@@ -18097,6 +18284,43 @@
         "node": ">=8.10.0"
       }
     },
+    "node_modules/recharts": {
+      "version": "2.0.10",
+      "resolved": "https://registry.npmjs.org/recharts/-/recharts-2.0.10.tgz",
+      "integrity": "sha512-yVIlHXPiSgxg8z+qApVnBcGVCLpluqNbXJenK3jKxsCb/FJzh77wyEztS6kXLXSC1RCZa7UABmBPBhqspMCF+g==",
+      "dependencies": {
+        "@types/d3-scale": "^3.0.0",
+        "@types/d3-shape": "^2.0.0",
+        "classnames": "^2.2.5",
+        "d3-interpolate": "^2.0.1",
+        "d3-scale": "^3.2.3",
+        "d3-shape": "^2.0.0",
+        "eventemitter3": "^4.0.1",
+        "lodash": "^4.17.19",
+        "react-is": "16.10.2",
+        "react-resize-detector": "^6.6.3",
+        "react-smooth": "^2.0.0",
+        "recharts-scale": "^0.4.4",
+        "reduce-css-calc": "^2.1.8"
+      },
+      "peerDependencies": {
+        "react": "^16.0.0 || ^17.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0"
+      }
+    },
+    "node_modules/recharts-scale": {
+      "version": "0.4.5",
+      "resolved": "https://registry.npmjs.org/recharts-scale/-/recharts-scale-0.4.5.tgz",
+      "integrity": "sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==",
+      "dependencies": {
+        "decimal.js-light": "^2.4.1"
+      }
+    },
+    "node_modules/recharts/node_modules/react-is": {
+      "version": "16.10.2",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.10.2.tgz",
+      "integrity": "sha512-INBT1QEgtcCCgvccr5/86CfD71fw9EPmDxgiJX4I2Ddr6ZsV6iFXsuby+qWJPtmNuMY0zByTsG4468P7nHuNWA=="
+    },
     "node_modules/recursive-readdir": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.2.tgz",
@@ -18121,6 +18345,20 @@
         "node": ">=8"
       }
     },
+    "node_modules/reduce-css-calc": {
+      "version": "2.1.8",
+      "resolved": "https://registry.npmjs.org/reduce-css-calc/-/reduce-css-calc-2.1.8.tgz",
+      "integrity": "sha512-8liAVezDmUcH+tdzoEGrhfbGcP7nOV4NkGE3a74+qqvE7nt9i4sKLGBuZNOnpI4WiGksiNPklZxva80061QiPg==",
+      "dependencies": {
+        "css-unit-converter": "^1.1.1",
+        "postcss-value-parser": "^3.3.0"
+      }
+    },
+    "node_modules/reduce-css-calc/node_modules/postcss-value-parser": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+      "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ=="
+    },
     "node_modules/redux": {
       "version": "4.0.5",
       "resolved": "https://registry.npmjs.org/redux/-/redux-4.0.5.tgz",
@@ -25903,6 +26141,32 @@
         "@babel/types": "^7.3.0"
       }
     },
+    "@types/d3-path": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-2.0.1.tgz",
+      "integrity": "sha512-6K8LaFlztlhZO7mwsZg7ClRsdLg3FJRzIIi6SZXDWmmSJc2x8dd2VkESbLXdk3p8cuvz71f36S0y8Zv2AxqvQw=="
+    },
+    "@types/d3-scale": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-3.3.2.tgz",
+      "integrity": "sha512-gGqr7x1ost9px3FvIfUMi5XA/F/yAf4UkUDtdQhpH92XCT0Oa7zkkRzY61gPVJq+DxpHn/btouw5ohWkbBsCzQ==",
+      "requires": {
+        "@types/d3-time": "^2"
+      }
+    },
+    "@types/d3-shape": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-2.1.3.tgz",
+      "integrity": "sha512-HAhCel3wP93kh4/rq+7atLdybcESZ5bRHDEZUojClyZWsRuEMo3A52NGYJSh48SxfxEU6RZIVbZL2YFZ2OAlzQ==",
+      "requires": {
+        "@types/d3-path": "^2"
+      }
+    },
+    "@types/d3-time": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-2.1.1.tgz",
+      "integrity": "sha512-9MVYlmIgmRR31C5b4FVSWtuMmBHh2mOWQYfl7XAYOa8dsnb7iEmUmRSWSFgXFtkjxO65d7hTUHQC+RhR/9IWFg=="
+    },
     "@types/eslint": {
       "version": "7.2.6",
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.2.6.tgz",
@@ -26233,6 +26497,11 @@
         "@types/react": "*"
       }
     },
+    "@types/resize-observer-browser": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/@types/resize-observer-browser/-/resize-observer-browser-0.1.6.tgz",
+      "integrity": "sha512-61IfTac0s9jvNtBCpyo86QeaN8qqpMGHdK0uGKCCIy2dt5/Yk84VduHIdWAcmkC5QvdkPL0p5eWYgUZtHKKUVg=="
+    },
     "@types/resolve": {
       "version": "0.0.8",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-0.0.8.tgz",
@@ -28117,6 +28386,11 @@
         }
       }
     },
+    "classnames": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
+      "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
+    },
     "clean-css": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz",
@@ -28778,6 +29052,11 @@
         "source-map": "^0.6.1"
       }
     },
+    "css-unit-converter": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/css-unit-converter/-/css-unit-converter-1.1.2.tgz",
+      "integrity": "sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA=="
+    },
     "css-what": {
       "version": "3.4.2",
       "resolved": "https://registry.npmjs.org/css-what/-/css-what-3.4.2.tgz",
@@ -28969,6 +29248,73 @@
         "type": "^1.0.1"
       }
     },
+    "d3-array": {
+      "version": "2.12.1",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz",
+      "integrity": "sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==",
+      "requires": {
+        "internmap": "^1.0.0"
+      }
+    },
+    "d3-color": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-2.0.0.tgz",
+      "integrity": "sha512-SPXi0TSKPD4g9tw0NMZFnR95XVgUZiBH+uUTqQuDu1OsE2zomHU7ho0FISciaPvosimixwHFl3WHLGabv6dDgQ=="
+    },
+    "d3-format": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-2.0.0.tgz",
+      "integrity": "sha512-Ab3S6XuE/Q+flY96HXT0jOXcM4EAClYFnRGY5zsjRGNy6qCYrQsMffs7cV5Q9xejb35zxW5hf/guKw34kvIKsA=="
+    },
+    "d3-interpolate": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-2.0.1.tgz",
+      "integrity": "sha512-c5UhwwTs/yybcmTpAVqwSFl6vrQ8JZJoT5F7xNFK9pymv5C0Ymcc9/LIJHtYIggg/yS9YHw8i8O8tgb9pupjeQ==",
+      "requires": {
+        "d3-color": "1 - 2"
+      }
+    },
+    "d3-path": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-2.0.0.tgz",
+      "integrity": "sha512-ZwZQxKhBnv9yHaiWd6ZU4x5BtCQ7pXszEV9CU6kRgwIQVQGLMv1oiL4M+MK/n79sYzsj+gcgpPQSctJUsLN7fA=="
+    },
+    "d3-scale": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-3.3.0.tgz",
+      "integrity": "sha512-1JGp44NQCt5d1g+Yy+GeOnZP7xHo0ii8zsQp6PGzd+C1/dl0KGsp9A7Mxwp+1D1o4unbTTxVdU/ZOIEBoeZPbQ==",
+      "requires": {
+        "d3-array": "^2.3.0",
+        "d3-format": "1 - 2",
+        "d3-interpolate": "1.2.0 - 2",
+        "d3-time": "^2.1.1",
+        "d3-time-format": "2 - 3"
+      }
+    },
+    "d3-shape": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-2.1.0.tgz",
+      "integrity": "sha512-PnjUqfM2PpskbSLTJvAzp2Wv4CZsnAgTfcVRTwW03QR3MkXF8Uo7B1y/lWkAsmbKwuecto++4NlsYcvYpXpTHA==",
+      "requires": {
+        "d3-path": "1 - 2"
+      }
+    },
+    "d3-time": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-2.1.1.tgz",
+      "integrity": "sha512-/eIQe/eR4kCQwq7yxi7z4c6qEXf2IYGcjoWB5OOQy4Tq9Uv39/947qlDcN2TLkiTzQWzvnsuYPB9TrWaNfipKQ==",
+      "requires": {
+        "d3-array": "2"
+      }
+    },
+    "d3-time-format": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-3.0.0.tgz",
+      "integrity": "sha512-UXJh6EKsHBTjopVqZBhFysQcoXSv/5yLONZvkQ5Kk3qbwiUYkdX17Xa1PT6U1ZWXGGfB1ey5L8dKMlFq2DO0Ag==",
+      "requires": {
+        "d3-time": "1 - 2"
+      }
+    },
     "damerau-levenshtein": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.6.tgz",
@@ -29025,6 +29371,11 @@
       "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.2.1.tgz",
       "integrity": "sha512-KaL7+6Fw6i5A2XSnsbhm/6B+NuEA7TZ4vqxnd5tXz9sbKtrN9Srj8ab4vKVdK8YAqZO9P1kg45Y6YLoduPf+kw=="
     },
+    "decimal.js-light": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz",
+      "integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg=="
+    },
     "decode-uri-component": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
@@ -30801,6 +31152,11 @@
       "integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==",
       "dev": true
     },
+    "fast-equals": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/fast-equals/-/fast-equals-2.0.3.tgz",
+      "integrity": "sha512-0EMw4TTUxsMDpDkCg0rXor2gsg+npVrMIHbEhvD0HZyIhUX6AktC/yasm+qKwfyswd06Qy95ZKk8p2crTo0iPA=="
+    },
     "fast-glob": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.4.tgz",
@@ -32222,6 +32578,11 @@
         "side-channel": "^1.0.2"
       }
     },
+    "internmap": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-1.0.1.tgz",
+      "integrity": "sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw=="
+    },
     "invariant": {
       "version": "2.2.4",
       "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
@@ -35035,6 +35396,11 @@
       "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
       "integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0="
     },
+    "lodash.debounce": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+      "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
+    },
     "lodash.memoize": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
@@ -38135,6 +38501,11 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    },
     "react-measure": {
       "version": "2.5.2",
       "resolved": "https://registry.npmjs.org/react-measure/-/react-measure-2.5.2.tgz",
@@ -38175,6 +38546,17 @@
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
       "integrity": "sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg=="
     },
+    "react-resize-detector": {
+      "version": "6.7.4",
+      "resolved": "https://registry.npmjs.org/react-resize-detector/-/react-resize-detector-6.7.4.tgz",
+      "integrity": "sha512-wzvGmUdEDMhiUHVZGnl4kuyj/TEQhvbB5LyAGkbYXetwJ2O+u/zftmPvU+kxiO1h+d9aUqQBKcNLS7TvB3ytqA==",
+      "requires": {
+        "@types/resize-observer-browser": "^0.1.5",
+        "lodash.debounce": "^4.0.8",
+        "lodash.throttle": "^4.1.1",
+        "resize-observer-polyfill": "^1.5.1"
+      }
+    },
     "react-router": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz",
@@ -38335,6 +38717,37 @@
         "react-transition-group": "^4.3.0"
       }
     },
+    "react-smooth": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-2.0.0.tgz",
+      "integrity": "sha512-wK4dBBR6P21otowgMT9toZk+GngMplGS1O5gk+2WSiHEXIrQgDvhR5IIlT74Vtu//qpTcipkgo21dD7a7AUNxw==",
+      "requires": {
+        "fast-equals": "^2.0.0",
+        "raf": "^3.4.0",
+        "react-transition-group": "2.9.0"
+      },
+      "dependencies": {
+        "dom-helpers": {
+          "version": "3.4.0",
+          "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.4.0.tgz",
+          "integrity": "sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==",
+          "requires": {
+            "@babel/runtime": "^7.1.2"
+          }
+        },
+        "react-transition-group": {
+          "version": "2.9.0",
+          "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.9.0.tgz",
+          "integrity": "sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==",
+          "requires": {
+            "dom-helpers": "^3.4.0",
+            "loose-envify": "^1.4.0",
+            "prop-types": "^15.6.2",
+            "react-lifecycles-compat": "^3.0.4"
+          }
+        }
+      }
+    },
     "react-syntax-highlighter": {
       "version": "15.3.0",
       "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-15.3.0.tgz",
@@ -38407,6 +38820,41 @@
         "picomatch": "^2.2.1"
       }
     },
+    "recharts": {
+      "version": "2.0.10",
+      "resolved": "https://registry.npmjs.org/recharts/-/recharts-2.0.10.tgz",
+      "integrity": "sha512-yVIlHXPiSgxg8z+qApVnBcGVCLpluqNbXJenK3jKxsCb/FJzh77wyEztS6kXLXSC1RCZa7UABmBPBhqspMCF+g==",
+      "requires": {
+        "@types/d3-scale": "^3.0.0",
+        "@types/d3-shape": "^2.0.0",
+        "classnames": "^2.2.5",
+        "d3-interpolate": "^2.0.1",
+        "d3-scale": "^3.2.3",
+        "d3-shape": "^2.0.0",
+        "eventemitter3": "^4.0.1",
+        "lodash": "^4.17.19",
+        "react-is": "16.10.2",
+        "react-resize-detector": "^6.6.3",
+        "react-smooth": "^2.0.0",
+        "recharts-scale": "^0.4.4",
+        "reduce-css-calc": "^2.1.8"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "16.10.2",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.10.2.tgz",
+          "integrity": "sha512-INBT1QEgtcCCgvccr5/86CfD71fw9EPmDxgiJX4I2Ddr6ZsV6iFXsuby+qWJPtmNuMY0zByTsG4468P7nHuNWA=="
+        }
+      }
+    },
+    "recharts-scale": {
+      "version": "0.4.5",
+      "resolved": "https://registry.npmjs.org/recharts-scale/-/recharts-scale-0.4.5.tgz",
+      "integrity": "sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==",
+      "requires": {
+        "decimal.js-light": "^2.4.1"
+      }
+    },
     "recursive-readdir": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.2.tgz",
@@ -38425,6 +38873,22 @@
         "strip-indent": "^3.0.0"
       }
     },
+    "reduce-css-calc": {
+      "version": "2.1.8",
+      "resolved": "https://registry.npmjs.org/reduce-css-calc/-/reduce-css-calc-2.1.8.tgz",
+      "integrity": "sha512-8liAVezDmUcH+tdzoEGrhfbGcP7nOV4NkGE3a74+qqvE7nt9i4sKLGBuZNOnpI4WiGksiNPklZxva80061QiPg==",
+      "requires": {
+        "css-unit-converter": "^1.1.1",
+        "postcss-value-parser": "^3.3.0"
+      },
+      "dependencies": {
+        "postcss-value-parser": {
+          "version": "3.3.1",
+          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ=="
+        }
+      }
+    },
     "redux": {
       "version": "4.0.5",
       "resolved": "https://registry.npmjs.org/redux/-/redux-4.0.5.tgz",
diff --git a/package.json b/package.json
index 680282d..2fe307d 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
     "react-syntax-highlighter": "^15.3.0",
     "react-toastify": "^6.0.8",
     "react-tsparticles": "^1.29.2",
+    "recharts": "^2.0.9",
     "sass": "^1.32.8",
     "yup": "^0.31.0"
   },
diff --git a/src/apis/analytics/index.ts b/src/apis/analytics/index.ts
new file mode 100644
index 0000000..1037f5c
--- /dev/null
+++ b/src/apis/analytics/index.ts
@@ -0,0 +1,26 @@
+import axios from 'axios';
+
+import {Analytics, AnalyticsCategory} from 'types/analytics';
+import {PaginatedResponse} from 'types/api';
+
+export async function getAnalytics(category: string): Promise<Analytics[]> {
+  const response = await axios.get<PaginatedResponse<Analytics>>(
+    `${process.env.REACT_APP_BACKEND_API}/analytics?category=${category}`,
+  );
+
+  if (!response.data) {
+    throw new Error('Error while fetching analytics data, please try again.');
+  }
+  return response.data.results;
+}
+
+export async function getAnalyticsCategories(): Promise<AnalyticsCategory[]> {
+  const response = await axios.get<PaginatedResponse<AnalyticsCategory>>(
+    `${process.env.REACT_APP_BACKEND_API}/analytics_categories`,
+  );
+
+  if (!response.data) {
+    throw new Error('Error while fetching analytics categories data, please try again.');
+  }
+  return response.data.results;
+}
diff --git a/src/apis/teams/api.ts b/src/apis/teams/api.ts
new file mode 100644
index 0000000..8a262bc
--- /dev/null
+++ b/src/apis/teams/api.ts
@@ -0,0 +1,29 @@
+import axios from 'axios';
+
+import {PaginatedResponse} from 'types/api';
+import {Team} from 'types/teams';
+import {CoreTeamResponse, TeamMemberResponse} from './types';
+
+export async function getTeamById(id: string): Promise<Team | null> {
+  const response = await axios.get(`${process.env.REACT_APP_BACKEND_API}/teams/${id}`);
+  return response.data ? response.data : null;
+}
+
+export async function getCoreTeams(): Promise<CoreTeamResponse[]> {
+  const response = await axios.get<PaginatedResponse<CoreTeamResponse>>(
+    `${process.env.REACT_APP_BACKEND_API}/core_teams`,
+  );
+
+  if (!response.data) {
+    throw new Error('Error while fetching core teams, please try again.');
+  }
+
+  return response.data.results;
+}
+
+export async function getTeamMemberByUserId(id: string): Promise<TeamMemberResponse | null> {
+  const response = await axios.get<PaginatedResponse<TeamMemberResponse>>(
+    `${process.env.REACT_APP_BACKEND_API}/teams_members?user=${id}`,
+  );
+  return response.data ? response.data.results[0] : null;
+}
diff --git a/src/apis/teams/index.ts b/src/apis/teams/index.ts
new file mode 100644
index 0000000..0c493ad
--- /dev/null
+++ b/src/apis/teams/index.ts
@@ -0,0 +1,2 @@
+export * as api from './api';
+export * from './types';
diff --git a/src/apis/teams/types.ts b/src/apis/teams/types.ts
new file mode 100644
index 0000000..e16b31f
--- /dev/null
+++ b/src/apis/teams/types.ts
@@ -0,0 +1,33 @@
+import {User} from 'types/app/User';
+
+export type TeamResponse = {
+  team_members_meta: TeamMemberResponse[];
+  created_date: string;
+  modified_date: string;
+  pk: string;
+  title: string;
+  about: string;
+  responsibilities: string[];
+  github: string;
+  discord: string;
+};
+
+export type TeamMemberResponse = {
+  user: User;
+  is_lead: boolean;
+  team: string; // foreign key to team
+  pk: string;
+  job_title: string;
+  modified_date: string;
+  created_date: string;
+};
+
+export type CoreTeamResponse = Omit<TeamResponse, 'team_members_meta'> & {
+  core_members_meta: CoreTeamMemberResponse[];
+};
+
+export type CoreTeamMemberResponse = TeamMemberResponse & {
+  weekly_commitment_hours: number;
+  hourly_rate: number;
+  core_team: string; // foreign key to core team
+};
diff --git a/src/components/FlatNavLinks/FlatNavLinks.scss b/src/components/FlatNavLinks/FlatNavLinks.scss
index f6781e2..b2685b1 100644
--- a/src/components/FlatNavLinks/FlatNavLinks.scss
+++ b/src/components/FlatNavLinks/FlatNavLinks.scss
@@ -1,3 +1,5 @@
+@import 'styles/font-mixins';
+
 .FlatNavLinks {
   margin-top: 30px;
   padding: 1px;
@@ -7,7 +9,7 @@
     background: transparent;
     border: 0;
     border-radius: 6px;
-    color: var(--color-sail-gray-400);
+    color: var(--color-gray-500);
     cursor: pointer;
     display: flex;
     font-weight: var(--font-weight-medium);
@@ -18,13 +20,14 @@
     transition: background-color 0.1s;
     width: 100%;
 
-    &:hover {
-      background: var(--color-sail-gray-100);
+    &:hover,
+    &--active {
+      @extend %h4;
+      color: var(--color-blue-900);
     }
 
     &--active {
-      background: var(--color-sail-gray-100);
-      color: var(--color-primary);
+      font-weight: var(--font-weight-bold);
     }
   }
 
diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx
index b82a94f..4422b52 100644
--- a/src/components/Layout/index.tsx
+++ b/src/components/Layout/index.tsx
@@ -1,7 +1,8 @@
 import React, {FC, ReactNode, useEffect} from 'react';
 import {useLocation} from 'react-router-dom';
 
-import {Container, Footer, GoToTop} from 'components';
+import {Container, GoToTop} from 'components';
+import Footer from 'containers/Footer';
 import TopNav from 'containers/TopNav';
 import './Layout.scss';
 
diff --git a/src/components/index.ts b/src/components/index.ts
index 6310bee..eacdb32 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -25,7 +25,6 @@ import DropdownInput from './DropdownInput';
 import EmptyPage from './EmptyPage';
 import FaqDropdownCard from './FaqDropdownCard';
 import FlatNavLinks from './FlatNavLinks';
-import Footer from './Footer';
 import {Button, ErrorMessage, Input} from './FormElements';
 import GoToTop from './GoToTop';
 import HashLink from './HashLink';
@@ -83,7 +82,6 @@ export {
   ErrorMessage,
   FaqDropdownCard,
   FlatNavLinks,
-  Footer,
   GoToTop,
   HashLink,
   Input,
diff --git a/src/constants/teams.ts b/src/constants/teams.ts
index ca8a208..5acbb23 100644
--- a/src/constants/teams.ts
+++ b/src/constants/teams.ts
@@ -1,26 +1,4 @@
-import {NavOption} from 'types/option';
-import {TeamName} from 'types/teams';
-
-export const TeamPathname = {
-  all: 'All',
-  audit: 'Audit',
-  backEnd: 'Back-End',
-  blockchain: 'Blockchain',
-  community: 'Community',
-  design: 'Design',
-  devOps: 'DevOps',
-  frontEnd: 'Front-End',
-  marketing: 'Marketing',
+export const allTeamsFilter = {
+  pathname: 'All',
+  title: 'All',
 };
-
-export const TEAMS: NavOption[] = [
-  {pathname: TeamPathname.all, title: TeamName.all},
-  {pathname: TeamPathname.audit, title: TeamName.audit},
-  {pathname: TeamPathname.backEnd, title: TeamName.backEnd},
-  {pathname: TeamPathname.blockchain, title: TeamName.blockchain},
-  {pathname: TeamPathname.community, title: TeamName.community},
-  {pathname: TeamPathname.design, title: TeamName.design},
-  {pathname: TeamPathname.devOps, title: TeamName.devOps},
-  {pathname: TeamPathname.frontEnd, title: TeamName.frontEnd},
-  {pathname: TeamPathname.marketing, title: TeamName.marketing},
-];
diff --git a/src/containers/Analytics/Analytics.scss b/src/containers/Analytics/Analytics.scss
new file mode 100644
index 0000000..14be948
--- /dev/null
+++ b/src/containers/Analytics/Analytics.scss
@@ -0,0 +1,120 @@
+@import 'styles/font-mixins';
+
+$border: 1px solid var(--color-gray-075);
+$footer-height: 348px;
+$icon-container-height: 78px;
+$top-nav-height: 60px;
+
+.Analytics {
+  display: grid;
+  grid-template-columns: 352px auto;
+  grid-template-rows: [icon-start title-start] 78px [icon-end left-menu-start] 29px [title-end main-start] min-content [left-menu-end main-end];
+
+  @media (max-width: 992px) {
+    grid-template-columns: auto;
+    grid-template-rows: unset;
+  }
+
+  &__icon-container {
+    align-items: center;
+    border-bottom: $border;
+    border-right: $border;
+    display: flex;
+    padding: 0 24px;
+
+    @media (max-width: 992px) {
+      height: 64px;
+      padding: 0 48px;
+    }
+
+    @media (max-width: 768px) {
+      padding: 0 24px;
+    }
+  }
+
+  &__icon-text {
+    font-size: var(--font-size-h3);
+    margin-left: 16px;
+  }
+
+  &__left-menu {
+    border-right: $border;
+    grid-column: 1 / span 1;
+    grid-row: left-menu-start / left-menu-end;
+    min-height: calc(100vh - #{$top-nav-height + $footer-height + $icon-container-height});
+    padding-bottom: 30px;
+
+    @media (max-width: 992px) {
+      display: none;
+    }
+  }
+
+  &__loading-container {
+    display: flex;
+    justify-content: center;
+    margin-top: 30px;
+  }
+
+  &__main-container {
+    grid-column: 2 / -1;
+    grid-row: main-start / main-end;
+    margin-bottom: 170px;
+
+    @media (max-width: 992px) {
+      grid-column: unset;
+      grid-row: unset;
+      padding: 0 12px;
+    }
+
+    @media (max-width: 768px) {
+      padding: 0;
+    }
+  }
+
+  &__title {
+    @extend %display2;
+    display: inline;
+    margin-right: 16px;
+  }
+
+  &__title-container {
+    border-bottom: $border;
+    grid-column: 2 / -1;
+    grid-row: title-start / title-end;
+    padding: 32px;
+
+    @media (max-width: 992px) {
+      grid-column: unset;
+      grid-row: unset;
+      padding: 32px 48px;
+    }
+
+    @media (max-width: 768px) {
+      border-bottom: none;
+      padding: 32px 24px;
+    }
+  }
+
+  &__weekly {
+    color: var(--color-gray-200);
+    font-size: var(--font-size-h2);
+    font-weight: var(--font-weight-light);
+  }
+
+  &__wrapper {
+    border-top: $border;
+  }
+
+  .AnalyticsGraph {
+    border-bottom: $border;
+    border-right: $border;
+
+    &:nth-child(even) {
+      border-right: none;
+    }
+
+    @media (max-width: 768px) {
+      border-right: none;
+    }
+  }
+}
diff --git a/src/containers/Analytics/AnalyticsGraph/AnalyticsGraph.scss b/src/containers/Analytics/AnalyticsGraph/AnalyticsGraph.scss
new file mode 100644
index 0000000..e0d0a2e
--- /dev/null
+++ b/src/containers/Analytics/AnalyticsGraph/AnalyticsGraph.scss
@@ -0,0 +1,11 @@
+@import 'styles/font-mixins';
+
+.AnalyticsGraph {
+  padding: 32px;
+
+  &__title {
+    @extend %h3;
+    display: block;
+    margin-bottom: 28px;
+  }
+}
diff --git a/src/containers/Analytics/AnalyticsGraph/index.tsx b/src/containers/Analytics/AnalyticsGraph/index.tsx
new file mode 100644
index 0000000..c289a0c
--- /dev/null
+++ b/src/containers/Analytics/AnalyticsGraph/index.tsx
@@ -0,0 +1,40 @@
+import React, {FC} from 'react';
+import format from 'date-fns/format';
+import parseISO from 'date-fns/parseISO';
+import {CartesianGrid, Line, LineChart, ResponsiveContainer, XAxis, YAxis} from 'recharts';
+
+import {AnalyticsData} from 'types/analytics';
+import './AnalyticsGraph.scss';
+
+interface AnalyticsGraphProps {
+  data: AnalyticsData[];
+  title: string;
+}
+
+const styledTick = {fill: '#4f566b', fontSize: 9};
+
+const AnalyticsGraph: FC<AnalyticsGraphProps> = ({data, title}) => {
+  const formatDate = (date: string | number) => {
+    if (date === 'auto' || typeof date === 'number') return '';
+
+    return date.toString().length ? format(parseISO(date), 'MMM dd') : '';
+  };
+
+  return (
+    <div className="AnalyticsGraph">
+      <span className="AnalyticsGraph__title">{title}</span>
+      {/* width can't be 100% due to some responsive bug */}
+      {/* https://stackoverflow.com/questions/50891591/recharts-responsive-container-does-not-resize-correctly-in-flexbox */}
+      <ResponsiveContainer width="99%" height={225}>
+        <LineChart data={data}>
+          <CartesianGrid strokeDasharray="3 3" />
+          <XAxis dataKey="date" tick={styledTick} tickFormatter={formatDate} tickMargin={5} />
+          <YAxis tick={styledTick} tickMargin={5} />
+          <Line type="monotone" dataKey="value" stroke="#7dabf8" />
+        </LineChart>
+      </ResponsiveContainer>
+    </div>
+  );
+};
+
+export default AnalyticsGraph;
diff --git a/src/containers/Analytics/AnalyticsIcon.tsx b/src/containers/Analytics/AnalyticsIcon.tsx
new file mode 100644
index 0000000..b28e807
--- /dev/null
+++ b/src/containers/Analytics/AnalyticsIcon.tsx
@@ -0,0 +1,56 @@
+import React, {FC} from 'react';
+
+const AnalyticsIcon: FC = () => {
+  return (
+    <svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g filter="url(#filter0_d)">
+        <rect x="3" y="3" width="32" height="32" rx="6" fill="white" />
+      </g>
+      <path
+        opacity="0.23"
+        d="M13.5031 17.8979C14.7188 15.7737 17.9277 14.8614 20.4419 15.0169C21.1284 15.0594 22.5096 15.1449 23.5881 15.9073C25.6593 17.3715 25.3403 20.432 23.3576 22.2339C23.1023 22.4659 21.335 24.0206 18.5809 23.9998C16.5645 23.9846 15.1492 23.1331 14.9771 23.027C14.7597 22.893 14.2802 22.5745 13.8481 22.0693C12.8327 20.8823 12.7435 19.2252 13.5031 17.8979Z"
+        fill="url(#paint0_linear)"
+      />
+      <path
+        d="M12.25 11.125H11.125V25.75C11.125 26.0484 11.2435 26.3345 11.4545 26.5455C11.6655 26.7565 11.9516 26.875 12.25 26.875H26.875V25.75H12.25V11.125Z"
+        fill="#FA8389"
+      />
+      <path
+        d="M26.875 15.0625H22.9375V16.1875H24.9569L20.6875 20.4569L18.2744 18.0381C18.2221 17.9854 18.1599 17.9436 18.0913 17.915C18.0228 17.8864 17.9493 17.8717 17.875 17.8717C17.8007 17.8717 17.7272 17.8864 17.6587 17.915C17.5901 17.9436 17.5279 17.9854 17.4756 18.0381L13.375 22.1444L14.1681 22.9375L17.875 19.2306L20.2881 21.6494C20.3404 21.7021 20.4026 21.7439 20.4712 21.7725C20.5397 21.8011 20.6132 21.8158 20.6875 21.8158C20.7618 21.8158 20.8353 21.8011 20.9038 21.7725C20.9724 21.7439 21.0346 21.7021 21.0869 21.6494L25.75 16.9806V19H26.875V15.0625Z"
+        fill="#FA8389"
+      />
+      <defs>
+        <filter
+          id="filter0_d"
+          x="0"
+          y="0"
+          width="38"
+          height="38"
+          filterUnits="userSpaceOnUse"
+          colorInterpolationFilters="sRGB"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset />
+          <feGaussianBlur stdDeviation="1.5" />
+          <feColorMatrix type="matrix" values="0 0 0 0 0.568627 0 0 0 0 0.701961 0 0 0 0 0.980392 0 0 0 0.19 0" />
+          <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" />
+          <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
+        </filter>
+        <linearGradient
+          id="paint0_linear"
+          x1="12.2702"
+          y1="13.8299"
+          x2="18.4796"
+          y2="22.7953"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#DAE3FE" />
+          <stop offset="1" stopColor="#E9EFFD" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+};
+
+export default AnalyticsIcon;
diff --git a/src/containers/Analytics/AnalyticsMobileDropdown/AnalyticsMobileDropdown.scss b/src/containers/Analytics/AnalyticsMobileDropdown/AnalyticsMobileDropdown.scss
new file mode 100644
index 0000000..254b251
--- /dev/null
+++ b/src/containers/Analytics/AnalyticsMobileDropdown/AnalyticsMobileDropdown.scss
@@ -0,0 +1,43 @@
+@import 'styles/font-mixins';
+
+$border: 1px solid var(--color-gray-075);
+
+.AnalyticsMobileDropdown {
+  align-items: center;
+  background: var(--color-white);
+  border-bottom: $border;
+  border-left: none;
+  border-right: none;
+  border-top: none;
+  cursor: pointer;
+  display: flex;
+  height: 56px;
+  justify-content: space-between;
+  padding: 0 48px;
+
+  @media (max-width: 768px) {
+    padding: 0 24px;
+  }
+
+  &__dropdown {
+    width: calc(100vw - 2 * 24px - 2 * 12px); // subtracting side margin and also padding of popover
+
+    @media (max-width: 576px) {
+      width: calc(100vw - 2 * 8px - 2 * 12px);
+    }
+  }
+
+  &__toggle {
+    transform: rotate(0deg);
+    transition: transform 0.3s;
+
+    &--open {
+      transform: rotate(180deg);
+    }
+  }
+
+  &__type {
+    @extend %h3;
+    font-weight: var(--font-weight-bold);
+  }
+}
diff --git a/src/containers/Analytics/AnalyticsMobileDropdown/index.tsx b/src/containers/Analytics/AnalyticsMobileDropdown/index.tsx
new file mode 100644
index 0000000..a7ebde2
--- /dev/null
+++ b/src/containers/Analytics/AnalyticsMobileDropdown/index.tsx
@@ -0,0 +1,57 @@
+import React, {FC, ReactNode, useCallback, useState} from 'react';
+import clsx from 'clsx';
+import {Icon, IconType} from '@thenewboston/ui';
+
+import {Popover} from 'components';
+import {useWindowDimensions} from 'hooks';
+import {AnalyticsCategory} from 'types/analytics';
+
+import './AnalyticsMobileDropdown.scss';
+
+interface AnalyticsMobileDropdownProps {
+  navLinks: ReactNode;
+  selectedCategory: AnalyticsCategory | null;
+}
+
+const AnalyticsMobileDropdown: FC<AnalyticsMobileDropdownProps> = ({navLinks, selectedCategory}) => {
+  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
+  const {clientWidth} = useWindowDimensions();
+
+  const popoverIsOpen = !!anchorEl;
+
+  const unsetAnchorEl = useCallback(() => {
+    setAnchorEl(null);
+  }, [setAnchorEl]);
+
+  const handleButtonClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>): void => {
+    if (!anchorEl) {
+      setAnchorEl(e.currentTarget);
+      return;
+    }
+    unsetAnchorEl();
+  };
+
+  return (
+    <>
+      <button className="AnalyticsMobileDropdown" onClick={handleButtonClick}>
+        <span className="AnalyticsMobileDropdown__type">{selectedCategory?.title || ''}</span>
+        <Icon
+          className={clsx('AnalyticsMobileDropdown__toggle', {'AnalyticsMobileDropdown__toggle--open': popoverIsOpen})}
+          icon={IconType.chevronDown}
+          size={24}
+        />
+      </button>
+      <Popover
+        anchorEl={anchorEl}
+        anchorOrigin={{horizontal: 'left', vertical: 'bottom'}}
+        transformOffset={{horizontal: clientWidth > 768 ? 24 : 8, vertical: 0}}
+        closePopover={unsetAnchorEl}
+        open={popoverIsOpen}
+      >
+        <div className="AnalyticsMobileDropdown__dropdown">{navLinks}</div>
+      </Popover>
+    </>
+  );
+};
+
+export default AnalyticsMobileDropdown;
diff --git a/src/containers/Analytics/SelectedAnalytics/SelectedAnalytics.scss b/src/containers/Analytics/SelectedAnalytics/SelectedAnalytics.scss
new file mode 100644
index 0000000..42325cc
--- /dev/null
+++ b/src/containers/Analytics/SelectedAnalytics/SelectedAnalytics.scss
@@ -0,0 +1,21 @@
+.SelectedAnalytics {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+
+  @media (max-width: 768px) {
+    display: block;
+  }
+
+  &__loading-container {
+    display: flex;
+    justify-content: center;
+    margin-top: 30px;
+  }
+
+  &__no-results {
+    color: var(--color-neutral-600);
+    display: flex;
+    justify-content: center;
+    margin-top: 30px;
+  }
+}
diff --git a/src/containers/Analytics/SelectedAnalytics/index.tsx b/src/containers/Analytics/SelectedAnalytics/index.tsx
new file mode 100644
index 0000000..91b68af
--- /dev/null
+++ b/src/containers/Analytics/SelectedAnalytics/index.tsx
@@ -0,0 +1,56 @@
+import React, {FC, useEffect, useState} from 'react';
+
+import {getAnalytics} from 'apis/analytics';
+import {Loader} from 'components';
+import {Analytics, AnalyticsCategory} from 'types/analytics';
+import {displayErrorToast} from 'utils/toast';
+
+import AnalyticsGraph from '../AnalyticsGraph';
+import './SelectedAnalytics.scss';
+
+interface ComponentProps {
+  selectedCategory: AnalyticsCategory | null;
+}
+
+const SelectedAnalytics: FC<ComponentProps> = ({selectedCategory}) => {
+  const [analytics, setAnalytics] = useState<Analytics[]>([]);
+  const [loading, setLoading] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (selectedCategory) {
+      (async () => {
+        setLoading(true);
+        try {
+          const analyticsResponse = await getAnalytics(selectedCategory.key);
+          setAnalytics(analyticsResponse);
+        } catch (error) {
+          displayErrorToast('Network Error');
+        } finally {
+          setLoading(false);
+        }
+      })();
+    }
+  }, [selectedCategory]);
+
+  if (loading) {
+    return (
+      <div className="SelectedAnalytics__loading-container">
+        <Loader />
+      </div>
+    );
+  }
+
+  if (!analytics.length) {
+    return <div className="SelectedAnalytics__no-results">There are no analytics to display for this category.</div>;
+  }
+
+  return (
+    <div className="SelectedAnalytics">
+      {analytics.map((analytic) => (
+        <AnalyticsGraph data={analytic.data} key={analytic.pk} title={analytic.title} />
+      ))}
+    </div>
+  );
+};
+
+export default SelectedAnalytics;
diff --git a/src/containers/Analytics/index.tsx b/src/containers/Analytics/index.tsx
new file mode 100644
index 0000000..09e44de
--- /dev/null
+++ b/src/containers/Analytics/index.tsx
@@ -0,0 +1,111 @@
+import React, {FC, ReactNode, useCallback, useEffect, useMemo, useState} from 'react';
+import {useHistory, useParams} from 'react-router-dom';
+
+import {getAnalyticsCategories} from 'apis/analytics';
+import {Container, FlatNavLinks, PageTitle, Loader} from 'components';
+import {useWindowDimensions} from 'hooks';
+import {AnalyticsCategory, AnalyticsUrlParams} from 'types/analytics';
+import {displayErrorToast} from 'utils/toast';
+
+import AnalyticsIcon from './AnalyticsIcon';
+import AnalyticsMobileDropdown from './AnalyticsMobileDropdown';
+import SelectedAnalytics from './SelectedAnalytics';
+import './Analytics.scss';
+
+const Analytics: FC = () => {
+  const history = useHistory();
+  const {type} = useParams<AnalyticsUrlParams>();
+  const [categories, setCategories] = useState<AnalyticsCategory[]>([]);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [selectedCategory, setSelectedCategory] = useState<AnalyticsCategory | null>(null);
+  const {clientWidth} = useWindowDimensions();
+
+  useEffect(() => {
+    (async () => {
+      setLoading(true);
+      try {
+        const analyticsCategoriesResponse = await getAnalyticsCategories();
+        if (analyticsCategoriesResponse.length) {
+          setCategories(analyticsCategoriesResponse);
+        }
+      } catch (error) {
+        displayErrorToast('Network Error');
+      } finally {
+        setLoading(false);
+      }
+    })();
+  }, []);
+
+  useEffect(() => {
+    if (type && categories.length) {
+      const categoryType = categories.find((category) => category.key === type);
+
+      if (!categoryType) {
+        history.replace(`/analytics/${categories[0].key}`);
+      } else {
+        setSelectedCategory(categoryType);
+      }
+    }
+
+    if (!type && categories.length) {
+      history.replace(`/analytics/${categories[0].key}`);
+    }
+  }, [categories, history, type]);
+
+  const analyticsNavOptions = useMemo(() => {
+    return categories.map((category) => ({pathname: category.key, title: category.title}));
+  }, [categories]);
+
+  const title = useMemo(() => {
+    if (selectedCategory) {
+      return `${selectedCategory.title} Analytics`;
+    }
+
+    return 'Analytics';
+  }, [selectedCategory]);
+
+  const handleNavOptionClick = useCallback(
+    (option: string) => (): void => {
+      history.push(`/analytics/${option}`);
+    },
+    [history],
+  );
+
+  const renderNavLinks = useCallback((): ReactNode => {
+    if (!type) return null;
+    return (
+      <FlatNavLinks handleOptionClick={handleNavOptionClick} options={analyticsNavOptions} selectedOption={type} />
+    );
+  }, [analyticsNavOptions, handleNavOptionClick, type]);
+
+  return (
+    <div className="Analytics__wrapper">
+      <PageTitle ogDescription={title} title={title} />
+      {loading ? (
+        <div className="Analytics__loading-container">
+          <Loader />
+        </div>
+      ) : (
+        <Container className="Analytics">
+          <div className="Analytics__icon-container">
+            <AnalyticsIcon />
+            <span className="Analytics__icon-text">Analytics Dashboard</span>
+          </div>
+          {clientWidth <= 992 && (
+            <AnalyticsMobileDropdown navLinks={renderNavLinks()} selectedCategory={selectedCategory} />
+          )}
+          <aside className="Analytics__left-menu">{renderNavLinks()}</aside>
+          <div className="Analytics__title-container">
+            <h1 className="Analytics__title">{title}</h1>
+            <span className="Analytics__weekly">WEEKLY</span>
+          </div>
+          <div className="Analytics__main-container">
+            <SelectedAnalytics selectedCategory={selectedCategory} />
+          </div>
+        </Container>
+      )}
+    </div>
+  );
+};
+
+export default Analytics;
diff --git a/src/containers/App.tsx b/src/containers/App.tsx
index a8b0ae7..714bc44 100644
--- a/src/containers/App.tsx
+++ b/src/containers/App.tsx
@@ -4,7 +4,7 @@ import {BrowserRouter as Router, Redirect, Route, Switch} from 'react-router-dom
 import {Layout} from 'components';
 import withSuspense from 'hoc/withSuspense';
 
-import Wallet from './Wallet';
+import Analytics from './Analytics';
 import ArchitectureDeepDive from './LivingWhitepaper/containers/ArchitectureDeepDive';
 import Assets from './Assets';
 import BankApi from './Api/BankApi';
@@ -35,6 +35,7 @@ import StyleGuide from './StyleGuide';
 import Tasks from './Tasks';
 import Teams from './Teams';
 import TermsOfUse from './TermsOfUse';
+import Wallet from './Wallet';
 
 /**
  * Lazy load pages that may contribute a lot to the bundle size
@@ -76,6 +77,7 @@ const App: FC = () => {
       <Layout>
         <Switch>
           <Route exact path="/" component={Home} />
+          <Route exact path="/analytics/:type?" component={Analytics} />
           <Route exact path="/guidelines" component={Guidelines} />
           <Route exact path="/create-account" render={() => <CreateAccount disabled />} />
           <Route exact path="/donate" component={Donate} />
diff --git a/src/containers/DeveloperPortalProjects/components/Breadcrumb/Breadcrumb.scss b/src/containers/DeveloperPortalProjects/components/Breadcrumb/Breadcrumb.scss
index 5597246..6cd4330 100644
--- a/src/containers/DeveloperPortalProjects/components/Breadcrumb/Breadcrumb.scss
+++ b/src/containers/DeveloperPortalProjects/components/Breadcrumb/Breadcrumb.scss
@@ -60,14 +60,11 @@
   }
 
   &__Popover {
+    max-height: 400px;
+    overflow-y: scroll;
     padding: 16px;
     width: 240px;
 
-    @media (max-height: 1000px) {
-      max-height: 400px;
-      overflow-y: scroll;
-    }
-
     @media (max-height: 600px) {
       max-height: 200px;
       overflow-y: scroll;
diff --git a/src/containers/DeveloperPortalProjects/components/Breadcrumb/index.tsx b/src/containers/DeveloperPortalProjects/components/Breadcrumb/index.tsx
index 46ba1f3..5ecac75 100644
--- a/src/containers/DeveloperPortalProjects/components/Breadcrumb/index.tsx
+++ b/src/containers/DeveloperPortalProjects/components/Breadcrumb/index.tsx
@@ -15,11 +15,17 @@ import './Breadcrumb.scss';
 type Props = {
   className?: string;
   breadcrumbHeight: number;
+  approvedProjectUrls?:
+    | {
+        title: string;
+        url: string;
+      }[]
+    | null;
 };
 
 const TOP_LINK_HEIGHT = 72;
 
-const Breadcrumb: FC<Props> = ({breadcrumbHeight, className}) => {
+const Breadcrumb: FC<Props> = ({approvedProjectUrls, breadcrumbHeight, className}) => {
   const location = useLocation();
   const {width} = useWindowDimensions();
   const [projectsDropdownEl, setProjectsDropdownEl] = useState<HTMLButtonElement | null>(null);
@@ -119,7 +125,7 @@ const Breadcrumb: FC<Props> = ({breadcrumbHeight, className}) => {
           );
         }
 
-        // section or rules
+        // rules or approved projects
         return (
           <div className="Breadcrumb__link-container" key={pathname}>
             {width > 992 ? (
@@ -146,24 +152,33 @@ const Breadcrumb: FC<Props> = ({breadcrumbHeight, className}) => {
                   transformOrigin={{horizontal: 'center', vertical: 'top'}}
                   transformOffset={{horizontal: 50, vertical: 12}}
                 >
-                  {PATHNAME_TO_DROPDOWN_SELECTIONS[pathname].map((selection) => {
-                    const selectionHash = selection.url.slice(selection.url.indexOf('#') + 1);
-                    return (
-                      <Link
-                        activeClass="SideMenu__link--active"
-                        className="Breadcrumb__Popover-link"
-                        hashSpy
-                        ignoreCancelEvents
-                        key={selection.url}
-                        offset={-(NAVBAR_HEIGHT + TOP_LINK_HEIGHT + breadcrumbHeight)}
-                        smooth
-                        spy
-                        to={selectionHash}
-                      >
-                        {selection.title}
-                      </Link>
-                    );
-                  })}
+                  {pathname === 'approved-projects'
+                    ? approvedProjectUrls &&
+                      approvedProjectUrls.map((selection) => {
+                        return (
+                          <ReactRouterLink className="Breadcrumb__Popover-link" key={selection.url} to={selection.url}>
+                            {selection.title}
+                          </ReactRouterLink>
+                        );
+                      })
+                    : PATHNAME_TO_DROPDOWN_SELECTIONS[pathname].map((selection) => {
+                        const selectionHash = selection.url.slice(selection.url.indexOf('#') + 1);
+                        return (
+                          <Link
+                            activeClass="SideMenu__link--active"
+                            className="Breadcrumb__Popover-link"
+                            hashSpy
+                            ignoreCancelEvents
+                            key={selection.url}
+                            offset={-(NAVBAR_HEIGHT + TOP_LINK_HEIGHT + breadcrumbHeight)}
+                            smooth
+                            spy
+                            to={selectionHash}
+                          >
+                            {selection.title}
+                          </Link>
+                        );
+                      })}
                 </Popover>
               </>
             )}
diff --git a/src/containers/DeveloperPortalProjects/components/DeveloperPortalLayout/index.tsx b/src/containers/DeveloperPortalProjects/components/DeveloperPortalLayout/index.tsx
index 9692c98..47b51b9 100644
--- a/src/containers/DeveloperPortalProjects/components/DeveloperPortalLayout/index.tsx
+++ b/src/containers/DeveloperPortalProjects/components/DeveloperPortalLayout/index.tsx
@@ -14,11 +14,17 @@ import './DeveloperPortalLayout.scss';
 type Props = {
   children?: ReactNode;
   pageName: string;
+  approvedProjectUrls?:
+    | {
+        title: string;
+        url: string;
+      }[]
+    | null;
 };
 
 const TIMEOUT_DELAY = 200;
 
-const DeveloperPortalLayout: FC<Props> = ({children, pageName}) => {
+const DeveloperPortalLayout: FC<Props> = ({approvedProjectUrls, children, pageName}) => {
   const [breadcrumbHeight, setBreadcrumbHeight] = useState(56);
   const {hash} = useLocation();
   const TOTAL_OFFSET = NAVBAR_HEIGHT + LIVING_WHITEPAPER_TOP_LINKS_HEIGHT + breadcrumbHeight;
@@ -43,7 +49,7 @@ const DeveloperPortalLayout: FC<Props> = ({children, pageName}) => {
         {({measureRef}) => (
           <div className="DeveloperPortalLayout__breadcrumb" ref={measureRef}>
             <Container>
-              <Breadcrumb breadcrumbHeight={breadcrumbHeight} />
+              <Breadcrumb approvedProjectUrls={approvedProjectUrls} breadcrumbHeight={breadcrumbHeight} />
             </Container>
             <Divider />
           </div>
@@ -52,7 +58,7 @@ const DeveloperPortalLayout: FC<Props> = ({children, pageName}) => {
       <Container>
         <div className="DeveloperPortalLayout__main-content">
           <div className="DeveloperPortalLayout__left-content">
-            <SideMenu breadcrumbHeight={breadcrumbHeight} />
+            <SideMenu approvedProjectUrls={approvedProjectUrls} breadcrumbHeight={breadcrumbHeight} />
           </div>
           <div className="DeveloperPortalLayout__right-content">{children}</div>
         </div>
diff --git a/src/containers/DeveloperPortalProjects/components/SideMenu/SideMenu.scss b/src/containers/DeveloperPortalProjects/components/SideMenu/SideMenu.scss
index a7efd66..c315356 100644
--- a/src/containers/DeveloperPortalProjects/components/SideMenu/SideMenu.scss
+++ b/src/containers/DeveloperPortalProjects/components/SideMenu/SideMenu.scss
@@ -60,6 +60,11 @@
     }
   }
 
+  &__approved-projects-link {
+    border-bottom: 1px solid var(--color-gray-100);
+    padding: 10px 0;
+  }
+
   &__toggle-icon {
     align-self: flex-start;
   }
diff --git a/src/containers/DeveloperPortalProjects/components/SideMenu/index.tsx b/src/containers/DeveloperPortalProjects/components/SideMenu/index.tsx
index 6c079ad..babe318 100644
--- a/src/containers/DeveloperPortalProjects/components/SideMenu/index.tsx
+++ b/src/containers/DeveloperPortalProjects/components/SideMenu/index.tsx
@@ -1,4 +1,4 @@
-import React, {FC} from 'react';
+import React, {FC, useState} from 'react';
 
 import {Icon, IconType} from '@thenewboston/ui';
 import clsx from 'clsx';
@@ -6,36 +6,88 @@ import {A} from 'components';
 import {NAVBAR_HEIGHT, LIVING_WHITEPAPER_TOP_LINKS_HEIGHT} from 'constants/offsets';
 import {Link} from 'react-scroll';
 import {useLocation, useHistory} from 'react-router';
-import {PATHNAME_TO_DROPDOWN_SELECTIONS, projectRulesPath} from '../../constants';
+import {PATHNAME_TO_DROPDOWN_SELECTIONS, approvedProjectsPath, projectRulesPath} from '../../constants';
 
 import './SideMenu.scss';
 
 type Props = {
   breadcrumbHeight: number;
+  approvedProjectUrls?:
+    | {
+        title: string;
+        url: string;
+      }[]
+    | null;
 };
 
-const SideMenu: FC<Props> = ({breadcrumbHeight}) => {
+const SideMenu: FC<Props> = ({approvedProjectUrls, breadcrumbHeight}) => {
   const {pathname} = useLocation();
   const history = useHistory();
 
+  const isApprovedProjectsSelected = pathname.includes(approvedProjectsPath);
   const isProjectRulesSelected = pathname.includes(projectRulesPath);
 
+  const [shouldOpenApprovedProjects, setShouldOpenApprovedProjects] = useState(isApprovedProjectsSelected);
+  const [shouldOpenProjectRules, setShouldOpenProjectRules] = useState(isProjectRulesSelected);
+
   return (
     <div className="SideMenu">
+      <div className="SideMenu__section">
+        <button
+          className={clsx('SideMenu__section-header', isApprovedProjectsSelected && 'SideMenu__section-header--active')}
+          onClick={() => {
+            if (!isApprovedProjectsSelected) {
+              history.push(approvedProjectsPath);
+            } else {
+              setShouldOpenApprovedProjects((isOpened) => !isOpened);
+            }
+          }}
+        >
+          <div>APPROVED PROJECTS</div>
+          <Icon
+            className="SideMenu__toggle-icon"
+            icon={isApprovedProjectsSelected && shouldOpenApprovedProjects ? IconType.chevronUp : IconType.chevronDown}
+            size={20}
+            totalSize={20}
+          />
+        </button>
+        {isApprovedProjectsSelected &&
+          shouldOpenApprovedProjects &&
+          approvedProjectUrls &&
+          approvedProjectUrls.map((selection) => {
+            return (
+              <A
+                className={clsx('SideMenu__link', 'SideMenu__approved-projects-link')}
+                href={selection.url}
+                key={selection.url}
+                newWindow={false}
+              >
+                {selection.title}
+              </A>
+            );
+          })}
+      </div>
       <div className="SideMenu__section">
         <button
           className={clsx('SideMenu__section-header', isProjectRulesSelected && 'SideMenu__section-header--active')}
-          onClick={() => history.push(projectRulesPath)}
+          onClick={() => {
+            if (!isProjectRulesSelected) {
+              history.push(projectRulesPath);
+            } else {
+              setShouldOpenProjectRules((isOpened) => !isOpened);
+            }
+          }}
         >
           <div>RULES & GUIDELINES</div>
           <Icon
             className="SideMenu__toggle-icon"
-            icon={isProjectRulesSelected ? IconType.chevronUp : IconType.chevronDown}
+            icon={isProjectRulesSelected && shouldOpenProjectRules ? IconType.chevronUp : IconType.chevronDown}
             size={20}
             totalSize={20}
           />
         </button>
         {isProjectRulesSelected &&
+          shouldOpenProjectRules &&
           PATHNAME_TO_DROPDOWN_SELECTIONS.rules.map((selection) => {
             const selectionHash = selection.url.slice(selection.url.indexOf('#') + 1);
             return (
diff --git a/src/containers/DeveloperPortalProjects/constants.ts b/src/containers/DeveloperPortalProjects/constants.ts
index 9259b23..0c5268e 100644
--- a/src/containers/DeveloperPortalProjects/constants.ts
+++ b/src/containers/DeveloperPortalProjects/constants.ts
@@ -17,10 +17,11 @@ export enum ProjectRulesId {
   Rules = 'rules',
 }
 
+export const approvedProjectsPath = '/developer/projects/approved-projects';
 export const projectRulesPath = '/developer/projects/rules';
 
 export const PATHNAME_TO_DROPDOWN_SELECTIONS: Record<string, {title: string; url: string}[]> = {
-  'approved-projects': [],
+  'approved-projects': [], // selections will be obtained from calling API
   projects: [
     {
       title: 'Rules & Guidelines',
@@ -28,7 +29,7 @@ export const PATHNAME_TO_DROPDOWN_SELECTIONS: Record<string, {title: string; url
     },
     {
       title: 'Approved Projects',
-      url: '/developer/projects/approved-projects',
+      url: approvedProjectsPath,
     },
   ],
   rules: [
diff --git a/src/containers/DeveloperPortalProjects/containers/ApprovedProjects/index.tsx b/src/containers/DeveloperPortalProjects/containers/ApprovedProjects/index.tsx
index 5741240..7e5f613 100644
--- a/src/containers/DeveloperPortalProjects/containers/ApprovedProjects/index.tsx
+++ b/src/containers/DeveloperPortalProjects/containers/ApprovedProjects/index.tsx
@@ -5,6 +5,7 @@ import {api as projectsApi} from 'apis/projects';
 import {Loader} from 'components';
 import DeveloperPortalLayout from 'containers/DeveloperPortalProjects/components/DeveloperPortalLayout';
 import {Project} from 'types/projects';
+import {approvedProjectsPath} from '../../constants';
 
 import './ApprovedProjects.scss';
 
@@ -14,6 +15,7 @@ const ApprovedProjects = () => {
   const [isLoading, setIsLoading] = useState<boolean>(true);
   const [error, setError] = useState<string | null>(null);
   const [projects, setProjects] = useState<Project[]>([]);
+  const [projectUrls, setProjectUrls] = useState<{title: string; url: string}[] | null>(null);
 
   useEffect(() => {
     (async function getProjects() {
@@ -21,6 +23,14 @@ const ApprovedProjects = () => {
         const projectsResponse = await projectsApi.getProjects();
         const sortedProjects = projectsResponse.sort((a, b) => (a.title > b.title ? 1 : -1));
         setProjects(sortedProjects);
+        setProjectUrls(
+          sortedProjects.map((project) => {
+            return {
+              title: project.title,
+              url: `${approvedProjectsPath}/${project.pk}`,
+            };
+          }),
+        );
       } catch (err) {
         setError(err.message);
       } finally {
@@ -31,7 +41,7 @@ const ApprovedProjects = () => {
 
   if (error) return <div className="ApprovedProjects__error">{error}</div>;
   return (
-    <DeveloperPortalLayout pageName="Approved Projects">
+    <DeveloperPortalLayout approvedProjectUrls={projectUrls} pageName="Approved Projects">
       <div className="ApprovedProjects">
         <div className="ApprovedProjects__heading">Approved Projects</div>
         {isLoading ? (
diff --git a/src/components/Footer/FooterNavList/FooterNavList.scss b/src/containers/Footer/FooterNavList/FooterNavList.scss
similarity index 100%
rename from src/components/Footer/FooterNavList/FooterNavList.scss
rename to src/containers/Footer/FooterNavList/FooterNavList.scss
diff --git a/src/components/Footer/FooterNavList/FooterNavList.test.tsx b/src/containers/Footer/FooterNavList/FooterNavList.test.tsx
similarity index 100%
rename from src/components/Footer/FooterNavList/FooterNavList.test.tsx
rename to src/containers/Footer/FooterNavList/FooterNavList.test.tsx
diff --git a/src/components/Footer/FooterNavList/index.tsx b/src/containers/Footer/FooterNavList/index.tsx
similarity index 100%
rename from src/components/Footer/FooterNavList/index.tsx
rename to src/containers/Footer/FooterNavList/index.tsx
diff --git a/src/components/Footer/index.tsx b/src/containers/Footer/index.tsx
similarity index 98%
rename from src/components/Footer/index.tsx
rename to src/containers/Footer/index.tsx
index 7be3f45..dda3643 100644
--- a/src/components/Footer/index.tsx
+++ b/src/containers/Footer/index.tsx
@@ -25,6 +25,7 @@ const navLists = [
         title: 'Projects',
         url: '/projects/overview',
       },
+      {title: 'Analytics', url: '/analytics'},
     ],
   },
   {
diff --git a/src/containers/Profile/Profile.scss b/src/containers/Profile/Profile.scss
index 31ccea8..db8e1cb 100644
--- a/src/containers/Profile/Profile.scss
+++ b/src/containers/Profile/Profile.scss
@@ -17,6 +17,7 @@
     box-shadow: 0 0 3px rgba(85, 108, 214, 0.3);
     margin: 12px 0 36px 36px;
     padding-bottom: 30px;
+    position: relative;
 
     @media (max-width: 840px) {
       margin: 36px 36px 0 36px;
@@ -28,6 +29,13 @@
     }
   }
 
+  &__loader {
+    left: 50%;
+    position: absolute;
+    top: 30%;
+    transform: translate(-50%, -30%);
+  }
+
   &__right-section {
     background: var(--color-bg);
     border-radius: 12px;
diff --git a/src/containers/Profile/ProfileInfo/ProfileInfo.scss b/src/containers/Profile/ProfileInfo/ProfileInfo.scss
index c62fb3f..52f9b6b 100644
--- a/src/containers/Profile/ProfileInfo/ProfileInfo.scss
+++ b/src/containers/Profile/ProfileInfo/ProfileInfo.scss
@@ -64,6 +64,13 @@
     width: 91px;
   }
 
+  &__loader-container {
+    left: 50%;
+    position: absolute;
+    top: 30%;
+    transform: translate(-50%, -30%);
+  }
+
   &__member-discord {
     display: flex;
     flex-direction: row;
diff --git a/src/containers/Profile/ProfileInfo/index.tsx b/src/containers/Profile/ProfileInfo/index.tsx
index 8880f77..8e9b4a6 100644
--- a/src/containers/Profile/ProfileInfo/index.tsx
+++ b/src/containers/Profile/ProfileInfo/index.tsx
@@ -1,15 +1,16 @@
-import React, {FC} from 'react';
+import React, {FC, useEffect, useState} from 'react';
 import {useSelector} from 'react-redux';
 import {useParams} from 'react-router-dom';
 import {Icon, IconType} from '@thenewboston/ui';
 
-import {A, Avatar, CopyableAccountNumber, Qr} from 'components';
+import {api as teamsApi, TeamMemberResponse} from 'apis/teams';
+import {A, Avatar, CopyableAccountNumber, Loader, Qr} from 'components';
 import EditUserModal from 'containers/EditUserModal';
 import {useBooleanState} from 'hooks';
 import {selectActiveUser} from 'selectors/state';
 import {User} from 'types/app/User';
-import {TeamMember} from 'types/teams';
-import {getTeamMemberByGithubUsername, getTeamPathname} from 'utils/data';
+import {Team} from 'types/teams';
+import {APIState, INITIAL_API_STATE, APIProgress} from 'types/api';
 
 import './ProfileInfo.scss';
 
@@ -23,9 +24,32 @@ interface ProfileUrlParams {
 
 const ProfileInfo: FC<ComponentProps> = ({user}) => {
   const activeUser = useSelector(selectActiveUser);
-  const memberDetails = getTeamMemberByGithubUsername(user.github_username);
+  const [memberDetails, setMemberDetails] = useState<TeamMemberResponse | null>(null);
+  const [team, setTeam] = useState<Team | null>(null);
   const {userId} = useParams<ProfileUrlParams>();
   const [editUserModalIsOpen, toggleEditUserModal] = useBooleanState(false);
+  const [apiState, setAPIState] = useState<APIState>(INITIAL_API_STATE);
+
+  useEffect(() => {
+    async function getTeamMember() {
+      setAPIState({...apiState, progress: APIProgress.REQ});
+      const teamMember = await teamsApi.getTeamMemberByUserId(userId);
+
+      if (!teamMember) {
+        // user is not a team member, skip the rest
+        setAPIState({...apiState, progress: APIProgress.SUCCESS});
+        return;
+      }
+      const originTeam = await teamsApi.getTeamById(teamMember.team);
+      if (originTeam) {
+        setMemberDetails(teamMember);
+        setTeam(originTeam);
+      }
+      setAPIState({...apiState, progress: APIProgress.SUCCESS});
+    }
+    getTeamMember();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   const renderBackdrop = (isLead: boolean) => {
     return (
@@ -45,13 +69,14 @@ const ProfileInfo: FC<ComponentProps> = ({user}) => {
     );
   };
 
-  const renderMemberDetails = (member: TeamMember) => {
-    const {team, title} = member;
+  const renderMemberDetails = () => {
     return (
       <>
-        <div className="ProfileInfo__member-title" key={team}>
-          {title} on <A href={`/teams/${getTeamPathname(team)}`}>{team}</A>
-        </div>
+        {team && memberDetails && (
+          <div className="ProfileInfo__member-title" key={team.title}>
+            {memberDetails.job_title} on <A href={`/teams/${team.title}`}>{team.title}</A>
+          </div>
+        )}
         <div className="ProfileInfo__member-discord">
           <Icon className="ProfileInfo__member-discord-icon" icon={IconType.discord} size={18} />
           {user.discord_username}
@@ -66,17 +91,27 @@ const ProfileInfo: FC<ComponentProps> = ({user}) => {
     );
   };
 
+  const isLoading = apiState.progress === APIProgress.REQ || apiState.progress === APIProgress.INIT;
+
+  if (isLoading) {
+    return (
+      <div className="ProfileInfo__loader-container">
+        <Loader />
+      </div>
+    );
+  }
+
   return (
     <>
       <div className="ProfileInfo">
         <div className="ProfileInfo__top-section">
-          {renderBackdrop(memberDetails?.isLead || false)}
+          {renderBackdrop(memberDetails?.is_lead || false)}
           <Avatar className="ProfileInfo__profile-picture" size={178} src={user.profile_image} />
         </div>
         <div className="ProfileInfo__details">
           <div className="ProfileInfo__user-details">
             <div className="ProfileInfo__name">{user.display_name}</div>
-            {memberDetails && renderMemberDetails(memberDetails)}
+            {renderMemberDetails()}
           </div>
           {user.account_number && (
             <div className="ProfileInfo__account-details">
diff --git a/src/containers/Profile/index.tsx b/src/containers/Profile/index.tsx
index 9fe18b4..561ded7 100644
--- a/src/containers/Profile/index.tsx
+++ b/src/containers/Profile/index.tsx
@@ -55,7 +55,7 @@ const Profile: FC = () => {
   };
 
   if (errorMessage) return <h4>{errorMessage}</h4>;
-  if (loading) return <Loader />;
+  if (loading) return <Loader className="Profile__loader" />;
 
   return (
     <div className="Profile">
diff --git a/src/containers/Teams/TeamOverview/TeamOverview.scss b/src/containers/Teams/TeamOverview/TeamOverview.scss
index d7add93..ea9e5b2 100644
--- a/src/containers/Teams/TeamOverview/TeamOverview.scss
+++ b/src/containers/Teams/TeamOverview/TeamOverview.scss
@@ -43,6 +43,8 @@
     }
 
     &-title {
+      align-items: center;
+      display: flex;
       font-size: var(--font-size-h4);
       line-height: 125%;
       margin-bottom: 0;
diff --git a/src/containers/Teams/TeamOverview/index.tsx b/src/containers/Teams/TeamOverview/index.tsx
index 3ca3928..a84c45d 100644
--- a/src/containers/Teams/TeamOverview/index.tsx
+++ b/src/containers/Teams/TeamOverview/index.tsx
@@ -1,62 +1,53 @@
-import React, {FC, Fragment, ReactNode, useCallback} from 'react';
+import React, {FC, ReactNode, useCallback} from 'react';
 import {Icon, IconType} from '@thenewboston/ui';
 import {A, DocList} from 'components';
-import {TeamName} from 'types/teams';
-import {getTeamData} from 'utils/data';
+import {CoreTeam} from 'types/teams';
 
 import './TeamOverview.scss';
 
 interface ComponentProps {
-  teamFilter: TeamName;
+  team: CoreTeam;
 }
 
-const TeamOverview: FC<ComponentProps> = ({teamFilter}) => {
-  const {description, platforms, responsibilities} = getTeamData(teamFilter);
+const githubTeamName = 'thenewboston-developers/';
 
+const TeamOverview: FC<ComponentProps> = ({team}) => {
   const renderTeamDescription = useCallback((): ReactNode => {
+    const repoName = team.github.substring(team.github.lastIndexOf(githubTeamName) + githubTeamName.length);
     return (
       <>
         <h4 className="TeamOverview__sub-heading"> About the team </h4>
-        <p className="TeamOverview__description">{description}</p>
-        {platforms.map(({name, label, link}) => (
-          <div className="TeamOverview__social" key={`${name}-${label}`}>
-            <Icon
-              className="TeamOverview__social-icon"
-              icon={name === 'github' ? IconType.github : IconType.discord}
-              size={18}
-            />
-            {name === 'github' ? (
-              <A className="TeamOverview__social-title" href={link}>
-                {label}
-              </A>
-            ) : (
-              <p className="TeamOverview__social-title TeamOverview__social-title--sail-gray"> #{label} </p>
-            )}
+        <p className="TeamOverview__description">{team.about}</p>
+        {team.github && (
+          <div className="TeamOverview__social">
+            <Icon className="TeamOverview__social-icon" icon={IconType.github} size={18} />
+            <A className="TeamOverview__social-title" href={team.github}>
+              {repoName}
+            </A>
           </div>
-        ))}
+        )}
+        {team.discord && (
+          <div className="TeamOverview__social">
+            <Icon className="TeamOverview__social-icon" icon={IconType.discord} size={18} />
+            <div className="TeamOverview__social-title TeamOverview__social-title--sail-gray">{team.discord}</div>
+          </div>
+        )}
       </>
     );
-  }, [description, platforms]);
+  }, [team]);
 
   const renderTeamResponsibilities = useCallback((): ReactNode => {
     return (
       <>
         <h4 className="TeamOverview__sub-heading"> Role and Responsibilities </h4>
         <DocList className="TeamOverview__responsibilities-item" variant="ul">
-          {responsibilities.map(({item, subitems}, i) => (
-            <Fragment key={i}>
-              <li> {item} </li>
-              <ul>
-                {subitems.map((subitem, index) => (
-                  <li key={index}>{subitem}</li>
-                ))}
-              </ul>
-            </Fragment>
+          {team.responsibilities.map((responsibility, i) => (
+            <li key={i}>{responsibility}</li>
           ))}
         </DocList>
       </>
     );
-  }, [responsibilities]);
+  }, [team]);
 
   return (
     <div className="TeamOverview">
diff --git a/src/containers/Teams/TeamTabs/index.tsx b/src/containers/Teams/TeamTabs/index.tsx
index 380bd69..1945d6c 100644
--- a/src/containers/Teams/TeamTabs/index.tsx
+++ b/src/containers/Teams/TeamTabs/index.tsx
@@ -3,7 +3,8 @@ import {useHistory} from 'react-router-dom';
 import clsx from 'clsx';
 
 import './TeamTabs.scss';
-import {TeamName, TeamTabOptions} from 'types/teams';
+import {allTeamsFilter} from 'constants/teams';
+import {TeamTabOptions} from 'types/teams';
 
 interface ComponentProps {
   team: string;
@@ -16,7 +17,7 @@ const TeamTabs: FC<ComponentProps> = ({team, tab}) => {
 
   const tabs = useMemo(
     () =>
-      team === TeamName.all
+      team === allTeamsFilter.title
         ? [TeamTabOptions.members, TeamTabOptions.resources]
         : [TeamTabOptions.overview, TeamTabOptions.members],
     [team],
diff --git a/src/containers/Teams/Teams.scss b/src/containers/Teams/Teams.scss
index cadfaa7..50bb4fe 100644
--- a/src/containers/Teams/Teams.scss
+++ b/src/containers/Teams/Teams.scss
@@ -27,10 +27,37 @@
     display: none;
   }
 
+  &__error {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    height: 80vh;
+    justify-content: center;
+    line-height: 1.5;
+    text-align: center;
+    width: 100%;
+
+    h1 {
+      font-weight: 400;
+      margin-bottom: 24px;
+    }
+
+    h3 {
+      font-weight: 900;
+    }
+  }
+
   &__left-menu {
     grid-column: 1 / span 1;
   }
 
+  &__loader-container {
+    left: 50%;
+    position: absolute;
+    top: 30%;
+    transform: translate(-50%, -30%);
+  }
+
   &__resources {
     &-item {
       display: block;
diff --git a/src/containers/Teams/index.tsx b/src/containers/Teams/index.tsx
index ab4efb3..d957c72 100644
--- a/src/containers/Teams/index.tsx
+++ b/src/containers/Teams/index.tsx
@@ -2,13 +2,14 @@ import React, {FC, ReactNode, useCallback, useEffect, useState} from 'react';
 import {Link, useHistory, useParams} from 'react-router-dom';
 import {Icon, IconType} from '@thenewboston/ui';
 
-import {A, BreadcrumbMenu, Container, EmptyPage, FlatNavLinks, PageTitle} from 'components';
-import {TEAMS} from 'constants/teams';
+import {api as teamsApi, CoreTeamMemberResponse, CoreTeamResponse} from 'apis/teams';
+import {A, BreadcrumbMenu, Container, EmptyPage, FlatNavLinks, Loader, PageTitle} from 'components';
+import {allTeamsFilter} from 'constants/teams';
 import useQueryParams from 'hooks/useQueryParams';
+import {APIState, APIProgress, INITIAL_API_STATE} from 'types/api';
 import {NavigationItem} from 'types/navigation';
 import {PageDataObject} from 'types/page-data';
-import {TeamMember, TeamName, TeamsUrlParams, TeamTabOptions} from 'types/teams';
-import {getTeamMembers} from 'utils/data';
+import {CoreTeamMember, TeamsUrlParams, TeamTabOptions} from 'types/teams';
 
 import InternalTeamMemberPayments from './Resources/InternalTeamMemberPayments';
 import InternalBountyAccountRefills from './Resources/InternalBountyAccountRefills';
@@ -17,15 +18,13 @@ import TeamOverview from './TeamOverview';
 import TeamTabs from './TeamTabs';
 import './Teams.scss';
 
-const teamMembers = getTeamMembers();
-
-const sortTeamMembers = (members: TeamMember[]): TeamMember[] => {
+const sortTeamMembers = (members: CoreTeamMemberResponse[]): CoreTeamMemberResponse[] => {
   const teamLeads = members
-    .filter(({isLead}) => isLead)
-    .sort((member1, member2) => (member1.displayName > member2.displayName ? 1 : -1));
+    .filter(({is_lead}) => is_lead)
+    .sort((member1, member2) => (member1.user.display_name > member2.user.display_name ? 1 : -1));
   const otherMembers = members
-    .filter(({isLead}) => !isLead)
-    .sort((member1, member2) => (member1.displayName > member2.displayName ? 1 : -1));
+    .filter(({is_lead}) => !is_lead)
+    .sort((member1, member2) => (member1.user.display_name > member2.user.display_name ? 1 : -1));
   return teamLeads.concat(otherMembers);
 };
 
@@ -51,13 +50,15 @@ const Teams: FC = () => {
   const history = useHistory();
   const {team: teamParam, tab: tabParam, resource: resourceParam} = useParams<TeamsUrlParams>();
   const queryParams = useQueryParams();
-  const [filteredMembers, setFilteredMembers] = useState<TeamMember[]>(teamMembers);
-  const [teamFilter, setTeamFilter] = useState<TeamName>(TeamName.all);
+  const [filteredMembers, setFilteredMembers] = useState<CoreTeamMember[]>([]);
+  const [teamFilter, setTeamFilter] = useState<string>('');
+  const [teams, setTeams] = useState<CoreTeamResponse[]>([]);
+  const [apiState, setAPIState] = useState<APIState>(INITIAL_API_STATE);
 
   const queryTitle = queryParams.get('title');
 
   useEffect(() => {
-    const isAllTeams = teamParam === TeamName.all;
+    const isAllTeams = teamParam === allTeamsFilter.pathname;
     if (teamParam && tabParam) {
       if (isAllTeams) {
         const isInvalidTabForAll = !(tabParam === TeamTabOptions.members || tabParam === TeamTabOptions.resources);
@@ -82,31 +83,75 @@ const Teams: FC = () => {
   }, [history, tabParam, teamParam]);
 
   useEffect(() => {
-    const team = TEAMS.find(({pathname}) => pathname === teamParam);
+    const fetchAndProcessTeams = async () => {
+      try {
+        setAPIState({...apiState, progress: APIProgress.REQ});
+        const coreTeams = await teamsApi.getCoreTeams();
+        const sortedCoreTeams = coreTeams.sort((team1, team2) => (team1.title > team2.title ? 1 : -1));
+        setTeams(sortedCoreTeams);
+        setAPIState({...apiState, progress: APIProgress.SUCCESS});
+      } catch (err) {
+        setAPIState({error: err.message, progress: APIProgress.ERR});
+      }
+    };
+    fetchAndProcessTeams();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    if (apiState.progress !== APIProgress.SUCCESS) {
+      return;
+    }
+
+    if (teamParam === allTeamsFilter.pathname) {
+      setTeamFilter(allTeamsFilter.title);
+      return;
+    }
+
+    const team = teams.find(({title}) => title === teamParam);
     if (team) {
-      setTeamFilter(team.title as TeamName);
+      setTeamFilter(team.title);
     } else {
       history.push(`/teams`);
     }
-  }, [history, teamParam]);
+  }, [history, teamParam, teams, apiState]);
 
   useEffect(() => {
-    const getFilteredMembers = () =>
-      teamMembers.filter((teamMember) => teamMember.team.toLowerCase() === teamFilter.toLowerCase());
+    if (apiState.progress !== APIProgress.SUCCESS || !teamFilter) {
+      return;
+    }
 
-    const members = teamFilter === TeamName.all ? teamMembers : getFilteredMembers();
-    const sortedMembers = sortTeamMembers(members);
+    const getFilteredMembers = (): CoreTeamMemberResponse[] => {
+      const teamLeads: CoreTeamMemberResponse[] = [];
+      const otherMembers: CoreTeamMemberResponse[] = [];
+      let filteredTeams = teams;
+      if (teamFilter !== allTeamsFilter.title) {
+        filteredTeams = teams.filter(({title}) => title.toLowerCase() === teamFilter.toLowerCase());
+      }
+      filteredTeams.forEach((team) => {
+        team.core_members_meta.forEach((teamMember) => {
+          if (teamMember.is_lead) {
+            teamLeads.push({...teamMember});
+          } else {
+            otherMembers.push({...teamMember});
+          }
+        });
+      });
+      return teamLeads.concat(otherMembers);
+    };
 
+    const members = getFilteredMembers();
+    const sortedMembers = sortTeamMembers(members);
     if (queryTitle) {
-      setFilteredMembers(sortedMembers.filter((member) => member.title.toLowerCase() === queryTitle.toLowerCase()));
+      setFilteredMembers(sortedMembers.filter((member) => member.job_title.toLowerCase() === queryTitle.toLowerCase()));
     } else {
       setFilteredMembers(sortedMembers);
     }
-  }, [queryTitle, teamFilter]);
+  }, [apiState, queryTitle, teamFilter, teams]);
 
   const handleNavOptionClick = useCallback(
     (option: string) => (): void => {
-      if (option === TeamName.all) {
+      if (option === allTeamsFilter.pathname) {
         history.push(`/teams/${option}/${TeamTabOptions.members}`);
       } else {
         history.push(`/teams/${option}/${TeamTabOptions.overview}`);
@@ -116,25 +161,27 @@ const Teams: FC = () => {
   );
 
   const renderTeamFilter = (): ReactNode => {
-    return <FlatNavLinks handleOptionClick={handleNavOptionClick} options={TEAMS} selectedOption={teamParam} />;
+    const navLinkOptions = [{...allTeamsFilter}, ...teams.map((team) => ({pathname: team.title, title: team.title}))];
+    return (
+      <FlatNavLinks handleOptionClick={handleNavOptionClick} options={navLinkOptions} selectedOption={teamParam} />
+    );
   };
 
   const renderTeamMembers = useCallback((): ReactNode => {
     if (!filteredMembers.length) return <EmptyPage />;
-    return filteredMembers.map(
-      ({contributorId, discordUsername, displayName, githubUsername, hourlyRate, isLead, profileImage, title}) => (
-        <TeamMemberCard
-          displayName={displayName}
-          discordUsername={discordUsername}
-          githubUsername={githubUsername}
-          hourlyRate={hourlyRate}
-          isLead={isLead}
-          key={contributorId}
-          profileImage={profileImage}
-          title={title}
-        />
-      ),
-    );
+
+    return filteredMembers.map(({user, hourly_rate, is_lead, job_title, pk}) => (
+      <TeamMemberCard
+        displayName={user.display_name}
+        githubUsername={user.github_username}
+        isLead={is_lead}
+        hourlyRate={hourly_rate}
+        key={pk}
+        profileImage={user.profile_image}
+        discordUsername={user.discord_username}
+        title={job_title}
+      />
+    ));
   }, [filteredMembers]);
 
   const renderResources = useCallback((): ReactNode => {
@@ -179,7 +226,13 @@ const Teams: FC = () => {
         return <div className="Teams__team-list">{renderTeamMembers()}</div>;
       }
       case TeamTabOptions.overview: {
-        return <TeamOverview teamFilter={teamFilter} />;
+        const selectedTeam = teams.find(({title}) => title === teamFilter);
+
+        // team may not be present at this point
+        if (!selectedTeam) {
+          return;
+        }
+        return <TeamOverview team={selectedTeam} />;
       }
       case TeamTabOptions.resources: {
         return <div className="Teams__resources">{renderResources()}</div>;
@@ -187,34 +240,53 @@ const Teams: FC = () => {
       default:
         return <EmptyPage />;
     }
-  }, [renderResources, renderTeamMembers, tabParam, teamFilter]);
+  }, [renderResources, renderTeamMembers, tabParam, teamFilter, teams]);
+
+  const isReadyToDisplay = apiState.progress === APIProgress.SUCCESS && teamFilter && filteredMembers.length;
+
+  if (apiState.progress === APIProgress.ERR) {
+    return (
+      <div className="Teams__error">
+        <h1>Core Team</h1>
+        <h3>{apiState.error}</h3>
+      </div>
+    );
+  }
 
   return (
     <>
       <PageTitle
-        ogDescription={teamFilter === TeamName.all ? 'All Teams' : `${teamFilter} Team`}
-        title={teamFilter === TeamName.all ? 'All Teams' : `${teamFilter} Team`}
+        ogDescription={teamFilter === 'All' ? 'All Teams' : `${teamFilter} Team`}
+        title={teamFilter === 'All' ? 'All Teams' : `${teamFilter} Team`}
       />
-      <Container className="Teams">
-        <BreadcrumbMenu
-          className="Teams__BreadcrumbMenu"
-          menuItems={renderTeamFilter()}
-          pageName={teamFilter}
-          sectionName="Team"
-        />
-        <aside className="Teams__left-menu">{renderTeamFilter()}</aside>
-        <section className="Teams__right-section">
-          {resourceParam ? (
-            <>{renderResourceDoc()}</>
-          ) : (
-            <>
-              <h1 className="Teams__team-heading">{teamFilter === TeamName.all ? 'All' : teamFilter}</h1>
-              <TeamTabs team={teamParam} tab={tabParam || ''} />
-              <div className="Teams__tab-panel">{renderTabPanel()}</div>
-            </>
-          )}
-        </section>
-      </Container>
+      {!isReadyToDisplay ? (
+        <div className="Teams__loader-container">
+          <Loader />
+        </div>
+      ) : (
+        <Container className="Teams">
+          <BreadcrumbMenu
+            className="Teams__BreadcrumbMenu"
+            menuItems={renderTeamFilter()}
+            pageName={teamFilter}
+            sectionName="Team"
+          />
+          <aside className="Teams__left-menu">{renderTeamFilter()}</aside>
+          <section className="Teams__right-section">
+            {resourceParam ? (
+              <>{renderResourceDoc()}</>
+            ) : (
+              <>
+                <h1 className="Teams__team-heading">
+                  {teamFilter === allTeamsFilter.title ? allTeamsFilter.title : teamFilter}
+                </h1>
+                <TeamTabs team={teamParam} tab={tabParam || ''} />
+                <div className="Teams__tab-panel">{renderTabPanel()}</div>
+              </>
+            )}
+          </section>
+        </Container>
+      )}
     </>
   );
 };
diff --git a/src/containers/TopNav/TopNavDesktopItems/index.tsx b/src/containers/TopNav/TopNavDesktopItems/index.tsx
index d34a629..9b4d028 100644
--- a/src/containers/TopNav/TopNavDesktopItems/index.tsx
+++ b/src/containers/TopNav/TopNavDesktopItems/index.tsx
@@ -59,6 +59,12 @@ const getStartedPopoverItems: TopNavPopoverItemType[] = [
     title: 'Projects',
     to: '/projects',
   },
+  {
+    description: 'Real time analytics',
+    iconType: IconType.chartAreaspline,
+    title: 'Analytics',
+    to: '/analytics',
+  },
 ];
 
 const resourcesPopoverItems: TopNavPopoverItemType[] = [
diff --git a/src/containers/TopNav/TopNavMobileMenu/index.tsx b/src/containers/TopNav/TopNavMobileMenu/index.tsx
index ab90548..c9f58b4 100644
--- a/src/containers/TopNav/TopNavMobileMenu/index.tsx
+++ b/src/containers/TopNav/TopNavMobileMenu/index.tsx
@@ -56,6 +56,7 @@ const TopNavMobileMenu: FC<ComponentProps> = ({closeMenu, menuOpen, smallDevice,
               <>
                 {renderMobileLink('Tasks', '/tasks')}
                 {renderMobileLink('Projects', '/projects/overview')}
+                {renderMobileLink('Analytics', '/analytics')}
               </>,
             )}
             {renderColumn(
diff --git a/src/data/teams.json b/src/data/teams.json
index e451012..e69de29 100644
--- a/src/data/teams.json
+++ b/src/data/teams.json
@@ -1,522 +0,0 @@
-[
-  {
-    "title": "Audit",
-    "description": "Ensure the accuracy and integrity of all government and team payments.",
-    "platforms": [
-      {
-        "name": "github",
-        "label": "Contributor-Payments",
-        "link": "https://github.com/thenewboston-developers/Contributor-Payments"
-      },
-      {
-        "name": "github",
-        "label": "Projects",
-        "link": "https://github.com/thenewboston-developers/Projects"
-      }
-    ],
-    "contributors": [
-      {
-        "title": "Lead Auditor",
-        "isLead": true,
-        "createdDate": "2020-07-08T02:14:59.307535Z",
-        "contributor": {
-          "contributorId": "8",
-          "discordUsername": "TristanS#6395",
-          "displayName": "Tristan Spearing",
-          "githubUsername": "tspearing",
-          "profileImage": "https://avatars1.githubusercontent.com/u/77364430?&v=4"
-        },
-        "hourlyRate": 900
-      }
-    ],
-    "responsibilities": [
-      {
-        "item": "Audit government payouts to teams",
-        "subitems": []
-      },
-      {
-        "item": "Audit government payouts to projects",
-        "subitems": []
-      },
-      {
-        "item": "Audit team lead payments to team members and bug bounties/tasks",
-        "subitems": []
-      },
-      {
-        "item": "Review timesheets and on approval, submit to the government for final review and payout",
-        "subitems": []
-      }
-    ]
-  },
-  {
-    "title": "Back-End",
-    "description": "Architect, build, and maintain the backend architecture of thenewboston.",
-    "platforms": [
-      {
-        "name": "github",
-        "label": "Back-End",
-        "link": "https://github.com/thenewboston-developers/Website-API"
-      }
-    ],
-    "contributors": [
-      {
-        "title": "Lead Website API Developer",
-        "isLead": true,
-        "createdDate": "2020-07-08T02:14:59.307535Z",
-        "contributor": {
-          "contributorId": "5",
-          "discordUsername": "Justin N.#6061",
-          "displayName": "Justin Ndwiga",
-          "githubUsername": "ThaDeveloper",
-          "profileImage": "https://avatars.githubusercontent.com/u/12385482?v=4"
-        },
-        "hourlyRate": 900
-      }
-    ],
-    "responsibilities": [
-      {
-        "item": "Create and implement the source code for all API endpoints",
-        "subitems": []
-      },
-      {
-        "item": "Test source code and debug code",
-        "subitems": []
-      },
-      {
-        "item": "Evaluate existing applications for performance updates and modifications",
-        "subitems": []
-      }
-    ]
-  },
-  {
-    "title": "Blockchain",
-    "description": "Build and maintain the blockchain for thenewboston digital currency network.",
-    "platforms": [
-      {
-        "name": "github",
-        "label": "thenewboston-node",
-        "link": "https://github.com/thenewboston-developers/thenewboston-node"
-      }
-    ],
-    "contributors": [
-      {
-        "title": "Lead Blockchain Developer",
-        "isLead": true,
-        "createdDate": "2020-07-08T02:14:59.307535Z",
-        "contributor": {
-          "contributorId": "2",
-          "discordUsername": "dmugtasimov#4424",
-          "displayName": "Dmitry Mugtasimov",
-          "githubUsername": "dmugtasimov",
-          "profileImage": "https://avatars.githubusercontent.com/u/749833?v=4"
-        },
-        "hourlyRate": 1200
-      },
-      {
-        "title": "Blockchain Developer",
-        "isLead": false,
-        "createdDate": "2020-07-08T02:14:59.307535Z",
-        "contributor": {
-          "contributorId": "20",
-          "discordUsername": "andbortnik#8958",
-          "displayName": "Andrey Bortnikov",
-          "githubUsername": "andbortnik",
-          "profileImage": "https://avatars.githubusercontent.com/u/17045710?v=4"
-        },
-        "hourlyRate": 1000
-      }
-    ],
-    "responsibilities": [
-      {
-        "item": "Building reusable code and libraries for future use",
-        "subitems": []
-      },
-      {
-        "item": "Optimization of the application for maximum speed and scalability",
-        "subitems": []
-      },
-      {
-        "item": "Implementation of security and data protection",
-        "subitems": []
-      },
-      {
-        "item": "Design and implementation of data storage solutions",
-        "subitems": []
-      }
-    ]
-  },
-  {
-    "title": "Community",
-    "description": "Create the strategy, oversee the overall TNB product, create standards, and improve cross collaboration between teams.",
-    "platforms": [
-      {
-        "name": "github",
-        "label": "Community",
-        "link": "https://github.com/thenewboston-developers/Management/projects/7"
-      }
-    ],
-    "contributors": [
-      {
-        "title": "Head of Community",
-        "isLead": true,
-        "createdDate": "2020-07-08T02:14:59.307535Z",
-        "contributor": {
-          "contributorId": "1",
-          "discordUsername": "Bucky#2734",
-          "displayName": "Bucky Roberts",
-          "githubUsername": "buckyroberts",
-          "profileImage": "https://avatars2.githubusercontent.com/u/8547538?v=4"
-        },
-        "hourlyRate": 1000
-      },
-      {
-        "title": "Product Manager",
-        "isLead": false,
-        "createdDate": "2020-07-08T02:14:59.307535Z",
-        "contributor": {
-          "contributorId": "14",
-          "discordUsername": "Manish#4379",
-          "displayName": "Manish Ram",
-          "githubUsername": "manishram",
-          "profileImage": "https://avatars0.githubusercontent.com/u/22790904?s=400&u=643810e6c9d5686df409132b01863f9e065df6c1&v=4"
-        },
-        "hourlyRate": 800
-      },
-      {
-        "title": "Head of Human Resources",
-        "isLead": false,
-        "hourlyRate": 600,
-        "contributor": {
-          "contributorId": "21",
-          "discordUsername": "Ian#2921",
-          "displayName": "Ian Schoonover",
-          "githubUsername": "nax3t",
-          "profileImage": "https://avatars.githubusercontent.com/u/6356890?s=180"
-        }
-      }
-    ],
-    "responsibilities": [
-      {
-        "item": "Get people to where they need to be",
-        "subitems": []
-      },
-      {
-        "item": "Provide user feedback and analytics",
-        "subitems": []
-      },
-      {
-        "item": "Optimize user feedback loop",
-        "subitems": []
-      },
-      {
-        "item": "Recruit candidates",
-        "subitems": []
-      },
-      {
-        "item": "Manage faucet payments",
-        "subitems": []
-      },
-      {
-        "item": "Update policies",
-        "subitems": []
-      },
-      {
-        "item": "Respond to comments and questions from the community",
-        "subitems": []
-      },
-      {
-        "item": "Welcome new members and encourage collaboration and community engagement",
-        "subitems": []
-      }
-    ]
-  },
-  {
-    "title": "Design",
-    "description": "Create and manage all designs within thenewboston website and applications.",
-    "platforms": [
-      {
-        "name": "github",
-        "label": "Design",
-        "link": "https://github.com/thenewboston-developers/Design"
-      }
-    ],
-    "contributors": [
-      {
-        "title": "Design Lead",
-        "isLead": true,
-        "createdDate": "2020-07-08T02:14:59.307535Z",
-        "contributor": {
-          "contributorId": "6",
-          "discordUsername": "Kristy#9261",
-          "displayName": "Kristy Lee",
-          "githubUsername": "kristykjlee",
-          "profileImage": "https://avatars1.githubusercontent.com/u/68207101?s=460&u=f001c3eb8dfc9444d1abff7ec2ef5e4f0f1ccd5e&v=4"
-        },
-        "hourlyRate": 1200
-      },
-      {
-        "title": "UI/UX Designer",
-        "isLead": false,
-        "createdDate": "2020-07-08T02:14:59.307535Z",
-        "contributor": {
-          "contributorId": "13",
-          "discordUsername": "Mr. K#3316",
-          "displayName": "Kashif Ahmad",
-          "githubUsername": "kashikushi",
-          "profileImage": "https://avatars.githubusercontent.com/u/35629401?v=4"
-        },
-        "hourlyRate": 1200
-      }
-    ],
-    "responsibilities": [
-      {
-        "item": "Help identify what needs to be built based off user feedback",
-        "subitems": []
-      },
-      {
-        "item": "Design wireframes",
-        "subitems": []
-      },
-      {
-        "item": "User test designs with the community",
-        "subitems": []
-      },
-      {
-        "item": "Write product requirements for engineering handoff",
-        "subitems": []
-      },
-      {
-        "item": "Create hi-fi designs while maintaining an updated style guide",
-        "subitems": []
-      },
-      {
-        "item": "Give design reviews to members within the community",
-        "subitems": []
-      }
-    ]
-  },
-  {
-    "title": "DevOps",
-    "description": "Architect, maintain, and monitor our various computer systems. Strive to improve network performance while communicating any issues to various team members.",
-    "platforms": [
-      {
-        "name": "github",
-        "label": "DevOps",
-        "link": "https://github.com/thenewboston-developers/DevOps"
-      }
-    ],
-    "contributors": [
-      {
-        "title": "Lead DevOps Engineer",
-        "isLead": true,
-        "createdDate": "2020-07-08T02:14:59.307535Z",
-        "contributor": {
-          "contributorId": "9",
-          "discordUsername": "truyenhv#5481",
-          "displayName": "Truyen Hoang",
-          "githubUsername": "truyenhv",
-          "profileImage": "https://avatars.githubusercontent.com/u/32347748?v=4"
-        },
-        "hourlyRate": 900
-      },
-      {
-        "title": "DevOps Engineer",
-        "isLead": false,
-        "createdDate": "2021-03-02T02:14:59.307535Z",
-        "contributor": {
-          "contributorId": "7",
-          "discordUsername": "Muhammad Anas Azam Bhatti#3383",
-          "displayName": "Muhammad Anas Azam Bhatti",
-          "githubUsername": "ma2b0043",
-          "profileImage": "https://avatars.githubusercontent.com/u/60430226?v=4"
-        },
-        "hourlyRate": 800
-      }
-    ],
-    "responsibilities": [
-      {
-        "item": "Plan and build the network infrastructure",
-        "subitems": []
-      },
-      {
-        "item": "Maintain CI/CD pipelines",
-        "subitems": []
-      },
-      {
-        "item": "Implement network monitoring tools",
-        "subitems": []
-      }
-    ]
-  },
-  {
-    "title": "Front-End",
-    "description": "Implement visual elements that users see and interact with in a web application.",
-    "platforms": [
-      {
-        "name": "github",
-        "label": "Account-Manager",
-        "link": "https://github.com/thenewboston-developers/Account-Manager"
-      },
-      {
-        "name": "github",
-        "label": "Website",
-        "link": "https://github.com/thenewboston-developers/Website"
-      }
-    ],
-    "contributors": [
-      {
-        "title": "Front-End Lead",
-        "isLead": true,
-        "createdDate": "2020-07-08T02:14:59.307535Z",
-        "contributor": {
-          "contributorId": "4",
-          "discordUsername": "Justin K(Angle943)#2939",
-          "displayName": "Justin",
-          "githubUsername": "angle943",
-          "profileImage": "https://avatars2.githubusercontent.com/u/5943963?v=4"
-        },
-        "hourlyRate": 1000
-      },
-      {
-        "title": "Front-End Developer",
-        "isLead": false,
-        "createdDate": "2020-07-08T02:14:59.307535Z",
-        "contributor": {
-          "contributorId": "17",
-          "discordUsername": "Sanjeev#4930",
-          "displayName": "Sanjeev Sharma",
-          "githubUsername": "thesanjeevsharma",
-          "profileImage": "https://avatars3.githubusercontent.com/u/29539278?v=4"
-        },
-        "hourlyRate": 900
-      },
-      {
-        "title": "Front-End Developer",
-        "isLead": false,
-        "createdDate": "2020-27-11",
-        "contributor": {
-          "contributorId": "12",
-          "discordUsername": "jamessspanggg#1464",
-          "displayName": "James Pang",
-          "githubUsername": "jamessspanggg",
-          "profileImage": "https://avatars0.githubusercontent.com/u/32864116?v=4"
-        },
-        "hourlyRate": 900
-      },
-      {
-        "title": "Mobile Developer",
-        "isLead": false,
-        "createdDate": "2020-07-08T02:14:59.307535Z",
-        "contributor": {
-          "contributorId": "19",
-          "discordUsername": "zinoadidi#1554",
-          "displayName": "Zino Adidi",
-          "githubUsername": "zinoadidi",
-          "profileImage": "https://avatars.githubusercontent.com/u/30411401?v=4"
-        },
-        "hourlyRate": 800
-      },
-      {
-        "title": "Technical Writer",
-        "isLead": false,
-        "createdDate": "2020-07-08T02:14:59.307535Z",
-        "contributor": {
-          "contributorId": "18",
-          "discordUsername": "Vyz(led76marx)#7396",
-          "displayName": "Vyz",
-          "githubUsername": "led76marx",
-          "profileImage": "https://avatars.githubusercontent.com/u/20023713?v=4"
-        },
-        "hourlyRate": 900
-      },
-      {
-        "title": "QA Engineer",
-        "isLead": false,
-        "createdDate": "2020-07-08T02:14:59.307535Z",
-        "contributor": {
-          "contributorId": "16",
-          "discordUsername": "!𝕽𝖆𝖏𝖆𝕲#1111",
-          "displayName": "Rajput Usman",
-          "githubUsername": "Rajputusman",
-          "profileImage": "https://avatars.githubusercontent.com/u/65516140?v=4"
-        },
-        "hourlyRate": 600
-      }
-    ],
-    "responsibilities": [
-      {
-        "item": "Determine the structure and architecture of web pages",
-        "subitems": []
-      },
-      {
-        "item": "Develop features to enhance the user experience",
-        "subitems": []
-      },
-      {
-        "item": "Troubleshoot website problems",
-        "subitems": []
-      },
-      {
-        "item": "Work with graphics and other designers to strike a balance between functional and aesthetic design",
-        "subitems": []
-      }
-    ]
-  },
-  {
-    "title": "Marketing",
-    "description": "Manage all marketing content including email, SEO, and media buys. Develop and execute marketing strategies as well as focus on user behaviour and contact collection.",
-    "platforms": [
-      {
-        "name": "github",
-        "label": "Marketing",
-        "link": "https://github.com/thenewboston-developers/Marketing"
-      }
-    ],
-    "contributors": [
-      {
-        "title": "Head of Marketing",
-        "isLead": true,
-        "createdDate": "2020-07-08T02:14:59.307535Z",
-        "contributor": {
-          "contributorId": "11",
-          "discordUsername": "MsChrishaph#0709",
-          "displayName": "Chrisha",
-          "githubUsername": "Chrisha1212",
-          "profileImage": "https://avatars.githubusercontent.com/u/72809444?s=460&u=e2138725222fb09a546d7d1e164cf64f5583648b&v=4"
-        },
-        "hourlyRate": 800
-      },
-      {
-        "title": "Digital Marketing Specialist",
-        "isLead": false,
-        "createdDate": "2020-07-08T02:14:59.307535Z",
-        "contributor": {
-          "contributorId": "10",
-          "discordUsername": "Bojan#6836",
-          "displayName": "Bojan Ilijevski",
-          "githubUsername": "bojan-ilijevski",
-          "profileImage": "https://avatars2.githubusercontent.com/u/58598872?&v=4"
-        },
-        "hourlyRate": 800
-      }
-    ],
-    "responsibilities": [
-      {
-        "item": "Drive traffic",
-        "subitems": []
-      },
-      {
-        "item": "Send email campaigns",
-        "subitems": []
-      },
-      {
-        "item": "Help drive traffic through social media",
-        "subitems": []
-      },
-      {
-        "item": "Requests graphics and images from the design team",
-        "subitems": []
-      }
-    ]
-  }
-]
diff --git a/src/types/analytics.ts b/src/types/analytics.ts
new file mode 100644
index 0000000..7186d34
--- /dev/null
+++ b/src/types/analytics.ts
@@ -0,0 +1,20 @@
+export interface AnalyticsUrlParams {
+  type?: string;
+}
+
+export interface Analytics {
+  data: AnalyticsData[];
+  pk: string;
+  title: string;
+}
+
+export interface AnalyticsCategory {
+  key: string;
+  title: string;
+  analytics: Analytics[];
+}
+
+export interface AnalyticsData {
+  date: string;
+  value: number;
+}
diff --git a/src/types/api.ts b/src/types/api.ts
index a070720..8276e83 100644
--- a/src/types/api.ts
+++ b/src/types/api.ts
@@ -18,3 +18,24 @@ export interface PaginatedResponse<T> {
   previous: number | null;
   results: T[];
 }
+
+export interface APIResponse<T> {
+  data?: T;
+}
+
+export enum APIProgress {
+  INIT = 'INIT',
+  REQ = 'REQ',
+  ERR = 'ERR',
+  SUCCESS = 'SUCCESS',
+}
+
+export interface APIState {
+  error?: string;
+  progress: APIProgress;
+}
+
+export const INITIAL_API_STATE: APIState = {
+  error: undefined,
+  progress: APIProgress.INIT,
+};
diff --git a/src/types/teams.ts b/src/types/teams.ts
index 96772eb..30b31b6 100644
--- a/src/types/teams.ts
+++ b/src/types/teams.ts
@@ -1,3 +1,17 @@
+import {User} from 'types/app/User';
+
+export type Team = {
+  team_members_meta: TeamMember[];
+  created_date: string;
+  modified_date: string;
+  pk: string;
+  title: string;
+  about: string;
+  responsibilities: string[];
+  github: string;
+  discord: string;
+};
+
 export enum TeamName {
   all = 'All',
   audit = 'Audit',
@@ -10,51 +24,26 @@ export enum TeamName {
   marketing = 'Marketing',
 }
 
-interface Contributor {
-  contributorId: string;
-  discordUsername: string;
-  displayName: string;
-  githubUsername: string;
-  profileImage: string;
-}
+export type CoreTeam = Omit<Team, 'team_members_meta'> & {
+  core_members_meta: CoreTeamMember[];
+};
 
-export interface TeamPlatform {
-  label: string;
-  link: string;
-  name: string;
-}
+export type TeamMember = {
+  is_lead: boolean;
+  job_title: string;
+  pk: string;
+  user: User;
+};
 
-export interface TeamResponsibility {
-  item: string;
-  subitems: string[];
-}
+export type CoreTeamMember = TeamMember & {
+  weekly_commitment_hours: number;
+  hourly_rate: number;
+  core_team: string; // foreign key to core team
+};
 
-export interface Team {
-  contributors: TeamContributor[];
-  description: string;
-  platforms: TeamPlatform[];
-  title: string;
-  responsibilities: TeamResponsibility[];
-}
-
-export interface TeamContributor {
-  contributor: Contributor;
-  createdDate: string;
-  isLead: boolean;
-  title: string;
-}
-
-export interface TeamMember {
-  contributorId: number;
-  discordUsername: string;
-  displayName: string;
-  githubUsername: string;
-  hourlyRate: number;
-  isLead: boolean;
-  profileImage: string;
-  team: string;
-  title: string;
-}
+export type ProjectTeamMember = TeamMember & {
+  project: string;
+};
 
 export interface TeamsUrlParams {
   resource?: string;
diff --git a/src/utils/data.ts b/src/utils/data.ts
index 1ff7c33..f7d7c8b 100644
--- a/src/utils/data.ts
+++ b/src/utils/data.ts
@@ -1,14 +1,9 @@
 import parse from 'date-fns/parse';
-
-import {TEAMS} from 'constants/teams';
 import {RawTask, Task, TaskDict} from 'types/github';
 import {Opening} from 'types/openings';
-import {NavOption} from 'types/option';
-import {TeamMember, TeamName, TeamPlatform, TeamResponsibility} from 'types/teams';
 
 import openings from 'data/openings.json';
 import tasks from 'data/tasks.json';
-import teams from 'data/teams.json';
 
 export const getOpenings = (): Opening[] => {
   return openings as Opening[];
@@ -28,57 +23,3 @@ export const getTasks = (): TaskDict => {
 
   return results;
 };
-
-export const getTeamMemberByGithubUsername = (githubParam: string): TeamMember | null => {
-  teams.forEach((team) => {
-    const {contributors} = team;
-    contributors.forEach((teamMember) => {
-      const {githubUsername} = teamMember.contributor;
-      if (githubUsername === githubParam) {
-        const {contributor} = teamMember;
-
-        return {
-          ...contributor,
-          contributorId: parseInt(contributor.contributorId, 10),
-        } as TeamMember;
-      }
-    });
-  });
-
-  return null;
-};
-
-export const getTeamMembers = (): TeamMember[] => {
-  const teamMembers: TeamMember[] = [];
-
-  teams.forEach((team) => {
-    team.contributors.forEach((teamMember) => {
-      const {title, isLead, contributor, hourlyRate} = teamMember;
-      teamMembers.push({
-        ...contributor,
-        contributorId: parseInt(contributor.contributorId, 10),
-        hourlyRate,
-        isLead,
-        team: team.title,
-        title,
-      });
-    });
-  });
-
-  return teamMembers.sort((memberA, memberB) => memberA.contributorId - memberB.contributorId);
-};
-
-export const getTeamData = (
-  teamTitle: TeamName,
-): {description: string; platforms: TeamPlatform[]; responsibilities: TeamResponsibility[]} => {
-  const team = teams.find(({title}) => title === teamTitle);
-  if (team) {
-    return {description: team.description, platforms: team.platforms, responsibilities: team.responsibilities};
-  }
-  return {description: '', platforms: [], responsibilities: []};
-};
-
-export const getTeamPathname = (teamTitle: string): string => {
-  const pathname = TEAMS.find((team: NavOption) => team.title === teamTitle)?.pathname;
-  return pathname || '';
-};


Test patch:
diff --git a/src/components/Footer/Footer.scss b/src/containers/Footer/Footer.scss
similarity index 100%
rename from src/components/Footer/Footer.scss
rename to src/containers/Footer/Footer.scss
diff --git a/src/components/Footer/Footer.test.tsx b/src/containers/Footer/Footer.test.tsx
similarity index 98%
rename from src/components/Footer/Footer.test.tsx
rename to src/containers/Footer/Footer.test.tsx
index aab2a8f..e4621f2 100644
--- a/src/components/Footer/Footer.test.tsx
+++ b/src/containers/Footer/Footer.test.tsx
@@ -4,7 +4,7 @@ import {BrowserRouter as Router} from 'react-router-dom';
 import '@testing-library/jest-dom/extend-expect';
 
 import {SocialMedia} from 'types/social-media';
-import Footer from './index';
+import Footer from '.';
 
 interface Props {
   className?: string;