diff --git a/roofis2/roomservice/urls.py b/roofis2/roomservice/urls.py
index 474f733..8a0dacc 100644
--- a/roofis2/roomservice/urls.py
+++ b/roofis2/roomservice/urls.py
@@ -12,7 +12,6 @@ urlpatterns = [
     path('adminpage', views.admin, name='admin'),
     path('booking', views.booking, name='booking'),
     path('search', views.search, name='search'),
-    path('search', views.location_based_search, name='location-based-search'),
+    path('location_search', views.location_based_search, name='location-based-search'),
+    path('filter_search', views.filter_search, name='filter-search')]
 
-    path('roomservice', include('roomservice.api.urls'))
-]
diff --git a/roofis2/roomservice/views.py b/roofis2/roomservice/views.py
index 2fffa46..5a15859 100644
--- a/roofis2/roomservice/views.py
+++ b/roofis2/roomservice/views.py
@@ -1,7 +1,7 @@
 from roomservice.models import Room, Favorite, Booking, Staff
 from .forms import FavoriteForm
-import datetime
-from django.shortcuts import render, redirect
+from django.shortcuts import render
+from roomservice.models import Room
 import logging
 
 logger = logging.getLogger(__name__)
@@ -15,48 +15,7 @@ def search(request):
 
 def booking(request):
     room_id = request.POST["room"]
-    room = Room.objects.get(id=room_id)
-    startdate = datetime.date.today()
-    weekday = startdate.weekday()
-    logger.info(weekday)
-    enddate = startdate + datetime.timedelta(7)
-    multd = []
-    bookings = Booking.objects.filter(room_id=room.id, start_date__gte=startdate, end_date__lte=enddate)
-    logger.info(bookings)
-    for booking in bookings:
-        logger.info(booking)
-        sdate = booking.start_date
-        logger.info(sdate)
-        edate = booking.end_date
-        logger.info(edate)
-        stime = booking.start_time.hour
-        logger.info(stime)
-        etime = booking.end_time.hour + 1
-        logger.info(etime)
-        if edate != sdate:
-            break
-        else:
-            if weekday == 0:
-                day = "Monday"
-            elif weekday == 1:
-                day = "Tuesday"
-            elif weekday == 2:
-                day = "Wednesday"
-            elif weekday == 3:
-                day = "Thursday"
-            elif weekday == 4:
-                day = "Friday"
-            elif weekday == 5:
-                day = "Saturday"
-            elif weekday == 6:
-                day = "Sunday"
-            timediff = etime - stime
-            if timediff > 1:
-                while timediff > 1:
-                    multd.append(day + (stime + timediff - 1).__str__() + "-" + (stime + timediff).__str__())
-                    timediff = timediff - 1
-            logger.info(multd)
-    return render(request, 'booking.jinja', {"title": "rooF(i)S is love rooF(i)S is live!!", "multd": multd})
+    return render(request, 'booking.jinja', {"title": "rooF(i)S is love rooF(i)S is live!!", "data": room_id})
 
 
 def admin(request):
@@ -97,3 +56,10 @@ def success(request):
 
 def error(request):
     return render(request, 'error.jinja', {"title": "rooF(i)S is love rooF(i)S is live!!"})
+
+
+def filter_search(request):
+    if request.method == "POST":
+        logger.info(request.POST)
+
+    return render(request, 'search.jinja', {"title": "rooF(i)S is love rooF(i)S is live!!"})
diff --git a/roofis2/static/js/script.js b/roofis2/static/js/script.js
new file mode 100644
index 0000000..3fdf481
--- /dev/null
+++ b/roofis2/static/js/script.js
@@ -0,0 +1,38 @@
+$(document).ready(function () {
+    updateColors();
+});
+
+listOfIds = [];
+
+function updateColors(booking) {
+    let list = [];
+
+    if (booking !== undefined) {
+        let day = (getDayOfWeek(booking.start_date));
+        let beginningHour = booking.start_time.substr(0, 2);
+        let endingHour = booking.end_time.substr(0, 2) - 1;
+
+        console.log(day + beginningHour + "-" + endingHour);
+        listOfIds.push(day + beginningHour + "-" + endingHour);
+
+    }
+
+    listOfIds.forEach(id => {
+        $("#"+id).addClass('booked');
+    });
+}
+
+// Accepts a Date object or date string that is recognized by the Date.parse() method
+function getDayOfWeek(date) {
+  var dayOfWeek = new Date(date).getDay();
+  return isNaN(dayOfWeek) ? null : ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'][dayOfWeek];
+}
+
+function init(id) {
+    $.getJSON({url: "/api/booking?room_id="+id, success: function (result) {
+            result.forEach(booking =>{
+                updateColors(booking)
+            })
+        }});
+
+}
\ No newline at end of file
diff --git a/roofis2/templates/base.jinja b/roofis2/templates/base.jinja
index 118ebfd..14a2337 100644
--- a/roofis2/templates/base.jinja
+++ b/roofis2/templates/base.jinja
@@ -8,15 +8,15 @@
         <link rel="stylesheet" href="../static/css/style.css"/>
         <title>{% block title %}{% endblock %}</title>
     {% endblock %}
