Merge branch 'fix/self_hosted_instance' of github.com:makeplane/plane into develop-deploy

2023-11-19 02:09:18 +05:30 · 2023-11-19 02:09:18 +05:30 · 9e33804d12
commit 9e33804d12
parent f588302a7c 96212905d1
124 changed files with 2474 additions and 698 deletions
--- a/.gitignore
+++ b/.gitignore
@ -79,3 +79,4 @@ pnpm-workspace.yaml
 tmp/
 ## packages
 dist
+.temp/
--- a/apiserver/.env.example
+++ b/apiserver/.env.example
@ -5,6 +5,7 @@ CORS_ALLOWED_ORIGINS=""

 # Error logs
 SENTRY_DSN=""
+SENTRY_ENVIRONMENT="development"

 # Database Settings
 PGUSER="plane"
--- a/apiserver/bin/takeoff
+++ b/apiserver/bin/takeoff
@ -3,11 +3,18 @@ set -e
 python manage.py wait_for_db
 python manage.py migrate

-# Register instance
-python manage.py register_instance
-# Load the configuration variable
-python manage.py configure_instance
+# Set default value for ENABLE_REGISTRATION
+ENABLE_REGISTRATION=${ENABLE_REGISTRATION:-1}
+
+# Check if ENABLE_REGISTRATION is not set to '0'
+if [ "$ENABLE_REGISTRATION" != "0" ]; then
+    # Register instance
+    python manage.py register_instance
+    # Load the configuration variable
+    python manage.py configure_instance
+fi
+
 # Create the default bucket
-python bin/bucket_script.py
+python manage.py create_bucket

 exec gunicorn -w $GUNICORN_WORKERS -k uvicorn.workers.UvicornWorker plane.asgi:application --bind 0.0.0.0:8000 --max-requests 1200 --max-requests-jitter 1000 --access-logfile -
--- a/apiserver/plane/api/views/authentication.py
+++ b/apiserver/plane/api/views/authentication.py
@ -320,11 +320,11 @@ class SignInEndpoint(BaseAPIView):
        except RequestException as e:
            capture_exception(e)

+        access_token, refresh_token = get_tokens_for_user(user)
        data = {
            "access_token": access_token,
            "refresh_token": refresh_token,
        }
-        access_token, refresh_token = get_tokens_for_user(user)
        return Response(data, status=status.HTTP_200_OK)


--- a/apiserver/plane/license/api/views/instance.py
+++ b/apiserver/plane/license/api/views/instance.py
@ -230,13 +230,18 @@ class InstanceConfigurationEndpoint(BaseAPIView):
        return Response(serializer.data, status=status.HTTP_200_OK)

    def patch(self, request):
-        key = request.data.get("key", False)
-        if not key:
-            return Response(
-                {"error": "Key is required"}, status=status.HTTP_400_BAD_REQUEST
+        configurations = InstanceConfiguration.objects.filter(key__in=request.data.keys())
+
+        bulk_configurations = []
+        for configuration in configurations:
+            configuration.value = request.data.get(configuration.key, configuration.value)
+            bulk_configurations.append(configuration)
+
+        InstanceConfiguration.objects.bulk_update(
+            bulk_configurations,
+            ["value"],
+            batch_size=100
        )
-        configuration = InstanceConfiguration.objects.get(key=key)
-        configuration.value = request.data.get("value")
-        configuration.save()
-        serializer = InstanceConfigurationSerializer(configuration)
+
+        serializer = InstanceConfigurationSerializer(configurations, many=True)
        return Response(serializer.data, status=status.HTTP_200_OK)
--- a/apiserver/plane/settings/common.py
+++ b/apiserver/plane/settings/common.py
@ -27,9 +27,6 @@ DEBUG = False
 # Allowed Hosts
 ALLOWED_HOSTS = ["*"]

-# Redirect if / is not present
-APPEND_SLASH = True
-
 # Application definition
 INSTALLED_APPS = [
    "django.contrib.auth",
@ -301,7 +298,7 @@ if bool(os.environ.get("SENTRY_DSN", False)):
        ],
        traces_sample_rate=1,
        send_default_pii=True,
-        environment=os.environ.get("ENVIRONMENT", "development"),
+        environment=os.environ.get("SENTRY_ENVIRONMENT", "development"),
        profiles_sample_rate=1.0,
    )

--- a/deploy/selfhost/docker-compose.yml
+++ b/deploy/selfhost/docker-compose.yml
@ -12,6 +12,7 @@ x-app-env : &app-env
    - GITHUB_CLIENT_SECRET=${GITHUB_CLIENT_SECRET:-""}
    - DOCKERIZED=${DOCKERIZED:-1}  # deprecated
    - CORS_ALLOWED_ORIGINS=${CORS_ALLOWED_ORIGINS:-""}
+    - SENTRY_ENVIRONMENT=${SENTRY_ENVIRONMENT:-"production"}
    # Gunicorn Workers
    - GUNICORN_WORKERS=${GUNICORN_WORKERS:-2}
    #DB SETTINGS
--- a/deploy/selfhost/install.sh
+++ b/deploy/selfhost/install.sh
@ -1,9 +1,8 @@
 #!/bin/bash

-BRANCH=${BRANCH:-master}
+BRANCH=master
 SCRIPT_DIR=$PWD
 PLANE_INSTALL_DIR=$PWD/plane-app
-mkdir -p $PLANE_INSTALL_DIR/archive

 function install(){
    echo 
@ -28,6 +27,19 @@ function download(){
        mv $PLANE_INSTALL_DIR/variables-upgrade.env $PLANE_INSTALL_DIR/.env
    fi

+    if [ "$BRANCH" != "master" ];
+    then
+        cp $PLANE_INSTALL_DIR/docker-compose.yaml $PLANE_INSTALL_DIR/temp.yaml 
+
+        sed -e 's@plane-frontend:@plane-frontend-private:@g' \
+            -e 's@plane-space:@plane-space-private:@g' \
+            -e 's@plane-backend:@plane-backend-private:@g' \
+            -e 's@plane-proxy:@plane-proxy-private:@g' \
+            -e 's@${APP_RELEASE:-latest}@'"$BRANCH"'@g' \
+            $PLANE_INSTALL_DIR/temp.yaml > $PLANE_INSTALL_DIR/docker-compose.yaml
+
+        rm $PLANE_INSTALL_DIR/temp.yaml
+    fi
    
    echo ""
    echo "Latest version is now available for you to use"
@ -108,4 +120,10 @@ function askForAction(){
    fi
 }

+if [ "$BRANCH" != "master" ];
+then
+    PLANE_INSTALL_DIR=$PWD/plane-app-$(echo $BRANCH | sed -r 's@(\/|" "|\.)@-@g')
+fi
+mkdir -p $PLANE_INSTALL_DIR/archive
+
 askForAction
--- a/deploy/selfhost/variables.env
+++ b/deploy/selfhost/variables.env
@ -14,7 +14,7 @@ SENTRY_DSN=""
 GITHUB_CLIENT_SECRET=""
 DOCKERIZED=1 # deprecated
 CORS_ALLOWED_ORIGINS=""
-
+SENTRY_ENVIRONMENT="production"

 #DB SETTINGS
 PGHOST=plane-db
--- a/packages/editor/core/package.json
+++ b/packages/editor/core/package.json
@ -30,9 +30,11 @@
  "dependencies": {
    "@blueprintjs/popover2": "^2.0.10",
    "@tiptap/core": "^2.1.7",
+    "@tiptap/extension-code-block-lowlight": "^2.1.12",
    "@tiptap/extension-color": "^2.1.11",
    "@tiptap/extension-image": "^2.1.7",
    "@tiptap/extension-link": "^2.1.7",
+    "@tiptap/extension-list-item": "^2.1.12",
    "@tiptap/extension-mention": "^2.1.12",
    "@tiptap/extension-table": "^2.1.6",
    "@tiptap/extension-table-cell": "^2.1.6",
@ -42,9 +44,8 @@
    "@tiptap/extension-task-list": "^2.1.7",
    "@tiptap/extension-text-style": "^2.1.11",
    "@tiptap/extension-underline": "^2.1.7",
-    "@tiptap/prosemirror-tables": "^1.1.4",
-    "jsx-dom-cjs": "^8.0.3",
    "@tiptap/pm": "^2.1.7",
+    "@tiptap/prosemirror-tables": "^1.1.4",
    "@tiptap/react": "^2.1.7",
    "@tiptap/starter-kit": "^2.1.10",
    "@tiptap/suggestion": "^2.0.4",
@ -56,7 +57,11 @@
    "eslint": "8.36.0",
    "eslint-config-next": "13.2.4",
    "eventsource-parser": "^0.1.0",
+    "highlight.js": "^11.8.0",
+    "jsx-dom-cjs": "^8.0.3",
+    "lowlight": "^3.0.0",
    "lucide-react": "^0.244.0",
+    "prosemirror-async-query": "^0.0.4",
    "react-markdown": "^8.0.7",
    "react-moveable": "^0.54.2",
    "tailwind-merge": "^1.14.0",
--- a/packages/editor/core/src/index.ts
+++ b/packages/editor/core/src/index.ts
@ -1,6 +1,7 @@
 // styles
 // import "./styles/tailwind.css";
 // import "./styles/editor.css";
+import "./styles/github-dark.css";

 export { isCellSelection } from "./ui/extensions/table/table/utilities/is-cell-selection";

--- a/packages/editor/core/src/lib/editor-commands.ts
+++ b/packages/editor/core/src/lib/editor-commands.ts
@ -50,10 +50,11 @@ export const toggleUnderline = (editor: Editor, range?: Range) => {
  else editor.chain().focus().toggleUnderline().run();
 };

-export const toggleCode = (editor: Editor, range?: Range) => {
-  if (range) editor.chain().focus().deleteRange(range).toggleCode().run();
-  else editor.chain().focus().toggleCode().run();
+export const toggleCodeBlock = (editor: Editor, range?: Range) => {
+  if (range) editor.chain().focus().deleteRange(range).toggleCodeBlock().run();
+  else editor.chain().focus().toggleCodeBlock().run();
 };
+
 export const toggleOrderedList = (editor: Editor, range?: Range) => {
  if (range)
    editor.chain().focus().deleteRange(range).toggleOrderedList().run();
--- a/packages/editor/core/src/styles/github-dark.css
+++ b/packages/editor/core/src/styles/github-dark.css
@ -0,0 +1,85 @@
+pre code.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 1em;
+}
+code.hljs {
+  padding: 3px 5px;
+}
+.hljs {
+  color: #c9d1d9;
+  background: #0d1117;
+}
+.hljs-doctag,
+.hljs-keyword,
+.hljs-meta .hljs-keyword,
+.hljs-template-tag,
+.hljs-template-variable,
+.hljs-type,
+.hljs-variable.language_ {
+  color: #ff7b72;
+}
+.hljs-title,
+.hljs-title.class_,
+.hljs-title.class_.inherited__,
+.hljs-title.function_ {
+  color: #d2a8ff;
+}
+.hljs-attr,
+.hljs-attribute,
+.hljs-literal,
+.hljs-meta,
+.hljs-number,
+.hljs-operator,
+.hljs-selector-attr,
+.hljs-selector-class,
+.hljs-selector-id,
+.hljs-variable {
+  color: #79c0ff;
+}
+.hljs-meta .hljs-string,
+.hljs-regexp,
+.hljs-string {
+  color: #a5d6ff;
+}
+.hljs-built_in,
+.hljs-symbol {
+  color: #ffa657;
+}
+.hljs-code,
+.hljs-comment,
+.hljs-formula {
+  color: #8b949e;
+}
+.hljs-name,
+.hljs-quote,
+.hljs-selector-pseudo,
+.hljs-selector-tag {
+  color: #7ee787;
+}
+.hljs-subst {
+  color: #c9d1d9;
+}
+.hljs-section {
+  color: #1f6feb;
+  font-weight: 700;
+}
+.hljs-bullet {
+  color: #f2cc60;
+}
+.hljs-emphasis {
+  color: #c9d1d9;
+  font-style: italic;
+}
+.hljs-strong {
+  color: #c9d1d9;
+  font-weight: 700;
+}
+.hljs-addition {
+  color: #aff5b4;
+  background-color: #033a16;
+}
+.hljs-deletion {
+  color: #ffdcd7;
+  background-color: #67060c;
+}
--- a/packages/editor/core/src/ui/extensions/code/index.tsx
+++ b/packages/editor/core/src/ui/extensions/code/index.tsx
@ -0,0 +1,29 @@
+import CodeBlockLowlight from "@tiptap/extension-code-block-lowlight";
+
+import { common, createLowlight } from "lowlight";
+import ts from "highlight.js/lib/languages/typescript";
+
+const lowlight = createLowlight(common);
+lowlight.register("ts", ts);
+
+export const CustomCodeBlock = CodeBlockLowlight.extend({
+  addKeyboardShortcuts() {
+    return {
+      Tab: ({ editor }) => {
+        const { state } = editor;
+        const { selection, doc } = state;
+        const { $from, empty } = selection;
+
+        if (!empty || $from.parent.type !== this.type) {
+          return false;
+        }
+
+        return editor.commands.insertContent("    ");
+      },
+    };
+  },
+}).configure({
+  lowlight,
+  defaultLanguage: "plaintext",
+  exitOnTripleEnter: false,
+});
--- a/packages/editor/core/src/ui/extensions/custom-list-keymap/index.ts
+++ b/packages/editor/core/src/ui/extensions/custom-list-keymap/index.ts
@ -0,0 +1 @@
+export * from "./list-keymap";
--- a/packages/editor/core/src/ui/extensions/custom-list-keymap/list-helpers/find-list-item-pos.ts
+++ b/packages/editor/core/src/ui/extensions/custom-list-keymap/list-helpers/find-list-item-pos.ts
@ -0,0 +1,30 @@
+import { getNodeType } from '@tiptap/core'
+import { NodeType } from '@tiptap/pm/model'
+import { EditorState } from '@tiptap/pm/state'
+
+export const findListItemPos = (typeOrName: string | NodeType, state: EditorState) => {
+  const { $from } = state.selection
+  const nodeType = getNodeType(typeOrName, state.schema)
+
+  let currentNode = null
+  let currentDepth = $from.depth
+  let currentPos = $from.pos
+  let targetDepth: number | null = null
+
+  while (currentDepth > 0 && targetDepth === null) {
+    currentNode = $from.node(currentDepth)
+
+    if (currentNode.type === nodeType) {
+      targetDepth = currentDepth
+    } else {
+      currentDepth -= 1
+      currentPos -= 1
+    }
+  }
+
+  if (targetDepth === null) {
+    return null
+  }
+
+  return { $pos: state.doc.resolve(currentPos), depth: targetDepth }
+}
--- a/packages/editor/core/src/ui/extensions/custom-list-keymap/list-helpers/get-next-list-depth.ts
+++ b/packages/editor/core/src/ui/extensions/custom-list-keymap/list-helpers/get-next-list-depth.ts
@ -0,0 +1,20 @@
+import { getNodeAtPosition } from "@tiptap/core";
+import { EditorState } from "@tiptap/pm/state";
+
+import { findListItemPos } from "./find-list-item-pos";
+
+export const getNextListDepth = (typeOrName: string, state: EditorState) => {
+  const listItemPos = findListItemPos(typeOrName, state);
+
+  if (!listItemPos) {
+    return false;
+  }
+
+  const [, depth] = getNodeAtPosition(
+    state,
+    typeOrName,
+    listItemPos.$pos.pos + 4,
+  );
+
+  return depth;
+};
--- a/packages/editor/core/src/ui/extensions/custom-list-keymap/list-helpers/handle-backspace.ts
+++ b/packages/editor/core/src/ui/extensions/custom-list-keymap/list-helpers/handle-backspace.ts
@ -0,0 +1,78 @@
+import { Editor, isAtStartOfNode, isNodeActive } from "@tiptap/core";
+import { Node } from "@tiptap/pm/model";
+
+import { findListItemPos } from "./find-list-item-pos";
+import { hasListBefore } from "./has-list-before";
+
+export const handleBackspace = (
+  editor: Editor,
+  name: string,
+  parentListTypes: string[],
+) => {
+  // this is required to still handle the undo handling
+  if (editor.commands.undoInputRule()) {
+    return true;
+  }
+
+  // if the cursor is not at the start of a node
+  // do nothing and proceed
+  if (!isAtStartOfNode(editor.state)) {
+    return false;
+  }
+
+  // if the current item is NOT inside a list item &
+  // the previous item is a list (orderedList or bulletList)
+  // move the cursor into the list and delete the current item
+  if (
+    !isNodeActive(editor.state, name) &&
+    hasListBefore(editor.state, name, parentListTypes)
+  ) {
+    const { $anchor } = editor.state.selection;
+
+    const $listPos = editor.state.doc.resolve($anchor.before() - 1);
+
+    const listDescendants: Array<{ node: Node; pos: number }> = [];
+
+    $listPos.node().descendants((node, pos) => {
+      if (node.type.name === name) {
+        listDescendants.push({ node, pos });
+      }
+    });
+
+    const lastItem = listDescendants.at(-1);
+
+    if (!lastItem) {
+      return false;
+    }
+
+    const $lastItemPos = editor.state.doc.resolve(
+      $listPos.start() + lastItem.pos + 1,
+    );
+
+    return editor
+      .chain()
+      .cut(
+        { from: $anchor.start() - 1, to: $anchor.end() + 1 },
+        $lastItemPos.end(),
+      )
+      .joinForward()
+      .run();
+  }
+
+  // if the cursor is not inside the current node type
+  // do nothing and proceed
+  if (!isNodeActive(editor.state, name)) {
+    return false;
+  }
+
+  const listItemPos = findListItemPos(name, editor.state);
+
+  if (!listItemPos) {
+    return false;
+  }
+
+  // if current node is a list item and cursor it at start of a list node,
+  // simply lift the list item i.e. remove it as a list item (task/bullet/ordered)
+  // irrespective of above node being a list or not
+  return editor.chain().liftListItem(name).run();
+};
--- a/packages/editor/core/src/ui/extensions/custom-list-keymap/list-helpers/handle-delete.ts
+++ b/packages/editor/core/src/ui/extensions/custom-list-keymap/list-helpers/handle-delete.ts
@ -0,0 +1,34 @@
+import { Editor, isAtEndOfNode, isNodeActive } from "@tiptap/core";
+
+import { nextListIsDeeper } from "./next-list-is-deeper";
+import { nextListIsHigher } from "./next-list-is-higher";
+
+export const handleDelete = (editor: Editor, name: string) => {
+  // if the cursor is not inside the current node type
+  // do nothing and proceed
+  if (!isNodeActive(editor.state, name)) {
+    return false;
+  }
+
+  // if the cursor is not at the end of a node
+  // do nothing and proceed
+  if (!isAtEndOfNode(editor.state, name)) {
+    return false;
+  }
+
+  // check if the next node is a list with a deeper depth
+  if (nextListIsDeeper(name, editor.state)) {
+    return editor
+      .chain()
+      .focus(editor.state.selection.from + 4)
+      .lift(name)
+      .joinBackward()
+      .run();
+  }
+
+  if (nextListIsHigher(name, editor.state)) {
+    return editor.chain().joinForward().joinBackward().run();
+  }
+
+  return editor.commands.joinItemForward();
+};
--- a/packages/editor/core/src/ui/extensions/custom-list-keymap/list-helpers/has-list-before.ts
+++ b/packages/editor/core/src/ui/extensions/custom-list-keymap/list-helpers/has-list-before.ts
@ -0,0 +1,15 @@
+import { EditorState } from '@tiptap/pm/state'
+
+export const hasListBefore = (editorState: EditorState, name: string, parentListTypes: string[]) => {
+  const { $anchor } = editorState.selection
+
+  const previousNodePos = Math.max(0, $anchor.pos - 2)
+
+  const previousNode = editorState.doc.resolve(previousNodePos).node()
+
+  if (!previousNode || !parentListTypes.includes(previousNode.type.name)) {
+    return false
+  }
+
+  return true
+}
--- a/packages/editor/core/src/ui/extensions/custom-list-keymap/list-helpers/has-list-item-after.ts
+++ b/packages/editor/core/src/ui/extensions/custom-list-keymap/list-helpers/has-list-item-after.ts
@ -0,0 +1,17 @@
+import { EditorState } from '@tiptap/pm/state'
+
+export const hasListItemAfter = (typeOrName: string, state: EditorState): boolean => {
+  const { $anchor } = state.selection
+
+  const $targetPos = state.doc.resolve($anchor.pos - $anchor.parentOffset - 2)
+
+  if ($targetPos.index() === $targetPos.parent.childCount - 1) {
+    return false
+  }
+
+  if ($targetPos.nodeAfter?.type.name !== typeOrName) {
+    return false
+  }
+
+  return true
+}
--- a/packages/editor/core/src/ui/extensions/custom-list-keymap/list-helpers/has-list-item-before.ts
+++ b/packages/editor/core/src/ui/extensions/custom-list-keymap/list-helpers/has-list-item-before.ts
@ -0,0 +1,17 @@
+import { EditorState } from '@tiptap/pm/state'
+
+export const hasListItemBefore = (typeOrName: string, state: EditorState): boolean => {
+  const { $anchor } = state.selection
+
+  const $targetPos = state.doc.resolve($anchor.pos - 2)
+
+  if ($targetPos.index() === 0) {
+    return false
+  }
+
+  if ($targetPos.nodeBefore?.type.name !== typeOrName) {
+    return false
+  }
+
+  return true
+}
--- a/packages/editor/core/src/ui/extensions/custom-list-keymap/list-helpers/index.ts
+++ b/packages/editor/core/src/ui/extensions/custom-list-keymap/list-helpers/index.ts
@ -0,0 +1,9 @@
+export * from "./find-list-item-pos";
+export * from "./get-next-list-depth";
+export * from "./handle-backspace";
+export * from "./handle-delete";
+export * from "./has-list-before";
+export * from "./has-list-item-after";
+export * from "./has-list-item-before";
+export * from "./next-list-is-deeper";
+export * from "./next-list-is-higher";
--- a/packages/editor/core/src/ui/extensions/custom-list-keymap/list-helpers/next-list-is-deeper.ts
+++ b/packages/editor/core/src/ui/extensions/custom-list-keymap/list-helpers/next-list-is-deeper.ts
@ -0,0 +1,19 @@
+import { EditorState } from "@tiptap/pm/state";
+
+import { findListItemPos } from "./find-list-item-pos";
+import { getNextListDepth } from "./get-next-list-depth";
+
+export const nextListIsDeeper = (typeOrName: string, state: EditorState) => {
+  const listDepth = getNextListDepth(typeOrName, state);
+  const listItemPos = findListItemPos(typeOrName, state);
+
+  if (!listItemPos || !listDepth) {
+    return false;
+  }
+
+  if (listDepth > listItemPos.depth) {
+    return true;
+  }
+
+  return false;
+};
--- a/packages/editor/core/src/ui/extensions/custom-list-keymap/list-helpers/next-list-is-higher.ts
+++ b/packages/editor/core/src/ui/extensions/custom-list-keymap/list-helpers/next-list-is-higher.ts
@ -0,0 +1,19 @@
+import { EditorState } from "@tiptap/pm/state";
+
+import { findListItemPos } from "./find-list-item-pos";
+import { getNextListDepth } from "./get-next-list-depth";
+
+export const nextListIsHigher = (typeOrName: string, state: EditorState) => {
+  const listDepth = getNextListDepth(typeOrName, state);
+  const listItemPos = findListItemPos(typeOrName, state);
+
+  if (!listItemPos || !listDepth) {
+    return false;
+  }
+
+  if (listDepth < listItemPos.depth) {
+    return true;
+  }
+
+  return false;
+};
--- a/packages/editor/core/src/ui/extensions/custom-list-keymap/list-keymap.ts
+++ b/packages/editor/core/src/ui/extensions/custom-list-keymap/list-keymap.ts
@ -0,0 +1,94 @@
+import { Extension } from "@tiptap/core";
+
+import { handleBackspace, handleDelete } from "./list-helpers";
+
+export type ListKeymapOptions = {
+  listTypes: Array<{
+    itemName: string;
+    wrapperNames: string[];
+  }>;
+};
+
+export const ListKeymap = Extension.create<ListKeymapOptions>({
+  name: "listKeymap",
+
+  addOptions() {
+    return {
+      listTypes: [
+        {
+          itemName: "listItem",
+          wrapperNames: ["bulletList", "orderedList"],
+        },
+        {
+          itemName: "taskItem",
+          wrapperNames: ["taskList"],
+        },
+      ],
+    };
+  },
+
+  addKeyboardShortcuts() {
+    return {
+      Delete: ({ editor }) => {
+        let handled = false;
+
+        this.options.listTypes.forEach(({ itemName }) => {
+          if (editor.state.schema.nodes[itemName] === undefined) {
+            return;
+          }
+
+          if (handleDelete(editor, itemName)) {
+            handled = true;
+          }
+        });
+
+        return handled;
+      },
+      "Mod-Delete": ({ editor }) => {
+        let handled = false;
+
+        this.options.listTypes.forEach(({ itemName }) => {
+          if (editor.state.schema.nodes[itemName] === undefined) {
+            return;
+          }
+
+          if (handleDelete(editor, itemName)) {
+            handled = true;
+          }
+        });
+
+        return handled;
+      },
+      Backspace: ({ editor }) => {
+        let handled = false;
+
+        this.options.listTypes.forEach(({ itemName, wrapperNames }) => {
+          if (editor.state.schema.nodes[itemName] === undefined) {
+            return;
+          }
+
+          if (handleBackspace(editor, itemName, wrapperNames)) {
+            handled = true;
+          }
+        });
+
+        return handled;
+      },
+      "Mod-Backspace": ({ editor }) => {
+        let handled = false;
+
+        this.options.listTypes.forEach(({ itemName, wrapperNames }) => {
+          if (editor.state.schema.nodes[itemName] === undefined) {
+            return;
+          }
+
+          if (handleBackspace(editor, itemName, wrapperNames)) {
+            handled = true;
+          }
+        });
+
+        return handled;
+      },
+    };
+  },
+});
--- a/packages/editor/core/src/ui/extensions/horizontal-rule.tsx
+++ b/packages/editor/core/src/ui/extensions/horizontal-rule.tsx
@ -0,0 +1,116 @@
+import { TextSelection } from "prosemirror-state";
+
+import {
+  InputRule,
+  mergeAttributes,
+  Node,
+  nodeInputRule,
+  wrappingInputRule,
+} from "@tiptap/core";
+
+/**
+ * Extension based on:
+ * - Tiptap HorizontalRule extension (https://tiptap.dev/api/nodes/horizontal-rule)
+ */
+
+export interface HorizontalRuleOptions {
+  HTMLAttributes: Record<string, any>;
+}
+
+declare module "@tiptap/core" {
+  interface Commands<ReturnType> {
+    horizontalRule: {
+      /**
+       * Add a horizontal rule
+       */
+      setHorizontalRule: () => ReturnType;
+    };
+  }
+}
+
+export default Node.create<HorizontalRuleOptions>({
+  name: "horizontalRule",
+
+  addOptions() {
+    return {
+      HTMLAttributes: {},
+    };
+  },
+
+  group: "block",
+
+  addAttributes() {
+    return {
+      color: {
+        default: "#dddddd",
+      },
+    };
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: `div[data-type="${this.name}"]`,
+      },
+    ];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return [
+      "div",
+      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
+        "data-type": this.name,
+      }),
+      ["div", {}],
+    ];
+  },
+
+  addCommands() {
+    return {
+      setHorizontalRule:
+        () =>
+        ({ chain }) => {
+          return (
+            chain()
+              .insertContent({ type: this.name })
+              // set cursor after horizontal rule
+              .command(({ tr, dispatch }) => {
+                if (dispatch) {
+                  const { $to } = tr.selection;
+                  const posAfter = $to.end();
+
+                  if ($to.nodeAfter) {
+                    tr.setSelection(TextSelection.create(tr.doc, $to.pos));
+                  } else {
+                    // add node after horizontal rule if it’s the end of the document
+                    const node =
+                      $to.parent.type.contentMatch.defaultType?.create();
+
+                    if (node) {
+                      tr.insert(posAfter, node);
+                      tr.setSelection(TextSelection.create(tr.doc, posAfter));
+                    }
+                  }
+
+                  tr.scrollIntoView();
+                }
+
+                return true;
+              })
+              .run()
+          );
+        },
+    };
+  },
+
+  addInputRules() {
+    return [
+      new InputRule({
+        find: /^(?:---|—-|___\s|\*\*\*\s)$/,
+        handler: ({ state, range, match }) => {
+          state.tr.replaceRangeWith(range.from, range.to, this.type.create());
+        },
+      }),
+    ];
+  },
+});
--- a/packages/editor/core/src/ui/extensions/index.tsx
+++ b/packages/editor/core/src/ui/extensions/index.tsx
@ -6,12 +6,12 @@ import { Color } from "@tiptap/extension-color";
 import TaskItem from "@tiptap/extension-task-item";
 import TaskList from "@tiptap/extension-task-list";
 import { Markdown } from "tiptap-markdown";
