diff --git a/packages/app/src/pages/index.jsx b/packages/app/src/pages/index.jsx
index 5ecff8be..3e8b2d7e 100755
--- a/packages/app/src/pages/index.jsx
+++ b/packages/app/src/pages/index.jsx
@@ -1,74 +1,33 @@
 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 { PagePanelWithNavMenu } from "components/PagePanels"
 
-import { HashtagTrendings, FeaturedEventsAnnouncements, ConnectedFriends, PostCard } from "components"
+import { Icons } from "components/Icons"
+
+import { HashtagTrendings, FeaturedEventsAnnouncements, ConnectedFriends } 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,
-    }
-
-    contentRef = React.createRef()
-    primaryPanelRef = React.createRef()
-
-    renderActiveTab = () => {
-        const tab = Tabs[this.state.activeTab]
-
-        if (!tab) {
-            this.setState({ activeTab: defaultTab }, () => this.replaceQueryTypeToCurrentTab())
-
-            return
-        }
-
-        return React.createElement(tab.component, {
-            onOpenPost: this.onOpenPost,
-            ref: this.contentRef,
-        })
-    }
-
-    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">
+        const navMenuHeader = <>
+            <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>
+        </>
+
+        const extraPanel = {
+            children: <>
                 <div className="card" id="trendings">
                     <div className="header">
                         <h2>
@@ -92,53 +51,15 @@ export default class Dashboard extends React.Component {
                 </div>
 
                 <FeaturedEventsAnnouncements />
+            </>
+        }
 
-            </div>
-
-            <div
-                ref={this.primaryPanelRef}
-                className={classnames("panel", "full", "fade-opacity-active")}
-            >
-                {this.renderActiveTab()}
-            </div>
-
-            <div className="panel right">
-                <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="vertical"
-                        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>
-        </div>
+        return <PagePanelWithNavMenu
+            tabs={Tabs}
+            navMenuHeader={navMenuHeader}
+            extraPanel={extraPanel}
+            useSetQueryType
+            transition
+        />
     }
 }
\ No newline at end of file
diff --git a/packages/app/src/pages/index.less b/packages/app/src/pages/index.less
deleted file mode 100755
index 5624249e..00000000
--- a/packages/app/src/pages/index.less
+++ /dev/null
@@ -1,78 +0,0 @@
-.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;
-
-        &.full {
-            height: 100%;
-        }
-
-        &.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
diff --git a/packages/app/src/pages/music/[type].jsx b/packages/app/src/pages/music/[type].jsx
deleted file mode 100755
index 74feb53b..00000000
--- a/packages/app/src/pages/music/[type].jsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import React from "react"
-import * as antd from "antd"
-import classnames from "classnames"
-
-import { Icons, createIconRender } from "components/Icons"
-
-import Tabs from "./tabs"
-
-import "./index.less"
-
-export default class MusicDashboard extends React.Component {
-    state = {
-        activeTab: this.props.params.type ?? "feed"
-    }
-
-    primaryPanelRef = React.createRef()
-
-    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="musicDashboard">
-            <div
-                ref={this.primaryPanelRef}
-                className={classnames("panel", "fade-opacity-active")}
-            >
-                {this.renderActiveTab()}
-            </div>
-
-            <div className="panel">
-                <div className="card" id="browserType">
-                    <h2><Icons.MdOutlineAudiotrack /> Music</h2>
-                    <antd.Menu
-                        mode="inline"
-                        selectedKeys={[this.state.activeTab]}
-                        activeKey={this.state.activeTab}
-                        onClick={({ key }) => this.handleTabChange(key)}
-                        items={Object.keys(Tabs).map((key) => {
-                            const tab = Tabs[key]
-
-                            return {
-                                key,
-                                icon: createIconRender(tab.icon),
-                                label: tab.label,
-                                disabled: tab.disabled
-                            }
-                        })}
-                    />
-                </div>
-            </div>
-        </div>
-    }
-}
\ No newline at end of file
diff --git a/packages/app/src/pages/music/index.jsx b/packages/app/src/pages/music/index.jsx
index 6dcd7dc6..2215f4c2 100755
--- a/packages/app/src/pages/music/index.jsx
+++ b/packages/app/src/pages/music/index.jsx
@@ -1,7 +1,21 @@
 import React from "react"
 
