diff --git a/arai-frontend/src/app/cost-view/cost-view.component.html b/arai-frontend/src/app/cost-view/cost-view.component.html
index 324bb44..48289bb 100644
--- a/arai-frontend/src/app/cost-view/cost-view.component.html
+++ b/arai-frontend/src/app/cost-view/cost-view.component.html
@@ -1,3 +1,4 @@
+<div class="main">  
 <div class="legal-costs">
     Przewidywalne minimalne koszta:
     @if(costData !== null) {
@@ -9,7 +10,9 @@
 </div>
 
 
-<h1 class="bait"> Chcesz zminimalizować koszta aż o <strong> 90%? </strong> </h1>
+<h1 class="bait"> Chcesz zminimalizować koszta aż do <strong> 90%? </strong> </h1>
 <div class="center-button"> 
 <button mat-raised-button color="primary" class="find-mediator" type="submit" (click)="onSubmit()" class="submit-button">Znajdź Mediatora</button>
+</div>
+
 </div>
\ No newline at end of file
diff --git a/arai-frontend/src/app/cost-view/cost-view.component.scss b/arai-frontend/src/app/cost-view/cost-view.component.scss
index b8d2ff5..2de4eb7 100644
--- a/arai-frontend/src/app/cost-view/cost-view.component.scss
+++ b/arai-frontend/src/app/cost-view/cost-view.component.scss
@@ -1,44 +1,51 @@
 .legal-costs {
-    font-family: 'Times New Roman', serif;
-    color: #2a2a2a; // Dark text for readability
-    background-color: #f5f5f5; // Light background to keep the content subtle
-    padding: 20px;
-    border: 1px solid #ddd; // Slight border for definition
-    border-radius: 5px; // Soften the edges for a modern look
-    font-size: 16px;
+  font-family: 'Times New Roman', serif;
+  color: #2a2a2a;
+  background-color: #f5f5f5;
+  padding: 20px;
+  border: 1px solid #ddd;
+  border-radius: 5px;
+  font-size: 16px;
+  width: 300px; 
+  margin: 0 auto;
+}
 
-    .cost-details {
-      margin-top: 10px;
-      padding: 10px;
-      background-color: #fff; // A clean background for the cost details
-      border-left: 5px solid #004085; // A striking left border for emphasis
-      font-size: 24px;
-  
-      span {
-        font-weight: bold; // Make the dynamic content pop
-      }
-  
-      .cost {
-        color: #007bff; // A professional blue for costs
-      }
-  
-      .time {
-        color: #28a745; // A hopeful green for the time
-      }
-    }
-  }
-  
+.main {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.legal-costs .cost-details {
+  margin-top: 10px;
+  padding: 10px;
+  background-color: #fff;
+  border-left: 5px solid #004085;
+  font-size: 24px;
+}
+
+.legal-costs .cost-details span {
+  font-weight: bold;
+}
+
+.legal-costs .cost-details .cost {
+  color: #007bff;
+}
+
+.legal-costs .cost-details .time {
+  color: #28a745;
+}
 
 .bait {
-    text-align: center;
+  text-align: center;
 }
 
 .find-mediator {
-    width: 100%;
+  width: 100%;
 }
 
 .center-button {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
\ No newline at end of file
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}