diff --git a/assets/styles/modules/_app.scss b/assets/styles/modules/_app.scss
index cdfd8ae..888e658 100644
--- a/assets/styles/modules/_app.scss
+++ b/assets/styles/modules/_app.scss
@@ -1,8 +1,100 @@
 * {
-  box-sizing: border-box;
-  margin: 0;
-  outline: 0;
-  padding: 0;
-  text-decoration: none;
-  text-rendering: optimizeLegibility;
+	box-sizing: border-box;
+	margin: 0;
+	outline: 0;
+	padding: 0;
+	text-decoration: none;
+	text-rendering: optimizeLegibility;
+}
+
+h1,
+h2,
+h3 {
+	margin-bottom: 10%;
+	padding-top: 5%;
+}
+
+h1,
+h2 {
+	text-align: center;
+}
+
+h3 {
+	text-align: left;
+}
+
+#first-cell {
+	margin-top: 10vh;
+}
+
+#first-cell > p,
+#second-cell > p {
+	text-align: center;
+}
+
+#second-cell > a {
+	text-align: center;
+	background-color: white;
+	margin-bottom: 10%;
+}
+
+#second-cell {
+	margin-bottom: 10vh;
+}
+
+main {
+	padding-left: 5%;
+	padding-right: 5%;
+	text-align: left;
+	display: grid;
+	grid-template-columns: 100%;
+}
+
+.text-container {
+	width: 90%;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+}
+.text-container > p {
+	width: 100%;
+	font-size: 0.95rem;
+	margin-bottom: 10px;
+}
+.text-container > a,
+#second-cell {
+	background-color: rgb(172, 215, 255);
+	padding-bottom: 3%;
+}
+
+.text-container > a {
+	border-radius: 5%;
+	padding: 5%;
+}
+
+.img-container {
+	width: 90%;
+	text-align: center;
+}
+
+img {
+	margin-top: 5vh;
+	margin-bottom: 15vh;
+	width: 100%;
+	height: auto;
+	border-radius: 5%;
+	box-shadow: 0 13px 20px -5px rgba(21, 21, 39, 0.726);
+}
+
+footer {
+	height: 20vh;
+	width: 100%;
+	background-color: black;
+	color: white;
+	text-align: center;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: 5px;
 }
diff --git a/assets/styles/modules/_breakpoints.scss b/assets/styles/modules/_breakpoints.scss
index bbbea70..db9efea 100644
--- a/assets/styles/modules/_breakpoints.scss
+++ b/assets/styles/modules/_breakpoints.scss
@@ -2,7 +2,47 @@
 @import "variables";
 
 // Medium devices (tablets, 768px and up)
-@media (min-width: 768px) {}
+@media (min-width: 768px) {
+	body {
+		display: flex;
+		justify-content: center;
+	}
+	.double-column-cell {
+		// margin-left: -5vw;
+		width: 100%;
+	}
+
+	main {
+		width: 700px;
+		height: auto;
+	}
+}
 
 // Large devices (desktops, 992px and up)
-@media (min-width: 992px) {}
+@media (min-width: 992px) {
+	main {
+		padding-left: 5%;
+		padding-right: 5%;
+		text-align: left;
+		display: grid;
+		grid-template-columns: 50% 50%;
+		grid-area: "left rigth" "double" "left rigth" "left rigth" "left rigth"
+			"left rigth" "left rigth" "left rigth" "footer";
+		width: 990px;
+		height: auto;
+		margin-top: 20vh;
+	}
+
+	#second-cell,
+	footer {
+		grid-column: 1 / span 2;
+	}
+
+	#first-cell {
+		margin-top: 0;
+	}
+	#first-cell > p,
+	h1 {
+		text-align: start;
+	}
+}
diff --git a/assets/styles/styles.css b/assets/styles/styles.css
index 84eb7fe..7cc8bec 100644
--- a/assets/styles/styles.css
+++ b/assets/styles/styles.css
@@ -8,6 +8,137 @@
   text-rendering: optimizeLegibility;
 }
 
