diff --git a/src/app/demo-models-page/advertise-analysis/advertise-analysis.component.html b/src/app/demo-models-page/advertise-analysis/advertise-analysis.component.html
index 16296d9..529eb54 100644
--- a/src/app/demo-models-page/advertise-analysis/advertise-analysis.component.html
+++ b/src/app/demo-models-page/advertise-analysis/advertise-analysis.component.html
@@ -1,12 +1,12 @@
 <div class="sentiment-container">
     <div class="title-container">
         <div class="title">ANAIZA TEKSTU REKLAMY</div>
-        <button (click)="goToMainPage()" class="button-primary main-page-button">strona główna</button>
+        <button (click)="goToMainPage()" class="button-primary main-page-button advertise-btn">strona główna</button>
     </div>
 
     <div class="text">Ola J cos tu se wpiszesz albo nie xD</div>
     <div class="ready-examples-button">
-        <button (click)="analyseAdvert(true)" class="button-primary">Wyolsuj gotowy przykład</button>
+        <button (click)="analyseAdvert(true)" class="button-primary advertise-btn">Wyolsuj gotowy przykład</button>
     </div>
     <div class="form-container">
         <div [formGroup]="errorsForm">
@@ -15,7 +15,7 @@
             </div>
         </div>
         <div class="button-container">
-            <button [disabled]="!errorsForm.valid" (click)="analyseAdvert(false)" class="button-primary">Analizuj tekst</button>
+            <button [disabled]="!errorsForm.valid" (click)="analyseAdvert(false)" class="button-primary advertise-btn">Analizuj tekst</button>
         </div>
     </div>
     <div *ngIf="correctedTextSet" class="corrected-text-container">
diff --git a/src/app/demo-models-page/advertise-analysis/advertise-analysis.component.scss b/src/app/demo-models-page/advertise-analysis/advertise-analysis.component.scss
index f9de606..92e11be 100644
--- a/src/app/demo-models-page/advertise-analysis/advertise-analysis.component.scss
+++ b/src/app/demo-models-page/advertise-analysis/advertise-analysis.component.scss
@@ -67,3 +67,18 @@
     justify-content: center;
     padding-top: 40px
 }
+
+.advertise-btn {
+    background: linear-gradient(35deg, rgba(0, 0, 0, 1) 0%, rgb(135, 135, 21) 50%, rgba(0, 0, 0, 1) 100%) !important;
+    background-repeat: no-repeat;
+
+    &:hover {
+        background: linear-gradient(35deg, rgba(0, 0, 0, 1) 0%, rgb(152, 152, 48) 50%, rgba(0, 0, 0, 1) 100%) !important;
+        background-repeat: no-repeat;
+    }
+
+    &:disabled {
+        background: linear-gradient(35deg, rgba(106, 106, 106, 1) 0%, rgb(166, 166, 166) 50%, rgba(106, 106, 106, 1) 100%) !important;
+        background-repeat: no-repeat;
+    }
+}
diff --git a/src/app/demo-models-page/errors-correction-page/errors-correction-page.component.html b/src/app/demo-models-page/errors-correction-page/errors-correction-page.component.html
index 5b225ba..6458581 100644
--- a/src/app/demo-models-page/errors-correction-page/errors-correction-page.component.html
+++ b/src/app/demo-models-page/errors-correction-page/errors-correction-page.component.html
@@ -1,12 +1,12 @@
 <div class="sentiment-container">
     <div class="title-container">
         <div class="title">POPRAWIANIE BŁĘDÓW</div>
-        <button (click)="goToMainPage()" class="button-primary main-page-button">strona główna</button>
+        <button (click)="goToMainPage()" class="button-primary main-page-button error-btn">strona główna</button>
     </div>
 
     <div class="text">ja cos tu se wpiszesz albo nie xD</div>
     <div class="ready-examples-button">
-        <button (click)="correctErrors(true)" class="button-primary">Wyolsuj gotowy przykład</button>
+        <button (click)="correctErrors(true)" class="button-primary error-btn">Wyolsuj gotowy przykład</button>
     </div>
     <div class="form-container">
         <div [formGroup]="errorsForm">
