diff --git a/about.json b/about.json
index 58e50e4289117f5fd31a18bc272c73ba69bc3d18..df21f6ffa613aaf1a8473a93cca35f3a8ac4077c 100644
--- a/about.json
+++ b/about.json
@@ -1,17 +1,17 @@
 {
   "name": "Community Theme",
-  "about_url": null,
-  "license_url": null,
+  "about_url": "https://lab.frogg.it/lydra/discourse/community-theme",
+  "license_url": "https://lab.frogg.it/lydra/discourse/community-theme/-/blob/main/LICENCE",
   "color_schemes": {
       "Community Light": {
           "primary": "222222",
           "secondary": "ffffff",
           "tertiary": "a9a4a4",
           "quaternary": "797979",
-          "primary-medium": "C7C7C7",
-          "primary-low-mid": "eeeeee",
-          "header_background": "ffffff",
-          "header_primary": "333333",
+          "primary-medium": "797979",
+          "primary-low-mid": "333333",
+          "header_background": "797979",
+          "header_primary": "eeeeee",
           "highlight": "ffff4d",
           "danger": "e45735",
           "success": "009900",
diff --git a/common/common.scss b/common/common.scss
index 3c5f24463244f87a178eaaec2caed741ecea5b7c..4c81933814f7303e76adc714884b3320318dd719 100644
--- a/common/common.scss
+++ b/common/common.scss
@@ -42,6 +42,10 @@ input[type="color"]:focus,
   outline: none;
 }
 
+:root {
+  --banner-secondary-text: var(--primary-medium);
+}
+
 .d-header {
   height: 5em;
   box-shadow: none;
@@ -51,15 +55,16 @@ input[type="color"]:focus,
   border-radius: 10px;
 }
 
+///////// HOME //////////
 .custom-homepage-columns {
   margin: 2em 0 2em 0;
   .col {
     position: relative;
     @include border-radius;
-    background: $color-white;
     padding: 2em 2em 1em;
-    border-top: 8px solid $tertiary;
-    box-shadow: 0 8px 60px 0 rgba(103,151,255,.10), 0 12px 90px 0 rgba(133,255,103,.10);
+    border-top: 8px solid $header_background;
+    box-shadow: 0 8px 60px 0 rgba(154, 157, 163, 0.1), 0 12px 90px 0 rgba(134, 134, 134, 0.1);
+
     .header-wrapper {
       color: var(--primary);
       background-color: transparent;
@@ -69,15 +74,15 @@ input[type="color"]:focus,
     }
     .btn-more {
       color: var(--secondary);
-      background: var(--tertiary);
+      background: var(--primary-medium);
       transition: all 0.3s linear;
       @include border-radius;
       text-transform: uppercase;
-      border: 1px solid var(--tertiary);
+      border: 1px solid var(--primary-medium);
       &:hover {
-        background: var(--tertiary);
+        background: var(--primary-medium);
         color: var(--secondary);
-        box-shadow: 4px 4px $color-box-shadow;
+        box-shadow: 4px 4px $tertiary;
         transition: 0.3s;
         @include border-radius;
       }
@@ -85,6 +90,36 @@ input[type="color"]:focus,
   }
 }
 
+/// Text ///
+p {
+  color: var(--primary);
+}
+
+.site-texts .site-text .site-text-value {
+  color: var(--primary);
+}
+
+.th {
+  color: var(--primary);
+}
+
+.permalink-description {
+  color: var(--quarternary);
+}
+
+.admin-customize .themes-list-container .themes-list-item.inactive-indicator {
+  color: var(--primary-medium);
+}
+
+.content-list h3 {
+  color: var(--primary-medium);
+}
+
+/// text box ///
+.topic-list-item.visited a.title:not(.badge-notification), .latest-topic-list-item.visited a.title:not(.badge-notification), .category-topic-link.visited a.title:not(.badge-notification) {
+  color: $primary;
+}
+
 .navigation-categories .search-banner {
   @include border-radius;
   height: 350px;
@@ -94,39 +129,36 @@ input[type="color"]:focus,
   max-width: 1110px;
 }
 
-.category-box-inner {
-  background: $color-white;
-}
-
 .navigation-topics {
+  
   .container.list-container {
     @include border-radius;
-    box-shadow: 0 8px 60px 0 rgba(103,151,255,.10), 0 12px 90px 0 rgba(133,255,103,.10);
+    box-shadow: 0 8px 60px 0 rgba(159, 161, 165, 0.1), 0 12px 90px 0 rgba(197, 197, 197, 0.1);
     padding: 2em;
-    background-color: $color-white;
-    border-top: 8px solid $tertiary;
+    border-top: 8px solid $primary-medium;
     margin-top: .8em;
   }
 }
 
 .search-widget .search-context {
   padding: 10px;
-  background-color: var(--tertiary-medium);
+  background-color: var(--primary-medium-medium);
   @include border-radius;
 }
 
 .search-menu .search-context .show-help {
-  color: $color-white;
+  color: $header_background;
 }
 
 .menu-panel .d-label {
-  color: $color-black;
+  color: $primary;
 }
 
 a {
-  color: var(--tertiary-hover);
+  color: var(--primary-medium-hover);
 }
 
+// White background in boxes
 .category-boxes {
   display: grid;
   grid-gap: 2em;
@@ -138,23 +170,31 @@ a {
     overflow: hidden;
     border: none;
     border-top: 8px solid;
-    background: var(--secondary);
+
     @include border-radius;
-    box-shadow: 0px 2px 3px 0px rgba(2,47,57,.14);
+    box-shadow: 0px 2px 3px 0px $color-square-webkit-gradient;
+
     .category-box-inner {
       border: none;
       padding: 0;
+
       .category-details {
-        padding: 2em;
+        padding: 0.3em;
       }
     }
     &:hover {
-      box-shadow: 0px 40px 30px 0px rgba(2,47,57,.10);
+      box-shadow: 0px 40px 30px 0px rgba(53, 53, 53, 0.1);
       transform: translateY(-2px);
     }
   }
 }
 
+//category title
+.category-list .category-text-title {
+  align-items: baseline;
+  display: inline-flex;
+}
+
 @media (max-width: 960px) {
   .category-boxes.with-logos.with-subcategories {
     grid-template-columns: 1fr;
@@ -164,25 +204,24 @@ a {
 .category-list-item.category {
   @include border-radius;
   border-right: 1px solid var(--primary-low) !important;
-  box-shadow: 0 0 4px 0 rgba(0,0,0,.10);
+  box-shadow: 0 0 4px 0 rgba(5, 5, 5, 0.1);
   margin: 0 0.59em 2em .59em;
-  background: $color-white;
 }
 
 #create-topic {
   color: var(--secondary);
-  background: var(--tertiary);
+  background: var(--primary-medium);
   transition: all 0.3s linear;
   @include border-radius;
   text-transform: uppercase;
-  border: 2px solid var(--tertiary);
+  border: 2px solid var(--primary-medium);
   .fa {
     color: var(--secondary);
   }
   &:hover {
-    background: var(--tertiary);
+    background: var(--primary-medium);
     color: var(--secondary);
-    box-shadow: 4px 4px $color-box-shadow;
+    box-shadow: 4px 4px $tertiary;
     transition: all 0.3s linear;
     @include border-radius;
     .fa {
@@ -201,7 +240,7 @@ a {
     border-radius: none;
     border: none;
     &:hover {
-      background: var(--tertiary);
+      background: var(--primary-medium);
       border-radius: 0;
     }
   }
@@ -210,15 +249,15 @@ a {
 .list-controls .combo-box .combo-box-header {
   border: none;
   @include border-radius;
-  background-color: $color-white;
+  background-color: $header_background;
 }
 
 .menu-panel .panel-body-bottom .btn {
   svg {
-    color: var(--tertiary);
+    color: var(--primary-medium);
   }
   &:hover {
-    background: var(--tertiary);
+    background: var(--primary-medium);
     color: var(--secondary);
   }
 }
@@ -230,34 +269,21 @@ a {
     @include border-radius;
     transition: all 0.3s linear;
     background-color: transparent;
-    color: var(--tertiary);
-    border: 1px dashed var(--tertiary);
+    color: var(--primary-medium);
+    border: 1px dashed var(--primary-medium);
   }
   &.active {
     @include border-radius;
     transition: all 0.3s linear;
-    background: $color-mint;
+    background: $primary-medium;
     color: var(--secondary);
-    border: 1px solid $color-mint;
-  }
-}
-
-.select-kit.dropdown-select-box .dropdown-select-box-header {
-  background: var(--tertiary);
-  @include border-radius;
-  border: 1px solid var(--tertiary);
-  color: var(--secondary);
-  svg {
-    color: var(--secondary);
-    &:hover {
-      color: var(--secondary);
-    }
+    border: 1px solid $primary-medium;
   }
 }
 
 .d-editor-button-bar .select-kit.dropdown-select-box .dropdown-select-box-header {
   background: transparent;
-  color: var(--primary-medium);
+  color: var(--primary-low-mid);
   border: 1px solid transparent;
   border-radius: 0;
   svg {
@@ -277,25 +303,25 @@ a {
 
 .discourse-no-touch .btn:hover, .discourse-no-touch .btn.btn-hover {
   color: var(--secondary);
-  background: var(--tertiary-hover);
+  background: $header-background;
   border-radius: 5px;
   .fa {
-    color: var(--secondary);
+    color: var(--quaternary);
   }
 }
 
 .menu-panel .widget-link:hover, .menu-panel .widget-link:focus,
 .menu-panel .categories-link:hover, .menu-panel .categories-link:focus {
-  background-color: var(--tertiary-low);
+  background-color: var(--primary-medium-low);
 }
 
-.btn-default {
+.btn-default, .btn.btn-icon-text {
   color: var(--secondary);
-  background: var(--tertiary);
+  background: var(--primary-medium);
   transition: all 0.3s linear;
   @include border-radius;
   text-transform: uppercase;
-  border: 1px solid var(--tertiary);
+
   .fa {
     color: var(--secondary);
   }
@@ -331,7 +357,7 @@ a:hover {
   color: var(--tertiary-hover);
 }
 
-.image-upload-controls .btn-default {
+.image-upload-controls {
   border: 1px solid var(--secondary);
   .fa {
     color: var(--secondary);
@@ -349,7 +375,7 @@ a:hover {
 }
 
 .custom-search-banner-wrap h1, .custom-search-banner-wrap p {
-  color: $color-white;
+  color: $header_background;
 }
 
 .btn[href] {
@@ -369,3 +395,301 @@ summary.select-kit-header.single-select-header.dropdown-select-box-header {
     border: 1px dashed var(--tertiary);
   }
 }
+
+.banner-box {
+  width: $large-width;
+  max-width: calc(100% - 16px);
+  margin: 0 auto;
+  margin-top: 20px;
+  color: $primary_text_color;
+  position: relative;
+  background-image: url($banner_background_image);
+  background-size: cover;
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-color: $background_color;
+
+  .button-container {
+    margin-right: 5px;
+    position: absolute;
+    z-index: z("base") + 1;
+    right: 0;
+    top: 2px;
+
+    .close,
+    .toggle {
+      float: right;
+      padding: 5px;
+      border: none;
+      color: $tertiary;
+      background: transparent;
+      font-size: 1.5157em;
+      cursor: pointer;
+
+      svg {
+        color: $tertiary;
+      }
+      .d-button-label {
+        font-size: 1em;
+        color: $header-background;
+      }
+
+      &:hover {
+        svg {
+          color: $primary;
+        }
+        .d-button-label {
+          font-size: 1em;
+          color: $header-background !important;
+        }
+      }
+
+      .svg-icon.hidden {
+        display: none;
+      }
+    }
+  }
+
+  h1,
+  h2,
+  h3 {
+    text-align: center;
+    color: $secondary_text_color;
+  }
+
+  a {
+    color: $link_text_color;
+  }
+
+  .section-header {
+    padding-bottom: 20px;
+
+    .x-title {
+      padding: 25px 65px;
+      margin: 0;
+    }
+
+    .colored-line {
+      margin: auto;
+      width: 165px;
+      height: 1px;
+      background: $secondary_text_color;
+    }
+
+    .description p {
+      margin: 0;
+      padding: 15px;
+      text-align: center;
+    }
+  }
+
+  .row {
+    display: flex;
+    justify-content: center;
+
+    .single-box {
+      float: left;
+      position: relative;
+      min-height: 1px;
+      padding: 0px 15px 30px;
+      text-align: center;
+
+      .icon {
+        font-size: 70px;
+        color: $secondary_text_color;
+
+        .responsive-img {
+          vertical-align: -0.125em;
+          border-style: none;
+          border-width: 1px;
+          height: 220px;
+        }
+      }
+
+      .banner-list {
+        display: flex;
+        justify-content: center;
+        ul {
+          text-align: left;
+          margin: 0;
+        }
+
+        li {
+          color: var(--primary);
+        }
+      }
+    }
+  }
+}
+
+body {
+  background-color: $header_primary;
+}
+
+//Categories boxes
+.category-list tbody .category {
+  padding: 0;
+  border-width: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.category-list tbody td {
+  display: inline-block;
+  width: 250px;
+  height: 250px;
+  border-left-color: transparent;
+  background-color: $secondary;
+  border-radius: 10px;
+}
+
+.category-list tbody .category {
+  border-left: 6px solid;
+  background-color: none;
+}
+
+///here, 120px is aboute logo/icons size
+.category-boxes .category-box .logo.aspect-image img, .category-boxes-with-topics .category-box .logo.aspect-image img {
+  --height: 120px;
+  height: var(--height);
+  width: calc(var(--height) * var(--aspect-ratio));
+  max-width: 100%;
+  border-color: none;
+  border-top: none;
+}
+
+.logo.aspect-image img, .logo.aspect-image img {
+padding-top: 20px;
+}
+
+.categories-and-latest {
+flex-direction: column;
+}
+
+.category-list {
+thead,
+.topics,
+.subcategories,
+.category-description {
+  display: none;
+  align-items: baseline;
+}
+
+
+.category-list .category-text-title {
+  align-items: baseline;
+  display: inline-flex;
+}
+
+tbody {
+  text-align: center;
+
+  tr {
+    display: inline-block;
+    width: 250px;
+    height: 250px;
+    margin: 0.75em;
+    border-left-color: transparent;
+    border-radius: 10px;
+    border-bottom: none;
+  }
+
+  .category {
+    padding: 0;
+    border-width: 0;
+    display: block;
+    width: 100%;
+    height: 100%;
+    position: relative;
+    
+    &:hover {
+      box-shadow: 0px 8px 20px 0px rgba(2,47,57,.10);
+      transform: translateY(-2px) !important;
+    }
+
+    > div {
+      height: 100%;
+    }
+
+    .category-logo {
+      float: unset;
+      margin: 0 auto;
+    }
+
+    .category-name {
+      margin-top: 1.25em;
+    }
+
+    h3 {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+
+      a[href] {
+        flex-direction: column-reverse;
+        width: 250px;
+      }
+    }
+
+    &:after {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      top: 0;
+      left: 0;
+      content: "";
+      z-index: 1;
+      box-sizing: border-box;
+      pointer-events: none;
+      opacity: 0.35;
+      border-color: inherit;
+    }
+  }
+}
+}
+
+//fin categories boxes
+
+.banner-box .row .single-box .icon .responsive-img {
+  height: 220px !important;
+}
+
+///// footer background and font //////
+.custom-footer{
+  background: var(--primary-medium) !important;
+}
+
+.custom-footer > ul {
+  color: var(--secondary) !important;
+}
+
+.custom-footer .footer-section-link-wrapper a, .footer-links > a, .blurb {
+  color: var(--secondary) !important;
+}
+
+////Color showcase categories/////
+.custom-homepage-columns .col {
+  position: relative;
+  background-color: $secondary;
+}
+
+///// button widget ///////
+.btn-flat .icon {
+  color: $primary-low-mid;
+}
+
+.btn-flat .d-icon {
+  color: $primary-low-mid;
+}
+
+.admin-report .header .breadcrumb .report .info {
+  color: $primary-medium;
+}
+
+/// Page Top & Latest ///
+.navigation-topics .container.list-container{
+  background-color: $secondary;
+}
diff --git a/desktop/desktop.scss b/desktop/desktop.scss
index 87513ae205b44a2438b40c60b9e8b18c9a58d846..7a28005f594011d7741f4359b6e437fc9ab88c02 100644
--- a/desktop/desktop.scss
+++ b/desktop/desktop.scss
@@ -2,38 +2,9 @@
 
 body:not(.navigation-categories):not(.navigation-topics) #main-outlet {
   @include border-radius;
-  box-shadow: 0 8px 60px 0 rgba(103,151,255,.10), 0 12px 90px 0 rgba(133,255,103,.10);
+  box-shadow: 0 8px 60px 0 rgba(114, 114, 114, 0.1), 0 12px 90px 0 rgba(148, 148, 148, 0.1);
   padding: 2em;
-  background-color: $color-white;
-  border-top: 8px solid $tertiary;
+  background-color: $secondary;
+  border-top: 8px solid $header-background;
   margin-top: .8em;
 }
-
-#main-outlet:after  {
-  content: "";
-  display: block;
-  position: fixed;
-  z-index: -1;
-  width: 500px;
-  height: 500px;
-  border-radius: 2000px;
-  background: $color-blue;
-  right: 1px;
-  top: -57px;
-}
-
-#main-outlet:before {
-  content: "";
-  display: block;
-  position: fixed;
-  z-index: -1;
-  width: 300px;
-  height: 300px;
-  border-radius: 30px;
-  background: $color-square-webkit-gradient;
-  background: $color-square-gradient;
-  left: 70px;
-  top: 350px;
-  transform: rotate(74deg);
-  transform-origin: 0 100%;
-}
diff --git a/scss/variables.scss b/scss/variables.scss
index 0ad61c64fa8ee5feac52bc510210533f2781d20e..aada66475c3af62fd13e486581cd52ebe1462d6a 100644
--- a/scss/variables.scss
+++ b/scss/variables.scss
@@ -3,9 +3,18 @@
 }
 
 $color-white: #ffffff;
+$color-white-smoke: rgb(245, 245, 245);
+$color-smoke: rgb(236, 236, 236);
 $color-black: #000000;
-$color-box-shadow: #65a797;
-$color-mint: #75BDAD;
-$color-blue: #e5f8ff;
-$color-square-gradient: linear-gradient(4deg, rgba(143,236,202,.29) 55%, rgba(74, 247, 255, 0.08) 100%);
-$color-square-webkit-gradient: -webkit-linear-gradient(4deg, rgba(143,236,202,.29) 55%, rgba(74, 247, 255, 0.08) 100%);
+$color-box-shadow: #8c9691;
+$color-neutral: #bac2bf;
+$color-grey: #e5e7e7;
+$color-grey-coffee: #646464;
+$color-dark-chocolate: #222222;
+$color-square-gradient: linear-gradient(4deg, rgba(201, 201, 201, 0.29) 55%, rgba(161, 161, 161, 0.08) 100%);
+$color-square-webkit-gradient: -webkit-linear-gradient(4deg, rgba(180, 180, 180, 0.29) 55%, rgba(136, 136, 136, 0.08) 100%);
+$color-box-shadow-light: rgba(159, 161, 165, 0.1), 0 12px 90px 0 rgba(197, 197, 197, 0.1);
+$color-box-shadow-light-coffee: rgba(114, 114, 114, 0.1), 0 12px 90px 0 rgba(148, 148, 148, 0.1);
+$color-box-shadow-middle: rgba(53, 53, 53, 0.1);
+$color-box-shadow-pure-black: rgba(5, 5, 5, 0.1);
+$color-box-shadow-154-134:rgba(154, 157, 163, 0.1), 0 12px 90px 0 rgba(134, 134, 134, 0.1);
\ No newline at end of file