-    <script src="{{ static('js/script.js') }}"></script>
+
     {% block js_extra %}{% endblock %}
     {#    <link rel="stylesheet" href="{{ static('css/style.css') }}">#}
     <link rel="stylesheet" href="{{ static('libs/font-awesome-4.7.0/css/font-awesome.css') }}">
     <link rel="stylesheet" href="{{ static('libs/bootstrap-4.1.0/dist/css/bootstrap.css') }}">
-    <link rel="stylesheet" href="{{ static('css/respool/nav.css') }}">
     <script src="{{ static('libs/jquery-3.3.1.min.js') }}"></script>
     <script src="{{ static('libs/popper.min.js') }}"></script>
     <script src="{{ static('libs/bootstrap-4.1.0/dist/js/bootstrap.min.js') }}"></script>
+    <script src="{{ static('js/script.js') }}"></script>
 </head>
 <body class="container-fluid">
 <div class="row bg-secondary mb-2">
diff --git a/roofis2/templates/booking.jinja b/roofis2/templates/booking.jinja
index c1e5c18..3b42a57 100644
--- a/roofis2/templates/booking.jinja
+++ b/roofis2/templates/booking.jinja
@@ -1,11 +1,10 @@
 {% extends 'base.jinja' %}
 {% block content %}
-{% for day in multd%}
-    <script>
-    var el = document.getElementById("{{day}}");
-    el.classList.add("booked");
-    </script>
-{% endfor %}
+<script type="text/javascript">
+    data_from_django = {{ data }};
+    console.log(data_from_django);
+    init(data_from_django);
+</script>
 <table class="table table-light">
 <thead>
     <tr>
@@ -114,7 +113,7 @@
         <th scope="row">15:00 - 16:00</th>
         <td id="Monday15-16" class=""></td>
         <td id="Tuesday15-16" class=""></td>
-        <td id="Wednesday15-16" class=""></td>
+        <td id="Wednesday15-16" ></td>
         <td id="Thursday15-16" class=""></td>
         <td id="Friday15-16" class=""></td>
         <td id="Saturday15-16" class=""></td>
diff --git a/roofis2/templates/search.jinja b/roofis2/templates/search.jinja
index 0fcf368..1344a6d 100644
--- a/roofis2/templates/search.jinja
+++ b/roofis2/templates/search.jinja
@@ -4,28 +4,72 @@
         <div class="row">
             <div class="col"></div>
             <div class="col-8">
+                <p>
+
+
                 <form class="form-inline my-2 my-lg-0">
+                    <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button"
+                       aria-expanded="false" aria-controls="collapseExample">
+                        Filter
+                    </a>
                     <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                     <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
                 </form>
+                </p>
+
+        <div class="collapse" id="collapseExample" style="max-width: 200px">
+            <form action="{{url('roomservice:filter-search')}}" method="POST" id="FormFilter">
+                <input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">
+                <div class="card card-body">
+                    <div class="form-check form-check-inline">
+                        <input type="checkbox" class="form-check-input" id="checkboxbarrierfree">
+                        <label class="form-check-label" for="checkbox">barrierfree</label>
+                    </div>
+                    <div class="form-check form-check-inline">
+                        <input type="checkbox" class="form-check-input" id="checkbox">
+                        <label class="form-check-label" for="checkbox">seating</label>
+                    </div>
+                    <div class="form-check form-check-inline">
+                        <input type="checkbox" class="form-check-input" id="checkbox">
+                        <label class="form-check-label" for="checkbox">cooling</label>
+                    </div>
+
+                    <div class="dropdown">
+                        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton"
+                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                            Capacity
+                        </button>
+                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+                            <a class="dropdown-item" href="#">no selection</a>
+                            <a class="dropdown-item" href="#">20</a>
+                            <a class="dropdown-item" href="#">30</a>
+                            <a class="dropdown-item" href="#">60</a>
+                        </div>
+                    </div>
+
+                    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Use filters</button>
+                </div>
+            </form>
+        </div>
             </div>
         </div>
         <div class="row">
             <div class="col"></div>
             <div class="col-8">
                 <form action="{{ url("roomservice:booking") }}" method="POST" id="form">
-                <input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">
-                <div class="form-group">
-                    <label for="sel1">Select list:</label>
-                    <select multiple name="room" class="form-control" form="form" id="sel1">
-                        {% for room in rooms %}
-                            <option value="{{room.id}}">{{room.room_number}}</option>
-                        {% endfor %}
-                    </select>
-                </div>
-                    <button type="submit" method="POST" value=" Send" class="btn btn-success" id="submit"> Submit </button>
-                </div>
+                    <input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">
+                    <div class="form-group">
+                        <label for="sel1">Select list:</label>
+                        <select multiple name="room" class="form-control" form="form" id="sel1">
+                            {% for room in rooms %}
+                                <option value="{{ room.id }}">{{ room.room_number }}</option>
+                            {% endfor %}
+                        </select>
+                    </div>
+                    <button type="submit" method="POST" value=" Send" class="btn btn-success" id="submit"> Submit
+                    </button>
                 </form>
+            </div>
             <div class="col"></div>
         </div>
     </div>