diff --git a/src/common/AppRoot.tsx b/src/common/AppRoot.tsx
index 88cf9c9..992f153 100644
--- a/src/common/AppRoot.tsx
+++ b/src/common/AppRoot.tsx
@@ -71,14 +71,10 @@ class AppRoot extends Component<Props, State> {
                     <title>{Functions.siteTitle(lang)} - {Functions.siteSlogan(lang)}</title>
                 </Helmet>
                 <Header lang={lang} />
-                <table className="main">
-                    <tbody>
-                        <tr>
-                            <LeftColumn lang={lang} />
-                            <CenterColumn lang={lang} />
-                        </tr>
-                    </tbody>
-                </table>
+                <div id="main" className="clearfix">
+                    <LeftColumn lang={lang} />
+                    <CenterColumn lang={lang} />
+                </div>
             </>
         );
     }
diff --git a/src/common/CenterColumn.tsx b/src/common/CenterColumn.tsx
index 4094cbc..96c5e8d 100644
--- a/src/common/CenterColumn.tsx
+++ b/src/common/CenterColumn.tsx
@@ -1,13 +1,13 @@
 import React from 'react';
 import { Route, Switch } from 'react-router-dom';
 import { MultiLang } from '../config';
-import VisiomeTop10Items from '../custom/blocks/VisiomeTop10Items';
+import VisiomeLinks from '../custom/blocks/VisiomeLinks';
 import VisiomeNewItems from '../custom/blocks/VisiomeNewItems';
-import Announce from './blocks/Announce';
-import MainContent from './MainContent';
-import Footer from './Footer';
 import VisiomePreviewList from '../custom/blocks/VisiomePreviewList';