+h1,
+h2,
+h3 {
+  margin-bottom: 10%;
+  padding-top: 5%;
+}
+
+h1,
+h2 {
+  text-align: center;
+}
+
+h3 {
+  text-align: left;
+}
+
+#first-cell {
+  margin-top: 10vh;
+}
+
+#first-cell > p,
+#second-cell > p {
+  text-align: center;
+}
+
+#second-cell > a {
+  text-align: center;
+  background-color: white;
+  margin-bottom: 10%;
+}
+
+#second-cell {
+  margin-bottom: 10vh;
+}
+
+main {
+  padding-left: 5%;
+  padding-right: 5%;
+  text-align: left;
+  display: grid;
+  grid-template-columns: 100%;
+}
+
+.text-container {
+  width: 90%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.text-container > p {
+  width: 100%;
+  font-size: 0.95rem;
+  margin-bottom: 10px;
+}
+
+.text-container > a,
+#second-cell {
+  background-color: rgb(172, 215, 255);
+  padding-bottom: 3%;
+}
+
+.text-container > a {
+  border-radius: 5%;
+  padding: 5%;
+}
+
+.img-container {
+  width: 90%;
+  text-align: center;
+}
+
+img {
+  margin-top: 5vh;
+  margin-bottom: 15vh;
+  width: 100%;
+  height: auto;
+  border-radius: 5%;
+  box-shadow: 0 13px 20px -5px rgba(21, 21, 39, 0.726);
+}
+
+footer {
+  height: 20vh;
+  width: 100%;
+  background-color: black;
+  color: white;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+}
+
+@media (min-width: 768px) {
+  body {
+    display: flex;
+    justify-content: center;
+  }
+  .double-column-cell {
+    width: 100%;
+  }
+  main {
+    width: 700px;
+    height: auto;
+  }
+}
+@media (min-width: 992px) {
+  main {
+    padding-left: 5%;
+    padding-right: 5%;
+    text-align: left;
+    display: grid;
+    grid-template-columns: 50% 50%;
+    grid-area: "left rigth" "double" "left rigth" "left rigth" "left rigth" "left rigth" "left rigth" "left rigth" "footer";
+    width: 990px;
+    height: auto;
+    margin-top: 20vh;
+  }
+  #second-cell,
+footer {
+    grid-column: 1/span 2;
+  }
+  #first-cell {
+    margin-top: 0;
+  }
+  #first-cell > p,
+h1 {
+    text-align: start;
+  }
+}
 html {
   font-family: "Inter", sans-serif;
 }
