diff --git a/src/app/components/footer/footer.component.html b/src/app/components/footer/footer.component.html
new file mode 100644
index 0000000..e38c5e3
--- /dev/null
+++ b/src/app/components/footer/footer.component.html
@@ -0,0 +1,19 @@
+<!-- FOOTER -->
+<footer class="footer">
+    <div class="footer-content">
+      <div class="footer-left">
+        <i class="pi pi-building"></i>
+        <div class="footer-text">
+          <div>Superintendencia de Servicios Sanitarios</div>
+          <div>Área de Información y Tecnologías</div>
+        </div>
+      </div>
+      <div class="footer-center">
+        <img src="img/footer-logo.jpg" alt="SISS Logo" class="footer-logo">
+      </div>
+      <div class="footer-right">
+        <div>Dirección: Moneda 673 Piso 9 - Metro Santa Lucía</div>
+        <div>Mesa Central: 2 2382 4000</div>
+      </div>
+    </div>
+  </footer>
\ No newline at end of file
diff --git a/src/app/components/footer/footer.component.scss b/src/app/components/footer/footer.component.scss
new file mode 100644
index 0000000..1138784
--- /dev/null
+++ b/src/app/components/footer/footer.component.scss
@@ -0,0 +1,50 @@
+/* Footer Styles */
+.footer {
+  background-color: #0088cc;
+  color: white;
+  padding: 1rem 2rem;
+}
+
+.footer-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.footer-left, .footer-right {
+  display: flex;
+  align-items: center;
+  font-size: 0.8rem;
+}
+
+.footer-left {
+  gap: 0.5rem;
+}
+
+.footer-text {
+  display: flex;
+  flex-direction: column;
+}
+
+.footer-logo {
+  height: 40px;
+}
+
+.footer-right {
+  flex-direction: column;
+  align-items: flex-end;
+}
+
+/* Responsive styles */
+@media screen and (max-width: 768px) {
+  .footer-content {
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .footer-right {
+    align-items: center;
+  }
+}
diff --git a/src/app/components/footer/footer.component.spec.ts b/src/app/components/footer/footer.component.spec.ts
new file mode 100644
index 0000000..3f93915
--- /dev/null
+++ b/src/app/components/footer/footer.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FooterComponent } from './footer.component';
+
+describe('FooterComponent', () => {
+  let component: FooterComponent;
+  let fixture: ComponentFixture<FooterComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [FooterComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(FooterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/components/footer/footer.component.ts b/src/app/components/footer/footer.component.ts
new file mode 100644
index 0000000..2e208c3
--- /dev/null
+++ b/src/app/components/footer/footer.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-footer',
+  imports: [],
+  templateUrl: './footer.component.html',
+  styleUrl: './footer.component.scss'
+})
+export class FooterComponent {
+
+}
diff --git a/src/app/components/sidebar/sidebar.component.scss b/src/app/components/sidebar/sidebar.component.scss
index 366dfe8..1babb91 100644
--- a/src/app/components/sidebar/sidebar.component.scss
+++ b/src/app/components/sidebar/sidebar.component.scss
@@ -64,6 +64,7 @@
   padding: 0.5rem 0;
   flex: 1;
   overflow-y: auto;
+  height: 100%;
 }
 
 .sidebar-menu {
diff --git a/src/app/pages/home/home.component.html b/src/app/pages/home/home.component.html
index 92d5847..cf83cdb 100644
--- a/src/app/pages/home/home.component.html
+++ b/src/app/pages/home/home.component.html
@@ -37,4 +37,56 @@
       </p>
     </p-accordionTab>
   </p-accordion>
-</div>
\ No newline at end of file
+
+  <p-accordion [multiple]="true">
+    <p-accordionTab header="Header I" [selected]="true">
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+        laborum.
+      </p>
+    </p-accordionTab>
+
+    <p-accordionTab header="Header II">
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua.
+      </p>
+    </p-accordionTab>
+
+    <p-accordionTab header="Header III">
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      </p>
+    </p-accordionTab>
+  </p-accordion>
+
+  <p-accordion [multiple]="true">
+    <p-accordionTab header="Header I" [selected]="true">
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+        laborum.
+      </p>
+    </p-accordionTab>
+
+    <p-accordionTab header="Header II">
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua.
+      </p>
+    </p-accordionTab>
+
+    <p-accordionTab header="Header III">
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      </p>
+    </p-accordionTab>
+  </p-accordion>
+</div>
+<!-- FOOTER -->
+<app-footer></app-footer>
\ No newline at end of file
diff --git a/src/app/pages/home/home.component.ts b/src/app/pages/home/home.component.ts
index ef3febf..7483095 100644
--- a/src/app/pages/home/home.component.ts
+++ b/src/app/pages/home/home.component.ts
@@ -4,13 +4,15 @@ import { CommonModule } from '@angular/common';
 // Importaciones de PrimeNG
 import { CardModule } from 'primeng/card';
 import { AccordionModule } from 'primeng/accordion';
+import { FooterComponent } from "../../components/footer/footer.component";
 @Component({
   selector: 'app-home',
   imports: [
     CommonModule,
     CardModule,
-    AccordionModule
-  ],
+    AccordionModule,
+    FooterComponent
+],
   standalone: true,
   templateUrl: './home.component.html',
   styleUrl: './home.component.scss'
diff --git a/src/app/pages/login/login.component.html b/src/app/pages/login/login.component.html
index e4e5391..7d5e82b 100644
--- a/src/app/pages/login/login.component.html
+++ b/src/app/pages/login/login.component.html
@@ -1,44 +1,18 @@
 <!-- Header container -->
-<!-- <div class="header">
-    <div class="header-content">
-      <img src="img/header2.jpg" alt="SISS Logo" class="siss-logo">
+
+<div class="header-container">
+  <div class="header-image">
+    <div class="water-drop-container">
       <img src="img/gota.png" alt="gota" class="water-drop">
-      <div class="sacg-container">
-        <div class="sacg-title">
-          <span>SACG</span>
-          <div class="version-badge">1.0</div>
-        </div>
-        <div class="sacg-subtitle">Sistema Administrador de Cronogramas</div>
-      </div>
+      <div class="text-drop">1.0</div>
     </div>
-  </div> -->
-
-  <!-- <div class="header-container">
-    <div class="header-image" style="background-image: url('img/header2.jpg'); height: 190px;" >
-      <div  class="text-drop text-center" style="background-image: url('img/gota.png'); height: 60px;width: 41px;">1.0</div>
-      <div class="sacg-container">
-        <div class="sacg-title">
-          <span>SACG</span>
-          <div class="version-badge">1.0</div>
-        </div>
-        <div class="sacg-subtitle">Sistema Administrador de Cronogramas</div>
-      </div>
-    </div>
-  </div> -->
-
-  <div class="header-container">
-    <div class="header-image" style="background-image: url('img/header2.jpg'); height: 190px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative;">
-      
-      <div class="text-drop" style="background-image: url('img/gota.png'); height: 60px; width: 41px; display: flex; align-items: center; justify-content: center; color: white; top: 33%;left: 47.7%;">1.0</div>
-      
-      <div class="sacg-container" style="text-align: center;z-index: 2;">
-        <div class="main-title">SACG</div>
-        <div class="sub-title">Sistema Administrador de Cronogramas</div>
-      </div>
-  
+    <div class="header-text">
+      <div class="sub-title">Sistema Administrador de Cronogramas</div>
     </div>
   </div>
-  
+</div>
+
+
 
   <!-- MAIN CONTENT -->
   <main class="main-content">
@@ -73,7 +47,7 @@
 
           <!-- Password -->
           <div class="p-input-icon-left mb-4">
-            <i class="pi pi-lock"></i>
+            <!-- <i class="pi pi-lock"></i> -->
             <input 
               type="password" 
               pInputText 
@@ -129,23 +103,5 @@
   </div>
 </main>
 
-  
   <!-- FOOTER -->
-  <footer class="footer">
-    <div class="footer-content">
-      <div class="footer-left">
-        <i class="pi pi-building"></i>
-        <div class="footer-text">
-          <div>Superintendencia de Servicios Sanitarios</div>
-          <div>Área de Información y Tecnologías</div>
-        </div>
-      </div>
-      <div class="footer-center">
-        <img src="assets/img/siss-logo-white.png" alt="SISS Logo" class="footer-logo">
-      </div>
-      <div class="footer-right">
-        <div>Dirección: Moneda 673 Piso 9 - Metro Santa Lucía</div>
-        <div>Mesa Central: 2 2382 4000</div>
-      </div>
-    </div>
-  </footer>
\ No newline at end of file
+  <app-footer></app-footer>
\ No newline at end of file
diff --git a/src/app/pages/login/login.component.scss b/src/app/pages/login/login.component.scss
index a22805f..8ac01a9 100644
--- a/src/app/pages/login/login.component.scss
+++ b/src/app/pages/login/login.component.scss
@@ -1,270 +1,268 @@
 :host {
-    display: flex;
-    flex-direction: column;
-    min-height: 100vh;
-  }
-  
-  /* Header Styles */
-  .header {
-    background-color: #d3e9f7;
-    padding: 1rem 3rem;
-    display: flex;
-    align-items: center;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
-  }
-  
-  .header-content {
-    display: flex;
-    align-items: center;
-    gap: 2rem;
-    width: 100%;
-    max-width: 1200px;
-    margin: 0 auto;
-  }
-  
-  .siss-logo {
-    height: 60px;
-  }
-  
-  .sacg-container {
-    display: flex;
-    flex-direction: column;
-  }
-  
-  .sacg-title {
-    display: flex;
-    align-items: center;
-    font-size: 2.5rem;
-    font-weight: bold;
-    color: #0a2847;
-    position: relative;
-  }
-  
-  .version-badge {
-    background-color: #0088cc;
-    color: white;
-    border-radius: 50%;
-    padding: 0.1rem 0.4rem;
-    font-size: 0.8rem;
-    position: absolute;
-    top: 0;
-    right: -1.5rem;
-  }
-  
-  .sacg-subtitle {
-    font-size: 1.2rem;
-    color: #0a2847;
-  }
-  
-  /* Main Content Styles */
-  .main-content {
-    flex: 1;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background-color: #f0f0f0;
-    background-size: cover;
-    background-position: center;
-    position: relative;
-  }
-  
-  .main-content::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: rgba(240, 240, 240, 0.7);
-  }
-  
-  .login-container {
-    position: relative;
-    z-index: 10;
-  }
-  
-  .login-box {
-    width: 360px;
-    max-width: 100%;
-  }
-  
-  .login-card {
-    background-color: white;
-    border-radius: 4px;
-    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-    overflow: hidden;
-  }
-  
-  .login-header {
-    padding: 1rem;
-    text-align: center;
-    border-bottom: 1px solid #e0e0e0;
-  }
-  
-  .login-header h2 {
-    margin: 0;
-    font-size: 1.2rem;
-    font-weight: normal;
-    color: #666;
-  }
-  
-  .login-card form {
-    padding: 1.5rem;
-  }
-  
-  .p-inputgroup-addon {
-    background-color: #f0f0f0;
-    border-color: #ced4da;
-  }
-  
-  .login-actions {
-    display: flex;
-    justify-content: flex-end;
-    margin-top: 1rem;
-  }
-  
-  .p-button-primary {
-    background-color: #0088cc;
-    border-color: #0088cc;
-  }
-  
-  .password-recovery {
-    padding: 0 1.5rem 1.5rem;
-    text-align: left;
-  }
-  
-  .password-recovery a {
-    color: #0088cc;
-    text-decoration: none;
-    font-size: 0.9rem;
-  }
-  
-  .password-recovery a:hover {
-    text-decoration: underline;
-  }
-  
-  /* Footer Styles */
-  .footer {
-    background-color: #0088cc;
-    color: white;
-    padding: 1rem 2rem;
-  }
-  
-  .footer-content {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    max-width: 1200px;
-    margin: 0 auto;
-  }
-  
-  .footer-left, .footer-right {
-    display: flex;
-    align-items: center;
-    font-size: 0.8rem;
-  }
-  
-  .footer-left {
-    gap: 0.5rem;
-  }
-  
-  .footer-text {
-    display: flex;
-    flex-direction: column;
-  }
-  
-  .footer-logo {
-    height: 40px;
-  }
-  
-  .footer-right {
-    flex-direction: column;
-    align-items: flex-end;
-  }
-  
-  /* Responsive styles */
-  @media screen and (max-width: 768px) {
-    .header-content {
-      flex-direction: column;
-      gap: 1rem;
-    }
-    
-    .footer-content {
-      flex-direction: column;
-      gap: 1rem;
-    }
-    
-    .footer-right {
-      align-items: center;
-    }
-  }
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
 
-  .login-page-custom {
-    -ms-flex-align: center !important; 
-    align-items: center !important;
-    background-color: #e9ecef !important;
-    display: -ms-flexbox !important;
-    display: flex !important;
-    -ms-flex-direction: column !important;
-    flex-direction: column !important;
-    height: calc(100vh - 250px) !important;
-    -ms-flex-pack: center !important;
-    justify-content: center !important;
+/* Header Styles */
+.header {
+  background-color: #d3e9f7;
+  padding: 1rem 3rem;
+  display: flex;
+  align-items: center;
+  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+}
+
+.header-content {
+  display: flex;
+  align-items: center;
+  gap: 2rem;
+  width: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.siss-logo {
+  height: 60px;
+}
+
+.sacg-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.sacg-title {
+  display: flex;
+  align-items: center;
+  font-size: 2.5rem;
+  font-weight: bold;
+  color: #0a2847;
+  position: relative;
+}
+
+.version-badge {
+  background-color: #0088cc;
+  color: white;
+  border-radius: 50%;
+  padding: 0.1rem 0.4rem;
+  font-size: 0.8rem;
+  position: absolute;
+  top: 0;
+  right: -1.5rem;
+}
+
+.sacg-subtitle {
+  font-size: 1.2rem;
+  color: #0a2847;
+}
+
+/* Main Content Styles */
+.main-content {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #f0f0f0;
+  background-size: cover;
+  background-position: center;
+  position: relative;
+}
+
+.main-content::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(240, 240, 240, 0.7);
+}
+
+.login-container {
+  position: relative;
+  z-index: 10;
+}
+
+.login-box {
+  width: 360px;
+  max-width: 100%;
+}
+
+.login-card {
+  background-color: white;
+  border-radius: 4px;
+  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+  overflow: hidden;
+}
+
+.login-header {
+  padding: 1rem;
+  text-align: center;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.login-header h2 {
+  margin: 0;
+  font-size: 1.2rem;
+  font-weight: normal;
+  color: #666;
+}
+
+.login-card form {
+  padding: 1.5rem;
+}
+
+.p-inputgroup-addon {
+  background-color: #f0f0f0;
+  border-color: #ced4da;
+}
+
+.login-actions {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 1rem;
+}
+
+.p-button-primary {
+  background-color: #0088cc;
+  border-color: #0088cc;
+}
+
+.password-recovery {
+  padding: 0 1.5rem 1.5rem;
+  text-align: left;
+}
+
+.password-recovery a {
+  color: #0088cc;
+  text-decoration: none;
+  font-size: 0.9rem;
+}
+
+.password-recovery a:hover {
+  text-decoration: underline;
+}
+
+/* Responsive styles */
+@media screen and (max-width: 768px) {
+  .header-content {
+    flex-direction: column;
+    gap: 1rem;
   }
-  
-  .header-container {
-      position: relative;
-      width: 100%;
-      height: 190px; /* Ajusta según la altura de tu imagen */
-      overflow: hidden;
-    }
-    
-    .water-drop {
-      position: absolute;
-      height: 45px; /* Ajusta el tamaño de la gota */
-      width: auto;
-      top: 30%; /* Posiciona verticalmente */
-      left: 47%; /* Posiciona horizontalmente */
-      transform: translateY(-50%); /* Centrado vertical preciso */
-      z-index: 2; /* Asegura que esté sobre la imagen de fondo */
-    }
-    .text-drop {
-      color: #fff;
-      position: absolute;
-      width: auto;
-      top: 33%; /* Posiciona verticalmente */
-      left: 47.3%; /* Posiciona horizontalmente */
-      transform: translateY(-50%); /* Centrado vertical preciso */
-      z-index: 2; /* Asegura que esté sobre la imagen de fondo */
-    }
-    .header-text {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      color: #002147; /* Ajusta el color según tu imagen */
-      text-align: center;
-      padding: 0px;
-      box-sizing: border-box;
-    }
-    
-    .main-title {
-      margin-top: 0px;
-      margin-right: 250px;
-      font-size: 4rem;
-      font-weight: bold;
-      margin-bottom: 10px;
-      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
-    }
-    
-    .sub-title {
-      font-size: 1.5rem;
-      margin-bottom: 6    0px;
-      text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
-    }
-  
\ No newline at end of file
+}
+
+.login-page-custom {
+  -ms-flex-align: center !important; 
+  align-items: center !important;
+  background-color: #e9ecef !important;
+  display: -ms-flexbox !important;
+  display: flex !important;
+  -ms-flex-direction: column !important;
+  flex-direction: column !important;
+  height: calc(100vh - 250px) !important;
+  -ms-flex-pack: center !important;
+  justify-content: center !important;
+}
+
+.header-container {
+  position: relative;
+  width: 100%;
+  height: 190px;
+  overflow: hidden;
+}
+
+.water-drop {
+  position: absolute;
+  height: 45px;
+  width: auto;
+  top: 30%;
+  left: 47%;
+  transform: translateY(-50%);
+  z-index: 2;
+}
+
+.text-drop {
+  color: #fff;
+  position: absolute;
+  width: auto;
+  top: 33%;
+  left: 47.3%;
+  transform: translateY(-50%);
+  z-index: 2;
+}
+
+.header-text {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: #002147;
+  text-align: center;
+  padding: 0px;
+  box-sizing: border-box;
+}
+
+.main-title {
+  margin-top: 0px;
+  margin-right: 250px;
+  font-size: 4rem;
+  font-weight: bold;
+  margin-bottom: 10px;
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+}
+
+.sub-title {
+  font-size: 1.8rem;
+  margin-bottom: 60px;
+  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
+  transform: translate(-4%);
+}
+
+.header-image {
+  position: relative;
+  width: 100%;
+  height: 250px;
+  background-image: url('/img/header2.jpg');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.water-drop-container {
+  position: absolute;
+  top: 30%;
+  left: 49%;
+  transform: translate(-50%, -50%);
+  width: 41px;
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.water-drop {
+  position: absolute;
+  width: 41px;
+  height: 60px;
+}
+
+.text-drop {
+  position: relative;
+  color: white;
+  top: 20%;
+  font-weight: bold;
+  font-size: 1.2rem;
+  z-index: 2;
+  pointer-events: none;
+}
+
+.header-text {
+  position: absolute;
+  bottom: 20px;
+  left: 20px;
+}
diff --git a/src/app/pages/login/login.component.ts b/src/app/pages/login/login.component.ts
index cb5ab41..49197c4 100644
--- a/src/app/pages/login/login.component.ts
+++ b/src/app/pages/login/login.component.ts
@@ -8,6 +8,7 @@ import { InputTextModule } from 'primeng/inputtext';
 import { ButtonModule } from 'primeng/button';
 import { PasswordModule } from 'primeng/password';
 import { DividerModule } from 'primeng/divider';
+import { FooterComponent } from "../../components/footer/footer.component";
 
 @Component({
   selector: 'app-login',
@@ -18,8 +19,9 @@ import { DividerModule } from 'primeng/divider';
     InputTextModule,
     ButtonModule,
     PasswordModule,
-    DividerModule
-  ],
+    DividerModule,
+    FooterComponent
+],
   templateUrl: './login.component.html',
   styleUrl: './login.component.scss'
 })