diff --git a/packages/app/src/pages/home/[type].jsx b/packages/app/src/pages/home/[type].jsx
deleted file mode 100755
index 6413503c..00000000
--- a/packages/app/src/pages/home/[type].jsx
+++ /dev/null
@@ -1,116 +0,0 @@
-import React from "react"
-import * as antd from "antd"
-import classnames from "classnames"
-import { Translation } from "react-i18next"
-
-import { Icons, createIconRender } from "components/Icons"
-
-import { HashtagTrendings, FeaturedEventsAnnouncements, ConnectedFriends } from "components"
-
-import Tabs from "./tabs"
-
-import "./index.less"
-
-export default class Dashboard extends React.Component {
-    state = {
-        activeTab: this.props.params.type ?? "feed"
-    }
-
-    primaryPanelRef = React.createRef()
-
-    componentDidMount() {
-        app.eventBus.emit("style.compactMode", false)
-    }
-
-    renderActiveTab() {
-        const tab = Tabs[this.state.activeTab]
-
-        if (!tab) {
-            return <antd.Result
-                status="404"
-                title="404"
-                subTitle="Sorry, the tab you visited does not exist."
-            />
-        }
-
-        return React.createElement(tab.component)
-    }
-
-    handleTabChange = (key) => {
-        if (this.state.activeTab === key) return
-
-        // set to primary panel fade-opacity-leave class
-        this.primaryPanelRef.current.classList.add("fade-opacity-leave")
-
-        setTimeout(() => {
-            this.setState({ activeTab: key })
-            // update location
-            app.history.replace(key)
-        }, 200)
-
-        // remove fade-opacity-leave class after animation
-        setTimeout(() => {
-            this.primaryPanelRef.current.classList.remove("fade-opacity-leave")
-        }, 300)
-    }
-
-    render() {
-        return <div className="postingDashboard">
-            <div></div>
-
-            <div
-                ref={this.primaryPanelRef}
-                className={classnames("panel", "fade-opacity-active")}
-                style={{ width: "102%" }}
-            >
-                {this.renderActiveTab()}
-            </div>
-
-            <div className="panel">
-                <div className="card" id="browserType">
-                    <h2>
-                        <Icons.Compass />
-                        <Translation>{(t) => t("Browser")}</Translation>
-                    </h2>
-                    <antd.Menu
-                        mode="inline"
-                        selectedKeys={[this.state.activeTab]}
-                        activeKey={this.state.activeTab}
-                        onClick={({ key }) => this.handleTabChange(key)}
-                    >
-                        {Object.keys(Tabs).map((key) => {
-                            const tab = Tabs[key]
-
-                            return <antd.Menu.Item
-                                key={key}
-                                icon={createIconRender(tab.icon)}
-                            >
-                                {tab.title}
-                            </antd.Menu.Item>
-                        })}
-                    </antd.Menu>
-                </div>
-
-                <div className="card" id="trendings">
-                    <h2>
-                        <Icons.TrendingUp />
-                        <Translation>{(t) => t("Trendings")}</Translation>
-                    </h2>
-                    <HashtagTrendings />
-                </div>
-
-                <div className="card" id="onlineFriends">
-                    <h2>
-                        <Icons.Rss />
-                        <Translation>{(t) => t("Online Friends")}</Translation>
-                    </h2>
-                    <div className="content">
-                        <ConnectedFriends />
-                    </div>
-                </div>
-
-                <FeaturedEventsAnnouncements />
-            </div>
-        </div>
-    }
-}
\ No newline at end of file
diff --git a/packages/app/src/pages/home/[type].mobile.jsx b/packages/app/src/pages/home/[type].mobile.jsx
deleted file mode 100755
index 1a3e7f45..00000000
--- a/packages/app/src/pages/home/[type].mobile.jsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import React from "react"
-import * as antd from "antd"
-import classnames from "classnames"
-
-import Tabs from "./tabs"
-
-import "./index.less"
-
-export default class Dashboard extends React.Component {
-    state = {
-        activeTab: this.props.params.type ?? "feed"
-    }
-
-    primaryPanelRef = React.createRef()
-
-    componentDidMount() {
-        app.eventBus.emit("style.compactMode", false)
-    }
-
-    renderActiveTab() {
-        const tab = Tabs[this.state.activeTab]
-
-        if (!tab) {
-            return <antd.Result
-                status="404"
-                title="404"
-                subTitle="Sorry, the tab you visited does not exist."
-            />
-        }
-
-        return React.createElement(tab.component)
-    }
-
-    handleTabChange = (key) => {
-        if (this.state.activeTab === key) return
-
-        // set to primary panel fade-opacity-leave class
-        this.primaryPanelRef.current.classList.add("fade-opacity-leave")
-
-        setTimeout(() => {
-            this.setState({ activeTab: key })
-            // update location
-            app.history.replace(key)
-        }, 200)
-
-        // remove fade-opacity-leave class after animation
-        setTimeout(() => {
-            this.primaryPanelRef.current.classList.remove("fade-opacity-leave")
-        }, 300)
-    }
-
-    render() {
-        return <div className="postingDashboard mobile">
-            <div
-                ref={this.primaryPanelRef}
-                className={classnames("panel", "fade-opacity-active")}
-            >
-                {this.renderActiveTab()}
-            </div>
-        </div>
-    }
-}
\ No newline at end of file
diff --git a/packages/app/src/pages/home/index.jsx b/packages/app/src/pages/home/index.jsx
deleted file mode 100755
index ad7cbda3..00000000
--- a/packages/app/src/pages/home/index.jsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from "react"
-
-export default () => {
-    app.setLocation("/home/feed", {
-        "noTransition": true,
-    })
-
-    return <></>
-}
\ No newline at end of file
diff --git a/packages/app/src/pages/home/index.less b/packages/app/src/pages/home/index.less
deleted file mode 100755
index 655ec56d..00000000
--- a/packages/app/src/pages/home/index.less
+++ /dev/null
@@ -1,49 +0,0 @@
-.postingDashboard {
-    display: grid;
-
-    &.mobile {
-        display: block;
-    }
-
-    grid-template-columns: 10vw 1fr 0.5fr;
-    grid-template-rows: 1fr;
-    grid-column-gap: 20px;
-    grid-row-gap: 0px;
-
-    width: 100%;
-
-    .panel {
-        position: sticky;
-        top: 0;
-
-        height: fit-content;
-
-        display: flex;
-        flex-direction: column;
-
-        align-items: center;
-
-        >div {
-            margin-bottom: 15px;
-        }
-
-        .card {
-            background-color: var(--background-color-accent);
-            border-radius: 12px;
-            padding: 20px;
-
-            min-width: 20vw;
-
-            h1,
-            h2 {
-                font-family: "Space Grotesk", sans-serif;
-            }
-        }
-    }
-
-    .ant-menu {
-        svg {
-            margin-right: 0 !important;
-        }
-    }
-}
\ No newline at end of file
diff --git a/packages/app/src/pages/index.jsx b/packages/app/src/pages/index.jsx
index 7c04ba89..694c0f57 100755
--- a/packages/app/src/pages/index.jsx
+++ b/packages/app/src/pages/index.jsx
@@ -1,13 +1,137 @@
 import React from "react"
