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..327d20eb 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
@@ -103,11 +104,13 @@ export interface MusicMeta {
   composer: string,
   bpm: number,
   ver: number,
-  note: {
-    lv: number
-    designer: string
-    lv_id: number
-    notes: number
+  notes: {
+    [key: number]: {
+      lv: number
+      designer: string
+      lv_id: number
+      notes: number
+    }
   }
 }
 
diff --git a/AquaNet/src/pages/MaimaiRating.svelte b/AquaNet/src/pages/MaimaiRating.svelte
index 3fc09a49..b6ca4ec1 100644
--- a/AquaNet/src/pages/MaimaiRating.svelte
+++ b/AquaNet/src/pages/MaimaiRating.svelte
@@ -4,10 +4,11 @@
   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
-  let ifError = null;
+  let ifError: string | null;
 
   if (!userId) console.error("No user ID provided")
 
@@ -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..10ac8fac 100644
--- a/AquaNet/src/pages/Ranking.svelte
+++ b/AquaNet/src/pages/Ranking.svelte
@@ -3,11 +3,12 @@
   import { GAME } from "../libs/sdk";
   import type { GenericRanking } from "../libs/generalTypes";
   import ErrorMessage from "../ErrorMessage.svelte";
+  import LoadingMessage from "../LoadingMessage.svelte";
 
   title(`Ranking`);
 
   let d: { users: GenericRanking[] };
-  let ifError = null;
+  let ifError: string | null;
   Promise.all([GAME.ranking("mai2")])
     .then(([users]) => {
       console.log(users)
@@ -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..a41c88e9 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()
 
@@ -16,7 +17,7 @@
   export let game: GameName
   game = game || "mai2"
   let calElement: HTMLElement
-  let ifError = null
+  let ifError: string | null;
   title(`User ${username}`)
 
   interface MusicAndPlay extends MusicMeta, GenericGamePlaylog {}
@@ -197,7 +198,7 @@
     {:else if ifError}
     <ErrorMessage {ifError}/>
     {:else}
-    <p>Loading...</p>
+    <LoadingMessage/>
   {/if}
 </main>