diff --git a/src/pilgrim/ui/screens/diary_list_screen.py b/src/pilgrim/ui/screens/diary_list_screen.py
index 0b0c042..8166ffa 100644
--- a/src/pilgrim/ui/screens/diary_list_screen.py
+++ b/src/pilgrim/ui/screens/diary_list_screen.py
@@ -292,4 +292,8 @@ class DiaryListScreen(Screen):
         self.action_open_diary()
 
     def action_about_cmd(self):
-        self.app.push_screen(AboutScreen())
\ No newline at end of file
+        self.app.push_screen(AboutScreen())
+
+    def action_quit(self):
+        """Action to quit the application"""
+        self.app.exit()
\ No newline at end of file
diff --git a/src/pilgrim/ui/styles/pilgrim.css b/src/pilgrim/ui/styles/pilgrim.css
index 673bbe5..76828bb 100644
--- a/src/pilgrim/ui/styles/pilgrim.css
+++ b/src/pilgrim/ui/styles/pilgrim.css
@@ -3,175 +3,7 @@ Screen {
     background: $surface-darken-1;
     align: center middle;
 }
-.DiaryListScreen-DiaryListContainer {
-    height: 1fr;
-    width: 100%;
-    layout: vertical;
-    align: center top; /* Alinha no topo para seguir o wireframe */
-    padding: 2 4; /* Mais espaço nas laterais */
-    background: $surface; /* Removendo aquamarine para ficar mais limpo */
-}
 
