diff --git a/README.md b/README.md
index 652a0d5..7d87135 100644
--- a/README.md
+++ b/README.md
@@ -96,6 +96,8 @@ Use this form: <a href="https://yhw.tw/SaBta">https://yhw.tw/SaBta</a>
 在 LINE 自己的口中 「LINE TODAY是消費者獲取各式知識資訊的重要入⼝」，當然可以讓新聞媒體給他新聞賺錢，所以很多Article多會在 LINE Today 上
 
 ## FREE APIs:
+API Info: https://news.yuanhau.com/apis
+
 If you just want to throw to an LLM and tell it to do stuff, here is the endpoints (w/cors, but I (hpware) has given permission for you to use it for free.), you are welcome to build something better than mine. Just credit me :) thx
 
 https://news.yuanhau.com/api/tabs for fetching Tabs
diff --git a/pages/apis.vue b/pages/apis.vue
index bde7b68..40c5233 100644
--- a/pages/apis.vue
+++ b/pages/apis.vue
@@ -1,55 +1,88 @@
 <script setup lang="ts">
+import { ArrowBigRightDashIcon, BadgeCheckIcon, BadgeXIcon, PanelTopIcon, RssIcon, NewspaperIcon, BotMessageSquareIcon, CombineIcon } from "lucide-vue-next";
 const apis = [
   {
+    icon: ArrowBigRightDashIcon,
     apiroute: "/shortforward",
     name: "A Simple url forwarder.",
     content:
       "This is maly used for yhw.tw/news, which is a super simple redirection tool for easy redirecting.",
     caching: false,
+    openAccess: true,
   },
   {
+    icon: PanelTopIcon,
     apiroute: "/api/tabs",
     name: "Get LINE Today Tabs",
     content: "Using LINE Today as a source for getting tabs & caching results.",
     caching: true,
+    openAccess: true,
   },
   {
+    icon:RssIcon,
     apiroute: "/api/home/lt",
-    name: "Get the news feed of LINE Today",
+    name: "Get the news feed of LT",
     content:
       "This endpoint requires ?query=, and you can go the the /api/tabs to find the query.",
     caching: true,
+    openAccess: true,
   },
   {
+    icon: NewspaperIcon,
     apiroute: "/api/news/get/lt/[slug]",
-    name: "Get the news article using node-fetch & cheerio",
+    name: "Get the news article from LT",
     content:
       "This endpoint requires the slug to be filled in, in order to get it to work.",
     caching: true,
+    openAccess: true,
   },
   {
+    icon: BotMessageSquareIcon,
     apiroute: "/api/ai/chat/[slug]",
-    name: "",
-    content: "",
+    name: "A Chating API",
+    content: "This is for the desktop app & talk about news articles. Using Groq's free tier.",
     caching: false,
+    openAccess: false,
   },
   {
+    icon: CombineIcon,
     apiroute: "/api/ai/summarize/[slug]",
-    name: "",
-    content: "",
+    name: "A News Summarize using AI",
+    content: "This is also powered by the Groq API (the free tier of course).",
     caching: false,
+    openAccess: true,
   },
 ];
 </script>
 <template>
+  <div class="h-4"></div>
   <div
-    class="justify-center align-center text-center absolute inset-0 flex flex-col"
+    class="justify-center align-center text-center flex flex-col"
   >
-    <h1 class="text-4xl text-bold">APIs</h1>
-    <div class="items flex flex-row flex-wrap">
-      <div class="item group" v-for="item in apis">
-        {{ item.name }}
+    <h1 class="text-4xl text-bold m-2">APIs</h1>
+    <div class="items flex flex-row flex-wrap gap-2 justify-center align-center">
+      <div 
+      class="px-10 bg-gray-900/70 w-[400px] h-[300px] group rounded-xl hover:-translate-y-1 shadow-lg hover:shadow-sky-600/90 backdrop-blur-sm border border-gray-800 hover:border-sky-600/70 transition-all duration-700 justify-center align-middle flex flex-col text-left"
+       v-for="item in apis">
+        <component
+          :is="item.icon"
+          class="w-8 h-8 text-white group-hover:text-sky-500 transition-colors duration-300"
+        />
+        <h1 class="text-2xl text-bold">{{ item.name || "N/A" }}</h1>
+        <h2>API: {{ item.apiroute }}</h2>
+        <p class="text-sm">{{ item.content || "N/A" }}</p>
+        <div class="gap-0 m-1">
+        <div class="text-md flex flex-row gap-2 text-center p-2">Caching: 
+          <BadgeCheckIcon v-if="item.caching" class="w-7 h-7 p-1 group-hover:text-green-300 transition-all duration-200"/> 
+          <BadgeXIcon v-else class="w-7 h-7 p-1 group-hover:text-red-400 transition-all duration-200"/> 
+        </div>
+        <div class="text-md flex flex-row gap-2 text-center p-2">Open Access: 
+          <BadgeCheckIcon v-if="item.caching" class="w-7 h-7 p-1 group-hover:text-green-300 transition-all duration-200"/> 
+          <BadgeXIcon v-else class="w-7 h-7 p-1 group-hover:text-red-400 transition-all duration-200"/> 
+        </div>
+        </div>
       </div>
     </div>
   </div>
+  <div class="h-4"></div>
 </template>
diff --git a/server/api/user/login.ts b/server/api/user/login.ts
index 2a4e5ec..af2eaa0 100644
--- a/server/api/user/login.ts
+++ b/server/api/user/login.ts
@@ -25,8 +25,6 @@ export default defineEventHandler(async (event) => {
       error: "INVALD_USER_ACCOUNT",
     };
   }
-  // Server side hashing
-
   // Check if user exists, if not, create a user
   try {
     console.log(username);
@@ -47,7 +45,6 @@ export default defineEventHandler(async (event) => {
         };
       }
       const newToken = uuidv4();
-      //const newToken64 = atob(newToken);
       return {
         user: fetchUserInfo,
         token: newToken,
@@ -64,14 +61,13 @@ export default defineEventHandler(async (event) => {
       }
     }
     const newToken = uuidv4();
-    const newToken64 = btoa(newToken);
     const fetchUserInfoAgain = await sql`
       select * from users
       where username = ${username}`;
-    /*await sql`
+    await sql`
         INSERT INTO usertokens (user, token)
-        VALUES (${fetchUserInfo[0].username}, ${newToken64})
-      `;*/
+        VALUES ('${fetchUserInfo[0].username}', '${newToken}')
+      `;
     return {
       user: fetchUserInfoAgain,
       token: newToken,