-import Gapcursor from "@tiptap/extension-gapcursor";

 import TableHeader from "./table/table-header/table-header";
 import Table from "./table/table";
 import TableCell from "./table/table-cell/table-cell";
 import TableRow from "./table/table-row/table-row";
+import HorizontalRule from "./horizontal-rule";

 import ImageExtension from "./image";

@ -20,6 +20,10 @@ import { isValidHttpUrl } from "../../lib/utils";
 import { IMentionSuggestion } from "../../types/mention-suggestion";
 import { Mentions } from "../mentions";

+import { CustomKeymap } from "./keymap";
+import { CustomCodeBlock } from "./code";
+import { ListKeymap } from "./custom-list-keymap";
+
 export const CoreEditorExtensions = (
  mentionConfig: {
    mentionSuggestions: IMentionSuggestion[];
@ -49,22 +53,16 @@ export const CoreEditorExtensions = (
        class: "border-l-4 border-custom-border-300",
      },
    },
-    code: {
-      HTMLAttributes: {
-        class:
-          "rounded-md bg-custom-primary-30 mx-1 px-1 py-1 font-mono font-medium text-custom-text-1000",
-        spellcheck: "false",
-      },
-    },
+    code: false,
    codeBlock: false,
    horizontalRule: false,
    dropcursor: {
      color: "rgba(var(--color-text-100))",
      width: 2,
    },
-    gapcursor: false,
  }),
-  Gapcursor,
+  CustomKeymap,
+  ListKeymap,
  TiptapLink.configure({
    protocols: ["http", "https"],
    validate: (url) => isValidHttpUrl(url),
@ -86,6 +84,7 @@ export const CoreEditorExtensions = (
      class: "not-prose pl-2",
    },
  }),
