diff --git a/public/manifest.json b/public/manifest.json
new file mode 100644
index 0000000..e651073
--- /dev/null
+++ b/public/manifest.json
@@ -0,0 +1,15 @@
+{
+    "name": "Accord’s Library",
+    "short_name": "Accord’s Library",
+    "start_url": ".",
+    "display": "standalone",
+    "background_color": "#FFEDD8",
+    "theme_color": "#FFEDD8",
+    "description": "Accord's Library aims at gathering and archiving all of Yoko Taro’s work. Yoko Taro is a Japanese video game director and scenario writer.",
+    "icons": [{
+      "src": "favicon.png",
+      "sizes": "551x551",
+      "type": "image/png"
+    }]
+  }
+  
\ No newline at end of file
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
index 2ff45cc..22d029f 100644
--- a/src/pages/_document.tsx
+++ b/src/pages/_document.tsx
@@ -36,6 +36,10 @@ class MyDocument extends Document {
           <meta name="twitter:title" content={siteTitle}></meta>
           <meta name="twitter:description" content={siteDescription}></meta>
           <meta name="twitter:image" content={thumbnailImage}></meta>
+          <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+          <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+          <link rel="manifest" href="manifest.json" />
+          <meta name="theme-color" content="#FFEDD8" />
         </Head>
         <body className="bg-light text-black">
           <Main />
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 2acd685..e84d3e1 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,8 +1,10 @@
 import AppLayout from "components/AppLayout";
 import ContentPanel from "components/Panels/ContentPanel";
+import SVG from "components/SVG";
 import { getWebsiteInterface } from "graphql/operations";
 import { GetWebsiteInterfaceQuery } from "graphql/operations-types";
 import { GetStaticProps } from "next";
+import Script from "next/script";
 type HomeProps = {
   langui: GetWebsiteInterfaceQuery;
 };
@@ -12,7 +14,29 @@ export default function Home(props: HomeProps): JSX.Element {
 
   const contentPanel = (
     <ContentPanel autoformat={true}>
-      <h2>Discover • Analyse • Translate • Archive</h2>
+      <div className="grid place-items-center place-content-center w-full gap-5">
+        <SVG
+          className="w-32 mobile:w-1/2"
+          src={"/icons/accords.svg"}
+          alt={"Logo of Accord's Library"}
+        />
+        <h1 className="text-5xl mb-0">Accord&rsquo;s Library</h1>
+        <h2 className="mt-0">Discover • Analyse • Translate • Archive</h2>
+      </div>
+
+      <button id="goFS">Go fullscreen</button>
+      <Script
+        id="myScript"
+        strategy="afterInteractive"
+        dangerouslySetInnerHTML={{
+          __html: `
+        var goFS = document.getElementById("goFS");
+  goFS.addEventListener("click", function() {
+      document.body.requestFullscreen();
+  }, false);`,
+        }}
+      ></Script>
+
       <h2>What is this?</h2>
       <p>
         Accord&rsquo;s Library aims at gathering and archiving all of Yoko
@@ -136,7 +160,11 @@ export default function Home(props: HomeProps): JSX.Element {
 
   return (
     <>
-      <AppLayout title={"Accord’s Library"} langui={langui} contentPanel={contentPanel} />
+      <AppLayout
+        title={"Accord’s Library"}
+        langui={langui}
+        contentPanel={contentPanel}
+      />
     </>
   );
 }
