diff --git a/ui/src/views/Deployment.tsx b/ui/src/views/Deployment.tsx
index 6be9abdd..13792ef4 100644
--- a/ui/src/views/Deployment.tsx
+++ b/ui/src/views/Deployment.tsx
@@ -24,7 +24,7 @@ import {
 } from "../models"
 import { subscribeEvents } from "../apis"
 
-import Main from "./Main"
+import Main from "./main"
 import ReviewModal from "../components/ReviewModal"
 import Spin from "../components/Spin"
 import DeploymentDescriptor from "../components/DeploymentDescriptor"
diff --git a/ui/src/views/Home.tsx b/ui/src/views/Home.tsx
index 40a9842b..29f82cdd 100644
--- a/ui/src/views/Home.tsx
+++ b/ui/src/views/Home.tsx
@@ -8,7 +8,7 @@ import { homeSlice, listRepos, perPage, sync, homeSlice as slice } from '../redu
 import { RequestStatus } from '../models'
 import { subscribeEvents } from "../apis"
 
-import Main from './Main'
+import Main from './main'
 import SyncButton from "../components/SyncButton"
 import RepoList from '../components/RepoList'
 import Pagination from '../components/Pagination'
diff --git a/ui/src/views/Main.tsx b/ui/src/views/Main.tsx
deleted file mode 100644
index e15004dd..00000000
--- a/ui/src/views/Main.tsx
+++ /dev/null
@@ -1,180 +0,0 @@
-import { useEffect, useState } from "react"
-import { shallowEqual } from "react-redux"
-import { Layout, Menu, Row, Col, Result, Button, Drawer, Avatar, Dropdown, Badge} from "antd"
-import { SettingFilled } from "@ant-design/icons"
-import { Helmet } from "react-helmet"
-import moment from "moment"
-
-import { useAppSelector, useAppDispatch } from "../redux/hooks"
-import { init, searchDeployments, searchReviews, fetchLicense, notifyDeploymentEvent, notifyReviewmentEvent, mainSlice as slice } from "../redux/main"
-import { subscribeEvents } from "../apis"
-
-import RecentActivities from "../components/RecentActivities"
-import LicenseFooter from "../components/LicenseFooter"
-
-import Logo from "../logo.svg"
-
-const { Header, Content, Footer } = Layout
-
-// eslint-disable-next-line
-export default function Main(props: any) { 
-    const { 
-        available, 
-        authorized, 
-        expired,
-        user,
-        deployments,
-        reviews,
-        license,
-    } = useAppSelector(state => state.main, shallowEqual)
-    const dispatch = useAppDispatch()
-
-    useEffect(() => {
-        dispatch(init())
-        dispatch(searchDeployments())
-        dispatch(searchReviews())
-        dispatch(fetchLicense())
-
-        const sub = subscribeEvents((event) => {
-            dispatch(slice.actions.handleDeploymentEvent(event))
-            dispatch(slice.actions.handleReviewEvent(event))
-            dispatch(notifyDeploymentEvent(event))
-            dispatch(notifyReviewmentEvent(event))
-        })
-
-        return () => {
-            sub.close()
-        }
-    }, [dispatch])
-
-    const onClickRetry = () => {
-        dispatch(slice.actions.setAvailable(true))
-        dispatch(slice.actions.setExpired(false))
-    }
-
-    const [ isRecentActivitiesVisible, setRecentActivitiesVisible ] = useState(false)
-
-    const showRecentActivities = () => {
-        setRecentActivitiesVisible(true)
-    }
-
-    const onCloseRecentActivities = () => {
-        setRecentActivitiesVisible(false)
-    }
-
-    // Count of recent activities.
-    const countActivities = deployments.length + reviews.length
-
-    let content: React.ReactElement
-    if (!available) {
-        content = <Result
-            style={{paddingTop: '120px'}}
-            status="error"
-            title="Server Internal Error"
-            subTitle="Sorry, something went wrong. Contact administrator."
-            extra={[<Button key="console" type="primary" onClick={onClickRetry}>Retry</Button>]}
-        />
-    } else if (!authorized) {
-        content = <Result
-            style={{paddingTop: '120px'}}
-            status="warning"
-            title="Unauthorized Error"
-            subTitle="Sorry, you are not authorized."
-            extra={[<Button key="console" type="primary" href="/">Sign in</Button>]}
-        />
-    } else if (expired) {
-        content = <Result
-            style={{paddingTop: '120px'}}
-            status="warning"
-            title="License Expired"
-            subTitle="Sorry, the license is expired."
-            extra={[<Button key="console" type="primary" onClick={onClickRetry}>Retry</Button>]}
-        />
-    } else {
-        content = props.children
-    }
-
-    return (
-        <Layout className="layout">
-            <Helmet>
-                <title>Gitploy</title>
-                {(deployments.length + reviews.length > 0)?
-                    <link rel="icon" href="/spinner.ico" />:
-                    <link rel="icon" href="/favicon.ico" />}
-            </Helmet>
-            <Header>
-                <Row>
-                    <Col span="16">
-                        <Menu theme="dark" mode="horizontal" >
-                            <Menu.Item key={0}><a href="/"><img src={Logo} style={{width: 62}}/></a></Menu.Item>
-                            <Menu.Item key={1}><a href="/">Home</a></Menu.Item>
-                            {(user?.admin)? <Menu.Item key={2}><a href="/members">Members</a></Menu.Item>: null}
-                        </Menu>
-                    </Col>
-                    <Col span="8" style={{textAlign: "right"}}>
-                        <Badge 
-                            size="small" 
-                            count={countActivities}
-                        >
-                            <Button 
-                                type="primary" 
-                                shape="circle" 
-                                icon={<SettingFilled spin={countActivities !== 0 }/>}
-                                onClick={showRecentActivities}
-                            />
-                        </Badge>
-                        <Drawer title="Recent Activities"
-                            placement="right"
-                            width={400}
-                            visible={isRecentActivitiesVisible}
-                            onClose={onCloseRecentActivities}
-                        >
-                            <RecentActivities 
-                                deployments={deployments}
-                                reviews={reviews}
-                            />
-                        </Drawer>
-                        &nbsp; &nbsp;
-
-                        {/* Avatar */}
-                        {(authorized) ? 
-                            <Dropdown overlay={
-                                <Menu>
-                                    <Menu.Item key="0">
-                                        <a href="/settings">Settings</a>
-                                    </Menu.Item>
-                                    <Menu.Divider />
-                                    <Menu.Item key="1">
-                                        <a href="https://www.gitploy.io/docs/" target="_blank">Read Docs</a>
-                                    </Menu.Item>
-                                    <Menu.Item key="2">
-                                        <a href="/signout">Sign out</a>
-                                    </Menu.Item>
-                                </Menu> 
-                            }>
-                                <Avatar  src={user?.avatar}/>
-                            </ Dropdown>
-                            : <a href="/" style={{color: "white"}}>Sign in</a>}
-                    </Col>
-                </Row>
-            </Header>
-            <Content style={{ padding: "50px 50px" }}>
-                <Row>
-                    <Col 
-                        span={22}
-                        offset={1}
-                        md={{span: 14, offset: 5}} 
-                        lg={{span: 12, offset: 6}} 
-                        xxl={{span: 10, offset: 7}}
-                    >
-                        {content}
-                    </Col>
-                </Row>
-            </Content>
-            <Footer style={{ textAlign: "center" }}>
-                <LicenseFooter license={license} />
-                Gitploy ©{moment().format("YYYY")} Created by Gitploy.IO 
-            </Footer>
-        </Layout>
-    )
-}
diff --git a/ui/src/views/Repo.tsx b/ui/src/views/Repo.tsx
index 62d6d356..72d42ba9 100644
--- a/ui/src/views/Repo.tsx
+++ b/ui/src/views/Repo.tsx
@@ -8,7 +8,7 @@ import { useAppSelector, useAppDispatch } from '../redux/hooks'
 import { init, activate, repoSlice as slice } from '../redux/repo'
 
 import ActivateButton from "../components/ActivateButton"
