diff --git a/api-service/api/openapi.yaml b/api-service/api/openapi.yaml
index 7d57f66..791fa6b 100644
--- a/api-service/api/openapi.yaml
+++ b/api-service/api/openapi.yaml
@@ -581,7 +581,6 @@ components:
       properties:
         userId:
           type: string
-          format: ObjectId
           readOnly: true
           description: Internal user ID
         auth0Id:
@@ -722,11 +721,17 @@ components:
     UserUpdate:
       type: object
       properties:
+        username:
+          type: string
+          description: User's unique username
+        phone:
+          type: string
+          description: User's phone number (E.164 format recommended)
         preferences:
           type: array
+          description: User interest preferences with taxonomy categorization
           items:
             $ref: "#/components/schemas/PreferenceItem"
-          description: User interest preferences with taxonomy categorization
         privacySettings:
           type: object
           properties:
@@ -738,10 +743,12 @@ components:
               type: array
               items:
                 type: string
+                description: List of store IDs the user has opted into sharing data with
             optOutStores:
               type: array
               items:
                 type: string
+                description: List of store IDs the user has opted out of sharing data with
         dataAccess:
           type: object
           properties:
@@ -749,6 +756,7 @@ components:
               type: array
               items:
                 type: string
+                description: List of domains allowed to access user data via API keys
 
     ApiKey:
       type: object
@@ -900,7 +908,6 @@ components:
       properties:
         userId:
           type: string
-          format: ObjectId
           description: Internal user ID
         preferences:
           type: array
