diff --git a/README.md b/README.md
index 55a766c..bc18ae5 100644
--- a/README.md
+++ b/README.md
@@ -9,8 +9,8 @@ The project is entirely managed by students, it is not affiliated with Politecni
 
 - This repo contains the source code of the web app hosted at [tol.polinetwork.org](https://tol.polinetwork.org/).  
   This is supposed to be the main repo, and any issue or discussion should be opened here.  
-  This repo hosts a GitHub Pages website too, but it only redirects to the actual one.
-- The [website repo](https://github.com/thetolproject/thetolproject.github.io) only contains a build that is automatically generated by the [`deploy` workflow](https://github.com/PoliNetworkOrg/TheTOLProject/blob/main/.github/workflows/deploy.yml).  
+  This repo hosts a [GitHub Pages website](https://polinetworkorg.github.io/TheTOLProject/) too, which is the development build from the [`main`](https://github.com/PoliNetworkOrg/TheTOLProject/tree/main) branch, automatically generated by the [`deploy` workflow](https://github.com/PoliNetworkOrg/TheTOLProject/blob/main/.github/workflows/deploy.yml).
+- The [website repo](https://github.com/thetolproject/thetolproject.github.io) only contains the production build from the [`stable`](https://github.com/PoliNetworkOrg/TheTOLProject/tree/stable) branch, automatically generated by the [`deploy` workflow](https://github.com/PoliNetworkOrg/TheTOLProject/blob/main/.github/workflows/deploy.yml).  
   Any issue and/or proposal related to the website should be submitted to this repository.
 - The [database repo](https://github.com/PoliNetworkOrg/TheTOLProjectData) that only hosts the compiled database.  
   As with the website repo, any issue with the database should be reported here.
diff --git a/package-lock.json b/package-lock.json
index 3293adc..6045a8b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "the-tol-project",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "the-tol-project",
-      "version": "1.0.0",
+      "version": "1.1.0",
       "devDependencies": {
         "@panelbear/panelbear-js": "^1.3.2",
         "@types/google-spreadsheet": "^3.1.5",
@@ -36,6 +36,7 @@
         "react-dom": "^17.0.2",
         "react-icons": "^4.3.1",
         "react-latex": "^2.0.0",
+        "react-ribbons": "github:EndBug/react-ribbons#custom",
         "react-router-dom": "^6.0.2",
         "react-scripts": "4.0.3",
         "react-timer-hook": "^3.0.5",
@@ -4262,7 +4263,7 @@
       }
     },
     "node_modules/async": {
-      "version": "2.6.3",
+      "version": "2.6.4",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -5056,6 +5057,16 @@
         "node": ">=8"
       }
     },
+    "node_modules/bindings": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
+      "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "file-uri-to-path": "1.0.0"
+      }
+    },
     "node_modules/bluebird": {
       "version": "3.7.2",
       "dev": true,
@@ -8979,6 +8990,13 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/file-uri-to-path": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
+      "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
+      "dev": true,
+      "optional": true
+    },
     "node_modules/filename-reserved-regex": {
       "version": "2.0.0",
       "dev": true,
@@ -9456,6 +9474,20 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
     "node_modules/function-bind": {
       "version": "1.1.1",
       "dev": true,
@@ -14322,6 +14354,13 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/nan": {
+      "version": "2.15.0",
+      "resolved": "https://registry.npmjs.org/nan/-/nan-2.15.0.tgz",
+      "integrity": "sha512-8ZtvEnA2c5aYCZYd1cvgdnU6cqwixRoYg70xPLWUws5ORTa/lnw+u4amixRS/Ac5U5mQVgp9pnlSUnbNWFaWZQ==",
+      "dev": true,
+      "optional": true
+    },
     "node_modules/nanoid": {
       "version": "3.3.0",
       "dev": true,
@@ -17245,6 +17284,17 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-ribbons": {
+      "version": "1.0.6",
+      "resolved": "git+ssh://git@github.com/EndBug/react-ribbons.git#3eb618f0042b4557f9fdbb918c388a8e254f9f7f",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "prop-types": "^15.7.2",
+        "react": "^>= 16 <= 17",
+        "react-dom": ">= 16 <= 17"
+      }
+    },
     "node_modules/react-router": {
       "version": "6.0.2",
       "dev": true,
@@ -21019,6 +21069,25 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/watchpack-chokidar2/node_modules/fsevents": {
+      "version": "1.2.13",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
+      "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
+      "deprecated": "fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.",
+      "dev": true,
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "dependencies": {
+        "bindings": "^1.5.0",
+        "nan": "^2.12.1"
+      },
+      "engines": {
+        "node": ">= 4.0"
+      }
+    },
     "node_modules/watchpack-chokidar2/node_modules/glob-parent": {
       "version": "3.1.0",
       "dev": true,
@@ -21461,6 +21530,25 @@
         "node": ">=6"
       }
     },
+    "node_modules/webpack-dev-server/node_modules/fsevents": {
+      "version": "1.2.13",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
+      "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
+      "deprecated": "fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.",
+      "dev": true,
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "dependencies": {
+        "bindings": "^1.5.0",
+        "nan": "^2.12.1"
+      },
+      "engines": {
+        "node": ">= 4.0"
+      }
+    },
     "node_modules/webpack-dev-server/node_modules/glob-parent": {
       "version": "3.1.0",
       "dev": true,
@@ -25421,7 +25509,7 @@
       "dev": true
     },
     "async": {
-      "version": "2.6.3",
+      "version": "2.6.4",
       "dev": true,
       "requires": {
         "lodash": "^4.17.14"
@@ -25984,6 +26072,16 @@
       "version": "2.2.0",
       "dev": true
     },
+    "bindings": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
+      "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "file-uri-to-path": "1.0.0"
+      }
+    },
     "bluebird": {
       "version": "3.7.2",
       "dev": true
@@ -28657,6 +28755,13 @@
         }
       }
     },
