diff --git a/com-dict-client/.env.sample b/com-dict-client/.env.sample
deleted file mode 100644
index 50c326a..0000000
--- a/com-dict-client/.env.sample
+++ /dev/null
@@ -1,4 +0,0 @@
-REACT_APP_FIREBASE_API_KEY = 
-REACT_APP_FIREBASE_PROJECT_ID = 
-REACT_APP_FIREBASE_MESSAGING_SENDER_ID = 
-REACT_APP_FIREBASE_APP_ID = 
\ No newline at end of file
diff --git a/com-dict-client/src/components/Header/index.js b/com-dict-client/src/components/Header/index.js
index a4824f0..639e3ee 100644
--- a/com-dict-client/src/components/Header/index.js
+++ b/com-dict-client/src/components/Header/index.js
@@ -17,9 +17,9 @@ function TitleBar() {
   const firebase = useFirebase();
   const history = useHistory();
   const user = useSelector((state) => state.firebase.auth);
-  console.log(user);
   const location = useLocation();
   console.log(location.pathname);
+  const { Title } = Typography;
 
   return (
     <nav>
@@ -70,12 +70,46 @@ function TitleBar() {
                 key="profile"
               >
                 <Menu.Item key="cat:0">
-                  <Link to="/#">{user.displayName}</Link>
+                  <Link to="/#">
+                    <Title level={5}>
+                      <span
+                        className="icons8-customer"
+                        style={{ marginRight: "10px" }}
+                      ></span>
+                      {user.displayName}
+                    </Title>
+                  </Link>
                 </Menu.Item>
-                <Menu.Item key="cat:0">
-                  <Typography onClick={() => signOut()(firebase, history)}>
+                <Menu.Item key="cat:1">
+                  <Link to="/letter">
+                    <Title level={5}>
+                      <span
+                        className="icons8-dictionary"
+                        style={{ marginRight: "10px" }}
+                      ></span>
+                      Word Lists
+                    </Title>
+                  </Link>
+                </Menu.Item>
+                <Menu.Item key="cat:2">
+                  <Link to="/profile">
+                    <Title level={5}>
+                      <span
+                        className="icons8-categories"
+                        style={{ marginRight: "10px" }}
+                      ></span>
+                      Account Settings
+                    </Title>
+                  </Link>
+                </Menu.Item>
+                <Menu.Item key="cat:3">
+                  <Title onClick={() => signOut()(firebase, history)} level={5}>
+                    <span
+                      className="icons8-logout"
+                      style={{ marginRight: "10px" }}
+                    ></span>
                     Logout
-                  </Typography>
+                  </Title>
                 </Menu.Item>
               </SubMenu>
             ) : (
diff --git a/com-dict-client/src/components/Profile/SubscriptionCard.js b/com-dict-client/src/components/Profile/SubscriptionCard.js
new file mode 100644
index 0000000..360889f
--- /dev/null
+++ b/com-dict-client/src/components/Profile/SubscriptionCard.js
@@ -0,0 +1,30 @@
+import React from "react";
+import { EllipsisOutlined, MoneyCollectOutlined } from "@ant-design/icons";
+import { Avatar, Card } from "antd";
+
+const { Meta } = Card;
+
+export default function SubscriptionCard() {
+  return (
+    <div>
+      <Card
+        style={{ width: 300 }}
+        cover={
+          <img
+            alt="example"
+            src="https://images.unsplash.com/photo-1476357471311-43c0db9fb2b4?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"
+          />
+        }
+        actions={[
+          <MoneyCollectOutlined key="pricing" />,
+          <EllipsisOutlined key="ellipsis" />,
+        ]}
+      >
+        <Meta
+          title="Premium Subscription"
+          description="Unlock premium for advanced..."
+        />
+      </Card>
+    </div>
+  );
+}
diff --git a/com-dict-client/src/containers/home/home.css b/com-dict-client/src/containers/home/home.css
index fcd874f..e8cc946 100644
--- a/com-dict-client/src/containers/home/home.css
+++ b/com-dict-client/src/containers/home/home.css
@@ -9,6 +9,26 @@
   font-family: 'Montserrat';
 }
 
+.p-10{
+  padding: 10vmin;
+}
+
+.pr-10{
+  padding-right: 10vmin;
+}
+
+.pl-10{
+  padding-left: 5vmin;
+}
+
+.pb-3{
+  padding-bottom: 3vmin;
+}
+
+.pt-10{
+  padding-top: 5vmin;
+}
+
 .title_bar
 {
   background-color:#f2f2f2 !important;
@@ -161,6 +181,39 @@
       background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4Igp3aWR0aD0iNDgiIGhlaWdodD0iNDgiCnZpZXdCb3g9IjAgMCAxNzIgMTcyIgpzdHlsZT0iIGZpbGw6IzAwMDAwMDsiPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0ibm9uemVybyIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIHN0cm9rZS1saW5lY2FwPSJidXR0IiBzdHJva2UtbGluZWpvaW49Im1pdGVyIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS1kYXNoYXJyYXk9IiIgc3Ryb2tlLWRhc2hvZmZzZXQ9IjAiIGZvbnQtZmFtaWx5PSJub25lIiBmb250LXdlaWdodD0ibm9uZSIgZm9udC1zaXplPSJub25lIiB0ZXh0LWFuY2hvcj0ibm9uZSIgc3R5bGU9Im1peC1ibGVuZC1tb2RlOiBub3JtYWwiPjxwYXRoIGQ9Ik0wLDE3MnYtMTcyaDE3MnYxNzJ6IiBmaWxsPSJub25lIj48L3BhdGg+PGc+PHBhdGggZD0iTTE1Ny42NjY2Nyw4NmMwLDM5LjU3NzkyIC0zMi4wODg3NSw3MS42NjY2NyAtNzEuNjY2NjcsNzEuNjY2NjdjLTM5LjU3NzkyLDAgLTcxLjY2NjY3LC0zMi4wODg3NSAtNzEuNjY2NjcsLTcxLjY2NjY3YzAsLTM5LjU3NzkyIDMyLjA4ODc1LC03MS42NjY2NyA3MS42NjY2NywtNzEuNjY2NjdjMzkuNTc3OTIsMCA3MS42NjY2NywzMi4wODg3NSA3MS42NjY2Nyw3MS42NjY2N3oiIGZpbGw9IiNjYTZiNjciPjwvcGF0aD48cGF0aCBkPSJNNzguODMzMzMsNTMuNzVoMTQuMzMzMzN2NjQuNWgtMTQuMzMzMzN6IiBmaWxsPSIjZmZmZmZmIj48L3BhdGg+PHBhdGggZD0iTTUzLjc1LDc4LjgzMzMzaDY0LjV2MTQuMzMzMzNoLTY0LjV6IiBmaWxsPSIjZmZmZmZmIj48L3BhdGg+PC9nPjwvZz48L3N2Zz4=') 50% 50% no-repeat;
       background-size: 100%; }
 
+      .icons8-logout{
+        vertical-align: middle;
+        display: inline-block;
+        margin: 0;
+        padding: 0;
+        width: 40px;
+        height: 40px;
+        background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAACXBIWXMAAAsTAAALEwEAmpwYAAABNUlEQVR4nO3YQUrDQBQG4Kw8QT2BQsW7uJKuXLn5X3yvOYMXEQTBRa1ij+F7RFfiDRR1I2j3ylCoUArNOJNmLPPDgy5K8vWfZChTFDk5ieWhOt5WxrUyTU3oO8Yo01QF4xroBQMdLhbMFofpKgIwXnO22KTgKxjYWnsymwy03OCK5GfwvzVoJzgwxtk9826SQGX6mO2R9GJl2U8PKLj43cgbINcNfDwdbBnT7fw7TK93Fe0nA/RG+t8Ubyp04/4INBkdYrB0mI6U8Txfbvd52XJ7A8sGD/afr4+nYGA9xF7SQGV6T3uJJc5LooJJSy8JBQG9cF0Ajeky6Y3ahD4b47oBlocmOK8r7KzEdQH0TgaGJje48Q1q6kcfKhi31yBGwUB3ROaQ7tfGbM4EoyjHbzk5xXrzA3bWZUEbYIWUAAAAAElFTkSuQmCC") 50% 50% no-repeat;
+        background-size: 100%;
+      }
+      .icons8-dictionary{
+        vertical-align: middle;
+        display: inline-block;
+        margin: 0;
+        padding: 0;
+        width: 40px;
+        height: 40px;
+        background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAACXBIWXMAAAsTAAALEwEAmpwYAAACdklEQVR4nO2YPYjUUBCA3/mDYnEK/qCNhYKC2OgVohb+VIqCWJzYyHLozuTNbM7G0mPFRmxEOztRUOQKrbQSrlHIzAYVDwT1RBvFTkH8QdSV2U1wWfeWFTcx4g5MkWTy3vdm3puZxLl/Waaq1XmRh13KMKYMkLXGAMt6hosqwW5leKGM9bw08n6kJzhh2CoEn/OE098DxChvOO0VUIhW/g047RVQw2BToQEj70cGgDzwIDb2jDBctAQrhLcLtweF8YswL7V3aow7CwgIt8z+XhCsqFerc4TgVaEAlYIjMcB8JZy094Tg/CwLeaaEV4VhOk/AT1EYDmulvFcZv1pyt/LYycu2CBu34WWGK/kAEtwwW2W4nICEdeeG2psLIdhzPxxbrox3NAjWCx9blwugEB6aKpUWCuO7BORuA5jgbAfbGSV4qBwcnhwdnZs5oDC8jwEWCePBn/fwezwOq2OGzS33Pqgv72gfPw/Aa2YnhNfbnp1oehGfJHbn7LpGWFHGC7ZPcwGsER5oTBQEG802VfV+TQJwOrHD5kLgW2PyCh7NHFAI3z4NwwUxwKpWuCjVMByOQtzQDTC9zsiDcCkJ483OC4CTSfgfpSFWBm4NsTCeygww8rAvBlhseXCW/TmdeGnCDomVwHRcK4sxwZbu4/+5Bx83tVsaglgYXv6SZgg+2mkXxteZHpIsNRoA8sCDbrAH9b86JEI4IwRefXlbx9Lm+6vWJfUMKAzPHxwvLXFFkyj1IEHVFVHiENYmIT7jiih154aa9RPfWFvliijCwX7r26ywC8F4rYLbC3NIUrFvjn58jGu/00yrWPec/Ksu3k90VxD5Ae3LCe3mRvgzAAAAAElFTkSuQmCC') 50% 50% no-repeat;
+        background-size: 100%;
+
+      }
+      .icons8-categories{
+        vertical-align: middle;
+        display: inline-block;
+        margin: 0;
+        padding: 0;
+        width: 40px;
+        height: 40px;
+        background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAABb0lEQVR4nO1ZUUrEMBDtJVz80CNZ9QiCZNKMezz1BIXOCH64H3sAd73GSizWUmU3aUaSwjwItBl4zWvyJp20qhQKRRQI4ZYQPhjhkNI8R/dgbr55GW1NzuyTeZ3Zc2OuQoQkixg/dOAVEMFDM7uTQuQe1rcpb9z6+I1gHhWCOiNRYF1aqGY/aNY6AvUIq0dAPXIM6hFWj4B6RMQj/1UA+WsxXgfvJ4X48lSqJH1xcP0jxNYyYswuqNRVlAZawikK2jpEiJ6icOApyuv67owcvPVvGLbk3HloP5dS6rbWrgjNpl9+ZuPvfTy0n+cKITSP3fr+wjdy8BQbn/KmiGitXc0W4gc4xJrmMjb+F+9cEVXK16+0kBQRbcqMfC0XP8B+kM+x8SlvighK8Yi02f21Zi0saEayZS0WFjJnE6RRf1H7SJas1Qmn32xZqxMWIiGCS9lHsnxrsWYtyJu1aAmnKBjwe3oRpygYUOoqFIpqjE92rooq7LPvhQAAAABJRU5ErkJggg==') 50% 50% no-repeat;
+        background-size: 100%;
+
+      }
+
       .ant-carousel .slick-slide {
         text-align: center;
         height: 12vmin;
@@ -182,5 +235,4 @@
   margin-left: 10%;
   color :#df815a;
 
-}
-
+}
\ No newline at end of file
diff --git a/com-dict-client/src/containers/profile/profile.js b/com-dict-client/src/containers/profile/profile.js
new file mode 100644
index 0000000..c9865ac
--- /dev/null
+++ b/com-dict-client/src/containers/profile/profile.js
@@ -0,0 +1,236 @@
+import React, { useState, useEffect } from "react";
+import TitleBar from "../../components/Header";
+import FooterPage from "../../components/Footer/FooterPage";
+import {
+  Row,
+  Col,
+  Typography,
+  Divider,
+  Layout,
+  Menu,
+  Input,
+  Button,
+  Space,
+  Avatar,
+} from "antd";
+import {
+  UserOutlined,
+  UploadOutlined,
+  PlusCircleOutlined,
+} from "@ant-design/icons";
+import SubscriptionCard from "../../components/Profile/SubscriptionCard";
+
+const { Title } = Typography;
+const { Search } = Input;
+const { Header, Footer, Content } = Layout;
+
+function getItem(label, key, icon, children, type) {
+  return {
+    key,
+    icon,
+    children,
+    label,
+    type,
+  };
+}
+
+const Profile = () => {
+  const [current, setCurrent] = useState("1");
+
+  useEffect(() => {
+    const current = localStorage.getItem("currentMenu");
+    console.log("current", current);
+
+    current && setCurrent(current);
+  }, []);
+
+  const items = [
+    getItem("Favorites", "1"),
+    getItem("Subscriptions", "2"),
+    getItem("Settings", "3"),
+    getItem("Help", "4"),
+    getItem("Sign Out", "5"),
+  ];
+
+  const onClick = (e) => {
+    localStorage.setItem("currentMenu", e.key);
+    setCurrent(e.key);
+  };
+
+  const onSearch = (value) => console.log(value);
+
+  const switchMenu = () => {
+    switch (current) {
+      case "1":
+        return (
+          <>
+            <Title level={4}>Favorites</Title>
+            <p>The place where you manage your Favorite words-list.</p>
+            <p>No words added yet.</p>
+            <Button
+              style={{
+                marginLeft: "5px",
+                justifyItems: "center",
+              }}
+              type="primary"
+              shape="round"
+              icon={<PlusCircleOutlined />}
+              size={{ xs: 24, sm: 32, md: 40, lg: 64, xl: 80, xxl: 100 }}
+            >
+              Create List
+            </Button>
+          </>
+        );
+      case "2":
+        return (
+          <>
+            <Title level={4}>Subscriptions</Title>
+            <p>The place where you manage your Subscriptions.</p>
+            <p>You are on free plan currently.</p>
+            <Space direction="horizontal">
+              <SubscriptionCard />
+              <SubscriptionCard />
+              <SubscriptionCard />
+            </Space>
+          </>
+        );
+      case "3":
+        return (
+          <>
+            <Title level={3}>Profile</Title>
+            <p>The place where you manage your settings.</p>
+            <div
+              style={{
+                display: "flex",
+                paddingBottom: "5px",
+                justifyItems: "center",
+              }}
+            >
+              <Avatar
+                size={{ xs: 24, sm: 32, md: 40, lg: 64, xl: 80, xxl: 100 }}
+                icon={<UserOutlined />}
+              />
+
+              <div
+                style={{
+                  paddingTop: "2%",
+                  paddingLeft: "5px",
+                  justifyContent: "center",
+                }}
+              >
+                <Button
+                  style={{
+                    marginLeft: "5px",
+                    justifyItems: "center",
+                  }}
+                  type="primary"
+                  shape="round"
+                  icon={<UploadOutlined />}
+                  size={{ xs: 24, sm: 32, md: 40, lg: 64, xl: 80, xxl: 100 }}
+                ></Button>
+                <p>Upload Profile</p>
+              </div>
+            </div>
+
+            <Row className="pb-3">
+              <Col span={10} className="pr-10">
+                <Title level={5}>First name</Title>
+                <Input placeholder="First name" />
+              </Col>
+              <Col span={10} className="pr-10">
+                <Title level={5}>Last name</Title>
+                <Input placeholder="Last name" />
+              </Col>
+            </Row>
+            <Row className="pb-3">
+              <Col span={10} className="pr-10">
+                <Title level={5}>Email</Title>
+                <Input placeholder="Email" />
+              </Col>
+              <Col span={10} className="pr-10">
+                <Title level={5}>Password</Title>
+                <Input.Password placeholder="input password" />
+              </Col>
+            </Row>
+            <Title level={4}>Account Management</Title>
+            <p>
+              You can delete your account at any time. However, please note that
+              <br />
+              all your data and saved words will be lost! This cannot be undone.
+            </p>
+            <Space wrap>
+              <Button type="primary">Save</Button>
+              <Button danger>Delete Account</Button>
+            </Space>
+          </>
+        );
+      case "4":
+        return (
+          <>
+            <Title level={4}>How can we help you ?</Title>
+            <p>Ask your question below.</p>
+            <Search
+              placeholder="input search text"
+              onSearch={onSearch}
+              style={{
+                width: 600,
+                paddingBottom: 5,
+              }}
+            />
+            <Space direction="vertical">
+              <Typography>
+                want to suggest a word or have comment on one of our examples?
+              </Typography>
+              <Button type="primary" shape="round">
+                Fill this form
+              </Button>
+              <Typography>
+                It is a long established fact that a reader will be distracted
+                by the readable content of a page when looking at its layout.
+                The point of using Lorem Ipsum is that it has a more-or-less
+                normal distribution of letters, as opposed to using 'Content
+                here, content here', making it look like readable English. Many
+                desktop publishing packages and web page editors now use Lorem
+                Ipsum as their default model text, and a search for 'lorem
+                ipsum' will uncover many web sites still in their infancy.
+                Various versions have evolved over the years, sometimes by
+                accident, sometimes on purpose (injected humour and the like).
+              </Typography>
+            </Space>
+          </>
+        );
+      default:
+        return <></>;
+    }
+  };
+
+  return (
+    <Layout>
+      <Header className="title_bar body">
+        <TitleBar />
+      </Header>
+      <Content className=" body  p-10">
+        <Title level={4}> My Account</Title>
+        <Row>
+          <Col span={6}>
+            <Menu
+              onClick={onClick}
+              style={{
+                width: 256,
+              }}
+              mode="vertical"
+              items={items}
+            />
+            <Divider type="vertical" />
+          </Col>
+          <Col span={18}>{switchMenu()}</Col>
+        </Row>
+      </Content>
+      <Footer className="footer_div">
+        <FooterPage />
+      </Footer>
+    </Layout>
+  );
+};
+
+export default Profile;
diff --git a/com-dict-client/src/routes.js b/com-dict-client/src/routes.js
index 10a0924..e7aadac 100644
--- a/com-dict-client/src/routes.js
+++ b/com-dict-client/src/routes.js
@@ -11,6 +11,7 @@ import CommentWord from "./containers/comment/comment";
 import Report from "./containers/reportWord/reportWord";
 import Search from "./containers/search/search";
 import { useSelector } from "react-redux";
+import Profile from "./containers/profile/profile";
 // import { auth } from "./config";
 
 export default function Routes() {
@@ -21,6 +22,7 @@ export default function Routes() {
       <Route exact path="/browse" component={Browse} />
       <Route path="/search/:language/:keyword" component={Search} />
       <Route exact path="/Categories" component={Categories} />
+      <Route exact path="/Profile" component={Profile} />
       <PrivateRoute path="/add">
         <AddWord />
       </PrivateRoute>
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..0a3006e
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,6 @@
+{
+  "name": "com-dictionary",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}