diff --git a/web/package.json b/web/package.json
index 611b85114..ac18d1f46 100644
--- a/web/package.json
+++ b/web/package.json
@@ -10,6 +10,8 @@
     "src": "./src",
     "assets": "./src/assets",
     "components": "./src/components",
+    "context": "./src/context",
+    "layout": "./src/layout",
     "consts": "./src/consts",
     "hooks": "./src/hooks",
     "pages": "./src/pages",
@@ -47,7 +49,8 @@
   },
   "dependencies": {
     "@kleros/kleros-v2-contracts": "workspace:^",
-    "@kleros/ui-components-library": "^0.1.3",
+    "@kleros/ui-components-library": "^0.1.5",
+    "core-js": "^3.21.1",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-is": "^18.0.0",
diff --git a/web/src/app.tsx b/web/src/app.tsx
index 2d9d69752..4a771358d 100644
--- a/web/src/app.tsx
+++ b/web/src/app.tsx
@@ -1,21 +1,24 @@
 import React from "react";
 import { Routes, Route } from "react-router-dom";
-import Layout from "components/layout";
+import StyledComponentsProvider from "context/StyledComponentsProvider";
+import Layout from "layout/index";
 import Home from "./pages/home";
 
 const App: React.FC = () => (
-  <Routes>
-    <Route path="/" element={<Layout />}>
-      <Route index element={<Home />} />
-      <Route path="cases" element={<h1>Cases</h1>} />
-      <Route path="courts" element={<h1>Courts</h1>} />
-      <Route path="dashboard" element={<h1>Dashboard</h1>} />
-      <Route
-        path="*"
-        element={<h1>Justice not found here ¯\_( ͡° ͜ʖ ͡°)_/¯</h1>}
-      />
-    </Route>
-  </Routes>
+  <StyledComponentsProvider>
+    <Routes>
+      <Route path="/" element={<Layout />}>
+        <Route index element={<Home />} />
+        <Route path="cases" element={<h1>Cases</h1>} />
+        <Route path="courts" element={<h1>Courts</h1>} />
+        <Route path="dashboard" element={<h1>Dashboard</h1>} />
+        <Route
+          path="*"
+          element={<h1>Justice not found here ¯\_( ͡° ͜ʖ ͡°)_/¯</h1>}
+        />
+      </Route>
+    </Routes>
+  </StyledComponentsProvider>
 );
 
 export default App;
diff --git a/web/src/assets/svgs/header/hamburger.svg b/web/src/assets/svgs/header/hamburger.svg
new file mode 100644
index 000000000..a3672cbe4
--- /dev/null
+++ b/web/src/assets/svgs/header/hamburger.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.571429 3.29169H15.4286C15.7442 3.29169 16 3.03054 16 2.70835V1.25002C16 0.927838 15.7442 0.666687 15.4286 0.666687H0.571429C0.255821 0.666687 0 0.927838 0 1.25002V2.70835C0 3.03054 0.255821 3.29169 0.571429 3.29169ZM0.571429 9.12502H15.4286C15.7442 9.12502 16 8.86387 16 8.54169V7.08335C16 6.76117 15.7442 6.50002 15.4286 6.50002H0.571429C0.255821 6.50002 0 6.76117 0 7.08335V8.54169C0 8.86387 0.255821 9.12502 0.571429 9.12502ZM0.571429 14.9584H15.4286C15.7442 14.9584 16 14.6972 16 14.375V12.9167C16 12.5945 15.7442 12.3334 15.4286 12.3334H0.571429C0.255821 12.3334 0 12.5945 0 12.9167V14.375C0 14.6972 0.255821 14.9584 0.571429 14.9584Z" fill="white"/>
+</svg>
diff --git a/web/src/assets/svgs/menu-icons/dark-mode.svg b/web/src/assets/svgs/menu-icons/dark-mode.svg
new file mode 100644
index 000000000..c3f24c6fc
--- /dev/null
+++ b/web/src/assets/svgs/menu-icons/dark-mode.svg
@@ -0,0 +1,3 @@
+<svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 16C10.4676 16 12.7212 14.8773 14.2143 13.0378C14.4352 12.7656 14.1943 12.3681 13.853 12.4331C9.97163 13.1722 6.40728 10.1963 6.40728 6.27825C6.40728 4.02131 7.61547 1.94591 9.57909 0.828438C9.88178 0.656188 9.80566 0.197281 9.46172 0.13375C8.97956 0.0448416 8.49029 7.30105e-05 8 0C3.58409 0 0 3.57847 0 8C0 12.4159 3.57847 16 8 16Z" />
+</svg>
diff --git a/web/src/assets/svgs/menu-icons/help.svg b/web/src/assets/svgs/menu-icons/help.svg
new file mode 100644
index 000000000..0d0b1f793
--- /dev/null
+++ b/web/src/assets/svgs/menu-icons/help.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 0C3.58203 0 0 3.58332 0 8C0 12.4193 3.58203 16 8 16C12.418 16 16 12.4193 16 8C16 3.58332 12.418 0 8 0ZM8 14.4516C4.43445 14.4516 1.54839 11.5667 1.54839 8C1.54839 4.43564 4.43458 1.54839 8 1.54839C11.5642 1.54839 14.4516 4.43455 14.4516 8C14.4516 11.5655 11.5667 14.4516 8 14.4516ZM11.4595 6.21935C11.4595 8.38232 9.12332 8.41561 9.12332 9.21494V9.41935C9.12332 9.63313 8.95 9.80645 8.73623 9.80645H7.26374C7.04997 9.80645 6.87664 9.63313 6.87664 9.41935V9.14003C6.87664 7.98697 7.75084 7.52603 8.41145 7.15564C8.97794 6.83806 9.32513 6.62206 9.32513 6.20148C9.32513 5.64516 8.61548 5.2759 8.04177 5.2759C7.29374 5.2759 6.94842 5.63 6.463 6.24265C6.33213 6.40781 6.09332 6.43848 5.92539 6.31116L5.02784 5.63058C4.8631 5.50568 4.82619 5.27361 4.94255 5.10274C5.70471 3.98358 6.67548 3.35484 8.1869 3.35484C9.76984 3.35484 11.4595 4.59045 11.4595 6.21935V6.21935ZM9.35484 11.6129C9.35484 12.36 8.74706 12.9677 8 12.9677C7.25294 12.9677 6.64516 12.36 6.64516 11.6129C6.64516 10.8658 7.25294 10.2581 8 10.2581C8.74706 10.2581 9.35484 10.8658 9.35484 11.6129Z" fill="#9013FE"/>
+</svg>
diff --git a/web/src/assets/svgs/menu-icons/kleros-solutions.svg b/web/src/assets/svgs/menu-icons/kleros-solutions.svg
new file mode 100644
index 000000000..0e5cdf722
--- /dev/null
+++ b/web/src/assets/svgs/menu-icons/kleros-solutions.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="14" viewBox="0 0 16 14" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 2C4 3.10457 3.10457 4 2 4C0.895431 4 0 3.10457 0 2C0 0.895431 0.895431 0 2 0C3.10457 0 4 0.895431 4 2ZM4 7C4 8.10457 3.10457 9 2 9C0.895431 9 0 8.10457 0 7C0 5.89543 0.895431 5 2 5C3.10457 5 4 5.89543 4 7ZM2 14C3.10457 14 4 13.1046 4 12C4 10.8954 3.10457 10 2 10C0.895431 10 0 10.8954 0 12C0 13.1046 0.895431 14 2 14ZM10 2C10 3.10457 9.10457 4 8 4C6.89543 4 6 3.10457 6 2C6 0.895431 6.89543 0 8 0C9.10457 0 10 0.895431 10 2ZM8 9C9.10457 9 10 8.10457 10 7C10 5.89543 9.10457 5 8 5C6.89543 5 6 5.89543 6 7C6 8.10457 6.89543 9 8 9ZM10 12C10 13.1046 9.10457 14 8 14C6.89543 14 6 13.1046 6 12C6 10.8954 6.89543 10 8 10C9.10457 10 10 10.8954 10 12ZM14 4C15.1046 4 16 3.10457 16 2C16 0.895431 15.1046 0 14 0C12.8954 0 12 0.895431 12 2C12 3.10457 12.8954 4 14 4ZM16 7C16 8.10457 15.1046 9 14 9C12.8954 9 12 8.10457 12 7C12 5.89543 12.8954 5 14 5C15.1046 5 16 5.89543 16 7ZM14 14C15.1046 14 16 13.1046 16 12C16 10.8954 15.1046 10 14 10C12.8954 10 12 10.8954 12 12C12 13.1046 12.8954 14 14 14Z" />
+</svg>
diff --git a/web/src/assets/svgs/menu-icons/light-mode.svg b/web/src/assets/svgs/menu-icons/light-mode.svg
new file mode 100644
index 000000000..1254dbf4f
--- /dev/null
+++ b/web/src/assets/svgs/menu-icons/light-mode.svg
@@ -0,0 +1,3 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.76855 5C7.11543 5 5.76855 6.34688 5.76855 8C5.76855 9.65312 7.11543 11 8.76855 11C10.4217 11 11.7686 9.65312 11.7686 8C11.7686 6.34688 10.4217 5 8.76855 5ZM16.4686 7.51562L13.5092 6.0375L14.5561 2.9C14.6967 2.475 14.2936 2.07188 13.8717 2.21563L10.7342 3.2625L9.25293 0.3C9.05293 -0.1 8.48418 -0.1 8.28418 0.3L6.80605 3.25938L3.66543 2.2125C3.24043 2.07188 2.8373 2.475 2.98105 2.89687L4.02793 6.03438L1.06855 7.51562C0.668555 7.71562 0.668555 8.28438 1.06855 8.48438L4.02793 9.9625L2.98105 13.1031C2.84043 13.5281 3.24355 13.9313 3.66543 13.7875L6.80293 12.7406L8.28105 15.7C8.48105 16.1 9.0498 16.1 9.2498 15.7L10.7279 12.7406L13.8654 13.7875C14.2904 13.9281 14.6936 13.525 14.5498 13.1031L13.5029 9.96562L16.4623 8.4875C16.8686 8.28438 16.8686 7.71562 16.4686 7.51562ZM11.5967 10.8281C10.0373 12.3875 7.4998 12.3875 5.94043 10.8281C4.38105 9.26875 4.38105 6.73125 5.94043 5.17188C7.4998 3.6125 10.0373 3.6125 11.5967 5.17188C13.1561 6.73125 13.1561 9.26875 11.5967 10.8281Z" />
+</svg>
diff --git a/web/src/assets/svgs/menu-icons/notifications.svg b/web/src/assets/svgs/menu-icons/notifications.svg
new file mode 100644
index 000000000..cf0055939
--- /dev/null
+++ b/web/src/assets/svgs/menu-icons/notifications.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="16" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.6807 11.3216C13.0791 10.6728 11.9536 9.69687 11.9536 6.5C11.9536 4.07188 10.2573 2.12812 7.97009 1.65125V1C7.97009 0.447812 7.52423 0 6.97437 0C6.42452 0 5.97866 0.447812 5.97866 1V1.65125C3.69145 2.12812 1.99518 4.07188 1.99518 6.5C1.99518 9.69687 0.869636 10.6728 0.268098 11.3216C0.0812852 11.5231 -0.00153525 11.7641 2.15267e-05 12C0.00344643 12.5125 0.40416 13 0.999471 13H12.9493C13.5446 13 13.9456 12.5125 13.9487 12C13.9503 11.7641 13.8675 11.5228 13.6807 11.3216ZM2.1026 11.5C2.7633 10.6259 3.48564 9.17719 3.48907 6.51813C3.48907 6.51188 3.4872 6.50625 3.4872 6.5C3.4872 4.56687 5.04833 3 6.97437 3C8.90042 3 10.4616 4.56687 10.4616 6.5C10.4616 6.50625 10.4597 6.51188 10.4597 6.51813C10.4631 9.1775 11.1855 10.6263 11.8461 11.5H2.1026ZM6.97437 16C8.07408 16 8.96611 15.1047 8.96611 14H4.98264C4.98264 15.1047 5.87467 16 6.97437 16Z" />
+</svg>
diff --git a/web/src/assets/svgs/menu-icons/settings.svg b/web/src/assets/svgs/menu-icons/settings.svg
new file mode 100644
index 000000000..cfa76e6b3
--- /dev/null
+++ b/web/src/assets/svgs/menu-icons/settings.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.1211 9.92257L13.7469 9.12903C13.8856 8.38064 13.8856 7.6129 13.7469 6.86452L15.1211 6.07097C15.2792 5.98065 15.3501 5.79356 15.2985 5.61936C14.9405 4.47098 14.3308 3.43228 13.534 2.56776C13.4114 2.4355 13.2114 2.40325 13.0566 2.49357L11.6824 3.28711C11.105 2.79034 10.4405 2.40647 9.72113 2.15486V0.570996C9.72113 0.390351 9.59532 0.232287 9.4179 0.193578C8.23404 -0.0709372 7.02114 -0.0580341 5.89534 0.193578C5.71792 0.232287 5.59211 0.390351 5.59211 0.570996V2.15809C4.87598 2.41292 4.21147 2.79679 3.63083 3.29034L2.25987 2.49679C2.1018 2.40647 1.90503 2.4355 1.78245 2.57099C0.985677 3.43228 0.376002 4.47098 0.0179393 5.62259C-0.0368992 5.79678 0.037294 5.98388 0.195358 6.0742L1.56955 6.86775C1.43084 7.61613 1.43084 8.38387 1.56955 9.13225L0.195358 9.9258C0.037294 10.0161 -0.0336734 10.2032 0.0179393 10.3774C0.376002 11.5258 0.985677 12.5645 1.78245 13.429C1.90503 13.5613 2.10503 13.5935 2.25987 13.5032L3.63405 12.7097C4.21147 13.2064 4.87599 13.5903 5.59534 13.8419V15.429C5.59534 15.6096 5.72114 15.7677 5.89856 15.8064C7.08243 16.0709 8.29533 16.058 9.42113 15.8064C9.59855 15.7677 9.72435 15.6096 9.72435 15.429V13.8419C10.4405 13.5871 11.105 13.2032 11.6856 12.7097L13.0598 13.5032C13.2179 13.5935 13.4147 13.5645 13.5372 13.429C14.334 12.5677 14.9437 11.529 15.3017 10.3774C15.3501 10.2 15.2792 10.0129 15.1211 9.92257ZM7.65662 10.5774C6.23404 10.5774 5.07598 9.41935 5.07598 7.99677C5.07598 6.5742 6.23404 5.41614 7.65662 5.41614C9.07919 5.41614 10.2373 6.5742 10.2373 7.99677C10.2373 9.41935 9.07919 10.5774 7.65662 10.5774Z" fill="#9013FE"/>
+</svg>
diff --git a/web/src/components/ConnectButton.tsx b/web/src/components/ConnectButton.tsx
new file mode 100644
index 000000000..cae2ffb7a
--- /dev/null
+++ b/web/src/components/ConnectButton.tsx
@@ -0,0 +1,6 @@
+import React from "react";
+import { Button } from "@kleros/ui-components-library";
+
+const ConnectButton: React.FC = () => <Button small text={"Connect"} />;
+
+export default ConnectButton;
diff --git a/web/src/components/LightButton.tsx b/web/src/components/LightButton.tsx
new file mode 100644
index 000000000..0731dce05
--- /dev/null
+++ b/web/src/components/LightButton.tsx
@@ -0,0 +1,44 @@
+import React from "react";
+import styled from "styled-components";
+import { Button } from "@kleros/ui-components-library";
+
+const StyledButton = styled(Button)`
+  background-color: transparent;
+  padding-left: 0;
+  .button-text {
+    color: ${({ theme }) => theme.primaryText};
+    font-weight: 400;
+  }
+  .button-svg {
+    fill: ${({ theme }) => theme.secondaryPurple};
+  }
+
+  :focus,
+  :hover {
+    background-color: transparent;
+  }
+`;
+
+interface ILightButton {
+  text: string;
+  icon?: (className: string) => React.ReactNode;
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  disabled?: boolean;
+  className?: string;
+}
+
+const LightButton: React.FC<ILightButton> = ({
+  text,
+  icon,
+  onClick,
+  disabled,
+  className,
+}) => (
+  <StyledButton
+    variant="primary"
+    small
+    {...{ text, icon, onClick, disabled, className }}
+  />
+);
+
+export default LightButton;
diff --git a/web/src/components/layout/footer/SecuredByKleros.tsx b/web/src/components/layout/footer/SecuredByKleros.tsx
deleted file mode 100644
index f5d624e37..000000000
--- a/web/src/components/layout/footer/SecuredByKleros.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-import SecuredByKlerosLogo from "svgs/footer/secured-by-kleros.svg";
-
-const StyledLink = styled.a`
-  min-height: 24px;
-`;
-
-const SecuredByKleros: React.FC = () => (
-  <StyledLink href="https://kleros.io" target="_blank" rel="noopener">
-    <SecuredByKlerosLogo />
-  </StyledLink>
-);
-
-export default SecuredByKleros;
diff --git a/web/src/components/layout/footer/SocialMedia.tsx b/web/src/components/layout/footer/SocialMedia.tsx
deleted file mode 100644
index d535a4d50..000000000
--- a/web/src/components/layout/footer/SocialMedia.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-import { socialmedia } from "src/consts/socialmedia";
-
-const Container = styled.div`
-  display: flex;
-  gap: 16px;
-  justify-content: center;
-`;
-
-const StyledLink = styled.a`
-  display: inline-block;
-`;
-
-const SocialMedia = () => (
-  <Container>
-    {Object.values(socialmedia).map((site, i) => (
-      <StyledLink key={i} href={site.url} target="_blank" rel="noopener">
-        {site.icon}
-      </StyledLink>
-    ))}
-  </Container>
-);
-
-export default SocialMedia;
diff --git a/web/src/components/layout/footer/index.tsx b/web/src/components/layout/footer/index.tsx
deleted file mode 100644
index 1e4a99b35..000000000
--- a/web/src/components/layout/footer/index.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-import SecuredByKleros from "./SecuredByKleros";
-import SocialMedia from "./SocialMedia";
-
-const Container = styled.div`
-  height: 80px;
-  width: 100vw;
-  background-color: ${({ theme }) => theme.primaryPurple};
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 16px;
-`;
-
-const Footer: React.FC = () => (
-  <Container>
-    <SecuredByKleros />
-    <SocialMedia />
-  </Container>
-);
-
-export default Footer;
diff --git a/web/src/components/layout/header/KlerosCourt.tsx b/web/src/components/layout/header/KlerosCourt.tsx
deleted file mode 100644
index 829d1fda2..000000000
--- a/web/src/components/layout/header/KlerosCourt.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-import { Link } from "react-router-dom";
-import KlerosCourtLogo from "svgs/header/kleros-court.svg";
-
-const StyledLink = styled(Link)`
-  min-height: 48px;
-`;
-
-const KlerosCourt: React.FC = () => (
-  <StyledLink to={"/"}>
-    <KlerosCourtLogo />
-  </StyledLink>
-);
-
-export default KlerosCourt;
diff --git a/web/src/components/layout/header/index.tsx b/web/src/components/layout/header/index.tsx
deleted file mode 100644
index 66517b95d..000000000
--- a/web/src/components/layout/header/index.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-import KlerosCourt from "./KlerosCourt";
-
-const Container = styled.div`
-  height: 64px;
-  width: 100vw;
-  background-color: ${({ theme }) => theme.primaryPurple};
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 16px;
-`;
-
-const Header: React.FC = () => (
-  <Container>
-    <KlerosCourt />
-  </Container>
-);
-
-export default Header;
diff --git a/web/src/consts/socialmedia.tsx b/web/src/consts/socialmedia.tsx
index 6b5cd07e0..bd6ffebb7 100644
--- a/web/src/consts/socialmedia.tsx
+++ b/web/src/consts/socialmedia.tsx
@@ -16,34 +16,34 @@ export const socialmedia = {
   },
   github: {
     icon: <GithubLogo />,
-    url: "",
+    url: "https://github.com/kleros",
   },
   snapshot: {
     icon: <SnapshotLogo />,
-    url: "",
+    url: "https://snapshot.org/#/kleros.eth",
   },
   discord: {
     icon: <DiscordLogo />,
-    url: "",
+    url: "https://discord.com/invite/MhXQGCyHd9",
   },
   twitter: {
     icon: <TwitterLogo />,
-    url: "",
+    url: "https://twitter.com/kleros_io",
   },
   reddit: {
     icon: <RedditLogo />,
-    url: "",
+    url: "https://www.reddit.com/r/Kleros/",
   },
   telegram: {
     icon: <TelegramLogo />,
-    url: "",
+    url: "https://t.me/kleros",
   },
   ghost: {
     icon: <GhostBlogLogo />,
-    url: "",
+    url: "https://blog.kleros.io/",
   },
   linkedin: {
     icon: <LinkedinLogo />,
-    url: "",
+    url: "https://www.linkedin.com/company/kleros/",
   },
 };
