diff --git a/images/germany.jpg b/images/germany.jpg
new file mode 100644
index 0000000..956c487
Binary files /dev/null and b/images/germany.jpg differ
diff --git a/pages/404.tsx b/pages/404.tsx
index 9fe0dc8..2869588 100644
--- a/pages/404.tsx
+++ b/pages/404.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import Head from "next/head";
-import Image from "next/image";
+import Image from "next/legacy/image";
 import src from "../images/trees.jpeg";
 
 const NotFound = () => {
@@ -28,7 +28,7 @@ const NotFound = () => {
         </h1>
       </header>
       <section>
-        <Image src={src} layout="responsive" />
+        <Image alt="Not found" src={src} layout="responsive" />
       </section>
     </main>
   );
diff --git a/pages/500.tsx b/pages/500.tsx
index af432f6..e7397df 100644
--- a/pages/500.tsx
+++ b/pages/500.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import Head from "next/head";
-import Image from "next/image";
+import Image from "next/legacy/image";
 import src from "../images/trees.jpeg";
 
 const ServerError = () => {
@@ -28,7 +28,7 @@ const ServerError = () => {
         </h1>
       </header>
       <section>
-        <Image src={src} layout="responsive" />
+        <Image alt="IDK" src={src} layout="responsive" />
       </section>
     </main>
   );
diff --git a/pages/api/update-user.ts b/pages/api/update-user.ts
index a1a1252..365371a 100644
--- a/pages/api/update-user.ts
+++ b/pages/api/update-user.ts
@@ -1,38 +1,44 @@
 import type { NextApiRequest, NextApiResponse } from "next";
-import { getSession } from "next-auth/react";
+import { getServerSession } from "next-auth/next";
 import { MongoClient } from "mongodb";
+import { authOptions } from "./auth/[...nextauth]";
 
 const client = new MongoClient(process.env.MONGODB_URI || "");
 
 export default async (req: NextApiRequest, res: NextApiResponse) => {
-    const session = await getSession({ req });
-    if (!session || !req.body.username) {
-        return res.status(400).send({
-            error:
-                "You're missing to log in or to provide the username to set.",
-        });
-    }
+  const session = await getServerSession(req, res, authOptions);
+  if (!session || !req.body.username) {
+    return res.status(400).send({
+      error: "You're missing to log in or to provide the username to set.",
+    });
+  }
 
-    if (!req.body.username.match(/^[a-zA-Z0-9_]+$/)) {
-        return res.status(400).send({
-            error: "The username use only letters, numbers and underscores.",
-        })
-    } else if (req.body.username.length > 21) {
-        return res.status(400).send({
-            error: "The username must be between 1 and 21 characters long.",
-        })
-    }
+  if (!req.body.username.match(/^[a-zA-Z0-9_]+$/)) {
+    return res.status(400).send({
+      error: "The username use only letters, numbers and underscores.",
+    });
+  } else if (req.body.username.length > 21) {
+    return res.status(400).send({
+      error: "The username must be between 1 and 21 characters long.",
+    });
+  }
 
-    console.log(req.body);
+  console.log(req.body);
 
-    const email = session?.user?.email;
-    await client.connect();
-    let db = await client.db("auth");
-    let doc = await db
-        .collection("users")
-        .findOneAndUpdate(
-            { email },
-            { $set: { username: req.body.username, name: req.body.name, bio: req.body.bio } }
-        );
-    return res.status(200).send(doc);
+  const email = session?.user?.email;
+  await client.connect();
+  let db = await client.db("auth");
+  let doc = await db
+    .collection("users")
+    .findOneAndUpdate(
+      { email },
+      {
+        $set: {
+          username: req.body.username,
+          name: req.body.name,
+          bio: req.body.bio,
+        },
+      }
+    );
+  return res.status(200).send(doc);
 };
diff --git a/pages/index.tsx b/pages/index.tsx
index b73193d..715d420 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -5,7 +5,7 @@ import Link from "next/link";
 import Footer from "../components/Footer";
 import Navbar from "../components/Navbar";
 import { useSession } from "next-auth/react";
-import src from "../images/desert.jpeg";
+import src from "../images/germany.jpg";
 import { usePostsContext } from "../context/posts";
 import Post from "../components/Post";
 import { PostType } from "../types/Post";
@@ -66,18 +66,18 @@ export default function Home() {
             )}
           </div>
         </header>
-        <section>
-          <Image
-            src={src}
-            alt="Cover image"
-            width="100"
-            height="38"
-            className="object-cover"
-            layout="responsive"
-            priority={true}
-            placeholder="blur"
-            blurDataURL={"/desert.jpeg"}
-          />
+        <section className="max-h-screen h-[75vh] w-full">
+          <div className="relative h-full w-full">
+            <Image
+              src={src}
+              alt="Cover image"
+              className="object-cover"
+              fill
+              priority={true}
+              placeholder="blur"
+              blurDataURL={"/germany.jpeg"}
+            />
+          </div>
         </section>
         <section id="posts" className="max-w-6xl mx-auto">
           <h1 className="text-4xl md:text-6xl lg:text-8xl tracking-tighter font-bold text-black pt-8 pb-2">