diff --git a/app/models.py b/app/models.py
index 78d40f8..c0703ef 100644
--- a/app/models.py
+++ b/app/models.py
@@ -9,17 +9,14 @@ from app import db
 class Post(db.Model):
     id = db.Column(db.Integer, primary_key=True)
     title = db.Column(db.String(80))
-    content = db.Column(db.Text)
-    # pub_date = db.Column(db.DateTime)
+    pub_date = db.Column(db.DateTime)
 
-    def __init__(self, title,content, pub_date=None):
+    def __init__(self, title,paragraphs, pub_date=None):
         self.title = title
-        self.content = content
-        # if pub_date is None:
-        #     pub_date = datetime.utcnow()
-        # self.pub_date = pub_date
-        # paragraphs = text.split('\n\n')
-        # self.paragraphs = paragraphs
+        if pub_date is None:
+            pub_date = datetime.utcnow()
+        self.pub_date = pub_date
+        self.paragraphs = paragraphs
 
     def __repr__(self):
         return '<Post %r>' % self.title
@@ -27,8 +24,8 @@ class Post(db.Model):
 class Paragraph(db.Model):
     id = db.Column(db.Integer, primary_key=True)
     body = db.Column(db.Text)
-
     post_id = db.Column(db.Integer, db.ForeignKey('post.id'))
+    db.relationship('Post',backref=db.backref('paragraphs', lazy='dynamic'))
 
     def __init__(self, body,post_id):
         self.body = body
@@ -42,6 +39,7 @@ class Comment(db.Model):
     name = db.Column(db.String(50))
     message = db.Column(db.String(140))
     paragraph_id = db.Column(db.Integer, db.ForeignKey('paragraph.id'))
+    post_id = db.Column(db.Integer, db.ForeignKey('post.id'))
     db.relationship('Paragraph',backref=db.backref('comments', lazy='dynamic'))
 
     def __init__(self, name,message):
diff --git a/app/views.py b/app/views.py
index 9206fde..60d37bf 100644
--- a/app/views.py
+++ b/app/views.py
@@ -6,22 +6,47 @@ Licence: GPLv3
 
 from flask import request
 from flask_restless import APIManager
+from flask_restful import Resource,Api
 from app import app,db
 from models import Post,Paragraph,Comment
 
 # Create the Flask-Restless API manager.
 manager = APIManager(app, flask_sqlalchemy_db=db)
-
 # Create API endpoints, which will be available at /api/<tablename> by
 # default. Allowed HTTP methods can be specified as well.
-manager.create_api(Post, methods=['GET', 'POST', 'DELETE'])
+manager.create_api(Post, methods=['GET'])
 manager.create_api(Paragraph, methods=['GET'])
 manager.create_api(Comment, methods=['GET','POST'])
 
+restapi = Api(app)
+
 
 @app.route('/')
 def index():
     return app.send_static_file('index.html')
+
+class CreatePost(Resource):
+    def post(self):
+        try:
+            post_data = json.parse(request.data)
+            title = post_data['title']
+            content = post_data['content']
+            p = Post(title)
+            pgs = content.split('\n')
+            db.session.add(p)
+            db.session.add(p)
+            return {'post_id':'title'}
+        except Exception as e:
+            return {'error':'invalid_post'}
+
+
+restapi.add_resource(CreatePost,'/api/create_post')
+# @app.route('/api/create_post',methods=['POST'])
+# def create_post():
+#     title = request.form.get('title',None);
+#     content = request.form.get('content',None)
+#     print(title,content)
+#     return 'ok'
 #
 # @app.route('/api/addpost',methods=['POST'])
 # def addpost():
diff --git a/src/app.tsx b/src/app.tsx
index cebf35d..396487b 100755
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -1,11 +1,8 @@
 import * as React from 'react';
-import { Header } from './components';
+import { AddPost } from './components';
 
 export const App: React.StatelessComponent<{}> = (props) => {
   return (
-    <div className="container-fluid">
-      <Header />
-      {props.children}
-    </div>
+    <AddPost />
   );
 };
