diff --git a/.DS_Store b/.DS_Store
index a2de8ff..0f06e70 100644
Binary files a/.DS_Store and b/.DS_Store differ
diff --git a/frontend-nextjs/.env.example b/frontend-nextjs/.env.example
index 4d1a841..6220bbf 100644
--- a/frontend-nextjs/.env.example
+++ b/frontend-nextjs/.env.example
@@ -1,5 +1,5 @@
 # If you want to skip device registration, set this to True. Set to False in production.
-SKIP_DEVICE_REGISTRATION=True
+NEXT_PUBLIC_SKIP_DEVICE_REGISTRATION=True
 
 # Update these with your Supabase details from your project settings > API
 # https://app.supabase.com/project/_/settings/api
diff --git a/frontend-nextjs/app/api/generate_auth_token/route.ts b/frontend-nextjs/app/api/generate_auth_token/route.ts
index 2bf4270..962ee4b 100644
--- a/frontend-nextjs/app/api/generate_auth_token/route.ts
+++ b/frontend-nextjs/app/api/generate_auth_token/route.ts
@@ -3,7 +3,8 @@ import jwt from "jsonwebtoken";
 import { createClient } from "@/utils/supabase/server";
 
 const ALGORITHM = "HS256";
-const skipDeviceRegistration = process.env.SKIP_DEVICE_REGISTRATION === "True";
+const skipDeviceRegistration =
+    process.env.NEXT_PUBLIC_SKIP_DEVICE_REGISTRATION === "True";
 
 interface TokenPayload {
     [key: string]: any;
@@ -71,13 +72,13 @@ export async function GET(req: Request) {
         }
 
         /**
-         * If `SKIP_DEVICE_REGISTRATION` is true, we use the default dev user.
+         * If `NEXT_PUBLIC_SKIP_DEVICE_REGISTRATION` is true, we use the default dev user.
          * Otherwise, we use the user by given by the mac address.
          *
          * Steps to register your device:
          * 1: Register the device `mac_address` and `user_code` in the `devices` tables.
          * 2: Make sure the user adds the `user_code` to their account in Settings to link the device to their `user_id`.
-         * 3: When `SKIP_DEVICE_REGISTRATION` is false, we then fetch the user by `mac_address`.
+         * 3: When `NEXT_PUBLIC_SKIP_DEVICE_REGISTRATION` is false, we then fetch the user by `mac_address`.
          */
         let user;
         if (skipDeviceRegistration) {
diff --git a/frontend-nextjs/app/components/Settings/AppSettings.tsx b/frontend-nextjs/app/components/Settings/AppSettings.tsx
index 35546c6..9e8b724 100644
--- a/frontend-nextjs/app/components/Settings/AppSettings.tsx
+++ b/frontend-nextjs/app/components/Settings/AppSettings.tsx
@@ -1,3 +1,4 @@
+"use client";
 
 import { connectUserToDevice, signOutAction } from "@/app/actions";
 import { Button } from "@/components/ui/button";
@@ -19,6 +20,9 @@ interface AppSettingsProps {
     heading: React.ReactNode;
 }
 
+const skipDeviceRegistration = process.env.NEXT_PUBLIC_SKIP_DEVICE_REGISTRATION === "True";
+
+
 const AppSettings: React.FC<AppSettingsProps> = ({
     selectedUser,
     heading,
@@ -88,8 +92,6 @@ const AppSettings: React.FC<AppSettingsProps> = ({
             });
     }
 
-    const skipDeviceRegistration = process.env.SKIP_DEVICE_REGISTRATION === "True";
-
     return (
         <>
             <GeneralUserForm
@@ -100,7 +102,7 @@ const AppSettings: React.FC<AppSettingsProps> = ({
                     onClickCallback={() => handleSave()}
                 />
 
-            <section className="space-y-4 max-w-screen-sm mt-12">
+            <div className="space-y-4 max-w-screen-sm mt-12">
                 <h2 className="text-lg font-semibold border-b border-gray-200 pb-2">
                     Device settings
                 </h2>
@@ -195,7 +197,7 @@ const AppSettings: React.FC<AppSettingsProps> = ({
                             </Button>
                         </form>
                 </div>
-            </section>
+            </div>
         </>
     );
 };
diff --git a/frontend-nextjs/app/page.tsx b/frontend-nextjs/app/page.tsx
index 022f50b..9c2e952 100644
--- a/frontend-nextjs/app/page.tsx
+++ b/frontend-nextjs/app/page.tsx
@@ -12,7 +12,7 @@ import { fetchGithubStars } from "./actions";
 
 export default async function LandingPage() {
   const supabase = createClient();
-  const { stars } = await fetchGithubStars("akdeb/ElatoAI");
+  const { stars = 0 } = await fetchGithubStars("akdeb/ElatoAI");
 
   const allPersonalities = await getAllPersonalities(supabase);
   const adultPersonalities = allPersonalities.filter((personality) => !personality.is_story && !personality.is_child_voice);