diff --git a/api-service/service/AuthenticationService.js b/api-service/service/AuthenticationService.js
index 8ad633f..94e5e36 100644
--- a/api-service/service/AuthenticationService.js
+++ b/api-service/service/AuthenticationService.js
@@ -89,7 +89,7 @@ exports.registerUser = async function (req, body) {
     // Create user in database
     const user = {
       auth0Id: userData.sub,
-      username: userData.nickname,
+      username: userData.username,
       email: userData.email,
       phone: userData.phone_number || null,
       preferences: preferences || [],
diff --git a/api-service/service/StoreProfileService.js b/api-service/service/StoreProfileService.js
index 8291cca..f9a4e8f 100644
--- a/api-service/service/StoreProfileService.js
+++ b/api-service/service/StoreProfileService.js
@@ -1,10 +1,9 @@
-const axios = require('axios');
 const { getDB } = require('../utils/mongoUtil');
 const { setCache, getCache, invalidateCache } = require('../utils/redisUtil');
 const { respondWithCode } = require('../utils/writer');
 const { getUserData } = require('../utils/authUtil');
 const { CACHE_TTL, CACHE_KEYS } = require('../utils/cacheConfig');
-const { getManagementToken } = require('../utils/auth0Util');
+const { deleteAuth0User } = require('../utils/auth0Util');
 
 /**
  * Get Store Profile
@@ -107,17 +106,8 @@ exports.deleteStoreProfile = async function (req) {
       });
     }
 
-    // Delete from Auth0
-    try {
-      const managementToken = await getManagementToken();
-      await axios.delete(`${process.env.AUTH0_ISSUER_BASE_URL}/api/v2/users/${userData.sub}`, {
-        headers: {
-          Authorization: `Bearer ${managementToken}`,
-        },
-      });
-    } catch (error) {
-      console.error('Auth0 deletion failed:', error);
-    }
+    // Delete from Auth0 using the utility function
+    await deleteAuth0User(userData.sub); // Call the new function
 
     // Clear cache using standardized key
     await invalidateCache(`${CACHE_KEYS.STORE_DATA}${userData.sub}`);
diff --git a/api-service/service/UserProfileService.js b/api-service/service/UserProfileService.js
index 45e96d0..100219a 100644
--- a/api-service/service/UserProfileService.js
+++ b/api-service/service/UserProfileService.js
@@ -3,9 +3,8 @@ const { setCache, getCache, invalidateCache } = require('../utils/redisUtil');
 const { respondWithCode } = require('../utils/writer');
 const { getUserData } = require('../utils/authUtil');
 const { CACHE_TTL, CACHE_KEYS } = require('../utils/cacheConfig');
-const { getManagementToken } = require('../utils/auth0Util');
-const AIService = require('../clients/AIService');
-const axios = require('axios'); // Added missing import
+// Import the new function
+const { updateUserMetadata, updateUserPhone, updateAuth0Username, deleteAuth0User } = require('../utils/auth0Util');
 
 /**
  * Get User Profile
@@ -56,106 +55,108 @@ exports.getUserProfile = async function (req) {
 exports.updateUserProfile = async function (req, body) {
   try {
     const db = getDB();
-
-    // Get user data - use req.user if available (from middleware) or fetch it
     const userData = req.user || (await getUserData(req.headers.authorization?.split(' ')[1]));
+    const auth0UserId = userData.sub;
 
-    // If username is being updated, check for uniqueness
+    // --- Local DB Username Uniqueness Check ---
+    // Keep this check for your application's internal username uniqueness
     if (body.username) {
       const existingUser = await db.collection('users').findOne({
         username: body.username,
-        auth0Id: { $ne: userData.sub },
+        auth0Id: { $ne: auth0UserId },
       });
-
       if (existingUser) {
-        return respondWithCode(409, {
-          code: 409,
-          message: 'Username already taken',
-        });
+        return respondWithCode(409, { code: 409, message: 'Username already taken in application' });
       }
     }
 
-    // Preferences are managed separately, remove if present in body
-    // We still might need to call AI service if preferences *were* sent,
-    // but we won't save them directly here.
-    let preferencesToProcess = null;
-    if (body.preferences) {
-      preferencesToProcess = body.preferences;
-      delete body.preferences; // Remove from direct update data
+    // --- Auth0 Username Update ---
+    // Attempt to update the Auth0 username if provided in the body.
+    // Auth0 will enforce its own uniqueness rules per connection.
+    if (body.username) {
+      try {
+        await updateAuth0Username(auth0UserId, body.username);
+        // Optionally: Update nickname in metadata as well if desired
+        // await updateUserMetadata(auth0UserId, { nickname: body.username });
+      } catch (auth0Error) {
+        // If Auth0 update fails (e.g., username exists in Auth0 connection), return an error
+        // You might want to check the specific error type from auth0Error
+        console.error(`Auth0 username update failed for ${auth0UserId}:`, auth0Error);
+        return respondWithCode(409, { // Use 409 Conflict or appropriate code
+          code: 409,
+          message: 'Failed to update username with identity provider. It might already be taken.',
+          // Optionally include details: details: auth0Error.message
+        });
+      }
     }
 
-    // If preferences were provided, send to FastAPI for processing
-    if (preferencesToProcess) {
+    // --- Phone Number Update in Auth0 ---
+    if (body.phone && body.phone !== userData.phone_number) {
       try {
-        // Find user email if not readily available (needed for AI service)
-        const currentUser = await db.collection('users').findOne({ auth0Id: userData.sub }, { projection: { email: 1 } });
-        if (currentUser?.email) {
-          await AIService.updateUserPreferences(
-            userData.sub,
-            currentUser.email, // Use fetched email
-            preferencesToProcess
-          );
-          // Invalidate preferences cache as AI service might have updated them
-          await invalidateCache(`${CACHE_KEYS.PREFERENCES}${userData.sub}`);
-        } else {
-           console.error('Could not find user email to process preferences via AI service.');
-        }
-
-      } catch (error) {
-        console.error('Failed to process preferences through AI service:', error);
-        // Decide if failure here should prevent profile update or just log
+        await updateUserPhone(auth0UserId, body.phone);
+      } catch (auth0Error) {
+        // Log and continue, or return error as needed
+        console.error(`Auth0 phone update failed for ${auth0UserId}:`, auth0Error);
+        // return respondWithCode(500, { code: 500, message: 'Failed to update phone number with identity provider.' });
       }
     }
 
-    // Update user
+    // --- Database Update ---
     const updateData = {
       updatedAt: new Date(),
-      ...body, // Apply other updates from body (excluding preferences)
     };
+    // Update local DB username only if Auth0 update was successful (or not attempted)
+    if (body.username !== undefined) updateData.username = body.username;
+    if (body.phone !== undefined) updateData.phone = body.phone;
+
+    // Only update allowed privacy settings
+    if (body.privacySettings !== undefined) {
+      updateData.privacySettings = {};
+      if (body.privacySettings.dataSharingConsent !== undefined) {
+        updateData.privacySettings.dataSharingConsent = body.privacySettings.dataSharingConsent;
+      }
+      if (body.privacySettings.anonymizeData !== undefined) {
+        updateData.privacySettings.anonymizeData = body.privacySettings.anonymizeData;
+      }
+      // DO NOT update optInStores or optOutStores here
+    }
 
-    // Ensure only allowed fields are set explicitly if needed, or rely on body structure
-    // Example:
-    // if (body.username !== undefined) updateData.username = body.username;
-    // if (body.phone !== undefined) updateData.phone = body.phone;
-    // if (body.privacySettings !== undefined) updateData.privacySettings = body.privacySettings;
-    // if (body.dataAccess !== undefined) updateData.dataAccess = body.dataAccess;
-
+    if (body.dataAccess !== undefined) updateData.dataAccess = body.dataAccess;
 
     const result = await db
       .collection('users')
       .findOneAndUpdate(
-        { auth0Id: userData.sub },
+        { auth0Id: auth0UserId },
         { $set: updateData },
-        { returnDocument: 'after', projection: { preferences: 0 } }, // Exclude preferences from returned doc
+        { returnDocument: 'after', projection: { preferences: 0 } },
       );
 
     if (!result) {
-      return respondWithCode(404, {
-        code: 404,
-        message: 'User not found',
-      });
+      // This case might occur if the user was deleted between checks
+      return respondWithCode(404, { code: 404, message: 'User not found during final update' });
     }
 
-    // Invalidate user data cache
-    const cacheKey = `${CACHE_KEYS.USER_DATA}${userData.sub}`;
+    // --- Cache Invalidation & Update ---
+    const cacheKey = `${CACHE_KEYS.USER_DATA}${auth0UserId}`;
     await invalidateCache(cacheKey);
 
-    // If privacy settings change, it might affect store data access, invalidate those too:
+    // Invalidate store preferences if privacy settings changed
     if (updateData.privacySettings && result.privacySettings?.optInStores) {
-       // Invalidate store-specific preference caches for opted-in stores
-       const userObjectId = result._id; // Get the actual ObjectId
+       const userObjectId = result._id;
        for (const storeId of result.privacySettings.optInStores) {
          await invalidateCache(`${CACHE_KEYS.STORE_PREFERENCES}${userObjectId}:${storeId}`);
        }
     }
 
-
     // Update cache with the new data (without preferences)
+    // Note: This happens *after* invalidation, ensuring fresh data is set if needed immediately
     await setCache(cacheKey, JSON.stringify(result), { EX: CACHE_TTL.USER_DATA });
-    return respondWithCode(200, result); // result already excludes preferences
+
+    return respondWithCode(200, result);
   } catch (error) {
+    // Catch errors not handled specifically above
     console.error('Update profile failed:', error);
-    return respondWithCode(500, { code: 500, message: 'Internal server error' });
+    return respondWithCode(500, { code: 500, message: 'Internal server error during profile update' });
   }
 };
 
@@ -192,18 +193,8 @@ exports.deleteUserProfile = async function (req) {
       });
     }
 
-    // Delete from Auth0
-    try {
-      const managementToken = await getManagementToken();
-      await axios.delete(`${process.env.AUTH0_ISSUER_BASE_URL}/api/v2/users/${userData.sub}`, {
-        headers: {
-          Authorization: `Bearer ${managementToken}`,
-        },
-      });
-    } catch (error) {
-      // Log error but don't fail the request if Auth0 deletion fails
-      console.error('Auth0 deletion failed:', error.response?.data || error.message);
-    }
+    // Delete from Auth0 using the utility function
+    await deleteAuth0User(userData.sub); // Call the new function
 
     // Clear user-specific caches
     await invalidateCache(`${CACHE_KEYS.USER_DATA}${userData.sub}`);
diff --git a/api-service/utils/auth0Util.js b/api-service/utils/auth0Util.js
index ddad5c8..593b90b 100644
--- a/api-service/utils/auth0Util.js
+++ b/api-service/utils/auth0Util.js
@@ -153,6 +153,42 @@ async function updateUserMetadata(userId, metadata, invalidateUserCache = false)
   }
 }
 
+/**
+ * Update Auth0 user phone number
+ * @param {string} userId - Auth0 user ID
+ * @param {string} phone - New phone number
+ * @returns {Promise<Object>} - Updated user data from Auth0
+ */
+async function updateUserPhone(userId, phone) {
+  try {
+    const token = await getManagementToken();
+
+    const phoneUpdate = {
+      phone_number: phone,
+      // Consider if phone_verified should be reset here
+      phone_verified: false,
+    };
+
+    // Update user phone number in Auth0
+    const response = await axios.patch(
+      `${process.env.AUTH0_ISSUER_BASE_URL}/api/v2/users/${userId}`,
+      phoneUpdate,
+      {
+        headers: {
+          Authorization: `Bearer ${token}`,
+          'Content-Type': 'application/json',
+        },
+      }
+    );
+
+    return response.data;
+  } catch (error) {
+    console.error(`Failed to update Auth0 phone number for ${userId}:`, error?.response?.data || error.message);
+    // Re-throw the error so the calling service can decide how to handle it
+    throw error;
+  }
+}
+
 /**
  * Get Auth0 user metadata
  * @param {string} userId - Auth0 user ID
@@ -180,10 +216,78 @@ async function getUserMetadata(userId) {
   }
 }
 
+/**
+ * Update Auth0 user's root username attribute (for database connections)
+ * @param {string} userId - Auth0 user ID
+ * @param {string} newUsername - The new username
+ * @returns {Promise<Object>} - Updated user data from Auth0
+ */
+async function updateAuth0Username(userId, newUsername) {
+  try {
+    const token = await getManagementToken();
+
+    const usernameUpdate = {
+      username: newUsername,
+      // Note: You might need to consider connection-specific rules here.
+      // For Auth0 database connections, 'username' is the field.
+    };
+
+    // Update username using the Management API
+    const response = await axios.patch(
+      `${process.env.AUTH0_ISSUER_BASE_URL}/api/v2/users/${userId}`,
+      usernameUpdate,
+      {
+        headers: {
+          Authorization: `Bearer ${token}`,
+          'Content-Type': 'application/json',
+        },
+      }
+    );
+
+    console.log(`Successfully updated Auth0 username for ${userId}.`);
+    return response.data;
+  } catch (error) {
+    // Log the specific error (e.g., username already exists)
+    console.error(`Failed to update Auth0 username for ${userId}:`, error?.response?.data || error.message);
+    // Re-throw the error so the calling service knows the update failed
+    throw error;
+  }
+}
+
+/**
+ * Delete a user from Auth0
+ * @param {string} userId - Auth0 user ID
+ * @returns {Promise<void>}
+ */
+async function deleteAuth0User(userId) {
+  try {
+    const token = await getManagementToken();
+
+    // Delete user from Auth0
+    await axios.delete(
+      `${process.env.AUTH0_ISSUER_BASE_URL}/api/v2/users/${userId}`,
+      {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      }
+    );
+    console.log(`Successfully deleted user ${userId} from Auth0.`);
+  } catch (error) {
+    // Log error but don't throw, allowing the calling service to continue if needed
+    console.error(`Auth0 deletion failed for user ${userId}:`, error?.response?.data || error.message);
+    // If you want the deletion failure to stop the process in the service, re-throw the error:
+    // throw error;
+  }
+}
+
 module.exports = { 
   getManagementToken, 
   assignUserRole, 
   linkAccounts,
   updateUserMetadata,
-  getUserMetadata
+  updateUserPhone,
+  getUserMetadata,
+  updateAuth0Username, // <-- Export the new function
+  deleteAuth0User,
 };
diff --git a/web/package-lock.json b/web/package-lock.json
index d3e7d50..d16e59f 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -15,6 +15,7 @@
         "flowbite-react": "^0.11.4",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
+        "react-hook-form": "^7.56.0",
         "react-icons": "^5.5.0",
         "react-router": "^7.4.0"
       },
@@ -4811,6 +4812,22 @@
         "react": "^19.1.0"
       }
     },
+    "node_modules/react-hook-form": {
+      "version": "7.56.0",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.56.0.tgz",
+      "integrity": "sha512-U2QQgx5z2Y8Z0qlXv3W19hWHJgfKdWMz0O/osuY+o+CYq568V2R/JhzC6OAXfR8k24rIN0Muan2Qliaq9eKs/g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-hook-form"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18 || ^19"
+      }
+    },
     "node_modules/react-icons": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",
diff --git a/web/package.json b/web/package.json
index 0e19a85..78dfae6 100644
--- a/web/package.json
+++ b/web/package.json
@@ -20,6 +20,7 @@
     "flowbite-react": "^0.11.4",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-hook-form": "^7.56.0",
     "react-icons": "^5.5.0",
     "react-router": "^7.4.0"
   },
