diff --git a/src/components/Input/numeric.tsx b/src/components/Input/numeric.tsx
index 11605a2..1338a45 100644
--- a/src/components/Input/numeric.tsx
+++ b/src/components/Input/numeric.tsx
@@ -1,11 +1,11 @@
-import React from "react";
-import { Input } from "antd";
+import React from 'react';
+import { Input } from 'antd';
 
 export class NumericInput extends React.Component<any, any> {
   onChange = (e: any) => {
     const { value } = e.target;
     const reg = /^-?\d*(\.\d*)?$/;
-    if (reg.test(value) || value === "" || value === "-") {
+    if (reg.test(value) || value === '' || value === '-') {
       this.props.onChange(value);
     }
   };
@@ -14,26 +14,19 @@ export class NumericInput extends React.Component<any, any> {
   onBlur = () => {
     const { value, onBlur, onChange } = this.props;
     let valueTemp = value;
-    if (value.charAt(value.length - 1) === "." || value === "-") {
+    if (value.charAt(value.length - 1) === '.' || value === '-') {
       valueTemp = value.slice(0, -1);
     }
-    if (value.startsWith(".") || value.startsWith("-.")) {
-      valueTemp = valueTemp.replace(".", "0.");
+    if (value.startsWith('.') || value.startsWith('-.')) {
+      valueTemp = valueTemp.replace('.', '0.');
     }
-    onChange(valueTemp.replace(/0*(\d+)/, "$1"));
+    onChange?.(valueTemp.replace(/0*(\d+)/, '$1'));
     if (onBlur) {
       onBlur();
     }
   };
 
   render() {
-    return (
-      <Input
-        {...this.props}
-        onChange={this.onChange}
-        onBlur={this.onBlur}
-        maxLength={25}
-      />
-    );
+    return <Input {...this.props} onChange={this.onChange} onBlur={this.onBlur} maxLength={25} />;
   }
 }
diff --git a/src/constants/labels.ts b/src/constants/labels.ts
index f1aab4f..2fc30f9 100644
--- a/src/constants/labels.ts
+++ b/src/constants/labels.ts
@@ -1,56 +1,63 @@
 export const LABELS = {
-  CONNECT_LABEL: "Connect Wallet",
-  GIVE_SOL: "Give me SOL",
-  FAUCET_INFO:
-    "This faucet will help you fund your accounts outside of Solana main network.",
-  ACCOUNT_FUNDED: "Account funded.",
-  REPAY_QUESTION: "How much would you like to repay?",
-  REPAY_ACTION: "Repay",
-  RESERVE_STATUS_TITLE: "Reserve Status & Configuration",
+  CONNECT_LABEL: 'Connect Wallet',
+  GIVE_SOL: 'Give me SOL',
+  FAUCET_INFO: 'This faucet will help you fund your accounts outside of Solana main network.',
+  ACCOUNT_FUNDED: 'Account funded.',
+  REPAY_QUESTION: 'How much would you like to repay?',
+  REPAY_ACTION: 'Repay',
+  RESERVE_STATUS_TITLE: 'Reserve Status & Configuration',
   AUDIT_WARNING:
-    "Oyster is an unaudited software project used for internal purposes at the Solana Foundation. This app is not for public use.",
+    'Oyster is an unaudited software project used for internal purposes at the Solana Foundation. This app is not for public use.',
   FOOTER:
     'This page was produced by the Solana Foundation ("SF") for internal educational and inspiration purposes only. SF does not encourage, induce or sanction the deployment, integration or use of Oyster or any similar application (including its code) in violation of applicable laws or regulations and hereby prohibits any such deployment, integration or use. Anyone using this code or a derivation thereof must comply with applicable laws and regulations when releasing related software.',
-  MENU_HOME: "Home",
-  MENU_DASHBOARD: "Dashboard",
-  DASHBOARD_INFO: "Connect to a wallet to view your deposits/loans.",
-  NO_LOANS_NO_DEPOSITS: "No loans or deposits.",
-  MENU_DEPOSIT: "Deposit",
-  MENU_BORROW: "Borrow",
-  MENU_LIQUIDATE: "Liquidate",
-  MENU_FAUCET: "Faucet",
-  MARGIN_TRADING: "Margin Trading",
-  APP_TITLE: "Oyster Lending",
-  CONNECT_BUTTON: "Connect",
-  WALLET_TOOLTIP: "Wallet public key",
-  SETTINGS_TOOLTIP: "Settings",
-  SELECT_COLLATERAL: "Select collateral",
-  COLLATERAL: "Collateral",
-  BORROW_QUESTION: "How much would you like to borrow?",
-  BORROW_ACTION: "Borrow",
-  LIQUIDATE_ACTION: "Liquidate",
-  LIQUIDATE_NO_LOANS: "There are no loans to liquidate.",
-  TABLE_TITLE_ASSET: "Asset",
-  TABLE_TITLE_YOUR_LOAN_BALANCE: "Loan balance",
-  TABLE_TITLE_LOAN_BALANCE: "Loan balance",
-  TABLE_TITLE_COLLATERAL_BALANCE: "Collateral",
-  TABLE_TITLE_DEPOSIT_BALANCE: "Your deposits",
-  TABLE_TITLE_APY: "APY",
-  TABLE_TITLE_LTV: "LTV",
-  TABLE_TITLE_HEALTH: "Health Factor",
-  TABLE_TITLE_BORROW_APY: "Borrow APY",
-  TABLE_TITLE_DEPOSIT_APY: "Deposit APY",
-  TABLE_TITLE_TOTAL_BORROWED: "Total Borrowed",
-  TABLE_TITLE_MARKET_SIZE: "Market Size",
-  TABLE_TITLE_ACTION: "Action",
-  TABLE_TITLE_MAX_BORROW: "Available for you",
-  DASHBOARD_TITLE_LOANS: "Loans",
-  DASHBOARD_TITLE_DEPOSITS: "Deposits",
-  DEPOSIT_QUESTION: "How much would you like to deposit?",
-  WITHDRAW_ACTION: "Withdraw",
-  WITHDRAW_QUESTION: "How much would you like to withdraw?",
-  DASHBOARD_ACTION: "Go to dashboard",
-  GO_BACK_ACTION: "Go back",
-  DEPOSIT_ACTION: "Deposit",
-  TOTAL_TITLE: "Total",
+  MENU_HOME: 'Home',
+  MENU_DASHBOARD: 'Dashboard',
+  DASHBOARD_INFO: 'Connect to a wallet to view your deposits/loans.',
+  NO_LOANS_NO_DEPOSITS: 'No loans or deposits.',
+  MENU_DEPOSIT: 'Deposit',
+  MENU_BORROW: 'Borrow',
+  MENU_LIQUIDATE: 'Liquidate',
+  MENU_FAUCET: 'Faucet',
+  MARGIN_TRADING: 'Margin Trading',
+  APP_TITLE: 'Oyster Lending',
+  CONNECT_BUTTON: 'Connect',
+  WALLET_TOOLTIP: 'Wallet public key',
+  SETTINGS_TOOLTIP: 'Settings',
+  SELECT_COLLATERAL: 'Select collateral',
+  COLLATERAL: 'Collateral',
+  BORROW_QUESTION: 'How much would you like to borrow?',
+  BORROW_ACTION: 'Borrow',
+  LIQUIDATE_ACTION: 'Liquidate',
+  LIQUIDATE_NO_LOANS: 'There are no loans to liquidate.',
+  TABLE_TITLE_ASSET: 'Asset',
+  TABLE_TITLE_YOUR_LOAN_BALANCE: 'Loan balance',
+  TABLE_TITLE_LOAN_BALANCE: 'Loan balance',
+  TABLE_TITLE_COLLATERAL_BALANCE: 'Collateral',
+  TABLE_TITLE_DEPOSIT_BALANCE: 'Your deposits',
+  TABLE_TITLE_APY: 'APY',
+  TABLE_TITLE_LTV: 'LTV',
+  TABLE_TITLE_HEALTH: 'Health Factor',
+  TABLE_TITLE_BORROW_APY: 'Borrow APY',
+  TABLE_TITLE_DEPOSIT_APY: 'Deposit APY',
+  TABLE_TITLE_TOTAL_BORROWED: 'Total Borrowed',
+  TABLE_TITLE_MARKET_SIZE: 'Market Size',
+  TABLE_TITLE_ACTION: 'Action',
+  TABLE_TITLE_MAX_BORROW: 'Available for you',
+  DASHBOARD_TITLE_LOANS: 'Loans',
+  DASHBOARD_TITLE_DEPOSITS: 'Deposits',
+  DEPOSIT_QUESTION: 'How much would you like to deposit?',
+  WITHDRAW_ACTION: 'Withdraw',
+  WITHDRAW_QUESTION: 'How much would you like to withdraw?',
+  DASHBOARD_ACTION: 'Go to dashboard',
+  GO_BACK_ACTION: 'Go back',
+  DEPOSIT_ACTION: 'Deposit',
+  TOTAL_TITLE: 'Total',
+  TRADING_TABLE_TITLE_MY_COLLATERAL: 'Chosen Collateral',
+  TRADING_TABLE_TITLE_DESIRED_ASSET: 'Desired Asset',
+  TRADING_TABLE_TITLE_MULTIPLIER: 'Leverage',
+  TRADING_TABLE_TITLE_ASSET_PRICE: 'Asset Price',
+  TRADING_TABLE_TITLE_LIQUIDATION_PRICE: 'Liquidation Price',
+  TRADING_TABLE_TITLE_APY: 'APY',
+  TRADING_TABLE_TITLE_ACTIONS: 'Action',
+  TRADING_ADD_POSITION: 'Add Position',
 };
diff --git a/src/views/marginTrading/MarginTradePosition.tsx b/src/views/marginTrading/MarginTradePosition.tsx
new file mode 100644
index 0000000..c81582d
--- /dev/null
+++ b/src/views/marginTrading/MarginTradePosition.tsx
@@ -0,0 +1,94 @@
+import { Button, Select, Slider } from 'antd';
+import React from 'react';
+import { NumericInput } from '../../components/Input/numeric';
+import { TokenIcon } from '../../components/TokenIcon';
+import tokens from '../../config/tokens.json';
+import { LABELS } from '../../constants/labels';
+const { Option } = Select;
+
+interface EditableAssetProps {
+  label: string;
+  itemAssetKey: string;
+  itemAssetValueKey: string;
+  setItem: (item: any) => void;
+  item: any;
+}
+function EditableAsset({ label, itemAssetKey, itemAssetValueKey, setItem, item }: EditableAssetProps) {
+  console.log('Now looking at', item);
+  if (!item[itemAssetKey]) {
+    return (
+      <Select
+        size='large'
+        showSearch
+        style={{ margin: '5px 0px' }}
+        placeholder={label}
+        onChange={(v) => setItem({ ...item, [itemAssetKey]: tokens.find((t) => t.mintAddress === v) })}
+      >
+        {tokens.map((token) => (
+          <Option key={token.mintAddress} value={token.mintAddress} name={token.tokenName} title={token.tokenName}>
+            <div key={token.mintAddress} style={{ display: 'flex', alignItems: 'center' }}>
+              <TokenIcon mintAddress={token.mintAddress} />
+              {token.tokenName}
+            </div>
+          </Option>
+        ))}
+      </Select>
+    );
+  } else {
+    return (
+      <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'flex-start' }}>
+        <NumericInput
+          value={item[itemAssetValueKey]}
+          style={{
+            fontSize: 20,
+            boxShadow: 'none',
+            borderColor: 'transparent',
+            outline: 'transparent',
+          }}
+          placeholder='0.00'
+        />
+        <TokenIcon mintAddress={item[itemAssetKey]?.mintAddress} />
+      </div>
+    );
+  }
+}
+
+export default function MarginTradePosition({ item, setItem }: { item: any; setItem?: (item: any) => void }) {
+  return (
+    <div className='trading-item'>
+      <div>
+        {setItem && (
+          <EditableAsset
+            item={item}
+            setItem={setItem}
+            label={LABELS.TRADING_TABLE_TITLE_MY_COLLATERAL}
+            itemAssetKey={'collateralType'}
+            itemAssetValueKey={'collateralValue'}
+          />
+        )}
+      </div>
+      <div>
+        {setItem && (
+          <EditableAsset
+            item={item}
+            setItem={setItem}
+            label={LABELS.TRADING_TABLE_TITLE_MY_COLLATERAL}
+            itemAssetKey={'assetType'}
+            itemAssetValueKey={'assetValue'}
+          />
+        )}
+      </div>
+      <div>
+        <Slider tooltipVisible={true} defaultValue={1} dots={true} max={5} min={1} step={1} tooltipPlacement={'top'} />
+      </div>
+      <div>123</div>
+      <div>123</div>
+      <div>123</div>
+      <div>
+        <Button type='primary'>
+          <span>{LABELS.TRADING_ADD_POSITION}</span>
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/views/marginTrading/index.tsx b/src/views/marginTrading/index.tsx
index af35ca3..bbe4d5e 100644
--- a/src/views/marginTrading/index.tsx
+++ b/src/views/marginTrading/index.tsx
@@ -1,13 +1,32 @@
-import React from "react";
-import { LABELS } from "../../constants";
-import "./style.less";
-import { Card } from "antd";
+import React, { useState } from 'react';
+import { LABELS } from '../../constants';
+import './style.less';
+import { Card } from 'antd';
+import MarginTradePosition from './MarginTradePosition';
 
 export const MarginTrading = () => {
+  const [newPosition, setNewPosition] = useState<any>({ id: null });
 
+  const positions: any[] = [];
   return (
-    <div className="liquidate-container">
-      
+    <div className='trading-container'>
+      <div className='flexColumn'>
+        <Card>
+          <div className='trading-item trading-header'>
+            <div>{LABELS.TRADING_TABLE_TITLE_MY_COLLATERAL}</div>
+            <div>{LABELS.TRADING_TABLE_TITLE_DESIRED_ASSET}</div>
+            <div>{LABELS.TRADING_TABLE_TITLE_MULTIPLIER}</div>
+            <div>{LABELS.TRADING_TABLE_TITLE_ASSET_PRICE}</div>
+            <div>{LABELS.TRADING_TABLE_TITLE_LIQUIDATION_PRICE}</div>
+            <div>{LABELS.TRADING_TABLE_TITLE_APY}</div>
+            <div>{LABELS.TRADING_TABLE_TITLE_ACTIONS}</div>
+          </div>
+          <MarginTradePosition key={newPosition.id} item={newPosition} setItem={setNewPosition} />
+          {positions.map((item) => (
+            <MarginTradePosition key={item.id} item={item} />
+          ))}
+        </Card>
+      </div>
     </div>
   );
 };
diff --git a/src/views/marginTrading/style.less b/src/views/marginTrading/style.less
index 614b9a6..f32f4d3 100644
--- a/src/views/marginTrading/style.less
+++ b/src/views/marginTrading/style.less
@@ -1 +1,46 @@
 @import '~antd/es/style/themes/default.less';
+.trading-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: @text-color;
+
+  & > :nth-child(n) {
+    flex: 20%;
+    text-align: left;
+    margin: 10px 0px;
+  }
+
+  & > :first-child {
+    flex: 300px;
+  }
+
+  & > :nth-child(2) {
+    flex: 300px;
+  }
+
+  border-bottom: 1px solid #eee;
+}
+
+.trading-header {
+  justify-content: space-between;
+  & > div {
+    flex: 20%;
+    margin: 10px 0px;
+    text-align: left;
+  }
+}
+
+.trading-info {
+  display: flex;
+  align-self: center;
+  justify-content: center;
+  flex: 1;
+}
+
+.trading-container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  flex: 1;
+}