-import config from "config"
+import * as antd from "antd"
+import classnames from "classnames"
+import { Translation } from "react-i18next"
 
-export default (props) => {
-    if (!props.session) {
-        window.app.setLocation(config.app?.authPath ?? "/login")
-        return <div />
+import { Icons, createIconRender } from "components/Icons"
+
+import { HashtagTrendings, FeaturedEventsAnnouncements, ConnectedFriends, PostCard } from "components"
+
+import Tabs from "./posts/tabs"
+
+import "./index.less"
+
+const defaultTab = "feed"
+
+export default class Dashboard extends React.Component {
+    state = {
+        activeTab: this.props.query.type ?? defaultTab,
+        openPost: null,
     }
 
-    window.app.setLocation(config.app?.mainPath ?? "/home")
+    primaryPanelRef = React.createRef()
 
-    return <div />
+    renderActiveTab = () => {
+        const tab = Tabs[this.state.activeTab]
+
+        if (!tab) {
+            this.setState({ activeTab: defaultTab }, () => this.replaceQueryTypeToCurrentTab())
+
+            return
+        }
+
+        return React.createElement(tab.component, {
+            onOpenPost: this.onOpenPost,
+        })
+    }
+
+    handleTabChange = (key) => {
+        if (this.state.activeTab === key) return
+
+        // set to primary panel fade-opacity-leave class
+        this.primaryPanelRef.current.classList.add("fade-opacity-leave")
+
+        setTimeout(() => {
+            this.setState({ activeTab: key })
+            this.replaceQueryTypeToCurrentTab()
+        }, 200)
+
+        // remove fade-opacity-leave class after animation
+        setTimeout(() => {
+            this.primaryPanelRef.current.classList.remove("fade-opacity-leave")
+        }, 300)
+    }
+
+    replaceQueryTypeToCurrentTab = () => {
+        app.history.replace(`${window.location.pathname}?type=${this.state.activeTab}`)
+    }
+
+    onOpenPost = (to, data) => {
+        console.log("onOpenPost", to, data)
+
+        this.setState({
+            openPost: to ? data : null,
+        })
+    }
+
+    render() {
+        return <div className="postingDashboard">
+            <div className="panel left">
+                <div className="card" id="browserType">
+                    <div className="header">
+                        <h1>
+                            <Icons.MdTag />
+                            <Translation>{(t) => t("Posts")}</Translation>
+                        </h1>
+                        <antd.Button
+                            type="primary"
+                            onClick={app.controls.openPostCreator}
+                        >
+                            <Icons.PlusCircle />
+                            <Translation>{(t) => t("Create")}</Translation>
+                        </antd.Button>
+                    </div>
+
+                    <antd.Menu
+                        mode="inline"
+                        selectedKeys={[this.state.activeTab]}
+                        activeKey={this.state.activeTab}
+                        onClick={({ key }) => this.handleTabChange(key)}
+                    >
+                        {Object.keys(Tabs).map((key) => {
+                            const tab = Tabs[key]
+
+                            return <antd.Menu.Item
+                                key={key}
+                                icon={createIconRender(tab.icon)}
+                            >
+                                {tab.title}
+                            </antd.Menu.Item>
+                        })}
+                    </antd.Menu>
+                </div>
+
+                <div className="card" id="trendings">
+                    <h2>
+                        <Icons.TrendingUp />
+                        <Translation>{(t) => t("Trendings")}</Translation>
+                    </h2>
+                    <HashtagTrendings />
+                </div>
+
+                <div className="card" id="onlineFriends">
+                    <h2>
+                        <Icons.Rss />
+                        <Translation>{(t) => t("Online Friends")}</Translation>
+                    </h2>
+                    <div className="content">
+                        <ConnectedFriends />
+                    </div>
+                </div>
+
+                <FeaturedEventsAnnouncements />
+            </div>
+
+            <div
+                ref={this.primaryPanelRef}
+                className={classnames("panel", "fade-opacity-active")}
+            >
+                {this.renderActiveTab()}
+            </div>
+
+            <div className="panel right">
+
+            </div>
+        </div>
+    }
 }
\ No newline at end of file
diff --git a/packages/app/src/pages/index.less b/packages/app/src/pages/index.less
new file mode 100755
index 00000000..7cc2261d
--- /dev/null
+++ b/packages/app/src/pages/index.less
@@ -0,0 +1,74 @@
+.postingDashboard {
+    display: grid;
+
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 1fr;
+    grid-column-gap: 20px;
+    grid-row-gap: 0px;
+
+    width: 100%;
+
+    .panel {
+        position: sticky;
+        top: 0;
+
+        height: fit-content;
+
+        display: flex;
+        flex-direction: column;
+
+        align-items: center;
+
+        &.left {
+            .card {
+                background-color: var(--background-color-accent);
+
+                .ant-menu {
+                    .ant-menu-item-selected {
+                        background-color: var(--background-color-primary) !important;
+                    }
+                }
+            }
+        }
+
+        .card {
+            display: flex;
+            flex-direction: column;
+
+            background-color: var(--background-color-accent);
+            border-radius: 12px;
+            padding: 20px;
+
+            margin-bottom: 20px;
+            width: 20vw;
+
+            h1,
+            h2 {
+                width: fit-content;
+                margin: 0;
+            }
+
+            .header {
+                display: flex;
+                flex-direction: row;
+
+                justify-content: space-between;
+                align-items: center;
+
+                width: 100%;
+
+                margin-bottom: 10px;
+            }
+        }
+
+        &.card:last-child {
+            margin-bottom: 0;
+        }
+    }
+
+    .ant-menu {
+        svg {
+            margin-right: 0 !important;
+        }
+    }
+}
\ No newline at end of file