diff --git a/app.vue b/app.vue
index e6cb406..359534e 100644
--- a/app.vue
+++ b/app.vue
@@ -1,9 +1,14 @@
 <template>
-  <NuxtLayout>
+  <NuxtLayout :key="layoutKey">
     <NuxtPage />
   </NuxtLayout>
 </template>
 
+<script setup>
+const route = useRoute();
+const layoutKey = computed(() => route.meta.layout || 'default');
+</script>
+
 <style lang="scss">
 html,
 body {
diff --git a/assets/scss/_onboarding.scss b/assets/scss/_onboarding.scss
index c7aee0d..2606971 100644
--- a/assets/scss/_onboarding.scss
+++ b/assets/scss/_onboarding.scss
@@ -424,34 +424,95 @@
   width: 100%;
 }
 
-.wallet-options {
+.wallet-currency-columns {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 2rem;
+
+  @media (max-width: $breakpoint-sm) {
+    grid-template-columns: 1fr;
+    gap: 1.5rem;
+  }
+}
+
+.wallet-column,
+.currency-column {
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
 }
 
-.wallet-option {
+.column-label {
+  font-size: 0.9375rem;
+  font-weight: 600;
+  color: $text-primary;
+  margin-bottom: 0.25rem;
+}
+
+.wallet-cards {
   display: flex;
-  align-items: center;
+  flex-direction: column;
   gap: 0.5rem;
+}
 
-  input[type='radio'] {
-    margin: 0;
+.wallet-card {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.625rem 1rem;
+  border: 2px solid $border-gray;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  background: white;
+
+  &:hover {
+    border-color: $primary;
+    background: rgba(4, 120, 68, 0.02);
   }
 
-  label {
-    font-weight: 500;
-    color: $text-primary;
-    cursor: pointer;
+  &.selected {
+    border-color: $primary;
+    background: rgba(4, 120, 68, 0.05);
   }
 }
 
-.wallet-name-input,
-.new-wallet-form {
-  margin-top: 1rem;
+.wallet-radio {
+  width: 18px;
+  height: 18px;
+  accent-color: $primary;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+.wallet-card-content {
   display: flex;
   flex-direction: column;
-  gap: 0.75rem;
+  gap: 0.125rem;
+}
+
+.wallet-card-title {
+  font-weight: 600;
+  font-size: 0.9375rem;
+  color: $text-primary;
+}
+
+.wallet-card-desc {
+  font-size: 0.8125rem;
+  color: $text-muted;
+}
+
+.wallet-extra-field,
+.currency-section {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.field-label {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: $text-secondary;
 }
 
 .wallet-input {
@@ -462,6 +523,7 @@
   font-size: 0.875rem;
   background: white;
   color: $text-primary;
+  box-sizing: border-box;
 
   &:focus {
     outline: none;
@@ -476,3 +538,60 @@
   margin: 0.5rem 0 0 0;
   font-style: italic;
 }
+
+.categories-setup {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  width: 100%;
+  max-width: 400px;
+  margin: 0 auto;
+}
+
+.categories-card {
+  padding: 1.5rem;
+  border: 2px solid $border-gray;
+  border-radius: 12px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  background: white;
+
+  &:hover {
+    border-color: $primary;
+    background: rgba(4, 120, 68, 0.02);
+  }
+
+  &.selected {
+    border-color: $primary;
+    background: rgba(4, 120, 68, 0.05);
+  }
+}
+
+.categories-card-header {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin-bottom: 0.75rem;
+}
+
+.categories-checkbox {
+  width: 20px;
+  height: 20px;
+  accent-color: $primary;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+.categories-card-title {
+  font-weight: 600;
+  font-size: 1rem;
+  color: $text-primary;
+}
+
+.categories-card-description {
+  font-size: 0.875rem;
+  color: $text-secondary;
+  line-height: 1.5;
+  margin: 0;
+  padding-left: calc(20px + 0.75rem);
+}
diff --git a/assets/scss/_transaction-form.scss b/assets/scss/_transaction-form.scss
index 0465f93..606da75 100644
--- a/assets/scss/_transaction-form.scss
+++ b/assets/scss/_transaction-form.scss
@@ -483,3 +483,29 @@
     }
   }
 }
+
+.wallet-field-wrapper {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  .wallet-default-indicator {
+    position: absolute;
+    top: 34px;
+    right: 8px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: $primary;
+    color: white;
+    font-size: 0.65rem;
+    font-weight: 700;
+    padding: 2px 6px;
+    border-radius: 3px;
+    white-space: nowrap;
+    letter-spacing: 0.4px;
+    text-transform: uppercase;
+    pointer-events: none;
+  }
+}
diff --git a/assets/scss/_transactions-cards.scss b/assets/scss/_transactions-cards.scss
index 75a5b37..2cc267b 100644
--- a/assets/scss/_transactions-cards.scss
+++ b/assets/scss/_transactions-cards.scss
@@ -2,7 +2,6 @@
 
 .transactions-cards {
   width: 100%;
-  display: block;
 
   .cards-heading {
     display: flex;
diff --git a/components/ContentCard.vue b/components/ContentCard.vue
index 5db4168..c572f03 100644
--- a/components/ContentCard.vue
+++ b/components/ContentCard.vue
@@ -1,8 +1,11 @@
 <template>
-  <div class="entity-card">
+  <div class="entity-card" :class="{ 'is-default': isDefault }">
     <div class="entity-icon-name" :class="{ 'no-icon': !icon }">
       <component :is="resolvedIcon" v-if="icon" class="entity-icon" />
       <span class="name">{{ name }}</span>
+      <span v-if="isDefault" class="default-badge" title="This is the default wallet">
+        Default
+      </span>
     </div>
     <div class="entity-description">
       {{ description }}
@@ -45,6 +48,10 @@ const props = defineProps({
   type: {
     type: String,
     default: null
+  },
+  isDefault: {
+    type: Boolean,
+    default: false
   }
 });
 
@@ -86,11 +93,21 @@ const resolvedIcon = computed(() => {
     min-height: 50px;
   }
 
+  &.is-default {
+    background: rgba($success, 0.08);
+    border-left: 4px solid $success;
+    padding-left: calc($spacing-4 - 4px);
+  }
+
   &:hover {
     transform: translateY(-1px);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
     background: #fff;
 
+    &.is-default {
+      background: rgba($success, 0.12);
+    }
+
     .entity-icon {
       transform: scale(1.1);
     }
@@ -140,6 +157,22 @@ const resolvedIcon = computed(() => {
     }
   }
 
+  .default-badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: $primary;
+    color: white;
+    font-size: 0.7rem;
+    font-weight: 700;
+    padding: 3px 8px;
+    border-radius: 4px;
+    white-space: nowrap;
+    flex-shrink: 0;
+    letter-spacing: 0.5px;
+    text-transform: uppercase;
+  }
+
   &.no-icon {
     padding-left: calc(24px + #{$spacing-2});
 
diff --git a/components/ContentTable.vue b/components/ContentTable.vue
index bb99454..f8d7e53 100644
--- a/components/ContentTable.vue
+++ b/components/ContentTable.vue
@@ -36,6 +36,7 @@
           :icon="entity.icon?.path || entity.icon?.content || entity.icon"
           :description="entity.description"
           :page-name="pageName"
+          :is-default="String(entity.id) === defaultItemId"
           @edit="$emit('edit', entity)"
           @delete="$emit('delete', entity)"
         />
@@ -119,6 +120,10 @@ const props = defineProps({
   headerType: {
     type: String,
     default: 'default' // 'default', 'expense'
+  },
+  defaultItemId: {
+    type: String,
+    default: null
   }
 });
 
diff --git a/components/TransactionForm.vue b/components/TransactionForm.vue
index 78aef52..ac14754 100644
--- a/components/TransactionForm.vue
+++ b/components/TransactionForm.vue
@@ -54,14 +54,23 @@
           @select="handlePartySelect"
         />
 
-        <SearchableDropdown
-          v-model="walletSearchQuery"
-          :label="isOutcomeSelected ? 'Wallet (sent from)' : 'Wallet (received to)'"
-          placeholder="Search wallet..."
-          :options="wallets"
-          :error="walletError ? 'Wallet is required.' : ''"
-          @select="handleWalletSelect"
-        />
+        <div class="wallet-field-wrapper">
+          <SearchableDropdown
+            v-model="walletSearchQuery"
+            :label="isOutcomeSelected ? 'Wallet (sent from)' : 'Wallet (received to)'"
+            placeholder="Search wallet..."
+            :options="wallets"
+            :error="walletError ? 'Wallet is required.' : ''"
+            @select="handleWalletSelect"
+          />
+          <span
+            v-if="isWalletDefault"
+            class="wallet-default-indicator"
+            title="This is your default wallet"
+          >
+            Default
+          </span>
+        </div>
       </div>
 
       <div class="form-transaction">
@@ -157,7 +166,8 @@ const selectedWalletId = ref('');
 const selectedGroupId = ref(null);
 const selectedAdditionalCategoryIds = ref([]);
 const filesBase64 = ref([]);
-const selectedCurrency = ref('XAF');
+const sharedData = useSharedData();
+const selectedCurrency = ref(sharedData.getDefaultCurrency.value || 'USD');
 
 const dateError = ref(false);
 const timeError = ref(false);
@@ -223,7 +233,7 @@ function onSubmit() {
   emit('submit', payload);
 }
 
-const sharedData = useSharedData();
+// sharedData declared above for default currency
 
 const parties = computed(() => sharedData.parties.value);
 const groups = computed(() => sharedData.groups.value);
@@ -252,6 +262,14 @@ const wallets = computed(() => {
   });
 });
 
+const isWalletDefault = computed(() => {
+  if (!selectedWalletId.value) return false;
+  const defaultWallet = sharedData.getDefaultWallet.value;
+  if (!defaultWallet) return false;
+  const defaultId = String(defaultWallet.sync_state?.client_generated_id || defaultWallet.id);
+  return selectedWalletId.value === defaultId;
+});
+
 function handlePartySelect(party) {
   formParty.value = party.name;
   const partyId = party.sync_state?.client_generated_id || String(party.id);
diff --git a/components/WalletForm.vue b/components/WalletForm.vue
index 279c828..4732031 100644
--- a/components/WalletForm.vue
+++ b/components/WalletForm.vue
@@ -114,10 +114,11 @@
 </template>
 
 <script setup>
-import { ref, computed, watch } from 'vue';
+import { ref, computed, watch, onMounted } from 'vue';
 import IconPicker from './IconPicker.vue';
 import * as lucideIcons from 'lucide-vue-next';
 import { ImagePlus } from 'lucide-vue-next';
+import { useSharedData } from '@/composables/useSharedData';
 
 const props = defineProps({
   editingItem: {
@@ -128,6 +129,9 @@ const props = defineProps({
 
 const emit = defineEmits(['created', 'updated', 'close']);
 
+const sharedData = useSharedData();
+const defaultCurrency = computed(() => sharedData.getDefaultCurrency?.value || 'USD');
+
 const form = ref({
   name: '',
   icon: '',
@@ -153,6 +157,12 @@ const selectedIconComponent = computed(() => {
 
 const isEditing = computed(() => !!props.editingItem);
 
+onMounted(() => {
+  if (!isEditing.value && (!form.value.currency || form.value.currency.trim() === '')) {
+    form.value.currency = defaultCurrency.value;
+  }
+});
+
 // Populate form when editing
 watch(
   () => props.editingItem,
@@ -189,7 +199,14 @@ watch(
 );
 
 function resetForm() {
-  form.value = { name: '', icon: '', type: '', currency: '', balance: 0, description: '' };
+  form.value = {
+    name: '',
+    icon: '',
+    type: '',
+    currency: defaultCurrency.value,
+    balance: 0,
+    description: ''
+  };
   nameError.value = false;
   typeError.value = false;
   currencyError.value = false;
@@ -234,6 +251,10 @@ function validateForm() {
 }
 
 async function handleSubmit() {
+  if (!form.value.currency || form.value.currency.trim() === '') {
+    form.value.currency = defaultCurrency.value;
+  }
+
   // Validate all fields
   if (!validateForm()) {
     return;
diff --git a/components/settings/CollapsibleSection.vue b/components/settings/CollapsibleSection.vue
index 98097c8..aa3ade8 100644
--- a/components/settings/CollapsibleSection.vue
+++ b/components/settings/CollapsibleSection.vue
@@ -30,7 +30,7 @@ import { ChevronDown, ChevronUp, Edit, X } from 'lucide-vue-next';
 
 const props = defineProps({
   title: { type: String, required: true },
-  icon: { type: [Object, String], required: true },
+  icon: { type: [Object, String, Function], required: true },
   defaultOpen: { type: Boolean, default: true }
 });
 
diff --git a/components/settings/SettingsGeneral.vue b/components/settings/SettingsGeneral.vue
index a311bab..039f62e 100644
--- a/components/settings/SettingsGeneral.vue
+++ b/components/settings/SettingsGeneral.vue
@@ -3,22 +3,22 @@
     <div class="section-grid">
       <div class="form-group">
         <label class="form-label">Default Language</label>
-        <select v-if="isEditMode" v-model="language" class="form-select">
-          <option value="English">English</option>
-          <option value="Spanish">Spanish</option>
-          <option value="French">French</option>
+        <select v-if="isEditMode" v-model="languageCode" class="form-select">
+          <option v-for="lang in languages" :key="lang.code" :value="lang.code">
+            {{ lang.code.toUpperCase() }} - {{ lang.label }}
+          </option>
         </select>
-        <p v-else class="text-display">{{ language }}</p>
+        <p v-else class="text-display">{{ languageLabel }}</p>
       </div>
 
       <div class="form-group">
         <label class="form-label">Current Currency</label>
-        <select v-if="isEditMode" v-model="currency" class="form-select">
-          <option value="USD">USD ($) - US Dollar</option>
-          <option value="EUR">EUR (€) - Euro</option>
-          <option value="JPY">JPY (¥) - Japanese Yen</option>
+        <select v-if="isEditMode" v-model="currencyCode" class="form-select">
+          <option v-for="c in currencies" :key="c.code" :value="c.code">
+            {{ c.code }} - {{ c.label }}
+          </option>
         </select>
-        <p v-else class="text-display">{{ currency }}</p>
+        <p v-else class="text-display">{{ currencyLabel }}</p>
       </div>
     </div>
 
@@ -33,17 +33,41 @@
 </template>
 
 <script setup>
-import { ref, watch } from 'vue';
+import { ref, watch, onMounted, computed } from 'vue';
 import { Save } from 'lucide-vue-next';
+import configurationsApi from '@/services/api/configurationsApi';
+import { CONFIGURATION_KEYS } from '@/utils/configurationKeys';
+import { CURRENCIES } from '@/utils/currencies';
 
 const props = defineProps({
   isEditMode: { type: Boolean, default: false }
 });
 
-const language = ref('English');
-const currency = ref('USD');
+const languages = [
+  { code: 'en', label: 'English' },
+  { code: 'es', label: 'Español' },
+  { code: 'fr', label: 'Français' },
+  { code: 'de', label: 'Deutsch' },
+  { code: 'pt', label: 'Português' },
+  { code: 'it', label: 'Italiano' }
+];
+
+const currencies = CURRENCIES.map((c) => ({ code: c.code, label: c.name }));
+
+const languageCode = ref('en');
+const currencyCode = ref('USD');
 const message = ref('');
 
+const languageLabel = computed(() => {
+  const found = languages.find((l) => l.code === languageCode.value);
+  return found ? found.label : languageCode.value;
+});
+
+const currencyLabel = computed(() => {
+  const found = currencies.find((c) => c.code === currencyCode.value);
+  return found ? found.label : currencyCode.value;
+});
+
 watch(
   () => props.isEditMode,
   () => {
@@ -51,11 +75,48 @@ watch(
   }
 );
 
-const handleSave = () => {
-  message.value = 'General settings updated successfully!';
-  setTimeout(() => {
-    message.value = '';
-  }, 2000);
+onMounted(async () => {
+  try {
+    const res = await configurationsApi.fetchAll();
+    const items = res?.data || [];
+
+    const langItem = items.find((i) => i.key === CONFIGURATION_KEYS.LANGUAGE);
+    const curItem = items.find((i) => i.key === CONFIGURATION_KEYS.CURRENCY);
+
+    const extractCode = (val) => {
+      if (typeof val === 'string') return val;
+      if (val && typeof val === 'object' && 'code' in val) return val.code;
+      return null;
+    };
+
+    const langCode = extractCode(langItem?.value);
+    const curCode = extractCode(curItem?.value);
+
+    if (langCode) languageCode.value = langCode;
+    if (curCode) currencyCode.value = curCode;
+  } catch (e) {
+    console.error('Failed to load configurations', e);
+  }
+});
+
+const handleSave = async () => {
+  try {
+    await configurationsApi.update(CONFIGURATION_KEYS.LANGUAGE, {
+      value: languageCode.value,
+      type: 'string'
+    });
+    await configurationsApi.update(CONFIGURATION_KEYS.CURRENCY, {
+      value: currencyCode.value,
+      type: 'string'
+    });
+    message.value = 'General settings updated successfully!';
+  } catch (e) {
+    console.error('Failed to update general settings', e);
+  } finally {
+    setTimeout(() => {
+      message.value = '';
+    }, 2000);
+  }
 };
 </script>
 
diff --git a/components/settings/SettingsWallets.vue b/components/settings/SettingsWallets.vue
index da5ccd1..3b2a89e 100644
--- a/components/settings/SettingsWallets.vue
+++ b/components/settings/SettingsWallets.vue
@@ -3,12 +3,20 @@
     <div class="section-grid">
       <div class="form-group">
         <label class="form-label">Default Wallet</label>
-        <select v-if="isEditMode" v-model="wallet" class="form-select">
-          <option value="Main Wallet">Main Wallet</option>
-          <option value="Savings">Savings</option>
-          <option value="Credit Card">Credit Card</option>
+        <select v-if="isEditMode" v-model="walletId" class="form-select">
+          <option
+            v-for="w in wallets"
+            :key="w.id || w.sync_state?.client_generated_id || w.name"
+            :value="String(w.sync_state?.client_generated_id ?? w.id)"
+          >
+            {{ w.name }}
+            <template v-if="w.currency"> ({{ w.currency }})</template>
+          </option>
         </select>
-        <p v-else class="text-display">{{ wallet }}</p>
+        <div v-else class="wallet-display">
+          <p class="text-display">{{ walletLabel || '—' }}</p>
+          <span v-if="walletLabel" class="wallet-badge">Currently Selected</span>
+        </div>
       </div>
 
       <div class="form-group">
@@ -33,14 +41,20 @@
 </template>
 
 <script setup>
-import { ref, watch } from 'vue';
+import { ref, watch, computed, onMounted } from 'vue';
 import { Save } from 'lucide-vue-next';
+import { useSharedData } from '@/composables/useSharedData';
+import configurationsApi from '@/services/api/configurationsApi';
+import { CONFIGURATION_KEYS } from '@/utils/configurationKeys';
 
 const props = defineProps({
   isEditMode: { type: Boolean, default: false }
 });
 
-const wallet = ref('Main Wallet');
+const sharedData = useSharedData();
+const wallets = computed(() => sharedData.wallets.value);
+
+const walletId = ref('');
 const group = ref('Personal');
 const message = ref('');
 
@@ -51,11 +65,47 @@ watch(
   }
 );
 
-const handleSave = () => {
-  message.value = 'Wallet and group settings updated successfully!';
-  setTimeout(() => {
-    message.value = '';
-  }, 2000);
+const walletLabel = computed(() => {
+  if (!walletId.value) return '';
+  const w = wallets.value.find(
+    (x) =>
+      String(x.id) === walletId.value ||
+      String(x.sync_state?.client_generated_id || '') === walletId.value
+  );
+  return w ? w.name : walletId.value;
+});
+
+onMounted(async () => {
+  try {
+    await sharedData.loadWallets();
+    await sharedData.loadConfigurations();
+    const def = sharedData.getDefaultWallet.value;
+    if (def?.id != null) {
+      walletId.value = String(def.id);
+    }
+  } catch (e) {
+    console.error('Failed to load wallets/configurations for settings', e);
+  }
+});
+
+const handleSave = async () => {
+  try {
+    if (walletId.value) {
+      await configurationsApi.update(CONFIGURATION_KEYS.WALLET, {
+        value: walletId.value,
+        type: 'string'
+      });
+      // Refresh shared configurations so other parts of the app reflect the change immediately
+      await sharedData.loadConfigurations(true);
+    }
+    message.value = 'Wallet and group settings updated successfully!';
+  } catch (e) {
+    console.error('Failed to update wallet configuration', e);
+  } finally {
+    setTimeout(() => {
+      message.value = '';
+    }, 2000);
+  }
 };
 </script>
 
@@ -80,6 +130,32 @@ const handleSave = () => {
   font-weight: $font-medium;
 }
 
+.wallet-display {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+
+  .text-display {
+    margin: 0;
+  }
+
+  .wallet-badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba($primary, 0.1);
+    color: $primary;
+    font-size: 0.75rem;
+    font-weight: 700;
+    padding: 4px 10px;
+    border-radius: 4px;
+    width: fit-content;
+    letter-spacing: 0.5px;
+    text-transform: uppercase;
+    border: 1px solid $primary;
+  }
+}
+
 .inline-icon {
   width: 18px;
   height: 18px;
diff --git a/composables/useSharedData.ts b/composables/useSharedData.ts
index f4f6c33..6141933 100644
--- a/composables/useSharedData.ts
+++ b/composables/useSharedData.ts
@@ -4,9 +4,9 @@ import type { Category } from '~/types/category';
 import type { Party } from '~/types/party';
 import type { Wallet } from '~/types/wallet';
 import type { Group } from '~/services/api/groupsApi';
-import type { Configuration } from '~/services/api/configurationsApi';
 import { checkAuth } from '~/utils/auth';
 import { extractApiErrors } from '~/utils/apiErrors';
+import type { ConfigurationItem } from '~/types/configuration';
 
 /**
  * Shared data composable for centralized state management
@@ -18,7 +18,6 @@ const categories = ref<Category[]>([]);
 const parties = ref<Party[]>([]);
 const wallets = ref<Wallet[]>([]);
 const groups = ref<Group[]>([]);
-const configurations = ref<Configuration[]>([]);
 
 // Loading states
 const categoriesLoading = ref(false);
@@ -34,14 +33,15 @@ const walletsError = ref<string | null>(null);
 const groupsError = ref<string | null>(null);
 const configurationsError = ref<string | null>(null);
 
-// Cache timestamps for lightweight caching (30 seconds for dev, can increase in prod)
+// Cache timestamps for lightweight caching
 const categoriesLastFetched = ref<string | null>(null);
 const partiesLastFetched = ref<string | null>(null);
 const walletsLastFetched = ref<string | null>(null);
 const groupsLastFetched = ref<string | null>(null);
 const configurationsLastFetched = ref<string | null>(null);
+const configurationsMap = ref<Record<string, any> | null>(null);
 
-const CACHE_DURATION = 30 * 1000; // 30 seconds
+const CACHE_DURATION = 5 * 60 * 1000; // 5 minutes
 
 // Helper function to deduplicate arrays by ID
 function deduplicateById<T extends { id: number }>(items: T[]): T[] {
@@ -122,6 +122,46 @@ export const useSharedData = () => {
     }
   );
 
+  const loadConfigurations = async (forceReload = false) => {
+    if (!forceReload && configurationsMap.value && isCacheValid(configurationsLastFetched.value)) {
+      return configurationsMap.value;
+    }
+
+    if (configurationsLoading.value) {
+      while (configurationsLoading.value) {
+        await new Promise((resolve) => setTimeout(resolve, 50));
+      }
+      return configurationsMap.value;
+    }
+
+    if (!checkAuth()) {
+      configurationsLoading.value = false;
+      return configurationsMap.value;
+    }
+
+    configurationsLoading.value = true;
+    configurationsError.value = null;
+
+    try {
+      const response = await api.configurations.fetchAll();
+      const items: ConfigurationItem[] = response?.data || [];
+      const map: Record<string, any> = {};
+      for (const item of items) {
+        map[item.key] = item.value;
+      }
+      configurationsMap.value = map;
+      configurationsLastFetched.value = new Date().toISOString();
+      return map;
+    } catch (err) {
+      const errorMsg = extractApiErrors(err);
+      configurationsError.value = errorMsg;
+      console.error('Error loading configurations:', errorMsg);
+      throw err;
+    } finally {
+      configurationsLoading.value = false;
+    }
+  };
+
   const loadParties = createDataLoader(
     'parties',
     parties,
@@ -149,15 +189,6 @@ export const useSharedData = () => {
     () => api.groups.fetchAll()
   );
 
-  const loadConfigurations = createDataLoader(
-    'configurations',
-    configurations,
-    configurationsLoading,
-    configurationsError,
-    configurationsLastFetched,
-    () => api.configurations.fetchAll()
-  );
-
   const loadAllData = async (forceReload = false) => {
     try {
       await Promise.all([
@@ -183,26 +214,74 @@ export const useSharedData = () => {
   );
 
   const getDefaultGroup = computed(() => {
-    const config = configurations.value.find((c) => c.key === 'default-group');
-    if (config?.value) {
-      const group = groups.value.find((g) => g.id === parseInt(config.value));
+    const map = configurationsMap.value || {};
+    const configured = map['default-group'];
+    if (configured) {
+      const groupId = typeof configured === 'object' ? configured.id : configured;
+      const group = groups.value.find((g) => g.id === parseInt(groupId));
       if (group) return group;
     }
     return groups.value.length > 0 ? groups.value[0] : null;
   });
 
+  // Default wallet from configurations (fallback to heuristic)
   const getDefaultWallet = computed(() => {
-    const config = configurations.value.find((c) => c.key === 'default-wallet');
-    if (config?.value) {
-      const wallet = wallets.value.find((w) => w.id === parseInt(config.value));
-      if (wallet) return wallet;
+    const map = configurationsMap.value || {};
+    const configured = map['default-wallet'];
+
+    // Try to resolve wallet id from config
+    const resolveConfiguredWalletId = (): string | null => {
+      if (!configured) return null;
+      if (typeof configured === 'string' || typeof configured === 'number')
+        return String(configured);
+      if (configured && typeof configured === 'object') {
+        if (
+          'id' in configured &&
+          (typeof configured.id === 'string' || typeof configured.id === 'number')
+        ) {
+          return String(configured.id);
+        }
+        if (
+          'walletId' in configured &&
+          (typeof configured.walletId === 'string' || typeof configured.walletId === 'number')
+        ) {
+          return String(configured.walletId);
+        }
+        if ('name' in configured && configured.name) {
+          const byName = wallets.value.find(
+            (w) => w.name.toLowerCase() === String(configured.name).toLowerCase()
+          );
+          if (byName) return String(byName.id);
+        }
+      }
+      return null;
+    };
+
+    const configuredId = resolveConfiguredWalletId();
+    if (configuredId) {
+      const byId = wallets.value.find(
+        (w) =>
+          String(w.id) === configuredId ||
+          String(w.sync_state?.client_generated_id || '') === configuredId
+      );
+      if (byId) return byId;
     }
-    return wallets.value.length > 0 ? wallets.value[0] : null;
+
+    return null;
   });
 
+  // Default currency prefers configuration; fallback to default wallet currency or 'USD'
   const getDefaultCurrency = computed(() => {
-    const config = configurations.value.find((c) => c.key === 'default-currency');
-    return config?.value || getDefaultWallet.value?.currency || 'USD';
+    const map = configurationsMap.value || {};
+    const configured = map['default-currency'];
+    const extractCode = (val: any): string | null => {
+      if (!val) return null;
+      if (typeof val === 'string') return val;
+      if (typeof val === 'object' && 'code' in val) return String(val.code);
+      return null;
+    };
+    const fromConfig = extractCode(configured);
+    return fromConfig || getDefaultWallet.value?.currency || 'USD';
   });
 
   // Category management functions
@@ -274,7 +353,7 @@ export const useSharedData = () => {
     parties.value = [];
     wallets.value = [];
     groups.value = [];
-    configurations.value = [];
+    configurationsMap.value = null;
 
     categoriesLoading.value = false;
     partiesLoading.value = false;
@@ -303,7 +382,7 @@ export const useSharedData = () => {
     parties: readonly(parties),
     wallets: readonly(wallets),
     groups: readonly(groups),
-    configurations: readonly(configurations),
+    configurationsMap: readonly(configurationsMap),
 
     // Loading states
     categoriesLoading: readonly(categoriesLoading),
@@ -319,6 +398,13 @@ export const useSharedData = () => {
     groupsError: readonly(groupsError),
     configurationsError: readonly(configurationsError),
 
+    // Last fetch timestamps
+    categoriesLastFetched: readonly(categoriesLastFetched),
+    partiesLastFetched: readonly(partiesLastFetched),
+    walletsLastFetched: readonly(walletsLastFetched),
+    groupsLastFetched: readonly(groupsLastFetched),
+    configurationsLastFetched: readonly(configurationsLastFetched),
+
     // Computed getters
     getIncomeCategories,
     getExpenseCategories,
diff --git a/composables/useTransactions.ts b/composables/useTransactions.ts
index 49e8765..e0e4979 100644
--- a/composables/useTransactions.ts
+++ b/composables/useTransactions.ts
@@ -130,13 +130,14 @@ export const useTransactions = () => {
         await loadDependencies();
       }
 
-      // Transform to API format (pass parties, wallets, and default group for ID lookup)
+      // Transform to API format (pass parties, wallets, and defaults for ID lookup)
       const payload = transactionMapper.toApi(
         transaction,
         sharedData.parties.value,
         sharedData.wallets.value,
         undefined,
-        sharedData.getDefaultGroup.value
+        sharedData.getDefaultGroup.value,
+        sharedData.getDefaultWallet.value
       );
 
       console.log('Payload summary', {
@@ -221,7 +222,8 @@ export const useTransactions = () => {
         sharedData.parties.value,
         sharedData.wallets.value,
         undefined,
-        sharedData.getDefaultGroup.value
+        sharedData.getDefaultGroup.value,
+        sharedData.getDefaultWallet.value
       );
       const updated = await api.transactions.update(numericId, payload);
 
diff --git a/middleware/auth.ts b/middleware/auth.ts
index 9110edd..243cc70 100644
--- a/middleware/auth.ts
+++ b/middleware/auth.ts
@@ -1,7 +1,44 @@
-export default defineNuxtRouteMiddleware((_to, _from) => {
+import { CONFIGURATION_KEYS } from '~/utils/configurationKeys';
+
+// Track if we've done the initial config check this session
+let initialCheckDone = false;
+
+export default defineNuxtRouteMiddleware(async (to, _from) => {
   const { isAuthenticated } = useAuth();
+  const sharedData = useSharedData();
 
   if (!isAuthenticated.value) {
+    initialCheckDone = false;
     return navigateTo('/login');
   }
+
+  try {
+    // Only force reload on first navigation after login or if cache is empty
+    const forceReload = !initialCheckDone || !sharedData.configurationsMap.value;
+    const configurations = await sharedData.loadConfigurations(forceReload);
+    initialCheckDone = true;
+
+    const isOnboardingComplete = !!configurations?.[CONFIGURATION_KEYS.ONBOARDING_COMPLETE];
+
+    if (!isOnboardingComplete) {
+      if (to.path !== '/onboarding') {
+        return navigateTo('/onboarding');
+      }
+      return;
+    }
+
+    if (isOnboardingComplete && to.path === '/onboarding') {
+      return navigateTo('/dashboard');
+    }
+  } catch (error) {
+    console.error('Failed to load configurations in auth middleware:', error);
+    // On error, allow navigation but skip onboarding check
+    // This prevents the app from breaking if the API is temporarily unavailable
+    initialCheckDone = true;
+  }
 });
+
+// Export reset function for use during logout
+export const resetAuthMiddlewareState = () => {
+  initialCheckDone = false;
+};
diff --git a/pages/ai-insights.vue b/pages/ai-insights.vue
index d6890c9..b89d04f 100644
--- a/pages/ai-insights.vue
+++ b/pages/ai-insights.vue
@@ -1,32 +1,22 @@
 <template>
-  <div class="settings-layout">
-    <TSidebar />
-    <TNavbar />
-    <div class="settings-content">
-      <div class="settings-content-card">
-        <div class="settings-page">
-          <div class="settings-header">
-            <Bot class="header-icon" />
-            <h1>AI Insights</h1>
-          </div>
+  <div class="ai-insights-page">
+    <div class="page-header">
+      <Bot class="header-icon" />
+      <h1>AI Insights</h1>
+    </div>
 
-          <div class="ai-grid">
-            <AIChat />
-          </div>
-        </div>
-      </div>
+    <div class="ai-grid">
+      <AIChat />
     </div>
   </div>
 </template>
 
 <script setup>
 import { Bot } from 'lucide-vue-next';
-import TSidebar from '@/components/TSidebar.vue';
-import TNavbar from '@/components/TNavbar.vue';
 import AIChat from '@/components/ai/AIChat.vue';
 
 definePageMeta({
-  layout: 'default',
+  layout: 'dashboard',
   middleware: 'auth'
 });
 </script>
@@ -34,76 +24,11 @@ definePageMeta({
 <style lang="scss" scoped>
 @use '@/assets/scss/_variables.scss' as *;
 
-.settings-layout {
-  --sidebar-width: min(300px, 30vw);
-  --sidebar-min-width: 200px;
-  background-color: $bg-gray;
-  min-height: 100vh;
-}
-
-.settings-content {
-  margin-left: var(--sidebar-width, 300px);
-  transition: margin-left 0.3s ease;
-  width: calc(100% - var(--sidebar-width, 300px));
-  overflow-x: hidden;
-  padding: 6rem 1rem 1rem;
-
-  @media (max-width: $breakpoint-lg) {
-    padding: 5.5rem 1rem 1rem;
-  }
-
-  @media (max-width: $breakpoint-md) {
-    width: 100%;
-    margin-left: 0;
-    padding: 5rem 0.75rem 1rem;
-  }
-
-  @media (max-width: $breakpoint-sm) {
-    padding: 4.5rem 0.5rem 1rem;
-  }
-
-  @media (max-width: 480px) {
-    padding: 4rem 0.25rem 1rem;
-  }
-}
-
-.settings-content-card {
-  min-height: calc(100vh - 120px);
-  background-color: $bg-white;
-  border-radius: 2rem;
-  border: 1px solid $bg-gray;
-  padding: 2rem 1rem;
-  box-sizing: border-box;
-  overflow: hidden;
-
-  @media (max-width: $breakpoint-md) {
-    border-radius: 1.5rem;
-    padding: 1.5rem 0.75rem;
-    min-height: calc(100vh - 100px);
-  }
-
-  @media (max-width: $breakpoint-sm) {
-    border-radius: 1rem;
-    padding: 1rem 0.5rem;
-    min-height: calc(100vh - 80px);
-  }
-
-  @media (max-width: 480px) {
-    border-radius: 0.75rem;
-    padding: 0.75rem 0.25rem;
-  }
-}
-
-.settings-page {
-  width: 95%;
-  margin: auto;
-
-  @media (max-width: $breakpoint-sm) {
-    width: 100%;
-  }
+.ai-insights-page {
+  width: 100%;
 }
 
-.settings-header {
+.page-header {
   display: flex;
   align-items: center;
   gap: 0.75rem;
diff --git a/pages/auth/[driver]/callback.vue b/pages/auth/[driver]/callback.vue
index e06aa35..f447784 100644
--- a/pages/auth/[driver]/callback.vue
+++ b/pages/auth/[driver]/callback.vue
@@ -30,7 +30,7 @@ const handleCallback = async (code) => {
       userCookie.value = response.data.user;
       tokenCookie.value = response.data.token;
 
-      router.push('/dashboard');
+      router.push('/onboarding');
     }
   } catch (error) {
     console.error(`Failed to handle ${driver} callback:`, error);
diff --git a/pages/login.vue b/pages/login.vue
index 80e152f..7b4c2cb 100644
--- a/pages/login.vue
+++ b/pages/login.vue
@@ -7,6 +7,7 @@ import { Eye, EyeOff } from 'lucide-vue-next';
 import { useAuth } from '@/composables/useAuth';
 import AuthDivider from '@/components/auth/AuthDivider.vue';
 import AuthSocialLogin from '@/components/auth/AuthSocialLogin.vue';
+import { CONFIGURATION_KEYS } from '@/utils/configurationKeys';
 
 definePageMeta({
   layout: 'auth',
@@ -24,6 +25,7 @@ const loginError = ref('');
 const router = useRouter();
 const route = useRoute();
 const { login } = useAuth();
+const sharedData = useSharedData();
 
 watch(
   form,
@@ -38,14 +40,27 @@ watch(
 const handleSubmit = async () => {
   loading.value = true;
   loginError.value = '';
+  // First attempt login
   try {
     await login(form.value);
-    router.push('/dashboard');
   } catch {
+    // Login failed – show error and stop further processing
     loginError.value = 'Invalid credentials. Please try again.';
-  } finally {
     loading.value = false;
+    return;
   }
+
+  // Login succeeded – now check onboarding status (errors here should not affect login error)
+  let isOnboardingComplete = false;
+  try {
+    const configs = await sharedData.loadConfigurations();
+    isOnboardingComplete = !!configs?.[CONFIGURATION_KEYS.ONBOARDING_COMPLETE];
+  } catch (e) {
+    console.warn('Failed to load onboarding config', e);
+  }
+
+  router.push(isOnboardingComplete ? '/dashboard' : '/onboarding');
+  loading.value = false;
 };
 
 const { showPassword, togglePassword } = usePasswordToggle();
diff --git a/pages/onboarding.vue b/pages/onboarding.vue
index 73b1c6f..8dcec68 100644
--- a/pages/onboarding.vue
+++ b/pages/onboarding.vue
@@ -71,56 +71,77 @@
             <CreditCardIcon />
           </div>
           <div class="step-info">
-            <h2 class="step-title">Set up your wallet and currency</h2>
+            <h2 class="step-title">Set up your wallet</h2>
             <p class="step-description">
-              Configure your default wallet and currency. Your wallet currency and default currency
-              should match for accurate tracking.
+              Configure your default wallet and currency for tracking transactions.
             </p>
           </div>
           <div class="step-form">
             <div class="wallet-currency-setup">
-              <div class="setup-warning">
-                <div class="warning-icon">💡</div>
-                <p class="warning-text">
-                  We've created a default wallet for you. You can use it, rename it, or create a new
-                  one.
-                </p>
-              </div>
-
-              <div class="setup-sections">
-                <div class="setup-section">
-                  <h3>Wallet setup</h3>
-                  <div class="wallet-options">
-                    <div class="wallet-option">
+              <div class="wallet-currency-columns">
+                <div class="wallet-column">
+                  <label class="column-label">Default wallet</label>
+                  <div class="wallet-cards">
+                    <div
+                      class="wallet-card"
+                      :class="{ selected: walletChoice === 'use-default' }"
+                      @click="walletChoice = 'use-default'"
+                    >
                       <input
-                        id="use-default"
                         v-model="walletChoice"
                         type="radio"
                         value="use-default"
+                        class="wallet-radio"
+                        @click.stop
                       />
-                      <label for="use-default">Use default wallet</label>
+                      <div class="wallet-card-content">
+                        <span class="wallet-card-title">Use Main Wallet</span>
+                        <span class="wallet-card-desc">Keep the default wallet name</span>
+                      </div>
                     </div>
-                    <div class="wallet-option">
+
+                    <div
+                      class="wallet-card"
+                      :class="{ selected: walletChoice === 'rename-default' }"
+                      @click="walletChoice = 'rename-default'"
+                    >
                       <input
-                        id="rename-default"
                         v-model="walletChoice"
                         type="radio"
                         value="rename-default"
+                        class="wallet-radio"
+                        @click.stop
                       />
-                      <label for="rename-default">Rename default wallet</label>
+                      <div class="wallet-card-content">
+                        <span class="wallet-card-title">Rename wallet</span>
+                        <span class="wallet-card-desc">Give it a custom name</span>
+                      </div>
                     </div>
-                    <div class="wallet-option">
+
+                    <div
+                      class="wallet-card"
+                      :class="{ selected: walletChoice === 'create-new' }"
+                      @click="walletChoice = 'create-new'"
+                    >
                       <input
-                        id="create-new"
                         v-model="walletChoice"
                         type="radio"
                         value="create-new"
+                        class="wallet-radio"
+                        @click.stop
                       />
-                      <label for="create-new">Create new wallet</label>
+                      <div class="wallet-card-content">
+                        <span class="wallet-card-title">Create new wallet</span>
+                        <span class="wallet-card-desc">Start fresh with a new wallet</span>
+                      </div>
                     </div>
                   </div>
 
-                  <div v-if="walletChoice === 'rename-default'" class="wallet-name-input">
+                  <div
+                    v-if="walletChoice === 'rename-default' || walletChoice === 'create-new'"
+                    class="wallet-extra-field"
+                  >
+                    <label class="field-label">Wallet name</label>
                     <input
                       v-model="newWalletName"
                       type="text"
@@ -129,13 +150,8 @@
                     />
                   </div>
 
-                  <div v-if="walletChoice === 'create-new'" class="new-wallet-form">
-                    <input
-                      v-model="newWalletName"
-                      type="text"
-                      placeholder="Wallet name"
-                      class="wallet-input"
-                    />
+                  <div v-if="walletChoice === 'create-new'" class="wallet-extra-field">
+                    <label class="field-label">Wallet currency</label>
                     <select v-model="newWalletCurrency" class="currency-select">
                       <option value="">Select currency</option>
                       <option
@@ -149,8 +165,8 @@
                   </div>
                 </div>
 
-                <div class="setup-section">
-                  <h3>Default currency</h3>
+                <div class="currency-column">
+                  <label class="column-label">Default currency</label>
                   <select v-model="selectedCurrency" class="currency-select">
                     <option
                       v-for="currency in availableCurrencies"
@@ -160,9 +176,7 @@
                       {{ currency.code }} - {{ currency.name }}
                     </option>
                   </select>
-                  <p class="currency-note">
-                    This will be your default currency for all transactions.
-                  </p>
+                  <p class="currency-note">Used for displaying totals and reports.</p>
                 </div>
               </div>
 
@@ -179,8 +193,46 @@
           </div>
         </div>
 
-        <!-- Step 3: All Set -->
-        <div v-if="currentStep === 3" class="step-content completion-step">
+        <!-- Step 3: Categories Setup -->
+        <div v-if="currentStep === 3" class="step-content">
+          <div class="step-icon">
+            <TagIcon />
+          </div>
+          <div class="step-info">
+            <h2 class="step-title">Set up categories</h2>
+            <p class="step-description">Categories help you organize and track your spending.</p>
+          </div>
+          <div class="step-form">
+            <div class="categories-setup">
+              <div
+                class="categories-card"
+                :class="{ selected: wantDefaultCategories }"
+                @click="wantDefaultCategories = !wantDefaultCategories"
+              >
+                <div class="categories-card-header">
+                  <input
+                    v-model="wantDefaultCategories"
+                    type="checkbox"
+                    class="categories-checkbox"
+                    @click.stop
+                  />
+                  <span class="categories-card-title">Add default categories</span>
+                </div>
+                <p class="categories-card-description">
+                  We'll create common categories like Salary, Food & Dining, Transportation,
+                  Entertainment, and more. You can customize them later.
+                </p>
+              </div>
+
+              <div class="step-actions">
+                <button class="primary-btn" @click="handleCategoriesSetup">Continue</button>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Step 4: All Set -->
+        <div v-if="currentStep === 4" class="step-content completion-step">
           <div class="completion-icon">
             <CheckCircleIcon />
           </div>
@@ -214,11 +266,15 @@
       </div>
 
       <div class="onboarding-footer">
-        <button v-if="currentStep > 1 && currentStep < 4" class="nav-btn" @click="previousStep">
+        <button
+          v-if="currentStep > 1 && currentStep < totalSteps"
+          class="nav-btn"
+          @click="previousStep"
+        >
           ← Previous
         </button>
         <div class="spacer" />
-        <button v-if="currentStep < 3" class="nav-btn skip" @click="skipStep">
+        <button v-if="currentStep < totalSteps" class="nav-btn skip" @click="skipStep">
           Skip for now →
         </button>
       </div>
@@ -226,36 +282,46 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { ref, computed, onMounted } from 'vue';
-import { useRouter } from 'nuxt/app';
-import { CreditCardIcon, ArrowsRightLeftIcon, CheckCircleIcon } from '@heroicons/vue/24/outline';
+import { onBeforeRouteLeave } from 'vue-router';
+import {
+  CreditCardIcon,
+  ArrowsRightLeftIcon,
+  CheckCircleIcon,
+  TagIcon
+} from '@heroicons/vue/24/outline';
 import { useSharedData } from '@/composables/useSharedData';
 import { useNotifications } from '@/composables/useNotifications';
+import { useWallets } from '@/composables/useWallets';
+import configurationsApi from '@/services/api/configurationsApi';
+import { CONFIGURATION_KEYS } from '@/utils/configurationKeys';
+import { CURRENCIES } from '@/utils/currencies';
+import { categoriesApi } from '@/services/api/categoriesApi';
 
 definePageMeta({
   layout: 'onboarding',
   middleware: 'auth'
 });
 
-const router = useRouter();
 const sharedData = useSharedData();
 const { showSuccess } = useNotifications();
+const { createWallet, updateWallet } = useWallets();
 
 const currentStep = ref(1);
-const totalSteps = 3;
+const totalSteps = 4;
 
 const progressPercentage = computed(() => (currentStep.value / totalSteps) * 100);
 
 // Data from shared state
 const incomeCategories = computed(() => sharedData.getIncomeCategories?.value || []);
 const expenseCategories = computed(() => sharedData.getExpenseCategories?.value || []);
-const wallets = computed(() => sharedData.getWallets?.value || []);
+const wallets = computed(() => sharedData.wallets?.value || []);
 const walletCount = computed(() => wallets.value.length);
 const categoryCount = computed(
   () => incomeCategories.value.length + expenseCategories.value.length
 );
-const transactionCount = computed(() => sharedData.getTransactions?.value?.length || 0);
+const transactionCount = computed(() => 0);
 
 // Language setup
 const selectedLanguage = ref('en');
@@ -273,15 +339,9 @@ const walletChoice = ref('use-default');
 const newWalletName = ref('');
 const newWalletCurrency = ref('');
 const selectedCurrency = ref('USD');
+const wantDefaultCategories = ref(true);
 
-const availableCurrencies = [
-  { code: 'USD', name: 'US Dollar' },
-  { code: 'EUR', name: 'Euro' },
-  { code: 'GBP', name: 'British Pound' },
-  { code: 'JPY', name: 'Japanese Yen' },
-  { code: 'CAD', name: 'Canadian Dollar' },
-  { code: 'AUD', name: 'Australian Dollar' }
-];
+const availableCurrencies = CURRENCIES;
 
 const isWalletCurrencySetupValid = computed(() => {
   if (!selectedCurrency.value) return false;
@@ -309,54 +369,205 @@ const previousStep = () => {
   }
 };
 
-const skipStep = () => {
-  nextStep();
+const ensureOnboardingComplete = async () => {
+  const completeRes = await configurationsApi
+    .create({
+      key: CONFIGURATION_KEYS.ONBOARDING_COMPLETE,
+      value: { completedAt: new Date().toISOString() },
+      type: 'json'
+    })
+    .catch(() => null);
+  if (!completeRes) {
+    await configurationsApi
+      .update(CONFIGURATION_KEYS.ONBOARDING_COMPLETE, {
+        value: { completedAt: new Date().toISOString() },
+        type: 'json'
+      })
+      .catch(() => null);
+  }
+  if (typeof globalThis !== 'undefined') {
+    globalThis.localStorage.setItem('onboarding-completed', 'true');
+  }
+
+  // Refresh configurations cache to ensure middleware sees the update
+  await sharedData.loadConfigurations(true).catch(() => null);
+};
+
+const skipStep = async () => {
+  try {
+    await ensureOnboardingComplete();
+    await navigateTo('/dashboard', { replace: true });
+  } catch (e) {
+    console.error('Error in skipStep:', e);
+  }
 };
 
 const handleLanguageSelection = () => {
   if (!selectedLanguage.value) return;
-
-  showSuccess(
-    'Language Set!',
-    `Language changed to ${availableLanguages.find((l) => l.code === selectedLanguage.value)?.name}.`
-  );
   nextStep();
 };
 
 const handleWalletCurrencySetup = () => {
   if (!isWalletCurrencySetupValid.value) return;
+  nextStep();
+};
 
-  let message = 'Settings saved successfully!';
+const handleCategoriesSetup = () => {
+  nextStep();
+};
 
-  if (walletChoice.value === 'rename-default') {
-    message = `Default wallet renamed to "${newWalletName.value}" and currency set to ${selectedCurrency.value}.`;
+const completOnboarding = async () => {
+  // Save all user selections at the end of onboarding
+  const configurationsToSave = [];
+
+  // Save language if selected
+  if (selectedLanguage.value) {
+    configurationsToSave.push({
+      key: CONFIGURATION_KEYS.LANGUAGE,
+      value: selectedLanguage.value,
+      type: 'string'
+    });
+  }
+
+  // Save currency if selected
+  if (selectedCurrency.value) {
+    configurationsToSave.push({
+      key: CONFIGURATION_KEYS.CURRENCY,
+      value: selectedCurrency.value,
+      type: 'string'
+    });
+  }
+
+  // Ensure a wallet exists and persist default-wallet
+  let targetWalletId: string | null = null;
+
+  if (walletChoice.value === 'use-default' || walletChoice.value === 'rename-default') {
+    let existing = sharedData.getDefaultWallet.value || wallets.value[0];
+
+    if (!existing) {
+      const name =
+        walletChoice.value === 'rename-default' && newWalletName.value.trim().length > 0
+          ? newWalletName.value.trim()
+          : 'Main Wallet';
+
+      const createdRes = await createWallet({
+        name,
+        type: 'cash',
+        description: 'Created during onboarding',
+        currency: selectedCurrency.value
+      }).catch(() => ({
+        data: null
+      }));
+      const created = createdRes?.data as any;
+      if (created) {
+        existing = created;
+      }
+    } else if (
+      walletChoice.value === 'rename-default' &&
+      newWalletName.value.trim().length > 0 &&
+      existing.name !== newWalletName.value.trim()
+    ) {
+      await updateWallet(existing.id, { name: newWalletName.value.trim() }).catch(() => null);
+    }
+
+    if (existing) {
+      targetWalletId = String(existing.id);
+    }
   } else if (walletChoice.value === 'create-new') {
-    message = `New wallet "${newWalletName.value}" created with ${newWalletCurrency.value} currency.`;
-  } else {
-    message = `Default wallet configured with ${selectedCurrency.value} currency.`;
+    const name = newWalletName.value.trim();
+
+    if (name && newWalletCurrency.value) {
+      const createdRes = await createWallet({
+        name,
+        type: 'cash',
+        description: 'Created during onboarding',
+        currency: newWalletCurrency.value
+      }).catch(() => ({
+        data: null
+      }));
+      const created = createdRes?.data as any;
+      if (created) {
+        targetWalletId = String(created.id);
+      }
+    }
   }
 
-  showSuccess('Setup Complete!', message);
-  nextStep();
-};
+  if (targetWalletId) {
+    configurationsToSave.push({
+      key: CONFIGURATION_KEYS.WALLET,
+      value: targetWalletId,
+      type: 'string'
+    });
+  }
+
+  // Save all configurations
+  for (const config of configurationsToSave) {
+    const createRes = await configurationsApi.create(config).catch(() => null);
+    if (!createRes) {
+      await configurationsApi.update(config.key, config).catch(() => null);
+    }
+  }
+
+  // Create default categories if user opted in
+  if (wantDefaultCategories.value) {
+    await categoriesApi.seedDefaults().catch((e) => {
+      console.error('Failed to seed default categories:', e);
+    });
+  }
 
-const completOnboarding = () => {
+  // Mark onboarding as complete
+  const completeRes = await configurationsApi
+    .create({
+      key: CONFIGURATION_KEYS.ONBOARDING_COMPLETE,
+      value: { completedAt: new Date().toISOString() },
+      type: 'json'
+    })
+    .catch(() => null);
+
+  if (!completeRes) {
+    await configurationsApi
+      .update(CONFIGURATION_KEYS.ONBOARDING_COMPLETE, {
+        value: { completedAt: new Date().toISOString() },
+        type: 'json'
+      })
+      .catch(() => null);
+  }
+
+  showSuccess('Welcome to Trakli!', "You're ready to take control of your finances!");
+
+  // Always proceed with navigation
   localStorage.setItem('onboarding-completed', 'true');
   localStorage.removeItem('onboarding-step');
-  showSuccess('Welcome to Trakli!', "You're ready to take control of your finances!");
-  router.push('/dashboard');
+  // Refresh caches so default wallet/currency reflect immediately after onboarding
+  await Promise.all([
+    sharedData.loadConfigurations(true).catch(() => {}),
+    sharedData.loadWallets(true).catch(() => {})
+  ]);
+  await navigateTo('/dashboard', { replace: true });
 };
 
 onMounted(() => {
   const savedStep = localStorage.getItem('onboarding-step');
   if (savedStep) {
-    currentStep.value = parseInt(savedStep) + 1;
+    currentStep.value = Number.parseInt(savedStep) + 1;
     localStorage.removeItem('onboarding-step');
   }
 
   sharedData.loadCategories();
   sharedData.loadWallets();
 });
+
+onBeforeRouteLeave(() => {
+  // Mark onboarding complete synchronously to avoid layout transition issues
+  if (typeof globalThis !== 'undefined') {
+    const completed = globalThis.localStorage.getItem('onboarding-completed') === 'true';
+    if (!completed) {
+      globalThis.localStorage.setItem('onboarding-completed', 'true');
+      // Fire and forget - don't await to avoid blocking navigation
+      ensureOnboardingComplete().catch(() => {});
+    }
+  }
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/pages/register.vue b/pages/register.vue
index 21aae57..da759cd 100644
--- a/pages/register.vue
+++ b/pages/register.vue
@@ -1,6 +1,5 @@
 <script setup>
-import { ref, computed } from 'vue';
-import { useRouter } from '#imports';
+import { ref, computed, nextTick } from 'vue';
 import { useAuth } from '@/composables/useAuth';
 import { useApi } from '@/composables/useApi';
 import { usePasswordToggle } from '@/composables/usePasswordToggle';
@@ -16,7 +15,6 @@ definePageMeta({
   middleware: 'guest'
 });
 
-const router = useRouter();
 const { register } = useAuth();
 const api = useApi();
 
@@ -122,7 +120,8 @@ const handleSubmit = async () => {
     delete payload.contact;
 
     await register(payload);
-    router.push('/dashboard');
+    await nextTick();
+    await navigateTo('/onboarding');
   } catch (error) {
     if (error.response && error.response._data && Array.isArray(error.response._data.errors)) {
       const flattenedErrors = error.response._data.errors.reduce(
diff --git a/pages/reports.vue b/pages/reports.vue
index d0e9742..48fa480 100644
--- a/pages/reports.vue
+++ b/pages/reports.vue
@@ -1,199 +1,152 @@
 <template>
-  <div class="settings-layout">
-    <TSidebar />
-    <TNavbar />
-    <div class="settings-content">
-      <div class="settings-content-card">
-        <div class="settings-page">
-          <div class="page-header-wrapper">
-            <div class="page-header">
-              <div class="page-header-left">
-                <h1 class="page-title">Financial Reports</h1>
-                <p class="page-subtitle">
-                  {{ pageSubtitle }}
-                </p>
-              </div>
-              <div class="page-header-right">
-                <button
-                  v-for="period in availablePeriods.slice(0, 3)"
-                  :key="period.value"
-                  class="chip"
-                  :class="{ 'chip--primary': currentPeriod === period.value }"
-                  @click="setPeriod(period.value)"
-                >
-                  {{ period.label }}
-                </button>
-                <button class="chip">
-                  <span>Custom</span>
-                  <ChevronDown class="chip-icon" />
-                </button>
-                <button class="chip chip--report">
-                  <FileText class="chip-icon" />
-                  <span>Report</span>
-                </button>
-              </div>
-            </div>
-          </div>
-
-          <div v-if="showReportMessage" class="alert alert--success">
-            <p class="alert-title">Report Generated!</p>
-            <p>
-              Your financial report for June 2024 has been successfully generated and is available
-              for download.
-            </p>
-          </div>
-
-          <div class="kpis">
-            <KpiCard
-              label="Total Income"
-              :value="isLoading ? 'Loading...' : formatCompactCurrency(kpis.totalIncome, currency)"
-            />
-            <KpiCard
-              label="Avg. Monthly Income"
-              :value="
-                isLoading
-                  ? 'Loading...'
-                  : formatCompactCurrency(Math.round(kpis.averageMonthlyIncome), currency)
-              "
-            />
-            <KpiCard
-              label="Top Income Source"
-              :value="isLoading ? 'Loading...' : kpis.topIncomeSource"
-            />
-            <KpiCard
-              label="% Growth vs Last Period"
-              :value="isLoading ? 'Loading...' : `${kpis.growthPercentage}%`"
-              :value-class="kpis.growthPercentage >= 0 ? 'is-positive' : 'is-negative'"
-            />
-          </div>
-
-          <div class="content-layout">
-            <div class="charts-column">
-              <DonutChartCard
-                :data="sourceBreakdown"
-                :total="kpis.totalIncome"
-                :currency="currency"
-              >
-                <template #note>
-                  <span class="bold">AI Insight:</span>
-                  {{
-                    statistics?.income_insights?.top_sources?.length > 1
-                      ? `${Math.round(statistics.income_insights.top_sources[0]?.percentage || 0)}% of your income comes from ${statistics.income_insights.top_sources[0]?.party || 'your top source'}.`
-                      : 'Diversify your income sources to reduce risk.'
-                  }}
-                </template>
-              </DonutChartCard>
-              <LineChartCard :data="lineData" />
-            </div>
-
-            <div class="insights-column">
-              <NarrativeInsights class="insights-card">
-                <span v-if="!isLoading && statistics">
-                  Your income
-                  <strong
-                    >{{ kpis.growthPercentage >= 0 ? 'grew' : 'declined' }}
-                    {{ Math.abs(kpis.growthPercentage) }}%</strong
-                  >
-                  this period{{
-                    kpis.topIncomeSource !== 'N/A'
-                      ? `, driven mainly by ${kpis.topIncomeSource}`
-                      : ''
-                  }}.
-                  {{
-                    statistics.income_insights?.top_sources?.length > 0
-                      ? `You have ${statistics.income_insights.top_sources.length} active income sources.`
-                      : 'Consider diversifying your income sources.'
-                  }}
-                  {{
-                    statistics.expense_insights?.budget_analysis?.savings_rate > 0.2
-                      ? ' Your savings rate is healthy.'
-                      : ' Focus on improving your savings rate.'
-                  }}
-                </span>
-                <span v-else> Loading insights... </span>
-              </NarrativeInsights>
-
-              <ForecastsPanel
-                :total-income="kpis.totalIncome"
-                :average-monthly-income="kpis.averageMonthlyIncome"
-                :disable-input="true"
-                class="forecasts-card forecasts-card--narrow"
-              />
-            </div>
-          </div>
+  <div class="reports-page">
+    <div class="page-header-wrapper">
+      <div class="page-header">
+        <div class="page-header-left">
+          <h1 class="page-title">Financial Reports</h1>
+          <p class="page-subtitle">
+            {{ pageSubtitle }}
+          </p>
+        </div>
+        <div class="page-header-right">
+          <button
+            v-for="period in availablePeriods.slice(0, 3)"
+            :key="period.value"
+            class="chip"
+            :class="{ 'chip--primary': currentPeriod === period.value }"
+            @click="setPeriod(period.value)"
+          >
+            {{ period.label }}
+          </button>
+          <button class="chip">
+            <span>Custom</span>
+            <ChevronDown class="chip-icon" />
+          </button>
+          <button class="chip chip--report">
+            <FileText class="chip-icon" />
+            <span>Report</span>
+          </button>
         </div>
       </div>
     </div>
+
+    <div v-if="showReportMessage" class="alert alert--success">
+      <p class="alert-title">Report Generated!</p>
+      <p>
+        Your financial report for June 2024 has been successfully generated and is available for
+        download.
+      </p>
+    </div>
+
+    <div class="kpis">
+      <KpiCard
+        label="Total Income"
+        :value="isLoading ? 'Loading...' : formatCompactCurrency(kpis.totalIncome, currency)"
+      />
+      <KpiCard
+        label="Avg. Monthly Income"
+        :value="
+          isLoading
+            ? 'Loading...'
+            : formatCompactCurrency(Math.round(kpis.averageMonthlyIncome), currency)
+        "
+      />
+      <KpiCard label="Top Income Source" :value="isLoading ? 'Loading...' : kpis.topIncomeSource" />
+      <KpiCard
+        label="% Growth vs Last Period"
+        :value="isLoading ? 'Loading...' : `${kpis.growthPercentage}%`"
+        :value-class="kpis.growthPercentage >= 0 ? 'is-positive' : 'is-negative'"
+      />
+    </div>
+
+    <div class="content-layout">
+      <div class="charts-column">
+        <DonutChartCard :data="sourceBreakdown" :total="kpis.totalIncome" :currency="currency">
+          <template #note>
+            <span class="bold">AI Insight:</span>
+            {{
+              statistics?.income_insights?.top_sources?.length > 1
+                ? `${Math.round(statistics.income_insights.top_sources[0]?.percentage || 0)}% of your income comes from ${statistics.income_insights.top_sources[0]?.party || 'your top source'}.`
+                : 'Diversify your income sources to reduce risk.'
+            }}
+          </template>
+        </DonutChartCard>
+        <LineChartCard :data="lineData" />
+      </div>
+
+      <div class="insights-column">
+        <NarrativeInsights class="insights-card">
+          <span v-if="!isLoading && statistics">
+            Your income
+            <strong
+              >{{ kpis.growthPercentage >= 0 ? 'grew' : 'declined' }}
+              {{ Math.abs(kpis.growthPercentage) }}%</strong
+            >
+            this period{{
+              kpis.topIncomeSource !== 'N/A' ? `, driven mainly by ${kpis.topIncomeSource}` : ''
+            }}.
+            {{
+              statistics.income_insights?.top_sources?.length > 0
+                ? `You have ${statistics.income_insights.top_sources.length} active income sources.`
+                : 'Consider diversifying your income sources.'
+            }}
+            {{
+              statistics.expense_insights?.budget_analysis?.savings_rate > 0.2
+                ? ' Your savings rate is healthy.'
+                : ' Focus on improving your savings rate.'
+            }}
+          </span>
+          <span v-else> Loading insights... </span>
+        </NarrativeInsights>
+
+        <ForecastsPanel
+          :total-income="kpis.totalIncome"
+          :average-monthly-income="kpis.averageMonthlyIncome"
+          :disable-input="true"
+          class="forecasts-card forecasts-card--narrow"
+        />
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup>
 import { FileText, ChevronDown } from 'lucide-vue-next';
-import TSidebar from '@/components/TSidebar.vue';
-import TNavbar from '@/components/TNavbar.vue';
 import KpiCard from '@/components/reports/KpiCard.vue';
 import NarrativeInsights from '@/components/reports/NarrativeInsights.vue';
 import ForecastsPanel from '@/components/reports/ForecastsPanel.vue';
 import LineChartCard from '@/components/reports/LineChartCard.vue';
 import DonutChartCard from '@/components/reports/DonutChartCard.vue';
-import { ref, computed, onMounted, watch } from 'vue';
+import { ref, computed } from 'vue';
 import { useStatistics } from '@/composables/useStatistics';
 import { useAuth } from '@/composables/useAuth';
 import { getChartColors } from '@/utils/colors';
 
 definePageMeta({
-  layout: 'default',
+  layout: 'dashboard',
   middleware: 'auth'
 });
 
 const { user } = useAuth();
 const {
   currentPeriod,
+  currentStatistics,
   selectedWalletId,
   availablePeriods,
   availableWallets,
+  isLoading,
   setPeriod,
-  getStatistics,
   formatCompactCurrency
 } = useStatistics();
 
 const showReportMessage = ref(false);
-const statistics = ref(null);
-const isLoading = ref(false);
-
-// Load statistics data
-const loadStatistics = async () => {
-  try {
-    isLoading.value = true;
-    statistics.value = await getStatistics(selectedWalletId.value, currentPeriod.value);
-  } catch (err) {
-    console.error('Error loading statistics:', err);
-  } finally {
-    isLoading.value = false;
-  }
-};
-
-// Watch for changes
-watch([selectedWalletId, currentPeriod], () => {
-  loadStatistics();
-});
-
-// Load on mount
-onMounted(() => {
-  loadStatistics();
-});
+const statistics = currentStatistics;
 
 const currency = computed(() => {
   const selectedWallet = availableWallets.value.find((w) => w.id === selectedWalletId.value);
-
-  if (selectedWallet) {
-    return selectedWallet.currency;
-  }
-
-  return selectedWalletId.value === null ? 'USD' : 'XAF';
+  return selectedWallet?.currency || 'USD';
 });
 
-// Computed properties for real data
 const kpis = computed(() => {
   if (!statistics.value)
     return {
@@ -235,7 +188,6 @@ const sourceBreakdown = computed(() => {
   );
 });
 
-// Page header computed properties
 const currentPeriodLabel = computed(() => {
   const period = availablePeriods.find((p) => p.value === currentPeriod.value);
   return period ? period.label.toLowerCase() : 'this period';
@@ -251,73 +203,8 @@ const pageSubtitle = computed(() => {
 @use '@/assets/scss/_variables.scss' as *;
 @use '@/assets/scss/_utilities.scss' as *;
 
-.settings-layout {
-  --sidebar-width: min(300px, 30vw);
-  --sidebar-min-width: 200px;
-  background-color: $bg-gray;
-  min-height: 100vh;
-}
-
-.settings-content {
-  margin-left: var(--sidebar-width, 300px);
-  transition: margin-left 0.3s ease;
-  width: calc(100% - var(--sidebar-width, 300px));
-  overflow-x: hidden;
-  padding: 6rem 1rem 1rem;
-
-  @media (max-width: $breakpoint-lg) {
-    padding: 5.5rem 1rem 1rem;
-  }
-
-  @media (max-width: $breakpoint-md) {
-    width: 100%;
-    margin-left: 0;
-    padding: 5rem 0.75rem 1rem;
-  }
-
-  @media (max-width: $breakpoint-sm) {
-    padding: 4.5rem 0.5rem 1rem;
-  }
-
-  @media (max-width: 480px) {
-    padding: 4rem 0.25rem 1rem;
-  }
-}
-
-.settings-content-card {
-  min-height: calc(100vh - 120px);
-  background-color: $bg-white;
-  border-radius: 2rem;
-  border: 1px solid $bg-gray;
-  padding: 2rem 1rem;
-  box-sizing: border-box;
-  overflow: hidden;
-
-  @media (max-width: $breakpoint-md) {
-    border-radius: 1.5rem;
-    padding: 1.5rem 0.75rem;
-    min-height: calc(100vh - 100px);
-  }
-
-  @media (max-width: $breakpoint-sm) {
-    border-radius: 1rem;
-    padding: 1rem 0.5rem;
-    min-height: calc(100vh - 80px);
-  }
-
-  @media (max-width: 480px) {
-    border-radius: 0.75rem;
-    padding: 0.75rem 0.25rem;
-  }
-}
-
-.settings-page {
-  width: 95%;
-  margin: auto;
-
-  @media (max-width: $breakpoint-sm) {
-    width: 100%;
-  }
+.reports-page {
+  width: 100%;
 }
 
 .page-header-wrapper {
@@ -328,7 +215,6 @@ const pageSubtitle = computed(() => {
   position: relative;
   overflow: hidden;
 
-  // Add smaller decorative ellipse
   &::before {
     content: '';
     position: absolute;
@@ -423,11 +309,6 @@ const pageSubtitle = computed(() => {
   font-weight: $font-bold;
 }
 
-.section-spacing {
-  margin-bottom: $spacing-4;
-}
-
-// Enhanced narrative insights styling
 :deep(.narrative-insights) {
   background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 249, 0.8) 100%);
   border: 1px solid rgba(4, 120, 68, 0.1);
@@ -439,7 +320,6 @@ const pageSubtitle = computed(() => {
   position: relative;
   overflow: hidden;
 
-  // Add subtle pattern
   &::before {
     content: '';
     position: absolute;
@@ -450,7 +330,6 @@ const pageSubtitle = computed(() => {
     background: linear-gradient(90deg, $primary 0%, rgba(4, 120, 68, 0.5) 50%, $primary 100%);
   }
 
-  // Text styling
   font-size: $font-size-base;
   line-height: 1.6;
   color: $text-primary;
@@ -476,7 +355,6 @@ const pageSubtitle = computed(() => {
   }
 }
 
-// Override KPI card styles for reports page
 :deep(.kpi-card) {
   background: linear-gradient(135deg, $bg-white 0%, #fefefe 100%);
   border: 1px solid rgba(4, 120, 68, 0.1);
@@ -536,8 +414,6 @@ const pageSubtitle = computed(() => {
   display: flex;
   flex-direction: column;
   gap: $spacing-4;
-
-  // Add subtle background pattern for charts area
   position: relative;
   padding: $spacing-4;
   background:
@@ -546,7 +422,6 @@ const pageSubtitle = computed(() => {
   border-radius: $radius-xl;
   border: 1px solid rgba(4, 120, 68, 0.05);
 
-  // Make chart cards blend better
   :deep(.chart-card) {
     background: rgba(255, 255, 255, 0.8);
     backdrop-filter: blur(8px);
@@ -576,7 +451,6 @@ const pageSubtitle = computed(() => {
 }
 
 .forecasts-card {
-  // Add some styling to match the overall theme
   :deep(.card) {
     border: 1px solid rgba(4, 120, 68, 0.1);
     box-shadow:
@@ -584,14 +458,12 @@ const pageSubtitle = computed(() => {
       0 2px 4px -1px rgba(0, 0, 0, 0.03);
   }
 
-  // Force single column layout for narrow context
   &.forecasts-card--narrow {
     :deep(.panel-grid) {
       grid-template-columns: 1fr !important;
       gap: $spacing-3;
     }
 
-    // Optimize form input for narrow space
     :deep(.whatif-row) {
       flex-direction: column;
       align-items: stretch;
@@ -609,7 +481,6 @@ const pageSubtitle = computed(() => {
       }
     }
 
-    // Adjust spacing for better vertical layout
     :deep(.sub-title) {
       margin-bottom: $spacing-2;
     }
diff --git a/pages/settings.vue b/pages/settings.vue
index 54be4a2..a2d8870 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -1,46 +1,38 @@
 <template>
-  <div class="settings-layout">
-    <TSidebar />
-    <TNavbar />
-    <div class="settings-content">
-      <div class="settings-content-card">
-        <div class="settings-page">
-          <div class="settings-header">
-            <Settings class="header-icon" />
-            <h1>App Settings</h1>
-          </div>
-
-          <CollapsibleSection title="Account Information" :icon="User" :default-open="true">
-            <template #default="{ isEditMode }">
-              <SettingsAccount
-                :is-edit-mode="isEditMode"
-                @open-password-modal="showPasswordModal = true"
-              />
-            </template>
-          </CollapsibleSection>
-
-          <CollapsibleSection title="General Settings" :icon="Globe">
-            <template #default="{ isEditMode }">
-              <SettingsGeneral :is-edit-mode="isEditMode" />
-            </template>
-          </CollapsibleSection>
-
-          <CollapsibleSection title="Account & Wallets" :icon="Wallet">
-            <template #default="{ isEditMode }">
-              <SettingsWallets :is-edit-mode="isEditMode" />
-            </template>
-          </CollapsibleSection>
-
-          <CollapsibleSection title="Display Settings" :icon="Sun" :default-open="false">
-            <template #default="{ isEditMode }">
-              <SettingsDisplay :is-edit-mode="isEditMode" />
-            </template>
-          </CollapsibleSection>
-
-          <PasswordModal v-if="showPasswordModal" @close="showPasswordModal = false" />
-        </div>
-      </div>
+  <div class="settings-page">
+    <div class="page-header">
+      <Settings class="header-icon" />
+      <h1>App Settings</h1>
     </div>
+
+    <CollapsibleSection title="Account Information" :icon="User" :default-open="true">
+      <template #default="{ isEditMode }">
+        <SettingsAccount
+          :is-edit-mode="isEditMode"
+          @open-password-modal="showPasswordModal = true"
+        />
+      </template>
+    </CollapsibleSection>
+
+    <CollapsibleSection title="General Settings" :icon="Globe">
+      <template #default="{ isEditMode }">
+        <SettingsGeneral :is-edit-mode="isEditMode" />
+      </template>
+    </CollapsibleSection>
+
+    <CollapsibleSection title="Account & Wallets" :icon="Wallet">
+      <template #default="{ isEditMode }">
+        <SettingsWallets :is-edit-mode="isEditMode" />
+      </template>
+    </CollapsibleSection>
+
+    <CollapsibleSection title="Display Settings" :icon="Sun" :default-open="false">
+      <template #default="{ isEditMode }">
+        <SettingsDisplay :is-edit-mode="isEditMode" />
+      </template>
+    </CollapsibleSection>
+
+    <PasswordModal v-if="showPasswordModal" @close="showPasswordModal = false" />
   </div>
 </template>
 
@@ -53,11 +45,9 @@ import SettingsGeneral from '@/components/settings/SettingsGeneral.vue';
 import SettingsWallets from '@/components/settings/SettingsWallets.vue';
 import SettingsDisplay from '@/components/settings/SettingsDisplay.vue';
 import PasswordModal from '@/components/settings/PasswordModal.vue';
-import TSidebar from '@/components/TSidebar.vue';
-import TNavbar from '~/components/TNavbar.vue';
 
 definePageMeta({
-  layout: 'default',
+  layout: 'dashboard',
   middleware: 'auth'
 });
 
@@ -67,76 +57,11 @@ const showPasswordModal = ref(false);
 <style lang="scss" scoped>
 @use '@/assets/scss/_variables.scss' as *;
 
-.settings-layout {
-  --sidebar-width: min(300px, 30vw);
-  --sidebar-min-width: 200px;
-  background-color: $bg-gray;
-  min-height: 100vh;
-}
-
-.settings-content {
-  margin-left: var(--sidebar-width, 100px);
-  transition: margin-left 0.3s ease;
-  width: calc(100% - var(--sidebar-width, 300px));
-  overflow-x: hidden;
-  padding: 6rem 1rem 1rem;
-
-  @media (max-width: $breakpoint-lg) {
-    padding: 5.5rem 1rem 1rem;
-  }
-
-  @media (max-width: $breakpoint-md) {
-    padding: 5rem 0.75rem 1rem;
-    width: 100%;
-    margin-left: 0;
-  }
-
-  @media (max-width: $breakpoint-sm) {
-    padding: 4.5rem 0.5rem 1rem;
-  }
-
-  @media (max-width: 480px) {
-    padding: 4rem 0.25rem 1rem;
-  }
-}
-
-.settings-content-card {
-  min-height: calc(100vh - 120px);
-  background-color: $bg-white;
-  border-radius: 2rem;
-  border: 1px solid $bg-gray;
-  padding: 2rem 1rem;
-  box-sizing: border-box;
-  overflow: hidden;
-
-  @media (max-width: $breakpoint-md) {
-    border-radius: 1.5rem;
-    padding: 1.5rem 0.75rem;
-    min-height: calc(100vh - 100px);
-  }
-
-  @media (max-width: $breakpoint-sm) {
-    border-radius: 1rem;
-    padding: 1rem 0.5rem;
-    min-height: calc(100vh - 80px);
-  }
-
-  @media (max-width: 480px) {
-    border-radius: 0.75rem;
-    padding: 0.75rem 0.25rem;
-  }
-}
-
 .settings-page {
-  width: 95%;
-  margin: auto;
-
-  @media (max-width: $breakpoint-sm) {
-    width: 100%;
-  }
+  width: 100%;
 }
 
-.settings-header {
+.page-header {
   display: flex;
   align-items: center;
   gap: 0.75rem;
diff --git a/pages/wallets.vue b/pages/wallets.vue
index 8982532..987f6db 100644
--- a/pages/wallets.vue
+++ b/pages/wallets.vue
@@ -31,6 +31,7 @@
         :entities="wallets"
         :is-loading="isLoading"
         :error="error"
+        :default-item-id="defaultWalletId"
         @edit="handleEdit"
         @delete="handleDelete"
       />
@@ -39,8 +40,9 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue';
+import { ref, computed, onMounted } from 'vue';
 import { useWallets } from '@/composables/useWallets';
+import { useSharedData } from '@/composables/useSharedData';
 import { useSidebar } from '@/composables/useSidebar';
 import { useNotifications } from '@/composables/useNotifications';
 import ContentTopCard from '@/components/TTopCard.vue';
@@ -52,16 +54,23 @@ import TipsSection from '@/components/TipsSection.vue';
 const showForm = ref(false);
 const editingItem = ref(null);
 const { isTabletOrBelow } = useSidebar();
+const sharedData = useSharedData();
 
 const { wallets, isLoading, error, fetchWallets, createWallet, updateWallet, deleteWallet } =
   useWallets();
 
 const { confirmDelete, showSuccess, showError } = useNotifications();
 
+const defaultWalletId = computed(() => {
+  const defaultWallet = sharedData.getDefaultWallet?.value;
+  return defaultWallet?.id ? String(defaultWallet.id) : null;
+});
+
 async function loadWallets() {
   try {
-    // Load wallets (no required parameters like categories)
+    // Load wallets and configurations
     await fetchWallets();
+    await sharedData.loadConfigurations();
   } catch (err) {
     console.error('Failed to load wallets:', err);
     // Don't throw the error to prevent page from breaking
diff --git a/services/api/categoriesApi.ts b/services/api/categoriesApi.ts
index 63999b1..89888d2 100644
--- a/services/api/categoriesApi.ts
+++ b/services/api/categoriesApi.ts
@@ -105,6 +105,27 @@ const categoriesApi = {
       console.error('Error deleting category:', error);
       throw error;
     }
+  },
+
+  /**
+   * Seed default categories for the user
+   * POST /categories/seed-defaults
+   */
+  async seedDefaults(): Promise<{
+    created: number;
+    skipped: number;
+    categories: Category[];
+  } | null> {
+    const api = useApi();
+    try {
+      const response = await api<
+        ApiResponse<{ created: number; skipped: number; categories: Category[] }>
+      >('/categories/seed-defaults', { method: 'POST' });
+      return response?.data || null;
+    } catch (error) {
+      console.error('Error seeding default categories:', error);
+      throw error;
+    }
   }
 };
 
diff --git a/services/api/configurationsApi.ts b/services/api/configurationsApi.ts
index 42a99cc..5dbf137 100644
--- a/services/api/configurationsApi.ts
+++ b/services/api/configurationsApi.ts
@@ -1,83 +1,65 @@
+import type {
+  ConfigurationItem,
+  ConfigurationsResponse,
+  ConfigurationPayload,
+  ApiResponse
+} from '~/types/configuration';
 import { extractResponseData } from './apiHelpers';
 
-export interface Configuration {
-  id: number;
-  key: string;
-  value: string;
-  user_id: number;
-  created_at: string;
-  updated_at: string;
-}
-
-interface ConfigurationsResponse {
-  data: Configuration[];
-  last_sync?: string;
-}
-
-interface ApiResponse<T> {
-  data: T;
-  message?: string;
-}
-
 const configurationsApi = {
   async fetchAll(): Promise<ConfigurationsResponse> {
     const api = useApi();
     const response = await api<ApiResponse<ConfigurationsResponse>>('/configurations');
     return extractResponseData(response, {
+      last_sync: new Date().toISOString(),
       data: []
     });
   },
 
-  async get(key: string): Promise<Configuration | null> {
+  async create(payload: {
+    key: string;
+    value: any;
+    type?: string;
+  }): Promise<ConfigurationItem | null> {
     const api = useApi();
-    try {
-      const response = await api<ApiResponse<Configuration>>(`/configurations/${key}`);
-      return response?.data || null;
-    } catch (error) {
-      console.error(`Error fetching configuration ${key}:`, error);
-      return null;
-    }
+    const response = await api<ApiResponse<ConfigurationItem>>('/configurations', {
+      method: 'POST',
+      body: payload
+    });
+    return response?.data || null;
   },
 
-  async set(key: string, value: string): Promise<Configuration | null> {
+  async update(key: string, payload: ConfigurationPayload): Promise<ConfigurationItem | null> {
     const api = useApi();
-    try {
-      const response = await api<ApiResponse<Configuration>>('/configurations', {
-        method: 'POST',
-        body: { key, value }
-      });
-      return response?.data || null;
-    } catch (error) {
-      console.error(`Error setting configuration ${key}:`, error);
-      throw error;
+    // Build request body without the key (key is in URL) and include type if provided
+    const body: Record<string, any> = { value: payload.value };
+    if (typeof payload.type !== 'undefined') {
+      body.type = payload.type;
     }
+    const response = await api<ApiResponse<ConfigurationItem>>(
+      `/configurations/${encodeURIComponent(key)}`,
+      {
+        method: 'PUT',
+        body
+      }
+    );
+    return response?.data || null;
   },
 
-  async update(key: string, value: string): Promise<Configuration | null> {
+  async fetchByKey(key: string): Promise<ConfigurationItem | null> {
     const api = useApi();
-    try {
-      const response = await api<ApiResponse<Configuration>>(`/configurations/${key}`, {
-        method: 'PUT',
-        body: { value }
-      });
-      return response?.data || null;
-    } catch (error) {
-      console.error(`Error updating configuration ${key}:`, error);
-      throw error;
-    }
+    const response = await api<ApiResponse<ConfigurationItem>>(
+      `/configurations/${encodeURIComponent(key)}`
+    );
+    return response?.data || null;
   },
 
   async delete(key: string): Promise<boolean> {
     const api = useApi();
-    try {
-      await api(`/configurations/${key}`, {
-        method: 'DELETE'
-      });
-      return true;
-    } catch (error) {
-      console.error(`Error deleting configuration ${key}:`, error);
-      throw error;
-    }
+    await api(`/configurations/${encodeURIComponent(key)}`, {
+      method: 'DELETE'
+    });
+    return true;
   }
 };
 
diff --git a/types/configuration.ts b/types/configuration.ts
new file mode 100644
index 0000000..34028a0
--- /dev/null
+++ b/types/configuration.ts
@@ -0,0 +1,27 @@
+export interface ConfigurationItem {
+  id: number;
+  user_id: number;
+  key: string;
+  value: any;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface ConfigurationPayload {
+  key?: string;
+  value: any;
+  type?: string;
+}
+
+export interface ConfigurationsResponse {
+  data: ConfigurationItem[];
+  last_sync?: string;
+}
+
+export interface ApiResponse<T> {
+  success?: boolean;
+  data?: T;
+  message?: string;
+  errors?: string[];
+  status?: number;
+}
diff --git a/utils/configurationKeys.ts b/utils/configurationKeys.ts
new file mode 100644
index 0000000..ed1d261
--- /dev/null
+++ b/utils/configurationKeys.ts
@@ -0,0 +1,14 @@
+/**
+ * Configuration Keys
+ * Centralized definition of all configuration key names used throughout the app
+ * Prevents typos and ensures consistency across all features
+ */
+
+export const CONFIGURATION_KEYS = {
+  LANGUAGE: 'default-lang',
+  CURRENCY: 'default-currency',
+  WALLET: 'default-wallet',
+  GROUP: 'default-group',
+  THEME: 'theme',
+  ONBOARDING_COMPLETE: 'onboarding-complete'
+} as const;
diff --git a/utils/currencies.ts b/utils/currencies.ts
new file mode 100644
index 0000000..4d6bdd6
--- /dev/null
+++ b/utils/currencies.ts
@@ -0,0 +1,25 @@
+/**
+ * Available currencies for the application
+ * Centralized to ensure consistency across all components
+ */
+export const CURRENCIES = [
+  { code: 'USD', name: 'US Dollar', symbol: '$' },
+  { code: 'EUR', name: 'Euro', symbol: '€' },
+  { code: 'GBP', name: 'British Pound', symbol: '£' },
+  { code: 'JPY', name: 'Japanese Yen', symbol: '¥' },
+  { code: 'CAD', name: 'Canadian Dollar', symbol: 'C$' },
+  { code: 'AUD', name: 'Australian Dollar', symbol: 'A$' },
+  { code: 'XAF', name: 'Central African CFA Franc', symbol: 'FCFA' },
+  { code: 'XOF', name: 'West African CFA Franc', symbol: 'CFA' },
+  { code: 'NGN', name: 'Nigerian Naira', symbol: '₦' },
+  { code: 'GHS', name: 'Ghanaian Cedi', symbol: '₵' },
+  { code: 'KES', name: 'Kenyan Shilling', symbol: 'KSh' },
+  { code: 'ZAR', name: 'South African Rand', symbol: 'R' },
+  { code: 'INR', name: 'Indian Rupee', symbol: '₹' },
+  { code: 'CNY', name: 'Chinese Yuan', symbol: '¥' },
+  { code: 'BRL', name: 'Brazilian Real', symbol: 'R$' },
+  { code: 'MXN', name: 'Mexican Peso', symbol: '$' },
+  { code: 'CHF', name: 'Swiss Franc', symbol: 'CHF' }
+] as const;
+
+export type CurrencyCode = (typeof CURRENCIES)[number]['code'];
diff --git a/utils/transactionMapper.ts b/utils/transactionMapper.ts
index e50a752..d49dd54 100644
--- a/utils/transactionMapper.ts
+++ b/utils/transactionMapper.ts
@@ -144,9 +144,10 @@ export const transactionMapper = {
   toApi(
     frontend: Partial<FrontendTransaction>,
     _parties: Party[] = [],
-    wallets: Wallet[] = [],
+    _wallets: Wallet[] = [],
     currentDatetime?: string,
-    defaultGroup?: { id: number; name: string }
+    defaultGroup?: { id: number; name: string },
+    defaultWallet?: Wallet | null
   ): TransactionCreatePayload {
     let datetime: string;
     if (currentDatetime) {
@@ -164,13 +165,8 @@ export const transactionMapper = {
     const partyId: number | null = frontend.partyId || null;
     let walletId: number | null = frontend.walletId || null;
 
-    if (walletId === null && wallets.length > 0) {
-      const defaultWallet = wallets.find(
-        (wallet) => wallet.name.toLowerCase().includes('default') || wallet.is_default === true
-      );
-      if (defaultWallet) {
-        walletId = defaultWallet.id;
-      }
+    if (walletId === null && defaultWallet) {
+      walletId = defaultWallet.id;
     }
 
     const groupId = frontend.groupId || defaultGroup?.id || null;