diff --git a/src/app/header/header-popup/error-box/error-box.component.css b/src/app/header/header-popup/error-box/error-box.component.css
index b15d3ad..81388fe 100644
--- a/src/app/header/header-popup/error-box/error-box.component.css
+++ b/src/app/header/header-popup/error-box/error-box.component.css
@@ -1,6 +1,6 @@
 .error-box {
     background-color: #ff00001a;
-    min-width: 250px;
+    max-width: 320px;
     display: flex;
     border-radius: 5px;
     padding: 25px;
diff --git a/src/app/header/header-popup/login/login.component.html b/src/app/header/header-popup/login/login.component.html
index 2c36c3c..9e73db8 100644
--- a/src/app/header/header-popup/login/login.component.html
+++ b/src/app/header/header-popup/login/login.component.html
@@ -1,8 +1,8 @@
-<app-popup [state]="popupState"
+<app-popup [state]="state"
     (stateChange)="onStateChange($event)"
     [ignoreClickOutside]="ignoreClickOutside">
 
-    <div class="container overflow-hidden"
+    <div class="container m-0 overflow-hidden"
          [@resizeContainerForErrorMessage]="hideErrorMessage()">
 
         <app-error-box [errorMessage]="errorMessage"
diff --git a/src/app/header/header-popup/login/login.component.ts b/src/app/header/header-popup/login/login.component.ts
index 96d1373..c6d10f2 100644
--- a/src/app/header/header-popup/login/login.component.ts
+++ b/src/app/header/header-popup/login/login.component.ts
@@ -3,7 +3,7 @@ import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { MatIconRegistry } from '@angular/material/icon';
 import { DomSanitizer } from '@angular/platform-browser';
 import { faLock, faUser } from '@fortawesome/free-solid-svg-icons';
-import {Subscription, timeout} from 'rxjs';
+import {Subscription} from 'rxjs';
 import { AuthService } from 'src/app/shared/auth/auth.service';
 import { HttpError } from 'src/app/shared/model/httpError/httpError.model';
 import HttpErrorChecker from 'src/app/shared/model/httpError/httpErrorChecker';
@@ -24,7 +24,7 @@ const GITHUB_LOGO_SVG = "assets/img/providers/github.svg";
             state('hide',
                 style({
                     height: '100px',
-                    width: '370px',
+                    width: '320px',
                 })
             ),
             transition(
@@ -44,7 +44,7 @@ const GITHUB_LOGO_SVG = "assets/img/providers/github.svg";
                 style({
                     opacity: 1,
                     height: '100px',
-                    width: '340px',
+                    width: '320px',
                 })
             ),
             state('hide',
@@ -94,8 +94,6 @@ export class LoginComponent implements OnInit, AfterViewInit, OnDestroy {
     @Output()
         stateChange = new EventEmitter<boolean>();
 
-    popupState = false;
-
     loginForm!: FormGroup;
 
     authSubject!: Subscription;
@@ -137,7 +135,6 @@ export class LoginComponent implements OnInit, AfterViewInit, OnDestroy {
     }
 
     ngAfterViewInit(): void {
-        this.popupState = this.state;
         this.changeDetectorRef.detectChanges();
     }
 
@@ -175,7 +172,7 @@ export class LoginComponent implements OnInit, AfterViewInit, OnDestroy {
     }
 
     private closePopup() {
-        this.popupState = false;
+        this.state = false;
         this.loginForm.reset();
     }
 
diff --git a/src/app/header/header-popup/signup/signup.component.html b/src/app/header/header-popup/signup/signup.component.html
index 3f85c98..af12a22 100644
--- a/src/app/header/header-popup/signup/signup.component.html
+++ b/src/app/header/header-popup/signup/signup.component.html
@@ -1,73 +1,85 @@
 <app-popup [state]="state"
-    (stateChange)="onStateChange($event)" 
+    (stateChange)="onStateChange($event)"
     [ignoreClickOutside]="ignoreClickOutside">
-    {{errorMessage}}
-    <div class="container authentication-container">
-        <div class="row">
-            <div class="col-lg-6 auth-body auth-body-form">
-                <form [formGroup]="signupForm" (ngSubmit)="onSignUp()">
-                    <div class="input-div">
-                        <fa-icon class="input-div-icon"
-                        [icon]="_fullnameIcon">
-                        </fa-icon>
-                        <input type="text" id="fullname" 
-                            formControlName="fullname" 
-                            class="form-control"
-                            placeholder="Full Name">
-                    </div>
-                    <div class="input-div">
-                        <fa-icon class="input-div-icon"
-                        [icon]="_emailIcon">
-                        </fa-icon>
-                        <input type="text" id="email" 
-                            formControlName="email" 
-                            class="form-control"
-                            placeholder="Email">
-                    </div>
-                    <div class="input-div">
-                        <fa-icon class="input-div-icon"
-                        [icon]="_userIcon">
-                        </fa-icon>
-                        <input type="text" id="username" 
-                            formControlName="username" 
-                            class="form-control"
-                            placeholder="Username">
-                    </div>
-                    <div class="input-div">
-                        <fa-icon class="input-div-icon"
-                        [icon]="_passwordIcon">
-                        </fa-icon>
-                        <input type="password" id="password" 
-                            formControlName="password" 
-                            class="form-control"
-                            placeholder="Password">
-                    </div>
-                    <button class="btn" 
-                        type="submit">
-                        SignUp
+
+
+    <div class="container m-0 overflow-hidden"
+         [@resizeContainerForErrorMessage]="hideErrorMessage()">
+
+        <app-error-box [errorMessage]="errorMessage"
+                       [@showErrorMessage]="showErrorMessage()">
+        </app-error-box>
+
+        <div class="container authentication-container"
+             [@hideAuthContainer]="hideErrorMessage()"
+             (@hideAuthContainer.done)="hideAuthContainer($event)">
+            <div class="row">
+                <div class="col-lg-6 auth-body auth-body-form">
+                    <form [formGroup]="signupForm" (ngSubmit)="onSignUp()">
+                        <div class="input-div">
+                            <fa-icon class="input-div-icon"
+                            [icon]="_fullnameIcon">
+                            </fa-icon>
+                            <input type="text" id="fullname"
+                                formControlName="fullname"
+                                class="form-control"
+                                placeholder="Full Name">
+                        </div>
+                        <div class="input-div">
+                            <fa-icon class="input-div-icon"
+                            [icon]="_emailIcon">
+                            </fa-icon>
+                            <input type="text" id="email"
+                                formControlName="email"
+                                class="form-control"
+                                placeholder="Email">
+                        </div>
+                        <div class="input-div">
+                            <fa-icon class="input-div-icon"
+                            [icon]="_userIcon">
+                            </fa-icon>
+                            <input type="text" id="username"
+                                formControlName="username"
+                                class="form-control"
+                                placeholder="Username">
+                        </div>
+                        <div class="input-div">
+                            <fa-icon class="input-div-icon"
+                            [icon]="_passwordIcon">
+                            </fa-icon>
+                            <input type="password" id="password"
+                                formControlName="password"
+                                class="form-control"
+                                placeholder="Password">
+                        </div>
+                        <button class="btn"
+                            type="submit">
+                            SignUp
+                        </button>
+                    </form>
+                </div>
+                <div class="separator-line">
+                    <div class="line"></div>
+                </div>
+                <div class="col-lg-6 auth-body auth-body-links">
+                    <button mat-button
+                    class="oauth-button d-flex justify-content-center align-items-center"
+                    (click)="onGoogleLogin()">
+                        <mat-icon style="width: 50px; height:30px"
+                                  svgIcon="google-logo"></mat-icon>
+                        Login With Google
                     </button>
-                </form>
-            </div>
-            <div class="separator-line">
-                <div class="line"></div>
-            </div>
-            <div class="col-lg-6 auth-body auth-body-links">
-                <button mat-button 
-                class="oauth-button d-flex justify-content-center align-items-center" 
-                (click)="onGoogleLogin()">
-                    <mat-icon style="width: 50px; height:30px"
-                              svgIcon="google-logo"></mat-icon> 
-                    Login With Google
-                </button>
-                <button mat-button 
-                class="oauth-button d-flex justify-content-center align-items-center"
-                (click)="onGithubLogin()">
-                    <mat-icon style="width: 50px; height:30px"
-                              svgIcon="github-logo"></mat-icon> 
-                    Login With Github
-                </button>
+                    <button mat-button
+                    class="oauth-button d-flex justify-content-center align-items-center"
+                    (click)="onGithubLogin()">
+                        <mat-icon style="width: 50px; height:30px"
+                                  svgIcon="github-logo"></mat-icon>
+                        Login With Github
+                    </button>
+                </div>
             </div>
         </div>
+
     </div>
 
-</app-popup>
\ No newline at end of file
+</app-popup>
diff --git a/src/app/header/header-popup/signup/signup.component.ts b/src/app/header/header-popup/signup/signup.component.ts
index d62c76c..838307c 100644
--- a/src/app/header/header-popup/signup/signup.component.ts
+++ b/src/app/header/header-popup/signup/signup.component.ts
@@ -9,6 +9,7 @@ import { HttpError } from 'src/app/shared/model/httpError/httpError.model';
 import HttpErrorChecker from 'src/app/shared/model/httpError/httpErrorChecker';
 import UserChecker from 'src/app/shared/model/user/user.checker';
 import { User } from 'src/app/shared/model/user/user.model';
+import {animate, animateChild, group, query, state, style, transition, trigger} from "@angular/animations";
 
 
 const GOOGLE_LOGO_SVG = "assets/img/providers/google.svg";
@@ -17,18 +18,81 @@ const GITHUB_LOGO_SVG = "assets/img/providers/github.svg";
 @Component({
     selector: 'app-signup',
     templateUrl: './signup.component.html',
-    styleUrls: ['./signup.component.css']
+    styleUrls: ['./signup.component.css'],
+    animations: [
+        trigger('resizeContainerForErrorMessage', [
+            state('hide',
+                style({
+                    height: '100px',
+                    width: '320px',
+                })
+            ),
+            transition(
+                'show => hide',
+                group([
+                    query(
+                        "@*",
+                        animateChild(),
+                        { optional: true }
+                    ),
+                    animate('1s ease')
+                ])
+            )
+        ]),
+        trigger('showErrorMessage', [
+            state('show',
+                style({
+                    opacity: 1,
+                    height: '100px',
+                    width: '320px',
+                })
+            ),
+            state('hide',
+                style({
+                    opacity: 0,
+                    height: '0px',
+                    width: '0px',
+                })
+            ),
+            transition(
+                '* => show',
+                animate(
+                    '500ms ease-in'
+                )
+            ),
+        ]),
+        trigger('hideAuthContainer', [
+            state('hide',
+                style({
+                    opacity: 0,
+                })
+            ),
+            transition(
+                'show => hide',
+                group([
+                    query(
+                        "@*",
+                        animateChild(),
+                        { optional: true }
+                    ),
+                    animate(
+                        '250ms ease-out'
+                    )
+                ])
+            )
+        ]),
+    ]
 })
 export class SignupComponent implements OnInit {
 
     @Input()
-    state: boolean = false;
+        state: boolean = false;
 
     @Input()
-    ignoreClickOutside!: HTMLDivElement[];
+        ignoreClickOutside!: HTMLDivElement[];
 
     @Output()
-    stateChange = new EventEmitter<boolean>();
+        stateChange = new EventEmitter<boolean>();
 
     signupForm!: FormGroup;
 
@@ -36,6 +100,8 @@ export class SignupComponent implements OnInit {
 
     errorMessage!: string | null;
 
+    isShowErrorMessage = false;
+
     _fullnameIcon = faFingerprint;
 
     _emailIcon = faEnvelope;
@@ -47,15 +113,15 @@ export class SignupComponent implements OnInit {
     constructor(private authService: AuthService,
         private matIconRegistry: MatIconRegistry,
         private domSanitizer: DomSanitizer) {
-            this.matIconRegistry.addSvgIcon(
-                "google-logo",
-                this.domSanitizer.bypassSecurityTrustResourceUrl(GOOGLE_LOGO_SVG)
-            );
-            this.matIconRegistry.addSvgIcon(
-                "github-logo",
-                this.domSanitizer.bypassSecurityTrustResourceUrl(GITHUB_LOGO_SVG)
-            );
-        }
+        this.matIconRegistry.addSvgIcon(
+            "google-logo",
+            this.domSanitizer.bypassSecurityTrustResourceUrl(GOOGLE_LOGO_SVG)
+        );
+        this.matIconRegistry.addSvgIcon(
+            "github-logo",
+            this.domSanitizer.bypassSecurityTrustResourceUrl(GITHUB_LOGO_SVG)
+        );
+    }
 
     ngOnInit(): void {
         this.signupForm = new FormGroup({
@@ -110,5 +176,26 @@ export class SignupComponent implements OnInit {
         this.signupForm.reset();
     }
 
+    public showErrorMessage(): string {
+        if (this.isShowErrorMessage) {
+            return "show";
+        }
+        return "hide";
+    }
+
+    public hideErrorMessage(): string {
+        if (!!this.errorMessage) {
+            return "hide";
+        }
+        return "show";
+    }
+
+    hideAuthContainer(event: any) {
+        if (event.toState === "hide") {
+            event.element.style.display = "none";
+            this.isShowErrorMessage = true;
+        }
+    }
+
 
 }