diff --git a/web/src/comps/WindowElem.tsx b/web/src/comps/WindowElem.tsx
index 9764ff8..14eb384 100644
--- a/web/src/comps/WindowElem.tsx
+++ b/web/src/comps/WindowElem.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 
-export default function WindowElem(props: { title: React.ReactNode, children: React.ReactNode }) {
-    return <div className={"flex flex-col h-full border-gray-100 border shadow rounded-t-2xl"}>
+export default function WindowElem(props: { title: React.ReactNode, className?: string,  children: React.ReactNode }) {
+    return <div className={"flex flex-col h-full border-gray-100 border shadow rounded-t-2xl " + (props.className ? props.className : "")}>
         <div className={"p-2 border-b border-gray-100 bg-gray-50 rounded-t-2xl"}>
             <h2 className={"font-bold text-gray-800"}>{props.title}</h2>
         </div>
diff --git a/web/src/pages/SyncPage.tsx b/web/src/pages/SyncPage.tsx
index ffd6899..689cd52 100644
--- a/web/src/pages/SyncPage.tsx
+++ b/web/src/pages/SyncPage.tsx
@@ -11,54 +11,62 @@ export default function SyncPage(): React.ReactElement {
     useEffect(() => {
         getCalendarToken().then((token: string) => {
             setToken(token);
-        }).catch(() => {});
+        }).catch(() => {
+        });
     }, []);
 
     if (token === null)
         return <div>Loading...</div>
 
     return (
-        <div className={"flex flex-row gap-4"}>
-            <WindowElem title={<h1 className={"text-2xl"}>Use an internal scraper</h1>}>
-                <div className={"p-3"}>
-                    <h2 className={"font-bold"}>How it's works ?</h2>
-                    <p className={"text-gray-500"}>You provide a Microsoft session cookie below. It will stored on a
-                        private and secured database with encryptation methods. There are multiple scrapers services,
-                        and your Intra & MyEpitech data will be scraper by one of they. Recommanded if you can't host
-                        your own scraper.</p>
+        <div className="flex flex-row flex-wrap gap-4">
+            <WindowElem
+                className={"sm:w-[48%] min-w-60 "}
+                title={<h1 className="text-2xl">Use an internal scraper</h1>}
+            >
+                <div className="p-3">
+                    <h2 className="font-bold">How it's works ?</h2>
+                    <p className="text-gray-500">
+                        You provide a Microsoft session cookie below. It will be stored on a
+                        private and secured database with encryption methods. There are multiple
+                        scraper services, and your Intra & MyEpitech data will be scraped by one
+                        of them. Recommended if you can't host your own scraper.
+                    </p>
 
                     <p>
-                        <span className={"font-bold text-red-500"}>Warning:</span> This service is not affiliated with
-                        Epitech, and
-                        the
-                        data is stored on a private server. Use it at your own risk.
+                        <span className="font-bold text-red-500">Warning:</span> This service is
+                        not affiliated with Epitech, and the data is stored on a private server.
+                        Use it at your own risk.
                     </p>
                     <p>
-                        <span className={"font-bold text-blue-500"}>How can i get my Microsoft cookie ?</span>
+                        <span className="font-bold text-blue-500">How can I get my Microsoft cookie?</span>
                         You can follow
                         <a
-                            href={"https://github.com/EliotAmn/tekbetter-server/blob/main/HOW_TO_GET_COOKIES.md"}
-                            className={"text-blue-500 mx-1"}
-                            target={"_blank"}
+                            href="https://github.com/EliotAmn/tekbetter-server/blob/main/HOW_TO_GET_COOKIES.md"
+                            className="text-blue-500 mx-1"
+                            target="_blank"
                         >
-                            this guide</a> to get
-                        your Microsoft session cookie.
+                            this guide
+                        </a>{" "}
+                        to get your Microsoft session cookie.
                     </p>
 
-
-                    <BasicBox className={"p-4 flex flex-row items-center gap-2"}>
-                        <div>
-                            <h3 className={"font-bold text-gray-700"}>Update your microsoft cookie</h3>
-                            <p>If you have changed your Microsoft password, or the token is expired, you need to re
-                                enter it
-                                below.</p>
-                            <input value={microToken || ""} type={"text"}
-                                   className={"w-full p-2 border-gray-300 border rounded"}
-                                   placeholder={"Paste your Microsoft session cookie here"}
-                                   onChange={(e) => setMicroToken(e.target.value)}
+                    <BasicBox className="p-4 flex flex-wrap items-start gap-2">
+                        <div className="flex-1 min-w-[calc(50%-0.5rem)] sm:min-w-[50%]">
+                            <h3 className="font-bold text-gray-700">Update your Microsoft cookie</h3>
+                            <p>
+                                If you have changed your Microsoft password, or the token is
+                                expired, you need to re-enter it below.
+                            </p>
+                            <input
+                                value={microToken || ""}
+                                type="text"
+                                className="w-full p-2 border-gray-300 border rounded"
+                                placeholder="Paste your Microsoft session cookie here"
+                                onChange={(e) => setMicroToken(e.target.value)}
                             />
                             <button
-                                className={"mt-2 h-8 bg-blue-500 text-white px-2 rounded"}
+                                className="mt-2 h-8 bg-blue-500 text-white px-2 rounded"
                                 onClick={() => {
                                     putMicrosoftToken(microToken!).then(() => setMicroToken(""));
                                 }}
@@ -66,66 +74,81 @@ export default function SyncPage(): React.ReactElement {
                                 Update
                             </button>
                         </div>
-                        <div>
-                            <h3 className={"font-bold text-gray-700"}>Disable the internal scraper mode</h3>
-                            <p>If you want to stop the scraper, you can disable it here. Your token will be deleted from
-                                the
-                                database.</p>
-                            <button className={"mt-2 h-8 bg-red-500 text-white px-2 rounded"}
-                                    onClick={() => {
-                                        if (window.confirm("Are you sure ? Your token will be deleted.")) deleteMicrosoftToken().then(null).catch(() => {});
-                                    }}
+                        <div className="flex-1 min-w-[calc(50%-0.5rem)] sm:min-w-[50%]">
+                            <h3 className="font-bold text-gray-700">Disable the internal scraper mode</h3>
+                            <p>
+                                If you want to stop the scraper, you can disable it here. Your
+                                token will be deleted from the database.
+                            </p>
+                            <button
+                                className="mt-2 h-8 bg-red-500 text-white px-2 rounded"
+                                onClick={() => {
+                                    if (window.confirm("Are you sure ? Your token will be deleted.")) {
+                                        deleteMicrosoftToken().then(null).catch(() => {
+                                        });
+                                    }
+                                }}
                             >
                                 Delete my token
                             </button>
                         </div>
-
                     </BasicBox>
-
-
                 </div>
-
             </WindowElem>
 
-
-            <WindowElem title={<h1 className={"text-2xl"}>Host your own scraper</h1>}>
-                <div className={"p-3 flex flex-col"}>
-                    <h2 className={"font-bold"}>How it works ?</h2>
-                    <p className={"text-gray-500 text-justify"}>
-                        The tekbetter data scraper is open-source. You can install on your own
-                        server, and use it to get your data.
-                        For authentication, you need to provide a token on the scraper configuration, to authorize it to
-                        push your data to your account.
+            <WindowElem
+                className="w-full sm:w-[48%] lg:w-1/2"
+                title={<h1 className="text-2xl">Host your own scraper</h1>}
+            >
+                <div className="p-3 flex flex-col">
+                    <h2 className="font-bold">How it works ?</h2>
+                    <p className="text-gray-500 text-justify">
+                        The tekbetter data scraper is open-source. You can install it on your own
+                        server, and use it to get your data. For authentication, you need to
+                        provide a token on the scraper configuration, to authorize it to push
+                        your data to your account.
                     </p>
 
+                    <h3 className="font-bold text-gray-700">Install the scraper: </h3>
+                    <a
+                        href="https://github.com/EliotAmn/tekbetter-scraper"
+                        target="_blank"
+                        className="text-blue-500"
+                    >
+                        Github repository
+                    </a>
 
-                    <h3 className={"font-bold text-gray-700"}>Install the scraper: </h3>
-                    <a href={"https://github.com/EliotAmn/tekbetter-scraper"} target={"_blank"}
-                       className={"text-blue-500"}>Github repository</a>
+                    <h3 className="font-bold text-gray-700">Your upload token: </h3>
+                    <code className="bg-gray-100 p-2 rounded">{token}</code>
 
-                    <h3 className={"font-bold text-gray-700"}>Your upload token: </h3>
-                    <code className={"bg-gray-100 p-2 rounded"}>{token}</code>
-
-                    <h3 className={"font-bold text-gray-700"}>This is the api url you need to use on the scraper config: </h3>
-                    <code className={"bg-gray-100 p-2 rounded"}>{document.location.origin}</code>
+                    <h3 className="font-bold text-gray-700">
+                        This is the API URL you need to use in the scraper config:
+                    </h3>
+                    <code className="bg-gray-100 p-2 rounded">{document.location.origin}</code>
 
                     <button
-                        className={"mt-2 h-8 bg-red-500 text-white px-2 rounded"}
+                        className="mt-2 h-8 bg-red-500 text-white px-2 rounded"
                         onClick={() => {
-                            if (window.confirm("Are you sure ? Your token will be regenerated. This token is used for scrapers and the calendar export urls.")) {
-                                regenCalendarToken().then((token) => {
-                                    setToken(token);
-                                }).catch(() => {});
+                            if (
+                                window.confirm(
+                                    "Are you sure ? Your token will be regenerated. This token is used for scrapers and the calendar export urls."
+                                )
+                            ) {
+                                regenCalendarToken()
+                                    .then((token) => {
+                                        setToken(token);
+                                    })
+                                    .catch(() => {
+                                    });
                             }
                         }}
-                    >Reload my token
+                    >
+                        Reload my token
                     </button>
-
-
                 </div>
-
             </WindowElem>
         </div>
 
+
     );
 }
\ No newline at end of file