diff --git a/pages/index.js b/pages/index.js
index 4a43f38..f3bae7e 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -14,19 +14,21 @@ export default function Home() {
 
 	if (session) {
 		return (
-			<div className={styles.container}>
+			<div className="">
 				<Head>
 					<title>Wastpol</title>
 				</Head>
 
-				<div className="flex justify-between">
+				<div className="flex md:flex-row flex-col justify-between px-8 mt-2">
 					<Nav />
 					<UserTop session={session} />
 				</div>
 
-				<main className="flex flex-1 flex-col justify-center items-center p-8 mx-36 mt-12 rounded-md shadow-md transition-all duration-500 hover:shadow-xl">
-					<Header />
-					<Generator />
+				<main className="flex flex-1 flex-col items-center">
+					<div className="flex flex-col items-center p-8 mt-12 rounded-md shadow-md transition-all duration-500 hover:shadow-xl">
+						<Header />
+						<Generator />
+					</div>
 				</main>
 			</div>
 		);
diff --git a/templates/generator.js b/templates/generator.js
index 5572cdb..6a5ea2a 100644
--- a/templates/generator.js
+++ b/templates/generator.js
@@ -124,7 +124,7 @@ export default function Generator() {
 			});
 	};
 	return (
-		<div className="flex">
+		<div className="flex xl:flex-row flex-col">
 			<div className="flex flex-col">
 				<Pane width={480}>
 					<TextareaField
diff --git a/templates/header.js b/templates/header.js
index 24d29cb..ff2f091 100644
--- a/templates/header.js
+++ b/templates/header.js
@@ -2,10 +2,10 @@ import { Pane, Heading } from "evergreen-ui";
 
 export default function Header() {
 	return (
-		<Pane>
+
 			<Heading is="h1" size={800} marginBottom={42}>
 				Generuj profil przekroju terenu
 			</Heading>
-		</Pane>
+
 	);
 }
