diff --git a/package.json b/package.json
index 00f07ac..8449a9a 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
     "preview": "vite preview"
diff --git a/src/App.tsx b/src/App.tsx
index e26f07d..1de0b5a 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,15 +1,54 @@
-import { useState } from 'react'
-import './App.css'
-import { Outlet } from 'react-router-dom'
+import { Drawer, Grid2, List, ListItem, ListItemText } from "@mui/material";
+import { Link, Outlet } from "react-router-dom";
 
-function App() {
-  const [count, setCount] = useState(0)
+export default function App () {
+    return(
+        <>
+            <Grid2 container spacing={2}>
+                <Grid2 size={2}>
+                    <div className="App">
+                        <header className="App-header">
+                        <img className="App-logo" alt="logo" />
+                        <h1 className="App-title">Welcome to React</h1>
+                        </header>
+                        <div className="menu">
+                            <ul>
+                            <li> <Link to="/">Home</Link> </li>
+                            <li> <Link to="rules">Reglamentos</Link> </li>
+                            <li> <Link to="about">About</Link> </li>
+                            </ul>
+                        </div>
+                    </div>
+                    {/* <Drawer>
+                        <List>
+                        <ListItem>
+                            <ListItemText>
+                            <Link to="/">Home</Link>
+                            </ListItemText>
+                        </ListItem>
+                        <ListItem>
+                            <ListItemText>
+                            <Link to="/about">About</Link>
+                            </ListItemText>
+                        </ListItem>
+                        <ListItem>
+                            <ListItemText>
+                            <Link to="/contact">Contact</Link>
+                            </ListItemText>
+                        </ListItem>
+                        <ListItem >
+                            <ListItemText>
+                            <Link to="/about">Faq</Link>
+                            </ListItemText>
+                        </ListItem>
+                        </List>
+                    </Drawer> */}
+                </Grid2>
+                <Grid2 size={8}>
+                    <Outlet />
+                </Grid2>
+            </Grid2>
 
-  return (
-    <>
-      <Outlet />
-    </>
-  )
-}
-
-export default App
+        </>
+    )
+}
\ No newline at end of file
diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx
index 5032aca..b071eef 100644
--- a/src/components/layout/Layout.tsx
+++ b/src/components/layout/Layout.tsx
@@ -1,16 +1,82 @@
-import { Box, AppBar, Toolbar, IconButton, Typography, Button, Grid } from "@mui/material";
+import { AppBar, Box, Button, Divider, Drawer, Grid2, IconButton, List, ListItem, ListItemButton, ListItemIcon, ListItemText, Toolbar, Typography } from "@mui/material";
+import { Link, Outlet } from "react-router-dom";
 import MenuIcon from '@mui/icons-material/Menu';
-import { Outlet } from "react-router-dom";
+import React from "react";
+import InboxIcon from '@mui/icons-material/MoveToInbox';
+import MailIcon from '@mui/icons-material/Mail';
+
+
+
 
 export default function Layout () {
+    // const classes = useStyles();
+    // const theme = useTheme();
+    const [open, setOpen] = React.useState(false);
+
+    const onMenuClick = (event: MouseEvent): void => {
+        const newState = !open;
+        console.log(`>> State: ${newState}`);
+        setOpen(newState)
+    }
+    const DrawerList = (
+        <Box sx={{ width: 250 }} role="presentation" onClick={onMenuClick}>
+          <List>
+            {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
+              <ListItem key={text} disablePadding>
+                <ListItemButton>
+                  <ListItemIcon>
+                    {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
+                  </ListItemIcon>
+                  <ListItemText primary={text} />
+                </ListItemButton>
+              </ListItem>
+            ))}
+          </List>
+          <Divider />
+          <List>
+            {['All mail', 'Trash', 'Spam'].map((text, index) => (
+                <ListItem key={text} disablePadding>
+                    <ListItemButton>
+                        <ListItemIcon>
+                            {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
+                        </ListItemIcon>
+                        <ListItemText primary={text} />
+                    </ListItemButton>
+                </ListItem>
+            ))}
+          </List>
+        </Box>
+      );
+
     return(
-        <Grid container>
-            <nav>
-                <ul>
-                    <li>Reglamento</li>
-                    <li>Bestiario</li>
-                </ul>
-            </nav>
-        </Grid>
+        <Grid2 container>
+            <Box sx={{ flexGrow: 12 }}>
+                <AppBar position="fixed">
+                    <Toolbar>
+                    <IconButton
+                        size="large"
+                        edge="start"
+                        color="inherit"
+                        aria-label="menu"
+                        sx={{ mr: 2 }}
+                        onClick={onMenuClick}
+                    >
+                    <MenuIcon />
+                    </IconButton>
+                    <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
+                        <Link to='/'>Compendium Arcana</Link>
+                    </Typography>
+                    <Button color="inherit">Login</Button>
+                    </Toolbar>
+                </AppBar>
+                <Drawer variant="persistent" anchor="left" open={open} onClose={onMenuClick}>
+                    {DrawerList}
+                </Drawer>
+            </Box>
+                <Box sx={{ flexGrow: 12 }}>
+                    <Outlet />
+                </Box>
+            </Grid2>
     )
-}
\ No newline at end of file
+}
+