diff --git a/ui/src/views/list/TodoBoard.tsx b/ui/src/views/list/TodoBoard.tsx
index e1590573..aa5071ff 100644
--- a/ui/src/views/list/TodoBoard.tsx
+++ b/ui/src/views/list/TodoBoard.tsx
@@ -27,7 +27,7 @@ import {
 import { useListFormCustomDataSource } from './useListFormCustomDataSource'
 import { useListFormStateStoring } from './useListFormStateStoring'
 import { useListFormGridDto } from './shared/hooks'
-import { Avatar, Rate } from '@/components/ui'
+import { Avatar, Dialog, Rate } from '@/components/ui'
 import { getUsers } from '@/services/identity.service'
 import { getTenants } from '@/services/tenant.service'
 import { useLocalization } from '@/utils/hooks/useLocalization'
@@ -432,6 +432,23 @@ const TodoBoardContent = ({
           }}
         />
       )}
+      {canAdd && (
+        <ToolbarItem
+          location="after"
+          widget="dxButton"
+          locateInMenu="auto"
+          showText="always"
+          options={{
+            icon: 'plus',
+            text: translate('::App.ListFormTodoBoard.AddNewColumn'),
+            hint: translate('::App.ListFormTodoBoard.AddNewColumn'),
+            onClick: () => {
+              setIsAddingStatus(true)
+              setStatusError('')
+            },
+          }}
+        />
+      )}
       <ToolbarItem
         location="after"
         widget="dxButton"
