diff --git a/fortune_generator/styles.css b/fortune_generator/css/styles.css
similarity index 94%
rename from fortune_generator/styles.css
rename to fortune_generator/css/styles.css
index 7e67b53..f96ccf5 100644
--- a/fortune_generator/styles.css
+++ b/fortune_generator/css/styles.css
@@ -1,111 +1,111 @@
-:root {
-  --button-color: #73a3eb;
-  --button-hover-color: #459aef;
-  --bg-color: #FFFFFF;
-  --good-fortune-color: #e74c3c;
-  --bad-fortune-color: #000000bf;
-  --middle-fortune-color: #5eb95e;
-  --desc-color: #7f7f7f;
-  --date-color: #096e1bC9;
-  --special-event-color: #3e4fbb;
-  --title-color: #000000CC;
-}
-
-.dark-mode {
-  --button-color: #5d99f4;
-  --button-hover-color: #9ac6f1;
-  --bg-color: #1e1d24;
-  --good-fortune-color: #e74c3c;
-  --bad-fortune-color: #d4d4d4d9;
-  --middle-fortune-color: #57c857;
-  --desc-color: #838282;
-  --date-color: #0ed64aed;
-  --special-event-color: #6477f3;
-  --dark-mode-icon-color: #ffffff;
-  --title-color: #cdcdcd;
-}
-
-
-* {
-  overflow: hidden;
-  text-align: center;
-  white-space: nowrap;
-}
-
-body {
-  margin: 0;
-  padding: 0;
-  height: 100%;
-  align-items: center;
-  justify-content: center;
-}
-
-.container {
-  top: 50%;
-  left: 50%;
-  width: 80%;
-  max-width: 800px;
-  position: absolute;
-  z-index: 1;
-  text-align: center;
-  transform: translate(-50%, -50%);
-  background-color: var(--bg-color);
-  border-radius: 40px;
-  padding: 10px;
-}
-
-.good-fortune {
-  color: var(--good-fortune-color) !important;
-}
-
-.bad-fortune {
-  color: var(--bad-fortune-color) !important;
-}
-
-.middle-fortune {
-  color: var(--middle-fortune-color) !important;
-}
-
-.desc {
-  color: var(--desc-color);
-}
-
-.date-color {
-  color: var(--date-color);
-}
-
-.title {
-  color: var(--title-color);
-}
-
-.special-event {
-  color: var(--special-event-color);
-}
-
-button {
-  background-color: var(--button-color);
-  color: var(--bg-color);
-  z-index: 2;
-  font-size: 20px;
-  border: none;
-  padding: 20px 20px;
-  border-radius: 30px;
-  cursor: pointer;
-  transition: all 0.3s ease-in-out;
-}
-
-button:hover {
-  background-color: var(--button-hover-color);
-}
-
-#Matrix {
-  z-index: 0;
-}
-
-#dark-mode-icon {
-  margin-top: 15px;
-  font-size: 2.4rem;
-  color: var(--dark-mode-icon-color);
-  cursor: pointer;
-  opacity: 85%;
+:root {
+  --button-color: #73a3eb;
+  --button-hover-color: #459aef;
+  --bg-color: #FFFFFF;
+  --good-fortune-color: #e74c3c;
+  --bad-fortune-color: #000000bf;
+  --middle-fortune-color: #5eb95e;
+  --desc-color: #7f7f7f;
+  --date-color: #096e1bC9;
+  --special-event-color: #3e4fbb;
+  --title-color: #000000CC;
+}
+
+.dark-mode {
+  --button-color: #5d99f4;
+  --button-hover-color: #9ac6f1;
+  --bg-color: #1e1d24;
+  --good-fortune-color: #e74c3c;
+  --bad-fortune-color: #d4d4d4d9;
+  --middle-fortune-color: #57c857;
+  --desc-color: #838282;
+  --date-color: #0ed64aed;
+  --special-event-color: #6477f3;
+  --dark-mode-icon-color: #ffffff;
+  --title-color: #cdcdcd;
+}
+
+
+* {
+  overflow: hidden;
+  text-align: center;
+  white-space: nowrap;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+}
+
+.container {
+  top: 50%;
+  left: 50%;
+  width: 80%;
+  max-width: 800px;
+  position: absolute;
+  z-index: 1;
+  text-align: center;
+  transform: translate(-50%, -50%);
+  background-color: var(--bg-color);
+  border-radius: 40px;
+  padding: 10px;
+}
+
+.good-fortune {
+  color: var(--good-fortune-color) !important;
+}
+
+.bad-fortune {
+  color: var(--bad-fortune-color) !important;
+}
+
+.middle-fortune {
+  color: var(--middle-fortune-color) !important;
+}
+
+.desc {
+  color: var(--desc-color);
+}
+
+.date-color {
+  color: var(--date-color);
+}
+
+.title {
+  color: var(--title-color);
+}
+
+.special-event {
+  color: var(--special-event-color);
+}
+
+button {
+  background-color: var(--button-color);
+  color: var(--bg-color);
+  z-index: 2;
+  font-size: 20px;
+  border: none;
+  padding: 20px 20px;
+  border-radius: 30px;
+  cursor: pointer;
+  transition: all 0.3s ease-in-out;
+}
+
+button:hover {
+  background-color: var(--button-hover-color);
+}
+
+#Matrix {
+  z-index: 0;
+}
+
+#dark-mode-icon {
+  margin-top: 15px;
+  font-size: 2.4rem;
+  color: var(--dark-mode-icon-color);
+  cursor: pointer;
+  opacity: 85%;
 }
