diff --git a/src/webpage/home.html b/src/webpage/home.html
index ac50c0f..8189617 100644
--- a/src/webpage/home.html
+++ b/src/webpage/home.html
@@ -25,16 +25,16 @@
 			<a href="https://github.com/MathMan05/JankClient" class="TitleButtons">
 				Github
 			</a>
-			<a href="/channels/@me" class="TitleButtons">
+			<a href="/channels/@me" class="TitleButtons" id="openClient">
 				Open Client
 			</a>
 		</div>
 		<div id="homePage">
 
-			<h1 class="pagehead">Welcome to Jank Client</h1>
+			<h1 class="pagehead" id="welcomeJank">Welcome to Jank Client</h1>
 			<div class="pagebox">
-				<p>Jank Client is a Spacebar-compatible client seeking to be as good as it can be with many features including:</p>
-				<ul>
+				<p id="box1title">Jank Client is a Spacebar-compatible client seeking to be as good as it can be with many features including:</p>
+				<ul id="box1Items">
 					<li>Direct Messaging</li>
 					<li>Reactions support</li>
 					<li>Invites</li>
@@ -42,17 +42,17 @@
 					<li>User settings</li>
 					<li>Developer portal</li>
 					<li>Bot invites</li>
+					<li>Translation support</li>
 				</ul>
 			</div>
 			<div class="pagebox">
-				<h2>Spacebar-Compatible Instances:</h2>
+				<h2 id="compatableInstances">Spacebar-Compatible Instances:</h2>
 				<div id="instancebox">
 				</div>
 			</div>
 			<div class="pagebox">
-				<h2>Contribute to Jank Client</h2>
-				<p>We always appreciate some help, whether that be in the form of bug reports, or code, or even just pointing out
-					some typos.</p><br>
+				<h2 id="box3title">Contribute to Jank Client</h2>
+				<p id="box3description">We always appreciate some help, whether that be in the form of bug reports, code, help translate, or even just pointing out some typos.</p><br>
 				<a href="https://github.com/MathMan05/JankClient" class="TitleButtons">
 					Github
 				</a>
diff --git a/src/webpage/home.ts b/src/webpage/home.ts
index 57c4824..a04772b 100644
--- a/src/webpage/home.ts
+++ b/src/webpage/home.ts
@@ -3,6 +3,36 @@ import{ mobile }from"./login.js";
 console.log(mobile);
 const serverbox = document.getElementById("instancebox") as HTMLDivElement;
 
+(async ()=>{
+	await I18n.done;
+	const openClient=document.getElementById("openClient")
+	const welcomeJank=document.getElementById("welcomeJank")
+	const box1title=document.getElementById("box1title")
+	const box1Items=document.getElementById("box1Items")
+	const compatableInstances=document.getElementById("compatableInstances")
+	const box3title=document.getElementById("box3title")
+	const box3description=document.getElementById("box3description")
+	if(openClient&&welcomeJank&&compatableInstances&&box3title&&box3description&&box1title&&box1Items){
+		openClient.textContent=I18n.getTranslation("htmlPages.openClient");
+		welcomeJank.textContent=I18n.getTranslation("htmlPages.welcomeJank");
+		box1title.textContent=I18n.getTranslation("htmlPages.box1title");
+
+		compatableInstances.textContent=I18n.getTranslation("htmlPages.compatableInstances");
+		box3title.textContent=I18n.getTranslation("htmlPages.box3title");
+		box3description.textContent=I18n.getTranslation("htmlPages.box3description");
+
+		const items=I18n.getTranslation("htmlPages.box1Items").split("|");
+		let i=0;
+		//@ts-ignore ts is being dumb here
+		for(const item of box1Items.children){
+			(item as HTMLElement).textContent=items[i];
+			i++;
+		}
+	}else{
+		console.error(openClient,welcomeJank,compatableInstances,box3title,box3description,box1title,box1Items)
+	}
+})()
+
 fetch("/instances.json")
 	.then(_=>_.json())
 	.then(
diff --git a/src/webpage/index.html b/src/webpage/index.html
index fcf0797..1fef553 100644
--- a/src/webpage/index.html
+++ b/src/webpage/index.html
@@ -21,7 +21,7 @@
 		<div id="loading" class="loading">
 			<div class="centeritem">
 				<img src="/logo.svg" style="width:3in;height:3in;">
-				<h1>Jank Client is loading</h1>
+				<h1 id="loadingText">Jank Client is loading</h1>
 				<h2 id="load-desc">This shouldn't take long</h2>
 				<h1 id="switchaccounts">Switch Accounts</h1>
 			</div>
diff --git a/src/webpage/index.ts b/src/webpage/index.ts
index 1b40b9d..54c8c9f 100644
--- a/src/webpage/index.ts
+++ b/src/webpage/index.ts
@@ -20,7 +20,17 @@ import { I18n } from "./i18n.js";
 		window.location.href = "/login.html";
 		return;
 	}
