diff --git a/client/src/App.jsx b/client/src/App.jsx
index f0a90e4..732fb09 100644
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -1,5 +1,5 @@
 import {
-  useCallback, useEffect, useReducer, useState,
+  useCallback, useEffect, useReducer, useState, createContext, useContext, useMemo,
 } from 'react';
 import { useSDK } from '@metamask/sdk-react';
 import { Web3 } from 'web3';
@@ -40,6 +40,8 @@ const updateList = (list, action) => {
 
 const useList = (initialValue) => useReducer(updateList, initialValue ?? []);
 
+const Web3Context = createContext({});
+
 function App() {
   const {
     sdk, connected, provider, chainId, account, balance,
@@ -336,30 +338,6 @@ function App() {
     });
   }, [DAO, account]);
 
-  const stakeAvailability = useCallback(async (duration) => {
-    const target = contracts[chainId].Work1;
-    await DAO.methods.stakeAvailability(target, reputation, duration).send({
-      from: account,
-      gas: 1000000,
-    });
-    // Note that as with validation pool stakes, we should keep track locally of our reputation
-    setReputation(0);
-  }, [DAO, account, chainId, reputation, setReputation]);
-
-  const reclaimAvailabilityStake = useCallback(async (stakeIndex) => {
-    await work1.methods.reclaimAvailability(stakeIndex).send({
-      from: account,
-      gas: 1000000,
-    });
-  }, [work1, account]);
-
-  const extendAvailabilityStake = useCallback(async (stakeIndex, duration) => {
-    await work1.methods.extendAvailability(stakeIndex, duration).send({
-      from: account,
-      gas: 1000000,
-    });
-  }, [work1, account]);
-
   const requestWork = useCallback(async () => {
     const web3 = new Web3(provider);
     const priceWei = BigInt(web3.utils.toWei(work1Price, 'ether'));
@@ -395,8 +373,13 @@ function App() {
   /* --------------------------- END UI ACTIONS ------------------------------------- */
   /* -------------------------------------------------------------------------------- */
 
+  const web3ProviderValue = useMemo(() => ({
+    DAO, work1, availabilityStakes, reputation, setReputation, account, chainId,
+  }), [
+    DAO, work1, availabilityStakes, reputation, setReputation, account, chainId,
+  ]);
   return (
-    <>
+    <Web3Context.Provider value={web3ProviderValue}>
       {!connected && <Button onClick={() => connect()}>Connect</Button>}
 
       {connected && (
@@ -542,66 +525,15 @@ function App() {
                 <div>
                   {`Price: ${work1Price} ETH`}
                 </div>
-                <div>
-                  Stake Availability:
-                  {' '}
-                  {!reputation && <>No reputation available to stake</>}
-                  {reputation > 0 && (
-                  <>
-                    <Button onClick={() => stakeAvailability(300)}>5 Min.</Button>
-                    {' '}
-                    <Button onClick={() => stakeAvailability(7200)}>2 Hr.</Button>
-                  </>
-                  )}
-                </div>
-                <div>
-                  Availability Stake Count:
-                  {' '}
-                  {availabilityStakes.length}
-                </div>
-                <div>
-                  <table className="table">
-                    <thead>
-                      <tr>
-                        <th>ID</th>
-                        <th>Worker</th>
-                        <th>Amount</th>
-                        <th>End Time</th>
-                        <th>Assigned</th>
-                        <th>Reclaimed</th>
-                        <th>Actions</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {availabilityStakes.filter((x) => !!x).map((s) => (
-                        <tr key={s.id}>
-                          <td>{s.id.toString()}</td>
-                          <td>{s.worker.toString()}</td>
-                          <td>{s.amount.toString()}</td>
-                          <td>{new Date(Number(s.endTime) * 1000).toLocaleString()}</td>
-                          <td>{s.assigned.toString()}</td>
-                          <td>{s.reclaimed.toString()}</td>
-                          <td>
-                            {s.currentUserIsWorker() && (
-                            <Button onClick={() => extendAvailabilityStake(s.id, 3600)}>
-                              Extend 1 Hr.
-                            </Button>
-                            )}
-                            {s.currentUserIsWorker() && s.timeRemaining <= 0
-                          && !s.assigned && !s.reclaimed && (
-                            <>
-                              {' '}
-                              <Button onClick={() => reclaimAvailabilityStake(s.id)}>
-                                Reclaim
-                              </Button>
-                            </>
-                            )}
-                          </td>
-                        </tr>
-                      ))}
-                    </tbody>
-                  </table>
-                </div>
+                <AvailabilityStakes
+                  DAO={DAO}
+                  work1={work1}
+                  reputation={reputation}
+                  account={account}
+                  chainId={chainId}
+                  setReputation={setReputation}
+                  availabilityStakes={availabilityStakes}
+                />
                 <div>
                   <Button onClick={() => requestWork()}>Request Work</Button>
                 </div>
@@ -666,7 +598,19 @@ function App() {
               </div>
             </Tab>
             <Tab eventKey="worker" title="Worker">
-              TBD
+              <h2>Work Contract 1</h2>
+              <div>
+                {`Price: ${work1Price} ETH`}
+              </div>
+              <AvailabilityStakes
+                DAO={DAO}
+                work1={work1}
+                reputation={reputation}
+                account={account}
+                chainId={chainId}
+                setReputation={setReputation}
+                availabilityStakes={availabilityStakes}
+              />
             </Tab>
             <Tab eventKey="customer" title="Customer">
               TBD
@@ -674,6 +618,99 @@ function App() {
           </Tabs>
         </>
       )}
+    </Web3Context.Provider>
+  );
+}
+
+function AvailabilityStakes() {
+  const {
+    DAO, work1, availabilityStakes, reputation, setReputation, account, chainId,
+  } = useContext(Web3Context);
+  const stakeAvailability = useCallback(async (duration) => {
+    const target = contracts[chainId].Work1;
+    await DAO.methods.stakeAvailability(target, reputation, duration).send({
+      from: account,
+      gas: 999999,
+    });
+    // Note that as with validation pool stakes, we should keep track locally of our reputation
+    setReputation(0);
+  }, [DAO, account, chainId, reputation, setReputation]);
+
+  const reclaimAvailabilityStake = useCallback(async (stakeIndex) => {
+    await work1.methods.reclaimAvailability(stakeIndex).send({
+      from: account,
+      gas: 999999,
+    });
+  }, [work1, account]);
+
+  const extendAvailabilityStake = useCallback(async (stakeIndex, duration) => {
+    await work1.methods.extendAvailability(stakeIndex, duration).send({
+      from: account,
+      gas: 999999,
+    });
+  }, [work1, account]);
+  return (
+    <>
+      <div>
+        Stake Availability:
+        {' '}
+        {!reputation && <>No reputation available to stake</>}
+        {reputation > 0 && (
+        <>
+          <Button onClick={() => stakeAvailability(300)}>5 Min.</Button>
+          {' '}
+          <Button onClick={() => stakeAvailability(7200)}>2 Hr.</Button>
+        </>
+        )}
+      </div>
+      <div>
+        Availability Stake Count:
+        {' '}
+        {availabilityStakes?.length}
+      </div>
+      <div>
+        <table className="table">
+          <thead>
+            <tr>
+              <th>ID</th>
+              <th>Worker</th>
+              <th>Amount</th>
+              <th>End Time</th>
+              <th>Assigned</th>
+              <th>Reclaimed</th>
+              <th>Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {availabilityStakes?.filter((x) => !!x).map((s) => (
+              <tr key={s.id}>
+                <td>{s.id.toString()}</td>
+                <td>{s.worker.toString()}</td>
+                <td>{s.amount.toString()}</td>
+                <td>{new Date(Number(s.endTime) * 1000).toLocaleString()}</td>
+                <td>{s.assigned.toString()}</td>
+                <td>{s.reclaimed.toString()}</td>
+                <td>
+                  {s.currentUserIsWorker() && (
+                  <Button onClick={() => extendAvailabilityStake(s.id, 3600)}>
+                    Extend 1 Hr.
+                  </Button>
+                  )}
+                  {s.currentUserIsWorker() && s.timeRemaining <= 0
+                    && !s.assigned && !s.reclaimed && (
+                    <>
+                      {' '}
+                      <Button onClick={() => reclaimAvailabilityStake(s.id)}>
+                        Reclaim
+                      </Button>
+                    </>
+                  )}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
     </>
   );
 }