diff --git a/static/css/style.css b/static/css/style.css
index f3a9810..1c9c5ff 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -45,14 +45,12 @@ div#backend-data-button span{
 	font-weight: bold;
 	text-transform: uppercase;
 }
-
 div#container-backend-data-button{
 	height: 100px;
 	width: 100%;
 	border-bottom: 1px solid black;
 	height: 70px;
 }
-
 img.artwork-mockuppage{
 	width: 80%;
     padding: 0 10%; 
@@ -67,7 +65,6 @@ img.artwork-mockuppage{
   --brown-grey: #7f7f7f;
   --very-light-pink: #e9e9e9;
 }
-
 html {
 	margin:0;
 	padding:0;
@@ -79,15 +76,13 @@ html {
     -moz-box-sizing: border-box;
     box-sizing: border-box;
 }
-
 *, *:before, *:after { 
   -webkit-box-sizing: inherit;
   -moz-box-sizing: inherit;
   box-sizing: inherit; }
-
-
 body {
   font-family: Roboto;
+  font-size: calc(16px + (20 - 16) * ((100vw - 768px) / (1400 - 768)));
   font-size: 16px;
   font-weight: normal;
   font-stretch: normal;
@@ -108,20 +103,12 @@ div#header{
 	border-bottom: 3px solid #000;
 	display: flex;
 	width: 100%;
-/*	display: grid;*/
 }
 div#header-top{
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;
 	align-items: center; 
-/*	display: grid;
-	grid-template-columns: 5% 67.5% 27.5%;
-	grid-template-rows: 100%;
-	grid-column-gap: 0px;
-	grid-row-gap: 0px; 
-	align-items: center;
-*/
 	border-bottom: 1px solid #000;
 }
 #title-nav{
@@ -129,7 +116,6 @@ div#header-top{
 }
 div#animatedlogo{
 	display: flex;
-/*	grid-area: 1 / 1 / 2 / 2;*/
 }
 div#animatedlogo img{
 	width: auto;
@@ -137,7 +123,6 @@ div#animatedlogo img{
 	justify-self: center;
 }
 div#header-title{
-/*	grid-area: 1 / 2 / 2 / 3;*/
 	font-family: 'Roboto Condensed', sans-serif;
 	font-weight: bold;
 	font-size: 25px;
@@ -146,9 +131,7 @@ div#header-title a:link, div#header-title a:visited {
 	text-decoration: none;
 	color: #000000;
 }
-div#header-keyword-search{
-/*	grid-area: 1 / 3 / 2 / 4;*/
-}
+
 div#header-keyword-search span {
 	font-size: 20px;
     font-weight: bold;
@@ -186,22 +169,7 @@ div#navigation{
 	flex-wrap: wrap;
 	justify-content: space-between;
     align-items: center; 
-/*	display: grid;
-	grid-template-columns: 8% repeat(2, 12%) 1fr repeat(2, 10%) 12.5%;
-	grid-template-rows: 100%;
-	grid-column-gap: 0px;
-	grid-row-gap: 0px; 
-	padding-left: 5%;
-	align-items: center;
-*/
-  font-family: Roboto;
-  font-size: 18px;
-  font-weight: normal;
-  font-stretch: condensed;
-  font-style: normal;
-  line-height: 1.44;
-  letter-spacing: normal;
-  color: var(--black);
+    align-content: center;
 }
 #nav-left {	
 	display: flex;
@@ -225,58 +193,48 @@ div#navigation a{
 	font-family: 'Roboto Condensed', sans-serif;
 	text-decoration: none;
 	font-weight: normal;
-	color: black;
-	font-size: 18px;
-	line-height: 26px;
-	height: 67px;
+	color: var(--black);
+	font-size: calc(16px + (20 - 16) * ((100vw - 768px) / (1400 - 768)));
+	line-height: calc(22px + (22 - 26) * ((100vw - 768px) / (1400 - 768)));
 }
 
 div#navigation a:hover {
 	color: #1b42d8;
 }
