diff --git a/src/main.rs b/src/main.rs
index c8865f6..39da708 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -52,8 +52,8 @@ async fn main() -> std::io::Result<()> {
         )
         .wrap(Logger::new("%t [%{x-forwarded-for}i] %s %{User-Agent}i %r"))
         .service(web::resource("/ws/").route(web::get().to(ws_index)))
-        .service(web::resource("/gif/").route(web::get().to(gif)))
-        .service(web::resource("/gif/{query}").route(web::get().to(gif)))
+        .service(web::resource("/gif/{pos}/").route(web::get().to(gif)))
+        .service(web::resource("/gif/{pos}/{query}").route(web::get().to(gif)))
         .service(fs::Files::new("/", &static_path).index_file("index.html"))
     })
     .bind(config.bind_address)?
@@ -67,6 +67,8 @@ async fn ws_index(req: HttpRequest, stream: web::Payload) -> Result<HttpResponse
 
 async fn gif(req: HttpRequest) -> Result<HttpResponse, Error> {
     let name = req.match_info().get("query").unwrap_or("");
+    let mut pos = req.match_info().get("pos").unwrap_or("");
+    if pos == "_" { pos = "" }
     let builder = SslConnector::builder(SslMethod::tls()).unwrap();
 
     let client = Client::builder()
@@ -74,7 +76,7 @@ async fn gif(req: HttpRequest) -> Result<HttpResponse, Error> {
         .finish();
 
     
-    let url = format!("https://g.tenor.com/v1/search?q={}&key={}&limit=20&media_filter=tinygif", name.replace(" ", "+"), TENOR_API_KEY.to_owned());
+    let url = format!("https://g.tenor.com/v1/search?q={}&key={}&limit=20&media_filter=tinygif&pos={}", name.replace(" ", "+"), TENOR_API_KEY.to_owned(), pos);
     let response = client.get(url)
         .header("User-Agent", "actix-web/3.0")
         .send()     
diff --git a/static/index.html b/static/index.html
index 1d61d51..d4b84e7 100644
--- a/static/index.html
+++ b/static/index.html
@@ -200,7 +200,8 @@
         <div id="gif_area"></div>
         <div>
             <input type="text" id="gif_search" placeholder="Search" style="width: calc(100% - 4rem); display: inline-flex; margin-top: 3px;">
-            <a onclick="$('#gif_clip').addClass('is-hidden');" style="float: right; margin-top: 12px; margin-right: 9px; vertical-align: middle; display:inline-flexbox;">
+            <a onclick="$('#gif_clip').addClass('is-hidden');" 
+                style="float: right; margin-top: 12px; margin-right: 9px; vertical-align: middle; display:inline-flexbox;">
                 <img src="img/close.svg" alt="X" style="height: 1.8rem; width: auto; cursor: pointer;">
             </a>
         </div>
diff --git a/static/js/app.js b/static/js/app.js
index ad80c31..a7e2cc3 100644
--- a/static/js/app.js
+++ b/static/js/app.js
@@ -314,20 +314,27 @@ $('#dialog_ok').click(function() {
 $("#gif_search").keyup(function(event){
     if (event.key === 'Enter') {
         event.preventDefault();
-        loadGif(this.value);
+        $('#gif_area').empty();
+        positiongif = '_';
+        querygif = this.value;
+        loadGif();
     }
 });
 
-function loadGif(query) {
+var positiongif = '_';
+var querygif = '';
+function loadGif() {
     var area = $('#gif_area');
-    area.empty();
-    $.get("/gif/"+query, function(data, status){
+    $.get('/gif/'+positiongif+'/'+querygif, function(data, status){
         if(status == 'success') {
+            area.find('[name=more]').remove();
+            positiongif = data.next;
             data.results.forEach(function(result) {
                 var gif = result.media[0].tinygif.url;
                 area.append($('<button>', {class: 'button', onclick: 'sendGif("'+encodeURI(gif)+'"); $("#gif_clip").addClass("is-hidden");'})
                     .append($('<img>', {src: gif})));
             });
+            if(querygif != '') area.append($('<button>', {name: 'more', onclick: 'loadGif()', style: 'display: block'}).text('show more'));
         }
     });
 }