From 30924a2578126c28da82695a5481545be5b25185 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jaime=20Go=CC=81mez=20Cimarro?= <cerberupo@gmail.com>
Date: Fri, 5 Jan 2024 17:38:29 +0100
Subject: [PATCH] feat: Changes for dashboard.

---
 merged_tokens.json                            |  21 +-
 .../src/informative/Kanban/Kanban.styles.js   |  33 +--
 .../informative/Kanban/components/Column.js   |   7 +-
 .../ProgressColorBar/ProgressColorBar.js      |  10 +-
 .../ProgressColorBar.styles.js                |  24 +-
 packages/components/src/tokens.compiled.js    |  53 +---
 .../optimized/outline/meeting-camera.svg      |   4 +-
 .../optimized/outline/plugin-comunica.svg     |   5 +-
 .../optimized/outline/time-clock-circle.svg   |   4 +-
 packages/icons/outline/MeetingCameraIcon.js   |   6 +-
 packages/icons/outline/PluginComunicaIcon.js  |   9 +-
 packages/icons/outline/TimeClockCircleIcon.js |   6 +-
 .../icons/outline/esm/MeetingCameraIcon.js    |   6 +-
 .../icons/outline/esm/PluginComunicaIcon.js   |   9 +-
 .../icons/outline/esm/TimeClockCircleIcon.js  |   6 +-
 packages/icons/outline/esm/index.d.ts         |   1 +
 packages/icons/outline/esm/index.js           |   1 +
 packages/icons/outline/index.d.ts             |   1 +
 packages/icons/outline/index.js               |   1 +
 packages/icons/src/outline/location.svg       |   8 +
 packages/icons/src/outline/meeting-camera.svg |  16 +-
 .../icons/src/outline/plugin-comunica.svg     |  24 +-
 .../icons/src/outline/time-clock-circle.svg   |  12 +-
 .../ClassroomHeaderBar/ClassroomHeaderBar.js  |  47 +++-
 .../ClassroomHeaderBar.stories.js             |   6 +-
 .../ClassroomHeaderBar.styles.js              |  25 +-
 .../components/AddressItem/AddressItem.js     |   5 +-
 .../components/CalendarItem/CalendarItem.js   |   3 +-
 .../components/ScheduleItem/ScheduleItem.js   |   6 +-
 .../VirtualClassItem/VirtualClassItem.js      |  23 +-
 .../common/HeaderDropdown/HeaderDropdown.js   | 111 ++++----
 .../HeaderDropdown/HeaderDropdown.stories.js  |   5 +-
 .../HeaderDropdown/HeaderDropdown.styles.js   | 245 ++++++++++--------
 .../src/common/HeaderDropdown/mock/data.js    |   1 -
 34 files changed, 439 insertions(+), 305 deletions(-)
 create mode 100644 packages/icons/src/outline/location.svg

