diff --git a/app/id/route.ts b/app/id/route.ts
index 751c46d..d8d2503 100644
--- a/app/id/route.ts
+++ b/app/id/route.ts
@@ -10,8 +10,7 @@ function buildClientIdentifierDoc() {
       post_logout_redirect_uris: [baseUrl],
       // Support refresh_tokens for refreshing the session:
       grant_types: ["authorization_code", "refresh_token"],
-      // The scope must be explicit, as the default doesn't include offline_access,
-      // preventing the refresh token from being issued.
+      // The default scopes don't include offline_access
       scope: "openid webid offline_access",
       response_types: ["code"],
       token_endpoint_auth_method: "none",
diff --git a/package-lock.json b/package-lock.json
index 526493a..6b62fa0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,8 @@
       "dependencies": {
         "@emotion/react": "^11.11.1",
         "@emotion/styled": "^11.11.0",
+        "@fortawesome/free-solid-svg-icons": "^6.5.1",
+        "@fortawesome/react-fontawesome": "^0.2.0",
         "@inrupt/solid-client": "^1.30.0",
         "@inrupt/solid-client-authn-browser": "^1.17.1",
         "@inrupt/solid-ui-react": "^2.9.0",
@@ -463,6 +465,52 @@
       "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz",
       "integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A=="
     },
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.5.1.tgz",
+      "integrity": "sha512-GkWzv+L6d2bI5f/Vk6ikJ9xtl7dfXtoRu3YGE6nq0p/FFqA1ebMOAWg3XgRyb0I6LYyYkiAo+3/KrwuBp8xG7A==",
+      "hasInstallScript": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.5.1.tgz",
+      "integrity": "sha512-MfRCYlQPXoLlpem+egxjfkEuP9UQswTrlCOsknus/NcMoblTH2g0jPrapbcIb04KGA7E2GZxbAccGZfWoYgsrQ==",
+      "hasInstallScript": true,
+      "peer": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.5.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-solid-svg-icons": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.5.1.tgz",
+      "integrity": "sha512-S1PPfU3mIJa59biTtXJz1oI0+KAXW6bkAb31XKhxdxtuXDiUIFsih4JR1v5BbxY7hVHsD1RKq+jRkVRaf773NQ==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.5.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/react-fontawesome": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz",
+      "integrity": "sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==",
+      "dependencies": {
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "@fortawesome/fontawesome-svg-core": "~1 || ~6",
+        "react": ">=16.3"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.8",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.8.tgz",
@@ -5436,6 +5484,36 @@
       "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz",
       "integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A=="
     },
+    "@fortawesome/fontawesome-common-types": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.5.1.tgz",
+      "integrity": "sha512-GkWzv+L6d2bI5f/Vk6ikJ9xtl7dfXtoRu3YGE6nq0p/FFqA1ebMOAWg3XgRyb0I6LYyYkiAo+3/KrwuBp8xG7A=="
+    },
+    "@fortawesome/fontawesome-svg-core": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.5.1.tgz",
+      "integrity": "sha512-MfRCYlQPXoLlpem+egxjfkEuP9UQswTrlCOsknus/NcMoblTH2g0jPrapbcIb04KGA7E2GZxbAccGZfWoYgsrQ==",
+      "peer": true,
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "6.5.1"
+      }
+    },
+    "@fortawesome/free-solid-svg-icons": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.5.1.tgz",
+      "integrity": "sha512-S1PPfU3mIJa59biTtXJz1oI0+KAXW6bkAb31XKhxdxtuXDiUIFsih4JR1v5BbxY7hVHsD1RKq+jRkVRaf773NQ==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "6.5.1"
+      }
+    },
+    "@fortawesome/react-fontawesome": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz",
+      "integrity": "sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==",
+      "requires": {
+        "prop-types": "^15.8.1"
+      }
+    },
     "@humanwhocodes/config-array": {
       "version": "0.11.8",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.8.tgz",
diff --git a/package.json b/package.json
index 158a721..63da87c 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,8 @@
   "dependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
+    "@fortawesome/free-solid-svg-icons": "^6.5.1",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@inrupt/solid-client": "^1.30.0",
     "@inrupt/solid-client-authn-browser": "^1.17.1",
     "@inrupt/solid-ui-react": "^2.9.0",
diff --git a/src/components/AddBookForm.module.css b/src/components/AddBookForm.module.css
new file mode 100644
index 0000000..a0ab6de
--- /dev/null
+++ b/src/components/AddBookForm.module.css
@@ -0,0 +1,92 @@
+.addBookFormContainer {
+    display: flex;
+    justify-content: center;
+}
+
+.addBookForm {
+    border: black solid 1px;
+    border-radius: 1em;
+    padding: 1em;
+    margin: 1em;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: min-content min-content min-content;
+}
+
+#bookTitleField {
+  grid-column: 1;
+  grid-row: 1;
+}
+
+#langTagField {
+  grid-column: 2;
+  grid-row: 1;
+}
+
+#authorField {
+  grid-column: 1;
+  grid-row: 2;
+}
+
+#seriesField {
+  grid-column: 2;
+  grid-row: 2;
+  display: flex;
+}
+
+#isbnField {
+  grid-column: 1;
+  grid-row: 3;
+}
+
+#submitButton {
+  grid-column: 1 / span 2;
+  grid-row: 4;
+}
+
+ /* The Modal (background) */
+ .barcode-modal {
+    display: none; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 1; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgb(0,0,0); /* Fallback color */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+  }
+
+  /* See the following link for ideas */
+  /* https://codepen.io/havardob/pen/eYJPwdb */
+
+  .barcode-container {
+    display: flex;
+    justify-content: center;
+  }
+
+  .barcode-container canvas {
+    /* The barcode library adds an extraneous canvas */
+    display: none;
+  }
+  
+  /* Modal Content/Box */
+  .barcode-viewer {
+    padding: 1em;
+  }
+  
+  /* The Close Button */
+  .close {
+    color: #aaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+  }
+  
+  .close:hover,
+  .close:focus {
+    color: black;
+    text-decoration: none;
+    cursor: pointer;
+  } 
\ No newline at end of file
diff --git a/src/components/AddBookForm.tsx b/src/components/AddBookForm.tsx
index 75519af..79b7d18 100644
--- a/src/components/AddBookForm.tsx
+++ b/src/components/AddBookForm.tsx
@@ -1,14 +1,18 @@
 "use client";
 
-import { BARCODE_CONTAINER_ID } from "../../src/components/domConstants";
+import { BARCODE_VIEWER_ID } from "../../src/components/domConstants";
 import { Field, FieldArray, Formik, useFormikContext } from "formik";
-import { ChangeEventHandler, useContext, useState } from "react";
+import { ChangeEventHandler, useContext, useEffect, useState } from "react";
 import type { Book } from "../lib/data/books";
 import { addBookToDataset, bookToRdf } from "../lib/data/books";
 import { getSourceIri, getThingAll, setThing } from "@inrupt/solid-client";
 import { LibraryContext } from "../contexts/libraryContext";
 import BarcodeReader from "./barcode";
 
+import style from "./AddBookForm.module.css";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faBarcode } from "@fortawesome/free-solid-svg-icons";
+
 const BookTitleField = ({
   handleChange,
   title
@@ -17,16 +21,18 @@ const BookTitleField = ({
   title: string
 }) => {
   return (
-    <label htmlFor="title">
-      Title:
+    <div id={style.bookTitleField}>
+      <label htmlFor="title">Titre</label><br />
       <input
         type="text"
         name="title"
         id="title"
         onChange={handleChange}
         value={title}
+        placeholder="Les gaffes d'un gars gonflé"
       />
-    </label>
+    </div>
+    
   )
 }
 
@@ -38,8 +44,8 @@ const LangTagField = ({
   langTag: string
 }) => {
   return (
-    <label htmlFor="langTag">
-      Title:
+    <div id={style.langTagField}>
+      <label htmlFor="langTag">Langue</label><br />
       <select
         name="langTag"
         id="langTag"
@@ -51,7 +57,7 @@ const LangTagField = ({
         <option value={"es"}>es</option>
         <option value={"ru"}>ru</option>
       </select>
-    </label>
+    </div>
   )
 }
 
@@ -66,18 +72,43 @@ const IsbnField = ({
   const {
     setFieldValue,
   } = useFormikContext()
+
+  useEffect(() => {
+    const modal = document.getElementById("barcode-modal");
+    const modalContainer = document.getElementById("barcode-container");
+    if(modal === null) {
+      return;
+    }
+    if (scanEnabled) {
+      modal.style.display = "block";
+      window.onclick = (event) => {
+        if (event.target === modal || event.target === modalContainer) {
+          setScanEnabled(false);
+        }
+      }
+    } else {
+      modal.style.display = "none";
+    }
+  }, [scanEnabled]);
+
   return (
-    <label htmlFor="isbn">
-      <button type="button" onClick={() => setScanEnabled((prev) => !prev)}>ISBN: </button>
-      <BarcodeReader enabled={scanEnabled} onDetectedCallback={(value) => { setFieldValue("isbn", value) }}/>
+    <div id={style.isbnField}>
+      <label htmlFor="isbn">ISBN</label> <button type="button" onClick={() => setScanEnabled((prev) => !prev)}><FontAwesomeIcon icon={faBarcode} /></button><br />
+      <BarcodeReader enabled={scanEnabled} onDetectedCallback={
+        (value) => { 
+          setFieldValue("isbn", value);
+          setScanEnabled(false);
+        }
+      }/>
       <input
         type="text"
         name="isbn"
         id="isbn"
         onChange={handleChange}
         value={isbn}
+        placeholder="9782800159102"
       />
-    </label>
+    </div> 
   )
 }
 
@@ -89,23 +120,25 @@ const AuthorsField = ({
   return (
     <FieldArray name="authors">
       {({ remove, push }) => (
-        <div>
+        <div id={style.authorField}>
+          <label>Auteurs</label>
+          <button type="button" onClick={() => push("") }>+</button>
+          <br/>
           {authors.map((_author, index) => {
             return (
-              <label htmlFor={`authors.${index}`} key={index}>
-              Author:
-              <Field
-                type="text"
-                name={`authors.${index}`}
-                id={`authors.${index}`}
-              >
-              </Field>
-              {index !== 0 ? <button type="button" onClick={() => {remove(index)} }>x</button> : <></>}
-              <br/>
-              </label>
+              <div key={index}>
+                <Field
+                  type="text"
+                  name={`authors.${index}`}
+                  id={`authors.${index}`}
+                  placeholder="Franquin"
+                >
+                </Field>
+                {index !== 0 ? <button type="button" onClick={() => {remove(index)} }>x</button> : <></>}
+                <br/>
+              </div>
             )
           })}
-          <button type="button" onClick={() => push("") }>+</button>
         </div>)
       }
     </FieldArray>
@@ -123,16 +156,26 @@ const SeriesField = ({
   handleChange: ChangeEventHandler
 }) => {
   return (
-    <div>
-      <label htmlFor="series.name">
-        Series name: 
-        <Field name="series.name" onChange={handleChange} />
-      </label>
-      <br />
-      <label htmlFor="series.index">
-        Series index:
-        <Field name="series.index" onChange={handleChange} />
-      </label>
+    <div id={style.seriesField}>
+      <div id={style.seriesTitle}>
+        <label htmlFor="series.name">Série</label><br />
+        <Field 
+          name="series.name"
+          onChange={handleChange} 
+          component={
+            () => <input type="text" placeholder="Gaston Lagaffe" />
+          }
+        />
+      </div>
+      <div id={style.seriesNumber}>
+        <label htmlFor="series.index">Tome</label><br />
+        <Field 
+          name="series.index"
+          onChange={handleChange}
+          component={
+            () => <input type="number" placeholder="6" size={"Tome".length} />
+          }/>
+      </div>
     </div>
   )
 }
@@ -158,7 +201,7 @@ export default function AddBookForm() {
     setLibrary(addBookToDataset(book, library));
   }
 
-  return (<div>
+  return (<div className={ style.addBookFormContainer }>
     <Formik
       initialValues={initalValues}
       onSubmit={(book, { setSubmitting, resetForm }) => {
@@ -169,38 +212,45 @@ export default function AddBookForm() {
     >
       {props => (
         <form onSubmit={props.handleSubmit}>
-          <BookTitleField
-            handleChange={props.handleChange}
-            title={props.values.title}
-          />
-          { props.errors.title && props.touched.title }
-          <LangTagField
-            handleChange={props.handleChange}
-            langTag={props.values.langTag}
-          />
-          <br />
-          <IsbnField
-            handleChange={props.handleChange}
-            isbn={props.values.isbn}
-          />
-          {props.errors.isbn && props.touched.isbn}
-          <br />
-          <AuthorsField
-            authors={props.values.authors}
-          />
-          <br />
-          <SeriesField 
-            series={props.values.series}
-            handleChange={props.handleChange}
-          />
-          <br />
-          <button type="submit" disabled={props.isSubmitting}>
-            Submit
-          </button>
+          <fieldset className={ style.addBookForm }>
+            <legend>Ajoute un livre à ta collection</legend>
+            <BookTitleField
+              handleChange={props.handleChange}
+              title={props.values.title}
+            />
+            { props.errors.title && props.touched.title }
+            <LangTagField
+              handleChange={props.handleChange}
+              langTag={props.values.langTag}
+            />
+            <br />
+            <IsbnField
+              handleChange={props.handleChange}
+              isbn={props.values.isbn}
+            />
+            {props.errors.isbn && props.touched.isbn}
+            <br />
+            <AuthorsField
+              authors={props.values.authors}
+            />
+            <br />
+            <SeriesField 
+              series={props.values.series}
+              handleChange={props.handleChange}
+            />
+            <br />
+            <button type="submit" disabled={props.isSubmitting} id={style.submitButton}>
+              Enregistrer
+            </button>
+          </fieldset>
         </form>
         )}
     </Formik>
     {/* The following must be present for the BarcodeReader component to anchor into. */}
-    <div id={BARCODE_CONTAINER_ID}></div>
+    <div className={style["barcode-modal"]} id="barcode-modal">
+      <div className={style["barcode-container"]} id="barcode-container">
+        <div id={BARCODE_VIEWER_ID} className={style["barcode-viewer"]}></div>
+      </div>
+    </div>
   </div>)
 }
diff --git a/src/components/Booklist.module.css b/src/components/Booklist.module.css
index 9f01b17..49783fc 100644
--- a/src/components/Booklist.module.css
+++ b/src/components/Booklist.module.css
@@ -6,7 +6,14 @@
 .bookTable {
     border: solid black 1px ;
     margin: 1rem;
-    border-collapse: collapse;
+    border-spacing: 0;
+    /* Setting border-collapse to collapse prevents rounded corners.
+     * Setting border-spacing to 0 gets a similar result instead.
+     */
+    /* border-collapse: collapse; */
+    border-collapse: separate;
+    border-radius: 15px;
+    overflow: hidden;
 }
 
 .bookTable thead th {
diff --git a/src/components/domConstants.ts b/src/components/domConstants.ts
index d84dff5..f642850 100644
--- a/src/components/domConstants.ts
+++ b/src/components/domConstants.ts
@@ -1 +1 @@
-export const BARCODE_CONTAINER_ID = 'barcode-container';
+export const BARCODE_VIEWER_ID = 'barcode-viewer';
diff --git a/src/lib/barcode.js b/src/lib/barcode.js
index 6becccb..ba12d77 100644
--- a/src/lib/barcode.js
+++ b/src/lib/barcode.js
@@ -1,9 +1,9 @@
 import Quagga from "quagga";
-import { BARCODE_CONTAINER_ID } from "../components/domConstants"
+import { BARCODE_VIEWER_ID } from "../components/domConstants"
 
 function stopScanning() {
   Quagga.stop();
-  const container = document.querySelector(`#${BARCODE_CONTAINER_ID}`);
+  const container = document.querySelector(`#${BARCODE_VIEWER_ID}`);
   if(container !== null) {
     Array.from(container.childNodes).forEach((child) => {
       container.removeChild(child);
@@ -21,7 +21,7 @@ export function runDetection(onDetectedCallback) {
         facingMode: "environment",
         aspectRatio: {min: 1, max: 2}
     },
-      target: document.querySelector(`#${BARCODE_CONTAINER_ID}`)
+      target: document.querySelector(`#${BARCODE_VIEWER_ID}`)
     },
     locator: {
       patchSize: "medium",
diff --git a/src/pages/AddPage.tsx b/src/pages/AddPage.tsx
index 05b2d22..5df4d58 100644
--- a/src/pages/AddPage.tsx
+++ b/src/pages/AddPage.tsx
@@ -10,16 +10,12 @@ export default function AddPage() {
   const {library } = useContext(LibraryContext);
   
   if (!session.info.isLoggedIn) {
-    return <div>Please log in to add a book to your library.</div>
+    return <p>Please log in to add a book to your library.</p>;
   }
 
-  return (
-    <div>
-      <h1>Add a book to your library, {session.info.webId}</h1>
-      { library !== undefined 
-        ? <AddBookForm/>
-        : <p>To be add books to your library, please define a library root first.</p>
-      }
-    </div>
-  )
+  if (library === undefined) {
+    return <p>To be add books to your library, please define a library root first.</p>;
+  }
+
+  return <AddBookForm/>;
 }