@@ -15,13 +15,16 @@
             </div>
         </div>
         <div class="button-container">
-            <button [disabled]="!errorsForm.valid" (click)="correctErrors(false)" class="button-primary">Popraw tekst</button>
+            <button [disabled]="!errorsForm.valid" (click)="correctErrors(false)" class="button-primary error-btn">Popraw
+                tekst</button>
         </div>
     </div>
     <div *ngIf="correctedTextSet" class="corrected-text-container">
         <ng-container *ngIf="correctedTextLoading; else loading">
-            <div class="corrected-title">Poprawiony tekst:</div>
-            <div class="corrected-text">{{correctedText}}</div>
+            <ng-container *ngIf="!error; else error">
+                <div class="corrected-title">Poprawiony tekst:</div>
+                <div class="corrected-text">{{correctedText}}</div>
+            </ng-container>
         </ng-container>
     </div>
 </div>
@@ -29,3 +32,6 @@
 <ng-template #loading>
     <div class="spinner"><mat-spinner></mat-spinner></div>
 </ng-template>
+<ng-template #error>
+    <div class="spinner error">Wystąpił nieoczekiwany błąd.</div>
+</ng-template>
diff --git a/src/app/demo-models-page/errors-correction-page/errors-correction-page.component.scss b/src/app/demo-models-page/errors-correction-page/errors-correction-page.component.scss
index c697f3c..133764a 100644
--- a/src/app/demo-models-page/errors-correction-page/errors-correction-page.component.scss
+++ b/src/app/demo-models-page/errors-correction-page/errors-correction-page.component.scss
@@ -67,3 +67,20 @@
     justify-content: center;
     padding-top: 40px
 }
