diff --git a/example/components/Decrypt.tsx b/example/components/Decrypt.tsx
index c7b4332..939bd3b 100644
--- a/example/components/Decrypt.tsx
+++ b/example/components/Decrypt.tsx
@@ -34,7 +34,7 @@ export function Decrypt({ isActive }: { isActive: boolean }) {
     setMessage(null);
   };
   return (
-    <Tab isActive={isActive}>
+    <Tab isActive={isActive} requiresConnection={true}>
       {message ? (
         <>
           <Text>This is your decrypted message</Text>
diff --git a/example/components/Encrypt.tsx b/example/components/Encrypt.tsx
index 074ec4f..691b8c9 100644
--- a/example/components/Encrypt.tsx
+++ b/example/components/Encrypt.tsx
@@ -45,7 +45,7 @@ export function Encrypt({ isActive }: { isActive: boolean }) {
     setEncryptedMessage(null);
   };
   return (
-    <Tab isActive={isActive}>
+    <Tab isActive={isActive} requiresConnection={true}>
       {encryptedMessage ? (
         <>
           <Text>Encrypted message</Text>
diff --git a/example/components/Header.tsx b/example/components/Header.tsx
index 9e3064e..69b4bf5 100644
--- a/example/components/Header.tsx
+++ b/example/components/Header.tsx
@@ -1,7 +1,6 @@
-import styled, {css} from "styled-components";
+import styled from "styled-components";
 import {LinkText, Text} from "./Text";
 import {MainHeading} from "./Heading";
-import MetaMaskCard from "./MetaMaskCard";
 import React from "react";
 import {useWeb3React} from "@web3-react/core";
 import {shortenAddress} from "../utils";
@@ -14,24 +13,17 @@ export const Header = () => {
                 <MainHeading>
                     MetaMask Encrypt/Decrypt
                 </MainHeading>
-                {!account ? (
-                    <ConnectSection>
-                        <Text>Use the section below to connect to MetaMask wallet provider</Text>
-                        <MetaMaskCard />
-                    </ConnectSection>
-                ) : (
-                    <>
-                        <Text>
-                            Connected as: {shortenAddress(account)}
-                            <br/>
-                            <LinkText onClick={() => {
-                                if (connector?.deactivate) connector.deactivate()
-                                if (connector?.resetState) connector.resetState()
-                            }}>
-                                Disconnect
-                            </LinkText>
-                        </Text>
-                    </>
+                {account && (
+                    <Text>
+                        Connected as: {shortenAddress(account)}
+                        <br/>
+                        <LinkText onClick={() => {
+                            if (connector?.deactivate) connector.deactivate()
+                            if (connector?.resetState) connector.resetState()
+                        }}>
+                            Disconnect
+                        </LinkText>
+                    </Text>
                 )}
             </HeaderWrapper>
         </HeaderContainer>
diff --git a/example/components/HowTo.tsx b/example/components/HowTo.tsx
index 5fbb993..2492ec3 100644
--- a/example/components/HowTo.tsx
+++ b/example/components/HowTo.tsx
@@ -1,22 +1,33 @@
 import { Tab } from "./Tab";
-import {Text} from "./Text";
+import {Link, Text} from "./Text";
 import {TabOptions} from "../pages";
 import {styled} from "styled-components";
 import Image from 'next/image'
 
-export function HowTo({ isActive, setActiveTab }: {
+export function HowTo({ isActive }: {
   setActiveTab?: (el: TabOptions) => void
   isActive: boolean
 }) {
 
   return (
-    <Tab isActive={isActive}>
+    <Tab isActive={isActive} requiresConnection={false}>
         <HowToWrapper>
             <Text>
-                This project works with asymmetric cryptography to encrypt and decrypt messages.
+                The project is open-source and can be found in{' '}
+                <Link href="https://github.com/leonacostaok/metamask-encrypt-decrypt"
+                      rel="noopener noreferrer"
+                      target="_blank">
+                    GitHub
+                </Link>.
             </Text>
             <Text>
-              Encryption is a feature of asymmetric cryptography that allows us to share PRIVATE messages between known parties. Private messages, in this context, are messages no one else than the recipient should see.
+                It works with asymmetric cryptography to encrypt and decrypt messages.
+            </Text>
+            <Text>
+              Encryption is a feature of asymmetric cryptography that allows us to share PRIVATE messages between known parties.
+            </Text>
+            <Text>
+                Private messages, in this context, are messages no one else than the recipient should see.
             </Text>
             <Text>
                 If I want to send a private message to a friend, and only for him to see that message, then I will encrypt it with his public key, and he will be able to decrypt it with his private key.
@@ -41,6 +52,10 @@ export function HowTo({ isActive, setActiveTab }: {
             <Text>
               This process is only used to share information that should not be public (it is masked behind an encryption), and no one but the person who has the message and then one that received the message can see it otherwise.
             </Text>
+
+            <Text>
+               This app does not have access to your private key, and will interact with your wallet provider for the decryption of the messages.
+            </Text>
         </HowToWrapper>
     </Tab>
   );
diff --git a/example/components/RequestPublicKey.tsx b/example/components/RequestPublicKey.tsx
index e3d7a3d..90c816b 100644
--- a/example/components/RequestPublicKey.tsx
+++ b/example/components/RequestPublicKey.tsx
@@ -20,7 +20,7 @@ export function RequestPublicKey({ isActive }: { isActive: boolean }) {
     setPublicKey(await provider.send("eth_getEncryptionPublicKey", [account]));
   };
   return (
-    <Tab isActive={isActive}>
+    <Tab isActive={isActive} requiresConnection={true}>
       {publicKey ? (
         <>
           <Text>This is your public key</Text>
diff --git a/example/components/Tab.tsx b/example/components/Tab.tsx
index d748468..2c04090 100644
--- a/example/components/Tab.tsx
+++ b/example/components/Tab.tsx
@@ -1,16 +1,31 @@
 import { ReactNode } from "react";
 import styled from "styled-components";
 import {TabOptions} from "../pages";
+import {useWeb3React} from "@web3-react/core";
+import {Text} from "./Text";
+import MetaMaskCard from "./MetaMaskCard";
 
 export function Tab({
   isActive,
   children,
+    requiresConnection
 }: {
+  requiresConnection?: boolean,
   isActive: boolean;
   setActiveTab?: (el: TabOptions) => void
   children?: ReactNode;
 }) {
-  return isActive ? <TabWrapper>{children}</TabWrapper> : <></>;
+  const { account } = useWeb3React();
+  return isActive ? (requiresConnection && account) || !requiresConnection ? (
+      <TabWrapper>
+        {children}
+      </TabWrapper>
+  ) : (
+      <ConnectSection>
+        <Text>This section requires authentication, please connect to a wallet provider from the list below to continue</Text>
+        <MetaMaskCard />
+      </ConnectSection>
+  ) : <></>;
 }
 
 const TabWrapper = styled.div`
@@ -28,3 +43,17 @@ const TabWrapper = styled.div`
     max-width: 500px;
   }
 `;
+
+const ConnectSection = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  gap: 20px;
+  padding: 50px 0;
+  p {
+    text-align: center;
+    max-width: 500px;
+  }
+`;
+
diff --git a/example/components/Text.tsx b/example/components/Text.tsx
index 282e6ca..9d7d969 100644
--- a/example/components/Text.tsx
+++ b/example/components/Text.tsx
@@ -1,4 +1,5 @@
 import styled from "styled-components";
+import NextLink from 'next/link'
 
 export const Text = styled.p`
   text-align: center;
@@ -39,3 +40,16 @@ export const LinkText = styled.span`
     cursor: pointer !important;
   }
 `
+
+export const Link = styled(NextLink)`
+     text-align: center;
+  line-height: 1.4;
+  text-decoration: underline;
+  color:white;
+  margin-block-start: 0;
+  margin-block-end: 0;
+  &:hover {
+    color: rgb(42, 196, 231);
+    cursor: pointer !important;
+  }
+`
diff --git a/example/next.config.js b/example/next.config.js
index 32b7dfe..b788e6b 100644
--- a/example/next.config.js
+++ b/example/next.config.js
@@ -3,6 +3,7 @@
  */
 const nextConfig = {
   output: 'export',
+  images: {unoptimized: true},
   env: {
     infuraKey: process.env.INFURA_KEY,
     alchemyKey: process.env.ALCHEMY_KEY,
diff --git a/example/pages/index.tsx b/example/pages/index.tsx
index e7eafa1..6284818 100644
--- a/example/pages/index.tsx
+++ b/example/pages/index.tsx
@@ -35,34 +35,31 @@ const tabsList: TabType[] = [
   { tab: TabOptions.DECRYPT, name: "Decrypt", content: Decrypt },
 ];
 export default function Home() {
-  const { account } = useWeb3React();
   const [activeTab, setActiveTab] = useState(TabOptions.HOW_TO);
   return (
-    <>
-      {account && (
-          <ScreenContainer>
-            <TabsSelector>
-              {tabsList.map((item) => (
-                  <TabButton
-                      active={activeTab === item.tab}
-                      onClick={() => setActiveTab(item.tab)}
-                  >
-                    {item.name}
-                  </TabButton>
-              ))}
-            </TabsSelector>
-            <Tabs>
-              <TabContent>
-                {tabsList.map((item) => (
-                    <item.content isActive={activeTab === item.tab}
-                                  setActiveTab={setActiveTab}
-                    />
-                ))}
-              </TabContent>
-            </Tabs>
-          </ScreenContainer>
-      )}
-    </>
+    <ScreenContainer>
+      <TabsSelector>
+        {tabsList.map((item) => (
+            <TabButton
+                key={`tab-button-${item.name}`}
+                active={activeTab === item.tab}
+                onClick={() => setActiveTab(item.tab)}
+            >
+              {item.name}
+            </TabButton>
+        ))}
+      </TabsSelector>
+      <Tabs>
+        <TabContent>
+          {tabsList.map((item) => (
+              <item.content key={`tab-content-${item.name}`}
+                            isActive={activeTab === item.tab}
+                            setActiveTab={setActiveTab}
+              />
+          ))}
+        </TabContent>
+      </Tabs>
+    </ScreenContainer>
   );
 }