diff --git a/api/functions/graphql/nexus-typegen.ts b/api/functions/graphql/nexus-typegen.ts
index b0d01f0..1f0a9e1 100644
--- a/api/functions/graphql/nexus-typegen.ts
+++ b/api/functions/graphql/nexus-typegen.ts
@@ -34,7 +34,6 @@ export interface NexusGenInputs {
     id?: number | null; // Int
     tags: string[]; // [String!]!
     title: string; // String!
-    topicId: number; // Int!
   }
   UpdateProfileInput: { // input type
     avatar?: string | null; // String
@@ -174,12 +173,9 @@ export interface NexusGenObjects {
     votes_count: number; // Int!
   }
   Tag: { // root type
+    icon?: string | null; // String
     id: number; // Int!
-    title: string; // String!
-  }
-  Topic: { // root type
-    icon: string; // String!
-    id: number; // Int!
+    isOfficial?: boolean | null; // Boolean
     title: string; // String!
   }
   User: { // root type
@@ -288,8 +284,8 @@ export interface NexusGenFieldTypes {
     id: number; // Int!
     location: string; // String!
     start_date: NexusGenScalars['Date']; // Date!
+    tags: NexusGenRootTypes['Tag'][]; // [Tag!]!
     title: string; // String!
-    topics: NexusGenRootTypes['Topic'][]; // [Topic!]!
     website: string; // String!
   }
   LnurlDetails: { // field return type
@@ -333,7 +329,6 @@ export interface NexusGenFieldTypes {
   Query: { // field return type
     allCategories: NexusGenRootTypes['Category'][]; // [Category!]!
     allProjects: NexusGenRootTypes['Project'][]; // [Project!]!
-    allTopics: NexusGenRootTypes['Topic'][]; // [Topic!]!
     getAllHackathons: NexusGenRootTypes['Hackathon'][]; // [Hackathon!]!
     getCategory: NexusGenRootTypes['Category']; // Category!
     getDonationsStats: NexusGenRootTypes['DonationsStats']; // DonationsStats!
@@ -345,7 +340,8 @@ export interface NexusGenFieldTypes {
     hottestProjects: NexusGenRootTypes['Project'][]; // [Project!]!
     me: NexusGenRootTypes['User'] | null; // User
     newProjects: NexusGenRootTypes['Project'][]; // [Project!]!
-    popularTopics: NexusGenRootTypes['Topic'][]; // [Topic!]!
+    officialTags: NexusGenRootTypes['Tag'][]; // [Tag!]!
+    popularTags: NexusGenRootTypes['Tag'][]; // [Tag!]!
     profile: NexusGenRootTypes['User'] | null; // User
     projectsByCategory: NexusGenRootTypes['Project'][]; // [Project!]!
     searchProjects: NexusGenRootTypes['Project'][]; // [Project!]!
@@ -374,17 +370,13 @@ export interface NexusGenFieldTypes {
     id: number; // Int!
     tags: NexusGenRootTypes['Tag'][]; // [Tag!]!
     title: string; // String!
-    topic: NexusGenRootTypes['Topic']; // Topic!
     type: string; // String!
     votes_count: number; // Int!
   }
   Tag: { // field return type
+    icon: string | null; // String
     id: number; // Int!
-    title: string; // String!
-  }
-  Topic: { // field return type
-    icon: string; // String!
-    id: number; // Int!
+    isOfficial: boolean | null; // Boolean
     title: string; // String!
   }
   User: { // field return type
@@ -489,8 +481,8 @@ export interface NexusGenFieldTypeNames {
     id: 'Int'
     location: 'String'
     start_date: 'Date'
+    tags: 'Tag'
     title: 'String'
-    topics: 'Topic'
     website: 'String'
   }
   LnurlDetails: { // field return type name
@@ -534,7 +526,6 @@ export interface NexusGenFieldTypeNames {
   Query: { // field return type name
     allCategories: 'Category'
     allProjects: 'Project'
-    allTopics: 'Topic'
     getAllHackathons: 'Hackathon'
     getCategory: 'Category'
     getDonationsStats: 'DonationsStats'
@@ -546,7 +537,8 @@ export interface NexusGenFieldTypeNames {
     hottestProjects: 'Project'
     me: 'User'
     newProjects: 'Project'
-    popularTopics: 'Topic'
+    officialTags: 'Tag'
+    popularTags: 'Tag'
     profile: 'User'
     projectsByCategory: 'Project'
     searchProjects: 'Project'
@@ -575,17 +567,13 @@ export interface NexusGenFieldTypeNames {
     id: 'Int'
     tags: 'Tag'
     title: 'String'
-    topic: 'Topic'
     type: 'String'
     votes_count: 'Int'
   }
   Tag: { // field return type name
-    id: 'Int'
-    title: 'String'
-  }
-  Topic: { // field return type name
     icon: 'String'
     id: 'Int'
+    isOfficial: 'Boolean'
     title: 'String'
   }
   User: { // field return type name
@@ -658,7 +646,7 @@ export interface NexusGenArgTypes {
     }
     getAllHackathons: { // args
       sortBy?: string | null; // String
-      topic?: number | null; // Int
+      tag?: number | null; // Int
     }
     getCategory: { // args
       id: number; // Int!
@@ -666,8 +654,8 @@ export interface NexusGenArgTypes {
     getFeed: { // args
       skip?: number | null; // Int
       sortBy?: string | null; // String
+      tag?: number | null; // Int
       take: number | null; // Int
-      topic?: number | null; // Int
     }
     getLnurlDetailsForProject: { // args
       project_id: number; // Int!
diff --git a/api/functions/graphql/schema.graphql b/api/functions/graphql/schema.graphql
index 3c67804..8d9775d 100644
--- a/api/functions/graphql/schema.graphql
+++ b/api/functions/graphql/schema.graphql
@@ -78,8 +78,8 @@ type Hackathon {
   id: Int!
   location: String!
   start_date: Date!
+  tags: [Tag!]!
   title: String!
-  topics: [Topic!]!
   website: String!
 }
 
@@ -145,11 +145,10 @@ type Project {
 type Query {
   allCategories: [Category!]!
   allProjects(skip: Int = 0, take: Int = 50): [Project!]!
-  allTopics: [Topic!]!
-  getAllHackathons(sortBy: String, topic: Int): [Hackathon!]!
+  getAllHackathons(sortBy: String, tag: Int): [Hackathon!]!
   getCategory(id: Int!): Category!
   getDonationsStats: DonationsStats!
-  getFeed(skip: Int = 0, sortBy: String, take: Int = 10, topic: Int = 0): [Post!]!
+  getFeed(skip: Int = 0, sortBy: String, tag: Int = 0, take: Int = 10): [Post!]!
   getLnurlDetailsForProject(project_id: Int!): LnurlDetails!
   getPostById(id: Int!, type: POST_TYPE!): Post!
   getProject(id: Int!): Project!
@@ -157,7 +156,8 @@ type Query {
   hottestProjects(skip: Int = 0, take: Int = 50): [Project!]!
   me: User
   newProjects(skip: Int = 0, take: Int = 50): [Project!]!
-  popularTopics: [Topic!]!
+  officialTags: [Tag!]!
+  popularTags: [Tag!]!
   profile(id: Int!): User
   projectsByCategory(category_id: Int!, skip: Int = 0, take: Int = 10): [Project!]!
   searchProjects(search: String!, skip: Int = 0, take: Int = 50): [Project!]!
@@ -188,7 +188,6 @@ type Story implements PostBase {
   id: Int!
   tags: [Tag!]!
   title: String!
-  topic: Topic!
   type: String!
   votes_count: Int!
 }
@@ -199,17 +198,12 @@ input StoryInputType {
   id: Int
   tags: [String!]!
   title: String!
-  topicId: Int!
 }
 
 type Tag {
+  icon: String
   id: Int!
-  title: String!
-}
-
-type Topic {
-  icon: String!
-  id: Int!
+  isOfficial: Boolean
   title: String!
 }
 
diff --git a/api/functions/graphql/types/hackathon.js b/api/functions/graphql/types/hackathon.js
index 5b434f3..346ef25 100644
--- a/api/functions/graphql/types/hackathon.js
+++ b/api/functions/graphql/types/hackathon.js
@@ -20,10 +20,10 @@ const Hackathon = objectType({
         t.nonNull.date('end_date');
         t.nonNull.string('location');
         t.nonNull.string('website');
-        t.nonNull.list.nonNull.field('topics', {
-            type: "Topic",
+        t.nonNull.list.nonNull.field('tags', {
+            type: "Tag",
             resolve: (parent) => {
-                return prisma.hackathon.findUnique({ where: { id: parent.id } }).topics();
+                return prisma.hackathon.findUnique({ where: { id: parent.id } }).tags();
             }
         });
     }
@@ -36,10 +36,10 @@ const getAllHackathons = extendType({
             type: "Hackathon",
             args: {
                 sortBy: stringArg(),
-                topic: intArg(),
+                tag: intArg(),
             },
             resolve(_, args) {
-                const { sortBy, topic } = args;
+                const { sortBy, tag } = args;
                 return prisma.hackathon.findMany({
                     where: {
                         ...(sortBy === 'Upcoming' && {
@@ -57,10 +57,12 @@ const getAllHackathons = extendType({
                             }
                         }),
 
-                        ...(topic && {
-                            topics: {
+
+
+                        ...(tag && {
+                            tags: {
                                 some: {
-                                    id: topic
+                                    id: tag
                                 }
                             }
                         })
diff --git a/api/functions/graphql/types/index.js b/api/functions/graphql/types/index.js
index ddbf999..75e2db0 100644
--- a/api/functions/graphql/types/index.js
+++ b/api/functions/graphql/types/index.js
@@ -6,8 +6,10 @@ const post = require('./post')
 const users = require('./users')
 const hackathon = require('./hackathon')
 const donation = require('./donation')
+const tag = require('./tag')
 
 module.exports = {
+    ...tag,
     ...scalars,
     ...category,
     ...project,
diff --git a/api/functions/graphql/types/post.js b/api/functions/graphql/types/post.js
index 6d5b934..c1e0df1 100644
--- a/api/functions/graphql/types/post.js
+++ b/api/functions/graphql/types/post.js
@@ -32,15 +32,6 @@ const asQuestionType = asType('Question')
 const asBountyType = asType('Bounty')
 
 
-const Topic = objectType({
-    name: 'Topic',
-    definition(t) {
-        t.nonNull.int('id');
-        t.nonNull.string('title');
-        t.nonNull.string('icon');
-    }
-})
-
 const Author = objectType({
     name: 'Author',
     definition(t) {
@@ -52,39 +43,7 @@ const Author = objectType({
 })
 
 
-const allTopics = extendType({
-    type: "Query",
-    definition(t) {
-        t.nonNull.list.nonNull.field('allTopics', {
-            type: "Topic",
-            resolve: () => {
-                return prisma.topic.findMany({
 
-                });
-            }
-        })
-    }
-})
-
-
-const popularTopics = extendType({
-    type: "Query",
-    definition(t) {
-        t.nonNull.list.nonNull.field('popularTopics', {
-            type: "Topic",
-            resolve: () => {
-                return prisma.topic.findMany({
-                    take: 6,
-                    orderBy: {
-                        stories: {
-                            _count: 'desc'
-                        }
-                    },
-                });
-            }
-        })
-    }
-})
 
 const PostBase = interfaceType({
     name: 'PostBase',
@@ -132,14 +91,6 @@ const Story = objectType({
                 return post._count.comments;
             }
         });
-        t.nonNull.field('topic', {
-            type: "Topic",
-            resolve: parent => {
-                return prisma.story.findUnique({
-                    where: { id: parent.id }
-                }).topic()
-            }
-        })
         t.nonNull.field('author', {
             type: "Author",
             resolve: (parent) =>
@@ -158,7 +109,6 @@ const StoryInputType = inputObjectType({
         t.nonNull.string('body');
         t.nonNull.string('cover_image');
         t.nonNull.list.nonNull.string('tags');
-        t.nonNull.int('topicId');
     }
 })
 const createStory = extendType({
@@ -168,7 +118,7 @@ const createStory = extendType({
             type: 'Story',
             args: { data: StoryInputType },
             async resolve(_root, args, ctx) {
-                const { id, title, body, cover_image, tags, topicId } = args.data;
+                const { id, title, body, cover_image, tags } = args.data;
                 const user = await getUserByPubKey(ctx.userPubKey);
 
                 // Do some validation
@@ -215,11 +165,6 @@ const createStory = extendType({
                                         }
                                     })
                             },
-                            topic: {
-                                connect: {
-                                    id: topicId
-                                }
-                            },
                         }
                     })
 
@@ -244,11 +189,6 @@ const createStory = extendType({
                                     }
                                 })
                         },
-                        topic: {
-                            connect: {
-                                id: topicId
-                            }
-                        },
                         user: {
                             connect: {
                                 id: user.id,
@@ -398,11 +338,11 @@ const getFeed = extendType({
             args: {
                 ...paginationArgs({ take: 10 }),
                 sortBy: stringArg(), // all, popular, trending, newest
-                topic: intArg({
+                tag: intArg({
                     default: 0
                 })
             },
-            resolve(_, { take, skip, topic, sortBy, }) {
+            resolve(_, { take, skip, tag, sortBy, }) {
 
 
                 let orderBy = { createdAt: "desc" };
@@ -415,7 +355,13 @@ const getFeed = extendType({
                 return prisma.story.findMany({
                     orderBy: orderBy,
                     where: {
-                        topic_id: topic ? topic : undefined,
+                        ...(tag && {
+                            tags: {
+                                some: {
+                                    id: tag
+                                }
+                            },
+                        })
                     },
                     skip,
                     take,
@@ -485,7 +431,6 @@ module.exports = {
     // Types
     POST_TYPE,
     Author,
-    Topic,
     PostBase,
     BountyApplication,
     Bounty,
@@ -495,8 +440,6 @@ module.exports = {
     PostComment,
     Post,
     // Queries
-    allTopics,
-    popularTopics,
     getFeed,
     getPostById,
     getTrendingPosts,
diff --git a/api/functions/graphql/types/project.js b/api/functions/graphql/types/project.js
index 52ca97e..a9fed49 100644
--- a/api/functions/graphql/types/project.js
+++ b/api/functions/graphql/types/project.js
@@ -64,19 +64,7 @@ const Award = objectType({
     }
 })
 
-const Tag = objectType({
-    name: 'Tag',
-    definition(t) {
-        t.nonNull.int('id');
-        t.nonNull.string('title');
-        // t.nonNull.list.nonNull.field('project', {
-        //     type: "Project",
-        //     resolve: (parent) => {
-        //         return prisma.tag.findUnique({ where: { id: parent.id } }).project();
-        //     }
-        // })
-    }
-})
+
 
 
 const getProject = extendType({
@@ -255,7 +243,6 @@ module.exports = {
     // Types
     Project,
     Award,
-    Tag,
     // Queries
     getProject,
     allProjects,
diff --git a/api/functions/graphql/types/tag.js b/api/functions/graphql/types/tag.js
new file mode 100644
index 0000000..a482073
--- /dev/null
+++ b/api/functions/graphql/types/tag.js
@@ -0,0 +1,59 @@
+const { objectType, extendType } = require("nexus");
+const { prisma } = require('../../../prisma');
+
+const Tag = objectType({
+    name: 'Tag',
+    definition(t) {
+        t.nonNull.int('id');
+        t.nonNull.string('title');
+        t.string('icon');
+        t.boolean('isOfficial');
+    }
+});
+
+const officialTags = extendType({
+    type: "Query",
+    definition(t) {
+        t.nonNull.list.nonNull.field('officialTags', {
+            type: "Tag",
+            resolve: () => {
+                return prisma.tag.findMany({
+                    where: {
+                        isOfficial: true
+                    }
+                });
+            }
+        })
+    }
+})
+
+const popularTags = extendType({
+    type: "Query",
+    definition(t) {
+        t.nonNull.list.nonNull.field('popularTags', {
+            type: "Tag",
+            resolve: () => {
+                return prisma.tag.findMany({
+                    where: {
+                        isOfficial: true
+                    },
+                    take: 8,
+                    orderBy: {
+                        stories: {
+                            _count: 'desc'
+                        }
+                    },
+                });
+            }
+        })
+    }
+})
+
+module.exports = {
+    // Types
+    Tag,
+
+    // Queries
+    popularTags,
+    officialTags,
+}
\ No newline at end of file
diff --git a/prisma/migrations/20220614113018_drop_topics_and_update_tags/migration.sql b/prisma/migrations/20220614113018_drop_topics_and_update_tags/migration.sql
new file mode 100644
index 0000000..9d25885
--- /dev/null
+++ b/prisma/migrations/20220614113018_drop_topics_and_update_tags/migration.sql
@@ -0,0 +1,46 @@
+/*
+  Warnings:
+
+  - You are about to drop the `Topic` table. If the table is not empty, all the data it contains will be lost.
+  - You are about to drop the `_HackathonToTopic` table. If the table is not empty, all the data it contains will be lost.
+
+*/
+-- DropForeignKey
+ALTER TABLE "Question" DROP CONSTRAINT "Question_topic_id_fkey";
+
+-- DropForeignKey
+ALTER TABLE "Story" DROP CONSTRAINT "Story_topic_id_fkey";
+
+-- DropForeignKey
+ALTER TABLE "_HackathonToTopic" DROP CONSTRAINT "_HackathonToTopic_A_fkey";
+
+-- DropForeignKey
+ALTER TABLE "_HackathonToTopic" DROP CONSTRAINT "_HackathonToTopic_B_fkey";
+
+-- AlterTable
+ALTER TABLE "Tag" ADD COLUMN     "icon" TEXT,
+ADD COLUMN     "isOfficial" BOOLEAN NOT NULL DEFAULT false;
+
+-- DropTable
+DROP TABLE "Topic";
+
+-- DropTable
+DROP TABLE "_HackathonToTopic";
+
+-- CreateTable
+CREATE TABLE "_HackathonToTag" (
+    "A" INTEGER NOT NULL,
+    "B" INTEGER NOT NULL
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "_HackathonToTag_AB_unique" ON "_HackathonToTag"("A", "B");
+
+-- CreateIndex
+CREATE INDEX "_HackathonToTag_B_index" ON "_HackathonToTag"("B");
+
+-- AddForeignKey
+ALTER TABLE "_HackathonToTag" ADD FOREIGN KEY ("A") REFERENCES "Hackathon"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "_HackathonToTag" ADD FOREIGN KEY ("B") REFERENCES "Tag"("id") ON DELETE CASCADE ON UPDATE CASCADE;
diff --git a/prisma/migrations/20220614124708_remove_topic_id_col/migration.sql b/prisma/migrations/20220614124708_remove_topic_id_col/migration.sql
new file mode 100644
index 0000000..b2fac15
--- /dev/null
+++ b/prisma/migrations/20220614124708_remove_topic_id_col/migration.sql
@@ -0,0 +1,12 @@
+/*
+  Warnings:
+
+  - You are about to drop the column `topic_id` on the `Question` table. All the data in the column will be lost.
+  - You are about to drop the column `topic_id` on the `Story` table. All the data in the column will be lost.
+
+*/
+-- AlterTable
+ALTER TABLE "Question" DROP COLUMN "topic_id";
+
+-- AlterTable
+ALTER TABLE "Story" DROP COLUMN "topic_id";
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index c682ca7..764540c 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -12,12 +12,15 @@ generator client {
 // -----------------
 
 model Tag {
-  id    Int    @id @default(autoincrement())
-  title String @unique
+  id         Int     @id @default(autoincrement())
+  title      String  @unique
+  icon       String?
+  isOfficial Boolean @default(false)
 
-  project   Project[]
-  stories   Story[]
-  questions Question[]
+  project    Project[]
+  stories    Story[]
+  questions  Question[]
+  hackathons Hackathon[]
 }
 
 model Vote {
@@ -119,8 +122,6 @@ model Story {
   cover_image String
   votes_count Int      @default(0)
 
-  topic    Topic @relation(fields: [topic_id], references: [id])
-  topic_id Int
 
   tags Tag[]
 
@@ -139,8 +140,6 @@ model Question {
   excerpt     String
   votes_count Int      @default(0)
 
-  topic    Topic @relation(fields: [topic_id], references: [id])
-  topic_id Int
 
   tags Tag[]
 
@@ -150,16 +149,6 @@ model Question {
   comments PostComment[] @relation("QuestionComment")
 }
 
-model Topic {
-  id    Int    @id @default(autoincrement())
-  title String @unique
-  icon  String
-
-  stories    Story[]
-  questions  Question[]
-  hackathons Hackathon[]
-}
-
 model PostComment {
   id          Int      @id @default(autoincrement())
   body        String
@@ -196,7 +185,7 @@ model Hackathon {
   website     String
   votes_count Int      @default(0)
 
-  topics Topic[]
+  tags Tag[]
 }
 
 // -----------------
diff --git a/src/Components/Inputs/FilesInput/FilesThumbnails.tsx b/src/Components/Inputs/FilesInput/FilesThumbnails.tsx
index 72cdcd5..362528e 100644
--- a/src/Components/Inputs/FilesInput/FilesThumbnails.tsx
+++ b/src/Components/Inputs/FilesInput/FilesThumbnails.tsx
@@ -1,6 +1,4 @@
-import React, { useMemo } from 'react'
-import { MdClose } from 'react-icons/md';
-import IconButton from 'src/Components/IconButton/IconButton';
+import { useMemo } from 'react'
 import FileThumbnail from './FileThumbnail';
 
 interface Props {
diff --git a/src/Components/Inputs/TagsInput/TagsInput.tsx b/src/Components/Inputs/TagsInput/TagsInput.tsx
index 2e44606..6704e1d 100644
--- a/src/Components/Inputs/TagsInput/TagsInput.tsx
+++ b/src/Components/Inputs/TagsInput/TagsInput.tsx
@@ -1,10 +1,20 @@
-import { motion } from "framer-motion";
-import { useState } from "react";
+
 import { useController } from "react-hook-form";
 import Badge from "src/Components/Badge/Badge";
-import { Tag as ApiTag } from "src/utils/interfaces";
+import CreatableSelect from 'react-select/creatable';
+import { OnChangeValue, StylesConfig, components, OptionProps } from "react-select";
+import { useOfficialTagsQuery } from "src/graphql";
 
-type Tag = Pick<ApiTag, 'title'>
+interface Option {
+    readonly label: string;
+    readonly value: string;
+    readonly icon: string | null
+}
+
+type Tag = {
+    title: string,
+    icon: string | null
+}
 
 interface Props {
     classes?: {
@@ -17,6 +27,46 @@ interface Props {
 }
 
 
+const transformer = {
+    tagToOption: (tag: Tag): Option => ({ label: tag.title, value: tag.title, icon: tag.icon }),
+    optionToTag: (o: Option): Tag => ({ title: o.value, icon: null })
+}
+
+const OptionComponent = (props: OptionProps<Option>) => {
+    return (
+        <div>
+            <components.Option {...props} className='flex items-start'>
+                <span className={`rounded-8 w-40 h-40 text-center py-8`}>
+                    {props.data.icon}
+                </span>
+                <span className="self-center px-16">
+                    {props.data.label}
+                </span>
+            </components.Option>
+
+        </div>
+    );
+};
+
+const colourStyles: StylesConfig = {
+
+    control: (styles, state) => ({
+        ...styles,
+        padding: '1px 4px',
+        borderRadius: 8,
+    }),
+    indicatorSeparator: (styles, state) => ({
+        ...styles,
+        display: "none"
+    }),
+    input: (styles, state) => ({
+        ...styles,
+        " input": {
+            boxShadow: 'none !important'
+        },
+    }),
+}
+
 
 export default function TagsInput({
     classes,
@@ -24,20 +74,20 @@ export default function TagsInput({
     max = 5,
     ...props }: Props) {
 
-
-    const [inputText, setInputText] = useState("");
+    const officalTags = useOfficialTagsQuery();
 
     const { field: { value, onChange, onBlur } } = useController({
         name: props.name ?? "tags",
         control: props.control,
     })
 
-    const handleSubmit = () => {
-        onChange([...value, { title: inputText }]);
-        setInputText('');
+
+    const handleChange = (newValue: OnChangeValue<Option, true>,) => {
+        onChange([...value, ...newValue.map(transformer.optionToTag)]);
         onBlur();
     }
 
+
     const handleRemove = (idx: number) => {
         onChange((value as Tag[]).filter((_, i) => idx !== i))
         onBlur();
@@ -45,35 +95,37 @@ export default function TagsInput({
 
     const isDisabled = value.length >= max;
 
+    const tagsOptions = (officalTags.data?.officialTags ?? []).filter(t => !value.some((v: Tag) => v.title === t.title)).map(transformer.tagToOption);
 
     return (
         <div className={`${classes?.container}`}>
-            <div className="input-wrapper relative">
-                <input
-                    disabled={isDisabled}
-                    type='text'
-                    className={`input-text inline-block 
-                    ${isDisabled && 'opacity-50'}
-                    ${classes?.input}`}
-                    placeholder={placeholder}
-                    value={inputText}
-                    onChange={(e) => setInputText(e.target.value)}
-                    onKeyPress={e => {
-                        if (e.key === 'Enter' && inputText.trim().length > 1) { e.preventDefault(); handleSubmit() }
-                    }}
-                />
-                {inputText.length > 2 && <motion.span
-                    initial={{ scale: 1, y: "-50%" }}
-                    animate={{ scale: 1.05 }}
-                    transition={{
-                        repeat: Infinity,
-                        repeatType: 'mirror',
-                        duration: .9
-                    }}
-                    className="text-gray-500 absolute top-1/2 right-16">
-                    Enter to Insert
-                </motion.span>}
-            </div>
+            <CreatableSelect
+                isLoading={officalTags.loading}
+                options={tagsOptions}
+                isMulti
+                isDisabled={isDisabled}
+                placeholder={placeholder}
+                isClearable
+
+
+                value={[]}
+                onChange={handleChange as any}
+                onBlur={onBlur}
+                components={{
+                    Option: OptionComponent,
+                    MultiValue: () => <></>
+                }}
+
+                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>
diff --git a/src/Components/Inputs/TagsInput/officalTags.graphql b/src/Components/Inputs/TagsInput/officalTags.graphql
new file mode 100644
index 0000000..0cc6388
--- /dev/null
+++ b/src/Components/Inputs/TagsInput/officalTags.graphql
@@ -0,0 +1,7 @@
+query OfficialTags {
+  officialTags {
+    id
+    title
+    icon
+  }
+}
diff --git a/src/Components/Navbar/Navbar.tsx b/src/Components/Navbar/Navbar.tsx
index 0fac83f..8bbe721 100644
--- a/src/Components/Navbar/Navbar.tsx
+++ b/src/Components/Navbar/Navbar.tsx
@@ -1,16 +1,11 @@
 import NavMobile from "./NavMobile";
 import { MdComment, MdHomeFilled, MdLocalFireDepartment } from "react-icons/md";
-import { IoExtensionPuzzle } from "react-icons/io5";
-import { useCallback, useEffect, useState } from "react";
-import { useAppDispatch, useAppSelector, useMediaQuery } from "src/utils/hooks";
-import { openModal } from "src/redux/features/modals.slice";
+import { useEffect, } from "react";
+import { useAppDispatch, useMediaQuery } from "src/utils/hooks";
 import { setNavHeight } from "src/redux/features/ui.slice";
 import NavDesktop from "./NavDesktop";
 import { MEDIA_QUERIES } from "src/utils/theme/media_queries";
 import { IoMdTrophy } from "react-icons/io";
-import { useLocation } from "react-router-dom";
-import { useMeQuery } from "src/graphql";
-import { setUser } from "src/redux/features/user.slice";
 
 
 export const navLinks = [
diff --git a/src/Components/Navbar/Search/SearchResults/SearchResults.tsx b/src/Components/Navbar/Search/SearchResults/SearchResults.tsx
index a9f2736..be42762 100644
--- a/src/Components/Navbar/Search/SearchResults/SearchResults.tsx
+++ b/src/Components/Navbar/Search/SearchResults/SearchResults.tsx
@@ -1,6 +1,5 @@
 
 import { openModal } from 'src/redux/features/modals.slice';
-import { openProject } from 'src/redux/features/project.slice';
 import { useAppDispatch } from 'src/utils/hooks';
 import { ProjectSearchItem } from '../Search';
 import SearchProjectCard from '../SearchProjectCard/SearchProjectCard';
diff --git a/src/Components/ProtectedRoute/ProtectedRoute.tsx b/src/Components/ProtectedRoute/ProtectedRoute.tsx
index 7eabbf6..6416840 100644
--- a/src/Components/ProtectedRoute/ProtectedRoute.tsx
+++ b/src/Components/ProtectedRoute/ProtectedRoute.tsx
@@ -1,5 +1,5 @@
 import { PropsWithChildren } from "react";
-import { Navigate, Outlet } from "react-router-dom";
+import { Navigate, } from "react-router-dom";
 import { useAppSelector } from "src/utils/hooks";
 
 interface Props {
diff --git a/src/features/Hackathons/Components/HackathonCard/HackathonCard.tsx b/src/features/Hackathons/Components/HackathonCard/HackathonCard.tsx
index ba5a9d4..a8067a2 100644
--- a/src/features/Hackathons/Components/HackathonCard/HackathonCard.tsx
+++ b/src/features/Hackathons/Components/HackathonCard/HackathonCard.tsx
@@ -4,9 +4,18 @@ import Button from "src/Components/Button/Button"
 import dayjs from "dayjs";
 import advancedFormat from 'dayjs/plugin/advancedFormat'
 import { trimText } from "src/utils/helperFunctions";
+import { Override } from "src/utils/interfaces";
+import { Tag } from "src/graphql";
 dayjs.extend(advancedFormat)
 
-export type HackathonCardType = Hackathon;
+export type HackathonCardType = Override<Hackathon,
+    {
+        tags: Pick<Tag,
+            | 'id'
+            | 'title'
+            | 'icon'>[]
+    }
+>;
 
 interface Props {
     hackathon: HackathonCardType
@@ -32,7 +41,7 @@ export default function HackathonCard({ hackathon }: Props) {
                     </p>
                 </div>
                 <div className="mt-16 flex flex-wrap gap-8">
-                    {hackathon.topics.map(topic => <div key={topic.id} className="p-8 bg-gray-50 rounded-8 text-body5">{topic.icon} {topic.title}</div>)}
+                    {hackathon.tags.map(tag => <div key={tag.id} className="p-8 bg-gray-50 rounded-8 text-body5">{tag.icon} {tag.title}</div>)}
                 </div>
                 <div className="mt-auto"></div>
                 <Button href={hackathon.website} newTab color="gray" fullWidth className="mt-16">
diff --git a/src/features/Hackathons/Components/TopicsFilter/TopicsFilter.stories.tsx b/src/features/Hackathons/Components/TopicsFilter/TopicsFilter.stories.tsx
deleted file mode 100644
index d8c9eb7..0000000
--- a/src/features/Hackathons/Components/TopicsFilter/TopicsFilter.stories.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-
-import TopicsFilter from './TopicsFilter';
-
-export default {
-    title: 'Hackathons/Components/Filters/Topics',
-    component: TopicsFilter,
-    argTypes: {
-        backgroundColor: { control: 'color' },
-    },
-} as ComponentMeta<typeof TopicsFilter>;
-
-
-const Template: ComponentStory<typeof TopicsFilter> = (args) => <div className="max-w-[326px]"><TopicsFilter {...args as any} ></TopicsFilter></div>
-
-export const Default = Template.bind({});
-Default.args = {
-}
-
-
diff --git a/src/features/Hackathons/Components/TopicsFilter/TopicsFilter.tsx b/src/features/Hackathons/Components/TopicsFilter/TopicsFilter.tsx
deleted file mode 100644
index ed807c1..0000000
--- a/src/features/Hackathons/Components/TopicsFilter/TopicsFilter.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import { useMediaQuery } from 'src/utils/hooks';
-import React, { useState } from 'react'
-import Skeleton from 'react-loading-skeleton';
-import Slider from 'src/Components/Slider/Slider';
-import { useAllTopicsQuery, usePopularTopicsQuery } from 'src/graphql';
-import { MEDIA_QUERIES } from 'src/utils/theme';
-
-
-
-interface Props {
-    filterChanged?: (newFilter: number | null) => void
-}
-
-export default function PopularTopicsFilter({ filterChanged }: Props) {
-
-    const [selected, setSelected] = useState<number | null>(null);
-
-    const topicsQuery = useAllTopicsQuery();
-
-
-    const filterClicked = (_newValue: number) => {
-        const newValue = selected !== _newValue ? _newValue : null;
-        setSelected(newValue);
-        filterChanged?.(newValue);
-    }
-
-    const isMdScreen = useMediaQuery(MEDIA_QUERIES.isMedium)
-
-    return (
-        <div className='overflow-hidden'>
-            {isMdScreen ?
-                <div className='bg-white border-2 rounded-12 p-16 overflow-hidden'>
-                    <p className="text-body2 font-bolder text-black mb-16">Topics</p>
-                    <ul className=' flex flex-col gap-16'>
-                        {topicsQuery.loading ?
-                            Array(3).fill(0).map((_, idx) => <li
-                                key={idx}
-                                className={`flex items-start rounded-8 font-bold`}
-
-                            >
-                                <span className='bg-gray-50 rounded-8 w-40 h-40 text-center py-8'> </span>
-                                <span className="self-center px-16"><Skeleton width={'7ch'} />
-                                </span>
-                            </li>
-                            )
-                            :
-                            topicsQuery.data?.allTopics.map((topic, idx) => <li
-                                key={topic.id}
-                                className={`flex items-start rounded-8 cursor-pointer font-bold  
-                                active:scale-95 transition-transform
-                                ${topic.id === selected ? 'bg-gray-200' : 'hover:bg-gray-100'}`}
-                                onClick={() => filterClicked(topic.id)}
-                                role='button'
-                            >
-                                <span className={`${topic.id !== selected && 'bg-gray-50'} rounded-8 w-40 h-40 text-center py-8`}>{topic.icon}</span>
-                                <span className="self-center px-16">
-                                    {topic.title}
-                                </span>
-                            </li>)}
-                    </ul>
-                </div>
-                :
-                <>
-                    {
-                        topicsQuery.loading ?
-                            <ul className="flex gap-8 ">
-                                {Array(4).fill(0).map((_, idx) => <div key={idx} className="py-12 px-16 bg-gray-100 rounded-8 text-body5"><span className="opacity-0">Category</span></div>)}
-                            </ul>
-                            :
-                            <Slider>
-                                {topicsQuery.data?.allTopics.map(topic =>
-                                    <div
-                                        key={topic.id}
-                                        onClick={() => filterClicked(topic.id)}
-                                        className={`${topic.id === selected ? 'bg-gray-200' : "bg-gray-100"} py-12 px-16 rounded-8 text-body5`}
-                                    >{topic.icon} {topic.title}</div>)}
-                            </Slider>
-                    }
-                </>
-            }
-        </div>
-
-
-    )
-}
diff --git a/src/features/Hackathons/Components/TopicsFilter/allTopics.graphql b/src/features/Hackathons/Components/TopicsFilter/allTopics.graphql
deleted file mode 100644
index 0cb6368..0000000
--- a/src/features/Hackathons/Components/TopicsFilter/allTopics.graphql
+++ /dev/null
@@ -1,7 +0,0 @@
-query allTopics {
-  allTopics {
-    id
-    title
-    icon
-  }
-}
diff --git a/src/features/Hackathons/pages/HackathonsPage/HackathonsPage.tsx b/src/features/Hackathons/pages/HackathonsPage/HackathonsPage.tsx
index e8d1d25..453300b 100644
--- a/src/features/Hackathons/pages/HackathonsPage/HackathonsPage.tsx
+++ b/src/features/Hackathons/pages/HackathonsPage/HackathonsPage.tsx
@@ -12,12 +12,12 @@ import { Helmet } from 'react-helmet'
 export default function HackathonsPage() {
 
     const [sortByFilter, setSortByFilter] = useState<string | null>('Upcoming')
-    const [topicsFilter, setTopicsFilter] = useState<number | null>(null)
+    const [tagFilter, setTagFilter] = useState<number | null>(null)
 
     const hackathonsQuery = useGetHackathonsQuery({
         variables: {
             sortBy: sortByFilter,
-            topic: Number(topicsFilter)
+            tag: Number(tagFilter)
         },
     })
     const { navHeight } = useAppSelector((state) => ({
diff --git a/src/features/Hackathons/pages/HackathonsPage/allHackathons.graphql b/src/features/Hackathons/pages/HackathonsPage/allHackathons.graphql
index 39e93ee..622a0a5 100644
--- a/src/features/Hackathons/pages/HackathonsPage/allHackathons.graphql
+++ b/src/features/Hackathons/pages/HackathonsPage/allHackathons.graphql
@@ -1,5 +1,5 @@
-query getHackathons($sortBy: String, $topic: Int) {
-  getAllHackathons(sortBy: $sortBy, topic: $topic) {
+query getHackathons($sortBy: String, $tag: Int) {
+  getAllHackathons(sortBy: $sortBy, tag: $tag) {
     id
     title
     description
@@ -8,7 +8,7 @@ query getHackathons($sortBy: String, $topic: Int) {
     end_date
     location
     website
-    topics {
+    tags {
       id
       title
       icon
diff --git a/src/features/Posts/Components/PostCard/BountyCard/BountyCard.tsx b/src/features/Posts/Components/PostCard/BountyCard/BountyCard.tsx
index ce0872a..da84c26 100644
--- a/src/features/Posts/Components/PostCard/BountyCard/BountyCard.tsx
+++ b/src/features/Posts/Components/PostCard/BountyCard/BountyCard.tsx
@@ -6,6 +6,7 @@ import Badge from "src/Components/Badge/Badge"
 import Button from "src/Components/Button/Button"
 import { Link } from "react-router-dom"
 import VoteButton from "src/Components/VoteButton/VoteButton"
+import { Tag } from "src/graphql"
 
 export type BountyCardType = Pick<Bounty,
     | 'id'
@@ -17,9 +18,10 @@ export type BountyCardType = Pick<Bounty,
     | 'excerpt'
     | 'votes_count'
     | "reward_amount"
-    | "tags"
     | "applicants_count"
->;
+> & {
+    tags: Array<Pick<Tag, 'id' | "title">>
+};
 interface Props {
     bounty: BountyCardType
 }
diff --git a/src/features/Posts/Components/PostCard/QuestionCard/QuestionCard.tsx b/src/features/Posts/Components/PostCard/QuestionCard/QuestionCard.tsx
index a66f973..06ab5be 100644
--- a/src/features/Posts/Components/PostCard/QuestionCard/QuestionCard.tsx
+++ b/src/features/Posts/Components/PostCard/QuestionCard/QuestionCard.tsx
@@ -6,6 +6,7 @@ import Badge from "src/Components/Badge/Badge"
 import { Link } from "react-router-dom"
 import { trimText } from "src/utils/helperFunctions"
 import VoteButton from "src/Components/VoteButton/VoteButton"
+import { Tag } from "src/graphql"
 
 export type QuestionCardType = Pick<Question,
     | 'id'
@@ -15,7 +16,6 @@ export type QuestionCardType = Pick<Question,
     | 'author'
     | 'excerpt'
     | 'votes_count'
-    | "tags"
     | "answers_count"
 > & {
     comments: Array<Pick<Question['comments'][number],
@@ -24,6 +24,7 @@ export type QuestionCardType = Pick<Question,
         | 'body'
         | 'createdAt'
     >>
+    tags: Array<Pick<Tag, 'id' | "title">>
 };
 interface Props {
     question: QuestionCardType
diff --git a/src/features/Posts/Components/PostCard/StoryCard/StoryCard.tsx b/src/features/Posts/Components/PostCard/StoryCard/StoryCard.tsx
index 211cc2c..bfaaab3 100644
--- a/src/features/Posts/Components/PostCard/StoryCard/StoryCard.tsx
+++ b/src/features/Posts/Components/PostCard/StoryCard/StoryCard.tsx
@@ -4,7 +4,8 @@ import { BiComment } from 'react-icons/bi'
 import { Link } from "react-router-dom"
 import VoteButton from "src/Components/VoteButton/VoteButton"
 import { useVote } from "src/utils/hooks"
-import { Vote_Item_Type } from 'src/graphql';
+import { Tag, Vote_Item_Type } from 'src/graphql';
+import Badge from "src/Components/Badge/Badge"
 
 export type StoryCardType = Pick<Story,
     | 'id'
@@ -16,7 +17,9 @@ export type StoryCardType = Pick<Story,
     | 'excerpt'
     | 'votes_count'
     | 'comments_count'
->;
+> & {
+    tags: Array<Pick<Tag, 'id' | "title">>
+};
 
 interface Props {
     story: StoryCardType
@@ -37,6 +40,11 @@ export default function StoryCard({ story }: Props) {
                     <h2 className="text-h5 font-bolder mt-16">{story.title}</h2>
                 </Link>
                 <p className="text-body4 text-gray-600 mt-8">{story.excerpt}...</p>
+                <div className="flex gap-8 mt-8">
+                    {story.tags.map(tag => <Badge key={tag.id} size='sm'>
+                        {tag.title}
+                    </Badge>)}
+                </div>
 
                 <hr className="my-16 bg-gray-200" />
                 <div className="flex gap-24 items-center">
diff --git a/src/features/Posts/pages/CreatePostPage/Components/StoryForm/StoryForm.tsx b/src/features/Posts/pages/CreatePostPage/Components/StoryForm/StoryForm.tsx
index ed9707d..5e44fb3 100644
--- a/src/features/Posts/pages/CreatePostPage/Components/StoryForm/StoryForm.tsx
+++ b/src/features/Posts/pages/CreatePostPage/Components/StoryForm/StoryForm.tsx
@@ -6,9 +6,8 @@ import FilesInput from "src/Components/Inputs/FilesInput/FilesInput";
 import TagsInput from "src/Components/Inputs/TagsInput/TagsInput";
 import * as yup from "yup";
 import ContentEditor from "../ContentEditor/ContentEditor";
-import { Topic, useCreateStoryMutation } from 'src/graphql'
+import { useCreateStoryMutation } from 'src/graphql'
 import { useNavigate } from 'react-router-dom'
-import TopicsInput from '../TopicsInput/TopicsInput'
 import { useAppDispatch, useAppSelector } from 'src/utils/hooks';
 import { stageStory } from 'src/redux/features/staging.slice'
 import { Override } from 'src/utils/interfaces';
@@ -32,7 +31,6 @@ const FileSchema = yup.lazy((value: string | File[]) => {
 
 const schema = yup.object({
     title: yup.string().required().min(10),
-    topic: yup.object().nullable().required(),
     tags: yup.array().required().min(1),
     body: yup.string().required().min(50, 'you have to write at least 10 words'),
     cover_image: yup.array().of(FileSchema as any)
@@ -43,7 +41,6 @@ const schema = yup.object({
 interface IFormInputs {
     id: number | null
     title: string
-    topic: NestedValue<Topic> | null
     tags: NestedValue<{ title: string }[]>
     cover_image: NestedValue<File[]> | NestedValue<string[]>
     body: string
@@ -52,7 +49,6 @@ interface IFormInputs {
 
 
 export type CreateStoryType = Override<IFormInputs, {
-    topic: Topic | null
     tags: { title: string }[]
     cover_image: File[] | string[]
 }>
@@ -70,7 +66,6 @@ export default function StoryForm() {
         defaultValues: {
             id: story?.id ?? null,
             title: story?.title ?? '',
-            topic: story?.topic ?? null,
             cover_image: story?.cover_image ?? [],
             tags: story?.tags ?? [],
             body: story?.body ?? '',
@@ -113,7 +108,6 @@ export default function StoryForm() {
                     body: data.body,
                     tags: data.tags.map(t => t.title),
                     cover_image: data.cover_image[0] as string,
-                    topicId: 1,
                 },
             }
         })
@@ -160,30 +154,11 @@ export default function StoryForm() {
                             {errors.title.message}
                         </p>}
 
-                        <p className="text-body5 mt-16">
-                            Topic
-                        </p>
-                        <div className="mt-16">
-                            <Controller
-                                control={control}
-                                name="topic"
-                                render={({ field: { onChange, value, onBlur } }) => (
-                                    <TopicsInput
-                                        value={value}
-                                        onChange={onChange}
-                                        onBlur={onBlur}
-                                    />
-                                )}
-                            />
-                        </div>
-                        {errors.topic && <p className="input-error">
-                            {errors.topic.message}
-                        </p>}
                         <p className="text-body5 mt-16">
                             Tags
                         </p>
                         <TagsInput
-                            placeholder="Enter your tag and click enter. You can add multiple tags to your post"
+                            placeholder="Search from popular tags or add your own by clicking Enter."
                             classes={{ container: 'mt-8' }}
                         />
                         {errors.tags && <p className="input-error">
diff --git a/src/features/Posts/pages/CreatePostPage/Components/StoryForm/createStory.graphql b/src/features/Posts/pages/CreatePostPage/Components/StoryForm/createStory.graphql
index 17ad596..f854c83 100644
--- a/src/features/Posts/pages/CreatePostPage/Components/StoryForm/createStory.graphql
+++ b/src/features/Posts/pages/CreatePostPage/Components/StoryForm/createStory.graphql
@@ -8,11 +8,6 @@ mutation createStory($data: StoryInputType) {
       id
       title
     }
-    topic {
-      id
-      title
-      icon
-    }
     votes_count
     type
     cover_image
diff --git a/src/features/Posts/pages/CreatePostPage/Components/TopicsInput/TopicsInput.tsx b/src/features/Posts/pages/CreatePostPage/Components/TopicsInput/TopicsInput.tsx
deleted file mode 100644
index ba95f7d..0000000
--- a/src/features/Posts/pages/CreatePostPage/Components/TopicsInput/TopicsInput.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from 'react'
-import AutoComplete from 'src/Components/Inputs/Autocomplete/Autocomplete'
-import { Topic, useAllTopicsQuery } from 'src/graphql'
-import { ControlledStateHandler } from 'src/utils/interfaces';
-
-
-
-type Props<IsMulti extends boolean> = ControlledStateHandler<Topic, IsMulti>
-
-
-
-export default function TopicsInput<IsMulti extends boolean = false>(props: Props<IsMulti>) {
-
-    const topicsQuery = useAllTopicsQuery();
-
-    return (
-        <AutoComplete
-            isClearable
-            placeholder='Choose a topic'
-            options={topicsQuery.data?.allTopics!}
-            labelField='title'
-            valueField='id'
-            isMulti={props.isMulti}
-            isLoading={topicsQuery.loading}
-            value={props.value}
-            onChange={props.onChange}
-            onBlur={props.onBlur}
-
-        />
-    )
-}
diff --git a/src/features/Posts/pages/FeedPage/FeedPage.tsx b/src/features/Posts/pages/FeedPage/FeedPage.tsx
index 56b547a..283b2dd 100644
--- a/src/features/Posts/pages/FeedPage/FeedPage.tsx
+++ b/src/features/Posts/pages/FeedPage/FeedPage.tsx
@@ -5,18 +5,19 @@ import { useFeedQuery } from 'src/graphql'
 import { useAppSelector, useInfiniteQuery } from 'src/utils/hooks'
 import PostsList from '../../Components/PostsList/PostsList'
 import TrendingCard from '../../Components/TrendingCard/TrendingCard'
-import PopularTopicsFilter from './PopularTopicsFilter/PopularTopicsFilter'
+import PopularTagsFilter, { FilterTag } from './PopularTagsFilter/PopularTagsFilter'
 import SortBy from './SortBy/SortBy'
 import styles from './styles.module.scss'
 import { Helmet } from "react-helmet";
 import Button from 'src/Components/Button/Button'
 import { FaDiscord } from 'react-icons/fa'
+import { FiArrowRight } from 'react-icons/fi'
 
 
 export default function FeedPage() {
 
     const [sortByFilter, setSortByFilter] = useState<string | null>(null)
-    const [topicFilter, setTopicFilter] = useState<number | null>(null)
+    const [tagFilter, setTagFilter] = useState<FilterTag | null>(null)
 
 
     const feedQuery = useFeedQuery({
@@ -24,11 +25,11 @@ export default function FeedPage() {
             take: 10,
             skip: 0,
             sortBy: sortByFilter,
-            topic: topicFilter
+            tag: tagFilter?.id ?? null
         },
     })
     const { fetchMore, isFetchingMore, variablesChanged } = useInfiniteQuery(feedQuery, 'getFeed')
-    useUpdateEffect(variablesChanged, [sortByFilter, topicFilter]);
+    useUpdateEffect(variablesChanged, [sortByFilter, tagFilter]);
 
     const { navHeight, isLoggedIn } = useAppSelector((state) => ({
         navHeight: state.ui.navHeight,
@@ -45,7 +46,19 @@ export default function FeedPage() {
             <div
                 className={`page-container pt-16 w-full ${styles.grid}`}
             >
-                <h1 id='title' className="text-h2 font-bolder">Stories ✍🏼</h1>
+                <div id="title">
+                    {tagFilter && <p className="text-body6 text-gray-500 font-medium mb-8">
+                        <span className='cursor-pointer' onClick={() => setTagFilter(null)}>Stories </span>
+                        <FiArrowRight />
+                        <span> {tagFilter.title}</span>
+                    </p>}
+                    <h1 className="text-h2 font-bolder">{
+                        tagFilter ?
+                            <>{tagFilter.icon} {tagFilter.title}</>
+                            :
+                            "Stories ✍🏼"
+                    }</h1>
+                </div>
                 <div id="sort-by">
                     <SortBy
                         filterChanged={setSortByFilter}
@@ -71,12 +84,13 @@ export default function FeedPage() {
                                 color='primary'
                                 fullWidth
                             >
-                                Create a story
+                                Write a story
                             </Button>}
                         <div className="my-24"></div>
                         <div className="my-24"></div>
-                        <PopularTopicsFilter
-                            filterChanged={setTopicFilter}
+                        <PopularTagsFilter
+                            value={tagFilter}
+                            onChange={setTagFilter as any}
                         />
 
                     </div>
diff --git a/src/features/Posts/pages/FeedPage/PopularTagsFilter/PopularTags.stories.tsx b/src/features/Posts/pages/FeedPage/PopularTagsFilter/PopularTags.stories.tsx
new file mode 100644
index 0000000..b7324dd
--- /dev/null
+++ b/src/features/Posts/pages/FeedPage/PopularTagsFilter/PopularTags.stories.tsx
@@ -0,0 +1,20 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import PopularTags from './PopularTagsFilter';
+
+export default {
+    title: 'Posts/Feed Page/Components/Popular Topics Filter',
+    component: PopularTags,
+    argTypes: {
+        backgroundColor: { control: 'color' },
+    },
+} as ComponentMeta<typeof PopularTags>;
+
+
+const Template: ComponentStory<typeof PopularTags> = (args) => <div className="max-w-[326px]"><PopularTags {...args as any} ></PopularTags></div>
+
+export const Default = Template.bind({});
+Default.args = {
+}
+
+
diff --git a/src/features/Posts/pages/FeedPage/PopularTopicsFilter/PopularTopicsFilter.tsx b/src/features/Posts/pages/FeedPage/PopularTagsFilter/PopularTagsFilter.tsx
similarity index 59%
rename from src/features/Posts/pages/FeedPage/PopularTopicsFilter/PopularTopicsFilter.tsx
rename to src/features/Posts/pages/FeedPage/PopularTagsFilter/PopularTagsFilter.tsx
index feff1dd..40b0235 100644
--- a/src/features/Posts/pages/FeedPage/PopularTopicsFilter/PopularTopicsFilter.tsx
+++ b/src/features/Posts/pages/FeedPage/PopularTagsFilter/PopularTagsFilter.tsx
@@ -1,38 +1,39 @@
 import { useMediaQuery } from 'src/utils/hooks';
-import React, { useState } from 'react'
 import Skeleton from 'react-loading-skeleton';
 import Slider from 'src/Components/Slider/Slider';
-import { usePopularTopicsQuery } from 'src/graphql';
+import { Tag, usePopularTagsQuery } from 'src/graphql';
 import { MEDIA_QUERIES } from 'src/utils/theme';
 
+export type FilterTag = Pick<Tag, 'id' | 'title' | "icon">
 
 interface Props {
-    filterChanged?: (newFilter: number | null) => void
+    value: FilterTag | null,
+    onChange?: (newFilter: FilterTag | null) => void
 }
 
-export default function PopularTopicsFilter({ filterChanged }: Props) {
-
-    const [selected, setSelected] = useState<number | null>(null);
-
-    const topicsQuery = usePopularTopicsQuery();
+export default function PopularTagsFilter({ value, onChange }: Props) {
 
 
-    const filterClicked = (_newValue: number) => {
-        const newValue = selected !== _newValue ? _newValue : null;
-        setSelected(newValue);
-        filterChanged?.(newValue);
+    const tagsQuery = usePopularTagsQuery();
+
+
+    const filterClicked = (_newValue: FilterTag) => {
+        const newValue = value?.id === _newValue.id ? null : _newValue
+        onChange?.(newValue);
     }
 
+    const selectedId = value?.id
+
     const isMdScreen = useMediaQuery(MEDIA_QUERIES.isMedium)
 
     return (
         <div className='overflow-hidden'>
             {isMdScreen ?
                 <div className='bg-white border-2 border-gray-200 rounded-12 p-16'>
-                    <p className="text-body2 font-bolder text-black mb-16">Explore Categories</p>
+                    <p className="text-body2 font-bolder text-black mb-16">Popular Tags</p>
                     <ul className=' flex flex-col gap-16'>
-                        {topicsQuery.loading ?
-                            Array(3).fill(0).map((_, idx) => <li
+                        {tagsQuery.loading ?
+                            Array(5).fill(0).map((_, idx) => <li
                                 key={idx}
                                 className={`flex items-start rounded-8 font-bold`}
 
@@ -43,18 +44,18 @@ export default function PopularTopicsFilter({ filterChanged }: Props) {
                             </li>
                             )
                             :
-                            topicsQuery.data?.popularTopics.map((topic, idx) => <li
-                                key={topic.id}
+                            tagsQuery.data?.popularTags.map((tag) => <li
+                                key={tag.id}
                                 className={`flex items-start rounded-8 cursor-pointer font-bold 
                                  active:scale-95 transition-transform
-                                ${topic.id === selected ? 'bg-gray-200' : 'hover:bg-gray-100'}
+                                ${tag.id === selectedId ? 'bg-gray-200' : 'hover:bg-gray-100'}
                                 `}
                                 role='button'
-                                onClick={() => filterClicked(topic.id)}
+                                onClick={() => filterClicked(tag)}
                             >
-                                <span className={`${topic.id !== selected && 'bg-gray-50'} rounded-8 w-40 h-40 text-center py-8`}>{topic.icon}</span>
+                                <span className={`${tag.id !== selectedId && 'bg-gray-50'} rounded-8 w-40 h-40 text-center py-8`}>{tag.icon}</span>
                                 <span className="self-center px-16">
-                                    {topic.title}
+                                    {tag.title}
                                 </span>
                             </li>)}
                     </ul>
@@ -62,18 +63,18 @@ export default function PopularTopicsFilter({ filterChanged }: Props) {
                 :
                 <>
                     {
-                        topicsQuery.loading ?
+                        tagsQuery.loading ?
                             <ul className="flex gap-8 ">
                                 {Array(4).fill(0).map((_, idx) => <div key={idx} className="py-12 px-16 bg-gray-100 rounded-8 text-body5"><span className="opacity-0">Category</span></div>)}
                             </ul>
                             :
                             <Slider>
-                                {topicsQuery.data?.popularTopics.map(topic =>
+                                {tagsQuery.data?.popularTags.map(tag =>
                                     <div
-                                        key={topic.id}
-                                        onClick={() => filterClicked(topic.id)}
-                                        className={`${topic.id === selected ? 'bg-gray-200' : "bg-gray-100"} py-12 px-16 rounded-8 text-body5`}
-                                    >{topic.icon} {topic.title}</div>)}
+                                        key={tag.id}
+                                        onClick={() => filterClicked(tag)}
+                                        className={`${tag.id === selectedId ? 'bg-gray-200' : "bg-gray-100"} py-12 px-16 rounded-8 text-body5`}
+                                    >{tag.icon} {tag.title}</div>)}
                             </Slider>
                     }
                 </>
diff --git a/src/features/Posts/pages/FeedPage/PopularTagsFilter/popularTags.graphql b/src/features/Posts/pages/FeedPage/PopularTagsFilter/popularTags.graphql
new file mode 100644
index 0000000..9ec3ac7
--- /dev/null
+++ b/src/features/Posts/pages/FeedPage/PopularTagsFilter/popularTags.graphql
@@ -0,0 +1,7 @@
+query PopularTags {
+  popularTags {
+    id
+    title
+    icon
+  }
+}
diff --git a/src/features/Posts/pages/FeedPage/PopularTopicsFilter/PopularTopicsFilter.stories.tsx b/src/features/Posts/pages/FeedPage/PopularTopicsFilter/PopularTopicsFilter.stories.tsx
deleted file mode 100644
index f8f11e8..0000000
--- a/src/features/Posts/pages/FeedPage/PopularTopicsFilter/PopularTopicsFilter.stories.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-
-import PopularTopicsFilter from './PopularTopicsFilter';
-
-export default {
-    title: 'Posts/Feed Page/Components/Popular Topics Filter',
-    component: PopularTopicsFilter,
-    argTypes: {
-        backgroundColor: { control: 'color' },
-    },
-} as ComponentMeta<typeof PopularTopicsFilter>;
-
-
-const Template: ComponentStory<typeof PopularTopicsFilter> = (args) => <div className="max-w-[326px]"><PopularTopicsFilter {...args as any} ></PopularTopicsFilter></div>
-
-export const Default = Template.bind({});
-Default.args = {
-}
-
-
diff --git a/src/features/Posts/pages/FeedPage/PopularTopicsFilter/popularTopics.graphql b/src/features/Posts/pages/FeedPage/PopularTopicsFilter/popularTopics.graphql
deleted file mode 100644
index 9fff9f4..0000000
--- a/src/features/Posts/pages/FeedPage/PopularTopicsFilter/popularTopics.graphql
+++ /dev/null
@@ -1,7 +0,0 @@
-query PopularTopics {
-  popularTopics {
-    id
-    title
-    icon
-  }
-}
diff --git a/src/features/Posts/pages/FeedPage/feed.graphql b/src/features/Posts/pages/FeedPage/feed.graphql
index e818d04..c9e726b 100644
--- a/src/features/Posts/pages/FeedPage/feed.graphql
+++ b/src/features/Posts/pages/FeedPage/feed.graphql
@@ -1,5 +1,5 @@
-query Feed($take: Int, $skip: Int, $sortBy: String, $topic: Int) {
-  getFeed(take: $take, skip: $skip, sortBy: $sortBy, topic: $topic) {
+query Feed($take: Int, $skip: Int, $sortBy: String, $tag: Int) {
+  getFeed(take: $take, skip: $skip, sortBy: $sortBy, tag: $tag) {
     ... on Story {
       id
       title
diff --git a/src/features/Posts/pages/FeedPage/styles.module.scss b/src/features/Posts/pages/FeedPage/styles.module.scss
index 21ac30e..d441f8c 100644
--- a/src/features/Posts/pages/FeedPage/styles.module.scss
+++ b/src/features/Posts/pages/FeedPage/styles.module.scss
@@ -70,6 +70,7 @@
 
   @media screen and (min-width: 768px) {
     grid-template-columns: repeat(4, 1fr);
+    grid-template-rows: auto auto 1fr;
 
     grid-template-areas:
       "categories title title side"
diff --git a/src/features/Posts/pages/PostDetailsPage/Components/StoryPageContent/StoryPageContent.tsx b/src/features/Posts/pages/PostDetailsPage/Components/StoryPageContent/StoryPageContent.tsx
index c726863..2042508 100644
--- a/src/features/Posts/pages/PostDetailsPage/Components/StoryPageContent/StoryPageContent.tsx
+++ b/src/features/Posts/pages/PostDetailsPage/Components/StoryPageContent/StoryPageContent.tsx
@@ -3,14 +3,11 @@ import { Story } from "src/features/Posts/types"
 import { marked } from 'marked';
 import styles from '../PageContent/styles.module.css'
 import Badge from "src/Components/Badge/Badge";
-import { BiComment } from "react-icons/bi";
-import { RiFlashlightLine } from "react-icons/ri";
-import { numberFormatter } from "src/utils/helperFunctions";
 import IconButton from "src/Components/IconButton/IconButton";
-import { BsThreeDotsVertical } from "react-icons/bs";
-import { Menu, MenuButton, MenuItem } from "@szhsin/react-menu";
+import { Menu, MenuItem } from "@szhsin/react-menu";
 import { useAppSelector } from "src/utils/hooks";
 import { useUpdateStory } from './useUpdateStory'
+import { FaPen } from "react-icons/fa";
 
 
 interface Props {
@@ -29,28 +26,29 @@ export default function StoryPageContent({ story }: Props) {
     return (
         <>
             <div id="content" className="bg-white p-32 border-2 border-gray-200 rounded-16 relative">
-                {curUser?.id === story.author.id && <Menu
-                    menuClassName='!p-8 !rounded-12'
-                    menuButton={<IconButton className="absolute top-32 right-32"><BsThreeDotsVertical /></IconButton>}>
-                    <MenuItem
-                        onClick={handleEdit}
-                        className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12'
-                    >
-                        Edit story
-                    </MenuItem>
-                    <MenuItem
-                        onClick={handleDelete}
-                        className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12'
-                    >
-                        Delete
-                    </MenuItem>
-                </Menu>}
+
 
                 {story.cover_image &&
                     <img src={story.cover_image}
                         className='w-full h-[120px] md:h-[240px] object-cover rounded-12 mb-16'
                         alt="" />}
-                <div className="flex flex-col gap-24">
+                <div className="flex flex-col gap-24 relative">
+                    {curUser?.id === story.author.id && <Menu
+                        menuClassName='!p-8 !rounded-12'
+                        menuButton={<IconButton className="absolute top-0 right-0 text-gray-400"><FaPen /></IconButton>}>
+                        <MenuItem
+                            onClick={handleEdit}
+                            className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12'
+                        >
+                            Edit story
+                        </MenuItem>
+                        <MenuItem
+                            onClick={handleDelete}
+                            className='!p-16 font-medium flex gap-16 hover:bg-gray-100 !rounded-12'
+                        >
+                            Delete
+                        </MenuItem>
+                    </Menu>}
                     <h1 className="text-h2 font-bolder">{story.title}</h1>
                     <Header size="lg" showTimeAgo={false} author={story.author} date={story.createdAt} />
                     {story.tags.length > 0 && <div className="flex gap-8">
diff --git a/src/features/Posts/pages/PostDetailsPage/postDetails.graphql b/src/features/Posts/pages/PostDetailsPage/postDetails.graphql
index 0fd096a..bf1157e 100644
--- a/src/features/Posts/pages/PostDetailsPage/postDetails.graphql
+++ b/src/features/Posts/pages/PostDetailsPage/postDetails.graphql
@@ -15,11 +15,6 @@ query PostDetails($id: Int!, $type: POST_TYPE!) {
         id
         title
       }
-      topic {
-        id
-        title
-        icon
-      }
       votes_count
       type
       cover_image
diff --git a/src/features/Posts/pages/PreviewPostPage/PreviewPostContent/PreviewPostContent.tsx b/src/features/Posts/pages/PreviewPostPage/PreviewPostContent/PreviewPostContent.tsx
index 76f7fe2..d8a9964 100644
--- a/src/features/Posts/pages/PreviewPostPage/PreviewPostContent/PreviewPostContent.tsx
+++ b/src/features/Posts/pages/PreviewPostPage/PreviewPostContent/PreviewPostContent.tsx
@@ -13,13 +13,28 @@ interface Props {
         | 'author'
     > & {
         tags: Array<{ title: string }>
+        cover_image?: string | File
     }
 }
 
 export default function PreviewPostContent({ post }: Props) {
+
+    let coverImg: string;
+    if (!post.cover_image)
+        coverImg = "";
+    else if (typeof post.cover_image === 'string')
+        coverImg = post.cover_image;
+    else
+        coverImg = URL.createObjectURL(post.cover_image);
+
+
     return (
         <>
             <div id="content" className="bg-white p-32 border rounded-16">
+                {coverImg &&
+                    <img src={coverImg}
+                        className='w-full h-[120px] md:h-[240px] object-cover rounded-12 mb-16'
+                        alt="" />}
                 <div className="flex flex-col gap-24">
                     <Header size="lg" showTimeAgo={false} author={post.author} date={post.createdAt} />
                     <h1 className="text-h2 font-bolder">{post.title}</h1>
diff --git a/src/features/Posts/pages/PreviewPostPage/PreviewPostPage.tsx b/src/features/Posts/pages/PreviewPostPage/PreviewPostPage.tsx
index 42d6aa1..9a9897b 100644
--- a/src/features/Posts/pages/PreviewPostPage/PreviewPostPage.tsx
+++ b/src/features/Posts/pages/PreviewPostPage/PreviewPostPage.tsx
@@ -56,7 +56,7 @@ export default function PreviewPostPage() {
                         />
                     </div>
                 </aside>
-                <PreviewPostContent post={{ ...post, createdAt: new Date().toISOString(), author: author! }} />
+                <PreviewPostContent post={{ ...post, createdAt: new Date().toISOString(), author: author!, cover_image: post.cover_image[0] }} />
                 <aside id='author' className='no-scrollbar min-w-0'>
                     <div className="flex flex-col gap-24"
                         style={{
diff --git a/src/features/Projects/pages/ExplorePage/Categories/Categories.tsx b/src/features/Projects/pages/ExplorePage/Categories/Categories.tsx
index b3deb46..8a9a2c2 100644
--- a/src/features/Projects/pages/ExplorePage/Categories/Categories.tsx
+++ b/src/features/Projects/pages/ExplorePage/Categories/Categories.tsx
@@ -1,7 +1,6 @@
-import { useQuery } from '@apollo/client';
-import Badge from 'src/Components/Badge/Badge'
+
 import Slider from 'src/Components/Slider/Slider'
-import { Link, useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import { useAllCategoriesQuery } from 'src/graphql';
 
 const colors = [
diff --git a/src/features/Projects/pages/ProjectPage/ClaimProject/index.tsx b/src/features/Projects/pages/ProjectPage/ClaimProject/index.tsx
index b7090ee..cd94347 100644
--- a/src/features/Projects/pages/ProjectPage/ClaimProject/index.tsx
+++ b/src/features/Projects/pages/ProjectPage/ClaimProject/index.tsx
@@ -1,12 +1,6 @@
-import { ComponentProps } from "react";
+
 import { lazyModal } from "src/utils/helperFunctions";
-import { Id } from "src/utils/types/utils";
 
-const x = () => import('./Claim_CopySignatureCard');
-
-type ThenArg<T> = T extends PromiseLike<infer U> ? U : T
-type y = Id<ThenArg<ReturnType<typeof x>>>
-// type yy = ComponentProps<y['default']>
 export const { LazyComponent: Claim_CopySignatureCard } = lazyModal(() => import('./Claim_CopySignatureCard'))
 export const { LazyComponent: Claim_FundWithdrawCard } = lazyModal(() => import('./Claim_FundWithdrawCard'))
 export const { LazyComponent: Claim_GenerateSignatureCard } = lazyModal(() => import('./Claim_GenerateSignatureCard'))
diff --git a/src/graphql/index.tsx b/src/graphql/index.tsx
index 8fe7e9f..3259494 100644
--- a/src/graphql/index.tsx
+++ b/src/graphql/index.tsx
@@ -98,8 +98,8 @@ export type Hackathon = {
   id: Scalars['Int'];
   location: Scalars['String'];
   start_date: Scalars['Date'];
+  tags: Array<Tag>;
   title: Scalars['String'];
-  topics: Array<Topic>;
   website: Scalars['String'];
 };
 
@@ -209,7 +209,6 @@ export type Query = {
   __typename?: 'Query';
   allCategories: Array<Category>;
   allProjects: Array<Project>;
-  allTopics: Array<Topic>;
   getAllHackathons: Array<Hackathon>;
   getCategory: Category;
   getDonationsStats: DonationsStats;
@@ -221,7 +220,8 @@ export type Query = {
   hottestProjects: Array<Project>;
   me: Maybe<User>;
   newProjects: Array<Project>;
-  popularTopics: Array<Topic>;
+  officialTags: Array<Tag>;
+  popularTags: Array<Tag>;
   profile: Maybe<User>;
   projectsByCategory: Array<Project>;
   searchProjects: Array<Project>;
@@ -236,7 +236,7 @@ export type QueryAllProjectsArgs = {
 
 export type QueryGetAllHackathonsArgs = {
   sortBy: InputMaybe<Scalars['String']>;
-  topic: InputMaybe<Scalars['Int']>;
+  tag: InputMaybe<Scalars['Int']>;
 };
 
 
@@ -247,9 +247,9 @@ export type QueryGetCategoryArgs = {
 
 export type QueryGetFeedArgs = {
   skip?: InputMaybe<Scalars['Int']>;
-  sortBy?: InputMaybe<Scalars['String']>;
+  sortBy: InputMaybe<Scalars['String']>;
+  tag?: InputMaybe<Scalars['Int']>;
   take?: InputMaybe<Scalars['Int']>;
-  topic?: InputMaybe<Scalars['Int']>;
 };
 
 
@@ -326,7 +326,6 @@ export type Story = PostBase & {
   id: Scalars['Int'];
   tags: Array<Tag>;
   title: Scalars['String'];
-  topic: Topic;
   type: Scalars['String'];
   votes_count: Scalars['Int'];
 };
@@ -337,19 +336,13 @@ export type StoryInputType = {
   id: InputMaybe<Scalars['Int']>;
   tags: Array<Scalars['String']>;
   title: Scalars['String'];
-  topicId: Scalars['Int'];
 };
 
 export type Tag = {
   __typename?: 'Tag';
+  icon: Maybe<Scalars['String']>;
   id: Scalars['Int'];
-  title: Scalars['String'];
-};
-
-export type Topic = {
-  __typename?: 'Topic';
-  icon: Scalars['String'];
-  id: Scalars['Int'];
+  isOfficial: Maybe<Scalars['Boolean']>;
   title: Scalars['String'];
 };
 
@@ -405,6 +398,11 @@ export type Vote = {
   payment_request: Scalars['String'];
 };
 
+export type OfficialTagsQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+export type OfficialTagsQuery = { __typename?: 'Query', officialTags: Array<{ __typename?: 'Tag', id: number, title: string, icon: string | null }> };
+
 export type NavCategoriesQueryVariables = Exact<{ [key: string]: never; }>;
 
 
@@ -442,18 +440,13 @@ export type ConfirmDonationMutationVariables = Exact<{
 
 export type ConfirmDonationMutation = { __typename?: 'Mutation', confirmDonation: { __typename?: 'Donation', id: number, amount: number, paid: boolean } };
 
-export type AllTopicsQueryVariables = Exact<{ [key: string]: never; }>;
-
-
-export type AllTopicsQuery = { __typename?: 'Query', allTopics: Array<{ __typename?: 'Topic', id: number, title: string, icon: string }> };
-
 export type GetHackathonsQueryVariables = Exact<{
   sortBy: InputMaybe<Scalars['String']>;
-  topic: InputMaybe<Scalars['Int']>;
+  tag: InputMaybe<Scalars['Int']>;
 }>;
 
 
-export type GetHackathonsQuery = { __typename?: 'Query', getAllHackathons: Array<{ __typename?: 'Hackathon', id: number, title: string, description: string, cover_image: string, start_date: any, end_date: any, location: string, website: string, topics: Array<{ __typename?: 'Topic', id: number, title: string, icon: string }> }> };
+export type GetHackathonsQuery = { __typename?: 'Query', getAllHackathons: Array<{ __typename?: 'Hackathon', id: number, title: string, description: string, cover_image: string, start_date: any, end_date: any, location: string, website: string, tags: Array<{ __typename?: 'Tag', id: number, title: string, icon: string | null }> }> };
 
 export type TrendingPostsQueryVariables = Exact<{ [key: string]: never; }>;
 
@@ -465,7 +458,7 @@ export type CreateStoryMutationVariables = Exact<{
 }>;
 
 
-export type CreateStoryMutation = { __typename?: 'Mutation', createStory: { __typename?: 'Story', id: number, title: string, createdAt: any, body: string, votes_count: number, type: string, cover_image: string, comments_count: number, tags: Array<{ __typename?: 'Tag', id: number, title: string }>, topic: { __typename?: 'Topic', id: number, title: string, icon: string } } | null };
+export type CreateStoryMutation = { __typename?: 'Mutation', createStory: { __typename?: 'Story', id: number, title: string, createdAt: any, body: string, votes_count: number, type: string, cover_image: string, comments_count: number, tags: Array<{ __typename?: 'Tag', id: number, title: string }> } | null };
 
 export type DeleteStoryMutationVariables = Exact<{
   deleteStoryId: Scalars['Int'];
@@ -474,16 +467,16 @@ export type DeleteStoryMutationVariables = Exact<{
 
 export type DeleteStoryMutation = { __typename?: 'Mutation', deleteStory: { __typename?: 'Story', id: number } | null };
 
-export type PopularTopicsQueryVariables = Exact<{ [key: string]: never; }>;
+export type PopularTagsQueryVariables = Exact<{ [key: string]: never; }>;
 
 
-export type PopularTopicsQuery = { __typename?: 'Query', popularTopics: Array<{ __typename?: 'Topic', id: number, title: string, icon: string }> };
+export type PopularTagsQuery = { __typename?: 'Query', popularTags: Array<{ __typename?: 'Tag', id: number, title: string, icon: string | null }> };
 
 export type FeedQueryVariables = Exact<{
   take: InputMaybe<Scalars['Int']>;
   skip: InputMaybe<Scalars['Int']>;
   sortBy: InputMaybe<Scalars['String']>;
-  topic: InputMaybe<Scalars['Int']>;
+  tag: InputMaybe<Scalars['Int']>;
 }>;
 
 
@@ -495,7 +488,7 @@ export type PostDetailsQueryVariables = Exact<{
 }>;
 
 
-export type PostDetailsQuery = { __typename?: 'Query', getPostById: { __typename?: 'Bounty', id: number, title: string, createdAt: any, body: string, votes_count: number, type: string, cover_image: string, deadline: string, reward_amount: number, applicants_count: number, author: { __typename?: 'Author', id: number, name: string, avatar: string, join_date: any }, tags: Array<{ __typename?: 'Tag', id: number, title: string }>, applications: Array<{ __typename?: 'BountyApplication', id: number, date: string, workplan: string, author: { __typename?: 'Author', id: number, name: string, avatar: string } }> } | { __typename?: 'Question', id: number, title: string, createdAt: any, body: string, votes_count: number, type: string, answers_count: number, author: { __typename?: 'Author', id: number, name: string, avatar: string, join_date: any }, tags: Array<{ __typename?: 'Tag', id: number, title: string }>, comments: Array<{ __typename?: 'PostComment', id: number, createdAt: any, body: string, votes_count: number, parentId: number | null, author: { __typename?: 'Author', id: number, name: string, avatar: string } }> } | { __typename?: 'Story', id: number, title: string, createdAt: any, body: string, votes_count: number, type: string, cover_image: string, comments_count: number, author: { __typename?: 'Author', id: number, name: string, avatar: string, join_date: any }, tags: Array<{ __typename?: 'Tag', id: number, title: string }>, topic: { __typename?: 'Topic', id: number, title: string, icon: string }, comments: Array<{ __typename?: 'PostComment', id: number, createdAt: any, body: string, votes_count: number, parentId: number | null, author: { __typename?: 'Author', id: number, name: string, avatar: string } }> } };
+export type PostDetailsQuery = { __typename?: 'Query', getPostById: { __typename?: 'Bounty', id: number, title: string, createdAt: any, body: string, votes_count: number, type: string, cover_image: string, deadline: string, reward_amount: number, applicants_count: number, author: { __typename?: 'Author', id: number, name: string, avatar: string, join_date: any }, tags: Array<{ __typename?: 'Tag', id: number, title: string }>, applications: Array<{ __typename?: 'BountyApplication', id: number, date: string, workplan: string, author: { __typename?: 'Author', id: number, name: string, avatar: string } }> } | { __typename?: 'Question', id: number, title: string, createdAt: any, body: string, votes_count: number, type: string, answers_count: number, author: { __typename?: 'Author', id: number, name: string, avatar: string, join_date: any }, tags: Array<{ __typename?: 'Tag', id: number, title: string }>, comments: Array<{ __typename?: 'PostComment', id: number, createdAt: any, body: string, votes_count: number, parentId: number | null, author: { __typename?: 'Author', id: number, name: string, avatar: string } }> } | { __typename?: 'Story', id: number, title: string, createdAt: any, body: string, votes_count: number, type: string, cover_image: string, comments_count: number, author: { __typename?: 'Author', id: number, name: string, avatar: string, join_date: any }, tags: Array<{ __typename?: 'Tag', id: number, title: string }>, comments: Array<{ __typename?: 'PostComment', id: number, createdAt: any, body: string, votes_count: number, parentId: number | null, author: { __typename?: 'Author', id: number, name: string, avatar: string } }> } };
 
 export type ProfileQueryVariables = Exact<{
   profileId: Scalars['Int'];
@@ -558,6 +551,42 @@ export type ConfirmVoteMutationVariables = Exact<{
 export type ConfirmVoteMutation = { __typename?: 'Mutation', confirmVote: { __typename?: 'Vote', id: number, amount_in_sat: number, payment_request: string, payment_hash: string, paid: boolean, item_type: Vote_Item_Type, item_id: number } };
 
 
+export const OfficialTagsDocument = gql`
+    query OfficialTags {
+  officialTags {
+    id
+    title
+    icon
+  }
+}
+    `;
+
+/**
+ * __useOfficialTagsQuery__
+ *
+ * To run a query within a React component, call `useOfficialTagsQuery` and pass it any options that fit your needs.
+ * When your component renders, `useOfficialTagsQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useOfficialTagsQuery({
+ *   variables: {
+ *   },
+ * });
+ */
+export function useOfficialTagsQuery(baseOptions?: Apollo.QueryHookOptions<OfficialTagsQuery, OfficialTagsQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<OfficialTagsQuery, OfficialTagsQueryVariables>(OfficialTagsDocument, options);
+      }
+export function useOfficialTagsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<OfficialTagsQuery, OfficialTagsQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<OfficialTagsQuery, OfficialTagsQueryVariables>(OfficialTagsDocument, options);
+        }
+export type OfficialTagsQueryHookResult = ReturnType<typeof useOfficialTagsQuery>;
+export type OfficialTagsLazyQueryHookResult = ReturnType<typeof useOfficialTagsLazyQuery>;
+export type OfficialTagsQueryResult = Apollo.QueryResult<OfficialTagsQuery, OfficialTagsQueryVariables>;
 export const NavCategoriesDocument = gql`
     query NavCategories {
   allCategories {
@@ -782,45 +811,9 @@ export function useConfirmDonationMutation(baseOptions?: Apollo.MutationHookOpti
 export type ConfirmDonationMutationHookResult = ReturnType<typeof useConfirmDonationMutation>;
 export type ConfirmDonationMutationResult = Apollo.MutationResult<ConfirmDonationMutation>;
 export type ConfirmDonationMutationOptions = Apollo.BaseMutationOptions<ConfirmDonationMutation, ConfirmDonationMutationVariables>;
-export const AllTopicsDocument = gql`
-    query allTopics {
-  allTopics {
-    id
-    title
-    icon
-  }
-}
-    `;
-
-/**
- * __useAllTopicsQuery__
- *
- * To run a query within a React component, call `useAllTopicsQuery` and pass it any options that fit your needs.
- * When your component renders, `useAllTopicsQuery` returns an object from Apollo Client that contains loading, error, and data properties
- * you can use to render your UI.
- *
- * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
- *
- * @example
- * const { data, loading, error } = useAllTopicsQuery({
- *   variables: {
- *   },
- * });
- */
-export function useAllTopicsQuery(baseOptions?: Apollo.QueryHookOptions<AllTopicsQuery, AllTopicsQueryVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useQuery<AllTopicsQuery, AllTopicsQueryVariables>(AllTopicsDocument, options);
-      }
-export function useAllTopicsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<AllTopicsQuery, AllTopicsQueryVariables>) {
-          const options = {...defaultOptions, ...baseOptions}
-          return Apollo.useLazyQuery<AllTopicsQuery, AllTopicsQueryVariables>(AllTopicsDocument, options);
-        }
-export type AllTopicsQueryHookResult = ReturnType<typeof useAllTopicsQuery>;
-export type AllTopicsLazyQueryHookResult = ReturnType<typeof useAllTopicsLazyQuery>;
-export type AllTopicsQueryResult = Apollo.QueryResult<AllTopicsQuery, AllTopicsQueryVariables>;
 export const GetHackathonsDocument = gql`
-    query getHackathons($sortBy: String, $topic: Int) {
-  getAllHackathons(sortBy: $sortBy, topic: $topic) {
+    query getHackathons($sortBy: String, $tag: Int) {
+  getAllHackathons(sortBy: $sortBy, tag: $tag) {
     id
     title
     description
@@ -829,7 +822,7 @@ export const GetHackathonsDocument = gql`
     end_date
     location
     website
-    topics {
+    tags {
       id
       title
       icon
@@ -851,7 +844,7 @@ export const GetHackathonsDocument = gql`
  * const { data, loading, error } = useGetHackathonsQuery({
  *   variables: {
  *      sortBy: // value for 'sortBy'
- *      topic: // value for 'topic'
+ *      tag: // value for 'tag'
  *   },
  * });
  */
@@ -934,11 +927,6 @@ export const CreateStoryDocument = gql`
       id
       title
     }
-    topic {
-      id
-      title
-      icon
-    }
     votes_count
     type
     cover_image
@@ -1005,9 +993,9 @@ export function useDeleteStoryMutation(baseOptions?: Apollo.MutationHookOptions<
 export type DeleteStoryMutationHookResult = ReturnType<typeof useDeleteStoryMutation>;
 export type DeleteStoryMutationResult = Apollo.MutationResult<DeleteStoryMutation>;
 export type DeleteStoryMutationOptions = Apollo.BaseMutationOptions<DeleteStoryMutation, DeleteStoryMutationVariables>;
-export const PopularTopicsDocument = gql`
-    query PopularTopics {
-  popularTopics {
+export const PopularTagsDocument = gql`
+    query PopularTags {
+  popularTags {
     id
     title
     icon
@@ -1016,34 +1004,34 @@ export const PopularTopicsDocument = gql`
     `;
 
 /**
- * __usePopularTopicsQuery__
+ * __usePopularTagsQuery__
  *
- * To run a query within a React component, call `usePopularTopicsQuery` and pass it any options that fit your needs.
- * When your component renders, `usePopularTopicsQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * To run a query within a React component, call `usePopularTagsQuery` and pass it any options that fit your needs.
+ * When your component renders, `usePopularTagsQuery` returns an object from Apollo Client that contains loading, error, and data properties
  * you can use to render your UI.
  *
  * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
  *
  * @example
- * const { data, loading, error } = usePopularTopicsQuery({
+ * const { data, loading, error } = usePopularTagsQuery({
  *   variables: {
  *   },
  * });
  */
-export function usePopularTopicsQuery(baseOptions?: Apollo.QueryHookOptions<PopularTopicsQuery, PopularTopicsQueryVariables>) {
+export function usePopularTagsQuery(baseOptions?: Apollo.QueryHookOptions<PopularTagsQuery, PopularTagsQueryVariables>) {
         const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useQuery<PopularTopicsQuery, PopularTopicsQueryVariables>(PopularTopicsDocument, options);
+        return Apollo.useQuery<PopularTagsQuery, PopularTagsQueryVariables>(PopularTagsDocument, options);
       }
-export function usePopularTopicsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<PopularTopicsQuery, PopularTopicsQueryVariables>) {
+export function usePopularTagsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<PopularTagsQuery, PopularTagsQueryVariables>) {
           const options = {...defaultOptions, ...baseOptions}
-          return Apollo.useLazyQuery<PopularTopicsQuery, PopularTopicsQueryVariables>(PopularTopicsDocument, options);
+          return Apollo.useLazyQuery<PopularTagsQuery, PopularTagsQueryVariables>(PopularTagsDocument, options);
         }
-export type PopularTopicsQueryHookResult = ReturnType<typeof usePopularTopicsQuery>;
-export type PopularTopicsLazyQueryHookResult = ReturnType<typeof usePopularTopicsLazyQuery>;
-export type PopularTopicsQueryResult = Apollo.QueryResult<PopularTopicsQuery, PopularTopicsQueryVariables>;
+export type PopularTagsQueryHookResult = ReturnType<typeof usePopularTagsQuery>;
+export type PopularTagsLazyQueryHookResult = ReturnType<typeof usePopularTagsLazyQuery>;
+export type PopularTagsQueryResult = Apollo.QueryResult<PopularTagsQuery, PopularTagsQueryVariables>;
 export const FeedDocument = gql`
-    query Feed($take: Int, $skip: Int, $sortBy: String, $topic: Int) {
-  getFeed(take: $take, skip: $skip, sortBy: $sortBy, topic: $topic) {
+    query Feed($take: Int, $skip: Int, $sortBy: String, $tag: Int) {
+  getFeed(take: $take, skip: $skip, sortBy: $sortBy, tag: $tag) {
     ... on Story {
       id
       title
@@ -1135,7 +1123,7 @@ export const FeedDocument = gql`
  *      take: // value for 'take'
  *      skip: // value for 'skip'
  *      sortBy: // value for 'sortBy'
- *      topic: // value for 'topic'
+ *      tag: // value for 'tag'
  *   },
  * });
  */
@@ -1168,11 +1156,6 @@ export const PostDetailsDocument = gql`
         id
         title
       }
-      topic {
-        id
-        title
-        icon
-      }
       votes_count
       type
       cover_image
diff --git a/src/mocks/data/hackathon.ts b/src/mocks/data/hackathon.ts
index 4f3484e..2c76068 100644
--- a/src/mocks/data/hackathon.ts
+++ b/src/mocks/data/hackathon.ts
@@ -1,9 +1,9 @@
 import { Hackathon } from "src/graphql"
-import { topics } from "./topics"
+import { tags } from "./tags"
 import { getCoverImage, getItems } from "./utils"
 
 
-const generateTopics = () => getItems(topics, {
+const generateTags = () => getItems(tags, {
     min: 1,
     max: 4
 })
@@ -18,7 +18,7 @@ export const hackathons = [
         location: "Instanbul, Turkey",
         cover_image: getCoverImage(),
         description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quam felis ut interdum commodo, scelerisque.",
-        topics: generateTopics(),
+        tags: generateTags(),
         website: "https://bolt.fun/hackathons/shock-the-web"
     },
     {
@@ -29,7 +29,7 @@ export const hackathons = [
         location: "Instanbul, Turkey",
         cover_image: getCoverImage(),
         description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quam felis ut interdum commodo, scelerisque.",
-        topics: generateTopics(),
+        tags: generateTags(),
         website: "https://bolt.fun/hackathons/shock-the-web"
     },
     {
@@ -40,7 +40,7 @@ export const hackathons = [
         location: "Instanbul, Turkey",
         cover_image: getCoverImage(),
         description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quam felis ut interdum commodo, scelerisque.",
-        topics: generateTopics(),
+        tags: generateTags(),
         website: "https://bolt.fun/hackathons/shock-the-web"
     },
     {
@@ -51,7 +51,7 @@ export const hackathons = [
         location: "Instanbul, Turkey",
         cover_image: getCoverImage(),
         description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quam felis ut interdum commodo, scelerisque.",
-        topics: generateTopics(),
+        tags: generateTags(),
         website: "https://bolt.fun/hackathons/shock-the-web"
     },
     {
@@ -62,7 +62,7 @@ export const hackathons = [
         location: "Instanbul, Turkey",
         cover_image: getCoverImage(),
         description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quam felis ut interdum commodo, scelerisque.",
-        topics: generateTopics(),
+        tags: generateTags(),
         website: "https://bolt.fun/hackathons/shock-the-web"
     },
     {
@@ -73,7 +73,7 @@ export const hackathons = [
         location: "Instanbul, Turkey",
         cover_image: getCoverImage(),
         description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quam felis ut interdum commodo, scelerisque.",
-        topics: generateTopics(),
+        tags: generateTags(),
         website: "https://bolt.fun/hackathons/shock-the-web"
     },
 ].map(i => ({ ...i, __typename: "Hackathon" })) as Hackathon[]
\ No newline at end of file
diff --git a/src/mocks/data/posts.ts b/src/mocks/data/posts.ts
index ff19cbd..bff8bea 100644
--- a/src/mocks/data/posts.ts
+++ b/src/mocks/data/posts.ts
@@ -1,10 +1,10 @@
 
 import dayjs from "dayjs";
 import { Bounty, Post, Question, Story } from "src/features/Posts/types";
-import { random, randomItem } from "src/utils/helperFunctions";
+import { random, randomItem, randomItems } from "src/utils/helperFunctions";
 import { getAvatarImage, getCoverImage } from "./utils";
 import { Chance } from 'chance'
-import { topics } from "./topics";
+import { tags } from "./tags";
 
 const getDate = () => dayjs().subtract(random(5, 48), 'hour').toString();
 
@@ -90,14 +90,9 @@ export let posts = {
             votes_count: 120,
             excerpt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In odio libero accumsan...',
             type: "Story",
-            tags: [
-                { id: 1, title: "lnurl" },
-                { id: 2, title: "webln" },
-                { id: 3, title: "guide" },
-            ],
+            tags: randomItems(3, ...tags),
             author: getAuthor(),
             comments: generatePostComments(3),
-            topic: randomItem(...topics)
 
         },
     ] as Story[],
@@ -112,11 +107,7 @@ export let posts = {
             createdAt: getDate(),
             votes_count: 120,
             excerpt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In odio libero accumsan...',
-            tags: [
-                { id: 1, title: "lnurl" },
-                { id: 2, title: "webln" },
-                { id: 3, title: "guide" },
-            ],
+            tags: randomItems(3, ...tags),
             author: getAuthor(),
             deadline: "25 May",
             reward_amount: 200_000,
diff --git a/src/mocks/data/topics.ts b/src/mocks/data/tags.ts
similarity index 76%
rename from src/mocks/data/topics.ts
rename to src/mocks/data/tags.ts
index bc6b079..c40aeb4 100644
--- a/src/mocks/data/topics.ts
+++ b/src/mocks/data/tags.ts
@@ -1,6 +1,7 @@
-import { Topic } from "src/graphql";
+import { Tag } from "src/graphql";
 
-export const topics = [
+
+export const tags = [
     {
         id: 1,
         title: 'Bitcoin',
@@ -27,4 +28,4 @@ export const topics = [
         title: 'Design',
         icon: '🎨'
     }
-].map(i => ({ __typename: "Topic", ...i })) as Topic[]
\ No newline at end of file
+].map(i => ({ __typename: "Tag", ...i })) as Tag[]
\ No newline at end of file
diff --git a/src/mocks/handlers.ts b/src/mocks/handlers.ts
index 38e3a84..f90c1c0 100644
--- a/src/mocks/handlers.ts
+++ b/src/mocks/handlers.ts
@@ -1,6 +1,6 @@
 
 import { graphql } from 'msw'
-import { allCategories, getAllHackathons, getCategory, getFeed, getPostById, getProject, getTrendingPosts, hottestProjects, me, newProjects, popularTopics, profile, projectsByCategory, searchProjects } from './resolvers'
+import { allCategories, getAllHackathons, getCategory, getFeed, getPostById, getProject, getTrendingPosts, hottestProjects, me, newProjects, popularTags, profile, projectsByCategory, searchProjects } from './resolvers'
 import {
     NavCategoriesQuery,
     ExploreProjectsQuery,
@@ -19,12 +19,12 @@ import {
     PostDetailsQueryVariables,
     FeedQueryVariables,
     TrendingPostsQuery,
-    PopularTopicsQuery,
-    PopularTopicsQueryVariables,
+    PopularTagsQuery,
+    PopularTagsQueryVariables,
     GetHackathonsQuery,
     GetHackathonsQueryVariables,
-    AllTopicsQuery,
-    AllTopicsQueryVariables,
+    OfficialTagsQuery,
+    OfficialTagsQueryVariables,
     DonationsStatsQuery,
     MeQuery,
     ProfileQuery,
@@ -111,20 +111,20 @@ export const handlers = [
         )
     }),
 
-    graphql.query<PopularTopicsQuery, PopularTopicsQueryVariables>('PopularTopics', async (req, res, ctx) => {
+    graphql.query<PopularTagsQuery, PopularTagsQueryVariables>('PopularTags', async (req, res, ctx) => {
         await delay()
         return res(
             ctx.data({
-                popularTopics: popularTopics()
+                popularTags: popularTags()
             })
         )
     }),
 
-    graphql.query<AllTopicsQuery, AllTopicsQueryVariables>('allTopics', async (req, res, ctx) => {
+    graphql.query<OfficialTagsQuery, OfficialTagsQueryVariables>('OfficialTags', async (req, res, ctx) => {
         await delay()
         return res(
             ctx.data({
-                allTopics: popularTopics()
+                officialTags: popularTags()
             })
         )
     }),
@@ -135,7 +135,7 @@ export const handlers = [
         const { take, skip } = req.variables;
         return res(
             ctx.data({
-                getFeed: getFeed({ take, skip, })
+                getFeed: getFeed({ take, skip, sortBy: null, tag: null })
             })
         )
     }),
diff --git a/src/mocks/resolvers.ts b/src/mocks/resolvers.ts
index 120af9e..028d54b 100644
--- a/src/mocks/resolvers.ts
+++ b/src/mocks/resolvers.ts
@@ -1,7 +1,7 @@
 import { MOCK_DATA } from "./data";
 import { Query, QueryGetFeedArgs, QueryGetPostByIdArgs } from 'src/graphql'
 import { Chance } from "chance";
-import { topics } from "./data/topics";
+import { tags } from "./data/tags";
 import { hackathons } from "./data/hackathon";
 import { shuffle } from "src/utils/helperFunctions";
 
@@ -63,8 +63,8 @@ export function getTrendingPosts(): Query['getTrendingPosts'] {
     return chance.pickset(MOCK_DATA.feed, 5);
 }
 
-export function popularTopics() {
-    return topics;
+export function popularTags() {
+    return tags;
 }
 
 export function getAllHackathons() {
diff --git a/src/utils/apollo.ts b/src/utils/apollo.ts
index 9640415..aac1f1e 100644
--- a/src/utils/apollo.ts
+++ b/src/utils/apollo.ts
@@ -52,7 +52,7 @@ export const apolloClient = new ApolloClient({
         typePolicies: {
             Query: {
                 fields: {
-                    getFeed: offsetLimitPagination(['sortBy', 'topic'])
+                    getFeed: offsetLimitPagination(['sortBy', 'tag'])
                 },
             },
         },
diff --git a/src/utils/helperFunctions.tsx b/src/utils/helperFunctions.tsx
index be99687..b774510 100644
--- a/src/utils/helperFunctions.tsx
+++ b/src/utils/helperFunctions.tsx
@@ -1,4 +1,4 @@
-import React, { ComponentProps, ComponentType, ReactNode, Suspense } from "react";
+import React, { ComponentProps, ComponentType, Suspense } from "react";
 import { RotatingLines } from "react-loader-spinner";
 import { isNullOrUndefined } from "remirror";
 
diff --git a/src/utils/hooks/useReduxEffect.ts b/src/utils/hooks/useReduxEffect.ts
index c297a7c..61cb4b4 100644
--- a/src/utils/hooks/useReduxEffect.ts
+++ b/src/utils/hooks/useReduxEffect.ts
@@ -1,5 +1,5 @@
 import { useRef, useEffect, useCallback } from 'react'
-import { Action, AnyAction } from '@reduxjs/toolkit'
+import { Action } from '@reduxjs/toolkit'
 import { useStore } from 'react-redux'
 
 /**