diff --git a/VDS/Components/PriceLockup/PriceLockup.swift b/VDS/Components/PriceLockup/PriceLockup.swift
index 745dc3c0..ef11a2cb 100644
--- a/VDS/Components/PriceLockup/PriceLockup.swift
+++ b/VDS/Components/PriceLockup/PriceLockup.swift
@@ -31,25 +31,96 @@ open class PriceLockup: View {
     //--------------------------------------------------
     // MARK: - Enums
     //--------------------------------------------------
+    /// Enum used to describe the kind of PriceLockup.
+    public enum Kind: String, CaseIterable {
+        case primary, secondary, savings
+    }
+    
+    /// Enum used to describe the term of PriceLockup.
+    public enum Term: String, CaseIterable {
+        case month, year, biennial, none
+    }
+    
+    /// Enum type describing size of PriceLockup.
+    public enum Size: String, CaseIterable {
+        case xxxsmall
+        case xxsmall
+        case xsmall
+        case small
+        case medium
+        case large
+        case xlarge
+        case xxlarge
+    }
     
     //--------------------------------------------------
     // MARK: - Public Properties
     //--------------------------------------------------
     
+    /// If true, the component will render as bold.
+    open var bold: Bool = false { didSet { setNeedsUpdate() } }
+    
+    /// Currency - If hideCurrency true, the component will render without currency.
+    open var hideCurrency: Bool = false { didSet { setNeedsUpdate() } }
+
+    /// Leading text for the component.
+    open var leadingText: String? { didSet { setNeedsUpdate() } }
+
+    /// Value rendered for the component.
+    open var price: CGFloat? { didSet { setNeedsUpdate() } }
+    
+    /// Color to the component. The default kind is primary.
+    open var kind: Kind = .primary { didSet { setNeedsUpdate() } }
+
+    /// Size of the component. It varies by size and viewport(mobile/Tablet).
+    /// The default size is medium with viewport mobile.
+    open var size: Size = .medium { didSet { setNeedsUpdate() } }
+
+    /// If true, the component with a strikethrough. It applies only when uniformSize is true.
+    /// Does not apply a strikethrough format to leading and trailing text.
+    open var strikethrough: Bool = false { didSet { setNeedsUpdate() } }
+
+    /// Term text for the component. Superscript placement can vary when term and delimeter are "none".
+    /// The default term is 'month'.
+    open var term: Term = .month { didSet { setNeedsUpdate() } }
+    
+    /// Trailing text for the component.
+    open var trailingText: String? { didSet { setNeedsUpdate() } }
+    
+    /// Superscript text for the component.
+    open var superscript: String? { didSet { setNeedsUpdate() } }
+    
+    /// If true, currency and value have the same font text style as delimeter, term label and superscript.
+    /// This will render the pricing and term sections as a uniform size.
+    open var uniformSize: Bool = false { didSet { setNeedsUpdate() } }
+
+    
     //--------------------------------------------------
     // MARK: - Private Properties
     //--------------------------------------------------
-    
+    internal var containerView = View().with {
+        $0.clipsToBounds = true
+    }
     //--------------------------------------------------
     // MARK: - Configuration Properties
     //--------------------------------------------------
-    
+    internal var containerSize: CGSize { CGSize(width: 45, height: 44) }
+
     //--------------------------------------------------
     // MARK: - Overrides
     //--------------------------------------------------
     /// Called once when a view is initialized and is used to Setup additional UI or other constants and configurations.
     open override func setup() {
         super.setup()
+        addSubview(containerView)
+        containerView
+            .pinTop()
+            .pinBottom()
+            .pinLeadingGreaterThanOrEqualTo()
+            .pinTrailingLessThanOrEqualTo()
+            .height(containerSize.height)
+        
+        containerView.centerXAnchor.constraint(equalTo: centerXAnchor).activate()
     }
     
     /// Used to make changes to the View based off a change events or from local properties.