diff --git a/css/games.css b/css/games.css
index 563b44d..15aba73 100755
--- a/css/games.css
+++ b/css/games.css
@@ -49,7 +49,7 @@ game img {
     transform: scale(1.1);
     filter: drop-shadow(0 0 5px var(--color-1))
 }
-#games, #starredgames {
+#games, #starredgames, #topGames {
     width: 90vw;
     display: flex;
     flex-direction: row;
@@ -63,11 +63,11 @@ game img {
     font-size: 24px;
     color: var(--color-1);
 }
-#starredHeader, #allHeader {
+#starredHeader, #allHeader, #topHeader {
     font-size: 32px;
     color: var(--color-1);
 }
-#noResults, #starredHeader, #allHeader {
+#noResults, #starredHeader, #allHeader, #topHeader {
     display: none;
 }
 body {
diff --git a/css/main.css b/css/main.css
index 532d49d..cae5684 100755
--- a/css/main.css
+++ b/css/main.css
@@ -108,7 +108,7 @@ option:hover {
 option:focus {
   background: color-mix(in srgb, var(--color-2) 60%, var(--color-4) 40%);
 }
-mobile-warning {
+mobile-warning, loading-game {
   position: absolute;
   top: 0;
   left: 0;
diff --git a/index.html b/index.html
index 0b8de2e..b1228d2 100755
--- a/index.html
+++ b/index.html
@@ -57,7 +57,38 @@
 		<!-- <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3415518411898563" crossorigin="anonymous"></script> -->
 		<script>
 			let currentPanic = {key: "", url: ""};
-			document.addEventListener("DOMContentLoaded", ()=>{
+			document.addEventListener("DOMContentLoaded", async ()=>{
+				let hash = location.hash.substring(1);
+				if(hash) {
+					// location.hash = "";
+					if(hash.startsWith("/u/")) {
+						document.getElementById("iframe").src = hash;
+					} else if(hash.startsWith("/g/")) {
+						document.querySelector("loading-game").style.display = "flex";
+						await fetch("/resources/games.json")
+						.then(data => data.json())
+						.then(data => {
+							data.forEach(el => {
+								if(el.directory == hash.substring(3)) {
+									document.getElementById("iframe").src = `/loader.html?title=${encodeURIComponent(el.name)}&dir=${el.directory}&img=${el.image}&type=g`
+								}
+							})
+						})
+						document.querySelector("loading-game").style.display = "none";
+					} else if(hash.startsWith("/a/")) {
+						document.querySelector("loading-game").style.display = "flex";
+						await fetch("/resources/apps.json")
+						.then(data => data.json())
+						.then(data => {
+							data.forEach(el => {
+								if(el.directory == hash.substring(3)) {
+									document.getElementById("iframe").src = `/loader.html?title=${encodeURIComponent(el.name)}&dir=${el.directory}&img=${el.image}&type=g`
+								}
+							})
+						});
+						document.querySelector("loading-game").style.display = "none";
+					}
+				}
 				let socket = new WebSocket("/socket");
 				socket.addEventListener("open", () => {
 					let cookies = document.cookie.split("; ");
@@ -142,6 +173,7 @@
 		</script>
 	</head>
 	<mobile-warning><h1 class="title">your device is not supported!</h1><p>please rotate your screen for the best experience.</p></mobile-warning>
+	<loading-game><h1 class="title">we are loading your game!</h1><p>please allow us to fetch the data first, this should only take a second.</p></loading-game>
 	<body>
         <iframe id="iframe" src="home.html"></iframe>
 		<!-- to do
diff --git a/js/games.js b/js/games.js
index 0ae7345..54e4bff 100755
--- a/js/games.js
+++ b/js/games.js
@@ -17,6 +17,7 @@ async function loadGames() {
     return 0;
   });
   let gamesElement = document.getElementById("games");
+  let topGElement = document.getElementById("topGames");
   let starredGames = JSON.parse(localStorage.getItem("selenite.starred") || '[]');
   sorted.forEach(element => {
     isStarred = starredGames.indexOf(element.directory) != -1;
@@ -24,7 +25,8 @@ async function loadGames() {
     newElement.setAttribute("data-target", element.directory);
     newElement.setAttribute("data-image", element.image);
     let image = document.createElement("img");
-    image.src = `/resources/semag/${element.directory}/${element.image}`
+    image.src = `/resources/semag/${element.directory}/${element.image}`;
+    image.loading = `lazy`;
     let holder = document.createElement("div");
     holder.id = "holder";
     let title = document.createElement("h1");
@@ -35,9 +37,18 @@ async function loadGames() {
     star.src = isStarred ? "/img/star-fill.svg" : "/img/star.svg";
     newElement.appendChild(image);
     holder.appendChild(title);
-    holder.appendChild(star);
     newElement.appendChild(holder);
-    gamesElement.appendChild(newElement);
+    if(element.tags) {
+      if(element.tags.includes("top")) {
+        topGElement.appendChild(newElement);
+      } else {
+        gamesElement.appendChild(newElement);
+        holder.appendChild(star);
+      }
+    } else {
+      gamesElement.appendChild(newElement);
+      holder.appendChild(star);
+    }
     elements.push(newElement);
     newElement.addEventListener("click", ()=>{
       location.href=`/loader.html?title=${encodeURIComponent(element.name)}&dir=${element.directory}&img=${element.image}&type=g`
@@ -51,6 +62,7 @@ async function loadGames() {
   document.getElementById("gameCount").innerText = `${data.length} games loaded!`;
   document.getElementById("loadingMsg").style.display = "none";
   document.getElementById("allHeader").style.display = "block";
+  document.getElementById("topHeader").style.display = "block";
   starredGames = JSON.parse(localStorage.getItem("selenite.starred") || '[]');
   if(starredGames.length > 0) {
     document.getElementById("starredHeader").style.display = "block";
diff --git a/js/particlesjs-config.json b/js/particlesjs-config.json
index afa918c..ba03b94 100755
--- a/js/particlesjs-config.json
+++ b/js/particlesjs-config.json
@@ -1,7 +1,7 @@
 {
   "particles": {
     "number": {
-      "value": 100,
+      "value": 30,
       "density": {
         "enable": true,
         "value_area": 800
@@ -25,7 +25,7 @@
       "random": true,
       "anim": {
         "enable": true,
-        "speed": 1,
+        "speed": 0.4,
         "opacity_min": 0,
         "sync": false
       }
@@ -35,7 +35,7 @@
       "random": true,
       "anim": {
         "enable": true,
-        "speed": 1,
+        "speed": 0.4,
         "size_min": 0.3,
         "sync": false
       }
diff --git a/projects.html b/projects.html
index 38f081c..177c9a5 100755
--- a/projects.html
+++ b/projects.html
@@ -36,9 +36,10 @@
 			<input type="text" class="searchbar" id="gamesearch" placeholder="Type here to search.." />
 			<p id="gameCount">xx games loaded..</p>
 			<p id="starredHeader">starred games</p>
-			<div id="starredgames">
-			</div>
-			<p id="allHeader">all games</p>
+			<div id="starredgames"></div>
+			<p id="topHeader" class="title">top games</p>
+			<div id="topGames"></div>
+			<p id="allHeader" class="title">all games</p>
 			<div id="games">
 				<p id="loadingMsg">games loading..</p>
 				<p id="noResults">nothing was found! try a new search query.</p>
