diff --git a/packages/renderer/src/index.tsx b/packages/renderer/src/index.tsx
index 0fc1377..4cb9cdd 100644
--- a/packages/renderer/src/index.tsx
+++ b/packages/renderer/src/index.tsx
@@ -5,14 +5,22 @@ import Chat from './pages/Chat';
 
 ReactDOM.render(
   (
-    <>
-      {/* <Chat
-        
-      ></Chat> */}
-      <Channels
-      
-      ></Channels>
-    </>
+    <div style={{
+      display: 'grid',
+      gridTemplateColumns: '200px 1fr',
+      gridTemplateRows: '1fr',
+      height: '100%',
+    }}>
+      <div style={{
+        background: 'rgba(25, 26, 33)',
+        borderRight: '1px solid #bd93f9',
+      }}>
+        <Channels></Channels>
+      </div>
+      <div>
+        <Chat></Chat>
+      </div>
+    </div>
   ),
   document.getElementById('app'),
 );
\ No newline at end of file
diff --git a/packages/renderer/src/lib/api.ts b/packages/renderer/src/lib/api.ts
index 4f0590b..03e48d4 100644
--- a/packages/renderer/src/lib/api.ts
+++ b/packages/renderer/src/lib/api.ts
@@ -3,7 +3,7 @@
 
 let socket: WebSocket | null = null;
 let connectionAttempts = 0;
-const url = 'wss://dev.valnet.xyz';
+const url = 'wss://macos.valnet.xyz';
 
 let routers: any[] = [];
 
diff --git a/packages/renderer/src/pages/Channels.tsx b/packages/renderer/src/pages/Channels.tsx
index bfe553d..211d88a 100644
--- a/packages/renderer/src/pages/Channels.tsx
+++ b/packages/renderer/src/pages/Channels.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { registerRouter, router, send, unregisterRouter } from '../lib/api';
 
 function useRouter(actions: Function | object, deps: any[]) {
@@ -20,15 +20,26 @@ interface IChannel {
   name: string;
 }
 
+function Hashmark() {
+  return <span style={{
+    fontWeight: 'bold',
+    marginRight: '8px',
+    marginLeft: '8px',
+  }}>#</span>;
+}
+
 export default function Channels() {
 
   const [channels, setChannels] = useState<IChannel[]>([]);
 
   const { send } = useRouter({
-    'channels:list'(data: any) {
+    'channels:list'(data: IChannel[]) {
       // console.log(data)
       setChannels(data);
     },
+    'channel:add'(channel: IChannel) {
+      setChannels([...channels, channel]);
+    },
   }, [channels]);
 
   useEffect(() => {
@@ -37,15 +48,48 @@ export default function Channels() {
     }
   }, [channels]);
 
+  const textbox = useRef<HTMLInputElement>(null);
+  const add = useCallback(() => {
+    if(textbox.current === null) return;
+    const name = textbox.current.value;
+    textbox.current.value = '';
+    send('channel:add', { name });
+  }, []);
+
   return (
     <>
+      <br></br>
       {channels.map(channel => (
-        <div key={channel.uid}>
-          <span style={{
-            fontWeight: 'bold',
-          }}>#</span>{channel.name}
+        <div key={channel.uid} style={{
+          margin: '8px 0px',
+        }}>
+          <Hashmark></Hashmark>{channel.name}
+          <a style={{ color: 'rgba(0, 100, 200, 1)', marginLeft: '8px', fontSize: '10px' }} href="#" onClick={() => {}}>Delete</a>
         </div>
       ))}
+      <Hashmark></Hashmark><input
+        ref={textbox}
+        style={{
+          background: '#343746',
+          border: 'none',
+          padding: '8px',
+          borderRadius: '8px',
+          outline: 'none',
+          color: 'white',
+          fontSize: '16px',
+          width: '90px',
+        }}
+      /><button onClick={add} style={{
+        marginLeft: '8px',
+        background: '#bd93f9',
+        border: 'none',
+        color: 'white',
+        padding: '8px',
+        fontSize: '16px',
+        cursor: 'pointer',
+        borderRadius: '8px',
+        // lineHeight: '20px'
+      }}>ADD</button>
     </>
   );
 }
\ No newline at end of file
diff --git a/packages/server/src/db/query.ts b/packages/server/src/db/query.ts
index 294910a..e6953ef 100644
--- a/packages/server/src/db/query.ts
+++ b/packages/server/src/db/query.ts
@@ -11,6 +11,7 @@ export default async function(a: any, ...opts: any[]): Promise<any[] | null> {
       connection.query(text, [...opts], (err, results) => {
         if(!err) return resolve(results);
         console.error(err.errno, err.sqlMessage);
+        console.error('--- Query ---');
         console.error(err.sql);
         reject(err);
       });
diff --git a/packages/server/src/db/snippets/channel/new.sql b/packages/server/src/db/snippets/channel/new.sql
new file mode 100644
index 0000000..76eadf5
--- /dev/null
+++ b/packages/server/src/db/snippets/channel/new.sql
@@ -0,0 +1,2 @@
+INSERT INTO channels (name, uid)
+VALUES (?, ?);
\ No newline at end of file
diff --git a/packages/server/src/lib/router.ts b/packages/server/src/lib/router.ts
index be804ed..416e602 100644
--- a/packages/server/src/lib/router.ts
+++ b/packages/server/src/lib/router.ts
@@ -6,7 +6,11 @@ export default function router(routes: any) {
     if('routes' in route) {
       for(const suffix of route.routes) {
         const combinedRouteName = routeName + ':' + suffix;
-        routes[combinedRouteName] = (_: never, ...args: any[]) => route(suffix, args);
+        routes[combinedRouteName] = function(data: any) {
+          // console.log(suffix, route, data)
+          return route(suffix, data);
+          // console.log('INCOMMING', args)
+        };
       }
       delete routes[routeName];
     }
diff --git a/packages/server/src/routers/channel.ts b/packages/server/src/routers/channel.ts
index c7b2ee0..291a471 100644
--- a/packages/server/src/routers/channel.ts
+++ b/packages/server/src/routers/channel.ts
@@ -1,11 +1,25 @@
 import query from '../db/query';
 import router from '../lib/router';
 import list from '../db/snippets/channel/list.sql';
-import { reply } from '../lib/WebSocketServer';
+import add from '../db/snippets/channel/new.sql';
+import { broadcast, reply } from '../lib/WebSocketServer';
+import { v4 } from 'uuid';
 
 export default router({
   async list() {
     const res = await query(list);
     return reply(res ?? undefined);
   },
+  async add(channel: any) {
+    const name = channel.name;
+    const uid = v4();
+    console.log(channel);
+    const res = await query(add, name, uid);
+    if(res === null) return;
+    console.log(res);
+    return broadcast({
+      uid,
+      name,
+    });
+  },
 });
\ No newline at end of file