diff --git a/src/components/Input/numeric.tsx b/src/components/Input/numeric.tsx
index a270357..abfdbc5 100644
--- a/src/components/Input/numeric.tsx
+++ b/src/components/Input/numeric.tsx
@@ -21,7 +21,7 @@ export class NumericInput extends React.Component<any, any> {
     if (value.startsWith && (value.startsWith('.') || value.startsWith('-.'))) {
       valueTemp = valueTemp.replace('.', '0.');
     }
-    onChange?.(valueTemp.replace(/0*(\d+)/, '$1'));
+    if (valueTemp.replace) onChange?.(valueTemp.replace(/0*(\d+)/, '$1'));
     if (onBlur) {
       onBlur();
     }
diff --git a/src/constants/labels.ts b/src/constants/labels.ts
index 8566999..8b9faff 100644
--- a/src/constants/labels.ts
+++ b/src/constants/labels.ts
@@ -61,7 +61,8 @@ export const LABELS = {
   TRADING_TABLE_TITLE_ACTIONS: 'Action',
   TRADING_ADD_POSITION: 'Add Position',
   MARGIN_TRADE_ACTION: 'Margin Trade',
-  MARGIN_TRADE_QUESTION: 'How much of this asset would you like?',
+  MARGIN_TRADE_CHOOSE_COLLATERAL_AND_LEVERAGE: 'Please choose your collateral and leverage.',
+  MARGIN_TRADE_QUESTION: 'Please choose how much of this asset you wish to purchase.',
   TABLE_TITLE_BUYING_POWER: 'Total Buying Power',
   NOT_ENOUGH_MARGIN_MESSAGE: 'Not enough buying power in oyster to make this trade at this leverage.',
   LEVERAGE_LIMIT_MESSAGE:
diff --git a/src/views/marginTrading/newPosition/NewPositionForm.tsx b/src/views/marginTrading/newPosition/NewPositionForm.tsx
index dc1a709..47a0f2b 100644
--- a/src/views/marginTrading/newPosition/NewPositionForm.tsx
+++ b/src/views/marginTrading/newPosition/NewPositionForm.tsx
@@ -42,72 +42,73 @@ export default function NewPositionForm({ lendingReserve, newPosition, setNewPos
             justifyContent: 'space-around',
           }}
         >
-          <div className='borrow-input-title'>{LABELS.SELECT_COLLATERAL}</div>
-          <CollateralSelector
-            reserve={lendingReserve.info}
-            onCollateralReserve={(key) => {
-              const id: string = cache.byParser(LendingReserveParser).find((acc) => acc === key) || '';
-              const parser = cache.get(id) as ParsedAccount<LendingReserve>;
-              setNewPosition({ ...newPosition, collateral: parser });
-            }}
-          />
+          <p>{newPosition.error}</p>
 
-          <div className='borrow-input-title'>{LABELS.MARGIN_TRADE_QUESTION}</div>
-          <div className='token-input'>
-            <TokenIcon mintAddress={newPosition.asset.type?.info?.liquidityMint?.toBase58()} />
-            <NumericInput
-              value={newPosition.asset.value}
-              style={{
-                fontSize: 20,
-                boxShadow: 'none',
-                borderColor: 'transparent',
-                outline: 'transparent',
+          <p>{LABELS.MARGIN_TRADE_CHOOSE_COLLATERAL_AND_LEVERAGE}</p>
+          <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-evenly', alignItems: 'center' }}>
+            <CollateralSelector
+              reserve={lendingReserve.info}
+              onCollateralReserve={(key) => {
+                const id: string = cache.byParser(LendingReserveParser).find((acc) => acc === key) || '';
+                const parser = cache.get(id) as ParsedAccount<LendingReserve>;
+                setNewPosition({ ...newPosition, collateral: parser });
               }}
-              onChange={(v: string) => {
-                setNewPosition({
-                  ...newPosition,
-                  asset: { ...newPosition.asset, value: v },
-                });
-              }}
-              placeholder='0.00'
             />
-            <div>
-              {
-                tokens.find((t) => t.mintAddress === newPosition.asset.type?.info?.liquidityMint?.toBase58())
-                  ?.tokenSymbol
-              }
+            <div style={{ display: 'flex', flexDirection: 'row' }}>
+              <Radio.Group
+                defaultValue={newPosition.leverage}
+                size='large'
+                onChange={(e) => {
+                  setNewPosition({ ...newPosition, leverage: e.target.value });
+                }}
+              >
+                <Radio.Button value={1}>1x</Radio.Button>
+                <Radio.Button value={2}>2x</Radio.Button>
+                <Radio.Button value={3}>3x</Radio.Button>
+                <Radio.Button value={4}>4x</Radio.Button>
+                <Radio.Button value={5}>5x</Radio.Button>
+              </Radio.Group>
+              <NumericInput
+                value={newPosition.leverage}
+                style={{
+                  maxWidth: '75px',
+                }}
+                onChange={(leverage: number) => {
+                  setNewPosition({ ...newPosition, leverage });
+                }}
+              />
             </div>
           </div>
+          <br />
+          <p>{LABELS.MARGIN_TRADE_QUESTION}</p>
+
+          <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'stretch' }}>
+            <div className='token-input'>
+              <TokenIcon mintAddress={newPosition.asset.type?.info?.liquidityMint?.toBase58()} />
+              <NumericInput
+                value={newPosition.asset.value}
+                style={{
+                  fontSize: 20,
+                  boxShadow: 'none',
+                  borderColor: 'transparent',
+                  outline: 'transparent',
+                }}
+                onChange={(v: string) => {
+                  setNewPosition({
+                    ...newPosition,
+                    asset: { ...newPosition.asset, value: v },
+                  });
+                }}
+                placeholder='0.00'
+              />
+              <div>
+                {
+                  tokens.find((t) => t.mintAddress === newPosition.asset.type?.info?.liquidityMint?.toBase58())
+                    ?.tokenSymbol
+                }
+              </div>
+            </div>
 
-          <div>
-            <Radio.Group
-              defaultValue={newPosition.leverage}
-              size='large'
-              onChange={(e) => {
-                setNewPosition({ ...newPosition, leverage: e.target.value });
-              }}
-            >
-              <Radio.Button value={1}>1x</Radio.Button>
-              <Radio.Button value={2}>2x</Radio.Button>
-              <Radio.Button value={3}>3x</Radio.Button>
-              <Radio.Button value={4}>4x</Radio.Button>
-              <Radio.Button value={5}>5x</Radio.Button>
-            </Radio.Group>
-            <NumericInput
-              value={newPosition.leverage}
-              style={{
-                fontSize: 20,
-                boxShadow: 'none',
-                borderColor: 'transparent',
-                outline: 'transparent',
-              }}
-              onChange={(leverage: number) => {
-                setNewPosition({ ...newPosition, leverage });
-              }}
-            />
-            <p>{newPosition.error}</p>
-          </div>
-          <div>
             <Button type='primary'>
               <span>{LABELS.TRADING_ADD_POSITION}</span>
             </Button>