diff --git a/src/assets/scss/components/_responsive.scss b/src/assets/scss/components/_responsive.scss
new file mode 100644
index 0000000..f7514c7
--- /dev/null
+++ b/src/assets/scss/components/_responsive.scss
@@ -0,0 +1,271 @@
+/* Utilitários responsivos para melhorar a experiência em diferentes dispositivos */
+
+/* Breakpoints personalizados */
+$mobile: 576px;
+$tablet: 768px;
+$desktop-small: 992px;
+$desktop: 1200px;
+$desktop-large: 1400px;
+
+/* Utilitários de texto responsivo */
+.text-responsive {
+  @media screen and (max-width: $tablet - 1) {
+    font-size: 0.9rem !important;
+  }
+  
+  @media screen and (max-width: $mobile - 1) {
+    font-size: 0.85rem !important;
+  }
+}
+
+.heading-responsive {
+  @media screen and (max-width: $desktop - 1) {
+    font-size: 1.5rem !important;
+  }
+  
+  @media screen and (max-width: $tablet - 1) {
+    font-size: 1.3rem !important;
+  }
+  
+  @media screen and (max-width: $mobile - 1) {
+    font-size: 1.1rem !important;
+  }
+}
+
+/* Cards responsivos */
+.card-responsive {
+  @media screen and (max-width: $tablet - 1) {
+    margin-bottom: 1rem;
+  }
+  
+  .card-body {
+    @media screen and (max-width: $tablet - 1) {
+      padding: 1rem;
+    }
+    
+    @media screen and (max-width: $mobile - 1) {
+      padding: 0.75rem;
+    }
+  }
+}
+
+/* Botões responsivos */
+.btn-responsive {
+  @media screen and (max-width: $tablet - 1) {
+    padding: 0.5rem 1rem;
+    font-size: 0.9rem;
+  }
+  
+  @media screen and (max-width: $mobile - 1) {
+    padding: 0.6rem 1.2rem;
+    font-size: 0.85rem;
+    width: 100%;
+    max-width: 200px;
+  }
+}
+
+/* Tabelas responsivas */
+.table-responsive-custom {
+  @media screen and (max-width: $desktop - 1) {
+    font-size: 0.9rem;
+  }
+  
+  @media screen and (max-width: $tablet - 1) {
+    font-size: 0.8rem;
+    
+    th, td {
+      padding: 0.5rem !important;
+    }
+  }
+  
+  @media screen and (max-width: $mobile - 1) {
+    font-size: 0.75rem;
+    
+    th, td {
+      padding: 0.3rem !important;
+    }
+  }
+}
+
+/* Formulários responsivos */
+.form-responsive {
+  .form-control {
+    @media screen and (max-width: $tablet - 1) {
+      font-size: 0.9rem;
+      padding: 0.5rem 0.75rem;
+    }
+    
+    @media screen and (max-width: $mobile - 1) {
+      font-size: 0.85rem;
+      padding: 0.6rem 0.8rem;
+    }
+  }
+  
+  .form-label {
+    @media screen and (max-width: $tablet - 1) {
+      font-size: 0.9rem;
+      margin-bottom: 0.3rem;
+    }
+    
+    @media screen and (max-width: $mobile - 1) {
+      font-size: 0.85rem;
+      margin-bottom: 0.25rem;
+    }
+  }
+}
+
+/* Navegação responsiva */
+.nav-responsive {
+  @media screen and (max-width: $tablet - 1) {
+    .nav-link {
+      padding: 0.5rem 0.75rem;
+      font-size: 0.9rem;
+    }
+  }
+  
+  @media screen and (max-width: $mobile - 1) {
+    .nav-link {
+      padding: 0.6rem 0.8rem;
+      font-size: 0.85rem;
+    }
+  }
+}
+
+/* Modais responsivos */
+.modal-responsive {
+  @media screen and (max-width: $tablet - 1) {
+    .modal-dialog {
+      margin: 1rem;
+      max-width: calc(100% - 2rem);
+    }
+    
+    .modal-header {
+      padding: 1rem;
+      
+      .modal-title {
+        font-size: 1.1rem;
+      }
+    }
+    
+    .modal-body {
+      padding: 1rem;
+      font-size: 0.9rem;
+    }
+    
+    .modal-footer {
+      padding: 0.75rem 1rem;
+    }
+  }
+  
+  @media screen and (max-width: $mobile - 1) {
+    .modal-dialog {
+      margin: 0.5rem;
+      max-width: calc(100% - 1rem);
+    }
+    
+    .modal-header {
+      padding: 0.75rem;
+      
+      .modal-title {
+        font-size: 1rem;
+      }
+    }
+    
+    .modal-body {
+      padding: 0.75rem;
+      font-size: 0.85rem;
+    }
+    
+    .modal-footer {
+      padding: 0.5rem 0.75rem;
+    }
+  }
+}
+
+/* Utilitários de espaçamento responsivo */
+.spacing-responsive {
+  @media screen and (max-width: $desktop - 1) {
+    margin: 1.5rem 0 !important;
+  }
+  
+  @media screen and (max-width: $tablet - 1) {
+    margin: 1rem 0 !important;
+  }
+  
+  @media screen and (max-width: $mobile - 1) {
+    margin: 0.75rem 0 !important;
+  }
+}
+
+/* Container responsivo personalizado */
+.container-responsive {
+  @media screen and (min-width: $desktop-large) {
+    max-width: 1320px;
+  }
+  
+  @media screen and (min-width: $desktop) and (max-width: $desktop-large - 1) {
+    max-width: 1140px;
+  }
+  
+  @media screen and (min-width: $desktop-small) and (max-width: $desktop - 1) {
+    max-width: 960px;
+  }
+  
+  @media screen and (min-width: $tablet) and (max-width: $desktop-small - 1) {
+    max-width: 720px;
+  }
+  
+  @media screen and (max-width: $tablet - 1) {
+    padding: 0 1rem;
+  }
+  
+  @media screen and (max-width: $mobile - 1) {
+    padding: 0 0.5rem;
+  }
+}
+
+/* Ocultar/mostrar elementos por breakpoint */
+.hide-mobile {
+  @media screen and (max-width: $tablet - 1) {
+    display: none !important;
+  }
+}
+
+.hide-tablet {
+  @media screen and (min-width: $tablet) and (max-width: $desktop - 1) {
+    display: none !important;
+  }
+}
+
+.hide-desktop {
+  @media screen and (min-width: $desktop) {
+    display: none !important;
+  }
+}
+
+.show-mobile-only {
+  display: none !important;
+  
+  @media screen and (max-width: $tablet - 1) {
+    display: block !important;
+  }
+}
+
+.show-tablet-only {
+  display: none !important;
+  
+  @media screen and (min-width: $tablet) and (max-width: $desktop - 1) {
+    display: block !important;
+  }
+}
+
+/* Ajustes específicos para touch devices */
+@media (hover: none) and (pointer: coarse) {
+  .btn, .sidebar-link, .nav-link {
+    min-height: 44px; /* Tamanho mínimo recomendado para touch */
+  }
+  
+  .form-control {
+    min-height: 44px;
+  }
+}
diff --git a/src/assets/scss/components/_sidebar.scss b/src/assets/scss/components/_sidebar.scss
index e809752..cf66428 100644
--- a/src/assets/scss/components/_sidebar.scss
+++ b/src/assets/scss/components/_sidebar.scss
@@ -1,9 +1,10 @@
-@mixin sidebar-active {
+@mixin sidebar-active($sidebar-width: 300px) {
     .sidebar-wrapper {
         left: 0;
+        width: $sidebar-width;
     }
     & ~ #main {
-        margin-left: 300px;
+        margin-left: $sidebar-width;
     }
 }
 @mixin sidebar-inactive {
@@ -17,9 +18,37 @@
 
 #sidebar {
     @include sidebar-inactive();
-    
-    @media screen and (min-width: 1200px) {
-        @include sidebar-active();
+
+    // Desktop grande (1920px+)
+    @media screen and (min-width: 1400px) {
+        @include sidebar-active(300px);
+    }
+
+    // Desktop padrão (1200px-1399px)
+    @media screen and (min-width: 1200px) and (max-width: 1399px) {
+        @include sidebar-active(280px);
+    }
+
+    // Tablet grande (992px-1199px)
+    @media screen and (min-width: 992px) and (max-width: 1199px) {
+        @include sidebar-active(260px);
+    }
+
+    // Tablet (768px-991px) - sidebar colapsada por padrão
+    @media screen and (min-width: 768px) and (max-width: 991px) {
+        @include sidebar-inactive();
+
+        &.active {
+            .sidebar-wrapper {
+                left: 0;
+                width: 280px;
+                z-index: 1050;
+                box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
+            }
+            & ~ #main {
+                margin-left: 0;
+            }
+        }
     }
 
     &.inactive {
@@ -31,7 +60,7 @@
             left: 0;
         }
     }
