diff --git a/templates/files.html b/templates/files.html
index 08e4f21..97bb4b7 100644
--- a/templates/files.html
+++ b/templates/files.html
@@ -3,72 +3,20 @@
     <div class="container-fluid">
         <form method="POST">
             <div class="row">
-                <div class="input-group col-lg-5">
-                    <div class="input-group-prepend">
-                        <input id="viewing" type=submit class="btn btn-outline-info disabled" disabled value="Viewing:"></input>
-                    </div>
-                    <select name="noo" style="color:#5bc0de;border:1px solid #5bc0de;" class="form-control form-conrol-info" onChange="ChangeView()">
-                        {% if form['noo']=="Oldest" %}
-                            <option selected>Oldest</option>
-                        {% else %}
-                            <option>Oldest</option>
-                        {% endif %}
-                        {% if form['noo']=="Newest" %}
-                            <option selected>Newest</option>
-                        {% else %}
-                            <option>Newest</option>
-                        {% endif %}
-                    </select>
-                    <select name="how_many" style="color:#5bc0de;border:1px solid #5bc0de;" class="form-control" onChange="ChangeView()">
-                        {% if form['how_many']=="50" %}
-                            <option selected>50</option>
-                        {% else %}
-                            <option>50</option>
-                        {% endif %}
-                        {% if form['how_many']=="100" %}
-                            <option selected>100</option>
-                        {% else %}
-                            <option>100</option>
-                        {% endif %}
-                        {% if form['how_many']=="200" %}
-                            <option selected>200</option>
-                        {% else %}
-                            <option>200</option>
-                        {% endif %}
-                    </select>
-                    <div class="input-group-append">
-                        <button class="btn btn-outline-info disabled" disabled="">grouped by:</button>
-                    </div>
-                    <select name="grouping" style="color:#5bc0de;border:1px solid #5bc0de;" class="form-control" onChange="ChangeView()">
-                        {% if form['grouping']=="None" %}
-                            <option selected>None</option>
-                        {% else %}
-                            <option>None</option>
-                        {% endif %}
-                        {% if form['grouping']=="Day" %}
-                            <option selected>Day</option>
-                        {% else %}
-                            <option>Day</option>
-                        {% endif %}
-                        {% if form['grouping']=="Week" %}
-                            <option selected>Week</option>
-                        {% else %}
-                            <option>Week</option>
-                        {% endif %}
-                        {% if form['grouping']=="Month" %}
-                            <option selected>Month</option>
-                        {% else %}
-                            <option>Month</option>
-                        {% endif %}
-                    </select>
+                <div class="input-group col">
+
+                    {{CreateSelect( "noo", noo, ["Oldest", "Newest"], "$('#offset').val(0)")|safe }}
+                    {{CreateSelect( "how_many", how_many, ["10", "25", "50", "75", "100", "150", "200", "500"])|safe }}
+                    <span style="border:0" class="btn btn-outline-info disabled">grouped by:</span>
+                    {{CreateSelect( "grouping", grouping, ["None", "Day", "Week", "Month"])|safe }}
                 </div class="input-group">
-                <div class="col h-100 my-auto">
+                <div class="col my-auto d-flex justify-content-center">
                     {% set fd=entry_data[0].file_details[0] %}
                     <button id="prev" name="prev" class="btn btn-info"><i class="fas fa-arrow-alt-circle-left"></i></button>
-                    <span>{{form['how_many']}} files</span>
+                    <span class="h-100 my-auto">&nbsp;{{how_many}} files&nbsp;</span>
                     <button id="next" name="next" class="btn btn-info"><i class="fas fa-arrow-alt-circle-right"></i></i></button>
                 </div>
-                <div class="input-group offset-lg-1 col">
+                <div class="input-group col justify-content-end">
                     <div class="input-group-prepend">
                         <button style="width:98%" class="btn btn-outline-info disabled" disabled>Size:</button>
                     </div>
@@ -89,7 +37,7 @@
                     </div>
                 </div class="input-group">
             </div class="form-row">
-            <input type="hidden" name="offset" value="{{offset}}">
+            <input id="offset" type="hidden" name="offset" value="{{offset}}">
         </form>
 
         {% set last = namespace(printed=0) %}
@@ -157,11 +105,14 @@ function ChangeSize(clicked_button,sz)
 	$('.thumb').attr( {height: sz, style: 'font-size:'+sz } )
 }
 
-function ChangeView()
-{
-    $('#viewing').removeClass("disabled").removeClass("btn-outline-info").addClass("btn-info")
-    $('#viewing').attr("disabled",false)
-    $('#viewing').val("Change to:")
-}
+$(document).ready(function() {
+    if( {{offset}} == 0 )
+    {
+        $('#prev').addClass('disabled')
+        $('#prev').prop('disabled', true)
+    }
+} )
+
+
 </script>
 {% endblock script_content %}