diff --git a/web/app/components/AccountMenu.tsx b/web/app/components/AccountMenu.tsx
new file mode 100644
index 0000000..bfe50e9
--- /dev/null
+++ b/web/app/components/AccountMenu.tsx
@@ -0,0 +1,100 @@
+import { LinkOff } from "@mui/icons-material";
+import {
+  Box,
+  Button,
+  ListItemIcon,
+  ListItemText,
+  Menu,
+  MenuItem,
+  Stack,
+  Typography,
+} from "@mui/material";
+import React, { FC, useState } from "react";
+import { useEthereum } from "~/context/EthereumContext";
+import { useVoter } from "~/context/VoterContext";
+import { formatAccountString } from "~/lib/utils";
+
+export const AccountMenu: FC = () => {
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const open = Boolean(anchorEl);
+  const { account, logoutEthereumAccount, loading } = useEthereum();
+  const { voter } = useVoter();
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  return (
+    <>
+      <Button
+        id="account-menu"
+        aria-controls={open ? "account-menu" : undefined}
+        aria-haspopup="true"
+        aria-expanded={open ? "true" : undefined}
+        onClick={handleClick}
+        color="neutral"
+      >
+        <Stack direction="row" spacing={1}>
+          <Typography>
+            {voter && account ? `${voter.firstName} ${voter.lastName}` :  null}
+          </Typography>
+          <Box
+            component="img"
+            src="/metamask-fox.svg"
+            sx={{
+              width: 22,
+            }}
+          />
+          <Typography
+            sx={{
+              fontWeight: "bold",
+              minWidth: 120,
+              display: "inline-block",
+              textAlign: "left",
+            }}
+          >
+            {loading
+              ? "loading..."
+              : (account && formatAccountString(account)) || "not connected"}
+          </Typography>
+        </Stack>
+      </Button>
+      <Menu
+        id="basic-menu"
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+        MenuListProps={{
+          "aria-labelledby": "basic-button",
+        }}
+        anchorOrigin={{
+          vertical: "bottom",
+          horizontal: "right",
+        }}
+        transformOrigin={{
+          vertical: "top",
+          horizontal: "right",
+        }}
+        sx={{
+          marginTop: 1,
+        }}
+      >
+        <MenuItem
+          onClick={() => {
+            logoutEthereumAccount();
+            handleClose();
+          }}
+        >
+          <ListItemIcon>
+            <LinkOff />
+          </ListItemIcon>
+          <ListItemText>Disconnect</ListItemText>
+        </MenuItem>
+      </Menu>
+    </>
+  );
+};
diff --git a/web/app/components/Layout.tsx b/web/app/components/Layout.tsx
index 87a6fa6..ca56ebb 100644
--- a/web/app/components/Layout.tsx
+++ b/web/app/components/Layout.tsx
@@ -1,7 +1,7 @@
 import { Box, Container } from "@mui/material";
 import { FC } from "react";
 import { useLocation } from "remix";