-    
+
 }
 .sidebar-wrapper {
     width: 300px;
@@ -42,21 +71,56 @@
     overflow-y: auto;
     background-color: $sidebar-bg;
     bottom: 0;
-    transition: left .7s cubic-bezier(0.22, 1, 0.36, 1);
+    transition: left .7s cubic-bezier(0.22, 1, 0.36, 1), width .3s ease;
+
+    // Responsividade da largura
+    @media screen and (min-width: 1200px) and (max-width: 1399px) {
+        width: 280px;
+    }
+
+    @media screen and (min-width: 992px) and (max-width: 1199px) {
+        width: 260px;
+    }
+
+    @media screen and (max-width: 991px) {
+        width: 280px;
+        z-index: 1050;
+    }
+
     .sidebar-header {
-        padding: 2rem 2rem 1rem;
-        font-size: 2rem;
+        padding: 2rem 1.5rem 1rem;
+        font-size: 1.8rem;
         font-weight: bold;
 
+        // Responsividade do header
+        @media screen and (max-width: 1199px) {
+            padding: 1.5rem 1rem 0.5rem;
+            font-size: 1.6rem;
+        }
+
+        @media screen and (max-width: 767px) {
+            padding: 1rem 1rem 0.5rem;
+            font-size: 1.4rem;
+        }
+
         img {
             height: 1.2rem;
+
+            @media screen and (max-width: 767px) {
+                height: 1rem;
+            }
         }
     }
     .sidebar-toggler.x {
         position: absolute;
         right: 1.75rem;
         top: .25rem;
-        display:none;
+        display: none;
+
+        @media screen and (max-width: 991px) {
+            right: 1rem;
+            top: 0.5rem;
+        }
     }
 
     .menu {
@@ -64,6 +128,18 @@
         margin-top: 2rem;
         padding: 0 2rem;
         font-weight: 600;
+
+        // Responsividade do menu
+        @media screen and (max-width: 1199px) {
+            padding: 0 1.5rem;
+            margin-top: 1.5rem;
+        }
+
+        @media screen and (max-width: 767px) {
+            padding: 0 1rem;
+            margin-top: 1rem;
+        }
+
         .sidebar-title {
             padding: 0 1rem;
             margin: 1.5rem 0 1rem;
@@ -71,8 +147,20 @@
             list-style: none;
             font-weight: 600;
             color:  $sidebar-link-color;
+
+            @media screen and (max-width: 1199px) {
+                margin: 1rem 0 0.5rem;
+                font-size: 0.9rem;
+                padding: 0 0.5rem;
+            }
+
+            @media screen and (max-width: 767px) {
+                margin: 0.8rem 0 0.4rem;
+                font-size: 0.85rem;
+                padding: 0 0.3rem;
+            }
         }
-        
+
         .sidebar-link {
             display: block;
             padding: .7rem 1rem;
@@ -83,14 +171,39 @@
             transition: all .5s;
             text-decoration: none;
             color: $sidebar-link-color;
+
+            // Responsividade dos links
+            @media screen and (max-width: 1199px) {
+                padding: 0.6rem 0.8rem;
+                font-size: 0.9rem;
+            }
+
+            @media screen and (max-width: 767px) {
+                padding: 0.8rem 0.6rem;
+                font-size: 0.85rem;
+            }
+
             svg,i {
                 color:#7c8db5;
+                flex-shrink: 0;
+
+                @media screen and (max-width: 767px) {
+                    font-size: 1.1em;
+                }
             }
             i:before {
                 vertical-align: top;
             }
             span {
                 margin-left: 1rem;
+
+                @media screen and (max-width: 1199px) {
+                    margin-left: 0.8rem;
+                }
+
+                @media screen and (max-width: 767px) {
+                    margin-left: 0.6rem;
+                }
             }
             &:hover {
                 background-color: $sidebar-link-hover-bg;
@@ -192,15 +305,80 @@
     background-color: rgba(0, 0, 0, 0.5);
     z-index: 9;
 }
+// Media queries para diferentes dispositivos
 @media screen and (max-width: 1199px) {
     .sidebar-wrapper {
         position: fixed;
         left: -300px;
         .sidebar-toggler.x  {
-            display:block;
+            display: block;
         }
     }
 }
+
+// Tablet específico
+@media screen and (min-width: 768px) and (max-width: 991px) {
+    .sidebar-wrapper {
+        left: -280px;
+
+        .menu {
+            .sidebar-link {
+                padding: 0.7rem 0.8rem;
+            }
+        }
+    }
+
+    #sidebar.active ~ #main {
+        margin-left: 0 !important;
+    }
+}
+
+// Mobile específico
+@media screen and (max-width: 767px) {
+    .sidebar-wrapper {
+        left: -280px;
+        width: 280px !important;
+
+        .sidebar-header {
+            .logo h1 {
+                font-size: 1.3rem;
+            }
+        }
+
+        .menu {
+            .sidebar-link {
+                padding: 0.9rem 0.7rem;
+
+                span {
+                    font-size: 0.9rem;
+                }
+            }
+
+            .submenu {
+                .submenu-item a {
+                    padding: 0.6rem 1.5rem;
+                    font-size: 0.8rem;
+                }
+            }
+        }
+    }
+
+    #sidebar.active ~ #main {
+        margin-left: 0 !important;
+    }
+
+    // Backdrop para mobile
+    #sidebar.active::before {
+        content: '';
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100vw;
+        height: 100vh;
+        background-color: rgba(0, 0, 0, 0.5);
+        z-index: 1040;
+    }
+}
 @keyframes slideDown {
     from {
         max-height: 0;
@@ -264,4 +442,4 @@ html[data-bs-theme="dark"] {
     .sidebar-backdrop {
         background-color: rgba(0, 0, 0, 0.7) !important;
     }
-}
\ No newline at end of file
+}
diff --git a/src/assets/scss/components/_tables-responsive.scss b/src/assets/scss/components/_tables-responsive.scss
new file mode 100644
index 0000000..e569e73
--- /dev/null
+++ b/src/assets/scss/components/_tables-responsive.scss
@@ -0,0 +1,338 @@
+/* Melhorias de responsividade para tabelas e componentes de dados */
+
+/* Tabelas responsivas melhoradas */
+.table-responsive-enhanced {
+  @media screen and (max-width: 1199px) {
+    font-size: 0.9rem;
+    
+    th, td {
+      padding: 0.6rem 0.5rem !important;
+    }
+  }
+  
+  @media screen and (max-width: 991px) {
+    font-size: 0.85rem;
+    
+    th, td {
+      padding: 0.5rem 0.4rem !important;
+    }
+    
+    /* Ocultar colunas menos importantes em tablet */
+    .hide-tablet {
+      display: none !important;
+    }
+  }
+  
+  @media screen and (max-width: 767px) {
+    font-size: 0.8rem;
+    
+    th, td {
+      padding: 0.4rem 0.3rem !important;
+    }
+    
+    /* Ocultar mais colunas em mobile */
+    .hide-mobile {
+      display: none !important;
+    }
+    
+    /* Estilo de card para mobile */
+    &.table-card-mobile {
+      thead {
+        display: none;
+      }
+      
+      tbody tr {
+        display: block;
+        border: 1px solid #dee2e6;
+        border-radius: 0.375rem;
+        margin-bottom: 1rem;
+        padding: 0.75rem;
+        background: white;
+        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
+      }
+      
+      tbody td {
+        display: block;
+        border: none;
+        padding: 0.25rem 0 !important;
+        text-align: left !important;
+        
+        &:before {
+          content: attr(data-label) ": ";
+          font-weight: bold;
+          color: #495057;
+        }
+        
+        &:last-child {
+          border-bottom: none;
+        }
+      }
+    }
+  }
+  
+  @media screen and (max-width: 576px) {
+    font-size: 0.75rem;
+    
+    th, td {
+      padding: 0.3rem 0.2rem !important;
+    }
+  }
+}
+
+/* Cards responsivos para dados */
+.data-card-responsive {
+  @media screen and (max-width: 991px) {
+    margin-bottom: 1rem;
+    
+    .card-header {
+      padding: 0.75rem 1rem;
+      
+      h5, h6 {
+        font-size: 1rem;
+        margin-bottom: 0;
+      }
+    }
+    
+    .card-body {
+      padding: 1rem;
+    }
+  }
+  
+  @media screen and (max-width: 767px) {
+    .card-header {
+      padding: 0.5rem 0.75rem;
+      
+      h5, h6 {
+        font-size: 0.9rem;
+      }
+    }
+    
+    .card-body {
+      padding: 0.75rem;
+      font-size: 0.9rem;
+    }
+  }
+  
+  @media screen and (max-width: 576px) {
+    .card-header {
+      padding: 0.5rem;
+      
+      h5, h6 {
+        font-size: 0.85rem;
+      }
+    }
+    
+    .card-body {
+      padding: 0.5rem;
+      font-size: 0.85rem;
+    }
+  }
+}
+
+/* Paginação responsiva */
+.pagination-responsive {
+  @media screen and (max-width: 767px) {
+    .page-item {
+      &:not(.active):not(.disabled) {
+        &:nth-child(n+4):nth-last-child(n+4) {
+          display: none;
+        }
+      }
+    }
+    
+    .page-link {
+      padding: 0.5rem 0.75rem;
+      font-size: 0.875rem;
+    }
+  }
+  
+  @media screen and (max-width: 576px) {
+    justify-content: center;
+    
+    .page-item {
+      &:not(.active):not(.disabled) {
+        &:nth-child(n+3):nth-last-child(n+3) {
+          display: none;
+        }
+      }
+    }
+    
+    .page-link {
+      padding: 0.4rem 0.6rem;
+      font-size: 0.8rem;
+    }
+  }
+}
+
+/* Filtros e controles responsivos */
+.filters-responsive {
+  @media screen and (max-width: 991px) {
+    .row {
+      margin-bottom: 1rem;
+    }
+    
+    .col-md-3, .col-md-4, .col-md-6 {
+      margin-bottom: 0.5rem;
+    }
+  }
+  
+  @media screen and (max-width: 767px) {
+    .form-control, .form-select {
+      font-size: 0.9rem;
+      padding: 0.5rem 0.75rem;
+    }
+    
+    .btn {
+      font-size: 0.9rem;
+      padding: 0.5rem 1rem;
+      width: 100%;
+      margin-bottom: 0.5rem;
+    }
+  }
+  
+  @media screen and (max-width: 576px) {
+    .form-control, .form-select {
+      font-size: 0.85rem;
+      padding: 0.6rem 0.8rem;
+    }
+    
+    .btn {
+      font-size: 0.85rem;
+      padding: 0.6rem 1rem;
+    }
+  }
+}
+
+/* Stats cards responsivos */
+.stats-card-responsive {
+  @media screen and (max-width: 1199px) {
+    .card-body {
+      padding: 1.25rem 1rem;
+    }
+    
+    h3, h4 {
+      font-size: 1.5rem;
+    }
+    
+    .stats-icon {
+      width: 3rem;
+      height: 3rem;
+    }
+  }
+  
+  @media screen and (max-width: 991px) {
+    margin-bottom: 1rem;
+    
+    .card-body {
+      padding: 1rem 0.75rem;
+    }
+    
+    h3, h4 {
+      font-size: 1.3rem;
+    }
+    
+    .stats-icon {
+      width: 2.5rem;
+      height: 2.5rem;
+    }
+  }
+  
+  @media screen and (max-width: 767px) {
+    .card-body {
+      padding: 0.75rem;
+      text-align: center;
+    }
+    
+    h3, h4 {
+      font-size: 1.2rem;
+    }
+    
+    .stats-icon {
+      width: 2rem;
+      height: 2rem;
+      margin: 0 auto 0.5rem;
+    }
+    
+    p, small {
+      font-size: 0.85rem;
+    }
+  }
+  
+  @media screen and (max-width: 576px) {
+    .card-body {
+      padding: 0.5rem;
+    }
+    
+    h3, h4 {
+      font-size: 1.1rem;
+    }
+    
+    .stats-icon {
+      width: 1.8rem;
+      height: 1.8rem;
+    }
+    
+    p, small {
+      font-size: 0.8rem;
+    }
+  }
+}
+
+/* Breadcrumb responsivo */
+.breadcrumb-responsive {
+  @media screen and (max-width: 767px) {
+    font-size: 0.85rem;
+    padding: 0.5rem 0;
+    
+    .breadcrumb-item {
+      &:not(:last-child) {
+        &:nth-child(n+2):nth-last-child(n+2) {
+          display: none;
+        }
+        
+        &:nth-last-child(2):before {
+          content: "... / ";
+        }
+      }
+    }
+  }
+  
+  @media screen and (max-width: 576px) {
+    font-size: 0.8rem;
+    
+    .breadcrumb-item {
+      &:not(:last-child):not(:first-child) {
+        display: none;
+      }
+      
+      &:first-child:not(:last-child):after {
+        content: " / ...";
+      }
+    }
+  }
+}
+
+/* Alertas responsivos */
+.alert-responsive {
+  @media screen and (max-width: 767px) {
+    padding: 0.75rem;
+    font-size: 0.9rem;
+    
+    .alert-heading {
+      font-size: 1.1rem;
+    }
+  }
+  
+  @media screen and (max-width: 576px) {
+    padding: 0.5rem;
+    font-size: 0.85rem;
+    
+    .alert-heading {
+      font-size: 1rem;
+    }
+    
+    .btn-close {
+      padding: 0.25rem;
+    }
+  }
+}
diff --git a/src/assets/scss/layouts/main.scss b/src/assets/scss/layouts/main.scss
index 33aff3b..236ef39 100644
--- a/src/assets/scss/layouts/main.scss
+++ b/src/assets/scss/layouts/main.scss
@@ -2,12 +2,41 @@
     margin-left: 300px;
     padding: 2rem;
     min-height: 100vh;
-    @media screen and (max-width: 1199px) {
-        margin-left: 0;
+    transition: margin-left .7s cubic-bezier(0.22, 1, 0.36, 1);
+
+    // Responsividade do layout principal
+    @media screen and (min-width: 1400px) {
+        margin-left: 300px;
+        padding: 2rem;
     }
+
+    @media screen and (min-width: 1200px) and (max-width: 1399px) {
+        margin-left: 280px;
+        padding: 1.5rem;
+    }
+
+    @media screen and (min-width: 992px) and (max-width: 1199px) {
+        margin-left: 260px;
+        padding: 1.5rem;
+    }
+
+    @media screen and (min-width: 768px) and (max-width: 991px) {
+        margin-left: 0;
+        padding: 1rem;
+    }
+
+    @media screen and (max-width: 767px) {
+        margin-left: 0;
+        padding: 1rem 0.5rem;
+    }
+
     &.layout-navbar {
         padding: 0;
-        transition: margin-left  .7s  cubic-bezier(0.22, 1, 0.36, 1)
+        transition: margin-left .7s cubic-bezier(0.22, 1, 0.36, 1);
+
+        @media screen and (max-width: 767px) {
+            padding: 0;
+        }
     }
     &.layout-horizontal {
         padding: 0;
@@ -15,6 +44,14 @@
     }
     #main-content {
         padding: 2rem;
+
+        @media screen and (max-width: 1199px) {
+            padding: 1.5rem;
+        }
+
+        @media screen and (max-width: 767px) {
+            padding: 1rem;
+        }
     }
 }
 #main, #main-content {
