diff --git a/.gitignore b/.gitignore
index 5aad37ad..7903eff7 100644
--- a/.gitignore
+++ b/.gitignore
@@ -35,3 +35,4 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+node_modules
diff --git a/src/front/Components/DesignSystem/LogOutButton/index.tsx b/src/front/Components/DesignSystem/LogOutButton/index.tsx
index 299f135e..26073887 100644
--- a/src/front/Components/DesignSystem/LogOutButton/index.tsx
+++ b/src/front/Components/DesignSystem/LogOutButton/index.tsx
@@ -20,6 +20,5 @@ export default class LogOutButton extends React.Component<IProps, IState> {
 	}
 
 	private disconnect() {
-		console.log("disconnected");
 	}
 }
diff --git a/src/front/Components/DesignSystem/Modal/Alert/index.tsx b/src/front/Components/DesignSystem/Modal/Alert/index.tsx
index 3b7c6a74..842d9a0a 100644
--- a/src/front/Components/DesignSystem/Modal/Alert/index.tsx
+++ b/src/front/Components/DesignSystem/Modal/Alert/index.tsx
@@ -1,18 +1,26 @@
-import Modal, { IModalProps } from "..";
+import React from "react";
+import Modal, { IProps as IPropsModal } from "..";
 import Button, { EButtonVariant } from "../../Button";
 import classes from "./classes.module.scss";
 
