diff --git a/AquaNet/src/libs/config.ts b/AquaNet/src/libs/config.ts
index de33cde4..5de54b13 100644
--- a/AquaNet/src/libs/config.ts
+++ b/AquaNet/src/libs/config.ts
@@ -1,5 +1,5 @@
 
-const aqua_host = "https://aquadx.hydev.org"
-const data_host = "https://aqua-data.hydev.org"
+const aqua_host = 'https://aquadx.example.com'
+const data_host = 'https://aqua-data.example.com'
 
 export { aqua_host, data_host }
diff --git a/AquaNet/src/pages/MaimaiRating.svelte b/AquaNet/src/pages/MaimaiRating.svelte
new file mode 100644
index 00000000..21bbce80
--- /dev/null
+++ b/AquaNet/src/pages/MaimaiRating.svelte
@@ -0,0 +1,212 @@
+<script lang="ts">
+  import {data_host} from "../libs/config";
+
+  const data = {
+    username: "AZA☆",
+    rating: "701:2:19011:1006030,11528:2:23500:1006452,836:2:19910:995577,572:2:18021:997469,757:2:19507:993536,839:2:19911:1005278,606:2:18019:982216,11517:2:23014:993709,625:2:18503:993160,11408:2:22501:1005514,771:2:19511:993191,734:2:19500:989036,11479:2:23011:988050,11594:2:23503:1002051,682:2:19004:1000732,797:2:19900:982911,772:2:19511:987791,10204:2:23506:1001532,841:2:19912:992283,11565:3:23500:983334,11489:2:23000:997830,709:2:19013:986791,11469:2:23012:985848,11514:2:23014:1003829,720:2:19006:1001675,11565:2:23500:1001386,11003:3:20000:984282,11168:3:21004:983648,11588:2:23504:1000833,11410:3:22501:1000243,63:3:10000:1000119,11587:2:23504:998203,11236:2:21508:997255,375:3:14000:981309,510:2:19505:1004313",
+    ratingNew: "11642:2:24006:1003839,11580:3:24000:972621,11640:2:24006:985702,11633:2:24000:986507,11634:3:24000:985023,10411:2:24000:977957,11624:2:24000:966136,11578:2:24000:963522,11643:2:24006:962392,11629:3:24000:966908,11619:2:24005:939345,11640:3:24006:904054,11641:3:24006:903064,11642:3:24006:875413,11634:2:24000:922194"
+  }
+
+  const multTable = [
+      [100.5, 22.4],
+      [100, 21.6],
+      [99.5, 21.1],
+      [99, 20.8],
+      [98, 20.3],
+      [97, 20],
+      [94, 16.8],
+      [90, 15.2],
+      [80, 13.6]
+  ]
+
+  function getMult(achievement: number) {
+    achievement /= 10000
+    for (let i = 0; i < multTable.length; i++) {
+      if (achievement >= multTable[i][0]) {
+        return multTable[i][1]
+      }
+    }
+    return 0
+  }
+
+  // Parse rating
+  function parseRatings(rating: string, musicInfo: any) {
+    const arr = rating.split(',').map(x => x.split(':').map(x => parseInt(x)))
+    return arr.map(x => {
+      const music = musicInfo[x[0]]
+
+      if (!music) {
+        console.error(`Music not found: ${x[0]}`)
+        return null
+      }
+
+      music.note = music.notes[x[1]]
+      return {
+        music: music,
+        musicId: x[0],
+        difficulty: x[1],
+        todo: x[2],  // TODO: Figure out what this is
+        achievement: x[3],
+        calc: getMult(x[3]) * music.note.lv
+      }
+    })
+  }
+
+  interface ParsedRating {
+    music: {
+      name: string,
+      composer: string,
+      bpm: number,
+      ver: number,
+      note: {
+        lv: number
+        designer: string
+        lv_id: number
+        notes: number
+      }
+    },
+    musicId: number,
+    difficulty: number,
+    achievement: number,
+    calc: number
+  }
+
+  let parsedRatings: {
+    old: ParsedRating[],
+    new: ParsedRating[]
+  } | null = null
+
+  // Get music information from data server
+  fetch(`${data_host}/maimai/meta/00/all-music.json`).then(it => it.json()).then(musicInfo => {
+    parsedRatings = {
+      old: parseRatings(data.rating, musicInfo),
+      new: parseRatings(data.ratingNew, musicInfo)
+    }
+  })
+</script>
+
+<!-- Svelte template -->
+<div>
+  <!-- Display all parsed ratings -->
+  {#if parsedRatings}
+    <div>
+      <h2>Old</h2>
+      <div class="rating-cards">
+        {#each parsedRatings.old as rating}
+          <div class="level-{rating.difficulty}">
+            <img class="cover" src={`${data_host}/maimai/assetbundle/jacket_s/00${rating.musicId.toString().padStart(6, '0').substring(2)}.png`} alt="">
+
+            <div class="detail">
+              <span class="name">{rating.music.name}</span>
+              <span>{(rating.achievement / 10000).toFixed(2)}%</span>
+              <span>{rating.calc.toFixed(1)}</span>
+            </div>
+            <img class="ver" src={`${data_host}/maimai/sprites/tab/title/UI_CMN_TabTitle_MaimaiTitle_Ver${rating.music.ver.toString().substring(0, 3)}.png`} alt="">
+
+            <div class="lv">{rating.music.note.lv}</div>
+          </div>
+        {/each}
+      </div>
+    </div>
+    <div>
+      <h2>New</h2>
+      <div>
+        {#each parsedRatings.new as rating}
+          <div>
+          </div>
+        {/each}
+      </div>
+    </div>
+  {/if}
+</div>
+
+<style lang="sass">
+.rating-cards
+  display: grid
+  gap: 2rem
+
+  // 5 columns
+  grid-template-columns: repeat(5, 1fr)
+
+  // Style each card
+  > div
+    $border-radius: 20px
+    width: 200px
+    height: 200px
+    border-radius: $border-radius
+
+    display: flex
+    position: relative
+
+    // Difficulty border
+    border: 5px solid var(--lv-color, #60aaff)
+    &.level-1
+      --lv-color: #aaff60
+    &.level-2
+      --lv-color: #f25353
+    &.level-3
+      --lv-color: #e881ff
+
+    img.cover
+      width: 100%
+      height: 100%
+      object-fit: cover
+      border-radius: calc($border-radius - 3px)
+      pointer-events: none
+
+    img.ver
+      position: absolute
+      top: -20px
+      left: -30px
+      height: 50px
+      object-fit: cover
+      pointer-events: none
+
+    // Information
+    .detail
+      position: absolute
+      bottom: 0
+      left: 0
+      right: 0
+      padding: 10px
+      background: rgba(0, 0, 0, 0.5)
+      border-radius: 0 0 calc($border-radius - 3px) calc($border-radius - 3px)
+
+      // Blur
+      backdrop-filter: blur(3px)
+
+      display: flex
+      flex-direction: column
+      text-align: left
+
+      > span
+        // Disable text wrapping, max 2 lines
+        overflow: hidden
+        text-overflow: ellipsis
+        //max-height: 2.4em
+        //line-height: 1.2em
+        white-space: nowrap
+
+      .name
+        font-size: 1.2rem
+        font-weight: bold
+
+    .lv
+      position: absolute
+      bottom: 0
+      right: 0
+      padding: 5px 10px
+      background: var(--lv-color)
+      // Top left border radius
+      border-radius: 10px 0
+
+      font-size: 1.3rem
+
+      &:before
+        content: "Lv "
+        font-size: 0.8rem
+
+
+
+
+</style>
\ No newline at end of file