+  CustomCodeBlock,
  TaskItem.configure({
    HTMLAttributes: {
      class: "flex items-start my-4",
@ -95,7 +94,9 @@ export const CoreEditorExtensions = (
  Markdown.configure({
    html: true,
    transformCopiedText: true,
+    transformPastedText: true,
  }),
+  HorizontalRule,
  Table,
  TableHeader,
  TableCell,
--- a/packages/editor/core/src/ui/extensions/keymap.tsx
+++ b/packages/editor/core/src/ui/extensions/keymap.tsx
@ -0,0 +1,54 @@
+import { Extension } from "@tiptap/core";
+
+declare module "@tiptap/core" {
+  // eslint-disable-next-line no-unused-vars
+  interface Commands<ReturnType> {
+    customkeymap: {
+      /**
+       * Select text between node boundaries
+       */
+      selectTextWithinNodeBoundaries: () => ReturnType;
+    };
+  }
+}
+
+export const CustomKeymap = Extension.create({
+  name: "CustomKeymap",
+
+  addCommands() {
+    return {
+      selectTextWithinNodeBoundaries:
+        () =>
+        ({ editor, commands }) => {
+          const { state } = editor;
+          const { tr } = state;
+          const startNodePos = tr.selection.$from.start();
+          const endNodePos = tr.selection.$to.end();
+          return commands.setTextSelection({
+            from: startNodePos,
+            to: endNodePos,
+          });
+        },
+    };
+  },
+
+  addKeyboardShortcuts() {
+    return {
+      "Mod-a": ({ editor }) => {
+        const { state } = editor;
+        const { tr } = state;
+        const startSelectionPos = tr.selection.from;
+        const endSelectionPos = tr.selection.to;
+        const startNodePos = tr.selection.$from.start();
+        const endNodePos = tr.selection.$to.end();
+        const isCurrentTextSelectionNotExtendedToNodeBoundaries =
+          startSelectionPos > startNodePos || endSelectionPos < endNodePos;
+        if (isCurrentTextSelectionNotExtendedToNodeBoundaries) {
+          editor.chain().selectTextWithinNodeBoundaries().run();
+          return true;
+        }
+        return false;
+      },
+    };
+  },
+});
--- a/packages/editor/core/src/ui/extensions/table/table/icons.ts
+++ b/packages/editor/core/src/ui/extensions/table/table/icons.ts
@ -1,11 +1,10 @@
 const icons = {
-  colorPicker: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="transform: ;msFilter:;"><path fill="rgb(var(--color-text-300))" d="M20 14c-.092.064-2 2.083-2 3.5 0 1.494.949 2.448 2 2.5.906.044 2-.891 2-2.5 0-1.5-1.908-3.436-2-3.5zM9.586 20c.378.378.88.586 1.414.586s1.036-.208 1.414-.586l7-7-.707-.707L11 4.586 8.707 2.293 7.293 3.707 9.586 6 4 11.586c-.378.378-.586.88-.586 1.414s.208 1.036.586 1.414L9.586 20zM11 7.414 16.586 13H5.414L11 7.414z"></path></svg>`,
-  deleteColumn: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="#e53e3e" d="M0 0H24V24H0z"/><path d="M12 3c.552 0 1 .448 1 1v8c.835-.628 1.874-1 3-1 2.761 0 5 2.239 5 5s-2.239 5-5 5c-1.032 0-1.99-.313-2.787-.848L13 20c0 .552-.448 1-1 1H6c-.552 0-1-.448-1-1V4c0-.552.448-1 1-1h6zm-1 2H7v14h4V5zm8 10h-6v2h6v-2z"/></svg>`,
-  deleteRow: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="#e53e3e" d="M0 0H24V24H0z"/><path d="M20 5c.552 0 1 .448 1 1v6c0 .552-.448 1-1 1 .628.835 1 1.874 1 3 0 2.761-2.239 5-5 5s-5-2.239-5-5c0-1.126.372-2.165 1-3H4c-.552 0-1-.448-1-1V6c0-.552.448-1 1-1h16zm-7 10v2h6v-2h-6zm6-8H5v4h14V7z"/></svg>`,
+  colorPicker: `<svg xmlns="http://www.w3.org/2000/svg" length="24" viewBox="0 0 24 24" style="transform: ;msFilter:;"><path fill="rgb(var(--color-text-300))" d="M20 14c-.092.064-2 2.083-2 3.5 0 1.494.949 2.448 2 2.5.906.044 2-.891 2-2.5 0-1.5-1.908-3.436-2-3.5zM9.586 20c.378.378.88.586 1.414.586s1.036-.208 1.414-.586l7-7-.707-.707L11 4.586 8.707 2.293 7.293 3.707 9.586 6 4 11.586c-.378.378-.586.88-.586 1.414s.208 1.036.586 1.414L9.586 20zM11 7.414 16.586 13H5.414L11 7.414z"></path></svg>`,
+  deleteColumn: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" length="24"><path fill="#e53e3e" d="M0 0H24V24H0z"/><path d="M12 3c.552 0 1 .448 1 1v8c.835-.628 1.874-1 3-1 2.761 0 5 2.239 5 5s-2.239 5-5 5c-1.032 0-1.99-.313-2.787-.848L13 20c0 .552-.448 1-1 1H6c-.552 0-1-.448-1-1V4c0-.552.448-1 1-1h6zm-1 2H7v14h4V5zm8 10h-6v2h6v-2z"/></svg>`,
+  deleteRow: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" length="24"><path fill="#e53e3e" d="M0 0H24V24H0z"/><path d="M20 5c.552 0 1 .448 1 1v6c0 .552-.448 1-1 1 .628.835 1 1.874 1 3 0 2.761-2.239 5-5 5s-5-2.239-5-5c0-1.126.372-2.165 1-3H4c-.552 0-1-.448-1-1V6c0-.552.448-1 1-1h16zm-7 10v2h6v-2h-6zm6-8H5v4h14V7z"/></svg>`,
  insertLeftTableIcon: `<svg
    xmlns="http://www.w3.org/2000/svg"
-    width={24}
-    height={24}
+    length={24}
    viewBox="0 -960 960 960"
      >
    <path
@ -16,8 +15,7 @@ const icons = {
 `,
  insertRightTableIcon: `<svg
    xmlns="http://www.w3.org/2000/svg"
-    width={24}
-    height={24}
+    length={24}
    viewBox="0 -960 960 960"
  >
    <path
@ -28,8 +26,7 @@ const icons = {
 `,
  insertTopTableIcon: `<svg
    xmlns="http://www.w3.org/2000/svg"
-    width={24}
-    height={24}
+    length={24}
    viewBox="0 -960 960 960"
  >
    <path
@ -40,8 +37,7 @@ const icons = {
 `,
  insertBottomTableIcon: `<svg
    xmlns="http://www.w3.org/2000/svg"
-    width={24}
-    height={24}
+    length={24}
    viewBox="0 -960 960 960"
  >
    <path
--- a/packages/editor/core/src/ui/hooks/useEditor.tsx
+++ b/packages/editor/core/src/ui/hooks/useEditor.tsx
@ -1,10 +1,5 @@
 import { useEditor as useCustomEditor, Editor } from "@tiptap/react";
-import {
-  useImperativeHandle,
-  useRef,
-  MutableRefObject,
-  useEffect,
-} from "react";
+import { useImperativeHandle, useRef, MutableRefObject } from "react";
 import { DeleteImage } from "../../types/delete-image";
 import { CoreEditorProps } from "../props";
 import { CoreEditorExtensions } from "../extensions";
--- a/packages/editor/core/src/ui/menus/menu-items/index.tsx
+++ b/packages/editor/core/src/ui/menus/menu-items/index.tsx
@ -22,7 +22,7 @@ import {
  toggleBlockquote,
  toggleBold,
  toggleBulletList,
-  toggleCode,
+  toggleCodeBlock,
  toggleHeadingOne,
  toggleHeadingThree,
  toggleHeadingTwo,
@ -89,13 +89,6 @@ export const StrikeThroughItem = (editor: Editor): EditorMenuItem => ({
  icon: StrikethroughIcon,
 });

-export const CodeItem = (editor: Editor): EditorMenuItem => ({
-  name: "code",
-  isActive: () => editor?.isActive("code"),
-  command: () => toggleCode(editor),
-  icon: CodeIcon,
-});
-
 export const BulletListItem = (editor: Editor): EditorMenuItem => ({
  name: "bullet-list",
  isActive: () => editor?.isActive("bulletList"),
@ -110,6 +103,13 @@ export const TodoListItem = (editor: Editor): EditorMenuItem => ({
  icon: CheckSquare,
 });

+export const CodeItem = (editor: Editor): EditorMenuItem => ({
+  name: "code",
+  isActive: () => editor?.isActive("code"),
+  command: () => toggleCodeBlock(editor),
+  icon: CodeIcon,
+});
+
 export const NumberedListItem = (editor: Editor): EditorMenuItem => ({
  name: "ordered-list",
  isActive: () => editor?.isActive("orderedList"),
--- a/packages/editor/lite-text-editor/src/ui/menus/fixed-menu/index.tsx
+++ b/packages/editor/lite-text-editor/src/ui/menus/fixed-menu/index.tsx
@ -46,14 +46,14 @@ type EditorBubbleMenuProps = {
 };

 export const FixedMenu = (props: EditorBubbleMenuProps) => {
-  const basicMarkItems: BubbleMenuItem[] = [
+  const basicTextFormattingItems: BubbleMenuItem[] = [
    BoldItem(props.editor),
    ItalicItem(props.editor),
    UnderLineItem(props.editor),
    StrikeThroughItem(props.editor),
  ];

-  const listItems: BubbleMenuItem[] = [
+  const listFormattingItems: BubbleMenuItem[] = [
    BulletListItem(props.editor),
    NumberedListItem(props.editor),
  ];
@ -103,7 +103,7 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => {
      <div className="flex items-stretch justify-between gap-2 w-full border-[0.5px] border-custom-border-200 bg-custom-background-90 rounded p-1">
        <div className="flex items-stretch">
          <div className="flex items-stretch gap-0.5 pr-2.5 border-r border-custom-border-200">
-            {basicMarkItems.map((item, index) => (
+            {basicTextFormattingItems.map((item, index) => (
              <Tooltip
                key={index}
                tooltipContent={<span className="capitalize">{item.name}</span>}
@ -130,7 +130,7 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => {
            ))}
          </div>
          <div className="flex items-stretch gap-0.5 px-2.5 border-r border-custom-border-200">
-            {listItems.map((item, index) => (
+            {listFormattingItems.map((item, index) => (
              <Tooltip
                key={index}
                tooltipContent={<span className="capitalize">{item.name}</span>}
--- a/packages/editor/rich-text-editor/package.json
+++ b/packages/editor/rich-text-editor/package.json
@ -30,14 +30,11 @@
  },
  "dependencies": {
    "@plane/editor-core": "*",
-    "@tiptap/extension-code-block-lowlight": "^2.1.11",
    "@tiptap/extension-horizontal-rule": "^2.1.11",
    "@tiptap/extension-placeholder": "^2.1.11",
    "@tiptap/suggestion": "^2.1.7",
    "class-variance-authority": "^0.7.0",
    "clsx": "^1.2.1",
-    "highlight.js": "^11.8.0",
-    "lowlight": "^3.0.0",
    "lucide-react": "^0.244.0"
  },
  "devDependencies": {
--- a/packages/editor/rich-text-editor/src/index.ts
+++ b/packages/editor/rich-text-editor/src/index.ts
@ -1,5 +1,3 @@
-import "./styles/github-dark.css";
-
 export { RichTextEditor, RichTextEditorWithRef } from "./ui";
 export { RichReadOnlyEditor, RichReadOnlyEditorWithRef } from "./ui/read-only";
 export type { IMentionSuggestion, IMentionHighlight } from "./ui";
--- a/packages/editor/rich-text-editor/src/lib/utils/DragHandleElement.ts
+++ b/packages/editor/rich-text-editor/src/lib/utils/DragHandleElement.ts
@ -0,0 +1,23 @@
+export function createDragHandleElement(): HTMLElement {
+  let dragHandleElement = document.createElement("div");
+  dragHandleElement.draggable = true;
+  dragHandleElement.dataset.dragHandle = "";
+  dragHandleElement.classList.add("drag-handle");
+
+  const dragHandleContainer = document.createElement("div");
+  dragHandleContainer.classList.add("drag-handle-container");
+  dragHandleElement.appendChild(dragHandleContainer);
+
+  const dotsContainer = document.createElement("div");
+  dotsContainer.classList.add("drag-handle-dots");
+
+  for (let i = 0; i < 6; i++) {
+    const spanElement = document.createElement("span");
+    spanElement.classList.add("drag-handle-dot");
+    dotsContainer.appendChild(spanElement);
+  }
+
+  dragHandleContainer.appendChild(dotsContainer);
+
+  return dragHandleElement;
+}
--- a/packages/editor/rich-text-editor/src/styles/github-dark.css
+++ b/packages/editor/rich-text-editor/src/styles/github-dark.css
@ -1,2 +0,0 @@
-pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}
-.hljs{color:#c9d1d9;background:#0d1117}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#ff7b72}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#d2a8ff}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable{color:#79c0ff}.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#a5d6ff}.hljs-built_in,.hljs-symbol{color:#ffa657}.hljs-code,.hljs-comment,.hljs-formula{color:#8b949e}.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag{color:#7ee787}.hljs-subst{color:#c9d1d9}.hljs-section{color:#1f6feb;font-weight:700}.hljs-bullet{color:#f2cc60}.hljs-emphasis{color:#c9d1d9;font-style:italic}.hljs-strong{color:#c9d1d9;font-weight:700}.hljs-addition{color:#aff5b4;background-color:#033a16}.hljs-deletion{color:#ffdcd7;background-color:#67060c}
--- a/packages/editor/rich-text-editor/src/ui/extensions/drag-drop.tsx
+++ b/packages/editor/rich-text-editor/src/ui/extensions/drag-drop.tsx
@ -0,0 +1,235 @@
+import { Extension } from "@tiptap/core";
+
+import { PluginKey, NodeSelection, Plugin } from "@tiptap/pm/state";
+// @ts-ignore
+import { __serializeForClipboard, EditorView } from "@tiptap/pm/view";
+import { createDragHandleElement } from "../../lib/utils/DragHandleElement";
+
+export interface DragHandleOptions {
+  dragHandleWidth: number;
+}
+
+function absoluteRect(node: Element) {
+  const data = node.getBoundingClientRect();
+
+  return {
+    top: data.top,
+    left: data.left,
+    width: data.width,
+  };
+}
+
+function nodeDOMAtCoords(coords: { x: number; y: number }) {
+  return document
+    .elementsFromPoint(coords.x, coords.y)
+    .find((elem: Element) => {
+      return (
+        elem.parentElement?.matches?.(".ProseMirror") ||
+        elem.matches(
+          [
+            "li",
+            "p:not(:first-child)",
+            "pre",
+            "blockquote",
+            "h1, h2, h3",
+            "[data-type=horizontalRule]",
+            ".tableWrapper",
+          ].join(", "),
+        )
+      );
+    });
+}
+
+function nodePosAtDOM(node: Element, view: EditorView) {
+  const boundingRect = node.getBoundingClientRect();
+
+  if (node.nodeName === "IMG") {
+    return view.posAtCoords({
+      left: boundingRect.left + 1,
+      top: boundingRect.top + 1,
+    })?.pos;
+  }
+
+  if (node.nodeName === "PRE") {
+    return (
+      view.posAtCoords({
+        left: boundingRect.left + 1,
+        top: boundingRect.top + 1,
+      })?.pos! - 1
+    );
+  }
+
+  return view.posAtCoords({
+    left: boundingRect.left + 1,
+    top: boundingRect.top + 1,
+  })?.inside;
+}
+
+function DragHandle(options: DragHandleOptions) {
+  function handleDragStart(event: DragEvent, view: EditorView) {
+    view.focus();
+
+    if (!event.dataTransfer) return;
+
+    const node = nodeDOMAtCoords({
+      x: event.clientX + options.dragHandleWidth + 50,
+      y: event.clientY,
+    });
+
+    if (!(node instanceof Element)) return;
+
+    const nodePos = nodePosAtDOM(node, view);
+    if (nodePos === null || nodePos === undefined || nodePos < 0) return;
+
+    view.dispatch(
+      view.state.tr.setSelection(NodeSelection.create(view.state.doc, nodePos)),
+    );
+
+    const slice = view.state.selection.content();
+    const { dom, text } = __serializeForClipboard(view, slice);
+
+    event.dataTransfer.clearData();
+    event.dataTransfer.setData("text/html", dom.innerHTML);
+    event.dataTransfer.setData("text/plain", text);
+    event.dataTransfer.effectAllowed = "copyMove";
+
+    event.dataTransfer.setDragImage(node, 0, 0);
+
+    view.dragging = { slice, move: event.ctrlKey };
+  }
+
+  function handleClick(event: MouseEvent, view: EditorView) {
+    view.focus();
+
+    view.dom.classList.remove("dragging");
+
+    const node = nodeDOMAtCoords({
+      x: event.clientX + 50 + options.dragHandleWidth,
+      y: event.clientY,
+    });
+
+    if (!(node instanceof Element)) return;
+
+    const nodePos = nodePosAtDOM(node, view);
+
+    if (nodePos === null || nodePos === undefined || nodePos < 0) return;
+
+    view.dispatch(
+      view.state.tr.setSelection(NodeSelection.create(view.state.doc, nodePos)),
+    );
+  }
+
+  let dragHandleElement: HTMLElement | null = null;
+
+  function hideDragHandle() {
+    if (dragHandleElement) {
+      dragHandleElement.classList.add("hidden");
+    }
+  }
+
+  function showDragHandle() {
+    if (dragHandleElement) {
+      dragHandleElement.classList.remove("hidden");
+    }
+  }
+
+  return new Plugin({
+    key: new PluginKey("dragHandle"),
+    view: (view) => {
+      dragHandleElement = createDragHandleElement();
+      dragHandleElement.addEventListener("dragstart", (e) => {
+        handleDragStart(e, view);
+      });
+      dragHandleElement.addEventListener("click", (e) => {
+        handleClick(e, view);
+      });
+
+      dragHandleElement.addEventListener("dragstart", (e) => {
+        handleDragStart(e, view);
+      });
+      dragHandleElement.addEventListener("click", (e) => {
+        handleClick(e, view);
+      });
+
+      hideDragHandle();
+
+      view?.dom?.parentElement?.appendChild(dragHandleElement);
+
+      return {
+        destroy: () => {
+          dragHandleElement?.remove?.();
+          dragHandleElement = null;
+        },
+      };
+    },
+    props: {
+      handleDOMEvents: {
+        mousemove: (view, event) => {
+          if (!view.editable) {
+            return;
+          }
+
+          const node = nodeDOMAtCoords({
+            x: event.clientX + options.dragHandleWidth,
+            y: event.clientY,
+          });
+
+          if (!(node instanceof Element)) {
+            hideDragHandle();
+            return;
+          }
+
+          const compStyle = window.getComputedStyle(node);
+          const lineHeight = parseInt(compStyle.lineHeight, 10);
+          const paddingTop = parseInt(compStyle.paddingTop, 10);
+
+          const rect = absoluteRect(node);
+
+          rect.top += (lineHeight - 24) / 2;
+          rect.top += paddingTop;
+          // Li markers
+          if (node.matches("ul:not([data-type=taskList]) li, ol li")) {
+            rect.left -= options.dragHandleWidth;
+          }
+          rect.width = options.dragHandleWidth;
+
+          if (!dragHandleElement) return;
+
+          dragHandleElement.style.left = `${rect.left - rect.width}px`;
+          dragHandleElement.style.top = `${rect.top + 3}px`;
+          showDragHandle();
+        },
+        keydown: () => {
+          hideDragHandle();
+        },
+        wheel: () => {
+          hideDragHandle();
+        },
+        // dragging className is used for CSS
+        dragstart: (view) => {
+          view.dom.classList.add("dragging");
+        },
+        drop: (view) => {
+          view.dom.classList.remove("dragging");
+        },
+        dragend: (view) => {
+          view.dom.classList.remove("dragging");
+        },
+      },
+    },
+  });
+}
+
+const DragAndDrop = Extension.create({
+  name: "dragAndDrop",
+
+  addProseMirrorPlugins() {
+    return [
+      DragHandle({
+        dragHandleWidth: 24,
+      }),
+    ];
+  },
+});
+
+export default DragAndDrop;
--- a/packages/editor/rich-text-editor/src/ui/extensions/index.tsx
+++ b/packages/editor/rich-text-editor/src/ui/extensions/index.tsx
@ -1,50 +1,18 @@
-import HorizontalRule from "@tiptap/extension-horizontal-rule";
 import Placeholder from "@tiptap/extension-placeholder";
-import CodeBlockLowlight from "@tiptap/extension-code-block-lowlight";
-import { common, createLowlight } from "lowlight";
-import { InputRule } from "@tiptap/core";
-
-import ts from "highlight.js/lib/languages/typescript";

 import SlashCommand from "./slash-command";
 import { UploadImage } from "../";
-
-const lowlight = createLowlight(common);
-lowlight.register("ts", ts);
+import DragAndDrop from "./drag-drop";

 export const RichTextEditorExtensions = (
  uploadFile: UploadImage,
  setIsSubmitting?: (
    isSubmitting: "submitting" | "submitted" | "saved",
  ) => void,
+  dragDropEnabled?: boolean,
 ) => [
-  HorizontalRule.extend({
-    addInputRules() {
-      return [
-        new InputRule({
-          find: /^(?:---|—-|___\s|\*\*\*\s)$/,
-          handler: ({ state, range, commands }) => {
-            commands.splitBlock();
-
-            const attributes = {};
-            const { tr } = state;
-            const start = range.from;
-            const end = range.to;
-            // @ts-ignore
-            tr.replaceWith(start - 1, end, this.type.create(attributes));
-          },
-        }),
-      ];
-    },
-  }).configure({
-    HTMLAttributes: {
-      class: "mb-6 border-t border-custom-border-300",
-    },
-  }),
  SlashCommand(uploadFile, setIsSubmitting),
-  CodeBlockLowlight.configure({
-    lowlight,
-  }),
+  dragDropEnabled === true && DragAndDrop,
  Placeholder.configure({
    placeholder: ({ node }) => {
      if (node.type.name === "heading") {
@ -53,7 +21,9 @@ export const RichTextEditorExtensions = (
      if (node.type.name === "image" || node.type.name === "table") {
        return "";
      }
-
+      if (node.type.name === "codeBlock") {
+        return "Type in your code here...";
+      }
      return "Press '/' for commands...";
    },
    includeChildren: true,
--- a/packages/editor/rich-text-editor/src/ui/index.tsx
+++ b/packages/editor/rich-text-editor/src/ui/index.tsx
@ -25,6 +25,7 @@ export type IMentionHighlight = string;

 interface IRichTextEditor {
  value: string;
+  dragDropEnabled?: boolean;
  uploadFile: UploadImage;
  deleteFile: DeleteImage;
  noBorder?: boolean;
@ -54,6 +55,7 @@ interface EditorHandle {

 const RichTextEditor = ({
  onChange,
+  dragDropEnabled,
  debouncedUpdatesEnabled,
  setIsSubmitting,
  setShouldShowAlert,
@ -79,7 +81,11 @@ const RichTextEditor = ({
    cancelUploadImage,
    deleteFile,
    forwardedRef,
-    extensions: RichTextEditorExtensions(uploadFile, setIsSubmitting),
+    extensions: RichTextEditorExtensions(
+      uploadFile,
+      setIsSubmitting,
+      dragDropEnabled,
+    ),
    mentionHighlights,
    mentionSuggestions,
  });
--- a/packages/editor/rich-text-editor/src/ui/menus/bubble-menu/index.tsx
+++ b/packages/editor/rich-text-editor/src/ui/menus/bubble-menu/index.tsx
@ -38,21 +38,8 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props: any) => {
      const { selection } = state;

      const { empty } = selection;
-      const hasEditorFocus = view.hasFocus();
-
-      // if (typeof window !== "undefined") {
-      //   const selection: any = window?.getSelection();
-      //   if (selection.rangeCount !== 0) {
-      //     const range = selection.getRangeAt(0);
-      //     if (findTableAncestor(range.startContainer)) {
-      //       console.log("table");
-      //       return false;
-      //     }
-      //   }
-      // }

      if (
-        !hasEditorFocus ||
        empty ||
        !editor.isEditable ||
        editor.isActive("image") ||
--- a/packages/editor/rich-text-editor/src/ui/menus/bubble-menu/node-selector.tsx
+++ b/packages/editor/rich-text-editor/src/ui/menus/bubble-menu/node-selector.tsx
@ -1,12 +1,12 @@
 import {
  BulletListItem,
  cn,
-  CodeItem,
  HeadingOneItem,
  HeadingThreeItem,
  HeadingTwoItem,
  NumberedListItem,
  QuoteItem,
+  CodeItem,
  TodoListItem,
 } from "@plane/editor-core";
 import { Editor } from "@tiptap/react";
--- a/space/styles/editor.css
+++ b/space/styles/editor.css
@ -53,11 +53,12 @@ ul[data-type="taskList"] li > label input[type="checkbox"] {
  background-color: rgb(var(--color-background-100));
  margin: 0;
  cursor: pointer;
-  width: 1.2rem;
-  height: 1.2rem;
+  width: 0.8rem;
+  height: 0.8rem;
  position: relative;
-  border: 2px solid rgb(var(--color-text-100));
-  margin-right: 0.3rem;
+  border: 1.5px solid rgb(var(--color-text-100));
+  margin-right: 0.2rem;
+  margin-top: 0.15rem;
  display: grid;
  place-content: center;

@ -71,8 +72,8 @@ ul[data-type="taskList"] li > label input[type="checkbox"] {

  &::before {
    content: "";
-    width: 0.65em;
-    height: 0.65em;
+    width: 0.5em;
+    height: 0.5em;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em;
@ -229,3 +230,93 @@ ul[data-type="taskList"] li[data-checked="true"] > div > p {
 .ProseMirror table * .is-empty::before {
  opacity: 0;
 }
+
+.ProseMirror pre {
+  background: rgba(var(--color-background-80));
+  border-radius: 0.5rem;
+  color: rgba(var(--color-text-100));
+  font-family: "JetBrainsMono", monospace;
+  padding: 0.75rem 1rem;
+}
+
+.ProseMirror pre code {
+  background: none;
+  color: inherit;
+  font-size: 0.8rem;
+  padding: 0;
+}
+
+.ProseMirror:not(.dragging) .ProseMirror-selectednode:not(img):not(pre) {
+  outline: none !important;
+  border-radius: 0.2rem;
+  background-color: rgb(var(--color-background-90));
+  border: 1px solid #5abbf7;
+  padding: 4px 2px 4px 2px;
+  transition: background-color 0.2s;
+  box-shadow: none;
+}
+
+.drag-handle {
+  position: fixed;
+  opacity: 1;
+  transition: opacity ease-in 0.2s;
+  height: 18px;
+  width: 15px;
+  display: grid;
+  place-items: center;
+  z-index: 10;
+  cursor: grab;
+  border-radius: 2px;
+  background-color: rgb(var(--color-background-90));
+}
+
+.drag-handle:hover {
+  background-color: rgb(var(--color-background-80));
+  transition: background-color 0.2s;
+}
+
+.drag-handle.hidden {
+  opacity: 0;
+  pointer-events: none;
+}
+
+@media screen and (max-width: 600px) {
+  .drag-handle {
+    display: none;
+    pointer-events: none;
+  }
+}
+
+.drag-handle-container {
+  height: 15px;
+  width: 15px;
+  cursor: grab;
+  display: grid;
+  place-items: center;
+}
+
+.drag-handle-dots {
+  height: 100%;
+  width: 12px;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  place-items: center;
+}
+
+.drag-handle-dot {
+  height: 2.75px;
+  width: 3px;
+  background-color: rgba(var(--color-text-200));
+  border-radius: 50%;
+}
+
+div[data-type="horizontalRule"] {
+  line-height: 0;
+  padding: 0.25rem 0;
+  margin-top: 0;
+  margin-bottom: 0;
+
+  & > div {
+    border-bottom: 1px solid rgb(var(--color-text-100));
+  }
+}
--- a/web/components/headers/cycle-issues.tsx
+++ b/web/components/headers/cycle-issues.tsx
@ -30,12 +30,12 @@ export const CycleIssuesHeader: React.FC = observer(() => {
    issueFilter: issueFilterStore,
    cycle: cycleStore,
    cycleIssueFilter: cycleIssueFilterStore,
-    project: projectStore,
+    project: { currentProjectDetails },
+    projectLabel: { projectLabels },
    projectMember: { projectMembers },
    projectState: projectStateStore,
    commandPalette: commandPaletteStore,
  } = useMobxStore();
-  const { currentProjectDetails } = projectStore;

  const activeLayout = issueFilterStore.userDisplayFilters.layout;

@ -178,7 +178,7 @@ export const CycleIssuesHeader: React.FC = observer(() => {
              layoutDisplayFiltersOptions={
                activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
              }
-              labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? undefined}
+              labels={projectLabels ?? undefined}
              members={projectMembers?.map((m) => m.member)}
              states={projectStateStore.states?.[projectId?.toString() ?? ""] ?? undefined}
            />
--- a/web/components/headers/module-issues.tsx
+++ b/web/components/headers/module-issues.tsx
@ -30,13 +30,13 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
    issueFilter: issueFilterStore,
    module: moduleStore,
    moduleFilter: moduleFilterStore,
-    project: projectStore,
+    project: { currentProjectDetails },
+    projectLabel: { projectLabels },
    projectMember: { projectMembers },
    projectState: projectStateStore,
    commandPalette: commandPaletteStore,
  } = useMobxStore();
  const activeLayout = issueFilterStore.userDisplayFilters.layout;
-  const { currentProjectDetails } = projectStore;

  const { setValue, storedValue } = useLocalStorage("module_sidebar_collapsed", "false");

@ -177,7 +177,7 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
              layoutDisplayFiltersOptions={
                activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
              }
-              labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? undefined}
+              labels={projectLabels ?? undefined}
              members={projectMembers?.map((m) => m.member)}
              states={projectStateStore.states?.[projectId?.toString() ?? ""] ?? undefined}
            />
--- a/web/components/headers/project-archived-issues.tsx
+++ b/web/components/headers/project-archived-issues.tsx
@ -21,14 +21,13 @@ export const ProjectArchivedIssuesHeader: FC = observer(() => {
  const { workspaceSlug, projectId } = router.query;

  const {
-    project: projectStore,
+    project: { currentProjectDetails },
+    projectLabel: { projectLabels },
    projectMember: { projectMembers },
    archivedIssueFilters: archivedIssueFiltersStore,
    projectState: projectStateStore,
  } = useMobxStore();

-  const { currentProjectDetails } = projectStore;
-
  // for archived issues list layout is the only option
  const activeLayout = "list";

@ -119,7 +118,7 @@ export const ProjectArchivedIssuesHeader: FC = observer(() => {
            layoutDisplayFiltersOptions={
              activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.archived_issues[activeLayout] : undefined
            }
-            labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? undefined}
+            labels={projectLabels ?? undefined}
            members={projectMembers?.map((m) => m.member)}
            states={projectStateStore.states?.[projectId?.toString() ?? ""] ?? undefined}
          />
--- a/web/components/headers/project-issues.tsx
+++ b/web/components/headers/project-issues.tsx
@ -25,7 +25,8 @@ export const ProjectIssuesHeader: React.FC = observer(() => {

  const {
    issueFilter: issueFilterStore,
-    project: projectStore,
+    project: { currentProjectDetails },
+    projectLabel: { projectLabels },
    projectMember: { projectMembers },
    projectState: projectStateStore,
    inbox: inboxStore,
@ -92,7 +93,6 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
    },
    [issueFilterStore, projectId, workspaceSlug]
  );
-  const { currentProjectDetails } = projectStore;

  const inboxDetails = projectId ? inboxStore.inboxesList?.[projectId.toString()]?.[0] : undefined;

@ -178,7 +178,7 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
              layoutDisplayFiltersOptions={
                activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
              }
-              labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? undefined}
+              labels={projectLabels ?? undefined}
              members={projectMembers?.map((m) => m.member)}
              states={projectStateStore.states?.[projectId?.toString() ?? ""] ?? undefined}
            />
--- a/web/components/headers/project-view-issues.tsx
+++ b/web/components/headers/project-view-issues.tsx
@ -22,14 +22,13 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
  const {
    issueFilter: issueFilterStore,
    projectViewFilters: projectViewFiltersStore,
-    project: projectStore,
+    project: { currentProjectDetails },
+    projectLabel: { projectLabels },
    projectMember: { projectMembers },
    projectState: projectStateStore,
    projectViews: projectViewsStore,
  } = useMobxStore();

-  const { currentProjectDetails } = projectStore;
-
  const storedFilters = viewId ? projectViewFiltersStore.storedFilters[viewId.toString()] : undefined;

  const activeLayout = issueFilterStore.userDisplayFilters.layout;
@ -163,7 +162,7 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
            layoutDisplayFiltersOptions={
              activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT.issues[activeLayout] : undefined
            }
-            labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? undefined}
+            labels={projectLabels ?? undefined}
            members={projectMembers?.map((m) => m.member)}
            states={projectStateStore.states?.[projectId?.toString() ?? ""] ?? undefined}
          />
--- a/web/components/instance/general-form.tsx
+++ b/web/components/instance/general-form.tsx
@ -1,44 +1,125 @@
 import { FC } from "react";
-import { useForm } from "react-hook-form";
+import { Controller, useForm } from "react-hook-form";
 // ui
-import { Input } from "@plane/ui";
+import { Button, Input, ToggleSwitch } from "@plane/ui";
 // types
 import { IInstance } from "types/instance";
+// hooks
+import useToast from "hooks/use-toast";
+import { useMobxStore } from "lib/mobx/store-provider";

 export interface IInstanceGeneralForm {
-  data: IInstance;
+  instance: IInstance;
 }

 export interface GeneralFormValues {
  instance_name: string;
-  namespace: string | null;
  is_telemetry_enabled: boolean;
 }

 export const InstanceGeneralForm: FC<IInstanceGeneralForm> = (props) => {
-  const { data } = props;
-
-  const {} = useForm<GeneralFormValues>({
+  const { instance } = props;
+  // store
+  const { instance: instanceStore } = useMobxStore();
+  // toast
+  const { setToastAlert } = useToast();
+  // form data
+  const {
+    handleSubmit,
+    control,
+    formState: { errors, isSubmitting },
+  } = useForm<GeneralFormValues>({
    defaultValues: {
-      instance_name: data.instance_name,
-      namespace: data.namespace,
-      is_telemetry_enabled: data.is_telemetry_enabled,
+      instance_name: instance.instance_name,
+      is_telemetry_enabled: instance.is_telemetry_enabled,
    },
  });

+  const onSubmit = async (formData: GeneralFormValues) => {
+    const payload: Partial<GeneralFormValues> = { ...formData };
+
+    await instanceStore
+      .updateInstanceInfo(payload)
+      .then(() =>
+        setToastAlert({
+          title: "Success",
+          type: "success",
+          message: "Settings updated successfully",
+        })
+      )
+      .catch((err) => console.error(err));
+  };
+
  return (
-    <div className="p-5">
-      <div className="my-2 ">
-        <label>Instance Name</label>
-        <Input name="instance_name" />
+    <div className="flex flex-col gap-8 m-8">
+      <div className="grid grid-col grid-cols-1 lg:grid-cols-2 2xl:grid-cols-3 items-center justify-between gap-8 w-full">
+        <div className="flex flex-col gap-1">
+          <h4 className="text-sm">Name of instance</h4>
+          <Controller
+            control={control}
+            name="instance_name"
+            render={({ field: { value, onChange, ref } }) => (
+              <Input
+                id="instance_name"
+                name="instance_name"
+                type="text"
+                value={value}
+                onChange={onChange}
+                ref={ref}
+                hasError={Boolean(errors.instance_name)}
+                placeholder="Instance Name"
+                className="rounded-md font-medium w-full"
+              />
+            )}
+          />
        </div>
-      <div className="my-2">
-        <label>Instance ID</label>
-        <Input name="instance_id" value={data.instance_id} disabled={true} />
+
+        <div className="flex flex-col gap-1">
+          <h4 className="text-sm">Admin Email</h4>
+          <Input
+            id="primary_email"
+            name="primary_email"
+            type="email"
+            value={instance.primary_email}
+            placeholder="Admin Email"
+            className="w-full cursor-not-allowed !text-custom-text-400"
+            disabled
+          />
        </div>
-      <div className="my-2">
-        <label>Namespace</label>
-        <Input name="namespace" />
+
+        <div className="flex flex-col gap-1">
+          <h4 className="text-sm">Instance Id</h4>
+          <Input
+            id="instance_id"
+            name="instance_id"
+            type="text"
+            value={instance.instance_id}
+            className="rounded-md font-medium w-full cursor-not-allowed !text-custom-text-400"
+            disabled
+          />
+        </div>
+      </div>
+
+      <div className="flex items-center gap-8 pt-4">
+        <div>
+          <div className="text-custom-text-100 font-medium text-sm">Share anonymous usage instance</div>
+          <div className="text-custom-text-300 font-normal text-xs">
+            Help us understand how you use Plane so we can build better for you.
+          </div>
+        </div>
+        <div>
+          <Controller
+            control={control}
+            name="is_telemetry_enabled"
+            render={({ field: { value, onChange } }) => <ToggleSwitch value={value} onChange={onChange} size="sm" />}
+          />
+        </div>
+      </div>
+
+      <div className="flex items-center py-1">
+        <Button variant="primary" onClick={handleSubmit(onSubmit)} loading={isSubmitting}>
+          {isSubmitting ? "Saving..." : "Save Changes"}
+        </Button>
      </div>
    </div>
  );
--- a/web/components/instance/index.ts
+++ b/web/components/instance/index.ts
@ -1,3 +1,4 @@
 export * from "./help-section";
 export * from "./sidebar-menu";
+export * from "./sidebar-dropdown";
 export * from "./general-form";
--- a/web/components/instance/sidebar-dropdown.tsx
+++ b/web/components/instance/sidebar-dropdown.tsx
@ -0,0 +1,148 @@
+import { Fragment } from "react";
+import { useRouter } from "next/router";
+import { observer } from "mobx-react-lite";
+import Link from "next/link";
+import { Menu, Transition } from "@headlessui/react";
+import { LogOut, Settings, Shield, UserCircle2 } from "lucide-react";
+// mobx store
+import { useMobxStore } from "lib/mobx/store-provider";
+// hooks
+import useToast from "hooks/use-toast";
+// services
+import { AuthService } from "services/auth.service";
+// ui
+import { Avatar } from "@plane/ui";
+
+// Static Data
+const profileLinks = (workspaceSlug: string, userId: string) => [
+  {
+    name: "View profile",
+    icon: UserCircle2,
+    link: `/${workspaceSlug}/profile/${userId}`,
+  },
+  {
+    name: "Settings",
+    icon: Settings,
+    link: `/${workspaceSlug}/me/profile`,
+  },
+];
+
+const authService = new AuthService();
+
+export const InstanceSidebarDropdown = observer(() => {
+  const router = useRouter();
+  // store
+  const {
+    theme: { sidebarCollapsed },
+    workspace: { workspaceSlug },
+    user: { currentUser, currentUserSettings },
+  } = useMobxStore();
+  // hooks
+  const { setToastAlert } = useToast();
+
+  // redirect url for normal mode
+  const redirectWorkspaceSlug =
+    workspaceSlug ||
+    currentUserSettings?.workspace?.last_workspace_slug ||
+    currentUserSettings?.workspace?.fallback_workspace_slug ||
+    "";
+
+  const handleSignOut = async () => {
+    await authService
+      .signOut()
+      .then(() => {
+        router.push("/");
+      })
+      .catch(() =>
+        setToastAlert({
+          type: "error",
+          title: "Error!",
+          message: "Failed to sign out. Please try again.",
+        })
+      );
+  };
+
+  return (
+    <div className="flex items-center gap-x-3 gap-y-2 px-4 py-4">
+      <div className="w-full h-full truncate">
+        <div
+          className={`flex flex-grow items-center gap-x-2 rounded p-1 truncate ${
+            sidebarCollapsed ? "justify-center" : ""
+          }`}
+        >
+          <div className={`flex-shrink-0 `}>
+            <Shield className="h-6 w-6 text-custom-text-100" />
+          </div>
+
+          {!sidebarCollapsed && (
+            <h4 className="text-custom-text-100 font-medium text-base truncate">Instance Admin Settings</h4>
+          )}
+        </div>
+      </div>
+
+      {!sidebarCollapsed && (
+        <Menu as="div" className="relative flex-shrink-0">
+          <Menu.Button className="grid place-items-center outline-none">
+            <Avatar
+              name={currentUser?.display_name}
+              src={currentUser?.avatar}
+              size={24}
+              shape="square"
+              className="!text-base"
+            />
+          </Menu.Button>
+
+          <Transition
+            as={Fragment}
+            enter="transition ease-out duration-100"
+            enterFrom="transform opacity-0 scale-95"
+            enterTo="transform opacity-100 scale-100"
+            leave="transition ease-in duration-75"
+            leaveFrom="transform opacity-100 scale-100"
+            leaveTo="transform opacity-0 scale-95"
+          >
+            <Menu.Items
+              className="absolute left-0 z-20 mt-1.5 flex flex-col w-52  origin-top-left rounded-md
+          border border-custom-sidebar-border-200 bg-custom-sidebar-background-100 px-1 py-2 divide-y divide-custom-sidebar-border-200 shadow-lg text-xs outline-none"
+            >
+              <div className="flex flex-col gap-2.5 pb-2">
+                <span className="px-2 text-custom-sidebar-text-200">{currentUser?.email}</span>
+                {profileLinks(workspaceSlug?.toString() ?? "", currentUser?.id ?? "").map((link, index) => (
+                  <Menu.Item key={index} as="button" type="button">
+                    <Link href={link.link}>
+                      <a className="flex w-full items-center gap-2 rounded px-2 py-1 hover:bg-custom-sidebar-background-80">
+                        <link.icon className="h-4 w-4 stroke-[1.5]" />
+                        {link.name}
+                      </a>
+                    </Link>
+                  </Menu.Item>
+                ))}
+              </div>
+              <div className="py-2">
+                <Menu.Item
+                  as="button"
+                  type="button"
+                  className="flex w-full items-center gap-2 rounded px-2 py-1 hover:bg-custom-sidebar-background-80"
+                  onClick={handleSignOut}
+                >
+                  <LogOut className="h-4 w-4 stroke-[1.5]" />
+                  Sign out
+                </Menu.Item>
+              </div>
+
+              <div className="p-2 pb-0">
+                <Menu.Item as="button" type="button" className="w-full">
+                  <Link href={redirectWorkspaceSlug}>
+                    <a className="flex w-full items-center justify-center rounded px-2 py-1 text-sm font-medium text-custom-primary-100 hover:text-custom-primary-200 bg-custom-primary-10 hover:bg-custom-primary-20">
+                      Normal Mode
+                    </a>
+                  </Link>
+                </Menu.Item>
+              </div>
+            </Menu.Items>
+          </Transition>
+        </Menu>
+      )}
+    </div>
+  );
+});
--- a/web/components/instance/sidebar-menu.tsx
+++ b/web/components/instance/sidebar-menu.tsx
@ -37,7 +37,7 @@ export const InstanceAdminSidebarMenu = () => {
  const router = useRouter();

  return (
-    <div>
+    <div className="h-full overflow-y-auto w-full cursor-pointer space-y-2 p-4">
      {INSTANCE_ADMIN_LINKS.map((item, index) => {
        const isActive = item.name === "Settings" ? router.asPath.includes(item.href) : router.asPath === item.href;

--- a/web/components/issues/description-form.tsx
+++ b/web/components/issues/description-form.tsx
@ -151,6 +151,7 @@ export const IssueDescriptionForm: FC<IssueDetailsProps> = (props) => {
              value={value}
              setShouldShowAlert={setShowAlert}
              setIsSubmitting={setIsSubmitting}
+              dragDropEnabled={true}
              customClassName={isAllowed ? "min-h-[150px] shadow-sm" : "!p-0 !pt-2 text-custom-text-200"}
              noBorder={!isAllowed}
              onChange={(description: Object, description_html: string) => {
--- a/web/components/issues/issue-layouts/filters/applied-filters/filters-list.tsx
+++ b/web/components/issues/issue-layouts/filters/applied-filters/filters-list.tsx
@ -15,13 +15,13 @@ import { X } from "lucide-react";
 // helpers
 import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
 // types
-import { IIssueFilterOptions, IIssueLabels, IProject, IState, IUserLite } from "types";
+import { IIssueFilterOptions, IIssueLabel, IProject, IState, IUserLite } from "types";

 type Props = {
  appliedFilters: IIssueFilterOptions;
  handleClearAllFilters: () => void;
  handleRemoveFilter: (key: keyof IIssueFilterOptions, value: string | null) => void;
-  labels?: IIssueLabels[] | undefined;
+  labels?: IIssueLabel[] | undefined;
  members?: IUserLite[] | undefined;
  projects?: IProject[] | undefined;
  states?: IState[] | undefined;
--- a/web/components/issues/issue-layouts/filters/applied-filters/label.tsx
+++ b/web/components/issues/issue-layouts/filters/applied-filters/label.tsx
@ -3,11 +3,11 @@ import { observer } from "mobx-react-lite";
 // icons
 import { X } from "lucide-react";
 // types
-import { IIssueLabels } from "types";
+import { IIssueLabel } from "types";

 type Props = {
  handleRemove: (val: string) => void;
-  labels: IIssueLabels[] | undefined;
+  labels: IIssueLabel[] | undefined;
  values: string[];
 };

--- a/web/components/issues/issue-layouts/filters/applied-filters/roots/archived-issue.tsx
+++ b/web/components/issues/issue-layouts/filters/applied-filters/roots/archived-issue.tsx
@ -14,7 +14,7 @@ export const ArchivedIssueAppliedFiltersRoot: React.FC = observer(() => {

  const {
    archivedIssueFilters: archivedIssueFiltersStore,
-    project: projectStore,
+    projectLabel: { projectLabels },
    projectMember: { projectMembers },
    projectState: projectStateStore,
  } = useMobxStore();
@ -77,7 +77,7 @@ export const ArchivedIssueAppliedFiltersRoot: React.FC = observer(() => {
        appliedFilters={appliedFilters}
        handleClearAllFilters={handleClearAllFilters}
        handleRemoveFilter={handleRemoveFilter}
-        labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? []}
+        labels={projectLabels ?? []}
        members={projectMembers?.map((m) => m.member)}
        states={projectStateStore.states?.[projectId?.toString() ?? ""]}
      />
--- a/web/components/issues/issue-layouts/filters/applied-filters/roots/cycle-root.tsx
+++ b/web/components/issues/issue-layouts/filters/applied-filters/roots/cycle-root.tsx
@ -12,7 +12,7 @@ export const CycleAppliedFiltersRoot: React.FC = observer(() => {
  const { workspaceSlug, projectId, cycleId } = router.query;

  const {
-    project: projectStore,
+    projectLabel: { projectLabels },
    projectMember: { projectMembers },
    cycleIssueFilter: cycleIssueFilterStore,
    projectState: projectStateStore,
@ -72,7 +72,7 @@ export const CycleAppliedFiltersRoot: React.FC = observer(() => {
        appliedFilters={appliedFilters}
        handleClearAllFilters={handleClearAllFilters}
        handleRemoveFilter={handleRemoveFilter}
-        labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? []}
+        labels={projectLabels ?? []}
        members={projectMembers?.map((m) => m.member)}
        states={projectStateStore.states?.[projectId?.toString() ?? ""]}
      />
--- a/web/components/issues/issue-layouts/filters/applied-filters/roots/module-root.tsx
+++ b/web/components/issues/issue-layouts/filters/applied-filters/roots/module-root.tsx
@ -13,7 +13,7 @@ export const ModuleAppliedFiltersRoot: React.FC = observer(() => {
  const { workspaceSlug, projectId, moduleId } = router.query;

  const {
-    project: projectStore,
+    projectLabel: { projectLabels },
    moduleFilter: moduleFilterStore,
    projectState: projectStateStore,
    projectMember: { projectMembers },
@ -73,7 +73,7 @@ export const ModuleAppliedFiltersRoot: React.FC = observer(() => {
        appliedFilters={appliedFilters}
        handleClearAllFilters={handleClearAllFilters}
        handleRemoveFilter={handleRemoveFilter}
-        labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? []}
+        labels={projectLabels ?? []}
        members={projectMembers?.map((m) => m.member)}
        states={projectStateStore.states?.[projectId?.toString() ?? ""]}
      />
--- a/web/components/issues/issue-layouts/filters/applied-filters/roots/project-root.tsx
+++ b/web/components/issues/issue-layouts/filters/applied-filters/roots/project-root.tsx
@ -14,7 +14,7 @@ export const ProjectAppliedFiltersRoot: React.FC = observer(() => {

  const {
    issueFilter: issueFilterStore,
-    project: projectStore,
+    projectLabel: { projectLabels },
    projectState: projectStateStore,
    projectMember: { projectMembers },
  } = useMobxStore();
@ -77,7 +77,7 @@ export const ProjectAppliedFiltersRoot: React.FC = observer(() => {
        appliedFilters={appliedFilters}
        handleClearAllFilters={handleClearAllFilters}
        handleRemoveFilter={handleRemoveFilter}
-        labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? []}
+        labels={projectLabels ?? []}
        members={projectMembers?.map((m) => m.member)}
        states={projectStateStore.states?.[projectId?.toString() ?? ""]}
      />
--- a/web/components/issues/issue-layouts/filters/applied-filters/roots/project-view-root.tsx
+++ b/web/components/issues/issue-layouts/filters/applied-filters/roots/project-view-root.tsx
@ -18,7 +18,7 @@ export const ProjectViewAppliedFiltersRoot: React.FC = observer(() => {
  const { workspaceSlug, projectId, viewId } = router.query;

  const {
-    project: projectStore,
+    projectLabel: { projectLabels },
    projectMember: { projectMembers },
    projectState: projectStateStore,
    projectViews: projectViewsStore,
@ -99,7 +99,7 @@ export const ProjectViewAppliedFiltersRoot: React.FC = observer(() => {
        appliedFilters={appliedFilters}
        handleClearAllFilters={handleClearAllFilters}
        handleRemoveFilter={handleRemoveFilter}
-        labels={projectStore.labels?.[projectId?.toString() ?? ""] ?? []}
+        labels={projectLabels ?? []}
        members={projectMembers?.map((m) => m.member)}
        states={projectStateStore.states?.[projectId?.toString() ?? ""]}
      />
--- a/web/components/issues/issue-layouts/filters/header/filters/filters-selection.tsx
+++ b/web/components/issues/issue-layouts/filters/header/filters/filters-selection.tsx
@ -15,7 +15,7 @@ import {
  FilterTargetDate,
 } from "components/issues";
 // types
-import { IIssueFilterOptions, IIssueLabels, IProject, IState, IUserLite } from "types";
+import { IIssueFilterOptions, IIssueLabel, IProject, IState, IUserLite } from "types";
 // constants
 import { ILayoutDisplayFiltersOptions } from "constants/issue";

@ -23,7 +23,7 @@ type Props = {
  filters: IIssueFilterOptions;
  handleFiltersUpdate: (key: keyof IIssueFilterOptions, value: string | string[]) => void;
  layoutDisplayFiltersOptions: ILayoutDisplayFiltersOptions | undefined;
-  labels?: IIssueLabels[] | undefined;
+  labels?: IIssueLabel[] | undefined;
  members?: IUserLite[] | undefined;
  projects?: IProject[] | undefined;
  states?: IState[] | undefined;
--- a/web/components/issues/issue-layouts/filters/header/filters/labels.tsx
+++ b/web/components/issues/issue-layouts/filters/header/filters/labels.tsx
@ -5,7 +5,7 @@ import { FilterHeader, FilterOption } from "components/issues";
 // ui
 import { Loader } from "@plane/ui";
 // types
-import { IIssueLabels } from "types";
+import { IIssueLabel } from "types";

 const LabelIcons = ({ color }: { color: string }) => (
  <span className="w-2.5 h-2.5 rounded-full" style={{ backgroundColor: color }} />
@ -14,7 +14,7 @@ const LabelIcons = ({ color }: { color: string }) => (
 type Props = {
  appliedFilters: string[] | null;
  handleUpdate: (val: string) => void;
-  labels: IIssueLabels[] | undefined;
+  labels: IIssueLabel[] | undefined;
  searchQuery: string;
 };

--- a/web/components/issues/issue-layouts/kanban/roots/cycle-root.tsx
+++ b/web/components/issues/issue-layouts/kanban/roots/cycle-root.tsx
@ -23,6 +23,7 @@ export const CycleKanBanLayout: React.FC = observer(() => {
  // store
  const {
    project: projectStore,
+    projectLabel: { projectLabels },
    projectMember: { projectMembers },
    projectState: projectStateStore,
    cycleIssue: cycleIssueStore,
@ -99,7 +100,6 @@ export const CycleKanBanLayout: React.FC = observer(() => {

  const states = projectStateStore?.projectStates || null;
  const priorities = ISSUE_PRIORITIES || null;
-  const labels = projectStore?.projectLabels || null;
  const stateGroups = ISSUE_STATE_GROUPS || null;
  const projects = workspaceSlug ? projectStore?.projects[workspaceSlug.toString()] || null : null;
  // const estimates =
@ -137,7 +137,7 @@ export const CycleKanBanLayout: React.FC = observer(() => {
                states={states}
                stateGroups={stateGroups}
                priorities={priorities}
-                labels={labels}
+                labels={projectLabels}
                members={projectMembers?.map((m) => m.member) ?? null}
                projects={projects}
                showEmptyGroup={userDisplayFilters?.show_empty_groups || true}
@ -164,7 +164,7 @@ export const CycleKanBanLayout: React.FC = observer(() => {
                states={states}
                stateGroups={stateGroups}
                priorities={priorities}
-                labels={labels}
+                labels={projectLabels}
                members={projectMembers?.map((m) => m.member) ?? null}
                projects={projects}
                showEmptyGroup={userDisplayFilters?.show_empty_groups || true}
--- a/web/components/issues/issue-layouts/kanban/roots/module-root.tsx
+++ b/web/components/issues/issue-layouts/kanban/roots/module-root.tsx
@ -21,7 +21,8 @@ export const ModuleKanBanLayout: React.FC = observer(() => {
  const { workspaceSlug, moduleId } = router.query;
  // store
  const {
-    project: projectStore,
+    project: { workspaceProjects },
+    projectLabel: { projectLabels },
    projectMember: { projectMembers },
    projectState: projectStateStore,
    moduleIssue: moduleIssueStore,
@ -97,9 +98,7 @@ export const ModuleKanBanLayout: React.FC = observer(() => {

  const states = projectStateStore?.projectStates || null;
  const priorities = ISSUE_PRIORITIES || null;
-  const labels = projectStore?.projectLabels || null;
  const stateGroups = ISSUE_STATE_GROUPS || null;
-  const projects = workspaceSlug ? projectStore?.projects[workspaceSlug.toString()] || null : null;
  // const estimates =
  //   currentProjectDetails?.estimate !== null
  //     ? projectStore.projectEstimates?.find((e) => e.id === currentProjectDetails?.estimate) || null
@ -135,9 +134,9 @@ export const ModuleKanBanLayout: React.FC = observer(() => {
                states={states}
                stateGroups={stateGroups}
                priorities={priorities}
-                labels={labels}
+                labels={projectLabels}
                members={projectMembers?.map((m) => m.member) ?? null}
-                projects={projects}
+                projects={workspaceProjects}
                showEmptyGroup={userDisplayFilters?.show_empty_groups || true}
                isDragStarted={isDragStarted}
              />
@ -162,9 +161,9 @@ export const ModuleKanBanLayout: React.FC = observer(() => {
                states={states}
                stateGroups={stateGroups}
                priorities={priorities}
-                labels={labels}
+                labels={projectLabels}
                members={projectMembers?.map((m) => m.member) ?? null}
-                projects={projects}
+                projects={workspaceProjects}
                showEmptyGroup={userDisplayFilters?.show_empty_groups || true}
                isDragStarted={isDragStarted}
              />
--- a/web/components/issues/issue-layouts/kanban/roots/project-root.tsx
+++ b/web/components/issues/issue-layouts/kanban/roots/project-root.tsx
@ -21,7 +21,8 @@ export const KanBanLayout: React.FC = observer(() => {
  const { workspaceSlug } = router.query as { workspaceSlug: string };

  const {
-    project: projectStore,
+    project: { workspaceProjects },
+    projectLabel: { projectLabels },
    projectMember: { projectMembers },
    projectState: projectStateStore,
    issue: issueStore,
@ -29,7 +30,6 @@ export const KanBanLayout: React.FC = observer(() => {
    issueKanBanView: issueKanBanViewStore,
    issueDetail: issueDetailStore,
  } = useMobxStore();
-  const { currentProjectDetails } = projectStore;

  const issues = issueStore?.getIssues;

@ -92,13 +92,11 @@ export const KanBanLayout: React.FC = observer(() => {

  const states = projectStateStore?.projectStates || null;
  const priorities = ISSUE_PRIORITIES || null;
-  const labels = projectStore?.projectLabels || null;
  const stateGroups = ISSUE_STATE_GROUPS || null;
-  const projects = workspaceSlug ? projectStore?.projects?.[workspaceSlug] || null : null;
-  const estimates =
-    currentProjectDetails?.estimate !== null
-      ? projectStore.projectEstimates?.find((e) => e.id === currentProjectDetails?.estimate) || null
-      : null;
+  // const estimates =
+  //   currentProjectDetails?.estimate !== null
+  //     ? projectStore.projectEstimates?.find((e) => e.id === currentProjectDetails?.estimate) || null
+  //     : null;

  return (
    <>
@ -129,9 +127,9 @@ export const KanBanLayout: React.FC = observer(() => {
                states={states}
                stateGroups={stateGroups}
                priorities={priorities}
-                labels={labels}
+                labels={projectLabels}
                members={projectMembers?.map((m) => m.member) ?? null}
-                projects={projects}
+                projects={workspaceProjects}
                enableQuickIssueCreate
                showEmptyGroup={userDisplayFilters?.show_empty_groups || true}
                isDragStarted={isDragStarted}
@ -156,9 +154,9 @@ export const KanBanLayout: React.FC = observer(() => {
                states={states}
                stateGroups={stateGroups}
                priorities={priorities}
-                labels={labels}
+                labels={projectLabels}
                members={projectMembers?.map((m) => m.member) ?? null}
-                projects={projects}
+                projects={workspaceProjects}
                showEmptyGroup={userDisplayFilters?.show_empty_groups || true}
                isDragStarted={isDragStarted}
              />
--- a/web/components/issues/issue-layouts/kanban/roots/project-view-root.tsx
+++ b/web/components/issues/issue-layouts/kanban/roots/project-view-root.tsx
@ -56,7 +56,7 @@ export const ProjectViewKanBanLayout: React.FC = observer(() => {

  const states = projectStateStore?.projectStates || null;
  const priorities = ISSUE_PRIORITIES || null;
-  const labels = projectStore?.projectLabels || null;
+  // const labels = projectStore?.projectLabels || null;
  const stateGroups = ISSUE_STATE_GROUPS || null;
  const projects = projectStateStore?.projectStates || null;
  const estimates = null;
--- a/web/components/issues/issue-layouts/kanban/swimlanes.tsx
+++ b/web/components/issues/issue-layouts/kanban/swimlanes.tsx
@ -5,7 +5,7 @@ import { KanBanGroupByHeaderRoot } from "./headers/group-by-root";
 import { KanBanSubGroupByHeaderRoot } from "./headers/sub-group-by-root";
 import { KanBan } from "./default";
 // types
-import { IIssue, IIssueDisplayProperties, IIssueLabels, IProject, IState, IUserLite } from "types";
+import { IIssue, IIssueDisplayProperties, IIssueLabel, IProject, IState, IUserLite } from "types";
 // constants
 import { getValueFromObject } from "constants/issue";

@ -63,7 +63,7 @@ interface ISubGroupSwimlane extends ISubGroupSwimlaneHeader {
  states: IState[] | null;
  stateGroups: any;
  priorities: any;
-  labels: IIssueLabels[] | null;
+  labels: IIssueLabel[] | null;
  members: IUserLite[] | null;
  projects: IProject[] | null;
  issues: any;
@ -181,7 +181,7 @@ export interface IKanBanSwimLanes {
  states: IState[] | null;
  stateGroups: any;
  priorities: any;
-  labels: IIssueLabels[] | null;
+  labels: IIssueLabel[] | null;
  members: IUserLite[] | null;
  projects: IProject[] | null;
  isDragStarted?: boolean;
--- a/web/components/issues/issue-layouts/list/default.tsx
+++ b/web/components/issues/issue-layouts/list/default.tsx
@ -4,7 +4,7 @@ import { observer } from "mobx-react-lite";
 import { ListGroupByHeaderRoot } from "./headers/group-by-root";
 import { IssueBlocksList, ListInlineCreateIssueForm } from "components/issues";
 // types
-import { IEstimatePoint, IIssue, IIssueDisplayProperties, IIssueLabels, IProject, IState, IUserLite } from "types";
+import { IEstimatePoint, IIssue, IIssueDisplayProperties, IIssueLabel, IProject, IState, IUserLite } from "types";
 // constants
 import { getValueFromObject } from "constants/issue";

@ -88,7 +88,7 @@ export interface IList {
  quickActions: (group_by: string | null, issue: IIssue) => React.ReactNode;
  displayProperties: IIssueDisplayProperties;
  states: IState[] | null;
-  labels: IIssueLabels[] | null;
+  labels: IIssueLabel[] | null;
  members: IUserLite[] | null;
  projects: IProject[] | null;
  stateGroups: any;
--- a/web/components/issues/issue-layouts/list/roots/archived-issue-root.tsx
+++ b/web/components/issues/issue-layouts/list/roots/archived-issue-root.tsx
@ -19,6 +19,7 @@ export const ArchivedIssueListLayout: FC = observer(() => {

  const {
    project: projectStore,
+    projectLabel: { projectLabels },
    projectMember: { projectMembers },
    projectState: projectStateStore,
    archivedIssues: archivedIssueStore,
@ -42,7 +43,6 @@ export const ArchivedIssueListLayout: FC = observer(() => {

  const states = projectStateStore?.projectStates || null;
  const priorities = ISSUE_PRIORITIES || null;
-  const labels = projectStore?.projectLabels || null;
  const stateGroups = ISSUE_STATE_GROUPS || null;
  const projects = workspaceSlug ? projectStore?.projects[workspaceSlug.toString()] || null : null;
  const estimates =
@ -64,7 +64,7 @@ export const ArchivedIssueListLayout: FC = observer(() => {
        states={states}
        stateGroups={stateGroups}
        priorities={priorities}
-        labels={labels}
+        labels={projectLabels}
        members={projectMembers?.map((m) => m.member) ?? null}
        projects={projects}
        estimates={estimates?.points ? orderArrayBy(estimates.points, "key") : null}
--- a/web/components/issues/issue-layouts/list/roots/cycle-root.tsx
+++ b/web/components/issues/issue-layouts/list/roots/cycle-root.tsx
@ -21,6 +21,7 @@ export const CycleListLayout: React.FC = observer(() => {
  // store
  const {
    project: projectStore,
+    projectLabel: { projectLabels },
    projectMember: { projectMembers },
    projectState: projectStateStore,
    issueFilter: issueFilterStore,
@ -59,7 +60,6 @@ export const CycleListLayout: React.FC = observer(() => {

  const states = projectStateStore?.projectStates || null;
  const priorities = ISSUE_PRIORITIES || null;
-  const labels = projectStore?.projectLabels || null;
  const stateGroups = ISSUE_STATE_GROUPS || null;
  const projects = workspaceSlug ? projectStore?.projects[workspaceSlug.toString()] || null : null;
  const estimates =
@ -85,7 +85,7 @@ export const CycleListLayout: React.FC = observer(() => {
        states={states}
        stateGroups={stateGroups}
        priorities={priorities}
-        labels={labels}
+        labels={projectLabels}
        members={projectMembers?.map((m) => m.member) ?? null}
        projects={projects}
        estimates={estimates?.points ? orderArrayBy(estimates.points, "key") : null}
--- a/web/components/issues/issue-layouts/list/roots/module-root.tsx
+++ b/web/components/issues/issue-layouts/list/roots/module-root.tsx
@ -21,6 +21,7 @@ export const ModuleListLayout: React.FC = observer(() => {

  const {
    project: projectStore,
+    projectLabel: { projectLabels },
    projectMember: { projectMembers },
    projectState: projectStateStore,
    issueFilter: issueFilterStore,
@ -59,7 +60,6 @@ export const ModuleListLayout: React.FC = observer(() => {

  const states = projectStateStore?.projectStates || null;
  const priorities = ISSUE_PRIORITIES || null;
-  const labels = projectStore?.projectLabels || null;
  const stateGroups = ISSUE_STATE_GROUPS || null;
  const projects = workspaceSlug ? projectStore?.projects[workspaceSlug.toString()] || null : null;
  const estimates =
@ -85,7 +85,7 @@ export const ModuleListLayout: React.FC = observer(() => {
        states={states}
        stateGroups={stateGroups}
        priorities={priorities}
-        labels={labels}
+        labels={projectLabels}
        members={projectMembers?.map((m) => m.member) ?? null}
        projects={projects}
        estimates={estimates?.points ? orderArrayBy(estimates.points, "key") : null}
--- a/web/components/issues/issue-layouts/list/roots/project-root.tsx
+++ b/web/components/issues/issue-layouts/list/roots/project-root.tsx
@ -20,6 +20,7 @@ export const ListLayout: FC = observer(() => {
  // store
  const {
    project: projectStore,
+    projectLabel: { projectLabels },
    projectMember: { projectMembers },
    projectState: projectStateStore,
    issue: issueStore,
@ -49,7 +50,6 @@ export const ListLayout: FC = observer(() => {

  const states = projectStateStore?.projectStates || null;
  const priorities = ISSUE_PRIORITIES || null;
-  const labels = projectStore?.projectLabels || null;
  const stateGroups = ISSUE_STATE_GROUPS || null;
  const projects = workspaceSlug ? projectStore?.projects[workspaceSlug.toString()] || null : null;
  const estimates =
@ -80,7 +80,7 @@ export const ListLayout: FC = observer(() => {
            states={states}
            stateGroups={stateGroups}
            priorities={priorities}
-            labels={labels}
+            labels={projectLabels}
            members={projectMembers?.map((m) => m.member) ?? null}
            projects={projects}
            enableQuickIssueCreate
--- a/web/components/issues/issue-layouts/list/roots/project-view-root.tsx
+++ b/web/components/issues/issue-layouts/list/roots/project-view-root.tsx
@ -30,7 +30,7 @@ export const ProjectViewListLayout: React.FC = observer(() => {

  const states = projectStateStore?.projectStates || null;
  const priorities = ISSUE_PRIORITIES || null;
-  const labels = projectStore?.projectLabels || null;
+  // const labels = projectStore?.projectLabels || null;
  const stateGroups = ISSUE_STATE_GROUPS || null;
  const projects = projectStateStore?.projectStates || null;
  const estimates = null;
--- a/web/components/issues/issue-layouts/properties/labels.tsx
+++ b/web/components/issues/issue-layouts/properties/labels.tsx
@ -1,8 +1,6 @@
 import { Fragment, useState } from "react";
-
 import { observer } from "mobx-react-lite";
 import { useMobxStore } from "lib/mobx/store-provider";
-
 // hooks
 import { usePopper } from "react-popper";
 // components
@ -44,7 +42,10 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
    noLabelBorder = false,
  } = props;

-  const { workspace: workspaceStore, project: projectStore }: RootStore = useMobxStore();
+  const {
+    workspace: workspaceStore,
+    projectLabel: { fetchProjectLabels, projectLabels },
+  }: RootStore = useMobxStore();
  const workspaceSlug = workspaceStore?.workspaceSlug;

  const [query, setQuery] = useState("");
@ -53,12 +54,9 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
  const [isLoading, setIsLoading] = useState<Boolean>(false);

-  const projectLabels = projectId && projectStore?.labels?.[projectId];
-
-  const fetchProjectLabels = () => {
+  const fetchLabels = () => {
    setIsLoading(true);
-    if (workspaceSlug && projectId)
-      projectStore.fetchProjectLabels(workspaceSlug, projectId).then(() => setIsLoading(false));
+    if (workspaceSlug && projectId) fetchProjectLabels(workspaceSlug, projectId).then(() => setIsLoading(false));
  };

  const options = (projectLabels ? projectLabels : []).map((label) => ({
@ -169,7 +167,7 @@ export const IssuePropertyLabels: React.FC<IIssuePropertyLabels> = observer((pro
              ? "cursor-pointer"
              : "cursor-pointer hover:bg-custom-background-80"
          }  ${buttonClassName}`}
-          onClick={() => !projectLabels && fetchProjectLabels()}
+          onClick={() => !projectLabels && fetchLabels()}
        >
          {label}
          {!hideDropdownArrow && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
--- a/web/components/issues/issue-layouts/spreadsheet/columns/columns-list.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/columns-list.tsx
@ -2,7 +2,7 @@ import { observer } from "mobx-react-lite";
 // components
 import { SpreadsheetColumn } from "components/issues";
 // types
-import { IIssue, IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueLabels, IState, IUserLite } from "types";
+import { IIssue, IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueLabel, IState, IUserLite } from "types";

 type Props = {
  displayFilters: IIssueDisplayFilterOptions;
@ -13,7 +13,7 @@ type Props = {
  handleUpdateIssue: (issue: IIssue, data: Partial<IIssue>) => void;
  issues: IIssue[] | undefined;
  members?: IUserLite[] | undefined;
-  labels?: IIssueLabels[] | undefined;
+  labels?: IIssueLabel[] | undefined;
  states?: IState[] | undefined;
 };

--- a/web/components/issues/issue-layouts/spreadsheet/columns/label-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/columns/label-column.tsx
@ -5,12 +5,12 @@ import { IssuePropertyLabels } from "../../properties";
 // hooks
 import useSubIssue from "hooks/use-sub-issue";
 // types
-import { IIssue, IIssueLabels } from "types";
+import { IIssue, IIssueLabel } from "types";

 type Props = {
  issue: IIssue;
  onChange: (formData: Partial<IIssue>) => void;
-  labels: IIssueLabels[] | undefined;
+  labels: IIssueLabel[] | undefined;
  expandedIssues: string[];
  disabled: boolean;
 };
--- a/web/components/issues/issue-layouts/spreadsheet/roots/cycle-root.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/roots/cycle-root.tsx
@ -1,7 +1,6 @@
 import React, { useCallback } from "react";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
-
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
@ -19,7 +18,7 @@ export const CycleSpreadsheetLayout: React.FC = observer(() => {
    issueFilter: issueFilterStore,
    cycleIssue: cycleIssueStore,
    issueDetail: issueDetailStore,
-    project: projectStore,
+    projectLabel: { projectLabels },
    projectMember: { projectMembers },
    projectState: projectStateStore,
  } = useMobxStore();
@ -61,7 +60,7 @@ export const CycleSpreadsheetLayout: React.FC = observer(() => {
      handleDisplayFilterUpdate={handleDisplayFiltersUpdate}
      issues={issues as IIssueUnGroupedStructure}
      members={projectMembers?.map((m) => m.member)}
-      labels={projectId ? projectStore.labels?.[projectId.toString()] ?? undefined : undefined}
+      labels={projectLabels || undefined}
      states={projectId ? projectStateStore.states?.[projectId.toString()] : undefined}
      handleIssueAction={() => {}}
      handleUpdateIssue={handleUpdateIssue}
--- a/web/components/issues/issue-layouts/spreadsheet/roots/module-root.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/roots/module-root.tsx
@ -19,7 +19,7 @@ export const ModuleSpreadsheetLayout: React.FC = observer(() => {
    issueFilter: issueFilterStore,
    moduleIssue: moduleIssueStore,
    issueDetail: issueDetailStore,
-    project: projectStore,
+    projectLabel: { projectLabels },
    projectMember: { projectMembers },
    projectState: projectStateStore,
  } = useMobxStore();
@ -61,7 +61,7 @@ export const ModuleSpreadsheetLayout: React.FC = observer(() => {
      handleDisplayFilterUpdate={handleDisplayFiltersUpdate}
      issues={issues as IIssueUnGroupedStructure}
      members={projectMembers?.map((m) => m.member)}
-      labels={projectId ? projectStore.labels?.[projectId.toString()] ?? undefined : undefined}
+      labels={projectLabels ?? undefined}
      states={projectId ? projectStateStore.states?.[projectId.toString()] : undefined}
      handleIssueAction={() => {}}
      handleUpdateIssue={handleUpdateIssue}
--- a/web/components/issues/issue-layouts/spreadsheet/roots/project-root.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/roots/project-root.tsx
@ -19,7 +19,7 @@ export const ProjectSpreadsheetLayout: React.FC = observer(() => {
    issue: issueStore,
    issueFilter: issueFilterStore,
    issueDetail: issueDetailStore,
-    project: projectStore,
+    projectLabel: { projectLabels },
    projectMember: { projectMembers },
    projectState: projectStateStore,
    user: userStore,
@ -63,7 +63,7 @@ export const ProjectSpreadsheetLayout: React.FC = observer(() => {
      handleDisplayFilterUpdate={handleDisplayFiltersUpdate}
      issues={issues as IIssueUnGroupedStructure}
      members={projectMembers?.map((m) => m.member)}
-      labels={projectId ? projectStore.labels?.[projectId.toString()] ?? undefined : undefined}
+      labels={projectLabels || undefined}
      states={projectId ? projectStateStore.states?.[projectId.toString()] : undefined}
      handleIssueAction={() => {}}
      handleUpdateIssue={handleUpdateIssue}
--- a/web/components/issues/issue-layouts/spreadsheet/roots/project-view-root.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/roots/project-view-root.tsx
@ -1,7 +1,6 @@
 import React, { useCallback } from "react";
 import { useRouter } from "next/router";
 import { observer } from "mobx-react-lite";
-
 // mobx store
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
@ -19,7 +18,7 @@ export const ProjectViewSpreadsheetLayout: React.FC = observer(() => {
    issueFilter: issueFilterStore,
    projectViewIssues: projectViewIssueStore,
    issueDetail: issueDetailStore,
-    project: projectStore,
+    projectLabel: { projectLabels },
    projectMember: { projectMembers },
    projectState: projectStateStore,
  } = useMobxStore();
@ -61,7 +60,7 @@ export const ProjectViewSpreadsheetLayout: React.FC = observer(() => {
      handleDisplayFilterUpdate={handleDisplayFiltersUpdate}
      issues={issues as IIssueUnGroupedStructure}
      members={projectMembers?.map((m) => m.member)}
-      labels={projectId ? projectStore.labels?.[projectId.toString()] ?? undefined : undefined}
+      labels={projectLabels || undefined}
      states={projectId ? projectStateStore.states?.[projectId.toString()] : undefined}
      handleIssueAction={() => {}}
      handleUpdateIssue={handleUpdateIssue}
--- a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-column.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-column.tsx
@ -27,7 +27,7 @@ import {
 // ui
 import { CustomMenu } from "@plane/ui";
 // types
-import { IIssue, IIssueDisplayFilterOptions, IIssueLabels, IState, IUserLite, TIssueOrderByOptions } from "types";
+import { IIssue, IIssueDisplayFilterOptions, IIssueLabel, IState, IUserLite, TIssueOrderByOptions } from "types";
 // constants
 import { SPREADSHEET_PROPERTY_DETAILS } from "constants/spreadsheet";

@ -40,7 +40,7 @@ type Props = {
  issues: IIssue[] | undefined;
  property: string;
  members?: IUserLite[] | undefined;
-  labels?: IIssueLabels[] | undefined;
+  labels?: IIssueLabel[] | undefined;
  states?: IState[] | undefined;
 };

--- a/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
+++ b/web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
@ -6,7 +6,7 @@ import { SpreadsheetColumnsList, SpreadsheetIssuesColumn, SpreadsheetInlineCreat
 import { IssuePeekOverview } from "components/issues/issue-peek-overview";
 import { Spinner } from "@plane/ui";
 // types
-import { IIssue, IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueLabels, IState, IUserLite } from "types";
+import { IIssue, IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueLabel, IState, IUserLite } from "types";

 type Props = {
  displayProperties: IIssueDisplayProperties;
@ -14,7 +14,7 @@ type Props = {
  handleDisplayFilterUpdate: (data: Partial<IIssueDisplayFilterOptions>) => void;
  issues: IIssue[] | undefined;
  members?: IUserLite[] | undefined;
-  labels?: IIssueLabels[] | undefined;
+  labels?: IIssueLabel[] | undefined;
  states?: IState[] | undefined;
  handleIssueAction: (issue: IIssue, action: "copy" | "delete" | "edit") => void;
  handleUpdateIssue: (issue: IIssue, data: Partial<IIssue>) => void;
--- a/web/components/issues/issue-peek-overview/issue-detail.tsx
+++ b/web/components/issues/issue-peek-overview/issue-detail.tsx
@ -140,6 +140,7 @@ export const PeekOverviewIssueDetails: FC<IPeekOverviewIssueDetails> = (props) =
      </div>
      <span>{errors.name ? errors.name.message : null}</span>
      <RichTextEditor
+        dragDropEnabled={true}
        cancelUploadImage={fileService.cancelUpload}
        uploadFile={fileService.getUploadFileFunction(workspaceSlug)}
        deleteFile={fileService.deleteImage}
--- a/web/components/issues/select/label.tsx
+++ b/web/components/issues/select/label.tsx
@ -29,7 +29,7 @@ export const IssueLabelSelect: React.FC<Props> = observer((props) => {
  const { workspaceSlug } = router.query;

  const {
-    project: { labels, fetchProjectLabels },
+    projectLabel: { labels, fetchProjectLabels },
  } = useMobxStore();

  const [referenceElement, setReferenceElement] = useState<HTMLDivElement | null>(null);
--- a/web/components/issues/sidebar-select/label.tsx
+++ b/web/components/issues/sidebar-select/label.tsx
@ -15,7 +15,7 @@ import { IssueLabelSelect } from "../select";
 // icons
 import { Plus, X } from "lucide-react";
 // types
-import { IIssue, IIssueLabels } from "types";
+import { IIssue, IIssueLabel } from "types";
 // fetch-keys
 import { PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
 import useToast from "hooks/use-toast";
@ -28,7 +28,7 @@ type Props = {
  uneditable: boolean;
 };

-const defaultValues: Partial<IIssueLabels> = {
+const defaultValues: Partial<IIssueLabel> = {
  name: "",
  color: "#ff0000",
 };
@ -57,20 +57,20 @@ export const SidebarLabelSelect: React.FC<Props> = ({
    watch,
    control,
    setFocus,
-  } = useForm<Partial<IIssueLabels>>({
+  } = useForm<Partial<IIssueLabel>>({
    defaultValues,
  });

  const { user } = useUser();

-  const { data: issueLabels, mutate: issueLabelMutate } = useSWR<IIssueLabels[]>(
+  const { data: issueLabels, mutate: issueLabelMutate } = useSWR<IIssueLabel[]>(
    workspaceSlug && projectId ? PROJECT_ISSUE_LABELS(projectId as string) : null,
    workspaceSlug && projectId
      ? () => issueLabelService.getProjectIssueLabels(workspaceSlug as string, projectId as string)
      : null
  );

-  const handleNewLabel = async (formData: Partial<IIssueLabels>) => {
+  const handleNewLabel = async (formData: Partial<IIssueLabel>) => {
    if (!workspaceSlug || !projectId || isSubmitting) return;

    await issueLabelService
--- a/web/components/labels/create-label-modal.tsx
+++ b/web/components/labels/create-label-modal.tsx
@ -12,7 +12,7 @@ import { Button, Input } from "@plane/ui";
 // icons
 import { ChevronDown } from "lucide-react";
 // types
-import type { IIssueLabels, IState } from "types";
+import type { IIssueLabel, IState } from "types";
 // constants
 import { LABEL_COLOR_OPTIONS, getRandomLabelColor } from "constants/label";
 import useToast from "hooks/use-toast";
@ -22,7 +22,7 @@ type Props = {
  isOpen: boolean;
  projectId: string;
  handleClose: () => void;
-  onSuccess?: (response: IIssueLabels) => void;
+  onSuccess?: (response: IIssueLabel) => void;
 };

 const defaultValues: Partial<IState> = {
@ -47,7 +47,7 @@ export const CreateLabelModal: React.FC<Props> = observer((props) => {
    reset,
    setValue,
    setFocus,
-  } = useForm<IIssueLabels>({
+  } = useForm<IIssueLabel>({
    defaultValues,
  });

@ -69,7 +69,7 @@ export const CreateLabelModal: React.FC<Props> = observer((props) => {

  const { setToastAlert } = useToast();

-  const onSubmit = async (formData: IIssueLabels) => {
+  const onSubmit = async (formData: IIssueLabel) => {
    if (!workspaceSlug) return;

    await projectLabelStore
--- a/web/components/labels/create-update-label-inline.tsx
+++ b/web/components/labels/create-update-label-inline.tsx
@ -11,7 +11,7 @@ import { Popover, Transition } from "@headlessui/react";
 // ui
 import { Button, Input } from "@plane/ui";
 // types
-import { IIssueLabels } from "types";
+import { IIssueLabel } from "types";
 // fetch-keys
 import { getRandomLabelColor, LABEL_COLOR_OPTIONS } from "constants/label";
 import useToast from "hooks/use-toast";
@ -20,11 +20,11 @@ type Props = {
  labelForm: boolean;
  setLabelForm: React.Dispatch<React.SetStateAction<boolean>>;
  isUpdating: boolean;
-  labelToUpdate: IIssueLabels | null;
+  labelToUpdate?: IIssueLabel;
  onClose?: () => void;
 };

-const defaultValues: Partial<IIssueLabels> = {
+const defaultValues: Partial<IIssueLabel> = {
  name: "",
  color: "rgb(var(--color-text-200))",
 };
@ -50,7 +50,7 @@ export const CreateUpdateLabelInline = observer(
      watch,
      setValue,
      setFocus,
-    } = useForm<IIssueLabels>({
+    } = useForm<IIssueLabel>({
      defaultValues,
    });

@ -60,7 +60,7 @@ export const CreateUpdateLabelInline = observer(
      if (onClose) onClose();
    };

-    const handleLabelCreate: SubmitHandler<IIssueLabels> = async (formData) => {
+    const handleLabelCreate: SubmitHandler<IIssueLabel> = async (formData) => {
      if (!workspaceSlug || !projectId || isSubmitting) return;

      await projectLabelStore
@ -79,7 +79,7 @@ export const CreateUpdateLabelInline = observer(
        });
    };

-    const handleLabelUpdate: SubmitHandler<IIssueLabels> = async (formData) => {
+    const handleLabelUpdate: SubmitHandler<IIssueLabel> = async (formData) => {
      if (!workspaceSlug || !projectId || isSubmitting) return;

      await projectLabelStore
@ -128,9 +128,7 @@ export const CreateUpdateLabelInline = observer(
          e.preventDefault();
          handleSubmit(isUpdating ? handleLabelUpdate : handleLabelCreate)();
        }}
-        className={`flex scroll-m-8 items-center gap-2 rounded border border-custom-border-200 bg-custom-background-100 px-3.5 py-2 ${
-          labelForm ? "" : "hidden"
-        }`}
+        className={`flex scroll-m-8 items-center gap-2 bg-custom-background-100 w-full ${labelForm ? "" : "hidden"}`}
      >
        <div className="flex-shrink-0">
          <Popover className="relative z-10 flex h-full w-full items-center justify-center">
@ -198,10 +196,10 @@ export const CreateUpdateLabelInline = observer(
            )}
          />
        </div>
-        <Button variant="neutral-primary" onClick={() => handleClose()}>
+        <Button variant="neutral-primary" onClick={() => handleClose()} size="sm">
          Cancel
        </Button>
-        <Button variant="primary" type="submit" loading={isSubmitting}>
+        <Button variant="primary" type="submit" size="sm" loading={isSubmitting}>
          {isUpdating ? (isSubmitting ? "Updating" : "Update") : isSubmitting ? "Adding" : "Add"}
        </Button>
      </form>
--- a/web/components/labels/delete-label-modal.tsx
+++ b/web/components/labels/delete-label-modal.tsx
@ -12,12 +12,12 @@ import useToast from "hooks/use-toast";
 // ui
 import { Button } from "@plane/ui";
 // types
-import type { IIssueLabels } from "types";
+import type { IIssueLabel } from "types";

 type Props = {
  isOpen: boolean;
  onClose: () => void;
-  data: IIssueLabels | null;
+  data: IIssueLabel | null;
 };

 export const DeleteLabelModal: React.FC<Props> = observer((props) => {
--- a/web/components/labels/index.ts
+++ b/web/components/labels/index.ts
@ -4,5 +4,5 @@ export * from "./delete-label-modal";
 export * from "./label-select";
 export * from "./labels-list-modal";
 export * from "./project-setting-label-group";
-export * from "./project-setting-label-list-item";
+export * from "./project-setting-label-item";
 export * from "./project-setting-label-list";
--- a/web/components/labels/label-block/drag-handle.tsx
+++ b/web/components/labels/label-block/drag-handle.tsx
@ -0,0 +1,24 @@
+import { DraggableProvidedDragHandleProps } from "@hello-pangea/dnd";
+import { MoreVertical } from "lucide-react";
+
+interface IDragHandle {
+  isDragging: boolean;
+  dragHandleProps: DraggableProvidedDragHandleProps;
+}
+
+export const DragHandle = (props: IDragHandle) => {
+  const { isDragging, dragHandleProps } = props;
+
+  return (
+    <button
+      type="button"
+      className={`rounded text-custom-sidebar-text-200 flex flex-shrink-0 mr-1 group-hover:opacity-100 ${
+        isDragging ? "opacity-100" : "opacity-0"
+      }`}
+      {...dragHandleProps}
+    >
+      <MoreVertical className="h-3.5 w-3.5 stroke-custom-text-400" />
+      <MoreVertical className="h-3.5 w-3.5 stroke-custom-text-400 -ml-5" />
+    </button>
+  );
+};
--- a/web/components/labels/label-block/label-item-block.tsx
+++ b/web/components/labels/label-block/label-item-block.tsx
@ -0,0 +1,80 @@
+import { useRef, useState } from "react";
+import { LucideIcon, X } from "lucide-react";
+import { DraggableProvidedDragHandleProps } from "@hello-pangea/dnd";
+//ui
+import { CustomMenu } from "@plane/ui";
+//types
+import { IIssueLabel } from "types";
+//hooks
+import useOutsideClickDetector from "hooks/use-outside-click-detector";
+//components
+import { DragHandle } from "./drag-handle";
+import { LabelName } from "./label-name";
+
+//types
+export interface ICustomMenuItem {
+  CustomIcon: LucideIcon;
+  onClick: (label: IIssueLabel) => void;
+  isVisible: boolean;
+  text: string;
+}
+
+interface ILabelItemBlock {
+  label: IIssueLabel;
+  isDragging: boolean;
+  customMenuItems: ICustomMenuItem[];
+  dragHandleProps: DraggableProvidedDragHandleProps;
+  handleLabelDelete: (label: IIssueLabel) => void;
+  isLabelGroup?: boolean;
+}
+
+export const LabelItemBlock = (props: ILabelItemBlock) => {
+  const { label, isDragging, customMenuItems, dragHandleProps, handleLabelDelete, isLabelGroup } = props;
+
+  //state
+  const [isMenuActive, setIsMenuActive] = useState(false);
+
+  //refs
+  const actionSectionRef = useRef<HTMLDivElement | null>(null);
+
+  useOutsideClickDetector(actionSectionRef, () => setIsMenuActive(false));
+
+  return (
+    <div className="flex items-center group">
+      <div className="flex items-center">
+        <DragHandle isDragging={isDragging} dragHandleProps={dragHandleProps} />
+        <LabelName color={label.color} name={label.name} isGroup={isLabelGroup ?? false} />
+      </div>
+
+      <div
+        ref={actionSectionRef}
+        className={`absolute right-3 flex items-start gap-3.5 px-4 ${
+          isMenuActive || isLabelGroup
+            ? "opacity-100"
+            : "opacity-0 group-hover:pointer-events-auto group-hover:opacity-100"
+        } ${isLabelGroup && "-top-0.5"}`}
+      >
+        <CustomMenu ellipsis buttonClassName="h-4 w-4 leading-4 text-custom-sidebar-text-400">
+          {customMenuItems.map(
+            ({ isVisible, onClick, CustomIcon, text }) =>
+              isVisible && (
+                <CustomMenu.MenuItem onClick={() => onClick(label)}>
+                  <span className="flex items-center justify-start gap-2">
+                    <CustomIcon className="h-4 w-4" />
+                    <span>{text}</span>
+                  </span>
+                </CustomMenu.MenuItem>
+              )
+          )}
+        </CustomMenu>
+        {!isLabelGroup && (
+          <div className="py-0.5">
+            <button className="flex h-4 w-4 items-center justify-start gap-2" onClick={() => handleLabelDelete(label)}>
+              <X className="h-4 w-4  text-custom-sidebar-text-400 flex-shrink-0" />
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
--- a/web/components/labels/label-block/label-name.tsx
+++ b/web/components/labels/label-block/label-name.tsx
@ -0,0 +1,27 @@
+import { Component } from "lucide-react";
+
+interface ILabelName {
+  name: string;
+  color: string;
+  isGroup: boolean;
+}
+
+export const LabelName = (props: ILabelName) => {
+  const { name, color, isGroup } = props;
+
+  return (
+    <div className="flex items-center gap-3">
+      {isGroup ? (
+        <Component className="h-3.5 w-3.5" color={color} />
+      ) : (
+        <span
+          className="h-3.5 w-3.5 flex-shrink-0 rounded-full"
+          style={{
+            backgroundColor: color && color !== "" ? color : "#000",
+          }}
+        />
+      )}
+      <h6 className="text-sm">{name}</h6>
+    </div>
+  );
+};
--- a/web/components/labels/label-select.tsx
+++ b/web/components/labels/label-select.tsx
@ -6,12 +6,12 @@ import { Check, ChevronDown, Search } from "lucide-react";
 // ui
 import { Tooltip } from "@plane/ui";
 // types
-import { IIssueLabels } from "types";
+import { IIssueLabel } from "types";

 type Props = {
  value: string[];
  onChange: (data: string[]) => void;
-  labels: IIssueLabels[] | undefined;
+  labels: IIssueLabel[] | undefined;
  className?: string;
  buttonClassName?: string;
  optionsClassName?: string;
--- a/web/components/labels/labels-list-modal.tsx
+++ b/web/components/labels/labels-list-modal.tsx
@ -11,12 +11,12 @@ import { useMobxStore } from "lib/mobx/store-provider";
 import { LayerStackIcon } from "@plane/ui";
 import { Search } from "lucide-react";
 // types
-import { IIssueLabels } from "types";
+import { IIssueLabel } from "types";

 type Props = {
  isOpen: boolean;
  handleClose: () => void;
-  parent: IIssueLabels | undefined;
+  parent: IIssueLabel | undefined;
 };

 export const LabelsListModal: React.FC<Props> = observer((props) => {
@ -27,7 +27,9 @@ export const LabelsListModal: React.FC<Props> = observer((props) => {
  const { workspaceSlug, projectId } = router.query;

  // store
-  const { projectLabel: projectLabelStore, project: projectStore } = useMobxStore();
+  const {
+    projectLabel: { projectLabels, fetchProjectLabels, updateLabel },
+  } = useMobxStore();

  // states
  const [query, setQuery] = useState("");
@ -35,28 +37,24 @@ export const LabelsListModal: React.FC<Props> = observer((props) => {
  // api call to fetch project details
  useSWR(
    workspaceSlug && projectId ? "PROJECT_LABELS" : null,
-    workspaceSlug && projectId
-      ? () => projectStore.fetchProjectLabels(workspaceSlug.toString(), projectId.toString())
-      : null
+    workspaceSlug && projectId ? () => fetchProjectLabels(workspaceSlug.toString(), projectId.toString()) : null
  );

  // derived values
-  const issueLabels = projectStore.labels?.[projectId?.toString()!] ?? null;
-
-  const filteredLabels: IIssueLabels[] =
+  const filteredLabels: IIssueLabel[] =
    query === ""
-      ? issueLabels ?? []
-      : issueLabels?.filter((l) => l.name.toLowerCase().includes(query.toLowerCase())) ?? [];
+      ? projectLabels ?? []
+      : projectLabels?.filter((l) => l.name.toLowerCase().includes(query.toLowerCase())) ?? [];

  const handleModalClose = () => {
    handleClose();
    setQuery("");
  };

-  const addChildLabel = async (label: IIssueLabels) => {
+  const addChildLabel = async (label: IIssueLabel) => {
    if (!workspaceSlug || !projectId) return;

-    await projectLabelStore.updateLabel(workspaceSlug.toString(), projectId.toString(), label.id, {
+    await updateLabel(workspaceSlug.toString(), projectId.toString(), label.id, {
      parent: parent?.id!,
    });
  };
@ -108,7 +106,7 @@ export const LabelsListModal: React.FC<Props> = observer((props) => {
                      )}
                      <ul className="text-sm text-gray-700">
                        {filteredLabels.map((label) => {
-                          const children = issueLabels?.filter((l) => l.parent === label.id);
+                          const children = projectLabels?.filter((l) => l.parent === label.id);

                          if (
                            (label.parent === "" || label.parent === null) && // issue does not have any other parent
@ -128,7 +126,6 @@ export const LabelsListModal: React.FC<Props> = observer((props) => {
                                }
                                onClick={() => {
                                  addChildLabel(label);
-                                  handleClose();
                                }}
                              >
                                <span
--- a/web/components/labels/project-setting-label-group.tsx
+++ b/web/components/labels/project-setting-label-group.tsx
@ -1,77 +1,115 @@
-import React from "react";
-import { useRouter } from "next/router";
+import React, { Dispatch, SetStateAction, useState } from "react";
 import { Disclosure, Transition } from "@headlessui/react";

 // store
 import { observer } from "mobx-react-lite";
-import { useMobxStore } from "lib/mobx/store-provider";
-// ui
-import { CustomMenu } from "@plane/ui";
 // icons
-import { ChevronDown, Component, Pencil, Plus, Trash2, X } from "lucide-react";
+import { ChevronDown, Pencil, Trash2 } from "lucide-react";
 // types
-import { IIssueLabels } from "types";
+import { IIssueLabel } from "types";
+import {
+  Draggable,
+  DraggableProvided,
+  DraggableProvidedDragHandleProps,
+  DraggableStateSnapshot,
+  Droppable,
+} from "@hello-pangea/dnd";
+import { ICustomMenuItem, LabelItemBlock } from "./label-block/label-item-block";
+import { CreateUpdateLabelInline } from "./create-update-label-inline";
+import { ProjectSettingLabelItem } from "./project-setting-label-item";
+import useDraggableInPortal from "hooks/use-draggable-portal";

 type Props = {
-  label: IIssueLabels;
-  labelChildren: IIssueLabels[];
-  handleLabelDelete: () => void;
-  editLabel: (label: IIssueLabels) => void;
-  addLabelToGroup: (parentLabel: IIssueLabels) => void;
+  label: IIssueLabel;
+  labelChildren: IIssueLabel[];
+  handleLabelDelete: (label: IIssueLabel) => void;
+  dragHandleProps: DraggableProvidedDragHandleProps;
+  draggableSnapshot: DraggableStateSnapshot;
+  isUpdating: boolean;
+  setIsUpdating: Dispatch<SetStateAction<boolean>>;
+  isDropDisabled: boolean;
 };

 export const ProjectSettingLabelGroup: React.FC<Props> = observer((props) => {
-  const { label, labelChildren, addLabelToGroup, editLabel, handleLabelDelete } = props;
+  const {
+    label,
+    labelChildren,
+    handleLabelDelete,
+    draggableSnapshot: groupDragSnapshot,
+    dragHandleProps,
+    isUpdating,
+    setIsUpdating,
+    isDropDisabled,
+  } = props;

-  // router
-  const router = useRouter();
-  const { workspaceSlug, projectId } = router.query;
+  const [isEditLabelForm, setEditLabelForm] = useState(false);

-  // store
-  const { projectLabel: projectLabelStore } = useMobxStore();
+  const renderDraggable = useDraggableInPortal();

-  const removeFromGroup = (label: IIssueLabels) => {
-    if (!workspaceSlug || !projectId) return;
-
-    projectLabelStore.updateLabel(workspaceSlug.toString(), projectId.toString(), label.id, {
-      parent: null,
-    });
-  };
+  const customMenuItems: ICustomMenuItem[] = [
+    {
+      CustomIcon: Pencil,
+      onClick: () => {
+        setEditLabelForm(true);
+        setIsUpdating(true);
+      },
+      isVisible: true,
+      text: "Edit label",
+    },
+    {
+      CustomIcon: Trash2,
+      onClick: handleLabelDelete,
+      isVisible: true,
+      text: "Delete label",
+    },
+  ];

  return (
    <Disclosure
      as="div"
-      className="rounded border-[0.5px] border-custom-border-200 bg-custom-background-100 px-3.5 py-3 text-custom-text-100"
+      className={`rounded border-[0.5px] border-custom-border-200 text-custom-text-100 ${
+        groupDragSnapshot.combineTargetFor ? "bg-custom-background-80" : "bg-custom-background-100"
+      }`}
      defaultOpen
    >
      {({ open }) => (
        <>
-          <div className="flex cursor-pointer items-center justify-between gap-2">
-            <div className="flex items-center gap-2">
-              <Component className="h-4 w-4 text-custom-text-100 flex-shrink-0" />
-              <h6>{label.name}</h6>
-            </div>
-            <div className="flex items-center gap-2">
-              <CustomMenu ellipsis buttonClassName="!text-custom-sidebar-text-400">
-                <CustomMenu.MenuItem onClick={() => addLabelToGroup(label)}>
-                  <span className="flex items-center justify-start gap-2">
-                    <Plus className="h-4 w-4" />
-                    <span>Add more labels</span>
-                  </span>
-                </CustomMenu.MenuItem>
-                <CustomMenu.MenuItem onClick={() => editLabel(label)}>
-                  <span className="flex items-center justify-start gap-2">
-                    <Pencil className="h-4 w-4" />
-                    <span>Edit label</span>
-                  </span>
-                </CustomMenu.MenuItem>
-                <CustomMenu.MenuItem onClick={handleLabelDelete}>
-                  <span className="flex items-center justify-start gap-2">
-                    <Trash2 className="h-4 w-4" />
-                    <span>Delete label</span>
-                  </span>
-                </CustomMenu.MenuItem>
-              </CustomMenu>
+          <Droppable
+            key={`label.group.droppable.${label.id}`}
+            droppableId={`label.group.droppable.${label.id}`}
+            isCombineEnabled={!groupDragSnapshot.isDragging && !isUpdating}
+            isDropDisabled={groupDragSnapshot.isDragging || isUpdating || isDropDisabled}
+          >
+            {(droppableProvided) => (
+              <div
+                className={`py-3 pl-1 pr-3 ${!isUpdating && "max-h-full overflow-y-hidden"}`}
+                ref={droppableProvided.innerRef}
+                {...droppableProvided.droppableProps}
+              >
+                <>
+                  <div className="relative flex cursor-pointer items-center justify-between gap-2">
+                    {isEditLabelForm ? (
+                      <CreateUpdateLabelInline
+                        labelForm={isEditLabelForm}
+                        setLabelForm={setEditLabelForm}
+                        isUpdating={true}
+                        labelToUpdate={label}
+                        onClose={() => {
+                          setEditLabelForm(false);
+                          setIsUpdating(false);
+                        }}
+                      />
+                    ) : (
+                      <LabelItemBlock
+                        label={label}
+                        isDragging={groupDragSnapshot.isDragging}
+                        customMenuItems={customMenuItems}
+                        dragHandleProps={dragHandleProps}
+                        handleLabelDelete={handleLabelDelete}
+                        isLabelGroup={true}
+                      />
+                    )}
+
                    <Disclosure.Button>
                      <span>
                        <ChevronDown
@ -80,7 +118,6 @@ export const ProjectSettingLabelGroup: React.FC<Props> = observer((props) => {
                      </span>
                    </Disclosure.Button>
                  </div>
-          </div>
                  <Transition
                    show={open}
                    enter="transition duration-100 ease-out"
@ -92,55 +129,36 @@ export const ProjectSettingLabelGroup: React.FC<Props> = observer((props) => {
                  >
                    <Disclosure.Panel>
                      <div className="mt-2.5 ml-6">
-                {labelChildren.map((child) => (
-                  <div
-                    key={child.id}
-                    className="group flex items-center justify-between border-b-[0.5px] border-custom-border-200 px-4 py-2.5 text-sm last:border-0"
+                        {labelChildren.map((child, index) => (
+                          <div key={child.id} className={`group w-full flex items-center text-sm`}>
+                            <Draggable
+                              draggableId={`label.draggable.${child.id}`}
+                              index={index}
+                              isDragDisabled={groupDragSnapshot.isDragging || isUpdating}
                            >
-                    <h5 className="flex items-center gap-3">
-                      <span
-                        className="h-3.5 w-3.5 flex-shrink-0 rounded-full"
-                        style={{
-                          backgroundColor: child.color && child.color !== "" ? child.color : "#000000",
-                        }}
+                              {renderDraggable((provided: DraggableProvided, snapshot: DraggableStateSnapshot) => (
+                                <div className="w-full py-1" ref={provided.innerRef} {...provided.draggableProps}>
+                                  <ProjectSettingLabelItem
+                                    label={child}
+                                    handleLabelDelete={() => handleLabelDelete(child)}
+                                    draggableSnapshot={snapshot}
+                                    dragHandleProps={provided.dragHandleProps!}
+                                    setIsUpdating={setIsUpdating}
+                                    isChild
                                  />
-                      {child.name}
-                    </h5>
-                    <div className="flex items-center gap-3.5 pointer-events-none opacity-0 group-hover:pointer-events-auto group-hover:opacity-100">
-                      <div className="h-4 w-4">
-                        <CustomMenu
-                          customButton={
-                            <div className="h-4 w-4">
-                              <Component className="h-4 w-4 leading-4 text-custom-sidebar-text-400 flex-shrink-0" />
-                            </div>
-                          }
-                        >
-                          <CustomMenu.MenuItem onClick={() => removeFromGroup(child)}>
-                            <span className="flex items-center justify-start gap-2">
-                              <X className="h-4 w-4" />
-                              <span>Remove from group</span>
-                            </span>
-                          </CustomMenu.MenuItem>
-                          <CustomMenu.MenuItem onClick={() => editLabel(child)}>
-                            <span className="flex items-center justify-start gap-2">
-                              <Pencil className="h-4 w-4" />
-                              <span>Edit label</span>
-                            </span>
-                          </CustomMenu.MenuItem>
-                        </CustomMenu>
-                      </div>
-
-                      <div className="flex items-center">
-                        <button className="flex items-center justify-start gap-2" onClick={handleLabelDelete}>
-                          <X className="h-[18px] w-[18px] text-custom-sidebar-text-400 flex-shrink-0" />
-                        </button>
-                      </div>
                                </div>
+                              ))}
+                            </Draggable>
                          </div>
                        ))}
                      </div>
                    </Disclosure.Panel>
                  </Transition>
+                  {droppableProvided.placeholder}
+                </>
+              </div>
+            )}
+          </Droppable>
        </>
      )}
    </Disclosure>
--- a/web/components/labels/project-setting-label-item.tsx
+++ b/web/components/labels/project-setting-label-item.tsx
@ -0,0 +1,91 @@
+import React, { Dispatch, SetStateAction, useState } from "react";
+import { useRouter } from "next/router";
+import { useMobxStore } from "lib/mobx/store-provider";
+import { DraggableProvidedDragHandleProps, DraggableStateSnapshot } from "@hello-pangea/dnd";
+// types
+import { IIssueLabel } from "types";
+//icons
+import { X, Pencil } from "lucide-react";
+//components
+import { ICustomMenuItem, LabelItemBlock } from "./label-block/label-item-block";
+import { CreateUpdateLabelInline } from "./create-update-label-inline";
+
+type Props = {
+  label: IIssueLabel;
+  handleLabelDelete: (label: IIssueLabel) => void;
+  draggableSnapshot: DraggableStateSnapshot;
+  dragHandleProps: DraggableProvidedDragHandleProps;
+  setIsUpdating: Dispatch<SetStateAction<boolean>>;
+  isChild: boolean;
+};
+
+export const ProjectSettingLabelItem: React.FC<Props> = (props) => {
+  const { label, setIsUpdating, handleLabelDelete, draggableSnapshot, dragHandleProps, isChild } = props;
+
+  const { combineTargetFor, isDragging } = draggableSnapshot;
+
+  // router
+  const router = useRouter();
+  const { workspaceSlug, projectId } = router.query;
+
+  // store
+  const { projectLabel: projectLabelStore } = useMobxStore();
+
+  //state
+  const [isEditLabelForm, setEditLabelForm] = useState(false);
+
+  const removeFromGroup = (label: IIssueLabel) => {
+    if (!workspaceSlug || !projectId) return;
+
+    projectLabelStore.updateLabel(workspaceSlug.toString(), projectId.toString(), label.id, {
+      parent: null,
+    });
+  };
+
+  const customMenuItems: ICustomMenuItem[] = [
+    {
+      CustomIcon: X,
+      onClick: removeFromGroup,
+      isVisible: !!label.parent,
+      text: "Remove from group",
+    },
+    {
+      CustomIcon: Pencil,
+      onClick: () => {
+        setEditLabelForm(true);
+        setIsUpdating(true);
+      },
+      isVisible: true,
+      text: "Edit label",
+    },
+  ];
+
+  return (
+    <div
+      className={`relative group flex items-center justify-between gap-2 space-y-3 rounded border-[0.5px] border-custom-border-200 ${
+        !isChild && combineTargetFor ? "bg-custom-background-80" : ""
+      } ${isDragging ? "shadow-custom-shadow-xs bg-custom-background-80" : ""} bg-custom-background-100 px-1 py-2.5`}
+    >
+      {isEditLabelForm ? (
+        <CreateUpdateLabelInline
+          labelForm={isEditLabelForm}
+          setLabelForm={setEditLabelForm}
+          isUpdating={true}
+          labelToUpdate={label}
+          onClose={() => {
+            setEditLabelForm(false);
+            setIsUpdating(false);
+          }}
+        />
+      ) : (
+        <LabelItemBlock
+          label={label}
+          isDragging={isDragging}
+          customMenuItems={customMenuItems}
+          dragHandleProps={dragHandleProps}
+          handleLabelDelete={handleLabelDelete}
+        />
+      )}
+    </div>
+  );
+};
--- a/web/components/labels/project-setting-label-list-item.tsx
+++ b/web/components/labels/project-setting-label-list-item.tsx
@ -1,73 +0,0 @@
-import React, { useRef, useState } from "react";
-
-//hook
-import useOutsideClickDetector from "hooks/use-outside-click-detector";
-// ui
-import { CustomMenu } from "@plane/ui";
-// types
-import { IIssueLabels } from "types";
-//icons
-import { Component, X, Pencil } from "lucide-react";
-
-type Props = {
-  label: IIssueLabels;
-  addLabelToGroup: (parentLabel: IIssueLabels) => void;
-  editLabel: (label: IIssueLabels) => void;
-  handleLabelDelete: () => void;
-};
-
-export const ProjectSettingLabelItem: React.FC<Props> = (props) => {
-  const { label, addLabelToGroup, editLabel, handleLabelDelete } = props;
-
-  const [isMenuActive, setIsMenuActive] = useState(false);
-  const actionSectionRef = useRef<HTMLDivElement | null>(null);
-
-  useOutsideClickDetector(actionSectionRef, () => setIsMenuActive(false));
-
-  return (
-    <div className="relative group flex items-center justify-between gap-2 space-y-3 rounded border-[0.5px] border-custom-border-200 bg-custom-background-100 px-4 py-2.5">
-      <div className="flex items-center gap-3">
-        <span
-          className="h-3.5 w-3.5 flex-shrink-0 rounded-full"
-          style={{
-            backgroundColor: label.color && label.color !== "" ? label.color : "#000",
-          }}
-        />
-        <h6 className="text-sm">{label.name}</h6>
-      </div>
-
-      <div
-        ref={actionSectionRef}
-        className={`absolute -top-0.5 right-3 flex items-start gap-3.5 pointer-events-none opacity-0 group-hover:pointer-events-auto group-hover:opacity-100 ${
-          isMenuActive ? "opacity-100" : ""
-        }`}
-      >
-        <CustomMenu
-          customButton={
-            <div className="h-4 w-4" onClick={() => setIsMenuActive(!isMenuActive)}>
-              <Component className="h-4 w-4 leading-4 text-custom-sidebar-text-400 flex-shrink-0" />
-            </div>
-          }
-        >
-          <CustomMenu.MenuItem onClick={() => addLabelToGroup(label)}>
-            <span className="flex items-center justify-start gap-2">
-              <Component className="h-4 w-4 leading-4 text-custom-sidebar-text-400 flex-shrink-0" />
-              <span>Convert to group</span>
-            </span>
-          </CustomMenu.MenuItem>
-          <CustomMenu.MenuItem onClick={() => editLabel(label)}>
-            <span className="flex items-center justify-start gap-2">
-              <Pencil className="h-4 w-4" />
-              <span>Edit label</span>
-            </span>
-          </CustomMenu.MenuItem>
-        </CustomMenu>
-        <div className="py-0.5">
-          <button className="flex h-4 w-4 items-center justify-start gap-2" onClick={handleLabelDelete}>
-            <X className="h-4 w-4  text-custom-sidebar-text-400 flex-shrink-0" />
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-};
--- a/web/components/labels/project-setting-label-list.tsx
+++ b/web/components/labels/project-setting-label-list.tsx
@ -1,75 +1,96 @@
 import React, { useState, useRef } from "react";
 import { useRouter } from "next/router";
 import useSWR from "swr";
+import { observer } from "mobx-react-lite";
+import {
+  DragDropContext,
+  Draggable,
+  DraggableProvided,
+  DraggableStateSnapshot,
+  DropResult,
+  Droppable,
+} from "@hello-pangea/dnd";

 // store
-import { observer } from "mobx-react-lite";
 import { useMobxStore } from "lib/mobx/store-provider";
 // components
-import {
-  CreateUpdateLabelInline,
-  DeleteLabelModal,
-  LabelsListModal,
-  ProjectSettingLabelItem,
-  ProjectSettingLabelGroup,
-} from "components/labels";
+import { CreateUpdateLabelInline, DeleteLabelModal, ProjectSettingLabelGroup } from "components/labels";
 // ui
 import { Button, Loader } from "@plane/ui";
 import { EmptyState } from "components/common";
 // images
 import emptyLabel from "public/empty-state/label.svg";
 // types
-import { IIssueLabels } from "types";
+import { IIssueLabel } from "types";
+//component
+import { ProjectSettingLabelItem } from "./project-setting-label-item";
+import useDraggableInPortal from "hooks/use-draggable-portal";
+
+const LABELS_ROOT = "labels.root";

 export const ProjectSettingsLabelList: React.FC = observer(() => {
  // router
  const router = useRouter();
  const { workspaceSlug, projectId } = router.query;

+  const renderDraggable = useDraggableInPortal();
+
  // store
-  const { project: projectStore } = useMobxStore();
-
+  const {
+    projectLabel: { fetchProjectLabels, projectLabels, updateLabelPosition, projectLabelsTree },
+  } = useMobxStore();
  // states
-  const [labelForm, setLabelForm] = useState(false);
+  const [showLabelForm, setLabelForm] = useState(false);
  const [isUpdating, setIsUpdating] = useState(false);
-  const [labelsListModal, setLabelsListModal] = useState(false);
-  const [labelToUpdate, setLabelToUpdate] = useState<IIssueLabels | null>(null);
-  const [parentLabel, setParentLabel] = useState<IIssueLabels | undefined>(undefined);
-  const [selectDeleteLabel, setSelectDeleteLabel] = useState<IIssueLabels | null>(null);
-
+  const [selectDeleteLabel, setSelectDeleteLabel] = useState<IIssueLabel | null>(null);
+  const [isDraggingGroup, setIsDraggingGroup] = useState(false);
  // ref
  const scrollToRef = useRef<HTMLFormElement>(null);

  // api call to fetch project details
  useSWR(
    workspaceSlug && projectId ? "PROJECT_LABELS" : null,
-    workspaceSlug && projectId
-      ? () => projectStore.fetchProjectLabels(workspaceSlug.toString(), projectId.toString())
-      : null
+    workspaceSlug && projectId ? () => fetchProjectLabels(workspaceSlug.toString(), projectId.toString()) : null
  );

-  // derived values
-  const issueLabels = projectStore.labels?.[projectId?.toString()!] ?? null;
-
  const newLabel = () => {
    setIsUpdating(false);
    setLabelForm(true);
  };

-  const addLabelToGroup = (parentLabel: IIssueLabels) => {
-    setLabelsListModal(true);
-    setParentLabel(parentLabel);
-  };
+  const onDragEnd = (result: DropResult) => {
+    const { combine, draggableId, destination, source } = result;

-  const editLabel = (label: IIssueLabels) => {
-    setLabelForm(true);
-    setIsUpdating(true);
-    setLabelToUpdate(label);
+    // return if dropped outside the DragDropContext
+    if (!combine && !destination) return;
+
+    const childLabel = draggableId.split(".")[2];
+    let parentLabel: string | undefined | null = destination?.droppableId?.split(".")[3];
+    const index = destination?.index || 0;
+
+    const prevParentLabel: string | undefined | null = source?.droppableId?.split(".")[3];
+    const prevIndex = source?.index;
+
+    if (combine && combine.draggableId) parentLabel = combine?.draggableId?.split(".")[2];
+
+    if (destination?.droppableId === LABELS_ROOT) parentLabel = null;
+
+    if (result.reason == "DROP" && childLabel != parentLabel) {
+      updateLabelPosition(
+        workspaceSlug?.toString()!,
+        projectId?.toString()!,
+        childLabel,
+        parentLabel,
+        index,
+        prevParentLabel == parentLabel,
+        prevIndex
+      );
+      return;
+    }
  };

  return (
    <>
-      <LabelsListModal isOpen={labelsListModal} parent={parentLabel} handleClose={() => setLabelsListModal(false)} />
      <DeleteLabelModal
        isOpen={!!selectDeleteLabel}
        data={selectDeleteLabel ?? null}
@ -82,64 +103,105 @@ export const ProjectSettingsLabelList: React.FC = observer(() => {
          Add label
        </Button>
      </div>
-      <div className="space-y-3 py-6 h-full w-full">
-        {labelForm && (
+      <div className="w-full">
+        {showLabelForm && (
+          <div className="w-full rounded border border-custom-border-200 px-3.5 py-2">
            <CreateUpdateLabelInline
-            labelForm={labelForm}
+              labelForm={showLabelForm}
              setLabelForm={setLabelForm}
              isUpdating={isUpdating}
-            labelToUpdate={labelToUpdate}
              ref={scrollToRef}
              onClose={() => {
                setLabelForm(false);
                setIsUpdating(false);
-              setLabelToUpdate(null);
              }}
            />
+          </div>
        )}
-
        {/* labels */}
-        {issueLabels &&
-          issueLabels.map((label) => {
-            const children = issueLabels?.filter((l) => l.parent === label.id);
-
-            if (children && children.length === 0) {
-              if (!label.parent)
-                return (
-                  <ProjectSettingLabelItem
-                    key={label.id}
-                    label={label}
-                    addLabelToGroup={() => addLabelToGroup(label)}
-                    editLabel={(label) => {
-                      editLabel(label);
-                      scrollToRef.current?.scrollIntoView({
-                        behavior: "smooth",
-                      });
+        <>
+          {projectLabelsTree && (
+            <DragDropContext
+              onDragEnd={onDragEnd}
+              autoScrollerOptions={{
+                startFromPercentage: 1,
+                disabled: false,
+                maxScrollAtPercentage: 0,
+                maxPixelScroll: 2,
              }}
-                    handleLabelDelete={() => setSelectDeleteLabel(label)}
-                  />
-                );
-            } else {
+            >
+              <Droppable
+                droppableId={LABELS_ROOT}
+                isCombineEnabled={!isDraggingGroup}
+                ignoreContainerClipping={true}
+                isDropDisabled={isUpdating}
+              >
+                {(droppableProvided, droppableSnapshot) => (
+                  <div className={`mt-3`} ref={droppableProvided.innerRef} {...droppableProvided.droppableProps}>
+                    {projectLabelsTree.map((label, index) => {
+                      if (label.children && label.children.length) {
                        return (
+                          <Draggable
+                            key={`label.draggable.${label.id}`}
+                            draggableId={`label.draggable.${label.id}.group`}
+                            index={index}
+                            isDragDisabled={isUpdating}
+                          >
+                            {(provided: DraggableProvided, snapshot: DraggableStateSnapshot) => {
+                              const isGroup = droppableSnapshot.draggingFromThisWith?.split(".")[3] === "group";
+                              setIsDraggingGroup(isGroup);
+
+                              return (
+                                <div ref={provided.innerRef} {...provided.draggableProps} className="mt-3">
                                  <ProjectSettingLabelGroup
                                    key={label.id}
                                    label={label}
-                  labelChildren={children}
-                  addLabelToGroup={addLabelToGroup}
-                  editLabel={(label) => {
-                    editLabel(label);
-                    scrollToRef.current?.scrollIntoView({
-                      behavior: "smooth",
-                    });
-                  }}
-                  handleLabelDelete={() => setSelectDeleteLabel(label)}
+                                    labelChildren={label.children || []}
+                                    isDropDisabled={isGroup}
+                                    dragHandleProps={provided.dragHandleProps!}
+                                    handleLabelDelete={(label: IIssueLabel) => setSelectDeleteLabel(label)}
+                                    draggableSnapshot={snapshot}
+                                    isUpdating={isUpdating}
+                                    setIsUpdating={setIsUpdating}
                                  />
+                                </div>
+                              );
+                            }}
+                          </Draggable>
                        );
                      }
+                      return (
+                        <Draggable
+                          key={`label.draggable.${label.id}`}
+                          draggableId={`label.draggable.${label.id}`}
+                          index={index}
+                          isDragDisabled={isUpdating}
+                        >
+                          {renderDraggable((provided: DraggableProvided, snapshot: DraggableStateSnapshot) => (
+                            <div ref={provided.innerRef} {...provided.draggableProps} className="mt-3">
+                              <ProjectSettingLabelItem
+                                dragHandleProps={provided.dragHandleProps!}
+                                draggableSnapshot={snapshot}
+                                label={label}
+                                setIsUpdating={setIsUpdating}
+                                handleLabelDelete={(label) => setSelectDeleteLabel(label)}
+                                isChild={false}
+                              />
+                            </div>
+                          ))}
+                        </Draggable>
+                      );
                    })}
+                    {droppableProvided.placeholder}
+                  </div>
+                )}
+              </Droppable>
+            </DragDropContext>
+          )}
+        </>

        {/* loading state */}
-        {!issueLabels && (
+        {!projectLabels && (
          <Loader className="space-y-5">
            <Loader.Item height="42px" />
            <Loader.Item height="42px" />
@ -149,7 +211,7 @@ export const ProjectSettingsLabelList: React.FC = observer(() => {
        )}

        {/* empty state */}
-        {issueLabels && issueLabels.length === 0 && (
+        {projectLabels && projectLabels.length === 0 && (
          <EmptyState
            title="No labels yet"
            description="Create labels to help organize and filter issues in you project"
--- a/web/components/project/member-list.tsx
+++ b/web/components/project/member-list.tsx
@ -24,7 +24,6 @@ export const ProjectMemberList: React.FC = observer(() => {

  // store
  const {
-    project: projectStore,
    projectMember: { projectMembers, fetchProjectMembers },
  } = useMobxStore();

--- a/web/components/ui/labels-list.tsx
+++ b/web/components/ui/labels-list.tsx
@ -2,10 +2,10 @@ import { FC } from "react";
 // ui
 import { Tooltip } from "@plane/ui";
 // types
-import { IIssueLabels } from "types";
+import { IIssueLabel } from "types";

 type IssueLabelsListProps = {
-  labels?: (IIssueLabels | undefined)[];
+  labels?: (IIssueLabel | undefined)[];
  length?: number;
  showLength?: boolean;
 };
--- a/Show More
+++ b/Show More