diff --git a/src/components/HomepageFeatures/index.js b/src/components/HomepageFeatures/index.js
index 78f410ba6..c7ef291fe 100644
--- a/src/components/HomepageFeatures/index.js
+++ b/src/components/HomepageFeatures/index.js
@@ -8,28 +8,25 @@ const FeatureList = [
     Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default,
     description: (
       <>
-        Docusaurus was designed from the ground up to be easily installed and
-        used to get your website up and running quickly.
+        This is a simple and easy to use website to find resources for web3
       </>
     ),
   },
   {
-    title: 'Focus on What Matters',
+    title: 'Managed by a community',
     Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default,
     description: (
       <>
-        Docusaurus lets you focus on your docs, and we&apos;ll do the chores. Go
-        ahead and move your docs into the <code>docs</code> directory.
+        The 4c community is the community behind the free web3 resources site
       </>
     ),
   },
   {
-    title: 'Powered by React',
+    title: 'Powered by Docusaurus',
     Svg: require('@site/static/img/undraw_docusaurus_react.svg').default,
     description: (
       <>
-        Extend or customize your website layout by reusing React. Docusaurus can
-        be extended while reusing the same header and footer.
+        The React Docusaurus framework for making documentation is what this site was built with.
       </>
     ),
   },
diff --git a/src/css/custom.css b/src/css/custom.css
index d738e71f8..cd1d0f91b 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -5,29 +5,790 @@
  */
 
 /* You can override the default Infima variables here. */
