diff --git a/fonts/README.md b/fonts/README.md
new file mode 100644
index 0000000..a6c06b5
--- /dev/null
+++ b/fonts/README.md
@@ -0,0 +1,3 @@
+NeonTubes2.otf -> BeatSaber Main Title font
+
+Teko-Regular.ttf -> BeatSaber Ingame Font
\ No newline at end of file
diff --git a/fonts/Teko-Regular.ttf b/fonts/Teko-Regular.ttf
new file mode 100644
index 0000000..4b27b89
Binary files /dev/null and b/fonts/Teko-Regular.ttf differ
diff --git a/fonts/neontubes2-webfont.woff b/fonts/neontubes2-webfont.woff
new file mode 100644
index 0000000..07dc1cd
Binary files /dev/null and b/fonts/neontubes2-webfont.woff differ
diff --git a/fonts/neontubes2-webfont.woff2 b/fonts/neontubes2-webfont.woff2
new file mode 100644
index 0000000..98865e9
Binary files /dev/null and b/fonts/neontubes2-webfont.woff2 differ
diff --git a/images/ScoreSaberLogo.svg b/images/ScoreSaberLogo.svg
new file mode 100644
index 0000000..50f809c
--- /dev/null
+++ b/images/ScoreSaberLogo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 208.62 205.19"><defs><style>.cls-1{fill:#191919;}.cls-2{fill:#eabc00;}.cls-3{fill:#ffed3b;}.cls-4{fill:#ffde1a;}.cls-5{fill:#f2f2f2;}</style></defs><title>ScoreSaberLogo</title><g id="Logo"><g id="Border"><rect class="cls-1" x="35.64" width="137.77" height="20.97"/><rect class="cls-1" x="173.08" y="16.27" width="19.14" height="20.76"/><rect class="cls-1" x="187.38" y="34.99" width="21.24" height="138.97"/><rect class="cls-1" x="172.38" y="172.54" width="19.86" height="17.76"/><rect class="cls-1" x="35.41" y="189.19" width="137.95" height="16"/><rect class="cls-1" x="17.03" y="172.78" width="18.89" height="17.68"/><rect class="cls-1" y="35.11" width="24.16" height="138.73"/><rect class="cls-1" x="16.95" y="16.42" width="18.77" height="18.73"/></g><g id="Base"><g id="Bottom"><rect class="cls-2" x="35.51" y="172.32" width="138.16" height="17.95"/></g><g id="Right"><rect class="cls-3" x="171.95" y="35.03" width="20.32" height="138.81"/></g><g id="Top"><rect class="cls-3" x="35.62" y="16.54" width="137.84" height="33.51"/></g><g id="Left"><rect class="cls-2" x="16.92" y="35.03" width="29.84" height="138.59"/></g><rect class="cls-4" x="35.52" y="35.03" width="137.69" height="138.81"/></g><g id="Arrow"><rect class="cls-5" x="75.3" y="53.51" width="61.89" height="12.32"/><rect class="cls-5" x="120" y="78.32" width="17.68" height="14.59"/><rect class="cls-5" x="75.19" y="78.27" width="17.41" height="15.03"/><rect class="cls-5" x="92.38" y="93.24" width="28.11" height="12.32"/><rect class="cls-5" x="136.86" y="65.84" width="17.35" height="13.14"/><rect class="cls-5" x="58.73" y="65.62" width="17.22" height="13.14"/></g></g></svg>
\ No newline at end of file
diff --git a/images/github.png b/images/github.png
new file mode 100644
index 0000000..e462d7d
Binary files /dev/null and b/images/github.png differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..29d5eb4
--- /dev/null
+++ b/index.html
@@ -0,0 +1,203 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
+    <title>BS Ranked Playlist</title>
+    <script>
+        var tag_name = '';
+        window.onload = function() {
+            var url = 'https://api.github.com/repos/DetegiCE/bs-ranked-playlist/releases';
+            var types = new Array("pp_200", "pp_300", "pp_400", "pp_500",
+                                  "star_00", "star_01", "star_02", "star_03", "star_04",
+                                  "star_05", "star_06", "star_07", "star_08", "star_09",
+                                  "star_10", "star_11", "star_12", "star_13", "star_14");
+            $.getJSON(url, function(data) {
+                tag_name = data[0].tag_name;
+                var rellnk = 'https://github.com/DetegiCE/bs-ranked-playlist/releases/download/'+tag_name+'/';
+                for(var i=0 ; i<=types.length ; i++) {
+                    var rankElem = document.getElementById(types[i]);
+                    rankElem.setAttribute("onclick", "location.href='"+rellnk+"ranked_"+types[i]+".json'");
+                }
+
+                var recdate = document.getElementById("recdate");
+                var updatedate = 'Recent Updated: ' + tag_name;
+                recdate.innerHTML = updatedate;
+            });
+
+            var fetchinfo = document.getElementById("getInfo");
+            var fetchcomp = '<div class="dwnBtn alert alert-success" role="alert">Data Succesfully Fetched.</div>';
+            fetchinfo.innerHTML = fetchcomp;
+        }
+    </script>
+    <style>
+        @font-face {
+            font-family: 'NeonTubes2';
+            font-style: normal;
+            font-weight: normal;
+            src: url('fonts/neontubes2-webfont.woff2') format("woff2"),
+                 url('fonts/neontubes2-webfont.woff') format("woff");
+        }
+
+        @font-face {
+            font-family: 'Teko';
+            font-style: normal;
+            font-weight: normal;
+            src: url('fonts/Teko-Regular.ttf') format("truetype");
+        }
+
+        h1 {
+            display: inline-block;
+            font-size: 2.2rem;
+        }
+
+        h2 {
+            text-align: center;
+            font-weight: 400;
+            font-size: 2.0rem;
+            color: white;
+            background: linear-gradient(to left, rgba(2, 180, 241, 0), rgba(2, 180, 241, 1));
+        }
+
+        body {
+            background-color: #010a01;
+            font-family: 'Teko', serif;
+        }
+
+        .rankbar {
+            margin-top: 0.5rem;
+        }
+
+        .creditbar {
+            margin-top: 5rem;
+        }
+
+        .mainTitle {
+            text-align: center;
+        }
+
+        .dwnBtn {
+            margin-left: 0.5rem;
+            margin-down: 0.5rem;
+            font-family: 'Teko', serif;
+            font-size: 1.3rem;
+        }
+
+        .neonFont {
+            font-family: 'NeonTubes2', serif;
+        }
+
+        .creditText {
+            color: white;
+            font-size: 1.3rem;
+        }
+
+        .tekoFont {
+            font-family: 'Teko', serif;
+        }
+
+        .neonRed {
+            color: white;
+            text-shadow:
+                0 0 5px red,
+                0 0 10px red,
+                0 0 20px red,
+                0 0 30px red;
+        }
+
+        .neonBlue {
+            color: white;
+            text-shadow:
+                0 0 5px blue,
+                0 0 10px blue,
+                0 0 20px blue,
+                0 0 30px blue;
+        }
+
+        .neonYellow {
+            color: white;
+            text-shadow:
+                0 0 5px yellow,
+                0 0 10px yellow,
+                0 0 20px yellow,
+                0 0 30px yellow;
+        }
+
+        .neonOrange {
+            color: white;
+            text-shadow:
+                0 0 5px orange,
+                0 0 10px orange,
+                0 0 20px orange,
+                0 0 30px orange;
+        }
+
+        .leftMargin {
+            margin-left: 10px;
+        }
+
+        .rightMargin {
+            margin-right: 10px;
+        }
+
+        .topMargin {
+            margin-top: 10px;
+        }
+
+        img {
+            width: 1.3rem;
+        }
+    </style>
+</head>
+<body>
+<!-- BEGIN 컨텐츠 -->
+<h1 class="mainTitle neonFont neonRed leftMargin topMargin">Beat</h1>
+<h1 class="mainTitle neonFont neonBlue rightMargin">Saber</h1>
+<br>
+<h1 class="mainTitle neonFont neonYellow leftMargin">Ranked Playlist</h1>
+
+<div id="getInfo">
+    <div class="alert alert-warning" role="alert">
+        Data Fetching. Please Wait.
+    </div>
+</div>
+
+<div id="recdate"></div>
+
+<h2 class="tekoFont rankbar">Ranked By PP</h2>
+<button type="button" class="dwnBtn btn btn-warning" id="pp_200">PP 200+</button>
+<button type="button" class="dwnBtn btn btn-success" id="pp_300">PP 300+</button>
+<button type="button" class="dwnBtn btn btn-info" id="pp_400">PP 400+</button>
+<button type="button" class="dwnBtn btn btn-danger" id="pp_500">PP 500+</button>
+
+<h2 class="tekoFont rankbar">Ranked by Star</h2>
+<button type="button" class="dwnBtn btn btn-light" id="star_00">Star 00+</button>
+<button type="button" class="dwnBtn btn btn-light" id="star_01">Star 01+</button>
+<button type="button" class="dwnBtn btn btn-secondary" id="star_02">Star 02+</button>
+<button type="button" class="dwnBtn btn btn-secondary" id="star_03">Star 03+</button>
+<button type="button" class="dwnBtn btn btn-warning" id="star_04">Star 04+</button>
+<button type="button" class="dwnBtn btn btn-warning" id="star_05">Star 05+</button>
+<button type="button" class="dwnBtn btn btn-success" id="star_06">Star 06+</button>
+<button type="button" class="dwnBtn btn btn-success" id="star_07">Star 07+</button>
+<button type="button" class="dwnBtn btn btn-info" id="star_08">Star 08+</button>
+<button type="button" class="dwnBtn btn btn-info" id="star_09">Star 09+</button>
+<button type="button" class="dwnBtn btn btn-primary" id="star_10">Star 10+</button>
+<button type="button" class="dwnBtn btn btn-primary" id="star_11">Star 11+</button>
+<button type="button" class="dwnBtn btn btn-danger" id="star_12">Star 12+</button>
+<button type="button" class="dwnBtn btn btn-danger" id="star_13">Star 13+</button>
+<button type="button" class="dwnBtn btn btn-dark" id="star_14">Star 14+</button>
+
+<h2 class="tekoFont creditbar">Credits</h2>
+    
+<ul class="creditText">
+    <li>Playlist Autogenerate by aplulu <a href="https://github.com/aplulu"><img src="https://github.com/DetegiCE/bs-ranked-playlist/blob/master/images/github.png?raw=true"></a> <a href="https://scoresaber.com/u/76561198214879119"><img src="https://github.com/DetegiCE/bs-ranked-playlist/blob/master/images/ScoreSaberLogo.svg?raw=true"></a></li>
+    <li>Download Site by SUI Sensei <a href="https://github.com/DetegiCE"><img src="https://github.com/DetegiCE/bs-ranked-playlist/blob/master/images/github.png?raw=true"></a> <a href="https://scoresaber.com/u/76561198357821968"><img src="https://github.com/DetegiCE/bs-ranked-playlist/blob/master/images/ScoreSaberLogo.svg?raw=true"></a></li>
+</ul>
+
+<!-- END 컨텐츠 -->
+</body>
+</html>
