diff --git a/src/routes/items.scss b/src/app/items/page.scss
similarity index 100%
rename from src/routes/items.scss
rename to src/app/items/page.scss
diff --git a/src/routes/items.tsx b/src/app/items/page.tsx
similarity index 68%
rename from src/routes/items.tsx
rename to src/app/items/page.tsx
index 029a58f..82e2b7c 100644
--- a/src/routes/items.tsx
+++ b/src/app/items/page.tsx
@@ -1,19 +1,20 @@
-import React, { useState } from 'react';
-
-import './items.scss';
-import Navbar from '../components/navbar';
-import Switch from '../components/switch';
-import { useSelector } from 'react-redux';
-import { Category as CategoryType, IBuyable, State } from '../types';
-import FontAwesome from 'react-fontawesome';
-import { formatPrice } from '@/utils/format';
-import { toggleAvailable } from '@/utils/items';
+"use client";
+import React, { useState } from "react";
+import "../page.scss";
+import "./page.scss";
+import Navbar from "../../components/navbar";
+import Switch from "../../components/switch";
+import { useSelector } from "react-redux";
+import { Category as CategoryType, IBuyable, State } from "../../types";
+import FontAwesome from "react-fontawesome";
+import { formatPrice } from "@/utils/format";
+import { toggleAvailable } from "@/utils/items";
 
 const Item = ({ item }: { item: IBuyable }) => {
   return (
     <div
-      className={'supplements' in item ? 'item' : 'item supplement'}
-      onClick={() => toggleAvailable('supplements' in item ? item.id : `S${item.id}`)}>
+      className={"supplements" in item ? "item" : "item supplement"}
+      onClick={() => toggleAvailable("supplements" in item ? item.id : `S${item.id}`)}>
       <div className="left-side">
         <Switch on={item.available} />
         <span>{item.name}</span>
@@ -31,7 +32,7 @@ const Category = ({ category }: { category: CategoryType }) => {
   return (
     <div className="category">
       <div className="title" onClick={() => setOpen(!isOpen)}>
-        <FontAwesome name={`chevron-right ${isOpen ? 'open' : ''}`} className="icon" />
+        <FontAwesome name={`chevron-right ${isOpen ? "open" : ""}`} className="icon" />
         {category.name}
       </div>
       {isOpen && (
@@ -39,7 +40,7 @@ const Category = ({ category }: { category: CategoryType }) => {
           {category.items.map((item, itemIndex) =>
             [item, ...item.supplements].map((entry, entryIndex) => (
               <Item item={entry} key={`${itemIndex}-${entryIndex}`} />
-            )),
+            ))
           )}
         </div>
       )}
@@ -52,7 +53,7 @@ export const itemsAvailable = (categories: Array<CategoryType>) =>
     return acc + curr.items.filter((item) => item.available).length;
   }, 0);
 
-const Items = () => {
+const Page = () => {
   const categories = useSelector((state: State) => state.categories);
 
   return (
@@ -70,4 +71,4 @@ const Items = () => {
   );
 };
 
-export default Items;
+export default Page;
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 7d922af..cda81d4 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,32 +1,32 @@
-import StoreProvider from '@/store';
-import React from 'react';
-import { Flip, ToastContainer } from 'react-toastify';
-import '../../public/fontawesome/css/all.min.css';
+import StoreProvider from "@/store";
+import React from "react";
+import { Flip, ToastContainer } from "react-toastify";
+import "../../public/fontawesome/css/all.min.css";
 
 export const metadata = {
-  charset: 'utf-8',
-  title: 'TurboBouffe',
+  charset: "utf-8",
+  title: "TurboBouffe",
   description: "Site de gestion de la bouffe de l'UA",
   icons: {
-    icon: '/favicon.ico',
-    apple: '/logo192.png',
+    icon: "/favicon.ico",
+    apple: "/logo192.png"
   },
-  themeColor: '#fb560c',
-  manifest: '/manifest.json',
+  themeColor: "#fb560c",
+  manifest: "/manifest.json",
   viewport: {
-    width: 'device-width',
-    initialScale: 1,
-  },
+    width: "device-width",
+    initialScale: 1
+  }
 };
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="fr">
-      <body>
-        <noscript>You need to enable JavaScript to run this app.</noscript>
-        <StoreProvider>{children}</StoreProvider>
-        <ToastContainer autoClose={3000} transition={Flip} hideProgressBar={true} pauseOnHover={true} />
-      </body>
+    <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <StoreProvider>{children}</StoreProvider>
+    <ToastContainer autoClose={3000} transition={Flip} hideProgressBar={true} pauseOnHover={true} />
+    </body>
     </html>
   );
 }
