diff --git a/wbweb/src/assets/516287f9-bcfd-40c2-b03c-f360842c84bc.jpg b/wbweb/src/assets/516287f9-bcfd-40c2-b03c-f360842c84bc.jpg
deleted file mode 100644
index b379eef..0000000
Binary files a/wbweb/src/assets/516287f9-bcfd-40c2-b03c-f360842c84bc.jpg and /dev/null differ
diff --git a/wbweb/src/assets/mascote-2.png b/wbweb/src/assets/mascote-2.png
new file mode 100644
index 0000000..8fd14c7
Binary files /dev/null and b/wbweb/src/assets/mascote-2.png differ
diff --git a/wbweb/src/assets/mascote-3.png b/wbweb/src/assets/mascote-3.png
new file mode 100644
index 0000000..8fd14c7
Binary files /dev/null and b/wbweb/src/assets/mascote-3.png differ
diff --git a/wbweb/src/assets/mascote.png b/wbweb/src/assets/mascote.png
index 8fd14c7..88db0ca 100644
Binary files a/wbweb/src/assets/mascote.png and b/wbweb/src/assets/mascote.png differ
diff --git a/wbweb/src/assets/prara.png b/wbweb/src/assets/prara.png
deleted file mode 100644
index a86e7ef..0000000
Binary files a/wbweb/src/assets/prara.png and /dev/null differ
diff --git a/wbweb/src/assets/t_00.png b/wbweb/src/assets/t_00.png
deleted file mode 100644
index b91741a..0000000
Binary files a/wbweb/src/assets/t_00.png and /dev/null differ
diff --git a/wbweb/src/assets/t_01.png b/wbweb/src/assets/t_01.png
deleted file mode 100644
index b17c83c..0000000
Binary files a/wbweb/src/assets/t_01.png and /dev/null differ
diff --git a/wbweb/src/assets/t_02.png b/wbweb/src/assets/t_02.png
deleted file mode 100644
index 888bfa1..0000000
Binary files a/wbweb/src/assets/t_02.png and /dev/null differ
diff --git a/wbweb/src/assets/t_03.png b/wbweb/src/assets/t_03.png
deleted file mode 100644
index 4e3bd47..0000000
Binary files a/wbweb/src/assets/t_03.png and /dev/null differ
diff --git a/wbweb/src/components/IniciarLeitura/slideCategoriaMobile.vue b/wbweb/src/components/IniciarLeitura/slideCategoriaMobile.vue
index fec3467..eb3ab29 100644
--- a/wbweb/src/components/IniciarLeitura/slideCategoriaMobile.vue
+++ b/wbweb/src/components/IniciarLeitura/slideCategoriaMobile.vue
@@ -18,7 +18,7 @@
         </vueper-slides>
 		<q-dialog v-model="livro_dialog" class="navbar_classe">
 			<q-card :class="{'dark-card_detail_historia': darkmode, 'card_detail_historia': !darkmode}">
-				<div class="row" style="height: 100%;">
+				<div class="row dark-cover-mobile" style="height: 100%;">
 					<div class="col-12 cover_dialog">
 						<img alt="Cover" :src="livro_detail.caminho_capa" class="cover_detail_historia"/>
 					</div>
diff --git a/wbweb/src/components/utils/UploadHelper.vue b/wbweb/src/components/utils/UploadHelper.vue
index c7f5ec1..f55a530 100644
--- a/wbweb/src/components/utils/UploadHelper.vue
+++ b/wbweb/src/components/utils/UploadHelper.vue
@@ -15,20 +15,20 @@
         <q-card-section>
             Para carregar a imagem basta clicar no ícone de "mais" ("+") conforme indica a imagem: <br>
             <div class="text-center">
-                <img src="../../assets/t_00.png" alt=""><br><br>
+                <!-- <img src="../../assets/t_00.png" alt=""><br><br> -->
             </div>
             Selecione a imagem desejada e depois clique no ícone de "upload" indicado na imagem: <br>
             <div class="text-center">
