diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index c0e257d..7d58142 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Admin, Resource, memoryStore } from 'react-admin';
 import { ThemeProvider, StyledEngineProvider } from '@mui/material/styles';
+import CssBaseline from '@mui/material/CssBaseline';
 import { LoginPage } from '@semapps/auth-provider';
 import { BrowserRouter } from 'react-router-dom';
 import { QueryClient } from 'react-query';
@@ -14,7 +15,7 @@ import theme from './config/theme';
 import resources from './resources';
 
 import { Layout } from './common/layout';
-import { LayoutProvider } from './layouts/LayoutContext';
+import { LayoutProvider } from './layouts/LayoutProvider';
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -28,10 +29,11 @@ const App = () => (
   <StyledEngineProvider injectFirst>
     <BrowserRouter>
       <ThemeProvider theme={theme}>
+        <CssBaseline />
         <LayoutProvider layoutOptions={config.layout}>
           <Admin
             disableTelemetry
-            title="Archipel"
+            title={config.title}
             authProvider={authProvider}
             dataProvider={dataProvider}
             i18nProvider={i18nProvider}
diff --git a/frontend/src/common/layout/Layout.tsx b/frontend/src/common/layout/Layout.tsx
index f0b6a2e..2b4e179 100644
--- a/frontend/src/common/layout/Layout.tsx
+++ b/frontend/src/common/layout/Layout.tsx
@@ -1,10 +1,31 @@
-import React from 'react';
+import React, { Suspense } from 'react';
 import { LayoutProps } from 'react-admin';
+import { Box, CircularProgress } from '@mui/material';
+import { styled } from '@mui/material/styles';
 import { useLayoutContext } from '../../layouts/LayoutContext';
 
+const FullPageBox = styled(Box)(() => ({
+  width: '100vw',
+  height: '100vh',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+}));
+
 const BaseLayout = (props: LayoutProps) => {
   const { Layout } = useLayoutContext();
-  return <Layout  {...props} />;
+
+  return (
+    <Suspense
+      fallback={
+        <FullPageBox>
+          <CircularProgress />
+        </FullPageBox>
+      }
+    >
+      <Layout {...props} />
+    </Suspense>
+  );
 };
 
 export default BaseLayout;
diff --git a/frontend/src/common/list/MobileMapPopupContent.jsx b/frontend/src/common/list/MobileMapPopupContent.jsx
new file mode 100644
index 0000000..d3977f9
--- /dev/null
+++ b/frontend/src/common/list/MobileMapPopupContent.jsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { ShowButton, EditButton, useResourceDefinition, useRecordContext } from 'react-admin';
+import { Box, Typography } from '@mui/material';
+import { useLayoutContext } from '../../layouts/LayoutContext';
+
+const MobileMapPopupContent = () => {
+  const record = useRecordContext();
+  const resourceDefinition = useResourceDefinition({});
+  const layout = useLayoutContext();
+
+  if (!record) return null;
+
+  return (
+    <Box sx={{ paddingBottom: layout.name === 'topMenu' ? '56px' : 0 }}>
+      {record.label && <Typography variant="h5">{record.label}</Typography>}
+      {record.description && (
+        <Typography>
+          {record.description.length > 150 ? `${record.description.substring(0, 150)}...` : record.description}
+        </Typography>
+      )}
+      {resourceDefinition.hasShow && <ShowButton />}
+      {resourceDefinition.hasEdit && <EditButton />}
+    </Box>
+  );
+};
+
+export default MobileMapPopupContent;
diff --git a/frontend/src/config/config.ts b/frontend/src/config/config.ts
index 7c3adc5..aee2f6a 100644
--- a/frontend/src/config/config.ts
+++ b/frontend/src/config/config.ts
@@ -1,4 +1,14 @@
-const config = {
+import { LayoutOptions } from "../layouts/LayoutContext";
+
+interface ConfigInterface {
+  middlewareUrl: string;
+  mapboxAccessToken: string;
+  importableResources: string[];
+  title: string;
+  layout: LayoutOptions;
+}
+
+const config: ConfigInterface = {
   // Middleware API url (ex: https://<host>:<port>/). Should contain a trailing slash.
   middlewareUrl: import.meta.env.VITE_MIDDLEWARE_URL,
 
@@ -17,6 +27,9 @@ const config = {
     "Skill",
   ],
 
+  // Application title
+  title: 'Archipelago',
+
   // UI layout configuration
   layout: {
     name: 'leftMenu',
diff --git a/frontend/src/index.css b/frontend/src/index.css
deleted file mode 100644
index f4850cc..0000000
--- a/frontend/src/index.css
+++ /dev/null
@@ -1,18 +0,0 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  background-color: #fafafa;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
-
-body, .layout, .mde-text {
-  background-color: #efefef;
-}
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
index 3ce59e3..d701334 100644
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
-import './index.css';
 import App from './App';
 
 const root = createRoot(
diff --git a/frontend/src/layouts/LayoutContext.tsx b/frontend/src/layouts/LayoutContext.tsx
index 4b7b214..fb7543c 100644
--- a/frontend/src/layouts/LayoutContext.tsx
+++ b/frontend/src/layouts/LayoutContext.tsx
@@ -1,6 +1,7 @@
-import React, { createContext, FunctionComponent, PropsWithChildren, ReactNode, useContext } from 'react';
+import { createContext, FunctionComponent, PropsWithChildren, ReactNode, useContext } from 'react';
 import { LayoutProps } from 'react-admin';
-import leftMenu, { LayoutOptions as LeftMenuOptions } from './leftMenu';
+import { LayoutOptions as LeftMenuOptions } from './leftMenu';
+import { LayoutOptions as TopMenuOptions } from './topMenu';
 
 type BaseViewProps = PropsWithChildren<{
   title: string | ReactNode;
@@ -15,30 +16,13 @@ export type LayoutComponents = {
 };
 
 export type LeftMenuLayoutType = LayoutComponents & LeftMenuOptions;
+export type TopMenuLayoutType = LayoutComponents & TopMenuOptions;
 
-type LayoutOptions = LeftMenuOptions;
-type LayoutContextType = LeftMenuLayoutType;
+export type LayoutOptions = LeftMenuOptions | TopMenuOptions;
+type LayoutContextType = LeftMenuLayoutType | TopMenuLayoutType;
 
 export const LayoutContext = createContext<LayoutContextType | undefined>(undefined);
 
-const layoutsComponents = {
-  leftMenu,
-};
-
-type LayoutProviderProps = PropsWithChildren<{
-  layoutOptions: LayoutOptions;
-}>;
-
-export const LayoutProvider = ({ children, layoutOptions }: LayoutProviderProps) => {
-  const layoutComponents = layoutsComponents[layoutOptions.name];
-
-  if (!layoutComponents) {
-    return null;
-  }
-
-  return <LayoutContext.Provider value={{ ...layoutOptions, ...layoutComponents }}>{children}</LayoutContext.Provider>;
-};
-
 export const useLayoutContext = <T extends LayoutOptions = LayoutOptions>() => {
   const layout = useContext(LayoutContext);
   return layout as T & LayoutComponents;
diff --git a/frontend/src/layouts/LayoutProvider.tsx b/frontend/src/layouts/LayoutProvider.tsx
new file mode 100644
index 0000000..b9ed3dd
--- /dev/null
+++ b/frontend/src/layouts/LayoutProvider.tsx
@@ -0,0 +1,24 @@
+import React, { PropsWithChildren } from 'react';
+import { LayoutContext, LayoutOptions } from './LayoutContext';
+
+import leftMenu from './leftMenu';
+import topMenu from './topMenu';
+
+const layoutsComponents = {
+  leftMenu,
+  topMenu,
+};
+
+type LayoutProviderProps = PropsWithChildren<{
+  layoutOptions: LayoutOptions;
+}>;
+
+export const LayoutProvider = ({ children, layoutOptions }: LayoutProviderProps) => {
+  const layoutComponents = layoutsComponents[layoutOptions.name];
+
+  if (!layoutComponents) {
+    return null;
+  }
+
+  return <LayoutContext.Provider value={{ ...layoutOptions, ...layoutComponents }}>{children}</LayoutContext.Provider>;
+};
diff --git a/frontend/src/layouts/topMenu/AppBar.tsx b/frontend/src/layouts/topMenu/AppBar.tsx
new file mode 100644
index 0000000..b094f6a
--- /dev/null
+++ b/frontend/src/layouts/topMenu/AppBar.tsx
@@ -0,0 +1,80 @@
+import React from 'react';
+import { AppBar as MuiAppBar, Box, Button, Stack, Toolbar, Typography, Link } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { Link as RRLink } from 'react-router-dom';
+import config from '../../config/config';
+import UserMenu from './UserMenu';
+import ResourcesMenu from './ResourcesMenu';
+import { useLayoutContext } from '../LayoutContext';
+import { LayoutOptions } from '.';
+
+const AppTitle = styled(Typography)(({ theme }) => ({
+  textWrap: 'balance',
+  lineHeight: '1.1',
+  [theme.breakpoints.down('lg')]: {
+    fontSize: '1rem',
+    textAlign: 'center',
+  },
+})) as typeof Typography;
+
+const AppBar = () => {
+  const layout = useLayoutContext<LayoutOptions>();
+  const logo = layout.options.logo;
+
+  return (
+    <MuiAppBar position="fixed" sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }}>
+      <Toolbar>
+        {logo && (
+          <Box sx={{ marginRight: { xs: 0, lg: 1 } }}>
+            <Link component={RRLink} to="/" color="inherit" underline="none">
+              <Box
+                height={'48px'}
+                component={'img'}
+                src={typeof logo === 'string' ? logo : logo.url}
+                alt={typeof logo === 'string' ? 'Logo' : logo.alt}
+                sx={{ paddingTop: '5px', boxSizing: 'content-box' }}
+              />
+            </Link>
+          </Box>
+        )}
+
+        {!(layout.options.title === false) && (
+          <>
+            {(typeof layout.options.title === 'function' && layout.options.title?.()) || (
+              <AppTitle component="h1" variant="h6">
+                <Link component={RRLink} to="/" color="inherit" underline="none">
+                  {config.title}
+                </Link>
+              </AppTitle>
+            )}
+          </>
+        )}
+
+        <Box sx={{ flexGrow: 1 }} />
+
+        <Stack sx={{ display: { xs: 'none', md: 'block' } }} spacing={2} direction="row">
+          {(layout.options.mainMenu || []).map((item) => (
+            <Button
+              key={item.label}
+              color="inherit"
+              size="large"
+              startIcon={item.icon ? <item.icon /> : undefined}
+              component={RRLink}
+              to={item.link}
+            >
+              {item.label}
+            </Button>
+          ))}
+        </Stack>
+
+        <Box sx={{ flexGrow: 1 }} />
+
+        <ResourcesMenu />
+
+        <UserMenu />
+      </Toolbar>
+    </MuiAppBar>
+  );
+};
+
+export default AppBar;
diff --git a/frontend/src/layouts/topMenu/Aside.tsx b/frontend/src/layouts/topMenu/Aside.tsx
new file mode 100644
index 0000000..2ae76da
--- /dev/null
+++ b/frontend/src/layouts/topMenu/Aside.tsx
@@ -0,0 +1,65 @@
+import React, { PropsWithChildren, useState } from 'react';
+import { Box, Drawer, Fab, Toolbar, useMediaQuery } from '@mui/material';
+import { styled, useTheme } from '@mui/material/styles';
+import TuneIcon from '@mui/icons-material/Tune';
+import { useLayoutContext } from '../LayoutContext';
+import { LayoutOptions } from '.';
+
+const asideWidth = '300px';
+
+const ContentBox = styled(Box)(({ theme }) => ({
+  minWidth: asideWidth,
+  padding: 16,
+  boxSizing: 'border-box',
+  [theme.breakpoints.down('md')]: {
+    paddingBottom: 56 + 16,
+  },
+}));
+
+const Aside = ({ children }: PropsWithChildren) => {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+  const [isAsideOpen, setAsideOpen] = useState(false);
+
+  const layout = useLayoutContext<LayoutOptions>();
+  const side = layout.options.sideBarPlacement;
+
+  return (
+    <>
+      {isMobile && (
+        <Fab
+          variant="extended"
+          color="primary"
+          sx={{
+            position: 'fixed',
+            bottom: 64,
+            left: 10,
+          }}
+          onClick={() => setAsideOpen(true)}
+        >
+          <TuneIcon sx={{ mr: 1 }} />
+          Filtres
+        </Fab>
+      )}
+      <Drawer
+        sx={{
+          width: asideWidth,
+          flexShrink: 0,
+          '& .MuiDrawer-paper': {
+            width: asideWidth,
+            boxSizing: 'border-box',
+          },
+        }}
+        variant={isMobile ? 'temporary' : 'permanent'}
+        open={isAsideOpen}
+        anchor={side}
+        onClose={() => setAsideOpen(false)}
+      >
+        <Toolbar />
+        <ContentBox>{children}</ContentBox>
+      </Drawer>
+    </>
+  );
+};
+
+export default Aside;
diff --git a/frontend/src/layouts/topMenu/BaseView.tsx b/frontend/src/layouts/topMenu/BaseView.tsx
new file mode 100644
index 0000000..f588abd
--- /dev/null
+++ b/frontend/src/layouts/topMenu/BaseView.tsx
@@ -0,0 +1,65 @@
+import React, { PropsWithChildren, ReactNode } from 'react';
+import { Grid, Typography, Box, useMediaQuery } from '@mui/material';
+import { styled, useTheme } from '@mui/material/styles';
+import { LayoutOptions } from './index';
+import { useLayoutContext } from '../LayoutContext';
+
+const Title = styled(Typography)(({ theme }) => ({
+  [theme.breakpoints.down('sm')]: {
+    fontSize: '1.8rem',
+  },
+})) as typeof Typography;
+
+const ActionsGrid = styled(Grid)(({ theme }) => ({
+  [theme.breakpoints.down('sm')]: {
+    '& .MuiToolbar-root': {
+      backgroundColor: theme.palette.background.default,
+      minHeight: 0,
+      paddingTop: 0,
+      alignItems: 'center',
+      height: '100%',
+    },
+    '& .MuiButtonBase-root': {
+      padding: 0,
+    },
+  },
+}));
+
+type Props = {
+  title: string | ReactNode;
+  actions: JSX.Element;
+  aside?: JSX.Element;
+};
+
+const BaseView = ({ title, actions, aside, children }: PropsWithChildren<Props>) => {
+  const layout = useLayoutContext<LayoutOptions>();
+
+  const side = layout.options.sideBarPlacement || 'left';
+  const asideWidth = '300px';
+
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+
+  return (
+    <>
+      <Box sx={{ [side === 'left' ? 'marginLeft' : 'marginRight']: aside && !isMobile ? asideWidth : 0 }}>
+        <Grid container sx={{ paddingTop: 2 }}>
+          <Grid item xs={9} sm={8}>
+            <Title variant="h4" color="primary" component="h1">
+              {title}
+            </Title>
+          </Grid>
+          <ActionsGrid item xs={3} sm={4}>
+            {actions}
+          </ActionsGrid>
+          <Grid item xs={12} sx={{ display: 'flex', marginTop: 1 }}>
+            <Box sx={{ flex: 1 }}>{children}</Box>
+          </Grid>
+        </Grid>
+      </Box>
+      {aside}
+    </>
+  );
+};
+
+export default BaseView;
diff --git a/frontend/src/layouts/topMenu/BottomNavigation.tsx b/frontend/src/layouts/topMenu/BottomNavigation.tsx
new file mode 100644
index 0000000..4c89c4a
--- /dev/null
+++ b/frontend/src/layouts/topMenu/BottomNavigation.tsx
@@ -0,0 +1,56 @@
+import React, { useEffect, useState } from 'react';
+import HomeIcon from '@mui/icons-material/Home';
+import { BottomNavigation as MuiBottomNavigation, BottomNavigationAction, Paper } from '@mui/material';
+import { Link as RRLink } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
+import { useLayoutContext } from '../LayoutContext';
+import { LayoutOptions } from '.';
+
+const BottomNavigation = () => {
+  const layout = useLayoutContext<LayoutOptions>();
+  const location = useLocation();
+
+  const [value, setValue] = useState<number>();
+
+  useEffect(() => {
+    if (location.pathname === '/') {
+      setValue(0);
+      return;
+    }
+
+    const match = (layout.options.mainMenu || []).findIndex(
+      (item) => item.resource && location.pathname.startsWith(`/${item.resource}`),
+    );
+
+    setValue(match > -1 ? match + 1 : undefined);
+  }, [location, layout]);
+
+  return (
+    <Paper
+      sx={{
+        position: 'fixed',
+        bottom: 0,
+        left: 0,
+        right: 0,
+        display: { xs: 'block', md: 'none' },
+        zIndex: (theme) => theme.zIndex.drawer + 1,
+      }}
+      elevation={5}
+    >
+      <MuiBottomNavigation showLabels value={value}>
+        <BottomNavigationAction label="Accueil" icon={<HomeIcon />} component={RRLink} to="/" />
+        {(layout.options.mainMenu || []).map((item) => (
+          <BottomNavigationAction
+            key={item.label}
+            label={item.mobileLabel || item.label}
+            icon={item.icon ? <item.icon /> : undefined}
+            component={RRLink}
+            to={item.link}
+          />
+        ))}
+      </MuiBottomNavigation>
+    </Paper>
+  );
+};
+
+export default BottomNavigation;
diff --git a/frontend/src/layouts/topMenu/Layout.tsx b/frontend/src/layouts/topMenu/Layout.tsx
new file mode 100644
index 0000000..bb20301
--- /dev/null
+++ b/frontend/src/layouts/topMenu/Layout.tsx
@@ -0,0 +1,20 @@
+import React, { PropsWithChildren } from 'react';
+import AppBar from './AppBar';
+import { Box } from '@mui/material';
+import BottomNavigation from './BottomNavigation';
+
+const Layout = ({ children }: PropsWithChildren) => {
+  return (
+    <Box>
+      <AppBar />
+
+      <Box component={"main"} sx={{ paddingX: { xs: 1, md: 2 }, marginTop: '64px', marginBottom: { xs: 8, md: 0 } }}>
+        {children}
+      </Box>
+
+      <BottomNavigation />
+    </Box>
+  );
+};
+
+export default Layout;
diff --git a/frontend/src/layouts/topMenu/ResourcesMenu.tsx b/frontend/src/layouts/topMenu/ResourcesMenu.tsx
new file mode 100644
index 0000000..e155f5f
--- /dev/null
+++ b/frontend/src/layouts/topMenu/ResourcesMenu.tsx
@@ -0,0 +1,60 @@
+import React, { useMemo } from 'react';
+import { IconButton, Menu } from '@mui/material';
+import MenuIcon from '@mui/icons-material/Menu';
+import { MenuItemLink, useGetIdentity, useResourceDefinitions } from 'react-admin';
+import { useLayoutContext } from '../LayoutContext';
+import { LayoutOptions } from '.';
+
+const ResourcesMenu = () => {
+  const layout = useLayoutContext<LayoutOptions>();
+  const { data: identity } = useGetIdentity();
+  const isLogged = Boolean(identity?.id);
+
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+
+  const resourceDefinitions = useResourceDefinitions<{ label: string }>();
+  const hiddenResources = useMemo(() => (layout.options.mainMenu || []).map(i => i.resource), [layout]);
+  const resources = useMemo(
+    () => Object.values(resourceDefinitions).filter((r) => r.hasList && !hiddenResources.includes(r.name)),
+    [resourceDefinitions, hiddenResources],
+  );
+
+  if (!isLogged) {
+    return null;
+  }
+
+  return (
+    <>
+      <IconButton size="large" edge="start" color="inherit" onClick={(event) => setAnchorEl(event.currentTarget)}>
+        <MenuIcon />
+      </IconButton>
+      <Menu
+        anchorEl={anchorEl}
+        open={anchorEl !== null}
+        onClose={() => setAnchorEl(null)}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'right',
+        }}
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'right',
+        }}
+      >
+        {resources.map(({ name, icon: Icon, options }) => (
+          <MenuItemLink
+            key={name}
+            primaryText={options?.label || name}
+            leftIcon={<Icon />}
+            to={`/${name}`}
+            onPointerEnterCapture={undefined}
+            onPointerLeaveCapture={undefined}
+            onClick={() => setAnchorEl(null)}
+          />
+        ))}
+      </Menu>
+    </>
+  );
+};
+
+export default ResourcesMenu;
diff --git a/frontend/src/layouts/topMenu/UserMenu.tsx b/frontend/src/layouts/topMenu/UserMenu.tsx
new file mode 100644
index 0000000..e1b017c
--- /dev/null
+++ b/frontend/src/layouts/topMenu/UserMenu.tsx
@@ -0,0 +1,58 @@
+import React, { forwardRef } from 'react';
+import { Logout, UserMenu as RaUserMenu, useCreatePath, useGetIdentity, useUserMenu } from 'react-admin';
+import AccountCircleIcon from '@mui/icons-material/AccountCircle';
+import EditIcon from '@mui/icons-material/Edit';
+import { Link, ListItemIcon, ListItemText, MenuItem, MenuItemProps } from '@mui/material';
+
+type Props = MenuItemProps & {
+  label: string;
+  icon?: React.ElementType;
+  to: string;
+};
+
+const UserMenuItem = forwardRef(function UserMenuItem({ label, icon: IconComponent, to, ...rest }: Props, ref) {
+  const { onClose } = useUserMenu();
+
+  return (
+    <MenuItem component={Link} href={to} onClick={onClose} ref={ref} {...rest}>
+      {IconComponent && (
+        <ListItemIcon>
+          <IconComponent fontSize="small" />
+        </ListItemIcon>
+      )}
+      <ListItemText>{label}</ListItemText>
+    </MenuItem>
+  );
+});
+
+const UserMenu = () => {
+  const { data: identity } = useGetIdentity();
+  const createPath = useCreatePath();
+
+  return (
+    <RaUserMenu>
+      {identity?.id
+        ? [
+            <UserMenuItem
+              key="view"
+              label="Voir mon profil"
+              icon={AccountCircleIcon}
+              to={createPath({ resource: 'Person', id: identity.id, type: 'show' })}
+            />,
+            <UserMenuItem
+              key="edit"
+              label="Editer mon profil"
+              icon={EditIcon}
+              to={createPath({ resource: 'Person', id: identity.id, type: 'edit' })}
+            />,
+            <Logout key="logout" />,
+          ]
+        : [
+            <UserMenuItem key="signup" label="S'inscrire" to="/login?signup=true" />,
+            <UserMenuItem key="login" label="Se connecter" to="/login" />,
+          ]}
+    </RaUserMenu>
+  );
+};
+
+export default UserMenu;
diff --git a/frontend/src/layouts/topMenu/index.ts b/frontend/src/layouts/topMenu/index.ts
new file mode 100644
index 0000000..ff08fee
--- /dev/null
+++ b/frontend/src/layouts/topMenu/index.ts
@@ -0,0 +1,25 @@
+import { lazy, ReactNode } from 'react';
+import { SvgIconComponent } from "@mui/icons-material"
+import { LayoutComponents } from '../LayoutContext';
+
+export type LayoutOptions = {
+  name: 'topMenu';
+  options: Partial<{
+    sideBarPlacement: 'left' | 'right';
+    logo: string | { url: string; alt: string };
+    title: boolean | (() => ReactNode);
+    mainMenu: {
+      resource?: string;
+      label: string;
+      mobileLabel?: string;
+      link: string;
+      icon: SvgIconComponent;
+    }[]
+  }>;
+};
+
+export default {
+  Layout: lazy(() => import('./Layout')),
+  BaseView: lazy(() => import('./BaseView')),
+  Aside: lazy(() => import('./Aside')),
+} as LayoutComponents;
diff --git a/frontend/src/resources/Agent/Activity/Event/EventFilterSidebar.tsx b/frontend/src/resources/Agent/Activity/Event/EventFilterSidebar.tsx
index 799a007..c97e974 100644
--- a/frontend/src/resources/Agent/Activity/Event/EventFilterSidebar.tsx
+++ b/frontend/src/resources/Agent/Activity/Event/EventFilterSidebar.tsx
@@ -1,12 +1,17 @@
 import React from 'react';
+import { FilterLiveSearch, useTranslate } from 'react-admin';
 import { ReferenceFilter } from '@semapps/list-components';
 import { useLayoutContext } from '../../../../layouts/LayoutContext';
 
 const EventFilterSidebar = () => {
   const Layout = useLayoutContext();
+  const translate = useTranslate();
 
   return (
     <Layout.Aside>
+      {Layout.name === 'topMenu' && (
+        <FilterLiveSearch fullWidth source="q" hiddenLabel label={translate('resources.Event.searchLabel')} />
+      )}
       <ReferenceFilter
         reference="Theme"
         source="pair:hasTopic"
diff --git a/frontend/src/resources/Agent/Activity/Event/index.js b/frontend/src/resources/Agent/Activity/Event/index.js
index e63cefe..cdc2765 100644
--- a/frontend/src/resources/Agent/Activity/Event/index.js
+++ b/frontend/src/resources/Agent/Activity/Event/index.js
@@ -28,7 +28,8 @@ const resource = {
   },
   translations: {
     fr: {
-      name: 'Evénement |||| Evénements',
+      name: 'Evènement |||| Evènements',
+      searchLabel: 'Rechercher un évènement',
       fields: {
         'pair:label': 'Nom',
         'pair:description': 'Description',
diff --git a/frontend/src/resources/Agent/Activity/Project/ProjectFilterSidebar.tsx b/frontend/src/resources/Agent/Activity/Project/ProjectFilterSidebar.tsx
index 0ae138b..e20c915 100644
--- a/frontend/src/resources/Agent/Activity/Project/ProjectFilterSidebar.tsx
+++ b/frontend/src/resources/Agent/Activity/Project/ProjectFilterSidebar.tsx
@@ -1,12 +1,17 @@
 import React from 'react';
+import { FilterLiveSearch, useTranslate } from 'react-admin';
 import { ReferenceFilter } from '@semapps/list-components';
 import { useLayoutContext } from '../../../../layouts/LayoutContext';
 
 const ProjectFilterSidebar = () => {
   const Layout = useLayoutContext();
+  const translate = useTranslate();
 
   return (
     <Layout.Aside>
+      {Layout.name === 'topMenu' && (
+        <FilterLiveSearch fullWidth source="q" hiddenLabel label={translate('resources.Project.searchLabel')} />
+      )}
       <ReferenceFilter
         reference="Status"
         source="pair:hasStatus"
diff --git a/frontend/src/resources/Agent/Activity/Project/index.js b/frontend/src/resources/Agent/Activity/Project/index.js
index 81f0b4f..a57d4fd 100644
--- a/frontend/src/resources/Agent/Activity/Project/index.js
+++ b/frontend/src/resources/Agent/Activity/Project/index.js
@@ -29,6 +29,7 @@ const resource = {
   translations: {
     fr: {
       name: 'Projet |||| Projets',
+      searchLabel: 'Rechercher un projet',
       fields: {
         'pair:label': 'Nom',
         'pair:comment': 'Courte description',
diff --git a/frontend/src/resources/Agent/Activity/Task/TaskFilterSidebar.tsx b/frontend/src/resources/Agent/Activity/Task/TaskFilterSidebar.tsx
index 0393b12..983faa8 100644
--- a/frontend/src/resources/Agent/Activity/Task/TaskFilterSidebar.tsx
+++ b/frontend/src/resources/Agent/Activity/Task/TaskFilterSidebar.tsx
@@ -1,12 +1,17 @@
 import React from 'react';
+import { FilterLiveSearch, useTranslate } from 'react-admin';
 import { ReferenceFilter } from '@semapps/list-components';
 import { useLayoutContext } from '../../../../layouts/LayoutContext';
 
 const TaskFilterSidebar = () => {
   const Layout = useLayoutContext();
+  const translate = useTranslate();
 
   return (
     <Layout.Aside>
+      {Layout.name === 'topMenu' && (
+        <FilterLiveSearch fullWidth source="q" hiddenLabel label={translate('resources.Task.searchLabel')} />
+      )}
       <ReferenceFilter
         reference="Status"
         source="pair:hasStatus"
diff --git a/frontend/src/resources/Agent/Activity/Task/index.js b/frontend/src/resources/Agent/Activity/Task/index.js
index 8474fa4..96c47d1 100644
--- a/frontend/src/resources/Agent/Activity/Task/index.js
+++ b/frontend/src/resources/Agent/Activity/Task/index.js
@@ -29,6 +29,7 @@ const resource = {
   translations: {
     fr: {
       name: 'Tâche |||| Tâches',
+      searchLabel: 'Rechercher une tâche',
       fields: {
         'pair:label': 'Titre',
         'pair:description': 'Description',
diff --git a/frontend/src/resources/Agent/Actor/Organization/OrganizationFilterSidebar.tsx b/frontend/src/resources/Agent/Actor/Organization/OrganizationFilterSidebar.tsx
index c0d5e75..dbb9c3b 100644
--- a/frontend/src/resources/Agent/Actor/Organization/OrganizationFilterSidebar.tsx
+++ b/frontend/src/resources/Agent/Actor/Organization/OrganizationFilterSidebar.tsx
@@ -1,13 +1,18 @@
 import React from 'react';
+import { FilterLiveSearch, useTranslate } from 'react-admin';
 import { ReferenceFilter } from '@semapps/list-components';
 import ReferenceFilterTree from '../../../../common/ReferenceFilterTree';
 import { useLayoutContext } from '../../../../layouts/LayoutContext';
 
 const OrganizationFilterSidebar = () => {
   const Layout = useLayoutContext();
+  const translate = useTranslate();
 
   return (
     <Layout.Aside>
+      {Layout.name === 'topMenu' && (
+        <FilterLiveSearch fullWidth source="q" hiddenLabel label={translate('resources.Organization.searchLabel')} />
+      )}
       <ReferenceFilter
         reference="Type"
         source="pair:hasType"
diff --git a/frontend/src/resources/Agent/Actor/Organization/OrganizationList.jsx b/frontend/src/resources/Agent/Actor/Organization/OrganizationList.jsx
index bcf8c13..d06cf48 100644
--- a/frontend/src/resources/Agent/Actor/Organization/OrganizationList.jsx
+++ b/frontend/src/resources/Agent/Actor/Organization/OrganizationList.jsx
@@ -8,6 +8,7 @@ import HomeIcon from '@mui/icons-material/Home';
 import OrganizationFilterSidebar from './OrganizationFilterSidebar';
 import SimpleList from "../../../../common/list/SimpleList";
 import { List } from '../../../../common/layout';
+import MobileMapPopupContent from '../../../../common/list/MobileMapPopupContent';
 
 const OrganizationList = props => (
   <MultiViewsList
@@ -44,6 +45,7 @@ const OrganizationList = props => (
             label={record => record['pair:label']}
             description={record => record['pair:comment']}
             scrollWheelZoom
+            popupContent={MobileMapPopupContent}
           />
         )
       }
diff --git a/frontend/src/resources/Agent/Actor/Organization/index.js b/frontend/src/resources/Agent/Actor/Organization/index.js
index 2223ccb..b142c92 100644
--- a/frontend/src/resources/Agent/Actor/Organization/index.js
+++ b/frontend/src/resources/Agent/Actor/Organization/index.js
@@ -30,6 +30,7 @@ const resource = {
   translations: {
     fr: {
       name: 'Organisation |||| Organisations',
+      searchLabel: 'Rechercher une organisation',
       fields: {
         'pair:label': 'Nom',
         'pair:comment': 'Courte description',
diff --git a/frontend/src/resources/Agent/Actor/Person/PersonFilterSidebar.tsx b/frontend/src/resources/Agent/Actor/Person/PersonFilterSidebar.tsx
index 9f22b10..ec6b0e3 100644
--- a/frontend/src/resources/Agent/Actor/Person/PersonFilterSidebar.tsx
+++ b/frontend/src/resources/Agent/Actor/Person/PersonFilterSidebar.tsx
@@ -1,12 +1,17 @@
 import React from 'react';
+import { FilterLiveSearch, useTranslate } from 'react-admin';
 import { ReferenceFilter } from '@semapps/list-components';
 import { useLayoutContext } from '../../../../layouts/LayoutContext';
 
 const PersonFilterSidebar = () => {
   const Layout = useLayoutContext();
+  const translate = useTranslate();
 
   return (
     <Layout.Aside>
+      {Layout.name === 'topMenu' && (
+        <FilterLiveSearch fullWidth source="q" hiddenLabel label={translate('resources.Person.searchLabel')} />
+      )}
       <ReferenceFilter
         label="Intérêts"
         reference="Theme"
diff --git a/frontend/src/resources/Agent/Actor/Person/PersonList.jsx b/frontend/src/resources/Agent/Actor/Person/PersonList.jsx
index efbacd5..73ac57f 100644
--- a/frontend/src/resources/Agent/Actor/Person/PersonList.jsx
+++ b/frontend/src/resources/Agent/Actor/Person/PersonList.jsx
@@ -10,6 +10,7 @@ import AccountCircleIcon from '@mui/icons-material/AccountCircle';
 import PersonFilterSidebar from './PersonFilterSidebar';
 import SimpleList from "../../../../common/list/SimpleList";
 import { List } from '../../../../common/layout';
+import MobileMapPopupContent from '../../../../common/list/MobileMapPopupContent';
 
 const PersonList = props => (
   <MultiViewsList
@@ -58,6 +59,7 @@ const PersonList = props => (
             label={record => record['pair:label']}
             description={record => record['pair:comment']}
             scrollWheelZoom
+            popupContent={MobileMapPopupContent}
           />
         )
       }
diff --git a/frontend/src/resources/Agent/Actor/Person/index.js b/frontend/src/resources/Agent/Actor/Person/index.js
index 275fe35..75da8d1 100644
--- a/frontend/src/resources/Agent/Actor/Person/index.js
+++ b/frontend/src/resources/Agent/Actor/Person/index.js
@@ -28,6 +28,7 @@ const resource = {
   translations: {
     fr: {
       name: 'Personne |||| Personnes',
+      searchLabel: 'Rechercher une personne',
       fields: {
         'pair:firstName': 'Prénom',
         'pair:lastName': 'Nom de famille',
diff --git a/frontend/src/resources/Idea/IdeaFilterSidebar.tsx b/frontend/src/resources/Idea/IdeaFilterSidebar.tsx
index f1362e2..950f08f 100644
--- a/frontend/src/resources/Idea/IdeaFilterSidebar.tsx
+++ b/frontend/src/resources/Idea/IdeaFilterSidebar.tsx
@@ -1,12 +1,17 @@
 import React from 'react';
+import { FilterLiveSearch, useTranslate } from 'react-admin';
 import { ReferenceFilter } from '@semapps/list-components';
 import { useLayoutContext } from '../../layouts/LayoutContext';
 
 const IdeaFilterSidebar = () => {
   const Layout = useLayoutContext();
+  const translate = useTranslate();
 
   return (
     <Layout.Aside>
+      {Layout.name === 'topMenu' && (
+        <FilterLiveSearch fullWidth source="q" hiddenLabel label={translate('resources.Idea.searchLabel')} />
+      )}
       <ReferenceFilter
         reference="Status"
         source="pair:hasStatus"
diff --git a/frontend/src/resources/Idea/index.js b/frontend/src/resources/Idea/index.js
index 4591a35..4a39bb9 100644
--- a/frontend/src/resources/Idea/index.js
+++ b/frontend/src/resources/Idea/index.js
@@ -28,6 +28,7 @@ const resource = {
   translations: {
     fr: {
       name: 'Idée |||| Idées',
+      searchLabel: 'Rechercher une idée',
       fields: {
         'pair:label': 'Titre',
         'pair:description': 'Description',