diff --git a/public/404.html b/public/404.html
index 411b182..fe0a593 100644
--- a/public/404.html
+++ b/public/404.html
@@ -17,7 +17,7 @@
 		</div>
 		<div class="launcher">
 			<div class="title-bar">
-				<span id="title-bar-text">MineXLauncher</span>
+				<span>MineXLauncher</span>
 			</div>
 			<div class="content">
 				<div class="main-panel">
diff --git a/public/articles/index.html b/public/articles/index.html
index e56a805..8a59ed1 100644
--- a/public/articles/index.html
+++ b/public/articles/index.html
@@ -9,6 +9,35 @@
 		<link rel="stylesheet" id="theme" onload="document.documentElement.style.display = ''" />
 		<script src="/resources/scripts/google-tag.js"></script>
 		<script src="/resources/scripts/main.js"></script>
+		<script>
+			document.addEventListener('DOMContentLoaded', function () {
+				const modal = document.getElementById('article-modal');
+				const modalContent = document.getElementById('article-modal-content');
+				const closeButton = document.querySelector('.close-button');
+
+				document.querySelectorAll('.article-item').forEach((item) => {
+					item.addEventListener('click', function () {
+						const articleName = this.querySelector('.article-name').textContent;
+						const articleDescription = this.querySelector('.article-description').textContent;
+
+						modalContent.innerHTML = `
+                    <h2>${articleName}</h2>
+                    <p>${articleDescription}</p>
+                `;
+
+						modal.style.display = 'block';
+					});
+				});
+
+				closeButton.addEventListener('click', function () {
+					modal.style.display = 'none';
+				});
+
+				modal.addEventListener('click', function () {
+					modal.style.display = 'none';
+				});
+			});
+		</script>
 	</head>
 	<body>
 		<div class="ads-container">
@@ -16,12 +45,12 @@
 		</div>
 		<div class="launcher">
 			<div class="title-bar">
-				<span id="title-bar-text">MineXLauncher</span>
+				<span>MineXLauncher</span>
 			</div>
 			<div class="content">
 				<div class="sidebar">
 					<div class="profile">
-						<span class="profile-name" id="profile-name"></span>
+						<span class="profile-name"></span>
 					</div>
 					<nav>
 						<li class="nav-item" onclick="navigate.updates()">
@@ -65,6 +94,27 @@
 							</div>
 						</div>
 					</div>
+					<div class="article-modal" id="article-modal">
+						<span class="close-button">&times;</span>
+						<div id="article-content">
+							<p>hello world</p>
+							<p>hello world</p>
+							<p>hello world</p>
+							<p>hello world</p>
+							<p>hello world</p>
+							<p>hello world</p>
+							<p>hello world</p>
+							<p>hello world</p>
+							<p>hello world</p>
+							<p>hello world</p>
+							<p>hello world</p>
+							<p>hello world</p>
+							<p>hello world</p>
+							<p>hello world</p>
+							<p>hello world</p>
+							<p>hello world</p>
+						</div>
+					</div>
 				</div>
 			</div>
 			<div class="bottom-bar">
diff --git a/public/home/archive/index.html b/public/home/archive/index.html
index dcdf946..eca9c09 100644
--- a/public/home/archive/index.html
+++ b/public/home/archive/index.html
@@ -16,12 +16,12 @@
 		</div>
 		<div class="launcher">
 			<div class="title-bar">
-				<span id="title-bar-text">MineXLauncher</span>
+				<span>MineXLauncher</span>
 			</div>
 			<div class="content">
 				<div class="sidebar">
 					<div class="profile">
-						<span class="profile-name" id="profile-name"></span>
+						<span class="profile-name"></span>
 					</div>
 					<nav>
 						<li class="nav-item" onclick="navigate.updates()">
diff --git a/public/home/clients/index.html b/public/home/clients/index.html
index adf5e21..8239bf1 100644
--- a/public/home/clients/index.html
+++ b/public/home/clients/index.html
@@ -16,12 +16,12 @@
 		</div>
 		<div class="launcher">
 			<div class="title-bar">
-				<span id="title-bar-text">MineXLauncher</span>
+				<span>MineXLauncher</span>
 			</div>
 			<div class="content">
 				<div class="sidebar">
 					<div class="profile">