-import Main from './Main'
+import Main from './main'
 import RepoHome from './RepoHome'
 import RepoLock from "./RepoLock";
 import RepoDeploy from './RepoDeploy'
diff --git a/ui/src/views/Settings.tsx b/ui/src/views/Settings.tsx
index ee3c0f33..7e9f7aef 100644
--- a/ui/src/views/Settings.tsx
+++ b/ui/src/views/Settings.tsx
@@ -6,7 +6,7 @@ import { Button, Tag, Descriptions, Input } from "antd"
 import { useAppSelector, useAppDispatch } from "../redux/hooks"
 import { fetchMe, checkSlack } from "../redux/settings"
 
-import Main from "./Main"
+import Main from "./main"
 
 export default function Settings(): JSX.Element {
     const { user, isSlackEnabled } = useAppSelector(state => state.settings, shallowEqual)
diff --git a/ui/src/views/main/Content.tsx b/ui/src/views/main/Content.tsx
new file mode 100644
index 00000000..ec1e3bbb
--- /dev/null
+++ b/ui/src/views/main/Content.tsx
@@ -0,0 +1,63 @@
+import { shallowEqual } from "react-redux"
+import { Row, Col, Result, Button} from "antd"
+
+import { useAppSelector, useAppDispatch } from "../../redux/hooks"
+import { mainSlice as slice } from "../../redux/main"
+import React from "react"
+
+export default function Content(props: React.PropsWithChildren<any>): JSX.Element {
+    const { 
+        available, 
+        authorized, 
+        expired,
+    } = useAppSelector(state => state.main, shallowEqual)
+    const dispatch = useAppDispatch()
+
+    const onClickRetry = () => {
+        dispatch(slice.actions.setAvailable(true))
+        dispatch(slice.actions.setExpired(false))
+    }
+
+    let content: React.ReactNode
+    if (!available) {
+        content = <Result
+            style={{paddingTop: '120px'}}
+            status="error"
+            title="Server Internal Error"
+            subTitle="Sorry, something went wrong. Contact administrator."
+            extra={[<Button key="console" type="primary" onClick={onClickRetry}>Retry</Button>]}
+        />
+    } else if (!authorized) {
+        content = <Result
+            style={{paddingTop: '120px'}}
+            status="warning"
+            title="Unauthorized Error"
+            subTitle="Sorry, you are not authorized."
+            extra={[<Button key="console" type="primary" href="/">Sign in</Button>]}
+        />
+    } else if (expired) {
+        content = <Result
+            style={{paddingTop: '120px'}}
+            status="warning"
+            title="License Expired"
+            subTitle="Sorry, the license is expired."
+            extra={[<Button key="console" type="primary" onClick={onClickRetry}>Retry</Button>]}
+        />
+    } else {
+        content = props.children
+    }
+
+    return (
+        <Row>
+            <Col 
+                span={22}
+                offset={1}
+                md={{span: 14, offset: 5}} 
+                lg={{span: 12, offset: 6}} 
+                xxl={{span: 10, offset: 7}}
+            >
+                {content}
+            </Col>
+    </Row>
+    )
+}
\ No newline at end of file
diff --git a/ui/src/views/main/Header.tsx b/ui/src/views/main/Header.tsx
new file mode 100644
index 00000000..fc60c83e
--- /dev/null
+++ b/ui/src/views/main/Header.tsx
@@ -0,0 +1,90 @@
+import { useState } from "react"
+import { shallowEqual } from "react-redux"
+import { Menu, Row, Col, Button, Drawer, Avatar, Dropdown, Badge, Space} from "antd"
+import { SettingFilled } from "@ant-design/icons"
+
+import { useAppSelector } from "../../redux/hooks"
+
+import RecentActivities from "../../components/RecentActivities"
+
+import Logo from "../../logo.svg"
+
+export default function Header(): JSX.Element {
+    const { 
+        authorized, 
+        user,
+        deployments,
+        reviews,
+    } = useAppSelector(state => state.main, shallowEqual)
+
+    const activitiesCount = deployments.length + reviews.length
+
+    const [ isRecentActivitiesVisible, setRecentActivitiesVisible ] = useState(false)
+
+    return (
+        <Row>
+            <Col span="16">
+                <Menu theme="dark" mode="horizontal" >
+                    <Menu.Item key={0}>
+                        <a href="/"><img src={Logo} style={{width: 62}}/></a>
+                    </Menu.Item>
+                    <Menu.Item key={1}>
+                        <a href="/">Home</a>
+                    </Menu.Item>
+                    {(user?.admin)? 
+                        <Menu.Item key={2}>
+                            <a href="/members">Members</a>
+                        </Menu.Item>
+                        : 
+                        <></>}
+                </Menu>
+            </Col>
+            <Col span="8" style={{textAlign: "right"}}>
+                <Space>
+                <Badge 
+                    size="small" 
+                    count={activitiesCount}
+                >
+                    <Button 
+                        type="primary" 
+                        shape="circle" 
+                        icon={<SettingFilled spin={activitiesCount !== 0 }/>}
+                        onClick={() => setRecentActivitiesVisible(true)}
+                    />
+                </Badge>
+                <Drawer title="Recent Activities"
+                    placement="right"
+                    width={400}
+                    visible={isRecentActivitiesVisible}
+                    onClose={() => setRecentActivitiesVisible(false)}
+                >
+                    <RecentActivities 
+                        deployments={deployments}
+                        reviews={reviews}
+                    />
+                </Drawer>
+                {(authorized) ? 
+                    <Dropdown 
+                        overlay={(
+                            <Menu>
+                                <Menu.Item key="0">
+                                    <a href="/settings">Settings</a>
+                                </Menu.Item>
+                                <Menu.Divider />
+                                <Menu.Item key="1">
+                                    <a href="https://www.gitploy.io/docs/" target="_blank">Read Docs</a>
+                                </Menu.Item>
+                                <Menu.Item key="2">
+                                    <a href="/signout">Sign out</a>
+                                </Menu.Item>
+                            </Menu>
+                        )}>
+                        <Avatar  src={user?.avatar}/>
+                    </ Dropdown>
+                    :
+                    <a href="/" style={{color: "white"}}>Sign in</a>}
+                </Space>
+            </Col>
+        </Row>
+    )
+}
\ No newline at end of file
diff --git a/ui/src/components/LicenseFooter.tsx b/ui/src/views/main/LicenseWarningFooter.tsx
similarity index 51%
rename from ui/src/components/LicenseFooter.tsx
rename to ui/src/views/main/LicenseWarningFooter.tsx
index 120714b8..531646be 100644
--- a/ui/src/components/LicenseFooter.tsx
+++ b/ui/src/views/main/LicenseWarningFooter.tsx
@@ -1,33 +1,33 @@
 import moment from "moment"
-import { License } from "../models"
+import { shallowEqual } from "react-redux"
 
-interface LicenseFooterProps {
-    license?: License
-}
+import { useAppSelector } from "../../redux/hooks"
 
-export default function LicenseFooter(props: LicenseFooterProps): JSX.Element {
-    if (!props.license) {
-        return <div></div>
+export default function LicenseWarningFooter(): JSX.Element {
+    const { license } = useAppSelector(state => state.main, shallowEqual)
+
+    if (!license) {
+        return <></>
     }
 
     let expired = false
     let message = ""
     
-    if (props.license.kind === "trial") {
-        expired = props.license.memberCount >= props.license.memberLimit
+    if (license.kind === "trial") {
+        expired = license.memberCount >= license.memberLimit
         message = "There is no more seats. You need to purchase the license."
-    } else if (props.license.kind === "standard") {
-        if (props.license.memberCount >= props.license.memberLimit) {
+    } else if (license.kind === "standard") {
+        if (license.memberCount >= license.memberLimit) {
             expired = true
             message = "There is no more seats. You need to purchase more seats."
-        } else if (moment(props.license.expiredAt).isBefore(new Date())) {
+        } else if (moment(license.expiredAt).isBefore(new Date())) {
             expired = true
             message = "The license is expired. You need to renew the license."
         }
     }
 
     return (
-        <div>
+        <>
             {(expired)? 
                 <p 
                     style={{
@@ -36,10 +36,12 @@ export default function LicenseFooter(props: LicenseFooterProps): JSX.Element {
                         color: "#ff7875",
                         fontSize: "17px",
                         padding: "20px",
-                    }}
-                >{message}</p>: 
-                null
+                    }}>
+                    {message}
+                </p>
+                : 
+                <></>
             }
-        </div>
+        </>
     )
 }
\ No newline at end of file
diff --git a/ui/src/views/main/index.tsx b/ui/src/views/main/index.tsx
new file mode 100644
index 00000000..5e15806b
--- /dev/null
+++ b/ui/src/views/main/index.tsx
@@ -0,0 +1,78 @@
+import { useEffect } from "react"
+import { shallowEqual } from "react-redux"
+import { Layout } from "antd"
+import { Helmet } from "react-helmet"
+import moment from "moment"
+
+import { useAppSelector, useAppDispatch } from "../../redux/hooks"
+import { subscribeEvents } from "../../apis"
+import { 
+    init, 
+    searchDeployments, 
+    searchReviews, 
+    fetchLicense, 
+    notifyDeploymentEvent, 
+    notifyReviewmentEvent, 
+    mainSlice as slice 
+} from "../../redux/main"
+
+import MainHeader from "./Header"
+import MainContent from "./Content"
+import LicenseWarning from "./LicenseWarningFooter"
+
+const { Header, Content, Footer } = Layout
+
+// eslint-disable-next-line
+export default function Main(props: React.PropsWithChildren<{}>) { 
+    const { 
+        deployments,
+        reviews,
+    } = useAppSelector(state => state.main, shallowEqual)
+    const dispatch = useAppDispatch()
+
+    useEffect(() => {
+        dispatch(init())
+        dispatch(searchDeployments())
+        dispatch(searchReviews())
+        dispatch(fetchLicense())
+
+        const sub = subscribeEvents((event) => {
+            dispatch(slice.actions.handleDeploymentEvent(event))
+            dispatch(slice.actions.handleReviewEvent(event))
+            dispatch(notifyDeploymentEvent(event))
+            dispatch(notifyReviewmentEvent(event))
+        })
+
+        return () => {
+            sub.close()
+        }
+    }, [dispatch])
+
+    return (
+        <Layout className="layout">
+            <Helmet>
+                <title>Gitploy</title>
+                {(deployments.length + reviews.length > 0)?
+                    <link rel="icon" href="/spinner.ico" />
+                    :
+                    <link rel="icon" href="/favicon.ico" />}
+            </Helmet>
+            <Header>
+                <MainHeader />
+            </Header>
+            <Content style={{ padding: "50px 50px" }}>
+                <MainContent>
+                    {props.children}
+                </MainContent>
+            </Content>
+            <Footer style={{ textAlign: "center" }}>
+                <div>
+                    <LicenseWarning />
+                </div>
+                <div>
+                    Gitploy ©{moment().format("YYYY")} Created by Gitploy.IO 
+                </div>
+            </Footer>
+        </Layout>
+    )
+}
diff --git a/ui/src/views/members/index.tsx b/ui/src/views/members/index.tsx
index 304a716d..d3718304 100644
--- a/ui/src/views/members/index.tsx
+++ b/ui/src/views/members/index.tsx
@@ -6,7 +6,7 @@ import { Helmet } from "react-helmet"
 import { useAppSelector, useAppDispatch } from "../../redux/hooks"
 import { membersSlice as slice, fetchUsers, perPage } from "../../redux/members"
 
-import Main from '../Main'
+import Main from '../main'
 import MemberList from "./MemberList"
 import Pagination from "../../components/Pagination"