diff --git a/src/pages/Profile/Profile.js b/src/pages/Profile/Profile.js
index 1b3baea..8aaa140 100644
--- a/src/pages/Profile/Profile.js
+++ b/src/pages/Profile/Profile.js
@@ -1,24 +1,48 @@
 import React from "react";
-import {PageHeader} from "antd";
+import {Button, Card, Col, Input, Row} from "antd";
+import {BreadcumbComponent} from "../../component/BreadcumbComponent";
+import {FilterOutlined, PlusSquareOutlined} from "@ant-design/icons";
+import {LINKS} from "../../routes/app";
+
+const {Search} = Input;
 
 export const Profile = () => {
+    const routeData = [
+        {
+            route: LINKS.HOME,
+            name: "Home",
+        },
+        {
+            route: LINKS.PROFILE,
+            name: <span style={{fontWeight: 'bold'}}>Profile</span>,
+        },
+    ];
+
     return (
         <div className={["ppob-container"].join(" ")}>
-            <PageHeader
-                style={{
-                    padding: 0,
-                    margin: 0,
-                    height: 40,
-                    backgroundColor: "transparent",
-                }}
-                title={"Profile"}
-            >
-            </PageHeader>
-            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aut recusandae velit! Consequatur
-            corporis,
-            eum fuga, harum incidunt laboriosam minus necessitatibus neque non nostrum pariatur tempore. Dignissimos
-            impedit
-            rem tempora!
+            <BreadcumbComponent data={routeData}/>
+            <Card>
+                <Row style={{marginBottom: 20}}>
+                    <Col span={12}>
+                        <Button>
+                            <FilterOutlined/>
+                            Filter
+                        </Button>
+                    </Col>
+                    <Col span={12} style={{textAlign: "right"}}>
+                        <Search
+                            placeholder="input search text"
+                            style={{width: 200, marginRight: 10}}
+                        />
+                        <Button onClick={() => {
+                        }}>
+                            <PlusSquareOutlined/> New
+                        </Button>
+                    </Col>
+                </Row>
+                <div></div>
+            </Card>
+
         </div>
     )
 };
diff --git a/src/routes/app.js b/src/routes/app.js
index bada08d..414bc9e 100644
--- a/src/routes/app.js
+++ b/src/routes/app.js
@@ -4,6 +4,7 @@ import {About} from "../pages/About/About";
 import {Membership} from "../pages/Membership/Membership";
 import {Product} from "../pages/Product/Product";
 import {Transaction} from "../pages/Transaction/Transaction";
+import {Profile} from "../pages/Profile/Profile";
 
 export const LINKS = {
     HOME: "/app/home",
@@ -32,7 +33,7 @@ export const AppRoute = () => {
             <About/>
         </Route>
         <Route path={LINKS.PROFILE}>
-            <About/>
+            <Profile/>
         </Route>
         <Route path="/app" exact>
             <Redirect to={LINKS.HOME}/>