diff --git a/merged_tokens.json b/merged_tokens.json
index ee1ebc99d..0d4de40e1 100644
--- a/merged_tokens.json
+++ b/merged_tokens.json
@@ -6940,7 +6940,12 @@
         },
         "typo": {
           "lg": {
-            "value": "{global.content.typo.body.lg--medium}",
+            "value": {
+              "fontFamily": "{core.font.family.main}",
+              "fontWeight": "{core.font.weight.medium}",
+              "lineHeight": "19 px",
+              "fontSize": "{core.font.size.100}"
+            },
             "type": "typography"
           },
           "md": {
@@ -7257,7 +7262,12 @@
         },
         "typo": {
           "lg": {
-            "value": "{global.content.typo.body.lg--medium}",
+            "value": {
+              "fontFamily": "{core.font.family.main}",
+              "fontWeight": "{core.font.weight.medium}",
+              "lineHeight": "19 px",
+              "fontSize": "{core.font.size.100}px"
+            },
             "type": "typography"
           },
           "md": {
@@ -7454,7 +7464,12 @@
         },
         "typo": {
           "lg": {
-            "value": "{global.content.typo.body.lg--medium}",
+            "value": {
+              "fontFamily": "{core.font.family.main}",
+              "fontWeight": "{core.font.weight.medium}",
+              "lineHeight": "19 px",
+              "fontSize": "{core.font.size.100}px"
+            },
             "type": "typography"
           },
           "md": {
diff --git a/packages/components/src/informative/Kanban/Kanban.styles.js b/packages/components/src/informative/Kanban/Kanban.styles.js
index 2217c437b..55552c0f4 100644
--- a/packages/components/src/informative/Kanban/Kanban.styles.js
+++ b/packages/components/src/informative/Kanban/Kanban.styles.js
@@ -1,5 +1,4 @@
 import { createStyles } from '@mantine/styles';
-import { getFontProductive } from '../../theme.mixins';
 
 export const KanbanStyles = createStyles((theme, {}) => {
   return {
@@ -9,9 +8,9 @@ export const KanbanStyles = createStyles((theme, {}) => {
       height: '100%',
       maxHeight: '100%',
       padding: theme.spacing[2],
-      backgroundColor: '#EDEFF5',
+      backgroundColor: '#F8F9FB',
       gap: theme.spacing[2],
-      display: 'flex'
+      display: 'flex',
     },
     column: {
       height: '100%',
@@ -20,29 +19,31 @@ export const KanbanStyles = createStyles((theme, {}) => {
       width: '300px',
       minWidth: '300px',
       flexDirection: 'column',
-      backgroundColor: 'rgba(255, 255, 255, 0.3)',
-      borderRadius: theme.spacing[1]
+      backgroundColor: '#F2F4F8',
+      borderRadius: theme.spacing[1],
     },
     columnHeader: {
       paddingLeft: theme.spacing[4],
       paddingRight: theme.spacing[4],
       paddingTop: theme.spacing[3],
-      marginBottom: theme.spacing[4],
-      color: theme.colors.text05,
-      ...getFontProductive(theme.fontSizes['2'], 500),
+      color: '#4D5358',
+      fontSize: '16px',
+      fontWeight: 600,
+      lineHeight: '24px',
+      fontFamily: 'Albert Sans',
       display: 'flex',
-      justifyContent: 'space-between',
-      alignItems: 'center'
+      gap: theme.spacing[2],
+      alignItems: 'center',
     },
     scroll: {
-      padding: theme.spacing[2]
+      padding: theme.spacing[2],
     },
     listDraggingOver: {
       backgroundColor: '#EDEFF5',
-      borderRadius: 4
+      borderRadius: 4,
     },
     list: {
-      minHeight: '100px'
+      minHeight: '100px',
     },
     iconBig: {
       position: 'absolute',
@@ -50,8 +51,8 @@ export const KanbanStyles = createStyles((theme, {}) => {
       left: 20,
       zIndex: 0,
       img: {
-        filter: 'brightness(0) invert(1)'
-      }
-    }
+        filter: 'brightness(0) invert(1)',
+      },
+    },
   };
 });
diff --git a/packages/components/src/informative/Kanban/components/Column.js b/packages/components/src/informative/Kanban/components/Column.js
index f9b2a556f..f465f5129 100644
--- a/packages/components/src/informative/Kanban/components/Column.js
+++ b/packages/components/src/informative/Kanban/components/Column.js
@@ -3,7 +3,6 @@ import { Box } from '../../../layout/Box';
 import { KanbanStyles } from '../Kanban.styles';
 import { Draggable } from 'react-beautiful-dnd';
 import { QuoteList } from './QuoteList';
-import { Text } from '../../../typography';
 import { ImageLoader } from '../../../misc';
 import { ScrollArea } from '@mantine/core';
 
@@ -28,11 +27,9 @@ const Column = ({ value, index, isScrollable, isCombineEnabled, itemRender, icon
           ) : null}
           <Box className={classes.columnHeader}>
             <Box {...provided.dragHandleProps}>
-              <Text role="productive" strong>
-                {value.title}
-              </Text>
+              <Box>{value.title}</Box>
             </Box>
-            <Text color="primary">{value.cards.length}</Text>
+            <Box>{value.cards.length}</Box>
           </Box>
           <ScrollArea className={classes.scroll} style={{ width: '100%', height: '100%' }}>
             <QuoteList
diff --git a/packages/components/src/informative/ProgressColorBar/ProgressColorBar.js b/packages/components/src/informative/ProgressColorBar/ProgressColorBar.js
index 77ed0d9bd..a4c5d7da5 100644
--- a/packages/components/src/informative/ProgressColorBar/ProgressColorBar.js
+++ b/packages/components/src/informative/ProgressColorBar/ProgressColorBar.js
@@ -19,8 +19,14 @@ const ProgressColorBar = ({
   labelLeft,
   labelRight,
 }) => {
-  const { classes } = ProgressColorBarStyles();
-
+  const { classes, theme } = ProgressColorBarStyles();
+  if (value < 25) {
+    color = theme.other.progress.content.color.phatic.negative;
+  } else if (value < 75) {
+    color = theme.other.progress.content.color.phatic.attention;
+  } else {
+    color = theme.other.progress.content.color.phatic.positive;
+  }
   return (
     <Box>
       {labelLeft && labelRight && (
diff --git a/packages/components/src/informative/ProgressColorBar/ProgressColorBar.styles.js b/packages/components/src/informative/ProgressColorBar/ProgressColorBar.styles.js
index f7c215291..53b07a717 100644
--- a/packages/components/src/informative/ProgressColorBar/ProgressColorBar.styles.js
+++ b/packages/components/src/informative/ProgressColorBar/ProgressColorBar.styles.js
@@ -1,16 +1,18 @@
 import { createStyles } from '@mantine/styles';
 import { pxToRem } from '../../theme.mixins';
 
-export const ProgressColorBarStyles = createStyles((theme) => ({
-  topLabelsContainer: {
-    display: 'flex',
-    justifyContent: 'space-between',
-    marginBottom: pxToRem(8),
-  },
-  labels: {
-    color: theme.other.progress.content.color.text,
-    ...theme.other.progress.content.typo,
-  },
-}));
+export const ProgressColorBarStyles = createStyles((theme) => {
+  return {
+    topLabelsContainer: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      marginBottom: pxToRem(8),
+    },
+    labels: {
+      color: theme.other.progress.content.color.text,
+      ...theme.other.progress.content.typo,
+    },
+  };
+});
 
 export default ProgressColorBarStyles;
diff --git a/packages/components/src/tokens.compiled.js b/packages/components/src/tokens.compiled.js
index ed85821ec..ad11f90d1 100644
--- a/packages/components/src/tokens.compiled.js
+++ b/packages/components/src/tokens.compiled.js
@@ -1153,7 +1153,7 @@ export default {
           "y": 0,
           "blur": 4,
           "spread": 0,
-          "color": "#ffffff",
+          "color": "#ffffff26",
           "type": "dropShadow"
         },
         "type": "boxShadow"
@@ -1234,17 +1234,8 @@ export default {
             "type": "color"
           },
           "hover--reverse-transparent": {
-            "value": "#ffffff",
-            "type": "color",
-            "$extensions": {
-              "studio.tokens": {
-                "modify": {
-                  "type": "alpha",
-                  "value": "0.15",
-                  "space": "lch"
-                }
-              }
-            }
+            "value": "#ffffff26",
+            "type": "color"
           },
           "down": {
             "value": "#F1FFBD",
@@ -4939,30 +4930,12 @@ export default {
       "color": {
         "primary": {
           "default": {
-            "value": "#4D5358",
-            "type": "color",
-            "$extensions": {
-              "studio.tokens": {
-                "modify": {
-                  "type": "alpha",
-                  "value": "0.4",
-                  "space": "lch"
-                }
-              }
-            }
+            "value": "#4d535866",
+            "type": "color"
           },
           "hover": {
-            "value": "#4D5358",
-            "type": "color",
-            "$extensions": {
-              "studio.tokens": {
-                "modify": {
-                  "type": "alpha",
-                  "value": "0.7",
-                  "space": "lch"
-                }
-              }
-            }
+            "value": "#4d5358b3",
+            "type": "color"
           },
           "down": {
             "value": "#4D5358",
@@ -5095,8 +5068,8 @@ export default {
           "value": {
             "fontFamily": "Albert Sans",
             "fontWeight": 500,
-            "lineHeight": "24px",
-            "fontSize": "18px"
+            "lineHeight": "19 px",
+            "fontSize": 16
           },
           "type": "typography"
         },
@@ -5451,8 +5424,8 @@ export default {
           "value": {
             "fontFamily": "Albert Sans",
             "fontWeight": 500,
-            "lineHeight": "24px",
-            "fontSize": "18px"
+            "lineHeight": "19 px",
+            "fontSize": "16px"
           },
           "type": "typography"
         },
@@ -5677,8 +5650,8 @@ export default {
           "value": {
             "fontFamily": "Albert Sans",
             "fontWeight": 500,
-            "lineHeight": "24px",
-            "fontSize": "18px"
+            "lineHeight": "19 px",
+            "fontSize": "16px"
           },
           "type": "typography"
         },
diff --git a/packages/icons/optimized/outline/meeting-camera.svg b/packages/icons/optimized/outline/meeting-camera.svg
index 44c7814b4..2b35634bd 100644
--- a/packages/icons/optimized/outline/meeting-camera.svg
+++ b/packages/icons/optimized/outline/meeting-camera.svg
@@ -1,3 +1,3 @@
-<svg fill="none" viewBox="0 0 16 16" stroke="currentColor" aria-hidden="true">
-  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.5 3.507h-6a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-5a2 2 0 0 0-2-2ZM12.5 10.007l2.277 1.138a.5.5 0 0 0 .723-.447V5.316a.499.499 0 0 0-.723-.447L12.5 6.007"/>
+<svg fill="none" viewBox="0 0 23 15" stroke="currentColor" aria-hidden="true">
+  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3" d="M3.837 1h8.513s2.838 0 2.838 2.837v7.094s0 2.838-2.838 2.838H3.838S1 13.769 1 10.93V3.838S1 1 3.837 1ZM18.025 10.222l3.23 1.614a.71.71 0 0 0 1.026-.634V3.566a.708.708 0 0 0-1.026-.634l-3.23 1.615"/>
 </svg>
diff --git a/packages/icons/optimized/outline/plugin-comunica.svg b/packages/icons/optimized/outline/plugin-comunica.svg
index 7e726c7ff..68a664e44 100644
--- a/packages/icons/optimized/outline/plugin-comunica.svg
+++ b/packages/icons/optimized/outline/plugin-comunica.svg
@@ -1,3 +1,4 @@
-<svg fill="none" viewBox="0 0 27 27" stroke="currentColor" aria-hidden="true">
-  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.5 1.5A12 12 0 0 0 3.267 19.77l-1.714 4.573a.857.857 0 0 0 .957 1.143l5.988-1.09a11.828 11.828 0 0 0 5 1.104 12 12 0 0 0 0-24v0ZM9.213 13.59a1.714 1.714 0 0 1-1.715 1.624h-.09a1.714 1.714 0 1 1 1.805-1.625v0Zm6 0a1.714 1.714 0 0 1-1.715 1.624h-.09a1.713 1.713 0 0 1-1.624-1.807 1.714 1.714 0 0 1 2.986-1.054 1.697 1.697 0 0 1 .443 1.236Zm6 0a1.714 1.714 0 0 1-1.715 1.624h-.092a1.713 1.713 0 0 1-1.051-2.987 1.73 1.73 0 0 1 1.234-.441 1.713 1.713 0 0 1 1.624 1.803Z"/>
+<svg fill="none" viewBox="0 0 23 23" stroke="currentColor" aria-hidden="true">
+  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3" d="M12.34 1a9.901 9.901 0 0 0-8.672 5.095 9.924 9.924 0 0 0 .245 10.062L1 22.281l6.118-2.917a9.918 9.918 0 0 0 14.784-5.714 9.94 9.94 0 0 0-1.63-8.71A9.925 9.925 0 0 0 12.34 1Z"/>
+  <path stroke-width="1.3" d="M12.35 11.286a.355.355 0 1 1 0-.71M12.35 11.286a.355.355 0 1 0 0-.71M8.094 11.286a.355.355 0 0 1 0-.71M8.094 11.286a.355.355 0 0 0 0-.71M16.606 11.286a.355.355 0 0 1 0-.71M16.606 11.286a.355.355 0 1 0 0-.71"/>
 </svg>
diff --git a/packages/icons/optimized/outline/time-clock-circle.svg b/packages/icons/optimized/outline/time-clock-circle.svg
index 52a800e25..ef0f36c7b 100644
--- a/packages/icons/optimized/outline/time-clock-circle.svg
+++ b/packages/icons/optimized/outline/time-clock-circle.svg
@@ -1,3 +1,3 @@
-<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
-  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1.5 12a10.5 10.5 0 1 0 21 0 10.5 10.5 0 0 0-21 0v0ZM12 12V8.25M12 12l4.687 4.688"/>
+<svg fill="none" viewBox="0 0 22 22" stroke="currentColor" aria-hidden="true">
+  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.3" d="M1 10.931a9.931 9.931 0 1 0 19.862 0 9.931 9.931 0 0 0-19.862 0ZM10.931 10.931V7.384M10.931 10.931l4.433 4.434"/>
 </svg>
diff --git a/packages/icons/outline/MeetingCameraIcon.js b/packages/icons/outline/MeetingCameraIcon.js
index 6f9152575..e6b64f9e6 100644
--- a/packages/icons/outline/MeetingCameraIcon.js
+++ b/packages/icons/outline/MeetingCameraIcon.js
@@ -2,7 +2,7 @@ const React = require("react");
 function MeetingCameraIcon(props) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({
     fill: "none",
-    viewBox: "0 0 16 16",
+    viewBox: "0 0 23 15",
     stroke: "currentColor",
     "aria-hidden": "true",
     width: "1em",
@@ -10,8 +10,8 @@ function MeetingCameraIcon(props) {
   }, props), /*#__PURE__*/React.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    strokeWidth: 2,
-    d: "M8.5 3.507h-6a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-5a2 2 0 0 0-2-2ZM12.5 10.007l2.277 1.138a.5.5 0 0 0 .723-.447V5.316a.499.499 0 0 0-.723-.447L12.5 6.007"
+    strokeWidth: 1.3,
+    d: "M3.837 1h8.513s2.838 0 2.838 2.837v7.094s0 2.838-2.838 2.838H3.838S1 13.769 1 10.93V3.838S1 1 3.837 1ZM18.025 10.222l3.23 1.614a.71.71 0 0 0 1.026-.634V3.566a.708.708 0 0 0-1.026-.634l-3.23 1.615"
   }));
 }
 module.exports = MeetingCameraIcon;
\ No newline at end of file
diff --git a/packages/icons/outline/PluginComunicaIcon.js b/packages/icons/outline/PluginComunicaIcon.js
index 76a4cf731..65dac44fe 100644
--- a/packages/icons/outline/PluginComunicaIcon.js
+++ b/packages/icons/outline/PluginComunicaIcon.js
@@ -2,7 +2,7 @@ const React = require("react");
 function PluginComunicaIcon(props) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({
     fill: "none",
-    viewBox: "0 0 27 27",
+    viewBox: "0 0 23 23",
     stroke: "currentColor",
     "aria-hidden": "true",
     width: "1em",
@@ -10,8 +10,11 @@ function PluginComunicaIcon(props) {
   }, props), /*#__PURE__*/React.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    strokeWidth: 2,
-    d: "M13.5 1.5A12 12 0 0 0 3.267 19.77l-1.714 4.573a.857.857 0 0 0 .957 1.143l5.988-1.09a11.828 11.828 0 0 0 5 1.104 12 12 0 0 0 0-24v0ZM9.213 13.59a1.714 1.714 0 0 1-1.715 1.624h-.09a1.714 1.714 0 1 1 1.805-1.625v0Zm6 0a1.714 1.714 0 0 1-1.715 1.624h-.09a1.713 1.713 0 0 1-1.624-1.807 1.714 1.714 0 0 1 2.986-1.054 1.697 1.697 0 0 1 .443 1.236Zm6 0a1.714 1.714 0 0 1-1.715 1.624h-.092a1.713 1.713 0 0 1-1.051-2.987 1.73 1.73 0 0 1 1.234-.441 1.713 1.713 0 0 1 1.624 1.803Z"
+    strokeWidth: 1.3,
+    d: "M12.34 1a9.901 9.901 0 0 0-8.672 5.095 9.924 9.924 0 0 0 .245 10.062L1 22.281l6.118-2.917a9.918 9.918 0 0 0 14.784-5.714 9.94 9.94 0 0 0-1.63-8.71A9.925 9.925 0 0 0 12.34 1Z"
+  }), /*#__PURE__*/React.createElement("path", {
+    strokeWidth: 1.3,
+    d: "M12.35 11.286a.355.355 0 1 1 0-.71M12.35 11.286a.355.355 0 1 0 0-.71M8.094 11.286a.355.355 0 0 1 0-.71M8.094 11.286a.355.355 0 0 0 0-.71M16.606 11.286a.355.355 0 0 1 0-.71M16.606 11.286a.355.355 0 1 0 0-.71"
   }));
 }
 module.exports = PluginComunicaIcon;
\ No newline at end of file
diff --git a/packages/icons/outline/TimeClockCircleIcon.js b/packages/icons/outline/TimeClockCircleIcon.js
index 332e261d1..306fd7a50 100644
--- a/packages/icons/outline/TimeClockCircleIcon.js
+++ b/packages/icons/outline/TimeClockCircleIcon.js
@@ -2,7 +2,7 @@ const React = require("react");
 function TimeClockCircleIcon(props) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({
     fill: "none",
-    viewBox: "0 0 24 24",
+    viewBox: "0 0 22 22",
     stroke: "currentColor",
     "aria-hidden": "true",
     width: "1em",
@@ -10,8 +10,8 @@ function TimeClockCircleIcon(props) {
   }, props), /*#__PURE__*/React.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    strokeWidth: 2,
-    d: "M1.5 12a10.5 10.5 0 1 0 21 0 10.5 10.5 0 0 0-21 0v0ZM12 12V8.25M12 12l4.687 4.688"
+    strokeWidth: 1.3,
+    d: "M1 10.931a9.931 9.931 0 1 0 19.862 0 9.931 9.931 0 0 0-19.862 0ZM10.931 10.931V7.384M10.931 10.931l4.433 4.434"
   }));
 }
 module.exports = TimeClockCircleIcon;
\ No newline at end of file
diff --git a/packages/icons/outline/esm/MeetingCameraIcon.js b/packages/icons/outline/esm/MeetingCameraIcon.js
index 92c060bf9..75847267a 100644
--- a/packages/icons/outline/esm/MeetingCameraIcon.js
+++ b/packages/icons/outline/esm/MeetingCameraIcon.js
@@ -2,7 +2,7 @@ import * as React from "react";
 function MeetingCameraIcon(props) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({
     fill: "none",
-    viewBox: "0 0 16 16",
+    viewBox: "0 0 23 15",
     stroke: "currentColor",
     "aria-hidden": "true",
     width: "1em",
@@ -10,8 +10,8 @@ function MeetingCameraIcon(props) {
   }, props), /*#__PURE__*/React.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    strokeWidth: 2,
-    d: "M8.5 3.507h-6a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-5a2 2 0 0 0-2-2ZM12.5 10.007l2.277 1.138a.5.5 0 0 0 .723-.447V5.316a.499.499 0 0 0-.723-.447L12.5 6.007"
+    strokeWidth: 1.3,
+    d: "M3.837 1h8.513s2.838 0 2.838 2.837v7.094s0 2.838-2.838 2.838H3.838S1 13.769 1 10.93V3.838S1 1 3.837 1ZM18.025 10.222l3.23 1.614a.71.71 0 0 0 1.026-.634V3.566a.708.708 0 0 0-1.026-.634l-3.23 1.615"
   }));
 }
 export default MeetingCameraIcon;
\ No newline at end of file
diff --git a/packages/icons/outline/esm/PluginComunicaIcon.js b/packages/icons/outline/esm/PluginComunicaIcon.js
index b10c7afe6..479bd58a0 100644
--- a/packages/icons/outline/esm/PluginComunicaIcon.js
+++ b/packages/icons/outline/esm/PluginComunicaIcon.js
@@ -2,7 +2,7 @@ import * as React from "react";
 function PluginComunicaIcon(props) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({
     fill: "none",
-    viewBox: "0 0 27 27",
+    viewBox: "0 0 23 23",
     stroke: "currentColor",
     "aria-hidden": "true",
     width: "1em",
@@ -10,8 +10,11 @@ function PluginComunicaIcon(props) {
   }, props), /*#__PURE__*/React.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    strokeWidth: 2,
-    d: "M13.5 1.5A12 12 0 0 0 3.267 19.77l-1.714 4.573a.857.857 0 0 0 .957 1.143l5.988-1.09a11.828 11.828 0 0 0 5 1.104 12 12 0 0 0 0-24v0ZM9.213 13.59a1.714 1.714 0 0 1-1.715 1.624h-.09a1.714 1.714 0 1 1 1.805-1.625v0Zm6 0a1.714 1.714 0 0 1-1.715 1.624h-.09a1.713 1.713 0 0 1-1.624-1.807 1.714 1.714 0 0 1 2.986-1.054 1.697 1.697 0 0 1 .443 1.236Zm6 0a1.714 1.714 0 0 1-1.715 1.624h-.092a1.713 1.713 0 0 1-1.051-2.987 1.73 1.73 0 0 1 1.234-.441 1.713 1.713 0 0 1 1.624 1.803Z"
+    strokeWidth: 1.3,
+    d: "M12.34 1a9.901 9.901 0 0 0-8.672 5.095 9.924 9.924 0 0 0 .245 10.062L1 22.281l6.118-2.917a9.918 9.918 0 0 0 14.784-5.714 9.94 9.94 0 0 0-1.63-8.71A9.925 9.925 0 0 0 12.34 1Z"
+  }), /*#__PURE__*/React.createElement("path", {
+    strokeWidth: 1.3,
+    d: "M12.35 11.286a.355.355 0 1 1 0-.71M12.35 11.286a.355.355 0 1 0 0-.71M8.094 11.286a.355.355 0 0 1 0-.71M8.094 11.286a.355.355 0 0 0 0-.71M16.606 11.286a.355.355 0 0 1 0-.71M16.606 11.286a.355.355 0 1 0 0-.71"
   }));
 }
 export default PluginComunicaIcon;
