diff --git a/package.json b/package.json
index 33c8bb76..03c22851 100644
--- a/package.json
+++ b/package.json
@@ -44,7 +44,7 @@
     "@tailwindcss/typography": "^0.5.9",
     "@tauri-apps/cli": "^1.2.3",
     "@trivago/prettier-plugin-sort-imports": "^4.1.1",
-    "@types/node": "^18.15.13",
+    "@types/node": "^18.16.0",
     "@types/react": "^18.0.38",
     "@types/react-dom": "^18.0.11",
     "@typescript-eslint/eslint-plugin": "^5.59.0",
@@ -62,7 +62,7 @@
     "husky": "^8.0.3",
     "lint-staged": "^13.2.1",
     "postcss": "^8.4.23",
-    "prettier": "^2.8.7",
+    "prettier": "^2.8.8",
     "prettier-plugin-tailwindcss": "^0.2.7",
     "prop-types": "^15.8.1",
     "tailwindcss": "^3.3.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0e56a393..5a958bfc 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,7 +14,7 @@ specifiers:
   '@tauri-apps/api': ^1.2.0
   '@tauri-apps/cli': ^1.2.3
   '@trivago/prettier-plugin-sort-imports': ^4.1.1
-  '@types/node': ^18.15.13
+  '@types/node': ^18.16.0
   '@types/react': ^18.0.38
   '@types/react-dom': ^18.0.11
   '@typescript-eslint/eslint-plugin': ^5.59.0
@@ -38,7 +38,7 @@ specifiers:
   nostr-relaypool: ^0.5.18
   nostr-tools: ^1.10.1
   postcss: ^8.4.23
-  prettier: ^2.8.7
+  prettier: ^2.8.8
   prettier-plugin-tailwindcss: ^0.2.7
   prop-types: ^15.8.1
   react: ^18.2.0
@@ -88,8 +88,8 @@ dependencies:
 devDependencies:
   '@tailwindcss/typography': 0.5.9_tailwindcss@3.3.1
   '@tauri-apps/cli': 1.2.3
-  '@trivago/prettier-plugin-sort-imports': 4.1.1_prettier@2.8.7
-  '@types/node': 18.15.13
+  '@trivago/prettier-plugin-sort-imports': 4.1.1_prettier@2.8.8
+  '@types/node': 18.16.0
   '@types/react': 18.0.38
   '@types/react-dom': 18.0.11
   '@typescript-eslint/eslint-plugin': 5.59.0_p5urazbkpxqwbpulw3y4eskliy
@@ -107,12 +107,12 @@ devDependencies:
   husky: 8.0.3
   lint-staged: 13.2.1
   postcss: 8.4.23
-  prettier: 2.8.7
-  prettier-plugin-tailwindcss: 0.2.7_yk5p2qt6yzw3zyyilt4azle7eu
+  prettier: 2.8.8
+  prettier-plugin-tailwindcss: 0.2.7_vx2i665krt45esupzuhn5o4zsy
   prop-types: 15.8.1
   tailwindcss: 3.3.1_postcss@8.4.23
   typescript: 4.9.5
-  vite: 4.3.1_@types+node@18.15.13
+  vite: 4.3.1_@types+node@18.16.0
   vite-plugin-ssr: 0.4.115_vite@4.3.1
   vite-plugin-top-level-await: 1.3.0_vite@4.3.1
   vite-tsconfig-paths: 4.2.0_mzhihm7zd2gyalpll4qoudvuha
@@ -1541,7 +1541,7 @@ packages:
       '@tauri-apps/cli-win32-x64-msvc': 1.2.3
     dev: true
 
-  /@trivago/prettier-plugin-sort-imports/4.1.1_prettier@2.8.7:
+  /@trivago/prettier-plugin-sort-imports/4.1.1_prettier@2.8.8:
     resolution:
       { integrity: sha512-dQ2r2uzNr1x6pJsuh/8x0IRA3CBUB+pWEW3J/7N98axqt7SQSm+2fy0FLNXvXGg77xEDC7KHxJlHfLYyi7PDcw== }
     peerDependencies:
@@ -1557,7 +1557,7 @@ packages:
       '@babel/types': 7.17.0
       javascript-natural-sort: 0.7.1
       lodash: 4.17.21
-      prettier: 2.8.7
+      prettier: 2.8.8
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -1572,9 +1572,9 @@ packages:
       { integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ== }
     dev: true
 
-  /@types/node/18.15.13:
+  /@types/node/18.16.0:
     resolution:
-      { integrity: sha512-N+0kuo9KgrUQ1Sn/ifDXsvg0TTleP7rIy4zOBGECxAljqvqfqpTfzx0Q1NUedOixRMBfe2Whhb056a42cWs26Q== }
+      { integrity: sha512-BsAaKhB+7X+H4GnSjGhJG9Qi8Tw+inU9nJDwmD5CgOmBLEI6ArdhikpLX7DjbjDRDTbqZzU2LSQNZg8WGPiSZQ== }
 
   /@types/phoenix/1.5.6:
     resolution:
