diff --git a/AquaNet/src/LoadingMessage.svelte b/AquaNet/src/LoadingMessage.svelte
new file mode 100644
index 00000000..715c7bc7
--- /dev/null
+++ b/AquaNet/src/LoadingMessage.svelte
@@ -0,0 +1,45 @@
+<div class="pleaseWait">
+    <div class="loadingCircleDiv"><div class="loadingCircle">
+        <div></div>
+        </div></div>
+        <style type="text/css">
+        .pleaseWait {
+            margin:auto;
+        }
+
+        @keyframes loadingCircle {
+          0% { transform: rotate(0deg) }
+          50% { transform: rotate(180deg) }
+          100% { transform: rotate(360deg) }
+        }
+        .loadingCircle div {
+          position: absolute;
+          animation: loadingCircle 1s linear infinite;
+          width: 82px;
+          height: 82px;
+          top: 9px;
+          left: 9px;
+          border-radius: 50%;
+          box-shadow: 0 4.1px 0 0 #93dbe9;
+          transform-origin: 41px 43.05px;
+        }
+        .loadingCircleDiv {
+          width: 94px;
+          height: 94px;
+          display: inline-block;
+          overflow: hidden;
+          background: none;
+        }
+        .loadingCircle {
+          width: 100%;
+          height: 100%;
+          position: relative;
+          transform: translateZ(0) scale(0.94);
+          backface-visibility: hidden;
+          transform-origin: 0 0;
+        }
+        .loadingCircle div { box-sizing: content-box; }
+        </style>
+<p>Please Wait...</p>
+</div>
+
diff --git a/AquaNet/src/libs/generalTypes.ts b/AquaNet/src/libs/generalTypes.ts
index cc52896e..66f0f782 100644
--- a/AquaNet/src/libs/generalTypes.ts
+++ b/AquaNet/src/libs/generalTypes.ts
@@ -64,6 +64,7 @@ export interface GenericGamePlaylog {
 
 export interface GenericRanking {
   name: string
+  username: string
   rank: number
   accuracy: number
   rating: number
diff --git a/AquaNet/src/pages/MaimaiRating.svelte b/AquaNet/src/pages/MaimaiRating.svelte
index 3fc09a49..cd502650 100644
--- a/AquaNet/src/pages/MaimaiRating.svelte
+++ b/AquaNet/src/pages/MaimaiRating.svelte
@@ -4,6 +4,7 @@
   import type {ParsedRating, Rating} from "../libs/maimaiTypes";
   import { getMult } from "../libs/scoring";
   import ErrorMessage from "../ErrorMessage.svelte";
+    import LoadingMessage from "../LoadingMessage.svelte";
 
   export let userId: any
   userId = +userId
@@ -97,6 +98,8 @@
     {/each}
     {:else if ifError}
     <ErrorMessage {ifError}/>
+    {:else}
+    <LoadingMessage/>
     {/if}
   
 </main>
diff --git a/AquaNet/src/pages/Ranking.svelte b/AquaNet/src/pages/Ranking.svelte
index 690687c5..fa294341 100644
--- a/AquaNet/src/pages/Ranking.svelte
+++ b/AquaNet/src/pages/Ranking.svelte
@@ -3,6 +3,7 @@
   import { GAME } from "../libs/sdk";
   import type { GenericRanking } from "../libs/generalTypes";
   import ErrorMessage from "../ErrorMessage.svelte";
+  import LoadingMessage from "../LoadingMessage.svelte";
 
   title(`Ranking`);
 
@@ -49,7 +50,7 @@
   {:else if ifError}
   <ErrorMessage {ifError}/>
   {:else}
-    <p>Please Wait...</p>
+  <LoadingMessage/>
   {/if}
 </main>
 
@@ -97,4 +98,6 @@
 
     &.alternate
       background-color: $ov-light
+
+      
 </style>
diff --git a/AquaNet/src/pages/UserHome.svelte b/AquaNet/src/pages/UserHome.svelte
index b3494a96..a5b7b9cc 100644
--- a/AquaNet/src/pages/UserHome.svelte
+++ b/AquaNet/src/pages/UserHome.svelte
@@ -9,6 +9,7 @@
   import { DATA, GAME } from "../libs/sdk";
   import { type GameName, getMult } from "../libs/scoring";
   import ErrorMessage from "../ErrorMessage.svelte";
+  import LoadingMessage from "../LoadingMessage.svelte";
 
   registerChart()
 
@@ -197,7 +198,7 @@
     {:else if ifError}
     <ErrorMessage {ifError}/>
     {:else}
-    <p>Loading...</p>
+    <LoadingMessage/>
   {/if}
 </main>