diff --git a/web/src/api/types/data-contracts.ts b/web/src/api/types/data-contracts.ts
index 8082911..074fe75 100644
--- a/web/src/api/types/data-contracts.ts
+++ b/web/src/api/types/data-contracts.ts
@@ -14,10 +14,7 @@
 export type AttributeDistribution = Record<string, number>;
 
 export interface User {
-  /**
-   * Internal user ID
-   * @format ObjectId
-   */
+  /** Internal user ID */
   userId?: string;
   /** Auth0 user ID */
   auth0Id: string;
@@ -87,6 +84,10 @@ export interface StoreCreate {
 }
 
 export interface UserUpdate {
+  /** User's unique username */
+  username?: string;
+  /** User's phone number (E.164 format recommended) */
+  phone?: string;
   /** User interest preferences with taxonomy categorization */
   preferences?: PreferenceItem[];
   privacySettings?: {
@@ -176,10 +177,7 @@ export interface SearchEntry {
 }
 
 export interface UserPreferences {
-  /**
-   * Internal user ID
-   * @format ObjectId
-   */
+  /** Internal user ID */
   userId?: string;
   preferences?: PreferenceItem[];
   /** @format date-time */
diff --git a/web/src/components/auth/RegistrationCompletionModal.tsx b/web/src/components/auth/RegistrationCompletionModal.tsx
index 64867c0..dfc552d 100644
--- a/web/src/components/auth/RegistrationCompletionModal.tsx
+++ b/web/src/components/auth/RegistrationCompletionModal.tsx
@@ -64,7 +64,7 @@ export function RegistrationCompletionModal() {
   };
 
   return (
-    <Modal show={true} size="md" popup dismissible={false}>
+    <Modal show={true} size="lg" popup dismissible={false}>
       <ModalHeader />
       <ModalBody>
         <RegistrationProgress step={step} totalSteps={totalSteps} />
diff --git a/web/src/components/auth/RegistrationProgress.tsx b/web/src/components/auth/RegistrationProgress.tsx
index 7adad3f..662e100 100644
--- a/web/src/components/auth/RegistrationProgress.tsx
+++ b/web/src/components/auth/RegistrationProgress.tsx
@@ -13,12 +13,10 @@ export function RegistrationProgress({
 
   return (
     <div className="mb-6">
-      {/* Add dark mode text color */}
       <div className="mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">
         Step {step} of {totalSteps}
       </div>
-      {/* Flowbite Progress handles its own dark mode */}
-      <Progress progress={progress} size="lg" labelProgress />
+      <Progress progress={progress} size="lg" />
     </div>
   );
 }
diff --git a/web/src/components/auth/RegistrationTypeSelector.tsx b/web/src/components/auth/RegistrationTypeSelector.tsx
index 14429dd..e1e402d 100644
--- a/web/src/components/auth/RegistrationTypeSelector.tsx
+++ b/web/src/components/auth/RegistrationTypeSelector.tsx
@@ -31,35 +31,42 @@ export function RegistrationTypeSelector({
       </h3>
 
       <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
-        {/* Flowbite Card handles dark mode background/border */}
+        {/* User Card */}
         <Card
           className={`cursor-pointer transition-all duration-200 ease-in-out hover:bg-gray-50 dark:hover:bg-gray-700 ${selectedType === "user" ? "ring-2 ring-blue-500 dark:ring-blue-400" : "ring-1 ring-gray-200 dark:ring-gray-700"}`}
           onClick={() => handleTypeSelect("user")}
         >
-          <div className="flex flex-col items-center p-4">
+          {/* Add min-h-* to ensure consistent height */}
+          <div className="flex min-h-[180px] flex-col items-center p-4">
+            {" "}
+            {/* Adjust min-h value as needed */}
             <FaUser className="mb-3 h-12 w-12 text-blue-600 dark:text-blue-500" />
-            {/* Add dark mode text color */}
-            <h5 className="mb-1 text-lg font-bold text-gray-900 dark:text-white">
+            <h5 className="mb-1 text-center text-lg font-bold text-gray-900 dark:text-white">
+              {" "}
+              {/* Ensure text-center */}
               Individual User
             </h5>
-            {/* Add dark mode text color */}
             <p className="text-center text-sm text-gray-500 dark:text-gray-400">
               Get personalized recommendations while browsing stores
             </p>
           </div>
         </Card>
 
+        {/* Store Card */}
         <Card
           className={`cursor-pointer transition-all duration-200 ease-in-out hover:bg-gray-50 dark:hover:bg-gray-700 ${selectedType === "store" ? "ring-2 ring-blue-500 dark:ring-blue-400" : "ring-1 ring-gray-200 dark:ring-gray-700"}`}
           onClick={() => handleTypeSelect("store")}
         >
-          <div className="flex flex-col items-center p-4">
+          {/* Add min-h-* to ensure consistent height */}
+          <div className="flex min-h-[180px] flex-col items-center p-4">
+            {" "}
+            {/* Adjust min-h value as needed */}
             <FaStore className="mb-3 h-12 w-12 text-blue-600 dark:text-blue-500" />
-            {/* Add dark mode text color */}
-            <h5 className="mb-1 text-lg font-bold text-gray-900 dark:text-white">
+            <h5 className="mb-1 text-center text-lg font-bold text-gray-900 dark:text-white">
+              {" "}
+              {/* Ensure text-center */}
               Store Owner
             </h5>
-            {/* Add dark mode text color */}
             <p className="text-center text-sm text-gray-500 dark:text-gray-400">
               Integrate with our API to provide targeted recommendations
             </p>
diff --git a/web/src/components/auth/StoreRegistrationForm.tsx b/web/src/components/auth/StoreRegistrationForm.tsx
index 3b2b396..0ce97db 100644
--- a/web/src/components/auth/StoreRegistrationForm.tsx
+++ b/web/src/components/auth/StoreRegistrationForm.tsx
@@ -1,5 +1,5 @@
-import { useState } from "react";
-import { Button, Label, TextInput } from "flowbite-react";
+import { useForm, SubmitHandler } from "react-hook-form"; // Import useForm and SubmitHandler
+import { Button, FloatingLabel, HelperText } from "flowbite-react";
 import { StoreCreate } from "../../api/types/data-contracts";
 import LoadingSpinner from "../common/LoadingSpinner";
 
@@ -8,77 +8,102 @@ interface StoreRegistrationFormProps {
   isLoading: boolean;
 }
 
+// Define form data type
+type StoreRegistrationFormData = {
+  name: string;
+  address?: string; // Address is optional based on current setup
+};
+
 export function StoreRegistrationForm({
   onSubmit,
   isLoading,
 }: StoreRegistrationFormProps) {
-  const [name, setName] = useState("");
-  const [address, setAddress] = useState("");
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
+  // Initialize react-hook-form
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<StoreRegistrationFormData>();
 
+  // Use the handleSubmit from react-hook-form
+  const handleFormSubmit: SubmitHandler<StoreRegistrationFormData> = (data) => {
     const storeData: StoreCreate = {
-      name,
-      address,
-      webhooks: [], // We can leave this empty for now
+      name: data.name,
+      address: data.address || "", // Ensure address is string or empty string
+      webhooks: [],
     };
-
     onSubmit(storeData);
   };
 
   return (
-    <form className="space-y-6" onSubmit={handleSubmit}>
-      {/* Add dark mode text color */}
+    // Use the handleSubmit from react-hook-form
+    <form className="space-y-6" onSubmit={handleSubmit(handleFormSubmit)}>
       <h3 className="text-center text-xl font-medium text-gray-900 dark:text-white">
         Complete Store Registration
       </h3>
 
-      <div>
-        <div className="mb-2 block">
-          {/* Add dark mode text color */}
-          <Label
-            htmlFor="store-name"
-            className="text-gray-700 dark:text-gray-300"
-          >
-            Store Name
-          </Label>
-        </div>
-        {/* Flowbite TextInput handles dark mode */}
-        <TextInput
+      {/* Store Name with FloatingLabel and Icon */}
+      <div className="relative">
+        <FloatingLabel
+          variant="outlined"
           id="store-name"
-          value={name}
-          onChange={(e) => setName(e.target.value)}
-          placeholder="Enter your store name"
-          required
+          label="Store Name"
+          color={errors.name ? "error" : "default"} // Use errors object
+          // Register the input with validation
+          {...register("name", {
+            required: "Store name is required",
+            minLength: {
+              value: 2,
+              message: "Name must be at least 2 characters",
+            },
+            maxLength: {
+              value: 100,
+              message: "Name cannot exceed 100 characters",
+            },
+          })}
+          required // Keep HTML required for accessibility/native behavior
         />
+        {/* Display validation error */}
+        {errors.name && (
+          <HelperText color="failure" className="mt-1">
+            {errors.name.message}
+          </HelperText>
+        )}
       </div>
 
-      <div>
-        <div className="mb-2 block">
-          {/* Add dark mode text color */}
-          <Label
-            htmlFor="store-address"
-            className="text-gray-700 dark:text-gray-300"
-          >
-            Store Address
-          </Label>
-        </div>
-        {/* Flowbite TextInput handles dark mode */}
-        <TextInput
+      {/* Store Address with FloatingLabel and Icon */}
+      <div className="relative">
+        <FloatingLabel
+          variant="outlined"
           id="store-address"
-          value={address}
-          onChange={(e) => setAddress(e.target.value)}
-          placeholder="Enter your store address"
-          required
+          label="Store Address"
+          color={errors.address ? "error" : "default"} // Use errors object
+          // Register the input (optional validation)
+          {...register("address", {
+            maxLength: {
+              value: 200,
+              message: "Address cannot exceed 200 characters",
+            },
+          })}
         />
+        {/* Display validation error */}
+        {errors.address && (
+          <HelperText color="failure" className="mt-1">
+            {errors.address.message}
+          </HelperText>
+        )}
+        {!errors.address && ( // Show helper text only if no error
+          <HelperText color="gray" className="mt-1">
+            Optional: Provide a physical or primary business address.
+          </HelperText>
+        )}
       </div>
 
       <div className="flex justify-center pt-2">
         {isLoading ? (
           <LoadingSpinner size="md" className="py-2" />
         ) : (
-          // Flowbite Button handles dark mode
+          // No need to manually disable based on name state anymore
           <Button type="submit" disabled={isLoading} size="lg">
             Complete Registration
           </Button>
diff --git a/web/src/components/auth/UserRegistrationForm.tsx b/web/src/components/auth/UserRegistrationForm.tsx
index 05f5005..09e8913 100644
--- a/web/src/components/auth/UserRegistrationForm.tsx
+++ b/web/src/components/auth/UserRegistrationForm.tsx
@@ -1,7 +1,17 @@
 import { useState } from "react";
-import { Button, Checkbox, Label } from "flowbite-react";
+import {
+  Button,
+  Checkbox,
+  Label,
+  Modal, // Import Modal components
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+  Popover, // <-- Import Popover
+} from "flowbite-react";
 import { UserCreate } from "../../api/types/data-contracts";
 import LoadingSpinner from "../common/LoadingSpinner";
+import { HiCheckCircle, HiInformationCircle } from "react-icons/hi"; // Import icons
 
 interface UserRegistrationFormProps {
   onSubmit: (userData: UserCreate) => void;
@@ -12,53 +22,193 @@ export function UserRegistrationForm({
   onSubmit,
   isLoading,
 }: UserRegistrationFormProps) {
+  // State for the main consent checkbox
   const [dataSharingConsent, setDataSharingConsent] = useState(false);
+  // State for the GDPR consent modal
+  const [showConsentModal, setShowConsentModal] = useState(false);
+  // State to track if consent has been explicitly accepted via the modal
+  const [consentAccepted, setConsentAccepted] = useState(false);
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
+    // Ensure consent was actually accepted via the modal flow if required
+    if (!consentAccepted) {
+      // Optionally show an error or prompt to review consent
+      console.warn("Consent not explicitly accepted via modal.");
+      // Depending on strictness, you might prevent submission:
+      // return;
+    }
 
     const userData: UserCreate = {
-      dataSharingConsent,
+      // Use the state variable linked to the checkbox
+      dataSharingConsent: dataSharingConsent,
       preferences: [], // We can leave this empty for now
     };
 
     onSubmit(userData);
   };
 
+  const handleAcceptConsent = () => {
+    setDataSharingConsent(true);
+    setConsentAccepted(true); // Mark as accepted
+    setShowConsentModal(false);
+  };
+
+  const handleDeclineConsent = () => {
+    setDataSharingConsent(false);
+    setConsentAccepted(false); // Mark as not accepted (or reset)
+    setShowConsentModal(false);
+  };
+
+  // Content for the popover
+  const popoverContent = (
+    <div className="w-64 p-3 text-sm text-gray-500 dark:text-gray-400">
+      <p>
+        Please click 'Review Data Sharing Consent Details' first to read and
+        accept the terms.
+      </p>
+    </div>
+  );
+
   return (
-    <form className="space-y-6" onSubmit={handleSubmit}>
-      {/* Add dark mode text color */}
-      <h3 className="text-center text-xl font-medium text-gray-900 dark:text-white">
-        Complete User Registration
-      </h3>
+    <>
+      <form className="space-y-6" onSubmit={handleSubmit}>
+        <h3 className="text-center text-xl font-medium text-gray-900 dark:text-white">
+          Complete User Registration
+        </h3>
+
+        {/* Consent Section */}
+        <div className="flex flex-col space-y-2 rounded border border-gray-200 p-4 dark:border-gray-600">
+          {/* Conditionally wrap Checkbox/Label in Popover */}
+          {!consentAccepted ? (
+            <Popover content={popoverContent} trigger="hover">
+              {/* This div is the target for the popover when checkbox is disabled */}
+              <div className="flex cursor-not-allowed items-center gap-2 opacity-50">
+                {" "}
+                {/* Add styling for disabled look */}
+                <Checkbox
+                  id="data-sharing-disabled" // Use different ID when disabled to avoid label conflict
+                  checked={false} // Always false when disabled
+                  disabled={true}
+                  readOnly // Prevent interaction
+                />
+                <Label
+                  htmlFor="data-sharing-disabled"
+                  className="flex text-gray-700 dark:text-gray-300"
+                >
+                  I agree to the data sharing terms
+                </Label>
+              </div>
+            </Popover>
+          ) : (
+            // Render the interactive Checkbox/Label when consent is accepted
+            <div className="flex items-center gap-2">
+              <Checkbox
+                id="data-sharing"
+                checked={dataSharingConsent}
+                disabled={false} // Enable it
+                onChange={(e) => setDataSharingConsent(e.target.checked)}
+                required
+              />
+              <Label
+                htmlFor="data-sharing"
+                className="flex text-gray-700 dark:text-gray-300"
+              >
+                I agree to the data sharing terms
+              </Label>
+            </div>
+          )}
+
+          {/* Button to open the modal remains the same */}
+          <button
+            type="button"
+            onClick={() => setShowConsentModal(true)}
+            className="inline-flex items-center text-sm text-blue-600 hover:underline dark:text-blue-500"
+          >
+            <HiInformationCircle className="mr-1 h-4 w-4" />
+            Review Data Sharing Consent Details
+          </button>
+          {/* Confirmation message remains the same */}
+          {consentAccepted && (
+            <p className="mt-1 flex items-center text-sm text-green-600 dark:text-green-400">
+              <HiCheckCircle className="mr-1 h-4 w-4" /> Consent Accepted
+            </p>
+          )}
+        </div>
 
-      <div className="flex items-center gap-2">
-        {/* Flowbite Checkbox handles dark mode */}
-        <Checkbox
-          id="data-sharing"
-          checked={dataSharingConsent}
-          onChange={(e) => setDataSharingConsent(e.target.checked)}
-          required
-        />
-        {/* Add dark mode text color */}
-        <Label
-          htmlFor="data-sharing"
-          className="flex text-gray-700 dark:text-gray-300"
-        >
-          I consent to sharing my data for personalized recommendations
-        </Label>
-      </div>
+        {/* Submit button logic remains the same */}
+        <div className="flex justify-center pt-2">
+          {isLoading ? (
+            <LoadingSpinner size="md" className="py-2" />
+          ) : (
+            <Button
+              type="submit"
+              disabled={isLoading || !consentAccepted} // Disable if loading OR consent not accepted
+              size="lg"
+              title={
+                !consentAccepted
+                  ? "Please review and accept the data sharing consent first"
+                  : ""
+              }
+            >
+              Complete Registration
+            </Button>
+          )}
+        </div>
+      </form>
 
-      <div className="flex justify-center pt-2">
-        {isLoading ? (
-          <LoadingSpinner size="md" className="py-2" />
-        ) : (
-          // Flowbite Button handles dark mode
-          <Button type="submit" disabled={isLoading} size="lg">
-            Complete Registration
+      {/* GDPR Consent Modal */}
+      <Modal
+        show={showConsentModal}
+        size="xl" // Adjust size as needed
+        onClose={handleDeclineConsent} // Declining if closed without explicit accept
+        popup
+      >
+        <div className="relative flex flex-col gap-4 p-4">
+          <ModalHeader>Data Sharing Consent</ModalHeader>
+        </div>
+        <ModalBody>
+          <div className="space-y-4 p-4 text-base leading-relaxed text-gray-700 dark:text-gray-300">
+            <p>
+              To provide personalized recommendations and enhance your
+              experience, we need your consent to share certain data with the
+              stores you interact with through Tapiro.
+            </p>
+            <p>
+              <span className="font-semibold">What data is shared?</span>
+              <br />
+              We may share anonymized or pseudonymized identifiers, your stated
+              preferences (if any), and interaction data related to product
+              views or interests within the Tapiro platform. We will{" "}
+              <span className="font-semibold">never</span> share your direct
+              email address or phone number unless you explicitly provide it to
+              a store.
+            </p>
+            <p>
+              <span className="font-semibold">How is it used?</span>
+              <br />
+              Stores use this data solely to tailor product recommendations and
+              offers presented to you through the Tapiro service.
+            </p>
+            <p>
+              <span className="font-semibold">Your Control:</span>
+              <br />
+              You can withdraw this consent or manage your data sharing
+              preferences at any time in your user profile settings. Please
+              review our full Privacy Policy for more details.
+            </p>
+            <p className="text-sm text-gray-500 dark:text-gray-400">
+              By clicking "Accept", you agree to these terms.
+            </p>
+          </div>
+        </ModalBody>
+        <ModalFooter>
+          <Button onClick={handleAcceptConsent}>Accept</Button>
+          <Button color="alternative" onClick={handleDeclineConsent}>
+            Decline
           </Button>
-        )}
-      </div>
-    </form>
+        </ModalFooter>
+      </Modal>
+    </>
   );
 }
diff --git a/web/src/components/common/ErrorDisplay.tsx b/web/src/components/common/ErrorDisplay.tsx
index fc1a3e7..edea889 100644
--- a/web/src/components/common/ErrorDisplay.tsx
+++ b/web/src/components/common/ErrorDisplay.tsx
@@ -33,9 +33,11 @@ const ErrorDisplay: React.FC<ErrorDisplayProps> = ({
     <div className={className}>
       {/* Flowbite Alert handles its own dark mode styling */}
       <Alert color="failure" icon={HiInformationCircle}>
-        {/* Ensure title and message text have dark mode styles */}
+        {/* Use Flowbite's recommended text colors for alerts */}
         <h3 className="font-medium text-red-800 dark:text-red-400">{title}</h3>
-        <p className="text-red-700 dark:text-red-300">{errorMessage}</p>
+        <p className="mt-1 text-sm text-red-700 dark:text-red-300">
+          {errorMessage}
+        </p>
         {/* Optional: Stack trace styling */}
         {/* {process.env.NODE_ENV === 'development' && error instanceof Error && (
           <pre className="mt-2 text-xs whitespace-pre-wrap text-red-600 dark:text-red-400">
diff --git a/web/src/layout/Header.tsx b/web/src/layout/Header.tsx
index 81428ea..8412362 100644
--- a/web/src/layout/Header.tsx
+++ b/web/src/layout/Header.tsx
@@ -32,6 +32,17 @@ export function Header() {
     return "/";
   };
 
+  // Determine profile link based on role
+  const getProfileLink = () => {
+    if (userRoles.includes("store")) {
+      return "/profile/store";
+    }
+    if (userRoles.includes("user")) {
+      return "/profile/user";
+    }
+    return "/";
+  };
+
   const handleLogin = () => login();
   const handleLogout = () => logout();
 
@@ -72,6 +83,10 @@ export function Header() {
                 {user?.email}
               </span>
             </DropdownHeader>
+            {/* Add Profile Link */}
+            <DropdownItem as={Link} to={getProfileLink()}>
+              Profile
+            </DropdownItem>
             <DropdownDivider />
             <DropdownItem onClick={handleLogout}>Sign out</DropdownItem>
           </Dropdown>
diff --git a/web/src/main.tsx b/web/src/main.tsx
index 1245273..d101181 100644
--- a/web/src/main.tsx
+++ b/web/src/main.tsx
@@ -14,6 +14,8 @@ import StoreDashboard from "./pages/StoreDashboard";
 import { AuthProviderWrapper } from "./context/AuthContext";
 import PrivateRoute from "./components/auth/PrivateRoute";
 import NotFoundPage from "./pages/static/NotFoundPage";
+import UserProfilePage from "./pages/UserProfilePage";
+import StoreProfilePage from "./pages/StoreProfilePage";
 
 const router = createBrowserRouter([
   {
@@ -44,6 +46,11 @@ const router = createBrowserRouter([
             path: "dashboard/user",
             element: <UserDashboard />,
           },
+          // Add User Profile Route
+          {
+            path: "profile/user",
+            element: <UserProfilePage />,
+          },
         ],
       },
       // --- Protected Store Routes ---
@@ -54,6 +61,11 @@ const router = createBrowserRouter([
             path: "dashboard/store",
             element: <StoreDashboard />,
           },
+          // Add Store Profile Route
+          {
+            path: "profile/store",
+            element: <StoreProfilePage />,
+          },
         ],
       },
       // --- Catch-all 404 Route ---
diff --git a/web/src/pages/StoreProfilePage.tsx b/web/src/pages/StoreProfilePage.tsx
new file mode 100644
index 0000000..f67a0fc
--- /dev/null
+++ b/web/src/pages/StoreProfilePage.tsx
@@ -0,0 +1,386 @@
+import { useEffect, useState } from "react";
+import { useForm, SubmitHandler } from "react-hook-form";
+import {
+  Button,
+  Card,
+  FloatingLabel,
+  HelperText,
+  Spinner,
+  Tabs,
+  Toast,
+  ToastToggle,
+  TabItem, // Corrected import
+  Modal, // Import Modal
+  ModalBody,
+  ModalHeader,
+} from "flowbite-react";
+// Import necessary icons
+import {
+  HiUserCircle,
+  HiCreditCard, // Keep HiCreditCard for Billing tab
+  HiCheck,
+  HiX,
+  HiLockClosed, // Import Lock icon for Security
+  HiTrash, // Import Trash icon for Delete
+  HiExclamation, // Import Exclamation icon for Modal
+} from "react-icons/hi";
+import {
+  useStoreProfile,
+  useUpdateStoreProfile,
+  useDeleteStoreProfile, // Import delete hook
+} from "../api/hooks/useStoreHooks";
+import { StoreUpdate } from "../api/types/data-contracts";
+import LoadingSpinner from "../components/common/LoadingSpinner";
+import ErrorDisplay from "../components/common/ErrorDisplay";
+import { useAuth } from "../hooks/useAuth"; // Import useAuth for logout
+
+// Define the form data structure based on StoreUpdate schema
+type StoreProfileFormData = {
+  name?: string;
+  address?: string;
+};
+
+export default function StoreProfilePage() {
+  const {
+    data: storeProfile,
+    isLoading,
+    error: fetchError,
+  } = useStoreProfile();
+  const {
+    mutate: updateStore,
+    isPending: isUpdating,
+    error: updateError,
+    isSuccess: isUpdateSuccess, // Rename for clarity
+    reset: resetUpdateMutation,
+  } = useUpdateStoreProfile();
+  const {
+    mutate: deleteStore,
+    isPending: isDeleting,
+    error: deleteError,
+    isSuccess: isDeleteSuccess, // Rename for clarity
+    reset: resetDeleteMutation,
+  } = useDeleteStoreProfile();
+  const { logout } = useAuth(); // Get logout function
+
+  // State for toasts
+  const [showSuccessToast, setShowSuccessToast] = useState(false);
+  const [showErrorToast, setShowErrorToast] = useState(false);
+  const [toastMessage, setToastMessage] = useState("");
+  // State for delete confirmation modal
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors, isDirty },
+  } = useForm<StoreProfileFormData>({
+    defaultValues: {
+      name: "",
+      address: "",
+    },
+  });
+
+  // Pre-fill form when storeProfile data loads
+  useEffect(() => {
+    if (storeProfile) {
+      reset({
+        name: storeProfile.name || "",
+        address: storeProfile.address || "",
+      });
+    }
+  }, [storeProfile, reset]);
+
+  // Show toasts based on UPDATE mutation state
+  useEffect(() => {
+    if (isUpdateSuccess) {
+      setShowSuccessToast(true);
+      setToastMessage("Store profile updated successfully!");
+      resetUpdateMutation();
+      const timer = setTimeout(() => setShowSuccessToast(false), 5000);
+      return () => clearTimeout(timer);
+    }
+  }, [isUpdateSuccess, resetUpdateMutation]);
+
+  useEffect(() => {
+    if (updateError) {
+      setShowErrorToast(true);
+      setToastMessage(
+        updateError.message ||
+          "Failed to update store profile. Please try again.",
+      );
+      resetUpdateMutation();
+      const timer = setTimeout(() => setShowErrorToast(false), 5000);
+      return () => clearTimeout(timer);
+    }
+  }, [updateError, resetUpdateMutation]);
+
+  // Show toasts/handle redirect based on DELETE mutation state
+  useEffect(() => {
+    if (isDeleteSuccess) {
+      setShowDeleteModal(false); // Close modal on success
+      // Don't show toast here, set flag for home page instead
+      // setShowSuccessToast(true);
+      // setToastMessage("Store account deleted successfully.");
+      sessionStorage.setItem(
+        "showPostLogoutToast",
+        "Store account deleted successfully.",
+      ); // <-- Set flag
+      resetDeleteMutation();
+      logout(); // <-- Call logout directly
+    }
+  }, [isDeleteSuccess, resetDeleteMutation, logout]); // Keep dependencies
+
+  useEffect(() => {
+    if (deleteError) {
+      // Keep modal open on error? Or close and show toast? Closing for now.
+      setShowDeleteModal(false);
+      setShowErrorToast(true);
+      setToastMessage(
+        deleteError.message ||
+          "Failed to delete store account. Please try again.",
+      );
+      resetDeleteMutation();
+      const timer = setTimeout(() => setShowErrorToast(false), 5000);
+      return () => clearTimeout(timer);
+    }
+  }, [deleteError, resetDeleteMutation]);
+
+  const onSubmit: SubmitHandler<StoreProfileFormData> = (data) => {
+    const updatePayload: StoreUpdate = {
+      name: data.name,
+      address: data.address,
+    };
+    updateStore(updatePayload);
+  };
+
+  // Function to handle Auth0 password reset redirection
+  const handlePasswordReset = () => {
+    const domain = import.meta.env.VITE_AUTH0_DOMAIN;
+    window.open(`https://${domain}/passwordreset`, "_blank"); // Open in new tab
+  };
+
+  // Function to handle store deletion
+  const handleDeleteStore = () => {
+    deleteStore(); // Call the mutation
+  };
+
+  if (isLoading) {
+    return <LoadingSpinner message="Loading store profile..." />;
+  }
+
+  if (fetchError) {
+    return (
+      <ErrorDisplay
+        title="Error Loading Profile"
+        error={fetchError}
+        className="container mx-auto p-4"
+      />
+    );
+  }
+
+  return (
+    <div className="relative container mx-auto p-4">
+      {/* Success Toast */}
+      {showSuccessToast && (
+        <Toast className="absolute top-5 right-5 z-50">
+          <div className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-green-100 text-green-500 dark:bg-green-800 dark:text-green-200">
+            <HiCheck className="h-5 w-5" />
+          </div>
+          <div className="ml-3 text-sm font-normal">{toastMessage}</div>
+          <ToastToggle onDismiss={() => setShowSuccessToast(false)} />
+        </Toast>
+      )}
+
+      {/* Error Toast */}
+      {showErrorToast && (
+        <Toast className="absolute top-5 right-5 z-50">
+          <div className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-red-100 text-red-500 dark:bg-red-800 dark:text-red-200">
+            <HiX className="h-5 w-5" />
+          </div>
+          <div className="ml-3 text-sm font-normal">{toastMessage}</div>
+          <ToastToggle onDismiss={() => setShowErrorToast(false)} />
+        </Toast>
+      )}
+
+      <Card>
+        <Tabs aria-label="Store profile tabs" variant="underline">
+          {/* Profile Tab */}
+          <TabItem active title="Store Details" icon={HiUserCircle}>
+            <form
+              onSubmit={handleSubmit(onSubmit)}
+              className="flex flex-col gap-6 pt-4"
+            >
+              <h2 className="text-xl font-semibold text-gray-900 dark:text-white">
+                Store Information
+              </h2>
+              {/* Store Name */}
+              <div className="relative">
+                <FloatingLabel
+                  variant="outlined"
+                  id="name"
+                  label="Store Name"
+                  color={errors.name ? "error" : "default"}
+                  {...register("name", { required: "Store name is required" })}
+                />
+                {errors.name?.message && (
+                  <HelperText color="failure">{errors.name.message}</HelperText>
+                )}
+              </div>
+
+              {/* Address */}
+              <div className="relative">
+                <FloatingLabel
+                  variant="outlined"
+                  id="address"
+                  label="Address"
+                  color={errors.address ? "error" : "default"}
+                  {...register("address")} // Add validation if required
+                />
+                {errors.address?.message && (
+                  <HelperText color="failure">
+                    {errors.address.message}
+                  </HelperText>
+                )}
+              </div>
+
+              {/* Save Button */}
+              <Button
+                type="submit"
+                disabled={!isDirty || isUpdating}
+                className="mt-4"
+              >
+                {isUpdating ? (
+                  <>
+                    <Spinner size="sm" className="mr-3" />
+                    Saving...
+                  </>
+                ) : (
+                  "Save Changes"
+                )}
+              </Button>
+            </form>
+          </TabItem>
+
+          {/* Security Tab - ADDED */}
+          <TabItem title="Security" icon={HiLockClosed}>
+            <div className="flex flex-col gap-8 pt-4">
+              <h2 className="text-xl font-semibold text-gray-900 dark:text-white">
+                Security Settings
+              </h2>
+              {/* Password Reset */}
+              <div>
+                <h3 className="text-md mb-2 font-medium text-gray-900 dark:text-white">
+                  Password
+                </h3>
+                <p className="mb-3 text-sm text-gray-600 dark:text-gray-400">
+                  Manage your account password via our authentication provider.
+                </p>
+                <Button color="light" onClick={handlePasswordReset}>
+                  Change Password
+                </Button>
+              </div>
+              {/* MFA */}
+              <div>
+                <h3 className="text-md mb-2 font-medium text-gray-900 dark:text-white">
+                  Multi-Factor Authentication (MFA)
+                </h3>
+                <p className="mb-3 text-sm text-gray-600 dark:text-gray-400">
+                  Add an extra layer of security to your account. (Coming Soon)
+                </p>
+                <Button color="light" disabled>
+                  Enable MFA (Not Available)
+                </Button>
+              </div>
+              {/* Delete Account */}
+              <div className="border-t border-gray-200 pt-6 dark:border-gray-700">
+                <h3 className="text-md mb-2 font-medium text-red-600 dark:text-red-400">
+                  Delete Account
+                </h3>
+                <p className="mb-3 text-sm text-gray-600 dark:text-gray-400">
+                  Permanently delete your store account and all associated data.
+                  This action cannot be undone.
+                </p>
+                <Button
+                  color="red"
+                  outline // <-- Add this prop
+                  onClick={() => setShowDeleteModal(true)}
+                  disabled={isDeleting}
+                >
+                  {isDeleting ? (
+                    <>
+                      <Spinner size="sm" className="mr-3" /> Deleting...
+                    </>
+                  ) : (
+                    <>
+                      <HiTrash className="mr-2 h-5 w-5" /> Delete Store Account
+                    </>
+                  )}
+                </Button>
+              </div>
+            </div>
+          </TabItem>
+
+          {/* Billing Tab (Placeholder) */}
+          <TabItem title="Billing" icon={HiCreditCard}>
+            <div className="pt-4">
+              <h2 className="mb-4 text-xl font-semibold text-gray-900 dark:text-white">
+                Billing Information
+              </h2>
+              <p className="text-sm text-gray-600 dark:text-gray-400">
+                View your subscription details and manage payment methods.
+                (Coming Soon)
+              </p>
+              {/* Add Billing details here later */}
+            </div>
+          </TabItem>
+        </Tabs>
+      </Card>
+
+      {/* Delete Confirmation Modal */}
+      <Modal
+        show={showDeleteModal}
+        size="md"
+        onClose={() => !isDeleting && setShowDeleteModal(false)} // Prevent closing while deleting
+        popup
+      >
+        <ModalHeader />
+        <ModalBody>
+          <div className="text-center">
+            <HiExclamation className="mx-auto mb-4 h-14 w-14 text-gray-400 dark:text-gray-200" />
+            <h3 className="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">
+              Are you sure you want to permanently delete your store account?
+            </h3>
+            <p className="mb-5 text-sm text-gray-500 dark:text-gray-400">
+              All associated data, including API keys and usage history, will be
+              lost. This action cannot be undone.
+            </p>
+            <div className="flex justify-center gap-4">
+              <Button
+                color="red"
+                onClick={handleDeleteStore}
+                disabled={isDeleting}
+              >
+                {isDeleting ? (
+                  <>
+                    <Spinner size="sm" className="mr-3" /> Deleting...
+                  </>
+                ) : (
+                  "Yes, I'm sure"
+                )}
+              </Button>
+              <Button
+                color="dark"
+                outline
+                onClick={() => setShowDeleteModal(false)}
+                disabled={isDeleting}
+              >
+                No, cancel
+              </Button>
+            </div>
+          </div>
+        </ModalBody>
+      </Modal>
+    </div>
+  );
+}
diff --git a/web/src/pages/UserProfilePage.tsx b/web/src/pages/UserProfilePage.tsx
new file mode 100644
index 0000000..f8cf574
--- /dev/null
+++ b/web/src/pages/UserProfilePage.tsx
@@ -0,0 +1,456 @@
+import { useEffect, useState } from "react";
+import { useForm, SubmitHandler, Controller } from "react-hook-form";
+import {
+  Button,
+  Card,
+  ToggleSwitch,
+  FloatingLabel,
+  HelperText,
+  Spinner,
+  Tabs,
+  Toast,
+  ToastToggle,
+  TabItem, // Added TabItem import
+  Modal, // Import Modal
+  ModalBody,
+  ModalHeader,
+} from "flowbite-react";
+// Import necessary icons
+import {
+  HiUserCircle,
+  HiShieldCheck,
+  HiLockClosed,
+  HiCheck,
+  HiX,
+  HiTrash, // Import Trash icon for Delete
+  HiExclamation, // Import Exclamation icon for Modal
+} from "react-icons/hi";
+import {
+  useUserProfile,
+  useUpdateUserProfile,
+  useDeleteUserProfile, // Import delete hook
+} from "../api/hooks/useUserHooks";
+import { UserUpdate } from "../api/types/data-contracts";
+import LoadingSpinner from "../components/common/LoadingSpinner";
+import ErrorDisplay from "../components/common/ErrorDisplay";
+import { useAuth } from "../hooks/useAuth"; // Import useAuth for logout
+
+// Define the form data structure based on UserUpdate schema
+type UserProfileFormData = {
+  username?: string;
+  phone?: string;
+  privacySettings_dataSharingConsent?: boolean;
+  privacySettings_anonymizeData?: boolean;
+};
+
+export default function UserProfilePage() {
+  const { data: userProfile, isLoading, error: fetchError } = useUserProfile();
+  const {
+    mutate: updateUser,
+    isPending: isUpdating,
+    error: updateError,
+    isSuccess: isUpdateSuccess, // Rename for clarity
+    reset: resetUpdateMutation,
+  } = useUpdateUserProfile();
+  const {
+    mutate: deleteUser,
+    isPending: isDeleting,
+    error: deleteError,
+    isSuccess: isDeleteSuccess, // Rename for clarity
+    reset: resetDeleteMutation,
+  } = useDeleteUserProfile();
+  const { logout } = useAuth(); // Get logout function
+
+  // State for toasts
+  const [showSuccessToast, setShowSuccessToast] = useState(false);
+  const [showErrorToast, setShowErrorToast] = useState(false);
+  const [toastMessage, setToastMessage] = useState("");
+  // State for delete confirmation modal
+  const [showDeleteModal, setShowDeleteModal] = useState(false);
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    control,
+    formState: { errors, isDirty },
+  } = useForm<UserProfileFormData>({
+    defaultValues: {
+      username: "",
+      phone: "",
+      privacySettings_dataSharingConsent: false,
+      privacySettings_anonymizeData: false,
+    },
+  });
+
+  // Pre-fill form when userProfile data loads
+  useEffect(() => {
+    if (userProfile) {
+      reset({
+        username: userProfile.username || "",
+        phone: userProfile.phone || "",
+        privacySettings_dataSharingConsent:
+          userProfile.privacySettings?.dataSharingConsent ?? false,
+        privacySettings_anonymizeData:
+          userProfile.privacySettings?.anonymizeData ?? false,
+      });
+    }
+  }, [userProfile, reset]);
+
+  // Show toasts based on UPDATE mutation state
+  useEffect(() => {
+    if (isUpdateSuccess) {
+      setShowSuccessToast(true);
+      setToastMessage("Profile updated successfully!");
+      resetUpdateMutation();
+      const timer = setTimeout(() => setShowSuccessToast(false), 5000);
+      return () => clearTimeout(timer);
+    }
+  }, [isUpdateSuccess, resetUpdateMutation]);
+
+  useEffect(() => {
+    if (updateError) {
+      setShowErrorToast(true);
+      setToastMessage(
+        updateError.message || "Failed to update profile. Please try again.",
+      );
+      resetUpdateMutation();
+      const timer = setTimeout(() => setShowErrorToast(false), 5000);
+      return () => clearTimeout(timer);
+    }
+  }, [updateError, resetUpdateMutation]);
+
+  // Show toasts/handle redirect based on DELETE mutation state
+  useEffect(() => {
+    if (isDeleteSuccess) {
+      setShowDeleteModal(false); // Close modal on success
+      // Don't show toast here, set flag for home page instead
+      // setShowSuccessToast(true);
+      // setToastMessage("User account deleted successfully.");
+      sessionStorage.setItem(
+        "showPostLogoutToast",
+        "User account deleted successfully.",
+      ); // <-- Set flag
+      resetDeleteMutation();
+      logout(); // <-- Call logout directly
+    }
+  }, [isDeleteSuccess, resetDeleteMutation, logout]); // Keep dependencies
+
+  useEffect(() => {
+    if (deleteError) {
+      // Keep modal open on error? Or close and show toast? Closing for now.
+      setShowDeleteModal(false);
+      setShowErrorToast(true);
+      setToastMessage(
+        deleteError.message ||
+          "Failed to delete user account. Please try again.",
+      );
+      resetDeleteMutation();
+      const timer = setTimeout(() => setShowErrorToast(false), 5000);
+      return () => clearTimeout(timer);
+    }
+  }, [deleteError, resetDeleteMutation]);
+
+  const onSubmit: SubmitHandler<UserProfileFormData> = (data) => {
+    const updatePayload: UserUpdate = {
+      username: data.username,
+      phone: data.phone,
+      privacySettings: {
+        dataSharingConsent: data.privacySettings_dataSharingConsent,
+        anonymizeData: data.privacySettings_anonymizeData,
+      },
+    };
+    updateUser(updatePayload);
+  };
+
+  // Function to handle Auth0 password reset redirection
+  const handlePasswordReset = () => {
+    const domain = import.meta.env.VITE_AUTH0_DOMAIN;
+    window.open(`https://${domain}/passwordreset`, "_blank"); // Open in new tab
+  };
+
+  // Function to handle user deletion
+  const handleDeleteUser = () => {
+    deleteUser(); // Call the mutation
+  };
+
+  if (isLoading) {
+    return <LoadingSpinner message="Loading user profile..." />;
+  }
+
+  if (fetchError) {
+    return (
+      <ErrorDisplay
+        title="Error Loading Profile"
+        error={fetchError}
+        className="container mx-auto p-4"
+      />
+    );
+  }
+
+  return (
+    <div className="relative container mx-auto p-4">
+      {/* Success Toast */}
+      {showSuccessToast && (
+        <Toast className="absolute top-5 right-5 z-50">
+          <div className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-green-100 text-green-500 dark:bg-green-800 dark:text-green-200">
+            <HiCheck className="h-5 w-5" />
+          </div>
+          <div className="ml-3 text-sm font-normal">{toastMessage}</div>
+          <ToastToggle onDismiss={() => setShowSuccessToast(false)} />
+        </Toast>
+      )}
+
+      {/* Error Toast */}
+      {showErrorToast && (
+        <Toast className="absolute top-5 right-5 z-50">
+          <div className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-red-100 text-red-500 dark:bg-red-800 dark:text-red-200">
+            <HiX className="h-5 w-5" />
+          </div>
+          <div className="ml-3 text-sm font-normal">{toastMessage}</div>
+          <ToastToggle onDismiss={() => setShowErrorToast(false)} />
+        </Toast>
+      )}
+
+      <Card>
+        {/* Use Tabs for organization */}
+        <Tabs aria-label="User profile tabs" variant="underline">
+          {/* Profile Tab */}
+          <TabItem active title="Profile" icon={HiUserCircle}>
+            <form
+              onSubmit={handleSubmit(onSubmit)}
+              className="flex flex-col gap-6 pt-4"
+            >
+              <h2 className="text-xl font-semibold text-gray-900 dark:text-white">
+                Basic Information
+              </h2>
+              {/* Username */}
+              <div className="relative">
+                <FloatingLabel
+                  variant="outlined"
+                  id="username"
+                  label="Username"
+                  color={errors.username ? "error" : "default"}
+                  {...register("username", {
+                    required: "Username is required",
+                    minLength: {
+                      value: 3,
+                      message: "Username must be at least 3 characters",
+                    },
+                    maxLength: {
+                      value: 15,
+                      message: "Username cannot exceed 15 characters",
+                    },
+                    pattern: {
+                      value: /^[a-zA-Z0-9_-]+$/,
+                      message:
+                        "Username can only contain letters, numbers, underscores, and hyphens",
+                    },
+                  })}
+                />
+                {errors.username?.message && (
+                  <HelperText color="failure">
+                    {errors.username.message}
+                  </HelperText>
+                )}
+              </div>
+
+              {/* Phone Number */}
+              <div className="relative">
+                <FloatingLabel
+                  variant="outlined"
+                  id="phone"
+                  label="Phone Number (e.g., +14155552671)"
+                  color={errors.phone ? "error" : "default"}
+                  {...register("phone", {
+                    pattern: {
+                      value: /^\+[1-9]\d{1,14}$/,
+                      message:
+                        "Phone number must be in E.164 format (e.g., +14155552671)",
+                    },
+                  })}
+                />
+                <HelperText color={errors.phone ? "failure" : "gray"}>
+                  {errors.phone?.message ||
+                    "Enter phone number including country code (e.g., +1 for US)."}
+                </HelperText>
+              </div>
+              {/* Save Button - Common for all tabs within the form */}
+              <Button
+                type="submit"
+                disabled={!isDirty || isUpdating}
+                className="mt-4"
+              >
+                {isUpdating ? (
+                  <>
+                    <Spinner size="sm" />
+                    <span className="pl-3">Saving...</span>
+                  </>
+                ) : (
+                  "Save Changes"
+                )}
+              </Button>
+            </form>
+          </TabItem>
+
+          {/* Privacy Tab */}
+          <TabItem title="Privacy" icon={HiShieldCheck}>
+            <form
+              onSubmit={handleSubmit(onSubmit)}
+              className="flex flex-col gap-6 pt-4"
+            >
+              <h2 className="text-xl font-semibold text-gray-900 dark:text-white">
+                Privacy Settings
+              </h2>
+              {/* Data Sharing Consent */}
+              <Controller
+                name="privacySettings_dataSharingConsent"
+                control={control}
+                render={({ field }) => (
+                  <ToggleSwitch
+                    label="Allow Data Sharing with Stores"
+                    checked={field.value ?? false}
+                    onChange={field.onChange}
+                  />
+                )}
+              />
+              {/* Anonymize Data */}
+              <Controller
+                name="privacySettings_anonymizeData"
+                control={control}
+                render={({ field }) => (
+                  <ToggleSwitch
+                    label="Anonymize Data Shared with Stores"
+                    checked={field.value ?? false}
+                    onChange={field.onChange}
+                  />
+                )}
+              />
+              {/* Save Button - Common for all tabs within the form */}
+              <Button
+                type="submit"
+                disabled={!isDirty || isUpdating}
+                className="mt-4"
+              >
+                {isUpdating ? (
+                  <>
+                    <Spinner size="sm" />
+                    <span className="pl-3">Saving...</span>
+                  </>
+                ) : (
+                  "Save Changes"
+                )}
+              </Button>
+            </form>
+          </TabItem>
+
+          {/* Security Tab */}
+          <TabItem title="Security" icon={HiLockClosed}>
+            <div className="flex flex-col gap-8 pt-4">
+              {" "}
+              {/* Increased gap */}
+              <h2 className="text-xl font-semibold text-gray-900 dark:text-white">
+                Security Settings
+              </h2>
+              {/* Password Reset */}
+              <div>
+                <h3 className="text-md mb-2 font-medium text-gray-900 dark:text-white">
+                  Password
+                </h3>
+                <p className="mb-3 text-sm text-gray-600 dark:text-gray-400">
+                  Manage your account password via our authentication provider.
+                </p>
+                <Button color="light" onClick={handlePasswordReset}>
+                  Change Password
+                </Button>
+              </div>
+              {/* MFA */}
+              <div>
+                <h3 className="text-md mb-2 font-medium text-gray-900 dark:text-white">
+                  Multi-Factor Authentication (MFA)
+                </h3>
+                <p className="mb-3 text-sm text-gray-600 dark:text-gray-400">
+                  Add an extra layer of security to your account. (Coming Soon)
+                </p>
+                <Button color="light" disabled>
+                  Enable MFA (Not Available)
+                </Button>
+              </div>
+              {/* Delete Account - ADDED */}
+              <div className="border-t border-gray-200 pt-6 dark:border-gray-700">
+                <h3 className="text-md mb-2 font-medium text-red-600 dark:text-red-400">
+                  Delete Account
+                </h3>
+                <p className="mb-3 text-sm text-gray-600 dark:text-gray-400">
+                  Permanently delete your user account and all associated data.
+                  This action cannot be undone.
+                </p>
+                <Button
+                  color="red"
+                  outline // <-- Add this prop
+                  onClick={() => setShowDeleteModal(true)}
+                  disabled={isDeleting}
+                >
+                  {isDeleting ? (
+                    <>
+                      <Spinner size="sm" className="mr-3" /> Deleting...
+                    </>
+                  ) : (
+                    <>
+                      <HiTrash className="mr-2 h-5 w-5" /> Delete My Account
+                    </>
+                  )}
+                </Button>
+              </div>
+            </div>
+          </TabItem>
+        </Tabs>
+      </Card>
+
+      {/* Delete Confirmation Modal */}
+      <Modal
+        show={showDeleteModal}
+        size="md"
+        onClose={() => !isDeleting && setShowDeleteModal(false)} // Prevent closing while deleting
+        popup
+      >
+        <ModalHeader />
+        <ModalBody>
+          <div className="text-center">
+            <HiExclamation className="mx-auto mb-4 h-14 w-14 text-gray-400 dark:text-gray-200" />
+            <h3 className="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">
+              Are you sure you want to permanently delete your user account?
+            </h3>
+            <p className="mb-5 text-sm text-gray-500 dark:text-gray-400">
+              All associated data, including preferences and sharing settings,
+              will be lost. This action cannot be undone.
+            </p>
+            <div className="flex justify-center gap-4">
+              <Button
+                color="red"
+                onClick={handleDeleteUser}
+                disabled={isDeleting}
+              >
+                {isDeleting ? (
+                  <>
+                    <Spinner size="sm" className="mr-3" /> Deleting...
+                  </>
+                ) : (
+                  "Yes, I'm sure"
+                )}
+              </Button>
+              <Button
+                color="dark"
+                outline
+                onClick={() => setShowDeleteModal(false)}
+                disabled={isDeleting}
+              >
+                No, cancel
+              </Button>
+            </div>
+          </div>
+        </ModalBody>
+      </Modal>
+    </div>
+  );
+}
diff --git a/web/src/pages/static/HomePage.tsx b/web/src/pages/static/HomePage.tsx
index 556471f..9e58dc2 100644
--- a/web/src/pages/static/HomePage.tsx
+++ b/web/src/pages/static/HomePage.tsx
@@ -1,3 +1,6 @@
+import { useState, useEffect } from "react"; // <-- Import hooks
+import { Toast, ToastToggle } from "flowbite-react"; // <-- Import Toast components
+import { HiCheck } from "react-icons/hi"; // <-- Import icon
 import {
   DocsIcon,
   BlocksIcon,
@@ -6,6 +9,23 @@ import {
 } from "../../components/icons/ResourceIcons";
 
 export default function HomePage() {
+  const [showToast, setShowToast] = useState(false);
+  const [toastMessage, setToastMessage] = useState("");
+
+  // Check for post-logout toast message on mount
+  useEffect(() => {
+    const message = sessionStorage.getItem("showPostLogoutToast");
+    if (message) {
+      setToastMessage(message);
+      setShowToast(true);
+      sessionStorage.removeItem("showPostLogoutToast"); // Clear the flag
+
+      // Optional: Auto-hide toast after a delay
+      const timer = setTimeout(() => setShowToast(false), 5000);
+      return () => clearTimeout(timer); // Cleanup timer on unmount
+    }
+  }, []); // Empty dependency array ensures this runs only once on mount
+
   const CARDS = [
     {
       title: "Flowbite React Docs",
@@ -51,10 +71,20 @@ export default function HomePage() {
     },
   ];
 
-  // Removed the outer <main> tag and DarkThemeToggle from original App.tsx
-  // Added container and padding for spacing within the Layout's main area
   return (
-    <div className="container mx-auto px-4 py-12">
+    // Add relative positioning if needed for absolute toast
+    <div className="relative container mx-auto px-4 py-12">
+      {/* Success Toast */}
+      {showToast && (
+        <Toast className="absolute top-5 right-5 z-50">
+          <div className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-green-100 text-green-500 dark:bg-green-800 dark:text-green-200">
+            <HiCheck className="h-5 w-5" />
+          </div>
+          <div className="ml-3 text-sm font-normal">{toastMessage}</div>
+          <ToastToggle onDismiss={() => setShowToast(false)} />
+        </Toast>
+      )}
+
       {/* Background pattern - kept for visual style */}
       <div className="absolute inset-0 -z-10 size-full">
         <div className="relative h-full w-full select-none">