diff --git a/api/functions/graphql/nexus-typegen.ts b/api/functions/graphql/nexus-typegen.ts
index 65e0512..45c3262 100644
--- a/api/functions/graphql/nexus-typegen.ts
+++ b/api/functions/graphql/nexus-typegen.ts
@@ -28,6 +28,11 @@ declare global {
 }
 
 export interface NexusGenInputs {
+  ImageInput: { // input type
+    id?: string | null; // String
+    name?: string | null; // String
+    url: string; // String!
+  }
   MakerRoleInput: { // input type
     id: number; // Int!
     level: NexusGenEnums['RoleLevelEnum']; // RoleLevelEnum!
@@ -36,7 +41,7 @@ export interface NexusGenInputs {
     id: number; // Int!
   }
   ProfileDetailsInput: { // input type
-    avatar?: string | null; // String
+    avatar?: NexusGenInputs['ImageInput'] | null; // ImageInput
     bio?: string | null; // String
     discord?: string | null; // String
     email?: string | null; // String
@@ -59,7 +64,7 @@ export interface NexusGenInputs {
   }
   StoryInputType: { // input type
     body: string; // String!
-    cover_image?: string | null; // String
+    cover_image?: NexusGenInputs['ImageInput'] | null; // ImageInput
     id?: number | null; // Int
     is_published?: boolean | null; // Boolean
     tags: string[]; // [String!]!
@@ -95,7 +100,6 @@ export interface NexusGenScalars {
 
 export interface NexusGenObjects {
   Author: { // root type
-    avatar: string; // String!
     id: number; // Int!
     join_date: NexusGenScalars['Date']; // Date!
     lightning_address?: string | null; // String
@@ -111,7 +115,6 @@ export interface NexusGenObjects {
     applicants_count: number; // Int!
     applications: NexusGenRootTypes['BountyApplication'][]; // [BountyApplication!]!
     body: string; // String!
-    cover_image?: string | null; // String
     createdAt: NexusGenScalars['Date']; // Date!
     deadline: string; // String!
     excerpt: string; // String!
@@ -129,7 +132,6 @@ export interface NexusGenObjects {
     workplan: string; // String!
   }
   Category: { // root type
-    cover_image?: string | null; // String
     icon?: string | null; // String
     id: number; // Int!
     title: string; // String!
@@ -154,7 +156,6 @@ export interface NexusGenObjects {
     title: string; // String!
   }
   Hackathon: { // root type
-    cover_image: string; // String!
     description: string; // String!
     end_date: NexusGenScalars['Date']; // Date!
     id: number; // Int!
@@ -181,7 +182,6 @@ export interface NexusGenObjects {
   }
   Mutation: {};
   MyProfile: { // root type
-    avatar: string; // String!
     bio?: string | null; // String
     discord?: string | null; // String
     email?: string | null; // String
@@ -213,13 +213,10 @@ export interface NexusGenObjects {
     votes_count: number; // Int!
   }
   Project: { // root type
-    cover_image: string; // String!
     description: string; // String!
     id: number; // Int!
     lightning_address?: string | null; // String
     lnurl_callback_url?: string | null; // String
-    screenshots: string[]; // [String!]!
-    thumbnail_image: string; // String!
     title: string; // String!
     votes_count: number; // Int!
     website: string; // String!
@@ -237,7 +234,6 @@ export interface NexusGenObjects {
   }
   Story: { // root type
     body: string; // String!
-    cover_image?: string | null; // String
     createdAt: NexusGenScalars['Date']; // Date!
     excerpt: string; // String!
     id: number; // Int!
@@ -254,13 +250,11 @@ export interface NexusGenObjects {
     title: string; // String!
   }
   Tournament: { // root type
-    cover_image: string; // String!
     description: string; // String!
     end_date: NexusGenScalars['Date']; // Date!
     id: number; // Int!
     location: string; // String!
     start_date: NexusGenScalars['Date']; // Date!
-    thumbnail_image: string; // String!
     title: string; // String!
     website: string; // String!
   }
@@ -268,7 +262,6 @@ export interface NexusGenObjects {
     description: string; // String!
     ends_at: NexusGenScalars['Date']; // Date!
     id: number; // Int!
-    image: string; // String!
     location: string; // String!
     starts_at: NexusGenScalars['Date']; // Date!
     title: string; // String!
@@ -280,7 +273,6 @@ export interface NexusGenObjects {
     question: string; // String!
   }
   TournamentJudge: { // root type
-    avatar: string; // String!
     company: string; // String!
     name: string; // String!
   }
@@ -296,7 +288,6 @@ export interface NexusGenObjects {
   }
   TournamentPrize: { // root type
     amount: string; // String!
-    image: string; // String!
     title: string; // String!
   }
   TournamentProjectsResponse: { // root type
@@ -305,7 +296,6 @@ export interface NexusGenObjects {
     projects: NexusGenRootTypes['Project'][]; // [Project!]!
   }
   User: { // root type
-    avatar: string; // String!
     bio?: string | null; // String
     discord?: string | null; // String
     github?: string | null; // String
diff --git a/api/functions/graphql/schema.graphql b/api/functions/graphql/schema.graphql
index a3ddf7e..4765fbc 100644
--- a/api/functions/graphql/schema.graphql
+++ b/api/functions/graphql/schema.graphql
@@ -115,6 +115,12 @@ type Hackathon {
   website: String!
 }
 
+input ImageInput {
+  id: String
+  name: String
+  url: String!
+}
+
 type LnurlDetails {
   commentAllowed: Int
   maxSendable: Int
@@ -219,7 +225,7 @@ type PostComment {
 }
 
 input ProfileDetailsInput {
-  avatar: String
+  avatar: ImageInput
   bio: String
   discord: String
   email: String
@@ -331,7 +337,7 @@ type Story implements PostBase {
 
 input StoryInputType {
   body: String!
-  cover_image: String
+  cover_image: ImageInput
   id: Int
   is_published: Boolean
   tags: [String!]!
diff --git a/api/functions/graphql/types/category.js b/api/functions/graphql/types/category.js
index 0e7b205..4f3f5b8 100644
--- a/api/functions/graphql/types/category.js
+++ b/api/functions/graphql/types/category.js
@@ -4,7 +4,8 @@ const {
     extendType,
     nonNull,
 } = require('nexus');
-const { prisma } = require('../../../prisma')
+const { prisma } = require('../../../prisma');
+const { resolveImgObjectToUrl } = require('../../../utils/resolveImageUrl');
 
 
 const Category = objectType({
@@ -12,7 +13,11 @@ const Category = objectType({
     definition(t) {
         t.nonNull.int('id');
         t.nonNull.string('title');
-        t.string('cover_image');
+        t.string('cover_image', {
+            async resolve(parent) {
+                return prisma.category.findUnique({ where: { id: parent.id } }).cover_image_rel().then(resolveImgObjectToUrl)
+            }
+        });
         t.string('icon');
 
 
diff --git a/api/functions/graphql/types/hackathon.js b/api/functions/graphql/types/hackathon.js
index c0b139a..6212b92 100644
--- a/api/functions/graphql/types/hackathon.js
+++ b/api/functions/graphql/types/hackathon.js
@@ -6,6 +6,7 @@ const {
     nonNull,
 } = require('nexus');
 const { prisma } = require('../../../prisma');
+const { resolveImgObjectToUrl } = require('../../../utils/resolveImageUrl');
 
 
 
@@ -15,7 +16,11 @@ const Hackathon = objectType({
         t.nonNull.int('id');
         t.nonNull.string('title');
         t.nonNull.string('description');
-        t.nonNull.string('cover_image');
+        t.nonNull.string('cover_image', {
+            async resolve(parent) {
+                return prisma.hackathon.findUnique({ where: { id: parent.id } }).cover_image_rel().then(resolveImgObjectToUrl)
+            }
+        });
         t.nonNull.date('start_date');
         t.nonNull.date('end_date');
         t.nonNull.string('location');
diff --git a/api/functions/graphql/types/index.js b/api/functions/graphql/types/index.js
index 91cd7d2..2c7ad75 100644
--- a/api/functions/graphql/types/index.js
+++ b/api/functions/graphql/types/index.js
@@ -1,4 +1,5 @@
 const scalars = require('./_scalars')
+const misc = require('./misc')
 const category = require('./category')
 const project = require('./project')
 const vote = require('./vote')
@@ -10,6 +11,7 @@ const donation = require('./donation')
 const tag = require('./tag')
 
 module.exports = {
+    ...misc,
     ...tag,
     ...scalars,
     ...category,
diff --git a/api/functions/graphql/types/misc.js b/api/functions/graphql/types/misc.js
new file mode 100644
index 0000000..2fde16f
--- /dev/null
+++ b/api/functions/graphql/types/misc.js
@@ -0,0 +1,19 @@
+const { objectType, extendType, inputObjectType } = require("nexus");
+const { prisma } = require('../../../prisma');
+
+const ImageInput = inputObjectType({
+    name: 'ImageInput',
+    definition(t) {
+        t.string('id');
+        t.string('name');
+        t.nonNull.string('url');
+    }
+});
+
+
+module.exports = {
+    // Types
+    ImageInput,
+
+    // Queries 
+}
\ No newline at end of file
diff --git a/api/functions/graphql/types/post.js b/api/functions/graphql/types/post.js
index 76881c6..49a91ba 100644
--- a/api/functions/graphql/types/post.js
+++ b/api/functions/graphql/types/post.js
@@ -15,6 +15,9 @@ const { prisma } = require('../../../prisma');
 const { getUserByPubKey } = require('../../../auth/utils/helperFuncs');
 const { ApolloError } = require('apollo-server-lambda');
 const { marked } = require('marked');
+const { resolveImgObjectToUrl } = require('../../../utils/resolveImageUrl');
+const { ImageInput } = require('./misc');
+const { deleteImage } = require('../../../services/imageUpload.service');
 
 
 const POST_TYPE = enumType({
@@ -37,7 +40,11 @@ const Author = objectType({
     definition(t) {
         t.nonNull.int('id');
         t.nonNull.string('name');
-        t.nonNull.string('avatar');
+        t.nonNull.string('avatar', {
+            async resolve(parent) {
+                return prisma.user.findUnique({ where: { id: parent.id } }).avatar_rel().then(resolveImgObjectToUrl)
+            }
+        });
         t.nonNull.date('join_date');
 
         t.string('lightning_address');
@@ -71,7 +78,11 @@ const Story = objectType({
         t.nonNull.string('type', {
             resolve: () => t.typeName
         });
-        t.string('cover_image');
+        t.string('cover_image', {
+            async resolve(parent) {
+                return prisma.story.findUnique({ where: { id: parent.id } }).cover_image_rel().then(resolveImgObjectToUrl)
+            }
+        });
         t.nonNull.list.nonNull.field('comments', {
             type: "PostComment",
             resolve: (parent) => []
@@ -111,7 +122,9 @@ const StoryInputType = inputObjectType({
         t.int('id');
         t.nonNull.string('title');
         t.nonNull.string('body');
-        t.string('cover_image');
+        t.field('cover_image', {
+            type: ImageInput
+        })
         t.nonNull.list.nonNull.string('tags');
         t.boolean('is_published')
     }
@@ -342,6 +355,64 @@ const getPostById = extendType({
     }
 })
 
+const addCoverImage = async (providerImageId) => {
+    const newCoverImage = await prisma.hostedImage.findFirst({
+        where: {
+            provider_image_id: providerImageId
+        }
+    })
+
+    if (!newCoverImage) throw new ApolloError("New cover image not found")
+
+    await prisma.hostedImage.update({
+        where: {
+            id: newCoverImage.id
+        },
+        data: {
+            is_used: true
+        }
+    })
+
+    return newCoverImage
+}
+
+const getHostedImageIdsFromBody = async (body, oldBodyImagesIds = null) => {
+    let bodyImageIds = []
+
+    const regex = /(?:!\[(.*?)\]\((.*?)\))/g
+    let match;
+    while ((match = regex.exec(body))) {
+        const [, , value] = match
+
+        // Useful for old external images in case of duplicates. We need to be sure we are targeting an image from the good story.
+        const where = oldBodyImagesIds ? {
+            AND: [
+                { url: value },
+                { id: { in: oldBodyImagesIds } }
+            ]
+        } :
+            {
+                url: value,
+            }
+
+        const hostedImage = await prisma.hostedImage.findFirst({
+            where
+        })
+        if (hostedImage) {
+            bodyImageIds.push(hostedImage.id)
+            await prisma.hostedImage.update({
+                where: {
+                    id: hostedImage.id
+                },
+                data: {
+                    is_used: true
+                }
+            })
+        }
+    }
+    return bodyImageIds
+}
+
 const createStory = extendType({
     type: 'Mutation',
     definition(t) {
@@ -358,20 +429,64 @@ const createStory = extendType({
 
                 let was_published = false;
 
+
+                // TODO: validate post data
+
+                let coverImage = null
+                let bodyImageIds = []
+
+                // Edit story
                 if (id) {
                     const oldPost = await prisma.story.findFirst({
                         where: { id },
                         select: {
                             user_id: true,
-                            is_published: true
+                            is_published: true,
+                            cover_image_id: true,
+                            body_image_ids: true
                         }
                     })
                     was_published = oldPost.is_published;
-                    if (user.id !== oldPost.user_id)
-                        throw new ApolloError("Not post author")
-                }
-                // TODO: validate post data
+                    if (user.id !== oldPost.user_id) throw new ApolloError("Not post author")
 
+                    // Body images
+                    bodyImageIds = await getHostedImageIdsFromBody(body, oldPost.body_image_ids)
+
+                    // Old cover image is found
+                    if (oldPost.cover_image_id) {
+                        const oldCoverImage = await prisma.hostedImage.findFirst({
+                            where: {
+                                id: oldPost.cover_image_id
+                            }
+                        })
+
+                        // New cover image
+                        if (cover_image?.id && cover_image.id !== oldCoverImage?.provider_image_id) {
+                            await deleteImage(oldCoverImage.id)
+                            coverImage = await addCoverImage(cover_image.id)
+                        } else {
+                            coverImage = oldCoverImage
+                        }
+                    } else {
+                        // No old image found and new cover image
+                        if (cover_image?.id) {
+                            coverImage = await addCoverImage(cover_image.id)
+                        }
+                    }
+
+                    // Remove unused body images
+                    const unusedImagesIds = oldPost.body_image_ids.filter(x => !bodyImageIds.includes(x));
+                    unusedImagesIds.map(async i => await deleteImage(i))
+
+                } else {
+                    // Body images
+                    bodyImageIds = await getHostedImageIdsFromBody(body)
+
+                    // New story and new cover image
+                    if (cover_image?.id) {
+                        coverImage = await addCoverImage(cover_image.id)
+                    }
+                }
 
                 // Preprocess & insert
                 const htmlBody = marked.parse(body);
@@ -383,6 +498,16 @@ const createStory = extendType({
                     .replace(/"/g, '"')
                     ;
 
+
+                const coverImageRel = coverImage ? {
+                    cover_image_rel: {
+                        connect:
+                        {
+                            id: coverImage ? coverImage.id : null
+                        }
+                    }
+                } : {}
+
                 if (id) {
                     await prisma.story.update({
                         where: { id },
@@ -398,7 +523,7 @@ const createStory = extendType({
                         data: {
                             title,
                             body,
-                            cover_image,
+                            cover_image: '',
                             excerpt,
                             is_published: was_published || is_published,
                             tags: {
@@ -415,16 +540,17 @@ const createStory = extendType({
                                         }
                                     })
                             },
+                            body_image_ids: bodyImageIds,
+                            ...coverImageRel
                         }
                     })
                 }
 
-
-                return prisma.story.create({
+                return await prisma.story.create({
                     data: {
                         title,
                         body,
-                        cover_image,
+                        cover_image: '',
                         excerpt,
                         is_published,
                         tags: {
@@ -445,7 +571,9 @@ const createStory = extendType({
                             connect: {
                                 id: user.id,
                             }
-                        }
+                        },
+                        body_image_ids: bodyImageIds,
+                        ...coverImageRel
                     }
                 })
             }
@@ -470,17 +598,39 @@ const deleteStory = extendType({
                 const oldPost = await prisma.story.findFirst({
                     where: { id },
                     select: {
-                        user_id: true
+                        user_id: true,
+                        body_image_ids: true,
+                        cover_image_id: true
                     }
                 })
                 if (user.id !== oldPost.user_id)
                     throw new ApolloError("Not post author")
 
-                return prisma.story.delete({
+                const deletedPost = await prisma.story.delete({
                     where: {
                         id
                     }
                 })
+
+                const coverImage = await prisma.hostedImage.findMany({
+                    where: {
+                        OR: [
+                            { id: oldPost.cover_image_id },
+                            {
+                                id: {
+                                    in: oldPost.body_image_ids
+                                }
+                            }
+                        ]
+                    },
+                    select: {
+                        id: true,
+                        provider_image_id: true
+                    }
+                })
+                coverImage.map(async i => await deleteImage(i.id))
+
+                return deletedPost
             }
         })
     },
diff --git a/api/functions/graphql/types/project.js b/api/functions/graphql/types/project.js
index 58eba7b..642be84 100644
--- a/api/functions/graphql/types/project.js
+++ b/api/functions/graphql/types/project.js
@@ -8,6 +8,7 @@ const {
     inputObjectType,
 } = require('nexus')
 const { prisma } = require('../../../prisma');
+const { resolveImgObjectToUrl } = require('../../../utils/resolveImageUrl');
 
 const { paginationArgs, getLnurlDetails, lightningAddressToLnurl } = require('./helpers');
 const { MakerRole } = require('./users');
@@ -19,9 +20,30 @@ const Project = objectType({
         t.nonNull.int('id');
         t.nonNull.string('title');
         t.nonNull.string('description');
-        t.nonNull.string('cover_image');
-        t.nonNull.string('thumbnail_image');
-        t.nonNull.list.nonNull.string('screenshots');
+        t.nonNull.string('cover_image', {
+            async resolve(parent) {
+                return prisma.project.findUnique({ where: { id: parent.id } }).cover_image_rel().then(resolveImgObjectToUrl)
+            }
+        });
+        t.nonNull.string('thumbnail_image', {
+            async resolve(parent) {
+                return prisma.project.findUnique({ where: { id: parent.id } }).thumbnail_image_rel().then(resolveImgObjectToUrl)
+            }
+        });
+        t.nonNull.list.nonNull.string('screenshots', {
+            async resolve(parent) {
+                if (!parent.screenshots_ids) return null
+                const imgObject = await prisma.hostedImage.findMany({
+                    where: {
+                        id: { in: parent.screenshots_ids }
+                    }
+                });
+
+                return imgObject.map(img => {
+                    return resolveImgObjectToUrl(img);
+                });
+            }
+        });
         t.nonNull.string('website');
         t.string('lightning_address');
         t.string('lnurl_callback_url');
diff --git a/api/functions/graphql/types/tournament.js b/api/functions/graphql/types/tournament.js
index c3d1edd..7e05b78 100644
--- a/api/functions/graphql/types/tournament.js
+++ b/api/functions/graphql/types/tournament.js
@@ -9,6 +9,7 @@ const {
     booleanArg,
 } = require('nexus');
 const { getUserByPubKey } = require('../../../auth/utils/helperFuncs');
+const { resolveImgObjectToUrl } = require('../../../utils/resolveImageUrl');
 const { prisma } = require('../../../prisma');
 const { paginationArgs, removeNulls } = require('./helpers');
 
@@ -19,7 +20,11 @@ const TournamentPrize = objectType({
     definition(t) {
         t.nonNull.string('title');
         t.nonNull.string('amount');
-        t.nonNull.string('image');
+        t.nonNull.string('image', {
+            async resolve(parent) {
+                return prisma.tournamentPrize.findUnique({ where: { id: parent.id } }).image_rel().then(resolveImgObjectToUrl)
+            }
+        });
     }
 })
 
@@ -28,7 +33,11 @@ const TournamentJudge = objectType({
     definition(t) {
         t.nonNull.string('name');
         t.nonNull.string('company');
-        t.nonNull.string('avatar');
+        t.nonNull.string('avatar', {
+            async resolve(parent) {
+                return prisma.tournamentJudge.findUnique({ where: { id: parent.id } }).avatar_rel().then(resolveImgObjectToUrl)
+            }
+        });
     }
 })
 
@@ -74,7 +83,11 @@ const TournamentEvent = objectType({
     definition(t) {
         t.nonNull.int('id');
         t.nonNull.string('title');
-        t.nonNull.string('image');
+        t.nonNull.string('image', {
+            async resolve(parent) {
+                return prisma.tournamentEvent.findUnique({ where: { id: parent.id } }).image_rel().then(resolveImgObjectToUrl)
+            }
+        });
         t.nonNull.string('description');
         t.nonNull.date('starts_at');
         t.nonNull.date('ends_at');
@@ -91,8 +104,16 @@ const Tournament = objectType({
         t.nonNull.int('id');
         t.nonNull.string('title');
         t.nonNull.string('description');
-        t.nonNull.string('thumbnail_image');
-        t.nonNull.string('cover_image');
+        t.nonNull.string('thumbnail_image', {
+            async resolve(parent) {
+                return prisma.tournament.findUnique({ where: { id: parent.id } }).thumbnail_image_rel().then(resolveImgObjectToUrl)
+            }
+        });
+        t.nonNull.string('cover_image', {
+            async resolve(parent) {
+                return prisma.tournament.findUnique({ where: { id: parent.id } }).cover_image_rel().then(resolveImgObjectToUrl)
+            }
+        });
         t.nonNull.date('start_date');
         t.nonNull.date('end_date');
         t.nonNull.string('location');
diff --git a/api/functions/graphql/types/tournaments.js b/api/functions/graphql/types/tournaments.js
new file mode 100644
index 0000000..e69de29
diff --git a/api/functions/graphql/types/users.js b/api/functions/graphql/types/users.js
index 5e26a0e..b67b64c 100644
--- a/api/functions/graphql/types/users.js
+++ b/api/functions/graphql/types/users.js
@@ -3,7 +3,10 @@ const { prisma } = require('../../../prisma');
 const { objectType, extendType, intArg, nonNull, inputObjectType, stringArg, interfaceType, list, enumType } = require("nexus");
 const { getUserByPubKey } = require("../../../auth/utils/helperFuncs");
 const { removeNulls } = require("./helpers");
+const { ImageInput } = require('./misc');
 const { Tournament } = require('./tournament');
+const { resolveImgObjectToUrl } = require('../../../utils/resolveImageUrl');
+const { deleteImage } = require('../../../services/imageUpload.service');
 
 
 
@@ -13,7 +16,11 @@ const BaseUser = interfaceType({
     definition(t) {
         t.nonNull.int('id');
         t.nonNull.string('name');
-        t.nonNull.string('avatar');
+        t.nonNull.string('avatar', {
+            async resolve(parent) {
+                return prisma.user.findUnique({ where: { id: parent.id } }).avatar_rel().then(resolveImgObjectToUrl)
+            }
+        });
         t.nonNull.date('join_date');
         t.string('role');
         t.string('jobTitle')
@@ -289,7 +296,9 @@ const ProfileDetailsInput = inputObjectType({
     name: 'ProfileDetailsInput',
     definition(t) {
         t.string('name');
-        t.string('avatar');
+        t.field('avatar', {
+            type: ImageInput
+        })
         t.string('email')
         t.string('jobTitle')
         t.string('lightning_address')
@@ -317,14 +326,48 @@ const updateProfileDetails = extendType({
                     throw new Error("You have to login");
                 // TODO: validate new data
 
+                // ----------------
+                // Check if the user uploaded a new image, and if so, 
+                // remove the old one from the hosting service, then replace it with this one
+                // ----------------
+                let avatarId = user.avatar_id;
+                if (args.data.avatar.id) {
+                    const newAvatarProviderId = args.data.avatar.id;
+                    const newAvatar = await prisma.hostedImage.findFirst({
+                        where: {
+                            provider_image_id: newAvatarProviderId
+                        }
+                    })
+
+                    if (newAvatar && newAvatar.id !== user.avatar_id) {
+                        avatarId = newAvatar.id;
+
+                        await prisma.hostedImage.update({
+                            where: {
+                                id: newAvatar.id
+                            },
+                            data: {
+                                is_used: true
+                            }
+                        });
+
+                        await deleteImage(user.avatar_id)
+                    }
+                }
 
                 // Preprocess & insert
-
                 return prisma.user.update({
                     where: {
                         id: user.id,
                     },
-                    data: removeNulls(args.data)
+                    data: removeNulls({
+                        ...args.data,
+                        avatar_id: avatarId,
+
+                        //hack to remove avatar from args.data
+                        // can be removed later with a schema data validator
+                        avatar: '',
+                    })
                 })
             }
         })
diff --git a/api/functions/login/login.js b/api/functions/login/login.js
index 782f195..49c162d 100644
--- a/api/functions/login/login.js
+++ b/api/functions/login/login.js
@@ -85,11 +85,21 @@ const loginHandler = async (req, res) => {
                 const nostr_prv_key = generatePrivateKey();
                 const nostr_pub_key = getPublicKey(nostr_prv_key);
 
+                const avatar = await prisma.hostedImage.create({
+                    data: {
+                        filename: 'avatar.svg',
+                        provider: 'external',
+                        is_used: true,
+                        url: `https://avatars.dicebear.com/api/bottts/${key}.svg`,
+                        provider_image_id: ''
+                    }
+                })
+
                 const createdUser = await prisma.user.create({
                     data: {
                         pubKey: key,
                         name: key,
-                        avatar: `https://avatars.dicebear.com/api/bottts/${key}.svg`,
+                        avatar_id: avatar.id,
                         nostr_prv_key,
                         nostr_pub_key,
                     },
diff --git a/api/functions/upload-image-url/upload-image-url.js b/api/functions/upload-image-url/upload-image-url.js
index b40682a..91f0eb7 100644
--- a/api/functions/upload-image-url/upload-image-url.js
+++ b/api/functions/upload-image-url/upload-image-url.js
@@ -5,11 +5,10 @@ const extractKeyFromCookie = require('../../utils/extractKeyFromCookie')
 const { getUserByPubKey } = require('../../auth/utils/helperFuncs')
 const { getDirectUploadUrl } = require('../../services/imageUpload.service')
 const { prisma } = require('../../prisma')
+const { getUrlFromProvider } = require('../../utils/resolveImageUrl')
 
 const postUploadImageUrl = async (req, res) => {
 
-    return res.status(404).send("This api is in progress");
-
     const userPubKey = await extractKeyFromCookie(req.headers.cookie ?? req.headers.Cookie)
     const user = await getUserByPubKey(userPubKey)
 
@@ -22,11 +21,16 @@ const postUploadImageUrl = async (req, res) => {
     try {
         const uploadUrl = await getDirectUploadUrl()
 
-        await prisma.hostedImage.create({
-            data: { id: uploadUrl.id, filename },
+        const hostedImage = await prisma.hostedImage.create({
+            data: {
+                filename,
+                url: getUrlFromProvider(uploadUrl.provider, uploadUrl.id),
+                provider_image_id: uploadUrl.id,
+                provider: uploadUrl.provider
+            },
         })
 
-        return res.status(200).json(uploadUrl)
+        return res.status(200).json({ id: hostedImage.id, uploadURL: uploadUrl.uploadURL })
     } catch (error) {
         res.status(500).send('Unexpected error happened, please try again')
     }
diff --git a/api/services/imageUpload.service.js b/api/services/imageUpload.service.js
index 642c0de..ef63701 100644
--- a/api/services/imageUpload.service.js
+++ b/api/services/imageUpload.service.js
@@ -1,11 +1,21 @@
 const { CONSTS } = require('../utils')
 const axios = require('axios')
 const FormData = require('form-data')
+const { prisma } = require('../prisma')
 
 const BASE_URL = 'https://api.cloudflare.com/client/v4'
 
 const operationUrls = {
     'image.uploadUrl': `${BASE_URL}/accounts/${CONSTS.CLOUDFLARE_IMAGE_ACCOUNT_ID}/images/v2/direct_upload`,
+    'image.delete': `${BASE_URL}/accounts/${CONSTS.CLOUDFLARE_IMAGE_ACCOUNT_ID}/images/v1/`,
+}
+
+function getAxiosConfig() {
+    return {
+        headers: {
+            Authorization: `Bearer ${CONSTS.CLOUDFLARE_IMAGE_API_KEY}`,
+        },
+    }
 }
 
 async function getDirectUploadUrl() {
@@ -27,9 +37,62 @@ async function getDirectUploadUrl() {
         throw new Error(result.data, { cause: result.data.errors })
     }
 
-    return result.data.result
+    const data = result.data.result
+
+    return { id: data.id, uploadURL: data.uploadURL, provider: 'cloudflare' }
+}
+
+async function deleteImageFromProvider(providerImageId) {
+    try {
+        const url = operationUrls['image.delete'] + providerImageId
+        const result = await axios.delete(url, getAxiosConfig())
+
+        if (!result.data.success) {
+            throw new Error(result.data, { cause: result.data.errors })
+        }
+    } catch (error) {
+        throw error
+    }
+}
+
+async function deleteImage(hostedImageId) {
+    if (!hostedImageId) throw new Error("argument 'hostedImageId' must be provider")
+
+    const hostedImage = await prisma.hostedImage.findFirst({
+        where: {
+            id: hostedImageId,
+        },
+    })
+
+    if (!hostedImage) throw new Error(`No HostedImage row found for HostedImage.id=${hostedImageId}`)
+    if (hostedImage.provider_image_id && hostedImage.provider_image_id === '')
+        throw new Error(`Field 'provider_image_id' for HostedImage.id=${hostedImageId} must not be empty. Current value '${hostedImage.provider_image_id}'`)
+
+    // Set is_used to false in case of deletion fail from the hosting image provider. The scheduled job will try to delete the HostedImage row
+    await prisma.hostedImage.update({
+        where: {
+            id: hostedImage.id,
+        },
+        data: {
+            is_used: false,
+        },
+    })
+
+    if (hostedImage.provider_image_id && hostedImage.provider_image_id !== '') {
+        deleteImageFromProvider(hostedImage.provider_image_id)
+            .then(async () => {
+                await prisma.hostedImage.delete({
+                    where: {
+                        id: hostedImageId,
+                    },
+                })
+            })
+            .catch((error) => console.error(error))
+    }
 }
 
 module.exports = {
     getDirectUploadUrl,
+    deleteImage,
+    deleteImageFromProvider,
 }
diff --git a/api/utils/consts.js b/api/utils/consts.js
index 8f2083b..bc62418 100644
--- a/api/utils/consts.js
+++ b/api/utils/consts.js
@@ -3,6 +3,7 @@ const JWT_SECRET = process.env.JWT_SECRET
 const LNURL_AUTH_HOST = process.env.LNURL_AUTH_HOST
 const CLOUDFLARE_IMAGE_ACCOUNT_ID = process.env.CLOUDFLARE_IMAGE_ACCOUNT_ID
 const CLOUDFLARE_IMAGE_API_KEY = process.env.CLOUDFLARE_IMAGE_API_KEY
+const CLOUDFLARE_IMAGE_ACCOUNT_HASH = process.env.CLOUDFLARE_IMAGE_ACCOUNT_HASH
 
 const CONSTS = {
     JWT_SECRET,
@@ -10,6 +11,7 @@ const CONSTS = {
     LNURL_AUTH_HOST,
     CLOUDFLARE_IMAGE_ACCOUNT_ID,
     CLOUDFLARE_IMAGE_API_KEY,
+    CLOUDFLARE_IMAGE_ACCOUNT_HASH
 }
 
 module.exports = CONSTS
diff --git a/api/utils/resolveImageUrl.js b/api/utils/resolveImageUrl.js
new file mode 100644
index 0000000..40931ed
--- /dev/null
+++ b/api/utils/resolveImageUrl.js
@@ -0,0 +1,45 @@
+const { CLOUDFLARE_IMAGE_ACCOUNT_HASH } = require('./consts')
+
+const PROVIDERS = [
+    {
+        name: 'cloudflare',
+        prefixUrl: `https://imagedelivery.net/${CLOUDFLARE_IMAGE_ACCOUNT_HASH}/`,
+        variants: [
+            {
+                default: true,
+                name: 'public',
+            },
+        ],
+    },
+]
+
+/**
+ * resolveImgObjectToUrl
+ * @param {object} imgObject
+ * @param {string} variant - List to be defined. DEFAULT TO 'public'
+ * @returns {string} image url
+ */
+function resolveImgObjectToUrl(imgObject, variant = null) {
+    if (!imgObject) return null;
+
+    if (imgObject.provider === 'external') {
+        return imgObject.url
+    }
+
+    return getUrlFromProvider(imgObject.provider, imgObject.provider_image_id, variant)
+}
+
+function getUrlFromProvider(provider, providerImageId, variant = null) {
+    const p = PROVIDERS.find((p) => p.name === provider)
+
+    if (p) {
+        if (p && p.name === 'cloudflare') {
+            const variantName = variant ?? p.variants.find((v) => v.default).name
+            return p.prefixUrl + providerImageId + '/' + variantName
+        }
+    }
+
+    throw new Error('Hosting images provider not supported')
+}
+
+module.exports = { resolveImgObjectToUrl, getUrlFromProvider }
diff --git a/package-lock.json b/package-lock.json
index 21405e4..19b851c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,11 @@
         "@reduxjs/toolkit": "^1.8.1",
         "@remirror/pm": "^1.0.16",
         "@remirror/react": "^1.0.34",
+        "@rpldy/mock-sender": "^1.0.1",
+        "@rpldy/upload-button": "^1.0.1",
+        "@rpldy/upload-drop-zone": "^1.0.1",
+        "@rpldy/upload-preview": "^1.0.1",
+        "@rpldy/uploady": "^1.0.1",
         "@shopify/react-web-worker": "^5.0.1",
         "@szhsin/react-menu": "^3.0.2",
         "@testing-library/jest-dom": "^5.16.4",
@@ -6938,6 +6943,170 @@
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz",
       "integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw=="
     },
+    "node_modules/@rpldy/life-events": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@rpldy/life-events/-/life-events-1.0.1.tgz",
+      "integrity": "sha512-z9b8Yi1jq4/Um0BQJVsKwwBps8jB+X6UMJXU3dG7Q4rHe7rIiAQw4fCjN5W3L4b9JF9jTs9yX+X7ouWvBLkPVw==",
+      "dependencies": {
+        "@rpldy/shared": "^1.0.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-uploady"
+      }
+    },
+    "node_modules/@rpldy/mock-sender": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@rpldy/mock-sender/-/mock-sender-1.0.1.tgz",
+      "integrity": "sha512-87UT/az8J2AD6NIYX/uVp6GUqM/M4vVpZsXod14GkNkAOOilGow6R1W/3PW7lxx8bjfM51Moraipq1KNwlIODA==",
+      "dependencies": {
+        "@rpldy/sender": "^1.0.1",
+        "@rpldy/shared": "^1.0.1",
+        "@rpldy/uploader": "^1.0.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-uploady"
+      }
+    },
+    "node_modules/@rpldy/sender": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@rpldy/sender/-/sender-1.0.1.tgz",
+      "integrity": "sha512-5lGB2uPP22xESYhXdqzKKqZTtS03e0Gi9xx+1mu3XLEpUH7uu55dUMa8CT1cOzLM94JWwaS3fEQG+yB3n9Q7HQ==",
+      "dependencies": {
+        "@rpldy/shared": "^1.0.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-uploady"
+      }
+    },
+    "node_modules/@rpldy/shared": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@rpldy/shared/-/shared-1.0.1.tgz",
+      "integrity": "sha512-22R1ZI+J4vvD6JhHlevxYwn6PxSZ2eXmP1mHxkW/7MHgTWgcKD2xBhl2khfjub64rqnhhiU1KDumhAWEO3GoAw==",
+      "dependencies": {
+        "invariant": "^2.2.4",
+        "just-throttle": "^1.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-uploady"
+      }
+    },
+    "node_modules/@rpldy/shared-ui": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@rpldy/shared-ui/-/shared-ui-1.0.1.tgz",
+      "integrity": "sha512-pEKKifp4srk8vWyV7TAmpMRz5Dx66YcjOggP40ZZ7TV+CQfjY+b8TY1zx48ptakHqdpbG6Qzz0+OaA+VrOd3mA==",
+      "dependencies": {
+        "@rpldy/shared": "^1.0.1",
+        "@rpldy/uploader": "^1.0.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-uploady"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
+    "node_modules/@rpldy/simple-state": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@rpldy/simple-state/-/simple-state-1.0.1.tgz",
+      "integrity": "sha512-ku/WBl2RFCqMORGEL9/qklMTVN92mqaLbQAY7JtS+IhpG3hfIzwMEXh1eVAs8bpSU2nrsp2SeR1ykyxU8aFWiw==",
+      "dependencies": {
+        "@rpldy/shared": "^1.0.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-uploady"
+      }
+    },
+    "node_modules/@rpldy/upload-button": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@rpldy/upload-button/-/upload-button-1.0.1.tgz",
+      "integrity": "sha512-HuJuWlI9xljD7rQAmL5kEf40sOLZs8KF4VQCaj0y8+ErnEblmvjh/pSuRp+QgXVPT5NYrCq2YXSqOK9UYTBdsA==",
+      "dependencies": {
+        "@rpldy/shared-ui": "^1.0.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-uploady"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
+    "node_modules/@rpldy/upload-drop-zone": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@rpldy/upload-drop-zone/-/upload-drop-zone-1.0.1.tgz",
+      "integrity": "sha512-B6fhOuIrzCQhHKal+hoGkiubEVxjzFPja9RoYd5dOtaZ7aMwmTX5dtFgVyaL1hjit7H0npHkD6v27b4K6snCXw==",
+      "dependencies": {
+        "@rpldy/shared-ui": "^1.0.1",
+        "html-dir-content": "^0.3.2"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-uploady"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
+    "node_modules/@rpldy/upload-preview": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@rpldy/upload-preview/-/upload-preview-1.0.1.tgz",
+      "integrity": "sha512-Cq4+9fdgV2VRG4MsD9gnQ6AdRC4hMgPM4o88Iq7ifS5cDKNZa3hPVauSN39VpcoOZca1rDrdVslp9eStqmDTBg==",
+      "dependencies": {
+        "@rpldy/shared": "^1.0.1",
+        "@rpldy/shared-ui": "^1.0.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-uploady"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
+    "node_modules/@rpldy/uploader": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@rpldy/uploader/-/uploader-1.0.1.tgz",
+      "integrity": "sha512-QuFvKu/xdCtiQU8Szx/pH/3MIJvnTMtDlmN5P62GuHrgUJw9SypZCCv4hCLuq1LuHs7ZENplToPjvj3pscYFdA==",
+      "dependencies": {
+        "@rpldy/life-events": "^1.0.1",
+        "@rpldy/sender": "^1.0.1",
+        "@rpldy/shared": "^1.0.1",
+        "@rpldy/simple-state": "^1.0.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-uploady"
+      }
+    },
+    "node_modules/@rpldy/uploady": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@rpldy/uploady/-/uploady-1.0.1.tgz",
+      "integrity": "sha512-dwyNdYVy/wtioFfMUDsuAuHKKMi2/zMzKaiuOFGgPpx+3a9cVnbORNW/RcAMO6fVYLQgS4VxnqNSdnjS2m6buw==",
+      "dependencies": {
+        "@rpldy/life-events": "^1.0.1",
+        "@rpldy/shared": "^1.0.1",
+        "@rpldy/shared-ui": "^1.0.1",
+        "@rpldy/uploader": "^1.0.1"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-uploady"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/@rushstack/eslint-patch": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.1.3.tgz",
@@ -27166,6 +27335,11 @@
         "safe-buffer": "~5.1.0"
       }
     },
+    "node_modules/html-dir-content": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/html-dir-content/-/html-dir-content-0.3.2.tgz",
+      "integrity": "sha512-a1EJZbvBGmmFwk9VxFhEgaHkyXUXKTkw0jr0FCvXKCqgzO1H0wbFQbbzRA6FhR3twxAyjqVc80bzGHEmKrYsSw=="
+    },
     "node_modules/html-encoding-sniffer": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz",
@@ -27780,7 +27954,6 @@
       "version": "2.2.4",
       "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
       "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
-      "dev": true,
       "dependencies": {
         "loose-envify": "^1.0.0"
       }
@@ -30939,6 +31112,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/just-throttle": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/just-throttle/-/just-throttle-1.1.0.tgz",
+      "integrity": "sha512-iePC/13XYX1Tyn9C6jY+DG3UEejkDvrKsw5xxgGhtGUwYWmoJm4CoKexscBKELOu3FTyCDzjr21ZJ67AXnz+bg=="
+    },
     "node_modules/jwa": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/jwa/-/jwa-1.4.1.tgz",
@@ -75931,6 +76109,106 @@
         }
       }
     },
+    "@rpldy/life-events": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@rpldy/life-events/-/life-events-1.0.1.tgz",
+      "integrity": "sha512-z9b8Yi1jq4/Um0BQJVsKwwBps8jB+X6UMJXU3dG7Q4rHe7rIiAQw4fCjN5W3L4b9JF9jTs9yX+X7ouWvBLkPVw==",
+      "requires": {
+        "@rpldy/shared": "^1.0.1"
+      }
+    },
+    "@rpldy/mock-sender": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@rpldy/mock-sender/-/mock-sender-1.0.1.tgz",
+      "integrity": "sha512-87UT/az8J2AD6NIYX/uVp6GUqM/M4vVpZsXod14GkNkAOOilGow6R1W/3PW7lxx8bjfM51Moraipq1KNwlIODA==",
+      "requires": {
+        "@rpldy/sender": "^1.0.1",
+        "@rpldy/shared": "^1.0.1",
+        "@rpldy/uploader": "^1.0.1"
+      }
+    },
+    "@rpldy/sender": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@rpldy/sender/-/sender-1.0.1.tgz",
+      "integrity": "sha512-5lGB2uPP22xESYhXdqzKKqZTtS03e0Gi9xx+1mu3XLEpUH7uu55dUMa8CT1cOzLM94JWwaS3fEQG+yB3n9Q7HQ==",
+      "requires": {
+        "@rpldy/shared": "^1.0.1"
+      }
+    },
+    "@rpldy/shared": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@rpldy/shared/-/shared-1.0.1.tgz",
+      "integrity": "sha512-22R1ZI+J4vvD6JhHlevxYwn6PxSZ2eXmP1mHxkW/7MHgTWgcKD2xBhl2khfjub64rqnhhiU1KDumhAWEO3GoAw==",
+      "requires": {
+        "invariant": "^2.2.4",
+        "just-throttle": "^1.1.0"
+      }
+    },
+    "@rpldy/shared-ui": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@rpldy/shared-ui/-/shared-ui-1.0.1.tgz",
+      "integrity": "sha512-pEKKifp4srk8vWyV7TAmpMRz5Dx66YcjOggP40ZZ7TV+CQfjY+b8TY1zx48ptakHqdpbG6Qzz0+OaA+VrOd3mA==",
+      "requires": {
+        "@rpldy/shared": "^1.0.1",
+        "@rpldy/uploader": "^1.0.1"
+      }
+    },
+    "@rpldy/simple-state": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@rpldy/simple-state/-/simple-state-1.0.1.tgz",
+      "integrity": "sha512-ku/WBl2RFCqMORGEL9/qklMTVN92mqaLbQAY7JtS+IhpG3hfIzwMEXh1eVAs8bpSU2nrsp2SeR1ykyxU8aFWiw==",
+      "requires": {
+        "@rpldy/shared": "^1.0.1"
+      }
+    },
+    "@rpldy/upload-button": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@rpldy/upload-button/-/upload-button-1.0.1.tgz",
+      "integrity": "sha512-HuJuWlI9xljD7rQAmL5kEf40sOLZs8KF4VQCaj0y8+ErnEblmvjh/pSuRp+QgXVPT5NYrCq2YXSqOK9UYTBdsA==",
+      "requires": {
+        "@rpldy/shared-ui": "^1.0.1"
+      }
+    },
+    "@rpldy/upload-drop-zone": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@rpldy/upload-drop-zone/-/upload-drop-zone-1.0.1.tgz",
+      "integrity": "sha512-B6fhOuIrzCQhHKal+hoGkiubEVxjzFPja9RoYd5dOtaZ7aMwmTX5dtFgVyaL1hjit7H0npHkD6v27b4K6snCXw==",
+      "requires": {
+        "@rpldy/shared-ui": "^1.0.1",
+        "html-dir-content": "^0.3.2"
+      }
+    },
+    "@rpldy/upload-preview": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@rpldy/upload-preview/-/upload-preview-1.0.1.tgz",
+      "integrity": "sha512-Cq4+9fdgV2VRG4MsD9gnQ6AdRC4hMgPM4o88Iq7ifS5cDKNZa3hPVauSN39VpcoOZca1rDrdVslp9eStqmDTBg==",
+      "requires": {
+        "@rpldy/shared": "^1.0.1",
+        "@rpldy/shared-ui": "^1.0.1"
+      }
+    },
+    "@rpldy/uploader": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@rpldy/uploader/-/uploader-1.0.1.tgz",
+      "integrity": "sha512-QuFvKu/xdCtiQU8Szx/pH/3MIJvnTMtDlmN5P62GuHrgUJw9SypZCCv4hCLuq1LuHs7ZENplToPjvj3pscYFdA==",
+      "requires": {
+        "@rpldy/life-events": "^1.0.1",
+        "@rpldy/sender": "^1.0.1",
+        "@rpldy/shared": "^1.0.1",
+        "@rpldy/simple-state": "^1.0.1"
+      }
+    },
+    "@rpldy/uploady": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@rpldy/uploady/-/uploady-1.0.1.tgz",
+      "integrity": "sha512-dwyNdYVy/wtioFfMUDsuAuHKKMi2/zMzKaiuOFGgPpx+3a9cVnbORNW/RcAMO6fVYLQgS4VxnqNSdnjS2m6buw==",
+      "requires": {
+        "@rpldy/life-events": "^1.0.1",
+        "@rpldy/shared": "^1.0.1",
+        "@rpldy/shared-ui": "^1.0.1",
+        "@rpldy/uploader": "^1.0.1"
+      }
+    },
     "@rushstack/eslint-patch": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.1.3.tgz",
@@ -91898,6 +92176,11 @@
         }
       }
     },
+    "html-dir-content": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/html-dir-content/-/html-dir-content-0.3.2.tgz",
+      "integrity": "sha512-a1EJZbvBGmmFwk9VxFhEgaHkyXUXKTkw0jr0FCvXKCqgzO1H0wbFQbbzRA6FhR3twxAyjqVc80bzGHEmKrYsSw=="
+    },
     "html-encoding-sniffer": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz",
@@ -92347,7 +92630,6 @@
       "version": "2.2.4",
       "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
       "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
-      "dev": true,
       "requires": {
         "loose-envify": "^1.0.0"
       }
@@ -94641,6 +94923,11 @@
       "integrity": "sha512-pBxcB3LFc8QVgdggvZWyeys+hnrNWg4OcZIU/1X59k5jQdLBlCsYGRQaz234SqoRLTCgMH00fY0xRJH+F9METQ==",
       "dev": true
     },
+    "just-throttle": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/just-throttle/-/just-throttle-1.1.0.tgz",
+      "integrity": "sha512-iePC/13XYX1Tyn9C6jY+DG3UEejkDvrKsw5xxgGhtGUwYWmoJm4CoKexscBKELOu3FTyCDzjr21ZJ67AXnz+bg=="
+    },
     "jwa": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/jwa/-/jwa-1.4.1.tgz",
diff --git a/package.json b/package.json
index a7e5946..a3a3b6b 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,11 @@
     "@reduxjs/toolkit": "^1.8.1",
     "@remirror/pm": "^1.0.16",
     "@remirror/react": "^1.0.34",
+    "@rpldy/mock-sender": "^1.0.1",
+    "@rpldy/upload-button": "^1.0.1",
+    "@rpldy/upload-drop-zone": "^1.0.1",
+    "@rpldy/upload-preview": "^1.0.1",
+    "@rpldy/uploady": "^1.0.1",
     "@shopify/react-web-worker": "^5.0.1",
     "@szhsin/react-menu": "^3.0.2",
     "@testing-library/jest-dom": "^5.16.4",
diff --git a/public/mockServiceWorker.js b/public/mockServiceWorker.js
index ba0c013..0966a9d 100644
--- a/public/mockServiceWorker.js
+++ b/public/mockServiceWorker.js
@@ -2,7 +2,7 @@
 /* tslint:disable */
 
 /**
- * Mock Service Worker (0.39.1).
+ * Mock Service Worker (0.39.2).
  * @see https://github.com/mswjs/msw
  * - Please do NOT modify this file.
  * - Please do NOT serve this file on production.
diff --git a/src/App.tsx b/src/App.tsx
index 682e36c..d2b29e2 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -77,7 +77,6 @@ function App() {
   }, []);
 
 
-
   return <div id="app" className='w-full'>
     <Helmet>
       <title >makers.bolt.fun</title>
diff --git a/src/Components/Inputs/FilesInput/DropInput.jsx b/src/Components/Inputs/FilesInput/DropInput.jsx
deleted file mode 100644
index 6a2b73c..0000000
--- a/src/Components/Inputs/FilesInput/DropInput.jsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import { useToggle } from "@react-hookz/web";
-import React from "react";
-import { FileDrop } from "react-file-drop";
-
-export default function DropInput({
-  value: files,
-  onChange,
-  emptyContent,
-  draggingContent,
-  hasFilesContent,
-  height,
-  multiple = false,
-  allowedType = "*",
-  classes = {
-    base: "",
-    idle: "",
-    dragging: "",
-  },
-}) {
-  const [isDragging, toggleDrag] = useToggle(false);
-  const fileInputRef = React.useRef(null);
-
-  const onAddFiles = (_files) => {
-    onChange(_files);
-    // do something with your files...
-  };
-
-  const uploadClick = () => {
-    fileInputRef.current.click();
-  };
-
-  const status = isDragging ? "dragging" : files ? "has-files" : "empty";
-
-  return (
-    <div
-      style={{
-        height: height + "px",
-      }}
-    >
-      <FileDrop
-        onDrop={(files) => onAddFiles(files)}
-        onTargetClick={uploadClick}
-        onFrameDragEnter={() => toggleDrag(true)}
-        onFrameDragLeave={() => toggleDrag(false)}
-        onFrameDrop={() => toggleDrag(false)}
-        className={`h-full cursor-pointer`}
-        targetClassName={`h-full ${classes.base} ${
-          status === "empty" && classes.idle
-        }`}
-        draggingOverFrameClassName={`${classes.dragging}`}
-      >
-        {status === "dragging" && draggingContent}
-        {status === "empty" && emptyContent}
-        {status === "has-files" && hasFilesContent}
-      </FileDrop>
-      <input
-        onChange={(e) => onAddFiles(e.target.files)}
-        ref={fileInputRef}
-        type="file"
-        className="hidden"
-        multiple={multiple}
-        accept={allowedType}
-      />
-    </div>
-  );
-}
diff --git a/src/Components/Inputs/FilesInput/FileInput.stories.tsx b/src/Components/Inputs/FilesInput/FileInput.stories.tsx
deleted file mode 100644
index 5b02efa..0000000
--- a/src/Components/Inputs/FilesInput/FileInput.stories.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { BsImages } from 'react-icons/bs';
-import Button from 'src/Components/Button/Button';
-
-import FilesInput from './FilesInput';
-import FileDropInput from './FilesDropInput';
-
-export default {
-    title: 'Shared/Inputs/Files Input',
-    component: FilesInput,
-
-} as ComponentMeta<typeof FilesInput>;
-
-const Template: ComponentStory<typeof FilesInput> = (args) => <FilesInput {...args} />
-
-
-export const DefaultButton = Template.bind({});
-DefaultButton.args = {
-}
-
-export const CustomizedButton = Template.bind({});
-CustomizedButton.args = {
-    multiple: true,
-    uploadBtn: <Button color='primary'><span className="align-middle">Drop Images</span> <BsImages className='ml-12 scale-125' /></Button>
-}
-
-const DropTemplate: ComponentStory<typeof FileDropInput> = (args) => <div className="max-w-[500px]"><FileDropInput {...args as any} /></div>
-export const DropZoneInput = DropTemplate.bind({});
-DropZoneInput.args = {
-    onChange: console.log,
-}
\ No newline at end of file
diff --git a/src/Components/Inputs/FilesInput/FileThumbnail.tsx b/src/Components/Inputs/FilesInput/FileThumbnail.tsx
deleted file mode 100644
index b03fb5b..0000000
--- a/src/Components/Inputs/FilesInput/FileThumbnail.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import { useMemo } from "react";
-import { MdClose } from "react-icons/md";
-import IconButton from "src/Components/IconButton/IconButton";
-
-interface Props {
-    file: File | string,
-    onRemove?: () => void
-}
-
-function getFileType(file: File | string) {
-    if (typeof file === 'string') {
-        if (/^http[^?]*.(jpg|jpeg|gif|png|tiff|bmp)(\?(.*))?$/gmi.test(file))
-            return 'image'
-        if (/\.(pdf|doc|docx)$/.test(file))
-            return 'document';
-
-        return 'unknown'
-    }
-    else {
-        if (file['type'].split('/')[0] === 'image')
-            return 'image'
-
-        return 'unknown'
-    }
-}
-
-type ThumbnailFile = {
-    name: string;
-    src: string;
-    type: ReturnType<typeof getFileType>
-}
-
-function processFile(file: Props['file']): ThumbnailFile {
-
-    const fileType = getFileType(file);
-
-    if (typeof file === 'string') return { name: file, src: file, type: fileType };
-
-    return {
-        name: file.name,
-        src: URL.createObjectURL(file),
-        type: fileType
-    };
-
-}
-
-
-export default function FileThumbnail({ file: f, onRemove }: Props) {
-
-    const file = useMemo(() => processFile(f), [f])
-
-    return (
-        <div className="bg-gray-100 rounded-8 p-12 shrink-0 flex gap-4 overflow-hidden">
-            <div className="w-[100px]">
-                <p className="text-body6 overflow-hidden overflow-ellipsis whitespace-nowrap">
-                    {file.name}
-                </p>
-                <a
-                    href={file.src}
-                    target='_blank'
-                    rel="noreferrer"
-                >
-                    {
-                        file.type === 'image' && <img src={file.src} alt={file.name} className="p-4 w-3/4 mx-auto max-h-full object-contain" />
-                    }
-                </a>
-            </div>
-            <div className="w-32 shrink-0 self-start" >
-                <IconButton size="sm" className="hover:bg-gray-500" onClick={onRemove}>
-                    <MdClose />
-                </IconButton>
-            </div>
-        </div>
-    )
-}
diff --git a/src/Components/Inputs/FilesInput/FilesDropInput.tsx b/src/Components/Inputs/FilesInput/FilesDropInput.tsx
deleted file mode 100644
index 6d96622..0000000
--- a/src/Components/Inputs/FilesInput/FilesDropInput.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import { FaImage } from "react-icons/fa";
-import { UnionToObjectKeys } from "src/utils/types/utils";
-import DropInput from "./DropInput";
-
-
-type Props = {
-    height?: number
-    multiple?: boolean;
-    value?: File[] | string[] | string;
-    max?: number;
-    onBlur?: () => void;
-    onChange?: (files: (File | string)[] | null) => void
-    uploadBtn?: JSX.Element
-    uploadText?: string;
-    allowedType?: 'images';
-    classes?: Partial<{
-        base: string,
-        idle: string,
-        dragging: string,
-        hasFiles: string
-    }>
-}
-
-const fileAccept: UnionToObjectKeys<Props, 'allowedType'> = {
-    images: ".png, .jpg, .jpeg"
-} as const;
-
-const fileUrlToObject = async (url: string, fileName: string = 'filename') => {
-    const res = await fetch(url);
-    const contentType = res.headers.get('content-type') as string;
-    const blob = await res.blob()
-    const file = new File([blob], fileName, { contentType } as any)
-    return file
-}
-
-export default function FilesInput({
-    height = 200,
-    multiple,
-    value,
-    max = 3,
-    onBlur,
-    onChange,
-    allowedType = 'images',
-    classes,
-    ...props
-}: Props) {
-
-
-    const baseClasses = classes?.base ?? 'p-32 rounded-8 text-center flex flex-col justify-center items-center'
-    const idleClasses = classes?.idle ?? 'bg-primary-50 hover:bg-primary-25 border border-dashed border-primary-500 text-gray-800'
-    const draggingClasses = classes?.dragging ?? 'bg-primary-500 text-white'
-
-    return (
-        <DropInput
-            height={height}
-            emptyContent={defaultEmptyContent}
-            draggingContent={defaultDraggingContent}
-            hasFilesContent={defaultHasFilesContent}
-            value={value}
-            onChange={onChange}
-            multiple={multiple}
-            allowedType={fileAccept[allowedType]}
-            classes={{
-                base: baseClasses,
-                idle: idleClasses,
-                dragging: draggingClasses
-            }}
-        />
-    )
-}
-
-const defaultEmptyContent = (
-    <>
-        <div>
-            <FaImage className="scale-150 mr-8 text-gray-400" />{" "}
-            <span className="align-middle">Drop your files here</span>
-        </div>
-        <p className="mt-4">
-            or <button className="hover:underline font-bold">Click to Upload</button>{" "}
-        </p>
-    </>
-);
-
-const defaultDraggingContent = <p className="font-bold text-body2">Drop your files here ⬇⬇⬇</p>;
-
-const defaultHasFilesContent = (
-    <p className="font-bolder">Files Uploaded Successfully!!</p>
-);
\ No newline at end of file
diff --git a/src/Components/Inputs/FilesInput/FilesInput.tsx b/src/Components/Inputs/FilesInput/FilesInput.tsx
deleted file mode 100644
index 85e6cdb..0000000
--- a/src/Components/Inputs/FilesInput/FilesInput.tsx
+++ /dev/null
@@ -1,136 +0,0 @@
-import { createAction } from "@reduxjs/toolkit";
-import React, { ChangeEvent, useCallback, useRef } from "react"
-import { BsUpload } from "react-icons/bs";
-import { FaImage } from "react-icons/fa";
-import Button from "src/Components/Button/Button"
-import { openModal } from "src/redux/features/modals.slice";
-import { useAppDispatch } from "src/utils/hooks";
-import { useReduxEffect } from "src/utils/hooks/useReduxEffect";
-import { UnionToObjectKeys } from "src/utils/types/utils";
-import FilesThumbnails from "./FilesThumbnails";
-
-
-type Props = {
-    multiple?: boolean;
-    value?: File[] | string[] | string;
-    max?: number;
-    onBlur?: () => void;
-    onChange?: (files: (File | string)[] | null) => void
-    uploadBtn?: JSX.Element
-    uploadText?: string;
-    allowedType?: 'images';
-}
-
-const fileAccept: UnionToObjectKeys<Props, 'allowedType'> = {
-    images: ".png, .jpg, .jpeg"
-} as const;
-
-const fileUrlToObject = async (url: string, fileName: string = 'filename') => {
-    const res = await fetch(url);
-    const contentType = res.headers.get('content-type') as string;
-    const blob = await res.blob()
-    const file = new File([blob], fileName, { contentType } as any)
-    return file
-}
-
-const INSERT_IMAGE_ACTION = createAction<{ src: string, alt?: string }>('COVER_IMAGE_INSERTED')({ src: '', alt: "" })
-
-const FilesInput = React.forwardRef<any, Props>(({
-    multiple,
-    value,
-    max = 3,
-    onBlur,
-    onChange,
-    allowedType = 'images',
-    uploadText = 'Upload files',
-    ...props
-}, ref) => {
-
-
-    const dispatch = useAppDispatch();
-
-    const handleClick = () => {
-        // ref.current.click();
-        dispatch(openModal({
-            Modal: "InsertImageModal",
-            props: {
-                callbackAction: {
-                    type: INSERT_IMAGE_ACTION.type,
-                    payload: {
-                        src: "",
-                        alt: ""
-                    }
-                }
-            }
-        }))
-    }
-
-    const onInsertImgUrl = useCallback(({ payload: { src, alt } }: typeof INSERT_IMAGE_ACTION) => {
-        if (typeof value === 'string')
-            onChange?.([value, src]);
-        else
-            onChange?.([...(value ?? []), src]);
-    }, [onChange, value])
-
-    useReduxEffect(onInsertImgUrl, INSERT_IMAGE_ACTION.type)
-
-    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-        const files = e.target.files && Array.from(e.target.files).slice(0, max);
-        if (typeof value === 'string')
-            onChange?.([value, ...(files ?? [])]);
-        else
-            onChange?.([...(value ?? []), ...(files ?? [])]);
-    }
-
-    const handleRemove = async (idx: number) => {
-        if (!value) return onChange?.([]);
-        if (typeof value === 'string')
-            onChange?.([]);
-        else {
-            let files = [...value]
-            files.splice(idx, 1);
-
-            //change all files urls to file objects
-            const filesConverted = await Promise.all(files.map(async file => {
-                if (typeof file === 'string') return await fileUrlToObject(file, "")
-                else return file;
-            }))
-
-            onChange?.(filesConverted);
-        }
-    }
-
-    const canUploadMore = multiple ?
-        !value || (value && value.length < max)
-        :
-        !value || value.length === 0
-
-
-    const uploadBtn = props.uploadBtn ?
-        React.cloneElement(props.uploadBtn, { onClick: handleClick })
-        :
-        <Button type='button' onClick={handleClick} ><span className="align-middle">{uploadText}</span> <FaImage className="ml-12 scale-125" /></Button>
-
-    return (
-        <>
-            <FilesThumbnails files={value} onRemove={handleRemove} />
-            {
-                canUploadMore &&
-                <>
-                    {uploadBtn}
-                    <input
-                        ref={ref}
-                        type="file"
-                        onBlur={onBlur}
-                        style={{ display: 'none' }}
-                        multiple={multiple}
-                        accept={fileAccept[allowedType]}
-                        onChange={handleChange} />
-                </>
-            }
-        </>
-    )
-})
-
-
-export default FilesInput;
\ No newline at end of file
diff --git a/src/Components/Inputs/FilesInput/FilesThumbnails.tsx b/src/Components/Inputs/FilesInput/FilesThumbnails.tsx
deleted file mode 100644
index 362528e..0000000
--- a/src/Components/Inputs/FilesInput/FilesThumbnails.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { useMemo } from 'react'
-import FileThumbnail from './FileThumbnail';
-
-interface Props {
-    files?: (File | string)[] | string;
-    onRemove?: (idx: number) => void
-}
-
-function processFiles(files: Props['files']) {
-
-    if (!files) return [];
-    if (typeof files === 'string') return [files];
-    return files;
-}
-
-export default function FilesThumbnails({ files, onRemove }: Props) {
-    const filesConverted = useMemo(() => processFiles(files), [files])
-
-    return (
-        <div className="flex gap-12 mb-12">
-            {
-                filesConverted.map((file, idx) => <FileThumbnail
-                    key={idx}
-                    file={file}
-                    onRemove={() => onRemove?.(idx)} />)
-            }
-        </div>
-    )
-}
diff --git a/src/Components/Inputs/FilesInputs/AvatarInput/AvatarInput.stories.tsx b/src/Components/Inputs/FilesInputs/AvatarInput/AvatarInput.stories.tsx
new file mode 100644
index 0000000..73f451e
--- /dev/null
+++ b/src/Components/Inputs/FilesInputs/AvatarInput/AvatarInput.stories.tsx
@@ -0,0 +1,29 @@
+import React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import AvatarInput from './AvatarInput';
+import { WrapFormController } from 'src/utils/storybook/decorators';
+import { ImageType } from '../SingleImageUploadInput/SingleImageUploadInput';
+
+export default {
+    title: 'Shared/Inputs/Files Inputs/Avatar ',
+    component: AvatarInput,
+    decorators: [
+        WrapFormController<{ avatar: ImageType | null }>({
+            logValues: true,
+            name: "avatar",
+            defaultValues: {
+                avatar: null
+            }
+        })]
+} as ComponentMeta<typeof AvatarInput>;
+
+const Template: ComponentStory<typeof AvatarInput> = (args, context) => {
+
+    return <AvatarInput {...context.controller} {...args} />
+
+}
+
+
+export const Default = Template.bind({});
+Default.args = {
+} 
\ No newline at end of file
diff --git a/src/Components/Inputs/FilesInputs/AvatarInput/AvatarInput.tsx b/src/Components/Inputs/FilesInputs/AvatarInput/AvatarInput.tsx
new file mode 100644
index 0000000..e912eca
--- /dev/null
+++ b/src/Components/Inputs/FilesInputs/AvatarInput/AvatarInput.tsx
@@ -0,0 +1,105 @@
+import { motion } from 'framer-motion';
+import React, { ComponentProps, useRef } from 'react'
+import { AiOutlineCloudUpload } from 'react-icons/ai';
+import { CgArrowsExchangeV } from 'react-icons/cg';
+import { FiCamera } from 'react-icons/fi';
+import { IoMdClose } from 'react-icons/io';
+import { RotatingLines } from 'react-loader-spinner';
+import { Nullable } from 'remirror';
+import { useIsDraggingOnElement } from 'src/utils/hooks';
+import SingleImageUploadInput from '../SingleImageUploadInput/SingleImageUploadInput'
+
+type Value = ComponentProps<typeof SingleImageUploadInput>['value']
+
+interface Props {
+    width?: number;
+    isRemovable?: boolean
+    value: Value;
+    onChange: (new_value: Nullable<Value>) => void
+}
+
+export default function AvatarInput(props: Props) {
+
+    const dropAreaRef = useRef<HTMLDivElement>(null!)
+    const isDragging = useIsDraggingOnElement({ ref: dropAreaRef });
+
+    return (
+        <div
+            style={{
+                width: props.width ?? 120,
+            }}
+            ref={dropAreaRef}
+            className='aspect-square rounded-full outline outline-2 outline-gray-200 overflow-hidden cursor-pointer '
+        >
+            <SingleImageUploadInput
+                value={props.value}
+                onChange={props.onChange}
+                wrapperClass='rounded-full bg-white h-full'
+                render={({ img, isUploading, isDraggingOnWindow }) =>
+                    <div className="w-full h-full rounded-full relative group">
+                        {!img &&
+                            <div className='w-full h-full rounded-full bg-white hover:bg-gray-100 flex flex-col justify-center items-center'>
+                                <p className="text-center text-gray-400 text-body2 mb-8"><FiCamera /></p>
+                                <div className={`text-gray-400 text-center text-body5`}>
+                                    Add Image
+                                </div>
+                            </div>}
+                        {img &&
+                            <>
+                                <img src={img.url} className='w-full h-full object-cover rounded-full' alt="" />
+                                {!isUploading &&
+                                    <div className="flex flex-wrap gap-16 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 ">
+                                        <button type='button' className='py-8 px-12 rounded-full bg-black bg-opacity-70 opacity-0 group-hover:opacity-100 hover:bg-opacity-90 transition-opacity text-white text-body1'>
+                                            <CgArrowsExchangeV />
+                                        </button>
+                                        {props.isRemovable && <button type='button' className='py-8 px-12 rounded-full bg-black bg-opacity-70 opacity-0 group-hover:opacity-100 hover:bg-opacity-90 transition-opacity text-white text-body1' onClick={(e) => { e.stopPropagation(); props.onChange(null) }}>
+                                            <IoMdClose />
+                                        </button>}
+                                    </div>
+                                }
+                            </>}
+                        {isUploading &&
+                            <div
+                                className="absolute inset-0 bg-gray-400  bg-opacity-60 flex flex-col justify-center items-center text-white font-bold transition-transform"
+                            >
+                                <RotatingLines
+                                    strokeColor="#fff"
+                                    strokeWidth="3"
+                                    animationDuration="0.75"
+                                    width="48"
+                                    visible={true}
+                                />
+                            </div>
+                        }
+                        {isDraggingOnWindow &&
+                            <div
+                                className={
+                                    `absolute inset-0 ${isDragging ? 'bg-primary-600' : 'bg-primary-400'}  bg-opacity-80 flex flex-col justify-center items-center text-white font-bold transition-transform`
+                                }
+                            >
+
+                                <motion.div
+                                    initial={{ y: 0 }}
+                                    animate={
+                                        isDragging ? {
+                                            y: 5,
+                                            transition: {
+                                                duration: .4,
+                                                repeat: Infinity,
+                                                repeatType: 'mirror',
+                                            }
+                                        } : {
+                                            y: 0
+                                        }}
+                                    className='text-center text-body4'
+                                >
+                                    <AiOutlineCloudUpload className="scale-150 text-body2" />
+                                </motion.div>
+                            </div>
+                        }
+                    </div>}
+            />
+        </div>
+
+    )
+}
diff --git a/src/Components/Inputs/FilesInputs/CoverImageInput/CoverImageInput.stories.tsx b/src/Components/Inputs/FilesInputs/CoverImageInput/CoverImageInput.stories.tsx
new file mode 100644
index 0000000..9bedfe5
--- /dev/null
+++ b/src/Components/Inputs/FilesInputs/CoverImageInput/CoverImageInput.stories.tsx
@@ -0,0 +1,31 @@
+import React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { WrapFormController } from 'src/utils/storybook/decorators';
+import { ImageType } from '../SingleImageUploadInput/SingleImageUploadInput';
+import CoverImageInput from './CoverImageInput';
+
+export default {
+    title: 'Shared/Inputs/Files Inputs/Cover Image ',
+    component: CoverImageInput,
+    decorators: [
+        WrapFormController<{ thumbnail: ImageType | null }>({
+            logValues: true,
+            name: "thumbnail",
+            defaultValues: {
+                thumbnail: null
+            }
+        })]
+} as ComponentMeta<typeof CoverImageInput>;
+
+const Template: ComponentStory<typeof CoverImageInput> = (args, context) => {
+
+    return <div className="aspect-[5/2] md:aspect-[4/1] rounded-t-16 overflow-hidden">
+        <CoverImageInput {...context.controller} {...args} />
+    </div>
+
+}
+
+
+export const Default = Template.bind({});
+Default.args = {
+} 
\ No newline at end of file
diff --git a/src/Components/Inputs/FilesInputs/CoverImageInput/CoverImageInput.tsx b/src/Components/Inputs/FilesInputs/CoverImageInput/CoverImageInput.tsx
new file mode 100644
index 0000000..975366d
--- /dev/null
+++ b/src/Components/Inputs/FilesInputs/CoverImageInput/CoverImageInput.tsx
@@ -0,0 +1,103 @@
+import React, { ComponentProps, useEffect, useRef, useState } from 'react'
+import { FaImage } from 'react-icons/fa';
+import { CgArrowsExchangeV } from 'react-icons/cg';
+import { IoMdClose } from 'react-icons/io';
+import { RotatingLines } from 'react-loader-spinner';
+import { Nullable } from 'remirror';
+import SingleImageUploadInput from '../SingleImageUploadInput/SingleImageUploadInput'
+import { motion } from 'framer-motion';
+import { AiOutlineCloudUpload } from 'react-icons/ai';
+import { useIsDraggingOnElement } from 'src/utils/hooks';
+
+type Value = ComponentProps<typeof SingleImageUploadInput>['value']
+
+interface Props {
+    value: Value;
+    rounded?: string;
+    onChange: (new_value: Nullable<Value>) => void
+}
+
+export default function CoverImageInput(props: Props) {
+
+    const dropAreaRef = useRef<HTMLDivElement>(null!)
+    const isDragging = useIsDraggingOnElement({ ref: dropAreaRef });
+
+
+    return (
+        <div
+            className='overflow-hidden cursor-pointer w-full h-full'
+            ref={dropAreaRef}
+        >
+            <SingleImageUploadInput
+                value={props.value}
+                onChange={props.onChange}
+                wrapperClass='h-full'
+                render={({ img, isUploading, isDraggingOnWindow }) =>
+                    <div className="w-full h-full group relative ">
+                        {!img && <div className='w-full h-full flex flex-col justify-center items-center bg-gray-500 outline outline-2 outline-gray-200'>
+                            <p className="text-center text-gray-100 text-body1 md:text-h1 mb-8"><FaImage /></p>
+                            <div className={`text-gray-100 text-center text-body4`}>
+                                Drop a <span className="font-bold">COVER IMAGE</span> here or  <br />  <span className="text-blue-300 underline">Click to browse</span>
+                            </div>
+                        </div>}
+                        {img && <>
+                            <img src={img.url} className={`w-full h-full ${props.rounded ?? 'rounded-12'} object-cover`} alt="" />
+                            {!isUploading &&
+                                <div className="flex flex-wrap gap-16 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 ">
+
+                                    <button type='button' className='py-8 px-16 rounded-12 bg-black bg-opacity-70 opacity-0 group-hover:opacity-100 hover:bg-opacity-90 transition-opacity text-white text-h1'>
+                                        <CgArrowsExchangeV />
+                                    </button>
+                                    <button type='button' className='py-8 px-16 rounded-12 bg-black bg-opacity-70 opacity-0 group-hover:opacity-100 hover:bg-opacity-90 transition-opacity text-white text-h1' onClick={(e) => { e.stopPropagation(); props.onChange(null) }}>
+                                        <IoMdClose />
+                                    </button>
+                                </div>
+                            }
+                        </>}
+                        {isUploading &&
+                            <div
+                                className="absolute inset-0 bg-gray-400  bg-opacity-60 flex flex-col justify-center items-center text-white font-bold transition-transform"
+                            >
+                                <RotatingLines
+                                    strokeColor="#fff"
+                                    strokeWidth="3"
+                                    animationDuration="0.75"
+                                    width="48"
+                                    visible={true}
+                                />
+                            </div>
+                        }
+                        {isDraggingOnWindow &&
+                            <div
+                                className={
+                                    `absolute inset-0 ${isDragging ? 'bg-primary-600' : 'bg-primary-400'} bg-opacity-80 flex flex-col justify-center items-center text-white font-bold transition-transform`
+                                }
+                            >
+
+                                <motion.div
+                                    initial={{ y: 0 }}
+                                    animate={
+                                        isDragging ? {
+                                            y: 5,
+                                            transition: {
+                                                duration: .4,
+                                                repeat: Infinity,
+                                                repeatType: 'mirror',
+                                            }
+                                        } : {
+                                            y: 0
+                                        }}
+                                    className='text-center text-body1'
+                                >
+                                    <AiOutlineCloudUpload className="scale-150 text-h1 mb-16" />
+                                    <br />
+                                    Drop here to upload
+                                </motion.div>
+                            </div>
+                        }
+                    </div>}
+            />
+        </div>
+
+    )
+}
diff --git a/src/Components/Inputs/FilesInputs/FileUploadInput/FileUploadInput.stories.tsx b/src/Components/Inputs/FilesInputs/FileUploadInput/FileUploadInput.stories.tsx
new file mode 100644
index 0000000..2e5b4dd
--- /dev/null
+++ b/src/Components/Inputs/FilesInputs/FileUploadInput/FileUploadInput.stories.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import FileUploadInput from './FileUploadInput';
+
+export default {
+    title: 'Shared/Inputs/Files Inputs/Basic',
+    component: FileUploadInput,
+
+} as ComponentMeta<typeof FileUploadInput>;
+
+const Template: ComponentStory<typeof FileUploadInput> = (args) => <FileUploadInput {...args} />
+
+
+export const DefaultButton = Template.bind({});
+DefaultButton.args = {
+}
\ No newline at end of file
diff --git a/src/Components/Inputs/FilesInputs/FileUploadInput/FileUploadInput.tsx b/src/Components/Inputs/FilesInputs/FileUploadInput/FileUploadInput.tsx
new file mode 100644
index 0000000..ebfef3c
--- /dev/null
+++ b/src/Components/Inputs/FilesInputs/FileUploadInput/FileUploadInput.tsx
@@ -0,0 +1,141 @@
+import Uploady, { useUploady, useRequestPreSend, UPLOADER_EVENTS, } from "@rpldy/uploady";
+import { asUploadButton } from "@rpldy/upload-button";
+import Button from "src/Components/Button/Button";
+import { fetchUploadUrl } from "../fetch-upload-img-url";
+import ImagePreviews from "./ImagePreviews";
+import { FaImage } from "react-icons/fa";
+import UploadDropZone from "@rpldy/upload-drop-zone";
+import { forwardRef, useCallback } from "react";
+import styles from './styles.module.scss'
+import { MdFileUpload } from "react-icons/md";
+import { AiOutlineCloudUpload } from "react-icons/ai";
+import { motion } from "framer-motion";
+
+interface Props {
+    url: string;
+}
+
+const UploadBtn = asUploadButton((props: any) => {
+
+    useRequestPreSend(async (data) => {
+
+        const filename = data.items?.[0].file.name ?? ''
+
+        const url = await fetchUploadUrl({ filename });
+        return {
+            options: {
+                destination: {
+                    url
+                }
+            }
+        }
+    })
+
+    // const handleClick = async () => {
+    //     // Make a request to get the url
+    //     try {
+    //         var bodyFormData = new FormData();
+    //         bodyFormData.append('requireSignedURLs', "false");
+    //         const res = await axios({
+    //             url: 'https://cors-anywhere.herokuapp.com/https://api.cloudflare.com/client/v4/accounts/783da4f06e5fdb9012c0632959a6f5b3/images/v2/direct_upload',
+    //             method: 'POST',
+    //             data: bodyFormData,
+    //             headers: {
+    //                 "Authorization": "Bearer Xx2-CdsTliYkq6Ayz-1GX4CZubdQVxMwOSDbajP0",
+    //             }
+    //         })
+    //         uploady.upload(res.data.result.uploadUrl, {
+    //             destination: res.data.result.uploadUrl
+    //         })
+    //     } catch (error) {
+    //         console.log(error);
+
+    //     }
+
+
+    //     // make the request with the files
+    //     // uploady.upload()
+    // }
+
+    return <Button {...props} color='primary'>
+        Upload Image <FaImage className="ml-8 scale-125 align-middle" />
+    </Button>
+});
+
+
+const DropZone = forwardRef<any, any>((props, ref) => {
+    const { onClick, ...buttonProps } = props;
+
+    useRequestPreSend(async (data) => {
+
+        const filename = data.items?.[0].file.name ?? ''
+
+        const url = await fetchUploadUrl({ filename });
+        return {
+            options: {
+                destination: {
+                    url
+                }
+            }
+        }
+    })
+
+    const onZoneClick = useCallback(
+        (e: any) => {
+            if (onClick) {
+                onClick(e);
+            }
+        },
+        [onClick]
+    );
+
+    return <UploadDropZone
+        {...buttonProps}
+        ref={ref}
+        onDragOverClassName={styles.active}
+        extraProps={{ onClick: onZoneClick }}
+        className={`${styles.zone} border-2 w-full min-h-[200px] max-w-[600px] rounded-16 flex flex-col justify-center items-center text text-body3 border-dashed`}
+    >
+        <div className={`${styles.idle_content} text-gray-600`}>
+            Drop your <span className="font-bold uppercase">IMAGES</span> here or <button className="font-bold text-blue-400 underline">Click to browse</button>
+        </div>
+
+        <motion.div
+            animate={{
+                y: 5,
+            }}
+            transition={{
+                duration: .5,
+                repeat: Infinity,
+                repeatType: 'mirror'
+            }}
+            className={`${styles.active_content} text-white font-bold`}>
+            Drop it to upload <AiOutlineCloudUpload className="scale-150 text-body1 ml-16" />
+        </motion.div>
+    </UploadDropZone>
+})
+
+const DropZoneButton = asUploadButton(DropZone);
+
+
+export default function FileUploadInput(props: Props) {
+    return (
+        <Uploady
+            multiple={true}
+            inputFieldName='file'
+            grouped={false}
+            listeners={{
+                [UPLOADER_EVENTS.ITEM_FINISH]: (item) => {
+                    const { id, filename, variants } = item?.uploadResponse?.data?.result ?? {}
+                    if (id) {
+                        console.log(id, filename, variants);
+                    }
+                }
+            }}
+        >
+            <DropZoneButton />
+            {/* <UploadBtn /> */}
+            <ImagePreviews />
+        </Uploady>
+    )
+}
diff --git a/src/Components/Inputs/FilesInputs/FileUploadInput/ImagePreviews.tsx b/src/Components/Inputs/FilesInputs/FileUploadInput/ImagePreviews.tsx
new file mode 100644
index 0000000..e28b375
--- /dev/null
+++ b/src/Components/Inputs/FilesInputs/FileUploadInput/ImagePreviews.tsx
@@ -0,0 +1,92 @@
+import UploadPreview, { PreviewComponentProps, PreviewMethods } from '@rpldy/upload-preview'
+import { useAbortItem, useItemAbortListener, useItemCancelListener, useItemErrorListener, useItemProgressListener } from '@rpldy/uploady';
+import React, { useState } from 'react'
+import { RotatingLines } from 'react-loader-spinner';
+
+export default function ImagePreviews() {
+    return (
+        <div className="grid grid-cols-[repeat(auto-fill,minmax(200px,1fr))] gap-16 mt-24">
+            <UploadPreview PreviewComponent={CustomImagePreview} rememberPreviousBatches />
+        </div>
+    )
+}
+
+function CustomImagePreview({ id, url }: PreviewComponentProps) {
+
+    const [progress, setProgress] = useState<number>(0);
+    const [itemState, setItemState] = useState<string>(STATES.PROGRESS);
+
+
+    useItemProgressListener(item => {
+        if (item.completed > progress) {
+            setProgress(() => item.completed);
+
+            if (item.completed === 100) {
+                setItemState(STATES.DONE)
+            } else {
+                setItemState(STATES.PROGRESS)
+            }
+        }
+    }, id);
+
+
+
+    useItemAbortListener(item => {
+        setItemState(STATES.CANCELLED);
+    }, id);
+
+
+    useItemCancelListener(item => {
+        setItemState(STATES.CANCELLED);
+    }, id);
+
+    useItemErrorListener(item => {
+        setItemState(STATES.ERROR);
+    }, id);
+
+    return <div className="aspect-video relative rounded-12 md:rounded-16 overflow-hidden border-2 border-gray-200">
+        <img src={url}
+            className={`
+            w-full h-full object-cover
+            ${itemState === STATES.PROGRESS && 'opacity-50'} 
+            `}
+            alt="" />
+        <div className="text-body5 absolute inset-0"
+        >
+        </div>
+        {itemState === STATES.PROGRESS &&
+            <div
+                className="absolute inset-0 bg-gray-400  bg-opacity-60 flex flex-col justify-center items-center text-white font-bold transition-transform"
+            >
+                <RotatingLines
+                    strokeColor="#fff"
+                    strokeWidth="3"
+                    animationDuration="0.75"
+                    width="48"
+                    visible={true}
+                />
+            </div>}
+        {itemState === STATES.ERROR &&
+            <div className="absolute inset-0 bg-red-400  bg-opacity-60 flex flex-col justify-center items-center text-white font-bold">
+                Failed...
+            </div>}
+        {itemState === STATES.CANCELLED &&
+            <div className="absolute inset-0 bg-red-400  bg-opacity-60 flex flex-col justify-center items-center text-white font-bold">
+                Cancelled
+            </div>}
+    </div>;
+};
+
+const STATES = {
+    PROGRESS: "PROGRESS",
+    DONE: "DONE",
+    CANCELLED: "CANCELLED",
+    ERROR: "ERROR"
+};
+
+const STATE_COLORS = {
+    [STATES.PROGRESS]: "#f4e4a4",
+    [STATES.DONE]: "#a5f7b3",
+    [STATES.CANCELLED]: "#f7cdcd",
+    [STATES.ERROR]: "#ee4c4c"
+};
\ No newline at end of file
diff --git a/src/Components/Inputs/FilesInputs/FileUploadInput/styles.module.scss b/src/Components/Inputs/FilesInputs/FileUploadInput/styles.module.scss
new file mode 100644
index 0000000..217ca39
--- /dev/null
+++ b/src/Components/Inputs/FilesInputs/FileUploadInput/styles.module.scss
@@ -0,0 +1,25 @@
+.zone {
+  background-color: #f2f4f7;
+  border-color: #e4e7ec;
+
+  .active_content {
+    display: none;
+  }
+
+  .idle_content {
+    display: block;
+  }
+
+  &.active {
+    background-color: #b3a0ff;
+    border-color: #9e88ff;
+
+    .active_content {
+      display: block;
+    }
+
+    .idle_content {
+      display: none;
+    }
+  }
+}
diff --git a/src/Components/Inputs/FilesInputs/ScreenshotsInput/ImagePreviews.tsx b/src/Components/Inputs/FilesInputs/ScreenshotsInput/ImagePreviews.tsx
new file mode 100644
index 0000000..74d4d64
--- /dev/null
+++ b/src/Components/Inputs/FilesInputs/ScreenshotsInput/ImagePreviews.tsx
@@ -0,0 +1,97 @@
+import UploadPreview, { PreviewComponentProps, PreviewMethods } from '@rpldy/upload-preview'
+import { useAbortItem, useItemAbortListener, useItemCancelListener, useItemErrorListener, useItemProgressListener } from '@rpldy/uploady';
+import { useState } from 'react'
+import ScreenShotsThumbnail from './ScreenshotThumbnail'
+
+export default function ImagePreviews() {
+    return (
+        <UploadPreview PreviewComponent={CustomImagePreview} rememberPreviousBatches />
+    )
+}
+
+function CustomImagePreview({ id, url }: PreviewComponentProps) {
+
+    const [progress, setProgress] = useState<number>(0);
+    const [itemState, setItemState] = useState<string>(STATES.PROGRESS);
+
+    const abortItem = useAbortItem();
+
+
+    useItemProgressListener(item => {
+        if (item.completed > progress) {
+            setProgress(() => item.completed);
+
+            if (item.completed === 100) {
+                setItemState(STATES.DONE)
+            } else {
+                setItemState(STATES.PROGRESS)
+            }
+        }
+    }, id);
+
+
+
+    useItemAbortListener(item => {
+        setItemState(STATES.CANCELLED);
+    }, id);
+
+
+    useItemCancelListener(item => {
+        setItemState(STATES.CANCELLED);
+    }, id);
+
+    useItemErrorListener(item => {
+        setItemState(STATES.ERROR);
+    }, id);
+
+    if (itemState === STATES.DONE || itemState === STATES.CANCELLED)
+        return null
+
+    return <ScreenShotsThumbnail
+        url={url}
+        isLoading={itemState === STATES.PROGRESS}
+        isError={itemState === STATES.ERROR}
+        onCancel={() => {
+            abortItem(id)
+        }}
+    />
+
+    // return <div className="aspect-video relative rounded-12 md:rounded-16 overflow-hidden border-2 border-gray-200">
+    //     <img src={url}
+    //         className={`
+    //         w-full h-full object-cover
+    //         ${itemState === STATES.PROGRESS && 'opacity-50'} 
+    //         `}
+    //         alt="" />
+    //     <div className="text-body5 absolute inset-0"
+    //     >
+    //     </div>
+    //     {itemState === STATES.PROGRESS &&
+    //         <div
+    //             className="absolute inset-0 bg-gray-400  bg-opacity-60 flex flex-col justify-center items-center text-white font-bold transition-transform"
+    //         >
+    //             <RotatingLines
+    //                 strokeColor="#fff"
+    //                 strokeWidth="3"
+    //                 animationDuration="0.75"
+    //                 width="48"
+    //                 visible={true}
+    //             />
+    //         </div>}
+    //     {itemState === STATES.ERROR &&
+    //         <div className="absolute inset-0 bg-red-400  bg-opacity-60 flex flex-col justify-center items-center text-white font-bold">
+    //             Failed...
+    //         </div>}
+    //     {itemState === STATES.CANCELLED &&
+    //         <div className="absolute inset-0 bg-red-400  bg-opacity-60 flex flex-col justify-center items-center text-white font-bold">
+    //             Cancelled
+    //         </div>}
+    // </div>;
+};
+
+const STATES = {
+    PROGRESS: "PROGRESS",
+    DONE: "DONE",
+    CANCELLED: "CANCELLED",
+    ERROR: "ERROR"
+};
diff --git a/src/Components/Inputs/FilesInputs/ScreenshotsInput/ScreenshotThumbnail.tsx b/src/Components/Inputs/FilesInputs/ScreenshotsInput/ScreenshotThumbnail.tsx
new file mode 100644
index 0000000..0003c43
--- /dev/null
+++ b/src/Components/Inputs/FilesInputs/ScreenshotsInput/ScreenshotThumbnail.tsx
@@ -0,0 +1,52 @@
+import React from 'react'
+import { FaTimes } from 'react-icons/fa';
+import { RotatingLines } from 'react-loader-spinner';
+
+interface Props {
+    url?: string,
+    isLoading?: boolean;
+    isError?: boolean;
+    onCancel?: () => void;
+
+}
+
+export default function ScreenshotThumbnail({ url, isLoading, isError, onCancel }: Props) {
+
+    const isEmpty = !url;
+
+    return (
+        <div className={`
+        aspect-video relative rounded-16 md:rounded-14 overflow-hidden border-2 border-gray-200
+        ${isEmpty && "border-dashed"}
+        `}>
+            {!isEmpty && <img src={url}
+                className={`
+            w-full h-full object-cover
+            ${isLoading && 'opacity-50'} 
+            `}
+                alt="" />}
+            <div className="text-body5 absolute inset-0"
+            >
+            </div>
+            {isLoading &&
+                <div
+                    className="absolute inset-0 bg-gray-400  bg-opacity-60 flex flex-col justify-center items-center text-white font-bold transition-transform"
+                >
+                    <RotatingLines
+                        strokeColor="#fff"
+                        strokeWidth="3"
+                        animationDuration="0.75"
+                        width="48"
+                        visible={true}
+                    />
+                </div>}
+            {isError &&
+                <div className="absolute inset-0 bg-red-400  bg-opacity-60 flex flex-col justify-center items-center text-white font-bold">
+                    Failed...
+                </div>}
+            {!isEmpty &&
+                <button className="absolute bg-gray-900 hover:bg-opacity-100 bg-opacity-60 text-white rounded-full w-32 h-32 top-8 right-8" onClick={() => onCancel?.()}><FaTimes /></button>
+            }
+        </div>
+    )
+}
diff --git a/src/Components/Inputs/FilesInputs/ScreenshotsInput/ScreenshotsInput.stories.tsx b/src/Components/Inputs/FilesInputs/ScreenshotsInput/ScreenshotsInput.stories.tsx
new file mode 100644
index 0000000..1575707
--- /dev/null
+++ b/src/Components/Inputs/FilesInputs/ScreenshotsInput/ScreenshotsInput.stories.tsx
@@ -0,0 +1,84 @@
+import React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import ScreenshotsInput, { ScreenshotType } from './ScreenshotsInput';
+import { WrapForm, WrapFormController } from 'src/utils/storybook/decorators';
+
+export default {
+    title: 'Shared/Inputs/Files Inputs/Screenshots',
+    component: ScreenshotsInput,
+    decorators: [
+        WrapFormController<{ screenshots: Array<ScreenshotType> }>({
+            logValues: true,
+            name: "screenshots",
+            defaultValues: {
+                screenshots: []
+            }
+        })]
+} as ComponentMeta<typeof ScreenshotsInput>;
+
+const Template: ComponentStory<typeof ScreenshotsInput> = (args, context) => {
+
+    return <ScreenshotsInput {...context.controller} {...args} />
+
+}
+
+
+export const Empty = Template.bind({});
+Empty.args = {
+}
+
+export const WithValues = Template.bind({});
+WithValues.decorators = [
+    WrapFormController<{ screenshots: Array<ScreenshotType> }>({
+        logValues: true,
+        name: "screenshots",
+        defaultValues: {
+            screenshots: [{
+                id: '123',
+                name: 'tree',
+                url: "https://picsum.photos/id/1021/800/800.jpg"
+            },
+            {
+                id: '555',
+                name: 'whatever',
+                url: "https://picsum.photos/id/600/800/800.jpg"
+            },]
+        }
+    }) as any
+];
+WithValues.args = {
+}
+
+export const Full = Template.bind({});
+Full.decorators = [
+    WrapFormController<{ screenshots: Array<ScreenshotType> }>({
+        logValues: true,
+        name: "screenshots",
+        defaultValues: {
+            screenshots: [
+                {
+                    id: '123',
+                    name: 'tree',
+                    url: "https://picsum.photos/id/1021/800/800.jpg"
+                },
+                {
+                    id: '555',
+                    name: 'whatever',
+                    url: "https://picsum.photos/id/600/800/800.jpg"
+                },
+                {
+                    id: '562',
+                    name: 'Moon',
+                    url: "https://picsum.photos/id/32/800/800.jpg"
+                },
+                {
+                    id: '342',
+                    name: 'Sun',
+                    url: "https://picsum.photos/id/523/800/800.jpg"
+                },
+            ]
+        }
+    }) as any
+];
+Full.args = {
+}
\ No newline at end of file
diff --git a/src/Components/Inputs/FilesInputs/ScreenshotsInput/ScreenshotsInput.tsx b/src/Components/Inputs/FilesInputs/ScreenshotsInput/ScreenshotsInput.tsx
new file mode 100644
index 0000000..b5bf6c0
--- /dev/null
+++ b/src/Components/Inputs/FilesInputs/ScreenshotsInput/ScreenshotsInput.tsx
@@ -0,0 +1,151 @@
+import Uploady, { useRequestPreSend, UPLOADER_EVENTS } from "@rpldy/uploady";
+import { asUploadButton } from "@rpldy/upload-button";
+// import { fetchUploadUrl } from "./fetch-upload-img-url";
+import ImagePreviews from "./ImagePreviews";
+import UploadDropZone from "@rpldy/upload-drop-zone";
+import { forwardRef, useCallback, useState } from "react";
+import styles from './styles.module.scss'
+import { AiOutlineCloudUpload } from "react-icons/ai";
+import { motion } from "framer-motion";
+import { getMockSenderEnhancer } from "@rpldy/mock-sender";
+import ScreenshotThumbnail from "./ScreenshotThumbnail";
+import { FiCamera } from "react-icons/fi";
+import { Control, Path, useController } from "react-hook-form";
+
+
+
+const mockSenderEnhancer = getMockSenderEnhancer({
+    delay: 1500,
+});
+
+const MAX_UPLOAD_COUNT = 4 as const;
+
+export interface ScreenshotType {
+    id: string,
+    name: string,
+    url: string;
+}
+
+interface Props {
+    value: ScreenshotType[],
+    onChange: (new_value: ScreenshotType[]) => void
+}
+
+
+export default function ScreenshotsInput(props: Props) {
+
+    const { value: uploadedFiles, onChange } = props;
+
+
+    const [uploadingCount, setUploadingCount] = useState(0)
+
+
+    const canUploadMore = uploadingCount + uploadedFiles.length < MAX_UPLOAD_COUNT;
+    const placeholdersCount = (MAX_UPLOAD_COUNT - (uploadingCount + uploadedFiles.length + 1));
+
+
+    return (
+        <Uploady
+            multiple={true}
+            inputFieldName='file'
+            grouped={false}
+            enhancer={mockSenderEnhancer}
+            listeners={{
+                [UPLOADER_EVENTS.BATCH_ADD]: (batch) => {
+                    setUploadingCount(v => v + batch.items.length)
+                },
+                [UPLOADER_EVENTS.ITEM_FINALIZE]: () => setUploadingCount(v => v - 1),
+                [UPLOADER_EVENTS.ITEM_FINISH]: (item) => {
+
+                    // Just for mocking purposes
+                    const dataUrl = URL.createObjectURL(item.file);
+
+                    const { id, filename, variants } = item?.uploadResponse?.data?.result ?? {
+                        id: Math.random().toString(),
+                        filename: item.file.name,
+                        variants: [
+                            "",
+                            dataUrl
+                        ]
+                    }
+                    if (id) {
+                        onChange([...uploadedFiles, { id, name: filename, url: variants[1] }].slice(-MAX_UPLOAD_COUNT))
+                    }
+                }
+            }}
+        >
+
+            <div className="grid grid-cols-[repeat(auto-fit,minmax(200px,1fr))] gap-16 mt-24">
+                {canUploadMore && <DropZoneButton />}
+                {uploadedFiles.map(f => <ScreenshotThumbnail
+                    key={f.id}
+                    url={f.url}
+                    onCancel={() => {
+                        onChange(uploadedFiles.filter(file => file.id !== f.id))
+                    }} />)}
+                <ImagePreviews />
+                {(placeholdersCount > 0) &&
+                    Array(placeholdersCount).fill(0).map((_, idx) => <ScreenshotThumbnail key={idx} />)}
+            </div>
+        </Uploady>
+    )
+}
+
+const DropZone = forwardRef<any, any>((props, ref) => {
+    const { onClick, ...buttonProps } = props;
+
+
+    useRequestPreSend(async (data) => {
+
+        const filename = data.items?.[0].file.name ?? ''
+
+        // const url = await fetchUploadUrl({ filename });
+        return {
+            options: {
+                destination: {
+                    url: "URL"
+                }
+            }
+        }
+    })
+
+    const onZoneClick = useCallback(
+        (e: any) => {
+            if (onClick) {
+                onClick(e);
+            }
+        },
+        [onClick]
+    );
+
+    return <UploadDropZone
+        {...buttonProps}
+        ref={ref}
+        onDragOverClassName={styles.active}
+        extraProps={{ onClick: onZoneClick }}
+        className={`${styles.zone} aspect-video relative rounded-16 md:rounded-14 overflow-hidden border-2 border-gray-200 flex flex-col justify-center items-center cursor-pointer border-dashed`}
+    >
+        <div className={styles.idle_content}>
+            <p className="text-center text-gray-400 text-body1 mb-8"><FiCamera /></p>
+            <div className={`text-gray-600 text-center text-body4`}>
+                <span className="text-blue-500 underline">Browse images</span> or <br /> <span className="text-blue-500">drop </span>
+                them here
+            </div>
+        </div>
+
+        <motion.div
+            animate={{
+                y: 5,
+            }}
+            transition={{
+                duration: .5,
+                repeat: Infinity,
+                repeatType: 'mirror'
+            }}
+            className={`${styles.active_content} text-white font-bold text-center`}>
+            Drop to upload <br /> <AiOutlineCloudUpload className="scale-150 text-body1 mt-16" />
+        </motion.div>
+    </UploadDropZone>
+})
+
+const DropZoneButton = asUploadButton(DropZone);
diff --git a/src/Components/Inputs/FilesInputs/ScreenshotsInput/styles.module.scss b/src/Components/Inputs/FilesInputs/ScreenshotsInput/styles.module.scss
new file mode 100644
index 0000000..217ca39
--- /dev/null
+++ b/src/Components/Inputs/FilesInputs/ScreenshotsInput/styles.module.scss
@@ -0,0 +1,25 @@
+.zone {
+  background-color: #f2f4f7;
+  border-color: #e4e7ec;
+
+  .active_content {
+    display: none;
+  }
+
+  .idle_content {
+    display: block;
+  }
+
+  &.active {
+    background-color: #b3a0ff;
+    border-color: #9e88ff;
+
+    .active_content {
+      display: block;
+    }
+
+    .idle_content {
+      display: none;
+    }
+  }
+}
diff --git a/src/Components/Inputs/FilesInputs/SingleImageUploadInput/ImagePreviews.tsx b/src/Components/Inputs/FilesInputs/SingleImageUploadInput/ImagePreviews.tsx
new file mode 100644
index 0000000..74d4d64
--- /dev/null
+++ b/src/Components/Inputs/FilesInputs/SingleImageUploadInput/ImagePreviews.tsx
@@ -0,0 +1,97 @@
+import UploadPreview, { PreviewComponentProps, PreviewMethods } from '@rpldy/upload-preview'
+import { useAbortItem, useItemAbortListener, useItemCancelListener, useItemErrorListener, useItemProgressListener } from '@rpldy/uploady';
+import { useState } from 'react'
+import ScreenShotsThumbnail from './ScreenshotThumbnail'
+
+export default function ImagePreviews() {
+    return (
+        <UploadPreview PreviewComponent={CustomImagePreview} rememberPreviousBatches />
+    )
+}
+
+function CustomImagePreview({ id, url }: PreviewComponentProps) {
+
+    const [progress, setProgress] = useState<number>(0);
+    const [itemState, setItemState] = useState<string>(STATES.PROGRESS);
+
+    const abortItem = useAbortItem();
+
+
+    useItemProgressListener(item => {
+        if (item.completed > progress) {
+            setProgress(() => item.completed);
+
+            if (item.completed === 100) {
+                setItemState(STATES.DONE)
+            } else {
+                setItemState(STATES.PROGRESS)
+            }
+        }
+    }, id);
+
+
+
+    useItemAbortListener(item => {
+        setItemState(STATES.CANCELLED);
+    }, id);
+
+
+    useItemCancelListener(item => {
+        setItemState(STATES.CANCELLED);
+    }, id);
+
+    useItemErrorListener(item => {
+        setItemState(STATES.ERROR);
+    }, id);
+
+    if (itemState === STATES.DONE || itemState === STATES.CANCELLED)
+        return null
+
+    return <ScreenShotsThumbnail
+        url={url}
+        isLoading={itemState === STATES.PROGRESS}
+        isError={itemState === STATES.ERROR}
+        onCancel={() => {
+            abortItem(id)
+        }}
+    />
+
+    // return <div className="aspect-video relative rounded-12 md:rounded-16 overflow-hidden border-2 border-gray-200">
+    //     <img src={url}
+    //         className={`
+    //         w-full h-full object-cover
+    //         ${itemState === STATES.PROGRESS && 'opacity-50'} 
+    //         `}
+    //         alt="" />
+    //     <div className="text-body5 absolute inset-0"
+    //     >
+    //     </div>
+    //     {itemState === STATES.PROGRESS &&
+    //         <div
+    //             className="absolute inset-0 bg-gray-400  bg-opacity-60 flex flex-col justify-center items-center text-white font-bold transition-transform"
+    //         >
+    //             <RotatingLines
+    //                 strokeColor="#fff"
+    //                 strokeWidth="3"
+    //                 animationDuration="0.75"
+    //                 width="48"
+    //                 visible={true}
+    //             />
+    //         </div>}
+    //     {itemState === STATES.ERROR &&
+    //         <div className="absolute inset-0 bg-red-400  bg-opacity-60 flex flex-col justify-center items-center text-white font-bold">
+    //             Failed...
+    //         </div>}
+    //     {itemState === STATES.CANCELLED &&
+    //         <div className="absolute inset-0 bg-red-400  bg-opacity-60 flex flex-col justify-center items-center text-white font-bold">
+    //             Cancelled
+    //         </div>}
+    // </div>;
+};
+
+const STATES = {
+    PROGRESS: "PROGRESS",
+    DONE: "DONE",
+    CANCELLED: "CANCELLED",
+    ERROR: "ERROR"
+};
diff --git a/src/Components/Inputs/FilesInputs/SingleImageUploadInput/ScreenshotThumbnail.tsx b/src/Components/Inputs/FilesInputs/SingleImageUploadInput/ScreenshotThumbnail.tsx
new file mode 100644
index 0000000..0003c43
--- /dev/null
+++ b/src/Components/Inputs/FilesInputs/SingleImageUploadInput/ScreenshotThumbnail.tsx
@@ -0,0 +1,52 @@
+import React from 'react'
+import { FaTimes } from 'react-icons/fa';
+import { RotatingLines } from 'react-loader-spinner';
+
+interface Props {
+    url?: string,
+    isLoading?: boolean;
+    isError?: boolean;
+    onCancel?: () => void;
+
+}
+
+export default function ScreenshotThumbnail({ url, isLoading, isError, onCancel }: Props) {
+
+    const isEmpty = !url;
+
+    return (
+        <div className={`
+        aspect-video relative rounded-16 md:rounded-14 overflow-hidden border-2 border-gray-200
+        ${isEmpty && "border-dashed"}
+        `}>
+            {!isEmpty && <img src={url}
+                className={`
+            w-full h-full object-cover
+            ${isLoading && 'opacity-50'} 
+            `}
+                alt="" />}
+            <div className="text-body5 absolute inset-0"
+            >
+            </div>
+            {isLoading &&
+                <div
+                    className="absolute inset-0 bg-gray-400  bg-opacity-60 flex flex-col justify-center items-center text-white font-bold transition-transform"
+                >
+                    <RotatingLines
+                        strokeColor="#fff"
+                        strokeWidth="3"
+                        animationDuration="0.75"
+                        width="48"
+                        visible={true}
+                    />
+                </div>}
+            {isError &&
+                <div className="absolute inset-0 bg-red-400  bg-opacity-60 flex flex-col justify-center items-center text-white font-bold">
+                    Failed...
+                </div>}
+            {!isEmpty &&
+                <button className="absolute bg-gray-900 hover:bg-opacity-100 bg-opacity-60 text-white rounded-full w-32 h-32 top-8 right-8" onClick={() => onCancel?.()}><FaTimes /></button>
+            }
+        </div>
+    )
+}
diff --git a/src/Components/Inputs/FilesInputs/SingleImageUploadInput/SingleImageUploadInput.stories.tsx b/src/Components/Inputs/FilesInputs/SingleImageUploadInput/SingleImageUploadInput.stories.tsx
new file mode 100644
index 0000000..06e9fe5
--- /dev/null
+++ b/src/Components/Inputs/FilesInputs/SingleImageUploadInput/SingleImageUploadInput.stories.tsx
@@ -0,0 +1,28 @@
+import React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import SingleImageUploadInput, { ImageType } from './SingleImageUploadInput';
+import { WrapFormController } from 'src/utils/storybook/decorators';
+import { RotatingLines } from 'react-loader-spinner';
+import { FiCamera, } from 'react-icons/fi';
+import { FaExchangeAlt, FaImage } from 'react-icons/fa';
+
+export default {
+    title: 'Shared/Inputs/Files Inputs/Single Image Upload ',
+    component: SingleImageUploadInput,
+    decorators: [
+        WrapFormController<{ avatar: ImageType | null }>({
+            logValues: true,
+            name: "avatar",
+            defaultValues: {
+                avatar: null
+            }
+        })]
+} as ComponentMeta<typeof SingleImageUploadInput>;
+
+const Template: ComponentStory<typeof SingleImageUploadInput> = (args, context) => {
+
+    return <SingleImageUploadInput {...context.controller} {...args} />
+
+}
+
+
diff --git a/src/Components/Inputs/FilesInputs/SingleImageUploadInput/SingleImageUploadInput.tsx b/src/Components/Inputs/FilesInputs/SingleImageUploadInput/SingleImageUploadInput.tsx
new file mode 100644
index 0000000..44b7ce0
--- /dev/null
+++ b/src/Components/Inputs/FilesInputs/SingleImageUploadInput/SingleImageUploadInput.tsx
@@ -0,0 +1,141 @@
+import Uploady, { useRequestPreSend, UPLOADER_EVENTS, useAbortAll } from "@rpldy/uploady";
+import { asUploadButton } from "@rpldy/upload-button";
+// import { fetchUploadUrl } from "./fetch-upload-img-url"; 
+import UploadDropZone from "@rpldy/upload-drop-zone";
+import { forwardRef, ReactElement, useCallback, useState } from "react";
+import styles from './styles.module.scss'
+import { getMockSenderEnhancer } from "@rpldy/mock-sender";
+import { NotificationsService } from "src/services";
+import { useIsDraggingOnElement } from 'src/utils/hooks';
+import { fetchUploadImageUrl } from "src/api/uploading";
+
+
+
+const mockSenderEnhancer = getMockSenderEnhancer({
+    delay: 1500,
+
+});
+
+
+export interface ImageType {
+    id?: string | null,
+    name?: string | null,
+    url: string;
+}
+
+type RenderPropArgs = {
+    isUploading?: boolean;
+    img: ImageType | null,
+    onAbort: () => void,
+    isDraggingOnWindow?: boolean
+}
+
+interface Props {
+    value: ImageType | null | undefined,
+    onChange: (new_value: ImageType | null) => void;
+    wrapperClass?: string;
+    render: (args: RenderPropArgs) => ReactElement;
+}
+
+
+export default function SingleImageUploadInput(props: Props) {
+
+    const { value, onChange, render } = props;
+
+
+    const [currentlyUploadingItem, setCurrentlyUploadingItem] = useState<ImageType | null>(null)
+
+
+    return (
+        <Uploady
+            accept="image/*"
+            inputFieldName='file'
+            grouped={false}
+            listeners={{
+                [UPLOADER_EVENTS.ITEM_START]: (item) => {
+                    onChange(null)
+
+                    setCurrentlyUploadingItem({
+                        id: item.id,
+                        url: URL.createObjectURL(item.file),
+                        name: item.file.name,
+                    })
+                },
+                [UPLOADER_EVENTS.ITEM_ERROR]: (item) => {
+                    NotificationsService.error("An error happened while uploading. Please try again.")
+                },
+                [UPLOADER_EVENTS.ITEM_FINALIZE]: () => setCurrentlyUploadingItem(null),
+                [UPLOADER_EVENTS.ITEM_FINISH]: (item) => {
+
+                    const { id, filename, variants } = item?.uploadResponse?.data?.result;
+                    const url = (variants as string[]).find(v => v.includes('public'));
+
+                    if (id && url) {
+                        onChange({ id, name: filename, url, })
+                    }
+                }
+            }}
+        >
+            <DropZoneButton
+                extraProps={{
+                    renderProps: {
+                        isUploading: !!currentlyUploadingItem,
+                        img: currentlyUploadingItem ?? value ?? null,
+                        render,
+                        wrapperClass: props.wrapperClass
+                    }
+                }
+                }
+            />
+        </Uploady>
+    )
+}
+
+
+const DropZone = forwardRef<any, any>((props, ref) => {
+    const { onClick, children, renderProps, ...buttonProps } = props;
+
+    const isDraggingOnWindow = useIsDraggingOnElement()
+
+    useRequestPreSend(async (data) => {
+
+        const filename = data.items?.[0].file.name ?? ''
+
+        const res = await fetchUploadImageUrl({ filename });
+
+        return {
+            options: {
+                destination: {
+                    url: res.uploadURL
+                },
+            }
+        }
+    })
+
+    const onZoneClick = useCallback(
+        (e: any) => {
+            if (onClick) {
+                onClick(e);
+            }
+        },
+        [onClick]
+    );
+
+    return <UploadDropZone
+        {...buttonProps}
+        ref={ref}
+        type='button'
+        onDragOverClassName={'drag-active'}
+        extraProps={{ onClick: onZoneClick }}
+        className={renderProps.wrapperClass}
+    >
+
+        {renderProps.render({
+            img: renderProps.img,
+            isUploading: renderProps.isUploading,
+            isDraggingOnWindow,
+        })}
+    </UploadDropZone>
+})
+
+const DropZoneButton = asUploadButton(DropZone);
diff --git a/src/Components/Inputs/FilesInputs/SingleImageUploadInput/styles.module.scss b/src/Components/Inputs/FilesInputs/SingleImageUploadInput/styles.module.scss
new file mode 100644
index 0000000..217ca39
--- /dev/null
+++ b/src/Components/Inputs/FilesInputs/SingleImageUploadInput/styles.module.scss
@@ -0,0 +1,25 @@
+.zone {
+  background-color: #f2f4f7;
+  border-color: #e4e7ec;
+
+  .active_content {
+    display: none;
+  }
+
+  .idle_content {
+    display: block;
+  }
+
+  &.active {
+    background-color: #b3a0ff;
+    border-color: #9e88ff;
+
+    .active_content {
+      display: block;
+    }
+
+    .idle_content {
+      display: none;
+    }
+  }
+}
diff --git a/src/Components/Inputs/FilesInputs/ThumbnailInput/ThumbnailInput.stories.tsx b/src/Components/Inputs/FilesInputs/ThumbnailInput/ThumbnailInput.stories.tsx
new file mode 100644
index 0000000..a7ad6b3
--- /dev/null
+++ b/src/Components/Inputs/FilesInputs/ThumbnailInput/ThumbnailInput.stories.tsx
@@ -0,0 +1,29 @@
+import React from 'react'
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import ThumbnailInput from './ThumbnailInput';
+import { WrapFormController } from 'src/utils/storybook/decorators';
+import { ImageType } from '../SingleImageUploadInput/SingleImageUploadInput';
+
+export default {
+    title: 'Shared/Inputs/Files Inputs/Thumbnail ',
+    component: ThumbnailInput,
+    decorators: [
+        WrapFormController<{ thumbnail: ImageType | null }>({
+            logValues: true,
+            name: "thumbnail",
+            defaultValues: {
+                thumbnail: null
+            }
+        })]
+} as ComponentMeta<typeof ThumbnailInput>;
+
+const Template: ComponentStory<typeof ThumbnailInput> = (args, context) => {
+
+    return <ThumbnailInput {...context.controller} {...args} />
+
+}
+
+
+export const Default = Template.bind({});
+Default.args = {
+} 
\ No newline at end of file
diff --git a/src/Components/Inputs/FilesInputs/ThumbnailInput/ThumbnailInput.tsx b/src/Components/Inputs/FilesInputs/ThumbnailInput/ThumbnailInput.tsx
new file mode 100644
index 0000000..1b677fa
--- /dev/null
+++ b/src/Components/Inputs/FilesInputs/ThumbnailInput/ThumbnailInput.tsx
@@ -0,0 +1,54 @@
+import React, { ComponentProps } from 'react'
+import { FiCamera } from 'react-icons/fi';
+import { RotatingLines } from 'react-loader-spinner';
+import { Nullable } from 'remirror';
+import SingleImageUploadInput from '../SingleImageUploadInput/SingleImageUploadInput'
+
+type Value = ComponentProps<typeof SingleImageUploadInput>['value']
+
+interface Props {
+    width?: number
+    value: Value;
+    onChange: (new_value: Nullable<Value>) => void
+}
+
+export default function ThumbnailInput(props: Props) {
+    return (
+        <div
+            style={{
+                width: props.width ?? 120,
+            }}
+            className='aspect-square rounded-16 outline outline-2 outline-gray-200 overflow-hidden cursor-pointer bg-white hover:bg-gray-100'
+        >
+            <SingleImageUploadInput
+                value={props.value}
+                onChange={props.onChange}
+                wrapperClass='h-full'
+                render={({ img, isUploading }) => <div className="w-full h-full relative flex flex-col justify-center items-center">
+                    {img && <img src={img.url} className='w-full h-full object-cover rounded-16' alt="" />}
+                    {!img &&
+                        <>
+                            <p className="text-center text-gray-400 text-body2 mb-8"><FiCamera /></p>
+                            <div className={`text-gray-400 text-center text-body5`}>
+                                Add Image
+                            </div>
+                        </>}
+                    {isUploading &&
+                        <div
+                            className="absolute inset-0 bg-gray-400  bg-opacity-60 flex flex-col justify-center items-center text-white font-bold transition-transform"
+                        >
+                            <RotatingLines
+                                strokeColor="#fff"
+                                strokeWidth="3"
+                                animationDuration="0.75"
+                                width="48"
+                                visible={true}
+                            />
+                        </div>
+                    }
+                </div>}
+            />
+        </div>
+
+    )
+}
diff --git a/src/Components/Inputs/FilesInputs/fetch-upload-img-url.tsx b/src/Components/Inputs/FilesInputs/fetch-upload-img-url.tsx
new file mode 100644
index 0000000..e2c9b19
--- /dev/null
+++ b/src/Components/Inputs/FilesInputs/fetch-upload-img-url.tsx
@@ -0,0 +1,25 @@
+import axios from "axios";
+import { NotificationsService } from "src/services";
+
+export async function fetchUploadUrl(options?: Partial<{ filename: string }>) {
+
+    const { filename } = options ?? {}
+
+    try {
+        const bodyFormData = new FormData();
+        bodyFormData.append('requireSignedURLs', "false");
+        const res = await axios({
+            url: 'https://cors-anywhere.herokuapp.com/https://api.cloudflare.com/client/v4/accounts/783da4f06e5fdb9012c0632959a6f5b3/images/v2/direct_upload',
+            method: 'POST',
+            data: bodyFormData,
+            headers: {
+                "Authorization": "Bearer XXX",
+            }
+        })
+        return res.data.result.uploadURL as string;
+    } catch (error) {
+        console.log(error);
+        NotificationsService.error("A network error happened.")
+        return "couldnt fetch upload url";
+    }
+}
\ No newline at end of file
diff --git a/src/Components/Inputs/TagsInput/TagsInput.tsx b/src/Components/Inputs/TagsInput/TagsInput.tsx
index f36cd0b..26bbfa6 100644
--- a/src/Components/Inputs/TagsInput/TagsInput.tsx
+++ b/src/Components/Inputs/TagsInput/TagsInput.tsx
@@ -13,7 +13,9 @@ interface Option {
     readonly description: string | null
 }
 
+
 type Tag = Omit<OfficialTagsQuery['officialTags'][number], 'id'>
+type Value = { title: Tag['title'] }
 
 interface Props {
     classes?: {
@@ -22,11 +24,80 @@ interface Props {
     }
     placeholder?: string
     max?: number;
+    value: Value[];
+    onChange?: (new_value: Value[]) => void;
+    onBlur?: () => void;
     [k: string]: any
 }
 
 
+
+export default function TagsInput({
+    classes,
+    placeholder = 'Write some tags',
+    max = 5,
+    value,
+    onChange,
+    onBlur,
+    ...props }: Props) {
+
+    const officalTags = useOfficialTagsQuery();
+
+
+    const handleChange = (newValue: OnChangeValue<Option, true>,) => {
+        onChange?.([...newValue.map(transformer.optionToTag)]);
+        onBlur?.();
+    }
+
+
+
+    const maxReached = value.length >= max;
+
+    const currentPlaceholder = maxReached ? '' : value.length > 0 ? "Add Another..." : placeholder;
+
+    const tagsOptions = !maxReached ? (officalTags.data?.officialTags ?? []).filter(t => !value.some((v) => v.title === t.title)).map(transformer.tagToOption) : [];
+
+    return (
+        <div className={`${classes?.container}`}>
+            <Select
+                isLoading={officalTags.loading}
+                options={tagsOptions}
+                isMulti
+                isOptionDisabled={() => maxReached}
+                placeholder={currentPlaceholder}
+                noOptionsMessage={() => {
+                    return maxReached
+                        ? "You've reached the max number of tags."
+                        : "No tags available";
+                }}
+                closeMenuOnSelect={false}
+                value={value.map(transformer.valueToOption)}
+                onChange={handleChange as any}
+                onBlur={onBlur}
+                components={{
+                    Option: OptionComponent,
+                    // ValueContainer: CustomValueContainer
+                }}
+                styles={colourStyles as any}
+                theme={(theme) => ({
+                    ...theme,
+                    borderRadius: 8,
+                    colors: {
+                        ...theme.colors,
+                        primary: 'var(--primary)',
+                    },
+                })}
+            />
+            {/* <div className="flex mt-16 gap-8 flex-wrap">
+                {(value as Tag[]).map((tag, idx) => <Badge color="gray" key={tag.title} onRemove={() => handleRemove(idx)} >{tag.title}</Badge>)}
+            </div> */}
+        </div>
+    )
+}
+
+
 const transformer = {
+    valueToOption: (tag: Value): Option => ({ label: tag.title, value: tag.title, icon: null, description: null }),
     tagToOption: (tag: Tag): Option => ({ label: tag.title, value: tag.title, icon: tag.icon, description: tag.description }),
     optionToTag: (o: Option): Tag => ({ title: o.value, icon: o.icon, description: o.description, })
 }
@@ -107,75 +178,3 @@ const colourStyles: StylesConfig = {
         paddingRight: 0,
     })
 }
-
-
-export default function TagsInput({
-    classes,
-    placeholder = 'Write some tags',
-    max = 5,
-    ...props }: Props) {
-
-    const officalTags = useOfficialTagsQuery();
-
-    const { field: { value, onChange, onBlur } } = useController({
-        name: props.name ?? "tags",
-        control: props.control,
-    })
-
-
-    const handleChange = (newValue: OnChangeValue<Option, true>,) => {
-        onChange([...newValue.map(transformer.optionToTag)]);
-        onBlur();
-    }
-
-
-    const handleRemove = (idx: number) => {
-        onChange((value as Tag[]).filter((_, i) => idx !== i))
-        onBlur();
-    }
-
-
-
-    const maxReached = value.length >= max;
-
-    const currentPlaceholder = maxReached ? '' : value.length > 0 ? "Add Another..." : placeholder;
-
-    const tagsOptions = !maxReached ? (officalTags.data?.officialTags ?? []).filter(t => !value.some((v: Tag) => v.title === t.title)).map(transformer.tagToOption) : [];
-
-    return (
-        <div className={`${classes?.container}`}>
-            <Select
-                isLoading={officalTags.loading}
-                options={tagsOptions}
-                isMulti
-                isOptionDisabled={() => maxReached}
-                placeholder={currentPlaceholder}
-                noOptionsMessage={() => {
-                    return maxReached
-                        ? "You've reached the max number of tags."
-                        : "No tags available";
-                }}
-                closeMenuOnSelect={false}
-                value={value.map(transformer.tagToOption)}
-                onChange={handleChange as any}
-                onBlur={onBlur}
-                components={{
-                    Option: OptionComponent,
-                    // ValueContainer: CustomValueContainer
-                }}
-                styles={colourStyles as any}
-                theme={(theme) => ({
-                    ...theme,
-                    borderRadius: 8,
-                    colors: {
-                        ...theme.colors,
-                        primary: 'var(--primary)',
-                    },
-                })}
-            />
-            {/* <div className="flex mt-16 gap-8 flex-wrap">
-                {(value as Tag[]).map((tag, idx) => <Badge color="gray" key={tag.title} onRemove={() => handleRemove(idx)} >{tag.title}</Badge>)}
-            </div> */}
-        </div>
-    )
-}
diff --git a/src/Components/Inputs/TextEditor/InsertImageModal/InsertImageModal.tsx b/src/Components/Inputs/TextEditor/InsertImageModal/InsertImageModal.tsx
deleted file mode 100644
index 0852dea..0000000
--- a/src/Components/Inputs/TextEditor/InsertImageModal/InsertImageModal.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import React, { FormEvent, useState } from 'react'
-import { ModalCard, modalCardVariants } from 'src/Components/Modals/ModalsContainer/ModalsContainer'
-import { motion } from 'framer-motion'
-import { IoClose } from 'react-icons/io5'
-import Button from 'src/Components/Button/Button'
-import { useAppDispatch } from 'src/utils/hooks'
-import { PayloadAction } from '@reduxjs/toolkit'
-
-interface Props extends ModalCard {
-    callbackAction: PayloadAction<{ src: string, alt?: string }>
-}
-
-export default function InsertImageModal({ onClose, direction, callbackAction, ...props }: Props) {
-
-    const [urlInput, setUrlInput] = useState("")
-    const [altInput, setAltInput] = useState("")
-    const dispatch = useAppDispatch();
-
-    const handleSubmit = (e: FormEvent) => {
-        e.preventDefault()
-        if (urlInput.length > 10) {
-            // onInsert({ src: urlInput, alt: altInput })
-            const action = Object.assign({}, callbackAction);
-            action.payload = { src: urlInput, alt: altInput }
-            dispatch(action)
-            onClose?.();
-        }
-    }
-
-    return (
-        <motion.div
-            custom={direction}
-            variants={modalCardVariants}
-            initial='initial'
-            animate="animate"
-            exit='exit'
-            className="modal-card max-w-[660px] p-24 rounded-xl relative"
-        >
-            <IoClose className='absolute text-body2 top-24 right-24 hover:cursor-pointer' onClick={onClose} />
-            <h2 className='text-h5 font-bold'>Add Image</h2>
-            <form onSubmit={handleSubmit}>
-                <div className="grid md:grid-cols-3 gap-16 mt-32">
-                    <div className='md:col-span-2'>
-                        <p className="text-body5">
-                            Image URL
-                        </p>
-                        <div className="input-wrapper mt-8 relative">
-                            <input
-                                type='text'
-                                className="input-text"
-                                value={urlInput}
-                                onChange={e => setUrlInput(e.target.value)}
-                                placeholder='https://images.com/my-image'
-                            />
-                        </div>
-                    </div>
-                    <div>
-                        <p className="text-body5">
-                            Alt Text
-                        </p>
-                        <div className="input-wrapper mt-8 relative">
-                            <input
-                                type='text'
-                                className="input-text"
-                                value={altInput}
-                                onChange={e => setAltInput(e.target.value)}
-                                placeholder=''
-                            />
-                        </div>
-                    </div>
-                </div>
-                <div className="mt-32 w-1/2 mx-auto aspect-video bg-gray-200 rounded-10">
-                    {urlInput && <img
-                        src={urlInput}
-                        className='w-full h-full object-cover rounded-10'
-                        alt={altInput}
-                    />}
-                </div>
-                <div className="flex gap-16 justify-end mt-32">
-                    <Button onClick={onClose}>
-                        Cancel
-                    </Button>
-                    <Button type='submit' color='primary' >
-                        Add
-                    </Button>
-                </div>
-            </form>
-
-        </motion.div>
-    )
-}
diff --git a/src/Components/Inputs/TextEditor/InsertImageModal/InsertImageModal.stories.tsx b/src/Components/Modals/InsertImageModal/InsertImageModal.stories.tsx
similarity index 68%
rename from src/Components/Inputs/TextEditor/InsertImageModal/InsertImageModal.stories.tsx
rename to src/Components/Modals/InsertImageModal/InsertImageModal.stories.tsx
index ed4f283..b5d7197 100644
--- a/src/Components/Inputs/TextEditor/InsertImageModal/InsertImageModal.stories.tsx
+++ b/src/Components/Modals/InsertImageModal/InsertImageModal.stories.tsx
@@ -5,7 +5,7 @@ import InsertImageModal from './InsertImageModal';
 import { ModalsDecorator } from 'src/utils/storybook/decorators';
 
 export default {
-    title: 'Shared/Inputs/Text Editor/Insert Image Modal',
+    title: 'Shared/Inputs/Files Inputs/Image Modal',
     component: InsertImageModal,
 
     decorators: [ModalsDecorator]
@@ -14,4 +14,13 @@ export default {
 const Template: ComponentStory<typeof InsertImageModal> = (args) => <InsertImageModal {...args} />;
 
 export const Default = Template.bind({});
+Default.args = {
+    callbackAction: {
+        type: "INSERT_IMAGE_IN_STORY",
+        payload: {
+            src: "",
+            alt: "",
+        }
+    }
+}
 
diff --git a/src/Components/Modals/InsertImageModal/InsertImageModal.tsx b/src/Components/Modals/InsertImageModal/InsertImageModal.tsx
new file mode 100644
index 0000000..4a1205d
--- /dev/null
+++ b/src/Components/Modals/InsertImageModal/InsertImageModal.tsx
@@ -0,0 +1,176 @@
+import React, { FormEvent, useRef, useState } from 'react'
+import { ModalCard, modalCardVariants } from 'src/Components/Modals/ModalsContainer/ModalsContainer'
+import { motion } from 'framer-motion'
+import { IoClose } from 'react-icons/io5'
+import Button from 'src/Components/Button/Button'
+import { useAppDispatch, useIsDraggingOnElement } from 'src/utils/hooks'
+import { PayloadAction } from '@reduxjs/toolkit'
+import { RotatingLines } from 'react-loader-spinner'
+import { FaExchangeAlt, FaImage } from 'react-icons/fa'
+import SingleImageUploadInput, { ImageType } from 'src/Components/Inputs/FilesInputs/SingleImageUploadInput/SingleImageUploadInput'
+import { AiOutlineCloudUpload } from 'react-icons/ai'
+
+interface Props extends ModalCard {
+    callbackAction: PayloadAction<{ src: string, alt?: string }>
+}
+
+export default function InsertImageModal({ onClose, direction, callbackAction, ...props }: Props) {
+
+    const [uploadedImage, setUploadedImage] = useState<ImageType | null>(null)
+    const [altInput, setAltInput] = useState("")
+    const dispatch = useAppDispatch();
+
+    const dropAreaRef = useRef<HTMLDivElement>(null!)
+    const isDragging = useIsDraggingOnElement({ ref: dropAreaRef });
+
+    const handleSubmit = (e: FormEvent) => {
+        e.preventDefault()
+        console.log(uploadedImage?.url);
+
+        if (uploadedImage?.url) {
+            // onInsert({ src: urlInput, alt: altInput })
+            const action = Object.assign({}, callbackAction);
+            action.payload = { src: uploadedImage.url, alt: altInput }
+            dispatch(action)
+            onClose?.();
+        }
+    }
+
+    return (
+        <motion.div
+            custom={direction}
+            variants={modalCardVariants}
+            initial='initial'
+            animate="animate"
+            exit='exit'
+            className="modal-card max-w-[660px] p-24 rounded-xl relative"
+        >
+            <IoClose className='absolute text-body2 top-24 right-24 hover:cursor-pointer' onClick={onClose} />
+            <h2 className='text-h5 font-bold'>Add Image</h2>
+            <form onSubmit={handleSubmit}>
+                {/* <div className="grid md:grid-cols-3 gap-16 mt-32">
+                    <div className='md:col-span-2'>
+                        <p className="text-body5">
+                            Image URL
+                        </p>
+                        <div className="input-wrapper mt-8 relative">
+                            <input
+                                type='text'
+                                className="input-text"
+                                value={urlInput}
+                                onChange={e => setUrlInput(e.target.value)}
+                                placeholder='https://images.com/my-image'
+                            />
+                        </div>
+                    </div>
+                    <div>
+                        <p className="text-body5">
+                            Alt Text
+                        </p>
+                        <div className="input-wrapper mt-8 relative">
+                            <input
+                                type='text'
+                                className="input-text"
+                                value={altInput}
+                                onChange={e => setAltInput(e.target.value)}
+                                placeholder=''
+                            />
+                        </div>
+                    </div>
+                </div>
+                <div className="mt-32 w-1/2 mx-auto aspect-video bg-gray-200 rounded-10">
+                    {urlInput && <img
+                        src={urlInput}
+                        className='w-full h-full object-cover rounded-10'
+                        alt={altInput}
+                    />}
+                </div> */}
+                <SingleImageUploadInput
+                    value={uploadedImage}
+                    onChange={setUploadedImage}
+                    wrapperClass='h-full mt-32'
+                    render={({ img, isUploading, isDraggingOnWindow }) => <div ref={dropAreaRef} className="w-full group aspect-video bg-gray-100 cursor-pointer rounded-16 border-2 border-gray200 overflow-hidden relative flex flex-col justify-center items-center">
+                        {img && <>
+                            <img src={img.url} className='w-full h-full object-cover rounded-16' alt="" />
+                            {!isUploading &&
+                                <button type='button' className='absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 py-16 px-24 rounded-12 bg-black bg-opacity-70 opacity-0 group-hover:opacity-100 hover:bg-opacity-90 transition-opacity text-white text-h3'>
+                                    <FaExchangeAlt />
+                                </button>}
+                        </>}
+                        {!img &&
+                            <>
+                                <p className="text-center text-gray-700 text-body1 md:text-h1 mb-8"><FaImage /></p>
+                                <div className={`text-gray-600 text-center text-body4`}>
+                                    Drop an <span className="font-bold">IMAGE</span> here or  <br />  <span className="text-blue-500 underline">Click to browse</span>
+                                </div>
+                            </>}
+                        {isUploading &&
+                            <div
+                                className="absolute inset-0 bg-gray-400  bg-opacity-60 flex flex-col justify-center items-center text-white font-bold transition-transform"
+                            >
+                                <RotatingLines
+                                    strokeColor="#fff"
+                                    strokeWidth="3"
+                                    animationDuration="0.75"
+                                    width="48"
+                                    visible={true}
+                                />
+                            </div>
+                        }
+                        {isDraggingOnWindow &&
+                            <div
+                                className={
+                                    `absolute inset-0 ${isDragging ? 'bg-primary-600' : 'bg-primary-400'} bg-opacity-80 flex flex-col justify-center items-center text-white font-bold transition-transform`
+                                }
+                            >
+
+                                <motion.div
+                                    initial={{ y: 0 }}
+                                    animate={
+                                        isDragging ? {
+                                            y: 5,
+                                            transition: {
+                                                duration: .4,
+                                                repeat: Infinity,
+                                                repeatType: 'mirror',
+                                            }
+                                        } : {
+                                            y: 0
+                                        }}
+                                    className='text-center text-body1'
+                                >
+                                    <AiOutlineCloudUpload className="scale-150 text-h1 mb-16" />
+                                    <br />
+                                    Drop here to upload
+                                </motion.div>
+                            </div>
+                        }
+                    </div>}
+                />
+                <div className='mt-24'>
+                    <p className="text-body5">
+                        Alternative Text
+                    </p>
+                    <div className="input-wrapper mt-8 relative">
+                        <input
+                            type='text'
+                            className="input-text"
+                            value={altInput}
+                            onChange={e => setAltInput(e.target.value)}
+                            placeholder='A description for the content of this image'
+                        />
+                    </div>
+                </div>
+                <div className="flex gap-16 justify-end mt-32">
+                    <Button onClick={onClose}>
+                        Cancel
+                    </Button>
+                    <Button type='submit' color='primary' >
+                        Add
+                    </Button>
+                </div>
+            </form>
+
+        </motion.div>
+    )
+}
diff --git a/src/Components/Inputs/TextEditor/InsertImageModal/index.tsx b/src/Components/Modals/InsertImageModal/index.tsx
similarity index 100%
rename from src/Components/Inputs/TextEditor/InsertImageModal/index.tsx
rename to src/Components/Modals/InsertImageModal/index.tsx
diff --git a/src/api/auth.ts b/src/api/auth.ts
new file mode 100644
index 0000000..e154815
--- /dev/null
+++ b/src/api/auth.ts
@@ -0,0 +1,21 @@
+
+import { CONSTS } from "src/utils";
+
+export async function fetchLnurlAuth() {
+    const res = await fetch(CONSTS.apiEndpoint + '/get-login-url', {
+        credentials: 'include'
+    })
+    const data = await res.json()
+    return data;
+}
+
+export async function fetchIsLoggedIn(session_token: string) {
+    const res = await fetch(CONSTS.apiEndpoint + '/is-logged-in', {
+        credentials: 'include',
+        headers: {
+            session_token
+        }
+    });
+    const data = await res.json();
+    return data.logged_in;
+}
\ No newline at end of file
diff --git a/src/api/uploading.ts b/src/api/uploading.ts
new file mode 100644
index 0000000..59e77d7
--- /dev/null
+++ b/src/api/uploading.ts
@@ -0,0 +1,12 @@
+
+import axios from "axios";
+import { CONSTS } from "src/utils";
+
+export async function fetchUploadImageUrl({ filename }: { filename: string }) {
+    const res = await axios.post(CONSTS.apiEndpoint + '/upload-image-url', {
+        filename
+    }, {
+        withCredentials: true
+    })
+    return res.data;
+}
\ No newline at end of file
diff --git a/src/features/Auth/pages/LoginPage/LoginPage.tsx b/src/features/Auth/pages/LoginPage/LoginPage.tsx
index afdb7cb..5b4b37e 100644
--- a/src/features/Auth/pages/LoginPage/LoginPage.tsx
+++ b/src/features/Auth/pages/LoginPage/LoginPage.tsx
@@ -10,17 +10,12 @@ import Button from "src/Components/Button/Button";
 import { FiCopy } from "react-icons/fi";
 import useCopyToClipboard from "src/utils/hooks/useCopyToClipboard";
 import { getPropertyFromUnknown, trimText, } from "src/utils/helperFunctions";
+import { fetchIsLoggedIn, fetchLnurlAuth } from "src/api/auth";
 import { useErrorHandler } from 'react-error-boundary';
 
 
 
-const fetchLnurlAuth = async () => {
-    const res = await fetch(CONSTS.apiEndpoint + '/get-login-url', {
-        credentials: 'include'
-    })
-    const data = await res.json()
-    return data;
-}
+
 
 export const useLnurlQuery = () => {
     const [loading, setLoading] = useState(true)
@@ -102,15 +97,9 @@ export default function LoginPage() {
                 if (canFetchIsLogged.current === false) return;
 
                 canFetchIsLogged.current = false;
-                fetch(CONSTS.apiEndpoint + '/is-logged-in', {
-                    credentials: 'include',
-                    headers: {
-                        session_token
-                    }
-                })
-                    .then(data => data.json())
-                    .then(data => {
-                        if (data.logged_in) {
+                fetchIsLoggedIn(session_token)
+                    .then(is_logged_in => {
+                        if (is_logged_in) {
                             clearInterval(interval)
                             refetch();
                         }
diff --git a/src/features/Posts/pages/CreatePostPage/Components/BountyForm/BountyForm.tsx b/src/features/Posts/pages/CreatePostPage/Components/BountyForm/BountyForm.tsx
index 017bd37..368a9b6 100644
--- a/src/features/Posts/pages/CreatePostPage/Components/BountyForm/BountyForm.tsx
+++ b/src/features/Posts/pages/CreatePostPage/Components/BountyForm/BountyForm.tsx
@@ -2,8 +2,9 @@ import { yupResolver } from "@hookform/resolvers/yup";
 import { Controller, FormProvider, NestedValue, Resolver, SubmitHandler, useForm } from "react-hook-form";
 import Button from "src/Components/Button/Button";
 import DatePicker from "src/Components/Inputs/DatePicker/DatePicker";
-import FilesInput from "src/Components/Inputs/FilesInput/FilesInput";
 import TagsInput from "src/Components/Inputs/TagsInput/TagsInput";
+import { Tag } from "src/graphql";
+import { imageSchema } from "src/utils/validation";
 import * as yup from "yup";
 import ContentEditor from "../ContentEditor/ContentEditor";
 
@@ -31,29 +32,14 @@ const schema = yup.object({
         .string()
         .required()
         .min(50, 'you have to write at least 10 words'),
-    cover_image: yup
-        .lazy((value: string | File[]) => {
-            switch (typeof value) {
-                case 'object':
-                    return yup
-                        .array()
-                        .test("fileSize", "File Size is too large", (files) => (files as File[]).every(file => file.size <= 5242880))
-                        .test("fileType", "Unsupported File Format, only png/jpg/jpeg images are allowed",
-                            (files) => (files as File[]).every((file: File) =>
-                                ["image/jpeg", "image/png", "image/jpg"].includes(file.type)))
-                case 'string':
-                    return yup.string().url();
-                default:
-                    return yup.mixed()
-            }
-        })
+    cover_image: imageSchema,
 }).required();
 
 interface IFormInputs {
     title: string
     deadline: Date
     bounty_amount: number
-    tags: NestedValue<object[]>
+    tags: NestedValue<Tag[]>
     cover_image: NestedValue<File[]> | string
     body: string
 }
@@ -86,7 +72,7 @@ export default function BountyForm() {
                 <div
                     className='bg-white shadow-lg rounded-8 overflow-hidden'>
                     <div className="p-32">
-                        <Controller
+                        {/* <Controller
                             control={control}
                             name="cover_image"
                             render={({ field: { onChange, value, onBlur } }) => (
@@ -97,7 +83,7 @@ export default function BountyForm() {
                                     uploadText='Add a cover image'
                                 />
                             )}
-                        />
+                        /> */}
                         <p className='input-error'>{errors.cover_image?.message}</p>
 
 
@@ -155,10 +141,20 @@ export default function BountyForm() {
                         <p className="text-body5 mt-16">
                             Tags
                         </p>
-                        <TagsInput
-                            placeholder="Enter your tag and click enter. You can add multiple tags to your post"
-                            classes={{ container: 'mt-8' }}
+                        <Controller
+                            control={control}
+                            name="tags"
+                            render={({ field: { onChange, value, onBlur } }) => (
+                                <TagsInput
+                                    placeholder="Add up to 5 popular tags..."
+                                    classes={{ container: 'mt-16' }}
+                                    value={value}
+                                    onChange={onChange}
+                                    onBlur={onBlur}
+                                />
+                            )}
                         />
+
                         {errors.tags && <p className="input-error">
                             {errors.tags.message}
                         </p>}
diff --git a/src/features/Posts/pages/CreatePostPage/Components/DraftsContainer/DraftContainer.stories.tsx b/src/features/Posts/pages/CreatePostPage/Components/DraftsContainer/DraftContainer.stories.tsx
index 05d2fc1..f47f3a3 100644
--- a/src/features/Posts/pages/CreatePostPage/Components/DraftsContainer/DraftContainer.stories.tsx
+++ b/src/features/Posts/pages/CreatePostPage/Components/DraftsContainer/DraftContainer.stories.tsx
@@ -14,7 +14,6 @@ export default {
     decorators: [WithModals, WrapForm<IStoryFormInputs>({
         defaultValues: {
             tags: [],
-            cover_image: [],
         }
     })]
 } as ComponentMeta<typeof DraftsContainer>;
diff --git a/src/features/Posts/pages/CreatePostPage/Components/DraftsContainer/DraftsContainer.tsx b/src/features/Posts/pages/CreatePostPage/Components/DraftsContainer/DraftsContainer.tsx
index 0ef4c01..6ba29a8 100644
--- a/src/features/Posts/pages/CreatePostPage/Components/DraftsContainer/DraftsContainer.tsx
+++ b/src/features/Posts/pages/CreatePostPage/Components/DraftsContainer/DraftsContainer.tsx
@@ -10,7 +10,7 @@ import { NotificationsService } from 'src/services';
 import { getDateDifference } from 'src/utils/helperFunctions';
 import { useAppDispatch } from 'src/utils/hooks';
 import { useReduxEffect } from 'src/utils/hooks/useReduxEffect';
-import { IStoryFormInputs } from '../../CreateStoryPage/CreateStoryPage';
+import { CreateStoryType, IStoryFormInputs } from '../../CreateStoryPage/CreateStoryPage';
 
 interface Props {
     id?: string;
@@ -28,7 +28,7 @@ export default function DraftsContainer({ id, type, onDraftLoad }: Props) {
     const [deleteStory] = useDeleteStoryMutation({
         refetchQueries: ['GetMyDrafts']
     })
-    const { setValue } = useFormContext<IStoryFormInputs>()
+    const { setValue } = useFormContext<CreateStoryType>()
     const dispatch = useAppDispatch();
 
     const [loading, setLoading] = useState(false)
@@ -45,7 +45,7 @@ export default function DraftsContainer({ id, type, onDraftLoad }: Props) {
                         setValue('title', data.getPostById.title);
                         setValue('tags', data.getPostById.tags);
                         setValue('body', data.getPostById.body);
-                        setValue('cover_image', data.getPostById.cover_image ? [data.getPostById.cover_image] : []);
+                        setValue('cover_image', data.getPostById.cover_image ? { url: data.getPostById.cover_image, id: null, name: null } : null);
                         setValue('is_published', data.getPostById.is_published);
                     }
 
diff --git a/src/features/Posts/pages/CreatePostPage/Components/QuestionForm/QuestionForm.tsx b/src/features/Posts/pages/CreatePostPage/Components/QuestionForm/QuestionForm.tsx
index 7a5d86f..9643781 100644
--- a/src/features/Posts/pages/CreatePostPage/Components/QuestionForm/QuestionForm.tsx
+++ b/src/features/Posts/pages/CreatePostPage/Components/QuestionForm/QuestionForm.tsx
@@ -1,8 +1,8 @@
 import { yupResolver } from "@hookform/resolvers/yup";
 import { Controller, FormProvider, NestedValue, Resolver, SubmitHandler, useForm } from "react-hook-form";
 import Button from "src/Components/Button/Button";
-import FilesInput from "src/Components/Inputs/FilesInput/FilesInput";
 import TagsInput from "src/Components/Inputs/TagsInput/TagsInput";
+import { Tag } from "src/graphql";
 import * as yup from "yup";
 import ContentEditor from "../ContentEditor/ContentEditor";
 
@@ -29,7 +29,7 @@ const schema = yup.object({
 
 interface IFormInputs {
     title: string
-    tags: NestedValue<object[]>
+    tags: NestedValue<Tag[]>
     cover_image: NestedValue<File[]> | string
     body: string
 }
@@ -60,7 +60,7 @@ export default function QuestionForm() {
                 <div
                     className='bg-white shadow-lg rounded-8 overflow-hidden'>
                     <div className="p-32">
-                        <Controller
+                        {/* <Controller
                             control={control}
                             name="cover_image"
                             render={({ field: { onChange, value, onBlur } }) => (
@@ -71,7 +71,7 @@ export default function QuestionForm() {
                                     uploadText='Add a cover image'
                                 />
                             )}
-                        />
+                        /> */}
                         <p className='input-error'>{errors.cover_image?.message}</p>
 
 
@@ -95,9 +95,18 @@ export default function QuestionForm() {
                         <p className="text-body5 mt-16">
                             Tags
                         </p>
-                        <TagsInput
-                            placeholder="Enter your tag and click enter. You can add multiple tags to your post"
-                            classes={{ container: 'mt-8' }}
+                        <Controller
+                            control={control}
+                            name="tags"
+                            render={({ field: { onChange, value, onBlur } }) => (
+                                <TagsInput
+                                    placeholder="Add up to 5 popular tags..."
+                                    classes={{ container: 'mt-16' }}
+                                    value={value}
+                                    onChange={onChange}
+                                    onBlur={onBlur}
+                                />
+                            )}
                         />
                         {errors.tags && <p className="input-error">
                             {errors.tags.message}
diff --git a/src/features/Posts/pages/CreatePostPage/Components/StoryForm/StoryForm.stories.tsx b/src/features/Posts/pages/CreatePostPage/Components/StoryForm/StoryForm.stories.tsx
index ea4d469..e89e15b 100644
--- a/src/features/Posts/pages/CreatePostPage/Components/StoryForm/StoryForm.stories.tsx
+++ b/src/features/Posts/pages/CreatePostPage/Components/StoryForm/StoryForm.stories.tsx
@@ -13,7 +13,6 @@ export default {
     decorators: [WithModals, WrapForm<IStoryFormInputs>({
         defaultValues: {
             tags: [],
-            cover_image: [],
         }
     })]
 } as ComponentMeta<typeof StoryForm>;
diff --git a/src/features/Posts/pages/CreatePostPage/Components/StoryForm/StoryForm.tsx b/src/features/Posts/pages/CreatePostPage/Components/StoryForm/StoryForm.tsx
index e18a6d2..fe60d0c 100644
--- a/src/features/Posts/pages/CreatePostPage/Components/StoryForm/StoryForm.tsx
+++ b/src/features/Posts/pages/CreatePostPage/Components/StoryForm/StoryForm.tsx
@@ -1,7 +1,6 @@
 import { useEffect, useRef, useState } from 'react'
 import { Controller, useFormContext } from "react-hook-form";
 import Button from "src/Components/Button/Button";
-import FilesInput from "src/Components/Inputs/FilesInput/FilesInput";
 import TagsInput from "src/Components/Inputs/TagsInput/TagsInput";
 import ContentEditor from "../ContentEditor/ContentEditor";
 import { useCreateStoryMutation } from 'src/graphql'
@@ -13,7 +12,8 @@ import { createRoute } from 'src/utils/routing';
 import PreviewPostCard from '../PreviewPostCard/PreviewPostCard'
 import { StorageService } from 'src/services';
 import { useThrottledCallback } from '@react-hookz/web';
-import { CreateStoryType, IStoryFormInputs } from '../../CreateStoryPage/CreateStoryPage';
+import { CreateStoryType } from '../../CreateStoryPage/CreateStoryPage';
+import CoverImageInput from 'src/Components/Inputs/FilesInputs/CoverImageInput/CoverImageInput';
 
 interface Props {
     isUpdating?: boolean;
@@ -29,7 +29,7 @@ export default function StoryForm(props: Props) {
 
     const dispatch = useAppDispatch();
     const navigate = useNavigate();
-    const { handleSubmit, control, register, trigger, getValues, watch, reset } = useFormContext<IStoryFormInputs>();
+    const { handleSubmit, control, register, trigger, getValues, watch, reset } = useFormContext<CreateStoryType>();
 
 
     const [editMode, setEditMode] = useState(true)
@@ -80,7 +80,7 @@ export default function StoryForm(props: Props) {
         refetchQueries: ['GetMyDrafts']
     });
 
-    const clickSubmit = (publish_now: boolean) => handleSubmit<IStoryFormInputs>(data => {
+    const clickSubmit = (publish_now: boolean) => handleSubmit<CreateStoryType>(data => {
         setLoading(true);
         createStory({
             variables: {
@@ -90,7 +90,7 @@ export default function StoryForm(props: Props) {
                     body: data.body,
                     tags: data.tags.map(t => t.title),
                     is_published: publish_now,
-                    cover_image: (data.cover_image[0] ?? null) as string | null,
+                    cover_image: data.cover_image,
                 },
             }
         })
@@ -103,6 +103,8 @@ export default function StoryForm(props: Props) {
     const { ref: registerTitleRef, ...titleRegisteration } = register('title');
 
 
+
+
     return (
         <>
             <div id='preview-switch' className="flex gap-16">
@@ -117,19 +119,21 @@ export default function StoryForm(props: Props) {
                     <div
                         className='bg-white border-2 border-gray-200 rounded-16 overflow-hidden'>
                         <div className="p-16 md:p-24 lg:p-32">
-                            <Controller
-                                control={control}
-                                name="cover_image"
-                                render={({ field: { onChange, value, onBlur, ref } }) => (
-                                    <FilesInput
-                                        ref={ref}
+                            <div className="w-full h-[120px] md:h-[240px] rounded-12 mb-16 overflow-hidden">
+                                <Controller
+                                    control={control}
+                                    name="cover_image"
+                                    render={({ field: { onChange, value, onBlur, ref } }) => <CoverImageInput
                                         value={value}
-                                        onBlur={onBlur}
-                                        onChange={onChange}
-                                        uploadText='Add a cover image'
+                                        onChange={e => {
+                                            onChange(e)
+                                        }}
+                                    // uploadText='Add a cover image'
                                     />
-                                )}
-                            />
+
+                                    }
+                                />
+                            </div>
 
 
 
@@ -153,11 +157,21 @@ export default function StoryForm(props: Props) {
                                 />
                             </div>
 
-                            <TagsInput
-                                placeholder="Add up to 5 popular tags..."
-                                classes={{ container: 'mt-16' }}
+                            <Controller
+                                control={control}
+                                name="tags"
+                                render={({ field: { onChange, value, onBlur } }) => (
+                                    <TagsInput
+                                        placeholder="Add up to 5 popular tags..."
+                                        classes={{ container: 'mt-16' }}
+                                        value={value}
+                                        onChange={onChange}
+                                        onBlur={onBlur}
+                                    />
+                                )}
                             />
 
+
                         </div>
                         <ContentEditor
                             key={postId}
@@ -167,7 +181,7 @@ export default function StoryForm(props: Props) {
                         />
                     </div>
                 </>}
-                {!editMode && <PreviewPostCard post={{ ...getValues(), cover_image: getValues().cover_image[0] }} />}
+                {!editMode && <PreviewPostCard post={{ ...getValues(), cover_image: getValues('cover_image.url') }} />}
                 <div className="flex gap-16 mt-32">
                     <Button
                         type='submit'
diff --git a/src/features/Posts/pages/CreatePostPage/CreateStoryPage/CreateStoryPage.tsx b/src/features/Posts/pages/CreatePostPage/CreateStoryPage/CreateStoryPage.tsx
index b48996f..1db1541 100644
--- a/src/features/Posts/pages/CreatePostPage/CreateStoryPage/CreateStoryPage.tsx
+++ b/src/features/Posts/pages/CreatePostPage/CreateStoryPage/CreateStoryPage.tsx
@@ -4,54 +4,42 @@ import { useRef, useState } from "react";
 import { ErrorBoundary, withErrorBoundary } from "react-error-boundary";
 import { FormProvider, NestedValue, Resolver, useForm } from "react-hook-form";
 import ErrorPage from "src/Components/Errors/ErrorPage/ErrorPage";
-import { Post_Type } from "src/graphql";
+import { CreateStoryMutationVariables, Post_Type } from "src/graphql";
 import { StorageService } from "src/services";
 import { useAppSelector } from "src/utils/hooks";
 import { Override } from "src/utils/interfaces";
+import { imageSchema, tagSchema } from "src/utils/validation";
 import * as yup from "yup";
 import DraftsContainer from "../Components/DraftsContainer/DraftsContainer";
 import ErrorsContainer from "../Components/ErrorsContainer/ErrorsContainer";
 import StoryForm from "../Components/StoryForm/StoryForm";
 import styles from './styles.module.scss'
 
-const FileSchema = yup.lazy((value: string | File[]) => {
-    switch (typeof value) {
-        case 'object':
-            return yup.mixed()
-                .test("fileSize", "File Size is too large", file => file.size <= 5242880)
-                .test("fileType", "Unsupported File Format, only png/jpg/jpeg images are allowed",
-                    (file: File) =>
-                        ["image/jpeg", "image/png", "image/jpg"].includes(file.type))
-        case 'string':
-            return yup.string().url();
-        default:
-            return yup.mixed()
-    }
-})
+
 
 const schema = yup.object({
     title: yup.string().trim().required().min(10, 'Story title must be 2+ words').transform(v => v.replace(/(\r\n|\n|\r)/gm, "")),
-    tags: yup.array().required().min(1, 'Add at least one tag'),
-    body: yup.string().required().min(50, 'Post must contain at least 10+ words'),
-    cover_image: yup.array().of(FileSchema as any)
+    tags: yup.array().of(tagSchema).required().min(1, 'Add at least one tag'),
+    body: yup.string().required("Write some content in the post").min(50, 'Post must contain at least 10+ words'),
+    cover_image: imageSchema.nullable(true),
 
 }).required();
 
 
-export interface IStoryFormInputs {
-    id: number | null
-    title: string
-    tags: NestedValue<{ title: string }[]>
-    cover_image: NestedValue<File[]> | NestedValue<string[]>
-    body: string
-    is_published: boolean | null
+type ApiStoryInput = NonNullable<CreateStoryMutationVariables['data']>;
+
+export type IStoryFormInputs = {
+    id: ApiStoryInput['id']
+    title: ApiStoryInput['title']
+    body: ApiStoryInput['body']
+    cover_image: NestedValue<NonNullable<ApiStoryInput['cover_image']>> | null
+    tags: NestedValue<ApiStoryInput['tags']>
+    is_published: ApiStoryInput['is_published']
 }
 
-
-
 export type CreateStoryType = Override<IStoryFormInputs, {
+    cover_image: ApiStoryInput['cover_image'],
     tags: { title: string }[]
-    cover_image: File[] | string[]
 }>
 
 const storageService = new StorageService<CreateStoryType>('story-edit');
@@ -64,13 +52,13 @@ function CreateStoryPage() {
         story: state.staging.story || storageService.get()
     }))
 
-    const formMethods = useForm<IStoryFormInputs>({
-        resolver: yupResolver(schema) as Resolver<IStoryFormInputs>,
+    const formMethods = useForm<CreateStoryType>({
+        resolver: yupResolver(schema) as Resolver<CreateStoryType>,
         shouldFocusError: false,
         defaultValues: {
             id: story?.id ?? null,
             title: story?.title ?? '',
-            cover_image: story?.cover_image ?? [],
+            cover_image: story?.cover_image,
             tags: story?.tags ?? [],
             body: story?.body ?? '',
             is_published: story?.is_published ?? false,
diff --git a/src/features/Posts/pages/PostDetailsPage/Components/StoryPageContent/StoryPageContent.tsx b/src/features/Posts/pages/PostDetailsPage/Components/StoryPageContent/StoryPageContent.tsx
index 7a563fc..9587bd7 100644
--- a/src/features/Posts/pages/PostDetailsPage/Components/StoryPageContent/StoryPageContent.tsx
+++ b/src/features/Posts/pages/PostDetailsPage/Components/StoryPageContent/StoryPageContent.tsx
@@ -31,7 +31,8 @@ export default function StoryPageContent({ story }: Props) {
             <Card id="content" onlyMd className="relative max">
                 {story.cover_image &&
                     <img src={story.cover_image}
-                        className='w-full object-cover rounded-12 md:rounded-16 mb-16'
+                        className='w-full h-[120px] md:h-[240px] object-cover rounded-12 mb-16'
+                        // className='w-full object-cover rounded-12 md:rounded-16 mb-16'
                         alt="" />}
                 <div className="flex flex-col gap-24 relative">
                     {curUser?.id === story.author.id && <Menu
diff --git a/src/features/Posts/pages/PostDetailsPage/Components/StoryPageContent/useUpdateStory.tsx b/src/features/Posts/pages/PostDetailsPage/Components/StoryPageContent/useUpdateStory.tsx
index d920c1b..48b10e4 100644
--- a/src/features/Posts/pages/PostDetailsPage/Components/StoryPageContent/useUpdateStory.tsx
+++ b/src/features/Posts/pages/PostDetailsPage/Components/StoryPageContent/useUpdateStory.tsx
@@ -28,7 +28,7 @@ export const useUpdateStory = (story: Story) => {
     const handleEdit = () => {
         dispatch(stageStory({
             ...story,
-            cover_image: story.cover_image ? [story.cover_image] : []
+            cover_image: story.cover_image ? { id: null, name: null, url: story.cover_image } : null,
         }))
 
         navigate("/blog/create-post?type=story")
diff --git a/src/features/Profiles/pages/EditProfilePage/BasicProfileInfoTab/BasicProfileInfoTab.tsx b/src/features/Profiles/pages/EditProfilePage/BasicProfileInfoTab/BasicProfileInfoTab.tsx
index 6616129..c7ad6ad 100644
--- a/src/features/Profiles/pages/EditProfilePage/BasicProfileInfoTab/BasicProfileInfoTab.tsx
+++ b/src/features/Profiles/pages/EditProfilePage/BasicProfileInfoTab/BasicProfileInfoTab.tsx
@@ -1,9 +1,8 @@
-import { SubmitHandler, useForm } from "react-hook-form"
+import { Controller, SubmitHandler, useForm } from "react-hook-form"
 import { useUpdateProfileAboutMutation, useMyProfileAboutQuery, UpdateProfileAboutMutationVariables, UserBasicInfoFragmentDoc } from "src/graphql";
 import { NotificationsService } from "src/services/notifications.service";
 import * as yup from "yup";
 import { yupResolver } from "@hookform/resolvers/yup";
-import Avatar from "src/features/Profiles/Components/Avatar/Avatar";
 import { useAppDispatch, usePrompt } from "src/utils/hooks";
 import SaveChangesCard from "../SaveChangesCard/SaveChangesCard";
 import { toast } from "react-toastify";
@@ -12,15 +11,18 @@ import NotFoundPage from "src/features/Shared/pages/NotFoundPage/NotFoundPage";
 import { setUser } from "src/redux/features/user.slice";
 import UpdateProfileAboutTabSkeleton from "./BasicProfileInfoTab.Skeleton";
 import { useApolloClient } from "@apollo/client";
+import AvatarInput from "src/Components/Inputs/FilesInputs/AvatarInput/AvatarInput";
+import { imageSchema } from "src/utils/validation";
 
 interface Props {
 }
 
 type IFormInputs = NonNullable<UpdateProfileAboutMutationVariables['data']>;
 
+
 const schema: yup.SchemaOf<IFormInputs> = yup.object({
     name: yup.string().trim().required().min(2),
-    avatar: yup.string().url().required(),
+    avatar: imageSchema.required(),
     bio: yup.string().ensure(),
     email: yup.string().email().ensure(),
     github: yup.string().ensure(),
@@ -55,8 +57,10 @@ const schema: yup.SchemaOf<IFormInputs> = yup.object({
 
 export default function BasicProfileInfoTab() {
 
-    const { register, formState: { errors, isDirty, }, handleSubmit, reset } = useForm<IFormInputs>({
-        defaultValues: {},
+    const { register, formState: { errors, isDirty, }, handleSubmit, reset, control } = useForm<IFormInputs>({
+        defaultValues: {
+
+        },
         resolver: yupResolver(schema),
         mode: 'onBlur',
     });
@@ -65,7 +69,7 @@ export default function BasicProfileInfoTab() {
     const profileQuery = useMyProfileAboutQuery({
         onCompleted: data => {
             if (data.me)
-                reset(data.me)
+                reset({ ...data.me, avatar: { url: data.me.avatar } })
         }
     })
     const [mutate, mutationStatus] = useUpdateProfileAboutMutation();
@@ -107,7 +111,7 @@ export default function BasicProfileInfoTab() {
             onCompleted: ({ updateProfileDetails: data }) => {
                 if (data) {
                     dispatch(setUser(data))
-                    reset(data);
+                    reset({ ...data, avatar: { url: data.avatar } });
                     apolloClient.writeFragment({
                         id: `User:${data?.id}`,
                         data,
@@ -123,12 +127,21 @@ export default function BasicProfileInfoTab() {
             })
     };
 
+
+
+
     return (
         <div className="grid grid-cols-1 md:grid-cols-3 gap-24">
             <Card className="md:col-span-2" defaultPadding={false}>
                 <div className="bg-gray-600 relative h-[160px] rounded-t-16">
                     <div className="absolute left-24 bottom-0 translate-y-1/2">
-                        <Avatar src={profileQuery.data.me.avatar} width={120} />
+                        <Controller
+                            control={control}
+                            name="avatar"
+                            render={({ field: { onChange, value } }) => (
+                                <AvatarInput value={value} onChange={onChange} width={120} />
+                            )}
+                        />
                     </div>
                 </div>
                 <div className="p-16 md:p-24 mt-64">
@@ -148,29 +161,14 @@ export default function BasicProfileInfoTab() {
                         {errors.name && <p className="input-error">
                             {errors.name.message}
                         </p>}
-                        <p className="text-body5 mt-16 font-medium">
-                            Avatar
-                        </p>
-                        <div className="input-wrapper mt-8 relative">
-                            <input
-
-                                type='text'
-                                className="input-text"
-                                placeholder='https://images.com/my-avatar.jpg'
-                                {...register("avatar")}
-                            />
-                        </div>
-                        {errors.avatar && <p className="input-error">
-                            {errors.avatar.message}
-                        </p>}
                         <p className="text-body5 mt-16 font-medium">
                             Bio
                         </p>
                         <div className="input-wrapper mt-8 relative">
                             <textarea
 
-                                rows={3}
-                                className="input-text !p-20"
+                                rows={4}
+                                className="input-text"
                                 placeholder='Tell others a little bit about yourself'
                                 {...register("bio")}
                             />
diff --git a/src/features/Profiles/pages/EditProfilePage/PreferencesTab/LinkingAccountModal/LinkingAccountModal.tsx b/src/features/Profiles/pages/EditProfilePage/PreferencesTab/LinkingAccountModal/LinkingAccountModal.tsx
index e4bc49f..0def626 100644
--- a/src/features/Profiles/pages/EditProfilePage/PreferencesTab/LinkingAccountModal/LinkingAccountModal.tsx
+++ b/src/features/Profiles/pages/EditProfilePage/PreferencesTab/LinkingAccountModal/LinkingAccountModal.tsx
@@ -2,23 +2,16 @@ import { motion } from 'framer-motion'
 import { ModalCard, modalCardVariants } from 'src/Components/Modals/ModalsContainer/ModalsContainer'
 import { useEffect, useState } from "react"
 import { Grid } from "react-loader-spinner";
-import { CONSTS } from "src/utils";
 import { QRCodeSVG } from 'qrcode.react';
 import Button from "src/Components/Button/Button";
 import { FiCopy } from "react-icons/fi";
 import useCopyToClipboard from "src/utils/hooks/useCopyToClipboard";
 import { useApolloClient } from '@apollo/client';
 import { IoClose } from 'react-icons/io5';
+import { fetchLnurlAuth } from 'src/api/auth';
 
 
 
-const fetchLnurlAuth = async () => {
-    const res = await fetch(CONSTS.apiEndpoint + '/get-login-url?action=link', {
-        credentials: 'include'
-    })
-    const data = await res.json()
-    return data;
-}
 
 const useLnurlQuery = () => {
     const [loading, setLoading] = useState(true)
diff --git a/src/graphql/index.tsx b/src/graphql/index.tsx
index 480b746..a8dbd61 100644
--- a/src/graphql/index.tsx
+++ b/src/graphql/index.tsx
@@ -141,6 +141,12 @@ export type Hackathon = {
   website: Scalars['String'];
 };
 
+export type ImageInput = {
+  id?: InputMaybe<Scalars['String']>;
+  name?: InputMaybe<Scalars['String']>;
+  url: Scalars['String'];
+};
+
 export type LnurlDetails = {
   __typename?: 'LnurlDetails';
   commentAllowed: Maybe<Scalars['Int']>;
@@ -318,7 +324,7 @@ export type PostComment = {
 };
 
 export type ProfileDetailsInput = {
-  avatar?: InputMaybe<Scalars['String']>;
+  avatar?: InputMaybe<ImageInput>;
   bio?: InputMaybe<Scalars['String']>;
   discord?: InputMaybe<Scalars['String']>;
   email?: InputMaybe<Scalars['String']>;
@@ -550,7 +556,7 @@ export type Story = PostBase & {
 
 export type StoryInputType = {
   body: Scalars['String'];
-  cover_image?: InputMaybe<Scalars['String']>;
+  cover_image?: InputMaybe<ImageInput>;
   id?: InputMaybe<Scalars['Int']>;
   is_published?: InputMaybe<Scalars['Boolean']>;
   tags: Array<Scalars['String']>;
diff --git a/src/redux/features/modals.slice.ts b/src/redux/features/modals.slice.ts
index 43ed181..e7b215c 100644
--- a/src/redux/features/modals.slice.ts
+++ b/src/redux/features/modals.slice.ts
@@ -3,9 +3,9 @@ import { Login_ScanningWalletCard, Login_ExternalWalletCard, Login_NativeWalletC
 import { ProjectDetailsCard } from "src/features/Projects/pages/ProjectPage/ProjectDetailsCard";
 import { ProjectListedModal } from "src/features/Projects/pages/ListProjectPage/Components/ProjectListedModal";
 import VoteCard from "src/features/Projects/pages/ProjectPage/VoteCard/VoteCard";
-import { InsertImageModal } from 'src/Components/Inputs/TextEditor/InsertImageModal'
 import { InsertVideoModal } from 'src/Components/Inputs/TextEditor/InsertVideoModal'
 import { InsertLinkModal } from 'src/Components/Inputs/TextEditor/InsertLinkModal'
+
 import { Claim_FundWithdrawCard, Claim_CopySignatureCard, Claim_GenerateSignatureCard, Claim_SubmittedCard } from "src/features/Projects/pages/ProjectPage/ClaimProject";
 import { ModalCard } from "src/Components/Modals/ModalsContainer/ModalsContainer";
 import { ConfirmModal } from "src/Components/Modals/ConfirmModal";
@@ -19,6 +19,7 @@ import { ConnectToMakerModal } from "src/features/Tournaments/pages/MakersPage/C
 import { RegistrationModals } from "src/features/Tournaments/pages/OverviewPage/RegisterationModals";
 
 
+import { InsertImageModal } from "src/Components/Modals/InsertImageModal";
 
 export enum Direction {
   START,
diff --git a/src/styles/mixins/_post_body.scss b/src/styles/mixins/_post_body.scss
index d2d71ef..2da3006 100644
--- a/src/styles/mixins/_post_body.scss
+++ b/src/styles/mixins/_post_body.scss
@@ -54,6 +54,8 @@
   img {
     border-radius: 16px;
     outline: 1px solid #e4e7ec;
+    max-width: 100%;
+    object-fit: contain;
   }
 
   pre {
diff --git a/src/utils/hooks/index.ts b/src/utils/hooks/index.ts
index b1e9be8..c8b775a 100644
--- a/src/utils/hooks/index.ts
+++ b/src/utils/hooks/index.ts
@@ -12,5 +12,6 @@ export * from './useCurrentSection'
 export * from './usePreload'
 export * from './useCarousel'
 export * from './usePrompt'
+export * from './useIsDraggingOnElement'
 export * from './useCountdown'
 
diff --git a/src/utils/hooks/useIsDraggingOnElement.ts b/src/utils/hooks/useIsDraggingOnElement.ts
new file mode 100644
index 0000000..15fe50f
--- /dev/null
+++ b/src/utils/hooks/useIsDraggingOnElement.ts
@@ -0,0 +1,76 @@
+import { MutableRefObject, useEffect, useRef, useState } from "react";
+
+
+
+function addEventListener<K extends keyof HTMLElementEventMap>(element: HTMLElement, type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions) {
+    element.addEventListener(type, listener, options);
+    return () => element.removeEventListener(type, listener, options);
+}
+
+function setImmediate(callback: (...args: any[]) => void, ...args: any[]) {
+    let cancelled = false;
+    Promise.resolve().then(() => cancelled || callback(...args));
+    return () => {
+        cancelled = true;
+    };
+}
+
+function noop() { }
+
+function handleDragOver(ev: DragEvent) {
+    ev.preventDefault();
+    ev.dataTransfer!.dropEffect = 'copy';
+}
+
+
+export const useIsDraggingOnElement = (options?: Partial<{
+    ref: MutableRefObject<HTMLElement>
+}>) => {
+    const listenersRef = useRef<any[]>([]);
+    const [isDragging, setIsDragging] = useState(false);
+
+
+    useEffect(() => {
+        let count = 0;
+        let cancelImmediate = noop;
+
+        const element = options?.ref?.current ?? document as unknown as HTMLElement;
+
+        listenersRef.current = [
+            addEventListener(element, 'dragover', handleDragOver),
+            addEventListener(element, 'dragenter', ev => {
+                ev.preventDefault();
+
+                if (count === 0) {
+                    setIsDragging(true)
+                }
+                ++count;
+            }),
+            addEventListener(element, 'dragleave', ev => {
+                ev.preventDefault();
+                cancelImmediate = setImmediate(() => {
+                    --count;
+                    if (count === 0) {
+                        setIsDragging(false)
+                    }
+                })
+
+            }),
+            addEventListener(element, 'drop', ev => {
+                ev.preventDefault();
+                cancelImmediate();
+                if (count > 0) {
+                    count = 0;
+                    setIsDragging(false)
+                }
+            }),
+        ]
+
+        return () => {
+            listenersRef.current.forEach(f => f());
+        }
+    }, [options?.ref])
+
+
+    return isDragging
+}
\ No newline at end of file
diff --git a/src/utils/storybook/decorators.tsx b/src/utils/storybook/decorators.tsx
index 1756607..287e70f 100644
--- a/src/utils/storybook/decorators.tsx
+++ b/src/utils/storybook/decorators.tsx
@@ -16,8 +16,10 @@ import "src/styles/index.scss";
 import 'react-loading-skeleton/dist/skeleton.css'
 import { ApolloProvider } from '@apollo/client';
 import { apolloClient } from '../apollo';
-import { FormProvider, useForm, UseFormProps, Controller } from 'react-hook-form';
+import { Controller, FormProvider, useForm, UseFormProps, Controller } from 'react-hook-form';
 import ModalsContainer from 'src/Components/Modals/ModalsContainer/ModalsContainer';
+import { ToastContainer } from 'react-toastify';
+import { NotificationsService } from 'src/services';
 
 
 // Enable the Mocks Service Worker
@@ -63,6 +65,11 @@ export const WrapperDecorator: DecoratorFn = (Story, options) => {
                 effect='solid'
                 delayShow={1000}
             />
+            <ToastContainer
+                {...NotificationsService.defaultOptions}
+                newestOnTop={false}
+                limit={2}
+            />
         </>
     );
 }
@@ -112,16 +119,42 @@ export const centerDecorator: DecoratorFn = (Story) => {
     </div>
 }
 
-export function WrapForm<T = any>(options?: Partial<UseFormProps<T>>): DecoratorFn {
+export function WrapForm<T = any>(options?: Partial<UseFormProps<T> & { logValues: boolean }>): DecoratorFn {
     const Func: DecoratorFn = (Story) => {
         const methods = useForm<T>(options);
+
+        if (options?.logValues) {
+            console.log(methods.watch())
+        }
+
         return <FormProvider {...methods} >
-            <Story />
+            <Story onChang />
         </FormProvider>
     }
     return Func
 }
 
+export function WrapFormController<T = any>(options: Partial<UseFormProps<T> & { logValues: boolean }> & { name: string }): DecoratorFn {
+    const Func: DecoratorFn = (Story) => {
+
+        const methods = useForm<T>(options);
+
+        if (options?.logValues) {
+            console.log(methods.watch(options.name as any))
+        }
+
+        return <Controller
+            control={methods.control}
+            name={options.name as any}
+            render={({ field: { value, onChange, onBlur } }) =>
+                <Story controller={{ value, onChange, onBlur }} />
+            }
+        />
+    }
+    return Func
+}
+
+
 
 
 export const WithModals: DecoratorFn = (Component) => <>
diff --git a/src/utils/validation/index.ts b/src/utils/validation/index.ts
new file mode 100644
index 0000000..e50b4e7
--- /dev/null
+++ b/src/utils/validation/index.ts
@@ -0,0 +1 @@
+export * from './misc';
\ No newline at end of file
diff --git a/src/utils/validation/misc.ts b/src/utils/validation/misc.ts
new file mode 100644
index 0000000..a13ad9e
--- /dev/null
+++ b/src/utils/validation/misc.ts
@@ -0,0 +1,12 @@
+import * as yup from "yup";
+
+export const imageSchema = yup.object().shape({
+    id: yup.string().nullable(true),
+    name: yup.string().nullable(true),
+    url: yup.string().trim().required().url(),
+});
+
+export const tagSchema = yup.object().shape({
+    title: yup.string().trim().min(2).required(),
+});
+