diff --git a/components/global/Header.tsx b/components/global/Header.tsx
index 5bce70e..c951828 100644
--- a/components/global/Header.tsx
+++ b/components/global/Header.tsx
@@ -29,7 +29,8 @@ const SyledDetailContainer = styled.div`
 
 const StyledBio = styled.p`
   color: black;
-  padding-top: 3em;
+  padding-top: 1em;
+  margin-left: 94.4px;
   overflow-wrap: break-word;
 `
 
@@ -76,9 +77,9 @@ const Header = ({ user, follow, unfollow }) => {
         <StyledBio>{user.bio}</StyledBio>
       </Col>
       <Col span={10}>
-        {<DetailInfo infoName={'Location'} infoData={user.location} />}
+        {user.location?<DetailInfo infoName={'Location'} infoData={user.location} />:null}
         {<DetailInfo infoName={'Joined'} infoData={user.joined} />}
-        {<DetailInfo infoName={'Occupation'} infoData={user.occupation} />}
+        {user.occupation?<DetailInfo infoName={'Occupation'} infoData={user.occupation} />:null}
       </Col>
     </Row>
   )
diff --git a/components/global/UserList.tsx b/components/global/UserList.tsx
index 8b55107..83994d5 100644
--- a/components/global/UserList.tsx
+++ b/components/global/UserList.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
 import User from './User'
-import styled from 'styled-components'
-import {List, Skeleton} from 'antd';
+import styled from 'styled-components';
+import {List, Skeleton, Button} from 'antd';
+import UserAPI from '../../lib/api/user';
 
 const StyledHeader = styled.div`
   font-family: Open Sans, sans-serif;
@@ -13,29 +14,58 @@ const StyledHeader = styled.div`
   margin-bottom: 0.2em;
 `
 
-const UserList = (props) => (
-  <>
-    <StyledHeader>{props.header}</StyledHeader>
-    <List
-      className="user-list"
-      itemLayout="horizontal"
-      dataSource={props.users}
-      renderItem={ user => (
+const UserList = (props) => {
 
-        <List.Item style={{border: 'none'}}>
-          <Skeleton avatar title={false} loading={props.loading} active>
-            <User 
-              name = {user['profile']['username']}
-              image = {user['profile']['image']}
-              username = {user['profile']['username']}
-              following = {user['profile']['following']}
-              hasButton = {true}
-            />
-          </Skeleton>
-        </List.Item>
-      )}
-    />
-  </>
-)
+  const follow = user => {
+    if(user.profile.following == false){
+      UserAPI.follow(user.profile.username,user.profile.email)
+    }
+    else{
+      UserAPI.unfollow(user.profile.username)
+    }
+  }
+
+  return(
+    <div>
+      <StyledHeader>{props.header}</StyledHeader>
+      <List
+        className="user-list"
+        itemLayout="horizontal"
+        dataSource={props.users}
+        renderItem={ user => {
+          const handleClick = () => {
+            follow(user)
+          }
+          return(
+            <List.Item style={{border: 'none'}}>
+              <Skeleton avatar title={false} loading={props.loading} active>
+                <User 
+                  name = {user['profile']['username']}
+                  image = {user['profile']['image']}
+                  username = {user['profile']['username']}
+                  following = {user['profile']['following']}
+                />
+                <Button
+                type={'primary'}
+                size={'small'}
+                onClick={handleClick}
+                style={{
+                  background: user['profile']['following'] ? '#4EC700' : '#007BED',
+                  borderColor: user['profile']['following'] ? '#4EC700' : '#007BED',
+                  borderRadius: '0.5em',
+                  padding: '0em 1em',
+                  margin: '1.6em',
+                  fontSize: '0.9em',
+                  fontWeight: 'bold',
+                }}>
+                {user['profile']['following'] ? 'Following' : '+ Follow'}
+              </Button>
+              </Skeleton>
+            </List.Item>
+        )}}
+      />
+    </div>
+  )
+}
 
 export default UserList
\ No newline at end of file
diff --git a/pages/organization/[pid].tsx b/pages/organization/[pid].tsx
index 58a9edb..419dedc 100644
--- a/pages/organization/[pid].tsx
+++ b/pages/organization/[pid].tsx
@@ -1,7 +1,114 @@
 import React from "react";
