diff --git a/app/layout.tsx b/app/layout.tsx
index dd73bca..3fba2b1 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -3,7 +3,6 @@ import "../styles/tailwind.css";
 import { Metadata, Viewport } from "next";
 import { Inter } from "next/font/google";
 import Navbar from "@/components/navbar";
-import Footer from "@/components/footer";
 
 export const metadata: Metadata = {
   title: "Hey, I'm AutoKill",
@@ -30,8 +29,10 @@ export default function RootLayout({
         <div className="mx-auto max-w-3xl px-5">
           <Navbar />
           {children}
+
+          <div className="py-4 mb-2"></div>
+
           <Analytics />
-          <Footer />
         </div>
       </body>
     </html>
diff --git a/app/not-found.tsx b/app/not-found.tsx
index 3895dde..e653136 100644
--- a/app/not-found.tsx
+++ b/app/not-found.tsx
@@ -1,11 +1,20 @@
-import Animation from '@/components/animation';
+import Animation from "@/components/animation";
 
 export default function NotFound() {
   return (
     <Animation>
-      <div className="text-center">
-        <h1 className="text-4xl font-bold">404</h1>
-        <p className="text-xl">Page not found</p>
+      <div className="space-y-4">
+        <h1 className="text-4xl font-bold">Not Found 🚫</h1>
+        <p className="opacity-90">
+          You have reached a page that does not exist. If you think this is a
+          mistake, please contact me.
+        </p>
+        <a
+          className="bg-white/5 border border-white/10 block border-b-4 cursor-pointer p-3 rounded-lg text-center hover:scale-95 transition-all"
+          href="/"
+        >
+          Go back
+        </a>
       </div>
     </Animation>
   );
diff --git a/app/page.tsx b/app/page.tsx
index e9e2ec1..56a2dac 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,4 +1,5 @@
 import Animation from "@/components/animation";
+import Lanyard from "@/components/lanyard";
 import Technologies from "@/components/technologies";
 import Works from "@/components/works";
 
@@ -8,8 +9,8 @@ export default function Home() {
       <div className="space-y-10">
         <div className="space-y-4">
           <h1 className="text-5xl font-bold">
-            Hey there, I&apos;m{" "}
-            <span className="text-red-400 bg-clip-text">AutoKill</span> 👋
+            Hey there, I&apos;m <span className="text-red-400">AutoKill</span>{" "}
+            👋
           </h1>
           <p className="opacity-90">
             A software engineer from Belgrade, Serbia. I develop mainly backend
@@ -25,6 +26,13 @@ export default function Home() {
           </div>
         </div>
 
+        <div className="space-y-4">
+          <h1 className="text-4xl font-bold">Lanyard 📌</h1>
+          <div className="grid grid-cols-1 gap-2 lg:grid-cols-2">
+            <Lanyard />
+          </div>
+        </div>
+
         <div className="space-y-4">
           <h1 className="text-4xl font-bold">Works 🔧</h1>
           <p className="opacity-90">
@@ -32,7 +40,7 @@ export default function Home() {
             all my public & open source projects, check out my{" "}
             <a
               className="text-red-400 hover:underline underline-offset-4"
-              href="https://github.com/AutoKill"
+              href="https://github.com/camdzic"
               target="_blank"
             >
               GitHub profile
diff --git a/components/footer.tsx b/components/footer.tsx
deleted file mode 100644
index edb52bd..0000000
--- a/components/footer.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-export default function Footer() {
-  return (
-    <div className="py-6 mb-2">
-      <hr className="mt-3 h-px bg-white/20 border-0" />
-    </div>
-  );
-}
diff --git a/components/lanyard.tsx b/components/lanyard.tsx
new file mode 100644
index 0000000..555a7bf
--- /dev/null
+++ b/components/lanyard.tsx
@@ -0,0 +1,77 @@
+"use client";
+
+import Image from "next/image";
+import { useLanyardWS } from "use-lanyard";
+
+const classNames = {
+  online: "text-green-400",
+  offline: "opacity-60",
+  idle: "text-yellow-400",
+  dnd: "text-red-400",
+};
+
+const capitalize = (string: string) =>
+  string.charAt(0).toUpperCase() + string.slice(1);
+
+export default function Lanyard() {
+  const lanyard = useLanyardWS("1096880369111945257");
+
+  return lanyard ? (
+    <>
+      <a
+        className="bg-white/5 border border-white/10 border-b-4 cursor-pointer p-3 py-4 rounded-lg hover:scale-95 transition-all flex items-center"
+        href="https://discord.com/users/1096880369111945257"
+        target="_blank"
+      >
+        <Image
+          src={`https://cdn.discordapp.com/avatars/1096880369111945257/${lanyard.discord_user.avatar}.png`}
+          width={64}
+          height={64}
+          alt="discord avatar"
+          className="mr-3"
+        />
+
+        <div>
+          <p className="font-bold">Discord</p>
+          <p>{lanyard.discord_user.username}</p>
+          <p className={`${classNames[lanyard.discord_status]}`}>
+            {capitalize(lanyard.discord_status)}
+          </p>
+        </div>
+      </a>
+
+      {lanyard.spotify && (
+        <a
+          className="bg-white/5 border border-white/10 border-b-4 cursor-pointer p-3 py-4 rounded-lg hover:scale-95 transition-all flex items-center"
+          href={`https://open.spotify.com/track/${lanyard.spotify.track_id}`}
+          target="_blank"
+        >
+          {lanyard.spotify.album_art_url && (
+            <Image
+              src={lanyard.spotify.album_art_url}
+              width={64}
+              height={64}
+              alt="discord avatar"
+              className="mr-3"
+            />
+          )}
+
+          <div>
+            <p className="font-bold">Spotify</p>
+            <p>{lanyard.spotify.song}</p>
+            <p className="opacity-60">{lanyard.spotify.artist}</p>
+          </div>
+        </a>
+      )}
+    </>
+  ) : (
+    <>
+      <a className="bg-white/5 border border-white/10 border-b-4 p-3 py-4 rounded-lg">
+        <div className="w-28 animate-pulse">
+          <div className="mt-1 h-4 w-full overflow-hidden rounded-md bg-white/10"></div>
+          <div className="mt-1 h-4 w-2/3 overflow-hidden rounded-md bg-white/10"></div>
+        </div>
+      </a>
+    </>
+  );
+}
diff --git a/next.config.js b/next.config.js
index 3d3bc99..baa04bf 100644
--- a/next.config.js
+++ b/next.config.js
@@ -2,6 +2,14 @@
 const nextConfig = {
   reactStrictMode: true,
   swcMinify: true,
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "**",
+      },
+    ],
+  },
 };
 
 module.exports = nextConfig;
diff --git a/package-lock.json b/package-lock.json
index 798850b..fe2c86e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,7 +13,8 @@
         "next": "14.0.4",
         "react": "^18",
         "react-dom": "^18",
-        "react-icons": "^4.12.0"
+        "react-icons": "^4.12.0",
+        "use-lanyard": "^1.5.2"
       },
       "devDependencies": {
         "@types/node": "^20",
@@ -4579,6 +4580,18 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/use-lanyard": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/use-lanyard/-/use-lanyard-1.5.2.tgz",
+      "integrity": "sha512-clxZoUrzgvGa+9IAOv39e4yNjUEvmk/BjBbpIZ/0ymLmclypJkKJ86j5okEjBAACMkw+u1c4gf/zCifpOSwyDA==",
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-dom": "*"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
diff --git a/package.json b/package.json
index af219e5..af2f7e4 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,8 @@
     "next": "14.0.4",
     "react": "^18",
     "react-dom": "^18",
-    "react-icons": "^4.12.0"
+    "react-icons": "^4.12.0",
+    "use-lanyard": "^1.5.2"
   },
   "devDependencies": {
     "@types/node": "^20",