diff --git a/_includes/footer.html b/_includes/footer.html
index 7585ddf..4a7588d 100644
--- a/_includes/footer.html
+++ b/_includes/footer.html
@@ -1,5 +1,5 @@
-<nav class="content">
-  <section>
+<nav class="footer__nav content">
+  <section class="footer__section col-lg-2 col-md-4 col-sm-6" data-mh="footer">
     {% t nav.get-dash %}
     <ul>
         <li><a href="#">{% t nav.download %}</a></li>
@@ -9,7 +9,7 @@
     </ul>
   </section>
 
-  <section>
+  <section class="footer__section col-lg-2 col-md-4 col-sm-6" data-mh="footer">
     {% t nav.participate %}
     <ul>
         <li><a href="#">{% t nav.mining %}</a></li>
@@ -19,7 +19,7 @@
     </ul>
   </section>
 
-  <section>
+  <section class="footer__section col-lg-2 col-md-4 col-sm-6" data-mh="footer">
     {% t nav.currency %}
     <ul>
         <li><a href="#">{% t nav.exchange %}</a></li>
@@ -29,7 +29,7 @@
     </ul>
   </section>
 
-  <section>
+  <section class="footer__section col-lg-2 col-md-4 col-sm-6" data-mh="footer">
     {% t nav.community %}
     <ul>
         <li><a href="#">{% t nav.discussion %}</a></li>
@@ -40,7 +40,7 @@
     </ul>
   </section>
 
-  <section>
+  <section class="footer__section col-lg-2 col-md-4 col-sm-6" data-mh="footer">
     {% t nav.project %}
     <ul>
         <li><a href="#">{% t nav.help %}</a></li>
@@ -50,9 +50,9 @@
     </ul>
   </section>
 
-  <section>
+  <section class="footer__section col-lg-2 col-md-4 col-sm-6" data-mh="footer">
     {% t nav.social %}
-    <ul class="footer--social">
+    <ul class="footer__social">
         <li><a href="#">{% t nav.blog %}</a></li>
         <li><a href="#">{% t nav.reddit %}</a></li>
         <li><a href="#">{% t nav.twitter %}</a></li>
@@ -65,15 +65,15 @@
     </ul>
   </section>
 </nav>
-<div class="footer--menu content">
-  <div class="footer--languagePicker"></div>
+<div class="footer__menu content">
+  <div class="footer__languagePicker"></div>
   <a href="#">Terms of Use</a>
-  <a href="#">Contact</a>
   <a href="#">Sitemap</a>
+  <a href="#">Contact</a>
 </div>
-<div class="footer--legal">
+<div class="footer__legal">
   <div class="content">
-    <span class="footer--copyright">&copy; {{ site.time | date: "%Y" }} The Dash Network</span>
-    <a href="#">Github Source</a>
+    <span class="footer__copyright">&copy; {{ site.time | date: "%Y" }} The Dash Network</span>
+    <!-- <a href="#">Github Source</a> -->
   </div>
 </div>
diff --git a/_layouts/default.html b/_layouts/default.html
index 74e61f5..f3b9a1f 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -15,10 +15,6 @@
     <meta name="theme-color" content="#ffffff">
     
     <link rel="stylesheet" type="text/css" href="{{ base }}/assets/css/style.css">
-    <!-- JavaScript -->
-    <script src="//cdn.jsdelivr.net/lodash/4.12.0/lodash.min.js"></script>
-    <script src="{{ base }}/assets/js/moment.min.js"></script>
-    <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
   </head>
   
   <body>  
@@ -26,7 +22,7 @@
     {{ content }}
 
     <!-- Footer -->
-    <footer>
+    <footer class="footer">
       {% include footer.html %}
     </footer>
     
@@ -36,6 +32,11 @@
         {% include nav-mobile.html %}
     </div>
     
+    <!-- JavaScript -->
+    <script src="//cdn.jsdelivr.net/lodash/4.12.0/lodash.min.js"></script>
+    <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
+    <script src='//cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.0/jquery.matchHeight-min.js'></script>
+    <script src="{{ base }}/assets/js/moment.min.js"></script>
     <script src="{{ base }}/assets/js/full-menu.js"></script>
 
 <script>
diff --git a/_sass/_footer.scss b/_sass/_footer.scss
index 66997b1..8866db4 100644
--- a/_sass/_footer.scss
+++ b/_sass/_footer.scss
@@ -14,31 +14,62 @@ footer
 			a
 */
 