diff --git a/web/src/context/StyledComponentsProvider.tsx b/web/src/context/StyledComponentsProvider.tsx
new file mode 100644
index 000000000..3c6a6697b
--- /dev/null
+++ b/web/src/context/StyledComponentsProvider.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+import { ThemeProvider } from "styled-components";
+import { useLocalStorage } from "hooks/useLocalStorage";
+import { ToggleThemeProvider } from "hooks/useToggleThemeContext";
+import { GlobalStyle } from "styles/global-style";
+import { lightTheme, darkTheme } from "styles/themes";
+
+const StyledComponentsProvider: React.FC = ({ children }) => {
+  const [theme, setTheme] = useLocalStorage<string>("theme", "light");
+  const toggleTheme = () => {
+    if (theme === "light") setTheme("dark");
+    else setTheme("light");
+  };
+  return (
+    <ThemeProvider theme={theme === "light" ? lightTheme : darkTheme}>
+      <ToggleThemeProvider {...{ theme, toggleTheme }}>
+        <GlobalStyle />
+        {children}
+      </ToggleThemeProvider>
+    </ThemeProvider>
+  );
+};
+
+export default StyledComponentsProvider;
diff --git a/web/src/hooks/useFocusOutside.ts b/web/src/hooks/useFocusOutside.ts
new file mode 100644
index 000000000..0723908f5
--- /dev/null
+++ b/web/src/hooks/useFocusOutside.ts
@@ -0,0 +1,21 @@
+import React, { useEffect } from "react";
+
+export function useFocusOutside(
+  ref: React.RefObject<HTMLDivElement>,
+  callback: () => void
+) {
+  useEffect(() => {
+    function handleEvent(event: any) {
+      if (ref.current && !ref.current.contains(event.target)) {
+        callback();
+      }
+    }
+
+    document.addEventListener("focusin", handleEvent);
+    document.addEventListener("mousedown", handleEvent);
+    return () => {
+      document.removeEventListener("focusin", handleEvent);
+      document.removeEventListener("mousedown", handleEvent);
+    };
+  }, [ref, callback]);
+}
diff --git a/web/src/hooks/useLocalStorage.ts b/web/src/hooks/useLocalStorage.ts
new file mode 100644
index 000000000..ae42cadcb
--- /dev/null
+++ b/web/src/hooks/useLocalStorage.ts
@@ -0,0 +1,22 @@
+import { useState } from "react";
+
+export function useLocalStorage<T>(keyName: string, defaultValue: T) {
+  const [storedValue, setStoredValue] = useState(() => {
+    try {
+      const value = window.localStorage.getItem(keyName);
+      return value ? JSON.parse(value) : defaultValue;
+    } catch (err) {
+      return defaultValue;
+    }
+  });
+
+  const setValue = (newValue: T) => {
+    try {
+      window.localStorage.setItem(keyName, JSON.stringify(newValue));
+    } finally {
+      setStoredValue(newValue);
+    }
+  };
+
+  return [storedValue, setValue];
+}
diff --git a/web/src/hooks/useToggleThemeContext.tsx b/web/src/hooks/useToggleThemeContext.tsx
new file mode 100644
index 000000000..5a8f5a717
--- /dev/null
+++ b/web/src/hooks/useToggleThemeContext.tsx
@@ -0,0 +1,18 @@
+import React, { createContext, useContext } from "react";
+
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+const Context = createContext<[string, () => void]>(["light", () => {}]);
+
+export const ToggleThemeProvider: React.FC<{
+  theme: string;
+  toggleTheme: () => void;
+}> = ({ theme, toggleTheme, children }) => {
+  return (
+    <Context.Provider value={[theme, toggleTheme]}>{children}</Context.Provider>
+  );
+};
+
+export const useToggleTheme: () => [string, () => void] = () => {
+  const toggleTheme = useContext(Context);
+  return toggleTheme;
+};
diff --git a/web/src/index.tsx b/web/src/index.tsx
index fdb34fb7e..8df4286f8 100644
--- a/web/src/index.tsx
+++ b/web/src/index.tsx
@@ -1,8 +1,5 @@
 import React from "react";
 import { createRoot } from "react-dom/client";
