diff --git a/BetButton.qml b/BetButton.qml
new file mode 100644
index 0000000..390a176
--- /dev/null
+++ b/BetButton.qml
@@ -0,0 +1,88 @@
+import QtQuick
+import QtQuick.Controls
+
+import roulette
+
+Item {
+    required property int betType
+    required property int index_
+    required property int offsetX
+    required property int offsetY
+
+    id: betButton
+
+    Rectangle {
+        id: selected
+        visible: true
+        height: parent.height
+        width: parent.width
+        border.color: "blue"
+        border.width: 0
+
+        color:  {
+            if (rouletteTable.numberOfBets < 2 || border.width == 2) {
+                if (tapHandler.pressed) {
+                    "#AA999999"
+                } else if (hoverHandler.hovered) {
+                    "#AAEEEEEE"
+                } else {
+                    "#00000000"
+                }
+            } else {
+                "#00000000"
+            }
+        }
+
+        HoverHandler {
+            id: hoverHandler
+        }
+        TapHandler {
+            id: tapHandler
+
+            onTapped: {
+                if (rouletteTable.numberOfBets < 2 && parent.border.width == 0) {
+                    parent.border.width = 2
+                    roulette.showBetInputDialog(betType, index_, betButton.x + offsetX,
+                    betButton.y + offsetY)
+                } else if (parent.border.width == 2) {
+                    parent.border.width = 0
+                    PlayerAreaModel.removeBet(betType, index_)
+                    rouletteTable.numberOfBets -= 1
+                }
+            }
+        }
+
+        Connections {
+            target: PlayerAreaModel
+
+            function onFocusedPlayerChanged(b1, n1, b2, n2) {
+                if (b1 == betType && n1 == index_) {
+                    if (selected.border.width != 0) {
+                        rouletteTable.numberOfBets -=1
+                    }
+
+                    selected.border.width = 2;
+                    rouletteTable.numberOfBets += 1
+                } else if (b2 == betType && n2 == index_) {
+                    if (selected.border.width != 0) {
+                        rouletteTable.numberOfBets -=1
+                    }
+
+                    selected.border.width = 2;
+                    rouletteTable.numberOfBets += 1
+                } else {
+                    if (selected.border.width != 0) {
+                        rouletteTable.numberOfBets -=1
+                    }
+                    selected.border.width = 0;
+                }
+            }
+
+            function onBetCanceled(b, n) {
+                if (b == betType && index_ == n) {
+                    selected.border.width = 0
+                }
+            }
+        }
+    }
+}
diff --git a/BetInputDialog.qml b/BetInputDialog.qml
index 8fda10f..e686a1a 100644
--- a/BetInputDialog.qml
+++ b/BetInputDialog.qml
@@ -47,8 +47,8 @@ Dialog {
     }
 
     onActiveFocusChanged: {
-        dialog.x = 120 + squareX
-        dialog.y = 60 + squareY
+        dialog.x = squareX
+        dialog.y = squareY
     }
 
     onAccepted: {
diff --git a/CMakeLists.txt b/CMakeLists.txt
index bbd58ad..9d9c11b 100644
--- a/CMakeLists.txt
+++ b/CMakeLists.txt
@@ -35,6 +35,7 @@ qt_add_qml_module(roulette-payout
     QML_FILES
         Root.qml
         BetInputDialog.qml
+        BetButton.qml
         PlayerAreaView.qml
         Roulette.qml
         StreetBetsView.qml
diff --git a/Columns.qml b/Columns.qml
index fa54c15..162df41 100644
--- a/Columns.qml
+++ b/Columns.qml
@@ -1,6 +1,5 @@
 import QtQuick
 import QtQuick.Layouts
-import QtQuick.Controls
 
 import roulette
 
@@ -20,83 +19,16 @@ Item {
             model: 3
 
             Item {
-
-                id: betButton
                 height: 43
                 width: 35
 
-                Rectangle {
-                    id: selected
-                    visible: true
+                BetButton {
+                    index_: index
+                    betType: 10
                     height: parent.height
                     width: parent.width
-                    border.color: "blue"
-                    border.width: 0
-
-                    color: {
-                        if (rouletteTable.numberOfBets < 2 || border.width == 2) {
-                            if (tapHandler1.pressed) {
-                                "#AA999999"
-                            } else if (hoverHandler.hovered) {
-                                "#AAEEEEEE"
-                            } else {
-                                "#00000000"
-                            }
-                        } else {
-                            "#00000000"
-                        }
-                    }
-
-                    HoverHandler {
-                        id: hoverHandler
-                    }
-                    TapHandler {
-                        id: tapHandler1
-
-                        onTapped: {
-                            if (rouletteTable.numberOfBets < 2 && parent.border.width == 0) {
-                                parent.border.width = 2
-                                roulette.showBetInputDialog(PlayerAreaModel.COLUMN, index, betButton.x, betButton.y)
-                            } else if (parent.border.width == 2) {
-                                parent.border.width = 0
-                                PlayerAreaModel.removeBet(PlayerAreaModel.COLUMN, index)
-                                rouletteTable.numberOfBets -= 1
-                            }
-                        }
-                    }
-
-                    Connections {
-                        target: PlayerAreaModel
-
-                        function onFocusedPlayerChanged(b1, n1, b2, n2) {
-                            if (b1 == PlayerAreaModel.COLUMN && n1 == index) {
-                                if (selected.border.width != 0) {
-                                    rouletteTable.numberOfBets -=1
-                                }
-
-                                selected.border.width = 2;
-                                rouletteTable.numberOfBets += 1
-                            } else if (b2 == PlayerAreaModel.COLUMN && n2 == index) {
-                                if (selected.border.width != 0) {
-                                    rouletteTable.numberOfBets -=1
-                                }
-
-                                selected.border.width = 2;
-                                rouletteTable.numberOfBets += 1
-                            } else {
-                                if (selected.border.width != 0) {
-                                    rouletteTable.numberOfBets -=1
-                                }
-                                selected.border.width = 0;
-                            }
-                        }
-
-                        function onBetCanceled(b, n) {
-                            if (b == PlayerAreaModel.COLUMN && index == n) {
-                                selected.border.width = 0
-                            }
-                        }
-                    }
+                    offsetX: 510
+                    offsetY: 110
                 }
             }
         }
diff --git a/StreetBetsView.qml b/StreetBetsView.qml
index 1cf2c46..ad85d27 100644
--- a/StreetBetsView.qml
+++ b/StreetBetsView.qml
@@ -23,90 +23,21 @@ Item {
         Repeater {
             model: 12
 
+            /* 
+             * This item needs to be here because BetButton can't inherit 
+             * "index" from Repeater even though it is just a QItem itself
+             */
             Item {
-
-                id: betButton
                 height: 45
                 width: 35
 
-                Rectangle {
-                    id: selected
-                    visible: true
+                BetButton {
+                    index_: index
+                    betType: 8
                     height: parent.height
                     width: parent.width
-                    border.color: "blue"
-                    border.width: 0
-
-                    color: {
-                        if (rouletteTable.numberOfBets < 2 || border.width == 2) {
-                            if (tapHandler1.pressed) {
-                                "#AA999999"
-                            } else if (hoverHandler.hovered) {
-                                "#AAEEEEEE"
-                            } else {
-                                "#00000000"
-                            }
-                        } else {
-                            "#00000000"
-                        }
-                    }
-
-                    HoverHandler {
-                        id: hoverHandler
-                    }
-                    TapHandler {
-                        id: tapHandler1
-
-                        onTapped: {
-                            if (rouletteTable.numberOfBets < 2 && parent.border.width == 0) {
-                                parent.border.width = 2
-                                /* this is where we create the dialog box on demand */
-                                roulette.showBetInputDialog(PlayerAreaModel.STREET, index, betButton.x, betButton.y)
-                            } else if (parent.border.width == 2) {
-                                parent.border.width = 0
-                                PlayerAreaModel.removeBet(PlayerAreaModel.STREET, index)
-                                rouletteTable.numberOfBets -= 1
-                            }
-                        }
-                    }
-
-                    /* 
-                     * PlayerAreaModel is a singleton (AKA global) object, and Connections is used
-                     * to make these "onReceivedSignal" slots to do something after PlayerAreaModel
-                     * acts
-                     */
-                    Connections {
-                        target: PlayerAreaModel
-
-                        function onFocusedPlayerChanged(b1, n1, b2, n2) {
-                            if (b1 == PlayerAreaModel.STREET && n1 == index) {
-                                if (selected.border.width != 0) {
-                                    rouletteTable.numberOfBets -=1
-                                }
-
-                                selected.border.width = 2;
-                                rouletteTable.numberOfBets += 1
-                            } else if (b2 == PlayerAreaModel.STREET && n2 == index) {
-                                if (selected.border.width != 0) {
-                                    rouletteTable.numberOfBets -=1
-                                }
-
-                                selected.border.width = 2;
-                                rouletteTable.numberOfBets += 1
-                            } else {
-                                if (selected.border.width != 0) {
-                                    rouletteTable.numberOfBets -=1
-                                }
-                                selected.border.width = 0;
-                            }
-                        }
-
-                        function onBetCanceled(b, n) {
-                            if (b == PlayerAreaModel.STREET && index == n) {
-                                selected.border.width = 0
-                            }
-                        }
-                    }
+                    offsetX: 110
+                    offsetY: 58
                 }
             }
         }