diff --git a/src/routes/login.scss b/src/app/login/page.scss
similarity index 100%
rename from src/routes/login.scss
rename to src/app/login/page.scss
diff --git a/src/routes/login.tsx b/src/app/login/page.tsx
similarity index 61%
rename from src/routes/login.tsx
rename to src/app/login/page.tsx
index f006803..b5c2b7b 100644
--- a/src/routes/login.tsx
+++ b/src/app/login/page.tsx
@@ -1,21 +1,22 @@
-import React, { ReactNode, useState } from 'react';
-
-import './login.scss';
-import { useDispatch } from 'react-redux';
-import { tryLogin } from '@/reducers/login';
-import FontAwesome from 'react-fontawesome';
-import { Action } from '@/types';
-
-const Login = () => {
+"use client";
+import React, { ReactNode, useState } from "react";
+import "../page.scss";
+import "./page.scss";
+import { useDispatch } from "react-redux";
+import { tryLogin } from "@/reducers/login";
+import FontAwesome from "react-fontawesome";
+import { Action } from "@/types";
+
+const Page = () => {
   const digits = [
-    ['1', '2', '3'],
-    ['4', '5', '6'],
-    ['7', '8', '9'],
-    [<FontAwesome key="backspace" name="backspace" />, '0', <FontAwesome key="check" name="check" />],
+    ["1", "2", "3"],
+    ["4", "5", "6"],
+    ["7", "8", "9"],
+    [<FontAwesome key="backspace" name="backspace" />, "0", <FontAwesome key="check" name="check" />]
   ];
 
   const dispatch = useDispatch();
-  const [pin, setPin] = useState('');
+  const [pin, setPin] = useState("");
 
   const onClick = async (digit: string | ReactNode) => {
     switch (digit) {
@@ -25,7 +26,7 @@ const Login = () => {
 
       case digits[3][2]:
         dispatch(tryLogin(pin) as unknown as Action);
-        setPin('');
+        setPin("");
         break;
 
       default:
@@ -39,7 +40,7 @@ const Login = () => {
         <span className="title" onClick={() => window.location.reload()}>
           TurboBouffe
         </span>
-        <div className="field">{pin.replace(/./g, '•')}</div>
+        <div className="field">{pin.replace(/./g, "•")}</div>
         <div className="digits">
           {digits.map((digitsRow, index) => (
             <div className="digits-row" key={index}>
@@ -56,4 +57,4 @@ const Login = () => {
   );
 };
 
-export default Login;
+export default Page;
diff --git a/src/app/page.scss b/src/app/page.scss
index b1ab475..7cfa8a3 100644
--- a/src/app/page.scss
+++ b/src/app/page.scss
@@ -36,3 +36,34 @@ body {
   width: 0; /* Remove scrollbar space */
   background: transparent; /* Optional: just make scrollbar invisible */
 }
+.logout {
+  padding-right: 14px;
+}
+
+#index {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  flex-wrap: wrap;
+  align-items: stretch;
+  height: calc(100% - 50px);
+  font-size: 3em;
+
+  div {
+    height: calc(33% - 20px - 4px);
+    width: calc(50% - 20px - 4px - 20px);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: var(--primary);
+    margin: 10px;
+
+    .fa {
+      margin-right: 15px;
+    }
+
+    &:hover {
+      filter: brightness(0.9);
+    }
+  }
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 45f5681..7aaee35 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,16 +1,16 @@
-'use client';
-import React from 'react';
-import 'react-toastify/dist/ReactToastify.css';
-import 'moment/locale/fr';
-import './page.scss';
-import moment from 'moment';
-import { useDispatch } from 'react-redux';
-import Navbar from '@/components/navbar';
-import FontAwesome from 'react-fontawesome';
-import { logout } from '@/reducers/login';
-import { Action } from 'redux';
+"use client";
+import React from "react";
+import "react-toastify/dist/ReactToastify.css";
+import "moment/locale/fr";
+import "./page.scss";
+import moment from "moment";
+import { useDispatch } from "react-redux";
+import Navbar from "@/components/navbar";
+import FontAwesome from "react-fontawesome";
+import { logout } from "@/reducers/login";
+import { Action } from "redux";
 
-moment.locale('fr');
+moment.locale("fr");
 
 const App = () => {
   const dispatch = useDispatch();
diff --git a/src/routes/preparation.scss b/src/app/preparation/page.scss
similarity index 100%
rename from src/routes/preparation.scss
rename to src/app/preparation/page.scss
diff --git a/src/routes/preparation.tsx b/src/app/preparation/page.tsx
similarity index 77%
rename from src/routes/preparation.tsx
rename to src/app/preparation/page.tsx
index 2dc908c..4a10a9c 100644
--- a/src/routes/preparation.tsx
+++ b/src/app/preparation/page.tsx
@@ -1,27 +1,26 @@
-import React, { useEffect, useState } from 'react';
+"use client";
+import React, { useEffect, useState } from "react";
+import "../page.scss";
+import "./page.scss";
+import Navbar from "../../components/navbar";
+import moment from "moment";
+import FontAwesome from "react-fontawesome";
+import { useSelector } from "react-redux";
+import { Order, State, Status } from "@/types";
+import { downgradeOrder, upgradeOrder } from "@/utils/orders";
+import Modal from "../../components/modals/modal";
+import Loader from "../../components/loader";
+import Separator from "../../components/UI/separator";
+import { useSearchParams } from "next/navigation";
 
-import './preparation.scss';
-import Navbar from '../components/navbar';
-import moment from 'moment';
-import FontAwesome from 'react-fontawesome';
-import { useSelector } from 'react-redux';
-import { Order, State, Status } from '@/types';
-import { downgradeOrder, upgradeOrder } from '@/utils/orders';
-import { useLocation } from 'react-router';
-import queryString from 'query-string';
-import Modal from '../components/modals/modal';
-import Loader from '../components/loader';
-import Separator from '../components/UI/separator';
-
-const Preparation = () => {
-  const location = useLocation();
-  const queryParams = queryString.parse(location.search);
+const Page = () => {
+  const searchParams = useSearchParams();
   let orders = useSelector((state: State) => state.orders);
 
   // Renvoie les commandes contenant au moins un item dans la catégory du paramètre
-  if (queryParams.only) {
+  if (searchParams.has("only")) {
     orders = orders.filter((order) =>
-      order.orderItems.some((orderItem) => orderItem.item.category.key === queryParams.only),
+      order.orderItems.some((orderItem) => orderItem.item.category.key == searchParams.get("only"))
     );
   }
 
@@ -58,7 +57,8 @@ const Preparation = () => {
             setDowngradeMode(false);
             await downgradeOrder(order);
           }
-        } catch (e) {}
+        } catch (e) {
+        }
         setLoading(null);
         setConfirmOrder(null);
       }
@@ -79,7 +79,7 @@ const Preparation = () => {
                 <li key={index}>
                   {orderItem.item.name}
                   <div className="options">
-                    {orderItem.supplements.map((orderSuppl) => orderSuppl.supplement.name).join(', ')}
+                    {orderItem.supplements.map((orderSuppl) => orderSuppl.supplement.name).join(", ")}
                   </div>
                 </li>
               ))}
@@ -89,7 +89,7 @@ const Preparation = () => {
                 <Loader />
               </div>
             ) : (
-              <div className={`next ${downgradeMode ? 'downgrade' : ''}`} onClick={() => editOrder(order)}>
+              <div className={`next ${downgradeMode ? "downgrade" : ""}`} onClick={() => editOrder(order)}>
                 <FontAwesome name="arrow-right" />
               </div>
             )}
@@ -104,8 +104,8 @@ const Preparation = () => {
       <Navbar back="/">
         <div
           onClick={() => setDowngradeMode(!downgradeMode)}
-          className={`preparation-mode-button ${downgradeMode ? 'downgrade' : ''}`}>
-          {!downgradeMode ? 'Aller en arrière' : 'Aller en avant'}
+          className={`preparation-mode-button ${downgradeMode ? "downgrade" : ""}`}>
+          {!downgradeMode ? "Aller en arrière" : "Aller en avant"}
         </div>
       </Navbar>
       <div id="preparation">
@@ -132,7 +132,7 @@ const Preparation = () => {
         )}
         <div className="actions">
           <div className="button cancel" onClick={() => setConfirmOrder(null)}>
-            {loading ? <Loader /> : 'Annuler'}
+            {loading ? <Loader /> : "Annuler"}
           </div>
           <div
             className="button confirm"
@@ -140,7 +140,7 @@ const Preparation = () => {
               await editOrder(confirmOrder, true);
               setConfirmOrder(null);
             }}>
-            {loading ? <Loader /> : 'Confirmer'}
+            {loading ? <Loader /> : "Confirmer"}
           </div>
         </div>
       </Modal>
@@ -148,4 +148,4 @@ const Preparation = () => {
   );
 };
 
-export default Preparation;
+export default Page;
diff --git a/src/routes/sell.scss b/src/app/sell/page.scss
similarity index 100%
rename from src/routes/sell.scss
rename to src/app/sell/page.scss
diff --git a/src/app/sell/page.tsx b/src/app/sell/page.tsx
new file mode 100644
index 0000000..da0c90d
--- /dev/null
+++ b/src/app/sell/page.tsx
@@ -0,0 +1,57 @@
+"use client";
+import "../page.scss";
+import "./page.scss";
+import React from "react";
+//import queryString from "query-string";
+import ItemsGrid from "../../components/itemsGrid";
+import Navbar from "../../components/navbar";
+import PriceToogler from "../../components/priceToogler";
+import Basket from "../../components/basket";
+import { useDispatch, useSelector } from "react-redux";
+import { clearBasket } from "@/reducers/basket";
+import { State } from "@/types";
+import { setNormalPrice } from "@/reducers/orgaPrice";
+import { useSearchParams } from "next/navigation";
+//import Categories from "@/reducers/categories";
+
+/**
+ * /sell
+ *
+ * Query params: ?only=(food|goodies)
+ */
+
+const Page = () => {
+  const searchParams = useSearchParams();
+  const dispatch = useDispatch();
+  let categories = useSelector((state: State) => state.categories);
+
+  if (searchParams.has("only")) { //TODO check change
+    categories = categories.filter((category) => category.key == searchParams.get("only"));
+  } else if (searchParams.has("except")) {
+    categories = categories.filter((category) => category.key !== searchParams.get("except"));
+  }
+
+  categories = categories.map((category) => ({
+    ...category,
+    items: category.items.filter((item) => item.available)
+  }));
+
+  const onBack = () => {
+    dispatch(clearBasket());
+    dispatch(setNormalPrice());
+  };
+
+  return (
+    <>
+      <Navbar back="/" onBack={() => onBack()}>
+        <PriceToogler />
+      </Navbar>
+      <div id="sell">
+        <Basket />
+        <ItemsGrid categories={categories} />
+      </div>
+    </>
+  );
+};
+
+export default Page;
diff --git a/src/routes/tv.scss b/src/app/tv/page.scss
similarity index 100%
rename from src/routes/tv.scss
rename to src/app/tv/page.scss
diff --git a/src/routes/tv.tsx b/src/app/tv/page.tsx
similarity index 86%
rename from src/routes/tv.tsx
rename to src/app/tv/page.tsx
index 6b45825..fbe03d7 100644
--- a/src/routes/tv.tsx
+++ b/src/app/tv/page.tsx
@@ -1,11 +1,12 @@
-import React, { LegacyRef, useEffect, useRef, useState } from 'react';
+"use client";
+import React, { LegacyRef, useEffect, useRef, useState } from "react";
+import "../page.scss";
+import "./page.scss";
+import { useSelector } from "react-redux";
 
-import './tv.scss';
-import { useSelector } from 'react-redux';
-
-import { Order as OrderType, OrderItem, State, Status } from '../types';
-import Separator from '../components/UI/separator';
-import { useRouter } from 'next/navigation';
+import { Order as OrderType, OrderItem, State, Status } from "../../types";
+import Separator from "../../components/UI/separator";
+import { useRouter } from "next/navigation";
 
 interface GroupedCategory {
   name: string;
@@ -21,7 +22,7 @@ const groupOrderItems = (items: Array<OrderItem>) => {
     } else {
       acc.push({
         name: curr.item.category.name,
-        count: 1,
+        count: 1
       });
     }
 
@@ -31,7 +32,7 @@ const groupOrderItems = (items: Array<OrderItem>) => {
 
 // Takes plural in account
 const formatName = (name: string, count: number) => {
-  if (name.endsWith('s') && count === 1) return name.slice(0, -1);
+  if (name.endsWith("s") && count === 1) return name.slice(0, -1);
 
   return name;
 };
@@ -66,7 +67,7 @@ const OrderGrid = ({ orders, passingRef }: { orders: Array<OrderType>; passingRe
   );
 };
 
-const Tv = () => {
+const Page = () => {
   const orders = useSelector((state: State) => state.orders);
 
   const pendingOrders = orders.filter((order) => order.status === Status.PENDING);
@@ -110,7 +111,7 @@ const Tv = () => {
   });
 
   return (
-    <div id="tv" onClick={() => router.push('/')}>
+    <div id="tv" onClick={() => router.push("/")}>
       <div className="orders">
         <div className="title">En attente</div>
         <OrderGrid orders={pendingOrders} passingRef={(el) => (refs.current[0] = el)} />
@@ -129,4 +130,4 @@ const Tv = () => {
   );
 };
 
-export default Tv;
+export default Page;
diff --git a/src/components/loginRouter.tsx b/src/components/loginRouter.tsx
index 3be60e2..2cd306c 100644
--- a/src/components/loginRouter.tsx
+++ b/src/components/loginRouter.tsx
@@ -1,6 +1,6 @@
 import React, { ReactNode, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import Login from '../routes/login';
+import Page from '../app/login/page';
 import { autoLogin } from '@/reducers/login';
 import { State } from '@/types';
 import Loader from './pageLoader';
@@ -28,7 +28,7 @@ const LoginRouter = ({ children }: { children: ReactNode }) => {
 
   if (state.login.loading) return <Loader />;
 
-  if (!state.login.token) return <Login />;
+  if (!state.login.token) return <Page />;
 
   return { children };
 };
diff --git a/src/routes/index.scss b/src/routes/index.scss
deleted file mode 100644
index 5bd05f2..0000000
--- a/src/routes/index.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-.logout {
-  padding-right: 14px;
-}
-
-#index {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  flex-wrap: wrap;
-  align-items: stretch;
-  height: calc(100% - 50px);
-  font-size: 3em;
-
-  div {
-    height: calc(33% - 20px - 4px);
-    width: calc(50% - 20px - 4px - 20px);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background-color: var(--primary);
-    margin: 10px;
-
-    .fa {
-      margin-right: 15px;
-    }
-
-    &:hover {
-      filter: brightness(0.9);
-    }
-  }
-}
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
deleted file mode 100644
index e69de29..0000000
diff --git a/src/routes/sell.tsx b/src/routes/sell.tsx
deleted file mode 100644
index b8e4073..0000000
--- a/src/routes/sell.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import './sell.scss';
-import React from 'react';
-import { useLocation } from 'react-router';
-import queryString from 'query-string';
-import ItemsGrid from '../components/itemsGrid';
-import Navbar from '../components/navbar';
-import PriceToogler from '../components/priceToogler';
-import Basket from '../components/basket';
-import { useDispatch, useSelector } from 'react-redux';
-import { clearBasket } from '@/reducers/basket';
-import { State } from '@/types';
-import { setNormalPrice } from '@/reducers/orgaPrice';
-
-/**
- * /sell
- *
- * Query params: ?only=(food|goodies)
- */
-
-const Sell = () => {
-  const dispatch = useDispatch();
-  const location = useLocation();
-  let categories = useSelector((state: State) => state.categories);
-  const queryParams = queryString.parse(location.search);
-
-  if (queryParams.only) {
-    categories = categories.filter((category) => category.key === queryParams.only);
-  } else if (queryParams.except) {
-    categories = categories.filter((category) => category.key !== queryParams.except);
-  }
-
-  categories = categories.map((category) => ({
-    ...category,
-    items: category.items.filter((item) => item.available),
-  }));
-
-  const onBack = () => {
-    dispatch(clearBasket());
-    dispatch(setNormalPrice());
-  };
-
-  return (
-    <>
-      <Navbar back="/" onBack={() => onBack()}>
-        <PriceToogler />
-      </Navbar>
-      <div id="sell">
-        <Basket />
-        <ItemsGrid categories={categories} />
-      </div>
-    </>
-  );
-};
-
-export default Sell;