diff --git a/webapp/src/components/cardDetail.scss b/webapp/src/components/cardDetail.scss
index b3f2b58f4..62590c7ec 100644
--- a/webapp/src/components/cardDetail.scss
+++ b/webapp/src/components/cardDetail.scss
@@ -35,5 +35,8 @@
         width: 150px;
         margin-right: 5px;
         color: #909090;
+        &.add-property {
+            color: rgba(55, 53, 37, 0.4);
+        }
     }
 }
diff --git a/webapp/src/components/cardDetail.tsx b/webapp/src/components/cardDetail.tsx
index e03b66659..d1a6268f6 100644
--- a/webapp/src/components/cardDetail.tsx
+++ b/webapp/src/components/cardDetail.tsx
@@ -211,13 +211,17 @@ class CardDetail extends React.Component<Props, State> {
                         })}
 
                         <div
-                            className='octo-button octo-propertyname'
-                            style={{textAlign: 'left', width: '150px', color: 'rgba(55, 53, 37, 0.4)'}}
+                            className='octo-button octo-propertyname add-property'
                             onClick={async () => {
                                 // TODO: Show UI
                                 await mutator.insertPropertyTemplate(boardTree)
                             }}
-                        >+ Add a property</div>
+                        >
+                            <FormattedMessage
+                                id='CardDetail.add-property'
+                                defaultMessage='+ Add a property'
+                            />
+                        </div>
                     </div>
 
                     {/* Comments */}
diff --git a/webapp/src/components/contentBlock.tsx b/webapp/src/components/contentBlock.tsx
index f24a7b708..d534d37fd 100644
--- a/webapp/src/components/contentBlock.tsx
+++ b/webapp/src/components/contentBlock.tsx
@@ -4,13 +4,15 @@
 import React from 'react'
 
 import {IOrderedBlock} from '../blocks/orderedBlock'
-import {Menu as OldMenu, MenuOption} from '../menu'
 import {CardTree} from '../viewModel/cardTree'
 import {OctoUtils} from '../octoUtils'
 import mutator from '../mutator'
 import {Utils} from '../utils'
 import {MutableTextBlock} from '../blocks/textBlock'
 
