diff --git a/mock-hpos-api/defaultResponse.js b/mock-hpos-api/defaultResponse.js
index 42df592f..e9b1ba80 100644
--- a/mock-hpos-api/defaultResponse.js
+++ b/mock-hpos-api/defaultResponse.js
@@ -631,7 +631,12 @@ const mockKycData = {
   "kyc": 'holo_kyc_2'
 }
 
-const mockHostPreferences = {
+let mockDefaultHappPreferences = {
+  max_fuel_before_invoice: '1000',
+  max_time_before_invoice: [2000, 500],
+  price_bandwidth: (Math.random() * 10).toFixed(5).toString(),
+  price_compute: (Math.random() * 10).toFixed(5).toString(),
+  price_storage: (Math.random() * 10).toFixed(5).toString()
 }
 
 // NB: both /api and /holochain-api calls are mocked here
@@ -646,7 +651,6 @@ const data = {
     '/holochain-api/v1/host_earnings': earnings,
     '/holochain-api/v1/core_app_version': coreAppVersion,
     '/holochain-api/v1/host_invoices': mockPaidInvoicesData,
-    '/holochain-api/v1/host_preferences': mockHostPreferences,
     '/holochain-api/v1/redemptions': mockRedemptionHistoryData,
     '/holochain-api/v1/kyc': mockKycData.kyc
   },
@@ -661,6 +665,18 @@ const data = {
           return getMyProfile
         case 'get_all_reserve_accounts_details':
           return getAllReserveAccountsDetails
+        case 'get_default_happ_preferences':
+          return mockDefaultHappPreferences
+        case 'set_default_happ_preferences':
+          mockDefaultHappPreferences = {
+            max_fuel_before_invoice: '1000',
+            max_time_before_invoice: [2000, 500],
+            price_bandwidth: '0',
+            price_compute: '0.0001',
+            price_storage: '0'
+          }
+          
+          return true
         case 'redeem':
           return redemptionTransaction
       }
diff --git a/src/components/settings/hostingPreferences/PricesSection.vue b/src/components/settings/hostingPreferences/PricesSection.vue
index 480cf9b6..c1eb72ac 100644
--- a/src/components/settings/hostingPreferences/PricesSection.vue
+++ b/src/components/settings/hostingPreferences/PricesSection.vue
@@ -79,7 +79,7 @@ const prices = computed((): PriceItem[] => [
   },
   {
     label: t('$.data_transfer'),
-    value: props.data.bandwidth ? formatPrice(props.data.bandwidth).value : 0,
+    value: props.data.bandwidth || 0,
     unit: 'HF per Gb',
     prop: 'bandwidth',
     isDisabled: false
diff --git a/src/components/settings/hostingPreferences/TogglePaidHostingSection.vue b/src/components/settings/hostingPreferences/TogglePaidHostingSection.vue
index 14f34df0..a4d53854 100644
--- a/src/components/settings/hostingPreferences/TogglePaidHostingSection.vue
+++ b/src/components/settings/hostingPreferences/TogglePaidHostingSection.vue
@@ -10,7 +10,12 @@ import { EUserKycLevel } from '@/types/types'
 const { t } = useI18n()
 const userStore = useUserStore()
 const { goToSpringboard } = useGoToSpringboard()
-const paidHostingEnabled = ref(false)
+
+const props = defineProps<{
+  paidHostingEnabled: boolean
+}>()
+
+const paidHostingEnabled = ref(props.paidHostingEnabled)
 
 const emit = defineEmits(['paid_hosting_toggled'])
 
diff --git a/src/interfaces/HposInterface.ts b/src/interfaces/HposInterface.ts
index 40671ea5..fd6018e2 100644
--- a/src/interfaces/HposInterface.ts
+++ b/src/interfaces/HposInterface.ts
@@ -578,13 +578,13 @@ export function useHposInterface(): HposInterface {
     }
 
     try {
-      await hposHolochainCall({
+      const hostPreferences = await hposHolochainCall({
         method: 'post',
         path: '/zome_call',
         params
       })
 
-      return true
+      return hostPreferences
     } catch (error) {
       console.error('getHostPreferences encountered an error: ', error)
       return false
diff --git a/src/pages/HostingPreferences.vue b/src/pages/HostingPreferences.vue
index 9288d1b0..414207be 100644
--- a/src/pages/HostingPreferences.vue
+++ b/src/pages/HostingPreferences.vue
@@ -24,6 +24,10 @@ async function getHostPreferences(): Promise<void> {
     isLoading.value = true
     await preferencesStore.getHostPreferences()
     isLoading.value = false
+    isPaidHostingEnabled.value = 
+      preferencesStore.pricesSettings.bandwidth > 0 ||
+      preferencesStore.pricesSettings.storage > 0 ||
+      preferencesStore.pricesSettings.cpu > 0
   } catch (e) {
     isLoading.value = false
     isError.value = true
@@ -34,7 +38,8 @@ async function setDefaultHostPreferences(): Promise<void> {
   try {
     isError.value = false
     isLoading.value = true
-    await preferencesStore.getHostPreferences()
+    await preferencesStore.setDefaultPreferences()
+    await getHostPreferences()
     isLoading.value = false
   } catch (e) {
     isLoading.value = false
@@ -48,8 +53,21 @@ onMounted(async (): Promise<void> => {
   }
 })
 
-function updatePrice({ prop, value }: UpdatePricePayload): void {
-  console.log(`Hosting preferences: updatePrice: ${prop} ${value}`)
+async function updatePrice({ prop, value }: UpdatePricePayload): Promise<void> {
+  await preferencesStore.updatePrice(prop, value)
+  await preferencesStore.setDefaultPreferences()
+  await getHostPreferences()
+}
+
+function onTogglePaidHosting(isToggledOn: boolean): void {
+  isPaidHostingEnabled.value = isToggledOn
+  if (isToggledOn) {
+    preferencesStore.setInitialPricing()
+  } else {
+    preferencesStore.clearPricing()
+  }
+
+  setDefaultHostPreferences()
 }
 
 </script>
@@ -64,7 +82,8 @@ function updatePrice({ prop, value }: UpdatePricePayload): void {
   >
     <template v-if="!isLoading && !isError">
       <TogglePaidHostingSection
-        @paid_hosting_toggled="(isPricingEnabled: boolean) => isPaidHostingEnabled = isPricingEnabled"
+        :paidHostingEnabled="isPaidHostingEnabled"
+        @paid_hosting_toggled="onTogglePaidHosting"
       />    
       <PricesSection
         v-if="isPaidHostingEnabled"
diff --git a/src/store/preferences.ts b/src/store/preferences.ts
index 53ad9452..1fcd5185 100644
--- a/src/store/preferences.ts
+++ b/src/store/preferences.ts
@@ -42,6 +42,29 @@ export const usePreferencesStore = defineStore('preferences', {
 
       await setDefaultHAppPreferences(payload)
     },
+    setInitialPricing(): void {
+      this.pricesSettings = {
+        cpu: 0.0001,
+        storage: 0.0001,
+        bandwidth: 0.0001
+      }
+    },
+    clearPricing(): void {
+      this.pricesSettings = {
+        cpu: 0,
+        storage: 0,
+        bandwidth: 0
+      }
+    },
+    updatePrice(priceSetting: string, value: number): void {
+      if (priceSetting === 'cpu') {
+        this.pricesSettings.cpu = value
+      } else if (priceSetting === 'storage') {
+        this.pricesSettings.storage = value
+      } else if (priceSetting === 'bandwidth') {
+        this.pricesSettings.bandwidth = value
+      }
+    },   
     async getHostPreferences(): Promise<void> {
       const response = await getHostPreferences()