diff --git a/site/src/app.rs b/site/src/app.rs
index 40e7bac..8b9f6ad 100644
--- a/site/src/app.rs
+++ b/site/src/app.rs
@@ -90,7 +90,7 @@ fn LayoutWrapper(children: Children) -> impl IntoView {
     let default_class = default_page_class();
 
     view! {
-        <div class=default_class.wrapper class:min-h-screen=false>
+        <div class=default_class.wrapper class:min-h-screen=true>
             {children()}
         </div>
     }
@@ -147,7 +147,7 @@ fn Footer() -> impl IntoView {
     let year = Local::now().year();
 
     view! {
-        <footer class="sticky bottom-0 left-0 z-20 w-full p-4 bg-white border-t border-gray-200 shadow md:flex md:items-center md:justify-between md:p-6 dark:bg-slate-900 dark:border-gray-600">
+        <footer class="w-full fixed inset-x-0 z-50 bottom-0 p-4 bg-white border-t border-gray-200 shadow md:flex md:items-center md:justify-between md:p-6 dark:bg-slate-900 dark:border-gray-600">
             <span class="text-sm text-gray-500 sm:text-center dark:text-gray-400">
                 {format!("© {} ", year)}
                 <a href="https://github.com/GlooriousWalrus" class="hover:underline">
diff --git a/site/src/pages/about.rs b/site/src/pages/about.rs
index 6e57b70..28713dc 100644
--- a/site/src/pages/about.rs
+++ b/site/src/pages/about.rs
@@ -11,18 +11,16 @@ use crate::theme::TypographyClass;
 pub fn AboutPage() -> impl IntoView {
     view! {
         <Title text="Коваль | Про Коваль"/>
-        <Main
-            id="main"
-            class="max-w-[45rem] px-4 py-4 sm:px-6 lg:px-8 mx-auto text-gray-900 dark:text-gray-400"
-        >
-            <div class="pl-3">
+        <Main id="main">
+            // class="max-w-[45rem] px-4 py-4 sm:px-6 lg:px-8 mx-auto text-gray-900 dark:text-gray-400"
+            <div class="flex flex-col pl-3 max-w-[45rem] 2xl:h-screen landscape:h-full px-4 py-4 sm:px-6 lg:px-8 mx-auto text-gray-900 dark:text-gray-400">
                 // <!-- Announcement Banner -->
                 <Typography variant=TypographyVariant::H1 class=TypographyClass::H1.get()>
                     Про Коваль
                 </Typography>
+                <AboutTextBlock/>
             // <!-- End Announcement Banner -->
             </div>
-            <AboutTextBlock/>
 
         </Main>
     }
@@ -31,10 +29,11 @@ pub fn AboutPage() -> impl IntoView {
 #[component]
 fn AboutTextBlock() -> impl IntoView {
     view! {
-        <section class="max-w-[70rem] py-4 mx-auto">
-            <div class="border rounded-xl shadow-sm border-blue-600 dark:bg-slate-800 dark:border-slate-600 p-5 pt-2 mt-3">
+        <section class="max-w-[70rem] grow py-4 mx-auto">
+            <div class="border rounded-xl shadow-sm border-blue-600 dark:bg-slate-800 dark:border-slate-600 p-5 pt-2 mt-3 mb-20">
                 <Typography variant=TypographyVariant::H2 class=TypographyClass::H2.get()>
-                    Що?
+                    Що таке
+                    {"«Коваль»?"}
                 </Typography>
                 <Typography
                     variant=TypographyVariant::Paragraph
@@ -47,15 +46,15 @@ fn AboutTextBlock() -> impl IntoView {
                     >
                         Коваль
                     </a>
-                    - це безкоштовний вебзастосунок з відкритим вихідним кодом, створений для транслітерації з японської на українську, названий на честь
+                    {"— це безкоштовний вебзастосунок з відкритим вихідним кодом, створений для транслітерації з японської на українську, названий на честь"}
                     <a
                         class="font-semibold dark:text-violet-400"
                         href="https://uk.wikipedia.org/wiki/%D0%9A%D0%BE%D0%B2%D0%B0%D0%BB%D0%B5%D0%BD%D0%BA%D0%BE_%D0%9E%D0%BB%D0%B5%D0%BA%D1%81%D0%B0%D0%BD%D0%B4%D1%80_%D0%9E%D0%BB%D0%B5%D0%BA%D1%81%D0%B0%D0%BD%D0%B4%D1%80%D0%BE%D0%B2%D0%B8%D1%87_(%D1%81%D1%85%D0%BE%D0%B4%D0%BE%D0%B7%D0%BD%D0%B0%D0%B2%D0%B5%D1%86%D1%8C)"
                         target="_blank"
                     >
-                        Олександра Коваленка
+                        Олександра Коваленка.
                     </a>
-                    .
+
                 </Typography>
                 <Typography variant=TypographyVariant::H2 class=TypographyClass::H2.get()>
                     Навіщо він потрібен?
@@ -64,7 +63,7 @@ fn AboutTextBlock() -> impl IntoView {
                     variant=TypographyVariant::Paragraph
                     class=TypographyClass::Paragraph.get()
                 >
-                    Він був створений, щоб допомогти перекладачам стандартизувати та уточнити транслітерацію імен, назв та інших слів. Однак він також може бути корисним для тих, хто вивчає мову.
+                    {"Мета цього вебзастосунку — допомогти перекладачам стандартизувати та уточнити правильну транслітерацію імен, назв та інших слів. Однак він також може бути корисним для тих, хто вивчає мову."}
                 </Typography>
                 <Typography variant=TypographyVariant::H2 class=TypographyClass::H2.get()>
                     Як він працює?
@@ -73,47 +72,46 @@ fn AboutTextBlock() -> impl IntoView {
                     variant=TypographyVariant::Paragraph
                     class=TypographyClass::Paragraph.get()
                 >
-                    Цей сайт використовує модифіковану бібліотеку транслітератора
+
+                    Сайт використовує модифіковану бібліотеку транслітератора
                     <a
                         class="font-semibold dark:text-violet-400"
                         href="https://github.com/PSeitz/wana_kana_rust"
                         target="_blank"
                     >
-                        wana_kana_rust
+                        wana_kana_rust,
                     </a>
-                    , яка спочатку використовувалася для транслітерації між катаканою, хіраганою та ромадзі. Я модифікував ту бібліотеку, щоб спробувати конвертувати з хірагани/катакани в українську мову, використовуючи
+                    , яка спочатку використовувалася для транслітерації між катаканою, хіраганою та ромадзі. Модифікація наведеної бібліотеки допомогла створити транслітерацію хірагани/катакани українською мовою за використання
                     <a
                         class="font-semibold dark:text-violet-400"
                         target="_blank"
                         href="https://uk.wikipedia.org/wiki/%D0%AF%D0%BF%D0%BE%D0%BD%D1%81%D1%8C%D0%BA%D0%BE-%D1%83%D0%BA%D1%80%D0%B0%D1%97%D0%BD%D1%81%D1%8C%D0%BA%D1%96_%D1%81%D0%B8%D1%81%D1%82%D0%B5%D0%BC%D0%B8_%D1%82%D1%80%D0%B0%D0%BD%D1%81%D0%BA%D1%80%D0%B8%D0%BF%D1%86%D1%96%D1%97_%D1%82%D0%B0_%D1%82%D1%80%D0%B0%D0%BD%D1%81%D0%BB%D1%96%D1%82%D0%B5%D1%80%D0%B0%D1%86%D1%96%D1%97#%D0%9A%D0%BE%D0%B2%D0%B0%D0%BB%D0%B5%D0%BD%D0%BA%D0%BE_(2012)"
                     >
-                        стандарт Коваленко 2012
+                        системи транслітерації Коваленка (2012).
                     </a>
-                    .
                 </Typography>
                 <Typography
                     variant=TypographyVariant::Paragraph
                     class=TypographyClass::Paragraph.get()
                 >
-                    Тестування проводилося шляхом порівняння зі списком імен персонажів з різних манґ та аніме, складеною
+                    Для тестування використовувалася ручна транслітерація імен, що була створена
                     <a
                         class="font-semibold dark:text-violet-400"
                         href="https://t.me/HeiterkaEcchi"
                         target="_blank"
                     >
-                        Гейтеркою Еччі
+                        Гейтеркою Еччі,
                     </a>
-                    та іншими перекладачами. Без їхніх зусиль цей вебзастосунок не існував би!
+                    а також роботи інших перекладачів й перекладачок. Без їхніх зусиль цей вебзастосунок не існував би!
                 </Typography>
                 <Typography variant=TypographyVariant::H2 class=TypographyClass::H2.get()>
-                    Зауваження
+                    Важливо зазначити:
                 </Typography>
                 <Typography
                     variant=TypographyVariant::Paragraph
                     class=TypographyClass::Paragraph.get()
                 >
-                    Усі помилки є моїми власними й жодним чином не є результатом роботи будь-кого, на кого є посилання в цій роботі.
-                    Якщо ви знайшли будь-які помилки або недоліки, будь ласка, повідомте мені про це через
+                    Усі можливі помилки є моїми власними й жодним чином не є результатом роботи будь-кого, на кого є посилання в цій роботі. Якщо ви знайшли будь-які помилки або маєте зауваження, будь ласка, повідомте про це через
 
                     <a
                         class="font-semibold dark:text-violet-400"
@@ -125,9 +123,7 @@ fn AboutTextBlock() -> impl IntoView {
 
                     або
                     {"зв'яжіться"}
-                    зі мною в телеграмі. 
-                    
-                    Всі відгуки вітаються!
+                    зі мною у Телеграм. Також не соромтеся залишати відгуки, бо саме вони і є відзнакою й оцінкою моєї праці!
 
                 </Typography>
 
diff --git a/site/src/pages/transliterator.rs b/site/src/pages/transliterator.rs
index f5cea38..0ab59b6 100644
--- a/site/src/pages/transliterator.rs
+++ b/site/src/pages/transliterator.rs
@@ -35,8 +35,8 @@ pub fn Transliterator() -> impl IntoView {
     view! {
         <Title text="Коваль | Транслітератор"/>
         <main>
-            <div class="flex flex-col h-screen 
-            px-4 py-4 sm:px-6 lg:px-8 mx-auto ">
+            <div class="flex flex-col landscape:h-full
+            px-4 py-4 sm:px-6 lg:px-8 mx-auto min-h-screen">
                 <Toast hide_modal/>
                 <div class="flex flex-col flex-nowrap
                 self-center mx-auto min-w-[20rem] max-w-xs sm:max-w-2xl md:min-w-[42rem]">
@@ -251,54 +251,7 @@ fn SettingsSection(
     //     view! { <CaseSection/> }
     // );
 
-    view! {
-        <div>
-            // <button
-            // class="bg-gray-50 border border-gray-300
-            // text-gray-900 text-sm rounded-lg focus:ring-blue-500
-            // focus:border-blue-500 block p-2.5
-            // dark:bg-gray-700 dark:border-gray-600
-            // dark:placeholder-gray-400 dark:text-white
-            // dark:focus:ring-blue-500
-            // dark:focus:border-blue-500
-            // shadow-lg h-12 my-auto
-            // transition dark:hover:bg-gray-600
-            // flex flex-row items-center justify-center"
-            // on:click=move |evt: MouseEvent| {
-            // evt.prevent_default();
-            // evt.stop_propagation();
-            // set_settings_open(!settings_open());
-            // }
-            // >
-
-            // <svg
-            // class="h-full w-2/5"
-            // data-darkreader-inline-stroke=""
-            // aria-hidden="true"
-            // fill="none"
-            // stroke="currentColor"
-            // stroke-width="1.5"
-            // viewBox="0 0 24 24"
-            // xmlns="http://www.w3.org/2000/svg"
-            // >
-            // <path
-            // d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z"
-            // stroke-linecap="round"
-            // stroke-linejoin="round"
-            // ></path>
-            // <path
-            // d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-            // stroke-linecap="round"
-            // stroke-linejoin="round"
-            // ></path>
-            // </svg>
-            // <p class="text-center pl-2 py-0">{"Налаштування"}</p>
-            // </button>
-
-            // {message}
-            <CaseSection/>
-        </div>
-    }
+    view! { <CaseSection/> }
 }
 
 #[component]
@@ -331,8 +284,8 @@ fn CaseSection(
         .expect("to have found the getter provided");
 
     view! {
-        <div class="relative">
-            <h2 class="p-2.5 text-lg dark:text-gray-100 w-full">Регістр</h2>
+        <div class="grid justify-items-center mb-20">
+            <h2 class="p-2.5 text-lg dark:text-gray-100 max-w-fit">Регістр</h2>
             <div
 
                 // absolute left-0 mt-2