diff --git a/.gitignore b/.gitignore
index 2491807..9cde3ec 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,2 @@
-/tmp.txt
\ No newline at end of file
+/tmp.txt
+/commits.csv
\ No newline at end of file
diff --git a/docs/index.html b/docs/index.html
new file mode 100644
index 0000000..057ce60
--- /dev/null
+++ b/docs/index.html
@@ -0,0 +1,194 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>ElegantFin Theme</title>
+	<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
+	<style>
+		body {
+			font-family: 'Roboto', sans-serif;
+			background: #121212;
+			color: #fff;
+			margin: 0;
+			padding: 0;
+			line-height: 1.6;
+		}
+		header {
+			text-align: center;
+			padding: 2rem;
+			background-color: #1f1f1f;
+		}
+		header img {
+			max-width: 100%;
+			border-radius: 1rem;
+			box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
+		}
+		h1, h2, h3, h4 {
+			color: #00bcd4;
+		}
+		section {
+			padding: 2rem;
+			max-width: 1000px;
+			margin: auto;
+		}
+		a {
+			color: #03dac6;
+		}
+		hr {
+			border: 1px solid #333;
+			margin: 2rem 0;
+		}
+		ul {
+			list-style: disc inside;
+		}
+		details {
+			background: #1e1e1e;
+			border-radius: 0.5rem;
+			margin: 1rem 0;
+			padding: 1rem;
+		}
+		details summary {
+			cursor: pointer;
+			font-weight: bold;
+		}
+		table {
+			width: 100%;
+			border-collapse: collapse;
+			margin-top: 1rem;
+		}
+		td, th {
+			padding: 1rem;
+			text-align: center;
+		}
+		img.preview {
+			max-width: 100%;
+			border-radius: 0.5rem;
+			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+		}
+		.pair {
+			display: flex;
+			flex-wrap: wrap;
+			gap: 2rem;
+			justify-content: center;
+		}
+		.pair > div {
+			flex: 1;
+			min-width: 300px;
+		}
+		code, pre {
+			background: #272727;
+			color: #ccc;
+			padding: 0.5rem 1rem;
+			border-radius: 0.5rem;
+			display: block;
+			margin: 1rem 0;
+			overflow-x: auto;
+		}
+	</style>
+</head>
+<body>
+	<header>
+		<img src="https://github.com/lscambo13/ElegantFin-Next/blob/version-next/Theme/assets/img/banner.png?raw=true" alt="ElegantFin Theme for Jellyfin - Banner">
+	</header>
+
+	<section>
+		<h1>⭐ ElegantFin Theme</h1>
+		<p>This is a Jellyfin theme inspired from Jellyseerr to improve the overall look and experience with various fixes to the UI/UX. It gives Jellyfin a fresh, modern look, and it aims to work on mobile, desktop, and TV, with just one import.</p>
+		<h4><strong>Author:</strong> <a href="https://github.com/lscambo13">lscambo13</a></h4>
+
+		<hr>
+
+		<h2>✨ Key Features</h2>
+		<ul>
+			<li>Modern layouts and color tones</li>
+			<li>Same clean design across phone, desktop, and TV</li>
+			<li>New and improved animations on most elements</li>
+			<li>Rounded corners and even spacing everywhere</li>
+			<li>Stylish borders, hover effects and shadows</li>
+			<li>Neat layout that puts important stuff up front</li>
+			<li>Reduced unnecessary clutter</li>
+			<li>Various fixes to the user experience</li>
+		</ul>
+
+		<hr>
+
+		<h2>🖼️ Screenshots</h2>
+		<p>Captured on ElegantFin v25.07.27</p>
+
+		<details>
+			<summary>💻 <i>Desktop and </i>📱 <i>Mobile previews</i></summary>
+			<!-- Include a few preview images here for demonstration -->
+			<div class="pair">
+				<div>
+					<img class="preview" src="https://github.com/lscambo13/ElegantFin-Next/blob/version-next/Previews/preview-v25.07.27/optimized/desktop/1.%20Homepage.webp?raw=true" alt="Desktop Homepage">
+					<p><strong>Desktop - Homepage</strong></p>
+				</div>
+				<div>
+					<img class="preview" src="https://github.com/lscambo13/ElegantFin-Next/blob/version-next/Previews/preview-v25.07.27/optimized/mobile/1.%20Homepage.webp?raw=true" alt="Mobile Homepage">
+					<p><strong>Mobile - Homepage</strong></p>
+				</div>
+			</div>
+			<!-- Repeat for more images if needed -->
+		</details>
+
+		<details>
+			<summary>📺 <i>TV previews</i></summary>
+			<div class="pair">
+				<div>
+					<img class="preview" src="https://github.com/lscambo13/ElegantFin-Next/blob/version-next/Previews/preview-v25.07.27/optimized/tv/1.%20Homepage.webp?raw=true" alt="TV Homepage">
+					<p><strong>TV - Homepage</strong></p>
+				</div>
+			</div>
+		</details>
+
+		<hr>
+
+		<h2>👇 How to Install/Setup</h2>
+		<p><strong>Paste the following in the Custom CSS code box:</strong></p>
+		<code>@import url("https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@main/Theme/ElegantFin-jellyfin-theme-build-latest-minified.css");</code>
+
+		<details>
+			<summary><i>Detailed steps for server-side implementation</i></summary>
+			<ol>
+				<li>Open Dashboard from Administration tab in Settings.</li>
+				<li>Select General tab from the side bar.</li>
+				<li>Scroll down to find Custom CSS code box under Branding section.</li>
+				<li>Paste the custom CSS in Custom CSS code box.</li>
+				<li>Click save.</li>
+			</ol>
+		</details>
+
+		<details>
+			<summary><i>Detailed steps for client-side implementation</i></summary>
+			<ol>
+				<li>Open Display tab in Settings.</li>
+				<li>Scroll down to find Custom CSS code box.</li>
+				<li>Paste the custom CSS in Custom CSS code box.</li>
+				<li>Click save.</li>
+			</ol>
+		</details>
+
+		<hr>
+		<h2>🧰 Customisation Options</h2>
+		<p>Multiple details sections explaining custom background, card overlays, play button positions, hover effects, etc. can be added here. Each as a <code>&lt;details&gt;</code> with its own explanation and code snippets.</p>
+
+		<hr>
+		<h2>👌 Compatibility</h2>
+		<ul>
+			<li>Jellyfin Server v10.10.6</li>
+			<li>Jellyfin Android App v2.6.2</li>
+		</ul>
+
+		<hr>
+		<h2>🛠️ Troubleshooting</h2>
+		<p>Use <code>&lt;details&gt;</code> sections for FAQs like cache not clearing, visual bugs in media player, compatibility with AndroidTV/WebOS, etc.</p>
+
+		<hr>
+		<h2>📌 Contributing</h2>
+		<p>Please read the <a href="./CONTRIBUTING.md">Contributor Guidelines</a> before opening pull requests.</p>
+
+		<h2>🙏 Feedback Appreciated</h2>
+	</section>
+</body>
+</html>