+import Menu from '../widgets/menu'
+import MenuWrapper from '../widgets/menuWrapper'
+
 import {MarkdownEditor} from './markdownEditor'
 
 type Props = {
@@ -24,98 +26,76 @@ class ContentBlock extends React.Component<Props> {
         return true
     }
 
-    componentWillUnmount() {
-        OldMenu.shared.hide()
-    }
-
-    private showContentBlockMenu(e: React.MouseEvent) {
-        const {cardId, cardTree, block} = this.props
-        const index = cardTree.contents.indexOf(block)
-
-        const options: MenuOption[] = []
-        if (index > 0) {
-            options.push({id: 'moveUp', name: 'Move up'})
-        }
-        if (index < cardTree.contents.length - 1) {
-            options.push({id: 'moveDown', name: 'Move down'})
-        }
-
-        options.push(
-            {id: 'insertAbove', name: 'Insert above', type: 'submenu'},
-            {id: 'delete', name: 'Delete'},
-        )
-
-        OldMenu.shared.options = options
-        OldMenu.shared.subMenuOptions.set('insertAbove', [
-            {id: 'text', name: 'Text'},
-            {id: 'image', name: 'Image'},
-        ])
-        OldMenu.shared.onMenuClicked = (optionId: string, type?: string) => {
-            switch (optionId) {
-            case 'moveUp': {
-                if (index < 1) {
-                    Utils.logError(`Unexpected index ${index}`); return
-                }
-                const previousBlock = cardTree.contents[index - 1]
-                const newOrder = OctoUtils.getOrderBefore(previousBlock, cardTree.contents)
-                Utils.log(`moveUp ${newOrder}`)
-                mutator.changeOrder(block, newOrder, 'move up')
-                break
-            }
-            case 'moveDown': {
-                if (index >= cardTree.contents.length - 1) {
-                    Utils.logError(`Unexpected index ${index}`); return
-                }
-                const nextBlock = cardTree.contents[index + 1]
-                const newOrder = OctoUtils.getOrderAfter(nextBlock, cardTree.contents)
-                Utils.log(`moveDown ${newOrder}`)
-                mutator.changeOrder(block, newOrder, 'move down')
-                break
-            }
-            case 'insertAbove-text': {
-                const newBlock = new MutableTextBlock()
-                newBlock.parentId = cardId
-
-                // TODO: Handle need to reorder all blocks
-                newBlock.order = OctoUtils.getOrderBefore(block, cardTree.contents)
-                Utils.log(`insert block ${block.id}, order: ${block.order}`)
-                mutator.insertBlock(newBlock, 'insert card text')
-                break
-            }
-            case 'insertAbove-image': {
-                Utils.selectLocalFile(
-                    (file) => {
-                        mutator.createImageBlock(cardId, file, OctoUtils.getOrderBefore(block, cardTree.contents))
-                    },
-                    '.jpg,.jpeg,.png')
-
-                break
-            }
-            case 'delete': {
-                mutator.deleteBlock(block)
-                break
-            }
-            }
-        }
-        OldMenu.shared.showAtElement(e.target as HTMLElement)
-    }
-
     public render(): JSX.Element {
-        const {block} = this.props
+        const {cardId, cardTree, block} = this.props
         if (block.type !== 'text' && block.type !== 'image') {
             return null
         }
+        const index = cardTree.contents.indexOf(block)
         return (
             <div className='octo-block octo-hover-container'>
                 <div className='octo-block-margin'>
-                    <div
-                        className='octo-button octo-hovercontrol square octo-hover-item'
-                        onClick={(e) => {
-                            this.showContentBlockMenu(e)
-                        }}
-                    >
-                        <div className='imageOptions'/>
-                    </div>
+                    <MenuWrapper>
+                        <div className='octo-button octo-hovercontrol square octo-hover-item'><div className='imageOptions'/></div>
+                        <Menu>
+                            {index > 0 &&
+                                <Menu.Text
+                                    id='moveUp'
+                                    name='Move up'
+                                    onClick={() => {
+                                        const previousBlock = cardTree.contents[index - 1]
+                                        const newOrder = OctoUtils.getOrderBefore(previousBlock, cardTree.contents)
+                                        Utils.log(`moveUp ${newOrder}`)
+                                        mutator.changeOrder(block, newOrder, 'move up')
+                                    }}
+                                />}
+                            {index < (cardTree.contents.length - 1) &&
+                                <Menu.Text
+                                    id='moveDown'
+                                    name='Move down'
+                                    onClick={() => {
+                                        const nextBlock = cardTree.contents[index + 1]
+                                        const newOrder = OctoUtils.getOrderAfter(nextBlock, cardTree.contents)
+                                        Utils.log(`moveDown ${newOrder}`)
+                                        mutator.changeOrder(block, newOrder, 'move down')
+                                    }}
+                                />}
+                            <Menu.SubMenu
+                                id='insertAbove'
+                                name='Insert above'
+                            >
+                                <Menu.Text
+                                    id='text'
+                                    name='Text'
+                                    onClick={() => {
+                                        const newBlock = new MutableTextBlock()
+                                        newBlock.parentId = cardId
+
+                                        // TODO: Handle need to reorder all blocks
+                                        newBlock.order = OctoUtils.getOrderBefore(block, cardTree.contents)
+                                        Utils.log(`insert block ${block.id}, order: ${block.order}`)
+                                        mutator.insertBlock(newBlock, 'insert card text')
+                                    }}
+                                />
+                                <Menu.Text
+                                    id='image'
+                                    name='Image'
+                                    onClick={() => {
+                                        Utils.selectLocalFile(
+                                            (file) => {
+                                                mutator.createImageBlock(cardId, file, OctoUtils.getOrderBefore(block, cardTree.contents))
+                                            },
+                                            '.jpg,.jpeg,.png')
+                                    }}
+                                />
+                            </Menu.SubMenu>
+                            <Menu.Text
+                                id='delete'
+                                name='Delete'
+                                onClick={() => mutator.deleteBlock(block)}
+                            />
+                        </Menu>
+                    </MenuWrapper>
                 </div>
                 {block.type === 'text' &&
                     <MarkdownEditor