diff --git a/src/components/layout/LabelValue.svelte b/src/components/layout/LabelValue.svelte
index ed3a913..c14a266 100644
--- a/src/components/layout/LabelValue.svelte
+++ b/src/components/layout/LabelValue.svelte
@@ -8,6 +8,8 @@
 	export let value;
 	export let formatValue = false;
 	export let note = false;
+	export let valueNote = false;
+	export let valueNoteTrigger = 'mouseenter focus';
 	export let isClickable = false;
 	export let noPadding = false;
 	export let isSecondaryColor = false;
@@ -20,6 +22,12 @@
 		allowHTML: true
 	};
 
+	$: valueTooltipOptions = {
+		content: valueNote,
+		allowHTML: true,
+		trigger: valueNoteTrigger
+	};
+
 </script>
 
 <style>
@@ -72,11 +80,11 @@
 
 <div class='flex-row' class:padded={hasPadding} class:semipadded={hasSemiPadding} class:noPadding={noPadding}>
 	<div class='label' class:fullOpacity={fullOpacityLabel} class:hasNote={note != false} use:tooltip={tooltipOptions}>{label}</div>
-	<div class='value' on:click|stopPropagation class:clickable={isClickable} class:secondary={isSecondaryColor}>
+	<div class='value' on:click|stopPropagation class:clickable={isClickable} class:secondary={isSecondaryColor} use:tooltip={valueTooltipOptions}>
 		{#if formatValue} 
 			{formatForDisplay(value)}
 		{:else}
 			{@html value}
 		{/if}
 	</div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/components/trade/order/Fee.svelte b/src/components/trade/order/Fee.svelte
index eb5911b..2481b6f 100644
--- a/src/components/trade/order/Fee.svelte
+++ b/src/components/trade/order/Fee.svelte
@@ -2,7 +2,7 @@
 
 	import LabelValue from '@components/layout/LabelValue.svelte'
 
-	import { BPS_DIVIDER } from '@lib/config'
+	import { BPS_DIVIDER, BASE_FEES_BPS } from '@lib/config'
 	import { marketInfos } from '@lib/stores'
 
 	import { formatForDisplay } from '@lib/formatters'
@@ -43,11 +43,43 @@
 	let feeAmount = 0;
 	$: feeAmount = getFeeAmount(totalSize, market, $marketInfos);
 
+	function getFeeRate() {
+		return $marketInfos[market]?.fee || 0;
+	}
+
+	function getBaseFeeRate() {
+		return BASE_FEES_BPS[market] || getFeeRate();
+	}
+
+	function getReferralDiscountRate() {
+		const discount = getBaseFeeRate() - getFeeRate();
+		return discount > 0 ? discount : 0;
+	}
+
+	function getFeeDetails() {
+		const baseFeeRate = getBaseFeeRate();
+		const feeRate = getFeeRate();
+		const referralDiscountRate = getReferralDiscountRate();
+
+		if (!baseFeeRate) return 'Fee details loading...';
+
+		return [
+			`Base fee: ${formatForDisplay(baseFeeRate / 100)}%`,
+			`Referral discount: ${formatForDisplay(referralDiscountRate / 100)}%`,
+			`Current fee: ${formatForDisplay(feeRate / 100)}%`
+		].join('<br>');
+	}
+
+	let feeDetails;
+	$: feeDetails = getFeeDetails(market, $marketInfos);
 
 </script>
 
 <LabelValue 
-	label={`Fee (${formatForDisplay(($marketInfos[market]?.fee || 0)/100)}%)`} 
+	label={`Fee (${formatForDisplay(getFeeRate()/100)}%)`}
 	value={`${feeAmount ? `${formatForDisplay(feeAmount)} ${asset}` : '-'}`}
+	valueNote={feeDetails}
+	valueNoteTrigger='click mouseenter focus'
+	isClickable={true}
 	isSecondaryColor={isSecondaryColor}
-/>
\ No newline at end of file
+/>