diff --git a/src/components/addpost.tsx b/src/components/addpost.tsx
index 0ce0895..c63dff8 100644
--- a/src/components/addpost.tsx
+++ b/src/components/addpost.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { Form, Container, Input, TextArea, Button } from 'semantic-ui-react';
+import { Form, Input, TextArea, Button } from 'semantic-ui-react';
+import { HeaderMenu } from './headermenu';
 
 export class AddPost extends React.Component<any, any> {
   constructor(props: any) {
@@ -10,7 +11,7 @@ export class AddPost extends React.Component<any, any> {
     let submitHandler = (e: any, d: any) => {
       let postContent = JSON.stringify(this.state);
       console.log('posting : ', postContent);
-      fetch('/api/post', {
+      fetch('/api/create_post', {
         method: 'POST',
         headers: {
           'Accept': 'application/json',
@@ -28,7 +29,7 @@ export class AddPost extends React.Component<any, any> {
         });
     };
     return (
-      <Container>
+      <HeaderMenu>
         <Form onSubmit={submitHandler}>
           <Form.Group widths="equal">
             <Form.Field
@@ -54,7 +55,7 @@ export class AddPost extends React.Component<any, any> {
 
           />
         </Form>
-      </Container>
+      </HeaderMenu>
     );
   }
 }
diff --git a/src/components/header.tsx b/src/components/header.tsx
deleted file mode 100755
index f90001e..0000000
--- a/src/components/header.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import * as React from 'react';
-import { Link } from 'react-router-dom';
-
-export const Header: React.StatelessComponent<{}> = () => {
-  return (
-    <div className="row">
-      <nav className="navbar navbar-default">
-        <div className="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
-          <ul className="nav navbar-nav">
-            <li><Link to="/addpost">Add New Post</Link></li>
-            <li><Link to="/listposts">List Posts</Link></li>
-          </ul>
-        </div>
-      </nav>
-    </div>
-  );
-};
diff --git a/src/components/headermenu.tsx b/src/components/headermenu.tsx
new file mode 100644
index 0000000..b5c81e3
--- /dev/null
+++ b/src/components/headermenu.tsx
@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { Container, Segment, Menu } from 'semantic-ui-react';
+import { Link } from 'react-router-dom';
+
+export class HeaderMenu extends React.Component<any, any> {
+  state = { activeItem: 'listpost' };
+
+  handleItemClick = (e: any, d: any) => this.setState({ activeItem: d.name });
+
+  render() {
+    let { activeItem } = this.state;
+    return (
+      <Container>
+        <Segment inverted={true} size="tiny" attached={true}>
+          <Menu>
+            <Menu.Item
+              as={Link}
+              to="/addpost"
+              name="newpost"
+              active={activeItem === 'newpost'}
+              onClick={this.handleItemClick}
+            >
+              Add New Post
+            </Menu.Item>
+
+            <Menu.Item
+              as={Link}
+              to="/listposts"
+              name="listpost"
+              active={activeItem === 'listpost'}
+              onClick={this.handleItemClick}
+            >
+              List Posts
+            </Menu.Item>
+          </Menu>
+        </Segment>
+        {this.props.children}
+      </Container>
+    );
+  }
+}
diff --git a/src/components/index.ts b/src/components/index.ts
index ab5a635..cf93ea4 100755
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,2 +1,3 @@
-export * from './header';
 export * from './addpost';
+export * from './listposts';
+export * from './headermenu';
diff --git a/src/components/listposts.tsx b/src/components/listposts.tsx
new file mode 100644
index 0000000..60aa68f
--- /dev/null
+++ b/src/components/listposts.tsx
@@ -0,0 +1,10 @@
+import * as React from 'react';
+// import { Comment } from 'semantic-ui-react';
+
+export class ListPost extends React.Component<any, any> {
+  render() {
+    return (
+      null
+    );
+  }
+}