diff --git a/src/app/map/from-to/from-to.component.css b/src/app/map/from-to/from-to.component.css
index cbb1b00..762ea69 100644
--- a/src/app/map/from-to/from-to.component.css
+++ b/src/app/map/from-to/from-to.component.css
@@ -7,15 +7,16 @@
     z-index: 500;
     right: 20px;
     left: 108px;
-    top: 15px;
-    padding: 7px 10px 16px;
+    top: 71px;
+    padding: 7px 10px 7px;
 }
 
 @media(min-width: 550px){
     .from-to-container {
-        top: 20px;
+        top: 72px;
         left: inherit;
         width: auto;
+        width: 200px;
     }
 }
 
@@ -113,7 +114,22 @@ button:active {
 }
 
 .checkbox-container {
-    z-index: 500;
+    z-index: 509;
+    position: absolute;
+    right: 15px;
+    top: 20px;
+    width: 66%;
+    width: calc(100% - 144px);
+    padding: 10px;
+    display: block;
+    background: #f6be0e;
+}
+
+@media(min-width: 550px){
+    .checkbox-container{
+        width: 200px;
+        right: 20px;
+    }
 }
 
 .checkbox {
diff --git a/src/app/map/from-to/from-to.component.html b/src/app/map/from-to/from-to.component.html
index 6721c3f..5c88c19 100644
--- a/src/app/map/from-to/from-to.component.html
+++ b/src/app/map/from-to/from-to.component.html
@@ -1,3 +1,8 @@
+<div class="checkbox-container">
+  <input type="checkbox" class="checkbox" [(ngModel)]="onbegluurd" name="gluren" (change)="setOnbegluurd($event)" value="false">
+  <span>Ik wil onbegluurd fietsen.</span>
+</div>
+
 <div class="from-to-container">
   
   <div id="from-container">
@@ -28,8 +33,4 @@
     <button (click)="findRoute()" type="button" name="button">zoek</button>
   </div>
   
-  <div class="checkbox-container">
-    <input type="checkbox" class="checkbox" [(ngModel)]="onbegluurd" name="gluren" (change)="setOnbegluurd($event)" value="false">
-    <span>Ik wil onbegluurd fietsen.</span>
-  </div>
 </div>