diff --git a/packages/front-end/src/assets/CardTab.svg b/packages/front-end/src/assets/CardTab.svg
index 7cca3e4f7..75e327cde 100644
--- a/packages/front-end/src/assets/CardTab.svg
+++ b/packages/front-end/src/assets/CardTab.svg
@@ -1,3 +1,3 @@
-<svg width="200" height="50" xmlns="http://www.w3.org/2000/svg">
+<svg width="200" height="50" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
   <path d="M 10 0 L 170 0 C 190 10 190 40 200 50 L 0 50 L 0 10 A 10 10 1 0 1 10 0"/>
 </svg>
\ No newline at end of file
diff --git a/packages/front-end/src/components/LPStats.tsx b/packages/front-end/src/components/LPStats.tsx
index ada05d79f..69f006e47 100644
--- a/packages/front-end/src/components/LPStats.tsx
+++ b/packages/front-end/src/components/LPStats.tsx
@@ -94,19 +94,21 @@ export const LPStats = () => {
           </div>
         )}
       </div>
-      <ProgressBar
-        completed={Math.round(
-          (Number(showDeposit ? showDeposit : depositedCollateral) /
-            Number(collateralCap)) *
-            100
-        )}
-        bgColor={"#000"}
-        height={"24px"}
-        baseBgColor={"#ebebeb"}
-        animateOnRender={true}
-        borderRadius={"9px"}
-        className={"border-2 border-2 rounded-xl border-black"}
-      />
+      {depositedCollateral && (
+        <ProgressBar
+          completed={Math.round(
+            (Number(showDeposit ? showDeposit : depositedCollateral) /
+              Number(collateralCap)) *
+              100
+          )}
+          bgColor={"#000"}
+          height={"24px"}
+          baseBgColor={"#ebebeb"}
+          animateOnRender={true}
+          borderRadius={"9px"}
+          className={"border-2 border-2 rounded-xl border-black"}
+        />
+      )}
     </div>
   );
 };