-import VisiomeLinks from './blocks/VisiomeLinks';
+import VisiomeTop10Items from '../custom/blocks/VisiomeTop10Items';
+import Announce from '../custom/blocks/Welcome';
+import Footer from './Footer';
+import MainContent from './MainContent';
 
 interface Props {
     lang: MultiLang;
@@ -16,65 +16,63 @@ interface Props {
 const CenterBlocks = (props: Props) => {
     const { lang } = props;
     return (
-        <table className="block">
-            <tbody>
-                <tr>
-                    <td id="centerLcolumn">
-                    </td>
-                    <td id="centerRcolumn">
-                    </td>
-                </tr>
-                <tr>
-                    <td colSpan={2} id="centerCcolumn">
-                        <div className="block">
-                            <div className="blockTitle">Welcome to Visiome Platform !</div>
-                            <div className="blockContent">
-                                <Announce lang={lang} />
-                            </div>
-                        </div>
-                        <div className="block">
-                            <div className="blockTitle">New Items</div>
-                            <div className="blockContent">
-                                <VisiomeNewItems lang={lang} />
-                            </div>
-                        </div>
-                        <div className="block">
-                            <div className="blockTitle">Top 10 Items</div>
-                            <div className="blockContent">
-                                <VisiomeTop10Items lang={lang} />
-                            </div>
-                        </div>
-                        <div className="block">
-                            <div className="blockTitle">Recommendations</div>
-                            <div className="blockContent">
-                                <VisiomePreviewList lang={lang} number={5} itemIds={[6894, 3315, 5915, 6434, 6105]} />
-                            </div>
-                        </div>
-                        <div className="block">
-                            <div className="blockTitle">Links</div>
-                            <div className="blockContent">
-                                <VisiomeLinks lang={lang} />
-                            </div>
-                        </div>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
+        <div className="block">
+            <div className="clearfix">
+                <td className="centerLcolumn">
+                </td>
+                <td className="centerRcolumn">
+                </td>
+            </div>
+            <div className="centerCcolumn">
+                <div className="block">
+                    <div className="blockTitle">Welcome to Visiome Platform !</div>
+                    <div className="blockContent">
+                        <Announce lang={lang} />
+                    </div>
+                </div>
+                <div className="block">
+                    <div className="blockTitle">New Items</div>
+                    <div className="blockContent">
+                        <VisiomeNewItems lang={lang} />
+                    </div>
+                </div>
+                <div className="block">
+                    <div className="blockTitle">Top 10 Items</div>
+                    <div className="blockContent">
+                        <VisiomeTop10Items lang={lang} />
+                    </div>
+                </div>
+                <div className="block">
+                    <div className="blockTitle">Recommendations</div>
+                    <div className="blockContent">
+                        <VisiomePreviewList lang={lang} number={5} itemIds={[6894, 3315, 5915, 6434, 6105]} />
+                    </div>
+                </div>
+                <div className="block">
+                    <div className="blockTitle">Links</div>
+                    <div className="blockContent">
+                        <VisiomeLinks lang={lang} />
+                    </div>
+                </div>
+            </div>
+        </div>
     );
 }
 
 const CenterColumn = (props: Props) => {
     const { lang } = props;
     return (
-        <td id="centercolumn">
+        <div className="centercolumn">
             <Switch>
                 <Route exact path="/" render={() => <CenterBlocks lang={lang} />} />
             </Switch>
-            <MainContent lang={lang} />
+            <div className="block">
+                <MainContent lang={lang} />
+            </div>
             <div className="block">
                 <Footer lang={lang} />
             </div>
-        </td>
+        </div>
     );
 }
 
diff --git a/src/common/Header.tsx b/src/common/Header.tsx
index 509b518..ca2f264 100644
--- a/src/common/Header.tsx
+++ b/src/common/Header.tsx
@@ -33,7 +33,7 @@ const Header = (props: Props) => {
     return (
         <header className="header_bar clearfix">
             <div className="logo">
-                <Link to={urlHome}><img src={imageHeaderLeft} alt={Functions.siteTitle(lang)} /></Link>
+                <img src={imageHeaderLeft} alt={Functions.siteTitle(lang)} useMap="#logo" />
             </div>
             <div className="menu_bar clearfix">
                 <div className="menu_img">
@@ -56,6 +56,7 @@ const Header = (props: Props) => {
                     <LangFlag lang="en" /> <LangFlag lang="ja" />
                 </div>
             </div>
+            <map name="logo"><area shape="rect" coords="13,20,191,54" title={titleHome} alt={titleHome} href={urlHome} onClick={(e) => { onClickMap(e, urlHome); }} /></map>
             <map name="home"><area shape="circle" coords="37,63,17" title={titleHome} alt={titleHome} href={urlHome} onClick={(e) => { onClickMap(e, urlHome); }} /></map>
             <map name="help"><area shape="circle" coords="37,63,17" title={titleHelp} alt={titleHelp} href={urlHelp} onClick={(e) => { onClickMap(e, urlHelp); }} /></map>
             <map name="contact"><area shape="circle" coords="37,63,17" title={titleContact} alt={titleContact} href={urlContact} onClick={(e) => { onClickMap(e, urlContact); }} /></map>
diff --git a/src/common/LeftColumn.tsx b/src/common/LeftColumn.tsx
index afb9a0b..928510b 100644
--- a/src/common/LeftColumn.tsx
+++ b/src/common/LeftColumn.tsx
@@ -19,7 +19,7 @@ const LeftColumn = (props: Props) => {
         siteInfo: Functions.mlang('[en]Site Information[/en][ja]サイト情報[/ja]', lang),
     };
     return (
-        <td id="leftcolumn">
+        <div className="leftcolumn">
             <div className="block">
                 <div className="blockTitle">{titles.selectLang}</div>
                 <div className="blockContent">
@@ -44,7 +44,7 @@ const LeftColumn = (props: Props) => {
                     <CreditsMenu lang={lang} />
                 </div>
             </div>
-        </td>
+        </div>
     );
 }
 
diff --git a/src/common/MainContent.tsx b/src/common/MainContent.tsx
index 19d70ce..bded5a4 100644
--- a/src/common/MainContent.tsx
+++ b/src/common/MainContent.tsx
@@ -4,10 +4,10 @@ import Config, { MultiLang } from '../config';
 import Credits from '../credits/Credits';
 import CreditsXoopsPathRedirect from '../credits/CreditsXoopsPathRedirect';
 import Database from '../database/Database';
+import DatabaseXoopsPathRedirect from '../database/DatabaseXoopsPathRedirect';
 import Pico from '../pico/Pico';
 import PicoXoopsPathRedirect from '../pico/PicoXoopsPathRedirect';
 import XoopsPathRedirect from './XoopsPathRedirect';
-import DatabaseXoopsPathRedirect from '../database/DatabaseXoopsPathRedirect';
 
 interface Props {
     lang: MultiLang;
diff --git a/src/common/assets/theme/style.css b/src/common/assets/theme/style.css
index 2cd3ae7..7b029ac 100644
--- a/src/common/assets/theme/style.css
+++ b/src/common/assets/theme/style.css
@@ -1,515 +1,497 @@
-/* General Settings */
-body {
-    background-color: #ffffff;
-    color: #666666;
-    font-family: Verdana, Arial, Helvetica, sans-serif;
-    font-size: 75%;
-    margin: 0;
-    padding: 0;
-}
-table {
-    width: 100%;
-    margin: 0;
-    padding: 0;
-    border-collapse: collapse;
-}
-table td {
-    padding: 0;
-    margin: 0;
-    vertical-align: top;
-    font-family: Verdana, Arial, Helvetica, sans-serif;
-    line-height: 150%;
-}
-th {
-    color: inherit;
-    background-color: #bbbbbb;
-    font-family: Verdana, Arial, Helvetica, sans-serif;
-    padding: 2px;
-    vertical-align: middle;
-}
-
-/* Link Color Settings */
-a {
-    color: #0000ee;
-}
-a:visited {
-    color: #551a8b;
-}
-a:hover {
-    color: #ff9900;
-}
-
-/* Heading Settings */
-h1 {
-    color: #000000;
-    background-color: #ffffff;
-}
-h2 {
-    color: #000000;
-    background-color: #ffffff;
-}
-h3 {
-    text-indent: 5px;
-    color: #000000;
-    background-color: #ffffff;
-    border-bottom-width: 1px;
-    border-bottom-style: solid;
-    border-bottom-color: #996699;
-    border-left-width: 10px;
-    border-left-style: solid;
-    border-left-color: #996699;
-}
-h4,
-h5 {
-    text-indent: 2px;
-    color: #000000;
-    background-color: #ffffff;
-    border-bottom-width: 1px;
-    border-bottom-style: solid;
-    border-bottom-color: #996699;
-    border-left-width: 8px;
-    border-left-style: solid;
-    border-left-color: #996699;
-}
-
-/* List Settings */
-ul,
-ol {
-    margin: 5px;
-    padding-left: 20px;
-}
-li {
-    margin-left: 2px;
-    background-color: inherit;
-}
-
-.clearfix::after {
-    content: "";
-    display: block;
-    clear: both;
-}
-
-/* Page Header and Footer */
-.header_bar {
-    background-image: url(images/back.gif);
-    background-repeat: repeat-x;
-    height: 105px;
-    border-bottom: 1px solid #999999;
-    min-width: 670px;
-    overflow: hidden;
-}
-.logo {
-    width: 250px;
-    float: left;
-}
-.menu_bar {
-    float: right;
-    text-align: right;
-}
-.menu_img {
-    float: left;
-    text-align: center;
-    line-height: 150%;
-    font-size: 85%;
-}
-.menu_img img {
-    vertical-align: bottom;
-}
-.menu_img a {
-    text-decoration: none;
-}
-
-.footer {
-    font-size: 90%;
-    line-height: 150%;
-    margin: 10px 0 5px 0;
-}
-
-.mainContent {
-    margin: 15px 10px;
-}
-
-/* Left Column */
-#leftcolumn {
-    width: 200px;
-    padding: 5px;
-    margin: 0;
-    border-right: 1px solid #999999;
-}
-#leftcolumn .block {
-    margin-bottom: 1.5em;
-}
-#leftcolumn .block .blockTitle {
-    padding: 2px 5px 2px 10px;
-    font-weight: bold;
-    color: #333333;
-    background-color: #bbbbbb;
-    border-bottom: 1px solid #333333;
-}
-#leftcolumn .block .blockContent {
-    background-color: #dddddd;
-    color: #666666;
-    padding: 5px;
-    line-height: 140%;
-}
-
-/* Cnter Column Settings */
-#centercolumn {
-    padding: 10px 15px;
-    text-align: left;
-    line-height: 175%;
-    background-color: #ffffff;
-    color: inherit;
-}
-#centercolumn .block {
-    margin-bottom: 1.5em;
-}
-#centercolumn th {
-    vertical-align: middle;
-    background-color: #bbbbbb;
-    color: inherit;
-}
-div#content {
-    text-align: left;
-    padding: 8px;
-}
-
-/* Cnter - Cnter */
-#centerCcolumn .blockTitle {
-    padding: 3px;
-    color: #000000;
-    font-size: 100%;
-    font-weight: bold;
-    background-color: #d8bfd8;
-}
-#centerCcolumn .blockContent {
-    padding: 3px;
-    line-height: 175%;
-    margin-bottom: 2px;
-}
-
-/* Center - Left */
-#centerLcolumn {
-    width: 50%;
-    padding: 0px 5px 0px 0px;
-}
-#centerLcolumn .blockTitle {
-    padding: 3px;
-    color: #333399;
-    font-weight: bold;
-    margin-top: 0px;
-    background-color: #e6e6fa;
-}
-#centerLcolumn .blockContent {
-    padding: 3px 3px 13px;
-    line-height: 120%;
-}
-
-/* Cnter - Right */
-#centerRcolumn {
-    width: 50%;
-    padding: 0px 0px 0px 5px;
-}
-#centerRcolumn .blockTitle {
-    padding: 3px;
-    color: #333399;
-    font-weight: bold;
-    margin-top: 0px;
-    background-color: #e6e6fa;
-}
-#centerRcolumn .blockContent {
-    padding: 3px 3px 13px;
-    line-height: 120%;
-}
-
-/* Right */
-#rightcolumn {
-    width: 190px;
-    font-size: 90%;
-}
-#rightcolumn .block {
-    margin-bottom: 1.5em;
-}
-#rightcolumn .blockTitle {
-    border: 1px solid #999999;
-    text-align: center;
-    padding: 3px;
-    background-color: #eeeeee;
-    color: inherit;
-}
-#rightcolumn .blockContent {
-    padding: 5px;
-    line-height: 130%;
-}
-
-/* Main Menu */
-.mainmenu {
-    padding: 0;
-    margin: 0;
-    line-height: 150%;
-}
-.mainmenu li {
-    list-style: none;
-}
-.mainmenu a {
-    font-size: 90%;
-    text-decoration: none;
-    display: block;
-    padding: 0;
-    margin: 0;
-}
-.mainmenu a.menuTop {
-    border-bottom: 1px solid #cdcdcd;
-    text-indent: 20px;
-    background-image: url(images/menu_indent.gif);
-    background-repeat: no-repeat;
-    background-position: left top;
-}
-.mainmenu a.menuMain {
-    border-bottom: 1px solid #cdcdcd;
-    text-indent: 20px;
-    background-image: url(images/menu_indent.gif);
-    background-repeat: no-repeat;
-    background-position: left top;
-}
-.mainmenu a:hover {
-    background-color: #999999;
-    color: #ffffff;
-    background-image: url(images/menu_indent_hover.gif);
-    background-repeat: no-repeat;
-    background-position: left top;
-}
-.mainmenu a.menuSub {
-    margin-left: 15px;
-    border-bottom: 1px solid #cdcdcd;
-    text-indent: 20px;
-    background-image: url(images/menu_indent2.gif);
-    background-repeat: no-repeat;
-    background-position: left top;
-}
-.mainmenu a.menuSub:hover {
-    background-image: url(images/menu_indent2_hover.gif);
-    background-repeat: no-repeat;
-    background-position: left top;
-}
-
-/* for tables */
-.outer {
-    border: none;
-}
-.head {
-    padding: 5px;
-    background-color: #dddddd;
-    color: inherit;
-}
-.even {
-    padding: 2px;
-}
-.odd {
-    padding: 2px;
-    background-color: #f2f9f9;
-    color: inherit;
-}
-tr.even td {
-    padding: 2px;
-}
-tr.odd td {
-    padding: 2px;
-    background-color: #f2f9f9;
-    color: inherit;
-}
-.foot {
-    padding: 5px;
-    background-color: #dddddd;
-    color: inherit;
-}
-
-/* error message and code */
-div.errorMsg {
-    color: inherit;
-    background-color: #ffcccc;
-    text-align: center;
-    border-top: 1px solid #ddddff;
-    border-left: 1px solid #ddddff;
-    border-right: 1px solid #aaaaaa;
-    border-bottom: 1px solid #aaaaaa;
-    font-weight: bold;
-    padding: 10px;
-}
-div.confirmMsg {
-    background-color: #ddffdf;
-    color: #136c99;
-    text-align: center;
-    border-top: 1px solid #ddddff;
-    border-left: 1px solid #ddddff;
-    border-right: 1px solid #aaaaaa;
-    border-bottom: 1px solid #aaaaaa;
-    font-weight: bold;
-    padding: 10px;
-}
-div.resultMsg {
-    background-color: #cccccc;
-    color: #333333;
-    text-align: center;
-    border-top: 1px solid silver;
-    border-left: 1px solid silver;
-    font-weight: bold;
-    border-right: 1px solid #666666;
-    border-bottom: 1px solid #666666;
-    padding: 10px;
-}
-div.xoopsCode {
-    color: inherit;
-    background: #ffffff url(images/code_back.jpg) no-repeat right top;
-    border: 1px inset #333;
-    font-family: "Courier New", Courier, monospace;
-    padding: 6px 6px 6px 0px;
-    overflow: auto;
-    width: 640px;
-}
-div.xoopsQuote {
-    color: inherit;
-    background: #ffffff url(images/code_back.jpg) no-repeat right top;
-    border: 1px inset #333;
-    font-family: "Courier New", Courier, monospace;
-    padding: 6px 6px 6px 0px;
-    overflow: auto;
-    width: 640px;
-}
-
-/* style for News module */
-.item {
-    border: 0px solid silver;
-}
-.itemHead {
-    padding: 3px;
-    background-color: #ffffff;
-    color: #000000;
-}
-.itemHead a {
-    color: #000000;
-    background-color: inherit;
-}
-.itemHead a:hover {
-    color: #ff9900;
-    background-color: inherit;
-}
-.itemInfo {
-    text-align: right;
-    padding: 3px;
-    margin-bottom: 5px;
-    border-bottom: 1px solid silver;
-    font-style: italic;
-}
-.itemTitle {
-    padding: 3px;
-    font-family: Verdana, Arial, Helvetica, sans-serif;
-    font-size: large;
-    color: #003366;
-    background-color: inherit;
-}
-.itemTitle a {
-    padding: 3px;
-    font-family: Verdana, Arial, Helvetica, sans-serif;
-    font-size: large;
-    font-weight: bold;
-    color: #003366;
-    background-color: inherit;
-}
-.itemTitle a:hover {
-    color: #ff9900;
-    background-color: inherit;
-}
-.itemPoster {
-    font-size: 90%;
-    font-style: italic;
-}
-.itemPostDate {
-    font-size: 90%;
-    font-style: italic;
-}
-.itemStats {
-    font-size: 80%;
-}
-.itemBody {
-    padding: 3px;
-}
-.itemBody img {
-    padding: 5px;
-}
-.itemTopicImage {
-    float: left;
-}
-.itemText {
-    margin-top: 5px;
-    margin-bottom: 5px;
-    line-height: 1.5em;
-}
-.itemText:first-letter {
-    font-size: 133%;
-    font-weight: bold;
-}
-.itemFoot {
-    text-align: right;
-    padding: 3px;
-    margin-top: 5px;
-    color: inherit;
-    background-color: #efefef;
-    border: 1px solid silver;
-}
-.itemAdminLink {
-    font-size: 90%;
-}
-.itemPermaLink {
-    font-size: 90%;
-}
-
-/* for comment area */
-.comTitle {
-    font-weight: bold;
-    margin-bottom: 2px;
-}
-.comText {
-    padding: 2px;
-}
-.comUserStat {
-    font-size: 90%;
-    color: #2f5376;
-    font-weight: bold;
-    border: 1px solid silver;
-    background-color: #ffffff;
-    margin: 2px;
-    padding: 2px;
-}
-.comUserStatCaption {
-    font-weight: normal;
-}
-.comUserStatus {
-    margin-left: 2px;
-    margin-top: 10px;
-    color: #2f5376;
-    background-color: inherit;
-    font-weight: bold;
-    font-size: 10px;
-}
-.comUserRank {
-    margin: 2px;
-}
-.comUserRankText {
-    font-size: 90%;
-    font-weight: bold;
-}
-.comUserRankImg {
-    border: 0;
-}
-.comUserImg {
-    margin: 2px;
-}
-.comDate {
-    font-style: normal;
-    font-size: 85%;
-}
-.comDateCaption {
-    font-weight: bold;
-    font-style: normal;
-}
+/* General Settings */
+body {
+    background-color: #ffffff;
+    color: #666666;
+    font-family: Verdana, Arial, Helvetica, sans-serif;
+    font-size: 75%;
+    margin: 0;
+    padding: 0;
+}
+table {
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    border-collapse: collapse;
+}
+table td {
+    padding: 0;
+    margin: 0;
+    vertical-align: top;
+    font-family: Verdana, Arial, Helvetica, sans-serif;
+    line-height: 150%;
+}
+th {
+    color: inherit;
+    background-color: #bbbbbb;
+    font-family: Verdana, Arial, Helvetica, sans-serif;
+    padding: 2px;
+    vertical-align: middle;
+}
+
+/* Link Color Settings */
+a {
+    color: #0000ee;
+}
+a:visited {
+    color: #551a8b;
+}
+a:hover {
+    color: #ff9900;
+}
+
+/* Heading Settings */
+h1 {
+    color: #000000;
+    background-color: #ffffff;
+}
+h2 {
+    color: #000000;
+    background-color: #ffffff;
+}
+h3 {
+    text-indent: 5px;
+    color: #000000;
+    background-color: #ffffff;
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
+    border-bottom-color: #996699;
+    border-left-width: 10px;
+    border-left-style: solid;
+    border-left-color: #996699;
+}
+h4,
+h5 {
+    text-indent: 2px;
+    color: #000000;
+    background-color: #ffffff;
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
+    border-bottom-color: #996699;
+    border-left-width: 8px;
+    border-left-style: solid;
+    border-left-color: #996699;
+}
+
+/* List Settings */
+ul,
+ol {
+    margin: 5px;
+    padding-left: 20px;
+}
+li {
+    margin-left: 2px;
+    background-color: inherit;
+}
+
+.clearfix::after {
+    content: "";
+    display: block;
+    clear: both;
+}
+
+/* Page Header and Footer */
+.header_bar {
+    background-image: url(images/back.gif);
+    background-repeat: repeat-x;
+    height: 105px;
+    border-bottom: 1px solid #999999;
+    min-width: 670px;
+    overflow: hidden;
+}
+.logo {
+    width: 250px;
+    float: left;
+}
+.menu_bar {
+    float: right;
+    text-align: right;
+}
+.menu_img {
+    float: left;
+    text-align: center;
+    line-height: 150%;
+    font-size: 85%;
+}
+.menu_img img {
+    vertical-align: bottom;
+}
+.menu_img a {
+    text-decoration: none;
+}
+
+.footer {
+    font-size: 90%;
+    line-height: 150%;
+    margin: 10px 0 5px 0;
+}
+
+/* Main part */
+#main {
+    min-width: 670px;
+}
+
+/* Left Column */
+.leftcolumn {
+    float: left;
+    width: calc(25% - 1px);
+    border-right: 1px solid #999999;
+}
+.leftcolumn .block {
+    margin: 10px 5px 1.5em 5px;
+}
+.leftcolumn .block .blockTitle {
+    padding: 5px 10px 5px 10px;
+    font-weight: bold;
+    color: #333333;
+    background-color: #bbbbbb;
+    border-bottom: 1px solid #333333;
+}
+.leftcolumn .block .blockContent {
+    background-color: #dddddd;
+    color: #666666;
+    padding: 5px;
+    line-height: 140%;
+}
+
+/* Cnter Column Settings */
+.centercolumn {
+    float: left;
+    width: 75%;
+    text-align: left;
+    line-height: 175%;
+    background-color: #ffffff;
+    color: inherit;
+}
+.centercolumn > .block {
+    margin: 10px 10px 1.5em 10px;
+}
+.centercolumn th {
+    vertical-align: middle;
+    background-color: #bbbbbb;
+    color: inherit;
+}
+
+#content {
+    text-align: left;
+    padding: 8px;
+}
+
+/* Center - Center */
+.centerCcolumn .blockTitle {
+    padding: 3px;
+    color: #000000;
+    font-size: 100%;
+    font-weight: bold;
+    background-color: #d8bfd8;
+}
+.centerCcolumn .blockContent {
+    padding: 3px;
+    line-height: 175%;
+    margin-bottom: 2px;
+}
+
+/* Center - Left */
+.centerLcolumn {
+    width: 50%;
+    margin-right: 5px;
+}
+.centerLcolumn .blockTitle {
+    padding: 3px;
+    color: #333399;
+    font-weight: bold;
+    margin-top: 0px;
+    background-color: #e6e6fa;
+}
+.centerLcolumn .blockContent {
+    padding: 3px 3px 13px;
+    line-height: 120%;
+}
+
+/* Center - Right */
+.centerRcolumn {
+    width: 50%;
+    margin-left: 5px;
+}
+.centerRcolumn .blockTitle {
+    padding: 3px;
+    color: #333399;
+    font-weight: bold;
+    margin-top: 0px;
+    background-color: #e6e6fa;
+}
+.centerRcolumn .blockContent {
+    padding: 3px 3px 13px;
+    line-height: 120%;
+}
+
+/* Main Menu */
+.mainmenu {
+    padding: 0;
+    margin: 0;
+    line-height: 150%;
+}
+.mainmenu li {
+    list-style: none;
+}
+.mainmenu a {
+    font-size: 90%;
+    text-decoration: none;
+    display: block;
+    padding: 0;
+    margin: 0;
+}
+.mainmenu a.menuTop {
+    border-bottom: 1px solid #cdcdcd;
+    text-indent: 20px;
+    background-image: url(images/menu_indent.gif);
+    background-repeat: no-repeat;
+    background-position: left top;
+}
+.mainmenu a.menuMain {
+    border-bottom: 1px solid #cdcdcd;
+    text-indent: 20px;
+    background-image: url(images/menu_indent.gif);
+    background-repeat: no-repeat;
+    background-position: left top;
+}
+.mainmenu a:hover {
+    background-color: #999999;
+    color: #ffffff;
+    background-image: url(images/menu_indent_hover.gif);
+    background-repeat: no-repeat;
+    background-position: left top;
+}
+.mainmenu a.menuSub {
+    margin-left: 15px;
+    border-bottom: 1px solid #cdcdcd;
+    text-indent: 20px;
+    background-image: url(images/menu_indent2.gif);
+    background-repeat: no-repeat;
+    background-position: left top;
+}
+.mainmenu a.menuSub:hover {
+    background-image: url(images/menu_indent2_hover.gif);
+    background-repeat: no-repeat;
+    background-position: left top;
+}
+
+/* for tables */
+.outer {
+    border: none;
+}
+.head {
+    padding: 5px;
+    background-color: #dddddd;
+    color: inherit;
+}
+.even {
+    padding: 2px;
+}
+.odd {
+    padding: 2px;
+    background-color: #f2f9f9;
+    color: inherit;
+}
+tr.even td {
+    padding: 2px;
+}
+tr.odd td {
+    padding: 2px;
+    background-color: #f2f9f9;
+    color: inherit;
+}
+.foot {
+    padding: 5px;
+    background-color: #dddddd;
+    color: inherit;
+}
+
+/* error message and code */
+div.errorMsg {
+    color: inherit;
+    background-color: #ffcccc;
+    text-align: center;
+    border-top: 1px solid #ddddff;
+    border-left: 1px solid #ddddff;
+    border-right: 1px solid #aaaaaa;
+    border-bottom: 1px solid #aaaaaa;
+    font-weight: bold;
+    padding: 10px;
+}
+div.confirmMsg {
+    background-color: #ddffdf;
+    color: #136c99;
+    text-align: center;
+    border-top: 1px solid #ddddff;
+    border-left: 1px solid #ddddff;
+    border-right: 1px solid #aaaaaa;
+    border-bottom: 1px solid #aaaaaa;
+    font-weight: bold;
+    padding: 10px;
+}
+div.resultMsg {
+    background-color: #cccccc;
+    color: #333333;
+    text-align: center;
+    border-top: 1px solid silver;
+    border-left: 1px solid silver;
+    font-weight: bold;
+    border-right: 1px solid #666666;
+    border-bottom: 1px solid #666666;
+    padding: 10px;
+}
+div.xoopsCode {
+    color: inherit;
+    background: #ffffff url(images/code_back.jpg) no-repeat right top;
+    border: 1px inset #333;
+    font-family: "Courier New", Courier, monospace;
+    padding: 6px 6px 6px 0px;
+    overflow: auto;
+    width: 640px;
+}
+div.xoopsQuote {
+    color: inherit;
+    background: #ffffff url(images/code_back.jpg) no-repeat right top;
+    border: 1px inset #333;
+    font-family: "Courier New", Courier, monospace;
+    padding: 6px 6px 6px 0px;
+    overflow: auto;
+    width: 640px;
+}
+
+/* style for News module */
+.item {
+    border: 0px solid silver;
+}
+.itemHead {
+    padding: 3px;
+    background-color: #ffffff;
+    color: #000000;
+}
+.itemHead a {
+    color: #000000;
+    background-color: inherit;
+}
+.itemHead a:hover {
+    color: #ff9900;
+    background-color: inherit;
+}
+.itemInfo {
+    text-align: right;
+    padding: 3px;
+    margin-bottom: 5px;
+    border-bottom: 1px solid silver;
+    font-style: italic;
+}
+.itemTitle {
+    padding: 3px;
+    font-family: Verdana, Arial, Helvetica, sans-serif;
+    font-size: large;
+    color: #003366;
+    background-color: inherit;
+}
+.itemTitle a {
+    padding: 3px;
+    font-family: Verdana, Arial, Helvetica, sans-serif;
+    font-size: large;
+    font-weight: bold;
+    color: #003366;
+    background-color: inherit;
+}
+.itemTitle a:hover {
+    color: #ff9900;
+    background-color: inherit;
+}
+.itemPoster {
+    font-size: 90%;
+    font-style: italic;
+}
+.itemPostDate {
+    font-size: 90%;
+    font-style: italic;
+}
+.itemStats {
+    font-size: 80%;
+}
+.itemBody {
+    padding: 3px;
+}
+.itemBody img {
+    padding: 5px;
+}
+.itemTopicImage {
+    float: left;
+}
+.itemText {
+    margin-top: 5px;
+    margin-bottom: 5px;
+    line-height: 1.5em;
+}
+.itemText:first-letter {
+    font-size: 133%;
+    font-weight: bold;
+}
+.itemFoot {
+    text-align: right;
+    padding: 3px;
+    margin-top: 5px;
+    color: inherit;
+    background-color: #efefef;
+    border: 1px solid silver;
+}
+.itemAdminLink {
+    font-size: 90%;
+}
+.itemPermaLink {
+    font-size: 90%;
+}
+
+/* for comment area */
+.comTitle {
+    font-weight: bold;
+    margin-bottom: 2px;
+}
+.comText {
+    padding: 2px;
+}
+.comUserStat {
+    font-size: 90%;
+    color: #2f5376;
+    font-weight: bold;
+    border: 1px solid silver;
+    background-color: #ffffff;
+    margin: 2px;
+    padding: 2px;
+}
+.comUserStatCaption {
+    font-weight: normal;
+}
+.comUserStatus {
+    margin-left: 2px;
+    margin-top: 10px;
+    color: #2f5376;
+    background-color: inherit;
+    font-weight: bold;
+    font-size: 10px;
+}
+.comUserRank {
+    margin: 2px;
+}
+.comUserRankText {
+    font-size: 90%;
+    font-weight: bold;
+}
+.comUserRankImg {
+    border: 0;
+}
+.comUserImg {
+    margin: 2px;
+}
+.comDate {
+    font-style: normal;
+    font-size: 85%;
+}
+.comDateCaption {
+    font-weight: bold;
+    font-style: normal;
+}
diff --git a/src/common/blocks/VisiomeLinks.tsx b/src/custom/blocks/VisiomeLinks.tsx
similarity index 76%
rename from src/common/blocks/VisiomeLinks.tsx
rename to src/custom/blocks/VisiomeLinks.tsx
index ef08ecc..9ffcfd4 100644
--- a/src/common/blocks/VisiomeLinks.tsx
+++ b/src/custom/blocks/VisiomeLinks.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
+import bannerJapanNode from '../../common/assets/theme/images/banner_incf-japan-node.gif';
+import bannerNIF from '../../common/assets/theme/images/banner_nif.gif';
+import bannerCBS from '../../common/assets/theme/images/banner_riken-cbs.gif';
+import bannerXooNIps from '../../common/assets/theme/images/banner_xoonips.gif';
+import LinkImage from "../../common/lib/LinkImage";
 import { MultiLang } from "../../config";
 import Functions from "../../functions";
