diff --git a/components/App.css b/components/App/App.css
similarity index 99%
rename from components/App.css
rename to components/App/App.css
index b3240ab1..5e629b92 100644
--- a/components/App.css
+++ b/components/App/App.css
@@ -3,4 +3,4 @@
 
 html {
   font: 15px/1.6 思源黑體, "Source Han Sans", "Noto Sans CJK TC", 蘋方-繁, "PingFang TC", 微軟正黑體, "Microsoft JhengHei", sans-serif;
-}
\ No newline at end of file
+}
diff --git a/components/App.js b/components/App/App.js
similarity index 93%
rename from components/App.js
rename to components/App/App.js
index 87215a3c..cffee929 100644
--- a/components/App.js
+++ b/components/App/App.js
@@ -7,17 +7,17 @@ import Head from 'next/head';
 import { Provider } from 'react-redux';
 import Router from 'next/router';
 import { fromJS } from 'immutable';
-import { setLogin } from '../util/gql';
-import configure from '../redux';
-import { showDialog, load } from '../redux/auth';
+import { setLogin } from '../../util/gql';
+import configure from '../../redux';
+import { showDialog, load } from '../../redux/auth';
 import AppHeader from './AppHeader';
 import AppFooter from './AppFooter';
-import LoginModal from './Modal/LoginModal';
+import LoginModal from '../Modal/LoginModal';
 import moment from 'moment';
 import 'moment/locale/zh-tw';
 import style from './App.css';
 import NProgress from 'nprogress';
-const { GA_TRACKER, AUTOTRACK_FILENAME } = require('../config');
+const { GA_TRACKER, AUTOTRACK_FILENAME } = require('../../config');
 
 let isBootstrapping = true;
 moment.locale('zh-tw');
diff --git a/components/AppFooter.js b/components/App/AppFooter.js
similarity index 92%
rename from components/AppFooter.js
rename to components/App/AppFooter.js
index 61daa297..b2ba5f31 100644
--- a/components/AppFooter.js
+++ b/components/App/AppFooter.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { EDITOR_FACEBOOK_GROUP } from '../constants/urls';
+import { EDITOR_FACEBOOK_GROUP } from '../../constants/urls';
 
 export default function AppFooter() {
   return (
diff --git a/components/AppHeader.js b/components/App/AppHeader.js
similarity index 93%
rename from components/AppHeader.js
rename to components/App/AppHeader.js
index 89f97e20..165b9373 100644
--- a/components/AppHeader.js
+++ b/components/App/AppHeader.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import { EDITOR_FACEBOOK_GROUP } from '../constants/urls';
-import { Link } from '../routes';
-import { showDialog, logout } from '../redux/auth';
+import { EDITOR_FACEBOOK_GROUP } from '../../constants/urls';
+import { Link } from '../../routes';
+import { showDialog, logout } from '../../redux/auth';
 
 function AppHeader({ user, onLoginClick, onLogoutClick }) {
   return (
diff --git a/components/App/index.js b/components/App/index.js
new file mode 100644
index 00000000..6b1c4b42
--- /dev/null
+++ b/components/App/index.js
@@ -0,0 +1,2 @@
+import app from './App';
+export default app;