diff --git a/src/components/auth/StoreAuth.ts b/src/components/auth/StoreAuth.ts
index 2cf3e20..d06876d 100644
--- a/src/components/auth/StoreAuth.ts
+++ b/src/components/auth/StoreAuth.ts
@@ -120,7 +120,7 @@ export class StoreAuth {
   private pb: PocketBase;
   private elements: AuthElements & { loadingSkeleton: HTMLDivElement };
   private isEditingMemberId: boolean = false;
-  private cachedUsers: any[] = []; // Store users data
+  private cachedUsers: any[] = [];
   private config = config;
 
   constructor() {
@@ -129,177 +129,73 @@ export class StoreAuth {
     this.init();
   }
 
+  // Public method to get auth state
+  public getAuthState() {
+    return {
+      isValid: this.pb.authStore.isValid,
+      model: this.pb.authStore.model
+    };
+  }
+
   private getElements(): AuthElements & { loadingSkeleton: HTMLDivElement } {
-    // Fun typescript fixes
-    const loginButton = document.getElementById(
-      "contentLoginButton",
-    ) as HTMLButtonElement;
-    const logoutButton = document.getElementById(
-      "contentLogoutButton",
-    ) as HTMLButtonElement;
+    // Get all required elements
+    const loginButton = document.getElementById("contentLoginButton") as HTMLButtonElement;
+    const logoutButton = document.getElementById("contentLogoutButton") as HTMLButtonElement;
     const userInfo = document.getElementById("userInfo") as HTMLDivElement;
-    const loadingSkeleton = document.getElementById(
-      "loadingSkeleton",
-    ) as HTMLDivElement;
-
-    // Add CSS for loading state transitions
-    const style = document.createElement("style");
-    style.textContent = `
-            .loading-state {
-                opacity: 0.5;
-                transition: opacity 0.3s ease-in-out;
-            }
-            .content-ready {
-                opacity: 1;
-            }
-        `;
-    document.head.appendChild(style);
-
-    const userName = document.getElementById(
-      "userName",
-    ) as HTMLParagraphElement;
-    const userEmail = document.getElementById(
-      "userEmail",
-    ) as HTMLParagraphElement;
-    const memberStatus = document.getElementById(
-      "memberStatus",
-    ) as HTMLDivElement;
-    const lastLogin = document.getElementById(
-      "lastLogin",
-    ) as HTMLParagraphElement;
-    const storeContent = document.getElementById(
-      "storeContent",
-    ) as HTMLDivElement;
-    const resumeUpload = document.getElementById(
-      "resumeUpload",
-    ) as HTMLInputElement;
-    const resumeName = document.getElementById(
-      "resumeName",
-    ) as HTMLParagraphElement;
-    const resumeDownload = document.getElementById(
-      "resumeDownload",
-    ) as HTMLAnchorElement;
-    const deleteResume = document.getElementById(
-      "deleteResume",
-    ) as HTMLButtonElement;
-    const uploadStatus = document.getElementById(
-      "uploadStatus",
-    ) as HTMLParagraphElement;
-    const resumeActions = document.getElementById(
-      "resumeActions",
-    ) as HTMLDivElement;
-    const memberIdInput = document.getElementById(
-      "memberIdInput",
-    ) as HTMLInputElement;
-    const saveMemberId = document.getElementById(
-      "saveMemberId",
-    ) as HTMLButtonElement;
-    const memberIdStatus = document.getElementById(
-      "memberIdStatus",
-    ) as HTMLParagraphElement;
-    const officerViewToggle = document.getElementById(
-      "officerViewToggle",
-    ) as HTMLDivElement;
-    const officerViewCheckbox = officerViewToggle?.querySelector(
-      'input[type="checkbox"]',
-    ) as HTMLInputElement;
-    const officerContent = document.getElementById(
-      "officerContent",
-    ) as HTMLDivElement;
-    const resumeList = document.getElementById(
-      "resumeList",
-    ) as HTMLTableSectionElement;
-    const refreshResumes = document.getElementById(
-      "refreshResumes",
-    ) as HTMLButtonElement;
-    const resumeSearch = document.getElementById(
-      "resumeSearch",
-    ) as HTMLInputElement;
-    const searchResumes = document.getElementById(
-      "searchResumes",
-    ) as HTMLButtonElement;
-
-    const profileEditor = document.getElementById(
-      "profileEditor",
-    ) as HTMLDialogElement;
-    const editorName = document.getElementById(
-      "editorName",
-    ) as HTMLInputElement;
-    const editorEmail = document.getElementById(
-      "editorEmail",
-    ) as HTMLInputElement;
-    const editorMemberId = document.getElementById(
-      "editorMemberId",
-    ) as HTMLInputElement;
-    const editorPoints = document.getElementById(
-      "editorPoints",
-    ) as HTMLInputElement;
-    const editorResume = document.getElementById(
-      "editorResume",
-    ) as HTMLInputElement;
-    const editorCurrentResume = document.getElementById(
-      "editorCurrentResume",
-    ) as HTMLParagraphElement;
-    const saveProfileButton = document.getElementById(
-      "saveProfileButton",
-    ) as HTMLButtonElement;
-
-    const sponsorViewToggle = document.getElementById(
-      "sponsorViewToggle",
-    ) as HTMLDivElement;
-
+    const loadingSkeleton = document.getElementById("loadingSkeleton") as HTMLDivElement;
+    const userName = document.getElementById("userName") as HTMLParagraphElement;
+    const userEmail = document.getElementById("userEmail") as HTMLParagraphElement;
+    const memberStatus = document.getElementById("memberStatus") as HTMLDivElement;
+    const lastLogin = document.getElementById("lastLogin") as HTMLParagraphElement;
+    const storeContent = document.getElementById("storeContent") as HTMLDivElement;
+    const resumeUpload = document.getElementById("resumeUpload") as HTMLInputElement;
+    const resumeName = document.getElementById("resumeName") as HTMLParagraphElement;
+    const resumeDownload = document.getElementById("resumeDownload") as HTMLAnchorElement;
+    const deleteResume = document.getElementById("deleteResume") as HTMLButtonElement;
+    const uploadStatus = document.getElementById("uploadStatus") as HTMLParagraphElement;
+    const resumeActions = document.getElementById("resumeActions") as HTMLDivElement;
+    const memberIdInput = document.getElementById("memberIdInput") as HTMLInputElement;
+    const saveMemberId = document.getElementById("saveMemberId") as HTMLButtonElement;
+    const memberIdStatus = document.getElementById("memberIdStatus") as HTMLParagraphElement;
+    const officerViewToggle = document.getElementById("officerViewToggle") as HTMLDivElement;
+    const officerViewCheckbox = officerViewToggle?.querySelector('input[type="checkbox"]') as HTMLInputElement;
+    const officerContent = document.getElementById("officerContent") as HTMLDivElement;
+    const resumeList = document.getElementById("resumeList") as HTMLTableSectionElement;
+    const refreshResumes = document.getElementById("refreshResumes") as HTMLButtonElement;
+    const resumeSearch = document.getElementById("resumeSearch") as HTMLInputElement;
+    const searchResumes = document.getElementById("searchResumes") as HTMLButtonElement;
+    const profileEditor = document.getElementById("profileEditor") as HTMLDialogElement;
+    const editorName = document.getElementById("editorName") as HTMLInputElement;
+    const editorEmail = document.getElementById("editorEmail") as HTMLInputElement;
+    const editorMemberId = document.getElementById("editorMemberId") as HTMLInputElement;
+    const editorPoints = document.getElementById("editorPoints") as HTMLInputElement;
+    const editorResume = document.getElementById("editorResume") as HTMLInputElement;
+    const editorCurrentResume = document.getElementById("editorCurrentResume") as HTMLParagraphElement;
+    const saveProfileButton = document.getElementById("saveProfileButton") as HTMLButtonElement;
+    const sponsorViewToggle = document.getElementById("sponsorViewToggle") as HTMLDivElement;
     const pdfViewer = document.getElementById("pdfViewer") as HTMLDialogElement;
     const pdfFrame = document.getElementById("pdfFrame") as HTMLIFrameElement;
     const pdfTitle = document.getElementById("pdfTitle") as HTMLHeadingElement;
     const pdfExternalLink = document.getElementById("pdfExternalLink") as HTMLAnchorElement;
 
-    if (
-      !loginButton ||
-      !logoutButton ||
-      !userInfo ||
-      !storeContent ||
-      !userName ||
-      !userEmail ||
-      !memberStatus ||
-      !lastLogin ||
-      !resumeUpload ||
-      !resumeName ||
-      !loadingSkeleton ||
-      !resumeDownload ||
-      !deleteResume ||
-      !uploadStatus ||
-      !resumeActions ||
-      !memberIdInput ||
-      !saveMemberId ||
-      !memberIdStatus ||
-      !officerViewToggle ||
-      !officerViewCheckbox ||
-      !officerContent ||
-      !resumeList ||
-      !refreshResumes ||
-      !resumeSearch ||
-      !searchResumes ||
-      !profileEditor ||
-      !editorName ||
-      !editorEmail ||
-      !editorMemberId ||
-      !editorPoints ||
-      !editorResume ||
-      !editorCurrentResume ||
-      !saveProfileButton ||
-      !sponsorViewToggle ||
-      !pdfViewer ||
-      !pdfFrame ||
-      !pdfTitle ||
-      !pdfExternalLink
-    ) {
-      throw new Error("Required DOM elements not found");
-    }
+    // Add CSS for loading state transitions
+    const style = document.createElement("style");
+    style.textContent = `
+      .loading-state {
+        opacity: 0.5;
+        transition: opacity 0.3s ease-in-out;
+      }
+      .content-ready {
+        opacity: 1;
+      }
+    `;
+    document.head.appendChild(style);
 
     return {
       loginButton,
       logoutButton,
       userInfo,
+      loadingSkeleton,
       userName,
       userEmail,
       memberStatus,
@@ -307,7 +203,6 @@ export class StoreAuth {
       storeContent,
       resumeUpload,
       resumeName,
-      loadingSkeleton,
       resumeDownload,
       deleteResume,
       uploadStatus,
@@ -334,28 +229,58 @@ export class StoreAuth {
       pdfViewer,
       pdfFrame,
       pdfTitle,
-      pdfExternalLink,
+      pdfExternalLink
     };
   }
 
-  private updateMemberIdState() {
-    const { memberIdInput, saveMemberId } = this.elements;
-    const user = this.pb.authStore.model;
+  private async init() {
+    // Initial UI update with loading state
+    await this.updateUI();
 
-    if (user?.member_id && !this.isEditingMemberId) {
-      // Has member ID and not editing - show update button and disable input
-      memberIdInput.disabled = true;
-      memberIdInput.value = user.member_id;
-      saveMemberId.textContent = "Update";
-      saveMemberId.classList.remove("enabled:btn-primary");
-      saveMemberId.classList.add("enabled:btn-ghost", "enabled:btn-outline");
-    } else {
-      // No member ID or editing - show save button and enable input
-      memberIdInput.disabled = false;
-      saveMemberId.textContent = "Save";
-      saveMemberId.classList.remove("enabled:btn-ghost", "enabled:btn-outline");
-      saveMemberId.classList.add("enabled:btn-primary");
-    }
+    // Setup event listeners
+    this.elements.loginButton.addEventListener("click", () => this.handleLogin());
+    this.elements.logoutButton.addEventListener("click", () => this.handleLogout());
+
+    // Resume upload event listener
+    this.elements.resumeUpload.addEventListener("change", (e) => {
+      const file = (e.target as HTMLInputElement).files?.[0];
+      if (file) {
+        this.handleResumeUpload(file);
+      }
+    });
+
+    // Resume delete event listener
+    this.elements.deleteResume.addEventListener("click", () => this.handleResumeDelete());
+
+    // Member ID save event listener
+    this.elements.saveMemberId.addEventListener("click", () => this.handleMemberIdButton());
+
+    // Listen for auth state changes
+    this.pb.authStore.onChange(() => {
+      console.log("Auth state changed. IsValid:", this.pb.authStore.isValid);
+      this.updateUI();
+    });
+
+    // Profile editor event listeners
+    const { profileEditor, saveProfileButton } = this.elements;
+
+    // Close dialog when clicking outside
+    profileEditor.addEventListener("click", (e) => {
+      if (e.target === profileEditor) {
+        profileEditor.close();
+      }
+    });
+
+    // Save profile button
+    saveProfileButton.addEventListener("click", (e) => {
+      e.preventDefault();
+      this.handleProfileSave();
+    });
+
+    // Add resume view event listener
+    document.addEventListener('viewResume', ((e: CustomEvent) => {
+      this.handleResumeView(e.detail.url, e.detail.fileName);
+    }) as EventListener);
   }
 
   private async updateUI() {
@@ -367,16 +292,14 @@ export class StoreAuth {
       userEmail,
       memberStatus,
       lastLogin,
-      storeContent,
-      resumeName,
-      resumeDownload,
-      resumeActions,
       memberIdInput,
       saveMemberId,
       resumeUpload,
+      resumeName,
+      resumeDownload,
+      resumeActions,
       loadingSkeleton,
       officerViewToggle,
-      officerContent,
       sponsorViewToggle,
     } = this.elements;
 
@@ -392,7 +315,6 @@ export class StoreAuth {
       // Show logout buttons for authenticated users
       allLogoutButtons.forEach(btn => btn.classList.remove("hidden"));
 
-      // Update all the user information first
       const user = this.pb.authStore.model;
       const isSponsor = user.member_type === this.config.roles.sponsor.name;
       const isOfficer = [
@@ -403,101 +325,37 @@ export class StoreAuth {
       userName.textContent = user.name || this.config.ui.messages.auth.notProvided;
       userEmail.textContent = user.email || this.config.ui.messages.auth.notAvailable;
 
-      // Hide member ID and resume sections for sponsors
-      const memberIdSection = memberIdInput.closest('.space-y-1') as HTMLElement;
-      const resumeSection = resumeUpload.closest('.space-y-2')?.parentElement as HTMLElement;
-      const memberIdDivider = memberIdSection?.nextElementSibling as HTMLElement;
-      const resumeDivider = resumeSection?.nextElementSibling as HTMLElement;
-
-      if (isSponsor) {
-        // Hide member ID and resume sections for sponsors
-        if (memberIdSection) memberIdSection.style.display = 'none';
-        if (memberIdDivider) memberIdDivider.style.display = 'none';
-        if (resumeSection) resumeSection.style.display = 'none';
-        if (resumeDivider) resumeDivider.style.display = 'none';
-      } else {
-        // Show and enable member ID input and save button for non-sponsors
-        if (memberIdSection) memberIdSection.style.display = '';
-        if (memberIdDivider) memberIdDivider.style.display = '';
-        if (resumeSection) resumeSection.style.display = '';
-        if (resumeDivider) resumeDivider.style.display = '';
+      // Update member status badge
+      if (user.member_type) {
+        memberStatus.textContent = user.member_type;
+        memberStatus.classList.remove("badge-neutral");
         
-        memberIdInput.disabled = false;
-        saveMemberId.disabled = false;
-        resumeUpload.disabled = false;
-      }
-
-      // Update member status
-      if (user.verified) {
-        // Check and update member_type if not set
-        if (!user.member_type) {
-          try {
-            const isIeeeOfficer = user.email?.toLowerCase().endsWith(this.config.autoDetection.officer.emailDomain) || false;
-            const newMemberType = isIeeeOfficer
-              ? this.config.roles.officer.name
-              : this.config.roles.member.name;
-
-            await this.pb.collection("users").update(user.id, {
-              member_type: newMemberType,
-            });
-
-            user.member_type = newMemberType;
-          } catch (err) {
-            console.error("Failed to update member type:", err);
-          }
-        }
-
-        memberStatus.textContent = user.member_type || this.config.roles.member.name;
-        memberStatus.classList.remove(
-          "badge-neutral",
-          "badge-success",
-          "badge-warning",
-          "badge-info",
-          "badge-error",
-        );
-
-        // Set color based on member type
-        const role = Object.values(this.config.roles).find(r => r.name === user.member_type);
-        if (role) {
-          memberStatus.classList.add(role.badge);
+        if (isOfficer) {
+          memberStatus.classList.add("badge-primary");
+        } else if (isSponsor) {
+          memberStatus.classList.add("badge-warning");
         } else {
-          memberStatus.classList.add(this.config.roles.member.badge);
-        }
-
-        // Handle view toggles visibility
-        officerViewToggle.style.display = isOfficer ? "block" : "none";
-        sponsorViewToggle.style.display = isSponsor ? "block" : "none";
-
-        // If user is an officer or sponsor, preload the table data
-        if (isOfficer || isSponsor) {
-          await this.fetchUserResumes();
+          memberStatus.classList.add("badge-info");
         }
       } else {
         memberStatus.textContent = this.config.ui.messages.auth.notVerified;
-        memberStatus.classList.remove(
-          "badge-info",
-          "badge-warning",
-          "badge-success",
-          "badge-error",
-        );
+        memberStatus.classList.remove("badge-info", "badge-warning", "badge-primary");
         memberStatus.classList.add("badge-neutral");
       }
 
       // Update member ID input and state
       memberIdInput.value = user.member_id || "";
-      this.updateMemberIdState();
+      memberIdInput.disabled = false;
+      saveMemberId.disabled = false;
 
       // Update last login
-      const lastLoginDate = user.last_login
+      lastLogin.textContent = user.last_login
         ? new Date(user.last_login).toLocaleString()
         : this.config.ui.messages.auth.never;
-      lastLogin.textContent = lastLoginDate;
 
       // Update resume section
-      if (
-        user.resume &&
-        (!Array.isArray(user.resume) || user.resume.length > 0)
-      ) {
+      resumeUpload.disabled = false;
+      if (user.resume && (!Array.isArray(user.resume) || user.resume.length > 0)) {
         const resumeUrl = user.resume.toString();
         const fileName = this.getFileNameFromUrl(resumeUrl);
         resumeName.textContent = fileName;
@@ -515,44 +373,36 @@ export class StoreAuth {
         resumeActions.style.display = "none";
       }
 
+      // Show/hide view toggles
+      officerViewToggle.style.display = isOfficer ? "block" : "none";
+      sponsorViewToggle.style.display = isSponsor ? "block" : "none";
+
       // After everything is updated, show the content
       loadingSkeleton.style.display = "none";
       userInfo.classList.remove("hidden");
-      // Use a small delay to ensure the transition works
       setTimeout(() => {
         userInfo.style.opacity = "1";
       }, 50);
-
-      officerViewToggle.style.display = isOfficer ? "block" : "none";
-      sponsorViewToggle.style.display = isSponsor ? "block" : "none";
     } else {
       // Show login buttons for unauthenticated users
       allLoginButtons.forEach(btn => btn.classList.remove("hidden"));
 
-      // Update for logged out state
+      // Reset all fields to default state
       userName.textContent = this.config.ui.messages.auth.notSignedIn;
       userEmail.textContent = this.config.ui.messages.auth.notSignedIn;
       memberStatus.textContent = this.config.ui.messages.auth.notVerified;
-      memberStatus.classList.remove(
-        "badge-info",
-        "badge-warning",
-        "badge-success",
-        "badge-error",
-      );
+      memberStatus.classList.remove("badge-info", "badge-warning", "badge-primary");
       memberStatus.classList.add("badge-neutral");
       lastLogin.textContent = this.config.ui.messages.auth.never;
 
-      // Disable member ID input and save button
+      // Disable inputs
       memberIdInput.disabled = true;
       saveMemberId.disabled = true;
-
-      // Disable resume upload
       resumeUpload.disabled = true;
 
       // Reset member ID
       memberIdInput.value = "";
       this.isEditingMemberId = false;
-      this.updateMemberIdState();
 
       // Reset resume section
       resumeName.textContent = "No resume uploaded";
@@ -560,19 +410,48 @@ export class StoreAuth {
       resumeDownload.onclick = null;
       resumeActions.style.display = "none";
 
-      // After everything is updated, show the content
+      // Hide view toggles
+      officerViewToggle.style.display = "none";
+      sponsorViewToggle.style.display = "none";
+
+      // Show content
       loadingSkeleton.style.display = "none";
       userInfo.classList.remove("hidden");
-      // Use a small delay to ensure the transition works
       setTimeout(() => {
         userInfo.style.opacity = "1";
       }, 50);
-
-      officerViewToggle.style.display = "none";
-      sponsorViewToggle.style.display = "none";
     }
   }
 
+  private async handleLogin() {
+    try {
+      const authMethods = await this.pb.collection("users").listAuthMethods();
+      const oidcProvider = authMethods.oauth2?.providers?.find(
+        (p: { name: string }) => p.name === this.config.api.oauth2.providerName
+      );
+
+      if (!oidcProvider) {
+        throw new Error("OIDC provider not found");
+      }
+
+      localStorage.setItem("provider", JSON.stringify(oidcProvider));
+      const redirectUrl = window.location.origin + this.config.api.oauth2.redirectPath;
+      const authUrl = oidcProvider.authURL + encodeURIComponent(redirectUrl);
+      window.location.href = authUrl;
+    } catch (err) {
+      console.error("Authentication error:", err);
+      this.elements.userEmail.textContent = this.config.ui.messages.auth.loginError;
+      this.elements.userName.textContent = "Error";
+    }
+  }
+
+  private handleLogout() {
+    this.pb.authStore.clear();
+    this.cachedUsers = [];
+    this.isEditingMemberId = false;
+    this.updateUI();
+  }
+
   private getFileNameFromUrl(url: string): string {
     try {
       const urlObj = new URL(url);
@@ -583,15 +462,68 @@ export class StoreAuth {
     }
   }
 
+  private handleResumeView(url: string, fileName: string) {
+    const { pdfViewer, pdfFrame, pdfTitle, pdfExternalLink } = this.elements;
+    pdfFrame.src = url;
+    pdfTitle.textContent = fileName;
+    pdfExternalLink.href = url;
+    pdfViewer.showModal();
+  }
+
+  private async handleResumeUpload(file: File) {
+    const { uploadStatus } = this.elements;
+    try {
+      const user = this.pb.authStore.model;
+      if (!user?.id) {
+        throw new Error("User ID not found");
+      }
+
+      const formData = new FormData();
+      formData.append("resume", file);
+
+      await this.pb.collection("users").update(user.id, formData);
+      uploadStatus.textContent = this.config.ui.messages.resume.success;
+      this.updateUI();
+
+      setTimeout(() => {
+        uploadStatus.textContent = "";
+      }, this.config.ui.messages.resume.messageTimeout);
+    } catch (err) {
+      console.error("Resume upload error:", err);
+      uploadStatus.textContent = this.config.ui.messages.resume.error;
+    }
+  }
+
+  private async handleResumeDelete() {
+    const { uploadStatus } = this.elements;
+    try {
+      const user = this.pb.authStore.model;
+      if (!user?.id) {
+        throw new Error("User ID not found");
+      }
+
+      await this.pb.collection("users").update(user.id, {
+        resume: null
+      });
+
+      uploadStatus.textContent = this.config.ui.messages.resume.deleteSuccess;
+      this.updateUI();
+
+      setTimeout(() => {
+        uploadStatus.textContent = "";
+      }, this.config.ui.messages.resume.messageTimeout);
+    } catch (err) {
+      console.error("Resume deletion error:", err);
+      uploadStatus.textContent = this.config.ui.messages.resume.deleteError;
+    }
+  }
+
   private async handleMemberIdButton() {
     const user = this.pb.authStore.model;
-
     if (user?.member_id && !this.isEditingMemberId) {
-      // If we have a member ID and we're not editing, switch to edit mode
       this.isEditingMemberId = true;
-      this.updateMemberIdState();
+      this.updateUI();
     } else {
-      // If we're editing or don't have a member ID, try to save
       await this.handleMemberIdSave();
     }
   }
@@ -609,317 +541,22 @@ export class StoreAuth {
       }
 
       await this.pb.collection("users").update(user.id, {
-        member_id: memberId,
+        member_id: memberId
       });
 
       memberIdStatus.textContent = this.config.ui.messages.memberId.success;
       this.isEditingMemberId = false;
       this.updateUI();
 
-      // Clear the status message after a delay
       setTimeout(() => {
         memberIdStatus.textContent = "";
       }, this.config.ui.messages.memberId.messageTimeout);
-    } catch (err: any) {
+    } catch (err) {
       console.error("IEEE Member ID save error:", err);
       memberIdStatus.textContent = this.config.ui.messages.memberId.error;
     }
   }
 
-  private async handleResumeUpload(file: File) {
-    const { uploadStatus } = this.elements;
-
-    // Check file type and size
-    if (!this.config.resume.allowedTypes.some(type => file.name.toLowerCase().endsWith(type))) {
-      uploadStatus.textContent = `File type not allowed. Allowed types: ${this.config.resume.allowedTypes.join(", ")}`;
-      return;
-    }
-
-    if (file.size > this.config.resume.maxSize) {
-      uploadStatus.textContent = `File too large. Maximum size: ${this.config.resume.maxSize / 1024 / 1024}MB`;
-      return;
-    }
-
-    try {
-      uploadStatus.textContent = this.config.ui.messages.resume.uploading;
-
-      const formData = new FormData();
-      formData.append("resume", file);
-
-      const user = this.pb.authStore.model;
-      if (!user?.id) {
-        throw new Error("User ID not found");
-      }
-
-      // Get current user data first
-      const currentUser = await this.pb.collection("users").getOne(user.id);
-
-      // Keep existing data
-      formData.append("name", currentUser.name || "");
-      formData.append("email", currentUser.email || "");
-      formData.append("member_id", currentUser.member_id || "");
-      formData.append("points", currentUser.points?.toString() || "0");
-
-      await this.pb.collection("users").update(user.id, formData);
-
-      uploadStatus.textContent = this.config.ui.messages.resume.success;
-      this.updateUI();
-
-      // Clear the file input
-      this.elements.resumeUpload.value = "";
-
-      // Clear the status message after a delay
-      setTimeout(() => {
-        uploadStatus.textContent = "";
-      }, this.config.ui.messages.resume.messageTimeout);
-    } catch (err: any) {
-      console.error("Resume upload error:", err);
-      uploadStatus.textContent = this.config.ui.messages.resume.error;
-    }
-  }
-
-  private async handleResumeDelete() {
-    const { uploadStatus } = this.elements;
-
-    try {
-      uploadStatus.textContent = this.config.ui.messages.resume.deleting;
-
-      const user = this.pb.authStore.model;
-      if (!user?.id) {
-        throw new Error("User ID not found");
-      }
-
-      await this.pb.collection("users").update(user.id, {
-        resume: null,
-      });
-
-      uploadStatus.textContent = this.config.ui.messages.resume.deleteSuccess;
-      this.updateUI();
-
-      // Clear the status message after a delay
-      setTimeout(() => {
-        uploadStatus.textContent = "";
-      }, this.config.ui.messages.resume.messageTimeout);
-    } catch (err: any) {
-      console.error("Resume deletion error:", err);
-      uploadStatus.textContent = this.config.ui.messages.resume.deleteError;
-    }
-  }
-
-  private async handleLogin() {
-    console.log("Starting OAuth2 authentication...");
-    try {
-      const authMethods = await this.pb.collection("users").listAuthMethods();
-      const oidcProvider = authMethods.oauth2?.providers?.find(
-        (p: { name: string }) => p.name === this.config.api.oauth2.providerName,
-      );
-
-      if (!oidcProvider) {
-        throw new Error("OIDC provider not found");
-      }
-
-      // Store provider info for the redirect page
-      localStorage.setItem("provider", JSON.stringify(oidcProvider));
-
-      // Redirect to the authorization URL
-      const redirectUrl = window.location.origin + this.config.api.oauth2.redirectPath;
-      const authUrl = oidcProvider.authURL + encodeURIComponent(redirectUrl);
-      window.location.href = authUrl;
-    } catch (err: any) {
-      console.error("Authentication error:", err);
-      this.elements.userEmail.textContent = this.config.ui.messages.auth.loginError;
-      this.elements.userName.textContent = "Error";
-    }
-  }
-
-  private handleLogout() {
-    // Clear auth store
-    this.pb.authStore.clear();
-    
-    // Clear cached users
-    this.cachedUsers = [];
-
-    // Reset member ID editing state
-    this.isEditingMemberId = false;
-
-    // Show all sections that might have been hidden
-    const memberIdSection = this.elements.memberIdInput.closest('.space-y-1') as HTMLElement;
-    const resumeSection = this.elements.resumeUpload.closest('.space-y-2')?.parentElement as HTMLElement;
-    const memberIdDivider = memberIdSection?.nextElementSibling as HTMLElement;
-    const resumeDivider = resumeSection?.nextElementSibling as HTMLElement;
-
-    // Show all sections
-    if (memberIdSection) memberIdSection.style.display = '';
-    if (memberIdDivider) memberIdDivider.style.display = '';
-    if (resumeSection) resumeSection.style.display = '';
-    if (resumeDivider) resumeDivider.style.display = '';
-
-    // Update UI
-    this.updateUI();
-  }
-
-  private async fetchUserResumes(searchQuery: string = "") {
-    try {
-      // Only fetch from API if we don't have cached data
-      if (this.cachedUsers.length === 0) {
-        const records = await this.pb.collection("users").getList(1, this.config.ui.defaults.pageSize, {
-          sort: this.config.ui.defaults.sortField,
-          fields: "id,name,email,member_id,resume,points,collectionId,collectionName",
-          expand: "resume",
-        });
-        this.cachedUsers = records.items;
-      }
-
-      // Filter cached data based on search query
-      let filteredUsers = this.cachedUsers;
-      if (searchQuery) {
-        const terms = searchQuery.toLowerCase().split(" ").filter(term => term.length > 0);
-        if (terms.length > 0) {
-          filteredUsers = this.cachedUsers.filter(user => {
-            return terms.every(term => 
-              (user.name?.toLowerCase().includes(term) || 
-               user.email?.toLowerCase().includes(term) || 
-               user.member_id?.toLowerCase().includes(term))
-            );
-          });
-        }
-      }
-
-      const { resumeList } = this.elements;
-      const fragment = document.createDocumentFragment();
-      const isSponsor = this.pb.authStore.model?.member_type === this.config.roles.sponsor.name;
-
-      if (filteredUsers.length === 0) {
-        const row = document.createElement("tr");
-        row.innerHTML = `
-          <td colspan="6" class="text-center py-4">
-            ${searchQuery ? "No users found matching your search." : "No users found."}
-          </td>
-        `;
-        fragment.appendChild(row);
-      } else {
-        filteredUsers.forEach((user) => {
-          const row = document.createElement("tr");
-          const resumeUrl = user.resume && user.resume !== ""
-            ? this.pb.files.getURL(user, user.resume.toString())
-            : null;
-          const fileName = resumeUrl ? this.getFileNameFromUrl(user.resume.toString()) : null;
-
-          // Create edit button only if not a sponsor
-          const editButton = !isSponsor ? `
-            <button class="btn btn-ghost btn-xs edit-profile" data-user-id="${user.id}">
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
-                <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
-              </svg>
-              Edit
-            </button>
-          ` : '';
-
-          // Create view resume link
-          const viewResumeLink = resumeUrl
-            ? `<a href="#" class="btn btn-ghost btn-xs" onclick="event.preventDefault(); document.dispatchEvent(new CustomEvent('viewResume', { detail: { url: '${resumeUrl}', fileName: '${fileName}' } }));">View Resume</a>`
-            : '<span class="text-sm opacity-50">No resume</span>';
-
-          row.innerHTML = `
-            <td class="block lg:table-cell">
-              <!-- Mobile View -->
-              <div class="lg:hidden space-y-2">
-                <div class="font-medium">${user.name || "N/A"}</div>
-                <div class="text-sm opacity-70">${user.email || "N/A"}</div>
-                <div class="text-sm opacity-70">ID: ${user.member_id || "N/A"}</div>
-                <div class="text-sm opacity-70">Points: ${user.points || 0}</div>
-                <div class="flex items-center justify-between">
-                  ${viewResumeLink}
-                  ${editButton}
-                </div>
-              </div>
-
-              <!-- Desktop View -->
-              <span class="hidden lg:block">${user.name || "N/A"}</span>
-            </td>
-            <td class="hidden lg:table-cell">${user.email || "N/A"}</td>
-            <td class="hidden lg:table-cell">${user.member_id || "N/A"}</td>
-            <td class="hidden lg:table-cell">${user.points || 0}</td>
-            <td class="hidden lg:table-cell">
-              ${viewResumeLink}
-            </td>
-            <td class="hidden lg:table-cell">
-              ${editButton}
-            </td>
-          `;
-
-          fragment.appendChild(row);
-        });
-      }
-
-      resumeList.innerHTML = "";
-      resumeList.appendChild(fragment);
-
-      // Setup edit profile event listeners only if not a sponsor
-      if (!isSponsor) {
-        const editButtons = resumeList.querySelectorAll(".edit-profile");
-        editButtons.forEach((button) => {
-          button.addEventListener("click", () => {
-            const userId = (button as HTMLButtonElement).dataset.userId;
-            if (userId) {
-              this.handleProfileEdit(userId);
-            }
-          });
-        });
-      }
-    } catch (err) {
-      console.error("Failed to fetch user resumes:", err);
-      const { resumeList } = this.elements;
-      resumeList.innerHTML = `
-        <tr>
-          <td colspan="6" class="text-center py-4 text-error">
-            Failed to fetch resumes. Please try again.
-          </td>
-        </tr>
-      `;
-    }
-  }
-
-  private async handleProfileEdit(userId: string) {
-    try {
-      const user = await this.pb.collection("users").getOne(userId);
-      const {
-        profileEditor,
-        editorName,
-        editorEmail,
-        editorMemberId,
-        editorPoints,
-        editorCurrentResume,
-        saveProfileButton,
-      } = this.elements;
-
-      // Populate the form
-      editorName.value = user.name || "";
-      editorEmail.value = user.email || "";
-      editorMemberId.value = user.member_id || "";
-      editorPoints.value = user.points?.toString() || "0";
-
-      // Update resume display
-      if (user.resume) {
-        const resumeUrl = this.pb.files.getURL(user, user.resume.toString());
-        const fileName = this.getFileNameFromUrl(resumeUrl);
-        editorCurrentResume.textContent = `Current resume: ${fileName}`;
-        editorCurrentResume.classList.remove("opacity-70");
-      } else {
-        editorCurrentResume.textContent = "No resume uploaded";
-        editorCurrentResume.classList.add("opacity-70");
-      }
-
-      // Store the user ID for saving
-      saveProfileButton.dataset.userId = userId;
-
-      // Show the dialog
-      profileEditor.showModal();
-    } catch (err) {
-      console.error("Failed to load user for editing:", err);
-    }
-  }
-
   private async handleProfileSave() {
     const {
       profileEditor,
@@ -955,151 +592,11 @@ export class StoreAuth {
         formData.append("resume", currentUser.resume);
       }
 
-      // Log the form data for debugging
-      console.log("Form data being sent:", {
-        name: editorName.value,
-        email: editorEmail.value,
-        member_id: editorMemberId.value,
-        points: editorPoints.value,
-        hasNewResume: editorResume.files && editorResume.files.length > 0,
-        hasExistingResume: !!currentUser.resume,
-      });
-
-      const updatedUser = await this.pb
-        .collection("users")
-        .update(userId, formData);
-      console.log("Update response:", updatedUser);
-
-      // Close the dialog and refresh the table
+      await this.pb.collection("users").update(userId, formData);
       profileEditor.close();
-      this.fetchUserResumes();
+      this.updateUI();
     } catch (err) {
       console.error("Failed to save user profile:", err);
     }
   }
-
-  private handleResumeView(url: string, fileName: string) {
-    const { pdfViewer, pdfFrame, pdfTitle, pdfExternalLink } = this.elements;
-    pdfFrame.src = url;
-    pdfTitle.textContent = fileName;
-    pdfExternalLink.href = url;
-    pdfViewer.showModal();
-  }
-
-  private init() {
-    // Initial UI update with loading state
-    this.updateUI().catch(console.error);
-
-    // Setup event listeners
-    this.elements.loginButton.addEventListener("click", () =>
-      this.handleLogin(),
-    );
-    this.elements.logoutButton.addEventListener("click", () =>
-      this.handleLogout(),
-    );
-
-    // Resume upload event listener
-    this.elements.resumeUpload.addEventListener("change", (e) => {
-      const file = (e.target as HTMLInputElement).files?.[0];
-      if (file) {
-        this.handleResumeUpload(file);
-      }
-    });
-
-    // Resume delete event listener
-    this.elements.deleteResume.addEventListener("click", () =>
-      this.handleResumeDelete(),
-    );
-
-    // Member ID save event listener
-    this.elements.saveMemberId.addEventListener("click", () =>
-      this.handleMemberIdButton(),
-    );
-
-    // Search functionality
-    const handleSearch = () => {
-      const searchQuery = this.elements.resumeSearch.value.trim();
-      this.fetchUserResumes(searchQuery);
-    };
-
-    // Real-time search
-    this.elements.resumeSearch.addEventListener("input", handleSearch);
-
-    // Search button click handler
-    this.elements.searchResumes.addEventListener("click", handleSearch);
-
-    // Officer view toggle event listener
-    this.elements.officerViewCheckbox.addEventListener("change", (e) => {
-      const isChecked = (e.target as HTMLInputElement).checked;
-      const storeItemsContainer = document.getElementById("storeItemsGrid");
-      const { officerContent } = this.elements;
-
-      if (storeItemsContainer) {
-        storeItemsContainer.style.display = isChecked ? "none" : "grid";
-      }
-      officerContent.style.display = isChecked ? "block" : "none";
-
-      // Uncheck sponsor view if officer view is checked
-      if (isChecked) {
-        const sponsorCheckbox = this.elements.sponsorViewToggle.querySelector('input[type="checkbox"]') as HTMLInputElement;
-        if (sponsorCheckbox) {
-          sponsorCheckbox.checked = false;
-        }
-      }
-    });
-
-    // Sponsor view toggle event listener
-    const sponsorCheckbox = this.elements.sponsorViewToggle.querySelector('input[type="checkbox"]') as HTMLInputElement;
-    if (sponsorCheckbox) {
-      sponsorCheckbox.addEventListener("change", (e) => {
-        const isChecked = (e.target as HTMLInputElement).checked;
-        const storeItemsContainer = document.getElementById("storeItemsGrid");
-        const { officerContent } = this.elements;
-
-        if (storeItemsContainer) {
-          storeItemsContainer.style.display = isChecked ? "none" : "grid";
-        }
-        officerContent.style.display = isChecked ? "block" : "none";
-
-        // Uncheck officer view if sponsor view is checked
-        if (isChecked) {
-          this.elements.officerViewCheckbox.checked = false;
-        }
-      });
-    }
-
-    // Refresh resumes button event listener
-    this.elements.refreshResumes.addEventListener("click", () => {
-      this.elements.resumeSearch.value = ""; // Clear search when refreshing
-      this.cachedUsers = []; // Clear the cache to force a new fetch
-      this.fetchUserResumes();
-    });
-
-    // Listen for auth state changes
-    this.pb.authStore.onChange(async (token) => {
-      console.log("Auth state changed. IsValid:", this.pb.authStore.isValid);
-      this.updateUI();
-    });
-
-    // Profile editor event listeners
-    const { profileEditor, saveProfileButton } = this.elements;
-
-    // Close dialog when clicking outside
-    profileEditor.addEventListener("click", (e) => {
-      if (e.target === profileEditor) {
-        profileEditor.close();
-      }
-    });
-
-    // Save profile button
-    saveProfileButton.addEventListener("click", (e) => {
-      e.preventDefault();
-      this.handleProfileSave();
-    });
-
-    // Add resume view event listener
-    document.addEventListener('viewResume', ((e: CustomEvent) => {
-      this.handleResumeView(e.detail.url, e.detail.fileName);
-    }) as EventListener);
-  }
-}
+}
\ No newline at end of file
diff --git a/src/components/auth/UserProfile.astro b/src/components/auth/UserProfile.astro
index 880c0dc..20d6492 100644
--- a/src/components/auth/UserProfile.astro
+++ b/src/components/auth/UserProfile.astro
@@ -1,225 +1,261 @@
 <div>
-    <!-- Loading Skeleton (shown by default) -->
-    <div id="loadingSkeleton" class="card bg-base-200 shadow-xl">
-        <div class="card-body p-0">
-            <div class="px-6 pt-6">
-                <!-- Title -->
-                <h2 class="skeleton h-8 w-40 card-title"></h2>
+    <!-- Loading Skeleton -->
+    <div id="loadingSkeleton" class="card bg-base-100 shadow-xl">
+        <div class="card-body p-6">
+            <!-- Avatar and Name Section -->
+            <div class="flex flex-col items-center mb-6">
+                <div class="skeleton w-24 h-24 rounded-full mb-4"></div>
+                <div class="skeleton h-8 w-48"></div>
+                <div class="skeleton h-4 w-32 mt-2"></div>
             </div>
-            <!-- Content -->
-            <div class="px-6 pb-6">
-                <div class="space-y-3">
-                    <!-- Name -->
-                    <div class="space-y-1">
-                        <div class="skeleton h-3 w-16 opacity-70"></div>
-                        <div class="skeleton h-[1.75rem] w-48"></div>
-                    </div>
-                    <div class="divider my-0.5"></div>
 
-                    <!-- Email -->
-                    <div class="space-y-1">
-                        <div class="skeleton h-3 w-16 opacity-70"></div>
-                        <div class="skeleton h-[1.75rem] w-64"></div>
-                    </div>
-                    <div class="divider my-0.5"></div>
+            <!-- Member Status -->
+            <div class="flex justify-center mb-6">
+                <div class="skeleton h-6 w-32"></div>
+            </div>
 
-                    <!-- Member Status -->
-                    <div class="space-y-1">
-                        <div class="skeleton h-3 w-24 opacity-70"></div>
-                        <div class="skeleton h-[1.75rem] w-32"></div>
-                    </div>
-                    <div class="divider my-0.5"></div>
+            <!-- Stats Grid -->
+            <div class="stats stats-vertical shadow bg-base-200 mb-6">
+                <div class="stat px-6 py-2">
+                    <div class="skeleton h-4 w-20 mb-1"></div>
+                    <div class="skeleton h-8 w-24"></div>
+                </div>
+                <div class="stat px-6 py-2">
+                    <div class="skeleton h-4 w-24 mb-1"></div>
+                    <div class="skeleton h-8 w-32"></div>
+                </div>
+            </div>
 
-                    <!-- Member ID -->
-                    <div class="space-y-1">
-                        <div class="skeleton h-3 w-20 opacity-70"></div>
-                        <div class="flex items-center gap-2">
-                            <div class="skeleton h-8 flex-1"></div>
-                            <div class="skeleton h-8 w-16"></div>
-                        </div>
-                    </div>
-                    <div class="divider my-0.5"></div>
-
-                    <!-- Last Login -->
-                    <div class="space-y-1">
-                        <div class="skeleton h-3 w-20 opacity-70"></div>
-                        <div class="skeleton h-[1.25rem] w-32"></div>
-                    </div>
-                    <div class="divider my-0.5"></div>
-
-                    <!-- Event Check-in -->
-                    <div class="space-y-2">
-                        <div class="skeleton h-3 w-24 opacity-70"></div>
-                        <div class="space-y-2">
-                            <div class="flex items-center gap-2">
-                                <div class="skeleton h-8 flex-1"></div>
-                                <div class="skeleton h-8 w-24"></div>
-                            </div>
-                            <div class="skeleton h-3 w-48 opacity-70"></div>
-                        </div>
-                    </div>
-                    <div class="divider my-0.5"></div>
-
-                    <!-- Resume -->
-                    <div class="space-y-2">
-                        <div class="skeleton h-3 w-16 opacity-70"></div>
-                        <div class="space-y-2">
-                            <div class="flex items-center gap-2">
-                                <div class="skeleton h-5 flex-1"></div>
-                                <div class="skeleton h-5 w-24"></div>
-                            </div>
-                            <div class="skeleton h-8 w-full"></div>
-                            <div class="skeleton h-3 w-48 opacity-70"></div>
-                        </div>
-                    </div>
-                    <div class="divider my-0.5"></div>
-
-                    <!-- Auth Buttons -->
-                    <div class="pt-2">
-                        <div class="skeleton h-10 w-full"></div>
-                    </div>
+            <!-- Member Details -->
+            <div class="space-y-4">
+                <div class="space-y-2">
+                    <div class="skeleton h-4 w-24"></div>
+                    <div class="skeleton h-10 w-full"></div>
+                </div>
+                <div class="space-y-2">
+                    <div class="skeleton h-4 w-20"></div>
+                    <div class="skeleton h-10 w-full"></div>
                 </div>
             </div>
         </div>
     </div>
 
-    <!-- Actual Content (hidden by default) -->
-    <div id="userInfo" class="card bg-base-200 shadow-xl opacity-0 hidden">
-        <div class="card-body p-0">
-            <div class="px-6 pt-6">
-                <h2 class="card-title text-2xl">User Profile</h2>
-            </div>
-            <div class="px-6 pb-6">
-                <div class="space-y-3">
-                    <div class="space-y-1">
-                        <label class="text-sm opacity-70">Name</label>
-                        <p id="userName" class="h-[1.75rem] font-medium">
-                            Not signed in
-                        </p>
-                    </div>
-                    <div class="divider my-0.5"></div>
-                    <div class="space-y-1">
-                        <label class="text-sm opacity-70">Email</label>
-                        <p id="userEmail" class="h-[1.75rem] font-medium">
-                            Not signed in
-                        </p>
-                    </div>
-                    <div class="divider my-0.5"></div>
-                    <div class="space-y-1">
-                        <label class="text-sm opacity-70">Member Status</label>
-                        <div class="flex h-[1.75rem] items-center">
-                            <div id="memberStatus" class="badge badge-neutral">
-                                Not verified
-                            </div>
-                        </div>
-                    </div>
-                    <div id="officerViewToggle" class="hidden">
-                        <label
-                            class="flex items-center justify-between w-full px-1 bg-base-200 rounded-lg"
-                        >
-                            <span class="text-sm">Officer View</span>
-                            <input
-                                type="checkbox"
-                                class="toggle toggle-primary"
-                            />
-                        </label>
-                    </div>
-                    <div id="sponsorViewToggle" class="hidden">
-                        <label
-                            class="flex items-center justify-between w-full px-1 bg-base-200 rounded-lg"
-                        >
-                            <span class="text-sm">Sponsor View</span>
-                            <input
-                                type="checkbox"
-                                class="toggle toggle-warning"
-                            />
-                        </label>
-                    </div>
-                    <div class="divider my-0.5"></div>
-                    <div class="space-y-1">
-                        <label class="text-sm opacity-70">IEEE Member ID</label>
-                        <div class="flex items-center gap-2 h-8">
-                            <input
-                                type="text"
-                                id="memberIdInput"
-                                placeholder="Enter your IEEE Member ID"
-                                class="input input-bordered w-full h-8 min-h-[2rem] disabled:bg-base-300 disabled:border-2 disabled:border-opacity-50 disabled:cursor-not-allowed"
-                                disabled
-                            />
-                            <button
-                                id="saveMemberId"
-                                class="btn h-8 min-h-[2rem] disabled:bg-base-300 disabled:border-2 disabled:border-opacity-50 disabled:cursor-not-allowed enabled:btn-primary hover:enabled:bg-primary-focus"
-                                disabled>Save</button
-                            >
-                        </div>
-                        <p id="memberIdStatus" class="text-xs mt-1 opacity-70">
-                        </p>
-                    </div>
-                    <div class="divider my-0.5"></div>
-                    <div class="space-y-1">
-                        <label class="text-sm opacity-70">Last Login</label>
-                        <p
-                            id="lastLogin"
-                            class="text-sm h-[1.25rem] opacity-80"
-                        >
-                            Never
-                        </p>
-                    </div>
-                    <div class="divider my-0.5"></div>
-                    <div class="space-y-2">
-                        <label class="text-sm opacity-70">Resume</label>
-                        <div id="resumeSection" class="space-y-2">
-                            <div class="flex items-center gap-2 h-[1.25rem]">
-                                <p
-                                    id="resumeName"
-                                    class="text-sm truncate flex-1"
-                                >
-                                    No resume uploaded
-                                </p>
-                                <div id="resumeActions" class="flex gap-2">
-                                    <a
-                                        id="resumeDownload"
-                                        href="#"
-                                        target="_blank"
-                                        class="btn btn-ghost btn-xs">View</a
-                                    >
-                                    <button
-                                        id="deleteResume"
-                                        class="btn btn-ghost btn-xs text-error"
-                                        >Delete</button
-                                    >
-                                </div>
-                            </div>
-                            <div id="uploadSection">
-                                <input
-                                    type="file"
-                                    id="resumeUpload"
-                                    accept=".pdf,.doc,.docx"
-                                    class="file-input file-input-bordered file-input-sm w-full disabled:bg-base-300 disabled:border-2 disabled:border-opacity-50 disabled:cursor-not-allowed"
-                                    disabled
-                                />
-                                <p
-                                    id="uploadStatus"
-                                    class="text-xs mt-1 opacity-70"
-                                >
-                                </p>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="divider my-0.5"></div>
-                    <div class="pt-2">
-                        <button
-                            id="contentLoginButton"
-                            class="login-button btn btn-primary w-full"
-                            >Sign in with IEEEUCSD SSO</button
-                        >
-                        <button
-                            id="contentLogoutButton"
-                            class="logout-button btn btn-error w-full"
-                            >Sign Out</button
-                        >
+    <!-- Actual Content -->
+    <div id="userInfo" class="card bg-base-100 shadow-xl opacity-0 hidden">
+        <div class="card-body p-6">
+            <!-- Avatar and Name Section -->
+            <div class="flex flex-col items-center mb-6">
+                <div class="avatar online placeholder mb-4">
+                    <div
+                        class="bg-gradient-to-br from-primary to-secondary text-primary-content rounded-full w-24 ring ring-primary ring-offset-base-100 ring-offset-2"
+                    >
+                        <span id="userInitials" class="text-3xl"></span>
                     </div>
                 </div>
+                <div class="text-center">
+                    <h2 id="userName" class="text-2xl font-bold">
+                        Not signed in
+                    </h2>
+                    <p id="userEmail" class="text-base-content/70">
+                        Not signed in
+                    </p>
+                </div>
+            </div>
+
+            <!-- Member Status -->
+            <div class="flex justify-center mb-6">
+                <div id="memberStatus" class="badge badge-lg gap-2">
+                    <span class="loading loading-ring loading-xs"></span>
+                    Not verified
+                </div>
+            </div>
+
+            <!-- Stats Grid -->
+            <div class="stats stats-vertical shadow bg-base-200 mb-6">
+                <div class="stat px-6 py-2">
+                    <div class="stat-title text-xs">Last Login</div>
+                    <div id="lastLogin" class="stat-value text-lg">Never</div>
+                </div>
+                <div class="stat px-6 py-2">
+                    <div class="stat-title text-xs">Member Since</div>
+                    <div class="stat-value text-lg" id="memberSince">-</div>
+                </div>
+            </div>
+
+            <!-- View Toggles -->
+            <div class="space-y-2 mb-6">
+                <div id="officerViewToggle" class="hidden">
+                    <label
+                        class="flex cursor-pointer gap-2 justify-between items-center bg-gradient-to-r from-primary/10 to-primary/5 rounded-lg px-4 py-2 hover:from-primary/20 hover:to-primary/10 transition-all"
+                    >
+                        <span class="flex items-center gap-2">
+                            <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                class="h-4 w-4"
+                                viewBox="0 0 20 20"
+                                fill="currentColor"
+                            >
+                                <path
+                                    d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z"
+                                ></path>
+                            </svg>
+                            <span>Officer View</span>
+                        </span>
+                        <input type="checkbox" class="toggle toggle-primary" />
+                    </label>
+                </div>
+                <div id="sponsorViewToggle" class="hidden">
+                    <label
+                        class="flex cursor-pointer gap-2 justify-between items-center bg-gradient-to-r from-warning/10 to-warning/5 rounded-lg px-4 py-2 hover:from-warning/20 hover:to-warning/10 transition-all"
+                    >
+                        <span class="flex items-center gap-2">
+                            <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                class="h-4 w-4"
+                                viewBox="0 0 20 20"
+                                fill="currentColor"
+                            >
+                                <path
+                                    fill-rule="evenodd"
+                                    d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
+                                    clip-rule="evenodd"></path>
+                            </svg>
+                            <span>Sponsor View</span>
+                        </span>
+                        <input type="checkbox" class="toggle toggle-warning" />
+                    </label>
+                </div>
+            </div>
+
+            <!-- Member Details -->
+            <div class="space-y-4">
+                <!-- IEEE Member ID -->
+                <div class="form-control">
+                    <label class="label">
+                        <span class="label-text flex items-center gap-2">
+                            <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                class="h-4 w-4"
+                                viewBox="0 0 20 20"
+                                fill="currentColor"
+                            >
+                                <path
+                                    fill-rule="evenodd"
+                                    d="M10 2a1 1 0 00-1 1v1a1 1 0 002 0V3a1 1 0 00-1-1zM4 4h3a3 3 0 006 0h3a2 2 0 012 2v9a2 2 0 01-2 2H4a2 2 0 01-2-2V6a2 2 0 012-2zm2.5 7a1.5 1.5 0 100-3 1.5 1.5 0 000 3zm2.45 4a2.5 2.5 0 10-4.9 0h4.9zM12 9a1 1 0 100 2h3a1 1 0 100-2h-3zm-1 4a1 1 0 011-1h2a1 1 0 110 2h-2a1 1 0 01-1-1z"
+                                    clip-rule="evenodd"></path>
+                            </svg>
+                            IEEE Member ID
+                        </span>
+                    </label>
+                    <div class="join w-full">
+                        <input
+                            type="text"
+                            id="memberIdInput"
+                            placeholder="Enter your IEEE Member ID"
+                            class="join-item input input-bordered flex-1 disabled:bg-base-200 disabled:border-2 disabled:border-opacity-50 disabled:cursor-not-allowed"
+                            disabled
+                        />
+                        <button
+                            id="saveMemberId"
+                            class="join-item btn disabled:bg-base-200 disabled:border-2 disabled:border-opacity-50 disabled:cursor-not-allowed enabled:btn-primary hover:enabled:bg-primary-focus"
+                            disabled>Save</button
+                        >
+                    </div>
+                    <label class="label">
+                        <span id="memberIdStatus" class="label-text-alt"></span>
+                    </label>
+                </div>
+
+                <!-- Resume Upload -->
+                <div class="form-control">
+                    <label class="label">
+                        <span class="label-text flex items-center gap-2">
+                            <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                class="h-4 w-4"
+                                viewBox="0 0 20 20"
+                                fill="currentColor"
+                            >
+                                <path
+                                    fill-rule="evenodd"
+                                    d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z"
+                                    clip-rule="evenodd"></path>
+                            </svg>
+                            Resume
+                        </span>
+                    </label>
+                    <div id="resumeSection" class="space-y-2">
+                        <div class="flex items-center gap-2">
+                            <p id="resumeName" class="text-sm truncate flex-1">
+                                No resume uploaded
+                            </p>
+                            <div id="resumeActions" class="flex gap-2">
+                                <a
+                                    id="resumeDownload"
+                                    href="#"
+                                    target="_blank"
+                                    class="btn btn-ghost btn-xs">View</a
+                                >
+                                <button
+                                    id="deleteResume"
+                                    class="btn btn-ghost btn-xs text-error"
+                                    >Delete</button
+                                >
+                            </div>
+                        </div>
+                        <div id="uploadSection">
+                            <input
+                                type="file"
+                                id="resumeUpload"
+                                accept=".pdf,.doc,.docx"
+                                class="file-input file-input-bordered file-input-sm w-full disabled:bg-base-200 disabled:border-2 disabled:border-opacity-50 disabled:cursor-not-allowed"
+                                disabled
+                            />
+                            <label class="label">
+                                <span id="uploadStatus" class="label-text-alt"
+                                ></span>
+                            </label>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Auth Buttons -->
+            <div class="pt-4">
+                <button
+                    id="contentLoginButton"
+                    class="login-button btn btn-primary w-full gap-2"
+                >
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        class="h-5 w-5"
+                        viewBox="0 0 20 20"
+                        fill="currentColor"
+                    >
+                        <path
+                            fill-rule="evenodd"
+                            d="M3 3a1 1 0 011 1v12a1 1 0 11-2 0V4a1 1 0 011-1zm7.707 3.293a1 1 0 010 1.414L9.414 9H17a1 1 0 110 2H9.414l1.293 1.293a1 1 0 01-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0z"
+                            clip-rule="evenodd"></path>
+                    </svg>
+                    Sign in with IEEEUCSD SSO
+                </button>
+                <button
+                    id="contentLogoutButton"
+                    class="logout-button btn btn-error w-full gap-2"
+                >
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        class="h-5 w-5"
+                        viewBox="0 0 20 20"
+                        fill="currentColor"
+                    >
+                        <path
+                            fill-rule="evenodd"
+                            d="M3 3a1 1 0 00-1 1v12a1 1 0 102 0V4a1 1 0 00-1-1zm10.293 9.293a1 1 0 001.414 1.414l3-3a1 1 0 000-1.414l-3-3a1 1 0 10-1.414 1.414L14.586 9H7a1 1 0 100 2h7.586l-1.293 1.293z"
+                            clip-rule="evenodd"></path>
+                    </svg>
+                    Sign Out
+                </button>
             </div>
         </div>
     </div>
@@ -228,7 +264,7 @@
 <!-- Profile Editor Dialog -->
 <dialog id="profileEditor" class="modal">
     <div class="modal-box">
-        <h3 class="font-bold text-lg mb-4">Edit Profile</h3>
+        <h3 class="font-bold text-2xl mb-6">Edit Profile</h3>
         <form class="space-y-4" onsubmit="return false" novalidate>
             <div class="form-control">
                 <label class="label">
@@ -356,7 +392,7 @@
         display: none;
     }
     #userInfo {
-        transition: opacity 0.3s ease-in-out;
+        transition: all 0.3s ease-in-out;
     }
     .modal {
         background: rgba(0, 0, 0, 0.5);
@@ -369,6 +405,82 @@
 <script>
     import { StoreAuth } from "./StoreAuth";
     import { EventCheckIn } from "./EventCheckIn";
-    new StoreAuth();
-    new EventCheckIn();
+
+    // Initialize auth and event check-in
+    document.addEventListener("DOMContentLoaded", () => {
+        try {
+            new StoreAuth();
+            new EventCheckIn();
+
+            // Add error handling for failed initialization
+            window.addEventListener("unhandledrejection", (event) => {
+                console.error("Profile loading error:", event.reason);
+                const userInfo = document.getElementById("userInfo");
+                const loadingSkeleton =
+                    document.getElementById("loadingSkeleton");
+                const errorMessage = document.createElement("div");
+
+                errorMessage.className = "alert alert-error";
+                errorMessage.innerHTML = `
+                    <div class="flex items-center gap-2">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 20 20" fill="currentColor">
+                            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
+                        </svg>
+                        <span>Failed to load profile. Please refresh the page.</span>
+                    </div>
+                `;
+
+                if (loadingSkeleton) loadingSkeleton.style.display = "none";
+                if (userInfo) {
+                    userInfo.innerHTML = "";
+                    userInfo.appendChild(errorMessage);
+                    userInfo.classList.remove("hidden");
+                    userInfo.style.opacity = "1";
+                }
+            });
+        } catch (error) {
+            console.error("Failed to initialize profile:", error);
+        }
+    });
+
+    // Add user initials generation
+    const userNameElement = document.getElementById("userName");
+    const userInitialsElement = document.getElementById("userInitials");
+    const memberSinceElement = document.getElementById("memberSince");
+
+    if (userNameElement && userInitialsElement && memberSinceElement) {
+        const observer = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                if (
+                    mutation.type === "characterData" ||
+                    mutation.type === "childList"
+                ) {
+                    const name = userNameElement.textContent || "";
+                    if (name && name !== "Not signed in") {
+                        const initials = name
+                            .split(" ")
+                            .map((n) => n[0])
+                            .join("")
+                            .toUpperCase()
+                            .slice(0, 2);
+                        userInitialsElement.textContent = initials;
+                    } else {
+                        userInitialsElement.textContent = "?";
+                    }
+                }
+            });
+        });
+
+        observer.observe(userNameElement, {
+            characterData: true,
+            childList: true,
+            subtree: true,
+        });
+    }
+
+    // Set member since date (you'll need to modify StoreAuth.ts to include this)
+    if (memberSinceElement) {
+        const created = new Date(); // Replace with actual user creation date
+        memberSinceElement.textContent = created.toLocaleDateString();
+    }
 </script>
diff --git a/src/components/profile/DefaultProfileView.astro b/src/components/profile/DefaultProfileView.astro
index 22b0528..031f70d 100644
--- a/src/components/profile/DefaultProfileView.astro
+++ b/src/components/profile/DefaultProfileView.astro
@@ -8,48 +8,44 @@
                     <h2 class="card-title text-2xl">Events</h2>
                 </div>
 
-                <!-- Event Check-in -->
-                <div
-                    id="eventCheckInSkeleton"
-                    class="card bg-base-100 shadow-sm mb-4 animate-pulse"
-                >
-                    <div class="card-body p-4">
-                        <div class="h-6 bg-base-300 rounded w-2/3 mb-4"></div>
-                        <div class="flex items-center gap-2">
-                            <div class="h-8 bg-base-300 rounded flex-1"></div>
-                            <div class="h-8 bg-base-300 rounded w-24"></div>
-                        </div>
-                    </div>
-                </div>
+                <!-- Event Check-in Section -->
+                <div class="card bg-base-200 shadow-xl mb-8">
+                    <div class="card-body p-6">
+                        <h2 class="card-title text-2xl mb-4">Quick Check-in</h2>
 
-                <div
-                    id="eventCheckInContent"
-                    class="card bg-base-100 shadow-sm mb-4 hidden"
-                >
-                    <div class="card-body p-4">
-                        <h3 class="font-medium text-lg mb-2">
-                            Enter your event code to check in
-                        </h3>
-                        <div id="eventCheckInSection" class="space-y-2">
-                            <div class="flex items-center gap-2">
-                                <input
-                                    type="text"
-                                    id="eventCodeInput"
-                                    placeholder="Enter event code"
-                                    class="input input-bordered input-sm flex-1"
-                                    value=""
-                                />
-                                <button
-                                    id="checkInButton"
-                                    class="btn btn-sm btn-primary"
-                                    >Check In</button
-                                >
+                        <!-- Event Check-in Skeleton -->
+                        <div id="eventCheckInSkeleton" class="animate-pulse">
+                            <div class="h-6 bg-base-300 rounded w-2/3 mb-4">
+                            </div>
+                            <div class="flex items-center gap-2">
+                                <div class="h-8 bg-base-300 rounded flex-1">
+                                </div>
+                                <div class="h-8 bg-base-300 rounded w-24"></div>
+                            </div>
+                        </div>
+
+                        <!-- Event Check-in Content -->
+                        <div id="eventCheckInContent" class="hidden">
+                            <div id="eventCheckInSection" class="space-y-2">
+                                <div class="flex items-center gap-2">
+                                    <input
+                                        type="text"
+                                        id="eventCodeInput"
+                                        placeholder="Enter event code"
+                                        class="input input-bordered flex-1"
+                                        value=""
+                                    />
+                                    <button
+                                        id="checkInButton"
+                                        class="btn btn-primary">Check In</button
+                                    >
+                                </div>
+                                <p
+                                    id="checkInStatus"
+                                    class="text-sm mt-1 opacity-70"
+                                >
+                                </p>
                             </div>
-                            <p
-                                id="checkInStatus"
-                                class="text-xs mt-1 opacity-70"
-                            >
-                            </p>
                         </div>
                     </div>
                 </div>
@@ -210,6 +206,7 @@
         "eventCheckInSkeleton"
     );
     const eventCheckInContent = document.getElementById("eventCheckInContent");
+    const pastEventsCount = document.getElementById("pastEventsCount");
 
     // Function to show content and hide skeleton
     function showEventCheckIn() {
@@ -325,6 +322,7 @@
         const hasFiles =
             event.files && Array.isArray(event.files) && event.files.length > 0;
         const isPastEvent = new Date(event.end_date) < new Date();
+        const { status, badge } = getEventStatus(event, isAttended);
 
         // Only show files button for past events
         const filesButton =
@@ -343,30 +341,33 @@
                 : "";
 
         return `
-            <div class="card bg-base-100 shadow-sm">
+            <div class="card bg-base-100 shadow-sm hover:shadow-md transition-shadow">
                 <div class="card-body p-4">
-                    <div class="flex justify-between items-start">
-                        <div>
-                            <h3 class="font-medium text-lg">${event.event_name}</h3>
+                    <div class="flex justify-between items-start gap-4">
+                        <div class="flex-1 min-w-0">
+                            <div class="flex items-center gap-2 mb-2">
+                                <h3 class="font-medium text-lg truncate">${event.event_name}</h3>
+                                <div class="badge ${badge} gap-1">
+                                    ${getStatusIcon(status)}
+                                    ${status}
+                                </div>
+                            </div>
                             <div class="text-sm opacity-70 space-y-1">
                                 <p>Starts: ${formatDate(event.start_date)}</p>
                                 <p>Ends: ${formatDate(event.end_date)}</p>
-                                ${event.location ? `<p class="text-xs">📍 ${event.location}</p>` : ""}
+                                ${
+                                    event.location
+                                        ? `<p class="flex items-center gap-1">
+                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
+                                        <path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd" />
+                                    </svg>
+                                    ${event.location}
+                                </p>`
+                                        : ""
+                                }
                             </div>
-                            ${hasFiles && isPastEvent ? `<div class="mt-2">${filesButton}</div>` : ""}
+                            ${hasFiles && isPastEvent ? `<div class="mt-3">${filesButton}</div>` : ""}
                         </div>
-                        ${
-                            isAttended
-                                ? `
-                            <div class="badge badge-success gap-1">
-                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
-                                    <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
-                                </svg>
-                                Attended
-                            </div>
-                        `
-                                : ""
-                        }
                     </div>
                 </div>
             </div>
@@ -427,14 +428,12 @@
                 }
             });
 
-            // Sort upcoming events by start date and limit to 2
-            const nextTwoEvents = upcomingEvents
-                .sort(
-                    (a, b) =>
-                        new Date(a.start_date).getTime() -
-                        new Date(b.start_date).getTime()
-                )
-                .slice(0, 2);
+            // Sort upcoming events by start date
+            const sortedUpcomingEvents = upcomingEvents.sort(
+                (a, b) =>
+                    new Date(a.start_date).getTime() -
+                    new Date(b.start_date).getTime()
+            );
 
             // Sort past events by date descending (most recent first)
             const sortedPastEvents = pastEvents.sort(
@@ -443,50 +442,34 @@
                     new Date(a.end_date).getTime()
             );
 
-            // Function to render section
-            function renderSection(
-                title: string,
-                events: Event[],
-                showDivider: boolean = true
-            ): string {
-                if (events.length === 0) return "";
-                return `
-                    <div class="space-y-4">
-                        <h3 class="text-lg font-medium text-base-content/70">${title}</h3>
-                        <div class="space-y-4">
-                            ${events.map((event) => renderEventCard(event, attendedEvents)).join("")}
-                        </div>
-                        ${showDivider ? '<div class="divider"></div>' : ""}
-                    </div>
-                `;
+            // Update past events count
+            if (pastEventsCount) {
+                pastEventsCount.textContent =
+                    sortedPastEvents.length.toString();
             }
 
-            // Update main events list (left column)
-            eventsList.innerHTML = `
-                ${renderSection("Upcoming Events", nextTwoEvents, nextTwoEvents.length > 0)}
-                ${renderSection("Currently Happening", currentEvents, false)}
-            `;
-
-            // Update past events list (right column)
-            pastEventsList.innerHTML =
-                sortedPastEvents.length > 0
-                    ? sortedPastEvents
-                          .map((event) =>
-                              renderEventCard(event, attendedEvents)
-                          )
-                          .join("")
-                    : `<div class="text-center py-8 opacity-70">
-                    <p>No past events found</p>
-                   </div>`;
-
-            // If no events at all
-            if (events.items.length === 0) {
-                eventsList.innerHTML = `
+            // Function to render section
+            function renderSection(events: Event[]): string {
+                if (events.length === 0) {
+                    return `
                     <div class="text-center py-8 opacity-70">
                         <p>No events found</p>
                     </div>
                 `;
+                }
+                return events
+                    .map((event) => renderEventCard(event, attendedEvents))
+                    .join("");
             }
+
+            // Update main events list (current & upcoming)
+            eventsList.innerHTML = renderSection([
+                ...currentEvents,
+                ...sortedUpcomingEvents,
+            ]);
+
+            // Update past events list
+            pastEventsList.innerHTML = renderSection(sortedPastEvents);
         } catch (err) {
             console.error("Failed to render events:", err);
             const errorMessage = `
diff --git a/src/pages/profile.astro b/src/pages/profile.astro
index 78b2745..4983c30 100644
--- a/src/pages/profile.astro
+++ b/src/pages/profile.astro
@@ -7,21 +7,219 @@ const title = "User Profile";
 ---
 
 <Layout {title}>
-    <main class="mx-auto pb-12 md:pt-[5vh] pt-[5vw] min-h-screen">
-        <h1 class="text-4xl font-bold mb-12">Profile Management</h1>
-        <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
-            <!-- Left Column - User Info -->
-            <div class="lg:col-span-2 2xl:col-span-1 h-fit">
-                <UserProfile />
+    <main class="min-h-screen bg-base-100/50">
+        <div class="container mx-auto px-4 py-8">
+            <!-- Header Section with Breadcrumbs -->
+            <div class="mb-8">
+                <div class="text-sm breadcrumbs opacity-70 mb-2">
+                    <ul>
+                        <li><a href="/">Home</a></li>
+                        <li>Profile</li>
+                    </ul>
+                </div>
+                <h1 class="text-4xl font-bold">Profile Dashboard</h1>
+                <p class="text-base-content/70 mt-2">
+                    Manage your IEEE UCSD membership and activities
+                </p>
             </div>
 
-            <!-- Right Column - Store Items -->
-            <div id="storeContent" class="lg:col-span-2 2xl:col-span-3">
-                <div id="defaultView">
-                    <DefaultProfileView />
+            <!-- Loading State -->
+            <div id="pageLoadingState" class="w-full">
+                <div class="flex flex-col items-center justify-center p-8">
+                    <div class="loading loading-spinner loading-lg"></div>
+                    <p class="mt-4 text-base-content/70">
+                        Loading your profile...
+                    </p>
                 </div>
-                <div id="officerView" class="hidden">
-                    <OfficerProfileView />
+            </div>
+
+            <!-- Error State -->
+            <div id="pageErrorState" class="hidden w-full">
+                <div class="alert alert-error">
+                    <div class="flex items-center gap-2">
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            class="h-6 w-6"
+                            viewBox="0 0 20 20"
+                            fill="currentColor"
+                        >
+                            <path
+                                fill-rule="evenodd"
+                                d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
+                                clip-rule="evenodd"></path>
+                        </svg>
+                        <span
+                            >Failed to load profile data. Please try refreshing
+                            the page.</span
+                        >
+                    </div>
+                </div>
+            </div>
+
+            <!-- Main Content Grid -->
+            <div
+                id="mainContent"
+                class="hidden grid grid-cols-1 xl:grid-cols-12 gap-8"
+            >
+                <!-- Left Column - User Info -->
+                <div class="xl:col-span-4 2xl:col-span-3">
+                    <div class="sticky top-8">
+                        <UserProfile />
+                    </div>
+                </div>
+
+                <!-- Right Column - Events & Activities -->
+                <div class="xl:col-span-8 2xl:col-span-9">
+                    <!-- Quick Actions -->
+                    <div class="flex flex-wrap gap-4 mb-8">
+                        <button
+                            class="btn btn-primary gap-2"
+                            id="quickCheckInBtn"
+                        >
+                            <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                class="h-5 w-5"
+                                viewBox="0 0 20 20"
+                                fill="currentColor"
+                            >
+                                <path
+                                    d="M5 3a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2V5a2 2 0 00-2-2H5zM5 11a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2v-2a2 2 0 00-2-2H5zM11 5a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V5zM14 11a1 1 0 011 1v1h1a1 1 0 110 2h-1v1a1 1 0 11-2 0v-1h-1a1 1 0 110-2h1v-1a1 1 0 011-1z"
+                                ></path>
+                            </svg>
+                            Quick Check-in
+                        </button>
+                        <button
+                            class="btn btn-ghost gap-2"
+                            id="viewCalendarBtn"
+                        >
+                            <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                class="h-5 w-5"
+                                viewBox="0 0 20 20"
+                                fill="currentColor"
+                            >
+                                <path
+                                    fill-rule="evenodd"
+                                    d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
+                                    clip-rule="evenodd"></path>
+                            </svg>
+                            View Calendar
+                        </button>
+                        <button
+                            class="btn btn-ghost gap-2"
+                            id="uploadResumeBtn"
+                        >
+                            <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                class="h-5 w-5"
+                                viewBox="0 0 20 20"
+                                fill="currentColor"
+                            >
+                                <path
+                                    d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z"
+                                ></path>
+                            </svg>
+                            Upload Resume
+                        </button>
+                    </div>
+
+                    <!-- Stats Overview -->
+                    <div class="stats shadow w-full mb-8 bg-base-100">
+                        <div class="stat">
+                            <div class="stat-figure text-primary">
+                                <svg
+                                    xmlns="http://www.w3.org/2000/svg"
+                                    class="h-8 w-8"
+                                    viewBox="0 0 20 20"
+                                    fill="currentColor"
+                                >
+                                    <path
+                                        d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3zM6 8a2 2 0 11-4 0 2 2 0 014 0zM16 18v-3a5.972 5.972 0 00-.75-2.906A3.005 3.005 0 0119 15v3h-3zM4.75 12.094A5.973 5.973 0 004 15v3H1v-3a3 3 0 013.75-2.906z"
+                                    ></path>
+                                </svg>
+                            </div>
+                            <div class="stat-title">Events Attended</div>
+                            <div
+                                class="stat-value text-primary"
+                                id="eventsAttendedValue"
+                            >
+                                -
+                            </div>
+                            <div class="stat-desc">Since joining</div>
+                        </div>
+
+                        <div class="stat">
+                            <div class="stat-figure text-secondary">
+                                <svg
+                                    xmlns="http://www.w3.org/2000/svg"
+                                    class="h-8 w-8"
+                                    viewBox="0 0 20 20"
+                                    fill="currentColor"
+                                >
+                                    <path
+                                        fill-rule="evenodd"
+                                        d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
+                                        clip-rule="evenodd"></path>
+                                </svg>
+                            </div>
+                            <div class="stat-title">Loyalty Points</div>
+                            <div
+                                class="stat-value text-secondary"
+                                id="loyaltyPointsValue"
+                            >
+                                -
+                            </div>
+                            <div class="stat-desc" id="loyaltyPointsChange">
+                                Loading...
+                            </div>
+                        </div>
+
+                        <div class="stat">
+                            <div class="stat-figure text-accent">
+                                <svg
+                                    xmlns="http://www.w3.org/2000/svg"
+                                    class="h-8 w-8"
+                                    viewBox="0 0 20 20"
+                                    fill="currentColor"
+                                >
+                                    <path
+                                        fill-rule="evenodd"
+                                        d="M5 3a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V5a2 2 0 00-2-2H5zm9 4a1 1 0 10-2 0v6a1 1 0 102 0V7zm-3 2a1 1 0 10-2 0v4a1 1 0 102 0V9zm-3 3a1 1 0 10-2 0v1a1 1 0 102 0v-1z"
+                                        clip-rule="evenodd"></path>
+                                </svg>
+                            </div>
+                            <div class="stat-title">Activity Level</div>
+                            <div
+                                class="stat-value text-accent"
+                                id="activityLevelValue"
+                            >
+                                -
+                            </div>
+                            <div class="stat-desc" id="activityLevelDesc">
+                                Loading...
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Main Content Tabs -->
+                    <div class="tabs tabs-boxed mb-6">
+                        <button class="tab tab-active" data-tab="events"
+                            >Events & Activities</button
+                        >
+                        <button class="tab" data-tab="settings">Settings</button
+                        >
+                        <button class="tab" data-tab="officer" id="officerTab"
+                            >Officer Panel</button
+                        >
+                    </div>
+
+                    <!-- Content Areas -->
+                    <div id="defaultView">
+                        <DefaultProfileView />
+                    </div>
+                    <div id="officerView" class="hidden">
+                        <OfficerProfileView />
+                    </div>
                 </div>
             </div>
         </div>
@@ -30,21 +228,171 @@ const title = "User Profile";
 
 <script>
     import { StoreAuth } from "../components/auth/StoreAuth";
-    new StoreAuth();
+    const auth = new StoreAuth();
 
-    // Handle view toggling
-    const officerViewToggle = document.getElementById("officerViewToggle");
-    const officerViewCheckbox = officerViewToggle?.querySelector(
-        'input[type="checkbox"]'
-    );
+    // Initialize page state
+    const pageLoadingState = document.getElementById("pageLoadingState");
+    const pageErrorState = document.getElementById("pageErrorState");
+    const mainContent = document.getElementById("mainContent");
+    const tabs = document.querySelectorAll(".tab");
     const defaultView = document.getElementById("defaultView");
     const officerView = document.getElementById("officerView");
+    const officerTab = document.getElementById("officerTab");
 
-    if (officerViewCheckbox && defaultView && officerView) {
-        officerViewCheckbox.addEventListener("change", (e) => {
-            const isChecked = (e.target as HTMLInputElement).checked;
-            defaultView.style.display = isChecked ? "none" : "block";
-            officerView.style.display = isChecked ? "block" : "none";
+    // Stats elements
+    const eventsAttendedValue = document.getElementById("eventsAttendedValue");
+    const loyaltyPointsValue = document.getElementById("loyaltyPointsValue");
+    const loyaltyPointsChange = document.getElementById("loyaltyPointsChange");
+    const activityLevelValue = document.getElementById("activityLevelValue");
+    const activityLevelDesc = document.getElementById("activityLevelDesc");
+
+    // Quick action buttons
+    const quickCheckInBtn = document.getElementById("quickCheckInBtn");
+    const viewCalendarBtn = document.getElementById("viewCalendarBtn");
+    const uploadResumeBtn = document.getElementById("uploadResumeBtn");
+
+    // Hide officer tab by default
+    if (officerTab) {
+        officerTab.style.display = "none";
+    }
+
+    // Show officer tab if user is an officer
+    const showOfficerTab = () => {
+        if (officerTab) {
+            const authState = auth.getAuthState();
+            const isOfficer =
+                authState.model?.member_type === "officer" ||
+                authState.model?.member_type === "administrator";
+            officerTab.style.display = isOfficer ? "inline-flex" : "none";
+        }
+    };
+
+    // Initialize page
+    const initializePage = async () => {
+        try {
+            // Show loading state
+            if (pageLoadingState) pageLoadingState.classList.remove("hidden");
+            if (pageErrorState) pageErrorState.classList.add("hidden");
+            if (mainContent) mainContent.classList.add("hidden");
+
+            // Check auth state
+            const authState = auth.getAuthState();
+            if (!authState.isValid || !authState.model) {
+                throw new Error("User not authenticated");
+            }
+
+            const user = authState.model;
+
+            // Update stats
+            if (eventsAttendedValue) {
+                const eventsAttended = user.events_attended?.length || 0;
+                eventsAttendedValue.textContent = eventsAttended.toString();
+            }
+
+            if (loyaltyPointsValue && loyaltyPointsChange) {
+                const points = user.points || 0;
+                loyaltyPointsValue.textContent = points.toString();
+                // Calculate points change (example logic)
+                const pointsChange = 10; // Replace with actual calculation
+                loyaltyPointsChange.textContent =
+                    pointsChange > 0
+                        ? `↗︎ ${pointsChange} points (30 days)`
+                        : `↘︎ ${Math.abs(pointsChange)} points (30 days)`;
+            }
+
+            if (activityLevelValue && activityLevelDesc) {
+                // Calculate activity level based on events and points
+                const eventsAttended = user.events_attended?.length || 0;
+                const points = user.points || 0;
+                let activityLevel = "Low";
+                let description = "Occasional Member";
+
+                if (eventsAttended > 5 || points > 50) {
+                    activityLevel = "High";
+                    description = "Active Member";
+                } else if (eventsAttended > 2 || points > 20) {
+                    activityLevel = "Medium";
+                    description = "Regular Member";
+                }
+
+                activityLevelValue.textContent = activityLevel;
+                activityLevelDesc.textContent = description;
+            }
+
+            // Show officer tab if applicable
+            showOfficerTab();
+
+            // Hide loading state and show content
+            if (pageLoadingState) pageLoadingState.classList.add("hidden");
+            if (mainContent) mainContent.classList.remove("hidden");
+        } catch (error) {
+            console.error("Failed to initialize page:", error);
+            if (pageLoadingState) pageLoadingState.classList.add("hidden");
+            if (pageErrorState) pageErrorState.classList.remove("hidden");
+            if (mainContent) mainContent.classList.add("hidden");
+        }
+    };
+
+    // Check on load and auth changes
+    initializePage();
+    window.addEventListener("storage", (e) => {
+        if (e.key === "pocketbase_auth") {
+            initializePage();
+        }
+    });
+
+    // Handle tab switching
+    tabs.forEach((tab) => {
+        tab.addEventListener("click", () => {
+            // Update tab styles
+            tabs.forEach((t) => t.classList.remove("tab-active"));
+            tab.classList.add("tab-active");
+
+            // Update content visibility
+            const tabId = (tab as HTMLElement).dataset.tab;
+            if (tabId === "events") {
+                defaultView!.style.display = "block";
+                officerView!.style.display = "none";
+            } else if (tabId === "officer") {
+                defaultView!.style.display = "none";
+                officerView!.style.display = "block";
+            }
+        });
+    });
+
+    // Quick action button handlers
+    if (quickCheckInBtn) {
+        quickCheckInBtn.addEventListener("click", () => {
+            const eventCheckInInput = document.getElementById(
+                "eventCheckInInput"
+            ) as HTMLInputElement;
+            if (eventCheckInInput) {
+                eventCheckInInput.focus();
+            }
+        });
+    }
+
+    if (viewCalendarBtn) {
+        viewCalendarBtn.addEventListener("click", () => {
+            // Implement calendar view logic
+            console.log("Calendar view not implemented yet");
+        });
+    }
+
+    if (uploadResumeBtn) {
+        uploadResumeBtn.addEventListener("click", () => {
+            const resumeUpload = document.getElementById(
+                "resumeUpload"
+            ) as HTMLInputElement;
+            if (resumeUpload) {
+                resumeUpload.click();
+            }
         });
     }
 </script>
+
+<style>
+    .hidden {
+        display: none !important;
+    }
+</style>