diff --git a/apps/dashboard/src/lib/features/ui/course-landing-page/components/editor/pricing-form.svelte b/apps/dashboard/src/lib/features/ui/course-landing-page/components/editor/pricing-form.svelte
index 329ab303..3ff1906f 100644
--- a/apps/dashboard/src/lib/features/ui/course-landing-page/components/editor/pricing-form.svelte
+++ b/apps/dashboard/src/lib/features/ui/course-landing-page/components/editor/pricing-form.svelte
@@ -48,7 +48,7 @@
       <Select.Trigger class="w-full">
         <p>{course.currency === 'NGN' ? 'NGN' : 'USD'}</p>
       </Select.Trigger>
-      <Select.Content>
+      <Select.Content class="z-menu-elevated">
         <Select.Item value="NGN">NGN</Select.Item>
         <Select.Item value="USD">USD</Select.Item>
       </Select.Content>
diff --git a/apps/dashboard/src/lib/utils/functions/getCurrencyFormatter.ts b/apps/dashboard/src/lib/utils/functions/getCurrencyFormatter.ts
index 6fdd06d8..5a5faf86 100644
--- a/apps/dashboard/src/lib/utils/functions/getCurrencyFormatter.ts
+++ b/apps/dashboard/src/lib/utils/functions/getCurrencyFormatter.ts
@@ -1,8 +1,2 @@
-export default (currency: string | undefined) => {
-  const locale = currency == 'NGN' ? 'en-NG' : 'en-US';
-  return new Intl.NumberFormat(locale, {
-    style: 'currency',
-    currency: currency,
-    minimumFractionDigits: 2
-  });
-};
+export { getCurrencyFormatter } from '@cio/utils/functions';
+export { getCurrencyFormatter as default } from '@cio/utils/functions';
diff --git a/apps/dashboard/src/routes/(app)/courses/[id]/landingpage/+page.svelte b/apps/dashboard/src/routes/(app)/courses/[id]/landingpage/+page.svelte
index eb11012a..ffc6b812 100644
--- a/apps/dashboard/src/routes/(app)/courses/[id]/landingpage/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/courses/[id]/landingpage/+page.svelte
@@ -44,10 +44,13 @@
   };
 
   setLandingPageEditContext({
-    selectedKey: () => selectedSectionKey,
-    selectKey: (key) => (selectedSectionKey = key),
-    labelFor: (key) => t.get(`course.navItem.landing_page.editor.title.${key}` as never) || key,
-    iconFor: (key) => sectionIcons[key] ?? HeaderIcon
+    selectedKey: () => (selectedSectionKey === 'header' ? 'hero' : selectedSectionKey),
+    selectKey: (key) => (selectedSectionKey = key === 'hero' ? 'header' : key),
+    labelFor: (key) => {
+      const sectionKey = key === 'hero' ? 'header' : key;
+      return t.get(`course.navItem.landing_page.editor.title.${sectionKey}` as never) || key;
+    },
+    iconFor: (key) => sectionIcons[key === 'hero' ? 'header' : key] ?? HeaderIcon
   });
 
   function syncCourseStore(_courseData: Course) {
diff --git a/packages/ui/src/custom/org-landing-page/course-pricing.svelte b/packages/ui/src/custom/org-landing-page/course-pricing.svelte
index 99bb4d4b..b9e9d700 100644
--- a/packages/ui/src/custom/org-landing-page/course-pricing.svelte
+++ b/packages/ui/src/custom/org-landing-page/course-pricing.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
   import type { CoursePricing, CourseLandingPageLabels, OrgLandingPageTheme } from './types';
   import { courseLandingTokens } from './course-landing-page.tokens';
+  import { calcCourseDiscount } from './landing-page-utils';
+  import { getCurrencyFormatter } from '@cio/utils/functions';
   import EditableLandingSection from './editable-section.svelte';
   import LandingButton from './landing-button.svelte';
   import CheckIcon from '@lucide/svelte/icons/check';
@@ -19,17 +21,17 @@
 
   const isFree = $derived(!pricing.cost || pricing.cost <= 0);
 
-  const currencySymbol = $derived(
-    pricing.currency === 'USD' ? '$' : pricing.currency === 'EUR' ? '€' : pricing.currency === 'GBP' ? '£' : ''
-  );
+  const currencyFormatter = $derived(getCurrencyFormatter(pricing.currency ?? 'USD'));
 
   const discountedAmount = $derived(
     pricing.showDiscount && pricing.discount && pricing.cost
-      ? pricing.cost - (pricing.cost * pricing.discount) / 100
+      ? calcCourseDiscount(pricing.discount, pricing.cost, true)
       : null
   );
 
   const displayAmount = $derived(discountedAmount ?? pricing.cost ?? 0);
+  const formattedDisplayAmount = $derived(currencyFormatter.format(displayAmount));
+  const formattedOriginalAmount = $derived(currencyFormatter.format(pricing.cost ?? 0));
 </script>
 
 <EditableLandingSection sectionKey="pricing">
@@ -42,14 +44,9 @@
             <span class={t.pricingAmount}>{labels?.freeLabel ?? 'Free'}</span>
           {:else}
             <div class="ui:flex ui:items-baseline ui:gap-3">
-              <span class={t.pricingAmount}>
-                {currencySymbol}{displayAmount.toFixed(0)}
-                <span class={t.pricingCurrency}>{currencySymbol ? '' : pricing.currency}</span>
-              </span>
+              <span class={t.pricingAmount}>{formattedDisplayAmount}</span>
               {#if discountedAmount !== null}
-                <span class={t.pricingDiscount}>
-                  {currencySymbol}{(pricing.cost ?? 0).toFixed(0)}
-                </span>
+                <span class={t.pricingDiscount}>{formattedOriginalAmount}</span>
               {/if}
             </div>
             {#if pricing.discount && pricing.showDiscount}
diff --git a/packages/ui/src/custom/org-landing-page/editable-section.svelte b/packages/ui/src/custom/org-landing-page/editable-section.svelte
index 38ddcb76..86b4f50a 100644
--- a/packages/ui/src/custom/org-landing-page/editable-section.svelte
+++ b/packages/ui/src/custom/org-landing-page/editable-section.svelte
@@ -42,23 +42,22 @@
     onclick={handleClick}
     onkeydown={handleKeydown}
     class={cn(
-      'ui:relative ui:outline-none ui:cursor-pointer ui:transition-shadow',
-      selected
-        ? 'ui:ring-2 ui:ring-primary ui:ring-inset'
-        : 'ui:hover:ring-2 ui:hover:ring-primary/40 ui:hover:ring-inset',
+      'ui:group ui:relative ui:outline-none ui:cursor-pointer ui:border-y-2 ui:border-dashed ui:transition-colors',
+      selected ? 'ui:border-primary' : 'ui:border-transparent ui:hover:border-primary/40',
       className
     )}
   >
-    {#if selected}
-      <div
-        class="ui:absolute ui:top-0 ui:left-0 ui:z-30 ui:-translate-y-full ui:flex ui:items-center ui:gap-1.5 ui:rounded-t-md ui:bg-primary ui:px-2 ui:py-1 ui:text-xs ui:font-medium ui:text-primary-foreground ui:shadow-sm ui:pointer-events-none"
-      >
-        {#if Icon}
-          <Icon size={14} class="ui:size-3.5" />
-        {/if}
-        <span>{ctx.labelFor(sectionKey)}</span>
-      </div>
-    {/if}
+    <div
+      class={cn(
+        'ui:absolute ui:top-0 ui:left-0 ui:z-30 ui:-translate-y-full ui:flex ui:items-center ui:gap-1.5 ui:rounded-t-md ui:bg-primary ui:px-2 ui:py-1 ui:text-xs ui:font-medium ui:text-primary-foreground ui:shadow-sm ui:pointer-events-none ui:transition-opacity',
+        selected ? 'ui:opacity-100' : 'ui:opacity-0 ui:group-hover:opacity-100'
+      )}
+    >
+      {#if Icon}
+        <Icon size={14} class="ui:size-3.5" />
+      {/if}
+      <span>{ctx.labelFor(sectionKey)}</span>
+    </div>
     {@render children()}
   </div>
 {/if}
diff --git a/packages/utils/src/functions/currency.ts b/packages/utils/src/functions/currency.ts
new file mode 100644
index 00000000..5c676c46
--- /dev/null
+++ b/packages/utils/src/functions/currency.ts
@@ -0,0 +1,11 @@
+/** Locale-aware currency formatter for course prices (NGN and USD). */
+export function getCurrencyFormatter(currency: string | undefined = 'USD') {
+  const normalizedCurrency = currency === 'NGN' ? 'NGN' : 'USD';
+  const locale = normalizedCurrency === 'NGN' ? 'en-NG' : 'en-US';
+
+  return new Intl.NumberFormat(locale, {
+    style: 'currency',
+    currency: normalizedCurrency,
+    minimumFractionDigits: 2
+  });
+}
diff --git a/packages/utils/src/functions/index.ts b/packages/utils/src/functions/index.ts
index bf6fe4df..c1c70430 100644
--- a/packages/utils/src/functions/index.ts
+++ b/packages/utils/src/functions/index.ts
@@ -1,4 +1,5 @@
 export * from './array';
+export * from './currency';
 export * from './fileValidation';
 export * from './sanitize';
 export * from './slug';