diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json
index 88e79dd08..5f382a14b 100644
--- a/webapp/i18n/en.json
+++ b/webapp/i18n/en.json
@@ -446,6 +446,8 @@
   "tutorial_tip.out": "Opt out of these tips.",
   "tutorial_tip.seen": "Seen this before?",
   "statusProperty.configDialog.title": "Edit Statuses",
+  "statusProperty.configDialog.inProgress.emptyText": "Drag statuses here to consider tasks with these statuses “in progress”",
+  "statusProperty.configDialog.complete.emptyText": "Drag statuses here to consider tasks with these statuses ”Done”",
   "statusProperty.configDialog.subTitle": "Categorise your status values to represent what each value represents",
   "generic.cancel": "Cancel",
   "generic.save": "Save"
diff --git a/webapp/src/components/shareBoard/shareBoardButton.tsx b/webapp/src/components/shareBoard/shareBoardButton.tsx
index 15849ee39..03144fcaa 100644
--- a/webapp/src/components/shareBoard/shareBoardButton.tsx
+++ b/webapp/src/components/shareBoard/shareBoardButton.tsx
@@ -16,6 +16,10 @@ import {BoardTypeOpen} from '../../blocks/board'
 
 import './shareBoardButton.scss'
 
+import ClockOutline from '../../widgets/icons/clockOutline'
+
+import CheckIcon from '../../widgets/icons/check'
+
 import ShareBoardDialog from './shareBoard'
 
 type Props = {
@@ -41,6 +45,11 @@ const ShareBoardButton = (props: Props) => {
                 {id: '1', value: 'TODO', color: 'propColorYellow'},
                 {id: '1', value: 'Pending Specs', color: 'propColorGray'},
             ],
+            emptyState: {
+                icon: (<div/>),
+                color: '#FF0000',
+                text: (<span>{'Hello world'}</span>),
+            },
         },
         {
             id: '2',
@@ -63,15 +72,36 @@ const ShareBoardButton = (props: Props) => {
                 {id: '1', value: 'Awaiting Cherrypick Awaiting Cherrypick Awaiting Cherrypick Awaiting Cherrypick Awaiting Cherrypick', color: 'propColorOrange'},
                 {id: '1', value: 'Awaiting Cherrypick Awaiting Cherrypick Awaiting Cherrypick Awaiting Cherrypick Awaiting Cherrypick', color: 'propColorOrange'},
             ],
+            emptyState: {
+                icon: (<ClockOutline/>),
+                color: '--away-indicator-rgb',
+                text: (
+                    <FormattedMessage
+                        id='statusProperty.configDialog.inProgress.emptyText'
+                        defaultMessage='Drag statuses here to consider tasks with these statuses “in progress”'
+                    />
+                ),
+            },
         },
         {
             id: '3',
             title: 'Completed',
             options: [
-                {id: '1', value: 'Done', color: 'propColorPink'},
-                {id: '1', value: 'Branch Cut', color: 'propColorGreen'},
-                {id: '1', value: 'Released', color: 'propColorDefault'},
+
+                // {id: '1', value: 'Done', color: 'propColorPink'},
+                // {id: '1', value: 'Branch Cut', color: 'propColorGreen'},
+                // {id: '1', value: 'Released', color: 'propColorDefault'},
             ],
+            emptyState: {
+                icon: (<CheckIcon/>),
+                color: '--online-indicator-rgb',
+                text: (
+                    <FormattedMessage
+                        id='statusProperty.configDialog.complete.emptyText'
+                        defaultMessage='Drag statuses here to consider tasks with these statuses ”Done”'
+                    />
+                ),
+            },
         },
     ]
 
diff --git a/webapp/src/components/standardProperties/statusProperty/editStatusDialog.scss b/webapp/src/components/standardProperties/statusProperty/editStatusDialog.scss
index b79cef8dd..7d653374c 100644
--- a/webapp/src/components/standardProperties/statusProperty/editStatusDialog.scss
+++ b/webapp/src/components/standardProperties/statusProperty/editStatusDialog.scss
@@ -81,6 +81,33 @@
                     margin-top: 3px;
                 }
             }
+
+            .emptyColumnPlaceholder {
+                margin: 0 16px;
+                text-align: center;
+                display: flex;
+                flex-direction: column;
+                gap: 8px;
+                padding: 6px 0;
+                
+                .icon-wrapper {
+                    width: 40px;
+                    height: 40px;
+                    border-radius: 50%;
+                    margin: 0 auto;
+                    padding-top: 7px;
+
+                    .CompassIcon {
+                        font-size: 18px;
+                        opacity: 1;
+                        display: block;
+                        height: 18px;
+                    }
+                }
+            }
         }
     }
-}
\ No newline at end of file
+}
+
+
+  
diff --git a/webapp/src/components/standardProperties/statusProperty/editStatusDialog.tsx b/webapp/src/components/standardProperties/statusProperty/editStatusDialog.tsx
index bc2ae64d4..14a9ae93b 100644
--- a/webapp/src/components/standardProperties/statusProperty/editStatusDialog.tsx
+++ b/webapp/src/components/standardProperties/statusProperty/editStatusDialog.tsx
@@ -14,10 +14,17 @@ import Label from '../../../widgets/label'
 import {IPropertyOption} from '../../../blocks/board'
 import DragHandle from '../../../widgets/icons/dragHandle'
 
+export type StatusCategoryEmptyState = {
+    icon: JSX.Element
+    color: string
+    text: JSX.Element
+}
+
 export type StatusCategory = {
     id: string
     title: string
     options: IPropertyOption[]
+    emptyState: StatusCategoryEmptyState
 }
 
 type Props = {
@@ -53,6 +60,25 @@ const EditStatusPropertyDialog = (props: Props): JSX.Element => {
         )
     }
 
+    const generateEmptyColumnPlaceholder = (categoryEmptyState: StatusCategoryEmptyState): JSX.Element => {
+        return (
+            <div className='emptyColumnPlaceholder'>
+                <div
+                    className='icon-wrapper'
+                    style={{
+                        backgroundColor: `rgba(var(${categoryEmptyState.color}), 0.2)`,
+                        color: `rgba(var(${categoryEmptyState.color}), 1)`,
+                    }}
+                >
+                    {categoryEmptyState.icon}
+                </div>
+                <div className='placeholderText text-75'>
+                    {categoryEmptyState.text}
+                </div>
+            </div>
+        )
+    }
+
     return (
         <ActionDialog
             onClose={props.onClose}
@@ -82,7 +108,14 @@ const EditStatusPropertyDialog = (props: Props): JSX.Element => {
                             </div>
                             <div className='categorySwimlane_ValueArea'>
                                 <div className='overflowWrapper'>
-                                    {valueCategory.options.map((option) => generateValueRow(option))}
+                                    {
+                                        valueCategory.options.length === 0 &&
+                                        generateEmptyColumnPlaceholder(valueCategory.emptyState)
+                                    }
+                                    {
+                                        valueCategory.options.length > 0 &&
+                                        valueCategory.options.map((option) => generateValueRow(option))
+                                    }
                                 </div>
                             </div>
                         </div>