+    "file-uri-to-path": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
+      "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
+      "dev": true,
+      "optional": true
+    },
     "filename-reserved-regex": {
       "version": "2.0.0",
       "dev": true
@@ -28972,6 +29077,13 @@
       "version": "1.0.0",
       "dev": true
     },
+    "fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "optional": true
+    },
     "function-bind": {
       "version": "1.1.1",
       "dev": true
@@ -32189,6 +32301,13 @@
         "minimatch": "^3.0.4"
       }
     },
+    "nan": {
+      "version": "2.15.0",
+      "resolved": "https://registry.npmjs.org/nan/-/nan-2.15.0.tgz",
+      "integrity": "sha512-8ZtvEnA2c5aYCZYd1cvgdnU6cqwixRoYg70xPLWUws5ORTa/lnw+u4amixRS/Ac5U5mQVgp9pnlSUnbNWFaWZQ==",
+      "dev": true,
+      "optional": true
+    },
     "nanoid": {
       "version": "3.3.0",
       "dev": true
@@ -34229,6 +34348,12 @@
       "version": "0.8.3",
       "dev": true
     },
+    "react-ribbons": {
+      "version": "git+ssh://git@github.com/EndBug/react-ribbons.git#3eb618f0042b4557f9fdbb918c388a8e254f9f7f",
+      "dev": true,
+      "from": "react-ribbons@github:EndBug/react-ribbons#custom",
+      "requires": {}
+    },
     "react-router": {
       "version": "6.0.2",
       "dev": true,
@@ -36847,6 +36972,17 @@
             }
           }
         },
+        "fsevents": {
+          "version": "1.2.13",
+          "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
+          "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "bindings": "^1.5.0",
+            "nan": "^2.12.1"
+          }
+        },
         "glob-parent": {
           "version": "3.1.0",
           "dev": true,
@@ -37386,6 +37522,17 @@
             "locate-path": "^3.0.0"
           }
         },