-						<span class="profile-name" id="profile-name"></span>
+						<span class="profile-name"></span>
 					</div>
 					<nav>
 						<li class="nav-item" onclick="navigate.updates()">
diff --git a/public/home/downloads/index.html b/public/home/downloads/index.html
index 3a10af1..0071f33 100644
--- a/public/home/downloads/index.html
+++ b/public/home/downloads/index.html
@@ -16,12 +16,12 @@
 		</div>
 		<div class="launcher">
 			<div class="title-bar">
-				<span id="title-bar-text">MineXLauncher</span>
+				<span>MineXLauncher</span>
 			</div>
 			<div class="content">
 				<div class="sidebar">
 					<div class="profile">
-						<span class="profile-name" id="profile-name"></span>
+						<span class="profile-name"></span>
 					</div>
 					<nav>
 						<li class="nav-item" onclick="navigate.updates()">
diff --git a/public/home/game/index.html b/public/home/game/index.html
index 79dbfab..d172d49 100644
--- a/public/home/game/index.html
+++ b/public/home/game/index.html
@@ -16,12 +16,12 @@
 		</div>
 		<div class="launcher">
 			<div class="title-bar">
-				<span id="title-bar-text">MineXLauncher</span>
+				<span>MineXLauncher</span>
 			</div>
 			<div class="content">
 				<div class="sidebar">
 					<div class="profile">
-						<span class="profile-name" id="profile-name"></span>
+						<span class="profile-name"></span>
 					</div>
 					<nav>
 						<li class="nav-item" onclick="navigate.updates()">
diff --git a/public/mobile/index.html b/public/mobile/index.html
index c5aeaf4..4d2085b 100644
--- a/public/mobile/index.html
+++ b/public/mobile/index.html
@@ -13,12 +13,12 @@
 	<body>
 		<div class="launcher">
 			<div class="title-bar">
-				<span id="title-bar-text">MineXLauncher</span>
+				<span>MineXLauncher</span>
 			</div>
 			<div class="content">
 				<div class="sidebar">
 					<div class="profile">
-						<span class="profile-name" id="profile-name"></span>
+						<span class="profile-name"></span>
 					</div>
 					<nav>
 						<li class="nav-item selected" onclick="navigate.mobile()">
diff --git a/public/mods/mods/index.html b/public/mods/mods/index.html
index 6755b92..d995510 100644
--- a/public/mods/mods/index.html
+++ b/public/mods/mods/index.html
@@ -16,12 +16,12 @@
 		</div>
 		<div class="launcher">
 			<div class="title-bar">
-				<span id="title-bar-text">MineXLauncher</span>
+				<span>MineXLauncher</span>
 			</div>
 			<div class="content">
 				<div class="sidebar">
 					<div class="profile">
-						<span class="profile-name" id="profile-name"></span>
+						<span class="profile-name"></span>
 					</div>
 					<nav>
 						<li class="nav-item" onclick="navigate.updates()">
diff --git a/public/mods/resourcepacks/index.html b/public/mods/resourcepacks/index.html
index 23324f0..951d02c 100644
--- a/public/mods/resourcepacks/index.html
+++ b/public/mods/resourcepacks/index.html
@@ -16,12 +16,12 @@
 		</div>
 		<div class="launcher">
 			<div class="title-bar">
-				<span id="title-bar-text">MineXLauncher</span>
+				<span>MineXLauncher</span>
 			</div>
 			<div class="content">
 				<div class="sidebar">
 					<div class="profile">
-						<span class="profile-name" id="profile-name"></span>
+						<span class="profile-name"></span>
 					</div>
 					<nav>
 						<li class="nav-item" onclick="navigate.updates()">
diff --git a/public/offline.html b/public/offline.html
index 940cf89..2ff3bb5 100644
--- a/public/offline.html
+++ b/public/offline.html
@@ -17,7 +17,7 @@
 		</div>
 		<div class="launcher">
 			<div class="title-bar">
-				<span id="title-bar-text">MineXLauncher</span>
+				<span>MineXLauncher</span>
 			</div>
 			<div class="content">
 				<div class="main-panel">
