diff --git a/packages/common-ui/src/components/CourseCardBrowser.vue b/packages/common-ui/src/components/CourseCardBrowser.vue
index c10834aa7..5614d847e 100644
--- a/packages/common-ui/src/components/CourseCardBrowser.vue
+++ b/packages/common-ui/src/components/CourseCardBrowser.vue
@@ -262,26 +262,19 @@ export default defineComponent({
     },
     async loadCardTags(cardIds: string[]) {
       try {
-        // Get all tags for the course
-        const allTags = await this.courseDB!.getCourseTagStubs();
-        
-        // For each card, find tags that include this card
-        cardIds.forEach(cardId => {
-          const cardTags: TagStub[] = [];
-          
-          // Check each tag to see if it contains this card
-          allTags.rows.forEach(tagRow => {
-            if (tagRow.doc && tagRow.doc.taggedCards.includes(cardId)) {
-              cardTags.push({
-                name: tagRow.doc.name,
-                snippet: tagRow.doc.snippet,
-                count: tagRow.doc.taggedCards.length
-              });
-            }
-          });
-          
-          this.cardTags[cardId] = cardTags;
-        });
+        // Use the proper API method to get tags for each card
+        await Promise.all(
+          cardIds.map(async (cardId) => {
+            const appliedTags = await this.courseDB!.getAppliedTags(cardId);
+            
+            // Convert to TagStub format
+            this.cardTags[cardId] = appliedTags.rows.map(row => ({
+              name: row.value.name,
+              snippet: row.value.snippet,
+              count: row.value.count
+            }));
+          })
+        );
       } catch (error) {
         console.error('Error loading card tags:', error);
       }
diff --git a/packages/common-ui/src/components/StudySession.vue b/packages/common-ui/src/components/StudySession.vue
index 8cc694dd8..8ebec2184 100644
--- a/packages/common-ui/src/components/StudySession.vue
+++ b/packages/common-ui/src/components/StudySession.vue
@@ -595,7 +595,7 @@ export default defineComponent({
 
         this.cardCount++;
         this.data = tmpData;
-        this.view = tmpView;
+        this.view = markRaw(tmpView);
         this.cardID = _cardID;
         this.courseID = _courseID;
         this.card_elo = tmpCardData.elo.global.score;
diff --git a/packages/common-ui/src/components/auth/UserChip.vue b/packages/common-ui/src/components/auth/UserChip.vue
index 1b05320cd..b31e0b9da 100644
--- a/packages/common-ui/src/components/auth/UserChip.vue
+++ b/packages/common-ui/src/components/auth/UserChip.vue
@@ -97,6 +97,12 @@ import { getCurrentUser, useAuthStore } from '../../stores/useAuthStore';
 import { useConfigStore } from '../../stores/useConfigStore';
 import { useAuthUI } from '../../composables/useAuthUI';
 
+// Define props (even if not used, prevents warnings)
+defineProps<{
+  showLoginButton?: boolean;
+  redirectToPath?: string;
+}>();
+
 const router = useRouter();
 const authStore = useAuthStore();
 const configStore = useConfigStore();
diff --git a/packages/common-ui/src/components/auth/UserLoginAndRegistrationContainer.vue b/packages/common-ui/src/components/auth/UserLoginAndRegistrationContainer.vue
index 13905a066..9c4587a51 100644
--- a/packages/common-ui/src/components/auth/UserLoginAndRegistrationContainer.vue
+++ b/packages/common-ui/src/components/auth/UserLoginAndRegistrationContainer.vue
@@ -1,21 +1,25 @@
 <template>
-  <transition v-if="userReady && display" name="component-fade" mode="out-in">
-    <div v-if="guestMode && authUIConfig.showLoginRegistration">
-      <v-dialog v-model="regDialog" width="500px">
-        <template #activator="{ props }">
-          <v-btn class="mr-2" size="small" color="success" v-bind="props">Sign Up</v-btn>
-        </template>
-        <UserRegistration @toggle="toggle" />
-      </v-dialog>
-      <v-dialog v-model="loginDialog" width="500px">
-        <template #activator="{ props }">
-          <v-btn size="small" color="success" v-bind="props">Log In</v-btn>
-        </template>
-        <UserLogin @toggle="toggle" />
-      </v-dialog>
-    </div>
-    <user-chip v-else />
-  </transition>
+  <div v-if="userReady && display">
+    <transition name="component-fade" mode="out-in">
+      <div v-if="guestMode && authUIConfig.showLoginRegistration" key="login-buttons">
+        <v-dialog v-model="regDialog" width="500px">
+          <template #activator="{ props }">
+            <v-btn class="mr-2" size="small" color="success" v-bind="props">Sign Up</v-btn>
+          </template>
+          <UserRegistration @toggle="toggle" />
+        </v-dialog>
+        <v-dialog v-model="loginDialog" width="500px">
+          <template #activator="{ props }">
+            <v-btn size="small" color="success" v-bind="props">Log In</v-btn>
+          </template>
+          <UserLogin @toggle="toggle" />
+        </v-dialog>
+      </div>
+      <div v-else key="user-chip">
+        <user-chip />
+      </div>
+    </transition>
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -28,6 +32,12 @@ import { useAuthStore } from '../../stores/useAuthStore';
 import { useAuthUI } from '../../composables/useAuthUI';
 import { GuestUsername } from '@vue-skuilder/db';
 
+// Define props
+const props = defineProps<{
+  showLoginButton?: boolean;
+  redirectToPath?: string;
+}>();
+
 const route = useRoute();
 const authStore = useAuthStore();
 const authUI = useAuthUI();
diff --git a/packages/common-ui/src/components/cardRendering/CardLoader.vue b/packages/common-ui/src/components/cardRendering/CardLoader.vue
index fbd441b30..42c4b068d 100644
--- a/packages/common-ui/src/components/cardRendering/CardLoader.vue
+++ b/packages/common-ui/src/components/cardRendering/CardLoader.vue
@@ -13,7 +13,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType } from 'vue';
+import { defineComponent, PropType, markRaw } from 'vue';
 import { getDataLayer, CardData, CardRecord, DisplayableData } from '@vue-skuilder/db';
 import { log, displayableDataToViewData, ViewData, ViewDescriptor } from '@vue-skuilder/common';
 import { ViewComponent } from '../../composables';
@@ -92,7 +92,7 @@ export default defineComponent({
         }
 
         this.data = tmpData;
-        this.view = tmpView as ViewComponent;
+        this.view = markRaw(tmpView as ViewComponent);
         this.cardID = _cardID;
         this.courseID = _courseID;
       } catch (e) {
diff --git a/packages/db/src/impl/common/BaseUserDB.ts b/packages/db/src/impl/common/BaseUserDB.ts
index 630f0da9b..133361fcf 100644
--- a/packages/db/src/impl/common/BaseUserDB.ts
+++ b/packages/db/src/impl/common/BaseUserDB.ts
@@ -79,11 +79,14 @@ export class BaseUser implements UserDBInterface, DocumentUpdater {
     return !this._username.startsWith(GuestUsername);
   }
 
-  private remoteDB!: PouchDB.Database;
   public remote(): PouchDB.Database {
     return this.remoteDB;
   }
+
   private localDB!: PouchDB.Database;
+  private remoteDB!: PouchDB.Database;
+  private writeDB!: PouchDB.Database; // Database to use for write operations (local-first approach)
+
   private updateQueue!: UpdateQueue;
 
   public async createAccount(
@@ -597,7 +600,11 @@ Currently logged-in as ${this._username}.`
   private setDBandQ() {
     this.localDB = getLocalUserDB(this._username);
     this.remoteDB = this.syncStrategy.setupRemoteDB(this._username);
-    this.updateQueue = new UpdateQueue(this.localDB);
+    // writeDB follows local-first pattern: static mode writes to local, CouchDB writes to remote/local as appropriate
+    this.writeDB = this.syncStrategy.getWriteDB
+      ? this.syncStrategy.getWriteDB(this._username)
+      : this.localDB;
+    this.updateQueue = new UpdateQueue(this.localDB, this.writeDB);
   }
 
   private async init() {
@@ -697,7 +704,9 @@ Currently logged-in as ${this._username}.`
    * @returns The updated state of the card's CardHistory data
    */
 
-  public async putCardRecord<T extends CardRecord>(record: T): Promise<CardHistory<CardRecord>> {
+  public async putCardRecord<T extends CardRecord>(
+    record: T
+  ): Promise<CardHistory<CardRecord> & PouchDB.Core.RevisionIdMeta> {
     const cardHistoryID = getCardHistoryID(record.courseID, record.cardID);
     // stringify the current record to make it writable to couchdb
     record.timeStamp = moment.utc(record.timeStamp).toString() as unknown as Moment;
@@ -735,8 +744,8 @@ Currently logged-in as ${this._username}.`
           streak: 0,
           bestInterval: 0,
         };
-        void this.remoteDB.put<CardHistory<T>>(initCardHistory);
-        return initCardHistory;
+        const putResult = await this.writeDB.put<CardHistory<T>>(initCardHistory);
+        return { ...initCardHistory, _rev: putResult.rev };
       } else {
         throw new Error(`putCardRecord failed because of:
   name:${reason.name}
@@ -793,7 +802,7 @@ Currently logged-in as ${this._username}.`
         const deletePromises = duplicateDocIds.map(async (docId) => {
           try {
             const doc = await this.remoteDB.get(docId);
-            await this.remoteDB.remove(doc);
+            await this.writeDB.remove(doc);
             log(`Successfully removed duplicate review: ${docId}`);
           } catch (error) {
             log(`Failed to remove duplicate review ${docId}: ${error}`);
@@ -891,7 +900,7 @@ Currently logged-in as ${this._username}.`
 
       if (err.status === 404) {
         // doc does not exist. Create it and then run this fcn again.
-        await this.remoteDB.put<ClassroomRegistrationDoc>({
+        await this.writeDB.put<ClassroomRegistrationDoc>({
           _id: BaseUser.DOC_IDS.CLASSROOM_REGISTRATIONS,
           registrations: [],
         });
diff --git a/packages/db/src/impl/common/SyncStrategy.ts b/packages/db/src/impl/common/SyncStrategy.ts
index 50fb5a926..36c3ff99e 100644
--- a/packages/db/src/impl/common/SyncStrategy.ts
+++ b/packages/db/src/impl/common/SyncStrategy.ts
@@ -14,6 +14,13 @@ export interface SyncStrategy {
    */
   setupRemoteDB(username: string): PouchDB.Database;
 
+  /**
+   * Get the database to use for write operations (local-first approach)
+   * @param username The username to get write DB for
+   * @returns PouchDB database instance for write operations
+   */
+  getWriteDB?(username: string): PouchDB.Database;
+
   /**
    * Start synchronization between local and remote databases
    * @param localDB The local PouchDB instance
diff --git a/packages/db/src/impl/couch/CouchDBSyncStrategy.ts b/packages/db/src/impl/couch/CouchDBSyncStrategy.ts
index 08e8d1ca5..826644284 100644
--- a/packages/db/src/impl/couch/CouchDBSyncStrategy.ts
+++ b/packages/db/src/impl/couch/CouchDBSyncStrategy.ts
@@ -32,6 +32,16 @@ export class CouchDBSyncStrategy implements SyncStrategy {
     }
   }
 
+  getWriteDB(username: string): PouchDB.Database {
+    if (username === GuestUsername || username.startsWith(GuestUsername)) {
+      // Guest users write to local database
+      return getLocalUserDB(username);
+    } else {
+      // Authenticated users write to remote (which will sync to local)
+      return this.getUserDB(username);
+    }
+  }
+
   startSync(localDB: PouchDB.Database, remoteDB: PouchDB.Database): void {
     // Only sync if local and remote are different instances
     if (localDB !== remoteDB) {
diff --git a/packages/db/src/impl/couch/updateQueue.ts b/packages/db/src/impl/couch/updateQueue.ts
index a0ef59899..0c02862fe 100644
--- a/packages/db/src/impl/couch/updateQueue.ts
+++ b/packages/db/src/impl/couch/updateQueue.ts
@@ -12,7 +12,8 @@ export default class UpdateQueue extends Loggable {
     [index: string]: boolean;
   } = {};
 
-  private db: PouchDB.Database;
+  private readDB: PouchDB.Database; // Database for read operations
+  private writeDB: PouchDB.Database; // Database for write operations (local-first)
 
   public update<T extends PouchDB.Core.Document<object>>(
     id: PouchDB.Core.DocumentId,
@@ -27,21 +28,24 @@ export default class UpdateQueue extends Loggable {
     return this.applyUpdates<T>(id);
   }
 
-  constructor(db: PouchDB.Database) {
+  constructor(readDB: PouchDB.Database, writeDB?: PouchDB.Database) {
     super();
     // PouchDB.debug.enable('*');
-    this.db = db;
+    this.readDB = readDB;
+    this.writeDB = writeDB || readDB; // Default to readDB if writeDB not provided
     logger.debug(`UpdateQ initialized...`);
-    void this.db.info().then((i) => {
+    void this.readDB.info().then((i) => {
       logger.debug(`db info: ${JSON.stringify(i)}`);
     });
   }
 
-  private async applyUpdates<T extends PouchDB.Core.Document<object>>(id: string): Promise<T> {
+  private async applyUpdates<T extends PouchDB.Core.Document<object>>(
+    id: string
+  ): Promise<T & PouchDB.Core.GetMeta & PouchDB.Core.RevisionIdMeta> {
     logger.debug(`Applying updates on doc: ${id}`);
     if (this.inprogressUpdates[id]) {
       // console.log(`Updates in progress...`);
-      await this.db.info(); // stall for a round trip
+      await this.readDB.info(); // stall for a round trip
       // console.log(`Retrying...`);
       return this.applyUpdates<T>(id);
     } else {
@@ -49,7 +53,7 @@ export default class UpdateQueue extends Loggable {
         this.inprogressUpdates[id] = true;
 
         try {
-          let doc = await this.db.get<T>(id);
+          let doc = await this.readDB.get<T>(id);
           logger.debug(`Retrieved doc: ${id}`);
           while (this.pendingUpdates[id].length !== 0) {
             const update = this.pendingUpdates[id].splice(0, 1)[0];
@@ -66,7 +70,7 @@ export default class UpdateQueue extends Loggable {
           //   console.log(`${k}: ${typeof k}`);
           // }
           // console.log(`Applied updates to doc: ${JSON.stringify(doc)}`);
-          await this.db.put<T>(doc);
+          await this.writeDB.put<T>(doc);
           logger.debug(`Put doc: ${id}`);
 
           if (this.pendingUpdates[id].length === 0) {
diff --git a/packages/db/src/impl/static/NoOpSyncStrategy.ts b/packages/db/src/impl/static/NoOpSyncStrategy.ts
index c6a2d3464..bf1e2b170 100644
--- a/packages/db/src/impl/static/NoOpSyncStrategy.ts
+++ b/packages/db/src/impl/static/NoOpSyncStrategy.ts
@@ -17,6 +17,11 @@ export class NoOpSyncStrategy implements SyncStrategy {
     return getLocalUserDB(username);
   }
 
+  getWriteDB(username: string): PouchDB.Database {
+    // In static mode, always write to local database
+    return getLocalUserDB(username);
+  }
+
   startSync(_localDB: PouchDB.Database, _remoteDB: PouchDB.Database): void {
     // No-op - in static mode, local and remote are the same database instance
     // PouchDB sync with itself is harmless and efficient
diff --git a/packages/db/src/impl/static/courseDB.ts b/packages/db/src/impl/static/courseDB.ts
index b4cf47f09..65cf95992 100644
--- a/packages/db/src/impl/static/courseDB.ts
+++ b/packages/db/src/impl/static/courseDB.ts
@@ -164,14 +164,55 @@ export class StaticCourseDB implements CourseDBInterface {
     }));
   }
 
-  async getAppliedTags(_cardId: string): Promise<PouchDB.Query.Response<TagStub>> {
-    // Would need to query the tag index
-    logger.warn(`getAppliedTags not implemented`);
-    return {
-      total_rows: 0,
-      offset: 0,
-      rows: [],
-    };
+  async getAppliedTags(cardId: string): Promise<PouchDB.Query.Response<TagStub>> {
+    try {
+      const tagsIndex = await this.unpacker.getTagsIndex();
+      const cardTags = tagsIndex.byCard[cardId] || [];
+      
+      const rows = await Promise.all(
+        cardTags.map(async (tagName) => {
+          const tagId = `${DocType.TAG}-${tagName}`;
+          
+          try {
+            // Try to get the full tag document
+            const tagDoc = await this.unpacker.getDocument(tagId);
+            return {
+              id: tagId,
+              key: cardId,
+              value: {
+                name: tagDoc.name,
+                snippet: tagDoc.snippet,
+                count: tagDoc.taggedCards?.length || 0,
+              },
+            };
+          } catch (error) {
+            // If tag document not found, create a minimal stub
+            return {
+              id: tagId,
+              key: cardId,
+              value: {
+                name: tagName,
+                snippet: `Tag: ${tagName}`,
+                count: tagsIndex.byTag[tagName]?.length || 0,
+              },
+            };
+          }
+        })
+      );
+
+      return {
+        total_rows: rows.length,
+        offset: 0,
+        rows,
+      };
+    } catch (error) {
+      logger.error(`Error getting applied tags for card ${cardId}:`, error);
+      return {
+        total_rows: 0,
+        offset: 0,
+        rows: [],
+      };
+    }
   }
 
   async addTagToCard(_cardId: string, _tagId: string): Promise<PouchDB.Core.Response> {
diff --git a/packages/standalone-ui/src/components/CourseHeader.vue b/packages/standalone-ui/src/components/CourseHeader.vue
index 5becf5626..b2b39ec5f 100644
--- a/packages/standalone-ui/src/components/CourseHeader.vue
+++ b/packages/standalone-ui/src/components/CourseHeader.vue
@@ -36,6 +36,12 @@ import { ref, computed } from 'vue';
 import { useDisplay } from 'vuetify';
 import { UserLoginAndRegistrationContainer } from '@vue-skuilder/common-ui';
 
+// Define props
+defineProps<{
+  title?: string;
+  logo?: string;
+}>();
+
 const { mobile } = useDisplay();
 const isMobile = computed(() => mobile.value);
 const drawer = ref(false);
@@ -44,6 +50,6 @@ const menuItems = ref([
   { text: 'Home', path: '/' },
   { text: 'Study', path: '/study' },
   { text: 'Browse', path: '/browse' },
-  { text: 'Progress', path: '/progress' },
+  // Progress view not implemented - will be accessible via UserChip->Stats
 ]);
 </script>
diff --git a/packages/standalone-ui/src/router/index.ts b/packages/standalone-ui/src/router/index.ts
index 5d21bdfee..76b516bbf 100644
--- a/packages/standalone-ui/src/router/index.ts
+++ b/packages/standalone-ui/src/router/index.ts
@@ -3,6 +3,8 @@ import HomeView from '../views/HomeView.vue';
 import StudyView from '../views/StudyView.vue';
 import ProgressView from '../views/ProgressView.vue';
 import BrowseView from '../views/BrowseView.vue';
+import UserStatsView from '../views/UserStatsView.vue';
+import UserSettingsView from '../views/UserSettingsView.vue';
 import { UserLogin, UserRegistration } from '@vue-skuilder/common-ui';
 
 const routes: Array<RouteRecordRaw> = [
@@ -37,6 +39,16 @@ const routes: Array<RouteRecordRaw> = [
     name: 'Register',
     component: UserRegistration,
   },
+  {
+    path: '/u/:username',
+    name: 'UserSettings',
+    component: UserSettingsView,
+  },
+  {
+    path: '/u/:username/stats',
+    name: 'UserStats', 
+    component: UserStatsView,
+  },
 ];
 
 const router = createRouter({
diff --git a/packages/standalone-ui/src/views/BrowseView.vue b/packages/standalone-ui/src/views/BrowseView.vue
index ad27f4c46..a54a2b8c0 100644
--- a/packages/standalone-ui/src/views/BrowseView.vue
+++ b/packages/standalone-ui/src/views/BrowseView.vue
@@ -1,7 +1,14 @@
 <template>
   <v-container>
     <div v-if="courseId">
-      <CourseInformation :course-id="courseId" :view-lookup-function="viewLookup" :edit-mode="editMode" />
+      <CourseInformation :course-id="courseId" :view-lookup-function="viewLookup" :edit-mode="editMode">
+        <template #actions="{ editMode }">
+          <!-- Standalone-ui specific actions - no registration/trial buttons -->
+          <div v-if="editMode !== 'none'">
+            <v-btn color="success" class="me-2" to="/study">Start Study Session</v-btn>
+          </div>
+        </template>
+      </CourseInformation>
     </div>
     <div v-else class="text-center">
       <v-alert type="error"> Course ID not found in configuration </v-alert>
diff --git a/packages/standalone-ui/src/views/UserSettingsView.vue b/packages/standalone-ui/src/views/UserSettingsView.vue
new file mode 100644
index 000000000..7169cda87
--- /dev/null
+++ b/packages/standalone-ui/src/views/UserSettingsView.vue
@@ -0,0 +1,57 @@
+<template>
+  <v-container>
+    <v-card>
+      <v-card-title class="d-flex align-center">
+        <v-icon class="mr-3">mdi-cog</v-icon>
+        User Settings
+      </v-card-title>
+      
+      <v-card-text>
+        <v-alert type="info" class="mb-4">
+          <v-icon start>mdi-information</v-icon>
+          Settings panel is coming soon! This will allow you to customize your learning experience.
+        </v-alert>
+        
+        <v-row>
+          <v-col cols="12" md="6">
+            <v-card variant="outlined">
+              <v-card-title class="text-h6">Study Preferences</v-card-title>
+              <v-card-text>
+                <p class="text-body-2">Configure session length, difficulty settings, and review scheduling.</p>
+              </v-card-text>
+            </v-card>
+          </v-col>
+          
+          <v-col cols="12" md="6">
+            <v-card variant="outlined">
+              <v-card-title class="text-h6">Interface Options</v-card-title>
+              <v-card-text>
+                <p class="text-body-2">Customize theme, keyboard shortcuts, and display preferences.</p>
+              </v-card-text>
+            </v-card>
+          </v-col>
+          
+          <v-col cols="12">
+            <v-card variant="outlined">
+              <v-card-title class="text-h6">Account Management</v-card-title>
+              <v-card-text>
+                <p class="text-body-2">Manage your profile information and data privacy settings.</p>
+              </v-card-text>
+            </v-card>
+          </v-col>
+        </v-row>
+      </v-card-text>
+      
+      <v-card-actions>
+        <v-btn variant="outlined" @click="$router.back()">
+          <v-icon start>mdi-arrow-left</v-icon>
+          Back
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-container>
+</template>
+
+<script setup lang="ts">
+// Placeholder for user settings view
+</script>
\ No newline at end of file
diff --git a/packages/standalone-ui/src/views/UserStatsView.vue b/packages/standalone-ui/src/views/UserStatsView.vue
new file mode 100644
index 000000000..f0d216cea
--- /dev/null
+++ b/packages/standalone-ui/src/views/UserStatsView.vue
@@ -0,0 +1,76 @@
+<template>
+  <v-container>
+    <h1>User Stats</h1>
+    
+    <div v-if="loading">Loading...</div>
+    
+    <div v-else-if="userElo">
+      <h2>ELO Profile</h2>
+      
+      <h3>Global ELO</h3>
+      <p>Score: {{ userElo.global.score }}</p>
+      <p>Interactions: {{ userElo.global.count }}</p>
+      
+      <h3 v-if="Object.keys(userElo.tags).length > 0">Tag-Specific ELOs</h3>
+      <ul v-if="Object.keys(userElo.tags).length > 0">
+        <li v-for="(elo, tag) in userElo.tags" :key="tag">
+          {{ tag }}: {{ elo.score }} ({{ elo.count }} interactions)
+        </li>
+      </ul>
+      
+      <h3 v-if="Object.keys(userElo.misc).length > 0">Additional Metrics</h3>
+      <ul v-if="Object.keys(userElo.misc).length > 0">
+        <li v-for="(value, key) in userElo.misc" :key="key">
+          {{ key }}: {{ value }}
+        </li>
+      </ul>
+    </div>
+    
+    <p v-else>No ELO data found.</p>
+    
+    <p><a href="#" @click="$router.back()">Back</a></p>
+  </v-container>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { getDataLayer } from '@vue-skuilder/db';
+import { getCurrentUser } from '@vue-skuilder/common-ui';
+import { CourseElo } from '@vue-skuilder/common';
+import config from '../../skuilder.config.json';
+
+const loading = ref(true);
+const userElo = ref<CourseElo | null>(null);
+
+// Simple MVP - no color coding needed
+
+onMounted(async () => {
+  try {
+    const courseId = config.course;
+    if (!courseId) {
+      console.error('No course ID found in config');
+      return;
+    }
+
+    const user = await getCurrentUser();
+    const dataLayer = getDataLayer();
+    const courseDB = dataLayer.getCourseDB(courseId);
+    
+    // Try to get user's ELO profile for this course
+    const userRegistrations = await dataLayer.getUserDB(user.getUsername()).getCourseRegistrations();
+    const courseReg = userRegistrations.find(reg => reg.courseID === courseId);
+    
+    if (courseReg && courseReg.elo) {
+      userElo.value = courseReg.elo;
+    } else {
+      // No ELO data yet
+      userElo.value = null;
+    }
+  } catch (error) {
+    console.error('Error loading user ELO:', error);
+    userElo.value = null;
+  } finally {
+    loading.value = false;
+  }
+});
+</script>
\ No newline at end of file