\ No newline at end of file
diff --git a/packages/icons/outline/esm/TimeClockCircleIcon.js b/packages/icons/outline/esm/TimeClockCircleIcon.js
index 41dd65ad2..9f030cebf 100644
--- a/packages/icons/outline/esm/TimeClockCircleIcon.js
+++ b/packages/icons/outline/esm/TimeClockCircleIcon.js
@@ -2,7 +2,7 @@ import * as React from "react";
 function TimeClockCircleIcon(props) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({
     fill: "none",
-    viewBox: "0 0 24 24",
+    viewBox: "0 0 22 22",
     stroke: "currentColor",
     "aria-hidden": "true",
     width: "1em",
@@ -10,8 +10,8 @@ function TimeClockCircleIcon(props) {
   }, props), /*#__PURE__*/React.createElement("path", {
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    strokeWidth: 2,
-    d: "M1.5 12a10.5 10.5 0 1 0 21 0 10.5 10.5 0 0 0-21 0v0ZM12 12V8.25M12 12l4.687 4.688"
+    strokeWidth: 1.3,
+    d: "M1 10.931a9.931 9.931 0 1 0 19.862 0 9.931 9.931 0 0 0-19.862 0ZM10.931 10.931V7.384M10.931 10.931l4.433 4.434"
   }));
 }
 export default TimeClockCircleIcon;
