diff --git a/docusaurus.config.js b/docusaurus.config.js
index 19900be..3ca3a28 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -24,6 +24,7 @@ const SUGGEST_A_FEATURE_LINK =
 const X_LINK = 'https://x.com/kibisis_wallet';
 
 // application
+const TAGLINE = 'Not just for DeFi';
 const TITLE = 'Kibisis';
 
 /** @type {import('@docusaurus/types').Config} */
@@ -83,7 +84,7 @@ const config = {
   ],
   projectName: 'kibisis-website',
   staticDirectories: [STATIC_DIR],
-  tagline: 'Not just for DeFi',
+  tagline: TAGLINE,
   themeConfig:
     /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
     ({
@@ -107,15 +108,15 @@ const config = {
             items: [
               {
                 label: 'Features',
-                to: '/#features',
+                href: '/#features',
               },
               {
                 label: 'Concepts',
-                to: '/#concepts',
+                href: '/#concepts',
               },
               {
                 label: 'Download',
-                to: '/#download',
+                href: '/#download',
               },
             ],
             label: 'Overview',
@@ -137,8 +138,8 @@ const config = {
       },
       footer: {
         copyright: `
-<div class="footer-container">
-    <p class="footer-text">Licensed under <a class="footer-text--link" href="${GITHUB_LINK}/blob/main/LICENSE" target="_blank">GPL-2.0</a>. Icons provided by <a class="footer-text--link" href="https://www.flaticon.com/" target="_blank">flaticon</a>.</p>
+<div class="footer__copyright-container">
+    <p class="footer__text">Licensed under <a class="footer__text--link" href="${GITHUB_LINK}/blob/main/LICENSE" target="_blank">GPL-2.0</a>. Icons provided by <a class="footer__text--link" href="https://www.flaticon.com/" target="_blank">flaticon</a>.</p>
 </div>
         `,
         logo: {
@@ -154,15 +155,15 @@ const config = {
             items: [
               {
                 label: 'Concepts',
-                to: '/#concepts',
+                href: '/#concepts',
               },
               {
                 label: 'Features',
-                to: '/#features',
+                href: '/#features',
               },
               {
                 label: 'Download',
-                to: '/#download',
+                href: '/#download',
               },
             ],
           },
@@ -183,18 +184,30 @@ const config = {
             title: 'Social',
             items: [
               {
-                label: 'X, formerly Twitter',
-                href: X_LINK,
+                html: `
+<div class="footer__icon-container">
+  <a class="footer__icon-link" href="${GITHUB_LINK}" target="_blank">
+    <svg
+      viewBox="0 0 98 96"
+      xmlns="http://www.w3.org/2000/svg">
+      <path d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" />
+    </svg>
+  </a>
+  <a class="footer__icon-link" href="${X_LINK}" target="_blank">
+    <svg
+      viewBox="0 0 1200 1227"
+      xmlns="http://www.w3.org/2000/svg">
+      <path d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z" />
+    </svg>
+  </a>
+</div>
+                `,
               },
             ],
           },
           {
             title: 'Get Involved',
             items: [
-              {
-                label: 'GitHub',
-                href: GITHUB_LINK,
-              },
               {
                 label: 'Report a bug',
                 href: REPORT_A_BUG_LINK,
diff --git a/src/components/Carousel/styles.module.scss b/src/components/Carousel/styles.module.scss
index b48df5a..a4c50bf 100644
--- a/src/components/Carousel/styles.module.scss
+++ b/src/components/Carousel/styles.module.scss
@@ -47,7 +47,6 @@
 .indicator {
   background: var(--ifm-color-primary);
   display: inline-block;
-  filter: alpha(opacity=30);
   opacity: 0.3;
   border-radius: 50%;
   width: 8px;
@@ -58,7 +57,6 @@
 
   &--selected,
   &:hover {
-    filter: alpha(opacity=100);
     opacity: 1;
   }
 }
diff --git a/src/components/ConceptsSection/ConceptItem.tsx b/src/components/ConceptsSection/ConceptItem.tsx
index 1f1b683..839137f 100644
--- a/src/components/ConceptsSection/ConceptItem.tsx
+++ b/src/components/ConceptsSection/ConceptItem.tsx
@@ -19,11 +19,11 @@ const ConceptItem: FC<IProps> = ({
 }: IProps) => {
   return (
     <div className={styles.item}>
-      <div className={styles['image-container']}>
+      <div className={styles.container__image}>
         <SvgComponent className={styles.image} role="img" />
       </div>
 
-      <div className={styles['text-container']}>
+      <div className={styles.container__text}>
         <Heading level="h2">{title}</Heading>
         <Text>{description}</Text>
       </div>
diff --git a/src/components/ConceptsSection/ConceptsSection.tsx b/src/components/ConceptsSection/ConceptsSection.tsx
index 21bf8f8..1198cc4 100644
--- a/src/components/ConceptsSection/ConceptsSection.tsx
+++ b/src/components/ConceptsSection/ConceptsSection.tsx
@@ -25,7 +25,7 @@ const ConceptsSection: FC<IProps> = ({ variant }: IProps) => {
       SvgComponent: concept001Svg,
       description: (
         <>
-          Kibisis differs from most wallets by focusing on tokens as a utility,
+          Kibisis differs from most wallets by focusing on assets as a utility,
           not just for DeFi.
         </>
       ),
@@ -36,7 +36,7 @@ const ConceptsSection: FC<IProps> = ({ variant }: IProps) => {
       description: (
         <>
           Kibisis not only works with Algorand, but endeavours to encompass all
-          AVM chains. With Algorand AND Voi compatibility.
+          AVM chains.
         </>
       ),
     },
@@ -54,7 +54,7 @@ const ConceptsSection: FC<IProps> = ({ variant }: IProps) => {
 
   return (
     <Section id="concepts" title="Concepts" variant={variant}>
-      <div className={styles['items-container']}>
+      <div className={styles.container__items}>
         {items.map((props, index) => (
           <ConceptItem {...props} key={`concept-item-${index}`} />
         ))}
diff --git a/src/components/ConceptsSection/styles.module.scss b/src/components/ConceptsSection/styles.module.scss
index 6523755..72eb8ec 100644
--- a/src/components/ConceptsSection/styles.module.scss
+++ b/src/components/ConceptsSection/styles.module.scss
@@ -2,25 +2,33 @@
 
 $max-width: 300px;
 
-.items-container {
-  align-items: center;
-  display: flex;
-  flex-direction: column;
-  padding: 3rem 0;
-  width: 100%;
-
-  @include tablet-and-up {
-    align-items: flex-start;
-    flex-direction: row;
+.container {
+  &__image {
+    display: flex;
     justify-content: center;
+    max-width: $max-width;
+    width: 100%;
+  }
+
+  &__items {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    padding: 3rem 0;
+    width: 100%;
+    @include tablet-and-up {
+      align-items: flex-start;
+      flex-direction: row;
+      justify-content: center;
+    }
   }
-}
 
-.image-container {
-  display: flex;
-  justify-content: center;
-  max-width: $max-width;
-  width: 100%;
+  &__text {
+    padding-top: 1rem;
+    text-align: center;
+    max-width: $max-width;
+    width: 100%;
+  }
 }
 
 .image {
@@ -35,10 +43,3 @@ $max-width: 300px;
     padding: 0 2rem;
   }
 }
-
-.text-container {
-  padding-top: 1rem;
-  text-align: center;
-  max-width: $max-width;
-  width: 100%;
-}
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 3f3d437..c310ed2 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -9,10 +9,10 @@ import styles from './styles.module.scss';
 
 const Header: FC = () => {
   return (
-    <header className={styles.wrapper}>
-      <div className={styles['content-container']}>
+    <header className={styles.container__outer}>
+      <div className={styles.container__content}>
         {/*title*/}
-        <div className={clsx(styles.container, styles['text-container'])}>
+        <div className={clsx(styles.container, styles.container__text)}>
           <h1 className={clsx(styles.text, styles['text--title'])}>
             The AVM utility wallet
           </h1>
@@ -23,7 +23,7 @@ const Header: FC = () => {
         </div>
 
         {/*image*/}
-        <div className={clsx(styles.container, styles['image-container'])}>
+        <div className={clsx(styles.container, styles.container__image)}>
           <ThemedImage
             alt="Wallet home screen"
             className={styles.image}
@@ -36,7 +36,7 @@ const Header: FC = () => {
       </div>
 
       {/*attribution*/}
-      <div className={styles['attribution-container']}>
+      <div className={styles.container__attribution}>
         <p className={clsx(styles.text, styles['text--attribution'])}>
           Image by{` `}
           <a
diff --git a/src/components/Header/styles.module.scss b/src/components/Header/styles.module.scss
index 39f31ed..6306533 100644
--- a/src/components/Header/styles.module.scss
+++ b/src/components/Header/styles.module.scss
@@ -2,30 +2,53 @@
 @import "../../styles/mixins";
 @import "../../styles/variables";
 
-.attribution-container {
-  align-items: center;
-  display: flex;
-  justify-content: flex-end;
-  padding: 0.5rem;
-  @include mobile-only {
-    display: none;
-  }
-}
-
 .container {
   display: flex;
   flex: 1;
   padding: 2rem 0;
-}
 
-.content-container {
-  align-items: center;
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  padding: 0 2rem;
-  @include tablet-and-up {
-    flex-direction: row;
+  &__attribution {
+    align-items: center;
+    display: flex;
+    justify-content: flex-end;
+    padding: 0.5rem;
+    @include mobile-only {
+      display: none;
+    }
+  }
+
+  &__content {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    padding: 0 2rem;
+    @include tablet-and-up {
+      flex-direction: row;
+    }
+  }
+
+  &__image {
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__outer {
+    background-color: #f4f4f4;
+    display: flex;
+    flex-direction: column;
+    height: calc(100vh - var(--ifm-navbar-height));
+    justify-content: space-between;
+    @include tablet-and-up {
+      background-image: url("/static/images/header_background.jpeg");
+      background-size: cover;
+    }
+  }
+
+  &__text {
+    align-items: flex-start;
+    flex-direction: column;
+    justify-content: center;
   }
 }
 
@@ -36,11 +59,6 @@
   }
 }
 
-.image-container {
-  align-items: center;
-  justify-content: center;
-}
-
 .text {
   color: text-color("light");
 
@@ -53,7 +71,7 @@
     margin: 0;
 
     a {
-      color: primary-color("light");
+      color: primary-color("dark");
     }
   }
 
@@ -72,21 +90,3 @@
     }
   }
 }
-
-.text-container {
-  align-items: flex-start;
-  flex-direction: column;
-  justify-content: center;
-}
-
-.wrapper {
-  background-color: #f4f4f4;
-  display: flex;
-  flex-direction: column;
-  height: calc(100vh - var(--ifm-navbar-height));
-  justify-content: space-between;
-  @include tablet-and-up {
-    background-image: url("/static/images/header_background.jpeg");
-    background-size: cover;
-  }
-}
diff --git a/src/styles/footer.scss b/src/styles/footer.scss
index 8bf0b16..0761fa6 100644
--- a/src/styles/footer.scss
+++ b/src/styles/footer.scss
@@ -1,18 +1,57 @@
 @import "./functions";
 
-.footer-container {
-  align-items: center;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  width: 100%;
-}
+$social-image-size: 24px;
+
+.footer {
+  &__copyright-container {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    width: 100%;
+  }
+
+  &__icon-container {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    width: 100%;
+  }
+
+  &__icon-link {
+    display: inline-block;
+    padding: 0 1rem 0 0;
+
+    &:hover {
+      svg {
+        path {
+          fill: primary-color("dark");
+        }
+      }
+    }
+
+    svg {
+      height: $social-image-size;
+      width: $social-image-size;
+
+      path {
+        fill: text-color("dark");
+        transition: fill var(--ifm-transition-fast) ease-in-out;
+      }
+    }
+  }
+
+  &__text {
+    color: text-color("dark");
+    margin: 0;
 
-.footer-text {
-  color: text-color("dark");
-  margin: 0;
+    &--link {
+      color: primary-color("dark");
 
-  &--link {
-    color: primary-color("light");
+      &:hover {
+        color: primary-color("dark");
+      }
+    }
   }
 }
diff --git a/src/styles/functions.scss b/src/styles/functions.scss
index f5f2387..fd0ae70 100644
--- a/src/styles/functions.scss
+++ b/src/styles/functions.scss
@@ -3,16 +3,16 @@
  */
 @function text-color($theme) {
   @if $theme != "light" {
-    @return rgba(255, 255, 255, 0.92);
+    @return var(--kb-text-color-dark);
   }
 
-  @return #4A5568;
+  @return var(--kb-text-color-light);
 }
 
 @function primary-color($theme) {
   @if $theme != "light" {
-    @return var(--kb-primary-color-light);
+    @return var(--kb-primary-color-dark-500);
   }
 
-  @return var(--kb-primary-color-dark);
+  @return var(--kb-primary-color-light-500);
 }
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 98addf4..9c5b90f 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -23,53 +23,76 @@
 }
 
 :root {
-  // overrides
+  // custom
+  --kb-background-accent-color-dark: #303846;
+  --kb-background-accent-color-light: #f4f4f4;
+  --kb-background-primary-color-dark: #1A202C;
+  --kb-background-primary-color-light: #ffffff;
+  --kb-primary-color-dark-50: #F6E9FF;
+  --kb-primary-color-dark-100: #F2DEFF;
+  --kb-primary-color-dark-200: #EED3FF;
+  --kb-primary-color-dark-300: #E9C8FF;
+  --kb-primary-color-dark-400: #E5BDFF;
+  --kb-primary-color-dark-500: #E0B0FF;
+  --kb-primary-color-dark-600: #C875FF;
+  --kb-primary-color-dark-700: #AF37FF;
+  --kb-primary-color-dark-800: #9500F8;
+  --kb-primary-color-dark-900: #6F00BA;
+  --kb-primary-color-light-50: #F59CFD;
+  --kb-primary-color-light-100: #F16AFD;
+  --kb-primary-color-light-200: #EC39FC;
+  --kb-primary-color-light-300: #E707FB;
+  --kb-primary-color-light-400: #BC03CD;
+  --kb-primary-color-light-500: #8D029B;
+  --kb-primary-color-light-600: #7B0285;
+  --kb-primary-color-light-700: #66026F;
+  --kb-primary-color-light-800: #520159;
+  --kb-primary-color-light-900: #3D0143;
+  --kb-sub-text-color-dark: rgba(255, 255, 255, 0.64);
+  --kb-sub-text-color-light: #718096;
+  --kb-text-color-dark: rgba(255, 255, 255, 0.92);
+  --kb-text-color-light: #4A5568;
+
+  // overrides - light theme
   --ifm-color-content: var(--kb-text-color);
-  --ifm-color-primary: var(--kb-primary-color-light);
-  --ifm-color-primary-dark: #7B0285;
-  --ifm-color-primary-darker: #66026F;
-  --ifm-color-primary-darkest: #520159;
-  --ifm-color-primary-light: #BC03CD;
-  --ifm-color-primary-lighter: #E707FB;
-  --ifm-color-primary-lightest: #EC39FC;
+  --ifm-color-primary: var(--kb-primary-color-light-500);
+  --ifm-color-primary-dark: var(--kb-primary-color-light-600);
+  --ifm-color-primary-darker: var(--kb-primary-color-light-700);
+  --ifm-color-primary-darkest: var(--kb-primary-color-light-800);
+  --ifm-color-primary-light: var(--kb-primary-color-light-400);
+  --ifm-color-primary-lighter: var(--kb-primary-color-light-300);
+  --ifm-color-primary-lightest: var(--kb-primary-color-light-200);
   --ifm-code-font-size: 95%;
   --ifm-font-family-base: 'AnonymousPro';
   --ifm-heading-font-family: 'AnonymousPro';
   --ifm-navbar-background-color: var(--kb-background-primary-color);
   --ifm-navbar-link-color: var(--kb-text-color);
-
-  // custom
-  --kb-primary-color-dark: #E0B0FF;
-  --kb-primary-color-light: #8D029B;
-  --kb-background-primary-color: #fff;
-  --kb-background-accent-color: #f4f4f4;
-  --kb-sub-text-color: rgba(255, 255, 255, 0.64);
-  --kb-text-color: #4A5568;
+  --kb-background-accent-color: var(--kb-background-accent-color-light);
+  --kb-background-primary-color: var(--kb-background-primary-color-light);
+  --kb-sub-text-color: var(--kb-sub-text-color-light);
+  --kb-text-color: var(--kb-text-color-light);
 }
 
 [data-theme='dark'] {
-  // overrides
-  --ifm-color-primary: var(--kb-primary-color-dark);
-  --ifm-color-primary-dark: #C875FF;
-  --ifm-color-primary-darker: #AF37FF;
-  --ifm-color-primary-darkest: #9500F8;
-  --ifm-color-primary-light: #E5BDFF;
-  --ifm-color-primary-lighter: #E9C8FF;
-  --ifm-color-primary-lightest: #EED3FF;
-  --ifm--navbar-background-color: var(--kb-background-primary-color);
-
-  // custom
-  --kb-background-primary-color: #1A202C;
-  --kb-background-accent-color: #303846;
-  --kb-sub-text-color: #718096;
-  --kb-text-color: rgba(255, 255, 255, 0.92);
+  // overrides - dark theme
+  --ifm-color-primary: var(--kb-primary-color-dark-500);
+  --ifm-color-primary-dark: var(--kb-primary-color-dark-600);
+  --ifm-color-primary-darker: var(--kb-primary-color-dark-700);
+  --ifm-color-primary-darkest: var(--kb-primary-color-dark-800);
+  --ifm-color-primary-light: var(--kb-primary-color-dark-400);
+  --ifm-color-primary-lighter: var(--kb-primary-color-dark-300);
+  --ifm-color-primary-lightest: var(--kb-primary-color-dark-200);
+  --kb-background-accent-color: var(--kb-background-accent-color-dark);
+  --kb-background-primary-color: var(--kb-background-primary-color-dark);
+  --kb-sub-text-color: var(--kb-sub-text-color-dark);
+  --kb-text-color: var(--kb-text-color-dark);
 }
 
 /* overrides */
 .footer {
   &__link-item {
     &:hover {
-      color: primary-color("light");
+      color: primary-color("dark");
     }
   }
 }