-/*div#nav-about { 
-	grid-area: 1 / 1 / 2 / 2; 
-}
-div#nav-browse-archive { grid-area: 1 / 2 / 2 / 3; }
-div#nav-browse-category { grid-area: 1 / 3 / 2 / 4; 
-    						color: lightgrey;}
-div#nav-search { grid-area: 1 / 4 / 2 / 5; }
-div#nav-tutorials { grid-area: 1 / 5 / 2 / 6; 
-					justify-self: end;
-				    color: lightgrey;}
-div#nav-upload { grid-area: 1 / 6 / 2 / 7;
-					justify-self: center;
-				    color: lightgrey;}
-div#nav-login { grid-area: 1 / 7 / 2 / 8; } 
-*/
 
 /*Footer*/
 div#footer{
-	padding: 55px 0px;
-	/*max-height: 229px;*/
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	justify-content: space-between;
+    align-items: baseline; 
+	padding: 55px 80px;
 	width: 100%;
     bottom: 0;
 	background-color: black;
 	color:white;
-	display: grid;
-	grid-template-columns: 20% 40% 15% 25%;
-	grid-template-rows: 20% 80%;
-	grid-column-gap: 0px;
-	grid-row-gap: 0px; 
 }
-div#footer-title-br{
-	grid-area: 1 / 1 / 2 / 2;
-	padding-left: 30%;
+.footer-left, .footer-right {
+	display: flex;
+	flex-direction: row;
 }
-div#footer-title-others{
-	grid-area: 1 / 2 / 2 / 3; 
+.footer-left{ flex-wrap: nowrap;}
+
+#footer-credit , #footer-funds {
+	display: flex;
+	flex-direction: column;
+	flex-wrap: nowrap;
 }
-div#footer-title-socials{
-	grid-area: 1 / 3 / 2 / 4; 
+#footer-socials-links {
+	display: flex;
+	flex-direction: column;
+	flex-wrap: nowrap;
 }
-div#footer-title-contact{
-	grid-area: 1 / 4 / 2 / 5;
+#footer-credit , #footer-funds, #footer-socials-links, #footer-contact-form {
+	padding-right: 56px;
 }
+
 div#footer-title-br p, div#footer-title-others p, div#footer-title-contact p, div#footer-title-socials p{
 	text-transform: uppercase;
 	font-family: 'Roboto Condensed', sans-serif;
@@ -288,10 +246,6 @@ div#footer-title-br p, div#footer-title-others p, div#footer-title-contact p, di
   	letter-spacing: 1.5px;
   	color: var(--brown-grey);
 }
-div#footer-img-br{
-	grid-area: 2 / 1 / 3 / 2; 
-	padding-left: 30%;
-}
 div#footer-img-br img{
     width: 90px;
     height: 90px;
@@ -299,95 +253,55 @@ div#footer-img-br img{
 }
 div#footer-img-others{
 	display: flex;
-	grid-area: 2 / 2 / 3 / 3;
-	padding-top: 5%;
+	flex-direction: row;
+	flex-wrap: nowrap;
+	padding-top: 26px;
 }
 div#footer-img-lottery{
-	padding-left: 10%;
+	padding-left: 60px;
 }
 div#footer-img-lottery img{
-	width: 124px;
-	height: 81px;
+	width: 100%;
+	max-width: 124px;
+	height: auto;
 }
 div#footer-img-wiki img{
-	width: 56px;
-	height: 56px;
-}
-div#footer-socials-links{
-	grid-area: 2 / 3 / 3 / 4;
-}
-div#footer-socials-links  p{  	
-	margin-top: 0px;
-  	margin-bottom:  0px;
+	width: 100%;
+	max-width: 56px;
+	height: auto;
 }
 div#footer-socials-links a{
 	text-decoration: none;
 	color:#FFFFFF;
 	font-family: 'Roboto Regular', sans-serif;
