diff --git a/VDSSample.xcodeproj/project.pbxproj b/VDSSample.xcodeproj/project.pbxproj
index 58bf04e..f1a937c 100644
--- a/VDSSample.xcodeproj/project.pbxproj
+++ b/VDSSample.xcodeproj/project.pbxproj
@@ -696,7 +696,7 @@
 				CODE_SIGN_IDENTITY = "Apple Development";
 				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
 				CODE_SIGN_STYLE = Manual;
-				CURRENT_PROJECT_VERSION = 60;
+				CURRENT_PROJECT_VERSION = 61;
 				DEVELOPMENT_TEAM = "";
 				"DEVELOPMENT_TEAM[sdk=iphoneos*]" = FCMA4QKS77;
 				GENERATE_INFOPLIST_FILE = YES;
@@ -731,7 +731,7 @@
 				CODE_SIGN_IDENTITY = "Apple Development";
 				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer";
 				CODE_SIGN_STYLE = Manual;
-				CURRENT_PROJECT_VERSION = 60;
+				CURRENT_PROJECT_VERSION = 61;
 				DEVELOPMENT_TEAM = "";
 				"DEVELOPMENT_TEAM[sdk=iphoneos*]" = FCMA4QKS77;
 				GENERATE_INFOPLIST_FILE = YES;