-footer {
+.footer {
 	background-color: #333333;
 	color: #717171;
 	padding-top: 4em;
+	padding-bottom: 3em;
+
 
 	a {
 		color: $white;
+    	line-height: 1.7;
 	}
 
-	> nav {
-		display: table;
-		table-layout: fixed;
-		> section {
-			display: table-cell;
-			> ul {
-				margin: 1em 0 0;
-				padding: 0;
-				> li {
-					list-style: none;
-				}
+	&__nav {
+		@extend %clearfix;
+	}
+
+	&__section {
+    	vertical-align: top;
+		display: inline-block;
+		padding: 20px;
+		// display: table-cell;
+		> ul {
+			margin: 1em 0 0;
+			padding: 0;
+			> li {
+				list-style: none;
 			}
 		}
 	}
-}
+	&__menu {
+		padding: 20px 20px 10px;
+		a {
+			color: #717171;
+			padding: 0 7px;
+		}
+	}
 
-.footer--social {
-	column-count: 2;
+	&__legal,
+	&__copyright,
+	&__menu {
+		text-align: center;
+	}
+
+	@include mq($to: extrasmall) {
+		&__section {
+			display: inline-block;
+			padding: 20px;
+		}
+		&__nav {
+			display: block;
+		}
+		&__legal {
+			padding: 0 20px 20px 0;
+		}
+		&__copyright {
+			display: block;
+		}
+	}
 }
diff --git a/_sass/_home.scss b/_sass/_home.scss
index b6c9fb7..74d520b 100644
--- a/_sass/_home.scss
+++ b/_sass/_home.scss
@@ -1,6 +1,9 @@
+$homeSectionPaddingTop: 40px;
+
+
 .page-home {
 	> section {
-		padding: 40px 0;
+		padding: $homeSectionPaddingTop 0;
 		overflow: hidden;
 		position: relative;
 		text-align: center;
@@ -13,12 +16,9 @@
 			text-align: left;
 		}
 
-		.features-collection {
-			text-align: center;
-		}
 
 		h2 {
-			margin-top: 40px;
+			margin-top: 0px;
 		}
 
 		p {
@@ -26,6 +26,16 @@
 			margin: 20px auto;
 		}
 
+		.features-collection {
+			text-align: center;
+			h2 {
+				margin-top: 20px;
+			}
+			p {
+				margin: 0 auto;
+			}
+		}
+
 		img {
 			max-width: 100%;
 			@media (min-width: 768px) {
@@ -101,16 +111,16 @@
 		@media (min-width: 768px) {
 			z-index: 1;
 			> img {
-				top: -40px;
-				bottom: -40px;
+				top: -$homeSectionPaddingTop;
+				bottom: -$homeSectionPaddingTop;
 				max-width: none;
 				max-height: calc(100% + 80px);
 			}
 			&:after {
 				content: '';
 				position: absolute;
-				top: -40px;
-				bottom: -40px;
+				top: -$homeSectionPaddingTop;
+				bottom: -$homeSectionPaddingTop;
 				width: 200%;
 				background: linear-gradient(to left, $white 50%, rgba($white, 0) 87.5%);
 			}
diff --git a/_sass/_mediaqueries.scss b/_sass/_mediaqueries.scss
new file mode 100644
index 0000000..26b45e8
--- /dev/null
+++ b/_sass/_mediaqueries.scss
@@ -0,0 +1,162 @@
+/**
+ * Inspired from https://github.com/guardian/sass-mq.git
+ */
+
+/**
+ * // To enable support for browsers that do not support @media queries,
+ * (IE <= 8, Firefox <= 3, Opera <= 9) set $mqResponsive to false
+ * Create a separate stylesheet served exclusively to these browsers,
+ * meaning @media queries will be rasterized, relying on the cascade itself
+ */
+$mqResponsive: true;
+
+/**
+ * Name your breakpoints in a way that creates a ubiquitous language
+ * across team members. It will improve communication between
+ * stakeholders, designers, developers, and testers.
+ */
+$mqBreakpoints: (
+    extrasmall: 480px,
+    small: 768px,
+    medium: 992px,
+    large: 1200px
+);
+
+/**
+ * Define the breakpoint from the $mqBreakpoints list that should
+ * be used as the target width when outputting a static stylesheet
+ * (i.e. when $mqResponsive is set to 'false').
+ */
+$mqStaticBreakpoint: small;
+
+/**
+ * If you want to display the currently active breakpoint in the top
+ * right corner of your site during development, add the breakpoints
+ * to this list, ordered by width, e.g. (mobile, tablet, desktop).
+ */
+$mqShowBreakpoints: (small, medium, large);
+
+
+@function mqGetBreakpointWidth($name) {
+    @if(map-has-key($mqBreakpoints, $name)) {
+        @return map-get($mqBreakpoints, $name);
+    } @else {
+        @warn "Breakpoint #{$name} does not exist";
+    }
+}
+
+/**
+ * Media Query mixin
+ * Usage:
+ * .element {
+ *     @include mq($from: mobile) {
+ *         color: red;
+ *     }
+ *     @include mq($to: tablet) {
+ *         color: blue;
+ *     }
+ *     @include mq(mobile, tablet) {
+ *         color: green;
+ *     }
+ *     @include mq($from: tablet, $and: '(orientation: landscape)') {
+ *         color: teal;
+ *     }
+ *     @include mq(950px) {
+ *         color: hotpink;
+ *     }
+ * }
+ */
+
+@mixin mq($from: false, $to: false, $and: false, $height: false) {
+
+    // Initialize variables
+    $minSize: 0;
+    $maxSize: 0;
+    $mediaQuery: '';
+    $axis: if($height, 'height', 'width');
+
+    // From: this breakpoint (inclusive)
+    @if $from {
+        @if type-of($from) == number {
+            $minSize: $from;
+        } @else {
+            $minSize: mqGetBreakpointWidth($from);
+        }
+    }
+
+    // To: that breakpoint (exclusive)
+    @if $to {
+        @if type-of($to) == number {
+            $maxSize: $to - 1px;
+        } @else {
+            $maxSize: mqGetBreakpointWidth($to) - 1px;
+        }
+    }
+
+    // Responsive support is disabled, rasterize the output outside @media blocks
+    // The browser will rely on the cascade itself.
+    @if ($mqResponsive == false) {
+        $staticBreakpointWidth: mqGetBreakpointWidth($mqStaticBreakpoint);
+        @if type-of($staticBreakpointWidth) == number {
+            $targetWidth: $staticBreakpointWidth;
+            // Output only rules that start at or span our target width
+            @if ($and == false and ($minSize <= $targetWidth) and (($to == false) or ($maxSize >= $targetWidth))) {
+                @content;
+            }
+        } @else {
+            // Throw a warning if $mqStaticBreakpoint is not in the $mqBreakpoints list
+            @warn "No static styles will be output: #{$staticBreakpointWidth}";
+        }
+    }
+
+        // Responsive support is enabled, output rules inside @media queries
+    @else {
+        @if $minSize != 0 { $mediaQuery: '#{$mediaQuery} and (min-#{$axis}: #{$minSize})'; }
+        @if $maxSize != 0 { $mediaQuery: '#{$mediaQuery} and (max-#{$axis}: #{$maxSize})'; }
+        @if $and { $mediaQuery: '#{$mediaQuery} and #{$and}'; }
+
+        $mediaQuery: unquote(#{$mediaQuery});
+
+        @media #{all + $mediaQuery} {
+            @content;
+        }
+    }
+}
+
+/**
+ * Add a breakpoint
+ * Usage: $mqBreakpoints: mqAddBreakpoint(tvscreen, 1920px);
+ */
+@function mqAddBreakpoint($name, $breakpoint) {
+    $newBreakpoint: ($name: $breakpoint);
+    @return map-merge($mqBreakpoints, $newBreakpoint);
+}
+
+/**
+ * Create JSON string of map of breakpoints
+ */
+@function mqGetBreakpointsJSON($breakpoints: $mqBreakpoints) {
+    $JSON: '{';
+
+    @each $name in map-keys($breakpoints) {
+        $value: map-get($breakpoints, $name);
+
+        $JSON: $JSON + '"#{$name}":"#{$value}",';
+    }
+
+    // Remove last ","
+    $JSON: str-slice($JSON, 1, str-length($JSON) - 1);
+
+    // Close JSON string
+    $JSON: $JSON + '}';
+
+    @return $JSON;
+}
+
+
+/**
+ * Create JSON string of single breakpoint
+ */
+@function mqGetBreakpointJSON($name, $value) {
+    @return "{\"name\":\"#{$name}\",\"value\":\"#{$value}\"}";
+}
\ No newline at end of file
diff --git a/assets/css/style.scss b/assets/css/style.scss
index fc5b6db..65395b5 100644
--- a/assets/css/style.scss
+++ b/assets/css/style.scss
@@ -8,6 +8,7 @@
 @import "grid";
 @import "colors";
 @import "typography";
+@import "mediaqueries";
 @import "layout";
 @import "directives";
 
