diff --git a/packages/webapp/lang/en.json b/packages/webapp/lang/en.json
index de488f3f..2ed716e7 100644
--- a/packages/webapp/lang/en.json
+++ b/packages/webapp/lang/en.json
@@ -2,6 +2,9 @@
   "action.cancel-button": {
     "defaultMessage": "Cancel"
   },
+  "action.close-button": {
+    "defaultMessage": "Close"
+  },
   "action.delete": {
     "defaultMessage": "Delete"
   },
@@ -20,6 +23,9 @@
   "action.info": {
     "defaultMessage": "Info"
   },
+  "action.info-title": {
+    "defaultMessage": "Info"
+  },
   "action.open": {
     "defaultMessage": "Open"
   },
@@ -38,6 +44,9 @@
   "common.wait": {
     "defaultMessage": "Please wait ..."
   },
+  "duplicate.title": {
+    "defaultMessage": "Duplicate"
+  },
   "footer.aboutus": {
     "defaultMessage": "About Us"
   },
@@ -126,6 +135,12 @@
   "registration.title": {
     "defaultMessage": "Become a member"
   },
+  "rename.description": {
+    "defaultMessage": "Please, fill the new map name and description."
+  },
+  "rename.title": {
+    "defaultMessage": "Rename"
+  },
   "resetpassword.success.title": {
     "defaultMessage": "Your account has been created successfully"
   }
diff --git a/packages/webapp/package.json b/packages/webapp/package.json
index 721abb41..fe21b6b9 100644
--- a/packages/webapp/package.json
+++ b/packages/webapp/package.json
@@ -42,7 +42,7 @@
         "webpack-dev-server": "^3.11.0"
     },
     "dependencies": {
-        "@material-ui/core": "^4.11.2",
+        "@material-ui/core": "^4.11.1",
         "@material-ui/icons": "^4.11.2",
         "@material-ui/lab": "^4.0.0-alpha.57",
         "@reduxjs/toolkit": "^1.5.0",
@@ -57,4 +57,4 @@
         "react-router-dom": "^5.2.0",
         "styled-components": "^5.1.7"
     }
-}
+}
\ No newline at end of file
diff --git a/packages/webapp/src/compiled-lang/en.json b/packages/webapp/src/compiled-lang/en.json
index 3716dff7..11384c39 100644
--- a/packages/webapp/src/compiled-lang/en.json
+++ b/packages/webapp/src/compiled-lang/en.json
@@ -5,6 +5,12 @@
       "value": "Cancel"
     }
   ],
+  "action.close-button": [
+    {
+      "type": 0,
+      "value": "Close"
+    }
+  ],
   "action.delete": [
     {
       "type": 0,
@@ -41,6 +47,12 @@
       "value": "Info"
     }
   ],
+  "action.info-title": [
+    {
+      "type": 0,
+      "value": "Info"
+    }
+  ],
   "action.open": [
     {
       "type": 0,
@@ -77,6 +89,12 @@
       "value": "Please wait ..."
     }
   ],
+  "duplicate.title": [
+    {
+      "type": 0,
+      "value": "Duplicate"
+    }
+  ],
   "footer.aboutus": [
     {
       "type": 0,
@@ -251,6 +269,18 @@
       "value": "Become a member"
     }
   ],
