diff --git a/packages/webapp/public/manifest.json b/packages/webapp/public/manifest.json
index 6898e2b1..46e82a49 100644
--- a/packages/webapp/public/manifest.json
+++ b/packages/webapp/public/manifest.json
@@ -1,6 +1,6 @@
 {
-    "short_name": "React App",
-    "name": "Create React App Sample",
+    "short_name": "WiseMapping",
+    "name": "WiseMapping",
     "icons": [{
             "src": "favicon.ico",
             "sizes": "64x64 32x32 24x24 16x16",
diff --git a/packages/webapp/src/app.tsx b/packages/webapp/src/app.tsx
index 2bb93ca2..4c59c6cd 100644
--- a/packages/webapp/src/app.tsx
+++ b/packages/webapp/src/app.tsx
@@ -2,6 +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 { RegistrationSuccessPage } from './components/registration-success-page';
 import { RegistationPage } from './components/registration-page';
 import LoginPage from './components/login-page';
@@ -47,21 +48,22 @@ const App = () => {
 
   return messages ? (
     <IntlProvider locale={locale} defaultLocale='en' messages={messages}>
-      <Router>
-        <Switch>
-          <Route exact path="/">
-            <Redirect to="/c/login" />
-          </Route>
-          <Route path="/c/login" component={LoginPage} />
-          <Route path="/c/user/registration">
-            <RegistationPage service={service} />
-          </Route>
-          <Route path="/c/user/registrationSuccess" component={RegistrationSuccessPage} />
-          <Route path="/c/user/resetPassword" component={ForgotPasswordPage} />
-        </Switch>
-      </Router>
+      <GlobalStyle/>
+        <Router>
+          <Switch>
+            <Route exact path="/">
+              <Redirect to="/c/login" />
+            </Route>
+            <Route path="/c/login" component={LoginPage} />
+            <Route path="/c/user/registration">
+              <RegistationPage service={service} />
+            </Route>
+            <Route path="/c/user/registrationSuccess" component={RegistrationSuccessPage} />
+            <Route path="/c/user/resetPassword" component={ForgotPasswordPage} />
+          </Switch>
+        </Router>
     </IntlProvider>
-  ) : <div>loading</div>
+  ) : <div>Loading ... </div>
 }
 
 export default App;
diff --git a/packages/webapp/src/components/footer/index.tsx b/packages/webapp/src/components/footer/index.tsx
index dcdb9a35..a18d97ab 100644
--- a/packages/webapp/src/components/footer/index.tsx
+++ b/packages/webapp/src/components/footer/index.tsx
@@ -1,13 +1,12 @@
 import React from 'react'
 import { FormattedMessage } from 'react-intl'
+import { StyledFooter } from './styled'
 
 const logo = require('../../images/logo-text.svg')
 
-
 const Footer = () => {
   return (
-    <footer className="footer" >
-      {/* Todo: Replace this with a SVG Image */}
+    <StyledFooter>
       <div style={{ padding: 0, margin: 0 }}>
         <a href="http://www.wisemapping.org/">
           <div style={{ textAlign: "left" }}>Powered By</div><img src={logo} alt="logo" />
@@ -28,7 +27,7 @@ const Footer = () => {
       <div>
         <div><span className="button-style2" >< a href="https://www.paypal.com/webapps/shoppingcart?flowlogging_id=c7ac923b53025&mfid=1606520600355_c7ac923b53025#/checkout/openButton">< FormattedMessage id="footer.donations" defaultMessage="PayPal Donations" /> </a></span ></div>
       </div>
-    </footer>
+    </StyledFooter>
   )
 }
 
diff --git a/packages/webapp/src/components/footer/styled.ts b/packages/webapp/src/components/footer/styled.ts
new file mode 100644
index 00000000..f1698d22
--- /dev/null
+++ b/packages/webapp/src/components/footer/styled.ts
@@ -0,0 +1,44 @@
+import styled from 'styled-components';
+/* Footer */
+
+export const StyledFooter = styled.footer`
+height: 250px;
+margin-top: 80px;
+padding: 60px 40px 10px 50px;
+background-color: #f9a826;
+display: grid;
+grid-template-columns: 200px 1fr 1fr 3fr;
+
+& a {
+    font-size: 14px;
+    color: white;
+    word-wrap: nowrap;
+}
+
+& h4 {
+    font-size: 14px;
+    color: white;
+    word-wrap: nowrap;
+    font-weight: 500px;
+    margin: 0px;
+}
+
+&>svg {
+    grid-column: 1;
+}
+
+& div:nth-child(2) {
+    grid-column: 2;
+}
+
+& div:nth-child(3) {
+    grid-column: 3;
+}
+
+& div:nth-child(4) {
+    grid-column: 4;
+    text-align: right;
+    display: inline-block;
+    visibility: visible;
+}`
+
diff --git a/packages/webapp/src/components/form-error-dialog/index.tsx b/packages/webapp/src/components/form-error-dialog/index.tsx
new file mode 100644
index 00000000..8997a6fd
--- /dev/null
+++ b/packages/webapp/src/components/form-error-dialog/index.tsx
@@ -0,0 +1,12 @@
+import React, { useEffect } from 'react'
+import { StyleDiv } from './styled'
+
+type FormErrorDialogProps = {
+  message: string | null;
+}
+
+const FormErrorDialog = (props: FormErrorDialogProps) => {
+  return props.message ? <StyleDiv>{props.message}</StyleDiv > : null;
+}
+export default FormErrorDialog;
+
diff --git a/packages/webapp/src/components/form-error-dialog/styled.ts b/packages/webapp/src/components/form-error-dialog/styled.ts
new file mode 100644
index 00000000..3c8ecb51
--- /dev/null
+++ b/packages/webapp/src/components/form-error-dialog/styled.ts
@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+
+export const StyleDiv = styled.div`
+margin: 10px auto;
+width: 260px;
+font-size: 15px;
+border: 2px solid #e97450;
+padding: 10px 10px;
+border-radius: 9px;
+color: white;
+background-color: #e78b72;
+`
diff --git a/packages/webapp/src/components/header/styled.ts b/packages/webapp/src/components/header/styled.ts
index 26a7d09d..8abbcf4c 100644
--- a/packages/webapp/src/components/header/styled.ts
+++ b/packages/webapp/src/components/header/styled.ts
@@ -38,6 +38,18 @@ z-index: 1;
 .header-area-right2 {
     grid-column-start: 4;
 }
+
+.header-area-right1 span,
+.header-area-right2 span {
+    font-size: 15px;
+}
+.header-area-content-span {
+    grid-column-start: 2;
+    grid-column-end: 4;
+    text-align: right;
+    font-size: 14px;
+    padding: 10px;
+}
 `;
 
 export const StyledDiv  = styled.nav`
diff --git a/packages/webapp/src/components/login-page/index.tsx b/packages/webapp/src/components/login-page/index.tsx
index 7c35f346..7056ab4c 100644
--- a/packages/webapp/src/components/login-page/index.tsx
+++ b/packages/webapp/src/components/login-page/index.tsx
@@ -5,23 +5,18 @@ import { Link } from 'react-router-dom'
 import Header from '../header'
 import Footer from '../footer'
 import SubmitButton from '../submit-button'
-
-const css = require('../../css/login.css')
-
+import FormErrorDialog from '../form-error-dialog'
 
 const ConfigStatusMessage = (props: any) => {
   const enabled = props.enabled
-  let result;
-
+  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>);
-  } else {
-    result = <span></span>;
-  }
+  } 
   return result;
 }
 
