diff --git a/creations.php b/creations.php
index b2341320..d413c2bf 100755
--- a/creations.php
+++ b/creations.php
@@ -1,4 +1,6 @@
 <?php
+header('location: /creations?'. $_SERVER['QUERY_STRING']);
+exit;
 include('language.php');
 include('session.php');
 include('tokens.php');
diff --git a/v2/app/hooks/useEffectUpdate.tsx b/v2/app/hooks/useEffectUpdate.tsx
new file mode 100644
index 00000000..f3e783d6
--- /dev/null
+++ b/v2/app/hooks/useEffectUpdate.tsx
@@ -0,0 +1,15 @@
+import { useEffect, useRef } from "react";
+
+const useEffectOnUpdate = (callback, dependencies) => {
+  const didMount = useRef(false);
+
+  useEffect(() => {
+    if (!didMount.current) {
+      didMount.current = true;
+      return;
+    }
+    callback(dependencies);
+  }, dependencies);
+};
+
+export default useEffectOnUpdate;
\ No newline at end of file
diff --git a/v2/app/hooks/useFormSubmit.tsx b/v2/app/hooks/useFormSubmit.tsx
index f3ef1ff7..ce4b649d 100644
--- a/v2/app/hooks/useFormSubmit.tsx
+++ b/v2/app/hooks/useFormSubmit.tsx
@@ -1,4 +1,4 @@
-import { useRouter } from "next/router";
+import { NextRouter, useRouter } from "next/router";
 import { FormEvent, useCallback } from "react";
 
 function toJson(formData: FormData) {
@@ -9,16 +9,20 @@ function toJson(formData: FormData) {
   return object;
 }
 
+export function doSubmit(router: NextRouter, form: HTMLFormElement) {
+  router.push({
+    pathname: form.action,
+    query: toJson(new FormData(form))
+  });
+}
+
 function useFormSubmit() {
   const router = useRouter();
   return useCallback((e: FormEvent) => {
     const form = e.target;
     if (form instanceof HTMLFormElement) {
       e.preventDefault();
-      router.push({
-        pathname: form.action,
-        query: toJson(new FormData(form))
-      });
+      doSubmit(router, form);
     }
   }, [router]);
 }
diff --git a/v2/app/hooks/useSmoothFetch.ts b/v2/app/hooks/useSmoothFetch.ts
index 030dcb64..0a6e89a3 100644
--- a/v2/app/hooks/useSmoothFetch.ts
+++ b/v2/app/hooks/useSmoothFetch.ts
@@ -10,7 +10,8 @@ type SmoothParams<T> = {
   requestOptions?: RequestInit;
   reloadDeps?: any[],
   cacheKey?: string,
-  disabled?: boolean
+  disabled?: boolean,
+  onSuccess?: (data: T) => void;
 }
 
 let seed = 1;
@@ -77,7 +78,7 @@ type CacheHandler = Record<string, {
   setStates: Array<(newState: any) => void>
 }>
 const cacheHandler: CacheHandler = {}
-function useSmoothFetch<T>(input: RequestInfo, { placeholder, retryDelay = 1000, retryDelayMultiplier = 2, retryCount = Infinity, requestOptions, reloadDeps = [], cacheKey, disabled }: SmoothParams<T> = {}) {
+function useSmoothFetch<T>(input: RequestInfo, { placeholder, retryDelay = 1000, retryDelayMultiplier = 2, retryCount = Infinity, requestOptions, reloadDeps = [], cacheKey, disabled, onSuccess }: SmoothParams<T> = {}) {
   const placeholderVal = useMemo(() => {
     if (!disabled && cacheKey && cacheHandler[cacheKey]) {
       const { state } = cacheHandler[cacheKey];
@@ -127,6 +128,7 @@ function useSmoothFetch<T>(input: RequestInfo, { placeholder, retryDelay = 1000,
         setAllStates({ data, loading: false, error: null })
         if (cacheKey)
           cacheHandler[cacheKey].setStates.length = 0;
+        onSuccess?.(data);
       })
       .catch(error => {
         if (currentRetryCount < retryCount) {
diff --git a/v2/app/pages/creations.tsx b/v2/app/pages/creations.tsx
index afb7557d..30aaf372 100644
--- a/v2/app/pages/creations.tsx
+++ b/v2/app/pages/creations.tsx
@@ -7,35 +7,94 @@ import Ad from "../components/Ad/Ad";
 import WithAppContext from "../components/WithAppContext/WithAppContext";
 import useSmoothFetch, { Placeholder } from "../hooks/useSmoothFetch";
 import Skeleton from "../components/Skeleton/Skeleton";
-import { useMemo } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { useRouter } from "next/router";
-import TrackCreationCard from "../components/TrackCreationCard/TrackCreationCard";
+import TrackCreationCard, { TrackCreation } from "../components/TrackCreationCard/TrackCreationCard";
 import { buildQuery } from "../helpers/uris";
 import Link from "next/link";
 import useCreations from "../hooks/useCreations";
+import useFormSubmit, { doSubmit } from "../hooks/useFormSubmit";
+import useEffectOnUpdate from "../hooks/useEffectUpdate";
 
+const resPerPage = 60, resPerRow = 5;
 const CreationsList: NextPage = () => {
   const language = useLanguage();
   const router = useRouter();
+  const handleSearch = useFormSubmit();
+
   const { user, admin, tri, type, nom, auteur } = router.query;
   const { data: creator } = useSmoothFetch<{ name: string }>(`/api/user/${user}`, {
     disabled: !user
   });
   const nTri = +tri || 0;
-  const singleType = (type !== '');
-  const sortTabs = language ? ['By latest', 'Top rated', 'Trending'] : ['Les plus récents', 'Les mieux notés', 'Tendances'];
-  const types = language
+  const sortTabs = useMemo(() => language ? ['By latest', 'Top rated', 'Trending'] : ['Les plus récents', 'Les mieux notés', 'Tendances'], [language]);
+  const sortTabsData = useMemo(() => {
+    return sortTabs.map((sortTab, i) => ({
+      text: sortTab,
+      url: "/creations?" + buildQuery({
+        ...router.query,
+        tri: i
+      })
+    }));
+  }, [sortTabs, router.query]);
+  const types = useMemo(() => language
     ? ['Complete mode  - multicups', 'Quick mode - multicups', 'Complete mode - cups', 'Quick mode - cups', 'Complete mode - circuits', 'Quick mode - circuits', 'Complete mode - arenas', 'Quick mode - arenas']
     : ['Mode complet  - multicoupes', 'Mode simplifié - multicoupes', 'Mode complet - coupes', 'Mode simplifié - coupes', 'Mode complet - circuits', 'Mode simplifié - circuits', 'Mode complet - arènes', 'Mode simplifié - arènes']
+    , [language]);
+
+  const [page, setPage] = useState(1);
   const creationParams = useMemo(() => {
     const params = {
-      user, admin, tri, type, nom, auteur
+      user, admin, tri, type, nom, auteur, page
     };
     return buildQuery(params);
-  }, [router.query]);
+  }, [router.query, page]);
+  useEffectOnUpdate(() => {
+    resetAbortController();
+    setCreationsListHeights({
+      current: 0,
+      max: 0
+    });
+    setPage(1);
+  }, [buildQuery(router.query)]);
+  useEffectOnUpdate(() => {
+    setQueryId(queryId + 1);
+  }, [creationParams]);
+  let [cardHeight, setCardHeight] = useState(0);
+  let [chunkHeight, setChunkHeight] = useState(0);
+  function getCardHeight() {
+    try {
+      if (window.matchMedia('(max-width: 800px)').matches) {
+        return 126;
+      }
+    }
+    catch (e) {
+    }
+    return 146;
+  }
+  useEffect(() => {
+    setCardHeight(cardHeight = getCardHeight());
+    setChunkHeight(chunkHeight = cardHeight * resPerPage / resPerRow);
+  }, []);
+  const [creationsListHeights, setCreationsListHeights] = useState({
+    current: 0,
+    max: 0
+  });
+
+  function createAbortController() {
+    if (typeof AbortController !== "undefined")
+      return new AbortController();
+  }
+  const controller = useRef(createAbortController());
+  const [queryId, setQueryId] = useState(0);
+  function resetAbortController() {
+    controller.current?.abort();
+    controller.current = createAbortController();
+  }
+
   const { data: creationsPayload, loading: creationsLoading } = useSmoothFetch(`/api/getCreations.php?${creationParams}`, {
     placeholder: () => ({
-      data: Placeholder.array(60, (id) => ({
+      data: Placeholder.array(resPerPage, (id) => ({
         id,
         author: "",
         cicon: "",
@@ -50,32 +109,90 @@ const CreationsList: NextPage = () => {
       })),
       count: 0,
       countByType: []
-    })
+    }),
+    onSuccess: (payload) => {
+      if (page === 1)
+        setCreationsList(payload.data);
+      else
+        setCreationsList([...creationsList, ...payload.data]);
+      setTimeout(() => {
+        const $creationsList = document.getElementById(styles.creationsList);
+        if ($creationsList) {
+          const $creationsListWrapper = $creationsList.parentNode;
+          if ($creationsListWrapper instanceof HTMLElement) {
+            if (!$creationsListWrapper.style.width)
+              $creationsListWrapper.style.width = $creationsListWrapper.offsetWidth + "px";
+          }
+          setCreationsListHeights({
+            current: Math.min(creationsListHeights.current + chunkHeight, $creationsList.scrollHeight),
+            max: $creationsList.scrollHeight
+          });
+          setCreationsRendering(false);
+        }
+      });
+    },
+    reloadDeps: [queryId],
+    requestOptions: {
+      signal: controller.current?.signal
+    }
   });
-  const creationCount = useMemo(() => {
+  const [creationsList, setCreationsList] = useState<TrackCreation[]>(creationsPayload.data);
+  const [creationCount, setCreationCount] = useState<{ total: number, byType: number[], isTotal: boolean }>();
+  useEffect(() => {
     if (creationsLoading) return;
-    return {
+    setCreationCount({
       total: creationsPayload.count,
-      byType: creationsPayload.countByType
-    }
-  }, [creationsPayload, creationsLoading]);
+      byType: creationsPayload.countByType,
+      isTotal: (creationsPayload.countByType.length > 1)
+    })
+  }, [creationsLoading, creationsPayload]);
+  const [creationsRendering, setCreationsRendering] = useState(creationsLoading);
+  useEffect(() => {
+    if (creationsLoading)
+      setCreationsRendering(true);
+  }, [creationsLoading]);
 
   const { previewCreation } = useCreations();
 
-  function defile() {
+  const creationsListStyle = useMemo(() => ({
+    height: creationsListHeights.current,
+    minHeight: creationsRendering ? chunkHeight : Math.min(chunkHeight, creationsListHeights.max),
+  }), [creationsListHeights, chunkHeight, creationsRendering]);
+
+  const lastPage = useMemo(() => (page * resPerPage >= creationCount?.total), [page, creationCount]);
+  function loadMore() {
+    const nextHeight = creationsListHeights.current + chunkHeight;
+    if ((nextHeight > creationsListHeights.max) && !lastPage) {
+      resetAbortController();
+      setPage(page + 1);
+    }
+    else {
+      setCreationsListHeights({
+        ...creationsListHeights,
+        current: Math.min(nextHeight, creationsListHeights.max)
+      });
+    }
   }
-  function masque() {
+  function showLess() {
+    setCreationsListHeights({
+      ...creationsListHeights,
+      current: creationsListHeights.current - chunkHeight
+    });
   }
   function reduceAll() {
-  }
-  function handleTabSelect(e) {
-    e.preventDefault();
+    setCreationsListHeights({
+      ...creationsListHeights,
+      current: chunkHeight
+    });
   }
   function scrollToTop(e) {
     e.preventDefault();
     window.scrollTo(0, 0);
   }
 
+  if (!creationsLoading)
+    console.log(creationsList[0]?.id);
+
   return (
     <ClassicPage title={(language ? 'All shared circuits' : 'Tous les circuits partagés') + " - Mario Kart PC"} className={styles.Creations} page="game">
       <Skeleton loading={user && !creator}>
@@ -89,23 +206,23 @@ const CreationsList: NextPage = () => {
           : <>Bienvenue dans la liste des circuits et arènes partagés par la communauté de Mario Kart PC !<br />
             Vous aussi, partagez les circuits que vous créez en cliquant sur "Partager le circuit" en bas à gauche de la page du circuit.</>
       )}</p>
-      <form method="get" action="/creations" id={styles["form-search"]}>
+      <form method="get" action="/creations" id={styles["form-search"]} onSubmit={handleSearch}>
         <div id={styles["sort-tabs"]}>
-          {sortTabs.map((sortTab, i) => {
-            return (i === nTri) ? <span key={sortTab}>{sortTab}</span> : <a key={sortTab} href="?" onClick={handleTabSelect}>{sortTab}</a>
+          {sortTabsData.map((sortTab, i) => {
+            return (i === nTri) ? <span key={sortTab.text}>{sortTab.text}</span> : <Link key={sortTab.text} href={sortTab.url}>{sortTab.text}</Link>
           })}
         </div>
         <div><strong>{language ? 'Creation type' : 'Type de création '}</strong>{": "}
-          <select name="type" defaultValue={type} onChange={(e) => e.target.form.submit()}>
-            <option value="">{language ? 'All creations' : 'Toutes les créations'}{" "}{creationCount && ' (' + creationCount.total + ')'}</option>
-            {types.map((iType, i) => <option key={iType} value={i}>{iType}{creationCount && ' (' + creationCount.byType[i] + ')'}</option>)}
+          <select name="type" defaultValue={type} onChange={(e) => doSubmit(router, e.target.form)}>
+            <option value="">{language ? 'All creations' : 'Toutes les créations'}{" "}{creationCount?.isTotal && ' (' + creationCount.total + ')'}</option>
+            {types.map((iType, i) => <option key={iType} value={i}>{iType}{creationCount?.isTotal && ' (' + creationCount.byType[i] + ')'}</option>)}
           </select></div>
         <div><strong>{language ? 'Search' : 'Recherche '}</strong>{": "}
           {admin && <input type="hidden" name="admin" value="1" />}
           <input type="hidden" name="user" defaultValue={user} />
           <input type="hidden" name="tri" id={styles.tri} defaultValue={tri} />
           <input type="text" name="nom" placeholder={language ? 'Name' : 'Nom'} defaultValue={nom} />{" "}
-          <input type="text" name="auteur" placeholder={language ? 'Author' : 'Auteur'} value={auteur} />{" "}
+          <input type="text" name="auteur" placeholder={language ? 'Author' : 'Auteur'} defaultValue={auteur} />{" "}
           <input type="submit" value="Ok" className={commonStyles.action_button} />
         </div>
       </form>
@@ -113,21 +230,27 @@ const CreationsList: NextPage = () => {
         <Ad width={728} height={90} bannerId="4919860724" />
       </div>
       <div id={styles.cTracks}>
-        <Skeleton loading={creationsLoading} className={styles.liste} id={styles.liste}>
-          {creationsPayload.data.map((creation) => <TrackCreationCard key={creation.id} creation={creation} onPreview={previewCreation} />)}
-        </Skeleton>
+        <div className={styles.liste} id={styles.liste} style={creationsListStyle}>
+          <Skeleton loading={creationsLoading && page <= 1} id={styles.creationsList}>
+            {creationsList.map((creation, i) => <TrackCreationCard key={`${i}-${creation.id}`} creation={creation} onPreview={previewCreation} />)}
+          </Skeleton>
+        </div>
       </div>
-      <p className={styles.subbuttons}>
-        <input type="button" id={styles.defiler} className={cx(styles.defiler, commonStyles.action_button)} value={language ? 'More' : 'Plus'} onClick={() => defile()} />{"   "}
-        <input type="button" id={styles.masquer} className={cx(styles.defiler, commonStyles.action_button)} value={language ? 'Less' : 'Moins'} style={{ visibility: "hidden" }} onClick={() => masque()} />{"   "}
-        <input type="button" id={styles.reduire} className={cx(styles.defiler, commonStyles.action_button)} value={language ? 'Minimize' : 'Réduire'} style={{ visibility: "hidden" }} onClick={() => reduceAll()} />
+      <p className={cx(styles.subbuttons, { [styles.invisible]: creationsRendering })}>
+        <input type="button" id={styles.defiler} className={cx(styles.defiler, commonStyles.action_button, { [styles.invisible]: ((creationsListHeights.current >= creationsListHeights.max) && lastPage) })} value={language ? 'More' : 'Plus'} onClick={() => loadMore()} />{"   "}
+        <input type="button" id={styles.masquer} className={cx(styles.defiler, commonStyles.action_button, { [styles.invisible]: chunkHeight >= creationsListHeights.current })} value={language ? 'Less' : 'Moins'} onClick={() => showLess()} />{"   "}
+        <input type="button" id={styles.reduire} className={cx(styles.defiler, commonStyles.action_button, { [styles.invisible]: chunkHeight >= creationsListHeights.current })} value={language ? 'Minimize' : 'Réduire'} onClick={() => reduceAll()} />
       </p>
 
+      {!creationsLoading && !creationsList.length && <h4>
+        {language ? 'No result for this search' : 'Aucun résultat pour cette recherche'}
+      </h4>}
+
       <p>
         <a className={styles.retour} href="#null" onClick={scrollToTop}>{language ? 'Back to top' : 'Retour haut de page'}</a>{" - "}
         <Link href="/"><a className={styles.retour}>{language ? 'Back to Mario Kart PC' : 'Retour à Mario Kart PC'}</a></Link>
       </p>
-    </ClassicPage >
+    </ClassicPage>
   );
 }
 
diff --git a/v2/app/styles/Creations.module.scss b/v2/app/styles/Creations.module.scss
index efdda158..b0337967 100644
--- a/v2/app/styles/Creations.module.scss
+++ b/v2/app/styles/Creations.module.scss
@@ -97,6 +97,9 @@
   }
   .subbuttons {
     margin-top: 12px;
+    &.invisible, .invisible {
+      visibility: hidden;
+    }
   }
   @media screen and (min-width: 880px) {
     h2, .subbuttons {
@@ -139,5 +142,16 @@
     margin-right: auto;
     text-align: center;
     line-height: 0;
+    height: 0px;
+    overflow-x: auto;
+    overflow-y: hidden;
+    transition: height 1s;
+  }
+  #creationsList {
+    display: block;
+  }
+  h4 {
+    text-align: center;
+    margin-top: 20px;
   }
 }
\ No newline at end of file
diff --git a/v2/php-api/endpoints/getCreations.php b/v2/php-api/endpoints/getCreations.php
index 0c54ce55..74eb2fe3 100644
--- a/v2/php-api/endpoints/getCreations.php
+++ b/v2/php-api/endpoints/getCreations.php
@@ -2,18 +2,17 @@
 include('../includes/initdb.php');
 require_once('../includes/creations.php');
 require_once('../includes/api.php');
-$tri = isset($_GET['tri']) ? $_GET['tri']:0;
-$type = isset($_GET['type']) ? $_GET['type']:'';
-$nom = isset($_GET['nom']) ? stripslashes($_GET['nom']):'';
-$auteur = isset($_GET['auteur']) ? stripslashes($_GET['auteur']):'';
+$tri = isset($_GET['tri']) && is_numeric($_GET['tri']) ? $_GET['tri'] : 0;
+$type = isset($_GET['type']) ? $_GET['type'] : '';
+$nom = isset($_GET['nom']) ? stripslashes($_GET['nom']) : '';
+$auteur = isset($_GET['auteur']) ? stripslashes($_GET['auteur']) : '';
 $pids = null;
 if (isset($_GET['user'])) {
-	$user = $_GET['user'];
-	if ($getProfile = mysql_fetch_array(mysql_query('SELECT identifiant,identifiant2,identifiant3,identifiant4 FROM `mkprofiles` WHERE id="'. $user .'"')))
-		$pids = array($getProfile['identifiant'],$getProfile['identifiant2'],$getProfile['identifiant3'],$getProfile['identifiant4']);
-}
-else
-	$user = '';
+    $user = $_GET['user'];
+    if ($getProfile = mysql_fetch_array(mysql_query('SELECT identifiant,identifiant2,identifiant3,identifiant4 FROM `mkprofiles` WHERE id="' . $user . '"')))
+        $pids = array($getProfile['identifiant'], $getProfile['identifiant2'], $getProfile['identifiant3'], $getProfile['identifiant4']);
+} else
+    $user = '';
 $singleType = ($type !== '');
 if ($singleType) {
     $aCircuits = array($aCircuits[$type]);
@@ -28,22 +27,22 @@
 if ($nbCircuits > $MAX_CIRCUITS)
     $nbCircuits = $MAX_CIRCUITS;
 $aParams = array(
-	'type' => $type,
-	'tri' => $tri,
-	'nom' => $nom,
-	'auteur' => $auteur,
-	'pids' => $pids,
-	'max_circuits' => $nbCircuits,
+    'type' => $type,
+    'tri' => $tri,
+    'nom' => $nom,
+    'auteur' => $auteur,
+    'pids' => $pids,
+    'max_circuits' => $nbCircuits,
 );
-$page = isset($_GET['page']) ? $_GET['page']:1;
+$page = isset($_GET['page']) ? $_GET['page'] : 1;
 if ($nbByType === null)
-    $nbByType = countTracksByType($aCircuits,$aParams);
-$creationsList = listCreations($page,$nbByType,$weightsByType,$aCircuits,$aParams);
+    $nbByType = countTracksByType($aCircuits, $aParams);
+$creationsList = listCreations($page, $nbByType, $weightsByType, $aCircuits, $aParams);
 $data = array();
 foreach ($creationsList as &$creation) {
     $item = array(
         'id' => isset($creation['id']) ? +$creation['id'] : +$creation['ID'],
-        'publicationDate' => strtotime($creation['publication_date'])*1000,
+        'publicationDate' => strtotime($creation['publication_date']) * 1000,
         'name' => $creation['nom'],
         'author' => $creation['auteur'],
         'rating' => +$creation['note'],