-type IProps = IModalProps & {
+type IProps = IPropsModal & {
 	closeText: string | JSX.Element;
 };
-export default class Alert extends Modal<IProps> {
+
+type IState = {
+	isOpen: boolean;
+};
+export default class Alert extends React.Component<IProps, IState> {
 	static defaultProps = {
 		closeText: "Ok",
+		...Modal.defaultProps
 	};
 
 	constructor(props: IProps) {
 		super(props);
-
+		this.state = {
+			isOpen: this.props.isOpen ?? true,
+		}
 		this.onClose = this.onClose.bind(this);
 	}
 
@@ -21,7 +29,7 @@ export default class Alert extends Modal<IProps> {
 			<Modal
 				closeBtn={this.props.closeBtn}
 				isOpen={this.state.isOpen}
-				onClose={this.props.onClose}
+				onClose={this.onClose}
 				header={this.props.header}
 				footer={this.footer()}>
 				{this.props.children}
@@ -40,7 +48,7 @@ export default class Alert extends Modal<IProps> {
 	}
 
 	private onClose() {
-		this.close();
+		this.setState({ isOpen: false });
 		this.props.onClose?.();
 	}
 }
diff --git a/src/front/Components/DesignSystem/Modal/Confirm/index.tsx b/src/front/Components/DesignSystem/Modal/Confirm/index.tsx
index 7a429b5d..46dcf8ae 100644
--- a/src/front/Components/DesignSystem/Modal/Confirm/index.tsx
+++ b/src/front/Components/DesignSystem/Modal/Confirm/index.tsx
@@ -1,40 +1,37 @@
 import Button, { EButtonVariant } from "../../Button";
-import Modal, { IModalProps } from "..";
+import Modal, { IProps as IPropsModal } from "..";
 import classes from "./classes.module.scss";
+import React from "react";
 
-type IProps = IModalProps & {
+type IProps = IPropsModal & {
 	onAccept?: () => void;
-	onCancel?: () => void;
 	cancelText: string | JSX.Element;
 	confirmText: string | JSX.Element;
 	showCancelButton: boolean;
 	isConfirmButtonDisabled: boolean;
 };
 
-type IState = {
-	isOpen: boolean;
-};
-export default class Confirm extends Modal<IProps, IState> {
-	static defaultProps: Partial<IProps> = {
+type IState = {};
+
+export default class Confirm extends React.Component<IProps, IState> {
+	static defaultProps = {
 		showCancelButton: true,
 		cancelText: "Cancel",
 		confirmText: "Confirm",
 		isConfirmButtonDisabled: false,
+		...Modal.defaultProps
 	};
 
-	constructor(props: IProps) {
-		super(props);
-		this.onCancel = this.onCancel.bind(this);
-	}
-
 	public override render(): JSX.Element | null {
 		return (
 			<Modal
 				closeBtn={this.props.closeBtn}
-				isOpen={this.state.isOpen}
+				isOpen={this.props.isOpen}
 				onClose={this.props.onClose}
 				header={this.props.header}
-				footer={this.footer()}>
+				footer={this.footer()}
+				animationDelay={this.props.animationDelay}
+			>
 				{this.props.children}
 			</Modal>
 		);
@@ -43,8 +40,9 @@ export default class Confirm extends Modal<IProps, IState> {
 	private footer(): JSX.Element {
 		return (
 			<div className={classes["buttons-container"]}>
+
 				{this.props.showCancelButton && (
-					<Button variant={EButtonVariant.GHOST} onClick={this.onCancel}>
+					<Button variant={EButtonVariant.GHOST} onClick={this.props.onClose}>
 						{this.props.cancelText}
 					</Button>
 				)}
@@ -55,9 +53,4 @@ export default class Confirm extends Modal<IProps, IState> {
 			</div>
 		);
 	}
-
-	private onCancel() {
-		this.close();
-		this.props.onCancel?.();
-	}
 }
diff --git a/src/front/Components/DesignSystem/Modal/classes.module.scss b/src/front/Components/DesignSystem/Modal/classes.module.scss
index 8a739de9..1280a3a9 100644
--- a/src/front/Components/DesignSystem/Modal/classes.module.scss
+++ b/src/front/Components/DesignSystem/Modal/classes.module.scss
@@ -1,6 +1,27 @@
 @import "@Themes/constants.scss";
 
+@keyframes smooth-appear {
+	from {
+		opacity: 0;
+	}
+
+	to {
+		opacity: 1;
+	}
+}
+
+@keyframes smooth-disappear {
+	from {
+		opacity: 1;
+	}
+
+	to {
+		opacity: 0;
+	}
+}
+
 .root {
+	--animation-delay: 1ms;
 	position: fixed;
 	z-index: 6;
 	top: 0;
@@ -10,6 +31,11 @@
 	display: flex;
 	align-items: center;
 	justify-content: center;
+	animation: smooth-appear var(--animation-delay) $custom-easing;
+
+	&[data-will-close="true"] {
+		animation: smooth-disappear var(--animation-delay) $custom-easing;
+	}
 
 	.background {
 		position: fixed;
@@ -18,16 +44,6 @@
 		width: 100%;
 		height: 100%;
 		background-color: $modal-background;
-		animation: smooth-appear 1s ease forwards;
-
-		@keyframes smooth-appear {
-			from {
-				opacity: 0;
-			}
-			to {
-				opacity: 1;
-			}
-		}
 	}
 
 	.container {
@@ -38,16 +54,6 @@
 		box-shadow: 0px 6px 12px rgba(255, 255, 255, 0.11);
 		overflow: auto;
 		padding: 32px;
-		animation: smooth-appear 1s ease forwards;
-
-		@keyframes smooth-appear {
-			from {
-				opacity: 0;
-			}
-			to {
-				opacity: 1;
-			}
-		}
 
 		@media (max-width: $screen-s) {
 			width: 90%;
@@ -115,4 +121,4 @@
 			}
 		}
 	}
-}
+}
\ No newline at end of file
diff --git a/src/front/Components/DesignSystem/Modal/index.tsx b/src/front/Components/DesignSystem/Modal/index.tsx
index 71536dc1..b61701c4 100644
--- a/src/front/Components/DesignSystem/Modal/index.tsx
+++ b/src/front/Components/DesignSystem/Modal/index.tsx
@@ -8,42 +8,47 @@ import Typography, { ITypo } from "../Typography";
 import CrossIcon from "@Assets/icons/cross.svg";
 import Image from "next/image";
 
-export type IModalProps = {
+export type IProps = {
 	closeBtn?: boolean;
 	header?: string | JSX.Element;
 	footer?: JSX.Element;
 	textLoader?: string | JSX.Element;
 	isOpen: boolean;
-	onClose?: () => void;
+	onClose: () => void;
 	hasTransparentBackground?: boolean;
 	hasContainerClosable?: boolean;
 	withSideBackground?: boolean;
 	children?: React.ReactNode;
+	animationDelay?: number;
 };
 
 type IState = {
-	isOpen: boolean;
+	willClose: boolean;
 };
 
-export default class Modal<P extends IModalProps, S extends IState = IState> extends React.Component<P, S> {
-	constructor(props: P) {
+export default class Modal extends React.Component<IProps, IState> {
+	static defaultProps = {
+		animationDelay: 170
+	};
+	public rootRefElement = React.createRef<HTMLDivElement>();
+	constructor(props: IProps) {
 		super(props);
 		this.close = this.close.bind(this);
 
-		(this.state as any) = {
-			isOpen: props.isOpen ?? true,
+		this.state = {
+			willClose: false
 		};
 	}
 
 	public override render(): JSX.Element | null {
-		if (!this.state.isOpen) return null;
-
+		if (!this.props.isOpen) return null;
+		const onClick = (this.props.hasContainerClosable && this.close) || (() => { });
 		return (
-			<div className={classes["root"]} data-side-background={this.props.withSideBackground}>
+			<div ref={this.rootRefElement} className={classes["root"]} data-side-background={this.props.withSideBackground} data-will-close={this.state.willClose.toString()}>
 				<div className={classes["background"]} onClick={this.close} />
 				<div
 					className={[classes["container"], this.props.hasTransparentBackground && classes["transparant-background"]].join(" ")}
-					onClick={this.props.hasContainerClosable && this.close}>
+					onClick={onClick} >
 					{this.props.closeBtn && (
 						<div className={classes["cross"]}>
 							<Image alt="Unplugged" src={CrossIcon} className={classes["close-icon"]} onClick={this.close} />
@@ -62,18 +67,18 @@ export default class Modal<P extends IModalProps, S extends IState = IState> ext
 		);
 	}
 
-	public override componentDidUpdate(prevProps: Readonly<P>): void {
-		if (prevProps.isOpen !== this.props.isOpen) {
-			this.setState({
-				isOpen: this.props.isOpen,
-			});
-		}
+	public override componentDidUpdate(): void {
+		this.rootRefElement.current?.style.setProperty("--animation-delay", this.props.animationDelay!.toString().concat("ms"));
 	}
 
 	protected close() {
-		this.setState({
-			isOpen: false,
-		});
-		this.props.onClose?.();
+		if (this.state.willClose) return;
+		this.setState({ willClose: true })
+		window.setTimeout(() => {
+			this.setState({
+				willClose: false
+			})
+			this.props.onClose()
+		}, this.props.animationDelay)
 	}
 }