-export default () => {
-    app.setLocation("/music/feed")
+import { Icons } from "components/Icons"
 
-    return <></>
+import { PagePanelWithNavMenu } from "components/PagePanels"
+
+import Tabs from "./tabs"
+
+const NavMenuHeader = <h2>
+    <Icons.MdLiveTv />
+    Music
+</h2>
+
+export default () => {
+    return <PagePanelWithNavMenu
+        tabs={Tabs}
+        navMenuHeader={NavMenuHeader}
+        useSetQueryType
+        transition
+    />
 }
\ No newline at end of file
diff --git a/packages/app/src/pages/music/index.less b/packages/app/src/pages/music/index.less
deleted file mode 100755
index 95102cf6..00000000
--- a/packages/app/src/pages/music/index.less
+++ /dev/null
@@ -1,47 +0,0 @@
-.musicDashboard {
-    display: grid;
-
-    grid-template-columns: 3fr 1fr;
-    grid-template-rows: 1fr;
-    grid-column-gap: 10px;
-    grid-row-gap: 0px;
-
-    width: 100%;
-
-    padding-left: 30px;
-
-    .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/posts/tabs.jsx b/packages/app/src/pages/posts/tabs.jsx
index 31d1bb38..a5d78608 100755
--- a/packages/app/src/pages/posts/tabs.jsx
+++ b/packages/app/src/pages/posts/tabs.jsx
@@ -4,17 +4,17 @@ import SavedPostsTab from "./components/savedPosts"
 
 export default {
     "feed": {
-        title: "Feed",
+        label: "Feed",
         icon: "Rss",
         component: FeedTab
     },
     "explore": {
-        title: "Explore",
+        label: "Explore",
         icon: "Search",
         component: ExploreTab
     },
     "savedPosts": {
-        title: "Saved posts",
+        label: "Saved posts",
         icon: "Bookmark",
         component: SavedPostsTab
     }
diff --git a/packages/app/src/pages/tv/[type].jsx b/packages/app/src/pages/tv/[type].jsx
deleted file mode 100755
index 5fccecd7..00000000
--- a/packages/app/src/pages/tv/[type].jsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import React from "react"
-import * as antd from "antd"
-import classnames from "classnames"
-
-import { Icons, createIconRender } from "components/Icons"
-
-import Tabs from "./tabs"
-
-import "./index.less"
-
-export default class TVDashboard extends React.Component {
-    state = {
-        activeTab: this.props.params.type ?? "feed"
-    }
-
-    primaryPanelRef = React.createRef()
-
-    componentDidMount() {
-        app.cores.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="tvDashboard">
-            <div
-                ref={this.primaryPanelRef}
-                className={classnames("panel", "fade-opacity-active")}
-            >
-                {this.renderActiveTab()}
-            </div>
-
-            <div className="panel">
-                <div className="card" id="browserType">
-                    <h2><Icons.Tv /> TV</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>
-        </div>
-    }
-}
\ No newline at end of file
diff --git a/packages/app/src/pages/tv/index.jsx b/packages/app/src/pages/tv/index.jsx
index 76411c7b..c85ceedc 100755
--- a/packages/app/src/pages/tv/index.jsx
+++ b/packages/app/src/pages/tv/index.jsx
@@ -1,7 +1,23 @@
 import React from "react"
 
-export default () => {
-    app.setLocation("/tv/feed")
+import { Icons } from "components/Icons"
 
-    return <></>
+import { PagePanelWithNavMenu } from "components/PagePanels"
+
+import Tabs from "./tabs"
+
+const NavMenuHeader = <h2>
+    <Icons.MdLiveTv />
+    TV
+</h2>
+
+export default class TVDashboard extends React.Component {
+    render() {
+        return <PagePanelWithNavMenu
+            tabs={Tabs}
+            navMenuHeader={NavMenuHeader}
+            useSetQueryType
+            transition
+        />
+    }
 }
\ No newline at end of file
diff --git a/packages/app/src/pages/tv/index.less b/packages/app/src/pages/tv/index.less
deleted file mode 100755
index 5889fc82..00000000
--- a/packages/app/src/pages/tv/index.less
+++ /dev/null
@@ -1,47 +0,0 @@
-.tvDashboard {
-    display: grid;
-
-    grid-template-columns: 3fr 1fr;
-    grid-template-rows: 1fr;
-    grid-column-gap: 10px;
-    grid-row-gap: 0px;
-
-    width: 100%;
-
-    padding-left: 30px;
-
-    .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/tv/tabs.jsx b/packages/app/src/pages/tv/tabs.jsx
index 9c2fb8d3..37f07ff7 100755
--- a/packages/app/src/pages/tv/tabs.jsx
+++ b/packages/app/src/pages/tv/tabs.jsx
@@ -4,17 +4,17 @@ import ControlPanelTab from "./components/controlPanel"
 
 export default {
     "feed": {
-        title: "Feed",
+        label: "Feed",
         icon: "Rss",
         component: FeedTab
     },
     "explore": {
-        title: "Explore",
+        label: "Explore",
         icon: "Search",
         component: ExploreTab
     },
     "controlPanel": {
-        title: "Control Panel",
+        label: "Control Panel",
         icon: "Settings",
         component: ControlPanelTab
     }