-import bannerJapanNode from '../assets/theme/images/banner_incf-japan-node.gif';
-import bannerNIF from '../assets/theme/images/banner_nif.gif';
-import bannerCBS from '../assets/theme/images/banner_riken-cbs.gif';
-import bannerXooNIps from '../assets/theme/images/banner_xoonips.gif';
-import LinkImage from "../lib/LinkImage";
 
 interface Props {
     lang: MultiLang;
diff --git a/src/common/blocks/Announce.tsx b/src/custom/blocks/Welcome.tsx
similarity index 95%
rename from src/common/blocks/Announce.tsx
rename to src/custom/blocks/Welcome.tsx
index 555783d..272b9a3 100644
--- a/src/common/blocks/Announce.tsx
+++ b/src/custom/blocks/Welcome.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
+import NoticeSiteHasBeenArchived from '../../common/lib/NoticeSiteHasBeenArchived';
 import { MultiLang } from '../../config';
-import NoticeSiteHasBeenArchived from '../lib/NoticeSiteHasBeenArchived';
 
 interface Props {
     lang: MultiLang;
 }
 
-const Annuonce = (props: Props) => {
+const Welcome = (props: Props) => {
     const { lang } = props;
     const announce = {
         'en':
@@ -34,4 +34,4 @@ const Annuonce = (props: Props) => {
     );
 }
 
-export default Annuonce;
\ No newline at end of file
+export default Welcome;
\ No newline at end of file