diff --git a/assets/styles/styles.css.map b/assets/styles/styles.css.map
index f39486f..f2adb38 100644
--- a/assets/styles/styles.css.map
+++ b/assets/styles/styles.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["modules/_typography.scss","modules/_app.scss"],"names":[],"mappings":"AAAQ;ACAR;EACE;EACA;EACA;EACA;EACA;EACA;;;ADLF;EAAO;;;AACP;EACE;IAAO","file":"styles.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["modules/_typography.scss","modules/_app.scss","modules/_breakpoints.scss"],"names":[],"mappings":"AAAQ;ACAR;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;AAAA;AAAA;EAGC;EACA;;;AAGD;AAAA;EAEC;;;AAGD;EACC;;;AAGD;EACC;;;AAGD;AAAA;EAEC;;;AAGD;EACC;EACA;EACA;;;AAGD;EACC;;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;;;AAED;EACC;EACA;EACA;;;AAED;AAAA;EAEC;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AC9FD;EACC;IACC;IACA;;EAED;IAEC;;EAGD;IACC;IACA;;;AAKF;EACC;IACC;IACA;IACA;IACA;IACA;IACA;IAEA;IACA;IACA;;EAGD;AAAA;IAEC;;EAGD;IACC;;EAED;AAAA;IAEC;;;AF5CF;EAAO;;;AACP;EACE;IAAO","file":"styles.css"}
\ No newline at end of file
diff --git a/index.html b/index.html
index 747a38f..c07f3c8 100644
--- a/index.html
+++ b/index.html
@@ -1,12 +1,131 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <link rel="icon" type="image/svg+xml" href="/assets/images/favicon.svg" sizes="any">
-    <link rel="stylesheet" href="assets/styles/styles.css">
-    <title>Sass Project</title>
-</head>
-<body>
-<h1 class="title">Hello world!</h1>
-</body>
+	<head>
+		<meta charset="UTF-8" />
+		<link
+			rel="icon"
+			type="image/svg+xml"
+			href="/assets/images/favicon.svg"
+			sizes="any"
+		/>
+		<link rel="stylesheet" href="assets/styles/styles.css" />
+		<link
+			rel="stylesheet"
+			href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+		/>
+		<title>Sass Project</title>
+	</head>
+	<body>
+		<main>
+			<div id="first-cell" class="text-container">
+				<h1 class="title">Hello world!</h1>
+				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
+			</div>
+			<div class="img-container">
+				<img src="https://picsum.photos/500/350?random=1" alt="random image" />
+			</div>
+
+			<div id="second-cell" class="text-container double-column-cell">
+				<h2>This is a Title</h2>
+				<p>
+					Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+					eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+					minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+					aliquip ex ea commodo consequat.
+				</p>
+				<a href="#">http://thisisalink.com</a>
+			</div>
+
+			<div class="text-container">
+				<h3>This is a Title</h3>
+				<p>
+					Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+					eiusmod tempor incididunt ut labore et dolore magna aliqua.
+				</p>
+				<a href="#">http://thisisalink.com</a>
+				<p>
+					Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+					nisi ut aliquip ex ea commodo consequat.
+				</p>
+			</div>
+			<div class="img-container">
+				<img src="https://picsum.photos/500/350?random=2" alt="random image" />
+			</div>
+
+			<div class="text-container">
+				<h3>This is a Title</h3>
+				<p>
+					Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+					eiusmod tempor incididunt ut labore et dolore magna aliqua.
+				</p>
+				<a href="#">http://thisisalink.com</a>
+			</div>
+			<div class="img-container">
+				<img src="https://picsum.photos/500/350?random=3" alt="random image" />
+			</div>
+
+			<div class="text-container">
+				<h3>This is a Title</h3>
+				<p>
+					Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+					eiusmod tempor incididunt ut labore et dolore magna aliqua.
+				</p>
+				<a href="#">http://thisisalink.com</a>
+			</div>
+			<div class="img-container">
+				<img src="https://picsum.photos/500/350?random=4" alt="random image" />
+			</div>
+
+			<div class="text-container">
+				<h3>This is a Title</h3>
+				<p>
+					Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+					eiusmod tempor incididunt ut labore et dolore magna aliqua.
+				</p>
+				<a href="#">http://thisisalink.com</a>
+				<p>
+					Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+					nisi ut aliquip ex ea commodo consequat.
+				</p>
+			</div>
+			<div class="img-container">
+				<img src="https://picsum.photos/500/350?random=5" alt="random image" />
+			</div>
+
+			<div class="text-container">
+				<h3>This is a Title</h3>
+				<p>
+					Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+					eiusmod tempor incididunt ut labore et dolore magna aliqua.
+				</p>
+				<a href="#">http://thisisalink.com</a>
+			</div>
+			<div class="img-container">
+				<img src="https://picsum.photos/500/350?random=6" alt="random image" />
+			</div>
+
+			<div class="text-container">
+				<h3>This is a Title</h3>
+				<p>
+					Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+					eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+					minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+					aliquip ex ea commodo consequat.
+				</p>
+				<a href="#">http://thisisalink.com</a>
+			</div>
+			<div class="img-container">
+				<img src="https://picsum.photos/500/350?random=7" alt="random image" />
+			</div>
+
+			<footer class="double-column-cell">
+				<a href="https://github.com/JohanCarrillo">
+					<i class="fa fa-github" style="font-size: 24px; color: white"
+						>JohanCarrillo</i
+					>
+				</a>
+				<p>This site is powered by many fluffy cats around all the world</p>
+			</footer>
+		</main>
+	</body>
 </html>