+
+.error {
+    color: white
+}
+
+.error-btn{
+    background: linear-gradient(35deg, rgba(0, 0, 0, 1) 0%, rgb(19, 133, 17) 50%, rgba(0, 0, 0, 1) 100%) !important;
+    background-repeat: no-repeat;
+    &:hover{
+        background: linear-gradient(35deg, rgba(0, 0, 0, 1) 0%, rgb(38, 163, 36) 50%, rgba(0, 0, 0, 1) 100%) !important;
+    background-repeat: no-repeat;
+    }
+    &:disabled{
+        background: linear-gradient(35deg, rgba(106, 106, 106, 1) 0%, rgb(166, 166, 166) 50%, rgba(106, 106, 106, 1) 100%) !important;
+        background-repeat: no-repeat;
+    }
+}
diff --git a/src/app/demo-models-page/errors-correction-page/errors-correction-page.component.ts b/src/app/demo-models-page/errors-correction-page/errors-correction-page.component.ts
index d50c5a7..c9fd35f 100644
--- a/src/app/demo-models-page/errors-correction-page/errors-correction-page.component.ts
+++ b/src/app/demo-models-page/errors-correction-page/errors-correction-page.component.ts
@@ -12,7 +12,8 @@ import { environment } from 'src/environments/environment';
 export class ErrorsCorrectionPageComponent implements OnInit {
 
     correctedTextLoading = false;
-    correctedTextSet= false;
+    correctedTextSet = false;
+    error = false;
     correctedText!: string;
     randomSampleList = [
         'krul wladyslaw jagiello zwyciezyl w bitwie pod grunwaldem',
@@ -39,6 +40,7 @@ export class ErrorsCorrectionPageComponent implements OnInit {
     }
 
     correctErrors(isRandomSample: boolean): void {
+        this.error = false
         let sentence = ''
         this.correctedTextSet = true
         this.correctedTextLoading = false;
@@ -53,6 +55,11 @@ export class ErrorsCorrectionPageComponent implements OnInit {
             next: (resp: any) => {
                 this.correctedText = resp.predictions[0].generated_text
                 this.correctedTextLoading = true;
+            },
+            error: () => {
+                this.correctedTextLoading = true;
+                this.error = true
+                console.log('error')
             }
         })
 
diff --git a/src/app/demo-models-page/facebook-analysis/facebook-analysis.component.html b/src/app/demo-models-page/facebook-analysis/facebook-analysis.component.html
index 75f7c19..6c7325e 100644
--- a/src/app/demo-models-page/facebook-analysis/facebook-analysis.component.html
+++ b/src/app/demo-models-page/facebook-analysis/facebook-analysis.component.html
@@ -1,7 +1,7 @@
 <div class="facebook-analysis-container">
     <div class="title-container">
         <div class="title">ANALIZA POSTA Z FACEBOOKA</div>
-        <button (click)="goToMainPage()" class="button-primary main-page-button">strona główna</button>
+        <button (click)="goToMainPage()" class="button-primary main-page-button face-btn">strona główna</button>
     </div>
     <div class="text">cos tu sie wpisze</div>
     <div class="form-container">
@@ -11,39 +11,41 @@
             </div>
         </div>
         <div class="button-container">
-            <button [disabled]="!linkForm.valid" (click)="getComments()" class="button-primary">Analizuj
+            <button [disabled]="!linkForm.valid" (click)="getComments()" class="button-primary face-btn">Analizuj
                 komentarze</button>
         </div>
     </div>
     <div class="results-table" *ngIf="analysisStart">
         <ng-container *ngIf="analysisLoading; else loading">
             <ng-container *ngIf="commentStatus; else commentError">
-            <div class="info-container">
-                <div class="post-title">Treść posta</div>
-                <div class="post">
-                    {{post}}
-                </div>
-            </div>
-            <div class="analysis-results">
-                <div>
-                    <div class="post-title">Komentarze</div>
-                    <div *ngFor="let res of results">
-                        <div class="result-row">
-                            <div class="sentence">{{res.sentence}}</div>
-                            <div [ngSwitch]="res.label">
-                                <div class="label-0" *ngSwitchCase="0">Negatywny</div>
-                                <div class="label-1" *ngSwitchCase="1">Pozytywny</div>
-                                <div class="label-2" *ngSwitchCase="2">Neutralny</div>
-                            </div>
+                <ng-container *ngIf="!error; else error">
+                    <div class="info-container">
+                        <div class="post-title">Treść posta</div>
+                        <div class="post">
+                            {{post}}
                         </div>
                     </div>
-                </div>
-                <div class="chart">
-                    <canvas baseChart width="300" height="300" [data]="barChartData" [options]="barChartOptions"
-                        [plugins]="barChartPlugins" [legend]="barChartLegend" [type]="'bar'">
-                    </canvas>
-                </div>
-            </div>
+                    <div class="analysis-results">
+                        <div>
+                            <div class="post-title">Komentarze</div>
+                            <div *ngFor="let res of results">
+                                <div class="result-row">
+                                    <div class="sentence">{{res.sentence}}</div>
+                                    <div [ngSwitch]="res.label">
+                                        <div class="label-0" *ngSwitchCase="0">Negatywny</div>
+                                        <div class="label-1" *ngSwitchCase="1">Pozytywny</div>
+                                        <div class="label-2" *ngSwitchCase="2">Neutralny</div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="chart">
+                            <canvas baseChart width="300" height="300" [data]="barChartData" [options]="barChartOptions"
+                                [plugins]="barChartPlugins" [legend]="barChartLegend" [type]="'bar'">
+                            </canvas>
+                        </div>
+                    </div>
+                </ng-container>
             </ng-container>
         </ng-container>
     </div>
@@ -55,3 +57,7 @@
 <ng-template #commentError>
     <div class="comment-error">Nie udało się pobrać komentarzy</div>
 </ng-template>
+
+<ng-template #error>
+    <div class="comment-error">Wystąpił nieoczekiwany błąd.</div>
+</ng-template>
diff --git a/src/app/demo-models-page/facebook-analysis/facebook-analysis.component.scss b/src/app/demo-models-page/facebook-analysis/facebook-analysis.component.scss
index 4f075ae..564c51d 100644
--- a/src/app/demo-models-page/facebook-analysis/facebook-analysis.component.scss
+++ b/src/app/demo-models-page/facebook-analysis/facebook-analysis.component.scss
@@ -104,3 +104,16 @@
     color:white;
     font-size:20px
 }
+
+.face-btn{
+    background: linear-gradient(35deg, rgb(34, 34, 34) 0%, rgb(20, 43, 159) 50%, rgb(46, 46, 46) 100%) !important;
+    background-repeat: no-repeat;
+    &:hover{
+        background: linear-gradient(35deg, rgba(0, 0, 0, 1) 0%, rgb(52, 77, 200) 50%, rgba(0, 0, 0, 1) 100%) !important;
+        background-repeat: no-repeat;
+    }
+    &:disabled{
+        background: linear-gradient(35deg, rgba(106, 106, 106, 1) 0%, rgb(166, 166, 166) 50%, rgba(106, 106, 106, 1) 100%) !important;
+        background-repeat: no-repeat;
+    }
+}
diff --git a/src/app/demo-models-page/facebook-analysis/facebook-analysis.component.ts b/src/app/demo-models-page/facebook-analysis/facebook-analysis.component.ts
index 7ef2241..911a50c 100644
--- a/src/app/demo-models-page/facebook-analysis/facebook-analysis.component.ts
+++ b/src/app/demo-models-page/facebook-analysis/facebook-analysis.component.ts
@@ -18,7 +18,8 @@ export class FacebookAnalysisComponent implements OnInit {
     results: { label: number, score: number, sentence: string }[] = []
     analysisStart = false;
     analysisLoading = false;
-    commentStatus = false;
+    commentStatus = true;
+    error = false;
     post!: string;
     public barChartLegend = true;
     public barChartPlugins = [];
@@ -79,6 +80,11 @@ export class FacebookAnalysisComponent implements OnInit {
             next: () => {
                 console.log(2)
                 this.analysisLoading = true
+            },
+            error: () => {
+                this.analysisLoading = true
+                this.error = true
+                console.log('error')
             }
         })
     }