+
+:root {
+  /*
+  See css var + hsl color palette technique:
+  https://blog.maximeheckel.com/posts/the-power-of-composition-with-css-variables/
+   */
+
+  --site-primary-hue-saturation: 1, 1%;
+  --site-primary-hue-saturation-light: 167, 56%;
+  --ifm-font-size-base: 112.5%;
+  --ifm-font-family-base: system-ui, 'Segoe UI', Tahoma, sans-serif;
+
+  --doc-sidebar-width: 330px !important;
+
+  --ifm-color-primary: hsl(var(--site-primary-hue-saturation), 45%);
+  --ifm-color-primary-dark: hsl(var(--site-primary-hue-saturation), 41%);
+  --ifm-color-primary-darker: hsl(var(--site-primary-hue-saturation), 38%);
+  --ifm-color-primary-darkest: hsl(var(--site-primary-hue-saturation), 32%);
+
+  --ifm-color-primary-light: hsl(var(--site-primary-hue-saturation-light), 54%);
+  --ifm-color-primary-lighter: hsl(
+    var(--site-primary-hue-saturation-light),
+    62%
+  );
+  --ifm-color-primary-lightest: hsl(
+    var(--site-primary-hue-saturation-light),
+    73%
+  );
+
+  --ifm-color-feedback-background: #fff;
+}
+
+/* Dark theme */
+html[data-theme='dark'] {
+  --ifm-color-feedback-background: #f0f8ff;
+  --ifm-background-color: #0e1217;
+}
+
+.docusaurus-highlight-code-line {
+  background-color: rgba(0, 0, 0, 0.1);
+  display: block;
+  margin: 0 calc(-1 * var(--ifm-pre-padding));
+  padding: 0 var(--ifm-pre-padding);
+}
+
+html[data-theme='dark'] .docusaurus-highlight-code-line {
+  background-color: rgba(0, 0, 0, 0.3);
+}
+
+.header-github-link:hover {
+  opacity: 0.6;
+}
+
+.header-github-link:before {
+  content: '';
+  width: 24px;
+  height: 24px;
+  display: flex;
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
+    no-repeat;
+}
+
+html[data-theme='dark'] .header-github-link:before {
+  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
+    no-repeat;
+}
+
+.footer--dark {
+  --ifm-footer-background-color: #17191f;
+}
+
+.unique-tabs .tabs__item {
+  line-height: 16px;
+  margin-right: 8px;
+}
+
+.unique-tabs .tabs__item--active {
+  border: 0;
+  color: #fff;
+  border-radius: var(--ifm-global-radius);
+  background-color: var(--ifm-tabs-color-active);
+}
+
+html[data-theme='light'] .themedDocusaurus [fill='#FFFF50'] {
+  fill: greenyellow;
+}
+
+html[data-theme='dark'] .themedDocusaurus [fill='#FFFF50'] {
+  fill: seagreen;
+}
+
+html[data-theme='light'] .DocSearch {
+  /* --docsearch-primary-color: var(--ifm-color-primary); */
+  /* --docsearch-text-color: var(--ifm-font-color-base); */
+  --docsearch-muted-color: var(--ifm-color-secondary-darkest);
+  --docsearch-container-background: rgba(94, 100, 112, 0.7);
+  /* Modal */
+  --docsearch-modal-background: var(--ifm-color-secondary-lighter);
+  /* Search box */
+  --docsearch-searchbox-background: var(--ifm-color-secondary);
+  --docsearch-searchbox-focus-background: var(--ifm-color-white);
+  /* Hit */
+  --docsearch-hit-color: var(--ifm-font-color-base);
+  --docsearch-hit-active-color: var(--ifm-color-white);
+  --docsearch-hit-background: var(--ifm-color-white);
+  /* Footer */
+  --docsearch-footer-background: var(--ifm-color-white);
+}
+
+html[data-theme='dark'] .DocSearch {
+  /* --ifm-background-surface-color: #242526; */
+  --ifm-background-surface-color: rgba(20, 73, 180, 0.7);
+  --docsearch-text-color: var(--ifm-font-color-base);
+  --docsearch-muted-color: var(--ifm-color-secondary-darkest);
+  --docsearch-container-background: rgba(47, 55, 69, 0.7);
+  /* Modal */
+  --docsearch-modal-background: var(--ifm-background-color);
+  /* Search box */
+  --docsearch-searchbox-background: var(--ifm-background-color);
+  --docsearch-searchbox-focus-background: var(--ifm-color-black);
+  /* Hit */
+  --docsearch-hit-color: var(--ifm-font-color-base);
+  --docsearch-hit-active-color: var(--ifm-color-white);
+  --docsearch-hit-background: var(--ifm-color-emphasis-100);
+  /* Footer */
+  --docsearch-footer-background: var(--ifm-background-surface-color);
+  --docsearch-key-gradient: linear-gradient(
+    -26.5deg,
+    var(--ifm-color-emphasis-200) 0%,
+    var(--ifm-color-emphasis-100) 100%
+  );
+}
+
+.navbar {
+  background-color:  #0e1217;
+}
+
+html[data-theme='light'] .navbar {
+  background-color: #fff;
+}
+
+div[class^='announcementBar_'] {
+  --site-announcement-bar-stripe-color1: hsl(
+    var(--site-primary-hue-saturation),
+    85%
+  );
+  --site-announcement-bar-stripe-color2: hsl(
+    var(--site-primary-hue-saturation),
+    95%
+  );
+  background: repeating-linear-gradient(
+    35deg,
+    var(--site-announcement-bar-stripe-color1),
+    var(--site-announcement-bar-stripe-color1) 20px,
+    var(--site-announcement-bar-stripe-color2) 10px,
+    var(--site-announcement-bar-stripe-color2) 40px
+  );
+  font-weight: bold;
+}
+
+.red > a {
+  color: red;
+}
+
+img[src] {
+  border-radius: 16px;
+}
+
+img[src='/img/logo.png'] {
+  border-radius: 0px;
+  border: none;
+}
+
 :root {
-  --ifm-color-primary: #2e8555;
-  --ifm-color-primary-dark: #29784c;
-  --ifm-color-primary-darker: #277148;
-  --ifm-color-primary-darkest: #205d3b;
-  --ifm-color-primary-light: #33925d;
-  --ifm-color-primary-lighter: #359962;
-  --ifm-color-primary-lightest: #3cad6e;
-  --ifm-code-font-size: 95%;
-  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
-}
-
-/* For readability concerns, you should choose a lighter palette in dark mode. */
-[data-theme='dark'] {
-  --ifm-color-primary: #25c2a0;
-  --ifm-color-primary-dark: #21af90;
-  --ifm-color-primary-darker: #1fa588;
-  --ifm-color-primary-darkest: #1a8870;
-  --ifm-color-primary-light: #29d5b0;
-  --ifm-color-primary-lighter: #32d8b4;
-  --ifm-color-primary-lightest: #4fddbf;
-  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+  --white: #ffffff;
+  --black: #000000;
+
+  /* dark grey - "pepper" */
+  /* color: #ffffff; */
+  --pepper10: #525866;
+  --pepper20: #494e5b;
+  --pepper30: #404551;
+  --pepper40: #383c47;
+  --pepper50: #2d313a;
+  --pepper60: #22262d;
+  --pepper70: #1c1f26;
+  --pepper80: #17191f;
+  --pepper90: #0e1217;
+
+  /* light grey / very light blue - "salt" */
+  /* color: --pepper90 / #0E1217 */
+  --salt10: #f5f8fc;
+  --salt20: #edf0f7;
+  --salt30: #e4e9f2;
+  --salt40: #dbe1ed;
+  --salt50: #cfd6e6;
+  --salt60: #c2cade;
+  --salt70: #b9c2d9;
+  --salt80: #b0bbd4;
+  --salt90: #a8b3cf;
+
+  /* blues - "water" */
+  /* color: --pepper90 / #0E1217 */
+  --water10: #68a6fc;
+  --water20: #5c9bfa;
+  --water30: #508cf9;
+  --water40: #427ef7;
+  /* color: #ffffff; */
+  --water50: #3169f5;
+  --water60: #2556ed;
+  --water70: #1d49e6;
+  --water80: #153ce0;
+  --water90: #0d31d9;
+
+  /* dark purples - "onion" */
+  /* color: --pepper90 / #0E1217 */
+  --onion10: #9d70f8;
+  --onion20: #8d62f4;
+  /* color: #ffffff; */
+  --onion30: #8055f0;
+  --onion40: #7147ed;
+  --onion50: #5f37e9;
+  --onion60: #4e2cd7;
+  --onion70: #4325c8;
+  --onion80: #3b1eba;
+  --onion90: #3319ad;
+
+  /* pinks - "cabbage" */
+  /* color: --pepper90 / #0E1217 */
+  --cabbage10: #e669fb;
+  --cabbage20: #e05cf8;
+  --cabbage30: #d74cf6;
+  --cabbage40: #ce3df3;
+  --cabbage50: #c029f0;
+  /* color: #ffffff; */
+  --cabbage60: #ac1de4;
+  --cabbage70: #9e15d9;
+  --cabbage80: #900dcf;
+  --cabbage90: #8505c4;
+
+  /* hot red / pink - "bacon" */
+  /* color: --pepper90 / #0E1217 */
+  --bacon10: #fe7ab6;
+  --bacon20: #fd6ea9;
+  --bacon30: #fd619d;
+  --bacon40: #fc538d;
+  --bacon50: #fc4079;
+  --bacon60: #f33163;
+  --bacon70: #ea2654;
+  /* color: #ffffff; */
+  --bacon80: #e21c48;
+  --bacon90: #d9113a;
+
+  /* dark red - "ketchup" */
+  /* color: --pepper90 / #0E1217 */
+  --ketchup10: #f3796c;
+  --ketchup20: #ed685c;
+  --ketchup30: #e95245;
+  --ketchup40: #e7574b;
+  /* color: #ffffff; */
+  --ketchup50: #d52b20;
+  --ketchup60: #c72017;
+  --ketchup70: #bd1911;
+  --ketchup80: #b3110b;
+  --ketchup90: #a90a05;
+
+  /* orange - "bun" */
+  /* color: --pepper90 / #0E1217 */
+  --bun10: #ffb760;
+  --bun20: #ffaa55;
+  --bun30: #ff9d48;
+  --bun40: #ff8e3b;
+  --bun50: #ff7a2b;
+  --bun60: #fa6620;
+  --bun70: #f55919;
+  --bun80: #f04c11;
+  --bun90: #eb3f0a;
+
+  /* yellow - "cheese" */
+  /* color: --pepper90 / #0E1217 */
+  --cheese10: #fff76f;
+  --cheese20: #fff35a;
+  --cheese30: #ffef40;
+  --cheese40: #ffe923;
+  --cheese50: #ffdf00;
+  --cheese60: #fcd400;
+  --cheese70: #f9cc00;
+  --cheese80: #f6c400;
+  --cheese90: #f3bc00;
+
+  /* lime - "lettuce" */
+  /* color: --pepper90 / #0E1217 */
+  --lettuce10: #dbfe6c;
+  --lettuce20: #ccfb5b;
+  --lettuce30: #cbff52;
+  --lettuce40: #bdf849;
+  --lettuce50: #92f21d;
+  --lettuce60: #7de914;
+  --lettuce70: #6fe20f;
+  --lettuce80: #62db09;
+  --lettuce90: #58d404;
+
+  /* green- "avacado" */
+  /* color: --pepper90 / #0E1217 */
+  --avacado10: #74f3bc;
+  --avacado20: #65f1ae;
+  --avacado30: #51eba0;
+  --avacado40: #39e58c;
+  --avacado50: #1ddc6f;
+  --avacado60: #15ce5c;
+  --avacado70: #0fc54f;
+  --avacado80: #0abd42;
+  --avacado90: #04b435;
+
+  /* turquoise - "blue cheese" */
+  /* color: --pepper90 / #0E1217 */
+  --bluecheese10: #6ff1f6;
+  --bluecheese20: #5cecf1;
+  --bluecheese30: #45e5ed;
+  --bluecheese40: #2cdce6;
+  --bluecheese50: #0dcfdc;
+  --bluecheese60: #08c0ce;
+  --bluecheese70: #05b5c5;
+  --bluecheese80: #02aabd;
+  --bluecheese90: #009fb3;
+
+  /* brown - "burger" */
+  /* color: --pepper90 / #0E1217 */
+  --burger10: #c98464;
+  --burger20: #c07a5b;
+  --burger30: #b67052;
+  --burger40: #ad6648;
+  /* color: #ffffff; */
+  --burger50: #a0583c;
+  --burger60: #914b31;
+  --burger70: #864129;
+  --burger80: #7c3822;
+  --burger90: #722f1b;
+
+  --ifm-container-width-xl: 1600px;
+  --ifm-line-height-base: 1.333;
+  /* a11y - needs upping to at least 1.5 */
+
+  /* these font and margin calculations are a little over complicated, 
+  but allow for us to change the h6 size and keep the ratios set by the design team,
+  needs replacing once sizes are finalised */
+
+  /* calculate heading relative to the h6 size */
+  --dd-h1-ratio: 1.6;
+  --dd-h2-ratio: 1.333;
+  --dd-h3-ratio: 1.1333;
+  --dd-h4-ratio: 1.1333;
+  --dd-h5-ratio: 1.1333;
+  --dd-h6-size: 1.0625rem;
+  --dd-h6-size: 0.9375rem;
+  /* ally - this needs removing and setting to 1.0625 or higher so headings are at least minimum sizes */
+
+  /* font size calculated as ratio relative to h6 */
+  --dd-h1-font-size: 4rem;
+  --dd-h2-font-size: 1.5rem;
+  --dd-h3-font-size: 1.25rem;
+  --dd-h4-font-size: calc(var(--dd-h6-size) * var(--dd-h4-ratio));
+  --dd-h5-font-size: calc(var(--dd-h6-size) * var(--dd-h5-ratio));
+  --dd-h6-font-size: var(--dd-h6-size);
+
+  /* margin multipliers used to calculate margins based on font size */
+  --dd-mar-mutiplier-top-1: 1.66666;
+  --dd-mar-mutiplier-bot-1: 1.16666;
+
+  --dd-mar-mutiplier-top-2: 1.6;
+  --dd-mar-mutiplier-bot-2: 1.2;
+
+  --dd-mar-mutiplier-top-3: 1.66666;
+  --dd-mar-mutiplier-bot-3: 1.1666;
+
+  --dd-mar-mutiplier-top-4: 1.4;
+  --dd-mar-mutiplier-bot-4: 0.94;
+
+  --dd-mar-mutiplier-top-5: 1.175;
+  --dd-mar-mutiplier-bot-5: 0.94;
+
+  --dd-mar-mutiplier-top-6: 1.0666;
+  --dd-mar-mutiplier-bot-6: 0.8;
+
+  --dd-mar-top-h1: 0.5rem;
+  --dd-mar-bot-h1: 1.5rem;
+
+  --dd-mar-top-h2: 2.5rem;
+  --dd-mar-bot-h2: 1rem;
+
+  --dd-mar-top-h3: 2rem;
+  --dd-mar-bot-h3: 1rem;
+
+  --dd-mar-top-h4: calc(var(--dd-h4-font-size) * var(--dd-mar-mutiplier-top-4));
+  --dd-mar-bot-h4: calc(var(--dd-h4-font-size) * var(--dd-mar-mutiplier-bot-4));
+
+  --dd-mar-top-h5: calc(var(--dd-h5-font-size) * var(--dd-mar-mutiplier-top-5));
+  --dd-mar-bot-h5: calc(var(--dd-h5-font-size) * var(--dd-mar-mutiplier-bot-5));
+
+  --dd-mar-top-h6: calc(var(--dd-h6-font-size) * var(--dd-mar-mutiplier-top-6));
+  --dd-mar-bot-h6: calc(var(--dd-h6-font-size) * var(--dd-mar-mutiplier-bot-6));
+
+  /* colours */
+  --dd-background: var(--pepper90);
+  --ifm-link-color: var(--bacon90);
+  --ifm-link-hover-color: var(--water40);
+  --ifm-color-warning-dark: var(--cheese90);
+
+
+  /* menu */
+  --ifm-menu-link-padding-vertical: 0.5rem;
+
+  --ifm-menu-link-sublist-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 24 24"><path fill="currentcolor" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path></svg>');
+  /* --ifm-menu-link-sublist-icon-before: url('../img/test.svg'); */
+
+  /* table of contents */
+  --ifm-toc-padding-vertical: 1rem;
+}
+
+html[data-theme='dark'] {
+  --ifm-menu-color: var(--white);
+  --ifm-link-color: var(--onion10);
+}
+
+html[data-theme='dark'] *:focus-visible {
+  outline: 2px solid var(--bluecheese40) !important;
+}
+
+html *:focus-visible {
+  outline: 2px solid var(--bluecheese60) !important;
+  /* A11y contrast not high enough, suggest Blue Cheese 90 
+  #009FB3 but needs discussion with Tsahi */
+}
+
+article {
+  margin: 0 auto;
+  max-width: 80ch;
+}
+
+.footer {
+  padding-top: 6rem;
+}
+
+/* menu */
+
+.menu__list-item:not(:first-child) {
+  margin: 0;
+}
+
+.menu__link--active {
+  color: var(--ifm-font-color-base) !important;
+}
+.menu__link--active:not(.menu__link--sublist) {
+  background: #a8b3cf33;
+}
+
+/************************ICONS ON MENU ITEMS**************************/
+
+html[data-theme='light'] .menu__link {
+  color: #000;
+}
+
+.menu__link {
+  margin-left: 1.55rem;
+  color: var(--salt80);
+  color: rgb(168, 179, 255);
+  font-weight: normal;
+  font-size: 1rem;
+  line-height: 1.25;
+}
+html[data-theme='light'] .menu__link:before {
+  filter: brightness(0.5);
+}
+.theme-doc-sidebar-menu .menu__link:before {
+  content: '';
+  position: absolute;
+  /* background: var(--ifm-menu-link-sublist-icon-before) 50% / 1.25rem 1.25rem; */
+  height: 1.25rem;
+  width: 1.25rem;
+  left: 0.25rem;
 }