-/* A lista de diários - área principal como no wireframe */
-.DiaryListScreen-DiaryListOptions {
-    border: round $primary-lighten-2;
-    background: $surface;
-    width: 75%; /* Largura generosa como no wireframe */
-    height: 72%; /* Ocupa o espaço disponível */
-    margin: 2 0; /* Margem vertical para separar dos outros elementos */
-}
-
-.DiaryListScreen-DiaryListOptions:focus {
-    border: round $primary;
-}
-
-/* O contêiner dos botões - logo abaixo da lista */
-.DiaryListScreen-ButtonsGrid {
-    layout: horizontal;
-    align: center middle;
-    width: 79%; /* Mesma largura da lista */
-    height: 20%; /* Aumentando altura para caber o texto dos botões */
-}
-
-/* Botões individuais - garantindo espaço para o texto */
-.DiaryListScreen-NewDiaryButton,
-.DiaryListScreen-EditDiaryButton,
-.DiaryListScreen-OpenDiaryButton {
-    margin: 0 1 1 0; /* Espaço entre os botões */
-    height: 1fr;
-    width: 1fr;
-    border: round grey;
-}
-
-/* As dicas - usando a classe correta */
-.DiaryListScreen-DiaryListTips {
-    width: 100%; /* Largura total quando usando dock */
-    height: auto;
-    text-style: italic;
-    text-align: center; /* Centraliza o texto dentro do elemento */
-    color: $text-muted;
-    dock: bottom; /* Gruda no fundo da tela */
-    margin: 0 1;
-}
-
-/* Estilos genéricos que não mudaram */
-.option-list--option-highlighted {
-    background: $primary-darken-2;
-}
-
-.option-list--option-selected {
-    text-style: bold;
-    background: $primary;
-}
-
-Header {
-    background: $primary;
-    color: $text;
-}
-
-Footer {
-    background: $primary;
-    color: $text;
-}
-
-AboutScreen {
-    align: center middle;
-}
-
-.AboutScreen_AboutContainer {
-    align: center middle;
-    width: 85%;
-    height: 95%;
-    border: thick $primary;
-    background: $surface;
-    margin: 1;
-}
-
-.AboutScreen_AboutContainer TextArea {
-    align: center middle;
-    width: 100%;
-    height: 55%;
-    margin: 2;
-    padding: 1;
-}
-
-.AboutScreen_SubContainer {
-    align: center middle;
-    height: 45%;
-    padding: 1 1;
-    margin: 1 1;
-}
-
-.AboutScreen_AboutTitle {
-    color: $accent;
-    text-style: bold;
-    text-align: center;
-    margin-bottom: 1;
-}
-
-.AboutScreen_AboutVersion {
-    color: $warning;
-    text-style: italic;
-    text-align: center;
-    margin-bottom: 1;
-}
-
-.AboutScreen_AboutContent {
-    text-align: center;
-    margin-bottom: 1;
-}
-
-.AboutScreen_AboutContact,
-.AboutScreen_AboutAuthor {
-    color: $text-muted;
-    text-align: center;
-    margin-bottom: 1;
-}
-
-.AboutScreen_AboutLicense {
-    height: 60%;
-}
-
-Screen.-modal {
-    background: rgba(0, 0, 0, 0.7); /* Escurece o fundo da tela por baixo */
-    align: center middle; /* Centraliza o conteúdo (sua modal) que está nesta tela modal */
-}
-
-.NewDiaryModal-Dialog {
-    width: 60%; /* Largura do diálogo */
-    height: auto; /* Altura automática */
-    background: $surface; /* Fundo do diálogo */
-    border: thick $accent; /* Borda chamativa */
-    padding: 2 4; /* Espaçamento interno */
-    align: center middle; /* Centraliza conteúdo dentro do diálogo */
-    layout: vertical;
-}
-
-.NewDiaryModal-Dialog .NewDiaryModal-Title{
-    text-align: center;
-    text-style: bold;
-    color: $primary;
-    margin-bottom: 1;
-}
-
-.NewDiaryModal-NameInput{
-    width: 1fr; /* Ocupa a largura disponível */
-    margin-bottom: 2;
-}
-
-.NewDiaryModal-ButtonsContainer{
-    width: 1fr;
-    height: auto;
-    align: center middle;
-    padding-top: 1;
-}
-
-.NewDiaryModal-ButtonsContainer Button{
-    margin: 0 1;
-    width: 1fr;
-}
-
-/* EditEntryScreen Styles */
 .EditEntryScreen-sub-header {
     layout: horizontal;
     background: $primary-darken-1;
@@ -234,7 +66,292 @@ Screen.-modal {
     border: none;
 }
 
-/* RenameEntryModal Styles */
+AboutScreen {
+    align: center middle;
+}
+
+#AboutScreen_AboutContainer {
+    align: center middle;
+    width: 85%;
+    height: 95%;
+    border: thick $primary;
+    background: $surface;
+    margin: 1;
+}
+
+#AboutScreen_AboutContainer TextArea {
+    align: center middle;
+    width: 100%;
+    height: 55%;
+    margin: 2;
+    padding: 1;
+}
+
+#AboutScreen_SubContainer {
+    align: center middle;
+    height: 45%;
+    padding: 1 1;
+    margin: 1 1;
+}
+
+#AboutScreen_AboutTitle {
+    color: $accent;
+    text-style: bold;
+    text-align: center;
+    margin-bottom: 1;
+}
+
+#AboutScreen_AboutVersion {
+    color: $warning;
+    text-style: italic;
+    text-align: center;
+    margin-bottom: 1;
+}
+
+#AboutScreen_AboutContent {
+    text-align: center;
+    margin-bottom: 1;
+}
+
+#AboutScreen_AboutContact,
+#AboutScreen_AboutAuthor {
+    color: $text-muted;
+    text-align: center;
+    margin-bottom: 1;
+}
+
+#AboutScreen_AboutLicense {
+    height: 60%;
+}
+
+/* Main container - distributing vertical space */
+.DiaryListScreen-DiaryListContainer {
+    height: 1fr;
+    width: 100%;
+    layout: vertical;
+    align: center top; /* Aligns at the top to follow the wireframe */
+    padding: 2 4; /* More space on the sides */
+    background: $surface; /* Removing aquamarine to keep it cleaner */
+}
+
+/* Diary list - main area as in the wireframe */
+.DiaryListScreen-DiaryListOptions {
+    border: round $primary-lighten-2;
+    background: $surface;
+    width: 75%; /* Generous width as in the wireframe */
+    height: 60%; /* Occupies available space */
+    margin: 2 0; /* Vertical margin to separate from other elements */
+}
+
+.DiaryListScreen-DiaryListOptions:focus {
+    border: round $primary;
+}
+
+/* Button container - right below the list */
+.DiaryListScreen-ButtonsGrid {
+    layout: horizontal;
+    align: center middle;
+    width: 79%; /* Same width as the list */
+    height: 20%; /* Increasing height to fit button text */
+}
+
+/* Individual buttons - ensuring space for text */
+.DiaryListScreen-NewDiaryButton,
+.DiaryListScreen-EditDiaryButton,
+.DiaryListScreen-OpenDiaryButton {
+    margin: 0 1 1 0; /* Space between buttons */
+    height: 1fr;
+    width: 1fr;
+    border: round grey;
+}
+
+/* Tips - using the correct class */
+.DiaryListScreen-DiaryListTips {
+    width: 100%; /* Full width when using dock */
+    height: auto;
+    text-style: italic;
+    text-align: center; /* Centers text within the element */
+    color: $text-muted;
+    dock: bottom; /* Sticks to the bottom of the screen */
+    margin: 0 1;
+}
+
+/* Generic styles that haven't changed */
+.option-list--option-highlighted {
+    background: $primary-darken-2;
+}
+
+.option-list--option-selected {
+    text-style: bold;
+    background: $primary;
+}
+
+Header {
+    background: $primary;
+    color: $text;
+}
+
+Footer {
+    background: $primary;
+    color: $text;
+}
+
+Screen.-modal {
+    background: rgba(0, 0, 0, 0.7); /* Darkens the background screen underneath */
+    align: center middle; /* Centers the content (your modal) that is in this modal screen */
+}
+
+/* Style for the new diary modal dialog */
+.NewDiaryModal-dialog {
+    layout: vertical;
+    width: 60%;
+    height: auto;
+    background: $surface;
+    border: thick $accent;
+    padding: 2 4;
+    align: center middle;
+}
+
+.NewDiaryModal-title {
+    text-align: center;
+    text-style: bold;
+    color: $primary;
+    margin-bottom: 1;
+}
+
+.NewDiaryModal-label {
+    margin-bottom: 1;
+}
+
+.NewDiaryModal-name-input {
+    width: 1fr;
+    margin-bottom: 2;
+}
+
+.NewDiaryModal-buttons {
+    width: 1fr;
+    height: auto;
+    align: center middle;
+    padding-top: 1;
+}
+
+.NewDiaryModal-buttons Button {
+    margin: 0 1;
+    width: 1fr;
+}
+
+/* Additional classes for NewDiaryModal */
+.NewDiaryModal-Dialog {
+    layout: vertical;
+    width: 60%;
+    height: auto;
+    background: $surface;
+    border: thick $accent;
+    padding: 2 4;
+    align: center middle;
+}
+
+.NewDiaryModal-Title {
+    text-align: center;
+    text-style: bold;
+    color: $primary;
+    margin-bottom: 1;
+}
+
+.NewDiaryModal-NameInput {
+    width: 1fr;
+    margin-bottom: 2;
+}
+
+.NewDiaryModal-ButtonsContainer {
+    width: 1fr;
+    height: auto;
+    align: center middle;
+    padding-top: 1;
+}
+
+.NewDiaryModal-CreateDiaryButton,
+.NewDiaryModal-CancelButton {
+    margin: 0 1;
+    width: 1fr;
+}
+
+/* Style for the edit diary modal dialog */
+.EditDiaryModal-dialog {
+    layout: vertical;
+    width: 60%;
+    height: auto;
+    background: $surface;
+    border: thick $warning;
+    padding: 2 4;
+    align: center middle;
+}
+
+.EditDiaryModal-title {
+    text-align: center;
+    text-style: bold;
+    color: $warning;
+    margin-bottom: 1;
+}
+
+.EditDiaryModal-label {
+    margin-bottom: 1;
+}
+
+.EditDiaryModal-name-input {
+    width: 1fr;
+    margin-bottom: 2;
+}
+
+.EditDiaryModal-buttons {
+    width: 1fr;
+    height: auto;
+    align: center middle;
+    padding-top: 1;
+}
+
+.EditDiaryModal-buttons Button {
+    margin: 0 1;
+    width: 1fr;
+}
+
+/* Additional classes for EditDiaryModal */
+.EditDiaryModal-Dialog {
+    layout: vertical;
+    width: 60%;
+    height: auto;
+    background: $surface;
+    border: thick $warning;
+    padding: 2 4;
+    align: center middle;
+}
+
+.EditDiaryModal-Title {
+    text-align: center;
+    text-style: bold;
+    color: $warning;
+    margin-bottom: 1;
+}
+
+.EditDiaryModal-NameInput {
+    width: 1fr;
+    margin-bottom: 2;
+}
+
+.EditDiaryModal-ButtonsContainer {
+    width: 1fr;
+    height: auto;
+    align: center middle;
+    padding-top: 1;
+}
+
+.EditDiaryModal-SaveButton,
+.EditDiaryModal-CancelButton {
+    margin: 0 1;
+    width: 1fr;
+}
+
+/* Style for the rename entry modal dialog */
 .RenameEntryModal-dialog {
     layout: vertical;
     width: 60%;
@@ -252,10 +369,6 @@ Screen.-modal {
     margin-bottom: 1;
 }
 
-.RenameEntryModal-label {
-    margin-bottom: 1;
-}
-
 .RenameEntryModal-name-input {
     width: 1fr;
     margin-bottom: 2;
@@ -268,7 +381,8 @@ Screen.-modal {
     padding-top: 1;
 }
 
-.RenameEntryModal-buttons Button {
+.RenameEntryModal-save-button,
+.RenameEntryModal-cancel-button {
     margin: 0 1;
     width: 1fr;
-}
\ No newline at end of file
+} 
\ No newline at end of file