@@ -29,22 +24,17 @@ const LoginError = () => {
   // @Todo: This must be reviewed to be based on navigation state.
   // Login error example: http://localhost:8080/c/login?login.error=2
   const errorCode = new URLSearchParams(window.location.search).get('login_error');
+  const intl = useIntl();
 
-  let result;
+  let msg = null;
   if (errorCode) {
     if (errorCode === "3") {
-      result = (
-        <div className='form-error-dialog'>
-          <FormattedMessage 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!." />
-        </div>)
+      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 {
-      result = (
-        <div className='form-error-dialog'>
-          <FormattedMessage id="login.error" defaultMessage="The login.email address or login.password you entered is  not valid." />
-        </div>)
+      msg = intl.formatMessage({ id: "login.error", defaultMessage: "The login.email address or login.password you entered is  not valid."});
     }
   }
-  return (<span>{result}</span>);
+  return <FormErrorDialog message={msg} />
 
 }
 const LoginForm = () => {
diff --git a/packages/webapp/src/components/login-page/styled.ts b/packages/webapp/src/components/login-page/styled.ts
index 4f210a90..9bf5561d 100644
--- a/packages/webapp/src/components/login-page/styled.ts
+++ b/packages/webapp/src/components/login-page/styled.ts
@@ -1 +1,19 @@
 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;
+}
+`
diff --git a/packages/webapp/src/components/registration-page/index.tsx b/packages/webapp/src/components/registration-page/index.tsx
index 9540923e..d0dbdd70 100644
--- a/packages/webapp/src/components/registration-page/index.tsx
+++ b/packages/webapp/src/components/registration-page/index.tsx
@@ -1,9 +1,9 @@
-import React, { useState, useEffect} from 'react'
+import React, { useState, useEffect } from 'react'
 import { FormattedMessage, useIntl } from 'react-intl'
 import ReCAPTCHA from 'react-google-recaptcha'
 import { useHistory } from "react-router-dom"
 import { Service, NewUser } from '../../services/Service'
-
+import FormErrorDialog from '../form-error-dialog'
 
 import Header from '../header'
 import Footer from '../footer'
@@ -11,30 +11,6 @@ import SubmitButton from '../submit-button'
 
 const css = require('../../css/registration.css');
 
-interface ErrorMessageDialogProps {
-  message: string
-}
-
-const ErrorMessageDialog = (props: ErrorMessageDialogProps) => {
-  let result;
-
-  const message = props.message;
-  if (message) {
-    result = <p className='form-error-dialog'>{message}</p>
-  } else {
-    result = <span></span>
-  }
-  return result;
-}
-
-type RegistrationBody = {
-  email: string;
-  firstname: string;
-  lastlname: string;
-  password: string;
-  recaptcha: string | null;
-}
-
 const RegistrationForm = (props: ServiceProps) => {
   const [email, setEmail] = useState("");
   const [lastname, setLastname] = useState("")
@@ -70,35 +46,30 @@ const RegistrationForm = (props: ServiceProps) => {
   }
 
   return (
-    <div className="wrapper">
-      <div className="content">
-        <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>
+    <div className="content">
+      <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)}>
-          <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" />
+      <form action="/" 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>
-            <ReCAPTCHA
-              sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI"
-              onChange={setRecaptchaToken} />
-          </div>
+        <div>
+          <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>
 
-          <ErrorMessageDialog 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>
-
-          <SubmitButton disabled={disableButton} value={intl.formatMessage({ id: "registration.register", defaultMessage: "Register" })} />
-        </form>
-      </div>
+        <SubmitButton disabled={disableButton} value={intl.formatMessage({ id: "registration.register", defaultMessage: "Register" })} />
+      </form>
     </div>
   );
-
 }
 
 type ServiceProps = {
diff --git a/packages/webapp/src/components/registration-page/styled.ts b/packages/webapp/src/components/registration-page/styled.ts
new file mode 100644
index 00000000..86d8bb2e
--- /dev/null
+++ b/packages/webapp/src/components/registration-page/styled.ts
@@ -0,0 +1,17 @@
+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;
+}
+`
diff --git a/packages/webapp/src/components/registration-success-page/index.tsx b/packages/webapp/src/components/registration-success-page/index.tsx
index 3efb0055..fc8da2a8 100644
--- a/packages/webapp/src/components/registration-success-page/index.tsx
+++ b/packages/webapp/src/components/registration-success-page/index.tsx
@@ -1,10 +1,11 @@
 import React, { useEffect } from 'react'
 import { FormattedMessage } from 'react-intl'
+import StyledDiv from './styled'
 
 import Header, { SignInButton } from '../header'
 import Footer from '../footer'
+import PageContent from './styled'
 
-const css = require('../../css/success.css');
 
 const RegistrationSuccessPage = () => {
 
@@ -15,8 +16,7 @@ const RegistrationSuccessPage = () => {
   return (
     <div>
       <Header type='none' />
-      <div className="wrapper">
-        <div className="rcontent">
+      <PageContent>
           <h1>
             <FormattedMessage id="registration.success.title" defaultMessage="Your account has been created successfully" />
           </h1>
@@ -25,9 +25,8 @@ const RegistrationSuccessPage = () => {
           </p>
 
           <SignInButton style='style1'/>
+        </PageContent>
 
-        </div>
-      </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
new file mode 100644
index 00000000..1fc7d5ad
--- /dev/null
+++ b/packages/webapp/src/components/registration-success-page/styled.ts
@@ -0,0 +1,22 @@
+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/login.css b/packages/webapp/src/css/login.css
deleted file mode 100644
index 117ac60f..00000000
--- a/packages/webapp/src/css/login.css
+++ /dev/null
@@ -1,39 +0,0 @@
-@import "core.css";
-.wrapper {
-    max-width: 1024px;
-    display: grid;
-    grid-template-areas: "content" "footer";
-}
-
-.content {
-    grid-area: content;
-    text-align: center;
-}
-
-.content input:placeholder {
-    color: grey;
-}
-
-.content label {
-    font-size: 14px;
-}
-
-.content a {
-    color: #f9a826;
-    font-size: 15px;
-}
-
-.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/css/registration.css b/packages/webapp/src/css/registration.css
index 19730664..4531de2a 100644
--- a/packages/webapp/src/css/registration.css
+++ b/packages/webapp/src/css/registration.css
@@ -1,10 +1,3 @@
-@import "core.css";
-.wrapper {
-    max-width: 1024px;
-    display: grid;
-    grid-template-areas: "content" "footer";
-}
-
 .content {
     grid-area: content;
     text-align: center;
@@ -15,28 +8,4 @@ form>div {
     font-size: 13px;
     width: 300px;
     margin: auto;
-}
-
-.content label {
-    font-size: 14px;
-}
-
-.content a {
-    color: #f9a826;
-    font-size: 15px;
-}
-
-.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/css/reset-password.css b/packages/webapp/src/css/reset-password.css
deleted file mode 100644
index 117ac60f..00000000
--- a/packages/webapp/src/css/reset-password.css
+++ /dev/null
@@ -1,39 +0,0 @@
-@import "core.css";
-.wrapper {
-    max-width: 1024px;
-    display: grid;
-    grid-template-areas: "content" "footer";
-}
-
-.content {
-    grid-area: content;
-    text-align: center;
-}
-
-.content input:placeholder {
-    color: grey;
-}
-
-.content label {
-    font-size: 14px;
-}
-
-.content a {
-    color: #f9a826;
-    font-size: 15px;
-}
-
-.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/css/success.css b/packages/webapp/src/css/success.css
deleted file mode 100644
index 9c7c4ae5..00000000
--- a/packages/webapp/src/css/success.css
+++ /dev/null
@@ -1,22 +0,0 @@
-@import "core.css";
-.wrapper {
-    max-width: 1024px;
-    min-height: 400px;
-}
-
-.rcontent {
-    padding-top: 100px;
-    grid-area: content;
-    text-align: center;
-}
-
-.rcontent p {
-    color: black;
-    font-size: 18px;
-    margin: 10px 0px 30px 0px;
-}
-
-.rcontent h1 {
-    color: #f9a826;
-    font-size: 30px;
-}
\ No newline at end of file
diff --git a/packages/webapp/src/css/core.css b/packages/webapp/src/theme/global-style.ts
similarity index 63%
rename from packages/webapp/src/css/core.css
rename to packages/webapp/src/theme/global-style.ts
index ad2f137c..803607b8 100644
--- a/packages/webapp/src/css/core.css
+++ b/packages/webapp/src/theme/global-style.ts
@@ -1,3 +1,7 @@
+import { 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;
@@ -52,90 +56,6 @@ p {
     color: #000000;
 }
 
-
-/* Footer */
-
-.footer {
-    height: 250px;
-    margin-top: 80px;
-    padding: 60px 40px 10px 50px;
-    background-color: #f9a826;
-    display: grid;
-}
-
-.footer a {
-    font-size: 14px;
-    color: white;
-    word-wrap: nowrap;
-}
-
-.footer h4 {
-    font-size: 14px;
-    color: white;
-    word-wrap: nowrap;
-    font-weight: 500px;
-    margin: 0px;
-}
-
-.footer>svg {
-    grid-column: 1;
-}
-
-.footer div:nth-child(2) {
-    grid-column: 2;
-}
-
-.footer div:nth-child(3) {
-    grid-column: 3;
-}
-
-.footer {
-    grid-template-columns: 200px 1fr 1fr 3fr;
-}
-
-.footer>svg {
-    display: inline-block;
-    visibility: visible;
-}
-
-.footer div:nth-child(4) {
-    grid-column: 4;
-    text-align: right;
-    display: inline-block;
-    visibility: visible;
-}
-
-.header-area-right1 span,
-.header-area-right2 span {
-    font-size: 15px;
-}
-
-.header-area-content-span {
-    grid-column-start: 2;
-    grid-column-end: 4;
-    text-align: right;
-    font-size: 14px;
-    padding: 10px;
-}
-
-@media (max-width: 500px) {
-    .footer {
-        grid-template-columns: 0px 1fr 1fr 5px;
-    }
-    .footer div:nth-child(1),
-    .footer div:nth-child(4),
-    .header-area-content-span {
-        display: none;
-        visibility: hidden;
-    }
-    .header {
-        display: grid;
-        white-space: nowrap;
-        grid-template-columns: 100px 1fr 130px 130px;
-    }
-}
-
-
 /* Form Styles Section */
 
 input[type=email],
@@ -179,17 +99,6 @@ input:placeholder {
     color: grey;
 }
 
-.form-error-dialog {
-    margin: 10px auto;
-    width: 260px;
-    font-size: 15px;
-    border: 2px solid #e97450;
-    padding: 10px 10px;
-    border-radius: 9px;
-    color: white;
-    background-color: #e78b72;
-}
-
 
 /* Buttons */
 
@@ -248,4 +157,7 @@ input:placeholder {
     background-color: white;
     border: solid 1px #ffa800;
     font-weight: 600;
-}
\ No newline at end of file
+}
+`;
+ 
+export default GlobalStyle;
\ No newline at end of file