-import { Navbar } from "../../public/Navbar";
+import { Navbar } from "./Navbar";
 
 export const Layout: FC = ({ children }) => {
   const location = useLocation();
diff --git a/web/public/Navbar.tsx b/web/app/components/Navbar.tsx
similarity index 69%
rename from web/public/Navbar.tsx
rename to web/app/components/Navbar.tsx
index 9f307da..051f40e 100644
--- a/web/public/Navbar.tsx
+++ b/web/app/components/Navbar.tsx
@@ -1,8 +1,10 @@
+import { Language } from "@mui/icons-material";
 import { Box, Container, Stack, Typography } from "@mui/material";
 import { FC } from "react";
 import { Link } from "remix";
 import { useEthereum } from "~/context/EthereumContext";
-import { useVoter } from "../app/context/VoterContext";
+import { useVoter } from "../context/VoterContext";
+import { AccountMenu } from "./AccountMenu";
 
 export const Navbar: FC = () => {
   const { account, network } = useEthereum();
@@ -54,31 +56,25 @@ export const Navbar: FC = () => {
             </Stack>
           </Box>
           <Box>
-            <Typography
+            <Stack
+              direction="row"
+              spacing={2}
               sx={{
-                fontSize: "0.5rem",
+                alignItems: "center",
               }}
             >
-              Account: {account || "(not connected)"}
-            </Typography>
-            {network && (
-              <Typography
+              <AccountMenu />
+              <Stack
+                direction="row"
+                spacing={1}
                 sx={{
-                  fontSize: "0.5rem",
+                  minWidth: 120,
                 }}
               >
-                Chain: {network.name} {network.chainId}{" "}
-                {network.connected ? "🟢" : "🔴"}
-              </Typography>
-            )}
-            <Typography
-              sx={{
-                fontSize: "0.5rem",
-              }}
-            >
-              Voter:{" "}
-              {voter ? `${voter.firstName} ${voter.lastName}` : "unverified"}
-            </Typography>
+                <Language />
+                {network && <Typography>{network.name}</Typography>}
+              </Stack>
+            </Stack>
           </Box>
         </Container>
       </Box>
diff --git a/web/app/context/BallotContext.tsx b/web/app/context/BallotContext.tsx
index 7093acc..272df76 100644
--- a/web/app/context/BallotContext.tsx
+++ b/web/app/context/BallotContext.tsx
@@ -7,7 +7,7 @@ import {
   useRef,
   useState,
 } from "react";
-import { useNavigate } from "remix";
+import { useLocation, useNavigate } from "remix";
 import invariant from "tiny-invariant";
 import { VoteEvent, VoterAllowedEvent } from "types/ethers-contracts/Ballot";
 import { TypedListener } from "types/ethers-contracts/common";
@@ -43,7 +43,8 @@ const UNPROTECTED_ROUTES = [
   "/errors/no-ethereum-provider",
   "/errors/nonce-too-high",
 ];
-const isProtected = (route: string) => !UNPROTECTED_ROUTES.includes(route);
+const routeRequiresBallot = (route: string) =>
+  !UNPROTECTED_ROUTES.includes(route);
 
 const BallotContext = createContext<BallotContextInterface>({
   loading: true,
@@ -56,6 +57,7 @@ const BallotContext = createContext<BallotContextInterface>({
 });
 
 export const BallotProvider: FC = ({ children }) => {
+  const [ballotExists, setBallotExists] = useState<boolean>(false);
   const [loading, setLoading] = useState<boolean>(true);
   const [proposals, setProposals] = useState<Proposal[]>([]);
   const [voteRightReceived, setVoteRightReceived] = useState(false);
@@ -63,8 +65,14 @@ export const BallotProvider: FC = ({ children }) => {
     useState<VoterVoteStatus>("unknown");
   const ballotRef = useRef<Ballot | null>(null);
   const providerRef = useRef<ethers.providers.Web3Provider | null>(null);
-  const { ethereumExists, loading: ethereumLoading, account } = useEthereum();
+  const {
+    ethereumExists,
+    loading: ethereumLoading,
+    account,
+    network,
+  } = useEthereum();
   const navigate = useNavigate();
+  const location = useLocation();
 
   const voteEventsListener: TypedListener<VoteEvent> = (voterAccount) => {
     fetchProposals();
@@ -103,12 +111,11 @@ export const BallotProvider: FC = ({ children }) => {
       try {
         await ballot.chairperson();
         console.log("[BallotContext] Contract is accessible 👍");
+        setBallotExists(true);
         fetchProposals();
       } catch (error) {
-        console.error(error);
-        if (isProtected(window.location.pathname)) {
-          navigate("/errors/ballot-not-found");
-        }
+        console.log("[BallotContext] Contract is NOT accessible 👎");
+        setBallotExists(false);
       } finally {
         setLoading(false);
       }
@@ -121,7 +128,24 @@ export const BallotProvider: FC = ({ children }) => {
       ballot.off("Vote", voteEventsListener);
       ballot.off("VoterAllowed", voterAllowedEventsListener);
     };
-  }, [ethereumLoading, ethereumExists]);
+  }, [ethereumLoading, ethereumExists, network]);
+
+  useEffect(() => {
+    if (!loading) {
+      return;
+    }
+
+    if (ballotExists) {
+      if (location.pathname === "/errors/ballot-not-found") {
+        navigate("/getstarted");
+      }
+    } else {
+      // alert(`ballotExists: ${ballotExists}, loading: ${loading}`);
+      if (routeRequiresBallot(location.pathname)) {
+        navigate("/errors/ballot-not-found");
+      }
+    }
+  }, [loading, location.pathname, ballotExists]);
 
   function fetchProposals() {
     const ballot = ballotRef.current;
@@ -175,9 +199,9 @@ export const BallotProvider: FC = ({ children }) => {
     };
   }
 
-  const value = {
+  const value: BallotContextInterface = {
     loading,
-    ballotExists: ballotRef.current !== null,
+    ballotExists,
     proposals,
     voteRightReceived,
     currentVoterVoteStatus,
diff --git a/web/app/context/EthereumContext.tsx b/web/app/context/EthereumContext.tsx
index 623a8fd..b114699 100644
--- a/web/app/context/EthereumContext.tsx
+++ b/web/app/context/EthereumContext.tsx
@@ -22,6 +22,7 @@ interface EthereumContextInterface {
   account: string | null;
   signer?: JsonRpcSigner;
   connectWithMetamask: () => void;
+  logoutEthereumAccount: () => void;
 }
 
 export const HARDHAT_CHAIN_ID = 31337;
@@ -40,6 +41,7 @@ const EthereumContext = createContext<EthereumContextInterface>({
   network: null,
   account: null,
   connectWithMetamask: () => {},
+  logoutEthereumAccount: () => {},
 });
 
 export const EthereumProvider: FC = ({ children }) => {
@@ -68,11 +70,11 @@ export const EthereumProvider: FC = ({ children }) => {
       });
 
       provider.on("network", handleNetworkChange);
-
-      // TODO: Detect les account changes
+      ethereum.on("accountsChanged", handleAccountsChanged);
 
       return () => {
         provider.off("network", handleNetworkChange);
+        ethereum.removeListener("accountsChanged", handleAccountsChanged);
       };
     } else {
       setLoading(false);
@@ -109,6 +111,20 @@ export const EthereumProvider: FC = ({ children }) => {
     });
   }
 
+  function handleAccountsChanged(accounts: string[]) {
+    if (!accounts.length) {
+      logoutEthereumAccount();
+    } else {
+      setAccount(accounts[0]);
+      // TODO: Destroy session / login the other account and setup new session?
+    }
+  }
+
+  function logoutEthereumAccount() {
+    setAccount(null);
+    // TODO: Destroy session
+  }
+
   async function connectWithMetamask() {
     const provider = providerRef.current;
     invariant(provider, "Provider should be defined");
@@ -130,13 +146,14 @@ export const EthereumProvider: FC = ({ children }) => {
     }
   }
 
-  const value = {
+  const value: EthereumContextInterface = {
     loading,
     ethereumExists,
     network,
     account,
     signer,
     connectWithMetamask,
+    logoutEthereumAccount,
   };
 
   return (
diff --git a/web/app/context/VoterContext.tsx b/web/app/context/VoterContext.tsx
index 58b4800..38a139b 100644
--- a/web/app/context/VoterContext.tsx
+++ b/web/app/context/VoterContext.tsx
@@ -21,6 +21,7 @@ const VoterContext = createContext<VoterContextInterface>({
 
 const UNPROTECTED_ROUTES = [
   "/",
+  "/results",
   "/getstarted/register",
   "/getstarted/verify",
   "/errors/ballot-not-found",
diff --git a/web/app/lib/utils.ts b/web/app/lib/utils.ts
new file mode 100644
index 0000000..a91b5fd
--- /dev/null
+++ b/web/app/lib/utils.ts
@@ -0,0 +1,3 @@
+export const formatAccountString = (address: string) => {
+  return address.slice(0, 6) + "..." + address.slice(-4);
+};
diff --git a/web/app/mui/theme.ts b/web/app/mui/theme.ts
index 85b71e4..ba43946 100644
--- a/web/app/mui/theme.ts
+++ b/web/app/mui/theme.ts
@@ -10,6 +10,22 @@ declare module "@mui/material/Typography" {
   }
 }
 
+declare module "@mui/material/styles" {
+  interface Palette {
+    neutral: Palette["primary"];
+  }
+  interface PaletteOptions {
+    neutral: PaletteOptions["primary"];
+  }
+}
+
+// Update the Button's color prop options
+declare module "@mui/material/Button" {
+  interface ButtonPropsColorOverrides {
+    neutral: true;
+  }
+}
+
 // Create a theme instance.
 const theme = createTheme({
   palette: {
@@ -17,6 +33,9 @@ const theme = createTheme({
     primary: {
       main: blue[800],
     },
+    neutral: {
+      main: grey[800],
+    },
     secondary: {
       main: grey[800],
     },
diff --git a/web/app/routes/errors/ballot-not-found.tsx b/web/app/routes/errors/ballot-not-found.tsx
index c9f442a..3b1906e 100644
--- a/web/app/routes/errors/ballot-not-found.tsx
+++ b/web/app/routes/errors/ballot-not-found.tsx
@@ -1,7 +1,7 @@
 import { Box, Typography } from "@mui/material";
 import { GenericPageLayoutWithBackButton } from "~/components/GenericPageLayout";
 
-function NoEthereumProvider() {
+function BallotNotFound() {
   return (
     <GenericPageLayoutWithBackButton>
       <Typography variant="pageTitle">
@@ -20,4 +20,4 @@ function NoEthereumProvider() {
   );
 }
 
-export default NoEthereumProvider;
+export default BallotNotFound;
diff --git a/web/app/routes/errors/nonce-too-high.tsx b/web/app/routes/errors/nonce-too-high.tsx
index 5e7a3bf..d79e8e3 100644
--- a/web/app/routes/errors/nonce-too-high.tsx
+++ b/web/app/routes/errors/nonce-too-high.tsx
@@ -2,7 +2,7 @@ import { Box, Typography } from "@mui/material";
 import { YoutubeEmbed } from "~/components/YoutubeEmbed";
 import { GenericPageLayoutWithBackButton } from "~/components/GenericPageLayout";
 
-function NoEthereumProvider() {
+function NonceTooHigh() {
   return (
     <GenericPageLayoutWithBackButton>
       <Typography variant="pageTitle">
@@ -29,4 +29,4 @@ function NoEthereumProvider() {
   );
 }
 
-export default NoEthereumProvider;
+export default NonceTooHigh;
diff --git a/web/app/routes/getstarted/register.tsx b/web/app/routes/getstarted/register.tsx
index 81f02b3..4da5fbd 100644
--- a/web/app/routes/getstarted/register.tsx
+++ b/web/app/routes/getstarted/register.tsx
@@ -29,11 +29,7 @@ import { giveRightToVote } from "~/lib/ballot";
 import { CustomError } from "~/lib/error";
 import { registerUser } from "~/lib/users.server";
 import { usePageReady } from "~/hooks/usePageReady";
-import {
-  generalTransition,
-  generalTransitionDelay,
-  generalButtonTransition,
-} from "~/lib/transitions";
+import { generalTransition, generalTransitionDelay } from "~/lib/transitions";
 
 // TODO: add fancy error messages
 // https://remix.run/docs/en/v1/guides/data-writes#animating-in-the-validation-errors
@@ -187,7 +183,11 @@ export default function GetStartedRegister() {
               />
               <FormHelperText>To verify your identity</FormHelperText>
             </FormControl>
-            <input name="account" type="hidden" value={account as string} />
+            <input
+              name="account"
+              type="hidden"
+              defaultValue={account as string}
+            />
             <Button
               variant="contained"
               type="submit"
diff --git a/web/public/metamask-fox.svg b/web/public/metamask-fox.svg
new file mode 100644
index 0000000..6cb41ba
--- /dev/null
+++ b/web/public/metamask-fox.svg
@@ -0,0 +1,61 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns:ev="http://www.w3.org/2001/xml-events"
+	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 318.6 318.6"
+	 style="enable-background:new 0 0 318.6 318.6;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#E2761B;stroke:#E2761B;stroke-linecap:round;stroke-linejoin:round;}
+	.st1{fill:#E4761B;stroke:#E4761B;stroke-linecap:round;stroke-linejoin:round;}
+	.st2{fill:#D7C1B3;stroke:#D7C1B3;stroke-linecap:round;stroke-linejoin:round;}
+	.st3{fill:#233447;stroke:#233447;stroke-linecap:round;stroke-linejoin:round;}
+	.st4{fill:#CD6116;stroke:#CD6116;stroke-linecap:round;stroke-linejoin:round;}
+	.st5{fill:#E4751F;stroke:#E4751F;stroke-linecap:round;stroke-linejoin:round;}
+	.st6{fill:#F6851B;stroke:#F6851B;stroke-linecap:round;stroke-linejoin:round;}
+	.st7{fill:#C0AD9E;stroke:#C0AD9E;stroke-linecap:round;stroke-linejoin:round;}
+	.st8{fill:#161616;stroke:#161616;stroke-linecap:round;stroke-linejoin:round;}
+	.st9{fill:#763D16;stroke:#763D16;stroke-linecap:round;stroke-linejoin:round;}
+</style>
+<polygon class="st0" points="274.1,35.5 174.6,109.4 193,65.8 "/>
+<g>
+	<polygon class="st1" points="44.4,35.5 143.1,110.1 125.6,65.8 	"/>
+	<polygon class="st1" points="238.3,206.8 211.8,247.4 268.5,263 284.8,207.7 	"/>
+	<polygon class="st1" points="33.9,207.7 50.1,263 106.8,247.4 80.3,206.8 	"/>
+	<polygon class="st1" points="103.6,138.2 87.8,162.1 144.1,164.6 142.1,104.1 	"/>
+	<polygon class="st1" points="214.9,138.2 175.9,103.4 174.6,164.6 230.8,162.1 	"/>
+	<polygon class="st1" points="106.8,247.4 140.6,230.9 111.4,208.1 	"/>
+	<polygon class="st1" points="177.9,230.9 211.8,247.4 207.1,208.1 	"/>
+</g>
+<g>
+	<polygon class="st2" points="211.8,247.4 177.9,230.9 180.6,253 180.3,262.3 	"/>
+	<polygon class="st2" points="106.8,247.4 138.3,262.3 138.1,253 140.6,230.9 	"/>
+</g>
+<polygon class="st3" points="138.8,193.5 110.6,185.2 130.5,176.1 "/>
+<polygon class="st3" points="179.7,193.5 188,176.1 208,185.2 "/>
+<g>
+	<polygon class="st4" points="106.8,247.4 111.6,206.8 80.3,207.7 	"/>
+	<polygon class="st4" points="207,206.8 211.8,247.4 238.3,207.7 	"/>
+	<polygon class="st4" points="230.8,162.1 174.6,164.6 179.8,193.5 188.1,176.1 208.1,185.2 	"/>
+	<polygon class="st4" points="110.6,185.2 130.6,176.1 138.8,193.5 144.1,164.6 87.8,162.1 	"/>
+</g>
+<g>
+	<polygon class="st5" points="87.8,162.1 111.4,208.1 110.6,185.2 	"/>
+	<polygon class="st5" points="208.1,185.2 207.1,208.1 230.8,162.1 	"/>
+	<polygon class="st5" points="144.1,164.6 138.8,193.5 145.4,227.6 146.9,182.7 	"/>
+	<polygon class="st5" points="174.6,164.6 171.9,182.6 173.1,227.6 179.8,193.5 	"/>
+</g>
+<polygon class="st6" points="179.8,193.5 173.1,227.6 177.9,230.9 207.1,208.1 208.1,185.2 "/>
+<polygon class="st6" points="110.6,185.2 111.4,208.1 140.6,230.9 145.4,227.6 138.8,193.5 "/>
+<polygon class="st7" points="180.3,262.3 180.6,253 178.1,250.8 140.4,250.8 138.1,253 138.3,262.3 106.8,247.4 117.8,256.4 
+	140.1,271.9 178.4,271.9 200.8,256.4 211.8,247.4 "/>
+<polygon class="st8" points="177.9,230.9 173.1,227.6 145.4,227.6 140.6,230.9 138.1,253 140.4,250.8 178.1,250.8 180.6,253 "/>
+<g>
+	<polygon class="st9" points="278.3,114.2 286.8,73.4 274.1,35.5 177.9,106.9 214.9,138.2 267.2,153.5 278.8,140 273.8,136.4 
+		281.8,129.1 275.6,124.3 283.6,118.2 	"/>
+	<polygon class="st9" points="31.8,73.4 40.3,114.2 34.9,118.2 42.9,124.3 36.8,129.1 44.8,136.4 39.8,140 51.3,153.5 103.6,138.2 
+		140.6,106.9 44.4,35.5 	"/>
+</g>
+<polygon class="st6" points="267.2,153.5 214.9,138.2 230.8,162.1 207.1,208.1 238.3,207.7 284.8,207.7 "/>
+<polygon class="st6" points="103.6,138.2 51.3,153.5 33.9,207.7 80.3,207.7 111.4,208.1 87.8,162.1 "/>
+<polygon class="st6" points="174.6,164.6 177.9,106.9 193.1,65.8 125.6,65.8 140.6,106.9 144.1,164.6 145.3,182.8 145.4,227.6 
+	173.1,227.6 173.3,182.8 "/>
+</svg>