diff --git a/labeled-image/src/form/label-editor-form.tsx b/labeled-image/src/form/label-editor-form.tsx
index d272500..47510f4 100644
--- a/labeled-image/src/form/label-editor-form.tsx
+++ b/labeled-image/src/form/label-editor-form.tsx
@@ -1,4 +1,4 @@
-import { SilkeBox, SilkeButton, SilkeModal } from '@vev/silke';
+import { SilkeBox, SilkeButton, SilkeModal, SilkeText, SilkeTitle } from '@vev/silke';
 import React, { useState } from 'react';
 import { LabelEditor } from './label-editor';
 import { Label } from '../types';
@@ -11,12 +11,13 @@ export function LabelEditorForm(form: any) {
     <SilkeBox align="center" pad="s">
       {showModal && (
         <SilkeModal
+          title={<SilkeTitle kind="xs">Add labels to your image</SilkeTitle>}
           onClose={() => {
             setShowModal(false);
           }}
         >
           <LabelEditor
-            labels={labels}
+            labels={labels || []}
             url={imageUrl}
             onRemove={(removeIndex) => {
               const newLabels = labels.filter((label) => {
diff --git a/labeled-image/src/form/label-editor.tsx b/labeled-image/src/form/label-editor.tsx
index 012c4e9..084c841 100644
--- a/labeled-image/src/form/label-editor.tsx
+++ b/labeled-image/src/form/label-editor.tsx
@@ -1,5 +1,12 @@
 import React, { useMemo, useRef, useState } from 'react';
-import { SilkeBox, SilkeButton, SilkeTextField } from '@vev/silke';
+import {
+  SilkeBox,
+  SilkeButton,
+  SilkeDivider,
+  SilkeIcon,
+  SilkeText,
+  SilkeTextField,
+} from '@vev/silke';
 import { Label } from '../types';
 import { LabelOverlayEditor } from './label-overlay-editor';
 import style from './label-overlay-editor.module.css';
@@ -91,63 +98,67 @@ export function LabelEditor({ url, onAdd, labels, onRemove, onChange }: Props) {
           />
         </SilkeBox>
       </SilkeBox>
-      <SilkeBox column hPad="m" gap="s" style={{ minWidth: '180px' }} hAlign="center">
-        {labels &&
-          labels.map((label) => {
-            return (
-              <SilkeBox
-                key={label.index}
-                column
-                rounded="tiny"
-                bg={hoverIndex === label.index ? 'surface-3' : undefined}
-              >
-                <SilkeBox
-                  align
-                  hPad="s"
-                  gap="s"
-                  onMouseEnter={() => {
-                    setHoverIndex(label.index);
+      <SilkeBox
+        column
+        hPad="m"
+        gap="s"
+        style={{ minWidth: '256px', maxWidth: '256px' }}
+        hAlign="center"
+      >
+        <SilkeBox style={{ width: '100%' }}>
+          <SilkeText weight="strong">Labels</SilkeText>
+        </SilkeBox>
+        {!labels.length && (
+          <SilkeBox pad="m" rounded="small" bg="neutral-10" style={{ width: '100%' }}>
+            <SilkeBox pad="l" style={{ width: '100%', textAlign: 'center' }} column vAlign hAlign>
+              <SilkeIcon icon="hand.pointer" />
+              <SilkeText size="small" color="neutral-70">
+                Click anywhere on the image to add labels
+              </SilkeText>
+            </SilkeBox>
+          </SilkeBox>
+        )}
+        {labels.length !== 0 && (
+          <SilkeBox style={{ width: '100%' }}>
+            <SilkeText size="small" color="neutral-70">
+              Click on the image to add labels
+            </SilkeText>
+          </SilkeBox>
+        )}
+        {labels.map((label) => {
+          return (
+            <SilkeBox
+              key={label.index}
+              bg="neutral-10"
+              column
+              rounded="tiny"
+              style={{ width: '100%' }}
+            >
+              <SilkeBox vPad="xs" hPad="s" vAlign="center" hAlign="spread">
+                <SilkeText size="small">{`Label ${label.index + 1}`}</SilkeText>
+                <SilkeButton
+                  icon="delete"
+                  size="s"
+                  kind="ghost"
+                  onClick={() => {
+                    onRemove(label.index);
+                  }}
+                />
+              </SilkeBox>
+              <SilkeDivider dark />
+              <SilkeBox vPad="s" hPad="s" vAlign="center" hAlign="spread">
+                <SilkeTextField
+                  size="s"
+                  label="Caption"
+                  value={label.caption}
+                  onChange={(change) => {
+                    onChange(label.index, { ...label, caption: change });
                   }}
-                  bg={hoverIndex === label.index ? 'surface-3' : undefined}
-                  rounded="tiny"
-                >
-                  {`Label ${label.index}`}
-                  <SilkeBox>
-                    <SilkeButton
-                      kind="ghost"
-                      size="s"
-                      icon="edit"
-                      title="Edit caption"
-                      onClick={() => {
-                        if (editIndex === label.index) setEditIndex(-1);
-                        else setEditIndex(label.index);
-                      }}
-                    />
-                    <SilkeButton
-                      kind="ghost"
-                      size="s"
-                      icon="delete"
-                      title="Remove"
-                      onClick={() => {
-                        onRemove(label.index);
-                      }}
-                    />
-                  </SilkeBox>
-                </SilkeBox>
-                {editIndex === label.index && (
-                  <SilkeBox hPad="s">
-                    <SilkeTextField
-                      label="Caption"
-                      value={label.caption}
-                      onChange={(change) => {
-                        onChange(label.index, { ...label, caption: change });
-                      }}
-                    />
-                  </SilkeBox>
-                )}
+                />
               </SilkeBox>
-            );
-          })}
+            </SilkeBox>
+          );
+        })}
       </SilkeBox>
     </SilkeBox>
   );
diff --git a/labeled-image/src/form/label-overlay-editor.module.css b/labeled-image/src/form/label-overlay-editor.module.css
index 7a40bfb..4a1fc8a 100644
--- a/labeled-image/src/form/label-overlay-editor.module.css
+++ b/labeled-image/src/form/label-overlay-editor.module.css
@@ -15,7 +15,7 @@
     user-select: none;
     cursor: crosshair;
     object-fit: contain;
-    background: #1c2937;
+    border-radius: 8px;
 }
 
 .active {