diff --git a/VDSSample/ViewControllers/BadgeIndicatorViewController.swift b/VDSSample/ViewControllers/BadgeIndicatorViewController.swift
index f3e57f0..69f662a 100644
--- a/VDSSample/ViewControllers/BadgeIndicatorViewController.swift
+++ b/VDSSample/ViewControllers/BadgeIndicatorViewController.swift
@@ -52,6 +52,7 @@ class  BadgeIndicatorViewController: BaseViewController<BadgeIndicator> {
     
     var textField = NumericField()
     var leadingCharacterTextField = TextField()
+    var accessibilityTextField = TextField()
     var trailingTextField = TextField()
     var hideDotSwitch = Toggle()
     var hideBorderSwitch = Toggle()
@@ -85,7 +86,8 @@ class  BadgeIndicatorViewController: BaseViewController<BadgeIndicator> {
         addFormRow(label: "Border Light", view: borderColorLightPickerSelectorView)
         addFormRow(label: "Border Dark", view: borderColorDarkPickerSelectorView)
         addFormRow(label: "Size", view: textSizePickerSelectorView)
-
+        addFormRow(label: "Accessiblity Text", view: accessibilityTextField)
+        
         dotForm.addFormRow(label: "Hide Dot", view: hideDotSwitch)
         dotForm.addFormRow(label: "Dot Size", view: dotSizeTextField)
         numberedForm.addFormRow(label: "Leading Character", view: leadingCharacterTextField)
@@ -122,6 +124,11 @@ class  BadgeIndicatorViewController: BaseViewController<BadgeIndicator> {
                 self?.component.trailingText = text
             }.store(in: &subscribers)
 
+        accessibilityTextField.textPublisher
+            .sink { [weak self] text in
+                self?.component.accessibilityText = text
+            }.store(in: &subscribers)
+
         heightTextField
             .numberPublisher
             .sink { [weak self] number in
diff --git a/VDSSample/ViewControllers/BaseViewController.swift b/VDSSample/ViewControllers/BaseViewController.swift
index 46526d9..631eeac 100644
--- a/VDSSample/ViewControllers/BaseViewController.swift
+++ b/VDSSample/ViewControllers/BaseViewController.swift
@@ -43,7 +43,7 @@ public class FormSection: UIStackView {
     }
     
     @discardableResult
-    open func addFormRow(label: String, view: UIView) -> UIView {
+    open func addFormRow(label: String, tooltip: Tooltip.TooltipModel? = nil, view: UIView) -> UIView {
         let formRow = UIStackView().with {
             $0.translatesAutoresizingMaskIntoConstraints = false
             $0.alignment = .fill
@@ -56,6 +56,10 @@ public class FormSection: UIStackView {
             $0.tag = 1
             $0.text = label
             $0.textStyle = .bodyLarge
+            $0.numberOfLines = 0
+            if let tooltip {
+                $0.addTooltip(tooltip)
+            }
         }
         
         formRow.addArrangedSubview(label)
@@ -333,10 +337,10 @@ public class BaseViewController<Component: UIView>: UIViewController, Initable ,
     }
        
     @discardableResult
-    open func addFormRow(label: String, view: UIView) -> UIView {
-        return formStackView.addFormRow(label: label, view: view)
+    open func addFormRow(label: String, tooltip: Tooltip.TooltipModel? = nil, view: UIView) -> UIView {
+        return formStackView.addFormRow(label: label,tooltip: tooltip, view: view)
     }
-
+    
     var activeTextField: UITextField?
     
     /// Called once when a view is initialized and is used to Setup additional UI or other constants and configurations.
diff --git a/VDSSample/ViewControllers/ButtonIconViewController.swift b/VDSSample/ViewControllers/ButtonIconViewController.swift
index d7f17ed..1fae6a2 100644
--- a/VDSSample/ViewControllers/ButtonIconViewController.swift
+++ b/VDSSample/ViewControllers/ButtonIconViewController.swift
@@ -241,12 +241,12 @@ class ButtonIconViewController: BaseViewController<ButtonIcon> {
     func setBadgeIndicatorModel() {
         if variantOneSwitch.isOn {
             if badgeIndicatorSwitch.isOn {
-                component.badgeIndicatorModel = ButtonIcon.BadgeIndicatorModel(kind: BadgeIndicator.Kind.simple, size: BadgeIndicator.Size.small)
+                component.badgeIndicatorModel = ButtonIcon.BadgeIndicatorModel(kind: BadgeIndicator.Kind.simple, size: BadgeIndicator.Size.small, accessibilityText: "Custom Text would go here by the developer")
             } else {
                 component.badgeIndicatorModel = nil
             }
         } else  {
-            component.badgeIndicatorModel = ButtonIcon.BadgeIndicatorModel(kind: BadgeIndicator.Kind.numbered, expandDirection: badgeIndicatorExpandDirectionPickerSelectorView.selectedItem, size: BadgeIndicator.Size.small, maximumDigits: BadgeIndicator.MaximumDigits.two, number: 999)
+            component.badgeIndicatorModel = ButtonIcon.BadgeIndicatorModel(kind: BadgeIndicator.Kind.numbered, expandDirection: badgeIndicatorExpandDirectionPickerSelectorView.selectedItem, size: BadgeIndicator.Size.small, maximumDigits: BadgeIndicator.MaximumDigits.two, number: 999, accessibilityText: "Custom Text would go here by the developer for the 999")
         }
     }
 }
diff --git a/VDSSample/ViewControllers/DropShawdowViewController.swift b/VDSSample/ViewControllers/DropShawdowViewController.swift
index 17d3733..9ef0b5d 100644
--- a/VDSSample/ViewControllers/DropShawdowViewController.swift
+++ b/VDSSample/ViewControllers/DropShawdowViewController.swift
@@ -34,9 +34,13 @@ class DropShadowViewController: BaseViewController<ShadowView> {
     var componentWrapper: UIView!
     var componentConstraints: NSLayoutConstraint.Container!
     
-    var secondView = View()
-    var thirdView = View()
+    var secondView = ShadowView()
+    var thirdView = ShadowView()
 
+    var shadowViews: [ShadowView] {
+        [component, secondView, thirdView]
+    }
+    
     lazy var backgroundColorPickerSelectorView = {
         PickerSelectorView(title: "paletteWhite",
                            picker: self.picker,
@@ -125,8 +129,8 @@ class DropShadowViewController: BaseViewController<ShadowView> {
         thirdView.width(viewSize).height(viewSize)
 
         componentWrapper.pinTop().pinLeading()
-        secondView.pinTop()
-        thirdView.pinLeading().pinBottom()
+        secondView.pinTop(VDSLayout.space2X)
+        thirdView.pinLeading(VDSLayout.space2X).pinBottom(VDSLayout.space2X)
         
         secondView.pinTrailingLessThanOrEqualTo(contentTopView.trailingAnchor)
         secondView.pinBottomLessThanOrEqualTo(contentTopView.bottomAnchor)
@@ -194,7 +198,7 @@ class DropShadowViewController: BaseViewController<ShadowView> {
 
         //shadow1
         showShadow.publisher(for: .valueChanged).sink(receiveValue: { [weak self] slider in
-            self?.component.showShadow = slider.isOn
+            self?.shadowViews.forEach { $0.showShadow = slider.isOn }
             self?.updateView()
         }).store(in: &subscribers)
         
@@ -202,7 +206,7 @@ class DropShadowViewController: BaseViewController<ShadowView> {
         opacityRange.minimumValue = 0.0
         opacityRange.value = 1.0
         opacityRange.publisher(for: .valueChanged).sink(receiveValue: { [weak self] slider in
-            self?.component.opacityRange = CGFloat(slider.value)
+            self?.shadowViews.forEach { $0.opacityRange = CGFloat(slider.value) }
             self?.updateView()
         }).store(in: &subscribers)
         
@@ -210,7 +214,7 @@ class DropShadowViewController: BaseViewController<ShadowView> {
         radiusRange.minimumValue = 0.0
         radiusRange.value = 2.0
         radiusRange.publisher(for: .valueChanged).sink(receiveValue: { [weak self] slider in
-            self?.component.radiusRange = CGFloat(slider.value)
+            self?.shadowViews.forEach { $0.radiusRange = CGFloat(slider.value) }
             self?.updateView()
         }).store(in: &subscribers)
 
@@ -218,7 +222,7 @@ class DropShadowViewController: BaseViewController<ShadowView> {
         offsetXRange.minimumValue = -20
         offsetXRange.value = 2.0
         offsetXRange.publisher(for: .valueChanged).sink(receiveValue: { [weak self] slider in
-            self?.component.offsetXRange = CGFloat(slider.value)
+            self?.shadowViews.forEach { $0.offsetXRange = CGFloat(slider.value) }
             self?.updateView()
         }).store(in: &subscribers)
         
@@ -226,13 +230,13 @@ class DropShadowViewController: BaseViewController<ShadowView> {
         offsetYRange.minimumValue = -20
         offsetYRange.value = 2.0
         offsetYRange.publisher(for: .valueChanged).sink(receiveValue: { [weak self] slider in
-            self?.component.offsetYRange = CGFloat(slider.value)
+            self?.shadowViews.forEach { $0.offsetYRange = CGFloat(slider.value) }
             self?.updateView()
         }).store(in: &subscribers)
                       
         //shadow2
         showShadow2.publisher(for: .valueChanged).sink(receiveValue: { [weak self] slider in
-            self?.component.showShadow2 = slider.isOn
+            self?.shadowViews.forEach { $0.showShadow2 = slider.isOn }
             self?.updateView()
         }).store(in: &subscribers)
         
@@ -240,7 +244,7 @@ class DropShadowViewController: BaseViewController<ShadowView> {
         opacityRange2.minimumValue = 0.0
         opacityRange2.value = 1.0
         opacityRange2.publisher(for: .valueChanged).sink(receiveValue: { [weak self] slider in
-            self?.component.opacityRange2 = CGFloat(slider.value)
+            self?.shadowViews.forEach { $0.opacityRange2 = CGFloat(slider.value) }
             self?.updateView()
         }).store(in: &subscribers)
         
@@ -248,7 +252,7 @@ class DropShadowViewController: BaseViewController<ShadowView> {
         radiusRange2.minimumValue = 0.0
         radiusRange2.value = 2.0
         radiusRange2.publisher(for: .valueChanged).sink(receiveValue: { [weak self] slider in
-            self?.component.radiusRange2 = CGFloat(slider.value)
+            self?.shadowViews.forEach { $0.radiusRange2 = CGFloat(slider.value) }
             self?.updateView()
         }).store(in: &subscribers)
 
@@ -256,7 +260,7 @@ class DropShadowViewController: BaseViewController<ShadowView> {
         offsetXRange2.minimumValue = -20
         offsetXRange2.value = 2.0
         offsetXRange2.publisher(for: .valueChanged).sink(receiveValue: { [weak self] slider in
-            self?.component.offsetXRange2 = CGFloat(slider.value)
+            self?.shadowViews.forEach { $0.offsetXRange2 = CGFloat(slider.value) }
             self?.updateView()
         }).store(in: &subscribers)
         
@@ -264,7 +268,7 @@ class DropShadowViewController: BaseViewController<ShadowView> {
         offsetYRange2.minimumValue = -20
         offsetYRange2.value = 2.0
         offsetYRange2.publisher(for: .valueChanged).sink(receiveValue: { [weak self] slider in
-            self?.component.offsetYRange2 = CGFloat(slider.value)
+            self?.shadowViews.forEach { $0.offsetYRange2 = CGFloat(slider.value) }
             self?.updateView()
         }).store(in: &subscribers)
         
@@ -281,7 +285,7 @@ class DropShadowViewController: BaseViewController<ShadowView> {
         viewRadiusRange.minimumValue = 0
         viewRadiusRange.value = 8.0
         viewRadiusRange.publisher(for: .valueChanged).sink(receiveValue: { [weak self] slider in
-            self?.component.viewRadiusRange = CGFloat(slider.value)
+            self?.shadowViews.forEach { $0.viewRadiusRange = CGFloat(slider.value) }
             self?.updateView()
         }).store(in: &subscribers)
         
@@ -310,8 +314,8 @@ class DropShadowViewController: BaseViewController<ShadowView> {
     }
     
     override func updateView() {
-        secondView.backgroundColor = .red
-        thirdView.backgroundColor = .purple
+        secondView.viewLightColor = .paletteYellow53
+        thirdView.viewLightColor = .paletteBlue46
     }
     
     func setupPicker(){
@@ -322,20 +326,21 @@ class DropShadowViewController: BaseViewController<ShadowView> {
         }
                 
         dropShadowDarkColorPickerSelectorView.onPickerDidSelect = {  [weak self] item in
-            self?.component.shadowDarkColor = item
+            self?.shadowViews.forEach { $0.shadowDarkColor = item }
         }
         
         dropShadowLightColorPickerSelectorView.onPickerDidSelect = {  [weak self] item in
-            self?.component.shadowLightColor = item
+            self?.shadowViews.forEach { $0.shadowLightColor = item }
         }
 
         dropShadow2DarkColorPickerSelectorView.onPickerDidSelect = {  [weak self] item in
-            self?.component.shadowDarkColor2 = item
+            self?.shadowViews.forEach { $0.shadowDarkColor2 = item }
         }
         
         dropShadow2LightColorPickerSelectorView.onPickerDidSelect = {  [weak self] item in
-            self?.component.shadowLightColor2 = item
+            self?.shadowViews.forEach { $0.shadowLightColor2 = item }
         }
+        
         viewLightColorPickerSelectorView.onPickerDidSelect = {  [weak self] item in
             self?.component.viewLightColor = item
         }
diff --git a/VDSSample/ViewControllers/DropdownSelectViewController.swift b/VDSSample/ViewControllers/DropdownSelectViewController.swift
index 52552c3..5d03dbe 100644
--- a/VDSSample/ViewControllers/DropdownSelectViewController.swift
+++ b/VDSSample/ViewControllers/DropdownSelectViewController.swift
@@ -75,7 +75,7 @@ class DropdownSelectViewController: BaseViewController<DropdownSelect> {
         }
         
         requiredSwitch.onChange = { [weak self] sender in
-            self?.component.required = sender.isOn
+            self?.component.isRequired = sender.isOn
         }
                 
         optionsSwitch.onChange =  { [weak self] sender in
@@ -84,7 +84,7 @@ class DropdownSelectViewController: BaseViewController<DropdownSelect> {
         }
         
         readonlySwitch.onChange = { [weak self] sender in
-            self?.component.readOnly = sender.isOn
+            self?.component.isReadOnly = sender.isOn
         }
 
         transparentBgSwitch.onChange = { [weak self] sender in
@@ -158,7 +158,7 @@ class DropdownSelectViewController: BaseViewController<DropdownSelect> {
         
         //setup UI
         disabledSwitch.isOn = !component.isEnabled
-        requiredSwitch.isOn = component.required
+        requiredSwitch.isOn = component.isRequired
         surfacePickerSelectorView.text = component.surface.rawValue
         labelTextField.text = component.labelText
         helperTextField.text = component.helperText
diff --git a/VDSSample/ViewControllers/InputFieldViewController.swift b/VDSSample/ViewControllers/InputFieldViewController.swift
index 61d5350..71fbf7e 100644
--- a/VDSSample/ViewControllers/InputFieldViewController.swift
+++ b/VDSSample/ViewControllers/InputFieldViewController.swift
@@ -19,6 +19,12 @@ class  InputFieldViewController: BaseViewController<InputField> {
                            items: InputField.HelperTextPlacement.allCases)
     }()
 
+    lazy var inputTypePickerSelectorView = {
+        PickerSelectorView(title: "",
+                           picker: self.picker,
+                           items: InputField.FieldType.allCases)
+    }()
+
     var disabledSwitch = Toggle()
     var requiredSwitch = Toggle()
     var labelTextField = TextField()
@@ -31,6 +37,31 @@ class  InputFieldViewController: BaseViewController<InputField> {
     var tooltipTitleTextField = TextField()
     var tooltipContentTextField = TextField()
     
+    //FieldType sections
+    
+    //password
+    var hidePasswordButtonTextField = TextField()
+    var showPasswordButtonTextField = TextField()
+    lazy var passwordSection = FormSection().with {
+        $0.title = "Password Settings"
+        $0.addFormRow(label: "Hide Button", view: hidePasswordButtonTextField)
+        $0.addFormRow(label: "Show Button", view: showPasswordButtonTextField)
+        $0.isHidden = true
+    }
+
+    //date
+    lazy var dateFormatPickerSelectorView = {
+        PickerSelectorView(title: "",
+                           picker: self.picker,
+                           items: InputField.DateFormat.allCases)
+    }()
+    
+    lazy var dateSection = FormSection().with {
+        $0.title = "Date Settings"
+        $0.addFormRow(label: "Date Format", view: dateFormatPickerSelectorView)
+        $0.isHidden = true
+    }
+
     override func viewDidLoad() {
         super.viewDidLoad()
         addContentTopView(view: component)
@@ -53,9 +84,13 @@ class  InputFieldViewController: BaseViewController<InputField> {
         addFormRow(label: "Width", view: widthTextField)
         addFormRow(label: "ToolTip Title", view: tooltipTitleTextField)
         addFormRow(label: "ToolTip Content", view: tooltipContentTextField)
+        addFormRow(label: "Field Type", view: inputTypePickerSelectorView)
         
+        append(section: passwordSection)
+        append(section: dateSection)
+
         requiredSwitch.onChange = { [weak self] sender in
-            self?.component.required = sender.isOn
+            self?.component.isRequired = sender.isOn
         }
 
         showErrorSwitch.onChange = { [weak self] sender in
@@ -114,12 +149,24 @@ class  InputFieldViewController: BaseViewController<InputField> {
                 self?.updateTooltip()
             }.store(in: &subscribers)
         
+        //field types
+        //password
+        hidePasswordButtonTextField
+            .textPublisher
+            .sink { [weak self] text in
+                self?.component.hidePasswordButtonText = text
+            }.store(in: &subscribers)
+
+        showPasswordButtonTextField
+            .textPublisher
+            .sink { [weak self] text in
+                self?.component.showPasswordButtonText = text
+            }.store(in: &subscribers)
     }
     
     func setupModel() {
         component.fieldType = .text
         component.width = 328
-        component.text = "Starting Text"
         component.labelText = "Street Address"
         component.helperText = "For example: 123 Verizon St"
         component.errorText = "Enter a valid address."
@@ -137,8 +184,9 @@ class  InputFieldViewController: BaseViewController<InputField> {
         //setup UI
         surfacePickerSelectorView.text = component.surface.rawValue
         helperTextPlacementPickerSelectorView.text = component.helperTextPlacement.rawValue
+        inputTypePickerSelectorView.text = component.fieldType.rawValue
         disabledSwitch.isOn = !component.isEnabled
-        requiredSwitch.isOn = component.required
+        requiredSwitch.isOn = component.isRequired
         labelTextField.text = component.labelText
         helperTextField.text = component.helperText
         showErrorSwitch.isOn = component.showError
@@ -162,6 +210,16 @@ class  InputFieldViewController: BaseViewController<InputField> {
         helperTextPlacementPickerSelectorView.onPickerDidSelect = { [weak self] item in
             self?.component.helperTextPlacement = item
         }
+        
+        inputTypePickerSelectorView.onPickerDidSelect = { [weak self] item in
+            self?.component.fieldType = item
+            self?.updateFormSections()
+        }
+        
+        dateFormatPickerSelectorView.onPickerDidSelect = { [weak self] item in
+            self?.component.dateFormat = item
+            self?.updateFormSections()
+        }
     }
     
     func updateTooltip() {
@@ -171,6 +229,38 @@ class  InputFieldViewController: BaseViewController<InputField> {
         component.tooltipModel = !title.isEmpty || !content.isEmpty ? .init(title: title,
                                                                             content: content) : nil
     }
+    
+    func updateFormSections() {
+        [passwordSection, dateSection].forEach { $0.isHidden = true }
+        switch component.fieldType {
+        case .text:
+            break
+            
+        case .number:
+            break
+            
+        case .inlineAction:
+            break
+            
+        case .password:
+            passwordSection.isHidden = false
+            
+        case .creditCard:
+            break
+            
+        case .tel:
+            break
+            
+        case .date:
+            dateSection.isHidden = false
+            
+        case .securityCode:
+            break
+            
+        @unknown default:
+            break
+        }
+    }
 }
 
 
diff --git a/VDSSample/ViewControllers/TableViewTestController.swift b/VDSSample/ViewControllers/TableViewTestController.swift
index b7b1ddd..8de4507 100644
--- a/VDSSample/ViewControllers/TableViewTestController.swift
+++ b/VDSSample/ViewControllers/TableViewTestController.swift
@@ -172,30 +172,8 @@ public class TableViewTestController: UIViewController, Initable, Surfaceable {
     }
     
     var items: [MenuComponent] {
-        all
-    }
-    
-    var all: [MenuComponent] {
         MenuViewController.items
-    }
-    
-    var batch1: [MenuComponent] {
-        [
-            MenuComponent(title: "Badge", completed: true, viewController: BadgeViewController.self),
-            MenuComponent(title: "Button", completed: true, viewController: ButtonViewController.self),
-            MenuComponent(title: "ButtonGroup", completed: true, viewController: ButtonGroupViewController.self),
-            MenuComponent(title: "Icon", completed: true, viewController: IconViewController.self),
-            MenuComponent(title: "Label", completed: true, viewController: LabelViewController.self),
-            MenuComponent(title: "Line", completed: true, viewController: LineViewController.self),
-            MenuComponent(title: "Loader", completed: true, viewController: LoaderViewController.self),
-            MenuComponent(title: "Tabs", completed: true, viewController: TabsViewController.self),
-            MenuComponent(title: "TextLink", completed: true, viewController: TextLinkViewController.self),
-            MenuComponent(title: "TextLinkCaret", completed: true, viewController: TextLinkCaretViewController.self),
-            MenuComponent(title: "TitleLockup", completed: true, viewController: TitleLockupViewController.self),
-            MenuComponent(title: "Tooltip", completed: true, viewController: TooltipViewController.self),
-            MenuComponent(title: "TrailingTooltip", completed: true, viewController: TrailingTooltipLabelViewController.self),
-        ]
-    }
+    }    
 }
 
 extension TableViewTestController : UITableViewDelegate, UITableViewDataSource {
diff --git a/VDSSample/ViewControllers/TextAreaViewController.swift b/VDSSample/ViewControllers/TextAreaViewController.swift
index 9769795..22dc701 100644
--- a/VDSSample/ViewControllers/TextAreaViewController.swift
+++ b/VDSSample/ViewControllers/TextAreaViewController.swift
@@ -55,7 +55,7 @@ class  TextAreaViewController: BaseViewController<TextArea> {
         addFormRow(label: "Min Height", view: heightPickerSelectorView)
 
         requiredSwitch.onChange = { [weak self] sender in
-            self?.component.required = sender.isOn
+            self?.component.isRequired = sender.isOn
         }
         
         showErrorSwitch.onChange = { [weak self] sender in
@@ -71,7 +71,7 @@ class  TextAreaViewController: BaseViewController<TextArea> {
         }
 
         readOnlySwitch.onChange = { [weak self] sender in
-            self?.component.readOnly = sender.isOn
+            self?.component.isReadOnly = sender.isOn
         }
         
         labelTextField
@@ -143,7 +143,7 @@ class  TextAreaViewController: BaseViewController<TextArea> {
         //setup UI
         surfacePickerSelectorView.text = component.surface.rawValue
         disabledSwitch.isOn = !component.isEnabled
-        requiredSwitch.isOn = component.required
+        requiredSwitch.isOn = component.isRequired
         labelTextField.text = component.labelText
         helperTextField.text = component.helperText
         showErrorSwitch.isOn = component.showError
diff --git a/VDSSample/ViewControllers/TileContainerViewController.swift b/VDSSample/ViewControllers/TileContainerViewController.swift
index d4e0007..7d8d176 100644
--- a/VDSSample/ViewControllers/TileContainerViewController.swift
+++ b/VDSSample/ViewControllers/TileContainerViewController.swift
@@ -50,6 +50,7 @@ class TileContainerViewController: BaseViewController<TileContainer> {
     var gradientColorsFormStackView = FormSection().with { $0.isHidden = true }
     var backgroundColor: BackgroundColor = .secondary
     var padding: Padding = .padding4X
+    var isLinkSwitch = Toggle()
     var clickableSwitch = Toggle()
     var showBackgroundImageSwitch = Toggle()
     var showBorderSwitch = Toggle()
@@ -115,6 +116,7 @@ class TileContainerViewController: BaseViewController<TileContainer> {
             $0.text = "For testing max width is limited to 85% of view's width & 65% view's height."
         })
         addFormRow(label: "Surface", view: surfacePickerSelectorView)
+        addFormRow(label: "Is Link", view: isLinkSwitch)
         addFormRow(label: "Clickable", view: clickableSwitch)
         addFormRow(label: "Width", view: widthTextField)
         addFormRow(label: "Height", view: heightTextField)
@@ -143,6 +145,11 @@ class TileContainerViewController: BaseViewController<TileContainer> {
             }
         }
 
+        isLinkSwitch.onChange = { [weak self] sender in
+            guard let self else { return }
+            self.component.accessibilityTraits = sender.isOn ? .link : .button
+        }
+
         clickableSwitch.onChange = { [weak self] sender in
             guard let self else { return }
             if sender.isOn {
@@ -254,7 +261,7 @@ class TileContainerViewController: BaseViewController<TileContainer> {
         contentAreaBackgroundColorButton.onClick = { [weak self] _ in
             guard let self else { return }
             self.colorPickerType = .contentViewBackgroundColor
-            self.colorPicker.selectedColor = self.component.containerView.backgroundColor ?? .white
+            self.colorPicker.selectedColor = self.component.contentView.backgroundColor ?? .white
             self.present(self.colorPicker, animated: true)
         }
     }
@@ -285,12 +292,12 @@ extension TileContainerViewController: UIColorPickerViewControllerDelegate {
     }
     
     func colorPickerViewControllerDidSelectColor(_ viewController: UIColorPickerViewController) {
-        guard let hexString = viewController.selectedColor.hexString else { return }
+        let color = viewController.selectedColor
         switch colorPickerType {
         case .contentViewBackgroundColor:
-            component.containerView.backgroundColor = UIColor(hexString: hexString)
+            component.contentView.backgroundColor = color
         case .backgroundColor:
-            component.color = .custom(hexString)
+            component.color = .custom(color)
         case .gradientColor1:
             gradientColorView1.selectedColor = viewController.selectedColor
             updateGradientColors()
@@ -301,8 +308,8 @@ extension TileContainerViewController: UIColorPickerViewControllerDelegate {
     }
     
     func updateGradientColors(){
-        if let selectedGradient1Color = gradientColorView1.selectedColor?.hexString,
-           let selectedGradient2Color = gradientColorView2.selectedColor?.hexString{
+        if let selectedGradient1Color = gradientColorView1.selectedColor,
+           let selectedGradient2Color = gradientColorView2.selectedColor{
             component.backgroundEffect = .gradient(selectedGradient1Color, selectedGradient2Color)
         }
     }
diff --git a/VDSSample/ViewControllers/TileletViewController.swift b/VDSSample/ViewControllers/TileletViewController.swift
index 038487b..fa86989 100644
--- a/VDSSample/ViewControllers/TileletViewController.swift
+++ b/VDSSample/ViewControllers/TileletViewController.swift
@@ -25,12 +25,6 @@ class TileletViewController: BaseViewController<Tilelet> {
                            items: Tilelet.SubTitleModel.OtherStandardStyle.allCases.sorted{ $0.rawValue < $1.rawValue })
     }()
     
-    lazy var subtitleColorPickerSelectorView = {
-        PickerSelectorView<Use>(title: "",
-                                picker: self.picker,
-                                items: [.primary, .secondary])
-    }()
-    
     lazy var textPositionPickerSelectorView = {
         PickerSelectorView(title: "",
                            picker: self.picker,
@@ -75,7 +69,7 @@ class TileletViewController: BaseViewController<Tilelet> {
     
     var colorPickerType: ColorPickerType = .backgroundColor
     enum ColorPickerType {
-        case backgroundColor, gradientColor1, gradientColor2, contentViewBackgroundColor
+        case backgroundColor, gradientColor1, gradientColor2, contentViewBackgroundColor, light, dark
     }
     
     lazy var gradientColorView1: ColorPickerView<ColorPickerType> = {
@@ -104,6 +98,85 @@ class TileletViewController: BaseViewController<Tilelet> {
                            items: TitleLockup.TextAlignment.allCases)
     }()
     
+    /// titleLockup
+    var currentLabelType: LabelType = .title
+    enum LabelType {
+        case eyebrow, title, subtitle
+    }
+    
+    enum TitleTextColor: String, CaseIterable {
+        case primary, custom
+    }
+    
+    enum TextColor: String, CaseIterable {
+        case primary, secondary, custom
+    }
+    
+    /// eyebrow
+    var eyebrowColorsFormStackView = FormSection().with { $0.isHidden = true }
+    lazy var eyebrowColorPickerSelectorView = {
+        PickerSelectorView(title: "primary",
+                           picker: self.picker,
+                           items: TextColor.allCases)
+    }()
+
+    lazy var eyebrowLightColorView: ColorPickerView<ColorPickerType> = {
+        return .init(with: ColorPickerType.light) { [weak self] picker in
+            self?.colorPickerType = picker.pickerType
+            self?.selectedColorTapped(picker)
+        }
+    }()
+    
+    lazy var eyebrowDarkColorView: ColorPickerView<ColorPickerType> = {
+        return .init(with: ColorPickerType.dark) { [weak self] picker in
+            self?.colorPickerType = picker.pickerType
+            self?.selectedColorTapped(picker)
+        }
+    }()
+    
+    /// title
+    var titleColorsFormStackView = FormSection().with { $0.isHidden = true }
+    lazy var titleColorPickerSelectorView = {
+        PickerSelectorView(title: "primary",
+                           picker: self.picker,
+                           items: TitleTextColor.allCases)
+    }()
+    lazy var titleLightColorView: ColorPickerView<ColorPickerType> = {
+        return .init(with: ColorPickerType.light) { [weak self] picker in
+            self?.colorPickerType = picker.pickerType
+            self?.selectedColorTapped(picker)
+        }
+    }()
+    
+    lazy var titleDarkColorView: ColorPickerView<ColorPickerType> = {
+        return .init(with: ColorPickerType.dark) { [weak self] picker in
+            self?.colorPickerType = picker.pickerType
+            self?.selectedColorTapped(picker)
+        }
+    }()
+    
+    /// subtitle
+    var subtitleColorsFormStackView = FormSection().with { $0.isHidden = true }
+    lazy var subtitleColorPickerSelectorView = {
+        PickerSelectorView(title: "primary",
+                           picker: self.picker,
+                           items: TextColor.allCases)
+    }()
+    lazy var subtitleLightColorView: ColorPickerView<ColorPickerType> = {
+        return .init(with: ColorPickerType.light) { [weak self] picker in
+            self?.colorPickerType = picker.pickerType
+            self?.selectedColorTapped(picker)
+        }
+    }()
+    
+    lazy var subtitleDarkColorView: ColorPickerView<ColorPickerType> = {
+        return .init(with: ColorPickerType.dark) { [weak self] picker in
+            self?.colorPickerType = picker.pickerType
+            self?.selectedColorTapped(picker)
+        }
+    }()
+
+    
     let backgroundImage = UIImage(named: "backgroundTest")!
     var clickableSwitch = Toggle()
     var eyebrowTextField = TextField()
@@ -125,6 +198,7 @@ class TileletViewController: BaseViewController<Tilelet> {
     var showDropShadowSwitch = Toggle()
     var backgroundColor: BackgroundColor = .black
     var maxWidthTextField = NumericField()
+    var isLinkSwitch = Toggle()
 
     var gradientColorsFormStackView = FormSection().with { $0.isHidden = true }
     
@@ -139,6 +213,7 @@ class TileletViewController: BaseViewController<Tilelet> {
         super.setupForm()
         addFormRow(label: "Surface", view: surfacePickerSelectorView)
         addActionRow()
+        addFormRow(label: "Is Link", view: isLinkSwitch)
         addFormRow(label: "Clickable", view: clickableSwitch)
                 
         addFormRow(label: "Aspect Ratio", view: scalingTypePickerSelectorView)
@@ -148,27 +223,8 @@ class TileletViewController: BaseViewController<Tilelet> {
         addFormRow(label: "Text Alignment", view: textAlignmentPickerSelectorView)
         addFormRow(label: "Text Width", view: textWidthTextField)
         addFormRow(label: "Text Percentage", view: textPercentageTextField)
-        addFormRow(label: "Text Position(Minimum height is configurable.)", view: textPositionPickerSelectorView)
-        addFormRow(label: "Description Icon", view: showDescriptionIconSwitch)
-        addFormRow(label: "Directional Icon", view: showDirectionalIconSwitch)
-
-        addFormRow(label: "Badge Text", view: badgeTextField)
-        addFormRow(label: "Badge Fill Color", view: badgeFillColorPickerSelectorView)
-        addFormRow(label: "Badge Number of Lines", view: badgeNumberOfLinesPickerSelectorView)
-        addFormRow(label: "Badge Max Width", view: maxWidthTextField)
-
-        addFormRow(label: "Eyebrow/Subtitle Style", view: otherStandardStylePickerSelectorView)
-        addFormRow(label: "Eyebrow Text", view: eyebrowTextField)
-        addFormRow(label: "Eyebrow is Bold", view: eyebrowIsBold)
-        
-        addFormRow(label: "Title Style", view: titleStandardStylePickerSelectorView)
-        addFormRow(label: "Title Text", view: titleTextField)
-        addFormRow(label: "Title is Bold", view: titleIsBold)
-        
-        addFormRow(label: "Subtitle Color", view: subtitleColorPickerSelectorView)
-        addFormRow(label: "Subtitle Text", view: subTitleTextField)
-                        
-        addFormRow(label: "Background Color", view: backgroundColorPickerSelectorView)
+        addFormRow(label: "Text Position", tooltip: .init(title:"Text Position", content: "Minimum height is configurable"), view: textPositionPickerSelectorView)
+        addFormRow(label: "Background Color", tooltip: .init(title:"Background Color", content: "This color takes precedence over surface and will set all children's surface property to this value."), view: backgroundColorPickerSelectorView)
         addFormRow(label: "Background Image", view: showBackgroundImageSwitch)
         addFormRow(label: "Show Drop Shadow", view: showDropShadowSwitch)
         addFormRow(label: "Image Fallback Color", view: imageFallbackColorPickerSelectorView)
@@ -178,6 +234,52 @@ class TileletViewController: BaseViewController<Tilelet> {
         gradientColorsFormStackView.addFormRow(label: "Gradient Color2", view: gradientColorView2)
         append(section: gradientColorsFormStackView)
         
+        append(section: .init().with({
+            $0.title = "Badge"
+            $0.addFormRow(label: "Text", view: badgeTextField)
+            $0.addFormRow(label: "Fill Color", view: badgeFillColorPickerSelectorView)
+            $0.addFormRow(label: "Number of Lines", view: badgeNumberOfLinesPickerSelectorView)
+            $0.addFormRow(label: "Max Width", view: maxWidthTextField)
+        }))
+
+        append(section: .init().with({
+            $0.title = "Eyebrow"
+            $0.addFormRow(label: "Text Style", tooltip: .init(title: "Text Style", content: "Eyebrow and Subtitle will share the same textStyle."), view: otherStandardStylePickerSelectorView)
+            $0.addFormRow(label: "is Bold", view: eyebrowIsBold)
+            $0.addFormRow(label: "Text", view: eyebrowTextField)
+            $0.addFormRow(label: "Color", view: eyebrowColorPickerSelectorView)
+        }))
+        
+        eyebrowColorsFormStackView.addFormRow(label: "Light", view: eyebrowLightColorView)
+        eyebrowColorsFormStackView.addFormRow(label: "Dark", view: eyebrowDarkColorView)
+        append(section: eyebrowColorsFormStackView)
+
+        append(section: .init().with({
+            $0.title = "Title"
+            $0.addFormRow(label: "Text Style", view: titleStandardStylePickerSelectorView)
+            $0.addFormRow(label: "is Bold", view: titleIsBold)
+            $0.addFormRow(label: "Text", view: titleTextField)
+            $0.addFormRow(label: "Color", view: titleColorPickerSelectorView)
+        }))
+        titleColorsFormStackView.addFormRow(label: "Light", view: titleLightColorView)
+        titleColorsFormStackView.addFormRow(label: "Dark", view: titleDarkColorView)
+        append(section: titleColorsFormStackView)
+
+        append(section: .init().with({
+            $0.title = "Subtitle"
+            $0.addFormRow(label: "Text", view: subTitleTextField)
+            $0.addFormRow(label: "Color", view: subtitleColorPickerSelectorView)
+        }))
+        subtitleColorsFormStackView.addFormRow(label: "Light", view: subtitleLightColorView)
+        subtitleColorsFormStackView.addFormRow(label: "Dark", view: subtitleDarkColorView)
+        append(section: subtitleColorsFormStackView)
+
+        append(section: .init().with({
+            $0.title = "Icons"
+            $0.addFormRow(label: "Description", view: showDescriptionIconSwitch)
+            $0.addFormRow(label: "Directional", view: showDirectionalIconSwitch)
+        }))
+
         clickableSwitch.onChange = { [weak self] sender in
             guard let self else { return }
             if sender.isOn {
@@ -187,6 +289,11 @@ class TileletViewController: BaseViewController<Tilelet> {
             }
         }
         
+        isLinkSwitch.onChange = { [weak self] sender in
+            guard let self else { return }
+            self.component.accessibilityTraits = sender.isOn ? .link : .button
+        }
+        
         heightTextField
             .numberPublisher
             .sink { [weak self] number in
@@ -250,7 +357,7 @@ class TileletViewController: BaseViewController<Tilelet> {
         showDescriptionIconSwitch.onChange = { [weak self] sender in
             if sender.isOn {
                 self?.showDirectionalIconSwitch.isOn = false
-                self?.component.descriptiveIconModel = .init(size: .medium, surface: .dark)
+                self?.component.descriptiveIconModel = .init(size: .medium)
             } else {
                 self?.component.descriptiveIconModel = nil
             }
@@ -259,7 +366,7 @@ class TileletViewController: BaseViewController<Tilelet> {
         showDirectionalIconSwitch.onChange = { [weak self] sender in
             if sender.isOn {
                 self?.showDescriptionIconSwitch.isOn = false
-                self?.component.directionalIconModel = .init(size: .medium, surface: .dark)
+                self?.component.directionalIconModel = .init(size: .medium)
             } else {
                 self?.component.directionalIconModel = nil
             }
@@ -320,7 +427,6 @@ class TileletViewController: BaseViewController<Tilelet> {
         surfacePickerSelectorView.text = component.surface.rawValue
         otherStandardStylePickerSelectorView.text = subTitleModel.otherStandardStyle.rawValue
         titleStandardStylePickerSelectorView.text = titleModel.standardStyle.rawValue
-        subtitleColorPickerSelectorView.text = subTitleModel.textColor.rawValue
         titleTextField.text = titleModel.text
         subTitleTextField.text = subTitleModel.text
         widthTextField.text = component.width != nil ? "\(component.width!)" : ""
@@ -340,7 +446,20 @@ class TileletViewController: BaseViewController<Tilelet> {
     
     func setTitleModel() {
         if let text = titleTextField.text, !text.isEmpty {
-            component.titleModel = Tilelet.TitleModel(text: text, isBold: titleIsBold.isOn, standardStyle: titleStandardStylePickerSelectorView.selectedItem)
+            var textColor: TitleLockup.TitleTextColor
+            switch titleColorPickerSelectorView.selectedItem {
+            case .primary:
+                textColor = .primary
+            case .custom:
+                if let light = titleLightColorView.selectedColor {
+                    let dark = titleDarkColorView.selectedColor ?? light
+                    textColor = .custom(light, dark)
+                } else {
+                    textColor = .custom(VDSColor.elementsPrimaryOnlight, VDSColor.elementsPrimaryOndark)
+                }
+            }
+            
+            component.titleModel = Tilelet.TitleModel(text: text, textColor: textColor, isBold: titleIsBold.isOn, standardStyle: titleStandardStylePickerSelectorView.selectedItem)
         } else {
             component.titleModel = nil
         }
@@ -348,7 +467,22 @@ class TileletViewController: BaseViewController<Tilelet> {
     
     func setSubTitleModel() {
         if let text = subTitleTextField.text, !text.isEmpty {
-            component.subTitleModel = Tilelet.SubTitleModel(text: text, otherStandardStyle: otherStandardStylePickerSelectorView.selectedItem)
+            var textColor: TitleLockup.TextColor
+            switch subtitleColorPickerSelectorView.selectedItem {
+            case .primary:
+                textColor = .primary
+            case .secondary:
+                textColor = .secondary
+            case .custom:
+                if let light = subtitleLightColorView.selectedColor {
+                    let dark = subtitleDarkColorView.selectedColor ?? light
+                    textColor = .custom(light, dark)
+                } else {
+                    textColor = .custom(VDSColor.elementsPrimaryOnlight, VDSColor.elementsPrimaryOndark)
+                }
+            }
+
+            component.subTitleModel = Tilelet.SubTitleModel(text: text, otherStandardStyle: otherStandardStylePickerSelectorView.selectedItem, textColor: textColor)
         } else {
             component.subTitleModel = nil
         }
@@ -356,7 +490,22 @@ class TileletViewController: BaseViewController<Tilelet> {
     
     func setEyebrowModel() {
         if let text = eyebrowTextField.text, !text.isEmpty {
-            component.eyebrowModel = Tilelet.EyebrowModel(text: text, isBold: eyebrowIsBold.isOn, standardStyle: otherStandardStylePickerSelectorView.selectedItem)
+            var textColor: TitleLockup.TextColor
+            switch eyebrowColorPickerSelectorView.selectedItem {
+            case .primary:
+                textColor = .primary
+            case .secondary:
+                textColor = .secondary
+            case .custom:
+                if let light = eyebrowLightColorView.selectedColor {
+                    let dark = eyebrowDarkColorView.selectedColor ?? light
+                    textColor = .custom(light, dark)
+                } else {
+                    textColor = .custom(VDSColor.elementsPrimaryOnlight, VDSColor.elementsPrimaryOndark)
+                }
+            }
+
+            component.eyebrowModel = Tilelet.EyebrowModel(text: text, textColor: textColor, isBold: eyebrowIsBold.isOn, standardStyle: otherStandardStylePickerSelectorView.selectedItem)
         } else {
             component.eyebrowModel = nil
         }
@@ -387,10 +536,6 @@ class TileletViewController: BaseViewController<Tilelet> {
             self?.setSubTitleModel()
         }
         
-        subtitleColorPickerSelectorView.onPickerDidSelect  = {  [weak self] item in
-            self?.setSubTitleModel()
-        }
-        
         textPositionPickerSelectorView.onPickerDidSelect = {  [weak self] item in
             guard let self else { return }
             self.component.textPostion = item
@@ -436,6 +581,31 @@ class TileletViewController: BaseViewController<Tilelet> {
                 self.present(self.colorPicker, animated: true)
             }            
         }
+        
+        eyebrowColorPickerSelectorView.onPickerDidSelect  = {  [weak self] item in
+            self?.currentLabelType = .eyebrow
+            self?.eyebrowColorsFormStackView.isHidden = item != .custom
+            if item != .custom {
+                self?.setEyebrowModel()
+            }
+        }
+        
+        titleColorPickerSelectorView.onPickerDidSelect  = {  [weak self] item in
+            self?.currentLabelType = .title
+            self?.titleColorsFormStackView.isHidden = item != .custom
+            if item != .custom {
+                self?.setTitleModel()
+            }
+        }
+        
+        subtitleColorPickerSelectorView.onPickerDidSelect  = {  [weak self] item in
+            self?.currentLabelType = .subtitle
+            self?.subtitleColorsFormStackView.isHidden = item != .custom
+            if item != .custom {
+                self?.setSubTitleModel()
+            }
+        }
+
     }
     
     func getTilelet(effect: TileContainer.BackgroundEffect) -> Tilelet.BackgroundEffect {
@@ -494,24 +664,55 @@ extension TileletViewController: UIColorPickerViewControllerDelegate {
     }
     
     func colorPickerViewControllerDidSelectColor(_ viewController: UIColorPickerViewController) {
-        guard let hexString = viewController.selectedColor.hexString else { return }
+        let color = viewController.selectedColor 
+        var lightColorView: ColorPickerView<ColorPickerType>
+        var darkColorView: ColorPickerView<ColorPickerType>
         switch colorPickerType {
         case .contentViewBackgroundColor:
-            component.containerView.backgroundColor = UIColor(hexString: hexString)
+            component.contentView.backgroundColor = color
         case .backgroundColor:
-            component.color = .custom(hexString)
+            component.color = .custom(color)
         case .gradientColor1:
             gradientColorView1.selectedColor = viewController.selectedColor
             updateGradientColors()
         case .gradientColor2:
             gradientColorView2.selectedColor = viewController.selectedColor
             updateGradientColors()
+            
+        case .light, .dark:
+            var lightColorView: ColorPickerView<ColorPickerType>
+            var darkColorView: ColorPickerView<ColorPickerType>
+            
+            switch currentLabelType {
+            case .eyebrow:
+                lightColorView = eyebrowLightColorView
+                darkColorView = eyebrowDarkColorView
+            case .title:
+                lightColorView = titleLightColorView
+                darkColorView = titleDarkColorView
+            case .subtitle:
+                lightColorView = subtitleLightColorView
+                darkColorView = subtitleDarkColorView
+            }
+            if colorPickerType == .light {
+                lightColorView.selectedColor = viewController.selectedColor
+            } else {
+                darkColorView.selectedColor = viewController.selectedColor
+            }
+            switch currentLabelType {
+            case .eyebrow:
+                setEyebrowModel()
+            case .title:
+                setTitleModel()
+            case .subtitle:
+                setSubTitleModel()
+            }
         }
     }
     
     func updateGradientColors(){
-        if let selectedGradient1Color = gradientColorView1.selectedColor?.hexString,
-           let selectedGradient2Color = gradientColorView2.selectedColor?.hexString{
+        if let selectedGradient1Color = gradientColorView1.selectedColor,
+           let selectedGradient2Color = gradientColorView2.selectedColor{
             component.backgroundEffect = .gradient(selectedGradient1Color, selectedGradient2Color)
         }
     }
diff --git a/VDSSample/ViewControllers/TitleLockupViewController.swift b/VDSSample/ViewControllers/TitleLockupViewController.swift
index 9f70de3..6f2c298 100644
--- a/VDSSample/ViewControllers/TitleLockupViewController.swift
+++ b/VDSSample/ViewControllers/TitleLockupViewController.swift
@@ -29,12 +29,6 @@ class TitleLockupViewController: BaseViewController<TitleLockup> {
                            picker: self.picker,
                            items: TitleLockup.OtherStandardStyle.allCases.sorted{ $0.rawValue < $1.rawValue })
     }()
-    
-    lazy var subtitleColorPickerSelectorView = {
-        PickerSelectorView<Use>(title: "",
-                                 picker: self.picker,
-                                 items: [.primary, .secondary])
-    }()
 
     var titleIsBold = Toggle().with { $0.isOn = true }
     var eyebrowIsBold = Toggle().with { $0.isOn = true }
@@ -42,6 +36,98 @@ class TitleLockupViewController: BaseViewController<TitleLockup> {
     var titleTextField = TextField()
     var subTitleTextField = TextField()
 
+    /// **********************************************
+    /// Text Color
+    lazy var colorPicker: UIColorPickerViewController = {
+        let picker = UIColorPickerViewController()
+        picker.delegate = self
+        return picker
+    }()
+    
+    var currentLabelType: LabelType = .title
+    var colorPickerType: ColorPickerType = .light
+    
+    enum LabelType {
+        case eyebrow, title, subtitle
+    }
+    
+    enum TitleTextColor: String, CaseIterable {
+        case primary, custom
+    }
+    
+    enum TextColor: String, CaseIterable {
+        case primary, secondary, custom
+    }
+    
+    enum ColorPickerType {
+        case light, dark
+    }
+    
+    /// eyebrow
+    var eyebrowColorsFormStackView = FormSection().with { $0.isHidden = true }
+    lazy var eyebrowColorPickerSelectorView = {
+        PickerSelectorView(title: "primary",
+                           picker: self.picker,
+                           items: TextColor.allCases)
+    }()
+
+    lazy var eyebrowLightColorView: ColorPickerView<ColorPickerType> = {
+        return .init(with: ColorPickerType.light) { [weak self] picker in
+            self?.colorPickerType = picker.pickerType
+            self?.selectedColorTapped(picker)
+        }
+    }()
+    
+    lazy var eyebrowDarkColorView: ColorPickerView<ColorPickerType> = {
+        return .init(with: ColorPickerType.dark) { [weak self] picker in
+            self?.colorPickerType = picker.pickerType
+            self?.selectedColorTapped(picker)
+        }
+    }()
+    
+    /// title
+    var titleColorsFormStackView = FormSection().with { $0.isHidden = true }
+    lazy var titleColorPickerSelectorView = {
+        PickerSelectorView(title: "primary",
+                           picker: self.picker,
+                           items: TitleTextColor.allCases)
+    }()
+    lazy var titleLightColorView: ColorPickerView<ColorPickerType> = {
+        return .init(with: ColorPickerType.light) { [weak self] picker in
+            self?.colorPickerType = picker.pickerType
+            self?.selectedColorTapped(picker)
+        }
+    }()
+    
+    lazy var titleDarkColorView: ColorPickerView<ColorPickerType> = {
+        return .init(with: ColorPickerType.dark) { [weak self] picker in
+            self?.colorPickerType = picker.pickerType
+            self?.selectedColorTapped(picker)
+        }
+    }()
+    
+    /// subtitle
+    var subtitleColorsFormStackView = FormSection().with { $0.isHidden = true }
+    lazy var subtitleColorPickerSelectorView = {
+        PickerSelectorView(title: "primary",
+                           picker: self.picker,
+                           items: TextColor.allCases)
+    }()
+    lazy var subtitleLightColorView: ColorPickerView<ColorPickerType> = {
+        return .init(with: ColorPickerType.light) { [weak self] picker in
+            self?.colorPickerType = picker.pickerType
+            self?.selectedColorTapped(picker)
+        }
+    }()
+    
+    lazy var subtitleDarkColorView: ColorPickerView<ColorPickerType> = {
+        return .init(with: ColorPickerType.dark) { [weak self] picker in
+            self?.colorPickerType = picker.pickerType
+            self?.selectedColorTapped(picker)
+        }
+    }()
+
+
     override func viewDidLoad() {
         super.viewDidLoad()
         addContentTopView(view: component)
@@ -55,18 +141,29 @@ class TitleLockupViewController: BaseViewController<TitleLockup> {
         addFormRow(label: "Surface", view: surfacePickerSelectorView)
         addFormRow(label: "Text Alignment", view: textAlignmentPickerSelectorView)
 
-        addFormRow(label: "Title is Bold", view: titleIsBold)
+        addFormRow(label: "Eyebrow/Subtitle Style", view: otherStandardStylePickerSelectorView)
         addFormRow(label: "Eyebrow is Bold", view: eyebrowIsBold)
-
-        addFormRow(label: "Title Style", view: titleStandardStylePickerSelectorView)
-        addFormRow(label: "Other Style", view: otherStandardStylePickerSelectorView)
-
         addFormRow(label: "Eyebrow Text", view: eyebrowTextField)
+        addFormRow(label: "Eyebrow Color", view: eyebrowColorPickerSelectorView)
+        eyebrowColorsFormStackView.addFormRow(label: "Light", view: eyebrowLightColorView)
+        eyebrowColorsFormStackView.addFormRow(label: "Dark", view: eyebrowDarkColorView)
+        append(section: eyebrowColorsFormStackView)
+
+        addFormRow(label: "Title is Bold", view: titleIsBold)
+        addFormRow(label: "Title Style", view: titleStandardStylePickerSelectorView)
         addFormRow(label: "Title Text", view: titleTextField)
+        addFormRow(label: "Title Color", view: titleColorPickerSelectorView)
+        titleColorsFormStackView.addFormRow(label: "Light", view: titleLightColorView)
+        titleColorsFormStackView.addFormRow(label: "Dark", view: titleDarkColorView)
+        append(section: titleColorsFormStackView)
 
-        addFormRow(label: "Subtitle Color", view: subtitleColorPickerSelectorView)
         addFormRow(label: "Subtitle Text", view: subTitleTextField)
-
+        addFormRow(label: "Subtitle Color", view: subtitleColorPickerSelectorView)
+        subtitleColorsFormStackView.addFormRow(label: "Light", view: subtitleLightColorView)
+        subtitleColorsFormStackView.addFormRow(label: "Dark", view: subtitleDarkColorView)
+        append(section: subtitleColorsFormStackView)
+        
+        
         eyebrowIsBold.publisher(for: .valueChanged).sink { [weak self] toggle in
             self?.setOtherModels()
         }.store(in: &subscribers)
@@ -108,7 +205,6 @@ class TitleLockupViewController: BaseViewController<TitleLockup> {
         textAlignmentPickerSelectorView.text = TextAlignment.left.rawValue
         otherStandardStylePickerSelectorView.text = subTitleModel.otherStandardStyle.rawValue
         titleStandardStylePickerSelectorView.text = titleModel.standardStyle.rawValue
-        subtitleColorPickerSelectorView.text = subTitleModel.textColor.rawValue
         eyebrowTextField.text = eyebrowModel.text
         titleTextField.text = titleModel.text
         subTitleTextField.text = subTitleModel.text
@@ -120,7 +216,21 @@ class TitleLockupViewController: BaseViewController<TitleLockup> {
     func setTitleModel() {
         var titleTextStyle: TextStyle?
         if let text = titleTextField.text, !text.isEmpty {
-            component.titleModel = TitleLockup.TitleModel(text: text, isBold: titleIsBold.isOn, standardStyle: titleStandardStylePickerSelectorView.selectedItem)
+            
+            var textColor: TitleLockup.TitleTextColor
+            switch titleColorPickerSelectorView.selectedItem {
+            case .primary:
+                textColor = .primary
+            case .custom:
+                if let light = titleLightColorView.selectedColor {
+                    let dark = titleDarkColorView.selectedColor ?? light
+                    textColor = .custom(light, dark)
+                } else {
+                    textColor = .custom(VDSColor.elementsPrimaryOnlight, VDSColor.elementsPrimaryOndark)
+                }
+            }
+
+            component.titleModel = TitleLockup.TitleModel(text: text, textColor: textColor, isBold: titleIsBold.isOn, standardStyle: titleStandardStylePickerSelectorView.selectedItem)
             titleTextStyle = titleIsBold.isOn ? titleStandardStylePickerSelectorView.selectedItem.value.bold : titleStandardStylePickerSelectorView.selectedItem.value.regular
         } else {
             component.titleModel = nil
@@ -139,16 +249,43 @@ class TitleLockupViewController: BaseViewController<TitleLockup> {
         let style = otherStandardStylePickerSelectorView.selectedItem
     
         if let text = subTitleTextField.text, !text.isEmpty {
-            component.subTitleModel = TitleLockup.SubTitleModel(text: text, otherStandardStyle: style, textColor: subtitleColorPickerSelectorView.selectedItem)
+            var textColor: TitleLockup.TextColor
+            switch subtitleColorPickerSelectorView.selectedItem {
+            case .primary:
+                textColor = .primary
+            case .secondary:
+                textColor = .secondary
+            case .custom:
+                if let light = subtitleLightColorView.selectedColor {
+                    let dark = subtitleDarkColorView.selectedColor ?? light
+                    textColor = .custom(light, dark)
+                } else {
+                    textColor = .custom(VDSColor.elementsPrimaryOnlight, VDSColor.elementsPrimaryOndark)
+                }
+            }
+            component.subTitleModel = TitleLockup.SubTitleModel(text: text, otherStandardStyle: style, textColor: textColor)
             debug(type: "SubTitle", textStyle: style.value.regular)
         } else {
             component.subTitleModel = nil
         }
         
         if let text = eyebrowTextField.text, !text.isEmpty {
-            component.eyebrowModel = TitleLockup.EyebrowModel(text: text, isBold: eyebrowIsBold.isOn, standardStyle: style)
+            var textColor: TitleLockup.TextColor
+            switch eyebrowColorPickerSelectorView.selectedItem {
+            case .primary:
+                textColor = .primary
+            case .secondary:
+                textColor = .secondary
+            case .custom:
+                if let light = eyebrowLightColorView.selectedColor {
+                    let dark = eyebrowDarkColorView.selectedColor ?? light
+                    textColor = .custom(light, dark)
+                } else {
+                    textColor = .custom(VDSColor.elementsPrimaryOnlight, VDSColor.elementsPrimaryOndark)
+                }            }
+            component.eyebrowModel = TitleLockup.EyebrowModel(text: text, textColor: textColor, isBold: eyebrowIsBold.isOn, standardStyle: style)
             debug(type: "EyeBrow", textStyle: eyebrowIsBold.isOn ? style.value.bold : style.value.regular)
-
+            
         } else {
             component.eyebrowModel = nil
         }
@@ -178,9 +315,30 @@ class TitleLockupViewController: BaseViewController<TitleLockup> {
         otherStandardStylePickerSelectorView.onPickerDidSelect = {  [weak self] item in
             self?.setOtherModels()
         }
+
+        
+        eyebrowColorPickerSelectorView.onPickerDidSelect  = {  [weak self] item in
+            self?.currentLabelType = .eyebrow
+            self?.eyebrowColorsFormStackView.isHidden = item != .custom
+            if item != .custom {
+                self?.setOtherModels()
+            }
+        }
+        
+        titleColorPickerSelectorView.onPickerDidSelect  = {  [weak self] item in
+            self?.currentLabelType = .title
+            self?.titleColorsFormStackView.isHidden = item != .custom
+            if item != .custom {
+                self?.setTitleModel()
+            }
+        }
         
         subtitleColorPickerSelectorView.onPickerDidSelect  = {  [weak self] item in
-            self?.setOtherModels()
+            self?.currentLabelType = .subtitle
+            self?.subtitleColorsFormStackView.isHidden = item != .custom
+            if item != .custom {
+                self?.setOtherModels()
+            }
         }
     }
 }
@@ -198,3 +356,48 @@ extension TitleLockupViewController: ComponentSampleable {
         return ComponentSample(component: component)
     }
 }
+
+extension TitleLockupViewController: UIColorPickerViewControllerDelegate {
+    
+    func selectedColorTapped(_ picker: ColorPickerView<ColorPickerType>) {
+        let selectedColor = picker.selectedColor
+        if let selectedColor {
+            colorPicker.selectedColor = selectedColor
+        }
+        present(colorPicker, animated: true)
+    }
+    
+    func colorPickerViewControllerDidFinish(_ viewController: UIColorPickerViewController) {
+        dismiss(animated: true)
+    }
+    
+    func colorPickerViewControllerDidSelectColor(_ viewController: UIColorPickerViewController) {
+        guard let hexString = viewController.selectedColor.hexString else { return }
+        var lightColorView: ColorPickerView<ColorPickerType>
+        var darkColorView: ColorPickerView<ColorPickerType>
+        
+        switch currentLabelType {
+        case .eyebrow:
+            lightColorView = eyebrowLightColorView
+            darkColorView = eyebrowDarkColorView
+        case .title:
+            lightColorView = titleLightColorView
+            darkColorView = titleDarkColorView
+        case .subtitle:
+            lightColorView = subtitleLightColorView
+            darkColorView = subtitleDarkColorView
+        }
+        switch colorPickerType {
+        case .light:
+            lightColorView.selectedColor = viewController.selectedColor
+        case .dark:
+            darkColorView.selectedColor = viewController.selectedColor
+        }
+        
+        if currentLabelType == .title {
+            setTitleModel()
+        } else {
+            setOtherModels()
+        }
+    }
+}