+.menu__link--sublist:before {
+  left: 0.25rem;
+}
+
+.menu__list li:nth-child(1) .menu__link:before {
+  background: none;
+}
+/**getting started**/
+/* .theme-doc-sidebar-menu li:nth-child(2) .menu__link:before {
+  background: url('../img/menu/getting-started.svg') 50% / 1.25rem 1rem;
+  filter: none;
+} */
+
+/* .theme-doc-sidebar-menu li:nth-child(3) .menu__link:before {
+  background: url('../img/menu/setting-up-feed.svg');
+} */
+
+/* .theme-doc-sidebar-menu li:nth-child(4) .menu__link:before {
+  background: url('../img/menu/key-features.svg');
+} */
+
+/* .theme-doc-sidebar-menu li:nth-child(5) .menu__link:before {
+  background: url('../img/menu/your-profile.svg');
+} */
+
+/* .theme-doc-sidebar-menu li:nth-child(6) .menu__link:before {
+  background: url('../img/menu/customization.svg');
+} */
+
+/* .theme-doc-sidebar-menu li:nth-child(7) .menu__link:before {
+  background: url('../img/menu/useful-guides.svg');
+} */
+
+/* .theme-doc-sidebar-menu li:nth-child(8) .menu__link:before {
+  background: url('../img/menu/integration.svg');
+} */
+
+/* .theme-doc-sidebar-menu li:nth-child(9) .menu__link:before {
+  background: url('../img/menu/content-creator.svg');
+} */
+
+/* .theme-doc-sidebar-menu li:nth-child(10) .menu__link:before {
+  background: url('../img/menu/oss-contributors.svg');
+} */
+.theme-doc-sidebar-menu li:nth-child(11) .menu__link:before {
+  /* background: url('../img/menu/community.svg'); */
+  left: 0.75rem;
+}
+
+.theme-doc-sidebar-item-link-level-2 > .menu__link {
+  margin-left: 1.25rem;
+}
+
+.theme-doc-sidebar-item-link-level-2 > .menu__link:before {
+  background: none !important;
+}
+
+.menu__link--sublist:after {
+  background: var(--ifm-menu-link-sublist-icon) 50% / 1.75rem 1.75rem;
+  opacity: 0.5;
+}
+
+/* side contents */
+.table-of-contents {
+  font-size: 1rem;
+}
+
+/* footer */
+
+.footer__title {
+  font-size: var(--dd-h2-font-size);
+  text-transform: uppercase;
+}
+
+.footer__col:nth-of-type(1) .footer__title {
+  color: var(--water40);
+}
+
+.footer__col:nth-of-type(2) .footer__title {
+  color: var(--onion40);
+}
+
+.footer__col:nth-of-type(3) .footer__title {
+  color: var(--avacado40);
+}
+
+.footer__col:nth-of-type(4) .footer__title {
+  color: var(--bluecheese40);
+}
+
+.footer__bottom,
+.footer__item {
+  padding: 8px 0;
+  opacity: 0.64;
+}
+
+/* main adjustments */
+
+.main-wrapper {
+  padding-bottom: 15%;
+  background-image: url('https://assets.website-files.com/5e0a5d9d743608d0f3ea6753/619650c123dedf5abe6feaa5_CTA%20Footer%20Circles.png');
+  background-repeat: no-repeat;
+  background-position: center bottom;
+  background-size: contain;
+}
+
+div[class^='announcementBar_'] {
+  --docusaurus-announcement-bar-height: 2.5rem;
+  background: var(--onion40) !important;
+  color: var(--white) !important;
+}
+
+@media screen and (max-width: 1200px) {
+  main .col--3{
+    display: none;
+  }
+  main .row > div{
+    max-width: 100%!important;
+  }
+}
+
+@media screen and (max-width: 1000px) {
+  :root{
+    --ifm-font-size-base: 100%;
+    --dd-h1-font-size: 3rem;
+  }
+}
+
+
+/* typography */
+
+.markdown h1,
+.markdown h1:first-child {
+  font-size: var(--dd-h1-font-size);
+  margin: var(--dd-mar-top-h1) 0 var(--dd-mar-bot-h1) 0;
+  line-height: 1.2;
+}
+
+.markdown h2 {
+  font-size: var(--dd-h2-font-size);
+  margin: var(--dd-mar-top-h2) 0 var(--dd-mar-bot-h2) 0;
+}
+
+.markdown h3 {
+  font-size: var(--dd-h3-font-size);
+  margin: var(--dd-mar-top-h3) 0 var(--dd-mar-bot-h3) 0;
+}
+
+.markdown h4 {
+  font-size: var(--dd-h4-font-size);
+  margin: var(--dd-mar-top-h4) 0 var(--dd-mar-bot-h4) 0;
+}
+
+.markdown h5 {
+  font-size: var(--dd-h5-font-size);
+  margin: var(--dd-mar-top-h5) 0 var(--dd-mar-bot-h5) 0;
+}
+
+.markdown h6 {
+  font-size: var(--dd-h6-font-size);
+  margin: var(--dd-mar-top-h6) 0 var(--dd-mar-bot-h6) 0;
+}
+
+/* readability and layout */
+.markdown *{
+  line-height: 1.75em;
+}
+
+.markdown a,
+summary a,
+.alert a{
+  font-weight: bold;;
+}
+
+.markdown p + ul,
+.markdown p + ol{
+  margin-top: -1rem;
+}
+
+
+.markdown li{
+  margin-bottom: 8px;
+}
+
+table{
+  display: table;
+  width: 100%;
+}
+
+/* alerts */
+
+div.alert{
+  margin-top: 2rem;
+}
+
+div.alert h5{
+  margin: 0 0 0.25rem 0;
+  font-size: 1.3rem;
+  line-height: 1em;
+}
+
+div.alert ul{
+  margin-top: 0;
+}
+
+
+/* images and media */
+.theme-doc-markdown img {
+  width: 100%;
+  height: auto;
+}
+
+iframe {
+  width: 100%;
+  height: auto;
+  aspect-ratio: 16/9;
+}
+
+/* Accordion */
+
+summary {
+  padding: 1.5rem 1.5rem !important;
+  margin-right: 1.75rem;
+  display: block;
+  color: white;
+  position: relative;
+  cursor: pointer;
+  outline: transparent !important;
+  font-weight: bold;
+}
+
+details {
+  max-width: 80ch;
+  margin: 10px auto 0px auto !important;
+  padding: 0 !important;
+  box-sizing: border-box;
+  border: none !important;
+  border-radius: 1rem !important;
+  background-color: #151618 !important;
+  transition: box-shadow 0.3s 0s ease;
+  box-shadow: 0px 0px 0px 0px #333;
+  line-height: 1.75rem;
+}
+
+details:focus-within {
+  box-shadow: 0 0 0 4px #000, 0 0 0 6px #2cdce6;
+}
+details > summary {
+  list-style: none;
+}
+
+details > summary::marker,
+details > summary::-webkit-details-marker {
+  display: none;
+}
+
+details[open] > summary:before {
+  transform: rotate(180deg) !important;
+}
+
+summary:before {
+  content: '';
+  opacity: 0.6;
+  /* background-image: url('../img/chevron.svg'); */
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  width: 2rem;
+  height: 2rem;
+  position: absolute;
+  top: 1.5rem !important;
+  right: -0.25rem !important;
+  left: auto !important;
+  transform: rotate(0deg) !important;
+  transform-origin: 1rem 50% !important;
+  transition: 0.25s transform ease;
+  border: none !important;
+}
+
+details > div > div {
+  padding: 0rem 2rem 2rem 2rem !important;
+
+  margin-top: 0 !important;
+  border-top: none !important;
+  color: #a9abb3;
+}
+
+p {
+  margin: 0;
+  padding-bottom: 10px;
+}
+p:last-child {
+  padding: 0;
+}
+
+.markdown img {
+  max-width: min(600px, 100%);
+  margin: 0 auto 1.5rem auto;
+  display: block;
+  border: 2px solid var(--cabbage60);
+
+}
+
+
 ::-webkit-scrollbar {
   width: 8px;
 }
