diff --git a/boilerplate/frontend/angular-prebuilt/src/app/home/home.component.css b/boilerplate/frontend/angular-prebuilt/src/app/home/home.component.css
index fd21585b..7e84c348 100644
--- a/boilerplate/frontend/angular-prebuilt/src/app/home/home.component.css
+++ b/boilerplate/frontend/angular-prebuilt/src/app/home/home.component.css
@@ -6,6 +6,7 @@
     align-items: center;
     height: 100vh;
 }
+
 .user {
     display: flex;
     flex-direction: row;
@@ -13,32 +14,37 @@
     align-items: baseline;
     padding: 0.1rem;
 }
+
 span {
     margin-right: 0.3rem;
     font-size: large;
 }
+
 h3 {
-    color: #ff3e00;
+    color: #ff7547;
 }
+
 h1 {
-    color: #ff3e00;
+    color: #ff7547;
     text-transform: uppercase;
     font-size: 4em;
     font-weight: 100;
 }
-button {
-    cursor: pointer;
-    background-color: #ffb399;
+
+.btn {
     border: none;
-    color: rgb(82, 82, 82);
-    padding: 0.75rem;
-    margin: 2rem;
-    transition: all 0.5s ease-in-out;
-    border-radius: 2rem;
+    padding: 8px;
+    border-radius: 6px;
+    cursor: pointer;
+    color: #fff;
+    transition: all 0.2s ease-in;
+    background-color: #ff7547;
     font-size: large;
 }
-button:hover {
-    transform: scale(1.1);
-    background-color: #ff3e00;
-    color: white;
+.btn:hover {
+    box-shadow: 0 8px 25px -8px #ffb399;
+}
+.session__btn {
+    display: flex;
+    justify-content: space-around;
 }
diff --git a/boilerplate/frontend/angular-prebuilt/src/app/home/home.component.html b/boilerplate/frontend/angular-prebuilt/src/app/home/home.component.html
index 4c95bc55..acaeda7d 100644
--- a/boilerplate/frontend/angular-prebuilt/src/app/home/home.component.html
+++ b/boilerplate/frontend/angular-prebuilt/src/app/home/home.component.html
@@ -5,10 +5,13 @@ <h1>Hello</h1>
         <span>UserId:</span>
         <h3>{{ userId }}</h3>
 
-        <button (click)="onLogout()">Sign Out</button>
+        <div class="session__btn">
+            <button class="btn" (click)="callApi()">Call API</button>
+            <button class="btn" (click)="onLogout()">Sign Out</button>
+        </div>
     </div>
     <p>Visit the <a href="https://supertokens.com">SuperTokens tutorial</a> to learn how to build Auth under a day.</p>
     <ng-template #elseBlock>
-        <button (click)="redirectToLogin()">Sign in</button>
+        <button class="btn" (click)="redirectToLogin()">Sign in</button>
     </ng-template>
 </div>
diff --git a/boilerplate/frontend/angular-prebuilt/src/app/home/home.component.ts b/boilerplate/frontend/angular-prebuilt/src/app/home/home.component.ts
index a0c09d8e..60a06165 100644
--- a/boilerplate/frontend/angular-prebuilt/src/app/home/home.component.ts
+++ b/boilerplate/frontend/angular-prebuilt/src/app/home/home.component.ts
@@ -1,36 +1,48 @@
-import { AfterViewInit, Component } from "@angular/core";
+import { afterviewinit, component } from "@angular/core";
+import { httpclient } from "@angular/common/http";
 
-import * as Session from "supertokens-web-js/recipe/session";
+import Session from "supertokens-web-js/recipe/session";
 
-@Component({
+@component({
     selector: "app-home",
-    templateUrl: "./home.component.html",
-    styleUrls: ["./home.component.css"],
+    templateurl: "./home.component.html",
+    styleurls: ["./home.component.css"],
 })
-export class HomeComponent implements AfterViewInit {
+export class homecomponent implements afterviewinit {
     title = "angularapp";
 
-    public rootId = "rootId";
-    public userId = "";
+    public rootid = "rootid";
+    public userid = "";
     public session = false;
 
-    ngAfterViewInit() {
-        this.getUserInfo();
+    constructor(private http: httpclient) {}
+
+    ngafterviewinit() {
+        this.getuserinfo();
     }
 
-    async getUserInfo() {
-        this.session = await Session.doesSessionExist();
+    async getuserinfo() {
+        this.session = await session.doessessionexist();
         if (this.session) {
-            this.userId = await Session.getUserId();
+            this.userid = await session.getuserid();
         }
     }
-
-    async onLogout() {
-        await Session.signOut();
+    async callapi() {
+        this.http.get("http://localhost:3001/sessioninfo").subscribe(
+            (data: any) => {
+                alert(json.stringify(data, null, 2));
+            },
+            (error: any) => {
+                alert(`failed to fetch session info: ${error.message}`);
+            }
+        );
+    }
+    async onlogout() {
+        await session.signout();
         window.location.reload();
     }
 
-    redirectToLogin() {
+    redirecttologin() {
         window.location.href = "auth";
     }
 }
diff --git a/boilerplate/frontend/angular-prebuilt/src/app/home/home.module.ts b/boilerplate/frontend/angular-prebuilt/src/app/home/home.module.ts
index 78bf6f81..5f737265 100644
--- a/boilerplate/frontend/angular-prebuilt/src/app/home/home.module.ts
+++ b/boilerplate/frontend/angular-prebuilt/src/app/home/home.module.ts
@@ -1,11 +1,12 @@
 import { NgModule } from "@angular/core";
 import { CommonModule } from "@angular/common";
+import { HttpClientModule } from "@angular/common/http";
 
 import { HomeRoutingModule } from "./home-routing.module";
 import { HomeComponent } from "./home.component";
 
 @NgModule({
     declarations: [HomeComponent],
-    imports: [CommonModule, HomeRoutingModule],
+    imports: [CommonModule, HomeRoutingModule, HttpClientModule],
 })
 export class HomeModule {}
diff --git a/boilerplate/frontend/vue-prebuilt/src/views/HomeView.vue b/boilerplate/frontend/vue-prebuilt/src/views/HomeView.vue
index fa83d22c..aa5ae7be 100644
--- a/boilerplate/frontend/vue-prebuilt/src/views/HomeView.vue
+++ b/boilerplate/frontend/vue-prebuilt/src/views/HomeView.vue
@@ -13,8 +13,24 @@ export default defineComponent({
     this.getUserInfo();
   },
   methods: {
-    redirectToLogin() {
-      window.location.href = "/auth";
+    async callApi() {
+      try {
+        const response = await fetch("http://localhost:3001/sessioninfo", {
+          method: "GET",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+
+        if (!response.ok) {
+          throw new Error(`Error: ${response.status}`);
+        }
+
+        const data = await response.json();
+        alert(JSON.stringify(data, null, 2));
+      } catch (error) {
+        alert(`Failed to fetch session info: ${error}`);
+      }
     },
     async getUserInfo() {
       this.session = await Session.doesSessionExist();
@@ -39,7 +55,10 @@ export default defineComponent({
         <span>UserId:</span>
         <h3>{{ userId }}</h3>
 
-        <button @click="onLogout">Sign Out</button>
+        <div class="session__btn">
+          <button class="btn" @click="callApi">Call API</button>
+          <button class="btn" @click="onLogout">Sign Out</button>
+        </div>
       </div>
       <div v-else>
         <p>
@@ -47,7 +66,9 @@ export default defineComponent({
           <a href="https://supertokens.com">SuperTokens tutorial</a> to learn
           how to build Auth under a day.
         </p>
-        <button @click="redirectToLogin">Sign in</button>
+        <router-link to="/auth">
+          <button class="btn">Sign in</button>
+        </router-link>
       </div>
     </div>
   </main>
@@ -76,31 +97,31 @@ span {
 }
 
 h3 {
-  color: #ff3e00;
+  color: #ff7547;
 }
 
 h1 {
-  color: #ff3e00;
+  color: #ff7547;
   text-transform: uppercase;
   font-size: 4em;
   font-weight: 100;
 }
 
-button {
-  cursor: pointer;
-  background-color: #ffb399;
+.btn {
   border: none;
-  color: rgb(82, 82, 82);
-  padding: 0.75rem;
-  margin: 2rem;
-  transition: all 0.5s ease-in-out;
-  border-radius: 2rem;
+  padding: 8px;
+  border-radius: 6px;
+  cursor: pointer;
+  color: #fff;
+  transition: all 0.2s ease-in;
+  background-color: #ff7547;
   font-size: large;
 }
-
-button:hover {
-  transform: scale(1.1);
-  background-color: #ff3e00;
-  color: white;
+.btn:hover {
+  box-shadow: 0 8px 25px -8px #ffb399;
+}
+.session__btn {
+  display: flex;
+  justify-content: space-around;
 }
 </style>
diff --git a/boilerplate/fullstack/sveltekit/src/routes/+page.svelte b/boilerplate/fullstack/sveltekit/src/routes/+page.svelte
index 7bc76ecf..0ca29d7c 100644
--- a/boilerplate/fullstack/sveltekit/src/routes/+page.svelte
+++ b/boilerplate/fullstack/sveltekit/src/routes/+page.svelte
@@ -26,6 +26,26 @@
 		await Session.signOut();
 		window.location.reload();
 	}
+
+  async function callApi() {
+    try {
+        const response = await fetch("/sessioninfo", {
+          method: "GET",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+
+        if (!response.ok) {
+          throw new Error(`Error: ${response.status}`);
+        }
+
+        const data = await response.json();
+        alert(JSON.stringify(data, null, 2));
+      } catch (error) {
+        alert(`Failed to fetch session info: ${error}`);
+      }
+  }
 </script>
 
 <main>
@@ -37,7 +57,10 @@
 				<span>UserId:</span>
 				<h3>{userId}</h3>
 
-				<button on:click={onLogout}>Sign Out</button>
+        <div class="session__btn">
+            <button class="btn" on:click={callApi}>Call API</button>
+            <button class="btn" on:click={onLogout}>Sign Out</button>
+        </div>
 			</div>
 		{:else}
 			<div>
@@ -46,61 +69,62 @@
 					<a href="https://supertokens.com">SuperTokens tutorial</a> to learn how to build Auth under
 					a day.
 				</p>
-				<button on:click={redirectToLogin}>Sign in</button>
+        <button class="btn" on:click={redirectToLogin}>Sign in</button>
 			</div>
 		{/if}
 	</div>
 </main>
 
 <style scoped>
-	.body {
-		text-align: center;
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		align-items: center;
-		height: 100vh;
-	}
+.body {
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+}
 
-	.user {
-		display: flex;
-		flex-direction: row;
-		justify-content: space-between;
-		align-items: baseline;
-		padding: 0.1rem;
-	}
+.user {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: baseline;
+    padding: 0.1rem;
+}
 
-	span {
-		margin-right: 0.3rem;
-		font-size: large;
-	}
+span {
+    margin-right: 0.3rem;
+    font-size: large;
+}
 
-	h3 {
-		color: #ff3e00;
-	}
+h3 {
+    color: #ff7547;
+}
 
-	h1 {
-		color: #ff3e00;
-		text-transform: uppercase;
-		font-size: 4em;
-		font-weight: 100;
-	}
+h1 {
+    color: #ff7547;
+    text-transform: uppercase;
+    font-size: 4em;
+    font-weight: 100;
+}
 
-	button {
-		cursor: pointer;
-		background-color: #ffb399;
-		border: none;
-		color: rgb(82, 82, 82);
-		padding: 0.75rem;
-		margin: 2rem;
-		transition: all 0.5s ease-in-out;
-		border-radius: 2rem;
-		font-size: large;
-	}
-
-	button:hover {
-		transform: scale(1.1);
-		background-color: #ff3e00;
-		color: white;
-	}
+.btn {
+    border: none;
+    padding: 8px;
+    border-radius: 6px;
+    cursor: pointer;
+    color: #fff;
+    transition: all 0.2s ease-in;
+    background-color: #ff7547;
+    font-size: large;
+    margin-left: 20px;
+}
+.btn:hover {
+    box-shadow: 0 8px 25px -8px #ffb399;
+}
+.session__btn {
+    display: flex;
+    justify-content: space-around;
+}
 </style>