-                <img src="../../assets/t_01.png" alt=""><br><br>
+                <!-- <img src="../../assets/t_01.png" alt=""><br><br> -->
             </div>
             Em seguida o sistema irá carregar a imagem. Caso queira carregar outra imagem, será necessário
              remover a imagem anterior, para isso, basta clicar no ícone conforme a imagem: <br>
             <div class="text-center">
-                <img src="../../assets/t_02.png" alt=""><br><br>
+                <!-- <img src="../../assets/t_02.png" alt=""><br><br> -->
             </div>
             Clicar em "Remover foto": <br>
             <div class="text-center">
-                <img src="../../assets/t_03.png" alt=""><br><br>
+                <!-- <img src="../../assets/t_03.png" alt=""><br><br> -->
             </div>
             E confirmar em seguida.
         </q-card-section>
diff --git a/wbweb/src/css/all.scss b/wbweb/src/css/all.scss
index dfe5036..24566ed 100644
--- a/wbweb/src/css/all.scss
+++ b/wbweb/src/css/all.scss
@@ -180,4 +180,20 @@
     border-radius: 30px;
     box-shadow: none;
     margin-top: 7px !important;
+}
+
+.dark-capitulo, .dark-sobre_empresa, .dark-categorias, .dark-contato, .dark-criar_capitulo, .dark-criar_historia, .dark-card-remover-foto, .dark-card_detail_historia_mobile_index, .dark-card_detail_historia, .dark-card_detail_historia_mobile, .dark-card_detail_historia_desktop, .dark-cadastrar, .dark-editar_perfil, .dark-card-remover-foto, .dark-error404, .dark-faq, .dark-footer, .dark-bgIniciar-leitura, .dark-bgindex, .dark-bgIniciar-leitura, .dark-bgIniciar-leitura, .dark-livro_categorias, .dark-pesquisa_livros, .dark-livro, .dark-card-delete, .dark-perfil, .dark-sobre_empresa, .dark-header, .menu-opcoes-dark, .dropdown_navegar_dark, .dark-index-header, .dark-index-menu-opcoes, .dark-index-dropdown_navegar {
+    ::selection {
+        background: #7c61ac75;
+    }
+}
+.bgindex {
+    ::selection {
+        background: #d7c2e163;
+    }
+}
+.capitulo, .sobre_empresa, .categorias, .contato, .criar_capitulo, .criar_historia, .card-remover-foto, .card_detail_historia_mobile_index, .card_detail_historia, .card_detail_historia_mobile, .card_detail_historia_desktop, .cadastrar, .editar_perfil, .card-remover-foto, .error404, .faq, .footer, .bgIniciar-leitura, .bgIniciar-leitura, .bgIniciar-leitura, .livro_categorias, .pesquisa_livros, .livro, .card-delete, .perfil, .sobre_empresa, .header, .menu-opcoes- .dropdown_navegar_dark, .index-header, .index-menu-opcoes, .index-dropdown_navegar {
+    ::selection {
+        background: #d7c2e1;
+    }
 }
\ No newline at end of file
diff --git a/wbweb/src/css/contato.scss b/wbweb/src/css/contato.scss
index 38f66db..120db93 100644
--- a/wbweb/src/css/contato.scss
+++ b/wbweb/src/css/contato.scss
@@ -33,6 +33,10 @@
     .separator_mobile {
         display: none;
     }