@@ -38,11 +799,11 @@
 }
 
 ::-webkit-scrollbar-thumb {
-  background: #25C2A0; 
+  background: linear-gradient( 34deg, rgba(68, 18, 115, 1) 0%, rgba(5, 30, 75, 1) 21%, rgba(52, 79, 141, 1) 58%, rgba(106, 137, 223, 1) 80%, rgba(145, 227, 226, 1) 99% );
   border: 1px solid #2E8555 ;
   border-radius: 10px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: #2E8555; 
+  background: linear-gradient( 34deg, rgba(68, 18, 115, 1) 0%, rgba(5, 30, 75, 1) 21%, rgba(52, 79, 141, 1) 58%, rgba(106, 137, 223, 1) 80%, rgba(145, 227, 226, 1) 99% );; 
 }
diff --git a/src/pages/index.js b/src/pages/index.js
index 1d4072df5..9adfcdfe5 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -31,7 +31,7 @@ export default function Home() {
   return (
     <Layout
       title={`Hello from ${siteConfig.title}`}
-      description="Description will go into a meta tag in <head />">
+      description="This site holds swarms of resources for people to learn web3">
       <HomepageHeader />
       <main>
         <HomepageFeatures />
diff --git a/src/pages/markdown-page.md b/src/pages/markdown-page.md
deleted file mode 100644
index 9756c5b66..000000000
--- a/src/pages/markdown-page.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-title: Markdown page example
----
-
-# Markdown page example
-
-You don't need React to write simple standalone pages.