+        "fsevents": {
+          "version": "1.2.13",
+          "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
+          "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "bindings": "^1.5.0",
+            "nan": "^2.12.1"
+          }
+        },
         "glob-parent": {
           "version": "3.1.0",
           "dev": true,
diff --git a/package.json b/package.json
index fd1115e..ceff59c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "the-tol-project",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "private": true,
   "homepage": "https://tol.polinetwork.org/",
   "scripts": {
@@ -46,6 +46,7 @@
     "react-dom": "^17.0.2",
     "react-icons": "^4.3.1",
     "react-latex": "^2.0.0",
+    "react-ribbons": "github:EndBug/react-ribbons#custom",
     "react-router-dom": "^6.0.2",
     "react-scripts": "4.0.3",
     "react-timer-hook": "^3.0.5",
diff --git a/public/index.html b/public/index.html
index b18e0ff..d18460a 100644
--- a/public/index.html
+++ b/public/index.html
@@ -32,7 +32,7 @@
     <title>The TOL Project</title>
     <link href="//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.13.8/katex.min.css" rel="stylesheet" />
   </head>
-  <body style="margin-top: 0;">
+  <body style="margin: 0">
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <!--
diff --git a/src/components/App.tsx b/src/components/App.tsx
index 46b346b..b7f304d 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react'
-import { Routes, Route } from 'react-router-dom'
+import { Routes, Route, useLocation } from 'react-router-dom'
+import { RibbonContainer, RightCornerRibbon } from 'react-ribbons'
 import {
   answerLetter,
   section,
@@ -21,6 +22,8 @@ import QuestionsForm from './QuestionsForm/QuestionsForm'
 import Separator from './Util/Separator'
 import QPreview from './pages/QPreview'
 
+import { MobileContext } from '../utils/contexts'
+
 export type view = 'INFO-start' | 'TOL-testing' | 'TOL-secRecap' | 'INFO-end'
 
 export interface Answer {
@@ -35,6 +38,7 @@ export type AnswersData = Record<section, Answer[]>
 export type TimeRecord = Partial<Record<section, number>>
 
 const styles = StyleSheet.create({
+  app: { paddingInline: '8px' },
   routeContainer: { paddingInline: '7.5px' }
 })
 
@@ -51,6 +55,7 @@ export default function App() {
   })
   const timeRecordState = useState<TimeRecord>({})
   const [loadingError, showError] = useState<[string, Error] | []>([])
+  const [mobile, setMobile] = useState<boolean>(false)
 
   useEffect(() => {
     if (!database)
@@ -65,54 +70,88 @@ export default function App() {
             e
           ])
         })
-  })
+
+    setMobile(window.innerWidth < 768)
+    window.addEventListener('resize', () => {
+      setMobile(window.innerWidth < 768)
+    })
+  }, [])
+
+  const location = useLocation()
+
+  useEffect(() => {
+    const testPaths = ['/', '/test', '/results']
+    const testingURL = testPaths.includes(location.pathname)
+    if (!testingURL || view === 'INFO-start') {
+      // in other pages or on the start of the test, the listener shouldn't be set
+      window.onbeforeunload = null
+    } else if (view.startsWith('TOL')) {
+      // set the listener only if view is during a test, at the recap it is set in ExtendedCorrection.tsx
+      window.onbeforeunload = () => {
+        return 'Sicuro di voler uscire? Il test è ancora in corso'
+      }
+    }
+  }, [view, location])
 
   return (
-    <div>
-      <Header viewState={[view, setView]} />
-      <Separator />
-      <div style={styles.routeContainer}>
-        <Routes>
-          <Route
-            path="/"
-            element={
-              // Don't ever think about moving this to an external component.
-              <div>
-                <ErrorView
-                  hidden={!loadingError[0]}
-                  display={loadingError[0] || ''}
-                  internal={loadingError[1]}
-                />
-                {view.startsWith('TOL') && questions ? (
-                  <QuestionsForm
-                    answersState={answersState}
-                    questions={questions as QuestionsData}
-                    sectionState={sectionState}
-                    timeRecordState={timeRecordState}
-                    viewState={[view, setView]}
-                  />
-                ) : view.startsWith('INFO') && questions ? (
-                  <InfoView
-                    answers={answersState[0]}
-                    questions={questions}
-                    viewState={[view, setView]}
-                  />
-                ) : undefined}
-              </div>
-            }
-          >
-            <Route path="/test" element={<div />} />
-            <Route path="/results" element={<div />} />
-          </Route>
-          <Route path="/about" element={<About />} />
-          <Route path="/license" element={<License />} />
-          <Route path="/privacy" element={<Privacy />} />
-          <Route path="/dbpreview" element={<DBPreview db={database} />} />
-          <Route path="/qpreview" element={<QPreview />} />
-        </Routes>
-      </div>
-      <Separator />
-      {!view.startsWith('TOL') && <Footer />}
-    </div>
+    <MobileContext.Provider value={{ mobile }}>
+      <RibbonContainer>
+        {window &&
+          new URL(window.location.href).hostname ==
+            'polinetworkorg.github.io' && (
+            <RightCornerRibbon backgroundColor="#cc0000" color="white">
+              DEV
+            </RightCornerRibbon>
+          )}
+        <div style={styles.app}>
+          <Header viewState={[view, setView]} />
+          <Separator />
+          <div style={styles.routeContainer}>
+            <Routes>
+              <Route
+                path="/"
+                element={
+                  // Don't ever think about moving this to an external component.
+                  <div>
+                    <ErrorView
+                      hidden={!loadingError[0]}
+                      display={loadingError[0] || ''}
+                      internal={loadingError[1]}
+                    />
+                    {view.startsWith('TOL') && questions ? (
+                      <QuestionsForm
+                        answersState={answersState}
+                        questions={questions as QuestionsData}
+                        sectionState={sectionState}
+                        timeRecordState={timeRecordState}
+                        viewState={[view, setView]}
+                      />
+                    ) : view.startsWith('INFO') && questions ? (
+                      <InfoView
+                        answers={answersState[0]}
+                        questions={questions}
+                        viewState={[view, setView]}
+                      />
+                    ) : undefined}
+                  </div>
+                }
+              >
+                <Route path="/test" element={<div />} />
+                <Route path="/results" element={<div />} />
+              </Route>
+              <Route path="/about" element={<About />} />
+              <Route path="/license" element={<License />} />
+              <Route path="/privacy" element={<Privacy />} />
+              <Route path="/dbpreview" element={<DBPreview db={database} />} />
+              <Route path="/qpreview" element={<QPreview />} />
+            </Routes>
+          </div>
+          <Separator />
+          {!view.startsWith('TOL') && view != 'INFO-end' && (
+            <Footer view={view} />
+          )}
+        </div>
+      </RibbonContainer>
+    </MobileContext.Provider>
   )
 }
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 499eb45..09647c4 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,7 +1,9 @@
-import React from 'react'
+import React, { useContext } from 'react'
 import { Link } from 'react-router-dom'
 import { links } from '../utils/constants'
+import { MobileContext } from '../utils/contexts'
 import { StyleSheet, theme } from '../utils/style'