\ No newline at end of file
diff --git a/fortune_generator/index.html b/fortune_generator/index.html
index 42d4dc6..277c236 100644
--- a/fortune_generator/index.html
+++ b/fortune_generator/index.html
@@ -12,10 +12,10 @@
   <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
   <!-- jquery -->
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
-  <link rel="stylesheet" href="./styles.css">
+  <link rel="stylesheet" href="./css/styles.css">
   <script>
     if ('serviceWorker' in navigator) {
-      navigator.serviceWorker.register('./service-worker.js');
+      navigator.serviceWorker.register('./js/service-worker.js');
     }
   </script>
 </head>
@@ -102,8 +102,8 @@
   </div>
 
   <canvas id="Matrix"></canvas>
-  <script src="./script.js"></script>
-  <script src="./fortune.js"></script>
-  <script src="./matrix.js"></script>
+  <script src="./js/script.js"></script>
+  <script src="./js/fortune.js"></script>
+  <script src="./js/matrix.js"></script>
 </body>
 </html>
diff --git a/fortune_generator/fortune.js b/fortune_generator/js/fortune.js
similarity index 100%
rename from fortune_generator/fortune.js
rename to fortune_generator/js/fortune.js
diff --git a/fortune_generator/matrix.js b/fortune_generator/js/matrix.js
similarity index 97%
rename from fortune_generator/matrix.js
rename to fortune_generator/js/matrix.js
index 5e656a5..f7a761e 100644
--- a/fortune_generator/matrix.js
+++ b/fortune_generator/js/matrix.js
@@ -1,47 +1,47 @@
-const canvas = document.getElementById("Matrix")
-const context = canvas.getContext("2d")
-
-canvas.height = window.innerHeight + 100;
-canvas.width = window.innerWidth + 5;
-
-const chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789./*-+#$%^@!~?><:;[]{}\」=_αβΓγΔδεζηΘθικΛλμΞξΠπρΣσςτυΦφχΨψΩω×≦≧≠∞≒≡～∩∠∪∟⊿∫∮∵∴＄￥〒￠￡℃€℉╩◢ⅩⅨⅧⅦⅥⅤⅣⅢⅡⅠあいうえおがぎぐげござじずぜぞだぢつでづどにぬのばひぴぶへぺぼみゃょァゐゎè";
-
-const fontSize = 16;
-const columns = canvas.width / fontSize; 
-
-const charArr = [];
-for(let i = 0; i < columns; ++i) {
-  charArr[i] = 1;
-}
-
-let frame = 0;
-let str;
-
-context.fillStyle = "rgba(0, 0, 0, 1)";
-context.fillRect(0, 0, canvas.width, canvas.height);
-
-function Update() {
-  context.fillStyle = "rgba(0, 0, 0, 0.05)";
-  context.fillRect(0, 0, canvas.width, canvas.height);
-  if(frame == 0){
-    let a = parseInt(Math.random() * 255);
-    str = `rgba(${a}, ${Math.abs(a - 127)}, ${Math.abs(a - 255)}, 0.9)`;
-  }
-  context.fillStyle = str;
-  context.font = fontSize + "px monospace";
-  
-  for(let i = 0; i < columns; ++i){
-    const text = chars[Math.floor(Math.random() * chars.length)];
-    context.fillText(text, i * fontSize, charArr[i] * fontSize);
-    if(charArr[i] * fontSize > canvas.height && Math.random() > 0.90){
-      charArr[i] = 0;
-    }
-    charArr[i]++;
-  }
-  frame++;
-  if(frame <= 40 * (Math.floor(Math.random() * 10) + 3)) requestAnimationFrame(Update); // 40 frames a cycle
-  else{
-    frame = 0;
-    Appear();
-  }
-}
+const canvas = document.getElementById("Matrix")
+const context = canvas.getContext("2d")
+
+canvas.height = window.innerHeight + 100;
+canvas.width = window.innerWidth + 5;
+
+const chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789./*-+#$%^@!~?><:;[]{}\」=_αβΓγΔδεζηΘθικΛλμΞξΠπρΣσςτυΦφχΨψΩω×≦≧≠∞≒≡～∩∠∪∟⊿∫∮∵∴＄￥〒￠￡℃€℉╩◢ⅩⅨⅧⅦⅥⅤⅣⅢⅡⅠあいうえおがぎぐげござじずぜぞだぢつでづどにぬのばひぴぶへぺぼみゃょァゐゎè";
+
+const fontSize = 16;
+const columns = canvas.width / fontSize; 
+
+const charArr = [];
+for(let i = 0; i < columns; ++i) {
+  charArr[i] = 1;
+}
+
+let frame = 0;
+let str;
+
+context.fillStyle = "rgba(0, 0, 0, 1)";
+context.fillRect(0, 0, canvas.width, canvas.height);
+
+function Update() {
+  context.fillStyle = "rgba(0, 0, 0, 0.05)";
+  context.fillRect(0, 0, canvas.width, canvas.height);
+  if(frame == 0){
+    let a = parseInt(Math.random() * 255);
+    str = `rgba(${a}, ${Math.abs(a - 127)}, ${Math.abs(a - 255)}, 0.9)`;
+  }
+  context.fillStyle = str;
+  context.font = fontSize + "px monospace";
+  
+  for(let i = 0; i < columns; ++i){
+    const text = chars[Math.floor(Math.random() * chars.length)];
+    context.fillText(text, i * fontSize, charArr[i] * fontSize);
+    if(charArr[i] * fontSize > canvas.height && Math.random() > 0.90){
+      charArr[i] = 0;
+    }
+    charArr[i]++;
+  }
+  frame++;
+  if(frame <= 40 * (Math.floor(Math.random() * 10) + 3)) requestAnimationFrame(Update); // 40 frames a cycle
+  else{
+    frame = 0;
+    Appear();
+  }
+}
diff --git a/fortune_generator/script.js b/fortune_generator/js/script.js
similarity index 100%
rename from fortune_generator/script.js
rename to fortune_generator/js/script.js
diff --git a/fortune_generator/service-worker.js b/fortune_generator/js/service-worker.js
similarity index 94%
rename from fortune_generator/service-worker.js
rename to fortune_generator/js/service-worker.js
index e294353..95008df 100644
--- a/fortune_generator/service-worker.js
+++ b/fortune_generator/js/service-worker.js
@@ -15,9 +15,9 @@ const ASSETS = [
 const NEED_UPDATE = [
   '/generators/fortune_generator/',
   '/generators/fortune_generator/index.html',
-  '/generators/fortune_generator/styles.css',
-  '/generators/fortune_generator/fortune.js',
-  '/generators/fortune_generator/matrix.js',
+  '/generators/fortune_generator/css/styles.css',
+  '/generators/fortune_generator/js/fortune.js',
+  '/generators/fortune_generator/js/matrix.js',
   '/generators/fortune_generator/special.json',
   '/generators/fortune_generator/fortune.json',
   '/generators/fortune_generator/manifest.json',