diff --git a/src/contexts/AppContext.tsx b/src/contexts/AppContext.tsx
index 578bd8dc74..5d9107085e 100644
--- a/src/contexts/AppContext.tsx
+++ b/src/contexts/AppContext.tsx
@@ -23,6 +23,8 @@ const AppContextProvider = ({ children }) => {
 
     const [web3NameList, setWeb3NameList] = useState<Web3NameListType>({});
 
+    const [snapInstalled, setSnapInstalled] = useState(false);
+
     const [SnapState, setSnapState] = useState(1);
     const {
         isModalOpen: isMetamaskPushSnapOpen,
@@ -77,8 +79,6 @@ const AppContextProvider = ({ children }) => {
             account: readOnlyWallet,
             env: appConfig.appEnv,
         });
-        console.log("User Instance in guest mode", userInstance);
-
         dispatch(setUserPushSDKInstance(userInstance));
     }
 
@@ -92,8 +92,6 @@ const AppContextProvider = ({ children }) => {
                 account: account
             });
 
-            console.log("User Instance", userInstance);
-
             dispatch(setUserPushSDKInstance(userInstance));
         } catch (error) {
             // Handle initialization error
@@ -120,7 +118,9 @@ const AppContextProvider = ({ children }) => {
             setSnapState,
             initializePushSDK,
             SnapState,
-            handleConnectWallet
+            handleConnectWallet,
+            setSnapInstalled,
+            snapInstalled
         }}>
             {children}
         </AppContext.Provider>