+    
+    ::selection {
+        background: #d7c2e1;
+    }
 }
 @media screen and (min-width: 980px) {
     .contato{
diff --git a/wbweb/src/css/darkMode/contato-dark.scss b/wbweb/src/css/darkMode/contato-dark.scss
index 7376f09..7028d9c 100644
--- a/wbweb/src/css/darkMode/contato-dark.scss
+++ b/wbweb/src/css/darkMode/contato-dark.scss
@@ -38,6 +38,10 @@
     .separator_mobile {
         display: none;
     }
+    
+    ::selection {
+        background: #7c61ac75;
+    }
 }
 @media screen and (min-width: 980px) {
     .dark-contato{
diff --git a/wbweb/src/css/darkMode/dialogs-dark.scss b/wbweb/src/css/darkMode/dialogs-dark.scss
index 114231c..15192d5 100644
--- a/wbweb/src/css/darkMode/dialogs-dark.scss
+++ b/wbweb/src/css/darkMode/dialogs-dark.scss
@@ -1,8 +1,12 @@
 .dark-card_detail_historia_mobile_index, .dark-card_detail_historia, .dark-card_detail_historia_mobile, .dark-card_detail_historia_desktop {
+    background-color: #463547;
     p, span, h1, h2, h3, h4, h5, h6, ol, ul, button, a, label {
         font-family: 'Raleway';
         color: #c1bfc2;
     }
+    .dark-cover-mobile {
+        background-color: #463547;
+    } 
     .input_cadastro{
         margin: 0px 0 30px 0;
         padding: 0 44px;
@@ -100,6 +104,7 @@
     .cover_detail_historia{
         height: 100%;
         width: 100%;
+        filter:brightness(0.3) ;
     }
     .col_btn_detail, .col_btn_detail_desktop{
         text-align: center;
@@ -209,6 +214,7 @@
         .cover_detail_historia{
             height: 100%;
             width: 100%;
+            filter: none;
         }
         .input_cadastro{
             margin: 0px 0 30px 0;
diff --git a/wbweb/src/css/darkMode/index-dark.scss b/wbweb/src/css/darkMode/index-dark.scss
index 4293009..85587c2 100644
--- a/wbweb/src/css/darkMode/index-dark.scss
+++ b/wbweb/src/css/darkMode/index-dark.scss
@@ -20,6 +20,7 @@
             background-clip: text;
             background-image: linear-gradient(268deg, #853197, #e5cbe4);
             color: transparent;
+            // line-break: anywhere;
         }
         .texto{
             font-size: 19px;
@@ -79,15 +80,15 @@
         .row_page {
             .mascote-image{
                 display: block;
-                width: 25em;
-                margin: 68px 0 0 0;
+                width: 19em;
+                margin: 68px 0 0px 23px;
             } 
             .welcomeWorldBooks{
                 margin: 20px 0 5px 0px;
-                font-size: 8vh;
+                font-size: 6vh;
                 text-align: left;
                 text-transform: uppercase;
-                line-height: 8vh;
+                line-height: 6vh;
                 padding: 0;
                 font-family: "Poppins";
                 font-weight: 700;
@@ -121,8 +122,8 @@
         .row_page {
             .mascote-image{
                 display: block;
-                // width: 35em;
-                // float: right;
+                width: 22em;
+                margin: 68px 0 0 0;
             } 
             .align_btn {
                 display: flex;
@@ -226,7 +227,7 @@
         .row_page{
             margin-top: 120px;
             .mascote-image{
-                width: 80%;
+                width: 60%;
                 margin: 0;
                 // float: right;
             }
diff --git a/wbweb/src/css/darkMode/iniciar-leitura-dark.scss b/wbweb/src/css/darkMode/iniciar-leitura-dark.scss
index c05fe9f..5bd4224 100644
--- a/wbweb/src/css/darkMode/iniciar-leitura-dark.scss
+++ b/wbweb/src/css/darkMode/iniciar-leitura-dark.scss
@@ -17,8 +17,10 @@
             .cover{
                 width: 100%;
                 height: 100%;
-                border-radius: 14px;
-                border: solid 3px #FFF;
+                // border-radius: 14px;
+                // border: solid 3px #FFF;
+                border-radius: 0;
+                border: solid 0px #FFF;
                 cursor: pointer;
                 transition: filter .3s ease;
                 &:hover {
diff --git a/wbweb/src/css/darkMode/tela-inicial-dark.scss b/wbweb/src/css/darkMode/tela-inicial-dark.scss
index 4d60b0d..52a353a 100644
--- a/wbweb/src/css/darkMode/tela-inicial-dark.scss
+++ b/wbweb/src/css/darkMode/tela-inicial-dark.scss
@@ -122,6 +122,9 @@
     .navegar {
         display: none;
     }
+    .icones-flags {
+        border-radius: 5px;
+    }
 }
 .menu-opcoes-dark {
     font-family: 'Raleway';
diff --git a/wbweb/src/css/darkMode/tela-inicial-index-dark.scss b/wbweb/src/css/darkMode/tela-inicial-index-dark.scss
index 6ad92ae..2457040 100644
--- a/wbweb/src/css/darkMode/tela-inicial-index-dark.scss
+++ b/wbweb/src/css/darkMode/tela-inicial-index-dark.scss
@@ -123,6 +123,9 @@
             background: #ffffff78;
         }
     }
+    .icones-flags {
+        border-radius: 5px;
+    }
 }
 .dark-index-menu-opcoes {
     font-family: 'Raleway';
diff --git a/wbweb/src/css/index.scss b/wbweb/src/css/index.scss
index 79783ef..d5c482e 100644
--- a/wbweb/src/css/index.scss
+++ b/wbweb/src/css/index.scss
@@ -33,6 +33,7 @@
             background-image:linear-gradient(88deg, #7a22a7, #ecd9f0);
             transition: background-image 0.3s ease;
             color: transparent;
+            // line-break: anywhere;
         }
         
         .texto{
@@ -94,16 +95,19 @@
     .bgindex {
         .row_page {
             .mascote-image{
+                // display: block;
+                // width: 22em;
+                // margin: 68px 0 0 0;
                 display: block;
-                width: 25em;
-                margin: 68px 0 0 0;
+                width: 19em;
+                margin: 68px 0 0px 23px;
             } 
             .welcomeWorldBooks{
                 margin: 20px 0 5px 0px;
-                font-size: 9vh;
+                font-size: 6vh;
                 text-align: left;
                 text-transform: uppercase;
-                line-height: 8vh;
+                line-height: 6vh;
                 padding: 0;
                 font-family: "Poppins";
                 font-weight: 700;
@@ -135,6 +139,8 @@
         .row_page {
             .mascote-image{
                 display: block;
+                width: 22em;
+                margin: 68px 0 0 0;
                 // width: 35em;
                 // float: right;
             } 
@@ -245,7 +251,7 @@
         .row_page{
             margin-top: 120px;
             .mascote-image{
-                width: 80%;
+                width: 60%;
                 margin: 0;
                 // float: right;
             }
diff --git a/wbweb/src/css/iniciar-leitura-2.scss b/wbweb/src/css/iniciar-leitura-2.scss
index d43a40c..c9bcc2b 100644
--- a/wbweb/src/css/iniciar-leitura-2.scss
+++ b/wbweb/src/css/iniciar-leitura-2.scss
@@ -15,7 +15,7 @@
             .cover{
                 width: 100%;
                 height: 100%;
-                border-radius: 14px;
+                border-radius: 0px;
                 border: solid 0px #000;
                 cursor: pointer;
                 transition: filter .3s ease;
diff --git a/wbweb/src/css/tela-inicial.scss b/wbweb/src/css/tela-inicial.scss
index 1d6bd8f..0e71273 100644
--- a/wbweb/src/css/tela-inicial.scss
+++ b/wbweb/src/css/tela-inicial.scss
@@ -113,6 +113,9 @@
     .navegar {
         display: none;
     }
+    .icones-flags {
+        border-radius: 5px;
+    }
 }
 .menu-opcoes {
     font-family: 'Raleway';
diff --git a/wbweb/src/layouts/Default.vue b/wbweb/src/layouts/Default.vue
index a27c868..b9c9c76 100644
--- a/wbweb/src/layouts/Default.vue
+++ b/wbweb/src/layouts/Default.vue
@@ -10,7 +10,7 @@
                 <img src="~/assets/logo.png" class="icon" @click="goIndex">
               </q-avatar>
             </div>
-            <div class="col-4 col-md-5 col-lg-6 barra-pesquisa" >
+            <div class="col-4 col-md-4 col-lg-6 barra-pesquisa" >
               <q-input 
                 outlined 
                 rounded 
@@ -114,7 +114,7 @@
                               <q-item-label style="font-family: Raleway;">{{ linguagem.name }}</q-item-label>
                             </q-item-section>
                             <q-item-section avatar>
-                              <q-img :src="require('../assets/flags/'+linguagem.img)" spinner-color="white" />
+                              <q-img :src="require('../assets/flags/'+linguagem.img)" spinner-color="white" img-class="icones-flags" style="border-radius: 5px;"/>
                             </q-item-section>
                           </q-item>
                           <q-separator />
@@ -136,10 +136,27 @@
             <!-- INICIAR SESSÃO -->
             <div v-if="!logado && user == null" class="col">
               <div class="row pt-4">
-                <div class="col-md-5 col-lg-3 col-xl-2 pe-4 pe-md-0 me-lg-5 me-xl-5">
-                  <q-btn flat :label="i18n.header.iniciar_sessao" class="iniciar-sessao" @click="logar = !logar"/>
+                <div class="col-md-4 col-lg-3 col-xl-2 pe-4 pe-md-0 me-lg-5 me-xl-5 d-flex">
+                  <q-btn flat :label="i18n.header.iniciar_sessao" class="iniciar-sessao me-2" @click="logar = !logar"/>
+                  <q-btn unelevated round :icon="darkmode ? 'dark_mode' : 'light_mode'" class="iniciar-sessao me-2" style="padding: 0px 0px;" @click="mobileDarkMode"/>
+                  <div>
+                    <q-btn unelevated round icon="translate" class="iniciar-sessao me-2" style="padding: 0px 0px;"/>
+                    <q-menu  :content-class="darkmode ? 'dark-menu-linguagens' : 'menu-linguagens'" transition-show="scale" transition-hide="scale" :offset="[30, 0]">
+                      <q-list>
+                        <q-item tag="label" v-ripple class="dark-mode" v-for="(linguagem, i) in linguagens" :key="i" @click="emitSelectI18n(linguagem.country)">
+                          <q-item-section>
+                            <q-item-label style="font-family: Raleway;">{{ linguagem.name }}</q-item-label>
+                          </q-item-section>
+                          <q-item-section avatar>
+                            <q-img :src="require('../assets/flags/'+linguagem.img)" spinner-color="white" img-class="icones-flags" style="border-radius: 5px;" />
+                          </q-item-section>
+                        </q-item>
+                        <q-separator />
+                      </q-list>
+                    </q-menu>
+                  </div>
                 </div>
-                <div class="col-md-1 col-xl-1 me-4 me-lg-2 me-xl-1 ms-lg-1 ms-xl-4">
+                <!-- <div class="col-md-1 col-xl-1 me-4 me-lg-2 me-xl-1 ms-lg-1 ms-xl-4">
                   <q-btn unelevated round :icon="darkmode ? 'dark_mode' : 'light_mode'" class="iniciar-sessao" style="padding: 0px 0px;" @click="mobileDarkMode"/>
                 </div>
                 <div class="col-md-1 col-xl-1 ms-lg-1 ms-xl-0 ">
@@ -151,13 +168,13 @@
                           <q-item-label style="font-family: Raleway;">{{ linguagem.name }}</q-item-label>
                         </q-item-section>
                         <q-item-section avatar>
-                          <q-img :src="require('../assets/flags/'+linguagem.img)" spinner-color="white" />
+                          <q-img :src="require('../assets/flags/'+linguagem.img)" spinner-color="white" img-class="icones-flags" style="border-radius: 5px;" />
                         </q-item-section>
                       </q-item>
                       <q-separator />
                     </q-list>
                   </q-menu>
-                </div>
+                </div> -->
               </div>
             </div>
             <!-- DESKTOP -->
@@ -227,7 +244,7 @@
                             <q-item-section avatar>
                               <!-- <img :src="require(`${linguagem.img}`)" /> -->
                               <!-- <q-img :src="require(`${linguagem.img}`)" spinner-color="white" /> -->
-                              <q-img :src="require('../assets/flags/'+linguagem.img)" spinner-color="white" />
+                              <q-img :src="require('../assets/flags/'+linguagem.img)" spinner-color="white" img-class="icones-flags" style="border-radius: 5px;"/>
                             </q-item-section>
                           </q-item>
                           <q-separator />
@@ -247,8 +264,6 @@
             </div>
           </div>
         </q-toolbar-title>
-        <!-- <q-img :src="require(`~/assets/flags/us.png`)" spinner-color="white" /> -->
-        <!-- <q-img src="~/assets/flags/us.png" spinner-color="white" /> -->
       </q-toolbar>
     </q-header>
     <!-- Header -->
diff --git a/wbweb/src/locale/es.json b/wbweb/src/locale/es.json
index 95a37f8..b93cb49 100644
--- a/wbweb/src/locale/es.json
+++ b/wbweb/src/locale/es.json
@@ -1,6 +1,6 @@
 {
     "index": {
-        "bem_vindo": "Bienvenido a World Books",
+        "bem_vindo": "<span style='line-break: anywhere;'>Bienvenido</span> a World Books",
         "subtitulo": "Segunda plataforma más querida en el mundo",
         "descricao": "World Books es tu plataforma para conectarte con millones de libros y escritores de todo el mundo. Explora tu imaginación, desarrolla historias e interactúa con varios autores de todo el mundo.",
         "botoes": {
diff --git a/wbweb/src/locale/fr.json b/wbweb/src/locale/fr.json
index 17d1ca1..c18f52c 100644
--- a/wbweb/src/locale/fr.json
+++ b/wbweb/src/locale/fr.json
@@ -1,6 +1,6 @@
 {
     "index": {
-        "bem_vindo": "Bienvenue dans les livres du monde",
+        "bem_vindo": "<span style='line-break: anywhere;'>Bienvenue</span> dans les livres du monde",
         "subtitulo": "Deuxième plateforme la plus appréciée au monde",
         "descricao": "World Books est votre plateforme pour vous connecter à des millions de livres et d'écrivains du monde entier. Explorez votre imagination, développez des histoires et interagissez avec divers auteurs du monde entier.",
         "botoes": {
diff --git a/wbweb/src/locale/it.json b/wbweb/src/locale/it.json
index 8138795..c519b47 100644
--- a/wbweb/src/locale/it.json
+++ b/wbweb/src/locale/it.json
@@ -1,6 +1,6 @@
 {
     "index": {
-        "bem_vindo": "Benvenuti nei libri del mondo",
+        "bem_vindo": "<span style='line-break: anywhere;'>Benvenuti</span> nei libri del mondo",
         "subtitulo": "Seconda piattaforma più amata al mondo",
         "descricao": "World Books è la tua piattaforma per connetterti con milioni di libri e scrittori in tutto il mondo. Esplora la tua immaginazione, sviluppa storie e interagisci con vari autori in tutto il mondo.",
         "botoes": {
diff --git a/wbweb/src/locale/us.json b/wbweb/src/locale/us.json
index 5dbd479..debda2a 100644
--- a/wbweb/src/locale/us.json
+++ b/wbweb/src/locale/us.json
@@ -1,6 +1,6 @@
 {
     "index": {
-        "bem_vindo": "Welcome to World Books",
+        "bem_vindo": "<span style='line-break: anywhere;'>Welcome</span> to World Books",
         "subtitulo": "Second most loved platform in the world",
         "descricao": "World Books is your platform to connect you with millions of books and writers around the world. Explore your imagination, develop stories and interact with various authors around the world.",
         "botoes": {
diff --git a/wbweb/src/pages/Index.vue b/wbweb/src/pages/Index.vue
index 70e1b1a..8dc8d76 100644
--- a/wbweb/src/pages/Index.vue
+++ b/wbweb/src/pages/Index.vue
@@ -1,10 +1,10 @@
 <template>
 	<q-page :class="{'dark-bgindex': darkmode, 'bgindex': !darkmode}" >
 		<div class="row row_page">
-			<div class="col-12 col-sm-6">
+			<div class="col-12 col-sm-7">
 				<div class="row">
 					<div class="col-12 offset-sm-1">
-						<h1 class="welcomeWorldBooks">{{ i18n.bem_vindo }}</h1>
+						<h1 class="welcomeWorldBooks" v-html="i18n.bem_vindo"></h1>
 					</div>
 				</div>
 				<div class="row">