-
+	{
+		const loadingText=document.getElementById("loadingText");
+		const loaddesc=document.getElementById("load-desc");
+		const switchaccounts=document.getElementById("switchaccounts");
+		if(loadingText&&loaddesc&&switchaccounts){
+			loadingText.textContent=I18n.getTranslation("htmlPages.loadingText");
+			loaddesc.textContent=I18n.getTranslation("htmlPages.loaddesc");
+			switchaccounts.textContent=I18n.getTranslation("htmlPages.switchaccounts");
+		}
+	}
+	I18n
 	function showAccountSwitcher(): void{
 		const table = document.createElement("div");
 		table.classList.add("flexttb","accountSwitcher");
diff --git a/src/webpage/login.html b/src/webpage/login.html
index dcaf1d1..836e06b 100644
--- a/src/webpage/login.html
+++ b/src/webpage/login.html
@@ -19,7 +19,7 @@
 		<div id="logindiv">
 			<h1>Login</h1>
 			<form id="form" submit="check(e)">
-				<label for="instance"><b>Instance:</b></label>
+				<label for="instance" id="instanceField"><b>Instance:</b></label>
 				<p id="verify"></p>
 				<input
 					type="search"
@@ -31,7 +31,7 @@
 					required
 				>
 
-				<label for="uname"><b>Email:</b></label>
+				<label for="uname" id="emailField"><b>Email:</b></label>
 				<input
 					type="text"
 					placeholder="Enter email address"
@@ -40,7 +40,7 @@
 					required
 				>
 
-				<label for="psw"><b>Password:</b></label>
+				<label for="psw" id="pwField"><b>Password:</b></label>
 				<input
 					type="password"
 					placeholder="Enter Password"
@@ -51,11 +51,11 @@
 				<p class="wrongred" id="wrong"></p>
 
 				<div id="h-captcha"></div>
-				<button type="submit">Login</button>
+				<button type="submit" id="loginButton">Login</button>
 			</form>
 			<a href="/register.html" id="switch">Don't have an account?</a>
 		</div>
 		<datalist id="instances"></datalist>
 		<script src="/login.js" type="module"></script>
 	</body>
-</html>
\ No newline at end of file
+</html>
diff --git a/src/webpage/login.ts b/src/webpage/login.ts
index 1804f09..719f19e 100644
--- a/src/webpage/login.ts
+++ b/src/webpage/login.ts
@@ -32,6 +32,21 @@ login?: string;
 }[]
 | null;
 
