diff --git a/src/components/InsightsCard.vue b/src/components/InsightsCard.vue
index ecf6169e..ffd8d6b6 100644
--- a/src/components/InsightsCard.vue
+++ b/src/components/InsightsCard.vue
@@ -1,12 +1,12 @@
 <template>
-  <button class="insights-card">
-    <p class="insights-card__title unnnic-font body-lg bold">
+  <article class="insights-card">
+    <p class="insights-card__title">
       <slot name="title"></slot>
     </p>
-    <p class="insights-card__description unnnic-font body-gt">
+    <p class="insights-card__description">
       <slot name="description"></slot>
     </p>
-  </button>
+  </article>
 </template>
 
 <script>
@@ -26,13 +26,19 @@ export default {
   justify-content: center;
   cursor: pointer;
   border: none;
+  text-align: left;
 
   &__title {
     color: $unnnic-color-neutral-darkest;
+    font-size: $unnnic-font-size-body-lg;
+    font-weight: $unnnic-font-weight-bold;
   }
 
   &__description {
     color: $unnnic-color-neutral-dark;
+    font-size: $unnnic-font-size-body-gt;
+    font-family: $unnnic-font-family-secondary;
+    text-overflow: ellipsis;
   }
 }
 </style>
diff --git a/src/components/InsightsInput.vue b/src/components/InsightsInput.vue
index 16f1c553..7d855c20 100644
--- a/src/components/InsightsInput.vue
+++ b/src/components/InsightsInput.vue
@@ -1,17 +1,18 @@
 <template>
-  <div class="insights-input">
+  <section class="insights-input">
     <input
       class="insights-input__input"
       type="text"
       placeholder="Peça insights ao InsightsGPT..."
     />
-    <unnnic-button
-      class="insights-input__button"
-      type="secondary"
-      size="large"
-      iconCenter="send"
-    />
-  </div>
+    <div class="insights-input__button">
+      <unnnic-button
+        type="secondary"
+        size="large"
+        iconCenter="send"
+      />
+    </div>
+  </section>
 </template>
 
 <script>
