diff --git a/src/App.styled.ts b/src/App.styled.ts
index 2b73dc3..42faa88 100644
--- a/src/App.styled.ts
+++ b/src/App.styled.ts
@@ -4,15 +4,15 @@ import styled from '@emotion/styled';
 export const Layout = styled.div`
 	flex: 1;
 	display: grid;
-	grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) minmax(0, 3fr);
-	grid-template-rows: repeat(36, 1fr);
-	grid-gap: 20px;
 	padding: 20px;
-
-	@media (max-width: 768px) {
-		grid-template-columns: 1fr;
-		grid-template-rows: auto;
-		grid-gap: 10px;
+	grid-template-columns: 1fr;
+	grid-template-rows: auto;
+	grid-gap: 10px;
+
+	@media (min-width: 768px) {
+		grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) minmax(0, 3fr);
+		grid-template-rows: repeat(36, 1fr);
+		grid-gap: 20px;
 	}
 `;
 
@@ -35,99 +35,104 @@ const List = styled(BaseLayoutElement)`
 `;
 
 export const Info = styled.div`
-	grid-column: 1 / 2;
-	grid-row: 1 / 5;
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
+	grid-column: 1;
+	grid-row: 1;
 
-	@media (max-width: 768px) {
-		grid-column: 1;
-		grid-row: 1;
+	@media (min-width: 768px) {
+		grid-column: 1 / 2;
+		grid-row: 1 / 5;
 	}
 `;
 
 export const Editor = styled(BaseLayoutElement)`
 	padding: 0;
-	grid-column: 1 / 2;
-	grid-row: 5 / 31;
-
-	@media (max-width: 768px) {
-		grid-column: 1;
-		grid-row: 2;
-		height: 50vh;
+	grid-column: 1;
+	grid-row: 2;
+	height: 50vh;
+
+	@media (min-width: 768px) {
+		grid-column: 1 / 2;
+		grid-row: 5 / 31;
+		height: unset;
 	}
 `;
 
 export const WebApi = styled(List)`
-	grid-column: 1 / 2;
-	grid-row: 31 / 37;
-
-	@media (max-width: 768px) {
-		grid-column: 1;
-		grid-row: 3;
-		height: 10vh;
+	grid-column: 1;
+	grid-row: 3;
+	height: 10vh;
+
+	@media (min-width: 768px) {
+		grid-column: 1 / 2;
+		grid-row: 31 / 37;
+		height: unset;
 	}
 `;
 
 export const CallStack = styled(List)`
-	grid-column: 2 / 3;
-	grid-row: 1 / 19;
-
-	@media (max-width: 768px) {
-		grid-column: 1;
-		grid-row: 4;
-		height: 10vh;
+	grid-column: 1;
+	grid-row: 4;
+	height: 10vh;
+
+	@media (min-width: 768px) {
+		grid-column: 2 / 3;
+		grid-row: 1 / 19;
+		height: unset;
 	}
 `;
 
 export const Console = styled(List)`
-	grid-column: 2 / 3;
-	grid-row: 19 / 37;
-
-	@media (max-width: 768px) {
-		grid-column: 1;
-		grid-row: 5;
-		height: 10vh;
+	grid-column: 1;
+	grid-row: 5;
+	height: 10vh;
+
+	@media (min-width: 768px) {
+		grid-column: 2 / 3;
+		grid-row: 19 / 37;
+		height: unset;
 	}
 `;
 
 export const RenderCallbacks = styled(List)`
-	grid-column: 3 / 4;
-	grid-row: 1 / 7;
-
-	@media (max-width: 768px) {
-		grid-column: 1;
-		grid-row: 6;
-		height: 10vh;
+	grid-column: 1;
+	grid-row: 6;
+	height: 10vh;
+
+	@media (min-width: 768px) {
+		grid-column: 3 / 4;
+		grid-row: 1 / 7;
+		height: unset;
 	}
 `;
 
 export const Tasks = styled(List)`
-	grid-column: 3 / 4;
-	grid-row: 7 / 13;
-
-	@media (max-width: 768px) {
-		grid-column: 1;
-		grid-row: 7;
-		height: 10vh;
+	grid-column: 1;
+	grid-row: 7;
+	height: 10vh;
+
+	@media (min-width: 768px) {
+		grid-column: 3 / 4;
+		grid-row: 7 / 13;
+		height: unset;
 	}
 `;
 
 export const Microtasks = styled(List)`
-	grid-column: 3 / 4;
-	grid-row: 13 / 19;
-
-	@media (max-width: 768px) {
-		grid-column: 1;
-		grid-row: 8;
-		height: 10vh;
+	grid-column: 1;
+	grid-row: 8;
+	height: 10vh;
+
+	@media (min-width: 768px) {
+		grid-column: 3 / 4;
+		grid-row: 13 / 19;
+		height: unset;
 	}
 `;
 
 export const EventLoop = styled(BaseLayoutElement)`
-	grid-column: 3 / 4;
-	grid-row: 19 / 37;
 	display: flex;
 	flex-direction: column;
 	justify-content: space-between;
@@ -135,11 +140,14 @@ export const EventLoop = styled(BaseLayoutElement)`
 	overflow: auto;
 	gap: 10px;
 	position: relative;
-
-	@media (max-width: 768px) {
-		grid-column: 1;
-		grid-row: 9;
-		height: 40vh;
+	grid-column: 1;
+	grid-row: 9;
+	height: 40vh;
+
+	@media (min-width: 768px) {
+		grid-column: 3 / 4;
+		grid-row: 19 / 37;
+		height: unset;
 	}
 `;
 
diff --git a/src/components/Modal/Modal.styled.ts b/src/components/Modal/Modal.styled.ts
index 031bbfe..f4fe65a 100644
--- a/src/components/Modal/Modal.styled.ts
+++ b/src/components/Modal/Modal.styled.ts
@@ -1,23 +1,22 @@
-import styled from '@emotion/styled';
 import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 import { Box } from '@mui/material';
 
-
 export const StyledBox = styled(Box)(
 	({ theme }) => css`
 		position: absolute;
 		top: 50%;
 		left: 50%;
 		transform: translate(-50%, -50%);
-		max-width: 480px;
-		width: 100%;
 		box-sizing: border-box;
 		background: ${theme.custom.colors.wheel.background};
 		padding: 40px;
+		max-width: 400px;
+		width: 90%;
 
-		@media (max-width: 768px) {
-			max-width: 400px;
-			width: 90%;
+		@media (min-width: 768px) {
+			max-width: 480px;
+			width: 100%;
 		}
 	`
 );