@@ -25,9 +62,26 @@
     flex-grow: 1;
 }
 .page-heading {
-    margin:  0 0 2rem;
+    margin: 0 0 2rem;
+
+    @media screen and (max-width: 1199px) {
+        margin: 0 0 1.5rem;
+    }
+
+    @media screen and (max-width: 767px) {
+        margin: 0 0 1rem;
+    }
+
     h3 {
         font-weight: bold;
+
+        @media screen and (max-width: 1199px) {
+            font-size: 1.5rem;
+        }
+
+        @media screen and (max-width: 767px) {
+            font-size: 1.3rem;
+        }
     }
 }
 .page-title-headings {
@@ -35,14 +89,30 @@
     align-items: center;
     justify-content: space-between;
     margin-bottom: .5rem;
+
+    @media screen and (max-width: 767px) {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.5rem;
+    }
+
     h3 {
         margin-bottom: 0;
         margin-right: 1rem;
+
+        @media screen and (max-width: 767px) {
+            margin-right: 0;
+            font-size: 1.2rem;
+        }
     }
     .breadcrumb {
         margin-bottom: 0;
+
+        @media screen and (max-width: 767px) {
+            font-size: 0.85rem;
+        }
     }
 }
 a {
     text-decoration: none;
-}
\ No newline at end of file
+}
diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss
index e41b0ed..8b4474f 100644
--- a/src/assets/scss/main.scss
+++ b/src/assets/scss/main.scss
@@ -38,6 +38,8 @@
 @import 'components/progress';
 @import 'components/sidebar';
 @import 'components/table';
