diff --git a/src/components/Channel/ChannelEntry.tsx b/src/components/Channel/ChannelEntry.tsx
new file mode 100644
index 0000000..cd7645d
--- /dev/null
+++ b/src/components/Channel/ChannelEntry.tsx
@@ -0,0 +1,21 @@
+import React, { Component } from 'react';
+
+class ChannelEntry extends Component<ChannelEntryProps> {
+  render() {
+    const { name, subchannels } = this.props.channel;
+    return (
+      <>
+        <div>{name}</div>
+        {subchannels !== undefined && (
+          <ul>
+            {subchannels.map(e => {
+              return <li key={e.id}>{e.name}</li>;
+            })}
+          </ul>
+        )}
+      </>
+    );
+  }
+}
+
+export default ChannelEntry;
diff --git a/src/components/Channel/ChannelList.tsx b/src/components/Channel/ChannelList.tsx
index 3e97e96..8940978 100644
--- a/src/components/Channel/ChannelList.tsx
+++ b/src/components/Channel/ChannelList.tsx
@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import ChannelService from '../../services/ChannelService';
+import ChannelEntry from './ChannelEntry';
 
 import './ChannelList.scss';
 
@@ -24,12 +25,13 @@ export default class Channellist extends Component<any, any> {
     } else {
       return (
         <ul className='channelList'>
-          {channels.map((e: Channel) => (
-            <li key={e.id}>
-              <span>#{e.id} </span>
-              {e.name}
-            </li>
-          ))}
+          {channels.map((e: Channel) => {
+            return (
+              <li key={e.id}>
+                <ChannelEntry channel={e} />
+              </li>
+            );
+          })}
         </ul>
       );
     }
diff --git a/src/interfaces.d.ts b/src/interfaces.d.ts
index 33e633d..db9ca9c 100644
--- a/src/interfaces.d.ts
+++ b/src/interfaces.d.ts
@@ -6,6 +6,9 @@ interface Channel {
   subchannels: Channel[];
 }
 
+interface ChannelEntryProps {
+  channel: Channel;
+}
 interface ChannelViewProps {
   channel: Channel;
 }