\ No newline at end of file
diff --git a/packages/icons/outline/esm/index.d.ts b/packages/icons/outline/esm/index.d.ts
index d90883cfc..70317ac5d 100644
--- a/packages/icons/outline/esm/index.d.ts
+++ b/packages/icons/outline/esm/index.d.ts
@@ -98,6 +98,7 @@ export { default as LayoutModuleIcon } from './LayoutModuleIcon'
 export { default as LayoutTwoColumsIcon } from './LayoutTwoColumsIcon'
 export { default as LinkBrokenIcon } from './LinkBrokenIcon'
 export { default as ListEditIcon } from './ListEditIcon'
+export { default as LocationIcon } from './LocationIcon'
 export { default as LoveItRemoveIcon } from './LoveItRemoveIcon'
 export { default as LoveItIcon } from './LoveItIcon'
 export { default as ManWomanIcon } from './ManWomanIcon'
diff --git a/packages/icons/outline/esm/index.js b/packages/icons/outline/esm/index.js
index cf8872ee9..b67240edb 100644
--- a/packages/icons/outline/esm/index.js
+++ b/packages/icons/outline/esm/index.js
@@ -98,6 +98,7 @@ export { default as LayoutModuleIcon } from './LayoutModuleIcon.js'
 export { default as LayoutTwoColumsIcon } from './LayoutTwoColumsIcon.js'
 export { default as LinkBrokenIcon } from './LinkBrokenIcon.js'
 export { default as ListEditIcon } from './ListEditIcon.js'
+export { default as LocationIcon } from './LocationIcon.js'
 export { default as LoveItRemoveIcon } from './LoveItRemoveIcon.js'
 export { default as LoveItIcon } from './LoveItIcon.js'
 export { default as ManWomanIcon } from './ManWomanIcon.js'
diff --git a/packages/icons/outline/index.d.ts b/packages/icons/outline/index.d.ts
index d90883cfc..70317ac5d 100644
--- a/packages/icons/outline/index.d.ts
+++ b/packages/icons/outline/index.d.ts
@@ -98,6 +98,7 @@ export { default as LayoutModuleIcon } from './LayoutModuleIcon'
 export { default as LayoutTwoColumsIcon } from './LayoutTwoColumsIcon'
 export { default as LinkBrokenIcon } from './LinkBrokenIcon'
 export { default as ListEditIcon } from './ListEditIcon'
+export { default as LocationIcon } from './LocationIcon'
 export { default as LoveItRemoveIcon } from './LoveItRemoveIcon'
 export { default as LoveItIcon } from './LoveItIcon'
 export { default as ManWomanIcon } from './ManWomanIcon'
diff --git a/packages/icons/outline/index.js b/packages/icons/outline/index.js
index 68e6ae8c6..52fe48938 100644
--- a/packages/icons/outline/index.js
+++ b/packages/icons/outline/index.js
@@ -98,6 +98,7 @@ module.exports.LayoutModuleIcon = require("./LayoutModuleIcon.js")
 module.exports.LayoutTwoColumsIcon = require("./LayoutTwoColumsIcon.js")
 module.exports.LinkBrokenIcon = require("./LinkBrokenIcon.js")
 module.exports.ListEditIcon = require("./ListEditIcon.js")
+module.exports.LocationIcon = require("./LocationIcon.js")
 module.exports.LoveItRemoveIcon = require("./LoveItRemoveIcon.js")
 module.exports.LoveItIcon = require("./LoveItIcon.js")
 module.exports.ManWomanIcon = require("./ManWomanIcon.js")
diff --git a/packages/icons/src/outline/location.svg b/packages/icons/src/outline/location.svg
new file mode 100644
index 000000000..4521e5b95
--- /dev/null
+++ b/packages/icons/src/outline/location.svg
@@ -0,0 +1,8 @@
+<svg width="11" height="15" viewBox="0 0 11 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M10.0814 5.2832C10.0814 7.77843 8.34754 9.21373 7.04821 10.6035C6.27026 11.4358 5.64778 14.1504 5.64778 14.1504C5.64778 14.1504 5.02708 11.4376 4.2509 10.6077C2.95038 9.21846 1.21419 7.78079 1.21419 5.2832C1.21419 4.10734 1.6813 2.97964 2.51276 2.14818C3.34422 1.31672 4.47192 0.849609 5.64778 0.849609C6.82364 0.849609 7.95135 1.31672 8.78281 2.14818C9.61427 2.97964 10.0814 4.10734 10.0814 5.2832Z"
+    stroke="black" stroke-width="0.8125" stroke-linecap="round" stroke-linejoin="round"/>
+  <path
+    d="M3.87434 5.2832C3.87434 5.75355 4.06119 6.20463 4.39377 6.53721C4.72636 6.8698 5.17744 7.05664 5.64778 7.05664C6.11813 7.05664 6.56921 6.8698 6.90179 6.53721C7.23437 6.20463 7.42122 5.75355 7.42122 5.2832C7.42122 4.81286 7.23437 4.36178 6.90179 4.02919C6.56921 3.69661 6.11813 3.50977 5.64778 3.50977C5.17744 3.50977 4.72636 3.69661 4.39377 4.02919C4.06119 4.36178 3.87434 4.81286 3.87434 5.2832Z"
+    stroke="black" stroke-width="0.8125" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/packages/icons/src/outline/meeting-camera.svg b/packages/icons/src/outline/meeting-camera.svg
index aa163d9a2..7a107ae59 100644
--- a/packages/icons/src/outline/meeting-camera.svg
+++ b/packages/icons/src/outline/meeting-camera.svg
@@ -1,10 +1,8 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-
-    <path
-      d="M8.5 3.50732H2.5C1.39543 3.50732 0.5 4.40275 0.5 5.50732V10.5073C0.5 11.6119 1.39543 12.5073 2.5 12.5073H8.5C9.60457 12.5073 10.5 11.6119 10.5 10.5073V5.50732C10.5 4.40275 9.60457 3.50732 8.5 3.50732Z"
-      stroke="#8E97A2" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-    <path
-      d="M12.5 10.0073L14.7767 11.1453C14.8529 11.1834 14.9376 11.2013 15.0227 11.1975C15.1078 11.1936 15.1905 11.1681 15.263 11.1232C15.3355 11.0784 15.3953 11.0158 15.4367 10.9414C15.4782 10.867 15.5 10.7832 15.5 10.698V5.31601C15.5001 5.2308 15.4783 5.14699 15.4368 5.07255C15.3954 4.99811 15.3355 4.93553 15.263 4.89076C15.1905 4.84599 15.1078 4.82052 15.0226 4.81677C14.9375 4.81302 14.8528 4.83112 14.7767 4.86935L12.5 6.00735"
-      stroke="#8E97A2" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-
+<svg width="23" height="15" viewBox="0 0 23 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M3.8375 1H12.35C12.35 1 15.1875 1 15.1875 3.8375V10.9312C15.1875 10.9312 15.1875 13.7688 12.35 13.7688H3.8375C3.8375 13.7688 1 13.7687 1 10.9312V3.8375C1 3.8375 1 1 3.8375 1Z"
+    stroke="black" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+  <path
+    d="M18.025 10.222L21.255 11.8365C21.3632 11.8905 21.4833 11.916 21.6041 11.9105C21.7248 11.905 21.8422 11.8688 21.945 11.8052C22.0478 11.7416 22.1326 11.6528 22.1915 11.5472C22.2503 11.4416 22.2812 11.3228 22.2812 11.2019V3.56617C22.2813 3.44527 22.2505 3.32636 22.1916 3.22076C22.1328 3.11515 22.0479 3.02636 21.945 2.96284C21.8422 2.89932 21.7248 2.86318 21.604 2.85786C21.4832 2.85255 21.3631 2.87823 21.255 2.93246L18.025 4.547"
+    stroke="black" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
diff --git a/packages/icons/src/outline/plugin-comunica.svg b/packages/icons/src/outline/plugin-comunica.svg
index 7ce3558bd..df32024ac 100755
--- a/packages/icons/src/outline/plugin-comunica.svg
+++ b/packages/icons/src/outline/plugin-comunica.svg
@@ -1,3 +1,23 @@
-<svg width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M13.4994 1.5C11.3665 1.50024 9.2722 2.06895 7.43215 3.14757C5.59211 4.22619 4.0728 5.77575 3.03066 7.6367C1.98851 9.49765 1.4612 11.6027 1.503 13.7352C1.54481 15.8677 2.15422 17.9505 3.2685 19.7691L1.55421 24.3429C1.50579 24.4725 1.48946 24.6119 1.50662 24.7492C1.52377 24.8864 1.57391 25.0175 1.65275 25.1312C1.73158 25.2449 1.83676 25.3379 1.95932 25.4021C2.08187 25.4663 2.21814 25.4999 2.3565 25.5C2.40825 25.5005 2.45993 25.4959 2.51079 25.4863L8.49879 24.396C10.065 25.1247 11.7719 25.5016 13.4994 25.5C16.682 25.5 19.7342 24.2357 21.9846 21.9853C24.2351 19.7348 25.4994 16.6826 25.4994 13.5C25.4994 10.3174 24.2351 7.26516 21.9846 5.01472C19.7342 2.76428 16.682 1.5 13.4994 1.5V1.5ZM9.21364 13.5891C9.19078 14.0282 9.00013 14.4416 8.68108 14.7441C8.36203 15.0466 7.93898 15.2149 7.49936 15.2143H7.4085C7.07022 15.1959 6.74497 15.0777 6.47382 14.8746C6.20267 14.6715 5.99778 14.3926 5.88502 14.0731C5.77225 13.7537 5.75667 13.408 5.84023 13.0797C5.9238 12.7513 6.10277 12.4552 6.35455 12.2285C6.60633 12.0018 6.91962 11.8548 7.25487 11.8061C7.59013 11.7573 7.93231 11.809 8.23821 11.9546C8.54412 12.1002 8.80003 12.3331 8.97364 12.624C9.14724 12.915 9.23076 13.2508 9.21364 13.5891V13.5891ZM15.2136 13.5891C15.1908 14.0282 15.0001 14.4416 14.6811 14.7441C14.362 15.0466 13.939 15.2149 13.4994 15.2143H13.4085C13.1831 15.2027 12.9622 15.1467 12.7586 15.0495C12.5549 14.9523 12.3724 14.8159 12.2216 14.648C12.0707 14.4801 11.9545 14.2841 11.8796 14.0712C11.8047 13.8583 11.7726 13.6328 11.7851 13.4074C11.8033 13.069 11.9214 12.7436 12.1245 12.4723C12.3276 12.201 12.6066 11.996 12.9262 11.8831C13.2458 11.7703 13.5916 11.7548 13.92 11.8384C14.2484 11.9221 14.5447 12.1012 14.7714 12.3531C14.9235 12.5195 15.0409 12.7144 15.1168 12.9266C15.1928 13.1389 15.2257 13.3641 15.2136 13.5891ZM21.2136 13.5891C21.1908 14.0282 21.0001 14.4416 20.6811 14.7441C20.362 15.0466 19.939 15.2149 19.4994 15.2143H19.4068C19.1816 15.2025 18.9609 15.1463 18.7574 15.049C18.5539 14.9517 18.3716 14.8153 18.2209 14.6474C18.0703 14.4796 17.9542 14.2836 17.8794 14.0709C17.8047 13.8581 17.7726 13.6326 17.7851 13.4074C17.8129 12.9543 18.0178 12.5303 18.3556 12.2269C18.6933 11.9235 19.1367 11.7651 19.5902 11.7857C19.8153 11.7973 20.0359 11.8532 20.2393 11.9502C20.4428 12.0472 20.6251 12.1833 20.7759 12.3508C20.9267 12.5183 21.043 12.7139 21.1181 12.9264C21.1932 13.1389 21.2257 13.3641 21.2136 13.5891Z" stroke="#B9BEC4" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<svg width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M12.3401 1.00002C10.5717 0.997466 8.83502 1.46859 7.31002 2.36452C5.78503 3.26044 4.52737 4.5485 3.66756 6.09504C2.80775 7.64158 2.37712 9.39024 2.42036 11.1595C2.4636 12.9289 2.97913 14.6544 3.91345 16.157L1 22.2813L7.11797 19.3643C8.42272 20.1765 9.89812 20.6744 11.4279 20.8187C12.9576 20.963 14.5 20.7497 15.9334 20.1956C17.3667 19.6417 18.6519 18.7619 19.6878 17.6261C20.7236 16.4901 21.4816 15.129 21.9023 13.6498C22.3229 12.1707 22.3945 10.614 22.1116 9.1024C21.8286 7.59081 21.1987 6.16565 20.2717 4.93922C19.3446 3.7128 18.1456 2.71862 16.7692 2.03503C15.3928 1.35144 13.8766 0.997135 12.3401 1.00002Z"
+    stroke="black" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+  <path
+    d="M12.35 11.286C12.1541 11.286 11.9953 11.1272 11.9953 10.9313C11.9953 10.7355 12.1541 10.5767 12.35 10.5767"
+    stroke="black" stroke-width="1.3"/>
+  <path
+    d="M12.35 11.286C12.5459 11.286 12.7047 11.1272 12.7047 10.9313C12.7047 10.7355 12.5459 10.5767 12.35 10.5767"
+    stroke="black" stroke-width="1.3"/>
+  <path
+    d="M8.09376 11.286C7.89787 11.286 7.73907 11.1272 7.73907 10.9313C7.73907 10.7355 7.89787 10.5767 8.09376 10.5767"
+    stroke="black" stroke-width="1.3"/>
+  <path
+    d="M8.09375 11.286C8.28964 11.286 8.44844 11.1272 8.44844 10.9313C8.44844 10.7355 8.28964 10.5767 8.09375 10.5767"
+    stroke="black" stroke-width="1.3"/>
+  <path
+    d="M16.6062 11.286C16.4104 11.286 16.2516 11.1272 16.2516 10.9313C16.2516 10.7355 16.4104 10.5767 16.6062 10.5767"
+    stroke="black" stroke-width="1.3"/>
+  <path
+    d="M16.6062 11.286C16.8021 11.286 16.9609 11.1272 16.9609 10.9313C16.9609 10.7355 16.8021 10.5767 16.6062 10.5767"
+    stroke="black" stroke-width="1.3"/>
 </svg>