+import { view } from './App'
 
 const styles = StyleSheet.create({
   container: {
@@ -16,32 +18,59 @@ const styles = StyleSheet.create({
     display: 'flex',
     flex: 1,
     justifyContent: 'center',
+    textAlign: 'center',
     color: 'inherit',
     fontSize: '11pt'
   }
 })
 
-export default function Footer() {
+const mobileStyles = StyleSheet.create({
+  container: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingBottom: 16
+  },
+  link: StyleSheet.compose(styles.link, {
+    margin: 2
+  })
+})
+
+export default function Footer(props: { view: view }) {
+  const { mobile } = useContext(MobileContext)
+  const linkStyle = mobile ? mobileStyles.link : styles.link
   return (
-    <div style={styles.container}>
+    <div style={mobile ? mobileStyles.container : styles.container}>
       <a
         href={links.githubSource}
-        style={styles.link}
+        style={linkStyle}
         target="_blank"
         rel="noreferrer noopener"
       >
         Source
       </a>
-      <Link to="about" style={styles.link}>
+      <Link to="about" style={linkStyle} replace>
         About
       </Link>
-      <Link to="/" style={styles.link}>
+      <Link
+        to="/"
+        style={linkStyle}
+        onClick={(e) => {
+          if (props.view === 'INFO-end') {
+            // reload the page if we are in the recap, easier then resetting the state
+            e.preventDefault()
+            window.location.reload()
+          }
+        }}
+        replace
+      >
         Home
       </Link>
-      <Link to="license" style={styles.link}>
+      <Link to="license" style={linkStyle} replace>
         License
       </Link>
-      <Link to="privacy" style={styles.link}>
+      <Link to="privacy" style={linkStyle} replace>
         Privacy & cookies
       </Link>
     </div>
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 7d4d9b7..120a808 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,9 +1,10 @@
-import React from 'react'
+import React, { useContext } from 'react'
 import { StyleSheet } from '../utils/style'
 import { statePair } from '../utils/types'
 import { view } from './App'
 import logo from '../static/logo3000.webp'
 import { links } from '../utils/constants'
+import { MobileContext } from '../utils/contexts'
 
 const styles = StyleSheet.create({
   div: {
@@ -22,6 +23,12 @@ const styles = StyleSheet.create({
       justifyContent: 'center'
     })
   },
+  get rightText() {
+    return StyleSheet.compose(this.text, this.spacer, {
+      justifyContent: 'flex-end',
+      marginRight: 8
+    })
+  },
   get logoDiv() {
     return StyleSheet.compose(this.spacer, {
       alignItems: 'center',
@@ -49,10 +56,12 @@ interface HeaderProps {
 }
 
 export default function Header({ viewState }: HeaderProps) {
+  const { mobile } = useContext(MobileContext)
+
   return (
     <div style={styles.div}>
       <a
-        style={styles.logoDiv}
+        style={StyleSheet.compose(styles.logoDiv, { flex: mobile ? 0 : 1 })}
         {...(!viewState[0].startsWith('TOL')
           ? {
               rel: 'noreferrer noopener',
@@ -62,10 +71,12 @@ export default function Header({ viewState }: HeaderProps) {
           : {})}
       >
         <img src={logo} alt="logo" style={styles.logo} />
-        <h1 style={styles.text}>PoliNetwork</h1>
+        {mobile ? undefined : <h1 style={styles.text}>PoliNetwork</h1>}
       </a>
-      <h1 style={styles.centeredText}>The TOL Project</h1>
-      <div style={styles.spacer} />
+      <h1 style={mobile ? styles.rightText : styles.centeredText}>
+        The TOL Project
+      </h1>
+      {mobile ? undefined : <div style={styles.spacer} />}
     </div>
   )
 }
diff --git a/src/components/InfoView/ExtendedCorrection/ExtendedCorrection.tsx b/src/components/InfoView/ExtendedCorrection/ExtendedCorrection.tsx
index b887d6a..521cf4a 100644
--- a/src/components/InfoView/ExtendedCorrection/ExtendedCorrection.tsx
+++ b/src/components/InfoView/ExtendedCorrection/ExtendedCorrection.tsx
@@ -18,8 +18,11 @@ const styles = StyleSheet.create({
   },
   doc: {},
   printButton: {
-    display: 'flex',
-    justifyContent: 'center'
+    display: 'inline-flex',
+    alignItems: 'center',
+    flexDirection: 'column',
+    alignSelf: 'center',
+    gap: '5px'
   },
   link: {
     color: theme.primary
@@ -30,6 +33,9 @@ const styles = StyleSheet.create({
   li: {
     margin: '10px'
   },
+  ul: {
+    listStyleType: 'none'
+  },
   nowrap: { whiteSpace: 'nowrap' }
 })
 
@@ -47,18 +53,20 @@ export default function ExtendedCorrection(props: ExtendedCorrectionProps) {
 
   return (
     <div style={styles.collapsible}>
-      <ReactToPrint
-        documentTitle={`The TOL Project ${date
-          .toLocaleString()
-          .replace(/\/|:/g, '-')
-          .replace(/,/g, '')}`}
-        content={() => ref.current}
-        trigger={() => (
-          <div style={styles.printButton}>
-            <Button label="Salva risultati della simulazione" />
-          </div>
-        )}
-      />
+      <div style={styles.printButton}>
+        <ReactToPrint
+          documentTitle={`The TOL Project ${date
+            .toLocaleString()
+            .replace(/\/|:/g, '-')
+            .replace(/,/g, '')}`}
+          content={() => ref.current}
+          trigger={() => <Button label="Salva risultati della simulazione" />}
+          onAfterPrint={() => {
+            // remove the onbeforeunload listener since results are saved
+            window.onbeforeunload = null
+          }}
+        />
+      </div>
       <div
         {...(props.visible ? {} : { className: 'print-only' })}
         ref={ref}
@@ -84,9 +92,6 @@ export default function ExtendedCorrection(props: ExtendedCorrectionProps) {
           </a>{' '}
           di PoliNetwork!
           <br />
-          Per fare riferimento alla domanda scrivi, assieme al testo, anche l'ID
-          (il numero che trovi fra [] dopo il testo).
-          <br />
           <br />
           <br />
           <span className="print-only">
@@ -103,34 +108,48 @@ export default function ExtendedCorrection(props: ExtendedCorrectionProps) {
                 <div>
                   <b>{sectionInfo[section].name}</b>
                   <ol>
-                    {values.map((question) => (
-                      <div key={question.id + (question.sub || 0)}>
-                        <li style={styles.li}>
-                          <RenderedText
-                            text={`
+                    {values.map((question) => {
+                      const letter = props.answers[section].find(
+                          (a) => a?.id == question.id && a?.sub == question.sub
+                        )?.letter,
+                        result = letter
+                          ? letter == question.correct
+                            ? 'Esatta'
+                            : 'Errata'
+                          : 'Senza risposta'
+
+                      return (
+                        <div key={question.id + (question.sub || 0)}>
+                          <li style={styles.li}>
+                            <RenderedText
+                              text={`
                             ${question.text} 
                             `.trim()}
-                          />
-                          &emsp;
-                          <u style={styles.nowrap}>
-                            {(() => {
-                              const letter = props.answers[section].find(
-                                (a) =>
-                                  a?.id == question.id && a?.sub == question.sub
-                              )?.letter
-
-                              return letter
-                                ? letter == question.correct
-                                  ? 'Esatta'
-                                  : 'Errata'
-                                : 'Senza risposta'
-                            })()}
-                          </u>{' '}
-                          [{question.id}
-                          {question.sub ? '-' + question.sub : ''}]
-                        </li>
-                      </div>
-                    ))}
+                            />
+                            &emsp;
+                            <u style={styles.nowrap}>{result}</u>{' '}
+                            <ul style={styles.ul}>
+                              {result == 'Errata' && letter && (
+                                <li>
+                                  <RenderedText
+                                    text={`R. data: ${question.answers[letter]}`}
+                                  />
+                                </li>
+                              )}
+                              {result != 'Esatta' && (
+                                <li>
+                                  <RenderedText
+                                    text={`R. esatta: ${
+                                      question.answers[question.correct]
+                                    }`}
+                                  />
+                                </li>
+                              )}
+                            </ul>
+                          </li>
+                        </div>
+                      )
+                    })}
                   </ol>
                 </div>
               </div>
diff --git a/src/components/InfoView/InfoEnd.tsx b/src/components/InfoView/InfoEnd.tsx
index 1260ff3..c9ca9e1 100644
--- a/src/components/InfoView/InfoEnd.tsx
+++ b/src/components/InfoView/InfoEnd.tsx
@@ -12,6 +12,7 @@ import {
 import { Question, QuestionsData, section } from '../../utils/database'
 import { formatNumber, StyleSheet, theme } from '../../utils/style'
 import { AnswersData } from '../App'
+import Button from '../Util/Button'
 import ExtendedCorrection from './ExtendedCorrection/ExtendedCorrection'
 
 const styles = StyleSheet.create({
@@ -21,8 +22,13 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     fontSize: '11pt'
   },
-  tableDiv: { alignSelf: 'center' },
-  table: { borderSpacing: 0 },
+  tableDiv: {
+    alignSelf: 'center',
+    width: '100%',
+    overflow: 'auto',
+    display: 'flex'
+  },
+  table: { borderSpacing: 0, margin: 'auto' },
   tableCell: {
     padding: '5px',
     paddingInline: '10px',
@@ -49,6 +55,20 @@ const styles = StyleSheet.create({
   h3: {
     marginBottom: 0,
     paddingInline: '10px'
+  },
+  restartDiv: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexDirection: 'column'
+  },
+  restartTitle: {
+    textAlign: 'center',
+    maxWidth: 500
+  },
+  restartButton: {
+    margin: '12px',
+    marginBottom: '32px'
   }
 })
 
@@ -213,6 +233,19 @@ export default function InfoEnd(props: InfoEndProps) {
         Il <b>punteggio</b> complessivo viene arrotondato all'intero più vicino
         (es: il punteggio 59,49 viene arrotondato a 59, il punteggio 59,50 a 60)
       </p>
+      <div style={styles.restartDiv}>
+        <h3 style={styles.restartTitle}>
+          Ricordati di salvare i tuoi risultati prima di iniziare un nuovo test,
+          o andranno persi!
+        </h3>
+        <Button
+          label="Inizia un nuovo test"
+          style={styles.restartButton}
+          onClick={() => {
+            window.location.reload()
+          }}
+        />
+      </div>
     </div>
   )
 }
diff --git a/src/components/InfoView/InfoView.tsx b/src/components/InfoView/InfoView.tsx
index 81dbd45..a18cfe9 100644
--- a/src/components/InfoView/InfoView.tsx
+++ b/src/components/InfoView/InfoView.tsx
@@ -22,14 +22,14 @@ export default function InfoView(props: InfoViewProps) {
     (location.pathname == '/results' && view != 'INFO-end')
   ) {
     setView('INFO-start')
-    return <Navigate to="/" />
+    return <Navigate to="/" replace />
   }
 
   return view == 'INFO-start' ? (
     <InfoStart
       startTest={() => {
         setView('TOL-testing')
-        navigate('/test')
+        navigate('/test', { replace: true })
         PanelBear.track('TestStart')
       }}
     />
diff --git a/src/components/QuestionsForm/AnswerForm.tsx b/src/components/QuestionsForm/AnswerForm.tsx
index bee56f4..c773a3b 100644
--- a/src/components/QuestionsForm/AnswerForm.tsx
+++ b/src/components/QuestionsForm/AnswerForm.tsx
@@ -9,7 +9,11 @@ const styles = StyleSheet.create({
   baseText: {
     fontSize: '11pt'
   },
+  label: {
+    display: 'flex'
+  },
   radioText: {
+    display: 'flex',
     fontWeight: 'bold',
     textAlign: 'center',
     verticalAlign: 'middle',
@@ -79,7 +83,7 @@ interface RadioRowProps {
 function RadioRow(props: RadioRowProps) {
   return (
     <tr style={styles.baseText}>
-      <label>
+      <label style={styles.label}>
         <td style={styles.radioText}>
           <span style={styles.radioSpan}>
             {props.letter?.toUpperCase() || '?'}{' '}
diff --git a/src/components/QuestionsForm/QuestionHeader.tsx b/src/components/QuestionsForm/QuestionHeader.tsx
index 5105863..17755b6 100644
--- a/src/components/QuestionsForm/QuestionHeader.tsx
+++ b/src/components/QuestionsForm/QuestionHeader.tsx
@@ -1,9 +1,10 @@
-import React from 'react'
+import React, { useContext } from 'react'
 import { Question } from '../../utils/database'
 import { StyleSheet, theme } from '../../utils/style'
 import { Answer } from '../App'
 import { IoMdArrowRoundBack, IoMdArrowRoundForward } from 'react-icons/io'
 import Button from '../Util/Button'
+import { MobileContext } from '../../utils/contexts'
 
 const styles = StyleSheet.create({
   container: {
@@ -48,6 +49,15 @@ const styles = StyleSheet.create({
   }
 })
 
+const mobileStyles = StyleSheet.create({
+  container: StyleSheet.compose(styles.container, {
+    flexDirection: 'column-reverse'
+  }),
+  rightContainer: StyleSheet.compose(styles.rightContainer, {
+    justifyContent: 'space-between'
+  })
+})
+
 interface QuestionHeaderProps {
   currentAnswer: Answer
   questionIndex: number
@@ -55,8 +65,9 @@ interface QuestionHeaderProps {
   shiftQuestionIndex: (offset: number) => void
 }
 export default function QuestionHeader(props: QuestionHeaderProps) {
+  const { mobile } = useContext(MobileContext)
   return (
-    <div style={styles.container}>
+    <div style={mobile ? mobileStyles.container : styles.container}>
       <div style={styles.leftContainer}>
         <p style={styles.question}>Domanda {props.questionIndex + 1}</p>
         <p
@@ -75,7 +86,7 @@ export default function QuestionHeader(props: QuestionHeaderProps) {
           Risposta {props.currentAnswer?.letter ? '' : 'non '}data
         </p>
       </div>
-      <div style={styles.rightContainer}>
+      <div style={mobile ? mobileStyles.rightContainer : styles.rightContainer}>
         <Button
           label="precedente"
           onClick={() => props.shiftQuestionIndex(-1)}
diff --git a/src/components/QuestionsForm/QuestionsForm.tsx b/src/components/QuestionsForm/QuestionsForm.tsx
index 3273dc1..d119042 100644
--- a/src/components/QuestionsForm/QuestionsForm.tsx
+++ b/src/components/QuestionsForm/QuestionsForm.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { useNavigate } from 'react-router'
 import { useTimer } from 'react-timer-hook'
 import { PanelBear } from '../..'
@@ -45,6 +45,25 @@ export default function QuestionsForm(props: QuestionsFormProps) {
       (tmpAnswerState[0] != currentAnswer?.letter ||
         tmpFlaggedState[0] != (currentAnswer?.flagged || false))
 
+  useEffect(() => {
+    // called when the qIndex is updated (the user changes question)
+    // sets the scroll of the recap bar container to keep the selected question in view
+    const recapBarElement = document.getElementById('recap-bar-container')
+    if (!recapBarElement) return
+
+    // this width works ok considering margins, widths, and paddings of the elements
+    const width = recapBarElement.clientWidth - 40
+    // 25 is the min width of a question cell, 2px margin to see the cell before
+    const maxScroll = qIndex * 25 - 2
+    const minScroll = maxScroll - width
+
+    // the scrollLeft musth be kept between the two values
+    if (recapBarElement.scrollLeft < minScroll)
+      recapBarElement.scrollLeft = minScroll
+    if (recapBarElement.scrollLeft > maxScroll)
+      recapBarElement.scrollLeft = maxScroll
+  }, [qIndex])
+
   const showAlert = () => {
     alert(
       `Se prima non premi "Conferma e vai alla successiva" la risposta non verrà salvata.`
@@ -153,7 +172,7 @@ export default function QuestionsForm(props: QuestionsFormProps) {
               setView('TOL-testing')
             } else {
               setView('INFO-end')
-              navigate('/results')
+              navigate('/results', { replace: true })
               PanelBear.track('ViewResults')
             }
           }}
diff --git a/src/components/QuestionsForm/RecapBar.tsx b/src/components/QuestionsForm/RecapBar.tsx
index ac7e36b..377672e 100644
--- a/src/components/QuestionsForm/RecapBar.tsx
+++ b/src/components/QuestionsForm/RecapBar.tsx
@@ -8,6 +8,12 @@ const styles = StyleSheet.create({
   bordered: {
     borderBottom: 'thin solid #606060'
   },
+  barContainer: {
+    width: '100%',
+    boxSizing: 'border-box',
+    overflow: 'auto hidden',
+    padding: '5px 2.5px 5px 0'
+  },
   bar: {
     display: 'flex',
     fontSize: '9.5pt',
@@ -16,11 +22,11 @@ const styles = StyleSheet.create({
   },
   cellContainer: {
     display: 'flex',
-    flexShrink: 1,
+    flex: '1 0 25px',
     flexDirection: 'column',
     alignContent: 'baseline',
     textAlign: 'center',
-    width: '4em',
+    maxWidth: '4em',
     backgroundColor: theme.lightBackground
   },
   cellSub: {
@@ -44,25 +50,32 @@ interface RecapBarProps {
 }
 export default function RecapBar(props: RecapBarProps) {
   return (
-    <a style={styles.bar} {...(props.active ? { href: '#' } : {})}>
-      {props.sectionQuestions.map((q, i) => {
-        const answer = props.sectionAnswers.find(
-          (a) => a && a.id == q.id && (q.sub ? q.sub == a.sub : true)
-        )
-        return (
-          <AnswerCell
-            key={i}
-            index={i}
-            letter={answer?.letter}
-            flagged={answer?.flagged || false}
-            onClick={() => {
-              if (props.active) props.currentQuestionIndexState[1](i)
-            }}
-            selected={props.active && props.currentQuestionIndexState[0] == i}
-          />
-        )
-      })}
-    </a>
+    <div style={styles.barContainer} id="recap-bar-container">
+      <a
+        style={StyleSheet.compose(styles.bar, {
+          minWidth: props.sectionQuestions.length * 25 + 10
+        })}
+        {...(props.active ? { href: '#' } : {})}
+      >
+        {props.sectionQuestions.map((q, i) => {
+          const answer = props.sectionAnswers.find(
+            (a) => a && a.id == q.id && (q.sub ? q.sub == a.sub : true)
+          )
+          return (
+            <AnswerCell
+              key={i}
+              index={i}
+              letter={answer?.letter}
+              flagged={answer?.flagged || false}
+              onClick={() => {
+                if (props.active) props.currentQuestionIndexState[1](i)
+              }}
+              selected={props.active && props.currentQuestionIndexState[0] == i}
+            />
+          )
+        })}
+      </a>
+    </div>
   )
 }
 
diff --git a/src/components/QuestionsForm/Timer.tsx b/src/components/QuestionsForm/Timer.tsx
index d1b5575..6e35e12 100644
--- a/src/components/QuestionsForm/Timer.tsx
+++ b/src/components/QuestionsForm/Timer.tsx
@@ -1,12 +1,19 @@
-import React from 'react'
+import React, { useContext } from 'react'
 import { TimerResult } from 'react-timer-hook'
 import { StyleSheet, theme } from '../../utils/style'
 import { FiClock } from 'react-icons/fi'
+import { MobileContext } from '../../utils/contexts'
 
 const alertThreshold = 60
 
 const styles = StyleSheet.create({
   container: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: '5px'
+  },
+  clockWrapper: {
     color: theme.timerGreen,
     display: 'flex',
     flexDirection: 'row',
@@ -45,31 +52,46 @@ interface TimerProps {
   timer: TimerResult
 }
 export default function Timer(props: TimerProps) {
+  const { mobile } = useContext(MobileContext)
   const { timer } = props
 
   return (
     <div
-      style={StyleSheet.compose(
-        styles.container,
-        (timer.hours * 60 + timer.minutes) * 60 + timer.seconds <
-          alertThreshold && styles.expiring
-      )}
+      style={
+        mobile
+          ? StyleSheet.compose(styles.container, {
+              alignSelf: 'flex-end',
+              marginBottom: '1em'
+            })
+          : styles.container
+      }
     >
-      <FiClock style={styles.icon} />
-      <div style={styles.numbers}>
-        {timer.hours.toLocaleString(undefined, {
-          minimumIntegerDigits: 2
-        })}
-        :
-        {timer.minutes.toLocaleString(undefined, {
-          minimumIntegerDigits: 2
-        })}
-        :{timer.seconds.toLocaleString(undefined, { minimumIntegerDigits: 2 })}
+      <div
+        style={StyleSheet.compose(
+          styles.clockWrapper,
+          (timer.hours * 60 + timer.minutes) * 60 + timer.seconds <
+            alertThreshold && styles.expiring
+        )}
+      >
+        <FiClock style={styles.icon} />
+        <div style={styles.numbers}>
+          {timer.hours.toLocaleString(undefined, {
+            minimumIntegerDigits: 2
+          })}
+          :
+          {timer.minutes.toLocaleString(undefined, {
+            minimumIntegerDigits: 2
+          })}
+          :
+          {timer.seconds.toLocaleString(undefined, { minimumIntegerDigits: 2 })}
+        </div>
       </div>
-      <p style={styles.p}>
-        Tempo rimanente
-        <br /> per la sezione corrente
-      </p>
+      {mobile ? undefined : (
+        <p style={styles.p}>
+          Tempo rimanente
+          <br /> per la sezione corrente
+        </p>
+      )}
     </div>
   )
 }
diff --git a/src/components/QuestionsForm/TopControls.tsx b/src/components/QuestionsForm/TopControls.tsx
index db3a763..07852ac 100644
--- a/src/components/QuestionsForm/TopControls.tsx
+++ b/src/components/QuestionsForm/TopControls.tsx
@@ -1,6 +1,7 @@
-import React from 'react'
+import React, { useContext } from 'react'
 import { TimerResult } from 'react-timer-hook'
 import { getSectionName } from '../../utils/constants'
+import { MobileContext } from '../../utils/contexts'
 import { section, QuestionsData } from '../../utils/database'
 import { StyleSheet } from '../../utils/style'
 import { AnswersData } from '../App'
@@ -15,13 +16,23 @@ const styles = StyleSheet.create({
   },
   innerDiv: {
     display: 'flex',
-    alignItems: 'baseline',
+    alignItems: 'center',
     flexDirection: 'row',
     gap: '15px',
     fontSize: '11pt'
   }
 })
 
+const mobileStyles = StyleSheet.create({
+  outerDiv: StyleSheet.compose(styles.outerDiv, {
+    flexDirection: 'column'
+  }),
+  innerDiv: StyleSheet.compose(styles.innerDiv, {
+    width: '100%',
+    justifyContent: 'space-between'
+  })
+})
+
 interface TopControlsProps {
   active: boolean
   answers: AnswersData
@@ -32,11 +43,12 @@ interface TopControlsProps {
 }
 
 export default function TopControls(props: TopControlsProps) {
+  const { mobile } = useContext(MobileContext)
   const { currentSection } = props
 
   return (
-    <div style={styles.outerDiv}>
-      <div style={styles.innerDiv}>
+    <div style={mobile ? mobileStyles.outerDiv : styles.outerDiv}>
+      <div style={mobile ? mobileStyles.innerDiv : styles.innerDiv}>
         <div>
           <p>
             Sezione: <b>{getSectionName(currentSection)}</b> <br />
@@ -44,6 +56,7 @@ export default function TopControls(props: TopControlsProps) {
             {
               props.answers[currentSection].filter((a) => !!a.letter).length
             } / {props.questions[currentSection].length}
+            {mobile && <br />}
             {props.active &&
               ` (${props.answers[currentSection].reduce(
                 (acc, curr) => acc + (curr.flagged ? 1 : 0),
diff --git a/src/components/pages/About.tsx b/src/components/pages/About.tsx
index 7c2f128..179cdf3 100644
--- a/src/components/pages/About.tsx
+++ b/src/components/pages/About.tsx
@@ -94,7 +94,7 @@ export default function About() {
             .map((m, i) => (
               <li key={i}>
                 <div style={styles.liDiv}>
-                  {m.name}{' '}
+                  {(m.prefix || '') + ' ' + m.name}{' '}
                   <a
                     href={`https://t.me/${m.tg}`}
                     target="_blank"
diff --git a/src/components/pages/QPreview.tsx b/src/components/pages/QPreview.tsx
index d223a59..aa09578 100644
--- a/src/components/pages/QPreview.tsx
+++ b/src/components/pages/QPreview.tsx
@@ -1,15 +1,40 @@
 import React, { useEffect, useState } from 'react'
 import {
   Database,
+  getImageURL,
   Question,
   readDatabase,
   section,
   sheetDict
 } from '../../utils/database'
-import { baseStyle } from '../../utils/style'
+import { baseStyle, StyleSheet } from '../../utils/style'
+import GeneralPurposeCollapsible from '../Util/GeneralPurposeCollapsible'
 import RenderedText from '../Util/RenderedText'
 import Select from '../Util/Select'
 
+const styles = StyleSheet.create({
+  container: {
+    marginBlock: 0,
+    display: 'flex',
+    flexDirection: 'column'
+  },
+  collapsible: {
+    padding: '10px',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '15px'
+  },
+  attachment: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '5px'
+  },
+  image: {
+    maxHeight: '500px',
+    width: 'fit-content'
+  }
+})
+
 export default function QPreview() {
   const [questionType, setQuestionType] = useState('custom')
 
@@ -101,7 +126,8 @@ function DatabaseQ() {
           q: (dbs[dbRef] as Database)[section as section].find((q) => {
             const [i, s] = id.split(' - ')
             return q.id == i && (s ? q.sub == s : true)
-          })
+          }),
+          ref: dbRef
         })
       ) : (
         <div />
@@ -172,14 +198,32 @@ function CustomQ() {
 
 interface QuestionRenderProps {
   q?: Question
+  ref?: string
 }
 function QuestionRender(props: QuestionRenderProps) {
-  const { q } = props
+  const { q, ref } = props
 
   return q ? (
     <div>
       <RenderedText text={q.text || q.sub || ''} />
       <br />
+      {q.attachments?.length && (
+        <GeneralPurposeCollapsible
+          label="mostra/nascondi immagini"
+          contentStyle={styles.collapsible}
+        >
+          {q.attachments.map((fileName, index) => (
+            <span key={index + 1} style={styles.attachment}>
+              <p style={styles.container}>Immagine {index + 1}:</p>
+              <img
+                src={getImageURL(fileName, ref || 'stable')}
+                style={styles.image}
+              />
+            </span>
+          ))}
+        </GeneralPurposeCollapsible>
+      )}
+      <br />
       <p>Valid: {q.validated + ''}</p>
       {Object.entries(q.answers).map(([letter, text]) => (
         <p key={letter}>
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
index f60aedc..ff5647d 100644
--- a/src/utils/constants.ts
+++ b/src/utils/constants.ts
@@ -86,6 +86,7 @@ interface Member {
   name: string
   tg: string
   ah?: boolean
+  prefix?: string
 }
 
 export const members: Member[] = [
@@ -118,5 +119,23 @@ export const members: Member[] = [
     name: 'Diego Aldarese',
     tg: 'diegoaldarese',
     ah: true
+  },
+  {
+    name: 'Tommaso Morganti',
+    tg: 'toto04_1'
+  },
+  {
+    name: 'Giovanni Menicucci',
+    tg: 'giova1211'
+  },
+  {
+    name: 'Nadia Scappini',
+    tg: 'nscapp',
+    prefix: 'Prof.ssa'
+  },
+  {
+    name: '@spyarect',
+    tg: 'spyarect',
+    ah: true
   }
 ]
diff --git a/src/utils/contexts.ts b/src/utils/contexts.ts
new file mode 100644
index 0000000..f22ceaa
--- /dev/null
+++ b/src/utils/contexts.ts
@@ -0,0 +1,5 @@
+import { createContext } from 'react'
+
+export const MobileContext = createContext({
+  mobile: false
+})