diff --git a/src/components/editor/action.ts b/src/components/editor/action.ts
index b788bfa..c3553ac 100644
--- a/src/components/editor/action.ts
+++ b/src/components/editor/action.ts
@@ -16,6 +16,17 @@ type EditorActionMap = {
     containerId: string;
     elementDetails: EditorElement;
   };
+  MOVE_ELEMENT: {
+    elementId: string;
+    newParentId: string;
+    newIndex: number;
+  };
+  MOVE_ELEMENT_UP: {
+    elementId: string;
+  };
+  MOVE_ELEMENT_DOWN: {
+    elementId: string;
+  };
   UPDATE_ELEMENT: {
     elementDetails: EditorElement;
   };
@@ -89,6 +100,63 @@ const traverseElements = (
   }, []);
 };
 
+const findElementAndParent = (
+  elements: EditorElement[],
+  elementId: string,
+): [EditorElement | null, EditorElement | null, number] => {
+  for (const el of elements) {
+    if (el.id === elementId) {
+      return [el, null, -1];
+    }
+    if (Array.isArray(el.content)) {
+      const index = el.content.findIndex((child) => child.id === elementId);
+      if (index !== -1) {
+        return [el.content[index], el, index];
+      }
+      const [foundEl, foundParent, foundIndex] = findElementAndParent(
+        el.content,
+        elementId,
+      );
+      if (foundEl) {
+        return [foundEl, foundParent, foundIndex];
+      }
+    }
+  }
+  return [null, null, -1];
+};
+
+const removeElementFromParent = (
+  elements: EditorElement[],
+  elementId: string,
+): [EditorElement[], EditorElement | null] => {
+  let removedElement: EditorElement | null = null;
+  const newElements = elements.map((el) => {
+    if (Array.isArray(el.content)) {
+      const index = el.content.findIndex((child) => child.id === elementId);
+      if (index !== -1) {
+        removedElement = el.content[index];
+        return {
+          ...el,
+          content: [
+            ...el.content.slice(0, index),
+            ...el.content.slice(index + 1),
+          ],
+        };
+      }
+      const [newContent, removed] = removeElementFromParent(
+        el.content,
+        elementId,
+      );
+      if (removed) {
+        removedElement = removed;
+        return { ...el, content: newContent };
+      }
+    }
+    return el;
+  }) as EditorElement[];
+  return [newElements, removedElement];
+};
+
 /**
  * Action Handlers
  */
@@ -119,6 +187,79 @@ const actionHandlers: {
     });
   },
 
