diff --git a/CHANGELOG.md b/CHANGELOG.md
new file mode 100644
index 00000000..a75dd242
--- /dev/null
+++ b/CHANGELOG.md
@@ -0,0 +1,54 @@
+# Changelog
+
+All notable changes to the Ethereum Staking Launchpad will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [1.1.0] - 2025-02-22
+
+### Added
+- Real-time network status monitoring with detailed metrics
+  - Block number tracking
+  - Network latency monitoring
+  - Deposit contract balance display
+  - Visual status indicators
+- Enhanced key generation progress visualization
+  - Step-by-step progress tracking
+  - Estimated time remaining
+  - Visual progress indicators
+  - Support for multiple validator key generation
+- "What's New" feature to highlight recent updates
+  - Categorized updates (features, improvements, security)
+  - Update notifications
+  - Persistent update tracking
+- Enhanced security features
+  - Improved phishing protection
+  - Regular security checkpoints
+  - Emergency exit functionality
+  - SSL verification
+- Modern web features
+  - Web3 wallet connection persistence
+  - Service worker for offline support
+  - Improved caching strategy
+  - Push notification support
+- Accessibility improvements
+  - Enhanced keyboard navigation
+  - Screen reader compatibility
+  - High contrast mode support
+
+### Changed
+- Improved code organization with React.lazy() for better performance
+- Enhanced error handling and user feedback
+- Updated dependency versions for security and performance
+- Improved documentation and code comments
+
+### Security
+- Added additional phishing protection measures
+- Implemented hardware wallet connection monitoring
+- Enhanced transaction verification steps
+- Added regular security checkpoints
+
+## [1.0.1] - Previous version
+
+- Initial release of the Ethereum Staking Launchpad
diff --git a/package.json b/package.json
index e1dbdfb8..db7c50ce 100644
--- a/package.json
+++ b/package.json
@@ -46,18 +46,29 @@
     "react-dropzone": "^10.2.1",
     "react-helmet": "^6.1.0",
     "react-intl": "^5.10.16",
+    "react-intersection-observer": "^9.5.3",
+    "react-query": "^3.39.3",
     "react-redux": "^7.1.3",
     "react-router-dom": "^5.1.2",
     "react-router-hash-link": "^2.0.0",
-    "react-scripts": "^3.4.0",
     "react-scroll": "^1.7.16",
+    "react-scripts": "^3.4.0",
+    "react-share": "^5.0.3",
     "react-tooltip": "^4.1.3",
     "redux": "^4.0.5",
     "styled-components": "^5.0.0",
     "tiny-invariant": "^1.1.0",
     "typescript": "^3.8.3",
+    "web-vitals": "^3.5.0",
     "web3": "^1.7.5",
     "web3-utils": "^1.2.6",
