diff --git a/assets/css/home-style.css b/assets/css/home-style.css
index 4d93e9c..7d34201 100755
--- a/assets/css/home-style.css
+++ b/assets/css/home-style.css
@@ -9,7 +9,7 @@ h1 {
 .mind-site-title {
 	height: 100%;
 	width: 100%;
-	margin: 0%;
+	margin: auto;
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -22,13 +22,47 @@ h1 {
 
 .mind-site-title h1 {
 	margin-top: 100px;
-	position: absolute;
+	padding: 0;
+}
+
+.navbar-secondary {
+	width: 100%;
+
+	display: flex;
+	align-items: center;
+	justify-content: flex-start;
+	text-align: center;
+	text-decoration: none;
+	overflow: hidden;
+	padding: 0;
+
+	background-color: rgb(50, 50, 50);
+}
+
+.navbar-secondary li {
+  display: inline-block;
+	text-align: center;
+	font-size: 25px;
+	font-family: 'Oswald', sans-serif;
+	font-weight: 300;
+  margin: 0;
+  padding: 0 10px;
+}
+
+.navbar-secondary a {
+  color: white;
+  margin: 0;
+  padding: 0;
+	text-decoration: none;
+  display: flex;
+  align-items: center;
 }
 
 .mind-feed_main {
 	display: grid;
 	grid-template-columns: 1fr 1fr 1fr;
 	grid-gap: 30px;
+	padding: 50px 0;
 }
 
 .post-card_main {
@@ -36,9 +70,8 @@ h1 {
   flex-direction: column;
   height: 100%;
   width: 100%;
-	padding: 20px;
-
 	box-sizing: border-box;
+
 	/* Style */
 	background-color: rgb(50, 50, 50);
 	border: 1px solid;
@@ -46,6 +79,8 @@ h1 {
 	border-radius: 5px;
 	box-shadow: 0 1px 1px black, 0 2px 4px black;
 	transition: 0.5s;
+	padding: 20px;
+	font-size: 18px;
 }
 
 .post-card_main:hover {
@@ -61,13 +96,30 @@ h1 {
 	3. scale down
 	transform: scale(0.96);
 
-	ATM: scale up
+	ATM: move up
 	*/
 	transform:translate3d(0,-5px,0);
 }
 
+.post-card_excerpt {
+  text-align: justify;
+}
+
 a.post-card_main {
-	color: white;
+	color: rgb(200, 200, 200);
+}
+
+.post-card_meta {
+	font-family: 'Roboto', sans-serif;
+	font-weight: 700;
+	text-transform: uppercase;
+	font-size: 14px;
+	margin: 10px 5px 0;
+	color: rgb(180, 180, 180);
+}
+
+.post-card_tag {
+	color: #3fd5ff;
 }
 
 a.post-card_main:hover {
@@ -86,74 +138,35 @@ article {
 	box-sizing: border-box;
 }
 
-.post-card_profile-image {
+.post-card_author-image {
 	border-radius: 20%;
 	margin-left: 10px;
 	max-width: 30px;
 }
 
 .post-card_feature-image {
-	border-radius: 5px;
+
+	/*
+	The following 3 statements are used
+	to make all images have the same size.
+
+	This has the downside of being relatively more difficult to scale,
+	so if you want to go back to normal viewing (full image)
+	only leave:
 	width: 100%;
+	*/
+	object-fit: cover;
+	width: 100%;
+	height: 217px;
+	max-height: 100%;
+
+
+	border-radius: 5px;
 }
 
-/* ANIMATED GRADIENT BACKGROUND */
-@keyframes gradient {
-	0% {background-position: 0%}
-	100% {background-position: 100%}
-}
-
-/*MOBILE*/
-@media (min-width: 0px) and (max-width: 200px) {
-
-	h1 {
-		font-size: 20px;
-	}
-}
-
-@media (min-width: 200px) and (max-width: 300px) {
-
-	h1 {
-		font-size: 39px;
-	}
-}
-
-@media (min-width: 300px) and (max-width: 400px) {
-
-	h1 {
-		font-size: 52px;
-	}
-}
-
-@media (min-width: 400px) and (max-width: 500px) {
-
-	h1 {
-		font-size: 64px;
-	}
-}
-@media (min-width: 500px) and (max-width: 600px) {
-
-	h1 {
-		font-size: 64px;
-	}
-}
-@media (min-width: 600px) and (max-width: 700px) {
-
-	h1 {
-		font-size: 76px;
-	}
-}
-@media (min-width: 700px) and (max-width: 1000px) {
-
-	h1 {
-		font-size: 80px;
-	}
-}
-
-/* 4K+ MONITORS*/
-@media (min-width: 2100px) {
-
-	h1 {
-		font-size: 180px;
-	}
+/* ARROW BOUNCE */
+@keyframes bounce {
+	0% { top: 94%; }
+	50% { top: 92%; }
+	100% { top: 94%; }
 }
diff --git a/assets/css/page-style.css b/assets/css/page-style.css
index e482fdc..e787d24 100755
--- a/assets/css/page-style.css
+++ b/assets/css/page-style.css
@@ -1,12 +1,8 @@
 @charset "utf-8";
 /* CSS Document */
 
-html, body {
-	background-color: black;
-}
-
 h1 {
-	font-size: 120px;
+	font-size: 90px;
 	margin: 0;
 	box-sizing: border-box;
 	padding-left: 5%;
@@ -14,130 +10,163 @@ h1 {
 	bottom: 10%;
 }
 
-.mind-fullscreen-title {
-	height: 100%;
+.mind-page-title {
+	height: 400px;
 	width: 100%;
+	display: flex;
+	align-items: flex-end;
+	justify-content: center;
 	text-align: center;
+	position: relative;
+	z-index: 3;
+	box-shadow: 0 0 3px rgb(0,0,0),0 3px 46px rgb(0,0,0);
 }
 
-.mind-fullscreen-title h1 {
+.mind-page-title h1 {
+	/* Leave space for the floating arrow */
+	margin-bottom: 4%;
+}
+
+.mind-post_main {
+	max-width: 1260px;
+	width: 1260px;
+	display: grid;
+	grid-template-columns: 1fr 4fr 1fr;
+	margin: auto;
+}
+
+.mind-post_header {
+	margin-top: 50px;
+}
+
+img.mind-post_feature-image {
+	width: 100%;
+	border-radius: 5px;
+}
+
+pre {
+	overflow-x: scroll;
+	border: 1px solid black;
+	border-radius: 5px;
+	background-color: rgb(20, 20, 20);
+	font-size: 14px;
+	color: white;
+	padding: 10px;
+	margin: 0 20px 2em;
+}
+
+.mind-post_content {
+	overflow: hidden; /* to hide, eg. overflowing code */
+	display: flex;
+	max-width: 100%;
+	flex-direction: column;
+	padding: 0 60px;
+  text-align: justify;
+	background-color: rgb(40, 40, 40);
+	box-shadow: 0 0 3px rgb(0,0,0),0 3px 46px rgb(0,0,0);
+	position: relative;
+	z-index: 2;
+	font-size: 19px;
+	color: rgb(200, 200, 200);
+}
+
+.mind-post_content h1, .mind-post_content h2, .mind-post_content h3, .mind-post_content h4, .mind-post_content h5, .mind-post_content h6 {
+	text-align: left;
+}
+
+.mind-post_content h2 {
+	font-size: 31px;
+}
+
+.mind-post_content blockquote {
+	color: rgb(180, 180, 180);
+	font-style: italic;
+	margin-left: 0;
+	padding-left: 40px;
+	border-left: 2px solid paleturquoise;
+}
+
+.mind-post_content li {
+	margin: 0 0 1em;
+}
+
+.mind-post_content a {
+	position: relative;
+}
+
+.mind-post_content a {
+  position: relative;
+}
+
+.mind-post_content a:before {
+	content: "";
 	position: absolute;
 	width: 100%;
-	bottom: 10%;
+	height: 1px;
+	bottom: 0;
+	left: 0;
+	background-color: paleturquoise;
+	visibility: hidden;
+	-webkit-transform: scaleX(0);
+	transform: scaleX(0);
+	-webkit-transition: all 0.3s ease-in-out 0s;
+	transition: all 0.3s ease-in-out 0s;
 }
 
-/* ANIMATED GRADIENT BACKGROUND */
-@keyframes gradient {
-	0% {background-position: 0%}
-	100% {background-position: 100%}
+.mind-post_content a:hover:before {
+	visibility: visible;
+	-webkit-transform: scaleX(1);
+	transform: scaleX(1);
 }
 
-/*MOBILE*/
-@media (min-width: 0px) and (max-width: 200px) {
-
-	h1 {
-		font-size: 20px;
-	}
-	h2 {
-		font-size: 15px;
-		padding-top: 20px;
-	}
-	li {
-		padding: 5px;
-	}
+.mind-post_sidebar {
+	padding: 50px 20px 0;
+	background-color: rgb(30, 30, 30);
+	box-shadow: 0 0 3px rgb(0,0,0),0 3px 46px rgb(0,0,0);
 }
 
-@media (min-width: 200px) and (max-width: 300px) {
+.post-card-sidebar_main {
+	/* Layout */
+	display: flex;
+	flex-direction: column;
+	margin: 20px 0;
+	padding: 5px;
 
-	h1 {
-		font-size: 39px;
-	}
-	h2 {
-		font-size: 18px;
-		padding-top: 25px;
-	}
-	h3 {
-		font-size: 16px;
-		padding-top: 25px;
-	}
-	li {
-		padding: 6px;
-	}
+	/* Style */
+	background-color: rgb(40, 40, 40);
+	border-radius: 5px;
+	box-shadow: 0 0 2px rgb(0,0,0),0 2px 3px rgb(0,0,0);
+	transition: 0.5s;
 }
 
-@media (min-width: 300px) and (max-width: 400px) {
+.post-card-sidebar_feature-image {
 
-	h1 {
-		font-size: 52px;
-	}
-	h2 {
-		font-size: 21px;
-		padding-top: 28px;
-	}
-	h3 {
-		font-size: 19px;
-		padding-top: 28px;
-	}
-	li {
-		padding: 8px;
-	}
+	/*
+	The following 3 statements are used
+	to make all images have the same size.
+
+	This has the downside of being relatively more difficult to scale,
+	so if you want to go back to normal viewing (full image)
+	only leave:
+	width: 100%;
+	*/
+	object-fit: cover;
+	width: 100%;
+	height: 100px;
+	max-height: 100%;
+
+
+	border-radius: 5px;
 }
 
-@media (min-width: 400px) and (max-width: 500px) {
+.post-card-sidebar_main:hover {
+	transform:translate3d(0,-5px,0);
 
-	h1 {
-		font-size: 64px;
-	}
-	h2 {
-		font-size: 25px;
-		padding-top: 31px;
-	}
-	h3 {
-		font-size: 22px;
-		padding-top: 31px;
-	}
-	li {
-		padding: 10px;
-	}
 }
-@media (min-width: 500px) and (max-width: 600px) {
 
-	h1 {
-		font-size: 80px;
-	}
-	h2 {
-		font-size: 30px;
-	}
-	h3 {
-		font-size: 25px;
-	}
-	li {
-		padding: 13px;
-	}
-}
-@media (min-width: 600px) and (max-width: 700px) {
-
-	h1 {
-		font-size: 95px;
-	}
-	h2 {
-		font-size: 35px;
-	}
-	h3 {
-		font-size: 30px;
-	}
-}
-/* 4K+ MONITORS*/
-@media (min-width: 2100px) {
-
-	h1 {
-		font-size: 150px;
-	}
-	h2 {
-		font-size: 45px;
-		padding: 40px;
-	}
-	li {
-		padding: 20px;
-	}
+/* ARROW BOUNCE */
+@keyframes bounce {
+	0% { top: 88%; }
+	50% { top: 85%; }
+	100% { top: 88%; }
 }
diff --git a/assets/css/screen.css b/assets/css/screen.css
index 925f8bc..1bfba9d 100755
--- a/assets/css/screen.css
+++ b/assets/css/screen.css
@@ -16,44 +16,30 @@ html, body {
 }
 
 a {
-    text-decoration: none;
-    color: paleturquoise;
+  text-decoration: none;
+  color: paleturquoise;
 }
 
-a:hover {
-    text-decoration: underline;
-}
-
-h1 {
-    font-family: 'Montserrat', sans-serif;
-    font-weight: 800;
-    color: white;
+h1, h2, h3, h4, h5, h6 {
+  font-family: 'Montserrat', sans-serif;
+  font-weight: 800;
+	color: rgb(230, 230, 230);
 }
 
 h2 {
-    font-family: 'Montserrat', sans-serif;
-    font-weight: 800;
-    color: white;
-    margin: 38px 0 38px;
-    font-size: 60px;
+  margin: 38px 0 0;
+  font-size: 40px;
 }
 
 h3 {
-    font-family: 'Montserrat', sans-serif;
-    font-weight: 800;
-    color: white;
-    margin: 0;
-    padding: 30px 0 0;
-    font-size: 33px;
+  margin: 0;
+  font-size: 33px;
 }
 
 h4 {
-    font-family: 'Montserrat', sans-serif;
-    font-weight: 800;
-    color: white;
-    margin: 0;
-    padding: 20px;
-    font-size: 25px;
+  margin: 0;
+  padding: 20px 0 0;
+  font-size: 20px;
 }
 
 .nav {
@@ -62,21 +48,21 @@ h4 {
 }
 
 .navbar {
-  position: absolute; /* only used if JS is disabled */
-  top: 0;
-  width: 100%;
-  z-index: 100;
+position: absolute; /* only used if JS is disabled */
+top: 0;
+width: 100%;
+z-index: 100;
 
-  display: flex;
-	align-items: center;
-  justify-content: flex-start;
-	text-align: center;
-	text-transform: uppercase;
-	text-decoration: none;
-	overflow: hidden;
-	padding: 0;
+display: flex;
+align-items: center;
+justify-content: flex-start;
+text-align: center;
+text-transform: uppercase;
+text-decoration: none;
+overflow: hidden;
+padding: 0;
 
-  transition: 1s;
+transition: 1s;
 }
 /* This class is applied by a JS script, so that users with JS disabled
 can still see the navbar, but it won't move while they're scrolling.
@@ -84,7 +70,7 @@ This is needed because the navbar is transparent, and a black background
 is applied by the script on scroll.
 */
 .navbar-allowmoving {
-    position: fixed;
+  position: fixed;
 }
 
 .navbar-colored {
@@ -139,26 +125,39 @@ is applied by the script on scroll.
 	-webkit-text-fill-color: transparent;
 }
 
+.mind-content_main {
+	width: 1260px;
+  margin: auto;
+}
+
 /* Begin Main Content */
 main {
-	margin: auto;
-	width: 1260px;
-	max-width: 100%;
-	box-sizing: border-box;
-
-  text-align: justify;
   display: block;
-	box-sizing: border-box;
-  padding-top: 30px;
-	padding-bottom: 30px;
+  box-sizing: border-box;
+  width: 100%;
+	max-width: 100%;
 }
 /* End Main Content */
 
 /* Begin footer */
-/* .mind-fullscreen-title is only used by pages (no homepage), however other pages have the footer too. */
-.mind-fullscreen-title, footer.mind-site-footer_main {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
+footer.mind-site-footer_main {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    position: relative;
+    z-index: 3;
+}
+
+.mind-site-footer_main p {
+      font-family: 'Montserrat', sans-serif;
+      font-weight: 800;
+      color: white;
+      margin: 0;
+      padding: 20px;
+      font-size: 25px;
+}
+
+/* .mind-page-title is only used by pages (homepage has a different title style), however other pages have the footer too. */
+.mind-page-title, footer.mind-site-footer_main {
 	background: linear-gradient(45deg, #067062, #063d70, #2d0670, #4e0670, #700667);
 	background-size: 1000%, 100%;
 	animation: gradient 7s linear infinite;
@@ -179,7 +178,7 @@ nav.mind-site-footer_nav {
   display: none; /*Hidden, we want to show it via JavaScript */
 
   /* Theming */
-  background: #151515;
+  background: rgb(30, 30, 30);
   color: white;
   border-radius: 3px;
   padding: 10px;
@@ -209,7 +208,7 @@ nav.mind-site-footer_nav {
   font-family: 'Montserrat', sans-serif;
   font-weight: 200;
   color: white;
-  font-size: 13px;
+  font-size: 16px;
   padding: 0 20px;
 }
 
@@ -237,7 +236,6 @@ nav.mind-site-footer_nav {
 
 /* End policy popup */
 
-
 .arrow-down {
 	border: solid white;
 	opacity: 0.4;
@@ -251,12 +249,6 @@ nav.mind-site-footer_nav {
 	transition: 1s;
 }
 
-/* ARROW BOUNCE */
-@keyframes bounce {
-	0% { top: 94%; }
-	50% { top: 92%; }
-	100% { top: 94%; }
-}
 /* Begin Ghost mandatory CSS */
 .kg-width-wide {
 
@@ -317,6 +309,10 @@ nav.mind-site-footer_nav {
 .kg-bookmark-thumbnail {
 
 }
+
+.kg-image {
+  max-width: 100%;
+}
 /* End Ghost mandatory CSS */
 
 /* Generic class to make things unselectable */
@@ -336,6 +332,12 @@ img {
 	-o-user-select: none;
 }
 
+/* ANIMATED GRADIENT BACKGROUND */
+@keyframes gradient {
+	0% {background-position: 0%}
+	100% {background-position: 100%}
+}
+
 /* COLORED TEXT SELECTION */
 ::selection {
 	color: #2d0670;
@@ -347,261 +349,6 @@ img {
 	background: rgba(255, 255, 255, 0.995);
 }
 
-/* Begin media queries for elements size */
-@media (min-width: 0px) and (max-width:200px) {
-
-  h4 {
-    font-size: 8px;
-  }
-
-  .mind-policy-popup {
-    /* centered */
-    left: 5px;
-    width: 100px;
-    bottom: 50px;
-  }
-
-  .mind-policy-popup h4 {
-    padding: 15px 15px;
-  }
-
-  .mind-policy-popup p {
-    font-size: 7px;
-    padding: 0 15px;
-    margin: 0;
-  }
-
-  .mind-policy-popup button {
-    font-size:7px;
-    margin: 10px;
-    padding: 5px 8px;
-  }
-
-	.navbar a {
-		font-size: 10px;
-	}
-
-	main {
-		font-size: 10px;
-	}
-}
-
-@media (min-width: 200px) and (max-width: 300px) {
-
-	h4 {
-		font-size: 10px;
-	}
-
-  .mind-policy-popup {
-    /* centered */
-    left: 50%;
-    margin-left: -100px; /* this has to be half the width */
-    width: 200px;
-    bottom: 50px;
-  }
-
-	.mind-policy-popup h4 {
-		padding: 15px 15px;
-	}
-
-	.mind-policy-popup p {
-		font-size: 8px;
-		padding: 0 15px;
-		margin: 0;
-	}
-
-	.mind-policy-popup button {
-		font-size: 8px;
-    margin: 10px;
-    padding: 10px 15px;
-	}
-
-	.navbar a {
-		font-size: 11px;
-	}
-
-	main {
-		font-size: 13px;
-	}
-}
-
-@media (min-width: 300px) and (max-width: 400px) {
-	h4 {
-		font-size: 13px;
-	}
-
-	.mind-policy-popup {
-		/* centered */
-		left: 50%;
-		margin-left: -140px; /* this has to be half the width */
-		width: 280px;
-	}
-
-	.mind-policy-popup h4 {
-		padding: 15px 15px;
-	}
-
-	.mind-policy-popup p {
-		font-size: 8px;
-		padding: 0 15px;
-		margin: 0;
-	}
-
-	.mind-policy-popup button {
-		font-size: 8px;
-		margin: 10px;
-  	padding: 10px 15px;
-	}
-
-	.navbar a {
-		font-size: 16px;
-	}
-
-	main {
-		font-size: 16px;
-	}
-}
-
-@media (min-width: 400px) and (max-width: 500px) {
-	h4 {
-		font-size: 15px;
-	}
-
-	.mind-policy-popup {
-		/* centered */
-		left: 50%;
-		margin-left: -175px; /* this has to be half the width */
-		width: 350px;
-	}
-
-	.mind-policy-popup h4 {
-		padding: 15px 15px;
-	}
-
-	.mind-policy-popup p {
-		font-size:10px;
-		padding: 0 15px;
-		margin: 0;
-	}
-
-	.mind-policy-popup button {
-		font-size: 10px;
-		margin: 10px;
-  	padding: 10px 15px;
-	}
-
-	.navbar a {
-		font-size: 21px;
-	}
-
-	main {
-		font-size: 18px;
-	}
-}
-
-@media (min-width: 500px) and (max-width: 600px) {
-	h4 {
-		font-size: 18px;
-	}
-
-	.mind-policy-popup {
-		width: 400px;
-	}
-
-	.mind-policy-popup h4 {
-		padding: 15px 15px;
-	}
-
-	.mind-policy-popup p {
-		font-size: 11px;
-		padding: 0 15px;
-		margin: 0;
-	}
-
-	.mind-policy-popup button {
-		font-size: 11px;
-		margin: 10px;
-	}
-
-	.navbar a {
-		font-size: 26px;
-	}
-
-	main {
-		font-size: 20px;
-	}
-}
-
-@media (min-width: 600px) and (max-width: 700px) {
-	h4 {
-		font-size: 21px;
-	}
-
-	.mind-policy-popup {
-		width: 500px;
-	}
-
-	.mind-policy-popup h4 {
-		padding: 15px 15px;
-	}
-
-	.mind-policy-popup p {
-		font-size: 11px;
-		padding: 0 15px;
-		margin: 0;
-	}
-
-	.mind-policy-popup button {
-		font-size: 11px;
-		margin: 10px;
-	}
-
-	.navbar a {
-		font-size: 29px;
-	}
-
-	main {
-		font-size: 23px;
-	}
-}
-
-@media (min-width: 700px) and (max-width: 1000px) {
-	h4 {
-		font-size: 23px;
-	}
-
-	.mind-policy-popup h4 {
-		padding: 15px 15px;
-	}
-
-	.mind-policy-popup p {
-		font-size: 13px;
-		padding: 0 15px;
-		margin: 0;
-	}
-
-	.mind-policy-popup button {
-		margin: 10px;
-	}
-}
-
-/* 4K MONITORS */
-@media (min-width: 2100px) {
-	.mind-policy-popup p {
-		font-size: 15px;
-	}
-
-	.mind-policy-popup button {
-		font-size: 15px;
-	}
-
-	main {
-		font-size: 25px;
-	}
-}
-/* End media queries */
-
-
 /* Begin fonts */
 @font-face {
     font-family: 'Oswald';
@@ -626,6 +373,16 @@ img {
     src: url(https://fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_aZA3gnD_g.woff2) format('woff2');
 }
 
+@font-face {
+  font-family: 'Montserrat';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v14/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+
 @font-face {
   font-family: 'Roboto';
   font-style: normal;
@@ -634,4 +391,32 @@ img {
   src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fBBc4.woff2) format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfBBc4.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 900;
+  font-display: swap;
+  src: local('Roboto Black'), local('Roboto-Black'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmYUtfBBc4.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+
 /* End fonts */
diff --git a/default.hbs b/default.hbs
index 4d02e94..03e898d 100755
--- a/default.hbs
+++ b/default.hbs
@@ -54,7 +54,7 @@
     		<h4>This website uses cookies.</h4>
     		<p>We use cookies to ensure you the best experience.
     		<br>
-    		By visiting our website, you agree with our <a href="/pages/policy.html" target="_blank">Privacy Policy</a>.
+    		By visiting our website, you agree with our <a href="/policy" target="_blank">Privacy Policy</a>.
     		</p>
     		<button onclick="agreePolicyPopup()">Ok, understood</button>
     	</div>
@@ -65,10 +65,10 @@
 
       <footer class="mind-site-footer_main unselectable">
         <div>
-          <h4>Copyright © 2019-20 ― Lorenzo Dellacà</h4>
+          <p>Copyright © 2019-20 ― Lorenzo Dellacà</p>
         </div>
         <nav class="mind-site-footer_nav">
-          <a href="/">Privacy Policy</a>
+          <a href="/policy/">Privacy Policy</a>
         </nav>
       </footer>
 
diff --git a/index.hbs b/index.hbs
index cef1613..bbf6c62 100755
--- a/index.hbs
+++ b/index.hbs
@@ -7,48 +7,53 @@
 
 
 <main>
-  <h2>Most recent posts</h2>
-  <div class="mind-feed_main">
+  <nav class="navbar-secondary unselectable">
+    {{navigation type="secondary"}}
+  </nav>
+  <div class="mind-content_main">
+    <div class="mind-feed_main">
 
-    <!-- Looping through every post -->
-    {{#foreach posts}}
-    	<article class="{{post_class}}">
-        <a class="post-card_main" href="{{url}}">
-       		<header class="post-card_header">
-            <img class="post-card_feature-image" src="{{feature_image}}" />
-         		<h3>{{title}}</h3>
-          </header>
-          <section class="post-excerpt">
-       			<p>{{excerpt words="26"}}</p>
-          </section>
-          <footer class="post-card_footer">
-            {{primary_author.name}}
-            {{#if primary_author.profile_image}}<img class="post-card_profile-image" src="{{primary_author.profile_image}}" alt="Author image" />{{/if}}
-          </footer>
-        </a>
-      </article>
-    {{/foreach}}
+      <!-- Looping through every post -->
+      {{#foreach posts}}
+      	<article class="{{post_class}}">
+          <a class="post-card_main" href="{{url}}">
+         		<header class="post-card_header">
+              <img class="post-card_feature-image" src="{{img_url feature_image size="s"}}" />
+              <p class="post-card_meta"><span class="post-card_tag">{{primary_tag.name}}</span> • <time class="post-date" datetime="{{date format='YYYY-MM-DD'}}">{{date format="DD MMMM YYYY"}}</time></p>
+           		<h3>{{title}}</h3>
+            </header>
+            <section class="post-card_excerpt">
+         			<p>{{excerpt words="26"}}</p>
+            </section>
+            <footer class="post-card_footer">
+              {{primary_author.name}}
+              {{#if primary_author.profile_image}}<img class="post-card_author-image" src="{{primary_author.profile_image}}" alt="Author image" />{{/if}}
+            </footer>
+          </a>
+        </article>
+      {{/foreach}}
+    </div>
   </div>
 </main>
 
-  	<!-- Vanta.JS Scripts to make the background cool, but disabled on mobile -->
-  		<script>
-  			if(window.screen.width > 800)
-  			{
-  				document.write('<script src="{{asset "js/three.r95.min.js"}}"><\/script>' +
-  							   '<script src="{{asset "js/vanta.net.min.js"}}"><\/script>' +
-  							   '<script>' +
-  							   		'VANTA.NET({'+
-  							   			'el: "#vantajs",'+
-  							   			'color: 0x3fd5ff,'+
-  								   		'backgroundColor: 0x190f2b,'+
-  								   		'mouseControls: true,'+
-  							   			'touchControls: true,'+
-  							   			'minHeight: 200.00,'+
-  							   			'minWidth: 200.00,'+
-  							   			'scale: 1.00,'+
-  							   			'scaleMobile: 1.00'+
-  									'})'+
-  								'<\/script>');
-  				}
-  		</script>
+<!-- Vanta.JS Scripts to make the background cool, but disabled on mobile -->
+<script>
+	if(window.screen.width > 800)
+	{
+		document.write('<script src="{{asset "js/three.r95.min.js"}}"><\/script>' +
+					   '<script src="{{asset "js/vanta.net.min.js"}}"><\/script>' +
+					   '<script>' +
+					   		'VANTA.NET({'+
+					   			'el: "#vantajs",'+
+					   			'color: 0x3fd5ff,'+
+						   		'backgroundColor: 0x190f2b,'+
+						   		'mouseControls: true,'+
+					   			'touchControls: true,'+
+					   			'minHeight: 200.00,'+
+					   			'minWidth: 200.00,'+
+					   			'scale: 1.00,'+
+					   			'scaleMobile: 1.00'+
+							'})'+
+						'<\/script>');
+		}
+</script>
diff --git a/package.json b/package.json
index b30c643..6f52198 100755
--- a/package.json
+++ b/package.json
@@ -12,6 +12,10 @@
     },
     "config": {
         "posts_per_page": 10,
-        "image_sizes": {}
+        "image_sizes": {
+          "s": {
+            "width": 300
+          }
+        }
     }
 }
diff --git a/page.hbs b/page.hbs
index 30e942f..bba4133 100755
--- a/page.hbs
+++ b/page.hbs
@@ -1,11 +1,12 @@
 {{!< default}}
 {{#post}}
-  <div class="mind-fullscreen-title unselectable">
+  <div class="mind-page-title unselectable">
     <h1>{{title}}</h1>
     <i class="arrow-down"></i>
   </div>
 
   <main>
-    {{content}}
+    <div class="mind-content_main">
+    </div>
   </main>
 {{/post}}
diff --git a/post.hbs b/post.hbs
index f9ff6cb..99a47f5 100755
--- a/post.hbs
+++ b/post.hbs
@@ -1,13 +1,38 @@
 {{!< default}}
 {{#post}}
-  <div class="mind-fullscreen-title unselectable">
+  <div class="mind-page-title unselectable">
     <h1>{{title}}</h1>
     <i class="arrow-down"></i>
   </div>
 
   <main>
-		<div class="mind-content">
-      {{content}}
+		<div class="mind-content_main">
+      <div class="mind-post_main">
+        <div class="mind-post_sidebar"></div>
+        <div class="mind-post_content">
+          <div class="mind-post_header">
+            <img class="mind-post_feature-image" src="{{img_url feature_image}}"/>
+          </div>
+          {{content}}
+        </div>
+        <div class="mind-post_sidebar">
+          {{#get "posts" limit="5"}}
+            <h3>You may also like</h3>
+            {{#foreach posts}}
+                <article class="{{post_class}}">
+                  <a class="post-card-sidebar_main" href="{{url}}">
+                    <header>
+                      <img class="post-card-sidebar_feature-image" src="{{img_url feature_image size="s"}}" />
+                      <h4>{{title}}</h4>
+                    </header>
+                  </a>
+              </article>
+            {{/foreach}}
+          {{else}}
+          <h2>No similar posts.</h2>
+          {{/get}}
+        </div>
+      </div>
     </div>
   </main>
 {{/post}}