diff --git a/src/components/Header/styles.module.css b/src/components/Header/styles.module.css
index 53ce330d..1c8e7d14 100644
--- a/src/components/Header/styles.module.css
+++ b/src/components/Header/styles.module.css
@@ -4,6 +4,10 @@
align-items: center;
border-radius: 0 !important;
border-bottom: 1px solid var(--mui-palette-border-light);
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
}
.wallet {
diff --git a/src/components/InfoAlert/index.tsx b/src/components/InfoAlert/index.tsx
index 18434892..1baf2f66 100644
--- a/src/components/InfoAlert/index.tsx
+++ b/src/components/InfoAlert/index.tsx
@@ -5,7 +5,7 @@ import type { ReactElement } from 'react'
export const InfoAlert = ({ children, ...props }: BoxProps): ReactElement => {
return (
-
+
{
+ return {props.children}
+}
+
+export default MediumPaper
diff --git a/src/components/MediumPaper/styles.module.css b/src/components/MediumPaper/styles.module.css
new file mode 100644
index 00000000..95c1246a
--- /dev/null
+++ b/src/components/MediumPaper/styles.module.css
@@ -0,0 +1,12 @@
+.mediumPaper {
+ width: 650px;
+ position: relative;
+ margin: auto;
+}
+
+@media (max-width: 600px) {
+ .mediumPaper {
+ height: 100%;
+ width: 100%;
+ }
+}
diff --git a/src/components/NavTabs/index.tsx b/src/components/NavTabs/index.tsx
new file mode 100644
index 00000000..ae6b9be8
--- /dev/null
+++ b/src/components/NavTabs/index.tsx
@@ -0,0 +1,72 @@
+import React, { forwardRef, ReactElement } from 'react'
+import NextLink, { type LinkProps as NextLinkProps } from 'next/link'
+import { Tab, Tabs, Typography, type TabProps } from '@mui/material'
+import { useRouter } from 'next/router'
+import css from './styles.module.css'
+import { useIsSafeApp } from '@/hooks/useIsSafeApp'
+import Track from '../Track'
+
+export type NavItem = {
+ label: string
+ icon?: ReactElement
+ href: string
+ event: { action: string }
+}
+
+type Props = TabProps & NextLinkProps
+
+// This is needed in order for the tabs to work properly with Next Link e.g. tabbing with the keyboard
+// Based on https://github.com/mui/material-ui/blob/master/examples/nextjs-with-typescript/src/Link.tsx
+const NextLinkComposed = forwardRef(function NextComposedLink(props: Props, ref) {
+ const { href, as, replace, scroll, shallow, prefetch, legacyBehavior = true, locale, ...other } = props
+
+ return (
+
+ {/* @ts-ignore */}
+
+
+ )
+})
+
+const NavTabs = ({ tabs }: { tabs: NavItem[] }) => {
+ const router = useRouter()
+ const activeTab = Math.max(0, tabs.map((tab) => tab.href).indexOf(router.pathname))
+
+ const isSafeApp = useIsSafeApp()
+
+ return (
+
+ {tabs.map((tab, idx) => (
+
+ ))}
+
+ )
+}
+
+export default NavTabs
diff --git a/src/components/NavTabs/styles.module.css b/src/components/NavTabs/styles.module.css
new file mode 100644
index 00000000..604ec8c3
--- /dev/null
+++ b/src/components/NavTabs/styles.module.css
@@ -0,0 +1,49 @@
+.tabs {
+ overflow: initial;
+ align-self: flex-start;
+ width: 100%;
+}
+
+/* Scroll buttons */
+.tabs :global .MuiTabs-scrollButtons.Mui-disabled {
+ opacity: 0.3;
+}
+
+.tabs :global .MuiTabScrollButton-root ~ .MuiTabs-scroller p {
+ padding-bottom: 0;
+}
+
+.tabs :global .MuiTabScrollButton-root:first-of-type {
+ margin-left: calc(16 * -1);
+}
+
+.tabs :global .MuiTabScrollButton-root:last-of-type {
+ margin-right: calc(16 * -1);
+}
+
+.tabs :global .MuiTabScrollButton-root ~ .MuiTabs-scroller p {
+ padding-bottom: 0;
+}
+
+.tab {
+ opacity: 1;
+ padding: 0 24;
+ position: relative;
+ z-index: 2;
+}
+
+.label {
+ text-transform: none;
+ padding-bottom: 6px;
+}
+
+@media (max-width: 599px) {
+ .tabs span {
+ flex: 1;
+ min-width: fit-content;
+ }
+
+ .tab {
+ width: 100%;
+ }
+}
diff --git a/src/components/OverviewLinks/index.tsx b/src/components/OverviewLinks/index.tsx
index e3a883a6..288e67c4 100644
--- a/src/components/OverviewLinks/index.tsx
+++ b/src/components/OverviewLinks/index.tsx
@@ -1,10 +1,8 @@
-import NextLink from 'next/link'
-import { SvgIcon, Grid, Typography, Paper, Box, Link } from '@mui/material'
+import { SvgIcon, Typography, Paper, Box, Stack } from '@mui/material'
import { useRef } from 'react'
import type { ReactElement, SyntheticEvent } from 'react'
import Hat from '@/public/images/hat.svg'
-import { AppRoutes } from '@/config/routes'
import { FORUM_URL, CHAIN_SNAPSHOT_URL } from '@/config/constants'
import { ExternalLink } from '@/components/ExternalLink'
import { useChainId } from '@/hooks/useChainId'
@@ -27,14 +25,12 @@ const SafeDaoCard = () => {