@@ -606,6 +623,12 @@ const TodoBoardContent = ({
     setColumnDropTarget(undefined)
   }
 
+  const closeAddStatus = () => {
+    setIsAddingStatus(false)
+    setNewStatusName('')
+    setStatusError('')
+  }
+
   const addStatus = () => {
     if (!canAdd) return
     const nextName = newStatusName.trim()
@@ -1147,7 +1170,7 @@ const TodoBoardContent = ({
     <div className="pb-3">
       {renderToolbar()}
       <div className="overflow-x-auto">
-        <div className="flex min-h-[420px] min-w-max gap-3">
+        <div className="flex min-h-[420px] min-w-max">
           {statuses.map((status) => {
             const items = itemsForStatus(status)
             const isAdding = newTodoStatus === status
@@ -1554,95 +1577,53 @@ const TodoBoardContent = ({
             )
           })}
           {canAdd && (
-            <section className="group w-[310px] shrink-0 rounded-xl border-2 border-transparent bg-gray-50 p-2 dark:bg-gray-900/60">
-              <header className="mb-2 flex min-h-9 items-center gap-2 px-1">
-                <FaGripVertical className="text-gray-300 dark:text-gray-700" />
-                <h3 className="font-semibold text-gray-500 dark:text-gray-400">
-                  {translate('::App.ListFormTodoBoard.NewColumn')}
-                </h3>
-                <span className="ml-auto rounded-full bg-gray-200 px-2 py-0.5 text-xs text-gray-500 dark:bg-gray-700 dark:text-gray-400">
-                  0
-                </span>
-                <button
-                  type="button"
-                  className="rounded p-1 text-gray-400 hover:bg-blue-100 hover:text-blue-600 dark:hover:bg-blue-950"
-                  title={translate('::App.ListFormTodoBoard.AddNewColumn')}
-                  onClick={() => {
-                    setIsAddingStatus(true)
+            <Dialog
+              isOpen={isAddingStatus}
+              width={420}
+              onClose={closeAddStatus}
+              onRequestClose={closeAddStatus}
+            >
+              <h5 className="mb-4">{translate('::App.ListFormTodoBoard.AddNewColumn')}</h5>
+              <form
+                onSubmit={(event) => {
+                  event.preventDefault()
+                  addStatus()
+                }}
+              >
+                <label className="mb-2 block text-sm font-semibold" htmlFor="new-kanban-name">
+                  {translate('::App.ListFormTodoBoard.NewColumnName')}
+                </label>
+                <Input
+                  unstyle
+                  autoFocus
+                  id="new-kanban-name"
+                  className="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 dark:border-gray-600 dark:bg-gray-800"
+                  placeholder={translate('::App.ListFormTodoBoard.NewColumnPlaceholder')}
+                  value={newStatusName}
+                  onChange={(event) => {
+                    setNewStatusName(event.target.value)
                     setStatusError('')
                   }}
-                >
-                  <FaPlus />
-                </button>
-              </header>
-              <div className="h-1 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700" />
-              <div className="mt-3">
-                {isAddingStatus ? (
-                  <form
-                    className="rounded-lg border border-blue-300 bg-white p-3 shadow-sm dark:border-blue-800 dark:bg-gray-800"
-                    onSubmit={(event) => {
-                      event.preventDefault()
-                      addStatus()
-                    }}
-                  >
-                    <label className="mb-2 block text-sm font-semibold" htmlFor="new-kanban-name">
-                      {translate('::App.ListFormTodoBoard.NewColumnName')}
-                    </label>
-                    <Input
-                      unstyle
-                      autoFocus
-                      id="new-kanban-name"
-                      className="w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/20 dark:border-gray-600 dark:bg-gray-800"
-                      placeholder={translate('::App.ListFormTodoBoard.NewColumnPlaceholder')}
-                      value={newStatusName}
-                      onChange={(event) => {
-                        setNewStatusName(event.target.value)
-                        setStatusError('')
-                      }}
-                      onKeyDown={(event) => {
-                        if (event.key === 'Escape') {
-                          setIsAddingStatus(false)
-                          setNewStatusName('')
-                          setStatusError('')
-                        }
-                      }}
-                    />
-                    {statusError && <p className="mt-2 text-xs text-red-500">{statusError}</p>}
-                    <div className="mt-3 flex gap-2">
-                      <button
-                        type="submit"
-                        className="rounded-lg bg-blue-600 px-3 py-2 text-xs font-semibold text-white hover:bg-blue-700 disabled:opacity-40"
-                        disabled={!newStatusName.trim()}
-                      >
-                        {translate('::App.ListFormTodoBoard.AddColumn')}
-                      </button>
-                      <button
-                        type="button"
-                        className="rounded-lg px-3 py-2 text-xs font-semibold text-gray-500 hover:bg-gray-200 dark:hover:bg-gray-800"
-                        onClick={() => {
-                          setIsAddingStatus(false)
-                          setNewStatusName('')
-                          setStatusError('')
-                        }}
-                      >
-                        {translate('::App.Platform.Cancel')}
-                      </button>
-                    </div>
-                  </form>
-                ) : (
+                />
+                {statusError && <p className="mt-2 text-xs text-red-500">{statusError}</p>}
+                <div className="mt-6 flex justify-end gap-2">
                   <button
                     type="button"
-                    className="flex min-h-24 w-full items-center justify-center gap-2 rounded-lg border-2 border-dashed border-gray-200 px-4 text-sm font-medium text-gray-400 transition hover:border-blue-400 hover:bg-blue-50 hover:text-blue-600 dark:border-gray-700 dark:hover:bg-blue-950/20"
-                    onClick={() => {
-                      setIsAddingStatus(true)
-                      setStatusError('')
-                    }}
+                    className="rounded-lg px-3 py-2 text-xs font-semibold text-gray-500 hover:bg-gray-200 dark:hover:bg-gray-800"
+                    onClick={closeAddStatus}
                   >
-                    <FaPlus /> {translate('::App.ListFormTodoBoard.AddNewColumn')}
+                    {translate('::App.Platform.Cancel')}
                   </button>
-                )}
-              </div>
-            </section>
+                  <button
+                    type="submit"
+                    className="rounded-lg bg-blue-600 px-3 py-2 text-xs font-semibold text-white hover:bg-blue-700 disabled:opacity-40"
+                    disabled={!newStatusName.trim()}
+                  >
+                    {translate('::App.ListFormTodoBoard.AddColumn')}
+                  </button>
+                </div>
+              </form>
+            </Dialog>
           )}
         </div>
       </div>