@@ -1613,7 +1613,7 @@ packages:
     resolution:
       { integrity: sha512-NbsqiNX9CnEfC1Z0Vf4mE1SgAJ07JnRYcNex7AJ9zAVzmiGHmjKFEk7O4TJIsgv2B1sLEb6owKFZrACwdYngsQ== }
     dependencies:
-      '@types/node': 18.15.13
+      '@types/node': 18.16.0
     dev: false
 
   /@typescript-eslint/eslint-plugin/5.59.0_p5urazbkpxqwbpulw3y4eskliy:
@@ -1761,7 +1761,7 @@ packages:
       vite: ^4
     dependencies:
       '@swc/core': 1.3.53
-      vite: 4.3.1_@types+node@18.15.13
+      vite: 4.3.1_@types+node@18.16.0
     transitivePeerDependencies:
       - '@swc/helpers'
     dev: true
@@ -4258,7 +4258,7 @@ packages:
     engines: { node: '>= 0.8.0' }
     dev: true
 
-  /prettier-plugin-tailwindcss/0.2.7_yk5p2qt6yzw3zyyilt4azle7eu:
+  /prettier-plugin-tailwindcss/0.2.7_vx2i665krt45esupzuhn5o4zsy:
     resolution:
       { integrity: sha512-jQopIOgjLpX+y8HeD56XZw7onupRTC0cw7eKKUimI7vhjkPF5/1ltW5LyqaPtSyc8HvEpvNZsvvsGFa2qpa59w== }
     engines: { node: '>=12.17.0' }
@@ -4311,13 +4311,13 @@ packages:
       prettier-plugin-twig-melody:
         optional: true
     dependencies:
-      '@trivago/prettier-plugin-sort-imports': 4.1.1_prettier@2.8.7
-      prettier: 2.8.7
+      '@trivago/prettier-plugin-sort-imports': 4.1.1_prettier@2.8.8
+      prettier: 2.8.8
     dev: true
 
-  /prettier/2.8.7:
+  /prettier/2.8.8:
     resolution:
-      { integrity: sha512-yPngTo3aXUUmyuTjeTUT75txrf+aMh9FiD7q9ZE/i6r0bPb22g4FsE6Y338PQX1bmfy08i9QQCB7/rcUAVntfw== }
+      { integrity: sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q== }
     engines: { node: '>=10.13.0' }
     hasBin: true
     dev: true
@@ -5214,7 +5214,7 @@ packages:
       fast-glob: 3.2.12
       picocolors: 1.0.0
       sirv: 2.0.2
-      vite: 4.3.1_@types+node@18.15.13
+      vite: 4.3.1_@types+node@18.16.0
     dev: true
 
   /vite-plugin-top-level-await/1.3.0_vite@4.3.1:
@@ -5226,7 +5226,7 @@ packages:
       '@rollup/plugin-virtual': 3.0.1
       '@swc/core': 1.3.53
       uuid: 9.0.0
-      vite: 4.3.1_@types+node@18.15.13
+      vite: 4.3.1_@types+node@18.16.0
     transitivePeerDependencies:
       - '@swc/helpers'
       - rollup
@@ -5244,13 +5244,13 @@ packages:
       debug: 4.3.4
       globrex: 0.1.2
       tsconfck: 2.1.1_typescript@4.9.5
-      vite: 4.3.1_@types+node@18.15.13
+      vite: 4.3.1_@types+node@18.16.0
     transitivePeerDependencies:
       - supports-color
       - typescript
     dev: true
 
-  /vite/4.3.1_@types+node@18.15.13:
+  /vite/4.3.1_@types+node@18.16.0:
     resolution:
       { integrity: sha512-EPmfPLAI79Z/RofuMvkIS0Yr091T2ReUoXQqc5ppBX/sjFRhHKiPPF/R46cTdoci/XgeQpB23diiJxq5w30vdg== }
     engines: { node: ^14.18.0 || >=16.0.0 }
@@ -5276,7 +5276,7 @@ packages:
       terser:
         optional: true
     dependencies:
-      '@types/node': 18.15.13
+      '@types/node': 18.16.0
       esbuild: 0.17.18
       postcss: 8.4.23
       rollup: 3.20.7
diff --git a/src/components/avatarUploader.tsx b/src/components/avatarUploader.tsx
index 5ee0b62a..f2f782ff 100644
--- a/src/components/avatarUploader.tsx
+++ b/src/components/avatarUploader.tsx
@@ -2,12 +2,10 @@ import { createBlobFromFile } from '@utils/createBlobFromFile';
 
 import { open } from '@tauri-apps/api/dialog';
 import { Body, fetch } from '@tauri-apps/api/http';
-import { Plus } from 'iconoir-react';
 import { useState } from 'react';
 