-import { ThemeProvider } from "styled-components";
-import { GlobalStyle } from "./styles/global-style";
-import { lightTheme } from "./styles/themes";
 import App from "./app";
 import { HashRouter as Router } from "react-router-dom";
 
@@ -11,10 +8,7 @@ const root = createRoot(container!);
 root.render(
   <React.StrictMode>
     <Router>
-      <ThemeProvider theme={lightTheme}>
-        <GlobalStyle />
-        <App />
-      </ThemeProvider>
+      <App />
     </Router>
   </React.StrictMode>
 );
diff --git a/web/src/layout/footer/index.tsx b/web/src/layout/footer/index.tsx
new file mode 100644
index 000000000..1ace8e04a
--- /dev/null
+++ b/web/src/layout/footer/index.tsx
@@ -0,0 +1,59 @@
+import React from "react";
+import styled from "styled-components";
+import SecuredByKlerosLogo from "svgs/footer/secured-by-kleros.svg";
+import { socialmedia } from "consts/socialmedia";
+
+const Container = styled.div`
+  height: 80px;
+  width: 100vw;
+  background-color: ${({ theme }) => theme.primaryPurple};
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+
+  .secured-by-kleros {
+    min-height: 24px;
+  }
+
+  .socialmedia {
+    display: flex;
+    gap: 16px;
+    justify-content: center;
+
+    a {
+      display: inline-block;
+    }
+  }
+`;
+
+const SecuredByKleros: React.FC = () => (
+  <a
+    className="secured-by-kleros"
+    href="https://kleros.io"
+    target="_blank"
+    rel="noreferrer"
+  >
+    <SecuredByKlerosLogo />
+  </a>
+);
+
+const SocialMedia = () => (
+  <div className="socialmedia">
+    {Object.values(socialmedia).map((site, i) => (
+      <a key={i} href={site.url} target="_blank" rel="noreferrer">
+        {site.icon}
+      </a>
+    ))}
+  </div>
+);
+
+const Footer: React.FC = () => (
+  <Container>
+    <SecuredByKleros />
+    <SocialMedia />
+  </Container>
+);
+
+export default Footer;
diff --git a/web/src/layout/header/index.tsx b/web/src/layout/header/index.tsx
new file mode 100644
index 000000000..2aa392d3f
--- /dev/null
+++ b/web/src/layout/header/index.tsx
@@ -0,0 +1,53 @@
+import React, { useState, useRef } from "react";
+import styled from "styled-components";
+import { Link } from "react-router-dom";
+import HamburgerIcon from "svgs/header/hamburger.svg";
+import KlerosCourtLogo from "svgs/header/kleros-court.svg";
+import { useFocusOutside } from "hooks/useFocusOutside";
+import LightButton from "components/LightButton";
+import NavBar from "./navbar";
+
+const Container = styled.div`
+  position: sticky;
+  top: 0;
+  width: 100vw;
+  height: 64px;
+  background-color: ${({ theme }) => theme.primaryPurple};
+
+  padding: 0 24px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  .kleros-court-link {
+    min-height: 48px;
+  }
+`;
+
+const StyledLightButton = styled(LightButton)`
+  padding-right: 0;
+`;
+
+const Header: React.FC = () => {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const toggleIsOpen = () => setIsOpen(!isOpen);
+  const containerRef = useRef(null);
+  useFocusOutside(containerRef, () => setIsOpen(false));
+  return (
+    <Container>
+      <Link className="kleros-court-link" to={"/"}>
+        <KlerosCourtLogo />
+      </Link>
+      <div ref={containerRef}>
+        <NavBar {...{ isOpen }} />
+        <StyledLightButton
+          text=""
+          icon={(className: string) => <HamburgerIcon {...{ className }} />}
+          onClick={toggleIsOpen}
+        />
+      </div>
+    </Container>
+  );
+};
+
+export default Header;
diff --git a/web/src/components/layout/header/NavBar.tsx b/web/src/layout/header/navbar/Explore.tsx
similarity index 60%
rename from web/src/components/layout/header/NavBar.tsx
rename to web/src/layout/header/navbar/Explore.tsx
index bba1a31d0..89f6a985a 100644
--- a/web/src/components/layout/header/NavBar.tsx
+++ b/web/src/layout/header/navbar/Explore.tsx
@@ -2,21 +2,17 @@ import React from "react";
 import styled from "styled-components";
 import { Link } from "react-router-dom";
 