+@import 'components/responsive';
+@import 'components/tables-responsive';
 
 // Layout (se tiver arquivos, mas você mencionou que só tem main.scss aqui)
 @import 'layouts/main';
diff --git a/src/assets/scss/pages/auth.scss b/src/assets/scss/pages/auth.scss
index 7e20eb2..4348916 100644
--- a/src/assets/scss/pages/auth.scss
+++ b/src/assets/scss/pages/auth.scss
@@ -13,7 +13,7 @@ body {
     }
     #auth-left {
         padding: 5rem;
-        
+
         .auth-title {
             font-size: 4rem;
             margin-bottom: 1rem;
@@ -30,13 +30,60 @@ body {
             }
         }
         @media screen and (max-width: 1399.9px) {
-            padding: 3rem ;
+            padding: 3rem;
+
+            .auth-title {
+                font-size: 3rem;
+            }
+            .auth-subtitle {
+                font-size: 1.4rem;
+                line-height: 2rem;
+            }
+            .auth-logo {
+                margin-bottom: 5rem;
+            }
+        }
+        @media screen and (max-width: 991px) {
+            padding: 2.5rem;
+
+            .auth-title {
+                font-size: 2.5rem;
+            }
+            .auth-subtitle {
+                font-size: 1.2rem;
+                line-height: 1.8rem;
+            }
+            .auth-logo {
+                margin-bottom: 3rem;
+            }
         }
         @media screen and (max-width: 767px) {
-            padding: 5rem ;
+            padding: 2rem;
+
+            .auth-title {
+                font-size: 2rem;
+            }
+            .auth-subtitle {
+                font-size: 1rem;
+                line-height: 1.5rem;
+            }
+            .auth-logo {
+                margin-bottom: 2rem;
+            }
         }
         @media screen and (max-width: 576px) {
-            padding: 5rem 3rem;
+            padding: 1.5rem 1rem;
+
+            .auth-title {
+                font-size: 1.8rem;
+            }
+            .auth-subtitle {
+                font-size: 0.9rem;
+                line-height: 1.4rem;
+            }
+            .auth-logo {
+                margin-bottom: 1.5rem;
+            }
         }
     }
 }
@@ -61,3 +108,60 @@ html[data-bs-theme="dark"] {
         }
     }
 }
