diff --git a/solution.javascript b/solution.javascript
new file mode 100644
index 0000000..5d6b5d7
--- /dev/null
+++ b/solution.javascript
@@ -0,0 +1,23 @@
+--- a/src/components/AddRemoveMarginModal/AddRemoveMarginModal.js
++++ b/src/components/AddRemoveMarginModal/AddRemoveMarginModal.js
+@@ -12,16 +12,16 @@ class AddRemoveMarginModal extends Component {
+         <div>
+           <h3>Add/Remove Margin</h3>
+           <p>Current {action} margin: {formatCurrency(margin, { maximumFractionDigits: 2 })}</p>
+           <p>Available wallet balance: {formatCurrency(walletBalance, { maximumFractionDigits: 2 })}</p>
+         </div>
+@@ -35,7 +35,7 @@ class AddRemoveMarginModal extends Component {
+   render() {
+     const { action, margin, walletBalance, formatCurrency } = this.props;
+     
+     return (
+       <div>
+         <h3>Add/Remove Margin</h3>
+-        <p>Current {action} margin: {formatCurrency(margin, { maximumFractionDigits: 2 })}</p>
+-        <p>Available wallet balance: {formatCurrency(walletBalance, { maximumFractionDigits: 2 })}</p>
++        <p>Available margin: {formatCurrency(walletBalance, { maximumFractionDigits: 2 })}</p>
++        <p>Current {action} margin: {formatCurrency(margin, { maximumFractionDigits: 2 })}</p>
++        <p>Available wallet balance: {formatCurrency(walletBalance, { maximumFractionDigits: 2 })}</p>
+       </div>
+     );
+   }
diff --git a/src/components/AddRemoveMarginModal.js b/src/components/AddRemoveMarginModal.js
new file mode 100644
index 0000000..480423a
--- /dev/null
+++ b/src/components/AddRemoveMarginModal.js
@@ -0,0 +1,21 @@
+import React, { useState, useEffect } from 'react';
+import { BigNumber, ethers } from 'ethers';
+
+const AddRemoveMargin = ({ positionManager, userAddress, token }) => {
+  // Your solution would go here
+  return (
+    <div>
+      <h3>Add/Remove Margin</h3>
+      <div>
+        {positionManager && (
+          <div>
+            <h4>Position: {positionManager.id}</h4>
+            <p>Wallet Balance: {positionManager.margin}</p>
+            <p>Available for removal: {positionManager.margin}</p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+export default AddRemoveMargin;
\ No newline at end of file
diff --git a/src/components/Trading/Modals/AddRemoveMarginModal.js b/src/components/Trading/Modals/AddRemoveMarginModal.js
new file mode 100644
index 0000000..e71faa5
--- /dev/null
+++ b/src/components/Trading/Modals/AddRemoveMarginModal.js
@@ -0,0 +1,2 @@
+    "private": "false"
+}
\ No newline at end of file
diff --git a/src/components/modals/AddRemoveMargin.svelte b/src/components/modals/AddRemoveMargin.svelte
new file mode 100644
index 0000000..941a94e
--- /dev/null
+++ b/src/components/modals/AddRemoveMargin.svelte
@@ -0,0 +1,59 @@
+<script>
+	import { onMount } from 'svelte'
+	import { addMargin, removeMargin } from '../../lib/margin'
+	import { walletBalance } from '../../lib/wallet'
+	import { availableMarginToRemove } from '../../lib/positions'
+	import { toFixed } from '../../lib/utils'
+	import Modal from './Modal.svelte'
+
+	export let position = {}
+
+	let amount = ''
+	let walletBalanceValue = 0
+	let availableToRemove = 0
+
+	$: isAdding = type === 'add'
+	$: title = isAdding ? 'Add Margin' : 'Remove Margin'
+	onMount(async () => {
+		// Focus input
+		document.getElementById('margin-amount')?.focus()
+		
+		// Get wallet balance for adding margin
+		if (isAdding) {
+			const unsubscribe = walletBalance.subscribe(value => {
+				walletBalanceValue = value
+			})
+			return () => unsubscribe()
+		} else {
+			// Get available margin to remove
+			availableToRemove = availableMarginToRemove(position)
+		}
+	})
+
+	async function handleSubmit() {
+		</div>
+	</div>
+
+	<div class='balance-info'>
+		{#if isAdding}
+			<span>Wallet Balance: {toFixed(walletBalanceValue, 6)}</span>
+		{:else}
+			<span>Available to Remove: {toFixed(availableToRemove, 6)}</span>
+		{/if}
+	</div>
+
+	<div class='buttons'>
+		<button type='button' class='primary' on:click={handleSubmit}>
+			{title}
+		font-size: 14px;
+		color: var(--text-secondary);
+	}
+	.balance-info {
+		margin-top: 12px;
+		font-size: 13px;
+		color: var(--text-secondary);
+		text-align: right;
+	}
+	.buttons {
+		margin-top: 20px;
+	}
\ No newline at end of file
diff --git a/src/lib/positions.js b/src/lib/positions.js
new file mode 100644
index 0000000..66ca8c8
--- /dev/null
+++ b/src/lib/positions.js
@@ -0,0 +1,11 @@
+// Positions library
+
+export const positions = writable([])
+
+export function availableMarginToRemove(position) {
+	// Calculate available margin that can be removed
+	// This is the position's margin minus any required minimum margin
+	if (!position || !position.margin) return 0
+	const requiredMargin = position.size * 0.01 / position.leverage || 0
+	return Math.max(0, position.margin - requiredMargin)
+}
\ No newline at end of file
diff --git a/src/lib/wallet.js b/src/lib/wallet.js
new file mode 100644
index 0000000..328ee12
--- /dev/null
+++ b/src/lib/wallet.js
@@ -0,0 +1,5 @@
+// Wallet library
+
+import { writable } from 'svelte/store'
+
+export const walletBalance = writable(0)
\ No newline at end of file