diff --git a/packages/front-end/src/components/OTC/OTCPageContent.tsx b/packages/front-end/src/components/OTC/OTCPageContent.tsx
index 8775f03c7..bbefce991 100644
--- a/packages/front-end/src/components/OTC/OTCPageContent.tsx
+++ b/packages/front-end/src/components/OTC/OTCPageContent.tsx
@@ -28,6 +28,7 @@ export const OTCPageContent = () => {
 
   const [orderId, setOrderId] = useState<string | null>(null);
   const [order, setOrder] = useState<Order | null>(null);
+  const [isBuyer, setIsBuyer] = useState<boolean>(false);
 
   const [optionSeriesContract, setOptionContract] =
     useState<ethers.Contract | null>(null);
@@ -163,12 +164,12 @@ export const OTCPageContent = () => {
   ]);
 
   useEffect(() => {
-    if (account && order) {
-      if (account.toLowerCase() !== order.buyer.toLowerCase()) {
-        setError(`❌ Please connect with account ${order.buyer}`);
-      }
+    if (account && (order || strangle)) {
+      // NOTE: this presumes buyer of call/put in strangle is same
+      const buyerAddress = order?.buyer ?? strangle?.call.buyer;
+      setIsBuyer(account.toLowerCase() === buyerAddress?.toLowerCase());
     }
-  }, [account, order]);
+  }, [account, order, strangle]);
 
   // Regular order handlers
   const handleApprove = useCallback(async () => {
@@ -512,48 +513,50 @@ export const OTCPageContent = () => {
                       </div>
                     </div>
                   </div>
-                  <div className="flex">
-                    <Button
-                      className={`w-full border-b-0 border-x-0 !py-4`}
-                      onClick={
-                        order
-                          ? order.isBuyBack
-                            ? handleApproveBuyBack
-                            : handleApprove
-                          : strangle
-                          ? handleApprove
-                          : () => {}
-                      }
-                      color="black"
-                      disabled={approveDisabled}
-                    >
-                      {isApproved
-                        ? "✅ Approved"
-                        : isListeningForApproval
-                        ? "⏱ Awaiting Approval"
-                        : "Approve"}
-                    </Button>
-                    <Button
-                      className={`w-full border-b-0 border-x-0 !py-4 `}
-                      color="black"
-                      onClick={
-                        order
-                          ? order.isBuyBack
-                            ? handleCompleteBuyBack
-                            : handleComplete
-                          : strangle
-                          ? handleComplete
-                          : () => {}
-                      }
-                      disabled={completeDisabled}
-                    >
-                      {isListeningForComplete
-                        ? "⏱ Awaiting Completion"
-                        : order?.isBuyBack
-                        ? "Complete Sale"
-                        : "Complete Purchase"}
-                    </Button>
-                  </div>
+                  {isBuyer && (
+                    <div className="flex">
+                      <Button
+                        className={`w-full border-b-0 border-x-0 !py-4`}
+                        onClick={
+                          order
+                            ? order.isBuyBack
+                              ? handleApproveBuyBack
+                              : handleApprove
+                            : strangle
+                            ? handleApprove
+                            : () => {}
+                        }
+                        color="black"
+                        disabled={approveDisabled}
+                      >
+                        {isApproved
+                          ? "✅ Approved"
+                          : isListeningForApproval
+                          ? "⏱ Awaiting Approval"
+                          : "Approve"}
+                      </Button>
+                      <Button
+                        className={`w-full border-b-0 border-x-0 !py-4 `}
+                        color="black"
+                        onClick={
+                          order
+                            ? order.isBuyBack
+                              ? handleCompleteBuyBack
+                              : handleComplete
+                            : strangle
+                            ? handleComplete
+                            : () => {}
+                        }
+                        disabled={completeDisabled}
+                      >
+                        {isListeningForComplete
+                          ? "⏱ Awaiting Completion"
+                          : order?.isBuyBack
+                          ? "Complete Sale"
+                          : "Complete Purchase"}
+                      </Button>
+                    </div>
+                  )}
                 </>
               ) : (
                 <div className="p-4">
diff --git a/packages/front-end/src/components/VaultTrades.tsx b/packages/front-end/src/components/VaultTrades.tsx
index 78307b1b2..aa4174180 100644
--- a/packages/front-end/src/components/VaultTrades.tsx
+++ b/packages/front-end/src/components/VaultTrades.tsx
@@ -68,7 +68,7 @@ export const VaultTrades = () => {
       ? CHAINID.ARBITRUM_RINKEBY
       : CHAINID.ARBITRUM_MAINNET;
 
-  const { fetchMore, data, loading } = useQuery(
+  const { fetchMore, data, loading, error } = useQuery(
     gql`
       query ($timestamp1: Int, $timestamp2: Int) {
         writeOptionsActions(
@@ -160,11 +160,9 @@ export const VaultTrades = () => {
     }
   }, [isVisible]);
 
-  console.log("trades length:", trades.length);
-
   return (
     <div className="w-full overflow-x-auto lg:overflow-x-clip relative">
-      <FullScreen handle={handle} className="overflow-auto">
+      <FullScreen handle={handle} className="overflow-auto bg-bone">
         <table className="w-full text-sm text-left border-separate border-spacing-0 border-black">
           <thead className="text-xs text-gray-700 uppercase sticky top-0 z-1">
             <tr>
@@ -394,6 +392,11 @@ export const VaultTrades = () => {
             )}
           </tbody>
         </table>
+        {error && (
+          <div className="m-5 flex flex-row justify-center">
+            <p>{error.message.slice(0, 100)}</p>
+          </div>
+        )}
       </FullScreen>
     </div>
   );
diff --git a/packages/front-end/src/components/dashboard/UserOptionsList.tsx b/packages/front-end/src/components/dashboard/UserOptionsList.tsx
index 746b74984..7a723e91c 100644
--- a/packages/front-end/src/components/dashboard/UserOptionsList.tsx
+++ b/packages/front-end/src/components/dashboard/UserOptionsList.tsx
@@ -115,42 +115,46 @@ export const UserOptionsList = () => {
   // TODO: Add typings here
   useQuery(
     gql`
-    query($account: String) {
-      positions(first: 1000, where: { account_contains: "${account?.toLowerCase()}" }) {
-        id
-        amount
-        oToken {
-          id
-          symbol
-          expiryTimestamp
-          strikePrice
-          isPut
-          underlyingAsset {
-            id
-          }
-        }
-        writeOptionsTransactions {
+      query ($account: String) {
+        positions(first: 1000, where: { account_contains: $account }) {
           id
           amount
-          premium
-          timestamp
-        }
-        account {
-          balances {
-            balance
-            token {
+          oToken {
+            id
+            symbol
+            expiryTimestamp
+            strikePrice
+            isPut
+            underlyingAsset {
               id
             }
           }
+          writeOptionsTransactions {
+            id
+            amount
+            premium
+            timestamp
+          }
+          account {
+            balances {
+              balance
+              token {
+                id
+              }
+            }
+          }
         }
       }
-    }
-  `,
+    `,
     {
       onCompleted: parsePositions,
       onError: (err) => {
         console.log(err);
       },
+      variables: {
+        account: account?.toLowerCase(),
+      },
+      skip: !account,
     }
   );
 
diff --git a/packages/front-end/src/components/vault/VaultContent.tsx b/packages/front-end/src/components/vault/VaultContent.tsx
index fcbcc6a6d..8175014ef 100644
--- a/packages/front-end/src/components/vault/VaultContent.tsx
+++ b/packages/front-end/src/components/vault/VaultContent.tsx
@@ -55,7 +55,7 @@ export const VaultContent = () => {
 
   return (
     <>
-      <div className="w-full flex justify-between bg-black text-white items-center p-4 col-start-1 col-end-17 mb-16">
+      <div className="w-full flex justify-between bg-black text-white items-center p-4 col-start-1 col-end-17 -mt-12 mb-16">
         {envChainID && (
           <div className="flex items-center w-[240px]">
             <p>