diff --git a/public_html/asset/svg/dialog.text.svg b/public_html/asset/svg/dialog.text.svg
new file mode 100644
index 0000000..06d1c74
--- /dev/null
+++ b/public_html/asset/svg/dialog.text.svg
@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   fill="none"
+   height="24"
+   stroke="#000"
+   stroke-linecap="round"
+   stroke-linejoin="round"
+   stroke-width="2"
+   viewBox="0 0 24 24"
+   width="24"
+   version="1.1"
+   id="svg10"
+   sodipodi:docname="dialog.text.svg"
+   inkscape:version="0.92.2 5c3e80d, 2017-08-06">
+  <metadata
+     id="metadata16">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs14" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="810"
+     inkscape:window-height="480"
+     id="namedview12"
+     showgrid="false"
+     inkscape:zoom="9.8333333"
+     inkscape:cx="12"
+     inkscape:cy="12"
+     inkscape:window-x="0"
+     inkscape:window-y="29"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg10" />
+  <path
+     style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#5f6166;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+     d="M 9.9980469 1.9863281 A 1.0001 1.0001 0 0 0 9.0058594 2.8886719 L 8.4375 8 L 4 8 A 1.0001 1.0001 0 1 0 4 10 L 8.2148438 10 L 7.7714844 14 L 4 14 A 1.0001 1.0001 0 1 0 4 16 L 7.5488281 16 L 7.0058594 20.888672 A 1.0003547 1.0003547 0 1 0 8.9941406 21.111328 L 9.5625 16 L 13.548828 16 L 13.005859 20.888672 A 1.0003551 1.0003551 0 1 0 14.994141 21.111328 L 15.5625 16 L 20 16 A 1.0001 1.0001 0 1 0 20 14 L 15.785156 14 L 16.228516 10 L 20 10 A 1.0001 1.0001 0 1 0 20 8 L 16.451172 8 L 16.994141 3.1113281 A 1.0001 1.0001 0 0 0 15.998047 1.9863281 A 1.0001 1.0001 0 0 0 15.005859 2.8886719 L 14.4375 8 L 10.451172 8 L 10.994141 3.1113281 A 1.0001 1.0001 0 0 0 9.9980469 1.9863281 z M 10.228516 10 L 14.214844 10 L 13.771484 14 L 9.7851562 14 L 10.228516 10 z "
+     id="line2" />
+</svg>
diff --git a/public_html/asset/svg/dialog.voice.svg b/public_html/asset/svg/dialog.voice.svg
new file mode 100644
index 0000000..66a732c
--- /dev/null
+++ b/public_html/asset/svg/dialog.voice.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg">
+	<path style='fill:#5f6166;' d="M9.33333333,2 L9.33333333,3.37333333 C11.26,3.94666667 12.6666667,5.73333333 12.6666667,7.84666667 C12.6666667,9.96 11.26,11.74 9.33333333,12.3133333 L9.33333333,13.6933333 C12,13.0866667 14,10.7 14,7.84666667 C14,4.99333333 12,2.60666667 9.33333333,2 L9.33333333,2 Z M11,7.84666667 C11,6.66666667 10.3333333,5.65333333 9.33333333,5.16 L9.33333333,10.5133333 C10.3333333,10.04 11,9.02 11,7.84666667 L11,7.84666667 Z M2,5.84666667 L2,9.84666667 L4.66666667,9.84666667 L8,13.18 L8,2.51333333 L4.66666667,5.84666667 L2,5.84666667 L2,5.84666667 Z"></path>
+</svg>
\ No newline at end of file
diff --git a/webpack/common.js b/webpack/common.js
index b7f73ee..ba071b3 100644
--- a/webpack/common.js
+++ b/webpack/common.js
@@ -24,4 +24,7 @@ gs.set('router', new VueRouter({
 /* (2) Main components
 ---------------------------------------------------------*/
 /* (1) Initialize channels & channel menu */
-require('./init/channels.js');
\ No newline at end of file
+require('./init/channels.js');
+
+/* (2) Initialize local channels (for a specific channel) */
+require('./init/local-channels.js');
\ No newline at end of file
diff --git a/webpack/init/local-channels.js b/webpack/init/local-channels.js
new file mode 100644
index 0000000..d492f1d
--- /dev/null
+++ b/webpack/init/local-channels.js
@@ -0,0 +1,17 @@
+/* (1) Initialisation
+---------------------------------------------------------*/
+/* (1) Init @channel object */
+gs.set('lchannel', [
+	{
+		type: 'text',
+		visible: true,
+		list: [ 'general', 'test-text' ],
+		active: 0
+	},
+	{
+		type: 'voice',
+		visible: true,
+		list: [ 'general' , 'test-voice' ],
+		active: null
+	}
+]);
\ No newline at end of file
diff --git a/webpack/scss/dialog.scss b/webpack/scss/dialog.scss
index b39c545..3880b47 100644
--- a/webpack/scss/dialog.scss
+++ b/webpack/scss/dialog.scss
@@ -42,7 +42,113 @@
 
 		background-color: $dialog-bg;
 
+		color: #72767d;
+
 		z-index: 100;
+
+		// overflow: hidden;
+
+		/* (3) Toggle label */
+		& div.toggle{
+			display: block;
+				width: calc( 100% - 2*.5em );
+
+
+			margin: 0 .5em;
+			margin-top: 2em;
+			padding-left: 1em;
+
+			background:  left center no-repeat;
+			background-size: auto 60%;
+
+			color: #72767d;
+			font-size: .7em;
+			letter-spacing: .05em;
+			font-weight: bold;
+			text-transform: uppercase;
+
+			transition: color .2s ease-in-out;
+
+			&:hover{ color: #b9bbbe; }
+
+			cursor: pointer;
+
+			// when not toggle-active
+			&[data-toggle],
+			&[data-toggle='0']{
+				background-image: url('../asset/svg/arrow.right.svg');
+				&:hover{ background-image: url('../asset/svg/arrow.right@hover.svg'); }
+			}
+
+			// when toggle-active
+			&[data-toggle='1']{
+				background-image: url('../asset/svg/arrow.down.svg');
+				&:hover{ background-image: url('../asset/svg/arrow.down@hover.svg'); }
+			}
+
+		}
+
+		/* (4) UL after toggle label */
+		& div.toggle + ul,
+		& div.toggle:not([data-toggle='1']) + ul{
+
+			display: none;
+
+			/* (5) List items */
+			li{
+				display: block;
+
+				margin: .1em .5em;
+				padding: .3em .5em;
+
+				padding-left: 1.6em;
+
+				border-radius: 3px / 3px;
+
+				background-color: transition;
+
+				transition: color .2s ease-in-out,
+							background-color .2s ease-in-out;
+
+				cursor: pointer;
+
+				&:hover{
+					color: #ddd;
+					background-color: #36393f;
+				}
+
+				&.active{
+					color: #ddd;
+					background-color: rgba(79,84,92,.6);
+				}
+
+				// {1} Trailing icon //
+				&:before{
+					content: '';
+
+					display: inline-block;
+					position: absolute;
+						margin-left: -1.3em;
+						width: 1.3em;
+						height: 1.3em;
+
+					background: center center no-repeat;
+					background-size: auto 80%;
+				}
+
+				// for 'text'
+				&[data-type='text']:before{ background-image: url('../asset/svg/dialog.text.svg'); }
+
+				// for 'voice'
+				&[data-type='voice']:before{ background-image: url('../asset/svg/dialog.voice.svg'); }
+			}
+		}
+
+		// when visible
+		& div.toggle[data-toggle='1'] + ul{ display: block; }
+
+
+
 	}
 
 }
\ No newline at end of file
diff --git a/webpack/vue/dialog.vue b/webpack/vue/dialog.vue
index 66b1824..9b94113 100644
--- a/webpack/vue/dialog.vue
+++ b/webpack/vue/dialog.vue
@@ -12,6 +12,21 @@
 
 		</div>
 
+		<div class='body'>
+
+			<div v-for='c in gs.lchannel'>
+				<div class='toggle'
+					:data-toggle='c.visible?1:0'
+					@click='c.visible=!c.visible'>{{ c.type }} channels</div>
+				<ul>
+					<li v-for='(lc, i) in c.list'
+						:class='c.active==i?`active`:``'
+						:data-type='c.type'
+						@click='c.active=i'>{{ lc }}</li>
+				</ul>
+			</div>
+		</div>
+
 	</div>
 
 
@@ -21,7 +36,7 @@ export default {
 
 	name: 'dialog-',
 
-	data(){ return { gs: gs.get }; },
+	data(){ return { gs: gs.get }; }
 
 }