diff --git a/dbs/myapp.mv.db b/dbs/myapp.mv.db
index 2ddf9cc..cb3336f 100644
Binary files a/dbs/myapp.mv.db and b/dbs/myapp.mv.db differ
diff --git a/website/src/App.js b/website/src/App.js
index fda15b4..a408ca5 100644
--- a/website/src/App.js
+++ b/website/src/App.js
@@ -18,54 +18,43 @@ import {
 } from "react-router-dom";
 
 import Home from './pages/Home';
-import About from './pages/About';
+import Login from './pages/Login';
+import Register from './pages/Register';
 import NotFound from './pages/NotFound';
 
 const { Header, Content, Footer } = Layout;
 const { SubMenu } = Menu;
 
-
-function App() {
+export default () => {
 
   return (
     <Router>
-      <div className="page">
-        <Layout>
-          <Header style={{ position: 'fixed', zIndex: 1, width: '100%' }}>
-          <div className="logo" >
-            <Link to="/pt/">
-              <img src="/images/logo.svg" />
-            </Link>
-          </div>
-            <Menu mode="horizontal">
-              <Menu.Item key="home" icon={<HomeOutlined />}>
-                <Link to="/pt/">Home</Link>
-              </Menu.Item>
-              <Menu.Item key="about" icon={<ReadOutlined />}>
-                <Link to="/pt/about">About</Link>
-              </Menu.Item>
-              <Menu.Item key="login" >
-                <Button type="primary">Login</Button>
-              </Menu.Item>
-            </Menu>
-          </Header>
-          <Content>
-            <Switch>
-              <Route path="/pt/" exact={true} component={Home} />
-              <Route path="/pt/about" component={About} />
-              <Route path="*" component={NotFound} />
-            </Switch>
-          </Content>
-          <Footer>
-            <p>Copyright nuno kappa</p>
-          </Footer>
-        </Layout>
-      </div>
+      <Layout>
+        <Header>
+          <Menu mode="horizontal" theme="dark">
+            <Menu.Item><Link to="/">Home</Link></Menu.Item>
+            <Menu.Item><Link to="/login">Login</Link></Menu.Item>
+            <Menu.Item><Link to="/register">Register</Link></Menu.Item>
+          </Menu>
+        </Header>
+        <Content>
+          <Switch>
+            <Route path="/login">
+              <Login />
+            </Route>
+            <Route path="/register">
+              <Register />
+            </Route>
+            <Route path="/">
+              <Home />
+            </Route>
+          </Switch>
+        </Content>
+        <Footer>
+          <h2>Plataforma Social</h2>
+          Desenvolvimento de demonstração.
+        </Footer>
+      </Layout>
     </Router>
   );
-}
-
-
-
-
-export default App;
+};
\ No newline at end of file
diff --git a/website/src/App.less b/website/src/App.less
index acdb1ce..d627071 100644
--- a/website/src/App.less
+++ b/website/src/App.less
@@ -1,298 +1,4 @@
-@import '../node_modules/sal.js/dist/sal.css';
-
-@import "./defaults.less";
-
-html,
-body {
-    background-color: @site-background;
-    font-family: @primaryFont;
-}
-
-.ant-layout {
-    padding-top: @header-size;
-    background-color: @page-background;
-    min-height: 100vh;
-
-    @media only screen and (max-width: @header-mobile-width) {
-        padding-top: @header-size-mobile;
-    }
-}
-
-.ant-layout-header {
-    padding: 0 calc((100% - @header-desktop-width) / 2);
-    position: fixed;
-    display: flex;
-    flex-direction: row;
-    z-index: 1000;
-    top: 0;
-    width: 100%;
-    height: @header-size;
-    line-height: @header-size;
-    background: transparent;
-
-    &:before {
-        background: @header-background;
-        content: "";
-        position: absolute;
-        left: 0;
-        top: 0;
-        z-index: 2;
-        width: 100%;
-        height: 100%;
-    }
-
-    &:after {
-        width: 100%;
-        height: 20px;
-        content: "";
-        position: absolute;
-        z-index: 1;
-        left: 0;
-        bottom: 0;
-        box-shadow: 0 0px 10px 7px rgba(0, 0, 0, 0.35);
-        border-radius: 50%;
-    }
-
-    >*:not(.menu-burger-open) {
-        z-index: 3;
-    }
-
-    &.header-burger-open .menu {
-        z-index: 0;
-    }
-
-    .logo {
-        padding: 0 10px;
-        display: block;
-        width: @logo-width;
-        height: auto;
-
-        a {
-            img {
-                width: auto;
-                height: 50px;
-            }
-        }
-
-        @media only screen and (max-width: @header-mobile-width) {
-            width: 55%;
-            max-width: 400px;
-        }
-    }
-
-    .menu-languages {
-        line-height: @header-line-height;
-        background-color: transparent;
-        color: @header-menu-color;
-        border-bottom: none;
-        display: flex;
-
-        .ant-menu-submenu-title:hover {
-            color: @header-menu-color-hover  !important;
-        }
-
-        li {
-            margin-bottom: 20px !important;
-            display: inline;
-
-            &:hover {
-                border-color: @header-menu-color-hover  !important;
-            }
-        }
-    }
-
-    .menu {
-        display: flex;
-        width: 100%;
-        line-height: @header-line-height;
-
-        @media only screen and (max-width: @header-mobile-width) {
-            display: none;
-        }
-
-        ul {
-            background-color: transparent;
-            margin-left: auto;
-            border-bottom: none;
-            border-right: none;
-
-            li {
-                display: inline;
-
-                &:hover {
-                    a {
-                        color: @header-menu-color-hover;
-                    }
-
-                    border-color: @header-menu-color-hover  !important;
-                }
-
-                a {
-                    color: @header-menu-color;
-                    font-size: 1.2em;
-                }
-
-                &.ant-menu-submenu-horizontal::after {
-                    content: '>';
-                    color: rgba(0, 0, 0, 0.65);
-                    transform: rotate(90deg);
-                    position: absolute;
-                    right: -20px;
-                    top: 2px;
-                    font-weight: 600;
-                }
-            }
-        }
-
-        &-languages {
-            margin-left: 0 !important;
-
-            @media screen and (max-width: @header-mobile-width) {
-                margin-right: 85px;
-                margin-left: auto !important;
-            }
-        }
-    }
-
-    .menu-burger-button {
-        position: absolute;
-        width: auto;
-        height: auto;
-        top: 18px;
-        right: calc(@header-size / 4);
-
-        @media only screen and (min-width: @header-mobile-width) {
-            display: none;
-        }
-
-        .burger {
-            height: calc(@header-size-mobile / 2);
-        }
-    }
-
-    .menu-burger {
-        @media only screen and (min-width: @header-mobile-width) {
-            display: none;
-        }
-    }
-}
-
-.ant-menu-sub,
-.ant-menu-submenu-popup {
-    border-radius: 2px !important;
-}
-
-.header-burger-open {
-    .menu {
-        display: block;
-        position: fixed;
-        width: 100%;
-        height: calc(100% - @header-size);
-        top: @header-size;
-        left: 0;
-        right: 0;
-        z-index: 9998;
-        background-color: @mobile-menu-background;
-        padding: @mobile-menu-padding-vertical @mobile-menu-padding-horizontal;
-        overflow: auto;
-        margin-top: 0;
-
-        @media only screen and (max-width: @header-mobile-width) {
-            height: calc(100% - @header-size-mobile);
-            top: @header-size-mobile;
-        }
-    }
-}
-
-.burger .burger-lines,
-.burger .burger-lines:after,
-.burger .burger-lines:before {
-    background-color: @header-menu-color;
-}
-
-
-.ant-layout-content {
-    background-color: @page-background;
-    z-index: 2;
-}
-
-.ant-layout-footer {
-    z-index: 1;
-    width: 100%;
-    padding: 40px 0 20px;
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2),
-        0 1px 1px 0 rgba(0, 0, 0, .14),
-        0 2px 1px -1px rgba(0, 0, 0, .12);
-    background: @footer-background;
-
-    @media only screen and (max-width: 800px) {
-        text-align: center;
-        padding: 30px 0 10px;
-    }
-
-    h1 {
-        color: @footer-color;
-        font-size: 25px;
-        padding: 0 10px;
-
-        margin: 0 calc((100% - 1200px) / 2);
-
-        @media only screen and (max-width: 800px) {
-            width: 100%;
-            margin: 0 auto;
-            font-size: 20px;
-        }
-    }
-
-    .line {
-        height: 20px;
-        opacity: .5;
-        border: 0;
-        border-radius: 50%;
-        border-bottom: 2px solid @primary-color;
-        width: 100%;
-    }
-
-
-    .links-bar,
-    .copyright {
-        padding: 0 10px;
-        display: inline-block;
-        width: 50%;
-        font-size: .875em;
-
-        a {
-            color: @footer-color;
-            text-decoration: underline;
-        }
-
-        @media screen and (min-width: 1200px) {
-            width: calc(50% - calc((100% - 1200px) / 2));
-        }
-
-        @media only screen and (max-width: 800px) {
-            display: block;
-            width: 100%;
-            margin: 20px auto !important;
-            font-size: 12px;
-            text-align: center;
-        }
-    }
-
-    .links-bar {
-        margin: 20px auto;
-
-        @media screen and (min-width: 1200px) {
-            margin-left: calc((100% - 1200px) / 2);
-        }
-    }
-
-    .copyright {
-        color: @footer-color;
-        text-align: right;
-
-        @media screen and (min-width: 1200px) {
-            margin-right: calc((100% - 1200px) / 2);
-        }
-    }
+main {
+    padding: 50px;
+    min-height: calc(100vh - 150px) !important;
 }
