diff --git a/bun.lockb b/bun.lockb
index edade209..d5737872 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/src/lib/components/chart/rampricehistory.svelte b/src/lib/components/chart/rampricehistory.svelte
index 3d7cdf48..0e4ea3f5 100644
--- a/src/lib/components/chart/rampricehistory.svelte
+++ b/src/lib/components/chart/rampricehistory.svelte
@@ -9,30 +9,29 @@
 	import { Card, Stack } from '$lib/components/layout';
 	import { Asset } from '@wharfkit/antelope';
 	import Select from '../select/select.svelte';
+	import type { ExtendedSelectOption } from '../select/types';
 
 	interface Props {
 		data: { date: Date; value: Asset }[];
-		debug?: boolean;
 	}
 
-	let { data, debug = true }: Props = $props();
+	let { data }: Props = $props();
 
 	let ctx: HTMLCanvasElement;
 	let chart: Chart<'line'>;
 
-	const range = [
+	const range: ExtendedSelectOption[] = [
 		{ label: '1D', value: 1 },
 		{ label: '1W', value: 7 },
 		{ label: '1M', value: 30 },
 		{ label: '1Y', value: 365 }
 	];
 
-	let selectedRange = $state(range[1]);
+	let selectedRange: ExtendedSelectOption = $state(range[1]);
 
 	let dataRange = $derived.by(() => {
 		const rangeEndDate = dayjs(data[0].date);
-		const rangeStartDate = rangeEndDate.subtract(selectedRange.value, 'day');
-		debug && $inspect({ rangeStartDate, rangeEndDate });
+		const rangeStartDate = rangeEndDate.subtract(Number(selectedRange.value), 'day');
 		return data.filter(({ date }) => dayjs(date).isAfter(rangeStartDate));
 	});
 
@@ -96,10 +95,6 @@
 					legend: {
 						display: false
 					}
-					// decimation: {
-					// 	enabled: true,
-					// 	algorithm: 'lttb'
-					// }
 				}
 			}
 		});
@@ -110,9 +105,6 @@
 		chart.data.datasets[0].data = values;
 		chart.update();
 	});
-
-	debug &&
-		$inspect({ dataRangeLength: dataRange.length, currentDate: currentPoint.date, percentChange });
 </script>
 
 <Card>