-export const ImagePicker = () => {
+export const AvatarUploader = ({ valueState }: { valueState: any }) => {
   const [loading, setLoading] = useState(false);
-  const [value, setValue] = useState('');
 
   const openFileDialog = async () => {
     const selected: any = await open({
@@ -44,17 +42,16 @@ export const ImagePicker = () => {
       });
       const webpImage = 'https://void.cat/d/' + res.data.file.id + '.webp';
 
-      setValue(webpImage);
+      valueState(webpImage);
       setLoading(false);
     }
   };
 
-  console.log(value);
-
   return (
     <button
       onClick={() => openFileDialog()}
-      className="inline-flex h-6 w-6 cursor-pointer items-center justify-center rounded-md hover:bg-zinc-700"
+      type="button"
+      className="inline-flex h-6 cursor-pointer items-center justify-center rounded bg-zinc-900 px-3 text-xs font-medium text-zinc-200 ring-1 ring-zinc-800 hover:bg-zinc-700"
     >
       {loading ? (
         <svg
@@ -71,7 +68,7 @@ export const ImagePicker = () => {
           ></path>
         </svg>
       ) : (
-        <Plus width={16} height={16} className="text-zinc-400" />
+        <span className="leading-none">Upload</span>
       )}
     </button>
   );
diff --git a/src/components/channels/createChannelModal.tsx b/src/components/channels/createChannelModal.tsx
index a6c50d5a..5c471e21 100644
--- a/src/components/channels/createChannelModal.tsx
+++ b/src/components/channels/createChannelModal.tsx
@@ -1,7 +1,8 @@
+import { AvatarUploader } from '@components/avatarUploader';
 import { RelayContext } from '@components/relaysProvider';
 
 import { defaultChannelsAtom } from '@stores/channel';
-import { FULL_RELAYS } from '@stores/constants';
+import { DEFAULT_AVATAR, FULL_RELAYS } from '@stores/constants';
 
 import { dateToUnix } from '@utils/getDate';
 import { createChannel } from '@utils/storage';
@@ -11,19 +12,22 @@ import useLocalStorage from '@rehooks/local-storage';
 import { Cancel, Plus } from 'iconoir-react';
 import { useSetAtom } from 'jotai';
 import { getEventHash, signEvent } from 'nostr-tools';
-import { useContext, useState } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 
 export const CreateChannelModal = () => {
   const [pool]: any = useContext(RelayContext);
   const [open, setOpen] = useState(false);
   const [activeAccount]: any = useLocalStorage('account', {});
+  const [image, setImage] = useState(DEFAULT_AVATAR);
+
   const setChannel = useSetAtom(defaultChannelsAtom);
 
   const {
     register,
     handleSubmit,
     reset,
+    setValue,
     formState: { isDirty, isValid },
   } = useForm();
 
@@ -37,6 +41,7 @@ export const CreateChannelModal = () => {
     };
     event.id = getEventHash(event);
     event.sig = signEvent(event, activeAccount.privkey);
+    console.log(event);
 
     // publish channel
     pool.publish(event, FULL_RELAYS);
@@ -57,6 +62,10 @@ export const CreateChannelModal = () => {
     reset();
   };
 
+  useEffect(() => {
+    setValue('picture', image);
+  }, [setValue, image]);
+
   return (
     <Dialog.Root open={open} onOpenChange={setOpen}>
       <Dialog.Trigger asChild>
@@ -82,6 +91,7 @@ export const CreateChannelModal = () => {
                     </h5>
                     <Dialog.Close asChild>
                       <button
+                        type="button"
                         autoFocus={false}
                         className="inline-flex h-5 w-5 items-center justify-center rounded hover:bg-zinc-900"
                       >
@@ -97,6 +107,21 @@ export const CreateChannelModal = () => {
               </div>
               <div className="flex h-full w-full flex-col overflow-y-auto px-5 pb-5 pt-3">
                 <form onSubmit={handleSubmit(onSubmit)} className="flex h-full w-full flex-col gap-4">
+                  <input
+                    type={'hidden'}
+                    {...register('picture')}
+                    value={image}
+                    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 className="flex flex-col gap-1">
+                    <label className="text-xs font-semibold uppercase tracking-wider text-zinc-400">Picture</label>
+                    <div className="relative inline-flex h-36 w-full items-center justify-center overflow-hidden rounded-lg border border-zinc-900 bg-zinc-950">
+                      <img src={image} alt="channel picture" className="relative z-10 h-11 w-11 rounded-md" />
+                      <div className="absolute bottom-3 right-3 z-10">
+                        <AvatarUploader valueState={setImage} />
+                      </div>
+                    </div>
+                  </div>
                   <div className="flex flex-col gap-1">
                     <label className="text-xs font-semibold uppercase tracking-wider text-zinc-400">
                       Channel name *
@@ -110,17 +135,6 @@ export const CreateChannelModal = () => {
                       />
                     </div>
                   </div>
-                  <div className="flex flex-col gap-1">
-                    <label className="text-xs font-semibold uppercase tracking-wider text-zinc-400">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-400">Description</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">