\ No newline at end of file
diff --git a/website/src/pages/Login/index.js b/website/src/pages/Login/index.js
new file mode 100644
index 0000000..651ab85
--- /dev/null
+++ b/website/src/pages/Login/index.js
@@ -0,0 +1,81 @@
+import React, { useState, useEffect } from "react";
+
+import { Form, Input, Button, Checkbox } from 'antd';
+import { UserOutlined, LockOutlined } from '@ant-design/icons';
+
+
+import './index.less';
+
+const layout = {
+    labelCol: { span: 8 },
+    wrapperCol: { span: 16 },
+};
+const tailLayout = {
+    wrapperCol: { offset: 8, span: 16 },
+};
+
+export default () => {
+
+    const onFinish = (values) => {
+        console.log('Received values of form: ', values);
+    };
+
+    return (
+        <div>
+            <h1>Login</h1>
+            <div className="login">
+                <Form
+                    name="normal_login"
+                    className="login-form"
+                    initialValues={{
+                        remember: true,
+                    }}
+                    onFinish={onFinish}
+                >
+                    <Form.Item
+                        name="username"
+                        rules={[
+                            {
+                                required: true,
+                                message: 'Please input your Username!',
+                            },
+                        ]}
+                    >
+                        <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
+                    </Form.Item>
+                    <Form.Item
+                        name="password"
+                        rules={[
+                            {
+                                required: true,
+                                message: 'Please input your Password!',
+                            },
+                        ]}
+                    >
+                        <Input.Password
+                            prefix={<LockOutlined className="site-form-item-icon" />}
+                            type="password"
+                            placeholder="Password"
+                        />
+                    </Form.Item>
+                    <Form.Item>
+                        <Form.Item name="remember" valuePropName="checked" noStyle>
+                            <Checkbox>Remember me</Checkbox>
+                        </Form.Item>
+
+                        <a className="login-form-forgot" href="">
+                            Forgot password
+        </a>
+                    </Form.Item>
+
+                    <Form.Item>
+                        <Button type="primary" htmlType="submit" className="login-form-button">
+                            Log in
+        </Button>
+        Or <a href="">register now!</a>
+                    </Form.Item>
+                </Form>
+            </div>
+        </div>
+    );
+};
\ No newline at end of file
diff --git a/website/src/pages/Login/index.less b/website/src/pages/Login/index.less
new file mode 100644
index 0000000..35f3241
--- /dev/null
+++ b/website/src/pages/Login/index.less
@@ -0,0 +1,3 @@
+.login {
+    max-width: 400px;
+}
\ No newline at end of file
diff --git a/website/src/pages/Register/index.js b/website/src/pages/Register/index.js
new file mode 100644
index 0000000..be22247
--- /dev/null
+++ b/website/src/pages/Register/index.js
@@ -0,0 +1,112 @@
+import { Form, Input, InputNumber, Button } from 'antd';
+const layout = {
+    labelCol: {
+        span: 8,
+    },
+    wrapperCol: {
+        span: 16,
+    },
+};
+/* eslint-disable no-template-curly-in-string */
+
+const validateMessages = {
+    required: '${label} is required!',
+    types: {
+        email: '${label} is not a valid email!',
+        number: '${label} is not a valid number!',
+    },
+    number: {
+        range: '${label} must be between ${min} and ${max}',
+    },
+};
+
+export default () => {
+
+    const onFinish = (values) => {
+        console.log(values);
+    };
+
+    return (
+        <div>
+            <div className="register">
+                <Form {...layout} name="nest-messages" onFinish={onFinish} validateMessages={validateMessages}>
+                    <Form.Item
+                        name="name"
+                        label="Name"
+                        rules={[
+                            {
+                                required: true,
+                            },
+                        ]}
+                    >
+                        <Input />
+                    </Form.Item>
+                    <Form.Item
+                        name="username"
+                        label="Username"
+                        rules={[
+                            {
+                                required: true,
+                            },
+                        ]}
+                    >
+                        <Input />
+                    </Form.Item>
+                    <Form.Item
+                        name="email"
+                        label="Email"
+                        rules={[
+                            { type: 'email', message: 'Invalid email.' },
+                            { required: true, message: 'Please input your email.' },
+                        ]}
+                    >
+                        <Input />
+                    </Form.Item>
+                    <Form.Item
+                        name="password"
+                        label="Password"
+                        rules={[
+                            {
+                                required: true,
+                                message: 'Please input your password!',
+                            },
+                        ]}
+                        hasFeedback
+                    >
+                        <Input.Password />
+                    </Form.Item>
+
+                    <Form.Item
+                        name="confirm"
+                        label="Confirm Password"
+                        dependencies={['password']}
+                        hasFeedback
+                        rules={[
+                            {
+                                required: true,
+                                message: 'Please confirm your password!',
+                            },
+                            ({ getFieldValue }) => ({
+                                validator(_, value) {
+                                    if (!value || getFieldValue('password') === value) {
+                                        return Promise.resolve();
+                                    }
+                                    return Promise.reject(new Error('The two passwords that you entered do not match!'));
+                                },
+                            }),
+                        ]}
+                    >
+                        <Input.Password />
+                    </Form.Item>
+                    <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 8 }}>
+                        <Button type="primary" htmlType="submit">
+                            Submit
+        </Button>
+                    </Form.Item>
+                </Form>
+            </div>
+        </div>
+    );
+
+
+}
\ No newline at end of file
diff --git a/website/src/pages/Register/index.less b/website/src/pages/Register/index.less
new file mode 100644
index 0000000..e69de29
diff --git a/website/src/pages/dashboard/index.js b/website/src/pages/dashboard/index.js
new file mode 100644
index 0000000..e69de29
diff --git a/website/src/pages/dashboard/index.less b/website/src/pages/dashboard/index.less
new file mode 100644
index 0000000..e69de29