diff --git a/public/offline/index.html b/public/offline/index.html
index b62a0ae..e3d700c 100644
--- a/public/offline/index.html
+++ b/public/offline/index.html
@@ -14,12 +14,12 @@
 	<body>
 		<div class="launcher">
 			<div class="title-bar">
-				<span id="title-bar-text">MineXLauncher</span>
+				<span>MineXLauncher</span>
 			</div>
 			<div class="content">
 				<div class="sidebar">
 					<div class="profile">
-						<span class="profile-name" id="profile-name"></span>
+						<span class="profile-name"></span>
 					</div>
 					<nav>
 						<li class="nav-item selected" href="/offline/">
diff --git a/public/resources/styles/themes/default.css b/public/resources/styles/themes/default.css
index 51fef8a..a061894 100644
--- a/public/resources/styles/themes/default.css
+++ b/public/resources/styles/themes/default.css
@@ -763,3 +763,51 @@ nav {
 	color: #bbb;
 	margin-bottom: 10px;
 }
+
+.article-modal {
+	display: none;
+	position: fixed;
+	z-index: 1000;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	overflow: auto;
+	background-color: rgba(0, 0, 0, 0.5);
+	transition: opacity 0.3s ease;
+	background-color: #333;
+	margin: 15% auto;
+	padding: 20px;
+	border: 1px solid #888;
+	width: 80%;
+	color: #fff;
+	border-radius: 8px;
+	max-width: 80vw;
+	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+	animation: slide-down 0.3s ease-out;
+}
+
+.close-button {
+	color: #aaa;
+	float: right;
+	font-size: 28px;
+	font-weight: bold;
+}
+
+.close-button:hover,
+.close-button:focus {
+	color: #000;
+	text-decoration: none;
+	cursor: pointer;
+}
+
+@keyframes slide-down {
+	from {
+		transform: translateY(-50px);
+		opacity: 0;
+	}
+	to {
+		transform: translateY(0);
+		opacity: 1;
+	}
+}
diff --git a/public/servers/index.html b/public/servers/index.html
index f982f41..d9b8e2a 100644
--- a/public/servers/index.html
+++ b/public/servers/index.html
@@ -16,12 +16,12 @@
 		</div>
 		<div class="launcher">
 			<div class="title-bar">
-				<span id="title-bar-text">MineXLauncher</span>
+				<span>MineXLauncher</span>
 			</div>
 			<div class="content">
 				<div class="sidebar">
 					<div class="profile">
-						<span class="profile-name" id="profile-name"></span>
+						<span class="profile-name"></span>
 					</div>
 					<nav>
 						<li class="nav-item" onclick="navigate.updates()">
diff --git a/public/settings/index.html b/public/settings/index.html
index 0ec21e6..857bc63 100644
--- a/public/settings/index.html
+++ b/public/settings/index.html
@@ -16,12 +16,12 @@
 		</div>
 		<div class="launcher">
 			<div class="title-bar">
-				<span id="title-bar-text">MineXLauncher</span>
+				<span>MineXLauncher</span>
 			</div>
 			<div class="content">
 				<div class="sidebar">
 					<div class="profile">
-						<span class="profile-name" id="profile-name"></span>
+						<span class="profile-name"></span>
 					</div>
 					<nav>
 						<li class="nav-item" onclick="navigate.updates()">
diff --git a/public/updates/index.html b/public/updates/index.html
index 2e2dc1e..ac0cf01 100644
--- a/public/updates/index.html
+++ b/public/updates/index.html
@@ -16,12 +16,12 @@
 		</div>
 		<div class="launcher">
 			<div class="title-bar">
-				<span id="title-bar-text">MineXLauncher</span>
+				<span>MineXLauncher</span>
 			</div>
 			<div class="content">
 				<div class="sidebar">
 					<div class="profile">
-						<span class="profile-name" id="profile-name"></span>
+						<span class="profile-name"></span>
 					</div>
 					<nav>
 						<li class="nav-item selected" onclick="navigate.updates()">
@@ -55,7 +55,7 @@
 						<span class="game-title">Updates</span>
 					</div>
 					<div class="main-content">
-						<div class="updates-container" id="updates-container"></div>
+						<div class="updates-container"></div>
 					</div>
 				</div>
 			</div>
