diff --git a/packages/frontend/next.config.ts b/packages/frontend/next.config.ts
index b1ee927a..55354d2e 100644
--- a/packages/frontend/next.config.ts
+++ b/packages/frontend/next.config.ts
@@ -2,6 +2,9 @@ import type { NextConfig } from 'next';
 
 const nextConfig: NextConfig = {
   output: 'export',
+  images: {
+    unoptimized: true,
+  },
 };
 
 export default nextConfig;
diff --git a/packages/frontend/public/assets/background.png b/packages/frontend/public/assets/background.png
new file mode 100644
index 00000000..94cb135a
Binary files /dev/null and b/packages/frontend/public/assets/background.png differ
diff --git a/packages/frontend/public/assets/logo.png b/packages/frontend/public/assets/logo.png
new file mode 100644
index 00000000..b2181d8d
Binary files /dev/null and b/packages/frontend/public/assets/logo.png differ
diff --git a/packages/frontend/src/app/configure/page.module.css b/packages/frontend/src/app/configure/page.module.css
index 63b9a089..89d06d0d 100644
--- a/packages/frontend/src/app/configure/page.module.css
+++ b/packages/frontend/src/app/configure/page.module.css
@@ -1,10 +1,18 @@
 .container {
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
   min-height: 100vh;
 }
 
+.header {
+  text-align: center;
+  max-width: 800px;
+  border-radius: 8px;
+  margin: 20px;
+}
+
 .content {
   background-color: #000000; /* Slightly lighter black */
   border-radius: 8px;
diff --git a/packages/frontend/src/app/configure/page.tsx b/packages/frontend/src/app/configure/page.tsx
index 08395092..3ae1f661 100644
--- a/packages/frontend/src/app/configure/page.tsx
+++ b/packages/frontend/src/app/configure/page.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { useState, useEffect } from 'react';
+import Image from 'next/image';
 import styles from './page.module.css';
 import {
   Config,
@@ -306,7 +307,14 @@ export default function Configure() {
 
   return (
     <div className={styles.container}>
-      <div className={styles.content}>
+      <div className={styles.header}>
+        <Image
+          src="/assets/logo.png"
+          alt="AIOStreams Logo"
+          width={200}
+          height={200}
+          style={{ alignSelf: 'center', justifyContent: 'center' }}
+        />
         <h1 style={{ textAlign: 'center' }}>AIOStreams v{version}</h1>
         <p style={{ textAlign: 'center', padding: '15px' }}>
           AIOStreams, the all-in-one streaming addon for Stremio. Combine your
@@ -324,7 +332,8 @@ export default function Configure() {
             GitHub
           </a>
         </p>
-
+      </div>
+      <div className={styles.content}>
         <div className={styles.section}>
           <h2 style={{ padding: '5px' }}>Resolutions</h2>
           <p style={{ padding: '5px' }}>
diff --git a/packages/frontend/src/app/globals.css b/packages/frontend/src/app/globals.css
index 9a758c17..ca77ac9b 100644
--- a/packages/frontend/src/app/globals.css
+++ b/packages/frontend/src/app/globals.css
@@ -1,5 +1,5 @@
 :root {
-  --background: #131313;
+  --background: linear-gradient(200deg, #181818, #111111);
   --foreground: #ededed;
 }