+import useSWR from "swr";
+import { SERVER_BASE_URL } from "../../lib/utils/constant";
+import OrganizationsAPI from "../../lib/api/organizations";
+import { Col, Row } from 'antd';
+import Header from "../../components/global/Header";
+import ArticleList from "../../components/global/ArticleList";
+import UserList from "../../components/global/UserList";
+import fetcher from "../../lib/utils/fetcher";
+import Tab_list from "../../components/profile/Tab_list";
 
-const replaceMe = () => {
-    return <></>
+const Organization = ({organization: InitialOrganization}) => {
+	const InitialOrganizationData = {
+		username: InitialOrganization.name,
+		image: InitialOrganization.image,
+		following: InitialOrganization.is_following,
+		is_moderator: InitialOrganization.is_moderator,
+		followers: InitialOrganization.followers,
+		moderators: InitialOrganization.moderators,
+		joined: InitialOrganization.createdAt,
+		bio: InitialOrganization.description
+	}
+
+	const { 
+		data: OrganizationArticles, 
+		error: ArticleError,
+	} = useSWR(
+		`${SERVER_BASE_URL}/organizations/${InitialOrganization.slug}/articles`,
+    	fetcher,
+    );
+
+    const {
+    	data: OrganizationData,
+    	error: OrganizationError,
+    } = useSWR(
+    	`${SERVER_BASE_URL}/organizations/${InitialOrganization.slug}`,
+    	fetcher, {refreshInterval:500},
+    );
+
+    if(OrganizationData!=undefined && OrganizationData.organization!=InitialOrganization){
+    	InitialOrganization = OrganizationData.organization;
+    	InitialOrganizationData.following = InitialOrganization.is_following;
+	}
+
+	const Articles = OrganizationArticles || {
+		articles: [],
+	};
+
+	const [PostTab,setPostTab] = React.useState(true)
+
+	const [FollowerTab,setFollowerTab] = React.useState(false)
+
+	const handleFollow = async () => {
+	    OrganizationsAPI.follow(InitialOrganization.slug);
+  	};
+
+	const handleUnfollow = async () => {
+		OrganizationsAPI.unfollow(InitialOrganization.slug);
+	};
+
+	const TabClick = (key) => {
+		if(key=='Posts'){
+			setPostTab(true)
+			setFollowerTab(false)
+		}
+		else if(key=='Followers'){
+			setPostTab(false)
+			setFollowerTab(true)
+		}
+	}
+
+    return(
+    	<div style={{width: "75%", margin: "6em auto"}}>
+    		<Col span={20}>
+    			<Header user={InitialOrganizationData} follow={handleFollow} unfollow={handleUnfollow}/>
+    		</Col>
+    		<Col span={4}/>
+	    	<Row>
+	    		<Col span={14}>
+		    		<Row>
+		    			<Col span={24}>
+		    				<Tab_list tabs={['Posts','Followers']} position={'top'} onClick={TabClick}/>
+		    			</Col>
+		    		</Row>
+		    		<Row>
+			    		<Col span={24}>
+			    			{PostTab?<ArticleList articles={Articles.articles}/>:null}
+			    			{FollowerTab?<UserList users={InitialOrganization.followers}/>:null}
+			    		</Col>
+		    		</Row>
+	    		</Col>
+	    		<Col span={2}/>
+	    		<Col span={4}>
+	    			<Col span={24}>
+	    				<h5>Moderators</h5>
+	    				<UserList users={InitialOrganization.moderators}/>
+	    				<br/>
+	    				<h5>Members</h5>
+	    				<UserList users={InitialOrganization.followers}/>
+	    			</Col>
+	    		</Col>
+	    	</Row>
+    	</div>
+    ); 
 }
 
-export default replaceMe;
\ No newline at end of file
+Organization.getInitialProps = async ({ query: { pid } }) => {
+  const {
+    data: { organization },
+  } = await OrganizationsAPI.get(pid);
+  return { organization };
+};
+
+export default Organization;
\ No newline at end of file