diff --git a/README.md b/README.md
index 69c88b7..57aea9a 100644
--- a/README.md
+++ b/README.md
@@ -52,7 +52,7 @@ To run the example locally, you need to:
 3. Copy the [`.env.development.example` file](./apps/chrome-extension/.env.development.example) to `/apps/chrome-extension/.env.development` and add the required environment variables.
 * `PLASMO_PUBLIC_CLERK_PUBLISHABLE_KEY` - the Clerk Publishable Key from the [API keys](https://dashboard.clerk.com/last-active?path=api-keys) Dashboard page.
 * `CLERK_FRONTEND_API` - the Clerk Frontend API URL from the `Show API URLs` button on the [API keys](https://dashboard.clerk.com/last-active?path=api-keys) dashboard page.
-* `PLASMO_PUBLIC_SYNC_HOST` - this is only required if you want to test the Sync Host feature. This is configured to match the web app included in this repo.
+* `PLASMO_PUBLIC_CLERK_SYNC_HOST` - this is only required if you want to test the Sync Host feature. This is configured to match the web app included in this repo.
 
 4. Copy the [`.env.chrome.example` file](./apps/chrome-extension/.env.chrome.example) to `/apps/chrome-extension/.env.chrome` and add the following required environment variables.
 * `CRX_PUBLIC_KEY` - the public key for your Chrome Extension. The [Chrome Extension Quickstart](https://clerk.com/docs/quickstarts/chrome-extension) and the [Configure a Consistent CRX ID](https://clerk.com/docs/references/chrome-extension/configure-consistent-crx-id) cover creating this.
diff --git a/apps/chrome-extension/src/background/index.ts b/apps/chrome-extension/src/background/index.ts
index b9e3213..d549bdb 100644
--- a/apps/chrome-extension/src/background/index.ts
+++ b/apps/chrome-extension/src/background/index.ts
@@ -10,7 +10,7 @@ if (!publishableKey) {
 async function getToken() {
   const clerk = await createClerkClient({
     publishableKey,
-    syncHost: process.env.PLASMO_PUBLIC_SYNC_HOST
+    syncHost: process.env.PLASMO_PUBLIC_CLERK_SYNC_HOST
   });
 
   // is there is no signed in user then return null
diff --git a/apps/chrome-extension/src/components/nav-bar.tsx b/apps/chrome-extension/src/components/nav-bar.tsx
index 027e763..828fc56 100644
--- a/apps/chrome-extension/src/components/nav-bar.tsx
+++ b/apps/chrome-extension/src/components/nav-bar.tsx
@@ -14,6 +14,9 @@ export const NavBar = () => {
             <Link to="/sdk-features">SDK Features</Link>
           </Button>
           <div className="plasmo-grow plasmo-items-center plasmo-justify-end plasmo-flex plasmo-pr-2">
+            <Button variant="link" asChild className="plasmo-mx-2">
+              <Link to="/settings">Settings</Link>
+            </Button>
             <UserButton />
           </div>
         </div>
diff --git a/apps/chrome-extension/src/popup/layouts/root-layout.tsx b/apps/chrome-extension/src/popup/layouts/root-layout.tsx
index 187f83d..88c57a3 100644
--- a/apps/chrome-extension/src/popup/layouts/root-layout.tsx
+++ b/apps/chrome-extension/src/popup/layouts/root-layout.tsx
@@ -6,7 +6,7 @@ const PUBLISHABLE_KEY = process.env.PLASMO_PUBLIC_CLERK_PUBLISHABLE_KEY
 const SYNC_HOST = process.env.PLASMO_PUBLIC_CLERK_SYNC_HOST
 
 if (!PUBLISHABLE_KEY || !SYNC_HOST) {
-  throw new Error('Please add the PLASMO_PUBLIC_CLERK_PUBLISHABLE_KEY and PLASMO_PUBLIC_SYNC_HOST to the .env.development file')
+  throw new Error('Please add the PLASMO_PUBLIC_CLERK_PUBLISHABLE_KEY and PLASMO_PUBLIC_CLERK_SYNC_HOST to the .env.development file')
 }
 
 export const RootLayout = () => {
diff --git a/apps/chrome-extension/src/popup/routes/settings.tsx b/apps/chrome-extension/src/popup/routes/settings.tsx
index ff82f2f..8c8538d 100644
--- a/apps/chrome-extension/src/popup/routes/settings.tsx
+++ b/apps/chrome-extension/src/popup/routes/settings.tsx
@@ -4,7 +4,7 @@ export const Settings = () => {
   return (
     <>
       <h1>Settings</h1>
-      <UserProfile routing="virtual" />
+      <UserProfile />
     </>
   );
 };
diff --git a/apps/chrome-extension/src/popup/routes/sign-in.tsx b/apps/chrome-extension/src/popup/routes/sign-in.tsx
index c8e58cc..8ff9c5d 100644
--- a/apps/chrome-extension/src/popup/routes/sign-in.tsx
+++ b/apps/chrome-extension/src/popup/routes/sign-in.tsx
@@ -4,7 +4,6 @@ export const SignInPage = () => {
   return (
     <div className="plasmo-flex plasmo-items-center plasmo-justify-center plasmo-h-[543px] plasmo-overflow-y-auto">
       <SignIn
-        routing="virtual"
         appearance={{
           elements: {
             socialButtons: "plasmo-hidden",
diff --git a/apps/chrome-extension/src/popup/routes/sign-up.tsx b/apps/chrome-extension/src/popup/routes/sign-up.tsx
index 5b3fd07..3608f8a 100644
--- a/apps/chrome-extension/src/popup/routes/sign-up.tsx
+++ b/apps/chrome-extension/src/popup/routes/sign-up.tsx
@@ -4,7 +4,6 @@ export const SignUpPage = () => {
   return (
     <div className="plasmo-flex plasmo-flex-col plasmo-items-center plasmo-justify-center plasmo-h-[543px] plasmo-overflow-y-auto">
       <SignUp
-        routing="virtual"
         appearance={{
           elements: {
             socialButtons: "plasmo-hidden",