-	font-size: 16px;
+	font-size: calc(16px + (20 - 16) * ((100vw - 768px) / (1400 - 768)));
 	font-weight: normal;
  	font-stretch: normal;
   	font-style: normal;
-  	line-height: 1.63;
   	letter-spacing: normal;
 }
-
-div#footer-contact{
-	grid-area: 2 / 4 / 3 / 5;
-	padding-top: 5%;
-}
 div#contactform{
-	background-color: #1B42D8;
-	width: 250px;
-	height: 55px;
-	border-radius: 6px;
     display: flex;
     align-items: center;
     justify-content: center;
 }
-div#footer-contact a{
-	text-decoration: none;
-	color: #FFFFFF;
-	font-weight: bold;
-}
-div#footer div#footer-top div#footer-top-left,
-div#footer div#footer-top div#footer-top-right{
-	display: inline-flex;
-	border:lime 1px solid;
-}
-div#footer div#footer-left{
-	left: 0px;
-	width: 30%;
-	/*display: contents;*/
-}
-div#footer div#footer-right{
-	right: 0px;
-	width: 30%;
-	float: right;
-	/*position: absolute;*/
-}
-div#footer div#footer-left div,
-div#footer div#footer-right div{
-	display: inline-block;
-	border:cyan 1px solid;
-}
-input#newslettersubs{
-	background-color: #000000;
+#footer-contact a {
+    text-decoration: none;
 	color:#FFFFFF;
-	border-radius: 6px;
-	height: 48px;
-	border: solid 1px;
-
-}
-input.submitemail{
-	background-color: #1B42D8;
-	color: #FFFFFF;
-	border:none;
-	border-radius: 6px;
-	height: 50px;
-	width: 50px;
 }
 
+@media screen and (min-width:0px) and (max-width: 768px) { 
+	#footer-title-others {margin-left: auto;}
+	#footer-socials {width: 100%; }
+	#footer-socials-links{ 
+		display: flex; 
+		flex-direction: row; 
+		justify-content: space-between; 
+		width: 100%;}
+	div#contactform {width: 100%; max-width: none;}
+	#footer-contact-form { width: 100%; max-width: none;}
+	.footer-left, .footer-right { width: 100%; }
+}
 
 /*Titles all pages*/
 
@@ -547,6 +461,7 @@ a.paginate_button.next:after {
   min-height: 48px;
   font-family: Roboto;
   font-size: 14px;
+  line-height: 16px;
   font-weight: bold;
   font-stretch: condensed;
   font-style: normal;
@@ -555,8 +470,9 @@ a.paginate_button.next:after {
   text-align: center;
   color: #ffffff;
   cursor: pointer;
+  background-color: var(--blue-blue);
+  border-radius: 6px;
 }
-
 .secondary-button {
   width: 365px;
   height: 48px;
@@ -641,7 +557,6 @@ div#home-recent-grid, div#browsethearchive-grid{
   text-align: center;
   grid-gap: 2rem;
 }
-
 div#show-button-wrapper{
 	width: 100%;
 }
@@ -649,7 +564,6 @@ div.home-show-wrapper{
 	width: 100%;	
 	margin: 60px 0px;
 }