diff --git a/src/app/demo-models-page/irony-analysis/irony-analysis.component.html b/src/app/demo-models-page/irony-analysis/irony-analysis.component.html
index 910793b..f1fd5c7 100644
--- a/src/app/demo-models-page/irony-analysis/irony-analysis.component.html
+++ b/src/app/demo-models-page/irony-analysis/irony-analysis.component.html
@@ -1,12 +1,12 @@
 <div class="sentiment-container">
     <div class="title-container">
         <div class="title">WYKRYWANIE IRONII</div>
-        <button (click)="goToMainPage()" class="button-primary main-page-button">strona główna</button>
+        <button (click)="goToMainPage()" class="button-primary main-page-button irony-btn">strona główna</button>
     </div>
 
     <div class="text">Ola G cos tu se wpiszesz albo nie xD</div>
     <div class="ready-examples-button">
-        <button (click)="analyzeSentiment(true)" class="button-primary">Wyolsuj gotowe przykłady</button>
+        <button (click)="analyzeSentiment(true)" class="button-primary irony-btn">Wyolsuj gotowe przykłady</button>
     </div>
     <div class="form-container">
         <div class="form">
@@ -21,9 +21,9 @@
                 </ng-container>
             </div>
             <div class="button-container">
-                <button (click)="duplicateField()" class="button-primary">Dodaj pole</button>
+                <button (click)="duplicateField()" class="button-primary irony-btn">Dodaj pole</button>
                 <button [disabled]="!sentimentForm.valid" (click)="analyzeSentiment(false)"
-                    class="button-primary">Analizuj tekst</button>
+                    class="button-primary irony-btn">Analizuj tekst</button>
             </div>
         </div>
         <div class="results-table" *ngIf="analysisStart">
diff --git a/src/app/demo-models-page/irony-analysis/irony-analysis.component.scss b/src/app/demo-models-page/irony-analysis/irony-analysis.component.scss
index 07defed..bee23ef 100644
--- a/src/app/demo-models-page/irony-analysis/irony-analysis.component.scss
+++ b/src/app/demo-models-page/irony-analysis/irony-analysis.component.scss
@@ -81,11 +81,26 @@
     width: 400px
 }
 
