diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 74d6ca8cb..2e653a09e 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -106,7 +106,7 @@ To contribute contents such as blog posts, visualisations, and documentation, pl
 
 ### Blog post
 
-- [Guide on contribute blog posts](https://dataviz.shef.ac.uk/docs/22/03/2020/contribute-blog-post)
+- See the guide for how to contribute blog post on [website](https://dataviz.shef.ac.uk/docs/22/03/2020/contribute-blog-post) or [local markdown file](./content/docs/2020-03-22-datavizhub-guide/index.mdx).
 
 ### Documentation
 
@@ -121,7 +121,7 @@ All markdown files and resources for the document should be placed under the dir
 
 ### Visualisation
 
-- [How to contribute visualisation?](https://dataviz.shef.ac.uk/docs/21/07/2021/Contribute-visualisation)
+- See the guide for how to contribute visualisation on [website](https://dataviz.shef.ac.uk/docs/21/07/2021/Contribute-visualisation) or [local markdown file](./content/docs/2021-07-21-Contribute-visualisation/index.mdx).
 
 [coc]: https://github.com/researchdata-sheffield/dataviz-hub2/blob/master/CODE-OF-CONDUCT.md
 [issue]: https://github.com/researchdata-sheffield/dataviz-hub2/issues
@@ -131,4 +131,22 @@ All markdown files and resources for the document should be placed under the dir
 
 ### Styles
 
-Place global variables in the file `src/css/_variables.scss` and use it in any scss files like `var.$varibale-name`.
\ No newline at end of file
+Place global variables in the file `src/css/_variables.scss` and use it in any scss files in the format of `var.$varibale-name`.
+
+You may wish to use the [react-reveal](https://www.react-reveal.com/) package to add some animations to your contributed pages. Sometimes the following order of HTML elements would not render the content correctly:
+
+```mdx
+import { Fade } from "react-reveal";
+
+<div>
+  <Fade>...contents</Fade>
+</div>
+```
+
+To solve this problem, move the `<Fade>` tag one level above:
+
+```mdx
+<Fade>
+  <div>...contents</div>
+</Fade>
+```
diff --git a/content/docs/2020-07-04-LearningPath-Lab/index.mdx b/content/docs/2020-07-04-LearningPath-Lab/index.mdx
index 3e0d0320c..23c9c42cb 100644
--- a/content/docs/2020-07-04-LearningPath-Lab/index.mdx
+++ b/content/docs/2020-07-04-LearningPath-Lab/index.mdx
@@ -58,7 +58,7 @@ import { TiChevronLeft, TiChevronRight } from "react-icons/ti";
   <a
     href="#sec1"
     anchor
-    className="hover:text-brand-blue cursor-pointer py-2 mx-3"
+    className="hover:bg-brand-blue cursor-pointer py-2 mx-3"
     style={{ background: "none" }}
   >
     Introduction
@@ -66,7 +66,7 @@ import { TiChevronLeft, TiChevronRight } from "react-icons/ti";
   <a
     href="#sec2"
     anchor
-    className="hover:text-brand-blue cursor-pointer py-2 mx-3"
+    className="hover:bg-brand-blue cursor-pointer py-2 mx-3"
     style={{ background: "none" }}
   >
     R
@@ -74,7 +74,7 @@ import { TiChevronLeft, TiChevronRight } from "react-icons/ti";
   <a
     href="#sec3"
     anchor
-    className="hover:text-brand-blue cursor-pointer py-2 mx-3"
+    className="hover:bg-brand-blue cursor-pointer py-2 mx-3"
     style={{ background: "none" }}
   >
     Python
@@ -82,7 +82,7 @@ import { TiChevronLeft, TiChevronRight } from "react-icons/ti";
   <a
     href="#sec4"
     anchor
-    className="hover:text-brand-blue cursor-pointer py-2 mx-3"
+    className="hover:bg-brand-blue cursor-pointer py-2 mx-3"
     style={{ background: "none" }}
   >
     Matlab
@@ -130,8 +130,6 @@ import { TiChevronLeft, TiChevronRight } from "react-icons/ti";
     </Fade>
   </div>
 
-{" "}
-
 <div id="sec2" className="flex-wrap lg:min-h-80 mt-24">
   <Fade duration={1200}>
     <p className="text-brand-purple font-bold text-5xl leading-10">R</p>
@@ -468,8 +466,6 @@ import { TiChevronLeft, TiChevronRight } from "react-icons/ti";
   </Fade>
 </div>
 
-{" "}
-
 <div id="sec3" className="flex-wrap lg:min-h-80 mt-24">
   <Fade duration={1200}>
     <p className="text-brand-purple font-bold text-5xl leading-8">Python</p>
@@ -730,8 +726,6 @@ import { TiChevronLeft, TiChevronRight } from "react-icons/ti";
   </Fade>
 </div>
 
-{" "}
-
 <div id="sec4" className="flex-wrap lg:min-h-50 mt-16">
   <Fade>
     <p className="text-brand-purple font-bold text-5xl leading-8">Matlab</p>
diff --git a/content/docs/2020-07-05-LearningPath-Workflow/index.mdx b/content/docs/2020-07-05-LearningPath-Workflow/index.mdx
index a446f56f0..7314ea2f7 100644
--- a/content/docs/2020-07-05-LearningPath-Workflow/index.mdx
+++ b/content/docs/2020-07-05-LearningPath-Workflow/index.mdx
@@ -20,17 +20,17 @@ import { TiChevronLeft } from "react-icons/ti";
 
 <div
   className="shadow-xl flex justify-center items-center text-center w-full min-h-100"
-  style={{ backgroundColor: "#0066b3" }}
+  style={{ backgroundColor: "#9ADBE8" }}
 >
   <div>
-    <div className="text-5xl text-white font-bold">
+    <div className="text-5xl text-brand-black font-bold">
       Learning Path - Workflow
     </div>
-    <div className="text-gray-400 text-base">
+    <div className="text-gray-700 text-base">
       Increase your research impact through reproducible data visualisation
       workflows.
     </div>
-    <div className="text-lg text-gray-100 mt-10">Dataviz.Shef Team</div>
+    <div className="text-lg text-gray-600 mt-10">Dataviz.Shef Team</div>
     <div className="flex flex-wrap justify-center mt-20">
       <Link className="" to="/docs/04/07/2020/LearningPath-Lab">
         <div
@@ -46,7 +46,8 @@ import { TiChevronLeft } from "react-icons/ti";
     </div>
   </div>
 </div>
-<div className="flex flex-wrap justify-between px-3 md:px-24 lg:px-40 2xl:px-70 text-black bg-white text-sm sticky top-0 left-0 relative z-10 shadow-md">
+
+<div className="flex flex-wrap justify-between px-3 md:px-24 lg:px-40 2xl:px-70 text-black bg-white text-sm sticky top-0 left-0 z-10 shadow-md">
   <a
     href="#sec1"
     anchor
@@ -131,160 +132,158 @@ import { TiChevronLeft } from "react-icons/ti";
       </div>
     </Fade>
 
-    <div id="sec2" className="flex-wrap lg:min-h-80 mt-24">
-      <Fade duration={1200}>
-        <p className="text-brand-purple font-bold text-4xl leading-10">
-          Reproducibility
-        </p>
-        <p>
-          In computer science, <b>reproducibility</b> means that as long as the
-          environment and initial conditions are the same, when the program is
-          executed or the program is executed repeatedly, no matter if it is
-          executed from beginning to end without stopping, or "stop and restart"
-          execution, we will get the <b>same result</b>. Therefore,
-          reproducibility of data visualisation should follow the same
-          principle. <br />
-          <br />
-          Given the data and code provided (by an author) we should be able to
-          get the same output by following the same steps as the author does.
-          But how do we ensure that data and code are preserved and is
-          accessible even after a long period of time for further research or
-          reference is important for data visulisations as well as for
-          publications. We hope you will find this information useful and if you
-          have any questions or have found any errors in this page please
-          contact us on our communication channels (
-          <a href="mailto:rdm@sheffield.ac.uk">email</a>,{" "}
-          <a href="https://join.slack.com/t/shef-dataviz/signup">slack</a>,{" "}
-          <a href="https://groups.google.com/a/sheffield.ac.uk/forum/?hl=en#!forum/shef_dataviz-group">
-            google group
-          </a>
-          ).
-        </p>
-      </Fade>
-    </div>
+{" "}
+<Fade duration={1200}>
+  <div id="sec2" className="flex-wrap lg:min-h-80 mt-24">
+    <p className="text-brand-purple font-bold text-4xl leading-10">
+      Reproducibility
+    </p>
+    <p>
+      In computer science, <b>reproducibility</b> means that as long as the
+      environment and initial conditions are the same, when the program is
+      executed or the program is executed repeatedly, no matter if it is
+      executed from beginning to end without stopping, or "stop and restart"
+      execution, we will get the <b>same result</b>. Therefore, reproducibility
+      of data visualisation should follow the same principle. <br />
+      <br />
+      Given the data and code provided (by an author) we should be able to get
+      the same output by following the same steps as the author does. But how do
+      we ensure that data and code are preserved and is accessible even after a
+      long period of time for further research or reference is important for
+      data visulisations as well as for publications. We hope you will find this
+      information useful and if you have any questions or have found any errors
+      in this page please contact us on our communication channels (
+      <a href="mailto:rdm@sheffield.ac.uk">email</a>,{" "}
+      <a href="https://join.slack.com/t/shef-dataviz/signup">slack</a>,{" "}
+      <a href="https://groups.google.com/a/sheffield.ac.uk/forum/?hl=en#!forum/shef_dataviz-group">
+        google group
+      </a>
+      ).
+    </p>
+  </div>
+</Fade>
 
-    <div id="sec3" className="flex-wrap lg:min-h-80 mt-24">
-      <Fade duration={1200}>
-        <p className="text-brand-purple font-bold text-4xl leading-8">
-          Make <b className="text-5xl text-gray-700">yourself</b> identifiable
-        </p>
-        <p>
-          Sometimes two researchers could have the same name or initials due to
-          culture differences and writing systems etc, it is important that
-          there is a mechanism for identifying who you are regardless where and
-          when you published articles, datasets, and make other contributions.
-          To resolve this problem, <b>ORCID</b> (Open Researcher and Contributor
-          ID) was introduced in 2012 that can{" "}
-          <i>
-            provide a persistent digital identifier (an ORCID iD) that
-            distinguishes you from other researchers and a record that supports
-            automatic links among all your professional activities. Your{" "}
-            <b>ORCID iD</b> and connections are stored in the ORCID Registry, in
-            an account you own and manage
-          </i>
-          . To register, visit{" "}
-          <a href="https://orcid.org/register">orcid.org</a>.
-        </p>
-      </Fade>
-    </div>
-    <div id="sec4" className="flex-wrap lg:min-h-50 mt-16">
-      <Fade duration={1200}>
-        <p className="text-brand-purple font-bold text-4xl leading-8">
-          Make your <b className="text-5xl text-gray-700">data</b> identifiable
-        </p>
-        <p>
-          Identifying datasets and codes is equally important to identify
-          yourself. <b>DOI</b> (digital object identifier) was introduced in
-          2000 to identify many resources across academic, professional, and
-          government information, this will help you to include your datasets
-          and code within your publication through <b>DOI</b>. If other
-          researchers can easily locate your data and make use of it to
-          reproduce your work to make sense of your data and communicate
-          findings more widely. Read the{" "}
-          <a anchor href="#sec5">
-            next section
-          </a>{" "}
-          to learn more about options of data repositories you can use.
-        </p>
-      </Fade>
-    </div>
-    <div id="sec5" className="flex-wrap lg:min-h-50 mt-16">
-      <Fade duration={1200}>
-        <p className="text-brand-purple font-bold text-4xl leading-8">
-          Deposit your data
-        </p>
-        <p>
-          For reproducibility purposes we advise you to deposit data and codes
-          in data repositories that can be <b>accessed and cited by anyone</b>{" "}
-          around the world through a unique <b>DOI</b> (digital object
-          identifier). For some repositories it is possible to use programming
-          languages like Python and R to fetch data directly from the source
-          using URL provided. If your data is not classified as sensitive data
-          and no discipline-specific repository is available, we encourage you
-          to deposit data and code in University's data repository (powered by{" "}
-          <a href="https://figshare.com/">figshare</a>) -{" "}
-          <b>
-            <a href="https://orda.shef.ac.uk">Online Research Data</a> (ORDA)
-          </b>
-          . For other recommendations including discipline-specific
-          repositories, visit The University Library’s{" "}
-          <a href="https://www.sheffield.ac.uk/library/rdm/repositories">
-            Research Data Repositories Page
-          </a>
-          .
-        </p>
-        <p>If you have a GitHub account, check out the following articles:</p>
-        <LPWrap>
-          <LPItem
-            className="md:mx-7"
-            Workflow
-            href="https://guides.github.com/activities/citable-code/"
-          >
-            Citable code
-          </LPItem>
-          <LPItem
-            className="md:mx-7"
-            Workflow
-            href="https://knowledge.figshare.com/articles/item/how-to-connect-figshare-with-your-github-account"
-          >
-            Connect figshare with GitHub
-          </LPItem>
-        </LPWrap>
-        <p>
-          There might be cases where your data comes from external sources like{" "}
-          <b>data.gov.uk</b>, don't forget acknowledge the source of the
-          information in your data and state the <b>licence</b> applied to.
-        </p>
-        <p>
-          We also encourage you not to limit to data visulisation and to visit
-          The University Library{" "}
-          <b>
-            <a href="https://www.sheffield.ac.uk/library/rdm">RDM page</a>
-          </b>{" "}
-          to give you a broad overview of Research Data Management at the
-          university and many specific guidances.
-        </p>
-      </Fade>
-    </div>
-    <hr />
-    <div className="border-t-1 border-gray-200 pt-10 mt-16">
-      <h2
-        className="inline"
-        style={{
-          background:
-            "linear-gradient(225deg, rgba(47,255,43,1) 4%, rgba(0,160,255,1) 96%)",
-          WebkitBackgroundClip: "text",
-          WebkitTextFillColor: "transparent"
-        }}
+{" "}
+<Fade duration={1200}>
+  <div id="sec3" className="flex-wrap lg:min-h-80 mt-24">
+    <p className="text-brand-purple font-bold text-4xl leading-8">
+      Make <b className="text-5xl text-gray-700">yourself</b> identifiable
+    </p>
+    <p>
+      Sometimes two researchers could have the same name or initials due to
+      culture differences and writing systems etc, it is important that there is
+      a mechanism for identifying who you are regardless where and when you
+      published articles, datasets, and make other contributions. To resolve
+      this problem, <b>ORCID</b> (Open Researcher and Contributor ID) was
+      introduced in 2012 that can{" "}
+      <i>
+        provide a persistent digital identifier (an ORCID iD) that distinguishes
+        you from other researchers and a record that supports automatic links
+        among all your professional activities. Your <b>ORCID iD</b> and
+        connections are stored in the ORCID Registry, in an account you own and
+        manage
+      </i>
+      . To register, visit <a href="https://orcid.org/register">orcid.org</a>.
+    </p>
+  </div>
+</Fade>
+
+{" "}
+<Fade duration={1200}>
+  <div id="sec4" className="flex-wrap lg:min-h-50 mt-16">
+    <p className="text-brand-purple font-bold text-4xl leading-8">
+      Make your <b className="text-5xl text-gray-700">data</b> identifiable
+    </p>
+    <p>
+      Identifying datasets and codes is equally important to identify yourself.{" "}
+      <b>DOI</b> (digital object identifier) was introduced in 2000 to identify
+      many resources across academic, professional, and government information,
+      this will help you to include your datasets and code within your
+      publication through <b>DOI</b>. If other researchers can easily locate
+      your data and make use of it to reproduce your work to make sense of your
+      data and communicate findings more widely. Read the{" "}
+      <a anchor href="#sec5">
+        next section
+      </a>{" "}
+      to learn more about options of data repositories you can use.
+    </p>
+  </div>
+</Fade>
+<Fade duration={1200}>
+  <div id="sec5" className="flex-wrap lg:min-h-50 mt-16">
+    <p className="text-brand-purple font-bold text-4xl leading-8">
+      Deposit your data
+    </p>
+    <p>
+      For reproducibility purposes we advise you to deposit data and codes in
+      data repositories that can be <b>accessed and cited by anyone</b> around
+      the world through a unique <b>DOI</b> (digital object identifier). For
+      some repositories it is possible to use programming languages like Python
+      and R to fetch data directly from the source using URL provided. If your
+      data is not classified as sensitive data and no discipline-specific
+      repository is available, we encourage you to deposit data and code in
+      University's data repository (powered by{" "}
+      <a href="https://figshare.com/">figshare</a>) -{" "}
+      <b>
+        <a href="https://orda.shef.ac.uk">Online Research Data</a> (ORDA)
+      </b>
+      . For other recommendations including discipline-specific repositories, visit
+      The University Library’s <a href="https://www.sheffield.ac.uk/library/rdm/repositories">
+        Research Data Repositories Page
+      </a>.
+    </p>
+    <p>If you have a GitHub account, check out the following articles:</p>
+    <LPWrap>
+      <LPItem
+        className="md:mx-7"
+        Workflow
+        href="https://guides.github.com/activities/citable-code/"
       >
-        Congratulations!
-      </h2>{" "}
-      You have completed the <b>learning path - Workflow</b>, now you understand
-      the importance of the reproducible data visualisation workflow and also
-      able to deposit data and code in suitable data repositories. Note that we
-      are updating learning paths from time to time, so do keep eye on this
-      website and our community channels to get the latest information.
-    </div>
+        Citable code
+      </LPItem>
+      <LPItem
+        className="md:mx-7"
+        Workflow
+        href="https://knowledge.figshare.com/articles/item/how-to-connect-figshare-with-your-github-account"
+      >
+        Connect figshare with GitHub
+      </LPItem>
+    </LPWrap>
+    <p>
+      There might be cases where your data comes from external sources like{" "}
+      <b>data.gov.uk</b>, don't forget acknowledge the source of the information
+      in your data and state the <b>licence</b> applied to.
+    </p>
+    <p>
+      We also encourage you not to limit to data visulisation and to visit The
+      University Library{" "}
+      <b>
+        <a href="https://www.sheffield.ac.uk/library/rdm">RDM page</a>
+      </b>{" "}
+      to give you a broad overview of Research Data Management at the university
+      and many specific guidances.
+    </p>
+  </div>
+</Fade>
+<hr />
+<div className="border-t-1 border-gray-200 pt-10 mt-16">
+  <h2
+    className="inline"
+    style={{
+      background:
+        "linear-gradient(225deg, rgba(47,255,43,1) 4%, rgba(0,160,255,1) 96%)",
+      WebkitBackgroundClip: "text",
+      WebkitTextFillColor: "transparent"
+    }}
+  >
+    Congratulations!
+  </h2>{" "}
+  You have completed the <b>learning path - Workflow</b>, now you understand the
+  importance of the reproducible data visualisation workflow and also able to
+  deposit data and code in suitable data repositories. Note that we are updating
+  learning paths from time to time, so do keep eye on this website and our
+  community channels to get the latest information.
+</div>
 
   </div>
 </div>
diff --git a/src/components/blog/postPagination.jsx b/src/components/blog/postPagination.jsx
index d31b3b38b..aeae1d193 100644
--- a/src/components/blog/postPagination.jsx
+++ b/src/components/blog/postPagination.jsx
@@ -28,7 +28,7 @@ class PostPagination extends React.Component {
     let nextTitle = next ? shortenText(next.node.frontmatter.title, 6) : "";
 
     let linkStyle =
-      "flex items-center px-3 hover:text-brand-blue text-gray-900 min-w-20";
+      "flex items-center px-3 inline-block hover:bg-brand-blue text-brand-black";
 
     return (
       <div className="relative z-20" style={{ backgroundColor: "#fafafa" }}>
@@ -75,7 +75,7 @@ class PostPagination extends React.Component {
               data-tip=""
               data-for="share_editpost"
             >
-              <div className="m-2 py-1 px-2 bg-black hover:bg-brand-blue text-white flex justify-center rounded-md text-xl cursor-pointer">
+              <div className="m-2 py-1 px-2 bg-black hover:bg-brand-blue text-white hover:text-brand-black flex justify-center rounded-md text-xl cursor-pointer">
                 <RiEditBoxLine />
               </div>
             </a>
diff --git a/src/components/home/__tests__/__snapshots__/eventNotice.spec.js.snap b/src/components/home/__tests__/__snapshots__/eventNotice.spec.js.snap
index 838050900..6b2f7aad4 100644
--- a/src/components/home/__tests__/__snapshots__/eventNotice.spec.js.snap
+++ b/src/components/home/__tests__/__snapshots__/eventNotice.spec.js.snap
@@ -54,7 +54,7 @@ Object {
                   </p>
                 </h1>
                 <p
-                  class="text-gray-500 hidden md:flex lg:flex xl:flex leading-tight text-sm xl:text-base"
+                  class="text-gray-600 hidden md:flex lg:flex xl:flex leading-tight text-sm xl:text-base"
                 >
                   Join us for a celebration of Open Research at the University of Sheffield with the winners of the Library's inaugural Open Research Prize.
                 </p>
@@ -114,7 +114,7 @@ Object {
                     class="flex flex-wrap w-full md:w-1/6 content-center justify-center hidden-xs hidden-md"
                   >
                     <button
-                      class="hidden group-hover:flex shadow-sm -mt-4 py-2 px-5 text-lg bg-gray-800 text-white hover:bg-brand-blue"
+                      class="hidden group-hover:flex shadow-sm -mt-4 py-2 px-5 text-lg bg-brand-black text-white hover:text-brand-black hover:bg-brand-blue"
                       href="https://www.eventbrite.co.uk/e/celebration-of-open-research-at-the-university-of-sheffield-tickets-163679197887"
                       rel="noopener noreferrer"
                       target="_blank"
@@ -180,7 +180,7 @@ Object {
                 </p>
               </h1>
               <p
-                class="text-gray-500 hidden md:flex lg:flex xl:flex leading-tight text-sm xl:text-base"
+                class="text-gray-600 hidden md:flex lg:flex xl:flex leading-tight text-sm xl:text-base"
               >
                 Join us for a celebration of Open Research at the University of Sheffield with the winners of the Library's inaugural Open Research Prize.
               </p>
@@ -240,7 +240,7 @@ Object {
                   class="flex flex-wrap w-full md:w-1/6 content-center justify-center hidden-xs hidden-md"
                 >
                   <button
-                    class="hidden group-hover:flex shadow-sm -mt-4 py-2 px-5 text-lg bg-gray-800 text-white hover:bg-brand-blue"
+                    class="hidden group-hover:flex shadow-sm -mt-4 py-2 px-5 text-lg bg-brand-black text-white hover:text-brand-black hover:bg-brand-blue"
                     href="https://www.eventbrite.co.uk/e/celebration-of-open-research-at-the-university-of-sheffield-tickets-163679197887"
                     rel="noopener noreferrer"
                     target="_blank"
diff --git a/src/components/home/__tests__/__snapshots__/homeCommunity.spec.js.snap b/src/components/home/__tests__/__snapshots__/homeCommunity.spec.js.snap
index 400be66da..3a6d0a489 100644
--- a/src/components/home/__tests__/__snapshots__/homeCommunity.spec.js.snap
+++ b/src/components/home/__tests__/__snapshots__/homeCommunity.spec.js.snap
@@ -166,7 +166,7 @@ Object {
               class="react-reveal"
             >
               <button
-                class="sc-ftvSup EZzVk rounded-md text-xs lg:text-sm mt-5 lg:mt-10 group-hover:bg-brand-blue"
+                class="sc-ftvSup EZzVk rounded-md text-xs lg:text-sm mt-5 lg:mt-10 group-hover:bg-brand-blue group-hover:text-brand-black"
               >
                 Coming soon
                 <svg
@@ -648,7 +648,7 @@ Object {
             class="react-reveal"
           >
             <button
-              class="sc-ftvSup EZzVk rounded-md text-xs lg:text-sm mt-5 lg:mt-10 group-hover:bg-brand-blue"
+              class="sc-ftvSup EZzVk rounded-md text-xs lg:text-sm mt-5 lg:mt-10 group-hover:bg-brand-blue group-hover:text-brand-black"
             >
               Coming soon
               <svg
diff --git a/src/components/home/__tests__/__snapshots__/latestPost.spec.js.snap b/src/components/home/__tests__/__snapshots__/latestPost.spec.js.snap
index 2cb73fc0a..c0dd3b4b9 100644
--- a/src/components/home/__tests__/__snapshots__/latestPost.spec.js.snap
+++ b/src/components/home/__tests__/__snapshots__/latestPost.spec.js.snap
@@ -42,7 +42,7 @@ Object {
                   />
                 </svg>
                 <a
-                  class="sc-jSMfEi eOUpBv rounded-full py-0 my-0 mx-1 border-none bg-white text-black hover:bg-gray-200 font-semibold invisible group-hover:visible"
+                  class="sc-jSMfEi hGNjYL rounded-full py-0 my-0 mx-1 border-none bg-white text-black hover:bg-gray-200 font-semibold invisible group-hover:visible"
                   gatsby="true"
                   href="/blog/category/articles"
                 >
@@ -87,7 +87,7 @@ Object {
                 class="mt-2 text-gray-500"
               >
                 <a
-                  class="sc-gKXOVf kmTNOw text-xs py-0 mr-1 my-0"
+                  class="sc-gKXOVf iEHMrg text-xs py-0 mr-1 my-0"
                   gatsby="true"
                   href="/blog/tag/r"
                 >
@@ -136,7 +136,7 @@ Object {
                   />
                 </svg>
                 <a
-                  class="sc-jSMfEi eOUpBv rounded-full py-0 my-0 mx-1 border-none bg-white text-black hover:bg-gray-200 font-semibold invisible group-hover:visible"
+                  class="sc-jSMfEi hGNjYL rounded-full py-0 my-0 mx-1 border-none bg-white text-black hover:bg-gray-200 font-semibold invisible group-hover:visible"
                   gatsby="true"
                   href="/blog/category/tutorial"
                 >
@@ -182,28 +182,28 @@ Object {
                 class="mt-2 text-gray-500"
               >
                 <a
-                  class="sc-gKXOVf kmTNOw text-xs py-0 mr-1 my-0"
+                  class="sc-gKXOVf iEHMrg text-xs py-0 mr-1 my-0"
                   gatsby="true"
                   href="/blog/tag/shiny"
                 >
                   Shiny
                 </a>
                 <a
-                  class="sc-gKXOVf kmTNOw text-xs py-0 mr-1 my-0"
+                  class="sc-gKXOVf iEHMrg text-xs py-0 mr-1 my-0"
                   gatsby="true"
                   href="/blog/tag/template"
                 >
                   Template
                 </a>
                 <a
-                  class="sc-gKXOVf kmTNOw text-xs py-0 mr-1 my-0"
+                  class="sc-gKXOVf iEHMrg text-xs py-0 mr-1 my-0"
                   gatsby="true"
                   href="/blog/tag/r"
                 >
                   R
                 </a>
                 <a
-                  class="sc-gKXOVf kmTNOw text-xs py-0 mx-1 my-0"
+                  class="sc-gKXOVf iEHMrg text-xs py-0 mx-1 my-0"
                   gatsby="true"
                   href="/blog/05/02/2021/Shiny-Template"
                 >
@@ -301,7 +301,7 @@ Object {
                 />
               </svg>
               <a
-                class="sc-jSMfEi eOUpBv rounded-full py-0 my-0 mx-1 border-none bg-white text-black hover:bg-gray-200 font-semibold invisible group-hover:visible"
+                class="sc-jSMfEi hGNjYL rounded-full py-0 my-0 mx-1 border-none bg-white text-black hover:bg-gray-200 font-semibold invisible group-hover:visible"
                 gatsby="true"
                 href="/blog/category/articles"
               >
@@ -346,7 +346,7 @@ Object {
               class="mt-2 text-gray-500"
             >
               <a
-                class="sc-gKXOVf kmTNOw text-xs py-0 mr-1 my-0"
+                class="sc-gKXOVf iEHMrg text-xs py-0 mr-1 my-0"
                 gatsby="true"
                 href="/blog/tag/r"
               >
@@ -395,7 +395,7 @@ Object {
                 />
               </svg>
               <a
-                class="sc-jSMfEi eOUpBv rounded-full py-0 my-0 mx-1 border-none bg-white text-black hover:bg-gray-200 font-semibold invisible group-hover:visible"
+                class="sc-jSMfEi hGNjYL rounded-full py-0 my-0 mx-1 border-none bg-white text-black hover:bg-gray-200 font-semibold invisible group-hover:visible"
                 gatsby="true"
                 href="/blog/category/tutorial"
               >
@@ -441,28 +441,28 @@ Object {
               class="mt-2 text-gray-500"
             >
               <a
-                class="sc-gKXOVf kmTNOw text-xs py-0 mr-1 my-0"
+                class="sc-gKXOVf iEHMrg text-xs py-0 mr-1 my-0"
                 gatsby="true"
                 href="/blog/tag/shiny"
               >
                 Shiny
               </a>
               <a
-                class="sc-gKXOVf kmTNOw text-xs py-0 mr-1 my-0"
+                class="sc-gKXOVf iEHMrg text-xs py-0 mr-1 my-0"
                 gatsby="true"
                 href="/blog/tag/template"
               >
                 Template
               </a>
               <a
-                class="sc-gKXOVf kmTNOw text-xs py-0 mr-1 my-0"
+                class="sc-gKXOVf iEHMrg text-xs py-0 mr-1 my-0"
                 gatsby="true"
                 href="/blog/tag/r"
               >
                 R
               </a>
               <a
-                class="sc-gKXOVf kmTNOw text-xs py-0 mx-1 my-0"
+                class="sc-gKXOVf iEHMrg text-xs py-0 mx-1 my-0"
                 gatsby="true"
                 href="/blog/05/02/2021/Shiny-Template"
               >
diff --git a/src/components/home/eventNotice.jsx b/src/components/home/eventNotice.jsx
index 88c36d289..557d9cf63 100644
--- a/src/components/home/eventNotice.jsx
+++ b/src/components/home/eventNotice.jsx
@@ -65,7 +65,7 @@ const eventNotice = ({ eventBrite }) => {
                         {node.name.text ? node.name.text : "No next event"}
                       </p>
                     </h1>
-                    <p className="text-gray-500 hidden md:flex lg:flex xl:flex leading-tight text-sm xl:text-base">
+                    <p className="text-gray-600 hidden md:flex lg:flex xl:flex leading-tight text-sm xl:text-base">
                       {summary}
                     </p>
                     <p className="flex pt-2 text-sm xl:text-base">
@@ -84,18 +84,12 @@ const eventNotice = ({ eventBrite }) => {
                           {node.venue && (
                             <FaMapMarkerAlt className="mr-1 mt-1" />
                           )}
-                          {node.venue &&
-                            node.venue.name &&
-                            node.venue.name + ", "}
-                          {node.venue &&
-                            node.venue.address.address_1 &&
+                          {node?.venue?.name && node.venue.name + ", "}
+                          {node?.venue?.address?.address_1 &&
                             node.venue.address.address_1 + ", "}
-                          {node.venue &&
-                            node.venue.address.city &&
+                          {node?.venue?.address?.city &&
                             node.venue.address.city + ", "}
-                          {node.venue &&
-                            node.venue.address.postal_code &&
-                            node.venue.address.postal_code}
+                          {node?.venue?.address?.postal_code || ""}
                         </p>
                       </div>
                       <div className="flex flex-wrap w-full md:w-1/6 content-center justify-center hidden-xs hidden-md">
@@ -103,7 +97,7 @@ const eventNotice = ({ eventBrite }) => {
                           href={node.url}
                           target="_blank"
                           rel="noopener noreferrer"
-                          className="hidden group-hover:flex shadow-sm -mt-4 py-2 px-5 text-lg bg-gray-800 text-white hover:bg-brand-blue"
+                          className="hidden group-hover:flex shadow-sm -mt-4 py-2 px-5 text-lg bg-brand-black text-white hover:text-brand-black hover:bg-brand-blue"
                         >
                           Register
                         </button>
diff --git a/src/components/shared/__tests__/__snapshots__/search.spec.js.snap b/src/components/shared/__tests__/__snapshots__/search.spec.js.snap
index e7b57c886..7037be4ea 100644
--- a/src/components/shared/__tests__/__snapshots__/search.spec.js.snap
+++ b/src/components/shared/__tests__/__snapshots__/search.spec.js.snap
@@ -18,7 +18,7 @@ exports[`Search component renders correctly 1`] = `
     }
   >
     <p
-      className="react-reveal text-lg text-gray-800 mb-4 font-bold"
+      className="react-reveal text-2xl text-brand-black mb-4 font-bold"
       style={
         Object {
           "opacity": undefined,
@@ -66,7 +66,7 @@ exports[`Search component renders correctly 1`] = `
       </svg>
       <input
         autoComplete="off"
-        className="search__input py-0 pl-4 text-lg focus:outline-none pr-5 text-gray-600"
+        className="search__input py-0 pl-4 text-lg focus:outline-none pr-5 text-gray-700"
         id="pageSearch"
         name="search"
         onChange={[Function]}
@@ -103,7 +103,7 @@ exports[`Search component return search result without error 1`] = `
       style="background-image: url(test-file-stub); background-size: contain; background-position: center; background-repeat: no-repeat; width: 100%; min-height: 600px;"
     >
       <p
-        class="react-reveal text-lg text-gray-800 mb-4 font-bold"
+        class="react-reveal text-2xl text-brand-black mb-4 font-bold"
       >
         What are you looking for?
       </p>
@@ -136,7 +136,7 @@ exports[`Search component return search result without error 1`] = `
         </svg>
         <input
           autocomplete="off"
-          class="search__input py-0 pl-4 text-lg focus:outline-none pr-5 text-gray-600"
+          class="search__input py-0 pl-4 text-lg focus:outline-none pr-5 text-gray-700"
           id="pageSearch"
           name="search"
           placeholder="Search title, description, date..."
@@ -175,7 +175,7 @@ exports[`Search component return search result without error 1`] = `
                 style="margin: 10px auto;"
               >
                 <a
-                  class="sc-iBkjds bboyCs"
+                  class="sc-iBkjds fAfJIM"
                   gatsby="true"
                   style="font-size: .68rem; background: lightgray; border-color: lightgray; color: rgb(51, 51, 51); font-weight: 600;"
                   title="Type: docs"
@@ -216,7 +216,7 @@ exports[`Search component return search result without error 1`] = `
                 style="margin: 10px auto;"
               >
                 <a
-                  class="sc-iBkjds bboyCs"
+                  class="sc-iBkjds fAfJIM"
                   gatsby="true"
                   style="font-size: .68rem; background: lightgray; border-color: lightgray; color: rgb(51, 51, 51); font-weight: 600;"
                   title="Type: visualisation"
@@ -224,7 +224,7 @@ exports[`Search component return search result without error 1`] = `
                   VISUALISATION
                 </a>
                 <a
-                  class="sc-ftvSup fyxfJt"
+                  class="sc-ftvSup jKBtmd"
                   gatsby="true"
                   href="/blog/category/research-innovation-it"
                   style="font-size: .68rem;"
@@ -233,7 +233,7 @@ exports[`Search component return search result without error 1`] = `
                   Research & Innovation IT
                 </a>
                 <a
-                  class="sc-ftvSup fyxfJt"
+                  class="sc-ftvSup jKBtmd"
                   gatsby="true"
                   href="/blog/tag/statistics"
                   style="font-size: .68rem;"
@@ -242,7 +242,7 @@ exports[`Search component return search result without error 1`] = `
                   Statistics
                 </a>
                 <a
-                  class="sc-ftvSup fyxfJt"
+                  class="sc-ftvSup jKBtmd"
                   gatsby="true"
                   href="/blog/tag/interative"
                   style="font-size: .68rem;"
diff --git a/src/components/shared/search.jsx b/src/components/shared/search.jsx
index 0faf36b3c..4f8e226f5 100644
--- a/src/components/shared/search.jsx
+++ b/src/components/shared/search.jsx
@@ -221,7 +221,7 @@ class Search extends Component {
           }}
         >
           <Zoom top duration={1000} cascade>
-            <p className="text-lg text-gray-800 mb-4 font-bold">
+            <p className="text-2xl text-brand-black mb-4 font-bold">
               What are you looking for?
             </p>
           </Zoom>
@@ -233,7 +233,7 @@ class Search extends Component {
                 onChange={this.search}
                 onInput={this.search}
                 autoComplete="off"
-                className="search__input py-0 pl-4 text-lg focus:outline-none pr-5 text-gray-600"
+                className="search__input py-0 pl-4 text-lg focus:outline-none pr-5 text-gray-700"
                 style={{ minWidth: "25vw" }}
                 type="text"
                 name="search"
diff --git a/src/components/visualisation/__tests__/__snapshots__/visLayout.spec.js.snap b/src/components/visualisation/__tests__/__snapshots__/visLayout.spec.js.snap
index a369a3132..b541ba905 100644
--- a/src/components/visualisation/__tests__/__snapshots__/visLayout.spec.js.snap
+++ b/src/components/visualisation/__tests__/__snapshots__/visLayout.spec.js.snap
@@ -6,14 +6,14 @@ Object {
   "baseElement": <body>
     <div>
       <div
-        class="bg-gray-900"
+        class="bg-brand-black"
       >
         <div />
         <div
           class="relative"
         >
           <button
-            class="sc-jSMfEi sc-gKXOVf kiuFGX hsfkHZ group"
+            class="sc-jSMfEi sc-gKXOVf kiuFGX eoyvCT group"
             id="vis-tag-button"
             title="Tag Menu"
           >
@@ -33,12 +33,12 @@ Object {
             </svg>
           </button>
           <button
-            class="sc-jSMfEi sc-iBkjds kiuFGX eFRXLr group bg-gray-800"
+            class="sc-jSMfEi sc-iBkjds kiuFGX eFRXLr group bg-brand-black text-white"
             id="vis-footer-button"
             title="Footer"
           >
             <svg
-              class="text-white text-2xl group-hover:scale-110 transition duration-500"
+              class="text-2xl group-hover:scale-110 transition duration-500"
               fill="currentColor"
               height="1em"
               stroke="currentColor"
@@ -57,13 +57,13 @@ Object {
             </svg>
           </button>
           <div
-            class="invisible translate-x-full bg-gray-900 transform"
+            class="invisible translate-x-full bg-black transform"
             id="vis-tag-menu"
             style="z-index: 1000; max-width: 450px; transition: .5s ease; width: 100%; height: 100%; top: 0px; right: 0px; position: fixed;"
           >
             <button
-              class="text-gray-500 hover:text-red-400 text-lg"
-              style="border: 1px solid transparent; background-color: black; transition: .3s ease; position: absolute; top: 0px; right: 0px; margin: 1.5rem; display: flex; align-items: center; padding: .75rem .25rem; border-radius: .375rem;"
+              class="text-gray-300 hover:text-brand-blue text-lg"
+              style="border: 1px solid transparent; background-color: rgb(25, 25, 25); transition: .3s ease; position: absolute; top: 0px; right: 0px; margin: 1.5rem; display: flex; align-items: center; padding: .3rem; border-radius: .375rem;"
             >
               <svg
                 class="text-xl mr-1"
@@ -80,7 +80,7 @@ Object {
                   fill="none"
                 />
                 <path
-                  d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"
+                  d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
                 />
               </svg>
               CLOSE
@@ -136,7 +136,7 @@ Object {
               </h1>
             </div>
             <div
-              class="sc-eCYdqJ hXOjjF"
+              class="sc-eCYdqJ lcWmHU"
               height="auto"
               width="100%"
             >
@@ -583,7 +583,7 @@ Object {
             class="flex w-full h-full justify-center"
           >
             <div
-              class="sc-eCYdqJ jujnEb"
+              class="sc-eCYdqJ dlzdhm"
               id="main-word-cloud"
             >
               <div
@@ -599,7 +599,7 @@ Object {
           </button>
         </div>
         <div
-          class="min-h-80 flex flex-wrap justify-center pt-24 pb-32 bg-gray-900 px-5"
+          class="min-h-80 flex flex-wrap justify-center pt-24 pb-32 bg-brand-black px-5"
         >
           <div
             class="sc-gsnTZi djaffU"
@@ -683,14 +683,14 @@ Object {
   </body>,
   "container": <div>
     <div
-      class="bg-gray-900"
+      class="bg-brand-black"
     >
       <div />
       <div
         class="relative"
       >
         <button
-          class="sc-jSMfEi sc-gKXOVf kiuFGX hsfkHZ group"
+          class="sc-jSMfEi sc-gKXOVf kiuFGX eoyvCT group"
           id="vis-tag-button"
           title="Tag Menu"
         >
@@ -710,12 +710,12 @@ Object {
           </svg>
         </button>
         <button
-          class="sc-jSMfEi sc-iBkjds kiuFGX eFRXLr group bg-gray-800"
+          class="sc-jSMfEi sc-iBkjds kiuFGX eFRXLr group bg-brand-black text-white"
           id="vis-footer-button"
           title="Footer"
         >
           <svg
-            class="text-white text-2xl group-hover:scale-110 transition duration-500"
+            class="text-2xl group-hover:scale-110 transition duration-500"
             fill="currentColor"
             height="1em"
             stroke="currentColor"
@@ -734,13 +734,13 @@ Object {
           </svg>
         </button>
         <div
-          class="invisible translate-x-full bg-gray-900 transform"
+          class="invisible translate-x-full bg-black transform"
           id="vis-tag-menu"
           style="z-index: 1000; max-width: 450px; transition: .5s ease; width: 100%; height: 100%; top: 0px; right: 0px; position: fixed;"
         >
           <button
-            class="text-gray-500 hover:text-red-400 text-lg"
-            style="border: 1px solid transparent; background-color: black; transition: .3s ease; position: absolute; top: 0px; right: 0px; margin: 1.5rem; display: flex; align-items: center; padding: .75rem .25rem; border-radius: .375rem;"
+            class="text-gray-300 hover:text-brand-blue text-lg"
+            style="border: 1px solid transparent; background-color: rgb(25, 25, 25); transition: .3s ease; position: absolute; top: 0px; right: 0px; margin: 1.5rem; display: flex; align-items: center; padding: .3rem; border-radius: .375rem;"
           >
             <svg
               class="text-xl mr-1"
@@ -757,7 +757,7 @@ Object {
                 fill="none"
               />
               <path
-                d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"
+                d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
               />
             </svg>
             CLOSE
@@ -813,7 +813,7 @@ Object {
             </h1>
           </div>
           <div
-            class="sc-eCYdqJ hXOjjF"
+            class="sc-eCYdqJ lcWmHU"
             height="auto"
             width="100%"
           >
@@ -1260,7 +1260,7 @@ Object {
           class="flex w-full h-full justify-center"
         >
           <div
-            class="sc-eCYdqJ jujnEb"
+            class="sc-eCYdqJ dlzdhm"
             id="main-word-cloud"
           >
             <div
@@ -1276,7 +1276,7 @@ Object {
         </button>
       </div>
       <div
-        class="min-h-80 flex flex-wrap justify-center pt-24 pb-32 bg-gray-900 px-5"
+        class="min-h-80 flex flex-wrap justify-center pt-24 pb-32 bg-brand-black px-5"
       >
         <div
           class="sc-gsnTZi djaffU"
diff --git a/src/components/visualisation/__tests__/__snapshots__/wordCloud.spec.js.snap b/src/components/visualisation/__tests__/__snapshots__/wordCloud.spec.js.snap
index c6b538672..8cdd6c147 100644
--- a/src/components/visualisation/__tests__/__snapshots__/wordCloud.spec.js.snap
+++ b/src/components/visualisation/__tests__/__snapshots__/wordCloud.spec.js.snap
@@ -6,7 +6,7 @@ Object {
   "baseElement": <body>
     <div>
       <div
-        class="sc-eCYdqJ lovldu"
+        class="sc-eCYdqJ dJZmrT"
       >
         <div
           class="word-cloud-wrap space-y-0 space-x-1"
@@ -31,7 +31,7 @@ Object {
             class="word "
             gatsby="true"
             href="/visualisation/tag/test-tag-1"
-            style="font-size: 0.9rem; color: white;"
+            style="font-size: 0.95rem; color: white;"
           >
             Test Tag 1
           </a>
@@ -41,7 +41,7 @@ Object {
   </body>,
   "container": <div>
     <div
-      class="sc-eCYdqJ lovldu"
+      class="sc-eCYdqJ dJZmrT"
     >
       <div
         class="word-cloud-wrap space-y-0 space-x-1"
@@ -66,7 +66,7 @@ Object {
           class="word "
           gatsby="true"
           href="/visualisation/tag/test-tag-1"
-          style="font-size: 0.9rem; color: white;"
+          style="font-size: 0.95rem; color: white;"
         >
           Test Tag 1
         </a>
diff --git a/src/css/react-tabs.scss b/src/css/react-tabs.scss
index 38e21cb67..b92d0e199 100644
--- a/src/css/react-tabs.scss
+++ b/src/css/react-tabs.scss
@@ -17,8 +17,8 @@
     cursor: pointer;
     color: rgb(189, 189, 189);
     background-color: rgba(31, 41, 55, 1);
-    font-size: .95rem;
-    transition: .3s ease;
+    font-size: 0.95rem;
+    transition: 0.3s ease;
 
     &--selected {
       background: rgba(55, 65, 81, 1);
@@ -26,7 +26,7 @@
       border-bottom: 2px solid var.$colour-brand-blue;
 
       &:hover {
-        background: rgba(255,255,255, 1);
+        background: rgba(255, 255, 255, 1);
         color: black;
       }
     }
@@ -38,7 +38,7 @@
 
     &:hover {
       background: rgba(55, 65, 81, 1);
-      color: white
+      color: white;
     }
 
     &:focus {
@@ -49,12 +49,20 @@
 
   &__tab-panel {
     display: none;
-    font-size: .95rem;
+    font-size: 0.95rem;
     color: rgba(209, 213, 219, 1);
-    background-color: rgba(17, 24, 39, 1);
+    background-color: var.$colour-brand-black;
 
     &--selected {
       display: block;
     }
+
+    a {
+      color: var.$colour-brand-blue;
+
+      &:hover {
+        background: var.$colour-brand-purple;
+      }
+    }
   }
 }
diff --git a/src/pages/about.jsx b/src/pages/about.jsx
index a69bd7039..50ac00523 100644
--- a/src/pages/about.jsx
+++ b/src/pages/about.jsx
@@ -51,7 +51,7 @@ const About = () => {
           </div>
 
           <Link to="/about#more">
-            <button className="mt-16 bg-gray-300 hover:bg-brand-blue text-center hover:text-white text-gray-700 font-semibold py-2 px-6 border-2 border-transparent shadow">
+            <button className="mt-16 bg-gray-300 hover:bg-brand-blue text-center text-brand-black font-semibold py-2 px-6 border-2 border-transparent shadow">
               Learn more
             </button>
           </Link>
@@ -100,7 +100,7 @@ const About = () => {
         <div className="flex flex-wrap text-gray-900 text-xl px-3 lg:px-32 xl:px-48 py-16">
           <Fade>
             <p className="">
-              <b className="text-brand-blue">Dataviz.Shef</b> is a joint
+              <b className="bg-brand-blue">Dataviz.Shef</b> is a joint
               initiative between <b>The University Library</b>,{" "}
               <b>IT Services</b>, and <b>Research Software Engineering (RSE)</b>
               . This community website exists to provide research staff and
@@ -140,7 +140,9 @@ const About = () => {
               </a>
             </div>
 
-            <p className="text-brand-blue text-4xl py-8">Contribute</p>
+            <p className="border-brand-blue border-b-4 text-4xl my-8">
+              Contribute
+            </p>
 
             <p className="text-gray-900">
               From ideas to content for the ORDA showcase, our blog or Dataviz