@@ -24,11 +25,13 @@ export default {
 .insights-input {
   margin-top: auto;
   width: 100%;
-  padding: 0 8rem;
+  padding: 0 calc($unnnic-spacing-awesome + $unnnic-spacing-giant) $unnnic-spacing-lg;
   display: flex;
   flex-direction: row;
   position: relative;
 
+  background-color: $unnnic-color-neutral-white;
+
   @media screen and (max-width: 900px) {
     padding: unset;
   }
@@ -50,7 +53,7 @@ export default {
     border: 1px $unnnic-color-neutral-cleanest solid;
     border-radius: $unnnic-border-radius-sm;
     background-color: $unnnic-color-neutral-white;
-    right: 4rem;
+    right: 9rem;
     top: 0.6rem;
     cursor: pointer;
 
@@ -59,4 +62,4 @@ export default {
     }
   }
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/src/components/ResizableBar.vue b/src/components/ResizableBar.vue
index 95cbfba7..4bf8cada 100644
--- a/src/components/ResizableBar.vue
+++ b/src/components/ResizableBar.vue
@@ -1,6 +1,7 @@
 <template>
   <aside
     class="resizable-bar"
+    :class="{ 'resizable-bar--position': isRelative }"
     :style="{
       bottom: sidebarBottom + 'px',
       height: `${Math.min(sidebarHeight, maxHeight)}px`,
@@ -17,11 +18,24 @@
       <button
         @click="resizeBar"
         class="resizable-bar__circle-up"
+        v-if="sidebarBottom"
       >
         <UnnnicIcon
           icon="expand_circle_up"
           size="md"
-          scheme="neutral-cleanest"
+          scheme="neutral-clean"
+          clickable
+        />
+      </button>
+      <button
+        @click="resizeBar"
+        class="resizable-bar__circle-up"
+        v-if="sidebarBottom > 100"
+      >
+        <UnnnicIcon
+          icon="expand_circle_down"
+          size="md"
+          scheme="neutral-clean"
           clickable
         />
       </button>
@@ -30,7 +44,7 @@
         class="resizable-bar__separator"
       />
     </header>
-    <div class="resizable-bar__content">
+    <section class="resizable-bar__content">
       <div
         v-if="visibleInsights"
         class="resizable-bar__insights"
@@ -56,26 +70,48 @@
             </ul>
           </nav>
           <div class="resizable-bar__insights-cards">
-            <InsightsCard>
-              <template v-slot:title> Titulo </template>
-              <template v-slot:description> Descrição </template>
-            </InsightsCard>
-            <InsightsCard>
-              <template v-slot:title> Titulo </template>
-              <template v-slot:description> Descrição </template>
-            </InsightsCard>
-            <InsightsCard>
-              <template v-slot:title> Titulo </template>
-              <template v-slot:description> Descrição </template>
-            </InsightsCard>
-            <InsightsCard>
-              <template v-slot:title> Titulo </template>
-              <template v-slot:description> Descrição </template>
-            </InsightsCard>
-            <InsightsCard>
-              <template v-slot:title> Titulo </template>
-              <template v-slot:description> Descrição </template>
-            </InsightsCard>
+            <SugestionCard>
+              <template v-slot:title
+                >Análise de Desempenho do Atendente</template
+              >
+              <template v-slot:description>Nos últimos 30 dias</template>
+            </SugestionCard>
+            <SugestionCard>
+              <template v-slot:title>Satisfação do Cliente</template>
+              <template v-slot:description
+                >Combine os dados de atendimento com feedbacks de satisfação do
+                cliente para avaliar a eficácia dos diferentes setores e
+                atendentes.</template
+              >
+            </SugestionCard>
+            <SugestionCard>
+              <template v-slot:title
+                >Relatório de Distribuição de Atendimentos</template
+              >
+              <template v-slot:description
+                >Gere um relatório mostrando a distribuição de atendimentos por
+                setor e fila ao longo do tempo, identificando picos de
+                demanda.</template
+              >
+            </SugestionCard>
+            <SugestionCard>
+              <template v-slot:title>Tendências de Contato</template>
+              <template v-slot:description
+                >Analise a frequência de contatos de cada cliente e identifique
+                padrões ou tendências em suas solicitações de
+                atendimento.</template
+              >
+            </SugestionCard>
+            <SugestionCard>
+              <template v-slot:title
+                >Avaliação de Tags de Encerramento</template
+              >
+              <template v-slot:description
+                >Examine as tags de encerramento do atendimento e determine as
+                categorias mais comuns de problemas ou solicitações dos
+                clientes.</template
+              >
+            </SugestionCard>
           </div>
         </div>
       </div>
@@ -83,7 +119,10 @@
         v-else
         class="resizable-bar__general-content"
       >
-        <div class="resizable-bar__content-doris">
+        <div
+          class="resizable-bar__content-doris"
+          v-if="showContent"
+        >
           <img
             class="resizable-bar__doris-image"
             src="../assets/images/doris.png"
@@ -95,17 +134,23 @@
         </div>
         <div class="resizable-bar__content-text">
           <div class="resizable-bar__cards">
-            <InsightsCard>
-              <template v-slot:title>Titulo</template>
-              <template v-slot:description>Descrição</template>
+            <InsightsCard v-if="showContent">
+              <template v-slot:title
+                >Quais foram os principais erros no meu chatbot?</template
+              >
+              <template v-slot:description>Nos últimos 30 dias</template>
             </InsightsCard>
-            <InsightsCard>
-              <template v-slot:title>Titulo</template>
-              <template v-slot:description>Descrição</template>
+            <InsightsCard v-if="showContent">
+              <template v-slot:title
+                >Quais foram os principais erros no meu chatbot?</template
+              >
+              <template v-slot:description>Nos últimos 30 dias</template>
             </InsightsCard>
             <InsightsCard>
-              <template v-slot:title>Titulo</template>
-              <template v-slot:description>Descrição</template>
+              <template v-slot:title
+                >Quais foram os principais erros no meu chatbot?</template
+              >
+              <template v-slot:description>Nos últimos 30 dias</template>
             </InsightsCard>
             <InsightsMainCard @click="showInsights">
               <template v-slot:description>
@@ -115,7 +160,7 @@
           </div>
         </div>
       </div>
-    </div>
+    </section>
     <InsightsInput />
   </aside>
 </template>
@@ -123,6 +168,7 @@
 <script>
 import InsightsMainCard from '@/components/InsightsMainCard.vue';
 import InsightsCard from '@/components/InsightsCard.vue';
+import SugestionCard from '@/components/SugestionCard.vue';
 import InsightsInput from '@/components/InsightsInput.vue';
 
 export default {
@@ -131,23 +177,53 @@ export default {
   components: {
     InsightsMainCard,
     InsightsCard,
+    SugestionCard,
     InsightsInput,
   },
 
   data() {
     return {
-      isResizing: false,
       startY: 0,
       startBottom: -214,
-      sidebarBottom: -339,
-      minHeight: -320,
-      maxHeight: 350,
-      sidebarHeight: 350,
+      minHeight: -270,
+      maxHeight: 288,
+      sidebarHeight: 288,
+      sidebarBottom: this.getInitialBarHeight(),
+      isResizing: false,
       visibleGeneral: false,
       visibleInsights: false,
+      showContent: false,
+      isRelative: this.changePosition(),
     };
   },
+
   methods: {
+    getInitialBarHeight() {
+      if (this.$route.name === 'home') {
+        this.showContent = true;
+        return 1;
+      } else {
+        this.isRelative = false;
+        return -270;
+      }
+    },
+
+    changePosition() {
+      if (this.$route.name !== 'home') {
+        return (this.isRelative = false);
+      } else {
+        return (this.isRelative = true);
+      }
+    },
+
+    updateContentVisibility() {
+      if (this.sidebarBottom == this.initialContentHeight) {
+        this.showContent = true;
+      } else {
+        this.showContent = true;
+      }
+    },
+
     startResizing(event) {
       this.isResizing = true;
       this.startY = event.clientY;
@@ -155,29 +231,49 @@ export default {
       window.addEventListener('mousemove', this.handleResizing);
       window.addEventListener('mouseup', this.stopResizing);
     },
+
     handleResizing(event) {
       if (this.isResizing) {
+        this.isRelative = false;
+        this.$store.commit('sidebar/setChartVisibility', false);
+        this.updateContentVisibility();
         const offsetY = event.clientY - this.startY;
         this.sidebarBottom = Math.max(
           Math.min(this.startBottom - offsetY, this.maxHeight),
           this.minHeight,
         );
       }
+
+      if (this.isResizing && this.sidebarBottom < -200) {
+        this.$store.commit('sidebar/setChartVisibility', true);
+      }
     },
+
     stopResizing() {
       this.isResizing = false;
       window.removeEventListener('mousemove', this.handleResizing);
       window.removeEventListener('mouseup', this.stopResizing);
     },
+
     resizeBar() {
-      if (this.sidebarBottom != 350) {
-        this.sidebarBottom = 350;
+      if (this.sidebarBottom != 288) {
+        this.sidebarBottom = 288;
+        this.isRelative = false;
+        this.$store.commit('sidebar/setChartVisibility', false);
       } else {
-        this.sidebarBottom = -320;
+        this.sidebarBottom = -270;
+        this.$store.commit('sidebar/setChartVisibility', true);
       }
+
+      this.updateContentVisibility();
     },
+
     showInsights() {
       this.visibleInsights = !this.visibleInsights && !this.visibleGeneral;
+      if (this.sidebarBottom != 288) {
+        this.sidebarBottom = 288;
+        this.isRelative = false;
+      }
     },
   },
 };
@@ -188,7 +284,7 @@ $insightsContainerPadding: $unnnic-spacing-ant * 2;
 
 .resizable-bar {
   z-index: 1;
-  position: fixed;
+  position: absolute;
   background-color: $unnnic-color-neutral-white;
   width: calc(100% - $insightsContainerPadding);
   height: 210px;
@@ -198,7 +294,7 @@ $insightsContainerPadding: $unnnic-spacing-ant * 2;
     flex-direction: row;
     place-content: space-between;
     align-items: center;
-    margin-bottom: 6rem;
+    margin-bottom: $unnnic-spacing-lg;
     cursor: ns-resize;
     position: relative;
   }
@@ -211,11 +307,11 @@ $insightsContainerPadding: $unnnic-spacing-ant * 2;
   }
 
   .green-color {
-    border: 2px solid $unnnic-color-brand-weni;
+    border: 2px solid $unnnic-color-neutral-dark;
   }
 
   &__circle-up {
-    border-radius: $unnnic-spacing-nano;
+    border-radius: 50%;
     background-color: $unnnic-color-neutral-white;
     border: none;
     cursor: pointer;
@@ -235,7 +331,6 @@ $insightsContainerPadding: $unnnic-spacing-ant * 2;
     flex-direction: column;
     place-content: center;
     gap: 2rem;
-    padding-bottom: 6rem;
 
     @media screen and (max-width: 900px) {
       overflow-y: scroll;
@@ -243,8 +338,12 @@ $insightsContainerPadding: $unnnic-spacing-ant * 2;
     }
   }
 
+  &__general-content {
+    margin-bottom: 2rem;
+  }
+
   &__content-doris {
-    margin-bottom: 3rem;
+    margin: 3rem;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -260,10 +359,7 @@ $insightsContainerPadding: $unnnic-spacing-ant * 2;
   }
 
   &__content-text {
-    max-height: 164px;
-    min-height: 164px;
     padding: 0 8rem;
-    margin-bottom: 2.5rem;
 
     @media screen and (max-width: 900px) {
       padding: unset;
@@ -273,16 +369,15 @@ $insightsContainerPadding: $unnnic-spacing-ant * 2;
   &__cards {
     display: grid;
     grid-template-columns: repeat(2, 2fr);
-    grid-template-rows: repeat(2, 2fr);
-    grid-column-gap: $unnnic-spacing-sm;
-    grid-row-gap: $unnnic-spacing-sm;
+    grid-template-rows: repeat(2, auto);
+    grid-column-gap: $unnnic-spacing-xs;
+    grid-row-gap: $unnnic-spacing-xs;
   }
 
   &__insights {
     display: flex;
     flex-direction: column;
-    padding: 0 8rem;
-    margin-bottom: 3rem;
+    padding: 6rem 8rem 1rem 8rem;
 
     @media screen and (max-width: 900px) {
       padding: unset;
@@ -301,6 +396,7 @@ $insightsContainerPadding: $unnnic-spacing-ant * 2;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
+    gap: $unnnic-spacing-xs;
     @media screen and (max-width: 900px) {
       max-height: 300px;
       flex-direction: column;
@@ -331,9 +427,14 @@ $insightsContainerPadding: $unnnic-spacing-ant * 2;
   &__insights-cards {
     display: grid;
     grid-template-columns: repeat(2, 2fr);
-    grid-template-rows: repeat(2, 2fr);
+    grid-template-rows: repeat(2, auto);
     grid-column-gap: $unnnic-spacing-sm;
     grid-row-gap: $unnnic-spacing-sm;
   }
 }
+
+.resizable-bar--position {
+  position: inherit;
+  width: 100%;
+}
 </style>
diff --git a/src/components/SugestionCard.vue b/src/components/SugestionCard.vue
new file mode 100644
index 00000000..0266fbdf
--- /dev/null
+++ b/src/components/SugestionCard.vue
@@ -0,0 +1,55 @@
+<template>
+    <article class="insights-card">
+      <p class="insights-card__title">
+        <slot name="title"></slot>
+      </p>
+      <p class="insights-card__description">
+        <slot name="description"></slot>
+      </p>
+    </article>
+  </template>
+
+  <script>
+  export default {
+    name: 'SugestionCard',
+  };
+  </script>
+
+  <style scoped lang="scss">
+  .insights-card {
+    background-color: $unnnic-color-neutral-lightest;
+    padding: $unnnic-spacing-sm;
+    border-radius: $unnnic-spacing-nano;
+    display: flex;
+    flex-direction: column;
+    gap: $unnnic-spacing-xs;
+    justify-content: center;
+    cursor: pointer;
+    border: none;
+    text-align: left;
+
+    &__title {
+      color: $unnnic-color-neutral-darkest;
+      font-size: $unnnic-font-size-body-lg;
+      font-weight: $unnnic-font-weight-bold;
+    }
+
+    &__description {
+      color: $unnnic-color-neutral-dark;
+      font-size: $unnnic-font-size-body-gt;
+      font-family: $unnnic-font-family-secondary;
+      position: relative;
+      white-space: nowrap;
+      width: 22em;
+      overflow: hidden;
+      text-overflow: ellipsis;
+
+      &::before {
+        content: '';
+        position: absolute;
+        right: 0;
+        bottom: 0;
+      }
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/layouts/InsightsLayout/index.vue b/src/layouts/InsightsLayout/index.vue
index 7b3242e0..ec35d1ae 100644
--- a/src/layouts/InsightsLayout/index.vue
+++ b/src/layouts/InsightsLayout/index.vue
@@ -69,6 +69,9 @@ $topbarHeight: 88px;
       height: 100%;
 
       background-color: $unnnic-color-neutral-white;
+
+      overflow-y: auto;
+      overflow-x: hidden;
     }
   }
 }
diff --git a/src/main.js b/src/main.js
index 64dda46e..b5f9467a 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,6 +1,7 @@
 import { createApp } from 'vue';
 import App from './App.vue';
 import router from './router';
+import store from './store';
 
 import VueApexCharts from 'vue3-apexcharts';
 
@@ -12,7 +13,8 @@ import './styles/global.scss';
 const app = createApp(App);
 
 app.use(router);
+app.use(store);
 app.use(Unnnic);
 app.use(VueApexCharts);
 
-app.mount('#app');
+app.mount('#app');
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index ecb5c01c..6ea92e68 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,4 +1,5 @@
 import { createRouter, createWebHistory } from 'vue-router';
+import store from '@/store';
 import Home from '@/views/insights/Home/index.vue';
 import Dashboards from '@/views/dashboards/Home/index.vue';
 import Dashboard from '@/views/dashboards/Dashboard/index.vue';
@@ -42,3 +43,10 @@ const router = createRouter({
 });
 
 export default router;
+
+router.beforeEach((to, from, next) => {
+  if (to.name !== 'home') {
+    store.dispatch('sidebar/updateChartVisibility', false);
+  }
+  next();
+});
\ No newline at end of file
diff --git a/src/store/index.js b/src/store/index.js
new file mode 100644
index 00000000..507bc35d
--- /dev/null
+++ b/src/store/index.js
@@ -0,0 +1,10 @@
+import { createStore } from 'vuex';
+import sidebar from './modules/sidebar';
+
+const store = createStore({
+  modules: {
+    sidebar,
+  },
+});
+
+export default store;
\ No newline at end of file
diff --git a/src/store/modules/sidebar.js b/src/store/modules/sidebar.js
new file mode 100644
index 00000000..0eb9bcf5
--- /dev/null
+++ b/src/store/modules/sidebar.js
@@ -0,0 +1,16 @@
+export default {
+    namespaced: true,
+    state: {
+      chartVisible: false,
+    },
+    mutations: {
+      setChartVisibility(state, isVisible) {
+        state.chartVisible = isVisible;
+      },
+    },
+    actions: {
+      updateChartVisibility({ commit }, isVisible) {
+        commit('setChartVisibility', isVisible);
+      },
+    },
+  };
\ No newline at end of file
diff --git a/src/views/insights/Home/index.vue b/src/views/insights/Home/index.vue
index 14e8b86a..a569631b 100644
--- a/src/views/insights/Home/index.vue
+++ b/src/views/insights/Home/index.vue
@@ -11,6 +11,14 @@
       />
       <unnnic-input-date-picker v-model="filterDate" size="sm" />
     </div>
+    <section>
+      <ColumnCharts
+        :chartData="chartData"
+        :height="chartHeight"
+        :width="chartWidth"
+        v-if="isChartVisible"
+      />
+    </section>
     <div class="cards">
       <div class="card">
         <p class="card__title">2150</p>
@@ -41,14 +49,18 @@
 </template>
 
 <script>
+import { mapState, mapActions } from 'vuex';
 import moment from 'moment';
 import InsightsLayout from '@/layouts/InsightsLayout/index.vue';
+import ColumnCharts from '@/components/ColumnCharts.vue';
+import chartData from '@/mocks/chartData.json';
 
 export default {
   name: 'HomeView',
 
   components: {
     InsightsLayout,
+    ColumnCharts,
   },
 
   data: () => ({
@@ -56,8 +68,16 @@ export default {
       start: moment().subtract(1, 'day').format('YYYY-MM-DD'),
       end: moment().format('YYYY-MM-DD'),
     },
+    chartData: chartData,
+    chartHeight: '100%',
+    chartWidth: '100%',
   }),
 
+  computed: {
+    ...mapState('sidebar', {
+      isChartVisible: (state) => state.chartVisible,
+    }),
+  },
   methods: {
     goToDashboards() {
       this.$router.replace({ name: 'dashboards' });
@@ -73,6 +93,9 @@ export default {
         },
       });
     },
+    ...mapActions({
+      updateChartVisibility: 'updateChartVisibility',
+    }),
   },
 };
 </script>
@@ -114,6 +137,7 @@ export default {
   grid-template-rows: repeat(2, 3fr);
   grid-column-gap: $unnnic-spacing-sm;
   grid-row-gap: $unnnic-spacing-sm;
+  height: 100%;
   .card {
     background-color: $unnnic-color-neutral-lightest;
     display: flex;
@@ -121,6 +145,7 @@ export default {
     gap: $unnnic-spacing-sm;
     text-align: right;
     padding: $unnnic-spacing-md;
+    justify-content: center;
 
     &__title {
       font-size: 40px;