+
+/* Melhorias específicas para responsividade do login */
+.card-position {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    padding: 1rem;
+
+    @media screen and (max-width: 768px) {
+        padding: 0.5rem;
+        align-items: flex-start;
+        padding-top: 2rem;
+    }
+
+    @media screen and (max-width: 576px) {
+        padding: 0.25rem;
+        padding-top: 1rem;
+    }
+
+    .card {
+        width: 100%;
+        max-width: 500px;
+
+        @media screen and (max-width: 576px) {
+            margin: 0;
+            border-radius: 0.5rem;
+        }
+    }
+}
+
+/* Melhorias para formulários de autenticação */
+.form-control-xl {
+    @media screen and (max-width: 768px) {
+        padding: 0.75rem 1rem;
+        font-size: 1rem;
+    }
+
+    @media screen and (max-width: 576px) {
+        padding: 0.8rem 1rem;
+        font-size: 0.9rem;
+    }
+}
+
+.btn-block {
+    @media screen and (max-width: 576px) {
+        padding: 0.8rem 1rem;
+        font-size: 1rem;
+    }
+}
+
+/* Ajustes para ícones em campos de formulário */
+.form-control-icon {
+    @media screen and (max-width: 576px) {
+        left: 0.8rem;
+    }
+}
diff --git a/src/components/MobileMenuToggle.jsx b/src/components/MobileMenuToggle.jsx
new file mode 100644
index 0000000..c9a90a0
--- /dev/null
+++ b/src/components/MobileMenuToggle.jsx
@@ -0,0 +1,86 @@
+import React from 'react';
+
+const MobileMenuToggle = ({ isOpen, onToggle, className = '' }) => {
+  return (
+    <button
+      type="button"
+      className={`mobile-menu-toggle btn btn-outline-primary d-lg-none ${className}`}
+      onClick={onToggle}
+      aria-label={isOpen ? 'Fechar menu' : 'Abrir menu'}
+      aria-expanded={isOpen}
+      style={{
+        position: 'fixed',
+        top: '1rem',
+        left: '1rem',
+        zIndex: 1060,
+        width: '3rem',
+        height: '3rem',
+        padding: 0,
+        border: '2px solid #435ebe',
+        borderRadius: '0.375rem',
+        backgroundColor: 'white',
+        boxShadow: '0 0.125rem 0.25rem rgba(0, 0, 0, 0.075)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        transition: 'all 0.3s ease'
+      }}
+    >
+      <div 
+        className="hamburger-icon"
+        style={{
+          width: '1.5rem',
+          height: '1.2rem',
+          position: 'relative',
+          transform: isOpen ? 'rotate(45deg)' : 'none',
+          transition: 'transform 0.3s ease'
+        }}
+      >
+        <span
+          style={{
+            display: 'block',
+            position: 'absolute',
+            height: '2px',
+            width: '100%',
+            backgroundColor: '#435ebe',
+            borderRadius: '1px',
+            opacity: isOpen ? 0 : 1,
+            left: 0,
+            top: '0.25rem',
+            transition: 'all 0.3s ease'
+          }}
+        />
+        <span
+          style={{
+            display: 'block',
+            position: 'absolute',
+            height: '2px',
+            width: '100%',
+            backgroundColor: '#435ebe',
+            borderRadius: '1px',
+            left: 0,
+            top: '0.5rem',
+            transform: isOpen ? 'rotate(90deg)' : 'none',
+            transition: 'all 0.3s ease'
+          }}
+        />
+        <span
+          style={{
+            display: 'block',
+            position: 'absolute',
+            height: '2px',
+            width: '100%',
+            backgroundColor: '#435ebe',
+            borderRadius: '1px',
+            opacity: isOpen ? 0 : 1,
+            left: 0,
+            top: '0.75rem',
+            transition: 'all 0.3s ease'
+          }}
+        />
+      </div>
+    </button>
+  );
+};
+
+export default MobileMenuToggle;
diff --git a/src/components/Sidebar.jsx b/src/components/Sidebar.jsx
index e1cc85a..35abe99 100644
--- a/src/components/Sidebar.jsx
+++ b/src/components/Sidebar.jsx
@@ -1,138 +1,184 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { Link } from "react-router-dom";
 import menuItems from "../data/sidebar-items-medico.json"; // Use "sidebar-items-secretaria.json" para secretaria e "sidebar-items-adm.json" para ADM
-import TrocardePerfis from "./TrocardePerfis"; 
-
+import TrocardePerfis from "./TrocardePerfis";
+import MobileMenuToggle from "./MobileMenuToggle";
 
 // 1. Recebe 'menuItems' e 'onLogout' como props
