diff --git a/src/stylesheets/_header.scss b/src/stylesheets/_header.scss
@@ -57,6 +57,10 @@ header {
         position: relative;
         width: 250px;
 
+        @include grid-media-query('before-tablet'){
+          padding: 15px 0 16px;
+        }
+
         a {
           color: $white;
 
@@ -103,15 +107,67 @@ header {
         font-size: 11px;
         height: 100%;
 
-        li {
+        &.open{
+          ul{
+            @include grid-media-query('before-tablet'){
+              display: block;
+            }
+          }
 
-          a {
-            color: $white;
-            font-size: 14px;
-            transition: color 0.35s ease-in-out;
+          .menu-toggle{
+            display: none;
+          }
+
+          .close{
+            display: block;
+          }
+        }
+
+        .menu-toggle{
+          cursor: pointer;
+          display: none;
+          font-size: 0;
+
+          @include grid-media-query('before-tablet'){
+            display: block;
+          }
 
-            &:hover {
+          &:before{
+            font-size: 30px;
+          }
+        }
+
+        .close{
+          cursor: pointer;
+          display: none;
+          font-size: 0;
+
+          &:before{
+            font-size: 30px;
+          }
+        }
+
+        ul{
+
+          @include grid-media-query('before-tablet'){
+            display: none;
+          }
+
+          li {
+
+            a {
+              border-bottom: 2px solid transparent;
               color: $white;
+              font-size: 14px;
+              padding-bottom: 4px;
+              transition: color 0.35s ease-in-out, border-color 0.35s ease-in-out;
+
+              @include grid-media-query('tablet'){
+                &:hover {
+                  border-color: $white;
+                  color: $white;
+                }
+              }
             }
           }
         }

diff --git a/src/stylesheets/_leftRightTeaser.scss b/src/stylesheets/_leftRightTeaser.scss
@@ -9,6 +9,10 @@
 
   img{
     max-width: 100%;
+
+    @include grid-media-query('before-tablet'){
+      margin-bottom: 20px;
+    }
   }
 
   .text{

diff --git a/src/stylesheets/_variables.scss b/src/stylesheets/_variables.scss
@@ -35,3 +35,30 @@ $breakpoint-tablet: map-get($breakpoints, before-tablet);
 $breakpoint-after-tablet: map-get($breakpoints, tablet);
 $breakpoint-before-desk: map-get($breakpoints, before-desk);
 $breakpoint-desk: map-get($breakpoints, desk);
+
+
+/**
+ * Taken from csswizardry-grids
+ * ---------
+ * Enclose a block of code with a media query as named in `$breakpoints`.
+ */
+@mixin grid-media-query($media-query) {
+  $breakpoint-found: false;
+
+  @each $breakpoint in $breakpoints {
+    $name: nth($breakpoint, 1);
+    $declaration: nth($breakpoint, 2);
+
+    @if $media-query == $name and $declaration {
+      $breakpoint-found: true;
+
+      @media only screen and #{$declaration} {
+        @content;
+      }
+    }
+  }
+
+  @if not $breakpoint-found {
+    @warn "Breakpoint ‘#{$media-query}’ does not exist";
+  }
+}
diff --git a/src/stylesheets/_wide-teaser.scss b/src/stylesheets/_wide-teaser.scss
@@ -32,7 +32,7 @@
     .text-area{
       max-width: 900px;
       text-align: center;
-      padding-top: 20px;
+      padding: 20px 20px 0;
       z-index: 5;
 
       h2{

diff --git a/src/templates/blog-overview.js b/src/templates/blog-overview.js
@@ -13,7 +13,7 @@ class BlogOverview extends React.Component {
 
 		const childElements = posts.map(({node}) => {
 			return (
-				<div className="col-4 teaser" key={node.fields.slug}>
+				<div className="col-lg-4 col-md-6 teaser" key={node.fields.slug}>
 					<Link to={node.fields.slug}>
 						<img src={node.frontmatter.previewImage} alt="test"/>
 						<span className="text-overlay">
@@ -42,11 +42,11 @@ class BlogOverview extends React.Component {
 								</div>
 								<div className="text">
 									<h1>Entdecken Sie meinen Blog</h1>
-									<div className="subheadline">
+									<p>
 										In meiner langjährigen Erfahrung als Hundehalterin und Trainerin habe ich selbst
 										viel im Internet recherchiert und gestöbert.
 										Heute möchte ich mein Wissen teilen und lade gerne zum Austausch ein.
-									</div>
+									</p>
 								</div>
 							</div>
 						</div>

diff --git a/src/templates/contact.js b/src/templates/contact.js
@@ -12,7 +12,7 @@ const ContactTemplate = () => {
 				</div>
 				<div className="container">
 					<div className="row">
-						<div className="col-sm-6">
+						<div className="col-md-6">
 							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci dolorem earum et
 							   iure maxime nam nesciunt nulla, quas temporibus totam. Ab aliquam aspernatur assumenda
 							   aut autem corporis deserunt dolorem doloribus eos est ex expedita harum hic in itaque
@@ -41,7 +41,7 @@ const ContactTemplate = () => {
 								</li>
 							</ul>
 						</div>
-						<div className="col-sm-6">
+						<div className="col-md-6">
 							<form action="#">
 								<div className="form-group">
 									<input type="text" id="name" className="form-control" placeholder="Name" />