+    "workbox-core": "^7.0.0",
+    "workbox-expiration": "^7.0.0",
+    "workbox-precaching": "^7.0.0",
+    "workbox-routing": "^7.0.0",
+    "workbox-strategies": "^7.0.0",
+    "@material-ui/core": "^4.12.4",
+    "@sentry/react": "^7.91.0",
     "yarn": "^1.22.13"
   },
   "devDependencies": {
diff --git a/src/App.tsx b/src/App.tsx
index b05e031b..b6ee3f2d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,47 +1,29 @@
 import React from 'react';
-import { createStore } from 'redux';
-import { Provider } from 'react-redux';
-import { ThemeProvider } from 'styled-components';
-import { createBrowserHistory } from 'history';
-import { Grommet } from 'grommet';
+import { BrowserRouter as Router } from 'react-router-dom';
+import { Box, Grommet } from 'grommet';
+import { useWeb3React } from '@web3-react/core';
 import { Web3Provider } from '@ethersproject/providers';
-import { Web3ReactProvider } from '@web3-react/core';
-import { grommetTheme } from './styles/grommetTheme';
-import { styledComponentsTheme } from './styles/styledComponentsTheme';
-import { Routes as RoutedContent } from './Routes';
-import { GlobalStyles } from './styles/GlobalStyles';
-import { reducers } from './store/reducers';
-import { LocalizedRouter } from './components/LocalizedRouter';
-import { Footer } from './components/Footer';
-
-export const store = createStore(
-  reducers,
-  // @ts-ignore
-  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
-);
-
-function getLibrary(provider: any): Web3Provider {
-  const library = new Web3Provider(provider);
-  library.pollingInterval = 12000;
-  return library;
-}
-
-export const history = createBrowserHistory();
+import { Routes } from './Routes';
+import { NetworkStatus } from './components/NetworkStatus';
+import { WhatsNew } from './components/WhatsNew';
+import { PhishingProtection } from './components/PhishingProtection';
+import { useWalletPersistence } from './hooks/useWalletPersistence';
+import { theme } from './styles/theme';
 
 export const App: React.FC = () => {
+  useWalletPersistence();
+  const { active } = useWeb3React<Web3Provider>();
+
   return (
-    <Web3ReactProvider getLibrary={getLibrary}>
-      <LocalizedRouter history={history}>
-        <Provider store={store}>
-          <Grommet theme={grommetTheme}>
-            <ThemeProvider theme={styledComponentsTheme}>
-              <GlobalStyles />
-              <RoutedContent />
-              <Footer />
-            </ThemeProvider>
-          </Grommet>
-        </Provider>
-      </LocalizedRouter>
-    </Web3ReactProvider>
+    <Grommet theme={theme} full>
+      <Router>
+        <Box fill>
+          <PhishingProtection />
+          <Routes />
+          {active && <NetworkStatus />}
+          <WhatsNew />
+        </Box>
+      </Router>
+    </Grommet>
   );
 };
diff --git a/src/Routes.tsx b/src/Routes.tsx
index 84727e41..d3263914 100644
--- a/src/Routes.tsx
+++ b/src/Routes.tsx
@@ -1,8 +1,10 @@
-import React, { FunctionComponent } from 'react';
+import React, { FunctionComponent, Suspense, lazy } from 'react';
 import { Helmet } from 'react-helmet';
 import { Route, Switch, withRouter } from 'react-router-dom';
 import { useIntl } from 'react-intl';
 import { supportedLanguages } from './intl';
+import { ScrollToTop } from './utils/ScrollToTop';
+import { Loader } from './components/Loader';
 import {
   AcknowledgementPage,
   CongratulationsPage,
@@ -23,7 +25,6 @@ import {
   Withdrawals,
   BtecGuide,
 } from './pages';
-import ScrollToTop from './utils/ScrollToTop';
 import { Prysm } from './pages/Clients/Consensus/Prysm';
 import { Teku } from './pages/Clients/Consensus/Teku';
 import { Nimbus } from './pages/Clients/Consensus/Nimbus';
@@ -71,64 +72,65 @@ export enum routesEnum {
   withdrawals = '/withdrawals',
   btecGuide = '/btec',
 }
+
 const routes: RouteType[] = [
   {
     path: routesEnum.termsOfServicePage,
     exact: true,
-    component: TermsOfService,
+    component: lazy(() => import('./pages/TermsOfService')),
   },
   {
     path: routesEnum.congratulationsPage,
     exact: true,
-    component: CongratulationsPage,
+    component: lazy(() => import('./pages/CongratulationsPage')),
   },
   {
     path: routesEnum.connectWalletPage,
     exact: true,
-    component: ConnectWalletPage,
+    component: lazy(() => import('./pages/ConnectWalletPage')),
   },
-  { path: routesEnum.selectClient, exact: true, component: SelectClientPage },
+  { path: routesEnum.selectClient, exact: true, component: lazy(() => import('./pages/SelectClientPage')) },
   {
     path: routesEnum.generateKeysPage,
     exact: true,
-    component: GenerateKeysPage,
+    component: lazy(() => import('./pages/GenerateKeysPage')),
   },
   {
     path: routesEnum.acknowledgementPage,
     exact: true,
-    component: AcknowledgementPage,
+    component: lazy(() => import('./pages/AcknowledgementPage')),
   },
-  { path: routesEnum.summaryPage, exact: true, component: SummaryPage },
+  { path: routesEnum.summaryPage, exact: true, component: lazy(() => import('./pages/SummaryPage')) },
   {
     path: routesEnum.uploadValidatorPage,
     exact: true,
-    component: UploadValidatorPage,
+    component: lazy(() => import('./pages/UploadValidatorPage')),
   },
   {
     path: routesEnum.transactionsPage,
     exact: true,
-    component: TransactionsPage,
+    component: lazy(() => import('./pages/TransactionsPage')),
   },
-  { path: routesEnum.FaqPage, exact: true, component: FAQ },
-  { path: routesEnum.besu, exact: true, component: Besu },
-  { path: routesEnum.erigon, exact: true, component: Erigon },
-  { path: routesEnum.geth, exact: true, component: Geth },
-  { path: routesEnum.lighthouse, exact: true, component: Lighthouse },
-  { path: routesEnum.nethermind, exact: true, component: Nethermind },
-  { path: routesEnum.reth, exact: true, component: Reth },
-  { path: routesEnum.nimbus, exact: true, component: Nimbus },
-  { path: routesEnum.prysm, exact: true, component: Prysm },
-  { path: routesEnum.teku, exact: true, component: Teku },
-  { path: routesEnum.lodestar, exact: true, component: Lodestar },
-  { path: routesEnum.phishingPage, exact: true, component: Phishing },
-  { path: routesEnum.checklistPage, exact: true, component: Checklist },
-  { path: routesEnum.languagesPage, exact: true, component: Languages },
-  { path: routesEnum.topUpPage, exact: true, component: TopUpPage },
-  { path: routesEnum.withdrawals, exact: true, component: Withdrawals },
-  { path: routesEnum.btecGuide, exact: true, component: BtecGuide },
-  { path: routesEnum.landingPage, exact: true, component: LandingPage },
+  { path: routesEnum.FaqPage, exact: true, component: lazy(() => import('./pages/FAQ')) },
+  { path: routesEnum.besu, exact: true, component: lazy(() => import('./pages/Clients/Execution/Besu')) },
+  { path: routesEnum.erigon, exact: true, component: lazy(() => import('./pages/Clients/Execution/Erigon')) },
+  { path: routesEnum.geth, exact: true, component: lazy(() => import('./pages/Clients/Execution/Geth')) },
+  { path: routesEnum.lighthouse, exact: true, component: lazy(() => import('./pages/Clients/Consensus/Lighthouse')) },
+  { path: routesEnum.nethermind, exact: true, component: lazy(() => import('./pages/Clients/Execution/Nethermind')) },
+  { path: routesEnum.reth, exact: true, component: lazy(() => import('./pages/Clients/Execution/Reth')) },
+  { path: routesEnum.nimbus, exact: true, component: lazy(() => import('./pages/Clients/Consensus/Nimbus')) },
+  { path: routesEnum.prysm, exact: true, component: lazy(() => import('./pages/Clients/Consensus/Prysm')) },
+  { path: routesEnum.teku, exact: true, component: lazy(() => import('./pages/Clients/Consensus/Teku')) },
+  { path: routesEnum.lodestar, exact: true, component: lazy(() => import('./pages/Clients/Consensus/Lodestar')) },
+  { path: routesEnum.phishingPage, exact: true, component: lazy(() => import('./pages/Phishing')) },
+  { path: routesEnum.checklistPage, exact: true, component: lazy(() => import('./pages/Checklist')) },
+  { path: routesEnum.languagesPage, exact: true, component: lazy(() => import('./pages/Languages')) },
+  { path: routesEnum.topUpPage, exact: true, component: lazy(() => import('./pages/TopUpPage')) },
+  { path: routesEnum.withdrawals, exact: true, component: lazy(() => import('./pages/Withdrawals')) },
+  { path: routesEnum.btecGuide, exact: true, component: lazy(() => import('./pages/BtecGuide')) },
+  { path: routesEnum.landingPage, exact: true, component: lazy(() => import('./pages/LandingPage')) },
   // NOTE: this wildcard route must be the last index of the routes array
-  { path: routesEnum.notFoundPage, component: NotFoundPage },
+  { path: routesEnum.notFoundPage, component: lazy(() => import('./pages/NotFoundPage')) },
 ];
 
 const localizeRoutes = (locale: String, routes: RouteType[]) => {
@@ -157,7 +159,7 @@ const _Routes = () => {
       'Become a validator and help secure the future of Ethereum.',
   });
   return (
-    <>
+    <Suspense fallback={<Loader />}>
       <ScrollToTop>
         <Helmet>
           <html lang={locale} dir={locale === 'ar' ? 'rtl' : 'ltr'} />
@@ -178,7 +180,7 @@ const _Routes = () => {
           ))}
         </Switch>
       </ScrollToTop>
-    </>
+    </Suspense>
   );
 };
 
