diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index 1b168b3..41b9bb4 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -20,6 +20,7 @@ main {
   display: flex;
   flex-direction: column;
   height: 100vh;
+  min-width: calc(100vw - 232px);
 }
 
 app-header {
@@ -43,9 +44,15 @@ app-header {
     height: calc(100vh - 240px);
     padding: 32px;
   }
+
+  main {
+    min-width: calc(100vw);
+  }
+
   app-sidebar {
     display: none;
   }
+
   app-sidebar-mobile {
     display: unset;
   }
diff --git a/src/app/components/summary/summary.component.html b/src/app/components/summary/summary.component.html
index 31dfc84..326bc0d 100644
--- a/src/app/components/summary/summary.component.html
+++ b/src/app/components/summary/summary.component.html
@@ -2,7 +2,9 @@
   <div class="header">
     <div class="title">Join 360</div>
     <div class="blue-bar"></div>
-    <div class="metrics-txt">Key Metrics at a Glance</div>
+    <div class="metrics-txt">
+      {{ "summary.headlineDescription" | translate }}
+    </div>
   </div>
   <div class="content">
     <div class="left-container">
@@ -16,7 +18,7 @@
           </div>
           <div class="details">
             <span>{{ displayNumberOfTaskStatus("todo") }}</span>
-            <p>To-do</p>
+            <p>{{ "summary.todo" | translate }}</p>
           </div>
         </div>
         <div class="todo-done" routerLink="/board">
@@ -25,7 +27,7 @@
           </div>
           <div class="details">
             <span>{{ displayNumberOfTaskStatus("done") }}</span>
-            <p>Done</p>
+            <p>{{ "summary.done" | translate }}</p>
           </div>
         </div>
       </div>
@@ -36,7 +38,7 @@
             <img src="./../../../assets/img/summary/urgent.svg" alt="" />
             <div class="details">
               <span>{{ displayNumberOfTaskStatusUrgent().length }}</span>
-              <p>Done</p>
+              <p>{{ "summary.urgent" | translate }}</p>
             </div>
           </div>
           <div class="line"></div>
@@ -45,9 +47,11 @@
               <div>
                 @if (displayNumberOfTaskStatusUrgent().length) {
                 <span>{{ nextUrgentTasks() }}</span>
-                <p class="spacer">Upcoming Deadline</p>
+                <p class="spacer">
+                  {{ "summary.upcomingDeadline" | translate }}
+                </p>
                 } @else {
-                <p>No Deadline</p>
+                <p>{{ "summary.noDeadline" | translate }}</p>
                 }
               </div>
             </div>
@@ -59,19 +63,31 @@
         <div class="tasks" routerLink="/board">
           <div class="details">
             <span>{{ displayNumberOfAllTasks() }}</span>
-            <p>Task<br />in Board</p>
+            <p>
+              {{ "summary.taskBoard0" | translate }}<br />{{
+                "summary.taskBoard1" | translate
+              }}
+            </p>
           </div>
         </div>
         <div class="tasks" routerLink="/board">
           <div class="details">
             <span>{{ displayNumberOfTaskStatus("inprogress") }}</span>
-            <p>Task in<br />Progress</p>
+            <p>
+              {{ "summary.taskProgress0" | translate }}<br />{{
+                "summary.taskProgress1" | translate
+              }}
+            </p>
           </div>
         </div>
         <div class="tasks" routerLink="/board">
           <div class="details">
             <span>{{ displayNumberOfTaskStatus("awaitfeedback") }}</span>
-            <p>Awaiting<br />Feedback</p>
+            <p>
+              {{ "summary.taskAwaitingFeedback0" | translate }}<br />{{
+                "summary.taskAwaitingFeedback1" | translate
+              }}
+            </p>
           </div>
         </div>
       </div>
diff --git a/src/app/components/summary/summary.component.scss b/src/app/components/summary/summary.component.scss
index 33105ec..d8806f7 100644
--- a/src/app/components/summary/summary.component.scss
+++ b/src/app/components/summary/summary.component.scss
@@ -118,6 +118,7 @@ section {
   display: flex;
   flex-direction: column;
   align-items: center;
+  width: 130px;
   p {
     padding: 0 24px;
     font-size: 20px;
@@ -190,8 +191,9 @@ section {
 @media screen and (max-width: 700px) {
   .header {
     flex-direction: column;
-    align-items: flex-start;
+    align-items: start;
     padding-left: 0;
+    width: 100%;
     height: 100%;
     .metrics-txt {
       padding-left: 0;
@@ -264,6 +266,7 @@ section {
   }
 
   .details {
+    width: 100px;
     p {
       font-size: 16px;
     }
@@ -291,11 +294,19 @@ section {
     height: 100%;
   }
 
+  .header {
+    .title {
+      font-size: 47px;
+    }
+    .metrics-txt {
+      font-size: 20px;
+    }
+  }
+
   .todo-done,
   .urgent,
   .tasks {
     width: 100%;
-    height: 120px;
     border-radius: 30px;
     .line {
       height: 80px;
@@ -312,7 +323,15 @@ section {
   }
 }
 
-@media screen and (max-width: 350px) {
+@media screen and (max-width: 400px) {
+  .details {
+    p {
+      font-size: 12px;
+    }
+  }
+}
+
+@media screen and (max-width: 365px) {
   .todo-done,
   .urgent,
   .tasks {
@@ -320,6 +339,7 @@ section {
   }
 
   .details {
+    width: 70px;
     p {
       padding: 0 12px;
       font-size: 14px;
diff --git a/src/app/components/summary/summary.component.ts b/src/app/components/summary/summary.component.ts
index c0afd38..e5d78d0 100644
--- a/src/app/components/summary/summary.component.ts
+++ b/src/app/components/summary/summary.component.ts
@@ -1,12 +1,12 @@
 import { Component } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { TaskService } from '../../services/task.service';
-import { Task } from '../../interfaces/task.interface';
+import { TranslateModule } from '@ngx-translate/core';
 
 @Component({
   selector: 'app-summary',
   standalone: true,
-  imports: [RouterModule],
+  imports: [RouterModule, TranslateModule],
   templateUrl: './summary.component.html',
   styleUrl: './summary.component.scss',
 })
diff --git a/src/app/shared/components/header/header.component.html b/src/app/shared/components/header/header.component.html
index c973657..21ebe1c 100644
--- a/src/app/shared/components/header/header.component.html
+++ b/src/app/shared/components/header/header.component.html
@@ -5,7 +5,7 @@
       src="./../../../../assets/img/header/logo.svg"
       alt="logo"
     />
-    <div class="headline">Kanban Project Management Tool</div>
+    <div class="headline">{{ "header.headline" | translate }}</div>
     <div class="left-frame">
       <div class="img-help" routerLink="help">
         <img src="./../../../../assets/img/header/help.svg" alt="" />
diff --git a/src/app/shared/components/header/header.component.scss b/src/app/shared/components/header/header.component.scss
index acb0ae0..2411d92 100644
--- a/src/app/shared/components/header/header.component.scss
+++ b/src/app/shared/components/header/header.component.scss
@@ -43,10 +43,12 @@ section {
   display: flex;
   align-items: center;
   width: 56px;
-  cursor: pointer;
-  &:hover {
-    filter: invert(60%) sepia(58%) saturate(1629%) hue-rotate(165deg)
-      brightness(92%) contrast(92%);
+  img {
+    cursor: pointer;
+    &:hover {
+      filter: invert(60%) sepia(58%) saturate(1629%) hue-rotate(165deg)
+        brightness(92%) contrast(92%);
+    }
   }
 }
 
diff --git a/src/app/shared/components/header/header.component.ts b/src/app/shared/components/header/header.component.ts
index c6a51be..b22509e 100644
--- a/src/app/shared/components/header/header.component.ts
+++ b/src/app/shared/components/header/header.component.ts
@@ -2,11 +2,12 @@ import { Component, HostListener } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { NavbarComponent } from '../navbar/navbar.component';
 import { CommonModule } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
 
 @Component({
   selector: 'app-header',
   standalone: true,
-  imports: [RouterModule, NavbarComponent, CommonModule],
+  imports: [RouterModule, NavbarComponent, CommonModule, TranslateModule],
   templateUrl: './header.component.html',
   styleUrl: './header.component.scss',
 })
diff --git a/src/app/shared/components/help/help.component.scss b/src/app/shared/components/help/help.component.scss
index 749ffbe..2b83f09 100644
--- a/src/app/shared/components/help/help.component.scss
+++ b/src/app/shared/components/help/help.component.scss
@@ -1,4 +1,8 @@
 section {
+  max-width: 100%;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  white-space: normal;
   padding-right: 64px;
   a {
     text-decoration: none;
@@ -48,7 +52,7 @@ h3 {
   margin-top: 24px;
   td:first-child {
     display: flex;
-    font-size: 27px;
+    font-size: 20px;
     font-weight: 700;
     margin-right: 35px;
   }
@@ -69,9 +73,18 @@ h3 {
   }
 }
 
-@media (max-width: 634px) {
+@media screen and (max-width: 500px) {
   h1 {
-    font-size: 36px;
-    font-weight: 700;
+    font-size: 47px;
+  }
+
+  h2 {
+    font-size: 27px;
+  }
+
+  .content-table {
+    td:first-child {
+      margin-right: 12px;
+    }
   }
 }
diff --git a/src/app/shared/components/imprint/imprint.component.scss b/src/app/shared/components/imprint/imprint.component.scss
index ce1e9af..830b792 100644
--- a/src/app/shared/components/imprint/imprint.component.scss
+++ b/src/app/shared/components/imprint/imprint.component.scss
@@ -1,5 +1,8 @@
 section {
+  max-width: 100%;
   word-wrap: break-word;
+  overflow-wrap: break-word;
+  white-space: normal;
   padding-right: 64px;
 }
 
@@ -12,7 +15,7 @@ section {
     width: 32px;
     height: 32px;
     cursor: pointer;
-    margin-left: 48px;
+    margin-left: 12px;
     &:hover {
       width: 36px;
       height: 36px;
@@ -25,6 +28,7 @@ section {
 h1 {
   font-size: 61px;
   font-weight: 700;
+  width: 85%;
   padding-bottom: 24px;
 }
 
@@ -61,3 +65,13 @@ a {
     padding-right: 0;
   }
 }
+
+@media screen and (max-width: 500px) {
+  h1 {
+    font-size: 47px;
+  }
+
+  h2 {
+    font-size: 27px;
+  }
+}
diff --git a/src/app/shared/components/navbar/navbar.component.html b/src/app/shared/components/navbar/navbar.component.html
index 8388639..ba03b73 100644
--- a/src/app/shared/components/navbar/navbar.component.html
+++ b/src/app/shared/components/navbar/navbar.component.html
@@ -1,13 +1,13 @@
 @if (navbarVisible) {
 <nav class="navbar d-none">
-  <div class="link" routerLink="imprint">
-    <span>Legal Notice</span>
-  </div>
   <div class="link" routerLink="privacy-policy">
-    <span>Privacy Policy</span>
+    <span>{{ "navbar.privacyPolicy" | translate }}</span>
+  </div>
+  <div class="link" routerLink="imprint">
+    <span>{{ "navbar.legalNotice" | translate }}</span>
   </div>
   <div class="link" onclick="logout()">
-    <span>Log out</span>
+    <span>{{ "navbar.logout" | translate }}</span>
   </div>
 </nav>
 } @else if (navbarLanguageVisible) {
@@ -19,7 +19,7 @@
       active: langService.currentLang === 'en'
     }"
   >
-    <span>English</span>
+    <span>{{ "navbar.english" | translate }}</span>
   </div>
   <div
     class="link"
@@ -28,7 +28,7 @@
       active: langService.currentLang === 'de'
     }"
   >
-    <span>German</span>
+    <span>{{ "navbar.german" | translate }}</span>
   </div>
 </nav>
 }
diff --git a/src/app/shared/components/navbar/navbar.component.scss b/src/app/shared/components/navbar/navbar.component.scss
index a7a4ae0..06a1154 100644
--- a/src/app/shared/components/navbar/navbar.component.scss
+++ b/src/app/shared/components/navbar/navbar.component.scss
@@ -25,6 +25,12 @@
   border-radius: 8px;
   color: var(--white);
   cursor: pointer;
+  span {
+    width: 118px;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+    white-space: normal;
+  }
   &:hover {
     background-color: var(--very-dark-blue);
     span {
diff --git a/src/app/shared/components/navbar/navbar.component.ts b/src/app/shared/components/navbar/navbar.component.ts
index 1227d0b..69b4764 100644
--- a/src/app/shared/components/navbar/navbar.component.ts
+++ b/src/app/shared/components/navbar/navbar.component.ts
@@ -3,11 +3,12 @@ import { RouterModule } from '@angular/router';
 import { HeaderComponent } from '../header/header.component';
 import { LanguageService } from '../../../services/language.service';
 import { CommonModule } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
 
 @Component({
   selector: 'app-navbar',
   standalone: true,
-  imports: [RouterModule, HeaderComponent, CommonModule],
+  imports: [RouterModule, HeaderComponent, CommonModule, TranslateModule],
   templateUrl: './navbar.component.html',
   styleUrl: './navbar.component.scss',
 })
diff --git a/src/app/shared/components/privacy-policy/privacy-policy.component.scss b/src/app/shared/components/privacy-policy/privacy-policy.component.scss
index e31b6fd..e96845f 100644
--- a/src/app/shared/components/privacy-policy/privacy-policy.component.scss
+++ b/src/app/shared/components/privacy-policy/privacy-policy.component.scss
@@ -1,5 +1,8 @@
 section {
+  max-width: 100%;
   word-wrap: break-word;
+  overflow-wrap: break-word;
+  white-space: normal;
   padding-right: 64px;
 }
 
@@ -12,7 +15,7 @@ section {
     width: 32px;
     height: 32px;
     cursor: pointer;
-    margin-left: 48px;
+    margin-left: 12px;
     &:hover {
       width: 36px;
       height: 36px;
@@ -25,6 +28,7 @@ section {
 h1 {
   font-size: 61px;
   font-weight: 700;
+  width: 80%;
 }
 
 h2 {
@@ -67,3 +71,13 @@ a {
     padding-right: 0;
   }
 }
+
+@media screen and (max-width: 500px) {
+  h1 {
+    font-size: 47px;
+  }
+
+  h2 {
+    font-size: 27px;
+  }
+}
diff --git a/src/assets/i18n/de.json b/src/assets/i18n/de.json
index ac60abc..c15eb8e 100644
--- a/src/assets/i18n/de.json
+++ b/src/assets/i18n/de.json
@@ -1,4 +1,31 @@
 {
+  "header": {
+    "headline": "Kanban Projektmanagement Werkzeug"
+  },
+  "navbar": {
+    "privacyPolicy": "Datenschutzerklärung",
+    "legalNotice": "Rechtlicher Hinweis",
+    "logout": "Abmelden",
+    "english": "Englisch",
+    "german": "Deutsch"
+  },
+  "summary": {
+    "headlineDescription": "Schlüsselmetriken auf einen Blick",
+    "morning": "Guten Morgen",
+    "afternoon": "Guten Tag",
+    "evening": "Guten Abend",
+    "todo": "Zu tun",
+    "done": "Fertig",
+    "urgent": "Dringend",
+    "upcomingDeadline": "Bevorstehende Frist",
+    "noDeadline": "Keine Fristen",
+    "taskBoard0": "Aufgaben",
+    "taskBoard1": "im Brett",
+    "taskProgress0": "Laufende",
+    "taskProgress1": "Aufgaben",
+    "taskAwaitingFeedback0": "Warten auf",
+    "taskAwaitingFeedback1": "Rückmeldung"
+  },
   "help": {
     "header": "Hilfe",
     "welcome": "Willkommen auf der Hilfeseite für Join, Ihrem Leitfaden für die Verwendung unseres Kanban-Projektmanagement-Tools. Hier erhalten Sie einen Überblick darüber, was Join ist, wie Sie davon profitieren können und wie Sie es verwenden.",
@@ -23,7 +50,7 @@
     "footer": "Viel Spaß bei der Nutzung von Join!"
   },
   "imprint": {
-    "headline": "Imprint",
+    "headline": "Rechtliche Hinweise (Impressum)",
     "tmg": "Angaben gemäß §5 TMG",
     "contact": "Kontakt",
     "tel": "Telefon",
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index 6a3a156..817797d 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -1,4 +1,31 @@
 {
+  "header": {
+    "headline": "Kanban Project Management Tool"
+  },
+  "navbar": {
+    "privacyPolicy": "Privacy policy",
+    "legalNotice": "Legal notice",
+    "logout": "Abmelden",
+    "english": "English",
+    "german": "German"
+  },
+  "summary": {
+    "headlineDescription": "Key Metrics at a Glance",
+    "morning": "Good Morning",
+    "afternoon": "Good Afternoon",
+    "evening": "Good Evening",
+    "todo": "To-do",
+    "done": "Done",
+    "urgent": "Urgent",
+    "upcomingDeadline": "Upcoming Deadline",
+    "noDeadline": "No Deadline",
+    "taskBoard0": "Tasks in",
+    "taskBoard1": "Board",
+    "taskProgress0": "Tasks in",
+    "taskProgress1": "Progress",
+    "taskAwaitingFeedback0": "Awaiting",
+    "taskAwaitingFeedback1": "Feedback"
+  },
   "help": {
     "header": "Help",
     "welcome": "Welcome to the help page for Join, your guide to using our kanban project management tool. Here, we'll provide an overview of what Join is, how it can benefit you, and how to use it.",
@@ -23,7 +50,7 @@
     "footer": "Enjoy using Join!"
   },
   "imprint": {
-    "headline": "Imprint",
+    "headline": "Legal notice (Imprint)",
     "tmg": "Information according to §5 TMG",
     "contact": "Contact",
     "tel": "Telephone",