diff --git a/packages/icons/src/outline/time-clock-circle.svg b/packages/icons/src/outline/time-clock-circle.svg
index 09c862d08..0402b39e3 100755
--- a/packages/icons/src/outline/time-clock-circle.svg
+++ b/packages/icons/src/outline/time-clock-circle.svg
@@ -1,5 +1,9 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1.5 12C1.5 14.7848 2.60625 17.4555 4.57538 19.4246C6.54451 21.3938 9.21523 22.5 12 22.5C14.7848 22.5 17.4555 21.3938 19.4246 19.4246C21.3938 17.4555 22.5 14.7848 22.5 12C22.5 9.21523 21.3938 6.54451 19.4246 4.57538C17.4555 2.60625 14.7848 1.5 12 1.5C9.21523 1.5 6.54451 2.60625 4.57538 4.57538C2.60625 6.54451 1.5 9.21523 1.5 12V12Z" stroke="#212B3D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M12 12V8.25" stroke="#212B3D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M12 12L16.687 16.688" stroke="#212B3D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M1 10.9313C1 13.5652 2.04632 16.0912 3.9088 17.9537C5.77127 19.8162 8.29732 20.8625 10.9313 20.8625C13.5652 20.8625 16.0912 19.8162 17.9537 17.9537C19.8162 16.0912 20.8625 13.5652 20.8625 10.9313C20.8625 8.29732 19.8162 5.77127 17.9537 3.9088C16.0912 2.04632 13.5652 1 10.9313 1C8.29732 1 5.77127 2.04632 3.9088 3.9088C2.04632 5.77127 1 8.29732 1 10.9313Z"
+    stroke="black" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M10.9312 10.9312V7.38428" stroke="black" stroke-width="1.3" stroke-linecap="round"
+        stroke-linejoin="round"/>
+  <path d="M10.9312 10.9312L15.3644 15.3652" stroke="black" stroke-width="1.3"
+        stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
diff --git a/packages/leemons/src/common/ClassroomHeaderBar/ClassroomHeaderBar.js b/packages/leemons/src/common/ClassroomHeaderBar/ClassroomHeaderBar.js
index ecb6e2bf5..c5b76128d 100644
--- a/packages/leemons/src/common/ClassroomHeaderBar/ClassroomHeaderBar.js
+++ b/packages/leemons/src/common/ClassroomHeaderBar/ClassroomHeaderBar.js
@@ -1,11 +1,11 @@
 import React from 'react';
-import { Box, UserDisplayItem } from '@bubbles-ui/components';
+import { Box, Button, UserDisplayItem } from '@bubbles-ui/components';
 import { ClassroomHeaderBarStyles } from './ClassroomHeaderBar.styles';
 import {
   CLASSROOM_HEADER_BAR_DEFAULT_PROPS,
   CLASSROOM_HEADER_BAR_PROP_TYPES,
 } from './ClassroomHeaderBar.constants';
-import { AddressItem, ScheduleItem, VirtualClassItem, CalendarItem } from './components';
+import { AddressItem, CalendarItem, ScheduleItem, VirtualClassItem } from './components';
 import { PluginComunicaIcon } from '@bubbles-ui/icons/outline';
 import { isFunction } from 'lodash';
 
