diff --git a/twistter-frontend/src/App.css b/twistter-frontend/src/App.css
index 55d854d..ea9e7c5 100644
--- a/twistter-frontend/src/App.css
+++ b/twistter-frontend/src/App.css
@@ -49,4 +49,5 @@
 .container {
   margin: 80px auto 0 auto;
   max-width: 1200px;
+  color: #1da1f2;
 }
\ No newline at end of file
diff --git a/twistter-frontend/src/App.js b/twistter-frontend/src/App.js
index f7157c9..c2c5c93 100644
--- a/twistter-frontend/src/App.js
+++ b/twistter-frontend/src/App.js
@@ -7,11 +7,11 @@ import { BrowserRouter as Router } from 'react-router-dom';
 import Route from 'react-router-dom/Route';
 import NavBar, { Navbar } from './components/layout/NavBar';
 
-// Pages
-import home from './Home.js';
-import register from './Register.js';
-import login from './Login.js';
-import user from './pages/user';
+import home from './pages/Home';
+import register from './pages/Register';
+import login from './pages/Login';
+import user from './pages/User';
+
 import writeMicroblog from './Writing_Microblogs.js';
 import edit from './pages/edit.js';
 import userLine from './Userline.js';
@@ -20,7 +20,7 @@ class App extends Component {
   render() {
     return (
       <Router>
-        <div className='container'>
+        <div className='container' >
           <Navbar />
         </div>
 
diff --git a/twistter-frontend/src/components/topic/ChipsArray.js b/twistter-frontend/src/components/topic/ChipsArray.js
index a99afd1..2bb2013 100644
--- a/twistter-frontend/src/components/topic/ChipsArray.js
+++ b/twistter-frontend/src/components/topic/ChipsArray.js
@@ -3,7 +3,9 @@ import { makeStyles } from '@material-ui/core/styles';
 import Chip from '@material-ui/core/Chip';
 import Paper from '@material-ui/core/Paper';
 
-const useStyles = makeStyles(theme => ({
+
+// TODO: fix the style
+const styles = makeStyles(theme => ({
   root: {
     display: 'flex',
     justifyContent: 'center',
diff --git a/twistter-frontend/src/Home.js b/twistter-frontend/src/pages/Home.js
similarity index 92%
rename from twistter-frontend/src/Home.js
rename to twistter-frontend/src/pages/Home.js
index dfd653c..43bf100 100644
--- a/twistter-frontend/src/Home.js
+++ b/twistter-frontend/src/pages/Home.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
-import './App.css';
+import '../App.css';
 
-import logo from './images/twistter-logo.png';
+import logo from '../images/twistter-logo.png';
 
 
 class Home extends Component {
diff --git a/twistter-frontend/src/Login.js b/twistter-frontend/src/pages/Login.js
similarity index 90%
rename from twistter-frontend/src/Login.js
rename to twistter-frontend/src/pages/Login.js
index 550ed54..76531d2 100644
--- a/twistter-frontend/src/Login.js
+++ b/twistter-frontend/src/pages/Login.js
@@ -1,8 +1,8 @@
 /* eslint-disable */
 import React, { Component } from 'react';
-import './App.css';
+import '../App.css';
 
-import logo from './images/twistter-logo.png';
+import logo from '../images/twistter-logo.png';
 import TextField from '@material-ui/core/TextField';
 
 class Login extends Component {
diff --git a/twistter-frontend/src/Register.js b/twistter-frontend/src/pages/Register.js
similarity index 92%
rename from twistter-frontend/src/Register.js
rename to twistter-frontend/src/pages/Register.js
index c67d8c2..3d5db00 100644
--- a/twistter-frontend/src/Register.js
+++ b/twistter-frontend/src/pages/Register.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
-import './App.css';
+import '../App.css';
 
-import logo from './images/twistter-logo.png';
+import logo from '../images/twistter-logo.png';
 import TextField from '@material-ui/core/TextField';
 
 class Register extends Component {