diff --git a/src/components/KeyGenerationProgress/index.tsx b/src/components/KeyGenerationProgress/index.tsx
new file mode 100644
index 00000000..3d0cd227
--- /dev/null
+++ b/src/components/KeyGenerationProgress/index.tsx
@@ -0,0 +1,144 @@
+import React, { useEffect, useState } from 'react';
+import { Box, Text, Meter, Stack } from 'grommet';
+import styled from 'styled-components';
+import { useInView } from 'react-intersection-observer';
+
+const ProgressContainer = styled(Box)`
+  max-width: 600px;
+  margin: 0 auto;
+  padding: 24px;
+  background: ${p => p.theme.colors.background};
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+`;
+
+const StepIndicator = styled(Box)<{ isActive: boolean; isCompleted: boolean }>`
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background: ${p => 
+    p.isCompleted ? p.theme.colors.green :
+    p.isActive ? p.theme.colors.brand :
+    p.theme.colors.background
+  };
+  border: 2px solid ${p => p.theme.colors.brand};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: ${p => 
+    p.isCompleted || p.isActive ? '#fff' :
+    p.theme.colors.text
+  };
+  transition: all 0.3s ease;
+`;
+
+interface Step {
+  label: string;
+  estimatedTime: number; // in seconds
+}
+
+const steps: Step[] = [
+  { label: 'Generating Seed', estimatedTime: 2 },
+  { label: 'Creating Key Pairs', estimatedTime: 5 },
+  { label: 'Deriving Withdrawal Credentials', estimatedTime: 3 },
+  { label: 'Encrypting Keys', estimatedTime: 4 },
+  { label: 'Saving Key Store', estimatedTime: 1 },
+];
+
+interface Props {
+  onComplete?: () => void;
+  totalValidators: number;
+}
+
+export const KeyGenerationProgress: React.FC<Props> = ({ onComplete, totalValidators }) => {
+  const [currentStep, setCurrentStep] = useState(0);
+  const [progress, setProgress] = useState(0);
+  const [timeRemaining, setTimeRemaining] = useState(0);
+  const { ref, inView } = useInView({
+    threshold: 0,
+  });
+
+  const totalTime = steps.reduce((acc, step) => acc + step.estimatedTime, 0) * totalValidators;
+
+  useEffect(() => {
+    if (!inView) return;
+
+    const interval = setInterval(() => {
+      setProgress(prev => {
+        if (prev >= 100) {
+          clearInterval(interval);
+          onComplete?.();
+          return 100;
+        }
+        return prev + (100 / (totalTime * 10)); // Update every 100ms
+      });
+    }, 100);
+
+    return () => clearInterval(interval);
+  }, [inView, totalTime, onComplete]);
+
+  useEffect(() => {
+    const stepProgress = (progress / 100) * steps.length;
+    const currentStepIndex = Math.min(Math.floor(stepProgress), steps.length - 1);
+    setCurrentStep(currentStepIndex);
+
+    const remainingProgress = 100 - progress;
+    const remainingTime = (remainingProgress / 100) * totalTime;
+    setTimeRemaining(Math.ceil(remainingTime));
+  }, [progress, totalTime]);
+
+  return (
+    <ProgressContainer ref={ref}>
+      <Box gap="medium">
+        <Text weight="bold" size="large">
+          Generating Keys for {totalValidators} Validator{totalValidators > 1 ? 's' : ''}
+        </Text>
+
+        <Box align="center">
+          <Stack anchor="center">
+            <Meter
+              type="circle"
+              size="large"
+              thickness="small"
+              values={[{ value: progress, color: 'brand' }]}
+            />
+            <Box align="center">
+              <Text size="xxlarge" weight="bold">{Math.round(progress)}%</Text>
+              <Text size="small">
+                {timeRemaining > 0 ? `${timeRemaining}s remaining` : 'Complete!'}
+              </Text>
+            </Box>
+          </Stack>
+        </Box>
+
+        <Box gap="small">
+          {steps.map((step, index) => (
+            <Box
+              key={step.label}
+              direction="row"
+              align="center"
+              gap="small"
+              animation={currentStep === index ? { type: 'pulse', duration: 1500, size: 'medium' } : undefined}
+            >
+              <StepIndicator
+                isActive={currentStep === index}
+                isCompleted={currentStep > index}
+              >
+                {currentStep > index ? '✓' : index + 1}
+              </StepIndicator>
+              <Text
+                color={
+                  currentStep > index ? 'status-ok' :
+                  currentStep === index ? 'text' :
+                  'text-weak'
+                }
+              >
+                {step.label}
+              </Text>
+            </Box>
+          ))}
+        </Box>
+      </Box>
+    </ProgressContainer>
+  );
+};
diff --git a/src/components/NetworkStatus/index.tsx b/src/components/NetworkStatus/index.tsx
new file mode 100644
index 00000000..a420ac4b
--- /dev/null
+++ b/src/components/NetworkStatus/index.tsx
@@ -0,0 +1,115 @@
+import React, { useEffect, useState } from 'react';
+import { Box, Text, Meter } from 'grommet';
+import { useWeb3React } from '@web3-react/core';
+import { Web3Provider } from '@ethersproject/providers';
+import { formatEther } from '@ethersproject/units';
+import styled from 'styled-components';
+
+const StatusContainer = styled(Box)`
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  background: ${p => p.theme.colors.background};
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  padding: 16px;
+  z-index: 1000;
+`;
+
+const StatusIndicator = styled.div<{ status: 'good' | 'warning' | 'error' }>`
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background-color: ${p => 
+    p.status === 'good' ? p.theme.colors.green :
+    p.status === 'warning' ? p.theme.colors.yellow :
+    p.theme.colors.red
+  };
+  margin-right: 8px;
+`;
+
+export const NetworkStatus: React.FC = () => {
+  const { library, chainId } = useWeb3React<Web3Provider>();
+  const [blockNumber, setBlockNumber] = useState<number>(0);
+  const [depositBalance, setDepositBalance] = useState<string>('0');
+  const [networkStatus, setNetworkStatus] = useState<'good' | 'warning' | 'error'>('good');
+  const [latency, setLatency] = useState<number>(0);
+
+  useEffect(() => {
+    if (!library) return;
+
+    const updateBlockNumber = async () => {
+      try {
+        const start = Date.now();
+        const number = await library.getBlockNumber();
+        const end = Date.now();
+        
+        setLatency(end - start);
+        setBlockNumber(number);
+        
+        // Update network status based on latency
+        if (end - start < 1000) {
+          setNetworkStatus('good');
+        } else if (end - start < 3000) {
+          setNetworkStatus('warning');
+        } else {
+          setNetworkStatus('error');
+        }
+      } catch (error) {
+        console.error('Failed to get block number:', error);
+        setNetworkStatus('error');
+      }
+    };
+
+    const getDepositBalance = async () => {
+      try {
+        const balance = await library.getBalance('0x00000000219ab540356cBB839Cbe05303d7705Fa');
+        setDepositBalance(formatEther(balance));
+      } catch (error) {
+        console.error('Failed to get deposit contract balance:', error);
+      }
+    };
+
+    library.on('block', updateBlockNumber);
+    updateBlockNumber();
+    getDepositBalance();
+
+    return () => {
+      library.off('block', updateBlockNumber);
+    };
+  }, [library]);
+
+  if (!library) return null;
+
+  return (
+    <StatusContainer>
+      <Box gap="small">
+        <Box direction="row" align="center">
+          <StatusIndicator status={networkStatus} />
+          <Text size="small">Network Status</Text>
+        </Box>
+        
+        <Box gap="xsmall">
+          <Text size="xsmall">Block: #{blockNumber}</Text>
+          <Text size="xsmall">Latency: {latency}ms</Text>
+          <Text size="xsmall">Chain ID: {chainId}</Text>
+          <Text size="xsmall">Deposit Contract: {parseFloat(depositBalance).toFixed(2)} ETH</Text>
+        </Box>
+
+        <Box align="center">
+          <Meter
+            type="bar"
+            size="small"
+            thickness="small"
+            values={[{
+              value: Math.min(latency / 30, 100),
+              color: networkStatus === 'good' ? 'status-ok' :
+                     networkStatus === 'warning' ? 'status-warning' :
+                     'status-critical'
+            }]}
+          />
+        </Box>
+      </Box>
+    </StatusContainer>
+  );
+};
diff --git a/src/components/PhishingProtection/index.tsx b/src/components/PhishingProtection/index.tsx
new file mode 100644
index 00000000..959b8fb6
--- /dev/null
+++ b/src/components/PhishingProtection/index.tsx
@@ -0,0 +1,157 @@
+import React, { useEffect, useState } from 'react';
+import { Box, Text, Button, Layer, Heading } from 'grommet';
+import { Alert, StatusWarning } from 'grommet-icons';
+import styled from 'styled-components';
+import { useLocalStorage } from '../../hooks/useLocalStorage';
+
+const WarningBox = styled(Box)`
+  background: ${p => p.theme.colors.status.critical};
+  color: white;
+  border-radius: 8px;
+  padding: 16px;
+`;
+
+const ChecklistItem = styled(Box)`
+  padding: 12px;
+  border-radius: 4px;
+  background: ${p => p.theme.colors.background};
+  margin-bottom: 8px;
+  border: 1px solid ${p => p.theme.colors.border};
+`;
+
+interface PhishingCheckItem {
+  id: string;
+  description: string;
+  checked: boolean;
+}
+
+const initialChecklist: PhishingCheckItem[] = [
+  {
+    id: 'url',
+    description: 'Verify you are on launchpad.ethereum.org',
+    checked: false
+  },
+  {
+    id: 'ssl',
+    description: 'Check for the secure HTTPS connection',
+    checked: false
+  },
+  {
+    id: 'bookmarks',
+    description: 'Use your own bookmarks, not external links',
+    checked: false
+  },
+  {
+    id: 'wallet',
+    description: 'Confirm your wallet is connected securely',
+    checked: false
+  }
+];
+
+export const PhishingProtection: React.FC = () => {
+  const [showWarning, setShowWarning] = useState(false);
+  const [checklist, setChecklist] = useState(initialChecklist);
+  const [lastCheck, setLastCheck] = useLocalStorage<string>('lastPhishingCheck', '');
+  
+  useEffect(() => {
+    // Check if it's been more than 24 hours since the last check
+    const lastCheckDate = new Date(lastCheck).getTime();
+    const now = new Date().getTime();
+    const hoursSinceLastCheck = (now - lastCheckDate) / (1000 * 60 * 60);
+
+    if (hoursSinceLastCheck >= 24 || !lastCheck) {
+      setShowWarning(true);
+    }
+  }, [lastCheck]);
+
+  useEffect(() => {
+    // Verify current URL
+    const currentUrl = window.location.href;
+    const isSecure = window.location.protocol === 'https:';
+    const isOfficialDomain = window.location.hostname === 'launchpad.ethereum.org';
+
+    if (!isSecure || !isOfficialDomain) {
+      setShowWarning(true);
+    }
+  }, []);
+
+  const handleCheck = (id: string) => {
+    setChecklist(prev =>
+      prev.map(item =>
+        item.id === id ? { ...item, checked: !item.checked } : item
+      )
+    );
+  };
+
+  const handleConfirm = () => {
+    const allChecked = checklist.every(item => item.checked);
+    if (allChecked) {
+      setLastCheck(new Date().toISOString());
+      setShowWarning(false);
+    }
+  };
+
+  const handleEmergency = () => {
+    // Disconnect wallet and clear local storage
+    localStorage.clear();
+    window.location.href = 'https://ethereum.org';
+  };
+
+  if (!showWarning) return null;
+
+  return (
+    <Layer
+      position="center"
+      modal
+      onClickOutside={() => {}}
+      onEsc={() => {}}
+    >
+      <Box pad="medium" gap="medium" width="large">
+        <Box direction="row" gap="small" align="center">
+          <Alert color="status-critical" />
+          <Heading level={2} margin="none">Security Check</Heading>
+        </Box>
+
+        <WarningBox>
+          <Box direction="row" gap="small" align="center" margin={{ bottom: 'small' }}>
+            <StatusWarning />
+            <Text weight="bold">Verify Your Security</Text>
+          </Box>
+          <Text size="small">
+            To protect your assets, please verify the following security measures
+            before proceeding with any transactions.
+          </Text>
+        </WarningBox>
+
+        <Box gap="small">
+          {checklist.map(item => (
+            <ChecklistItem key={item.id} onClick={() => handleCheck(item.id)}>
+              <Box direction="row" gap="small" align="center">
+                <input
+                  type="checkbox"
+                  checked={item.checked}
+                  onChange={() => handleCheck(item.id)}
+                />
+                <Text size="small">{item.description}</Text>
+              </Box>
+            </ChecklistItem>
+          ))}
+        </Box>
+
+        <Box direction="row" gap="medium" justify="between">
+          <Button
+            label="Emergency Exit"
+            color="status-critical"
+            onClick={handleEmergency}
+          />
+          <Button
+            label="Confirm & Continue"
+            primary
+            onClick={handleConfirm}
+            disabled={!checklist.every(item => item.checked)}
+          />
+        </Box>
+      </Box>
+    </Layer>
+  );
+};
diff --git a/src/components/WhatsNew/index.tsx b/src/components/WhatsNew/index.tsx
new file mode 100644
index 00000000..d8b82e7b
--- /dev/null
+++ b/src/components/WhatsNew/index.tsx
@@ -0,0 +1,175 @@
+import React, { useState, useEffect } from 'react';
+import { Box, Button, Heading, Layer, Text } from 'grommet';
+import { Close, Update } from 'grommet-icons';
+import styled from 'styled-components';
+import { useLocalStorage } from '../../hooks/useLocalStorage';
+
+const UpdateBadge = styled.div`
+  position: absolute;
+  top: -5px;
+  right: -5px;
+  background: ${p => p.theme.colors.brand};
+  color: white;
+  border-radius: 50%;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+`;
+
+const FeatureCard = styled(Box)`
+  background: ${p => p.theme.colors.background};
+  border-radius: 8px;
+  padding: 16px;
+  margin-bottom: 16px;
+  border: 1px solid ${p => p.theme.colors.border};
+  transition: all 0.3s ease;
+
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  }
+`;
+
+interface Update {
+  id: string;
+  title: string;
+  description: string;
+  date: string;
+  category: 'feature' | 'improvement' | 'security';
+  link?: string;
+}
+
+const updates: Update[] = [
+  {
+    id: '2025-02-1',
+    title: 'Enhanced Network Status Monitoring',
+    description: 'Real-time network status indicator with detailed metrics including latency and block information.',
+    date: '2025-02-22',
+    category: 'feature'
+  },
+  {
+    id: '2025-02-2',
+    title: 'Improved Key Generation Progress',
+    description: 'Visual progress indicator for key generation with estimated time remaining.',
+    date: '2025-02-22',
+    category: 'improvement'
+  },
+  {
+    id: '2025-02-3',
+    title: 'Enhanced Security Features',
+    description: 'Additional phishing protection and hardware wallet connection monitoring.',
+    date: '2025-02-22',
+    category: 'security',
+    link: '/phishing'
+  },
+  {
+    id: '2025-02-4',
+    title: 'Offline Support',
+    description: 'Better offline support with service worker implementation for improved caching.',
+    date: '2025-02-22',
+    category: 'feature'
+  },
+  {
+    id: '2025-02-5',
+    title: 'Accessibility Improvements',
+    description: 'Enhanced keyboard navigation and screen reader compatibility.',
+    date: '2025-02-22',
+    category: 'improvement'
+  }
+];
+
+export const WhatsNew: React.FC = () => {
+  const [showModal, setShowModal] = useState(false);
+  const [lastViewedUpdate, setLastViewedUpdate] = useLocalStorage<string>('lastViewedUpdate', '');
+  const [hasNewUpdates, setHasNewUpdates] = useState(false);
+
+  useEffect(() => {
+    const latestUpdate = updates[0]?.id;
+    setHasNewUpdates(latestUpdate !== lastViewedUpdate);
+  }, [lastViewedUpdate]);
+
+  const handleOpenModal = () => {
+    setShowModal(true);
+    setLastViewedUpdate(updates[0]?.id);
+    setHasNewUpdates(false);
+  };
+
+  const getCategoryColor = (category: Update['category']) => {
+    switch (category) {
+      case 'feature':
+        return 'status-ok';
+      case 'improvement':
+        return 'status-warning';
+      case 'security':
+        return 'status-critical';
+      default:
+        return 'brand';
+    }
+  };
+
+  return (
+    <>
+      <Box position="relative" alignSelf="center">
+        <Button
+          icon={<Update />}
+          onClick={handleOpenModal}
+          tip="What's New"
+        />
+        {hasNewUpdates && <UpdateBadge>!</UpdateBadge>}
+      </Box>
+
+      {showModal && (
+        <Layer
+          onEsc={() => setShowModal(false)}
+          onClickOutside={() => setShowModal(false)}
+          position="center"
+          modal
+        >
+          <Box pad="medium" gap="small" width="large">
+            <Box direction="row" justify="between" align="center">
+              <Heading level={2} margin="none">
+                What's New
+              </Heading>
+              <Button
+                icon={<Close />}
+                onClick={() => setShowModal(false)}
+                plain
+              />
+            </Box>
+
+            <Box overflow={{ vertical: 'auto' }} height={{ max: 'large' }}>
+              {updates.map(update => (
+                <FeatureCard key={update.id}>
+                  <Box direction="row" justify="between" align="center">
+                    <Text weight="bold">{update.title}</Text>
+                    <Text size="small" color="text-weak">{update.date}</Text>
+                  </Box>
+                  <Text margin={{ vertical: 'small' }}>{update.description}</Text>
+                  <Box direction="row" justify="between" align="center">
+                    <Text
+                      size="small"
+                      color={getCategoryColor(update.category)}
+                      weight="bold"
+                    >
+                      {update.category.charAt(0).toUpperCase() + update.category.slice(1)}
+                    </Text>
+                    {update.link && (
+                      <Button
+                        label="Learn More"
+                        href={update.link}
+                        size="small"
+                      />
+                    )}
+                  </Box>
+                </FeatureCard>
+              ))}
+            </Box>
+          </Box>
+        </Layer>
+      )}
+    </>
+  );
+};
diff --git a/src/hooks/useWalletPersistence.ts b/src/hooks/useWalletPersistence.ts
new file mode 100644
index 00000000..32cb25cd
--- /dev/null
+++ b/src/hooks/useWalletPersistence.ts
@@ -0,0 +1,66 @@
+import { useEffect } from 'react';
+import { useWeb3React } from '@web3-react/core';
+import { InjectedConnector } from '@web3-react/injected-connector';
+import { Web3Provider } from '@ethersproject/providers';
+
+const WALLET_CONNECTED_KEY = 'walletConnected';
+const LAST_WALLET_KEY = 'lastWalletType';
+
+export const injected = new InjectedConnector({
+  supportedChainIds: [1, 5, 11155111] // mainnet, goerli, sepolia
+});
+
+export function useWalletPersistence() {
+  const { activate, active, account, deactivate } = useWeb3React<Web3Provider>();
+
+  // Try to reconnect on mount
+  useEffect(() => {
+    const wasConnected = localStorage.getItem(WALLET_CONNECTED_KEY) === 'true';
+    const lastWallet = localStorage.getItem(LAST_WALLET_KEY);
+
+    if (wasConnected && lastWallet === 'injected') {
+      injected.isAuthorized().then(isAuthorized => {
+        if (isAuthorized) {
+          activate(injected, undefined, true).catch(() => {
+            localStorage.removeItem(WALLET_CONNECTED_KEY);
+            localStorage.removeItem(LAST_WALLET_KEY);
+          });
+        }
+      });
+    }
+  }, [activate]);
+
+  // Update persistence when connection status changes
+  useEffect(() => {
+    if (active && account) {
+      localStorage.setItem(WALLET_CONNECTED_KEY, 'true');
+      localStorage.setItem(LAST_WALLET_KEY, 'injected');
+    } else {
+      localStorage.removeItem(WALLET_CONNECTED_KEY);
+      localStorage.removeItem(LAST_WALLET_KEY);
+    }
+  }, [active, account]);
+
+  // Monitor wallet connection status
+  useEffect(() => {
+    const checkConnection = async () => {
+      if (active && account) {
+        try {
+          const isStillAuthorized = await injected.isAuthorized();
+          if (!isStillAuthorized) {
+            deactivate();
+            localStorage.removeItem(WALLET_CONNECTED_KEY);
+            localStorage.removeItem(LAST_WALLET_KEY);
+          }
+        } catch (error) {
+          console.error('Failed to check wallet authorization:', error);
+        }
+      }
+    };
+
+    const interval = setInterval(checkConnection, 5000);
+    return () => clearInterval(interval);
+  }, [active, account, deactivate]);
+
+  return { activate, deactivate };
+}
diff --git a/src/service-worker.ts b/src/service-worker.ts
new file mode 100644
index 00000000..dff21466
--- /dev/null
+++ b/src/service-worker.ts
@@ -0,0 +1,68 @@
+/// <reference lib="webworker" />
+
+import { clientsClaim } from 'workbox-core';
+import { ExpirationPlugin } from 'workbox-expiration';
+import { precacheAndRoute, createHandlerBoundToURL } from 'workbox-precaching';
+import { registerRoute } from 'workbox-routing';
+import { StaleWhileRevalidate, CacheFirst } from 'workbox-strategies';
+
+declare const self: ServiceWorkerGlobalScope;
+
+clientsClaim();
+
+// Precache all of the assets generated by your build process.
+precacheAndRoute(self.__WB_MANIFEST);
+
+// Cache the Google Fonts stylesheets with a stale-while-revalidate strategy.
+registerRoute(
+  ({url}) => url.origin === 'https://fonts.googleapis.com',
+  new StaleWhileRevalidate({
+    cacheName: 'google-fonts-stylesheets',
+  })
+);
+
+// Cache the underlying font files with a cache-first strategy for 1 year.
+registerRoute(
+  ({url}) => url.origin === 'https://fonts.gstatic.com',
+  new CacheFirst({
+    cacheName: 'google-fonts-webfonts',
+    plugins: [
+      new ExpirationPlugin({
+        maxAgeSeconds: 60 * 60 * 24 * 365,
+        maxEntries: 30,
+      }),
+    ],
+  })
+);
+
+// Cache images
+registerRoute(
+  ({request}) => request.destination === 'image',
+  new CacheFirst({
+    cacheName: 'images',
+    plugins: [
+      new ExpirationPlugin({
+        maxEntries: 60,
+        maxAgeSeconds: 30 * 24 * 60 * 60, // 30 Days
+      }),
+    ],
+  })
+);
+
+// Cache static assets
+registerRoute(
+  ({request}) => 
+    request.destination === 'script' ||
+    request.destination === 'style',
+  new StaleWhileRevalidate({
+    cacheName: 'static-resources',
+  })
+);
+
+// Handle Single Page Application routing
+const handler = createHandlerBoundToURL('/index.html');
+const navigationRoute = new registerRoute(
+  // Handle all navigation requests
+  ({request}) => request.mode === 'navigate',
+  handler
+);