+(async ()=>{
+	await I18n.done
+	const instanceField=document.getElementById("instanceField");
+	const emailField= document.getElementById("emailField");
+	const pwField= document.getElementById("pwField");
+	const loginButton=document.getElementById("loginButton");
+	const noAccount=document.getElementById("switch")
+	if(instanceField&&emailField&&pwField&&loginButton&&noAccount){
+		instanceField.textContent=I18n.getTranslation("htmlPages.instanceField");
+		emailField.textContent=I18n.getTranslation("htmlPages.emailField");
+		pwField.textContent=I18n.getTranslation("htmlPages.pwField");
+		loginButton.textContent=I18n.getTranslation("htmlPages.loginButton");
+		noAccount.textContent=I18n.getTranslation("htmlPages.noAccount");
+	}
+})()
 setTheme();
 function getBulkUsers(){
 	const json = getBulkInfo();
diff --git a/src/webpage/oauth2/auth.ts b/src/webpage/oauth2/auth.ts
index b90f362..2345f15 100644
--- a/src/webpage/oauth2/auth.ts
+++ b/src/webpage/oauth2/auth.ts
@@ -1,3 +1,4 @@
+import { I18n } from "../i18n.js";
 import{ getBulkUsers, Specialuser, getapiurls }from"../login.js";
 import { Permissions } from "../permissions.js";
 type botjsonfetch={
@@ -86,7 +87,7 @@ type botjsonfetch={
 	if(!joinable.length){
         document.getElementById("AcceptInvite")!.textContent = "Create an account to invite the bot";
 	}
-
+	await I18n.done;
 	function showGuilds(user:Specialuser){
 		if(!urls) return;
 		fetch(urls.api+"/oauth2/authorize/"+window.location.search,{
@@ -230,6 +231,7 @@ type botjsonfetch={
 		const perms=document.getElementById("permissions") as HTMLDivElement;
 
 		if(perms&&permstr){
+			perms.children[0].textContent=I18n.getTranslation("htmlPages.idpermissions")
 			const permisions=new Permissions(permstr)
 			for(const perm of Permissions.info()){
 				if(permisions.hasPermission(perm.name,false)){
@@ -243,7 +245,9 @@ type botjsonfetch={
 			}
 		}
 	})
-    document
-	.getElementById("AcceptInvite")!
-	.addEventListener("click", showAccounts);
+    const AcceptInvite=document.getElementById("AcceptInvite");
+	if(AcceptInvite){
+		AcceptInvite.addEventListener("click", showAccounts);
+		AcceptInvite.textContent=I18n.getTranslation("htmlPages.addBot")
+	}
 })();
diff --git a/src/webpage/register.html b/src/webpage/register.html
index 8d8b3fd..e6727e8 100644
--- a/src/webpage/register.html
+++ b/src/webpage/register.html
@@ -17,31 +17,31 @@
 			<h1>Create an account</h1>
 			<form id="register" submit="registertry(e)">
 				<div>
-					<label for="instance"><b>Instance:</b></label>
+					<label for="instance"  id="instanceField"><b>Instance:</b></label>
 					<p id="verify"></p>
 					<input type="search" list="instances" placeholder="Instance URL" id="instancein" name="instance" value="" required>
 				</div>
 				<div>
-					<label for="uname"><b>Email:</b></label>
+					<label for="uname" id="emailField"><b>Email:</b></label>
 					<input type="text" placeholder="Enter Email" name="uname" id="uname" required>
 				</div>
 
 				<div>
-					<label for="uname"><b>Username:</b></label>
+					<label for="uname" id="userField"><b>Username:</b></label>
 					<input type="text" placeholder="Enter Username" name="username" id="username" required>
 				</div>
 				<div>
-					<label for="psw"><b>Password:</b></label>
+					<label for="psw" id="pwField"><b>Password:</b></label>
 					<input type="password" placeholder="Enter Password" name="psw" id="psw" required>
 				</div>
 
 				<div>
-					<label for="psw2"><b>Enter password again:</b></label>
+					<label for="psw2" id="pw2Field"><b>Enter password again:</b></label>
 					<input type="password" placeholder="Enter Password Again" name="psw2" id="psw2" required>
 				</div>
 
 				<div>
-					<label for="date"><b>Date of birth:</b></label>
+					<label for="date" id="dobField"><b>Date of birth:</b></label>
 					<input type="date" id="date" name="date">
 				</div>
 
@@ -54,11 +54,11 @@
 				<div id="h-captcha">
 
 				</div>
-				<button type="submit" class="dontgrow">Create account</button>
+				<button type="submit" class="dontgrow" id="createAccount">Create account</button>
 			</form>
-			<a href="/login.html" id="switch">Already have an account?</a>
+			<a href="/login.html" id="switch" id="alreadyHave">Already have an account?</a>
 		</div>
 		<datalist id="instances"></datalist>
 		<script src="/register.js" type="module"></script>
 	</body>
-</html>
\ No newline at end of file
+</html>
diff --git a/src/webpage/register.ts b/src/webpage/register.ts
index ac871e5..e9f1ce3 100644
--- a/src/webpage/register.ts
+++ b/src/webpage/register.ts
@@ -6,7 +6,21 @@ const registerElement = document.getElementById("register");
 if(registerElement){
 	registerElement.addEventListener("submit", registertry);
 }
-
+(async ()=>{
+	await I18n.done;
+	const userField=document.getElementById("userField");
+	const pw2Field=document.getElementById("pw2Field");
+	const dobField=document.getElementById("dobField");
+	const createAccount=document.getElementById("createAccount");
+	const alreadyHave=document.getElementById("alreadyHave");
+	if(userField&&pw2Field&&alreadyHave&&createAccount&&dobField){
+		userField.textContent=I18n.getTranslation("htmlPages.userField")
+		pw2Field.textContent=I18n.getTranslation("htmlPages.pw2Field")
+		dobField.textContent=I18n.getTranslation("htmlPages.dobField")
+		createAccount.textContent=I18n.getTranslation("htmlPages.createAccount")
+		alreadyHave.textContent=I18n.getTranslation("htmlPages.alreadyHave")
+	}
+})()
 async function registertry(e: Event){
 	e.preventDefault();
 	const elements = (e.target as HTMLFormElement)
diff --git a/src/webpage/translations/en.json b/src/webpage/translations/en.json
index bb58f6a..a927fa3 100644
--- a/src/webpage/translations/en.json
+++ b/src/webpage/translations/en.json
@@ -161,6 +161,30 @@
 			"uptimeStats":"Uptime: \n All time: $1\nThis week: $2\nToday: $3",
 			"warnOffiline":"Instance is offline, can't connect"
 		},
+		"htmlPages":{
+			"idpermissions":"This will allow the bot to:",
+			"addBot":"Add to server",
+			"loadingText":"Jank Client is loading",
+			"loaddesc":"This shouldn't take long",
+			"switchaccounts":"Switch Accounts",
+			"instanceField":"Instance:",
+			"emailField":"Email:",
+			"pwField":"Password:",
+			"loginButton":"Login",
+			"noAccount":"Don't have an account?",
+			"userField":"Username:",
+			"pw2Field":"Enter password again:",
+			"dobField":"Date of birth:",
+			"createAccount":"Create account",
+			"alreadyHave":"Already have an account?",
+			"openClient":"Open Client",
+			"welcomeJank":"Welcome to Jank Client",
+			"box1title":"Jank Client is a Spacebar-compatible client seeking to be as good as it can be with many features including:",
+			"box1Items":"Direct Messaging|Reactions support|Invites|Account switching|User settings|Developer portal|Bot invites|Translation support",
+			"compatableInstances":"Spacebar-Compatible Instances:",
+			"box3title":"Contribute to Jank Client",
+			"box3description":"We always appreciate some help, whether that be in the form of bug reports, or code, or even just pointing out some typos."
+		},
 		"register":{
 			"passwordError:":"Password: $1",
 			"usernameError":"Username: $1",