diff --git a/webui-src/app/channels/channels.js b/webui-src/app/channels/channels.js
index 3a778fd..879f681 100644
--- a/webui-src/app/channels/channels.js
+++ b/webui-src/app/channels/channels.js
@@ -1,25 +1,27 @@
 const m = require('mithril');
+const widget = require('widgets');
 
-const Channel = () => {
-  return {
-    view: () => m('.channel'),
-  };
-};
+const sections = {
+  MyForums: require('channels/my_forums'),
+  SubscribedFroums: require('channels/subscribed_forums'),
+  PopularForums: require('channels/popular_forums'),
+  OtherForums: require('channels/other_forums')
+}
 
-const MyChannels = () => {
-  return {
-    view: () => m('.widget', [m('h3', 'My channels'), m('hr'), m(Channel)]),
-  };
-};
-
-const Layout = () => {
-  return {
-    view: (vnode) => m('.tab-page', [m(MyChannels)]),
-  };
+const Layout = {
+  view: (vnode) =>
+    m('.tab-page', [
+      m(widget.Sidebar, {
+        tabs: Object.keys(sections),
+        baseRoute: '/channels/',
+      }),
+      m('.node-panel .', vnode.children),
+    ]),
 };
 
 module.exports = {
   view: (vnode) => {
-    return m(Layout);
+    const tab = vnode.attrs.tab;
+    return m(Layout, m(sections[tab]));
   },
 };
diff --git a/webui-src/app/channels/my_forums.js b/webui-src/app/channels/my_forums.js
new file mode 100644
index 0000000..8bcd6c9
--- /dev/null
+++ b/webui-src/app/channels/my_forums.js
@@ -0,0 +1,11 @@
+const m = require('mithril');
+
+const Layout = () => {
+    return{
+        view: () => [
+            m('h2', 'My Forums')
+        ]
+    };
+};
+
+module.exports = Layout();
\ No newline at end of file
diff --git a/webui-src/app/channels/other_forums.js b/webui-src/app/channels/other_forums.js
new file mode 100644
index 0000000..f645386
--- /dev/null
+++ b/webui-src/app/channels/other_forums.js
@@ -0,0 +1,11 @@
+const m = require('mithril');
+
+const Layout = () => {
+    return{
+        view: () => [
+            m('h2', 'Other Forums')
+        ]
+    };
+};
+
+module.exports = Layout();
\ No newline at end of file
diff --git a/webui-src/app/channels/popular_forums.js b/webui-src/app/channels/popular_forums.js
new file mode 100644
index 0000000..4f6f5ed
--- /dev/null
+++ b/webui-src/app/channels/popular_forums.js
@@ -0,0 +1,11 @@
+const m = require('mithril');
+
+const Layout = () => {
+    return{
+        view: () => [
+            m('h2', 'Popular Forums')
+        ]
+    };
+};
+
+module.exports = Layout();
\ No newline at end of file
diff --git a/webui-src/app/channels/subscribed_forums.js b/webui-src/app/channels/subscribed_forums.js
new file mode 100644
index 0000000..2c69e68
--- /dev/null
+++ b/webui-src/app/channels/subscribed_forums.js
@@ -0,0 +1,11 @@
+const m = require('mithril');
+
+const Layout = () => {
+    return{
+        view: () => [
+            m('h2', 'Subscribed Forums')
+        ]
+    };
+};
+
+module.exports = Layout();
\ No newline at end of file
diff --git a/webui-src/app/main.js b/webui-src/app/main.js
index 6ae6a8f..59edee1 100644
--- a/webui-src/app/main.js
+++ b/webui-src/app/main.js
@@ -53,7 +53,7 @@ const Layout = () => {
             chat: '/chat',
             mail: '/mail/inbox',
             files: '/files/files',
-            channels: '/channels',
+            channels: '/channels/MyForums',
             config: '/config/network',
           },
         }),
@@ -94,8 +94,8 @@ m.route(document.getElementById('main'), '/', {
   '/files/:tab': {
     render: (v) => m(Layout, m(files, v.attrs)),
   },
-  '/channels': {
-    render: () => m(Layout, m(channels)),
+  '/channels/:tab': {
+    render: (v) => m(Layout, m(channels,v.attrs)),
   },
   '/config/:tab': {
     render: (v) => m(Layout, m(config, v.attrs)),