diff --git a/VDS/Components/Tilet/Tilet.swift b/VDS/Components/Tilet/Tilet.swift
index 417a7f08..1dd1424d 100644
--- a/VDS/Components/Tilet/Tilet.swift
+++ b/VDS/Components/Tilet/Tilet.swift
@@ -36,7 +36,7 @@ public enum TiletOtherTypographicalStyle: String, Codable, EnumSubset {
 
 
 @objc(VDSTilet)
-open class Tilet: View {
+open class Tilet: TileContainer {
     
     //--------------------------------------------------
     // MARK: - Initializers
@@ -58,12 +58,68 @@ open class Tilet: View {
     //--------------------------------------------------
     // MARK: - Private Properties
     //--------------------------------------------------
-    private var tileContainer = TileContainer().with {
-        $0.aspectRatio = .none
-        $0.surface = .light
+    private var titleLockup = TitleLockup().with {
+        let configs = [
+            TypographicalStyleDeviceSpacingConfig([.TitleSmall, .BoldTitleSmall],
+                                                  neighboring: [
+                                                    .BodySmall, .BoldBodySmall,
+                                                        .BodyMedium, .BoldBodyMedium
+                                                  ],
+                                                  spacing: 8.0,
+                                                  deviceType: .iPhone),
+            
+            TypographicalStyleDeviceSpacingConfig([.TitleMedium, .BoldTitleMedium,
+                                                   .TitleLarge, .BoldTitleLarge],
+                                                  neighboring: [
+                                                    .BodySmall, .BoldBodySmall,
+                                                    .BodyMedium, .BoldBodyMedium,
+                                                    .BodyLarge, .BoldBodyLarge],
+                                                  spacing: 8.0,
+                                                  deviceType: .iPhone),
+            
+            TypographicalStyleDeviceSpacingConfig([.TitleXLarge, .BoldTitleXLarge],
+                                                  neighboring: [
+                                                    .BodySmall, .BoldBodySmall,
+                                                    .BodyMedium, .BoldBodyMedium,
+                                                    .BodyLarge, .BoldBodyLarge,
+                                                    .TitleMedium, .BoldTitleMedium
+                                                  ],
+                                            spacing: 12.0,
+                                            deviceType: .iPhone),
+            
+            TypographicalStyleDeviceSpacingConfig([.TitleSmall, .BoldTitleSmall,
+                                                   .TitleMedium, .BoldTitleMedium],
+                                                  neighboring: [
+                                                    .BodySmall, .BoldBodySmall,
+                                                    .BodyMedium, .BoldBodyMedium,
+                                                    .BodyLarge, .BoldBodyLarge
+                                                  ],
+                                                  spacing: 8.0,
+                                                  deviceType: .iPad),
+            
+            TypographicalStyleDeviceSpacingConfig([.TitleLarge, .BoldTitleLarge],
+                                                  neighboring: [
+                                                    .BodySmall, .BoldBodySmall,
+                                                    .BodyMedium, .BoldBodyMedium,
+                                                    .BodyLarge, .BoldBodyLarge,
+                                                    .TitleSmall, .BoldTitleSmall
+                                                  ],
+                                            spacing: 12.0,
+                                            deviceType: .iPad),
+            
+            TypographicalStyleDeviceSpacingConfig([.TitleXLarge, .BoldTitleXLarge],
+                                                  neighboring: [
+                                                    .BodyLarge, .BoldBodyLarge,
+                                                    .TitleMedium, .BoldTitleMedium
+                                                  ],
+                                            spacing: 16.0,
+                                            deviceType: .iPad)
+
+           ]
+        
+        $0.bottomTypographicalStyleSpacingConfig = TypographicalStyleSpacingConfig(configs: configs)
     }
     
-    private var titleLockup = TitleLockup()
     
     //--------------------------------------------------
     // MARK: - Public Properties
@@ -72,8 +128,6 @@ open class Tilet: View {
     open var titleTypograpicalStyle: TiletTitleTypographicalStyle = .BoldTitleSmall { didSet { didChange() }}
     open var otherTypograpicalStyle: TiletOtherTypographicalStyle = .BodySmall { didSet { didChange() }}
 
-    open var width: CGFloat = 100 { didSet { didChange() }}
-    
     private var _textWidth: CGFloat?
     open var textWidth: CGFloat? {
         get { _textWidth }
@@ -107,15 +161,21 @@ open class Tilet: View {
         }
     }
     
+    //badge
+    open var showBadge: Bool = false { didSet { didChange() }}
+    open var badgeText: String = "" { didSet { didChange() }}
+    open var badgeColor: BadgeFillColor = .red { didSet { didChange() }}
+
     //text
     open var titleText: String = "" { didSet { didChange() }}
     open var titleTextAttributes: [any LabelAttributeModel]? { didSet { didChange() }}
-    
     open var subTitleText: String = "" { didSet { didChange() }}
     open var subTitleTextAttributes: [any LabelAttributeModel]? { didSet { didChange() }}
-    
     open var subTitleColor: Use = .primary { didSet { didChange() }}
 
+    //icons
+        
+    
     //--------------------------------------------------
     // MARK: - Constraints
     //--------------------------------------------------
@@ -128,23 +188,25 @@ open class Tilet: View {
     
     open override func setup() {
         super.setup()
-        addSubview(tileContainer)
-        tileContainer.pinToSuperView()
-        tileContainer.addContentView(titleLockup, shouldPin: false)
+        width = 100
+        aspectRatio = .none
+        containerBackgroundColor = .black
+        
+        addContentView(titleLockup, shouldPin: false)
         titleLockup.pinTop()
         titleLockup.pinLeading()
-        titleLockup.pinBottom()
+        titleLockup.bottomAnchor.constraint(lessThanOrEqualTo: containerView.bottomAnchor).isActive = true
         
         //either you are 100% width of the tileContainer.contentView
-        titleLockupTrailingConstraint = titleLockup.trailingAnchor.constraint(equalTo: tileContainer.containerView.trailingAnchor)
+        titleLockupTrailingConstraint = titleLockup.trailingAnchor.constraint(equalTo: containerView.trailingAnchor)
         titleLockupTrailingConstraint?.isActive = true
     }
     
     public override func reset() {
         super.reset()
-        tileContainer.reset()
-        tileContainer.aspectRatio = .none
-        tileContainer.surface = .light
+        aspectRatio = .none
+        surface = .light
+        containerBackgroundColor = .black
 
         titleLockup.reset()
         
@@ -161,14 +223,9 @@ open class Tilet: View {
    
     open override func updateView() {
         super.updateView()
-        
-        //flip the color
-        let flippedColor:TileContainer.ContainerBackgroundColor = surface == .dark ? .white : .black
-        tileContainer.containerBackgroundColor = flippedColor
-        tileContainer.width = width
-        
+                
         //flip the surface for the titleLockup
-        let flippedSurface: Surface = surface == .dark ? .light : .dark
+        let flippedSurface: Surface = containerBackgroundColor == .black ? .dark : .light
         titleLockup.surface = flippedSurface
         
         //either use textWidth
@@ -184,7 +241,7 @@ open class Tilet: View {
             titleLockupWidthConstraint = NSLayoutConstraint(item: titleLockup,
                                                                attribute: .width,
                                                                relatedBy: .equal,
-                                                               toItem: tileContainer.containerView,
+                                                               toItem: containerView,
                                                                attribute: .width,
                                                                multiplier: textPercentage / 100,
                                                                constant: 0.0)
@@ -206,3 +263,5 @@ open class Tilet: View {
         titleLockup.subTitleColor = subTitleColor
     }
 }
+
+