+  "rename.description": [
+    {
+      "type": 0,
+      "value": "Please, fill the new map name and description."
+    }
+  ],
+  "rename.title": [
+    {
+      "type": 0,
+      "value": "Rename"
+    }
+  ],
   "resetpassword.success.title": [
     {
       "type": 0,
diff --git a/packages/webapp/src/compiled-lang/es.json b/packages/webapp/src/compiled-lang/es.json
index 466510d0..670a6a2a 100644
--- a/packages/webapp/src/compiled-lang/es.json
+++ b/packages/webapp/src/compiled-lang/es.json
@@ -1,78 +1,116 @@
 {
-    "footer.aboutus": [{
-        "type": 0,
-        "value": "Sobre Nosotros"
-    }],
-    "footer.contactus": [{
-        "type": 0,
-        "value": "Contáctenos"
-    }],
-    "footer.donations": [{
-        "type": 0,
-        "value": "Donaciones"
-    }],
-    "footer.faq": [{
-        "type": 0,
-        "value": "Preguntas Frecuentes"
-    }],
-    "footer.feedback": [{
-        "type": 0,
-        "value": "Feedback"
-    }],
-    "footer.opensource": [{
-        "type": 0,
-        "value": "Open Source"
-    }],
-    "footer.termsandconditions": [{
-        "type": 0,
-        "value": "Terminos y Condiciones"
-    }],
-    "header.donthaveaccount": [{
-        "type": 0,
-        "value": "No tienes una cuenta ?"
-    }],
-    "login.email": [{
-        "type": 0,
-        "value": "Email"
-    }],
-    "login.error": [{
-        "type": 0,
-        "value": "El email o la contraseña no es valida."
-    }],
-    "login.forgotpwd": [{
-        "type": 0,
-        "value": "Olvidaste la contraseña ?"
-    }],
-    "login.hsqldbcofig": [{
-        "type": 0,
-        "value": "Warning: Although HSQLDB is bundled with WiseMapping by default during the installation, we do not recommend this database for production use. Please consider using MySQL 5.7 instead. You can find more information how to configure MySQL"
-    }],
-    "login.loginto": [{
-        "type": 0,
-        "value": "Ingresar a tu Cuenta"
-    }],
-    "login.password": [{
-        "type": 0,
-        "value": "Contraseña"
-    }],
-    "login.remberme": [{
-        "type": 0,
-        "value": "Recordarme"
-    }],
-    "login.signin": [{
-        "type": 0,
-        "value": "Ingresar"
-    }],
-    "login.signup": [{
-        "type": 0,
-        "value": "Registrarse"
-    }],
-    "login.userinactive": [{
-        "type": 0,
-        "value": "Sorry, your account has not been activated yet. You'll receive a notification email when it becomes active. Stay tuned!."
-    }],
-    "login.welcome": [{
-        "type": 0,
-        "value": "Bienvenido"
-    }]
+  "footer.aboutus": [
+    {
+      "type": 0,
+      "value": "Sobre Nosotros"
+    }
+  ],
+  "footer.contactus": [
+    {
+      "type": 0,
+      "value": "Contáctenos"
+    }
+  ],
+  "footer.donations": [
+    {
+      "type": 0,
+      "value": "Donaciones"
+    }
+  ],
+  "footer.faq": [
+    {
+      "type": 0,
+      "value": "Preguntas Frecuentes"
+    }
+  ],
+  "footer.feedback": [
+    {
+      "type": 0,
+      "value": "Feedback"
+    }
+  ],
+  "footer.opensource": [
+    {
+      "type": 0,
+      "value": "Open Source"
+    }
+  ],
+  "footer.termsandconditions": [
+    {
+      "type": 0,
+      "value": "Terminos y Condiciones"
+    }
+  ],
+  "header.donthaveaccount": [
+    {
+      "type": 0,
+      "value": "No tienes una cuenta ?"
+    }
+  ],
+  "login.email": [
+    {
+      "type": 0,
+      "value": "Email"
+    }
+  ],
+  "login.error": [
+    {
+      "type": 0,
+      "value": "El email o la contraseña no es valida."
+    }
+  ],
+  "login.forgotpwd": [
+    {
+      "type": 0,
+      "value": "Olvidaste la contraseña ?"
+    }
+  ],
+  "login.hsqldbcofig": [
+    {
+      "type": 0,
+      "value": "Warning: Although HSQLDB is bundled with WiseMapping by default during the installation, we do not recommend this database for production use. Please consider using MySQL 5.7 instead. You can find more information how to configure MySQL"
+    }
+  ],
+  "login.loginto": [
+    {
+      "type": 0,
+      "value": "Ingresar a tu Cuenta"
+    }
+  ],
+  "login.password": [
+    {
+      "type": 0,
+      "value": "Contraseña"
+    }
+  ],
+  "login.remberme": [
+    {
+      "type": 0,
+      "value": "Recordarme"
+    }
+  ],
+  "login.signin": [
+    {
+      "type": 0,
+      "value": "Ingresar"
+    }
+  ],
+  "login.signup": [
+    {
+      "type": 0,
+      "value": "Registrarse"
+    }
+  ],
+  "login.userinactive": [
+    {
+      "type": 0,
+      "value": "Sorry, your account has not been activated yet. You'll receive a notification email when it becomes active. Stay tuned!."
+    }
+  ],
+  "login.welcome": [
+    {
+      "type": 0,
+      "value": "Bienvenido"
+    }
+  ]
 }
\ No newline at end of file
diff --git a/packages/webapp/src/components/layout/form-container/styled.ts b/packages/webapp/src/components/layout/form-container/styled.ts
deleted file mode 100644
index e69de29b..00000000
diff --git a/packages/webapp/src/components/maps-page/action-chooser/index.tsx b/packages/webapp/src/components/maps-page/action-chooser/index.tsx
index add511bf..b0b6615a 100644
--- a/packages/webapp/src/components/maps-page/action-chooser/index.tsx
+++ b/packages/webapp/src/components/maps-page/action-chooser/index.tsx
@@ -9,10 +9,10 @@ import EditOutlinedIcon from '@material-ui/icons/EditOutlined';
 import PublicOutlinedIcon from '@material-ui/icons/PublicOutlined';
 import PrintOutlinedIcon from '@material-ui/icons/PrintOutlined';
 import ShareOutlinedIcon from '@material-ui/icons/ShareOutlined';
-import { StyledMenuItem } from '../maps-list/styled';
+import { StyledMenuItem } from './styled';
 import { FormattedMessage } from 'react-intl';
 
-export type ActionType = 'open' | 'share' | 'delete' | 'info' | 'duplicate' | 'export' | 'rename' | 'print' | 'info' | 'publish' | undefined;
+export type ActionType = 'open' | 'share' | 'delete' | 'info' | 'duplicate' | 'export' | 'rename' | 'print' | 'info' | 'publish' | 'history'| undefined;
 
 interface ActionProps {
   onClose: (action: ActionType) => void;
@@ -36,6 +36,7 @@ const ActionChooser = (props: ActionProps) => {
       keepMounted
       open={Boolean(anchor)}
       onClose={handleOnClose(undefined)}
+
     >
       <StyledMenuItem onClick={handleOnClose('open')}>
         <DescriptionOutlinedIcon /><FormattedMessage id="action.open" defaultMessage="Open" />
@@ -70,6 +71,11 @@ const ActionChooser = (props: ActionProps) => {
       <MenuItem onClick={handleOnClose('info')}>
         <InfoOutlinedIcon /><FormattedMessage id="action.info" defaultMessage="Info" />
       </MenuItem>
+     
+      <MenuItem onClick={handleOnClose('history')}>
+        <DeleteOutlinedIcon /><FormattedMessage id="action.delete" defaultMessage="History" />
+      </MenuItem>
+
     </Menu>);
 }
 
diff --git a/packages/webapp/src/components/maps-page/action-chooser/styled.ts b/packages/webapp/src/components/maps-page/action-chooser/styled.ts
new file mode 100644
index 00000000..8347a02d
--- /dev/null
+++ b/packages/webapp/src/components/maps-page/action-chooser/styled.ts
@@ -0,0 +1,10 @@
+import { MenuItem, withStyles } from "@material-ui/core";
+
+export const StyledMenuItem = withStyles({
+    root: {
+      width: '300px',
+      padding: '10px 20px',
+      marging: '0px 20px'
+    }
+  })(MenuItem)
+  
\ No newline at end of file
diff --git a/packages/webapp/src/components/maps-page/action-dispatcher/action-dialog/index.tsx b/packages/webapp/src/components/maps-page/action-dispatcher/action-dialog/index.tsx
index 4635f654..42bf0f40 100644
--- a/packages/webapp/src/components/maps-page/action-dispatcher/action-dialog/index.tsx
+++ b/packages/webapp/src/components/maps-page/action-dispatcher/action-dialog/index.tsx
@@ -1,6 +1,6 @@
 import React from "react";
-import { Button, DialogContentText, DialogTitle } from "@material-ui/core";
-import { FormattedMessage, MessageDescriptor, useIntl } from "react-intl";
+import { Button, DialogContentText } from "@material-ui/core";
+import { FormattedMessage, useIntl } from "react-intl";
 import { ErrorInfo } from "../../../../services/Service";
 import { StyledDialog, StyledDialogActions, StyledDialogContent, StyledDialogTitle } from "./style";
 import GlobalError from "../../../form/global-error";
@@ -12,9 +12,9 @@ export type DialogProps = {
     children: any;
     error?: ErrorInfo;
 
-    title: MessageDescriptor;
-    description?: MessageDescriptor;
-    submitButton?: MessageDescriptor;
+    title: string;
+    description?: string;
+    submitButton?: string; 
 }
 
 const BaseDialog = (props: DialogProps) => {
@@ -23,7 +23,7 @@ const BaseDialog = (props: DialogProps) => {
     const isOpen = props.open;
     const handleOnSubmit = props.onSubmit;
 
-    const description = props.description ? (<DialogContentText>{intl.formatMessage(props.description)}</DialogContentText>) : null;
+    const description = props.description ? (<DialogContentText>{props.description}</DialogContentText>) : null;
 
     return (
         <div>
@@ -34,7 +34,7 @@ const BaseDialog = (props: DialogProps) => {
                 fullWidth={true}>
                 <form autoComplete="off" onSubmit={handleOnSubmit}>
                     <StyledDialogTitle>
-                        {intl.formatMessage(props.title)}
+                        {props.title}
                     </StyledDialogTitle>
 
                     <StyledDialogContent>
@@ -49,7 +49,7 @@ const BaseDialog = (props: DialogProps) => {
                         </Button>
                         {handleOnSubmit ? (
                             <Button color="primary" size="medium" variant="contained" type="submit" disableElevation={true}>
-                                {intl.formatMessage(props.title)}
+                                {props.title}
                             </Button>) : null
                         }
                     </StyledDialogActions>
diff --git a/packages/webapp/src/components/maps-page/action-dispatcher/delete/index.tsx b/packages/webapp/src/components/maps-page/action-dispatcher/delete/index.tsx
index e04ef7ab..13ccc074 100644
--- a/packages/webapp/src/components/maps-page/action-dispatcher/delete/index.tsx
+++ b/packages/webapp/src/components/maps-page/action-dispatcher/delete/index.tsx
@@ -10,6 +10,8 @@ import BaseDialog from "../action-dialog";
 
 
 const DeleteDialog = (props: DialogProps) => {
+  const intl = useIntl();
+
   const service: Service = useSelector(activeInstance);
   const queryClient = useQueryClient();
   const mutation = useMutation((id: number) => service.deleteMap(id),
@@ -33,8 +35,8 @@ const DeleteDialog = (props: DialogProps) => {
     <div>
       <BaseDialog
         open={props.open} onClose={handleOnClose} onSubmit={handleOnSubmit}
-        title={{ id: "action.delete-title", defaultMessage: "Delete" }} 
-        submitButton={{ id: "action.delete-title", defaultMessage: "Delete" }} >
+        title={intl.formatMessage({ id: "action.delete-title", defaultMessage: "Delete" })} 
+        submitButton={intl.formatMessage({ id: "action.delete-title", defaultMessage: "Delete" })} >
         <Alert severity="warning">
           <AlertTitle>Delete '{map?.name}'</AlertTitle>
           <FormattedMessage id="action.delete-description" defaultMessage="Deleted mindmap can not be recovered. Do you want to continue ?." />
diff --git a/packages/webapp/src/components/maps-page/action-dispatcher/duplicate/index.tsx b/packages/webapp/src/components/maps-page/action-dispatcher/duplicate/index.tsx
index 39b68ef6..cbae8461 100644
--- a/packages/webapp/src/components/maps-page/action-dispatcher/duplicate/index.tsx
+++ b/packages/webapp/src/components/maps-page/action-dispatcher/duplicate/index.tsx
@@ -2,10 +2,11 @@ import React, { useEffect } from "react";
 import { useIntl } from "react-intl";
 import { useMutation, useQueryClient } from "react-query";
 import { useSelector } from "react-redux";
+import { FormControl } from "@material-ui/core";
+
 import { BasicMapInfo, ErrorInfo, Service } from "../../../../services/Service";
 import { activeInstance } from '../../../../reducers/serviceSlice';
 import Input from "../../../form/input";
-import { FormControl } from "@material-ui/core";
 import { DialogProps, fetchMapById, handleOnMutationSuccess } from "..";
 import BaseDialog from "../action-dialog";
 
@@ -71,10 +72,10 @@ const DuplicateDialog = (props: DialogProps) => {
     return (
         <div>
             <BaseDialog open={open} onClose={handleOnClose} onSubmit={handleOnSubmit} error={error}
-                title={{ id: 'duplicate.title', defaultMessage: 'Duplicate' }}
-                description={{ id: 'rename.description', defaultMessage: 'Please, fill the new map name and description.' }}
-                submitButton={{ id: 'duplicate.title', defaultMessage: 'Duplicate' }}>
-
+                title={intl.formatMessage({ id: 'duplicate.title', defaultMessage: 'Duplicate' })}
+                description={intl.formatMessage({ id: 'rename.description', defaultMessage: 'Please, fill the new map name and description.' })}
+                submitButton={intl.formatMessage({ id: 'duplicate.title', defaultMessage: 'Duplicate' })}>
+ 
                 <FormControl fullWidth={true}>
                     <Input name="name" type="text" label={{ id: "action.rename-name-placeholder", defaultMessage: "Name" }}
                         value={model.name} onChange={handleOnChange} error={error} fullWidth={true} />
diff --git a/packages/webapp/src/components/maps-page/action-dispatcher/info/index.tsx b/packages/webapp/src/components/maps-page/action-dispatcher/info/index.tsx
index 401c6735..f28312a3 100644
--- a/packages/webapp/src/components/maps-page/action-dispatcher/info/index.tsx
+++ b/packages/webapp/src/components/maps-page/action-dispatcher/info/index.tsx
@@ -5,12 +5,14 @@ import { Service } from "../../../../services/Service";
 import { activeInstance } from '../../../../reducers/serviceSlice';
 import { DialogProps, fetchMapById } from "..";
 import BaseDialog from "../action-dialog";
+import { useIntl } from "react-intl";
 
 
 const InfoDialog = (props: DialogProps) => {
   const service: Service = useSelector(activeInstance);
   const queryClient = useQueryClient();
- 
+  const intl = useIntl();
+
 
   const mapId = props.mapId;
   const handleOnClose = (): void => {
@@ -22,7 +24,7 @@ const InfoDialog = (props: DialogProps) => {
     <div>
       <BaseDialog
         open={props.open} onClose={handleOnClose}
-        title={{ id: "action.info-title", defaultMessage: "Info" }}>
+        title={intl.formatMessage({ id: "action.info-title", defaultMessage: "Info" })}>
 
         <iframe src="http://www.clarin.com" style={{width:'100%',height:'400px'}}/>
 
diff --git a/packages/webapp/src/components/maps-page/action-dispatcher/rename/index.tsx b/packages/webapp/src/components/maps-page/action-dispatcher/rename/index.tsx
index b53151dd..809d60f2 100644
--- a/packages/webapp/src/components/maps-page/action-dispatcher/rename/index.tsx
+++ b/packages/webapp/src/components/maps-page/action-dispatcher/rename/index.tsx
@@ -71,9 +71,9 @@ const RenameDialog = (props: DialogProps) => {
     return (
         <div>
             <BaseDialog open={open} onClose={handleOnClose} onSubmit={handleOnSubmit} error={error}
-                title={{ id: 'rename.title', defaultMessage: 'Rename' }}
-                description={{ id: 'rename.description', defaultMessage: 'Please, fill the new map name and description.' }}
-                submitButton={{ id: 'rename.title', defaultMessage: 'Rename' }}>
+                title={intl.formatMessage({ id: 'rename.title', defaultMessage: 'Rename' })}
+                description={intl.formatMessage({ id: 'rename.description', defaultMessage: 'Please, fill the new map name and description.' })}
+                submitButton={intl.formatMessage({ id: 'rename.title', defaultMessage: 'Rename' })}>
 
                 <FormControl fullWidth={true}>
                     <Input name="name" type="text" label={{ id: "action.rename-name-placeholder", defaultMessage: "Name" }}
diff --git a/packages/webapp/src/components/maps-page/index.tsx b/packages/webapp/src/components/maps-page/index.tsx
index 9ddbc90d..a4509db6 100644
--- a/packages/webapp/src/components/maps-page/index.tsx
+++ b/packages/webapp/src/components/maps-page/index.tsx
@@ -10,11 +10,11 @@ import MenuIcon from '@material-ui/icons/Menu';
 import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemIcon from '@material-ui/core/ListItemIcon';
-import { MapsList } from './maps-list';
 import { ListItemTextStyled, useStyles } from './style';
-import { AddTwoTone, BlurCircular, DeleteOutlineTwoTone, LabelTwoTone, PublicTwoTone, ShareTwoTone, StarRateTwoTone } from '@material-ui/icons';
+import { AccountCircle, AddTwoTone, BlurCircular, DeleteOutlineTwoTone, LabelTwoTone, PublicTwoTone, PublishTwoTone, ShareTwoTone, StarRateTwoTone, Translate, TranslateTwoTone } from '@material-ui/icons';
 import InboxTwoToneIcon from '@material-ui/icons/InboxTwoTone';
-import { Button, ListItemSecondaryAction } from '@material-ui/core';
+import { Button, ListItemSecondaryAction, Tooltip } from '@material-ui/core';
+import { MapsList } from './maps-list';
 
 type FilterType = 'public' | 'all' | 'starred' | 'shared' | 'label' | 'owned'
 
@@ -44,107 +44,127 @@ const MapsPage = (props: any) => {
 
 
     return (
-            <div className={classes.root}>
-                <AppBar
-                    position="fixed"
-                    className={clsx(classes.appBar, {
-                        [classes.appBarShift]: open,
-                    })}>
-                    <Toolbar>
-                            <IconButton
-                            color="inherit"
-                            aria-label="open drawer"
-                            onClick={handleDrawerOpen}
-                            edge="start"
-                            className={clsx(classes.menuButton, {
-                                [classes.hide]: open,
-                            })}>
-                            <MenuIcon />
-                        </IconButton>
+        <div className={classes.root}>
+            <AppBar
+                position="fixed"
+                className={clsx(classes.appBar, {
+                    [classes.appBarShift]: open,
+                })}>
+                <Toolbar variant="regular">
+                    <IconButton color="inherit" onClick={handleDrawerOpen} edge="start"
+                        className={clsx(classes.menuButton, {
+                            [classes.hide]: open,
+                        })}>
+                        <MenuIcon />
+                    </IconButton>
 
-                        <Button color="primary" size="medium" variant="contained" type="button" 
-                        disableElevation={true} startIcon={<AddTwoTone />}>
+                    <Tooltip title="Create a New Map">
+                        <Button color="primary" size="medium" variant="contained" type="button"
+                            disableElevation={true} startIcon={<AddTwoTone />} className={classes.newMapButton}>
                             New Map
                         </Button>
-                    </Toolbar>
-                </AppBar>
+                    </Tooltip>
 
-                <Drawer
-                    variant="permanent"
-                    className={clsx(classes.drawer, {
-                        [classes.drawerOpen]: open,
-                        [classes.drawerClose]: !open,
-                    })}
-                    classes={{
-                        paper: clsx({
-                            [classes.drawerOpen]: open,
-                            [classes.drawerClose]: !open,
-                        }),
-                    }}>
-                    <div className={classes.toolbar}>
-                        <IconButton onClick={handleDrawerClose}>
-                            {<ChevronLeftIcon />}
+                    <Tooltip title="Import from other mindmap tools">
+                        <Button color="primary" size="medium" variant="outlined" type="button"
+                            disableElevation={true} startIcon={<PublishTwoTone />} className={classes.importButton}>
+                            Import
+                    </Button>
+                    </Tooltip>
+
+
+                    <div className={classes.rightButtonGroup}>
+                        <IconButton
+                            aria-label="account of current user"
+                            aria-controls="menu-appbar"
+                            aria-haspopup="true"
+                        // onClick={handleMenu}
+                        >
+                            <AccountCircle fontSize="large" />
                         </IconButton>
                     </div>
-                    <Divider />
 
-                    <List component="nav">
 
-                        <ListItem button >
-                            <ListItemIcon>
-                                <InboxTwoToneIcon color="secondary" />
-                            </ListItemIcon>
-                            <ListItemTextStyled primary="All" />
-                        </ListItem>
 
-                        <ListItem button >
-                            <ListItemIcon>
-                                <BlurCircular color="secondary" />
-                            </ListItemIcon>
-                            <ListItemTextStyled primary="Owned" />
-                        </ListItem>
+                </Toolbar>
+            </AppBar>
 
-                        <ListItem button >
-                            <ListItemIcon>
-                                <StarRateTwoTone color="secondary" />
-                            </ListItemIcon>
-                            <ListItemTextStyled primary="Starred" />
-                        </ListItem>
+            <Drawer
+                variant="permanent"
+                className={clsx(classes.drawer, {
+                    [classes.drawerOpen]: open,
+                    [classes.drawerClose]: !open,
+                })}
+                classes={{
+                    paper: clsx({
+                        [classes.drawerOpen]: open,
+                        [classes.drawerClose]: !open,
+                    }),
+                }}>
+                <div className={classes.toolbar}>
+                    <IconButton onClick={handleDrawerClose}>
+                        {<ChevronLeftIcon />}
+                    </IconButton>
+                </div>
+                <Divider />
 
-                        <ListItem button >
-                            <ListItemIcon>
-                                <ShareTwoTone color="secondary" />
-                            </ListItemIcon>
-                            <ListItemTextStyled primary="Shared With Me" />
-                        </ListItem>
+                <List component="nav">
 
-                        <ListItem button >
-                            <ListItemIcon>
-                                <PublicTwoTone color="secondary" />
-                            </ListItemIcon>
-                            <ListItemTextStyled primary="Public" />
-                        </ListItem>
+                    <ListItem button >
+                        <ListItemIcon>
+                            <InboxTwoToneIcon color="secondary" />
+                        </ListItemIcon>
+                        <ListItemTextStyled primary="All" />
+                    </ListItem>
 
-                        <ListItem button >
-                            <ListItemIcon>
-                                <LabelTwoTone color="secondary" />
-                            </ListItemIcon>
-                            <ListItemTextStyled primary="Some label>" />
-                            <ListItemSecondaryAction>
-                                <IconButton edge="end" aria-label="delete">
-                                    <DeleteOutlineTwoTone color="secondary" />
-                                </IconButton>
-                            </ListItemSecondaryAction>
-                        </ListItem>
+                    <ListItem button >
+                        <ListItemIcon>
+                            <BlurCircular color="secondary" />
+                        </ListItemIcon>
+                        <ListItemTextStyled primary="Owned" />
+                    </ListItem>
 
-                    </List>
-                </Drawer>
-                <main className={classes.content}>
-                    <div className={classes.toolbar} />
-                    <MapsList />
-                </main>
-            </div>
-        );
+                    <ListItem button >
+                        <ListItemIcon>
+                            <StarRateTwoTone color="secondary" />
+                        </ListItemIcon>
+                        <ListItemTextStyled primary="Starred" />
+                    </ListItem>
+
+                    <ListItem button >
+                        <ListItemIcon>
+                            <ShareTwoTone color="secondary" />
+                        </ListItemIcon>
+                        <ListItemTextStyled primary="Shared With Me" />
+                    </ListItem>
+
+                    <ListItem button >
+                        <ListItemIcon>
+                            <PublicTwoTone color="secondary" />
+                        </ListItemIcon>
+                        <ListItemTextStyled primary="Public" />
+                    </ListItem>
+
+                    <ListItem button >
+                        <ListItemIcon>
+                            <LabelTwoTone color="secondary" />
+                        </ListItemIcon>
+                        <ListItemTextStyled primary="Some label>" />
+                        <ListItemSecondaryAction>
+                            <IconButton edge="end" aria-label="delete">
+                                <DeleteOutlineTwoTone color="secondary" />
+                            </IconButton>
+                        </ListItemSecondaryAction>
+                    </ListItem>
+
+                </List>
+            </Drawer>
+            <main className={classes.content}>
+                <div className={classes.toolbar} />
+                <MapsList />
+            </main>
+        </div>
+    );
 }
 
 export default MapsPage;
\ No newline at end of file
diff --git a/packages/webapp/src/components/maps-page/maps-list/index.tsx b/packages/webapp/src/components/maps-page/maps-list/index.tsx
index 56417edc..108fcea1 100644
--- a/packages/webapp/src/components/maps-page/maps-list/index.tsx
+++ b/packages/webapp/src/components/maps-page/maps-list/index.tsx
@@ -1,7 +1,7 @@
-import React, { useEffect } from 'react'
-import { StyledTableCell } from './styled';
+import React from 'react'
+import { useStyles } from './styled';
 
-import { createStyles, makeStyles, Theme, ThemeProvider } from '@material-ui/core/styles';
+import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
 import Table from '@material-ui/core/Table';
 import TableBody from '@material-ui/core/TableBody';
 import TableCell from '@material-ui/core/TableCell';
@@ -23,10 +23,11 @@ import MoreHorizIcon from '@material-ui/icons/MoreHoriz';
 import { CSSProperties } from 'react';
 import { useSelector } from 'react-redux';
 import { activeInstance } from '../../../reducers/serviceSlice';
-import { useQuery } from 'react-query';
+import { useMutation, useQuery, useQueryClient } from 'react-query';
 import { ErrorInfo, MapInfo, Service } from '../../../services/Service';
 import ActionChooser, { ActionType } from '../action-chooser';
-import ActionDispatcher from '../action-dispatcher';
+import ActionDispatcher, { handleOnMutationSuccess } from '../action-dispatcher';
+import { Link } from '@material-ui/core';
 
 
 
@@ -64,7 +65,7 @@ function stableSort<T>(array: T[], comparator: (a: T, b: T) => number) {
 interface HeadCell {
   disablePadding: boolean;
   id: keyof MapInfo;
-  label: string;
+  label?: string;
   numeric: boolean;
   style: CSSProperties;
 }
@@ -72,7 +73,7 @@ interface HeadCell {
 const headCells: HeadCell[] = [
   { id: 'starred', numeric: false, disablePadding: false, label: '', style: { width: '20px', padding: '0px' } },
   { id: 'name', numeric: false, disablePadding: true, label: 'Name', style: {} },
-  { id: 'labels', numeric: false, disablePadding: true, label: 'Labels', style: {} },
+  { id: 'labels', numeric: false, disablePadding: true, style: {} },
   { id: 'creator', numeric: false, disablePadding: false, label: 'Creator', style: {} },
   { id: 'modified', numeric: true, disablePadding: false, label: 'Modified', style: { width: '50px' } }
 ];
@@ -96,9 +97,8 @@ function EnhancedTableHead(props: EnhancedTableProps) {
 
   return (
     <TableHead>
-
       <TableRow>
-        <TableCell padding='checkbox' key='select' style={{ width: '20px' }}>
+        <TableCell padding='checkbox' key='select' style={{ width: '20px' }} className={classes.headerCell}>
           <Checkbox
             indeterminate={numSelected > 0 && numSelected < rowCount}
             checked={rowCount > 0 && numSelected === rowCount}
@@ -108,11 +108,12 @@ function EnhancedTableHead(props: EnhancedTableProps) {
           />
         </TableCell>
 
-        {headCells.map((headCell) => (
-          <TableCell
+        {headCells.map((headCell) => {
+          return headCell.label ? (<TableCell
             key={headCell.id}
             sortDirection={orderBy === headCell.id ? order : false}
             style={headCell.style}
+            className={classes.headerCell}
           >
             <TableSortLabel
               active={orderBy === headCell.id}
@@ -125,11 +126,10 @@ function EnhancedTableHead(props: EnhancedTableProps) {
                 </span>
               ) : null}
             </TableSortLabel>
-          </TableCell>
-        ))}
-        <TableCell style={{ width: '20px', padding: '0px' }} key='actions'>
-          <TableSortLabel>""</TableSortLabel>
-        </TableCell>
+          </TableCell>) : (<TableCell className={classes.headerCell} key={headCell.id}> </TableCell>)
+        }
+        )}
+        <TableCell style={{ width: '20px', padding: '0px' }} key='actions' className={classes.headerCell}></TableCell>
       </TableRow>
     </TableHead>
   );
@@ -163,7 +163,7 @@ const EnhancedTableToolbar = (props: EnhancedTableToolbarProps) => {
         </Typography>
       ) : (
           <Typography className={classes.title} variant="h6" id="tableTitle" component="div">
-            Nutrition
+            All
           </Typography>
         )}
       {numSelected > 0 ? (
@@ -183,32 +183,6 @@ const EnhancedTableToolbar = (props: EnhancedTableToolbarProps) => {
   );
 };
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      width: '100%',
-    },
-    paper: {
-      width: '100%',
-      marginBottom: theme.spacing(2),
-    },
-    table: {
-      minWidth: 750,
-      border: 0,
-    },
-    visuallyHidden: {
-      border: 0,
-      clip: 'rect(0 0 0 0)',
-      height: 1,
-      margin: -1,
-      overflow: 'hidden',
-      padding: 0,
-      position: 'absolute',
-      top: 20,
-      width: 1,
-    },
-  }),
-);
 
 type ActionPanelState = {
   el: HTMLElement | undefined,
@@ -295,16 +269,38 @@ export const MapsList = () => {
     };
   };
 
+  const queryClient = useQueryClient();
+
+  const starredMultation = useMutation<void, ErrorInfo, number>((id: number) => {
+    return service.changeStarred(id);
+  },
+    {
+      onSuccess: () => {
+        queryClient.invalidateQueries('maps');
+      },
+      onError: (error) => {
+        // setError(error);
+      }
+    }
+  );
+
+  const handleStarred = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, id: number) => {
+    event.stopPropagation();
+
+    event.preventDefault();
+    starredMultation.mutate(id);
+  }
+
   const handleActionMenuClose = (action: ActionType): void => {
     if (action) {
       const mapId = activeRowAction?.mapId;
 
-      setActiveRowAction(undefined);
       setActiveDialog({
         actionType: action as ActionType,
         mapId: mapId as number
       });
     }
+    setActiveRowAction(undefined);
   };
 
   const isSelected = (id: number) => selected.indexOf(id) !== -1;
@@ -313,14 +309,14 @@ export const MapsList = () => {
 
   return (
     <div className={classes.root}>
-      <Paper className={classes.paper}>
+      <Paper className={classes.paper} elevation={0}>
         <EnhancedTableToolbar numSelected={selected.length} />
+
         <TableContainer>
           <Table
             className={classes.table}
             aria-labelledby="tableTitle"
-            size={'small'}
-            aria-label="sticky table"
+            size="small"
             stickyHeader
           >
             <EnhancedTableHead
@@ -332,6 +328,7 @@ export const MapsList = () => {
               onRequestSort={handleRequestSort}
               rowCount={mapsInfo.length}
             />
+
             <TableBody>
               {isLoading ? (<TableRow></TableRow>) : stableSort(mapsInfo, getComparator(order, orderBy))
                 .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
@@ -350,35 +347,41 @@ export const MapsList = () => {
                       selected={isItemSelected}
                     >
 
-                      <StyledTableCell padding="checkbox">
+                      <TableCell padding="checkbox">
                         <Checkbox
                           checked={isItemSelected}
                           inputProps={{ 'aria-labelledby': String(labelId) }}
-                          size="small"
-                        />
-                      </StyledTableCell>
+                          size="small" />
+                      </TableCell>
 
-                      <StyledTableCell>
+                      <TableCell>
                         <Tooltip title="Starred">
-                          <IconButton aria-label="Starred" size="small" onClick={(e) => { alert("") }}>
+                          <IconButton aria-label="Starred" size="small" onClick={(e) => handleStarred(e, row.id)}>
                             <StarRateRoundedIcon color="action" style={{ color: row.starred ? 'yellow' : 'gray' }} />
                           </IconButton>
                         </Tooltip>
-                      </StyledTableCell>
+                      </TableCell>
 
-                      <StyledTableCell>{row.name}</StyledTableCell>
-                      <StyledTableCell>{row.labels}</StyledTableCell>
-                      <StyledTableCell>{row.creator}</StyledTableCell>
-                      <StyledTableCell>{row.modified}</StyledTableCell>
+                      <Tooltip title="Open for edition" placement="bottom-start">
+                        <TableCell>
+                          <Link href={`c/maps/${row.id}/edit`} color="textPrimary" underline="always">
+                            {row.name}
+                          </Link>
+                        </TableCell>
+                      </Tooltip>
 
-                      <StyledTableCell>
+                      <TableCell>{row.labels}</TableCell>
+                      <TableCell>{row.creator}</TableCell>
+                      <TableCell>{row.modified}</TableCell>
+
+                      <TableCell>
                         <Tooltip title="Others">
                           <IconButton aria-label="Others" size="small" onClick={handleActionClick(row.id)}>
                             <MoreHorizIcon color="action" />
                           </IconButton>
                         </Tooltip>
                         <ActionChooser anchor={activeRowAction?.el} onClose={handleActionMenuClose} />
-                      </StyledTableCell>
+                      </TableCell>
                     </TableRow>
                   );
                 })}
@@ -403,6 +406,6 @@ export const MapsList = () => {
 
       {/* Action Dialog */}
       <ActionDispatcher action={activeDialog?.actionType} onClose={() => setActiveDialog(undefined)} mapId={activeDialog ? activeDialog.mapId : -1} />
-    </div>
+    </div >
   );
 }
\ No newline at end of file
diff --git a/packages/webapp/src/components/maps-page/maps-list/styled.ts b/packages/webapp/src/components/maps-page/maps-list/styled.ts
index 60ba11d1..b2f4896b 100644
--- a/packages/webapp/src/components/maps-page/maps-list/styled.ts
+++ b/packages/webapp/src/components/maps-page/maps-list/styled.ts
@@ -1,18 +1,50 @@
 import { MenuItem, TableCell } from '@material-ui/core';
-import { withStyles } from '@material-ui/core/styles';
+import { createStyles, makeStyles, Theme, withStyles } from '@material-ui/core/styles';
 
-export const StyledTableCell = withStyles({
+export const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
     root: {
-        color: 'black',
-        padding: '0px',
-        cursor: 'pointer'
-    }
-})(TableCell);
+      width: '100%',
+    },
+    paper: {
+      width: '100%',
+      marginBottom: theme.spacing(2),
+    },
+    table: {
+      minWidth: 750,
+      border: 0,
+      '& tr:nth-child(even)': {
+        background: 'white'
+      },
+      '& tr:nth-child(odd)':
+      {
+        background: 'rgba(221, 221, 221, 0.35)'
+      } 
+    },
+    headerCell: {
+      background: 'white',
+      fontWeight: 'bold',
+      color: 'rgba(0, 0, 0, 0.44)'
+    },
+    visuallyHidden: {
+      border: 0,
+      clip: 'rect(0 0 0 0)',
+      height: 1,
+      margin: -1,
+      overflow: 'hidden',
+      padding: 0,
+      position: 'absolute',
+      top: 20,
+      width: 1,
+    },
+  }),
+);
 
-export const StyledMenuItem = withStyles({
-    root: {
-        width: '300px',
-        padding: '10px 20px',
-        marging: '0px 20px'
-    }
-})(MenuItem)
+// export const StyledTableCell = withStyles({
+//   root: {
+//     color: 'black',
+//     padding: '0px',
+//     cursor: 'pointer',
+//     border: '0'
+//   }
+// })(TableCell);
\ No newline at end of file
diff --git a/packages/webapp/src/components/maps-page/style.ts b/packages/webapp/src/components/maps-page/style.ts
index 60d714b9..9da860ef 100644
--- a/packages/webapp/src/components/maps-page/style.ts
+++ b/packages/webapp/src/components/maps-page/style.ts
@@ -28,6 +28,17 @@ export const useStyles = makeStyles((theme: Theme) =>
         menuButton: {
             marginRight: 36,
         },
+        newMapButton: {
+            marginRight: 10,
+        },
+        importButton: {
+            marginRight: 10,
+        },
+        rightButtonGroup: {
+            marginRight: 10,
+            flexGrow: 10,
+            textAlign: 'right'
+        },
         hide: {
             display: 'none',
         },
@@ -66,12 +77,11 @@ export const useStyles = makeStyles((theme: Theme) =>
         content: {
             flexGrow: 1,
             padding: theme.spacing(3),
-        },
-        listItemText: {
         }
     }),
 );
 
+
 export const ListItemTextStyled = withStyles({
     root:
     {
diff --git a/packages/webapp/src/services/Service.ts b/packages/webapp/src/services/Service.ts
index 94336cfd..5b2345c0 100644
--- a/packages/webapp/src/services/Service.ts
+++ b/packages/webapp/src/services/Service.ts
@@ -42,6 +42,7 @@ interface Service {
     renameMap(id: number, basicInfo: BasicMapInfo): Promise<void>;
     duplicateMap(id: number, basicInfo: BasicMapInfo): Promise<void>;
     loadMapInfo(id: number): Promise<BasicMapInfo>;
+    changeStarred(id: number): Promise<void>;
 }
 
 class MockService implements Service {
@@ -71,6 +72,17 @@ class MockService implements Service {
         ];
     }
 
+    changeStarred(id: number): Promise<void> {
+        const mapInfo = this.maps.find(m => m.id == id);
+        if (!mapInfo) {
+            console.log(`Could not find the map iwth id ${id}`);
+            return Promise.reject();
+        }
+        const newStarredValue = !mapInfo?.starred;
+        mapInfo.starred = newStarredValue;
+
+        return Promise.resolve();
+    }
 
     loadMapInfo(id: number): Promise<BasicMapInfo> {
         return Promise.resolve({ name: 'My Map', description: 'My Description' });
@@ -100,6 +112,7 @@ class MockService implements Service {
             })
         };
     }
+   
     duplicateMap(id: number, basicInfo: BasicMapInfo): Promise<void> {
 
         const exists = this.maps.find(m => m.name == basicInfo.name) != undefined;
diff --git a/packages/webapp/src/theme/index.ts b/packages/webapp/src/theme/index.ts
index bff17da9..a78c878f 100644
--- a/packages/webapp/src/theme/index.ts
+++ b/packages/webapp/src/theme/index.ts
@@ -12,6 +12,13 @@ const GlobalStyle = createGlobalStyle`
 
 const theme = createMuiTheme({
     overrides: {
+        MuiCssBaseline: {
+            '@global': {
+                body: {
+                  backgroundColor: 'white',
+                },
+              },
+        },
         MuiOutlinedInput: {
             root: {
                 height: '53px',