diff --git a/packages/webapp/src/app.tsx b/packages/webapp/src/app.tsx
index 4c59c6cd..8ba8e8a0 100644
--- a/packages/webapp/src/app.tsx
+++ b/packages/webapp/src/app.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { Service, RestService } from './services/Service';
 import { IntlProvider } from 'react-intl'
 
-import GlobalStyle from './theme/global-style';
+import {GlobalStyle} from './theme/global-style';
 import { RegistrationSuccessPage } from './components/registration-success-page';
 import { RegistationPage } from './components/registration-page';
 import LoginPage from './components/login-page';
@@ -13,6 +13,7 @@ import {
   Redirect,
   BrowserRouter as Router,
 } from 'react-router-dom';
+
 import { ForgotPasswordPage } from './components/forgot-password-page';
 
 function loadLocaleData(language: string) {
diff --git a/packages/webapp/src/components/forgot-password-page/index.tsx b/packages/webapp/src/components/forgot-password-page/index.tsx
index 50c1d479..7c400fa5 100644
--- a/packages/webapp/src/components/forgot-password-page/index.tsx
+++ b/packages/webapp/src/components/forgot-password-page/index.tsx
@@ -3,13 +3,14 @@ import { FormattedMessage, useIntl } from 'react-intl'
 import { useHistory } from "react-router-dom"
 import { Service } from '../../services/Service'
 
+import { PageContent } from '../../theme/global-style';
+
+
 
 import Header from '../header'
 import Footer from '../footer'
 import SubmitButton from '../submit-button'
 
-const css = require('../../css/registration.css');
-
 interface ErrorMessageDialogProps {
   message: string
 }
@@ -36,7 +37,7 @@ const RegistrationForm = (props: ServiceProps) => {
     event.preventDefault();
     setDisableButton(true);
 
-    
+
     // Call Service ...
     props.service.resetPassword(
       email,
@@ -46,20 +47,18 @@ const RegistrationForm = (props: ServiceProps) => {
   }
 
   return (
-    <div className="wrapper">
-      <div className="content">
-        <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>
+    <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>
 
-        <form action="/" method="POST" onSubmit={e => handleSubmit(e)}>
-          <input type="email" name="email" onChange={e => setEmail(e.target.value)} placeholder={intl.formatMessage({ id: "forgot.email", defaultMessage: "Email" })} required={true} autoComplete="email" />
+      <form method="POST" onSubmit={e => handleSubmit(e)}>
+        <input type="email" name="email" onChange={e => setEmail(e.target.value)} placeholder={intl.formatMessage({ id: "forgot.email", defaultMessage: "Email" })} required={true} autoComplete="email" />
 
-          <ErrorMessageDialog message={errorMsg} />
+        <ErrorMessageDialog message={errorMsg} />
 
-          <SubmitButton disabled={disableButton} value={intl.formatMessage({ id: "forgot.register", defaultMessage: "Send recovery link" })} />
-        </form>
-      </div>
-    </div>
+        <SubmitButton disabled={disableButton} value={intl.formatMessage({ id: "forgot.register", defaultMessage: "Send recovery link" })} />
+      </form>
+    </PageContent>
   );
 }
 
diff --git a/packages/webapp/src/components/login-page/index.tsx b/packages/webapp/src/components/login-page/index.tsx
index 7056ab4c..2132fcc7 100644
--- a/packages/webapp/src/components/login-page/index.tsx
+++ b/packages/webapp/src/components/login-page/index.tsx
@@ -2,21 +2,25 @@ import React, { useEffect } from 'react'
 import { FormattedMessage, useIntl } from 'react-intl'
 import { Link } from 'react-router-dom'
 
+import {PageContent} from '../../theme/global-style';
+import FormErrorDialog from '../form-error-dialog'
+
+
 import Header from '../header'
 import Footer from '../footer'
 import SubmitButton from '../submit-button'
-import FormErrorDialog from '../form-error-dialog'
+
 
 const ConfigStatusMessage = (props: any) => {
   const enabled = props.enabled
-  let result= null;
+  let result = null;
   if (enabled === true) {
     result = (<div className="db-warn-msg">
       <p>
         <FormattedMessage id="login.hsqldbcofig" defaultMessage="Although HSQLDB is bundled with WiseMapping by default during the installation, we do not recommend this database for production use. Please consider using MySQL 5.7 instead. You can find more information how to configure MySQL" description="Missing production database configured" /><a href="https://wisemapping.atlassian.net/wiki/display/WS/Database+Configuration"> here</a>
       </p>
     </div>);
-  } 
+  }
   return result;
 }
 
@@ -29,20 +33,27 @@ const LoginError = () => {
   let msg = null;
   if (errorCode) {
     if (errorCode === "3") {
-      msg = intl.formatMessage({ id: "login.userinactive", defaultMessage: "Sorry, your account has not been activated yet. You'll receive a notification login.email when it becomes active. Stay tuned!."});
+      msg = intl.formatMessage({ id: "login.userinactive", defaultMessage: "Sorry, your account has not been activated yet. You'll receive a notification login.email when it becomes active. Stay tuned!." });
     } else {
-      msg = intl.formatMessage({ id: "login.error", defaultMessage: "The login.email address or login.password you entered is  not valid."});
+      msg = intl.formatMessage({ id: "login.error", defaultMessage: "The login.email address or login.password you entered is  not valid." });
     }
   }
   return <FormErrorDialog message={msg} />
 
 }
-const LoginForm = () => {
+
+const LoginPage = () => {
   const intl = useIntl();
 
+  useEffect(() => {
+    document.title = 'Login | WiseMapping';
+  });
+
   return (
-    <div className="wrapper">
-      <div className="content">
+    <div>
+      <Header type='only-signup' />
+
+      <PageContent>
         <h1><FormattedMessage id="login.title" defaultMessage="Welcome" /></h1>
         <p><FormattedMessage id="login.desc" defaultMessage="Log Into Your Account" /></p>
 
@@ -59,22 +70,11 @@ const LoginForm = () => {
           <SubmitButton value={intl.formatMessage({ id: "login.signin", defaultMessage: "Sign In" })} />
         </form>
         <Link to="/c/user/resetPassword"><FormattedMessage id="login.forgotpwd" defaultMessage="Forgot Password ?" /></Link>
-      </div>
-    </div>
-  );
-}
 
-const LoginPage = () => {
+        <ConfigStatusMessage enabled='false' />
 
-  useEffect(() => {
-    document.title = 'Login | WiseMapping';
-  });
+      </PageContent>
 
-  return (
-    <div>
-      <Header type='only-signup' />
-      <LoginForm />
-      <ConfigStatusMessage enabled='false' />
       <Footer />
     </div>
   );
diff --git a/packages/webapp/src/components/registration-page/index.tsx b/packages/webapp/src/components/registration-page/index.tsx
index d0dbdd70..c928d5f3 100644
--- a/packages/webapp/src/components/registration-page/index.tsx
+++ b/packages/webapp/src/components/registration-page/index.tsx
@@ -9,7 +9,8 @@ import Header from '../header'
 import Footer from '../footer'
 import SubmitButton from '../submit-button'
 
-const css = require('../../css/registration.css');
+import { StyledReCAPTCHA } from './styled';
+import { PageContent } from '../../theme/global-style';
 
 const RegistrationForm = (props: ServiceProps) => {
   const [email, setEmail] = useState("");
@@ -46,29 +47,31 @@ const RegistrationForm = (props: ServiceProps) => {
   }
 
   return (
-    <div className="content">
+    <PageContent>
       <h1><FormattedMessage id="registration.title" defaultMessage="Become a member of our comunity" /></h1>
       <p><FormattedMessage id="registration.desc" defaultMessage="Signing up is free and just take a moment " /></p>
 
-      <form action="/" method="POST" onSubmit={e => handleSubmit(e)}>
+      <form method="POST" onSubmit={e => handleSubmit(e)}>
         <input type="email" name="email" onChange={e => setEmail(e.target.value)} placeholder={intl.formatMessage({ id: "registration.email", defaultMessage: "Email" })} required={true} autoComplete="email" />
         <input type="text" name="firstname" onChange={e => setFirstname(e.target.value)} placeholder={intl.formatMessage({ id: "registration.firstname", defaultMessage: "First Name" })} required={true} autoComplete="given-name" />
         <input type="text" name="lastname" onChange={e => setLastname(e.target.value)} placeholder={intl.formatMessage({ id: "registration.lastname", defaultMessage: "Last Name" })} required={true} autoComplete="family-name" />
         <input type="password" name="password" onChange={e => setPassword(e.target.value)} placeholder={intl.formatMessage({ id: "registration.password", defaultMessage: "Password" })} required={true} autoComplete="new-password" />
 
-        <div>
+        <StyledReCAPTCHA>
           <ReCAPTCHA
             sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI"
             onChange={setRecaptchaToken} />
-        </div>
-        <FormErrorDialog message={errorMsg} />
-        <p>
-          <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" />
-        </p>
+        </StyledReCAPTCHA>
 
-        <SubmitButton disabled={disableButton} value={intl.formatMessage({ id: "registration.register", defaultMessage: "Register" })} />
+        <FormErrorDialog message={errorMsg} />
+
+        <div style={{ width: "300px", textAlign: "center", fontSize:"13px",margin:"auto" }}>
+          <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>
+
+      <SubmitButton disabled={disableButton} value={intl.formatMessage({ id: "registration.register", defaultMessage: "Register" })} />
       </form>
-    </div>
+    </PageContent >
   );
 }
 
diff --git a/packages/webapp/src/components/registration-page/styled.ts b/packages/webapp/src/components/registration-page/styled.ts
index 86d8bb2e..0af9ce4e 100644
--- a/packages/webapp/src/components/registration-page/styled.ts
+++ b/packages/webapp/src/components/registration-page/styled.ts
@@ -1,4 +1,11 @@
 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;
@@ -13,5 +20,4 @@ export const StyledNav = styled.div`
     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 fc8da2a8..31a836b5 100644
--- a/packages/webapp/src/components/registration-success-page/index.tsx
+++ b/packages/webapp/src/components/registration-success-page/index.tsx
@@ -1,14 +1,14 @@
 import React, { useEffect } from 'react'
 import { FormattedMessage } from 'react-intl'
-import StyledDiv from './styled'
+
+import {PageContent} from '../../theme/global-style';
 
 import Header, { SignInButton } from '../header'
 import Footer from '../footer'
-import PageContent from './styled'
+
 
 
 const RegistrationSuccessPage = () => {
-
   useEffect(() => {
     document.title = 'Registration | WiseMapping';
   });
@@ -16,17 +16,18 @@ const RegistrationSuccessPage = () => {
   return (
     <div>
       <Header type='none' />
+      <div>
       <PageContent>
-          <h1>
-            <FormattedMessage id="registration.success.title" defaultMessage="Your account has been created successfully" />
-          </h1>
-          <p>
-            <FormattedMessage id="registration.success.desc" defaultMessage="Click 'Sign In' button below and start creating mind maps." />
-          </p>
-
-          <SignInButton style='style1'/>
-        </PageContent>
+        <h1>
+          <FormattedMessage id="registration.success.title" defaultMessage="Your account has been created successfully" />
+        </h1>
+        <p>
+          <FormattedMessage id="registration.success.desc" defaultMessage="Click 'Sign In' button below and start creating mind maps." />
+        </p>
 
+        <SignInButton style='style1' />
+      </PageContent>
+      </div>
       <Footer />
     </div>
   );
diff --git a/packages/webapp/src/components/registration-success-page/styled.ts b/packages/webapp/src/components/registration-success-page/styled.ts
deleted file mode 100644
index 1fc7d5ad..00000000
--- a/packages/webapp/src/components/registration-success-page/styled.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import styled from 'styled-components';
-
-const PageContent = styled.div`
-max-width: 1024px;
-min-height: 400px;
-margin: auto;
-padding-top: 100px;
-grid-area: content;
-text-align: center;
-
-& p {
-    color: black;
-    font-size: 18px;
-    margin: 10px 0px 30px 0px;
-}
-
-& h1 {
-    color: #f9a826;
-    font-size: 30px;
-}`
-
-export default PageContent;
\ No newline at end of file
diff --git a/packages/webapp/src/css/registration.css b/packages/webapp/src/css/registration.css
deleted file mode 100644
index 4531de2a..00000000
--- a/packages/webapp/src/css/registration.css
+++ /dev/null
@@ -1,11 +0,0 @@
-.content {
-    grid-area: content;
-    text-align: center;
-}
-
-form>p,
-form>div {
-    font-size: 13px;
-    width: 300px;
-    margin: auto;
-}
\ No newline at end of file
diff --git a/packages/webapp/src/theme/global-style.ts b/packages/webapp/src/theme/global-style.ts
index 803607b8..6f5e2fce 100644
--- a/packages/webapp/src/theme/global-style.ts
+++ b/packages/webapp/src/theme/global-style.ts
@@ -1,5 +1,6 @@
-import { createGlobalStyle } from 'styled-components';
- 
+import styled, { createGlobalStyle } from 'styled-components';
+
+
 const GlobalStyle = createGlobalStyle`
   
 @import url('https://fonts.googleapis.com/css?family=Montserrat:100,300,400,700,900');
@@ -12,94 +13,11 @@ body {
     margin: 0px;
 }
 
-.wrapper {
-    max-width: 1024px;
-    margin: auto;
-}
-
-.wrapper>* {
-    border-radius: 5px;
-    padding: 10px;
-}
-
-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 {
     text-decoration: none;
     transition: background-color 0.3s ease;
 }
 
-p {
-    font-size: 20px;
-    font-weight: 300;
-    font-stretch: normal;
-    font-style: normal;
-    line-height: 1.36;
-    letter-spacing: normal;
-    text-align: center;
-    color: #000000;
-}
-
-/* Form Styles Section */
-
-input[type=email],
-input[type=password],
-input[type=text] {
-    width: 258px;
-    height: 53px;
-    padding: 0px 20px;
-    margin: 10px 20px;
-    border-radius: 9px;
-    font-size: 16px;
-    border: solid 1px #f9a826;
-    display: block;
-    margin: 10px auto;
-}
-
-input[type=checkbox] {
-    border: solid 1px #f9a826;
-    background-color: #f9a826;
-}
-
-input[type=submit],
-input[type=button] {
-    width: 258px;
-    height: 53px;
-    padding: 0px 20px;
-    margin: 10px 20px;
-    font-size: 20px;
-    font-weight: 600;
-    border-radius: 9px;
-    border: 0px;
-    background-color: rgba(255, 168, 0, 0.6);
-    color: white;
-}
-
-input[type=submit]:hover {
-    background-color: #f9a826;
-}
-
-input:placeholder {
-    color: grey;
-}
-
-
 /* Buttons */
 
 .button-style1,
@@ -158,6 +76,82 @@ input:placeholder {
     border: solid 1px #ffa800;
     font-weight: 600;
 }
+
 `;
- 
-export default GlobalStyle;
\ No newline at end of file
+const PageContent = styled.div`
+max-width: 800px;
+min-height: 400px;
+margin: 10px auto;
+text-align:center;
+padding: 20px 10px 20px 10px;
+
+/* Form Styles Section */
+
+& input[type=email],
+& input[type=password],
+& input[type=text] {
+    width: 258px;
+    height: 53px;
+    padding: 0px 20px;
+    margin: 10px 20px;
+    border-radius: 9px;
+    font-size: 16px;
+    border: solid 1px #f9a826;
+    display: block;
+    margin: 10px auto;
+}
+
+& input[type=checkbox] {
+    border: solid 1px #f9a826;
+    background-color: #f9a826;
+}
+
+& input[type=submit],
+& input[type=button] {
+    width: 258px;
+    height: 53px;
+    padding: 0px 20px;
+    margin: 10px 20px;
+    font-size: 20px;
+    font-weight: 600;
+    border-radius: 9px;
+    border: 0px;
+    background-color: rgba(255, 168, 0, 0.6);
+    color: white;
+}
+
+& input[type=submit]:hover {
+    background-color: #f9a826;
+}
+
+& 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: 17px;
+    color: #f9a826;
+}
+`;
+
+
+
+export { GlobalStyle, PageContent };
\ No newline at end of file
diff --git a/packages/webapp/webpack.config.js b/packages/webapp/webpack.config.js
index e398c157..af190a49 100644
--- a/packages/webapp/webpack.config.js
+++ b/packages/webapp/webpack.config.js
@@ -23,12 +23,7 @@ module.exports = {
                 test: /\.tsx?$/,
                 use: 'ts-loader',
                 exclude: '/node_modules/'
-            },
-            {
-                test: /\.css$/,
-                use: ["style-loader", "css-loader"]
-
-            },
+            }, ,
             {
                 test: /\.(png|jpe?g|gif|svg)$/,
                 use: [{