diff --git a/public/directives/wz-menu/wz-menu.less b/public/directives/wz-menu/wz-menu.less
index fbeb2aa19..1a392a4a2 100644
--- a/public/directives/wz-menu/wz-menu.less
+++ b/public/directives/wz-menu/wz-menu.less
@@ -68,3 +68,18 @@
 .wz-menu-select > md-select-value {
     color: white !important;
 }
+
+.wz-menu-nav-bar {
+    min-width: 1015px;
+    background-color: #005571 !important;
+}
+
+.wz-menu-nav-bar-api {
+    float: right;
+    position: absolute;
+    right: 130px;
+    color: #ffffff;
+    top: 25px;
+    bottom: 0px;
+    margin-right: -25px;
+}
diff --git a/public/less/cleaned.less b/public/less/cleaned.less
index 5d9b6bb53..a18255b40 100644
--- a/public/less/cleaned.less
+++ b/public/less/cleaned.less
@@ -1,19 +1,3 @@
-// wazuh-navbar.less
-.wz-menu-nav-bar {
-    min-width: 1015px;
-    background-color: #005571 !important;
-}
-
-.wz-menu-nav-bar-api {
-    float: right;
-    position: absolute;
-    right: 130px;
-    color: #ffffff;
-    top: 25px;
-    bottom: 0px;
-    margin-right: -25px;
-}
-
 // RULESET
 .manager-ruleset-decoders-top-span {
     padding-left: 0px;
@@ -174,7 +158,8 @@ kbn-vis .vis-container {
 
 .wz-metric-color {
     background-color: #e4f2f5 !important;
-} // Agents
+}
+
 .wz-margin-10 {
     margin: 10px;
 }
@@ -209,10 +194,6 @@ kbn-vis .vis-container {
     text-transform: uppercase;
 }
 
-.wz-font-weight-bold {
-    font-weight: bold;
-}
-
 .joinCardsRow {
     margin-top: 5px;
 }
@@ -238,18 +219,10 @@ kbn-vis .vis-container {
     background-color: rgb(49, 196, 113);
 }
 
-.color-green {
-    color: rgb(49, 196, 113) !important;
-}
-
 .red {
     background-color: #da534f;
 }
 
-.color-red {
-    color: #da534f !important;
-}
-
 .blue {
     background-color: rgb(0, 121, 165);
 }
@@ -270,14 +243,6 @@ kbn-vis .vis-container {
     float: right;
 }
 
-/* ------------------------------------------------------------------------ */
-/* -----------------------    Manager Configuration  ---------------------- */
-/* ------------------------------------------------------------------------ */
-
-.wazuh-greyed {
-    color: #b7b7b7 !important;
-}
-
 /* ------------------------------------------------------------------------ */
 /* -------------------------- Manager Tab Styles -------------------------- */
 /* ------------------------------------------------------------------------ */
@@ -325,18 +290,6 @@ kbn-vis .vis-container {
     padding-top: 0px !important;
 }
 
-.groupsHeader {
-    color: #666666 !important;
-}
-
-.color-grey {
-    color: grey !important;
-}
-
-.color-pointer {
-    color: #0079a5 !important;
-}
-
 // Angular.less
 .wz-md-card {
     box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1) !important;
@@ -344,11 +297,6 @@ kbn-vis .vis-container {
     overflow: hidden;
 }
 
-.wz-headline-title {
-    color: #0079a5 !important;
-    font-size: 17px;
-}
-
 .wz-border-none,
 .wz-border-none md-select-value {
     border: none;
diff --git a/public/less/common.less b/public/less/common.less
index a5ba66325..5b12e22f1 100644
--- a/public/less/common.less
+++ b/public/less/common.less
@@ -1,4 +1,6 @@
-/* Health check */
+/* -------------------------------------------------------------------------- */
+/* ------------------------ Wazuh commons stylesheet ------------------------ */
+/* -------------------------------------------------------------------------- */
 
 .error-notify {
     font-size: 20px;
@@ -59,21 +61,6 @@
     color: #666666;
     background-color: white !important;
 }
-/* Wazuh Header */
-
-.wazuh-h1 {
-    font-size: 24px !important;
-}
-
-  
-
-html, body, button:not(.fa):not(.fa-times), textarea, input, select {
-    font-family: "Open Sans", Helvetica, Arial, sans-serif !important;
-}
-
-.wz-line-height {
-    line-height: 20px !important;
-}
 
 /* Loading Ring styles */
 
@@ -122,18 +109,6 @@ div.uil-ring-css {
     margin: 20px;
 }
 
-.json-key {
-    color: brown;
-}
-
-.json-value {
-    color: navy;
-}
-
-.json-string {
-    color: olive;
-}
-
 /* Input filter box styles */
 
 .input-filter-box {
@@ -201,31 +176,6 @@ div.uil-ring-css {
     height: 20px !important;
 }
 
-/* Common styles for text and font */
-.text-center {
-    text-align: center;
-}
-
-.text-right {
-    text-align: right;
-}
-
-.text-bold {
-    font-weight: bold !important;
-}
-
-.font-size-16-pt {
-    font-size: 16pt;
-}
-
-.font-size-18 {
-    font-size: 18px;
-}
-
-.font-size-25 {
-    font-size: 25px;
-}
-
 /* Custom Background colours */
 
 .background-white {
@@ -236,10 +186,6 @@ div.uil-ring-css {
     background-color: #e2e2e2;
 }
 
-.color-f9 {
-    color: #ff9999;
-}
-
 /* Custom styles for the box model */
 
 .margin-top-30 {
diff --git a/public/less/heights.less b/public/less/heights.less
index c1f20717b..09ecb1d84 100644
--- a/public/less/heights.less
+++ b/public/less/heights.less
@@ -1,4 +1,7 @@
-/* CUSTOM HEIGHTS FOR VISUALIZATIONS */
+/* -------------------------------------------------------------------------- */
+/* ---------------------- Wazuh stylesheet for heights ---------------------- */
+/* -------------------------------------------------------------------------- */
+
 .height-41 {
     height: 41px !important;
 }
@@ -108,4 +111,4 @@
 
 .height-30 {
     height: 30px !important;
-}
\ No newline at end of file
+}
diff --git a/public/less/loader.js b/public/less/loader.js
index 948d6d6b5..e8b5a01a3 100644
--- a/public/less/loader.js
+++ b/public/less/loader.js
@@ -1,5 +1,10 @@
+/* -------------------------------------------------------------------------- */
+/* ------------------------ Wazuh stylesheets loader ------------------------ */
+/* -------------------------------------------------------------------------- */
+
 require('plugins/wazuh/less/common.less');
 require('plugins/wazuh/less/heights.less');
 require('plugins/wazuh/less/cleaned.less');
+require('plugins/wazuh/less/typography.less');
 require('plugins/wazuh/less/media-queries.less');
 import 'ui/styles/theme.less';
diff --git a/public/less/media-queries.less b/public/less/media-queries.less
index 4c76b0552..5db78822d 100644
--- a/public/less/media-queries.less
+++ b/public/less/media-queries.less
@@ -1,3 +1,7 @@
+/* -------------------------------------------------------------------------- */
+/* --------------------- Wazuh media queries stylesheet --------------------- */
+/* -------------------------------------------------------------------------- */
+
 @-webkit-keyframes uil-ring-anim {
     0% {
         -webkit-transform: rotate(0deg);
@@ -69,5 +73,5 @@
 @media (min-width: 960px) {
     md-tooltip .md-content {
         height: auto !important;
-    } 
+    }
 }
diff --git a/public/less/typography.less b/public/less/typography.less
new file mode 100644
index 000000000..3bd5a2e53
--- /dev/null
+++ b/public/less/typography.less
@@ -0,0 +1,67 @@
+/* -------------------------------------------------------------------------- */
+/* ------------------- Wazuh text & typography stylesheet ------------------- */
+/* -------------------------------------------------------------------------- */
+
+/* Apply the Open Sans font in the app */
+html, body, button:not(.fa):not(.fa-times), textarea, input, select {
+    font-family: "Open Sans", Helvetica, Arial, sans-serif !important;
+}
+
+.wz-headline-title {
+    color: #0079a5 !important;
+    font-size: 17px;
+}
+
+.wz-font-weight-bold {
+    font-weight: bold !important;
+}
+
+.color-grey {
+    color: grey !important;
+}
+
+.color-f9 {
+    color: #ff9999;
+}
+
+.color-pointer {
+    color: #0079a5 !important;
+}
+
+.wz-line-height {
+    line-height: 20px !important;
+}
+
+.text-center {
+    text-align: center;
+}
+
+.text-right {
+    text-align: right;
+}
+
+.font-size-16-pt {
+    font-size: 16pt;
+}
+
+.font-size-18 {
+    font-size: 18px;
+}
+
+.font-size-25 {
+    font-size: 25px;
+}
+
+/* JSON viewer font colors */
+
+.json-key {
+    color: brown;
+}
+
+.json-value {
+    color: navy;
+}
+
+.json-string {
+    color: olive;
+}
diff --git a/public/templates/manager/groups/groups-preview.html b/public/templates/manager/groups/groups-preview.html
index 223a6952c..d525a296a 100644
--- a/public/templates/manager/groups/groups-preview.html
+++ b/public/templates/manager/groups/groups-preview.html
@@ -77,9 +77,9 @@
 
                 <div flex layout="column" class="md-padding" ng-if="lookingGroup && groupsSelectedTab==='files' && file">
                     <div flex layout="column">
-                        <div layout="row" class="groupsHeader">
+                        <div layout="row">
                             <span flex class="wz-headline-title">{{ filename }}</span>
-                            <span flex class="text-right cursor-pointer" ng-click="goBackFiles()">close</span>
+                            <span flex class="text-right cursor-pointer color-grey" ng-click="goBackFiles()">close</span>
                         </div>
                         <div flex layout="column">
                             <pre flex class="wz-pre json-beautifier jsonbeauty2 wz-overflow-y-auto"><code wz-dynamic="file"></code></pre>
diff --git a/public/templates/settings/settings.html b/public/templates/settings/settings.html
index 9218f228f..dd8d7c9c2 100644
--- a/public/templates/settings/settings.html
+++ b/public/templates/settings/settings.html
@@ -79,12 +79,12 @@
             <md-divider class="wz-margin-top-10"></md-divider>
 
             <div layout="row" layout-align="start start">
-                <p flex="15" class="text-bold">Cluster</p>
-                <p flex="20" class="text-bold">Manager</p>
-                <p flex="15" class="text-bold">API URL</p>
-                <p flex="15" class="text-bold">API Port</p>
-                <p flex="15" class="text-bold">User</p>
-                <p flex="20" class="text-bold">Actions</p>
+                <p flex="15" class="wz-font-weight-bold">Cluster</p>
+                <p flex="20" class="wz-font-weight-bold">Manager</p>
+                <p flex="15" class="wz-font-weight-bold">API URL</p>
+                <p flex="15" class="wz-font-weight-bold">API Port</p>
+                <p flex="15" class="wz-font-weight-bold">User</p>
+                <p flex="20" class="wz-font-weight-bold">Actions</p>
             </div>
 
             <div ng-repeat="entry in apiEntries">
@@ -185,7 +185,7 @@
                 / Agents tabs.</div>
 
             <div>
-                <div layout="row" layout-align="space-between center" class="text-bold">
+                <div layout="row" layout-align="space-between center" class="wz-font-weight-bold">
                     PCI DSS
                 </div>
                 <div layout="row" class="wz-padding-top-10 wz-line-height">
@@ -202,7 +202,7 @@
             </div>
 
             <div>
-                <div layout="row" layout-align="space-between center" class="text-bold">
+                <div layout="row" layout-align="space-between center" class="wz-font-weight-bold">
                     OpenSCAP
                 </div>
                 <div layout="row" class="wz-padding-top-10 wz-line-height">
@@ -216,7 +216,7 @@
             </div>
 
             <div>
-                <div layout="row" layout-align="space-between center" class="text-bold">
+                <div layout="row" layout-align="space-between center" class="wz-font-weight-bold">
                     Audit
                 </div>
                 <div layout="row" class="wz-padding-top-10 wz-line-height">
@@ -231,7 +231,7 @@
             </div>
 
             <div>
-                <div layout="row" class="text-bold">
+                <div layout="row" class="wz-font-weight-bold">
                     Amazon Web Services (AWS)
                 </div>
                 <div layout="row" class="wz-padding-top-10 wz-line-height">
@@ -247,7 +247,7 @@
             </div>
 
             <div>
-                <div layout="row" layout-align="space-between center" class="text-bold">
+                <div layout="row" layout-align="space-between center" class="wz-font-weight-bold">
                     VirusTotal
                 </div>
                 <div layout="row" class="wz-padding-top-10 wz-line-height">