I forgot what I changed

src/locales/en.json

@@ -4,5 +4,12 @@
         "games": "Games",
         "settings": "Settings",
         "discord": "Want more links?"
+    },
+    "404": {
+        "text": "This Nebula Service has been disabled.",
+        "return": "Back to home"
+    },
+    "home": {
+        "placeholder": "Search the web freely"
     }
 }

src/locales/ja.json

@@ -4,5 +4,12 @@
         "games": "ゲーム",
         "settings": "セッティング",
         "discord": "もっとリンクが欲しいですか？"
+    },
+    "404": {
+        "text": "このネビュラサービスは無効になっています",
+        "return": "帰宅"
+    },
+    "home": {
+        "placeholder": "由にウェブを検索"
     }
 }

src/pages/Home.tsx

@@ -1,7 +1,9 @@
 import { useState } from "preact/hooks";
+import { useTranslation } from 'react-i18next';
 
 export function Home() {
 	const [isFocused, setIsFocused] = useState(false);
+	const { t } = useTranslation()
 
 	return (
 		<div class="flex justify-center items-center h-full">
@@ -14,7 +16,7 @@ export function Home() {
 				}}
 				type="text"
 				class="p-2 border border-input-border-color rounded-2xl h-14 w-80 text-center bg-input text-xl placeholder:text-input-text focus:outline-none font-roboto" 
-				placeholder={isFocused ? '' : 'Explore the web freely'}
+				placeholder={isFocused ? '' : t('home.placeholder')}
 			>
 			</input>
 		</div>

src/pages/_404.tsx

@@ -1,8 +1,17 @@
+import { useTranslation } from 'react-i18next';
+
 export function NotFound() {
+	const { t } = useTranslation()
 	return (
-		<section>
-			<p>this nebula service has been disabled</p>
-			<span>404</span>
+		<section class="h-full">
+			<div class="flex justify-center items-center h-full flex-col">
+				<img src="/404.png" class="h-72"></img>
+				<div class="p-6 flex flex-col items-center">
+					<p class="text-4xl font-roboto font-bold">{t('404.text')}</p>
+					<span class="text-3xl font-roboto">404</span>
+				</div>
+				<button class="p-2 border border-input-border-color rounded-2xl h-14 w-44 text-center bg-input text-xl placeholder:text-input-text focus:outline-none font-roboto">{t('404.return')}</button>
+			</div>
 		</section>
 	);
 }