diff --git a/src/components/app-menu/AppMenuElement.ts b/src/components/app-menu/AppMenuElement.ts
index beb3b74..15fc092 100644
--- a/src/components/app-menu/AppMenuElement.ts
+++ b/src/components/app-menu/AppMenuElement.ts
@@ -105,6 +105,11 @@ class AppMenuElement extends BaseComponentElement {
 			}
 			return html`<menu-item data-path="${path}">${title}</menu-item>`;
 		};
+		const menuButton = (title: string, action?: string): TemplateResult => {
+			return html` <div class="menu-item --retract" data-target="menu-item.itemEl">
+				<button class="btn btn-link" data-target="app-link.main" app-action="${action}">${title}</button>
+			</div>`;
+		};
 		const authMenu = (path: string, title: string, action?: string): TemplateResult => {
 			if (isAuth) {
 				return regularMenu(path, title, action);
@@ -133,7 +138,8 @@ class AppMenuElement extends BaseComponentElement {
 				${authMenu('/subscriptions', 'Subscriptions', 'click:app-menu#modalSubscription')}
 				${authMenu('/wallet/all', 'My Wallets', 'click:app-menu#modalWallet')} ${renderWallets(walletData)}
 				<span class="menu-item divider"></span>
-				${authMenu('/logout', 'Logout')} ${notAuthMenu('/login', 'Login')} ${notAuthMenu('/register', 'Register')}
+				${authMenu('/logout', 'Logout')} ${notAuthMenu('/login', 'Login')}
+				${notAuthMenu('/register', 'Register')}${menuButton('Retract', 'click:menu-layout#retractMenu')}
 			</div>
 		`;
 	};
diff --git a/src/layouts/menu-layout/MenuLayoutElement.ts b/src/layouts/menu-layout/MenuLayoutElement.ts
index 664d3bd..acd7a7e 100644
--- a/src/layouts/menu-layout/MenuLayoutElement.ts
+++ b/src/layouts/menu-layout/MenuLayoutElement.ts
@@ -8,6 +8,7 @@ import { AppMainElement } from 'components/';
 class MenuLayoutElement extends BaseLayoutElement {
 	@closest appMain: AppMainElement;
 	@target appPage: HTMLDivElement;
+	@target appSidebar: HTMLDivElement;
 
 	constructor() {
 		super();
@@ -36,12 +37,20 @@ class MenuLayoutElement extends BaseLayoutElement {
 		this.update();
 	};
 
+	retractMenu = () => {
+		this.appPage.classList.toggle('--retracted');
+	};
+
 	render = (): TemplateResult => {
 		const _isAuth = this.isAuth;
 		return html`
-			<div data-target="menu-layout.appPage">
-				${_isAuth ? html`<app-menu></app-menu>` : html``}
-				<app-slot data-target="menu-layout.appSlot"></app-slot>
+			<div class="app-layout" data-target="menu-layout.appPage">
+				${_isAuth
+					? html`<div class="app-sidebar" data-target="menu-layout.appSidebar"><app-menu></app-menu></div>`
+					: html``}
+				<div class="app-content">
+					<app-slot data-target="menu-layout.appSlot"></app-slot>
+				</div>
 			</div>
 		`;
 	};
diff --git a/src/styles/menu-item/menu-item.scss b/src/styles/menu-item/menu-item.scss
index 9b4dd97..38b479e 100644
--- a/src/styles/menu-item/menu-item.scss
+++ b/src/styles/menu-item/menu-item.scss
@@ -1,82 +1,96 @@
 .menu-item {
-    &.divider {
-        display: block;
-        height: 1px;
-        width: 80%;
-        margin: 1px auto;
-        border-bottom: 1px solid $gray-08;
-    }
-    &.menu-header {
-        flex: 1;
-        align-self: center;
-        text-align: center;
-        text-transform: uppercase;
-        text-decoration: underline;
-        margin: 8px auto;
-        font-family: Roboto;
-        font-size: 38px !important;
-    }
+	&.divider {
+		display: block;
+		height: 1px;
+		width: 80%;
+		margin: 1px auto;
+		border-bottom: 1px solid $gray-08;
+	}
+	&.menu-header {
+		flex: 1;
+		align-self: center;
+		text-align: center;
+		text-transform: uppercase;
+		text-decoration: underline;
+		margin: 8px auto;
+		font-family: Roboto;
+		font-size: 38px !important;
+	}
 }
-menu-item {
-    [data-target="menu-item.itemEl"] {
-        display: grid;
-        grid-template-columns: 1fr auto;
-        grid-template-areas: "main custom";
-        app-link {
-            [data-target="app-link.main"] {
-                grid-area: main;
-                display: flex;
-                align-items: center;
-                background-color: $black;
-                color: $gray-01;
-                border-radius: 0;
-                padding: 2px 0;
-                height: 44px;
-                text-align: left;
-                padding-left: 80px;
-                &:hover {
-                    color: $white;
-                    background-color: $gray-10;
-                }
-            }
-        }
-        &.selected {
-            app-link {
-                [data-target="app-link.main"] {
-                    background-color: $gray-09;
-                }
-            }
-        }
-        [data-target="menu-item.customButton"] {
-            grid-area: custom;
-            display: flex;
-            width: 10px;
-            height: 100%;
-            background-color: $blue-09;
-            cursor: pointer;
-            user-select: none;
-            align-items: center;
-            justify-content: center;
-            overflow: hidden;
-            transition: width 0.3s;
-            color: transparent;
-            * {
-                visibility: hidden;
-            }
-        }
-        &:hover {
-            [data-target="menu-item.customButton"] {
-                grid-area: custom;
-                width: 50px;
-                transition: color 0.3s step-start;
-                color: $white;
-                * {
-                    transition: visibility 0.3s;
-                }
-                &:hover {
-                    background-color: $blue-08;
-                }
-            }
-        }
-    }
+
+[data-target='menu-item.itemEl'] {
+	display: grid;
+	grid-template-columns: 1fr auto;
+	grid-template-areas: 'main custom';
+	[data-target='app-link.main'] {
+		grid-area: main;
+		display: flex;
+		align-items: center;
+		background-color: $black;
+		color: $gray-01;
+		border-radius: 0;
+		padding: 2px 0;
+		height: 44px;
+		text-align: left;
+		padding-left: 80px;
+		&:hover {
+			color: $white;
+			background-color: $gray-10;
+		}
+	}
+	&.selected {
+		app-link {
+			[data-target='app-link.main'] {
+				background-color: $gray-09;
+			}
+		}
+	}
+	&.--retract {
+		position: absolute;
+		bottom: 0;
+		width: 100%;
+	}
+	[data-target='menu-item.customButton'] {
+		grid-area: custom;
+		display: flex;
+		width: 10px;
+		height: 100%;
+		background-color: $blue-09;
+		cursor: pointer;
+		user-select: none;
+		align-items: center;
+		justify-content: center;
+		overflow: hidden;
+		transition: width 0.3s;
+		color: transparent;
+		* {
+			visibility: hidden;
+		}
+	}
+	&:hover {
+		[data-target='menu-item.customButton'] {
+			grid-area: custom;
+			width: 50px;
+			transition: color 0.3s step-start;
+			color: $white;
+			* {
+				transition: visibility 0.3s;
+			}
+			&:hover {
+				background-color: $blue-08;
+			}
+		}
+	}
+}
+
+@media (max-width: 600px) {
+	menu-item {
+		[data-target='menu-item.itemEl'] {
+			[data-target='menu-item.customButton'] {
+				grid-area: custom;
+				width: 50px;
+				color: $white;
+			}
+		}
+	}
 }
diff --git a/src/styles/sidebar/sidebar.scss b/src/styles/sidebar/sidebar.scss
index 47f6998..afda769 100644
--- a/src/styles/sidebar/sidebar.scss
+++ b/src/styles/sidebar/sidebar.scss
@@ -1,31 +1,82 @@
 menu-layout {
 	[data-target='menu-layout.appPage'] {
-		display: grid;
-		position: relative;
-		height: 100%;
-		width: 100%;
-		min-height: 100vh;
-		grid-template-columns: 301px auto;
-		grid-template-areas: 'sidebar content';
-
-		app-menu {
-			[data-target='app-menu.sidebar'] {
-				grid-area: sidebar;
-				position: absolute;
-				top: 0;
-				bottom: 0;
-				left: 0;
+		&.app-layout {
+			display: flex;
+			flex-direction: row;
+			flex-wrap: wrap;
+			width: 100%;
+			.app-sidebar {
 				width: 301px;
-				border-right: 1px solid $gray-08;
-				background-color: $black;
+				[data-target='app-menu.sidebar'] {
+					z-index: 100;
+					position: fixed;
+					overflow: hidden;
+					top: 0;
+					bottom: 0;
+					left: 0;
+					width: 301px;
+					border-right: 1px solid #6b6b6b;
+					background-color: #181818;
+				}
 			}
-		}
-
-		app-slot {
-			[data-target='base-layout.content'] {
-				grid-area: content;
+			.app-content {
+				flex: 1;
 				margin: 15px;
 			}
+			&.--retracted {
+				.app-sidebar {
+					position: absolute;
+					left: -302px;
+					[data-target='app-menu.sidebar'] {
+						left: -302px;
+						overflow: visible;
+						[data-target='menu-item.itemEl'] {
+							&.--retract {
+								position: absolute;
+								left: 60px;
+								button {
+									background-color: $white;
+								}
+								&::after {
+									content: '>';
+									margin: auto;
+									margin-left: -25px;
+									font-size: 32px;
+									pointer-events: none;
+									font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+
+									color: #000;
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}
+
+@media (max-width: 600px) {
+	menu-layout {
+		[data-target='menu-layout.appPage'] {
+			&.app-layout {
+				.app-sidebar {
+					width: 100%;
+
+					[data-target='app-menu.sidebar'] {
+						width: 100%;
+					}
+				}
+				&.--retracted {
+					.app-sidebar {
+						width: 301px;
+
+						[data-target='app-menu.sidebar'] {
+							width: 301px;
+						}
+					}
+				}
+			}
 		}
 	}
 }
diff --git a/src/styles/wallet-header/wallet-header.scss b/src/styles/wallet-header/wallet-header.scss
index 2f206c2..e7098e4 100644
--- a/src/styles/wallet-header/wallet-header.scss
+++ b/src/styles/wallet-header/wallet-header.scss
@@ -53,3 +53,79 @@ wallet-header {
 		right: 0;
 	}
 }
+
+@media (max-width: 600px) {
+	.wallet-buttons {
+		position: relative;
+		height: 50px;
+		margin-bottom: 10px;
+		.button-group {
+			display: flex;
+			align-content: space-between;
+			button {
+				flex: 1;
+				height: 50px;
+			}
+		}
+	}
+	.wallet-header {
+		width: 100%;
+		height: 143px;
+		display: block;
+		position: relative;
+		.header-item {
+			position: absolute;
+			height: 143px;
+			&:nth-child(1) {
+				z-index: 15;
+				width: 25%;
+				background-color: transparent;
+				border: none;
+				height: auto;
+				left: 0;
+				bottom: 12px;
+				.--header {
+					font-size: 11px;
+					margin-top: 0;
+				}
+				.--content {
+					.--balance {
+						font-size: 12px;
+						margin-top: 0;
+					}
+				}
+				.--currency {
+					font-size: 10px;
+					margin-top: 0;
+				}
+			}
+			&:nth-child(2) {
+				z-index: 10;
+				width: 100%;
+			}
+			&:nth-child(3) {
+				z-index: 15;
+				width: 25%;
+				background-color: transparent;
+				border: none;
+				height: auto;
+				right: 0;
+				bottom: 12px;
+				.--header {
+					font-size: 11px;
+					margin-top: 0;
+				}
+				.--content {
+					.--balance {
+						font-size: 12px;
+						margin-top: 0;
+					}
+				}
+				.--currency {
+					font-size: 10px;
+					margin-top: 0;
+				}
+			}
+		}
+	}
+}