diff --git a/packages/app/src/pages/home/[type].jsx b/packages/app/src/pages/home/[type].jsx
new file mode 100755
index 00000000..249102b3
--- /dev/null
+++ b/packages/app/src/pages/home/[type].jsx
@@ -0,0 +1,132 @@
+import React from "react"
+import * as antd from "antd"
+import classnames from "classnames"
+
+import { Icons, createIconRender } from "components/Icons"
+
+import { HashtagTrendings, FeaturedEventsAnnouncements, ConnectedFriends } from "components"
+
+import FeedBrowser from "./components/feed"
+import ExploreBrowser from "./components/explore"
+import LivestreamsBrowser from "./components/livestreams"
+import SavedPostsBrowser from "./components/savedPosts"
+
+import "./index.less"
+
+const Tabs = {
+    "feed": {
+        title: "Feed",
+        icon: "Rss",
+        component: FeedBrowser
+    },
+    "explore": {
+        title: "Explore",
+        icon: "Search",
+        component: ExploreBrowser
+    },
+    "livestreams": {
+        title: "Livestreams",
+        icon: "Tv",
+        component: LivestreamsBrowser
+    },
+    "savedPosts": {
+        title: "Saved posts",
+        icon: "Bookmark",
+        component: SavedPostsBrowser
+    }
+}
+
+export default class Dashboard extends React.Component {
+    state = {
+        activeTab: this.props.match.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="dashboard">
+            <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 /> Browse</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 /> Trendings</h2>
+                    <HashtagTrendings />
+                </div>
+
+                <div className="card" id="onlineFriends">
+                    <h2><Icons.Rss /> Online Friends</h2>
+                    <div className="content">
+                        <ConnectedFriends />
+                    </div>
+                </div>
+
+                <FeaturedEventsAnnouncements />
+            </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
old mode 100755
new mode 100644
index 156ff6a3..138fffe9
--- a/packages/app/src/pages/home/index.jsx
+++ b/packages/app/src/pages/home/index.jsx
@@ -1,127 +1,7 @@
 import React from "react"
-import * as antd from "antd"
-import classnames from "classnames"
 
-import { Icons, createIconRender } from "components/Icons"
+export default () => {
+    app.setLocation("home/feed")
 
-import { HashtagTrendings, FeaturedEventsAnnouncements, ConnectedFriends } from "components"
-
-import FeedBrowser from "./components/feed"
-import ExploreBrowser from "./components/explore"
-import LivestreamsBrowser from "./components/livestreams"
-import SavedPostsBrowser from "./components/savedPosts"
-
-import "./index.less"
-
-const Tabs = {
-    "feed": {
-        title: "Feed",
-        icon: "Rss",
-        component: FeedBrowser
-    },
-    "explore": {
-        title: "Explore",
-        icon: "Search",
-        component: ExploreBrowser
-    },
-    "livestreams": {
-        title: "Livestreams",
-        icon: "Tv",
-        component: LivestreamsBrowser
-    },
-    "savedPosts": {
-        title: "Saved posts",
-        icon: "Bookmark",
-        component: SavedPostsBrowser
-    }
-}
-
-export default class Dashboard extends React.Component {
-    state = {
-        activeTab: "feed"
-    }
-
-    primaryPanelRef = React.createRef()
-
-    componentDidMount() {
-        app.eventBus.emit("style.compactMode", false)
-    }
-
-    renderActiveTab() {
-        const tab = Tabs[this.state.activeTab]
-
-        if (!tab) {
-            return null
-        }
-
-        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 })
-        }, 200)
-
-        // remove fade-opacity-leave class after animation
-        setTimeout(() => {
-            this.primaryPanelRef.current.classList.remove("fade-opacity-leave")
-        }, 300)
-    }
-
-    render() {
-        return <div className="dashboard">
-            <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 /> Browse</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 /> Trendings</h2>
-                    <HashtagTrendings />
-                </div>
-
-                <div className="card" id="onlineFriends">
-                    <h2><Icons.Rss /> Online Friends</h2>
-                    <div className="content">
-                        <ConnectedFriends />
-                    </div>
-                </div>
-
-                <FeaturedEventsAnnouncements />
-            </div>
-        </div>
-    }
+    return <></>
 }
\ No newline at end of file