diff --git a/ts_web/elements/wysiwyg/wysiwyg.styles.ts b/ts_web/elements/wysiwyg/wysiwyg.styles.ts
index 4ee4653..0724bfa 100644
--- a/ts_web/elements/wysiwyg/wysiwyg.styles.ts
+++ b/ts_web/elements/wysiwyg/wysiwyg.styles.ts
@@ -11,7 +11,7 @@ export const wysiwygStyles = css`
     border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#333')};
     border-radius: 8px;
     min-height: 200px;
-    padding: 20px;
+    padding: 32px 40px;
     position: relative;
     transition: all 0.2s ease;
     color: ${cssManager.bdTheme('#000000', '#ffffff')};
@@ -29,26 +29,36 @@ export const wysiwygStyles = css`
   .editor-content {
     outline: none;
     min-height: 160px;
+    margin: 0 -8px;
+    padding: 0 8px;
   }
 
   .block {
-    margin-bottom: 12px;
+    margin: 0;
+    padding: 4px 0;
     position: relative;
     transition: all 0.15s ease;
     min-height: 1.6em;
     color: ${cssManager.bdTheme('#000000', '#e0e0e0')};
   }
 
-  .block:last-child {
+  /* First and last blocks don't need extra spacing */
+  .block-wrapper:first-child .block {
+    margin-top: 0 !important;
+  }
+
+  .block-wrapper:last-child .block {
     margin-bottom: 0;
   }
 
   .block.selected {
-    background: ${cssManager.bdTheme('rgba(0, 102, 204, 0.08)', 'rgba(77, 148, 255, 0.12)')};
-    margin-left: -12px;
-    margin-right: -12px;
-    padding: 8px 12px;
-    border-radius: 6px;
+    background: ${cssManager.bdTheme('rgba(0, 102, 204, 0.05)', 'rgba(77, 148, 255, 0.08)')};
+    box-shadow: inset 0 0 0 2px ${cssManager.bdTheme('rgba(0, 102, 204, 0.2)', 'rgba(77, 148, 255, 0.2)')};
+    border-radius: 4px;
+    margin-left: -8px;
+    margin-right: -8px;
+    padding-left: 8px;
+    padding-right: 8px;
   }
 
   .block[contenteditable] {
@@ -74,7 +84,6 @@ export const wysiwygStyles = css`
     font-size: 32px;
     font-weight: 700;
     line-height: 1.2;
-    margin-bottom: 16px;
     color: ${cssManager.bdTheme('#000000', '#ffffff')};
   }
 
@@ -91,7 +100,6 @@ export const wysiwygStyles = css`
     font-size: 24px;
     font-weight: 600;
     line-height: 1.3;
-    margin-bottom: 14px;
     color: ${cssManager.bdTheme('#000000', '#ffffff')};
   }
 
@@ -108,7 +116,6 @@ export const wysiwygStyles = css`
     font-size: 20px;
     font-weight: 600;
     line-height: 1.4;
-    margin-bottom: 12px;
     color: ${cssManager.bdTheme('#000000', '#ffffff')};
   }
 
@@ -123,11 +130,12 @@ export const wysiwygStyles = css`
 
   .block.quote {
     border-left: 3px solid ${cssManager.bdTheme('#0066cc', '#4d94ff')};
-    padding-left: 16px;
+    padding-left: 20px;
     font-style: italic;
     color: ${cssManager.bdTheme('#555', '#b0b0b0')};
     margin-left: 0;
     margin-right: 0;
+    line-height: 1.6;
   }
 
   .block.quote:empty::before {
@@ -144,9 +152,10 @@ export const wysiwygStyles = css`
     background: ${cssManager.bdTheme('#f8f8f8', '#0d0d0d')};
     border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#2a2a2a')};
     border-radius: 6px;
-    padding: 12px 16px;
+    padding: 16px 20px;
     font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
     font-size: 14px;
+    line-height: 1.5;
     white-space: pre-wrap;
     color: ${cssManager.bdTheme('#d14', '#ff6b6b')};
     overflow-x: auto;
@@ -163,14 +172,14 @@ export const wysiwygStyles = css`
   }
 
   .block.list {
-    padding-left: 24px;
+    padding-left: 0;
   }
 
   .block.list ul,
   .block.list ol {
     margin: 0;
-    padding: 0;
-    list-style-position: inside;
+    padding: 0 0 0 24px;
+    list-style-position: outside;
   }
 
   .block.list ul {
@@ -182,10 +191,14 @@ export const wysiwygStyles = css`
   }
 
   .block.list li {
-    margin-bottom: 4px;
+    margin-bottom: 8px;
     line-height: 1.6;
   }
 
+  .block.list li:last-child {
+    margin-bottom: 0;
+  }
+
   .block.divider {
     text-align: center;
     padding: 20px 0;
@@ -289,13 +302,31 @@ export const wysiwygStyles = css`
     transition: all 0.2s ease;
   }
 
+  /* Ensure proper spacing context for blocks */
+  .block-wrapper + .block-wrapper .block {
+    margin-top: 16px;
+  }
+
+  /* Override for headings following other blocks */
+  .block-wrapper + .block-wrapper .block.heading-1,
+  .block-wrapper + .block-wrapper .block.heading-2,
+  .block-wrapper + .block-wrapper .block.heading-3 {
+    margin-top: 24px;
+  }
+
+  /* Code and quote blocks need consistent spacing */
+  .block-wrapper + .block-wrapper .block.code,
+  .block-wrapper + .block-wrapper .block.quote {
+    margin-top: 20px;
+  }
+
   .drag-handle {
     position: absolute;
-    left: -30px;
+    left: -28px;
     top: 50%;
     transform: translateY(-50%);
-    width: 20px;
-    height: 20px;
+    width: 24px;
+    height: 24px;
     cursor: grab;
     opacity: 0;
     transition: opacity 0.2s ease;
@@ -303,6 +334,7 @@ export const wysiwygStyles = css`
     align-items: center;
     justify-content: center;
     color: ${cssManager.bdTheme('#999', '#666')};
+    border-radius: 4px;
   }
 
   .drag-handle::before {
@@ -317,10 +349,12 @@ export const wysiwygStyles = css`
 
   .drag-handle:hover {
     color: ${cssManager.bdTheme('#666', '#999')};
+    background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.05)')};
   }
 
   .drag-handle:active {
     cursor: grabbing;
+    background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
   }
 
   .block-wrapper.dragging {
@@ -330,23 +364,25 @@ export const wysiwygStyles = css`
   .block-wrapper.drag-over-before::before {
     content: '';
     position: absolute;
-    top: -2px;
-    left: 0;
-    right: 0;
-    height: 3px;
+    top: -8px;
+    left: -8px;
+    right: -8px;
+    height: 2px;
     background: ${cssManager.bdTheme('#0066cc', '#4d94ff')};
-    border-radius: 2px;
+    border-radius: 1px;
+    box-shadow: 0 0 8px ${cssManager.bdTheme('rgba(0, 102, 204, 0.4)', 'rgba(77, 148, 255, 0.4)')};
   }
 
   .block-wrapper.drag-over-after::after {
     content: '';
     position: absolute;
-    bottom: -2px;
-    left: 0;
-    right: 0;
-    height: 3px;
+    bottom: -8px;
+    left: -8px;
+    right: -8px;
+    height: 2px;
     background: ${cssManager.bdTheme('#0066cc', '#4d94ff')};
-    border-radius: 2px;
+    border-radius: 1px;
+    box-shadow: 0 0 8px ${cssManager.bdTheme('rgba(0, 102, 204, 0.4)', 'rgba(77, 148, 255, 0.4)')};
   }
 
   .editor-content.dragging * {