diff --git a/src/App.css b/src/App.css
index cd22b419..6112a3d5 100644
--- a/src/App.css
+++ b/src/App.css
@@ -2,8 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-@import './assets/editor.css';
-
 /* Fixed next/image bug, source: https://nextjs.org/docs/api-reference/next/image */
 @supports (font: -apple-system-body) and (-webkit-appearance: none) {
   img[loading='lazy'] {
diff --git a/src/assets/editor.css b/src/assets/editor.css
deleted file mode 100644
index 1557df9f..00000000
--- a/src/assets/editor.css
+++ /dev/null
@@ -1,326 +0,0 @@
-.w-md-editor-bar {
-  position: absolute;
-  cursor: s-resize;
-  right: 4px;
-  bottom: 4px;
-  margin-top: -11px;
-  margin-right: 0;
-  width: 14px;
-  z-index: 3;
-  height: 10px;
-  border-radius: 0 0 3px 0;
-  -webkit-user-select: none;
-  user-select: none;
-}
-.w-md-editor-bar svg {
-  display: block;
-  margin: 0 auto;
-}
-.w-md-editor-aree {
-  overflow: auto;
-  border-radius: 5px;
-}
-.w-md-editor-text {
-  min-height: 100%;
-  position: relative;
-  text-align: left;
-  white-space: pre-wrap;
-  word-break: keep-all;
-  overflow-wrap: break-word;
-  box-sizing: border-box;
-  margin: 0;
-  -webkit-font-variant-ligatures: common-ligatures;
-  font-variant-ligatures: common-ligatures;
-  @apply p-4;
-}
-.w-md-editor-text-pre,
-.w-md-editor-text-input,
-.w-md-editor-text > .w-md-editor-text-pre {
-  margin: 0;
-  border: 0;
-  background: none;
-  box-sizing: inherit;
-  display: inherit;
-  font-family: inherit;
-  font-size: inherit;
-  font-style: inherit;
-  -webkit-font-variant-ligatures: inherit;
-  font-variant-ligatures: inherit;
-  font-weight: inherit;
-  letter-spacing: inherit;
-  line-height: inherit;
-  tab-size: inherit;
-  text-indent: inherit;
-  text-rendering: inherit;
-  text-transform: inherit;
-  white-space: inherit;
-  overflow-wrap: inherit;
-  word-break: inherit;
-  word-break: normal;
-  padding: 0;
-}
-.w-md-editor-text-pre > code,
-.w-md-editor-text-input > code,
-.w-md-editor-text > .w-md-editor-text-pre > code {
-  font-family: inherit;
-}
-.w-md-editor-text-pre {
-  position: relative;
-  margin: 0px !important;
-  pointer-events: none;
-  background-color: transparent !important;
-}
-.w-md-editor-text-pre > code {
-  padding: 0 !important;
-}
-.w-md-editor-text-input {
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  height: 100%;
-  width: 100%;
-  resize: none;
-  color: inherit;
-  overflow: hidden;
-  outline: 0;
-  padding: inherit;
-  -webkit-font-smoothing: antialiased;
-  -webkit-text-fill-color: transparent;
-  @apply placeholder:text-zinc-500;
-}
-.w-md-editor-text-input:empty {
-  -webkit-text-fill-color: inherit !important;
-}
-.w-md-editor-text-pre,
-.w-md-editor-text-input {
-  word-wrap: pre;
-  word-break: break-word;
-  white-space: pre-wrap;
-}
-/**
- * Hack to apply on some CSS on IE10 and IE11
- */
-@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
-  /**
-    * IE doesn't support '-webkit-text-fill-color'
-    * So we use 'color: transparent' to make the text transparent on IE
-    * Unlike other browsers, it doesn't affect caret color in IE
-    */
-  .w-md-editor-text-input {
-    color: transparent !important;
-  }
-  .w-md-editor-text-input::selection {
-    background-color: #accef7 !important;
-    color: transparent !important;
-  }
-}
-.w-md-editor-text-pre .punctuation {
-  color: var(--color-prettylights-syntax-comment) !important;
-}
-.w-md-editor-text-pre .token.url,
-.w-md-editor-text-pre .token.content {
-  color: var(--color-prettylights-syntax-constant) !important;
-}
-.w-md-editor-text-pre .token.title.important {
-  color: var(--color-prettylights-syntax-markup-bold);
-}
-.w-md-editor-text-pre .token.code-block .function {
-  color: var(--color-prettylights-syntax-entity);
-}
-.w-md-editor-text-pre .token.bold {
-  font-weight: unset !important;
-}
-.w-md-editor-text-pre .token.title {
-  line-height: unset !important;
-  font-size: unset !important;
-  font-weight: unset !important;
-}
-.w-md-editor-text-pre .token.code.keyword {
-  color: var(--color-prettylights-syntax-constant) !important;
-}
-.w-md-editor-text-pre .token.strike,
-.w-md-editor-text-pre .token.strike .content {
-  color: var(--color-prettylights-syntax-markup-deleted-text) !important;
-}
-.w-md-editor-toolbar-child {
-  position: absolute;
-  border-radius: 3px;
-  box-shadow: 0 0 0 1px var(--color-border-default), 0 0 0 var(--color-border-default),
-    0 1px 1px var(--color-border-default);
-  background-color: var(--color-canvas-default);
-  z-index: 1;
-  display: none;
-}
-.w-md-editor-toolbar-child.active {
-  display: block;
-}
-.w-md-editor-toolbar-child .w-md-editor-toolbar {
-  border-bottom: 0;
-  padding: 3px;
-  border-radius: 3px;
-}
-.w-md-editor-toolbar-child .w-md-editor-toolbar ul > li {
-  display: block;
-}
-.w-md-editor-toolbar-child .w-md-editor-toolbar ul > li button:not(.cta-btn) {
-  width: -webkit-fill-available;
-  height: initial;
-  box-sizing: border-box;
-  padding: 3px 4px 2px 4px;
-  margin: 0;
-}
-.w-md-editor-toolbar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  user-select: none;
-  flex-wrap: wrap;
-}
-.w-md-editor-toolbar.bottom {
-  border-bottom: 0px;
-  border-top: 1px solid var(--color-border-default);
-  border-radius: 0 0 3px 3px;
-}
-.w-md-editor-toolbar ul,
-.w-md-editor-toolbar li {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  line-height: initial;
-}
-.w-md-editor-toolbar li {
-  display: inline-block;
-  font-size: 14px;
-}
-.w-md-editor-toolbar li + li {
-  margin: 0;
-}
-.w-md-editor-toolbar li > button:not(.cta-btn) {
-  border: none;
-  height: 20px;
-  line-height: 14px;
-  background: none;
-  text-transform: none;
-  font-weight: normal;
-  overflow: visible;
-  outline: none;
-  cursor: pointer;
-  transition: all 0.3s;
-  white-space: nowrap;
-  @apply rounded py-1 px-2 text-zinc-500;
-}
-.w-md-editor-toolbar li > button:not(.cta-btn):hover,
-.w-md-editor-toolbar li > button:not(.cta-btn):focus {
-  @apply bg-zinc-700 text-zinc-100;
-}
-.w-md-editor-toolbar li > button:not(.cta-btn):active {
-  background-color: var(--color-neutral-muted);
-  color: var(--color-danger-fg);
-}
-.w-md-editor-toolbar li > button:not(.cta-btn):disabled {
-  color: var(--color-border-default);
-  cursor: not-allowed;
-}
-.w-md-editor-toolbar li > button:not(.cta-btn):disabled:hover {
-  background-color: transparent;
-  color: var(--color-border-default);
-}
-.w-md-editor-toolbar li.active > button:not(.cta-btn) {
-  color: var(--color-accent-fg);
-  background-color: var(--color-neutral-muted);
-}
-.w-md-editor-toolbar-divider {
-  height: 14px;
-  width: 1px;
-  margin: -3px 3px 0 3px !important;
-  vertical-align: middle;
-  background-color: var(--color-border-default);
-}
-.w-md-editor {
-  text-align: left;
-  border-radius: 3px;
-  padding-bottom: 1px;
-  position: relative;
-  display: flex;
-  flex-direction: column-reverse;
-  @apply gap-3;
-}
-.w-md-editor.w-md-editor-rtl {
-  direction: rtl !important;
-  text-align: right !important;
-}
-.w-md-editor.w-md-editor-rtl .w-md-editor-preview {
-  right: unset !important;
-  left: 0;
-  text-align: right !important;
-  box-shadow: inset -1px 0 0 0 var(--color-border-default);
-}
-.w-md-editor.w-md-editor-rtl .w-md-editor-text {
-  text-align: right !important;
-}
-.w-md-editor-toolbar {
-  @apply h-10 shrink-0;
-}
-.w-md-editor-content {
-  @apply relative h-full overflow-auto rounded-lg border-[0.5px] border-white/30 bg-zinc-800 shadow-inner;
-}
-.w-md-editor .copied {
-  display: none !important;
-}
-.w-md-editor-input {
-  width: 50%;
-  height: 100%;
-}
-.w-md-editor-text-pre > code {
-  word-break: break-word !important;
-  white-space: pre-wrap !important;
-}
-.w-md-editor-preview {
-  width: 50%;
-  box-sizing: border-box;
-  box-shadow: inset 1px 0 0 0 var(--color-border-default);
-  position: absolute;
-  padding: 10px 20px;
-  overflow: auto;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  border-radius: 0 0 5px 0;
-  display: flex;
-  flex-direction: column;
-}
-.w-md-editor-preview .anchor {
-  display: none;
-}
-.w-md-editor-preview .contains-task-list {
-  list-style: none;
-}
-.w-md-editor-show-preview .w-md-editor-input {
-  width: 0%;
-  overflow: hidden;
-  background-color: var(--color-canvas-default);
-}
-.w-md-editor-show-preview .w-md-editor-preview {
-  width: 100%;
-  box-shadow: inset 0 0 0 0;
-}
-.w-md-editor-show-edit .w-md-editor-input {
-  width: 100%;
-}
-.w-md-editor-show-edit .w-md-editor-preview {
-  width: 0%;
-  padding: 0;
-}
-.w-md-editor-fullscreen {
-  overflow: hidden;
-  position: fixed;
-  z-index: 99999;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  height: 100% !important;
-}
-.w-md-editor-fullscreen .w-md-editor-content {
-  height: 100%;
-}
diff --git a/src/components/channels/channelList.tsx b/src/components/channels/channelList.tsx
new file mode 100644
index 00000000..481230ed
--- /dev/null
+++ b/src/components/channels/channelList.tsx
@@ -0,0 +1,9 @@
+import { ChannelModal } from '@components/channels/channelModal';
+
+export default function ChannelList() {
+  return (
+    <div className="flex flex-col gap-px">
+      <ChannelModal />
+    </div>
+  );
+}
diff --git a/src/components/channels/channelModal.tsx b/src/components/channels/channelModal.tsx
new file mode 100644
index 00000000..1a600247
--- /dev/null
+++ b/src/components/channels/channelModal.tsx
@@ -0,0 +1,129 @@
+import { RelayContext } from '@components/relaysProvider';
+
+import { dateToUnix } from '@utils/getDate';
+
+import * as Dialog from '@radix-ui/react-dialog';
+import { Cross1Icon, PlusIcon } from '@radix-ui/react-icons';
+import { getEventHash, signEvent } from 'nostr-tools';
+import { useContext, useState } from 'react';
+import { useForm } from 'react-hook-form';
+
+export const ChannelModal = () => {
+  const [pool, relays]: any = useContext(RelayContext);
+  const [open, setOpen] = useState(false);
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { isDirty, isValid },
+  } = useForm();
+
+  const onSubmit = (data) => {
+    const activeAccount = JSON.parse(localStorage.getItem('activeAccount'));
+
+    const event: any = {
+      content: JSON.stringify(data),
+      created_at: dateToUnix(),
+      kind: 40,
+      pubkey: activeAccount.pubkey,
+      tags: [],
+    };
+    event.id = getEventHash(event);
+    event.sig = signEvent(event, activeAccount.privkey);
+
+    // publish channel
+    pool.publish(event, relays);
+    // close modal
+    setOpen(false);
+    // reset form
+    reset();
+  };
+
+  return (
+    <Dialog.Root open={open} onOpenChange={setOpen}>
+      <Dialog.Trigger asChild>
+        <div className="group inline-flex items-center gap-2 rounded-md px-2.5 py-1.5 hover:bg-zinc-950">
+          <div className="inline-flex h-5 w-5 shrink items-center justify-center rounded bg-zinc-900">
+            <PlusIcon className="h-3 w-3 text-zinc-500" />
+          </div>
+          <div>
+            <h5 className="text-sm font-medium text-zinc-500 group-hover:text-zinc-400">Add a new channel</h5>
+          </div>
+        </div>
+      </Dialog.Trigger>
+      <Dialog.Portal>
+        <Dialog.Overlay className="fixed inset-0 z-50 bg-black bg-opacity-30 backdrop-blur-sm data-[state=open]:animate-overlayShow" />
+        <Dialog.Content className="fixed inset-0 z-50 overflow-y-auto">
+          <div className="flex min-h-full items-center justify-center">
+            <div className="relative flex h-min w-full max-w-xl flex-col rounded-lg shadow-modal">
+              <div className="sticky left-0 top-0 flex h-12 w-full shrink-0 items-center justify-between rounded-t-lg bg-zinc-950 px-3">
+                <div className="flex w-full items-center justify-between">
+                  <h5 className="font-medium leading-none text-zinc-500"># Create channel</h5>
+                  <Dialog.Close asChild>
+                    <button
+                      autoFocus={false}
+                      className="inline-flex h-5 w-5 items-center justify-center rounded hover:bg-zinc-900"
+                    >
+                      <Cross1Icon className="h-3 w-3 text-zinc-300" />
+                    </button>
+                  </Dialog.Close>
+                </div>
+              </div>
+              <div className="flex h-full w-full flex-col overflow-y-auto rounded-b-lg bg-zinc-950 px-3 pb-3">
+                <form
+                  onSubmit={handleSubmit(onSubmit)}
+                  className="flex h-full w-full flex-col gap-4 rounded-lg border border-white/20 bg-zinc-900 p-4"
+                >
+                  <div className="flex flex-col gap-1">
+                    <label className="text-xs font-semibold uppercase tracking-wider text-zinc-300">
+                      Channel name *
+                    </label>
+                    <div className="relative w-full shrink-0 overflow-hidden before:pointer-events-none before:absolute before:-inset-1 before:rounded-[11px] before:border before:border-fuchsia-500 before:opacity-0 before:ring-2 before:ring-fuchsia-500/20 before:transition after:pointer-events-none after:absolute after:inset-px after:rounded-[7px] after:shadow-highlight after:shadow-white/5 after:transition focus-within:before:opacity-100 focus-within:after:shadow-fuchsia-500/100 dark:focus-within:after:shadow-fuchsia-500/20">
+                      <input
+                        type={'text'}
+                        {...register('name', { required: true })}
+                        spellCheck={false}
+                        className="relative h-10 w-full rounded-lg border border-black/5 px-3 py-2 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-zinc-200 dark:shadow-black/10 dark:placeholder:text-zinc-500"
+                      />
+                    </div>
+                  </div>
+                  <div className="flex flex-col gap-1">
+                    <label className="text-xs font-semibold uppercase tracking-wider text-zinc-300">Picture</label>
+                    <div className="relative w-full shrink-0 overflow-hidden before:pointer-events-none before:absolute before:-inset-1 before:rounded-[11px] before:border before:border-fuchsia-500 before:opacity-0 before:ring-2 before:ring-fuchsia-500/20 before:transition after:pointer-events-none after:absolute after:inset-px after:rounded-[7px] after:shadow-highlight after:shadow-white/5 after:transition focus-within:before:opacity-100 focus-within:after:shadow-fuchsia-500/100 dark:focus-within:after:shadow-fuchsia-500/20">
+                      <input
+                        type={'text'}
+                        {...register('picture')}
+                        spellCheck={false}
+                        className="relative h-10 w-full rounded-lg border border-black/5 px-3 py-2 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-zinc-200 dark:shadow-black/10 dark:placeholder:text-zinc-500"
+                      />
+                    </div>
+                  </div>
+                  <div className="flex flex-col gap-1">
+                    <label className="text-xs font-semibold uppercase tracking-wider text-zinc-300">About</label>
+                    <div className="relative h-20 w-full shrink-0 overflow-hidden before:pointer-events-none before:absolute before:-inset-1 before:rounded-[11px] before:border before:border-fuchsia-500 before:opacity-0 before:ring-2 before:ring-fuchsia-500/20 before:transition after:pointer-events-none after:absolute after:inset-px after:rounded-[7px] after:shadow-highlight after:shadow-white/5 after:transition focus-within:before:opacity-100 focus-within:after:shadow-fuchsia-500/100 dark:focus-within:after:shadow-fuchsia-500/20">
+                      <textarea
+                        {...register('about')}
+                        spellCheck={false}
+                        className="relative h-20 w-full resize-none rounded-lg border border-black/5 px-3 py-2 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-zinc-200 dark:shadow-black/10 dark:placeholder:text-zinc-500"
+                      />
+                    </div>
+                  </div>
+                  <div>
+                    <button
+                      type="submit"
+                      disabled={!isDirty || !isValid}
+                      className="h-11 w-full transform rounded-lg bg-fuchsia-500 font-medium text-white active:translate-y-1 disabled:cursor-not-allowed disabled:opacity-30"
+                    >
+                      Create
+                    </button>
+                  </div>
+                </form>
+              </div>
+            </div>
+          </div>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+};
diff --git a/src/components/chats/chatModal.tsx b/src/components/chats/chatModal.tsx
index b6e45e9e..d18e674d 100644
--- a/src/components/chats/chatModal.tsx
+++ b/src/components/chats/chatModal.tsx
@@ -42,7 +42,10 @@ export const ChatModal = () => {
               <div className="sticky left-0 top-0 flex h-12 w-full shrink-0 items-center justify-between rounded-t-lg border-b border-zinc-800 bg-zinc-950 px-3">
                 <div className="flex items-center gap-2">
                   <Dialog.Close asChild>
-                    <button className="inline-flex h-5 w-5 items-center justify-center rounded bg-zinc-900">
+                    <button
+                      autoFocus={false}
+                      className="inline-flex h-5 w-5 items-center justify-center rounded bg-zinc-900"
+                    >
                       <Cross1Icon className="h-3 w-3 text-zinc-300" />
                     </button>
                   </Dialog.Close>
diff --git a/src/components/navigation/channels.tsx b/src/components/navigation/channels.tsx
index 834e08bf..e5a205f9 100644
--- a/src/components/navigation/channels.tsx
+++ b/src/components/navigation/channels.tsx
@@ -1,3 +1,5 @@
+import ChannelList from '@components/channels/channelList';
+
 import * as Collapsible from '@radix-ui/react-collapsible';
 import { TriangleUpIcon } from '@radix-ui/react-icons';
 import { useState } from 'react';
@@ -18,7 +20,9 @@ export default function Channels() {
           </div>
           <h3 className="text-[11px] font-bold uppercase tracking-widest text-zinc-600">Channels</h3>
         </Collapsible.Trigger>
-        <Collapsible.Content></Collapsible.Content>
+        <Collapsible.Content>
+          <ChannelList />
+        </Collapsible.Content>
       </div>
     </Collapsible.Root>
   );