diff --git a/src/modules/snap/SnapModule.tsx b/src/modules/snap/SnapModule.tsx
index fdb0fbbaad..9acc35cc47 100644
--- a/src/modules/snap/SnapModule.tsx
+++ b/src/modules/snap/SnapModule.tsx
@@ -35,10 +35,9 @@ const SnapModule = ({
 }) => {
   const [loading, setLoading] = useState(false);
   const [walletConnected, setWalletConnected] = useState(false);
-  const [snapInstalled, setSnapInstalled] = useState(false);
   const [addedAddress, setAddedAddress] = useState(false);
 
-  const { showMetamaskPushSnap, setSnapState } = React.useContext(AppContext);
+  const { showMetamaskPushSnap, setSnapState, setSnapInstalled, snapInstalled } = React.useContext(AppContext);
 
   const { account, provider } = useAccount();
 
@@ -168,7 +167,7 @@ const SnapModule = ({
       showSnapFAQModal();
     }
 
-    if(route == 'knowledge'){
+    if (route == 'knowledge') {
       showSnapKnowledgeModal();
     }
 
@@ -305,32 +304,32 @@ const SnapModule = ({
                   fontWeight="400"
                 >
                   Connected to Push Snap
-              </SpanV2>
-            </ItemHV2>
-          ) : (
-            <ItemVV2 gap="16px">
-              {loading && !snapInstalled ? (
-                <LoaderSpinner
-                  type={LOADER_TYPE.SEAMLESS}
-                  spinnerSize={44}
-                />
-              ) : (
-                <ConnectButton disabled={!snapInstalled ? false : true} onClick={() => connectToMetaMask()} >
-                  {!snapInstalled ? 'Step 1: Install Snap' : 'Step 1: Completed'}
-                </ConnectButton>
-              )}
-              {loading && snapInstalled ? (
-                <LoaderSpinner
-                  type={LOADER_TYPE.SEAMLESS}
-                  spinnerSize={44}
-                />
-              ) : (
-                <ConnectButton disabled={snapInstalled ? false : true} signOnMM={snapInstalled ? true : false} onClick={() => connectToMetaMask()} >
-                  Step 2: Sign In with Metamask 🦊
-                </ConnectButton>
-              )}
-            </ItemVV2>
-          )}
+                </SpanV2>
+              </ItemHV2>
+            ) : (
+              <ItemVV2 gap="16px">
+                {loading && !snapInstalled ? (
+                  <LoaderSpinner
+                    type={LOADER_TYPE.SEAMLESS}
+                    spinnerSize={44}
+                  />
+                ) : (
+                  <ConnectButton disabled={!snapInstalled ? false : true} onClick={() => connectToMetaMask()} >
+                    {!snapInstalled ? 'Step 1: Install Snap' : 'Step 1: Completed'}
+                  </ConnectButton>
+                )}
+                {loading && snapInstalled ? (
+                  <LoaderSpinner
+                    type={LOADER_TYPE.SEAMLESS}
+                    spinnerSize={44}
+                  />
+                ) : (
+                  <ConnectButton disabled={snapInstalled ? false : true} signOnMM={snapInstalled ? true : false} onClick={() => connectToMetaMask()} >
+                    Step 2: Sign In with Metamask 🦊
+                  </ConnectButton>
+                )}
+              </ItemVV2>
+            )}
 
             {walletConnected || addedAddress ? (
               <ButtonContainer gap="12px" >
@@ -367,9 +366,9 @@ const SnapModule = ({
         </SubContainer>
         <ItemVV2 flex='none'>
           <SpanV2 fontSize='14px' fontWeight='400' color='#657795'>Have a question? Check out our {" "}
-            <SpanV2 fontWeight='500' cursor='pointer' onClick={()=>navigate("/snap/faq")}>FAQs </SpanV2>
+            <SpanV2 fontWeight='500' cursor='pointer' onClick={() => navigate("/snap/faq")}>FAQs </SpanV2>
             or {" "}
-            <SpanV2 fontWeight='500' cursor='pointer' onClick={()=>navigate("/snap/knowledge")}>Knowledgebase.</SpanV2>
+            <SpanV2 fontWeight='500' cursor='pointer' onClick={() => navigate("/snap/knowledge")}>Knowledgebase.</SpanV2>
           </SpanV2>
         </ItemVV2>
       </Container>
diff --git a/src/structure/Header.tsx b/src/structure/Header.tsx
index 8c31f231ee..4583e6fb7e 100644
--- a/src/structure/Header.tsx
+++ b/src/structure/Header.tsx
@@ -1,39 +1,42 @@
-import React, { useContext, useRef } from 'react';
+import React, { Suspense, useContext, useEffect, useRef } from 'react';
 
 // React + Web3 Essentials
 import { ethers } from 'ethers';
+import { Link } from 'react-router-dom';
 
 // External Packages
+import { AiOutlineClose, AiOutlineMenu } from 'react-icons/ai';
 import { useLocation } from 'react-router-dom';
 import { DarkModeSwitch } from 'react-toggle-dark-mode';
-import { AiOutlineClose, AiOutlineMenu } from 'react-icons/ai';
 import styled, { css, useTheme } from 'styled-components';
 
 // Internal Components
-import { Button, Item, ItemH, Section, Span } from 'primaries/SharedStyling';
-import { ReactComponent as EPNSLogoDark } from './assets/epnsDark.svg';
-import { ReactComponent as EPNSLogoLight } from './assets/epnsLight.svg';
+import { ReactComponent as OpenLink } from 'assets/PushSnaps/GoToImage.svg';
+import { ReactComponent as MetamaskLogo } from 'assets/PushSnaps/metamasksnap.svg';
 import MobileNavButton from 'components/MobileNavButton';
 import NavigationButton from 'components/NavigationButton';
+import { LOADER_SPINNER_TYPE } from 'components/reusables/loaders/LoaderSpinner';
+import Spinner from 'components/reusables/spinners/SpinnerUnit';
+import { AppContext } from 'contexts/AppContext';
+import { ErrorContext } from 'contexts/ErrorContext';
+import { NavigationContext } from 'contexts/NavigationContext';
 import Bell from 'primaries/Bell';
 import Profile from 'primaries/Profile';
-import { NavigationContext } from 'contexts/NavigationContext';
-import { ErrorContext } from 'contexts/ErrorContext';
-import { ReactComponent as MetamaskLogo } from 'assets/PushSnaps/metamasksnap.svg';
-import { ReactComponent as OpenLink } from 'assets/PushSnaps/GoToImage.svg'
+import { Button, Item, ItemH, Section, Span } from 'primaries/SharedStyling';
+import { ReactComponent as EPNSLogoDark } from './assets/epnsDark.svg';
+import { ReactComponent as EPNSLogoLight } from './assets/epnsLight.svg';
 
 // Internal Configs
+import ChainIndicator from 'components/ChainIndicator';
+import { ItemHV2, ItemVV2, SpanV2 } from 'components/reusables/SharedStylingV2';
 import { appConfig } from 'config';
+import APP_PATHS from 'config/AppPaths';
 import GLOBALS from 'config/Globals';
+import { themeDark, themeLight } from 'config/Themization';
+import { UnsupportedChainIdError } from 'connectors/error';
+import { useAccount, useDeviceWidthCheck } from 'hooks';
 import { useClickAway } from 'react-use';
 import MobileNavigation from './MobileNavigation';
-import { useAccount, useDeviceWidthCheck } from 'hooks';
-import ChainIndicator from 'components/ChainIndicator';
-import { UnsupportedChainIdError } from 'connectors/error';
-import APP_PATHS from 'config/AppPaths';
-import { themeDark, themeLight } from 'config/Themization';
-import { ItemHV2, ItemVV2, SpanV2 } from 'components/reusables/SharedStylingV2';
-import { AppContext } from 'contexts/AppContext';
 
 // header tags for pages that are not there in navigationList (Sidebar)
 const EXTRA_HEADER_TAGS = {
@@ -68,8 +71,7 @@ function Header({ isDarkMode, darkModeToggle }) {
   const navRef = useRef()
 
   const { navigationSetup } = useContext(NavigationContext);
-
-  // Get 
+  const {  setSnapInstalled, snapInstalled } = React.useContext(AppContext);
   const { isActive, switchChain, connect, wallet } = useAccount();
   const { authError: error } = useContext(ErrorContext);
 
@@ -84,6 +86,9 @@ function Header({ isDarkMode, darkModeToggle }) {
   // Get Location
   const location = useLocation();
 
+  // const [snapInstalled, setSnapInstalled] = React.useState(false);
+
+
   React.useEffect(() => {
     // runs when navigation setup is updated, will run on init
     updateHeaderTag(location);
@@ -138,15 +143,30 @@ function Header({ isDarkMode, darkModeToggle }) {
   const showSnapMobile = useDeviceWidthCheck(600);
   const isSnapPage = location?.pathname === '/snap';
 
+  const isSnapInstalled = async () => {
+    const installedSnaps = await window.ethereum.request({
+      method: 'wallet_getSnaps',
+    });
+    Object.keys(installedSnaps).forEach((snap) => {
+      if (snap == 'npm:@pushprotocol/snap') {
+        setSnapInstalled(true);
+      }
+    });
+  }
+
+  useEffect(() => {
+    isSnapInstalled();
+  }, [])
+
   const SnapHeader = () => {
     return (
       <SnapSection>
         <MetamaskLogo width={24} height={22} />
         <InstallText>
           <SpanV2 fontSize='12px' fontWeight='400'>Get Notifications directly in MetaMask</SpanV2>
-          <Link href='https://app.push.org/snap' target='_blank'>
+          <StyledLink to='/snap'>
             Install Push Snap <OpenLink />
-          </Link>
+          </StyledLink>
         </InstallText>
       </SnapSection>
     )
@@ -198,8 +218,11 @@ function Header({ isDarkMode, darkModeToggle }) {
             </Span>
           </HeaderTag>
         )}
-        {!showSnapMobile && <SnapHeader />}
 
+        <Suspense fallback={<Spinner size={24} color={GLOBALS.COLORS.PRIMARY_PINK} type={LOADER_SPINNER_TYPE.PROCESSING}/>}>
+          {!showSnapMobile && !snapInstalled && <SnapHeader />}
+        </Suspense>
+        
 
         {isActive && !showLoginControls && !error && (
           <DarkModeSwitch
@@ -402,7 +425,8 @@ const InstallText = styled.div`
   
 `
 
-const Link = styled.a`
+
+const StyledLink = styled(Link)`
   cursor:pointer;
   font-size:12px;
   font-weight:400;
diff --git a/src/types/context.ts b/src/types/context.ts
index fbcd357f68..4415fbe9c8 100644
--- a/src/types/context.ts
+++ b/src/types/context.ts
@@ -12,6 +12,8 @@ export interface AppContextType {
   SnapState: number;
   setSnapState: any;
   initializePushSDK: any;
+  snapInstalled: boolean;
+  setSnapInstalled: (snapInstalled:boolean) => void;
   handleConnectWallet: (
     showToast?: boolean,
     toastMessage?: string