diff --git a/components/app/windows/newsView.vue b/components/app/windows/newsView.vue
index 32a3354..8b0fff2 100644
--- a/components/app/windows/newsView.vue
+++ b/components/app/windows/newsView.vue
@@ -1,6 +1,11 @@
 <script setup lang="ts">
 // FOR THIS MODULE DO NOT USE THE ?APPNAME URL TYPE, IT WILL FALL AT ALL TIMES, I HAVE NO CLUE WHY IS BEHAVIOR HAPPENING RN?
-import { SparklesIcon, UserIcon, NewspaperIcon } from "lucide-vue-next";
+import {
+  SparklesIcon,
+  UserIcon,
+  NewspaperIcon,
+  StarIcon,
+} from "lucide-vue-next";
 import translate from "translate";
 
 interface translateInterfaceText {
@@ -178,6 +183,7 @@ const aiSummary = async () => {
           </div>
         </div>
       </div>
+      <button><StarIcon /></button>
     </div>
   </div>
 </template>
diff --git a/components/app/windows/settings.vue b/components/app/windows/settings.vue
index ae6ec37..4f741e8 100644
--- a/components/app/windows/settings.vue
+++ b/components/app/windows/settings.vue
@@ -100,23 +100,24 @@ const checkValidApiKey = () => {
 const showDeleteDialog = ref(false);
 const showLogoutDialog = ref(false);
 const confirmDelete = async () => {
+  showDeleteDialog.value = false;
   await deleteAccount();
   await validateUserInfo();
-  showDeleteDialog.value = false;
 };
 
 const deleteAccount = async () => {
   const req = await fetch("/api/user/sendUserChanges", {
     method: "DELETE",
   });
-  const res = await res.json();
+  const res = await req.json();
   console.log(res);
 };
 
 const submitChangeAction = async (action: string) => {
+  //const allowedColumns = ["firstname", "email"];
   const actions = [
-    { name: "NAME", sendValue: enterFirstName.value },
-    { name: "USER_EMAIL", sendValue: enteruseremail.value },
+    { name: "NAME", SQLSystem: "firstname", sendValue: enterFirstName.value },
+    { name: "USER_EMAIL", SQLSystem: "email", sendValue: enteruseremail.value },
   ];
 
   const actionMatch = actions.find((a) => a.name === action);
@@ -131,7 +132,7 @@ const submitChangeAction = async (action: string) => {
         "Content-Type": "application/json",
       },
       body: JSON.stringify({
-        action: actionMatch.name,
+        action: actionMatch.SQLSystem,
         value: actionMatch.sendValue,
         jsonValue: "",
       }),
@@ -140,7 +141,9 @@ const submitChangeAction = async (action: string) => {
     const response = await req.json();
     if (response.error) {
       console.error("Error updating user data:", response.error);
+      return;
     }
+    await validateUserInfo();
   } catch (error) {
     console.error("Failed to submit change:", error);
   }
diff --git a/components/app/windows/tos.vue b/components/app/windows/tos.vue
index c05d3dd..d5b8323 100644
--- a/components/app/windows/tos.vue
+++ b/components/app/windows/tos.vue
@@ -2,5 +2,8 @@
 const { t } = useI18n();
 </script>
 <template>
-  <div></div>
+  <div class="justify-center align-center text-center">
+    <h1 class="text-2xl text-bold">{{ t("pages.tos.title") }}</h1>
+    <p>{{ t("pages.tos.content") }}</p>
+  </div>
 </template>
diff --git a/server/api/user/[slug]/isThisArticleStarred.ts b/server/api/user/[slug]/isThisArticleStarred.ts
new file mode 100644
index 0000000..b6d9e5c
--- /dev/null
+++ b/server/api/user/[slug]/isThisArticleStarred.ts
@@ -0,0 +1,30 @@
+import sql from "~/server/components/postgres";
+import getUserTokenMinusSQLInjection from "~/server/components/getUserToken";
+export default defineEventHandler(async (event) => {
+  try {
+    const slug = getRouterParam(event, "slug");
+    const token = await getUserTokenMinusSQLInjection(event);
+    if (token.error.length !== 0) {
+      return {
+        error: token.error,
+      };
+    }
+    const getOtherUserDataJsonFile = await sql`
+      SELECT starred_news from user_other_data
+      where username = ${token.user}
+      `;
+    if (getOtherUserDataJsonFile.length === 0) {
+      return {
+        error: "ERR_NO_DATA",
+      };
+    }
+    const jsonData = getOtherUserDataJsonFile[0].starred_news;
+    return jsonData;
+  } catch (e) {
+    console.log(e);
+    return {
+      error: "INTERNAL_SERVER_ERR",
+      e: e.message,
+    };
+  }
+});
diff --git a/server/api/user/[slug]/star.ts b/server/api/user/[slug]/star.ts
new file mode 100644
index 0000000..b6d9e5c
--- /dev/null
+++ b/server/api/user/[slug]/star.ts
@@ -0,0 +1,30 @@
+import sql from "~/server/components/postgres";
+import getUserTokenMinusSQLInjection from "~/server/components/getUserToken";
+export default defineEventHandler(async (event) => {
+  try {
+    const slug = getRouterParam(event, "slug");
+    const token = await getUserTokenMinusSQLInjection(event);
+    if (token.error.length !== 0) {
+      return {
+        error: token.error,
+      };
+    }
+    const getOtherUserDataJsonFile = await sql`
+      SELECT starred_news from user_other_data
+      where username = ${token.user}
+      `;
+    if (getOtherUserDataJsonFile.length === 0) {
+      return {
+        error: "ERR_NO_DATA",
+      };
+    }
+    const jsonData = getOtherUserDataJsonFile[0].starred_news;
+    return jsonData;
+  } catch (e) {
+    console.log(e);
+    return {
+      error: "INTERNAL_SERVER_ERR",
+      e: e.message,
+    };
+  }
+});
diff --git a/server/api/user/loadInfo.ts b/server/api/user/loadInfo.ts
index 71188b0..1806233 100644
--- a/server/api/user/loadInfo.ts
+++ b/server/api/user/loadInfo.ts
@@ -1,7 +1,6 @@
-// Fixed data for testing
+/*// Fixed data for testing
 export default defineEventHandler(async (event) => {
   return {
-    langPref: "en",
     doNotShowLangPrefPopUp: false,
     email: "test@yuanhau.com",
     name: "Howard",
@@ -13,3 +12,48 @@ export default defineEventHandler(async (event) => {
     },
   };
 });
+*/
+import sql from "~/server/components/postgres";
+import getUserTokenMinusSQLInjection from "~/server/components/getUserToken";
+export default defineEventHandler(async (event) => {
+  try {
+    const token = await getUserTokenMinusSQLInjection(event);
+    if (token.error.length !== 0) {
+      return {
+        error: token.error,
+      };
+    }
+    const fetchMainData = await sql`
+      SELECT * FROM users
+      WHERE username = ${token.user}
+      `;
+    const fetchOtherUserData = await sql`
+      SELECT * FROM user_other_data
+      WHERE username = ${token.user}
+      `;
+
+    if (fetchMainData.length === 0 || fetchOtherUserData.length === 0) {
+      return {
+        error: "ERR_USER_DOESNT_EXIST",
+      };
+    }
+    return {
+      doNotShowLangPrefPopUp:
+        fetchOtherUserData[0].remove_translate_popup || false,
+      email: fetchMainData[0].email || "",
+      name: fetchMainData[0].firstname || "",
+      useCustomGroqKey: +(fetchOtherUserData[0].groq_api_key?.length ?? 0) > 0,
+      translate: {
+        enabled: fetchOtherUserData[0].translate_enabled || false,
+        lang: "en",
+        provider: fetchOtherUserData[0].translate_provider || "google",
+      },
+    };
+  } catch (e) {
+    console.log(e);
+    return {
+      error: "ERR_SERVER_SIDE",
+      e: e.message,
+    };
+  }
+});
diff --git a/server/api/user/login.ts b/server/api/user/login.ts
index 0bd32f1..67dfd42 100644
--- a/server/api/user/login.ts
+++ b/server/api/user/login.ts
@@ -81,6 +81,9 @@ export default defineEventHandler(async (event) => {
           VALUES (${fetchUserInfoAgain[0].username}, ${newToken})
       `;
 
+      const getUserFirstName = await sql`
+        select * from user_other_data`;
+
       setCookie(event, "token", newToken);
       return {
         user: fetchUserInfoAgain,
diff --git a/server/api/user/sendUserChanges.post.ts b/server/api/user/sendUserChanges.post.ts
index 1dc17a4..6bbf0da 100644
--- a/server/api/user/sendUserChanges.post.ts
+++ b/server/api/user/sendUserChanges.post.ts
@@ -12,23 +12,34 @@ export default defineEventHandler(async (event) => {
   const body = await readBody(event);
   if (body.jsonValue.length === 0) {
     const clearBadDataRegex = /[@-_.+a-zA-Z0-9]{2,}/;
-    let allowed = true;
-    if (body.value.match()) {
-      allowed = false;
-    }
     // Use Static values for now.
-    const requestChange = "groq_api_key";
+    const requestChange = body.action || "";
     const apiKeyqq = body.value.match(clearBadDataRegex);
-    const allowedColumns = ["groq_api_key", "another_column_name"];
+    const allowedColumns = ["firstname", "email"];
 
     if (!allowedColumns.includes(requestChange)) {
-      throw new Error("Invalid column name provided");
+      return {
+        error: "ERR_NOT_ALLOWED",
+      };
+    } else if (requestChange === "firstname") {
+      const sqlC = await sql`
+        UPDATE users SET firstname = ${apiKeyqq[0]}
+        WHERE username = ${token.user}`;
+      return {
+        sqlC: sqlC,
+        success: true,
+      };
+    } else if (requestChange === "email") {
+      const sqlC = await sql`
+        UPDATE users SET email = ${apiKeyqq[0]}
+        WHERE username = ${token.user}`;
+      return {
+        sqlC: sqlC,
+        success: true,
+      };
     }
-
     const sqlC = await sql.unsafe(
-      `
-      UPDATE user_other_data SET ${requestChange} = $1
-      WHERE username = $2`,
+      `UPDATE user_other_data SET ${requestChange} = $1 WHERE username = $2`,
       [apiKeyqq[0], token.user],
     );
     return {
diff --git a/server/api/user/validateUserToken.ts b/server/api/user/validateUserToken.ts
index 76a0fa3..f147a86 100644
--- a/server/api/user/validateUserToken.ts
+++ b/server/api/user/validateUserToken.ts
@@ -43,7 +43,7 @@ export default defineEventHandler(async (event) => {
   }
   return {
     userAccount: fetchViaSQL[0].username,
-    firstName: fetchViaSQL[0].firstName,
+    firstName: "",
     requested_action: "CONTINUE",
     current_spot: "KEEP_LOGIN",
     email: fetchViaSQL[0].email,