diff --git a/packages/react-app/src/App.jsx b/packages/react-app/src/App.jsx
index 071da32e..dd6f37bd 100644
--- a/packages/react-app/src/App.jsx
+++ b/packages/react-app/src/App.jsx
@@ -601,7 +601,6 @@ function App(props) {
                   address={address}
                   mainnetProvider={mainnetProvider}
                   tx={tx}
-                  isWalletConnected={isWalletConnected}
                   nativeCurrency={targetNetwork.nativeCurrency}
                 />
               </Route>
@@ -622,7 +621,7 @@ function App(props) {
                   nativeCurrency={targetNetwork.nativeCurrency}
                   networkTokenList={targetNetwork.networkTokenList}
                   isHost={isHost}
-                  isWalletConnected={isWalletConnected}
+                  loadWeb3Modal={loadWeb3Modal}
                 />
               </Route>
               {/* This is used when testing out smart contracts:
diff --git a/packages/react-app/src/components/Account/index.jsx b/packages/react-app/src/components/Account/index.jsx
index 7d298118..81889e9d 100644
--- a/packages/react-app/src/components/Account/index.jsx
+++ b/packages/react-app/src/components/Account/index.jsx
@@ -104,8 +104,8 @@ export default function Account({
       modalButtons.push(
         <Button
           key="loginbutton"
-          style={{ verticalAlign: "top", marginLeft: 8, marginTop: 4, width: width }}
-          size="medium"
+          style={{ verticalAlign: "top", position: "fixed", top: 20, right: 10, width: width }}
+          size="large"
           onClick={loadWeb3Modal}
           key="second"
           type="primary"
diff --git a/packages/react-app/src/views/GuestRoom.jsx b/packages/react-app/src/views/GuestRoom.jsx
index 532bbbad..b019e28e 100644
--- a/packages/react-app/src/views/GuestRoom.jsx
+++ b/packages/react-app/src/views/GuestRoom.jsx
@@ -26,6 +26,8 @@ export default function GuestRoom({
   selectedChainId,
   tx,
   nativeCurrency,
+  isWalletConnected,
+  loadWeb3Modal,
 }) {
   const { room } = useParams();
 
@@ -168,6 +170,18 @@ export default function GuestRoom({
 
   return (
     <div className="bg-purple-darkpurple">
+      {(!web3Modal || !web3Modal.cachedProvider ) && (
+        <Button 
+          style={{ height: "50px", fontSize: "20px", marginBottom: "40px" }}
+          key="loginbutton"
+          size="large"
+          onClick={loadWeb3Modal}
+          type="primary"
+          shape="round"
+        >
+          Connect Wallet to Use Tip Party!
+        </Button>
+      )}
       <h2 id="title">Welcome to the Tip Party!</h2>
       <h3>
         {" "}
diff --git a/packages/react-app/src/views/HostRoom.jsx b/packages/react-app/src/views/HostRoom.jsx
index 765d74cd..42862f74 100644
--- a/packages/react-app/src/views/HostRoom.jsx
+++ b/packages/react-app/src/views/HostRoom.jsx
@@ -28,6 +28,7 @@ export default function HostRoom({
   selectedChainId,
   tx,
   nativeCurrency,
+  loadWeb3Modal,
   networkTokenList,
 }) {
   const { room } = useParams();
@@ -206,6 +207,13 @@ export default function HostRoom({
   };
 
   const ethPayHandler = async () => {
+    if (web3Modal.cachedProvider === "") {
+      return notification.error({
+        message: "Failed to Distribute!",
+        description: "Please connect to a wallet before distributing tokens",
+        placement: "bottomRight",
+      });
+    }
     const result = tx(
       writeContracts.TokenDistributor.splitEth(allAddresses, room, {
         value: ethers.utils.parseEther(numericalAmount),
@@ -251,6 +259,14 @@ export default function HostRoom({
   };
 
   const tokenPayHandler = async opts => {
+
+    if (web3Modal.cachedProvider === "") {
+      return notification.error({
+        message: "Failed to Distribute!",
+        description: "Please connect to a wallet before distributing tokens",
+        placement: "bottomRight",
+      });
+    }
     const result = tx(
       writeContracts.TokenDistributor.splitTokenFromUser(
         allAddresses,
@@ -354,6 +370,19 @@ export default function HostRoom({
 
   return (
     <div className="bg-purple-darkpurple">
+      {(!web3Modal || !web3Modal.cachedProvider )&&(
+        <Button
+          style={{ height: "50px", fontSize: "20px", marginBottom: "40px" }}
+          key="loginbutton"
+          size="large"
+          onClick={loadWeb3Modal}
+          type="primary"
+          shape="round"
+        >
+          Connect Wallet to Use Tip Party!
+        </Button>
+      )}
+
       <h2 id="title">Tip Your Party!</h2>
       <h3>
         {" "}
@@ -382,6 +411,7 @@ export default function HostRoom({
           <LinkOutlined style={{ color: "#C9B8FF" }} />
         </button>
       </h3>
+
       <div
         className="Room"
         style={{
diff --git a/packages/react-app/src/views/Rooms.jsx b/packages/react-app/src/views/Rooms.jsx
index d5272aac..8ee56ba6 100644
--- a/packages/react-app/src/views/Rooms.jsx
+++ b/packages/react-app/src/views/Rooms.jsx
@@ -16,6 +16,7 @@ export default function Rooms({
   tx,
   nativeCurrency,
   isHost,
+  loadWeb3Modal,
   networkTokenList,
 }) {
   return (
@@ -36,6 +37,7 @@ export default function Rooms({
             selectedChainId={selectedChainId}
             tx={tx}
             nativeCurrency={nativeCurrency}
+            loadWeb3Modal={loadWeb3Modal}
             networkTokenList={networkTokenList}
           />
         )}
@@ -56,6 +58,7 @@ export default function Rooms({
             selectedChainId={selectedChainId}
             tx={tx}
             nativeCurrency={nativeCurrency}
+            loadWeb3Modal={loadWeb3Modal}
           />
         </div>
       )}