diff --git a/packages/backend/src/server/web/boot.js b/packages/backend/src/server/web/boot.js
index e466ef6ce5..8788003476 100644
--- a/packages/backend/src/server/web/boot.js
+++ b/packages/backend/src/server/web/boot.js
@@ -218,30 +218,24 @@
 		<code>${JSON.stringify(details)}</code>`;
 		errorsElement.appendChild(detailsElement);
 		addStyle(`
-		@font-face {
-			font-family: 'Pretendard JP';
-			font-weight: 400;
-			font-display: swap;
-			src: local('Pretendard JP Regular'),
-			url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/packages/pretendard-jp/dist/web/static/woff2/PretendardJP-Regular.woff2') format('woff2'),
-			url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/packages/pretendard-jp/dist/web/static/woff/PretendardJP-Regular.woff') format('woff');
-		}
-		@font-face {
-			font-family: 'Pretendard JP';
-			font-weight: 700;
-			font-display: swap;
-			src: local('Pretendard JP Bold'),
-			url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/packages/pretendard-jp/dist/web/static/woff2/PretendardJP-Bold.woff2') format('woff2'),
-			url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/packages/pretendard-jp/dist/web/static/woff/PretendardJP-Bold.woff') format('woff');
-		}
-		@font-face {
-			font-family: 'JetBrains Mono';
-			font-style: normal;
-			font-weight: 400;
-			src: local("JetBrains Mono Regular"), local("JetBrainsMono-Regular"),
-			url("https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono@master/fonts/webfonts/JetBrainsMono-Regular.woff2") format("woff2");
-			font-display: swap; }
-		}
+		@import url("https://cdn.jsdelivr.net/npm/@fontsource/jetbrains-mono/100.css");
+		@import url("https://cdn.jsdelivr.net/npm/@fontsource/jetbrains-mono/100-italic.css");
+		@import url("https://cdn.jsdelivr.net/npm/@fontsource/jetbrains-mono/200.css");
+		@import url("https://cdn.jsdelivr.net/npm/@fontsource/jetbrains-mono/200-italic.css");
+		@import url("https://cdn.jsdelivr.net/npm/@fontsource/jetbrains-mono/300.css");
+		@import url("https://cdn.jsdelivr.net/npm/@fontsource/jetbrains-mono/300-italic.css");
+		@import url("https://cdn.jsdelivr.net/npm/@fontsource/jetbrains-mono/400.css");
+		@import url("https://cdn.jsdelivr.net/npm/@fontsource/jetbrains-mono/400-italic.css");
+		@import url("https://cdn.jsdelivr.net/npm/@fontsource/jetbrains-mono/500.css");
+		@import url("https://cdn.jsdelivr.net/npm/@fontsource/jetbrains-mono/500-italic.css");
+		@import url("https://cdn.jsdelivr.net/npm/@fontsource/jetbrains-mono/600.css");
+		@import url("https://cdn.jsdelivr.net/npm/@fontsource/jetbrains-mono/600-italic.css");
+		@import url("https://cdn.jsdelivr.net/npm/@fontsource/jetbrains-mono/700.css");
+		@import url("https://cdn.jsdelivr.net/npm/@fontsource/jetbrains-mono/700-italic.css");
+		@import url("https://cdn.jsdelivr.net/npm/@fontsource/jetbrains-mono/800.css");
+		@import url("https://cdn.jsdelivr.net/npm/@fontsource/jetbrains-mono/800-italic.css");
+		@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css");
+		@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-jp.css");
 
 		* {
 			font-family: "Pretendard JP", BIZ UDGothic, Roboto, HelveticaNeue, Arial, sans-serif;
@@ -327,7 +321,7 @@
 		}
 
 		code {
-			font-family: "JetBrains Mono", Fira, FiraCode, monospace;
+			font-family: "JetBrains Mono", "Pretendard JP", Pretendard, Fira, FiraCode, monospace;
 		}
 
 		#errorInfo {
