diff --git a/packages/editor-sample/src/documents/blocks/helpers/block-wrappers/TuneMenu.tsx b/packages/editor-sample/src/documents/blocks/helpers/block-wrappers/TuneMenu.tsx
index 27c3e69..2b2d7f9 100644
--- a/packages/editor-sample/src/documents/blocks/helpers/block-wrappers/TuneMenu.tsx
+++ b/packages/editor-sample/src/documents/blocks/helpers/block-wrappers/TuneMenu.tsx
@@ -1,6 +1,6 @@
 import React, { CSSProperties } from 'react';
 
-import { DeleteOutlined } from '@mui/icons-material';
+import { ArrowDownwardOutlined, ArrowUpwardOutlined, DeleteOutlined } from '@mui/icons-material';
 import { IconButton, Paper, Stack, Tooltip } from '@mui/material';
 
 import { TEditorBlock } from '../../../editor/core';
@@ -77,9 +77,85 @@ export default function TuneMenu({ blockId }: Props) {
     resetDocument(nDocument);
   };
 
+  const handleMoveClick = (direction: 'up' | 'down') => {
+    const moveChildrenIds = (childrenIds: string[] | null | undefined) => {
+      if (!childrenIds) {
+        return childrenIds;
+      }
+      const index = childrenIds.indexOf(blockId);
+      if (index !== -1) {
+        if (direction === 'up' && index > 0) {
+          [childrenIds[index], childrenIds[index - 1]] = [childrenIds[index - 1], childrenIds[index]];
+        } else if (direction === 'down' && index < childrenIds.length - 1) {
+          [childrenIds[index], childrenIds[index + 1]] = [childrenIds[index + 1], childrenIds[index]];
+        }
+      }
+
+      return childrenIds;
+    };
+    const nDocument: typeof document = { ...document };
+    for (const [id, b] of Object.entries(nDocument)) {
+      const block = b as TEditorBlock;
+      if (id === blockId) {
+        continue;
+      }
+      switch (block.type) {
+        case 'EmailLayout':
+          nDocument[id] = {
+            ...block,
+            data: {
+              ...block.data,
+              childrenIds: moveChildrenIds(block.data.childrenIds),
+            },
+          };
+          break;
+        case 'Container':
+          nDocument[id] = {
+            ...block,
+            data: {
+              ...block.data,
+              props: {
+                ...block.data.props,
+                childrenIds: moveChildrenIds(block.data.props?.childrenIds),
+              },
+            },
+          };
+          break;
+        case 'ColumnsContainer':
+          nDocument[id] = {
+            type: 'ColumnsContainer',
+            data: {
+              style: block.data.style,
+              props: {
+                ...block.data.props,
+                columns: block.data.props?.columns?.map((c) => ({
+                  childrenIds: moveChildrenIds(c.childrenIds),
+                })),
+              },
+            } as ColumnsContainerProps,
+          };
+          break;
+        default:
+          nDocument[id] = block;
+      }
+    }
+    console.log(nDocument);
+    resetDocument(nDocument);
+  };
+
   return (
     <Paper style={STYLE} onClick={(ev) => ev.stopPropagation()}>
       <Stack>
+        <Tooltip title="Move Up" placement="left-start">
+          <IconButton onClick={() => handleMoveClick('up')} sx={{ color: 'text.primary' }}>
+            <ArrowUpwardOutlined fontSize="small" />
+          </IconButton>
+        </Tooltip>
+        <Tooltip title="Move Down" placement="left-start">
+          <IconButton onClick={() => handleMoveClick('down')} sx={{ color: 'text.primary' }}>
+            <ArrowDownwardOutlined fontSize="small" />
+          </IconButton>
+        </Tooltip>
         <Tooltip title="Delete" placement="left-start">
           <IconButton onClick={handleDeleteClick} sx={{ color: 'text.primary' }}>
             <DeleteOutlined fontSize="small" />