diff --git a/VDSSample/ViewControllers/DatePickerViewController.swift b/VDSSample/ViewControllers/DatePickerViewController.swift
index 72a5a8e..3c5c460 100644
--- a/VDSSample/ViewControllers/DatePickerViewController.swift
+++ b/VDSSample/ViewControllers/DatePickerViewController.swift
@@ -22,6 +22,7 @@ class DatePickerViewController: BaseViewController<DatePicker> {
     var readonlySwitch = Toggle()
     var transparentBgSwitch = Toggle()
     var errorSwitch = Toggle()
+    var widthTextField = NumericField()
     var tooltipTitleTextField = TextField()
     var tooltipContentTextField = TextField()
     lazy var dateFormatPickerSelectorView = {
@@ -88,6 +89,7 @@ class DatePickerViewController: BaseViewController<DatePicker> {
         addFormRow(label: "Transparent Background", view: transparentBgSwitch)
         addFormRow(label: "Error", view: .makeWrapper(for: errorSwitch))
         addFormRow(label: "Error Text", view: errorTextField)
+        addFormRow(label: "Width", view: widthTextField)
         addFormRow(label: "ToolTip Title", view: tooltipTitleTextField)
         addFormRow(label: "ToolTip Content", view: tooltipContentTextField)
         append(section: getCalendarSection())
@@ -135,6 +137,12 @@ class DatePickerViewController: BaseViewController<DatePicker> {
                 self?.component.errorText = text
             }.store(in: &subscribers)
         
+        widthTextField
+            .numberPublisher
+            .sink { [weak self] number in
+                self?.component.width = number?.cgFloatValue
+            }.store(in: &subscribers)
+
         tooltipTitleTextField
             .textPublisher
             .sink { [weak self] text in
diff --git a/VDSSample/ViewControllers/IconViewController.swift b/VDSSample/ViewControllers/IconViewController.swift
index 5a5f986..8e3c5cb 100644
--- a/VDSSample/ViewControllers/IconViewController.swift
+++ b/VDSSample/ViewControllers/IconViewController.swift
@@ -13,12 +13,18 @@ import Combine
 
 class IconViewController: BaseViewController<Icon> {
     
-    lazy var colorPickerSelectorView = {
+    lazy var lightColorPickerSelectorView = {
         PickerSelectorView(title: "",
                            picker: self.picker,
                            items: UIColor.VDSColor.allCases)
     }()
-    
+
+    lazy var darkColorPickerSelectorView = {
+        PickerSelectorView(title: "",
+                           picker: self.picker,
+                           items: UIColor.VDSColor.allCases)
+    }()
+
     lazy var namePickerSelectorView = {
         PickerSelectorView(title: "",
                            picker: self.picker,
@@ -45,7 +51,8 @@ class IconViewController: BaseViewController<Icon> {
         addFormRow(label: "Surface", view: surfacePickerSelectorView)
         addFormRow(label: "Size", view: sizePickerSelectorView)
         addFormRow(label: "Custom Size", view: customSizeField)
-        addFormRow(label: "Color", view: colorPickerSelectorView)
+        addFormRow(label: "Light Color", view: lightColorPickerSelectorView)
+        addFormRow(label: "Dark Color", view: darkColorPickerSelectorView)
         addFormRow(label: "Name", view: namePickerSelectorView)
         
         customSizeField
@@ -62,7 +69,8 @@ class IconViewController: BaseViewController<Icon> {
         //setup UI
         surfacePickerSelectorView.text = component.surface.rawValue
         sizePickerSelectorView.text = component.size.rawValue
-        colorPickerSelectorView.text = UIColor.VDSColor.paletteBlack.rawValue
+        lightColorPickerSelectorView.text = UIColor.VDSColor.elementsPrimaryOnlight.rawValue
+        darkColorPickerSelectorView.text = UIColor.VDSColor.elementsPrimaryOndark.rawValue
         namePickerSelectorView.text = name.rawValue
     }
     func setupPicker(){
@@ -76,14 +84,25 @@ class IconViewController: BaseViewController<Icon> {
             self?.component.size = item
         }
         
-        colorPickerSelectorView.onPickerDidSelect = {  [weak self] item in
-            self?.component.color = item.uiColor
+        lightColorPickerSelectorView.onPickerDidSelect = {  [weak self] item in
+            self?.setColorConfiguration()
+        }
+        
+        darkColorPickerSelectorView.onPickerDidSelect = {  [weak self] item in
+            self?.setColorConfiguration()
         }
         
         namePickerSelectorView.onPickerDidSelect = {  [weak self] item in
             self?.component.name = item
         }
     }
+    
+    func setColorConfiguration() {
+        let light = lightColorPickerSelectorView.selectedItem.uiColor
+        let dark = darkColorPickerSelectorView.selectedItem.uiColor
+        component.colorConfiguration = .init(light, dark)
+    }
+
 }
 
 extension IconViewController: ComponentSampleable {
diff --git a/VDSSample/ViewControllers/TextAreaViewController.swift b/VDSSample/ViewControllers/TextAreaViewController.swift
index f62e0f5..4161d7e 100644
--- a/VDSSample/ViewControllers/TextAreaViewController.swift
+++ b/VDSSample/ViewControllers/TextAreaViewController.swift
@@ -48,6 +48,7 @@ class  TextAreaViewController: BaseViewController<TextArea> {
         addFormRow(label: "Read Only", view: readOnlySwitch)
         addFormRow(label: "Error", view: showErrorSwitch)
         addFormRow(label: "Error Text", view: errorTextField)
+        addFormRow(label: "Width", view: widthTextField)
         addFormRow(label: "ToolTip Title", view: tooltipTitleTextField)
         addFormRow(label: "ToolTip Content", view: tooltipContentTextField)
         addFormRow(label: "Character Count", view: maxLengthTextField)
diff --git a/VDSSample/ViewControllers/TileletViewController.swift b/VDSSample/ViewControllers/TileletViewController.swift
index 691f533..4c135bd 100644
--- a/VDSSample/ViewControllers/TileletViewController.swift
+++ b/VDSSample/ViewControllers/TileletViewController.swift
@@ -12,7 +12,7 @@ import VDSCoreTokens
 import Combine
 
 class TileletViewController: BaseViewController<Tilelet> {
-    
+
     lazy var titleStandardStylePickerSelectorView = {
         PickerSelectorView(title: "",
                            picker: self.picker,
@@ -69,7 +69,9 @@ class TileletViewController: BaseViewController<Tilelet> {
     
     var colorPickerType: ColorPickerType = .backgroundColor
     enum ColorPickerType {
-        case backgroundColor, gradientColor1, gradientColor2, contentViewBackgroundColor, light, dark
+        case backgroundColor
+        case gradientColor1, gradientColor2
+        case contentViewBackgroundColor, light, dark
     }
     
     lazy var gradientColorView1: ColorPickerView<ColorPickerType> = {
@@ -99,9 +101,9 @@ class TileletViewController: BaseViewController<Tilelet> {
     }()
     
     /// titleLockup
-    var currentLabelType: LabelType = .title
-    enum LabelType {
-        case eyebrow, title, subtitle
+    var currentSurfaceColorType: SurfaceColorType = .title
+    enum SurfaceColorType {
+        case eyebrow, title, subtitle, directionalIcon, descriptionIcon
     }
     
     enum TitleTextColor: String, CaseIterable {
@@ -176,7 +178,64 @@ class TileletViewController: BaseViewController<Tilelet> {
         }
     }()
 
+    lazy var descriptionNamePickerSelectorView = {
+        PickerSelectorView(title: "",
+                           picker: self.picker,
+                           items: Icon.Name.all.sorted{ $0.rawValue < $1.rawValue })
+    }()
+
+    lazy var descriptionIconSizePickerSelectorView = {
+        PickerSelectorView(title: "",
+                           picker: self.picker,
+                           items: Icon.Size.allCases)
+    }()
+
+    lazy var descriptionIconLightColorView: ColorPickerView<ColorPickerType> = {
+        return .init(with: ColorPickerType.light) { [weak self] picker in
+            self?.currentSurfaceColorType = .descriptionIcon
+            self?.colorPickerType = picker.pickerType
+            self?.selectedColorTapped(picker)
+        }
+    }()
     
+    var descriptionIconFormStackView = FormSection().with { $0.isHidden = true }
+    lazy var descriptionIconDarkColorView: ColorPickerView<ColorPickerType> = {
+        return .init(with: ColorPickerType.dark) { [weak self] picker in
+            self?.currentSurfaceColorType = .descriptionIcon
+            self?.colorPickerType = picker.pickerType
+            self?.selectedColorTapped(picker)
+        }
+    }()
+    
+    var directionalIconFormStackView = FormSection().with { $0.isHidden = true }
+    lazy var directionalIconLightColorView: ColorPickerView<ColorPickerType> = {
+        return .init(with: ColorPickerType.light) { [weak self] picker in
+            self?.currentSurfaceColorType = .directionalIcon
+            self?.colorPickerType = picker.pickerType
+            self?.selectedColorTapped(picker)
+        }
+    }()
+    
+    lazy var directionalIconDarkColorView: ColorPickerView<ColorPickerType> = {
+        return .init(with: ColorPickerType.dark) { [weak self] picker in
+            self?.currentSurfaceColorType = .directionalIcon
+            self?.colorPickerType = picker.pickerType
+            self?.selectedColorTapped(picker)
+        }
+    }()
+    
+    lazy var directionIconPickerSelectorView = {
+        PickerSelectorView(title: "",
+                           picker: self.picker,
+                           items: Tilelet.DirectionalIcon.IconType.allCases.sorted{ $0.rawValue < $1.rawValue })
+    }()
+
+    lazy var directionIconSizePickerSelectorView = {
+        PickerSelectorView(title: "",
+                           picker: self.picker,
+                           items: Tilelet.DirectionalIcon.IconSize.allCases.sorted{ $0.rawValue < $1.rawValue })
+    }()
+
     let backgroundImage = UIImage(named: "backgroundTest")!
     var clickableSwitch = Toggle()
     var eyebrowTextField = TextField()
@@ -275,11 +334,25 @@ class TileletViewController: BaseViewController<Tilelet> {
         append(section: subtitleColorsFormStackView)
 
         append(section: .init().with({
-            $0.title = "Icons"
-            $0.addFormRow(label: "Description", view: showDescriptionIconSwitch)
-            $0.addFormRow(label: "Directional", view: showDirectionalIconSwitch)
+            $0.title = "Description Icon "
+            $0.addFormRow(label: "Show", view: showDescriptionIconSwitch)
         }))
+        append(section: descriptionIconFormStackView)
+        descriptionIconFormStackView.addFormRow(label: "Icon", view: descriptionNamePickerSelectorView)
+        descriptionIconFormStackView.addFormRow(label: "Size", view: descriptionIconSizePickerSelectorView)
+        descriptionIconFormStackView.addFormRow(label: "Light", view: descriptionIconLightColorView)
+        descriptionIconFormStackView.addFormRow(label: "Dark", view: descriptionIconDarkColorView)
 
+        append(section: .init().with({
+            $0.title = "Directional Icon"
+            $0.addFormRow(label: "Show", view: showDirectionalIconSwitch)
+        }))
+        append(section: directionalIconFormStackView)
+        directionalIconFormStackView.addFormRow(label: "Icon", view: directionIconPickerSelectorView)
+        directionalIconFormStackView.addFormRow(label: "Size", view: directionIconSizePickerSelectorView)
+        directionalIconFormStackView.addFormRow(label: "Light", view: directionalIconLightColorView)
+        directionalIconFormStackView.addFormRow(label: "Dark", view: directionalIconDarkColorView)
+        
         clickableSwitch.onChange = { [weak self] sender in
             guard let self else { return }
             if sender.isOn {
@@ -355,18 +428,22 @@ class TileletViewController: BaseViewController<Tilelet> {
             }.store(in: &subscribers)
         
         showDescriptionIconSwitch.onChange = { [weak self] sender in
+            self?.descriptionIconFormStackView.isHidden = !sender.isOn
+            self?.directionalIconFormStackView.isHidden = sender.isOn
             if sender.isOn {
                 self?.showDirectionalIconSwitch.isOn = false
-                self?.component.descriptiveIconModel = .init(size: .medium)
+                self?.setDescriptiveIconModel()
             } else {
                 self?.component.descriptiveIconModel = nil
             }
         }
         
         showDirectionalIconSwitch.onChange = { [weak self] sender in
+            self?.descriptionIconFormStackView.isHidden = sender.isOn
+            self?.directionalIconFormStackView.isHidden = !sender.isOn
             if sender.isOn {
                 self?.showDescriptionIconSwitch.isOn = false
-                self?.component.directionalIconModel = .init(size: .medium)
+                self?.setDirectionalIconModel()
             } else {
                 self?.component.directionalIconModel = nil
             }
@@ -433,6 +510,16 @@ class TileletViewController: BaseViewController<Tilelet> {
         textPositionPickerSelectorView.text = component.textPostion.rawValue
         scalingTypePickerSelectorView.text = component.aspectRatio.rawValue
         updateOtherTextStyles()
+        
+        descriptionIconLightColorView.selectedColor = VDSColor.elementsPrimaryOnlight
+        descriptionIconDarkColorView.selectedColor = VDSColor.elementsPrimaryOndark
+        descriptionNamePickerSelectorView.text = Icon.Name.multipleDocuments.rawValue
+        descriptionIconSizePickerSelectorView.text = Icon.Size.medium.rawValue
+
+        directionalIconLightColorView.selectedColor = VDSColor.elementsPrimaryOnlight
+        directionalIconDarkColorView.selectedColor = VDSColor.elementsPrimaryOndark
+        directionIconPickerSelectorView.text = Tilelet.DirectionalIcon.IconType.rightArrow.rawValue
+        directionIconSizePickerSelectorView.text = Tilelet.DirectionalIcon.IconSize.medium.rawValue
     }
     
     //sub models
@@ -511,6 +598,34 @@ class TileletViewController: BaseViewController<Tilelet> {
         }
     }
     
+    func setDescriptiveIconModel() {
+        let light = descriptionIconLightColorView.selectedColor ?? descriptionIconDarkColorView.selectedColor
+        let dark = descriptionIconDarkColorView.selectedColor ?? descriptionIconLightColorView.selectedColor
+        let iconSize = descriptionIconSizePickerSelectorView.selectedItem
+        let iconName = descriptionNamePickerSelectorView.selectedItem
+        
+        if let light, let dark {
+            component.descriptiveIconModel = .init(name: iconName,
+                                                   colorConfiguration: SurfaceColorConfiguration(light, dark), size: iconSize)
+        } else {
+            component.descriptiveIconModel = .init(name: iconName,
+                                                   size: iconSize)
+        }
+    }
+    
+    func setDirectionalIconModel() {
+        let light = directionalIconLightColorView.selectedColor ?? directionalIconDarkColorView.selectedColor
+        let dark = directionalIconDarkColorView.selectedColor ?? directionalIconLightColorView.selectedColor
+        let iconType = directionIconPickerSelectorView.selectedItem
+        let iconSize = directionIconSizePickerSelectorView.selectedItem
+                        
+        if let light, let dark {
+            component.directionalIconModel = .init(iconType: iconType, colorConfiguration: SurfaceColorConfiguration(light, dark), size: iconSize)
+        } else {
+            component.directionalIconModel = .init(iconType: iconType, size: iconSize)
+        }
+    }
+    
     func updateOtherTextStyles() {
         let items = component.titleLockup.standardStyleConfiguration.configuration(for: titleStandardStylePickerSelectorView.selectedItem.value)!.allOtherStandardStyles
         let otheritems = items.compactMap { Tilelet.SubTitleModel.OtherStandardStyle(rawValue: $0.rawValue)! }
@@ -583,7 +698,7 @@ class TileletViewController: BaseViewController<Tilelet> {
         }
         
         eyebrowColorPickerSelectorView.onPickerDidSelect  = {  [weak self] item in
-            self?.currentLabelType = .eyebrow
+            self?.currentSurfaceColorType = .eyebrow
             self?.eyebrowColorsFormStackView.isHidden = item != .custom
             if item != .custom {
                 self?.setEyebrowModel()
@@ -591,7 +706,7 @@ class TileletViewController: BaseViewController<Tilelet> {
         }
         
         titleColorPickerSelectorView.onPickerDidSelect  = {  [weak self] item in
-            self?.currentLabelType = .title
+            self?.currentSurfaceColorType = .title
             self?.titleColorsFormStackView.isHidden = item != .custom
             if item != .custom {
                 self?.setTitleModel()
@@ -599,13 +714,28 @@ class TileletViewController: BaseViewController<Tilelet> {
         }
         
         subtitleColorPickerSelectorView.onPickerDidSelect  = {  [weak self] item in
-            self?.currentLabelType = .subtitle
+            self?.currentSurfaceColorType = .subtitle
             self?.subtitleColorsFormStackView.isHidden = item != .custom
             if item != .custom {
                 self?.setSubTitleModel()
             }
         }
 
+        descriptionNamePickerSelectorView.onPickerDidSelect  = {  [weak self] item in
+            self?.setDescriptiveIconModel()
+        }
+        
+        descriptionIconSizePickerSelectorView.onPickerDidSelect  = {  [weak self] item in
+            self?.setDescriptiveIconModel()
+        }
+        
+        directionIconPickerSelectorView.onPickerDidSelect  = {  [weak self] item in
+            self?.setDirectionalIconModel()
+        }
+        
+        directionIconSizePickerSelectorView.onPickerDidSelect  = {  [weak self] item in
+            self?.setDirectionalIconModel()
+        }
     }
     
     func getTilelet(effect: TileContainer.BackgroundEffect) -> Tilelet.BackgroundEffect {
@@ -683,7 +813,7 @@ extension TileletViewController: UIColorPickerViewControllerDelegate {
             var lightColorView: ColorPickerView<ColorPickerType>
             var darkColorView: ColorPickerView<ColorPickerType>
             
-            switch currentLabelType {
+            switch currentSurfaceColorType {
             case .eyebrow:
                 lightColorView = eyebrowLightColorView
                 darkColorView = eyebrowDarkColorView
@@ -693,19 +823,30 @@ extension TileletViewController: UIColorPickerViewControllerDelegate {
             case .subtitle:
                 lightColorView = subtitleLightColorView
                 darkColorView = subtitleDarkColorView
+            case .directionalIcon:
+                lightColorView = directionalIconLightColorView
+                darkColorView = directionalIconDarkColorView
+            case .descriptionIcon:
+                lightColorView = descriptionIconLightColorView
+                darkColorView = descriptionIconDarkColorView
             }
             if colorPickerType == .light {
                 lightColorView.selectedColor = viewController.selectedColor
             } else {
                 darkColorView.selectedColor = viewController.selectedColor
             }
-            switch currentLabelType {
+            
+            switch currentSurfaceColorType {
             case .eyebrow:
                 setEyebrowModel()
             case .title:
                 setTitleModel()
             case .subtitle:
                 setSubTitleModel()
+            case .directionalIcon:
+                setDirectionalIconModel()
+            case .descriptionIcon:
+                setDescriptiveIconModel()
             }
         }
     }