-.ready-examples-button{
-    padding-bottom:20px;
+.ready-examples-button {
+    padding-bottom: 20px;
 }
 
-.spinner{
+.spinner {
     display: flex;
     justify-content: center;
 }
+
+.irony-btn {
+    background: linear-gradient(35deg, rgba(0, 0, 0, 1) 0%, rgb(134, 18, 122) 50%, rgba(0, 0, 0, 1) 100%);
+    background-repeat: no-repeat;
+
+    &:hover {
+        background: linear-gradient(35deg, rgba(0, 0, 0, 1) 0%, rgb(160, 47, 149) 50%, rgba(0, 0, 0, 1) 100%);
+        background-repeat: no-repeat;
+    }
+
+    &:disabled {
+        background: linear-gradient(35deg, rgba(106, 106, 106, 1) 0%, rgb(166, 166, 166) 50%, rgba(106, 106, 106, 1) 100%) !important;
+        background-repeat: no-repeat;
+    }
+}
diff --git a/src/app/demo-models-page/sentiment-analysis/sentiment-analysis.component.html b/src/app/demo-models-page/sentiment-analysis/sentiment-analysis.component.html
index 9ad0230..321a1a3 100644
--- a/src/app/demo-models-page/sentiment-analysis/sentiment-analysis.component.html
+++ b/src/app/demo-models-page/sentiment-analysis/sentiment-analysis.component.html
@@ -1,12 +1,12 @@
 <div class="sentiment-container">
     <div class="title-container">
         <div class="title">ANALIZA SENTYMENTU</div>
-        <button (click)="goToMainPage()" class="button-primary main-page-button">strona główna</button>
+        <button (click)="goToMainPage()" class="button-primary main-page-button sentiment-btn">strona główna</button>
     </div>
 
     <div class="text">Maciek cos tu se wpiszesz albo nie xD</div>
     <div class="ready-examples-button">
-        <button (click)="analyzeSentiment(true)" class="button-primary">Wyolsuj gotowe przykłady</button>
+        <button (click)="analyzeSentiment(true)" class="button-primary sentiment-btn">Wyolsuj gotowe przykłady</button>
     </div>
     <div class="form-container">
         <div class="form">
@@ -21,28 +21,30 @@
                 </ng-container>
             </div>
             <div class="button-container">
-                <button (click)="duplicateField()" class="button-primary">Dodaj pole</button>
+                <button (click)="duplicateField()" class="button-primary sentiment-btn">Dodaj pole</button>
                 <button [disabled]="!sentimentForm.valid" (click)="analyzeSentiment(false)"
-                    class="button-primary">Analizuj tekst</button>
+                    class="button-primary sentiment-btn">Analizuj tekst</button>
             </div>
         </div>
         <div class="results-table" *ngIf="analysisStart">
             <ng-container *ngIf="analysisLoading; else loading">
-                <div *ngFor="let res of results">
-                    <div class="result-row">
-                        <div class="sentence">{{res.sentence}}</div>
-                        <div [ngSwitch]="res.label">
-                            <div class="label-0" *ngSwitchCase="0">Negatywny</div>
-                            <div class="label-1" *ngSwitchCase="1">Pozytywny</div>
-                            <div class="label-2" *ngSwitchCase="2">Neutralny</div>
+                <ng-container *ngIf="!error; else error">
+                    <div *ngFor="let res of results">
+                        <div class="result-row">
+                            <div class="sentence">{{res.sentence}}</div>
+                            <div [ngSwitch]="res.label">
+                                <div class="label-0" *ngSwitchCase="0">Negatywny</div>
+                                <div class="label-1" *ngSwitchCase="1">Pozytywny</div>
+                                <div class="label-2" *ngSwitchCase="2">Neutralny</div>
+                            </div>
                         </div>
                     </div>
-                </div>
-                <div class="chart">
-                    <canvas baseChart width="300" height="300" [data]="barChartData" [options]="barChartOptions"
-                        [plugins]="barChartPlugins" [legend]="barChartLegend" [type]="'bar'">
-                    </canvas>
-                </div>
+                    <div class="chart">
+                        <canvas baseChart width="300" height="300" [data]="barChartData" [options]="barChartOptions"
+                            [plugins]="barChartPlugins" [legend]="barChartLegend" [type]="'bar'">
+                        </canvas>
+                    </div>
+                </ng-container>
             </ng-container>
         </div>
     </div>
@@ -58,3 +60,6 @@
 <ng-template #loading>
     <div class="spinner"><mat-spinner></mat-spinner></div>
 </ng-template>
+<ng-template #error>
+    <div class="spinner error">Wystąpił nieoczekiwany błąd.</div>
+</ng-template>
diff --git a/src/app/demo-models-page/sentiment-analysis/sentiment-analysis.component.scss b/src/app/demo-models-page/sentiment-analysis/sentiment-analysis.component.scss
index 82ba5a3..ab25db7 100644
--- a/src/app/demo-models-page/sentiment-analysis/sentiment-analysis.component.scss
+++ b/src/app/demo-models-page/sentiment-analysis/sentiment-analysis.component.scss
@@ -81,11 +81,30 @@
     width: 400px
 }
 
-.ready-examples-button{
-    padding-bottom:20px;
+.ready-examples-button {
+    padding-bottom: 20px;
 }
 
-.spinner{
+.spinner {
     display: flex;
     justify-content: center;
 }
+
+.error {
+    color: white
+}
+
+.sentiment-btn {
+    background: linear-gradient(35deg, rgba(0, 0, 0, 1) 0%, rgb(20, 123, 137) 50%, rgba(0, 0, 0, 1) 100%);
+    background-repeat: no-repeat;
+
+    &:hover {
+        background: linear-gradient(35deg, rgba(0, 0, 0, 1) 0%, rgb(64, 164, 177) 50%, rgba(0, 0, 0, 1) 100%);
+        background-repeat: no-repeat;
+    }
+
+    &:disabled {
+        background: linear-gradient(35deg, rgba(106, 106, 106, 1) 0%, rgb(166, 166, 166) 50%, rgba(106, 106, 106, 1) 100%) !important;
+        background-repeat: no-repeat;
+    }
+}
diff --git a/src/app/demo-models-page/sentiment-analysis/sentiment-analysis.component.ts b/src/app/demo-models-page/sentiment-analysis/sentiment-analysis.component.ts
index c1f895a..c551593 100644
--- a/src/app/demo-models-page/sentiment-analysis/sentiment-analysis.component.ts
+++ b/src/app/demo-models-page/sentiment-analysis/sentiment-analysis.component.ts
@@ -27,7 +27,8 @@ export class SentimentAnalysisComponent implements OnInit {
 
     analysisStart = false;
     analysisLoading = false;
-    results: { label: number, score: number, sentence: string }[] = []
+    results: { label: number, score: number, sentence: string }[] = [];
+    error = false;
     public barChartLegend = true;
     public barChartPlugins = [];
     public barChartOptions: ChartConfiguration<'bar'>['options'] = {
@@ -68,6 +69,7 @@ export class SentimentAnalysisComponent implements OnInit {
     }
 
     analyzeSentiment(isRandomSample: boolean) {
+        this.error = false
         this.analysisStart = true
         this.analysisLoading = false
         let sentences = []
@@ -92,6 +94,11 @@ export class SentimentAnalysisComponent implements OnInit {
                 setTimeout(() => {
                     this.duplicateField()
                 }, 50)
+            },
+            error: () => {
+                this.analysisLoading = true
+                this.error = true
+                console.log('error')
             }
         })
     }
diff --git a/src/styles.scss b/src/styles.scss
index 1542351..11889e9 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -44,9 +44,13 @@ body {
     transition: 0.3s;
 
     &:hover:enabled {
-        background-color: white;
-        color: #0097A7;
-        border: 2px solid #0097A7;
+        background-color: rgb(41, 41, 41);
+        color: #bebebe;
+        border: 2px solid #9d9d9d;
+    }
+
+    &:disabled{
+        background-color: #869b9d;
     }
 
     &:disabled{