diff --git a/packages/editor/src/components/canvas/index.tsx b/packages/editor/src/components/canvas/index.tsx
index d6b06f40..6ad5cb89 100644
--- a/packages/editor/src/components/canvas/index.tsx
+++ b/packages/editor/src/components/canvas/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { StyledCanvas } from './styled';
 
-const Canvas = () => (
+const Canvas = (): React.ReactElement => (
   <StyledCanvas>canvas</StyledCanvas>
 );
 
diff --git a/packages/editor/src/components/footer/index.tsx b/packages/editor/src/components/footer/index.tsx
index 765db58d..da0aad74 100644
--- a/packages/editor/src/components/footer/index.tsx
+++ b/packages/editor/src/components/footer/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { StyledFooter } from './styled';
 
-const Footer = () => (
+const Footer = (): React.ReactElement => (
   <StyledFooter>footer</StyledFooter>
 );
 
diff --git a/packages/editor/src/components/frame/index.tsx b/packages/editor/src/components/frame/index.tsx
index 1f8a8974..2cf8527f 100644
--- a/packages/editor/src/components/frame/index.tsx
+++ b/packages/editor/src/components/frame/index.tsx
@@ -4,7 +4,7 @@ import TopBar from '../top-bar';
 import Canvas from '../canvas';
 import { StyledFrame } from './styled';
 
-const Frame = () => (
+const Frame = (): React.ReactElement => (
   <StyledFrame>
     <TopBar />
     <Canvas />
diff --git a/packages/editor/src/components/top-bar/index.tsx b/packages/editor/src/components/top-bar/index.tsx
index 3561cb14..5670f1de 100644
--- a/packages/editor/src/components/top-bar/index.tsx
+++ b/packages/editor/src/components/top-bar/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { StyledTopBar } from './styled'
 
-const TopBar = () => (
+const TopBar = ():React.ReactElement => (
   <StyledTopBar>top bar</StyledTopBar>
 );
 
diff --git a/packages/editor/src/size.ts b/packages/editor/src/size.ts
index c44d4d06..e3432eb0 100644
--- a/packages/editor/src/size.ts
+++ b/packages/editor/src/size.ts
@@ -1,3 +1,4 @@
+
 const unit = 4; // pixels
 
 export const XS = '4px';
@@ -6,4 +7,4 @@ export const M = '16px';
 export const L = '24px';
 export const XL = '24px';
 
-export const times = (n: number) => `${unit * n}px`;
+export const times = (n: number):string => `${unit * n}px`;
diff --git a/packages/webapp/src/components/layout/header/index.tsx b/packages/webapp/src/components/layout/header/index.tsx
index ce207777..60c7a068 100644
--- a/packages/webapp/src/components/layout/header/index.tsx
+++ b/packages/webapp/src/components/layout/header/index.tsx
@@ -11,49 +11,43 @@ interface HeaderProps {
   type: 'only-signup' | 'only-signin' | 'none';
 }
 
-class Header extends React.Component<HeaderProps, HeaderProps> {
-  constructor(props: HeaderProps) {
-    super(props);
-    this.state = { type: props.type };
-  }
-  render(): React.ReactElement {
-    let signUpButton;
-    let signInButton;
-    let text;
+export const Header = ({ type }: HeaderProps): React.ReactElement => {
 
-    const pageType = this.state.type;
-    if (pageType === 'only-signup') {
-      text = <span className="header-area-content-span"><span><FormattedMessage id="header.donthaveaccount" defaultMessage="Don't have an account ?" /></span></span>;
-      signUpButton = <SignUpButton className="header-area-right2" />;
-    } else if (pageType === 'only-signin') {
-      text = <span className="header-area-content-span"><span><FormattedMessage id="header.haveaccount" defaultMessage="Already have an account?" /></span></span>;
-      signUpButton = <SignInButton className="header-area-right2" />;
-    } else if (pageType === 'none') {
-      text = '';
-      signUpButton = '';
-    } else {
-      signUpButton = <SignUpButton className="header-area-right2" />
-      signInButton = <SignInButton className="header-area-right2" />;
-    }
-
-    return (
-      <StyledNav>
-        <StyledDiv>
-          <Logo><Link to="/c/login" className="header-logo"><img src={String(logo)} alt="logo" /></Link></Logo>
-          {text}
-          {signUpButton}
-          {signInButton}
-        </StyledDiv>
-      </StyledNav>
-    )
+  let signUpButton;
+  let text;
+  let signInButton;
+  if (type === 'only-signup') {
+    text = <span className="header-area-content-span"><span><FormattedMessage id="header.donthaveaccount" defaultMessage="Don't have an account ?" /></span></span>;
+    signUpButton = <SignUpButton className="header-area-right2" />;
+  } else if (type === 'only-signin') {
+    text = <span className="header-area-content-span"><span><FormattedMessage id="header.haveaccount" defaultMessage="Already have an account?" /></span></span>;
+    signUpButton = <SignInButton className="header-area-right2" />;
+  } else if (type === 'none') {
+    text = '';
+    signUpButton = '';
+  } else {
+    signUpButton = <SignUpButton className="header-area-right2" />
+    signInButton = <SignInButton className="header-area-right2" />;
   }
+
+  return (
+    <StyledNav>
+      <StyledDiv>
+        <Logo><Link to="/c/login" className="header-logo"><img src={String(logo)} alt="logo" /></Link></Logo>
+        {text}
+        {signUpButton}
+        {signInButton}
+      </StyledDiv>
+    </StyledNav>
+  )
 }
 
+
 interface ButtonProps {
   className?: string;
 }
 
-const SignInButton = (props: ButtonProps): React.ReactElement => {
+export const SignInButton = (props: ButtonProps): React.ReactElement => {
   return (
     <span className={`${props.className}`}>
       <Button color="primary" size="medium" variant="outlined" component={Link} to="/c/login"><FormattedMessage id="login.signin" defaultMessage="Sign In" /></Button>
@@ -67,5 +61,4 @@ const SignUpButton = (props: ButtonProps): React.ReactElement => {
     </span>);
 }
 
-export { SignInButton, SignUpButton };
 export default Header;