-function Sidebar({ menuItems, onLogout }) { 
- const [isActive, setIsActive] = useState(true);
- const [openSubmenu, setOpenSubmenu] = useState(null);
+function Sidebar({ menuItems, onLogout }) {
+  const [isActive, setIsActive] = useState(true);
+  const [openSubmenu, setOpenSubmenu] = useState(null);
+  const [isMobile, setIsMobile] = useState(false);
 
- const toggleSidebar = () => {
-  setIsActive(!isActive);
- };
+  // Detectar se é mobile/tablet
+  useEffect(() => {
+    const checkScreenSize = () => {
+      setIsMobile(window.innerWidth < 992);
+      // Em mobile/tablet, sidebar começa fechada
+      if (window.innerWidth < 992) {
+        setIsActive(false);
+      } else {
+        setIsActive(true);
+      }
+    };
 
- const handleSubmenuClick = (submenuName) => {
-  setOpenSubmenu(openSubmenu === submenuName ? null : submenuName);
- };
+    checkScreenSize();
+    window.addEventListener("resize", checkScreenSize);
 
- const renderLink = (item) => {
-  // Links internos (rotas do React Router)
-  if (item.url && item.url.startsWith("/")) {
-   return (
-    <Link to={item.url} className="sidebar-link">
-     {item.icon && <i className={`bi bi-${item.icon}`}></i>}
-     <span>{item.name}</span>
-    </Link>
-   );
-  }
+    return () => window.removeEventListener("resize", checkScreenSize);
+  }, []);
+
+  const toggleSidebar = () => {
+    setIsActive(!isActive);
+  };
+
+  const handleSubmenuClick = (submenuName) => {
+    setOpenSubmenu(openSubmenu === submenuName ? null : submenuName);
+  };
+
+  const renderLink = (item) => {
+    // Links internos (rotas do React Router)
+    if (item.url && item.url.startsWith("/")) {
+      return (
+        <Link to={item.url} className="sidebar-link">
+          {item.icon && <i className={`bi bi-${item.icon}`}></i>}
+          <span>{item.name}</span>
+        </Link>
+      );
+    }
+
+    // Links externos
+    return (
+      <a
+        href={item.url}
+        className="sidebar-link"
+        target="_blank"
+        rel="noreferrer"
+      >
+        {item.icon && <i className={`bi bi-${item.icon}`}></i>}
+        <span>{item.name}</span>
+      </a>
+    );
+  };
 
-  // Links externos
   return (
-   <a
-    href={item.url}
-    className="sidebar-link"
-    target="_blank"
-    rel="noreferrer"
-   >
-    {item.icon && <i className={`bi bi-${item.icon}`}></i>}
-    <span>{item.name}</span>
-   </a>
-  );
- };
+    <>
+      {/* Botão toggle para mobile */}
+      {isMobile && (
+        <MobileMenuToggle isOpen={isActive} onToggle={toggleSidebar} />
+      )}
 
- return (
-  <div id="sidebar" className={isActive ? "active" : ""}>
-   <div className="sidebar-wrapper active">
-    <div className="sidebar-header">
-     {/* ... Header... */}
-     <div className="d-flex justify-content-between">
-      <div className="logo">
-       <Link to="/">
-        <h1>MediConnect</h1>
-       </Link>
-      </div>
-      <div className="toggler">
-       <button
-        type="button"
-        className="sidebar-hide d-xl-none d-block btn"
-        onClick={toggleSidebar}
-       >
-        <i className="bi bi-x bi-middle"></i>
-       </button>
-      </div>
-     </div>
-    </div>
+      {/* Backdrop para mobile */}
+      {isMobile && isActive && (
+        <div
+          className="sidebar-backdrop"
+          onClick={toggleSidebar}
+          style={{
+            position: "fixed",
+            top: 0,
+            left: 0,
+            width: "100vw",
+            height: "100vh",
+            backgroundColor: "rgba(0, 0, 0, 0.5)",
+            zIndex: 1040,
+          }}
+        />
+      )}
 
-    <div className="sidebar-menu">
-     <ul className="menu">
-      {menuItems && menuItems.map((item, index) => {
-       if (item.isTitle) {
-        return (
-         <li key={index} className="sidebar-title">
-          {item.name}
-         </li>
-        );
-       }
-
-       if (item.submenu) {
-        return (
-         <li
-          key={index}
-          className={`sidebar-item has-sub ${
-           openSubmenu === item.key ? "active" : ""
-          }`}
-         >
-          {/* ... Lógica de Submenu ... */}
-                    <button
-           type="button"
-           className="sidebar-link btn"
-           onClick={() => handleSubmenuClick(item.key)}
-          >
-           <i className={`bi bi-${item.icon}`}></i>
-           <span>{item.name}</span>
-          </button>
-          <ul
-           className={`submenu ${
-            openSubmenu === item.key ? "active" : ""
-           }`}
-          >
-           {item.submenu.map((subItem, subIndex) => (
-            <li key={subIndex} className="submenu-item">
-             {renderLink(subItem)}
-            </li>
-           ))}
-          </ul>
-         </li>
-        );
-       }
-
-       return (
-        <li key={index} className="sidebar-item">
-         {renderLink(item)}
-        </li>
-       );
-      })}
-            {/* 3. Adiciona o botão de logout no final do menu */}
-            <li className="sidebar-item" onClick={onLogout}>
-                <button type="button" className="sidebar-link btn">
-                    <i className="bi bi-box-arrow-right"></i>
-                    <span>Sair (Logout)</span>
+      <div id="sidebar" className={isActive ? "active" : ""}>
+        <div className="sidebar-wrapper active">
+          <div className="sidebar-header">
+            {/* ... Header... */}
+            <div className="d-flex justify-content-between align-items-center">
+              <div className="logo">
+                <Link to="/">
+                  <h1>MediConnect</h1>
+                </Link>
+              </div>
+              <div className="toggler">
+                <button
+                  type="button"
+                  className={`sidebar-hide btn ${
+                    isMobile ? "d-block" : "d-xl-none d-block"
+                  }`}
+                  onClick={toggleSidebar}
+                  aria-label="Fechar menu"
+                >
+                  <i className="bi bi-x bi-middle"></i>
                 </button>
-            </li>
+              </div>
+            </div>
+          </div>
 
-            <TrocardePerfis />
+          <div className="sidebar-menu">
+            <ul className="menu">
+              {menuItems &&
+                menuItems.map((item, index) => {
+                  if (item.isTitle) {
+                    return (
+                      <li key={index} className="sidebar-title">
+                        {item.name}
+                      </li>
+                    );
+                  }
 
-     </ul>
-    </div>
-        
-    <button className="sidebar-toggler btn x" onClick={toggleSidebar}>
-     <i data-feather="x"></i>
-    </button>
-   </div>
-  </div>
- );
+                  if (item.submenu) {
+                    return (
+                      <li
+                        key={index}
+                        className={`sidebar-item has-sub ${
+                          openSubmenu === item.key ? "active" : ""
+                        }`}
+                      >
+                        {/* ... Lógica de Submenu ... */}
+                        <button
+                          type="button"
+                          className="sidebar-link btn"
+                          onClick={() => handleSubmenuClick(item.key)}
+                        >
+                          <i className={`bi bi-${item.icon}`}></i>
+                          <span>{item.name}</span>
+                        </button>
+                        <ul
+                          className={`submenu ${
+                            openSubmenu === item.key ? "active" : ""
+                          }`}
+                        >
+                          {item.submenu.map((subItem, subIndex) => (
+                            <li key={subIndex} className="submenu-item">
+                              {renderLink(subItem)}
+                            </li>
+                          ))}
+                        </ul>
+                      </li>
+                    );
+                  }
+
+                  return (
+                    <li key={index} className="sidebar-item">
+                      {renderLink(item)}
+                    </li>
+                  );
+                })}
+              {/* 3. Adiciona o botão de logout no final do menu */}
+              <li className="sidebar-item" onClick={onLogout}>
+                <button type="button" className="sidebar-link btn">
+                  <i className="bi bi-box-arrow-right"></i>
+                  <span>Sair (Logout)</span>
+                </button>
+              </li>
+
+              <TrocardePerfis />
+            </ul>
+          </div>
+
+          <button className="sidebar-toggler btn x" onClick={toggleSidebar}>
+            <i data-feather="x"></i>
+          </button>
+        </div>
+      </div>
+    </>
+  );
 }
 