diff --git a/public/welcome/index.html b/public/welcome/index.html
index 3a4406b..c9297b3 100644
--- a/public/welcome/index.html
+++ b/public/welcome/index.html
@@ -14,7 +14,7 @@
 	<body>
 		<div class="launcher">
 			<div class="title-bar">
-				<span id="title-bar-text">MineXLauncher</span>
+				<span>MineXLauncher</span>
 			</div>
 			<div class="content">
 				<div class="main-panel">
diff --git a/src/resources/scripts/main.ts b/src/resources/scripts/main.ts
index bb4dd95..8c528df 100644
--- a/src/resources/scripts/main.ts
+++ b/src/resources/scripts/main.ts
@@ -377,8 +377,8 @@ if (window.location.pathname === '/') {
 	theme.load();
 
 	document.addEventListener('DOMContentLoaded', async () => {
-		const profileName = document.getElementById('profile-name');
-		const titleBarText = document.getElementById('title-bar-text');
+		const profileName = document.querySelector('.profile-name');
+		const titleBarText = document.querySelector('.title-bar span');
 
 		const lastVersion = storage.local.get('lastVersion');
 		const updateData = (await (await fetch('/resources/data/main.json')).json()).updates;
@@ -407,7 +407,7 @@ if (window.location.pathname === '/') {
 			googleAdsPush.text = '(adsbygoogle = window.adsbygoogle || []).push({});';
 			document.body.appendChild(googleAdsPush);
 
-			const adsContainers = Array.from(document.getElementsByClassName('ads-container')) as HTMLElement[];
+			const adsContainers = document.querySelectorAll('ads-container');
 			adsContainers.forEach((adsContainer) => {
 				adsContainer.style.display = 'flex';
 			});
@@ -417,12 +417,12 @@ if (window.location.pathname === '/') {
 
 if (window.location.pathname === '/settings/') {
 	document.addEventListener('DOMContentLoaded', async () => {
-		const profileName = document.getElementById('profile-name');
+		const profileName = document.querySelector('.profile-name');
 		const usernameInput = document.getElementById('username-input') as HTMLInputElement;
 		const themeSelect = document.getElementById('theme-select') as HTMLSelectElement;
 		// const offlineCheckbox = document.getElementById('offline-checkbox') as HTMLInputElement;
 		// const adsCheckbox = document.getElementById('ads-checkbox') as HTMLInputElement;
-		const themeData: { id: string; name: string }[] = (await (await fetch('/resources/data/main.json')).json()).themes;
+		const themeData: { id: string; name: string }[] = await(await fetch('/resources/data/main.json')).json().themes;
 
 		themeData.forEach((theme: { id: string; name: string }) => {
 			const option = document.createElement('option');
@@ -462,7 +462,7 @@ if (window.location.pathname === '/settings/') {
 
 		/* adsCheckbox.addEventListener('change', () => {
 			storage.local.set('showAds', adsCheckbox.checked);
-			const adsContainers = Array.from(document.getElementsByClassName('ads-container')) as HTMLElement[];
+			const adsContainers = querySelectorAll('ads-container');
 			adsContainers.forEach((adsContainer) => (adsContainer.style.display = 'none'));
 		}); */
 	});
@@ -543,7 +543,7 @@ if (window.location.pathname === '/settings/') {
 
 		if (addonType === 'mods') {
 			const installedMods = storage.local.get('mods') ?? [];
-			const modElements = Array.from(document.getElementsByClassName('mod-install')) as HTMLAnchorElement[];
+			const modElements = document.querySelectorAll('mod-install');
 			modElements.forEach((modElement) => {
 				const modId = /^mod-install-(.*)$/.exec(modElement.id)?.[1];
 				if (installedMods.includes(`/resources/mods/downloads/${modId}.js`)) {
@@ -555,7 +555,7 @@ if (window.location.pathname === '/settings/') {
 	});
 } else if (window.location.pathname === '/updates/') {
 	document.addEventListener('DOMContentLoaded', async () => {
-		const updatesContainer = document.getElementById('updates-container');
+		const updatesContainer = document.querySelector('.updates-container');
 		const updateData: { version: string; changelog: string[] }[] = (await (await fetch('/resources/data/main.json')).json()).updates;
 		updateData.forEach((update) => {
 			const versionHeader = document.createElement('strong');
