diff --git a/src/components/App.tsx b/src/components/App.tsx
index b9af1fa..ecb5c22 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -8,9 +8,10 @@ import { Navigate } from 'react-router-dom';
 
 interface AppProps extends React.PropsWithChildren<{}> {
   runtimeURL: string;
+  scanURL: string;
 }
 
-const App: React.FC<AppProps> = ({runtimeURL}) => {
+const App: React.FC<AppProps> = ({ runtimeURL, scanURL }) => {
 
   const hasSelectedAWalletExtension = localStorage.getItem('walletProvider');
   const [toasts, setToasts] = useState<any[]>([]);
@@ -28,7 +29,7 @@ const App: React.FC<AppProps> = ({runtimeURL}) => {
     <Router>
       <Routes>
         <Route path="/" element={hasSelectedAWalletExtension ? <Navigate to="/payouts" /> : <Landing setAndShowToast={setAndShowToast} />} />
-        <Route path="/payouts" element={hasSelectedAWalletExtension ? <Payouts setAndShowToast={setAndShowToast} runtimeURL={runtimeURL} /> : <Navigate to="/" />} />
+        <Route path="/payouts" element={hasSelectedAWalletExtension ? <Payouts setAndShowToast={setAndShowToast} runtimeURL={runtimeURL} scanURL={scanURL} /> : <Navigate to="/" />} />
       </Routes>
       <div className="toast-container position-fixed bottom-0 end-0 p-3">
         {toasts.map(toast => (
diff --git a/src/components/Payouts.tsx b/src/components/Payouts.tsx
index 78276b0..f250cd1 100644
--- a/src/components/Payouts.tsx
+++ b/src/components/Payouts.tsx
@@ -13,13 +13,13 @@ import './Payouts.scss';
 import { formatAssets, intersperse, shortViewTxOutRef } from './Format';
 import { SupportedWallet } from '@marlowe.io/wallet/browser';
 
-const marloweScanURL = `${process.env.MARLOWE_SCAN_URL}`;
 type PayoutsProps = {
   setAndShowToast: (title: string, message: any, isDanger: boolean) => void
-  runtimeURL: string
+  runtimeURL: string,
+  scanURL: string
 };
 
-const Payouts: React.FC<PayoutsProps> = ({ setAndShowToast, runtimeURL }) => {
+const Payouts: React.FC<PayoutsProps> = ({ setAndShowToast, runtimeURL, scanURL }) => {
   const navigate = useNavigate();
   const selectedAWalletExtension = localStorage.getItem('walletProvider');
   if (!selectedAWalletExtension) { navigate('/'); }
@@ -37,7 +37,7 @@ const Payouts: React.FC<PayoutsProps> = ({ setAndShowToast, runtimeURL }) => {
   const [secondTabContentClassNames, setSecondTabContentClassNames] = useState('tab-pane fade d-none');
 
   const payoutsToBeWithdrawn = availablePayouts.filter(payout => payoutIdsToBeWithdrawn.includes(unPayoutId(payout.payoutId)))
-  
+
   const toggleTabContentClassNames = () => {
     setFirstTabContentClassNames(firstTabContentClassNames === 'tab-pane fade show active' ? 'tab-pane fade d-none' : 'tab-pane fade show active');
     setSecondTabContentClassNames(secondTabContentClassNames === 'tab-pane fade d-none' ? 'tab-pane fade show active' : 'tab-pane fade d-none');
@@ -63,7 +63,7 @@ const Payouts: React.FC<PayoutsProps> = ({ setAndShowToast, runtimeURL }) => {
     setPayoutIdsToBeWithdrawn([]);
     setIsLoading(false);
   };
-  
+
   useEffect(() => {
     const fetchData = async () => {
       const runtimeLifecycleParameters: BrowserRuntimeLifecycleOptions = {
@@ -89,15 +89,15 @@ const Payouts: React.FC<PayoutsProps> = ({ setAndShowToast, runtimeURL }) => {
     }
 
     fetchData()
-      .catch(err => 
-        { console.log("Error", err);
-          const error = JSON.parse(err);
-          const { message } = error;
-          setAndShowToast(
-            'Failed Retrieving Payouts Infornation',
-            <span className='text-color-white'>{message}</span>,
-            true)
-        })
+      .catch(err => {
+        console.log("Error", err);
+        const error = JSON.parse(err);
+        const { message } = error;
+        setAndShowToast(
+          'Failed Retrieving Payouts Infornation',
+          <span className='text-color-white'>{message}</span>,
+          true)
+      })
 
     const intervalId = setInterval(() => {
       fetchData().catch(err => console.error(err));
@@ -167,7 +167,7 @@ const Payouts: React.FC<PayoutsProps> = ({ setAndShowToast, runtimeURL }) => {
 
   const handleWithdrawals = async () => {
     if (runtimeLifecycle) {
-    try {
+      try {
         setIsLoading(true)
         setAndShowToast(
           'Please sign your transaction',
@@ -176,17 +176,17 @@ const Payouts: React.FC<PayoutsProps> = ({ setAndShowToast, runtimeURL }) => {
           </div>,
           false
         )
-        
+
         await runtimeLifecycle.payouts.withdraw(payoutsToBeWithdrawn.map(payout => payout.payoutId))
-  
+
         closeModalAndClearPayouts()
         setAndShowToast(
           'Payouts withdrawn',
           <span className='text-color-white'>Successfully withdrawn payouts.</span>,
           false
-        ) 
-    } catch (err : any)  
-      { console.log("Error", err);
+        )
+      } catch (err: any) {
+        console.log("Error", err);
         const error = JSON.parse(err);
         const { message } = error;
         closeModalAndClearPayouts()
@@ -198,7 +198,10 @@ const Payouts: React.FC<PayoutsProps> = ({ setAndShowToast, runtimeURL }) => {
           </div>
           ,
           true
-        )}}}
+        )
+      }
+    }
+  }
 
   const payoutSelectedToBeWithdrawn = (payoutId: string) => {
     return payoutIdsToBeWithdrawn.includes(payoutId);
@@ -271,7 +274,7 @@ const Payouts: React.FC<PayoutsProps> = ({ setAndShowToast, runtimeURL }) => {
                           <td className='py-3'>
                             <a target="_blank"
                               rel="noopener noreferrer"
-                              href={`${marloweScanURL}/contractView?tab=info&contractId=` + encodeURIComponent(unContractId(payout.contractId))}>
+                              href={`${scanURL}/contractView?tab=info&contractId=` + encodeURIComponent(unContractId(payout.contractId))}>
                               {truncateString(unContractId(payout.contractId), 5, 60)}
                             </a>
                           </td>
@@ -280,13 +283,13 @@ const Payouts: React.FC<PayoutsProps> = ({ setAndShowToast, runtimeURL }) => {
                           <td className='py-3'>
                             {isLoading && payoutSelectedToBeWithdrawn(unPayoutId(payout.payoutId))
                               ? <button disabled className='btn btn-primary'>
-                                  <span className="pl-2 spinner-border spinner-border-sm text-white " role="status">
-                                    <span className="visually-hidden">Loading...</span>
-                                  </span>
-                                  <span> Processing...</span>
-                                </button>
+                                <span className="pl-2 spinner-border spinner-border-sm text-white " role="status">
+                                  <span className="visually-hidden">Loading...</span>
+                                </span>
+                                <span> Processing...</span>
+                              </button>
                               : <button disabled={isLoading} className='btn btn-primary' onClick={() => toggleBundleWithdrawal(unPayoutId(payout.payoutId))}>
-                                { isLoading ?
+                                {isLoading ?
                                   <span>
                                     <span className="pl-2 spinner-border spinner-border-sm text-white " role="status">
                                       <span className="visually-hidden">Loading...</span>
@@ -332,7 +335,7 @@ const Payouts: React.FC<PayoutsProps> = ({ setAndShowToast, runtimeURL }) => {
                         <tr key={index}>
                           <td className='py-3'><a target="_blank"
                             rel="noopener noreferrer"
-                            href={`${marloweScanURL}/contractView?tab=info&contractId=` + encodeURIComponent(unContractId(payout.contractId))}>
+                            href={`${scanURL}/contractView?tab=info&contractId=` + encodeURIComponent(unContractId(payout.contractId))}>
                             {shortViewTxOutRef(unContractId(payout.contractId))} </a>
                           </td>
                           <td className='py-3'>{payout.role.assetName}</td>
diff --git a/src/index.tsx b/src/index.tsx
index 00ebc53..316808b 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -10,35 +10,43 @@ import './styles/main.scss';
 import { mkRestClient } from "@marlowe.io/runtime-rest-client";
 
 let runtimeURL = process.env.MARLOWE_RUNTIME_WEB_URL;
+let scanURL = process.env.MARLOWE_SCAN_URL;
 await fetch(`/config.json`).then(async (res) => {
   if (res.status === 200) {
-    const { marloweWebServerUrl } = await res.json();
+    const { marloweWebServerUrl, marloweScanURL } = await res.json();
     if (!!marloweWebServerUrl) {
       runtimeURL = marloweWebServerUrl;
     }
+    if (!!marloweScanURL) {
+      scanURL = marloweScanURL;
+    }
   }
 });
 
-if (runtimeURL === undefined || runtimeURL === null) {
-  alert("Missing valid config.json file with marloweWebServerUrl OR env keys are not set!")
-} else {
-  const restClient = mkRestClient(runtimeURL)
-  const hasValidRuntimeInstance = await restClient.healthcheck()
+const CONFIGURATION_ERROR = Symbol()
 
-  if (!hasValidRuntimeInstance) {
-    alert("Invalid runtime instance set!")
-  } else {
-    //  2) Get a reference to the div with ID root
-    const el = document.getElementById('root');
+try {
+  if (typeof runtimeURL !== "string")
+    throw new Error("Missing valid config.json file with marloweWebServerUrl OR env MARLOWE_RUNTIME_WEB_URL is not set!", { cause: CONFIGURATION_ERROR });
 
-    if (!el) {
-      throw new Error('Root element not found');
-    }
+  if (typeof scanURL !== "string")
+    throw new Error("Missing valid config.json file with marloweScanURL OR env MARLOWE_SCAN_URL is not set!", { cause: CONFIGURATION_ERROR });
 
-    //  3) Tell React to take control of that element
-    const root = ReactDOM.createRoot(el);
+  const restClient = mkRestClient(runtimeURL);
+  const hasValidRuntimeInstance = await restClient.healthcheck();
 
-    // 4) Show the component on the screen
-    root.render(<App runtimeURL={runtimeURL} />);
-  }
+  if (!hasValidRuntimeInstance)
+    throw new Error("Invalid runtime instance set!", { cause: CONFIGURATION_ERROR });
+
+  const el = document.getElementById('root');
+
+  if (!el)
+    throw new Error('Root element not found');
+
+  const root = ReactDOM.createRoot(el);
+  root.render(<App runtimeURL={runtimeURL} scanURL={scanURL} />);
+} catch (e) {
+  if (e instanceof Error && e.cause === CONFIGURATION_ERROR)
+    alert(e.message);
+  else throw e
 }