-export default Sidebar;
\ No newline at end of file
+export default Sidebar;
diff --git a/src/pages/Login.jsx b/src/pages/Login.jsx
index a71df6f..9275a93 100644
--- a/src/pages/Login.jsx
+++ b/src/pages/Login.jsx
@@ -1,19 +1,19 @@
-import React, { useState, useEffect, use } from 'react';
-import {Link, useNavigate } from "react-router-dom";
-import { useAuth } from '../components/utils/AuthProvider';   
-import API_KEY from '../components/utils/apiKeys';
-import { UserInfos } from '../components/utils/Functions-Endpoints/General';
+import React, { useState, useEffect, use } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { useAuth } from "../components/utils/AuthProvider";
+import API_KEY from "../components/utils/apiKeys";
+import { UserInfos } from "../components/utils/Functions-Endpoints/General";
 
 function Login({ onEnterSystem }) {
-    const {setAuthTokens } = useAuth();
-    const navigate = useNavigate();
-    const [form, setForm] = useState({
-        username: "",
-        password: ""
-    });
-    const [alert, setAlert] = useState("");
-    const [showPassword, setShowPassword] = useState(false);
-/*
+  const { setAuthTokens } = useAuth();
+  const navigate = useNavigate();
+  const [form, setForm] = useState({
+    username: "",
+    password: "",
+  });
+  const [alert, setAlert] = useState("");
+  const [showPassword, setShowPassword] = useState(false);
+  /*
     useEffect(async () => {
         
       var myHeaders = new Headers();
@@ -64,7 +64,7 @@ function Login({ onEnterSystem }) {
             .then(result => console.log(result))
             .catch(error => console.log('error', error));*/
 
-            /* var myHeaders = new Headers();
+  /* var myHeaders = new Headers();
             myHeaders.append("Authorization", `Bearer ${data.access_token}`);
             myHeaders.append("apikey", API_KEY);
             var requestOptions = {
@@ -80,83 +80,82 @@ function Login({ onEnterSystem }) {
         }
     }, []);*/
 
-    const handleChange = (e) => {
-        setForm({ ...form, [e.target.name]: e.target.value });
-    };
+  const handleChange = (e) => {
+    setForm({ ...form, [e.target.name]: e.target.value });
+  };
 
-    const handleLogin = async (e) => {
-        e.preventDefault();
-        console.log("Tentando logar com:", form);
-        if (form.username && form.password) {
-             var myHeaders = new Headers();
-            myHeaders.append("apikey", API_KEY);
-            myHeaders.append("Content-Type", "application/json");
-            
-            var raw = JSON.stringify({
-            "email": form.username,
-            "password": form.password
-            });
-            
-            var requestOptions = {
-            method: 'POST',
-            headers: myHeaders,
-            body: raw,
-            
-            redirect: 'follow'
-            };
+  const handleLogin = async (e) => {
+    e.preventDefault();
+    console.log("Tentando logar com:", form);
+    if (form.username && form.password) {
+      var myHeaders = new Headers();
+      myHeaders.append("apikey", API_KEY);
+      myHeaders.append("Content-Type", "application/json");
 
-            const response = await fetch("https://yuanqfswhberkoevtmfr.supabase.co/auth/v1/token?grant_type=password", requestOptions);
-            const data = await response.json();
-            setAuthTokens(data);
-            console.log(data);
+      var raw = JSON.stringify({
+        email: form.username,
+        password: form.password,
+      });
 
-          
-            if (data.access_token){
-             
+      var requestOptions = {
+        method: "POST",
+        headers: myHeaders,
+        body: raw,
 
-               const UserData = await UserInfos(`bearer ${data.access_token}`);
-               console.log(UserData, 'Dados do usuário');
+        redirect: "follow",
+      };
 
-            if(UserData?.roles?.includes('admin')){
-            navigate(`/admin/`);
-        } else if(UserData?.roles?.includes('secretaria')){
-            navigate(`/secretaria/`);
-        } else if(UserData?.roles?.includes('medico')){
-            navigate(`/medico/`);
-        } else if(UserData?.roles?.includes('financeiro')){
-            navigate(`/financeiro/`);
-        }
+      const response = await fetch(
+        "https://yuanqfswhberkoevtmfr.supabase.co/auth/v1/token?grant_type=password",
+        requestOptions
+      );
+      const data = await response.json();
+      setAuthTokens(data);
+      console.log(data);
+
+      if (data.access_token) {
+        const UserData = await UserInfos(`bearer ${data.access_token}`);
+        console.log(UserData, "Dados do usuário");
+
+        if (UserData?.roles?.includes("admin")) {
+          navigate(`/admin/`);
+        } else if (UserData?.roles?.includes("secretaria")) {
+          navigate(`/secretaria/`);
+        } else if (UserData?.roles?.includes("medico")) {
+          navigate(`/medico/`);
+        } else if (UserData?.roles?.includes("financeiro")) {
+          navigate(`/financeiro/`);
         }
+      }
+    } else {
+      setAlert("Preencha todos os campos!");
+    }
+  };
 
-        } else {
-            setAlert("Preencha todos os campos!");
-        }
-    };
-
-    return (
+  return (
     <>
-    <div className="mt-3 card-position">
-        <div className="col-lg-5 col-12">
-        <div className="card shadow-sm d-flex justify-content-between align-items-center">
-            <div id="auth-left">
-                <div className="auth-logo">
-                    <br />
-                    <Link to="/">
-                        <h1 className="mb-4 text-center">MediConnect</h1>
-                    </Link>
-                </div>
-                <h3 className="auth-title">Entrar</h3>
-                <p className="auth-subtitle mb-5">
+      <div className="mt-3 card-position">
+        <div className="col-lg-5 col-md-7 col-sm-9 col-12 mx-auto">
+          <div className="card shadow-sm d-flex justify-content-between align-items-center">
+            <div id="auth-left" className="w-100">
+              <div className="auth-logo">
+                <br />
+                <Link to="/">
+                  <h1 className="mb-4 text-center">MediConnect</h1>
+                </Link>
+              </div>
+              <h3 className="auth-title">Entrar</h3>
+              <p className="auth-subtitle mb-5">
                 Entre com os dados que você inseriu durante o registro.
-                </p>
-                {alert && (
-                    <div className="alert alert-info" role="alert">
-                        {alert}
-                    </div>
-                )}
-                <form onSubmit={handleLogin}>
+              </p>
+              {alert && (
+                <div className="alert alert-info" role="alert">
+                  {alert}
+                </div>
+              )}
+              <form onSubmit={handleLogin}>
                 <div className="form-group position-relative has-icon-left mb-4">
-                    <input
+                  <input
                     type="text"
                     name="username"
                     className="form-control form-control-xl"
@@ -164,13 +163,13 @@ function Login({ onEnterSystem }) {
                     value={form.username}
                     onChange={handleChange}
                     required
-                    />
-                    <div className="form-control-icon">
+                  />
+                  <div className="form-control-icon">
                     <i className="bi bi-person" />
-                    </div>
+                  </div>
                 </div>
                 <div className="form-group position-relative has-icon-left mb-4">
-                    <input
+                  <input
                     type={showPassword ? "text" : "password"}
                     name="password"
                     className="form-control form-control-xl"
@@ -178,62 +177,75 @@ function Login({ onEnterSystem }) {
                     value={form.password}
                     onChange={handleChange}
                     required
-                    />
-                    <div className="form-control-icon">
+                  />
+                  <div className="form-control-icon">
                     <i className="bi bi-shield-lock" />
-                    </div>
-                    <button
-                        type="button"
-                        className="btn btn-sm"
-                        style={{ position: "absolute", right: "10px", top: "10px", background: "none", border: "none" }}
-                        onClick={() => setShowPassword(!showPassword)}
-                        tabIndex={-1}
-                    >
-                        <i className={`bi ${showPassword ? "bi-eye-slash" : "bi-eye"}`}></i>
-                    </button>
+                  </div>
+                  <button
+                    type="button"
+                    className="btn btn-sm"
+                    style={{
+                      position: "absolute",
+                      right: "10px",
+                      top: "10px",
+                      background: "none",
+                      border: "none",
+                    }}
+                    onClick={() => setShowPassword(!showPassword)}
+                    tabIndex={-1}
+                  >
+                    <i
+                      className={`bi ${
+                        showPassword ? "bi-eye-slash" : "bi-eye"
+                      }`}
+                    ></i>
+                  </button>
                 </div>
                 <div className="form-check form-check-lg d-flex align-items-end">
-                    <input
+                  <input
                     className="form-check-input me-2"
                     type="checkbox"
                     defaultValue=""
                     id="flexCheckDefault"
-                    />
-                    <label
+                  />
+                  <label
                     className="form-check-label text-gray-600"
                     htmlFor="flexCheckDefault"
-                    >
+                  >
                     Manter-me conectado
-                    </label>
+                  </label>
                 </div>
-                <button type="submit" className="btn btn-primary btn-block btn-lg shadow-lg mt-5" >
-                Entrar
+                <button
+                  type="submit"
+                  className="btn btn-primary btn-block btn-lg shadow-lg mt-5"
+                >
+                  Entrar
                 </button>
-                </form>
-                <div className="text-center mt-5 text-lg fs-4">
+              </form>
+              <div className="text-center mt-5 text-lg fs-4">
                 <p className="text-gray-600">
-                    Não tem uma conta?
-                    <Link className="font-bold" to={'/register'}>
+                  Não tem uma conta?
+                  <Link className="font-bold" to={"/register"}>
                     Cadastre-se
-                    </Link>
-                    .
+                  </Link>
+                  .
                 </p>
                 <p>
-                    <Link className="font-bold" to={'/forgotPassword'}>
+                  <Link className="font-bold" to={"/forgotPassword"}>
                     Esqueceu a senha?
-                    </Link>
-                    .
+                  </Link>
+                  .
                 </p>
-                </div>
+              </div>
             </div>
             <div className="col-lg-7 d-none d-lg-block">
-            <div id="auth-right"></div>
+              <div id="auth-right"></div>
             </div>
+          </div>
         </div>
-        </div>
-    </div>
+      </div>
     </>
-    );
+  );
 }
 
-export default Login;
\ No newline at end of file
+export default Login;
diff --git a/src/pages/style/LandingPage.css b/src/pages/style/LandingPage.css
index fc56b0c..989db84 100644
--- a/src/pages/style/LandingPage.css
+++ b/src/pages/style/LandingPage.css
@@ -21,15 +21,72 @@
     z-index: 1000;
 }
 
+/* Responsividade do cabeçalho */
+@media screen and (max-width: 1199px) {
+    .landing-header {
+        padding: 12px 30px;
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .landing-header {
+        padding: 10px 20px;
+        flex-wrap: wrap;
+        gap: 10px;
+    }
+}
+
+@media screen and (max-width: 576px) {
+    .landing-header {
+        padding: 8px 15px;
+        flex-direction: column;
+        gap: 15px;
+        position: relative;
+        padding-bottom: 15px;
+    }
+}
+
 /* Estilo para a logo DENTRO do cabeçalho da Landing Page */
 .landing-header .logo h1 {
     font-size: 1.8em;
-    color: #25396f; 
+    color: #25396f;
     font-weight: 700;
     margin: 0; /* Remove margem que pode quebrar o layout */
     padding: 0; /* Remove padding */
 }
 
+@media screen and (max-width: 768px) {
+    .landing-header .logo h1 {
+        font-size: 1.5em;
+    }
+}
+
+@media screen and (max-width: 576px) {
+    .landing-header .logo h1 {
+        font-size: 1.3em;
+    }
+}
+
+.nav-menu {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 10px;
+}
+
+@media screen and (max-width: 768px) {
+    .nav-menu {
+        gap: 15px;
+    }
+}
+
+@media screen and (max-width: 576px) {
+    .nav-menu {
+        justify-content: center;
+        width: 100%;
+    }
+}
+
 .nav-menu a {
     text-decoration: none;
     color: #333;
@@ -38,6 +95,19 @@
     transition: color 0.2s;
 }
 
+@media screen and (max-width: 768px) {
+    .nav-menu a {
+        margin-left: 0;
+        font-size: 0.9em;
+    }
+}
+
+@media screen and (max-width: 576px) {
+    .nav-menu a {
+        font-size: 0.85em;
+    }
+}
+
 .nav-menu a:hover {
     color: #5b56f8;
 }
@@ -56,6 +126,21 @@
     font-weight: 600;
 }
 
+@media screen and (max-width: 768px) {
+    .access-button {
+        margin-left: 0;
+        padding: 8px 15px;
+        font-size: 0.9em;
+    }
+}
+
+@media screen and (max-width: 576px) {
+    .access-button {
+        padding: 10px 20px;
+        font-size: 0.85em;
+    }
+}
+
 /* --- Área de Destaque (Hero Section) --- */
 .hero-section {
     display: flex;
@@ -65,31 +150,101 @@
     background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://picsum.photos/1200/600?random=4') center/cover;
     color: white;
     min-height: 600px;
-    padding-top: 100px; 
+    padding-top: 100px;
+}
+
+/* Responsividade da hero section */
+@media screen and (max-width: 1199px) {
+    .hero-section {
+        padding: 80px 30px;
+        min-height: 500px;
+        padding-top: 80px;
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .hero-section {
+        padding: 60px 20px;
+        min-height: 400px;
+        padding-top: 80px;
+        justify-content: center;
+        text-align: center;
+    }
+}
+
+@media screen and (max-width: 576px) {
+    .hero-section {
+        padding: 40px 15px;
+        min-height: 350px;
+        padding-top: 100px;
+    }
 }
 
 .hero-content {
-    max-width: 700px; 
-    text-align: left; 
+    max-width: 700px;
+    text-align: left;
+}
+
+@media screen and (max-width: 768px) {
+    .hero-content {
+        max-width: 100%;
+        text-align: center;
+    }
 }
 
 /* Título Branco e Legível */
-.hero-content .hero-title { 
-    font-size: 3.5em; 
+.hero-content .hero-title {
+    font-size: 3.5em;
     font-weight: 700;
     margin-bottom: 20px;
-    color: #ffffff; 
-    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); 
+    color: #ffffff;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+}
+
+@media screen and (max-width: 1199px) {
+    .hero-content .hero-title {
+        font-size: 3em;
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .hero-content .hero-title {
+        font-size: 2.5em;
+        margin-bottom: 15px;
+    }
+}
+
+@media screen and (max-width: 576px) {
+    .hero-content .hero-title {
+        font-size: 2em;
+        margin-bottom: 12px;
+        line-height: 1.2;
+    }
 }
 
 .hero-content p {
-    font-size: 1.2em; 
+    font-size: 1.2em;
     margin-bottom: 30px;
     color: #ddd;
 }
 
+@media screen and (max-width: 768px) {
+    .hero-content p {
+        font-size: 1.1em;
+        margin-bottom: 25px;
+    }
+}
+
+@media screen and (max-width: 576px) {
+    .hero-content p {
+        font-size: 1em;
+        margin-bottom: 20px;
+        line-height: 1.4;
+    }
+}
+
 .main-action-button {
-    background-color: #5b56f8; 
+    background-color: #5b56f8;
     color: white;
     border: none;
     padding: 15px 30px;
@@ -100,6 +255,22 @@
     transition: background-color 0.3s;
 }
 
+@media screen and (max-width: 768px) {
+    .main-action-button {
+        padding: 12px 25px;
+        font-size: 1em;
+    }
+}
+
+@media screen and (max-width: 576px) {
+    .main-action-button {
+        padding: 12px 20px;
+        font-size: 0.9em;
+        width: 100%;
+        max-width: 250px;
+    }
+}
+
 .main-action-button:hover {
     background-color: #4540d6;
 }
@@ -156,4 +327,4 @@ html[data-bs-theme="dark"] .main-action-button {
 html[data-bs-theme="dark"] .main-action-button:hover {
     background-color: #5b56f8;
     color: #fff;
-}
\ No newline at end of file
+}