diff --git a/VDS/Components/Buttons/Button/Button.swift b/VDS/Components/Buttons/Button/Button.swift
index e68c818d..ee2c0ab5 100644
--- a/VDS/Components/Buttons/Button/Button.swift
+++ b/VDS/Components/Buttons/Button/Button.swift
@@ -172,7 +172,7 @@ open class Button: ButtonBase, Useable {
     }
 }
 
-fileprivate extension ButtonSize {
+internal extension ButtonSize {
     
     var height: CGFloat {
         switch self {
diff --git a/VDS/Components/Buttons/ButtonGroup/ButtonGroup.swift b/VDS/Components/Buttons/ButtonGroup/ButtonGroup.swift
index 916609e4..5e045228 100644
--- a/VDS/Components/Buttons/ButtonGroup/ButtonGroup.swift
+++ b/VDS/Components/Buttons/ButtonGroup/ButtonGroup.swift
@@ -32,6 +32,9 @@ open class ButtonGroup: View, UICollectionViewDataSource, UICollectionViewDelega
     //If provided, width of Button components will be rendered based on this value. If omitted, default button widths are rendered.
     open var buttonWidth: CGFloat? {
         didSet {
+            if let buttonWidth, let buttonPercentage, buttonWidth > 0, buttonPercentage > 0{
+                self.buttonPercentage = nil
+            }
             buttons.forEach { button in
                 if let button = button as? Button {
                     button.width = buttonWidth
@@ -40,6 +43,23 @@ open class ButtonGroup: View, UICollectionViewDataSource, UICollectionViewDelega
             didChange()
         }
     }
+    
+    var _buttonPercentage: CGFloat?
+    open var buttonPercentage: CGFloat? {
+        get { _buttonPercentage }
+        set {
+            if let newValue, newValue <= 100.0, rowQuantity > 0 {
+                _buttonPercentage = newValue
+            } else {
+                _buttonPercentage = nil
+            }
+            if let buttonWidth, let buttonPercentage, buttonWidth > 0, buttonPercentage > 0 {
+                self.buttonWidth = nil
+            }
+            positionLayout.buttonPercentage = buttonPercentage
+            didChange()
+        }
+    }
 
     //--------------------------------------------------
     // MARK: - Private Properties
diff --git a/VDS/Components/Buttons/ButtonGroup/ButtonGroupPositionLayout.swift b/VDS/Components/Buttons/ButtonGroup/ButtonGroupPositionLayout.swift
index 5ab5fe37..d7f34f4e 100644
--- a/VDS/Components/Buttons/ButtonGroup/ButtonGroupPositionLayout.swift
+++ b/VDS/Components/Buttons/ButtonGroup/ButtonGroupPositionLayout.swift
@@ -21,6 +21,8 @@ class ButtonCollectionViewRow {
     var hasButtons: Bool {
         attributes.contains(where: { $0.isButton })
     }
+    
+    var buttonPercentage: CGFloat?
 
     var rowWidth: CGFloat {
         return attributes.reduce(0, { result, attribute -> CGFloat in
@@ -50,6 +52,54 @@ class ButtonCollectionViewRow {
         let height = rowHeight
         attributes.last?.spacing = 0
         
+        //check to see if you have buttons and there is a percentage
+        if let buttonPercentage, hasButtons, buttonPercentage > 0 {
+            
+            var usedSpace = 0.0
+            //get the width for the buttons
+            for attribute in attributes {
+                if !attribute.isButton {
+                    usedSpace += attribute.frame.width
+                }
+                usedSpace += attribute.spacing
+            }
+            let buttonAvailableSpace = collectionViewWidth - usedSpace
+            let realPercentage = (buttonPercentage / 100)
+            let buttonWidth =  realPercentage * buttonAvailableSpace
+//            print("buttonPercentage      :\(realPercentage)")
+//            print("collectionView   width:\(collectionViewWidth)")
+//            print("usedSpace        width:\(usedSpace)")
+//            print("button available width:\(buttonAvailableSpace)")
+            print("each button      width:\(buttonWidth)\n")
+            print("minimum          widht:\(ButtonSize.large.minimumWidth)")
+            // test sizing
+            var testSize = 0.0
+            var buttonCount = 0.0
+            for attribute in attributes {
+                if attribute.isButton {
+                    testSize += buttonWidth
+                    buttonCount += 1
+                }
+            }
+            
+            if buttonWidth >= ButtonSize.large.minimumWidth {
+                if testSize <= buttonAvailableSpace {
+                    for attribute in attributes {
+                        if attribute.isButton {
+                            attribute.frame.size.width = buttonWidth
+                        }
+                    }
+                } else {
+                    let distributedSize = buttonAvailableSpace / buttonCount
+                    for attribute in attributes {
+                        if attribute.isButton {
+                            attribute.frame.size.width = distributedSize
+                        }
+                    }
+                }
+            }
+        }
+        
         switch position {
         case .left:
             break
@@ -96,6 +146,7 @@ class ButtonGroupPositionLayout: UICollectionViewLayout {
     var layoutHeight: CGFloat = 0.0
     var position: ButtonPosition = .left
     var rowQuantity: Int = 0
+    var buttonPercentage: CGFloat?
     
     private var itemCache: [ButtonLayoutAttributes] = []
     
@@ -205,7 +256,10 @@ class ButtonGroupPositionLayout: UICollectionViewLayout {
         }
         
         // recalculate rows x based off of positions
-        rows.forEach { $0.layout(for: position, with: collectionViewWidth) }
+        rows.forEach {
+            $0.buttonPercentage = buttonPercentage
+            $0.layout(for: position, with: collectionViewWidth)
+        }
         
         let rowAttributes = rows.flatMap { $0.attributes }
         itemCache = rowAttributes