diff --git a/packages/webapp/src/app.tsx b/packages/webapp/src/app.tsx
index c33e216d..cbd5de82 100644
--- a/packages/webapp/src/app.tsx
+++ b/packages/webapp/src/app.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { IntlProvider } from 'react-intl';
 import { Route, Switch, Redirect, BrowserRouter as Router } from 'react-router-dom';
 
-import { GlobalStyle } from './theme/global-style';
+import { GlobalStyle } from './theme';
 import RegistrationSuccessPage from './components/registration-success-page';
 import ForgotPasswordSuccessPage from './components/forgot-password-success-page';
 import RegistationPage from './components/registration-page';
@@ -13,6 +13,9 @@ import store from "./store";
 import { ForgotPasswordPage } from './components/forgot-password-page';
 import { Provider } from 'react-redux';
 import { QueryClient, QueryClientProvider } from 'react-query';
+import { CssBaseline, ThemeProvider } from '@material-ui/core';
+import { theme } from './theme'
+
 
 function loadLocaleData(language: string) {
   switch (language) {
@@ -43,28 +46,31 @@ const App = () => {
 
   return messages ? (
     <Provider store={store}>
+      <GlobalStyle />
       <QueryClientProvider client={queryClient}>
         <IntlProvider locale={locale} defaultLocale='en' messages={messages}>
-          <GlobalStyle />
-          <Router>
-            <Switch>
-              <Route exact path="/">
-                <Redirect to="/c/login" />
-              </Route>
-              <Route path="/c/login" component={LoginPage} />
-              <Route path="/c/registration">
-                <RegistationPage />
-              </Route>
-              <Route path="/c/registration-success" component={RegistrationSuccessPage} />
-              <Route path="/c/forgot-password">
-                <ForgotPasswordPage />
-              </Route>
-              <Route path="/c/forgot-password-success" component={ForgotPasswordSuccessPage} />
-              <Route path="/c/maps/">
-                <MapsPage />
-              </Route>
-            </Switch>
-          </Router>
+          <ThemeProvider theme={theme}>
+            <CssBaseline />
+            <Router>
+              <Switch>
+                <Route exact path="/">
+                  <Redirect to="/c/login" />
+                </Route>
+                <Route path="/c/login" component={LoginPage} />
+                <Route path="/c/registration">
+                  <RegistationPage />
+                </Route>
+                <Route path="/c/registration-success" component={RegistrationSuccessPage} />
+                <Route path="/c/forgot-password">
+                  <ForgotPasswordPage />
+                </Route>
+                <Route path="/c/forgot-password-success" component={ForgotPasswordSuccessPage} />
+                <Route path="/c/maps/">
+                  <MapsPage />
+                </Route>
+              </Switch>
+            </Router>
+          </ThemeProvider>
         </IntlProvider>
       </QueryClientProvider>
     </Provider>
diff --git a/packages/webapp/src/components/forgot-password-page/index.tsx b/packages/webapp/src/components/forgot-password-page/index.tsx
index 92ecd83d..ff258a89 100644
--- a/packages/webapp/src/components/forgot-password-page/index.tsx
+++ b/packages/webapp/src/components/forgot-password-page/index.tsx
@@ -5,12 +5,14 @@ import { Service, ErrorInfo } from '../../services/Service'
 
 import Header from '../layout/header'
 import Footer from '../layout/footer'
-import { PageContent } from '../../theme/global-style'
+import { PageContent } from '../../theme'
 import { useSelector } from 'react-redux'
 import { useMutation } from 'react-query'
 import { activeInstance } from '../../reducers/serviceSlice'
 import Input from '../form/input'
 import GlobalError from '../form/global-error'
+import SubmitButton from '../form/submit-button'
+import { Typography } from '@material-ui/core'
 
 const ForgotPassword = () => {
   const [email, setEmail] = useState<string>('');
@@ -36,8 +38,13 @@ const ForgotPassword = () => {
 
   return (
     <PageContent>
-      <h1><FormattedMessage id="forgot.title" defaultMessage="Reset your password" /></h1>
-      <p><FormattedMessage id="forgot.desc" defaultMessage="We will send you an email to reset your password" /></p>
+      <Typography variant="h4" component="h1">
+        <FormattedMessage id="forgot.title" defaultMessage="Reset your password" />
+      </Typography>
+
+      <Typography>
+        <FormattedMessage id="forgot.desc" defaultMessage="We will send you an email to reset your password" />
+      </Typography>
 
       <GlobalError error={error} />
 
@@ -45,7 +52,7 @@ const ForgotPassword = () => {
         <Input type="email" name="email" label={{ id: "forgot.email", defaultMessage: "Email" }}
           autoComplete="email" onChange={e => setEmail(e.target.value)} />
 
-        <input type="submit" value={intl.formatMessage({ id: "forgot.register", defaultMessage: "Send recovery link" })} />
+        <SubmitButton value={intl.formatMessage({ id: "forgot.register", defaultMessage: "Send recovery link" })} />
       </form>
     </PageContent>
   );
diff --git a/packages/webapp/src/components/forgot-password-success-page/index.tsx b/packages/webapp/src/components/forgot-password-success-page/index.tsx
index af035446..ab1449c4 100644
--- a/packages/webapp/src/components/forgot-password-success-page/index.tsx
+++ b/packages/webapp/src/components/forgot-password-success-page/index.tsx
@@ -1,10 +1,11 @@
 import React, { useEffect } from 'react'
 import { FormattedMessage } from 'react-intl'
-
-import { PageContent } from '../../theme/global-style';
-
+import { PageContent } from '../../theme';
 import Header, { SignInButton } from '../layout/header'
 import Footer from '../layout/footer'
+import { Button, Typography } from '@material-ui/core';
+import { Link as RouterLink} from 'react-router-dom'
+
 
 const ForgotPasswordSuccessPage = () => {
   useEffect(() => {
@@ -15,14 +16,18 @@ const ForgotPasswordSuccessPage = () => {
     <div>
       <Header type='none' />
       <PageContent>
-        <h1>
+        <Typography variant="h4" component="h1">
           <FormattedMessage id="forgot.success.title" defaultMessage="Your temporal password has been sent" />
-        </h1>
-        <p>
-          <FormattedMessage id="forgot.success.desc" defaultMessage="We've sent you an email that will allow you to reset your password. Please check your email now." />
-        </p>
+        </Typography>
+
+        <Typography paragraph>
+          <FormattedMessage id="forgot.success.desc" defaultMessage="We've sent you an email that will allow you to reset your password. Please check your email now." />
+        </Typography>
+
+        <Button color="primary" size="medium" variant="contained" component={RouterLink} to="/c/login" disableElevation={true}>
+          <FormattedMessage id="login.signin" defaultMessage="Sign In" />
+        </Button>
 
-        <SignInButton style='style1' />
       </PageContent>
       <Footer />
     </div>
diff --git a/packages/webapp/src/components/form/input/index.tsx b/packages/webapp/src/components/form/input/index.tsx
index 23015de5..2434768f 100644
--- a/packages/webapp/src/components/form/input/index.tsx
+++ b/packages/webapp/src/components/form/input/index.tsx
@@ -1,8 +1,7 @@
-import { FormControl, TextField } from "@material-ui/core";
+import { TextField } from "@material-ui/core";
 import React, { ChangeEvent } from "react";
 import { MessageDescriptor, useIntl } from "react-intl";
 import { ErrorInfo } from "../../../services/Service";
-import { StyledTextField } from "./styles";
 
 type InputProps = {
     name: string;
@@ -28,7 +27,7 @@ const Input = (props: InputProps) => {
     const fullWidth = props.fullWidth != undefined ? props.required : true;
 
     return (
-        <StyledTextField name={name} type={props.type} label={intl.formatMessage(props.label)}
+        <TextField name={name} type={props.type} label={intl.formatMessage(props.label)}
             value={value} onChange={onChange}
             error={fieldError} helperText={fieldError}
             variant="outlined" required={required} fullWidth={fullWidth} margin="dense"/>
diff --git a/packages/webapp/src/components/form/input/styles.ts b/packages/webapp/src/components/form/input/styles.ts
deleted file mode 100644
index 207799f4..00000000
--- a/packages/webapp/src/components/form/input/styles.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { TextField, withStyles } from "@material-ui/core";
-
-export const StyledTextField = withStyles({
-    root:
-    {
-        '& label.Mui-focused': {
-            color: '#f9a826',
-        },
-        '& .MuiOutlinedInput-root': {
-            height: '53px',
-            borderRadius: '9px',
-            fontSize: '16px',
-            '& fieldset': {
-                border: 'solid 1px #ffcb66',
-            },
-            '&:hover fieldset': {
-                borderColor: '#f9a826',
-            },
-            '&.Mui-focused fieldset': {
-                borderColor: '#f9a826'
-            },
-        },
-    },
-})(TextField);
diff --git a/packages/webapp/src/components/form/submit-button/index.tsx b/packages/webapp/src/components/form/submit-button/index.tsx
index e0e129b9..54e43c83 100644
--- a/packages/webapp/src/components/form/submit-button/index.tsx
+++ b/packages/webapp/src/components/form/submit-button/index.tsx
@@ -1,3 +1,4 @@
+import { Button } from '@material-ui/core';
 import React, { useState, useEffect } from 'react'
 import { useIntl } from 'react-intl'
 
@@ -15,7 +16,11 @@ const SubmitButton = (props: SubmitButton) => {
     }
     const [value, setValue] = useState(valueTxt);
     return (
-        <input type="submit" disabled={disabled} value={value} />
+        <Button color="primary" size="medium" variant="contained" type="submit"
+            disableElevation={true} disabled={disabled} 
+            style={{width: '330px', height: '53px', padding: '0px 20px', margin: '7px 0px',fontSize: '18px' }} >
+            {value}
+        </Button>
     );
 }
 
diff --git a/packages/webapp/src/components/layout/header/index.tsx b/packages/webapp/src/components/layout/header/index.tsx
index 58783a8c..e468d77c 100644
--- a/packages/webapp/src/components/layout/header/index.tsx
+++ b/packages/webapp/src/components/layout/header/index.tsx
@@ -1,8 +1,9 @@
-import { StyledNav, StyledDiv,Logo } from './styled';
+import { StyledNav, StyledDiv, Logo } from './styled';
 
 import React from 'react'
 import { FormattedMessage } from 'react-intl'
 import { Link } from 'react-router-dom'
+import { Button } from '@material-ui/core';
 
 const logo = require('../../../images/header-logo.png')
 
@@ -49,23 +50,20 @@ class Header extends React.Component<HeaderProps, HeaderProps> {
 }
 
 interface ButtonProps {
-  style?: 'style1' | 'style2' | 'style3';
   className?: string;
 }
 
 const SignInButton = (props: ButtonProps) => {
-  const style = props.style ? props.style : 'style1';
   return (
-    <span className={`button-${style} ${props.className}`}>
-      <Link to="/c/login"><FormattedMessage id="login.signin" defaultMessage="Sign In" /></Link>
+    <span className={`${props.className}`}>
+      <Button color="primary" size="medium" variant="outlined" component={Link} to="/c/login"><FormattedMessage id="login.signin" defaultMessage="Sign In" /></Button>
     </span>);
 }
 
 const SignUpButton = (props: ButtonProps) => {
-  const style = props.style ? props.style : 'style1';
   return (
-    <span className={`button-${style} ${props.className}`}>
-      <Link to="/c/registration"><FormattedMessage id="login.signup" defaultMessage="Sign Up" /></Link>
+    <span className={`${props.className}`}>
+      <Button color="primary" size="medium" variant="outlined" component={Link} to="/c/registration"><FormattedMessage id="login.signup" defaultMessage="Sign Up" /></Button>
     </span>);
 }
 
diff --git a/packages/webapp/src/components/login-page/index.tsx b/packages/webapp/src/components/login-page/index.tsx
index 34638ade..170e36df 100644
--- a/packages/webapp/src/components/login-page/index.tsx
+++ b/packages/webapp/src/components/login-page/index.tsx
@@ -1,14 +1,14 @@
-import React, { useEffect } from 'react'
-import { FormattedMessage, useIntl } from 'react-intl'
-import { Link } from 'react-router-dom'
+import React, { useEffect } from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { Link as RouterLink} from 'react-router-dom'
 
-import { PageContent } from '../../theme/global-style';
+import { PageContent } from '../../theme';
 import Header from '../layout/header'
 import Footer from '../layout/footer'
 import SubmitButton from '../form/submit-button'
 import Input from '../form/input';
 import GlobalError from '../form/global-error';
-import { FormControl } from '@material-ui/core';
+import { FormControl, Link, Typography } from '@material-ui/core';
 
 
 const ConfigStatusMessage = (props: any) => {
@@ -56,8 +56,13 @@ const LoginPage = () => {
       <Header type='only-signup' />
 
       <PageContent>
-        <h1><FormattedMessage id="login.title" defaultMessage="Welcome" /></h1>
-        <p><FormattedMessage id="login.desc" defaultMessage="Log into your account" /></p>
+        <Typography variant="h4" component="h1">
+          <FormattedMessage id="login.title" defaultMessage="Welcome" />
+        </Typography>
+
+        <Typography paragraph>
+          <FormattedMessage id="login.desc" defaultMessage="Log into your account" />
+        </Typography>
 
         <LoginError />
 
@@ -73,7 +78,7 @@ const LoginPage = () => {
           </form>
         </FormControl>
 
-        <Link to="/c/forgot-password"><FormattedMessage id="login.forgotpwd" defaultMessage="Forgot Password ?" /></Link>
+        <Link component={RouterLink} to="/c/forgot-password"><FormattedMessage id="login.forgotpwd" defaultMessage="Forgot Password ?" /></Link>
         <ConfigStatusMessage />
 
       </PageContent>
diff --git a/packages/webapp/src/components/login-page/styled.ts b/packages/webapp/src/components/login-page/styled.ts
deleted file mode 100644
index a882f637..00000000
--- a/packages/webapp/src/components/login-page/styled.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import styled from 'styled-components';
-
-
-export const StyledNav = styled.div`
-.db-warn-msg {
-    margin-top: 30px;
-    width: 100%;
-}
-
-.db-warn-msg p {
-    margin: 0 auto;
-    width: 500px;
-    background-color: #e97450;
-    font-size: 15px;
-    color: white;
-    padding: 15px 30px;
-    border-radius: 10px;
-}`
-  
\ No newline at end of file
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 c26817cc..add511bf 100644
--- a/packages/webapp/src/components/maps-page/action-chooser/index.tsx
+++ b/packages/webapp/src/components/maps-page/action-chooser/index.tsx
@@ -9,7 +9,7 @@ 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 '../styled';
+import { StyledMenuItem } from '../maps-list/styled';
 import { FormattedMessage } from 'react-intl';
 
 export type ActionType = 'open' | 'share' | 'delete' | 'info' | 'duplicate' | 'export' | 'rename' | 'print' | 'info' | 'publish' | undefined;
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 83afc8e8..4635f654 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,8 +1,8 @@
 import React from "react";
-import { DialogActions, DialogContentText, DialogTitle } from "@material-ui/core";
+import { Button, DialogContentText, DialogTitle } from "@material-ui/core";
 import { FormattedMessage, MessageDescriptor, useIntl } from "react-intl";
 import { ErrorInfo } from "../../../../services/Service";
-import { ButtonStyled, StyledDialog, StyledDialogActions, StyledDialogContent, StyledDialogTitle } from "./style";
+import { StyledDialog, StyledDialogActions, StyledDialogContent, StyledDialogTitle } from "./style";
 import GlobalError from "../../../form/global-error";
 
 export type DialogProps = {
@@ -44,14 +44,14 @@ const BaseDialog = (props: DialogProps) => {
                     </StyledDialogContent>
 
                     <StyledDialogActions>
+                        <Button color="primary" size="medium" onClick={handleOnClose} >
+                            {handleOnSubmit ? (<FormattedMessage id="action.cancel-button" defaultMessage="Cancel" />) : (<FormattedMessage id="action.close-button" defaultMessage="Close" />)}
+                        </Button>
                         {handleOnSubmit ? (
-                            <ButtonStyled color="primary" size="medium" variant="outlined" type="submit">
+                            <Button color="primary" size="medium" variant="contained" type="submit" disableElevation={true}>
                                 {intl.formatMessage(props.title)}
-                            </ButtonStyled>) : null
+                            </Button>) : null
                         }
-                        <ButtonStyled color="secondary" size="medium" variant="outlined" autoFocus onClick={handleOnClose}>
-                            {handleOnSubmit ? (<FormattedMessage id="action.cancel-button" defaultMessage="Cancel" />) : (<FormattedMessage id="action.close-button" defaultMessage="Close" />)};
-                        </ButtonStyled>
                     </StyledDialogActions>
                 </form>
             </StyledDialog>
diff --git a/packages/webapp/src/components/maps-page/action-dispatcher/action-dialog/style.ts b/packages/webapp/src/components/maps-page/action-dispatcher/action-dialog/style.ts
index 4edeadd9..b62ad95c 100644
--- a/packages/webapp/src/components/maps-page/action-dispatcher/action-dialog/style.ts
+++ b/packages/webapp/src/components/maps-page/action-dispatcher/action-dialog/style.ts
@@ -1,4 +1,4 @@
-import { Button, Dialog, DialogActions, DialogContent, DialogTitle, TableCell, withStyles } from "@material-ui/core";
+import { Dialog, DialogActions, DialogContent, DialogTitle, withStyles } from "@material-ui/core";
 
 export const StyledDialogContent = withStyles({
     root: {
@@ -18,39 +18,6 @@ export const StyledDialogActions = withStyles({
     }
 })(DialogActions);
 
-export const ButtonStyled = withStyles({
-    root: {
-        textTransform: 'none',
-        fontSize: '15px',
-        fontWeight: 600,
-        width: '196px',
-        padding: '7px 64px 8px 64px',
-        '&:hover': {
-            border: '0'
-        },
-        borderRadius: '9px'
-    },
-    outlinedPrimary: {
-        border: '0',
-        background: '#ffa800',
-        color: 'white',
-        '&:hover': {
-            border: '0',
-            background: 'rgba(249, 168, 38, 0.91)'
-        }
-    },
-    outlinedSecondary: {
-        background: '#white',
-        color: '#ffa800',
-        border: '1px solid #ffa800',
-        '&:hover': {
-            border: '1px solid rgba(249, 168, 38, 0.91)',
-            background: 'white'
-        }
-    }
-})(Button)
-
-
 export const StyledDialog = withStyles({
     root: {
         borderRadius: '9px'
diff --git a/packages/webapp/src/components/maps-page/index.tsx b/packages/webapp/src/components/maps-page/index.tsx
index 9b150fb0..9ddbc90d 100644
--- a/packages/webapp/src/components/maps-page/index.tsx
+++ b/packages/webapp/src/components/maps-page/index.tsx
@@ -1,439 +1,150 @@
-import React, { useEffect } from 'react'
-import { PageContainer, MapsListArea, HeaderArea, StyledTableCell } from './styled';
-
-import { createStyles, makeStyles, Theme, ThemeProvider } 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';
-import TableContainer from '@material-ui/core/TableContainer';
-import TableHead from '@material-ui/core/TableHead';
-import TablePagination from '@material-ui/core/TablePagination';
-import TableRow from '@material-ui/core/TableRow';
-import TableSortLabel from '@material-ui/core/TableSortLabel';
+import React, { useEffect } from 'react';
+import clsx from 'clsx';
+import Drawer from '@material-ui/core/Drawer';
+import AppBar from '@material-ui/core/AppBar';
 import Toolbar from '@material-ui/core/Toolbar';
-import Typography from '@material-ui/core/Typography';
-import Paper from '@material-ui/core/Paper';
-import Checkbox from '@material-ui/core/Checkbox';
+import List from '@material-ui/core/List';
+import Divider from '@material-ui/core/Divider';
 import IconButton from '@material-ui/core/IconButton';
-import Tooltip from '@material-ui/core/Tooltip';
-import DeleteIcon from '@material-ui/icons/Delete';
-import FilterListIcon from '@material-ui/icons/FilterList';
-import StarRateRoundedIcon from '@material-ui/icons/StarRateRounded';
-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 { ErrorInfo, MapInfo, Service } from '../../services/Service';
-import { theme } from '../../theme/global-style';
-import { CssBaseline } from '@material-ui/core';
-import ActionChooser, { ActionType } from './action-chooser';
-import ActionDispatcher from './action-dispatcher';
-import NavPanel from './nav-panel';
+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 InboxTwoToneIcon from '@material-ui/icons/InboxTwoTone';
+import { Button, ListItemSecondaryAction } from '@material-ui/core';
 
+type FilterType = 'public' | 'all' | 'starred' | 'shared' | 'label' | 'owned'
 
-
-function descendingComparator<T>(a: T, b: T, orderBy: keyof T) {
-  if (b[orderBy] < a[orderBy]) {
-    return -1;
-  }
-  if (b[orderBy] > a[orderBy]) {
-    return 1;
-  }
-  return 0;
+interface Filter {
+    type: FilterType
 }
 
-type Order = 'asc' | 'desc';
-
-function getComparator<Key extends keyof any>(
-  order: Order,
-  orderBy: Key,
-): (a: { [key in Key]: number | string | boolean | string[] | undefined }, b: { [key in Key]: number | string | string[] | boolean }) => number {
-  return order === 'desc'
-    ? (a, b) => descendingComparator(a, b, orderBy)
-    : (a, b) => -descendingComparator(a, b, orderBy);
+interface LabelFinter extends Filter {
+    label: string
 }
 
-function stableSort<T>(array: T[], comparator: (a: T, b: T) => number) {
-  const stabilizedThis = array.map((el, index) => [el, index] as [T, number]);
-  stabilizedThis.sort((a, b) => {
-    const order = comparator(a[0], b[0]);
-    if (order !== 0) return order;
-    return a[1] - b[1];
-  });
-  return stabilizedThis.map((el) => el[0]);
-}
+const MapsPage = (props: any) => {
+    const classes = useStyles();
+    const [open, setOpen] = React.useState(true);
 
-interface HeadCell {
-  disablePadding: boolean;
-  id: keyof MapInfo;
-  label: string;
-  numeric: boolean;
-  style: CSSProperties;
-}
-
-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: 'creator', numeric: false, disablePadding: false, label: 'Creator', style: {} },
-  { id: 'modified', numeric: true, disablePadding: false, label: 'Modified', style: { width: '50px' } }
-];
-
-interface EnhancedTableProps {
-  classes: ReturnType<typeof useStyles>;
-  numSelected: number;
-  onRequestSort: (event: React.MouseEvent<unknown>, property: keyof MapInfo) => void;
-  onSelectAllClick: (event: React.ChangeEvent<HTMLInputElement>) => void;
-  order: Order;
-  orderBy: string;
-  rowCount: number;
-}
-
-function EnhancedTableHead(props: EnhancedTableProps) {
-  const { classes, onSelectAllClick, order, orderBy, numSelected, rowCount, onRequestSort } = props;
-
-  const createSortHandler = (property: keyof MapInfo) => (event: React.MouseEvent<unknown>) => {
-    onRequestSort(event, property);
-  };
-
-  return (
-    <TableHead>
-
-      <TableRow>
-        <TableCell padding='checkbox' key='select' style={{ width: '20px' }}>
-          <Checkbox
-            indeterminate={numSelected > 0 && numSelected < rowCount}
-            checked={rowCount > 0 && numSelected === rowCount}
-            onChange={onSelectAllClick}
-            size='small'
-            inputProps={{ 'aria-label': 'select all desserts' }}
-          />
-        </TableCell>
-
-        {headCells.map((headCell) => (
-          <TableCell
-            key={headCell.id}
-            sortDirection={orderBy === headCell.id ? order : false}
-            style={headCell.style}
-          >
-            <TableSortLabel
-              active={orderBy === headCell.id}
-              direction={orderBy === headCell.id ? order : 'asc'}
-              onClick={createSortHandler(headCell.id)}>
-              {headCell.label}
-              {orderBy === headCell.id ? (
-                <span className={classes.visuallyHidden}>
-                  {order === 'desc' ? 'sorted descending' : 'sorted ascending'}
-                </span>
-              ) : null}
-            </TableSortLabel>
-          </TableCell>
-        ))}
-        <TableCell style={{ width: '20px', padding: '0px' }} key='actions'>
-          <TableSortLabel>""</TableSortLabel>
-        </TableCell>
-      </TableRow>
-    </TableHead>
-  );
-}
-
-const useToolbarStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      paddingLeft: theme.spacing(2),
-      paddingRight: theme.spacing(1),
-    },
-    title: {
-      flex: '1 1 100%',
-    },
-  }),
-);
-
-interface EnhancedTableToolbarProps {
-  numSelected: number;
-}
-
-const EnhancedTableToolbar = (props: EnhancedTableToolbarProps) => {
-  const classes = useToolbarStyles();
-  const { numSelected } = props;
-
-  return (
-    <Toolbar>
-      {numSelected > 0 ? (
-        <Typography className={classes.title} color="inherit" variant="subtitle1" component="div">
-          {numSelected} selected
-        </Typography>
-      ) : (
-          <Typography className={classes.title} variant="h6" id="tableTitle" component="div">
-            Nutrition
-          </Typography>
-        )}
-      {numSelected > 0 ? (
-        <Tooltip title="Delete">
-          <IconButton aria-label="delete">
-            <DeleteIcon />
-          </IconButton>
-        </Tooltip>
-      ) : (
-          <Tooltip title="Filter list">
-            <IconButton aria-label="filter list">
-              <FilterListIcon />
-            </IconButton>
-          </Tooltip>
-        )}
-    </Toolbar>
-  );
-};
-
-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,
-  mapId: number
-}
-
-const EnhancedTable = () => {
-  const classes = useStyles();
-  const [order, setOrder] = React.useState<Order>('asc');
-  const [orderBy, setOrderBy] = React.useState<keyof MapInfo>('modified');
-  const [selected, setSelected] = React.useState<number[]>([]);
-  const [page, setPage] = React.useState(0);
-  const [rowsPerPage, setRowsPerPage] = React.useState(5);
-  const service: Service = useSelector(activeInstance);
-
-  const { isLoading, error, data } = useQuery<unknown, ErrorInfo, MapInfo[]>('maps', async () => {
-
-    const result = await service.fetchAllMaps();
-    return result;
-  });
-  const mapsInfo: MapInfo[] = data ? data : [];
-
-
-  const [activeRowAction, setActiveRowAction] = React.useState<ActionPanelState | undefined>(undefined);
-  type ActiveDialog = {
-    actionType: ActionType;
-    mapId: number
-  };
-
-  const [activeDialog, setActiveDialog] = React.useState<ActiveDialog | undefined>(undefined);
-  const handleRequestSort = (event: React.MouseEvent<unknown>, property: keyof MapInfo) => {
-    const isAsc = orderBy === property && order === 'asc';
-    setOrder(isAsc ? 'desc' : 'asc');
-    setOrderBy(property);
-  };
-
-  const handleSelectAllClick = (event: React.ChangeEvent<HTMLInputElement>): void => {
-    if (event.target.checked) {
-      const newSelecteds = mapsInfo.map((n) => n.id);
-      setSelected(newSelecteds);
-      return;
-    }
-    setSelected([]);
-  };
-
-  const handleRowClick = (event: React.MouseEvent<unknown>, id: number): void => {
-    const selectedIndex = selected.indexOf(id);
-    let newSelected: number[] = [];
-
-    if (selectedIndex === -1) {
-      newSelected = newSelected.concat(selected, id);
-    } else if (selectedIndex === 0) {
-      newSelected = newSelected.concat(selected.slice(1));
-    } else if (selectedIndex === selected.length - 1) {
-      newSelected = newSelected.concat(selected.slice(0, -1));
-    } else if (selectedIndex > 0) {
-      newSelected = newSelected.concat(
-        selected.slice(0, selectedIndex),
-        selected.slice(selectedIndex + 1),
-      );
-    }
-
-    setSelected(newSelected);
-  };
-
-  const handleChangePage = (event: unknown, newPage: number) => {
-    setPage(newPage);
-  };
-
-  const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setRowsPerPage(parseInt(event.target.value, 10));
-    setPage(0);
-  };
-
-  const handleActionClick = (mapId: number): ((event: any) => void) => {
-    return (event: any): void => {
-      setActiveRowAction(
-        {
-          mapId: mapId,
-          el: event.currentTarget
-        }
-      );
-      event.stopPropagation();
+    const handleDrawerOpen = () => {
+        setOpen(true);
     };
-  };
 
-  const handleActionMenuClose = (action: ActionType): void => {
-    if (action) {
-      const mapId = activeRowAction?.mapId;
+    const handleDrawerClose = () => {
+        setOpen(false);
+    };
 
-      setActiveRowAction(undefined);
-      setActiveDialog({
-        actionType: action as ActionType,
-        mapId: mapId as number
-      });
-    }
-  };
+    useEffect(() => {
+        document.title = 'Maps | WiseMapping';
+    }, []);
 
-  const isSelected = (id: number) => selected.indexOf(id) !== -1;
 
-  const emptyRows = rowsPerPage - Math.min(rowsPerPage, mapsInfo.length - page * rowsPerPage);
+    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>
 
-  return (
-    <div className={classes.root}>
-      <Paper className={classes.paper}>
-        <EnhancedTableToolbar numSelected={selected.length} />
-        <TableContainer>
-          <Table
-            className={classes.table}
-            aria-labelledby="tableTitle"
-            size={'small'}
-            aria-label="sticky table"
-            stickyHeader
-          >
-            <EnhancedTableHead
-              classes={classes}
-              numSelected={selected.length}
-              order={order}
-              orderBy={orderBy}
-              onSelectAllClick={handleSelectAllClick}
-              onRequestSort={handleRequestSort}
-              rowCount={mapsInfo.length}
-            />
-            <TableBody>
-              {isLoading ? (<TableRow></TableRow>) : stableSort(mapsInfo, getComparator(order, orderBy))
-                .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
-                .map((row: MapInfo) => {
-                  const isItemSelected = isSelected(row.id);
-                  const labelId = row.id;
+                        <Button color="primary" size="medium" variant="contained" type="button" 
+                        disableElevation={true} startIcon={<AddTwoTone />}>
+                            New Map
+                        </Button>
+                    </Toolbar>
+                </AppBar>
 
-                  return (
-                    <TableRow
-                      hover
-                      onClick={(event: any) => handleRowClick(event, row.id)}
-                      role="checkbox"
-                      aria-checked={isItemSelected}
-                      tabIndex={-1}
-                      key={row.id}
-                      selected={isItemSelected}
-                    >
+                <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 />
 
-                      <StyledTableCell padding="checkbox">
-                        <Checkbox
-                          checked={isItemSelected}
-                          inputProps={{ 'aria-labelledby': String(labelId) }}
-                          size="small"
-                        />
-                      </StyledTableCell>
+                    <List component="nav">
 
-                      <StyledTableCell>
-                        <Tooltip title="Starred">
-                          <IconButton aria-label="Starred" size="small" onClick={(e) => { alert("") }}>
-                            <StarRateRoundedIcon color="action" style={{ color: row.starred ? 'yellow' : 'gray' }} />
-                          </IconButton>
-                        </Tooltip>
-                      </StyledTableCell>
+                        <ListItem button >
+                            <ListItemIcon>
+                                <InboxTwoToneIcon color="secondary" />
+                            </ListItemIcon>
+                            <ListItemTextStyled primary="All" />
+                        </ListItem>
 
-                      <StyledTableCell>{row.name}</StyledTableCell>
-                      <StyledTableCell>{row.labels}</StyledTableCell>
-                      <StyledTableCell>{row.creator}</StyledTableCell>
-                      <StyledTableCell>{row.modified}</StyledTableCell>
+                        <ListItem button >
+                            <ListItemIcon>
+                                <BlurCircular color="secondary" />
+                            </ListItemIcon>
+                            <ListItemTextStyled primary="Owned" />
+                        </ListItem>
 
-                      <StyledTableCell>
-                        <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>
-                    </TableRow>
-                  );
-                })}
-              {emptyRows > 0 && (
-                <TableRow style={{ height: 33 * emptyRows }}>
-                  <TableCell colSpan={6} />
-                </TableRow>
-              )}
-            </TableBody>
-          </Table>
-        </TableContainer>
-        <TablePagination
-          rowsPerPageOptions={[5, 10, 25]}
-          component="div"
-          count={mapsInfo.length}
-          rowsPerPage={rowsPerPage}
-          page={page}
-          onChangePage={handleChangePage}
-          onChangeRowsPerPage={handleChangeRowsPerPage}
-        />
-      </Paper>
+                        <ListItem button >
+                            <ListItemIcon>
+                                <StarRateTwoTone color="secondary" />
+                            </ListItemIcon>
+                            <ListItemTextStyled primary="Starred" />
+                        </ListItem>
 
-      {/* Action Dialog */}
-      <ActionDispatcher action={activeDialog?.actionType} onClose={() => setActiveDialog(undefined)} mapId={activeDialog ? activeDialog.mapId : -1} />
-    </div>
-  );
+                        <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>
+        );
 }
 
-
-
-const MapsPage = () => {
-
-  useEffect(() => {
-    document.title = 'Maps | WiseMapping';
-  }, []);
-
-  return (
-    <ThemeProvider theme={theme}>
-      <CssBaseline />
-
-      <PageContainer>
-        <HeaderArea>
-          <h2>Header</h2>
-        </HeaderArea>
-        <NavPanel/>
-        <MapsListArea>
-          <EnhancedTable />
-        </MapsListArea>
-      </PageContainer>
-    </ThemeProvider>
-  );
-}
-export default MapsPage;
-
-
+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
new file mode 100644
index 00000000..56417edc
--- /dev/null
+++ b/packages/webapp/src/components/maps-page/maps-list/index.tsx
@@ -0,0 +1,408 @@
+import React, { useEffect } from 'react'
+import { StyledTableCell } from './styled';
+
+import { createStyles, makeStyles, Theme, ThemeProvider } 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';
+import TableContainer from '@material-ui/core/TableContainer';
+import TableHead from '@material-ui/core/TableHead';
+import TablePagination from '@material-ui/core/TablePagination';
+import TableRow from '@material-ui/core/TableRow';
+import TableSortLabel from '@material-ui/core/TableSortLabel';
+import Toolbar from '@material-ui/core/Toolbar';
+import Typography from '@material-ui/core/Typography';
+import Paper from '@material-ui/core/Paper';
+import Checkbox from '@material-ui/core/Checkbox';
+import IconButton from '@material-ui/core/IconButton';
+import Tooltip from '@material-ui/core/Tooltip';
+import DeleteIcon from '@material-ui/icons/Delete';
+import FilterListIcon from '@material-ui/icons/FilterList';
+import StarRateRoundedIcon from '@material-ui/icons/StarRateRounded';
+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 { ErrorInfo, MapInfo, Service } from '../../../services/Service';
+import ActionChooser, { ActionType } from '../action-chooser';
+import ActionDispatcher from '../action-dispatcher';
+
+
+
+function descendingComparator<T>(a: T, b: T, orderBy: keyof T) {
+  if (b[orderBy] < a[orderBy]) {
+    return -1;
+  }
+  if (b[orderBy] > a[orderBy]) {
+    return 1;
+  }
+  return 0;
+}
+
+type Order = 'asc' | 'desc';
+
+function getComparator<Key extends keyof any>(
+  order: Order,
+  orderBy: Key,
+): (a: { [key in Key]: number | string | boolean | string[] | undefined }, b: { [key in Key]: number | string | string[] | boolean }) => number {
+  return order === 'desc'
+    ? (a, b) => descendingComparator(a, b, orderBy)
+    : (a, b) => -descendingComparator(a, b, orderBy);
+}
+
+function stableSort<T>(array: T[], comparator: (a: T, b: T) => number) {
+  const stabilizedThis = array.map((el, index) => [el, index] as [T, number]);
+  stabilizedThis.sort((a, b) => {
+    const order = comparator(a[0], b[0]);
+    if (order !== 0) return order;
+    return a[1] - b[1];
+  });
+  return stabilizedThis.map((el) => el[0]);
+}
+
+interface HeadCell {
+  disablePadding: boolean;
+  id: keyof MapInfo;
+  label: string;
+  numeric: boolean;
+  style: CSSProperties;
+}
+
+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: 'creator', numeric: false, disablePadding: false, label: 'Creator', style: {} },
+  { id: 'modified', numeric: true, disablePadding: false, label: 'Modified', style: { width: '50px' } }
+];
+
+interface EnhancedTableProps {
+  classes: ReturnType<typeof useStyles>;
+  numSelected: number;
+  onRequestSort: (event: React.MouseEvent<unknown>, property: keyof MapInfo) => void;
+  onSelectAllClick: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  order: Order;
+  orderBy: string;
+  rowCount: number;
+}
+
+function EnhancedTableHead(props: EnhancedTableProps) {
+  const { classes, onSelectAllClick, order, orderBy, numSelected, rowCount, onRequestSort } = props;
+
+  const createSortHandler = (property: keyof MapInfo) => (event: React.MouseEvent<unknown>) => {
+    onRequestSort(event, property);
+  };
+
+  return (
+    <TableHead>
+
+      <TableRow>
+        <TableCell padding='checkbox' key='select' style={{ width: '20px' }}>
+          <Checkbox
+            indeterminate={numSelected > 0 && numSelected < rowCount}
+            checked={rowCount > 0 && numSelected === rowCount}
+            onChange={onSelectAllClick}
+            size='small'
+            inputProps={{ 'aria-label': 'select all desserts' }}
+          />
+        </TableCell>
+
+        {headCells.map((headCell) => (
+          <TableCell
+            key={headCell.id}
+            sortDirection={orderBy === headCell.id ? order : false}
+            style={headCell.style}
+          >
+            <TableSortLabel
+              active={orderBy === headCell.id}
+              direction={orderBy === headCell.id ? order : 'asc'}
+              onClick={createSortHandler(headCell.id)}>
+              {headCell.label}
+              {orderBy === headCell.id ? (
+                <span className={classes.visuallyHidden}>
+                  {order === 'desc' ? 'sorted descending' : 'sorted ascending'}
+                </span>
+              ) : null}
+            </TableSortLabel>
+          </TableCell>
+        ))}
+        <TableCell style={{ width: '20px', padding: '0px' }} key='actions'>
+          <TableSortLabel>""</TableSortLabel>
+        </TableCell>
+      </TableRow>
+    </TableHead>
+  );
+}
+
+const useToolbarStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      paddingLeft: theme.spacing(2),
+      paddingRight: theme.spacing(1),
+    },
+    title: {
+      flex: '1 1 100%',
+    },
+  }),
+);
+
+interface EnhancedTableToolbarProps {
+  numSelected: number;
+}
+
+const EnhancedTableToolbar = (props: EnhancedTableToolbarProps) => {
+  const classes = useToolbarStyles();
+  const { numSelected } = props;
+
+  return (
+    <Toolbar>
+      {numSelected > 0 ? (
+        <Typography className={classes.title} color="inherit" variant="subtitle1" component="div">
+          {numSelected} selected
+        </Typography>
+      ) : (
+          <Typography className={classes.title} variant="h6" id="tableTitle" component="div">
+            Nutrition
+          </Typography>
+        )}
+      {numSelected > 0 ? (
+        <Tooltip title="Delete">
+          <IconButton aria-label="delete">
+            <DeleteIcon />
+          </IconButton>
+        </Tooltip>
+      ) : (
+          <Tooltip title="Filter list">
+            <IconButton aria-label="filter list">
+              <FilterListIcon />
+            </IconButton>
+          </Tooltip>
+        )}
+    </Toolbar>
+  );
+};
+
+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,
+  mapId: number
+}
+
+export const MapsList = () => {
+  const classes = useStyles();
+  const [order, setOrder] = React.useState<Order>('asc');
+  const [orderBy, setOrderBy] = React.useState<keyof MapInfo>('modified');
+  const [selected, setSelected] = React.useState<number[]>([]);
+  const [page, setPage] = React.useState(0);
+  const [rowsPerPage, setRowsPerPage] = React.useState(5);
+  const service: Service = useSelector(activeInstance);
+
+  const { isLoading, error, data } = useQuery<unknown, ErrorInfo, MapInfo[]>('maps', async () => {
+
+    const result = await service.fetchAllMaps();
+    return result;
+  });
+  const mapsInfo: MapInfo[] = data ? data : [];
+
+
+  const [activeRowAction, setActiveRowAction] = React.useState<ActionPanelState | undefined>(undefined);
+  type ActiveDialog = {
+    actionType: ActionType;
+    mapId: number
+  };
+
+  const [activeDialog, setActiveDialog] = React.useState<ActiveDialog | undefined>(undefined);
+  const handleRequestSort = (event: React.MouseEvent<unknown>, property: keyof MapInfo) => {
+    const isAsc = orderBy === property && order === 'asc';
+    setOrder(isAsc ? 'desc' : 'asc');
+    setOrderBy(property);
+  };
+
+  const handleSelectAllClick = (event: React.ChangeEvent<HTMLInputElement>): void => {
+    if (event.target.checked) {
+      const newSelecteds = mapsInfo.map((n) => n.id);
+      setSelected(newSelecteds);
+      return;
+    }
+    setSelected([]);
+  };
+
+  const handleRowClick = (event: React.MouseEvent<unknown>, id: number): void => {
+    const selectedIndex = selected.indexOf(id);
+    let newSelected: number[] = [];
+
+    if (selectedIndex === -1) {
+      newSelected = newSelected.concat(selected, id);
+    } else if (selectedIndex === 0) {
+      newSelected = newSelected.concat(selected.slice(1));
+    } else if (selectedIndex === selected.length - 1) {
+      newSelected = newSelected.concat(selected.slice(0, -1));
+    } else if (selectedIndex > 0) {
+      newSelected = newSelected.concat(
+        selected.slice(0, selectedIndex),
+        selected.slice(selectedIndex + 1),
+      );
+    }
+
+    setSelected(newSelected);
+  };
+
+  const handleChangePage = (event: unknown, newPage: number) => {
+    setPage(newPage);
+  };
+
+  const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setRowsPerPage(parseInt(event.target.value, 10));
+    setPage(0);
+  };
+
+  const handleActionClick = (mapId: number): ((event: any) => void) => {
+    return (event: any): void => {
+      setActiveRowAction(
+        {
+          mapId: mapId,
+          el: event.currentTarget
+        }
+      );
+      event.stopPropagation();
+    };
+  };
+
+  const handleActionMenuClose = (action: ActionType): void => {
+    if (action) {
+      const mapId = activeRowAction?.mapId;
+
+      setActiveRowAction(undefined);
+      setActiveDialog({
+        actionType: action as ActionType,
+        mapId: mapId as number
+      });
+    }
+  };
+
+  const isSelected = (id: number) => selected.indexOf(id) !== -1;
+
+  const emptyRows = rowsPerPage - Math.min(rowsPerPage, mapsInfo.length - page * rowsPerPage);
+
+  return (
+    <div className={classes.root}>
+      <Paper className={classes.paper}>
+        <EnhancedTableToolbar numSelected={selected.length} />
+        <TableContainer>
+          <Table
+            className={classes.table}
+            aria-labelledby="tableTitle"
+            size={'small'}
+            aria-label="sticky table"
+            stickyHeader
+          >
+            <EnhancedTableHead
+              classes={classes}
+              numSelected={selected.length}
+              order={order}
+              orderBy={orderBy}
+              onSelectAllClick={handleSelectAllClick}
+              onRequestSort={handleRequestSort}
+              rowCount={mapsInfo.length}
+            />
+            <TableBody>
+              {isLoading ? (<TableRow></TableRow>) : stableSort(mapsInfo, getComparator(order, orderBy))
+                .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
+                .map((row: MapInfo) => {
+                  const isItemSelected = isSelected(row.id);
+                  const labelId = row.id;
+
+                  return (
+                    <TableRow
+                      hover
+                      onClick={(event: any) => handleRowClick(event, row.id)}
+                      role="checkbox"
+                      aria-checked={isItemSelected}
+                      tabIndex={-1}
+                      key={row.id}
+                      selected={isItemSelected}
+                    >
+
+                      <StyledTableCell padding="checkbox">
+                        <Checkbox
+                          checked={isItemSelected}
+                          inputProps={{ 'aria-labelledby': String(labelId) }}
+                          size="small"
+                        />
+                      </StyledTableCell>
+
+                      <StyledTableCell>
+                        <Tooltip title="Starred">
+                          <IconButton aria-label="Starred" size="small" onClick={(e) => { alert("") }}>
+                            <StarRateRoundedIcon color="action" style={{ color: row.starred ? 'yellow' : 'gray' }} />
+                          </IconButton>
+                        </Tooltip>
+                      </StyledTableCell>
+
+                      <StyledTableCell>{row.name}</StyledTableCell>
+                      <StyledTableCell>{row.labels}</StyledTableCell>
+                      <StyledTableCell>{row.creator}</StyledTableCell>
+                      <StyledTableCell>{row.modified}</StyledTableCell>
+
+                      <StyledTableCell>
+                        <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>
+                    </TableRow>
+                  );
+                })}
+              {emptyRows > 0 && (
+                <TableRow style={{ height: 33 * emptyRows }}>
+                  <TableCell colSpan={6} />
+                </TableRow>
+              )}
+            </TableBody>
+          </Table>
+        </TableContainer>
+        <TablePagination
+          rowsPerPageOptions={[5, 10, 25]}
+          component="div"
+          count={mapsInfo.length}
+          rowsPerPage={rowsPerPage}
+          page={page}
+          onChangePage={handleChangePage}
+          onChangeRowsPerPage={handleChangeRowsPerPage}
+        />
+      </Paper>
+
+      {/* Action Dialog */}
+      <ActionDispatcher action={activeDialog?.actionType} onClose={() => setActiveDialog(undefined)} mapId={activeDialog ? activeDialog.mapId : -1} />
+    </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
new file mode 100644
index 00000000..60ba11d1
--- /dev/null
+++ b/packages/webapp/src/components/maps-page/maps-list/styled.ts
@@ -0,0 +1,18 @@
+import { MenuItem, TableCell } from '@material-ui/core';
+import { withStyles } from '@material-ui/core/styles';
+
+export const StyledTableCell = withStyles({
+    root: {
+        color: 'black',
+        padding: '0px',
+        cursor: 'pointer'
+    }
+})(TableCell);
+
+export const StyledMenuItem = withStyles({
+    root: {
+        width: '300px',
+        padding: '10px 20px',
+        marging: '0px 20px'
+    }
+})(MenuItem)
diff --git a/packages/webapp/src/components/maps-page/nav-panel/index.tsx b/packages/webapp/src/components/maps-page/nav-panel/index.tsx
deleted file mode 100644
index 9e016de0..00000000
--- a/packages/webapp/src/components/maps-page/nav-panel/index.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from "react";
-
-const NavPanel = (props: any) => {
-
-    return (<p>nav</p>);
-
-}
-export default NavPanel;
\ No newline at end of file
diff --git a/packages/webapp/src/components/maps-page/nav-panel/style.ts b/packages/webapp/src/components/maps-page/nav-panel/style.ts
deleted file mode 100644
index 5bd635f5..00000000
--- a/packages/webapp/src/components/maps-page/nav-panel/style.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import styled from "styled-components";
-
-
-export const NavArea = styled.div` 
-grid-area: nav;
-background-color: red;
-`
diff --git a/packages/webapp/src/components/maps-page/style.ts b/packages/webapp/src/components/maps-page/style.ts
new file mode 100644
index 00000000..60d714b9
--- /dev/null
+++ b/packages/webapp/src/components/maps-page/style.ts
@@ -0,0 +1,80 @@
+import { createStyles, ListItemText, Theme, withStyles } from "@material-ui/core";
+import { makeStyles } from "@material-ui/core";
+
+const drawerWidth = 300;
+
+export const useStyles = makeStyles((theme: Theme) =>
+    createStyles({
+        root: {
+            display: 'flex',
+        },
+        appBar: {
+            zIndex: theme.zIndex.drawer + 1,
+            transition: theme.transitions.create(['width', 'margin'], {
+                easing: theme.transitions.easing.sharp,
+                duration: theme.transitions.duration.leavingScreen,
+            }),
+            background: '#ffffff',
+
+        },
+        appBarShift: {
+            marginLeft: drawerWidth,
+            width: `calc(100% - ${drawerWidth}px)`,
+            transition: theme.transitions.create(['width', 'margin'], {
+                easing: theme.transitions.easing.sharp,
+                duration: theme.transitions.duration.enteringScreen,
+            }),
+        },
+        menuButton: {
+            marginRight: 36,
+        },
+        hide: {
+            display: 'none',
+        },
+        drawer: {
+            width: drawerWidth,
+            flexShrink: 0,
+            whiteSpace: 'nowrap',
+        },
+        drawerOpen: {
+            background: '#ffa800',
+            width: drawerWidth,
+            transition: theme.transitions.create('width', {
+                easing: theme.transitions.easing.sharp,
+                duration: theme.transitions.duration.enteringScreen,
+            }),
+        },
+        drawerClose: {
+            transition: theme.transitions.create('width', {
+                easing: theme.transitions.easing.sharp,
+                duration: theme.transitions.duration.leavingScreen,
+            }),
+            overflowX: 'hidden',
+            width: theme.spacing(7) + 1,
+            [theme.breakpoints.up('sm')]: {
+                width: theme.spacing(9) + 1,
+            },
+        },
+        toolbar: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'flex-end',
+            padding: theme.spacing(0, 1),
+            // necessary for content to be below app bar
+            ...theme.mixins.toolbar,
+        },
+        content: {
+            flexGrow: 1,
+            padding: theme.spacing(3),
+        },
+        listItemText: {
+        }
+    }),
+);
+
+export const ListItemTextStyled = withStyles({
+    root:
+    {
+        color: 'white',
+    }
+})(ListItemText);
diff --git a/packages/webapp/src/components/maps-page/styled.ts b/packages/webapp/src/components/maps-page/styled.ts
deleted file mode 100644
index d2bab408..00000000
--- a/packages/webapp/src/components/maps-page/styled.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import { Button, Dialog, MenuItem, TableCell } from '@material-ui/core';
-import { withStyles } from '@material-ui/core/styles';
-import styled from 'styled-components';
-
-export const PageContainer = styled.div`
-display: grid;
-height: 100vh;
-width: 100vw;
-grid-template-areas: "nav header header"
-                     "nav  main ads"
-                     "nav  main ads";
-grid-template-columns: 240px 1fr 240px;
-grid-template-rows: 60px 1fr 30px;
-`
-
-export const MapsListArea = styled.div`
-grid-area: main;
-background-color: #ffff64;
-`
-
-export const HeaderArea = styled.div`
-grid-area: header;
-background-color: blue;
-`
-
-export const StyledTableCell = withStyles({
-    root: {
-        color: 'black',
-        padding: '0px',
-        cursor: 'pointer'
-    }
-})(TableCell);
-
-export const StyledMenuItem = withStyles({
-    root: {
-        width: '300px',
-        padding: '10px 20px',
-        marging: '0px 20px'
-    }
-})(MenuItem)
diff --git a/packages/webapp/src/components/registration-page/index.tsx b/packages/webapp/src/components/registration-page/index.tsx
index a8ee646c..0b91b425 100644
--- a/packages/webapp/src/components/registration-page/index.tsx
+++ b/packages/webapp/src/components/registration-page/index.tsx
@@ -7,14 +7,14 @@ import { ErrorInfo, Service } from '../../services/Service';
 import Header from '../layout/header';
 import Footer from '../layout/footer';
 
-import { StyledReCAPTCHA } from './styled';
-import { PageContent, theme } from '../../theme/global-style';
-import { CssBaseline, FormControl, ThemeProvider } from '@material-ui/core';
+import { PageContent } from '../../theme';
+import { FormControl, Typography } from '@material-ui/core';
 import { useSelector } from 'react-redux';
 import { useMutation } from 'react-query';
 import { activeInstance } from '../../reducers/serviceSlice';
 import Input from '../form/input';
 import GlobalError from '../form/global-error';
+import SubmitButton from '../form/submit-button';
 
 export type Model = {
   email: string;
@@ -58,8 +58,13 @@ const RegistrationForm = () => {
 
   return (
     <PageContent>
-      <h1><FormattedMessage id="registration.title" defaultMessage="Become a member" /></h1>
-      <p><FormattedMessage id="registration.desc" defaultMessage="Signing up is free and just take a moment " /></p>
+      <Typography variant="h4" component="h1">
+        <FormattedMessage id="registration.title" defaultMessage="Become a member" />
+      </Typography>
+
+      <Typography paragraph>
+        <FormattedMessage id="registration.desc" defaultMessage="Signing up is free and just take a moment " />
+      </Typography>
 
       <FormControl>
 
@@ -78,17 +83,17 @@ const RegistrationForm = () => {
           <Input name="password" type="password" onChange={handleOnChange} label={{ id: "registration.password", defaultMessage: "Password" }}
             autoComplete="new-password" />
 
-          <StyledReCAPTCHA>
+          <div style={{ width: '330px', padding: '5px 10px' }}>
             <ReCAPTCHA
               sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI"
               onChange={(value: string) => { model.recaptcha = value; setModel(model) }} />
-          </StyledReCAPTCHA>
+          </div>
 
           <div style={{ fontSize: "12px", padding: "5px 0px" }}>
             <FormattedMessage id="registration.termandconditions" defaultMessage="Terms of Service: Please check the WiseMapping Account information you've entered above, and review the Terms of Service here. By clicking on 'Register' below you are agreeing to the Terms of Service above and the Privacy Policy" />
           </div>
 
-          <input type="submit" value={intl.formatMessage({ id: "registration.register", defaultMessage: "Register" })} />
+          <SubmitButton value={intl.formatMessage({ id: "registration.register", defaultMessage: "Register" })} />
         </form>
       </FormControl>
 
diff --git a/packages/webapp/src/components/registration-page/styled.ts b/packages/webapp/src/components/registration-page/styled.ts
deleted file mode 100644
index 0af9ce4e..00000000
--- a/packages/webapp/src/components/registration-page/styled.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import styled from 'styled-components';
-
-export const StyledReCAPTCHA = styled.div`
-font-size: 13px;
-width: 300px;
-margin: auto;
-}`;
-
-export const StyledNav = styled.div`
-.db-warn-msg {
-    margin-top: 30px;
-    width: 100%;
-}
-
-.db-warn-msg p {
-    margin: 0 auto;
-    width: 500px;
-    background-color: #e97450;
-    font-size: 15px;
-    color: white;
-    padding: 15px 30px;
-    border-radius: 10px;
-}`;
diff --git a/packages/webapp/src/components/registration-success-page/index.tsx b/packages/webapp/src/components/registration-success-page/index.tsx
index bb65eb0d..4d0de4b7 100644
--- a/packages/webapp/src/components/registration-success-page/index.tsx
+++ b/packages/webapp/src/components/registration-success-page/index.tsx
@@ -1,11 +1,10 @@
 import React, { useEffect } from 'react'
 import { FormattedMessage } from 'react-intl'
-
-import {PageContent} from '../../theme/global-style';
-
+import { PageContent } from '../../theme';
 import Header, { SignInButton } from '../layout/header'
 import Footer from '../layout/footer'
-
+import { Button, Typography } from '@material-ui/core';
+import { Link as RouterLink } from 'react-router-dom'
 
 
 const RegistrationSuccessPage = () => {
@@ -17,13 +16,19 @@ const RegistrationSuccessPage = () => {
     <div>
       <Header type='none' />
       <PageContent>
-        <h1>
+        <Typography variant="h4" component="h1">
           <FormattedMessage id="resetpassword.success.title" defaultMessage="Your account has been created successfully" />
-        </h1>
-        <p>
+        </Typography>
+
+        <Typography paragraph>
           <FormattedMessage id="registration.success.desc" defaultMessage="Click 'Sign In' button below and start creating mind maps." />
-        </p>
-        <SignInButton style='style1' />
+        </Typography>
+
+
+        <Button color="primary" size="medium" variant="contained" component={RouterLink} to="/c/login" disableElevation={true}>
+          <FormattedMessage id="login.signin" defaultMessage="Sign In" />
+        </Button>
+
       </PageContent>
       <Footer />
     </div>
diff --git a/packages/webapp/src/images/logo-icon.svg b/packages/webapp/src/images/logo-icon.svg
new file mode 100644
index 00000000..dfd4d38b
--- /dev/null
+++ b/packages/webapp/src/images/logo-icon.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="38" height="27" fill="none" viewBox="0 0 38 27">
+    <path fill="#FFCB00" stroke="#000" stroke-linejoin="round" stroke-width="1.5" d="M19 26c-1.5-4-3.5-3.5-9-7h17.5c-4.786 3.127-7.5 3-8.5 7z"/>
+    <path fill="#FFCB00" stroke="#000" stroke-width="1.5" d="M32.34 11.956c0 2.447-1.45 4.745-3.97 6.465-2.514 1.718-6.03 2.804-9.95 2.804-3.92 0-7.436-1.086-9.951-2.804-2.519-1.72-3.97-4.018-3.97-6.465 0-2.446 1.451-4.745 3.97-6.465 2.515-1.717 6.03-2.804 9.95-2.804 3.921 0 7.437 1.087 9.952 2.804 2.518 1.72 3.97 4.019 3.97 6.465z"/>
+    <mask id="i08j30ef6a" fill="#fff">
+        <path d="M17 8c0 2.122-.895 4.157-2.49 5.657C12.916 15.157 10.754 16 8.5 16s-4.416-.843-6.01-2.343C.896 12.157 0 10.122 0 8h17z"/>
+    </mask>
+    <path fill="#B3D4FF" stroke="#000" stroke-width="3" d="M17 8c0 2.122-.895 4.157-2.49 5.657C12.916 15.157 10.754 16 8.5 16s-4.416-.843-6.01-2.343C.896 12.157 0 10.122 0 8h17z" mask="url(#i08j30ef6a)"/>
+    <mask id="1f1ltfoetb" fill="#fff">
+        <path d="M38 8c0 2.122-.895 4.157-2.49 5.657C33.916 15.157 31.754 16 29.5 16s-4.416-.843-6.01-2.343C21.895 12.157 21 10.122 21 8h17z"/>
+    </mask>
+    <path fill="#B3D4FF" stroke="#000" stroke-width="3" d="M38 8c0 2.122-.895 4.157-2.49 5.657C33.916 15.157 31.754 16 29.5 16s-4.416-.843-6.01-2.343C21.895 12.157 21 10.122 21 8h17z" mask="url(#1f1ltfoetb)"/>
+    <path stroke="#000" stroke-width="1.5" d="M16 9.125c2-1.5 4-1.5 6 0"/>
+    <path fill="#FFCB00" d="M19.186 24.75C17.686 20.75 9 19 10.5 18s16-1.5 17-.5-6.857 2.826-8.314 7.25z"/>
+</svg>
diff --git a/packages/webapp/src/images/logo-text-black.svg b/packages/webapp/src/images/logo-text-black.svg
new file mode 100644
index 00000000..5b042da3
--- /dev/null
+++ b/packages/webapp/src/images/logo-text-black.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="81" height="32" fill="none" viewBox="0 0 81 32">
+    <path fill="#000" d="M7.668 9.403C7.4 10.43 7.11 11.45 6.8 12.463c-.296 1.014-.612 2.034-.948 3.06h-2.34c-.243-.567-.505-1.242-.788-2.026-.282-.784-.578-1.635-.888-2.553-.296-.933-.605-1.912-.928-2.939C.598 6.965.296 5.918 0 4.864h3.168c.108.486.222 1.02.343 1.6.135.568.27 1.156.404 1.764.148.608.296 1.223.444 1.844.161.608.323 1.196.484 1.763.175-.594.343-1.202.505-1.824.174-.621.336-1.23.484-1.824.161-.608.31-1.188.444-1.742.148-.568.276-1.095.383-1.581h2.18c.107.486.228 1.013.363 1.58l.424 1.743c.148.595.302 1.203.464 1.824.161.622.33 1.23.504 1.824.162-.567.323-1.155.485-1.763.16-.621.309-1.236.443-1.844.148-.608.283-1.196.404-1.763.134-.581.256-1.115.363-1.601h3.128c-.296 1.054-.605 2.1-.928 3.141-.31 1.027-.619 2.006-.929 2.939-.295.918-.591 1.77-.887 2.553-.283.784-.545 1.46-.787 2.027H9.545c-.336-1.027-.666-2.047-.989-3.06-.323-1.014-.619-2.034-.888-3.06zM20.042 15.524h-3.007V4.864h3.007v10.66zm.282-13.74c0 .553-.181.992-.545 1.317-.35.31-.766.466-1.25.466-.485 0-.909-.156-1.272-.466-.35-.325-.525-.764-.525-1.318s.175-.986.525-1.297C17.62.162 18.044 0 18.528 0c.485 0 .902.162 1.251.486.364.311.545.743.545 1.297zM25.915 13.355c.552 0 .942-.054 1.17-.162.23-.108.344-.317.344-.628 0-.243-.148-.453-.444-.628-.296-.19-.747-.399-1.352-.629-.471-.175-.902-.358-1.292-.547-.377-.189-.7-.412-.968-.668-.27-.27-.478-.588-.626-.953-.148-.365-.222-.804-.222-1.317 0-1 .37-1.79 1.11-2.371.74-.581 1.755-.872 3.047-.872.646 0 1.265.06 1.857.183.591.108 1.062.23 1.412.364l-.525 2.351c-.35-.121-.733-.23-1.15-.324-.403-.095-.86-.142-1.372-.142-.942 0-1.413.263-1.413.79 0 .122.02.23.061.325.04.094.121.189.242.283.121.081.283.176.484.284.216.095.485.203.808.324.659.244 1.204.487 1.634.73.43.23.767.486 1.01.77.255.27.43.574.524.912.107.338.161.73.161 1.175 0 1.054-.397 1.851-1.19 2.392-.78.54-1.89.81-3.33.81-.942 0-1.729-.08-2.361-.243-.619-.162-1.05-.297-1.291-.405l.504-2.452c.511.202 1.036.365 1.574.486.538.108 1.07.162 1.594.162zM32.158 10.275c0-.946.141-1.77.423-2.473.296-.716.68-1.31 1.15-1.783.472-.473 1.01-.83 1.615-1.074.619-.243 1.251-.365 1.897-.365 1.507 0 2.697.466 3.572 1.398.874.92 1.311 2.277 1.311 4.074 0 .176-.006.372-.02.588-.013.202-.027.385-.04.547h-6.82c.066.621.356 1.115.867 1.48.511.364 1.197.546 2.058.546.552 0 1.09-.047 1.614-.141.539-.108.976-.237 1.312-.385l.404 2.452c-.162.08-.377.162-.646.243-.269.081-.572.149-.908.203-.323.067-.673.121-1.05.162-.376.04-.753.06-1.13.06-.955 0-1.789-.141-2.502-.425-.7-.284-1.284-.669-1.755-1.155-.458-.5-.8-1.088-1.03-1.763-.215-.676-.322-1.405-.322-2.19zM39.22 9.12c-.014-.257-.061-.507-.142-.75-.067-.243-.181-.46-.343-.649-.148-.189-.343-.344-.585-.466-.229-.121-.518-.182-.868-.182-.336 0-.625.06-.867.182-.243.108-.444.257-.606.446-.161.19-.289.412-.383.669-.08.243-.142.493-.182.75h3.976zM7.043 22.536c0-.973-.128-1.662-.384-2.067-.242-.406-.666-.608-1.271-.608-.188 0-.384.013-.585.04-.202.014-.397.034-.586.061v8.228H1.211V17.895c.255-.068.551-.135.888-.203.35-.08.713-.148 1.09-.202.39-.068.786-.115 1.19-.142.404-.04.8-.061 1.19-.061.767 0 1.386.101 1.857.304.484.189.881.419 1.19.689.431-.31.922-.554 1.474-.73.565-.175 1.083-.263 1.553-.263.848 0 1.54.122 2.079.365.552.23.989.56 1.312.993.322.432.544.945.666 1.54.12.594.181 1.256.181 1.986v6.019h-3.007v-5.654c0-.973-.127-1.662-.383-2.067-.242-.406-.666-.608-1.271-.608-.162 0-.39.04-.686.121-.283.081-.518.183-.707.304.095.311.155.642.182.993.027.338.04.703.04 1.095v5.816H7.043v-5.654zM22.668 26.082c.296 0 .578-.006.847-.02.27-.013.484-.034.646-.06v-2.29c-.121-.028-.303-.055-.545-.082-.242-.027-.464-.04-.666-.04-.282 0-.552.02-.807.06-.242.027-.457.088-.646.183-.188.094-.336.223-.444.385-.107.162-.161.365-.161.608 0 .473.155.804.464.993.323.175.76.263 1.312.263zm-.243-8.836c.888 0 1.628.102 2.22.304.592.203 1.063.494 1.413.872.363.378.619.837.767 1.378.148.54.222 1.142.222 1.803v6.283c-.431.095-1.03.203-1.797.324-.766.135-1.695.203-2.784.203-.686 0-1.312-.06-1.877-.183-.551-.121-1.029-.317-1.433-.587-.403-.284-.713-.649-.928-1.095-.215-.445-.323-.993-.323-1.641 0-.622.121-1.148.363-1.58.256-.433.592-.778 1.01-1.034.417-.257.894-.44 1.432-.548.538-.121 1.097-.182 1.675-.182.39 0 .733.02 1.03.06.309.028.558.068.746.122v-.283c0-.514-.155-.926-.464-1.236-.31-.311-.848-.467-1.615-.467-.51 0-1.015.04-1.513.122-.498.067-.928.169-1.292.304l-.383-2.432c.175-.054.39-.108.646-.162.269-.068.558-.122.867-.162.31-.054.633-.095.97-.122.349-.04.699-.06 1.048-.06zM36.566 22.941c0-.932-.209-1.675-.626-2.23-.417-.567-1.036-.85-1.856-.85-.27 0-.518.013-.747.04-.229.014-.417.034-.565.061v5.452c.188.121.43.223.727.303.309.082.618.122.928.122 1.426 0 2.139-.966 2.139-2.898zm3.067-.081c0 .824-.1 1.574-.303 2.25-.201.675-.497 1.256-.887 1.742-.39.487-.875.865-1.453 1.135-.579.27-1.245.406-1.998.406-.417 0-.807-.04-1.17-.122-.364-.081-.714-.196-1.05-.345v4.013h-3.007V17.895c.27-.081.579-.155.929-.223.35-.081.713-.149 1.09-.203.39-.054.78-.094 1.17-.121.403-.04.787-.061 1.15-.061.874 0 1.655.135 2.34.405.687.257 1.265.628 1.736 1.115.471.473.828 1.054 1.07 1.743.255.689.383 1.459.383 2.31zM48.744 22.941c0-.932-.208-1.675-.625-2.23-.417-.567-1.036-.85-1.857-.85-.269 0-.518.013-.746.04-.229.014-.417.034-.565.061v5.452c.188.121.43.223.726.303.31.082.619.122.928.122 1.426 0 2.14-.966 2.14-2.898zm3.068-.081c0 .824-.101 1.574-.303 2.25-.202.675-.498 1.256-.888 1.742-.39.487-.874.865-1.453 1.135-.578.27-1.244.406-1.998.406-.417 0-.807-.04-1.17-.122-.363-.081-.713-.196-1.05-.345v4.013h-3.006V17.895c.269-.081.578-.155.928-.223.35-.081.713-.149 1.09-.203.39-.054.78-.094 1.17-.121.404-.04.787-.061 1.15-.061.875 0 1.655.135 2.341.405.686.257 1.265.628 1.736 1.115.47.473.827 1.054 1.07 1.743.255.689.383 1.459.383 2.31zM57.13 28.19h-3.008V17.53h3.007v10.66zm.282-13.74c0 .554-.182.993-.545 1.317-.35.31-.767.466-1.251.466-.484 0-.908-.155-1.272-.466-.35-.324-.524-.763-.524-1.317 0-.554.175-.987.524-1.297.364-.325.788-.487 1.272-.487s.901.162 1.25.487c.364.31.546.743.546 1.297zM59.956 17.895c.51-.149 1.17-.284 1.977-.405.807-.136 1.655-.203 2.543-.203.901 0 1.648.122 2.24.365.605.23 1.083.56 1.432.993.35.432.6.945.747 1.54.148.594.222 1.256.222 1.986v6.019H66.11v-5.654c0-.973-.127-1.662-.383-2.067-.256-.406-.733-.608-1.433-.608-.215 0-.444.013-.686.04-.242.014-.457.034-.646.061v8.228h-3.006V17.895zM74.401 22.515c0 1.69.68 2.534 2.038 2.534.31 0 .6-.04.868-.122.27-.08.498-.175.686-.284V19.82c-.148-.027-.323-.047-.524-.06-.202-.028-.438-.041-.707-.041-.793 0-1.385.263-1.775.79-.39.527-.586 1.196-.586 2.006zM81 26.852c0 1.743-.444 3.034-1.332 3.871-.874.851-2.233 1.277-4.076 1.277-.646 0-1.291-.06-1.937-.182-.646-.109-1.245-.257-1.796-.446l.524-2.534c.471.19.962.338 1.474.446.524.108 1.116.163 1.775.163.861 0 1.467-.19 1.816-.568.364-.378.545-.865.545-1.46v-.384c-.323.148-.659.263-1.009.344-.336.068-.706.102-1.11.102-1.466 0-2.59-.433-3.37-1.297-.78-.879-1.17-2.101-1.17-3.669 0-.783.121-1.492.363-2.127.242-.649.592-1.203 1.05-1.662.47-.46 1.042-.81 1.715-1.054.672-.257 1.433-.385 2.28-.385.363 0 .733.02 1.11.06.39.028.774.068 1.15.122.377.054.733.122 1.07.203.35.067.659.142.928.223v8.957z"/>
+</svg>
diff --git a/packages/webapp/src/theme/global-style.ts b/packages/webapp/src/theme/global-style.ts
deleted file mode 100644
index 5dde5893..00000000
--- a/packages/webapp/src/theme/global-style.ts
+++ /dev/null
@@ -1,176 +0,0 @@
-import { createMuiTheme, TextField, withStyles } from '@material-ui/core';
-import { Alert } from '@material-ui/lab';
-import styled, { createGlobalStyle } from 'styled-components';
-
-
-const GlobalStyle = createGlobalStyle`
-  
-@import url('https://fonts.googleapis.com/css?family=Montserrat:100,300,400,700,900');
-* {
-    box-sizing: border-box;
-}
-
-body {
-    font: 1.2em Montserrat, arial, sans-serif;
-    margin: 0px;
-}
-
-a {
-    text-decoration: none;
-    transition: background-color 0.3s ease;
-}
-
-/* Buttons */
-
-.button-style1,
-.button-style2,
-.button-style3 {
-    font-size: 16px;
-    font-weight: 500;
-    font-stretch: normal;
-    font-style: normal;
-    letter-spacing: normal;
-    white-space: nowrap;
-    padding-top: 10px;
-}
-
-.button-style1 a,
-.button-style2 a,
-.button-style3 a {
-    padding: 10px 30px 10px 30px;
-    transition: background-color 0.3s ease;
-    border-radius: 9px;
-}
-
-.button-style1 a {
-    color: #f9a826;
-    background-color: white;
-    border: solid 1px #f9a826;
-}
-
-.button-style1 a:hover {
-    color: white;
-    background-color: rgba(255, 168, 0, 0.6);
-    border: 0px;
-}
-
-.button-style2 a {
-    color: #ffa800;
-    background-color: white;
-    border: solid 1px rgba(255, 168, 0, 0.6);
-}
-
-.button-style2 a:hover {
-    color: white;
-    border: solid 1px white;
-    background-color: rgba(243, 220, 174, 0.6);
-}
-
-.button-style3 a {
-    color: white;
-    background-color: #ffa800;
-    font-weight: 600;
-}
-
-.button-style3 a:hover {
-    color: #ffa800;
-    background-color: white;
-    border: solid 1px #ffa800;
-    font-weight: 600;
-}
-`;
-
-const PageContent = styled.div`
-max-width: 350px;
-min-height: 350px;
-margin: 10px auto;
-text-align:center;
-padding: 20px 10px 20px 10px;
-
-/* Form Styles Section */
-
-& input[type=checkbox] {
-    border: solid 1px #f9a826;
-    background-color: #f9a826;
-}
-
-& input[type=submit],
-& input[type=button] {
-    width: 330px;
-    height: 53px;
-    padding: 0px 20px;
-    margin: 7px 0px;
-    font-size: 20px;
-    font-weight: 600;
-    border-radius: 9px;
-    border: 0px;
-    background-color: #ffa800;
-    color: white;
-}
-
-& input[type=submit]:hover {
-    background-color: rgba(249, 168, 38, 0.91);
-    cursor: pointer
-}
-
-& label {
-    font-size:15px;
-}
-
-& input:placeholder {
-    color: grey;
-}
-
-& h1,
-& h2 {
-    font-stretch: normal;
-    font-style: normal;
-    line-height: 1.2;
-    letter-spacing: normal;
-}
-
-& h1 {
-    font-size: 36px;
-    font-weight: bold;
-    font-stretch: normal;
-    font-style: normal;
-    line-height: normal;
-    letter-spacing: normal;
-    color: #f9a826;
-}
-
-& a {
-    font-size: 15px;
-    color: #f9a826;
-}
-`;
-
-const theme = createMuiTheme({
-    typography: {
-        fontFamily: [
-            'Montserrat'
-        ].join(','),
-        h6: {
-            fontSize: '25px',
-            fontWeight: 'bold'
-        },
-    },
-    palette: {
-        primary: {
-            main: '#ffffff',
-            light: '#ffffff',
-            dark:  '#ffffff',
-            contrastText: '#ffffff'
-        },
-        secondary: {
-            main: '#ffffff',
-            light: '#ffffff',
-            dark:  '#ffffff',
-            contrastText: '#ffffff'
-        }
-    }
-});
-
-theme.palette.secondary
-export { GlobalStyle, PageContent, theme };
-
diff --git a/packages/webapp/src/theme/index.ts b/packages/webapp/src/theme/index.ts
new file mode 100644
index 00000000..3491ba4d
--- /dev/null
+++ b/packages/webapp/src/theme/index.ts
@@ -0,0 +1,92 @@
+import { createMuiTheme } from '@material-ui/core';
+import styled, { createGlobalStyle } from 'styled-components';
+
+
+const GlobalStyle = createGlobalStyle`
+
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;600&display=swap');
+* {
+    box-sizing: border-box;
+}
+`;
+
+const PageContent = styled.div`
+max-width: 350px;
+min-height: 350px;
+margin: 10px auto;
+text-align:center;
+padding: 20px 10px 20px 10px;
+`;
+
+const theme = createMuiTheme({
+    overrides: {
+        MuiOutlinedInput: {
+            root: {
+                height: '53px',
+                borderRadius: '9px',
+                fontSize: '14px',
+                '& fieldset': {
+                    border: 'solid 1px #ffcb66',
+                },
+                '&:hover:not($disabled):not($focused):not($error) $notchedOutline': {
+                    borderColor: '#f9a826',
+                }
+            },
+        },
+        MuiInputLabel: {
+            root: {
+                color: '#f9a826'
+            }
+        },
+        MuiButton: {
+            root: {
+                fontSize: '15px',
+                fontWeight: 600,
+                whiteSpace: 'nowrap',
+                textTransform: 'none',
+                borderRadius: '9px',
+                padding: '6px 54px 6px 54px',
+                width: '136px'
+            },
+            containedPrimary: {
+                color: 'white',
+                '&:hover': {
+                    backgroundColor: 'rgba(249, 168, 38, 0.91)'
+                }
+            },
+            textPrimary: {
+            }
+        }
+    },
+    typography: {
+        fontFamily: [
+            'Montserrat'
+        ].join(','),
+        h4: {
+            color: '#ffa800',
+            fontWeight: 600
+        },
+        h6: {
+            fontSize: '25px',
+            fontWeight: 'bold'
+        },
+    },
+    palette: {
+        primary: {
+            light: '#ffa800',
+            main: '#ffa800',
+            dark: '#ffa800',
+            contrastText: '#FFFFFF',
+        },
+        secondary: {
+            light: '#FFFFFF',
+            main: '#FFFFFF',
+            dark: '#FFFFFF',
+            contrastText: '#FFFFFF',
+        },
+
+    }
+});
+
+export { GlobalStyle, PageContent, theme };
+