diff --git a/calendario.css b/calendario.css
index 12ccfbd..d87831f 100644
--- a/calendario.css
+++ b/calendario.css
@@ -1,211 +1,306 @@
 * {
-    padding: 0;
     margin: 0;
+    padding: 0;
+    box-sizing: border-box;
 }
 
-p,
-h1,
-h2,
-h3 {
+body {
     font-family: 'Poppins', sans-serif;
 }
 
+/* ===== HEADER ===== */
 #header {
     width: 100%;
     height: 50px;
     position: fixed;
     top: 0;
     left: 0;
-    background: linear-gradient(to right, #C0392B 47%, #7A4951 73%, #114455 87%);
+    background: linear-gradient(to right, #C0392B, #114455);
     display: flex;
     align-items: center;
-    justify-content: flex-start;
     z-index: 10;
 }
 
 #title {
+    color: white;
     padding-left: 20px;
-    font-size: 38px;
-    margin: 0;
-    font-weight: normal;
+    font-size: 28px;
 }
 
+/* ===== BARRA ESQUERDA ===== */
 #barraesquerda {
     position: fixed;
+    top: 50px;
     left: 0;
-    top: 0;
     width: 320px;
-    height: 100vh;
-    background-color: #C0392B;
-    padding: 16px;
-    box-sizing: border-box;
+    height: calc(100vh - 50px);
+    background: #C0392B;
+    padding: 15px;
+    color: white;
     display: flex;
     flex-direction: column;
+    font-family: 'Inter', sans-serif;
 }
 
+/* ===== MINI CALENDÁRIO ===== */
 #calendario {
-    padding-top: 60px;
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
+    margin-top: 10px;
 }
 
-/* REMOVE o flex:1 se tiver */
-#calendario {
-    flex: unset;
-}   
-
 .calendariotop {
     display: flex;
-    align-items: center;
     justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
 }
 
 #mes {
-font-family: 'Inter', sans-serif;
-    color: white;
-    font-size: 22px;
-    font-weight: 600;
-    letter-spacing: 0.02em;
-}
-
-.calendarseta {
-    display: flex;
-    gap: 8px;
-}
-
-.prox,
-.ant {
-    border: none;
-    background: none;
-    color: white;
-    width: 32px;
-    height: 32px;
-    border-radius: 50%;
-    cursor: pointer;
     font-size: 18px;
-    display: grid;
-    place-items: center;
-    transition: background 0.2s ease;
+    font-weight: 600;
 }
 
-.prox:hover,
-.ant:hover {
-    background: rgba(255, 255, 255, 0.15);
+#calendarseta button {
+    background: transparent;
+    border: none;
+    color: white;
+    font-size: 18px;
+    cursor: pointer;
 }
 
 .calendariodia {
     width: 100%;
     border-collapse: collapse;
-    table-layout: fixed;
-}
-
-.calendariodia th,
-.calendariodia td {
-    text-align: center;
-    padding: 5px 0;
-    font-size: 12px;
-    font-family: 'Inter', sans-serif;
 }
 
 .calendariodia th {
-    color: rgba(255, 255, 255, 0.75);
-    font-weight: 600;
+    font-size: 11px;
+    opacity: 0.7;
 }
 
 .calendariodia td {
-    color: white;
+    text-align: center;
+    padding: 6px;
+    font-size: 12px;
     border-radius: 50%;
-    width: 24px;
-    height: 24px;
     position: relative;
-    vertical-align: middle;
 }
 
-/* bolinha abaixo do dia */
+/* bolinha */
 .calendariodia td::after {
     content: "";
-    width: 6px;
-    height: 6px;
+    width: 5px;
+    height: 5px;
+    background: white;
     border-radius: 50%;
-    background: #fff;
     position: absolute;
-    bottom: -4px;
+    bottom: -2px;
     left: 50%;
     transform: translateX(-50%);
 }
 