diff --git a/src/lib/components/select/elements/index.ts b/src/lib/components/select/elements/index.ts
new file mode 100644
index 00000000..94d4cdf6
--- /dev/null
+++ b/src/lib/components/select/elements/index.ts
@@ -0,0 +1,3 @@
+export { default as SelectMenu } from './menu.svelte';
+export { default as SelectTrigger } from './trigger.svelte';
+export { default as SelectItem } from './item.svelte';
diff --git a/src/lib/components/select/elements/item.svelte b/src/lib/components/select/elements/item.svelte
new file mode 100644
index 00000000..7d5313f6
--- /dev/null
+++ b/src/lib/components/select/elements/item.svelte
@@ -0,0 +1,53 @@
+<script lang="ts">
+	import { melt } from '@melt-ui/svelte';
+	import { Check } from 'lucide-svelte';
+	import type { Readable } from 'svelte/store';
+	import type { ExtendedSelectOption } from '../types';
+
+	interface Props {
+		variant?: 'pill' | 'form';
+		id: string;
+		// Upstream bug: https://github.com/melt-ui/melt-ui/issues/974
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		option: any;
+		item: ExtendedSelectOption;
+		isSelected: Readable<(value: unknown) => boolean>;
+	}
+
+	const { option, isSelected, ...props }: Props = $props();
+</script>
+
+<div
+	class="
+	relative
+	grid
+	cursor-pointer
+	grid-cols-[16px_1fr]
+	items-center
+	gap-2
+	rounded-xl
+	px-2
+	py-1
+	font-medium
+	hover:bg-solar-500
+	hover:text-black/95
+	focus:z-10
+	focus:text-solar-950
+	data-[variant=form]:rounded-sm
+	data-[variant=pill]:rounded-xl
+	data-[highlighted=true]:bg-solar-500
+	data-[highlighted=true]:text-solar-950
+	data-[disabled]:opacity-50
+	"
+	data-variant={props.variant}
+	use:melt={$option(props.item)}
+>
+	{#if props.item.image && typeof props.item.image === 'string'}
+		<img src={props.item.image} alt={props.item.label} class="mr-2 size-4 object-contain" />
+	{:else}
+		<div class="check">
+			<Check class="size-4 {$isSelected(props.item.value) ? 'block' : 'hidden'}" />
+		</div>
+	{/if}
+	{props.item.label}
+</div>
diff --git a/src/lib/components/select/elements/menu.svelte b/src/lib/components/select/elements/menu.svelte
new file mode 100644
index 00000000..6110b1ff
--- /dev/null
+++ b/src/lib/components/select/elements/menu.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+	import { type AnyMeltElement, melt } from '@melt-ui/svelte';
+	import { type Snippet } from 'svelte';
+	import type { Readable } from 'svelte/store';
+	import { fade } from 'svelte/transition';
+	interface Props {
+		variant: 'pill' | 'form';
+		id: string;
+		children: Snippet;
+		open: Readable<boolean>;
+		menu: AnyMeltElement;
+	}
+
+	const { menu, ...props }: Props = $props();
+</script>
+
+{#if props.open}
+	<div
+		class="
+		z-10
+		flex
+		max-h-[300px]
+		flex-col
+		overflow-y-auto
+		border-2
+		border-mineShaft-600
+		bg-shark-950
+		py-1
+		shadow
+		focus:!ring-0
+		data-[variant=form]:rounded-lg
+		data-[variant=pill]:rounded-2xl
+		data-[variant=form]:px-2
+		data-[variant=form]:py-2
+		data-[variant=pill]:px-1
+		data-[variant=pill]:py-1
+		"
+		data-variant={props.variant}
+		use:melt={$menu}
+		transition:fade={{ duration: 100 }}
+		id={props.id + '-menu'}
+	>
+		{@render props.children()}
+	</div>
+{/if}
diff --git a/src/lib/components/select/elements/trigger.svelte b/src/lib/components/select/elements/trigger.svelte
new file mode 100644
index 00000000..340424bb
--- /dev/null
+++ b/src/lib/components/select/elements/trigger.svelte
@@ -0,0 +1,53 @@
+<script lang="ts">
+	import { type AnyMeltElement, melt } from '@melt-ui/svelte';
+	import { ChevronDown } from 'lucide-svelte';
+	import { type Snippet } from 'svelte';
+	import { type Readable } from 'svelte/store';
+
+	interface Props {
+		variant?: 'pill' | 'form';
+		id: string;
+		children: Snippet;
+		open: Readable<boolean>;
+		trigger: AnyMeltElement;
+	}
+
+	const { trigger, open, ...props }: Props = $props();
+</script>
+
+<button
+	class="
+	flex
+	items-center
+	justify-between
+	gap-2
+	border-2
+	border-mineShaft-600
+	bg-transparent
+	pl-4
+	pr-3
+	font-medium
+	transition-opacity
+	hover:opacity-90
+	focus:outline-2
+	focus:outline-solar-500
+	focus-visible:border-transparent
+	focus-visible:outline
+	data-[variant=pill]:h-10
+	data-[variant=form]:rounded-lg
+	data-[variant=pill]:rounded-full
+	data-[variant=form]:py-4
+	"
+	data-variant={props.variant}
+	use:melt={$trigger}
+	aria-label="{props.id}-label"
+	id={props.id}
+>
+	<div class="flex items-center">
+		{@render props.children()}
+	</div>
+	<ChevronDown
+		data-open={$open}
+		class="size-5 transition-transform duration-100 data-[open=true]:rotate-180"
+	/>
+</button>
diff --git a/src/lib/components/select/select.svelte b/src/lib/components/select/select.svelte
index 309f9474..c0aa6e5d 100644
--- a/src/lib/components/select/select.svelte
+++ b/src/lib/components/select/select.svelte
@@ -1,22 +1,15 @@
-<script lang="ts" context="module">
-	export interface OptionWithImage<T = unknown> extends SelectOption<T> {
-		image?: string;
-	}
-</script>
-
 <script lang="ts">
-	import { createSelect, createSync, melt, type SelectOption } from '@melt-ui/svelte';
-	import { fade } from 'svelte/transition';
-	import Check from 'lucide-svelte/icons/check';
-	import ChevronDown from 'lucide-svelte/icons/chevron-down';
+	import { createSelect, createSync } from '@melt-ui/svelte';
 	import type { ChangeFn } from '@melt-ui/svelte/internal/helpers';
+	import { SelectTrigger, SelectMenu, SelectItem } from './elements';
+	import type { ExtendedSelectOption, SelectOptionVariant } from './types';
 
 	interface Props {
-		options: OptionWithImage[];
-		selected: OptionWithImage;
-		variant?: 'pill' | 'form';
+		options: ExtendedSelectOption[];
+		selected: ExtendedSelectOption;
+		onSelectedChange?: ChangeFn<ExtendedSelectOption | undefined>;
+		variant?: SelectOptionVariant;
 		id: string;
-		onSelectedChange?: ChangeFn<SelectOption | undefined>;
 		required?: boolean;
 		disabled?: boolean;
 		multiple?: boolean;
@@ -40,7 +33,6 @@
 		states: { open, selected, selectedLabel },
 		helpers: { isSelected }
 	} = createSelect({
-		defaultSelected: _selected || options[0],
 		onSelectedChange,
 		required,
 		disabled,
@@ -53,120 +45,29 @@
 		}
 	});
 
+	// Sync the selected option with the passed in selected prop
 	const sync = createSync({ selected });
 	$effect(() => {
 		sync.selected(_selected, (v) => (_selected = v || options[0]));
 	});
 
-	/** Set the value from a parent */
-	export function set(option: OptionWithImage | null) {
-		if (!option) {
-			_selected = options[0];
-		} else {
-			_selected = option;
-		}
-	}
-
-	let selectedOption = $derived.by(() => options.find((o) => o.label === $selectedLabel));
+	// Get the whole option object
+	let selectedOption = $derived.by(
+		() => options.find((o) => o.label === $selectedLabel) || options[0]
+	);
 </script>
 
-<button
-	class="
-	flex
-	items-center
-	justify-between
-	gap-2
-	border-2
-	border-mineShaft-600
-	bg-transparent
-	pl-4
-	pr-3
-	font-medium
-	transition-opacity
-	hover:opacity-90
-	focus:outline-2
-	focus:outline-solar-500
-	focus-visible:border-transparent
-	focus-visible:outline
-	"
-	class:rounded-full={variant === 'pill'}
-	class:rounded-lg={variant === 'form'}
-	class:h-10={variant === 'pill'}
-	class:py-4={variant === 'form'}
-	use:melt={$trigger}
-	aria-label="{id}-label"
-	{id}
->
-	<div class="flex items-center">
-		{#if selectedOption?.image}
-			<img
-				src={selectedOption.image}
-				alt={selectedOption.label}
-				class="mr-2 size-5 object-contain"
-			/>
-		{/if}
-		{$selectedLabel || 'Select an option'}
-	</div>
-	<ChevronDown class="size-5 transition-transform duration-100 {$open ? 'rotate-180' : ''}" />
-</button>
+<SelectTrigger {variant} {id} {open} {trigger}>
+	{#if selectedOption.image && typeof selectedOption.image === 'string'}
+		<img src={selectedOption.image} alt={selectedOption.label} class="mr-2 size-5 object-contain" />
+	{/if}
+	{$selectedLabel || 'Select an option'}
+</SelectTrigger>
 
 {#if $open}
-	<div
-		class="
-		z-10
-		flex
-		max-h-[300px]
-		flex-col
-		overflow-y-auto
-		border-2
-		border-mineShaft-600
-		bg-shark-950
-		py-1
-		shadow
-		focus:!ring-0
-		"
-		class:px-1={variant === 'pill'}
-		class:px-2={variant === 'form'}
-		class:py-1={variant === 'pill'}
-		class:py-2={variant === 'form'}
-		class:rounded-2xl={variant === 'pill'}
-		class:rounded-lg={variant === 'form'}
-		use:melt={$menu}
-		transition:fade={{ duration: 100 }}
-	>
+	<SelectMenu {id} {variant} {menu} {open}>
 		{#each options as item}
-			<div
-				class="
-				relative
-				grid
-				cursor-pointer
-				grid-cols-[16px_1fr]
-				items-center
-				gap-2
-				rounded-xl
-				px-2
-				py-1
-				font-medium
-				hover:bg-solar-500
-				focus:z-10
-				focus:text-solar-950
-				data-[highlighted]:bg-solar-500
-				data-[highlighted]:text-solar-950
-				data-[disabled]:opacity-50
-				"
-				class:rounded-xl={variant === 'pill'}
-				class:rounded-sm={variant === 'form'}
-				use:melt={$option(item)}
-			>
-				{#if item.image}
-					<img src={item.image} alt={item.label} class="mr-2 size-4 object-contain" />
-				{:else}
-					<div class="check">
-						<Check class="size-4 {$isSelected(item.value) ? 'block' : 'hidden'}" />
-					</div>
-				{/if}
-				{item.label}
-			</div>
+			<SelectItem {id} {option} {variant} {item} {isSelected} />
 		{/each}
-	</div>
+	</SelectMenu>
 {/if}
diff --git a/src/lib/components/select/token.svelte b/src/lib/components/select/token.svelte
index ee158049..53a33b69 100644
--- a/src/lib/components/select/token.svelte
+++ b/src/lib/components/select/token.svelte
@@ -1,78 +1,128 @@
 <script lang="ts">
-	import type { ComponentProps } from 'svelte';
 	import { TokenBalance } from '@wharfkit/common';
+	import { createSelect, type SelectOption } from '@melt-ui/svelte';
+	import { SelectTrigger, SelectMenu, SelectItem } from './elements';
+	import { writable } from 'svelte/store';
 
-	import Select, { type OptionWithImage } from './select.svelte';
+	interface TokenSelectOption extends SelectOption<number> {
+		image?: string;
+	}
 
-	// Override the options and selected props to be more specific to the NetworkSelect component
-	interface NetworkSelectProps extends Omit<ComponentProps<Select>, 'options' | 'selected'> {
+	interface Props {
 		options: TokenBalance[];
 		selected: TokenBalance;
 		debug?: boolean;
+		id: string;
+		disabled?: boolean;
+		required?: boolean;
+		multiple?: boolean;
+		sameWidth?: boolean;
 	}
 
 	let {
 		selected: _selected = $bindable(),
+		id,
 		options,
 		debug = false,
-		...props
-	}: NetworkSelectProps = $props();
-
-	// Convert the options to the format the Select component expects
-	const balanceOptions: OptionWithImage<TokenBalance>[] = $derived.by(() => {
-		return options.map((balance: TokenBalance) => {
-			return {
-				value: balance,
-				label: `${String(balance.asset.symbol.code)} (${balance.asset.quantity})`,
-				image: balance.metadata.logo
-			};
-		});
+		disabled = false,
+		required = false,
+		multiple = false,
+		sameWidth = true
+	}: Props = $props();
+
+	const variant = 'form';
+
+	const label = (balance: TokenBalance) =>
+		`${String(balance.asset.symbol.code)} (${balance.asset.quantity})`;
+
+	const image = (balance: TokenBalance) => balance.metadata.logo;
+
+	const createOption = (balance: TokenBalance, index: number): TokenSelectOption => {
+		return {
+			value: index,
+			label: label(balance),
+			image: image(balance)
+		};
+	};
+
+	// Convert the options to the format of SelectOption<number>
+	// Using an index as the value instead of the TokenBalance object
+	const balanceOptions: TokenSelectOption[] = options.map((balance: TokenBalance, index) =>
+		createOption(balance, index)
+	);
+
+	// Create a typed store for the selected option
+	let selectedTokenOption = writable<TokenSelectOption>(balanceOptions[0]);
+
+	// Build the select component with the custom store
+	const {
+		elements: { trigger, menu, option },
+		states: { open, selected, selectedLabel },
+		helpers: { isSelected }
+	} = createSelect({
+		selected: selectedTokenOption,
+		required,
+		disabled,
+		multiple,
+		forceVisible: true,
+		positioning: {
+			placement: 'bottom-start',
+			fitViewport: true,
+			sameWidth
+		}
 	});
 
-	// Create a derived store to get the selected option
-	let selectedOption: OptionWithImage<TokenBalance> = $state({
-		value: _selected,
-		label: `${String(_selected.asset.symbol.code)} (${_selected.asset.quantity})`,
-		image: _selected.metadata.logo
+	// Get the whole TokenBalance object from the selected option by index
+	let selectedTokenBalance = $derived.by(() => options[$selectedTokenOption.value] || options[0]);
+
+	// Get the image from the selected TokenBalance object
+	let selectedTokenImage = $derived(image(selectedTokenBalance));
+
+	// Sync the currently selected object with the bound selected prop
+	$effect(() => {
+		if (selected) {
+			_selected = selectedTokenBalance;
+		}
 	});
 
 	/** Set the value from a parent */
 	export function set(balance: TokenBalance | null) {
 		if (!balance) {
-			_selected = balanceOptions[0].value;
+			_selected = options[0];
 		} else {
 			_selected = balance;
-			const option = balanceOptions.find((o) => TokenBalance.from(o.value).equals(balance));
+			const option = balanceOptions.find((o) =>
+				TokenBalance.from(options[o.value]).equals(balance)
+			);
 			if (option) {
-				selectedOption = option;
+				selectedTokenOption.set(option);
 			}
 		}
 	}
-
-	// Sync the selected option with the passed in selected prop
-	$effect(() => {
-		const selected = options.find((o) => TokenBalance.from(o).equals(selectedOption.value));
-		if (selected) {
-			_selected = selected;
-		}
-	});
 </script>
 
-<Select
-	variant="form"
-	bind:selected={selectedOption}
-	sameWidth={false}
-	options={balanceOptions}
-	{...props}
-/>
+<SelectTrigger {variant} {id} {open} {trigger}>
+	{#if selectedTokenImage}
+		<img src={selectedTokenImage} alt={$selectedLabel} class="mr-2 size-5 object-contain" />
+	{/if}
+	{$selectedLabel || 'Select an option'}
+</SelectTrigger>
+
+{#if $open}
+	<SelectMenu {id} {variant} {menu} {open}>
+		{#each balanceOptions as item}
+			<SelectItem {id} {option} {variant} {item} {isSelected} />
+		{/each}
+	</SelectMenu>
+{/if}
 
 {#if debug}
 	<h3>Component State</h3>
 	<pre>
 
-_selected (store): {JSON.stringify(_selected)}
-selectedOption (store): {JSON.stringify(selectedOption)}
-options (store): {JSON.stringify(options)}
-balanceOptions (store): {JSON.stringify(balanceOptions)}
+_selected (store): {JSON.stringify(_selected, null, 2)}
+selectedOption (store): {JSON.stringify($selectedTokenOption, null, 2)}
+options (store): {JSON.stringify(options, null, 2)}
+balanceOptions (store): {JSON.stringify(balanceOptions, null, 2)}
 </pre>
 {/if}
diff --git a/src/lib/components/select/types.d.ts b/src/lib/components/select/types.d.ts
new file mode 100644
index 00000000..aeaac654
--- /dev/null
+++ b/src/lib/components/select/types.d.ts
@@ -0,0 +1,7 @@
+import { type SelectOption } from '@melt-ui/svelte';
+
+interface ExtendedSelectOption extends SelectOption {
+	image?: string;
+}
+
+export type SelectOptionVariant = 'pill' | 'form';
diff --git a/src/lib/components/summary/eosio/buyram.svelte b/src/lib/components/summary/eosio/buyram.svelte
new file mode 100644
index 00000000..2ad63944
--- /dev/null
+++ b/src/lib/components/summary/eosio/buyram.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { formatCurrency } from '$lib/i18n';
+	import type { Asset } from '@wharfkit/antelope';
+	import { Card, Stack, Switcher } from '$lib/components/layout';
+	import * as SystemContract from '$lib/wharf/contracts/system';
+
+	interface BuyRAMProps {
+		action: {
+			data: SystemContract.Types.buyram;
+		};
+		class?: string;
+		value?: Asset;
+	}
+
+	const { action, class: className = '', value, ...props }: BuyRAMProps = $props();
+</script>
+
+<Card class="gap-5 text-center {className}">
+	<h3 class="h3">Buy RAM</h3>
+	<Switcher threshold="20rem">
+		<Stack class="gap-0">
+			<p class="caption">Payer</p>
+			<p class="h3">{action.data.payer}</p>
+		</Stack>
+		<Stack class="gap-0">
+			<p class="caption">Receiver</p>
+			<p class="h3">{action.data.receiver}</p>
+		</Stack>
+		<Stack class="gap-0">
+			<p class="caption">Amount</p>
+			<p class="h3">{action.data.quant}</p>
+			{#if value}
+				<p class="mt-1.5 self-start rounded bg-shark-800/60 px-2">USD {formatCurrency(value)}</p>
+			{/if}
+		</Stack>
+	</Switcher>
+</Card>
diff --git a/src/lib/components/summary/eosio/buyrambytes.svelte b/src/lib/components/summary/eosio/buyrambytes.svelte
new file mode 100644
index 00000000..ce79db50
--- /dev/null
+++ b/src/lib/components/summary/eosio/buyrambytes.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { formatCurrency } from '$lib/i18n';
+	import type { Asset } from '@wharfkit/antelope';
+	import { Card, Stack, Switcher } from '$lib/components/layout';
+	import * as SystemContract from '$lib/wharf/contracts/system';
+
+	interface BuyRAMBytesProps {
+		action: {
+			data: SystemContract.Types.buyrambytes;
+		};
+		class?: string;
+		value?: Asset;
+	}
+
+	const { action, class: className = '', value, ...props }: BuyRAMBytesProps = $props();
+</script>
+
+<Card class="gap-5 text-center {className}">
+	<h3 class="h3">Buy RAM Bytes</h3>
+	<Switcher threshold="20rem">
+		<Stack class="gap-0">
+			<p class="caption">Payer</p>
+			<p class="h3">{action.data.payer}</p>
+		</Stack>
+		<Stack class="gap-0">
+			<p class="caption">Receiver</p>
+			<p class="h3">{action.data.receiver}</p>
+		</Stack>
+		<Stack class="gap-0">
+			<p class="caption">Bytes</p>
+			<p class="h3">{action.data.bytes}</p>
+			{#if value}
+				<p class="mt-1.5 self-start rounded bg-shark-800/60 px-2">USD {formatCurrency(value)}</p>
+			{/if}
+		</Stack>
+	</Switcher>
+</Card>
diff --git a/src/lib/components/summary/eosio/sellram.svelte b/src/lib/components/summary/eosio/sellram.svelte
new file mode 100644
index 00000000..4c6fd7a2
--- /dev/null
+++ b/src/lib/components/summary/eosio/sellram.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { formatCurrency } from '$lib/i18n';
+	import type { Asset } from '@wharfkit/antelope';
+	import { Card, Stack, Switcher } from '$lib/components/layout';
+	import * as SystemContract from '$lib/wharf/contracts/system';
+
+	interface SellRAMProps {
+		action: {
+			data: SystemContract.Types.sellram;
+		};
+		class?: string;
+		value?: Asset;
+	}
+
+	const { action, class: className = '', value, ...props }: SellRAMProps = $props();
+</script>
+
+<Card class="gap-5 text-center {className}">
+	<h3 class="h3">Sell RAM</h3>
+	<Switcher threshold="20rem">
+		<Stack class="gap-0">
+			<p class="caption">Account</p>
+			<p class="h3">{action.data.account}</p>
+		</Stack>
+		<Stack class="gap-0">
+			<p class="caption">Bytes</p>
+			<p class="h3">{action.data.bytes}</p>
+			{#if value}
+				<p class="mt-1.5 self-start rounded bg-shark-800/60 px-2">USD {formatCurrency(value)}</p>
+			{/if}
+		</Stack>
+	</Switcher>
+</Card>
diff --git a/src/routes/[network]/(account)/ram/+page.svelte b/src/routes/[network]/(account)/ram/+page.svelte
index 7c8fcae1..20ff8dac 100644
--- a/src/routes/[network]/(account)/ram/+page.svelte
+++ b/src/routes/[network]/(account)/ram/+page.svelte
@@ -1,38 +1,94 @@
 <script lang="ts">
+	import { getContext } from 'svelte';
+	import { Asset } from '@wharfkit/antelope';
+
 	import RamPriceHistory from '$lib/components/chart/rampricehistory.svelte';
+	import RAM from '$lib/components/elements/ram.svelte';
+	import type { UnicoveContext } from '$lib/state/client.svelte';
+	import Pageheader from '$lib/components/pageheader.svelte';
+	import Card from '$lib/components/layout/box/card.svelte';
+	import Button from '$lib/components/button/button.svelte';
+	import { calculateValue } from '$lib/utils.js';
+
 	const { data } = $props();
+	const context = getContext<UnicoveContext>('state');
 </script>
 
-<h3>Current RAM Price</h3>
+{#if context.account}
+	<Pageheader title="Your RAM" subtitle="RAM usage for your account" />
+	<Card class="p-4">
+		{#if context.account.ram}
+			<div class="space-y-4">
+				<div class="flex items-center justify-between">
+					<span class="text-lg font-semibold">Total RAM:</span>
+					<RAM bytes={Number(context.account.ram.max || 0)} />
+				</div>
+				<div class="border-t pt-4">
+					<h4 class="mb-2 text-lg font-semibold">Value:</h4>
+					{#if context.account.network.ramprice}
+						<div class="flex flex-col space-y-2">
+							<div class="flex justify-between">
+								<span>Network Token:</span>
+								<span
+									>{calculateValue(
+										Asset.fromUnits(context.account.ram.max, '3,RAM'),
+										context.account.network.ramprice.eos
+									)}</span
+								>
+							</div>
+							{#if context.account.network.ramprice.usd}
+								<div class="flex justify-between">
+									<span>USD:</span>
+									<span
+										>{calculateValue(
+											Asset.fromUnits(context.account.ram.max, '3,RAM'),
+											context.account.network.ramprice.usd
+										)}</span
+									>
+								</div>
+							{/if}
+						</div>
+					{:else}
+						<p class="text-gray-400">RAM price information unavailable</p>
+					{/if}
+				</div>
+			</div>
+		{:else}
+			<p class="text-center text-gray-400">Loading your RAM information...</p>
+		{/if}
+	</Card>
+	<Button href="/{data.network}/account/{context.account.name}/ram">View Account RAM Details</Button
+	>
+{:else}
+	<Pageheader title="RAM Information" subtitle="Login to view your RAM usage" />
+	<Card>To view your RAM usage, please log in or create an account.</Card>
+{/if}
+
 {#if data.network && data.network.ramstate}
-	<p>EOS: {String(data.network.ramstate.price_per_kb(1))}</p>
-	{#if data.network.ramprice && data.network.ramprice.usd}
-		<p>USD: ${data.network.ramprice.usd}</p>
-	{/if}
+	<Pageheader title="Current RAM Price" />
+	<Card class="p-4">
+		<h4 class="mb-2 text-lg font-semibold">Current RAM Price</h4>
+		<div class="flex flex-col space-y-2">
+			<div class="flex justify-between">
+				<span>Network Token:</span>
+				<span>{String(data.network.ramstate.price_per_kb(1))}/KB</span>
+			</div>
+			{#if data.network.ramprice && data.network.ramprice.usd}
+				<div class="flex justify-between">
+					<span>USD:</span>
+					<span>${data.network.ramprice.usd.value}/KB</span>
+				</div>
+			{/if}
+		</div>
+	</Card>
 {:else}
 	<p>Loading current RAM price...</p>
 {/if}
 
 {#if data.network.supports('timeseries')}
-	{#if data.historicalPrices.length > 0}
-		<h3>Historical RAM Prices</h3>
+	{#if data.historicalPrices && data.historicalPrices.length > 0}
+		<Pageheader title="Historical RAM Prices" />
 		<RamPriceHistory data={data.historicalPrices} />
-		<table class="float-left max-w-lg border-collapse">
-			<thead>
-				<tr class="bg-gray-60">
-					<th class="border p-1 text-left">Date</th>
-					<th class="border p-1 text-left">Price</th>
-				</tr>
-			</thead>
-			<tbody>
-				{#each data.historicalPrices as price}
-					<tr>
-						<td class="border p-1">{price.date.toLocaleString()}</td>
-						<td class="border p-1">{String(price.value)}</td>
-					</tr>
-				{/each}
-			</tbody>
-		</table>
 	{:else}
 		<p>No historical RAM prices available.</p>
 	{/if}
diff --git a/src/routes/[network]/(account)/ram/+page.ts b/src/routes/[network]/(account)/ram/+page.ts
index 9d684f3e..34e7d0b2 100644
--- a/src/routes/[network]/(account)/ram/+page.ts
+++ b/src/routes/[network]/(account)/ram/+page.ts
@@ -24,7 +24,7 @@ export async function load({ fetch, params }: LoadEvent): Promise<LoadData> {
 		const parsedResponse: any[] = await response.json();
 		historicalPrices = parsedResponse.map((price: { date: string; value: number }) => ({
 			date: new Date(price.date),
-			value: Asset.from(price.value / 10000, chain.systemToken.symbol)
+			value: Asset.from(price.value / 10000, chain.systemToken?.symbol || '0,UNKNOWN')
 		}));
 	} catch (error: unknown) {
 		console.error('Error fetching historical RAM prices:', error);
diff --git a/src/routes/[network]/(account)/ram/buy/bytes/+page.svelte b/src/routes/[network]/(account)/ram/buy/bytes/+page.svelte
index bf52e190..bf0b2099 100644
--- a/src/routes/[network]/(account)/ram/buy/bytes/+page.svelte
+++ b/src/routes/[network]/(account)/ram/buy/bytes/+page.svelte
@@ -5,6 +5,8 @@
 	import { getSetting } from '$lib/state/settings.svelte.js';
 	import type { UnicoveContext } from '$lib/state/client.svelte';
 
+	import SummaryBuyRAMBytes from '$lib/components/summary/eosio/buyrambytes.svelte';
+
 	import Button from '$lib/components/button/button.svelte';
 	import Code from '$lib/components/code.svelte';
 	import Label from '$lib/components/input/label.svelte';
@@ -109,6 +111,10 @@
 			<span>Total Cost</span>
 			<span>{buyRamState.bytesCost}</span>
 		</div>
+
+		{#if buyRamState.valid}
+			<SummaryBuyRAMBytes action={{ data: buyRamState.toJSON() }} />
+		{/if}
 	</Stack>
 
 	<Button type="submit" class="mt-4 w-full" disabled={!buyRamState.valid}>Confirm Buy RAM</Button>
diff --git a/src/routes/[network]/(account)/ram/buy/tokens/+page.svelte b/src/routes/[network]/(account)/ram/buy/tokens/+page.svelte
index c4df93d1..05235004 100644
--- a/src/routes/[network]/(account)/ram/buy/tokens/+page.svelte
+++ b/src/routes/[network]/(account)/ram/buy/tokens/+page.svelte
@@ -5,6 +5,8 @@
 	import { getSetting } from '$lib/state/settings.svelte.js';
 	import type { UnicoveContext } from '$lib/state/client.svelte';
 
+	import SummaryBuyRAM from '$lib/components/summary/eosio/buyram.svelte';
+
 	import Button from '$lib/components/button/button.svelte';
 	import Code from '$lib/components/code.svelte';
 	import Label from '$lib/components/input/label.svelte';
@@ -108,6 +110,9 @@
 			<span>Total Cost</span>
 			<span>{buyRamState.bytesCost}</span>
 		</div>
+		{#if buyRamState.valid}
+			<SummaryBuyRAM action={{ data: buyRamState.toJSON() }} />
+		{/if}
 	</Stack>
 
 	<Button type="submit" class="mt-4 w-full" disabled={!buyRamState.valid}>Confirm Buy RAM</Button>
diff --git a/src/routes/[network]/(account)/ram/sell/+layout.svelte b/src/routes/[network]/(account)/ram/sell/+layout.svelte
index 173f8e57..b0577fa1 100644
--- a/src/routes/[network]/(account)/ram/sell/+layout.svelte
+++ b/src/routes/[network]/(account)/ram/sell/+layout.svelte
@@ -10,7 +10,7 @@
 		return [
 			{
 				href: `/${network}/ram/sell/tokens`,
-				text: String(data.network.chain.systemToken.symbol.code)
+				text: String(data.network.chain.systemToken?.symbol.code || '')
 			},
 			{ href: `/${network}/ram/sell/bytes`, text: 'Bytes' }
 		];
diff --git a/src/routes/[network]/(account)/ram/sell/bytes/+page.svelte b/src/routes/[network]/(account)/ram/sell/bytes/+page.svelte
index 2d2fe235..7ee8f198 100644
--- a/src/routes/[network]/(account)/ram/sell/bytes/+page.svelte
+++ b/src/routes/[network]/(account)/ram/sell/bytes/+page.svelte
@@ -4,6 +4,7 @@
 
 	import { getSetting } from '$lib/state/settings.svelte.js';
 	import type { UnicoveContext } from '$lib/state/client.svelte';
+	import SummarySellRAM from '$lib/components/summary/eosio/sellram.svelte';
 
 	import Button from '$lib/components/button/button.svelte';
 	import Code from '$lib/components/code.svelte';
@@ -114,6 +115,9 @@
 			<span>Expected To Receive:</span>
 			<span>~ {sellRamState.expectedToReceive}</span>
 		</div>
+		{#if sellRamState.valid}
+			<SummarySellRAM action={{ data: sellRamState.toJSON() }} />
+		{/if}
 	</Stack>
 
 	<Button type="submit" class="mt-4 w-full" disabled={!sellRamState.valid}>Confirm Sell RAM</Button>
diff --git a/src/routes/[network]/(account)/ram/sell/state.svelte.ts b/src/routes/[network]/(account)/ram/sell/state.svelte.ts
index d865e844..97a8051a 100644
--- a/src/routes/[network]/(account)/ram/sell/state.svelte.ts
+++ b/src/routes/[network]/(account)/ram/sell/state.svelte.ts
@@ -30,18 +30,21 @@ export class SellRAMState {
 
 	public bytesValue: Asset = $derived(
 		this.format === 'units' && this.bytes !== undefined
-			? Asset.from((this.bytes * this.pricePerKB.value) / 1000, this.chain.systemToken.symbol)
+			? Asset.from(
+					(this.bytes * this.pricePerKB.value) / 1000,
+					this.chain.systemToken?.symbol || '0,UNKNOWN'
+				)
 			: this.tokens
 	);
 
 	public fee: Asset = $derived(
-		Asset.from(this.bytesValue.value * 0.005, this.chain.systemToken.symbol)
+		Asset.from(this.bytesValue.value * 0.005, this.chain.systemToken?.symbol || '0,UNKNOWN')
 	);
 
 	public expectedToReceive: Asset = $derived(
 		Asset.fromUnits(
 			this.bytesValue.units.subtracting(this.fee.units),
-			this.chain.systemToken.symbol
+			this.chain.systemToken?.symbol || '0,UNKNOWN'
 		)
 	);
 
@@ -70,7 +73,7 @@ export class SellRAMState {
 
 	reset() {
 		this.bytes = undefined;
-		this.tokens = Asset.fromUnits(0, this.chain.systemToken.symbol);
+		this.tokens = Asset.fromUnits(0, this.chain.systemToken?.symbol || '0,UNKNOWN');
 	}
 
 	toJSON() {
diff --git a/src/routes/[network]/(account)/ram/sell/tokens/+page.svelte b/src/routes/[network]/(account)/ram/sell/tokens/+page.svelte
index a8776120..c9450a33 100644
--- a/src/routes/[network]/(account)/ram/sell/tokens/+page.svelte
+++ b/src/routes/[network]/(account)/ram/sell/tokens/+page.svelte
@@ -5,6 +5,8 @@
 	import { getSetting } from '$lib/state/settings.svelte.js';
 	import type { UnicoveContext } from '$lib/state/client.svelte';
 
+	import SummarySellRAM from '$lib/components/summary/eosio/sellram.svelte';
+
 	import Button from '$lib/components/button/button.svelte';
 	import Code from '$lib/components/code.svelte';
 	import Label from '$lib/components/input/label.svelte';
@@ -112,6 +114,10 @@
 			<span>Expected To Receive:</span>
 			<span>~ {sellRamState.expectedToReceive}</span>
 		</div>
+
+		{#if sellRamState.valid}
+			<SummarySellRAM action={{ data: sellRamState.toJSON() }} />
+		{/if}
 	</Stack>
 
 	<Button type="submit" class="mt-4 w-full" disabled={!sellRamState.valid}>Confirm Sell RAM</Button>
diff --git a/src/routes/[network]/(dev)/debug/components/sections/charts.svelte b/src/routes/[network]/(dev)/debug/components/sections/charts.svelte
index b0baf39d..f335be73 100644
--- a/src/routes/[network]/(dev)/debug/components/sections/charts.svelte
+++ b/src/routes/[network]/(dev)/debug/components/sections/charts.svelte
@@ -6,5 +6,5 @@
 <Stack id="charts">
 	<h2 class="h2">Charts</h2>
 	<h3 class="h3">Bar Chart</h3>
-	<BarChart title="Staking Yield History" />
+	<BarChart data={[]} title="Staking Yield History" />
 </Stack>
diff --git a/src/routes/[network]/(dev)/debug/components/sections/select.svelte b/src/routes/[network]/(dev)/debug/components/sections/select.svelte
index f679c2c1..b17b092c 100644
--- a/src/routes/[network]/(dev)/debug/components/sections/select.svelte
+++ b/src/routes/[network]/(dev)/debug/components/sections/select.svelte
@@ -1,19 +1,22 @@
 <script lang="ts">
 	import { Cluster, Stack } from '$lib/components/layout';
 	import Select from '$lib/components/select/select.svelte';
+	import type { ExtendedSelectOption } from '$lib/components/select/types';
 	import Label from '$lib/components/input/label.svelte';
 	import { Chains, TokenBalance, TokenIdentifier } from '@wharfkit/common';
 	import TokenSelect from '$lib/components/select/token.svelte';
+	import type { SelectOption } from '@melt-ui/svelte';
+	import Button from '$lib/components/button/button.svelte';
 
-	const options = [
+	const options: SelectOption[] = [
 		{ value: 30, label: '30d' },
 		{ value: 60, label: '60d' },
 		{ value: 90, label: '90d' },
 		{ value: 365, label: '365d' }
 	];
-	let selected = $state(options[1]);
+	let selected = $state(options[0]);
 
-	const formOptions = [
+	const formOptions: SelectOption[] = [
 		{ value: 30, label: '30d' },
 		{ value: 60, label: '60d' },
 		{ value: 90, label: '90d' },
@@ -21,7 +24,7 @@
 	];
 	let selectedFormOption = $state(formOptions[1]);
 
-	const imageOptions = [
+	const imageOptions: ExtendedSelectOption[] = [
 		{ value: Chains.EOS.id, label: Chains.EOS.name, image: String(Chains.EOS.getLogo()) },
 		{
 			value: Chains.Jungle4.id,
@@ -80,6 +83,7 @@
 				<Select id="date-range" {options} bind:selected />
 			</Stack>
 			<span>Value in parent: {selected.label}</span>
+			<Button onclick={() => (selected = options[2])}>Test set to 90d</Button>
 		</Cluster>
 	</Stack>
 
diff --git a/src/routes/[network]/(dev)/debug/components/summaries/+page.svelte b/src/routes/[network]/(dev)/debug/components/summaries/+page.svelte
index 855ebc86..57a4f36b 100644
--- a/src/routes/[network]/(dev)/debug/components/summaries/+page.svelte
+++ b/src/routes/[network]/(dev)/debug/components/summaries/+page.svelte
@@ -4,7 +4,9 @@
 	import Deposit from './eosio/deposit.svelte';
 	import Withdraw from './eosio/withdraw.svelte';
 	import Sellrex from './eosio/sellrex.svelte';
-
+	import Buyrambytes from './eosio/buyrambytes.svelte';
+	import Buyram from './eosio/buyram.svelte';
+	import Sellram from './eosio/sellram.svelte';
 	import Transfer from './eosio.token/transfer.svelte';
 </script>
 
@@ -17,6 +19,9 @@
 	<Deposit />
 	<Withdraw />
 	<Sellrex />
+	<Buyram />
+	<Buyrambytes />
+	<Sellram />
 
 	<h3 class="h3">eosio.token</h3>
 	<Transfer />
diff --git a/src/routes/[network]/(dev)/debug/components/summaries/eosio/buyram.svelte b/src/routes/[network]/(dev)/debug/components/summaries/eosio/buyram.svelte
new file mode 100644
index 00000000..200854f8
--- /dev/null
+++ b/src/routes/[network]/(dev)/debug/components/summaries/eosio/buyram.svelte
@@ -0,0 +1,20 @@
+<script>
+	import * as SystemContract from '$lib/wharf/contracts/system';
+	import Code from '$lib/components/code.svelte';
+	import Buyram from '$lib/components/summary/eosio/buyram.svelte';
+
+	const action = {
+		data: SystemContract.Types.buyram.from({
+			payer: 'foo',
+			receiver: 'bar',
+			quant: '10000.0000 EOS'
+		})
+	};
+</script>
+
+<div class="card space-y-4">
+	<h3 class="h3">eosio::buyram</h3>
+	<Code>{JSON.stringify(action, null, 2)}</Code>
+	<h4 class="h4">eosio/buyram.svelte</h4>
+	<Buyram {action} />
+</div>
diff --git a/src/routes/[network]/(dev)/debug/components/summaries/eosio/buyrambytes.svelte b/src/routes/[network]/(dev)/debug/components/summaries/eosio/buyrambytes.svelte
new file mode 100644
index 00000000..2199832c
--- /dev/null
+++ b/src/routes/[network]/(dev)/debug/components/summaries/eosio/buyrambytes.svelte
@@ -0,0 +1,20 @@
+<script>
+	import * as SystemContract from '$lib/wharf/contracts/system';
+	import Code from '$lib/components/code.svelte';
+	import Buyrambytes from '$lib/components/summary/eosio/buyrambytes.svelte';
+
+	const action = {
+		data: SystemContract.Types.buyrambytes.from({
+			payer: 'foo',
+			receiver: 'bar',
+			bytes: 8192
+		})
+	};
+</script>
+
+<div class="card space-y-4">
+	<h3 class="h3">eosio::buyrambytes</h3>
+	<Code>{JSON.stringify(action, null, 2)}</Code>
+	<h4 class="h4">eosio/buyrambytes.svelte</h4>
+	<Buyrambytes {action} />
+</div>
diff --git a/src/routes/[network]/(dev)/debug/components/summaries/eosio/sellram.svelte b/src/routes/[network]/(dev)/debug/components/summaries/eosio/sellram.svelte
new file mode 100644
index 00000000..08852122
--- /dev/null
+++ b/src/routes/[network]/(dev)/debug/components/summaries/eosio/sellram.svelte
@@ -0,0 +1,19 @@
+<script>
+	import * as SystemContract from '$lib/wharf/contracts/system';
+	import Code from '$lib/components/code.svelte';
+	import Sellram from '$lib/components/summary/eosio/sellram.svelte';
+
+	const action = {
+		data: SystemContract.Types.sellram.from({
+			account: 'foo',
+			bytes: 8192
+		})
+	};
+</script>
+
+<div class="card space-y-4">
+	<h3 class="h3">eosio::sellram</h3>
+	<Code>{JSON.stringify(action, null, 2)}</Code>
+	<h4 class="h4">eosio/sellram.svelte</h4>
+	<Sellram {action} />
+</div>