+  MOVE_ELEMENT: (editor, payload) => {
+    const { elementId, newParentId, newIndex } = payload;
+
+    const [elements, removedElement] = removeElementFromParent(
+      editor.state.elements,
+      elementId,
+    );
+    if (!removedElement) return editor;
+
+    const insertElement = (els: EditorElement[]): EditorElement[] => {
+      return els.map((el) => {
+        if (el.id === newParentId && Array.isArray(el.content)) {
+          const newContent = [...el.content];
+          newContent.splice(newIndex, 0, removedElement);
+          return { ...el, content: newContent };
+        }
+        if (Array.isArray(el.content)) {
+          return { ...el, content: insertElement(el.content) };
+        }
+        return el;
+      }) as EditorElement[];
+    };
+
+    const newElements = insertElement(elements);
+
+    return updateEditorHistory(editor, {
+      ...editor.state,
+      elements: newElements,
+    });
+  },
+
+  MOVE_ELEMENT_UP: (editor, payload) => {
+    const { elementId } = payload;
+    const [element, parent, currentIndex] = findElementAndParent(
+      editor.state.elements,
+      elementId,
+    );
+    if (
+      !element ||
+      !parent ||
+      !Array.isArray(parent.content) ||
+      currentIndex <= 0
+    )
+      return editor;
+
+    return actionHandlers.MOVE_ELEMENT(editor, {
+      elementId,
+      newParentId: parent.id,
+      newIndex: currentIndex - 1,
+    });
+  },
+
+  MOVE_ELEMENT_DOWN: (editor, payload) => {
+    const { elementId } = payload;
+    const [element, parent, currentIndex] = findElementAndParent(
+      editor.state.elements,
+      elementId,
+    );
+    if (
+      !element ||
+      !parent ||
+      !Array.isArray(parent.content) ||
+      currentIndex === parent.content.length - 1
+    )
+      return editor;
+
+    return actionHandlers.MOVE_ELEMENT(editor, {
+      elementId,
+      newParentId: parent.id,
+      newIndex: currentIndex + 1,
+    });
+  },
+
   UPDATE_ELEMENT: (editor, payload) => {
     const newElements = traverseElements(editor.state.elements, (element) => {
       if (element.id === payload.elementDetails.id) {
@@ -163,6 +304,7 @@ const actionHandlers: {
     return updateEditorHistory(editor, {
       ...editor.state,
       elements: newElements,
+      selectedElement: emptyElement,
     });
   },
 
diff --git a/src/components/editor/elements/container.tsx b/src/components/editor/elements/container.tsx
index 5e3c93c..bc50056 100644
--- a/src/components/editor/elements/container.tsx
+++ b/src/components/editor/elements/container.tsx
@@ -16,7 +16,7 @@ type Props = { element: EditorElement };
 
 export default function Container({ element }: Props) {
   const { id, content, type } = element;
-  const { dispatch } = useEditor();
+  const { editor, dispatch } = useEditor();
   const isRoot = type === "__body";
 
   const handleDragStart = (e: React.DragEvent) => {
@@ -126,8 +126,11 @@ export default function Container({ element }: Props) {
     <ElementWrapper
       element={element}
       className={cn(
-        "group relative h-fit w-full max-w-full p-4 transition-all",
-        isRoot && "h-full overflow-visible",
+        "h-fit w-full max-w-full",
+        isRoot && "h-full overflow-y-auto",
+        !isRoot &&
+          !editor.state.isPreviewMode &&
+          "ring-1 ring-muted hover:ring-border",
       )}
       onDrop={handleDrop}
       onDragStart={handleDragStart}
diff --git a/src/components/editor/elements/element-helper.tsx b/src/components/editor/elements/element-helper.tsx
new file mode 100644
index 0000000..929c1e0
--- /dev/null
+++ b/src/components/editor/elements/element-helper.tsx
@@ -0,0 +1,123 @@
+"use client";
+
+import {
+  ArrowDownIcon,
+  ArrowUpIcon,
+  CopyPlusIcon,
+  GripVerticalIcon,
+  Trash2Icon,
+} from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import { useEditor } from "~/components/editor/provider";
+import { isValidSelectEditorElement } from "~/components/editor/util";
+import { Badge } from "~/components/ui/badge";
+import { Button } from "~/components/ui/button";
+import { cn } from "~/lib/utils";
+
+export default function ElementHelper() {
+  const { editor, dispatch } = useEditor();
+  const element = editor.state.selectedElement;
+
+  const [layerStyle, setLayerStyle] = useState<React.CSSProperties>({});
+
+  const updateLayerStyle = useCallback((id: string) => {
+    const el = document.querySelector(`[data-element-id="${id}"]`);
+
+    if (!el) {
+      return;
+    }
+
+    const resizeObserver = new ResizeObserver(() => {
+      const { top, left, width, height } = el.getBoundingClientRect();
+      setLayerStyle({ top, left, width, height });
+    });
+
+    resizeObserver.observe(el, { box: "border-box" });
+    return () => {
+      resizeObserver.unobserve(el);
+    };
+  }, []);
+
+  useEffect(() => {
+    return updateLayerStyle(element.id);
+  }, [element.id, updateLayerStyle]);
+
+  const handleMoveUp = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    dispatch({
+      type: "MOVE_ELEMENT_UP",
+      payload: {
+        elementId: element.id,
+      },
+    });
+    updateLayerStyle(element.id);
+  };
+
+  const handleMoveDown = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    dispatch({
+      type: "MOVE_ELEMENT_DOWN",
+      payload: {
+        elementId: element.id,
+      },
+    });
+    updateLayerStyle(element.id);
+  };
+
+  const handleDeleteElement = () => {
+    dispatch({
+      type: "DELETE_ELEMENT",
+      payload: {
+        elementDetails: element,
+      },
+    });
+  };
+
+  return (
+    typeof window !== "undefined" &&
+    createPortal(
+      !editor.state.isPreviewMode && isValidSelectEditorElement(element) && (
+        <div
+          style={layerStyle}
+          className={cn(
+            "fixed z-50",
+            !editor.state.isPreviewMode && "ring-1 ring-primary",
+          )}
+        >
+          <Badge className="absolute -left-[1px] -top-[26px] z-10">
+            {element.name}
+          </Badge>
+          <div className="absolute -left-[28px] -top-[1px] z-10">
+            <div className="flex flex-col gap-0.5">
+              <IconButton>
+                <GripVerticalIcon className="h-4 w-4" />
+              </IconButton>
+              <IconButton onClick={handleMoveUp}>
+                <ArrowUpIcon className="h-4 w-4" />
+              </IconButton>
+              <IconButton onClick={handleMoveDown}>
+                <ArrowDownIcon className="h-4 w-4" />
+              </IconButton>
+            </div>
+          </div>
+          <div className="absolute -right-[28px] -top-[1px] z-10">
+            <div className="flex flex-col gap-0.5">
+              <IconButton onClick={handleDeleteElement}>
+                <Trash2Icon className="h-4 w-4" />
+              </IconButton>
+              <IconButton>
+                <CopyPlusIcon className="h-4 w-4" />
+              </IconButton>
+            </div>
+          </div>
+        </div>
+      ),
+      document.body,
+    )
+  );
+}
+
+function IconButton(props: React.ComponentProps<"button">) {
+  return <Button {...props} size="icon" className="h-6 w-6 p-0" />;
+}
diff --git a/src/components/editor/elements/element-wrapper.tsx b/src/components/editor/elements/element-wrapper.tsx
index fbdf79c..9e5114c 100644
--- a/src/components/editor/elements/element-wrapper.tsx
+++ b/src/components/editor/elements/element-wrapper.tsx
@@ -1,14 +1,5 @@
-import {
-  ArrowDownIcon,
-  ArrowUpIcon,
-  CopyPlusIcon,
-  GripVerticalIcon,
-  Trash2Icon,
-} from "lucide-react";
 import { useEditor } from "~/components/editor/provider";
 import type { EditorElement } from "~/components/editor/type";
-import { Badge } from "~/components/ui/badge";
-import { Button } from "~/components/ui/button";
 import { cn } from "~/lib/utils";
 
 type Props = React.ComponentProps<"div"> & {
@@ -23,9 +14,8 @@ export default function ElementWrapper({
 }: Props) {
   const { editor, dispatch } = useEditor();
   const isRoot = element.type === "__body";
-  const isSelected = editor.state.selectedElement.id === element.id;
 
-  const handleClickRoot = (e: React.MouseEvent) => {
+  const handleClick = (e: React.MouseEvent) => {
     e.stopPropagation();
 
     dispatch({
@@ -36,65 +26,19 @@ export default function ElementWrapper({
     });
   };
 
-  const handleDeleteElement = () => {
-    dispatch({
-      type: "DELETE_ELEMENT",
-      payload: {
-        elementDetails: element,
-      },
-    });
-  };
-
   return (
     <div
       {...props}
+      data-element-id={element.id}
       style={element.styles}
       className={cn(
-        "relative w-full p-1 transition-all",
-        !editor.state.isPreviewMode && [
-          "border border-dashed border-border",
-          (isSelected || isRoot) && "border-solid",
-          isSelected && !isRoot && "border-primary",
-        ],
+        "relative w-full transition-all",
+        !editor.state.isPreviewMode && "ring-border hover:ring-1",
         className,
       )}
-      onClick={(e) => !isRoot && handleClickRoot(e)}
+      onClick={(e) => !isRoot && handleClick(e)}
     >
       {children}
-      {!isRoot && isSelected && !editor.state.isPreviewMode && (
-        <>
-          <Badge className="absolute -left-[1px] -top-[26px] z-10">
-            {editor.state.selectedElement.name}
-          </Badge>
-          <div className="absolute -left-[28px] -top-[1px] z-10">
-            <div className="flex flex-col gap-0.5">
-              <IconButton>
-                <GripVerticalIcon className="h-4 w-4" />
-              </IconButton>
-              <IconButton>
-                <ArrowUpIcon className="h-4 w-4" />
-              </IconButton>
-              <IconButton>
-                <ArrowDownIcon className="h-4 w-4" />
-              </IconButton>
-            </div>
-          </div>
-          <div className="absolute -right-[28px] -top-[1px] z-10">
-            <div className="flex flex-col gap-0.5">
-              <IconButton onClick={handleDeleteElement}>
-                <Trash2Icon className="h-4 w-4" />
-              </IconButton>
-              <IconButton>
-                <CopyPlusIcon className="h-4 w-4" />
-              </IconButton>
-            </div>
-          </div>
-        </>
-      )}
     </div>
   );
 }
-
-function IconButton(props: React.ComponentProps<"button">) {
-  return <Button {...props} size="icon" className="h-6 w-6 p-0" />;
-}
diff --git a/src/components/editor/main.tsx b/src/components/editor/main.tsx
index bc7ec3a..db3efcd 100644
--- a/src/components/editor/main.tsx
+++ b/src/components/editor/main.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { EyeOff } from "lucide-react";
+import ElementHelper from "~/components/editor/elements/element-helper";
 import Recursive from "~/components/editor/elements/recursive";
 import { useEditor } from "~/components/editor/provider";
 import { Button } from "~/components/ui/button";
@@ -28,7 +29,7 @@ export default function EditorMain() {
       <div
         id="editor-main"
         className={cn(
-          "ml-[10px] mr-[392px] animate-zoom-in rounded-md bg-background transition-all",
+          "ml-[10px] mr-[392px] animate-zoom-in bg-background transition-all",
           editor.state.isPreviewMode && "m-0 overflow-hidden p-0",
           editor.state.device === "Desktop" && "h-full w-full",
           editor.state.device === "Tablet" && "h-full w-[850px]",
@@ -50,6 +51,7 @@ export default function EditorMain() {
             <Recursive key={childElement.id} element={childElement} />
           ))}
       </div>
+      <ElementHelper />
     </div>
   );
 }