-.calendariodia td.outromes {
-    color: rgba(150, 150, 255, 1);
+.outromes {
+    opacity: 0.4;
 }
 
 .calendariodia td.today {
-    background: rgba(178, 255, 103, 0.95);
-    color: #1a1a1a;
+    background: #114455;
+    border-radius: 30%;
+    height: 0px;
+    width: 5px;
+
 }
 
-.calendariodia td.today::after {
-    background: rgba(26, 26, 26, 0.4);
-}
 
-.calendariodia td.empty::after {
-    display: none;
-}
-.calendariodia td.outromes::after {
-    background: rgba(255, 255, 255, 0.5);
-}
+
+
 /* ===== AGENDA ===== */
-
-.agenda {
-    margin-top: 10px;
-    color: white;
-    font-family: 'Inter', sans-serif;
-}
-
 .agenda-header {
+    margin-top: 15px;
+    border-top: 1px solid rgba(255,255,255,0.3);
+    border-bottom: 1px solid rgba(255,255,255,0.3);
+    padding: 8px 0;
     font-size: 13px;
-    margin-bottom: 10px;
-    border-top: 1px solid rgba(255,255,255,0.2);
-    padding-bottom: 10px;
-    border-bottom: 1px solid rgba(255,255,255,0.2);
-    padding-top: 10px;
 }
 
 .evento {
-    position: relative;
-    padding-left: 14px;
-    margin-bottom: 12px;
+    margin-top: 10px;
+    padding-left: 10px;
+    border-left: 3px solid white;
 }
 
-.evento::before {
-    content: "";
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
-    position: absolute;
-    left: 0;
-    top: 6px;
+.evento.azul {
+    border-color: #00c2ff;
 }
 
-.evento.azul::before {
-    background: #00c2ff;
-}
-
-.evento.rosa::before {
-    background: #ff4fa3;
+.evento.rosa {
+    border-color: #ff4fa3;
 }
 
 .hora {
     font-size: 11px;
-    opacity: 0.8;
+    opacity: 0.7;
 }
 
 .titulo {
     font-size: 13px;
-    font-weight: 500;
 }
 
 .link {
     font-size: 11px;
-    color: #ffb3b3;
+    color: #ffdede;
+}
+
+/* ===== FERIADOS ===== */
+.feriados-header {
+    margin-top: 15px;
+    font-weight: 600;
+}
+
+.feriado {
+    display: flex;
+    gap: 8px;
+    margin-top: 8px;
+    font-size: 13px;
+}
+
+.dot {
+    width: 6px;
+    height: 6px;
+    background: #d4ff6a;
+    border-radius: 50%;
+}
+
+/* ===== MAIN ===== */
+.main {
+    margin-left: 320px;
+    margin-top: 50px;
+    min-height: calc(100vh - 50px);
+    display: flex;
+    flex-direction: column;
+    background: #f5f5f5;
+}
+
+/* ===== TOPBAR ===== */
+.topbar {
+    height: 70px;
+    background: #eaeaea;
+    border-bottom: 3px solid #c0392b;
+
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    padding: 0 25px;
+}
+
+.topbar h1 {
+    font-size: 24px;
+    color: #1f3b57;
+}
+
+/* USER AREA */
+.user-area {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+}
+
+.icone {
+    font-size: 20px;
+    cursor: pointer;
+}
+
+.perfil {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background: url('https://i.pravatar.cc/100') center/cover;
+}
+
+.info {
+    display: flex;
+    flex-direction: column;
+}
+
+.nome {
+    font-weight: 600;
+    color: #1f3b57;
+}
+
+.cargo {
+    font-size: 12px;
+    color: #666;
+}
+
+/* ===== SUBHEADER ===== */
+.subheader {
+    background: #eaeaea;
+    border-bottom: 3px solid #c0392b;
+    padding: 10px 20px;
+
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.subheader h2 {
+    color: #1f3b57;
+}
+
+/* BOTÕES */
+.view-buttons button {
+    border: none;
+    padding: 5px 10px;
+    border-radius: 6px;
+    cursor: pointer;
+    background: transparent;
+}
+
+.view-buttons .active {
+    background: #c0392b;
+    color: white;
+}
+
+/* ===== MÊS ===== */
+.month-title {
+    padding: 10px 20px;
+    font-size: 16px;
+}
+
+/* ===== CALENDÁRIO GRANDE ===== */
+.calendar-area {
+    flex: 1;
+    margin: 20px;
+    background: #ddd;
+    border-radius: 8px;
+
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    grid-auto-rows: 120px;
+}
+
+.dia-box {
+    background: #fff;
+    border: 1px solid #ddd;
+}
+
+.dia-box:hover {
+    background: #eaeaff;
+}
+.icone-img {
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+    object-fit: contain;
+    transition: transform 0.2s ease;
+}
+
+.icone-img:hover {
+    transform: scale(1.15);
 }
\ No newline at end of file
diff --git a/calendario.html b/calendario.html
index 527726b..a40aad9 100644
--- a/calendario.html
+++ b/calendario.html
@@ -4,25 +4,35 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Focus Agenda</title>
+
     <link rel="stylesheet" href="calendario.css">
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+
     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
-    <link rel="icon" href="imagens/icone.png">
 </head>
 
-<body> <!--Barrinha que fica no topo-->
+<body>
+
+    <!-- HEADER -->
     <div id="header">
         <h1 id="title">Focus Agenda</h1>
-    </div> <!--cabo bar--> <!--Começo daquele mini calendario na esquerda/-->
+    </div>
+
+    <!-- BARRA ESQUERDA -->
     <div id="barraesquerda">
+
+        <!-- MINI CALENDÁRIO -->
         <div id="calendario">
             <div class="calendariotop">
-                <div class="mes" id="mes">Janeiro 2025</div>
-                <div class="calendarseta"> <button class="prox" aria-label="Mês anterior">‹</button> <button class="ant"
-                        aria-label="Próximo mês">›</button> </div>
+                <div id="mes"></div>
+
+                <div id="calendarseta">
+                    <button class="ant">‹</button>
+                    <button class="prox">›</button>
+                </div>
             </div>
+
             <table class="calendariodia">
                 <thead>
                     <tr>
@@ -35,86 +45,223 @@
                         <th>SAB</th>
                     </tr>
                 </thead>
-                <tbody>
-                    <tr>
-                        <td class="outromes">31</td>
-                        <td class="dia">1</td>
-                        <td class="dia">2</td>
-                        <td class="dia">3</td>
-                        <td class="dia">4</td>
-                        <td class="dia">5</td>
-                        <td class="dia">6</td>
-                    </tr>
-                    <tr>
-                        <td class="dia">7</td>
-                        <td class="dia">8</td>
-                        <td class="dia">9</td>
-                        <td class="dia">10</td>
-                        <td class="dia">11</td>
-                        <td class="dia">12</td>
-                        <td class="dia">13</td>
-                    </tr>
-                    <tr>
-                        <td class="dia">14</td>
-                        <td class="dia">15</td>
-                        <td class="dia">16</td>
-                        <td class="dia">17</td>
-                        <td class="dia">18</td>
-                        <td class="dia">19</td>
-                        <td class="dia">20</td>
-                    </tr>
-                    <tr>
-                        <td class="dia">21</td>
-                        <td class="dia">22</td>
-                        <td class="dia">23</td>
-                        <td class="dia">24</td>
-                        <td class="dia">25</td>
-                        <td class="dia">26</td>
-                        <td class="dia">27</td>
-                    </tr>
-                    <tr>
-                        <td class="dia">28</td>
-                        <td class="dia">29</td>
-                        <td class="dia">30</td>
-                        <td class="dia">31</td>
-                        <td class="outromes">1</td>
-                        <td class="outromes">2</td>
-                        <td class="outromes">3</td>
-                    </tr>
-                </tbody>
+                <tbody id="dias"></tbody>
             </table>
         </div>
- <!--Cabo mini calendario-->
-<div class="agenda">
-    <div class="agenda-header">
-        <strong>HOJE</strong> 07/11/2025
+
+        <!-- AGENDA -->
+        <div id="agenda"></div>
+
+        <!-- FERIADOS -->
+        <div id="feriados"></div>
+
     </div>
 
-    <div class="evento azul">
-        <div class="hora">08:15 – 09:15</div>
-        <div class="titulo">Coçar oq fazer</div>
-        <div class="link">https://youtube.com</div>
+    <!-- CONTEÚDO PRINCIPAL -->
+    <div class="main">
+
+        <!-- TOPBAR (igual ao print) -->
+        <div class="topbar">
+            <h1>Calendario</h1>
+
+           <div class="user-area">
+    <img src="imagens/sino.png" class="icone-img" alt="Notificações">
+
+    <div class="perfil">
+        <div class="avatar"></div>
+        <div class="info">
+            <span class="nome">Usuario</span>
+            <span class="cargo">Admin</span>
+        </div>
     </div>
 
-    <div class="evento azul">
-        <div class="hora">09:00 – 10:00</div>
-        <div class="titulo">COMO QUE DIMINUI A FONTE?</div>
-        <div class="link">https://sccor.com</div>
-    </div>
-
-    <div class="evento rosa">
-        <div class="hora">11:00 – 11:45</div>
-        <div class="titulo">Pintar boobie-goods</div>
-    </div>
-
-    <div class="evento azul">
-        <div class="hora">18:20 – 23:00</div>
-        <div class="titulo">Ir pro curso (infelizmente)</div>
-        <div class="link">dom 4, BBP</div>
-    </div>
+    <img src="imagens/engrenagem.png" class="icone-img" alt="Configurações">
 </div>
+        </div>
+
+       
+        <!-- MÊS -->
+        <div class="month-title">
+            <span>‹</span>
+            Janeiro, 2025
+            <span>›</span>
+        </div>
+
+        <!-- CALENDÁRIO GRANDE -->
+        <div class="calendar-area" id="calendarArea"></div>
 
     </div>
+
+    <!-- SCRIPT -->
+    <script>
+        /* ===== MINI CALENDÁRIO ===== */
+
+        let dataAtual = new Date();
+
+        function renderCalendario() {
+            const mesEl = document.getElementById("mes");
+            const diasEl = document.getElementById("dias");
+
+            const meses = [
+                "Janeiro", "Fevereiro", "Março", "Abril",
+                "Maio", "Junho", "Julho", "Agosto",
+                "Setembro", "Outubro", "Novembro", "Dezembro"
+            ];
+
+            let ano = dataAtual.getFullYear();
+            let mes = dataAtual.getMonth();
+
+            mesEl.textContent = `${meses[mes]} ${ano}`;
+
+            let primeiroDia = new Date(ano, mes, 1).getDay();
+            let ultimoDia = new Date(ano, mes + 1, 0).getDate();
+            let ultimoDiaMesAnterior = new Date(ano, mes, 0).getDate();
+
+            diasEl.innerHTML = "";
+
+            let diaAtual = 1;
+            let diaSeguinte = 1;
+
+            let totalCelulas = primeiroDia + ultimoDia;
+            let totalLinhas = Math.ceil(totalCelulas / 7);
+            if (totalLinhas < 4) totalLinhas = 4;
+
+            for (let semana = 0; semana < totalLinhas; semana++) {
+                let linha = document.createElement("tr");
+
+                for (let diaSemana = 0; diaSemana < 7; diaSemana++) {
+                    let pos = semana * 7 + diaSemana;
+
+                    if (pos < primeiroDia) {
+                        let dia = ultimoDiaMesAnterior - (primeiroDia - pos - 1);
+                        linha.innerHTML += `<td class="outromes">${dia}</td>`;
+                    }
+                    else if (diaAtual <= ultimoDia) {
+                        let hoje = new Date();
+
+                        let classeHoje =
+                            diaAtual === hoje.getDate() &&
+                            mes === hoje.getMonth() &&
+                            ano === hoje.getFullYear()
+                                ? "today"
+                                : "";
+
+                        linha.innerHTML += `<td class="${classeHoje}">${diaAtual}</td>`;
+                        diaAtual++;
+                    }
+                    else {
+                        linha.innerHTML += `<td class="outromes">${diaSeguinte}</td>`;
+                        diaSeguinte++;
+                    }
+                }
+
+                diasEl.appendChild(linha);
+            }
+        }
+
+        document.querySelector(".prox").onclick = () => {
+            dataAtual.setMonth(dataAtual.getMonth() + 1);
+            renderCalendario();
+        };
+
+        document.querySelector(".ant").onclick = () => {
+            dataAtual.setMonth(dataAtual.getMonth() - 1);
+            renderCalendario();
+        };
+
+        /* ===== CALENDÁRIO GRANDE ===== */
+
+        function renderCalendarioGrande() {
+            const area = document.getElementById("calendarArea");
+            area.innerHTML = "";
+
+            for (let i = 0; i < 35; i++) {
+                area.innerHTML += `<div class="dia-box"></div>`;
+            }
+        }
+
+        /* ===== DADOS ===== */
+
+        let agendaData = [
+            {
+                hora: "08:15 – 09:15",
+                titulo: "Coçar oq fazer",
+                link: "https://youtube.com",
+                cor: "azul"
+            },
+            {
+                hora: "09:00 – 10:00",
+                titulo: "COMO QUE DIMINUI A FONTE?",
+                link: "https://sccor.com",
+                cor: "azul"
+            },
+            {
+                hora: "11:00 – 11:45",
+                titulo: "Pintar boobie-goods",
+                cor: "rosa"
+            },
+            {
+                hora: "18:20 – 23:00",
+                titulo: "Ir pro curso (infelizmente)",
+                link: "dom 4, BBP",
+                cor: "azul"
+            }
+        ];
+
+        let feriadosData = [
+            { texto: "15 – Proclamação da República" },
+            { texto: "20 – Dia Nacional da Consciência Negra" }
+        ];
+
+        /* ===== RENDER AGENDA ===== */
+
+        function renderAgenda() {
+            const container = document.getElementById("agenda");
+
+            container.innerHTML = `
+                <div class="agenda-header">
+                    <strong>HOJE</strong> ${new Date().toLocaleDateString()}
+                </div>
+            `;
+
+            agendaData.forEach(ev => {
+                container.innerHTML += `
+                    <div class="evento ${ev.cor}">
+                        <div class="hora">${ev.hora}</div>
+                        <div class="titulo">${ev.titulo}</div>
+                        ${ev.link ? `<div class="link">${ev.link}</div>` : ""}
+                    </div>
+                `;
+            });
+        }
+
+        /* ===== RENDER FERIADOS ===== */
+
+        function renderFeriados() {
+            const container = document.getElementById("feriados");
+
+            container.innerHTML = `
+                <div class="feriados-header">FERIADOS 🎉</div>
+            `;
+
+            feriadosData.forEach(f => {
+                container.innerHTML += `
+                    <div class="feriado">
+                        <span class="dot"></span>
+                        <span>${f.texto}</span>
+                    </div>
+                `;
+            });
+        }
+
+        /* ===== INICIAR ===== */
+
+        renderCalendario();
+        renderCalendarioGrande();
+        renderAgenda();
+        renderFeriados();
+    </script>
+
 </body>
 
 </html>
\ No newline at end of file
diff --git a/imagens/engrenagem.png b/imagens/engrenagem.png
new file mode 100644
index 0000000..108ff43
Binary files /dev/null and b/imagens/engrenagem.png differ
diff --git a/imagens/sino.png b/imagens/sino.png
new file mode 100644
index 0000000..75756e5
Binary files /dev/null and b/imagens/sino.png differ