diff --git a/src/front/Api/BaseApiService.ts b/src/front/Api/BaseApiService.ts
index 9b7ff91c..74cc65ae 100644
--- a/src/front/Api/BaseApiService.ts
+++ b/src/front/Api/BaseApiService.ts
@@ -42,7 +42,6 @@ export default abstract class BaseApiService {
         method: "GET",
         headers: this.buildHeaders(ContentType.JSON),
       });
-    console.log(request);
     return this.sendRequest<T>(request);
   }
 
@@ -50,14 +49,14 @@ export default abstract class BaseApiService {
     url: URL,
     body: { [key: string]: unknown } = {}
   ) {
-    const request = async () =>
-      await fetch(url, {
-        method: "POST",
-        headers: this.buildHeaders(ContentType.JSON),
-        body: this.buildBody(body),
-      });
-
-    return this.sendRequest<T>(request);
+    return this.sendRequest<T>(
+      async () =>
+        await fetch(url, {
+          method: "POST",
+          headers: this.buildHeaders(ContentType.JSON),
+          body: this.buildBody(body),
+        })
+    );
   }
 
   protected async putRequest<T>(
diff --git a/src/front/Api/LeCoffreApi/SuperAdmin/Users/Users.ts b/src/front/Api/LeCoffreApi/SuperAdmin/Users/Users.ts
index 5a96864a..c5f9449b 100644
--- a/src/front/Api/LeCoffreApi/SuperAdmin/Users/Users.ts
+++ b/src/front/Api/LeCoffreApi/SuperAdmin/Users/Users.ts
@@ -13,7 +13,7 @@ export default class Users extends BaseSuperAdmin {
 
   public static getInstance() {
     if (!this.instance) {
-      return new Users();
+      return new this();
     } else {
       return this.instance;
     }
@@ -29,22 +29,6 @@ export default class Users extends BaseSuperAdmin {
     }
   }
 
-  public async getAuthorizationCode(): Promise<any> {
-    try {
-      const url =
-        new URL(`https://qual-connexion.idnot.fr/IdPOAuth2/authorize/idnot_idp_v1?
-      client_id=4501646203F3EF67
-      &redirect_uri=https://app.stg.lecoffre.smart-chain.fr/
-      &scope=openid,profile,offline_access
-      &response_type=code`);
-      //   const url = new URL("https://jsonplaceholder.typicode.com/todos/1");
-      await this.getRequest(url);
-    } catch (err) {
-      this.onError(err);
-      return Promise.reject(err);
-    }
-  }
-
   public async getByUid(uid: string): Promise<User> {
     const url = new URL(this.baseURl.concat("/").concat(uid));
     try {
@@ -54,14 +38,4 @@ export default class Users extends BaseSuperAdmin {
       return Promise.reject(err);
     }
   }
-
-  // public async post(params: User): Promise<User> {
-  // 	const url = new URL(this.baseURl);
-  // 	try {
-  // 		return await this.postRequest<User>(url, params);
-  // 	} catch (err) {
-  // 		this.onError(err);
-  // 		return Promise.reject(err);
-  // 	}
-  // }
 }
diff --git a/src/front/Components/DesignSystem/Button/index.tsx b/src/front/Components/DesignSystem/Button/index.tsx
index 08cd20ae..1b29b25c 100644
--- a/src/front/Components/DesignSystem/Button/index.tsx
+++ b/src/front/Components/DesignSystem/Button/index.tsx
@@ -14,32 +14,32 @@ type IProps = {
 	children?: React.ReactNode;
 	variant?: EButtonVariant;
 	fullwidth?: "true" | "false";
-	icon? : string;
+	icon?: string;
 	iconStyle?: CSSProperties;
 	disabled?: boolean;
-	type: "button" | "submit";
-	isloading: string;
+	type?: "button" | "submit";
+	isloading?: string;
 };
 
-type IState = {};
+export default function Button(props: IProps) {
+	const {
+		variant = EButtonVariant.PRIMARY,
+		disabled = false,
+		type = "button",
+		isloading = "false",
+		fullwidth = "false",
+		onClick,
+		children,
+		icon,
+		iconStyle
+	} = props;
 
-export default class Button extends React.Component<IProps, IState> {
-	static defaultProps: IProps = {
-		variant: EButtonVariant.PRIMARY,
-		disabled: false,
-		type: "button",
-		isloading: "false",
-		fullwidth: "false",
-	};
-
-	public override render(): JSX.Element {
-		const attributes = { ...this.props };
-		delete attributes.icon;
-		return (
-			<button {...attributes} onClick={this.props.onClick} className={classes["root"]} type={this.props.type}>
-				{this.props.children}
-				{this.props.icon && <Image src={this.props.icon} style={this.props.iconStyle} alt={"button icon"}/>}
-			</button>
-		);
-	}
+	const attributes = { ...props, variant, disabled, type, isloading, fullwidth };
+	delete attributes.icon;
+	return (
+		<button {...attributes} onClick={onClick} className={classes["root"]} type={type}>
+			{children}
+			{icon && <Image src={icon} style={iconStyle} alt={"button icon"} />}
+		</button>
+	);
 }
diff --git a/src/front/Components/DesignSystem/Elements/FolderBoxInformation/classes.module.scss b/src/front/Components/DesignSystem/Elements/FolderBoxInformation/classes.module.scss
index 571bee50..2417c02f 100644
--- a/src/front/Components/DesignSystem/Elements/FolderBoxInformation/classes.module.scss
+++ b/src/front/Components/DesignSystem/Elements/FolderBoxInformation/classes.module.scss
@@ -15,6 +15,10 @@
         @media (max-width: $screen-l) {
             grid-template-columns: 1fr 1fr;
 
+        }
+        @media (max-width: $screen-s) {
+            grid-template-columns: 1fr;
+
         }
 
         &.isSignleDescription {
diff --git a/src/front/Components/DesignSystem/Elements/FolderBoxInformation/index.tsx b/src/front/Components/DesignSystem/Elements/FolderBoxInformation/index.tsx
index 6a831f26..a57459e8 100644
--- a/src/front/Components/DesignSystem/Elements/FolderBoxInformation/index.tsx
+++ b/src/front/Components/DesignSystem/Elements/FolderBoxInformation/index.tsx
@@ -8,54 +8,49 @@ import Typography, { ITypo } from "../../Typography";
 
 type IProps = {
 	folder: IDashBoardFolder;
-	isDescription: boolean;
+	isDescription?: boolean;
 };
-type IState = {};
 
-export default class FolderBoxInformation extends React.Component<IProps, IState> {
-	public static defaultProps = {
-		isDescription: false,
-	};
+export default function FolderBoxInformation(props: IProps) {
+	const { isDescription = false } = props;
 
-	public override render(): JSX.Element {
-		return <div className={classNames(classes["root"], this.props.isDescription && classes["isSignleDescription"])}>
-			<div className={classes["content"]}>
-				{this.props.isDescription ?
+	return <div className={classNames(classes["root"], isDescription && classes["isSignleDescription"])}>
+		<div className={classes["content"]}>
+			{isDescription ?
+				<div className={classes["text-container"]}>
+					<Typography typo={ITypo.NAV_INPUT_16}>Note dossier :</Typography>
+					<Typography typo={ITypo.P_18}>{props.folder.description ?? "..."}</Typography>
+				</div>
+				:
+				<>
 					<div className={classes["text-container"]}>
-						<Typography typo={ITypo.NAV_INPUT_16}>Note dossier :</Typography>
-						<Typography typo={ITypo.P_18}>{this.props.folder.description ?? "..."}</Typography>
+						<Typography typo={ITypo.NAV_INPUT_16}>Intitulé du dossier</Typography>
+						<Typography typo={ITypo.P_18}>{props.folder.name ?? "..."}</Typography>
 					</div>
-					:
-					<>
-						<div className={classes["text-container"]}>
-							<Typography typo={ITypo.NAV_INPUT_16}>Intitulé du dossier</Typography>
-							<Typography typo={ITypo.P_18}>{this.props.folder.name ?? "..."}</Typography>
-						</div>
-						<div className={classes["text-container"]}>
-							<Typography typo={ITypo.NAV_INPUT_16}>Numéro de dossier</Typography>
-							<Typography typo={ITypo.P_18}>{this.props.folder.folder_number ?? "..."}</Typography>
-						</div>
-						<div className={classes["text-container"]}>
-							<Typography typo={ITypo.NAV_INPUT_16}>Type d’acte</Typography>
-							<Typography typo={ITypo.P_18}>{this.props.folder.deed.deed_type.name ?? "..."}</Typography>
-						</div>
-						<div className={classes["text-container"]}>
-							<Typography typo={ITypo.NAV_INPUT_16}>Ouverture du dossier</Typography>
-							<Typography typo={ITypo.P_18}>{this.formatDate(this.props.folder.created_at)}</Typography>
-						</div>
-					</>
-				}
-			</div>
-			<Image src={PenICon} alt="edit informations" className={classes["edit-icon"]}/>
-		</div>;
-	}
-
-	private formatDate(date: Date | null): string {
-		if(!date) return "...";
-		return date.toLocaleDateString("fr-FR", {
-			year: "numeric",
-			month: "long",
-			day: "numeric",
-		});
-	}
+					<div className={classes["text-container"]}>
+						<Typography typo={ITypo.NAV_INPUT_16}>Numéro de dossier</Typography>
+						<Typography typo={ITypo.P_18}>{props.folder.folder_number ?? "..."}</Typography>
+					</div>
+					<div className={classes["text-container"]}>
+						<Typography typo={ITypo.NAV_INPUT_16}>Type d’acte</Typography>
+						<Typography typo={ITypo.P_18}>{props.folder.deed.deed_type.name ?? "..."}</Typography>
+					</div>
+					<div className={classes["text-container"]}>
+						<Typography typo={ITypo.NAV_INPUT_16}>Ouverture du dossier</Typography>
+						<Typography typo={ITypo.P_18}>{formatDate(props.folder.created_at)}</Typography>
+					</div>
+				</>
+			}
+		</div>
+		<Image src={PenICon} alt="edit informations" className={classes["edit-icon"]} />
+	</div>;
 }
+
+function formatDate(date: Date | null): string {
+	if (!date) return "...";
+	return date.toLocaleDateString("fr-FR", {
+		year: "numeric",
+		month: "long",
+		day: "numeric",
+	});
+}
\ No newline at end of file
diff --git a/src/front/Components/DesignSystem/FolderList/index.tsx b/src/front/Components/DesignSystem/FolderList/index.tsx
index 75a7d53f..36227b8e 100644
--- a/src/front/Components/DesignSystem/FolderList/index.tsx
+++ b/src/front/Components/DesignSystem/FolderList/index.tsx
@@ -6,6 +6,7 @@ import { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotar
 type IProps = {
 	folders: IDashBoardFolder[];
 	onSelectedFolder?: (folder: IDashBoardFolder) => void;
+	onCloseLeftSide?: () => void;
 };
 
 type IState = {};
@@ -14,7 +15,9 @@ export default class FolderList extends React.Component<IProps, IState> {
 	public override render(): JSX.Element {
 		return <div className={classes["root"]}>
 			{this.props.folders.map((folder) => {
-				return <FolderContainer folder={folder} key={folder.uid} onSelectedFolder={this.props.onSelectedFolder}/>;
+				return <div onClick={this.props.onCloseLeftSide} key={folder.uid}>
+					<FolderContainer folder={folder} onSelectedFolder={this.props.onSelectedFolder} />;
+				</div>
 			})};
 		</div>;
 	}
diff --git a/src/front/Components/DesignSystem/FolderListContainer/classes.module.scss b/src/front/Components/DesignSystem/FolderListContainer/classes.module.scss
index d4c56998..a8ec7501 100644
--- a/src/front/Components/DesignSystem/FolderListContainer/classes.module.scss
+++ b/src/front/Components/DesignSystem/FolderListContainer/classes.module.scss
@@ -2,11 +2,12 @@
 
 .root {
     min-height: 100%;
-    width: 389px;
+    width: 100%;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    .searchbar{
+
+    .searchbar {
         padding: 40px 24px 24px 24px;
     }
-}
+}
\ No newline at end of file
diff --git a/src/front/Components/DesignSystem/FolderListContainer/index.tsx b/src/front/Components/DesignSystem/FolderListContainer/index.tsx
index 868ef01c..5d19ce3e 100644
--- a/src/front/Components/DesignSystem/FolderListContainer/index.tsx
+++ b/src/front/Components/DesignSystem/FolderListContainer/index.tsx
@@ -8,6 +8,7 @@ import { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotar
 type IProps = {
 	folders: IDashBoardFolder[];
 	onSelectedFolder?: (folder: IDashBoardFolder) => void;
+	onCloseLeftSide?: () => void;
 };
 type IState = {
 	filteredFolders: IDashBoardFolder[];
@@ -28,7 +29,7 @@ export default class FolderListContainer extends React.Component<IProps, IState>
 				<div className={classes["searchbar"]}>
 					<SearchBar folders={this.props.folders} onChange={this.filterFolders} />
 				</div>
-				<FolderList folders={this.state.filteredFolders} onSelectedFolder={this.props.onSelectedFolder && this.props.onSelectedFolder} />
+				<FolderList folders={this.state.filteredFolders} onSelectedFolder={this.props.onSelectedFolder && this.props.onSelectedFolder} onCloseLeftSide={this.props.onCloseLeftSide}/>
 			</div>
 			<div>
 
diff --git a/src/front/Components/DesignSystem/Header/classes.module.scss b/src/front/Components/DesignSystem/Header/classes.module.scss
index 5f5b00af..5cf5a20d 100644
--- a/src/front/Components/DesignSystem/Header/classes.module.scss
+++ b/src/front/Components/DesignSystem/Header/classes.module.scss
@@ -10,7 +10,7 @@
 	padding: 0 48px;
 	position: sticky;
 	top: 0;
-	z-index: 1;
+	z-index: 2;
 
 	@media (max-width: $screen-m) {
 		transition: transform 500ms ease-out;
diff --git a/src/front/Components/DesignSystem/Header/index.tsx b/src/front/Components/DesignSystem/Header/index.tsx
index 02ebfef5..7cbf5e26 100644
--- a/src/front/Components/DesignSystem/Header/index.tsx
+++ b/src/front/Components/DesignSystem/Header/index.tsx
@@ -26,7 +26,6 @@ type IState = {
 };
 
 export default class Header extends React.Component<IProps, IState> {
-	private onScrollYDirectionChange = () => { };
 	private onWindowResize = () => { };
 	private headerBreakpoint = 1300;
 
@@ -45,7 +44,6 @@ export default class Header extends React.Component<IProps, IState> {
 		this.closeNotificationMenu = this.closeNotificationMenu.bind(this);
 		this.closeProfileMenu = this.closeProfileMenu.bind(this);
 		this.openProfileMenu = this.openProfileMenu.bind(this);
-		this.visibility = this.visibility.bind(this);
 	}
 	public override render(): JSX.Element {
 		return (
@@ -77,31 +75,15 @@ export default class Header extends React.Component<IProps, IState> {
 	}
 
 	public override componentDidMount() {
-		this.onScrollYDirectionChange = WindowStore.getInstance().onScrollYDirectionChange((scrollYDirection) =>
-			this.visibility(scrollYDirection),
-		);
-
 		this.onWindowResize = WindowStore.getInstance().onResize((window) =>
 			this.onResize(window)
 		);
 	}
 
 	public override componentWillUnmount() {
-		this.onScrollYDirectionChange();
 		this.onWindowResize();
 	}
 
-	private visibility(scrollYDirection: number) {
-		let open: IState["open"] = EHeaderOpeningState.OPEN;
-		if (window.scrollY > 50 && scrollYDirection < 0 && Math.abs(scrollYDirection) > 8 && window.innerWidth < this.headerBreakpoint) {
-			open = EHeaderOpeningState.CLOSED;
-			this.closeBurgerMenu();
-			this.closeNotificationMenu();
-		}
-
-		if (open !== this.state.open) this.setState({ open });
-	}
-
 	private onResize(window: Window) {
 		if (window.innerWidth > this.headerBreakpoint && this.state.isBurgerMenuOpen) this.setState({ isBurgerMenuOpen: false });
 		if (window.innerWidth < this.headerBreakpoint && this.state.isProfileMenuOpen) this.setState({ isProfileMenuOpen: false });
diff --git a/src/front/Components/DesignSystem/QuantityProgressBar/ProgressBar/classes.module.scss b/src/front/Components/DesignSystem/QuantityProgressBar/ProgressBar/classes.module.scss
index 9fdf8a64..4f87cd33 100644
--- a/src/front/Components/DesignSystem/QuantityProgressBar/ProgressBar/classes.module.scss
+++ b/src/front/Components/DesignSystem/QuantityProgressBar/ProgressBar/classes.module.scss
@@ -17,7 +17,7 @@
 	transition: width 300ms;
 	background-color: $turquoise-flash;
 	.percentage{
-		width: 37px;
+		width: 0;
 		position: absolute;
 		top: 16px;
 		left: 50%;
diff --git a/src/front/Components/DesignSystem/Select/index.tsx b/src/front/Components/DesignSystem/Select/index.tsx
index d1a25d6c..21d4eb20 100644
--- a/src/front/Components/DesignSystem/Select/index.tsx
+++ b/src/front/Components/DesignSystem/Select/index.tsx
@@ -4,7 +4,7 @@ import ChevronIcon from "@Assets/Icons/chevron.svg";
 
 import Typography, { ITypo } from "../Typography";
 import classes from "./classes.module.scss";
-import WindowStore from "@Front/Stores/Window";
+import WindowStore from "@Front/Stores/WindowStore";
 import Image from "next/image";
 
 type IProps = {
diff --git a/src/front/Components/LayoutTemplates/DefaultNotaryDashboard/classes.module.scss b/src/front/Components/LayoutTemplates/DefaultNotaryDashboard/classes.module.scss
index 868b02bd..789dad17 100644
--- a/src/front/Components/LayoutTemplates/DefaultNotaryDashboard/classes.module.scss
+++ b/src/front/Components/LayoutTemplates/DefaultNotaryDashboard/classes.module.scss
@@ -3,14 +3,58 @@
 .root {
 	.content {
 		display: flex;
+		overflow: hidden;
+		height: calc(100vh - 83px);
+
 		.left-side {
+			background-color: $white;
+			z-index: 1;
+			display: flex;
 			width: 389px;
+			min-width: 389px;
+			transition: all 0.3s $custom-easing;
+			overflow: hidden;
+			@media (max-width: ($screen-m - 1px)) {
+				width: 83px;
+				min-width: 83px;
+				transform: translateX(-389px);
+
+				&.opened {
+					transform: translateX(0px);
+					width: 389px;
+					min-width: 389px;
+				}
+			}
+			
+		}
+
+		.closable-left-side {
+			position: absolute;
+			background-color: $white;
+			z-index: 0;
+			display: flex;
+			justify-content: center;
+			min-width: 83px;
+			max-width: 83px;
 			height: calc(100vh - 83px);
+			border-right: 1px $grey-medium solid;
+
+			@media (min-width: $screen-m) {
+				display: none;
+			}
+
+
+			.chevron-icon {
+				margin-top: 21px;
+				transform: rotate(180deg);
+				cursor: pointer;
+			}
 		}
 
 		.right-side {
 			width: 100%;
 			padding: 64px 48px;
+			overflow-y: auto;
 		}
 	}
 }
\ No newline at end of file
diff --git a/src/front/Components/LayoutTemplates/DefaultNotaryDashboard/index.tsx b/src/front/Components/LayoutTemplates/DefaultNotaryDashboard/index.tsx
index 8692f15c..22536526 100644
--- a/src/front/Components/LayoutTemplates/DefaultNotaryDashboard/index.tsx
+++ b/src/front/Components/LayoutTemplates/DefaultNotaryDashboard/index.tsx
@@ -6,6 +6,10 @@ import Header from "@Front/Components/DesignSystem/Header";
 import Version from "@Front/Components/DesignSystem/Version";
 import { folders } from "@Front/Components/Layouts/DesignSystem/dummyData"
 import { OfficeFolder } from 'le-coffre-resources/dist/Customer';
+import chevronIcon from "@Assets/Icons/chevron.svg";
+import Image from 'next/image';
+import classNames from 'classnames';
+import WindowStore from '@Front/Stores/WindowStore';
 type IProps = {
 	title: string;
 	children?: ReactNode;
@@ -13,6 +17,8 @@ type IProps = {
 };
 type IState = {
 	folders: IDashBoardFolder[];
+	isLeftSideOpen: boolean;
+	leftSideCanBeClosed: boolean;
 };
 
 export type IDashBoardFolder = {
@@ -26,27 +32,64 @@ export type IDashBoardFolder = {
 	office_folder_has_customers?: OfficeFolder["office_folder_has_customers"];
 };
 export default class DefaultNotaryDashboard extends React.Component<IProps, IState> {
+	private onWindowResize = () => { };
 	public static defaultProps = {
 		scrollTop: 0,
 	};
 
-public constructor(props: IProps) {
+	public constructor(props: IProps) {
 		super(props);
 		this.state = {
 			folders: folders,
+			isLeftSideOpen: false,
+			leftSideCanBeClosed: typeof window !== "undefined" ? window.innerWidth < 1024 : false,
 		};
+		this.onOpenLeftSide = this.onOpenLeftSide.bind(this);
+		this.onCloseLeftSide = this.onCloseLeftSide.bind(this);
 	}
 
 	public override render(): JSX.Element {
+
 		return (
 			<div className={classes["root"]}>
 				<Header isUserConnected={true} />
 				<div className={classes["content"]}>
-					<div className={classes["left-side"]}><FolderListContainer folders={this.state.folders} onSelectedFolder={this.props.onSelectedFolder}/></div>
+					<div className={classNames(classes["left-side"], this.state.isLeftSideOpen && classes["opened"])}>
+						<FolderListContainer folders={this.state.folders} onSelectedFolder={this.props.onSelectedFolder} onCloseLeftSide={this.onCloseLeftSide} />
+					</div>
+					<div className={classNames(classes["closable-left-side"])}>
+						<Image alt='open side menu' src={chevronIcon} className={classes["chevron-icon"]} onClick={this.onOpenLeftSide} />
+					</div>
 					<div className={classes["right-side"]}>{this.props.children}</div>
 				</div>
 				<Version />
 			</div>
 		);
 	}
+
+	public override componentDidMount(): void {
+		this.onWindowResize = WindowStore.getInstance().onResize((window) =>
+			this.onResize(window)
+		);
+	}
+	public override componentWillUnmount() {
+		this.onWindowResize();
+	}
+
+	private onOpenLeftSide() {
+		this.setState({ isLeftSideOpen: true });
+	}
+
+	private onCloseLeftSide() {
+		if (!this.state.leftSideCanBeClosed) return;
+		this.setState({ isLeftSideOpen: false });
+	}
+
+	private onResize(window: Window) {
+		if (window.innerWidth > 1023) {
+			if (!this.state.leftSideCanBeClosed) return;
+			this.setState({ leftSideCanBeClosed: false });
+		}
+		this.setState({ leftSideCanBeClosed: true });
+	}
 }
diff --git a/src/front/Components/Layouts/Folder/ClientSection/classes.module.scss b/src/front/Components/Layouts/Folder/ClientSection/classes.module.scss
index e15501c8..b88fc410 100644
--- a/src/front/Components/Layouts/Folder/ClientSection/classes.module.scss
+++ b/src/front/Components/Layouts/Folder/ClientSection/classes.module.scss
@@ -2,11 +2,13 @@
 
 .root {
     width: 100%;
+    padding-bottom: 32px;
     .no-client{
         display: flex;
         justify-content: center;
         align-items: center;
         flex-direction: column;
+        padding: 72px;
         .title{
             margin-bottom: 16px;
         }
diff --git a/src/front/Components/Layouts/Folder/classes.module.scss b/src/front/Components/Layouts/Folder/classes.module.scss
index f2f055f7..1b8eed98 100644
--- a/src/front/Components/Layouts/Folder/classes.module.scss
+++ b/src/front/Components/Layouts/Folder/classes.module.scss
@@ -1,9 +1,19 @@
+@import "@Themes/constants.scss";
+
 .root {
     display: flex;
     align-items: center;
     flex-direction: column;
     min-height: 100%;
 
+    .no-folder-selected {
+        width: 100%;
+
+        .choose-a-folder {
+            margin-top: 96px;
+            text-align: center;
+        }
+    }
 
     .folder-informations {
         width: 100%;
@@ -23,6 +33,7 @@
                 display: flex;
                 justify-content: space-between;
                 align-items: center;
+                flex-wrap: wrap;
             }
         }
 
@@ -30,15 +41,29 @@
             margin-top: 24px;
             margin-bottom: 32px;
         }
-        
-        .progress-bar{
+
+        .progress-bar {
             margin-bottom: 32px;
         }
 
-        .button-container{
-            :first-child{
+        .button-container {
+            width: 100%;
+            text-align: center;
+            :first-child {
                 margin-right: 12px;
             }
+            > * {
+                margin: auto;
+            }
+            @media (max-width: $screen-m) {
+                :first-child {
+                    margin-right: 0;
+                    margin-bottom: 12px;
+                }
+                > * {
+                    width: 100%;
+                }
+            }
         }
     }
 }
\ No newline at end of file
diff --git a/src/front/Components/Layouts/Folder/index.tsx b/src/front/Components/Layouts/Folder/index.tsx
index 9df3824d..e08b3abb 100644
--- a/src/front/Components/Layouts/Folder/index.tsx
+++ b/src/front/Components/Layouts/Folder/index.tsx
@@ -1,13 +1,12 @@
 import DefaultNotaryDashboard, { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
 import BasePage from "../Base";
-import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
+import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
 import classes from "./classes.module.scss";
 import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import FolderBoxInformation from "@Front/Components/DesignSystem/Elements/FolderBoxInformation";
 import QuantityProgressBar from "@Front/Components/DesignSystem/QuantityProgressBar";
 import ClientSection from "./ClientSection";
 import ChevronIcon from "@Assets/Icons/chevron.svg";
-import Users from "@Front/Api/LeCoffreApi/SuperAdmin/Users/Users";
 
 type IProps = {};
 type IState = {
@@ -21,42 +20,51 @@ export default class Folder extends BasePage<IProps, IState>{
 		};
 		this.onSelectedFolder = this.onSelectedFolder.bind(this);
 	}
-
+	
+	// TODO: Message if the user has not created any folder yet
 	public override render(): JSX.Element {
 		return (
 			<DefaultNotaryDashboard title={"Dossier"} onSelectedFolder={this.onSelectedFolder}>
 				<div className={classes["root"]}>
-					{this.state.selectedFolder && <div className={classes["folder-informations"]}>
-						<div className={classes["folder-header"]}>
-							<div className={classes["header"]}>
-								<Typography typo={ITypo.H1Bis}>Informations du dossier</Typography>
-								<Button variant={EButtonVariant.LINE} icon={ChevronIcon}>Modifier les collaborateurs</Button>
+					{this.state.selectedFolder
+						?
+						<div className={classes["folder-informations"]}>
+							<div className={classes["folder-header"]}>
+								<div className={classes["header"]}>
+									<Typography typo={ITypo.H1Bis}>Informations du dossier</Typography>
+									<Button variant={EButtonVariant.LINE} icon={ChevronIcon}>Modifier les collaborateurs</Button>
+								</div>
+								<FolderBoxInformation folder={this.state.selectedFolder} />
+								<div className={classes["second-box"]}>
+									<FolderBoxInformation folder={this.state.selectedFolder} isDescription />
+								</div>
+								<div className={classes["progress-bar"]}>
+									<QuantityProgressBar title="Complétion du dossier" total={100} currentNumber={0} />
+								</div>
+								{this.doesFolderHaveCustomer() && <ClientSection folder={this.state.selectedFolder} />}
 							</div>
-							<FolderBoxInformation folder={this.state.selectedFolder} />
-							<div className={classes["second-box"]}>
-								<FolderBoxInformation folder={this.state.selectedFolder} isDescription />
-							</div>
-							<div className={classes["progress-bar"]}>
-								<QuantityProgressBar title="Complétion du dossier" total={100} currentNumber={0} />
-							</div>
-							{this.doesFolderHaveCustomer() && <ClientSection folder={this.state.selectedFolder} />}
-						</div>
 
-						{!this.doesFolderHaveCustomer() && <ClientSection folder={this.state.selectedFolder} />}
+							{!this.doesFolderHaveCustomer() && <ClientSection folder={this.state.selectedFolder} />}
 
-						<div className={classes["button-container"]}>
-							<Button variant={EButtonVariant.GHOST}>Archiver le dossier</Button>
-							<Button variant={EButtonVariant.SECONDARY}>Supprimer le dossier</Button>
+							<div className={classes["button-container"]}>
+								<Button variant={EButtonVariant.GHOST}>Archiver le dossier</Button>
+								<Button variant={EButtonVariant.SECONDARY}>Supprimer le dossier</Button>
+							</div>
 						</div>
-					</div>}
+						:
+						<div className={classes["no-folder-selected"]}>
+							<Typography typo={ITypo.H1Bis}>Informations du dossier</Typography>
+							<div className={classes["choose-a-folder"]}>
+							<Typography typo={ITypo.P_18} color={ITypoColor.GREY}>Veuillez sélectionner un dossier.</Typography>
+							</div>
+						</div>}
 				</div>
 			</DefaultNotaryDashboard>
 		);
 	}
-
 	public override async componentDidMount() {
-		const users = await Users.getInstance().getByUid("5rOlvAleeX");
-		console.log(users);
+		// const users = await Users.getInstance().getByUid("5rOlvAleeX");
+		// console.log(users);
 	}
 
 	private doesFolderHaveCustomer(): boolean {
diff --git a/src/front/Stores/Window.ts b/src/front/Stores/Window.ts
deleted file mode 100644
index d15a1538..00000000
--- a/src/front/Stores/Window.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-import EventEmitter from "events";
-
-export default class WindowStore {
-	private static ctx: WindowStore;
-	private readonly event = new EventEmitter();
-
-	private constructor() {
-		WindowStore.ctx = this;
-		this.iniEvents();
-	}
-
-	public static getInstance() {
-		if (!WindowStore.ctx) return new this();
-		return WindowStore.ctx;
-	}
-
-	public onScrollYDirectionChange(callback: (scrollYDifference: number) => void) {
-		this.event.on("scrollYDirectionChange", callback);
-		return () => {
-			this.event.off("scrollYDirectionChange", callback);
-		};
-	}
-
-	public onResize(callback: (window: Window) => void) {
-		this.event.on("resize", callback);
-		return () => {
-			this.event.off("resize", callback);
-		};
-	}
-
-	public onClick(callback: (e: MouseEvent) => void) {
-		this.event.on("click", callback);
-		return () => {
-			this.event.off("click", callback);
-		};
-	}
-
-	private iniEvents(): void {
-		window.addEventListener("scroll", (e: Event) => this.scrollYHandler());
-		window.addEventListener("resize", (e: Event) => this.resizeHandler());
-		document.addEventListener("click", (e: MouseEvent) => this.clickHandler(e), true);
-	}
-
-	private clickHandler(e: MouseEvent) {
-		this.event.emit("click", e);
-	}
-
-	private scrollYHandler = (() => {
-		let previousY: number = window.scrollY;
-		let snapShotY: number = previousY;
-		let previousYDirection: number = 1;
-		return (): void => {
-			const scrollYDirection = window.scrollY - previousY > 0 ? 1 : -1;
-			if (previousYDirection !== scrollYDirection) {
-				snapShotY = window.scrollY;
-			}
-
-			this.event.emit("scrollYDirectionChange", snapShotY - window.scrollY);
-			previousY = window.scrollY;
-			previousYDirection = scrollYDirection;
-		};
-	})();
-
-	private resizeHandler() {
-		this.event.emit("resize", window);
-	}
-}
diff --git a/src/front/Stores/WindowStore.ts b/src/front/Stores/WindowStore.ts
index f40fb3f6..d15a1538 100644
--- a/src/front/Stores/WindowStore.ts
+++ b/src/front/Stores/WindowStore.ts
@@ -10,7 +10,7 @@ export default class WindowStore {
 	}
 
 	public static getInstance() {
-		if (!WindowStore.ctx) new this();
+		if (!WindowStore.ctx) return new this();
 		return WindowStore.ctx;
 	}
 
@@ -21,24 +21,35 @@ export default class WindowStore {
 		};
 	}
 
-    public onResize(callback: (window: Window) => void) {
+	public onResize(callback: (window: Window) => void) {
 		this.event.on("resize", callback);
 		return () => {
 			this.event.off("resize", callback);
 		};
 	}
 
-	private iniEvents(): void {
-		window.addEventListener("scroll", (e: Event) => this.scrollYHandler(e));
-        window.addEventListener("resize", (e: Event) => this.resizeHandler());
+	public onClick(callback: (e: MouseEvent) => void) {
+		this.event.on("click", callback);
+		return () => {
+			this.event.off("click", callback);
+		};
+	}
 
+	private iniEvents(): void {
+		window.addEventListener("scroll", (e: Event) => this.scrollYHandler());
+		window.addEventListener("resize", (e: Event) => this.resizeHandler());
+		document.addEventListener("click", (e: MouseEvent) => this.clickHandler(e), true);
+	}
+
+	private clickHandler(e: MouseEvent) {
+		this.event.emit("click", e);
 	}
 
 	private scrollYHandler = (() => {
 		let previousY: number = window.scrollY;
 		let snapShotY: number = previousY;
 		let previousYDirection: number = 1;
-		return (e: Event): void => {
+		return (): void => {
 			const scrollYDirection = window.scrollY - previousY > 0 ? 1 : -1;
 			if (previousYDirection !== scrollYDirection) {
 				snapShotY = window.scrollY;
@@ -50,7 +61,7 @@ export default class WindowStore {
 		};
 	})();
 
-    private resizeHandler() {
+	private resizeHandler() {
 		this.event.emit("resize", window);
 	}
 }