diff --git a/public/sass/partials/_quest.scss b/public/sass/partials/_quest.scss
@@ -2,6 +2,7 @@ h2.quests--layout-option  {
   @media screen and (max-width: 900px) {
     margin: 12px;
     overflow: hidden;
+    font-size: 3rem;
   }
 }
 
@@ -16,15 +17,15 @@ h2.quests--layout-option  {
   }
 
   &--layout-option {
-    margin-top: 60vh;
+      margin-top: 44vh;
       white-space: nowrap;
       overflow-x: auto;
       -webkit-overflow-scrolling: touch;
       -ms-overflow-style: -ms-autohiding-scrollbar;
       -ms-flex-wrap: nowrap;
       flex-wrap: nowrap;
 
-      &.quests {      
+      &.quests {
         a {
 
           &:nth-child(2),
@@ -33,11 +34,13 @@ h2.quests--layout-option  {
           &:nth-child(5),
           &:nth-child(5),
           &:last-child {
-            min-width: 53%;
-            width: 53%;
+            min-width: 53vw;
+            width: 53vw;
             margin: 0 6px;
             .quest {
-              min-height: 190px;
+              position: relative;
+              height: 84%;
+              min-height: 53vw;
               border-radius: 7px;
               overflow: hidden;
 
@@ -54,6 +57,10 @@ h2.quests--layout-option  {
                 bottom: 6px;
                 left: 0px;
                 border-radius: 7px;
+                position: absolute;
+                bottom: 12px;
+                width: 100%;
+                z-index: 999;
 
                 .title {
                   color: $color-cta;
@@ -70,19 +77,30 @@ h2.quests--layout-option  {
             top: 101px;
             left: 0;
             margin-left: 1px;
-            height: 60vh;
-            background: red;
+            height: 44vh;
             border: none;
 
             .quest {
               height: 100%;
               border: none;
+              position: relative;
+              height: 44vh;
+
+              &__details {
+                width: 100%;
+                margin-top: -57px;
+                z-index: 99;
 
+                h2 {
+                  color: $color-cta;
+                  font-size: 2.4rem;
+                }
+              }
               &__hero {
                 width: 100%;
-                height: 55vh;
-                position: relative;
-
+                height: 37vh;
+                position: relative;          
+              
                 &:before,
                 &:after {
                   content: '';
@@ -98,6 +116,7 @@ h2.quests--layout-option  {
                 }
 
                 &:after {
+                  display: none;
                   bottom: auto;
                   top: -1px;
                   background: linear-gradient(to top, rgba(42, 22, 75, 0),rgba(42, 22, 75, .7) 60%, #2a164b);

diff --git a/public/sass/partials/_search.scss b/public/sass/partials/_search.scss
@@ -5,7 +5,7 @@
 
   @media screen and(max-width: 950px) {
     margin: 25px;
-    width: calc(100vw - 50px);
+    width: calc(100% - 50px);
   }
 }
 
@@ -33,7 +33,16 @@
   }
 
   &__heading {
-    color: $color-main;
+    color: $color-white;
+    text-shadow: 1px 1px 0 $color-main, 
+                 2px 2px 0 lighten($color-main, 3), 
+                 3px 3px 0 lighten($color-main, 6), 
+                 4px 4px 0 lighten($color-main, 9), 
+                 5px 5px 0 lighten($color-main, 12),
+                 6px 6px 6px rgba($color-main, .4), 
+                 7px 7px 7px rgba($color-main, .3), 
+                 8px 8px 8px rgba($color-main, .2), 
+                 9px 9px 9px rgba($color-main, .1);
 
     @media screen and (max-width:950px) {
       margin-left: 24px;

diff --git a/public/sass/partials/_sideMenu.scss b/public/sass/partials/_sideMenu.scss
@@ -1,7 +1,7 @@
 .menu-sidebar {
     display: flex;
     align-items: center;
-    position: absolute;
+    position: fixed;
     left: 0;
     top: -100%;
     width: 100%;

diff --git a/public/sass/partials/_single.scss b/public/sass/partials/_single.scss
@@ -11,7 +11,7 @@
     margin-top: 53px;
 
     @media screen and(min-width: 900px) {
-      margin-top: 8px;
+      margin-top: 97px;
     }
 
     @media all and (max-width: 900px) {
@@ -27,7 +27,14 @@
       bottom: -2px;
       width: 100%;
       height: 100%;
-      background: linear-gradient(to bottom, rgba(42, 22, 75, 0), rgba(42, 22, 75, 0.4) 75%, #2a164b 87%);
+      background: linear-gradient(to bottom, rgba($color-main, 0) 31%, $color-main 83%);
+    }
+
+    &--map {
+      &:before {
+        background: linear-gradient(to bottom, rgba(42, 22, 75, 1), rgba(232, 210, 35, .2) 45%, #2a164b 87%);
+        top: 0;
+      }
     }
 
     &:after {
@@ -192,6 +199,8 @@
 
 #map {
   height: 500px;
+  left: -24px;
+  width: 100vw;
 }
 
 .title{

diff --git a/routes/index.js b/routes/index.js
@@ -3,6 +3,7 @@ const router = express.Router();
 const questController = require('../controllers/questController');
 const userController = require('../controllers/userController');
 const authController = require('../controllers/authController');
+const helperController = require('../controllers/helperController');
 const { catchErrors } = require('../handlers/errorHandlers');
 
 

diff --git a/views/editQuest.pug b/views/editQuest.pug
@@ -4,5 +4,4 @@ include mixins/_questForm
 
 block content
     .inner
-        h2 #{title}
-        +questForm(quest)
+        +questForm(quest, title)
diff --git a/views/mixins/_pagination.pug b/views/mixins/_pagination.pug
@@ -1,10 +1,24 @@
-mixin pagination(page, pages, count, url)
-    .pagination
-        .pagination__prev
-            if page > 1
-                a(href=`${url}/${page - 1}`) Prev
-        .pagination__text
-            p Page #{page} of #{pages} - #{count} total results
-        .pagination__next
-            if page < pages
-                a(href=`${url}/${parseFloat(page)+1}`) Next
+mixin pagination(page, pages, count, isMobile = false, url)
+
+    if isMobile
+        .pagination.pagination--mobile
+            .pagination__prev
+                if page > 1
+                    a(href=`${url}/${page - 1}`) Prev
+            if !isMobile
+                .pagination__text
+                    p Page #{page} of #{pages} - #{count} total results
+            .pagination__next
+                if page < pages
+                    a(href=`${url}/${parseFloat(page)+1}`) Next
+    else
+        .pagination
+            .pagination__prev
+                if page > 1
+                    a(href=`${url}/${page - 1}`) Prev
+            if !isMobile
+                .pagination__text
+                    p Page #{page} of #{pages} - #{count} total results
+            .pagination__next
+                if page < pages
+                    a(href=`${url}/${parseFloat(page)+1}`) Next
diff --git a/views/mixins/_questForm.pug b/views/mixins/_questForm.pug
@@ -1,5 +1,6 @@
-mixin questForm(quest = {})
+mixin questForm(quest = {}, title)
     form.card(action=`/add/${quest._id || ''}` method="POST" enctype="multipart/form-data")
+        h1= title
         label(for="name") Name
         input(type="text" name="name" value=quest.name placeholder="Enter quest name")
         label(for="description") Description

diff --git a/views/quests.pug b/views/quests.pug
@@ -22,4 +22,4 @@ block content
 
 
 
-        +pagination(page, pages, count, '/quests/page')
+        +pagination(page, pages, count, isMobile, '/quests/page')
diff --git a/views/searched.pug b/views/searched.pug
@@ -5,7 +5,7 @@ include mixins/_pagination
 
 
 block topContent
-    .content.content__background-map.single__hero(style=`background-image: url(${h.staticMap(quests[0].location.cityCoodrinates) || ''})`)
+    .content.content__background-map.single__hero.single__hero--map(style=`background-image: url(${h.staticMap(quests[0].location.cityCoodrinates) || ''})`)
 
 block content
     .content
		@@ -22,4 +22,4 @@ block content



		+pagination(page, pages, count, '/quests/page')
		+pagination(page, pages, count, isMobile, '/quests/page')