-const Container = styled.nav`
-  position: absolute;
-  width: 100%;
-  background-color: ${({ theme }) => theme.primaryPurple};
-`;
-
-const StyledLink = styled(Link)`
-  color: white;
-`;
+const Container = styled.div``;
 
 const LinkContainer = styled.div`
   min-height: 32px;
   display: flex;
   align-items: center;
-  justify-content: center;
+
+  .sm-link {
+    color: ${({ theme }) => theme.primaryText};
+    text-decoration: none;
+  }
 `;
 
 const links = [
@@ -25,14 +21,17 @@ const links = [
   { to: "/dashboard", text: "Dashboard" },
 ];
 
-const NavBar: React.FC = () => (
+const Explore: React.FC = () => (
   <Container>
+    <h1>Explore</h1>
     {links.map(({ to, text }) => (
       <LinkContainer key={text}>
-        <StyledLink {...{ to }}>{text}</StyledLink>
+        <Link {...{ to }} className="sm-link">
+          {text}
+        </Link>
       </LinkContainer>
     ))}
   </Container>
 );
 
-export default NavBar;
+export default Explore;
diff --git a/web/src/layout/header/navbar/Menu.tsx b/web/src/layout/header/navbar/Menu.tsx
new file mode 100644
index 000000000..445cc2367
--- /dev/null
+++ b/web/src/layout/header/navbar/Menu.tsx
@@ -0,0 +1,48 @@
+import React from "react";
+import styled from "styled-components";
+import { useToggleTheme } from "hooks/useToggleThemeContext";
+import LightButton from "components/LightButton";
+import NotificationsIcon from "svgs/menu-icons/notifications.svg";
+import DarkModeIcon from "svgs/menu-icons/dark-mode.svg";
+import LightModeIcon from "svgs/menu-icons/light-mode.svg";
+import HelpIcon from "svgs/menu-icons/help.svg";
+import SettingsIcon from "svgs/menu-icons/settings.svg";
+
+const Container = styled.div``;
+
+const ButtonContainer = styled.div`
+  min-height: 32px;
+
+  display: flex;
+  align-items: center;
+`;
+
+const Explore: React.FC = () => {
+  const [theme, toggleTheme] = useToggleTheme();
+  const isLightTheme = theme === "light";
+  const buttons = [
+    { text: "Notifications", icon: NotificationsIcon },
+    { text: "Settings", icon: SettingsIcon },
+    { text: "Help", icon: HelpIcon },
+    {
+      text: `${isLightTheme ? "Dark" : "Light"} Mode`,
+      icon: isLightTheme ? DarkModeIcon : LightModeIcon,
+      onClick: () => toggleTheme(),
+    },
+  ];
+
+  return (
+    <Container>
+      {buttons.map(({ text, icon: Icon, onClick }) => (
+        <ButtonContainer key={text}>
+          <LightButton
+            {...{ text, onClick }}
+            icon={(className: string) => <Icon {...{ className }} />}
+          />
+        </ButtonContainer>
+      ))}
+    </Container>
+  );
+};
+
+export default Explore;
diff --git a/web/src/layout/header/navbar/index.tsx b/web/src/layout/header/navbar/index.tsx
new file mode 100644
index 000000000..26a05d131
--- /dev/null
+++ b/web/src/layout/header/navbar/index.tsx
@@ -0,0 +1,48 @@
+import React from "react";
+import styled from "styled-components";
+import KlerosSolutionsIcon from "svgs/menu-icons/kleros-solutions.svg";
+import LightButton from "components/LightButton";
+import Explore from "./Explore";
+import ConnectButton from "components/ConnectButton";
+import Menu from "./Menu";
+
+const Container = styled.div<{ isOpen: boolean }>`
+  position: absolute;
+  top: 64px;
+  left: 0;
+  right: 0;
+  z-index: 1;
+  background-color: ${({ theme }) => theme.whiteBackground};
+  border: 1px solid ${({ theme }) => theme.stroke};
+  box-shadow: 0px 2px 3px ${({ theme }) => theme.defaultShadow};
+
+  transform-origin: top;
+  transform: scaleY(${({ isOpen }) => (isOpen ? "1" : "0")});
+  visibility: ${({ isOpen }) => (isOpen ? "visible" : "hidden")};
+  transition-property: transform, visibility;
+  transition-duration: ${({ theme }) => theme.transitionSpeed};
+  transition-timing-function: ease;
+
+  padding: 24px;
+
+  hr {
+    margin 24px 0;
+  }
+`;
+
+const NavBar: React.FC<{ isOpen: boolean }> = ({ isOpen }) => (
+  <Container {...{ isOpen }}>
+    <LightButton
+      text="Kleros Solutions"
+      icon={(className) => <KlerosSolutionsIcon {...{ className }} />}
+    />
+    <hr />
+    <Explore />
+    <hr />
+    <ConnectButton />
+    <hr />
+    <Menu />
+  </Container>
+);
+
+export default NavBar;
diff --git a/web/src/components/layout/index.tsx b/web/src/layout/index.tsx
similarity index 90%
rename from web/src/components/layout/index.tsx
rename to web/src/layout/index.tsx
index b190b4943..945abc979 100644
--- a/web/src/components/layout/index.tsx
+++ b/web/src/layout/index.tsx
@@ -1,12 +1,12 @@
 import React from "react";
 import styled from "styled-components";
+import { Outlet } from "react-router-dom";
 import Header from "./header";
 import Footer from "./footer";
-import { Outlet } from "react-router-dom";
 
 const Container = styled.div`
-  height: 100vh;
-  width: 100vw;
+  min-height: 100%;
+  width: 100%;
 `;
 
 const Layout: React.FC = () => (
diff --git a/web/src/styles/global-style.ts b/web/src/styles/global-style.ts
index 501475513..59883c12a 100644
--- a/web/src/styles/global-style.ts
+++ b/web/src/styles/global-style.ts
@@ -18,8 +18,51 @@ export const GlobalStyle = createGlobalStyle`
     outline: none;
   }
 
+  h1 {
+    font-weight: 600;
+    font-size: 24px;
+    line-height: 32px;
+    color: ${({ theme }) => theme.primaryText};
+  }
+
+  h2 {
+    font-weight: 400;
+    font-size: 24px;
+    line-height: 32px;
+    color: ${({ theme }) => theme.primaryText};
+  }
+
+  h3 {
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 24px;
+    color: ${({ theme }) => theme.primaryText};
+  }
+
+  p {
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+    color: ${({ theme }) => theme.primaryText};
+  }
+
+  s {
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 18px;
+    color: ${({ theme }) => theme.primaryText};
+  }
+
+  label {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 18px;
+    color: ${({ theme }) => theme.primaryText};
+  }
+
   hr {
     opacity: 1;
+    border: 1px solid ${({ theme }) => theme.stroke};
   }
 
   svg, img {
diff --git a/web/tsconfig.json b/web/tsconfig.json
index aca7b58e7..183d82f58 100644
--- a/web/tsconfig.json
+++ b/web/tsconfig.json
@@ -14,16 +14,22 @@
       "components*": [
         "./src/components*"
       ],
+      "context*": [
+        "./src/context*"
+      ],
+      "layout*": [
+        "./src/layout*"
+      ],
       "consts*": [
         "./src/consts*"
       ],
       "hooks*": [
         "./src/hooks*"
       ],
-      "pages": [
+      "pages*": [
         "./src/pages*"
       ],
-      "styles": [
+      "styles*": [
         "./src/styles*"
       ],
       "svgs*": [
diff --git a/yarn.lock b/yarn.lock
index 82710ff78..46625e631 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1702,13 +1702,14 @@ __metadata:
   resolution: "@kleros/kleros-v2-web@workspace:web"
   dependencies:
     "@kleros/kleros-v2-contracts": "workspace:^"
-    "@kleros/ui-components-library": ^0.1.3
+    "@kleros/ui-components-library": ^0.1.5
     "@parcel/transformer-svg-react": ^2.2.1
     "@types/react": ^17.0.38
     "@types/react-dom": ^17.0.11
     "@types/styled-components": ^5.1.21
     "@typescript-eslint/eslint-plugin": ^5.10.1
     "@typescript-eslint/parser": ^5.10.1
+    core-js: ^3.21.1
     eslint: ^8.7.0
     eslint-config-prettier: ^8.3.0
     eslint-import-resolver-parcel: ^1.10.6
@@ -1729,7 +1730,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@kleros/ui-components-library@npm:^0.1.3":
+"@kleros/ui-components-library@npm:^0.1.3, @kleros/ui-components-library@npm:^0.1.5":
   version: 0.1.5
   resolution: "@kleros/ui-components-library@npm:0.1.5"
   dependencies:
@@ -6707,7 +6708,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"core-js@npm:^3.0.1":
+"core-js@npm:^3.0.1, core-js@npm:^3.21.1":
   version: 3.21.1
   resolution: "core-js@npm:3.21.1"
   checksum: d68eddd831340ad5b24ac29c72fda022a43b17f194c4278b6b875a843283d316502cb4abd07f28631d6ebc4387f66aa06e2b1b3c8fd7e08096a751b5c63f6889