diff --git a/src/components/StopHostingModal.vue b/src/components/StopHostingModal.vue
index 08728337..0b910df3 100644
--- a/src/components/StopHostingModal.vue
+++ b/src/components/StopHostingModal.vue
@@ -7,9 +7,11 @@ import { EButtonType } from '@uicommon/types/ui'
 import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { EModal } from '@/constants/ui'
-import { HAppDetails } from '@/interfaces/HposInterface'
+import { HAppDetails, useHposInterface } from '@/interfaces/HposInterface'
+import { isError as isErrorPredicate } from '@/types/predicates'
 
 const { t } = useI18n()
+const { stopHostingHApp, startHostingHApp } = useHposInterface()
 
 // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-assignment
 const { showModal } = useModals()
@@ -18,34 +20,40 @@ const props = defineProps<{
   hApp: HAppDetails
 }>()
 
-const emit = defineEmits(['close'])
+const emit = defineEmits(['close', 'update:hosting'])
 
 const isConfirmed = ref(false)
 const isBusy = ref(false)
 const isError = ref(false)
 
-function confirm(): void {
+async function confirm(): Promise<void> {
   isBusy.value = true
+  let result = null
+
+  if (props.hApp.enabled) {
+    result = await stopHostingHApp(props.hApp.id)
+  } else {
+    result = await startHostingHApp(props.hApp.id)
+  }
+
+  // If failed
+  if (isErrorPredicate(result)) {
+    emit('close')
 
-  setTimeout(() => {
-    if (props.hApp.enabled) {
-      stopHostingHApp()
-    } else {
-      startHostingHApp()
-    }
-
-    // If failed
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-assignment
-    // showModal(EModal.error_modal)
-    // emit('close')
-    //
-    // isBusy.value = false
-    // isConfirmed.value = false
-
-    // If success
     isBusy.value = false
-    isConfirmed.value = true
-  }, 2000)
+    isConfirmed.value = false
+
+    setTimeout(() => {
+      showModal(EModal.error_modal)
+    }, 300)
+
+    return
+  }
+
+  // If success
+  isBusy.value = false
+  isConfirmed.value = true
+  emit('update:hosting', !props.hApp.enabled)
 }
 
 function close(): void {
@@ -54,14 +62,6 @@ function close(): void {
   isError.value = false
   emit('close')
 }
-
-function startHostingHApp(): void {
-  console.log('NOT YET IMPLEMENTED: Starting hosting happ', props.hApp.name)
-}
-
-function stopHostingHApp(): void {
-  console.log('NOT YET IMPLEMENTED: Stopping hosting happ', props.hApp.name)
-}
 </script>
 
 <template>
diff --git a/src/components/hAppDetails/HAppDetailsContent.vue b/src/components/hAppDetails/HAppDetailsContent.vue
index d0a98e16..6cbc5335 100644
--- a/src/components/hAppDetails/HAppDetailsContent.vue
+++ b/src/components/hAppDetails/HAppDetailsContent.vue
@@ -13,6 +13,12 @@ const { t } = useI18n()
 const props = defineProps<{
   hApp: HAppDetails
 }>()
+
+const emit = defineEmits(['update:hosting'])
+
+function updateHosting(isEnabled: boolean): void {
+  emit('update:hosting', isEnabled)
+}
 </script>
 
 <template>
@@ -77,6 +83,7 @@ const props = defineProps<{
           <HAppDetailsStopHosting
             :h-app="props.hApp"
             class="happ-details__main-column-stop-hosting"
+            @update:hosting="updateHosting"
           />
         </div>
 
@@ -161,10 +168,10 @@ const props = defineProps<{
       flex-direction: column;
     }
 
-		&-header {
-			display: flex;
-			justify-content: space-between;
-		}
+    &-header {
+      display: flex;
+      justify-content: space-between;
+    }
 
     &-name {
       margin: 0 0 40px 0;
diff --git a/src/components/hAppDetails/HAppDetailsStopHosting.vue b/src/components/hAppDetails/HAppDetailsStopHosting.vue
index 6c694069..a095441d 100644
--- a/src/components/hAppDetails/HAppDetailsStopHosting.vue
+++ b/src/components/hAppDetails/HAppDetailsStopHosting.vue
@@ -14,6 +14,8 @@ const props = defineProps<{
   hApp: HAppDetails
 }>()
 
+const emit = defineEmits(['update:hosting'])
+
 const isHostingModalVisible = ref(false)
 const isDisableHostingTooltipVisible = ref(false)
 
@@ -24,6 +26,10 @@ function openHostingModal(): void {
 function closeHostingModal(): void {
   isHostingModalVisible.value = false
 }
+
+function updateHosting(isEnabled: boolean): void {
+  emit('update:hosting', isEnabled)
+}
 </script>
 
 <template>
@@ -55,6 +61,7 @@ function closeHostingModal(): void {
       :h-app="props.hApp"
       :is-visible="isHostingModalVisible"
       :h-app-name="hApp?.name || ''"
+      @update:hosting="updateHosting"
       @close="closeHostingModal"
     />
   </div>
diff --git a/src/interfaces/HposInterface.ts b/src/interfaces/HposInterface.ts
index 04de5dba..61bd1565 100644
--- a/src/interfaces/HposInterface.ts
+++ b/src/interfaces/HposInterface.ts
@@ -12,6 +12,8 @@ interface HposInterface {
   getUsage: () => Promise<UsageResponse | { error: unknown }>
   getHostedHApps: () => Promise<HApp[] | { error: unknown }>
   getHAppDetails: (id: string) => Promise<HAppDetails | { error: unknown }>
+  startHostingHApp: (id: string) => Promise<void | { error: unknown }>
+  stopHostingHApp: (id: string) => Promise<void | { error: unknown }>
   getHostEarnings: () => Promise<HostEarnings | { error: unknown }>
   getHostPreferences: () => Promise<HostPreferencesResponse | { error: unknown }>
   checkAuth: (email: string, password: string, authToken: string) => Promise<CheckAuthResponse>
@@ -441,6 +443,40 @@ export function useHposInterface(): HposInterface {
     }
   }
 
+  async function startHostingHApp(
+    id: string
+  ): Promise<HposHolochainCallResponse | { error: unknown }> {
+    try {
+      const result = await hposHolochainCall({
+        method: 'post',
+        pathPrefix: '/api/v2',
+        path: `/hosted_happs/${id}/enable`
+      })
+
+      return result
+    } catch (error) {
+      console.error('startHostingHApp encountered an error: ', error)
+      return { error }
+    }
+  }
+
+  async function stopHostingHApp(
+    id: string
+  ): Promise<HposHolochainCallResponse | { error: unknown }> {
+    try {
+      const result = await hposHolochainCall({
+        method: 'post',
+        pathPrefix: '/api/v2',
+        path: `/hosted_happs/${id}/disable`
+      })
+
+      return result
+    } catch (error) {
+      console.error('stopHostingHApp encountered an error: ', error)
+      return { error }
+    }
+  }
+
   async function getHostEarnings(): Promise<HposHolochainCallResponse | { error: unknown }> {
     try {
       return await hposHolochainCall({
@@ -790,6 +826,8 @@ export function useHposInterface(): HposInterface {
     redeemHoloFuel,
     getKycLevel,
     getHAppDetails,
+    startHostingHApp,
+    stopHostingHApp,
     HPOS_API_URL
   }
 }
diff --git a/src/locales/en.ts b/src/locales/en.ts
index e975ccae..725dd9d8 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -19,8 +19,10 @@ export default {
     identicon_explanation:
       'This Identicon design and hash ID are both unique representations of this Host Console and associated HoloFuel address. Consider this address like a bank account, or crypto wallet. When you see this identicon, you know it’s your account.',
     learn_more: 'Learn more',
+    loading: 'Loading...',
     logout: 'Logout',
     next: 'Next',
+    something_went_wrong: 'Something went wrong',
     storage: 'Storage',
     terms_of_service: 'Terms of Service',
     try_again: 'Try again'
diff --git a/src/pages/HappDetails.vue b/src/pages/HappDetails.vue
index df3c0657..5ac570e6 100644
--- a/src/pages/HappDetails.vue
+++ b/src/pages/HappDetails.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { computed, onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { useRoute } from 'vue-router'
 import HAppDetailsContent from '@/components/hAppDetails/HAppDetailsContent.vue'
 import PrimaryLayout from '@/components/PrimaryLayout.vue'
@@ -10,6 +11,8 @@ import { isError as isErrorPredicate } from '@/types/predicates'
 const { getHAppDetails } = useHposInterface()
 const currentRoute = useRoute()
 
+const { t } = useI18n()
+
 const hApp = ref<HAppDetails>()
 const isLoading = ref(false)
 const isError = ref(false)
@@ -20,16 +23,15 @@ const breadcrumbs = computed(() => [
     path: '/happs'
   },
   {
-    label: isLoading.value ? 'Loading...' : hApp.value?.name ?? 'Something went wrong'
+    label: isLoading.value ? t('$.loading') : hApp.value?.name ?? t('$.something_went_wrong')
   }
 ])
 
 async function getData(): Promise<void> {
   isError.value = false
-
   isLoading.value = true
+
   const result = await getHAppDetails(currentRoute.params.id)
-  isLoading.value = false
 
   if (isErrorPredicate(result) && result.error) {
     isError.value = true
@@ -42,11 +44,16 @@ async function getData(): Promise<void> {
   isLoading.value = false
 }
 
-onMounted(() => {
-  getData()
-})
+function updateHosting(isEnabled: boolean): void {
+  hApp.value = {
+    ...hApp.value,
+    enabled: isEnabled
+  }
+}
 
-onMounted(async () => {})
+onMounted(async () => {
+  await getData()
+})
 </script>
 
 <template>
@@ -59,6 +66,7 @@ onMounted(async () => {})
       <HAppDetailsContent
         v-if="hApp"
         :h-app="hApp"
+        @update:hosting="updateHosting"
       />
     </template>
   </PrimaryLayout>