@@ -18,6 +18,7 @@ const ClassroomHeaderBar = ({
   onChat,
   showChat,
   rightSide,
+  leftSide,
 }) => {
   const { schedule, address, virtual_classroom, teacher, calendar } = classRoom;
 
@@ -28,9 +29,10 @@ const ClassroomHeaderBar = ({
   const { classes, cx } = ClassroomHeaderBarStyles({}, { name: 'ClassroomHeaderBar' });
   return (
     <Box className={classes.root}>
+      {leftSide ? leftSide : null}
       <Box className={classes.root2}>
         {teacher ? (
-          <Box className={cx(classes.infoWrapper, classes.clickable)} onClick={onChatHandler}>
+          <Box className={cx(classes.infoWrapper, classes.clickable)}>
             <UserDisplayItem
               name={teacher.name}
               surnames={teacher.surnames}
@@ -39,13 +41,30 @@ const ClassroomHeaderBar = ({
               noBreak
               fullNameClassname={classes.label}
             />
-            {onChat && showChat && (
-              <PluginComunicaIcon height={20} width={20} style={{ minHeight: 20, minWidth: 20 }} />
-            )}
           </Box>
         ) : null}
 
-        {address ? <AddressItem address={address} classes={classes} cx={cx} /> : null}
+        {teacher &&
+        ((onChat && showChat) ||
+          virtual_classroom ||
+          address ||
+          calendar ||
+          (schedule && schedule.length)) ? (
+          <Box className={classes.separator} />
+        ) : null}
+
+        {onChat && showChat && (
+          <Button
+            leftIcon={
+              <PluginComunicaIcon height={15} width={15} style={{ minHeight: 15, minWidth: 15 }} />
+            }
+            variant="link"
+            onClick={onChatHandler}
+          >
+            {labels.chat}
+          </Button>
+        )}
+
         {virtual_classroom ? (
           <VirtualClassItem
             virtualClassroom={virtual_classroom}
@@ -55,6 +74,18 @@ const ClassroomHeaderBar = ({
             cx={cx}
           />
         ) : null}
+
+        {((onChat && showChat) || virtual_classroom) &&
+        (address || calendar || (schedule && schedule.length)) ? (
+          <Box className={classes.separator} />
+        ) : null}
+
+        {address ? <AddressItem address={address} classes={classes} cx={cx} /> : null}
+
+        {address && (calendar || (schedule && schedule.length)) ? (
+          <Box className={classes.separator} />
+        ) : null}
+
         {calendar && (
           <CalendarItem
             calendar={calendar}
@@ -73,8 +104,8 @@ const ClassroomHeaderBar = ({
             cx={cx}
           />
         ) : null}
+        {rightSide ? rightSide : null}
       </Box>
-      <Box>{rightSide ? rightSide : null}</Box>
     </Box>
   );
 };
diff --git a/packages/leemons/src/common/ClassroomHeaderBar/ClassroomHeaderBar.stories.js b/packages/leemons/src/common/ClassroomHeaderBar/ClassroomHeaderBar.stories.js
index 8c5dcdd3a..1d8842e43 100644
--- a/packages/leemons/src/common/ClassroomHeaderBar/ClassroomHeaderBar.stories.js
+++ b/packages/leemons/src/common/ClassroomHeaderBar/ClassroomHeaderBar.stories.js
@@ -2,6 +2,7 @@ import React from 'react';
 import { ClassroomHeaderBar } from './ClassroomHeaderBar';
 import { CLASSROOM_HEADER_BAR_DEFAULT_PROPS } from './ClassroomHeaderBar.constants';
 import mdx from './ClassroomHeaderBar.mdx';
+import { Box } from '@mantine/core';
 
 export default {
   title: 'leemons/Common/ClassroomHeaderBar',
@@ -21,7 +22,7 @@ export default {
 };
 
 const Template = ({ ...props }) => {
-  return <ClassroomHeaderBar {...props} />;
+  return <ClassroomHeaderBar leftSide={<Box>Test</Box>} {...props} />;
 };
 
 export const Playground = Template.bind({});
@@ -29,6 +30,8 @@ export const Playground = Template.bind({});
 Playground.args = {
   ...CLASSROOM_HEADER_BAR_DEFAULT_PROPS,
   locale: 'en',
+  showChat: true,
+  onChat: () => {},
   labels: {
     virtualClassroom: 'Clase virtual',
     schedule: 'Horario',
@@ -64,6 +67,7 @@ Playground.args = {
     ],
     address: 'Aula B01. Edificio Norte.',
     virtual_classroom: 'https://www.leemons.io/es',
+
     teacher: {
       name: 'Willy',
       surnames: 'Teacher',
diff --git a/packages/leemons/src/common/ClassroomHeaderBar/ClassroomHeaderBar.styles.js b/packages/leemons/src/common/ClassroomHeaderBar/ClassroomHeaderBar.styles.js
index 6bc56fbdd..848e9b6e2 100644
--- a/packages/leemons/src/common/ClassroomHeaderBar/ClassroomHeaderBar.styles.js
+++ b/packages/leemons/src/common/ClassroomHeaderBar/ClassroomHeaderBar.styles.js
@@ -4,18 +4,17 @@ export const ClassroomHeaderBarStyles = createStyles((theme, {}) => {
   const globalTheme = theme.other.global;
   return {
     root: {
-      backgroundColor: globalTheme.background.color.surface.subtle,
-      paddingInline: 48,
+      backgroundColor: '#FFFFFF',
+      paddingInline: 24,
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'space-between',
-      height: 56,
+      height: 80,
     },
     root2: {
-      gap: 32,
+      gap: 8,
       display: 'flex',
       alignItems: 'center',
-      paddingInline: 48,
     },
     pinIcon: {
       minHeight: 14,
@@ -33,16 +32,24 @@ export const ClassroomHeaderBarStyles = createStyles((theme, {}) => {
       gap: 18,
       userSelect: 'none',
       svg: {
-        color: theme.other.buttonIcon.content.color.terciary['default--reverse'],
+        color: '#4D5358',
       },
-      paddingLeft: 12,
+      paddingLeft: 8,
+      paddingRight: 8,
     },
     clickable: {
       cursor: 'pointer',
     },
     label: {
-      ...globalTheme.content.typo.body['md--bold'],
-      color: globalTheme.content.color.text.default,
+      fontFamily: 'Albert Sans',
+      fontWeight: 400,
+      fontSize: 14,
+      color: '#4D5358',
+    },
+    separator: {
+      width: '1px',
+      height: '24px',
+      backgroundColor: '#DDE1E6',
     },
   };
 });
diff --git a/packages/leemons/src/common/ClassroomHeaderBar/components/AddressItem/AddressItem.js b/packages/leemons/src/common/ClassroomHeaderBar/components/AddressItem/AddressItem.js
index a97b93a4d..597fb0219 100644
--- a/packages/leemons/src/common/ClassroomHeaderBar/components/AddressItem/AddressItem.js
+++ b/packages/leemons/src/common/ClassroomHeaderBar/components/AddressItem/AddressItem.js
@@ -1,12 +1,11 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { Box, Text, TextClamp } from '@bubbles-ui/components';
-import { StyleThreePinTableIcon } from '@bubbles-ui/icons/outline';
+import { LocationIcon } from '@bubbles-ui/icons/outline';
 
 const AddressItem = ({ address, classes }) => {
   return (
     <Box className={classes.infoWrapper}>
-      <StyleThreePinTableIcon height={20} width={20} style={{ minHeight: 20, minWidth: 20 }} />
+      <LocationIcon height={15} width={15} style={{ minHeight: 15, minWidth: 15 }} />
       <TextClamp lines={1}>
         <Text color="interactive" className={classes.label}>
           {address}
diff --git a/packages/leemons/src/common/ClassroomHeaderBar/components/CalendarItem/CalendarItem.js b/packages/leemons/src/common/ClassroomHeaderBar/components/CalendarItem/CalendarItem.js
index eb6c8595c..5fea8501c 100644
--- a/packages/leemons/src/common/ClassroomHeaderBar/components/CalendarItem/CalendarItem.js
+++ b/packages/leemons/src/common/ClassroomHeaderBar/components/CalendarItem/CalendarItem.js
@@ -1,12 +1,11 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { Box, Text, TextClamp } from '@bubbles-ui/components';
 import { PluginCalendarIcon } from '@bubbles-ui/icons/outline';
 
 const CalendarItem = ({ calendar, calendarLabel, classes }) => {
   return (
     <Box className={classes.infoWrapper}>
-      <PluginCalendarIcon height={20} width={20} style={{ minHeight: 20, minWidth: 20 }} />
+      <PluginCalendarIcon height={15} width={15} style={{ minHeight: 15, minWidth: 15 }} />
       <TextClamp lines={1}>
         <Text color="interactive" className={classes.label}>
           {calendarLabel}
diff --git a/packages/leemons/src/common/ClassroomHeaderBar/components/ScheduleItem/ScheduleItem.js b/packages/leemons/src/common/ClassroomHeaderBar/components/ScheduleItem/ScheduleItem.js
index 9fa19d741..9b61e62c9 100644
--- a/packages/leemons/src/common/ClassroomHeaderBar/components/ScheduleItem/ScheduleItem.js
+++ b/packages/leemons/src/common/ClassroomHeaderBar/components/ScheduleItem/ScheduleItem.js
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import { Box, Text, TextClamp, HoverCard } from '@bubbles-ui/components';
+import { Box, HoverCard, Text, TextClamp } from '@bubbles-ui/components';
 import { SCHEDULE_PROPS } from '../../ClassroomHeaderBar.constants';
 import { TimeClockCircleIcon } from '@bubbles-ui/icons/outline';
 import { find, forEach } from 'lodash';
@@ -40,7 +40,7 @@ const ScheduleItem = ({ schedule, scheduleLabel, locale, firstDayOfWeek = 1, cla
           let dayLabel = day.substring(0, 2);
           dayLabel = dayLabel.charAt(0).toUpperCase() + dayLabel.slice(1);
           return { label: dayLabel, index: e.weekdays.indexOf(day), day: day };
-        })
+        }),
       );
     });
   }, [locale]);
@@ -49,7 +49,7 @@ const ScheduleItem = ({ schedule, scheduleLabel, locale, firstDayOfWeek = 1, cla
     <HoverCard offset={16}>
       <HoverCard.Target>
         <Box className={cx(classes.infoWrapper, classes.clickable)}>
-          <TimeClockCircleIcon height={20} width={20} style={{ minHeight: 20, minWidth: 20 }} />
+          <TimeClockCircleIcon height={15} width={15} style={{ minHeight: 15, minWidth: 15 }} />
           <TextClamp lines={1}>
             <Text color="interactive" className={classes.label}>
               {scheduleLabel}
diff --git a/packages/leemons/src/common/ClassroomHeaderBar/components/VirtualClassItem/VirtualClassItem.js b/packages/leemons/src/common/ClassroomHeaderBar/components/VirtualClassItem/VirtualClassItem.js
index 39410fcc3..83ed04d2d 100644
--- a/packages/leemons/src/common/ClassroomHeaderBar/components/VirtualClassItem/VirtualClassItem.js
+++ b/packages/leemons/src/common/ClassroomHeaderBar/components/VirtualClassItem/VirtualClassItem.js
@@ -1,10 +1,9 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { Box, Text, TextClamp } from '@bubbles-ui/components';
 import { MeetingCameraIcon } from '@bubbles-ui/icons/outline';
+import { Button } from '@bubbles-ui/components';
 
 const VirtualClassItem = ({
-  virtual_classroom,
+  virtualClassroom,
   virtualClassroomLabel,
   onVirtualClassroomOpen,
   classes,
@@ -12,20 +11,18 @@ const VirtualClassItem = ({
 }) => {
   const handleOpenVirtualClassroom = () => {
     onVirtualClassroomOpen();
-    window.open(virtual_classroom, '_blank');
+    window.open(virtualClassroom, '_blank');
   };
   return (
-    <Box
-      className={cx(classes.infoWrapper, classes.clickable)}
+    <Button
+      leftIcon={
+        <MeetingCameraIcon height={15} width={15} style={{ minHeight: 15, minWidth: 15 }} />
+      }
+      variant="link"
       onClick={handleOpenVirtualClassroom}
     >
-      <MeetingCameraIcon height={20} width={20} style={{ minHeight: 20, minWidth: 20 }} />
-      <TextClamp lines={1}>
-        <Text color="interactive" className={classes.label}>
-          {virtualClassroomLabel}
-        </Text>
-      </TextClamp>
-    </Box>
+      {virtualClassroomLabel}
+    </Button>
   );
 };
 
diff --git a/packages/leemons/src/common/HeaderDropdown/HeaderDropdown.js b/packages/leemons/src/common/HeaderDropdown/HeaderDropdown.js
index c7394139c..b95621107 100644
--- a/packages/leemons/src/common/HeaderDropdown/HeaderDropdown.js
+++ b/packages/leemons/src/common/HeaderDropdown/HeaderDropdown.js
@@ -14,11 +14,11 @@ import {
   HEADER_DROPDOWN_DEFAULT_PROPS,
   HEADER_DROPDOWN_PROP_TYPES,
 } from './HeaderDropdown.constants';
-import { ChevDownIcon, ChevUpIcon } from '@bubbles-ui/icons/outline';
+import { CheckIcon, ChevDownIcon, ChevUpIcon } from '@bubbles-ui/icons/outline';
 
 const normalizeString = (string) => {
   return string
-    .toLowerCase()
+    ?.toLowerCase()
     .normalize('NFD')
     .replace(/[\u0300-\u036f]/g, '');
 };
@@ -31,13 +31,14 @@ const HeaderDropdown = ({
   value,
   readOnly,
   onChange,
+  withSearchInput = true,
   ...props
 }) => {
   const [isOpened, setIsOpened] = useState(false);
   const ref = useClickOutside(() => setIsOpened(false));
   const [filter, setFilter] = useState('');
   const [selectedItem, setSelectedItem] = useState(
-    data.find((item) => item?.id === value?.id) || data[0] || {}
+    data.find((item) => item?.id === value?.id) || data[0] || {},
   );
   const headerRef = useRef(null);
 
@@ -61,40 +62,49 @@ const HeaderDropdown = ({
       ) : (
         <Box
           key={`${index} ${item?.id}`}
-          className={classes.itemComponent}
+          className={
+            selectedItem?.id === item?.id ? classes.itemComponentSelected : classes.itemComponent
+          }
           onClick={() => onChangeHandler(item)}
         >
-          {!isNil(item?.image) && !isEmpty(item?.image) && !item?.showIcon ? (
-            <ImageLoader height={56} width={56} radius="50%" src={item?.image} />
-          ) : null}
-          {!isNil(item?.icon) &&
-          !isEmpty(item?.icon) &&
-          !isNil(item?.color) &&
-          !isEmpty(item?.color) &&
-          item?.showIcon ? (
-            <Box className={classes.itemIcon} style={{ backgroundColor: item?.color }}>
-              <ImageLoader forceImage height={24} width={24} src={item?.icon} />
+          <Box className={classes.itemComponentContent}>
+            {!isNil(item?.image) && !isEmpty(item?.image) && !item?.showIcon ? (
+              <ImageLoader height={32} width={32} radius="50%" src={item?.image} />
+            ) : null}
+            {!isNil(item?.icon) &&
+            !isEmpty(item?.icon) &&
+            !isNil(item?.color) &&
+            !isEmpty(item?.color) &&
+            item?.showIcon ? (
+              <Box className={classes.itemIconSmall} style={{ backgroundColor: item?.color }}>
+                <ImageLoader forceImage height={16} width={16} src={item?.icon} />
+              </Box>
+            ) : null}
+            <Box className={classes.valueItemContent}>
+              <TextClamp lines={1} maxLines={1}>
+                <Text className={classes.itemComponentLabel} color="primary" strong>
+                  {item?.label}
+                </Text>
+              </TextClamp>
+              {item?.description ? (
+                <TextClamp lines={1} maxLines={1}>
+                  <Text
+                    className={classes.itemComponentDescription}
+                    role="productive"
+                    size="xs"
+                    stronger
+                  >
+                    {item?.description}
+                  </Text>
+                </TextClamp>
+              ) : null}
             </Box>
-          ) : null}
-          <Box className={classes.valueItemContent}>
-            <TextClamp lines={1} maxLines={1}>
-              <Text className={classes.itemComponentLabel} color="primary" strong>
-                {item?.label}
-              </Text>
-            </TextClamp>
-            <TextClamp lines={1} maxLines={1}>
-              <Text
-                className={classes.itemComponentDescription}
-                role="productive"
-                size="xs"
-                stronger
-              >
-                {item?.description}
-              </Text>
-            </TextClamp>
+          </Box>
+          <Box className={classes.itemComponentIcon}>
+            {selectedItem?.id === item?.id ? <CheckIcon /> : null}
           </Box>
         </Box>
-      )
+      ),
     );
   };
 
@@ -102,7 +112,15 @@ const HeaderDropdown = ({
     setSelectedItem(data.find((item) => item?.id === value?.id) || data[0] || {});
   }, [JSON.stringify(value)]);
 
-  const { classes, cx } = HeaderDropdownStyles({ isOpened, headerRef }, { name: 'HeaderDropdown' });
+  const { classes, cx } = HeaderDropdownStyles(
+    {
+      isOpened,
+      headerRef,
+      withSearchInput,
+    },
+    { name: 'HeaderDropdown' },
+  );
+
   return (
     <Box ref={ref} className={classes.root} {...props}>
       <Box ref={headerRef} className={classes.header}>
@@ -113,7 +131,7 @@ const HeaderDropdown = ({
             {!isNil(selectedItem?.image) &&
             !isEmpty(selectedItem?.image) &&
             !selectedItem?.showIcon ? (
-              <ImageLoader height={56} width={56} radius="50%" src={selectedItem?.image} />
+              <ImageLoader height={48} width={48} radius="50%" src={selectedItem?.image} />
             ) : null}
             {!isNil(selectedItem?.icon) &&
             !isEmpty(selectedItem?.icon) &&
@@ -121,14 +139,16 @@ const HeaderDropdown = ({
             !isEmpty(selectedItem?.color) &&
             selectedItem?.showIcon ? (
               <Box className={classes.itemIcon} style={{ backgroundColor: selectedItem?.color }}>
-                <ImageLoader forceImage height={24} width={24} src={selectedItem?.icon} />
+                <ImageLoader forceImage height={20} width={20} src={selectedItem?.icon} />
               </Box>
             ) : null}
             <Box className={classes.content}>
               <TextClamp lines={1} maxLines={1}>
                 <Text className={classes.title}>{selectedItem?.label}</Text>
               </TextClamp>
-              <Text className={classes.description}>{selectedItem?.description}</Text>
+              {classes.description ? (
+                <Text className={classes.description}>{selectedItem?.description}</Text>
+              ) : null}
             </Box>
           </Box>
         )}
@@ -150,14 +170,17 @@ const HeaderDropdown = ({
       </Box>
       {!readOnly && (
         <Box className={classes.dropDown}>
-          <Box className={classes.searchInput}>
-            <SearchInput
-              placeholder={placeholder}
-              variant="filled"
-              value={filter}
-              onChange={setFilter}
-            />
-          </Box>
+          {withSearchInput ? (
+            <Box className={classes.searchInput}>
+              <SearchInput
+                placeholder={placeholder}
+                variant="filled"
+                value={filter}
+                onChange={setFilter}
+              />
+            </Box>
+          ) : null}
+
           <Box className={classes.itemList}>{loadItemList()}</Box>
         </Box>
       )}
diff --git a/packages/leemons/src/common/HeaderDropdown/HeaderDropdown.stories.js b/packages/leemons/src/common/HeaderDropdown/HeaderDropdown.stories.js
index 8a3ba3154..adf36a3a3 100644
--- a/packages/leemons/src/common/HeaderDropdown/HeaderDropdown.stories.js
+++ b/packages/leemons/src/common/HeaderDropdown/HeaderDropdown.stories.js
@@ -35,8 +35,7 @@ export const Playground = Template.bind({});
 Playground.args = {
   ...HEADER_DROPDOWN_DEFAULT_PROPS,
   placeholder: 'Search',
+  withSearchInput: false,
   data: DROPDOWN_DATA,
-  value: {
-    id: '',
-  },
+  value: DROPDOWN_DATA[0],
 };
diff --git a/packages/leemons/src/common/HeaderDropdown/HeaderDropdown.styles.js b/packages/leemons/src/common/HeaderDropdown/HeaderDropdown.styles.js
index 41017818e..e6fb24d39 100644
--- a/packages/leemons/src/common/HeaderDropdown/HeaderDropdown.styles.js
+++ b/packages/leemons/src/common/HeaderDropdown/HeaderDropdown.styles.js
@@ -1,106 +1,147 @@
 import { createStyles, getFontExpressive } from '@bubbles-ui/components';
 
-export const HeaderDropdownStyles = createStyles((theme, { isOpened, headerRef }) => {
-  const { height, top } = headerRef?.current?.getBoundingClientRect() || { height: 0, top: 0 };
-  const headerHeight = height + top || 0;
-  const globalTheme = theme.other.global;
-
-  return {
-    root: {
-      ...getFontExpressive(theme.fontSizes['2']),
-      width: '100%',
-      position: 'relative',
-    },
-    header: {
-      display: 'flex',
-      alignItems: 'center',
-    },
-    dropDown: {
-      position: 'absolute',
-      top: 80,
-      right: 0,
-      left: 0,
-      backgroundColor: theme.colors.mainWhite,
-      boxShadow: '32px 44px 32px rgba(35, 43, 60, 0.05), 100px 40px 60px rgba(51, 63, 86, 0.03)',
-      opacity: isOpened ? 1 : 0,
-      transform: isOpened ? 'translateY(0)' : 'translateY(-10px)',
-      transition: 'opacity 0.2s ease-in-out, transform 0.2s ease-in-out',
-      zIndex: 200,
-      pointerEvents: isOpened ? 'all' : 'none',
-      paddingBottom: 20,
-      width: 'max(400px, 100%)',
-    },
-    itemList: {
-      paddingInline: 22,
-      paddingBottom: 4,
-      display: 'flex',
-      flexDirection: 'column',
-      overflowY: 'auto',
-      overflowX: 'hidden',
-      maxHeight: isOpened ? `calc(100vh - ${headerHeight + 71 + 24}px)` : 0,
-    },
-    searchInput: {
-      padding: 16,
-    },
-    dropDownIcon: {
-      // color: theme.colors.text01,
-      color: globalTheme.content.color.text['default--reverse'], // actionButtonTheme.content.color.primary.default,
-      marginLeft: 16,
-      alignSelf: 'baseline',
-      marginTop: 8,
-    },
-    valueComponent: {
-      flex: 1,
-      display: 'flex',
-      gap: 21,
-      alignItems: 'center',
-    },
-    itemComponent: {
-      display: 'flex',
-      gap: 21,
-      alignItems: 'center',
-      cursor: 'pointer',
-      paddingTop: 4,
-      paddingBottom: 16,
-      '&:last-child': {
+export const HeaderDropdownStyles = createStyles(
+  (theme, { isOpened, headerRef, withSearchInput }) => {
+    const { height, top } = headerRef?.current?.getBoundingClientRect() || { height: 0, top: 0 };
+    const headerHeight = height + top || 0;
+    const globalTheme = theme.other.global;
+    return {
+      root: {
+        ...getFontExpressive(theme.fontSizes['2']),
+        width: '100%',
+        position: 'relative',
+      },
+      header: {
+        display: 'flex',
+        alignItems: 'center',
+      },
+      dropDown: {
+        position: 'absolute',
+        top: 50,
+        right: 0,
+        left: 0,
+        backgroundColor: theme.colors.mainWhite,
+        opacity: isOpened ? 1 : 0,
+        transform: isOpened ? 'translateY(0)' : 'translateY(-10px)',
+        transition: 'opacity 0.2s ease-in-out, transform 0.2s ease-in-out',
+        zIndex: 200,
+        pointerEvents: isOpened ? 'all' : 'none',
+        paddingBottom: 20,
+        width: 'max(400px, 100%)',
+        maxHeight: 300,
+        maxWidth: 360,
+        border: '1px solid #C2CAD6',
+        boxShadow:
+          '0px 10px 36px 0px rgba(26, 32, 43, 0.12), 0px 2px 0px 0px rgba(217, 225, 237, 0.16)',
+        borderRadius: 4,
+        overflow: 'hidden',
+      },
+      itemList: {
+        padding: 16,
+        paddingBottom: 4,
+        display: 'flex',
+        flexDirection: 'column',
+        overflowY: 'auto',
+        overflowX: 'hidden',
+        maxHeight: withSearchInput ? 230 : 290,
+      },
+      searchInput: {
+        padding: 16,
         paddingBottom: 0,
       },
-    },
-    itemComponentLabel: {
-      ...globalTheme.content.typo.body['lg--bold'],
-      color: globalTheme.content.color.text.emphasis,
-    },
-    itemComponentDescription: {
-      ...globalTheme.content.typo.body.sm,
-      color: globalTheme.content.color.text.muted,
-    },
-    itemIcon: {
-      borderRadius: '50%',
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      img: {
-        filter: 'brightness(0) invert(1)',
-      },
-      height: 56,
-      width: 56,
-    },
-    content: {
-      display: 'flex',
-      flexDirection: 'column',
-      gap: 4,
-    },
-    valueItemContent: {
-      display: 'flex',
-      flexDirection: 'column',
-    },
-    title: {
-      ...globalTheme.content.typo.heading.xlg,
-      color: globalTheme.content.color.text['default--reverse'],
-    },
-    description: {
-      ...globalTheme.content.typo.body['lg--bold'],
-      color: globalTheme.content.color.text['default--reverse'],
-    },
-  };
-});
+      dropDownIcon: {
+        // color: theme.colors.text01,
+        marginLeft: 16,
+        alignSelf: 'baseline',
+      },
+      valueComponent: {
+        display: 'flex',
+        gap: 16,
+        alignItems: 'center',
+      },
+      itemComponent: {
+        justifyContent: 'space-between',
+        display: 'flex',
+        gap: 8,
+        alignItems: 'center',
+        cursor: 'pointer',
+        padding: 8,
+        borderRadius: 4,
+      },
+      itemComponentSelected: {
+        justifyContent: 'space-between',
+        display: 'flex',
+        gap: 8,
+        alignItems: 'center',
+        cursor: 'pointer',
+        padding: 8,
+        borderRadius: 4,
+        backgroundColor: '#E7F7B0',
+      },
+      itemComponentContent: {
+        display: 'flex',
+        gap: 8,
+        alignItems: 'center',
+      },
+      itemComponentIcon: {
+        color: '#5CBC6A',
+        fontSize: 14,
+      },
+      itemComponentLabel: {
+        fontFamily: 'Albert Sans',
+        fontSize: '16px',
+        color: '#2F463F',
+        fontWeight: 400,
+      },
+      itemComponentDescription: {
+        fontFamily: 'Albert Sans',
+        fontSize: '13px',
+        fontWeight: 400,
+        color: '#4D5358',
+      },
+      itemIcon: {
+        borderRadius: '50%',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        img: {
+          filter: 'brightness(0) invert(1)',
+        },
+        height: 48,
+        width: 48,
+      },
+      itemIconSmall: {
+        borderRadius: '50%',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        img: {
+          filter: 'brightness(0) invert(1)',
+        },
+        height: 32,
+        width: 32,
+      },
+      content: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 4,
+      },
+      valueItemContent: {
+        display: 'flex',
+        flexDirection: 'column',
+      },
+      title: {
+        fontFamily: 'Albert Sans',
+        fontSize: '18px',
+        fontWeight: 600,
+        color: '#2F463F',
+      },
+      description: {
+        fontFamily: 'Albert Sans',
+        fontSize: '14px',
+        fontWeight: 400,
+        color: '#4D5358',
+      },
+    };
+  },
+);
diff --git a/packages/leemons/src/common/HeaderDropdown/mock/data.js b/packages/leemons/src/common/HeaderDropdown/mock/data.js
index ab0372de5..10dfbdc28 100644
--- a/packages/leemons/src/common/HeaderDropdown/mock/data.js
+++ b/packages/leemons/src/common/HeaderDropdown/mock/data.js
@@ -3,7 +3,6 @@ export const DROPDOWN_DATA = [
     id: '1',
     color: '#4F96FF',
     label: 'Bases para el análisis y el tratamiento del Cáncer',
-    description: 'CFP594-22/001',
     icon: 'https://upload.wikimedia.org/wikipedia/commons/8/87/Globe_icon_2.svg',
     image:
       'https://images.unsplash.com/photo-1502230831726-fe5549140034?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1587&q=80',