-
 span.home-show{
 	display: flex;
 	margin: auto;
@@ -664,7 +578,7 @@ span.home-show{
 	cursor: pointer;
 }
 
-@media (min-width: 600px) {
+@media (min-width: 768px) {
   #home-recent-grid, #browsethearchive-grid { grid-template-columns: repeat(2, 1fr); }
 }
 @media (min-width: 1000px) {
@@ -675,24 +589,6 @@ span.home-show{
 }
 
 
-/*@media (min-width: 300px) {
-  #browsethearchive-grid { grid-template-columns: repeat(2, 1fr); }
-}
-
-@media (min-width: 700px) {
-  #browsethearchive-grid { grid-template-columns: repeat(2, 1fr); }
-}
-
-@media (min-width: 1200px) {
-  #browsethearchive-grid { grid-template-columns: repeat(4, 1fr); }
-}
-
-@media (min-width: 1600px) {
-  #browsethearchive-grid { grid-template-columns: repeat(6, 1fr); }
-}
-*/
-
-
 /************ BROWSE THE ARCHIVE Pagination ************/
 
 /*img.browsethearchive-imgs{
@@ -732,18 +628,15 @@ div#browsethearchive-grid{
   text-decoration: none;
   font-family: 'Roboto Condensed', sans-serif;
 }
-
 #browsethearchive-pagin li a{
 	  color: #000000;
   font-weight: bold;
   text-decoration: none;
   font-family: 'Roboto Condensed', sans-serif;
 }
-
 ul#browsethearchive-pagin{
 	display: inline-flex;
 }
-
 #browsethearchive-pagin li {
 display: flex;
 align-items: center;
diff --git a/templates/layout.html b/templates/layout.html
index 949465c..e2e25e3 100644
--- a/templates/layout.html
+++ b/templates/layout.html
@@ -46,31 +46,30 @@
     {% endblock content %}
 
 <div id="footer">
-
-		<!-- <div id="footer-br"> -->
-			<div id="footer-title-br"><p>A project by:</p></div>
+		<div id="footer-credit">
+			<div id="footer-title-br"><p>A project by</p></div>
 			<div id="footer-img-br"><img src="{{ url_for('static', filename='/imgs/Logos/Banner-Repeater-logo.png') }}"></div>
-		<!-- </div> -->
-		<!-- <div id="footer-others">	 -->
-			<div id="footer-title-others"><p>With support from:</p></div>
+		</div>
+		<div id="footer-funds">
+			<div id="footer-title-others"><p>With support from</p></div>
 			<div id="footer-img-others">
 				<div id="footer-img-wiki"><img src="{{ url_for('static', filename='/imgs/Logos/wikimedia_logo.png') }}"></div>
 				<div id="footer-img-lottery"><img src="{{ url_for('static', filename='/imgs/Logos/Lottery-white on black.png') }}"></div>
 			</div>
-		
-
-			<div id="footer-title-socials"><p>SOCIAL</p></div>
-			<div id="footer-socials-links">
-				<p><a target="_blank" href="https://www.facebook.com/BannerRepeater">Facebook</a></p>
-				<p><a target="_blank" href="https://twitter.com/BANNERREPEATER">Twitter</a></p>
-				<p><a target="_blank" href="https://www.instagram.com/bannerrepeater/">Instagram</a></p>
-				<p><a target="_blank" href="mailto:daap.community@disroot.org">Email address</a></p>
-			</div>
-		
-			
-			<div id="footer-title-contact"><p>EXPRESSION OF INTEREST</p></div>
-			<div id="footer-contact"><a href=""><div class="bluebutton" id="contactform">FILL UP CONTACT FORM<span></span></div></a></div>
-		
+		</div>
+		<div id="footer-socials">
+				<div id="footer-title-socials"><p>SOCIAL</p></div>
+				<div id="footer-socials-links">
+					<a target="_blank" href="https://www.facebook.com/BannerRepeater">Facebook</a>
+					<a target="_blank" href="https://twitter.com/BANNERREPEATER">Twitter</a>
+					<a target="_blank" href="https://www.instagram.com/bannerrepeater/">Instagram</a>
+					<a target="_blank" href="mailto:daap.community@disroot.org">Email address</a></p>
+				</div>
+		</div>
+		<div id="footer-contact-form">			
+				<div id="footer-title-contact"><p>EXPRESSION OF INTEREST</p></div>
+				<div id="footer-contact"><a href=""><div class="primary-button bluebutton" id="contactform">CONTACT FORM<span></span></div></a></div>
+		</div>		
 </div>