diff --git a/packages/backend/src/server/web/error.css b/packages/backend/src/server/web/error.css
index 7094a59f70..7d976b27a2 100644
--- a/packages/backend/src/server/web/error.css
+++ b/packages/backend/src/server/web/error.css
@@ -122,7 +122,7 @@ h1 {
 
 code {
     display: block;
-    font-family: Fira, FiraCode, monospace;
+    font-family: "JetBrains Mono", "Pretendard JP", Pretendard, Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
     background: #333;
     padding: 0.5rem 1rem;
     max-width: 40rem;
diff --git a/packages/frontend/src/style.css b/packages/frontend/src/style.css
deleted file mode 100644
index 7cc705a60f..0000000000
--- a/packages/frontend/src/style.css
+++ /dev/null
@@ -1,580 +0,0 @@
-@font-face {
-  font-family: "Pretendard JP";
-  font-weight: 400;
-  font-style: normal;
-  font-display: swap;
-  src: local("Pretendard JP Regular"), url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/packages/pretendard-jp/dist/web/static/woff2/PretendardJP-Regular.woff2") format("woff2");
-}
-@font-face {
-  font-family: "Pretendard JP";
-  font-weight: 700;
-  font-style: normal;
-  font-display: swap;
-  src: local("Pretendard JP Bold"), url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/packages/pretendard-jp/dist/web/static/woff2/PretendardJP-Bold.woff2") format("woff2");
-}
-@font-face {
-  font-family: "JetBrains Mono";
-  font-weight: 400;
-  font-style: normal;
-  font-display: swap;
-  src: local("JetBrains Mono Regular"), url("https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono@master/fonts/webfonts/JetBrainsMono-Regular.woff2") format("woff2");
-}
-@font-face {
-  font-family: "JetBrains Mono";
-  font-weight: 700;
-  font-style: normal;
-  font-display: swap;
-  src: local("JetBrains Mono Bold"), url("https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono@master/fonts/webfonts/JetBrainsMono-Bold.woff2") format("woff2");
-}
-:root {
-  --radius: 12px;
-  --marginFull: 16px;
-  --marginHalf: 10px;
-  --margin: var(--marginFull);
-  --minBottomSpacing: 0px;
-	--cherry: rgb(255, 188, 220);
-	--pick: rgb(177, 211, 255);
-	--misskey: rgb(134, 179, 0);
-  --cast: rgb(181, 151, 246);
-  --ella: rgb(150, 198, 234);
-}
-@media (max-width: 500px) {
-  :root {
-    --margin: var(--marginHalf);
-    --minBottomSpacing: calc(72px + max(12px, env(safe-area-inset-bottom, 0px)));
-  }
-}
-
-::-moz-selection {
-  color: var(--fgOnAccent);
-  background-color: var(--accent);
-}
-
-::selection {
-  color: var(--fgOnAccent);
-  background-color: var(--accent);
-}
-
-html {
-  touch-action: manipulation;
-  background-color: var(--bg);
-  background-attachment: fixed;
-  background-size: cover;
-  background-position: center;
-  color: var(--fg);
-  accent-color: var(--accent);
-  overflow: auto;
-  overflow-wrap: break-word;
-  font-family: "Pretendard JP", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Hiragino Sans", "Apple SD Gothic Neo", Meiryo, "Noto Sans JP", "Noto Sans KR", "Malgun Gothic", Osaka, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
-  font-size: 14px;
-  line-height: 1.35;
-  -webkit-text-size-adjust: 100%;
-     -moz-text-size-adjust: 100%;
-          text-size-adjust: 100%;
-  -moz-tab-size: 2;
-    -o-tab-size: 2;
-       tab-size: 2;
-}
-html, html * {
-  scrollbar-color: var(--scrollbarHandle) inherit;
-  scrollbar-width: thin;
-}
-html::-webkit-scrollbar, html *::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-html::-webkit-scrollbar-track, html *::-webkit-scrollbar-track {
-  background: inherit;
-}
-html::-webkit-scrollbar-thumb, html *::-webkit-scrollbar-thumb {
-  background: var(--scrollbarHandle);
-}
-html::-webkit-scrollbar-thumb:hover, html *::-webkit-scrollbar-thumb:hover {
-  background: var(--scrollbarHandleHover);
-}
-html::-webkit-scrollbar-thumb:active, html *::-webkit-scrollbar-thumb:active {
-  background: var(--accent);
-}
-html.f-1 {
-  font-size: 7px;
-}
-html.f-2 {
-  font-size: 8px;
-}
-html.f-3 {
-  font-size: 9px;
-}
-html.f-4 {
-	font-size: 10px;
-}
-html.f-5 {
-	font-size: 11px;
-}
-html.f-6 {
-	font-size: 12px;
-}
-html.f-7 {
-	font-size: 13px;
-}
-html.f-8 {
-	font-size: 14px;
-}
-html.f-9 {
-	font-size: 15px;
-}
-html.f-10 {
-	font-size: 16px;
-}
-html.f-11 {
-	font-size: 17px;
-}
-html.f-12 {
-	font-size: 18px;
-}
-html.f-13 {
-	font-size: 19px;
-}
-html.f-14 {
-	font-size: 20px;
-}
-html.f-15 {
-	font-size: 21px;
-}
-html.f-16 {
-	font-size: 22px;
-}
-html.f-17 {
-	font-size: 23px;
-}
-html.f-18 {
-	font-size: 24px;
-}
-html.f-19 {
-	font-size: 25px;
-}
-html.useBoldFont {
-	font-weight: bold;
-}
-html.useSystemFont {
-  font-family: "Hiragino Maru Gothic Pro", sans-serif;
-}
-
-html._themeChanging_, html._themeChanging_ * {
-  transition: background 1s ease, border 1s ease !important;
-}
-
-html, body {
-  margin: 0;
-  padding: 0;
-  scroll-behavior: smooth;
-}
-
-a {
-  text-decoration: none;
-  cursor: pointer;
-  color: inherit;
-  tap-highlight-color: transparent;
-  -webkit-tap-highlight-color: transparent;
-  -webkit-touch-callout: none;
-}
-a:hover {
-  text-decoration: underline;
-}
-a[target=_blank] {
-  -webkit-touch-callout: default;
-}
-
-textarea, input {
-  tap-highlight-color: transparent;
-  -webkit-tap-highlight-color: transparent;
-}
-
-optgroup, option {
-  background: var(--panel);
-  color: var(--fg);
-}
-
-hr {
-  margin: var(--margin) 0 var(--margin) 0;
-  border: none;
-  height: 1px;
-  background: var(--divider);
-}
-
-.ti {
-  vertical-align: -10%;
-  line-height: 0.9em;
-}
-.ti:before {
-  font-size: 130%;
-}
-
-.ti-fw {
-  display: inline-block;
-  text-align: center;
-}
-
-._indicatorCircle {
-  display: inline-block;
-  width: 1em;
-  height: 1em;
-  border-radius: 100%;
-  background: currentColor;
-}
-
-._noSelect, ._button, ._borderButton, ._textButton, ._buttonPrimary, ._buttonGradate, ._ghost {
-  -moz-user-select: none;
-   -ms-user-select: none;
-       user-select: none;
-  -webkit-user-select: none;
-  -webkit-touch-callout: none;
-}
-
-._ghost {
-  pointer-events: none;
-}
-
-._modalBg {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: var(--modalBg);
-  -webkit-backdrop-filter: var(--modalBgFilter);
-  backdrop-filter: var(--modalBgFilter);
-}
-
-._shadow {
-  box-shadow: 0px 4px 32px var(--shadow) !important;
-}
-
-._button, ._borderButton, ._textButton, ._buttonPrimary, ._buttonGradate {
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  display: inline-block;
-  padding: 0;
-  margin: 0;
-  background: none;
-  border: none;
-  cursor: pointer;
-  color: inherit;
-  touch-action: manipulation;
-  tap-highlight-color: transparent;
-  -webkit-tap-highlight-color: transparent;
-  font-size: 1em;
-  font-family: inherit;
-  line-height: inherit;
-  max-width: 100%;
-}
-._button:focus-visible, ._borderButton:focus-visible, ._textButton:focus-visible, ._buttonPrimary:focus-visible, ._buttonGradate:focus-visible {
-  outline: none;
-}
-._button:disabled, ._borderButton:disabled, ._textButton:disabled, ._buttonPrimary:disabled, ._buttonGradate:disabled {
-  opacity: 0.5;
-  cursor: default;
-}
-
-._buttonPrimary, ._buttonGradate {
-  color: var(--fgOnAccent);
-  background: var(--accent);
-}
-._buttonPrimary:not(:disabled):hover, ._buttonGradate:not(:disabled):hover {
-  background: var(--X8);
-}
-._buttonPrimary:not(:disabled):active, ._buttonGradate:not(:disabled):active {
-  background: var(--X9);
-}
-
-._buttonGradate {
-  color: var(--fgOnAccent);
-  background: linear-gradient(90deg, var(--buttonGradateA), var(--buttonGradateB));
-}
-._buttonGradate:not(:disabled):hover {
-  background: linear-gradient(90deg, var(--X8), var(--X8));
-}
-._buttonGradate:not(:disabled):active {
-  background: linear-gradient(90deg, var(--X8), var(--X8));
-}
-
-._help {
-  color: var(--accent);
-  cursor: help;
-}
-
-._textButton {
-  color: var(--accent);
-}
-._textButton:not(:disabled):hover {
-  text-decoration: underline;
-}
-
-._panel {
-  background: var(--panel);
-  border-radius: var(--radius);
-  overflow: clip;
-}
-
-._margin {
-  margin: var(--margin) 0;
-}
-
-._gaps_m {
-  display: flex;
-  flex-direction: column;
-  gap: 1.5em;
-}
-
-._gaps_s {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75em;
-}
-
-._gaps {
-  display: flex;
-  flex-direction: column;
-  gap: var(--margin);
-}
-
-._buttons {
-  display: flex;
-  gap: 8px;
-  flex-wrap: wrap;
-}
-
-._borderButton {
-  display: block;
-  width: 100%;
-  padding: 10px;
-  box-sizing: border-box;
-  text-align: center;
-  border: solid 0.5px var(--divider);
-  border-radius: var(--radius);
-}
-._borderButton:active {
-  border-color: var(--accent);
-}
-
-._popup {
-  background: var(--popup);
-  border-radius: var(--radius);
-  contain: content;
-}
-
-._acrylic {
-  background: var(--acrylicPanel);
-  -webkit-backdrop-filter: var(--blur, blur(15px));
-  backdrop-filter: var(--blur, blur(15px));
-}
-
-._formLinksGrid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-  grid-gap: 12px;
-}
-
-._formLinks > *:not(:last-child) {
-  margin-bottom: 8px;
-}
-
-._beta {
-  margin-left: 0.7em;
-  font-size: 65%;
-  padding: 2px 3px;
-  color: var(--accent);
-  border: solid 1px var(--accent);
-  border-radius: 4px;
-  vertical-align: top;
-}
-
-._table > ._row {
-  display: flex;
-}
-._table > ._row:not(:last-child) {
-  margin-bottom: 16px;
-}
-@media (max-width: 500px) {
-  ._table > ._row:not(:last-child) {
-    margin-bottom: 8px;
-  }
-}
-._table > ._row > ._cell {
-  flex: 1;
-}
-._table > ._row > ._cell > ._label {
-  font-size: 80%;
-  opacity: 0.7;
-}
-._table > ._row > ._cell > ._label > ._icon {
-  margin-right: 4px;
-  display: none;
-}
-
-._fullinfo {
-  padding: 64px 32px;
-  text-align: center;
-}
-._fullinfo > img {
-  vertical-align: bottom;
-  height: 128px;
-  margin-bottom: 16px;
-  border-radius: 16px;
-}
-
-._link {
-  color: var(--link);
-}
-
-._caption {
-  font-size: 0.8em;
-  opacity: 0.7;
-}
-
-._monospace, ._code {
-  font-family: "JetBrains Mono", "Pretendard JP", Fira code, Fira Mono, Consolas, Menlo, Courier, monospace !important;
-}
-
-._code {
-  background: #2d2d2d;
-  color: #ccc;
-  font-size: 14px;
-  line-height: 1.5;
-  padding: 5px;
-}
-
-code[class*=language-],
-pre[class*=language-] {
-  font-family: "JetBrains Mono", "Pretendard JP", Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace !important;
-}
-
-.prism-editor__textarea:focus {
-  outline: none;
-}
-
-._zoom {
-  transition-duration: 0.5s, 0.5s;
-  transition-property: opacity, transform;
-  transition-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
-}
-
-._transition_zoom-enter-active, ._transition_zoom-leave-active {
-  transition: opacity 0.5s, transform 0.5s !important;
-}
-
-._transition_zoom-enter-from, ._transition_zoom-leave-to {
-  opacity: 0;
-  transform: scale(0.9);
-}
-
-@-webkit-keyframes blink {
-  0% {
-    opacity: 1;
-    transform: scale(1);
-  }
-  30% {
-    opacity: 1;
-    transform: scale(1);
-  }
-  90% {
-    opacity: 0;
-    transform: scale(0.5);
-  }
-}
-
-@keyframes blink {
-  0% {
-    opacity: 1;
-    transform: scale(1);
-  }
-  30% {
-    opacity: 1;
-    transform: scale(1);
-  }
-  90% {
-    opacity: 0;
-    transform: scale(0.5);
-  }
-}
-@-webkit-keyframes tada {
-  from {
-    transform: scale3d(1, 1, 1);
-  }
-  10%, 20% {
-    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
-  }
-  30%, 50%, 70%, 90% {
-    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
-  }
-  40%, 60%, 80% {
-    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
-  }
-  to {
-    transform: scale3d(1, 1, 1);
-  }
-}
-@keyframes tada {
-  from {
-    transform: scale3d(1, 1, 1);
-  }
-  10%, 20% {
-    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
-  }
-  30%, 50%, 70%, 90% {
-    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
-  }
-  40%, 60%, 80% {
-    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
-  }
-  to {
-    transform: scale3d(1, 1, 1);
-  }
-}
-._anime_bounce {
-  will-change: transform;
-  -webkit-animation: bounce ease 0.7s;
-          animation: bounce ease 0.7s;
-  -webkit-animation-iteration-count: 1;
-          animation-iteration-count: 1;
-  transform-origin: 50% 50%;
-}
-
-._anime_bounce_ready {
-  will-change: transform;
-  transform: scaleX(0.9) scaleY(0.9);
-}
-
-._anime_bounce_standBy {
-  transition: transform 0.1s ease;
-}
-
-@-webkit-keyframes bounce {
-  0% {
-    transform: scaleX(0.9) scaleY(0.9);
-  }
-  19% {
-    transform: scaleX(1.1) scaleY(1.1);
-  }
-  48% {
-    transform: scaleX(0.95) scaleY(0.95);
-  }
-  100% {
-    transform: scaleX(1) scaleY(1);
-  }
-}
-
-@keyframes bounce {
-  0% {
-    transform: scaleX(0.9) scaleY(0.9);
-  }
-  19% {
-    transform: scaleX(1.1) scaleY(1.1);
-  }
-  48% {
-    transform: scaleX(0.95) scaleY(0.95);
-  }
-  100% {
-    transform: scaleX(1) scaleY(1);
-  }
-}/*# sourceMappingURL=style.css.map */